/** Shopify CDN: Minification failed

Line 9:0 Unexpected "{"
Line 9:1 Expected identifier but found "%"
Line 43:0 Unexpected "{"
Line 43:1 Expected identifier but found "%"

**/
{% style %}
  body {
    font-family: var(--font-body-family) !important;
    font-size: 16px; /* Pas aan naar wens */
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading-family) !important;
    font-weight: 500 !important; /* Bronova is van zichzelf al krachtig */
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  /* Specifieke elementen die vaak hun eigen font-family pakken in dit thema */
  p, li, a, button, input, label {
       font-family: var(--bs-body-font-family) !important;
    font-weight: var(--bs-body-font-weight) !important;
    font-size: var(--bs-body-font-size);
  }

  /* Een SPAN krijgt bewust GEEN font-size: hij erft die van zijn alinea.
     Stond hij hier wel, dan sprong een span midden in een tekst van 14px
     terug naar 16px -- de reden dat een handvol secties dat met !important
     moest omzeilen. */
  span {
       font-family: var(--bs-body-font-family) !important;
    font-weight: var(--bs-body-font-weight) !important;
  }

  /* Basismaat voor lopende tekst. 14px is de dominante maat op de site en
     meet goed: 49 van de 57 tekstblokken vallen binnen 45-75 tekens per regel. */
  p, li, a {
    font-size: 14px; 
  }
{% endstyle %}

/* Aangepaste media gallery stijlen */
.product-gallery-items {
  display: grid;
  gap: 1rem;
}

.product-gallery__item {
  position: relative;
}

.product-gallery__item-button {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.product-gallery__item-image img {
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
}

.product-gallery__item-button:hover .product-gallery__item-image img {
  transform: scale(1.05);
}

/* Pas de thumbnails aan */
.media-gallery-thumbs .swiper-slide {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.media-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.fs-xxxl{
  font-size: 30px;
}
/* Hier stond de positionering van de Gorgias-chatwidget (#chat-button,
   #chat-window, #chat-campaigns, #mount-floating-engagement-widget,
   #gorgias-chat-container en de .gorgias-chat-key-* hashes), inclusief het
   wegpoetsen van hun blur-laag. Gorgias is op 13-09-2026 verwijderd; deze
   selectors raakten daarna niets meer. De eigen chat draait op #liroma-chat
   en heeft zijn eigen opmaak in snippets/chat-widget.liquid. */
@media (max-width: 768px){
.container{

  padding: 0 10px !important;
}
}
/* Verzendregel */
.cdr-shipping-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin: 10px 0;
  color: #444444;
}

.cdr-shipping-line strong {
  /* Kleur staat in cart-drawer.css, bij de andere drawer-regels. Hier stond
     een tweede versie die het onderling won - dat is precies waarom de kleur
     niet doorkwam. */
  font-weight: 600;
}

/* Bespaar label */
.cdr-savings-total {
  border-radius: 4px !important;
}

/* Bespaar tekst niet in hoofdletters */
.cdr-savings-total__label {
  text-transform: none !important;
}
/* Verwijder groene felicitatie balk bovenin cart drawer */
.cdr-goal,
.cart-drawer-goal,
.cdr-progress,
.cdr-free-shipping,
[data-cdr-goal],
[data-cart-drawer-goal] {
  display: none !important;
}

/* Product bespaar labels */
.cdr-item__saving,
.cdr-item__badge,
.cdr-item__discount,
.cdr-savings-badge,
.cart-item__saving,
.cart-item__badge,
.cart-item__discount {
  background: #F7EDE9 !important;
  color: #444444 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
  text-transform: none !important;
}

/* Tekst in bespaar labels zwart */
.cdr-item__saving *,
.cdr-item__badge *,
.cdr-item__discount *,
.cdr-savings-badge *,
.cart-item__saving *,
.cart-item__badge *,
.cart-item__discount * {
  color: #444444 !important;
}

/* Onderste bespaar balk */
.cdr-savings-total {
  background: #F7EDE9 !important;
  color: #444444 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
}

/* Stond op zwart met !important, waardoor de kleur van de kortingregel
   nergens door kon komen. Nu de instelbare kortingskleur. */
.cdr-savings-total * {
  color: var(--cdr-korting, #F33A3A) !important;
}
.mcart .mc-line__saved,
.mc-line__saved {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: #F7EDE9 !important;
  color: #444444 !important;
  border: 1px solid #E8CFC5 !important;
  padding: 3px 9px;
  border-radius: 4px !important;
  font-size: 11px;
  font-weight: 700;
}
.mcart .mc-line__saved svg,
.mc-line__saved svg {
  color: #444444 !important;
  stroke: #333333 !important;
}
#offcanvas-cart .cdr-item__save,
#offcanvas-cart .cdr-line__save,
#offcanvas-cart .cdr-save,
#offcanvas-cart .cdr-saved,
#offcanvas-cart .cdr-savings,
#offcanvas-cart .cdr-item__savings {
  background: #F7EDE9 !important;
  color: #444444 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
  /* Zonder padding plakte de badge strak om de tekst en las hij als losse
     tekst in plaats van een label. */
  padding: 3px 8px !important;
}

#offcanvas-cart .cdr-item__save *,
#offcanvas-cart .cdr-line__save *,
#offcanvas-cart .cdr-save *,
#offcanvas-cart .cdr-saved *,
#offcanvas-cart .cdr-savings *,
#offcanvas-cart .cdr-item__savings * {
  color: #444444 !important;
  stroke: #333333 !important;
}
.cdr-item__discount-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-top: 4px;
  color: #444444;
}

