/** Shopify CDN: Minification failed

Line 96:33 Expected ":"

**/
#PBarNextFrameWrapper{

  display:none;

}

.u_pro_gallery_wrapper_row {

    display: flex;

    gap:10px;

}

.u_pro_gallery_left {

    width: calc(10% - 5px);

}

.u_pro_gallery_right {

    width: calc(90% - 5px);

}

.u_pro_slider_nav_img_size {

    width: 100%;

      display: block;

}

.u_pro_slider_for_img_size {

    width: 100%;

      display: block;

    /* height: 435px;

    object-fit: cover; */

}

.u_pro_slider_nav_block {

    padding-bottom: 15px;

}

.u_pro_slider_nav_block.slick-current.slick-active .u_pro_slider_nav_img_size{

  border:1px solid black;

}

.u_pro_gallery_wrapper .slick-arrow.slick-disabled{

    opacity: .5;

    cursor: not-allowed;

    }

    .u_clr_option_img{

          width: 19px !important;

    height: 19px !important;

       transition: 0.3s all ease-in-out !important;

    border-radius: 50%;

      cursor:pointer;

      object-fit: contain;

          position: unset !important;

    }

    .u_clr_var_row {

    display: flex;

    align-items: center;

    justify-content: flex-start;s

    }

    .card-information {

    display: flex;

    align-items: center;

    justify-content: space-between;

    }

    span.u_more_stext

 {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

        margin-left: 10px;

            color: black;

}

    .v-variant-swatches

 {

        position: relative;

    z-index: 9999999999999;

    padding-top: 5px;

    /* height: 45px;

    display: -webkit-box !important;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden; */

}



.u_clr_option_img.u_custom_active_addon {

    box-shadow: 0 0 0px 2px white, 0 0 0 3px black !important;

}

.u_card_pro_link

 {

    text-decoration: none;

    display: block;

 }

 .u_clr_option_img:hover {

    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ddd;

}

.u_pro_clr_img_cont {

    width: 19px;

    height: 19px;

    margin-right:-5px;

}

.u_pro_slider_for_block {

    margin:0 5px;

}

.u_pro_gallery_right .slick-dots{

    display:flex;

    margin:0;

    padding:20px 0;

            justify-content: center;

  }

   .u_pro_gallery_right .slick-dots li {

  list-style: none;

  margin: 3px;

  display: inline-flex;

}



.u_pro_gallery_right .slick-dots li button {

  width: 5px !important;

  height: 5px !important;

  padding: 0;                /* remove default padding */

  border: none;

  border-radius: 50%;

  background: black;  /* or your color */

  font-size: 0;

  cursor: pointer;

   opacity: .4;

       transition: all .3s ease-in-out;

}

.u_pro_gallery_right .slick-dots li button:hover {

opacity:1;

}



.u_pro_gallery_right .slick-dots li.slick-active button {

  background: #fff; /* active state */

      border: thin solid #000;

}

.u_pro_slider_for_arrows {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

}

.u_pro_slider_nav_left.slick-arrow {

    position: absolute;

    left: -18px;

    cursor:pointer;

        height: 26px

 }

 .u_pro_slider_nav_right.slick-arrow {

    position: absolute;

    right: -18px;

    cursor:pointer;

        height: 26px

}

.u_slider_cen

 {

    text-align: center;

}

.u_pro_slider_for_arrows {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    position: relative;

}

.unset_tran{

  transform:unset !important;

}

.swatch

 {

    width: 35px !important;

    height: 35px !important;

 }

 .card__heading a.full-unstyled-link {

    display: -webkit-box !important;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

        min-height: 38px;

 }

 .u_feta_col_title {

    font-family: Poppins, sans-serif;

    font-weight: 400;

    font-style: normal;

    display: -webkit-box !important;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

 }

 .u_mb_more{

  display:none;

 }

 .card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note){

  margin:0 !important;

 }

 .u_feta_coll_row {

    display: flex;

    align-items: center;

    justify-content: space-between

 }

 .product-form__input--swatch .u_pro_swatch,.u_pro_swatch_size{

  width:55px !important;

  border-radius:0 !important;

      display: block;

    position: relative;

    overflow: hidden;

 }

  .swatch-input__label{

    border:1px solid transparent;

    outline: unset !important;

     --swatch-input--border-radius: 0 !important;

  }

 .swatch-input__input:active+.swatch-input__label, .swatch-input__input:checked+.swatch-input__label,.swatch-input__input:hover+ .swatch-input__label  {

    outline:unset !important;

    border-radius:0 !important;

    border:1px solid black;

     --swatch-input--border-radius: 0 !important;

}



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

    .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {

        padding: 0 15px;

    }

}

