/** Shopify CDN: Minification failed

Line 3145:0 Unexpected "}"
Line 3516:18 Unexpected "{"
Line 3516:27 Expected ":"
Line 3516:34 Unexpected "{"
Line 3521:18 Unexpected "{"
Line 3521:27 Expected ":"
Line 3527:18 Unexpected "{"
Line 3527:27 Expected ":"
Line 3532:18 Unexpected "{"
Line 3532:27 Expected ":"
... and 12 more hidden warnings

**/
/* ================================
   BEGIN custom LAVERTU styling (global)
   ================================ */

/* Alleen productpagina's iets donkerder tekst geven */
.template-product body,
.template-product p,
.template-product ul,
.template-product .product__description,
.template-product .product__policies {
  color: #222;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111;
}
button, .btn, .nav, .menu, a.nav-link,
.shopify-payment-button__button--unbranded {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
}

/* === Productpagina – typografie consistent === */
.product,
.product__title,
.product__subtitle,
.product__price,
.product__tax-note,
.product__sku,
.product__vendor,
.product__accordion,
.product__accordion-item,
.product__accordion-content,
.collapsible-tab,
.collapsible-content,
.collapsible-trigger,
.collapsible__inner,
.collapsible__content,
.product-form,
.product-form__buttons,
.product__description,
.product__media,
.product__reviews,
.product__policies,
.product__text,
.shopify-section--product {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 16px;
}

/* Titels & prijs */
.product__title { font-weight: 600; letter-spacing: 0.01em; }
.product__price { font-weight: 500; font-size: 1.05rem; }

/* Knoppen op PDP */
.product-form__buttons button,
.shopify-payment-button button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Accordion/FAQ inhoud */
.product__reviews,
.product__accordion-content,
.collapsible__inner {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Beschrijving spacing */
.product__description p { margin-bottom: 0.8rem; }

/* ================================
   END global typography
   ================================ */


/* ================================
   LAVERTU — Global CTAs & Variants (base)
   ================================ */

:root {
  --lav-btn-bg: #111;
  --lav-btn-text: #fff;
  --lav-btn-bg-hover: #000;
  --lav-btn-disabled: #9aa0a6;

  --lav-pill-text: #111;
  --lav-pill-border: #d9d9d9;
  --lav-pill-bg: #fff;
  --lav-pill-text-active: #fff;
  --lav-pill-bg-active: #111;
  --lav-pill-border-active: #111;

  --lav-radius-pill: 9999px;
  --lav-letterspace: .08em;
}

/* PRIMARY BUTTONS — general (Add to cart, Buy now, Quick add) */
.product-form__buttons .button,
.product-form__buttons button,
.shopify-payment-button__button--unbranded,
.quick-add__submit,
.button--add-to-cart,
.button[name="add"],
button[type="submit"].button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: var(--lav-letterspace);
  text-transform: uppercase;
  border-radius: var(--lav-radius-pill);
  padding: 0.9rem 1.4rem;
  line-height: 1;
  border: 1px solid var(--lav-btn-bg);
  background: var(--lav-btn-bg);
  color: var(--lav-btn-text);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.product-form__buttons .button:hover,
.product-form__buttons button:hover,
.shopify-payment-button__button--unbranded:hover,
.quick-add__submit:hover,
.button--add-to-cart:hover,
.button[name="add"]:hover,
button[type="submit"].button:hover {
  background: var(--lav-btn-bg-hover);
  border-color: var(--lav-btn-bg-hover);
  transform: translateY(-1px);
}

/* Disabled */
.product-form__buttons .button:disabled,
button:disabled {
  opacity: .55;
  cursor: not-allowed;
  border-color: var(--lav-btn-disabled);
  background: var(--lav-btn-disabled);
}


/* ================================
   LAVERTU — Variant Pills (Shade / Type as radios)
   Symmetry 8.1.0
   ================================ */

/* Kleinere “pill” varianten op product- en collectiepagina’s */
.template-product  .product-form__input input[type="radio"] + label,
.template-collection .product-form__input input[type="radio"] + label {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.68rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  min-height: auto !important;
  border: 1px solid #d9d9d9 !important;
  font-weight: 600;
  text-transform: uppercase;
}

/* Hover */
.template-product  .product-form__input input[type="radio"] + label:hover,
.template-collection .product-form__input input[type="radio"] + label:hover {
  transform: translateY(-1px);
  border-color: #111 !important;
}

/* Actief */
.template-product  .product-form__input input[type="radio"]:checked + label,
.template-collection .product-form__input input[type="radio"]:checked + label {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* Disabled */
.template-product  .product-form__input input[type="radio"][disabled] + label,
.template-collection .product-form__input input[type="radio"][disabled] + label {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}


/* ============================================
   LAVERTU — Text Variant Labels (non-swatch)
   Alleen productpagina’s
   ============================================ */

.template-product .product-form__input .product-form__single-selector label:not(.swatch) {
  padding: 0.55rem 1.0rem !important;
  font-size: 0.70rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  border: 1px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto !important;
  height: auto !important;
}

/* Hover */
.template-product .product-form__input .product-form__single-selector label:not(.swatch):hover {
  transform: translateY(-1px);
}

/* Actief */
.template-product .product-form__input input[type="radio"]:checked + label:not(.swatch) {
  background: #111 !important;
  color: #fff !important;
}

/* Disabled */
.template-product .product-form__input input[type="radio"][disabled] + label:not(.swatch) {
  opacity: .45 !important;
  cursor: not-allowed !important;
}


/* ================================
   LAVERTU — TYPE buttons (Complete / Refill)
   Kleine pill-stijl knoppen op PDP
   ================================ */

/* TYPE-knoppen zijn echte <button>-elementen (button--secondary) */
.template-product .product-form__option .button--secondary,
.template-product .product-form__option button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.72rem;
  line-height: 1;

  padding: 0.45rem 1.0rem;
  border-radius: 9999px;
  border: 1px solid #111;
  background: #fff;
  color: #111;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform .18s ease,
              background-color .18s ease,
              border-color .18s ease,
              color .18s ease;
}

/* Hover */
.template-product .product-form__option .button--secondary:hover,
.template-product .product-form__option button:hover {
  transform: translateY(-1px);
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Actief / geselecteerd (Symmetry gebruikt aria-pressed="true") */
.template-product .product-form__option .button--secondary[aria-pressed="true"],
.template-product .product-form__option button[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: none;
}

/* Disabled */
.template-product .product-form__option .button--secondary[disabled],
.template-product .product-form__option button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Zorgt dat de titel dezelfde uitlijning/breedte heeft als je content */
#shopify-section-template--27282488951127__custom_liquid_TNhfnr .lavertu-page-title-wrapper {
  max-width: 780px;      /* zelfde als de policy-block */
  margin: 0 auto;        /* centreert de container */
}

/* Pagina-titel in duidelijke, Refy-achtige stijl */
.lavertu-page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;             /* iets groter zodat het echt als paginatitel voelt */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  text-align: left;

  padding-top: 1.4rem;
  padding-bottom: 0.9rem;
  margin: 0 0 0.4rem 0;

  border-bottom: 1px solid #E6E6E6;  /* subtiele lijn onder de titel */
}

/* Mobile finetuning */
@media (max-width: 600px) {
  .lavertu-page-title {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    padding-top: 1.1rem;
    padding-bottom: 0.7rem;
  }
}

/* ----------------------------------------
   1) Verklein witte ruimte bovenaan pagina
---------------------------------------- */
.template-page .page-width,
.template-page .shopify-section {
  padding-top: 1rem !important; /* was ±40–60px */
}

/* Verklein ruimte vóór jouw custom titel-wrapper */
.lavertu-page-title-wrapper {
  margin-top: 0.4rem !important;
}


/* ----------------------------------------
   2) Titel: duidelijker, strakker, premium
---------------------------------------- */
.lavertu-page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;                 /* iets groter zodat het als hoofdheading voelt */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  text-align: left;

  padding-top: 0.6rem;
  padding-bottom: 0.8rem;
  margin: 0 0 0.6rem 0;

  border-bottom: 1px solid #E2E2E2; /* subtieler + verfijnder */
}


/* ----------------------------------------
   3) Content onder de titel: duidelijker structuur
---------------------------------------- */
.policy-block {
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.7;
  color: #333;
  font-size: 0.92rem;
}

.policy-block h3 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  margin-top: 1.6rem;
  margin-bottom: 0.8rem;
}

.policy-block p {
  margin-bottom: 0.9rem;
  color: #555;
}

/* ----------------------------------------
   4) Mobile fine tuning
---------------------------------------- */
@media (max-width: 600px) {
  .lavertu-page-title {
    font-size: 0.88rem;
    padding-top: 0.4rem;
    padding-bottom: 0.6rem;
  }

  .policy-block {
    font-size: 0.88rem;
  }
}

/* -------------------------------
   SUBHEADINGS (H2/H3 STYLE UPGRADE)
   For Shipping / Payment / Return sections
--------------------------------*/

/* Algemene subkop-styling */
.page-shipping-policy h2,
.page-shipping-policy h3,
.page-shipping-policy .custom-subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #222; /* Donkerder voor duidelijkheid */
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
}

/* Extra spacing onder de titel */
.page-shipping-policy .lavertu-page-title {
  margin-bottom: 2rem;
}

/* Tekst eronder zachter — betere hiërarchie */
.page-shipping-policy p {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.7;
}

/* Lijn onder subtitels (heel subtiel, luxe look) */
.page-shipping-policy h2::after,
.page-shipping-policy h3::after,
.page-shipping-policy .custom-subheading::after {
  content: "";
  display: block;
  margin-top: 0.35rem;
  width: 32px;
  height: 1px;
  background-color: #e2e2e2;
}

/* ========================================
   LAVERTU — Shipping / Payment / Returns
   Duidelijkere (sub)koppen in policy-block
   ======================================== */

/* Hoofdkoppen binnen de accordion: SHIPPING / PAYMENT / RETURNS */
.policy-block .policy-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
  margin: 0;
}

/* Subkoppen: DELIVERY TIMES, SHIPPING COSTS, RETURN CONDITIONS, etc. */
.policy-block .policy-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #444;
  margin: 1.4rem 0 0.4rem;
  position: relative;
}

/* Subtiel lijntje onder subkoppen voor extra structuur */
.policy-block .policy-subtitle::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background-color: #e2e2e2;
  margin-top: 0.3rem;
}

/* Bodytekst iets zachter, zodat koppen sterker ogen */
.policy-block .policy-text,
.policy-block .policy-list li {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.8;
}

/* Extra top spacing before first accordion */
.policy-section:first-of-type {
  margin-top: 1.2rem;
}

