/* =============================================================================
   GLASSORA — PAGE PANIER
   La dernière page avant la commande. Elle doit répondre à trois questions,
   dans cet ordre :
      1. qu'est-ce que je vais recevoir ?   → l'aperçu du bon à graver (la planche)
      2. qu'est-ce qu'il me reste à faire ? → valider mon BAT
      3. qu'est-ce que je vais payer ?      → le récapitulatif, puis le bouton

   La composition traduit littéralement cet ordre : la planche est le premier
   objet de chaque carte, le bon à graver occupe son centre, l'argent est en
   pied de carte derrière un filet, et le récapitulatif vit dans une colonne
   qui suit le défilement (bureau) ou une barre ancrée en bas (mobile).

   PARTAGE DES RÔLES ENTRE LES DEUX FEUILLES DU PANIER
   Ce fichier tient LA PAGE (scène, en-tête, grille, cartes, outils,
   récapitulatif, barre d'action, panier vide) ainsi que l'ÉCHELLE commune.
   `glassora-bat.css` tient LE COMPOSANT « bon à graver » et rien d'autre.
   Aucune règle n'HABILLE le bloc BAT ici : une seule feuille par composant,
   pas de guerre de spécificité entre deux fichiers chargés à la suite. Une
   seule exception, et elle est en lecture seule : le repère d'état de la carte
   s'appuie sur `:has(.glassora-bat__validate)` (§6) — il décrit la carte, pas
   le composant.

   IDENTITÉ
   Aucune seconde identité n'est inventée : tout vient des jetons du thème
   (`themes/glassora-child/assets/css/base.css`). Rappel de la règle d'or de la
   maison : le texte doré sur fond clair utilise --gold-ink (#7A6224, AA), et
   JAMAIS --gold (#C8A96A), illisible sur ivoire.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. L'ÉCHELLE
   Un seul rythme d'espacement (multiples de 4), une seule échelle typographique.
   Tout le reste du fichier n'utilise que ces jetons : plus aucune valeur
   arbitraire, donc plus de dérive de 2 px d'un bloc à l'autre.
   Les seules couleurs déclarées ici sont celles pour lesquelles base.css n'a
   PAS de jeton : une surface de carte, un voile et un filet champagne, une
   ombre, et une famille d'alerte. Toutes dérivées de la charte, toutes posées
   une fois — le corps du fichier n'écrit plus jamais une couleur en dur.
-------------------------------------------------------------------------------- */
.woocommerce-cart {
  /* Rythme 4 / 8. */
  --gc-1: 4px;
  --gc-2: 8px;
  --gc-3: 12px;
  --gc-4: 16px;
  --gc-5: 24px;
  --gc-6: 32px;
  --gc-7: 48px;
  --gc-8: 64px;

  /* Échelle typographique (une seule, partagée avec le composant BAT). */
  --gc-fs-micro: 11px;   /* étiquettes capitales, interlettrage large */
  --gc-fs-fine: 12px;    /* mentions secondaires */
  --gc-fs-sm: 13px;      /* boutons, méta */
  --gc-fs-md: 14px;      /* corps */
  --gc-fs-lg: 16px;      /* montants de ligne */
  --gc-fs-xl: 20px;      /* total */

  /* Surfaces absentes de base.css — dérivées de la charte, déclarées ici et
     nulle part ailleurs. Aucune de ces valeurs n'est réécrite dans le corps du
     fichier : une couleur, un endroit. */
  --gc-surface: #ffffff;                 /* fond de carte, sur l'ivoire --off */
  --gc-on-ink: #ffffff;                  /* texte posé sur --ink / --lux */
  --gc-tint: #FAF7EF;                    /* voile champagne (--champ très dilué) */
  --gc-rule-gold: rgba(200, 169, 106, .38); /* filet champagne (= --gold à 38 %) */
  --gc-shadow-bar: 0 -8px 24px rgba(17, 24, 39, .06); /* = --navy à 6 % */

  /* base.css n'a AUCUN jeton d'alerte : la charte n'en avait pas besoin
     jusqu'ici. On pose donc la famille rouge une seule fois, accordée à
     l'ivoire du site (jamais un rouge de navigateur). Contraste vérifié :
     --gc-alert-ink sur --gc-alert-bg = 7,4:1. */
  --gc-alert: #8A2B2B;      /* filets et survols */
  --gc-alert-ink: #7A2424;  /* texte */
  --gc-alert-bg: #FBF1F1;   /* fond de notice */
  --gc-alert-line: #D9BFBF; /* contour de notice */

  /* Hauteur réservée à la barre d'action mobile (voir §9). */
  --gc-bar-h: 82px;

  /* Cible tactile minimale imposée partout (boutons, champs, liens d'action). */
  --gc-tap: 44px;
}


