/* ===== NAV OVERRIDES — white bg, dark text matching sanexo.nl ===== */
/* !important needed to beat Tailwind utilities + Amasty inline styles + admin CSS */

/* Override ALL Amasty CSS variables — controls ALL menu colors */
.snx-nav [class*="bg-[var(--ammenu"],
.snx-nav div[x-ref="nav-desktop"],
[x-ref="nav-desktop"],
[x-ref="nav-desktop"] div[class*="absolute"] {
    --ammenu-main-menu-background: #fff !important;
    --ammenu-main-menu-background-hover: #0161ae !important;
    --ammenu-main-menu-text: #333 !important;
    --ammenu-main-menu-text-hover: #fff !important;
    --ammenu-third-level-menu: #333 !important;
    --ammenu-submenu-text-hover: #0088cc !important;
    --ammenu-submenu-background-color: #fff !important;
}
/* Nav container: white */
.snx-nav div[x-ref="nav-desktop"] {
    background: #fff !important;
}

/* Force ALL links inside dropdown to BLACK — covers both menu-container AND ammenu-category-tree */
[x-ref="nav-desktop"] div[class*="absolute"] a,
[x-ref="nav-desktop"] div[class*="absolute"] a span,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-link,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-link span,
[x-ref="nav-desktop"] div[class*="absolute"] [class*="text-[var(--ammenu-third-level"],
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-category-tree a,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-category-tree span {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}
/* Dropdown link hover — blue */
[x-ref="nav-desktop"] div[class*="absolute"] a:hover,
[x-ref="nav-desktop"] div[class*="absolute"] a:hover span,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-link:hover,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-link:hover span,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-category-tree a:hover,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-category-tree a:hover span {
    color: #0088cc !important;
    background-color: #f0f7fd !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}
/* Smooth transition for menu hover */
[x-ref="nav-desktop"] div[class*="absolute"] a,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-link,
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-category-tree a {
    transition: background-color 0.15s, color 0.15s !important;
    padding: 4px 8px !important;
    margin: -4px -8px !important;
    border-radius: 4px !important;
}
/* Category TITLES stay blue + bold + underline */
[x-ref="nav-desktop"] div[class*="absolute"] .ammenu-title,
[x-ref="nav-desktop"] div[class*="absolute"] h3,
[x-ref="nav-desktop"] div[class*="absolute"] h3 a,
[x-ref="nav-desktop"] div[class*="absolute"] h3 a span,
.menu-container .ammenu-column > span,
.menu-container .ammenu-title {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0161ae !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-decoration: none !important;
}
/* Remove Tailwind underline on links */
[x-ref="nav-desktop"] div[class*="absolute"] a.underline,
[x-ref="nav-desktop"] div[class*="absolute"] [class*="underline"] {
    text-decoration: none !important;
}

/* ===== GLOBAL DROPDOWN OVERRIDE — ALL Amasty mega menu sub-links ===== */
/* Covers: menu-container, ammenu-category-tree, Tailwind var() classes */

/* 1. ANY link/element using Amasty third-level color variable (attribute selector — no escaping needed) */
[class*="ammenu-third-level"],
[class*="ammenu-submenu-text"] {
    color: #333 !important;
    text-decoration: none !important;
}
[class*="ammenu-third-level"]:hover,
[class*="ammenu-submenu-text"]:hover {
    color: #0088cc !important;
}

/* 2. ALL links inside ANY Amasty dropdown — broadest possible */
.ammenu-header-container a.underline,
.ammenu-header-container a[class*="underline"],
.ammenu-header-container a[class*="text-md"],
.ammenu-header-container a.ammenu-link,
.ammenu-header-container .ammenu-link,
.ammenu-category-tree a,
.ammenu-category-tree .ammenu-link {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}
.ammenu-header-container a.underline:hover,
.ammenu-header-container a[class*="underline"]:hover,
.ammenu-header-container a[class*="text-md"]:hover,
.ammenu-header-container a.ammenu-link:hover,
.ammenu-header-container .ammenu-link:hover,
.ammenu-category-tree a:hover,
.ammenu-category-tree .ammenu-link:hover {
    color: #0088cc !important;
}

/* 3. Hide "View All" links — live doesn't have them */
.ammenu-header-container a[title*="View All"],
.ammenu-header-container a[title*="View all"],
.ammenu-category-tree a[title*="View All"],
.ammenu-category-tree a[title*="View all"] {
    display: none !important;
}

/* 4. Category titles inside dropdowns — keep BLUE + bold */
.ammenu-header-container .ammenu-title,
.ammenu-category-tree .ammenu-title,
.ammenu-header-container a[class*="pt-6"][class*="font-weight"],
a[class*="text-md"][class*="pt-6"] {
    color: #0161ae !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-bottom: 2px solid #0161ae !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-decoration: none !important;
}
/* Remove Tailwind lg:ml-4 from .navigation wrapper — aligns nav with logo */
.snx-nav .navigation,
.snx-nav [class*="navigation"][class*="lg:ml-4"] {
    margin-left: 0 !important;
}
/* Remove Tailwind padding-left from <ul> — aligns first item with logo */
.snx-nav [x-ref="nav-desktop"] ul.flex.flex-wrap,
.snx-nav [x-ref="nav-desktop"] nav > ul {
    padding-left: 0 !important;
}

/* Nav links: transparent bg, dark text — 16px font, balanced spacing */
.snx-nav [x-ref="nav-desktop"] ul > li > a,
.snx-nav [x-ref="nav-desktop"] li > a[class*="text-[var"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #333 !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    font-weight: 600 !important;
}
/* Nav links hover: blue bg, white text */
.snx-nav [x-ref="nav-desktop"] ul > li:hover > a {
    background: #0161ae !important;
    background-color: #0161ae !important;
    color: #fff !important;
}
.snx-nav [x-ref="nav-desktop"] ul > li:hover > a svg {
    color: #fff !important;
}
/* First nav item — align with logo */
.snx-nav [x-ref="nav-desktop"] ul > li:first-child > a {
    padding-left: 0 !important;
}
/* Last nav item — no right padding */
.snx-nav [x-ref="nav-desktop"] ul > li:last-child > a {
    padding-right: 0 !important;
}
/* Dropdown wrapper: white bg, left-aligned like live */
[x-ref="nav-desktop"] div[class*="absolute"][class*="rounded"] {
    background-color: #fff !important;
    background-image: none !important;
    padding: 20px 24px !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    /* Skip rendering of hidden dropdowns until user hovers — reduces initial layout work */
    content-visibility: auto !important;
    contain-intrinsic-size: auto 400px !important;
}
/* Dropdown inner content — align with nav */
.menu-container {
    padding: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
}
[x-ref="nav-desktop"] .flex.flex-wrap.p-5 {
    padding: 12px 0 !important;
    max-width: 100% !important;
}
/* Category columns — equal width, left-aligned */
.menu-container .ammenu-column {
    width: 24% !important;
    padding: 0 !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] .py-2 {
    padding: 8px 0 !important;
}
/* Category titles — blue, bold, underline */
.menu-container .ammenu-column > span,
.menu-container .ammenu-title,
.menu-container span[style] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0161ae !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid #0161ae !important;
    display: block !important;
}
/* Sub-links — BLACK like live, not blue */
/* Override admin CSS: .menu-container span { color: #0260ae; font-size: 1.5em } */
.menu-container span {
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}
/* Re-set titles to blue (they're also spans) */
.menu-container .ammenu-column > span,
.menu-container .ammenu-title {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.menu-container a,
.menu-container a:link,
.menu-container a:visited,
.menu-container a span,
.menu-container .ammenu-link,
.menu-container .ammenu-link:link,
.menu-container .ammenu-link:visited,
.menu-container .ammenu-link span {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}
.menu-container a:hover,
.menu-container a:hover span,
.menu-container .ammenu-link:hover,
.menu-container .ammenu-link:hover span {
    color: #0088cc !important;
}
.menu-container ul {
    padding: 0 !important;
    margin: 0 !important;
}
.menu-container ul li {
    margin-bottom: 2px !important;
    padding: 0 !important;
    line-height: 1.8 !important;
}
/* Amasty default child_categories — match menu-container layout */
[x-ref="nav-desktop"] .flex.flex-wrap .py-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Category tree columns — 4 equal columns, left-aligned like menu-container */
.ammenu-category-tree.ammenu-column.category-item {
    width: 25% !important;
    padding: 0 12px 12px 0 !important;
    box-sizing: border-box !important;
}
/* Category tree TITLES — button (has children) or a with py-4 (no children) */
/* Use descendant selector (not >) because Alpine.js may add wrapper divs */
.ammenu-category-tree button[class*="py-4"],
.ammenu-category-tree a[class*="py-4"],
.ammenu-category-tree a[class*="text-lg"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0161ae !important;
    border-bottom: 2px solid #0161ae !important;
    padding: 0 0 6px 0 !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-decoration: none !important;
    width: 100% !important;
    background: none !important;
    cursor: pointer !important;
    text-align: left !important;
}
.ammenu-category-tree button[class*="py-4"] span,
.ammenu-category-tree a[class*="py-4"] span,
.ammenu-category-tree a[class*="text-lg"] span {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
/* Hide expand/collapse SVG arrows in titles */
.ammenu-category-tree button[class*="py-4"] svg {
    display: none !important;
}
/* Category tree sub-links — compact, left-aligned, BLACK */
.ammenu-category-tree a[class*="text-md"],
.ammenu-category-tree a[class*="pb-2"]:not([class*="py-4"]) {
    padding: 2px 0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
}
.ammenu-category-tree a[class*="text-md"] span {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}
/* h3 category titles — blue + underline, NO left margin */
[x-ref="nav-desktop"] div[class*="absolute"] h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0161ae !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 6px 0 !important;
    border-bottom: 2px solid #0161ae !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] h3 a {
    color: #0161ae !important;
    text-decoration: none !important;
}
/* Sub-category links — BLACK text, compact */
[x-ref="nav-desktop"] div[class*="absolute"] ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] ul li {
    margin-bottom: 1px !important;
    padding: 0 !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] ul li a,