@media (max-width:768px){

  .price__container{

    margin-top: 5px !important;

}

span.u_more_stext{

    margin-left: 0;

 }

   .u_mb_more{

  display:block;

 }

 .u_dk_more{

  display:none;

 }

   .card__heading a.full-unstyled-link {

        min-height: 24px;

 }

    product-info{

        padding-top:0 !important;

    }
}
/* ^ [2026-07-06 fix] ontbrekende sluit-accolade van @media (max-width:768px) */

/* ── [2026-07-06] Maatknoppen: vierkant behouden, tekst exact gecentreerd ── */
fieldset.product-form__input--pill input[type='radio'] + label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  min-width: 4.4rem;
  min-height: 3.2rem;
  padding: 0 1.2rem !important;
  box-sizing: border-box;
}

/* ── [2026-07-06] Minder witruimte tussen maat-knoppen en koopknop ── */
.product__info-container product-form {
  margin-top: 8px !important;
}

/* ---- Unisex kleurpalet — toegevoegd 2026-07 ---- */
:root {
  /* fundament */
  --wb-canvas:       #FFFFFF;
  --wb-surface:      #F2F4F5;
  --wb-surface-deep: #E4E7E9;
  /* tekst */
  --wb-ink:          #0F1214;
  --wb-ink-soft:     #31363A;
  --wb-muted:        #61686D;
  /* lijnen */
  --wb-rule:         #D7DBDE;
  --wb-rule-input:   #868D92;
  /* betekenis */
  --wb-accent:       #17456F;
  --wb-sale:         #C8102E;
  --wb-ok:           #0E7350;
}
/* kortingsprijs — vervangt het felle #FF0000 */
.price--on-sale .price-item--sale,
.price__sale .price-item--regular { color: var(--wb-sale); }
/* Alleen in de SALE-context is --regular de doorgestreepte oude prijs; daar hoort
   grijs. Buiten de sale is --regular de enige, belangrijkste prijs en moet die
   gewoon de tekstkleur van het thema hebben (stond eerder onbedoeld grijs). */
.price__sale s,
.price--on-sale .price-item--regular { color: var(--wb-muted); }
.price:not(.price--on-sale) .price-item--regular { color: rgb(var(--color-foreground)); }
/* voorraad- en verzendmeldingen */
.product__inventory,
.shipping-note { color: var(--wb-ok); }
/* velden en selectievakjes: rand haalt 3:1 */
input[type="text"], input[type="email"], select, textarea,
.field__input, .select__select { border-color: var(--wb-rule-input); }
/* zichtbare focus voor toetsenbordgebruik */
:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
/* roze en bonte restanten uit apps overschrijven.
   :root:root = hogere specificiteit dan het <style>-blok dat Sticky Cart by Qikify
   later in de pagina injecteert (zelfde :root, wint anders op documentvolgorde).
   Geen !important nodig. */
:root:root {
  --sb-primary-color:         #0F1214;  /* was #D8B4C2 */
  --sc-cart-counter-bg-color: #C8102E;  /* was #E75F33 */
  --sb-countdown-bg-color:    #0F1214;  /* was #18B918 */
  --qsc2-error-text-color:    #C8102E;  /* was #F32C2C */
}

/* wb-galerij-miniaturen-links */
/* Productgalerij, gemeten op het voorbeeld bij 1440px: miniaturen 76x76 in een
   staande kolom links, 19px tussen de miniaturen, 17px tot de grote foto, en een
   vierkante hoofdfoto die de uitsnede vult. Mobiel blijft ongewijzigd. */
.product__media-wrapper .product__media-item .product__media,
.product__media-wrapper .thumbnail-list__item .thumbnail {
  aspect-ratio: 1 / 1;
}

