/** Shopify CDN: Minification failed

Line 64:23 Unexpected bad string token
Line 64:41 Unterminated string token

**/
/* ==========================================================================
   Mayberry-style productpagina — herstyling van Dawn's ingebouwde
   productsectie (titel, prijs, kleur/maat-kiezer, knop, accordion).
   Werkt samen met de native Shopify-onderdelen, dus alle winkelwagen-
   en voorraad-logica blijft gewoon werken.
   ========================================================================== */

/* ---------- Algemene ruimte tussen onderdelen ---------- */
.product__info-container > * + * {
  margin-top: 1.1rem;
}

/* ---------- Groter "peek"-effect in de mobiele afbeeldingen-slider (Dawn's
   ingebouwde grid--peek), zodat je duidelijker de volgende foto ziet meekijken,
   net als bij het voorbeeld ---------- */
@media screen and (max-width: 749px) {
  [id^='Slider-Gallery-'].grid--peek.slider.slider--mobile {
    /* Dawn zet hier standaard alleen links wat "scroll-ruimte" (1.5rem) voor
       het start-uitgelijnde effect. Voor een gecentreerd effect moet die
       ruimte links én rechts precies gelijk zijn (7.5% = de helft van de
       15% "lucht" naast een 85%-brede foto), anders duwt de browser 'm
       alsnog scheef. */
    scroll-padding-left: 7.5% !important;
    scroll-padding-right: 7.5% !important;
  }

  [id^='Slider-Gallery-'].grid--peek .grid__item {
    width: 85% !important;
    /* Centreer elke foto in plaats van hem links uit te lijnen, zodat je
       zowel van de vorige als de volgende foto een randje ziet meekijken
       (in plaats van alleen rechts). Bij de eerste en laatste foto is er
       vanzelf maar aan één kant een buurfoto om te tonen, dus die schuift
       automatisch naar de rand — precies zoals het hoort. */
    scroll-snap-align: center !important;
  }

  /* Dawn geeft standaard alleen de EERSTE foto een linkermarge van 1.5rem
     (voor het oorspronkelijke start-uitgelijnde effect). Die moet weg,
     anders staat foto 1 niet mooi gecentreerd. */
  [id^='Slider-Gallery-'].grid--peek .grid__item:first-of-type {
    margin-left: 0 !important;
  }

  /* Verberg de pijltjes + "1/2"-teller onder de afbeeldingen op mobiel;
     het voorbeeld toont alleen kleine puntjes bovenop de foto zelf. */
  media-gallery .slider-buttons {
    display: none;
  }
}

/* ---------- Minder witruimte boven de afbeeldingen-slider op mobiel ----------
   Los je dit liever op via de thema-editor? Ga naar: Thema-editor >
   Productinformatie-sectie > sectie-instellingen (rechts, niet een blok) >
   "Opvulling" > verklein de waarde bij "Boven". Die waarde geldt voor zowel
   mobiel als desktop (op mobiel wordt hij automatisch iets kleiner
   toegepast), dus je kunt 'm gewoon zelf aanpassen zonder code.
   Wil je 'm liever hard forceren via code? Zet de regel hieronder dan aan
   door het "/*" en "*/" weg te halen. */
/*
@media screen and (max-width: 749px) {
  [id^='MainProduct-'] {
    padding-top: 0.5rem !important;
  }
}
*/

/* ---------- Titel ---------- */
.product__info-container .product__title h1,
.product__info-container .product__title .h1 {
  font-size: 1.7rem;
  color: #2b1c12;
  margin: 0;
}

@media screen and (min-width: 750px) {
  .product__info-container .product__title h1,
  .product__info-container .product__title .h1 {
    font-size: 2rem;
  }
}

/* ---------- Sterren-rating (native Dawn 'rating' block, indien gebruikt) ---------- */
.rating-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ---------- Eigen sterren-badge ("Excellent 4.7"), via Custom Liquid-blok ---------- */
.mb-rating-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mb-rating-badge__avatars {
  display: flex;
  align-items: center;
}

.mb-rating-badge__avatars img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fdf3ea;
  margin-left: -0.7rem;
  display: block;
}

