/* ==========================================================================
   COPIE DE skill-panier/assets/css/frontend.css (Skill Panier 1.30.6)
   Le tiroir du panier, repris a l'identique. Seul changement : le prefixe
   skmp devient skmp, pour que Skill Panier et Skill Menu puissent etre
   installes ensemble sans que l'un habille les elements de l'autre.
   Chaque bloc indique ses lignes d'origine.
   ========================================================================== */

/* --- variables (frontend.css l.23-46) --- */
:root {
  --skmp-ink: #171717;
  --skmp-ink-2: #5c5c66;
  --skmp-ink-3: #71717a;
  --skmp-bg: #ffffff;
  --skmp-surface: #fafafa;
  /* Gris un cran plus marque : sert de PLANCHER aux zones qui doivent se
     distinguer du blanc meme quand la couleur d'accent du marchand est tres
     claire (mesure : #fafafa sur blanc, c'est 5 niveaux d'ecart, invisible). */
  --skmp-surface-2: #f1f1f4;
  --skmp-line: #e6e6e9;
  --skmp-ok: #15803d;
  --skmp-ok-soft: #eefaf1;
  --skmp-danger: #c2413a;
  --skmp-accent-soft: color-mix(in srgb, var(--skmp-accent, #171717) 8%, #ffffff);
  --skmp-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 8px 24px -12px rgba(16, 16, 20, .12);
  --skmp-shadow-lg: 0 24px 60px -20px rgba(16, 16, 20, .28);
  --skmp-fast: .16s;
  --skmp-base: .24s;
  --skmp-ease: cubic-bezier(.4, 0, .2, 1);
  /* Picto camion en masque CSS : permet de le colorer avec currentColor sans
     ajouter de balise dans un gabarit de WooCommerce qu'on ne reecrit pas. */
  --skmp-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1zM14 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}

/* --- boites et attribut hidden (frontend.css l.48-71) --- */
.skmp,
.skmp-drw,
.skmp-drw__ov,
.skmp-toast {
  box-sizing: border-box;
}

/* L'attribut hidden doit VRAIMENT masquer.
   Le navigateur applique "display:none" aux elements [hidden] via sa feuille
   par defaut — mais la moindre regle d'auteur qui fixe un display la bat. Nos
   composants sont en display:flex (tiroir, popup de variantes, pastille, champ
   code promo) : ils restaient donc AFFICHES malgre hidden. Constate en
   production : le popup de variantes, vide et transparent, recouvrait tout le
   tiroir et bloquait chaque clic.
   Regle posee une seule fois, portee a nos composants : toute zone que l'on
   masque plus tard heritera du bon comportement sans y penser. */
.skmp [hidden],
.skmp-drw [hidden],
.skmp-drw[hidden],
.skmp-drw__ov[hidden],
.skmp-bub[hidden],
.skmp-vpop[hidden] {
  display: none !important;
}

/* --- remise a zero du tiroir (frontend.css l.137-160) --- */
/* Le tiroir vit hors de .skmp (il est injecte en pied de page) : il a besoin
   de la meme barriere, sinon le theme habille ses titres et ses boutons. */
.skmp-drw h2, .skmp-drw h3, .skmp-drw p { margin: 0; padding: 0; }
.skmp-drw img { max-width: 100%; height: auto; }

.skmp-drw button,
.skmp-drw input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.skmp-drw button {
  margin: 0;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.skmp-drw a.skmp-btn,
.skmp-drw a.skmp-btn:hover { text-decoration: none; box-shadow: none; }

/* --- box-sizing (frontend.css l.169-176) --- */
.skmp *,
.skmp *::before,
.skmp *::after,
.skmp-drw *,
.skmp-drw *::before,
.skmp-drw *::after {
  box-sizing: border-box;
}

/* --- primitives : icones et boutons (frontend.css l.178-245) --- */
/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.skmp-i {
  width: 18px;
  height: 18px;
  flex: none;
}

.skmp-i--sm {
  width: 15px;
  height: 15px;
}

.skmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--skmp-radius-sm, 10px);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--skmp-fast) var(--skmp-ease),
              background var(--skmp-fast) var(--skmp-ease),
              border-color var(--skmp-fast) var(--skmp-ease),
              color var(--skmp-fast) var(--skmp-ease);
}

.skmp-btn:active { transform: translateY(1px); }

