@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');


  body {
  font-family: 'Poppins', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  }

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: #4a3d31;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #4a3d31 !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #b08a4a !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #8a735c !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #b08a4a !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: #8a735c !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: #ede7dc !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: #8a735c !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #b08a4a !important;
  }

  div.phone a.phone, div.email a.email {
  background: #ede7dc !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: #8a735c !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #ede7dc;
  border-color: #ede7dc;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #ede7dc !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #ede7dc !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  }

  .img-responsive {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }



  header div.header {
  background-color: rgba(247, 244, 238, .5) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(247, 244, 238) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }





  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 815px;
  }
  header > div.wrapper.above {
  min-height: 965px;
  }

  header div.header div.holder {
  height: 715px;
  }
  }

  .topbar {
  background: #ffffff;
  }
  .topbar {
  color: #4a3d31;
  }

  .shop_uspbar {
  background: #ffffff;
  }
  .shop_uspbar {
  color: #4a3d31;
  }

  .shop_topbar {
  background: #ede7dc;
  }
  .shop_topbar a,
  .shop_topbar a:hover {
  color: #4a3d31 !important;
  }


  nav.navbar-default, div.navbar-collapse {
  background-color: #f7f4ee; !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(247, 244, 238, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(247, 244, 238, 1) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: #ede7dc !important;
  }
  }


  section.featured div.wrapper {
  margin-top: 60px;
  }





  header div.header {
  text-align: center;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid #b08a4a;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: #b08a4a !important;
  }
  }


  header div.header div.contact i {
  color: #b08a4a;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: center;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: #4a3d31 !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

  section.partners {
  background: #b08a4a !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: #ede7dc !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #b08a4a;
  }

  footer div.socket,
  .footer-sticky {
  background: #8a735c !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

  .img-circle {
  border-radius: 100% !important;
  }

  section.treatments div.button-wrap {
  background: #ede7dc;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: #4a3d31 !important;
  }

  section.prices table tr td a {
  color: #4a3d31 !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #4a3d31 !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #ede7dc;
  }

  /* ============================================================
   4U SKINCARE – GLOBAAL STIJLFUNDAMENT
   Bron: 4U Skincare Huisstijlboek
   Conventie: kebab-case met component-prefix
   ============================================================ */

/* --- Font: Jost (Google Fonts) als vervanger van Glacial Indifference --- */
/* Jost wordt ingeladen via Instellingen › Geavanceerd › Script head (een @import werkt hier niet). */

/* --- rem-basis (verplicht: zonder dit is 1rem = 10px) --- */
html { font-size: 16px !important; }
@media (max-width: 767px) { html { font-size: 15px !important; } }

/* --- Design tokens --- */
:root {
  --color-brand: #B08A4A;          /* Warm Gold – accent, knoppen, links */
  --color-brand-light: #C8B79C;    /* Warm Taupe – lijnen, details */
  --color-brand-dark: #8A735C;     /* Deep Taupe – koppen, hover */
  --color-bg-body: #F7F4EE;        /* Soft Ivory – achtergrond */
  --color-bg-alt: #EDE7DC;         /* afwisselende secties, footer */
  --color-bg-white: #FFFFFF;       /* beeldpanelen, kaarten */
  --color-text-main: #4A3D31;      /* lopende tekst */
  --color-text-muted: #8A735C;     /* bijschriften, meta */
  --border-color: #E4DCCF;
  --font-heading: 'Jost', 'Inter', sans-serif;
  --font-body: 'Jost', 'Inter', sans-serif;
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 4rem; --space-3xl: 6rem;
  --radius-default: 12px; --radius-large: 24px; --radius-pill: 9999px;
  --shadow-soft: 0 6px 24px rgba(138, 115, 92, 0.10);
  /* Lijnkleuren – neutraal; per lijn gezet door .lijn-* of .product_cat-* */
  --lijn-main: var(--color-brand); --lijn-bg: var(--color-bg-body); --lijn-light: var(--color-bg-alt);
  --lijn-card: var(--color-bg-white); --lijn-text: var(--color-brand-dark); --lijn-subtitle: var(--color-text-muted);
}

/* --- Lijnpaletten (Huisstijlboek "Complete paletten").
   .lijn-* voor eigen secties (Uniek ID), .product_cat-* zet WooCommerce zelf op elk product --- */
.lijn-hydrate, .product_cat-hydrate { --lijn-main: #9FD3E6; --lijn-bg: #F0F7FA; --lijn-light: #D6ECF2; --lijn-card: #E6F2F5; --lijn-text: #2C5F72; --lijn-subtitle: #4A8FA6; }
.lijn-calm, .product_cat-calm { --lijn-main: #DFA1AF; --lijn-bg: #FBF3F5; --lijn-light: #F0D8DE; --lijn-card: #F5E6EA; --lijn-text: #5C2E3A; --lijn-subtitle: #8B5A68; }
.lijn-balance, .product_cat-balance { --lijn-main: #90BEAB; --lijn-bg: #F2F7F4; --lijn-light: #D0E5DA; --lijn-card: #E2EDE8; --lijn-text: #2A4F40; --lijn-subtitle: #3B6B58; }
.lijn-renew, .product_cat-renew { --lijn-main: #C2A679; --lijn-bg: #FAF6EE; --lijn-light: #E8DCCA; --lijn-card: #F2EAD8; --lijn-text: #4A3820; --lijn-subtitle: #6E5530; }
.lijn-professional, .product_cat-professional { --lijn-main: #8A735C; --lijn-bg: #F7F4EE; --lijn-light: #EDE7DC; --lijn-card: #FFFFFF; --lijn-text: #4A3D31; --lijn-subtitle: #8A735C; }

/* --- Basis --- */
body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--color-text-main); background: var(--color-bg-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; color: var(--color-brand-dark) !important; line-height: 1.2; letter-spacing: 0.01em; margin-top: 0; }
h1 { font-size: 2.5rem; margin-bottom: var(--space-md); }
h2 { font-size: 1.75rem; margin-bottom: var(--space-md); }
h3 { font-size: 1.25rem; margin-bottom: var(--space-sm); }
h4 { font-size: 1.0625rem; margin-bottom: var(--space-xs); }
@media (max-width: 767px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-brand) !important; border-bottom: 0 !important; text-decoration: none; }
a:hover { color: var(--color-brand-dark) !important; text-decoration: underline; }
section.intro { padding: var(--space-2xl) 0; }
.intro-tekst { font-size: 1.125rem; color: var(--color-text-muted); }
.lijn-goud { width: 72px; height: 1px; background: var(--color-brand); margin: var(--space-md) auto; }
.text-left .lijn-goud { margin-left: 0; }

/* --- Knoppen: thema-knop en WooCommerce-knop krijgen dezelfde vorm --- */
.btn, .btn-primary, .woocommerce a.button, .woocommerce button.button, .woocommerce .button, .woocommerce input.button, [type="submit"], .knop {
  display: inline-block; font-family: var(--font-body); font-weight: 400 !important; font-size: 0.9375rem; letter-spacing: 0.04em; line-height: 1.3;
  padding: 0.9rem 2rem !important; border-radius: var(--radius-pill) !important; border: 1px solid var(--color-brand) !important;
  background: var(--color-brand) !important; color: #fff !important; text-decoration: none !important; cursor: pointer; transition: background .2s, border-color .2s;
}
.btn:hover, .btn-primary:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover, [type="submit"]:hover, .knop:hover {
  background: var(--color-brand-dark) !important; border-color: var(--color-brand-dark) !important; color: #fff !important; text-decoration: none !important;
}
.knop-outline, .woocommerce a.button.knop-outline { background: transparent !important; color: var(--color-brand) !important; }
.knop-outline:hover { background: var(--color-brand) !important; color: #fff !important; }
.knop-lijn { background: var(--lijn-text) !important; border-color: var(--lijn-text) !important; }
.knop-lijn:hover { background: var(--lijn-subtitle) !important; border-color: var(--lijn-subtitle) !important; }

/* --- Badges --- */
.lijn-badge, .stap-badge { display: inline-block; font-size: 0.8125rem; letter-spacing: 0.03em; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap; }
.lijn-badge { background: var(--lijn-light); color: var(--lijn-text) !important; }
.stap-badge { background: var(--color-bg-white); color: var(--color-brand-dark) !important; border: 1px solid var(--border-color); }

/* --- Kaart en beeldpaneel --- */
.kaart { background: var(--color-bg-white); border-radius: var(--radius-default); box-shadow: var(--shadow-soft); overflow: hidden; }
.kaart img { width: 100%; height: auto; display: block; }
.img-zacht { border-radius: var(--radius-default); }
.img-zacht-groot { border-radius: var(--radius-large); }
p:empty { display: none; }


/* ============================================================
   4U SKINCARE – SHOP & PRODUCTPAGINA
   Geschreven tegen standaard WooCommerce-markup.
   ============================================================ */

/* --- Breadcrumb --- */
.woocommerce .woocommerce-breadcrumb { font-size: 0.875rem; color: var(--color-text-muted); margin: 0 0 var(--space-xl); }
.woocommerce .woocommerce-breadcrumb a { color: var(--color-text-muted) !important; }

/* --- Productpagina: layout --- */
.woocommerce div.product { display: flex; flex-wrap: wrap; gap: var(--space-2xl) 6%; align-items: flex-start; }
.woocommerce div.product div.images, .woocommerce div.product div.woocommerce-product-gallery { float: none !important; width: 47% !important; margin: 0 !important; }
.woocommerce div.product div.summary { float: none !important; width: 47% !important; margin: 0 !important; display: flex; flex-direction: column; }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product section.related, .woocommerce div.product section.upsells { width: 100%; flex-basis: 100%; }
@media (max-width: 991px) {
 
.lijn-hero-beeld {
   display: block;
   margin: 0 auto;
 }
  .woocommerce div.product { gap: var(--space-xl); }
  .woocommerce div.product div.images, .woocommerce div.product div.woocommerce-product-gallery, .woocommerce div.product div.summary { width: 100% !important; }
}

/* --- Beeldpaneel: wit, ronde hoeken --- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper, .woocommerce div.product div.images figure { background: var(--color-bg-white); border-radius: var(--radius-large); overflow: hidden; margin: 0; }
.woocommerce div.product div.images img { width: 100%; height: auto; display: block; border-radius: var(--radius-large); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: var(--space-sm); }
.woocommerce div.product div.images .flex-control-thumbs li img { border-radius: var(--radius-default); background: var(--color-bg-white); opacity: .6; }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; }

/* --- Samenvatting: volgorde. WooCommerce zet product_meta onderaan; wij tonen categorie en tags
   als badges bovenaan. Volgorde: badges (meta) › titel › korte omschrijving › prijs › winkelwagen --- */
.woocommerce div.product .summary .product_meta { order: 1; }
.woocommerce div.product .summary .product_title { order: 2; }
.woocommerce div.product .summary .woocommerce-product-details__short-description { order: 3; }
.woocommerce div.product .summary .price { order: 4; }
.woocommerce div.product .summary form.cart { order: 5; }
.woocommerce div.product .summary > * { order: 6; }
.woocommerce div.product .summary .woocommerce-product-rating { display: none; }

/* --- Badges uit product_meta: categorie = lijnbadge, tags = stap + gebruiksmoment --- */
.woocommerce div.product .product_meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: 0 0 var(--space-md); padding: 0; border: 0; font-size: 0; }
.woocommerce div.product .product_meta > span { display: contents; }
.woocommerce div.product .product_meta .sku_wrapper { display: none; }
.woocommerce div.product .product_meta a { display: inline-block; font-size: 0.8125rem; letter-spacing: 0.03em; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap; text-decoration: none !important; }
.woocommerce div.product .product_meta .posted_in a { background: var(--lijn-light); color: var(--lijn-text) !important; }
.woocommerce div.product .product_meta .tagged_as a { background: var(--color-bg-white); color: var(--color-brand-dark) !important; border: 1px solid var(--border-color); }
/* Gebruiksmoment-tags: geen pill maar zon/maan (Font Awesome 5, zit in het thema) */
.woocommerce div.product .product_meta .tagged_as a[href*="/ochtend"], .woocommerce div.product .product_meta .tagged_as a[href*="/avond"] { background: transparent; border: 0; color: var(--color-brand) !important; padding-left: 0.2rem; }
.woocommerce div.product .product_meta .tagged_as a[href*="/ochtend"]::before, .woocommerce div.product .product_meta .tagged_as a[href*="/avond"]::before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.35rem; }
.woocommerce div.product .product_meta .tagged_as a[href*="/ochtend/"]::before { content: "\f185"; }
.woocommerce div.product .product_meta .tagged_as a[href*="/avond/"]::before { content: "\f186"; }
.woocommerce div.product .product_meta .tagged_as a[href*="/ochtend-avond/"]::before { content: "\f185  \f186"; }

/* --- Titel, subtitel, korte omschrijving --- */
.woocommerce div.product .product_title { font-size: 2.25rem; margin: 0 0 var(--space-sm); }
.woocommerce div.product .lijn-subtitel { color: var(--lijn-subtitle); font-size: 1rem; margin: 0 0 var(--space-lg); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--color-text-main); margin-bottom: var(--space-lg); }
.woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.2rem; margin: 0 0 var(--space-md); }
.woocommerce div.product .woocommerce-product-details__short-description li { margin-bottom: 0.25rem; }
.woocommerce div.product .woocommerce-product-details__short-description li::marker { color: var(--lijn-main); }
.woocommerce div.product .inhoud-regel { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0 0 -0.5rem; }

/* --- Prijs en winkelwagen --- */
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.5rem; color: var(--color-brand-dark) !important; border: 0 !important; margin: 0 0 var(--space-md); display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.woocommerce div.product p.price .woocommerce-Price-amount { font-weight: 400; }
.woocommerce div.product p.price::after { content: "incl. btw"; font-size: 0.875rem; color: var(--color-text-muted); }
body.role-b2b .woocommerce div.product p.price::after { content: "excl. btw"; } /* body-klasse per rol: zie signaleringslijst */
.woocommerce div.product form.cart { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; display: flex; align-items: center; background: var(--color-bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.2rem 0.4rem; }
.woocommerce .quantity .qty { width: 3.2rem; border: 0; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-main); text-align: center; padding: 0.55rem 0; outline: none; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; text-align: center; }

/* --- Tabs --- */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-md); }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--space-xs); padding: 0 !important; margin: 0 0 var(--space-xl) !important; border-bottom: 1px solid var(--border-color); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; flex: 0 0 auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 0.9rem 1.1rem !important; font-weight: 400 !important; font-size: 1rem; color: var(--color-text-muted) !important; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-brand-dark) !important; border-bottom-color: var(--color-brand); }
/* Tab "Aanvullende informatie" achteraan; naam blijft staan (hernoemen naar Specificaties = filter, zie signaleringslijst) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.additional_information_tab { order: 1; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 46rem; padding: 0 !important; margin: 0 0 var(--space-xl) !important; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; } /* WooCommerce herhaalt de tabnaam als kop */
.woocommerce div.product .woocommerce-tabs .panel h2, .woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 1.125rem; margin-bottom: var(--space-sm); }
.woocommerce div.product .woocommerce-tabs .panel ul { padding-left: 1.2rem; }
.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: 0.35rem; }
.woocommerce div.product .woocommerce-tabs .panel li::marker { color: var(--lijn-main); }
.woocommerce div.product .woocommerce-tabs .panel .inci { font-size: 0.875rem; line-height: 1.7; color: var(--color-text-muted); }
.woocommerce div.product .woocommerce-tabs .panel .faq-vraag { display: block; color: var(--color-brand-dark); font-weight: 500; margin-top: var(--space-md); }
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes { border: 0; }
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th, .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td { border: 0; border-bottom: 1px solid var(--border-color); padding: 0.6rem 0; font-style: normal; }

/* --- Routine-strip (HTML bovenaan tab Gebruik; actieve stap via de stap-tag op het product) --- */
.routine-strip { display: flex; align-items: flex-start; margin: 0 0 var(--space-xl); padding: 0; list-style: none; position: relative; max-width: 46rem; }
.routine-strip::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 1px; background: var(--border-color); }
.routine-strip li { flex: 1 1 0; text-align: center; position: relative; padding: 0 0.15rem; margin: 0 !important; list-style: none; }
.routine-strip li::marker { content: ""; }
.routine-strip li span { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; margin: 0 auto 0.45rem; border-radius: 50%; background: var(--color-bg-white); border: 1px solid var(--border-color); color: var(--color-text-muted); font-size: 0.95rem; }
.routine-strip li small { display: block; font-size: 0.75rem; line-height: 1.25; color: var(--color-text-muted); }
.product_tag-stap-1 .routine-strip .stap-1 span, .product_tag-stap-2 .routine-strip .stap-2 span, .product_tag-stap-3 .routine-strip .stap-3 span,
.product_tag-stap-4 .routine-strip .stap-4 span, .product_tag-stap-5 .routine-strip .stap-5 span, .product_tag-stap-6 .routine-strip .stap-6 span,
.product_tag-weekly .routine-strip .stap-weekly span { background: var(--lijn-main); border-color: var(--lijn-main); color: var(--lijn-text); font-weight: 500; box-shadow: 0 0 0 4px var(--lijn-light); }
.product_tag-stap-1 .routine-strip .stap-1 small, .product_tag-stap-2 .routine-strip .stap-2 small, .product_tag-stap-3 .routine-strip .stap-3 small,
.product_tag-stap-4 .routine-strip .stap-4 small, .product_tag-stap-5 .routine-strip .stap-5 small, .product_tag-stap-6 .routine-strip .stap-6 small,
.product_tag-weekly .routine-strip .stap-weekly small { color: var(--lijn-text); font-weight: 500; }
@media (max-width: 767px) { .routine-strip li small { font-size: 0.65rem; } .routine-strip li span { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; } .routine-strip::before { left: 1.1rem; right: 1.1rem; top: 1.1rem; } }