.mb-rating-badge__avatars img:first-child {
  margin-left: 0;
}

@media screen and (min-width: 750px) {
  .mb-rating-badge {
    justify-content: flex-start;
  }
}

.mb-rating-badge__stars {
  position: relative;
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.15em;
  color: rgba(43, 28, 18, 0.2);
}

.mb-rating-badge__stars::before {
  content: '★★★★★';
}

.mb-rating-badge__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  width: var(--rating-percent, 100%);
  color: #40260c;
}

.mb-rating-badge__stars-fill::before {
  content: '★★★★★';
}

.mb-rating-badge__text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2b1c12;
}

/* ---------- Mobiel: rating en titel gecentreerd; alles daaronder (prijs-rij,
   badges, kleur/maat, knop) blijft links uitgelijnd — precies zoals op
   bymayberry.co ---------- */
.product__info-container .rating-wrapper,
.product__info-container .product__title {
  text-align: center;
}

@media screen and (min-width: 750px) {
  .product__info-container .rating-wrapper {
    justify-content: flex-start;
  }

  .product__info-container .rating-wrapper,
  .product__info-container .product__title {
    text-align: left;
  }
}

/* ---------- Prijs + "Save X%" op één regel ----------
   Dit hoort bij ÉÉN gecombineerd Custom Liquid-blok "mb-price-row" dat het
   gewone "Prijs"-blok vervangt (zie instructies in de chat). Door prijs én
   "Save X%" in hetzelfde blokje te renderen, staan ze gegarandeerd naast
   elkaar op één regel, en werkt ook Shopify's "live prijs bijwerken bij
   kleur/maat wisselen" gewoon door (het element heeft dezelfde id als
   Dawn's eigen prijs-blok verwacht). */
/* Geen flexbox meer voor deze rij: flex "baseline/center" bleek de
   "Save X%"-tekst net iets anders te laten uitlijnen dan de prijs, omdat
   Dawn's prijs-HTML zelf ook alweer intern met vertical-align werkt (in
   plaats van flex). Door voor dezelfde uitlijn-techniek te kiezen als Dawn
   zelf (inline-block + vertical-align) staat alles gegarandeerd strak op
   één lijn. */
.mb-price-row {
  text-align: center;
}

@media screen and (min-width: 750px) {
  .mb-price-row {
    text-align: left;
  }
}

.mb-price-row .price,
.mb-price-row .mb-save-badge {
  display: inline-block;
  vertical-align: middle;
}

/* Dawn zet de losse prijs-onderdelen (oude/nieuwe prijs) intern met
   vertical-align: top; dat overschrijven we naar "middle" zodat ze
   precies op dezelfde hoogte staan als de "Save X%"-tekst ernaast. */
.mb-price-row .price > * {
  vertical-align: middle !important;
}

.mb-price-row .mb-save-badge {
  margin-left: 0.6rem;
}

/* Alle drie de onderdelen (oude prijs, nieuwe prijs, "Save X%") krijgen
   bewust hetzelfde lettertype (dat erven ze automatisch van de pagina) én
   exact dezelfde lettergrootte, zodat ze mooi op één rechte lijn staan.
   Dawn geeft de oude/vergelijkingsprijs en de "Sale"-prijs normaal
   verschillende groottes (1.3rem vs 1.6-1.8rem) — dat overschrijven we hier
   bewust met !important. */
.mb-price-row .price-item--regular,
.mb-price-row .price-item--sale,
.mb-save-badge {
  font-size: 1.35rem !important;
  line-height: 1.3;
}

@media screen and (min-width: 750px) {
  .mb-price-row .price-item--regular,
  .mb-price-row .price-item--sale,
  .mb-save-badge {
    font-size: 1.5rem !important;
  }
}

.mb-price-row .price-item--sale {
  color: #2b1c12;
  font-weight: 700;
}

/* De oude/doorgestreepte prijs: let op, dit moet NA de regel hierboven staan
   en specifiek genoeg zijn, anders "wint" per ongeluk de zwarte/vette stijl
   van de nieuwe prijs (beide delen dezelfde class "price-item--regular"). */
.mb-price-row .price__sale .price-item--regular {
  color: rgba(43, 28, 18, 0.45) !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}

