/* ═══════════════════════════════════════════════════════════
   SKIN B — "MAISON"
   Referentie: lauramercier.sr-com + anastasiabeverlyhills.sr-com
   Wit met zwarte letters; bordeauxrood alleen in het logo.
   Meest commercieel van de drie: zoekbalk, badges, reviews,
   duidelijke prijzen. Voelt als een winkel, niet als een galerie.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Layout ─────────────────────────────── */
  --max-width:    1380px;
  --section-pad:  clamp(4rem, 8vw, 7rem);
  --grid-gap:     clamp(1.25rem, 2.5vw, 2.25rem);
  --nav-height:   68px;

  /* ── Kleuren ────────────────────────────────────────────
     Basiskleur is het diepe rood uit het logo dat Sarah
     aanleverde (#6B0F0F). Niet de bruinige tint van de doosjes:
     het logo is leidend voor de merkkleur.
     ──────────────────────────────────────────────────────── */
  --bg:            #FFFFFF;
  --bg-alt:        #F7F4F1;
  --bg-dark:       #FFFFFF;   /* wit — navbalk, footer en de secties die eerst bordeaux waren */
  --bordeaux-diep: #560B0B;   /* hover en accenten op bordeaux */
  --text:          #1A1A1A;
  --text-muted:    #5A5A5A;
  --border:        #E6E2DE;
  --border-strong: #C2BCB6;

  --on-dark:       #1A1A1A;
  --on-dark-muted: #5A5A5A;

  --accent:        #6B0F0F;
  --accent-on:     #FFFFFF;

  --rose:          #C9958E;
  --saffron:       #C4904A;

  /* ── Typografie ─────────────────────────────────────────────
     01-09-2026: de lopende tekst is van Jost naar Cormorant
     Garamond gegaan, op verzoek. De koppen stonden er al in.

     Let op bij het aanpassen van tekstgroottes: Cormorant heeft
     een duidelijk kleinere x-hoogte dan Jost, dus bij dezelfde
     pixelmaat oogt de letter kleiner en dunner. Daarom staat de
     basis nu op 18px in plaats van 16px, met wat meer
     regelafstand, en is het basisgewicht 400 in plaats van 300.

     De reserve is Georgia: ook een serif met een ruime x-hoogte,
     dus als Cormorant niet laadt verandert de bladspiegel wel maar
     blijft het karakter hetzelfde.
     ──────────────────────────────────────────────────────────── */
  --font-body:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-logo:       'Cormorant Garamond', Georgia, serif;
  --font-card-title: 'Cormorant Garamond', Georgia, serif;

  --tracking-wide:       0.14em;
  --tracking-nav:        0.06em;
  --tracking-title:      0.01em;
  --tracking-hero:       0.01em;
  --tracking-card-title: 0.01em;

  --transform-title:      none;
  --transform-hero:       none;
  --transform-card-title: none;
  --nav-transform:        none;

  --weight-title:      400;
  --weight-hero:       400;
  --weight-card-title: 500;

  --size-hero:          clamp(2.5rem, 5.6vw, 4.25rem);
  --size-section-title: clamp(1.875rem, 3.4vw, 2.75rem);
  --size-card-title:    1.1875rem;

  --logo-size:      1.5rem;
  --logo-tracking:  0.20em;
  --logo-transform: uppercase;
  --logo-weight:    500;

  /* ── Navigatie ──────────────────────────── */
  --nav-bg:      #FFFFFF;
  --nav-fg:      #1A1A1A;
  --nav-border:  #E6E2DE;

  --utilbar-bg:  #1A1A1A;
  --utilbar-fg:  #FFFFFF;

  --search-bg:     rgba(253,250,246,0.10);
  --search-border: rgba(253,250,246,0.30);

  /* ── Hero ───────────────────────────────── */
  --hero-scrim: linear-gradient(90deg, rgba(107,15,15,.62) 0%, rgba(107,15,15,.18) 70%);
  --hero-panel: #F4EDE3;

  /* ── Knoppen ────────────────────────────── */
  --btn-pad:           0.9rem 2.1rem;
  --btn-radius:        3px;
  --btn-primary-bg:    #1A1A1A;
  --btn-primary-fg:    #FFFFFF;
  --btn-primary-hover: #000000;

  /* ── Productkaart ───────────────────────── */
  --card-bg:        #FFFFFF;
  --card-border:    1px solid #E6E2DE;
  --card-radius:    4px;
  --card-shadow:    0 14px 34px rgba(107,15,15,.12);
  --card-media-bg:  #FFFFFF;
  --card-ratio:     1/1;
  --card-pad:       1.5rem 1.5rem 1.75rem;
  --card-align:     center;

  /* ── Badges ─────────────────────────────── */
  --badge-bg:      #FFFFFF;
  --badge-fg:      #2E211C;
  --badge-border:  1px solid #E4D8CB;
  --badge-radius:  3px;
  --badge-alt-bg:  #1A1A1A;
  --badge-alt-fg:  #FFFFFF;

  --filter-active-bg: #1A1A1A;
  --filter-active-fg: #FFFFFF;

  --quote-style: italic;

  /* ── Footer ─────────────────────────────── */
  --footer-bg:     #FFFFFF;
  --footer-fg:     #1A1A1A;
  --footer-muted:  #5A5A5A;
  --footer-border: #E6E2DE;
}

/* ── Skin-specifieke bijstellingen ──────────────────────── */

/* Tweede menurij onder de hoofdbalk — Laura Mercier heeft er twee */
.sr-nav__row2 {
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
}
.sr-nav__row2 .sr-nav__inner {
  min-height: 46px;
  grid-template-columns: 1fr;
  justify-items: center;
}
.sr-nav__row2 .sr-nav__links { gap: clamp(0.9rem, 2vw, 1.9rem); }
.sr-nav__row2 .sr-nav__link { font-size: 0.8125rem; }
@media (max-width: 980px) { .sr-nav__row2 { display: none; } }

/* Serif-titels mogen wat dichter op elkaar staan */
.sr-section-title, .sr-hero__title, .sr-pdp__title { line-height: 1.08; }

/* Prijs krijgt in deze skin het accent */
.sr-product-card__price { color: var(--accent); font-size: 1rem; }

.sr-usp__icon { color: var(--accent); }


/* ── Logo in de balk ─────────────────────────────────────
   Het monogram staat naast de naam: alleen het teken is niet
   herkenbaar genoeg voor een nieuw merk.
   Divi: Image module + Text module naast elkaar in de header,
   of het logoveld van de Menu module.
   ──────────────────────────────────────────────────────── */
.sr-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.sr-nav__brand img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .sr-nav__brand img { height: 24px; }
  .sr-nav__brand { gap: 0.5rem; font-size: 1.125rem; }
}

.sr-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sr-footer__brand img { height: 34px; width: auto; }