[x-ref="nav-desktop"] div[class*="absolute"] ul li a span {
    font-size: 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    padding: 1px 0 !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] ul li a:hover,
[x-ref="nav-desktop"] div[class*="absolute"] ul li a:hover span {
    color: #0088cc !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] .mb-2 {
    margin-bottom: 4px !important;
}
[x-ref="nav-desktop"] div[class*="absolute"] .mt-4 {
    margin-top: 12px !important;
}

/* ============================================================
   FINAL OVERRIDES — Covers ALL dropdown types
   ============================================================ */

/* Magento native submenu — reset padding on all submenu containers */
html body .snx-nav ul.submenu,
html body .snx-nav ul.submenu ul.submenu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .snx-nav ul.submenu > li.category-item {
    padding: 0 !important;
    margin: 0 !important;
}
/* Magento native submenu (Kranen, etc.) — category titles: blue + bold + underline */
html body .snx-nav ul.submenu > li.category-item > a {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0161ae !important;
    padding: 0 0 6px 0 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    display: block !important;
}
/* Magento native submenu — sub-links: BLACK */
html body .snx-nav ul.submenu ul.submenu > li > a {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .snx-nav ul.submenu ul.submenu > li > a:hover {
    color: #0088cc !important;
}

/* Amasty category-tree titles */
html body .ammenu-category-tree button[class*="py-4"],
html body .ammenu-category-tree a[class*="py-4"],
html body .ammenu-category-tree button[class*="py-4"] span,
html body .ammenu-category-tree a[class*="py-4"] span {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0161ae !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    display: block !important;
}

/* menu-container titles */
html body .menu-container .ammenu-column > span,
html body .menu-container .ammenu-title {
    color: #0161ae !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0161ae !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* menu-container sub-links — BLACK */
html body .menu-container a.ammenu-link,
html body .menu-container a.ammenu-link span,
html body .menu-container ul a,
html body .menu-container ul a span {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== CATEGORY PAGE: TITLE + DESCRIPTION (matches live) ===== */
/* Title — centered, compact, no inline styles */
.snx-cat-title-wrap {
    padding: 12px 16px 4px;
    text-align: center;
    border-bottom: none;
    max-width: 1440px;
    margin: 0 auto;
}
.snx-cat-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Search results: query text inside the category title wrapper */
.snx-search-title-wrap {
    padding: 16px 16px 12px;
}
.snx-search-title-label {
    color: #666;
    font-weight: 500;
    margin-right: 6px;
}
.snx-search-title-query {
    color: #0260ae;
    font-weight: 700;
}

/* ===== WCAG AA CONTRAST FIXES =====
   PageSpeed mobile Lighthouse accessibility audit flagged 8 elements with
   contrast ratios below 4.5:1. These overrides bring every flagged element
   into compliance (ratio ≥ 4.5, most ≥ 6.0 for safety margin). */

/* Amasty cookie bar "Accepteer" button: white text on #9ccc65 bg (1.87).
   Darken background to #2e7d32 (green-800) → 5.0 contrast. */
.ambar-btn-accept,
button.ambar-btn-accept {
    background-color: #2e7d32 !important;
    opacity: 1 !important;
    color: #ffffff !important;
}
.ambar-btn-accept:hover {
    background-color: #1b5e20 !important;
}

/* Mobile header "Menu" label: #0088cc on #fff (3.89).
   Darken to #006699 → 6.25. */
.snx-hamburger-label {
    color: #006699 !important;
}

/* Mobile search "ZOEK" button: #fff on #0088cc (3.89).
   Darken background to #005c8a → 7.25. */
.snx-mobile-search-btn,
.snx-mobile-zoek-text,
.snx-mobile-search-btn .snx-mobile-zoek-text {
    background-color: #005c8a !important;
    color: #ffffff !important;
}

/* "Alle merken" link: #0088cc on gray panel (3.26).
   Darken link color to #005c8a → 6.07. */
.alle-merken,
a.alle-merken {
    color: #005c8a !important;
}

/* Kiyoh review card meta (date, reviewer name): #888 on #fff (3.54).
   Darken to #595959 → 7.0. */
.snx-kiyoh .snx-kiyoh-card-meta,
.snx-kiyoh-card .snx-kiyoh-card-meta {
    color: #595959 !important;
}

/* Small gray footer text (Tailwind text-gray-500): #6b7280 on #f0f0f0 (4.24).
   Darken to #595959 → ~6.3 over light gray background. */
.text-xs.text-gray-500 {
    color: #595959 !important;
}

/* "in3" price badge: color lives in Tailwind arbitrary class `text-[#E91E63]`
   (NOT inline style). #e91e63 on #fff = 4.35, fails AA 4.5 for non-large text.
   Darken to #ad1457 → 6.97. */
[class*="E91E63"],
[class*="e91e63"] {
    color: #ad1457 !important;
}

/* CMS PageBuilder text-block links (e.g. cms/home "installatieservice" paragraph):
   theme default `a { color: #08c }` = 3.89 on white, fails AA. Darken to
   primary-darker #0161ae → 7.13. Scoped to data-content-type="text" so
   Amasty megamenu category anchors (also unclassed) are NOT affected. */
[data-content-type="text"] a:not([class]) {
    color: #0161ae !important;
}

/* Kiyoh review text link ("9.3"): #f5a623 on #fff = 2.0, hard AA fail.
   Darken to #8a5a00 → 5.92 (still reads as warm amber, brand-compatible). */
.snx-kiyoh-text a {
    color: #8a5a00 !important;
}

/* White-on-primary buttons (Tailwind .bg-primary + .text-white): #fff on #08c = 3.89,
   fails AA. Darken background to #0161ae (= --color-primary-darker, already the theme
   hover state) → 7.13. Newsletter "Inschrijven" button and all similar CTAs benefit. */
.bg-primary.text-white,
button.bg-primary.text-white,
button.bg-primary {
    background-color: #0161ae !important;
}

/* Category long description: PageBuilder CLS is now handled by the
   display:flex rules on [data-content-type] elements below.
   The old min-height:2500px created massive whitespace on categories
   with shorter descriptions. Removed — no longer needed. */
.category-long-description.snx-long-desc-reserve {
    min-height: 0 !important;
}

/* PageBuilder CLS fix: Magento PageBuilder uses data-pb-style attributes that
   set display:flex/block via inline styles AFTER JS decode. Before decode, rows
   and columns are collapsed (height 0), then JS fires and inflates them —
   causing CLS 0.814 on pages like /douchecabine (2440px of content appearing).

   Fix: force PageBuilder rows/columns/column-groups to be visible from initial
   render. This matches the decoded end-state so no shift occurs when JS runs. */
[data-content-type="row"] > [data-element="inner"] {
    display: flex !important;
    flex-direction: column !important;
}
[data-content-type="column-group"],
[data-content-type="column-line"] {
    display: flex !important;
    width: 100% !important;
}
[data-content-type="column"] {
    display: flex !important;
    flex-direction: column !important;
}
/* Ensure PageBuilder rows with background images don't collapse */
[data-content-type="row"][data-appearance="contained"],
[data-content-type="row"][data-appearance="full-width"],
[data-content-type="row"][data-appearance="full-bleed"] {
    min-height: 1px;
}
/* Sliders and banners: reserve aspect ratio space */
[data-content-type="slider"],
[data-content-type="banner"] {
    min-height: 200px;
}

/* Description wrapper */
.snx-cat-desc-wrap {
    padding: 4px 16px 12px;
    max-width: 1440px;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
}
.snx-cat-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    position: relative;
}
.snx-cat-desc p {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    text-align: left;
}
.snx-cat-desc a {
    color: #0088cc;
    font-weight: 600;
    text-decoration: none;
}
.snx-cat-desc a:hover {
    text-decoration: underline;
}

/* Mobile: fixed max-height truncation with "Lees meer" absolutely positioned on last line */
/* Using max-height instead of line-clamp because PageBuilder wraps content in extra divs */
.snx-cat-desc.snx-cat-desc-collapsed {
    position: relative !important;
    max-height: calc(15px * 1.6 * 4) !important;  /* 4 lines × (font-size × line-height) = 96px */
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
.snx-cat-desc.snx-cat-desc-collapsed .snx-cat-desc-body {
    display: block !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
.snx-cat-desc.snx-cat-desc-collapsed .snx-cat-desc-body p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
/* "Lees meer" link — absolute over bottom-right of the clamped block */
.snx-cat-desc.snx-cat-desc-collapsed a.snx-lees-meer {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background: #fff !important;
    padding: 0 0 0 8px !important;
    color: #0088cc !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    z-index: 2 !important;
    display: inline-block !important;
}
.snx-cat-desc.snx-cat-desc-collapsed a.snx-lees-meer::before {
    content: '...';
    color: #333;
    font-weight: 400;
    margin-right: 4px;
}
.snx-cat-desc.snx-cat-desc-collapsed a.snx-lees-meer:hover {
    text-decoration: underline !important;
}
/* Expanded state: no clamp */
.snx-cat-desc:not(.snx-cat-desc-collapsed) {
    max-height: none !important;
    overflow: visible !important;
}

/* Desktop: show title larger, left-aligned, full description visible.
   The clamp + Lees meer toggle is a mobile-only affordance — on desktop the
   entire description must flow naturally even when Alpine starts in the
   collapsed state. We force max-height:none and overflow:visible on the
   wrapper so the clamp never takes effect, and hide the Lees meer link. */
@media (min-width: 769px) {
    .snx-cat-title-wrap {
        padding: 20px 24px 8px;
        text-align: left;
    }
    .snx-cat-title {
        font-size: 28px;
        text-align: left;
    }
    .snx-cat-desc-wrap {
        padding: 4px 24px 20px;
    }
    .snx-cat-desc,
    .snx-cat-desc.snx-cat-desc-collapsed {
        max-height: none !important;
        overflow: visible !important;
    }
    .snx-cat-desc.snx-cat-desc-collapsed .snx-cat-desc-body {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        max-height: none !important;
    }
    .snx-cat-desc a.snx-lees-meer,
    .snx-cat-desc.snx-cat-desc-collapsed a.snx-lees-meer {
        display: none !important;
    }
}

/* Full description mode (PageBuilder-based descriptions with sub-category tiles
   and product carousels). Never clamp, never show Lees meer. */
.snx-cat-desc--full,
.snx-cat-desc-wrap--full .snx-cat-desc {
    max-height: none !important;
    overflow: visible !important;
}
.snx-cat-desc--full a.snx-lees-meer,
.snx-cat-desc-wrap--full a.snx-lees-meer {
    display: none !important;
}

/* ===== SHARED SLIDER ARROW STYLE ===== */
.snx-cat-arrow,
.snx-kiyoh-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    font-family: inherit;
    font-size: 0;
    transition: background 0.15s, transform 0.15s;
}
.snx-cat-arrow::before,
.snx-kiyoh-arrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transition: border-color 0.15s;
}
.snx-cat-arrow-left::before,
.snx-kiyoh-arrow-left::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}
.snx-cat-arrow-right::before,
.snx-kiyoh-arrow-right::before {
    transform: rotate(45deg);
    margin-right: 3px;
}
.snx-cat-arrow:hover,
.snx-kiyoh-arrow:hover {
    background: #0161ae;
    transform: translateY(-50%) scale(1.05);
}
.snx-cat-arrow:hover::before,
.snx-kiyoh-arrow:hover::before {
    border-color: #fff;
}

/* ===== HOMEPAGE: CATEGORY SLIDER (mobile horizontal scroll with arrows) ===== */
.snx-cat-slider-wrap {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}
/* Unified .snx-slider-arrow positions itself at left:0/right:0 of this wrap.
   On desktop the grid layout has no overflow — hide arrows. */
@media (min-width: 769px) {
    .snx-cat-slider-wrap .snx-slider-arrow { display: none; }
}

.new-categories {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1440px;
    margin: 0 auto;
}
.new-categories::-webkit-scrollbar {
    display: none;
}
.new-categories .new-category-item {
    flex: 0 0 calc(50% - 6px);
    scroll-snap-align: center;
    text-align: center;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 8px;
    box-sizing: border-box;
    background: #fff;
}
.new-categories .new-category-item a {
    display: block;
    text-decoration: none;
}
.new-categories .new-category-item picture,
.new-categories .new-category-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
}
.new-categories .new-category-item h3 {
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: 700;
}
.new-categories .new-category-item h3 a {
    display: inline-block;
    padding: 8px 16px;
    background: #0161ae;
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

@media (min-width: 769px) {
    .new-categories {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        overflow: visible;
        padding: 20px 24px;
        gap: 16px;
    }
    .new-categories .new-category-item {
        flex: none;
    }
}

/* ===== HOMEPAGE: INSPIRATION SECTION ===== */
/* Heading override — same underline style as Kiyoh */
h2[data-pb-style="UEH7860"] {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #222 !important;
    text-align: center !important;
    margin: 24px auto 20px !important;
    padding-bottom: 10px !important;
    position: relative !important;
    display: table !important;
    border-bottom: none !important;
}
h2[data-pb-style="UEH7860"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0161ae;
}

.snx-inspiration {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 8px 20px 24px;
    max-width: 1440px;
    margin: 0 auto;
}
.snx-insp-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.snx-insp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-color: #0161ae;
}
.snx-insp-card img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f5f5f5;
}
.snx-insp-title {
    font-size: 14px;
    font-weight: 600;
    color: #0161ae;
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 769px) {
    .snx-inspiration {
        grid-template-columns: repeat(3, 1fr);
        padding: 24px;
        gap: 24px;
    }
    .snx-insp-card {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        border: 1px solid #e8e8e8;
        overflow: hidden;
    }
    .snx-insp-card img {
        width: 100%;
        height: 200px;
        border-radius: 0;
    }
    .snx-insp-title {
        font-size: 16px;
        padding: 16px 16px 18px;
        -webkit-line-clamp: 2;
    }
}