.cdr-item__discount-line strong {
  font-weight: 700;
}
.cdr-item__discount-line {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  background: #F7EDE9;
  border: 1px solid #E8CFC5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #444444;
  margin-top: 6px;
}

.cdr-item__discount-line strong {
  font-weight: 700;
  white-space: nowrap;
}
.cdr-item__discount-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  background: #F7EDE9;
  border: 1px solid #E8CFC5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #444444;
  margin-top: 6px;
}

.cdr-item__discount-amount {
  font-size: 12px;
  font-weight: 700;
  color: #444444;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .cdr-item__discount-line {
    display: none !important;
  }

  .cdr-item__savings {
    font-size: 0 !important;
  }

  .cdr-item__savings::before {
    content: "Korting verwerkt ";
    /* 10px viel weg naast een prijs van 19px. */
    font-size: 12px;
    font-weight: 700;
    color: #444444;
  }

  .cdr-item__savings strong {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   PROEF rustiger typografie — ALLEEN homepage (.page-type-index)
   --------------------------------------------------------------------------
   Waarom: de homepage oogde "groot en lomp". Gemeten bleek dat niet aan de
   grootte te liggen maar aan gewicht en contrast:

     Rouge (rouge.care)   koppen 48px / gewicht 300, tekst #2E6A76 = 6,1:1
     Liroma               koppen 33px / gewicht 500, tekst bijna zwart = 17,8:1

   Rouge is bovendien 54% BREDER (1792 vs 1160), dus smaller maken helpt niet.
   Manrope is alleen in 400/500/700 geladen; 400 is hier dus de lichtste stap.

   Bewust gescoped op .page-type-index zodat dit in één keer terug kan
   (blok verwijderen) of site-breed kan (".page-type-index " weghalen).
   ========================================================================== */
.page-type-index :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: 400 !important;
  color: #444444 !important;
}

/* Koppen op een donkere ondergrond houden hun eigen kleur. Klasse-selector
   is specifieker dan de regel hierboven, dus dit wint zonder trucs. */
.page-type-index .hh__title,
.page-type-index [id*="footer"] :is(h1, h2, h3, h4, h5, h6) {
  color: #ffffff !important;
}

/* ...maar het nieuwsbriefblok zit in dezelfde sectie als de footer en staat op een
   WITTE band. Zonder deze regel is "Meld je aan voor de nieuwsbrief" wit op wit en
   dus onzichtbaar. Gelijke specificiteit, later in het bestand, dus dit wint. */
.page-type-index .fl-newsletter :is(h1, h2, h3, h4, h5, h6) {
  color: #444444 !important;
}