.product__media-wrapper .product__media img,
.product__media-wrapper .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product__media-wrapper .product__media-item .product__media,
.product__media-wrapper .product__media-item .media {
  padding-bottom: 0 !important; /* Dawn zet hier de hoogte van de bronfoto; die wint anders van aspect-ratio */
  height: auto;
}

@media screen and (min-width: 990px) {
  .product__media-wrapper media-gallery {
    display: flex;
    align-items: flex-start;
    gap: 17px;
  }
  .product__media-wrapper media-gallery.product__column-sticky {
    position: sticky;
    top: 3rem;
    align-self: flex-start;
  }
  .product__media-wrapper media-gallery > slider-component.thumbnail-slider {
    order: -1;
    flex: 0 0 76px;
    display: block;
    margin: 0;
    padding: 0;
  }
  .product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .product__media-wrapper .thumbnail-slider .thumbnail-list {
    display: grid;
    grid-template-columns: 76px;
    gap: 19px;
    max-height: none;
    overflow: visible;
  }
  .product__media-wrapper .thumbnail-slider .thumbnail-list__item {
    width: 76px;
    max-width: 76px;
    scroll-snap-align: none;
  }
  .product__media-wrapper .thumbnail-slider .slider-button {
    display: none;
  }
}

/* Bespaar-badge linksboven op de hoofdfoto, zoals in het voorbeeld.
   Let op: hier NOOIT position: relative op media-gallery zetten. Dawn geeft die
   kolom de klasse product__column-sticky met position: sticky, en een eigen
   position-regel overschrijft dat, waardoor de foto's niet meer meescrollen.
   Een sticky element is zelf al een houder voor absolute kinderen. */
.product__media-wrapper media-gallery:not(.product__column-sticky) {
  position: relative;
}
.wb-galerij-bespaar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
}
@media screen and (min-width: 990px) {
  .wb-galerij-bespaar {
    left: 105px; /* 76px miniaturenkolom + 17px tussenruimte + 12px inspringing */
  }
}

/* wb-opmaak-voorbeeldpagina */
/* Opmaak overgenomen van de voorbeeldpagina, gemeten bij 1440px breed.
   Het lettertype blijft bewust dat van WingBee (keuze Youri 17-09-2026);
   alleen grootte, gewicht, spatiëring, kleur en vorm zijn gelijkgetrokken. */

/* Koopknop: zwart vlak, wit, 12px/700, geen ronding, 21px binnenruimte. */
.product-form__submit,
.product-form__buttons .button,
.shopify-payment-button__button--unbranded {
  background: #000000;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid transparent;
  padding: 21px;
  min-height: 61px;
}

.product-form__submit:hover,
.product-form__buttons .button:hover {
  background: #1a1a1a;
  color: #FFFFFF;
}

/* Maatknoppen: 12px/400, 0,3px spatiëring, 7px 15px, recht, witte vulling. */
.product-form__input--pill input[type='radio'] + label,
.product-form__input .select__select,
variant-radios label,
variant-selects label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  padding: 7px 15px;
  border-radius: 0;
  background: #FFFFFF;
  min-width: 40px;
}

/* Label boven de opties: 12px/600 in hoofdletters, zoals "KLEUR: ABRIKOOS". */
.product-form__input .form__label,
.product__info-container .form__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
}

/* Accordeon-koppen ("BESCHRIJVING"): 12px/600 in hoofdletters, 15px boven en onder. */
.product__accordion summary,
.product__info-container .accordion__title,
.ss-tabs-block .tab-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  padding: 15px 0;
}

/* Regels onder de prijs ("vóór 23:00", "geld-terug-garantie"): 13px/600, #111111. */
.wb-trust .wb-trust__text,
.wb-usp .wb-usp__text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--wb-ls);
  color: #111111;
}

/* Aankondigingsbalk: 13,77px/700 met 2,754px spatiëring, wit op zwart. */
.announcement-bar__message,
.announcement-bar p {
  font-size: 13.77px;
  font-weight: 700;
  letter-spacing: 2.754px;
  text-transform: uppercase;
}

/* Producttitel: 28px/700 in hoofdletters. */
.product__info-container .product__title,
.product__info-container .product__title h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

