/* ==========================================================================
   PUTSCH.ORG — BOUTIQUE (feuille conditionnelle)
   --------------------------------------------------------------------------
   CE FICHIER N'EST CHARGÉ QUE SUR LES PAGES BOUTIQUE (`shop: true`).
   Il ne doit donc contenir QUE ce qui n'existe nulle part ailleurs : barre de
   filtres, prix, sélecteur de taille, squelettes de chargement.

   Tout le reste a migré dans putsch.css. Le piège, déjà tombé une fois : le
   tiroir panier et la fiche `.pdp` sont rendus par la coquille sur TOUTES les
   pages (le bouton Panier est dans la nav, et les fiches event réutilisent le
   gabarit `.pdp`). Laisser leurs styles ici revenait à publier, en bas de
   chaque page non-boutique, le balisage du panier sans aucune mise en forme —
   « Panier 0 / Fermer ✕ / Rien pour l'instant » en clair dans le pied de page.

   Règle : si un composant peut apparaître hors boutique, son style va dans
   putsch.css. Rien d'autre n'entre ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — BARRE DE FILTRES
   -------------------------------------------------------------------------- */
.filters{
  display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;
  border-block:1px solid var(--edge);
  padding-block:1rem;margin-bottom:clamp(1.8rem,4vw,3rem);
}
.filters__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hot);font-weight:700;margin-right:.5rem;
}
.chip{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);
  border:1px solid var(--edge);padding:.5em .85em;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--bone);border-color:var(--bone)}
.chip[aria-pressed='true']{background:var(--bone);color:var(--void);border-color:var(--bone)}
.filters__count{
  margin-left:auto;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}
@media (hover:none),(pointer:coarse){ .chip{padding-block:.85em} }

/* --------------------------------------------------------------------------
   02 — PRIX
   -------------------------------------------------------------------------- */
.pdp__price{
  font-family:var(--mono);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;
  letter-spacing:.06em;margin-top:1rem;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.pdp__price s{color:var(--ash);font-weight:400;font-size:.72em}
.pdp__price .save{
  background:var(--hot);color:var(--on-hot);
  font-size:.55em;letter-spacing:.14em;padding:.3em .55em;
}

/* --------------------------------------------------------------------------
   03 — SÉLECTEUR DE TAILLE : carrés brutaux
   -------------------------------------------------------------------------- */
.sizes{margin-top:1.8rem}
.sizes__head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.75rem;gap:1rem;
}
.sizes__guide{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--edge);
  transition:color .2s,border-color .2s;
}
.sizes__guide:hover{color:var(--hot);border-color:var(--hot)}
.sizes__grid{display:flex;gap:.45rem;flex-wrap:wrap}
.size{
  min-width:3.4rem;height:3.4rem;
  display:grid;place-items:center;
  border:1px solid var(--edge);
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone);
  position:relative;overflow:hidden;
  transition:border-color .2s,color .2s,background .2s;
}
.size:hover:not([disabled]){border-color:var(--bone)}
.size[aria-pressed='true']{background:var(--bone);color:var(--void);border-color:var(--bone)}

/* Derniers exemplaires : le chiffre est posé par shop.js (`data-stock`), et
   seulement quand la Storefront API donne le stock à l'unité. Un nombre nu se
   lit dans les trente-huit langues. L'accent reste une INVERSION, jamais une
   couleur — et il se réinverse quand la taille est sélectionnée, sans quoi le
   badge blanc disparaîtrait sur le bouton devenu clair. */
.size[data-stock]::before{
  content:attr(data-stock);
  position:absolute;top:0;right:0;z-index:1;
  font-size:.7rem;line-height:1;font-weight:700;letter-spacing:0;
  padding:.2em .32em;
  background:var(--hot);color:var(--on-hot);
}
.size[aria-pressed='true'][data-stock]::before{background:var(--void);color:var(--hot)}
.size[disabled]{
  color:var(--ash);opacity:.42;cursor:not-allowed;border-style:dashed;
}
/* variante épuisée : barrée */
.size[disabled]::after{
  content:'';position:absolute;left:-12%;right:-12%;top:50%;height:1px;
  background:var(--hot);transform:rotate(-42deg);
}

/* --------------------------------------------------------------------------
   04 — SQUELETTES DE CHARGEMENT
   Un squelette n'est jamais un état FINAL : shop.js impose un timeout de 3 s
   puis bascule sur le cache ou le repli.
   -------------------------------------------------------------------------- */
.skel{position:relative;overflow:hidden;background:var(--void)}
.skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(237,234,227,.045),transparent);
  animation:sweep 1.15s linear infinite;
}
@keyframes sweep{to{transform:translateX(100%)}}
.skel__line{height:.7rem;background:var(--void);margin-top:.6rem}
.skel__line--sm{width:45%}
@media (prefers-reduced-motion:reduce){ .skel::after{animation:none} }