/* ════════════════════════════════════════════════════════════════
   CARAT V2 — TYPOGRAPHIE (proposition, pages V2 seulement)
   Demande de Samy du 12/11 : une typographie premium, pas le couple
   Playfair + Inter que l'on voit partout.

   · Titres, noms, prix : Cormorant Garamond — la police du hero validé
     le 21/10 et celle des maquettes « V1.5 ». Tout le site parle enfin
     de la même voix que son premier écran.
   · Texte et interface : Jost — sans géométrique fin, dans la lignée
     des capitales espacées de la parfumerie.

   Le Core fixe encore Playfair + Inter (BRAND RULE) : cette feuille est
   une proposition à valider, puis à inscrire dans DECISIONS.md.
   Une seule feuille à retirer pour revenir en arrière.
   ════════════════════════════════════════════════════════════════ */
:root {
  --f-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-italic: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-sans:   'Jost', 'Inter', system-ui, -apple-system, sans-serif;
}
/* Cormorant et Jost ont un œil plus petit que Playfair et Inter : on aligne
   la hauteur d'œil pour garder les tailles et la lisibilité de la V1. */
html { font-size-adjust: .5; }
.hx { --hx-sans: 'Jost', 'Inter', system-ui, sans-serif; }
/* Le Garamond respire mieux avec un peu plus de graisse et un interlettrage neutre. */
h1, h2, h3, .cro-signature h3, .v2c-carte h2, .v2f-identite h1 { font-weight: 500; letter-spacing: 0; }

/* ── Marque : le logotype officiel dans la navigation des pages V2 ──
   Le grand C qui enveloppe « ARAT », tracé sur l'étiquette réelle (même
   fichier que l'accueil, hero-maison.css). Le mot « CARAT » reste dans le
   HTML pour les lecteurs d'écran ; seule sa forme change. */