/* --- Productkaarten (shop, categorie, gerelateerd) --- */
.woocommerce section.related > h2, .woocommerce section.upsells > h2, .woocommerce .products > h2 { font-size: 1.5rem; margin-bottom: var(--space-lg); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin: 0 0 var(--space-xl) !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }
.woocommerce ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; position: relative; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; color: inherit !important; text-decoration: none !important; order: 1; }
.woocommerce ul.products li.product img { width: 100%; height: auto; display: block; background: var(--color-bg-white); border-radius: var(--radius-default); margin: 0 0 var(--space-md) !important; transition: transform .3s ease; }
@media (hover: hover) { .woocommerce ul.products li.product:hover img { transform: scale(1.03); } }
/* Lijnbadge op de kaart: via de categorieklasse die WooCommerce op het li zet */
.woocommerce ul.products li.product::before { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: inline-block; font-size: 0.8125rem; letter-spacing: 0.03em; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); line-height: 1.4; background: var(--lijn-light); color: var(--lijn-text); }
.woocommerce ul.products li.product.product_cat-hydrate::before { content: "Hydrate"; }
.woocommerce ul.products li.product.product_cat-calm::before { content: "Calm"; }
.woocommerce ul.products li.product.product_cat-balance::before { content: "Balance"; }
.woocommerce ul.products li.product.product_cat-renew::before { content: "Renew"; }
.woocommerce ul.products li.product.product_cat-professional::before { content: "Professional"; }
/* Stap-regel onder de titel: via de stap-tag op het li */
.woocommerce ul.products li.product::after { order: 2; font-size: 0.8125rem; color: var(--color-text-muted); margin: -0.35rem 0 0.4rem; }
.woocommerce ul.products li.product.product_tag-stap-1::after { content: "Stap 1 – Cleanse"; }
.woocommerce ul.products li.product.product_tag-stap-2::after { content: "Stap 2 – Tone"; }
.woocommerce ul.products li.product.product_tag-stap-3::after { content: "Stap 3 – Active"; }
.woocommerce ul.products li.product.product_tag-stap-4::after { content: "Stap 4 – Serum"; }
.woocommerce ul.products li.product.product_tag-stap-5::after { content: "Stap 5 – Eye"; }
.woocommerce ul.products li.product.product_tag-stap-6::after { content: "Stap 6 – Moisturize"; }
.woocommerce ul.products li.product.product_tag-weekly::after { content: "Weekly"; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem; padding: 0 !important; margin: 0 0 0.15rem !important; color: var(--color-brand-dark) !important; }
.woocommerce ul.products li.product .price { font-size: 1rem !important; color: var(--color-brand-dark) !important; border: 0 !important; margin: 0.4rem 0 var(--space-sm) !important; display: block; order: 3; }
.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce ul.products li.product .button { order: 4; margin-top: auto !important; align-self: flex-start; padding: 0.65rem 1.4rem !important; font-size: 0.875rem; }
.woocommerce ul.products li.product .onsale { display: none; }

/* --- Shop-overzicht: sortering en resultaat-teller --- */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: 0.875rem; color: var(--color-text-muted); margin: 0 0 var(--space-lg); }
.woocommerce .woocommerce-ordering select { font-family: var(--font-body); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.4rem 1rem; background: var(--color-bg-white); color: var(--color-text-main); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 50%; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; padding: 0; margin: 0 0.15rem; text-align: center; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--color-brand); color: #fff; }

/* --- Shop: lijn-navigatie (eigen HTML, Tekst-blok boven het overzicht) --- */
.shop-lijnen { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.shop-lijnen li { margin: 0; }
.shop-lijnen a { display: inline-block; padding: 0.55rem 1.2rem; border-radius: var(--radius-pill); background: var(--lijn-light); color: var(--lijn-text) !important; font-size: 0.9375rem; text-decoration: none !important; }
.shop-lijnen a:hover, .shop-lijnen li.actief a { background: var(--lijn-main); color: var(--lijn-text) !important; }

/* --- Meldingen en winkelwagen-basis --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--color-brand); background: var(--color-bg-white); border-radius: var(--radius-default); color: var(--color-text-main); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-brand); }
.woocommerce table.shop_table { border: 0; border-radius: var(--radius-default); background: var(--color-bg-white); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border-color); }
.woocommerce .cart-collaterals .cart_totals { background: var(--color-bg-white); border-radius: var(--radius-default); padding: var(--space-lg); }


/* --- Aanvullingen na 3b --- */

/* Footer leesbaar */
footer, footer p, footer li, footer a, footer div.socket { color: var(--color-text-main) !important; }
footer div.column > h4 { color: var(--color-brand-dark) !important; border-bottom-color: var(--color-brand-light) !important; }
/* Tabs: hover */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-brand-dark) !important; border-bottom-color: var(--color-brand-light); }
/* Huidtype-regel */
.woocommerce div.product .huidtype-regel { font-size: 0.875rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }
/* Winkelwagen en afrekenen (WooCommerce Blocks) */
.wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--color-brand) !important; color: #fff !important; border-radius: var(--radius-pill) !important; border: 0 !important; font-family: var(--font-body) !important; font-weight: 400 !important; }
.wc-block-components-button:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: var(--color-brand-dark) !important; }
.wc-block-components-totals-wrapper, .wc-block-cart .wc-block-components-sidebar { background: var(--color-bg-white); border-radius: var(--radius-default); }

/* Badges links uitlijnen met de rest van de samenvatting.
   Oorzaak: .product_meta is een flexbox en de witruimte-tekstnodes tussen de spans
   worden anonieme flex-items; de flex-gap duwde de eerste badge 8px naar rechts.
   Daarom gap eraf en de tussenruimte via marges op de badges zelf. */
.woocommerce div.product .product_meta { gap: 0; }
.woocommerce div.product .product_meta a { margin: 0 var(--space-sm) var(--space-sm) 0; }

/* --- Aanvullingen na 3b, deel 2 --- */

/* USP's alleen op de productpagina, niet op de kaarten in shop en gerelateerd */
.woocommerce ul.products li.product .product-usps { display: none; }

/* Voorraadregel nooit tonen */
.woocommerce div.product .summary .stock { display: none; }

/* Titel verhuist met jQuery naar de samenvatting; de leeggelopen page-header weg */
.single-product .page-header.titel-verplaatst { display: none; }

/* Inhoud en huidtype direct onder de prijs. Zonder deze regel vallen ze via
   .summary > * { order: 6 } onder de winkelmandknop; met order 4 staan ze in
   dezelfde groep als de prijs en volgen ze de DOM-volgorde die het script zet. */
.woocommerce div.product .summary .inhoud-regel,
.woocommerce div.product .summary .huidtype-regel { order: 4; }

/* Tab-onderstreping. De globale regel a { border-bottom: 0 !important } uit blok 1
   schiet elke border-bottom op een link weg, dus onderstrepen via box-shadow. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a { box-shadow: inset 0 -2px 0 transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { box-shadow: inset 0 -2px 0 var(--color-brand-light); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { box-shadow: inset 0 -2px 0 var(--color-brand); }

/* Routine-strip: de panel-regel uit blok 3b zet padding-left op elke ul in een tab */
.woocommerce div.product .woocommerce-tabs .panel ul.routine-strip { padding-left: 0; }

/* Header: geen lege band, logo op normale hoogte, navigatie ongemoeid.
   Selectors volgen de themaregels (header > div.wrapper, header div.header div.holder),
   anders wint het thema op specificiteit. */
header > div.wrapper { min-height: 0; }
header div.header div.holder { min-height: 0; padding: 1rem 0; }
header nav.navbar-default div.navbar-header div.holder { min-height: 0; }
header div.header div.wrapper img.logo { max-height: 90px; padding: 0; }
@media (min-width: 992px) {
  header > div.wrapper { min-height: 0; }
  header div.header div.holder { height: auto; }
  header > div.wrapper div.wrapper img.logo { max-height: 90px; padding: 0; margin: 0; }
}

/* ============================================================
   4U SKINCARE – LIJNPAGINA (Hydrate, Calm, Balance, Renew)
   Zet op de pagina-wrapper in elk Tekst-blok een .lijn-* klasse;
   de achtergrondkleur van het hero-blok komt uit de blokinstelling.
   ============================================================ */

/* --- Hero --- */
section.intro.lijn-hero-blok { padding: var(--space-3xl) 0; }
.lijn-hero { display: flex; align-items: center; gap: 6%; }
.lijn-hero-tekst { flex: 1 1 50%; }
.lijn-hero-beeld { flex: 0 0 40%; background: var(--color-bg-white); border-radius: var(--radius-large); overflow: hidden; }
.lijn-hero-beeld img { width: 100%; height: auto; display: block; }
.lijn-hero .lijn-badge { margin-bottom: var(--space-md); }
.lijn-hero h1 { color: var(--lijn-text) !important; font-size: 3rem; margin-bottom: var(--space-sm); }
.lijn-hero .lijn-subtitel { color: var(--lijn-subtitle); font-size: 1.25rem; margin-bottom: var(--space-lg); }
.lijn-hero p { max-width: 34rem; }
.lijn-hero .knop { margin-top: var(--space-sm); }
@media (max-width: 991px) { .lijn-hero { flex-direction: column-reverse; align-items: stretch; gap: var(--space-xl); } .lijn-hero-beeld { flex-basis: auto; max-width: 22rem; } .lijn-hero h1 { font-size: 2.25rem; } }

/* --- Herken je dit? --- */
.herken { display: flex; gap: 6%; align-items: flex-start; }
.herken-tekst { flex: 1 1 42%; }
.herken-lijst { flex: 1 1 52%; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); }
.herken-lijst li { position: relative; padding-left: 1.9rem; margin: 0; font-size: 1.0625rem; color: var(--lijn-text); }
.herken-lijst li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--lijn-main); }
.herken-lijst li::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.5rem; color: var(--lijn-text); position: absolute; left: 0.24rem; top: 0.62rem; }
@media (max-width: 991px) { .herken { flex-direction: column; gap: var(--space-lg); } .herken-lijst { grid-template-columns: 1fr; } }

/* --- Routine-opbouw --- */
.routine-opbouw { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.routine-opbouw li { margin: 0; background: var(--color-bg-white); border-radius: var(--radius-default); padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.35rem; }
.routine-opbouw li .stapnummer { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lijn-main); color: var(--lijn-text); font-weight: 500; margin-bottom: var(--space-xs); }
.routine-opbouw li .stapnaam { font-size: 0.8125rem; color: var(--color-text-muted); }
.routine-opbouw li h3 { font-size: 1.0625rem; margin: 0; }
.routine-opbouw li h3 a { color: var(--color-brand-dark) !important; text-decoration: none !important; }
.routine-opbouw li h3 a:hover { color: var(--lijn-subtitle) !important; }
.routine-opbouw li p { font-size: 0.9375rem; margin: 0; color: var(--color-text-main); }
.routine-opbouw li.stap-leen { background: var(--border-color); border: 1px dashed var(--border-color); }
.routine-opbouw li.stap-leen .stapnummer { background: var(--color-bg-alt); color: var(--color-text-muted); }
@media (max-width: 991px) { .routine-opbouw { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .routine-opbouw { grid-template-columns: 1fr; } }

/* --- Combineer met een andere lijn --- */
.lijn-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-lg) 0 var(--space-xl); }
.lijn-tegels li { margin: 0; }
.lijn-tegels a { display: block; background: var(--lijn-main); color: var(--lijn-text) !important; border-radius: var(--radius-large); padding: var(--space-xl) var(--space-lg); min-height: 11rem; text-decoration: none !important; height: 100%; transition: transform .2s ease; }
.lijn-tegels a:hover { transform: translateY(-3px); }
.lijn-tegels strong { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 1.75rem; line-height: 1; margin-bottom: 0.5rem; color: var(--lijn-text); }
.lijn-tegels span { font-size: 0.9375rem; color: var(--lijn-text); opacity: .85; }
@media (max-width: 767px) { .lijn-tegels { grid-template-columns: 1fr; } }


/* ============================================================
   4U SKINCARE – HOMEPAGE
   ============================================================ */

/* --- USP-balk (Topbar in Thema-instellingen › Bovenkant, of eerste Tekst-blok) --- */
.usp-balk { display: flex; gap: var(--space-xl); flex-wrap: wrap; list-style: none; padding: 0.7rem 0; margin: 0; font-size: 0.875rem; color: var(--color-text-main); }
.usp-balk li { margin: 0; white-space: nowrap; }
.usp-balk li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--color-brand); margin-right: 0.45rem; font-size: 0.75rem; }
@media (max-width: 767px) { .usp-balk { gap: var(--space-md); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .usp-balk::-webkit-scrollbar { display: none; } }

/* --- Hero: kop links, de vier lijnvlakken rechts (keuze above the fold) --- */
section.intro.home-hero-blok { padding: var(--space-xl) 0 var(--space-2xl); }
.home-hero-tekst { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-lg); }
.home-hero h1 { font-size: 3.25rem; font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; margin: 0; max-width: 16ch; }
.home-hero-rechts { flex: 0 1 30rem; padding-bottom: 0.4rem; }
.home-hero p { font-size: 1.0625rem; color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.home-hero-acties { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.home-hero-acties .tekstlink { color: var(--color-brand-dark) !important; border-bottom: 1px solid var(--color-brand-light) !important; text-decoration: none !important; }
.home-hero .lijn-kiezer { margin: 0; }
.home-basis-link { display: inline-block; margin-top: var(--space-sm); color: var(--color-brand-dark) !important; border-bottom: 1px solid var(--color-brand-light) !important; text-decoration: none !important; }
@media (max-width: 991px) { .home-hero-tekst { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .home-hero h1 { font-size: 2.5rem; } .home-hero-rechts { flex-basis: auto; } }

/* --- Film / beeld: eigen blok --- */
.home-media { border-radius: var(--radius-large); overflow: hidden; background: var(--color-bg-white); aspect-ratio: 21 / 9; }
.home-media video, .home-media img, .home-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
@media (max-width: 991px) { .home-media { aspect-ratio: 4 / 3; } }

/* --- Kies je lijn: vier hoge kleurvlakken (huisstijlboek, laatste pagina) --- */
.lijn-kiezer { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.lijn-kiezer li { margin: 0; }
.lijn-kiezer a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; background: var(--lijn-main); border-radius: var(--radius-large); padding: var(--space-lg) var(--space-lg); text-decoration: none !important; color: var(--lijn-text) !important; overflow: hidden; }
.lijn-kiezer a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,.28) 100%); pointer-events: none; }
.lijn-kiezer .lijn-kop { position: absolute; top: var(--space-lg); left: var(--space-lg); right: var(--space-lg); }
.lijn-kiezer .lijn-naam { display: block; font-family: var(--font-heading); font-size: 1.875rem; font-weight: 300; color: var(--lijn-text); line-height: 1; margin-bottom: 0.5rem; }
.lijn-kiezer .lijn-inhoud { position: relative; transform: translateY(0); transition: transform .35s ease; }
.lijn-kiezer .lijn-subtitel { color: var(--lijn-text); font-size: 0.9375rem; margin: 0; line-height: 1.3; opacity: .85; }
.lijn-kiezer ul { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.lijn-kiezer ul::before { content: "Herken je dit?"; display: block; font-size: 0.8125rem; color: var(--lijn-text); opacity: .7; margin-bottom: 0.35rem; }
.lijn-kiezer ul li { position: relative; padding-left: 1rem; margin-bottom: 0.15rem; font-size: 0.8125rem; color: var(--lijn-text); }
.lijn-kiezer ul li::before { content: ""; position: absolute; left: 0; top: 0.65rem; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--lijn-text); opacity: .6; }
.lijn-kiezer .lijn-link { display: inline-block; font-size: 0.875rem; color: var(--lijn-text) !important; border-bottom: 1px solid currentColor; }
@media (hover: hover) { .lijn-kiezer a:hover .lijn-inhoud { transform: translateY(-6px); } }
/* Mobiel: horizontaal scrollen met snap; volgend vlak blijft zichtbaar */
@media (max-width: 991px) {
  .lijn-kiezer { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -15px; margin-right: -15px; padding: 0 15px var(--space-sm); }
  .lijn-kiezer::-webkit-scrollbar { display: none; }
  .lijn-kiezer li { flex: 0 0 66%; scroll-snap-align: start; }
  .lijn-kiezer a { aspect-ratio: 3 / 4; }
  .lijn-kiezer .lijn-naam { font-size: 1.75rem; }
}

