/* /assets/css/shop.css */

.sh-head{ padding:18px; }
.sh-head__top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.sh-head__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sh-muted{ color: var(--ac-muted); }

.sh-filters{ margin-top:14px; display:grid; gap:12px; }
.sh-field{ display:grid; gap:6px; }
.sh-label{ font-size:.9rem; color: var(--ac-muted); }

.sh-row{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:12px; align-items:end; }
@media (max-width: 980px){ .sh-row{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .sh-row{ grid-template-columns:1fr; } }

.sh-field--check{ padding-top: 26px; }
.sh-check{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--ac-line); border-radius: var(--ac-radius-sm); background: rgba(255,255,255,.05); }
.sh-field--btn{ display:flex; gap:10px; flex-wrap:wrap; }

.sh-grid{ margin-top:16px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width: 980px){ .sh-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .sh-grid{ grid-template-columns: 1fr; } }

.sh-card{ overflow:hidden; padding:0; }
.sh-card.is-soldout{ opacity:.85; }
.sh-cover{ display:block; position:relative; aspect-ratio: 16/10; overflow:hidden; }
.sh-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-pill{ position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:999px; background: rgba(0,0,0,.55); color:#fff; }

.sh-body{ padding:14px; display:grid; gap:10px; }
.sh-title{ display:flex; flex-direction:column; gap:8px; }
.sh-title h2{ margin:0; font-size:1.1rem; }
.sh-badges{ display:flex; gap:8px; flex-wrap:wrap; }

.sh-bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.sh-price{ font-family: var(--ac-font-h3); font-size:1.05rem; }
.sh-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.sh-empty{ padding:18px; }

.sh-pages{ margin-top:16px; }
.sh-pages__inner{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }

/* product */
.shp{ padding:18px; }
.shp-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; }
@media (max-width: 980px){ .shp-grid{ grid-template-columns: 1fr; } }
.shp-cover{ border-radius: var(--ac-radius); overflow:hidden; border:1px solid var(--ac-line); }
.shp-cover img{ width:100%; height:auto; display:block; }
.shp-gallery{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.shp-thumb{ width:84px; aspect-ratio: 1/1; border-radius: 12px; overflow:hidden; border:1px solid var(--ac-line); }
.shp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.shp-head{ display:grid; gap:10px; }
.shp-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.shp-buy{ margin-top:10px; }
.shp-form{ display:grid; gap:12px; }
.shp-price{ margin-top:10px; display:flex; gap:10px; align-items:baseline; }
.shp-desc{ margin-top:12px; }
.shp-html img{ max-width:100%; height:auto; border-radius: 12px; }

/* /assets/css/shop.css
   Boutique + Produit
   (garde TES classes, juste plus joli)
*/

/* ---------- base helpers ---------- */
.sh-muted{ color: var(--ac-muted); }
.sh-head, .shp{ padding: 20px; }

.sh-head{
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--ac-shadow);
}

.sh-head__top{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;
}

.sh-head__actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

/* ---------- filters ---------- */
.sh-filters{ margin-top: 14px; display:grid; gap: 12px; }

.sh-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}
@media (max-width: 980px){ .sh-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .sh-row{ grid-template-columns: 1fr; } }

.sh-field{ display:grid; gap: 7px; }
.sh-label{ font-size:.92rem; color: var(--ac-muted); }