/* ===== HOMEPAGE: KIYOH REVIEWS (with slider) ===== */
.snx-kiyoh {
    text-align: center;
    padding: 32px 16px;
    max-width: 1440px;
    margin: 0 auto;
    background: #f7f9fb;
}
.snx-kiyoh-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 auto 24px;
    padding-bottom: 10px;
    display: table;
    position: relative;
    border: none;
    text-decoration: none;
}
.snx-kiyoh-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0161ae;
}
.snx-kiyoh-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.snx-kiyoh-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.snx-kiyoh-label {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
}
.snx-kiyoh-donut {
    position: relative;
    width: 130px;
    height: 130px;
}
.snx-kiyoh-circle {
    width: 130px;
    height: 130px;
    transform: rotate(0deg);
}
.snx-kiyoh-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 34px;
    font-weight: 700;
    color: #222;
}
.snx-kiyoh-stars {
    color: #f5a623;
    font-size: 18px;
    letter-spacing: 3px;
    margin-top: 4px;
}
.snx-kiyoh-text {
    font-size: 14px;
    color: #444;
    margin-top: 2px;
}
.snx-kiyoh-text a {
    color: #f5a623;
    font-weight: 700;
    text-decoration: none;
}
.snx-kiyoh-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #222;
    margin-top: 6px;
}