/* --- Zo werkt het: strip licht één keer op bij laden --- */
.home-stappen { display: flex; gap: 6%; align-items: center; }
.home-stappen-tekst { flex: 1 1 40%; }
.home-stappen-strip { flex: 1 1 54%; }
.home-stappen-strip .routine-strip { max-width: none; margin: 0 0 var(--space-md); }
.home-stappen-strip .etiket { display: flex; align-items: center; gap: var(--space-md); font-size: 0.9375rem; color: var(--color-text-muted); flex-wrap: wrap; }
.home-stappen-strip .etiket i { color: var(--color-brand); }
@keyframes stap-oplichten { 0% { background: var(--color-bg-white); color: var(--color-text-muted); box-shadow: none; } 40% { background: var(--color-brand); color: #fff; box-shadow: 0 0 0 5px var(--color-bg-alt); } 100% { background: var(--color-bg-white); color: var(--color-brand-dark); box-shadow: none; border-color: var(--color-brand-light); } }
.home-stappen-strip .routine-strip li span { animation: stap-oplichten 1.1s ease forwards; }
.home-stappen-strip .routine-strip li:nth-child(1) span { animation-delay: .3s; }
.home-stappen-strip .routine-strip li:nth-child(2) span { animation-delay: .55s; }
.home-stappen-strip .routine-strip li:nth-child(3) span { animation-delay: .8s; }
.home-stappen-strip .routine-strip li:nth-child(4) span { animation-delay: 1.05s; }
.home-stappen-strip .routine-strip li:nth-child(5) span { animation-delay: 1.3s; }
.home-stappen-strip .routine-strip li:nth-child(6) span { animation-delay: 1.55s; }
.home-stappen-strip .routine-strip li:nth-child(7) span { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .home-stappen-strip .routine-strip li span { animation: none; } }
@media (max-width: 991px) { .home-stappen { flex-direction: column; align-items: stretch; gap: var(--space-xl); } }

/* --- Uit de behandelkamer: beeld rechts, tekst links --- */
.home-hanny { display: flex; flex-direction: row-reverse; gap: 6%; align-items: center; }
.home-hanny-beeld { flex: 0 0 38%; border-radius: var(--radius-large); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-bg-white); }
.home-hanny-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hanny-tekst { flex: 1 1 50%; }
.home-hanny-tekst blockquote { border: 0; padding: 0; margin: 0 0 var(--space-lg); font-size: 2rem; line-height: 1.25; color: var(--color-brand-dark); font-weight: 300; max-width: 22ch; }
.home-hanny-tekst .naam { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-lg); }
@media (max-width: 991px) { .home-hanny { flex-direction: column; align-items: stretch; gap: var(--space-xl); } .home-hanny-beeld { flex-basis: auto; max-width: 20rem; } .home-hanny-tekst blockquote { font-size: 1.5rem; } }

/* --- Voor professionals --- */
.home-pro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); background: var(--color-bg-white); border-radius: var(--radius-large); padding: var(--space-xl) var(--space-2xl); }
.home-pro h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.home-pro p { margin: 0; color: var(--color-text-muted); }
.home-pro .knop { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 767px) { .home-pro { flex-direction: column; align-items: flex-start; padding: var(--space-xl); } }

/* wpautop (de autoformatter op de ACF-editor) wikkelt losse regels in <p> en laat
   achter een <a> met blok-inhoud een lege <p><a></a></p> achter. In de lijn-kiezer
   erfde die lege link de tegelopmaak en gaf een tweede rij kleurvlakken. */
.lijn-kiezer > li > p { display: none; }

/* Mobiel botste de absoluut geplaatste .lijn-kop op de lijst eronder zodra de
   subtitel over twee regels liep. Op mobiel dus in de flow meelopen. */
@media (max-width: 991px) {
  .lijn-kiezer .lijn-kop { position: static; }
  .lijn-kiezer a { justify-content: space-between; aspect-ratio: auto; min-height: 20rem; }
}

/* (TIJDELIJK-blok promofilm/Hanny-placeholder verwijderd op 10-09-2026.) */

/* ============================================================
   Aanvullingen na stap 5
   ============================================================ */

/* Verticaal ritme. Elke sectie had --space-2xl boven én onder, dus tussen twee
   blokken stond 8rem in plaats van 4. Halve waarde per sectie geeft precies
   één --space-2xl tussen blokken; op mobiel één --space-xl. */
section.intro { padding: calc(var(--space-2xl) * 2) 0; }
section.intro.home-hero-blok { padding: var(--space-lg) 0 calc(var(--space-2xl) / 2); }
section.intro.lijn-hero-blok { padding: var(--space-2xl) 0 calc(var(--space-2xl) / 2); }
@media (max-width: 767px) {
  section.intro,
  section.intro.home-hero-blok,
  section.intro.lijn-hero-blok { padding: calc(var(--space-xl) / 2) 0; }
}

/* Binnen een blok: --space-lg tussen kop en intro, --space-xl tussen intro en inhoud. */
.home-stappen h2, .home-hanny-tekst h2, .home-basis-blok h2, .home-pro h2, .herken-tekst h2,
.lijn-routine-blok h2, .lijn-combineer-blok h2, .lijn-producten-blok h2,
.woocommerce section.related > h2 { margin-bottom: var(--space-lg); }
.home-basis-blok .intro-tekst, .lijn-routine-blok .intro-tekst,
.lijn-combineer-blok .intro-tekst, .home-stappen-tekst p { margin-bottom: var(--space-xl); }
.home-hero-tekst { margin-bottom: var(--space-xl); }
/* De lijsten hadden zelf ook een marge boven; samen met de marge onder de intro
   gaf dat dubbele ruimte. De intro bepaalt nu de afstand. */
.routine-opbouw, .lijn-tegels, .home-hero .lijn-kiezer { margin-top: 0; }

/* Productpagina: div.product heeft al een row-gap van --space-2xl. De extra marge
   op de tabs en onder het paneel maakte daar 5 en 6 rem van. */
.woocommerce div.product .woocommerce-tabs { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel { margin-bottom: 0 !important; }

/* USP-balk zit nu in de Webshop-USP-balk van het thema: kleiner en gecentreerd.
   De accountbalk (Webshop topbar) krijgt hetzelfde rustige formaat. */
.usp-balk { font-size: 0.8125rem; justify-content: center; }
.shop_topbar { font-size: 0.8125rem; }

/* Herken je dit?: rondje en vinkje waren twee losse pseudo-elementen die met
   handmatige offsets op elkaar gelegd werden. Nu één element met flex-centrering,
   dus het vinkje staat altijd exact in het midden, ook op mobiel. */
.herken-lijst li::before {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; top: 0.4rem;
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--lijn-main); color: var(--lijn-text);
  font-size: 0.5rem; line-height: 1;
}
.herken-lijst li::after { content: none; }

/* De actieve knop zonder lijnkleur (Alle) kreeg --lijn-text op --lijn-main:
   Deep Taupe op Warm Gold, dat leest slecht. Witte tekst als er geen lijnkleur is. */
.shop-lijnen li.actief:not([class*="lijn-"]) a { color: #fff !important; }

/* Het laatste kind in een blok (meestal een alinea) legde zijn eigen ondermarge
   nog boven op de sectie-padding. Dat is precies de dubbele ruimte die weg moest. */
section.intro > .container > *:last-child,
section.intro > .container > * > *:last-child,
.woocommerce div.product .woocommerce-tabs .panel > *:last-child { margin-bottom: 0; }

/* Mobiel scrollt de USP-balk horizontaal; met justify-content: center valt het
   eerste item dan buiten beeld. Op mobiel dus links uitlijnen. */
@media (max-width: 767px) { .usp-balk { justify-content: flex-start; } }

/* ============================================================
   4U SKINCARE – TEKSTPAGINA'S (Zo werkt het, Ingrediënten, Over 4U, Behandelingen, Contact)
   ============================================================ */

/* --- Pagina-hero (klein, tekst) --- */
.pagina-hero { max-width: 44rem; }
.pagina-hero h1 { font-size: 3rem; font-weight: 300; line-height: 1.08; margin-bottom: var(--space-md); }
.pagina-hero .intro-tekst { font-size: 1.125rem; }
@media (max-width: 767px) { .pagina-hero h1 { font-size: 2.25rem; } }

/* --- Zo werkt het: stappen als rijen --- */
.stappen-lijst { list-style: none; padding: 0; margin: var(--space-xl) 0 0; border-top: 1px solid var(--border-color); }
.stappen-lijst li { display: grid; grid-template-columns: 3.5rem 10rem 1fr; gap: var(--space-lg); align-items: start; padding: var(--space-lg) 0; border-bottom: 1px solid var(--border-color); margin: 0; }
.stappen-lijst .stap-bol { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--color-bg-white); border: 1px solid var(--border-color); color: var(--color-brand-dark); font-weight: 500; }
.stappen-lijst h3 { margin: 0.6rem 0 0; font-size: 1.125rem; }
.stappen-lijst p { margin: 0 0 var(--space-xs); }
.stappen-lijst .stap-producten { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.stappen-lijst .stap-producten a { font-size: 0.8125rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--lijn-light); color: var(--lijn-text) !important; text-decoration: none !important; }
@media (max-width: 767px) { .stappen-lijst li { grid-template-columns: 3rem 1fr; } .stappen-lijst li > p, .stappen-lijst li > div { grid-column: 2; } }
.moment-uitleg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); }
.moment-uitleg > div { background: var(--color-bg-white); border-radius: var(--radius-default); padding: var(--space-lg); }
.moment-uitleg i { color: var(--color-brand); font-size: 1.5rem; margin-bottom: var(--space-sm); display: block; }
.moment-uitleg h3 { font-size: 1.125rem; margin-bottom: var(--space-xs); }
.moment-uitleg p { margin: 0; font-size: 0.9375rem; }
@media (max-width: 600px) { .moment-uitleg { grid-template-columns: 1fr; } }

/* --- Ingrediënten --- */
.ingr-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-lg) 0 var(--space-xl); }
.ingr-nav li { margin: 0; }
.ingr-nav a { display: inline-block; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); background: var(--color-bg-white); border: 1px solid var(--border-color); color: var(--color-brand-dark) !important; font-size: 0.9375rem; text-decoration: none !important; }
.ingr-nav a:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff !important; }
.ingr-groep { margin-bottom: var(--space-2xl); scroll-margin-top: 6rem; }
.ingr-groep h2 { font-size: 1.5rem; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-md); }
.ingr-item { border-bottom: 1px solid var(--border-color); }
.ingr-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 1rem 0; font-size: 1.0625rem; color: var(--color-brand-dark); }
.ingr-item summary::-webkit-details-marker { display: none; }
.ingr-item summary::after { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.75rem; color: var(--color-brand); transition: transform .2s; }
.ingr-item[open] summary::after { transform: rotate(45deg); }
.ingr-item .ingr-inhoud { padding: 0 0 var(--space-lg); max-width: 46rem; }
.ingr-item .ingr-inhoud h4 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-md) 0 0.25rem; }
.ingr-item .ingr-inhoud p { margin: 0 0 var(--space-sm); }
.ingr-item .wist-je { background: var(--color-bg-white); border-left: 3px solid var(--color-brand); border-radius: 0 var(--radius-default) var(--radius-default) 0; padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0; font-size: 0.9375rem; }
.ingr-item .wist-je strong { color: var(--color-brand-dark); font-weight: 500; }
.ingr-item .geschikt { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.ingr-item .geschikt span { font-size: 0.8125rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-brand-dark); }

/* --- Over 4U: verhaal --- */
.verhaal { display: flex; gap: 6%; align-items: flex-start; }
.verhaal-tekst { flex: 1 1 58%; max-width: 40rem; }
.verhaal-tekst p { margin-bottom: var(--space-md); }
.verhaal-tekst .quote { font-size: 1.5rem; font-weight: 300; line-height: 1.3; color: var(--color-brand-dark); margin: var(--space-xl) 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-brand); }
.verhaal-tekst .slot { font-size: 1.375rem; font-weight: 300; color: var(--color-brand-dark); margin-top: var(--space-xl); }
.verhaal-zij { flex: 0 0 34%; position: sticky; top: 6rem; }
.verhaal-zij .beeld { border-radius: var(--radius-large); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-bg-white); margin-bottom: var(--space-md); }
.verhaal-zij .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.verhaal-zij .naam { color: var(--color-text-muted); font-size: 0.9375rem; }
@media (max-width: 991px) { .verhaal { flex-direction: column; } .verhaal-zij { position: static; flex-basis: auto; max-width: 20rem; } }
.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-xl) 0 0; }
.waarden li { margin: 0; background: var(--color-bg-white); border-radius: var(--radius-default); padding: var(--space-lg); }
.waarden h3 { font-size: 1.125rem; margin-bottom: var(--space-xs); }
.waarden p { margin: 0; font-size: 0.9375rem; }
@media (max-width: 767px) { .waarden { grid-template-columns: 1fr; } }

/* --- Behandelingen --- */
.behandelingen { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.behandelingen li { margin: 0; background: var(--color-bg-white); border-radius: var(--radius-large); padding: var(--space-xl); display: flex; flex-direction: column; }
.behandelingen li.uitgelicht { grid-column: 1 / -1; background: var(--color-bg-alt); }
.behandelingen .slogan { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-xs); }
.behandelingen h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.behandelingen .duur { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }
.behandelingen p { font-size: 0.9375rem; }
.behandelingen h4 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-sm) 0 0.35rem; }
.behandelingen ul { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.behandelingen ul li { background: transparent; padding: 0 0 0 1.4rem; position: relative; margin-bottom: 0.25rem; font-size: 0.9375rem; border-radius: 0; display: block; }
.behandelingen ul li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 0.15rem; color: var(--color-brand); font-size: 0.75rem; }
.behandelingen .knop { margin-top: auto; align-self: flex-start; }
@media (max-width: 767px) { .behandelingen { grid-template-columns: 1fr; } .behandelingen li { padding: var(--space-lg); } }

/* --- Contact --- */
div.contact { display: flex; gap: 6%; align-items: flex-start; }
.contact-gegevens { flex: 0 0 38%; }
.contact-gegevens h3 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-lg) 0 0.35rem; }
.contact-gegevens h3:first-child { margin-top: 0; }
.contact-gegevens p { margin: 0 0 var(--space-xs); }
.contact-gegevens i { color: var(--color-brand); width: 1.4rem; }
.contact-formulier { flex: 1 1 56%; background: var(--color-bg-white); border-radius: var(--radius-large); padding: var(--space-xl); }
.contact-formulier input[type=text], .contact-formulier input[type=email], .contact-formulier textarea { width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-default); padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 1rem; background: var(--color-bg-body); margin-bottom: var(--space-md); }
.contact-formulier label { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0.3rem; }
@media (max-width: 991px) { div.contact { flex-direction: column; } .contact-gegevens, .contact-formulier { flex-basis: auto; width: 100%; } }
.lijn-tegels-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .lijn-tegels-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lijn-tegels-4 { grid-template-columns: 1fr; } }
.knoppen-rij { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.home-pro-kaal { background: transparent; padding: 0; }
div.contact { margin-top: var(--space-xl); }
.contact-gegevens .adres { padding-left: 1.4rem; text-indent: -1.4rem; }
.contact-gegevens .adres i { text-indent: 0; }
.ingr-item .ingr-inhoud ul { padding-left: 1.2rem; margin: 0 0 var(--space-sm); }
.ingr-item .ingr-inhoud li { margin-bottom: 0.2rem; }
.ingr-item .ingr-inhoud li::marker { color: var(--color-brand); }

/* .subtitel boven de H1 had nergens een regel (ook niet in de preview) en viel
   daardoor als losse zin boven de kop. Zelfde eyebrow-opmaak als .slogan. */
.pagina-hero .subtitel { display: block; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-sm); }


/* --- Aanvullingen na stap 6 --- */

/* Aanmeldblok Professionals: Addify heeft geen shortcode voor het
   registratieformulier, dus verwijzen we naar Mijn account. */
