/* ============================================================================
   Mister Szoko — boutique. Composée uniquement avec les jetons du design
   system (tokens.css) : chocolat / crème / caramel, Plus Jakarta Sans +
   Mulish + DM Mono, coins doux, ombres chaudes, motion « melt ».
   Aucune couleur en dur en dehors des ombres translucides du DS.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs);
}

.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.block { padding-top: var(--space-8); padding-bottom: var(--space-9); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.muted { color: var(--text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight);
     letter-spacing: var(--tracking-tight); color: var(--text-strong); font-weight: var(--weight-semibold); }
h2 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text-strong);
     font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); font-weight: var(--weight-semibold); }
.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-body); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.section-head { margin-bottom: var(--space-6); }
.section-head .sub { color: var(--text-muted); margin-top: var(--space-2); max-width: 56ch; }

/* ---- Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold);
  padding: 12px 24px; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: var(--lift); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
.btn--accent { background: var(--accent); color: var(--text-on-accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--brand { background: var(--brand); color: var(--cream-50); }
.btn--brand:hover { background: var(--brand-hover); }
.btn--ghost { background: transparent; color: var(--text-body); border-color: var(--border-default); }
.btn--ghost:hover { background: var(--surface-raised); }
.btn--sm { padding: 8px 16px; font-size: var(--text-xs); }
/* « Dodaj do koszyka » est un btn--sm : 33 px de haut sur un telephone, sous
   la barre du tactile. C'est LE bouton de la boutique — le rater une fois sur
   trois, c'est un panier qu'on ne remplit pas. La taille visuelle ne change
   pas sur un ecran pointe a la souris ; seule la zone touchable grandit. */
@media (pointer: coarse), (max-width: 760px) {
  .btn--sm { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  /* Les liens du pied de page se touchent aussi : 20 px, colles les uns aux
     autres, on vise « Kontakt » et on ouvre « Panel marki ». */
  .site-foot a { display: inline-block; min-height: 40px; line-height: 40px; }
}
.btn--lg { padding: 15px 30px; font-size: var(--text-md); }
.btn--block { display: flex; width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-muted);
           font-family: var(--font-sans); font-size: var(--text-xs); text-decoration: underline; }
.linkbtn:hover { color: var(--danger); }
.back { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.back:hover { color: var(--text-strong); }

/* ---- En-tête --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cream-50) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.head-in { display: flex; align-items: center; gap: var(--space-5); padding-top: 12px; padding-bottom: 12px; }
.head-logo img { height: 44px; width: auto; }
.head-nav { display: flex; gap: var(--space-5); margin-left: var(--space-4); }
.navlink { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-body);
           padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--dur-base) var(--ease-out); }
.navlink:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }

.langs { display: inline-flex; gap: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px; }
.langs a { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
           letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: 5px 9px; border-radius: var(--radius-pill); }
.langs a:hover { color: var(--text-strong); }
/* Trois cibles collées de 32 × 27 px : sur un pouce, on vise PL et on touche
   UA. Sous la barre du tactile on les élargit — la pastille garde sa taille
   visuelle, c'est la zone touchable qui grandit. */
@media (max-width: 760px) {
  .langs a { min-width: 44px; min-height: 40px; display: inline-flex;
             align-items: center; justify-content: center; padding: 5px 8px; }
}
.langs a[aria-current="true"] { background: var(--brand); color: var(--cream-50); }

.cart-btn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm);
            font-weight: var(--weight-semibold); color: var(--text-strong);
            background: var(--surface-card); border: 1px solid var(--border-default);
            border-radius: var(--radius-pill); padding: 8px 14px; box-shadow: var(--shadow-xs); }
.cart-btn:hover { border-color: var(--border-strong); }
.cart-count { font-family: var(--font-mono); font-size: var(--text-2xs); min-width: 20px; height: 20px;
              display: inline-flex; align-items: center; justify-content: center;
              background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-pill); padding: 0 6px; }
.cart-count.is-zero { background: var(--cream-300); color: var(--text-muted); }