/* -----------------------------------------------------------------------------
   2. LA SCÈNE
   La page vit dans .wrap (48 px de gouttière, 24 px sous 900 px) : on ne
   rajoute AUCUN padding horizontal, sinon deux rythmes se superposent.
-------------------------------------------------------------------------------- */
body.woocommerce-cart {
  background: var(--bg);
}

.woocommerce-cart .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  /* Le gabarit de page (main.section) porte déjà le dégagement bas : en
     rajouter ici doublerait le rythme vertical. */
  padding: 0;
  font-family: var(--head);
  font-size: var(--gc-fs-md);
  color: var(--ink);
}

/* Tous les montants et toutes les quantités sur la même chasse : les colonnes
   de chiffres s'alignent, et un total ne « saute » plus quand il change. */
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-cart .gc-piece__moneyValue,
.woocommerce-cart .gc-foot__amount,
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table td,
.woocommerce-cart .quantity input.qty {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Focus visible, partout, sur la même clé : or lisible, jamais l'anneau bleu
   du navigateur qui jure avec la charte. `:focus-visible` seulement, pour ne
   pas cerner un bouton simplement cliqué à la souris. */
.woocommerce-cart a:focus-visible,
.woocommerce-cart button:focus-visible,
.woocommerce-cart input:focus-visible,
.woocommerce-cart select:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   3. EN-TÊTE D'ATELIER (balisage produit par Glassora_Cart::render_cart_header)
   Titre + fil d'étapes. Le fil dit où l'on en est : composition faite,
   bon à graver en cours, commande à venir.
-------------------------------------------------------------------------------- */
.glassora-cart-hero {
  margin: 0 0 var(--gc-7);
  padding: 0 0 var(--gc-5);
  border-bottom: 1px solid var(--line);
}
.glassora-cart-hero__eyebrow {
  margin: 0 0 var(--gc-2);
  font-family: var(--head);
  font-size: var(--gc-fs-fine);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.glassora-cart-hero__title {
  margin: 0 0 var(--gc-5);
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.glassora-cart-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-2) var(--gc-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.glassora-cart-steps__step {
  display: flex;
  align-items: baseline;
  gap: var(--gc-2);
  font-size: var(--gc-fs-fine);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
}
.glassora-cart-steps__step span {
  font-family: var(--serif);
  font-size: var(--gc-fs-lg);
  font-style: italic;
  letter-spacing: 0;
  color: var(--gold-ink);
}
/* Étape franchie : lisible mais éteinte. Étape en cours : pleine encre, et
   un filet or dessous — le seul ornement de l'en-tête. */
.glassora-cart-steps__step.is-done {
  opacity: .8;
}
.glassora-cart-steps__step.is-current {
  color: var(--ink);
  opacity: 1;
  padding-bottom: var(--gc-1);
  border-bottom: 1px solid var(--gold);
}


/* -----------------------------------------------------------------------------
   4. NOTICES WOOCOMMERCE
   Une notice d'erreur ici veut presque toujours dire « un BAT n'est pas
   validé ». Elle doit être lue, pas décorée.
-------------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
  margin: 0 0 var(--gc-5);
  padding: var(--gc-4) var(--gc-5);
  border: 1px solid var(--champ);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-field);
  background: var(--gc-tint);
  color: var(--gold-ink);
  font-size: var(--gc-fs-md);
  line-height: 1.6;
  list-style: none;
}
.woocommerce-cart .woocommerce-error {
  border-color: var(--gc-alert-line);
  border-left-color: var(--gc-alert);
  background: var(--gc-alert-bg);
  color: var(--gc-alert-ink);
}
/* L'icône absolue de WooCommerce chevauche le texte avec nos retraits. */
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before {
  display: none !important;
}
.woocommerce-cart .woocommerce-error li,
.woocommerce-cart .woocommerce-message li,
.woocommerce-cart .woocommerce-info li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}


/* -----------------------------------------------------------------------------
   5. LA GRILLE
   `woocommerce-layout.css` fait flotter le récapitulatif à 48 % et les ventes
   croisées à 48 % : deux flottants dans un conteneur sans hauteur, et le pied
   de page du site remonte sous le panier. On repart d'une grille.
-------------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
  float: none !important;
  width: 100% !important;
}
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after {
  content: none !important;
}

/* Colonne latérale : le récapitulatif d'abord, les ventes croisées ensuite.
   Les deux partagent le hook `woocommerce_cart_collaterals` et les ventes
   croisées y passent en premier ; on ne touche pas aux priorités PHP, on
   remet l'ordre visuel ici. */
.woocommerce-cart .cart-collaterals {
  display: flex;
  flex-direction: column;
  gap: var(--gc-6);
}
.woocommerce-cart .cart-collaterals .cart_totals { order: 1; }
.woocommerce-cart .cart-collaterals .cross-sells { order: 2; }

@media (min-width: 981px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 0 var(--gc-7);
    align-items: start;
  }
  /* Ce qui parle à toute la page tient toute la largeur. */
  .woocommerce-cart .glassora-cart-hero,
  .woocommerce-cart .woocommerce-notices-wrapper,
  .woocommerce-cart .wc-empty-cart-message,
  .woocommerce-cart .gc-empty,
  .woocommerce-cart .woocommerce > .woocommerce-error,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-info {
    grid-column: 1 / -1;
  }
  /* Le récapitulatif suit le défilement. Le décalage tient compte du bandeau
     défilant (--top-marquee-h) et du header fixe une fois réduit. */
  .woocommerce-cart .cart-collaterals {
    position: sticky;
    top: calc(var(--top-marquee-h, 42px) + 90px);
  }
}


/* -----------------------------------------------------------------------------
   6. LA PIÈCE
   Une ligne de panier n'est pas une ligne de tableau : c'est une pièce, et
   elle porte l'image de SA gravure. D'où la planche (passe-partout à filet
   champagne) plutôt qu'une vignette de catalogue.
-------------------------------------------------------------------------------- */
.woocommerce-cart .gc-pieces {
  display: flex;
  flex-direction: column;
  gap: var(--gc-5);
}

.woocommerce-cart .gc-piece {
  position: relative;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: var(--gc-5);
  padding: var(--gc-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--gc-surface);
}

/* Signal d'état, sans une ligne de PHP en plus : la carte se lit sur ce que le
   plugin y a posé. Un bouton « Je valide » encore présent = il reste un geste
   à faire → repère or sur la tranche gauche. Une pièce validée ne porte AUCUN
   repère : son sceau, dans le bloc BAT, dit déjà tout. On ne marque que ce qui
   attend quelque chose du client.
   `:has()` évite de dupliquer dans le gabarit une décision métier qui vit dans
   le plugin (empreinte de configuration comprise). */
.woocommerce-cart .gc-piece:has(.glassora-bat__validate)::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--gc-5);
  bottom: var(--gc-5);
  width: 3px;
  border-radius: 999px;
  background: var(--gold);
}