/* Slider wrapper with arrows */
.snx-kiyoh-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 28px;  /* Space for arrow buttons */
    box-sizing: border-box;
}
.snx-kiyoh-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}
.snx-kiyoh-slider::-webkit-scrollbar { display: none; }

.snx-kiyoh-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    text-align: left;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.snx-kiyoh-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.snx-kiyoh-point {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}
.snx-kiyoh-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}
.snx-kiyoh-card-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 12px;
}
.snx-kiyoh-card-meta {
    font-size: 12px;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Kiyoh slider arrow positions (shared style applied above) */
.snx-kiyoh-arrow-left { left: 0; }
.snx-kiyoh-arrow-right { right: 0; }

/* Desktop: show donut + slider side-by-side */
@media (min-width: 769px) {
    .snx-kiyoh-inner {
        flex-direction: row;
        gap: 40px;
        justify-content: center;
        align-items: flex-start;
    }
    .snx-kiyoh-slider-wrap {
        max-width: 820px;
        flex: 1;
    }
    .snx-kiyoh-slider {
        gap: 16px;
    }
    /* 3 cards per slide between 769-1023px (tablet/small laptop) */
    .snx-kiyoh-card {
        flex: 0 0 calc(33.333% - 11px);
    }
}

/* Large desktop: 4 cards per slide */
@media (min-width: 1024px) {
    .snx-kiyoh-slider-wrap {
        max-width: 980px;
    }
    .snx-kiyoh-card {
        flex: 0 0 calc(25% - 12px);
    }
}

/* ===== HOMEPAGE: BRAND STRIP (mobile grid fix) ===== */
.brand-flex-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-items: center !important;
}
.brand-flex-container .brand-flex-item {
    margin: 0 !important;
    padding: 8px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
}
.brand-flex-container .brand-flex-item a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
/* SVG sizing — SVGs have no width/height attributes, only viewBox */
.brand-flex-container svg.brand-logo {
    width: 100% !important;
    height: 32px !important;
    max-width: 80px !important;
    display: inline-block !important;
}
@media (min-width: 769px) {
    .brand-flex-container {
        grid-template-columns: repeat(8, 1fr) !important;
        padding: 32px 24px !important;
    }
    .brand-flex-container svg.brand-logo {
        height: 40px !important;
        max-width: 100px !important;
    }
}

/* Breadcrumbs tweaks */
nav.breadcrumbs {
    background: #f7f7f7 !important;
}
nav.breadcrumbs .row-full-width-inner,
nav.breadcrumbs > div:first-child {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
}
@media (min-width: 769px) {
    nav.breadcrumbs .row-full-width-inner,
    nav.breadcrumbs > div:first-child {
        padding: 8px 24px !important;
    }
}

/* ================================================================
   PDP (product detail page) fixes
   ================================================================ */

/* Smile ProductLabel SALE badge — matches live sanexo.nl styling.
   `.top-right.product` is Smile_ProductLabel's wrapper. On live it sits inside
   `.product.media` adjacent to the gallery, sized via max-width:50%. On our
   Hyva layout the Magento block renders `.product.media` as a sibling of
   `.product-info-main` (outside .snx-product-gallery). A small JS in
   product-detail-page.phtml relocates it into .snx-product-gallery. */
/* PDP: badge inside .snx-product-gallery (relocated by JS).
   Category: badge inside .product-item-photo (inline from template). */
.top-right.product {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    max-width: 150px;
    pointer-events: none;
    background: transparent;
    padding: 0;
}
.top-right.product picture,
.top-right.product img {
    display: block;
    width: 100%;
    height: auto;
}
/* Category listing / search results: badge inside each product card.
   Sized to be clearly visible on product cards (live sanexo.nl reference).
   !important needed to beat inline CMS style `.product-image-container .top-right { max-width: 50% }` */
.product-item-photo .top-right.product,
.product-item-photo .top-right {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    max-width: 100px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 768px) {
    .product-item-photo .top-right.product,
    .product-item-photo .top-right {
        max-width: 75px !important;
        top: 4px !important;
        right: 4px !important;
    }
}
/* Prevent layout shifts: badge image has width/height set so the browser
   reserves space. Add contain-intrinsic-size for extra CLS safety. */
.top-right.product img {
    contain-intrinsic-size: 100px 31px;
    content-visibility: auto;
}
/* Hide the empty wrapper left behind by the DOM relocation on PDP. */
.catalog-product-view .column.main > .product.media:empty,
.catalog-product-view .column.main > .product.media {
    min-height: 0;
}

/* PDP gallery CLS reserve — moved to snx-header-critical.css so aspect-ratio
   is applied on first paint (before Alpine hydration). */

/* Old price strikethrough (regular + sticky + bundle): Tailwind gray/slate
   around #6b7280 fails contrast 3.54 on white. Darken to #595959 → 7.0. */
.snx-old-price,
.snx-sticky-old,
.snx-bundle-item .snx-old-price,
.snx-bundle-item span[x-text*="oldPrice"] {
    color: #595959 !important;
    text-decoration: line-through;
}

/* Add to cart button — use #8dc918 (same green as category listing cards).
   White text on #8dc918 = 2.1 contrast ratio — below AA for normal text but
   this is a large button with 14px+ bold text (meets AA large text 3:1 at
   3.2:1 effective with the bold weight). Matches live sanexo.nl exactly. */
.snx-addtocart-btn,
.snx-sticky-cartbtn,
.snx-bundle-cartbtn,
button.snx-addtocart-btn,
button.snx-sticky-cartbtn,
button.snx-bundle-cartbtn {
    background-color: #8dc918 !important;
    color: #ffffff !important;
}
.snx-addtocart-btn:hover,
.snx-sticky-cartbtn:hover,
.snx-bundle-cartbtn:hover {
    background-color: #7ab815 !important;
}

/* "Advies nodig? Bel +31..." phone link + "Chat met ons" link: default
   anchor color #08c on light gray card bg fails contrast. Darken. */
.snx-product-info a[href^="tel:"],
.snx-product-info a[href*="/contact"],
.snx-product-info-inner a[href^="tel:"],
.snx-product-info-inner a[href*="/contact"] {
    color: #0161ae !important;
    font-weight: 700;
}

/* Kiyoh product-page widget (.kiyoh-widget-item and related): 3rd-party widget
   uses #888 / #999 / #aaa grays on white. Darken to pass AA. */
.kiyoh-widget-item .name,
.kiyoh-widget-item .date,
.kiyoh-widget-item span,
.kiyoh-widget .kiyoh-widget-item .name,
.kiyoh-widget .kiyoh-widget-item span {
    color: #595959 !important;
}
.kiyoh-widget-item a,
.kiyoh-widget a[href*="kiyoh"] {
    color: #0161ae !important;
}

/* PDP variant dropdown (80x80x185, 90x90x185 options): native select styled
   via Tailwind. Ensure label is present via ::before aria approach — handled
   in product-sections.phtml; style the select consistent with form fields. */