/* ---- Hero ------------------------------------------------------------------ */
.hero { background: radial-gradient(130% 120% at 15% 10%, var(--choco-600), var(--choco-900)); color: var(--cream-50); }
.hero-in { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.hero .eyebrow { color: var(--caramel-400); margin-bottom: var(--space-4); }
.hero h1 { color: var(--cream-50); font-size: clamp(2rem, 5vw, var(--text-4xl)); max-width: 18ch; margin-bottom: var(--space-4); }
.hero .lead { color: var(--cream-200); max-width: 48ch; margin-bottom: var(--space-6); }

/* ---- Promesses ------------------------------------------------------------- */
/* Le bandeau mono ferme désormais le hero : les promesses ne le chevauchent
   plus, elles s'ouvrent en dessous. */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4);
            margin-top: var(--space-7); }
.promise { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
           padding: var(--space-5); box-shadow: var(--shadow-sm); }
.promise h2 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.promise p { color: var(--text-muted); font-size: var(--text-sm); }

/* ---- Grille produits ------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
        overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
                    border-color var(--dur-base) var(--ease-out); }
.card:hover { transform: var(--lift); box-shadow: var(--shadow-md); border-color: var(--choco-300); }
.card-media { display: block; position: relative; }
/* « cover » remplit le cadre en COUPANT ce qui dépasse. Sur une photo de
   tablette prise debout — 600 × 1000 — le cadre 4/3 en jetait 40 % : les deux
   extrémités du produit, précisément ce qu'on regarde avant d'acheter.
   « contain » garde la photo entière ; c'est le CADRE qui tient le rythme de
   la grille, plus l'image. Le fond crème fait de la marge une intention. */
.card-photo { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; }
.badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: var(--text-2xs);
         text-transform: uppercase; letter-spacing: var(--tracking-wide);
         background: var(--gold-500); color: var(--choco-900); border-radius: var(--radius-pill); padding: 4px 10px; }
.card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Deux lignes réservées : sans cela une référence longue décale le titre et
   les cartes d'une même rangée ne s'alignent plus. */
.card-meta { color: var(--text-muted); text-transform: uppercase; font-size: var(--text-2xs);
             min-height: 2.4em; }
/* Prix au-dessus, bouton pleine largeur en dessous : côte à côte, « Dodaj do
   koszyka » passe à la ligne sur les noms longs et déforme la rangée. */
.card-buy { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
            display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.card-buy .btn { width: 100%; white-space: nowrap; }
.card-buy .price { display: flex; align-items: baseline; gap: 8px; }
.card-buy .price small { display: inline; }
.price { font-family: var(--font-mono); font-size: var(--text-md); color: var(--price); font-weight: 500; }
.price small { display: block; font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.price--lg { font-size: var(--text-2xl); }
.out { color: var(--danger); text-transform: uppercase; font-size: var(--text-2xs); }

/* Visuel de repli : un dégradé aux couleurs du produit, pas un cadre vide. */
.visual { position: relative; display: grid; place-items: center; }
/* Pastille sombre translucide : la mention reste lisible aussi bien sur le
   chocolat noir que sur le dégradé crème de la chocolat blanc — où du texte
   crème sur fond crème disparaissait purement et simplement. */
.visual-mark { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-caps);
               color: var(--cream-50); background: rgba(28, 13, 6, 0.34);
               padding: 6px 14px; border-radius: var(--radius-pill); backdrop-filter: blur(2px); }

/* ---- Fiche produit --------------------------------------------------------- */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; margin-top: var(--space-5); }
/* Sur la fiche, c'est encore plus vrai : on décide d'acheter en regardant.
   Une photo recadrée montre le milieu d'un produit dont on ne verra jamais
   les bords — et rien ne signale qu'il manque quelque chose. */
/* SANS FOND ni ombre. Le cadre crème rendait le vide visible : une photo
   haute flottait dans un panneau clair qui se lisait comme un défaut, pas
   comme une marge. Le cadre garde sa place (aspect-ratio), l'image s'y centre,
   et rien ne se dessine autour — l'ombre aurait tracé un rectangle plus grand
   que la photo. */
