/* ===== 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 !important;
    }
    .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 !important;
    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 !important;
    }
    /* 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,


/* ===== 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).
---------------------------------------------------------------------------- */


/* SNX COOKIE GROUP INFO FIX v3 (2026-05-01)
   v2 relied on h3:not(:empty) timing which can race Alpine x-text.
   v3 uses #amcookie-group-info *existence* — set by x-if="group",
   which fires synchronously with group data. No timing window.
   Rule A: hide overlay when group not yet loaded (#amcookie-group-info absent)
   Rule B: show overlay when group IS loaded (use flex)
   Rule C: hide Gereed button when group not loaded
*/
[x-data^="initCookieGroupInfo_"]:not(:has(#amcookie-group-info)) > [x-bind="overlay"],
[x-data^="initCookieGroupInfo_"]:not(:has(#amcookie-group-info)) > div[x-bind="overlay"] {
    display: none !important;
}
[x-data^="initCookieGroupInfo_"]:has(#amcookie-group-info) > [x-bind="overlay"],
[x-data^="initCookieGroupInfo_"]:has(#amcookie-group-info) > div[x-bind="overlay"] {
    display: flex !important;
}
[x-data^="initCookieGroupInfo_"]:not(:has(#amcookie-group-info)) button[aria-label="Gereed"] {
    display: none !important;
}

/* 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;
    }
    /* Force single-column layout and prevent intrinsic image width (600px)
       from expanding the 1fr grid track beyond the viewport */
    .snx-product-top {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }
    .snx-product-gallery {
        min-width: 0 !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 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)
---------------------------------------------------------------------------- */


/* ========================================================================
   Sanexo Homepage Hero Banner — Desktop spacing (added 2026-04-24)
   The PageBuilder column-group has 25%+75% columns sitting flush against
   each other AND two stacked tiles in the left column also touching.
   On desktop this looks crammed. Add small gap horizontally + vertically.
   Mobile uses single-column stack already (no gap needed there).
   ======================================================================== */
@media (min-width: 769px) {
    .herobanner .row-full-width-inner {
        padding: 0 16px !important;
    }
    .herobanner .pagebuilder-column-group .pagebuilder-column-line {
        gap: 16px !important;
    }
    .herobanner .pagebuilder-column-line > .pagebuilder-column > div + div {
        margin-top: 16px !important;
    }
}


/* ========================================================================
   Sanexo Homepage Hero Banner — Desktop spacing (added 2026-04-25)
   - Top breathing room between header/nav and hero (was touching)
   - Horizontal gap between 25% left column and 75% hero column (was flush)
   - Vertical gap between the 2 stacked tiles in left column
   - Side padding so banner doesn't bleed to viewport edges
   Mobile (< 769px) keeps single-column stack — no changes there.
   ======================================================================== */
@media (min-width: 769px) {
    .herobanner {
        margin-top: 12px !important;
    }
    .herobanner .row-full-width-inner {
        padding: 0 16px !important;
    }
    .herobanner .pagebuilder-column-group .pagebuilder-column-line {
        gap: 16px !important;
    }
    .herobanner .pagebuilder-column-line > .pagebuilder-column > div + div {
        margin-top: 16px !important;
    }
}



/* ----------------------------------------------------------------------------
   SNX MOBILE GALLERY HEIGHT FIX v2 — BEGIN                          (keep markers)
   v1 used height:auto + aspect-ratio:auto on mobile but didn't constrain
   gallery WIDTH. Result: .snx-product-gallery rendered 616px wide while parent
   .snx-product-top is only 366px (mobile column layout) → gallery overflowed
   parent and image rendered tiny in a giant box with whitespace around.
   v2 adds max-width:100% + width:100% so gallery hugs its parent on mobile.
   Desktop unaffected (≥1024px).
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    html body .snx-product-gallery {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        aspect-ratio: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    html body .snx-product-gallery #gallery-main,
    html body .snx-product-gallery #gallery-main > picture,
    html body .snx-product-gallery #gallery-main > picture img,
    html body .snx-product-gallery #gallery-main > img {
        max-width: 100% !important;
    }
}
/* ----------------------------------------------------------------------------
   SNX MOBILE GALLERY HEIGHT FIX v2 — END                            (keep markers)
   ---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   SNX PHASE C OVERRIDE — BEGIN                                     (keep markers)
   Phase C LCP fix sets `.cms-index-index .new-inspiration-slider, .home-testimonial,
   .page-footer { content-visibility: hidden }` on mobile <768px to keep them out
   of the LCP candidate pool. Reveal JS in preload-hints.phtml adds .snx-cv-revealed
   on first scroll OR after 2s timeout.

   User reports: "scroll-down sayfa beyaza dönüyor" — symptom of content-visibility:
   hidden persisting (reveal JS not firing or being blocked). Force visible to
   eliminate the white-on-scroll bug. Trade-off: slight LCP candidate noise on
   first homepage paint, acceptable since the real LCP image is preloaded with
   fetchpriority=high anyway.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    html body .cms-index-index .new-inspiration-slider,
    html body .cms-index-index .home-testimonial,
    html body .cms-index-index .page-footer {
        content-visibility: visible !important;
    }
}
/* ----------------------------------------------------------------------------
   SNX PHASE C OVERRIDE — END                                       (keep markers)
   ---------------------------------------------------------------------------- */

/* ============================================================================
   SNX MOBILE PDP UX FIXES — BEGIN                                 (keep markers)
   Fixes 1, 3, 5, 6 from mobile PDP audit 2026-04-29.
   ============================================================================ */

/* FIX 1: Product title (H1) hidden on all screen sizes.
   Inline <style> only hides it at ≤768px; we extend to all viewports. */
.snx-product-title {
    display: none !important;
}

/* FIX 3: Cookie bar (Amasty) already renders as fixed bottom-0, but the
   scrollable text area is 30vh and the total bar ends up ~45vh.
   Cap the dialog itself so it stays compact and never blocks the ATC area. */
@media (max-width: 1023px) {
    [role="dialog"][aria-label="Cookie Bar"] {
        max-height: 36vh !important;
        overflow-y: auto !important;
    }
    #amcookie-bar-content {
        max-height: 7vh !important;
        overflow-y: auto !important;
    }
}

/* FIX 6: Breadcrumb compact — reduce padding only.
   flex-wrap intentionally kept as-is to avoid overflow on deep hierarchies. */
@media (max-width: 1023px) {
    .breadcrumbs .row-full-width-inner {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
    .breadcrumbs ol {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
    .breadcrumbs li.product {
        display: none !important;
    }
}

/* FIX 7: Delivery badge spacing — .snx-product-info-inner starts at margin-top:0
   right below the gallery thumbnails, badge visually stuck. Add breathing room. */
@media (max-width: 1023px) {
    .snx-product-info-inner {
        margin-top: 14px !important;
    }
}

/* FIX 8: Stock badge — show "Op voorraad" only, hide "— direct leverbaar".
   Text is one node so font-size:0 collapses it; ::after injects clean label. */
.snx-stock-badge--in {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0 !important;
}
.snx-stock-badge--in::after {
    content: 'Op voorraad';
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a7a3c !important;
}

/* ============================================================================
   SNX MOBILE PDP UX FIXES — END                                   (keep markers)
   ============================================================================ */

/* ============================================================================
   SNX CLS FIX — Klarna placement space reservation                (keep markers)
   Klarna JS loads at ~1200ms and renders the placement from 0→38px height.
   This pushes .snx-stock-badge, .snx-cart-row, .snx-usps DOWN → CLS 0.174.
   Fix: reserve space before Klarna renders. Both mobile + desktop.
   ============================================================================ */
klarna-placement[data-key="credit-promotion-auto-size"] {
    display: block !important;
    min-height: 44px !important;
    contain: layout !important;
}
/* ============================================================================
   SNX CLS FIX — END                                               (keep markers)
   ============================================================================ */

/* ============================================================================
   SNX STAGING IMPROVEMENTS (2026-05-07)
   ============================================================================ */

/* Hover rengi: #0068b8 (canlıyla eslesmis) */
.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-hover: #0068b8 !important;
}

/* Nav bar top-level links: 16px bold to match live site */
.snx-nav nav ul[role="menubar"] > li > a {
    padding: 12px 12px !important;
    color: #333 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
.snx-nav nav ul[role="menubar"] > li:first-child > a {
    padding-left: 0 !important;
}

/* CLS fix: prevent nav wrapper from collapsing when deferred CSS loads */
.snx-nav nav ul[role="menubar"] {
    min-height: 48px;
}
.snx-nav div[class*="hidden"][class*="lg:block"] {
    min-height: 48px;
}

/* Active nav item: white text when dropdown is open (matches live site) */
.snx-nav nav ul[role="menubar"] > li > a[aria-expanded="true"] {
    color: #fff !important;
}
.snx-nav nav ul[role="menubar"] > li > a[aria-expanded="true"] svg {
    color: #fff !important;
}

/* SNX arrow fix: mobile sidebar ok sembolleri */
[id="snx-mobile-sidebar"] button > span:last-child,
aside[role="dialog"] button > span:last-child {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2.5px solid currentColor !important;
    border-bottom: 2.5px solid currentColor !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
}