/* =====================================================================
   XIRAIYA — Shop templates
   The page chrome uses the site theme; everything inside .sf-site, the
   product modal, the bag drawer and the assistant uses the current
   store's own tokens (--s-*), written by shop.js.
   ===================================================================== */

.shop-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.shop-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.shop-hero-copy { display: grid; gap: 16px; max-width: 700px; min-width: 0; flex: 1 1 300px; }
.shop-hero .lead b { color: var(--ink); }
.demo-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.demo-note .ic { flex: none; margin-top: 2px; }

/* ---------- store directory ---------- */
.shop-hero { position: relative; overflow: hidden; }
.shop-orbs { position: absolute; inset: 0; pointer-events: none; }
.shop-orbs i { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .35; animation: orbDrift 18s ease-in-out infinite alternate; }
.shop-orbs i:nth-child(1) { left: 58%; top: -140px; background: rgba(224,68,46,.45); }
.shop-orbs i:nth-child(2) { left: 78%; top: 120px; background: rgba(217,164,65,.4); animation-delay: -6s; }
.shop-orbs i:nth-child(3) { left: 30%; top: 260px; background: rgba(111,179,168,.35); animation-delay: -12s; }
@keyframes orbDrift { to { transform: translate(-60px, 40px) scale(1.15); } }
.shop-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.shop-stats li { display: grid; gap: 2px; }
.shop-stats b { font: 800 30px/1 var(--font-display); letter-spacing: -.02em; }
.shop-stats span { font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tpl { margin-top: clamp(24px, 3vw, 38px); }
.tpl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.tpl-label { font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tpl-label b { color: var(--ink); }
.tpl-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-groups button { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); transition: background .25s, color .25s, border-color .25s; }
.tpl-groups button:hover { border-color: var(--line-2); color: var(--ink); }
.tpl-groups button[aria-checked="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tpl-shuffle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px dashed var(--line-2); transition: border-color .25s, color .25s; }
.tpl-shuffle:hover { border-color: var(--red); color: var(--red); }
.tpl-shuffle .ic { transition: transform .5s var(--ease-out); }
.tpl-shuffle:hover .ic { transform: rotate(180deg); }
.tpl-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tpl-card { --mx: 50%; --my: 50%; position: relative; display: grid; grid-template-rows: auto 1fr auto; text-align: left; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate;
  transition: border-color .3s, box-shadow .4s, transform .5s var(--ease-out); animation: tplIn .6s var(--ease-out) both; animation-delay: calc(var(--n) * 40ms); }
@keyframes tplIn { from { opacity: 0; transform: translateY(14px); } }
.tpl-card[hidden] { display: none; }
.tpl-card::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--a) 22%, transparent), transparent 60%); }
.tpl-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 55%, var(--line)); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--a) 70%, #000); }
.tpl-card:hover::before { opacity: 1; }
.tpl-card[aria-checked="true"] { border-color: var(--a); box-shadow: 0 0 0 2px var(--a), 0 24px 44px -28px var(--a); }
.tpl-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--b); }
.tpl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .5s; }
.tpl-card:hover .tpl-img img { transform: scale(1.07); }
.tpl-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45)); }
.tpl-no { position: absolute; left: 10px; bottom: 8px; z-index: 1; font: 700 11px/1 var(--font-mono); letter-spacing: .1em; color: #fff; }
.tpl-txt { display: grid; gap: 3px; padding: 12px 14px 4px; min-width: 0; }
.tpl-txt b { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-txt small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px 12px; }
.tpl-sw { display: flex; padding: 3px; gap: 2px; border-radius: 20px; background: rgba(var(--fx), .05); }
.tpl-sw i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.tpl-cur { font: 500 11px/1 var(--font-mono); color: var(--ink-3); }
.tpl-go { position: absolute; right: 10px; top: 10px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--a); color: #fff; font-size: 15px; transform: scale(.4) rotate(-45deg); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s; }
.tpl-card:hover .tpl-go, .tpl-card[aria-checked="true"] .tpl-go { transform: none; opacity: 1; }

/* ---------- storefront frame ---------- */
.store { padding-bottom: clamp(56px, 7vw, 100px); }
.sf { position: relative; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow); overflow: clip; }
.sf-loader { position: absolute; left: 0; right: 0; top: 42px; z-index: 30; height: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.sf-loader i { display: block; width: 40%; height: 100%; background: var(--red); animation: sfLoad 1s ease-in-out infinite; }
.sf.is-loading .sf-loader { opacity: 1; }
.sf.is-loading .sf-site { opacity: .55; transition: opacity .2s; }
@keyframes sfLoad { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.sf-chrome { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; color: var(--ink-3); }
.sf-dots { display: flex; gap: 6px; }
.sf-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.sf-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 420px; margin: 0 auto; height: 26px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.sf-url .ic { font-size: 12px; color: var(--ink-3); }
.sf-tag { min-width: 60px; text-align: right; white-space: nowrap; }

.sf-site { --s-pad: clamp(16px, 3.4vw, 44px); background: var(--s-bg); color: var(--s-ink); font-family: var(--s-fb); font-size: 15px; line-height: 1.55; }
.sf-site.is-in > * { animation: sfIn .5s var(--ease-out) both; }
@keyframes sfIn { from { opacity: 0; transform: translateY(8px); } }
.sf-site button, .sf-site input, .sf-site select { font-family: inherit; color: inherit; }
.sf-site .ic { font-size: 1.05em; }
.s-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.s-h2 { font-family: var(--s-fh); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.01em; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: clamp(44px, 1vw + 36px, 48px); padding: 0 clamp(16px, 1.4vw + 10px, 22px); border-radius: var(--s-rs); background: var(--s-accent); color: var(--s-on); font-weight: 600; font-size: 14.5px; border: 1px solid var(--s-accent); transition: filter .2s, transform .2s; }
.s-btn:hover { filter: brightness(1.07); }
.s-btn:active { transform: translateY(1px); }
.s-btn-ghost { background: transparent; color: var(--s-ink); border-color: var(--s-line); }
.s-btn-ghost:hover { border-color: var(--s-ink); filter: none; }

/* promo marquee */
.s-promo { overflow: hidden; background: var(--s-ink); color: var(--s-bg); font-size: 12.5px; font-weight: 500; }
.s-promo-track { display: flex; width: max-content; animation: sfMarq 38s linear infinite; }
.s-promo-track span { padding: 9px 28px; white-space: nowrap; }
.s-promo-track span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 28px 2px -30px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; }
@keyframes sfMarq { to { transform: translateX(-50%); } }
.s-promo:hover .s-promo-track { animation-play-state: paused; }

/* store nav */
/* Store navs stick under the site header AND the store-section bar (.shop-nav),
   which is itself sticky. --shopnav-h is measured by shop.js. */
body[data-page="shop"] { --sf-top: calc(var(--header-h) + var(--shopnav-h, 64px)); }
body[data-page="shop"]:has(.site-header.is-hidden) { --sf-top: var(--shopnav-h, 64px); }
.s-nav { position: sticky; top: var(--sf-top, var(--header-h)); z-index: 20; display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 0 var(--s-pad); background: var(--s-bg); border-bottom: 1px solid var(--s-line); transition: top .6s var(--ease-out); }
.s-word { font-family: var(--s-fh); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.s-word i { font-style: normal; color: var(--s-accent); }
[data-store="stride"] .s-word, [data-store="stride"] .s-word i { color: var(--s-ink); letter-spacing: .02em; }
.s-links { display: flex; gap: 22px; flex: 1; min-width: 0; overflow: hidden; }
.s-links button { font-size: 14px; color: var(--s-muted); white-space: nowrap; transition: color .2s; }
.s-links button:hover { color: var(--s-ink); }
.s-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.s-search { display: flex; align-items: center; gap: 8px; width: 220px; height: 40px; padding: 0 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-muted); }
.s-search:focus-within { border-color: var(--s-ink); }
.s-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 14px; color: var(--s-ink); }
.s-search input::placeholder { color: var(--s-muted); }
.s-ic { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--s-rs); font-size: 19px; transition: background .2s; }
.s-ic:hover { background: color-mix(in srgb, var(--s-ink) 7%, transparent); }
.s-ic[aria-pressed="true"] { color: var(--s-accent); }
.s-ic[aria-pressed="true"] .ic { fill: currentColor; }
.s-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font: 700 10.5px/1 var(--font-mono); background: var(--s-accent); color: var(--s-on); }
.s-badge[hidden] { display: none; }
.s-badge.bump { animation: sfBump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes sfBump { 40% { transform: scale(1.45); } }

/* hero layouts */
.sh { position: relative; }
.sh-copy { display: grid; gap: 16px; align-content: center; }
.sh-title { font-family: var(--s-fh); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.sh-sub { max-width: 52ch; font-size: 16px; color: var(--s-muted); }
.sh-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sh-media { position: relative; overflow: hidden; background: color-mix(in srgb, var(--s-ink) 6%, var(--s-bg)); }
.sh-media img { width: 100%; height: 100%; object-fit: cover; }
.sh-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 56px) var(--s-pad); }
.sh-split .sh-media { border-radius: var(--s-r); aspect-ratio: 5 / 4; }
.sh-note { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--s-rs); background: var(--s-surface); color: var(--s-ink); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.sh-note b { font-family: var(--s-fh); font-size: 22px; line-height: 1; }
.sh-note span { font-size: 12.5px; color: var(--s-muted); }
.sh-overlay { min-height: clamp(420px, 44vw, 600px); display: grid; align-items: end; color: #fff; }
.sh-overlay .sh-media { position: absolute; inset: 0; }
.sh-overlay .sh-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.62)); }
.sh-overlay .sh-copy { position: relative; padding: clamp(28px, 4vw, 56px) var(--s-pad); max-width: 760px; }
.sh-overlay .s-eyebrow, .sh-overlay .sh-sub { color: rgba(255,255,255,.86); }
.sh-overlay .s-btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.sh-overlay .s-btn-ghost:hover { border-color: #fff; }
.sh-editorial { padding: clamp(32px, 5vw, 72px) var(--s-pad) 0; }
.sh-editorial .sh-copy { justify-items: center; text-align: center; max-width: 820px; margin: 0 auto clamp(24px, 3vw, 40px); }
.sh-editorial .sh-sub { margin: 0 auto; }
.sh-editorial .sh-cta { justify-content: center; }
.sh-editorial .sh-media { aspect-ratio: 21 / 9; border-radius: var(--s-r); }
.sh-editorial figcaption { position: absolute; right: 14px; bottom: 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.sh-collage { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 56px) var(--s-pad); }
.sh-mosaic { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 6 / 5; }
.sh-mosaic .sh-media { border-radius: var(--s-r); }
.sh-mosaic .m1 { grid-row: span 2; }

/* shop section */
.s-shop { padding: clamp(36px, 5vw, 64px) var(--s-pad); scroll-margin-top: 140px; }
.s-shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.s-shop-head .s-eyebrow { margin-bottom: 6px; }
.s-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.s-range { display: grid; gap: 4px; width: 170px; font-size: 12.5px; color: var(--s-muted); }
.s-range b { color: var(--s-ink); font-weight: 600; }
.sf-site .range { accent-color: var(--s-accent); background: transparent; }
.s-sort select { height: 40px; padding: 0 34px 0 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); background: var(--s-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.s-cats { display: flex; gap: 8px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.s-cats::-webkit-scrollbar { display: none; }
.s-cats button { flex: none; height: 36px; padding: 0 16px; border-radius: calc(var(--s-rs) + 12px); font-size: 13.5px; font-weight: 500; border: 1px solid var(--s-line); transition: background .2s, color .2s, border-color .2s; }
.s-cats button:hover { border-color: var(--s-ink); }
.s-cats button[aria-checked="true"] { background: var(--s-ink); color: var(--s-bg); border-color: var(--s-ink); }
.s-count { margin: 14px 0 16px; font-size: 13px; color: var(--s-muted); }
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(14px, 1.8vw, 24px) clamp(12px, 1.4vw, 18px); }
.s-empty { padding: 40px 20px; text-align: center; color: var(--s-muted); border: 1px dashed var(--s-line); border-radius: var(--s-r); }

/* product card */
.pc { display: flex; flex-direction: column; min-width: 0; animation: sfIn .5s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.pc-media { position: relative; aspect-ratio: var(--s-ratio); border-radius: var(--s-r); overflow: hidden; background: color-mix(in srgb, var(--s-ink) 5%, var(--s-surface)); }
.pc-open { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pc:hover .pc-open img { transform: scale(1.05); }
.p-badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.p-badge { padding: 5px 8px; border-radius: var(--s-rs); font-size: 11px; font-weight: 600; line-height: 1; background: var(--s-surface); color: var(--s-ink); }
.p-badge.sale { background: var(--s-accent); color: var(--s-on); }
.p-wish { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #1a1a1a; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .2s, color .2s; }
.p-wish:hover { transform: scale(1.08); }
.p-wish.is-on { color: #d23c3c; }
.p-wish.is-on .ic { fill: currentColor; }
.p-quick { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--s-rs); font-size: 13.5px; font-weight: 600; background: var(--s-surface); color: var(--s-ink); box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease-out), background .2s, color .2s; }
.pc:hover .p-quick, .p-quick:focus-visible { opacity: 1; transform: none; }
.p-quick:hover { background: var(--s-ink); color: var(--s-bg); }
.pc-media.no-img::before, .no-img::before { content: attr(data-alt); }
.pc-body { display: grid; gap: 5px; padding: 12px 2px 0; }
.pc-name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.pc-name button { text-align: left; }
.pc-name button:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-price { font-weight: 700; font-size: 15px; white-space: nowrap; }
.pc-price s { margin-left: 4px; font-weight: 400; font-size: 13px; color: var(--s-muted); }
.p-sw { display: flex; gap: 4px; }
.p-sw i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 22%, transparent); }
.pc-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--s-muted); }
.pc-low { color: var(--s-accent); font-weight: 600; }
[data-store="stride"] .pc-low { color: var(--s-ink); background: var(--s-accent); padding: 1px 5px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.stars .ic { color: #e2a33a; font-size: 13px; }
.stars b { font-weight: 600; }
.stars small { color: var(--s-muted, var(--ink-3)); }
.no-img { position: relative; }
.no-img::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--s-ink, #888) 5%, transparent) 10px 11px); }

/* lookbook */
.s-look { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--s-surface); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); scroll-margin-top: 140px; }
.lk-media { position: relative; height: clamp(380px, 42vw, 580px); overflow: hidden; }
.lk-media img { position: absolute; inset: 0; }
.lk-media img { width: 100%; height: 100%; object-fit: cover; }
.lk-copy { display: grid; gap: 14px; align-content: center; padding: clamp(28px, 4vw, 60px) var(--s-pad); }
.lk-copy p { max-width: 46ch; color: var(--s-muted); }
.lk-picks { display: grid; gap: 8px; margin-top: 6px; }
.lk-picks > small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.lk-pick { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 6px; border-radius: var(--s-rs); text-align: left; border: 1px solid var(--s-line); transition: border-color .2s; }
.lk-pick:hover { border-color: var(--s-ink); }
.lk-thumb, .pair-img, .ci-img, .ai-thumb, .inv-img { display: block; overflow: hidden; border-radius: var(--s-rs, 4px); background: color-mix(in srgb, var(--s-ink, #888) 6%, transparent); }
.lk-thumb { width: 52px; height: 52px; }
.lk-thumb img, .pair-img img, .ci-img img, .ai-thumb img, .inv-img img { width: 100%; height: 100%; object-fit: cover; }
.lk-pick b { display: block; font-size: 14px; font-weight: 500; }
.lk-pick small { font-size: 13px; color: var(--s-muted); }

/* reviews + policies + footer */
.s-reviews { padding: clamp(36px, 5vw, 64px) var(--s-pad); }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.rv { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.rv-stars { display: flex; gap: 2px; color: #e2a33a; font-size: 14px; }
.rv blockquote { margin: 0; font-family: var(--s-fh); font-size: 18px; line-height: 1.4; }
.rv figcaption { font-size: 13px; color: var(--s-muted); }
.rv figcaption b { color: var(--s-ink); font-weight: 600; }
.s-pol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--s-line); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.s-pol > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 22px var(--s-pad); background: var(--s-bg); }
.pol-ic { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; background: color-mix(in srgb, var(--s-accent) 14%, transparent); color: var(--s-ink); }
.s-pol b { font-size: 14.5px; font-weight: 600; }
.s-pol small { font-size: 13px; color: var(--s-muted); }
.s-foot { padding: clamp(32px, 4vw, 52px) var(--s-pad) 24px; }
.sf-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 28px; }
.sf-cols > div { display: grid; gap: 8px; align-content: start; font-size: 13.5px; }
.sf-cols > div > b, .s-news > b { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.sf-cols > div > button, .sf-cols > div > span { text-align: left; color: var(--s-ink); }
.sf-cols > div > button:hover { text-decoration: underline; }
.sf-cols p { color: var(--s-muted); max-width: 30ch; }
.s-news { display: grid; gap: 10px; align-content: start; }
.s-news div { display: flex; gap: 8px; }
.s-news input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); background: var(--s-surface); outline: none; font-size: 14px; }
.s-news input:focus { border-color: var(--s-ink); }
.s-news .s-btn { height: 44px; padding: 0 18px; color: var(--s-on); }
.s-credit { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--s-line); font-size: 12px; line-height: 1.6; color: var(--s-muted); }