.product-photo { aspect-ratio: 1 / 1; width: 100%; object-fit: contain;
                 border-radius: var(--radius-xl); }
.product-buy .eyebrow { color: var(--caramel-600); margin-bottom: var(--space-2); }
.product-buy h1 { margin-bottom: var(--space-3); }
.product-buy .lead { margin-bottom: var(--space-5); max-width: 46ch; }
.product-buy .price--lg { margin-bottom: 4px; }
.buy-form { display: flex; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); flex-wrap: wrap; }
.stock { margin-bottom: var(--space-5); }
.qty input { width: 82px; font-family: var(--font-mono); font-size: var(--text-md); text-align: center;
             padding: 12px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
             background: var(--surface-card); color: var(--text-strong); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--space-5);
         border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); font-size: var(--text-sm); }
.specs dt { color: var(--text-muted); }
.specs dd { color: var(--text-strong); }

/* ---- Panier ---------------------------------------------------------------- */
.cart, .checkout, .order-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-7); align-items: start; margin-top: var(--space-6); }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: var(--space-4); align-items: center;
             padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.thumb { width: 88px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); }
.cart-info h2 { font-size: var(--text-lg); }
.cart-sum { font-size: var(--text-md); color: var(--text-strong); }
.cart-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

.summary { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
           padding: var(--space-6); box-shadow: var(--shadow-sm); position: sticky; top: 84px; }
.summary h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.sum-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sum-lines li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.sum-lines em { color: var(--text-muted); font-style: normal; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px var(--space-4);
          border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.totals dt { color: var(--text-body); }
.totals dd { color: var(--text-strong); text-align: right; }
.totals .grand { font-size: var(--text-lg); color: var(--text-strong); font-weight: var(--weight-bold); }
.totals .small { font-size: var(--text-2xs); color: var(--text-muted); }

.freeship { margin-bottom: var(--space-5); }
.freeship p { font-size: var(--text-sm); margin-bottom: 8px; }
.freeship .bar { height: 6px; border-radius: var(--radius-pill); background: var(--cream-300); overflow: hidden; }
.freeship .bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill);
                   transition: width var(--dur-slow) var(--ease-out); }

.radio, .check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
                 padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
                 margin-bottom: 10px; background: var(--bg-page); transition: border-color var(--dur-base) var(--ease-out); }
.radio:hover, .check:hover { border-color: var(--border-strong); }
.radio input, .check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.radio span, .check span { display: block; font-size: var(--text-sm); }
.radio em { float: right; font-style: normal; color: var(--price); }
.radio small, .check small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
.ship-pick { margin-bottom: var(--space-5); }

/* ---- Code de réduction ------------------------------------------------------
   Le champ et son bouton sur UNE ligne : séparés, le bouton passe sous le pli
   sur un téléphone et le code saisi n'est jamais appliqué. */
.voucher { margin-bottom: var(--space-5); }
.voucher .field { margin-bottom: 0; }
.voucher-row { display: flex; gap: 8px; align-items: stretch; }
.voucher-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.voucher-row .btn { flex: none; white-space: nowrap; }
.voucher-on { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
              padding: 10px 14px; border-radius: var(--radius-md);
              background: var(--cream-200, var(--surface-card));
              border: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.voucher-on strong { color: var(--text-strong); letter-spacing: .04em; }
.voucher-on span { color: var(--price); }
.voucher-on .linkbtn { margin-left: auto; }

/* ---- Caisse ---------------------------------------------------------------- */
.checkout-form fieldset { background: var(--surface-card); border: 1px solid var(--border-subtle);
                          border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5);
                          box-shadow: var(--shadow-xs); }
.checkout-form legend { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong);
                        font-weight: var(--weight-semibold); padding: 0 8px; margin-left: -8px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
/* Cocher/radio exclus : sans cette exception ils héritent de `width: 100%`
   et d'un padding de champ texte — la case du règlement s'étalait sur toute
   la largeur, l'étiquette rejetée hors du cadre. */
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea {
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-strong);
  padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-page); width: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field textarea:hover { border-color: var(--border-strong); }