.pro-aanmelden { max-width: 46rem; margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-large); }
.pro-stappen { counter-reset: proStap; list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.pro-stappen li { position: relative; padding-left: 2.5rem; margin-bottom: var(--space-md); }
.pro-stappen li:last-child { margin-bottom: 0; }
.pro-stappen li::before { counter-increment: proStap; content: counter(proStap); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--color-brand); color: #fff; font-size: 0.8125rem; line-height: 1; }
@media (max-width: 767px) { .pro-aanmelden { padding: var(--space-md); } }

/* wpautop laat een lege <p> achter na een inline element (span.subtitel, i)
   dat direct wordt gevolgd door een blokelement. */
section.intro p:empty { display: none; }


/* --- Aanvullingen na mobiele controle (10-09-2026) --- */

/* wpautop zet een <br> achter de inline spans in de kaarten. In een
   flex- of grid-li wordt die <br> een eigen item: extra witruimte in
   .routine-opbouw en een verschoven grid in .stappen-lijst (kop in de
   smalle kolom, uitleg in de 3.5rem-kolom). */
.routine-opbouw li > br,
.stappen-lijst li > br { display: none; }

/* Mobiel menu: het thema zet links, pijltje en hamburger in een kleur
   voor een donkere navigatiebalk; onze balk is licht (#F7F4EE). */
@media (max-width: 991px) {
  header button.navbar-toggle,
  header button.navbar-toggle i { color: var(--color-brand-dark) !important; border-color: transparent !important; }
  header div.navbar-collapse ul li a,
  header div.navbar-collapse ul li a .sub-arrow { color: var(--color-brand-dark) !important; }
  header div.navbar-collapse ul li a:hover,
  header div.navbar-collapse ul li.active > a,
  header div.navbar-collapse ul li.current-menu-item > a { color: var(--color-brand) !important; }
  header div.navbar-collapse ul.dropdown-menu li a { text-align: center; padding-left: 15px; }
  header div.navbar-collapse ul.list-inline li a i { color: var(--color-brand-dark) !important; }
  /* Uitgeklapt menu begon op 113px en viel over de onderkant van het logo (tot 138px). */
  header div.navbar-collapse { margin-top: 1.75rem; }
}

/* Prijslabel productpagina: Addify toont prijzen excl. btw voor
   administrator, shop_manager en professional (B2B › Tax). De regel
   met body.role-b2b hierboven vuurt nooit: die rol bestaat niet, de
   rol heet "professional". Het thema zet role-<slug> op <body>. */
body.role-professional div.product p.price::after,
body.role-administrator div.product p.price::after,
body.role-shop_manager div.product p.price::after { content: "excl. btw"; }


/* --- Design pass --- */

/* Laag 0 – beeldplekken bij de pagina-hero's (blijvend, ook als de foto er is).
   Zo werkt het, Ingrediënten, Professionals: tekst links, beeld 4:3 rechts.
   Behandelingen: beeld 21:9 over de volle containerbreedte onder de hero-tekst.
   Contact: beeld 4:3 boven de gegevens. Mobiel: beeld onder de tekst. */
.pagina-hero-rij { display: flex; align-items: center; gap: 6%; }
.pagina-hero-rij .pagina-hero { flex: 1 1 50%; }
.pagina-beeld { flex: 0 0 42%; aspect-ratio: 4 / 3; border-radius: var(--radius-large); overflow: hidden; }
.pagina-beeld img, .contact-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagina-beeld.pagina-beeld-breed { aspect-ratio: 21 / 9; margin: var(--space-xl) 0; }
.contact-beeld { aspect-ratio: 4 / 3; border-radius: var(--radius-default); overflow: hidden; margin-bottom: var(--space-lg); }
@media (max-width: 991px) {
  .pagina-hero-rij { flex-direction: column; align-items: stretch; gap: var(--space-xl); }
  .pagina-beeld { flex-basis: auto; }
  .pagina-beeld.pagina-beeld-breed { aspect-ratio: 4 / 3; }
}

/* (TIJDELIJK-blok foto-placeholders verwijderd op 10-09-2026: alle foto's uit Fotolijst_4U staan erin.) */

/* Laag 1 – merkecho's */

/* 1. Gouden band van de fles: 3px verloop tussen header en USP-balk, en als bovenrand van de footer */
header .shop_uspbar,
footer { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--color-brand-light), var(--color-brand), var(--color-brand-light)) 1; }

/* 2. Hexagon uit het logo als bullet: USP-balk (goud), "Herken je dit?" (lijnkleur), "Perfect als je" (goud) */
.usp-balk li::before,
.herken-lijst li::before,
.behandelingen ul li::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--color-brand); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); border-radius: 0; font-family: inherit; font-size: 0; }
.usp-balk li::before { display: inline-block; margin-right: 0.5rem; vertical-align: 0.05em; }
.herken-lijst li { padding-left: 1.4rem; }
.herken-lijst li::before { display: block; position: absolute; left: 0; top: 0.575rem; background: var(--lijn-main); }
.herken-lijst li::after { content: none; }
.behandelingen ul li::before { position: absolute; left: 0; top: 0.475rem; }

/* 3. Subtitel boven de H1 en de lijn-badge in de lijnpagina-hero: gouden hairline + tekst, geen pill */
.subtitel::before,
.lijn-hero .lijn-badge::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; background: var(--color-brand); margin-right: 0.6rem; vertical-align: middle; }
.lijn-hero .lijn-badge { background: transparent !important; padding: 0; border-radius: 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lijn-text) !important; }
.lijn-hero .lijn-badge::before { background: var(--lijn-text); }

/* 4. Knoppen: 1px lift met zachte schaduw bij hover (outline-knop vult al goud) */
.btn, .btn-primary, .woocommerce a.button, .woocommerce button.button, .woocommerce .button, .woocommerce input.button, [type="submit"], .knop { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .btn:hover, .btn-primary:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover, .woocommerce input.button:hover, [type="submit"]:hover, .knop:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
}

/* 2b. Ook de USP-regel op de productpagina (thema zet daar <i class="fas fa-check">) */
.product-usps li i.fa-check { width: 0.55rem; height: 0.55rem; background: var(--color-brand); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); vertical-align: 0.05em; margin-right: 0.2rem; }
.product-usps li i.fa-check::before { content: none; }

/* 5. Productkaarten: kaart 3px omhoog, beeldpaneel zachte schaduw, titel goud */
.woocommerce ul.products li.product { transition: transform .25s ease; }
.woocommerce ul.products li.product img { transition: transform .3s ease, box-shadow .25s ease; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { transition: color .25s ease; }
@media (hover: hover) {
  .woocommerce ul.products li.product:hover { transform: translateY(-3px); }
  .woocommerce ul.products li.product:hover img { box-shadow: var(--shadow-soft); }
  .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-brand) !important; }
}

/* Laag 2 – maat en bleed.
   Punt 6 (lijnpagina-beeld tot de rand) bewust overgeslagen: met de losse productfoto op wit
   wordt dat een wit vlak. Pas doen als lijn-<naam>.jpg er is. */

/* 7. Home filmblok: op desktop van rand tot rand, geen radius, maximaal 70vh.
   Mobiel blijft 4:3 in de container. */
@media (min-width: 992px) {
  /* (10-09-2026 teruggedraaid op verzoek: filmblok weer in de container, met afgeronde hoeken) */
}

/* 8. Home hero: grotere kop, intro en knoppen in een smallere kolom */
@media (min-width: 992px) {
  .home-hero h1 { font-size: 3.75rem; font-weight: 300; }
  .home-hero-rechts { flex: 0 1 28rem; max-width: 28rem; }
}

/* 9. Tekstpagina's: grotere, smallere kop */
.pagina-hero h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.05; max-width: 14ch; }
@media (max-width: 767px) { .pagina-hero h1 { font-size: 2.25rem; } }

/* 10. Productpagina: beeldpaneel met licht warm verloop (wit naar ivory). De foto zelf
   heeft een witte of lichtgrijze achtergrond; met multiply neemt die het verloop over,
   zodat de foto in het paneel overloopt in plaats van als wit vlak op ivory te staan. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-body) 100%); }
.woocommerce div.product div.images .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }

/* Laag 3 – hexagon-motief (stap 1: alleen de home-hero)
   Omtrek van het logo-hexagon (punt boven, zoals in het logo) als SVG-mask, zodat de
   kleur uit een token komt en het een lijn van 1px blijft. Opacity 0.12 (maximum).
   Plaatsing: rechts van de container, met 24px afstand tot de tekstkolom, zodat de lijn
   nooit door de intro-tekst of knoppen loopt. Rechtsboven in de hero zelf staat de
   tekstkolom; daar kruiste het motief bij elke proefpositie de tekst.
   Mobiel en tablet (< 992px): weggelaten, daar is geen vrije ruimte naast de tekst. */
@media (min-width: 992px) {
  section.home-hero-blok { position: relative; overflow: hidden; }
  section.home-hero-blok > .container { position: relative; z-index: 1; }
  section.home-hero-blok::before { content: ""; position: absolute; top: -4rem; left: calc(50% + 464px); width: 28rem; height: 28rem; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.12; pointer-events: none; z-index: 0; }
}
@media (min-width: 1200px) {
  /* container is hier 1170px: rechterrand tekst = 50% + 570px */
  section.home-hero-blok::before { left: calc(50% + 564px); }
}

/* Laag 3 – hexagon-motief, stap 2: lijnpagina's, tekstpagina's, "Uit de behandelkamer".
   Zelfde vorm als op de home (punt boven). De hexagon-bullets uit laag 1 staan nu ook
   met de punt boven (polygon aangepast in het laag 1-blok), zodat het één vorm is.
   Regel: het motief loopt nooit door lopende tekst of knoppen; achter de H1 mag, tot 0.10.
   Plaatsing per soort pagina (desktop, vanaf 992px):
   - Tekstpagina's met alleen tekst in de hero (Over 4U, Behandelingen, Contact): rechtsboven
     in de hero, deels buiten de container. Daar is vrije ruimte naast de tekst.
   - Hero's met een beeld rechts (Zo werkt het, Ingrediënten, Professionals, Uit de
     behandelkamer) en de lijnpagina's: rechts naast de container, zoals op de home.
   Mobiel (< 992px): tekstpagina's 14rem op 0.08, rechtsboven, loopt hooguit door de H1.
   Lijnpagina's en Uit de behandelkamer: op mobiel weggelaten, daar staat bovenaan het beeld. */
section.zwh-hero-blok, section.ingr-hero-blok, section.pro-hero-blok, section.over-hero-blok, section.beh-hero-blok, section.contact-blok, section.home-hanny-blok { position: relative; overflow: hidden; }
section.zwh-hero-blok > .container, section.ingr-hero-blok > .container, section.pro-hero-blok > .container, section.over-hero-blok > .container, section.beh-hero-blok > .container, section.contact-blok > .container, section.home-hanny-blok > .container { position: relative; z-index: 1; }
section.zwh-hero-blok::before, section.ingr-hero-blok::before, section.pro-hero-blok::before, section.home-hanny-blok::before, section.over-hero-blok::before, section.beh-hero-blok::before, section.contact-blok::before { content: ""; position: absolute; width: 28rem; height: 28rem; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.12; pointer-events: none; z-index: 0; }

/* Lijnpagina's: --lijn-text staat op .lijn-hero (niet op de sectie), dus het motief hangt aan
   .lijn-hero; de sectie wordt stacking context zodat het achter de inhoud maar boven de
   achtergrondkleur valt. Lichtheidsverschil lijn t.o.v. achtergrond bij 0.12: Hydrate 6.7,
   Balance 7.4, Calm 7.9, Renew 7.9 (L*). Renew is dus niet zwaarder dan Calm: overal 0.12. */
