/* SMASH RIOT — Click & Collect : styles propres au plugin + repli hors thème.
   Les éléments structurels (.grid, .card, .sr-order, .sr-cart, .sr-slots, .sr-track)
   sont stylés par le thème SMASH RIOT ; ici on ne fait qu'ajouter ce qui est
   spécifique au plugin et un repli minimal si le thème est absent. */

/* ---------- Personnalisation produit (Composer) ---------- */
.srcc-pick-body{ min-width:0; }
.srcc-pick-actions{ display:flex; align-items:center; gap:12px; }
.srcc-custo{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(128,128,128,.35); display:grid; gap:12px; }
.srcc-custo-grp{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.srcc-custo-h{ flex:0 0 100%; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.6; }
.srcc-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:7px 11px; border-radius:999px; border:1.5px solid rgba(128,128,128,.35); cursor:pointer; user-select:none; line-height:1; white-space:nowrap; }
.srcc-chip input{ margin:0; accent-color:currentColor; }
/* ingrédient décoché = retiré → barré */
.srcc-chip:has(.srcc-ing:not(:checked)){ opacity:.5; text-decoration:line-through; }
.srcc-chip--add:has(.srcc-addon:checked){ border-color:currentColor; font-weight:700; }
.srcc-add--custom{ justify-self:start; }