.mb-price-row .price__regular .price-item--regular {
  color: #2b1c12;
  font-weight: 700;
}

/* Verberg Dawn's standaard zwarte "Sale"-badge; we tonen ons eigen rode
   "Save X%"-tekstje ernaast in plaats daarvan. Extra breed + !important
   gescoped, voor het geval de eerdere, smallere regel 'm niet te pakken kreeg. */
.mb-price-row .price__badge-sale,
.mb-price-row .badge.price__badge-sale,
.product__info-container .price__badge-sale {
  display: none !important;
}

.mb-save-badge {
  color: #c0392b;
  font-weight: 700;
  /* font-size wordt hierboven gezamenlijk met de prijs-onderdelen geregeld,
     zodat alles gegarandeerd dezelfde grootte heeft. */
}

/* ---------- Vertrouwens-rij (verzending / geld-terug / buy-more-save-more) ---------- */
.mb-trust-badges {
  border-top: 1px solid rgba(43, 28, 18, 0.15);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mb-trust-badges__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.mb-trust-badges__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #40260c;
}

.mb-trust-badges__icon svg,
.mb-trust-badges__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mb-trust-badges__text {
  font-size: 1.25rem;
  color: #2b1c12;
}

/* ---------- "LIMITED SUMMER SALE"-badge + rode urgentie-tekst ---------- */
.mb-sale-urgency {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.mb-sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #2b1c12;
  color: #fff;
  padding: 0.75rem 1.3rem;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mb-sale-badge svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.mb-urgency {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #c0392b;
  font-size: 1.2rem;
  font-weight: 600;
}

.mb-urgency__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #c0392b;
  flex: 0 0 auto;
  animation: mb-urgency-pulse 1.6s ease-in-out infinite;
}

@keyframes mb-urgency-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-urgency__dot {
    animation: none;
  }
}

/* ---------- Kleuren als foto-swatches ----------
   Zodra je bij een kleur-optiewaarde een eigen afbeelding instelt
   (zie instructies in de chat), schakelt Dawn automatisch over van
   een effen bolletje naar een foto-swatch. Deze regels maken ze
   iets groter en vierkant, zoals bij het voorbeeld. */
.product__info-container {
  --swatch-input--size: 4.75rem;
}

/* ---------- Kleur- en maatkiezer ---------- */
.product__info-container .product-form__input {
  margin-top: 1.25rem;
}

.product__info-container .product-form__input .form__label,
.product__info-container .product-form__input legend.form__label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2b1c12;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

/* Maat-knoppen (pill picker) */
.product__info-container .product-form__input--pill .button-group,
.product__info-container fieldset.product-form__input--pill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product__info-container input[type='radio'] + label {
  border-radius: 4px;
}

.product__info-container .product-form__input--pill input[type='radio']:checked + label {
  background: #40260c;
  border-color: #40260c;
  color: #fff;
}

/* ---------- Winkelwagenknop ---------- */
.product__info-container .product-form__submit.button {
  background: #40260c;
  border-color: #40260c;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border-radius: 4px;
}

.product__info-container .product-form__submit.button:hover {
  opacity: 0.92;
}

/* ---------- Betaal-icoontjes rij ---------- */
.mb-payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid rgba(43, 28, 18, 0.12);
  border-radius: 8px;
}

.mb-payment-icons svg {
  height: 1.75rem;
  width: auto;
  display: block;
}