/* wb-galerij-meescrollen */
/* De productgalerij komt niet uit Dawn maar uit een app: .u_pro_gallery_wrapper met
   .u_pro_gallery_left (miniaturen in een slick-slider) en .u_pro_gallery_right.
   Regels op media-gallery raken die galerij dus niet.
   Gemeten op de live site op 17-09-2026: met deze regel blijft de galerij op 48px onder
   de bovenkant staan zolang het productblok loopt, en laat hij daarna netjes los.
   NOOIT align-self: flex-start op .product__media-wrapper zetten: dan krimpt de kolom tot
   de hoogte van de galerij en heeft sticky geen ruimte meer.
   De maat en tussenruimte van de miniaturen worden door de slick-slider van de app
   berekend; die niet met CSS overschrijven, anders klopt de hoogte van de slider niet meer. */
@media screen and (min-width: 990px) {
  .product__media-wrapper .u_pro_gallery_wrapper {
    position: sticky;
    top: 48px;
  }
}

/* wb-prijskleuren */
/* Prijsregel exact als op de voorbeeldpagina, gemeten bij 1440px:
   oude prijs #838383 doorgestreept 18px/600, verkoopprijs #FF0000 24px/700,
   en één badge: de groene pil #16A41D uit snippets/bespaar-badge.liquid.

   !important is hier nodig, niet luiheid: component-price.css zet
   .product__info-wrapper span.price-item.price-item--sale.price-item--last op 14px/#C8102E
   en theme.liquid heeft een inline regel met !important op .product-price-container.
   Zonder !important verliezen deze regels van beide. */