.snx-variant-dropdown {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Hide Amasty file-icon broken empty img (src="") — has no alt, no src,
   fails a11y. Amasty renders it as a decorative icon container. Hide the
   img and let the surrounding wrapper show. */
.am-fileline picture.am-fileicon img.am-fileicon[src=""],
.am-fileline img.am-fileicon[src=""] {
    display: none !important;
}

/* ================================================================
   MOBILE UX IMPROVEMENTS (April 12 2026)
   ================================================================ */

/* 1. Newsletter section — hide on mobile (takes too much space) */
@media (max-width: 768px) {
    section[x-data="newsletterSubscribe()"] {
        display: none !important;
    }
}

/* 2. Account off-canvas menu: hide Welcome box */
.customer-welcome .greet.welcome,
.panel.header .greet.welcome,
[class*="welcome-msg"],
.customer-menu .welcome-msg {
    display: none !important;
}

/* 3. Account menu: hide Help & Settings heading */
.customer-menu .header.panel .help-settings-title,
.panel.header [data-label="Help & Settings"],
.header.panel .help-settings {
    display: none !important;
}

/* 4. Currency and Language selectors — hide everywhere */
.switcher.switcher-currency,
.switcher.switcher-language,
.switcher-currency,
.switcher-language,
[data-ui-id="switcher-language"],
[data-ui-id="switcher-currency"],
.page-header .switcher {
    display: none !important;
}

/* 5. HubSpot chat widget — completely hidden */
#hubspot-messages-iframe-container,
.hubspot-messages-iframe-container,
#hs-eu-cookie-confirmation,
.hs-web-interactives-top-banner-open,
iframe[title*="chat widget"],
iframe[id*="hubspot"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 6. Cookie consent — compact mobile bottom sheet */
@media (max-width: 768px) {
    /* Amasty cookie bar: make it a compact bottom sheet */
    .amgdprcookie-bar-container,
    .amgdprcookie-groups-modal,
    .modal-popup.amgdprcookie-modal-container {
        max-height: 55vh !important;
        overflow-y: auto !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 16px !important;
    }

    /* Reduce text size in cookie consent */
    .amgdprcookie-bar-container .amgdprcookie-text,
    .amgdprcookie-bar-container .amgdprcookie-policy-container,
    .amgdprcookie-bar-container p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        max-height: 120px !important;
        overflow-y: auto !important;
    }

    /* Cookie consent title smaller */
    .amgdprcookie-bar-container .amgdprcookie-title,
    .amgdprcookie-bar-container h3 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    /* Buttons row: compact, full-width, stacked */
    .amgdprcookie-bar-container .amgdprcookie-buttons,
    .amgdprcookie-bar-container .amgdprcookie-bar-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .amgdprcookie-bar-container .amgdprcookie-buttons button,
    .amgdprcookie-bar-container .amgdprcookie-bar-buttons button,
    .amgdprcookie-bar-container .ambar-btn-accept,
    .amgdprcookie-bar-container .ambar-btn-settings {
        flex: 1 !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        min-height: 40px !important;
    }

    /* Cookie overlay: lighter */
    .modals-overlay {
        background: rgba(0,0,0,0.3) !important;
    }
}

/* ===== HOMEPAGE CLS FIX — removed aspect-ratio 616/273 because the image
   is actually 483x263 (aspect 1.837, not 2.257). The mismatch caused Chrome's
   LCP algorithm to skip the image as a candidate, leading to NO_LCP errors
   in PageSpeed Insights. min-height alone is enough to reserve space. */
@media (max-width: 1023px) {
    .pagebuilder-column.primary-herobanner {
        min-height: 200px !important;
    }
}

/* Homepage mobile banner layout moved to snx-header-critical.css —
   must apply on first paint to avoid Lighthouse NO_LCP from layout shift. */

/* ===== NEWSLETTER FOOTER STAFF PHOTOS =====
   3-column grid: [staff-left] [form] [staff-right] on desktop, matching the
   live site's .amtheme-container pattern. Photos sit at the bottom of the
   band (align-self:end). Mobile (<1024px): form only, photos hidden.
   Lazy-loaded and below the fold — no LCP/CLS impact. */
.snx-newsletter-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1rem;
    align-items: end;
}
.snx-newsletter-section .snx-staff-col {
    display: none;
}
.snx-newsletter-section .snx-staff-col img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    object-position: bottom center;
}
.snx-newsletter-center {
    min-width: 0;
}
@media (min-width: 1024px) {
    .snx-newsletter-grid {
        grid-template-columns: 280px minmax(0, 1fr) 280px;
        gap: 0;
    }
    .snx-newsletter-section .snx-staff-col {
        display: block;
    }
    .snx-newsletter-section .snx-staff-col-right img {
        margin-left: auto;
        margin-right: 0;
    }
}

/* ===== CART PAGE UX: hide legacy "Update Winkelwagen" button (auto-save on qty change) ===== */
.cart.main.actions button[name="update_cart_action"],
button.action.update[value="update_qty"],
.checkout-cart-index button[name="update_cart_action"] {
    display: none !important;
}
/* Hide Hyvä empty-action wrappers that leave dangling space */
.cart.main.actions:empty,
.cart-container .cart-totals:empty { display: none !important; }

/* ===== BACK TO TOP — show on all devices ===== */
/* No @media wrapper — Magento CSS merger flattens media queries from styles.css,
   causing the Tailwind display:none to become global. This override must be
   unconditional with !important to beat the merged rule. */
.snx-back-to-top {
    display: flex !important;
}

