/* cart-page.css — optimea. Grille de la page /cart (cf. assets/js/cart-page.js).

   Le thème posait ses colonnes avec des classes utilitaires Liquid (`md:m:w-2/12`…) qui ne sont pas dans
   l'export. On redéfinit la grille, en la partageant entre l'entête du thème et nos lignes : sinon les
   titres « Prix / Quantité / Total » ne tombent pas au-dessus de leurs colonnes.

   Les couleurs viennent du thème (Minimog stocke des TRIPLETS RGB, d'où `rgb(var(--color-…))`).
   Spécifique au thème Minimog — pas dans _kit/. */

:root { --gs-cart-cols: minmax(0, 1fr) 140px 150px 140px; }

.m-cart__header--wrapper,
.gs-cart-row {
  display: grid;
  grid-template-columns: var(--gs-cart-cols);
  align-items: center;
  gap: 16px;
}
.m-cart__header--wrapper {
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(var(--color-border, 230,230,230));
  font-size: 15px;
}
.m-cart__column--price, .m-cart__column--quantity { text-align: left; }
.m-cart__column--subtotal { text-align: right; }

.gs-cart-row { padding: 24px 0; border-bottom: 1px solid rgb(var(--color-border, 230,230,230)); }
.gs-cart-prod { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.gs-cart-thumb { flex: 0 0 96px; }
.gs-cart-thumb img { width: 96px; height: 96px; object-fit: contain; background: #fff;
  border: 1px solid rgb(var(--color-border, 230,230,230)); }
.gs-cart-meta { min-width: 0; }
.gs-cart-title { color: inherit; text-decoration: none; font-size: 15px; line-height: 1.4; display: block; }
.gs-cart-title:hover { text-decoration: underline; }
.gs-cart-variant { margin-top: 4px; font-size: 13px; color: rgb(var(--color-subtext, 120,120,120)); }
.gs-cart-remove { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: rgb(var(--color-subtext, 120,120,120));
  text-decoration: underline; text-underline-offset: 3px; }
.gs-cart-remove:hover { color: rgb(var(--color-text, 17,17,17)); }
.gs-cart-price, .gs-cart-line-total { font-size: 15px; white-space: nowrap; }
.gs-cart-line-total { text-align: right; }

.gs-cart-qty { display: inline-flex; align-items: center; justify-self: start;
  border: 1px solid rgb(var(--color-border, 230,230,230)); border-radius: 2px; min-height: 42px; }
.gs-cart-qty__b { width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1; color: inherit; }
.gs-cart-qty__n { min-width: 34px; text-align: center; font-size: 15px; }

/* Pied : le thème l'aligne à droite ; le badge de cartes est déjà dans le HTML aspiré. */
.m-cart__footer--wrapper { min-width: 320px; padding-top: 24px; }
.m-cart__subtotal { font-size: 19px; }
.m-cart__shipping-note { margin-top: 6px; }
.m-cart__checkout { margin-top: 20px; }
.m-cart__trust-badge { margin-top: 18px; }
.m-cart__trust-badge img { max-width: 100%; height: 26px; width: auto; object-fit: contain; object-position: right; }

/* ------------------------------------------------------------------
 * MOBILE — comme la maquette : l'entête ne garde que « Produit / Prix », la quantité passe sous la
 * ligne, et le total de ligne disparaît (il ne dit rien de plus que prix × quantité, et il pousserait
 * la colonne prix hors de l'écran).
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root { --gs-cart-cols: minmax(0, 1fr) auto; }
  .m-cart__column--quantity, .m-cart__column--subtotal { display: none; }
  .gs-cart-row { row-gap: 14px; align-items: start; padding: 20px 0; }
  .gs-cart-prod { gap: 14px; }
  .gs-cart-thumb { flex: 0 0 64px; }
  .gs-cart-thumb img { width: 64px; height: 64px; }
  .gs-cart-price { padding-top: 2px; }
  .gs-cart-qty { grid-column: 1 / -1; }
  .gs-cart-line-total { display: none; }
  .m-cart__footer--wrapper { min-width: 0; width: 100%; }
  .m-cart__trust-badge img { object-position: left; }
}

/* ------------------------------------------------------------------
 * « Produits récemment consultés » (assets/js/recently-viewed.js).
 * Le thème posait une grille Swiper jamais initialisée : les cartes s'empilaient à la file. On la
 * remplace par une vraie grille. Chargé partout (la section vit sur 18 pages), pas seulement sur /cart.
 * ------------------------------------------------------------------ */
.gs-rv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.gs-rv-card { display: block; color: inherit; text-decoration: none; }
.gs-rv-media { position: relative; display: block; background: #fff; }
.gs-rv-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.gs-rv-badge { position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; line-height: 1.2;
  background: rgb(var(--color-button, 17,17,17)); color: rgb(var(--color-button-text, 255,255,255)); }
.gs-rv-title { display: block; margin-top: 14px; font-size: 15px; line-height: 1.4; }
.gs-rv-card:hover .gs-rv-title { text-decoration: underline; }
.gs-rv-price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 15px; }
.gs-rv-now.-sale { color: #e0342b; }                    /* prix soldé : rouge, comme les cartes du thème */
.gs-rv-was { color: rgb(var(--color-subtext, 130,130,130)); font-size: 14px; }
.gs-rv-out { color: rgb(var(--color-subtext, 130,130,130)); font-size: 13px; }

@media (max-width: 1023px) { .gs-rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px)  { .gs-rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }