@layer modules{
/* ──────────────────────────────────────────────────────────────────────────
   Boutique in-app « Matériel » - rayons, fiches produit, panier (façon store).
   Vit dans le modal Paramètres (#modal.mx.settings .set-pane).
   ────────────────────────────────────────────────────────────────────────── */

/* En-tête avec action à droite (bouton panier) */
.set-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-16)}
.set-head-row>div{min-width:0}

/* ── Bouton panier ── */
.shop-cartbtn{display:inline-flex;align-items:center;gap:var(--sp-6);flex:none;
  padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);
  color:var(--txt);font-size:var(--fs-md);font-weight:var(--fw-strong);cursor:pointer;transition:border-color .15s,background .15s}
.shop-cartbtn:hover{border-color:var(--accent);background:var(--card2)}
.shop-cartbtn .ic{width:17px;height:17px}
.shop-cartbtn.has{border-color:var(--accent)}
.shop-cartbadge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 var(--sp-4);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-solid);font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-left:var(--sp-1)}

/* ── Home Boutique : deux rayons ── */
.shop-depts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14);margin:var(--sp-4) 0 var(--sp-18)}
.shop-dept-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);text-align:left;
  padding:var(--sp-18);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  cursor:pointer;position:relative;transition:border-color .15s,transform .12s,box-shadow .15s}
.shop-dept-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.shop-dept-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:var(--sp-8);
  border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.shop-dept-ic .ic{width:22px;height:22px}
.shop-dept-t{font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:-.01em}
.shop-dept-s{font-size:var(--fs-sm);color:var(--mut);line-height:1.45}
.shop-dept-go{position:absolute;top:16px;right:14px;color:var(--mut)}
.shop-dept-go .ic{width:18px;height:18px}
.shop-cart-recall{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-14);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card)}
.shop-cart-recall .ic{width:20px;height:20px;color:var(--accent);flex:none}
.shop-cart-recall>div{flex:1;font-size:var(--fs-md)}
.shop-cart-recall b{font-weight:var(--fw-bold)}

/* ── Rayons (catalogue) ── */
.shop-rayon{margin:0 0 var(--sp-26)}
.shop-rayon-h{display:flex;align-items:center;gap:var(--sp-10);margin:0 0 var(--sp-12)}
.shop-rayon-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:var(--radius);background:var(--card2);border:1px solid var(--line);color:var(--accent)}
.shop-rayon-ic .ic{width:19px;height:19px}
.shop-rayon-t{font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:-.01em}
.shop-rayon-s{font-size:var(--fs-sm);color:var(--mut)}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-14)}
.shop-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);cursor:pointer;
  transition:border-color .15s,transform .12s,box-shadow .15s}
.shop-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.shop-card-dept{font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:var(--sp-12) var(--sp-14) 0}
.shop-card-n{font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:-.01em;margin:var(--sp-2) var(--sp-14) 0;line-height:1.25}
.shop-card-tag{font-size:var(--fs-sm);color:var(--mut);line-height:1.45;margin:var(--sp-4) var(--sp-14) 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);margin:auto var(--sp-14) var(--sp-12);padding-top:var(--sp-10)}
.shop-card-price{font-size:var(--fs-base);font-weight:var(--fw-bold)}
.shop-card-see{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--accent)}
.shop-card-see .ic{width:14px;height:14px}

/* ── Visuel produit (vignette dégradée) ── */
.shop-hero{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 26%,var(--card)) 0%,color-mix(in srgb,var(--ac) 8%,var(--card)) 100%);
  overflow:hidden}
.shop-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 22% 18%,rgba(255,255,255,.18),transparent 55%)}
.shop-hero-ic{position:relative;z-index:1;color:var(--ac)}
.shop-hero-ic .ic{width:52px;height:52px}
.shop-hero-lg .shop-hero-ic .ic{width:88px;height:88px}
.shop-hero-badge{position:absolute;z-index:1;top:9px;left:9px;padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);
  background:var(--ac);color:var(--on-solid);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.02em;
  white-space:nowrap;max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis}
.shop-card .shop-hero{border-radius:0}
.shop-hero-lg{border-radius:var(--radius);aspect-ratio:auto;min-height:280px}

/* ── Fiche produit ── */
.shop-fiche-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin:0 0 var(--sp-14);padding-right:var(--sp-46)}
.shop-back{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-12) var(--sp-6) var(--sp-8);border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--card);color:var(--txt);font-size:var(--fs-md);font-weight:var(--fw-strong);cursor:pointer}
.shop-back:hover{border-color:var(--accent)}
.shop-back .ic{width:16px;height:16px}

.shop-fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-26);margin:0 0 var(--sp-24)}
.shop-fiche-media{display:flex;flex-direction:column;gap:var(--sp-14)}
.shop-hi{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-8)}
.shop-hi li{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-md);color:var(--txt)}
.shop-hi .ic{width:17px;height:17px;color:var(--ok);flex:none;margin-top:var(--sp-1)}

.shop-fiche-dept{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.shop-fiche-dept .ic{width:15px;height:15px;color:var(--accent)}
.shop-fiche-n{margin:var(--sp-8) 0 0;font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.15}
.shop-fiche-tag{margin:var(--sp-8) 0 0;font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-normal)}
.shop-fiche-price{margin:var(--sp-16) 0 0;font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.shop-fiche-ship{display:inline-flex;align-items:center;gap:var(--sp-6);margin:var(--sp-8) 0 0;font-size:var(--fs-sm);color:var(--mut)}
.shop-fiche-ship .ic{width:17px;height:17px;color:var(--ok)}

.shop-buy{display:flex;align-items:center;gap:var(--sp-12);margin:var(--sp-18) 0 0;flex-wrap:wrap}
.shop-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;background:var(--card)}
.shop-step button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:40px;border:0;
  background:transparent;color:var(--txt);cursor:pointer}