/* --- La planche --- */
.woocommerce-cart .gc-piece__plate {
  align-self: start;
  min-width: 0;
}
.woocommerce-cart .gc-plate {
  position: relative;
  display: block;
  padding: var(--gc-4);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--gc-surface);
}
/* Le passe-partout : un filet champagne à l'intérieur de la marge, comme un
   encadrement d'atelier. Un seul filet — le luxe se voit à ce qu'on enlève. */
.woocommerce-cart .gc-plate::after {
  content: "";
  position: absolute;
  inset: var(--gc-2);
  border: 1px solid var(--gc-rule-gold);
  border-radius: var(--gc-1);
  pointer-events: none;
}
.woocommerce-cart .gc-plate__link {
  display: block;
}
.woocommerce-cart .gc-piece__plate img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  /* Glassora_Cart::cart_item_thumbnail pose un style en ligne
     (border-radius:10px). On l'aligne sur le cadre : un style en ligne ne se
     bat qu'avec !important, et le fichier PHP du plugin est hors périmètre. */
  border-radius: var(--gc-1) !important;
}

/* --- Le corps --- */
.woocommerce-cart .gc-piece__body {
  display: flex;
  flex-direction: column;
  gap: var(--gc-4);
  min-width: 0;
}
.woocommerce-cart .gc-piece__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.woocommerce-cart .gc-piece__name a {
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--ease);
}
.woocommerce-cart .gc-piece__name a:hover,
.woocommerce-cart .gc-piece__name a:focus-visible {
  color: var(--gold-ink);
}

