/* Structural styles for shop.js. Pages theme it through these custom properties. */
:root{--s-bg:#fff;--s-card:#fff;--s-soft:#f4f2ee;--s-line:#e4e0d8;--s-text:#161412;--s-muted:#6f6a62;--s-accent:#ffb400;--s-ink:#16120a;--s-r:14px;--s-font:system-ui,sans-serif;--s-display:var(--s-font);--s-ease:cubic-bezier(.23,1,.32,1)}
fieldset[hidden],[hidden]{display:none!important}
.sh-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;background:var(--s-card);border:1px solid var(--s-line);border-radius:var(--s-r);padding:14px}
.sh-size{display:flex;gap:6px;padding-right:12px;border-right:1px solid var(--s-line)}
.sh-bar label{display:grid;gap:4px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--s-muted)}
.sh-bar select{min-width:92px;background:var(--s-soft);color:var(--s-text);border:1px solid var(--s-line);border-radius:10px;padding:10px 12px;font:500 .95rem var(--s-font)}
.sh-reset{margin-left:auto;background:none;border:0;color:var(--s-muted);font:500 .9rem var(--s-font);cursor:pointer;text-decoration:underline;padding:10px 4px}
.sh-count{color:var(--s-muted);font-size:.85rem;margin:16px 2px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sh-card{background:var(--s-card);border:1px solid var(--s-line);border-radius:var(--s-r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--s-ease),box-shadow .25s var(--s-ease)}
@media (hover:hover){.sh-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}}
.sh-img{position:relative;display:block;border:0;padding:0;background:#000;cursor:zoom-in}
.sh-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.sh-units{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.72);color:#fff;font:600 .72rem var(--s-font);padding:4px 8px;border-radius:20px}
.sh-body{padding:14px 14px 16px;display:grid;gap:6px;flex:1}
.sh-size-t{font:700 1.3rem var(--s-display);letter-spacing:.01em}.sh-size-t small{font-size:.8rem;color:var(--s-muted);font-weight:500}
.sh-name{color:var(--s-muted);font-size:.85rem}
.sh-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--s-muted)}
.sh-tread{flex:1;height:5px;border-radius:5px;background:var(--s-soft);overflow:hidden;min-width:40px}.sh-tread i{display:block;height:100%;background:var(--s-accent)}
.sh-buy{display:flex;align-items:baseline;gap:4px;margin-top:auto;padding-top:8px}
.sh-buy b{font:700 1.35rem var(--s-display)}.sh-buy small{color:var(--s-muted)}
.sh-add{margin-left:auto;background:var(--s-accent);color:var(--s-ink);border:0;border-radius:10px;padding:10px 14px;font:700 .88rem var(--s-font);cursor:pointer;white-space:nowrap;transition:filter .15s,transform .12s}
.sh-add:hover{filter:brightness(1.07)}.sh-add:active{transform:scale(.97)}.sh-add.sh-wide{width:100%;padding:15px;font-size:1rem;margin:0}
.sh-empty{color:var(--s-muted);padding:30px 0}.sh-empty a{color:inherit}
/* dialog */
.sh-dialog{margin:auto;border:0;border-radius:18px;padding:0;max-width:min(960px,94vw);width:100%;background:var(--s-card);color:var(--s-text);box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.sh-dialog::backdrop{background:rgba(10,10,10,.6);backdrop-filter:blur(3px)}
.sh-dialog[open]{animation:dlg .28s var(--s-ease)}@keyframes dlg{from{opacity:0;transform:translateY(12px) scale(.98)}}
.sh-x{position:absolute;right:12px;top:10px;background:var(--s-soft);border:0;border-radius:50%;width:36px;height:36px;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--s-text);z-index:2}
.sh-sheet-grid{display:grid;grid-template-columns:.9fr 1.1fr}
.sh-sheet-grid>img{width:100%;height:100%;max-height:640px;object-fit:cover}
.sh-sheet-grid>div{padding:30px}
.sh-kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted)}
.sh-sheet h3{font:700 1.7rem var(--s-display);margin:4px 0}.sh-size-big{font:700 1.1rem var(--s-display);color:var(--s-muted)}
.sh-specs{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}.sh-specs td{padding:8px 0;border-bottom:1px solid var(--s-line);vertical-align:middle}.sh-specs td:first-child{color:var(--s-muted);width:46%}
.sh-specs .sh-tread{display:inline-block;width:80px;vertical-align:middle;margin-left:6px}
.sh-sheet-buy{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:baseline}
.sh-sheet-buy b{font:700 2rem var(--s-display)}.sh-sheet-buy small{color:var(--s-muted)}
.sh-qty{grid-column:1/-1;display:flex;gap:8px;margin:6px 0}.sh-qty input{position:absolute;opacity:0}.sh-qty span{display:grid;place-items:center;min-width:52px;min-height:44px;padding:4px 14px;border:1.5px solid var(--s-line);border-radius:10px;font-weight:700;cursor:pointer}
.sh-qty input:checked+span{border-color:var(--s-accent);background:color-mix(in srgb,var(--s-accent) 16%,transparent)}
.sh-sheet-buy .sh-add{grid-column:1/-1}
.sh-perks{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:.8rem;color:var(--s-muted)}.sh-perks li:before{content:"✓ ";color:var(--s-accent);font-weight:700}
/* drawer */
.sh-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--s-card);color:var(--s-text);z-index:90;transform:translateX(100%);transition:transform .32s var(--s-ease);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
.sh-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:89;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-open .sh-drawer{transform:none}.cart-open .sh-scrim{opacity:1;pointer-events:auto}
.sh-drawer-h{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--s-line)}.sh-drawer-h h3{font:700 1.2rem var(--s-display)}.sh-drawer .sh-x{position:static}
.sh-lines{flex:1;overflow:auto;padding:10px 20px}
.sh-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--s-line)}
.sh-line img{width:56px;height:70px;object-fit:cover;border-radius:8px}.sh-line small{display:block;color:var(--s-muted);font-size:.78rem}
.sh-step{display:inline-flex;align-items:center;gap:10px;margin-top:6px;border:1px solid var(--s-line);border-radius:8px}.sh-step button{background:none;border:0;width:30px;height:28px;cursor:pointer;color:var(--s-text);font-size:1rem}.sh-step button:disabled{opacity:.3}
.sh-tot{padding:16px 20px 20px;border-top:1px solid var(--s-line);display:grid;gap:8px}
.sh-tot>div,.sh-sum>div{display:flex;justify-content:space-between}
.sh-grand{font-size:1.1rem;padding-top:8px;border-top:1px dashed var(--s-line)}
.sh-hint{font-size:.8rem;color:var(--s-muted)}.sh-hint.ok{color:#1f9d55}
/* checkout */
.sh-co{max-width:640px;padding:28px}
.sh-co-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 40px 22px 0;font-size:.75rem;color:var(--s-muted)}
.sh-co-steps li{border-top:3px solid var(--s-line);padding-top:6px}.sh-co-steps li.on{border-color:var(--s-accent);color:var(--s-text);font-weight:600}
.sh-co fieldset{border:0;display:grid;gap:14px}.sh-co legend{font:700 1.5rem var(--s-display);margin-bottom:10px}
.sh-methods{display:grid;gap:8px}.sh-methods label{position:relative;cursor:pointer}.sh-methods input{position:absolute;opacity:0}
.sh-methods span{display:block;border:1.5px solid var(--s-line);border-radius:12px;padding:12px 14px}.sh-methods small{display:block;color:var(--s-muted);font-size:.82rem}
.sh-methods input:checked+span{border-color:var(--s-accent);background:color-mix(in srgb,var(--s-accent) 10%,transparent)}
.sh-in{display:grid;gap:5px;font-size:.8rem;color:var(--s-muted)}
.sh-in input,.sh-in select{background:var(--s-soft);border:1px solid var(--s-line);border-radius:10px;padding:12px;font:1rem var(--s-font);color:var(--s-text)}
.sh-in input:focus,.sh-in select:focus{outline:2px solid var(--s-accent);outline-offset:1px}
.sh-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-zone{font-size:.9rem;min-height:1.4em}.sh-zone a{color:inherit}
.sh-co-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sh-link{background:none;border:0;color:var(--s-muted);cursor:pointer;font:500 .95rem var(--s-font)}
.sh-sum{display:grid;gap:8px;background:var(--s-soft);border-radius:12px;padding:14px}
.sh-pay{display:flex;gap:8px}.sh-pay span{border:1px solid var(--s-line);border-radius:8px;padding:8px 12px;font-size:.82rem;font-weight:600}
.sh-check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem}.sh-check input{margin-top:3px;accent-color:var(--s-accent)}.sh-check a{color:inherit}
.sh-ok-big{font:700 1.3rem var(--s-display)}
.sh-next{display:grid;gap:8px;padding-left:18px;font-size:.92rem}
/* rates + wholesale */
.sh-rates{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--s-card);border-radius:var(--s-r);overflow:hidden}
.sh-rates th,.sh-rates td{padding:12px 14px;border-bottom:1px solid var(--s-line);text-align:left}.sh-rates thead th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted)}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ws-card{position:relative;cursor:pointer}.ws-card input{position:absolute;opacity:0}
.ws-card span{display:grid;gap:4px;border:1.5px solid var(--s-line);border-radius:var(--s-r);padding:20px;background:var(--s-card);height:100%}
.ws-card b{font:700 1.4rem var(--s-display)}.ws-card small{color:var(--s-muted)}.ws-card em{font-style:normal;font-size:.85rem}
.ws-card input:checked+span{border-color:var(--s-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--s-accent) 30%,transparent)}
.ws-form{display:flex;gap:10px;margin:14px 0 8px;flex-wrap:wrap}.ws-form input{flex:1;min-width:180px;background:var(--s-soft);border:1px solid var(--s-line);border-radius:10px;padding:12px;font:1rem var(--s-font);color:var(--s-text)}.ws-form .sh-add{margin:0}
/* toast */
.sh-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--s-text);color:var(--s-bg);padding:12px 14px 12px 18px;border-radius:12px;z-index:95;display:flex;gap:14px;align-items:center;font-size:.9rem;transition:transform .3s var(--s-ease);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.sh-toast.on{transform:translate(-50%,0)}.sh-toast button{background:var(--s-accent);color:var(--s-ink);border:0;border-radius:8px;padding:7px 10px;font-weight:700;cursor:pointer}
@media (max-width:720px){.sh-size{border:0;padding:0;width:100%}.sh-size label{flex:1}.sh-size select{min-width:0;width:100%}.sh-sheet-grid{grid-template-columns:1fr}.sh-sheet-grid>img{max-height:320px}.sh-2,.ws-grid{grid-template-columns:1fr}.sh-grid{grid-template-columns:1fr 1fr;gap:10px}.sh-body{padding:10px}.sh-size-t{font-size:1.05rem}.sh-buy{flex-wrap:wrap}.sh-add{margin-left:0;width:100%}.sh-rates{font-size:.8rem}.sh-rates th,.sh-rates td{padding:9px 8px}}
@media (prefers-reduced-motion:reduce){.sh-dialog[open]{animation:none}.sh-drawer,.sh-toast{transition:none}}
.sh-rates-wrap{overflow-x:auto;border-radius:var(--s-r);border:1px solid var(--s-line);min-width:0}.sh-rates-wrap .sh-rates{min-width:560px;border-radius:0}
.ship2>*{min-width:0}