.skmp-btn--primary {
  background: var(--skmp-accent, #171717);
  color: var(--skmp-accent-fg, #fff);
}

.skmp-btn--primary:hover { filter: brightness(1.14); color: var(--skmp-accent-fg, #fff); }

.skmp-btn--block { width: 100%; height: 52px; font-size: 15.5px; }

.skmp-btn--ghost {
  background: transparent;
  border-color: var(--skmp-line);
  color: var(--skmp-ink);
}

.skmp-btn--ghost:hover { border-color: var(--skmp-accent, #171717); color: var(--skmp-accent, #171717); }

.skmp-btn--quiet {
  background: none;
  border: 0;
  min-height: auto;
  padding: 6px 2px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--skmp-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skmp-btn--quiet:hover { color: var(--skmp-accent, #171717); }


/* --- ligne offerte (frontend.css l.450-471) --- */
/* --- Ligne offerte -------------------------------------------------------- */
.skmp-line.is-gift .skmp-line__price,
.skmp-dline.is-gift .skmp-dline__p { color: var(--skmp-ok); font-weight: 700; }

.skmp-gift-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skmp-ok) 12%, transparent);
  color: var(--skmp-ok);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.skmp-msg { display: flex; align-items: center; gap: 10px; min-height: 100%; }
.skmp-msg .skmp-i { color: var(--skmp-accent, #171717); }
.skmp-msg__t { font-size: 14px; font-weight: 500; line-height: 1.4; }
.skmp-msg__t b { font-weight: 700; }


/* --- selecteur de quantite (frontend.css l.723-765) --- */
.skmp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--skmp-line);
  border-radius: var(--skmp-radius-sm, 10px);
  background: var(--skmp-bg);
  overflow: hidden;
}

.skmp-qty button {
  width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--skmp-ink-2);
  transition: all var(--skmp-fast) var(--skmp-ease);
}

.skmp-qty button:hover:not(:disabled) { background: var(--skmp-accent-soft); color: var(--skmp-accent, #171717); }
.skmp-qty button:disabled { opacity: .32; cursor: not-allowed; }

.skmp-qty__input {
  width: 44px;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.skmp-qty__input:focus { outline: none; box-shadow: none; }
.skmp-qty__input::-webkit-outer-spin-button,
.skmp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.skmp-qty__v { min-width: 34px; text-align: center; font-weight: 600; font-size: 14.5px; }


/* --- visuel de repli (frontend.css l.935-961) --- */
/* Visuel de repli quand un produit n'a pas de photo. */
.skmp-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: var(--skmp-surface);
  color: var(--skmp-ink-3);
}

.skmp-ph .skmp-i { width: 30%; height: 30%; max-width: 34px; max-height: 34px; }

.skmp-line__media .skmp-ph {
  width: 96px;
  height: 96px;
  border: 1px solid var(--skmp-line);
  border-radius: var(--skmp-radius-sm, 10px);
}

.skmp-dline__media .skmp-ph { width: 62px; height: 62px; border-radius: 8px; }
.skmp-drow__media .skmp-ph { width: 46px; height: 46px; border-radius: 6px; }
.skmp-xcard__media .skmp-ph { aspect-ratio: 1 / 1; height: auto; }
.skmp-offer__media .skmp-ph { aspect-ratio: 4 / 3; height: auto; }

.skmp-sum__rule { height: 1px; margin: 12px 0; background: var(--skmp-line); }


/* --- tiroir (frontend.css l.1324-1648) --- */
/* ==========================================================================
   TIROIR
   ========================================================================== */
.skmp-drw__ov {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(16, 16, 20, .45);
  opacity: 0;
  transition: opacity var(--skmp-base) var(--skmp-ease);
}

.skmp-drw__ov.is-open { opacity: 1; }

.skmp-drw {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  width: var(--skmp-drw-w, 428px);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--skmp-bg);
  color: var(--skmp-ink);
  box-shadow: var(--skmp-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--skmp-drw-speed, .3s) var(--skmp-ease);
}

.skmp-drw.is-open { transform: none; }

.skmp-drw__hd {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--skmp-line);
}

.skmp-drw__hd h2 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.skmp-drw__count { color: var(--skmp-ink-3); font-weight: 500; }

.skmp-drw__x {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--skmp-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--skmp-fast) var(--skmp-ease);
}

.skmp-drw__x:hover { background: var(--skmp-surface); color: var(--skmp-accent, #171717); }

.skmp-drw__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.skmp-drw__body .skmp-top { margin-bottom: 18px; padding: 13px 15px 11px; }
.skmp-drw__body .skmp-thr__txt, .skmp-drw__body .skmp-msg__t { font-size: 13px; }
/* Squelette de chargement du tiroir : rectangles gris clair aux places de la
   jauge et de trois articles, avec un reflet qui passe. Les couleurs viennent
   des variables de surface : neutre sur n'importe quel theme. */
.skmp-drw__skel { display: grid; gap: 14px; }
.skmp-skl {
  display: block;
  border-radius: 6px;
  background: var(--skmp-surface-2, #f1f1f4);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skmpSkl 1.2s ease-in-out infinite;
}
.skmp-skl--bar { height: 74px; border-radius: var(--skmp-radius-sm, 10px); }
.skmp-skl__line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--skmp-line); }
.skmp-skl--img { flex: none; width: 56px; height: 56px; border-radius: 8px; }
.skmp-skl__txt { flex: 1; display: grid; gap: 8px; min-width: 0; }
.skmp-skl--t1 { width: 72%; height: 11px; }
.skmp-skl--t2 { width: 40%; height: 11px; }
.skmp-skl--price { flex: none; width: 46px; height: 12px; }
/* Texte pour les lecteurs d'ecran : masque par NOS regles, jamais par une
   classe du theme (qui peut ne pas exister, voir 3.11). */
.skmp-skl__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@keyframes skmpSkl { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .skmp-skl { animation: none; background-image: none; } }

.skmp-drw__empty { padding: 40px 0; text-align: center; color: var(--skmp-ink-2); }
.skmp-drw__empty .skmp-i { width: 30px; height: 30px; color: var(--skmp-ink-3); margin-bottom: 12px; }

.skmp-dline {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--skmp-line);
  align-items: center;
}

.skmp-dline.is-busy { opacity: .5; pointer-events: none; }
/* Ligne en cours de retrait : le script posait is-out sans regle, le clic ne
   donnait aucun retour et un second clic repartait vers le serveur. */
.skmp-dline.is-out { opacity: .4; pointer-events: none; transition: opacity .2s; }
.skmp-dline__media img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; display: block; }
.skmp-dline__n { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.skmp-dline__n a { color: inherit; text-decoration: none; }
.skmp-dline__m { font-size: 11.5px; color: var(--skmp-ink-3); margin-bottom: 7px; }
.skmp-dline__r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.skmp-dline__p { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skmp-dline .skmp-qty button { width: 30px; height: 32px; }
.skmp-dline .skmp-qty__v { min-width: 26px; font-size: 13.5px; }

.skmp-dline__rm {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--skmp-ink-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--skmp-fast) var(--skmp-ease);
}

.skmp-dline__rm:hover { color: var(--skmp-danger); }

/* Les suggestions sont une PROPOSITION, pas le contenu du panier : elles ont
   leur propre fond pour qu'on ne les confonde pas avec les articles achetes.
   Les marges negatives annulent le padding lateral du corps du tiroir, donc la
   bande va d'un bord a l'autre — un encadre flottant ferait "carte dans une
   carte" avec les vignettes qu'elle contient.
   Le fond est un melange de la couleur d'accent du marchand et du gris de
   surface : il suit sa marque, et reste visible meme si son accent est tres
   clair (le gris de surface sert alors de plancher). */
.skmp-drw__x2 {
  margin: 20px -20px 0;
  padding: 16px 20px 10px;
  border-top: 1px solid var(--skmp-line);
  background: color-mix(in srgb, var(--skmp-accent, #171717) 7%, var(--skmp-surface-2));
}

/* Les vignettes restent blanches : c'est ce contraste qui les fait ressortir
   du fond, sans avoir a durcir leur bordure. */
.skmp-drw__x2 .skmp-drow { background: var(--skmp-bg); }

/* --- Mode defilement -----------------------------------------------------
   Sur un ecran etroit, trois suggestions empilees repoussent le bouton
   "Commander" hors de l'ecran. En defilement, elles tiennent sur une ligne que
   l'on fait glisser au doigt.
   scroll-snap, donc AUCUNE librairie : le navigateur gere l'inertie, le
   clavier et le lecteur d'ecran mieux qu'un carrousel maison.
   La piste deborde jusqu'aux bords de la bande (marges negatives) pour que la
   derniere vignette ne semble pas coupee par une marge. */
.skmp-drw__x2--slide .skmp-drw__x2track,
.skmp-drw__x2--mobile .skmp-drw__x2track {
  display: flex;
  gap: 10px;
  margin: 0 -20px;
  padding: 2px 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.skmp-drw__x2--slide .skmp-drw__x2track::-webkit-scrollbar,
.skmp-drw__x2--mobile .skmp-drw__x2track::-webkit-scrollbar { display: none; }

/* La vignette passe en colonne : image en haut, texte dessous, bouton dans le
   coin. Une ligne horizontale de 150px serait illisible. */
.skmp-drw__x2--slide .skmp-drow,
.skmp-drw__x2--mobile .skmp-drow {
  position: relative;
  flex: 0 0 148px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px;
  scroll-snap-align: start;
}

.skmp-drw__x2--slide .skmp-drow__media img,
.skmp-drw__x2--mobile .skmp-drow__media img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}

.skmp-drw__x2--slide .skmp-drow__media .skmp-ph,
.skmp-drw__x2--mobile .skmp-drow__media .skmp-ph {
  width: 100%;
  height: 96px;
  border-radius: 8px;
}

.skmp-drw__x2--slide .skmp-drow__n,
.skmp-drw__x2--mobile .skmp-drow__n { font-size: 12.5px; line-height: 1.3; }

/* Deux lignes maximum pour le NOM : au-dela, les vignettes n'auraient plus la
   meme hauteur et la ligne deviendrait bancale.
   Le rognage vise le nom SEUL : applique au bloc entier, il emportait le prix
   des que le nom prenait deux lignes (constate au banc). */
.skmp-drw__x2--slide .skmp-drow__t,
.skmp-drw__x2--mobile .skmp-drow__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le bouton se pose sur l'image : dans une vignette etroite, une ligne de plus
   sous le texte ferait perdre 34px de hauteur a chaque carte. */
.skmp-drw__x2--slide .skmp-drow__b,
.skmp-drw__x2--mobile .skmp-drow__b {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--skmp-bg);
  box-shadow: var(--skmp-shadow);
}

/* "Defilement sur mobile" : au-dessus de cette largeur, on revient a la liste
   empilee, plus lisible quand la place ne manque pas. */
@media (min-width: 601px) {
  .skmp-drw__x2--mobile .skmp-drw__x2track {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .skmp-drw__x2--mobile .skmp-drow {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
    padding: 10px;
  }
  .skmp-drw__x2--mobile .skmp-drow__media img,
  .skmp-drw__x2--mobile .skmp-drow__media .skmp-ph { width: 46px; height: 46px; border-radius: 6px; }
  .skmp-drw__x2--mobile .skmp-drow__n { font-size: 13px; }
  .skmp-drw__x2--mobile .skmp-drow__t { display: inline; overflow: visible; }
  .skmp-drw__x2--mobile .skmp-drow__b { position: static; box-shadow: none; }
}

.skmp-drw__x2 h3 {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--skmp-ink-3);
}

.skmp-drow {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--skmp-line);
  border-radius: var(--skmp-radius-sm, 10px);
  transition: border-color var(--skmp-fast) var(--skmp-ease);
}

.skmp-drow:hover { border-color: var(--skmp-accent, #171717); }
.skmp-drow__media img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; display: block; }
.skmp-drow__n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.skmp-drow__n small { display: block; margin-top: 2px; font-weight: 600; color: var(--skmp-ink-2); }

.skmp-drow__b {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--skmp-line);
  border-radius: 8px;
  background: var(--skmp-bg);
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--skmp-fast) var(--skmp-ease);
}

.skmp-drow__b:hover {
  background: var(--skmp-accent, #171717);
  border-color: var(--skmp-accent, #171717);
  color: var(--skmp-accent-fg, #fff);
}

.skmp-drw__ft {
  flex: none;
  padding: 16px 20px;
  border-top: 1px solid var(--skmp-line);
  background: var(--skmp-bg);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.skmp-drw__tot { display: flex; justify-content: space-between; align-items: baseline; }
.skmp-drw__tot span { font-size: 14px; color: var(--skmp-ink-2); }
.skmp-drw__tot b { font-size: 22px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.skmp-drw__btns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; }

.skmp-drw__msg {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  font-size: 12px;
  color: var(--skmp-ink-2);
}


/* --- compteur de menu (frontend.css l.1649-1686) --- */
/* ==========================================================================
   ICONE PANIER
   ========================================================================== */
.skmp-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.skmp-iconbtn .skmp-i { width: 22px; height: 22px; }
.skmp-iconbtn__label { font-size: 14px; font-weight: 500; }

.skmp-iconbtn__count,
.skmp-menu-count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--skmp-accent, #171717);
  color: var(--skmp-accent-fg, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.skmp-iconbtn__count[hidden],
.skmp-menu-count[hidden] { display: none; }


/* --- bandeau Annuler (frontend.css l.1687-1726) --- */
/* ==========================================================================
   BANDEAU "ANNULER"
   ========================================================================== */
.skmp-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 18px;
  border-radius: 10px;
  background: #141418;
  color: #f4f4f6;
  font-size: 13.5px;
  box-shadow: var(--skmp-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: all var(--skmp-base) var(--skmp-ease);
}

.skmp-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.skmp-toast button {
  border: 0;
  background: none;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 4px 6px;
  border-radius: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.skmp-toast button:hover { color: #ff9d9d; }


/* --- doigt et mouvement reduit (frontend.css l.1767-1783) --- */
/* Cibles tactiles confortables des qu'on est au doigt. */
@media (pointer: coarse) {
  .skmp-qty button { width: 44px; height: 44px; }
  .skmp-dline .skmp-qty button { width: 40px; height: 42px; }
  .skmp-drw__x, .skmp-drow__b, .skmp-dline__rm { width: 44px; height: 44px; }
  .skmp-xcard__add { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .skmp *, .skmp *::before, .skmp *::after,
  .skmp-drw, .skmp-drw__ov, .skmp-toast, .skmp-mbar {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}



/* --- code promo et choix de variante (frontend.css l.1784-1946) --- */
/* ==========================================================================
   CODE PROMO DANS LE TIROIR
   Replie par defaut : la majorite des clients n'a pas de code, et un champ
   vide ouvert au-dessus du bouton "Commander" fait douter ("il me manque
   quelque chose ?"). Un lien discret suffit a ceux qui en ont un.
   ========================================================================== */

.skmp-drwc {
  padding: 12px 20px 0;
  border-top: 1px solid var(--skmp-line);
}

.skmp-drwc__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.skmp-drwc__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skmp-ok) 12%, transparent);
  color: var(--skmp-ok);
  font-size: 12px;
}

.skmp-drwc__tag b { font-weight: 700; }

.skmp-drwc__tag button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}

.skmp-drwc__tag button:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.skmp-drwc__tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--skmp-ink-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.skmp-drwc__tg:hover { color: var(--skmp-accent, #171717); }

.skmp-drwc__body { display: flex; gap: 8px; margin-top: 9px; }

.skmp-drwc__in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--skmp-line);
  border-radius: var(--skmp-radius-sm, 10px);
  background: var(--skmp-bg);
  color: var(--skmp-ink);
  font-size: 13.5px;
  text-transform: uppercase;
}

.skmp-drwc__in:focus { outline: 2px solid var(--skmp-accent, #171717); outline-offset: 1px; }

.skmp-drwc__body .skmp-btn { flex: 0 0 auto; }

.skmp-drwc__err { margin: 8px 0 0; color: var(--skmp-danger, #b42318); font-size: 12.5px; }

/* ==========================================================================
   CHOIX RAPIDE D'UNE VARIANTE
   Ancre DANS le tiroir (position absolute, pas fixed) : le tiroir est deja au
   premier plan, un second element fixe passerait derriere sur certains themes.
   ========================================================================== */

.skmp-vpop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .38);
}

.skmp-vpop__card {
  width: 100%;
  padding: 18px 20px 20px;
  border-radius: var(--skmp-radius, 14px) var(--skmp-radius, 14px) 0 0;
  background: var(--skmp-bg);
  box-shadow: var(--skmp-shadow-lg);
}

.skmp-vpop__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.skmp-vpop__hd b { font-size: 14.5px; line-height: 1.35; }

.skmp-vpop__x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--skmp-ink-3);
  cursor: pointer;
}

.skmp-vpop__x:hover { background: var(--skmp-soft); color: var(--skmp-ink); }

.skmp-vpop__fields { display: flex; flex-direction: column; gap: 10px; }

.skmp-vpop__f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--skmp-ink-2);
}

.skmp-vpop__f select {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--skmp-line);
  border-radius: var(--skmp-radius-sm, 10px);
  background: var(--skmp-bg);
  color: var(--skmp-ink);
  font-size: 13.5px;
  font-weight: 400;
}

.skmp-vpop__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.skmp-vpop__p { font-size: 15px; font-weight: 700; }
.skmp-vpop__msg { margin: 10px 0 0; color: var(--skmp-danger, #b42318); font-size: 12.5px; }