/** Shopify CDN: Minification failed

Line 12101:3 Unexpected "="

**/
/* ============================================================
   SCHIPPERS IT — REDESIGN OVERLAY
   Dark cyber-security theme over Milano (Bersky)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&family=PT+Sans:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --sc-bg: #07141a;
  --sc-bg-dark: #050f14;
  --sc-surface: #0c2029;
  --sc-input: #0a1a22;
  --sc-accent: #309dc6;
  --sc-accent-2: #309dc6;
  --sc-cta: #fff500;
  --sc-text: #ffffff;
  --sc-text-mid: #ffffff;
  --sc-text-mute: #ffffff;
  --sc-success: #34d17e;
  --sc-border: rgba(255,255,255,.08);
  --sc-border-strong: rgba(255,255,255,.18);
  --sc-accent-border: rgba(48,157,198,.25);
  --sc-font: 'Centrale Sans', 'Mulish', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-heading: 'Centrale Sans', 'Mulish', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- GLOBAL ---------- */
html {
  background: var(--sc-bg) !important;
  overflow-x: hidden !important;
}
body {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}
/* HTML bg must match body bg for light-bg pages */
html:has(body.collection),
html:has(body.product),
html:has(body.cart),
html:has(body.page),
html:has(body.search),
html:has(body.list-collections),
html:has(body.article),
html:has(body.blog) {
  background: #f9f9fb !important;
}

body, body *, p, span, div, li, a, label, button, input, textarea, select {
  font-family: var(--sc-font);
}
.font-mono, .sc-mono, [class*="ibmplex"] {
  font-family: var(--sc-font) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading, .section-heading, .product-title, .card__heading {
  font-family: var(--sc-font) !important;
  font-weight: 800 !important;
  color: var(--sc-text) !important;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* Text */
p, .rte, .text, .description {
  color: var(--sc-text-mid);
}

::selection { background: var(--sc-accent); color: #fff; }

/* Scrollbars */
.sc-scroll::-webkit-scrollbar,
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(48,157,198,.35); border-radius: 8px; }
*::-webkit-scrollbar-track { background: var(--sc-bg-dark); }

/* ---------- UTILITY: diamond bullet ---------- */
.sc-diamond, .sc-diamond-sm {
  display: inline-block;
  background: var(--sc-accent);
  transform: rotate(45deg);
  vertical-align: middle;
  margin-right: 9px;
  flex-shrink: 0;
}
.sc-diamond { width: 9px; height: 9px; }
.sc-diamond-sm { width: 7px; height: 7px; }
.sc-eyebrow {
  font-family: var(--sc-font);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--sc-accent-2);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.sc-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--sc-accent);
  transform: rotate(45deg);
}

/* ---------- BUTTONS ---------- */
.btn, .button, button.btn, .btn-primary, .btn-secondary,
.shopify-payment-button__button,
.product-form__submit, .cart__submit, .cart__checkout-button,
.bersky-button, [class*="button-primary"], [class*="btn-primary"] {
  font-family: var(--sc-font) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  transition: all .2s ease;
}

.btn-primary, .button--primary, .product-form__submit,
.shopify-payment-button__button--unbranded,
.cart__checkout-button, button[type="submit"].btn,
.btn--cta {
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
}
.btn-primary:hover, .button--primary:hover, .product-form__submit:hover,
.cart__checkout-button:hover {
  background: #f2e800 !important;
  transform: translateY(-1px);
}

.btn-secondary, .button--secondary, .btn-outline {
  background: transparent !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border-strong) !important;
}
.btn-secondary:hover, .button--secondary:hover, .btn-outline:hover {
  border-color: var(--sc-accent) !important;
  color: var(--sc-accent-2) !important;
}

/* ---------- INPUTS ---------- */
input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="tel"], input[type="password"],
textarea, select, .input, .field__input {
  background: var(--sc-input) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font) !important;
  border-radius: 0 !important;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--sc-accent) !important;
}
::placeholder { color: var(--sc-text-mute) !important; }

/* ---------- LINKS ---------- */
a { color: var(--sc-text); text-decoration: none; }
a:hover { color: var(--sc-accent-2); }
.rte a, p a { color: var(--sc-accent-2); }

/* ============================================================
   HEADER
   ============================================================ */
.header, .site-header, header.shopify-section, .header__wrapper,
section[id*="header"] .header {
  background: #050f14 !important;
  border-bottom: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
}
.header * { color: inherit; }
.header a, .site-header a { color: var(--sc-text); }
.header a:hover, .site-header a:hover { color: var(--sc-accent-2); }

.header__logo img, .site-header__logo img {
  filter: none;
  max-height: 38px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Search bar in header */
.header__search, .search-form, .predictive-search,
.header-search, [class*="header-search"] {
  background: var(--sc-input) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
}
.header__search input, .search-form input, .predictive-search input {
  background: transparent !important;
  border: none !important;
}
.header__search button, .search-form button[type="submit"] {
  background: var(--sc-accent) !important;
  color: #fff !important;
  border: none !important;
  padding: 0 22px !important;
  font-family: var(--sc-font) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Nav */
.navigation, .site-nav, .header__menu, nav.navigation {
  border-top: 1px solid rgba(255,255,255,.06);
  background: transparent;
}
.navigation a, .site-nav a, .header__menu a, nav.navigation a {
  color: var(--sc-text) !important;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.navigation a:hover, .site-nav a:hover {
  color: var(--sc-accent-2) !important;
}

/* Cart count badge */
.cart-count, .cart-counter, .header__cart-count,
[class*="cart-count"], [class*="cart-counter"] {
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  font-family: var(--sc-font) !important;
  font-weight: 600;
  border-radius: 50% !important;
}

/* Header icons label style */
.header__icon-label, .icon-label, .header__action-label {
  font-family: var(--sc-font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-mid);
}

/* ============================================================
   ANNOUNCEMENT / UTILITY BAR
   ============================================================ */
.announcement-bar, .top-bar, .announcement {
  background: var(--sc-bg-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: var(--sc-text-mid) !important;
}
.announcement-bar *, .top-bar *, .announcement * {
  font-family: var(--sc-font) !important;
  font-size: 11.5px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--sc-text-mid) !important;
}
.announcement-bar .announcement__item::before,
.top-bar .top-bar__item::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--sc-accent);
  transform: rotate(45deg);
  margin-right: 9px;
  vertical-align: middle;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer, .site-footer, footer.shopify-section,
section[id*="footer"] .footer {
  background: var(--sc-bg-dark) !important;
  border-top: 1px solid var(--sc-border) !important;
  color: var(--sc-text-mid) !important;
}
.footer *, .site-footer * {
  color: inherit;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
.footer .heading, .footer__heading, .site-footer__heading,
.footer-block__heading, .footer .h4 {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
}
.footer a, .site-footer a, .footer-block a {
  color: var(--sc-text-mid) !important;
  font-size: 14px;
}
.footer a:hover, .site-footer a:hover {
  color: var(--sc-accent-2) !important;
}
.footer__copyright, .copyright {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mute) !important;
}

/* Newsletter in footer */
.footer .newsletter input, .footer input[type="email"] {
  background: var(--sc-input) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
}

/* ============================================================
   SECTIONS — backgrounds
   ============================================================ */
.shopify-section { background: var(--sc-bg); }
.page-width, .section, .container { background: transparent; }

.section--padded, .shopify-section { color: var(--sc-text); }
.shopify-section h1, .shopify-section h2, .shopify-section h3 { color: var(--sc-text) !important; }
.shopify-section p, .shopify-section .rte { color: var(--sc-text-mid); }

/* Page content background */
body.page, body.collection, body.product, body.cart,
body.search, body.blog, body.article,
.main-content, #MainContent {
  background: var(--sc-bg) !important;
}

/* ============================================================
   PRODUCT CARDS (homepage + collection)
   White card on dark site (per mockup spec)
   ============================================================ */
.product-card, .card-product, .product-item, .product-grid-item,
.grid__item .card, [class*="product-card"] {
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover, .card-product:hover, .product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.product-card *, .card-product *, .product-item * {
  color: var(--sc-bg);
}
.product-card .vendor, .product-card .product__vendor,
.card-product .vendor, .product__vendor {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: var(--sc-accent) !important;
  text-transform: uppercase !important;
  font-weight: 600;
}
.product-card .product-title, .product-card .product-name,
.card-product .card__heading, .card-product__title,
.product__title, .product-card h3, .product-card h2 {
  font-family: var(--sc-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sc-bg) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}
.product-card .price, .product-card .product-price,
.card-product .price, .price__regular,
.product-card .money {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--sc-bg) !important;
  font-family: var(--sc-font) !important;
}
.product-card .price--on-sale .price__sale {
  color: #e23131 !important;
}
.product-card .price s, .price--on-sale s {
  color: var(--sc-text-mute) !important;
}

/* Add-to-cart button on card */
.product-card button.add-to-cart, .product-card .button--add,
.card-product button.btn, .quick-add-button,
.card__add-to-cart, [class*="quick-add"] button {
  background: var(--sc-bg) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.product-card button.add-to-cart:hover {
  background: var(--sc-accent) !important;
}

/* Badges on cards */
.product-card .badge, .product-card .product-label,
.card-product .badge, .product-badge,
[class*="product-badge"], [class*="badge--"] {
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  padding: 5px 9px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.product-card .badge--new, .badge--new {
  background: var(--sc-accent) !important;
  color: #fff !important;
}

/* Star ratings */
.spr-icon-star, .rating-star, [class*="rating-star"] {
  color: var(--sc-cta) !important;
}

/* ============================================================
   COLLECTION / SECTION HEADERS
   ============================================================ */
.section-header, .section__header, .collection__title,
.shopify-section h2.section-heading {
  margin-bottom: 30px;
}
.section-header h2, .section__header h2, .section-heading {
  font-size: 38px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
  margin: 0 !important;
}
.section-header .subheading, .section-header__subheading,
.section__subheading {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
}

/* "View all" link */
.section-header__link, .section__view-all, .view-all-link {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
}

/* ============================================================
   SLIDESHOW / HERO
   ============================================================ */
.slideshow, .slideshow__slide, .hero, .banner-slideshow {
  background: var(--sc-bg);
  color: var(--sc-text);
}
.slideshow__heading, .slideshow .heading, .hero__heading {
  font-family: var(--sc-font) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
  letter-spacing: -.01em !important;
}
.slideshow__subheading, .slideshow .subheading, .hero__subheading {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .26em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
}
.slideshow__description, .slideshow .description, .hero__description {
  font-size: 18px !important;
  color: var(--sc-text-mid) !important;
}

.slideshow .swiper-pagination-bullet,
.slick-dots li button { background: var(--sc-text-mute) !important; }
.slideshow .swiper-pagination-bullet-active,
.slick-dots li.slick-active button { background: var(--sc-accent) !important; }

/* ============================================================
   COLLECTION LIST (categories cards)
   ============================================================ */
.collection-list__item, .collection-card, .collection-grid-item,
[class*="collection-list"] .card {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
  padding: 34px 30px !important;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.collection-list__item:hover, .collection-card:hover {
  transform: translateY(-3px);
  border-color: var(--sc-accent-border) !important;
}
.collection-list__item::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border: 1.5px solid rgba(48,157,198,.25);
  transform: rotate(45deg);
  pointer-events: none;
}
.collection-list__item h3, .collection-card .heading,
.collection-list__item .title {
  font-size: 24px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
  margin: 10px 0 8px !important;
}
.collection-list__item p, .collection-card p {
  color: var(--sc-text-mid) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   BRAND LOGO STRIP
   ============================================================ */
.brand-logo, [class*="brand-logo"], .logo-list {
  background: var(--sc-bg-dark) !important;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}
.brand-logo img, .brand-logo__item img {
  filter: grayscale(100%) brightness(.7);
  opacity: .8;
  transition: all .2s;
}
.brand-logo img:hover {
  filter: none;
  opacity: 1;
}

/* ============================================================
   ICON BOX (USP cards)
   ============================================================ */
.icon-box, .icon-with-text, [class*="icon-box"] {
  background: var(--sc-bg-dark) !important;
}
.icon-box__item, .icon-with-text__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.icon-box__title, .icon-with-text__title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--sc-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.icon-box__text, .icon-with-text__text {
  font-size: 13px !important;
  color: var(--sc-text-mid) !important;
  line-height: 1.5 !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb, .breadcrumbs, nav.breadcrumb {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mute) !important;
  letter-spacing: .04em !important;
}
.breadcrumb a, .breadcrumbs a {
  color: var(--sc-text-mid) !important;
}
.breadcrumb__separator, .breadcrumbs__separator {
  color: var(--sc-accent-2) !important;
}

/* ============================================================
   COLLECTION (PLP) — filter sidebar + grid
   ============================================================ */
.collection-sidebar, .facets, .collection__sidebar,
.collection-filters, aside.filters {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  padding: 26px !important;
  border-radius: 0 !important;
}
.facets__heading, .filter-group__heading, .collection-sidebar h4,
.facets-wrap h4, .filter-group__title {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}
.facets__heading::before, .filter-group__heading::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--sc-accent);
  transform: rotate(45deg);
  margin-right: 8px;
}
.facets__list, .filter-options {
  list-style: none;
  padding: 0;
}
.facets__item label, .filter-options__item label {
  color: var(--sc-text-mid) !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.facets__item input[type="checkbox"],
.filter-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--sc-border-strong);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 0;
}
.facets__item input[type="checkbox"]:checked,
.filter-options input[type="checkbox"]:checked {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}
.facets__item .count, .filter-count {
  font-family: var(--sc-font);
  font-size: 11px;
  color: var(--sc-text-mute);
  margin-left: auto;
}

/* Active filter chips */
.active-filters__chip, .filter-chip, .selected-filter {
  background: var(--sc-bg) !important;
  border: 1px solid var(--sc-accent-border) !important;
  color: var(--sc-text-mid) !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  padding: 6px 11px !important;
  border-radius: 0 !important;
}

/* Sort dropdown */
.collection-sort, .sort-by, .collection__sort {
  background: var(--sc-bg) !important;
  border: 1px solid var(--sc-border) !important;
}
.collection-sort select, .sort-by select {
  background: transparent !important;
  color: var(--sc-text) !important;
  font-size: 13px !important;
}

/* Toolbar */
.collection-toolbar, .toolbar {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  padding: 12px 18px !important;
}

/* Pagination */
.pagination a, .pagination span {
  color: var(--sc-text-mid) !important;
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
}
.pagination .current, .pagination__current,
.pagination .active {
  background: var(--sc-accent) !important;
  color: #fff !important;
}

/* Price range slider */
.price-slider, .noUi-target, .filter-range-slider {
  background: var(--sc-bg) !important;
  border: none !important;
  height: 4px !important;
}
.noUi-connect { background: var(--sc-accent) !important; }
.noUi-handle {
  background: #fff !important;
  border-radius: 0 !important;
  width: 12px !important;
  height: 12px !important;
  box-shadow: none !important;
  transform: rotate(45deg);
}

/* Collection heading */
.collection-hero, .collection-header {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
}
.collection-hero h1, .collection-header h1, .collection__title {
  font-size: 42px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
}

/* ============================================================
   PRODUCT PAGE (PDP)
   ============================================================ */
.product, .product__container, .product-single, body.product .main-content {
  background: var(--sc-bg) !important;
  color: var(--sc-text);
}
.product * {
  color: inherit;
}
.product .product__title, .product__title, .product-single__title {
  font-size: 36px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
  line-height: 1.08 !important;
}
.product .product__vendor, .product-single__vendor {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
}
.product .price, .product__price,
.product-single__price {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font) !important;
}
.product__price-vat, .price__vat {
  font-family: var(--sc-font);
  font-size: 12px;
  color: var(--sc-text-mid);
}

/* Stock badge */
.product__stock, .stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sc-font);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-success) !important;
}
.product__stock::before, .stock-indicator.in-stock::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--sc-success);
  border-radius: 50%;
  display: inline-block;
}

.product__description, .product-single__description,
.product__details .rte {
  color: var(--sc-text-mid) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Quantity selector */
.product .quantity, .quantity-selector, .product-form__quantity,
.qty-selector, .quantity__input-wrapper {
  border: 1px solid var(--sc-border-strong) !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
}
.quantity button, .quantity-selector button, .product-form__quantity button {
  background: transparent !important;
  color: var(--sc-text) !important;
  border: none !important;
  width: 46px !important;
  height: 52px !important;
  font-size: 20px !important;
}
.quantity input, .quantity-selector input, .product-form__quantity input {
  background: transparent !important;
  color: var(--sc-text) !important;
  border: none !important;
  width: 46px !important;
  text-align: center !important;
  font-family: var(--sc-font) !important;
}

/* Product form submit (Add to cart) */
.product-form__submit, .product-form__cart-submit,
.product .btn--add-to-cart, .product-form button[type="submit"] {
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  height: 52px !important;
  flex: 1;
  font-family: var(--sc-font) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* Product gallery */
.product__gallery, .product-gallery, .product-single__media,
.product__media-wrapper {
  background: transparent;
}
.product__gallery img, .product-gallery img, .product__media img {
  background: #fff;
}

/* Product tabs */
.product__tabs, .product-information-tab,
.tabs-nav, .tab-titles {
  border-bottom: 1px solid var(--sc-border) !important;
}
.tab-title, .tabs-nav a, .product__tab {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--sc-text-mid) !important;
  background: transparent !important;
  border: none !important;
  padding: 14px 20px !important;
}
.tab-title.active, .tabs-nav a.active, .product__tab.active {
  color: var(--sc-accent-2) !important;
  border-bottom: 2px solid var(--sc-accent) !important;
}

/* Spec table */
.product__specs table, .specs-table, .product-information-tab table {
  width: 100%;
}
.product__specs table td, .specs-table td {
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  font-size: 14px !important;
}
.product__specs table td:first-child, .specs-table td:first-child {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mute) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* Wishlist / Compare */
.product__wishlist, .wishlist-button, .compare-button {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mid) !important;
  background: transparent !important;
  border: none !important;
}

/* Variant swatches */
.swatch, .variant-input, .product-form__option-pill {
  border: 1px solid var(--sc-border-strong) !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  border-radius: 0 !important;
}
.swatch.active, .variant-input--active,
.product-form__option-pill[aria-checked="true"] {
  border-color: var(--sc-accent) !important;
  background: var(--sc-accent) !important;
  color: #fff !important;
}

/* ============================================================
   CART PAGE
   ============================================================ */
body.cart, .cart-page, .cart {
  background: var(--sc-bg) !important;
  color: var(--sc-text);
}
.cart h1, .cart__title, .cart-title {
  font-size: 42px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
}
.cart__items, .cart-items, .cart-table {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
}
.cart__items th, .cart-table th,
.cart-items__heading {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  color: var(--sc-text-mute) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 16px 24px !important;
  background: transparent !important;
}
.cart__item, .cart-item, .cart-table tr {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.cart__item td, .cart-item td {
  padding: 22px 24px !important;
  color: var(--sc-text-mid) !important;
}
.cart__item-title, .cart-item__title, .cart-item__name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.cart__item-vendor, .cart-item__vendor {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
}
.cart__remove, .cart-item__remove, .remove-button {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  color: var(--sc-text-mute) !important;
}
.cart__subtotal-value, .cart__item-subtotal {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--sc-text) !important;
}

/* Cart summary */
.cart__summary, .cart-summary, .cart-totals,
.cart-sidebar, .order-summary {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-accent-border) !important;
  padding: 28px !important;
  border-radius: 0 !important;
  position: sticky;
  top: 160px;
}
.cart__summary h3, .cart-summary h3, .order-summary h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--sc-text) !important;
  margin-bottom: 22px !important;
}
.cart__summary-row, .cart-totals__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--sc-text-mid);
}
.cart__total, .cart-totals__total {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--sc-text) !important;
  border-top: 1px solid var(--sc-border) !important;
  padding-top: 18px !important;
}
.cart__checkout, .cart__checkout-button {
  width: 100%;
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  height: 52px !important;
  font-family: var(--sc-font) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Discount code */
.cart__discount input, .discount-input {
  background: var(--sc-bg) !important;
  border: 1px solid var(--sc-border) !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
}

/* ============================================================
   ACCOUNT / LOGIN / REGISTER PAGES
   ============================================================ */
.template-customers-login, .template-customers-register,
.template-customers-account, .template-customers-addresses,
.template-customers-order, .customer-page {
  background: var(--sc-bg) !important;
  color: var(--sc-text);
}
.customer-page form, .login-form, .register-form,
.account-section, .customer__container {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  padding: 32px !important;
  color: var(--sc-text);
}
.customer-page label, .customer-page input,
.customer-page form .field__label {
  color: var(--sc-text);
}
.customer-page h1, .customer-page h2 {
  color: var(--sc-text) !important;
}

/* ============================================================
   BLOG / ARTICLE
   ============================================================ */
body.blog, body.article, .article, .blog-post {
  background: var(--sc-bg) !important;
  color: var(--sc-text-mid);
}
.article__title, .blog__title, .article h1 {
  color: var(--sc-text) !important;
}
.article__meta, .blog__meta {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mute) !important;
}
.article__content, .article__body, .rte {
  color: var(--sc-text-mid);
  line-height: 1.7;
}
.article__content a, .article__body a {
  color: var(--sc-accent-2) !important;
}

/* ============================================================
   SEARCH PAGE / PREDICTIVE
   ============================================================ */
.predictive-search__results, .search-results {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
}
.predictive-search__result, .search-result {
  border-bottom: 1px solid var(--sc-border);
  color: var(--sc-text-mid);
}
.predictive-search__heading {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
}

/* ============================================================
   POPUPS / MODALS
   ============================================================ */
.modal, .popup, .quickview, .quickshop, .quick-view,
.dialog, .product-quickview {
  background: var(--sc-surface) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border-strong) !important;
}
.modal *, .popup *, .quickview * {
  color: inherit;
}
.modal-overlay, .popup-overlay {
  background: rgba(5,15,20,.88) !important;
}
.modal-close, .popup-close {
  color: var(--sc-text-mid) !important;
  background: transparent !important;
}

/* Minicart drawer */
.minicart, .cart-drawer, .mini-cart {
  background: var(--sc-surface) !important;
  color: var(--sc-text);
  border-left: 1px solid var(--sc-border) !important;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter, .newsletter-form {
  background: var(--sc-bg-dark) !important;
}
.newsletter h2, .newsletter h3, .newsletter .heading {
  color: var(--sc-text) !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
.newsletter input[type="email"] {
  background: var(--sc-input) !important;
  border: 1px solid var(--sc-border-strong) !important;
}
.newsletter button[type="submit"] {
  background: var(--sc-accent) !important;
  color: #fff !important;
}

/* ============================================================
   404 / ERROR
   ============================================================ */
body.\34\30\34, .page-404 {
  background: var(--sc-bg) !important;
  color: var(--sc-text);
}
body.\34\30\34 h1 {
  font-size: 96px !important;
  font-weight: 800 !important;
  color: var(--sc-accent) !important;
}

/* ============================================================
   MOBILE NAV / DRAWER
   ============================================================ */
.mobile-nav, .nav-drawer, .menu-drawer {
  background: var(--sc-bg-dark) !important;
  color: var(--sc-text);
  border-right: 1px solid var(--sc-border) !important;
}
.mobile-nav a, .menu-drawer a {
  color: var(--sc-text) !important;
  border-bottom: 1px solid var(--sc-border);
}

.mobile-navigation-bar, .mobile-bottom-bar {
  background: var(--sc-bg-dark) !important;
  color: var(--sc-text) !important;
  border-top: 1px solid var(--sc-border) !important;
}
.mobile-navigation-bar a {
  color: var(--sc-text-mid) !important;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .section-header h2, .section-heading {
    font-size: 28px !important;
  }
  .slideshow__heading, .hero__heading {
    font-size: 38px !important;
  }
  .product .product__title {
    font-size: 26px !important;
  }
  .cart h1, .cart__title {
    font-size: 30px !important;
  }
  .collection-hero h1, .collection__title {
    font-size: 30px !important;
  }
}

/* ============================================================
   SUPPORT BADGE (animated CTA) — for hero section
   ============================================================ */
@keyframes scPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes scFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.sc-support-badge {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--sc-cta);
  color: var(--sc-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: scPulse 4s ease-in-out infinite;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  font-family: var(--sc-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* ============================================================
   OVERRIDE: any remaining white/light backgrounds inside body
   ============================================================ */
.bg-white, .bg-light, .bg-gray-50, .bg-gray-100,
[class*="bg-light"], [class*="background-light"] {
  background: var(--sc-surface) !important;
}

/* Tables in admin/content */
table:not(.product-card table) {
  color: var(--sc-text);
  border-color: var(--sc-border);
}
table:not(.product-card table) th,
table:not(.product-card table) td {
  border-color: var(--sc-border);
}

/* ============================================================
   LIGHT SECTION VARIANT — #F9F9FB break-up
   Use class .sc-section--light on a wrapping element to invert
   ============================================================ */
.sc-section--light {
  background: #f9f9fb !important;
  color: #07141a !important;
}
.sc-section--light h1, .sc-section--light h2, .sc-section--light h3,
.sc-section--light h4, .sc-section--light h5 {
  color: #07141a !important;
}
.sc-section--light p, .sc-section--light .rte, .sc-section--light li {
  color: #07141a !important;
}
.sc-section--light .sc-eyebrow,
.sc-section--light [class*="__eyebrow"] {
  color: var(--sc-accent) !important;
}
.sc-section--light .sc-eyebrow::before,
.sc-section--light [class*="__eyebrow"] span:first-child {
  background: var(--sc-accent) !important;
}
.sc-section--light .card,
.sc-section--light [class*="card-product"],
.sc-section--light [class*="__card"] {
  background: #ffffff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}

/* ============================================================
   FIX: minimal product images / lazy-load placeholders
   Show a soft gray box instead of pure white when no image
   ============================================================ */
.product-card .product-image-wrapper:empty,
.product-card .image:empty,
.product-card a:has(img:not([src])),
.placeholder-image, .product-card svg.placeholder-svg {
  background: #eef2f5 !important;
  min-height: 200px;
}
.product-card img[src=""], .product-card img:not([src]) {
  background: #eef2f5;
}

/* ============================================================
   EXTRA: PDP layout polish
   ============================================================ */
body.product, .product, .product-single {
  background: var(--sc-bg) !important;
}
.product-information-tab, .product__tabs, .product-tabs,
.tab-content, .accordion {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  padding: 0 !important;
}
.product-information-tab .accordion__title,
.product-information-tab .tab__title {
  background: transparent !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--sc-border) !important;
}
.product-information-tab .accordion__content,
.product-information-tab .tab__content {
  color: var(--sc-text-mid) !important;
  padding: 22px !important;
  background: transparent !important;
}

/* PDP buy buttons row */
.product-form, .product-single__form {
  padding: 0 !important;
  background: transparent !important;
}
.product-form .product-form__buttons,
.product-form__cart-submit-wrap {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap;
}
.shopify-payment-button {
  flex: 1 1 100% !important;
  margin-top: 12px;
}
.shopify-payment-button__button {
  background: #0a1a22 !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-accent) !important;
  height: 52px !important;
}
.shopify-payment-button__button:hover {
  background: var(--sc-accent) !important;
}

/* Product breadcrumb diamond */
.product .breadcrumb__separator,
.breadcrumb__separator { color: var(--sc-accent-2) !important; }

/* Empty thumbnail dots in product gallery */
.product__gallery .thumbnail,
.product-gallery__thumbnail,
.product-single__thumbnail {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
}
.product__gallery .thumbnail.active,
.product__gallery .thumbnail.is-active {
  border-color: var(--sc-accent) !important;
}

/* "People also bought" / "Related products" — better dark surface */
.related-products, .product-recommendations,
.bought-together, .also-bought, [class*="related-product"] {
  background: var(--sc-bg) !important;
}
.related-products h2, .product-recommendations h2,
.bought-together h2 {
  color: var(--sc-text) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.related-products p, .product-recommendations p {
  color: var(--sc-text-mid) !important;
}

/* ============================================================
   FOOTER — explicit override + 4-col layout
   ============================================================ */
.footer__container, .site-footer .container,
.footer .page-width, .footer-content {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
  gap: 40px !important;
  padding: 70px 24px 40px !important;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content {
    grid-template-columns: 1fr !important;
  }
}
.footer__block, .footer-block, .site-footer__block {
  color: var(--sc-text-mid);
}
.footer__block-store_info, .footer__store-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__newsletter, .footer .newsletter {
  background: transparent !important;
}
.footer__bottom, .site-footer__bottom, .footer-bottom {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid var(--sc-border);
}
.footer .payment-icons, .footer .payments,
.footer__payments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer .payment-icons img, .footer .payments img,
.footer__payments img {
  height: 22px;
  filter: brightness(.85);
}

/* ============================================================
   HEADER nav menu items
   ============================================================ */
.header__menu a, .navigation a, .site-nav__link, nav.navigation a {
  padding: 14px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--sc-text) !important;
  text-transform: none !important;
}
.header__menu a:hover, .navigation a:hover {
  color: var(--sc-accent-2) !important;
}

/* Hide quick-shop hover overlays that conflict with dark theme */
.product-card .quick-shop-overlay,
.product-card .product-actions-overlay {
  background: #050f14 !important;
}

/* "People also bought" placeholder color when no related products */
.no-results, .empty-state, .placeholder-empty {
  color: var(--sc-text-mid) !important;
  text-align: center;
}

/* Buy-now (Shop Pay) button readable on dark */
.shopify-payment-button__more-options {
  color: var(--sc-text-mid) !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
}

/* Sticky add-to-cart bar (if Milano shows one) */
.sticky-add-to-cart, .sticky-atc {
  background: var(--sc-surface) !important;
  border-top: 1px solid var(--sc-accent-border) !important;
}


/* ============================================================
   LIGHT SECTION — explicit overrides for nested headings
   (beat global h2/h3 !important rule)
   ============================================================ */
.sc-section--light h1, .sc-section--light h2, .sc-section--light h3,
.sc-section--light h4, .sc-section--light h5, .sc-section--light h6,
section[class*="sc-cats"] h1, section[class*="sc-cats"] h2, section[class*="sc-cats"] h3,
.sc-cats h1, .sc-cats h2, .sc-cats h3,
.sc-cats-wrap h1, .sc-cats-wrap h2, .sc-cats-wrap h3,
.sc-trust h1, .sc-trust h2, .sc-trust h3,
.sc-uspsLight h1, .sc-uspsLight h2, .sc-uspsLight h3,
.sc-about-stats *, .sc-about-cards h1, .sc-about-cards h2, .sc-about-cards h3,
.sc-brandsp h1, .sc-brandsp h2, .sc-brandsp h3,
.sc-legal h1, .sc-legal h2 {
  color: inherit !important;
}
.sc-cats-wrap .sc-cats__name,
.sc-cats__name,
.sc-cats h2.sc-cats__name {
  color: #07141a !important;
}
.sc-cats-wrap .sc-cats h2,
.sc-cats h2 {
  color: #07141a !important;
}
.sc-uspsLight h1, .sc-uspsLight h2 {
  color: #07141a !important;
}
.sc-trust h1, .sc-trust h2 {
  color: #07141a !important;
}

/* ============================================================
   FOOTER newsletter: SIGN UP button text wrapping fix
   ============================================================ */
.footer__newsletter button, .footer .newsletter button,
.footer__newsletter input[type="submit"], .footer .newsletter input[type="submit"] {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 110px !important;
  padding: 0 18px !important;
  letter-spacing: .06em !important;
  font-size: 12px !important;
  background: var(--sc-accent) !important;
  color: #fff !important;
}
.footer__newsletter .field, .footer .newsletter .field,
.footer__newsletter form, .footer .newsletter form {
  display: flex !important;
  gap: 6px !important;
}
.footer__newsletter input[type="email"] {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Social icons in footer */
.footer__social, .site-footer__social, .footer .social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.footer__social a, .footer .social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sc-border-strong);
  border-radius: 50%;
  color: var(--sc-text-mid) !important;
  transition: all .2s;
}
.footer__social a:hover, .footer .social a:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent-2) !important;
}


/* ============================================================
   FOOTER — custom_liquid blocks (sc-foot)
   ============================================================ */
.sc-foot-col {
  color: var(--sc-text-mid);
  font-size: 14px;
  line-height: 1.7;
}
.sc-foot-col--brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sc-foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sc-font);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-transform: none;
  letter-spacing: -.01em;
}
.sc-foot-tagline {
  font-family: var(--sc-font);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff !important;
  margin: 0;
  letter-spacing: -.01em;
}
.sc-foot-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--sc-font);
  font-size: 13px;
  color: var(--sc-text-mid);
}
.sc-foot-contact > div { line-height: 1.55; }
.sc-foot-link {
  color: var(--sc-text-mid) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sc-foot-link:hover { color: var(--sc-accent-2) !important; }
.sc-foot-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 14px;
  opacity: .8;
}
.sc-foot-kvk {
  font-family: var(--sc-font);
  font-size: 11px;
  color: var(--sc-text-mute);
  line-height: 1.7;
  padding-top: 8px;
  border-top: 1px solid var(--sc-border);
}
.sc-foot-head {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  position: relative;
  padding-bottom: 10px;
}
.sc-foot-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--sc-accent);
}
.sc-foot-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sc-foot-list li {
  padding: 5px 0;
}
.sc-foot-list a {
  color: var(--sc-text-mid) !important;
  text-decoration: none;
  font-size: 14px;
  transition: color .15s;
}
.sc-foot-list a:hover {
  color: var(--sc-accent-2) !important;
  padding-left: 4px;
}
.sc-foot-text {
  font-size: 13px;
  color: var(--sc-text-mid);
  line-height: 1.6;
  margin: 0 0 14px;
}
.sc-foot-newsletter {
  display: flex;
  border: 1px solid var(--sc-border-strong);
  background: var(--sc-input);
}
.sc-foot-newsletter input[type="email"] {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 12px !important;
  color: #fff !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  min-width: 0;
}
.sc-foot-newsletter button {
  background: var(--sc-accent) !important;
  color: #fff !important;
  border: none !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  cursor: pointer;
  font-family: var(--sc-font) !important;
}
.sc-foot-newsletter button:hover {
  background: var(--sc-accent-2) !important;
}
.sc-foot-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.sc-foot-payments span {
  background: var(--sc-input);
  border: 1px solid var(--sc-border);
  font-family: var(--sc-font);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--sc-text-mid);
  padding: 5px 8px;
}
.sc-foot-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--sc-font);
  font-size: 11.5px;
  color: var(--sc-text-mid);
  padding: 10px 0;
  border-top: 1px solid var(--sc-border);
}
.sc-foot-dot {
  width: 8px;
  height: 8px;
  background: var(--sc-success);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(52,209,126,.2);
  animation: scPulse 2s ease-in-out infinite;
}

/* Footer column widths grid override */
.footer__container, .site-footer .container,
.footer .page-width, .footer-content {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
}
@media (max-width: 1080px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 600px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   HEADER nav additions — hardcoded nav under main menu
   ============================================================ */
.sc-subnav {
  background: var(--sc-bg-dark) !important;
  border-bottom: 1px solid var(--sc-border);
}
.sc-subnav__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-subnav__item {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text-mid) !important;
  text-decoration: none;
  text-transform: none;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-subnav__item:hover {
  color: #fff !important;
  border-bottom-color: var(--sc-accent);
}
.sc-subnav__item--active {
  color: #fff !important;
  border-bottom-color: var(--sc-accent);
}
.sc-subnav__phone {
  margin-left: auto;
  font-family: var(--sc-font);
  font-size: 12px;
  color: var(--sc-text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
}
.sc-subnav__phone::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--sc-success);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(52,209,126,.25);
}
.sc-subnav__phone a {
  color: #fff !important;
  text-decoration: none;
}
@media (max-width: 768px) {
  .sc-subnav__phone { display: none; }
  .sc-subnav__wrap { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .sc-subnav__item { white-space: nowrap; }
}


/* ============================================================
   PRODUCT CARDS — FORCE title + price visibility
   Milano-specific selectors
   ============================================================ */
.product-card .card-product-info,
.card-product__info,
.product-card-info,
.card-product .card__content,
.grid__item .card__content,
.product-card > .card__content,
.card-product__details {
  background: #fff !important;
  color: #07141a !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.product-card .card-product-info *,
.card-product__info *,
.product-card-info *,
.card-product .card__content *,
.product-card > .card__content * {
  color: #07141a !important;
}
.product-card .card-product-title,
.card-product .card-product-title,
.product-card .card__title,
.card-product__title,
.product-card a.card-product-title,
.card-product-info .product-name,
.card-product-info h3, .card-product-info h2 {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.product-card .card-product-price *,
.product-card-info .price *,
.card-product__price *,
.product-card .price * {
  color: #07141a !important;
}
.product-card .card-product-price .price,
.product-card-info .price-item,
.product-card .price__regular .price-item--regular,
.card-product__price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #07141a !important;
  font-family: var(--sc-font) !important;
}
.product-card .card-product-vendor,
.card-product__vendor,
.product-card-info .vendor {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: var(--sc-accent) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Force product card content area to be visible */
.product-card .card-product-info,
.product-card-info,
.card-product .card-product-info {
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 80px !important;
}

/* Hover overlay hide: prevent quick-shop from masking title */
.product-card .quick-shop,
.product-card .product-actions,
.card-product__quickview {
  background: transparent !important;
}

/* ============================================================
   FOOTER — force 4 equal columns
   ============================================================ */
.footer__container, .site-footer .container,
.footer .page-width, .footer-content,
.footer .footer__main-container,
.footer .footer__row,
[class*="footer"] [class*="row"]:has(.footer__block) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content,
  .footer .footer__main-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .footer__container, .site-footer .container,
  .footer .page-width, .footer-content,
  .footer .footer__main-container {
    grid-template-columns: 1fr !important;
  }
}
.footer__block, .footer-block, .site-footer__block,
.footer .col, .footer__col {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}


/* ============================================================
   MILANO PRODUCT-ITEM — actual class names
   ============================================================ */
.product-item, .product-item__wrapper, .product-item__inner {
  background: #fff !important;
  border-radius: 0 !important;
  overflow: hidden;
  color: #07141a !important;
}
.product-item__inner {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  transition: transform .2s, box-shadow .2s;
}
.product-item__inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.product-item__media {
  background: #fff !important;
  display: block !important;
}
.product-item__information {
  background: #fff !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  color: #07141a !important;
}
.product-item__information * {
  color: inherit;
}
.product-item__vendor {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: var(--sc-accent) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.product-item__name {
  font-family: var(--sc-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #07141a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  display: block !important;
  margin: 4px 0 0 0 !important;
  text-decoration: none !important;
}
.product-item__name:hover {
  color: var(--sc-accent) !important;
}
.product-item__price {
  font-family: var(--sc-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #07141a !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
.product-item__price *, .product-item__price .price-item,
.product-item__price .money {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
}
.product-item__price .compare-at,
.product-item__price s, .product-item__price del {
  color: var(--sc-text-mute) !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}
.product-item__price .price--on-sale,
.product-item__price .price-item--sale {
  color: #e23131 !important;
}

.card-product-price {
  color: #07141a !important;
}
.card-product-price * { color: #07141a !important; }
.card-product-price s, .card-product-price del { color: #9aacbb !important; }

/* Star rating area */
.product-item__rating, .product-item .spr-badge,
.product-item .star-rating {
  font-size: 12px !important;
}
.product-item__rating .spr-icon-star,
.product-item .star {
  color: var(--sc-cta) !important;
}

/* Add-to-cart icon area */
.product-item__action {
  background: rgba(255,255,255,.95) !important;
  padding: 8px !important;
  border-radius: 0 !important;
}
.product-item__action button, .product-item__action a {
  background: var(--sc-bg) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 16px !important;
}
.product-item__action button:hover, .product-item__action a:hover {
  background: var(--sc-accent) !important;
}

/* Badge on product image */
.product-item .product-item__label,
.product-item .product-label,
.product-item .badge,
.product-item__inner .label-product {
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  padding: 5px 9px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* Variant quantity / inventory */
.productItemVariantsQty,
.product-variant__quantity {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  color: var(--sc-text-mute) !important;
}


/* ============================================================
   FOOTER — Milano-specific overrides (.footer__blocks)
   ============================================================ */
.footer__blocks {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 60px !important;
  align-items: start !important;
  flex-direction: row !important;
}
.footer__blocks .footer-block {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
@media (max-width: 900px) {
  .footer__blocks {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .footer__blocks {
    grid-template-columns: 1fr !important;
  }
}

.footer__block-heading {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  color: var(--sc-accent-2) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  padding: 0 0 12px 0 !important;
  position: relative;
}
.footer__block-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--sc-accent);
}

/* link_list menu items in footer */
.footer-block.link_list ul,
.footer-block .menu, .footer-block ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-block.link_list li,
.footer-block ul li {
  padding: 5px 0 !important;
}
.footer-block.link_list a,
.footer-block .menu a,
.footer-block ul a {
  color: var(--sc-text-mid) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  font-family: var(--sc-font) !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.footer-block.link_list a:hover,
.footer-block ul a:hover {
  color: var(--sc-accent-2) !important;
  padding-left: 4px;
}

/* store_info block */
.footer-block.store_info,
.footer__store-info {
  color: var(--sc-text-mid);
}
.footer__block-description {
  color: var(--sc-text-mid) !important;
  font-size: 13.5px;
  line-height: 1.6;
}
.footer__block-info {
  color: var(--sc-text-mid) !important;
  font-family: var(--sc-font);
  font-size: 13px;
}
.footer__block-info svg {
  color: var(--sc-accent) !important;
  opacity: .8;
  flex-shrink: 0;
}
.footer__block-info a {
  color: var(--sc-text-mid) !important;
}
.footer__block-info a:hover {
  color: var(--sc-accent-2) !important;
}

/* newsletter block */
.footer-block.newsletter,
.footer__newsletter {
  background: transparent !important;
}
.footer__newsletter input[type="email"] {
  background: var(--sc-input) !important;
  border: 1px solid var(--sc-border-strong) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-family: var(--sc-font);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.footer__newsletter button,
.footer__newsletter input[type="submit"] {
  background: var(--sc-accent) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--sc-font) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  padding: 0 18px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  min-width: 100px;
}
.footer__newsletter form,
.footer__newsletter .field {
  display: flex !important;
  gap: 0 !important;
}

/* bottom row */
.footer__bottom, .footer_bottom-inner {
  border-top: 1px solid var(--sc-border) !important;
  padding: 24px 0 !important;
}
.footer__copyright {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: var(--sc-text-mute) !important;
}
.footer__payment {
  filter: grayscale(20%) brightness(.95);
}

/* ============================================================
   PRODUCT SECTIONS — light background (matches white cards)
   Target Milano's products-carousel section wrapper
   ============================================================ */
.sec__products-carousel {
  background: #f9f9fb !important;
  color: #07141a !important;
  padding: 70px 0 !important;
}
.sec__products-carousel * {
  color: inherit;
}
.sec__products-carousel .section-header,
.sec__products-carousel h2,
.sec__products-carousel h3,
.sec__products-carousel .section-heading,
.sec__products-carousel .section-header__heading,
.sec__products-carousel [class*="heading"] {
  color: #07141a !important;
}
.sec__products-carousel .section-header__description,
.sec__products-carousel .section-header__subheading,
.sec__products-carousel p {
  color: #07141a !important;
}
.sec__products-carousel .section-header__link,
.sec__products-carousel .view-all,
.sec__products-carousel a[class*="view-all"] {
  color: var(--sc-accent) !important;
  font-weight: 600;
}
/* Swiper dots on light bg */
.sec__products-carousel .swiper-pagination-bullet {
  background: #c1c8d2 !important;
}
.sec__products-carousel .swiper-pagination-bullet-active {
  background: var(--sc-accent) !important;
}
/* Border around cards more subtle on light */
.sec__products-carousel .product-item__inner {
  border-color: #e6e9ee !important;
  background: #fff !important;
}


/* ============================================================
   BOXED LAYOUT — 1200px max-width for header / body / footer
   ============================================================ */
.sc-usptop__wrap,
.sc-hero__wrap,
.sc-brandstrip__wrap,
.sc-cats,
.sc-uspsLight__wrap,
.sc-dist__inner,
.sc-trust__wrap,
.sc-about-hero__wrap,
.sc-about-stats,
.sc-about-cards,
.sc-brandsp,
.sc-legal,
.sc-shipping {
  max-width: 1200px !important;
}
/* Milano containers — do NOT constrain .sec__inner / .full_width / .stretch_width here */
.container,
.page-width,
.shopify-section .container,
.section > .container,
header.header > div,
.header > .container,
.footer__container,
.footer__blocks,
.footer__main-container,
.footer_bottom-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
/* Collection/Product/Cart inner containers stay 1280px boxed */
body.collection main > .container,
body.product main > .container,
body.cart main > .container,
body.search main > .container,
body.page main > .container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
/* Inner sections that wrap content */
.section-header,
.section__container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Make sure padding is consistent */
@media (min-width: 1200px) {
  .page-width, .container, .footer__blocks {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================
   DISABLE HOVER + SHADOW on cards (user request)
   ============================================================ */
.product-card:hover, .card-product:hover, .product-item:hover,
.product-item__inner:hover,
.sc-cats__card:hover,
.collection-list__item:hover, .collection-card:hover,
.sc-brandsp__card:hover,
.sc-about-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #e6e9ee !important;
}
.product-card, .card-product, .product-item,
.product-item__inner, .sc-cats__card,
.collection-list__item, .collection-card,
.sc-brandsp__card, .sc-about-card {
  transition: none !important;
  box-shadow: none !important;
}
.sc-cats__card:hover .sc-cats__cta,
.sc-cats__card:hover {
  color: inherit !important;
  border-color: #e6e9ee !important;
}

/* ============================================================
   FOOTER brand block (logo + contact)
   ============================================================ */
.sc-foot-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--sc-text-mid);
}
.sc-foot-brand__logo {
  width: 160px;
  height: auto;
  display: block;
  margin-bottom: 6px;
  filter: brightness(1.1);
}
.sc-foot-brand__tag {
  font-family: var(--sc-font);
  font-size: 14px;
  color: var(--sc-text-mid) !important;
  margin: 0 0 6px;
  line-height: 1.5;
}
.sc-foot-brand__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sc-font);
  font-size: 13px;
  color: var(--sc-text-mid);
  line-height: 1.55;
}
.sc-foot-brand__row svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sc-accent);
}
.sc-foot-brand__row a {
  color: var(--sc-text-mid) !important;
  text-decoration: none !important;
}
.sc-foot-brand__row a:hover { color: var(--sc-accent-2) !important; }
.sc-foot-brand__kvk {
  font-family: var(--sc-font);
  font-size: 11px;
  color: var(--sc-text-mute);
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sc-border);
  letter-spacing: .04em;
}


/* ============================================================
   FULL-WIDTH BACKGROUNDS for sections (light + dark)
   Background spans full viewport, inner content stays 1200px
   ============================================================ */
/* Light section wrappers — full width */
.sc-cats-wrap,
.sc-uspsLight,
.sc-trust,
.sec__products-carousel,
.sc-brandstrip,
.sc-dist {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dark section wrappers for hero/footer/USP — full width */
.sc-hero,
.sc-usptop,
.shopify-section,
.shopify-section .full_width,
.shopify-section .fluid_container,
.shopify-section .stretch_width,
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
.shopify-section-group-footer-group > section,
section.shopify-section,
.header__wrapper,
.site-footer,
footer.shopify-section,
body.product .product__container-bg,
body.collection .collection-header-bg {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The INNER content stays constrained to 1200px */
.sc-cats,
.sc-uspsLight__wrap,
.sc-trust__wrap,
.sc-hero__wrap,
.sc-usptop__wrap,
.sc-brandstrip__wrap,
.sc-about-hero__wrap,
.sc-about-stats,
.sc-about-cards,
.sc-brandsp,
.sc-legal,
.sc-shipping {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* products-carousel inner: keep its own container at 1200px */
.sec__products-carousel > .container,
.sec__products-carousel > .stretch_width,
.sec__products-carousel .section-header,
.sec__products-carousel .sec__inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* distributor callout — let bg go full width but inner stays */
.sc-dist {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}
/* distributor inner card */
.sc-dist__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Header content and footer content — 1200px centered */
.header > .container,
header.header > div,
.footer__container,
.footer__blocks,
.footer__main-container,
.footer_bottom-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Page-width inside body content */
/* Page-width inside body — let sections render their full bgs */
main .page-width {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Override: announcement bar full width with content 1200px */
.announcement-bar, .top-bar, .announcement,
.sc-usptop, header.shopify-section, .header {
  max-width: none !important;
  width: 100% !important;
}


/* ============================================================
   REMOVE separator lines (user request)
   ============================================================ */
/* Line above main menu (between USP top bar and header) */
.sc-usptop {
  border-bottom: none !important;
}
.header, .site-header, header.shopify-section, .header__wrapper {
  border-top: none !important;
}
.navigation, .site-nav, .header__menu, nav.navigation {
  border-top: none !important;
}

/* Line above copyright in footer */
.footer__bottom, .footer_bottom-inner,
.footer .border-top, footer .border-top {
  border-top: none !important;
}


/* ============================================================
   USP topbar compact (no wrap on 1200px)
   ============================================================ */
.sc-usptop__wrap {
  flex-wrap: nowrap !important;
  overflow-x: auto;
}
.sc-usptop__items {
  flex-wrap: nowrap !important;
  gap: 22px !important;
}
.sc-usptop__item,
.sc-usptop__phone,
.sc-usptop__phone a {
  white-space: nowrap !important;
  font-size: 12px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: var(--sc-font) !important;
}

/* ============================================================
   Hide any horizontal separator line above copyright
   ============================================================ */
.footer__bottom,
.footer_bottom-inner,
.footer-bottom,
.site-footer__bottom,
.footer .border-top,
footer .border-top,
.footer__copyright,
.footer hr,
.footer .separator,
.footer-separator {
  border-top: none !important;
  border: none !important;
}
.footer__bottom::before,
.footer_bottom-inner::before {
  display: none !important;
}
/* Milano sometimes uses a ::after on parent block to draw line */
.footer__middle::after,
.footer__main::after {
  display: none !important;
}


/* ============================================================
   COLLECTION + PRODUCT PAGE — boxed 1200px
   ============================================================ */
body.collection .main-content,
body.collection main,
body.product .main-content,
body.product main,
body.search .main-content,
body.list-collections .main-content,
body.blog .main-content,
body.article .main-content,
body.page .main-content,
body.cart .main-content {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body.collection .container,
body.product .container,
body.cart .container,
body.search .container,
body.page .container,
body.blog .container,
body.article .container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Collection breadcrumb/heading */
body.collection .collection-hero,
body.collection .collection-header,
body.collection .main-collection-heading {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ============================================================
   CAROUSEL DOTS (Milano swiper, used elsewhere)
   ============================================================ */
.swiper-pagination-bullet,
.slick-dots li button {
  background: #c1c8d2 !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
}
.swiper-pagination-bullet-active,
.slick-dots li.slick-active button {
  background: var(--sc-accent) !important;
  width: 22px !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Section padding handled by individual sections (.sc-section etc.), not globally */
.shopify-section-group-header-group .section,
.shopify-section-group-footer-group .section,
.shopify-section .sec__custom-liquid {
  padding: 0 !important;
}


/* ============================================================
   .sc-light heading override (beat global h2 white)
   ============================================================ */
.shopify-section .sc-light h1,
.shopify-section .sc-light h2,
.shopify-section .sc-light h3,
.shopify-section .sc-light h4,
.shopify-section .sc-light .sc-cats__name,
.shopify-section .sc-light .sc-pcard__title {
  color: #07141a !important;
  text-transform: uppercase;
}
.shopify-section .sc-light p,
.shopify-section .sc-light .sc-sub,
.shopify-section .sc-light .sc-cats__desc,
.shopify-section .sc-light .sc-uspsLight__text {
  color: #07141a !important;
}
.shopify-section .sc-light .sc-eyebrow-uni,
.shopify-section .sc-light .sc-pcard__vendor {
  color: #309dc6 !important;
}
.shopify-section .sc-light .sc-pcard__price {
  color: #07141a !important;
}
.shopify-section .sc-light .sc-pcard__title {
  text-transform: none !important;
}
.shopify-section .sc-light .sc-cats__cta {
  color: #07141a !important;
}


/* ============================================================
   FORCE light/dark band wrappers to span full viewport width
   even when parent container is constrained to 1200px
   ============================================================ */
.sc-light,
.sc-distwrap,
.sc-brandstrip,
.sc-hero,
.sc-usptop,
.sc-trust,
.sc-about-hero,
.sc-uspsLight {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* But inner content inside these stays max 1280px centered */
.sc-light .sc-section,
.sc-distwrap .sc-dist__inner,
.sc-brandstrip .sc-brandstrip__wrap,
.sc-hero .sc-hero__wrap,
.sc-usptop .sc-usptop__wrap,
.sc-trust .sc-trust__wrap,
.sc-about-hero .sc-about-hero__wrap {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}

/* Tight USP band inside light section: spans full and the inner wrap is centered */
.sc-light .sc-section--tight {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sc-light .sc-section--tight .sc-uspsLight__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px;
}

/* Also remove the !important max-width from .sec__inner so light bg doesn't get clipped */
.sec__inner:has(.sc-light),
.sec__inner:has(.sc-hero),
.sec__inner:has(.sc-distwrap),
.sec__inner:has(.sc-brandstrip),
.sec__inner:has(.sc-usptop) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* In case :has() not supported - target the parent section direct */
.shopify-section:has(.sc-light) .container,
.shopify-section:has(.sc-light) .full_width,
.shopify-section:has(.sc-light) .sec__inner,
.shopify-section:has(.sc-distwrap) .container,
.shopify-section:has(.sc-distwrap) .full_width,
.shopify-section:has(.sc-distwrap) .sec__inner,
.shopify-section:has(.sc-brandstrip) .sec__inner,
.shopify-section:has(.sc-hero) .sec__inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================================
   Z-INDEX hierarchy
   ============================================================ */
.shopify-section-group-header-group,
.header, .site-header, header.shopify-section,
.shopify-section-header-group {
  position: sticky;
  top: 0;
  z-index: 100;
}
.sc-hero { z-index: 1; position: relative; }
.sc-hero__badge { z-index: 6 !important; }
.sc-hero__bg { z-index: 0 !important; }
.sc-hero__inner { z-index: 2 !important; position: relative; }

.modal, .popup, .quickview, .dialog, .product-quickview {
  z-index: 200 !important;
}
.menu-drawer, .nav-drawer, .mobile-nav,
.predictive-search__results, .minicart, .cart-drawer {
  z-index: 150 !important;
}
.sticky-add-to-cart {
  z-index: 90 !important;
}

/* ============================================================
   PADDING — ensure healthy breathing room everywhere
   ============================================================ */
/* Spacing between dark/light section transitions */
.sc-distwrap {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  .sc-distwrap {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* Hero comfortable top spacing */
.sc-hero__wrap {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  .sc-hero__wrap {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* Brand strip - subtle padding so it doesn't feel cramped */
.sc-brandstrip {
  padding: 36px 0 !important;
}

/* Trust bar */
.sc-trust {
  padding: 72px 24px !important;
}
@media (max-width: 768px) {
  .sc-trust {
    padding: 48px 20px !important;
  }
}

/* Light band sections - keep generous padding */
.sc-light .sc-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.sc-light .sc-section + .sc-section {
  padding-top: 0 !important;
}
.sc-light .sc-section--last {
  padding-bottom: 96px !important;
}
.sc-light .sc-section--tight {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 768px) {
  .sc-light .sc-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .sc-light .sc-section--last {
    padding-bottom: 60px !important;
  }
}

/* Footer breathing */
.footer__middle, .site-footer__middle {
  padding-top: 70px !important;
  padding-bottom: 50px !important;
}


/* ============================================================
   HEADER/TOPBAR padding + clean alignment
   ============================================================ */
/* USP topbar +5px */
.sc-usptop__wrap {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Header more breathing room */
.header__row, .header__inner, .site-header__inner,
.shopify-section-group-header-group .header > .container,
.header > div,
.header__wrapper > .container {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* Cart icon: remove darker box on right that doesn't connect to hero */
.header__cart, .header__action-cart, .cart-link,
.header__action--cart, .header [class*="cart-link"],
.header__icon-cart, .cart-icon-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.header__action-list, .header__actions, .site-header__actions {
  background: transparent !important;
  border: none !important;
}

/* Remove any darker shading around the right icons */
.header .icon-account, .header .icon-search, .header .icon-cart,
.header__icon-wrapper, .header__action-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
}

/* ============================================================
   FOOTER more top margin
   ============================================================ */
.site-footer, .footer, footer.shopify-section {
  padding-top: 96px !important;
}
.footer__middle, .site-footer__middle, .footer-content {
  padding-top: 0 !important;
}
@media (max-width: 768px) {
  .site-footer, .footer, footer.shopify-section {
    padding-top: 64px !important;
  }
}


/* ============================================================
   CART ICON — remove darker box wrapper (Milano #header__minicart)
   ============================================================ */
#header__minicart,
.header__minicart,
.minicart__action,
#cart-icon-bubble,
cart-notification,
.minicart,
.cart-icon-bubble {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#cart-icon-bubble:focus,
#cart-icon-bubble:hover {
  background: transparent !important;
  outline: none !important;
}
.minicart__wrapper {
  background: #ffffff !important;
}


/* ============================================================
   COLLECTION (PLP) — refined polish
   ============================================================ */
body.collection {
  background: #f9f9fb !important;
}
body.collection .main-content,
body.collection main {
  background: #f9f9fb !important;
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}
body.collection h1,
body.collection .main-collection-heading h1,
body.collection .collection-hero h1,
body.collection .collection-header h1 {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  margin: 0 0 8px !important;
}
body.collection .breadcrumb,
body.collection .breadcrumbs {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: #07141a !important;
  letter-spacing: .04em !important;
  margin-bottom: 20px !important;
}
body.collection .breadcrumb a, body.collection .breadcrumbs a {
  color: #07141a !important;
  text-decoration: none;
}
body.collection .breadcrumb a:hover { color: var(--sc-accent) !important; }

/* PLP sidebar (filters) */
body.collection .collection-sidebar,
body.collection .facets,
body.collection aside,
body.collection .filter-wrapper {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  padding: 26px !important;
  border-radius: 0 !important;
  color: #07141a !important;
}
body.collection .facets *,
body.collection .collection-sidebar * {
  color: #07141a !important;
}
body.collection .facets__heading,
body.collection .filter-group__heading,
body.collection .collection-sidebar h4 {
  color: var(--sc-accent) !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* Collection toolbar */
body.collection .collection-toolbar,
body.collection .toolbar {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.collection .collection-toolbar * { color: #07141a !important; }

/* PLP product cards: same dark titles on white */
body.collection .product-item__inner {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
}
body.collection .product-item__information,
body.collection .product-item__information * {
  color: #07141a !important;
}
body.collection .product-item__vendor {
  color: var(--sc-accent) !important;
}

/* Pagination */
body.collection .pagination a,
body.collection .pagination span {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.collection .pagination .current,
body.collection .pagination .active {
  background: var(--sc-accent) !important;
  color: #fff !important;
}

/* ============================================================
   PRODUCT PAGE (PDP) — refined polish
   ============================================================ */
body.product {
  background: #ffffff !important;
}
body.product .main-content,
body.product main,
body.product .product__container {
  background: #ffffff !important;
}
body.product .breadcrumb,
body.product .breadcrumbs {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  color: #07141a !important;
  letter-spacing: .04em !important;
  padding: 30px 0 !important;
}
body.product .breadcrumb a { color: #07141a !important; }
body.product .breadcrumb a:hover { color: var(--sc-accent) !important; }

/* PDP wrapper container */
body.product .product,
body.product .product__container,
body.product .product-single,
body.product article.product {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  padding: 40px !important;
  margin: 20px auto 60px !important;
  max-width: 1280px !important;
}
body.product .product *,
body.product .product-single * {
  color: #07141a;
}
body.product .product .product__title,
body.product .product__title,
body.product .product-single__title,
body.product .product__title-text {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
  margin: 14px 0 18px !important;
}
body.product .product .product__vendor,
body.product .product__vendor,
body.product .product-single__vendor {
  color: var(--sc-accent) !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
body.product .product .price,
body.product .product__price,
body.product .product-single__price,
body.product .price__regular .price-item {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}
body.product .product__description,
body.product .product-single__description,
body.product .product__description-wrap {
  color: #07141a !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
body.product .product__description * { color: inherit !important; }

/* PDP quantity */
body.product .quantity, body.product .product-form__quantity {
  border: 1px solid #cdd9e3 !important;
  background: #fff !important;
}
body.product .quantity button,
body.product .product-form__quantity button {
  color: #07141a !important;
  background: transparent !important;
}
body.product .quantity input {
  color: #07141a !important;
  background: transparent !important;
}

/* PDP add-to-cart */
body.product .product-form__submit,
body.product .product-form button[type="submit"] {
  background: var(--sc-cta) !important;
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  height: 56px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.product .shopify-payment-button__button {
  background: #07141a !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--sc-font) !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
}
body.product .shopify-payment-button__button:hover {
  background: var(--sc-accent) !important;
}

/* PDP gallery */
body.product .product__gallery,
body.product .product__media-wrapper {
  background: transparent !important;
}
body.product .product__media-item,
body.product .product__gallery .swiper-slide {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  padding: 20px;
}
body.product .product__media img {
  background: #fff;
  object-fit: contain;
}
body.product .product__media-thumbs,
body.product .product__thumbs {
  margin-top: 12px;
}
body.product .product__thumbs .thumbnail {
  border: 1px solid #e6e9ee !important;
  background: #fff !important;
}
body.product .product__thumbs .thumbnail.active,
body.product .product__thumbs .thumbnail.is-active {
  border-color: var(--sc-accent) !important;
}

/* PDP tabs / accordion (description / specs) */
body.product .product-information-tab,
body.product .product__tabs,
body.product .accordion {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
  margin-top: 30px !important;
}
body.product .product-information-tab *,
body.product .product__tabs * {
  color: inherit !important;
}
body.product .tab-title,
body.product .product-information-tab__tab,
body.product .accordion__title {
  color: #07141a !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-color: #e6e9ee !important;
}
body.product .tab-title.active,
body.product .product-information-tab__tab.active {
  color: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}

/* PDP "Op voorraad" / availability */
body.product .inventory--high,
body.product .product__availability--in-stock,
body.product .product-stock-availability {
  color: var(--sc-success) !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* PDP related products section */
body.product .related-products,
body.product .product-recommendations,
body.product .bought-together {
  background: #ffffff !important;
  padding: 60px 0 !important;
  margin-top: 40px;
}
body.product .related-products h2,
body.product .product-recommendations h2 {
  color: #07141a !important;
  text-transform: uppercase !important;
  font-size: 30px !important;
}


/* ============================================================
   COLLECTION + PRODUCT page light bg — force above .gradient
   ============================================================ */
body.collection,
body.collection.gradient,
html body.collection,
body.search,
body.search.gradient,
body.list-collections,
body.list-collections.gradient,
body.cart,
body.cart.gradient,
body.page,
body.page.gradient,
body.article,
body.article.gradient,
body.blog,
body.blog.gradient {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body.product,
body.product.gradient,
html body.product {
  background: #ffffff !important;
  color: #07141a !important;
}

/* Main containers inside these light-bg pages */
body.collection .main-content,
body.collection main,
body.collection #MainContent,
body.search .main-content,
body.cart .main-content,
body.cart main,
body.page main,
body.list-collections main,
body.article main,
body.blog main {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body.product .main-content,
body.product main,
body.product #MainContent {
  background: #ffffff !important;
  color: #07141a !important;
}

/* Sections inside collection/product/etc should also be light */
body.collection .shopify-section:not([class*="header"]):not([class*="footer"]),
body.cart .shopify-section:not([class*="header"]):not([class*="footer"]),
body.page .shopify-section:not([class*="header"]):not([class*="footer"]),
body.search .shopify-section:not([class*="header"]):not([class*="footer"]),
body.list-collections .shopify-section:not([class*="header"]):not([class*="footer"]) {
  background: #f9f9fb !important;
}
body.product .shopify-section:not([class*="header"]):not([class*="footer"]) {
  background: #ffffff !important;
}

/* Headings on light pages: dark text */
body.collection h1, body.collection h2, body.collection h3, body.collection h4,
body.product h1, body.product h2, body.product h3, body.product h4,
body.cart h1, body.cart h2,
body.page h1, body.page h2, body.page h3, body.page h4,
body.search h1, body.search h2, body.search h3 {
  color: #07141a !important;
}

body.collection p, body.collection li, body.collection .rte,
body.product p, body.product li,
body.cart p,
body.page p, body.page li,
body.search p {
  color: #07141a !important;
}

/* Sidebar/facets/toolbar on light bg */
body.collection .collection-sidebar,
body.collection .facets,
body.collection aside,
body.collection .filter-wrapper,
body.collection .collection-toolbar,
body.collection .toolbar {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.collection .collection-sidebar *,
body.collection .facets *,
body.collection aside *,
body.collection .collection-toolbar *,
body.collection .toolbar * {
  color: #07141a !important;
}
body.collection .facets__heading,
body.collection .filter-group__heading,
body.collection .collection-sidebar h4 {
  color: var(--sc-accent) !important;
}

/* Page templates background — the .sec__custom-liquid renders inside */
body.page .sec__custom-liquid,
body.page .sc-legal,
body.page .sc-shipping,
body.page .sc-about-hero,
body.page .sc-about-cards,
body.page .sc-brandsp {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body.page .sc-legal h1, body.page .sc-legal h2,
body.page .sc-about-hero h1, body.page .sc-about-hero p,
body.page .sc-about-cards h3, body.page .sc-about-cards p,
body.page .sc-shipping h1, body.page .sc-shipping h2,
body.page .sc-brandsp h1, body.page .sc-brandsp__lead {
  color: #07141a !important;
}
body.page .sc-legal p, body.page .sc-legal li {
  color: #07141a !important;
}
body.page .sc-about-card, body.page .sc-shipping__card {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.page .sc-about-card h3, body.page .sc-about-card p,
body.page .sc-shipping__card h2, body.page .sc-shipping__card li {
  color: #07141a !important;
}
body.page .sc-brandsp__card {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
}
body.page .sc-brandsp__card .sc-brandsp__name {
  color: #07141a !important;
}
body.page .sc-brandsp__card .sc-brandsp__desc {
  color: #07141a !important;
}


/* Override Milano's main element bg on light-bg pages */
body.collection main, body.collection main.content-for-layout,
body.cart main, body.cart main.content-for-layout,
body.page main, body.page main.content-for-layout,
body.search main, body.search main.content-for-layout,
body.list-collections main, body.list-collections main.content-for-layout,
body.article main, body.article main.content-for-layout,
body.blog main, body.blog main.content-for-layout {
  background: #f9f9fb !important;
}
body.product main, body.product main.content-for-layout {
  background: #ffffff !important;
}
/* And the shopify-section gradient class inside main */
body.collection main .gradient,
body.product main .gradient,
body.cart main .gradient,
body.page main .gradient,
body.search main .gradient,
body.list-collections main .gradient {
  background: transparent !important;
}

/* ============================================================
   TEXT CONTRAST — wit op donker, zwart op licht
   ============================================================ */

/* DONKERE achtergrond — alle tekst WIT */
.sc-hero p,
.sc-hero .sc-hero__eyebrow,
.sc-usptop__item,
.sc-usptop__phone,
.sc-usptop__phone a,
.sc-brandstrip__lead,
.sc-brandstrip__name,
.sc-dist p,
.sc-dist__eyebrow,
.sc-dist__stat-lbl,
.sc-ditis p,
.sc-ditis__eyebrow,
.sc-ditis__card p,
.sc-actueel p,
.sc-actueel__eyebrow,
.sc-actueel__card p,
.sc-actueel__card-tag,
.sc-foot-brand__tag,
.sc-foot-brand__row,
.sc-foot-brand__row a,
.sc-foot-brand__kvk,
.sc-foot-list a,
.sc-foot-head,
.sc-foot-text,
.footer p, .footer li, .footer a, .footer span:not(.sc-foot-dot),
.footer-block, .footer__block-info, .footer__block-description,
.footer__copyright,
body:not(.collection):not(.product):not(.cart):not(.page):not(.search):not(.list-collections):not(.article):not(.blog) p,
body:not(.collection):not(.product):not(.cart):not(.page):not(.search):not(.list-collections):not(.article):not(.blog) li {
  color: #ffffff !important;
}

/* But muted micro-labels stay slightly dimmer for hierarchy */
.sc-brandstrip__lead,
.sc-foot-brand__kvk,
.sc-foot-list a,
.sc-foot-brand__row,
.footer__copyright {
  color: #ffffff !important;
}

/* Cyan eyebrows stay cyan (brand) */
.sc-hero .sc-hero__eyebrow,
.sc-dist__eyebrow,
.sc-ditis__eyebrow,
.sc-actueel__eyebrow,
.sc-eyebrow, .sc-eyebrow-uni {
  color: #309dc6 !important;
}

/* LICHTE achtergrond — alle tekst ZWART */
.sc-light p,
.sc-light .sc-sub,
.sc-light .sc-cats__desc,
.sc-light .sc-uspsLight__text,
body.collection p, body.collection li, body.collection span:not(.sc-foot-dot):not(.sc-foot-brand__row):not([class*="eyebrow"]),
body.product p, body.product li,
body.cart p, body.cart li,
body.page p, body.page li,
body.search p, body.search li,
body.list-collections p, body.list-collections li,
.sc-trust p,
.sc-about-card p, .sc-about-hero p,
.sc-brandsp__lead, .sc-brandsp__desc,
.sc-legal p, .sc-legal li,
.sc-shipping p, .sc-shipping li,
.product-card .sc-pcard__title,
.sc-pcard__price,
.product-item__name, .product-item__price {
  color: #07141a !important;
}

/* Cyan eyebrows on light sections also stay cyan */
.sc-light .sc-eyebrow-uni,
.sc-trust__eyebrow,
.sc-about-hero__eyebrow span:last-child,
.sc-about-card h3,
.sc-brandsp__eyebrow span:last-child,
.sc-legal__eyebrow span:last-child,
.sc-shipping__eyebrow span:last-child {
  color: #309dc6 !important;
}
/* Card titles stay dark on light pages */
.sc-about-card h3, .sc-brandsp__name, .sc-shipping__card h2,
.sc-legal h2, .sc-cats__name, .sc-pcard__title {
  color: #07141a !important;
}

/* But the cyan eyebrows on light sections that use the colon-pattern */
.sc-trust__eyebrow {
  color: #309dc6 !important;
}


/* ============================================================
   Remove gap between header and hero (and between sections)
   Milano section wrappers have pt-min/pb-min adding spacing
   ============================================================ */
.shopify-section .pt-min { padding-top: 0 !important; }
.shopify-section .pb-min { padding-bottom: 0 !important; }
.shopify-section .section.pt-min { padding-top: 0 !important; }
.shopify-section .section.pb-min { padding-bottom: 0 !important; }
.shopify-section .section { padding-top: 0 !important; padding-bottom: 0 !important; }
.shopify-section .sec__inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.shopify-section { margin: 0 !important; }

/* Quick search panel doesn't take space */
.quick-search, #quick-search {
  position: absolute !important;
  top: 100%;
  margin-top: 0 !important;
}


/* ============================================================
   FORCE light bg on main / #MainContent (cart/search/product/etc)
   Higher specificity to beat Milano color-scheme classes
   ============================================================ */
html body.collection > main,
html body.collection #MainContent,
html body.collection main.content-for-layout,
html body.cart > main,
html body.cart #MainContent,
html body.cart main.content-for-layout,
html body.page > main,
html body.page #MainContent,
html body.page main.content-for-layout,
html body.search > main,
html body.search #MainContent,
html body.search main.content-for-layout,
html body.list-collections > main,
html body.list-collections #MainContent,
html body.article > main,
html body.article #MainContent,
html body.blog > main,
html body.blog #MainContent {
  background: #f9f9fb !important;
  color: #07141a !important;
}
html body.product > main,
html body.product #MainContent,
html body.product main.content-for-layout {
  background: #ffffff !important;
  color: #07141a !important;
}

/* CART specific styling — Milano uses dark color scheme on cart sections */
body.cart main .main-cart-items, body.cart main .cart, body.cart main .cart-page,
body.cart main .cart__items, body.cart main .cart__form, body.cart main .cart__summary,
body.cart main .cart-summary, body.cart main .cart-totals,
body.cart main .shopify-section .gradient,
body.cart main .shopify-section [class*="color-scheme"],
body.cart main section.shopify-section {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body.cart .cart__items table,
body.cart .cart-items {
  background: #ffffff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.cart .cart__items th, body.cart .cart-items th,
body.cart .cart-table th {
  color: #07141a !important;
  background: #fff !important;
  border-bottom: 1px solid #e6e9ee !important;
}
body.cart .cart__items td, body.cart .cart-items td,
body.cart .cart-table td,
body.cart .cart__item-title, body.cart .cart-item__title {
  color: #07141a !important;
  background: #fff !important;
}
body.cart .cart__summary, body.cart .cart-summary,
body.cart .cart-totals, body.cart .order-summary,
body.cart .cart-sidebar {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.cart .cart__summary *, body.cart .cart-summary *,
body.cart .cart-totals *, body.cart .order-summary * {
  color: #07141a !important;
}
body.cart .cart__total, body.cart .cart-totals__total {
  border-top: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.cart h1, body.cart h2, body.cart h3 {
  color: #07141a !important;
}

/* SEARCH page — light bg */
body.search .search-banner,
body.search .search-results,
body.search .search-content,
body.search section.shopify-section,
body.search .shopify-section .gradient {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body.search h1, body.search h2, body.search h3 {
  color: #07141a !important;
}
body.search .search__input, body.search form input[type="search"] {
  background: #ffffff !important;
  border: 1px solid #cdd9e3 !important;
  color: #07141a !important;
}
body.search .search__input::placeholder {
  color: #6c7787 !important;
}

/* PRODUCT page — remove dark bar above breadcrumb */
body.product .breadcrumb,
body.product .breadcrumbs,
body.product .product__breadcrumb,
body.product .breadcrumb-section,
body.product [class*="breadcrumb"]:not(li):not(ol) {
  background: transparent !important;
  color: #07141a !important;
  padding: 20px 24px !important;
  margin: 0 auto !important;
  max-width: 1280px !important;
}
body.product .breadcrumb a, body.product .breadcrumbs a {
  color: #07141a !important;
}
body.product .breadcrumb__separator, body.product .breadcrumbs__separator {
  color: var(--sc-accent) !important;
}
/* Removed: was breaking header/footer (Chrome cascade parsed this as matching header too) */


/* ============================================================
   Footer logo bigger + clickable
   ============================================================ */
.sc-foot-brand__logo-link {
  display: inline-block;
  margin-bottom: 14px;
  text-decoration: none;
}
.sc-foot-brand__logo {
  width: 220px !important;
  height: auto !important;
  display: block;
  margin-bottom: 0 !important;
  filter: brightness(1.05);
  transition: filter .2s;
}
.sc-foot-brand__logo-link:hover .sc-foot-brand__logo {
  filter: brightness(1.2);
}

/* Header logo: ensure Milano logo link to home (default but make sure) */
.header__logo, .site-header__logo, .header__logo-wrapper {
  cursor: pointer;
}
.header__logo a, .header__logo-link, .site-header__logo a {
  display: inline-block;
}


/* Dark hero sections on page templates need white h1 */
body.page .sc-contact-hero h1,
body.page .sc-about-hero h1,
body.page .sc-contact-hero p,
body.page .sc-about-hero p {
  color: #ffffff !important;
}
body.page .sc-contact-hero p,
body.page .sc-about-hero p {
  color: #ffffff !important;
}


/* ============================================================
   NETWORK GRAPHIC decoration on dark sections
   Uses /assets/sc-network-graphic.svg
   ============================================================ */
.sc-distwrap {
  position: relative;
  overflow: hidden;
}
.sc-distwrap::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 40px;
  width: 280px;
  height: 230px;
  background: url('sc-network-graphic.svg') no-repeat center / contain;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.sc-distwrap > * { position: relative; z-index: 1; }

.sc-ditis {
  position: relative;
  overflow: hidden;
}
.sc-ditis::after {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 60px;
  width: 240px;
  height: 200px;
  background: url('sc-network-graphic.svg') no-repeat center / contain;
  opacity: .25;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}

.sc-contact-hero {
  position: relative;
  overflow: hidden;
}
.sc-contact-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: -40px;
  width: 320px;
  height: 100%;
  background: url('sc-network-graphic.svg') no-repeat center / contain;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.sc-contact-hero > * { position: relative; z-index: 1; }

.sc-about-hero {
  position: relative;
  overflow: hidden;
}
.sc-about-hero::after {
  content: none !important;
  display: none !important;
}
.sc-about-hero > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .sc-distwrap::before,
  .sc-ditis::after,
  .sc-contact-hero::before,
  .sc-about-hero::after {
    opacity: .15;
    width: 160px;
    height: 130px;
  }
}


/* ============================================================
   FORCE sticky header
   ============================================================ */
.shopify-section-group-header-group {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: transparent;
}
header.shopify-section.header,
.shopify-section-group-header-group > section,
.shopify-section-group-header-group .header {
  position: relative;
}
/* Milano's own sticky class */
.header-sticky, #header-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
}
/* Ensure body doesn't have padding-top that would offset */
body { padding-top: 0 !important; }


/* ============================================================
   SEARCH page padding bottom under search input + heading
   ============================================================ */
body.search .search-banner,
body.search .search__hero,
body.search h1,
body.search .search-page__hero {
  margin-bottom: 30px !important;
}
body.search .search-form, body.search form[action="/search"] {
  margin-bottom: 30px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e6e9ee;
}
body.search .search-results-header,
body.search .search-count,
body.search .results-count {
  padding-top: 20px !important;
}

/* ============================================================

/* ============================================================
   ACCOUNT pages styling
   ============================================================ */
body.template-customers-login,
body.template-customers-register,
body.template-customers-account,
body.template-customers-addresses,
body.template-customers-order,
body.template-customers-reset_password,
body.template-customers-activate_account,
body[class*="customers"],
body.account, body.login, body.register {
  background: #f9f9fb !important;
  color: #07141a !important;
}
body[class*="customers"] main,
body[class*="customers"] #MainContent,
body.account main, body.login main, body.register main {
  background: #f9f9fb !important;
  padding: 60px 24px 80px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
body[class*="customers"] h1,
body.account h1, body.login h1, body.register h1 {
  font-family: var(--sc-font) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #07141a !important;
  letter-spacing: -.01em !important;
  margin: 0 0 24px !important;
}
body[class*="customers"] h2,
body[class*="customers"] h3,
body.account h2, body.account h3 {
  font-family: var(--sc-font) !important;
  text-transform: uppercase !important;
  color: #07141a !important;
}
body[class*="customers"] form,
body.account form, body.login form, body.register form,
body[class*="customers"] .customer-template,
body[class*="customers"] .account-section {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  padding: 32px !important;
  color: #07141a !important;
  margin-bottom: 24px;
  max-width: 540px;
}
body[class*="customers"] form label,
body.account form label, body.login form label, body.register form label {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: #07141a !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block;
}
body[class*="customers"] form input[type="text"],
body[class*="customers"] form input[type="email"],
body[class*="customers"] form input[type="password"],
body[class*="customers"] form input[type="tel"],
body[class*="customers"] form select,
body[class*="customers"] form textarea {
  background: #fff !important;
  border: 1px solid #cdd9e3 !important;
  color: #07141a !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
  font-family: var(--sc-font) !important;
  width: 100%;
  margin-bottom: 16px;
}
body[class*="customers"] form button[type="submit"],
body[class*="customers"] form .btn,
body[class*="customers"] form input[type="submit"] {
  background: var(--sc-cta) !important;
  color: #07141a !important;
  border: none !important;
  height: 48px !important;
  padding: 0 28px !important;
  font-family: var(--sc-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer;
}
body[class*="customers"] a,
body.account a, body.login a {
  color: var(--sc-accent) !important;
}
body[class*="customers"] .account-table,
body[class*="customers"] table {
  width: 100%;
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body[class*="customers"] table th,
body[class*="customers"] table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #eef2f5 !important;
  color: #07141a !important;
}
body[class*="customers"] table th {
  background: #f9f9fb !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: #07141a !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}


/* ============================================================
   COLLECTION PRICE FILTER — light bg + working selection
   ============================================================ */
body.collection .filter-range-slider,
body.collection .price-slider,
body.collection .noUi-target,
body.collection .price-range__slider,
body.collection .facets__price-slider {
  background: #cdd9e3 !important;
  border: none !important;
  height: 4px !important;
}
body.collection .noUi-connect,
body.collection .price-range__connect,
body.collection .filter-range__progress {
  background: var(--sc-accent) !important;
}
body.collection .noUi-handle,
body.collection .price-range__handle,
body.collection .filter-range__handle {
  background: #fff !important;
  border: 2px solid var(--sc-accent) !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 2px 6px rgba(48,157,198,.3) !important;
  cursor: pointer !important;
  top: -8px !important;
}
body.collection .noUi-tooltip {
  background: #07141a !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
}

/* Price range input boxes — light */
body.collection .min-price-range,
body.collection .max-price-range,
body.collection input[name*="price"],
body.collection .price-input,
body.collection .facets__price input {
  background: #fff !important;
  border: 1px solid #cdd9e3 !important;
  color: #07141a !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  font-family: var(--sc-font) !important;
  font-size: 13px !important;
  width: auto !important;
  min-width: 90px;
}
body.collection .min-price-range:focus,
body.collection .max-price-range:focus {
  border-color: var(--sc-accent) !important;
  outline: none;
}
body.collection .price-range-divider,
body.collection .facets__price-divider {
  color: #6c7787 !important;
}

/* Filter checkboxes - light styling */
body.collection .facets__checkbox,
body.collection input[type="checkbox"].facets__checkbox + label,
body.collection .checkbox {
  background: #fff !important;
  border: 1.5px solid #cdd9e3 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
body.collection .facets__checkbox:checked,
body.collection input[type="checkbox"]:checked + .checkbox,
body.collection .facets__item input:checked + .checkbox {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}
body.collection .facets__checkbox:checked::after,
body.collection input[type="checkbox"]:checked + .checkbox::after {
  content: '✓';
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
}

/* Filter labels readable on light bg */
body.collection .facets__item label,
body.collection .facet-item__label,
body.collection .filter-options__item label {
  color: #07141a !important;
  cursor: pointer;
}
body.collection .facets__item .count,
body.collection .filter-count {
  color: #07141a !important;
}

/* Filter group titles cyan */
body.collection .facets__heading,
body.collection .filter-group__heading,
body.collection .filter__heading,
body.collection .collection-sidebar h4 {
  color: var(--sc-accent) !important;
  background: transparent !important;
}

/* Make sure selection clicks register (z-index) */
body.collection .facets__item,
body.collection .facets__list label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}


/* ============================================================
   INLINE SEARCH BAR in header (search_type=default)
   ============================================================ */
.header .search-form, .header form[action="/search"],
.header__search-form, header.header form.search {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;
  height: 44px !important;
  max-width: 480px;
  flex: 1;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  position: relative;
  transition: border-color .15s, background .15s;
}
.header .search-form:focus-within,
.header form[action="/search"]:focus-within {
  border-color: var(--sc-accent) !important;
  background: rgba(255,255,255,.10) !important;
}
.header .search-form input[type="search"],
.header form[action="/search"] input[type="search"],
.header .search__input,
.header__search-form input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--sc-font) !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  height: 100% !important;
  outline: none !important;
}
.header .search-form input::placeholder,
.header form[action="/search"] input::placeholder {
  color: rgba(255,255,255,.5) !important;
}
.header .search-form button[type="submit"],
.header form[action="/search"] button[type="submit"],
.header__search-button, .search__button {
  background: var(--sc-accent) !important;
  color: #fff !important;
  border: none !important;
  height: 100% !important;
  padding: 0 18px !important;
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}
.header .search-form button[type="submit"]:hover {
  background: #1e8fd6 !important;
}
.header .search-form svg, .header__search-button svg {
  width: 18px;
  height: 18px;
  color: #fff !important;
}

/* Zoekknop (vergrootglas) in de header: de zoekfunctie werkt als pop-up, dus de
   knop moet zichtbaar zijn. Eerder stond hier display:none omdat er een los
   zoekveld in de header stond. */
.top-search-toggle, .header__search-toggle {
  display: inline-flex !important;
  color: #fff !important;
  background: transparent !important;
}
.top-search-toggle svg, .top-search-toggle svg * {
  color: #fff !important;
  stroke: #fff !important;
}

/* Predictive search dropdown */
.predictive-search,
.predictive-search__results,
.search__predictive {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  border-top: none !important;
  box-shadow: 0 8px 20px rgba(7,20,26,.15) !important;
  border-radius: 0 !important;
  color: #07141a !important;
  margin-top: 0 !important;
  z-index: 50;
}
.predictive-search *, .predictive-search__results * {
  color: #07141a !important;
}
.predictive-search__heading, .predictive-search-results__heading {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  color: var(--sc-accent) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid #eef2f5;
}
.predictive-search__item, .predictive-search-result {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f4f6f9 !important;
  display: flex;
  gap: 12px;
  align-items: center;
}
.predictive-search__item:hover {
  background: #f9f9fb !important;
}
.predictive-search__item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #f9f9fb;
}

/* Header layout: ensure search bar gets space in the middle */
.header__row, .header__inner, .site-header__inner,
.header-inner, .header__layout-1, .show-search-form {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
.header__logo, .site-header__logo, .header-logo {
  flex-shrink: 0;
}
.header__menu, .site-nav, nav.navigation, .header__navigation {
  flex-shrink: 0;
}


/* ============================================================
   CART ICON visible + white
   ============================================================ */
#cart-icon-bubble,
.minicart__action,
.minicart a[href="/cart"],
.header .cart-link,
.header .cart-icon,
.header__cart-icon,
.header .icon-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  text-decoration: none !important;
}
#cart-icon-bubble svg,
.minicart__action svg,
.header .cart-link svg,
.header svg.icon-cart,
.header [class*="cart"] svg {
  width: 22px !important;
  height: 22px !important;
  color: #ffffff !important;
  fill: none !important;
  stroke: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#cart-icon-bubble:hover svg,
.minicart__action:hover svg {
  color: var(--sc-accent) !important;
  stroke: var(--sc-accent) !important;
}

/* Cart count badge yellow */
#cart-icon-bubble .cart-count, #cart-icon-bubble .cart-counter,
.minicart__action .cart-count, .cart-bubble__counter,
[class*="cart-count"] {
  position: absolute !important;
  top: -4px !important;
  right: -2px !important;
  background: var(--sc-cta) !important;
  color: var(--sc-bg) !important;
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px;
  height: 18px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
   FORCE cart icon SVG visible (stroke currentColor → white)
   ============================================================ */
#cart-icon-bubble,
#cart-icon-bubble h-count,
#cart-icon-bubble svg,
#cart-icon-bubble svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#cart-icon-bubble svg path {
  stroke-width: 1.5px !important;
}
.cart-count, h-count .cart-count {
  font-size: 10px !important;
}
h-count.fs-0 {
  font-size: inherit !important;
  display: inline-flex !important;
}
/* Account icon also visible */
.header__icon-account svg, .header__icon-account svg path {
  color: #fff !important;
  stroke: #fff !important;
}

/* ============================================================
   HEADER + FOOTER identical to homepage on every page
   (no page-specific overrides — base styles apply universally)
   ============================================================ */

/* ============================================================
   OVER-ONS page — h1, h2, h3 dark on the LIGHT bg sections only
   (dark hero stays white)
   ============================================================ */
body.page .sc-about-hero h1,
body.page .sc-about-hero p,
body.page .sc-about-hero__eyebrow span:last-child {
  color: #fff !important;
}
body.page .sc-about-hero__eyebrow span:last-child { color: #309dc6 !important; }
body.page .sc-about-stats, body.page .sc-about-stats *,
body.page .sc-about-cards, body.page .sc-about-cards * {
  background: transparent !important;
}
body.page .sc-about-stats {
  background: #f9f9fb !important;
  padding: 64px 24px !important;
}
body.page .sc-about-cards {
  background: #f9f9fb !important;
  padding: 64px 24px !important;
}
body.page .sc-about-stat__num,
body.page .sc-about-stat__lbl {
  color: #07141a !important;
}
body.page .sc-about-stat__lbl { color: #07141a !important; }
body.page .sc-about-card {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.page .sc-about-card h3 {
  color: #07141a !important;
}
body.page .sc-about-card p {
  color: #07141a !important;
}

/* ============================================================
   COLLECTION FILTER sidebar — proper layout, no overlap
   ============================================================ */
body.collection .collection-sidebar,
body.collection aside.filters,
body.collection .facets,
body.collection .filter-wrapper,
body.collection .filter-vertical {
  width: 260px !important;
  flex-shrink: 0 !important;
  padding: 24px !important;
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}
body.collection .filter-group, body.collection .facets__group {
  margin-bottom: 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid #eef2f5 !important;
  padding-bottom: 20px !important;
}
body.collection .filter-group:last-child, body.collection .facets__group:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
body.collection .filter-group__heading,
body.collection .facets__heading {
  display: block !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  position: relative;
  border-bottom: 1px solid #eef2f5;
}
body.collection .filter-group__content,
body.collection .facets__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.collection .filter-group__item,
body.collection .facets__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body.collection .filter-group__label,
body.collection .facets__label,
body.collection .facets__item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #07141a !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  line-height: 1.4 !important;
}
body.collection .filter-group__count, body.collection .facets__item .count {
  margin-left: auto !important;
  font-family: var(--sc-font);
  font-size: 11px;
  color: #07141a !important;
}

/* Collection page main grid: sidebar + product grid */
body.collection .collection-content,
body.collection .collection__main,
body.collection .main-collection-product > .container > .row {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  body.collection .collection-content,
  body.collection .main-collection-product > .container > .row {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   Hide topbar (USP) on mobile
   ============================================================ */
@media (max-width: 768px) {
  .sc-usptop {
    display: none !important;
  }
}


/* ============================================================
   TABLET + MOBILE OPTIMIZATION (comprehensive)
   ============================================================ */

/* TABLET (768-1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Containers */
  .sc-hero__wrap, .sc-cats, .sc-uspsLight__wrap, .sc-trust__wrap,
  .sc-dist__inner, .sc-ditis__wrap, .sc-about-hero__wrap,
  .sc-brandsp, .sc-legal, .sc-shipping,
  .sc-contact-hero__wrap, .sc-contact__wrap,
  .footer__blocks {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Hero */
  .sc-hero h1 { font-size: 48px !important; }
  .sc-hero__inner { max-width: 480px !important; }
  .sc-hero__image { width: 48% !important; }
  .sc-hero__badge { width: 104px !important; height: 104px !important; right: 24px !important; bottom: 24px !important; font-size: 10px !important; }

  /* Light band sections - looser padding */
  .sc-light .sc-section { padding: 64px 24px !important; }

  /* Grids: keep 4-col on tablet for products, 4-col cats */
  .sc-cats__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sc-pgrid { grid-template-columns: repeat(3, 1fr) !important; }
  .sc-uspsLight__wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; padding: 40px 0 !important; }
  .sc-ditis__grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Distributor 2-col → 1 col */
  .sc-dist__inner { grid-template-columns: 1fr !important; padding: 44px !important; gap: 28px !important; }
  .sc-dist__stats { grid-template-columns: repeat(2, 1fr) !important; }
  .sc-dist h2 { font-size: 28px !important; }

  /* Brand strip wraps */
  .sc-brandstrip__wrap { gap: 28px !important; }
  .sc-brandstrip__name { font-size: 18px !important; }

  /* Footer 3 cols → 2 cols */
  .footer__blocks { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
  .footer__blocks .footer-block:first-child { grid-column: span 2; }

  /* Header */
  .sc-usptop__items { gap: 18px !important; }
  .sc-usptop__item { font-size: 10.5px !important; }
  .sc-usptop__item:nth-child(n+4) { display: none !important; }

  /* Contact page 2-col */
  .sc-contact__wrap { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* About cards 2-col */
  .sc-about-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .sc-about-stats { grid-template-columns: repeat(4, 1fr) !important; }

  /* Page heading sizes */
  .sc-light h2 { font-size: 30px !important; }
  .sc-ditis h2 { font-size: 32px !important; }
  .sc-trust h2 { font-size: 26px !important; }

  /* Collection sidebar */
  body.collection .collection-content,
  body.collection .main-collection-product > .container > .row {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }
  body.collection .collection-sidebar, body.collection .facets {
    width: 220px !important;
    padding: 18px !important;
  }
}

/* MOBILE (≤768px) */
@media (max-width: 768px) {
  /* Containers - tight padding */
  .sc-hero__wrap, .sc-cats, .sc-uspsLight__wrap, .sc-trust__wrap,
  .sc-dist__inner, .sc-ditis__wrap, .sc-about-hero__wrap,
  .sc-brandsp, .sc-legal, .sc-shipping,
  .sc-contact-hero__wrap, .sc-contact__wrap,
  .footer__blocks {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero - stacked */
  .sc-hero { min-height: auto !important; flex-direction: column !important; }
  .sc-hero__image {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    background-position: center top !important;
  }
  .sc-hero__image::before {
    background: linear-gradient(180deg, transparent 0%, rgba(7,20,26,.4) 70%, #07141a 100%) !important;
  }
  .sc-hero__wrap { padding: 32px 20px 56px !important; }
  .sc-hero__inner { max-width: 100% !important; }
  .sc-hero h1 { font-size: 32px !important; line-height: 1.05 !important; }
  .sc-hero p { font-size: 15px !important; }
  .sc-hero__eyebrow { font-size: 11px !important; }
  .sc-hero__ctas { flex-direction: column !important; align-items: stretch !important; }
  .sc-hero__ctas a { text-align: center !important; }
  .sc-hero__badge {
    position: relative !important;
    right: auto !important; bottom: auto !important;
    margin: 28px auto 0 !important;
    width: 86px !important; height: 86px !important; font-size: 9.5px !important;
  }

  /* Light band - tighter padding */
  .sc-light .sc-section { padding: 48px 20px !important; }
  .sc-light h2 { font-size: 26px !important; }
  .sc-light .sc-head { flex-direction: column !important; align-items: flex-start !important; }
  .sc-light .sc-head__view { align-self: flex-start !important; }

  /* Categorie cards 4 → 1 */
  .sc-cats__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .sc-cats__card { min-height: 160px !important; padding: 24px 22px !important; }

  /* Product cards 4 → 2 */
  .sc-pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .sc-pcard__body { padding: 12px 12px 14px !important; }
  .sc-pcard__title { font-size: 12.5px !important; min-height: 2.6em !important; }
  .sc-pcard__price { font-size: 15px !important; }
  .sc-pcard__add { width: 32px !important; height: 32px !important; font-size: 18px !important; }
  .sc-pcard__media { padding: 16px !important; }
  .sc-pcard__vendor { font-size: 9px !important; }

  /* USP band - stack vertically */
  .sc-uspsLight__wrap {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 32px 0 !important;
  }
  .sc-uspsLight__title { font-size: 14px !important; }
  .sc-uspsLight__text { font-size: 12.5px !important; }

  /* Distributor callout */
  .sc-distwrap { padding: 48px 20px !important; }
  .sc-dist__inner {
    grid-template-columns: 1fr !important;
    padding: 28px 24px !important;
    gap: 24px !important;
  }
  .sc-dist h2 { font-size: 22px !important; }
  .sc-dist p { font-size: 14px !important; }
  .sc-dist__stats { gap: 10px !important; }
  .sc-dist__stat { padding: 16px !important; }
  .sc-dist__stat-num { font-size: 24px !important; }
  .sc-dist__stat-lbl { font-size: 10px !important; }
  .sc-dist__inner::after { display: none !important; }

  /* DIT IS sectie */
  .sc-ditis { padding: 48px 20px !important; }
  .sc-ditis h2 { font-size: 26px !important; margin-bottom: 28px !important; }
  .sc-ditis__grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sc-ditis__card { padding: 26px 22px !important; }
  .sc-ditis__card h3 { font-size: 18px !important; }
  .sc-ditis__card p { font-size: 13.5px !important; }

  /* Brand strip */
  .sc-brandstrip { padding: 24px 0 !important; }
  .sc-brandstrip__wrap { gap: 16px !important; padding: 0 16px !important; }
  .sc-brandstrip__lead { font-size: 10px !important; width: 100%; text-align: center; margin-bottom: 8px; }
  .sc-brandstrip__name { font-size: 14px !important; }

  /* Trust bar */
  .sc-trust { padding: 40px 20px !important; }
  .sc-trust h2 { font-size: 22px !important; }
  .sc-trust p { font-size: 14px !important; }
  .sc-trust__contact { flex-direction: column !important; gap: 14px !important; }

  /* Footer - stack to 1 col */
  .footer__blocks { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer__middle { padding: 48px 20px 32px !important; }
  .sc-foot-brand__logo { width: 160px !important; }
  .sc-foot-head { font-size: 11px !important; }
  .footer-block.link_list a { font-size: 13.5px !important; }
  .footer_bottom-inner { padding: 16px 20px !important; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
  .footer__copyright { font-size: 11px !important; }

  /* Header */
  .sc-usptop { display: none !important; }
  .header__row, .header-inner, .header__layout-1 { padding: 12px 20px !important; gap: 16px !important; }
  .header__logo img, .site-header__logo img { max-height: 30px !important; }
  
  /* Mobile nav menu */
  .navigation, .site-nav, .header__menu, nav.navigation { display: none !important; }
  .nav-toggle, .menu-toggle, .header__menu-toggle { display: inline-flex !important; }

  /* Cart icon */
  #cart-icon-bubble, .minicart__action { width: 38px !important; height: 38px !important; }
  #cart-icon-bubble svg { width: 20px !important; height: 20px !important; }

  /* Contact page */
  .sc-contact-hero { padding: 40px 20px 32px !important; }
  .sc-contact-hero h1 { font-size: 28px !important; }
  .sc-contact-hero p { font-size: 15px !important; }
  .sc-contact { padding: 32px 20px 48px !important; }
  .sc-contact__wrap { grid-template-columns: 1fr !important; gap: 18px !important; }
  .sc-contact__info, .sc-contact__form { padding: 24px 22px !important; }
  .sc-contact__info h2, .sc-contact__form h2 { font-size: 18px !important; }
  .sc-contact__form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* About page */
  .sc-about-hero__wrap { padding: 40px 20px !important; }
  .sc-about-hero h1 { font-size: 28px !important; }
  .sc-about-hero p { font-size: 14.5px !important; }
  .sc-about-stats { grid-template-columns: 1fr 1fr !important; padding: 40px 20px !important; gap: 20px !important; }
  .sc-about-stat__num { font-size: 32px !important; }
  .sc-about-cards { grid-template-columns: 1fr !important; padding: 40px 20px !important; gap: 14px !important; }
  .sc-about-card { padding: 26px 22px !important; }

  /* Brands page */
  .sc-brandsp__grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sc-brandsp h1 { font-size: 28px !important; }
  .sc-brandsp__lead { font-size: 14px !important; }

  /* Legal pages */
  .sc-legal h1, .sc-shipping h1 { font-size: 28px !important; }
  .sc-shipping__grid { grid-template-columns: 1fr !important; }

  /* PLP */
  body.collection .collection-content,
  body.collection .main-collection-product > .container > .row {
    grid-template-columns: 1fr !important;
  }
  body.collection .collection-sidebar, body.collection .facets {
    width: 100% !important;
    margin-bottom: 20px;
  }
  body.collection h1, body.collection .collection__title { font-size: 26px !important; }

  /* PDP */
  body.product .product__title, body.product .product-single__title { font-size: 24px !important; }
  body.product .product__price, body.product .price { font-size: 26px !important; }
  body.product .product, body.product .product__container { padding: 24px 20px !important; margin: 12px auto 32px !important; }

  /* Cart drawer full width on mobile */
  .minicart__wrapper, .cart-drawer { width: 100vw !important; }
}


/* ============================================================
   HEADER + FOOTER PARITY OVERRIDES
   Force ALL non-home pages to match homepage styling EXACTLY.
   Targets: collection, product, cart, page, search, list-collections,
            article, blog templates.
   ============================================================ */

/* ---------- BODY + HTML background ---------- */
html.js,
html body.template-collection,
html body.template-product,
html body.template-cart,
html body.template-page,
html body.template-search,
html body.template-list-collections,
html body.template-article,
html body.template-blog {
  background-color: rgb(7, 20, 26) !important;
}

/* ---------- HEADER GROUP (USP top wrapper) ---------- */
html body.template-collection .shopify-section-group-header-group,
html body.template-product .shopify-section-group-header-group,
html body.template-cart .shopify-section-group-header-group,
html body.template-page .shopify-section-group-header-group,
html body.template-search .shopify-section-group-header-group,
html body.template-list-collections .shopify-section-group-header-group,
html body.template-article .shopify-section-group-header-group,
html body.template-blog .shopify-section-group-header-group {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
}

/* ---------- USP TOP BAR — IDENTICAL on every page ---------- */
html body .sc-usptop,
html body .sc-usptop__wrap,
html body:not(.template-index) .sc-usptop,
html body:not(.template-index) .sc-usptop__wrap {
  color: #ffffff !important;
  background-color: #050f14 !important;
}

html body .sc-usptop *,
html body .sc-usptop__wrap *,
html body:not(.template-index) .sc-usptop *,
html body:not(.template-index) .sc-usptop__wrap * {
  color: #ffffff !important;
}

/* Green dot before "Klantenservice:" — keep cyan accent dot identical */
html body .sc-usptop__phone::before,
html body:not(.template-index) .sc-usptop__phone::before {
  background: #2bd47b !important;
  box-shadow: 0 0 0 3px rgba(43,212,123,.18) !important;
}

/* ---------- HEADER (main sticky) ---------- */
html body:not(.template-index) header.header,
html body:not(.template-index) header.header.relative,
html body:not(.template-index) header.header.section,
html body:not(.template-index) header.header.gradient,
html body:not(.template-index) .header.relative.section.gradient {
  background-color: #050f14 !important;
  color: rgb(255, 255, 255) !important;
}

html body:not(.template-index) #header-sticky,
html body:not(.template-index) #header-sticky.header__inner,
html body:not(.template-index) .header__inner,
html body:not(.template-index) .header__inner.header__layout-1 {
  color: rgb(255, 255, 255) !important;
  background-color: transparent !important;
}

/* Header logo */
html body:not(.template-index) .header__logo,
html body:not(.template-index) .header__logo a,
html body:not(.template-index) .header__logo-link {
  color: rgb(255, 255, 255) !important;
}

html body:not(.template-index) img.header__normal-logo,
html body:not(.template-index) .header__normal-logo,
html body:not(.template-index) .header__logo img,
html body:not(.template-index) .header__logo svg {
  color: rgb(255, 255, 255) !important;
  fill: currentColor !important;
}

/* Header menu / nav */
html body:not(.template-index) .header__menu,
html body:not(.template-index) .header__menu *,
html body:not(.template-index) .header-nav,
html body:not(.template-index) .header-nav a,
html body:not(.template-index) .header__icons,
html body:not(.template-index) .header__icons a,
html body:not(.template-index) .header-icon,
html body:not(.template-index) .header-color {
  color: rgb(255, 255, 255) !important;
}

/* ---------- FOOTER ---------- */
html body:not(.template-index) footer.footer,
html body:not(.template-index) footer.product-sticky-hide.footer,
html body:not(.template-index) .footer.product-sticky-hide,
html body:not(.template-index) footer.footer.product-sticky-hide {
  background-color: rgb(5, 15, 20) !important;
  color: #ffffff !important;
  margin-top: 0 !important;
}

html body:not(.template-index) .shopify-section-group-footer-group {
  color: rgb(255, 255, 255) !important;
  background-color: transparent !important;
}

/* Footer headings */
html body:not(.template-index) h3.footer__block-heading,
html body:not(.template-index) .footer__block-heading,
html body:not(.template-index) .footer h3,
html body:not(.template-index) .footer__blocks h3,
html body:not(.template-index) .footer__middle h3 {
  color: rgb(255, 255, 255) !important;
}

/* Footer middle/blocks/bottom */
html body:not(.template-index) .footer__middle,
html body:not(.template-index) .footer__middle.section,
html body:not(.template-index) .footer__middle.section.remove_spacing,
html body:not(.template-index) .footer__blocks,
html body:not(.template-index) .footer_bottom,
html body:not(.template-index) .footer_bottom-inner,
html body:not(.template-index) .footer__bottom,
html body:not(.template-index) .footer__bottom-inner {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Footer links inherit muted color, hover white */
html body:not(.template-index) .footer a,
html body:not(.template-index) .footer__blocks a,
html body:not(.template-index) .footer__middle a,
html body:not(.template-index) .footer_bottom-inner a {
  color: #ffffff !important;
}

html body:not(.template-index) .footer a:hover,
html body:not(.template-index) .footer__blocks a:hover,
html body:not(.template-index) .footer__middle a:hover {
  color: rgb(255, 255, 255) !important;
}

/* End header/footer parity overrides */

/* ============================================================
   ULTRACODE FIX — Product page header/footer MUST stay dark
   (highest possible specificity to beat all my earlier overrides)
   ============================================================ */
html body.product .shopify-section-group-header-group,
html body.product .shopify-section-group-header-group *,
html body.product header.shopify-section,
html body.product header.header,
html body.product .header,
html body.product .header__inner,
html body.product #header-sticky,
html body.product .sc-usptop {
  background-color: transparent !important;
}
html body.product .shopify-section-group-header-group {
  background: #07141a !important;
}
html body.product .sc-usptop {
  background: #050f14 !important;
}
html body.product header.header,
html body.product .header,
html body.product .header__inner,
html body.product #header-sticky {
  background: #050f14 !important;
  color: #ffffff !important;
}
html body.product .shopify-section-group-header-group a,
html body.product .header a,
html body.product .navigation a,
html body.product .header__menu a,
html body.product .sc-usptop * {
  color: #ffffff !important;
}
html body.product .sc-usptop__item {
  color: #ffffff !important;
}
html body.product #cart-icon-bubble,
html body.product #cart-icon-bubble svg,
html body.product .header__icon-account svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}

/* FOOTER on product page — force dark */
html body.product .shopify-section-group-footer-group,
html body.product .shopify-section-group-footer-group * {
  background-color: transparent !important;
}
html body.product .shopify-section-group-footer-group,
html body.product footer.shopify-section,
html body.product .footer,
html body.product .footer__middle,
html body.product .footer_bottom-inner {
  background: #050f14 !important;
  color: var(--sc-text-mid) !important;
}
html body.product .footer__block-heading,
html body.product .footer h3 {
  color: var(--sc-accent-2) !important;
}
html body.product .footer a,
html body.product .footer p,
html body.product .footer li,
html body.product .footer span:not(.sc-foot-dot),
html body.product .footer-block,
html body.product .footer__block-info,
html body.product .footer__block-description,
html body.product .footer__copyright,
html body.product .sc-foot-list a,
html body.product .sc-foot-brand__tag,
html body.product .sc-foot-brand__row,
html body.product .sc-foot-brand__row a,
html body.product .sc-foot-brand__kvk {
  color: var(--sc-text-mid) !important;
}
html body.product .footer__block-heading,
html body.product .sc-foot-head {
  color: var(--sc-accent-2) !important;
}

/* Also apply same to cart + search (workflow flagged them too) */
html body.cart .shopify-section-group-header-group,
html body.search .shopify-section-group-header-group {
  background: #07141a !important;
}
html body.cart .sc-usptop,
html body.search .sc-usptop {
  background: #050f14 !important;
}
html body.cart header.header,
html body.cart .header,
html body.cart .header__inner,
html body.cart #header-sticky,
html body.search header.header,
html body.search .header,
html body.search .header__inner,
html body.search #header-sticky {
  background: #050f14 !important;
  color: #ffffff !important;
}
html body.cart .header a, html body.cart .header * ,
html body.search .header a, html body.search .header *,
html body.cart .sc-usptop *,
html body.search .sc-usptop * {
  color: #ffffff !important;
}
html body.cart .sc-usptop__item, html body.search .sc-usptop__item {
  color: #ffffff !important;
}
html body.cart .shopify-section-group-footer-group,
html body.search .shopify-section-group-footer-group,
html body.cart footer.shopify-section,
html body.search footer.shopify-section,
html body.cart .footer, html body.search .footer,
html body.cart .footer__middle, html body.search .footer__middle,
html body.cart .footer_bottom-inner, html body.search .footer_bottom-inner {
  background: #050f14 !important;
  color: var(--sc-text-mid) !important;
}
html body.cart .footer__block-heading, html body.search .footer__block-heading,
html body.cart .sc-foot-head, html body.search .sc-foot-head {
  color: var(--sc-accent-2) !important;
}
html body.cart .footer a, html body.cart .footer p, html body.cart .footer li,
html body.search .footer a, html body.search .footer p, html body.search .footer li {
  color: var(--sc-text-mid) !important;
}

/* Override the wholesale 'body.X * { color: dark }' rules that may have leaked */
html body.product .shopify-section-group-header-group,
html body.product .shopify-section-group-header-group *:not(.sc-usptop__item):not([class*="dot"]),
html body.product .shopify-section-group-footer-group *:not(.footer__block-heading):not(.sc-foot-head):not(.sc-foot-dot) {
  /* let inherit chain handle non-explicit colors */
}

/* Footer margin-top must be 0 (workflow flagged this) */
html body.product .shopify-section-group-footer-group,
html body.product footer.shopify-section,
html body.product .footer,
html body.collection .shopify-section-group-footer-group,
html body.collection footer.shopify-section,
html body.cart .shopify-section-group-footer-group,
html body.cart footer.shopify-section,
html body.page .shopify-section-group-footer-group,
html body.search .shopify-section-group-footer-group {
  margin-top: 0 !important;
}

/* cache-bust 1782477432 */

/* ============================================================
   ABSOLUTE HIGHEST SPECIFICITY OVERRIDE
   Forces header/footer dark on product/cart even if any rule
   in cascade tries to make them light
   ============================================================ */
html body.product .shopify-section-group-header-group header.header,
html body.product header.header.shopify-section,
html body.product header.header.shopify-section.gradient,
html body.cart .shopify-section-group-header-group header.header,
html body.cart header.header.shopify-section,
html body.cart header.header.shopify-section.gradient,
html body.search header.header.shopify-section.gradient,
html body.collection header.header.shopify-section.gradient,
html body.page header.header.shopify-section.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
  color: #ffffff !important;
}
html body.product .shopify-section-group-header-group section.sc-usptop,
html body.product .shopify-section-group-header-group .sc-usptop,
html body.cart .shopify-section-group-header-group section.sc-usptop,
html body.cart .shopify-section-group-header-group .sc-usptop,
html body.search .shopify-section-group-header-group .sc-usptop,
html body.collection .shopify-section-group-header-group .sc-usptop,
html body.page .shopify-section-group-header-group .sc-usptop {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
html body.product .shopify-section-group-footer-group footer.footer,
html body.product .shopify-section-group-footer-group .footer,
html body.product footer.footer.shopify-section,
html body.product footer.shopify-section.gradient,
html body.cart .shopify-section-group-footer-group footer.footer,
html body.cart .shopify-section-group-footer-group .footer,
html body.cart footer.shopify-section.gradient,
html body.search .shopify-section-group-footer-group .footer,
html body.search footer.shopify-section.gradient,
html body.collection .shopify-section-group-footer-group .footer,
html body.page .shopify-section-group-footer-group .footer {
  background: #050f14 !important;
  background-color: #050f14 !important;
  color: var(--sc-text-mid) !important;
}
html body.product .shopify-section-group-footer-group .footer__block-heading,
html body.product .shopify-section-group-footer-group h3,
html body.cart .shopify-section-group-footer-group .footer__block-heading,
html body.cart .shopify-section-group-footer-group h3,
html body.collection .shopify-section-group-footer-group .footer__block-heading,
html body.collection .shopify-section-group-footer-group h3,
html body.page .shopify-section-group-footer-group .footer__block-heading,
html body.page .shopify-section-group-footer-group h3,
html body.search .shopify-section-group-footer-group .footer__block-heading,
html body.search .shopify-section-group-footer-group h3 {
  color: var(--sc-accent-2) !important;
}


/* ============================================================
   FINAL OVERRIDE — header just .header.gradient (no .shopify-section)
   The header element has classes "header gradient ..." but no "shopify-section"
   ============================================================ */
html body.product header.header.gradient,
html body.cart header.header.gradient,
html body.search header.header.gradient,
html body.collection header.header.gradient,
html body.page header.header.gradient,
html body.list-collections header.header.gradient,
html body.article header.header.gradient,
html body.blog header.header.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
html body.product footer.footer.gradient,
html body.product footer.gradient.footer,
html body.cart footer.footer.gradient,
html body.search footer.footer.gradient,
html body.collection footer.footer.gradient,
html body.page footer.footer.gradient,
html body.list-collections footer.footer.gradient,
html body.article footer.footer.gradient,
html body.blog footer.footer.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
/* Catch any .gradient element that's the actual header or footer */
html body.product [class*="shopify-section-group-header-group"] .gradient,
html body.cart [class*="shopify-section-group-header-group"] .gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
html body.product [class*="shopify-section-group-footer-group"] .gradient,
html body.cart [class*="shopify-section-group-footer-group"] .gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}

/* h3 colors in footer — cyan on ALL pages */
html body.collection .footer .footer__block-heading,
html body.collection .footer h3,
html body.collection .sc-foot-head {
  color: var(--sc-accent-2) !important;
}


/* ============================================================
   USP topbar items white (user request)
   ============================================================ */
.sc-usptop,
.sc-usptop__wrap,
.sc-usptop__item,
.sc-usptop__items,
.sc-usptop__phone,
.sc-usptop a {
  color: #ffffff !important;
}
.sc-usptop__phone span {
  background: #34d17e !important;
}

/* Final cart override - absolute max specificity */
html body.cart .shopify-section-group-header-group header.header,
html body.cart .shopify-section-group-header-group .header,
html body.cart .shopify-section-group-header-group header.header.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
html body.cart .shopify-section-group-footer-group footer,
html body.cart .shopify-section-group-footer-group .footer,
html body.cart .shopify-section-group-footer-group footer.footer.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}

/* ============================================================
   HEADER opaque (geen transparantie meer — anders blend't ie
   met body bg op licht-bg pages → wordt #1D2833)
   ============================================================ */
.header, .site-header, header.shopify-section,
.header__wrapper, section[id*="header"] .header,
html body .header,
html body .header__inner,
html body #header-sticky,
html body header.header,
html body header.header.gradient,
html body.product header.header,
html body.product header.header.gradient,
html body.cart header.header,
html body.cart header.header.gradient,
html body.collection header.header,
html body.collection header.header.gradient,
html body.page header.header,
html body.page header.header.gradient,
html body.search header.header,
html body.search header.header.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}

/* USP topbar — slightly darker for contrast */
.sc-usptop {
  background: #050f14 !important;
  background-color: #050f14 !important;
}

/* LOGO image must be visible on dark — force white via filter */
.header__logo img,
.site-header__logo img,
.header__normal-logo,
.header__logo a img,
html body.collection .header__logo img,
html body.product .header__logo img,
html body.cart .header__logo img,
html body.page .header__logo img,
html body.search .header__logo img {
  filter: none !important;
  background: transparent !important;
}

/* All header text + icons: pure white */
.header, .header *, .header a, .header span, .header div,
header.header, header.header *, header.header a, header.header span,
.sc-usptop a, .sc-usptop__phone a {
  color: #ffffff !important;
}
.sc-usptop__item, .sc-usptop__items, .sc-usptop__phone {
  color: #ffffff !important;
}
/* SVG icons in header use currentColor — also white */
.header svg, header.header svg, .header svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* Cart count badge stays yellow */
.cart-count, h-count .cart-count, [class*="cart-count"] {
  color: #07141a !important;
  background: #fff500 !important;
}

/* ============================================================
   ULTRA-FORCE: USP topbar text white + green dot consistent
   ============================================================ */
html .sc-usptop,
html .sc-usptop *,
html .sc-usptop__item,
html .sc-usptop__items,
html .sc-usptop__phone,
html .sc-usptop__phone a,
html body.product .sc-usptop__item,
html body.collection .sc-usptop__item,
html body.cart .sc-usptop__item,
html body.search .sc-usptop__item,
html body.page .sc-usptop__item {
  color: #ffffff !important;
}

/* Green dot — uniform on every page */
.sc-usptop__phone span,
.sc-usptop__phone > span:first-child,
html body .sc-usptop__phone span {
  background: #34d17e !important;
  background-color: #34d17e !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 0 2px rgba(52,209,126,.25) !important;
  flex-shrink: 0;
}

/* ============================================================
   COLLECTION header nav/text — force white (was dark)
   ============================================================ */
html body.collection header.header,
html body.collection header.header *,
html body.collection .header,
html body.collection .header *,
html body.collection .header a,
html body.collection .header__menu a,
html body.collection .navigation a,
html body.collection nav.navigation a,
html body.collection .header__logo,
html body.collection .header span {
  color: #ffffff !important;
}
html body.collection .header__logo img,
html body.collection .site-header__logo img {
  filter: none !important;
}
html body.collection .header svg,
html body.collection header.header svg,
html body.collection .header svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
html body.collection .cart-count, html body.collection [class*="cart-count"] {
  color: #07141a !important;
  background: #fff500 !important;
}


/* ============================================================
   PRODUCT PRICE DARK on light bg pages
   ============================================================ */
html body.product .price,
html body.product .price *,
html body.product .price__regular,
html body.product .price-item,
html body.product .price-item--regular,
html body.product .product__price,
html body.product .product__price *,
html body.product .product-single__price,
html body.product .price__regular .price-item,
html body.product [class*="price-item"]:not(.compare):not(.sale),
html body.product .product-info-price {
  color: #07141a !important;
}
html body.product .price--on-sale .price-item--sale,
html body.product .price-item--sale {
  color: #e23131 !important;
}
html body.product .price s, html body.product .price del,
html body.product .price__compare {
  color: #6c7787 !important;
}

/* ============================================================
   OVER ONS — alle tekst dark op lichte bg (was wit)
   ============================================================ */
html body.page main, html body.page main *,
html body.page .sc-about-cards, html body.page .sc-about-cards *,
html body.page .sc-about-stats, html body.page .sc-about-stats *,
html body.page .sc-about-card, html body.page .sc-about-card *,
html body.page .sc-shipping, html body.page .sc-shipping *,
html body.page .sc-shipping__card, html body.page .sc-shipping__card *,
html body.page .sc-legal, html body.page .sc-legal *,
html body.page .sc-brandsp, html body.page .sc-brandsp *,
html body.page .sc-contact, html body.page .sc-contact *,
html body.page .sc-contact__info, html body.page .sc-contact__info *,
html body.page .sc-contact__form, html body.page .sc-contact__form * {
  color: #07141a !important;
}
/* But exceptions: HERO sections on page templates have dark bg = white text */
html body.page .sc-about-hero, html body.page .sc-about-hero *,
html body.page .sc-contact-hero, html body.page .sc-contact-hero * {
  color: #ffffff !important;
}
html body.page .sc-about-hero__eyebrow span:last-child,
html body.page .sc-contact-hero__eyebrow,
html body.page .sc-contact-hero__eyebrow * {
  color: #309dc6 !important;
}
/* Cyan accents stay cyan */
html body.page .sc-eyebrow-uni,
html body.page [class*="__eyebrow"] span:last-child,
html body.page .sc-contact__item-label,
html body.page .sc-shipping__eyebrow span:last-child,
html body.page .sc-legal__eyebrow span:last-child,
html body.page .sc-brandsp__eyebrow span:last-child {
  color: #309dc6 !important;
}
/* Cards on light bg have white internal bg */
html body.page .sc-about-card,
html body.page .sc-shipping__card,
html body.page .sc-brandsp__card,
html body.page .sc-contact__info,
html body.page .sc-contact__form {
  background: #ffffff !important;
}
html body.page .sc-about-card h3, html body.page .sc-brandsp__name,
html body.page .sc-shipping__card h2 {
  color: #07141a !important;
}
html body.page .sc-about-card p, html body.page .sc-brandsp__desc,
html body.page .sc-shipping__card li, html body.page .sc-legal p,
html body.page .sc-legal li {
  color: #07141a !important;
}



/* ============================================================
   Kill the modal blur (Milano's tingle.modal adds blur(12px))
   ============================================================ */
.tingle-modal,
.tingle-modal--visible,
.tingle-modal[aria-hidden="false"],
body .tingle-modal,
html .tingle-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
/* Also when cart drawer is open the body shouldn't get any blur */
body, body.has-overlay, body.cart-open, body.minicart-open, body.modal-open,
body.tingle-enabled--noOverflow, body.bls__drawer-open {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* And the main content shouldn't get blur from any source */
main, .main, .main-content, #MainContent {
  filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   SIDE CART CLEANUP - hide shipping calculator + terms checkbox inside drawer
   (both still apply at /cart and /checkout; the side drawer stays focused)
   ========================================================================== */
.minicart__wrapper shipping-calculator,
.minicart__wrapper .shipping-calculator,
.minicart__wrapper .cart-shipping-calculator,
.minicart__wrapper [class*="shipping-estimator"],
.minicart__wrapper .estimate-shipping,
.minicart__wrapper terms-conditions,
.minicart__wrapper .terms-conditions,
.minicart__wrapper .term-and-condition {
  display: none !important;
}

/* Make sure the checkout button is never disabled by a hidden terms checkbox */
.minicart__wrapper .cart-checkout-button,
.minicart__wrapper button[name="checkout"],
.minicart__wrapper .btn-checkout {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.minicart__wrapper .cart-checkout-button[disabled],
.minicart__wrapper button[name="checkout"][disabled],
.minicart__wrapper .btn-checkout[disabled] {
  pointer-events: none;
  opacity: .6;
}

/* Tighten footer of drawer */
.minicart__wrapper .minicart__footer,
.minicart__wrapper .cart-footer {
  padding: 20px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #e9ecef !important;
}
.minicart__wrapper .minicart__footer .flex,
.minicart__wrapper .cart-footer .flex {
  align-items: center !important;
}

/* Recommendations heading inside drawer - polish */
.minicart__wrapper .recommend-heading h4,
.minicart__wrapper minicart-recommendations-heading h4,
.minicart__wrapper .cart-recommend h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #07141a !important;
  margin: 0 0 12px 0 !important;
}

/* ==========================================================================
   SIDE CART — VISIBILITY SAFEGUARDS (force-show controls)
   The drawer ships with qty +/- buttons, price, remove link, view-cart link
   and checkout button. Earlier grid rules were hiding some of them.
   This is a defensive override that guarantees every interactive piece
   is rendered visibly regardless of theme markup quirks.
   ========================================================================== */
.minicart__wrapper .cart-item *,
.minicart__wrapper .minicart__footer *,
.minicart__wrapper [class*="totals"] *,
.minicart__wrapper [class*="subtotal"] * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Loosen the strict 2-column grid so prices/qty/remove can flow */
.minicart__wrapper .cart-item {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.minicart__wrapper .cart-item .minicart__product__image,
.minicart__wrapper .cart-item > a:first-child {
  flex: 0 0 80px !important;
}
.minicart__wrapper .cart-item > *:not(.minicart__product__image):not(a:first-child) {
  flex: 1 1 calc(100% - 100px) !important;
  min-width: 0 !important;
}

/* Make sure the price, quantity controls and remove button are visible */
.minicart__wrapper .cart-item .price,
.minicart__wrapper .cart-item .money,
.minicart__wrapper .cart-item [class*="price"],
.minicart__wrapper .cart-item [class*="quantity"],
.minicart__wrapper .cart-item .cart-remove-button,
.minicart__wrapper .cart-item a[href*="quantity=0"],
.minicart__wrapper .cart-item [class*="remove"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Checkout button - always visible, full width, yellow CTA */
.minicart__wrapper .cart__checkout-button,
.minicart__wrapper button[name="checkout"],
.minicart__wrapper [class*="checkout-button"],
.minicart__wrapper [class*="btn-checkout"] {
  display: block !important;
  width: 100% !important;
  background: #fff500 !important;
  color: #07141a !important;
  font-family: var(--sc-font, inherit) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 4px !important;
  margin-top: 10px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.minicart__wrapper .cart__checkout-button[disabled] {
  pointer-events: none;
  opacity: .55 !important;
}

/* "Bekijk winkelwagen" secondary link */
.minicart__wrapper a[href="/cart"]:not(.cart__checkout-button) {
  display: block !important;
  text-align: center !important;
  padding: 12px 18px !important;
  background: transparent !important;
  color: #07141a !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  font-family: var(--sc-font, inherit) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
  margin-top: 8px !important;
}

/* ==========================================================================
   KILL ALL OVERLAY BLUR/FILTER on the page background when drawer open
   ========================================================================== */
body.minicart-open,
body.cart-drawer-open,
body:has(.minicart__wrapper:not(.invisible)),
body:has(.cart-drawer.is-active) {
  overflow: hidden;
}
body.minicart-open main, body.cart-drawer-open main,
body:has(.minicart__wrapper:not(.invisible)) main,
body:has(.cart-drawer.is-active) main,
body.minicart-open header, body.cart-drawer-open header,
body:has(.minicart__wrapper:not(.invisible)) header,
body:has(.cart-drawer.is-active) header,
body.minicart-open footer, body.cart-drawer-open footer,
body:has(.minicart__wrapper:not(.invisible)) footer,
body:has(.cart-drawer.is-active) footer {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.tingle-modal, .tingle-modal__overlay, .tingle-modal-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* ==========================================================================
   COLLECTION FILTERS — fix euro symbol overlap + tighten price inputs
   ========================================================================== */
.filter-price .field { position: relative; }
.filter-price .field-currency {
  position: absolute !important;
  left: 10px !important;
  top: 0 !important;
  bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: none !important;
  font-size: 14px !important;
  color: #07141a !important;
  z-index: 2 !important;
}
.filter-price input.min-price-range,
.filter-price input.max-price-range {
  padding-left: 26px !important;
  padding-right: 10px !important;
  height: 40px !important;
  font-size: 13px !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.filter-price .price-range {
  gap: 8px !important;
  align-items: center !important;
}
.filter-price .price-range svg { flex: 0 0 10px; }

/* Price label below slider */
.filter-price .price-lable {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: #07141a !important;
  font-weight: 600 !important;
}
.filter-price .price-lable .label {
  font-weight: 700 !important;
}
.filter-price .price-lable .price {
  white-space: nowrap !important;
}

/* ==========================================================================
   HOTFIX BATCH — header nav, sort dropdown, € overlap (high specificity)
   ========================================================================== */

/* 1) Collection/product/cart/etc header nav links FORCE white & readable */
html body:not(.template-index) header.header a,
html body:not(.template-index) header.header nav a,
html body:not(.template-index) header.header .header__menu a,
html body:not(.template-index) header.header .header__menu-item,
html body:not(.template-index) header.header .nav-item a,
html body:not(.template-index) #header-sticky a,
html body:not(.template-index) #header-sticky nav a,
html body:not(.template-index) .header__inner a,
html body:not(.template-index) .header__inner nav a {
  color: #ffffff !important;
}
html body:not(.template-index) header.header a:hover,
html body:not(.template-index) header.header nav a:hover {
  color: #309dc6 !important;
}
html body:not(.template-index) header.header svg,
html body:not(.template-index) header.header path,
html body:not(.template-index) header.header .icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor !important;
}

/* 2) Sort dropdown / sort menu must be light bg + dark text */
sort-by, .sort-by, .collection-sort, .sort__select,
collection-popout, .popout-list, .popout__list,
sort-list, .sort-list, .sort-menu,
.sort-by .popout-menu, .sort-by .popout,
.collection-toolbar__sort, .toolbar__sort,
[id*="sort"] .popout-menu, [id*="sort"] .popout-list {
  background: #ffffff !important;
  color: #07141a !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 8px 24px rgba(7,20,26,.08) !important;
}
sort-by *, .sort-by *, .collection-sort *,
collection-popout *, .popout-list *, .popout__list *,
.sort-list *, .sort-menu *,
[id*="sort"] .popout-menu *, [id*="sort"] .popout-list * {
  background: transparent !important;
  color: #07141a !important;
}
sort-by a, .sort-by a, .collection-sort a,
sort-by button, .sort-by button, .collection-sort button,
sort-by label, .sort-by label, .collection-sort label,
.sort-list a, .sort-list button, .sort-list label,
.popout-list a, .popout-list button, .popout-list label {
  color: #07141a !important;
  background: transparent !important;
}
sort-by a:hover, .sort-by a:hover,
.sort-list a:hover, .popout-list a:hover,
.popout-list label:hover {
  background: #f9f9fb !important;
  color: #07141a !important;
}

/* 3) Price-filter € overlap — kill via higher specificity */
html body .filter-price .field {
  position: relative !important;
  display: block !important;
}
html body .filter-price .field-currency,
html body .filter-price .field > .field-currency {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  font-size: 13px !important;
  color: #07141a !important;
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
html body .filter-price input.min-price-range,
html body .filter-price input.max-price-range,
html body .filter-price .field input[type="text"] {
  padding: 0 10px 0 22px !important;
  height: 38px !important;
  width: 100% !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #07141a !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  /* override the inline --input-padding variable Milano uses */
  --input-padding: 0 10px 0 22px !important;
  --input-height: 38px !important;
}

/* ==========================================================================
   KLANTENSERVICE OPEN/DICHT INDICATOR — green ma-vr 9-17, grey otherwise
   (driven by JS in theme.liquid setting .sc-klant-open / .sc-klant-closed)
   ========================================================================== */
html.sc-klant-open .sc-usptop__phone span {
  background: #34d17e !important;
  box-shadow: 0 0 0 2px rgba(52,209,126,.25) !important;
}
html.sc-klant-closed .sc-usptop__phone span {
  background: #9aa5b1 !important;
  box-shadow: 0 0 0 2px rgba(154,165,177,.22) !important;
}
/* Until JS runs, treat as closed (safe default) */
html:not(.sc-klant-open):not(.sc-klant-closed) .sc-usptop__phone span {
  background: #9aa5b1 !important;
  box-shadow: 0 0 0 2px rgba(154,165,177,.22) !important;
}

/* ==========================================================================
   SIDE CART DRAWER — minimal clean layer (all heavy overrides removed)
   Lets Milano's native drawer styling work; only adjusts width + checkout CTA
   ========================================================================== */
.minicart__wrapper,
.minicart__wrapper.bls__drawer,
.cart-drawer,
.cart-drawer.bls__drawer,
#header__minicart .minicart__wrapper {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 100vw !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 600px) {
  .minicart__wrapper,
  .minicart__wrapper.bls__drawer,
  .cart-drawer { width: 100vw !important; min-width: 100vw !important; }
}

/* Empty cart state — visible & centered */
.minicart__wrapper .cart-empty,
.minicart__wrapper .cart-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 50px 30px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}
.minicart__wrapper .cart-empty h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 20px 0 12px !important;
  color: #07141a !important;
}
.minicart__wrapper .cart-empty p,
.minicart__wrapper .cart-empty .empty {
  font-size: 14px !important;
  color: #07141a !important;
  margin: 0 0 24px !important;
  max-width: 320px !important;
}
.minicart__wrapper .cart-empty .btn-primary,
.minicart__wrapper .cart-empty button.minicart-action {
  display: inline-block !important;
  background: #fff500 !important;
  color: #07141a !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
  padding: 12px 24px !important;
  border: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
.minicart__wrapper .cart-empty svg {
  width: 60px !important;
  height: 70px !important;
  opacity: .4 !important;
}

/* Subtle background dim when drawer open — NOT wazig */
body:has(.minicart__wrapper:not(.invisible))::before,
body:has(.cart-drawer.is-active)::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(7,20,26,.20);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9998;
  pointer-events: none;
}
/* Kill all backdrop blur everywhere when drawer is open */
.tingle-modal, .tingle-modal__overlay, .tingle-modal-box,
body:has(.minicart__wrapper:not(.invisible)) main,
body:has(.minicart__wrapper:not(.invisible)) header,
body:has(.minicart__wrapper:not(.invisible)) footer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Cart icon (trigger) must stay inline-visible in the header */
.minicart, #cart-icon-bubble, #header__minicart {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Drawer header (Winkelwagen + close) — dark band */
.minicart__wrapper .minicart__header {
  background: #07141a !important;
  color: #ffffff !important;
}
.minicart__wrapper .minicart__header *,
.minicart__wrapper .minicart__header svg,
.minicart__wrapper .minicart__header path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Afrekenen — yellow CTA, never disabled by hidden terms */
.minicart__wrapper .btn-checkout,
.minicart__wrapper button[name="checkout"],
.minicart__wrapper .cart__checkout-button {
  background: #fff500 !important;
  color: #07141a !important;
  font-weight: 800 !important;
  border: 0 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.minicart__wrapper .btn-checkout:hover { background: #ffd900 !important; }

/* ==========================================================================
   SORTEER DROPDOWN — exact Milano classes (collection-toolbar)
   ========================================================================== */
html body .toolbar-sorter .select-custom__content,
html body .toolbar-sorter .facet-filters__sort,
html body .select-custom__content.facet-filters__sort,
html body select-sorter ~ .select-custom__content,
html body .select-custom .select-custom__content {
  background: #ffffff !important;
  color: #07141a !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 8px 24px rgba(7,20,26,.10) !important;
}
html body .toolbar-sorter .select-custom__content *,
html body .toolbar-sorter .facet-filters__sort *,
html body .select-custom__content.facet-filters__sort * {
  background: transparent !important;
  color: #07141a !important;
}
html body .toolbar-sorter .select-custom__content a,
html body .toolbar-sorter .select-custom__content button,
html body .toolbar-sorter .select-custom__content label,
html body .facet-filters__sort a,
html body .facet-filters__sort label {
  color: #07141a !important;
  background: transparent !important;
}
html body .toolbar-sorter .select-custom__content a:hover,
html body .toolbar-sorter .select-custom__content label:hover,
html body .facet-filters__sort a:hover,
html body .facet-filters__sort label:hover {
  background: #f3f5f8 !important;
  color: #07141a !important;
}

/* Selected sort option highlight */
html body .toolbar-sorter .select-custom__content .active,
html body .toolbar-sorter .select-custom__content [aria-selected="true"],
html body .facet-filters__sort .active {
  color: #309dc6 !important;
  font-weight: 700 !important;
}

/* The visible button itself (collapsed) — keep readable too */
html body .toolbar-sorter .select-selected,
html body .toolbar-sorter .select-selected label {
  color: #07141a !important;
  background: #ffffff !important;
  border-color: #cdd9e3 !important;
}

/* ==========================================================================
   DRAWER BODY WHITENING — force ALL child sections to white-on-dark
   (fixes dark navy bleeding from --sc-surface var into product/upsell areas)
   ========================================================================== */
.minicart__wrapper > *:not(.minicart__header),
.minicart__wrapper #minicart-form,
.minicart__wrapper .minicart-form,
.minicart__wrapper .minicart-body,
.minicart__wrapper .items,
.minicart__wrapper .cart-item,
.minicart__wrapper .cart-recommend,
.minicart__wrapper minicart-recommendations,
.minicart__wrapper minicart-recommendations-beside,
.minicart__wrapper .cart-addons,
.minicart__wrapper .minicart__footer,
.minicart__wrapper [class*="minicart-recommend"] {
  background: #ffffff !important;
  color: #07141a !important;
}

/* All text in drawer body must be dark on white */
.minicart__wrapper #minicart-form *,
.minicart__wrapper .minicart-body *,
.minicart__wrapper .cart-item *,
.minicart__wrapper .cart-recommend *,
.minicart__wrapper .cart-addons *,
.minicart__wrapper .minicart__footer * {
  color: #07141a !important;
}

/* Product title in drawer — must be dark */
.minicart__wrapper .minicart__product-name,
.minicart__wrapper .minicart__product-name a,
.minicart__wrapper .cart-item h3,
.minicart__wrapper .cart-item h4 {
  color: #07141a !important;
}

/* Price in drawer */
.minicart__wrapper .minicart__item-price,
.minicart__wrapper .cart-item .price {
  color: #07141a !important;
  font-weight: 700 !important;
}

/* "Aanbevolen voor jou" heading */
.minicart__wrapper .minicart-heading,
.minicart__wrapper .cart-recommend h4 {
  color: #07141a !important;
}

/* Header (Winkelwagen + close) must STAY dark */
.minicart__wrapper .minicart__header,
.minicart__wrapper .minicart__header * {
  background: #07141a !important;
  color: #ffffff !important;
}
.minicart__wrapper .minicart__header svg,
.minicart__wrapper .minicart__header path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Footer Bekijk winkelwagen link — was vertically squished */
.minicart__wrapper .viewcart,
.minicart__wrapper a[href="/cart"],
.minicart__wrapper a.action.viewcart,
.minicart__wrapper a.btn-outline {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding: 11px 18px !important;
  background: transparent !important;
  color: #07141a !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  writing-mode: horizontal-tb !important;
}

/* Footer container — vertical stack with proper padding */
.minicart__wrapper .minicart__footer {
  padding: 18px 24px 22px !important;
  border-top: 1px solid #e6e9ee !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Subtotaal row */
.minicart__wrapper .minicart__footer .totals,
.minicart__wrapper .minicart-subtotal,
.minicart__wrapper .minicart__subtotal {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 0 0 12px !important;
}
.minicart__wrapper .minicart-subtotal-label,
.minicart__wrapper [class*="subtotal"] h5 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #07141a !important;
}
.minicart__wrapper .minicart-subtotal-price,
.minicart__wrapper [class*="subtotal-value"] {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #07141a !important;
}

/* ==========================================================================
   DRAWER OPEN — fix 3 remaining issues
   1) Hide cart-count badge so it doesn't float over drawer header
   2) Force upsell/recommendations section to white
   3) Make product name visible in cart-item
   ========================================================================== */

/* 1) Hide cart-icon badge when drawer is open */
body:has(.minicart__wrapper:not(.invisible)) .cart-count,
body:has(.minicart__wrapper:not(.invisible)) .cart-bubble__counter,
body:has(.minicart__wrapper:not(.invisible)) #cart-icon-bubble .cart-count,
body:has(.minicart__wrapper:not(.invisible)) .minicart__action .cart-count,
body:has(.minicart__wrapper:not(.invisible)) h-count {
  display: none !important;
  visibility: hidden !important;
}
/* Also push the cart icon itself below drawer z-index when drawer open */
body:has(.minicart__wrapper:not(.invisible)) .minicart,
body:has(.minicart__wrapper:not(.invisible)) #cart-icon-bubble,
body:has(.minicart__wrapper:not(.invisible)) #header__minicart {
  z-index: 1 !important;
}

/* 2) Upsell/recommendations container — white bg, not navy */
.minicart__wrapper .cart-recommend,
.minicart__wrapper minicart-recommendations,
.minicart__wrapper minicart-recommendations-beside,
.minicart__wrapper .swiper-cart-upsell,
.minicart__wrapper slide-section,
.minicart__wrapper .swiper-wrapper,
.minicart__wrapper .swiper-slide,
.minicart__wrapper [class*="recommend"],
.minicart__wrapper [class*="upsell"],
.minicart__wrapper .gradient,
.minicart__wrapper .color-default {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #07141a !important;
}
.minicart__wrapper .cart-recommend *,
.minicart__wrapper minicart-recommendations *,
.minicart__wrapper [class*="recommend"] *,
.minicart__wrapper [class*="upsell"] * {
  background-color: transparent !important;
  color: #07141a !important;
}

/* 3) Product name in cart-item must be visible */
.minicart__wrapper .cart-item .minicart__product-name,
.minicart__wrapper .cart-item .minicart__product-name a,
.minicart__wrapper .cart-item .minicart__product-info h3,
.minicart__wrapper .cart-item .minicart__product-info a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #07141a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  margin: 0 0 4px !important;
}
.minicart__wrapper .cart-item .minicart__product-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The dark navy band that sometimes appears at end of upsell — also kill */
.minicart__wrapper .border-top,
.minicart__wrapper [class*="border-top"] {
  background: #ffffff !important;
}

/* HARD-FORCE dark text on product name in drawer (max specificity) */
html body .minicart__wrapper .cart-item .minicart__product-name,
html body .minicart__wrapper .cart-item .minicart__product-name a,
html body .minicart__wrapper .cart-item .minicart__product-name span,
html body .minicart__wrapper .cart-item h3,
html body .minicart__wrapper .cart-item h3 a,
html body .minicart__wrapper .cart-item h4,
html body .minicart__wrapper .cart-item h4 a {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* ==========================================================================
   REMOVE × — position top-right of cart item (clean standard pattern)
   ========================================================================== */
.minicart__wrapper .cart-item {
  position: relative !important;
}
.minicart__wrapper .cart-item mini-cart-remove-button,
.minicart__wrapper .cart-item .minicart__item-remove,
.minicart__wrapper .cart-item .minicart__bottom {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
.minicart__wrapper .cart-item mini-cart-remove-button .cart-remove,
.minicart__wrapper .cart-item .cart-remove,
.minicart__wrapper .cart-item a[href*="quantity=0"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  background: #ffffff !important;
  border: 1px solid #e6e9ee !important;
  border-radius: 50% !important;
  color: #07141a !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
}
.minicart__wrapper .cart-item mini-cart-remove-button .cart-remove:hover,
.minicart__wrapper .cart-item .cart-remove:hover {
  background: #fff1f1 !important;
  border-color: #f2c2c2 !important;
  color: #e23131 !important;
}
.minicart__wrapper .cart-item mini-cart-remove-button svg,
.minicart__wrapper .cart-item .cart-remove svg {
  width: 11px !important;
  height: 11px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}
/* Hide the edit pencil icon — not needed in side cart */
.minicart__wrapper .cart-item minicart-item-edit,
.minicart__wrapper .cart-item .minicart__item-edit {
  display: none !important;
}

/* Make space on the right inside info column so name doesn't run under × */
.minicart__wrapper .cart-item .minicart__product-info {
  padding-right: 32px !important;
}

/* ==========================================================================
   NUCLEAR — kill ALL dark backgrounds inside drawer body
   (the dark "lege balk" was a Milano gradient/divider element)
   ========================================================================== */
.minicart__wrapper *:not(.minicart__header):not(.minicart__header *):not(.btn-checkout):not(.cart__checkout-button):not(button[name="checkout"]) {
  background-color: transparent !important;
  background-image: none !important;
}
/* Then make the drawer wrapper itself white as the base */
.minicart__wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* Header keeps dark */
.minicart__wrapper .minicart__header,
.minicart__wrapper .minicart__header > * {
  background-color: #07141a !important;
  background-image: none !important;
}
/* Afrekenen keeps yellow */
.minicart__wrapper .btn-checkout,
.minicart__wrapper .cart__checkout-button,
.minicart__wrapper button[name="checkout"] {
  background-color: #fff500 !important;
  background-image: none !important;
}

/* Stronger badge hide */
html body:has(.minicart__wrapper:not(.invisible)) h-count,
html body:has(.minicart__wrapper:not(.invisible)) .cart-count,
html body:has(.minicart__wrapper:not(.invisible)) [class*="cart-count"],
html body:has(.minicart__wrapper:not(.invisible)) [class*="bubble"]:not(.minicart__wrapper *) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove the "(1)" cart-count badge in drawer header — redundant info */
.minicart__wrapper .cart-count-drawer,
.minicart__wrapper .cart-count.cart-count-drawer,
.cart-count-drawer {
  display: none !important;
}

/* Remove the always-rendered empty error placeholder in cart-item */
.minicart__wrapper .cart-item__error,
.minicart__wrapper [id*="CartDrawer-LineItemError"],
.minicart__wrapper .cart-item .cart-item__error {
  display: none !important;
}

/* Hide empty cart-summary / cart-discounts placeholder when no discounts */
.minicart__wrapper .cart-summary:has(.cart-discounts:empty),
.minicart__wrapper .cart-summary:has(ul.cart-discounts li:nth-child(0)),
.minicart__wrapper [data-cart-summary]:not(:has(li)),
.minicart__wrapper .cart-discounts:empty,
.minicart__wrapper ul.cart-discounts:not(:has(li)) {
  display: none !important;
}
/* Fallback: kill any empty UL inside drawer */
.minicart__wrapper ul:empty,
.minicart__wrapper [data-discounts-list]:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   HEADER MUST STAY DARK — explicit override after nuclear bg-transparent
   ========================================================================== */
html body .minicart__wrapper .minicart__header,
html body .minicart__wrapper div.minicart__header,
html body .minicart__wrapper > .minicart__header {
  background-color: #07141a !important;
  background-image: none !important;
  color: #ffffff !important;
}
html body .minicart__wrapper .minicart__header .minicart-heading,
html body .minicart__wrapper .minicart__header .h5,
html body .minicart__wrapper .minicart__header * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .minicart__wrapper .minicart__header svg,
html body .minicart__wrapper .minicart__header path,
html body .minicart__wrapper .minicart__header use,
html body .minicart__wrapper .minicart__header .close-cart-button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor !important;
}
html body .minicart__wrapper .minicart__header .close-cart-button {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  padding: 6px !important;
}
html body .minicart__wrapper .minicart__header .close-cart-button:hover {
  opacity: .7 !important;
}

/* ==========================================================================
   "AANBEVOLEN VOOR JOU" — hide entire block when no recommendations
   (Shopify Recommendations API populates .swiper-wrapper async;
    if it ends up with no .swiper-slide children, the block stays empty
    and we hide it entirely instead of showing a lonely heading)
   ========================================================================== */
.minicart__wrapper .cart-recommend:not(:has(.swiper-slide)),
.minicart__wrapper .cart-recommend:has(.swiper-wrapper:empty),
.minicart__wrapper minicart-recommendations:not(:has(.swiper-slide)),
.minicart__wrapper minicart-recommendations-beside:not(:has(.swiper-slide)) {
  display: none !important;
}
/* Also hide if it has the "hidden-recommend" or "hidden" class Milano adds when empty */
.minicart__wrapper .cart-recommend.hidden-recommend,
.minicart__wrapper .cart-recommend.hidden,
.minicart__wrapper .hidden-recommend {
  display: none !important;
}

/* ==========================================================================
   HEADER MAIN MENU — force white text on ALL pages
   Targets the exact menu-item structure: heading-style links + spans
   ========================================================================== */
html body header.header menu-item a,
html body header.header menu-item a span,
html body header.header .horizontal-list > li > menu-item a,
html body header.header .horizontal-list > li > menu-item a span,
html body header.header .horizontal-list > li.level0 > menu-item a,
html body header.header .horizontal-list > li.level0 > menu-item a span,
html body header.header .horizontal-list a.heading-style,
html body header.header .horizontal-list a.heading-style span,
html body header.header .horizontal-list .menu-parent > menu-item > a,
html body header.header .horizontal-list .menu-parent > menu-item > a span,
html body #header-sticky menu-item a,
html body #header-sticky menu-item a span,
html body .header__inner menu-item a,
html body .header__inner menu-item a span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Caret/arrow icons inside the menu items */
html body header.header menu-item svg,
html body header.header menu-item path,
html body header.header menu-item use,
html body header.header open-children-toggle svg,
html body header.header open-children-toggle path {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor !important;
}

/* Hover state for menu items */
html body header.header menu-item a:hover,
html body header.header menu-item a:hover span,
html body header.header .horizontal-list a:hover,
html body header.header .horizontal-list a:hover span {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}

/* Submenu (dropdown) panel — stays light bg with dark text (already inside white popout) */
html body header.header .submenu {
  background: #ffffff !important;
}
html body header.header .submenu a,
html body header.header .submenu a span,
html body header.header .subchildmenu a,
html body header.header .subchildmenu a span,
html body header.header .menu_item-link,
html body header.header .menu_item-link span {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body header.header .submenu a:hover,
html body header.header .subchildmenu a:hover {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}

/* ==========================================================================
   STICKY ADD-TO-CART BAR — light background instead of dark navy
   (the bar that appears with mini product preview + qty + In winkelwagen)
   ========================================================================== */
.sticky__item-info,
[class*="sticky__item-info"],
.product-sticky,
.product-sticky-bar,
sticky-header-product,
.sticky-product-form {
  background: #ffffff !important;
  color: #07141a !important;
}
.sticky__item-info .product-item,
.sticky__item-info .product-item__wrapper,
.sticky__item-info .product-item__information,
.sticky__item-info .product-detail__variant-picker,
.sticky__item-info .product-detail__buy-buttons,
.sticky__item-info .product-item__wrapper.color-default {
  background: #ffffff !important;
  color: #07141a !important;
}
/* Parent flex container that wraps the sticky add-to-cart bar */
.sticky__item-info,
.sticky__item-info > div,
.sticky__item-info .flex.gap-15.justify-between.align-center {
  background: #ffffff !important;
}

/* Product name in sticky bar — dark */
.sticky__item-info .product-item__name,
.sticky__item-info .product-item__name * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Variant picker / price option text */
.sticky__item-info .product-detail__variant-picker,
.sticky__item-info variant-radios-sticky,
.sticky__item-info select,
.sticky__item-info option {
  color: #07141a !important;
  background: #ffffff !important;
}

/* Quantity input field */
.sticky__item-info .quantity,
.sticky__item-info quantity-input,
.sticky__item-info .quantity-input,
.sticky__item-info .quantity__button {
  background: #ffffff !important;
  color: #07141a !important;
  border-color: #cdd9e3 !important;
}
.sticky__item-info .quantity__button {
  background: #f9f9fb !important;
}
.sticky__item-info .quantity__button svg {
  color: #07141a !important;
  fill: currentColor !important;
}

/* "In winkelwagen" button stays yellow as the main CTA */
.sticky__item-info .product_submit_button,
.sticky__item-info .product-form__submit,
.sticky__item-info button[name="add"] {
  background: #fff500 !important;
  color: #07141a !important;
  font-weight: 800 !important;
  border: 0 !important;
}
.sticky__item-info .product_submit_button:hover {
  background: #ffd900 !important;
}
.sticky__item-info .product_submit_button span,
.sticky__item-info .btn-label {
  color: #07141a !important;
}

/* Border top to separate sticky bar from page content */
.sticky__item-info {
  border-top: 1px solid #e6e9ee !important;
  box-shadow: 0 -4px 16px rgba(7,20,26,.06) !important;
}

/* Sticky-add-cart container — outer element with color-default class */
html body sticky-add-cart,
html body sticky-add-cart.color-default,
html body sticky-add-cart.show-sticky-cart,
html body sticky-add-cart > .fluid_container,
html body sticky-add-cart .fluid_container > .flex {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #07141a !important;
}
html body sticky-add-cart * {
  color: #07141a !important;
}
/* Yellow CTA stays yellow */
html body sticky-add-cart button[name="add"],
html body sticky-add-cart .product_submit_button,
html body sticky-add-cart .product_submit_button span,
html body sticky-add-cart .btn-label {
  background: #fff500 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body sticky-add-cart button[name="add"] {
  border: 0 !important;
  font-weight: 800 !important;
}
/* Top border + shadow */
html body sticky-add-cart {
  border-top: 1px solid #e6e9ee !important;
  box-shadow: 0 -4px 16px rgba(7,20,26,.08) !important;
}

/* Sticky bar — price more prominent + qty borders clearer */
html body sticky-add-cart variant-radios-sticky,
html body sticky-add-cart .product-detail__variant-picker {
  display: inline-flex !important;
  align-items: center !important;
}
html body sticky-add-cart select,
html body sticky-add-cart variant-radios-sticky select {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #07141a !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 6px 0 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  min-width: 100px !important;
}
html body sticky-add-cart select option {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #07141a !important;
  background: #ffffff !important;
}

/* Qty selector — clear border, slightly larger */
html body sticky-add-cart quantity-input.quantity,
html body sticky-add-cart .product-form__quantity quantity-input {
  border: 1.5px solid #07141a !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  height: 44px !important;
}
html body sticky-add-cart quantity-input .quantity__button {
  background: #f3f5f8 !important;
  color: #07141a !important;
  border: 0 !important;
  width: 42px !important;
  height: 42px !important;
}
html body sticky-add-cart quantity-input .quantity__button:hover {
  background: #e6e9ee !important;
}
html body sticky-add-cart quantity-input .quantity-input {
  background: #ffffff !important;
  color: #07141a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: 0 !important;
  border-left: 1px solid #cdd9e3 !important;
  border-right: 1px solid #cdd9e3 !important;
  width: 50px !important;
  text-align: center !important;
}
html body sticky-add-cart quantity-input .quantity__button svg path {
  fill: #07141a !important;
}

/* Remove stray lines/borders in sticky bar */
html body sticky-add-cart {
  border-top: 0 !important;
  border: 0 !important;
}
html body sticky-add-cart .sticky__item-info,
html body sticky-add-cart .product-detail__variant-picker,
html body sticky-add-cart .product-detail__buy-buttons,
html body sticky-add-cart .product-form__buttons,
html body sticky-add-cart .product__submit-form,
html body sticky-add-cart .product__submit-form-cart,
html body sticky-add-cart product-form,
html body sticky-add-cart .feature-product-form,
html body sticky-add-cart .product-form,
html body sticky-add-cart .button_buy-now {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* keep only the qty selector border + the shadow above the whole sticky bar */
html body sticky-add-cart {
  box-shadow: 0 -4px 16px rgba(7,20,26,.08) !important;
}
html body sticky-add-cart quantity-input.quantity {
  border: 1.5px solid #07141a !important;
}

/* ==========================================================================
   OVER ONS PAGINA — force text colors per section bg
   ========================================================================== */
/* Hero section has dark gradient bg → white text */
html body .sc-about-hero,
html body .sc-about-hero__wrap {
  background: radial-gradient(800px 500px at 80% 0%, rgba(48,157,198,.18), transparent 60%), #07141a !important;
}
html body .sc-about-hero h1,
html body .sc-about-hero p,
html body .sc-about-hero * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sc-about-hero .sc-about-hero__eyebrow span:last-child {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}

/* Stats section bg light → dark text */
html body .sc-about-stats,
html body .sc-about-stats * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Cards section bg light → dark text on each card */
html body .sc-about-cards,
html body .sc-about-cards h1,
html body .sc-about-cards h2,
html body .sc-about-cards h3,
html body .sc-about-cards p,
html body .sc-about-card,
html body .sc-about-card h1,
html body .sc-about-card h2,
html body .sc-about-card h3,
html body .sc-about-card p {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .sc-about-card {
  background: #ffffff !important;
}

/* ==========================================================================
   HOMEPAGE BRAND STRIP — partner logos alignment
   ========================================================================== */
html body .sc-brand-strip,
html body .sc-brandsp,
html body .sc-brandsp__row,
html body [class*="brand-strip"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  padding: 36px 24px !important;
}
html body .sc-brand-strip img,
html body .sc-brandsp img,
html body [class*="brand-strip"] img,
html body img[src*="sc-partner"] {
  display: block !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
  transition: opacity .2s ease !important;
}
html body .sc-brand-strip img:hover,
html body .sc-brandsp img:hover {
  opacity: 1 !important;
}
@media (max-width: 768px) {
  html body .sc-brand-strip,
  html body .sc-brandsp {
    gap: 28px !important;
    padding: 24px 16px !important;
  }
  html body .sc-brand-strip img,
  html body .sc-brandsp img {
    max-height: 28px !important;
  }
}

/* ==========================================================================
   PARTNER LOGOS BRAND STRIP — light bg, original colors, fully visible
   (was: white silhouettes on dark navy with opacity .7 — illegible)
   ========================================================================== */
html body .sc-brandstrip {
  background: #f9f9fb !important;
  padding: 44px 0 !important;
  border-top: 1px solid #e6e9ee !important;
  border-bottom: 1px solid #e6e9ee !important;
}
html body .sc-brandstrip__lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sc-brandstrip__logos {
  gap: 56px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
html body .sc-brandstrip__logo {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important; /* tonen logo zonder witte bg-blokken */
  transition: transform .2s ease, opacity .2s ease !important;
}
html body .sc-brandstrip__logo:hover {
  opacity: .8 !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 768px) {
  html body .sc-brandstrip__logos { gap: 32px !important; }
  html body .sc-brandstrip__logo { height: 32px !important; max-width: 120px !important; }
  html body .sc-brandstrip { padding: 28px 0 !important; }
}

/* Brand strip — REVERT to dark bg + white silhouettes (visible) */
html body .sc-brandstrip {
  background: #050f14 !important;
  padding: 44px 0 !important;
  border: 0 !important;
}
html body .sc-brandstrip__lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sc-brandstrip__logo {
  mix-blend-mode: normal !important;
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  object-fit: contain !important;
}
html body .sc-brandstrip__logo:hover {
  opacity: .75 !important;
  transform: none !important;
}

/* Brand strip — LIGHT bg, original logo colors, no filter */
html body .sc-brandstrip {
  background: #ffffff !important;
  padding: 40px 0 !important;
  border-top: 1px solid #e6e9ee !important;
  border-bottom: 1px solid #e6e9ee !important;
}
html body .sc-brandstrip__lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sc-brandstrip__logo {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  height: 40px !important;
  max-width: 140px !important;
  width: auto !important;
  object-fit: contain !important;
}
html body .sc-brandstrip__logo:hover {
  opacity: .7 !important;
}
/* Verberg CRU.jpg (witte rechthoek-bg) en Eyoyo.webp (120×100 te klein) */
html body .sc-brandstrip__logo[src*="sc-partner-cru"],
html body .sc-brandstrip__logo[src*="sc-partner-eyoyo"] {
  display: none !important;
}
/* Cellebrite is extreem wijd — beperk max-width zodat hij niet overheerst */
html body .sc-brandstrip__logo[src*="sc-partner-cellebrite"] {
  max-width: 130px !important;
}

/* FINAL — brand strip dark bg + white silhouettes, 4 logos visible */
html body .sc-brandstrip {
  background: #050f14 !important;
  padding: 44px 0 !important;
  border: 0 !important;
}
html body .sc-brandstrip__lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sc-brandstrip__logo {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  height: 40px !important;
  max-width: 150px !important;
  width: auto !important;
  object-fit: contain !important;
}
html body .sc-brandstrip__logo:hover { opacity: .75 !important; }
html body .sc-brandstrip__logo[src*="sc-partner-cru"],
html body .sc-brandstrip__logo[src*="sc-partner-eyoyo"] {
  display: none !important;
}
html body .sc-brandstrip__logo[src*="sc-partner-cellebrite"] {
  max-width: 130px !important;
}

/* Verberg gele "Voor 15:00 besteld" badge in hero */
html body .sc-hero__badge { display: none !important; }

/* MERKEN page header — force eyebrow + h1 on separate lines + center */
html body .sc-brandsp {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 24px 84px !important;
}
html body .sc-brandsp__eyebrow {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 0 16px !important;
}
html body .sc-brandsp h1 {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 0 16px !important;
}
html body .sc-brandsp__lead {
  display: block !important;
  width: 100% !important;
  margin: 0 0 40px !important;
}

/* OVER ONS — full-width section backgrounds (content boxed via inner wrap) */
.shopify-section:has(.sc-about-hero),
.shopify-section:has(.sc-about-stats),
.shopify-section:has(.sc-about-cards),
.shopify-section:has(.sc-brandsp) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .sc-about-hero,
html body .sc-about-stats,
html body .sc-about-cards,
html body .sc-brandsp {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Inner wrapper takes care of boxing to 1280px */
html body .sc-about-hero__wrap,
html body .sc-about-stats__wrap,
html body .sc-about-cards__wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
}
/* Solid bg colors per section */
html body .sc-about-hero {
  background: radial-gradient(800px 500px at 80% 0%, rgba(48,157,198,.18), transparent 60%), #07141a !important;
}
html body .sc-about-stats {
  background: #f9f9fb !important;
  border-top: 1px solid #e6e9ee !important;
  border-bottom: 1px solid #e6e9ee !important;
}
html body .sc-about-cards {
  background: #ffffff !important;
}

/* Merken page — full-width dark bg */
html body .sc-brandsp {
  background: #07141a !important;
  padding: 60px 0 84px !important;
}
html body .sc-brandsp .sc-brandsp__eyebrow,
html body .sc-brandsp h1,
html body .sc-brandsp .sc-brandsp__lead,
html body .sc-brandsp .sc-brandsp__grid {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* OVER ONS — force ALL ancestor containers full-width so dark hero bg spans edge to edge */
body.template-page main,
body.template-page #MainContent,
body.template-page .page-width,
body.template-page-over-ons main,
body.template-page-over-ons #MainContent,
body.template-page-over-ons .page-width {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.template-page .shopify-section,
body.template-page-over-ons .shopify-section {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Use a deep override for hero specifically */
body .sc-about-hero,
html body .sc-about-hero,
html body main .sc-about-hero,
html body .shopify-section .sc-about-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  background: radial-gradient(800px 500px at 80% 0%, rgba(48,157,198,.18), transparent 60%), #07141a !important;
  padding: 0 !important;
}
html body .sc-about-stats,
html body .sc-about-cards {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
}
html body .sc-about-stats { background: #f9f9fb !important; }
html body .sc-about-cards { background: #ffffff !important; }
/* Inner wrappers stay boxed */
html body .sc-about-hero__wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

/* OVER ONS — undo 100vw trick, use ::before pseudo for full-width bg paint */
html body .sc-about-hero,
html body .sc-about-stats,
html body .sc-about-cards {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
}
/* Full-width bg via ::before pseudo */
html body .sc-about-hero::before,
html body .sc-about-stats::before,
html body .sc-about-cards::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: calc(-50vw + 50%) !important;
  right: calc(-50vw + 50%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
html body .sc-about-hero::before {
  background: radial-gradient(800px 500px at 80% 0%, rgba(48,157,198,.18), transparent 60%), #07141a !important;
}
html body .sc-about-stats::before {
  background: #f9f9fb !important;
  border-top: 1px solid #e6e9ee !important;
  border-bottom: 1px solid #e6e9ee !important;
}
html body .sc-about-cards::before {
  background: #ffffff !important;
}
/* Restore boxed content layout for stats + cards (1280px) */
html body .sc-about-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
  box-sizing: border-box !important;
}
html body .sc-about-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  html body .sc-about-stats { grid-template-columns: repeat(2, 1fr) !important; }
  html body .sc-about-cards { grid-template-columns: 1fr !important; }
}
/* Stats text dark (because bg is light) */
html body .sc-about-stats * { color: #07141a !important; }
/* Cards dark text on white card bg */
html body .sc-about-card {
  background: #ffffff !important;
  border: 1px solid #e6e9ee !important;
  padding: 34px !important;
  color: #07141a !important;
}
html body .sc-about-card * { color: #07141a !important; }

/* Remove decorative ::after pseudo on brand + about cards (didn't read well) */
html body .sc-brandsp__card::after,
html body .sc-about-card::after,
html body .sc-brandsp__card::before {
  display: none !important;
  content: none !important;
}

/* Verberg blauwe diamond voor over-ons card headings */
html body .sc-about-card h3::before,
html body .sc-about-cards h3::before {
  display: none !important;
  content: none !important;
}

/* Header SUBMENU dropdown — donker tekst op witte bg (overrules white-parent rule) */
html body header.header .submenu,
html body header.header div.submenu,
html body header.header .horizontal-list li .submenu {
  background: #ffffff !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 8px 24px rgba(7,20,26,.10) !important;
  padding: 10px 0 !important;
}
html body header.header .submenu a,
html body header.header .submenu a span,
html body header.header .submenu menu-item a,
html body header.header .submenu menu-item a span,
html body header.header .submenu .menu_item-link,
html body header.header .submenu .menu_item-link span,
html body header.header .subchildmenu a,
html body header.header .subchildmenu a span,
html body header.header .subchildmenu menu-item a,
html body header.header .subchildmenu menu-item a span,
html body header.header .submenu li menu-item a,
html body header.header .submenu li menu-item a span,
html body header.header .horizontal-list .submenu menu-item a,
html body header.header .horizontal-list .submenu menu-item a span {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  background: transparent !important;
}
html body header.header .submenu a:hover,
html body header.header .submenu a:hover span,
html body header.header .submenu menu-item a:hover,
html body header.header .submenu menu-item a:hover span,
html body header.header .subchildmenu a:hover,
html body header.header .subchildmenu a:hover span {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}
/* Submenu close button + back-menu also dark text */
html body header.header .submenu .close-menu,
html body header.header .submenu .back-menu,
html body header.header .submenu back-menu,
html body header.header .submenu close-menu {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* ==========================================================================
   GLOBAL H1 — match origineel schippers-it.nl (Centrale Sans 700 / 70px)
   ========================================================================== */
html body h1,
html body .sc-hero h1,
html body .sc-about-hero h1,
html body .sc-brandsp h1,
html body main h1,
html body .shopify-section h1 {
  font-family: var(--sc-font-heading) !important;
  font-weight: 700 !important;
  font-size: 70px !important;
  line-height: 1.08 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
@media (max-width: 900px) {
  html body h1, html body main h1, html body .shopify-section h1 {
    font-size: 44px !important;
  }
}
@media (max-width: 600px) {
  html body h1, html body main h1, html body .shopify-section h1 {
    font-size: 34px !important;
  }
}

/* ==========================================================================
   HOVER COLOR — header + footer links → rgb(48, 157, 198)
   ========================================================================== */
html body header.header a:hover,
html body header.header a:hover span,
html body header.header menu-item a:hover,
html body header.header menu-item a:hover span,
html body header.header .horizontal-list a:hover,
html body header.header .horizontal-list a:hover span,
html body header.header .submenu a:hover,
html body header.header .submenu a:hover span,
html body header.header .subchildmenu a:hover,
html body header.header .subchildmenu a:hover span,
html body #header-sticky a:hover,
html body .header__inner a:hover,
html body .sc-usptop a:hover,
html body .sc-usptop__phone a:hover,
html body footer a:hover,
html body footer a:hover span,
html body .sc-footer a:hover,
html body .sc-footer__col a:hover,
html body .sc-footer__contact a:hover,
html body contentinfo a:hover {
  color: rgb(48, 157, 198) !important;
  -webkit-text-fill-color: rgb(48, 157, 198) !important;
  text-decoration: none !important;
}
/* SVG icons in headers/footer links on hover */
html body header.header a:hover svg,
html body footer a:hover svg {
  color: rgb(48, 157, 198) !important;
  stroke: rgb(48, 157, 198) !important;
  fill: currentColor !important;
}

/* ==========================================================================
   BODY TEXT — weight 500 / size 15px (match Centrale Sans look via Mulish)
   ========================================================================== */
html body,
html body p,
html body span:not(.cart-count):not(.btn-label):not([class*="badge"]),
html body li,
html body a:not(.btn-primary):not(.btn-checkout):not([class*="button"]),
html body div,
html body label {
  font-family: var(--sc-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}
/* Exception: keep headings at their own size + weight 700 */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading-style, html body [class*="heading"],
html body main h1, html body main h2, html body main h3 {
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
html body h2, html body main h2 { font-size: 42px !important; }
html body h3, html body main h3 { font-size: 22px !important; }
html body h4, html body main h4 { font-size: 18px !important; }
html body h5, html body main h5 { font-size: 16px !important; }
@media (max-width: 768px) {
  html body h2, html body main h2 { font-size: 30px !important; }
  html body h3, html body main h3 { font-size: 20px !important; }
}

/* Mono-typografische labels (topbar items, etc.) blijven IBM Plex Mono + smaller */
html body .sc-usptop__item,
html body .sc-usptop__phone,
html body .sc-brandsp__cta,
html body .sc-brandstrip__lead,
html body [class*="eyebrow"] span:last-child,
html body .sc-cats__eyebrow span:last-child {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   SUBMENU TEXT — FINAL OVERRIDE (must win over header white-text rule)
   ========================================================================== */
html body header.header div.submenu .menu_item-link,
html body header.header div.submenu .menu_item-link span,
html body header.header div.submenu .menu_item-link span.smooth-padding-hover,
html body header.header div.submenu menu-item a,
html body header.header div.submenu menu-item a span,
html body header.header div.submenu menu-item a span.smooth-padding-hover,
html body header.header div.submenu ul.subchildmenu li a,
html body header.header div.submenu ul.subchildmenu li a span,
html body header.header div.submenu ul.subchildmenu li menu-item a,
html body header.header div.submenu ul.subchildmenu li menu-item a span,
html body header.header .submenu .subchildmenu .menu_item-link,
html body header.header .submenu .subchildmenu .menu_item-link span,
html body header.header .submenu .subchildmenu .smooth-padding-hover,
html body header.header div.submenu back-menu,
html body header.header div.submenu close-menu {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body header.header div.submenu .menu_item-link:hover,
html body header.header div.submenu .menu_item-link:hover span,
html body header.header div.submenu menu-item a:hover,
html body header.header div.submenu menu-item a:hover span,
html body header.header div.submenu .smooth-padding-hover:hover {
  color: rgb(48, 157, 198) !important;
  -webkit-text-fill-color: rgb(48, 157, 198) !important;
}

/* ==========================================================================
   CART PAGE — icon-box (Have Questions/Secure/Privacy) tekst wit op donker
   ========================================================================== */
html body.template-cart .icon-box,
html body.template-cart .icon-box-item,
html body.template-cart .icon-box-item.grey-bg {
  background: transparent !important;
}
html body.template-cart .icon-box-item,
html body.template-cart .icon-box-content,
html body.template-cart .icon-box-content-heading,
html body.template-cart .icon-box-content-heading.h6,
html body.template-cart .icon-box-content-des,
html body.template-cart .icon-box-content-des p,
html body.template-cart .icon-box-content-des .rich__text-m0,
html body.template-cart .icon-box svg,
html body.template-cart .icon-box svg path,
html body.template-cart .icon-box svg g {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: #ffffff !important;
}
/* Subtle border to delineate cards on the dark bg */
html body.template-cart .icon-box-item {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
html body.template-cart .icon-box-content-des,
html body.template-cart .icon-box-content-des p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   ALL DROPDOWNS — wit bg + donker tekst SITE-WIDE
   ========================================================================== */
/* Header main-menu submenu — bg wit (gradient class verwijdert) */
html body header.header .submenu,
html body header.header div.submenu,
html body header.header div.submenu.gradient,
html body header.header .horizontal-list li .submenu {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 12px 32px rgba(7,20,26,.15) !important;
}
/* Submenu inner divs (mobile back-bar etc) — wit bg */
html body header.header .submenu > div,
html body header.header .submenu .grey-bg {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* Subchildmenu UL — wit bg */
html body header.header .submenu .subchildmenu,
html body header.header .submenu ul {
  background: #ffffff !important;
}
/* Subchildmenu items — wit bg + donker tekst */
html body header.header .submenu li,
html body header.header .submenu .menu-link,
html body header.header .submenu .menu-link.level-1 {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f3f6 !important;
}
html body header.header .submenu li:last-child {
  border-bottom: 0 !important;
}
html body header.header .submenu menu-item,
html body header.header .submenu .menu_item-link,
html body header.header .submenu .menu_item-link span,
html body header.header .submenu .smooth-padding-hover {
  background: transparent !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body header.header .submenu .menu_item-link:hover,
html body header.header .submenu .menu_item-link:hover span,
html body header.header .submenu menu-item:hover .smooth-padding-hover {
  background: #07141a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body header.header .submenu back-menu,
html body header.header .submenu close-menu,
html body header.header .submenu back-menu *,
html body header.header .submenu close-menu * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  stroke: #07141a !important;
}

/* Account/customer dropdown */
html body .customer__details,
html body .customer-popup,
html body .account-dropdown,
html body .header-account-dropdown {
  background: #ffffff !important;
  color: #07141a !important;
  border: 1px solid #e6e9ee !important;
}
html body .customer__details *,
html body .customer-popup *,
html body .account-dropdown * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  background-color: transparent !important;
}

/* Country/currency selectors (Shopify localization) */
html body localization-form details summary,
html body .disclosure__list,
html body .disclosure__list * {
  background: #ffffff !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .disclosure__list {
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 8px 24px rgba(7,20,26,.10) !important;
}

/* Native <select> options open dropdown */
html body select option {
  background: #ffffff !important;
  color: #07141a !important;
}

/* Any popout/popup-list generic */
html body .popout,
html body .popout-list,
html body .popout-menu,
html body .popout__list,
html body custom-popout,
html body collection-popout,
html body color-swatch popup-list {
  background: #ffffff !important;
  color: #07141a !important;
  border: 1px solid #e6e9ee !important;
}
html body .popout *,
html body .popout-list *,
html body .popout-menu *,
html body custom-popout *,
html body collection-popout * {
  background: transparent !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .popout a:hover,
html body .popout-list a:hover,
html body .popout label:hover {
  background: #f3f5f8 !important;
  color: rgb(48,157,198) !important;
  -webkit-text-fill-color: rgb(48,157,198) !important;
}

/* ==========================================================================
   MOBILE HEADER + bottom bar fixes
   ========================================================================== */
@media (max-width: 1024px) {
  /* Logo links + groter */
  html body header.header .header-logo,
  html body header.header .header__logo,
  html body header.header .logo,
  html body header.header h1.header__heading,
  html body header.header [class*="header__logo"] {
    order: -1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    justify-self: flex-start !important;
  }
  html body header.header .header-logo img,
  html body header.header .header__logo img,
  html body header.header .logo img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  /* Header layout: logo links, hamburger + account + cart rechts */
  html body header.header .header__inner,
  html body header.header > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 16px !important;
  }

  /* Hamburger menu knop — forceer zichtbaar */
  html body header.header .btn-menu,
  html body header.header .menu-toggle,
  html body header.header [class*="menu-toggle"],
  html body header.header [class*="btn-menu"],
  html body header.header .header__menu-toggle,
  html body header.header .hamburger,
  html body header.header [aria-label*="menu" i],
  html body header.header [aria-label*="Menu" i],
  html body header.header summary.header__menu,
  html body header.header summary[aria-haspopup="menu"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }
  html body header.header .btn-menu svg,
  html body header.header .menu-toggle svg,
  html body header.header [class*="menu-toggle"] svg,
  html body header.header [class*="btn-menu"] svg,
  html body header.header .hamburger svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: currentColor !important;
    display: block !important;
  }
  /* Desktop nav verbergen op mobiel */
  html body header.header > nav,
  html body header.header .navigation,
  html body header.header .horizontal-list.show-localization {
    display: none !important;
  }

  /* Hide sticky add-to-cart bar op mobiel (onderbalk) */
  html body sticky-add-cart,
  html body sticky-add-cart.show-sticky-cart,
  html body .sticky_mobile--show {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Smaller mobile (≤600) — nog iets kleinere logo + padding */
@media (max-width: 600px) {
  html body header.header .header-logo img,
  html body header.header .header__logo img,
  html body header.header a[href="/"] img {
    height: 42px !important;
    max-height: 42px !important;
  }
  html body header.header .header__inner { padding: 8px 14px !important; }
}

/* ==========================================================================
   COOKIE / PRIVACY BANNER — wit bg + donker tekst (Shopify + common plugins)
   ========================================================================== */
html body shopify-privacy-banner,
html body .shopify-privacy-banner,
html body shopify-privacy-banner *,
html body .shopify-privacy-banner *,
/* Common cookie plugin patterns */
html body #cookie-banner,
html body #cookie-banner *,
html body .cookie-banner,
html body .cookie-banner *,
html body .cookie-consent,
html body .cookie-consent *,
html body #cookie-consent,
html body #cookie-consent *,
html body .cookie-notice,
html body .cookie-notice *,
html body .cookies-notice,
html body .cookies-notice *,
html body [class*="cookie-banner"],
html body [class*="cookie-banner"] *,
html body [class*="cookie-consent"],
html body [class*="cookie-consent"] *,
html body [class*="cookies-notice"],
html body [class*="cookies-notice"] *,
html body [id*="cookie"],
html body [id*="cookie"] *,
html body cookie-banner,
html body cookie-banner *,
html body .cc-window,
html body .cc-window *,
html body #onetrust-banner-sdk,
html body #onetrust-banner-sdk *,
html body #CybotCookiebotDialog,
html body #CybotCookiebotDialog *,
html body .iubenda-cs-content,
html body .iubenda-cs-content * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* Banner container itself — wit bg + subtle shadow */
html body shopify-privacy-banner,
html body .shopify-privacy-banner,
html body #cookie-banner,
html body .cookie-banner,
html body .cookie-consent,
html body #cookie-consent,
html body .cookie-notice,
html body .cookies-notice,
html body [class*="cookie-banner"],
html body [class*="cookie-consent"],
html body cookie-banner,
html body .cc-window {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 -8px 24px rgba(7,20,26,.12) !important;
}
/* Links binnen banner — accent + hover state */
html body shopify-privacy-banner a,
html body .shopify-privacy-banner a,
html body [class*="cookie"] a,
html body cookie-banner a {
  color: rgb(48, 157, 198) !important;
  -webkit-text-fill-color: rgb(48, 157, 198) !important;
  text-decoration: underline !important;
}
html body shopify-privacy-banner a:hover,
html body .shopify-privacy-banner a:hover,
html body [class*="cookie"] a:hover,
html body cookie-banner a:hover {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* Knoppen — primary CTA geel (zoals Afrekenen), secondary outline */
html body shopify-privacy-banner button,
html body .shopify-privacy-banner button,
html body [class*="cookie-banner"] button,
html body [class*="cookie-consent"] button,
html body cookie-banner button,
html body .cc-window button {
  font-family: var(--sc-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 12px !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  border: 1px solid #cdd9e3 !important;
  background: #ffffff !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body shopify-privacy-banner button[class*="primary"],
html body shopify-privacy-banner button[class*="accept"],
html body shopify-privacy-banner [class*="accept-all"],
html body shopify-privacy-banner [class*="accept_all"],
html body .shopify-privacy-banner button[class*="primary"],
html body .shopify-privacy-banner button[class*="accept"],
html body [class*="cookie"] button[class*="accept"],
html body [class*="cookie"] [class*="accept-all"],
html body cookie-banner button[class*="accept"],
html body .cc-allow {
  background: #fff500 !important;
  border-color: #fff500 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Contact page icons — witte outline (waren blauw op donker, slecht zichtbaar) */
html body .sc-contact__item-icon,
html body .sc-contact__item-icon svg,
html body .sc-contact__item-icon svg path,
html body .sc-contact__item-icon svg g,
html body .sc-contact__item-icon svg circle,
html body .sc-contact__item-icon svg line,
html body .sc-contact__item-icon svg rect {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor !important;
}
html body .sc-contact__item-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* CART PAGE — verberg Have Questions/Secure Shopping/Privacy Protection icon-box */
html body.template-cart .icon-box,
html body.template-cart [class*="icon-box"] {
  display: none !important;
}

/* ==========================================================================
   CART PAGE — cart-info sidebar donker bg + witte tekst
   ========================================================================== */
html body.template-cart .cart-info,
html body.template-cart .cart-info.grey-bg {
  background: #07141a !important;
  color: #ffffff !important;
  padding: 30px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html body.template-cart .cart-info *,
html body.template-cart .cart-info h6,
html body.template-cart .cart-info label,
html body.template-cart .cart-info span,
html body.template-cart .cart-info .totals,
html body.template-cart .cart-info .totals__subtotal,
html body.template-cart .cart-info p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Form inputs/selects in cart-info — light bg, dark text for readability */
html body.template-cart .cart-info input,
html body.template-cart .cart-info select,
html body.template-cart .cart-info textarea,
html body.template-cart .cart-info .form-control,
html body.template-cart .cart-info .field__input {
  background: #ffffff !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
}
html body.template-cart .cart-info select option {
  background: #ffffff !important;
  color: #07141a !important;
}
html body.template-cart .cart-info input::placeholder,
html body.template-cart .cart-info textarea::placeholder {
  color: #6c7787 !important;
}
/* Border-top/bottom dividers inside cart-info — subtle white */
html body.template-cart .cart-info .border-top,
html body.template-cart .cart-info .border-bottom {
  border-color: rgba(255,255,255,.12) !important;
}
/* Uitchecken button — geel CTA */
html body.template-cart .cart-info .btn-checkout,
html body.template-cart .cart-info .cart__checkout-button,
html body.template-cart .cart-info button[name="checkout"] {
  background: #fff500 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  border: 0 !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
html body.template-cart .cart-info .btn-checkout span,
html body.template-cart .cart-info .cart__checkout-button span {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* "Schatting van de verzending" save button — secondary, outline op donker */
html body.template-cart .cart-info .btn-save {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
}
html body.template-cart .cart-info .btn-save:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* ==========================================================================
   CART PAGE TABLE — prijzen/qty leesbaar + product kolom padding
   ========================================================================== */
html body.template-cart table caption,
html body.template-cart table thead th,
html body.template-cart table thead .columnheader,
html body.template-cart .cart-items th,
html body.template-cart .cart-table th {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  background: #ffffff !important;
  font-weight: 700 !important;
  padding: 16px 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
  text-align: left !important;
  border-bottom: 2px solid #e6e9ee !important;
}
html body.template-cart table tbody td,
html body.template-cart .cart-item td,
html body.template-cart .cart-items td,
html body.template-cart .cart-table td {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  background: #ffffff !important;
  padding: 20px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f0f3f6 !important;
}
/* Prices, totals, qty input — all readable dark on white */
html body.template-cart .cart-item .price,
html body.template-cart .cart-item .product-price,
html body.template-cart .cart-item [class*="price"],
html body.template-cart .cart-item .product-name,
html body.template-cart .cart-item .product-name a,
html body.template-cart .cart-item h3,
html body.template-cart .cart-item h3 a,
html body.template-cart td span,
html body.template-cart td .money,
html body.template-cart td .quantity-input,
html body.template-cart td input[type="number"],
html body.template-cart .cart__row * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body.template-cart .cart-item .money,
html body.template-cart .totals .money,
html body.template-cart td .money {
  font-weight: 700 !important;
  font-size: 16px !important;
}
/* Quantity buttons + input — bordered, dark text */
html body.template-cart td quantity-input,
html body.template-cart td .quantity {
  display: inline-flex !important;
  border: 1px solid #cdd9e3 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
html body.template-cart td .quantity__button {
  width: 36px !important;
  height: 36px !important;
  background: #f9f9fb !important;
  border: 0 !important;
  color: #07141a !important;
  cursor: pointer !important;
}
html body.template-cart td .quantity-input {
  width: 48px !important;
  height: 36px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-left: 1px solid #cdd9e3 !important;
  border-right: 1px solid #cdd9e3 !important;
  text-align: center !important;
  font-weight: 700 !important;
}
/* Remove "Verwijderen" link */
html body.template-cart td a[href*="quantity=0"] {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  text-decoration: underline !important;
  font-size: 12px !important;
}
html body.template-cart td a[href*="quantity=0"]:hover {
  color: #e23131 !important;
  -webkit-text-fill-color: #e23131 !important;
}

/* Cart addon-message (error/success) — leesbare tekst op de getinte bg */
html body .addon-message,
html body .addon-message p,
html body .addon-message *,
html body .addon-message.error,
html body .addon-message.error p,
html body .addon-message.error * {
  color: #8b1010 !important;
  -webkit-text-fill-color: #8b1010 !important;
  background: #fce6e8 !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
  border-left: 3px solid #e23131 !important;
}
html body .addon-message.success,
html body .addon-message.success p,
html body .addon-message.success * {
  color: #0f6b3a !important;
  -webkit-text-fill-color: #0f6b3a !important;
  background: #e6f9ee !important;
  border-left: 3px solid #34d17e !important;
}
/* Inside dark cart-info sidebar: override the dark-text rule (we want red still readable) */
html body.template-cart .cart-info .addon-message,
html body.template-cart .cart-info .addon-message *,
html body.template-cart .cart-info .addon-message.error,
html body.template-cart .cart-info .addon-message.error *,
html body.template-cart .cart-info .addon-message.error p {
  color: #8b1010 !important;
  -webkit-text-fill-color: #8b1010 !important;
  background: #fce6e8 !important;
  border-left-color: #e23131 !important;
}
html body.template-cart .cart-info .addon-message.success,
html body.template-cart .cart-info .addon-message.success * {
  color: #0f6b3a !important;
  -webkit-text-fill-color: #0f6b3a !important;
  background: #e6f9ee !important;
  border-left-color: #34d17e !important;
}

/* Verberg mobile-navigation-bar (onderbalk met Home/Rekening/Winkel/etc) */
html body mobile-navigation-bar,
html body .mobile-navigation-bar {
  display: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   MOBILE HEADER — correcte class names (.nav-toggle + .header__logo grid)
   ========================================================================== */
@media (max-width: 1024px) {
  /* header-inner grid herordenen: hamburger LEEG, logo midden-links, acties rechts */
  html body header.header header-inner.logo-position,
  html body header.header header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }

  /* Hamburger menu — FORCEER zichtbaar */
  html body header.header .nav-toggle,
  html body header.header .header__menu .nav-toggle,
  html body header.header [data-action="toggle-nav"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    order: -1 !important;
  }
  html body header.header .nav-toggle svg,
  html body header.header [data-action="toggle-nav"] svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: currentColor !important;
    display: block !important;
  }

  /* .header__menu container — alleen hamburger zichtbaar, horizontal nav verborgen */
  html body header.header .header__menu {
    flex: 0 0 auto !important;
    order: -1 !important;
  }
  /* Horizontal nav (desktop dropdown menu) verbergen op mobiel */
  html body header.header .header__menu .horizontal-list,
  html body header.header .header__menu nav.navigation > ul,
  html body header.header .header__menu horizontal-menu {
    display: none !important;
  }

  /* Logo links + groter */
  html body header.header .header__logo {
    order: 0 !important;
    margin-right: auto !important;
    margin-left: 12px !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }
  html body header.header .header__logo a,
  html body header.header .header__logo a img,
  html body header.header .header__logo img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  html body header.header .header__logo h1,
  html body header.header .header__logo .h1 {
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* Header acties (account + cart) rechts */
  html body header.header .header__action {
    order: 1 !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }

  /* Header padding & height */
  html body header.header,
  html body header.header > div:first-child {
    padding: 10px 14px !important;
  }
}

@media (max-width: 600px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img { height: 42px !important; max-height: 42px !important; }
  html body header.header { padding: 8px 12px !important; }
}

/* ==========================================================================
   MOBILE HEADER FIX V2 — kill Milano's grid-template-areas
   Milano's grid op mobiel: "logo icon" — .header__menu (hamburger) heeft geen area
   ========================================================================== */
@media (max-width: 1024px) {
  /* Nuke ALL grid template areas zodat .header__menu zichtbaar wordt */
  html body header.header header-inner,
  html body header.header header-inner.logo-position,
  html body header.header .logo-position,
  html body header.header .logo-left,
  html body header.header .logo-left_left,
  html body header.header .logo-in_mega_menu,
  html body header.header .no__action-left {
    display: flex !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }
  /* Kill grid-area assignments zodat flex order werkt */
  html body header.header .header__logo,
  html body header.header .header__menu,
  html body header.header .header__action {
    grid-area: auto !important;
  }
  /* Hamburger eerst (links) */
  html body header.header .header__menu {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Logo midden-links (na hamburger, voor acties) */
  html body header.header .header__logo {
    order: 2 !important;
    flex: 1 1 auto !important;
    margin: 0 auto 0 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  /* Acties (account + cart) rechts */
  html body header.header .header__action {
    order: 3 !important;
    flex: 0 0 auto !important;
  }
  /* Logo GROTER */
  html body header.header .header__logo a,
  html body header.header .header__logo a img,
  html body header.header .header__logo img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img:first-of-type {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Hamburger forceer zichtbaar (was hidden door grid layout gap) */
  html body header.header .nav-toggle,
  html body header.header [data-action="toggle-nav"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  html body header.header .nav-toggle svg,
  html body header.header [data-action="toggle-nav"] svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: currentColor !important;
    display: block !important;
  }
  /* Verberg desktop horizontal menu links die binnen .header__menu zitten */
  html body header.header .header__menu horizontal-menu,
  html body header.header .header__menu nav.navigation > ul,
  html body header.header .header__menu .horizontal-list {
    display: none !important;
  }
}

@media (max-width: 600px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img { height: 48px !important; max-height: 48px !important; }
}

/* ==========================================================================
   MOBILE HEADER FIX V3 — hamburger RECHTS van cart + werkend (drawer niet blokkeren)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Volgorde: logo (links) | acties (account+cart) | hamburger (rechts) */
  html body header.header .header__logo { order: 1 !important; margin: 0 auto 0 0 !important; }
  html body header.header .header__action { order: 2 !important; margin-left: auto !important; }
  html body header.header .header__menu { order: 3 !important; margin-left: 8px !important; }

  /* UNDO eerder: .navigation { display: none } blokkeert mobile drawer */
  html body header.header > nav,
  html body header.header nav.navigation,
  html body header.header .navigation,
  html body header.header .navigation.horizontal {
    display: block !important;
  }

  /* Op MOBIEL is .navigation een fixed slide-in drawer die via html.nav-open zichtbaar wordt */
  html body header.header .navigation.horizontal {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -100% !important;
    width: min(85vw, 380px) !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    transition: left .35s cubic-bezier(.2,.7,.2,1) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;
  }
  html.nav-open body header.header .navigation.horizontal {
    left: 0 !important;
  }
  /* Body overlay wanneer drawer open */
  html.nav-open body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(7,20,26,.45);
    z-index: 9998;
    pointer-events: auto;
  }
  /* Geen scroll op body wanneer drawer open */
  html.nav-open body { overflow: hidden; }

  /* Drawer content donker tekst op wit */
  html body header.header .navigation.horizontal .horizontal-list,
  html body header.header .navigation.horizontal ul,
  html body header.header .navigation.horizontal li {
    display: block !important;
    background: #ffffff !important;
  }
  html body header.header .navigation.horizontal menu-item a,
  html body header.header .navigation.horizontal menu-item a span,
  html body header.header .navigation.horizontal .menu_item-link,
  html body header.header .navigation.horizontal .smooth-padding-hover {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
  }
}

/* MOBIEL LOGO 250px wide */
@media (max-width: 1024px) {
  html body header.header .header__logo a,
  html body header.header .header__logo a img,
  html body header.header .header__logo img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img:first-of-type {
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
}
@media (max-width: 600px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Logo mobiel kleiner + spatie tussen cart en hamburger */
@media (max-width: 1024px) {
  html body header.header .header__logo a,
  html body header.header .header__logo a img,
  html body header.header .header__logo img {
    width: 175px !important;
    max-width: 175px !important;
    height: auto !important;
  }
  html body header.header .header__menu {
    margin-left: 20px !important;
  }
}
@media (max-width: 600px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img {
    width: 150px !important;
    max-width: 150px !important;
  }
  html body header.header .header__menu {
    margin-left: 16px !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER FIX V4 — gebruik Milano's native transform-slide, alleen kleuren
   ========================================================================== */
@media (max-width: 1024px) {
  /* UNDO mijn left-based override van eerder */
  html body header.header .navigation,
  html body header.header .navigation.horizontal {
    left: auto !important;
    width: 100% !important;
    max-width: 43rem !important;
    /* houd Milano's transform-based slide */
    background: #ffffff !important;
    background-color: #ffffff !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility .35s !important;
  }

  /* Alle nav content donker tekst op witte bg */
  html body header.header .navigation *,
  html body header.header .navigation li,
  html body header.header .navigation .horizontal-list,
  html body header.header .navigation menu-item,
  html body header.header .navigation .menu_item-link,
  html body header.header .navigation .smooth-padding-hover,
  html body header.header .navigation .navigation__menu-content,
  html body header.header .navigation back-menu,
  html body header.header .navigation close-menu {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    background-color: transparent !important;
  }
  html body header.header .navigation .navigation__menu-content,
  html body header.header .navigation .horizontal-list,
  html body header.header .navigation > div {
    background: #ffffff !important;
  }
  html body header.header .navigation svg,
  html body header.header .navigation path,
  html body header.header .navigation use {
    color: #07141a !important;
    stroke: #07141a !important;
    fill: currentColor !important;
  }

  /* Body scroll lock + overlay wanneer drawer open */
  html.nav-open body {
    overflow: hidden !important;
  }
  html.nav-open body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(7,20,26,.45) !important;
    z-index: 14 !important;
    pointer-events: auto !important;
  }
}

/* MOBIEL MENU — verberg account-url / account-logout (al via header icon bereikbaar) */
@media (max-width: 1024px) {
  html body header.header .navigation li:has(.account-url),
  html body header.header .navigation li:has(.account-logout),
  html body header.header .navigation .account-url,
  html body header.header .navigation .account-logout {
    display: none !important;
  }
  /* Geen backdrop-filter blur op drawer of overlay */
  html body header.header .navigation,
  html.nav-open body::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  /* Drawer expliciet boven overlay */
  html body header.header .navigation.horizontal {
    z-index: 9999 !important;
  }
  html.nav-open body::after { z-index: 9998 !important; }
  /* Drawer content clickable */
  html body header.header .navigation,
  html body header.header .navigation * {
    pointer-events: auto !important;
  }
}

/* UNDO de display:none op .horizontal-list — die UL bevat OOK de mobile drawer items */
@media (max-width: 1024px) {
  html body header.header .header__menu horizontal-menu,
  html body header.header .header__menu nav.navigation > ul,
  html body header.header .header__menu .horizontal-list,
  html body header.header .navigation .horizontal-list,
  html body header.header .navigation.horizontal .horizontal-list,
  html body header.header .navigation.horizontal ul.horizontal-list {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Maar VERBERG .header__menu's horizontal nav buiten de slide-in drawer */
  html body header.header .header__menu > nav.navigation:not(.fixed):not([style*="fixed"]) > .horizontal-list {
    display: none !important;
  }
  /* Forceer alle menu items in drawer visible + darks text */
  html body header.header .navigation.horizontal li,
  html body header.header .navigation.horizontal li.level0,
  html body header.header .navigation.horizontal li.menu-parent,
  html body header.header .navigation.horizontal menu-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
  }
  html body header.header .navigation.horizontal menu-item a,
  html body header.header .navigation.horizontal menu-item a span,
  html body header.header .navigation.horizontal .menu_item-link {
    display: flex !important;
    align-items: center !important;
    padding: 14px 24px !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f0f3f6 !important;
  }
  /* Forceer span (de echte tekst) zichtbaar */
  html body header.header .navigation.horizontal menu-item a span,
  html body header.header .navigation.horizontal .smooth-padding-hover {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER — match origineel schippers-it.nl stijl (dark, centered, uppercase)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Drawer panel = donker, full-width tot 380px */
  html body header.header .navigation.horizontal {
    background: #07141a !important;
    background-color: #07141a !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 80px 0 30px !important;
  }
  /* Inner content area ook donker */
  html body header.header .navigation.horizontal .navigation__menu-content,
  html body header.header .navigation.horizontal .horizontal-list,
  html body header.header .navigation.horizontal ul,
  html body header.header .navigation.horizontal li,
  html body header.header .navigation.horizontal menu-item {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Menu items: centered, uppercase, wit, generous spacing */
  html body header.header .navigation.horizontal menu-item a,
  html body header.header .navigation.horizontal menu-item a span,
  html body header.header .navigation.horizontal .menu_item-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 20px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border: 0 !important;
    text-align: center !important;
  }
  html body header.header .navigation.horizontal menu-item a:hover,
  html body header.header .navigation.horizontal .menu_item-link:hover,
  html body header.header .navigation.horizontal menu-item a:hover span {
    color: rgb(48,157,198) !important;
    -webkit-text-fill-color: rgb(48,157,198) !important;
    background: transparent !important;
  }

  /* Caret/arrow voor "Producten" dropdown - wit + centered */
  html body header.header .navigation.horizontal open-children-toggle svg,
  html body header.header .navigation.horizontal open-children-toggle path {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: currentColor !important;
  }

  /* Submenu (subchildmenu) — donker, centered ook */
  html body header.header .navigation.horizontal .submenu {
    background: #07141a !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.header .navigation.horizontal .submenu .subchildmenu li menu-item a,
  html body header.header .navigation.horizontal .submenu .subchildmenu li .menu_item-link,
  html body header.header .navigation.horizontal .submenu .smooth-padding-hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    background: transparent !important;
  }

  /* Mobile-menu-title (de "Producten" header in subchild view) */
  html body header.header .navigation.horizontal .menu-mobile-title,
  html body header.header .navigation.horizontal back-menu {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html body header.header .navigation.horizontal back-menu svg,
  html body header.header .navigation.horizontal back-menu path {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Close-menu X button — wit */
  html body header.header .navigation.horizontal close-menu,
  html body header.header .navigation.horizontal close-menu svg,
  html body header.header .navigation.horizontal close-menu path {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: currentColor !important;
  }

  /* Verberg "Menu" header text die Milano standaard toont (gebruik onze eigen styling) */
  html body header.header .navigation.horizontal .menu-mobile-title > span:first-child:not(.icon),
  html body header.header .navigation.horizontal .navigation__menu-content > .menu-mobile-title {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    background: transparent !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER FIX V5 — nuke alle grey bgs binnen drawer, forceer text visible
   ========================================================================== */
@media (max-width: 1024px) {
  /* Nuke ALLE backgrounds binnen drawer (behalve drawer zelf) */
  html body header.header .navigation.horizontal *,
  html body header.header .navigation.horizontal .grey-bg,
  html body header.header .navigation.horizontal .gradient,
  html body header.header .navigation.horizontal .color-default,
  html body header.header .navigation.horizontal [class*="grey"],
  html body header.header .navigation.horizontal [class*="gradient"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  /* Drawer zelf: solide donker */
  html body header.header .navigation.horizontal {
    background: #07141a !important;
    background-color: #07141a !important;
    padding: 20px 0 30px !important;
  }

  /* Force ALLE tekst-spans + a tags zichtbaar + wit */
  html body header.header .navigation.horizontal a,
  html body header.header .navigation.horizontal span,
  html body header.header .navigation.horizontal menu-item,
  html body header.header .navigation.horizontal .menu_item-link,
  html body header.header .navigation.horizontal .smooth-padding-hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Submenu MOET off-screen blijven (translate -100%) tenzij is-open op parent */
  html body header.header .navigation.horizontal .submenu,
  html body header.header .navigation.horizontal .sub-children-menu {
    transform: translateX(100%) !important;
    background: #07141a !important;
    background-color: #07141a !important;
    inset: 0 !important;
  }
  html body header.header .navigation.horizontal .menu-parent.is-open > .submenu,
  html body header.header .navigation.horizontal .is-open + .submenu,
  html body header.header .navigation.horizontal .is-open + .sub-children-menu {
    transform: translate(0) !important;
  }

  /* Hide de menu-mobile-title (de "PRODUCTEN" header binnen submenu — niet nodig) */
  html body header.header .navigation.horizontal .menu-mobile-title {
    display: none !important;
  }

  /* Top-level items: centered uppercase wit, generous padding */
  html body header.header .navigation.horizontal > div > ul > li > menu-item > a,
  html body header.header .navigation.horizontal .horizontal-list > li > menu-item > a,
  html body header.header .navigation.horizontal .horizontal-list > li.level0 > menu-item > a,
  html body header.header .navigation.horizontal .navigation__menu-content > .horizontal-list > li > menu-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 20px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    border: 0 !important;
  }
  html body header.header .navigation.horizontal > div > ul > li > menu-item > a > span,
  html body header.header .navigation.horizontal .horizontal-list > li > menu-item > a > span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Caret arrow > rechts van "Producten" */
  html body header.header .navigation.horizontal open-children-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body header.header .navigation.horizontal li.menu-parent {
    position: relative !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER FIX V6 — ECHT ALLES transparent (nuke white bg on li, submenu, etc)
   ========================================================================== */
@media (max-width: 1024px) {
  /* MAXIMALE specificiteit — alle drawer descendants transparent (behalve het nav-element zelf) */
  html body header.header nav.navigation.horizontal li.level0,
  html body header.header nav.navigation.horizontal li.level0.menu-parent,
  html body header.header nav.navigation.horizontal li.menu-link,
  html body header.header nav.navigation.horizontal li.menu-link.level-1,
  html body header.header nav.navigation.horizontal li,
  html body header.header nav.navigation.horizontal ul,
  html body header.header nav.navigation.horizontal ul.subchildmenu,
  html body header.header nav.navigation.horizontal menu-item,
  html body header.header nav.navigation.horizontal .submenu,
  html body header.header nav.navigation.horizontal .submenu.gradient,
  html body header.header nav.navigation.horizontal .submenu .grey-bg,
  html body header.header nav.navigation.horizontal .navigation__menu-content,
  html body header.header nav.navigation.horizontal > div {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Submenu container moet donker bg krijgen wanneer hij geopend wordt (anders zie je niks bij switch) */
  html body header.header nav.navigation.horizontal li.is-open .submenu,
  html body header.header nav.navigation.horizontal .menu-parent.is-open > .submenu {
    background: #07141a !important;
  }

  /* Submenu items moeten WIT zijn (mijn rule eerder zette ze op donker navy) */
  html body header.header nav.navigation.horizontal .submenu .subchildmenu li menu-item a,
  html body header.header nav.navigation.horizontal .submenu .subchildmenu li menu-item a span,
  html body header.header nav.navigation.horizontal .submenu .menu_item-link,
  html body header.header nav.navigation.horizontal .submenu .menu_item-link span,
  html body header.header nav.navigation.horizontal .submenu .smooth-padding-hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* ==========================================================================
   Cookie banner verbergen tijdens drawer-open + drawer hoger z-index
   ========================================================================== */
html.nav-open #shopify-pc__banner,
html.nav-open .shopify-pc__banner__dialog,
html.nav-open [id*="shopify-pc__"],
html.nav-open shopify-privacy-banner {
  display: none !important;
  visibility: hidden !important;
}
@media (max-width: 1024px) {
  html body header.header .navigation.horizontal {
    z-index: 2147483646 !important;  /* max-safe z-index */
  }
  html.nav-open body::after { z-index: 2147483645 !important; }
}

/* MOBILE DRAWER POLISH — strakker wit + verberg login-link */
@media (max-width: 1024px) {
  html body header.header nav.navigation.horizontal menu-item a,
  html body header.header nav.navigation.horizontal menu-item a span,
  html body header.header nav.navigation.horizontal .menu_item-link,
  html body header.header nav.navigation.horizontal .menu_item-link span,
  html body header.header nav.navigation.horizontal .smooth-padding-hover {
    color: rgb(255, 255, 255) !important;
    -webkit-text-fill-color: rgb(255, 255, 255) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
  }
  /* Verberg Inloggen/Registreren li in mobile drawer */
  html body header.header nav.navigation.horizontal li:has(a[href*="login"]),
  html body header.header nav.navigation.horizontal li:has(a[href*="register"]),
  html body header.header nav.navigation.horizontal li:has(a[href*="account"]),
  html body header.header nav.navigation.horizontal li:has(.account-login) {
    display: none !important;
  }
}

/* ==========================================================================
   FIX: drawer-overlay blokkeert clicks + body horizontal overflow
   ========================================================================== */
/* Overlay pointer-events: NONE — clicks gaan door naar drawer; JS sluit drawer bij click outside */
html.nav-open body::after {
  pointer-events: none !important;
}

/* PREVENT body horizontal scroll op alle viewports */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Side-drawers (minicart) niet veroorzaken horizontal scroll */
html body .minicart__wrapper,
html body .cart-drawer {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%);
}
html body .minicart__wrapper.bls__drawer:not(.invisible),
html body .minicart__wrapper.visible,
html body .minicart__wrapper.is-open {
  transform: translateX(0) !important;
}

/* ==========================================================================
   MOBILE DRAWER GERELOCEERD NAAR BODY — forceer dimensies (was 0x0)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Wanneer drawer direct child van body is, expliciet sizen */
  html body > nav.navigation.horizontal,
  body > nav.navigation.horizontal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 2147483646 !important;
    background: #07141a !important;
    transform: translateX(-100%) !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 60px 0 30px !important;
  }
  html.nav-open body > nav.navigation.horizontal,
  html.nav-open > body > nav.navigation.horizontal {
    transform: translate(0) !important;
  }
}

/* Verberg Milano's menu-mobile-title header-bar — blokkeert PRODUCTEN click */
@media (max-width: 1024px) {
  html body .menu-mobile-title,
  html body nav.navigation.horizontal .menu-mobile-title,
  body > nav.navigation.horizontal .menu-mobile-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   MOBILE/TABLET — forceer alle wide containers naar viewport breedte
   ========================================================================== */
@media (max-width: 1024px) {
  html body .fluid_container,
  html body .stretch_width,
  html body .page-width,
  html body .container,
  html body .shopify-section,
  html body .section,
  html body section.shopify-section,
  html body section.section,
  html body .main-product,
  html body .main-product__detail,
  html body main,
  html body main#MainContent {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Inner full-width sections behouden hun bg-full-bleed via padding only */
  html body .shopify-section { padding-left: 0 !important; padding-right: 0 !important; }
  html body .shopify-section > section,
  html body .shopify-section > div.section,
  html body .shopify-section > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Product page specifiek — flex-wrap zodat image en info onder elkaar staan */
  html body .main-product,
  html body .main-product .flex-cols,
  html body .main-product .flex.gap.flex-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  html body .main-product > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Product image gallery */
  html body .product-gallery,
  html body .product__media-list,
  html body .product__media,
  html body .product-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .product__media-list img,
  html body .product-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* Featured product section */
  html body .sec__featured-product,
  html body .section.sec__featured-product {
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumb */
  html body .breadcrumb-list,
  html body nav[aria-label="breadcrumbs"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Footer mobile */
  html body footer,
  html body footer .footer,
  html body footer .container,
  html body footer .stretch_width {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* MOBILE — verklein gestapelde padding (was 16px per ancestor = compounding) */
@media (max-width: 1024px) {
  /* Reset alle inner containers naar 0 padding */
  html body .shopify-section,
  html body .shopify-section > section,
  html body .shopify-section > div.section,
  html body .shopify-section > div,
  html body .fluid_container,
  html body .stretch_width,
  html body .page-width,
  html body .container,
  html body .section,
  html body section.shopify-section,
  html body section.section,
  html body .main-product,
  html body .main-product__detail,
  html body main,
  html body main#MainContent {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Alleen .fluid_container krijgt mobile padding (de outer wrapper) */
  html body .fluid_container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* Featured product section iets meer ruimte voor breathing */
  html body .sec__featured-product {
    padding: 20px 0 !important;
  }
  /* Breadcrumb compact */
  html body .breadcrumb-list,
  html body nav[aria-label="breadcrumbs"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Footer columns */
  html body footer,
  html body footer .container,
  html body footer .stretch_width {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body footer .footer { padding-left: 0 !important; padding-right: 0 !important; }
}
/* cb 1782815465098413451 */

/* MOBILE — restore max-width 100% (vorige fix verwijderde dit per ongeluk) */
@media (max-width: 1024px) {
  html body .shopify-section,
  html body .shopify-section > section,
  html body .shopify-section > div,
  html body .fluid_container,
  html body .stretch_width,
  html body .page-width,
  html body .container,
  html body .section,
  html body section.shopify-section,
  html body section.section,
  html body .main-product,
  html body main,
  html body main#MainContent,
  html body footer {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* MOBILE DRAWER — logo bovenaan + witte close X knop */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal {
    padding: 0 !important;
  }
  body > nav.navigation.horizontal::before {
    content: '';
    display: block;
    height: 70px;
    background: #050f14;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background-image: url("//schippers-it.myshopify.com/cdn/shop/files/schippers-it-logo-white.png");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: auto 32px;
  }
  /* Witte close X knop top-right */
  body > nav.navigation.horizontal::after {
    content: '\00d7'; /* × multiplication sign */
    position: fixed;
    top: 18px;
    right: 16px;
    width: 44px;
    height: 44px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2147483647;
    pointer-events: auto;
    background: transparent;
    font-weight: 300;
  }
  body > nav.navigation.horizontal .navigation__menu-content {
    padding-top: 30px !important;
  }
}
/* cb 1782815523502724386 */

/* MOBILE — breadcrumb optimaliseren (compact, truncate, geen wrap) */
@media (max-width: 1024px) {
  html body .breadcrumbs,
  html body .breadcrumb,
  html body nav[aria-label="breadcrumbs"] {
    padding: 12px 0 !important;
    font-size: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .breadcrumb-list,
  html body nav[aria-label="breadcrumbs"] ul {
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    white-space: nowrap !important;
    gap: 4px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    align-items: center !important;
  }
  html body .breadcrumb-list li,
  html body nav[aria-label="breadcrumbs"] li {
    font-size: 12px !important;
    color: #07141a !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* Last item truncated met ellipsis */
  html body .breadcrumb-list li:last-child,
  html body nav[aria-label="breadcrumbs"] li:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    max-width: 65% !important;
    color: #07141a !important;
    font-weight: 600 !important;
  }
  html body .breadcrumb-list a,
  html body nav[aria-label="breadcrumbs"] a {
    color: rgb(48,157,198) !important;
    text-decoration: none !important;
  }
  /* Separator iconen */
  html body .breadcrumb-list svg,
  html body nav[aria-label="breadcrumbs"] svg {
    width: 8px !important;
    height: 8px !important;
    flex-shrink: 0 !important;
    color: #cdd9e3 !important;
  }
}
/* cb 1782815550184385077 */

/* ==========================================================================
   TABLET / MOBILE TYPOGRAPHY — schaal alle text down voor kleinere viewports
   ========================================================================== */
@media (max-width: 1024px) {
  html body h1,
  html body main h1,
  html body .shopify-section h1,
  html body .sc-hero h1,
  html body .sc-about-hero h1,
  html body .sc-brandsp h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  html body h2, html body main h2 { font-size: 28px !important; }
  html body h3, html body main h3 { font-size: 20px !important; }
  html body h4, html body main h4 { font-size: 16px !important; }
  html body h5, html body main h5 { font-size: 14px !important; }
  html body, html body p, html body li, html body a, html body label, html body div {
    font-size: 14px !important;
  }
  /* Product title op product pagina */
  html body .product__title,
  html body .product-title,
  html body .product__info h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  /* Price */
  html body .product__price,
  html body .price,
  html body .money { font-size: 18px !important; }
  /* Buttons */
  html body .btn,
  html body button.btn-primary,
  html body .product__submit,
  html body .product_submit_button {
    font-size: 13px !important;
    padding: 14px 20px !important;
  }
  /* Cards / product items */
  html body .product-item__name,
  html body .product-card__title { font-size: 14px !important; }
  /* Mono labels (eyebrows, etc) houden klein */
  html body .sc-usptop__item,
  html body .sc-usptop__phone,
  html body [class*="eyebrow"] span:last-child {
    font-size: 10px !important;
  }
}

@media (max-width: 600px) {
  html body h1, html body main h1, html body .shopify-section h1 {
    font-size: 30px !important;
  }
  html body h2, html body main h2 { font-size: 22px !important; }
  html body h3, html body main h3 { font-size: 17px !important; }
  html body .product__title,
  html body .product__info h1 { font-size: 19px !important; }
  html body .product__price, html body .money { font-size: 17px !important; }
}
/* cb 1782815581667529761 */

/* ==========================================================================
   "MOGELIJK OOK INTERESSANT" — verberg sectie als geen gerelateerde producten
   Recommendations laden async; als product-recommendations geen .product-item
   bevat (alleen het "geen gevonden" <p>) → hele sectie verbergen
   ========================================================================== */
.section.sec__related-product:not(:has(.product-item)):not(:has(product-card)),
.shopify-section:has(.sec__related-product):not(:has(.product-item)):not(:has(product-card)),
.related-products:not(:has(.product-item)),
section.related-products:not(:has(.product-item)) {
  display: none !important;
}
/* Ook: verberg sectie die "no_product" p toont (fallback) */
.sec__related-product:has(p:only-child),
.sec__related-product:has(product-recommendations > p:only-child) {
  display: none !important;
}
/* cb 1782815750266701804 */

/* Breadcrumb verbergen op mobiel */
@media (max-width: 1024px) {
  html body .breadcrumbs,
  html body .breadcrumb-list,
  html body .breadcrumb,
  html body nav[aria-label="breadcrumbs"],
  html body section.breadcrumbs {
    display: none !important;
  }
}
/* cb 1782815863452391043 */

/* Mobile drawer start aan de top - geen padding meer boven logo bar */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal {
    padding: 0 !important;
    padding-top: 0 !important;
  }
  body > nav.navigation.horizontal .navigation__menu-content {
    padding-top: 0 !important;
  }
  body > nav.navigation.horizontal .sc-drawer-chrome {
    position: sticky !important;
    top: 0 !important;
    background: #050f14 !important;
  }
}
/* cb 1782815920846343797 */

/* Mobile productpagina — 50px ruimte boven product image */
@media (max-width: 1024px) {
  html body.product .sec__featured-product,
  html body.product .section.sec__featured-product,
  html body.product main .shopify-section:first-child + .shopify-section,
  html body.product .main-product-section {
    padding-top: 50px !important;
  }
  html body.product .product__media-list,
  html body.product .product-gallery,
  html body.product .product__media {
    margin-top: 0 !important;
  }
}
/* cb 1782815934421571132 */

/* Verberg dubbele close X (van Milano) + verwijder lijn boven logo */
@media (max-width: 1024px) {
  /* Milano's eigen close-menu binnen drawer verbergen (alleen mijn injected sc-drawer-close blijft) */
  body > nav.navigation.horizontal close-menu,
  body > nav.navigation.horizontal .close-menu,
  body > nav.navigation.horizontal .menu-mobile-title close-menu,
  body > nav.navigation.horizontal .menu-mobile-title .close-menu,
  body > nav.navigation.horizontal > close-menu,
  body > nav.navigation.horizontal > .close-menu {
    display: none !important;
  }
  /* Verberg ALLE menu-mobile-title (de extra balk boven met lijn) */
  body > nav.navigation.horizontal .menu-mobile-title,
  body > nav.navigation.horizontal > .menu-mobile-title {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  /* Drawer-chrome (logo+close) geen border + sticky top met geen gap */
  body > nav.navigation.horizontal .sc-drawer-chrome {
    border-bottom: 0 !important;
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
  }
  /* navigation__menu-content direct na chrome — geen margin-top */
  body > nav.navigation.horizontal .navigation__menu-content {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
}
/* cb 1782816226826193772 */

/* Verberg de extra X (Milano's nav-toggle → ×) wanneer drawer open is */
html.nav-open body header.header .nav-toggle,
html.nav-open body .nav-toggle,
html.nav-open body [data-action="toggle-nav"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* cb 1782816760177132564 */

/* Verwijder pseudo-element X (was fallback voor inject) — alleen sc-drawer-close blijft */
body > nav.navigation.horizontal::after,
body > nav.navigation.horizontal::before {
  content: none !important;
  display: none !important;
}
/* cb 1782818060304439484 */

/* ==========================================================================
   MOBILE HEADER — lijn weg + items op gelijke hoogte
   ========================================================================== */
@media (max-width: 1024px) {
  html body header.header,
  html body header.header.section,
  html body header.header > div {
    border-bottom: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
  html body header.header header-inner,
  html body header.header .header__inner,
  html body header.header > div:first-child {
    align-items: center !important;
    min-height: 64px !important;
  }
  /* Logo align center */
  html body header.header .header__logo,
  html body header.header .header__logo a,
  html body header.header .header__logo img {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Cart icon en account icon dezelfde hoogte als hamburger */
  html body header.header .header__action,
  html body header.header .header__action > * {
    align-items: center !important;
    display: inline-flex !important;
  }
  html body header.header .header__action a,
  html body header.header .minicart__action,
  html body header.header #cart-icon-bubble,
  html body header.header .header-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body header.header .header__action svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* MOBILE PRODUCT PAGINA — prijs groter en duidelijker */
@media (max-width: 1024px) {
  html body.product .price,
  html body.product .product__price,
  html body.product .product-detail__price,
  html body.product .product__info .price,
  html body.product .money,
  html body.product .product-single__price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    margin: 12px 0 !important;
    line-height: 1.2 !important;
    display: block !important;
  }
  html body.product .price .money,
  html body.product .product__price .money,
  html body.product [class*="price"] .money {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #07141a !important;
  }
}

/* MOBILE FOOTER — adres opsplitsen: straat | postcode-stad | land op aparte regels */
@media (max-width: 1024px) {
  html body .sc-foot-brand__row {
    line-height: 1.6 !important;
  }
}

@media (max-width: 1024px) {
  html body .sc-foot-addr-line {
    display: block !important;
  }
}
/* cb 1782818555773172510 */

/* Mobile productpagina — verberg lijn onder Stel een vraag/Deel (boven Beschrijving) */
@media (max-width: 1024px) {
  html body.product .product__share,
  html body.product .product__ask,
  html body.product .ask-question,
  html body.product [class*="product-share"],
  html body.product [class*="ask-question"] {
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
  }
  html body.product .product__share + *,
  html body.product .product__info hr,
  html body.product .product hr {
    border: 0 !important;
    display: none !important;
  }
  /* "Beschrijving" sectie - verberg border-top */
  html body.product .product__description,
  html body.product .product-description,
  html body.product [class*="product__tab"],
  html body.product .collapsible-product,
  html body.product .collapsible-content,
  html body.product collapsible-block {
    border-top: 0 !important;
  }
  html body.product .product__description::before,
  html body.product .product-description::before {
    display: none !important;
    border: 0 !important;
  }
}
/* cb 1782818575444331871 */

/* Mobile cart pagina — 50px boven Winkelwagen title + verberg description */
@media (max-width: 1024px) {
  html body.template-cart .page-heading,
  html body.template-cart section.page-heading,
  html body.template-cart .shopify-section--page-heading,
  html body.template-cart main > .shopify-section:first-child {
    padding-top: 50px !important;
  }
  html body.template-cart .page-heading p,
  html body.template-cart .page-heading .rich__text-m0,
  html body.template-cart .page-heading [data-block-id*="description"] {
    display: none !important;
  }
}
/* cb 1782818605059046015 */

/* Verberg cart-content blok (Leveringsinformatie / 30 dagen garantie / Payment Support) op cart pagina */
html body.template-cart .cart-content,
html body.template-cart .cart-info .cart-content,
html body.template-cart .cart-info > div.cart-content {
  display: none !important;
}
/* cb 1782818672189656169 */

/* Verberg "Review your selected items..." description op cart pagina */
html body.template-cart .page-heading p,
html body.template-cart .page-heading .description,
html body.template-cart .page-heading .rich__text-m0,
html body.template-cart .page-heading [class*="description"],
html body.template-cart section.page-heading p,
html body.template-cart main > .shopify-section:first-child p,
html body.template-cart main > .shopify-section:first-child .rich__text-m0,
html body.template-cart .shopify-section--page-heading p {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* cb 1782818815189066679 */

/* 50px ruimte ONDER de cart-info sidebar + zorg cart-content écht weg */
@media (max-width: 1024px) {
  html body.template-cart .cart-right,
  html body.template-cart .cart-right .sticky-1025,
  html body.template-cart .cart-info {
    margin-bottom: 50px !important;
    padding-bottom: 0 !important;
  }
}
/* Force-hide cart-content op alle viewports (had eerder verbergt) */
html body.template-cart .cart-content,
html body.template-cart .cart-right .cart-content,
html body.template-cart .sticky-1025 .cart-content,
html body.template-cart div.cart-content.grey-bg {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}
/* cb 1782818837330308309 */

/* Close X drawer op EXACTE positie van hamburger */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal .sc-drawer-chrome {
    position: relative !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
  }
  body > nav.navigation.horizontal .sc-drawer-chrome .sc-drawer-close {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  body > nav.navigation.horizontal .sc-drawer-chrome > a {
    align-self: center !important;
  }
}
/* cb 1782818862136489561 */

/* Footer adres — 3 regels (Esdoornlaan / postcode-stad / NB Nederland) */
html body .sc-foot-addr-line {
  display: block !important;
  line-height: 1.5 !important;
}
/* cb 1782818882962358521 */

/* Shopify cookie banner — ALLE tekst donker (incl. heading boven Privacybeleid) */
html body #shopify-pc__banner,
html body #shopify-pc__banner *,
html body .shopify-pc__banner__dialog,
html body .shopify-pc__banner__dialog *,
html body #shopify-pc__prefs,
html body #shopify-pc__prefs *,
html body [id*="shopify-pc"] *,
html body [class*="shopify-pc"] * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body #shopify-pc__banner h1,
html body #shopify-pc__banner h2,
html body #shopify-pc__banner h3,
html body #shopify-pc__banner h4,
html body .shopify-pc__banner__dialog h1,
html body .shopify-pc__banner__dialog h2,
html body .shopify-pc__banner__dialog h3 {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  font-weight: 700 !important;
}
html body #shopify-pc__banner a,
html body .shopify-pc__banner__dialog a {
  color: rgb(48,157,198) !important;
  -webkit-text-fill-color: rgb(48,157,198) !important;
  text-decoration: underline !important;
}
/* cb 1782819047961991369 */

/* Logo 150px op alle mobiele viewports + 5px gap tussen account en cart */
@media (max-width: 1024px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
  html body header.header .header__action {
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body header.header .header__action > * {
    margin: 0 !important;
  }
  html body header.header .header__action > * + * {
    margin-left: 0 !important;
  }
}
/* cb 1782819073920004767 */

/* Filter zijmenu mobiel — z-index hoger dan header zodat het bovenop komt */
@media (max-width: 1024px) {
  html body .filter-drawer,
  html body .filter-popup,
  html body .filter-popup-content,
  html body .facets-drawer,
  html body collection-filter,
  html body collection-filter-drawer,
  html body .collection-sidebar.drawer,
  html body [class*="filter-drawer"],
  html body [class*="filter-popup"],
  html body .collection-filter,
  html body .sidebar-filter,
  html body collection-sidebar {
    z-index: 2147483646 !important;
  }
  /* Overlay achter filter drawer */
  html body .filter-drawer + .overlay,
  html body .filter-overlay,
  html body .filter-popup__overlay {
    z-index: 2147483645 !important;
  }
  /* Body class toggle when filter open — header onder filter */
  html.filter-open body header.header,
  body:has(.filter-drawer.open) header.header,
  body:has(.filter-popup.open) header.header,
  body:has(collection-filter[open]) header.header {
    z-index: 1 !important;
  }
}
/* cb 1782819107070497884 */

/* Mobile — verwijder witruimte onder footer */
@media (max-width: 1024px) {
  html, body {
    background: #07141a !important;
  }
  html body footer,
  html body footer.footer,
  html body .footer,
  html body .footer-section {
    margin-bottom: 0 !important;
    padding-bottom: 24px !important;
    background: #07141a !important;
  }
  html body footer + *,
  html body footer ~ * {
    display: none !important;
  }
  html body main,
  html body main#MainContent {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Verberg eventuele extra spacing-elementen na footer */
  html body .shopify-section--footer + *,
  html body footer.shopify-section + *,
  html body .footer-group + * {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
  }
}
/* cb 1782819133797861021 */

/* Verwijder body.mobi-navigation-bar padding-bottom (was reservering voor verborgen onderbalk) */
html body.mobi-navigation-bar,
html body[class*="mobi-navigation-bar"] {
  padding-bottom: 0 !important;
}
/* cb 1782819266311242384 */

/* ==========================================================================
   AUDIT FIXES — Playwright bevestigd
   ========================================================================== */
/* 1. Product pagina horizontal scroll — alle ouder containers naar max viewport */
@media (max-width: 1024px) {
  html body.product main,
  html body.product main.content-for-layout,
  html body.product .content-for-layout,
  html body.product .shopify-section,
  html body.product section.breadcrumbs,
  html body.product .fluid_container,
  html body.product .main-product-section,
  html body.product .sec__featured-product {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* HARD: kil horizontal scroll op product page met clipping */
  html body.product {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* 2. Body padding-bottom op ALLE templates (was alleen op .mobi-navigation-bar) */
html body,
html body[class*="mobi-navigation-bar"],
html body.product,
html body.collection,
html body.cart,
html body.page,
html body.index {
  padding-bottom: 0 !important;
}

/* 3. Home — categorie card descriptions zichtbaar (wit op wit gefixt) */
html body.index .sc-cats__desc,
html body.index .sc-cat__desc,
html body.index [class*="cat"] p:not(.sc-usptop__phone),
html body.index .sc-cats-card p,
html body main p {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* Maar op donkere hero blijft p wit */
html body .sc-hero p,
html body .sc-hero p *,
html body .sc-about-hero p,
html body .sc-brandsp p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4. Product page vendor "Disklabs" — donker zichtbaar */
html body.product .product__vendor,
html body.product .vendor,
html body.product [class*="vendor"],
html body.product a[href*="/collections/vendors"] {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  font-weight: 600 !important;
}
/* cb 1782819614841015116 */

/* HOME — sc-cats__desc paragraph zichtbaar op witte bg (was wit-op-wit) */
html body .sc-cats__desc,
html body p.sc-cats__desc,
html body .sc-cats-card .sc-cats__desc,
html body .sc-cats__card p,
html body .sc-cats p {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .sc-cats__name,
html body .sc-cats h3 {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* cb 1782819834788214153 */

/* Footer adres lines — break op eigen regel binnen flex parent */
html body .sc-foot-brand__row {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
html body .sc-foot-addr-line {
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  display: block !important;
  width: 100% !important;
  line-height: 1.5 !important;
  margin-left: 24px !important; /* match svg icon spacing */
}
/* eerste line direct na svg krijgt geen margin-left (svg + tekst inline) */
html body .sc-foot-brand__row svg + .sc-foot-addr-line {
  margin-left: 8px !important;
  flex: 1 1 auto !important;
  width: auto !important;
}
/* cb 1782820000285901909 */

/* Footer adres — alle 3 regels op exact dezelfde x-positie */
@media (max-width: 1024px) {
  html body .sc-foot-brand__row {
    display: grid !important;
    grid-template-columns: 16px 1fr !important;
    column-gap: 8px !important;
    align-items: start !important;
  }
  html body .sc-foot-brand__row svg {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 4px 0 0 0 !important;
    flex-shrink: 0 !important;
  }
  html body .sc-foot-brand__row .sc-foot-addr-line {
    grid-column: 2 !important;
    margin: 0 !important;
    flex: none !important;
    width: 100% !important;
    line-height: 1.5 !important;
  }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(1) { grid-row: 1; }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(2) { grid-row: 2; }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(3) { grid-row: 3; }
  /* Voor telefoon + email rows zonder addr-lines: gewoon links uitgelijnd */
  html body .sc-foot-brand__row a {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}
/* cb 1782820906669888240 */

/* MOBILE DRAWER — logo + close echt aan top (geen ruimte boven) */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal {
    top: 0 !important;
    padding-top: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }
  body > nav.navigation.horizontal .sc-drawer-chrome {
    margin-top: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 56px !important;
  }
  body > nav.navigation.horizontal .navigation__menu-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* cb 1782820946864779831 */

/* DRAWER - kill alle padding voor chrome */
@media (max-width: 1024px) {
  html body > nav.navigation.horizontal {
    padding: 0 !important;
  }
  html body > nav.navigation.horizontal > * {
    margin-top: 0 !important;
  }
}

/* HEADER ACTION - account icon naast cart (rechts), niet bij logo */
@media (max-width: 1024px) {
  html body header.header .header__action {
    gap: 5px !important;
  }
  html body header.header .header__action > svg {
    display: none !important; /* orphan svg verbergen */
  }
  html body header.header .header__action .header_account,
  html body header.header .header__action [class*="header_account"] {
    order: 1 !important;
    margin-left: 0 !important;
  }
  html body header.header .header__action .minicart,
  html body header.header .header__action [class*="minicart"] {
    order: 2 !important;
    margin-left: 0 !important;
  }
}

/* FOOTER ADDR - alle 3 op exact x=68 via grid met expliciete placement */
@media (max-width: 1024px) {
  html body .sc-foot-brand__row {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    column-gap: 0 !important;
    align-items: center !important;
  }
  html body .sc-foot-brand__row > svg:first-child {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    margin-top: 4px !important;
  }
  html body .sc-foot-brand__row .sc-foot-addr-line {
    grid-column: 2 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    flex: none !important;
  }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(1) { grid-row: 1 / 2 !important; }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(2) { grid-row: 2 / 3 !important; }
  html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(3) { grid-row: 3 / 4 !important; }
  /* Voor non-addr rows (telefoon/email) — link in col 2 */
  html body .sc-foot-brand__row a {
    grid-column: 2 / 3 !important;
  }
}
/* cb 1782821045892031263 */

/* Force ALLE addr lines op margin-left: 0 (override oude svg+ rule) */
html body .sc-foot-brand__row > svg + .sc-foot-addr-line,
html body .sc-foot-brand__row .sc-foot-addr-line,
html body .sc-foot-brand__row .sc-foot-addr-line:first-of-type {
  margin-left: 0 !important;
  flex: none !important;
}
/* cb 1782821153290499278 */

/* MOBILE — verberg account icon in header (gaat naar drawer ipv hier) */
@media (max-width: 1024px) {
  html body header.header .header_account,
  html body header.header [class*="header_account"],
  html body header.header .header__action .customer__login,
  html body header.header .header__action a[href*="/account"]:not([href*="/account/recover"]),
  html body header.header .header__action a[aria-label="Rekening"],
  html body header.header .header__action a[aria-label*="account" i] {
    display: none !important;
    visibility: hidden !important;
  }
  /* Account/Inloggen/Registreren wel zichtbaar in drawer (was eerder verborgen) */
  html body header.header nav.navigation.horizontal li.account-url,
  html body header.header nav.navigation.horizontal li.account-logout,
  html body header.header nav.navigation.horizontal li:has(.account-url),
  html body header.header nav.navigation.horizontal li:has(.account-logout),
  html body header.header nav.navigation.horizontal li:has(a[href*="/account"]),
  html body header.header nav.navigation.horizontal li:has(a[href*="/login"]),
  html body header.header nav.navigation.horizontal li:has(a[href*="/register"]),
  body > nav.navigation.horizontal li:has(a[href*="/account"]),
  body > nav.navigation.horizontal li:has(a[href*="/login"]),
  body > nav.navigation.horizontal li:has(a[href*="/register"]) {
    display: block !important;
    visibility: visible !important;
  }
  /* Account links in drawer — zelfde uppercase styling als andere items */
  body > nav.navigation.horizontal li a[href*="/account"],
  body > nav.navigation.horizontal li a[href*="/login"],
  body > nav.navigation.horizontal li a[href*="/register"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding: 18px 20px !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
}
/* cb 1782821615565514502 */

/* MOBILE — header logo geforceerd 150px (was 219px ondanks eerdere regel) */
@media (max-width: 1024px) {
  html body header.header .header__logo a img,
  html body header.header .header__logo img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img,
  html body header.header .header__logo a img[srcset],
  html body header.header .header__logo img.logo,
  html body header.header img[alt*="schippers" i],
  html body header.header img[alt*="Schippers" i] {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    height: auto !important;
  }
}
/* cb 1782821826980170775 */

/* DESKTOP — adres ook uitgelijnd (grid op alle viewports) */
html body .sc-foot-brand__row {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  column-gap: 0 !important;
  align-items: start !important;
}
html body .sc-foot-brand__row > svg:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  align-self: start !important;
  margin-top: 4px !important;
}
html body .sc-foot-brand__row .sc-foot-addr-line {
  grid-column: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex: none !important;
  line-height: 1.5 !important;
  display: block !important;
}
html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(1) { grid-row: 1 / 2 !important; }
html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(2) { grid-row: 2 / 3 !important; }
html body .sc-foot-brand__row .sc-foot-addr-line:nth-of-type(3) { grid-row: 3 / 4 !important; }
html body .sc-foot-brand__row a {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

/* MOBILE LOGO 150px — override HTML width="220" attribute */
@media (max-width: 1024px) {
  html body header.header .header__logo img[width],
  html body header.header img[width="220"],
  html body header.header img.header__normal-logo,
  html body header.header .header__normal-logo img,
  html body header.header .header__normal-logo > img,
  html body header.header > div .header__logo img {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    height: auto !important;
  }
}
/* cb 1782821908379877949 */

/* DRAWER op alle pagina's (incl. collection) — forceer WIT tekst */
@media (max-width: 1024px) {
  html body body > nav.navigation.horizontal *:not(.sc-drawer-close),
  body > nav.navigation.horizontal a,
  body > nav.navigation.horizontal a span,
  body > nav.navigation.horizontal menu-item,
  body > nav.navigation.horizontal menu-item a,
  body > nav.navigation.horizontal menu-item a span,
  body > nav.navigation.horizontal .menu_item-link,
  body > nav.navigation.horizontal .menu_item-link span,
  body > nav.navigation.horizontal .smooth-padding-hover,
  body > nav.navigation.horizontal li,
  body > nav.navigation.horizontal li a,
  body > nav.navigation.horizontal li a span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  /* Maar back-menu / close icons SVG mogen wit blijven */
  body > nav.navigation.horizontal svg,
  body > nav.navigation.horizontal path,
  body > nav.navigation.horizontal use {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}
/* cb 1782822205404024662 */

/* ULTRA-HIGH specificity drawer text white forceer */
html body body > nav.navigation.horizontal menu-item a span,
html body body > nav.navigation.horizontal .horizontal-list menu-item a span,
html body body > nav.navigation.horizontal ul li menu-item a span,
html body body > nav.navigation.horizontal ul li a span,
html body body > nav.navigation.horizontal a span,
html body body > nav.navigation.horizontal *,
html body > nav.navigation.horizontal *,
nav.navigation.horizontal[class*="fixed"] menu-item a span,
nav.navigation.horizontal[class*="fixed"] a span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* cb 1782822410697194725 */

/* DRAWER WIT TEKST — overrule body.collection/product/etc span rules */
body.collection > nav.navigation.horizontal *,
body.product > nav.navigation.horizontal *,
body.cart > nav.navigation.horizontal *,
body.page > nav.navigation.horizontal *,
body.search > nav.navigation.horizontal *,
body.list-collections > nav.navigation.horizontal *,
body.template-page > nav.navigation.horizontal *,
body[class] > nav.navigation.horizontal a,
body[class] > nav.navigation.horizontal a span,
body[class] > nav.navigation.horizontal menu-item,
body[class] > nav.navigation.horizontal menu-item a,
body[class] > nav.navigation.horizontal menu-item a span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* cb 1782822529480435266 */

/* HOGERE specificity dan body.collection span:not(...):not(...):not(...) — chain meer */
html body.collection > nav.navigation.horizontal a span,
html body.collection > nav.navigation.horizontal menu-item a span,
html body.collection > nav.navigation.horizontal .menu_item-link span,
html body.collection > nav.navigation.horizontal .smooth-padding-hover,
html body.collection > nav.navigation.horizontal a,
html body.collection > nav.navigation.horizontal menu-item a,
html body.collection > nav.navigation.horizontal .menu_item-link,
html body.product > nav.navigation.horizontal a span,
html body.product > nav.navigation.horizontal menu-item a span,
html body.product > nav.navigation.horizontal .menu_item-link span,
html body.product > nav.navigation.horizontal .smooth-padding-hover,
html body.product > nav.navigation.horizontal a,
html body.product > nav.navigation.horizontal menu-item a,
html body.cart > nav.navigation.horizontal a span,
html body.cart > nav.navigation.horizontal menu-item a span,
html body.cart > nav.navigation.horizontal a,
html body.page > nav.navigation.horizontal a span,
html body.page > nav.navigation.horizontal menu-item a span,
html body.page > nav.navigation.horizontal a,
html body.search > nav.navigation.horizontal a span,
html body.search > nav.navigation.horizontal a,
html body.list-collections > nav.navigation.horizontal a span,
html body.list-collections > nav.navigation.horizontal a {
  color: rgb(255,255,255) !important;
  -webkit-text-fill-color: rgb(255,255,255) !important;
}
/* cb 1782822571537436603 */

/* Cart icon — geen hover zoom */
html body .hover-svg-zoom,
html body .hover-svg-zoom:hover,
html body #cart-icon-bubble,
html body #cart-icon-bubble:hover,
html body .close-cart-button,
html body .close-cart-button:hover {
  transform: none !important;
  scale: 1 !important;
}
html body .hover-svg-zoom svg,
html body .hover-svg-zoom:hover svg,
html body #cart-icon-bubble svg,
html body #cart-icon-bubble:hover svg {
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}
/* cb 1782822830149037242 */

/* DRAWER — Mijn account link links uitlijnen (was centered uppercase) */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal li:has(.account-url) a,
  body > nav.navigation.horizontal li:has(a[href*="/account"]) a,
  body > nav.navigation.horizontal a.account-url,
  body > nav.navigation.horizontal a[href*="/account"]:not([href*="/account/recover"]) {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 24px !important;
  }
}
/* cb 1782823537158100593 */

/* DRAWER — Uitloggen óók links uitlijnen, zelfde padding als Mijn account */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal li:has(.account-logout) a,
  body > nav.navigation.horizontal a.account-logout,
  body > nav.navigation.horizontal a[href*="/logout"],
  body > nav.navigation.horizontal a[href*="/customer_identity/logout"] {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 24px !important;
  }
}
/* cb 1782823650683911066 */

/* DRAWER — Mijn account/Uitloggen: geen uppercase, normaal lettertype zoals Uitloggen */
@media (max-width: 1024px) {
  body > nav.navigation.horizontal a.account-url,
  body > nav.navigation.horizontal a.account-logout,
  body > nav.navigation.horizontal a[href*="/account"]:not([href*="/account/recover"]),
  body > nav.navigation.horizontal a[href*="/logout"],
  body > nav.navigation.horizontal a[href*="/customer_identity"],
  body > nav.navigation.horizontal li:has(.account-url) a,
  body > nav.navigation.horizontal li:has(.account-logout) a,
  body > nav.navigation.horizontal a.account-url *,
  body > nav.navigation.horizontal a.account-logout *,
  body > nav.navigation.horizontal a[href*="/account"]:not([href*="/account/recover"]) *,
  body > nav.navigation.horizontal a[href*="/logout"] *,
  body > nav.navigation.horizontal a[href*="/customer_identity"] * {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
  }
}
/* cb 1782824478091708165 */

/* MOBILE FILTER SIDEBAR — full viewport breedte + verberg empty Categorieën */
@media (max-width: 1024px) {
  html body .collection-filter,
  html body .collection-filter.vertical {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
  html body .collection-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Verberg .filter-item zonder content (zoals lege CATEGORIEËN) */
  html body .filter-item:not(:has(.collapsible-content)),
  html body .filter-item:has(.collapsible-content:empty),
  html body .filter-item:not(:has(a, li, input, button, .filter-content > *)),
  html body .filter-item > .collapsible-content:empty {
    display: none !important;
  }
  /* Defensive: empty .filter-content collapsed states */
  html body .filter-item .collapsible-content:not(.active):not(:has(*)) {
    display: none !important;
  }
}
/* cb 1782824796145257398 */

/* FILTER SIDEBAR mobile — full viewport + verberg lege Categorieën */
@media (max-width: 1024px) {
  html body .collection-filter,
  html body .collection-filter.vertical,
  html body div.collection-filter[class*="invisible"]:not(.invisible),
  html body div.collection-filter[class*="vertical"] {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Verberg de eerste filter-item (Categorieën) als ie geen content heeft */
  html body .filter-item:first-of-type:not(:has(.collapsible-content a)):not(:has(.collapsible-content li)):not(:has(.collapsible-content input)),
  html body .filter-blocks > .filter-item:first-child:not(:has(.collapsible-content > *)) {
    display: none !important;
  }
}
/* cb 1782824883155661742 */

/* Filter sidebar "Alles wissen" knop — wit tekst */
html body .facet-clear-all,
html body .facet-clear-all *,
html body facet-clear-all,
html body facet-clear-all *,
html body .facet-remove,
html body .facet-remove a,
html body .facet-remove button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* cb 1782825071439086080 */

/* Facet clear-all "Alles wissen" — wit forceer (override .btn-link) */
html body facet-clear-all,
html body facet-clear-all.active-facets__button-wrapper,
html body facet-clear-all.btn-link,
html body facet-clear-all *,
html body .facet-remove facet-clear-all,
html body .facet-remove facet-clear-all *,
html body .facet-clear-all,
html body .facet-clear-all * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}
/* cb 1782825173253737301 */
/* CACHE BUST 1782825643620884422 */

/* facet-clear-all wit ULTRA-FORCE via attribute selector */
html body facet-clear-all[class],
html body facet-clear-all[aria-label],
html body facet-clear-all[data-href] {
  color: rgb(255,255,255) !important;
  -webkit-text-fill-color: rgb(255,255,255) !important;
}

/* CART MOBIEL — compactere product item layout + verzendkosten initieel collapsed */
@media (max-width: 1024px) {
  /* Cart item: image links, info midden, qty rechts — compacte grid */
  html body.template-cart .cart-items tbody tr,
  html body.template-cart .cart__item,
  html body.template-cart .cart-item {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    grid-template-areas: 'img title trash' 'img price qty' !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 16px !important;
    border-bottom: 1px solid #eaeaea !important;
  }
  html body.template-cart .cart-item img,
  html body.template-cart .cart-item .cart-item__image,
  html body.template-cart .cart__item-image {
    grid-area: img !important;
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  html body.template-cart .cart-item .cart-item__name,
  html body.template-cart .cart-item .cart__item-title,
  html body.template-cart .cart-item .product-name,
  html body.template-cart .cart-item [class*="product-title"] {
    grid-area: title !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #07141a !important;
  }
  html body.template-cart .cart-item .cart-remove-button,
  html body.template-cart .cart-item .cart-item__remove,
  html body.template-cart .cart-item a[href*="quantity=0"] {
    grid-area: trash !important;
    justify-self: end !important;
    width: 32px !important;
    height: 32px !important;
  }
  html body.template-cart .cart-item .cart-item__price,
  html body.template-cart .cart-item .product-price,
  html body.template-cart .cart-item [class*="price"] {
    grid-area: price !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #07141a !important;
    align-self: center !important;
  }
  html body.template-cart .cart-item quantity-input,
  html body.template-cart .cart-item .quantity,
  html body.template-cart .cart-item .quantity-selector {
    grid-area: qty !important;
    justify-self: end !important;
    align-self: center !important;
  }

  /* Verzendkosten sectie initieel collapsed (klikken op heading om uit te klappen) */
  html body.template-cart cart-estimate .addon-content > div[data-address],
  html body.template-cart cart-estimate .addon-content > .addon-actions,
  html body.template-cart cart-estimate .addon-content > .addon-message {
    display: none !important;
  }
  /* Toon ze wanneer .open class op cart-estimate staat */
  html body.template-cart cart-estimate.open .addon-content > div[data-address],
  html body.template-cart cart-estimate.open .addon-content > .addon-actions,
  html body.template-cart cart-estimate.open .addon-content > .addon-message {
    display: block !important;
  }
  /* Heading cursor pointer */
  html body.template-cart cart-estimate h6 {
    cursor: pointer !important;
    position: relative !important;
    padding-right: 24px !important;
  }
  html body.template-cart cart-estimate h6::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
  }
  html body.template-cart cart-estimate.open h6::after { content: '−'; }
}
/* cb 1782825784002317863 */

/* CART MOBIEL — fix layout met juiste grid mapping (was 3 cols voor 5 cells) */
@media (max-width: 1024px) {
  /* Override de eerdere grid */
  html body.template-cart .cart-items tbody tr.cart-item,
  html body.template-cart tr.cart-item.page__cart-item,
  html body.template-cart .cart-item.page__cart-item {
    display: grid !important;
    grid-template-columns: 90px 1fr auto !important;
    grid-template-areas:
      'img title trash'
      'img price qty' !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
  }
  html body.template-cart .cart-item__media {
    grid-area: img !important;
    width: 90px !important;
    height: 90px !important;
    padding: 0 !important;
  }
  html body.template-cart .cart-item__media img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
  }
  html body.template-cart .cart-item__details {
    grid-area: title !important;
    padding: 0 !important;
    align-self: start !important;
  }
  html body.template-cart .cart-item__details .product-name,
  html body.template-cart .cart-item__details a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #07141a !important;
    line-height: 1.3 !important;
  }
  html body.template-cart .cart__page-price,
  html body.template-cart td.cart__page-price {
    grid-area: price !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #07141a !important;
    align-self: center !important;
    text-align: left !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }
  html body.template-cart .cart-item__quantity {
    grid-area: qty !important;
    padding: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }
  html body.template-cart .cart-item__totals,
  html body.template-cart .small-hide {
    display: none !important;
  }
  /* Verwijder trash uit een td en plaats hem in eigen area */
  html body.template-cart .cart-item .cart-remove-button,
  html body.template-cart .cart-item__details .cart-remove-button,
  html body.template-cart .cart-item a[href*="quantity=0"] {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    grid-area: auto !important;
  }
  html body.template-cart tr.cart-item {
    position: relative !important;
  }
}
/* cb 1782825976653333926 */

/* CART MOBIEL FINAL — ULTRA spec voor grid layout */
@media (max-width: 1024px) {
  html body.template-cart table tbody tr.cart-item.page__cart-item,
  html body.template-cart table tr.cart-item.page__cart-item,
  html body.template-cart .cart__items tr.cart-item,
  html body.template-cart table tr.cart-item {
    display: grid !important;
    grid-template-columns: 90px 1fr auto !important;
    grid-template-areas: 'img title trash' 'img price qty' 'img totals totals' !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
    position: relative !important;
  }
  html body.template-cart table tr.cart-item .cart-item__media { grid-area: img !important; padding: 0 !important; width: 90px !important; }
  html body.template-cart table tr.cart-item .cart-item__media img { width: 90px !important; height: 90px !important; object-fit: contain !important; }
  html body.template-cart table tr.cart-item .cart-item__details { grid-area: title !important; padding: 0 !important; align-self: start !important; }
  html body.template-cart table tr.cart-item .cart__page-price { grid-area: price !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #07141a !important; align-self: center !important; text-align: left !important; width: auto !important; height: auto !important; display: block !important; }
  html body.template-cart table tr.cart-item .cart-item__quantity { grid-area: qty !important; padding: 0 !important; justify-self: end !important; align-self: center !important; }
  html body.template-cart table tr.cart-item .cart-item__totals { display: none !important; }
}
/* cb v3 1782826126124677386 */

/* CART MOBIEL — eenvoudiger: image absolute links, content flowt natuurlijk */
@media (max-width: 1024px) {
  html body.template-cart table tr.cart-item,
  html body.template-cart table tr.cart-item.page__cart-item {
    display: block !important;
    position: relative !important;
    padding: 16px 16px 16px 116px !important;
    min-height: 100px !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    border-bottom: 1px solid #eaeaea !important;
  }
  html body.template-cart table tr.cart-item > td {
    display: block !important;
    padding: 0 !important;
    grid-area: auto !important;
    width: auto !important;
    border: 0 !important;
  }
  /* Image absolute links */
  html body.template-cart table tr.cart-item .cart-item__media {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
    width: 90px !important;
    height: 90px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__media img,
  html body.template-cart table tr.cart-item .cart-item__media a {
    width: 90px !important;
    height: 90px !important;
    display: block !important;
    object-fit: contain !important;
  }
  /* Title block */
  html body.template-cart table tr.cart-item .cart-item__details {
    margin-bottom: 8px !important;
    padding-right: 30px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__details .product-name,
  html body.template-cart table tr.cart-item .cart-item__details a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #07141a !important;
    line-height: 1.3 !important;
  }
  /* Trash absolute top-right */
  html body.template-cart table tr.cart-item .cart-remove-button,
  html body.template-cart table tr.cart-item .cart-item__details a[href*="quantity=0"],
  html body.template-cart table tr.cart-item a[href*="quantity=0"] {
    position: absolute !important;
    top: 16px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Price + qty: inline op zelfde row */
  html body.template-cart table tr.cart-item .cart__page-price {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #07141a !important;
    margin-right: 16px !important;
    vertical-align: middle !important;
  }
  html body.template-cart table tr.cart-item .cart-item__quantity {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-top: 8px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__totals {
    display: none !important;
  }
}
/* cb 1782826216372849099 */

/* CART DRAWER mobiel — fix position, full width, herstel layout */
@media (max-width: 1024px) {
  /* Drawer container: full viewport */
  html body .minicart__wrapper,
  html body .minicart__wrapper.bls__drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    right: 0 !important;
    left: auto !important;
  }
  /* Item layout — eenvoudig flex zoals Milano default, geen grid overrides */
  html body .minicart__wrapper .cart-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 30px 20px !important;
    gap: 15px !important;
    position: relative !important;
  }
  html body .minicart__wrapper .cart-item .minicart__product__image,
  html body .minicart__wrapper .cart-item .minicart__product__image a {
    width: 90px !important;
    min-width: 90px !important;
    flex: 0 0 90px !important;
  }
  html body .minicart__wrapper .cart-item .minicart__product__image img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
  }
  html body .minicart__wrapper .cart-item .minicart__product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  html body .minicart__wrapper .cart-item .minicart__product-name {
    display: block !important;
    width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
  }
  html body .minicart__wrapper .cart-item .minicart__product-name a {
    display: inline !important;
    color: #07141a !important;
  }

  /* Afrekenen knop full width */
  html body .minicart__wrapper .btn-checkout,
  html body .minicart__wrapper .cart__checkout-button,
  html body .minicart__wrapper button[name="checkout"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* cb 1782826535254145377 */
/* UNIQUE-MARKER-V25-1782826728008946377 */

/* DRAWER full viewport — match ID specificity */
@media (max-width: 1024px) {
  html body #header__minicart .minicart__wrapper,
  html body #header__minicart .minicart__wrapper.bls__drawer,
  html body #header__minicart > .minicart__wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: auto !important;
    right: 0 !important;
  }
}
/* cb 1782826809327108131 */

/* OVERRIDE: Afrekenen + viewcart binnen drawer NIET 44px (overrule header__action button rule) */
@media (max-width: 1024px) {
  html body header.header .header__action .minicart__wrapper button,
  html body header.header .header__action .minicart__wrapper button.btn-checkout,
  html body header.header .header__action .minicart__wrapper button[name="checkout"],
  html body header.header .header__action .minicart__wrapper .cart__checkout-button,
  html body header.header .header__action .minicart__wrapper a,
  html body header.header .header__action .minicart__wrapper .viewcart {
    width: auto !important;
    height: auto !important;
    display: block !important;
  }
  html body header.header .header__action .minicart__wrapper .btn-checkout,
  html body header.header .header__action .minicart__wrapper button[name="checkout"],
  html body header.header .header__action .minicart__wrapper .cart__checkout-button,
  html body header.header .header__action .minicart__wrapper .viewcart {
    width: 100% !important;
  }
}
/* cb 1782826913527936767 */

/* ============================================================== */
/* CART DRAWER — ID-level specificity (#header__minicart) wins     */
/* ============================================================== */
@media (max-width: 1024px) {
  /* Drawer wrapper full viewport width */
  html body #header__minicart .minicart__wrapper,
  html body #header__minicart .minicart__wrapper.bls__drawer,
  html body #header__minicart .minicart__wrapper.open {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    right: 0 !important;
    left: auto !important;
  }
  /* All drawer buttons + links: NOT 44x44, full-width */
  html body #header__minicart .minicart__wrapper button[name="checkout"],
  html body #header__minicart .minicart__wrapper button.btn-checkout,
  html body #header__minicart .minicart__wrapper button.cart__checkout-button,
  html body #header__minicart .minicart__wrapper .cart__checkout-button,
  html body #header__minicart .minicart__wrapper a.viewcart,
  html body #header__minicart .minicart__wrapper .viewcart,
  html body #header__minicart .minicart__wrapper a.btn-secondary {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    padding: 14px 20px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  /* Cart item row layout */
  html body #header__minicart .minicart__wrapper .cart-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 0 20px 20px !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    position: relative !important;
  }
  html body #header__minicart .minicart__wrapper .cart-item .minicart__product__image,
  html body #header__minicart .minicart__wrapper .cart-item .minicart__product__image a {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
  }
  html body #header__minicart .minicart__wrapper .cart-item .minicart__product__image img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  html body #header__minicart .minicart__wrapper .cart-item .minicart__product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  html body #header__minicart .minicart__wrapper .cart-item .minicart__product-name {
    display: block !important;
    width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
  }
}


/* AFREKENEN SAFETY NET v2 */
@media (max-width: 1024px) {
  html body #header__minicart .minicart__wrapper button[name="checkout"],
  html body #header__minicart .minicart__wrapper button.btn-checkout,
  html body #header__minicart .minicart__wrapper .btn-primary.btn-checkout,
  html body #header__minicart .minicart__wrapper .w-full.btn-checkout {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: block !important;
    padding: 14px 20px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
}



/* ============================================================== */
/* CART PAGINA MOBIEL — 2-row grid card: title|trash / price|qty   */
/* ============================================================== */
@media (max-width: 1024px) {
  html body.template-cart .cart-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  html body.template-cart .cart-table thead { display: none !important; }
  html body.template-cart .cart-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Card row: 90px image | 1fr middel | auto rechts */
  html body.template-cart table tr.cart-item,
  html body.template-cart .cart-table tbody tr.cart-item,
  html body.template-cart table tr.cart-item.page__cart-item {
    display: grid !important;
    grid-template-columns: 90px 1fr auto !important;
    grid-template-areas:
      "image title trash"
      "image price qty"   !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    align-items: center !important;
    padding: 14px 14px 14px 14px !important;
    margin: 0 0 12px !important;
    background: #ffffff !important;
    border: 1px solid #e6e8eb !important;
    border-radius: 10px !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(7,20,26,0.04) !important;
  }
  html body.template-cart table tr.cart-item > td {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
    background: transparent !important;
    vertical-align: top !important;
  }

  /* Image: kolom 1, beide rijen */
  html body.template-cart table tr.cart-item .cart-item__media,
  html body.template-cart table tr.cart-item td.cart-item__media {
    grid-area: image !important;
    align-self: center !important;
    width: 90px !important;
    height: 90px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__media a {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f7f8fa !important;
  }
  html body.template-cart table tr.cart-item .cart-item__media img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Title: rij 1, midden kolom */
  html body.template-cart table tr.cart-item .cart-item__details,
  html body.template-cart table tr.cart-item td.cart-item__details {
    grid-area: title !important;
    align-self: end !important;
    padding-right: 4px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__details .product-name,
  html body.template-cart table tr.cart-item .cart-item__details a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #07141a !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  /* Price: rij 2, midden kolom */
  html body.template-cart table tr.cart-item .cart__page-price,
  html body.template-cart table tr.cart-item td.cart__page-price {
    grid-area: price !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }
  html body.template-cart table tr.cart-item .cart-item__price-wrapper {
    display: block !important;
    text-align: left !important;
  }
  html body.template-cart table tr.cart-item .product-option {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #07141a !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
  }
  html body.template-cart table tr.cart-item .cart-item__old-price.product-option {
    font-weight: 500 !important;
    color: #8a8f95 !important;
    text-decoration: line-through !important;
  }

  /* Trash: rij 1 rechts (boven qty) — alleen <a> stylen, custom element transparant */
  html body.template-cart table tr.cart-item cart-remove-button {
    grid-area: trash !important;
    justify-self: end !important;
    align-self: start !important;
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  html body.template-cart table tr.cart-item cart-remove-button > a,
  html body.template-cart table tr.cart-item a[href*="quantity=0"]:not(cart-remove-button > a):not(:where(cart-remove-button) a) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #07141a !important;
    padding: 4px !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  /* Anchors die DIRECT in de cart row hangen (geen custom element wrap) krijgen ook de stijl */
  html body.template-cart table tr.cart-item > td > a[href*="quantity=0"],
  html body.template-cart table tr.cart-item > a[href*="quantity=0"] {
    grid-area: trash !important;
    justify-self: end !important;
    align-self: start !important;
  }
  html body.template-cart table tr.cart-item cart-remove-button svg,
  html body.template-cart table tr.cart-item a[href*="quantity=0"] svg {
    width: 21px !important;
    height: 21px !important;
  }

  /* Qty: rij 2 rechts (onder trash) */
  html body.template-cart table tr.cart-item .cart-item__quantity,
  html body.template-cart table tr.cart-item td.cart-item__quantity {
    grid-area: qty !important;
    display: flex !important;
    justify-self: end !important;
    align-self: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 130px !important;
  }
  html body.template-cart table tr.cart-item .cart-item__quantity > * {
    margin: 0 !important;
  }

  /* Totals + small-hide niet tonen op mobiel */
  html body.template-cart table tr.cart-item .cart-item__totals,
  html body.template-cart table tr.cart-item td.cart-item__totals,
  html body.template-cart table tr.cart-item .small-hide {
    display: none !important;
  }
}
/* cb cart-2row 1782852500 */

/* Footer mobiel — minder padding links/rechts/onder */
@media (max-width: 1024px) {
  html body footer.footer,
  html body footer.footer.gradient {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
  }
  html body footer.footer .container,
  html body footer.footer .footer__content,
  html body footer.footer > .grid,
  html body footer.footer .footer__row,
  html body footer.footer .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body footer.footer .footer__bottom,
  html body footer.footer .footer__copyright {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }
}
/* cb footer-mobile 1782965000 */

/* Contact hero paragraaf + footer specialist-tag: wit */
html body .sc-contact-hero p,
html body section.sc-contact-hero p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
html body footer .sc-foot-brand__tag,
html body footer.footer .sc-foot-brand__tag,
html body .sc-foot-brand p.sc-foot-brand__tag {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
/* cb white-tags 1782970000 */

/* Cart pagina — minder marge tussen heading en cart-items */
html body.template-cart .sec__page-heading,
html body.template-cart section.page-title .section,
html body.template-cart .shopify-section.page-title .section {
  margin-bottom: 20px !important;
  padding-top: 32px !important;
}
html body.template-cart .main-cart {
  margin-top: 10px !important;
}
html body.template-cart .page-title.text-center {
  margin-bottom: 10px !important;
}
@media (max-width: 1024px) {
  html body.template-cart .sec__page-heading,
  html body.template-cart section.page-title .section,
  html body.template-cart .shopify-section.page-title .section {
    margin-bottom: 12px !important;
    padding-top: 20px !important;
  }
  html body.template-cart .main-cart {
    margin-top: 4px !important;
  }
}
/* cb cart-margins 1782975000 */

/* Cart pagina — desktop 100px ruimte onder de cart section */
@media (min-width: 1025px) {
  html body.template-cart .main-cart {
    margin-bottom: 100px !important;
  }
  html body.template-cart .page-cart {
    padding-bottom: 40px !important;
  }
}
/* cb cart-bottom-desktop 1782980000 */

/* ============================================================== */
/* HEADER LOGO — final consolidated override, no distortion       */
/* ============================================================== */
html body header.header .header__logo img,
html body header.header .header__logo a img,
html body header.header .site-header__logo img {
  filter: none !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
@media (max-width: 1024px) {
  html body header.header .header__logo img,
  html body header.header .header__logo a img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img {
    width: auto !important;
    max-width: 175px !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    filter: none !important;
  }
}
@media (max-width: 600px) {
  html body header.header .header__logo img,
  html body header.header .header__logo a img,
  html body header.header h1.header__heading img,
  html body header.header a[href="/"] img {
    max-width: 150px !important;
  }
}
/* cb logo-clean 1782990000 */

/* Merken pagina brand-logo tegels — ontwijk de bulk .sc-brandsp img rule */
html body .sc-brandsp .sc-brandsp__logo {
  max-height: 48px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
html body .sc-brandsp .sc-brandsp__logo-wrap {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
/* cb merken-logos 1782990500 */

/* Collectie product afbeeldingen — contain in witte tegel (geen crop) */
body.collection .product-item__media--ratio,
body.collection [style*="--aspect-ratio"],
body.search .product-item__media--ratio,
body.search [style*="--aspect-ratio"] {
  background: #ffffff !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
body.collection .product-item__media--ratio > picture > *,
body.collection .product-item__media--ratio > .product-image,
body.collection .product-item__media--ratio > *:first-child,
body.collection [style*="--aspect-ratio"] > picture > *,
body.collection [style*="--aspect-ratio"] > *:first-child,
body.collection .product-item__media--ratio img,
body.search .product-item__media--ratio > picture > *,
body.search .product-item__media--ratio img {
  object-fit: contain !important;
  padding: 0 !important;
}
/* cb collection-contain 1782990800 */

/* PDP main image — contain in plaats van cover (was cropped door critical.css [--aspect-ratio] cover regel) */
body.product .product__media-item [style*="--aspect-ratio"] > *,
body.product .product__media-item [style*="--aspect-ratio"] > picture > *,
body.product .product__media-list [style*="--aspect-ratio"] > *,
body.product .swiper-slide [style*="--aspect-ratio"] > picture > *,
body.product .product__gallery [style*="--aspect-ratio"] > *:first-child,
body.product .product__gallery [style*="--aspect-ratio"] > picture > *,
body.product .product__media > picture > *,
body.product .product__media picture > * {
  object-fit: contain !important;
}
body.product .product__media-item,
body.product .product__gallery .swiper-slide {
  background: #ffffff !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
/* cb pdp-contain 1783000000 */

/* Footer 4-kolom layout — brand col compact, contact col nette lijnen */
.sc-foot-brand--logo-only { display: block; }
.sc-foot-brand--logo-only .sc-foot-brand__tag { margin-top: 12px !important; max-width: 240px; }
.sc-foot-brand--contact .sc-foot-brand__row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sc-foot-brand--contact .sc-foot-brand__col { display: flex; flex-direction: column; gap: 2px; }
.sc-foot-brand--contact h4.sc-foot-head { font-size: 13px; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 16px !important; color: #ffffff; }
@media (max-width: 900px) {
  .footer__block,
  footer .footer__block { width: 50% !important; margin-bottom: 20px !important; }
}
@media (max-width: 600px) {
  .footer__block,
  footer .footer__block { width: 100% !important; }
}
/* cb footer-4col 1783001000 */

/* Footer 4-kolommen force via grid — Milano gebruikt .footer-block (met dash) */
/* removed old .footer__middle grid — was causing empty columns because only 1 child */

/* Footer 4-kolom grid direct op .footer__blocks (het echte parent element) */
@media (min-width: 901px) {
  html body footer .footer__blocks {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  html body footer .footer__blocks > .footer-block {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  html body footer .footer__blocks {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  html body footer .footer__blocks > .footer-block { width: 100% !important; margin: 0 !important; }
}
@media (max-width: 600px) {
  html body footer .footer__blocks {
    display: block !important;
  }
  html body footer .footer__blocks > .footer-block { width: 100% !important; margin: 0 0 20px !important; }
}
/* cb footer-blocks-grid 1783065000 */


/* Ensure .stretch_width parent + .footer__blocks fill available width for grid layout */
html body footer .footer__middle,
html body footer .footer__middle > .stretch_width {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
html body footer .footer__blocks {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
/* cb footer-fill 1783066000 */

/* Copyright centered at all widths */
.footer_bottom-inner,
.footer__copyright {
  text-align: center !important;
}
.footer_bottom-inner,
.footer__bottom {
  justify-content: center !important;
}
.footer__payment {
  flex-grow: 0 !important;
}

/* Collection pages: breadcrumb duplicates the H1 right below it */
body.collection .page-title-breadcrumb {
  display: none !important;
}

/* Header dropdown: hover state dark navy with white text */
html body header.header .submenu a:hover,
html body header.header .submenu menu-item a:hover,
html body header.header .subchildmenu a:hover {
  background: #07141a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body header.header .submenu a:hover span,
html body header.header .submenu menu-item a:hover span,
html body header.header .subchildmenu a:hover span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
}

/* Popups (tingle modals: share, ask-question): dark navy instead of white */
.tingle-modal-box,
.tingle-modal-box__content,
.tingle-modal-box__header {
  background: #07141a !important;
  color: #ffffff !important;
}
.tingle-modal-box__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.tingle-modal-box .title-popup,
.tingle-modal-box .heading-color,
.tingle-modal-box .share-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.tingle-modal-box .light-dark-grey {
  color: rgba(255, 255, 255, 0.7) !important;
}
.tingle-modal-box copy-button.bg-dark {
  background: #309dc6 !important;
}
.tingle-modal-box .copy__url {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.tingle-modal-box .copy__url span {
  color: rgba(255, 255, 255, 0.75) !important;
}
.tingle-modal-box .tooltip:hover {
  color: #309dc6 !important;
}

/* Dropdown hover: dark navy block with white text, all DOM variants, max specificity */
html body header.header .submenu li:hover a,
html body header.header .submenu li:hover a *,
html body header.header .submenu menu-item:hover a,
html body header.header .submenu menu-item:hover a *,
html body header.header nav .submenu li:hover a,
html body header.header nav .submenu li:hover a *,
html body header.header nav.navigation.horizontal .submenu li:hover a,
html body header.header nav.navigation.horizontal .submenu li:hover a *,
html body header.header nav.navigation.horizontal .submenu menu-item:hover a,
html body header.header nav.navigation.horizontal .submenu menu-item:hover a * {
  background: #07141a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Product description: dark text instead of muted grey */
html body.product main .collapsible-content_inner,
html body.product main .collapsible-content_inner p,
html body.product main .collapsible-content_inner li,
html body.product main .collapsible-content_inner span,
html body.product main .collapsible-content_inner strong,
html body.product main .product_description,
html body.product main .product_description p {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Header aligned with footer: same 1440px box, logo grid fills the row */
@media (min-width: 1025px) {
  html body header.header .header__inner {
    max-width: 1440px !important;
  }
  html body header.header .header__inner .logo-position {
    width: 100% !important;
    justify-content: space-between !important;
  }
}
@media (min-width: 1025px) {
  html body header.header .header__inner > .stretch_width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* USP top bar in the same 1440px box as header and footer */
html body .sc-usptop .sc-usptop__wrap {
  max-width: 1440px !important;
}


/* Product page white background override */
html:has(body.product),
html body.product {
  background: #ffffff !important;
}


/* v41: focused PDP and homepage visual polish */

/* PDP: remove the divider below Ask a question / Share. */
html body.product .product-addons {
  border-bottom: 0 !important;
}

/* PDP: hide the circular previous/next controls over the main product image. */
html body.product .media-main-swiper .swiper-actions.main-slide__navigation {
  display: none !important;
}

/* PDP: give every additional-image thumbnail a visible border. */
html body.product .thumbnail-slide [class*="media-gallery__"]::after {
  border: 1px solid #cdd9e3 !important;
}
html body.product .thumbnail-slide [class*="media-gallery__"].swiper-slide-thumb-active::after {
  border-color: var(--sc-accent) !important;
}

/* PDP: align breadcrumb content with the product media column. */
html body.product section.breadcrumbs {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.product section.breadcrumbs .breadcrumb-list,
html body.product section.breadcrumbs .breadcrumb-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* PDP: add breathing room before Ask a question / Share only while Description is collapsed. */
html body.product collapsible-block.bls-toggle:not(.active) + .product-addons {
  margin-top: 18px !important;
}

/* Homepage: keep every Popular products image area the same square size. */
.sc-light .sc-pgrid .sc-pcard__media {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
.sc-light .sc-pgrid .sc-pcard__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Homepage: improve contrast for the Specialist section supporting text. */
.sc-dist .sc-dist__inner > div > p {
  color: #ffffff !important;
}


/* v42: readable Popular products titles */
.sc-light .sc-pgrid .sc-pcard__title {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
.sc-light .sc-pgrid .sc-pcard__row {
  margin-top: auto !important;
  padding-top: 14px !important;
}


/* v43: horizontally swipeable mobile USP band */
@media (max-width: 767px) {
  .sc-light .sc-uspsLight__wrap {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding: 30px 0 24px !important;
    scrollbar-width: none;
  }
  .sc-light .sc-uspsLight__wrap::-webkit-scrollbar {
    display: none;
  }
  .sc-light .sc-uspsLight__item {
    flex: 0 0 86% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }
}


/* v44: mobile filter, collection footer and contrast corrections */

/* Homepage: force the Specialist supporting copy to full white. */
html body .sc-distwrap.sc-dist .sc-dist__inner > div > p,
html body .sc-distwrap .sc-dist__inner p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* PDP: remove the Ask a question / Share divider in every product body variant. */
html:has(body.product) body .product-addons,
html body.product .product-addons,
html body.template-product .product-addons {
  border: 0 !important;
  border-bottom: 0 !important;
  border-block-end: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
html:has(body.product) body .product-addons::before,
html:has(body.product) body .product-addons::after,
html body.product .product-addons::before,
html body.product .product-addons::after,
html body.template-product .product-addons::before,
html body.template-product .product-addons::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Collection mobile filter: scrolling content with a non-overlapping light action bar. */
@media (max-width: 1024.98px) {
  html body.collection .collection-filter {
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  html body.collection .collection-filter .collection-sidebar.drawer {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
  }
  html body.collection .collection-filter .sidebar-header {
    flex: 0 0 auto !important;
    background: #ffffff !important;
  }
  html body.collection .collection-filter .filter-blocks {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 30px !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.collection .collection-filter .filter-action-bottom {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 15px 30px !important;
    background: #ffffff !important;
    border-top: 1px solid #e6e9ee !important;
    box-shadow: 0 -6px 18px rgba(7, 20, 26, .08) !important;
  }
  html body.collection .collection-filter .filter-action-bottom facet-clear-all {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
  }
}

/* Collection footer: retain the same readable dark-footer palette as the rest of the site. */
html body.collection .shopify-section-group-footer-group,
html body.collection .shopify-section-group-footer-group footer,
html body.collection footer.footer,
html body.collection footer.footer.gradient {
  background: #050f14 !important;
  background-color: #050f14 !important;
}
html body.collection footer .sc-foot-brand__tag,
html body.collection footer .sc-foot-head,
html body.collection footer .sc-foot-list a,
html body.collection footer .sc-foot-brand__row,
html body.collection footer .sc-foot-brand__row span,
html body.collection footer .sc-foot-brand__kvk,
html body.collection footer .footer__copyright,
html body.collection footer .footer_bottom-inner {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
html body.collection footer .sc-foot-brand--contact a {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}

/* Collection cards: make the complete product-image tile white. */
html body.collection .product-item__media,
html body.collection .product-item__media--ratio,
html body.collection .product-item__media--ratio > picture,
html body.collection .product-item__media--ratio > .product-image,
html body.collection .product-item__media--ratio .responsive-image,
html body.collection .product-item__media--ratio img {
  background: #ffffff !important;
  background-color: #ffffff !important;
}


/* v45: scrollable mobile collection filter for every filter layout */
@media (max-width: 1024.98px) {
  html body.collection .collection-filter > .collection-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
  }
  html body.collection .collection-filter > .collection-sidebar > .filter-blocks {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 30px !important;
  }
  html body.collection .collection-filter > .collection-sidebar > .filter-action-bottom {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}


/* v46: centered infinite mobile USP carousel */
.sc-uspsLight__dots {
  display: none;
}
@media (max-width: 767px) {
  .sc-light .sc-uspsLight__wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    padding: 30px 0 20px !important;
  }
  .sc-light .sc-uspsLight__item {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 18px !important;
    text-align: center !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always;
  }
  .sc-light .sc-uspsLight__head {
    justify-content: center !important;
  }
  .sc-light .sc-uspsLight__text {
    max-width: 330px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
  .sc-uspsLight__dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  .sc-uspsLight__dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cdd9e3;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }
  .sc-uspsLight__dot.is-active {
    width: 22px;
    background: #309dc6;
  }
}


/* v47: aligned mobile filter actions */
@media (max-width: 1024.98px) {
  html body.collection .collection-filter .filter-action-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  html body.collection .collection-filter .filter-action-bottom .facet-remove,
  html body.collection .collection-filter .filter-action-bottom facet-clear-all,
  html body.collection .collection-filter .filter-action-bottom facet-apply-canvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  html body.collection .collection-filter .filter-action-bottom facet-clear-all {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    background: #ffffff !important;
    border: 1px solid #cdd9e3 !important;
    text-decoration: none !important;
  }
  html body.collection .collection-filter .filter-action-bottom facet-clear-all::before,
  html body.collection .collection-filter .filter-action-bottom facet-clear-all::after {
    display: none !important;
  }
  html body.collection .collection-filter .filter-action-bottom facet-apply-canvas {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    background: #fff500 !important;
    border: 1px solid #fff500 !important;
  }
}


/* v48: simplified mobile collection toolbar */
@media (max-width: 1024.98px) {
  html body.collection .toolbar-products .show-type-products {
    display: none !important;
  }
  html body.collection .toolbar-products .toolbar-sorter {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  html body.collection .toolbar-products .toolbar-sorter .select-custom,
  html body.collection .toolbar-products .toolbar-sorter select-sorter {
    margin-left: auto !important;
  }
}


/* v49: polished mobile sorting bottom sheet */
@media (max-width: 1024.98px) {
  html body.collection .toolbar-sorter .facet-filters__sort {
    position: fixed !important;
    top: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70dvh, 540px) !important;
    margin: 0 !important;
    padding: 22px 20px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid #cdd9e3 !important;
    border-top: 3px solid #309dc6 !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 50px rgba(7, 20, 26, .24) !important;
    z-index: 2147483647 !important;
  }
  html body.collection .toolbar-sorter .facet-filters__sort::before {
    content: 'Sorteren op';
    display: block;
    margin: 0 0 12px;
    padding: 0 0 14px;
    color: #07141a;
    font-family: var(--sc-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e6e9ee;
  }
  html body.collection .toolbar-sorter .facet-filters__sort > icon-close {
    display: none !important;
  }
  html body.collection .toolbar-sorter .facet-filters__sort > .h-full {
    max-height: calc(min(70dvh, 540px) - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    text-align: left !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.collection .toolbar-sorter .facet-filters__sort filter-sort {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 12px 34px 12px 2px !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    border-bottom: 1px solid #eef2f5 !important;
  }
  html body.collection .toolbar-sorter .facet-filters__sort filter-sort:last-child {
    border-bottom: 0 !important;
  }
  html body.collection .toolbar-sorter .facet-filters__sort filter-sort[selected='selected'] {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-weight: 800 !important;
    background: #f7faff !important;
  }
  html body.collection .toolbar-sorter .facet-filters__sort filter-sort[selected='selected']::after {
    content: '✓';
    position: absolute;
    right: 8px;
    color: #309dc6;
    font-size: 16px;
    font-weight: 800;
  }
}


/* v50: readable mobile submenu return bar */
@media (max-width: 1024.98px) {
  html body .navigation .submenu > .hidden-1025.grey-bg {
    background: #050f14 !important;
    background-color: #050f14 !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
  }
  html body .navigation .submenu > .hidden-1025.grey-bg back-menu,
  html body .navigation .submenu > .hidden-1025.grey-bg close-menu,
  html body .navigation .submenu > .hidden-1025.grey-bg back-menu *,
  html body .navigation .submenu > .hidden-1025.grey-bg close-menu * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: currentColor !important;
  }
  html body .navigation .submenu > .hidden-1025.grey-bg back-menu:focus,
  html body .navigation .submenu > .hidden-1025.grey-bg back-menu:hover {
    color: #309dc6 !important;
    -webkit-text-fill-color: #309dc6 !important;
  }
}


/* v51: zoomed-out contained PDP main image */
html body.product .media-main-swiper .media-gallery__image {
  --sc-pdp-image-inset: clamp(20px, 3vw, 40px);
  background: #ffffff !important;
}
html body.product .media-main-swiper .media-gallery__image > img,
html body.template-product .media-main-swiper .media-gallery__image > img {
  top: var(--sc-pdp-image-inset) !important;
  left: var(--sc-pdp-image-inset) !important;
  width: calc(100% - var(--sc-pdp-image-inset) - var(--sc-pdp-image-inset)) !important;
  height: calc(100% - var(--sc-pdp-image-inset) - var(--sc-pdp-image-inset)) !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}
html body.product .media-main-swiper .media-gallery__image > picture,
html body.template-product .media-main-swiper .media-gallery__image > picture {
  top: var(--sc-pdp-image-inset) !important;
  left: var(--sc-pdp-image-inset) !important;
  width: calc(100% - var(--sc-pdp-image-inset) - var(--sc-pdp-image-inset)) !important;
  height: calc(100% - var(--sc-pdp-image-inset) - var(--sc-pdp-image-inset)) !important;
}
html body.product .media-main-swiper .media-gallery__image > picture > img,
html body.template-product .media-main-swiper .media-gallery__image > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}


/* v52: zoomed-out contained PDP thumbnails */
html body.product .thumbnail-slide .media-gallery__image,
html body.template-product .thumbnail-slide .media-gallery__image {
  --sc-pdp-thumb-inset: 8px;
  background: #ffffff !important;
}
html body.product .thumbnail-slide .media-gallery__image > img,
html body.template-product .thumbnail-slide .media-gallery__image > img {
  top: var(--sc-pdp-thumb-inset) !important;
  left: var(--sc-pdp-thumb-inset) !important;
  width: calc(100% - var(--sc-pdp-thumb-inset) - var(--sc-pdp-thumb-inset)) !important;
  height: calc(100% - var(--sc-pdp-thumb-inset) - var(--sc-pdp-thumb-inset)) !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}
html body.product .thumbnail-slide .media-gallery__image > picture,
html body.template-product .thumbnail-slide .media-gallery__image > picture {
  top: var(--sc-pdp-thumb-inset) !important;
  left: var(--sc-pdp-thumb-inset) !important;
  width: calc(100% - var(--sc-pdp-thumb-inset) - var(--sc-pdp-thumb-inset)) !important;
  height: calc(100% - var(--sc-pdp-thumb-inset) - var(--sc-pdp-thumb-inset)) !important;
}
html body.product .thumbnail-slide .media-gallery__image > picture > img,
html body.template-product .thumbnail-slide .media-gallery__image > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}

/* PDP TITLE + PRICE SCALE — v53 */
html body.product .product-detail__title {
  font-size: clamp(34px, 3.35vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

html body.product .product-detail__price,
html body.product .product-detail__price .price,
html body.product .product-detail__price .price-same-style {
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  html body.product .product-detail__title {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  html body.product .product-detail__price,
  html body.product .product-detail__price .price,
  html body.product .product-detail__price .price-same-style {
    font-size: 20px !important;
  }
}


/* Prijs op aanvraag — geen snel-toevoegen of quickview op de kaart; de
   productpagina toont daar het offerteformulier (snippets/sc-offerte.liquid). */
html body .product-item.sc-poa .product-item__product-form,
html body .product-item.sc-poa [data-item="overlay-quickbuy"],
html body .product-item.sc-poa button-quickview,
html body .product-item.sc-poa select-option {
  display: none !important;
}
html body .sc-poa-prijs {
  font-size: .9em !important;
  font-weight: 700 !important;
}

/* Variantknoppen (capaciteit e.d.) op de lichte productpagina: donkere tekst
   met rand; gekozen = donker vlak met witte tekst. Zonder dit nam het label de
   witte tekstkleur van het donkere kleurschema over en viel het weg. */
html body .product-form__input label.product__item-option {
  background: #fff !important;
  border: 1px solid #cfd8e1 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .product-form__input label.product__item-option span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
html body .product-form__input label.product__item-option:hover {
  border-color: #07141a !important;
}
html body .product-form__input input:checked + label.product__item-option {
  background: #07141a !important;
  border-color: #07141a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body .product-form__input input.option-disabled + label.product__item-option {
  opacity: .45;
  text-decoration: line-through;
}

/* Uitklapmenu in de header: wit vlak met donkere tekst op elk niveau, ook
   het derde niveau (.sub-children-menu), dat anders de donkere achtergrond
   van het kleurschema overneemt (klasse "gradient"). De oude regels in
   theme.liquid gelden alleen voor html.no-js en vallen weg zodra JS laadt. */
@media (min-width: 1025px) {
  html body header .navigation .submenu,
  html body header .navigation .subchildmenu,
  html body header .navigation .sub-children-menu,
  html body header .navigation .sub-children-menu ul,
  html body header .navigation .sub-children-menu li,
  html body header .navigation .subchildmenu > li {
    background: #ffffff !important;
  }
  html body header .navigation .sub-children-menu {
    border: 1px solid #e6e8eb !important;
    box-shadow: 0 8px 24px rgba(7,20,26,.08) !important;
  }
  html body header .navigation .submenu a,
  html body header .navigation .submenu a span,
  html body header .navigation .submenu .menu_item-link,
  html body header .navigation .submenu .menu_item-link span,
  html body header .navigation .sub-children-menu a,
  html body header .navigation .sub-children-menu a span,
  html body header .navigation .submenu open-children-toggle,
  html body header .navigation .submenu open-children-toggle svg {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    fill: currentColor;
  }
  html body header .navigation .submenu li:hover > menu-item,
  html body header .navigation .submenu li:hover > a,
  html body header .navigation .sub-children-menu li:hover {
    background: #07141a !important;
  }
  html body header .navigation .submenu li:hover > menu-item a,
  html body header .navigation .submenu li:hover > menu-item a span,
  html body header .navigation .submenu li:hover > menu-item open-children-toggle,
  html body header .navigation .sub-children-menu li:hover a,
  html body header .navigation .sub-children-menu li:hover a span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Uitklapmenu, definitieve versie. (De :not(#scm) is bewust: een id-selector
   wint van alle oudere regels, hoe specifiek die ook zijn.) Oorzaak van de onzichtbare tekst: oudere
   regels gaven elke link in een submenu een donkere achtergrond zodra een
   voorouder-<li> gehoverd werd ("li:hover a"), dus ook de links van het
   derde niveau, terwijl de tekst donker bleef. Hier wordt alleen de rij waar
   de muis op staat donker; verder alles wit met donkere tekst. De mobiele
   kop ("< Beveiligde opslag  x") hoort niet op desktop. */
@media (min-width: 1025px) {
  html body header.header li.level0:not(#scm) .submenu,
  html body header.header li.level0:not(#scm) .submenu ul,
  html body header.header li.level0:not(#scm) .submenu li {
    background: #fff !important;
  }
  html body header.header li.level0:not(#scm) .submenu a,
  html body header.header li.level0:not(#scm) .submenu a *,
  html body header.header li.level0:not(#scm) .submenu menu-item,
  html body header.header li.level0:not(#scm) .submenu menu-item * {
    background: transparent !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.hidden-1025,
  html body header.header li.level0:not(#scm) .submenu div.hidden-1025 {
    display: none !important;
  }
  /* rij onder de muis: donker met witte tekst */
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item,
  html body header.header li.level0:not(#scm) .submenu li.level-2:hover {
    background: #07141a !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item a,
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item a *,
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item open-children-toggle,
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item open-children-toggle *,
  html body header.header li.level0:not(#scm) .submenu li.level-2:hover > a,
  html body header.header li.level0:not(#scm) .submenu li.level-2:hover > a * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-1 > .sub-children-menu li.level-1:hover > menu-item { background: transparent !important; }
}

/* Rijen en links in het uitklapmenu over de volle breedte (dat deed eerder
   het inline-script; zie theme.liquid). */
@media (min-width: 1025px) {
  html body header.header li.level0:not(#scm) .submenu li:not(.hidden-1025),
  html body header.header li.level0:not(#scm) .submenu menu-item {
    display: block;
    width: 100%;
  }
  html body header.header li.level0:not(#scm) .submenu a {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Zoekpop-up: de knop in het zoekveld is een vergrootglas, geen blauw blokje.
   De algemene regel voor zoekknoppen (blauw, hoofdletters) is bedoeld voor
   de zoekpagina en maakte hier het icoon onzichtbaar. */
html body header-search .search-modal .search__button,
html body .search-modal .search__button {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  width: 44px !important;
  height: 100% !important;
  min-height: 44px;
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  left: auto !important;
}
html body header-search .search-modal .search__button svg,
html body header-search .search-modal .search__button svg use {
  stroke: #fff !important;
  fill: none !important;
  color: #fff !important;
}

/* Zoekpop-up, tweede ronde. :not(#scm) laat deze regels winnen van de
   algemene zoek- en kleurregels hierboven (een id weegt zwaarder dan klassen). */
html body header-search .search-modal:not(#scm) .search__button,
html body .search-modal:not(#scm) .search__button {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  width: 44px !important;
  height: 100% !important;
  min-height: 44px;
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  left: auto !important;
}
html body .search-modal:not(#scm) .search__button svg,
html body .search-modal:not(#scm) .search__button svg use {
  stroke: #fff !important;
  fill: none !important;
  color: #fff !important;
}
/* Resultaten in het witte vlak: donkere tekst (titel, merk, prijs). */
html body .popup-search:not(#scm) .product-item,
html body .popup-search:not(#scm) .product-item *,
html body .search-modal:not(#scm) .product-item,
html body .search-modal:not(#scm) .product-item *,
html body predictive-search:not(#scm) .product-item *,
html body #predictive-search-results:not(#scm) .product-item * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Zoekpop-up: de juiste containerklassen (.search__type-popup, .predictive-search). */
html body .search__type-popup:not(#scm) .search__button {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  width: 44px !important;
  height: 100% !important;
  min-height: 44px;
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  left: auto !important;
}
html body .search__type-popup:not(#scm) .search__button svg,
html body .search__type-popup:not(#scm) .search__button svg use {
  stroke: #fff !important;
  fill: none !important;
  color: #fff !important;
}
html body .predictive-search:not(#scm) .product-item,
html body .predictive-search:not(#scm) .product-item * {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}

/* Zoekveld in de pop-up over de volle breedte van het kader, zodat de knop
   met het vergrootglas rechts in het veld staat en niet halverwege. */
html body .search__type-popup:not(#scm) .field,
html body .search__type-popup:not(#scm) .field__input,
html body .search__type-popup:not(#scm) .search__input {
  width: 100% !important;
  max-width: none !important;
}
html body .search__type-popup:not(#scm) .search__input {
  padding-right: 64px !important;
}
html body .search__type-popup:not(#scm) .search__button {
  top: 50% !important;
  bottom: auto !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Zoekpop-up boven de header (z-index 100) en een korte, ondoorzichtige
   overgang: anders schijnt het menu erdoorheen en blijft de winkelwagen
   boven het donkere vlak staan. */
html body .search__type-popup:not(#scm) {
  z-index: 2000 !important;
  background: #07141a !important;
  transition: opacity .12s ease, visibility .12s ease !important;
}
html body .search__type-popup:not(#scm) .fluid_container {
  padding-top: 24px;
}
html body .search__type-popup:not(#scm) .btn-search-close {
  z-index: 2001;
}

/* ====== Zoekpop-up: herontwerp ======
   Donker scherm, gecentreerd, groot zoekveld, resultaten als nette kaarten.
   Alle regels met :not(#scm) zodat ze winnen van de oudere zoek- en kleurregels. */
html body .search__type-popup:not(#scm) .fluid_container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 32px 56px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
html body .search__type-popup:not(#scm) .search-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
  margin: 0 0 20px !important;
}
html body .search__type-popup:not(#scm) form.search-modal__form {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
html body .search__type-popup:not(#scm) .field {
  height: 62px;
  align-items: center;
  background: #0e232c;
  border: 1px solid rgba(255,255,255,.18);
  transition: border-color .15s;
}
html body .search__type-popup:not(#scm) .field:focus-within {
  border-color: #309dc6;
  box-shadow: 0 0 0 3px rgba(48,157,198,.18);
}
html body .search__type-popup:not(#scm) .search__input {
  height: 100% !important;
  font-size: 18px !important;
  padding: 0 72px 0 22px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body .search__type-popup:not(#scm) .search__input::placeholder {
  color: rgba(255,255,255,.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,.55) !important;
}
html body .search__type-popup:not(#scm) .search__button {
  right: 12px !important;
}
html body .search__type-popup:not(#scm) .btn-search-close {
  position: fixed !important;
  top: 22px;
  right: 28px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: transparent !important;
  color: #fff !important;
}
html body .search__type-popup:not(#scm) .btn-search-close:hover {
  background: #fff500 !important;
  color: #07141a !important;
}
html body .search__type-popup:not(#scm) .btn-search-close svg,
html body .search__type-popup:not(#scm) .btn-search-close use {
  color: inherit !important;
  stroke: currentColor !important;
}
/* resultaten */
html body .search__type-popup:not(#scm) .predictive-search,
html body .search__type-popup:not(#scm) .predictive-search--header,
html body .search__type-popup:not(#scm) .search-list-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .search__type-popup:not(#scm) .predictive-search {
  margin-top: 40px !important;
}
html body .search__type-popup:not(#scm) .search-results-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .search__type-popup:not(#scm) .search-results-list > * {
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
html body .search__type-popup:not(#scm) .product-item {
  background: #fff;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
html body .search__type-popup:not(#scm) .product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
html body .search__type-popup:not(#scm) .product-item__information {
  padding: 14px 16px 16px !important;
}
html body .search__type-popup:not(#scm) .product-item__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
html body .search__type-popup:not(#scm) .predictive-search a.btn,
html body .search__type-popup:not(#scm) .predictive-search .btn-primary,
html body .search__type-popup:not(#scm) .search-all-results a {
  display: table;
  margin: 32px auto 0 !important;
}
@media (max-width: 767px) {
  html body .search__type-popup:not(#scm) .fluid_container { padding: 64px 16px 40px; }
  html body .search__type-popup:not(#scm) .search-results-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
}

/* Zoekveld met rechte hoeken, zoals de rest van de site, en zonder dubbele rand. */
html body .search__type-popup:not(#scm) .field,
html body .search__type-popup:not(#scm) .search__input,
html body .search__type-popup:not(#scm) .field.btn-rounded {
  border-radius: 0 !important;
}
html body .search__type-popup:not(#scm) .search__input:focus,
html body .search__type-popup:not(#scm) .search__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html body .search__type-popup:not(#scm) .predictive-search,
html body .search__type-popup:not(#scm) .predictive-search > *,
html body .search__type-popup:not(#scm) .predictive-search--header > *,
html body .search__type-popup:not(#scm) .search-list-item > * {
  background: transparent !important;
  box-shadow: none !important;
}
html body .search__type-popup:not(#scm) .predictive-search .product-item {
  background: #fff !important;
}
html body .search__type-popup:not(#scm) .predictive-search h3,
html body .search__type-popup:not(#scm) .predictive-search .search-title,
html body .search__type-popup:not(#scm) .predictive-search--title {
  color: rgba(255,255,255,.7) !important;
  -webkit-text-fill-color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
}

/* ====== Zoekresultatenpagina: dezelfde lichte opmaak als de collectiepagina's ====== */
/* PLP sidebar (filters) */
body.search .collection-sidebar,
body.search .facets,
body.search aside,
body.search .filter-wrapper {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  padding: 26px !important;
  border-radius: 0 !important;
  color: #07141a !important;
}
body.search .facets *,
body.search .collection-sidebar * {
  color: #07141a !important;
}
body.search .facets__heading,
body.search .filter-group__heading,
body.search .collection-sidebar h4 {
  color: var(--sc-accent) !important;
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
/* Collection toolbar */
body.search .collection-toolbar,
body.search .toolbar {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.search .collection-toolbar * { color: #07141a !important; }
/* Sidebar/facets/toolbar on light bg */
body.search .collection-sidebar,
body.search .facets,
body.search aside,
body.search .filter-wrapper,
body.search .collection-toolbar,
body.search .toolbar {
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  color: #07141a !important;
}
body.search .collection-sidebar *,
body.search .facets *,
body.search aside *,
body.search .collection-toolbar *,
body.search .toolbar * {
  color: #07141a !important;
}
body.search .facets__heading,
body.search .filter-group__heading,
body.search .collection-sidebar h4 {
  color: var(--sc-accent) !important;
}
body.search p,
body.search li,
body.search span:not(.sc-foot-dot):not(.sc-foot-brand__row):not([class*="eyebrow"]) {
  color: #07141a !important;
}
/* ============================================================
   COLLECTION PRICE FILTER — light bg + working selection
   ============================================================ */
body.search .filter-range-slider,
body.search .price-slider,
body.search .noUi-target,
body.search .price-range__slider,
body.search .facets__price-slider {
  background: #cdd9e3 !important;
  border: none !important;
  height: 4px !important;
}
body.search .noUi-connect,
body.search .price-range__connect,
body.search .filter-range__progress {
  background: var(--sc-accent) !important;
}
body.search .noUi-handle,
body.search .price-range__handle,
body.search .filter-range__handle {
  background: #fff !important;
  border: 2px solid var(--sc-accent) !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 2px 6px rgba(48,157,198,.3) !important;
  cursor: pointer !important;
  top: -8px !important;
}
/* Price range input boxes — light */
body.search .min-price-range,
body.search .max-price-range,
body.search input[name*="price"],
body.search .price-input,
body.search .facets__price input {
  background: #fff !important;
  border: 1px solid #cdd9e3 !important;
  color: #07141a !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  font-family: var(--sc-font) !important;
  font-size: 13px !important;
  width: auto !important;
  min-width: 90px;
}
body.search .min-price-range:focus,
body.search .max-price-range:focus {
  border-color: var(--sc-accent) !important;
  outline: none;
}
body.search .price-range-divider,
body.search .facets__price-divider {
  color: #6c7787 !important;
}
/* Filter checkboxes - light styling */
body.search .facets__checkbox,
body.search input[type="checkbox"].facets__checkbox + label,
body.search .checkbox {
  background: #fff !important;
  border: 1.5px solid #cdd9e3 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
body.search .facets__checkbox:checked,
body.search input[type="checkbox"]:checked + .checkbox,
body.search .facets__item input:checked + .checkbox {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}
body.search .facets__checkbox:checked::after,
body.search input[type="checkbox"]:checked + .checkbox::after {
  content: '✓';
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
}
/* Filter labels readable on light bg */
body.search .facets__item label,
body.search .facet-item__label,
body.search .filter-options__item label {
  color: #07141a !important;
  cursor: pointer;
}
body.search .facets__item .count,
body.search .filter-count {
  color: #07141a !important;
}
/* Filter group titles cyan */
body.search .facets__heading,
body.search .filter-group__heading,
body.search .filter__heading,
body.search .collection-sidebar h4 {
  color: var(--sc-accent) !important;
  background: transparent !important;
}
/* Make sure selection clicks register (z-index) */
body.search .facets__item,
body.search .facets__list label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
no overlap
   ============================================================ */
body.search .collection-sidebar,
body.search aside.filters,
body.search .facets,
body.search .filter-wrapper,
body.search .filter-vertical {
  width: 260px !important;
  flex-shrink: 0 !important;
  padding: 24px !important;
  background: #fff !important;
  border: 1px solid #e6e9ee !important;
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}
body.search .filter-group,
body.search .facets__group {
  margin-bottom: 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid #eef2f5 !important;
  padding-bottom: 20px !important;
}
body.search .filter-group:last-child,
body.search .facets__group:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
body.search .filter-group__heading,
body.search .facets__heading {
  display: block !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  position: relative;
  border-bottom: 1px solid #eef2f5;
}
body.search .filter-group__content,
body.search .facets__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.search .filter-group__item,
body.search .facets__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body.search .filter-group__label,
body.search .facets__label,
body.search .facets__item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #07141a !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  line-height: 1.4 !important;
}
body.search .filter-group__count,
body.search .facets__item .count {
  margin-left: auto !important;
  font-family: var(--sc-font);
  font-size: 11px;
  color: #07141a !important;
}
/* Collection page main grid: sidebar + product grid */
body.search .collection-content,
body.search .collection__main,
body.search .main-collection-product > .container > .row {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}
/* Collection sidebar */
  body.search .collection-content,
body.search .main-collection-product > .container > .row {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }
body.search .collection-sidebar,
body.search .facets {
    width: 220px !important;
    padding: 18px !important;
  }
body.search .collection-sidebar,
body.search .facets {
    width: 100% !important;
    margin-bottom: 20px;
  }
html body.search .header__logo img {
  filter: none !important;
  background: transparent !important;
}
html body.search .collection-filter {
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
html body.search .collection-filter .collection-sidebar.drawer {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
  }
html body.search .collection-filter .sidebar-header {
    flex: 0 0 auto !important;
    background: #ffffff !important;
  }
html body.search .collection-filter .filter-blocks {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 30px !important;
    -webkit-overflow-scrolling: touch;
  }
html body.search .collection-filter .filter-action-bottom {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 15px 30px !important;
    background: #ffffff !important;
    border-top: 1px solid #e6e9ee !important;
    box-shadow: 0 -6px 18px rgba(7, 20, 26, .08) !important;
  }
html body.search .collection-filter .filter-action-bottom facet-clear-all {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
  }
html body.search .collection-filter > .collection-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
  }
html body.search .collection-filter > .collection-sidebar > .filter-blocks {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 30px !important;
  }
html body.search .collection-filter > .collection-sidebar > .filter-action-bottom {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
html body.search .collection-filter .filter-action-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
html body.search .collection-filter .filter-action-bottom .facet-remove,
html body.search .collection-filter .filter-action-bottom facet-clear-all,
html body.search .collection-filter .filter-action-bottom facet-apply-canvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    text-align: center !important;
  }
html body.search .collection-filter .filter-action-bottom facet-clear-all {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    background: #ffffff !important;
    border: 1px solid #cdd9e3 !important;
    text-decoration: none !important;
  }
html body.search .collection-filter .filter-action-bottom facet-clear-all::before,
html body.search .collection-filter .filter-action-bottom facet-clear-all::after {
    display: none !important;
  }
html body.search .collection-filter .filter-action-bottom facet-apply-canvas {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    background: #fff500 !important;
    border: 1px solid #fff500 !important;
  }
html body.search .toolbar-products .show-type-products {
    display: none !important;
  }
html body.search .toolbar-products .toolbar-sorter {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
html body.search .toolbar-products .toolbar-sorter .select-custom,
html body.search .toolbar-products .toolbar-sorter select-sorter {
    margin-left: auto !important;
  }
html body.search .toolbar-sorter .facet-filters__sort {
    position: fixed !important;
    top: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70dvh, 540px) !important;
    margin: 0 !important;
    padding: 22px 20px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid #cdd9e3 !important;
    border-top: 3px solid #309dc6 !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 50px rgba(7, 20, 26, .24) !important;
    z-index: 2147483647 !important;
  }
html body.search .toolbar-sorter .facet-filters__sort::before {
    content: 'Sorteren op';
    display: block;
    margin: 0 0 12px;
    padding: 0 0 14px;
    color: #07141a;
    font-family: var(--sc-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e6e9ee;
  }
html body.search .toolbar-sorter .facet-filters__sort > icon-close {
    display: none !important;
  }
html body.search .toolbar-sorter .facet-filters__sort > .h-full {
    max-height: calc(min(70dvh, 540px) - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    text-align: left !important;
    -webkit-overflow-scrolling: touch;
  }
html body.search .toolbar-sorter .facet-filters__sort filter-sort {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 12px 34px 12px 2px !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    border-bottom: 1px solid #eef2f5 !important;
  }
html body.search .toolbar-sorter .facet-filters__sort filter-sort:last-child {
    border-bottom: 0 !important;
  }
html body.search .toolbar-sorter .facet-filters__sort filter-sort[selected='selected'] {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    font-weight: 800 !important;
    background: #f7faff !important;
  }
html body.search .toolbar-sorter .facet-filters__sort filter-sort[selected='selected']::after {
    content: '✓';
    position: absolute;
    right: 8px;
    color: #309dc6;
    font-size: 16px;
    font-weight: 800;
  }
/* Zoekpagina: kop, broodkruimels en zoekbalk op de lichte pagina */
body.search .breadcrumbs,
body.search .breadcrumbs a,
body.search .breadcrumbs span,
body.search .breadcrumbs li {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
}
html body.search .search-form:not(#scm),
html body.search .search-form:not(#scm) .search-form,
html body.search .search-form:not(#scm) action-search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}
html body.search .search-form:not(#scm) form.search-modal__form {
  max-width: 720px;
  margin: 24px auto 8px !important;
  padding: 0 !important;
}
html body.search .search-form:not(#scm) .field {
  background: #fff !important;
  border: 1px solid #cfd8e1 !important;
  border-radius: 0 !important;
  height: 58px;
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  overflow: hidden;
}
html body.search .search-form:not(#scm) .field:focus-within {
  border-color: #309dc6 !important;
  box-shadow: 0 0 0 3px rgba(48,157,198,.15) !important;
}
html body.search .search-form:not(#scm) .field input[type="search"],
html body.search .search-form:not(#scm) .field input[type="text"] {
  height: 100% !important;
  font-size: 17px !important;
  padding: 0 20px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body.search .search-form:not(#scm) .field button {
  height: 100% !important;
  width: 64px !important;
  background: #fff500 !important;
  color: #07141a !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
html body.search .search-form:not(#scm) .field button svg,
html body.search .search-form:not(#scm) .field button svg use {
  stroke: #07141a !important;
  fill: none !important;
  color: #07141a !important;
}

/* Zoekpagina, tweede ronde: container, zijbalkkader en witruimte. */
html body.search .sec__collection-main .fluid_container:not(#scm) {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
html body.search .collection-filter:not(#scm) {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e6e9ee;
  padding: 0 24px 16px !important;
  box-sizing: border-box;
}
html body.search .collection-filter:not(#scm) .filter-blocks,
html body.search .collection-filter:not(#scm) .filter-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.search .title-wrapper-with-link:not(#scm) {
  margin-bottom: 32px !important;
}
html body.search .col-1025-remaining:not(#scm) {
  min-width: 0;
}

/* Onderbalk van de filterzijbalk ("Alles wissen" / "Toepassen"): alleen op
   mobiel. De klasse hidden-1025 verloor van .flex, waardoor de balk ook op
   desktop zichtbaar was. */
@media (min-width: 1025px) {
  html body .filter-action-bottom:not(#scm) {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  html body .filter-action-bottom:not(#scm) {
    display: flex !important;
    gap: 12px;
    align-items: stretch;
    padding: 14px 20px !important;
    background: #fff;
    border-top: 1px solid #e6e9ee;
  }
  html body .filter-action-bottom:not(#scm) .facet-clear-all,
  html body .filter-action-bottom:not(#scm) facet-clear-all {
    flex: 1;
    display: flex !important;
  }
  html body .filter-action-bottom:not(#scm) facet-clear-all,
  html body .filter-action-bottom:not(#scm) facet-apply-canvas {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
  }
  html body .filter-action-bottom:not(#scm) facet-clear-all {
    background: #fff !important;
    border: 1px solid #07141a !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    text-decoration: none !important;
  }
  html body .filter-action-bottom:not(#scm) facet-apply-canvas {
    background: #fff500 !important;
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
    border: 1px solid #fff500;
    --btn-padding-x: 1rem;
  }
  html body .filter-action-bottom:not(#scm) facet-apply-canvas * {
    color: #07141a !important;
    -webkit-text-fill-color: #07141a !important;
  }
}

/* Zoekpagina: de tussenruimte tussen zijbalk en resultaten is 30px, niet 60px;
   met 60px liep de resultatenkolom over de rechterrand. */
html body.search .sec__collection-main .flex.flex-nowrap.gap:not(#scm) {
  gap: 30px !important;
}

/* Ruimte tussen de laatste resultaten en de footer (zoek- en collectiepagina's). */
html body.search .sec__collection-main:not(#scm),
html body.collection .sec__collection-main:not(#scm),
html body.list-collections main:not(#scm) {
  padding-bottom: 96px !important;
}
@media (max-width: 767px) {
  html body.search .sec__collection-main:not(#scm),
  html body.collection .sec__collection-main:not(#scm) {
    padding-bottom: 64px !important;
  }
}

/* ====== Uitklapmenu: strakke rijen ======
   Eén regel per item: link links, pijltje (alleen bij submenu's) rechts in
   dezelfde rij. Alle rijen even hoog. Het pijltje stond eerder onder de link
   en buiten het paneel. */
@media (min-width: 1025px) {
  html body header.header li.level0:not(#scm) .submenu {
    min-width: 260px;
    padding: 6px 0 !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-1,
  html body header.header li.level0:not(#scm) .submenu li.level-2 {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eef1f5 !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-1:last-child,
  html body header.header li.level0:not(#scm) .submenu li.level-2:last-child {
    border-bottom: none !important;
  }
  html body header.header li.level0:not(#scm) .submenu menu-item {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 50px;
    border: none !important;
  }
  html body header.header li.level0:not(#scm) .submenu menu-item > a,
  html body header.header li.level0:not(#scm) .submenu li.level-2 > a {
    flex: 1;
    display: flex !important;
    align-items: center;
    min-height: 50px;
    padding: 0 44px 0 22px !important;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.2;
    box-sizing: border-box;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-2 > a {
    padding-right: 22px !important;
  }
  /* pijltje: rechts in de rij, verticaal gecentreerd, binnen het paneel */
  html body header.header li.level0:not(#scm) .submenu menu-item > open-children-toggle {
    position: absolute !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto !important;
    width: 44px;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #07141a;
  }
  html body header.header li.level0:not(#scm) .submenu menu-item > open-children-toggle svg {
    width: 7px;
    height: 12px;
    display: block !important;
    stroke: currentColor;
    fill: none;
    color: inherit !important;
  }
  html body header.header li.level0:not(#scm) .submenu li.level-1:hover > menu-item > open-children-toggle {
    color: #fff;
  }
  /* de grijze pijltjes die buiten het paneel stonden (niveau 0, mobiel-icoon) */
  html body header.header li.level0:not(#scm) > menu-item > open-children-toggle.static-1025 svg.hidden-1025 {
    display: none !important;
  }
}

/* Tweede paneel op één lijn met de rij waar je op staat. */
@media (min-width: 1025px) {
  html body header.header li.level0:not(#scm) .submenu .sub-children-menu {
    top: -7px !important;
    padding: 6px 0 !important;
  }
  html body header.header li.level0:not(#scm) .submenu .sub-children-menu > li,
  html body header.header li.level0:not(#scm) .submenu .sub-children-menu > ul,
  html body header.header li.level0:not(#scm) .submenu .sub-children-menu ul {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ====== Zoekpop-up, nieuw ontwerp ======
   Donker, licht wazig vlak met één wit paneel in het midden. Bovenin de
   zoekbalk (zoals op de zoekresultatenpagina), eronder de resultaten als
   compacte lijst met een kleine afbeelding, onderaan een balk naar alle
   resultaten. Alles met :not(#scm) om de eerdere pop-upregels te overrulen. */
html body .search__type-popup:not(#scm) {
  background: rgba(7, 20, 26, .82) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html body .search__type-popup:not(#scm) .fluid_container {
  position: relative;
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  height: auto;
  max-height: calc(100vh - 14vh);
  margin: 9vh auto 0;
  padding: 0 !important;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  overflow-y: auto;
  box-sizing: border-box;
}
/* kopregel */
html body .search__type-popup:not(#scm) .search-title {
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 26px 32px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}
/* zoekbalk */
html body .search__type-popup:not(#scm) .fluid_container > div.relative {
  padding: 14px 32px 0 !important;
  display: block !important;
}
html body .search__type-popup:not(#scm) form.search-modal__form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
html body .search__type-popup:not(#scm) .field {
  height: 60px;
  background: #fff !important;
  border: 1px solid #cfd8e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
}
html body .search__type-popup:not(#scm) .field:focus-within {
  border-color: #309dc6 !important;
  box-shadow: 0 0 0 3px rgba(48, 157, 198, .18) !important;
}
html body .search__type-popup:not(#scm) .search__input {
  height: 100% !important;
  padding: 0 70px 0 20px !important;
  font-size: 18px !important;
  background: transparent !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .search__type-popup:not(#scm) .search__input::placeholder {
  color: #7a8a96 !important;
  -webkit-text-fill-color: #7a8a96 !important;
}
html body .search__type-popup:not(#scm) .search__button {
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 62px !important;
  height: 100% !important;
  min-height: 0;
  background: #fff500 !important;
  color: #07141a !important;
}
html body .search__type-popup:not(#scm) .search__button svg,
html body .search__type-popup:not(#scm) .search__button svg use {
  stroke: #07141a !important;
  fill: none !important;
  color: #07141a !important;
}
/* wis-kruisje in het veld */
html body .search__type-popup:not(#scm) .field .search__clear,
html body .search__type-popup:not(#scm) .field [class*="clear"] {
  right: 72px !important;
  color: #7a8a96 !important;
}
/* sluitknop in de hoek van het paneel */
html body .search__type-popup:not(#scm) .btn-search-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  background: transparent !important;
  color: #07141a !important;
}
html body .search__type-popup:not(#scm) .btn-search-close svg,
html body .search__type-popup:not(#scm) .btn-search-close use {
  color: #07141a !important;
  stroke: #07141a !important;
}
html body .search__type-popup:not(#scm) .btn-search-close:hover {
  background: #eef1f5 !important;
}
/* resultaten */
html body .search__type-popup:not(#scm) .predictive-search--header,
html body .search__type-popup:not(#scm) .predictive-search,
html body .search__type-popup:not(#scm) .search-list-item {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: none !important;
}
html body .search__type-popup:not(#scm) .predictive-search--header.results {
  margin-top: 18px !important;
  border-top: 1px solid #eef1f5 !important;
}
html body .search__type-popup:not(#scm) .search-list-item > div:first-child {
  margin: 0 !important;
  padding: 16px 32px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
}
html body .search__type-popup:not(#scm) .search-list-item > div:first-child .heading-color,
html body .search__type-popup:not(#scm) .search-list-item > div:first-child span {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  font-weight: 800;
}
html body .search__type-popup:not(#scm) .search-results-list {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .search__type-popup:not(#scm) .search-results-list > .product-item {
  width: 100% !important;
  max-width: none !important;
  border: none;
  border-top: 1px solid #eef1f5;
  background: #fff;
  transform: none !important;
  box-shadow: none !important;
}
html body .search__type-popup:not(#scm) .search-results-list > .product-item:hover {
  background: #f4f7fa;
}
html body .search__type-popup:not(#scm) .search-results-list .product-item__wrapper {
  display: flex !important;
  align-items: center;
  gap: 18px;
  padding: 10px 32px !important;
  background: transparent !important;
}
html body .search__type-popup:not(#scm) .search-results-list .product-item__inner {
  flex: 0 0 68px;
  width: 68px !important;
  height: 68px;
  border: 1px solid #eef1f5;
  background: #fff;
}
html body .search__type-popup:not(#scm) .search-results-list .product-item__media--ratio,
html body .search__type-popup:not(#scm) .search-results-list .product-item__inner a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
html body .search__type-popup:not(#scm) .search-results-list .product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  position: static !important;
}
html body .search__type-popup:not(#scm) .search-results-list .product-item__information {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
html body .search__type-popup:not(#scm) .search-results-list .product-item__name {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* onderbalk: alle resultaten */
html body .search__type-popup:not(#scm) .predictive-search .btn,
html body .search__type-popup:not(#scm) .predictive-search a.btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 32px !important;
  background: #07141a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: left;
  box-sizing: border-box;
}
html body .search__type-popup:not(#scm) .predictive-search .btn:hover {
  background: #fff500 !important;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body .search__type-popup:not(#scm) .predictive-search .btn::after {
  content: "\2192";
  font-size: 18px;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  html body .search__type-popup:not(#scm) .fluid_container {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
  }
  html body .search__type-popup:not(#scm) .search-title,
  html body .search__type-popup:not(#scm) .fluid_container > div.relative {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  html body .search__type-popup:not(#scm) .search-results-list .product-item__wrapper,
  html body .search__type-popup:not(#scm) .search-list-item > div:first-child,
  html body .search__type-popup:not(#scm) .predictive-search .btn {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Zoekpop-up: paneelbreedte en miniaturen afdwingen. */
html body .search__type-popup:not(#scm) .fluid_container {
  width: min(880px, calc(100vw - 32px)) !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .search__type-popup:not(#scm) .search-results-list .product-image,
html body .search__type-popup:not(#scm) .search-results-list img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
@media (max-width: 767px) {
  html body .search__type-popup:not(#scm) .fluid_container {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Miniaturen in de zoeklijst: het verhoudingsvak van het thema (::before met
   padding-top) duwde de afbeelding onder de rand van het blokje. */
html body .search__type-popup:not(#scm) .search-results-list .product-item__media--ratio::before,
html body .search__type-popup:not(#scm) .search-results-list .product-item__media--ratio::after,
html body .search__type-popup:not(#scm) .search-results-list .product__media::before,
html body .search__type-popup:not(#scm) .search-results-list .product__media::after,
html body .search__type-popup:not(#scm) .search-results-list .product-item__inner::before,
html body .search__type-popup:not(#scm) .search-results-list .product-item__inner::after {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* ====== Zoekpaneel onder de header (geen schermvullende overlay) ======
   De pagina blijft zichtbaar; alleen het witte paneel ligt onder de header.
   --sc-header-bottom wordt door een klein script in theme.liquid gezet. */
html body .search__type-popup:not(#scm) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .search__type-popup:not(#scm) .fluid_container {
  position: absolute !important;
  top: calc(var(--sc-header-bottom, 92px) + 10px) !important;
  right: 28px !important;
  left: auto !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: none !important;
  margin: 0 !important;
  max-height: calc(100vh - var(--sc-header-bottom, 92px) - 28px) !important;
  border-top: 3px solid #309dc6;
  box-shadow: 0 22px 60px rgba(7, 20, 26, .32), 0 2px 8px rgba(7, 20, 26, .12) !important;
}
@media (max-width: 767px) {
  html body .search__type-popup:not(#scm) .fluid_container {
    top: var(--sc-header-bottom, 70px) !important;
    right: 0 !important;
    width: 100vw !important;
    height: auto !important;
    max-height: calc(100vh - var(--sc-header-bottom, 70px)) !important;
    margin: 0 !important;
  }
}

/* Zoekpaneel: geen donkere sluier over de pagina. Het thema zet die via
   .overlay::after (een scherm-vullend vlak) zodra een lade openstaat. */
html.open-search .overlay::after,
html.open-search body .overlay::after,
html.open-search .open.overlay::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* ====== Zoekkleuren rustiger ======
   Donkere knop met wit vergrootglas in plaats van felgeel, neutrale rand,
   blauw alleen als dunne focusrand. Geel blijft voor bestelknoppen. */
html body .search__type-popup:not(#scm) .field,
html body.search .search-form:not(#scm) .field {
  border: 1px solid #d5dde4 !important;
  box-shadow: none !important;
}
html body .search__type-popup:not(#scm) .field:focus-within,
html body.search .search-form:not(#scm) .field:focus-within {
  border-color: #309dc6 !important;
  box-shadow: none !important;
}
html body .search__type-popup:not(#scm) .search__input,
html body.search .search-form:not(#scm) .field input[type="search"] {
  box-shadow: none !important;
  outline: none !important;
}
html body .search__type-popup:not(#scm) .search__button,
html body.search .search-form:not(#scm) .field button {
  background: #07141a !important;
  color: #fff !important;
  border: none !important;
  transition: background .15s;
}
html body .search__type-popup:not(#scm) .search__button:hover,
html body.search .search-form:not(#scm) .field button:hover {
  background: #309dc6 !important;
}
html body .search__type-popup:not(#scm) .search__button svg,
html body .search__type-popup:not(#scm) .search__button svg use,
html body.search .search-form:not(#scm) .field button svg,
html body.search .search-form:not(#scm) .field button svg use {
  stroke: #fff !important;
  fill: none !important;
  color: #fff !important;
}
/* paneel: dunne blauwe lijn bovenaan vervangen door de huis-navy, subtielere schaduw */
html body .search__type-popup:not(#scm) .fluid_container {
  border-top: 3px solid #07141a !important;
  box-shadow: 0 18px 48px rgba(7, 20, 26, .22), 0 1px 4px rgba(7, 20, 26, .1) !important;
}
html body .search__type-popup:not(#scm) .search-title {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
}
/* onderbalk: hover blauw in plaats van geel */
html body .search__type-popup:not(#scm) .predictive-search .btn:hover {
  background: #309dc6 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body .search__type-popup:not(#scm) .search-results-list > .product-item:hover {
  background: #f2f6f8;
}

/* Zoekpaneel: ruimte onder het veld in elke toestand (leeg, na wissen, met
   resultaten), en het ongebruikte "snel zoeken"-blok weg. */
html body .search__type-popup:not(#scm) .fluid_container > div.relative {
  padding-bottom: 24px !important;
}
html body .search__type-popup:not(#scm) .quick-search {
  display: none !important;
}
html body .search__type-popup:not(#scm) .predictive-search--header,
html body .search__type-popup:not(#scm) .predictive-search--header.results {
  margin-top: 0 !important;
}
html body .search__type-popup:not(#scm) .predictive-search--header:empty,
html body .search__type-popup:not(#scm) .predictive-search--header:not(.results):not(:has(.product-item)) {
  display: none !important;
}
html body .search__type-popup:not(#scm) .fluid_container {
  height: auto !important;
  overflow-y: auto !important;
}

/* Het <form> om het zoekveld had zelf een blauwe rand (links/rechts), die als
   twee streepjes in het veld zichtbaar was. Alleen .field heeft een rand. */
html body .search__type-popup:not(#scm) form.search-modal__form,
html body.search .search-form:not(#scm) form.search-modal__form {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ====== Blog en artikelen: donkere tekst op de lichte pagina ======
   De pagina erft de witte tekstkleur van het donkere kleurschema. De donkere
   kopband van het blogoverzicht (.page-title) blijft wit. */
html body.blog main .shopify-section:not(.page-title):not(#scm) :is(.widget-title, .blog-posts-content, .blog-posts-content *, a.post-title, a.post-title *, time, .heading-color:not(.btn), h2, h3, h4, h5, h6, p, li, .article-card-date, .article-card-date *, .article-card-author span),
html body.article main :is(.single__post-header, .article-template, .sec__article):not(#scm) :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, time, .article-template__title, .section__header-heading, .article-card-date, .article-card-date *, .article-card-author span, .uppercase, .heading-color:not(.btn), .light-dark-grey),
html body.article main .breadcrumbs:not(#scm) :is(a, span, li),
html body.article main .sec__article:not(#scm) .blog-posts-content,
html body.article main .sec__article:not(#scm) .blog-posts-content *,
html body.article main .sec__article:not(#scm) a.post-title,
html body.article main .sec__article:not(#scm) .widget-title,
html body.article main .sec__article:not(#scm) .single__post-header > a,
html body.article main .sec__article:not(#scm) .single__post-header div > a:not(.article-card-author a) {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body.article main .sec__article:not(#scm) .article-card-author a,
html body.blog main .article-card-author a {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}
html body.article main .sec__article:not(#scm) .article-template__title {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
}

/* Blog, tweede ronde: tag-pil (wit op donker), auteurregel en datum. */
html body.blog main .blog-posts-category a:not(#scm),
html body.blog main .blog-posts-category a *:not(#scm) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body.blog main .blog-posts-author:not(#scm),
html body.blog main .blog-posts-author *:not(a):not(a *):not(#scm),
html body.blog main .blog-posts-bottom:not(#scm),
html body.article main .article_meta:not(#scm),
html body.article main .article-card-author:not(#scm),
html body.article main .article-card-author span:not(#scm),
html body.article main .article-card-date:not(#scm) {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
}
html body.blog main .blog-posts-author a:not(#scm),
html body.article main .article-card-author a:not(#scm) {
  color: #309dc6 !important;
  -webkit-text-fill-color: #309dc6 !important;
}

/* ====== Blog: boxed, met marges ======
   Het blogoverzicht liep tot aan de randen van het scherm. Nu een vaste
   maximale breedte, ruimte links/rechts en onder, en geen lege blokken. */
html body.blog .sec__blog-list:not(#scm) {
  padding-top: 56px !important;
  padding-bottom: 96px !important;
}
html body.blog .sec__blog-list:not(#scm) .fluid_container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box;
}
html body.blog .sec__blog-list:not(#scm) .blog-grid-container {
  gap: 48px !important;
}
html body.blog .sec__blog-list:not(#scm) .main-blog {
  min-width: 0;
}
html body.article .sec__article:not(#scm) {
  padding-top: 24px !important;
  padding-bottom: 96px !important;
}
/* lege zijbalkblokken: de afbeeldingsbanner zonder afbeelding en de
   categorielijst zonder categorieën */
html body.blog .blog_sidebar:not(#scm) .banner,
html body.blog .blog_sidebar:not(#scm) .widget:not(:has(li, a, .flex, .listSidebarBlog)) {
  display: none !important;
}
@media (max-width: 767px) {
  html body.blog .sec__blog-list:not(#scm) .fluid_container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body.blog .sec__blog-list:not(#scm) {
    padding-top: 32px !important;
    padding-bottom: 64px !important;
  }
}

/* Datum onder blogkaarten (ook bij gerelateerde artikelen): rustig grijs. */
html body.blog main .blog-posts-date:not(#scm),
html body.blog main .blog-posts-date *:not(#scm),
html body.article main .blog-posts-date:not(#scm),
html body.article main .blog-posts-date *:not(#scm),
html body.article main .blog-post-related :is(time, .blog-posts-date, .post-date):not(#scm) {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
}

/* Artikelafbeelding: onder titel en datum, binnen de tekstbreedte (840px),
   in een lijstje met vaste hoogte; de afbeelding wordt niet uitgerekt maar
   netjes gecentreerd. Bronafbeeldingen zijn klein (500px), dus niet opblazen. */
html body.article main .rounded-corner-item.text-center:not(#scm) {
  max-width: 840px;
  margin: 8px auto 40px !important;
}
html body.article main .article-template__hero-small:not(#scm),
html body.article main .article-template__hero-medium:not(#scm),
html body.article main .article-template__hero-large:not(#scm) {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 840 / 400;
  background: #eef2f5;
  border: 1px solid #e6e9ee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 !important;
}
html body.article main .article-template__hero-small:not(#scm) img,
html body.article main .article-template__hero-medium:not(#scm) img,
html body.article main .article-template__hero-large:not(#scm) img {
  position: static !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto;
}
@media (max-width: 767px) {
  html body.article main .article-template__hero-small:not(#scm) { aspect-ratio: 4 / 3; }
}
html body.article main .rounded-corner-item.text-center:not(#scm) {
  margin-top: 32px !important;
}

/* Blogoverzicht: kopband met dezelfde ruimte als de donkere kopband op de
   contactpagina (80px boven, 60px onder), breadcrumb en titel met lucht, en
   dezelfde boxed breedte als de lijst eronder. */
html body.blog section.page-title:not(#scm) .sec__page-heading {
  padding-top: 72px !important;
  padding-bottom: 64px !important;
}
html body.blog section.page-title:not(#scm) .stretch_width {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box;
}
html body.blog section.page-title:not(#scm) .heading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
html body.blog section.page-title:not(#scm) .breadcrumbs {
  margin: 0 !important;
}
html body.blog section.page-title:not(#scm) h1 {
  margin: 0 !important;
  line-height: 1.1;
}
@media (max-width: 767px) {
  html body.blog section.page-title:not(#scm) .sec__page-heading {
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }
  html body.blog section.page-title:not(#scm) .stretch_width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body.blog section.page-title:not(#scm) h1 { font-size: 40px; }
}

/* ====== FAQ in artikelen: uitklapbaar (details/summary) ====== */
html body.article main .sc-faq:not(#scm) {
  margin: 20px 0 8px;
}
html body.article main details.sc-faq__item:not(#scm) {
  background: #fff;
  border: 1px solid #e3e8ee;
  margin: 0 0 10px;
  transition: border-color .15s, box-shadow .15s;
}
html body.article main details.sc-faq__item:not(#scm):hover {
  border-color: #c9d3dc;
}
html body.article main details.sc-faq__item[open]:not(#scm) {
  border-color: #309dc6;
  box-shadow: 0 6px 20px rgba(7, 20, 26, .06);
}
html body.article main details.sc-faq__item > summary:not(#scm) {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body.article main details.sc-faq__item > summary:not(#scm)::-webkit-details-marker { display: none; }
html body.article main details.sc-faq__item > summary:not(#scm)::marker { content: ''; }
html body.article main details.sc-faq__item > summary:not(#scm)::before,
html body.article main details.sc-faq__item > summary:not(#scm)::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #07141a;
  transform: translateY(-50%);
  transition: transform .2s, opacity .2s;
}
html body.article main details.sc-faq__item > summary:not(#scm)::after {
  transform: translateY(-50%) rotate(90deg);
}
html body.article main details.sc-faq__item[open] > summary:not(#scm)::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
html body.article main details.sc-faq__item > summary:not(#scm):focus-visible {
  outline: 2px solid #309dc6;
  outline-offset: -2px;
}
html body.article main .sc-faq__antwoord:not(#scm) {
  padding: 0 22px 20px;
}
html body.article main .sc-faq__antwoord:not(#scm) p {
  margin: 0 !important;
}

/* ====== Artikelpagina: rustige, leesbare opmaak ======
   Kop, broodkruimels en tekst op één kolom van 840px; links alleen in de
   artikeltekst blauw en onderstreept; kopjes in gewone letters. */
html body.article main .single-post-breadcrumbs:not(#scm) {
  max-width: 840px;
  margin: 0 auto;
  padding: 36px 0 0 !important;
}
html body.article main .single-post-breadcrumbs:not(#scm) a,
html body.article main .single-post-breadcrumbs:not(#scm) span,
html body.article main .single-post-breadcrumbs:not(#scm) li {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
  text-decoration: none !important;
  font-size: 14px;
}
html body.article main .single-post-breadcrumbs:not(#scm) a:hover {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
  text-decoration: underline !important;
}
html body.article main .single-post-breadcrumbs:not(#scm) li:last-child span,
html body.article main .single-post-breadcrumbs:not(#scm) li:last-child {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
/* categorie-label boven de titel */
html body.article main article.article-template > div.lh-normal.flex:not(#scm) {
  justify-content: center;
  margin-top: 40px !important;
}
html body.article main article.article-template > div.lh-normal.flex a:not(#scm),
html body.article main article.article-template > div.lh-normal.flex span:not(#scm) {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #1f7fa3 !important;
  -webkit-text-fill-color: #1f7fa3 !important;
}
/* titel en datum */
html body.article main .single__post-header:not(#scm) {
  margin-top: 14px !important;
}
html body.article main .article-template__title:not(#scm) {
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em;
  margin: 0 !important;
}
html body.article main .article_meta:not(#scm) {
  margin-top: 18px !important;
  padding-bottom: 32px;
  border-bottom: 1px solid #e6e9ee;
  font-size: 14px;
}
/* artikeltekst */
html body.article main .article-template__content:not(#scm) {
  margin-top: 36px !important;
  font-size: 17px;
  line-height: 1.8;
}
html body.article main .article-template__content:not(#scm) p {
  margin: 0 0 20px !important;
}
html body.article main .article-template__content:not(#scm) h2 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: -.005em;
  margin: 52px 0 14px !important;
}
html body.article main .article-template__content:not(#scm) h3 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  margin: 32px 0 10px !important;
}
html body.article main .article-template__content:not(#scm) ul,
html body.article main .article-template__content:not(#scm) ol {
  margin: 0 0 22px !important;
  padding-left: 22px !important;
}
html body.article main .article-template__content:not(#scm) li {
  margin-bottom: 8px;
}
html body.article main .article-template__content:not(#scm) a:not(.btn) {
  color: #1f7fa3 !important;
  -webkit-text-fill-color: #1f7fa3 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html body.article main .article-template__content:not(#scm) a:not(.btn):hover {
  color: #07141a !important;
  -webkit-text-fill-color: #07141a !important;
}
html body.article main .article-template__content:not(#scm) iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 8px 0 28px;
}

/* Labels: en Deel: onder het artikel */
html body.article main .article-template .heading-style:not(#scm),
html body.article main .article-template .mt-40 > span:not(#scm) {
  color: #4a5b6c !important;
  -webkit-text-fill-color: #4a5b6c !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* v97: artikelkop links, categorielabel en delen weg */
html body.article main article.article-template > div.lh-normal.flex:not(#scm) { display: none !important; }
html body.article main .single__post-header:not(#scm) { text-align: left !important; margin-top: 0 !important; }
html body.article main .single__post-header:not(#scm) .article-template__title { text-align: left !important; }
html body.article main .article_meta:not(#scm) { justify-content: flex-start !important; }
html body.article main .article-template social-share:not(#scm),
html body.article main .article-template :is(div,section):has(> social-share):not(#scm) { display: none !important; }

/* v98: blogkaarten gelijke afbeeldingsverhouding */
html body .blog-posts-image:not(#scm) > a {
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  position: relative !important;
  background: #fff !important;
  border: 1px solid #e6e9ee;
}
html body .blog-posts-image:not(#scm) > a img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 12px;
}

/* v99: zijmarge artikelen op mobiel/tablet */
@media (max-width: 1024px) {
  html body.article main .sec__article:not(#scm) .article-template { padding-left: 16px !important; padding-right: 16px !important; }
}

/* v100: vorig/volgend bericht zonder titel op mobiel */
@media (max-width: 767px) {
  html body.article main .blog-previous-next:not(#scm) h6 { display: none !important; }
}

/* v101: losse sluitknop achter de zoekknop */
html body .btn-search-close:not(#scm) { display: none !important; }