/* Données de personnalisation hors gravure (variations) : discrètes. */
.woocommerce-cart .gc-piece__body dl.variation {
  margin: 0;
  font-size: var(--gc-fs-sm);
  line-height: 1.6;
  color: var(--muted);
}
.woocommerce-cart .gc-piece__body dl.variation dt,
.woocommerce-cart .gc-piece__body dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 500;
}
.woocommerce-cart .gc-piece__body dl.variation dt { margin-right: var(--gc-1); }
.woocommerce-cart .gc-piece__body dl.variation dd p { display: inline; margin: 0; }
.woocommerce-cart .gc-piece__body .backorder_notification {
  margin: 0;
  font-size: var(--gc-fs-sm);
  color: var(--gold-ink);
}

/* --- Le pied de carte : l'argent, derrière un filet --- */
.woocommerce-cart .gc-piece__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gc-3) var(--gc-5);
  margin-top: auto;
  padding-top: var(--gc-4);
  border-top: 1px solid var(--line);
}

.woocommerce-cart .gc-piece__qty .quantity {
  display: block;
  float: none;
  margin: 0;
}

/* L'unite se lit COLLEE au nombre, comme sur une etiquette : « 6 verres ».
   Le pas passe dessous, en retrait — il explique pourquoi le champ avance de
   six en six, il ne se lit pas en meme temps que la quantite. */
.woocommerce-cart .gc-piece__qtyRang {
  display: flex;
  align-items: center;
  gap: var(--gc-2);
}