.sh-field input[type="text"],
.sh-field input[type="search"],
.sh-field select{
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ac-line);
  background: rgba(0,0,0,.18);
  color: var(--ac-text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sh-field input::placeholder{ color: rgba(255,255,255,.45); }

.sh-field input:focus,
.sh-field select:focus{
  border-color: rgba(243,210,123,.55);
  box-shadow: 0 0 0 4px rgba(122,60,255,.18);
}

.sh-field--check{ padding-top: 26px; }
.sh-check{
  display:flex; gap:10px; align-items:center;
  padding: 10px 12px;
  border: 1px solid var(--ac-line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sh-check:hover{
  transform: translateY(-1px);
  border-color: rgba(243,210,123,.35);
  background: rgba(255,255,255,.06);
}
.sh-check input{ transform: scale(1.05); }

.sh-field--btn{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.sh-field--btn .btn,
.sh-field--btn button,
.sh-field--btn a{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
}

/* ---------- grid ---------- */
.sh-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){ .sh-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .sh-grid{ grid-template-columns: 1fr; } }

/* ---------- product cards ---------- */
.sh-card{
  overflow:hidden;
  padding: 0;
  border: 1px solid var(--ac-line);
  border-radius: calc(var(--ac-radius) + 2px);
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(122,60,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.sh-card:hover{
  transform: translateY(-3px);
  border-color: rgba(243,210,123,.40);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.sh-card.is-soldout{
  filter: grayscale(.15);
  opacity: .82;
}
.sh-card.is-soldout:hover{
  transform: none;
  border-color: var(--ac-line);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
}

/* cover */
.sh-cover{
  display:block;
  position:relative;
  aspect-ratio: 16/10;
  overflow:hidden;
  background: rgba(0,0,0,.20);
}
.sh-cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}
.sh-card:hover .sh-cover img{
  transform: scale(1.06);
  filter: contrast(1.02) saturate(1.05);
}
.sh-cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* pill */
.sh-pill{
  position:absolute;
  top:10px; left:10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  backdrop-filter: blur(8px);
}

/* body */
.sh-body{
  padding: 14px 14px 16px;
  display:grid;
  gap: 10px;
}

.sh-title{ display:flex; flex-direction:column; gap: 8px; }
.sh-title h2{
  margin:0;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: .2px;
}
.sh-badges{ display:flex; gap:8px; flex-wrap:wrap; }

/* bottom */
.sh-bottom{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.sh-price{
  font-family: var(--ac-font-h3);
  font-size: 1.08rem;
  display:flex;
  gap: 8px;
  align-items: baseline;
}
.sh-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* empty */
.sh-empty{
  padding: 18px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: rgba(255,255,255,.04);
}

/* pagination */
.sh-pages{ margin-top: 16px; }
.sh-pages__inner{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  padding: 12px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: rgba(255,255,255,.04);
}

/* ============================================================
   PRODUCT PAGE
============================================================ */

.shp{
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(122,60,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--ac-shadow);
}

.shp-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
}
@media (max-width: 980px){ .shp-grid{ grid-template-columns: 1fr; } }

/* cover */
.shp-cover{
  border-radius: calc(var(--ac-radius) + 2px);
  overflow:hidden;
  border: 1px solid var(--ac-line);
  background: rgba(0,0,0,.18);
}
.shp-cover img{
  width:100%;
  height:auto;
  display:block;
}

/* gallery */
.shp-gallery{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.shp-thumb{
  width: 86px;
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--ac-line);
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease;
}
.shp-thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(243,210,123,.40);
}
.shp-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* head + badges */
.shp-head{ display:grid; gap: 10px; }
.shp-badges{ display:flex; gap: 10px; flex-wrap:wrap; }

/* buy box */
.shp-buy{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: rgba(255,255,255,.04);
}

.shp-form{ display:grid; gap: 12px; }

.shp-form select,
.shp-form input[type="number"],
.shp-form input[type="text"]{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ac-line);
  background: rgba(0,0,0,.18);
  color: var(--ac-text);
  outline: none;
}
.shp-form select:focus,
.shp-form input:focus{
  border-color: rgba(243,210,123,.55);
  box-shadow: 0 0 0 4px rgba(122,60,255,.18);
}

.shp-price{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.shp-price strong{
  font-family: var(--ac-font-h3);
  font-size: 1.2rem;
}

/* description */
.shp-desc{ margin-top: 14px; }
.shp-html{
  padding: 14px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: rgba(255,255,255,.03);
}
.shp-html img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}
.shp-html ul{
  padding-left: 18px;
}
.shp-html li{
  margin: 6px 0;
}
/* ============================================================
   SHOP BUTTONS LAYER (safe)
   -> uniformise les boutons/links dans Boutique / Produit / Panier
   -> n’écrase pas ton core.css global, uniquement dans .sh* / .shp* / .crt*
============================================================ */

/* Base: capte la plupart des boutons/links “action” */
.sh-head__actions .btn,
.sh-head__actions button,
.sh-head__actions a.btn,
.sh-actions .btn,
.sh-actions button,
.sh-actions a.btn,
.sh-field--btn .btn,
.sh-field--btn button,
.sh-field--btn a.btn,
.shp-buy .btn,
.shp-buy button,
.shp-buy a.btn,
.crt-actions .btn,
.crt-actions button,
.crt-actions a.btn,
.crt-controls .btn,
.crt-controls button,
.crt-controls a.btn,
.crt-total .btn,
.crt-total button,
.crt-total a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(243,210,123,.28);
  background:
    radial-gradient(120% 220% at 20% 0%, rgba(122,60,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--ac-text);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.sh-head__actions .btn:hover,
.sh-head__actions button:hover,
.sh-head__actions a.btn:hover,
.sh-actions .btn:hover,
.sh-actions button:hover,
.sh-actions a.btn:hover,
.sh-field--btn .btn:hover,
.sh-field--btn button:hover,
.sh-field--btn a.btn:hover,
.shp-buy .btn:hover,
.shp-buy button:hover,
.shp-buy a.btn:hover,
.crt-actions .btn:hover,
.crt-actions button:hover,
.crt-actions a.btn:hover,
.crt-controls .btn:hover,
.crt-controls button:hover,
.crt-controls a.btn:hover,
.crt-total .btn:hover,
.crt-total button:hover,
.crt-total a.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(243,210,123,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.52);
  filter: saturate(1.05);
}

.sh-head__actions .btn:active,
.sh-head__actions button:active,
.sh-head__actions a.btn:active,
.sh-actions .btn:active,
.sh-actions button:active,
.sh-actions a.btn:active,
.sh-field--btn .btn:active,
.sh-field--btn button:active,
.sh-field--btn a.btn:active,
.shp-buy .btn:active,
.shp-buy button:active,
.shp-buy a.btn:active,
.crt-actions .btn:active,
.crt-actions button:active,
.crt-actions a.btn:active,
.crt-controls .btn:active,
.crt-controls button:active,
.crt-controls a.btn:active,
.crt-total .btn:active,
.crt-total button:active,
.crt-total a.btn:active{
  transform: translateY(0px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40);
}

/* Focus visible (accessibilité) */
.sh-head__actions .btn:focus-visible,
.sh-head__actions button:focus-visible,
.sh-head__actions a.btn:focus-visible,
.sh-actions .btn:focus-visible,
.sh-actions button:focus-visible,
.sh-actions a.btn:focus-visible,
.sh-field--btn .btn:focus-visible,
.sh-field--btn button:focus-visible,
.sh-field--btn a.btn:focus-visible,
.shp-buy .btn:focus-visible,
.shp-buy button:focus-visible,
.shp-buy a.btn:focus-visible,
.crt-actions .btn:focus-visible,
.crt-actions button:focus-visible,
.crt-actions a.btn:focus-visible,
.crt-controls .btn:focus-visible,
.crt-controls button:focus-visible,
.crt-controls a.btn:focus-visible,
.crt-total .btn:focus-visible,
.crt-total button:focus-visible,
.crt-total a.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(122,60,255,.22), 0 18px 50px rgba(0,0,0,.52);
}

/* ------------------------------------------------------------
   Variantes automatiques (sans classes à ajouter)
   - Primary: “payer / checkout / acheter / ajouter”
   - Danger: “retirer / supprimer / vider”
------------------------------------------------------------ */

/* Primary (boutons submit + libellés fréquents) */
.shp-buy button[type="submit"],
.crt-total button[type="submit"],
.crt-actions a[href*="checkout"],
.crt-actions a[href*="pay"],
.crt-actions a[href*="payer"],
.sh-actions a[href*="cart"],
.sh-actions a[href*="panier"]{
  border-color: rgba(243,210,123,.55);
  background:
    radial-gradient(140% 260% at 25% 0%, rgba(243,210,123,.22), transparent 55%),
    radial-gradient(120% 220% at 15% 0%, rgba(122,60,255,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

/* Danger: retirer / vider (si ce sont des buttons ou liens identifiables par href) */
.crt-controls a[href*="remove"],
.crt-controls a[href*="retirer"],
.crt-actions a[href*="clear"],
.crt-actions a[href*="vider"],
.crt-actions button[name*="clear"],
.crt-actions button[name*="vider"]{
  border-color: rgba(255,120,120,.40);
  background:
    radial-gradient(120% 220% at 20% 0%, rgba(255,120,120,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

/* ------------------------------------------------------------
   Petits boutons (ex: “Appliquer” promo)
------------------------------------------------------------ */
.crt-total button,
.crt-total .btn{
  height: 38px;
  padding: 0 12px;
}

/* Liens “Voir”/“Panier” qui sont des <a> sans .btn:
   on leur donne un look bouton soft si tu veux */
.sh-actions a:not(.btn),
.sh-head__actions a:not(.btn),
.crt-actions a:not(.btn){
  padding: 0 12px;
  height: 38px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sh-actions a:not(.btn):hover,
.sh-head__actions a:not(.btn):hover,
.crt-actions a:not(.btn):hover{
  transform: translateY(-1px);
  border-color: rgba(243,210,123,.35);
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
}

/* ------------------------------------------------------------
   Disabled states
------------------------------------------------------------ */
.sh-head__actions button:disabled,
.sh-actions button:disabled,
.sh-field--btn button:disabled,
.shp-buy button:disabled,
.crt-actions button:disabled,
.crt-controls button:disabled,
.crt-total button:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}