/* Mobile padding voor Shipping / Payment / Returns pagina */
@media (max-width: 749px) {
  .lavertu-page-title-wrapper,
  .policy-block {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 749px) {
  .lavertu-page-title-wrapper {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Align Terms & Conditions title with content */
.template-page .lavertu-page-title-wrapper {
  max-width: 780px;
  margin: 0 auto !important;
  padding-left: 0 !important;
}

.template-page .lavertu-page-title {
  text-align: left !important;
  padding-left: 0;
}

/* MOBILE FIX — correct alignment for title */
@media (max-width: 600px) {
  .template-page .lavertu-page-title-wrapper {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  .template-page .lavertu-page-title {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
   LAVERTU — UNIVERSAL POLICY PAGE SPACING
   Applies to Shipping, Payment & Returns, Terms & Conditions
   ============================================================ */

#lavertu-policy {
  max-width: 780px;
  margin: 0 auto 3rem;
  padding-bottom: 1rem;
}

.policy-intro {
  margin-bottom: 1.7rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #444;
}

.policy-section {
  padding: 1.2rem 0 1.3rem;
  border-bottom: 1px solid #e6e6e6;
}

.policy-row {
  padding: 0.2rem 0;
}

.policy-title {
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #222;
}

.policy-content {
  padding-top: 0.65rem;
}

.policy-subtitle {
  margin-top: 1.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #333;
}

.policy-text {
  line-height: 1.75;
  margin-bottom: 0.9rem;
  color: #555;
}

.policy-note {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: #777;
}

.policy-list {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1.1rem;
}

.policy-list li {
  line-height: 1.7;
  margin: 0.18rem 0;
  font-size: 0.92rem;
  color: #555;
}

.policy-list li strong {
  color: #333;
}

.policy-cta-wrap {
  margin-top: 1.2rem;
  margin-bottom: 0.7rem;
}

/* Mobile */
@media (max-width: 600px) {
  #lavertu-policy {
    margin-bottom: 2.4rem;
  }

  .policy-section {
    padding: 1rem 0 1.1rem;
  }

  .policy-list {
    padding-left: 0.9rem;
  }

  .policy-title {
    font-size: 0.83rem;
  }
}
/* -------------------------------------------------------
   GLOBAL PAGE SPACING & TITLES (werkt op ALLE pagina’s)
------------------------------------------------------- */
.lavertu-page-title {
  font-size: 26px;
  letter-spacing: 1.5px;
  font-weight: 600;
  text-align: center;
  margin: 40px 0 25px 0;
}

.page-width,
.shopify-policy__container,
.custom-liquid,
#MainContent {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* -------------------------------------------------------
   ACCORDION / OPKLAPSECTIES (Shipping / Delivery / etc.)
------------------------------------------------------- */
.policy-section {
  border-bottom: 1px solid #e5e5e5;
  padding: 15px 0;
}

.policy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.policy-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.policy-content {
  margin-top: 10px;
  line-height: 1.6;
}

.policy-list li {
  margin-bottom: 6px;
}

/* -------------------------------------------------------
   MOBILE MENU (stijl consistent maken)
------------------------------------------------------- */
.drawer__menu-title,
.drawer__menu-link,
.mobile-nav__link {
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
}

.drawer__menu-link {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* pijltje rechter positie */
.drawer__menu-toggle {
  right: 10px !important;
}

/* --- MOBILE MENU STYLING --- */

/* Tekststijl zoals de rest van de site / Revy-style */
.drawer-menu--link,
.drawer-menu--item > summary {
  font-family: var(--font-body-family);
  font-size: 17px;
  letter-spacing: 0.3px;
  color: #111 !important;
}

/* Submenu items (de pagina’s onder By Category en Customer Care) */
.drawer-menu--child a {
  font-size: 16px;
  padding-left: 22px;
  color: #333 !important;
}

/* Pijltjes-icoon smaller en subtiel */
.drawer-menu summary::marker {
  font-size: 0;
}
.drawer-menu summary::after {
  content: "›";
  font-size: 20px;
  color: #888;
  float: right;
  transform: rotate(0deg);
  transition: 0.2s;
}
.drawer-menu details[open] summary::after {
  transform: rotate(90deg);
}

/* --- SUBMENUS ALTIJD UITGEKLAPT --- */
.drawer-menu details:nth-of-type(4),   /* BY CATEGORY */
.drawer-menu details:nth-of-type(5) {  /* CUSTOMER CARE */
  open: open;
}

.drawer-menu details:nth-of-type(4) > summary,
.drawer-menu details:nth-of-type(5) > summary {
  pointer-events: none; /* maakt klikken op sluiting onmogelijk */
}

/* ======================
   LAVERTU – Mobile drawer nav
   ====================== */

/* Basisstijl voor alle links en ‘summary’s’ in het mobiele menu */
.drawer-menu a,
.drawer-menu summary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #222;
}

/* Hoofditems iets donkerder en met meer ruimte */
.drawer-menu > li > summary,
.drawer-menu > li > a {
  padding: 0.9rem 1.6rem;
  color: #111;
}

/* Subpagina’s onder een hoofdcategorie: iets kleiner en lichter */
.drawer-menu details ul li a,
.drawer-menu details ul li summary {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: #666;
  padding: 0.5rem 2.4rem;
}

/* Hover/active state – subtiel donkerder */
.drawer-menu a:hover,
.drawer-menu summary:hover {
  color: #000;
}

/* Kleinere, nette pijltjes (als Symmetry ze als pseudo-elementen zet) */
.drawer-menu summary::marker {
  font-size: 0.7rem;
}

/* ===========================
   MOBILE DRAWER NAV (REFY STYLE)
   =========================== */

/* Algemene typografie in de drawer */
.drawer-menu,
.drawer-menu * {
  font-family: 'Montserrat', sans-serif;
}

/* Hoofditems (HOME, SHOP ALL, BY CATEGORY, CUSTOMER CARE, etc.) */
.drawer-menu summary,
.drawer-menu > li > a {
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
}

/* Submenu-items onder BY CATEGORY / CUSTOMER CARE */
.drawer-menu__child a {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 0.35rem 1.2rem 0.35rem 1.9rem;
  color: #555;
}

/* Hoverstates */
.drawer-menu a:hover {
  color: #000;
}

/* Pijltje subtieler maken */
.drawer-menu summary::-webkit-details-marker {
  display: none;
}

.drawer-menu summary::after {
  content: '▾';
  font-size: 0.7rem;
  margin-left: 0.4rem;
  opacity: 0.6;
}

.drawer-menu details[open] > summary::after {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* ===========================
   COLLECTION PRODUCT TITLES
   =========================== */

/* Titels van producten in overzicht (meerdere varianten ivm thema-klassen) */
.template-collection .grid-product__title,
.template-collection .product-item__title,
.template-collection .product-card__title,
.template-collection .card__heading {
  font-family: Montserrat, sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem !important;
  line-height: 1.3;
  color: #2c2c2c;
}

/* Prijs onder de titel in collecties */
.template-collection .grid-product__price,
.template-collection .product-item__price,
.template-collection .price,
.template-collection .price * {
  font-family: Montserrat, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

/* Klein beetje kleiner op mobiel */
@media (max-width: 768px) {
  .template-collection .grid-product__title,
  .template-collection .product-item__title,
  .template-collection .product-card__title,
  .template-collection .card__heading {
    font-size: 0.9rem !important;
  }

  .template-collection .grid-product__price,
  .template-collection .product-item__price,
  .template-collection .price,
  .template-collection .price * {
    font-size: 0.85rem !important;
  }
}

/* ===========================
   MOBILE DRAWER NAV (REFY-STYLE)
   =========================== */

/* Hoofdlinks in het mobiele menu (HOME, SHOP ALL, etc.) */
.drawer-menu summary,
.drawer-menu a,
.drawer-menu button {
  font-family: Montserrat, sans-serif !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: #222;
}

/* Submenu items (pagina's onder By Category / Customer Care) */
.drawer-menu details ul a {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  color: #555;
  padding-left: 1.1rem;
}

/* Kleinere, subtielere pijltjes */
.drawer-menu summary::marker {
  font-size: 0; /* verbergt default marker */
}

.drawer-menu summary::after {
  content: "›";
  font-size: 0.78rem;
  margin-left: 0.35rem;
  transform: translateY(1px);
}

/* Iets meer ruimte tussen items */
.drawer-menu li {
  padding: 0.45rem 0;
}

/* ======================
   LAVERTU – Mobile drawer nav
   ====================== */

/* Basisstijl voor alle links en ‘summary’s’ in het mobiele menu */
.drawer-menu a,
.drawer-menu summary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #222;
}

/* Hoofditems iets donkerder en met meer ruimte */
.drawer-menu > li > summary,
.drawer-menu > li > a {
  padding: 0.9rem 1.6rem;
  color: #111;
}

/* Subpagina’s onder een hoofdcategorie: iets kleiner en lichter */
.drawer-menu details ul li a,
.drawer-menu details ul li summary {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: #666;
  padding: 0.5rem 2.4rem;
}

/* Hover/active state – subtiel donkerder */
.drawer-menu a:hover,
.drawer-menu summary:hover {
  color: #000;
}

/* Kleinere, nette pijltjes (als Symmetry ze als pseudo-elementen zet) */
.drawer-menu summary::marker {
  font-size: 0.7rem;
}

/* =========================================
   COLLECTION PAGE – PRODUCT CARDS (REFY STYLE)
   ========================================= */

/* Titel onder producten in de collectie-grid */
.product-block__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem !important;
  line-height: 1.4;
  color: #2c2c2c;
}

/* Prijs onder producten in de collectie-grid */
.product-block__price,
.product-block__price .price,
.product-block__price .price * {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  color: #2c2c2c;
}

/* Mobile – iets kleiner & strak */
@media (max-width: 768px) {
  .product-block__title {
    font-size: 0.8rem !important;
  }

  .product-block__price,
  .product-block__price .price,
  .product-block__price .price * {
    font-size: 0.8rem !important;
  }
}

/* =========================================
   MAIN MENU – REFY STYLE (DESKTOP + MOBILE)
   ========================================= */

/* Desktop hoofdmenu links */
.site-header .site-nav a,
.site-header .site-nav__link,
.header__inline-menu .list-menu__item > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem !important;
  line-height: 1.4;
}

/* Mobiel: links in het uitgeklapte menu (“drawer”) */
.drawer nav a,
.drawer .mobile-nav__item a,
.drawer .mobile-nav__link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem !important;
  line-height: 1.4;
}

/* Submenu-items (pagina’s onder BY CATEGORY / CUSTOMER CARE) iets kleiner */
.drawer nav ul ul a,
.drawer .mobile-nav__item--sub a {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
}

/* =========================================
   COLLECTION TITLES – REFY STYLE
   ========================================= */

/* Titel bovenaan collectiepagina's (bijv. BESTSELLERS) */
.template-collection h1,
.template-collection .page-title,
.template-collection .section-header__title,
.template-collection .collection-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem !important;
  line-height: 1.4;
  text-align: left;
}

/* Eventuele subtitel / beschrijving onder de titel */
.template-collection .section-header__subheading,
.template-collection .collection-description {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}

/* =========================================
   MAIN MENU – REFY STYLE (DESKTOP + MOBILE)
   ========================================= */

/* Desktop hoofdmenu links */
.site-header .site-nav a,
.site-header .site-nav__link,
.header__inline-menu .list-menu__item > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem !important;
  line-height: 1.4;
}

/* Mobiel: links in het uitgeklapte menu (“drawer”) */
.drawer nav a,
.drawer .mobile-nav__item a,
.drawer .mobile-nav__link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem !important;
  line-height: 1.4;
}

/* Submenu-items (pagina’s onder BY CATEGORY / CUSTOMER CARE) iets kleiner */
.drawer nav ul ul a,
.drawer .mobile-nav__item--sub a {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
}

/* =========================================
   COLLECTION TITLES – REFY STYLE
   ========================================= */

/* Titel bovenaan collectiepagina's (bijv. BESTSELLERS) */
.template-collection h1,
.template-collection .page-title,
.template-collection .section-header__title,
.template-collection .collection-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem !important;
  line-height: 1.4;
  text-align: left;
}

/* Eventuele subtitel / beschrijving onder de titel */
.template-collection .section-header__subheading,
.template-collection .collection-description {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}

/* SUBMENU'S ALTIJD UITGEKLAPT — BY CATEGORY & CUSTOMER CARE */
.drawer-menu details:nth-of-type(5),   /* BY CATEGORY */
.drawer-menu details:nth-of-type(6) {  /* CUSTOMER CARE */
  open: open;
}

/* Zorg dat je niet per ongeluk dichtklikt op de summary zelf */
.drawer-menu details:nth-of-type(5) > summary,
.drawer-menu details:nth-of-type(6) > summary {
  pointer-events: none;
}

/* ============================================
   LAVERTU — GLOBAL NAV STYLING (desktop + mobile)
   ============================================ */

/* Hoofdmenu links (desktop) */
.site-header .site-nav__item > a,
.header__inline-menu .list-menu__item > a,
.header__inline-menu .list-menu__item > .link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  line-height: 1;
}

/* Extra beetje ruimte tussen menu-items */
.site-header .site-nav__item {
  margin: 0 0.9rem;
}

/* Mobiel: links in het uitgeklapte menu */
.drawer__content a,
.drawer__content button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
}

/* Eventuele sub-niveaus (pagina’s onder BY CATEGORY / COSTUMER CARE) iets kleiner */
.drawer__content .drawer__inner a,
.drawer__content .drawer__inner button {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

/* ============================================
   LAVERTU — COLLECTION / CATEGORY PAGE TITLES
   (bijv. "BESTSELLERS" bovenaan de grid)
   ============================================ */

/* Hoofdtitel bovenaan collection-pagina’s */
.template-collection .section-header__title,
.template-collection .collection-title,
.template-collection .collection-hero__title,
.template-collection h1.page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 1.4rem;
}

/* Eventuele subtitels / beschrijving eronder wat rustiger */
.template-collection .section-header__subheading,
.template-collection .collection-hero__description,
.template-collection .collection-description {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}

/* Filter / "Filter" label in dezelfde caps-stijl */
.template-collection .facets__heading,
.template-collection .facets__summary-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* Collection titel bovenaan de pagina */
.collection-hero__title,
.collection-hero .title,
.template-collection h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 1.1rem !important;
  color: #2c2c2c !important;
  margin-bottom: 1rem !important;
}

/* Hoofdmenu items */
.drawer-menu summary,
.drawer-menu a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.9rem !important;
  color: #2c2c2c !important;
}

/* Submenu items (onder By Category & Customer Care) */
.drawer-menu details > div a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.85rem !important;
  padding-left: 22px !important;
  color: #333 !important;
}

/* Kleinere subtiele pijltjes */
.drawer-menu summary::marker {
  font-size: 0;
}

.drawer-menu summary::after {
  content: "›";
  font-size: 20px;
  color: #888;
  margin-left: 8px;
  float: right;
}

/* By Category standaard open */
.drawer-menu details:nth-of-type(4) {
  open: open;
}

/* Customer Care standaard open */
.drawer-menu details:nth-of-type(5) {
  open: open;
}

/* Voorkom dat ze weer dichtklappen */
.drawer-menu details:nth-of-type(4) > summary,
.drawer-menu details:nth-of-type(5) > summary {
  pointer-events: none;
}

/* ================================
   CENTER CATEGORY PAGE TITLES — DESKTOP
   ================================ */
@media (min-width: 769px) {
  .collection-hero__title,
  .collection__title,
  .collection__header h1 {
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 0 auto 20px auto !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
  }
}

/* ================================
   CATEGORY / COLLECTION TITLES CENTEREN (DESKTOP)
   ================================ */

@media (min-width: 769px) {
  .template-collection .section-header__title,
  .template-collection .collection-title,
  .template-collection .collection-hero__title,
  .template-collection h1.page-title,
  .collection-hero__title,
  .collection__title,
  .collection__header h1 {
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 0 auto 20px auto !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
  }
}

/* ================================
   CENTER COLLECTION TITLES – DESKTOP (force)
   ================================ */
@media (min-width: 769px) {

  /* zorg dat de hele header in het midden uitlijnt */
  .template-collection .section-header,
  .template-collection .collection-hero,
  .template-collection .collection-hero__inner {
    text-align: center !important;
  }

  /* titel zelf centreren + auto marges */
  .template-collection .section-header__title,
  .template-collection .collection-hero__title,
  .template-collection .collection-title,
  .template-collection .collection__title,
  .template-collection .collection__header h1,
  .template-collection h1.page-title,
  .template-collection h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* COLLECTION PRODUCT SUBTITLE – zelfde stijl als PDP */
.product-block__subtitle {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #44444;
  margin-top: 0.1rem;
}

/* Op mobiel iets kleiner en niet te dicht op de titel */
@media (max-width: 768px) {
  .product-block__subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin-top: 0.05rem;
  }
}

.lipsticks-overview {
  max-width: 1200px;
  margin: 0 auto 4rem auto;
  padding: 0 1.5rem;
}

/* Pagina-hoofdtitel */
.lipsticks-title-wrapper {
  margin-bottom: 2.5rem;
}
.lipsticks-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Blok-titels “Lipstick Unique / Nature” */
.lip-section {
  margin-bottom: 3rem;
}
.lip-section + .lip-section {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.lip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}

/* Kaart zelf – alleen layout, geen fonts overschrijven */
.lip-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
}

.lip-card__image {
  margin-bottom: 0.75rem;
}
.lip-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-item__meta {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0.1rem 0 0.35rem 0;
}

/* TYPE knoppen kleiner maken (Symmetry compatibel) */
.product-form__option-buttons .product-form__single-option-radio label,
.product-form__option-buttons .product-form__single-option-radio input[type="radio"] + label {
  font-size: 0.68rem !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 9999px !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
}
/* jouw eerdere CSS */

.product-form__option-buttons label { background: red !important; }

/* VARIANT HEADERS (bijv. “SHADES”, “TYPE”) */
.product-form__option-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #444;
}

/* Tekst achter de dubbele punt (bijv. “Natural Glow”) */
.product-form__option-name + span,
.product-form__label-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #555;
}

/* QUANTITY – kleiner & pill-achtig */
.product-form__quantity,
.product-form__quantity .quantity-selector {
  max-width: 210px;
}

.quantity-selector {
  border-radius: 9999px;
  border: 1px solid #111;
  overflow: hidden;
}

.quantity-selector__button {
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
}

.quantity-selector__value {
  width: 48px;
  font-size: 0.8rem;
}

/* ADD TO CART – iets smaller & verfijnder */
.product-form__buttons .button,
.product-form__buttons button[type="submit"] {
  padding: 0.75rem 1.6rem !important;
  font-size: 0.8rem !important;
  border-radius: 9999px !important;
}

/* ================================
   LAVERTU – Variant styling (Shades, Type, quantity, CTA)
   ================================ */

/* TITELTJE “SHADES / TYPE” – zelfde stijl als subtitels */
.template-product .product-form__option-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #444;
}

