/* =====================================================================
   GK GENERAL SHOP — shop-base.css
   Socle commun à tous les ÉCRANS DE LA BOUTIQUE du kit : cartes produit,
   prix, badges, boutons, champs, mini-panier, modale de commande
   express, tableaux, pagination, états vides.

   Réécrit à la charte GK. Les SÉLECTEURS sont conservés à l'identique —
   shop.js et les vues du kit s'appuient dessus (.shop-btn, .shop-price,
   #shopDrawer, #shopExpressModal, [data-*], .pd-*…). On redessine, on ne
   renomme pas.

   Chargé APRÈS gks.css, dont il consomme les jetons (--gk-*).
   ===================================================================== */

/* ── Jetons de la boutique, alignés sur la charte ──────────────────── */
:root {
    --shop-accent:      #0F8F49;   /* l'action : vert GK */
    --shop-accent-2:    #2A2A6A;   /* la marque : indigo GK */
    --shop-radius:      14px;
    --shop-radius-sm:   8px;

    --shop-ink:         #141828;
    --shop-body:        #3E4454;
    --shop-muted:       #5C6474;
    --shop-line:        #E4E7EC;
    --shop-line-strong: #CFD4DE;
    --shop-surface:     #FFFFFF;
    --shop-surface-2:   #F5F6F8;
    --shop-surface-3:   #EEEFF7;

    --shop-ok:          #0F8F49;
    --shop-ok-bg:       #E8F5ED;
    --shop-warn:        #A8611A;
    --shop-warn-bg:     #FBF3E6;
    --shop-ko:          #B3261E;
    --shop-ko-bg:       #FCEFEE;
    /* Charte : le rouge est réservé aux erreurs. La promotion est un fait
       POSITIF, donc verte, comme les CTA et les badges de mandat. */
    --shop-sale:        #0F8F49;
    --shop-sale-bg:     #E8F5ED;

    --shop-sh-sm: 0 1px 2px rgba(20,24,40,.05), 0 2px 10px rgba(20,24,40,.045);
    --shop-sh-md: 0 2px 6px rgba(20,24,40,.06), 0 14px 34px rgba(20,24,40,.08);
    --shop-sh-lg: 0 8px 18px rgba(20,24,40,.07), 0 30px 70px rgba(20,24,40,.12);

    --shop-tr: 180ms cubic-bezier(.4, 0, .2, 1);

    /* L'en-tête GK est COLLANT (sticky), pas fixe : aucune compensation
       de hauteur n'est nécessaire. Ces variables restent pour les
       colonnes collantes des écrans boutique. */
    --shop-header-h: var(--gk-header-h);
    --shop-sticky-top: calc(var(--gk-header-h) + 20px);
}

/* ── Base ───────────────────────────────────────────────────────────── */
.shop-body { background: var(--shop-surface); }

/* Les écrans de la boutique ont besoin d'air en bas ; les pages de
   vitrine se terminent par une section pleine largeur (appel à
   l'action, bande groupe) qui doit toucher le pied de page. */
.shop-main { min-height: 50vh; padding-bottom: 0; }
.page-shop_catalog .shop-main,
.page-shop_product .shop-main,
.page-shop_cart .shop-main,
.page-shop_checkout .shop-main,
.page-shop_confirmation .shop-main,
.page-shop_track .shop-main,
.page-shop_account .shop-main { padding-bottom: 76px; }

/* Les écrans SANS bandeau de tête (panier, tunnel, suivi, compte)
   ont besoin d'air sous l'en-tête collant. Le catalogue et la fiche
   produit, eux, commencent par leur propre bandeau. */
.page-shop_cart .shop-main,
.page-shop_checkout .shop-main,
.page-shop_confirmation .shop-main,
.page-shop_track .shop-main,
.page-shop_account .shop-main { padding-top: 44px; }

.shop-section { padding: 32px 0; }
.shop-section--tight { padding: 18px 0; }