/* ---------- product modal (store themed) ---------- */
.pm-box { width: min(100%, 1020px); background: var(--s-bg) !important; color: var(--s-ink); font-family: var(--s-fb); border-color: var(--s-line) !important; }
.pm-box .modal-close { background: var(--s-surface); color: var(--s-ink); z-index: 3; }
.pm-grid { display: grid; grid-template-columns: 1.05fr 1fr; }
.pm-media { position: relative; min-height: 460px; overflow: hidden; background: color-mix(in srgb, var(--s-ink) 5%, var(--s-surface)); cursor: zoom-in; }
.pm-zoom { position: absolute; inset: 0; }
.pm-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-out); }
.pm-media.zooming .pm-zoom img { transform: scale(1.9); }
.pm-info { display: grid; gap: 14px; align-content: start; padding: 34px 30px 28px; max-height: min(86vh, 760px); overflow-y: auto; }
.pm-cat { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
#pm-name { font-family: var(--s-fh); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }
.pm-rating { display: flex; align-items: center; gap: 12px; }
.pm-stock { font-size: 12.5px; color: var(--s-muted); }
.pm-stock.low { color: var(--s-accent); font-weight: 600; }
[data-store="stride"] .pm-stock.low { color: var(--s-ink); }
.pm-price { display: flex; align-items: baseline; gap: 10px; font-size: 24px; font-weight: 700; }
.pm-price s { font-size: 15px; font-weight: 400; color: var(--s-muted); }
.pm-price em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: var(--s-rs); background: var(--s-accent); color: var(--s-on); }
.pm-desc { color: var(--s-muted); }
.pm-opts { display: grid; gap: 14px; }
.pm-opts.need .opt-row:last-child { animation: shake .4s; }
.pm-opts.need .opt-size { border-color: var(--s-accent); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.opt-row { display: grid; gap: 8px; }
.opt-row > span { font-size: 13px; color: var(--s-muted); }
.opt-row > span b { color: var(--s-ink); font-weight: 600; }
.opt-row div { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-color { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 20%, transparent); transition: box-shadow .2s; }
.opt-color[aria-checked="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 20%, transparent), 0 0 0 2px var(--s-bg), 0 0 0 3.5px var(--s-ink); }
.opt-size { min-width: 48px; height: 42px; padding: 0 12px; border-radius: var(--s-rs); font-size: 14px; font-weight: 500; border: 1px solid var(--s-line); transition: border-color .2s, background .2s; }
.opt-size:hover { border-color: var(--s-ink); }
.opt-size[aria-checked="true"] { background: var(--s-ink); color: var(--s-bg); border-color: var(--s-ink); }
.pm-buy { display: flex; gap: 10px; align-items: center; }
.pm-box .pm-add { flex: 1; height: 50px; border-radius: var(--s-rs); background: var(--s-accent); color: var(--s-on); box-shadow: none; }
.pm-box .pm-add:hover { filter: brightness(1.07); transform: none; }
.pm-box .pm-wish { width: 50px; height: 50px; border-radius: var(--s-rs); border-color: var(--s-line); color: var(--s-ink); background: transparent; }
.pm-box .pm-wish.is-on { color: #d23c3c; }
.pm-box .pm-wish.is-on .ic { fill: currentColor; }
.qty { display: inline-flex; align-items: center; height: 50px; border-radius: var(--s-rs, 4px); border: 1px solid var(--s-line, var(--line-2)); }
.qty button { width: 40px; height: 100%; display: grid; place-items: center; color: var(--s-muted, var(--ink-2)); }
.qty button:hover { color: var(--s-ink, var(--ink)); }
.qty span { min-width: 24px; text-align: center; font-weight: 600; font-size: 15px; }
.pm-details { display: grid; gap: 6px; font-size: 14px; }
.pm-details li, .pm-perks li { display: flex; gap: 10px; align-items: flex-start; }
.pm-details .ic { flex: none; margin-top: 4px; font-size: 13px; color: var(--s-accent); }
[data-store="stride"] .pm-details .ic { color: var(--s-ink); }
.pm-perks { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--s-line); font-size: 13.5px; color: var(--s-muted); }
.pm-perks .ic { flex: none; margin-top: 3px; }
.pm-pair { display: grid; gap: 8px; }
.pm-pair > small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.pm-pair > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pair { display: grid; gap: 6px; text-align: left; }
.pair-img { aspect-ratio: 1; }
.pair b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.pair small { font-size: 12px; color: var(--s-muted); }
.pair:hover b { text-decoration: underline; }

/* ---------- bag drawer (store themed) ---------- */
.drawer { position: fixed; inset: 0; z-index: 140; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .35s; }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--s-bg); color: var(--s-ink); font-family: var(--s-fb); border-left: 1px solid var(--s-line); transform: translateX(100%); transition: transform .5s var(--ease-out); }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--s-line); }
.drawer-h h2 { display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 600; }
.drawer-h h2 small { font-size: 13px; font-weight: 400; color: var(--s-muted); }
.drawer-h .modal-close { position: static; background: transparent; color: var(--s-ink); }
.ship-bar { padding: 14px 20px; border-bottom: 1px solid var(--s-line); font-size: 13px; color: var(--s-muted); }
.ship-bar b { color: var(--s-ink); }
.ship-track { height: 4px; margin-top: 8px; border-radius: 2px; background: color-mix(in srgb, var(--s-ink) 10%, transparent); overflow: hidden; }
.ship-track i { display: block; height: 100%; width: 0; background: var(--s-accent); transition: width .6s var(--ease-out); }
.cart-items { flex: 1; overflow-y: auto; padding: 4px 20px; }
.ci { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
.ci-img { width: 76px; height: 88px; }
.ci b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ci small { display: block; font-size: 12.5px; color: var(--s-muted); margin: 3px 0 8px; }
.ci .qty { height: 34px; }
.ci .qty button { width: 32px; }
.ci .qty span { font-size: 13px; }
.ci-right { display: grid; justify-items: end; gap: 12px; align-self: stretch; align-content: space-between; }
.ci-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.ci-rm { color: var(--s-muted); font-size: 16px; }
.ci-rm:hover { color: var(--s-ink); }
.cart-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--s-muted); }
.cart-empty .ic { font-size: 40px; }
.cart-empty .btn { color: var(--s-ink); border-color: var(--s-line); }
.drawer.is-empty .cart-empty { display: flex; }
.drawer.is-empty .cart-foot, .drawer.is-empty .cart-items, .drawer.is-empty .ship-bar { display: none; }
.cart-foot { display: grid; gap: 14px; padding: 18px 20px 22px; border-top: 1px solid var(--s-line); background: var(--s-surface); }
.promo { display: flex; gap: 8px; }
.promo .input { height: 42px; font-size: 14px; text-transform: uppercase; background: var(--s-bg); color: var(--s-ink); border-color: var(--s-line); border-radius: var(--s-rs); }
.promo .input::placeholder { text-transform: none; color: var(--s-muted); }
.promo .btn { color: var(--s-ink); border-color: var(--s-line); border-radius: var(--s-rs); }
.totals { display: grid; gap: 8px; margin: 0; font-size: 14px; color: var(--s-muted); }
.totals div { display: flex; justify-content: space-between; }
.totals dd { margin: 0; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.t-disc { color: #3f8f4f !important; }
.t-total { padding-top: 10px; border-top: 1px solid var(--s-line); font-size: 16px; font-weight: 700; color: var(--s-ink); }
.t-total dd { font-size: 18px; }
.cart-foot .checkout-open { background: var(--s-accent); color: var(--s-on); border-radius: var(--s-rs); box-shadow: none; }
.cart-foot .checkout-open:hover { filter: brightness(1.07); transform: none; }

/* ---------- checkout ---------- */
.co-box { width: min(100%, 720px); }
.co-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 26px 70px 18px 28px; border-bottom: 1px solid var(--line); }
.co-steps { display: flex; gap: 6px; counter-reset: co; }
.co-steps li { counter-increment: co; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 3px; font-size: 13px; color: var(--ink-3); background: rgba(var(--fx),.03); }
.co-steps li::before { content: counter(co); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font-mono); background: rgba(var(--fx),.08); }
.co-steps li.is-on { color: var(--ink); background: rgba(224,68,46,.12); }
.co-steps li.is-on::before, .co-steps li.is-done::before { background: var(--red); color: #fff; }
.co-steps li.is-done { color: var(--ink-2); }
.co-body { padding: 24px 28px 28px; }
.co-panel { display: grid; gap: 18px; animation: stepIn .45s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-grid .full { grid-column: 1 / -1; }
.co-err { color: var(--red-2); font-size: 13.5px; }
.co-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.co-actions.center { justify-content: center; }
.co-total { font: 800 20px/1 var(--font-display); }
.co-total small { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-methods button { display: inline-flex; gap: 8px; align-items: center; height: 44px; padding: 0 16px; border-radius: 6px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--line-2); transition: all .3s; }
.pay-methods button[aria-checked="true"] { border-color: var(--red); background: rgba(224,68,46,.1); color: var(--ink); }
.pm-panel { display: grid; gap: 14px; padding: 18px; border-radius: 6px; background: rgba(var(--fx),.025); border: 1px solid var(--line); animation: stepIn .35s var(--ease-out); }
.cr-row { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.cr-qr { position: relative; padding: 8px; border-radius: 6px; background: #fff; aspect-ratio: 1; }
.cr-qr svg { width: 100%; height: 100%; }
.cr-qr.is-paid::after { content: 'PAID'; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; font: 900 22px/1 var(--font-display); color: var(--surface); background: rgba(169,196,106,.93); animation: stepIn .4s; }
.cr-info { display: grid; gap: 10px; min-width: 0; }
.cr-coins { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-coins button { display: inline-flex; gap: 6px; align-items: center; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); }
.cr-coins button[aria-checked="true"] { border-color: var(--gold); color: var(--gold); background: rgba(217,164,65,.08); }
.cr-amt { font: 800 22px/1.1 var(--font-display); }
.cr-amt small { display: block; font: 500 11px/1 var(--font-mono); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.cr-addr { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.cr-addr code { flex: 1; min-width: 0; font: 400 11.5px/1.4 var(--font-mono); color: var(--ink-2); word-break: break-all; }
.cr-addr button { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--ink-2); }
.cr-addr button:hover { background: rgba(var(--fx),.07); color: var(--ink); }
.cr-status { display: flex; gap: 10px; align-items: center; font: 500 12.5px/1.3 var(--font-mono); color: var(--gold); }
.cr-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ping 1.2s infinite; }
.cr-status.ok { color: var(--lime); }
.cr-status.ok i { animation: none; }
.mfs { display: grid; gap: 12px; font-size: 14px; color: var(--ink-2); }
.mfs ol { display: grid; gap: 6px; padding-left: 18px; list-style: decimal; }
.mfs b { color: var(--ink); font-family: var(--font-mono); }
.mfs-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 18px/1 var(--font-display); color: #fff; }
.mfs-logo span { width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center; font-size: 18px; background: var(--mc, #e2136e); }
.card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-form .full { grid-column: 1 / -1; }
.card-prev { grid-column: 1 / -1; position: relative; height: 150px; border-radius: 6px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(135deg, #e0442e, #9483c2 70%, #6fb3a8); overflow: hidden; }
.card-prev::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(var(--fx),.12); }
.card-prev b { font: 500 17px/1 var(--font-mono); letter-spacing: .12em; }
.card-prev small { font: 500 11px/1 var(--font-mono); opacity: .85; text-transform: uppercase; }
.card-prev .row { display: flex; justify-content: space-between; }
.co-done { justify-items: center; text-align: center; position: relative; padding: 10px 0; }
.done-ic { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: var(--surface); background: var(--lime); box-shadow: 0 0 0 10px rgba(169,196,106,.12), 0 0 60px rgba(169,196,106,.4); animation: donePop .7s cubic-bezier(.34,1.56,.64,1); }
.done-ic .ic { stroke-width: 3; }
@keyframes donePop { from { transform: scale(0) rotate(-40deg); } }
.done-id { font: 500 14px/1.5 var(--font-mono); color: var(--ink-2); }
.done-auto { display: grid; gap: 8px; width: 100%; max-width: 380px; text-align: left; }
.done-auto li { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 6px; background: rgba(var(--fx),.03); border: 1px solid var(--line); font-size: 13.5px; animation: stepIn .5s var(--ease-out) both; }
.done-auto li:nth-child(2) { animation-delay: .25s; } .done-auto li:nth-child(3) { animation-delay: .5s; }
.done-auto .ic { color: var(--lime); }
.done-burst { position: absolute; left: 50%; top: 48px; width: 0; height: 0; pointer-events: none; }
.done-burst i { position: absolute; width: 8px; height: 14px; border-radius: 2px; animation: confetti 1.4s var(--ease-out) forwards; }
@keyframes confetti { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* ---------- shopping assistant (store themed) ---------- */
.ai-shop { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--s-fb); }
.ai-shop[hidden] { display: none; }
.ai-launch { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 16px; border-radius: 25px; font-weight: 600; font-size: 14px; color: var(--s-bg); background: var(--s-ink); box-shadow: 0 12px 30px -12px rgba(0,0,0,.55); transition: transform .3s var(--ease-out); }
.ai-launch:hover { transform: translateY(-2px); }
.ai-launch .ic { font-size: 20px; }
.ai-box { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--s-bg); color: var(--s-ink); border: 1px solid var(--s-line); box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); animation: popIn .35s var(--ease-out); transform-origin: bottom right; }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.ai-head { display: flex; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--s-line); background: var(--s-surface); }
.ai-ava { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--s-on); background: var(--s-accent); }
.ai-head b { display: block; font-size: 15px; }
.ai-head small { font-size: 12px; color: var(--s-muted); }
.ai-x { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--s-muted); }
.ai-x:hover { background: color-mix(in srgb, var(--s-ink) 8%, transparent); color: var(--s-ink); }
.ai-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ai-m { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: stepIn .3s var(--ease-out); }
.ai-m.bot { align-self: flex-start; background: var(--s-surface); border: 1px solid var(--s-line); border-bottom-left-radius: 4px; }
.ai-m.me { align-self: flex-end; background: var(--s-ink); color: var(--s-bg); border-bottom-right-radius: 4px; }
.ai-picks { display: grid; gap: 8px; margin-top: 10px; }
.ai-pick { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: var(--s-bg); border: 1px solid var(--s-line); }
.ai-thumb { width: 46px; height: 46px; }
.ai-pick b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.ai-pick small { font-size: 12px; color: var(--s-muted); }
.ai-pick button { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; background: var(--s-ink); color: var(--s-bg); }
.ai-pick button:disabled { opacity: .55; }
.ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--s-surface); border: 1px solid var(--s-line); }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--s-muted); animation: dots 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { transform: translateY(-4px); opacity: .4; } }
.ai-sugg { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-top: 1px solid var(--s-line); scrollbar-width: none; }
.ai-sugg::-webkit-scrollbar { display: none; }
.ai-sugg button { flex: none; padding: 7px 12px; border-radius: 16px; font-size: 12.5px; border: 1px solid var(--s-line); color: var(--s-ink); }
.ai-sugg button:hover { border-color: var(--s-ink); }
.ai-input { display: flex; gap: 8px; padding: 10px 12px 12px; }
.ai-input input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); outline: none; font-size: 14px; }
.ai-input input::placeholder { color: var(--s-muted); }
.ai-input input:focus { border-color: var(--s-ink); }
.ai-input button { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--s-on); background: var(--s-accent); }
.toasts { bottom: 86px; }