.field .check { margin-bottom: 0; }
.field .check span { font-weight: var(--weight-regular); }
.field .hint { color: var(--text-muted); font-size: var(--text-xs); }
.field .err { color: var(--danger); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.field.has-error input { border-color: var(--danger); }
.field.wide { grid-column: 1 / -1; }
.pay-info { margin-top: var(--space-4); text-align: center; }

/* Le piège du formulaire de contact. `display:none` suffirait à le cacher,
   mais certains robots l'évitent précisément parce qu'il est trop visible
   dans le style ; on le sort du flux sans le déclarer masqué. Il porte déjà
   aria-hidden et tabindex="-1" : personne au clavier ni au lecteur d'écran
   ne le rencontre. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--text-sm); margin-bottom: var(--space-5); }
.notice--error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.notice--warn  { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--caramel-600); }
.notice--ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }

/* ---- Confirmation ---------------------------------------------------------- */
.thanks { text-align: center; padding: var(--space-7) 0 var(--space-6); }
.thanks .order-code { margin: var(--space-3) 0; font-size: var(--text-md); color: var(--text-strong); }
.order-grid { grid-template-columns: 1fr 360px; }
.order-grid section h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }

/* ---- Pied de page ---------------------------------------------------------- */
.site-foot { background: var(--choco-950); color: var(--choco-300); margin-top: var(--space-10); }
.foot-in { padding-top: var(--space-7); padding-bottom: var(--space-7); display: flex;
           justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.foot-logo { height: 36px; width: auto; opacity: 0.9; margin-bottom: var(--space-3); }
.foot-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.foot-links a { border-bottom: 1px solid var(--choco-700); padding-bottom: 1px; }
.foot-links a:hover { color: var(--cream-100); }

/* ---- Adaptations ----------------------------------------------------------- */
@media (max-width: 900px) {
  .cart, .checkout, .order-grid, .product { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 640px) {
  .head-nav { display: none; }
  .cart-label { display: none; }
  .row { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 64px 1fr auto; grid-template-areas: "t i i" "t q s" "t r r"; }
  .thumb { width: 64px; }
  .cart-line .cart-thumb { grid-area: t; }
  .cart-line .cart-info { grid-area: i; }
  .cart-line .qty { grid-area: q; }
  .cart-line .cart-sum { grid-area: s; text-align: right; }
  .cart-line .linkbtn { grid-area: r; justify-self: start; }
  .wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .navlink, .freeship .bar i { transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ============================================================================
   Sections éditoriales reprises de la landing — la boutique et la page de
   marque ne font plus qu'une. Mêmes jetons, mêmes règles.
   ============================================================================ */

/* Bandeau mono sous le hero : les trois arguments qui décident un pro. */
.hero-strip { border-top: 1px solid var(--choco-700); }
.hero-strip-in { display: flex; gap: var(--space-8); flex-wrap: wrap;
                 padding-top: var(--space-4); padding-bottom: var(--space-4);
                 color: var(--choco-300); }

.band { background: var(--surface-card); border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle); }
.eyebrow.accent { color: var(--caramel-600); margin-bottom: var(--space-2); }
.tagline { margin-top: var(--space-4); }

.pro { background: var(--choco-800); color: var(--cream-50); border-radius: var(--radius-2xl); overflow: hidden; }
.pro-in { padding: var(--space-8); display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); flex-wrap: wrap; }
.pro .eyebrow { color: var(--caramel-400); margin-bottom: var(--space-2); }
.pro h2 { color: var(--cream-50); margin-bottom: var(--space-2); }
.pro p { color: var(--cream-200); max-width: 56ch; }

.site-foot .foot-links a { color: var(--choco-300); }

/* Mentions légales du vendeur : lisibles, jamais mises en avant. */
.site-foot .seller { margin: var(--space-4) 0; line-height: 1.7; color: var(--choco-300); }
.site-foot .seller-label { display: block; color: var(--choco-400); text-transform: uppercase;
                           letter-spacing: var(--tracking-caps); font-size: var(--text-2xs); margin-bottom: 3px; }

/* Sélecteur de pays : même traitement que les champs texte. */
.field select { font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-strong);
                padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
                background: var(--bg-page); width: 100%; }
.field select:hover { border-color: var(--border-strong); }
.totals .rc { color: var(--berry-600); font-weight: var(--weight-semibold); }

/* Rupture assumée et remise au poids : deux informations qui doivent se voir
   sans crier — l'une rassure, l'autre récompense. */
.ondemand { color: var(--caramel-600); text-transform: uppercase; font-size: var(--text-2xs);
            letter-spacing: var(--tracking-wide); }
.totals .disc { color: var(--success); font-weight: var(--weight-semibold); }
.nudge { background: var(--surface-raised); border: 1px dashed var(--border-default);
         border-radius: var(--radius-md); padding: 10px 13px; margin-bottom: var(--space-4);
         color: var(--caramel-600); }


/* --- Fil d'Ariane ---------------------------------------------------------
   Le chemin du retour, et ce que Google affiche sous le titre à la place de
   l'URL. Il se replie sur une seule ligne défilante sur téléphone plutôt que
   d'occuper trois lignes de hauteur. */
.crumbs {
  display: flex; align-items: center; gap: 6px 8px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  font-size: 13px; color: var(--text-muted);
  margin: 0 0 18px; padding-bottom: 2px;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; white-space: nowrap; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sepc { color: var(--border-default); }
.crumbs [aria-current] { color: var(--text-strong); font-weight: 600; white-space: nowrap; }
@media (min-width: 700px) { .crumbs { flex-wrap: wrap; overflow: visible; } }

/* Confirmation d'ajout, à l'endroit où l'on a cliqué. */
.added-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: var(--success); font-size: 13.5px; font-weight: 600;
}
.added-note a { color: inherit; text-decoration: underline; }

/* --- Marques ---------------------------------------------------------------
   Le logo est posé sur un fond neutre et contraint en hauteur : les logos
   fournis n'ont jamais le même gabarit, et sans cette contrainte une image
   carrée écraserait la carte pendant qu'une image large resterait minuscule.
   object-fit: contain garde les proportions quoi qu'on nous envoie. */
.brand-mark { display: block; height: 22px; margin: 0 0 6px; }
.brand-mark img { height: 100%; width: auto; max-width: 120px; object-fit: contain; display: block; }
.brand-mark--text { font: 600 11px/22px var(--font-mono); letter-spacing: .08em;
                    text-transform: uppercase; color: var(--text-muted); }
.brand-mark--lg { height: 40px; margin: 0; }
.brand-mark--lg img { max-width: 190px; }
.brand-mark--lg.brand-mark--text { font-size: 14px; line-height: 40px; }
.brand-line { display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
              padding: 0 0 14px; border-bottom: 1px solid var(--border-subtle); }
.brand-line .brand-name { display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
.brand-line .brand-name a { color: var(--brand); }

/* ---- Reprendre la même commande, à un rythme --------------------------------
   Le bloc vit sous la confirmation : c'est le seul moment où l'acheteur sait
   exactement ce qu'il reprendrait. */
.resub { margin-top: var(--space-6); padding: var(--space-5);
         background: var(--surface-card); border: 1px solid var(--border-subtle);
         border-radius: var(--radius-lg); }
.resub h2 { margin-bottom: 6px; }
.resub p { margin-bottom: var(--space-4); max-width: 62ch; }
.resub form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.resub-pick { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm);
              font-weight: var(--weight-semibold); color: var(--text-strong); }
.resub-pick select { min-width: 190px; }

/* ---- Réclamation / rétractation ---------------------------------------------
   Sous le suivi de commande. Le compteur de jours est en mono, comme tous les
   chiffres de la boutique : c'est une donnée, pas une phrase. */
.claim { margin-top: var(--space-6); padding: var(--space-5);
         background: var(--surface-card); border: 1px solid var(--border-subtle);
         border-radius: var(--radius-lg); }
.claim h2 { margin-bottom: 6px; }
.claim > p { margin-bottom: var(--space-3); max-width: 62ch; }
.claim form { margin-top: var(--space-4); }
.claim .field { max-width: 62ch; }
.claim textarea { width: 100%; font-family: var(--font-sans); font-size: var(--text-sm);
                  padding: 10px 12px; border: 1px solid var(--border-default);
                  border-radius: var(--radius-md); background: var(--bg-page);
                  color: var(--text-body); resize: vertical; min-height: 96px; }
.claim select { max-width: 100%; }

/* ---- Sélecteur de Paczkomat sur carte ---------------------------------------
   LE POINT QUI DÉCIDE DE TOUT : `inpost-geowidget` est un élément inconnu du
   navigateur tant que le script d'InPost n'a pas défini le composant. Un
   élément inconnu est `display: inline` et haut de ZÉRO pixel — sans hauteur
   explicite, la carte se charge parfaitement et reste invisible. On la
   dimensionne donc ici, et pas dans le script : le CSS arrive toujours, lui.

   La hauteur est en `min()` parce qu'une carte de 520 px sur un téléphone
   pousse le bouton « Zapłać » hors de l'écran, et qu'on ne fait pas défiler
   une caisse pour retrouver le bouton qu'on cherchait. */
.geo { margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.geo-chosen { margin-top: var(--space-3); padding: 9px 12px; font-size: var(--text-sm);
              background: var(--surface-raised); border: 1px solid var(--border-subtle);
              border-radius: var(--radius-md); color: var(--text-strong); }
.geo-fail { margin-top: var(--space-3); padding: 9px 12px; font-size: var(--text-sm);
            color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent);
            border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
            border-radius: var(--radius-md); max-width: 62ch; }
/* La sortie de secours, montrée tant que la carte est ouverte. Elle n'annonce
   pas une panne — elle rappelle que le champ au-dessus marche toujours — donc
   elle se lit comme une note, pas comme une alerte. C'est ce qui sauve la
   commande le jour où la carte se dessine mais refuse le jeton. */
.geo-help { margin-top: var(--space-3); font-size: var(--text-sm);
            color: var(--text-muted); max-width: 62ch; line-height: 1.6; }
.geo-box { margin-top: var(--space-3); border: 1px solid var(--border-default);
           border-radius: var(--radius-md); overflow: hidden; }
/* `:defined` N'EST PAS UN DÉTAIL. Sans lui, la règle s'applique AUSSI quand le
   script d'InPost n'est jamais arrivé : l'élément reste inconnu, mais il prend
   quand même ses 460 px, et le client se retrouve devant un grand cadre vide
   que rien n'explique. Pire, le repli qui devait le prévenir mesure une
   hauteur — donc il se tait. On ne dimensionne qu'une fois le composant
   réellement défini. */
.geo-box inpost-geowidget:defined { display: block; width: 100%; height: min(60vh, 460px); }

/* ---- Rayons du catalogue ---------------------------------------------------
   Des liens, pas des onglets : ils se partagent, se mettent en signet, et
   fonctionnent sans JavaScript. Le compte à côté du nom évite d'ouvrir un
   rayon pour découvrir qu'il tient deux articles. */
.rayons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.rayons a { display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 14px; border-radius: var(--radius-pill);
            border: 1px solid var(--border-default); font-size: var(--text-sm);
            color: var(--text-body); transition: border-color var(--dur-base) var(--ease-out); }
.rayons a:hover { border-color: var(--choco-300); }
.rayons a.on { background: var(--choco-800); border-color: var(--choco-800); color: var(--cream-50); }
.rayons a i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs); opacity: .65; }

/* Le prix au kilo : discret, mais lisible. Il répond à la question qu'on se
   pose entre un format 1 kg et un format 3 kg — sans obliger à la calculer. */
.za-kg { display: block; font-size: var(--text-2xs); color: var(--text-muted);
         font-weight: var(--weight-regular); letter-spacing: 0; margin-top: 2px; }
.price--lg .za-kg { font-size: var(--text-xs); margin-top: 4px; }