.product__info-wrapper span.price-item.price-item--sale,
.product__info-container .price__sale .price-item--sale,
.product-price-container .price__sale .price-item--sale {
  color: #FF0000 !important;
  /* Iets kleiner dan de voorbeeldpagina (24px), op verzoek. */
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

/* Zwaardere selector dan de inline regel .product-price-container .price__sale
   .price-item--regular met font-size: 1.4rem !important. */
.product-price-container .price__sale s.price-item--regular,
.product__info-wrapper .price__sale s.price-item--regular,
.product__info-container .price__sale .price-item--regular {
  color: #838383 !important;
  /* Meebewogen met de verkoopprijs: was 18px. */
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: line-through;
  text-decoration-color: #838383;
}

/* De eigen kortingsbadge van het thema staat naast de groene pil en toont hetzelfde
   bedrag twee keer. Alleen de pil blijft staan. */
/* Een inline regel elders zet .badge.price__badge-sale met !important op zichtbaar;
   daarom hier vier klassen, zodat deze regel wint ongeacht de volgorde. */
.product-price-container .price .badge.price__badge-sale,
.product__info-wrapper .price .badge.price__badge-sale {
  display: none !important;
}

.product__info-container .price__container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* wb-lettergroottes */
/* Lettergroottes één op één met de voorbeeldpagina, gemeten bij 1440px op 17-09-2026.
   Het lettertype zelf blijft dat van WingBee; alleen grootte, gewicht, spatiëring en
   kleur van deze onderdelen zijn gelijkgetrokken. */

/* Sterrenregel boven de titel: 14px/300, spatiëring 0,45px, #777777. */
.product__info-container .wb-sterrenbeoordeling__text {
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
  color: #777777 !important;
}

/* Staffelkorting. */
.wb-staffel .wb-staffel__kop {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.08px;
  color: #222222;
}

.wb-staffel .wb-staffel__aantal {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #222222;
}

.wb-staffel .wb-staffel__korting {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.96px;
  color: #333333;
}

.wb-staffel .wb-staffel__voetnoot {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.88px;
  color: #666666;
}

/* Beoordelingen-overzicht: kop 26px/500, cijfer 44px/500. */
.wb-beoordelingen .wb-beoordelingen__kop {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: normal;
  color: #111111;
}

.wb-beoordelingen .wb-beoordelingen__cijfer {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: var(--wb-ls);
  color: #111111;
}

/* Kop "Styled on socials": 24px/400 met 5px spatiëring, #111111. */
.video-reviews__heading,
.video-reviews h2,
.shopify-section .video-reviews__kop {
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
  color: #111111 !important;
}

/* Beschrijvingstekst in de tabs: 12px/300 met 0,45px spatiëring. */
.ss-tabs-block .tab-content,
.ss-tabs-block .tab-content p,
.ss-tabs-block .tab-content li,
.product__description p,
.product__description li {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: var(--wb-ls);
}

/* wb-producttitel
   De producttitel stond op 20px/500 door twee regels in sections/main-product.liquid
   (de aanpassing van 04-08-2026) en een custom_css-regel in het producttemplate.
   De voorbeeldpagina gebruikt 28px, gewicht 700, regelhoogte 34px en hoofdletters.
   Deze regels staan bewust zwaarder (drie klassen) zodat ze zonder het thema-bestand
   te wijzigen winnen; het lettertype blijft dat van WingBee. */
.product__info-wrapper .product__info-container .product__title h1,
.product__info-wrapper .product__info-container h1.product__title,
.product__info-container .product__title h1 {
  /* Kleiner dan de voorbeeldpagina (28px/34px), op verzoek. */
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}

/* wb-reviewkaarten
   Lettergroottes van de reviewkaarten gelijkgetrokken met de voorbeeldpagina:
   naam 13px/500, datum 12px/300, tekst 14px/300, alles met var(--wb-ls) letterafstand. */
.wb-rc__card .wb-rc__naam {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: var(--wb-ls) !important;
  color: #111111 !important;
}

.wb-rc__card .wb-rc__quote {
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
  line-height: 1.6 !important;
  color: #555555 !important;
}

.wb-rc__card .wb-rc__datum,
.wb-rc__card .wb-rc__date {
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
  color: #999999 !important;
}

/* wb-tabtekst
   De tekst in de uitklapbare tabbladen (beschrijving, verzending, retour) stond op
   gewicht 400 met 0.6px letterafstand. De voorbeeldpagina gebruikt 12px, gewicht 300
   en var(--wb-ls). De klassenaam bevat het sectie-ID, daarom een gedeeltelijke match: zo
   werkt de regel op alle drie de producttemplates. */
div[class*="answer-template--"] p,
div[class*="answer-template--"] li,
div[class*="answer-template--"] span {
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* wb-reviewkaarten-lettertype
   De reviewcarrousel zet zelf een Inter-stack. Nu het thema Outfit gebruikt, volgt de
   kaart het thema-lettertype, net als de rest van de pagina. */
.wb-rc__card,
.wb-rc__card .wb-rc__naam,
.wb-rc__card .wb-rc__quote,
.wb-rc__card .wb-rc__datum {
  font-family: var(--font-body-family) !important;
}


/* wb-letterafstand-variabele
   De voorbeeldpagina rekent de letterafstand in em: op de brede weergave komt dat neer
   op 0,45px, op de telefoon op 0,414px. Beide waarden staan hier als variabele, zodat
   elke regel hieronder automatisch meebeweegt met het schermformaat. */
:root { --wb-ls: 0.45px; }

@media screen and (max-width: 749px) {
  :root { --wb-ls: 0.414px; }
}

/* wb-typografie-uniform
   Alle teksten in dit thema volgen de twee lettertypes van de voorbeeldpagina:
   Tenor Sans voor koppen, Outfit voor de rest. Losse lettertypes uit secties en apps
   (Poppins, Libre Baskerville, Epilogue, Chakra Petch, Tahoma, Circular) worden hier
   teruggezet. De letterafstand gaat van 0,6px naar 0,45px, de waarde van het voorbeeld. */
body {
  letter-spacing: var(--wb-ls);
}

[class*="header-menu-link-"],
.header__menu-item,
[class*="footer-menu-link-"],
[class*="footer-bottom-link-"],
[class*="proof-text-"],
[class*="proof-text-"] *,
.rbp__body,
.cart-drawer-count,
.qsc2-stickybar,
.qsc2-stickybar * {
  font-family: var(--font-body-family) !important;
}

[class*="footer-menu-heading-"],
.rbp__heading,
.drawer__heading,
.reco-title,
[class*="scalechart"] h2,
.scalechart-modal h2 {
  font-family: var(--font-heading-family) !important;
}

/* Hoofdmenu: Outfit 16px, gewicht 300, 3,2px letterafstand, hoofdletters. */
[class*="header-menu-link-"],
.header__menu-item {
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 3.2px !important;
  text-transform: uppercase !important;
}

/* Voettekst: kop Tenor Sans 14,4px/400/4,32px, links Outfit 15,3px/300/0,45px. */
[class*="footer-menu-heading-"] {
  font-size: 14.4px !important;
  font-weight: 400 !important;
  letter-spacing: 4.32px !important;
  text-transform: uppercase !important;
}

[class*="footer-menu-link-"],
[class*="footer-bottom-link-"] {
  font-size: 15.3px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* Meldingsbalk bovenaan: Outfit 13,77px/700/2,754px, hoofdletters. */
.ss-announcement-bar__message li,
.ss-announcement-bar__message a {
  font-size: 13.77px !important;
  font-weight: 700 !important;
  letter-spacing: 2.754px !important;
  text-transform: uppercase !important;
}

/* Prijzen: dezelfde letterafstand als het voorbeeld. */
.product__info-wrapper .price-item--sale,
.product__info-container .price-item--sale,
.product-price-container .price-item--sale,
.product__info-wrapper .price-item--regular,
.product__info-container .price-item--regular,
.product-price-container .price-item--regular {
  letter-spacing: var(--wb-ls) !important;
}

/* Bespaar-badge bij de prijs: gewicht 500, 0,45px. Tekstmaat op verzoek iets
   kleiner dan de voorbeeldpagina: was 11px. */
.wb-bespaar {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* Maattabel-knop: 9,6px, gewicht 600, 0,576px, hoofdletters. */
.scalechart-btn-text,
.scalechart-trigger-btn {
  font-size: 9.6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.576px !important;
  text-transform: uppercase !important;
}

/* Sterren: overal 2px letterafstand; de regel onder de titel op 14px,
   de reviewkaarten op 13px. */
.wb-sterrenbeoordeling__stars,
.wb-sterrenbeoordeling__empty,
.wb-sterrenbeoordeling__full {
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.video-reviews__stars,
.video-reviews__stars-empty,
.video-reviews__stars-full,
.wb-rc__stars,
.wb-rc__stars-empty,
.wb-rc__stars-full {
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

.video-reviews__naam {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* Vastgezette balk onderaan: titel en prijs 14,4px/700/1,6px, knop 13px/700/3,9px. */
.qsc2-product-item__product-title,
.qsc2-stickybar__price,
.qsc2-stickybar [class*="price"] {
  font-size: 14.4px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
}

.qsc2-stickybar button,
.qsc2-stickybar__button,
.qsc2-stickybar [class*="btn"] {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3.9px !important;
  text-transform: uppercase !important;
}

/* Garantiekaarten in het productblok: bovenregel 13px/600, onderregel 13px/300. */
.wb-garantie:not(.wb-garantie--open) .wb-garantie__boven {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: var(--wb-ls) !important;
}

.wb-garantie:not(.wb-garantie--open) .wb-garantie__onder {
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* Balk onderaan de pagina: kop Tenor Sans 24px/700 zonder letterafstand,
   onderregel Outfit 12px/300/0,45px. */
.wb-garantie--open .wb-garantie__boven {
  font-family: var(--font-heading-family) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

.wb-garantie--open .wb-garantie__onder {
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* wb-typografie-uniform-2
   Laatste teksten die nog een eigen grootte of letterafstand hadden. Waarden komen
   uit dezelfde meting van de voorbeeldpagina: maatknoppen 12px/400/0,3px, de
   optienaam 12px/500 in hoofdletters, en overal 0,45px letterafstand. */
.product__info-wrapper .product-form__input--pill input[type="radio"] + label,
.product__info-wrapper .product-form__input--pill input[type="radio"]:checked + label,
.product-form__input--pill label {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
}

.product__info-container .form__label,
.product-form__input .form__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}

.wb-bespaar {
  text-transform: uppercase !important;
}

.cart-drawer-count,
.video-social-username,
.fit-indicator,
.fit-markers,
.fit-markers span {
  letter-spacing: var(--wb-ls) !important;
}

.wb-foot-cancel {
  font-size: 15.3px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

.skip-to-content-link {
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* Retourbanner: kop op de maat van de andere sectiekoppen (26px/500),
   tekst op 14px/300 zoals de reviewteksten. */
.rbp__heading {
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.rbp__body {
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

/* wb-typografie-uniform-3
   De maatknoppen hielden 13px omdat sections/main-product.liquid dezelfde selector met
   !important gebruikt en later in de pagina staat. Met body ervoor wint deze regel. */
body .product__info-wrapper .product-form__input--pill input[type="radio"] + label,
body .product__info-wrapper .product-form__input--pill input[type="radio"]:checked + label {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
}

/* Laatste plekken met 0,6px letterafstand: winkelwagenlade, voorraadregel,
   maattabel-venster en de nieuwsbriefkop. */
.drawer__heading,
.cart__empty-text,
.cart__login-title,
.totals__total,
.red-text,
.red-text b,
.overlay .popup h2,
[class*="footer-heading-"] h2,
[class*="footer-heading-"] strong {
  letter-spacing: var(--wb-ls) !important;
}

.overlay .popup h2 {
  font-family: var(--font-heading-family) !important;
}

/* wb-mobiel-groottes
   Op de telefoon gebruikt de voorbeeldpagina kleinere maten. Gemeten op 375px breed:
   producttitel 14px, sectiekoppen 21px, staffelblok 12/11px, meldingsbalk 12,15px. */
@media screen and (max-width: 749px) {
  .product__info-wrapper .product__info-container .product__title h1,
  .product__info-wrapper .product__info-container h1.product__title,
  .product__info-container .product__title h1 {
    font-size: 14px !important;
    line-height: 1.21 !important;
  }

  .wb-staffel__kop {
    font-size: 12px !important;
    letter-spacing: 1.56px !important;
  }

  .wb-staffel__aantal {
    font-size: 11px !important;
    letter-spacing: 1.1px !important;
  }

  .wb-staffel__korting {
    font-size: 11px !important;
    letter-spacing: 0.88px !important;
  }

  .wb-staffel__voetnoot {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }

  .instagram-grid__heading,
  .video-reviews__heading,
  [class*="video_socials"] h2 {
    font-size: 21px !important;
    letter-spacing: 4px !important;
  }

  .wb-garantie--open .wb-garantie__boven {
    font-size: 21px !important;
  }

  .wb-garantie--open .wb-garantie__onder {
    font-size: 12px !important;
  }

  .wb-garantie:not(.wb-garantie--open) .wb-garantie__boven,
  .wb-garantie:not(.wb-garantie--open) .wb-garantie__onder {
    font-size: 12.5px !important;
  }

  .ss-announcement-bar__message li,
  .ss-announcement-bar__message a {
    font-size: 12.15px !important;
    letter-spacing: 2.43px !important;
  }

  div[class*="answer-template--"] p,
  div[class*="answer-template--"] li,
  div[class*="answer-template--"] span {
    font-size: 12px !important;
  }

  .qsc2-stickybar button,
  .qsc2-stickybar a,
  .qsc2-stickybar__button,
  .qsc2-stickybar [class*="btn"] {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3.9px !important;
    text-transform: uppercase !important;
  }

  .fit-indicator,
  .fit-markers,
  .fit-markers span {
    font-size: 12px !important;
  }
}

/* wb-mobiel-groottes-2
   Vier plekken die op de telefoon nog de brede maat hielden. De kop van de
   video-sectie had een zwaardere selector nodig dan de regel hierboven. */
@media screen and (max-width: 749px) {
  .video-reviews .video-reviews__heading,
  .video-reviews h2 {
    font-size: 21px !important;
    letter-spacing: 4px !important;
  }

  div[class*="button-template--"],
  div[class*="button-template--"] div {
    font-size: 12px !important;
  }

  .rbp .rbp__heading,
  .rbp__box .rbp__heading {
    font-size: 21px !important;
  }

  [class*="footer-heading-"] h2,
  [class*="footer-heading-"] strong {
    font-size: 21px !important;
  }

  .wb-trust .wb-trust__text {
    font-size: 12.5px !important;
  }
}

/* wb-restjes
   Verborgen labels en overslaan-links krijgen dezelfde maat als op de voorbeeldpagina
   (18px breed, 16,56px op de telefoon), zodat ook schermlezers dezelfde opmaak volgen. */
.visually-hidden,
.skip-to-content-link {
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: var(--wb-ls) !important;
}

@media screen and (max-width: 749px) {
  .visually-hidden,
  .skip-to-content-link {
    font-size: 16.56px !important;
  }

  [class*="footer-menu-link-"],
  [class*="footer-bottom-link-"],
  .wb-foot-cancel {
    font-size: 13.5px !important;
  }
}

/* wb-trustregels
   De twee regels onder de prijs: regelhoogte 18,85px en icoon 19px, gelijk aan de
   voorbeeldpagina. De grootte (13px/600) stond al goed; alleen de regelafstand week af. */
.wb-trust .wb-trust__text {
  line-height: 1.45 !important;
}

.wb-trust .wb-trust__icon {
  width: 19px !important;
  height: 19px !important;
}

/* wb-bespaar-naast-prijs
   De bespaar-badge staat op de voorbeeldpagina op dezelfde regel als de prijs. Het
   prijsblok wordt daarom inline gezet, zodat de badge er direct achter valt. */
.product__info-container .product-price-container {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}

.product__info-container > .wb-bespaar--pil {
  vertical-align: middle;
  margin-left: 10px;
}

/* Ruimte tussen de prijs en de badge. Op de voorbeeldpagina is dat 5px; hier staat
   12px omdat de badge anders tegen het bedrag aan plakt. */
.product-price-container .wb-bespaar {
  margin-left: 12px;
  vertical-align: middle;
}


/* wb-voorraadbalk — spoor + vulling onder de voorraadregel, maten van de
   voorbeeldpagina: 4px hoog, 2px radius, spoor #E0E0E0, vulling #D93A2B. */
.product__info-container .wb-voorraadbalk {
  width: 100%;
  height: 4px;
  margin: 0 0 14px;
  background: #E0E0E0;
  border-radius: 2px;
  overflow: hidden;
}

.product__info-container .wb-voorraadbalk__vulling {
  display: block;
  height: 100%;
  background: #D93A2B;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* De voorraadregel zelf krijgt dezelfde tekstmaat, kleur en tussenruimte als
   op de voorbeeldpagina: 12px, #D93A2B, 8px tussen stip en tekst. */
.product__info-container p.product__inventory {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 0 8px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #D93A2B !important;
}

.product__info-container p.product__inventory .red-text {
  color: #D93A2B !important;
  font-size: 12px !important;
}


/* wb-aankondigingsbalk — tekst in de balk bovenaan krijgt de maat en het
   gewicht van de voorbeeldpagina: Outfit 13,5px, gewicht 300, letterafstand
   0,414px. Was 12,15px, gewicht 700, letterafstand 2,43px. */
.ss-announcement-bar__message li,
.ss-announcement-bar__message li a,
.ss-announcement-bar__link .ss-annc-viewport li {
  /* Kleiner dan de voorbeeldpagina (13,5px), op verzoek. */
  font-size: 11.5px !important;
  font-weight: 300 !important;
  letter-spacing: 0.414px !important;
  text-transform: none !important;
}


/* wb-tab-altijd-open — het tabblad Beschrijving staat altijd open. De app zet
   de hoogte en de padding via het style-attribuut; deze regels winnen daarvan
   met !important, zodat het antwoord ook openblijft na een klik. De verborgen
   meetkopie (faq-answer-height-cal) blijft buiten deze regel. */
[class*="ss-tabs-icon-insert-block-template"]
  div[class*="faq-template--"]:not([class*="faq-answer-height-cal-"])
  > div[class*="answer-template--"] {
  display: block !important;
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 20px !important;
  overflow: visible !important;
}


/* wb-lijn-onder-titel — de streep tussen de titel en de prijs liep maar tot
   halverwege, omdat het prijsblok sinds de badge naast de prijs inline staat en
   dus niet meer de volle breedte heeft. De rand verhuist daarom naar de
   titelregel, die wel de hele kolom vult. */
.product__info-container .product-price-container {
  border-top: 0 !important;
}

.product__info-container .product__title {
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E5E5;
}