/* ============================================================================
   KING COCOPRIME RESPONSIVE OVERRIDES - PHASE 4C.7B
   Goal: keep the approved native desktop look, then adapt only at tablet/mobile.
   IMPORTANT: no global img height:auto and no global container max-width override.
   ============================================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.site-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.site-body video,
body.site-body iframe,
body.site-body svg {
    max-width: 100%;
}

body.site-body input,
body.site-body select,
body.site-body textarea,
body.site-body button {
    max-width: 100%;
}

@media (pointer: coarse) {
    body.site-body a,
    body.site-body button,
    body.site-body .cat-tab,
    body.site-body .filter-btn,
    body.site-body .nav-step {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================================================
   TABLET / SMALL LAPTOP <= 1024px
   ============================================================================ */
@media (max-width: 1024px) {
    /* Keep each page's own max-width. Only add safe side breathing room. */
    body.site-body main > .container,
    body.site-body section > .container,
    body.site-body footer > .container {
        padding-left: 22px;
        padding-right: 22px;
        box-sizing: border-box;
    }

    /* HOME */
    .hero-slider-section {
        height: auto !important;
        min-height: clamp(640px, 88svh, 780px) !important;
    }

    .hero-overlay .container {
        padding-top: 115px !important;
        padding-bottom: 80px !important;
    }

    .hero-content-centered {
        width: min(100%, 760px) !important;
        margin-inline: auto;
    }

    .hero-content-centered h1 {
        font-size: clamp(38px, 6vw, 52px) !important;
    }

    .hero-content-centered h2 {
        font-size: clamp(18px, 2.7vw, 24px) !important;
        letter-spacing: clamp(1px, .3vw, 3px) !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .about .container {
        gap: 34px !important;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .latest-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .packing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Critical fix: preserve intentional logo height. */
    .shipping-logos img {
        width: auto !important;
        height: 88px !important;
        max-width: 180px !important;
        object-fit: contain !important;
        margin-right: 64px !important;
    }

    html[dir="rtl"] .shipping-logos img {
        margin-right: 0 !important;
        margin-left: 64px !important;
    }

    /* ABOUT */
    .hero-section {
        margin-top: 92px !important;
        gap: 32px !important;
    }

    .info-split,
    .info-split.reverse {
        gap: 34px !important;
    }

    .stats-section {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* PRODUCTS */
    .product-hero {
        min-height: auto !important;
        padding-top: 125px !important;
        padding-bottom: 58px !important;
    }

    .product-hero .container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 28px !important;
    }

    .ph-content {
        max-width: 760px !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .ph-features-clean {
        justify-content: center !important;
    }

    .ph-slider-area {
        width: 100% !important;
        min-height: 430px !important;
        align-items: center !important;
    }

    .slider-nav {
        right: 50% !important;
        transform: translateX(50%) !important;
    }

    .pd-top {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .pd-gallery-main,
    .pd-info-main {
        width: 100% !important;
    }

    .pd-info-main { padding-top: 0 !important; }

    /* BUYER */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .custom-table { min-width: 700px; }

    /* NEWS DETAIL */
    .kcnd-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .kcnd-side { display: none !important; }

    /* FOOTER */
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px !important;
    }
}

/* ============================================================================
   MOBILE / PORTRAIT TABLET <= 768px
   ============================================================================ */
@media (max-width: 768px) {
    body.site-body main > .container,
    body.site-body section > .container,
    body.site-body footer > .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Avoid giant whitespace but keep the site's original section rhythm. */
    .why-choose-us,
    .about,
    .products,
    .latest-news,
    .packing,
    .shipping,
    .info-section,
    .gallery-section,
    .product-catalog-section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .section-header { margin-bottom: 30px !important; }
    .section-header h2 { text-align: center; line-height: 1.3 !important; }

    /* HOME */
    .hero-slider-section {
        min-height: 620px !important;
    }

    .hero-overlay .container {
        padding-top: 105px !important;
        padding-bottom: 70px !important;
    }

    .hero-content-centered h1 {
        font-size: clamp(32px, 8.6vw, 43px) !important;
        line-height: 1.08 !important;
    }

    .hero-content-centered h2 {
        font-size: clamp(15px, 4vw, 20px) !important;
        line-height: 1.5 !important;
        margin-bottom: 26px !important;
    }

    .hero-buttons {
        width: min(100%, 410px);
        margin-inline: auto;
        flex-direction: column !important;
        gap: 11px !important;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 48px;
    }

    .slider-indicators { bottom: 22px !important; }

    /* 2-column feature cards stay compact and closer to desktop identity. */
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .feature-item { padding: 24px 12px !important; }

    .about .container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }

    .about-image,
    .about-content { width: 100% !important; }
    .about-content { text-align: center; }

    .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .products-grid,
    .latest-news-grid,
    .latest-news-grid.single-card,
    .packing-grid {
        grid-template-columns: 1fr !important;
    }

    .product-card,
    .latest-news-card,
    .packing-card {
        width: min(100%, 430px) !important;
        margin-inline: auto !important;
    }

    /* PHASE 4D.2A: show the complete news artwork on responsive screens.
       The current news image contains important text in the lower part of the image,
       so a fixed-height cover crop hides content on mobile. */
    .latest-news-image {
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        background: #151515 !important;
    }

    .latest-news-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .latest-news-card:hover .latest-news-image img {
        transform: none !important;
    }

    .product-image-wrapper { height: 220px !important; }

    .shipping { overflow: hidden; }
    .marquee-wrapper { padding: 26px 0 !important; }
    .shipping-logos img {
        width: auto !important;
        height: 68px !important;
        max-width: 140px !important;
        margin-right: 42px !important;
    }
    html[dir="rtl"] .shipping-logos img {
        margin-right: 0 !important;
        margin-left: 42px !important;
    }

    /* ABOUT */
    .hero-section {
        margin-top: 86px !important;
        margin-bottom: 40px !important;
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .hero-content h1 { font-size: clamp(32px, 8vw, 40px) !important; }
    .hero-image img { max-width: 100% !important; }

    .info-split,
    .info-split.reverse {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .stats-section {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-bottom: 58px !important;
    }

    .video-gallery-grid { grid-template-columns: 1fr !important; }

    /* PRODUCTS */
    .product-hero {
        padding-top: 105px !important;
        padding-bottom: 48px !important;
    }

    .ph-title { font-size: clamp(32px, 8vw, 40px) !important; }
    .ph-desc { font-size: 14px !important; line-height: 1.75 !important; }

    .ph-slider-area {
        min-height: 350px !important;
        padding-top: 44px !important;
    }

    .product-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding: 4px 2px 13px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .product-tabs::-webkit-scrollbar { display: none; }

    .cat-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 11px 20px !important;
        white-space: nowrap;
    }

    .pd-main-display { aspect-ratio: 1 / 1 !important; }

    .thumbnail-master-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .thumb-category-box,
    .thumb-category-box:only-child {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .thumb-label {
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }

    .pd-bottom-grid,
    .grade-cards-grid,
    .pack-horizontal-grid,
    .shape-container {
        grid-template-columns: 1fr !important;
    }

    .pd-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pd-action-row .btn-whatsapp,
    .pd-action-row .btn-contact-grade,
    .btn-contact-grade,
    .btn-whatsapp {
        width: 100% !important;
        justify-content: center !important;
    }

    /* BUYER INFO */
    .buyer-hero { padding: 108px 0 54px !important; }
    .buyer-hero h1 { font-size: clamp(30px, 8vw, 39px) !important; }

    .process-display,
    .terms-layout,
    .spec-layout,
    .shipping-layout {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .process-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .process-nav::-webkit-scrollbar { display: none; }
    .nav-step { flex: 0 0 44px !important; min-width: 44px; min-height: 44px; }

    .grid-layout { grid-template-columns: 1fr !important; }
    .cta-buttons { flex-direction: column !important; align-items: stretch !important; }
    .cta-buttons a { width: 100%; text-align: center; }

    /* NEWS INDEX */
    .featured-card { grid-template-columns: 1fr !important; }
    .featured-image { min-height: 240px !important; }
    .news-grid { grid-template-columns: 1fr !important; }
    .news-search { width: 100% !important; }
    .news-filter-bar { align-items: stretch !important; }

    /* NEWS DETAIL */
    .kcnd-page { --kcnd-navbar-clearance: 98px !important; }
    .kcnd-shell { width: 100% !important; max-width: 100% !important; }
    .kcnd-hero img { width: 100% !important; height: auto !important; }
    .kcnd-related-grid { grid-template-columns: 1fr !important; }
    .kcnd-breadcrumb { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }

    /* CONTACT */
    .contact-elite {
        min-height: auto !important;
        padding: 105px 18px 58px !important;
    }
    .contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .elite-form .form-row { grid-template-columns: 1fr !important; }

    /* FOOTER */
    footer { padding-top: 46px !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .footer-about .logo-img { max-width: 220px !important; }

    .floating-wa {
        right: 16px !important;
        bottom: 16px !important;
    }
    html[dir="rtl"] .floating-wa {
        right: auto !important;
        left: 16px !important;
    }
}

/* ============================================================================
   SMALL MOBILE <= 480px
   ============================================================================ */
@media (max-width: 480px) {
    body.site-body main > .container,
    body.site-body section > .container,
    body.site-body footer > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-header::before,
    .section-header::after { max-width: 34px !important; }

    .section-header h2 {
        margin-inline: 8px !important;
        font-size: clamp(20px, 6vw, 26px) !important;
    }

    .hero-slider-section { min-height: 590px !important; }
    .hero-content-centered h1 { font-size: clamp(30px, 9.5vw, 38px) !important; }
    .hero-content-centered h2 { font-size: 14.5px !important; }

    .features-grid { gap: 10px !important; }
    .feature-item { min-height: 145px; padding: 20px 10px !important; }

    .about-stats,
    .stats-section { grid-template-columns: 1fr 1fr !important; }

    .product-image-wrapper { height: 205px !important; }

    .shipping-logos img {
        height: 58px !important;
        max-width: 120px !important;
        margin-right: 34px !important;
    }
    html[dir="rtl"] .shipping-logos img { margin-left: 34px !important; }

    .ph-title { font-size: 30px !important; }
    .ph-features-clean {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
        gap: 10px !important;
    }

    .ph-slider-area { min-height: 315px !important; }
    .nav-arrow { width: 42px !important; height: 42px !important; }

    .pd-title { font-size: clamp(27px, 8vw, 34px) !important; }
    .product-breadcrumb { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }

    .section-title { font-size: 22px !important; align-items: flex-start !important; }
    .process-img-container { min-height: 220px !important; }

    .featured-image { min-height: 210px !important; }

    .kcnd-title { font-size: clamp(27px, 8vw, 33px) !important; }
    .kcnd-content,
    .kcnd-content p,
    .kcnd-content li { font-size: 15.5px !important; line-height: 1.82 !important; }

    .footer-about .logo-img { max-width: 195px !important; }
    .floating-wa { width: 50px !important; height: 50px !important; font-size: 27px !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .hero-slider-section { min-height: 540px !important; }
    .hero-overlay .container { padding-top: 90px !important; padding-bottom: 50px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================================
   HOMEPAGE MOBILE POLISH - PRE HOSTING
   Scope: Homepage only. Desktop and other pages are intentionally untouched.
   ============================================================================ */
@media (max-width: 768px) {
    body.page-home .about-content p {
        font-size: 14.5px !important;
        line-height: 1.82 !important;
        margin-bottom: 26px !important;
    }

    body.page-home .products-title,
    body.page-home .latest-news-heading {
        margin-bottom: 32px !important;
    }

    body.page-home .latest-news-card {
        border-radius: 10px !important;
        border-color: rgba(255, 255, 255, 0.075) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }

    body.page-home .latest-news-body {
        padding: 20px 20px 21px !important;
    }

    body.page-home .latest-news-body h3 {
        font-size: 17px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    body.page-home .latest-news-body p {
        min-height: 0 !important;
        margin-bottom: 16px !important;
        font-size: 13.5px !important;
        line-height: 1.72 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    body.page-home .latest-news-meta {
        margin-bottom: 10px !important;
        font-size: 11px !important;
        gap: 7px !important;
    }

    body.page-home .latest-news-link {
        min-height: 38px;
        align-items: center;
        font-size: 11.5px !important;
    }

    body.page-home .latest-news-actions {
        margin-top: 28px !important;
    }

    body.page-home .shipping {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    body.page-home .shipping .section-header {
        margin-bottom: 14px !important;
    }

    body.page-home .marquee-wrapper {
        padding: 20px 0 !important;
    }

    body.page-home .shipping-logos img {
        height: 76px !important;
        max-width: 160px !important;
        margin-right: 46px !important;
    }

    html[dir="rtl"] body.page-home .shipping-logos img {
        margin-right: 0 !important;
        margin-left: 46px !important;
    }
}

@media (max-width: 620px) {
    body.page-home .products {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    body.page-home .products-title h2 {
        font-size: clamp(24px, 7vw, 29px) !important;
        line-height: 1.32 !important;
    }

    body.page-home .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    body.page-home .products-grid > .product-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 10px !important;
        min-width: 0 !important;
    }

    body.page-home .products-grid > .product-card:last-child:nth-child(odd):not(:only-child) {
        grid-column: 1 / -1;
        width: calc(50% - 6px) !important;
        justify-self: center;
    }

    body.page-home .products-grid > .product-card:only-child {
        grid-column: 1 / -1;
        width: min(100%, 280px) !important;
        justify-self: center;
    }

    body.page-home .product-image-wrapper {
        height: 145px !important;
    }

    body.page-home .product-content {
        padding: 13px 10px 11px !important;
    }

    body.page-home .product-content h3 {
        font-size: 12.5px !important;
        line-height: 1.38 !important;
        margin-bottom: 6px !important;
    }

    body.page-home .product-content .specs {
        font-size: 10.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
    }

    /* Homepage mobile is a product teaser. The detail page keeps the full copy. */
    body.page-home .product-content .desc {
        display: none !important;
    }

    body.page-home .product-content .view-details {
        margin-top: auto !important;
        min-height: 36px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 7px 5px !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        letter-spacing: .65px !important;
    }

    body.page-home .latest-news {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    body.page-home .latest-news-heading h2 {
        font-size: clamp(23px, 6.7vw, 27px) !important;
        line-height: 1.35 !important;
    }

    body.page-home .latest-news-grid {
        gap: 18px !important;
    }
}

@media (max-width: 480px) {
    body.page-home .about-content h2 {
        font-size: clamp(25px, 7.6vw, 30px) !important;
        line-height: 1.28 !important;
    }

    body.page-home .about-content p {
        font-size: 14px !important;
    }

    body.page-home .product-image-wrapper {
        height: 132px !important;
    }

    body.page-home .product-content h3 {
        font-size: 12px !important;
    }

    body.page-home .shipping-logos img {
        height: 72px !important;
        max-width: 148px !important;
        margin-right: 42px !important;
    }

    html[dir="rtl"] body.page-home .shipping-logos img {
        margin-right: 0 !important;
        margin-left: 42px !important;
    }
}