.woocommerce-cart .gc-piece__qtyUnite {
  font-family: var(--head);
  font-size: var(--gc-fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce-cart .gc-piece__qtyPas {
  margin: var(--gc-1) 0 0;
  font-size: var(--gc-fs-sm);
  color: var(--muted);
}
/* `.woocommerce .quantity .qty` (0,3,0) impose une largeur en em : il faut
   au moins autant de classes pour reprendre la main. */
.woocommerce-cart .woocommerce .quantity input.qty {
  width: 76px;
  min-height: var(--gc-tap);
  padding: 0 var(--gc-2);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--bg);
  font-family: var(--head);
  /* 16 px : en dessous, Safari iOS zoome à la mise au point du champ. */
  font-size: var(--gc-fs-lg);
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}
.woocommerce-cart .woocommerce .quantity input.qty:hover {
  border-color: var(--gold);
}

.woocommerce-cart .gc-piece__money {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.woocommerce-cart .gc-piece__moneyLabel {
  font-size: var(--gc-fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce-cart .gc-piece__moneyValue {
  font-size: var(--gc-fs-md);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
/* Le sous-total de la ligne est le seul montant qui compte ici : pleine encre,
   poussé à droite, et le prix unitaire reste une mention de contrôle. */
.woocommerce-cart .gc-piece__money--sum {
  margin-left: auto;
  text-align: right;
}
.woocommerce-cart .gc-piece__money--sum .gc-piece__moneyValue {
  font-size: var(--gc-fs-lg);
  font-weight: 700;
  color: var(--ink);
}

/* Retirer : dernier de l'ordre de tabulation du pied, cible de 44 px, et
   l'accessible name vient de l'aria-label posé par WooCommerce. */
.woocommerce-cart .gc-piece__remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gc-tap);
  height: var(--gc-tap);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--gc-surface) !important;
  color: var(--muted) !important;
  font-size: var(--gc-fs-xl);
  font-weight: 400;
  line-height: 1;
  text-decoration: none !important;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce-cart .gc-piece__remove a.remove:hover,
.woocommerce-cart .gc-piece__remove a.remove:focus-visible {
  border-color: var(--gc-alert);
  color: var(--gc-alert) !important;
}


/* -----------------------------------------------------------------------------
   7. LES OUTILS (coupon + mise à jour)
   Ce ne sont pas des appels à l'action : ce sont des réglages. Ils vivent hors
   des cartes, en corps discret, séparés par un filet.
-------------------------------------------------------------------------------- */
.woocommerce-cart .gc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gc-3);
  margin-top: var(--gc-5);
  padding-top: var(--gc-5);
  border-top: 1px solid var(--line);
}
.woocommerce-cart .gc-tools__coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-2);
}
.woocommerce-cart .gc-field {
  width: 190px;
  min-height: var(--gc-tap);
  padding: 0 var(--gc-4);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--gc-surface);
  font-family: var(--head);
  font-size: var(--gc-fs-lg); /* 16 px : pas de zoom automatique sur iOS */
  color: var(--ink);
}
.woocommerce-cart .gc-field::placeholder { color: var(--muted); opacity: .75; }
.woocommerce-cart .gc-tools__update { margin-left: auto; }

/* Boutons ------------------------------------------------------------------
   Les boutons du panier portent aussi la classe `button` de WooCommerce, que
   le cœur ET la feuille boutique du thème habillent en `.woocommerce a.button`
   (0,2,1). Le préfixe `.woocommerce-cart .woocommerce` (0,3,0) reprend la main
   sans un seul `!important`. */
.woocommerce-cart .woocommerce .gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-2);
  min-height: var(--gc-tap);
  padding: 0 var(--gc-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--head);
  font-size: var(--gc-fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce-cart .woocommerce .gc-btn--quiet {
  border-color: var(--line);
  background: var(--gc-surface);
  color: var(--muted);
}
.woocommerce-cart .woocommerce .gc-btn--quiet:hover:not(:disabled),
.woocommerce-cart .woocommerce .gc-btn--quiet:focus-visible:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-ink);
}
/* cart.js désactive « Mettre à jour » au chargement et ne le rallume qu'après
   modification d'une quantité. On rend cet état lisible plutôt que de le
   subir : éteint, il ne réclame rien ; allumé, il devient une vraie action. */
.woocommerce-cart .woocommerce .gc-btn--quiet:disabled {
  opacity: .45;
  cursor: default;
}
.woocommerce-cart .woocommerce .gc-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gc-on-ink); /* pas de jeton « sur encre » dans base.css */
}
.woocommerce-cart .woocommerce .gc-btn--primary:hover,
.woocommerce-cart .woocommerce .gc-btn--primary:focus-visible {
  background: var(--lux);
  border-color: var(--lux);
}
.woocommerce-cart .woocommerce .gc-btn--ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}
.woocommerce-cart .woocommerce .gc-btn--ghost:hover,
.woocommerce-cart .woocommerce .gc-btn--ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold-ink);
}

/* Message d'erreur de coupon injecté par cart.js sous le champ. */
.woocommerce-cart .coupon-error-notice {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--gc-fs-fine);
  color: var(--gc-alert-ink);
}