/* ---------- admin ---------- */
.admin { padding-bottom: clamp(60px, 8vw, 110px); animation: stepIn .5s var(--ease-out); }
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.adm-kpi { padding: 20px; display: grid; gap: 8px; }
.adm-kpi small { display: flex; gap: 8px; align-items: center; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.adm-kpi small .ic { font-size: 16px; color: var(--red); }
.adm-kpi b { font: 800 30px/1 var(--font-display); letter-spacing: -.02em; }
.adm-kpi em { font-style: normal; font: 500 12px/1 var(--font-mono); color: var(--lime); }
.adm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; }
.adm-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.adm-chart { grid-column: span 2; }
.adm-orders { grid-column: span 2; }
/* five cards on a three-column grid: the activity feed takes the last row whole */
.adm-feed { grid-column: 1 / -1; }
.adm-feed .feed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-content: start; }
.adm-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.adm-h .chip { height: 26px; font-size: 11px; }
.chart { width: 100%; height: 220px; overflow: visible; }
.chart .grid-l { stroke: rgba(var(--fx),.06); }
.chart .area { fill: url(#chartGrad); }
.chart .line { fill: none; stroke: var(--red); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: drawLine 2s var(--ease-out) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.chart-x { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font-mono); color: var(--ink-3); }
.autos { display: grid; gap: 8px; }
.auto { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(var(--fx),.025); border: 1px solid var(--line); cursor: pointer; }
.auto > span:first-child { width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; font-size: 17px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.auto b { display: block; font-size: 13.5px; }
.auto small { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--ink-3); }
.auto.off { opacity: .55; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.tbl th { text-align: left; padding: 10px 12px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tbl td:first-child { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.tbl tr.is-new td { animation: rowFlash 2.4s ease; }
@keyframes rowFlash { 0%, 30% { background: rgba(169,196,106,.1); } }
.st { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border-radius: 7px; font: 600 11px/1 var(--font-mono); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.paid { color: var(--lime); background: rgba(169,196,106,.1); }
.st.pack { color: var(--gold); background: rgba(217,164,65,.1); }
.st.ship { color: var(--cyan); background: rgba(111,179,168,.1); }
.st.cod { color: var(--violet); background: rgba(148,131,194,.12); }
.inv { display: grid; gap: 12px; }
.inv li { font-size: 13px; }
.inv li b { font-weight: 600; }
.inv li em { font-style: normal; font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
.inv li.low em { color: var(--gold); }
.inv-bar { height: 6px; border-radius: 3px; background: rgba(var(--fx),.07); overflow: hidden; }
.inv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); transition: width .6s var(--ease-out); }
.inv li.low .inv-bar i { background: var(--gold); }
.feed { display: grid; gap: 8px; max-height: 360px; overflow: hidden; }
.feed li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 4px; background: rgba(var(--fx),.025); font-size: 12.8px; animation: stepIn .4s var(--ease-out); }
.feed li > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.feed small { display: block; font: 400 10.5px/1.2 var(--font-mono); color: var(--ink-3); margin-top: 2px; }

.shop-cta { border-top: 1px solid var(--line); }
.adm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.adm-top small { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.adm-store { font: 700 26px/1 var(--font-display); }
.adm-store i { font-style: normal; color: var(--red); }
.adm-date, .adm-sub { font-size: 13px; color: var(--ink-3); }
.inv li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.inv-img { width: 40px; height: 40px; border-radius: 6px; }
.inv-t { display: grid; gap: 6px; min-width: 0; }
.inv-t > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.inv-t > div:first-child em { white-space: nowrap; }
.inv-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.adm-chart .chart { flex: 1; min-height: 220px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .s-links { display: none; }
  .adm-grid { grid-template-columns: 1fr 1fr; }
  .adm-chart, .adm-orders { grid-column: 1 / -1; }
  .adm-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sh-split, .sh-collage { grid-template-columns: 1fr; }
  .sh-split .sh-media { aspect-ratio: 4 / 3; order: -1; }
  .sh-mosaic { aspect-ratio: 4 / 3; }
  .sh-editorial .sh-media { aspect-ratio: 16 / 10; }
  .s-look { grid-template-columns: 1fr; }
  .lk-media { height: auto; aspect-ratio: 4 / 3; }
  .rv-grid { grid-template-columns: 1fr; }
  .s-pol { grid-template-columns: 1fr; }
  .sf-cols { grid-template-columns: 1fr 1fr; }
  .sf-cols > div:first-child, .s-news { grid-column: 1 / -1; }
  .pm-grid { grid-template-columns: 1fr; }
  .pm-media { min-height: 0; aspect-ratio: 4 / 3.4; cursor: default; }
  .pm-info { max-height: none; overflow: visible; padding: 24px 20px; }
  .adm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tpl-rail { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tpl-rail::-webkit-scrollbar { display: none; }
  .tpl-card { flex: 0 0 152px; scroll-snap-align: start; }
  .tpl-hint { display: none; }
  .sf { border-radius: 10px; margin: 0 -6px; }
  .sf-tag { display: none; }
  .sf-chrome { height: 38px; }
  .sf-site { font-size: 14.5px; }
  .s-nav { gap: 10px; min-height: 56px; }
  .s-word { font-size: 20px; }
  .s-search { width: 42px; padding: 0; justify-content: center; border-color: transparent; background: none; }
  .s-search input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .s-search .s-kbd { display: none; }
  .s-search:focus-within { position: absolute; left: 12px; right: 12px; width: auto; padding: 0 12px; background: var(--s-surface); border-color: var(--s-ink); z-index: 2; }
  .s-search:focus-within input { position: static; width: auto; height: 100%; opacity: 1; }
  .sh-title { font-size: clamp(30px, 8.6vw, 42px); }
  .sh-sub { font-size: 15px; }
  .sh-overlay { min-height: 460px; }
  .sh-cta .s-btn { flex: 1 1 auto; }
  .s-shop-head { align-items: stretch; }
  .s-tools { width: 100%; justify-content: space-between; }
  .s-range { width: 48%; }
  .s-grid { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .pc-name { font-size: 13.5px; }
  .pc-price { font-size: 14px; }
  .p-sw, .stars small { display: none; }
  .p-quick { opacity: 1; transform: none; width: 36px; height: 36px; left: auto; right: 6px; bottom: 6px; border-radius: 50%; font-size: 16px; }
  .p-quick span { display: none; }
  .p-wish { width: 32px; height: 32px; right: 6px; top: 6px; }
  .p-badges { left: 6px; top: 6px; }
  .p-badge { font-size: 10.5px; padding: 4px 6px; }
  .rv { padding: 18px; }
  .rv blockquote { font-size: 16px; }
  .sf-cols { grid-template-columns: 1fr; gap: 20px; }
  .pm-pair > div { grid-template-columns: repeat(3, 1fr); }
  .pm-buy { flex-wrap: wrap; }
  .pm-buy .pm-add { order: 3; flex: 1 1 100%; }
  .ci { grid-template-columns: 64px 1fr auto; }
  .ci-img { width: 64px; height: 76px; }
  .co-grid, .card-form { grid-template-columns: 1fr; }
  .cr-row { grid-template-columns: 1fr; }
  .cr-qr { width: 150px; }
  .co-head { padding: 22px 64px 16px 20px; }
  .co-body { padding: 20px; }
  .ai-launch-t { display: none; }
  .ai-launch { width: 50px; padding: 0; justify-content: center; }
  .ai-shop { right: 14px; bottom: 14px; }
  .adm-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adm-kpi b { font-size: 24px; }
}
@media (hover: none) { .p-quick { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s-promo-track { animation: none; } .sf-site.is-in > *, .pc { animation: none; } }

/* ---------- engine pieces shared by every layout ---------- */
.sf-site { min-height: 520px; }
.s-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.s-cats button small { margin-left: 6px; font-size: 10.5px; opacity: .55; font-variant-numeric: tabular-nums; }
.s-search { position: relative; }
.s-kbd { flex: none; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; font: 600 11px/1 var(--font-mono); color: var(--s-muted); border: 1px solid var(--s-line); }
.s-search:focus-within .s-kbd { opacity: 0; }
.s-ic-t { font-size: 13.5px; font-weight: 600; margin-left: 6px; }
/* an icon button that also carries a text label (e.g. "Bag") lays out in a row, not a grid stack */
.s-ic:has(.s-ic-t) { display: inline-flex; align-items: center; width: auto; padding: 0 14px 0 12px; }
.s-empty { display: grid; justify-items: center; gap: 10px; }
.s-empty[hidden] { display: none; }
.s-empty > .ic { font-size: 26px; opacity: .5; }
.s-empty p { margin: 0; }

/* search suggestions (floating, themed by the store) */
.s-suggest { position: fixed; z-index: 90; display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: var(--s-surface, var(--surface)); color: var(--s-ink, var(--ink)); border: 1px solid var(--s-line, var(--line)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); font-family: var(--s-fb, inherit); animation: popIn .25s var(--ease-out); }
.s-suggest[hidden] { display: none; }
.s-suggest > small { padding: 4px 8px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted, var(--ink-3)); }
.s-suggest > p { padding: 10px; font-size: 13.5px; color: var(--s-muted, var(--ink-3)); }
.s-suggest button { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; text-align: left; color: inherit; }
.s-suggest button .ic { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.s-suggest button:hover, .s-suggest button.on { background: color-mix(in srgb, var(--s-ink, #000) 7%, transparent); }
.s-suggest button:hover .ic, .s-suggest button.on .ic { opacity: 1; transform: none; }
.sg-img { width: 42px; height: 42px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--s-ink, #888) 6%, transparent); }
.sg-img img { width: 100%; height: 100%; object-fit: cover; }
.s-suggest b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.s-suggest em { font-style: normal; font-size: 12px; color: var(--s-muted, var(--ink-3)); }

/* fly-to-bag */
.fly-img { position: fixed; z-index: 200; object-fit: cover; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* quick view extras */
.pm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 44px; }
.pm-share { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--s-muted); border: 1px solid var(--s-line); }
.pm-share:hover { color: var(--s-ink); border-color: var(--s-ink); }
.pm-nav { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 22px; background: color-mix(in srgb, var(--s-surface) 88%, transparent); backdrop-filter: blur(8px); font: 600 12px/1 var(--font-mono); color: var(--s-ink); }
.pm-nav button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.pm-nav button:hover { background: var(--s-ink); color: var(--s-bg); }
.pm-zoom::after { content: ''; position: absolute; inset: 0; background: var(--tint, transparent); mix-blend-mode: color; opacity: 0; pointer-events: none; }
.pm-zoom.tinting::after { animation: tintFlash 1.1s ease; }
@keyframes tintFlash { 30% { opacity: .35; } }
.pm-ship { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--s-rs); background: color-mix(in srgb, var(--s-accent) 7%, var(--s-surface)); border: 1px solid var(--s-line); font-size: 13px; }
.pm-deliv { display: flex; gap: 10px; align-items: flex-start; color: var(--s-muted); }
.pm-deliv b { color: var(--s-ink); }
.pm-deliv .ic { flex: none; margin-top: 2px; color: var(--s-accent); }
.pm-stockbar { display: grid; gap: 6px; font-size: 12px; color: var(--s-muted); }
.pm-stockbar i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--s-ink) 10%, transparent); overflow: hidden; }
.pm-stockbar b { display: block; height: 100%; border-radius: inherit; background: var(--s-accent); animation: growX 1s var(--ease-out); transform-origin: left; }
.pm-stockbar.low { color: var(--s-accent); font-weight: 600; }
@keyframes growX { from { transform: scaleX(0); } }
.pm-bundle { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 4px; border-radius: var(--s-rs); font-size: 13.5px; font-weight: 600; color: var(--s-ink); border: 1px dashed color-mix(in srgb, var(--s-ink) 35%, transparent); transition: background .2s, border-color .2s; }
.pm-bundle:hover { border-color: var(--s-accent); background: color-mix(in srgb, var(--s-accent) 8%, transparent); }

/* cart upsell */
.cart-ups { display: grid; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--s-line); }
.cart-ups:empty { display: none; }
.cart-ups > small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.cart-ups .up { display: grid; grid-template-columns: 44px 1fr 34px; gap: 10px; align-items: center; }
.up-img { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--s-ink) 6%, transparent); }
.up-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-ups .up b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.cart-ups .up em { font-style: normal; font-size: 12px; color: var(--s-muted); }
.cart-ups .up button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--s-ink); color: var(--s-bg); transition: transform .25s; }
.cart-ups .up button:hover { transform: scale(1.08) rotate(90deg); }
.drawer.is-empty .cart-ups { display: none; }

/* checkout summary */
.co-summary { display: flex; gap: 6px; margin-top: 8px; }
.cs-item .cs-img { position: relative; display: block; width: 38px; height: 38px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.cs-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-img em { position: absolute; right: 0; bottom: 0; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; font: 700 10px/1 var(--font-mono); font-style: normal; background: var(--ink); color: var(--bg); border-top-left-radius: 5px; }
.cs-more { align-self: center; font: 600 12px/1 var(--font-mono); color: var(--ink-3); }
.card-prev { background: linear-gradient(135deg, var(--ca, #e0442e), #1a1714 75%) !important; }

/* sticky bag bar */
.sf-sticky { position: fixed; left: 50%; bottom: 18px; z-index: 110; display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 30px; background: var(--s-ink, #111); color: var(--s-bg, #fff); font-family: var(--s-fb, inherit); font-size: 14px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
  transform: translate(-50%, 160%); transition: transform .5s var(--ease-out); }
.sf-sticky:not(.is-on) { visibility: hidden; opacity: 0; transition: transform .4s, opacity .3s, visibility 0s .4s; }
.sf-sticky.is-on { transform: translate(-50%, 0); }
.sfs-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; font-weight: 600; background: var(--s-accent, #e0442e); color: var(--s-on, #fff); }
@media (min-width: 1181px) { .sf-sticky { left: auto; right: 190px; transform: translate(0, 160%); } .sf-sticky.is-on { transform: none; } }
@media (max-width: 700px) { .sf-sticky { bottom: 80px; } .tpl-shuffle { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .tpl-card, .shop-orbs i { animation: none; } }

/* =====================================================================
   Store app: section bar + full pages (cart, orders, saved, profile,
   settings, security, AI agent). Colours come from the open store.
   ===================================================================== */
.shop-nav { position: sticky; top: var(--header-h); z-index: 30; padding: 10px 0; background: rgba(var(--bg-rgb), .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line); transition: top .6s var(--ease-out); margin-bottom: 18px; }
body:has(.site-header.is-hidden) .shop-nav { top: 0; }
.sn-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sn-in::-webkit-scrollbar { display: none; }
.sn-in button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink-2); scroll-snap-align: center; transition: background .2s, color .2s, border-color .2s; }
.sn-in button .ic { font-size: 16px; }
.sn-in button:hover { color: var(--ink); border-color: var(--ink-3); }
.sn-in button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sn-in .sn-admin { margin-left: auto; border-style: dashed; }
.sn-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font: 700 11px/20px var(--font-mono); text-align: center; }

.sf-app { --s-pad: clamp(16px, 3.4vw, 44px); min-height: 560px; background: var(--s-bg); color: var(--s-ink); font-family: var(--s-fb); font-size: 15px; line-height: 1.55; animation: apIn .45s var(--ease-out); }
@keyframes apIn { from { opacity: 0; transform: translateY(10px); } }
.ap-wrap { padding: clamp(18px, 3vw, 40px) var(--s-pad) 48px; }
.sf-app h2, .sf-app h3 { font-family: var(--s-fh); color: var(--s-ink); }
.ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ap-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; margin: 6px 0; }
.ap-head p { color: var(--s-muted); max-width: 60ch; }
.ap-crumb { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.ap-beta { font: 600 11px/1 var(--s-fb); font-style: normal; padding: 4px 8px; border-radius: 99px; background: var(--s-accent); color: var(--s-on); vertical-align: middle; letter-spacing: .06em; text-transform: uppercase; }
.sf-app .s-btn.ghost { background: transparent; color: var(--s-ink); border-color: var(--s-line); }
.sf-app .s-btn.danger { background: transparent; color: #c4321d; border-color: #c4321d; }
.sf-app .s-btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.sf-app .s-btn.wide { width: 100%; height: 52px; font-size: 15.5px; }
.ap-link { display: inline-flex; align-items: center; gap: 6px; color: var(--s-accent); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ap-link .ic { font-size: 14px; }
.ap-empty { display: grid; justify-items: center; gap: 8px; padding: 50px 20px; text-align: center; border: 1px dashed var(--s-line); border-radius: var(--s-r); }
.ap-empty > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--s-surface); color: var(--s-accent); font-size: 26px; }
.ap-empty b { font-size: 18px; } .ap-empty p { color: var(--s-muted); margin-bottom: 8px; }

/* cart */
.ap-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.ap-lines { display: grid; gap: 0; border-top: 1px solid var(--s-line); }
.ap-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--s-line); align-items: start; }
.ap-li-img { width: 96px; aspect-ratio: 1; border-radius: var(--s-rs); overflow: hidden; background: var(--s-surface); }
.ap-li-img img { width: 100%; height: 100%; object-fit: cover; }
.ap-li-mid b { display: block; font-size: 16px; } .ap-li-mid small { color: var(--s-muted); }
.ap-li-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.ap-li-acts .qty { height: 38px; }
.ap-li-acts .qty button { width: 34px; }
.ap-li-acts .qty span { min-width: 22px; text-align: center; font-weight: 600; }
.ap-warn { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: #c4321d; }
.ap-li-price { font-size: 16px; white-space: nowrap; }
.ap-sum { position: sticky; top: calc(var(--sf-top, var(--header-h)) + 16px); display: grid; gap: 14px; padding: 22px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.ap-ship p { font-size: 14px; margin-bottom: 8px; } .ap-ship i { display: block; height: 6px; border-radius: 3px; background: var(--s-line); overflow: hidden; } .ap-ship em { display: block; height: 100%; background: var(--s-accent); transition: width .6s; }
.ap-promo { display: flex; gap: 8px; } .ap-promo input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-ink); text-transform: uppercase; }
.ap-promo .s-btn { height: 44px; }
.ap-hint { font-size: 12.5px; color: var(--s-muted); margin-top: -6px; }
.ap-tot { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--s-line); }
.ap-tot div { display: flex; justify-content: space-between; font-size: 14.5px; } .ap-tot dt { color: var(--s-muted); } .ap-tot dd { margin: 0; font-variant-numeric: tabular-nums; }
.ap-tot .g dd { color: #1f8a5b; } .ap-tot .big { font-size: 19px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--s-line); } .ap-tot .big dt { color: var(--s-ink); }
.ap-safe { display: flex; gap: 8px; font-size: 12px; color: var(--s-muted); } .ap-safe .ic { flex: none; margin-top: 2px; }
.ap-sug { margin-top: 40px; } .ap-sug h3 { font-size: 22px; margin-bottom: 14px; }
.ap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ap-card { display: grid; gap: 6px; align-content: start; }
.ap-card-img { aspect-ratio: var(--s-ratio, 1 / 1); border-radius: var(--s-rs); overflow: hidden; background: var(--s-surface); }
.ap-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .ap-card:hover .ap-card-img img { transform: scale(1.05); }
.ap-card b { font-size: 14.5px; line-height: 1.3; } .ap-card span { font-size: 13px; color: var(--s-muted); } .ap-card .s-btn { margin-top: 4px; }

/* account shell */
.ap-acct { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.ap-side { position: sticky; top: calc(var(--sf-top, var(--header-h)) + 16px); display: grid; gap: 14px; padding: 18px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.ap-me { display: flex; gap: 12px; align-items: center; } .ap-me b { display: block; } .ap-me small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-muted); } .ap-me small i { width: 8px; height: 8px; border-radius: 50%; }
.ap-ava { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: var(--s-on); font-weight: 700; font-size: 17px; }
.ap-side nav { display: grid; gap: 2px; }
.ap-side nav button { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: var(--s-rs); font-size: 14.5px; font-weight: 500; color: var(--s-muted); text-align: left; }
.ap-side nav button:hover { color: var(--s-ink); background: color-mix(in srgb, var(--s-ink) 5%, transparent); }
.ap-side nav button.on { color: var(--s-ink); background: color-mix(in srgb, var(--s-accent) 14%, transparent); font-weight: 700; }
.ap-side nav button.on .ic { color: var(--s-accent); }
.ap-out { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--s-muted); padding-top: 12px; border-top: 1px solid var(--s-line); }
.ap-main { display: grid; gap: 18px; min-width: 0; } .ap-main .ap-head { margin-bottom: 0; }
.ap-card-f { display: grid; gap: 14px; padding: 22px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.ap-card-f h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 19px; }
.ap-card-f h3 small { font: 500 12.5px var(--s-fb); color: var(--s-muted); } .ap-card-f h3 small.bad { color: #c4321d; }
.ap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-app label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s-muted); }
.sf-app input:not([type=checkbox]) { height: 46px; padding: 0 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-ink); font: 400 15px var(--s-fb); }
.sf-app input:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }
.ap-card-f > .s-btn, .ap-card-f form > .s-btn { justify-self: start; }
.ap-tier { display: grid; gap: 10px; padding: 22px; border-radius: var(--s-r); color: #fff; background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 45%, #0c0907)); box-shadow: 0 20px 40px -24px var(--tc); }
.ap-tier small { opacity: .75; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .ap-tier > div > b { display: block; font: 700 32px/1.1 var(--s-fh); } .ap-tier span { opacity: .85; }
.ap-tbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; } .ap-tbar i { display: block; height: 100%; background: #fff; }
.ap-tier p { font-size: 13.5px; opacity: .9; }
.ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ap-stats div { padding: 16px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); } .ap-stats b { display: block; font: 700 26px/1 var(--s-fh); } .ap-stats small { color: var(--s-muted); }
.ap-addrs { display: grid; gap: 8px; }
.ap-addrs li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--s-rs); border: 1px solid var(--s-line); }
.ap-addrs li.def { border-color: var(--s-accent); } .ap-addrs li > span { color: var(--s-accent); font-size: 18px; text-align: center; }
.ap-addrs small { display: block; color: var(--s-muted); } .ap-addrs em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--s-accent); color: var(--s-on); margin-left: 6px; }
.ap-addr-acts { display: flex; gap: 12px; }
.ap-addr-new { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px; } .ap-addr-new .s-btn { height: 46px; }
.ap-tog { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--s-line); cursor: pointer; }
.ap-tog:last-child { border-bottom: 0; }
.ap-tog b { display: block; color: var(--s-ink); font-size: 14.5px; } .ap-tog small { display: block; font-weight: 400; color: var(--s-muted); font-size: 13px; }
.ap-tog input { position: absolute; opacity: 0; pointer-events: none; }
.ap-tog i { flex: none; position: relative; width: 46px; height: 28px; border-radius: 99px; background: var(--s-line); transition: background .25s; }
.ap-tog i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .3s var(--ease-spring); }
.ap-tog input:checked + i { background: var(--s-accent); } .ap-tog input:checked + i::after { transform: translateX(18px); }
.ap-tog input:focus-visible + i { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.ap-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--s-line); flex-wrap: wrap; }
.ap-row b { display: block; font-size: 14.5px; } .ap-row small { color: var(--s-muted); font-size: 13px; }
.ap-seg { display: inline-flex; padding: 3px; border-radius: var(--s-rs); background: color-mix(in srgb, var(--s-ink) 7%, transparent); }
.ap-seg.full { display: flex; } .ap-seg.full button { flex: 1; }
.ap-seg button { height: 34px; padding: 0 12px; border-radius: calc(var(--s-rs) - 2px); font-size: 13px; font-weight: 600; color: var(--s-muted); }
.ap-seg button[aria-pressed=true] { background: var(--s-bg); color: var(--s-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ap-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* orders */
.ap-orders { display: grid; gap: 14px; }
.ap-order { padding: 20px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); display: grid; gap: 14px; }
.ap-order.live { border-color: var(--s-accent); }
.ao-top { display: flex; justify-content: space-between; gap: 12px; } .ao-top small { display: block; color: var(--s-muted); font-size: 13px; }
.ao-st { align-self: start; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--s-accent) 16%, transparent); color: var(--s-ink); }
.ao-st.s3 { background: rgba(31,138,91,.15); color: #1f8a5b; }
.ao-items { color: var(--s-muted); font-size: 14px; }
.ao-track { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.ao-track::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 3px; background: var(--s-line); }
.ao-track li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: var(--s-muted); text-align: center; }
.ao-track i { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s-bg); border: 2px solid var(--s-line); font-size: 15px; }
.ao-track li.done i { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on); }
.ao-track li.now i { border-color: var(--s-accent); color: var(--s-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--s-accent) 22%, transparent); animation: apPulse 1.6s infinite; }
.ao-track li.done, .ao-track li.now { color: var(--s-ink); font-weight: 600; }
.ao-track li.done::after { content: ''; position: absolute; left: 50%; width: 100%; top: 17px; height: 3px; background: var(--s-accent); }
.ao-track li:last-child::after { display: none; }
@keyframes apPulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--s-accent) 8%, transparent); } }
.ao-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); } .ao-foot > div { display: flex; gap: 14px; align-items: center; } .ao-foot > b { font-size: 18px; }