.shop-step button:hover{background:var(--card2)}
.shop-step button:disabled{opacity:.35;cursor:default}
.shop-step button .ic{width:16px;height:16px}
.shop-step>span{min-width:34px;text-align:center;font-size:var(--fs-base);font-weight:var(--fw-bold)}
.shop-step-sm button{width:30px;height:32px}
.shop-step-sm>span{min-width:26px;font-size:var(--fs-md)}
.shop-add{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);height:42px;font-size:var(--fs-base)}
.shop-add .ic{width:17px;height:17px}
.shop-incart{margin:var(--sp-10) 0 0;font-size:var(--fs-sm);color:var(--mut);display:flex;align-items:center;gap:var(--sp-6)}
.shop-incart .ic{width:15px;height:15px;color:var(--ok)}
.shop-incart a{color:var(--link)}
.shop-fiche-blurb{margin:var(--sp-18) 0 0;font-size:var(--fs-md);color:var(--txt);line-height:var(--lh-loose);opacity:.92}

/* Caractéristiques */
.shop-specs{margin:0 0 var(--sp-24)}
.shop-spec-tbl{width:100%;border-collapse:collapse;margin-top:var(--sp-8);font-size:var(--fs-md)}
.shop-spec-tbl tr{border-top:1px solid var(--line2)}
.shop-spec-tbl tr:first-child{border-top:0}
.shop-spec-tbl th{text-align:left;font-weight:var(--fw-medium);color:var(--mut);padding:var(--sp-10) var(--sp-16) var(--sp-10) 0;width:42%;vertical-align:top}
.shop-spec-tbl td{padding:var(--sp-10) 0;color:var(--txt);font-weight:var(--fw-strong)}

/* Produits liés */
.shop-relbox{margin:0 0 var(--sp-10)}
.shop-relrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-12);margin-top:var(--sp-8)}
.shop-rel{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);cursor:pointer;transition:border-color .15s}
.shop-rel:hover{border-color:var(--accent)}
.shop-rel-n{font-size:var(--fs-sm);font-weight:var(--fw-strong);margin:var(--sp-8) var(--sp-10) 0;line-height:1.3}
.shop-rel-p{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--mut);margin:var(--sp-2) var(--sp-10) var(--sp-10)}

/* ── Panier ── */
.shop-cart-list{display:flex;flex-direction:column;gap:var(--sp-12);margin:var(--sp-4) 0 var(--sp-18)}
.shop-cl{display:grid;grid-template-columns:84px 1fr auto;gap:var(--sp-14);align-items:center;
  padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.shop-cl .shop-hero-badge,.shop-rel .shop-hero-badge{display:none}
.shop-cl .shop-hero{width:84px;border-radius:var(--radius);aspect-ratio:1/1}
.shop-cl .shop-hero-ic .ic{width:34px;height:34px}
.shop-cl-mid{min-width:0}
.shop-cl-n{display:block;text-align:left;background:0;border:0;padding:0;color:var(--txt);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer;letter-spacing:-.01em}
.shop-cl-n:hover{color:var(--accent)}
.shop-cl-d{font-size:var(--fs-sm);color:var(--mut);margin:var(--sp-2) 0 var(--sp-8)}
.shop-cl-act{display:flex;align-items:center;gap:var(--sp-12)}
.shop-cl-rm{display:inline-flex;align-items:center;gap:var(--sp-4);background:0;border:0;padding:0;color:var(--mut);font-size:var(--fs-sm);cursor:pointer}
.shop-cl-rm:hover{color:var(--err)}
.shop-cl-rm .ic{width:15px;height:15px}
.shop-cl-sum{font-size:var(--fs-base);font-weight:var(--fw-bold);white-space:nowrap;align-self:flex-start}

.shop-cart-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-18);
  padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2)}
.shop-cart-tot{min-width:220px;flex:1}
.shop-tot-l{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-20);font-size:var(--fs-md);padding:var(--sp-4) 0}
.shop-tot-mut{color:var(--mut);font-size:var(--fs-sm)}
.shop-tot-big{font-size:var(--fs-lg);font-weight:var(--fw-bold);border-top:1px solid var(--line);margin-top:var(--sp-6);padding-top:var(--sp-10)}
.shop-cart-cta{display:flex;align-items:center;gap:var(--sp-10)}
.shop-cart-cta .primary{display:inline-flex;align-items:center;gap:var(--sp-6);height:42px;padding:0 var(--sp-18);font-size:var(--fs-base)}
.shop-cart-cta .primary .ic{width:17px;height:17px}

.shop-cart-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-8);padding:var(--sp-48) var(--sp-20);
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--card)}
.shop-cart-empty>.ic{width:34px;height:34px;color:var(--mut)}
.shop-cart-empty b{font-size:var(--fs-base)}
.shop-cart-empty p{margin:var(--sp-2) 0 var(--sp-10);font-size:var(--fs-md);color:var(--mut)}

/* Récap de commande (dans la confirmation MX) */
.shop-co-list{margin:var(--sp-6) 0;padding-left:var(--sp-18);font-size:var(--fs-md);line-height:1.6}
.shop-co-tot{margin:var(--sp-8) 0;font-size:var(--fs-base)}

/* ── Responsive ── */
@media(max-width:820px){
  .shop-fiche{grid-template-columns:1fr;gap:var(--sp-18)}
  .shop-depts{grid-template-columns:1fr}
  .shop-hero-lg{min-height:220px}
}

}