section.lijn-hero-blok { position: relative; z-index: 0; overflow: hidden; }
section.lijn-hero-blok .lijn-hero { position: relative; }
section.lijn-hero-blok .lijn-hero::before { content: ""; position: absolute; top: calc(-4rem - var(--space-2xl)); left: calc(100% - 6px); width: 28rem; height: 28rem; background: var(--lijn-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.12; pointer-events: none; z-index: -1; }

@media (min-width: 992px) {
  section.zwh-hero-blok::before, section.ingr-hero-blok::before, section.pro-hero-blok::before, section.home-hanny-blok::before { top: -4rem; left: calc(50% + 464px); }
  section.over-hero-blok::before, section.beh-hero-blok::before, section.contact-blok::before { top: -6rem; right: calc(50% - 470px - 6rem); }
}
@media (min-width: 1200px) {
  section.zwh-hero-blok::before, section.ingr-hero-blok::before, section.pro-hero-blok::before, section.home-hanny-blok::before { left: calc(50% + 564px); }
  section.over-hero-blok::before, section.beh-hero-blok::before, section.contact-blok::before { right: calc(50% - 570px - 6rem); }
}
@media (max-width: 991px) {
  section.zwh-hero-blok::before, section.ingr-hero-blok::before, section.pro-hero-blok::before, section.home-hanny-blok::before, section.over-hero-blok::before, section.beh-hero-blok::before, section.contact-blok::before { top: -7rem; right: -4rem; left: auto; width: 14rem; height: 14rem; opacity: 0.08; }
  section.home-hanny-blok::before, section.lijn-hero-blok .lijn-hero::before { content: none; }
}

/* Foto's na plaatsing (10-09-2026): uitsnede per foto, zodat het onderwerp in beeld blijft */
/* Home-groepsfoto: de producten staan iets onder het midden van de foto */
.home-media img.wp-image-835 { object-position: 50% 55%; }
/* Desktop (foto vult de breedte): de groep staat in de foto zelf iets rechts van het midden;
   3% vergroten en 1,4% naar links zetten legt hem in het midden van de band */
@media (min-width: 992px) { .home-media img.wp-image-835 { transform: translateX(-1.4%) scale(1.03); } }
/* Mobiel 4:3: de foto wordt links/rechts bijgesneden; de groep staat iets rechts van het midden */
@media (max-width: 991px) { .home-media img.wp-image-835 { object-position: 60% 55%; } }
/* Hanny (liggende foto in een staand 4:5-kader): uitsnede op Hanny, rechts in de foto */
.home-hanny-beeld img.wp-image-834 { object-position: 88% 40%; }
/* Behandelstoel (staande foto in 4:3): uitsnede op de stoel, onderin de foto */
.pagina-beeld img.wp-image-837 { object-position: 50% 82%; }

/* Tekstpagina's mobiel: geen maximale breedte op de kop (voorkwam weeswoord "zijn.") */
@media (max-width: 767px) { .pagina-hero h1 { max-width: none; } }

/* --- Spacing-audit home (10-09-2026) ---
   Schaal: kop→intro --space-lg, intro→inhoud --space-xl, tussen blokken --space-2xl
   (mobiel --space-xl). Het thema geeft elk blok 8rem (128px) boven én onder; twee blokken
   zonder eigen achtergrond na elkaar gaven zo 160–256px lucht. Nu: elk blok 2xl, en een
   blok zonder achtergrond direct na een blok zonder achtergrond krijgt boven 0, zodat de
   afstand tussen die twee precies 2xl is. Blokken met een achtergrondkleur houden 2xl
   binnenin. Alleen op de home (body.home); andere pagina's hebben nog de 8rem van het thema.
   Header→hero bewust --space-xl (niet 2xl): anders vallen de lijnvlakken op 1366×768 onder de vouw. */
body.home section.intro { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
body.home section.intro:not([style*="background"]) + section.intro:not([style*="background"]) { padding-top: 0; }
body.home section.intro.home-hero-blok { padding-top: var(--space-xl); }
/* Hero: tekst → lijnvlakken precies xl */
body.home .home-hero-tekst { margin-bottom: var(--space-xl); }
body.home .home-hero .lijn-kiezer { margin-top: 0; }
/* Zo werkt het: knop → routine-strip (mobiel onder elkaar) was 60px door marge op de laatste alinea */
body.home .home-stappen-tekst > :last-child { margin-bottom: 0; }
/* De basis: productraster → link was 66px (marge raster + wpautop-<br> + inline regelhoogte) */
body.home .home-basis-blok ul.products, body.home .home-basis-blok .woocommerce.columns-4 { margin-bottom: 0 !important; }
body.home .home-basis-blok .woocommerce > br { display: none; }
body.home .home-basis-link { display: block; width: fit-content; margin-top: var(--space-xl); }
@media (max-width: 991px) {
  body.home section.intro { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  body.home section.intro:not([style*="background"]) + section.intro:not([style*="background"]) { padding-top: 0; }
  /* kop → intro was 15px (gap md) */
  body.home .home-hero-tekst { gap: var(--space-lg); }
  body.home .home-hero-rechts { padding-bottom: 0; }
}

/* EXPERIMENT 10-09-2026 (omkeerbaar): basis wit, ivory voor de afwisselende secties.
   Terugdraaien = deze ene regel verwijderen. */
/* (zie "Wit als basis, variant 2" onderaan) */

/* --- Wit als basis, variant 2 (10-09-2026) ---
   Basis wit, ivory (#F7F4EE) voor de afwisselende secties, taupe #EDE7DC blijft waar het
   al stond. Regel: nooit twee witte blokken met inhoud na elkaar (uitzondering op verzoek:
   home-hero + filmblok). De blokkleur zelf staat in de blokinstelling (Achtergrondkleur).
   Kaarten die wit-op-wit zouden wegvallen krijgen hier ivory. */
:root { --color-bg-body: #FDFCFA; --color-bg-alt: #F7F4EE; } /* body: wit met ca. 3% van --color-brand erin (was #FFFFFF) */
.home-pro,
.moment-uitleg > div,
.behandelingen li.beh-kaart,
.contact-formulier,
.pro-aanmelden { background: var(--color-bg-alt) !important; }
.waarden > li, .waarden > div { background: var(--color-bg-alt); }

/* --- Spacing sitebreed (10-09-2026): dezelfde schaal als de home ---
   Vervangt de 8rem boven/onder van het thema op elk blok. Lijnpagina-hero (3xl) en
   home-hero (xl boven) houden hun eigen, specifiekere regel. */
section.intro { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
section.intro:not([style*="background"]) + section.intro:not([style*="background"]) { padding-top: 0; }
@media (max-width: 991px) {
  section.intro { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  section.intro:not([style*="background"]) + section.intro:not([style*="background"]) { padding-top: 0; }
}

/* --- Zes punten na de frisse blik (10-09-2026) --- */
/* 3. Copyright-regel. De footerbalk is #8A735C = --color-text-muted zelf; daarop haalt geen
   token 4,5:1 (wit komt op 4,49). Balk daarom in --color-text-main, tekst ivory: 9,6:1. */
body footer div.socket { background: var(--color-text-main) !important; } /* thema: footer div.socket { background: #8A735C !important } */
footer .socket, footer .socket span, footer .socket a { color: var(--color-bg-alt) !important; }
/* 4. De basis (alleen home): winkelwagenknoppen als outline, producten voorop */
body.home .home-basis-blok ul.products li.product .button { background: transparent !important; color: var(--color-brand) !important; border: 1px solid var(--color-brand) !important; }
body.home .home-basis-blok ul.products li.product .button:hover { background: var(--color-brand) !important; color: #fff !important; }
/* 5. Footerlijsten zonder bullets (rustigst naast de kolomlijnen) */
footer .column ul { list-style: none; padding-left: 0; }
/* 6. Uit de behandelkamer: kop boven citaat */
.home-hanny-tekst h2 { font-size: 2rem; }
.home-hanny-tekst blockquote { font-size: 1.5rem; color: var(--color-text-muted); }

/* TIJDELIJK – foto-placeholders Hanny (hanny-behandelkamer.jpg, Home + Over 4U) en contact-salon.jpg
   (Contact). Weg zodra beide foto's erin staan. Alleen zichtbaar voor ingelogde beheerders. */
.foto-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, var(--color-bg-body) 0%, var(--color-bg-alt) 100%); border: 1px solid var(--border-color); }
.foto-placeholder .placeholder-inhoud { display: block; padding: var(--space-lg); margin: 0; }
.foto-placeholder i { display: block; font-size: 2.75rem; color: var(--color-brand-light); margin-bottom: var(--space-sm); }
.foto-placeholder .placeholder-bestand { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--color-brand-dark); margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.foto-placeholder .placeholder-tekst { display: block; font-size: 0.8125rem; color: var(--color-text-muted); max-width: 26rem; margin: 0 auto; }
body:not(.logged-in) .foto-placeholder { display: none !important; }

/* --- Laatste punten (10-09-2026) --- */
/* Lijnpagina-hero: zelfde schaal als de andere blokken (was 64 boven / 32 onder, mobiel 15) */
section.intro.lijn-hero-blok { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
@media (max-width: 991px) { section.intro.lijn-hero-blok { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } }
/* Pagina-koppen: regels in balans, geen weeswoord ("zijn.") */
.pagina-hero h1 { text-wrap: balance; }
/* Header, navigatie, accountbalk en mobiel menu wit; de gouden band eronder is de scheiding.
   Het thema zet deze kleuren vanuit de Thema-instellingen met !important, daarom body-prefix. */
body header div.header,
body header .sticky_menu_small div.header,
body header nav.navbar-default,
body header div.navbar-collapse,
body .shop_topbar { background-color: var(--color-bg-body) !important; }
/* Placeholder-icoon in de contactkolom: .contact-gegevens i geeft iconen een vaste breedte */
.contact-beeld.foto-placeholder i { width: auto; }
/* Mobiel menu: het actieve menu-item was wit (thema: header nav.navbar-default ul.navbar-nav .active > a
   { color: #fff !important }), dus op de pagina zelf onzichtbaar in het lichte menu */
@media (max-width: 991px) {
  body header nav.navbar-default div.navbar-collapse ul.navbar-nav li.active > a,
  body header nav.navbar-default div.navbar-collapse ul.navbar-nav li.current-menu-item > a { color: var(--color-brand) !important; }
}

/* USP-balk mobiel (≤767px): de vier USP's wisselen elkaar af in plaats van horizontaal scrollen.
   Alle vier staan in dezelfde gridcel; elk is 4 van de 16 seconden zichtbaar, met een zachte
   overgang. Wie "beweging beperken" aan heeft, houdt de oude scrollbare balk. */
@keyframes usp-wissel {
  0% { opacity: 0; transform: translateY(4px); }
  3% { opacity: 1; transform: none; }
  22% { opacity: 1; transform: none; }
  25% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .usp-balk { display: grid; justify-content: center; overflow: hidden; gap: 0; }
  .usp-balk li { grid-area: 1 / 1; text-align: center; opacity: 0; animation: usp-wissel 16s ease-in-out infinite both; }
  .usp-balk li:nth-child(2) { animation-delay: 4s; }
  .usp-balk li:nth-child(3) { animation-delay: 8s; }
  .usp-balk li:nth-child(4) { animation-delay: 12s; }
}

/* Desktop: menu verticaal gecentreerd naast het logo (stond bovenaan de headerrij) */
@media (min-width: 992px) {
  header div.header > .container > .row { display: flex; align-items: center; }
}

/* Productpagina: ruimte tussen inhoud/huidtype en de winkelwagenknop (was 0px) */
.woocommerce div.product .summary form.cart { margin-top: var(--space-lg); }

/* USP-balk mee met de basiskleur (stond via de Topbar-instelling op #FFFFFF en viel anders als witte strook op) */
body header .shop_uspbar { background-color: var(--color-bg-body) !important; }


/* ══════════════════════════════════════════════════════════════
   4U SKINCARE — EDITORIAL LAAG (15-09-2026)
   Richting: skins.nl (rustig, editorial, luxe), met de commerciele
   bouwstenen van hydropeptide.nl. Kleuren en lettertype blijven
   precies zoals het huisstijlboek ze voorschrijft; wat verandert is
   de vorm: strak in plaats van rond, groter en lichter gezet,
   meer witruimte, beeld van rand tot rand.
   Deze laag staat bewust onderaan en overschrijft de lagen erboven.
   Terugdraaien = alles vanaf deze regel verwijderen.
   ══════════════════════════════════════════════════════════════ */

/* --- 1. Fundament: vorm en maat --------------------------------
   Full-bleed secties gebruiken 100vw; overflow-x: clip vangt de
   breedte van de scrollbalk af. Clip (niet hidden) laat
   position: sticky elders op de site ongemoeid. */
html, body { overflow-x: clip; }

:root {
  --radius-default: 2px;
  --radius-large: 2px;
  --radius-pill: 2px;
  --shadow-soft: none;
  --ed-max: 1440px;
  --ed-gutter: clamp(1.25rem, 3.5vw, 3.5rem);
  --ed-line: #E4DCCF;
  --space-3xl: 6.5rem;
}

/* Bredere container: de voorbeeldsites geven beeld en raster meer
   lucht dan de 1170px van het thema. */
@media (min-width: 992px) {
  .container { width: auto !important; max-width: var(--ed-max); padding-left: var(--ed-gutter); padding-right: var(--ed-gutter); }
}

/* --- 2. Typografie ---------------------------------------------
   Grotere, lichtere koppen met strakke regelafstand; kapitalen met
   ruime spatiering als rustig label. Jost blijft het enige font. */
body { line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: 1.0625rem; font-weight: 400 !important; letter-spacing: 0; }
.intro-tekst { font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; }

/* Het gespatieerde kapitaal dat de hele richting draagt */
.ed-eyebrow {
  display: block; font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-brand);
  margin: 0 0 var(--space-md);
}
.pagina-hero .subtitel, .behandelingen .slogan { font-size: 0.6875rem; letter-spacing: 0.2em; }

/* --- 3. Knoppen en links ---------------------------------------
   Rechthoekig, klein kapitaal, geen lift of schaduw. */
.btn, .btn-primary, .knop, .woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .woocommerce input.button, [type="submit"],
.wc-block-components-button, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem !important;
  padding: 1.1rem 2.4rem !important;
}
@media (hover: hover) {
  .btn:hover, .btn-primary:hover, .knop:hover, .woocommerce a.button:hover,
  .woocommerce button.button:hover, .woocommerce .button:hover,
  .woocommerce input.button:hover, [type="submit"]:hover { transform: none; box-shadow: none; }
}
.knop-outline, .woocommerce a.button.knop-outline {
  border-color: var(--color-brand-dark) !important;
  color: var(--color-brand-dark) !important;
}
.knop-outline:hover, .woocommerce a.button.knop-outline:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: #fff !important;
}
.tekstlink, .home-basis-link, .home-hero-acties .tekstlink {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Badges en chips: vlak in plaats van pil */
.lijn-badge, .stap-badge, .shop-lijnen a, .ingr-item .geschikt span,
.stappen-lijst .stap-producten a, .woocommerce div.product .product_meta a,
.woocommerce .woocommerce-ordering select,
.woocommerce div.product form.cart div.quantity { border-radius: 0 !important; }

/* --- 4. Kaarten en beeld: vlak, geen ronding, geen schaduw ----- */
.kaart, .img-zacht, .img-zacht-groot, .home-media, .lijn-hero-beeld,
.pagina-beeld, .contact-beeld, .home-hanny-beeld, .verhaal-zij .beeld,
.behandelingen li, .home-pro, .contact-formulier, .pro-aanmelden,
.waarden li, .moment-uitleg > div, .routine-opbouw li, .lijn-tegels a,
.woocommerce table.shop_table, .woocommerce .cart-collaterals .cart_totals,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images figure,
.woocommerce div.product div.images img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 5. Productraster ------------------------------------------ */
.woocommerce ul.products { gap: var(--space-2xl) var(--space-lg); }
.woocommerce ul.products li.product img {
  border-radius: 0; background: var(--color-bg-alt);
  margin-bottom: var(--space-md) !important;
}
@media (hover: hover) {
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product:hover img { box-shadow: none; transform: none; }
  .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-brand-dark) !important; }
}
/* Lijnnaam als vlak label in plaats van gekleurde pil */
.woocommerce ul.products li.product::before {
  background: transparent; color: var(--color-text-muted);
  padding: 0; top: 0.85rem; left: 0.85rem; border-radius: 0;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem; font-weight: 400 !important; letter-spacing: 0;
}
.woocommerce ul.products li.product::after {
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0.1rem 0 0.5rem;
}
.woocommerce ul.products li.product .price { font-size: 0.9375rem !important; }
.woocommerce ul.products li.product .button,
body.home .home-basis-blok ul.products li.product .button {
  align-self: stretch !important; text-align: center;
  background: transparent !important; color: var(--color-brand-dark) !important;
  border: 1px solid var(--ed-line) !important;
  padding: 0.95rem 1rem !important;
}
.woocommerce ul.products li.product .button:hover,
body.home .home-basis-blok ul.products li.product .button:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important; color: #fff !important;
}

/* --- 6. Header: logo gecentreerd, navigatie eronder ------------
   Zelfde opbouw als skins.nl: winkelmand en account rechtsboven,
   logo in het midden, navigatie als kapitalenrij op een hairline. */
header .shop_topbar { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
header .shop_topbar a { color: var(--color-text-main) !important; }
@media (min-width: 992px) {
  header { position: relative; }
  header .shop_topbar { position: absolute; top: 2.1rem; left: 0; right: 0; z-index: 6; padding: 0; }
  header div.header > .container > .row { flex-direction: column; align-items: stretch; }
  header div.header div.col-sm-10,
  header div.header div.col-sm-38 { width: 100% !important; float: none !important; position: static !important; }
  header div.header div.holder { min-height: 0; padding: 0; text-align: center; }
  header div.header div.col-sm-10 { padding: 2.2rem 0 1.5rem; }
  header div.header img.logo { max-height: 76px; float: none; margin: 0 auto; display: inline-block; }
  header div.header nav.navbar { float: none; border-top: 1px solid var(--ed-line); }
  header div.header ul#primary_navigation { display: flex; justify-content: center; float: none; }
  header div.header ul#primary_navigation > li { float: none; }
  header div.header ul#primary_navigation > li > a {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.6875rem; padding: 1.15rem 1.1rem;
  }
}
header .shop_uspbar .usp-balk { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.85rem 0; }

/* --- 7. Footer -------------------------------------------------- */
footer { padding-top: var(--space-3xl); }
footer div.column > h4 {
  font-size: 0.6875rem !important; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 0 !important; padding-bottom: 0 !important;
  color: var(--color-text-muted) !important; margin-bottom: var(--space-md);
}
footer .socket, footer .socket span, footer .socket a { font-size: 0.6875rem; letter-spacing: 0.1em; }

/* --- 8. Gereedschap: sectie van rand tot rand ------------------- */
.ed-bleed { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.ed-inner { max-width: var(--ed-max); margin: 0 auto; padding: 0 var(--ed-gutter); }
.ed-sectie { padding: var(--space-3xl) 0; }
.ed-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-2xl); }
.ed-kop h2 { margin: 0; }
.ed-acties { display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; }

/* --- 9. Homepage: blokken zonder eigen padding -----------------
   De secties hieronder bepalen hun eigen ruimte.
   home-media-blok is nu de collectie-sectie. */
body.home section.intro.home-hero-blok,
body.home section.intro.home-media-blok,
body.home section.intro.home-hanny-blok,
body.home section.intro.home-pro-blok { padding: 0 !important; background-color: transparent !important; }
body.home section.intro.home-stappen-blok,
body.home section.intro.home-basis-blok { padding: var(--space-3xl) 0 !important; }

/* Hero: beeld links tot de rand, tekstpaneel rechts */
.ed-hero { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--color-bg-alt); align-items: stretch; }
.ed-hero-beeld { position: relative; min-height: 34rem; background: var(--color-bg-white); }
.ed-hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.ed-hero-paneel { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 5vw, 5.5rem) clamp(1.5rem, 4.5vw, 5rem); }
.ed-hero-paneel h1 { max-width: 14ch; margin-bottom: var(--space-lg); }
.ed-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-muted); }
.ed-hero-paneel .ed-lead { max-width: 34ch; margin-bottom: var(--space-xl); }
p.ed-acties { margin-bottom: 0; max-width: none; }
@media (max-width: 991px) {
  .ed-hero { grid-template-columns: 1fr; }
  .ed-hero-beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .ed-hero-beeld img { position: static; }
  .ed-hero-paneel { padding: var(--space-2xl) var(--ed-gutter); }
}