/* ==========================================================================
   HOMEPAGE — één grijs voor bodytekst (#666666)
   --------------------------------------------------------------------------
   Gemeten op liroma.nl: de homepage gebruikte ZEVEN grijzen door elkaar.
   #666666 stond al op 87 elementen; de rest week af:

     rgba(0,0,0,.70)  6x   ks__beschrijving, kc__belofte, g5__beschrijving
     rgba(0,0,0,.75)  6x   ks__checks li
     rgba(0,0,0,.80)  3x   g5__checks li
     #333333          3x   over_rlt beschrijving (+ 2 strong erin)
     #555555          2x   kr-subtekst, kzh__body
     #716E6E          4x   tc__label (trust-iconen, nu via de instelling)

   VIJF daarvan hebben GEEN kleurinstelling in de editor — die staan hardcoded
   in hun sectiebestand en worden hieronder met CSS gelijkgetrokken.

   De rest heeft wel een instelling; die zijn in templates/index.json zelf op de
   goede waarde gezet, zodat het veld in de editor blijft werken en niet stiekem
   door deze regel wordt overruled:

     over_rlt_UeAGPr                 text_color     #333333 -> #666666
     klachten_router_PiQdAm          subtekst_kleur #555555 -> #666666
     behandelschema_keuzehulp_7d3FnC text_color     #555555 -> #666666
     trust_icons26_WPcHpV            label_kleur    #716E6E -> #666666
     trust_icons26_WPcHpV            waarde_kleur   #000000 -> #333333  (de cijfers)

   Titelkleuren zitten ook in de editor (over_rlt, behandelschema, bestsellers,
   alledrie nu #333333), maar die worden WEL door de kopregel hierboven afgedwongen
   — één kopkleur voor de hele homepage is daar het uitgangspunt. Wil je er een
   afwijkend laten worden, dan moet die kopregel aangepast worden.

   Bewust NIET geraakt:
     - .an__tekst        wit op rood (aankondigingsbalk)
     - .ks__eyebrow /
       .kc__eyebrow      #F33A3A, bedoelde accentkleur
     - de footer         #787981 en #AFAFAF staan op een donkere ondergrond;
                         daar is het contrast 8,3:1 en zou #666666 het juist
                         verslechteren
     - header / mega-menu / cart drawer (#6B6B75, #52525C): gedeelde
       onderdelen, horen bij een site-brede ronde, niet bij de homepage

   Alle selectors zijn live getest voordat ze hier belandden (26 elementen in de
   eerste opzet; deze regel dekt er nu 15, de rest loopt via de instellingen).
   ========================================================================== */
.page-type-index .ks__beschrijving,
.page-type-index .ks__checks li,
.page-type-index .kc__belofte,
.page-type-index .g5__beschrijving,
.page-type-index .g5__checks li {
  color: #444444 !important;
}

/* ==========================================================================
   BASIS-KOPSCHAAL — afgestemd op de container van 1100px
   --------------------------------------------------------------------------
   Verhouding container/grootste kop = 1100/30 = 36,7. Rouge (de referentie)
   zit op 37.

   BEWUST GEEN !important. Deze regel vervangt alleen de Bootstrap-standaard
   (48/40/32/24/20/16px), die zichtbaar wordt bij koppen die een redacteur in
   een rich-text-veld typt -- daar komt geen sectie-instelling aan te pas.
   Een sectie die zijn eigen maat opgeeft wint hiervan, en de instellingen in
   de theme-editor blijven dus gewoon werken.

   Zonder deze regel stond een <h4> in een FAQ-antwoord op 24px, buiten de
   schaal, terwijl alle ingestelde koppen al waren teruggebracht.
   ========================================================================== */
h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 25px; }
h3, .h3 { font-size: 20px; }
h4, h5, h6, .h4, .h5, .h6 { font-size: 17px; }

@media (max-width: 767px) {
  h1, .h1 { font-size: 24px; }
  h2, .h2 { font-size: 21px; }
  h3, .h3 { font-size: 18px; }
  h4, h5, h6, .h4, .h5, .h6 { font-size: 16px; }
}

/* Klarna-melding (klarna-placement, op alle PDP's en in de winkelwagen):
   het woord "Klarna" als roze badge met zwarte letters, zoals hun echte logo.
   Klarna rendert het in een shadow root en stelt het open via ::part(osm-logo).
   De span zit dubbel genest, daarom kleine padding (telt twee keer op). */
klarna-placement::part(osm-logo) {
  background: #FFA8CD;
  color: #0B051D;
  border-radius: 4px;
  padding: 1px 2px;
  font-weight: 700;
}
/* Ruimte tussen de Klarna-badge en "Meer informatie". */
klarna-placement::part(osm-cta) {
  margin-left: 6px;
}

/*
 * Trustbadge links in beeld (alleen liroma.de, daar staat hij).
 *
 * In de Trusted Shops-app staat de positie op Links, maar de pagina krijgt nog
 * steeds data-desktop-position="right" en data-mobile-position="right" mee, en
 * dan botst de badge met de chatballon rechtsonder. Zie ook het blokje in
 * layout/theme.liquid dat die twee attributen omzet voordat hun script draait;
 * dit is het vangnet voor het geval dat te laat komt.
 *
 * Niet op de klassenaam van hun div sturen: die heet nu ._1y0juye en is door
 * hun build gegenereerd, dus die verandert bij hun volgende versie. De plek in
 * de boom (kleinkind van de container) is stabieler. Elementen zonder eigen
 * positionering trekken zich van left/right niets aan, dus dit raakt alleen de
 * wikkel die echt vastgezet is.
 */
[id^="trustbadge-container"] > div > div {
  left: 10px !important;
  right: auto !important;
}