/* =========================================================
   RESPONSIVE CSS
========================================================= */

/* =========================================================
   1180PX
========================================================= */

@media (max-width: 1180px) {
    /* Homepage products preview */
    .products-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Trust badges */
    .trust-badges-card {
        grid-template-columns: repeat(3, 1fr);
    }

    .trust-badge-item {
        border-bottom: 1px solid var(--color-border);
    }

    .trust-badge-item:nth-child(3),
    .trust-badge-item:nth-child(5) {
        border-right: 0;
    }

    /* About preview */
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stat-item:nth-child(2) {
        border-right: 0;
    }

    .about-stat-item:nth-child(1),
    .about-stat-item:nth-child(2) {
        border-bottom: 1px solid var(--color-border);
    }

    /* Homepage process */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-arrow {
        display: none;
    }

    /* Why choose */
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Products page */
    .products-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-trust-item {
        border-bottom: 1px solid var(--color-border);
    }

    /* About page */
    .about-company-icons,
    .about-feature-grid,
    .about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-numbers-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-number-item {
        border-bottom: 1px solid var(--color-border);
    }

    /* Export process page */
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .document-support-grid,
    .buyer-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sustainability page */
    .sustainability-pillars-grid,
    .practices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   1024PX
========================================================= */

@media (max-width: 1024px) {
    /* General layout */
    .navbar-menu {
        gap: 20px;
    }

    .navbar-logo img {
        width: 190px;
    }

    .two-columns {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Homepage global reach / testimonials / CTA */
    .global-reach-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .homepage-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Product detail old/new layout support */
    .product-detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .product-spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-detail-main-grid,
    .product-about-card,
    .product-extra-grid {
        grid-template-columns: 1fr;
    }

    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-selling-points {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact page */
    .contact-main-grid,
    .location-card {
        grid-template-columns: 1fr;
    }

    .location-map {
        min-height: 300px;
    }

    /* About page */
    .about-company-grid,
    .about-story-grid,
    .vision-mission-grid,
    .about-sustainability-grid,
    .about-global-grid {
        grid-template-columns: 1fr;
    }

    .about-global-map {
        order: -1;
    }

    /* Export process page */
    .process-quality-grid,
    .process-coldchain-card {
        grid-template-columns: 1fr;
    }

    .process-quality-image {
        min-height: 320px;
    }

    /* Sustainability page */
    .sustainability-intro-grid,
    .responsible-sourcing-card,
    .community-grid {
        grid-template-columns: 1fr;
    }

    .responsible-sourcing-visual {
        order: -1;
    }

    .sustainability-intro-image,
    .community-image {
        min-height: 330px;
    }
}


/* =========================================================
   900PX
========================================================= */

@media (max-width: 900px) {
    /* Products page hero */
    .products-hero-section {
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.86)),
            url("../images/hero/hero-seafood.jpg");
        background-size: cover;
        background-position: center;
    }

    .products-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .products-search {
        width: 100%;
    }

    .featured-product-card {
        grid-template-columns: 1fr;
    }

    .featured-product-image {
        min-height: 280px;
    }

    .products-bottom-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   860PX
========================================================= */

@media (max-width: 860px) {
    /* Navbar */
    .site-navbar {
        height: 74px;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-menu {
        position: fixed;
        top: 74px;
        left: 0;
        width: 100%;
        padding: 24px 20px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
    }

    .navbar-menu.is-active {
        display: flex;
    }

    .navbar-cta {
        display: none;
    }

    /* Footer */
    .footer-cta-container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Homepage hero */
    .hero-section {
        min-height: 590px;
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.82)),
            url("../images/hero/hero-seafood.jpg");
        background-size: cover;
        background-position: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content p {
        font-size: 16px;
    }

    /* Homepage trust badges */
    .trust-badges-section {
        margin-top: 0;
        padding-top: 22px;
        background-color: var(--color-light);
    }

    .trust-badges-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-badge-item:nth-child(3) {
        border-right: 1px solid var(--color-border);
    }

    /* Homepage products */
    .products-preview-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-preview-image {
        height: 210px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About preview */
    .about-preview-section {
        padding-top: 56px;
    }

    /* Why choose */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   760PX
========================================================= */

@media (max-width: 760px) {
    /* Product detail page */
    .product-detail-main {
        padding: 52px 0 34px;
    }

    .product-main-image {
        height: 320px;
    }

    .product-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-thumbnail {
        height: 95px;
    }

    .product-quick-row {
        grid-template-columns: 1fr;
        gap: 5px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-border);
    }

    .product-about-card {
        padding: 28px;
    }

    .product-selling-points,
    .related-products-grid,
    .packaging-grid {
        grid-template-columns: 1fr;
    }

    .product-form-detail-row,
    .product-spec-list div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* Contact page */
    .contact-hero-section {
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.86)),
            url("../images/hero/hero-seafood.jpg");
        background-size: cover;
        background-position: center;
    }

    .contact-main-section {
        padding-top: 46px;
    }

    .contact-form-card,
    .contact-info-card,
    .quick-contact-card,
    .supply-map-card,
    .location-content {
        padding: 26px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-hero-actions {
        flex-direction: column;
    }

    .contact-hero-actions .btn {
        width: 100%;
    }

    .map-pin-card {
        left: 20px;
        top: 30px;
    }

    .map-pin {
        right: 28px;
        top: 45%;
    }
}


/* =========================================================
   640PX
========================================================= */

@media (max-width: 640px) {
    /* General */
    .container {
        width: min(100% - 28px, var(--container));
    }

    .section {
        padding: 56px 0;
    }

    .section-sm {
        padding: 42px 0;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 30px;
    }

    /* Navbar */
    .navbar-logo img {
        width: 170px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand img {
        width: 190px;
    }

    /* Homepage hero */
    .hero-section {
        min-height: 560px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* Trust badges */
    .trust-badges-card {
        grid-template-columns: 1fr;
    }

    .trust-badge-item {
        border-right: 0;
    }

    .trust-badge-item:nth-child(3) {
        border-right: 0;
    }

    /* Homepage product preview */
    .products-preview-grid {
        grid-template-columns: 1fr;
    }

    .product-preview-image {
        height: 230px;
    }

    .product-preview-body p,
    .product-forms {
        min-height: auto;
    }

    /* Homepage products old support */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 190px;
    }

    /* About preview */
    .about-preview-image,
    .about-image-placeholder {
        min-height: 250px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-stat-item {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .about-stat-item:last-child {
        border-bottom: 0;
    }

    /* Why choose */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Homepage process */
    .process-step {
        padding: 20px;
        background-color: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }

    /* Homepage global reach */
    .global-map,
    .map-placeholder {
        min-height: 260px;
    }

    .map-point {
        font-size: 10px;
        padding: 6px 8px;
    }

    /* Homepage CTA */
    .homepage-cta-section {
        padding: 54px 0;
    }

    .homepage-cta-box .btn {
        width: 100%;
    }

    /* Product detail old support */
    .product-detail-hero {
        padding: 56px 0;
    }

    .product-detail-image,
    .product-detail-image.image-placeholder::before {
        min-height: 320px;
    }

    .product-detail-image img {
        height: 320px;
    }

    .product-detail-actions {
        flex-direction: column;
    }

    .product-detail-actions .btn {
        width: 100%;
    }

    .product-spec-grid,
    .related-products-grid {
        grid-template-columns: 1fr;
    }

    /* Products page */
    .products-hero-content {
        padding: 46px 0;
    }

    .products-hero-actions,
    .products-bottom-actions {
        width: 100%;
        flex-direction: column;
    }

    .products-hero-actions .btn,
    .products-bottom-actions .btn {
        width: 100%;
    }

    .products-category-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .products-category-filter a {
        padding-inline: 14px;
    }

    .products-page-grid,
    .products-trust-grid,
    .featured-product-info {
        grid-template-columns: 1fr;
    }

    .products-page-image {
        height: 240px;
    }

    .products-page-body p,
    .products-page-forms {
        min-height: auto;
    }

    .featured-product-content {
        padding: 28px;
    }

    .products-trust-item {
        border-right: 0;
    }

    /* Thank you page */
    .thank-you-section {
        min-height: auto;
        padding: 62px 0;
    }

    .thank-you-card {
        padding: 38px 24px;
    }

    .thank-you-summary {
        grid-template-columns: 1fr;
    }

    .thank-you-actions {
        flex-direction: column;
    }

    .thank-you-actions .btn {
        width: 100%;
    }

    /* About page */
    .about-hero-section {
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.86)),
            url("../images/backgrounds/about-hero.jpg");
        background-size: cover;
        background-position: center;
    }

    .about-company-section {
        padding-top: 46px;
    }

    .about-company-image,
    .about-sustainability-image,
    .about-image-placeholder {
        min-height: 250px;
    }

    .about-company-icons,
    .about-feature-grid,
    .about-values-grid,
    .about-numbers-card {
        grid-template-columns: 1fr;
    }

    .vision-mission-card {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .vision-mission-icon {
        width: 76px;
        height: 76px;
        font-size: 34px;
    }

    .about-number-item {
        border-right: 0;
    }

    /* Export process page */
    .process-hero-section {
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.86)),
            url("../images/backgrounds/process-hero.jpg");
        background-size: cover;
        background-position: center;
    }

    .process-hero-actions {
        flex-direction: column;
    }

    .process-hero-actions .btn {
        width: 100%;
    }

    .process-overview-section,
    .process-documents-section,
    .process-buyer-flow-section {
        padding: 48px 0;
    }

    .process-timeline,
    .document-support-grid,
    .buyer-flow-grid {
        grid-template-columns: 1fr;
    }

    .process-step-card,
    .document-support-card,
    .buyer-flow-card {
        min-height: auto;
    }

    .process-coldchain-card {
        padding: 30px 24px;
    }

    .coldchain-stat-item strong {
        font-size: 24px;
    }

    /* Sustainability page */
    .sustainability-hero-section {
        background:
            linear-gradient(90deg, rgba(246, 249, 252, 0.96), rgba(246, 249, 252, 0.86)),
            url("../images/backgrounds/sustainability-hero.jpg");
        background-size: cover;
        background-position: center;
    }

    .sustainability-hero-actions {
        flex-direction: column;
    }

    .sustainability-hero-actions .btn {
        width: 100%;
    }

    .sustainability-intro-section,
    .sustainability-pillars-section,
    .responsible-sourcing-section,
    .sustainability-practices-section,
    .sustainability-statement-section {
        padding: 48px 0;
    }

    .sustainability-pillars-grid,
    .practices-grid {
        grid-template-columns: 1fr;
    }

    .responsible-sourcing-card {
        padding: 30px 24px;
    }

    .responsible-circle {
        width: 220px;
        height: 220px;
    }

    .responsible-circle strong {
        font-size: 24px;
    }

    .community-point-card {
        grid-template-columns: 1fr;
    }

    .sustainability-statement-card {
        padding: 38px 24px;
    }
    .global-reach-map {
    height: 260px;
    }
}