/* ===== SANEXO HEADER — desktop + mobile like sanexo.nl ===== */

/* === DESKTOP HEADER === */
.snx-hdr { background: #fff; }
.snx-hdr-row {
    max-width: 1440px; margin: 0 auto;
    display: flex; align-items: center;
    padding: 12px 24px; gap: 24px;
}
.snx-hdr-logo { flex-shrink: 0; line-height: 0; }
.snx-hdr-logo img { height: 52px; width: auto; }

/* Search bar — outlined style like sanexo.nl */
.snx-hdr-search { flex: 1; max-width: 680px; position: relative; }
.snx-hdr-search input {
    width: 100%; border: 2px solid #0088cc; border-radius: 4px;
    padding: 11px 90px 11px 16px; font-size: 15px; font-family: inherit;
    outline: none; box-sizing: border-box; color: #333; background: #fff;
}
.snx-hdr-search input::placeholder { color: #aaa; font-size: 14px; }
.snx-hdr-search input:focus { border-color: #0161ae; box-shadow: 0 0 0 2px rgba(0,136,204,0.12); }
.snx-hdr-search-btn {
    position: absolute; right: 4px; top: 4px; bottom: 4px;
    padding: 0 22px; background: #fff; color: #0088cc; border: none;
    font-weight: 700; font-size: 15px; font-family: inherit;
    border-radius: 2px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.snx-hdr-search-btn:hover { color: #0161ae; }

/* Header icons — outlined circles like sanexo.nl */
.snx-hdr-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.snx-hdr-icon {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2px 10px; text-decoration: none; background: none; border: none;
    cursor: pointer; position: relative; min-width: 52px; transition: opacity 0.15s;
}
.snx-hdr-icon:hover { opacity: 0.7; }
.snx-hdr-icon svg { width: 36px; height: 36px; margin-bottom: 2px; }
.snx-hdr-icon .snx-lbl { font-size: 11px; font-weight: 500; white-space: nowrap; color: #333; }
.snx-badge {
    position: absolute; top: -2px; right: 2px;
    min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #8dc918; color: #fff;
    font-size: 10px; font-weight: 700; padding: 0 4px;
}

/* Search autocomplete dropdown (desktop + mobile) */
.snx-hdr-search { position: relative; }
.snx-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #0088cc;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 200;
}
.snx-search-dropdown-mobile {
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    max-height: 60vh;
}
.snx-search-group { }
.snx-search-group-title {
    background: #0088cc;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
}
.snx-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.snx-search-item:hover,
.snx-search-item:focus {
    background: #f7f9fb;
}
.snx-search-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #f5f5f5;
}
.snx-search-item-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
}
.snx-search-item-price {
    font-size: 14px;
    font-weight: 700;
    color: #e74c3c;
    white-space: nowrap;
}
.snx-search-item-price .price-box,
.snx-search-item-price .price { display: inline; }
.snx-search-item-price .old-price { color: #999; font-weight: 400; text-decoration: line-through; font-size: 12px; margin-right: 6px; }

/* Navigation bar — white with borders like current sanexo.nl.
   min-height: 52px prevents CLS — Amasty menu starts at 42px then grows to 52px
   after Alpine.js initializes. Reserving the final height eliminates the 10px shift. */
.snx-nav { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; position: relative; z-index: 100; min-height: 52px; }
.snx-nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Mobile elements hidden on desktop */
.snx-mobile-header { display: none; }
.snx-mobile-search { display: none; }

/* === MOBILE HEADER (< 1024px) === */
@media (max-width: 1023px) {
    /* Hide desktop elements */
    .snx-hdr-row { display: none; }
    /* Nav bar: remove border/padding but keep content (Amasty mobile menu lives here) */
    .snx-nav { border: none; padding: 0; min-height: 0; }
    .snx-nav-inner { padding: 0; }

    /* Show mobile header — fixed height to prevent CLS */
    .snx-mobile-header {
        display: flex; align-items: center;
        padding: 10px 16px; background: #fff;
        border-bottom: 1px solid #eee; gap: 12px;
        min-height: 56px; box-sizing: border-box;
    }

    /* Hamburger button + "Menu" label */
    .snx-mobile-hamburger {
        background: none; border: none; cursor: pointer; padding: 4px;
        display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
        gap: 2px;
    }
    .snx-mobile-hamburger svg { width: 28px; height: 28px; color: #333; }
    .snx-hamburger-label { font-size: 11px; color: #0088cc; font-weight: 600; }

    /* Mobile logo — centered */
    .snx-mobile-logo { flex: 1; text-align: center; line-height: 0; }
    .snx-mobile-logo img { height: 32px; width: auto; }

    /* Mobile icons — right side, compact */
    .snx-mobile-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .snx-mobile-icons a,
    .snx-mobile-icons button {
        background: none; border: none; cursor: pointer; padding: 4px;
        position: relative; text-decoration: none; display: flex;
    }
    .snx-mobile-icons svg { width: 24px; height: 24px; }
    .snx-mobile-badge {
        position: absolute; top: -4px; right: -6px;
        min-width: 16px; height: 16px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%; background: #e74c3c; color: #fff;
        font-size: 9px; font-weight: 700; padding: 0 3px;
    }

    /* Mobile search bar — fixed height to prevent CLS */
    .snx-mobile-search {
        display: block; padding: 8px 16px; background: #fff;
        border-bottom: 1px solid #eee;
        min-height: 60px; box-sizing: border-box;
        position: relative;
    }
    .snx-mobile-search form {
        display: flex; position: relative;
    }
    .snx-mobile-search input {
        width: 100%; border: 2px solid #0088cc; border-radius: 24px;
        padding: 10px 80px 10px 18px; font-size: 16px; font-family: inherit;
        outline: none; box-sizing: border-box; color: #333; background: #fff;
    }
    .snx-mobile-search input::placeholder { color: #aaa; font-size: 14px; }
    .snx-mobile-search-btn {
        position: absolute; right: 2px; top: 2px; bottom: 2px;
        padding: 0 18px; background: #0088cc; color: #fff; border: none;
        border-radius: 0 22px 22px 0; cursor: pointer;
        display: flex; align-items: center;
        font-weight: 700; font-size: 14px; font-family: inherit;
        text-transform: uppercase; letter-spacing: 0.5px;
    }
    .snx-mobile-zoek-icon { width: 20px; height: 20px; display: none; }
    .snx-mobile-zoek-text { display: inline; }

    /* Hide Amasty's default hamburger — we use our own */
    .-hamburger.-trigger { display: none; }

    /* Hide benefits bar on mobile */
    #ammenu-header-container > div:first-child { display: none; }
}

/* Extra small mobile */
@media (max-width: 375px) {
    .snx-mobile-header { padding: 8px 12px; gap: 8px; }
    .snx-mobile-logo img { height: 28px; }
    .snx-mobile-icons svg { width: 22px; height: 22px; }
    .snx-mobile-search { padding: 6px 12px; }
    .snx-mobile-search input { padding: 8px 46px 8px 12px; font-size: 15px; }
}

/* ===== FOOTER LOGO CLS RESERVE (critical) =====
   Footer Sanexo logo uses Tailwind `h-auto` which overrides the height
   attribute; on lazy-load it reserves 0px until loaded, then pushes
   content down by ~55px. Lighthouse reports this as CLS 0.62 on PDPs
   (shift attributed to .snx-product-top because that's the observed
   moving element). Pin the aspect ratio so the slot is reserved. */
footer img[alt="Sanexo Sanitairexpert"] {
    width: 200px !important;
    height: 55px !important;
    aspect-ratio: 200 / 55;
}

/* ===== PDP GALLERY CLS RESERVE (critical) =====
   Alpine hydrates the gallery after first paint; without a reserved layout
   box the product image pushes content down (CLS 0.6 on mobile). Lock a 1:1
   aspect ratio matching the square product images so the image slot is sized
   correctly from the first paint. Applied in critical CSS because deferred
   async CSS arrives too late to prevent the shift. */
/* Reserve a 1:1 square only on the main image wrapper. Do NOT put aspect-ratio
   on the whole gallery — that cuts off space for the thumbnail strip and
   Alpine's x-for hydration shifts thumbnails into that gap. */
.snx-product-gallery #gallery-main {
    aspect-ratio: 1 / 1;
    width: 100%;
    contain: layout;
}
.snx-product-gallery #gallery-main picture,
.snx-product-gallery #gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Thumbnail strip: each thumb is a fixed 105px square. Reserve the slot
   before Alpine renders the x-for template so hydration doesn't shift the
   main image slot up/down. */
.snx-product-gallery .js_thumbs_slide img {
    width: 105px;
    height: 105px;
    aspect-ratio: 1 / 1;
}

/* ===== HOMEPAGE MOBILE BANNER LAYOUT (critical) =====
   Match live sanexo.nl mobile: main installatieservice banner on top full-width,
   two small banners (lentedeals + opruiming) below side-by-side.
   Without this, staging renders main banner at x=389 (off-screen). */
@media (max-width: 767px) {
    body.cms-home .pagebuilder-column-line,
    body.cms-index-index .pagebuilder-column-line {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    body.cms-home .pagebuilder-column-line > .pagebuilder-column,
    body.cms-index-index .pagebuilder-column-line > .pagebuilder-column {
        width: 100% !important;
        flex-basis: auto !important;
    }
    body.cms-home .pagebuilder-column.primary-herobanner,
    body.cms-index-index .pagebuilder-column.primary-herobanner {
        order: -1 !important;
        margin-bottom: 12px !important;
    }
    body.cms-home .pagebuilder-column:not(.primary-herobanner),
    body.cms-index-index .pagebuilder-column:not(.primary-herobanner) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    body.cms-home .pagebuilder-column:not(.primary-herobanner) > [data-content-type="html"],
    body.cms-index-index .pagebuilder-column:not(.primary-herobanner) > [data-content-type="html"] {
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
}