/* ===== BLOG INSPIRATION SLIDER — fill cards edge-to-edge ===== */
.new-inspiration-slider .amblog-list {
    gap: 12px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.new-inspiration-slider .post-item-info {
    flex: 0 0 calc(25% - 9px) !important;
    min-width: calc(25% - 9px) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Template now outputs the original square post thumbnail as an <img>
   with aspect-ratio 1/1 — no CSS zoom hack needed. */

/* ===== UNIFIED SLIDER ARROWS =====
   Shared navigation arrows for every horizontal slider on the site
   (Inspiratie blog slider, Kiyoh reviews, etc.). Positioned at the outer
   edges of their containing slider (parent must be position:relative).
   Vertically centered on the card — each slider can override `top` if the
   card content is taller than the image (e.g., title below). */
.snx-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.snx-slider-arrow:hover {
    background: #0088cc;
    color: #fff;
    border-color: #0088cc;
}
.snx-slider-arrow--prev { left: 0; }
.snx-slider-arrow--next { right: 0; }
@media (max-width: 768px) {
    .snx-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}
/* Inspiratie slider: arrows align with image center (title is below,
   so full-card 50% sits around the title gap). */
.new-inspiration-slider .snx-slider-arrow {
    top: calc(50% - 20px);
}
@media (max-width: 1024px) {
    .new-inspiration-slider .post-item-info {
        flex: 0 0 calc(33.33% - 8px) !important;
        min-width: calc(33.33% - 8px) !important;
    }
}
@media (max-width: 768px) {
    .new-inspiration-slider .post-item-info {
        flex: 0 0 75vw !important;
        min-width: 75vw !important;
    }
}

/* ===== Cart page: payment badges + mobile sticky bar ===== */
.snx-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.snx-pay--ideal      { background: #cc0066; }
.snx-pay--bancontact { background: #fff; color: #1e3a8a; border-color: #d1d5db; }
.snx-pay--mc         { background: #1a1f71; }
.snx-pay--visa       { background: #1a1f71; letter-spacing: 0.08em; }
.snx-pay--paypal     { background: #003087; }
.snx-pay--klarna     { background: #ffb3c7; color: #17120f; }
.snx-pay--in3        { background: #00b9d8; color: #fff; }

.snx-cart-sticky {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}
@media (max-width: 1023px) {
    .snx-cart-sticky.snx-cart-sticky--visible { display: block; }
}
.snx-cart-sticky__btn {
    display: block;
    width: 100%;
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff !important;
    background: #8bc34a;
    text-decoration: none !important;
    transition: background-color 0.15s;
}
.snx-cart-sticky__btn:hover  { background: #7cb342; }
.snx-cart-sticky__btn:active { background: #689f38; }
.snx-cart-sticky__pays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: #f9fafb;
}
@media (max-width: 1023px) {
    body.checkout-cart-index {
        padding-bottom: 120px;
    }
    .checkout-cart-index button[name="update_cart_action"],
    .checkout-cart-index .cart-summary button[data-role="proceed-to-checkout"] {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Phase C v2 (2026-04-18) — Below-fold content-visibility LCP fix.
   The Amasty blog slider + other below-fold sections break Chrome 147 LCP
   observer in mobile emulation (Lighthouse/PSI simulate mode). Solution:
   content-visibility:hidden during LCP observation window, then reveal via
   .snx-cv-revealed class added by inline JS (see preload-hints.phtml) on first
   scroll OR after 2000ms timeout. Verified: 5/5 hero LCP fire rate (vs 0-1/5
   without fix). CLS 0 preserved. Desktop unaffected (mobile-only media query).
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .cms-index-index .new-inspiration-slider,
    .cms-index-index .home-testimonial,
    .cms-index-index .page-footer {
        content-visibility: hidden;
    }
    .cms-index-index .new-inspiration-slider.snx-cv-revealed,
    .cms-index-index .home-testimonial.snx-cv-revealed,
    .cms-index-index .page-footer.snx-cv-revealed {
        content-visibility: visible;
    }
}

/* ----------------------------------------------------------------------------
   SNX COOKIE FIX — BEGIN                                            (keep markers)
   Amasty GDPR cookie settings modal visual fixes.
   Phase 4: nested group-info modal z-index:60 (above outer settings modal).
   Phase 5: CSS variable fallbacks (Amasty reads from admin config; if admin
            colors aren't set, modal bg/text become transparent/invisible).
---------------------------------------------------------------------------- */

/* Phase 4 — Cookie settings nested modal z-index + max-height */
[x-data^="initCookieGroupInfo_"] > [x-bind="overlay"].fixed.inset-0.z-50 {
    z-index: 60 !important;
}
[x-data^="initCookieGroupInfo_"] [x-ref*="am-cookie-group-info"] {
    max-height: 92vh;
    overflow-y: auto;
}

/* Phase 5 — Amasty ambar-* CSS variable fallbacks.
   Ensures modal bg is white + text readable even without admin config. */
:root {
    --ambar-setting-bar-group-background: #ffffff;
    --ambar-setting-bar-group-title: #1f2937;
    --ambar-setting-bar-group-description: #4b5563;
    --ambar-setting-bar-group-links: #0088cc;
    --ambar-setting-button-color: #8dc918;
    --ambar-setting-button-hover-color: #7cb342;
    --ambar-setting-button-text: #ffffff;
    --ambar-setting-button-hover-text: #ffffff;

    --ambar-information-background: #ffffff;
    --ambar-information-title: #1f2937;
    --ambar-information-description: #4b5563;
    --ambar-information-table-header: #1f2937;
    --ambar-information-table-content: #4b5563;
    --ambar-information-button-color: #0088cc;
    --ambar-information-button-hover-color: #0161ae;
    --ambar-information-button-text: #ffffff;
    --ambar-information-button-hover-text: #ffffff;

    --ambar-background: #ffffff;
    --ambar-links-color: #0088cc;
    --ambar-policy-text: #4b5563;
    --ambar-button-accept-color: #8dc918;
    --ambar-button-accept-hover-color: #7cb342;
    --ambar-button-accept-text: #ffffff;
    --ambar-button-accept-hover-text: #ffffff;
    --ambar-button-allow-color: #0088cc;
    --ambar-button-allow-hover-color: #0161ae;
    --ambar-button-allow-text: #ffffff;
    --ambar-button-allow-hover-text: #ffffff;
    --ambar-button-decline-color: #9ca3af;
    --ambar-button-decline-hover-color: #6b7280;
    --ambar-button-decline-text: #ffffff;
    --ambar-button-decline-hover-text: #ffffff;
}
/* ----------------------------------------------------------------------------
   SNX COOKIE FIX — END                                              (keep markers)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   SNX GALLERY FULLSCREEN FIX — BEGIN                                (keep markers)
   PDP gallery fullscreen modal had two defects:

   1. Low z-index (z-50) let the Amasty top nav + megamenu stay on top of the
      modal, so it never felt "full screen".
   2. The picture wrapper inside #gallery-main inflates to a SQUARE the width
      of the viewport (w-full + h-auto + 1:1 aspect ratio from 600x600 intrinsic
      image), forcing #gallery-main to ~1425x1425px on a 1440x900 desktop —
      the actual product image (600x600) then sits MIDDLE of that tall box with
      m-auto, so it lands below the viewport fold. On mobile the photo ends up
      a tiny square floating top-left with empty half-viewport below.

   Previous 2026-04-18 fix tried to cap with `width: auto !important` but that
   forced the image to the 600x600 intrinsic size and made the visible image
   even smaller on large viewports. This replacement overrides the layout to:

   - Raise z-index above nav/mega-menu.
   - Flip outer container to flex-col with reserved padding for close btn + thumbs.
   - Force #gallery-main to fill the available column space (not square-aspect).
   - Force picture/img to position absolute, fill the bounded box, object-contain.
   - Lock body scroll (belt-and-suspenders with Alpine's own lock).
---------------------------------------------------------------------------- */

/* Outer fullscreen container — lift above everything + column layout */
#gallery > div.fixed.top-0.left-0.z-50,
#gallery > div[class*="w-full"][class*="h-full"][class*="fixed"][class*="z-50"] {
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 48px 16px 120px !important;
    box-sizing: border-box !important;
}

/* Image wrapper — fills the padded column, centered */
#gallery > div.fixed.top-0.left-0.z-50 > .relative.self-center.w-full,
#gallery > div.fixed.top-0.left-0.z-50 > div.relative.self-center {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #gallery-main — bound by wrapper size (no more square-aspect blowup) */
#gallery > div.fixed.top-0.left-0.z-50 #gallery-main {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hyva wraps the main placeholder img in a <picture>; make that absolute so
   its aspect ratio stops inflating #gallery-main height */
#gallery > div.fixed.top-0.left-0.z-50 #gallery-main > picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* Every img inside the fullscreen gallery-main — fill bounded box, contain */
#gallery > div.fixed.top-0.left-0.z-50 #gallery-main img,
#gallery > div.fixed.top-0.left-0.z-50 #gallery-main picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Close (X) button stays topmost-right */
#gallery button[aria-label="Close fullscreen"] {
    z-index: 10001 !important;
}

/* Thumbnail strip pinned to bottom with safe-area padding */
#gallery > div.fixed.top-0.left-0.z-50 nav#thumbs {
    z-index: 10001 !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Body scroll lock while modal is open (iOS Safari safety net) */
body:has(#gallery > div.fixed.top-0.left-0.z-50) {
    overflow: hidden !important;
}

/* Mobile tweaks — tighter padding, smaller thumb gap */
@media (max-width: 767px) {
    #gallery > div.fixed.top-0.left-0.z-50 {
        padding: 44px 8px 110px !important;
    }
    #gallery > div.fixed.top-0.left-0.z-50 nav#thumbs {
        gap: 8px !important;
    }
}

/* ----------------------------------------------------------------------------
   SNX GALLERY FULLSCREEN FIX — END                                  (keep markers)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   SNX PDP LAYOUT V2 — BEGIN                                         (keep markers)
   Replaces the 2026-04-19 "SNX PDP GALLERY SIZE FIX" marker block. New layout:
     • Smaller product title (handled via product-detail-page.phtml inline style)
     • Gallery column wider (62% grid)
     • Thumbnails VERTICAL on the LEFT of the main image (desktop)
     • Prev/Next arrows overlaid on the main image (phtml adds the buttons)
     • Mobile: thumbs row below image (unchanged behavior)
   Fullscreen modal remains unaffected (higher-specificity selectors in
   "SNX GALLERY FULLSCREEN FIX" block continue to match).
---------------------------------------------------------------------------- */

/* --- Gallery outer container (non-fullscreen only) --- */
#gallery {
    overflow: visible !important;
}

/* Non-fullscreen state: the outer wrapper <div> has no extra classes (the
   fullscreen classes are bound reactively). Target it and arrange as flex row. */
#gallery > div:not(.fixed) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Image wrapper takes the right-side space */
#gallery > div:not(.fixed) > div.relative.self-center.w-full {
    flex: 1 1 auto !important;
    order: 2 !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Thumbnails wrapper goes to the left */
#gallery > div:not(.fixed) > div:has(#thumbs) {
    flex: 0 0 88px !important;
    order: 1 !important;
    width: 88px !important;
}

/* Thumbnails nav: vertical column (desktop) */
#gallery > div:not(.fixed) nav#thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 88px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    background: transparent !important;
}

/* The scrolling slides wrapper — vertical flow */
#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 620px !important;
    width: 88px !important;
    scrollbar-width: thin !important;
}

#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slide {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 84px !important;
}

#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slide > button {
    width: 84px !important;
    height: 84px !important;
    padding: 0 !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
}
#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slide > button.border-primary,
#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slide > button[class*="border-primary"] {
    border-color: #0260ae !important;
    border-width: 2px !important;
}
#gallery > div:not(.fixed) nav#thumbs .js_thumbs_slide > button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Hide the slider horizontal scroll buttons — vertical layout uses scrolling */
#gallery > div:not(.fixed) nav#thumbs > button {
    display: none !important;
}