/* ---------- "Summer Savings"-bundelkortingsbox ---------- */
.mb-savings-box {
  background: #fdf3ea;
  border: 1px solid rgba(43, 28, 18, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.mb-savings-box__heading {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2b1c12;
  margin: 0 0 0.4rem;
}

.mb-savings-box__subtext {
  font-size: 1rem;
  color: #4a3a2c;
  margin: 0 0 1.1rem;
}

.mb-savings-box__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(43, 28, 18, 0.12);
  font-size: 1.05rem;
}

.mb-savings-box__row:first-of-type {
  border-top: none;
}

.mb-savings-box__tier {
  color: #2b1c12;
}

.mb-savings-box__discount {
  color: #40260c;
  font-weight: 700;
}

/* Laatste staffel ("Buy 5+ pieces") extra uitgelicht in het bruin, net als op de voorbeeldsite */
.mb-savings-box__row--highlight {
  background: #2b1c12;
  margin: 0 -1.5rem;
  padding: 0.9rem 1.5rem;
  border-top: none;
}

.mb-savings-box__row--highlight .mb-savings-box__tier,
.mb-savings-box__row--highlight .mb-savings-box__discount {
  color: #fff;
}

.mb-savings-box__footnote {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(43, 28, 18, 0.65);
}

/* ---------- Beschrijving / accordion-rijen ---------- */
.product__accordion.accordion {
  border-top: 1px solid rgba(43, 28, 18, 0.15);
}

.product__accordion.accordion:last-of-type {
  border-bottom: 1px solid rgba(43, 28, 18, 0.15);
}

.product__accordion .summary__title {
  padding: 1rem 0;
}

/* 20% groter (screenshots lieten zien dat dit op mobiel te klein/moeilijk
   leesbaar was): 0.85rem -> 1.02rem. De desktop-versie hieronder
   (@media min-width: 750px) had deze bump al eerder gekregen. */
.product__accordion .accordion__title {
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2b1c12;
  font-weight: 600;
}

.product__accordion .accordion__content {
  padding-bottom: 1.25rem;
  color: #4a3a2c;
  line-height: 1.6;
}

/* ---------- Automatische "Description"-rij (haalt producttekst op) ---------- */
.mb-auto-description summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.mb-auto-description summary::-webkit-details-marker {
  display: none;
}

.mb-auto-description__caret svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.mb-auto-description details[open] .mb-auto-description__caret svg {
  transform: rotate(180deg);
}

/* ---------- "Belastingen inbegrepen" / "Tax included"-tekstje onder de
   knop weghalen. Dit komt automatisch van je Shopify-instellingen (Instellingen
   > Belastingen) en niet van een los blok, dus dit kan alleen via CSS verborgen
   worden — de instelling zelf blijft gewoon actief, alleen de tekst hier
   verdwijnt. ---------- */
.product__info-container .product__tax {
  display: none;
}

/* ---------- Voorraad-tekst (native 'inventory' block) ---------- */
.product__info-container .product__inventory {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(43, 28, 18, 0.7);
}

/* ---------- "Naar boven"-knop rechts in beeld ----------
   Zweeft vast op zijn plek (position: fixed), dus onafhankelijk van de
   rest van de pagina-opmaak. Staat standaard onzichtbaar en verschijnt
   met een kleine fade/schuif-animatie zodra je voorbij 35% van de totale
   paginahoogte bent gescrold (regeling gebeurt via het Custom Liquid-
   blok "back-to-top", niet hier). */
.mb-back-to-top {
  position: fixed;
  top: 50%;
  right: 2rem;
  z-index: 10;
  width: 3.75rem; /* was 3rem, ±25% groter */
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #2b1c12;
  border-radius: 4px;
  color: #2b1c12;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  /* Verticaal gecentreerd (top: 50% + translateY(-50%)) en daarnaast een
     kleine horizontale schuif-animatie bij het in-/uitfaden. */
  transform: translateY(-50%) translateX(0.6rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.mb-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.mb-back-to-top:hover {
  opacity: 0.85;
}

.mb-back-to-top svg {
  width: 1.6rem; /* was 1.3rem, meegeschaald met de knop */
  height: 1.6rem;
}

@media screen and (min-width: 750px) {
  .mb-back-to-top {
    right: 3rem;
  }
}

/* ==========================================================================
   Alle tekst op laptop/pc 20% groter (alleen vanaf 750px, mobiel blijft
   ongewijzigd). Elke waarde hieronder is exact de bestaande grootte × 1,2 —
   dus dezelfde verhoudingen, alleen groter. Staat bewust helemaal onderaan
   zodat deze regels de eerdere (kleinere) desktop-waarden overschrijven.
   ========================================================================== */
@media screen and (min-width: 750px) {
  .product__info-container .product__title h1,
  .product__info-container .product__title .h1 {
    font-size: 2.4rem; /* was 2rem */
  }

  .mb-rating-badge__stars {
    font-size: 2.04rem; /* was 1.7rem */
  }

  .mb-rating-badge__text {
    font-size: 1.56rem; /* was 1.3rem */
  }

  .mb-price-row .price-item--regular,
  .mb-price-row .price-item--sale,
  .mb-save-badge {
    font-size: 1.8rem !important; /* was 1.5rem */
  }

  .product__info-container .product-form__input .form__label,
  .product__info-container .product-form__input legend.form__label {
    font-size: 0.96rem; /* was 0.8rem */
  }

  .product__info-container fieldset.product-form__input--pill input[type='radio'] + label,
  .product__info-container fieldset.product-form__input--swatch input[type='radio'] + label {
    font-size: 1.68rem; /* was Dawn's standaard 1.4rem */
  }

  .mb-trust-badges__text {
    font-size: 1.5rem; /* was 1.25rem */
  }

  .mb-sale-badge {
    font-size: 1.26rem; /* was 1.05rem */
  }

  .mb-urgency {
    font-size: 1.44rem; /* was 1.2rem */
  }

  .mb-savings-box__heading {
    font-size: 1.56rem; /* was 1.3rem */
  }

  .mb-savings-box__subtext {
    font-size: 1.2rem; /* was 1rem */
  }

  .mb-savings-box__row {
    font-size: 1.26rem; /* was 1.05rem */
  }

  .mb-savings-box__footnote {
    font-size: 1.08rem; /* was 0.9rem */
  }

  .product__accordion .accordion__title {
    font-size: 1.02rem; /* was 0.85rem */
  }

  .product__info-container .product-form__submit.button {
    font-size: 1.02rem; /* was 0.85rem */
  }

  .product__info-container .product__inventory {
    font-size: 1.02rem; /* was 0.85rem */
  }
}

/* ==========================================================================
   USP's / vertrouwens-rij (verzending, geld-terug, buy-more-save-more)
   groter op telefoon, zodat ze beter leesbaar zijn.
   ========================================================================== */
@media screen and (max-width: 749px) {
  .mb-trust-badges__icon {
    width: 2.4rem; /* was 2rem */
    height: 2.4rem;
  }

  .mb-trust-badges__text {
    font-size: 1.45rem; /* was 1.25rem */
  }

  .mb-trust-badges__row {
    gap: 1rem; /* was 0.9rem, iets meer lucht bij de grotere tekst/iconen */
  }
}

/* ==========================================================================
   Sticky "Add to cart"-balk onderaan het scherm (zoals op bymayberry.co).
   Verschijnt automatisch zodra de echte "Add to cart"-knop verderop in de
   sectie niet meer in beeld is; verdwijnt weer zodra je terugscrolt naar
   boven. Werkt samen met het Custom Liquid-blok "sticky-add-to-cart".
   ========================================================================== */
/* Basiswaarden hieronder = mobiel (±15% groter dan de vorige versie). De
   @media (min-width: 750px)-blok verderop maakt alles op laptop/desktop
   nog eens ±30% groter t.o.v. diezelfde vorige versie. */
.mb-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.61rem;
  padding: 1.38rem 2.01rem;
  background: #fffdf9;
  border-top: 1px solid rgba(43, 28, 18, 0.15);
  box-shadow: 0 -0.2rem 1rem rgba(43, 28, 18, 0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.mb-sticky-atc.is-visible {
  transform: translateY(0);
}

.mb-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: 1.38rem;
  min-width: 0;
}

.mb-sticky-atc__image {
  flex: 0 0 auto;
  width: 5.46rem;
  height: 5.46rem;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(43, 28, 18, 0.06);
}

.mb-sticky-atc__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mb-sticky-atc__info {
  min-width: 0;
}

.mb-sticky-atc__title {
  font-size: 1.55rem;
  font-weight: 700;
  color: #2b1c12;
  margin: 0 0 0.52rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12.1rem;
}

.mb-sticky-atc__options {
  display: flex;
  gap: 0.63rem;
}

.mb-sticky-atc__option,
.mb-sticky-atc__qty {
  font-size: 1.29rem;
  padding: 0.48rem 0.81rem;
  border: 1px solid rgba(43, 28, 18, 0.3);
  border-radius: 6px;
  background: #fff;
  color: #2b1c12;
}

.mb-sticky-atc__right {
  display: flex;
  align-items: center;
  gap: 1.21rem;
  flex: 0 0 auto;
}

/* Duidelijk "Aantal"-labeltje links van de aantal-kiezer, zodat meteen
   zichtbaar is dat je hier een aantal kunt kiezen. */
.mb-sticky-atc__qty-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mb-sticky-atc__qty-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b1c12;
  white-space: nowrap;
}

.mb-sticky-atc__qty {
  width: 7.1rem;
}

/* De prijs wordt via JS live gekopieerd vanuit je bestaande, al werkende
   prijs-rij — deze regels stylen dat gekopieerde stukje compact, los van
   de (grotere) opmaak die de prijs verderop in de pagina heeft. */
.mb-sticky-atc__price .price__badge-sale,
.mb-sticky-atc__price .badge.price__badge-sale {
  display: none !important;
}

.mb-sticky-atc__price .price,
.mb-sticky-atc__price .mb-save-badge {
  display: inline-block;
  vertical-align: middle;
}

.mb-sticky-atc__price .price > * {
  vertical-align: middle !important;
}

.mb-sticky-atc__price .price-item--regular,
.mb-sticky-atc__price .price-item--sale,
.mb-sticky-atc__price .mb-save-badge {
  font-size: 1.61rem !important;
  line-height: 1.2;
}

.mb-sticky-atc__price .price-item--sale {
  color: #2b1c12;
  font-weight: 700;
}

.mb-sticky-atc__price .price__sale .price-item--regular {
  color: rgba(43, 28, 18, 0.45) !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}

.mb-sticky-atc__price .price__regular .price-item--regular {
  color: #2b1c12;
  font-weight: 700;
}

.mb-sticky-atc__price .mb-save-badge {
  color: #c0392b;
  font-weight: 700;
  margin-left: 0.63rem;
}

.mb-sticky-atc__button {
  background: #40260c;
  border: none;
  color: #fff;
  font-size: 1.29rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.38rem 2.24rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.mb-sticky-atc__button:hover {
  opacity: 0.92;
}

.mb-sticky-atc__button.disabled,
.mb-sticky-atc__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Op telefoon is er weinig ruimte: kleur/maat verberg je hier nog steeds
   (die pas je aan via je gewone kiezer bovenin de pagina). */
@media screen and (max-width: 749px) {
  .mb-sticky-atc__options {
    display: none;
  }
}

/* Laptop/desktop: alles nog eens groter dan de mobiele basiswaarden
   hierboven (samen ±30% groter dan de vorige versie). */
@media screen and (min-width: 750px) {
  .mb-sticky-atc {
    gap: 1.82rem;
    padding: 1.56rem 2.28rem;
  }

  .mb-sticky-atc__product {
    gap: 1.56rem;
  }

  .mb-sticky-atc__image {
    width: 6.18rem;
    height: 6.18rem;
    border-radius: 10px;
  }

  .mb-sticky-atc__title {
    font-size: 1.76rem;
    margin: 0 0 0.59rem;
    max-width: none;
  }

  .mb-sticky-atc__options {
    gap: 0.72rem;
  }

  .mb-sticky-atc__option,
  .mb-sticky-atc__qty {
    font-size: 1.46rem;
    padding: 0.55rem 0.91rem;
  }

  .mb-sticky-atc__right {
    gap: 1.37rem;
  }

  .mb-sticky-atc__qty-label {
    font-size: 0.95rem;
  }

  .mb-sticky-atc__qty {
    width: 8rem;
  }

  .mb-sticky-atc__price .price-item--regular,
  .mb-sticky-atc__price .price-item--sale,
  .mb-sticky-atc__price .mb-save-badge {
    font-size: 1.82rem !important;
  }

  .mb-sticky-atc__price .mb-save-badge {
    margin-left: 0.72rem;
  }

  .mb-sticky-atc__button {
    font-size: 1.46rem;
    padding: 1.56rem 2.54rem;
  }
}