.shop-h1 {
    font-family: var(--gk-font-title);
    font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);
    font-weight: 800; letter-spacing: -.032em; line-height: 1.08;
    color: var(--shop-ink); margin: 0;
}
.shop-h2 {
    font-family: var(--gk-font-title);
    font-size: clamp(1.18rem, 1rem + .9vw, 1.55rem);
    font-weight: 700; letter-spacing: -.024em;
    color: var(--shop-ink); margin: 0 0 16px;
}
.shop-lead { color: var(--shop-muted); font-size: .98rem; line-height: 1.65; margin: 8px 0 0; }
.shop-muted { color: var(--shop-muted); }
.shop-small { font-size: .82rem; }

/* ── Boutons ────────────────────────────────────────────────────────── */
.shop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--gk-font-body);
    font-size: .9rem; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background var(--shop-tr), border-color var(--shop-tr),
                color var(--shop-tr), transform var(--shop-tr), box-shadow var(--shop-tr);
}
.shop-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.shop-btn:hover { transform: translateY(-1px); }

/* L'action principale est TOUJOURS verte : c'est la règle de la charte.
   `--shop-accent`, réglable depuis le gestionnaire boutique, pilote les
   états actifs et les liens — pas le bouton d'achat, qui ne doit jamais
   se confondre avec la couleur de structure. */