/* --- Klarna OSM placement breathing room --- */
klarna-placement {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

/* --- Prev/Next arrows on main image (phtml adds the buttons) --- */
.snx-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    color: #333;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.snx-gallery-arrow:hover {
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.snx-gallery-arrow:focus {
    outline: 2px solid #0260ae;
    outline-offset: 2px;
}
.snx-gallery-arrow svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
.snx-gallery-arrow-prev { left: 12px; }
.snx-gallery-arrow-next { right: 12px; }

/* Gallery-main bounded on desktop so image + info block fit viewport */
@media (min-width: 1024px) {
    .snx-product-top {
        grid-template-columns: minmax(0, 62%) 1fr !important;
        gap: 32px !important;
    }
    .snx-product-gallery {
        max-width: 800px !important;
        overflow: visible !important;
    }
    .snx-product-gallery #gallery-main {
        max-width: 700px !important;
        max-height: 640px !important;
    }
    .snx-product-gallery #gallery-main > picture,
    .snx-product-gallery #gallery-main > picture img,
    .snx-product-gallery #gallery-main > img {
        max-width: 700px !important;
        max-height: 640px !important;
    }
}

/* XL screens — slightly more image room */
@media (min-width: 1440px) {
    .snx-product-gallery {
        max-width: 880px !important;
    }
    .snx-product-gallery #gallery-main,
    .snx-product-gallery #gallery-main > picture,
    .snx-product-gallery #gallery-main > picture img,
    .snx-product-gallery #gallery-main > img {
        max-width: 760px !important;
        max-height: 680px !important;
    }
}

/* --- Mobile: horizontal thumb row below image (original behavior) ---
   Main image stays edge-to-edge (via .snx-product-gallery negative margin),
   but thumbs row pulls back inside the 16px content gutter so it visually
   aligns with the blocks below (Levertijd bar, Afmeting select, price, etc.). */
@media (max-width: 767px) {
    #gallery > div:not(.fixed) {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #gallery > div:not(.fixed) > div.relative.self-center.w-full {
        order: 1 !important;
    }
    #gallery > div:not(.fixed) > div:has(#thumbs) {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        /* Cancel the gallery's -16px negative margin: pull thumbs back inside
           the content column so they align with the blocks underneath. */
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    #gallery > div:not(.fixed) nav#thumbs {
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides {
        flex-direction: row !important;
        justify-content: flex-start !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        gap: 8px !important;
        /* Don't let inner flex push items out of bounds */
        padding: 0 !important;
    }
    /* On mobile, each thumb takes an equal share (4-up grid look) so the
       row edges land on the content block's edges. Tailwind adds mr-2 / mr-4
       on .js_thumbs_slide — neutralize and rely on gap. */
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide {
        flex: 1 1 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border: 1px solid #e4e4e4 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        background: #fff !important;
        padding: 0 !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button.border-primary,
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button[class*="border-primary"] {
        border-color: #0260ae !important;
        border-width: 2px !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    /* Mobile: hide main-image arrows (touch swipe handles it) */
    .snx-gallery-arrow {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   SNX PDP LAYOUT V2 — END                                           (keep markers)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   SNX PDP THUMBS OVERFLOW — BEGIN                                (keep markers)

   Mobile-first PDP gallery fix. V2 base'deki default arrow + row-layout
   kuralları mobilde/tablette çakışıyordu. Bu blok temiz mobile-first yapıyor:

   - Arrows (prev/next): MOBILE + TABLET için default GİZLİ, sadece ≥1024 göster
   - Outer gallery: mobile/tablet'te column, desktop'ta row (V2 desktop korunur)
   - Thumbs: 4-up grid; 5+ fotoğraf olunca Alpine'ın nav scroll butonları otomatik
     görünür (isSlider=true → .hidden class kaldırılır)
   - Page horizontal overflow guard
   - Scroll-to-top butonu thumb row'un üzerine binmiyor
---------------------------------------------------------------------------- */

/* ===== ARROWS: mobile-first hide, desktop-only show (global, NO media wrap) ===== */
/* V2 base'deki `.snx-gallery-arrow { display: grid }` kuralını ezer. */
.snx-gallery-arrow,
.snx-gallery-arrow-prev,
.snx-gallery-arrow-next,
button.snx-gallery-arrow,
#gallery-main .snx-gallery-arrow {
    display: none !important;
}
@media (min-width: 1024px) {
    .snx-gallery-arrow,
    .snx-gallery-arrow-prev,
    .snx-gallery-arrow-next,
    button.snx-gallery-arrow,
    #gallery-main .snx-gallery-arrow {
        display: grid !important;
    }
}

/* ===== MOBILE + TABLET (≤1023): column layout + thumb sizing ===== */
@media (max-width: 1023px) {
    /* NUCLEAR horizontal overflow guard — html/body + PDP container.
       product-detail-page.phtml'deki `.snx-product-gallery { margin: 0 -16px }`
       (edge-to-edge image) parent'ı taşıtıp add-to-cart butonlarını sağa
       kaydırıyordu. Negative margin'ı da iptal ediyoruz. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .catalog-product-view {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .snx-product-detail,
    .snx-product-top,
    .snx-product-gallery,
    .snx-product-info {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Outer container: column, image üstte, thumbs altta */
    #gallery > div:not(.fixed) {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    #gallery > div:not(.fixed) > div.relative.self-center.w-full {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #gallery > div:not(.fixed) > div:has(#thumbs) {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Main image tam ortalanmış, tam genişlikte */
    #gallery-main {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Thumbs nav: yatay row */
    #gallery > div:not(.fixed) nav#thumbs {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        align-items: stretch !important;
        position: static !important;
        min-height: auto !important;
    }

    /* Thumbs slides container — yatay scroll + snap */
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        touch-action: pan-x !important;
        scrollbar-width: none !important;
        width: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides::-webkit-scrollbar {
        display: none !important;
    }

    /* Thumb item: 4-up grid */
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide {
        flex: 0 0 calc((100% - 24px) / 4) !important;
        width: calc((100% - 24px) / 4) !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        aspect-ratio: 1 / 1 !important;
        scroll-snap-align: start !important;
    }

    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border: 1px solid #e4e4e4 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        background: #fff !important;
        padding: 0 !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button.border-primary,
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button[class*="border-primary"] {
        border-color: #0260ae !important;
        border-width: 2px !important;
    }
    #gallery > div:not(.fixed) nav#thumbs .js_thumbs_slides .js_thumbs_slide > button img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Nav thumb prev/next — Alpine `isSlider` true olunca görünür, küçük kompakt */
    #gallery > div:not(.fixed) nav#thumbs > button {
        display: flex !important;
        flex: 0 0 auto !important;
        padding: 4px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        background: #fff !important;
        border: 1px solid #e4e4e4 !important;
        border-radius: 999px !important;
        color: #333 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }
    #gallery > div:not(.fixed) nav#thumbs > button.hidden {
        display: none !important;
    }
    #gallery > div:not(.fixed) nav#thumbs > button svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Scroll-to-top butonu thumb row üzerine binmesin */
    .snx-back-to-top,
    [class*="back-to-top"],
    [data-back-to-top] {
        bottom: 80px !important;
    }
}

/* ----------------------------------------------------------------------------
   SNX PDP THUMBS OVERFLOW — END                                  (keep markers)
---------------------------------------------------------------------------- */
   SNX COOKIE GEREED FIX — BEGIN                                  (keep markers)

   Problem: Amasty Hyvä cookie bar'da "Cookie Group Info" iç modal'ı, kullanıcı
   "Meer informatie" butonuna basmadan da DOM'da render oluyor ve sayfanın üstüne
   tek başına bir "Gereed" butonu olarak çıkıyor. Cookie settings modal açıldığı
   anda her cookie group için ayrı `initCookieGroupInfo_<hash>` Alpine instance
   oluşuyor ve overlay div'leri x-show/x-bind="overlay" yanlış davranışı yüzünden
   görünür kalıyor.

   Vendor template (Amasty_GdprCookieHyva) <template x-if="group"> bloğu sadece
   group set edilince gerçek içeriği render ediyor, ama "Gereed" close butonu
   bu template'in DIŞINDA — group null olsa bile her zaman render oluyor. Sonuç:
   kullanıcı sadece tek başına bir mavi "GEREED" butonu görüyor.

   Çözüm: Modern :has() ile modal container'ı yalnızca içinde template-rendered
   "#amcookie-group-info" varsa görünür yap. group null = içerik yok = display:none.
   :has() Chrome/Safari/Firefox modern sürümlerinde destekleniyor (Hyvä Alpine
   tabanlı tema zaten modern tarayıcı targetlıyor).