/* -----------------------------------------------------------------------------
   8. LE RÉCAPITULATIF
   Une carte, un filet or en tête, des lignes de compte alignées à droite.
   Le tableau est conservé côté PHP (cart-shipping.php produit des <tr>) ;
   il est ici dépouillé de tout ce que WooCommerce lui met par défaut.
-------------------------------------------------------------------------------- */
.woocommerce-cart .gc-summary__card {
  padding: var(--gc-5);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-card);
  background: var(--gc-surface);
}
.woocommerce-cart .woocommerce .gc-summary__title {
  margin: 0 0 var(--gc-4);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

/* Le préfixe long n'est pas un caprice : `woocommerce.css` habille ce tableau
   avec `.woocommerce-cart .cart-collaterals .cart_totals tr td` (0,3,2) et
   `… table th { width:35% }`. En dessous de cette spécificité, aucune règle ne
   passe — et on retomberait sur des `!important` en cascade. On monte donc au
   même niveau, une fois, proprement (0,4,1 → 0,4,2 avec th/td). */
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table th,
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table td {
  width: auto;
  padding: var(--gc-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: var(--gc-fs-md);
  line-height: 1.5;
  vertical-align: baseline;
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table th {
  font-weight: 500;
  text-align: left;
  color: var(--muted);
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table td {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table small {
  display: block;
  font-size: var(--gc-fs-fine);
  font-weight: 400;
  color: var(--muted);
}
/* Aucun filet orphelin : la dernière ligne du tableau ne souligne rien. */
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table tr:last-child th,
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table tr:last-child td {
  border-bottom: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table tr.order-total th,
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table tr.order-total td {
  padding-top: var(--gc-4);
  font-size: var(--gc-fs-xl);
  font-weight: 700;
  color: var(--ink);
}

/* Modes de livraison : une liste de choix, pas des puces. */
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table ul#shipping_method,
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table ul.woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table ul#shipping_method li {
  margin: 0 0 var(--gc-1);
  padding: 0;
  font-size: var(--gc-fs-md);
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table .woocommerce-shipping-destination {
  margin: var(--gc-2) 0 0;
  font-size: var(--gc-fs-fine);
  font-weight: 400;
  color: var(--muted);
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table .shipping-calculator-button {
  color: var(--gold-ink);
  font-size: var(--gc-fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table .woocommerce-remove-coupon {
  margin-left: var(--gc-2);
  color: var(--muted);
  font-size: var(--gc-fs-fine);
  font-weight: 500;
}

/* Réassurance : quatre faits, en corps fin, marqués d'un filet or.
   Pas d'icônes : la fonte d'icônes du site est un sous-ensemble, un glyphe
   absent afficherait un carré vide. */
.woocommerce-cart .gc-assur {
  margin: var(--gc-5) 0 0;
  padding: var(--gc-4) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gc-2);
}
.woocommerce-cart .gc-assur__item {
  position: relative;
  margin: 0;
  padding-left: var(--gc-5);
  font-size: var(--gc-fs-fine);
  line-height: 1.55;
  color: var(--muted);
}
.woocommerce-cart .gc-assur__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 14px;
  height: 1px;
  background: var(--gold);
}


/* -----------------------------------------------------------------------------
   9. LE PIED D'ACTION
   Sur grand écran : bloc statique qui ferme la colonne collante.
   Sur mobile : barre ancrée en bas, qui ne masque RIEN — le corps de page
   réserve exactement sa hauteur (§ body padding-bottom plus bas).
   Un seul `.wc-proceed-to-checkout` existe dans la page : le bouton n'est pas
   dupliqué, il est déplacé.
-------------------------------------------------------------------------------- */
.woocommerce-cart .gc-foot {
  display: flex;
  align-items: center;
  gap: var(--gc-4);
  margin-top: var(--gc-4);
}
.woocommerce-cart .gc-foot__cta {
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
}
/* L'autre suite : ajouter une seconde gravure. Sous le bouton de commande et
   HORS de la barre (cf. le gabarit) — une alternative, jamais une
   concurrence. */
.woocommerce-cart .gc-autre {
  margin: var(--gc-3) 0 0;
  text-align: center;
}
.woocommerce-cart .gc-autre__lien {
  display: inline-block;
  padding: 6px 4px;
  color: var(--gold-ink, #7A6224);
  font-family: var(--head, inherit);
  font-size: var(--gc-fs-sm, .875rem);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart .gc-autre__lien:hover {
  color: var(--ink);
}
.woocommerce-cart .gc-foot__total {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.woocommerce-cart .gc-foot__label {
  font-size: var(--gc-fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce-cart .gc-foot__amount {
  font-size: var(--gc-fs-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.woocommerce-cart .gc-foot__amount small {
  display: block;
  font-size: var(--gc-fs-micro);
  font-weight: 400;
  color: var(--muted);
}

/* Le bouton de commande : l'or plein de la maison, sans dégradé. */
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--gc-5);
  border: 1px solid var(--gold);
  border-radius: var(--r-btn);
  background: var(--gold);
  color: var(--lux) !important;
  font-family: var(--head);
  font-size: var(--gc-fs-lg);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none !important;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible {
  background: var(--champ);
  border-color: var(--champ);
}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout .wc-proceed-to-checkout-payment-buttons {
  margin-bottom: var(--gc-2);
}

/* Sur grand écran le total est déjà dans le tableau : la ligne du pied ferait
   doublon, visuellement ET pour un lecteur d'écran. `display:none` la retire
   réellement de l'arbre d'accessibilité. */
@media (min-width: 981px) {
  .woocommerce-cart .gc-foot__total { display: none; }
}


/* -----------------------------------------------------------------------------
   10. PANIER VIDE
   Une invitation, pas une phrase orpheline.
-------------------------------------------------------------------------------- */
/* La phrase d'origine (« Votre panier est actuellement vide. ») dit la même
   chose que le titre juste en dessous. On la masque SANS la retirer du DOM :
   cart.js cherche `.wc-empty-cart-message` dans la réponse AJAX pour
   reconnaître un panier vidé (cart.js:118-122). La supprimer provoquerait un
   rechargement complet à chaque suppression de ligne. */
.woocommerce-cart .wc-empty-cart-message { display: none; }

.woocommerce-cart .gc-empty {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--gc-8) 0;
  text-align: center;
}
.woocommerce-cart .gc-empty__eyebrow {
  margin: 0 0 var(--gc-3);
  font-family: var(--head);
  font-size: var(--gc-fs-fine);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.woocommerce-cart .gc-empty__title {
  margin: 0 0 var(--gc-4);
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.woocommerce-cart .gc-empty__lead {
  margin: 0 auto var(--gc-6);
  max-width: 46ch;
  font-family: var(--body);
  font-size: var(--gc-fs-lg);
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.woocommerce-cart .gc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gc-3);
}
.woocommerce-cart .gc-empty__actions .gc-btn {
  min-height: 52px;
  font-size: var(--gc-fs-md);
}
/* La réassurance du panier vide se lit en ligne, centrée, sans filet de tête :
   il n'y a rien au-dessus d'elle à séparer. */
.woocommerce-cart .gc-empty__assur {
  margin-top: var(--gc-7);
  padding-top: var(--gc-5);
  align-items: center;
}
.woocommerce-cart .gc-empty__assur .gc-assur__item {
  padding-left: 0;
}
.woocommerce-cart .gc-empty__assur .gc-assur__item::before {
  position: static;
  display: block;
  margin: 0 auto var(--gc-2);
}


/* -----------------------------------------------------------------------------
   11. MOBILE (< 981 px) — la composition d'origine, celle qui souffrait le plus
   La planche passe en tête de carte, pleine largeur : c'est elle qu'on regarde
   en premier sur un téléphone. Le pied d'action quitte le flux pour s'ancrer
   en bas de l'écran.
-------------------------------------------------------------------------------- */
@media (max-width: 980px) {

  /* Le corps réserve la hauteur de la barre : elle ne masque jamais le pied de
     page du site ni la dernière carte. `env()` couvre l'encoche des iPhone. */
  body.woocommerce-cart {
    padding-bottom: calc(var(--gc-bar-h) + var(--gc-5) + env(safe-area-inset-bottom, 0px));
  }


  .glassora-cart-hero {
    margin-bottom: var(--gc-6);
    padding-bottom: var(--gc-4);
  }

  .woocommerce-cart .gc-piece {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gc-4);
    padding: var(--gc-4);
  }
  .woocommerce-cart .gc-piece__plate img { max-height: 240px; }

  /* Le pied de carte se scinde en deux étages : réglage à gauche, argent à
     droite, sur une seule ligne qui tient dans 320 px. */
  .woocommerce-cart .gc-piece__foot {
    gap: var(--gc-3) var(--gc-4);
  }
  .woocommerce-cart .gc-piece__money--unit { display: none; }

  .woocommerce-cart .gc-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart .gc-tools__coupon { width: 100%; }
  .woocommerce-cart .gc-field { flex: 1 1 auto; width: auto; min-width: 0; }
  .woocommerce-cart .gc-tools__update { margin-left: 0; width: 100%; }

  /* --- La barre d'action --- */
  .woocommerce-cart .gc-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sous le menu mobile (55) et le header (60) du site : la barre ne doit
       jamais passer par-dessus la navigation ouverte. */
    z-index: 40;
    margin: 0;
    padding: var(--gc-3) var(--gc-5) calc(var(--gc-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--gc-surface);
    box-shadow: var(--gc-shadow-bar);
  }
  .woocommerce-cart .gc-foot__cta { flex: 0 1 58%; }
  .woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
    min-height: var(--gc-tap);
    font-size: var(--gc-fs-md);
  }
  /* Le total vit dans la barre : la ligne du tableau ferait doublon. */
  .woocommerce-cart .cart-collaterals .cart_totals table.gc-summary__table tr.order-total { display: none; }

  .woocommerce-cart .gc-summary__card { padding: var(--gc-4); }
  .woocommerce-cart .gc-empty { padding: var(--gc-6) 0; }
}

/* Très petits écrans : la barre passe le montant au-dessus du bouton plutôt
   que de comprimer les deux sur une ligne illisible. */
@media (max-width: 380px) {
  .woocommerce-cart {
    --gc-bar-h: 118px;
  }
  .woocommerce-cart .gc-foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gc-2);
  }
  .woocommerce-cart .gc-foot__total {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gc-3);
  }
  .woocommerce-cart .gc-foot__cta { flex: 1 1 auto; }
}


/* -----------------------------------------------------------------------------
   12. MOUVEMENT RÉDUIT
   Aucune animation n'est structurante sur cette page : on peut tout couper.
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart .woocommerce *,
  .woocommerce-cart .woocommerce *::before,
  .woocommerce-cart .woocommerce *::after,
  .woocommerce-cart .gc-foot,
  .woocommerce-cart .gc-foot * {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Une gravure, UNE image -----------------------------------------------
   La carte montrait deux fois la meme chose : la planche de gauche, qui rend
   l'apercu du bon a graver, et le bloc « Votre bon a graver » qui peint
   maintenant les faces — les deux, quand la gravure est recto/verso.

   C'est la planche qui part : elle repete, le bloc documente. La carte se
   referme donc sur une seule colonne et le bon a graver remonte, au lieu
   d'etre pousse sous une vignette qui n'apprend rien.

   La classe vient du serveur (Glassora_Cart::cart_item_class) et non d'un
   `:has()` : la mise en page ne doit pas dependre du navigateur. Une ligne
   SANS gravure garde sa photo produit — rien ne change pour elle.
   -------------------------------------------------------------------------- */
.woocommerce-cart .gc-piece--grave {
  grid-template-columns: minmax(0, 1fr);
}

.woocommerce-cart .gc-piece--grave .gc-piece__plate {
  display: none;
}