.nav .nav__logo {
  display: block; width: 74px; height: 52px; min-height: 0;
  font-size: 0; color: transparent; letter-spacing: 0;
  background: #1E1B18;
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
}
.nav--dark .nav__logo, .cro-flow .nav .nav__logo { background: #EAD4AD; }

/* ════════════════════════════════════════════════════════════════
   Raccords communs (12/11, après critique) — fiches et collection.
   body:not(.cro-flow) : l'accueil, validé, n'est jamais touché.
   ════════════════════════════════════════════════════════════════ */

/* ── Pied de page hérité de base.css : lisible (≥ 4,5:1) ───────────
   Avant : « © 2026 » 1,88:1 · liens 4,03:1 · description 3,48:1. */
body:not(.cro-flow) .footer__brand-desc { color: rgba(255, 255, 255, .7); }
body:not(.cro-flow) .footer__col-link { color: rgba(255, 255, 255, .74); }
body:not(.cro-flow) .footer__col-link:hover { color: #fff; }
body:not(.cro-flow) .footer__legal { color: rgba(255, 255, 255, .62); }
body:not(.cro-flow) .footer__nl-input::placeholder { color: rgba(255, 255, 255, .6); }
body:not(.cro-flow) .footer__col-link:focus-visible,
body:not(.cro-flow) .footer__nl-btn:focus-visible { outline: 2px solid #EAD4AD; outline-offset: 2px; }
/* Le mot « CARAT » devient le logotype officiel (même masque que la navigation) ;
   le texte reste dans le HTML pour les lecteurs d'écran. */
body:not(.cro-flow) .footer__brand-logo .logo-w {
  width: 82px; height: 58px; padding: 0;
  font-size: 0; color: transparent; letter-spacing: 0; opacity: 1;
  background: #EAD4AD;
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') left center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') left center / contain no-repeat;
}
/* Au toucher : chaque lien et le champ de la lettre font 44 px de haut. */
@media (max-width: 899px), (pointer: coarse) {
  body:not(.cro-flow) .footer__col-links { gap: 0; }
  body:not(.cro-flow) .footer__col-link { display: flex; align-items: center; min-height: 44px; }
  body:not(.cro-flow) .footer__nl-input,
  body:not(.cro-flow) .footer__nl-btn { min-height: 44px; }
}

/* ── Navigation mobile alignée sur l'accueil (hero-maison.css) ──────
   Menu à gauche, logotype centré, recherche et panier à droite.
   Le bandeau d'annonce et la position de la barre ne changent pas. */
@media (max-width: 899px) {
  body:not(.cro-flow) .nav {
    padding: 0 12px;
    display: grid; grid-template-columns: 44px 44px 1fr auto 1fr 44px 44px; align-items: center;
  }
  body:not(.cro-flow) .nav__right { display: contents; }
  /* De 769 à 899 px, les liens texte chevaucheraient le logotype centré : le menu les porte. */
  body:not(.cro-flow) .nav__links { display: none; }
  body:not(.cro-flow) .nav__hamburger { grid-column: 1; grid-row: 1; justify-self: start; }
  body:not(.cro-flow) .nav__logo { grid-column: 4; grid-row: 1; }
  body:not(.cro-flow) #search-open { grid-column: 6; grid-row: 1; }
  body:not(.cro-flow) .nav__cart-icon { grid-column: 7; grid-row: 1; }
}

/* ════════════════════════════════════════════════════════════════
   Finitions transverses (T11, 13/11) — toutes les pages qui chargent
   cette feuille, accueil compris.
   ════════════════════════════════════════════════════════════════ */

/* ── Recherche : barre et résultats empilés, dans l'écran ──────────
   Base.css prévoit une enveloppe .search-inner (présente sur l'accueil
   seulement). Sans elle, la barre et les résultats se plaçaient côte à
   côte dans le calque centré : à 390 px la barre partait à x = −44 et la
   liste sortait à droite (x = 234, 200 px de large). On empile, on borne
   à 552 px (la largeur utile de l'accueil) et on garde 24 px de marge. */
.search-overlay { flex-direction: column; align-items: center; justify-content: flex-start; }
.search-overlay > .search-bar,
.search-overlay > .search-results { width: calc(100% - 48px); max-width: 552px; }
/* Le champ garde ses 22 px de base.css (≥ 16 px : pas de zoom iOS) et peut rétrécir. */
.search-input { min-width: 0; }
/* La croix fait 44 px au toucher ; le dessin (20 px) ne bouge pas. */
.search-close { width: 44px; height: 44px; margin: -12px -12px -12px 0; justify-content: center; }
.search-close:focus-visible { outline: 2px solid #EAD4AD; outline-offset: -4px; }

/* ── Tiroir de menu : le logotype au grand C, comme la barre ───────
   Le mot « CARAT » reste dans le HTML (nom lu par les lecteurs d'écran). */
.nd-head__logo {
  display: block; width: 57px; height: 40px; padding: 0; flex-shrink: 0;
  font-size: 0; color: transparent; letter-spacing: 0;
  background: #EAD4AD;
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') left center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') left center / contain no-repeat;
}
/* Le bandeau d'annonce (.topbar, z-index 201) recouvrait le haut du tiroir
   de menu (200) et du mini-panier (190) : logotype rogné, croix du panier
   à moitié cachée. Ouverts, ils passent devant le bandeau. */
.nav-drawer, .mini-cart { z-index: 202; }

/* ── Recherche : une seule croix, celle de CARAT ─────────────────── */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-input::-ms-clear { display: none; width: 0; height: 0; }

/* ════════════════════════════════════════════════════════════════
   PANIER — mini-panier (toutes les pages) et éléments partagés avec
   la page panier (T23, 13/11). Source unique : l'ancien doublon de
   v2-boutique.css est retiré.

   · Le panneau passe en ivoire : c'est l'espace du choix et de l'achat
     (Core, BOUSSOLE §7 : « Noir = rupture, jamais le fond par défaut »),
     et les vignettes studio grises s'y lisent comme sur une étagère.
   · Le panneau est le seul à défiler : la liste ne cache plus d'articles
     dans un second défilement (à 390 px, le 2e article était invisible).
   · Le pied (total, Commander) reste collé en bas dès 641 px de haut ;
     en dessous, tout le panneau défile, comme en T12.
   · Gabarits (lignes, paliers, panier vide) : main.js, affichage seul.
   ════════════════════════════════════════════════════════════════ */
:root {
  --pn-ivoire: #F4F0E8;           /* Core : Élixirs = ivoire */
  --pn-encre: #1E1B18;
  --pn-encre-2: #5F5546;          /* texte secondaire, 6,4:1 sur l'ivoire */
  --pn-or: #7A6228;               /* or lisible, 5,2:1 */
  --pn-vert: #3B5A40;             /* gain acquis, 7:1 */
  --pn-filet: rgba(30, 27, 24, .12);
  --pn-studio: #D3D2CE;           /* fond studio des packshots gris (relevé sur les 4 images) */
  --pn-capsule: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%);
  --pn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Panneau ── */
.mini-cart {
  width: min(92vw, 420px);
  background: var(--pn-ivoire); color: var(--pn-encre);
  border-left: 1px solid var(--pn-filet);
  box-shadow: -18px 0 48px -24px rgba(14, 11, 8, .45);
  max-height: 100vh; max-height: 100dvh;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-top: 84px; scroll-padding-bottom: 24px;
  /* Fermé : hors de l'ordre de tabulation (avant, ses boutons restaient atteignables au clavier). */
  visibility: hidden;
  transition: right .32s cubic-bezier(.25, .1, .25, 1), visibility 0s linear .32s;
}
.mini-cart--open { visibility: visible; transition: right .32s cubic-bezier(.25, .1, .25, 1), visibility 0s; }
.cart-overlay { background: rgba(14, 11, 8, .42); }

.mini-cart__head {
  position: sticky; top: 0; z-index: 3;
  padding: 14px 12px 14px 20px;
  background: var(--pn-ivoire); border-bottom: 1px solid var(--pn-filet);
}
.mini-cart .mini-cart__title { font: 500 24px/1.1 var(--f-serif); color: var(--pn-encre); letter-spacing: 0; }
.mini-cart__count { font: 400 15px/1 var(--f-sans); color: var(--pn-encre-2); letter-spacing: .02em; }
.mini-cart .mini-cart__close {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  color: var(--pn-encre); background: transparent;
}
.mini-cart .mini-cart__close:hover { color: var(--pn-or); background: rgba(30, 27, 24, .05); }
.mini-cart .mini-cart__close svg { width: 20px; height: 20px; }

.mini-cart__perks { padding: 14px 20px 2px; flex: none; }
.mini-cart__perks:empty { display: none; }
.mini-cart .mini-cart__items { flex: 0 0 auto; overflow: visible; padding: 4px 20px 12px; min-height: 0; }
.mini-cart .mini-cart__empty { display: none; }

/* ── Pied : total, Commander, Continuer ── */
.mini-cart .mini-cart__footer {
  margin-top: auto; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  gap: 10px; background: var(--pn-ivoire);
  border-top: 1px solid var(--pn-filet);
}
@media (min-height: 641px) {
  .mini-cart .mini-cart__footer { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 24px -22px rgba(14, 11, 8, .5); }
  /* Un élément ramené à l'écran (Tab, scrollIntoView) s'arrête au-dessus du pied collé (≈ 245 px). */
  .mini-cart { scroll-padding-bottom: 260px; }
}
.mini-cart .mini-cart__subtotal { padding: 0; border: 0; color: var(--pn-encre); align-items: baseline; }
.mini-cart .mini-cart__subtotal span:first-child:not(.mini-cart__subtotal-val) {
  font: 500 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pn-encre-2);
}
.mini-cart .mini-cart__subtotal span.mini-cart__subtotal-val {
  font: 600 27px/1 var(--f-serif); color: var(--pn-encre);
  font-variant-numeric: lining-nums;
}
.mini-cart .vente-note { margin: 0; color: var(--pn-encre-2); font-size: 12.5px; line-height: 1.45; }
.mini-cart .mini-cart__btn-checkout {
  height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  color: #251910; background: var(--pn-capsule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -8px rgba(120, 84, 34, .55);
  font: 600 19px/1 var(--f-italic); letter-spacing: .01em; text-transform: none;
}
.mini-cart .mini-cart__btn-checkout:hover { background: var(--pn-capsule); }
.vente-fermee .mini-cart .mini-cart__btn-checkout { opacity: .72; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.mini-cart .mini-cart__btn-continue {
  min-height: 44px; padding: 0 12px; border: 0;
  color: var(--pn-encre); background: transparent;
  font: 500 17px/1 var(--f-italic); letter-spacing: .01em; text-transform: none;
  text-decoration: underline; text-decoration-color: rgba(30, 27, 24, .3); text-underline-offset: 4px;
}
.mini-cart .mini-cart__btn-continue:hover { color: var(--pn-or); border: 0; }
/* Mentions de service non confirmées tant que le paiement est fermé : discrètes, lisibles. */
.mini-cart .mini-cart__reassurance {
  margin: 0; padding: 0; border: 0; gap: 6px; flex-wrap: wrap;
  font: 400 11px/1.4 var(--f-sans); letter-spacing: .02em; text-transform: none;
  color: var(--pn-encre-2);
}
.mini-cart .mini-cart__reassurance svg { color: var(--pn-encre-2); }
.mini-cart .mini-cart__reassurance-sep { color: var(--pn-encre-2); }

/* ── Ligne d'article (mini-panier et page panier) ── */
.cl {
  position: relative;
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--pn-filet);
}
.cl:last-child { border-bottom: 0; }
.cl__img, .ce__sig img, .ce__coffret-img img, .perks__coffret-img img, .cx-card__img {
  display: block; aspect-ratio: 2 / 3; overflow: hidden;
  background: var(--pn-studio);
  border: 1px solid rgba(30, 27, 24, .07); border-radius: 3px;
}
.cl__img img, .cx-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl__body { display: flex; flex-direction: column; min-width: 0; }
.cl__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl__name {
  display: inline-block; padding: 12px 0; margin: -12px 0;
  font: 500 21px/1.15 var(--f-serif); color: var(--pn-encre); text-decoration: none;
}
.cl__name:hover { text-decoration: underline; text-decoration-color: rgba(30, 27, 24, .3); text-underline-offset: 4px; }
.cl__total { flex: none; font: 600 19px/1.15 var(--f-serif); color: var(--pn-encre); white-space: nowrap; }
.cl__meta { margin: 5px 0 0; font: 400 12.5px/1.35 var(--f-sans); letter-spacing: .02em; color: var(--pn-encre-2); }
.cl__unit { margin: 2px 0 0; font: 400 12.5px/1.35 var(--f-sans); color: var(--pn-encre-2); }
/* Après le raccourci font, qui remet les chiffres à « normal » (elzéviriens de Cormorant). */
.cl__total, .cl__unit, #cart-page-items .cl__total { font-variant-numeric: lining-nums tabular-nums; }
.cl__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: auto; padding-top: 10px; }
.cl__qty {
  display: inline-flex; align-items: center; height: 46px;
  border: 1px solid rgba(30, 27, 24, .22); border-radius: 999px; background: rgba(255, 255, 255, .5);
}
.cl__qty-btn {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--pn-encre); font: 400 20px/1 var(--f-sans); cursor: pointer;
  transition: background .18s ease;
}
.cl__qty-btn:hover { background: rgba(30, 27, 24, .06); }
.cl__qty-val { min-width: 22px; text-align: center; font: 500 15px/1 var(--f-sans); color: var(--pn-encre); font-variant-numeric: tabular-nums; }
.cl__remove {
  min-height: 44px; padding: 0 2px; border: 0; background: transparent; cursor: pointer;
  font: 400 13px/1 var(--f-sans); letter-spacing: .02em; color: var(--pn-encre-2);
  text-decoration: underline; text-decoration-color: rgba(95, 85, 70, .35); text-underline-offset: 4px;
}
.cl__remove:hover { color: var(--pn-encre); }
/* Retour visuel : la ligne modifiée s'éclaire, la quantité marque le pas. */
.cl::before {
  content: ''; position: absolute; inset: 6px -10px; z-index: -1; border-radius: 6px;
  background: rgba(214, 183, 132, .28); opacity: 0; pointer-events: none;
}
.cl-list { position: relative; z-index: 0; }
.cl--vu::before { animation: pn-vu 1.2s var(--pn-ease); }
.cl--vu .cl__qty-val, .cl--vu .cl__total { animation: pn-pas .32s var(--pn-ease); }
@media (max-width: 360px) {
  .cl { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .cl__name { font-size: 19px; }
  .cl__total { font-size: 17px; }
}
@keyframes pn-vu { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pn-pas { 0% { transform: translateY(-3px); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* ── Paliers et livraison (un seul bloc) ── */
:is(.mini-cart, .cart-page) .perks {
  gap: 9px; margin: 0; padding: 14px 16px;
  border: 1px solid rgba(122, 98, 40, .24); border-radius: 6px;
  background: rgba(255, 255, 255, .42);
}
:is(.mini-cart, .cart-page) .perks p { margin: 0; }
:is(.mini-cart, .cart-page) .perks__ship { display: flex; align-items: center; gap: 8px; font: 400 13.5px/1.4 var(--f-sans); color: var(--pn-encre); }
:is(.mini-cart, .cart-page) .perks__ship strong { color: var(--pn-encre); font-weight: 600; }
:is(.mini-cart, .cart-page) .perks__ship--on, :is(.mini-cart, .cart-page) .perks__ship--on strong { color: var(--pn-vert); }
:is(.mini-cart, .cart-page) .perks__ship svg { flex: none; }
:is(.mini-cart, .cart-page) .perks__bar { height: 3px; background: rgba(30, 27, 24, .1); }
:is(.mini-cart, .cart-page) .perks__bar-fill { background: linear-gradient(90deg, #B8944A, #D6B784); }
:is(.mini-cart, .cart-page) .perks__tiers {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
:is(.mini-cart, .cart-page) .perks__tier {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 8px; border: 1px solid var(--pn-filet); border-radius: 4px;
  background: transparent; color: var(--pn-encre-2); white-space: nowrap;
}
.perks__tier-q { font: 500 10.5px/1.2 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; }
.perks__tier-p { font: 600 17px/1 var(--f-serif); color: var(--pn-encre); font-variant-numeric: lining-nums; }
:is(.mini-cart, .cart-page) .perks__tier--on { border-color: var(--pn-or); background: rgba(214, 183, 132, .26); color: var(--pn-encre); font-weight: 400; }
:is(.mini-cart, .cart-page) .perks__saved { font: 400 13.5px/1.4 var(--f-sans); color: var(--pn-vert); }
:is(.mini-cart, .cart-page) .perks__saved strong { font-weight: 600; }
:is(.mini-cart, .cart-page) .perks__next { font: 400 12.5px/1.4 var(--f-sans); color: var(--pn-encre-2); }
:is(.mini-cart, .cart-page) .perks__next strong { color: var(--pn-encre); font-weight: 600; }

/* Passerelle Coffret, sous les articles du mini-panier (2 à 3 Élixirs). */
.mini-cart .perks__coffret {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--pn-filet);
}
.perks__coffret-img img { width: 48px; height: 72px; object-fit: cover; }
.mini-cart .perks__coffret-q { font: 500 16px/1.25 var(--f-serif); color: var(--pn-encre); margin: 0 0 2px; }
.mini-cart .perks__coffret-a { font: 400 12.5px/1.4 var(--f-sans); color: var(--pn-encre-2); opacity: 1; margin: 0; }
.mini-cart .perks__coffret-cta {
  min-height: 44px; align-items: center; padding: 0; border: 0;
  font: 500 12px/1 var(--f-sans); letter-spacing: .14em; color: var(--pn-or);
  text-decoration: underline; text-decoration-color: rgba(122, 98, 40, .45); text-underline-offset: 5px;
}

/* ── Panier vide : les quatre Élixirs et le Coffret ── */
.ce { padding: 22px 0 8px; text-align: center; }
.ce__title { margin: 0 0 6px; font: 500 25px/1.15 var(--f-serif); color: var(--pn-encre); letter-spacing: 0; }
.ce__sub { margin: 0 0 18px; font: 400 13.5px/1.45 var(--f-sans); color: var(--pn-encre-2); }
.ce__sigs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ce__sig { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 44px; text-decoration: none; color: var(--pn-encre); }
.ce__sig img { width: 100%; height: auto; object-fit: cover; margin-bottom: 4px; transition: transform .35s var(--pn-ease); }
.ce__sig:hover img { transform: translateY(-2px); }
.ce__sig-name { font: 500 14.5px/1.12 var(--f-serif); }
.ce__sig-fam { font: 400 10.5px/1.3 var(--f-sans); color: var(--pn-encre-2); }
.ce__coffret {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  margin: 0 0 16px; padding: 10px 14px 10px 10px; text-align: left; text-decoration: none; color: var(--pn-encre);
  border: 1px solid var(--pn-filet); border-radius: 4px; background: rgba(255, 255, 255, .42);
}
.ce__coffret-img img { width: 44px; height: 66px; object-fit: cover; }
.ce__coffret-txt { display: flex; flex-direction: column; gap: 3px; }
.ce__coffret-name { font: 500 18px/1.1 var(--f-serif); }
.ce__coffret-fam { font: 400 12.5px/1.3 var(--f-sans); color: var(--pn-encre-2); font-variant-numeric: lining-nums; }
.ce__coffret-go { font-size: 18px; color: var(--pn-or); }
.ce__cta {
  display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px;
  border-radius: 999px; color: #251910; background: var(--pn-capsule); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -8px rgba(120, 84, 34, .55);
  font: 600 19px/1 var(--f-italic); letter-spacing: .01em;
}

/* ── Clavier, lecteurs d'écran, mouvement réduit ── */
:is(.mini-cart, .cart-page) :is(a, button):focus-visible { outline: 2px solid var(--pn-or); outline-offset: 2px; }
:is(.mini-cart, .cart-page) .cl__qty-btn:focus-visible { outline-offset: -3px; }
.sr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .mini-cart, .mini-cart--open { transition: none; }
  .cl--vu::before, .cl--vu .cl__qty-val, .cl--vu .cl__total { animation: none; }
  :is(.mini-cart, .cart-page) .perks__bar-fill, .ce__sig img { transition: none; }
}