/* SHADES – bolletjes iets kleiner & subtieler */
.template-product .product-form__swatch input[type="radio"] + label,
.template-product .swatch input[type="radio"] + label {
  width: 18px;
  height: 18px;
  border-width: 1px;
}

/* ACTIVE shade iets duidelijker maar nog clean */
.template-product .product-form__swatch input[type="radio"]:checked + label,
.template-product .swatch input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px #111;
}

/* TYPE knoppen kleiner & verfijnder (Complete / Refill) */
.template-product .product-form__option .button--secondary,
.template-product .product-form__option button {
  font-size: 0.7rem !important;
  padding: 0.4rem 1.0rem !important;
  border-radius: 9999px !important;
}

/* QUANTITY – veldje wat compacter */
.template-product .quantity,
.template-product .js-qty {
  max-width: 110px;
}

.template-product .quantity input,
.template-product .js-qty input {
  height: 38px;
  font-size: 0.8rem;
}

/* ADD TO CART – iets slanker op productpagina */
.template-product .product-form__buttons .button,
.template-product .product-form__buttons button {
  font-size: 0.8rem;
  padding: 0.7rem 1.7rem;
}

/* ===========================
   PRODUCT PAGINA – ALGEMENE KNOP STIJL
   ============================ */
/* ===========================
   PRODUCTPAGINA – ADD TO CART KNOP
   ============================ */

/* Alleen de echte Add to cart knop (Shopify: name="add") */
.template-product .product-form button[name="add"],
.template-product .product-form input[name="add"] {
  border-radius: 0;
  border: 1px solid #5D89B4;
  background: #5D89B4;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  padding: 12px 18px;
  width: 100%;
}

.template-product .product-form button[name="add"]:hover,
.template-product .product-form input[name="add"]:hover {
  background: #5D89B4;
  color: #ffffff;
}

/* ===========================
   PRODUCTPAGINA – QUANTITY BLOK
   ============================ */

/* Omkadering van het aantal */
.template-product .product-form .product-form__quantity,
.template-product .product-form .quantity-selector,
.template-product .product-form .quantity {
  max-width: 140px;
  border: 1px solid #111111;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
}

/* Invoerveld zelf */
.template-product .product-form .quantity__input,
.template-product .product-form input[type="number"] {
  border: none;
  box-shadow: none;
  text-align: center;
  font-size: 12px;
  flex: 1 1 auto;
}

/* Plus/min knoppen */
.template-product .product-form .quantity__button {
  border: none;
  background: transparent;
  font-size: 14px;
  width: 32px;
}

/* ===========================
   PRODUCTPAGINA – COMPACTE QUANTITY
   ============================ */

/* Label boven de quantity in dezelfde stijl als andere labels */
.template-product .product-form__quantity label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Wrapper: iets minder ruimte eronder */
.template-product .product-form__quantity {
  margin-bottom: 8px;
}