.shop-btn--primary { background: var(--gk-green); color: #fff; box-shadow: var(--shop-sh-sm); }
.shop-btn--primary:hover { background: var(--gk-green-deep); color: #fff; box-shadow: var(--shop-sh-md); }

.shop-btn--dark { background: var(--gk-indigo); color: #fff; }
.shop-btn--dark:hover { background: var(--gk-indigo-deep); color: #fff; }

.shop-btn--outline {
    background: transparent; color: var(--gk-indigo);
    border-color: var(--shop-line-strong);
}
.shop-btn--outline:hover { border-color: var(--gk-indigo); background: var(--shop-surface-3); color: var(--gk-indigo); }

.shop-btn--ghost { background: var(--shop-surface-2); color: var(--shop-ink); border-color: var(--shop-line); }
.shop-btn--ghost:hover { background: #fff; box-shadow: var(--shop-sh-sm); }

/* WhatsApp : blanc bordé, l'icône seule porte la couleur — un bouton
   vert vif à côté du vert de la marque brouillerait l'action principale. */
.shop-btn--wa { background: #fff; color: var(--shop-ink); border-color: var(--shop-line-strong); }
.shop-btn--wa:hover { border-color: var(--shop-accent); color: var(--gk-green-deep); }
.shop-btn--wa svg { color: #25D366; }

.shop-btn--block { width: 100%; }
.shop-btn--sm { padding: 8px 15px; font-size: .82rem; }
.shop-btn--lg { padding: 15px 28px; font-size: 1rem; }
.shop-btn:disabled,
.shop-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ── Surfaces ───────────────────────────────────────────────────────── */
.shop-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
}
.shop-card-flat .shop-card { box-shadow: none; }
.shop-card-outline .shop-card { border-width: 1.5px; border-color: var(--shop-line-strong); }

.shop-panel {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 24px;
}
.shop-panel + .shop-panel { margin-top: 16px; }
.shop-panel-title {
    font-family: var(--gk-font-title);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--shop-muted);
    margin: 0 0 16px;
}

.shop-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--shop-line);
    background: #fff;
    font-size: .76rem; font-weight: 600; color: var(--shop-muted);
}
.shop-chip svg { width: 14px; height: 14px; }

/* ── Grille de produits ─────────────────────────────────────────────── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(var(--shop-cols, 3), minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 1024px) { .shop-grid { grid-template-columns: repeat(min(var(--shop-cols, 3), 3), minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 720px)  { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 400px)  { .shop-grid { grid-template-columns: 1fr; } }

/* ── Carte produit ──────────────────────────────────────────────────── */
.shop-pcard {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    transition: border-color var(--shop-tr), box-shadow var(--shop-tr), transform var(--shop-tr);
}
.shop-pcard:hover { transform: translateY(-3px); border-color: var(--shop-line-strong); box-shadow: var(--shop-sh-md); }

.shop-pcard-media {
    position: relative; display: block;
    aspect-ratio: 3 / 4;
    background: var(--shop-surface-2);
    overflow: hidden;
}
.shop-ratio-square .shop-pcard-media    { aspect-ratio: 1 / 1; }
.shop-ratio-landscape .shop-pcard-media { aspect-ratio: 4 / 3; }

.shop-pcard-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .7, .3, 1), opacity var(--shop-tr);
}
.shop-pcard:hover .shop-pcard-media img.is-main { transform: scale(1.045); }
.shop-pcard-media img.is-hover { opacity: 0; }
.shop-pcard:hover .shop-pcard-media img.is-hover { opacity: 1; }

/* Sans photo : la trame axonométrique de la marque, pas un carré gris. */
.shop-pcard-noimg {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 0;
    background-color: var(--gk-indigo-soft);
    background-image:
        repeating-linear-gradient(60deg,  rgba(42,42,106,.07) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(-60deg, rgba(42,42,106,.07) 0 1px, transparent 1px 30px);
}
.shop-pcard-noimg::after {
    content: '';
    width: 46%; aspect-ratio: 200 / 210;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 210'%3E%3Cg fill='none' stroke='%232A2A6A' stroke-opacity='.22' stroke-width='5' stroke-linejoin='round'%3E%3Cpolygon points='13.4,55 100,5 186.6,55 186.6,155 100,205 13.4,155'/%3E%3Cpolyline points='13.4,55 100,105 186.6,55'/%3E%3Cline x1='100' y1='105' x2='100' y2='205'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.shop-pcard-badges {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.shop-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    background: var(--gk-indigo);
    color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
    line-height: 1.5;
}
.shop-tag--sale   { background: var(--shop-sale); }
.shop-tag--new    { background: var(--gk-green); }
.shop-tag--out    { background: #6B7280; }
.shop-tag--pre    { background: #A8611A; }
.shop-tag--custom { background: var(--shop-accent-2); color: #fff; }

/* Badge du partenaire : la marque représentée, en haut à droite. */
.shop-pcard-partner {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shop-sh-sm);
    font-size: .68rem; font-weight: 700; letter-spacing: .01em;
    color: var(--gk-indigo);
    max-width: calc(100% - 24px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-pcard-partner svg { width: 12px; height: 12px; flex: none; }

.shop-pcard-quick {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--shop-tr), transform var(--shop-tr);
}
.shop-pcard:hover .shop-pcard-quick,
.shop-pcard:focus-within .shop-pcard-quick { opacity: 1; transform: none; }
/* Sur écran tactile, le raccourci est MASQUÉ : affiché en permanence il
   recouvrait un tiers de la photo et doublait le bouton déjà présent sous
   le prix. L'action reste accessible par ce bouton-là et par la fiche. */
@media (hover: none) { .shop-pcard-quick { display: none; } }

.shop-pcard-body {
    display: flex; flex-direction: column;
    padding: 16px 16px 18px;
    flex: 1;
}
.shop-pcard-cat {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--shop-muted);
    margin-bottom: 7px;
}
.shop-pcard-name {
    font-family: var(--gk-font-title);
    font-size: .95rem; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.35;
    margin: 0 0 8px;
}
.shop-pcard-name a { color: var(--shop-ink); }
.shop-pcard-name a:hover { color: var(--gk-indigo); }

/* Ligne « Origine · MOQ » tirée de custom_fields */
.shop-pcard-origin {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: .755rem; color: var(--shop-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}
.shop-pcard-origin span { display: inline-flex; align-items: center; gap: 5px; }
.shop-pcard-origin svg { width: 13px; height: 13px; flex: none; opacity: .75; }

.shop-pcard-foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin-top: auto; padding-top: 10px;
}
.shop-pcard-avail {
    font-size: .74rem; font-weight: 600;
    color: var(--shop-muted);
}
.shop-pcard-avail.is-ok  { color: var(--shop-ok); }
.shop-pcard-avail.is-pre { color: var(--shop-warn); }
.shop-pcard-avail.is-out { color: var(--shop-ko); }

.shop-pcard-cta { margin-top: 14px; }

/* ── Prix ───────────────────────────────────────────────────────────── */
/* `white-space: nowrap` : un prix ne doit jamais se couper au milieu du
   nombre (« 16 » / « 000 FCFA » observé à 412 px). Le séparateur de
   milliers est par ailleurs une espace fine insécable (U+202F). */
.shop-price {
    font-family: var(--gk-font-body);
    font-size: 1.02rem; font-weight: 700;
    color: var(--shop-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.shop-price--sale  { color: var(--shop-sale); }
.shop-price--quote { color: var(--gk-indigo); font-size: .92rem; font-weight: 700; white-space: normal; }
.shop-price-old    { color: var(--shop-muted); font-size: .82rem; font-weight: 500; margin-left: 6px; text-decoration: line-through; white-space: nowrap; }
.shop-price-tax    { color: var(--shop-muted); font-size: .68rem; font-weight: 600; margin-left: 3px; white-space: nowrap; }
.shop-price-off {
    display: inline-block; margin-left: 7px;
    padding: 2px 7px; border-radius: 4px;
    background: var(--shop-sale-bg); color: var(--shop-sale);
    font-size: .7rem; font-weight: 700;
    white-space: nowrap;
}

/* ── Disponibilité ──────────────────────────────────────────────────── */
.shop-stock-ok  { color: var(--shop-ok);   font-size: .8rem; font-weight: 600; }
.shop-stock-low { color: var(--shop-warn); font-size: .8rem; font-weight: 600; }
.shop-stock-out { color: var(--shop-ko);   font-size: .8rem; font-weight: 600; }

/* ── Étoiles ────────────────────────────────────────────────────────── */
.shop-stars { display: inline-flex; align-items: center; gap: 2px; }
.shop-stars svg { width: 14px; height: 14px; }
.shop-stars svg.is-on  { fill: #C7A15A; }
.shop-stars svg.is-off { fill: var(--shop-line-strong); }
.shop-stars-count { margin-left: 6px; font-size: .76rem; color: var(--shop-muted); font-weight: 500; }

/* ── Quantité ───────────────────────────────────────────────────────── */
.shop-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--shop-line-strong);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.shop-qty button {
    width: 40px; height: 44px;
    border: 0; background: transparent;
    color: var(--shop-ink); font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    transition: background var(--shop-tr);
}
.shop-qty button:hover { background: var(--shop-surface-2); }
.shop-qty input {
    width: 48px; height: 44px;
    border: 0; text-align: center;
    font-size: .95rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: transparent;
    -moz-appearance: textfield;
}
.shop-qty input::-webkit-outer-spin-button,
.shop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-qty input:focus { outline: none; }

/* ── Déclinaisons ───────────────────────────────────────────────────── */
.shop-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-swatch {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 9px 14px;
    border: 1.5px solid var(--shop-line-strong);
    border-radius: 8px;
    font-size: .855rem; font-weight: 600;
    background: #fff; color: var(--shop-ink);
    cursor: pointer;
    transition: border-color var(--shop-tr), background var(--shop-tr), color var(--shop-tr);
}
.shop-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.shop-swatch:hover { border-color: var(--gk-indigo); }
.shop-swatch.is-selected { border-color: var(--gk-indigo); background: var(--shop-surface-3); color: var(--gk-indigo); }
.shop-swatch--color { min-width: 0; padding: 4px; border-radius: 50%; }
.shop-swatch--color .dot { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(20,24,40,.12); }
.shop-swatch--color.is-selected { border-color: var(--gk-indigo); background: #fff; }

/* ── Champs (alias des styles GK) ───────────────────────────────────── */
.shop-field { margin-bottom: 16px; }
.shop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .shop-row { grid-template-columns: 1fr; } }

/* ── Tableaux et totaux ─────────────────────────────────────────────── */
.shop-table { width: 100%; border-collapse: collapse; }
.shop-table th {
    text-align: left; padding: 0 0 12px;
    border-bottom: 1px solid var(--shop-line);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--shop-muted);
}
.shop-table td { padding: 14px 0; border-bottom: 1px solid var(--shop-line); font-size: .9rem; vertical-align: middle; }
.shop-table tr:last-child td { border-bottom: 0; }
.shop-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.shop-totals { list-style: none; margin: 0; padding: 0; }
.shop-totals li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 11px 0;
    font-size: .9rem; color: var(--shop-muted);
}
.shop-totals li + li { border-top: 1px solid var(--shop-line); }
.shop-totals li strong { color: var(--shop-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-totals li.is-discount strong { color: var(--shop-ok); }
.shop-totals li.is-grand { padding-top: 16px; border-top: 1.5px solid var(--shop-ink); }
.shop-totals li.is-grand strong {
    font-family: var(--gk-font-title);
    font-size: 1.3rem; letter-spacing: -.03em;
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.shop-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px; margin-top: 40px;
}
.shop-pagination a {
    display: inline-grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 13px;
    border: 1px solid var(--shop-line);
    border-radius: 9px;
    font-size: .875rem; font-weight: 600;
    color: var(--shop-body); background: #fff;
    font-variant-numeric: tabular-nums;
    transition: all var(--shop-tr);
}
.shop-pagination a:hover { border-color: var(--gk-indigo); color: var(--gk-indigo); }
.shop-pagination a.is-current { background: var(--gk-indigo); border-color: var(--gk-indigo); color: #fff; }
.shop-pagination .gap { color: var(--shop-muted); padding: 0 4px; }

/* ── État vide ──────────────────────────────────────────────────────── */
.shop-empty {
    text-align: center;
    padding: 56px 28px;
    border: 1px dashed var(--shop-line-strong);
    border-radius: var(--shop-radius);
    background: var(--shop-surface-2);
}
.shop-empty-ico {
    width: 52px; height: 52px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; border: 1px solid var(--shop-line);
    color: var(--gk-indigo);
}
.shop-empty-ico svg { width: 24px; height: 24px; }
.shop-empty h3 { font-family: var(--gk-font-title); font-size: 1.12rem; margin: 0 0 8px; }
.shop-empty p { color: var(--shop-muted); font-size: .92rem; max-width: 52ch; margin: 0 auto 22px; }

/* ── Mini-panier (tiroir) ───────────────────────────────────────────── */
.shop-drawer-backdrop {
    position: fixed; inset: 0; z-index: 140;
    background: rgba(20, 24, 40, .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--shop-tr), visibility var(--shop-tr);
}
.shop-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.shop-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
    width: min(420px, 100vw);
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.32, .72, 0, 1);
    box-shadow: var(--shop-sh-lg);
}
.shop-drawer.is-open { transform: none; }

.shop-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--shop-line);
}
.shop-drawer-head h3 { font-family: var(--gk-font-title); font-size: 1.02rem; font-weight: 700; margin: 0; }
.shop-drawer-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--shop-line);
    background: #fff; color: var(--shop-ink);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.shop-drawer-close:hover { border-color: var(--gk-indigo); color: var(--gk-indigo); }

.shop-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.shop-drawer-foot { padding: 18px 22px; border-top: 1px solid var(--shop-line); background: var(--shop-surface-2); }

.shop-mini-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--shop-line); }
.shop-mini-line.is-busy { opacity: .5; pointer-events: none; }
.shop-mini-img { width: 64px; height: 76px; object-fit: cover; border-radius: var(--shop-radius-sm); background: var(--shop-surface-2); }
.shop-mini-info { min-width: 0; }
.shop-mini-info strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.shop-mini-info small { display: block; font-size: .76rem; color: var(--shop-muted); }
.shop-mini-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shop-mini-qty { display: inline-flex; align-items: center; border: 1px solid var(--shop-line-strong); border-radius: 999px; overflow: hidden; }
.shop-mini-qty button { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; }
.shop-mini-qty button:hover { background: var(--shop-surface-2); }
.shop-mini-qty input { width: 34px; height: 28px; border: 0; text-align: center; font-size: .82rem; font-weight: 600; background: transparent; }
.shop-mini-del { border: 0; background: transparent; color: var(--shop-muted); font-size: .76rem; cursor: pointer; text-decoration: underline; }
.shop-mini-del:hover { color: var(--shop-ko); }
.shop-mini-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: .9rem; padding: 6px 0; color: var(--shop-muted); }
.shop-mini-total strong { color: var(--shop-ink); font-variant-numeric: tabular-nums; }
.shop-mini-total.is-grand { font-size: 1rem; padding-top: 10px; border-top: 1px solid var(--shop-line); }
.shop-mini-total.is-grand strong { font-family: var(--gk-font-title); font-size: 1.18rem; letter-spacing: -.02em; }
.shop-mini-card { display: grid; gap: 10px; margin-top: 12px; }

