/* the store: the controls, the studio ground and the flow views the three options share, in the site's own tokens
   (assets/style.css :root). Every square control is the site's one box: 48 tall, 2px line border (style.css .burger/.tog). */
.st{width:var(--w);margin-inline:auto;padding-top:20px}
.st-box{display:grid;min-width:0}
.st-box>*,.st-box>.fl>*{grid-area:1/1;min-width:0}
.st-box>.fl{display:contents}
.st ol,.st ul,.st dl,.st fieldset{margin:0;padding:0;list-style:none}
/* on a desktop every view shares one cell: the box takes the tallest view's height, so nothing below it moves when the
   view changes and the one screen holds every view */
@media (min-width:1025px){
  .st-box [data-v][hidden]{display:flex!important;visibility:hidden}
  .st-box .shop[hidden]{display:grid!important}
}

/* the studio ground a tee stands on: a pool of light over the page's own grey, deeper at the floor */
.st{--g1:#3e3e3b;--g2:#2b2b29;--g3:#232321}
[data-theme="light"] .st{--g1:#fbfbf9;--g2:#ecebe6;--g3:#dfded8}
.gnd{background:radial-gradient(62% 58% at 50% 44%,var(--g1),var(--g2) 62%,var(--g3))}

/* a tee's two faces, stacked: [data-faces] holds which one shows, its Front/Back radios set it */
.shot{position:relative;overflow:hidden}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
[data-faced="front"] .shot-b,[data-faced="back"] .shot-f{opacity:0}
.fsw{display:grid;grid-template-columns:repeat(2,80px)}
.fsw button{display:flex;align-items:center;justify-content:center;height:48px;background:var(--panel);border:2px solid var(--line);color:var(--dim);font:800 14px/1 var(--f);letter-spacing:1px}
.fsw button+button{border-inline-start:0}
.fsw [aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (hover:hover){.fsw button:hover{color:var(--ink)}.fsw [aria-checked="true"]:hover{color:var(--bg)}}

/* ── labels ────────────────────────────────────────────────────────────────────────────────────── */
.lab{display:flex;align-items:center;column-gap:.3em;min-height:20px;font:700 13px/20px var(--f);letter-spacing:.5px;color:var(--dim)}
.lab-e{display:none;color:var(--red-ink)}
.pc.err .lab-n{display:none}
.pc.err .lab-e{display:inline}
.lab.bad{color:var(--red-ink)}
.dim{color:var(--dim)}
.ink{color:var(--ink)}

/* ── the one box: sizes, quantity, remove ──────────────────────────────────────────────────────── */
.szg{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:6px}
.szg button,.qty button,.line-x{display:flex;align-items:center;justify-content:center;height:48px;min-width:48px;border:2px solid var(--line);color:var(--ink);background:transparent;font:800 15px/1 var(--f);letter-spacing:.5px}
.szg [aria-checked="true"]{background:var(--red);border-color:var(--red);color:#fff;box-shadow:var(--glow)}
.pc.err [data-size]{border-color:var(--red)}
.qty{display:grid;grid-template-columns:repeat(3,48px);height:48px}
.qty output{display:flex;align-items:center;justify-content:center;border-block:2px solid var(--line);font:800 17px/1 var(--f)}
.qty button{font-size:22px}
.buy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.btn{gap:10px}
.btn.done::before{content:"";flex:none;width:10px;height:10px;background:#fff}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;background:var(--red);color:#fff;font:800 15px/1 var(--f)}
/* the cart door where there is no finish plate (05, 06): the one box, its count the red square */
.cartb{display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 18px;background:var(--panel);border:2px solid var(--line);color:var(--ink);font:800 15px/1 var(--f);letter-spacing:1px}
@media (hover:hover){.cartb:hover{border-color:var(--red)}}
.line-x svg{width:16px;height:16px}

/* ── the how-it-works steps ──────────────────────────────────────────────────────────────────────── */
.how,.picked{display:flex;flex-direction:column;gap:8px}
.how li,.picked li{display:flex;align-items:center;gap:12px;font:600 17px/1.3 var(--f)}
.how b,.picked b{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;background:var(--red);color:#fff;font:800 15px/1 var(--f)}
.how--row{flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;gap:8px}
.how--row li{gap:8px;font-size:14px;font-weight:700;white-space:nowrap}
.how--row b{width:24px;height:24px;font-size:13px}

/* ── the flow views ─────────────────────────────────────────────────────────────────────────────── */
.fv{container-type:inline-size;flex-direction:column;justify-content:center;gap:16px;width:min(760px,100%);margin-inline:auto;padding:20px 28px 24px;background:var(--panel);border:1px solid var(--line)}
.fv:not([hidden]){display:flex}
.fv-hd{display:flex;flex-direction:column;align-items:center;gap:10px}
.fv-t{font:800 26px/1.2 var(--f);text-align:center}
.fv-t:focus{outline:none}
.fv-bd{display:flex;flex-direction:column;gap:14px;min-width:0}
.fv-ft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fv-ft--1{grid-template-columns:minmax(0,320px);justify-content:center}
.fv-ft .btn{padding-inline:12px}
.fv-lead{font:600 19px/1.5 var(--f);text-align:center;text-wrap:balance}
.fv-note{font-size:15px;color:var(--dim);text-align:center}
.fv-empty{padding:24px 0;text-align:center;color:var(--dim)}
.fv-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fv-c{display:flex;flex-direction:column;gap:8px;min-width:0}
/* the panel lays itself out by its own width (the store's box on a desktop, a phone) */
@container (min-width:640px){
  .fv-cart{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:28px;align-items:start}
  .cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px;align-items:start}
  .cf .cf-a{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:499px){
  .fv-2{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* the rail: one filled square per step on a 1px lane line -- done in ink, the current step red, the rest open */
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(460px,100%)}
.rail::before{content:"";position:absolute;top:6px;left:12.5%;right:12.5%;height:1px;background:var(--line)}
.rail li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 13px/1.3 var(--f);color:var(--dim);text-align:center}
.rail li::before{content:"";width:13px;height:13px;border:1px solid var(--line);background:var(--panel)}
.rail .dn::before{background:var(--ink);border-color:var(--ink)}
.rail .on{color:var(--ink)}
.rail .on::before{background:var(--red);border-color:var(--red);box-shadow:var(--glow)}

.lines{display:flex;flex-direction:column}
.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto 56px 48px;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.line:first-child{padding-top:0}
.line img{width:56px;height:56px;background:var(--card2)}
.line-n{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.line-n b{font:800 17px/1.3 var(--f)}
.line-n span{font-size:14px;color:var(--dim)}
.line-p{font:800 17px/1 var(--f);text-align:end}

.sum{display:flex;flex-direction:column;gap:2px}
.sum>div{display:flex;justify-content:space-between;gap:16px;font-size:16px;line-height:1.6;color:var(--dim)}
.sum dd{margin:0;color:var(--ink);font-weight:700}
.sum .sum-t{margin-top:4px;padding-top:6px;border-top:1px solid var(--line);font:800 20px/1.4 var(--f);color:var(--ink)}
.sum .sum-t dd{font-weight:800}
.mini li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45}
.mini li span:last-child{font-weight:700}

/* where PayPal's address lands: the site's side-barred box (style.css .pbox / .note), waiting, then filled */
.shipto{display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:14px 20px;background:var(--card);border-inline-start:4px solid var(--red);font:600 17px/1.5 var(--f)}
.shipto p+p{margin-top:0}
.shipto--wait{color:var(--dim);border-inline-start-color:var(--line)}
.shipto--wait p:first-child{color:var(--ink)}

/* PayPal's own wallet button, gold, the only way to pay (no card form) */
.pp{display:flex;align-items:center;justify-content:center;height:48px;background:#ffc439;border:0}
.pp-w{font:italic 800 21px/1 var(--f);letter-spacing:-.2px}
.pp-w b{color:#003087;font-weight:800}
.pp-w i{color:#0a5fb4}
@media (hover:hover){.pp:hover{background:#f2ba36}}

/* the PayPal window, a stand-in: white in both themes, as PayPal's is */
.ppw{width:min(440px,100%);margin-inline:auto;padding:18px 24px 22px;background:#fff;color:#2c2e2f;border:1px solid #cbd2d6;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.ppw-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #e3e7ea}
.ppw-amt{font:800 22px/1 var(--f)}
.ppw-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid #e3e7ea;font-size:15px;line-height:1.45}
.ppw-k{color:#5c6670;font-weight:700}
.ppw-go{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin-top:16px;background:#0070e0;color:#fff;font:800 17px/1 var(--f)}
.ppw-x{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:4px;color:#005ea6;font:700 15px/1.3 var(--f)}
@media (hover:hover){.ppw-go:hover{background:#005ea6}.ppw-x:hover{text-decoration:underline}}

/* the call form */
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.cf input,.cf select{width:100%;min-width:0;height:48px;padding:0 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:500 16px/1 var(--f)}
.cf select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;cursor:pointer;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
.cf select:dir(rtl){background-position:left 14px center}
.cf input::placeholder{color:var(--dim);opacity:1}
.cf-a{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slots{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.slots legend{padding:0;margin-bottom:4px}
.slot{display:grid;grid-template-columns:32px minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.slot b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--card2);border:1px solid var(--line);font:800 15px/1 var(--f)}
@container (max-width:420px){.cf-a{grid-template-columns:minmax(0,1fr)}}
.fld:has(.bad) input,.slots:has(.bad) select:invalid,.slot.clash select{border-color:var(--red)}

@media (hover:hover){
  .szg button:hover,.qty button:hover,.line-x:hover{border-color:var(--red)}
}

@container (max-width:459px){
  .line{grid-template-columns:48px minmax(0,1fr) auto 48px;grid-template-areas:"i n n x" "i q p x";row-gap:6px}
  .line img{grid-area:i;width:48px;height:48px;align-self:start}
  .line-n{grid-area:n}
  .line .qty{grid-area:q}
  .line-p{grid-area:p}
  .line-x{grid-area:x;align-self:start}
}
/* a short desktop (1366x768): the panels breathe less */
@media (min-width:1025px) and (max-height:820px){
  .fv{gap:12px;padding-block:16px 20px}
}
@media (max-width:767px){
  .st{padding-top:16px}
  .fv{padding:18px 16px 20px}
}