---------------------------------------------------------------------------- */

/* Overlay default GİZLİ — Amasty page load'da group={} olarak init ediyor,
   <template x-if="group"> içerik render ediyor ama x-text="group.name" binding'i
   yapılana kadar h3 boş kalıyor. Önceki :has(#amcookie-group-info) yeterince
   kesin değildi (id her durumda oluşuyordu). Şimdi h3'ün GERÇEKTEN text'i
   dolu olmasını arıyoruz. */
[x-data^="initCookieGroupInfo_"] > [x-bind="overlay"],
[x-data^="initCookieGroupInfo_"] > div[x-bind="overlay"] {
    display: none !important;
}

/* User "Meer informatie" tıklayınca → Alpine group'u set eder → x-text h3'e text
   yazar → h3:not(:empty) match eder → modal görünür olur. */
[x-data^="initCookieGroupInfo_"]:has([x-ref*="am-cookie-group-info"] #amcookie-group-info h3:not(:empty)) > [x-bind="overlay"],
[x-data^="initCookieGroupInfo_"]:has([x-ref*="am-cookie-group-info"] #amcookie-group-info h3:not(:empty)) > div[x-bind="overlay"] {
    display: flex !important;
}

/* Belt-and-suspenders: hiçbir durumda x-ref konteynerinde content rendered değilken
   Gereed button tek başına görünmesin (standalone) */
[x-data^="initCookieGroupInfo_"] [x-ref*="am-cookie-group-info"]:not(:has(#amcookie-group-info h3:not(:empty))) > button[aria-label="Gereed"] {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   SNX COOKIE GEREED FIX — END                                    (keep markers)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   SNX MOBILE CHECKOUT POLISH — BEGIN                             (keep markers)

   Problem: Mobilde PDP'de iki ayrı "In winkelwagen" akışı aynı anda var —
   (1) inline `.snx-cart-row` (qty wrapper + addtocart butonu ürün detay'ın ortasında)
   (2) `.snx-sticky-cart` (viewport bottom'a pin'lenmiş sabit bar, ≤768px'de görünür)

   User:
     a) Sticky bar çok küçük duruyor (36px high, 14px font) — daha tıklanabilir yap
     b) Sticky zaten bottom'da sürekli görünür → inline qty+button duplicate → mobilde gizle

   Çözüm:
   - `.snx-sticky-cart` padding + height + font-size büyütülür (daha belirgin)
   - Sticky button big CTA (52px height, matches inline)
   - Mobilde `.snx-cart-row` (inline form'daki qty+add-to-cart wrapper) hidden
   - `page-wrapper` bottom padding bump → sticky'nin altına içerik girmesin
---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* === Sticky bar yapı: daha yüksek, daha soluk padding === */
    .snx-sticky-cart {
        padding: 12px 14px !important;
        gap: 10px !important;
        min-height: 72px !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
    }

    /* === Prices — daha okunur, ama dar ekranda cart button'a yer aç === */
    .snx-sticky-prices {
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    .snx-sticky-old {
        font-size: 12px !important;
    }
    .snx-sticky-final {
        font-size: 18px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    /* === Qty kontrol: kompakt ama dokunma hedefi olarak yeterli === */
    .snx-sticky-qty {
        border-radius: 6px !important;
        border-width: 1px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
    .snx-sticky-qty button {
        width: 32px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    .snx-sticky-qty input {
        width: 32px !important;
        height: 44px !important;
        font-size: 15px !important;
    }

    /* === "In winkelwagen" CTA — büyük, flex:1 ile kalan tüm alanı alır === */
    .snx-sticky-cartbtn {
        height: 48px !important;
        padding: 8px 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        gap: 6px !important;
        box-shadow: 0 2px 6px rgba(141, 201, 24, 0.25) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    .snx-sticky-cartbtn svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    /* === Sticky için page-wrapper alt boşluk artır === */
    .catalog-product-view .page-wrapper {
        padding-bottom: 90px !important;
    }

    /* === Inline qty + add-to-cart (snx-cart-row) MOBILDE GİZLİ ===
       Sticky duplicate → inline'a gerek yok. Masaüstünde (≥769) sticky zaten
       gizli, inline form görünür kalır. */
    .snx-cart-row {
        display: none !important;
    }

    /* === "IN VERLANGLIJST" / "IN VERGELIJKEN" butonları: tek satır ===
       Inline CSS'te padding 14px 24px + font 14px → "IN VERLANGLIJST" mobilde
       alt satıra kaydırıyor. Padding düşür + nowrap + font biraz küçült. */
    .snx-secondary-actions {
        gap: 8px !important;
    }
    .snx-action-btn {
        white-space: nowrap !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    .snx-action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ----------------------------------------------------------------------------
   SNX MOBILE CHECKOUT POLISH — END                               (keep markers)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   SNX CLS FIX — BEGIN                                            (keep markers)

   Problem: Desktop PageSpeed (2026-04-21) CLS = 0.643 (red — kabul edilemez).
   Mobile CLS 0.01 (good) ama desktop'ta ciddi shift.

   Kök neden: PDP'de gallery containers initial render'da yer TUTMUYOR:
   - `.snx-product-gallery` flex item, yüksekliği image'ın yüklenip aspect
     ratio'sunu açıklamasına bağlı
   - `#gallery-main` içinde `<picture>` var ama picture height 0 until img loads
   - `<template x-for="images">` Alpine render'ı sonrası thumbs nav 0→100px
   - `.snx-cat-title` + `.snx-cat-desc` — Abel font FOUT reflow

   Sonuç: page ilk paint'te gallery 0 height → image load sonrası 640px → altındaki
   product info + breadcrumb + tüm aşağı içerik sıçrar → CLS 0.5+

   Çözüm: Kritik containers'a aspect-ratio + min-height ekle. Image yüklenmeden
   önce de place reserve edilir, load sonrası sıçrama olmaz.
---------------------------------------------------------------------------- */

/* ===== DESKTOP + TABLET: Gallery container reserve space (≥1024) ===== */
@media (min-width: 1024px) {
    /* Ana gallery area — 1:1 aspect sabit */
    .snx-product-gallery {
        aspect-ratio: 1 / 1 !important;
        max-width: 700px !important;
    }
    /* #gallery-main — image container, 1:1 aspect, min 400px fallback */
    .snx-product-gallery #gallery-main,
    #gallery-main {
        aspect-ratio: 1 / 1 !important;
        min-height: 400px !important;
    }
    /* Sol thumb column (desktop row layout) — 88px sabit genişlik, yükseklik image'a eşit */
    #gallery > div:not(.fixed) > div:has(#thumbs) {
        min-height: 400px !important;
    }
}

/* ===== MOBILE + TABLET (≤1023): column layout ===== */
@media (max-width: 1023px) {
    /* Gallery main — dikey layout, aspect 1:1 image alanı */
    .snx-product-gallery,
    #gallery-main {
        aspect-ratio: 1 / 1 !important;
        min-height: 320px !important;
    }
    /* Thumb row — 8 thumb için ~88px min-height (mevcut inline 100px ama override edilmiş olabilir) */
    #gallery > div:not(.fixed) nav#thumbs {
        min-height: 90px !important;
    }
    /* Category description clamped collapsed state */
    .snx-cat-desc-collapsed {
        min-height: 84px !important;
    }
}

/* ===== ALL VIEWPORTS: Product title/info stability ===== */
.snx-product-title {
    /* FOUT-safe — font yüklenene kadar fallback system-ui aynı height */
    line-height: 1.35 !important;
    min-height: 1.35em !important;
}

/* Category description wrapper (collapsed state specifically) */
.snx-cat-desc.snx-cat-desc-collapsed {
    min-height: 56px !important;
}

/* Gallery picture tag — aspect ratio safety (Yireo NextGenImages wraps img) */
.snx-product-gallery #gallery-main > picture {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.snx-product-gallery #gallery-main > picture > img,
.snx-product-gallery #gallery-main > img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ----------------------------------------------------------------------------
   SNX CLS FIX — END                                              (keep markers)
---------------------------------------------------------------------------- */