/* Het blok met - [ 1 ] + kleiner en slanker */
.template-product .product-form__quantity .quantity,
.template-product .product-form__quantity .quantity-selector {
  max-width: 120px;            /* smaller */
  height: 34px;                /* lager */
  border: 1px solid #111111 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Min- en plusknoppen kleiner en subtieler */
.template-product .product-form__quantity .quantity button,
.template-product .product-form__quantity .quantity-selector button,
.template-product .product-form__quantity .quantity__button {
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
  width: 26px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}

/* Het cijfer in het midden */
.template-product .product-form__quantity .quantity input,
.template-product .product-form__quantity .quantity-selector input,
.template-product .product-form__quantity .quantity__input,
.template-product .product-form__quantity input[name="quantity"] {
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 11px !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* ===========================
   PRODUCT – QUANTITY (SYMMETRY BUTTONED-INPUT)
   ============================ */

/* Label "Quantity" in dezelfde stijl als andere labels */
.product-form label[for="quantity"] {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Het blok met - [ 1 ] +  kleiner en strakker */
.product-form quantity-wrapper.buttoned-input {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid #111111 !important;
  border-radius: 0 !important;
  max-width: 120px !important;   /* smaller */
  height: 34px !important;       /* lager */
  padding: 0 !important;
}

/* De min- en pluslinkjes links/rechts */
.product-form quantity-wrapper.buttoned-input a {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 26px !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
}

/* Het cijfer in het midden */
.product-form quantity-wrapper.buttoned-input input[type="number"],
.product-form input#quantity {
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 11px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* ===========================
   PRODUCT – QUANTITY PERFECT CENTERED
   ============================ */

/* Hele wrapper iets hoger maken */
.product-form quantity-wrapper.buttoned-input {
  height: 34px !important;        /* iets hoger voor betere balans */
}

/* Min- en plusknoppen iets groter en perfect centeren */
.product-form quantity-wrapper.buttoned-input a {
  width: 30px !important;         /* iets breder */
  font-size: 12px !important;     /* beter leesbaar */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Het cijfer mooi centreren en niet 'zinken' */
.product-form quantity-wrapper.buttoned-input input[type="number"],
.product-form input#quantity {
  height: 100% !important;
  font-size: 13px !important;     /* net iets groter */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ===========================
   PRODUCT – QUANTITY PERFECT @34px HEIGHT
   ============================ */

/* Label */
.product-form label[for="quantity"] {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Totale hoogte van het blok */
.product-form quantity-wrapper.buttoned-input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #111111 !important;
  border-radius: 0 !important;
  height: 34px !important;       /* jouw keuze */
  max-width: 120px !important;
  padding: 0 !important;
  overflow: hidden;               /* voorkomt verschuivingen */
}

/* Min / plus knoppen — opnieuw gecentreerd voor 34px hoogte */
.product-form quantity-wrapper.buttoned-input a {
  width: 30px !important;
  height: 34px !important;        /* exact gelijk aan de wrapper */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;     /* beter leesbaar */
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Input velden in het midden */
.product-form quantity-wrapper.buttoned-input input[type="number"],
.product-form input#quantity {
  height: 34px !important;        /* zelfde hoogte */
  line-height: 34px !important;   /* center vertically */
  font-size: 12px !important;
  text-align: center !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ===========================
   PRODUCT – COLLAPSIBLE TAB TITELS
   ============================ */

/* Voor themes die <details><summary> gebruiken */
.product-main details > summary,
.product__info details > summary {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Voor Symmetry-specifieke collapsible blokken */
.collapsible-tab__heading,
.collapsible-tab summary,
.product .collapsible-tabs summary {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Iets minder “ruimtegevoel” tussen de regels in de titel */
.collapsible-tab__heading span,
.product .collapsible-tabs summary span {
  line-height: 1.2;
}

/* ===========================
   PRODUCTPAGINA – COLLAPSIBLE TAB TITELS
   ============================ */

/* Titels van de uitklapbare rijen (DESCRIPTION, BENEFITS, ...) */
.template-product .collapsible-tabs summary,
.template-product .collapsible-tabs .collapsible-trigger,
.template-product .collapsible-tabs .collapsible-trigger-btn,
.template-product .collapsible-tab summary,
.template-product details.collapsible-tab summary {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Lijn iets subtieler */
.template-product .collapsible-tabs summary,
.template-product .collapsible-tab summary {
  border-color: #d8d8d8 !important;
}

/* Plus-icoontje iets kleiner zodat het niet overheerst */
.template-product .collapsible-tabs summary::marker,
.template-product .collapsible-tabs summary::-webkit-details-marker {
  font-size: 12px;
}

/* ===========================
   PRODUCT – COLLAPSIBLE TABS TITELS
   ============================ */

/* Dit pakt alle DESCRIPTION / BENEFITS / ... titels op de productpagina */
.product-form ~ details > summary,
.product-form ~ .collapsible-tab > summary,
.product-form ~ .collapsible-tabs details > summary,
.template-product details > summary {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 13px;
  padding-bottom: 13px;
}

/* Lijn wat subtieler maken */
.template-product details > summary {
  border-color: #d8d8d8;
}

/* Optioneel: het plus-icoontje iets kleiner/strakker maken */
.template-product details > summary::marker {
  font-size: 14px;
}

/* ===========================
   PRODUCT – TYPE VARIANT KNOPPEN
   ============================ */

/* Titel "TYPE" zelf */
.product-form .product-form__option-name {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* TYPE-knoppen (Complete foundation / Refill only) */
.product-form input[type="radio"][name*="Type"] + label {
  display: block;
  width: 100%;
  border-radius: 0;
  border: 1px solid #111111;
  background: #ffffff;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  padding: 11px 16px;
  text-align: center;
  margin-bottom: 6px;         /* klein beetje ruimte tussen de knoppen */
  cursor: pointer;
}

/* Geselecteerde TYPE-knop */
.product-form input[type="radio"][name*="Type"]:checked + label {
  background: #5D89B4;
  color: #ffffff;
}

/* ===========================
   PRODUCT – KLEUR LABEL + SWATCHES
   ============================ */

/* "Kleur: FAIR" in Refy-stijl */
.product-form .product-form__input[data-option-name*="leur"] .product-form__option-name,
.product-form .product-form__option-name--color,
.product-form .product-form__input--swatch .product-form__option-name {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Iets minder verticale ruimte onder de swatches */
.product-form .product-form__input--swatch {
  margin-bottom: 10px;
}

/* ===========================
   PRODUCT – LABELS VOOR OPTIES (KLEUR / TYPE / ETC.)
   ============================ */

/* Algemene labels in de product-form (Shade, Type, etc.) */
.product-form .label,
.product-form .product-form__option-name {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Klein beetje extra ruimte tussen label en inhoud */
.product-form .selector-wrapper,
.product-form .product-form__option {
  margin-bottom: 10px;
}

/* ===========================
   VARIANT TITELS (SHADE / KLEUR / TYPE)
   ============================ */

/* Boven de swatches en boven de TYPE-knoppen */
.product-form .option-selector__name,
.product-form .product-form__option-name,
.product-form .product-form__single-option-name {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Zorg dat bv. "SHADE: FAIR" / "KLEUR: FAIR" strak oogt */
.product-form .option-selector__name span,
.product-form .product-form__option-name span {
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ===========================
   TYPE-KNOPPEN (COMPLETE FOUNDATION / REFILL ONLY)
   ============================ */

.product-form .opt-label--btn {
  border-radius: 0;
  border: 1px solid #5D89B4;
  background: #ffffff;
  padding: 11px 22px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 210px;          /* breedte kun je nog finetunen */
}

/* ruimte tussen de 2 type-knoppen */
.product-form .option-selector__btns .opt-label--btn {
  margin-right: 10px;
}

/* geselecteerde knop (actieve TYPE) */
.product-form input[type="radio"]:checked + label.opt-label--btn,
.product-form .opt-label--btn.is-selected {
  background: #5D89B4;
  color:rgb(2, 1, 1);
}

/* tekst binnen de knop (js-value) */
.product-form .opt-label--btn .js-value {
  display: inline-block;
}

/* ===========================
   PRODUCT – TYPE BUTTONS SIDE BY SIDE
   ============================ */

.product-options .option-selector__btns,
.product-form .option-selector__btns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;            /* ruimte tussen knoppen */
}

.product-options .option-selector__btn,
.product-form .option-selector__btn {
  flex: 1 1 0 !important;          /* gelijke breedte */
  text-align: center !important;
}

/* ===========================
   PRODUCT – TYPE BUTTONS COMPACT
   ============================ */

.product-form .opt-btn input:checked + label,
.product-form .opt-btn label {
  padding: 10px 14px !important;       /* compacter */
  min-width: 120px !important;         /* kleiner zodat 2 naast elkaar passen */
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}

/* Wrapper zodat knoppen nooit afgebroken worden */
.product-form .option-selector__btns.flex-wrap {
  flex-wrap: nowrap !important;
  gap: 8px !important;                 /* ruimte tussen knoppen */
}

/* ===========================
   VARIANT TYPE KNOPPEN – MOBILE LAYOUT + TEKST
   ============================ */

/* Basisstijl voor de type-knoppen (Complete / Refill) */
.product-form .opt-label--btn {
  border-radius: 0;
  border: 1px solid #5D89B4;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  padding: 8px 6px;           /* iets minder hoog, zodat 2 naast elkaar passen */
}

/* Tekst in de knop iets luchtiger */
.product-form .opt-label--btn .js-value {
  display: block;
  line-height: 1.4;           /* meer ruimte tussen de twee woorden */
}

/* MOBIEL: knoppen netjes 2 naast elkaar */
@media (max-width: 749px) {
  /* Container in flex met kleine gap */
  .product-form .option-selector__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Elke knop ongeveer 50% breed */
  .product-form .option-selector__btns .opt-label--btn {
    flex: 1 1 calc(50% - 3px);
    max-width: calc(50% - 3px);
  }
}

/* ======================================
   MOBILE FIX – TYPE BUTTONS SMALLER
   ====================================== */

/* Alleen mobiel */
@media (max-width: 480px) {
  .product-option-buttons {
    gap: 8px !important;                /* iets minder ruimte tussen de knoppen */
  }

  .product-option-buttons label {
    width: 48% !important;              /* beide knoppen passen nu altijd naast elkaar */
    max-width: 48% !important;
    padding: 9px 4px !important;        /* iets minder padding zodat de tekst nooit afvalt */
    font-size: 10.5px !important;       /* subtiel kleiner voor betere pasvorm */
  }

  .product-option-buttons label span {
    line-height: 1.25 !important;       /* betere verdeling van 2 regels tekst */
  }
}

/* ====================================
   TYPE-varianten – 2 knoppen naast elkaar op mobiel
   ==================================== */
@media (max-width: 749px) {
  /* container van de TYPE-knoppen */
  .product-form .option-selector__btns {
    display: flex;
    gap: 4px;               /* kleine ruimte tussen de 2 knoppen */
  }

  /* de knoppen zelf (Complete foundation / Refill only) */
  .product-form .option-selector__btns .opt-label--btn {
    flex: 1 1 0;            /* ieder 50% van de rij */
    min-width: 0;           /* voorkomt dat ze “doordrukken” naar buiten */
    box-sizing: border-box;
    padding: 8px 4px;       /* iets minder padding zodat ze binnen beeld passen */
    font-size: 10px;        /* net wat kleiner voor mobiel */
    line-height: 1.3;
    margin: 0;
  }

  /* tekst netjes in 2 regels centreren */
  .product-form .option-selector__btns .opt-label--btn

  /* -------------------------------------
   TYPE LABEL SPACING
-------------------------------------- */
.product-form .product-form__input .option-name,
.product-form .product-form__option-name {
  margin-bottom: 6px !important;   /* ruimte onder TYPE */
  display: block !important;
}

/* -------------------------------------
   TYPE BUTTONS – HEIGHT FIX & ALIGN
-------------------------------------- */
.product-form .opt-label.opt-label--btn {
  height: 40px !important;            /* match Add to cart hoogte */
  line-height: 40px !important;
  padding: 0 10px !important;         /* horizontale padding */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tekst binnen de knoppen mooi gecentreerd */
.product-form .opt-label.opt-label--btn span {
  line-height: 1.1 !important;
  display: block !important;
}

/* -------------------------------------
   KLEINER TOTALE BREEDTE MOBILE
-------------------------------------- */
@media screen and (max-width: 750px) {
  .product-form .option-selector__btns {
    gap: 6px !important;        /* kleine ruimte tussen knoppen */
  }

  .product-form .opt-label.opt-label--btn {
    font-size: 11px !important; /* kleiner zodat beide naast elkaar passen */
    padding: 0 8px !important;
  }
}
}
/* Ruimte onder labels zoals SHADE / TYPE */
.product-form .product-form__option-name {
  margin-bottom: 6px;
}

/* Container van de TYPE-knoppen: netjes naast elkaar met kleine ruimte ertussen */
.product-form .option-selector__btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;                 /* ruimte tussen de 2 knoppen */
}

/* Zelf de knoppen: lagere hoogte + mooie tekst-uitlijning */
.product-form .option-selector__btns .opt-label--btn.btn {
  flex: 1 1 0;              /* beide knoppen even breed */
  box-sizing: border-box;
  height: 34px;             /* lager, meer als Add to cart */
  padding: 9px 6px;         /* minder hoog, iets padding links/rechts */
  display: flex;
  align-items: center;      /* tekst verticaal in het midden */
  justify-content: center;  /* tekst horizontaal in het midden */
  line-height: 1.2;
}

/* Tekst binnen de knop (COMPLETE / FOUNDATION) iets meer lucht */
.product-form .option-selector__btns .opt-label--btn.btn span {
  display: block;
  line-height: 1.2;
}

/* ===========================
   PRODUCT – TYPE LABEL + BUTTONS
   ============================ */

/* 1) Ruimte onder "SHADE:" en "TYPE:" labels */
.product-form .product-form__option-name {
  margin-bottom: 6px;              /* ruimte tussen label en blokken */
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 2) Container van de TYPE-knoppen als flex, zodat ze netjes naast elkaar staan */
.product-form .option-selector__btns {
  display: flex;
  gap: 0;                           /* geen extra ruimte tussen de borders */
}

/* 3) De TYPE-knoppen zelf: helft van de rij, lager en strakker */
.product-form .option-selector__btns .opt-label--btn {
  flex: 1 1 50%;                    /* 2 gelijke blokken naast elkaar */
  box-sizing: border-box;
  border-radius: 0 !important;
  border: 1px solid #5D89B4 !important;
  padding: 9px 6px !important;      /* lager dan eerst, in lijn met Add to cart */
  font-size: 11px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* 4) Actieve TYPE-knop (geselecteerd) */
.product-form .option-selector__btns .opt-label--btn.is-checked,
.product-form .option-selector__btns .opt-label--btn.is-selected {
  background: #5D89B4 !important;
  color: #ffffff !important;
}

/* 5) Op kleiner scherm de tekst nog iets compacter, zodat beide knoppen volledig in beeld blijven */
@media (max-width: 749px) {
  .product-form .option-selector__btns .opt-label--btn {
    font-size: 10px !important;
    letter-spacing: 0.14em;
    padding: 8px 4px !important;
  }
}

/* Ruimte onder TYPE label */
.product-form__input .form__label {
  margin-bottom: 8px !important;
}

/* Variant buttons wrapper: forceer gelijk verdeelde breedte */
.product-form__input .variant-picker__option-buttons {
  display: flex !important;
  gap: 8px !important;
}

/* Elke knop even breed */
.product-form__input .variant-picker__option-buttons .option-button {
  flex: 1 1 50% !important;
  max-width: 50% !important;
}

/* Hoogte van variant knoppen (zoals Add to Cart: 36px) */
.product-form__input .variant-picker__option-buttons .option-button label {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
}

/* De witte knop (unselected) styling consistent maken */
.product-form__input .variant-picker__option-buttons .option-button input + label {
  border: 1px solid #000 !important;
}

/* De zwarte knop (selected) hetzelfde maar inverse */
.product-form__input .variant-picker__option-buttons .option-button input:checked + label {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

/* ===========================
   PRODUCT – TYPE VARIANT BUTTONS
   ============================ */

/* Label 'TYPE' (en andere option labels) iets los van de knoppen */
.product-form .product-form__option-name {
  display: block;
  margin-bottom: 20px;           /* ruimte tussen TYPE en knoppen */
}

/* Container met de knoppen naast elkaar */
.product-form .option-selector__btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;                     /* kleine ruimte tussen de twee knoppen */
}

/* Zelfde stijl als Add to cart, maar compacter */
.product-form .opt-label.opt-label--btn.btn {
  flex: 1 1 0;
  border-radius: 0;
  border: 1px solid #5D89B4;
  background: #ffffff;
  color: #5D89B4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  height: 36px;                 /* zelfde hoogte als Add to cart */
  padding: 0 8px;               /* geen extra hoogte uit padding */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Tekst binnen de knop netjes uitgelijnd */
.product-form .opt-label.opt-label--btn.btn .js-value,
.product-form .opt-label.opt-label--btn.btn span {
  line-height: 1.3;
}

/* Geselecteerde knop zwart met witte tekst */
.product-form .opt-label.opt-label--btn.btn.is-selected,
.product-form input[type="radio"]:checked + .opt-label.opt-label--btn.btn {
  background: #5D89B4;
  color: #ffffff;
}

/* MOBIEL: net iets kleinere tekst zodat beide knoppen mooi passen */
@media (max-width: 749px) {
  .product-form .opt-label.opt-label--btn.btn {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

/* ===========================
   TYPE – VARIANT KNOPPEN
   ============================ */

/* 1. Ruimte onder het woord TYPE */
.product-form .option-selector__btns {
  margin-top: 4px !important;     /* afstand tussen TYPE en de knoppen */
}

/* 2. Hoogte & uitlijning van de knoppen zelf */
.product-form .opt-label--btn {
  padding: 10px 12px !important;  /* bepaalt de hoogte (+/- 36px totaal) */
  border-radius: 0;
  border: 1px solid #5D89B4;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.4;               /* mooie vertikale uitlijning */
}

/* 3. Beide knoppen netjes naast elkaar en even breed */
.product-form .option-selector__btns {
  display: flex;
  gap: 6px;                       /* ruimte tussen COMPLETE / REFILL */
}

.product-form .option-selector__btns .opt-label--btn {
  flex: 1 1 0;                    /* beide knoppen zelfde breedte */
}

/* --- MOBILE ONLY: compacte spacing bij variant labels en knoppen --- */
@media screen and (max-width: 749px) {

  /* Minder ruimte tussen SHADE: en de swatches */
  .product-form__input .form__label {
    margin-bottom: 4px !important;
  }

  /* Minder ruimte tussen TYPE en de knoppen */
  .product-form__input {
    margin-bottom: 4px !important;
  }

  /* Extra: knoppen iets dichter onder het TYPE label */
  .option-selector-buttons {
    margin-top: 4px !important;
  }
}

/* ========== MOBILE SPACING FIX FOR VARIANT PICKER ========== */
@media (max-width: 749px) {

  /* Minder ruimte tussen SHAPE en swatches */
  .product-form .product__radio + .swatch {
    margin-top: 4px !important;   /* was veel groter */
  }

  /* Kleinere ruimte tussen TYPE en buttons */
  .product-form__input.product-form__input--dropdown,
  .product-form__input .product-form__input-label,
  .product-form__input.product-form__input--buttons label {
    margin-bottom: 4px !important;
  }

  /* Variant buttons lager maken (zoals Add to Cart = 36px) */
  .product-form__input.product-form__input--buttons .product-option {
    height: 36px !important;
    line-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Tekst perfect centreren in de knoppen */
  .product-form__input.product-form__input--buttons .product-option span {
    line-height: 1.1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
}

/* --- MOBILE FIXES: spacing & button height --- */
@media screen and (max-width: 749px) {

  /* Swatches dichter onder SHADE */
  .product-form__input .swatch {
    margin-top: 4px !important;
  }

  /* Type-label dichter op de knoppen */
  .product-form__input label {
    margin-bottom: 4px !important;
  }

  /* Variant buttons zelf lager maken (zelfde hoogte als Add to Cart) */
  .product-form__input .opt--label .opt--btn,
  .product-form__input .opt--btn {
    height: 36px !important;        /* zelfde als Add to Cart */
    padding: 0 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  /* Tekst mooi centreren binnen de lagere knoppen */
  .product-form__input .opt--btn span {
    line-height: 1.1 !important;
  }

  /* Kleinere verticale ruimte tussen de twee variant-velden (Shade en Type) */
  .product-form__input {
    margin-bottom: 8px !important;
  }
}

/* =====================================
   MOBIEL – SHADE / TYPE SPACING + TYPE BUTTONS
   ====================================== */
@media (max-width: 749px) {
  /* Labels "SHADE" en "TYPE" zelf wat strakker */
  .product-form .product-form__option-name {
    margin-bottom: 0;
  }

  /* Minder ruimte tussen label en de swatches / knoppen */
  .product-form .product-form__option-name + * {
    margin-top: 2px !important;
  }

  /* Algemeen: blok van een optie (shade / type) iets compacter */
  .product-form .product-form__option {
    margin-bottom: 14px;
  }

  /* TYPE-knoppen: hoogte ~36px zoals Add to cart */
  .product-form .opt-label--btn.btn {
    min-height: 34px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-form .opt-label--btn.btn span {
    line-height: 1.2;
  }
}

/* --- MOBILE FIXES FOR SHADE + TYPE SPACING --- */
@media (max-width: 749px) {

  /* Minder ruimte tussen SHAADE: label en swatches */
  .product-form__input .swatch-list,
  .product__info-container .swatch-list {
      margin-top: 4px !important;
  }

  /* Minder ruimte tussen TYPE label en de knoppen */
  .product-form__input:not(:first-child) {
      margin-top: 10px !important;
  }

  /* Knoppen echt 36px hoog zoals Add to Cart */
  .variant-picker .option-selector__btn {
      height: 36px !important;
      line-height: 36px !important;
  }

  /* Tekst mooi centreren in mobiele knoppen */
  .variant-picker .option-selector__btn span {
      line-height: 1.2 !important;
      display: block !important;
      margin-top: 6px !important;
  }
}

/* ===========================
   MOBILE – LABEL & SPACING SHADE / TYPE
   ============================ */
@media (max-width: 749px) {

  /* Minder ruimte onder SHADE: / TYPE: */
  .product-form .product-form__option label,
  .product-form .product-option__label,
  .product-form .option-selector__label {
    margin-bottom: 4px !important;  /* dichter op swatches / knoppen */
  }

  /* Iets minder verticale ruimte in het hele optieblok */
  .product-form .product-form__option {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* ===========================
   MOBILE – SWATCHES COMPACTER
   ============================ */
@media (max-width: 749px) {

  /* Rij met swatches compacter maken */
  .product-form .swatch-list,
  .product-form .swatches,
  .product-form .product-form__swatches,
  .product-form .option-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px !important;      /* afstand bolletjes onderling */
    row-gap: 2px !important;
    margin-top: 2px !important;  /* dichter bij SHADE: */
  }

  .product-form .swatch-list li,
  .product-form .swatches li {
    margin-right: 0 !important;
  }
}

/* ===========================
   TYPE BUTTONS – HOOGTE 36PX
   ============================ */

/* Knoppen COMPLETE FOUNDATION / REFILL ONLY */
.product-form .opt-label--btn,
.product-form .opt-label.opt-label--btn.btn {
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================
   MOBIEL – SHADE / TYPE AFSTAND + SWATCHES
   ========================================= */
@media (max-width: 749px) {

  /* Minder ruimte onder de labels "SHADE" en "TYPE" */
  .product-form .product-form__option-name,
  .product-form .product-form__option-header,
  .product-form label[for^="SingleOptionSelector"] {
    margin-bottom: 4px !important;
  }

  /* Ook de hele optie-blokken compacter op mobiel */
  .product-form .product-form__option {
    margin-bottom: 10px !important;
  }

  /* Swatch-rij wat dichter tegen het label aan */
  .product-form .swatches,
  .product-form .swatch-list,
  .product-form .swatch-options,
  .product-form .product-form__swatches {
    margin-top: 2px !important;
  }

  /* Swatches zelf dichter bij elkaar (horizontale ruimte) */
  .product-form .swatch,
  .product-form .swatch-element,
  .product-form .swatch-list > * {
    margin-right: 4px !important;
  }

  /* Als de swatches radiobuttons + label zijn binnen .swatch,
     dan hier nog extra marge verkleinen */
  .product-form .swatch input[type="radio"] + label,
  .product-form .swatch-element input[type="radio"] + label {
    margin-right: 3px !important;
  }
}

/* ===========================
   MOBIEL – SHADE / TYPE + SWATCHES
   ============================ */
@media (max-width: 749px) {

  /* Tekst SHADE: / TYPE: dichter op de opties */
  .option-selector__name {
    margin-bottom: 4px !important;   /* was ± 12px */
  }

  /* Rijtje swatches / knoppen: minder “lucht” eromheen */
  .option-selector__btns {
    margin: -4px -6px 0 0 !important;  /* standaard is -10px -10px 0 0 */
  }

  /* Afstand tussen de bolletjes onderling kleiner */
  .option-selector__btns .opt-label {
    margin: 4px 6px 0 0 !important;    /* was 10px 10px 0 0 */
  }
}

@media (max-width: 749px) {
  label.opt-label.opt-label--btn.btn.relative.text-center {
    height: 36px !important;
    line-height: 36px !important;   /* tekst mooi in het midden */
  }
}

/* --- SWATCHES ZONDER WITTE CIRKEL + ZWARTE RAND (zoals collectiepagina) --- */
.product__option .swatch {
    padding: 0 !important;
}

.product__option .swatch__button {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: transparent !important;
    overflow: hidden;
}

/* de kleur zelf (binnenkant bolletje) */
.product__option .swatch__button .swatch__inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 1px solid #dcdcdc !important; /* dun zacht randje zoals collectiepagina */
}

/* geselecteerde swatch → GEEN witte cirkel meer */
.product__option .swatch__button.is-selected,
.product__option .swatch__button:has(.is-active) {
    border: none !important;
    box-shadow: none !important;
}

/* geselecteerde swatch binnenkant */
.product__option .swatch__button.is-selected .swatch__inner {
    border: 2px solid black !important; /* dit is de enige visuele selectie */
}

/* Verwijder witte achtergrond en border van ALLE kleur-swatch bolletjes */
.product-form__swatch input[type="radio"] + label .swatch {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Verwijder border/outline van de geselecteerde swatch */
.product-form__swatch input[type="radio"]:checked + label .swatch {
  border: none !important;
  box-shadow: none !important;
}

/* Alleen de SHADE / Shades kleur-swatch knoppen */
/* 1. Buitenste rand en schaduw weghalen */
.product-form input[type="radio"][name*="Shade"] + label,
.product-form input[type="radio"][name*="Shades"] + label {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 2. Ook eventuele pseudo-elementen geen rand geven */
.product-form input[type="radio"][name*="Shade"] + label::before,
.product-form input[type="radio"][name*="Shade"] + label::after,
.product-form input[type="radio"][name*="Shades"] + label::before,
.product-form input[type="radio"][name*="Shades"] + label::after {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3. Alleen het kleur-rondje tonen */
.product-form input[type="radio"][name*="Shade"] + label span,
.product-form input[type="radio"][name*="Shades"] + label span {
  border-radius: 999px !important;
  overflow: hidden;
  border: none !important;
  outline: none !important;
}

/* 4. Swatches wat dichter bij elkaar zetten */
.product-form input[type="radio"][name*="Shade"] + label,
.product-form input[type="radio"][name*="Shades"] + label {
  margin-right: 6px !important;  /* kleiner = dichter op elkaar */
}

/* === Shopify / Symmetry kleur-swatches op de productpagina === */

/* Alle randen / schaduwen rond de kleurbolletjes uitzetten */
.product-form__input--swatch .color-swatch,
.product-form__input--swatch .color-swatch::before,
.product-form__input--swatch .swatch,
.product-form__input--swatch .swatch::before,
.product-form__input--swatch .swatch-input__label,
.product-form__input--swatch .swatch-input__label::before,
.product-form__input--swatch .swatch-input__label::after,
.variant-picker .color-swatch,
.variant-picker .color-swatch::before,
.variant-picker .swatch,
.variant-picker .swatch::before,
.variant-picker .swatch-input__label,
.variant-picker .swatch-input__label::before,
.variant-picker .swatch-input__label::after {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Zorgen dat de swatches gewoon nette ronde bolletjes zijn */
.product-form__input--swatch .color-swatch,
.product-form__input--swatch .swatch,
.variant-picker .color-swatch,
.variant-picker .swatch {
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Swatches dichter bij elkaar zetten */
.product-form__input--swatch .swatch-input__label,
.variant-picker .swatch-input__label {
  margin-right: 6px !important;   /* lager getal = nog dichter op elkaar */
  padding: 0 !important;
  background: transparent !important;
}

/* Maximaal 5 kleur-swatches per rij op MOBIEL, met ronde bolletjes */
@media screen and (max-width: 749px) {

  /* Container: grid met 5 kolommen */
  .option-selector__btns {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
    justify-items: center;
  }

  /* Elk swatch-label: vaste, vierkante maat zodat de cirkel rond blijft */
  .option-selector__btns .opt-label--swatch {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }
}

/* ==========================
   MOBILE MENU – LAVERTU STYLE
   ========================== */
@media screen and (max-width: 767px) {

  /* 0. Binnenmarges hoofdmenu */
  .navigation__mobile-header + .navigation__tier-1 {
    padding: 0 18px !important;
  }

  /* 1. Hoofdlinks (SHOP ALL, NEW, etc. – niveau 1) */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item > .navigation__link {
    font-size: 11px !important;           /* hier kun je zelf mee spelen */
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 0 !important;
    display: block;
    color: #333333 !important;            /* donkerder grijs */
    font-weight: 500 !important;
  }

  /* 1b. Lavertu Beauty Points in hoofdmenu – blauw */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item--loyalty > .navigation__link {
    color: #5d98a8 !important;
    font-weight: 500 !important;
  }

  /* Geen streepje boven SHOP ALL (eerste item) */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item:first-child {
    border-top: none !important;
  }

  /* 3. Submenu-items (Lips / Face / Nails / etc. – niveau 2) */
  .navigation__item--with-children ul .navigation__link,
  .navigation__tier-2 .navigation__link {
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 6px 0 6px 12px !important;
    display: block;
  }

  /* 4. Submenu-inspringing */
  .navigation__item--with-children ul,
  .navigation__tier-2 {
    padding-left: 10px !important;
    padding-bottom: 8px !important;
  }

  /* 5. Onderste blok: laatste drie hoofditems (Lavertu / Behind / Customer Care) groeperen */

  /* Geen onderlijnen tussen die drie */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(-n+3) {
    border-bottom: none !important;
  }

  /* Extra lijn + ruimte boven Lavertu Beauty Points (eerste van de drie) */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(3) {
    border-top: 1px solid #e5e5e5 !important;
    margin-top: 40px !important;
    padding-top: 4px !important;
  }

    /* Lavertu Beauty Points – MOBIEL blauw */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item > a.navigation__link[href="#smile-home"] {
    color: #5D89B4 !important;
    font-weight: 500 !important;
  }

    /* 5. Bovenste streep volledig weghalen (UL + header) */
  .navigation__mobile-header {
    border-bottom: none !important;
  }

  .navigation__mobile-header + .navigation__tier-1 {
    border-top: none !important;
  }

  /* 6. Lijntjes tussen items blijven wél */
  .navigation__mobile-header + .navigation__tier-1 > .navigation__item + .navigation__item {
    border-top: 1px solid #e5e5e5 !important;
  }
  

  /* ============================
   FINETUNE STREEPJES — EXACTE POSITIES
   ============================ */

/* 1. GEEN streepje boven Lavertu Beauty Points */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(3) {
  border-top: none !important;
}

/* 2. WÉL één streepje onder BY CATEGORY */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-child(4) {
  border-bottom: 1px solid #e5e5e5 !important;
}

/* 3. GEEN streepje onder Lavertu Beauty Points */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(3) {
  border-bottom: none !important;
}

/* 4. GEEN streepje boven Behind the Brand */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(2) {
  border-top: none !important;
}

/* Streepje onder Behind the Brand verwijderen */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:nth-last-child(2) {
  border-bottom: none !important;
}

/* 5. Geen streepje boven Customer Care (dus geen lijn onder Behind the Brand) */
.navigation__mobile-header + .navigation__tier-1 > .navigation__item:last-child {
  border-top: none !important;
}
}


/* ================================
   LAVERTU MENU FIXES — DEFINITIEF
   ================================ */

/* 1. Lavertu Beauty Points blauw – desktop + algemeen */
.navigation__tier-1 a[href="#smile-home"] {
  color: #5D89B4 !important;
  font-weight: 500 !important;
}

/* 1b. Lavertu Beauty Points blauw – MOBIEL */
@media screen and (max-width: 767px) {
  .navigation__mobile-header + .navigation__tier-1 a[href="#smile-home"] {
    color: #5D89B4 !important;
    font-weight: 500 !important;
  }
}

/* 1. seasonal collection – desktop + algemeen */
.navigation__tier-1 a[href="#smile-home"] {
  color: #5D89B4 !important;
  font-weight: 500 !important;
}

/* 1b. seasonal collection – MOBIEL */
@media screen and (max-width: 767px) {
  .navigation__mobile-header + .navigation__tier-1 a[href="#smile-home"] {
    color: #5D89B4 !important;
    font-weight: 500 !important;
  }
}

/* 2. Bovenste streepje boven SHOP ALL verwijderen */
.navigation__tier-1 > .navigation__item:first-child {
  border-top: none !important;
}

/* 3. Streepje boven LAVERTU BEAUTY POINTS verwijderen */
.navigation__tier-1 a[href="#smile-home"] {
  border-top: none !important;
}

/* 4. Submenu’s netjes maken (By category + Customer care) */
.navigation__item--with-children ul .navigation__link,
.navigation__tier-2 .navigation__link {
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 6px 0 6px 12px !important;
  display: block;
}

.navigation__item--with-children ul,
.navigation__tier-2 {
  padding-left: 10px !important;
  padding-bottom: 8px !important;
}

/* VERWIJDER STREEPJE BOVEN SHOP ALL (absolute override) */
ul.navigation__tier-1 {
  border-top: none !important;
}

ul.navigation__tier-1 > li:first-child {
  border-top: none !important;
}

@media screen and (max-width: 767px) {

  /* BY CATEGORY – alle regels (LIPS, FACE, NAILS, EYES, BRUSHES) strak en gelijk */

  /* De hele lijst netjes zoals hoofdmenu */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns {
    padding: 0 18px !important;
    margin: 0 !important;
  }

  /* Basis voor alle items: zelfde hoogte, geen extra lijnen/marges */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;       /* GELIJKE ruimte voor alle regels */
    margin: 0 !important;
    border: none !important;
  }

  /* Items met pijltje (LIPS + NAILS) NIET extra hoog maken */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item--with-children {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Tekst (LIPS, FACE, NAILS, EYES, BRUSHES) als in hoofdmenu */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item > a.navigation__column-title {
    flex: 1 1 auto !important;
    display: block !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  /* Pijltje (toggle) geen extra padding/marge geven */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item--with-children > .navigation__children-toggle {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 767px) {

  /* BY CATEGORY – alle 5 regels exact dezelfde linkse uitlijning */

  /* 1. Alle LI’s: één vaste linkerpadding, niets geks meer */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item {
    padding-left: 0 !important;
  }

  /* 2. Alle links binnen die LI’s: geen eigen padding/margin meer */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item > a {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: block !important;
  }
}

@media screen and (max-width: 767px) {

  /* BY CATEGORY – ALLE items (Lips, Face, Nails, Eyes, Brushes) 12px lowercase */

  /* 1. Uitklapbare items (Lips & Nails) */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2.navigation__columns
  > li.navigation__item > a.navigation__column-title {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
  }

  /* 2. Gewone submenu-items (Face, Eyes, Brushes & alle sub-subitems) */
  .mobile-navigation-drawer--child-open
  ul.navigation__tier-2 .navigation__link {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
  }
}

/* 1) Witte ruimte bovenaan AANGEMAAKTE PAGINA's zodat header niets overlapt */
.template-page .page-width,
.template-page .shopify-section {
  padding-top: 0.rem !important;  /* speel tussen 4rem en 6rem */
}

/* Header altijd boven de content houden */
.shopify-section-group-header-group,
.header-wrapper,
.site-header {
  position: relative;
  z-index: 100 !important;
}

/* Page titles: alleen op content/collectie pagina's, NIET op logo of producttitel */
.template-page .page-title,
.template-collection .page-title,
.template-list-collections .page-title,
.template-blog .page-title,
.template-article .page-title,
.lavertu-page-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.8rem;
  margin: 2.4rem 0 1.6rem 0;
}

/* Logo in header: nooit een onderstreep/border */
.logo h1,
.logo__h1 {
  border-bottom: none !important;
  margin: 0;
  padding-bottom: 0;
}

/* Producttitel op productpagina: geen onderstreep */
.template-product .product__title {
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 16px;
}
}

/* Desktop mega menu – subkoppen (Lips, Face, Nails, etc.) */
@media (min-width: 768px) {
  .navigation .navigation__columns
  .navigation__column:not(.navigation__column--promotion)
  .navigation__column-title {
    text-transform: uppercase;   /* CAPS LOCK */
    font-weight: 600;            /* iets dikker */
    letter-spacing: 0.12em;      /* wat meer spacing, Lavertu-look */
    font-size: 0.8rem;           /* je kunt dit nog iets omhoog/omlaag doen */
    padding-bottom: 2rem;        /* extra ruimte onder de subkop */
  }
}

@media (min-width: 768px) {
  .navigation__tier-2 .navigation__columns {
    column-gap: 70px !important;
    justify-content: center;
  }

  .navigation__column {
    min-width: 180px;
  }
}

/* MEGA MENU – 5 kolommen netjes naast elkaar op desktop */
@media (min-width: 1024px) {
  .navigation__tier-2.navigation__columns {
    display: flex !important;
    flex-wrap: nowrap !important;   /* NIET meer afbreken naar 2e rij */
    justify-content: center !important;
    gap: 48px !important;           /* speel evt. met 40–60px */
  }

  .navigation__tier-2.navigation__columns .navigation__column {
    flex: 0 0 auto;                 /* vaste breedte, niet oprekken */
    min-width: 140px;               /* als het krap wordt kun je dit verlagen */
  }

  .navigation__column-title {
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    padding-bottom: 12px !important;
    display: inline-block;
  }
}

/* CUSTOMER CARE (en andere simple dropdowns) netter stylen */
@media (min-width: 1024px) {
  /* De simple list (zoals onder CUSTOMER CARE) centreren */
  .navigation__tier-2.navigation__simple-list {
    max-width: 260px;
    margin: 0 auto;              /* in het midden onder het menu */
    text-align: left;            /* tekst zelf gewoon links houden */
  }

  .navigation__tier-2.navigation__simple-list .navigation__item {
    margin-bottom: 0.4rem;
  }

  .navigation__tier-2.navigation__simple-list .navigation__link {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }
}

/* Spark Carousel – ultra tight spacing (mobile) */
@media (max-width: 768px) {

  /* Verwijder interne gaps */
  [class*="spark"] [class*="carousel"] {
    gap: 0 !important;
  }

  /* Items tegen elkaar */
  [class*="spark"] .spark-carousel-item,
  [class*="spark"] [class*="carousel"] > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Alleen minimale scheiding (1px) */
  [class*="spark"] .spark-carousel-item:not(:last-child) {
    margin-right: 1px !important;
  }

  /* Container vrijwel edge-to-edge */
  [class*="spark"] {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  /* Border radius exact 16px */
  [class*="spark"] video,
  [class*="spark"] img,
  [class*="spark"] iframe {
    border-radius: 16px !important;
    object-fit: contain;
  }
}

/* Hide text inside color swatches on collection/product grid (Symmetry) */
.template-collection .product-block-options--swatch .product-block-options__item:not(:empty),
.template-search .product-block-options--swatch .product-block-options__item:not(:empty),
.template-index .product-block-options--swatch .product-block-options__item:not(:empty) {
  font-size: 0;
  color: transparent;
}

/* =========================================================
   LAVERTU – COLLECTION INTRO (above grid) + SEO (under grid)
   Works with:
   - Intro above grid: .collection-intro / __title / __content
   - SEO under grid:  .collection-seo  / __title / __body
   ========================================================= */

/* -------------------------------
   SEO TEXT (UNDER PRODUCT GRID)
-------------------------------- */
.template-collection .collection-seo{
  max-width: var(--page-width, 1100px);
  width: 100%;
  margin: 60px auto; /* minder groot dan jouw huidige */
  padding-left: var(--gutter, 40px);
  padding-right: var(--gutter, 40px);
  text-align: left;
}

/* SEO title (Face Makeup) – kleiner + zelfde vibe als product titles */
.template-collection .collection-seo__title{
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 14px 0;
}

/* SEO body wrapper (matches your Liquid: .collection-seo__body) */
.template-collection .collection-seo__body,
.template-collection .collection-seo__body p{
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(0,0,0,0.72);
}

/* Body: laat links starten, maar wel prettig leesbaar */
.template-collection .collection-seo__body{
  max-width: 900px;      /* totale tekstkolom, links uitgelijnd */
}

.template-collection .collection-seo__body p{
  margin: 0 0 0.9rem 0;
  max-width: none;       /* IMPORTANT: voorkomt “centrering gevoel” */
}

/* Remove last p margin */
.template-collection .collection-seo__body p:last-child{
  margin-bottom: 0;
}

.baked-bronzer-intro--top{
  margin: 14px auto 0;
}
.baked-bronzer-intro--bottom{
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(17,17,17,0.10);
  text-align: center;
}
.baked-bronzer-intro--bottom p{
  margin: 0 0 10px;
}


/* -------------------------------
   INTRO TEXT (ABOVE PRODUCT GRID)
-------------------------------- */
.template-collection .collection-intro{
  max-width: 680px;
  margin: 60px auto 40px;
  text-align: center;
  padding-left: var(--gutter, 40px);
  padding-right: var(--gutter, 40px);
}

.template-collection .collection-intro__title{
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  margin: 0 0 0.8rem 0;
}

.template-collection .collection-intro__content,
.template-collection .collection-intro__content p{
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(0,0,0,0.65);
}

.template-collection .collection-intro__content p{
  margin: 0 0 0.9rem 0;
}

.template-collection .collection-intro__content p:last-child{
  margin-bottom: 0;
}


/* -------------------------------
   MOBILE
-------------------------------- */
@media (max-width: 767px){
  .template-collection .collection-seo{
    padding-left: 20px;
    padding-right: 20px;
    margin: 48px auto;
  }

  .template-collection .collection-seo__title{
    font-size: 16px;
  }

  .template-collection .collection-intro{
    padding-left: 20px;
    padding-right: 20px;
    margin: 48px auto 32px;
  }
}

/* COLLECTION HEADERS: center on mobile (Symmetry) */
@media (max-width: 768px) {

  /* 1) Symmetry collection header blocks */
  .template-collection .collection-hero,
  .template-collection .collection-header,
  .template-collection .collection-hero__inner,
  .template-collection .collection-hero__text,
  .template-collection .collection-hero__title,
  .template-collection .collection-hero__description,
  .template-collection .collection__title,
  .template-collection .collection__description {
    text-align: center !important;
  }

  /* 2) Force full-width so centering can’t “look” off */
  .template-collection .collection-hero__title,
  .template-collection .collection__title {
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Your custom intro blocks (Custom Liquid) */
  .template-collection .collection-intro {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .template-collection .collection-intro h1,
  .template-collection .collection-intro p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 42rem; /* voorkomt te brede regels */
    width: 100%;
  }
}

/* Mobile menu: maak de link naar /collections/valentines-day-collection rood */
@media (max-width: 767.98px){

  /* matcht /collections/... én /nl/collections/... én eventuele query’s */
  .navigation__tier-1 a.navigation__link[href*="seasonal-collection"],
  .mobile-navigation-drawer a.navigation__link[href*="seasonal-collection"],
  .reveal-mobile-nav a.navigation__link[href*="seasonal-collection"]{
    color: #FE9BAC !important;
    font-weight: 600 !important;
  }

  /* sommige themes zetten kleur op visited/hover apart */
  .navigation__tier-1 a.navigation__link[href*="seasonal-collection"]:visited,
  .navigation__tier-1 a.navigation__link[href*="seasonal-collection"]:hover,
  .navigation__tier-1 a.navigation__link[href*="seasonal-collection"]:active{
    color: #FE9BAC !important;
  }
}

/* MOBILE MENU – Valentine link ALTIJD rood */
@media (max-width: 767.98px){

  .reveal-mobile-nav--revealed
  .navigation__tier-1
  > .navigation__item
  > a.navigation__link[href="/collections/seasonal-collection"]{
    color: #FE9BAC !important;
    font-weight: 600;
  }

  /* veiligheid: ook NL / query varianten */
  .reveal-mobile-nav--revealed
  .navigation__tier-1
  > .navigation__item
  > a.navigation__link[href*="seasonal-collection"]{
    color: #FE9BAC !important;
  }
}




/* Qikify Slide Cart – discount code bold */

.qikify-cart label,
.qikify-cart .discount,
.qikify-cart .discount-box,
.qikify-cart .discount-title {
  font-weight: 600;
}

.qikify-cart input[name*="discount"],
.qikify-cart input[id*="discount"] {
  font-weight: 500;
}

.qikify-cart button {
  font-weight: 600;
}

/* Qikify – Discount code hint + active state bold */

/* 1) Tekstregel in de cart (de hint) */
.qikify-cart .discount,
.qikify-cart .discount-title,
.qikify-cart .discount-text,
.qikify-cart .discount-label,
.qikify-cart .discount-box,
.qikify-cart [class*="discount"] {
  font-weight: 600 !important;
}

/* 2) Als je klikt en er komt een input/veld */
.qikify-cart input[name*="discount"],
.qikify-cart input[id*="discount"],
.qikify-cart input[type="text"],
.qikify-cart input[type="search"] {
  font-weight: 500 !important;
}

/* 3) Apply knop */
.qikify-cart button,
.qikify-cart [class*="discount"] button {
  font-weight: 600 !important;
}

/* LAVERTU – Image with text (Symmetry) */
#shopify-section-{{ section.id }} {
  font-family: "Montserrat", sans-serif;
}

/* Meer “premium” spacing */
#shopify-section-{{ section.id }} .image-with-text {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Afbeeldingen: zachter/cleaner */
#shopify-section-{{ section.id }} .image-with-text img {
  border-radius: 16px;
}

/* Titel “Benefits” zoals jullie stijl (klein, spaced, uppercase) */
#shopify-section-{{ section.id }} .image-with-text h2,
#shopify-section-{{ section.id }} .image-with-text .h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  color: #111;
  margin-bottom: 14px;
}

/* Subheadings vet + compact (zoals je bullets eronder) */
#shopify-section-{{ section.id }} .image-with-text h3,
#shopify-section-{{ section.id }} .image-with-text .h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: #111;
  margin: 0 0 6px;
}

/* Paragraaf text: rustiger en beter leesbaar */
#shopify-section-{{ section.id }} .image-with-text p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 16px;
}

/* Maak de hele sectie net wat “minder blocky” */
#shopify-section-{{ section.id }} .image-with-text__content {
  max-width: 560px;
}

/* Mobile: iets meer lucht */
@media (max-width: 749px) {
  #shopify-section-{{ section.id }} .image-with-text {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* =========================================
   LAVERTU – FAQ block (incl. header) – Symmetry
   Background + no caps + sizing + distinction
   ========================================= */

/* Achtergrond voor FAQ header + tabs samen */
.template-product .faq-header,
.template-product .collapsible-tabs{
  background: #F7F7F7 !important;
}

/* Padding zodat het als 1 blok voelt */
.template-product .faq-header{
  padding: 18px 18px 10px 18px !important;
  margin: 0 !important;
}
.template-product .collapsible-tabs{
  padding: 10px 18px 14px 18px !important;
  margin: 0 !important;
}

/* Zorg dat er geen witruimte tussen header en tabs zit */
.template-product .faq-header + .shopify-section{
  margin-top: 0 !important;
}

/* FAQ titel iets netter (mag je aanpassen) */
.template-product .faq-header h1,
.template-product .faq-header h2,
.template-product .faq-header .section__heading{
  margin: 0 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.12em !important;
}

/* Vragen: GEEN caps + kleiner */
.template-product .collapsible-tabs details.disclosure > summary.disclosure__title{
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  font-weight: 550 !important;
  color: rgba(17,17,17,.92) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Antwoorden: rustiger */
.template-product .collapsible-tabs .disclosure__panel{
  font-size: 0.80rem !important;
  line-height: 1.7 !important;
  color: rgba(17,17,17,.62) !important;
  margin-top: 6px !important;
}

/* Icoon subtieler */
.template-product .collapsible-tabs .icon{
  opacity: .6 !important;
  transform: scale(.92);
}

/* Mobile iets compacter */
@media (max-width: 749px){
  .template-product .faq-header{ padding: 16px 14px 8px 14px !important; }
  .template-product .collapsible-tabs{ padding: 8px 14px 12px 14px !important; }
}

/* =========================================
   FAQ spacing – minder gepropt (mobile first)
   ========================================= */

/* Meer lucht rondom het hele blok */
.template-product .faq-header{
  padding: 22px 18px 14px 18px !important;
}

.template-product .collapsible-tabs{
  padding: 14px 18px 22px 18px !important;
}

/* Meer ruimte onder de titel */
.template-product .faq-header h1,
.template-product .faq-header h2,
.template-product .faq-header .section__heading{
  margin-bottom: 10px !important;
}

/* Iets meer spacing per item */
.template-product .collapsible-tabs details.disclosure{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Vraag: iets meer hoogte */
.template-product .collapsible-tabs details.disclosure > summary.disclosure__title{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 0.80rem !important;   /* héél licht groter voor rust */
}

/* Antwoord: iets meer ademruimte */
.template-product .collapsible-tabs .disclosure__panel{
  margin-top: 8px !important;
  padding-bottom: 8px !important;
}

/* =========================================================
   LAVERTU – FAQ block (ONLY Lipstick Unique) – Desktop fix
   Background spans header + tabs, content centered
   ========================================================= */

/* Scope: Lipstick Unique template */
body.template-product--lipstick-unique .faq-header,
body.product-lipstick-unique .faq-header,
body.template-product--lipstick-unique .collapsible-tabs,
body.product-lipstick-unique .collapsible-tabs{
  background:#ffffff !important;
}

/* Haal “section spacing” weg zodat header + tabs als 1 blok voelen */
body.template-product--lipstick-unique .faq-header,
body.product-lipstick-unique .faq-header{
  margin:0 !important;
  padding:44px 0 14px !important; /* top / bottom ruimte header */
}

body.template-product--lipstick-unique .collapsible-tabs,
body.product-lipstick-unique .collapsible-tabs{
  margin:0 !important;
  padding:0 0 44px !important; /* bottom ruimte hele FAQ */
}

/* Center de inhoud (container) op desktop */
body.template-product--lipstick-unique .faq-header .container,
body.product-lipstick-unique .faq-header .container,
body.template-product--lipstick-unique .collapsible-tabs .container,
body.product-lipstick-unique .collapsible-tabs .container{
  max-width: 980px !important;   /* pas aan als je breder wil */
  margin: 0 auto !important;
}

/* Titel netjes, niet “gepropt” */
body.template-product--lipstick-unique .faq-header h1,
body.template-product--lipstick-unique .faq-header h2,
body.product-lipstick-unique .faq-header h1,
body.product-lipstick-unique .faq-header h2{
  margin:0 0 18px !important;   /* ruimte tot eerste vraag */
}

/* Accordion blok centreren + volle breedte binnen container */
body.template-product--lipstick-unique .collapsible-tabs__block,
body.product-lipstick-unique .collapsible-tabs__block{
  max-width: 860px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Vragen: kleiner + geen capslock */
body.template-product--lipstick-unique .collapsible-tabs summary.disclosure__title,
body.product-lipstick-unique .collapsible-tabs summary.disclosure__title{
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.90rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;            /* iets meer onderscheid */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: rgba(17,17,17,.92) !important;
}

/* Antwoorden: subtieler dan vraag */
body.template-product--lipstick-unique .collapsible-tabs .disclosure__panel,
body.product-lipstick-unique .collapsible-tabs .disclosure__panel{
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  color: rgba(17,17,17,.70) !important;
  padding-top: 6px !important;
  padding-bottom: 14px !important;
}

/* Lijnen zachter */
body.template-product--lipstick-unique .collapsible-tabs .disclosure,
body.product-lipstick-unique .collapsible-tabs .disclosure{
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

/* Plus/min iets subtieler */
body.template-product--lipstick-unique .collapsible-tabs .icon,
body.product-lipstick-unique .collapsible-tabs .icon{
  transform: scale(0.92);
  opacity: 0.75;
}

/* ONLY the gift banner inside the mobile drawer */
.mobile-navigation-drawer .lv-mobile-gift-banner{
  padding:12px 16px;
}

.lv-mobile-gift-banner__link{
  position:relative;
  display:block;
}

.lv-mobile-gift-banner__text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  font-family: Montserrat, sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;

  text-align:center;
  padding:12px;
  pointer-events:none;
}

/* ===== Weglot in Symmetry mobile menu: exact menu-row styling ===== */

/* 1) Container mag GEEN eigen padding/margin hebben (anders klopt de divider niet) */
.mobile-navigation-drawer .weglot-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Hele switcher full width */
.mobile-navigation-drawer .weglot_switcher.default_dropdown{
  width: 100% !important;
}

/* 3) Weglot gebruikt vaak .language-option.wgcurrent als “current row”.
      Maak die row exact als Symmetry menu-item */
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent a{
  width: 100% !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* match menu spacing */
  padding: 18px 24px !important;

  /* typography like menu */
  font-family: Montserrat, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;

  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;

  border: 0 !important;
  margin: 0 !important;
}

/* 5) Zorg dat eventuele “list” dropdown niet als kaartje verschijnt */
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-list{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* 6) Als Weglot een pijl/icoon met ::after zet: maak ‘m subtiel en rechts uitgelijnd */
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent:after,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent::after,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a:after,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a::after{
  margin-left: auto !important;
  opacity: .55 !important;
}

/* ===== Symmetry divider fix voor Weglot row ===== */

/* haal de korte lijn weg */
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a{
  border-top: 0 !important;
}

/* zet de divider op de wrapper zodat hij full width loopt */
.mobile-navigation-drawer .weglot_switcher.default_dropdown{
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* ===== Weglot mobile: verwijder divider/balk volledig ===== */

/* haal alle borders/lijntjes weg rondom de Weglot row */
.mobile-navigation-drawer .weglot-container,
.mobile-navigation-drawer #weglot-switcher-2,
.mobile-navigation-drawer .weglot_switcher.default_dropdown,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent a{
  border: 0 !important;
  box-shadow: none !important;
}

/* en voor de zekerheid: geen pseudo “lijn” via after/before */
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a::before,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .language-option a::after,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent::before,
.mobile-navigation-drawer .weglot_switcher.default_dropdown .wgcurrent::after{
  border: 0 !important;
}

.mobile-navigation-drawer .weglot-container{
  margin-top: 6px !important;
}


/* Lavertu shade reassurance line — ONLY selected foundation pages
   We moved the text to Liquid/HTML (Weglot-ready).
   This CSS now ONLY handles styling + disables old ::after text.
*/

/* 1) Disable old pseudo-element text so it won't show / conflict */
variant-picker[data-url*="colour-adapting-foundation"] :is(
  .variant-picker__label,
  .variant-picker__option-name,
  .option-selector__label,
  .product-form__option-name,
  fieldset legend
)::after,
variant-picker[data-url*="offer-free-refill"] :is(
  .variant-picker__label,
  .variant-picker__option-name,
  .option-selector__label,
  .product-form__option-name,
  fieldset legend
)::after,
variant-picker[data-url*="foundation-bundle"] :is(
  .variant-picker__label,
  .variant-picker__option-name,
  .option-selector__label,
  .product-form__option-name,
  fieldset legend
)::after,
variant-picker[data-url*="foundation-refill-bundle"] :is(
  .variant-picker__label,
  .variant-picker__option-name,
  .option-selector__label,
  .product-form__option-name,
  fieldset legend
)::after{
  content:"";        /* IMPORTANT: no text in CSS */
  display:none;      /* prevents extra height/spacing */
}


/* ==========================================
   LAVERTU FOOTER — BASE
========================================== */

.section-footer {
  color: #ffffff !important;
}

.section-footer__row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 56px !important;
}

.section-footer__row_col,
.section-footer__text-block,
.section-footer__menu-block,
.section-footer__newsletter-block {
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
}

.section-footer__row_col > * {
  margin-top: 0 !important;
}

/* Headings */
.section-footer [class*="heading"],
.section-footer h2,
.section-footer h3,
.section-footer h4,
.section-footer summary {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* Links */
.section-footer__menu-block a,
.section-footer .link-list a,
.section-footer ul a {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  color: rgba(255,255,255,.78) !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
}

/* Hover blijft wit/licht */
.section-footer__menu-block a:hover,
.section-footer .link-list a:hover,
.section-footer ul a:hover {
  color: #ffffff !important;
  opacity: .85 !important;
}

/* Text */
.section-footer p,
.section-footer li {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.78) !important;
}

.section-footer ul,
.section-footer ol {
  margin: 0 !important;
  padding: 0 !important;
}

.section-footer li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Newsletter */
.section-footer__newsletter-block {
  max-width: 320px !important;
}

.section-footer input {
  height: 46px !important;
  font-size: 13px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #ffffff !important;
}

.section-footer input::placeholder {
  color: rgba(255,255,255,.65) !important;
}

.section-footer button {
  min-height: 46px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  color: #ffffff !important;
}

.section-footer button:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

/* Social icons zelfde kleur als tekst */
.section-footer svg,
.section-footer .social-links svg,
.section-footer .social-links a,
.section-footer [class*="social"] a,
.section-footer [class*="social"] svg {
  color: rgba(255,255,255,.78) !important;
  fill: currentColor !important;
}

.section-footer [class*="social"] a:hover,
.section-footer [class*="social"] a:hover svg {
  color: #ffffff !important;
  opacity: .85 !important;
}



/* ==========================================
   LAVERTU FOOTER — MOBILE
========================================== */

@media screen and (max-width: 749px) {

  .section-footer__row {
    display: block !important;
    gap: 0 !important;
  }

  .section-footer__row_col,
  .section-footer__menu-block,
  .section-footer__text-block,
  .section-footer__newsletter-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-footer details {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
  }

  .section-footer details:last-child {
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }

  .section-footer summary,
  .section-footer [class*="heading"],
  .section-footer h2,
  .section-footer h3,
  .section-footer h4 {
    margin: 0 !important;
    padding: 16px 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
  }

  .section-footer details[open] > *:not(summary) {
    padding-top: 2px !important;
    padding-bottom: 10px !important;
  }

  .section-footer__menu-block a,
  .section-footer .link-list a,
  .section-footer ul a {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: .015em !important;
    color: rgba(255,255,255,.78) !important;
    text-transform: none !important;
    padding: 6px 0 !important;
  }

  .section-footer__menu-block a:hover,
  .section-footer .link-list a:hover,
  .section-footer ul a:hover {
    color: #ffffff !important;
    opacity: .85 !important;
  }

  .section-footer p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.78) !important;
  }

  .section-footer__newsletter-block {
    max-width: 100% !important;
    padding-top: 18px !important;
  }

  .section-footer input {
    height: 44px !important;
    font-size: 13px !important;
  }

  .section-footer button {
    font-size: 12px !important;
    letter-spacing: .05em !important;
  }
}



/* ===== Fix grey label background in Symmetry product cards ===== */

/* Lavertu product image label */

.image-label-wrap .product-label--meta,
.product-label-container .product-label--meta,
.product-label--meta,
.product-label {
background:#6A6E71!important;
color:#ffffff!important;
border:none!important;
border-radius:1px!important;
box-shadow:none!important;
padding:4px 8px!important;
font-size:10px!important;
font-weight:500!important;
letter-spacing:1.2px!important;
line-height:1!important;
text-transform:uppercase!important;
text-align:right!important;
white-space:nowrap!important;
opacity:1!important;
filter:none!important;
mix-blend-mode:normal!important;
}

.image-label-wrap .product-label--meta span,
.product-label-container .product-label--meta span,
.product-label--meta span,
.product-label span {
color:#ffffff!important;
padding:0!important;
margin:0!important;
background:transparent!important;
background-image:none!important;
white-space:nowrap!important;
text-shadow:none!important;
opacity:1!important;
filter:none!important;
mix-blend-mode:normal!important;
}

/* Fix washed-out product images in collection cards */

.product-block .product-block__image .theme-img,
.product-block .img-ar img,
.product-block .img-ar--cover img {
mix-blend-mode:normal!important;
opacity:1!important;
filter:none!important;
}

/* Mobile */

@media screen and (max-width:749px){

.image-label-wrap .product-label--meta,
.product-label-container .product-label--meta,
.product-label--meta,
.product-label{
padding:4px 12px!important;
font-size:8px!important;
letter-spacing:.9px!important;
}

}

/* Announcement bar */
.announcement-bar,
.announcement-bar__message {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.3;
  text-transform: uppercase;
  line-height: 1;
}

.announcement-bar {
  padding-top: 4px !important;
  padding-bottom: 6px !important;
  min-height: auto;
}
.section-footer,
.section-footer a,
.section-footer p,
.section-footer li,
.section-footer span,
.section-footer summary,
.section-footer h1,
.section-footer h2,
.section-footer h3,
.section-footer h4,
.section-footer .h1,
.section-footer .h2,
.section-footer .h3,
.section-footer .h4,
.section-footer .mobile-disclosure__title,
.section-footer .section-footer__title,
.section-footer .section-footer__heading,
.section-footer .section-footer__row__col > *:first-child {
  color: #fff !important;
}

.section-footer .mobile-disclosure__panel a,
.section-footer .mobile-disclosure__panel li,
.section-footer .mobile-disclosure__panel span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.section-footer input[type="email"] {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.section-footer input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.section-footer button {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}

.section-footer button:hover {
  background-color: rgba(255,255,255,0.1);
}

.section-footer .newsletter-form input,
.section-footer .signup-form input,
.section-footer input[type="email"],
.section-footer .input-group-field {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.section-footer .newsletter-form input::placeholder,
.section-footer .signup-form input::placeholder,
.section-footer input[type="email"]::placeholder,
.section-footer .input-group-field::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
}

.section-footer .newsletter-form button,
.section-footer .signup-form button,
.section-footer button[type="submit"],
.section-footer .input-group-btn .button,
.section-footer .newsletter-form__button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

.section-footer .newsletter-form button:hover,
.section-footer .signup-form button:hover,
.section-footer button[type="submit"]:hover,
.section-footer .input-group-btn .button:hover,
.section-footer .newsletter-form__button:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.cc-rating-stars__svg {
  fill: #5d89b4 !important; /* jouw huidige blauw */
}

.cc-rating-count {
  color: #9AA6AF !important;
  font-size: 0.9em;
  opacity: 0.9;
}

.jdgm-star.jdgm--on:before {
  color: #5d89b4 !important;
}

.jdgm-prev-badge__text {
  color: #9AA6AF !important;
}

/* Productbadge op collectiekaarten */
.image-label-wrap .product-label,
.image-label-wrap .product-label__text,
.image-label-wrap .product-block__badge {
  background-color: #9AA6AF !important;
  color: #9AA6AF !important;
  border-color: #9AA6AF !important;
}

/* Productbadge op productpagina */
.template-product .product-label,
.template-product .product-label__text,
.template-product .product-page__badge,
.template-product .product-block__badge {
  background-color: #9AA6AF !important;
  color: #9AA6AF !important;
  border-color: #9AA6AF !important;
}

.product-label {
  background-color: #9AA6AF !important;
  color: #ffffff !important;
  letter-spacing: 0.06em;
}

/* Achtergrond van productafbeelding op collectiekaarten */
.product-block .image-label-wrap,
.product-block .product-block__image,
.product-block .img-ar,
.product-block .img-ar--cover {
  background-color: #F8F9FA !important;
}

/* Afbeelding laten blenden met die achtergrond */
.product-block .product-block__image .theme-img,
.product-block .img-ar img,
.product-block .img-ar--cover img {
  mix-blend-mode: multiply !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

.product-block .product-block__image img,
.product-block .img-ar img,
.product-block .img-ar--cover img {
  transform: scale(0.80); /* 👈 hier aanpassen */
  transition: transform 0.3s ease;
}

.product-block:hover .product-block__image img,
.product-block:hover .img-ar img,
.product-block:hover .img-ar--cover img {
  transform: scale(0.83);

  .product-block .product-block__image {
  padding: 10px;
}
}

/* =========================
   CUSTOM LANGUAGE DROPDOWN
========================= */

.custom-language-dropdown {
  position: relative;
  margin: 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 9999;
}

.custom-language-toggle {
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 1;
  visibility: visible;
}

.custom-language-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  color: #222222;
  min-width: 130px;
  padding: 8px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 99999;
}

.custom-language-dropdown:hover .custom-language-menu {
  display: block;
}

.custom-language-menu a {
  display: block;
  padding: 9px 14px;
  text-decoration: none;
  color: #222222 !important;
  white-space: nowrap;
}

.custom-language-menu a:hover {
  background: #f7f7f7;
}


/* =========================
   DESKTOP
========================= */

@media screen and (min-width: 768px) {
  .custom-language-dropdown {
    display: flex !important;
    align-items: center;
  }

  .custom-language-toggle,
.custom-language-toggle span {
  color: #222222 !important;
}

  /* Shopify language selector in announcement bar onzichtbaar maken,
     maar ruimte behouden zodat de bar niet verspringt */
  .announcement-bar .localization-form,
  .announcement-bar .disclosure,
  .section-announcement-bar .localization-form,
  .section-announcement-bar .disclosure,
  .announcement-bar__localization,
  .announcement-bar__right {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Alleen op transparante homepage header wit maken */
.template-index .custom-language-toggle,
.template-index .custom-language-toggle span {
  color: #ffffff !important;
}

/* Op alle andere pagina's donker houden */
body:not(.template-index) .custom-language-toggle,
body:not(.template-index) .custom-language-toggle span {
  color: #222222 !important;
}
}




/* =========================
   MOBIEL
========================= */

@media screen and (max-width: 767px) {
  .custom-language-dropdown {
    display: none !important;
  }
}


/* =========================
   STICKY / WITTE HEADER
========================= */

.is-sticky .custom-language-toggle,
.sticky-header .custom-language-toggle,
.scrolled .custom-language-toggle {
  color: #222222 !important;
}

.lavertu-product-subtitle {
  display: block !important;

  margin-top: 8px !important;
  margin-bottom: 18px !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 11px !important;
  line-height: 1.6 !important;

  font-weight: 450 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  color: #000 !important;

  max-width: 58ch !important;
}

@media screen and (max-width: 749px) {
  .lavertu-product-subtitle {
    font-size: 11px !important;
    line-height: 1.6 !important;

    margin-top: 6px !important;
    margin-bottom: 16px !important;

    max-width: 100% !important;
  }
}

.lavertu-product-highlights {
  margin: 8px 0 16px;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #111;
}

@media (max-width: 749px) {
  .lavertu-product-highlights {
  margin: 8px 0 16px;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #111;
  }
}

/* =========================
   LANGUAGE SELECTOR - SYMMETRY HEADER FIX
========================= */

/* Transparante homepage header: wit */
@media screen and (min-width: 768px) {
  body.template-index .pageheader--transparent .custom-language-toggle,
  body.template-index .pageheader--transparent .custom-language-toggle span,
  body.template-index .pageheader--transparent .custom-language-toggle svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* Witte / sticky header: donker */
@media screen and (min-width: 768px) {
  body.template-index .pageheader:not(.pageheader--transparent) .custom-language-toggle,
  body.template-index .pageheader:not(.pageheader--transparent) .custom-language-toggle span,
  body.template-index .pageheader:not(.pageheader--transparent) .custom-language-toggle svg,
  body.template-index .pageheader--sticky:not(.pageheader--transparent) .custom-language-toggle,
  body.template-index .pageheader--sticky:not(.pageheader--transparent) .custom-language-toggle span,
  body.template-index .pageheader--sticky:not(.pageheader--transparent) .custom-language-toggle svg {
    color: #222222 !important;
    fill: #222222 !important;
    stroke: #222222 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

variant-picker .lv-shade-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  opacity: 0.65;
  letter-spacing: 0 !important;
  margin-top: 2px;
}

variant-picker legend.label {
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase;
}

.lv-ugc-caption {
  text-align: center;
  margin-top: 18px;
}

.lv-ugc-caption__title {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

.lv-ugc-caption__sub {
  font-size: 11px;
  font-style: italic;
  opacity: 0.6;
  margin: 3px 0 0;
}

.lavertu-trust-icons {
  display: grid;
  gap: 10px 16px;
  margin: 10px 0 14px;
  padding: 8px 0;
}

.lavertu-trust-icons--3 {
  grid-template-columns: repeat(3, 1fr);
}

.lavertu-trust-icons--4 {
  grid-template-columns: repeat(2, 1fr);
}

.lavertu-trust-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.lavertu-trust-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
}

.lavertu-trust-copy {
  min-width: 0;
}

.lavertu-trust-title {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 450 !important;
  color: #000 !important;
}

.lavertu-trust-text {
  margin-top: 1px !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.lavertu-payment-toggle {
  display: none !important;
}

.lavertu-payment-details {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 8px;
  margin-top: 7px;
  align-items: center;
  justify-items: center;
}

.lavertu-payment-details.is-open {
  display: grid !important;
}

.lavertu-payment-details img {
  width: auto !important;
  height: 22px !important;
  max-width: 60px !important;
  object-fit: contain !important;
  display: block;
  opacity: 1;
}

@media screen and (max-width: 749px) {
  .lavertu-trust-icons--3,
  .lavertu-trust-icons--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lavertu-payment-details {
    grid-template-columns: repeat(3, auto);
    gap: 7px 9px;
  }

  .lavertu-payment-details img {
    height: 18px !important;
    max-width: 52px !important;
  }
}

.qbk-title {
  text-transform: none !important;
  font-weight: 600 !important;
}

.qbk-description {
  text-transform: none !important;
}

.qbk-description {
    color: #555 !important;
}

.jdgm-star,
.jdgm-star.jdgm-half:before {
  color: #5E88B6 !important;
  font-size: 16px !important;
}

.jdgm-prev-badge__text {
  font-size: 11px !important;
  color: #7d7d7d !important;
}

.product-form .btn,
.product-form button[type="submit"],
button[name="add"] {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #111 !important;
  box-shadow: none !important;
}

.product-form .btn:hover,
.product-form button[type="submit"]:hover,
button[name="add"]:hover {
  background: #111 !important;
  color: #fff !important;
}

.product-info-accordion .qbk-description,
.product-info-accordion .qbk-description p,
.product-info-accordion .qbk-description li {
  font-weight: 400 !important;
}

/* Product accordion tekst normaal gewicht */
.template-product .product-info-accordion,
.template-product .product-info-accordion p,
.template-product .product-info-accordion li,
.template-product .product-info-accordion div {
  font-weight: 400 !important;
}

/* Alleen accordion titels iets sterker */
.template-product .product-info-accordion button,
.template-product .product-info-accordion summary,
.template-product .product-info-accordion .accordion__title {
  font-weight: 500 !important;
}

/* Accordion content - Lavertu premium style */

.template-product .collapsible-tab,
.template-product .collapsible-tab p,
.template-product .collapsible-tab li,
.template-product .collapsible__content,
.template-product .collapsible__content p,
.template-product .collapsible__content li,
.template-product .rte,
.template-product .rte p,
.template-product .rte li {

  font-size: 12px !important;
  line-height: 1.8 !important;

  font-weight: 500 !important;

  color: #111 !important;
  letter-spacing: 0.01em !important;
}
/* Ruimte tussen paragrafen */
.template-product .collapsible__content p {
  margin-bottom: 18px !important;
}

/* Accordion titels */
.template-product .collapsible-tab__heading,
.template-product summary {
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Product titel Lavertu */
.template-product .product-title,
.template-product h1.product-title {
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 0 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: #111 !important;
}

.jdgm-prev-badge__text {
  font-size: 12px !important;
  color: #111 !important;
  font-weight: 400 !important;
}

.template-product .product-form button[name="add"] {
  border-radius: 0 !important;
  border: 1px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 13px 18px !important;
  width: 100% !important;
}

.template-product .product-form button[name="add"] .atc-old-price {
  text-decoration: line-through;
  opacity: 0.55;
  margin-right: 5px;
}

/* Lavertu trust dropdown - Merit style */
.template-product .lavertu-trust-dropdown {
  margin: 14px 0 18px !important;
  text-align: center !important;
}

.template-product .lavertu-trust-dropdown > summary {
  display: inline-block !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 450 !important;
  color: #111 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  border: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.template-product .lavertu-trust-dropdown > summary::-webkit-details-marker {
  display: none !important;
}

.template-product .lavertu-trust-dropdown > summary::marker {
  content: "" !important;
}

.template-product .lavertu-trust-dropdown .lavertu-trust-icons {
  margin-top: 16px !important;
  text-align: left !important;
}

/* Product accordion divider lijnen verbergen */
.template-product .product-info-accordion,
.template-product .product-info-accordion .disclosure,
.template-product .product-info-accordion .disclosure__title {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Product accordion: plusje links plaatsen */
.product-info-accordion .disclosure__title {
  position: relative;
  padding-left: 38px !important;
}

/* Horizontale lijn van het plusje */
.product-info-accordion .disclosure__title::before {
  left: 20px !important;
  right: auto !important;
}

/* Verticale lijn van het plusje */
.product-info-accordion .disclosure__title::after {
  left: 20px !important;
  right: auto !important;
}

/* Accordion titel donkerder en iets zwaarder */
.product-info-accordion .disclosure__title {
  color: #000 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* Plusje zwart */
.product-info-accordion .disclosure__title:before,
.product-info-accordion .disclosure__title:after {
  background-color: #000 !important;
}

/* Accordion titel kleiner */
.product-info-accordion .disclosure__title {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
}

/* Plusje zwart */
.product-info-accordion .disclosure__title:before,
.product-info-accordion .disclosure__title:after {
  background-color: #000 !important;
}

/* Variant swatches - Lavertu square style */
.product-form .option-selector__btns .opt-label--swatch {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  background-color: var(--swatch-background-color) !important;
  background-image: var(--swatch-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Interne witte rand / theme laagjes uitzetten */
.product-form .option-selector__btns .opt-label--swatch::before,
.product-form .option-selector__btns .opt-label--swatch::after {
  display: none !important;
  content: none !important;
}

/* Niet geselecteerd */
.product-form .option-selector__btns input:not(:checked) + .opt-label--swatch {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Hover niet dik maken */
.product-form .option-selector__btns input:not(:checked) + .opt-label--swatch:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Geselecteerd: dunne zwarte rand direct tegen kleur */
.product-form .option-selector__btns input:checked + .opt-label--swatch {
  border: 1px solid #111 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ook geselecteerd hover niet dikker maken */
.product-form .option-selector__btns input:checked + .opt-label--swatch:hover {
  border: 1px solid #111 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Mobiel: maximaal 5 swatches per rij */
@media screen and (max-width: 749px) {
  .product-form .option-selector__btns {
    display: grid !important;
    grid-template-columns: repeat(7, 30px) !important;
    gap: 8px 7px !important;
    justify-content: flex-start !important;
    align-items: start !important;
  }

  .product-form .option-selector__btns .opt-label--swatch {
    margin: 0 !important;
  }
}

/* Refy-style checkmark op geselecteerde swatch */
.product-form .option-selector__btns input:checked + .opt-label--swatch {
  position: relative !important;
}

.product-form .option-selector__btns input:checked + .opt-label--swatch::after {
  content: "✓" !important;

  position: absolute !important;
  z-index: 99 !important;

  width: 15px !important;
  height: 15px !important;

  left: 50% !important;
  top: auto !important;
  bottom: -7px !important;

  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #000 !important;
  color: #fff !important;
  border-radius: 50% !important;

  font-size: 8px !important;
  line-height: 1 !important;
}

/* Variant selector: label + geselecteerde variant kleiner/rustiger */
.template-product .option-selector .label,
.template-product .option-selector legend,
.template-product .option-selector__label-value,
.template-product .js-color-text {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: #111 !important;
}

/* Alleen "Fair / Light / Medium" niet schreeuwerig */
.template-product .option-selector__label-value,
.template-product .js-color-text {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #111 !important;
}

/* Subtekst onder variant selector */
.lv-shade-sub {
  display: block;

  margin-top: 4px;
  margin-bottom: 8px;

  font-family: "Montserrat", sans-serif;

  font-size: 9px;
  line-height: 1.6;

  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;

  color: rgba(0,0,0,0.75);

  max-width: 58ch;
}

/* Swatches iets kleiner */
.template-product .option-selector__btns .opt-label--swatch {
  width: 34px !important;
  height: 34px !important;
}

.lv-shade-sub .metafield-multi_line_text_field {
  font-size: 10px !important;
  line-height: 1.6 !important;
  font-weight: 450 !important;
  color: rgba(0,0,0,0.75) !important;
  font-style: normal !important;
}

.lv-product-highlights {
  margin: 16px 0 20px;

  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 1.5;

  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;

  color: #000;
}

.lv-product-highlights-sep {
  display: inline-block;
  margin: 0 9px;
  opacity: 0.7;
}

@media screen and (max-width: 749px) {
  .lv-product-highlights {
    margin: 14px 0 18px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  .lv-product-highlights-sep {
    margin: 0 7px;
  }
}

.template-product .product-form button[type="submit"].add-to-cart,
.template-product .product-form .btn.add-to-cart,
.template-product .product-form .btn--large.add-to-cart {
  background: #32373b !important;
  background-color: #32373b !important;
  color: #fff !important;
  border: 1px solid #32373b!important;
}

.template-product .product-form button[type="submit"].add-to-cart:hover,
.template-product .product-form .btn.add-to-cart:hover,
.template-product .product-form .btn--large.add-to-cart:hover {
  background: #6A6E71 !important;
  background-color: #6A6E71 !important;
  color: #fff !important;
  border-color: #32373b !important;
}

.template-product .media-gallery .product-label,
.template-product .media-gallery .product-label--meta,
.template-product .media-gallery .product-label span,
.template-product .product-media .product-label,
.template-product .product-media .product-label--meta {
  background: #32373b !important;
  background-color: #32373b !important;
  color: #fff !important;
  border-color: #32373b!important;
}

/* Collection page labels */
.collection .product-label,
.collection .product-label--meta,
.product-block .product-label,
.product-block .product-label--meta,
.product-label-container .product-label--meta {
  background: #32373b !important;
  background-color: #32373b !important;
  color: #ffffff !important;
  border-color: #32373b !important;
}

.lavertu-chat-link {
  position: relative;
  top: -18px;
}

.lavertu-chat-link button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #111;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.lavertu-chat-link p {
  margin: 6px 0 0;
  color: #111;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
}

.lavertu-live-dot {
  width: 6px;
  height: 6px;
  background: #537BA2;
  border-radius: 50%;
  display: inline-block;
  animation: lavertuPulse 1.4s infinite;
}

@keyframes lavertuPulse {
  0% {
    box-shadow: 0 0 0 0 #81b0e094;
  }
  70% {
    box-shadow: 0 0 0 7px rgba(40,199,111,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40,199,111,0);
  }
}

/* Lavertu Standards */

.lavertu-standards__title {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
}

.lavertu-standards__description {
  font-size: 12px !important;
  line-height: 1.6;
  color: #111 !important;
  max-width: 220px;
  margin: 0 auto;
}

/* Lavertu Standards Animation */

.lavertu-standards__item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.lavertu-standards__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Vertraging per item */

.lavertu-standards__item:nth-child(1) {
  transition-delay: 0.1s;
}

.lavertu-standards__item:nth-child(2) {
  transition-delay: 0.25s;
}

.lavertu-standards__item:nth-child(3) {
  transition-delay: 0.4s;
}

/* ===== Qikify Upsell - Minimal Merit Style ===== */

.qbk-offer-box {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Header: alleen zwarte lijn direct onder titel */
.qbk-offer-box__header {
  padding: 0 0 8px 0 !important;
  margin-bottom: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #111 !important;
  background: transparent !important;
}

.qbk-offer-box__header__heading {
  margin: 0 !important;
}

.qbk-offer-box__header__heading .qbk-title {
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #111 !important;
}

/* Badge en beschrijving verbergen */
.qbk-badge,
.qbk-description {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #777 !important;
  margin-top: 3px !important;
}

/* Geen extra lijn/kader onder header */
.qbk-bogo {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Productblok zonder kaart/kader */
.qbk-offer,
.qbk-offer__body,
.qbk-offer__sub-body,
.qbk-offer__contents {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Product layout */
.qbk-offer__body {
  padding: 0 !important;
}

.qbk-offer__contents {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Afbeelding zichtbaar houden */
.qbk-offer__image {
  display: block !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  background-color: #f7f7f7 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tekst */
.qbk-offer__content-info {
  flex: 1 !important;
  gap: 4px !important;
}

.qbk-offer__title {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: #111 !important;
  text-decoration: none !important;
}

.qbk-offer__price {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 300 !important;
  color: #111 !important;
}

/* Sold out / button weg voor minimalistische look */
.qbk-offer__content-actions,
.qbk-soldout,
.qbk-offer__soldout {
  display: none !important;
}

/* Watermark weg indien zichtbaar */
.qbk-watermark,
.qbk-watermark--dark {
  display: none !important;
}

/* Mobiel iets compacter */
@media screen and (max-width: 749px) {
  .qbk-offer-box__header {
    margin-bottom: 14px !important;
  }

  .qbk-offer__contents {
    gap: 12px !important;
  }

  .qbk-offer__image {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }

  .qbk-offer__title {
    font-size: 13px !important;
  }

  .qbk-offer__price {
    font-size: 12px !important;
  }
}

/* Titel + prijs links naast afbeelding */

.qbk-offer__content-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.qbk-offer__title {
  text-align: left !important;
  width: 100% !important;
  margin-bottom: 4px !important;
}

/* Zorg dat content niet gecentreerd wordt */
.qbk-offer__contents {
  align-items: center !important;
}

.qbk-offer__content {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Alles links uitlijnen */
.qbk-offer__content,
.qbk-offer__content-info,
.qbk-offer__contents {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Titel links */
.qbk-offer__title,
.qbk-title {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 0 4px 0 !important;
}

/* Qikify description onder producttitel plaatsen */



/* Qikify checkbox iets naar binnen */
.qbk-offer__checkbox,
.qbk-checkbox,
.qbk-offer input[type="checkbox"] {
  margin-left: 12px !important;
  margin-right: 14px !important;
}

/* Productblok ruimte geven zodat checkbox niet tegen rand zit */
.qbk-offer__body {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Prijs rechtsboven plaatsen */
.qbk-offer__contents {
  position: relative !important;
}

.qbk-offer__price {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;

  text-align: right !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #111 !important;
}

/* Tekst ruimte geven zodat prijs niet overlapt */
.qbk-offer__content-info {
  padding-right: 90px !important;
}

/* Qikify mobiele beschrijving volledig zichtbaar */

@media screen and (max-width: 749px) {
  .qbk-offer__content-info {
    padding-right: 70px !important;
    min-width: 0 !important;
  }

  .qbk-offer__title {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .qbk-offer__title::after {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    max-width: 100% !important;
  }

  .qbk-offer__price {
    font-size: 11px !important;
    right: 0px !important;
  }
}

@media screen and (max-width: 749px) {
  .qbk-offer__title,
  .qbk-offer__content-info,
  .qbk-offer__content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* Huidige prijs */
.qbk-offer__price {
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}

/* Oude prijs */
.qbk-offer__price s,
.qbk-offer__price del,
.qbk-price-compare {
  display: block !important;
  font-size: 7px !important;
  color: #b8b8b8 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}           

.qbk-description {
  color: #000 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 4px !important;
}

/* Verberg oorspronkelijke prijs */
.qbk-offer__price--origin,
.qbk-offer__price--origin::before {
    display: none !important;
    content: none !important;
}

.qbk-offer__price {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #000 !important;
}

.qbk-offer__price--offer {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #000 !important;
    letter-spacing: 0 !important;
}

@media screen and (max-width: 749px) {
  .spark-carousel-root video,
  .spark-carousel-root img,
  .spark-carousel-root .spark-tw-section-player,
  .spark-carousel-root [class*="spark-custom"],
  .spark-carousel-root .swiper-slide {
    border-radius: 0 !important;
    overflow: hidden !important;
  }
}

/* Spark carousel mobile - remove border radius sitewide */
@media screen and (max-width: 749px) {
  [class*="spark"] img,
  [class*="spark"] video,
  [class*="spark"] [class*="section-player"],
  [class*="spark"] [class*="swiper-slide"] {
    border-radius: 0 !important;
    clip-path: inset(0 round 0) !important;
  }
}

/* Footer links desktop + mobiel */
.section-footer ul a,
.section-footer__menu-block a,
.section-footer__link-list a,
.section-footer .mobile-disclosure__panel a,
.section-footer .mobile-disclosure__panel li {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-variant: normal !important;
}