/* css/account-shop.css - the Store section of account.html (js/account/shop.js). Builds on css/account.css (cards, notices) and the tokens.
   Everything is symmetric on purpose: centred text, equal-width cards, column counts that follow the width of the section (container query), the last row of a
   filtered list is centred, buttons have one height. Prefix `sh-`. */

.sh{container:sh / inline-size;display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-loading{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:48px 16px;color:var(--text-2);margin:0}
.sh-fail{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;padding:32px 16px;border:1px dashed var(--line-2);border-radius:var(--radius-l)}
.sh-fail-text{margin:0;font-weight:650}

/* header: lead + balance, centred */
.sh-head{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}
.sh-lead{margin:0;color:var(--text-2);max-width:60ch;text-wrap:balance}
.sh-balance{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-3);padding:8px 8px 8px 16px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-pill)}
.sh-balance-label{color:var(--text-2);font-size:var(--fs-s);font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.sh-balance-value{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sh-balance .bm-btn{min-height:var(--ctl-h)}

/* banners (full border, no one-sided bar) */
.sh-banners{display:flex;flex-direction:column;gap:var(--sp-2)}
.sh-banners:empty{display:none}
.sh-banner{margin:0;padding:10px 16px;border-radius:var(--radius-m);background:var(--bg-2);border:1px solid color-mix(in srgb,var(--info) 45%,var(--line-2));text-align:center;font-size:var(--fs-m);line-height:1.5;text-wrap:balance}
.sh-banner.sh-bad{border-color:color-mix(in srgb,var(--bad) 60%,var(--line-2));background:color-mix(in srgb,var(--bad) 8%,var(--bg-2))}
.sh-banner.sh-warn{border-color:color-mix(in srgb,var(--warn) 60%,var(--line-2));background:color-mix(in srgb,var(--warn) 8%,var(--bg-2))}

/* groups */
.sh-group{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.sh-gh{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sh-gtitle{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em}
.sh-status{margin:0;display:inline-flex;align-items:center;min-height:24px;padding:2px 12px;border-radius:var(--radius-pill);background:var(--bg-2);border:1px solid var(--line-2);color:var(--text-2);font-size:var(--fs-s);font-weight:650}
.sh-gintro{margin:0;text-align:center;color:var(--text-2);max-width:68ch;margin-inline:auto;text-wrap:balance}
.sh-fine{margin:0;text-align:center;color:var(--text-3);font-size:var(--fs-s);text-wrap:balance}

/* cards */
.sh-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:0;padding:var(--sp-4);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-l);text-align:center}
.sh-name{margin:0;font-size:var(--fs-l);font-weight:750;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.sh-sub{margin:0;color:var(--text-2);font-size:var(--fs-s);min-height:2.9em;display:flex;align-items:center;justify-content:center}
.sh-price{margin:0;font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sh-act{width:100%;margin-top:auto;padding-top:var(--sp-2);display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.sh-act .bm-btn,.sh-act .sh-state{width:100%;min-height:44px;padding:6px 10px;white-space:normal;text-align:center;line-height:1.2;justify-content:center}
.sh-state{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-s);font-size:var(--fs-m);font-weight:650}
.sh-state.sh-owned{color:var(--good);border:1px solid color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.sh-tick{flex:none}

/* web membership plans: 4 / 2 / 1 equal columns */
.sh-plans{--cols:1;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--sp-3);align-items:stretch}
.sh-plan .sh-name{font-size:var(--fs-xl)}

/* Vocal Toner + Full Band: two equal cards */
.sh-featured{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:stretch}
.sh-feature{padding:var(--sp-5) var(--sp-4);gap:var(--sp-3)}
.sh-fhead{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.sh-fname{font-size:var(--fs-xl)}
.sh-fdesc{margin:0;color:var(--text);line-height:1.5;text-wrap:balance}
.sh-fnote{margin:0;color:var(--text-2);font-size:var(--fs-s);line-height:1.5;text-wrap:balance}
.sh-ffoot{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.sh-ffoot .sh-act{margin-top:0}
.sh-best{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--bg-1)),var(--bg-1) 70%);box-shadow:0 0 0 1px var(--accent-soft),0 10px 36px rgba(255,122,26,.10)}

/* plug-ins: filters, count, grid (4 / 2 / 1 columns, a short last row is centred) */
.sh-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
.sh-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.sh-fld label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);text-align:center}
.sh-fld .bm-input,.sh-fld .bm-selectbox{height:var(--ctl-h-lg);min-height:var(--ctl-h-lg);text-align:center;text-align-last:center}
.sh-countrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-3);min-height:var(--ctl-h-sm)}
.sh-count{margin:0;color:var(--text-2);font-size:var(--fs-s)}
.sh-clear[hidden]{display:none}
.sh-grid{--cols:1;--gap:12px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--gap)}
.sh-grid>.sh-card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.sh-none{margin:0;flex:1 1 100%;padding:28px 16px;text-align:center;color:var(--text-2);border:1px dashed var(--line-2);border-radius:var(--radius-l)}
.sh-plugin{padding:var(--sp-3)}
.sh-plugin .sh-pname{font-size:var(--fs-m);min-height:2.5em;display:flex;align-items:center;justify-content:center}
.sh-pcat{margin:0;color:var(--text-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:1.4em}

@container sh (min-width:400px){
  .sh-plans{--cols:2}
  .sh-grid{--cols:2}
  .sh-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sh (min-width:560px){
  .sh-grid{--cols:3}
}
@container sh (min-width:600px){
  .sh-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sh (min-width:740px){
  .sh-plans{--cols:4}
  .sh-grid{--cols:4}
}

/* confirm dialog (native <dialog>, lives in <body>, so it does not use the container) */
.sh-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-2);border-radius:var(--radius-l);background:var(--bg-1);color:var(--text);box-shadow:var(--shadow-3);overflow:auto}
.sh-dialog::backdrop{background:rgba(4,6,10,.72);backdrop-filter:blur(6px)}
.sh-dialog *,.sh-dialog *::before,.sh-dialog *::after{box-sizing:border-box}
.sh-dlg-body{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5)}
.sh-dlg-title{margin:0;font-size:var(--fs-xl);font-weight:800;text-align:center;letter-spacing:-.01em}
.sh-dlg-title:focus{outline:none}
.sh-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.sh-rows dt,.sh-rows dd{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-m)}
.sh-rows dt{color:var(--text-2);text-align:left;background:var(--bg-2)}
.sh-rows dd{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sh-rows dt:nth-last-of-type(1),.sh-rows dd:last-of-type{border-bottom:0}
.sh-rows .sh-strong{font-size:var(--fs-l);font-weight:800}
.sh-rows .sh-neg{color:var(--bad)}
.sh-notice{margin:0;text-align:center;color:var(--text-2);font-size:var(--fs-s);line-height:1.5;text-wrap:balance}
.sh-consent{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--sp-3);cursor:pointer;line-height:1.45;font-size:var(--fs-m);padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--bg-2)}
.sh-consent input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--accent)}
.sh-dlg-msg{margin:0;text-align:center;font-size:var(--fs-m);line-height:1.5;text-wrap:balance}
.sh-dlg-msg:empty{display:none}
.sh-dlg-msg.sh-bad{color:#ffb3bc}
.sh-dlg-msg.sh-warn{color:var(--warn)}
.sh-dlg-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.sh-dlg-foot .bm-btn{flex:1 1 0;min-width:120px;min-height:var(--ctl-h-lg);white-space:normal;text-align:center;line-height:1.2}
.sh-dlg-foot .bm-btn[hidden]{display:none}
.sh-done-mark{align-self:center;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent);border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.sh-done-mark .sh-tick{width:24px;height:24px}
.sh-done-what,.sh-done-balance{margin:0;text-align:center}
.sh-done-balance{font-weight:700;font-variant-numeric:tabular-nums}
.sh-done-id{margin:0;text-align:center;color:var(--text-3);font:var(--fs-xs) var(--mono);overflow-wrap:anywhere}

@media (max-width:480px){
  .sh-dlg-body{padding:var(--sp-4)}
  .sh-dlg-foot .bm-btn{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .sh *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}