/* security */
.ap-score { display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.ap-ring { flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--s-surface) 78%, transparent 80%), conic-gradient(var(--scc) calc(var(--sc) * 1%), var(--s-line) 0); }
.ap-ring b { font: 700 32px/1 var(--s-fh); } .ap-ring small { color: var(--s-muted); font-size: 12px; }
.ap-score > div > b { font-size: 19px; } .ap-score ul { margin-top: 6px; display: grid; gap: 4px; font-size: 13.5px; color: var(--s-muted); }
.ap-score li::before { content: '→ '; color: var(--scc); } .ap-score em { font-style: normal; font-weight: 700; color: #1f8a5b; margin-left: 4px; }
.ap-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; } .ap-meter i { height: 5px; border-radius: 3px; background: var(--s-line); transition: background .3s; } .ap-meter span { font-size: 12.5px; color: var(--s-muted); min-width: 90px; text-align: right; }
.ap-meter[data-meter="1"] i:nth-child(-n+1) { background: #c4321d; } .ap-meter[data-meter="2"] i:nth-child(-n+2) { background: #d97706; } .ap-meter[data-meter="3"] i:nth-child(-n+3) { background: #7aa33a; } .ap-meter[data-meter="4"] i { background: #1f8a5b; }
.ap-2fa { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px; border-radius: var(--s-rs); background: var(--s-bg); border: 1px dashed var(--s-accent); }
.ap-qr { background: #fff; padding: 8px; border-radius: 6px; } .ap-qr svg { display: block; width: 100%; }
.ap-2fa p { color: var(--s-muted); font-size: 13.5px; margin: 4px 0 10px; }
.ap-otp { display: flex; gap: 8px; } .ap-otp input { width: 150px; letter-spacing: .3em; font: 600 18px var(--font-mono) !important; text-align: center; }
.ap-demo { display: block; margin-top: 8px; color: var(--s-muted); font-size: 12px; } .ap-demo b { font-family: var(--font-mono); color: var(--s-ink); }
.ap-codes { padding: 14px; border-radius: var(--s-rs); background: var(--s-bg); } .ap-codes p { color: var(--s-muted); font-size: 13px; margin-bottom: 8px; }
.ap-codes code { display: inline-block; margin: 3px 6px 3px 0; padding: 5px 9px; border-radius: 5px; background: var(--s-surface); border: 1px solid var(--s-line); font-size: 13px; }
.ap-dev, .ap-log { display: grid; gap: 4px; }
.ap-dev li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.ap-dev li > span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--s-bg); font-size: 18px; }
.ap-dev small, .ap-log small { display: block; color: var(--s-muted); font-size: 13px; } .ap-dev em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(31,138,91,.15); color: #1f8a5b; margin-left: 6px; }
.ap-log li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.ap-log li > i { width: 10px; height: 10px; border-radius: 50%; background: #1f8a5b; } .ap-log li.bad > i { background: #c4321d; } .ap-log time { font-size: 12.5px; color: var(--s-muted); white-space: nowrap; }

/* AI agent */
.ap-agent { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ag-chat { display: grid; grid-template-rows: minmax(360px, 56vh) auto auto; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); overflow: hidden; }
.ag-msgs { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.ag-hi { margin: auto; text-align: center; max-width: 360px; display: grid; justify-items: center; gap: 6px; } .ag-hi .ic { font-size: 30px; color: var(--s-accent); } .ag-hi b { font-size: 18px; } .ag-hi p { color: var(--s-muted); font-size: 14px; }
.ag-m { max-width: 86%; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; animation: apIn .35s var(--ease-out); }
.ag-m.bot { align-self: flex-start; background: var(--s-bg); border: 1px solid var(--s-line); border-bottom-left-radius: 4px; }
.ag-m.me { align-self: flex-end; background: var(--s-accent); color: var(--s-on); border-bottom-right-radius: 4px; }
.ag-m .s-btn { margin-top: 10px; } .ag-m small { display: block; margin-top: 8px; color: var(--s-muted); }
.ag-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.ag-pick { display: grid; gap: 4px; font-size: 13px; } .ag-pick button { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--s-surface); } .ag-pick img { width: 100%; height: 100%; object-fit: cover; } .ag-pick span { color: var(--s-muted); }
.ag-tasks { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--s-line); }
.ag-tasks button { flex: none; height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--s-line); font-size: 13px; color: var(--s-ink); background: var(--s-bg); }
.ag-tasks button:hover { border-color: var(--s-accent); color: var(--s-accent); }
.ag-in { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--s-line); }
.ag-in input { flex: 1; min-width: 0; }
.ag-in button { width: 46px; height: 46px; border-radius: var(--s-rs); background: var(--s-accent); color: var(--s-on); display: grid; place-items: center; }
.ag-side { position: sticky; top: calc(var(--sf-top, var(--header-h)) + 16px); display: grid; gap: 4px; padding: 18px; border-radius: var(--s-r); background: var(--s-surface); border: 1px solid var(--s-line); }
.ag-side h3 { font: 700 12px/1 var(--s-fb); letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); margin: 12px 0 4px; } .ag-side h3:first-child { margin-top: 0; }
.ag-plan { counter-reset: st; display: grid; gap: 8px; }
.ag-plan li { counter-increment: st; position: relative; padding: 8px 10px 8px 34px; border-radius: 8px; background: var(--s-bg); font-size: 13px; animation: apIn .3s var(--ease-out); }
.ag-plan li::before { content: counter(st); position: absolute; left: 8px; top: 9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--font-mono); background: var(--s-line); color: var(--s-ink); }
.ag-plan li.done::before { content: '✓'; background: #1f8a5b; color: #fff; } .ag-plan li.now::before { background: var(--s-accent); color: var(--s-on); animation: apPulse 1s infinite; } .ag-plan li.wait::before { content: '?'; background: #d9a441; color: #1f1813; } .ag-plan li.bad::before { content: '!'; background: #c4321d; color: #fff; }
.ag-plan li.idle { padding-left: 10px; color: var(--s-muted); } .ag-plan li.idle::before { display: none; }
.ag-plan small { display: block; color: var(--s-muted); }

@media (max-width: 1000px) {
  .ap-cart, .ap-agent { grid-template-columns: minmax(0, 1fr); }
  .ap-sum, .ag-side { position: static; }
  .ap-acct { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ap-side { position: static; padding: 12px; }
  .ap-side nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .ap-side nav button { flex: none; height: 38px; border: 1px solid var(--s-line); }
  .ap-out { display: none; }
}
@media (max-width: 640px) {
  .sn-in button { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .sn-in .sn-admin { margin-left: 0; }
  .ap-line { grid-template-columns: 76px minmax(0, 1fr); }
  .ap-li-img { width: 76px; }
  .ap-li-price { grid-column: 2; }
  .ap-grid2, .ap-addr-new { grid-template-columns: minmax(0, 1fr); }
  .ap-stats b { font-size: 22px; }
  .ap-score { flex-direction: column; align-items: flex-start; }
  .ap-2fa { grid-template-columns: minmax(0, 1fr); } .ap-qr { width: 150px; }
  .ao-track li span { font-size: 11px; }
  .ap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ag-chat { grid-template-rows: minmax(320px, 52vh) auto auto; }
  .ag-m { max-width: 94%; }
  .ap-addrs li { grid-template-columns: 28px minmax(0, 1fr); } .ap-addr-acts { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .sf-app, .ag-m, .ag-plan li { animation: none; } .ao-track li.now i { animation: none; } }

.ai-shop.is-away { display: none; }

@media (max-width: 640px) {
  .demo-note kbd, .demo-note .kbd-tip { display: none; }
  .shop-stats { gap: 10px 20px; }
  .shop-stats b { font-size: 24px; }
}

/* =====================================================================
   Touch sizing. On phones and any coarse pointer every control in the
   shop is at least 44 x 44 px; text links grow a taller hit row instead
   of looking bigger. Desktop sizes stay as designed.
   ===================================================================== */
@media (max-width: 700px), (pointer: coarse) {
  .tpl-groups button, .tpl-shuffle, .sn-in button, .s-cats button, .s-sort select, .s-ic,
  .p-wish, .p-quick, .sfs-go, .cr-coins button, .cr-copy, .ag-tasks button, .ap-seg button,
  .ai-sugg button, .ai-x, .ai-input button, .ai-input input, .modal-close, .pm-nav button, .pm-share,
  .opt-size, .opt-color, .qty button, .ci .qty button, .ap-li-acts .qty button, .ci-rm, .promo .input, .promo .btn,
  .sf-app .s-btn, .sf-app .s-btn.sm, .ap-side nav button, .ap-out, .ap-promo input, .ap-addr-new input, .ap-grid2 input,
  .s-news input, .s-news .s-btn, .pay-methods button, .co-actions .btn, .ag-in input, .ag-in button {
    min-height: 44px;
  }
  .s-ic, .p-wish, .p-quick, .cr-copy, .ai-x, .ai-input button, .modal-close, .pm-nav button, .pm-share,
  .qty button, .ci .qty button, .ap-li-acts .qty button, .ci-rm, .opt-color { min-width: 44px; }
  .ci-rm { display: inline-grid; place-items: center; }
  .ap-seg button, .sf-cols > div > button { min-width: 44px; }
  .ap-seg button { justify-content: center; }
  .qty, .s-search { min-height: 44px; }
  .ai-sugg button { display: inline-flex; align-items: center; }
  /* text-style buttons and links: a full-height hit row, same look */
  .ap-link, .s-word, .pc-name button, .sf-cols > div > button, .sf-cols > div > span { display: inline-flex; align-items: center; min-height: 44px; }
  .pc-name button { width: 100%; }
  .sf-cols > div { gap: 0; }
  .ap-li-acts, .ao-foot > div, .ap-addr-acts { column-gap: 14px; }
}