/* Collectie: de vier lijnen als kleurvlakken, strak en vlak */
.ed-collectie { background: var(--color-bg-body); }
.lijn-kiezer { gap: var(--space-md); margin: 0 !important; }
.lijn-kiezer a { border-radius: 0; aspect-ratio: 3 / 4; padding: var(--space-xl); }
.lijn-kiezer a::before { content: none; }
.lijn-kiezer .lijn-kop { top: var(--space-xl); left: var(--space-xl); right: var(--space-xl); }
.lijn-kiezer .lijn-naam { font-size: 1.875rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.lijn-kiezer .lijn-subtitel { font-size: 0.875rem; opacity: .8; }
.lijn-kiezer ul::before { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: .6; }
.lijn-kiezer .lijn-link { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 991px) { .lijn-kiezer a { aspect-ratio: auto; padding: var(--space-lg); } }

/* Zo werkt het en De basis: koppen op de editorial-schaal */
body.home .home-stappen h2, body.home .home-basis-blok h2 { margin-bottom: var(--space-lg); }

/* Uit de behandelkamer: beeld en tekst van rand tot rand.
   Zolang de foto van Hanny ontbreekt (bezoekers zien de
   placeholder niet) valt de sectie terug op een kolom. */
.ed-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-alt); align-items: stretch; }
.ed-split-beeld { position: relative; min-height: 30rem; background: var(--color-bg-white); }
.ed-split-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-split-tekst { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 5vw, 5.5rem) clamp(1.5rem, 4.5vw, 5rem); }
.ed-split-tekst blockquote { border: 0; padding: 0; margin: 0 0 var(--space-lg); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 300; color: var(--color-brand-dark); max-width: 20ch; }
.ed-split-tekst .naam { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
body:not(.logged-in) .ed-split:has(> .foto-placeholder) { grid-template-columns: 1fr; }
body:not(.logged-in) .ed-split:has(> .foto-placeholder) .ed-split-tekst { padding-block: var(--space-3xl); }
@media (max-width: 991px) {
  .ed-split { grid-template-columns: 1fr; }
  .ed-split-beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .ed-split-beeld img { position: static; }
  .ed-split-tekst { padding: var(--space-2xl) var(--ed-gutter); }
}

/* Belofte: drie rustige kolommen op een hairline */
.ed-belofte { border-top: 1px solid var(--ed-line); }
.ed-belofte ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); list-style: none; padding: 0; margin: 0; }
.ed-belofte li { margin: 0; }
.ed-belofte li > p + p { margin: 0; color: var(--color-text-muted); max-width: 32ch; }
@media (max-width: 767px) { .ed-belofte ul { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* Professionals: afsluitende band */
.ed-pro { background: var(--color-bg-alt); text-align: center; }
.ed-pro h2 { margin-bottom: var(--space-md); }
.ed-pro .ed-lead { max-width: 44ch; margin: 0 auto var(--space-xl); }

/* --- Correcties na de eerste visuele controle (15-09-2026) --- */
@media (min-width: 992px) {
  /* De accountbalk ligt nu over de headerrij. Met een eigen achtergrond
     dekte hij de bovenkant van het logo af. */
  body header .shop_topbar { background-color: transparent !important; pointer-events: none; }
  body header .shop_topbar a { pointer-events: auto; }
  /* Logo gecentreerd: het thema zet text-align: left dieper in de boom. */
  header div.header div.col-sm-10 div.holder,
  header div.header div.col-sm-10 div.wrapper { text-align: center !important; }
}

/* Accountbalk: icoon en tekst op een lijn (kapitalen maakten de rij scheef) */
header .shop_topbar a { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 1.6rem; }
header .shop_topbar .cartcountericon { display: inline-flex; align-items: center; }

/* De lijn-kiezer loopt op mobiel bewust tot de schermrand door (scroll-snap).
   De margin: 0 hierboven haalde die negatieve marges weg. */
@media (max-width: 991px) {
  .lijn-kiezer { margin-left: -15px !important; margin-right: -15px !important; }
}

/* --- 10. Zijbalk Winkel (Weergave › Widgets) ---
   De widgets krijgen dezelfde rustige opmaak als de rest: kop als
   klein kapitaal op een hairline, lijsten vlak zonder kaders. */
.widget { margin-bottom: var(--space-2xl); }
.widget > h3, .widget > .widget-title {
  font-size: 0.6875rem !important; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 400 !important; color: var(--color-text-muted) !important;
  margin: 0 0 var(--space-md) !important; padding: 0 0 var(--space-sm) !important;
  border-bottom: 1px solid var(--ed-line);
}
.widget ul { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.widget ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; }
.widget ul li::before, .widget ul li::after { content: none !important; }
.widget ul li a { display: inline-block; padding: 0.4rem 0; font-size: 0.9375rem; color: var(--color-text-main) !important; text-decoration: none !important; }
.widget ul li a:hover, .widget ul li.chosen > a { color: var(--color-brand) !important; }
.widget ul li .count { color: var(--color-text-muted); font-size: 0.8125rem; }
/* Zoekveld en knop op een rij */
.widget .woocommerce-product-search { display: flex; }
.widget .woocommerce-product-search input[type=search] {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 1px solid var(--ed-line); border-right: 0;
  border-radius: 0; background: var(--color-bg-white); padding: 0.7rem 0.85rem;
  font-family: var(--font-body); font-size: 0.9375rem;
}
.widget .woocommerce-product-search button { flex: 0 0 auto; padding: 0.7rem 1rem !important; }

/* Het driehoekje bij Shop is een Font Awesome-glyph; die zit alleen in de
   Solid-variant, dus font-weight 900 is nodig om hem te laten renderen. */
header div.navbar-collapse ul li > a span.caret::before { font-weight: 900 !important; }

/* Met zijbalk is het raster smaller: drie kolommen geeft grotere
   productfoto's en knoppen die op een regel passen. */
@media (min-width: 992px) {
  .col-md-34 ul.products.columns-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Het raster is een grid en liep onder de zwevende sorteerkeuze door. */
.woocommerce ul.products { clear: both; }

/* De zijbalk staat globaal aan (nodig voor de winkelzijbalk). Op gewone
   pagina's vult het thema de zijbalk met de demo-blokken uit
   Instellingen › Zijbalk (‘Populaire behandelingen’, ‘Hier komt tekst’).
   Die kolom verbergen we zolang er geen echte widget in staat. */
.row > .col-md-14.col-md-offset-2:not(:has(.widget)) { display: none !important; }

/* --- 11. Correcties (16-09-2026) --- */

/* Het submenu viel achter secties die zelf een z-index hebben (de home-hero
   en de hexagon-blokken op de lijn- en tekstpagina's). De header had wel
   position: relative maar geen z-index, dus won elke geplaatste sectie. */
header { position: relative; z-index: 100; }

/* De globale regel a { border-bottom: 0 !important } uit blok 1 haalde ook de
   onderrand van de stap-badge op de productpagina weg: rand van drie zijden. */
.woocommerce div.product .product_meta .tagged_as a { border-bottom: 1px solid var(--border-color) !important; }
.woocommerce div.product .product_meta .tagged_as a[href*="/ochtend"],
.woocommerce div.product .product_meta .tagged_as a[href*="/avond"] { border-bottom: 0 !important; }

/* Minder kaders in winkelwagen en afrekenen. Regel: een lijn waar iets echt
   gescheiden moet worden, geen doos in een doos. Het besteloverzicht is nu
   een ivoren paneel zonder rand, met een hairline boven het totaal. */
.wc-block-cart .wc-block-components-sidebar, .wc-block-checkout__sidebar,
.wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block { background: var(--color-bg-alt) !important; border: 0 !important; }
.wc-block-cart .wc-block-components-sidebar, .wc-block-checkout__sidebar { padding: 1.75rem !important; }
.wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block { padding: 0 !important; }
.wc-block-components-totals-wrapper { background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-cart-items-block { border-top: 0 !important; border-bottom: 0 !important; }
.wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) { border-top: 1px solid var(--ed-line) !important; }
.wc-block-cart-item__image, .wc-block-cart-item__product, .wc-block-cart-item__total { border-top: 0 !important; }
.wc-block-cart-items tr:not(:last-child) .wc-block-cart-item__image,
.wc-block-cart-items tr:not(:last-child) .wc-block-cart-item__product,
.wc-block-cart-items tr:not(:last-child) .wc-block-cart-item__total { border-bottom: 1px solid var(--ed-line) !important; }
.wc-block-components-quantity-selector, .wc-block-components-address-card { border-color: var(--ed-line) !important; }

/* --- 12. UX-aanvullingen (16-09-2026) --- */

/* Routine-strip staat nu in de samenvatting: in welke stap dit product hoort,
   zichtbaar zonder een tabblad te openen. */
.woocommerce div.product .summary .routine-strip-samenvatting { order: 4; max-width: none; margin: var(--space-lg) 0 0; }
.woocommerce div.product .summary .routine-strip-samenvatting li span { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; }
.woocommerce div.product .summary .routine-strip-samenvatting li small { font-size: 0.625rem; letter-spacing: 0.06em; }
.woocommerce div.product .summary .routine-strip-samenvatting::before { top: 1.1rem; left: 1.1rem; right: 1.1rem; }

/* Zoeken in de header */
.ed-zoek-knop { cursor: pointer; }
@media (max-width: 991px) { .ed-zoek-knop span { display: none; } }
.ed-zoek-laag { position: fixed; inset: 0; z-index: 300; background: rgba(36, 31, 26, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--ed-gutter) 0; }
.ed-zoek-laag[hidden] { display: none; }
.ed-zoek-venster { position: relative; width: 100%; max-width: 34rem; background: var(--color-bg-white); padding: var(--space-xl); }
.ed-zoek-venster form { display: flex; flex-wrap: wrap; }
.ed-zoek-venster label { flex: 1 0 100%; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.ed-zoek-venster input[type="search"] { flex: 1 1 10rem; min-width: 0; border: 1px solid var(--ed-line); border-right: 0; border-radius: 0; padding: 0.85rem 1rem; font-family: var(--font-body); font-size: 1rem; background: var(--color-bg-body); color: var(--color-text-main); }
.ed-zoek-venster button[type="submit"] { flex: 0 0 auto; }
.ed-zoek-sluit { position: absolute; top: 0.3rem; right: 0.6rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0.2rem 0.4rem; }
.ed-zoek-sluit:hover { color: var(--color-brand-dark); }

/* Hoeveel er nog tot gratis verzending ontbreekt */
.ed-verzendmelding { margin: 0 0 var(--space-md); padding: 0.75rem 0.9rem; background: var(--color-bg-white); border-left: 2px solid var(--color-brand); font-size: 0.875rem; line-height: 1.45; color: var(--color-text-main); }
.ed-verzendmelding.is-gehaald { border-left-color: #4F6B5A; }

/* Tussenkoppen in het verhaal op Over 4U: rustpunten in een lange tekst. */
.verhaal-tekst .verhaal-kop { font-size: 1.25rem; letter-spacing: 0; margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--ed-line); }
.verhaal-tekst .verhaal-kop:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* Toelichting onder een pagina-intro */
.pagina-hero .hero-noot { font-size: 0.9375rem; color: var(--color-text-muted); margin-top: var(--space-md); }

/* Conceptnotitie: alleen voor ingelogde beheerders, net als de fotoplaatshouders. */
.concept-noot { background: var(--color-bg-alt); border-left: 2px solid var(--color-brand); padding: var(--space-md) var(--space-lg); font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
body:not(.logged-in) .concept-noot { display: none !important; }

/* --- 13. Footer (16-09-2026) ---
   De vier lijnkleuren als signatuur boven de footer, in de volgorde waarin
   de routine wordt opgebouwd. De gouden band blijft voorbehouden aan de
   header, zodat boven- en onderkant elk hun eigen merkteken hebben. */
footer { border-top: 0 !important; border-image: none !important; position: relative; overflow: hidden; }
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, #9FD3E6 0 25%, #DFA1AF 25% 50%, #90BEAB 50% 75%, #C2A679 75% 100%);
}
footer > .container { position: relative; z-index: 1; }

/* Hexagon uit het logo als heel licht achtergrondmotief, alleen op desktop
   waar er ruimte naast de kolommen is. */
@media (min-width: 992px) {
  footer::after {
    content: ""; position: absolute; right: -7rem; bottom: -12rem; width: 32rem; height: 32rem;
    background: var(--color-brand); opacity: 0.12; pointer-events: none; z-index: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0.5 93.3,25.25 93.3,74.75 50,99.5 6.7,74.75 6.7,25.25' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Kolommen: meer lucht onder de kopjes, en de merkkolom iets ruimer gezet. */
footer div.column > h4 { margin-bottom: var(--space-lg); }
footer .row > div:first-child .column > p:first-of-type { font-size: 1.0625rem; line-height: 1.6; max-width: 26ch; }

/* Links krijgen een gouden onderstreping die meegroeit in plaats van een
   harde underline. */
footer .column ul li { margin-bottom: 0.1rem; }
footer .column ul li a {
  display: inline-block; padding: 0.15rem 0;
  background-image: linear-gradient(var(--color-brand), var(--color-brand));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .25s ease, color .25s ease;
}
footer .column ul li a:hover { color: var(--color-brand-dark) !important; text-decoration: none !important; background-size: 100% 1px; }

/* Social: vierkante vakjes in dezelfde vormtaal als de knoppen. */
.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--ed-line); color: var(--color-brand-dark) !important; font-size: 0.9375rem; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.footer-social a:hover { background: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; }

/* Socket rustiger */
footer div.socket { padding-top: var(--space-md); padding-bottom: var(--space-md); }
footer .socket span, footer .socket a { font-size: 0.625rem !important; letter-spacing: 0.14em; }


/* --- 13b. Footer: social iconen (16-09-2026) --- */
.footer-social a { font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; }
.footer-social a::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; font-size: 0.9375rem; line-height: 1; display: block; }
.footer-social a.fs-ig::before { content: "\f16d"; }
.footer-social a.fs-fb::before { content: "\f39e"; }


/* --- 13c. Footer: zachter merkteken (16-09-2026) --- */
@media (min-width: 992px) {
  footer::after { right: -9rem !important; bottom: -11rem !important; width: 30rem !important; height: 30rem !important; opacity: 0.055 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 100 100'%3E%3Cpolygon points%3D'50%2C2 93%2C26 93%2C74 50%2C98 7%2C74 7%2C26' fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 100 100'%3E%3Cpolygon points%3D'50%2C2 93%2C26 93%2C74 50%2C98 7%2C74 7%2C26' fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-size: contain !important; mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important; }
}

/* --- 14. Gerelateerde producten: gerichte routinesuggesties (16-09-2026) --- */
div.product section.related.products { display: none !important; }
div.product section.up-sells > h2 { font-size: 0 !important; letter-spacing: 0 !important; }
div.product section.up-sells > h2::after { content: "Maak je routine compleet"; display: block; font-size: 1.5rem; font-weight: 300; letter-spacing: -0.015em; }
div.product.product_cat-hydrate section.up-sells > h2::after { content: "Maak je Hydrate-routine compleet"; }
div.product.product_cat-calm section.up-sells > h2::after { content: "Maak je Calm-routine compleet"; }
div.product.product_cat-balance section.up-sells > h2::after { content: "Maak je Balance-routine compleet"; }
div.product.product_cat-renew section.up-sells > h2::after { content: "Maak je Renew-routine compleet"; }
div.product.product_cat-professional section.up-sells > h2::after { content: "Hoort bij deze behandeling"; }

/* volgorde van de routinesuggesties: op stap, niet willekeurig */
div.product section.up-sells ul.products li.product { order: 50; }
div.product section.up-sells ul.products li.product.product_tag-stap-1 { order: 1; }
div.product section.up-sells ul.products li.product.product_tag-stap-2 { order: 2; }
div.product section.up-sells ul.products li.product.product_tag-stap-3 { order: 3; }
div.product section.up-sells ul.products li.product.product_tag-stap-4 { order: 4; }
div.product section.up-sells ul.products li.product.product_tag-stap-5 { order: 5; }
div.product section.up-sells ul.products li.product.product_tag-stap-6 { order: 6; }
div.product section.up-sells ul.products li.product.product_tag-stap-7 { order: 7; }
div.product section.up-sells ul.products li.product.product_tag-stap-8 { order: 8; }
div.product section.up-sells ul.products li.product.product_tag-weekly { order: 20; }

/* --- 13d. Footer: onderrand social-iconen terug (globale a-regel sloopte 'm) --- */
footer .footer-social a, .footer-social a { border-bottom: 1px solid var(--ed-line) !important; }
footer .footer-social a:hover, .footer-social a:hover { border-bottom-color: var(--color-brand) !important; }

/* --- 15. Winkelwagen: cross-sells in dezelfde stijl als de rest (16-09-2026) --- */
.wp-block-woocommerce-product-collection { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--ed-line); }
.wp-block-woocommerce-product-collection > h2.wp-block-heading { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.015em; margin-bottom: var(--space-lg) !important; text-align: left; }
.wp-block-woocommerce-product-template li { text-align: left; }
.wp-block-woocommerce-product-template li .wc-block-components-product-image { margin-bottom: var(--space-sm); }
.wp-block-woocommerce-product-template li .wc-block-components-product-image img { border-radius: 0; }
.wp-block-woocommerce-product-template li h2.wp-block-post-title { text-align: left !important; font-family: var(--font-heading); font-size: 1.0625rem !important; font-weight: 400; letter-spacing: 0; margin: 0 0 0.35rem; }
.wp-block-woocommerce-product-template li h2.wp-block-post-title a { color: var(--color-text) !important; text-decoration: none !important; }
.wp-block-woocommerce-product-template li h2.wp-block-post-title a:hover { color: var(--color-brand-dark) !important; }
.wp-block-woocommerce-product-template li .wp-block-woocommerce-product-price { margin: 0 0 var(--space-sm); }
.wp-block-woocommerce-product-template li .wc-block-components-product-price { font-size: 1rem !important; color: var(--color-text); }
.wp-block-woocommerce-product-template li .wp-block-button { text-align: left; }
.wp-block-woocommerce-product-template li .wc-block-components-product-button__button {
  display: block; width: 100%; background: transparent !important; color: var(--color-brand-dark) !important;
  border: 1px solid var(--ed-line) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0.85rem 1rem !important; font-family: var(--font-heading); font-size: 0.6875rem !important;
  font-weight: 500 !important; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wp-block-woocommerce-product-template li .wc-block-components-product-button__button:hover {
  background: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; }
.wp-block-woocommerce-product-template li .added_to_cart { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- 15b. Winkelwagen: paneel op contenthoogte, één scheiding voor de cross-sells --- */
.wc-block-components-sidebar-layout .wc-block-cart__sidebar { align-self: flex-start !important; }
.wp-block-woocommerce-product-collection { border-top: 0 !important; padding-top: 0 !important; margin-top: var(--space-xl) !important; }

/* --- 16. Winkelwagen + shop: twee correcties (16-09-2026) --- */
/* de totaal-kolom was display:flex en viel daardoor uit de tabelrij, waardoor de scheidingslijn brak */
.wc-block-cart-items__row td.wc-block-cart-item__total { display: table-cell !important; vertical-align: top !important; text-align: right !important; }
/* 'Bekijk winkelwagen' kwam na ajax bovenaan de kaart terecht (order 0 in een flexkolom) */
.woocommerce ul.products li.product a.added_to_cart { order: 9; display: block; margin-top: 0.5rem; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-dark) !important; text-decoration: none !important; border-bottom: 0 !important; }
.woocommerce ul.products li.product a.added_to_cart::after { content: " \2192"; }
.woocommerce ul.products li.product a.added_to_cart:hover { color: var(--color-brand) !important; }

/* --- 17. Accountbalk: alles op één lijn (16-09-2026) --- */
header .shop_topbar .container { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: var(--space-xl); }
header .shop_topbar .container > a { display: inline-flex !important; align-items: center !important; gap: 0.5rem; line-height: 1 !important; }
header .shop_topbar .container > a i, header .shop_topbar .container > a .cartcountericon i { font-size: 0.9375rem !important; line-height: 1 !important; width: auto !important; }
header .shop_topbar .container > a span { line-height: 1 !important; }
header .shop_topbar .cartcountericon { display: inline-flex !important; align-items: center !important; height: auto !important; width: auto !important; }

/* --- 17b. Accountbalk op mobiel: alleen iconen, op één lijn --- */
@media (max-width: 991px) {
  header .shop_topbar .container { gap: 1.25rem !important; justify-content: flex-end !important; }
  header .shop_topbar .container > a { font-size: 0 !important; gap: 0 !important; white-space: nowrap; padding: 0.6rem 0.4rem !important; }
  header .shop_topbar .container > a i { font-size: 1.0625rem !important; }
  header .shop_topbar .container > a .cartcounter { font-size: 0.5625rem !important; }
}

/* --- 18. Mobiele header: alles op één regel (16-09-2026) --- */
@media (max-width: 991px) {
  header .shop_topbar { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 76px !important; display: flex !important; align-items: center !important; z-index: 30 !important; pointer-events: none !important; background: transparent !important; }
  header .shop_topbar .container { width: 100% !important; pointer-events: none !important; padding-right: 15px !important; gap: 0.75rem !important; }
  header .shop_topbar .container > a { pointer-events: auto !important; margin: 0 !important; padding: 0.5rem 0.3rem !important; }
  header .shop_topbar .container > a i { font-size: 1rem !important; }
  header div.header.full-width .col-sm-10 > .holder, header div.header.full-width .col-sm-10 > .holder > .wrapper { height: 76px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  header div.header.full-width .col-sm-10 img { max-height: 48px !important; width: auto !important; }
  header .col-sm-38.xs-absolute-overlay { height: 76px !important; overflow: visible !important; }
  header .col-sm-38.xs-absolute-overlay nav.navbar { position: static !important; }
  header .col-sm-38.xs-absolute-overlay .navbar-toggle.default { position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; float: none !important; margin: 0 !important; }
}

/* --- 19. Mobiele afwerking (16-09-2026) --- */
@media (max-width: 991px) {
  /* sectiekop met een link ernaast: onder elkaar ipv geknepen naast elkaar */
  .ed-kop { flex-direction: column !important; align-items: stretch !important; gap: 0.6rem !important; }
  /* menupaneel opent onder de header, zodat logo en iconen zichtbaar blijven */
  header .navbar-collapse.collapse.in, header .navbar-collapse.collapsing { top: 76px !important; height: calc(100vh - 76px) !important; padding-top: 2.5rem !important; }
  header:has(.navbar-collapse.collapse.in) .shop_uspbar { visibility: hidden !important; }
}
/* winkelwagen op mobiel: één doorlopende regellijn ipv drie losse stukjes */
@media (max-width: 700px) {
  .wc-block-cart-items__row > td { border-bottom: 0 !important; }
  .wc-block-cart-items__row td.wc-block-cart-item__total { display: block !important; text-align: right !important; }
}


/* --- 20. Mijn account (16-09-2026) --- */
:root { --wc-form-border-color: #E4DCCF; }

body.woocommerce-account div.col-md-32 { width: 100% !important; }

.woocommerce-account div.woocommerce { display: grid; grid-template-columns: 15rem 1fr; gap: var(--space-xl) var(--space-2xl); align-items: start; }
.woocommerce-account div.woocommerce > * { min-width: 0; }
@media (max-width: 767px) { .woocommerce-account div.woocommerce { grid-template-columns: 1fr; gap: var(--space-lg); } }

.woocommerce-MyAccount-navigation { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation::before { content: "Je account"; display: block; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 0.75rem; border-bottom: 1px solid #C9BCA6; }
.woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation ul li { list-style: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--ed-line); }
.woocommerce-MyAccount-navigation ul li::marker { content: none !important; }
.woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.85rem 0.9rem; border-left: 2px solid transparent; color: #4A3D31 !important; text-decoration: none !important; border-bottom: 0 !important; font-size: 0.9375rem; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.woocommerce-MyAccount-navigation ul li a:hover { color: var(--color-brand-dark) !important; border-left-color: var(--ed-line); background: var(--color-bg-alt); }
.woocommerce-MyAccount-navigation ul li.is-active > a { border-left-color: var(--color-brand); color: var(--color-brand-dark) !important; background: var(--color-bg-alt); }
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border-bottom: 0; margin-top: var(--space-md) !important; }
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted) !important; }

.woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-content > p:first-of-type { font-size: 1.125rem; color: #4A3D31; margin-bottom: var(--space-md); }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: var(--font-heading); font-weight: 300; font-size: 1.375rem; margin: 0 0 var(--space-md); }

.woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-error { background: var(--color-bg-alt) !important; border: 0 !important; border-left: 2px solid var(--color-brand) !important; border-radius: 0 !important; padding: var(--space-md) var(--space-lg) !important; color: #4A3D31 !important; font-size: 0.9375rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); list-style: none; }
.woocommerce-account .woocommerce-info::before, .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-error::before { content: none !important; }
.woocommerce-account .woocommerce-info .button { margin: 0 !important; }

/* --- 20b. Mijn account: formulieren, adressen, tabellen --- */
.woocommerce-account .woocommerce form .form-row, .woocommerce-account .woocommerce-form-row { margin: 0 0 var(--space-md) !important; padding: 0 !important; }
.woocommerce-account .woocommerce form label, .woocommerce-account .woocommerce-form-row label { display: block; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.woocommerce-account .woocommerce form label.checkbox, .woocommerce-account .woocommerce form label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; font-size: 0.9375rem; color: #4A3D31; }
.woocommerce-account .woocommerce input.input-text, .woocommerce-account .woocommerce textarea, .woocommerce-account .woocommerce select, .woocommerce-account .woocommerce .select2-selection { width: 100% !important; max-width: 100% !important; border: 1px solid var(--ed-line) !important; border-radius: 0 !important; background: #fff !important; padding: 0.8rem 0.9rem !important; font-size: 1rem !important; line-height: 1.4 !important; height: auto !important; box-shadow: none !important; color: #4A3D31 !important; transition: border-color .2s ease; }
.woocommerce-account .woocommerce input.input-text:focus, .woocommerce-account .woocommerce textarea:focus, .woocommerce-account .woocommerce select:focus { border-color: var(--color-brand) !important; outline: none !important; }
.woocommerce-account .woocommerce input[type="checkbox"] { width: auto !important; }
.woocommerce-account .woocommerce .form-row-first, .woocommerce-account .woocommerce .form-row-last, .woocommerce-account .woocommerce .half_width { width: 100% !important; float: none !important; }
@media (min-width: 600px) {
  .woocommerce-account .woocommerce form.woocommerce-EditAccountForm, .woocommerce-account .woocommerce form.woocommerce-address-fields .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
  .woocommerce-account .woocommerce form .form-row-wide, .woocommerce-account .woocommerce form fieldset, .woocommerce-account .woocommerce form p:not(.form-row), .woocommerce-account .woocommerce form .afreg_extra_fields, .woocommerce-account .woocommerce form > div.clear { grid-column: 1 / -1; }
}
.woocommerce-account .woocommerce form fieldset { border: 0 !important; border-top: 1px solid var(--ed-line) !important; padding: var(--space-lg) 0 0 !important; margin: var(--space-md) 0 0 !important; }
.woocommerce-account .woocommerce form fieldset legend { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 400; padding: 0; border: 0; width: auto; }
.woocommerce-account .woocommerce form .woocommerce-Button, .woocommerce-account .woocommerce form button[type="submit"] { margin-top: var(--space-sm); }
.woocommerce-account .woocommerce em { color: var(--color-text-muted); font-size: 0.8125rem; }

/* adressen */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 600px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-account .woocommerce-Addresses .u-column1, .woocommerce-account .woocommerce-Addresses .u-column2 { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce-account .woocommerce-Address { border: 1px solid var(--ed-line); padding: var(--space-lg); height: 100%; background: var(--color-bg-body); }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--ed-line); padding-bottom: 0.75rem; margin-bottom: var(--space-md); }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font-size: 1.0625rem !important; margin: 0 !important; }
.woocommerce-account .woocommerce-Address-title .edit { font-family: var(--font-heading); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-dark) !important; border-bottom: 0 !important; white-space: nowrap; }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.7; margin: 0; color: #4A3D31; }

/* tabellen (bestellingen, downloads) */
.woocommerce-account .woocommerce table.shop_table, .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.woocommerce-table { width: 100%; border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; }
.woocommerce-account .woocommerce table.shop_table thead th { font-family: var(--font-heading); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); border: 0 !important; border-bottom: 1px solid #C9BCA6 !important; padding: 0 0 0.75rem !important; text-align: left; background: transparent !important; }
.woocommerce-account .woocommerce table.shop_table td { border: 0 !important; border-bottom: 1px solid var(--ed-line) !important; padding: var(--space-md) 0 !important; background: transparent !important; font-size: 0.9375rem; }

/* --- 20c. Mijn account: clearfix-pseudo's uit het raster halen --- */
.woocommerce-account div.woocommerce::before, .woocommerce-account div.woocommerce::after { content: none !important; display: none !important; }
.woocommerce-account div.woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* --- 20d. Mijn account: dashboardkaarten --- */
.acc-verborgen { display: none !important; }
.acc-kaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 600px) { .acc-kaarten { grid-template-columns: 1fr; } }
a.acc-kaart { display: block; border: 1px solid var(--ed-line) !important; padding: var(--space-lg); text-decoration: none !important; background: var(--color-bg-body); transition: border-color .2s ease, background-color .2s ease; }
a.acc-kaart:hover { border-color: var(--color-brand) !important; background: var(--color-bg-alt); }
a.acc-kaart .acc-kaart-titel { display: block; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 400; color: #4A3D31; margin-bottom: 0.35rem; }
a.acc-kaart .acc-kaart-titel::after { content: " \2192"; color: var(--color-brand); }
a.acc-kaart .acc-kaart-tekst { display: block; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.55; }
a.acc-kaart:hover .acc-kaart-titel { color: var(--color-brand-dark); }

/* --- 20e. Mijn account: adressen en meldingen rechtzetten --- */
.woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .col2-set::before, .woocommerce-account .col2-set::after,
.woocommerce-account .u-columns::before, .woocommerce-account .u-columns::after { content: none !important; display: none !important; }
.woocommerce-account .woocommerce-Address, .woocommerce-account .woocommerce-Address-title, .woocommerce-account .woocommerce-Address address { text-align: left !important; }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { text-align: left !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
.woocommerce-account .woocommerce-Address-title::before, .woocommerce-account .woocommerce-Address-title::after { content: none !important; display: none !important; }
.woocommerce-account .woocommerce-info .button, .woocommerce-account .woocommerce-message .button { order: 2; }
.woocommerce-account .woocommerce-info::first-line { color: inherit; }

/* --- 20f. Mijn account: raster alleen met zijnavigatie, plus in- en uitlogscherm --- */
.woocommerce-account div.woocommerce { display: block; }
@media (min-width: 768px) {
  .woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 15rem 1fr; gap: var(--space-xl) var(--space-2xl); align-items: start; }
}
.woocommerce-account #customer_login { max-width: 62rem; }
.woocommerce-account #customer_login.u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { content: none !important; display: none !important; }
.woocommerce-account #customer_login > div { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce-account #customer_login h2 { font-family: var(--font-heading); font-weight: 300; font-size: 1.5rem; margin: 0 0 var(--space-md); padding-bottom: 0.75rem; border-bottom: 1px solid var(--ed-line); }
.woocommerce-account form.login, .woocommerce-account form.register { border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.woocommerce-account .woocommerce-LostPassword { margin-top: var(--space-md) !important; font-size: 0.875rem; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--color-text-muted) !important; }
.woocommerce-account .woocommerce-privacy-policy-text p, .woocommerce-account form.register > p:not(.form-row) { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; }

/* --- 21. Over 4U: het verhaal opnieuw ingedeeld (16-09-2026) --- */
.verhaal { margin: 0 auto; max-width: 38rem; }
.verhaal > * { margin-left: auto; margin-right: auto; }
.verhaal-deel { padding: var(--space-2xl) 0; position: relative; }
.verhaal-deel + .verhaal-deel { border-top: 1px solid var(--ed-line); }

@media (min-width: 1100px) {
  .verhaal { display: grid; grid-template-columns: 13rem minmax(0, 38rem); column-gap: var(--space-2xl); justify-content: center; max-width: none; }
  .verhaal > * { grid-column: 2; margin-left: 0; margin-right: 0; }
  .verhaal > .verhaal-citaat-groot, .verhaal > .verhaal-slot { grid-column: 1 / -1; }
  .verhaal > .verhaal-deel { grid-column: 1 / -1; display: grid; grid-template-columns: 13rem minmax(0, 38rem); column-gap: var(--space-2xl); justify-content: center; }
  .verhaal-deel > * { grid-column: 2; }
  .verhaal-deel > .verhaal-kop { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 7rem; align-self: start; }
  .verhaal-deel > .verhaal-citaat-groot { grid-column: 1 / -1; }
}

/* hoofdstukkop */
.verhaal h2.verhaal-kop { font-family: var(--font-heading); font-weight: 300; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--space-lg); color: #4A3D31; text-align: left; }
.verhaal h2.verhaal-kop .verhaal-nr { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; color: var(--color-brand); margin-bottom: 0.6rem; }
@media (min-width: 1100px) { .verhaal h2.verhaal-kop { font-size: 1.375rem; margin-bottom: 0; } }

/* lopende tekst */
.verhaal-tekst p { font-size: 1.0625rem; line-height: 1.85; margin: 0 0 1.15rem; color: #5A4C3E; }
.verhaal-lead { font-size: 1.25rem; line-height: 1.7; color: #4A3D31; margin: 0 0 var(--space-lg); }
.verhaal p.verhaal-losse { font-size: 1.125rem; line-height: 1.55; color: #4A3D31; margin: 0 0 0.75rem; }
.verhaal-opening { padding-bottom: var(--space-lg); }

/* citaten */
.verhaal blockquote.verhaal-citaat { border: 0 !important; background: none !important; margin: var(--space-xl) 0; padding: 0 !important; quotes: none; }
.verhaal blockquote.verhaal-citaat::before, .verhaal blockquote.verhaal-citaat::after { content: none !important; }
.verhaal blockquote.verhaal-citaat p { font-family: var(--font-heading); font-weight: 300; font-size: 1.5rem; line-height: 1.35; color: var(--color-brand-dark); margin: 0; text-align: left; letter-spacing: -0.01em; }
.verhaal blockquote.verhaal-citaat-groot { margin: var(--space-2xl) 0; padding-top: var(--space-lg) !important; border-top: 2px solid var(--color-brand) !important; }
.verhaal blockquote.verhaal-citaat-groot p { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.2; color: #4A3D31; max-width: 20ch; }

/* --- 21b. Over 4U: vragen, opsomming, slot en ondertekening --- */
.verhaal ul.verhaal-vragen { list-style: none !important; margin: var(--space-lg) 0 0 !important; padding: 0 !important; display: grid; gap: var(--space-md); }
.verhaal ul.verhaal-vragen li { list-style: none !important; margin: 0 !important; padding: 0 0 0 var(--space-md) !important; border-left: 2px solid var(--color-brand); font-family: var(--font-heading); font-weight: 300; font-size: 1.1875rem; line-height: 1.4; color: var(--color-brand-dark); }
.verhaal ul.verhaal-vragen li::before, .verhaal ul.verhaal-vragen li::marker { content: none !important; }

.verhaal ul.verhaal-daarom { list-style: none !important; margin: var(--space-lg) 0 !important; padding: 0 !important; border-top: 1px solid var(--ed-line); }
.verhaal ul.verhaal-daarom li { list-style: none !important; margin: 0 !important; padding: 0.85rem 0 0.85rem 2.25rem !important; position: relative; border-bottom: 1px solid var(--ed-line); font-size: 1.0625rem; line-height: 1.5; color: #4A3D31; }
.verhaal ul.verhaal-daarom li::marker { content: none !important; }
.verhaal ul.verhaal-daarom li::before { content: "" !important; position: absolute; left: 0; top: 1.55rem; width: 1.25rem; height: 1px; background: var(--color-brand); }

.verhaal p.verhaal-slot { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-brand-dark); margin: var(--space-2xl) 0 var(--space-xl); text-align: left; max-width: 18ch; }

.verhaal .verhaal-ondertekening { border-top: 1px solid var(--ed-line); padding-top: var(--space-lg); margin-top: var(--space-lg); }
.verhaal .verhaal-ondertekening p { margin: 0; }
.verhaal .verhaal-ondertekening .vo-naam { font-family: var(--font-heading); font-weight: 400; font-size: 1.1875rem; color: #4A3D31; margin-bottom: 0.3rem; }
.verhaal .verhaal-ondertekening .vo-rol { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); line-height: 1.8; }

/* ivoren band over de volle breedte */
.verhaal-deel-ivoor { position: relative; }
.verhaal-deel-ivoor::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: var(--color-bg-alt); z-index: 0; }
.verhaal-deel-ivoor > * { position: relative; z-index: 1; }
.verhaal-deel.verhaal-deel-ivoor { border-top: 0 !important; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.verhaal-deel-ivoor + .verhaal-deel { border-top: 0 !important; }

/* --- 21c. Over 4U: rijafstand vastzetten (een erfelijke gap van 6% blies het uit elkaar) --- */
@media (min-width: 1100px) {
  .verhaal, .verhaal > .verhaal-deel { row-gap: 0 !important; column-gap: var(--space-2xl) !important; }
}

/* --- 21d. Over 4U: de afwisselende band wit maken (de sectie zelf is al ivoor) --- */
.verhaal-deel-ivoor::before { background: var(--color-bg-body) !important; }

/* --- 21e. Over 4U: hoofdstukindex --- */
.verhaal h2.verhaal-kop { scroll-margin-top: 7rem; }
.verhaal nav.verhaal-index { margin: var(--space-xl) 0 var(--space-2xl); border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); padding: var(--space-lg) 0; }
.verhaal nav.verhaal-index .vi-label { font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-sm); }
.verhaal nav.verhaal-index ol { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: none; }
.verhaal nav.verhaal-index ol li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.verhaal nav.verhaal-index ol li::marker { content: none !important; }
.verhaal nav.verhaal-index a { display: flex; gap: 0.9rem; align-items: baseline; padding: 0.45rem 0; color: #4A3D31 !important; text-decoration: none !important; border-bottom: 0 !important; font-size: 1rem; line-height: 1.4; transition: color .2s ease; }
.verhaal nav.verhaal-index a:hover { color: var(--color-brand-dark) !important; }
.verhaal nav.verhaal-index .vi-nr { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--color-brand); flex: 0 0 1.75rem; }
@media (min-width: 1100px) { .verhaal > nav.verhaal-index { grid-column: 2; } }

/* --- WooCommerce-meldingen (klassiek + blokken) --- */
/* Klassieke meldingen: gegenereerde lichte rand/icoon overschrijven */
body .woocommerce-message, body .woocommerce-info { border-top-color: var(--color-brand) !important; }
body .woocommerce-message::before, body .woocommerce-info::before { color: var(--color-brand) !important; }
body .woocommerce-error { border-top-color: #B4533C !important; }
body .woocommerce-error::before { color: #B4533C !important; }

/* Blokmeldingen (winkelwagen, afrekenen) */
body .wc-block-components-notice-banner { background-color: var(--color-bg-white); border: 1px solid var(--border-color); border-left: 3px solid var(--color-brand); border-radius: var(--radius-default); color: var(--color-text-main); font-size: 0.9375rem; line-height: 1.5; padding: var(--space-md) var(--space-lg); gap: var(--space-md); }
body .wc-block-components-notice-banner > svg { background-color: var(--color-brand); fill: var(--color-bg-white); }
body .wc-block-components-notice-banner a, body .wc-block-components-notice-banner .wc-forward { color: var(--color-brand-dark); text-decoration: underline; }
body .wc-block-components-notice-banner.is-success, body .wc-block-components-notice-banner.is-info, body .wc-block-components-notice-banner.is-warning, body .wc-block-components-notice-banner.is-error, body .wc-block-components-notice-banner.is-default { background-color: var(--color-bg-white); border-color: var(--border-color); }
body .wc-block-components-notice-banner.is-success { border-left-color: var(--color-brand); }
body .wc-block-components-notice-banner.is-success > svg { background-color: var(--color-brand); }
body .wc-block-components-notice-banner.is-info { border-left-color: var(--color-brand-light); }
body .wc-block-components-notice-banner.is-info > svg { background-color: var(--color-brand-light); }
body .wc-block-components-notice-banner.is-warning { border-left-color: #C8962E; }
body .wc-block-components-notice-banner.is-warning > svg { background-color: #C8962E; }
body .wc-block-components-notice-banner.is-error { border-left-color: #B4533C; }
body .wc-block-components-notice-banner.is-error > svg { background-color: #B4533C; }

/* Foutmeldingen bij invulvelden (blokken) */
.wc-block-components-validation-error, .wc-block-components-validation-error > p { color: #B4533C; }
.wc-block-components-text-input.has-error input, .wc-block-components-combobox.has-error input, .wc-block-components-select-input.has-error select, .wc-block-components-country-input.has-error input { border-color: #B4533C !important; }
.wc-block-components-text-input.has-error label, .wc-block-components-combobox.has-error label { color: #B4533C; }

/* ================================================================
   4U - UX-ronde 17-09-2026
   1. Leesbaarheid: kleine teksten min. 12px, donkerder tint voor kleine tekst
   2. Collectiekaarten homepage: geen leeg vlak, mobiel bolletjes onder de slider
   3. Routinekaarten lijnpagina: hele kaart klikbaar naar het product
   4. Productpagina mobiel: tabs op meerdere regels + vaste koopbalk
   ================================================================ */

/* --- 1. Leesbaarheid --- */
:root { --color-text-muted: #7A6550; --color-gold-tekst: #7D5F2A; }
.ed-eyebrow, .ed-split-tekst .naam { font-size: 0.75rem !important; color: var(--color-gold-tekst) !important; }
.ed-split-tekst .naam { color: var(--color-text-muted) !important; }
body .tekstlink, body .home-basis-link, body .home-hero-acties .tekstlink { font-size: 0.75rem !important; color: var(--color-gold-tekst) !important; }
.lijn-kiezer .lijn-link { font-size: 0.75rem !important; }
body .knop, body a.button, body button.button, body .single_add_to_cart_button { font-size: 0.75rem !important; }
.usp-balk li { font-size: 0.6875rem !important; letter-spacing: 0.1em !important; }
@media (min-width: 768px) and (max-width: 1199px) { .usp-balk li { letter-spacing: 0.06em !important; } }
header .shop_topbar a, header .shop_topbar .ed-zoek-knop span { font-size: 0.75rem !important; }
footer h4 { font-size: 0.75rem !important; }
@media (min-width: 992px) {
  header .menu-item > a { font-size: 0.75rem !important; }
}

/* --- 2. Collectiekaarten --- */
.lijn-kiezer a { aspect-ratio: auto !important; justify-content: flex-start !important; gap: var(--space-xl); min-height: 22rem; }
.lijn-kiezer .lijn-kop { position: static !important; }
.lijn-kiezer .lijn-inhoud { display: flex; flex-direction: column; flex: 1 1 auto; }
.lijn-kiezer .lijn-inhoud > p:last-child { margin-top: auto; padding-top: var(--space-md); }
.lijn-kiezer-dots { display: none; }
@media (max-width: 991px) {
  .lijn-kiezer a { min-height: 0; }
  .lijn-kiezer-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-md); }
  .lijn-kiezer-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--border-color); transition: background .2s, width .2s; }
  .lijn-kiezer-dots span.actief { width: 20px; background: var(--color-brand); }
}

/* --- 3. Routinekaarten klikbaar --- */
.routine-opbouw li:has(h3 a) { position: relative; transition: box-shadow .2s, transform .2s; }
.routine-opbouw li h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.routine-opbouw li:has(h3 a):hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.routine-opbouw li:has(h3 a):focus-within { outline: 2px solid var(--lijn-main); outline-offset: 2px; }
.routine-opbouw li h3 a:focus-visible { outline: none; }
.routine-opbouw li:has(h3 a)::after { content: "Bekijk product \2192"; margin-top: auto; padding-top: var(--space-sm); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-tekst); }

/* --- 4. Productpagina mobiel --- */
.ed-koopbalk { display: none; }
@media (max-width: 767px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: wrap !important; overflow-x: visible !important; column-gap: 1rem !important; row-gap: 0.25rem !important; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.5rem 0 !important; }
  .ed-koopbalk { display: flex; align-items: center; gap: var(--space-md); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 0.75rem 15px calc(0.75rem + env(safe-area-inset-bottom)); background: var(--color-bg-white); border-top: 1px solid var(--border-color); box-shadow: 0 -6px 24px rgba(138, 115, 92, 0.12); transform: translateY(110%); transition: transform .25s ease; }
  .ed-koopbalk.is-zichtbaar { transform: none; }
  .ed-koopbalk-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .ed-koopbalk-titel { font-size: 0.875rem; color: var(--color-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-koopbalk-prijs { font-size: 1rem; color: var(--color-brand-dark); }
  .ed-koopbalk-prijs small, .ed-koopbalk-prijs .woocommerce-price-suffix { font-size: 0.75rem; }
  body .ed-koopbalk .ed-koopbalk-knop { flex: 0 0 auto; margin: 0; padding: 0.8rem 1.25rem !important; }
  body.ed-koopbalk-actief { padding-bottom: 80px; }
}

/* --- 5. Foto's Hanny: gezicht in beeld bij bijsnijden --- */
.home-hanny-beeld img { object-position: 50% 15% !important; }
.pagina-beeld.pagina-beeld-portret { aspect-ratio: 4 / 5; flex-basis: 32%; }
.pagina-beeld-portret img { object-position: 50% 15%; }
@media (max-width: 991px) {
  .pagina-beeld.pagina-beeld-portret { max-width: 24rem; }
}

/* --- 6. 404-pagina: verder helpen --- */
.ed-404 { max-width: 32rem; margin: var(--space-lg) auto var(--space-2xl); }
.ed-404 form { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.ed-404 input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 0.8rem 1rem; border: 1px solid var(--border-color); background: var(--color-bg-white); font-family: var(--font-body); }
.ed-404 form .knop { margin: 0; }
.ed-404-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md) var(--space-xl); }

/* --- 22. Opmerkingen klant (18-09-2026) --- */

/* 22a. Smooth scroll voor ankerlinks (o.a. de hoofdstukindex op Over 4U). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 22b. Over 4U: het grote citaat binnen een hoofdstuk liep met zijn bovenlijn
   dwars door de meescrollende kop links (die staat sticky in kolom 1). Binnen
   een hoofdstuk blijft het citaat nu in de tekstkolom; het losse citaat boven
   de hoofdstukindex blijft wel over de volle breedte staan. */
@media (min-width: 1100px) {
  .verhaal > .verhaal-deel > .verhaal-citaat-groot { grid-column: 2; }
}

/* 22c. Afsluitende CTA's gecentreerd, gelijk aan .ed-pro op de home. */
.over-cta-blok .container { text-align: center; }
.over-cta-blok .intro-tekst { max-width: 48ch; margin-left: auto; margin-right: auto; }
.over-cta-blok .knoppen-rij { justify-content: center; }
.beh-pro-blok .container { text-align: center; }
.beh-pro-blok .home-pro { flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); background: transparent !important; }
.beh-pro-blok .home-pro > div { max-width: 48ch; }
.beh-pro-blok .home-pro p { margin: 0; }

/* 22d. Productpagina: het USP-zeshoekje werd platgedrukt door de min-width van
   14px uit het thema (.woocommerce .product-usps li i). */
.woocommerce .product-usps li i.fa-check { min-width: 0; width: 0.6rem; height: 0.6rem; }

/* 22e. Mobiel: de vier lijnvlakken in de swipe even hoog. De aspect-ratio op de
   link liet het vlak met de meeste tekst uitlopen; nu bepaalt de rij de hoogte
   en houdt min-height de verhouding overeind als de tekst kort is. */
@media (max-width: 991px) {
  .lijn-kiezer li { display: flex; }
  .lijn-kiezer li > a { width: 100%; aspect-ratio: auto; min-height: 20rem; }
}

/* 22f. Mobiel: foto Hanny op de home over de volle breedte. De max-width kwam
   nog uit de oude flex-layout van .home-hanny. */
@media (max-width: 991px) {
  .ed-split-beeld.home-hanny-beeld { max-width: none; }
}


/* --- 23. Feedback Hanny (29-09-2026) --- */

/* 23a. Shop: sfeerbeeld boven de lijnfilter (eigen HTML in de Shop-pagina) */
.shop-sfeer { position: relative; width: 100%; aspect-ratio: 16 / 6; overflow: hidden; margin: 0 0 var(--space-xl); background: var(--color-bg-alt); }
.shop-sfeer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
@media (max-width: 991px) { .shop-sfeer { aspect-ratio: 16 / 7; margin-bottom: var(--space-lg); } }

/* 23b. Professional-producten zijn voor B2C verborgen (B2B › Products Visibility).
   De filter "Stap in de routine" telt ze wel mee; voor bezoekers zonder account het filteritem verbergen. */
body:not(.logged-in) .widget_layered_nav li:has(a[href*="filter_stap=professional"]) { display: none; }

/* 23c. Huidproblemen: ruimte tussen de kleurvlakken en de toelichting */
.hp-problemen .lijn-kiezer { margin-bottom: var(--space-xl) !important; }

/* ==========================================================================
   Aanpassingen 1 okt 2026 (feedback Hanny, mail 30-09)
   ========================================================================== */

/* --- Lijn-tegels (Huidproblemen + home): alle vier altijd even groot --- */
.lijn-kiezer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lijn-kiezer > li { display: flex; min-width: 0; }
.lijn-kiezer > li > a { flex: 1 1 auto; width: 100%; }
.lijn-kiezer .lijn-naam { overflow-wrap: break-word; hyphens: auto; }

/* --- Header opgefrist --- */
/* Vier lijnkleuren als dun lijntje bovenaan (zelfde als boven de footer) */
header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 40;
  background: linear-gradient(90deg, #9FD3E6 0 25%, #DFA1AF 25% 50%, #90BEAB 50% 75%, #C2A679 75% 100%);
  pointer-events: none;
}

/* Winkelmand-teller als gouden badge */
header .shop_topbar .cartcountericon { position: relative; }
@media (min-width: 992px) { header .shop_topbar .cartcountericon { margin-right: 0.65rem; } }
header .shop_topbar .cartcountericon .counter {
  top: -8px !important; right: -11px !important; left: auto !important;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px !important;
  background: var(--color-brand) !important;
  color: #fff !important;
  font-size: 0.5625rem !important; font-weight: 500;
  line-height: 17px; letter-spacing: 0; text-align: center;
  box-sizing: border-box;
}
header .shop_topbar .container > a i { color: var(--color-brand) !important; }

@media (min-width: 992px) {
  /* Iconenbalk verticaal gecentreerd naast het logo, uitgelijnd met de navigatie */
  body header .shop_topbar {
    top: 0 !important;
    height: 10rem;
    display: flex; align-items: center;
  }
  body header .shop_topbar .container {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--ed-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--ed-gutter) !important;
    gap: 2.25rem;
  }

  /* Zoeken als zoekveld links, in balans met de knoppen rechts */
  body header .shop_topbar .container > #ed-zoek {
    order: -1;
    margin: 0 auto 0 0 !important;
    min-width: 16rem;
    padding: 0.85rem 1.1rem !important;
    gap: 0.75rem !important;
    background: var(--color-bg-white);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-default);
    color: var(--color-text-muted) !important;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  body header .shop_topbar .container > #ed-zoek span { font-size: 0 !important; }
  body header .shop_topbar .container > #ed-zoek span::after { content: "Zoek een product"; font-size: 0.6875rem !important; }
  body header .shop_topbar .container > #ed-zoek:hover {
    border-color: var(--color-brand-light) !important;
    box-shadow: 0 6px 20px rgba(138, 115, 92, 0.10);
  }

  /* Winkelwagen en Mijn account: fijne gouden onderstreping bij hover */
  body header .shop_topbar .container > a:not(#ed-zoek) {
    position: relative;
    margin-left: 0 !important;
    padding: 0.4rem 0 !important;
  }
  body header .shop_topbar .container > a:not(#ed-zoek)::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--color-brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
  }
  body header .shop_topbar .container > a:not(#ed-zoek):hover::after { transform: scaleX(1); }
}

/* --- Footer: inschrijfformulier inspiratiemails (Sender.net, 16-10-2026) --- */
/* Blok staat als eerste footerblok (Instellingen › Onderkant), volle breedte boven de 4 kolommen */
footer .row > [class*="col-"]:has(> .footer-inspiratiemails) {
  width: 100%;
  float: none;
  clear: both;
}
footer .footer-inspiratiemails {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-color);
}
footer .footer-inspiratiemails > h4 {
  grid-column: 1;
}
footer .row > div:first-child .column.footer-inspiratiemails > p:first-of-type {
  grid-column: 1;
  max-width: 30rem;
  margin-top: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-text-main);
}
footer .footer-inspiratiemails > .sender-form-field {
  grid-column: 2;
  grid-row: 1 / span 2;
}
/* Bestaande regel voor de eerste footerkolom ("4U Skincare") volgt mee naar kolom 2 */
footer .row > div:has(> .footer-inspiratiemails) + div .column > p:first-of-type {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 26ch;
}
@media (max-width: 767px) {
  footer .footer-inspiratiemails {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  footer .footer-inspiratiemails > .sender-form-field {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-md);
  }
}

/* --- Shop: knop 'Professional' alleen tonen aan professionals (en beheerders) --- */
.shop-lijnen li.lijn-professional { display: none; }
body.role-professional .shop-lijnen li.lijn-professional,
body.role-administrator .shop-lijnen li.lijn-professional,
body.role-saloon_owner .shop-lijnen li.lijn-professional,
body.role-shop_manager .shop-lijnen li.lijn-professional { display: block; }