.sh-qty span small{font-weight:500;font-size:.78rem;color:var(--s-muted)}
.sh-ship-in{margin:4px 0 0;font-size:.78rem;color:var(--s-muted)}
.sh-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:20px;font:600 .66rem var(--s-font);letter-spacing:.04em;vertical-align:middle;background:color-mix(in srgb,var(--s-accent) 18%,transparent)}
.sh-body{min-width:0}.sh-meta{flex-wrap:wrap}.sh-meta span{white-space:nowrap}
.sh-buy{flex-wrap:wrap}.sh-buy small{white-space:nowrap}.sh-buy .sh-add{flex:1 0 100%;margin:6px 0 0}
.sh-size-t .sh-tag{display:block;width:fit-content;margin:4px 0 0}
.sh-tot .sh-wa-note{display:block}.sh-wa-note{border:1.5px solid #25d366;border-radius:12px;padding:12px 14px;margin:8px 0}.sh-wa-note p{margin:4px 0 0;font-size:.85rem;color:var(--s-muted)}
a.sh-wa{display:block;text-align:center;text-decoration:none;background:#25d366;color:#fff}
.sh-ref{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.9);color:#222;font:600 .68rem var(--s-font);padding:3px 8px;border-radius:20px}
.sh-fig{margin:0}.sh-fig img{width:100%;border-radius:var(--s-r);display:block}.sh-fig figcaption{font-size:.78rem;color:var(--s-muted);margin-top:6px}
.sh-sheet-grid .sh-fig img{max-height:640px;object-fit:cover}@media (max-width:720px){.sh-sheet-grid .sh-fig img{max-height:320px}}
.sh-err{color:#b3261e;font-size:.88rem;margin:6px 0}