/* ── Modale de commande express ─────────────────────────────────────── */
.shop-modal {
    position: fixed; inset: 0; z-index: 160;
    background: rgba(20, 24, 40, .58);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; visibility: hidden;
    transition: opacity var(--shop-tr), visibility var(--shop-tr);
}
.shop-modal.is-open { opacity: 1; visibility: visible; }

.shop-modal-box {
    width: min(520px, 100%);
    max-height: 88vh; overflow-y: auto;
    background: #fff;
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-sh-lg);
    transform: translateY(14px);
    transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
}
.shop-modal.is-open .shop-modal-box { transform: none; }

.shop-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 22px 24px 18px;
    border-bottom: 1px solid var(--shop-line);
}
.shop-modal-head h3 { font-family: var(--gk-font-title); font-size: 1.1rem; font-weight: 700; margin: 0; }
.shop-modal-sub { font-size: .845rem; color: var(--shop-muted); margin: 6px 0 0; line-height: 1.5; }
.shop-modal-close {
    width: 32px; height: 32px; flex: none;
    border-radius: 50%; border: 1px solid var(--shop-line);
    background: #fff; color: var(--shop-ink);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.shop-modal-close:hover { border-color: var(--gk-indigo); color: var(--gk-indigo); }
.shop-modal-body { padding: 22px 24px 26px; }

.shop-modal-product {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; margin-bottom: 22px;
    border-radius: var(--shop-radius-sm);
    background: var(--shop-surface-2);
}
.shop-modal-product img { width: 56px; height: 66px; object-fit: cover; border-radius: 6px; flex: none; }
.shop-modal-product-name { font-family: var(--gk-font-title); font-size: .92rem; font-weight: 700; line-height: 1.35; }
.shop-modal-product-meta { font-size: .85rem; color: var(--shop-muted); margin-top: 4px; }

/* ── Options de livraison (tunnel) ──────────────────────────────────── */
.ct-ship-options { display: grid; gap: 10px; }
.ct-ship-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--shop-line);
    border-radius: var(--shop-radius-sm);
    cursor: pointer;
    transition: border-color var(--shop-tr), background var(--shop-tr);
}
.ct-ship-option:hover { border-color: var(--shop-line-strong); }
.ct-ship-option.is-selected { border-color: var(--gk-indigo); background: var(--shop-surface-3); }
.ct-ship-cost { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-ship-cost.is-free { color: var(--shop-ok); }

.shop-pay-details {
    margin-top: 12px; padding: 14px 16px;
    border-radius: var(--shop-radius-sm);
    background: var(--shop-surface-2);
    font-size: .865rem; line-height: 1.6; color: var(--shop-body);
}

/* ── Pastille de promotion ──────────────────────────────────────────── */
.shop-promo-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--shop-sale-bg); color: var(--shop-sale);
    font-size: .78rem; font-weight: 700;
}
.shop-promo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shop-sale); }