/* ---------- Grille « tous les produits » (page Commander) ---------- */
.srcc-pick-cat{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; opacity:.65; margin:22px 0 10px; }
.srcc-pick-cat:first-of-type{ margin-top:0; }
.srcc-prodgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.srcc-prodcard{ display:flex; align-items:center; gap:12px; text-align:left; padding:10px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:16px; background:var(--sr-surface,#fff); cursor:pointer; font:inherit; color:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s; position:relative; }
.srcc-prodcard:hover{ transform:translateY(-3px); border-color:var(--sr-accent,#FF5A1F); box-shadow:var(--sr-shadow,0 8px 24px -12px rgba(0,0,0,.3)); }
.srcc-prodcard__img{ width:56px; height:56px; border-radius:11px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); flex:0 0 auto; }
.srcc-prodcard__b{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.srcc-prodcard__name{ font-weight:700; font-size:15px; line-height:1.15; }
.srcc-prodcard__price{ font-family:var(--sr-fdisp,inherit); color:var(--sr-accent,#FF5A1F); font-weight:700; }
.srcc-prodcard__plus{ width:28px; height:28px; border-radius:50%; background:var(--sr-accent,#FF5A1F); color:#fff; font-size:18px; line-height:28px; text-align:center; flex:0 0 auto; }

/* ---------- Modale fiche produit ---------- */
.srcc-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.srcc-modal[hidden]{ display:none; }
.srcc-modal__backdrop{ position:absolute; inset:0; background:rgba(15,12,10,.62); backdrop-filter:blur(3px); }
.srcc-modal__panel{ position:relative; z-index:1; width:100%; max-width:520px; max-height:90vh; overflow:auto; background:var(--sr-surface,#fff); color:var(--sr-ink,#1a1a1a); border-radius:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.srcc-modal__x{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(0,0,0,.5); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.srcc-modal__img{ height:200px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.15); }
.srcc-modal__main{ padding:22px 24px 26px; }
.srcc-modal__name{ font-size:26px; margin:0 0 6px; }
.srcc-modal__desc{ color:var(--sr-muted,#6b6b63); font-size:14px; margin:0 0 18px; }
.srcc-modal__main .srcc-custo-grp{ margin-bottom:16px; }
.srcc-modal__bar{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.srcc-qty{ display:inline-flex; align-items:center; gap:14px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:999px; padding:8px 14px; }
.srcc-qty button{ width:26px; height:26px; border-radius:50%; border:1px solid currentColor; background:transparent; color:inherit; font-weight:700; cursor:pointer; line-height:1; }
.srcc-qv{ min-width:18px; text-align:center; font-weight:700; }
.srcc-modal-add{ flex:1; justify-content:center; }
.srcc-modal__added{ margin:14px 0 0; text-align:center; font-weight:700; color:#1f7a35; font-size:14px; }

/* ---------- Pages Composition / Commander ---------- */
.sr-order--compose{ display:flex; flex-direction:column; gap:28px; max-width:880px; margin:0 auto; }
.sr-order--compose .sr-cart{ position:static; }

.sr-order--checkout{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; max-width:920px; margin:0 auto; }
.sr-order--checkout .sr-cart{ position:sticky; top:90px; }
.sr-checkout{ border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:var(--sr-radius,18px); background:var(--sr-surface,#fff); box-shadow:var(--sr-shadow,0 10px 30px -16px rgba(0,0,0,.3)); padding:24px; }
.srcc-checkout-h{ font-size:22px; margin:0 0 16px; }
.srcc-backcompose{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--sr-muted,#6b6b63); text-decoration:none; }
.srcc-backcompose:hover{ color:var(--sr-accent,#FF5A1F); }
#srcc-tocheckout{ display:flex; justify-content:center; width:100%; margin-top:18px; text-decoration:none; }
@media(max-width:820px){ .sr-order--checkout{ grid-template-columns:1fr; } .sr-order--checkout .sr-cart{ position:static; } }

/* ---------- Parcours guidé : grandes tuiles d'étapes ---------- */
.srcc-stepper{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:30px; }
.srcc-step{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:22px 14px; border-radius:18px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); background:var(--sr-surface,#fff); color:inherit; font:inherit; cursor:pointer; transition:border-color .15s, background .15s, color .15s, transform .12s; }
.srcc-step:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-3px); }
.srcc-step__n{ width:40px; height:40px; border-radius:50%; background:rgba(128,128,128,.16); color:inherit; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, color .15s; }
.srcc-step__l{ font-weight:800; font-size:16px; line-height:1.1; text-transform:uppercase; letter-spacing:-.01em; }
.srcc-step.active{ background:var(--sr-accent,#FF5A1F); border-color:var(--sr-accent,#FF5A1F); color:#fff; }
.srcc-step.active .srcc-step__n{ background:rgba(255,255,255,.28); color:#fff; }
.srcc-step.done{ border-color:#1f7a35; }
.srcc-step.done .srcc-step__n{ background:#1f7a35; color:#fff; font-size:0; }
.srcc-step.done .srcc-step__n::after{ content:"✓"; font-size:18px; }

.srcc-step-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.srcc-step-head h3{ font-size:clamp(24px,3.4vw,34px); margin:0; }
.srcc-step-skip{ background:transparent; border:0; color:var(--sr-muted,#6b6b63); font:inherit; font-weight:700; cursor:pointer; }
.srcc-step-skip:hover{ color:var(--sr-accent,#FF5A1F); }
.srcc-step-intro{ color:var(--sr-muted,#6b6b63); margin:0 0 18px; }

.srcc-menujump{ display:flex; flex-wrap:wrap; gap:10px; }
.srcc-jump{ padding:14px 20px; border-radius:14px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; transition:border-color .15s, transform .12s; }
.srcc-jump:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-2px); }

.srcc-step-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.srcc-step-prev{ background:transparent; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); color:inherit; }
.srcc-step-nav .srcc-step-next{ margin-left:auto; }

a.srcc-prodlink.srcc-prodcard{ text-decoration:none; }

/* ---------- Formules (étape « Le menu ») ---------- */
.srcc-formulas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:8px; }
.srcc-formula-card{ display:flex; align-items:center; gap:14px; text-align:left; padding:12px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:18px; background:var(--sr-surface,#fff); color:inherit; font:inherit; cursor:pointer; transition:transform .14s, border-color .14s, box-shadow .14s; }
.srcc-formula-card:hover{ transform:translateY(-3px); border-color:var(--sr-accent,#FF5A1F); box-shadow:var(--sr-shadow,0 8px 24px -12px rgba(0,0,0,.3)); }
.srcc-formula-card__img{ width:72px; height:72px; border-radius:12px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); flex:0 0 auto; }
.srcc-formula-card__b{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.srcc-formula-card__name{ font-weight:800; font-size:17px; }
.srcc-formula-card__desc{ font-size:12.5px; color:var(--sr-muted,#6b6b63); }
.srcc-formula-card__steps{ font-size:12px; font-weight:700; color:var(--sr-accent,#FF5A1F); text-transform:uppercase; letter-spacing:.02em; margin-top:2px; }
.srcc-formula-card__price{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:22px; flex:0 0 auto; }

/* Constructeur de formule (dans la modale) */
.srcc-fstep{ margin-bottom:18px; }
.srcc-fopts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.srcc-fopt{ width:108px; border:1.5px solid var(--sr-line,#e0d8c8); border-radius:12px; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:8px; text-align:center; transition:border-color .14s, transform .12s; }
.srcc-fopt:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-2px); }
.srcc-fopt.sel{ border-color:var(--sr-accent,#FF5A1F); box-shadow:inset 0 0 0 2px var(--sr-accent,#FF5A1F); }
.srcc-fopt__img{ display:block; width:100%; aspect-ratio:1/1; border-radius:8px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); margin-bottom:6px; }
.srcc-fopt__name{ font-size:12px; font-weight:700; line-height:1.2; display:block; }
.srcc-formula-fix{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:18px; }
.srcc-formula-add{ margin-left:auto; }

/* ---------- Cartes best-sellers cliquables (accueil) ---------- */
.srcc-open{ cursor:pointer; }
.card.srcc-prodcard, .srcc-card{ cursor:pointer; }
.srcc-featured{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.srcc-card{ -webkit-appearance:none; appearance:none; border:0; margin:0; padding:0; font:inherit; color:inherit; text-align:left; background:transparent; display:flex; flex-direction:column; width:100%; }
.srcc-card__img{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.srcc-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.srcc-card:hover .srcc-card__img img{ transform:scale(1.05); }
.srcc-card__b{ display:flex; flex-direction:column; gap:8px; padding:16px 4px 4px; }
.srcc-card__name{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:-.01em; }
.srcc-card__desc{ color:var(--sr-muted,#6b6b63); font-size:13.5px; }
.srcc-card__row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.srcc-card__cta{ font-weight:700; color:var(--sr-accent,#FF5A1F); font-size:14px; }

/* ---------- Accompagnements (dans la fiche) ---------- */
.srcc-sides-row{ display:flex; flex-wrap:wrap; gap:10px; }
.srcc-side{ display:flex; align-items:center; gap:8px; border:1.5px solid rgba(128,128,128,.35); border-radius:12px; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:6px 12px 6px 6px; transition:border-color .15s, background .15s; }
.srcc-side:hover{ border-color:var(--sr-accent,#FF5A1F); }
.srcc-side.is-added{ border-color:#1f7a35; }
.srcc-side__img{ width:34px; height:34px; border-radius:8px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.15); flex:0 0 auto; }
.srcc-side__name{ font-weight:600; font-size:13px; }
.srcc-side__price{ font-size:12px; opacity:.7; }
.srcc-side__add{ width:22px; height:22px; border-radius:50%; background:var(--sr-accent,#FF5A1F); color:#fff; font-size:14px; line-height:22px; text-align:center; flex:0 0 auto; }

/* ---------- Transition inter-documents (page → page) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(srcc-hero){ animation-duration:.42s; }
  ::view-transition-old(srcc-hero), ::view-transition-new(srcc-hero){ mix-blend-mode:normal; }
  ::view-transition-group(*){ animation-duration:.42s; }
}

/* cartes-liens (accueil + carte) */
a.srcc-prodlink, a.srcc-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.srcc-prodlink:hover, a.srcc-card:hover{ text-decoration:none; }

/* ---------- Page produit (fiche individuelle) ---------- */
.srcc-detail-wrap{ padding:40px 0 80px; }
.srcc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.srcc-detail__media{ position:sticky; top:90px; }
.srcc-detail__img{ position:relative; width:100%; aspect-ratio:1/1; border-radius:22px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); box-shadow:var(--sr-shadow,0 18px 50px -20px rgba(0,0,0,.4)); }
.srcc-detail__img .flag, .srcc-detail__img .chip, .srcc-detail__img .sticker{ position:absolute; top:16px; left:16px; }
.srcc-detail__main{ padding:0; }
.srcc-detail__back{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sr-muted,#6b6b63); text-decoration:none; }
.srcc-detail__back:hover{ color:var(--sr-accent,#FF5A1F); }
.srcc-detail .srcc-modal__name{ font-size:clamp(34px,4vw,52px); }
.srcc-detail .srcc-modal__bar{ position:sticky; bottom:16px; background:var(--sr-surface,#fff); padding:12px; border-radius:16px; box-shadow:0 10px 30px -12px rgba(0,0,0,.3); }
@media(max-width:840px){
  .srcc-detail{ grid-template-columns:1fr; gap:22px; }
  .srcc-detail__media{ position:static; }
  .srcc-detail__img{ aspect-ratio:4/3; }
}

/* ---------- Lignes de résumé enrichies (photo + perso) ---------- */
.sr-li--rich{ display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }
.srcc-li-img{ width:46px; height:46px; border-radius:10px; object-fit:cover; background:rgba(128,128,128,.12); }
.srcc-li-img--ph{ display:block; }
.srcc-li-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.srcc-li-name{ font-weight:700; }
.srcc-li-name .q{ opacity:.6; }
.srcc-li-rm{ font-size:12px; color:#c0392b; }
.srcc-li-add{ font-size:12px; color:#1f7a35; }
.srcc-li-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; }
.srcc-li-price{ font-weight:700; }
.srcc-li-controls{ display:inline-flex; gap:5px; }

/* Boutons + / – / × dans le résumé */
.srcc-li-controls button{ width:24px; height:24px; border-radius:6px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; font-weight:700; line-height:1; opacity:.7; transition:opacity .15s; }
.srcc-li-controls button:hover{ opacity:1; }
.srcc-li-controls .srcc-rm{ color:#c0392b; }

/* Champs du panier (page commander) */
.srcc-lbl{ display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.7; margin:18px 0 10px; }
.srcc-select{ width:100%; font:inherit; padding:13px 15px; border-radius:10px; border:2px solid currentColor; background:transparent; color:inherit; margin-bottom:6px; }
.srcc-fields{ display:grid; gap:10px; margin:16px 0; }
.srcc-fields input{ font:inherit; padding:13px 15px; border-radius:10px; border:2px solid; border-color:rgba(128,128,128,.4); background:rgba(127,127,127,.06); color:inherit; }
.srcc-pay-btn{ width:100%; justify-content:center; margin-top:8px; }
.srcc-pay-btn:disabled{ opacity:.45; cursor:not-allowed; }
.srcc-fineprint{ font-size:12px; opacity:.6; text-align:center; margin-top:12px; }
.srcc-fineprint em{ opacity:.8; }

/* Confirmation de commande */
.srcc-confirm{ margin-top:18px; }
.srcc-ok-card{ text-align:center; padding:26px 20px; border-radius:16px; border:2px solid rgba(128,128,128,.3); }
.srcc-ok-check{ width:54px; height:54px; border-radius:50%; background:#2e9e5b; color:#fff; font-size:30px; line-height:54px; margin:0 auto 12px; }
.srcc-ok-code{ font-size:34px; font-weight:800; letter-spacing:.04em; margin:6px 0 12px; }
.srcc-track-link{ margin-top:14px; }

/* Suivi */
.srcc-trackform{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.srcc-trackform input{ flex:1; min-width:200px; font:inherit; padding:15px 18px; border-radius:12px; border:2px solid rgba(128,128,128,.4); background:rgba(127,127,127,.06); color:inherit; }
.srcc-tcaption{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; font-weight:700; margin-bottom:4px; }
.srcc-tstatus{ margin-left:auto; font-weight:700; }
.srcc-track-foot{ margin-top:14px; font-size:14px; opacity:.8; }

.srcc-empty{ opacity:.7; }

/* ---------- Repli minimal si le thème SMASH RIOT est absent ---------- */
.srcc-flag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:#FF5A1F; color:#fff; }
.srcc-flag--accent2{ background:#222; }
.srcc-flag--ghost{ background:#3F7D34; }
.srcc-add-btn{ border:0; cursor:pointer; padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px; background:var(--sr-accent,#FF5A1F); color:#fff; }

/* Si aucun thème ne définit .btn, donner un minimum vital */
body:not(.smash-riot) .btn:not([class*="--"]){ background:#FF5A1F; color:#fff; }