/* ===== 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;
}
.snx-cat-arrow-left { left: 6px; }
.snx-cat-arrow-right { right: 6px; }
@media (min-width: 769px) {
    .snx-cat-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 — PSI reports 0.098 shift from .snx-product-gallery
   when Alpine hydrates and shows the first image. Reserve intrinsic aspect
   ratio 1/1 (matches product_image_white_border_bounding default) + min-height
   to prevent the collapse/expand jump. */
.snx-product-gallery {
    min-height: 400px;
    contain: layout;
}
@media (max-width: 768px) {
    .snx-product-gallery {
        min-height: 340px;
    }
}

/* 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 — PageBuilder hero column needs reserved height on mobile ===== */
@media (max-width: 1023px) {
    .pagebuilder-column.primary-herobanner {
        min-height: 200px !important;
        aspect-ratio: 616 / 273 !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;
}
/* Blog cache generates 1440x500 images with white padding on sides (~32% left, ~33% right).
   The actual photo occupies only the center ~35% of the cached image.
   Scale height to 300% so the photo portion fills the card width, hiding white borders. */
.new-inspiration-slider .post-item-info a > div:first-child {
    height: 220px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-size: auto 300% !important;
    background-position: center !important;
}
@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;
    }
}