/* Storefront pages the ex_website prototype did not have (market, listing,
 * cart, auctions, buybacks, tournaments, shops, content pages, login).
 * Same tokens as theme-v2.css: violet-black surfaces, cyan lead, magenta
 * second, Orbitron headings, Space Mono numbers, notched HUD corners.
 * Every class is sf-* so nothing here restyles a prototype component. */

:root { --sf-cut: 14px; --sf-gutter: 16px; }
.sf-mono { font-family: var(--v2-mono); }
.sf-accent { color: var(--v2-accent); }
.sf-pink { color: var(--v2-pink); }
.sf-muted { color: var(--v2-muted); }
.sf-logo-text { font: 800 15px/1.2 var(--v2-display); color: #1a1030; text-align: center; padding: 0 10px; }

/* ---------- Header additions ---------- */
.search-form { position: relative; }
.sf-suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 60; background: var(--v2-surface); border: 1px solid #00f0ff55; box-shadow: 0 24px 50px #000c; max-height: min(70vh, 600px); overflow: auto; overscroll-behavior: contain; }
/* rows: card (code · name · game + a chip), game head (drills in), listing (price) */
.sf-suggest-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--v2-line); color: inherit; }
button.sf-suggest-row, .sf-suggest-back { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--v2-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sf-suggest-row > img, .sf-suggest-ph { width: 38px; height: 53px; object-fit: cover; background: var(--v2-surface-2); }
.sf-suggest-row.sf-suggest-game { grid-template-columns: 64px minmax(0, 1fr) auto; background: #ffffff08; padding-block: 7px; }
.sf-suggest-game > img, .sf-suggest-game > .sf-suggest-ph { width: 64px; height: 34px; object-fit: contain; background: none; }
/* the logo on a white plate (black-ink logos vanished on the dark row) — same plate as /decks' game tiles;
   a logo drawn on its own solid colour (HeadLogo bg: Summoner Master) paints the plate that colour */
.sf-suggest-game > img { box-sizing: border-box; padding: 4px 6px; background: var(--logo-bg, #fff); border-radius: 4px; box-shadow: 0 0 0 1px #ffffff2e; }
.sf-suggest-row b { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.sf-suggest-row i { display: block; font: 600 11px/1.35 var(--v2-mono); font-style: normal; color: var(--sf-code); overflow-wrap: anywhere; }
.sf-suggest-row small { color: var(--v2-muted); font-size: 11px; }
.sf-suggest-row em { font: 700 13px var(--v2-mono); font-style: normal; color: var(--sf-price); }
.sf-suggest-row.sf-suggest-game em { font: 600 11px var(--v2-mono); color: var(--sf-action); white-space: nowrap; }
.sf-suggest-row em.sf-suggest-tag, .sf-suggest-row em.sf-suggest-conf { justify-self: end; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--sf-border-strong); font: 600 10px/1.4 var(--v2-mono); color: var(--sf-text); }
.sf-suggest-conf.is-high { border-color: #2ee59d88; color: var(--sf-sell); }
.sf-suggest-conf.is-medium { border-color: #00f0ff66; color: var(--sf-action); }
.sf-suggest-conf.is-low { color: var(--v2-muted); }
.sf-suggest-sale { color: var(--sf-price); }
.sf-suggest-flag { display: inline-block; width: 16px; height: 11px; object-fit: cover; margin-left: 6px; vertical-align: -1px; }
.sf-suggest-label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px 6px; font-size: 11px; font-weight: 700; color: var(--sf-eyebrow); border-bottom: 1px solid var(--v2-line); }
.sf-suggest-label .sf-suggest-flag { margin-left: 0; }
.sf-suggest-label small { margin-left: auto; color: var(--v2-muted); font-weight: 500; }
.sf-suggest .sf-suggest-back { display: block; padding: 9px 12px; font-size: 12px; color: var(--sf-action); }   /* beats the theme's .search-form button { padding: 0 } */
.sf-suggest-imghead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--v2-line); font-size: 12px; font-weight: 600; }
.sf-suggest-imghead img { width: 40px; height: 56px; object-fit: cover; border: 1px solid var(--sf-border-strong); }
.sf-suggest-imghead small { margin-left: auto; color: var(--v2-muted); font-weight: 500; }
.sf-suggest-spin { margin-left: auto; width: 16px; height: 16px; border: 2px solid #00f0ff44; border-top-color: var(--sf-action); border-radius: 50%; animation: sf-suggest-spin .8s linear infinite; }
@keyframes sf-suggest-spin { to { transform: rotate(1turn); } }
.sf-suggest-row:hover, .sf-suggest-row:focus-visible, .sf-suggest-row.is-active,
.sf-suggest-back:hover, .sf-suggest-back:focus-visible, .sf-suggest-back.is-active, .sf-suggest-all.is-active { background: #00f0ff12; }
.sf-suggest-all, .sf-suggest-empty { display: block; padding: 11px 12px; font-size: 12px; color: var(--v2-accent); }
.sf-suggest-empty { color: var(--v2-muted); }
.sf-account { position: relative; }
.sf-account > summary { list-style: none; cursor: pointer; }
.sf-account > summary::-webkit-details-marker { display: none; }
.sf-account-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 220px; background: var(--v2-surface); border: 1px solid #00f0ff44; box-shadow: 0 24px 50px #000c; padding: 6px; }
.sf-account-menu a, .sf-account-menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 12px; font-size: 13px; text-align: left; color: var(--v2-text); }
.sf-account-menu a:hover, .sf-account-menu button:hover { background: #00f0ff12; color: var(--v2-accent); }
.sf-account-menu .icon { width: 17px; height: 17px; }
.favorites-toggle { position: relative; }
.saved-count { background: var(--v2-accent) !important; color: var(--v2-bg) !important; }
.sf-legal-links { display: inline-flex; gap: 18px; }
.sf-test-tag { position: absolute; left: 10px; bottom: 10px; z-index: 3; font: 700 9px/1 var(--v2-mono); letter-spacing: 1px; padding: 4px 6px; background: #ffcf00; color: #111; }
/* .add-cart.is-added: buttons.css (green fill + the bag drops in) */

/* ---------- Page head / breadcrumbs ---------- */
.sf-page { padding: 34px 0 90px; }
.sf-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--v2-muted); margin-bottom: 18px; }
.sf-crumbs a:hover { color: var(--v2-accent); }
.sf-crumbs span[aria-hidden] { opacity: .5; }
.sf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 30px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--v2-line); position: relative; }
.sf-head::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 56px; height: 1px; background: var(--v2-accent); box-shadow: 0 0 8px var(--v2-accent); }
.sf-head h1 { font: 900 clamp(26px, 4vw, 44px)/1.1 var(--v2-display); letter-spacing: -.5px; text-transform: uppercase; }
.sf-head h1 small { display: block; font: 600 13px/1.6 'Noto Sans Thai', sans-serif; letter-spacing: 0; text-transform: none; color: var(--v2-muted); margin-top: 8px; }
.sf-head .eyebrow { display: block; margin-bottom: 10px; color: var(--v2-accent); }
.sf-kicker { font: 400 10px var(--v2-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--v2-accent); }

/* ---------- Toolbar ---------- */
.sf-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.sf-toolbar .filter-tabs { flex-wrap: wrap; }
.sf-toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sf-select, .sf-input { background: #ffffff06; border: 1px solid #ffffff24; color: var(--v2-text); font: 13px 'Noto Sans Thai', sans-serif; padding: 9px 12px; min-height: 40px; }
.sf-select:focus, .sf-input:focus { outline: none; border-color: var(--v2-accent); box-shadow: 0 0 14px #00f0ff1f; }
.sf-select option { background: var(--v2-surface); }
.sf-input { width: 100%; }
.sf-search-inline { display: flex; min-width: min(320px, 100%); }
.sf-search-inline .sf-input { border-right: 0; }
.sf-search-inline button { padding: 0 14px; border: 1px solid #ffffff24; color: var(--v2-accent); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #ffffff24; font-size: 12px; color: #c7bdd6; }
.sf-chip:hover { color: var(--v2-accent); border-color: #00f0ff66; }
.sf-chip.is-on { background: var(--v2-accent); color: var(--v2-bg); border-color: var(--v2-accent); }
.sf-chip b { font: 700 10px var(--v2-mono); opacity: .75; }
.sf-result { font-size: 12px; color: var(--v2-muted); margin: -10px 0 20px; }
.sf-result b { color: var(--v2-text); }

/* ---------- Pager ---------- */
.sf-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 44px; }
.sf-pager a, .sf-pager span, .sf-pager button { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 10px; border: 1px solid #ffffff1f; font: 13px var(--v2-mono); }
/* partials/pager-lw: the same squares as <button>s (wire:click paging) */
.sf-pager button { background: none; color: inherit; cursor: pointer; }
.sf-pager button:disabled { cursor: progress; opacity: .6; }
.sf-pager a:hover, .sf-pager button:hover:not(:disabled) { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-pager a:focus-visible, .sf-pager button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.sf-pager .is-current { background: var(--v2-accent); color: var(--v2-bg); border-color: var(--v2-accent); }
.sf-pager .is-disabled { opacity: .35; }

/* ---------- Panels ---------- */
.sf-panel { position: relative; background: var(--v2-surface); border: 1px solid #ffffff1a; padding: 24px; clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut))); }
.sf-panel + .sf-panel { margin-top: 18px; }
.sf-panel h2, .sf-panel h3.sf-panel-title { font: 800 14px/1.3 var(--v2-display); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }
.sf-panel h2 .icon, .sf-panel-title .icon { color: var(--v2-accent); width: 18px; height: 18px; }
.sf-panel-accent { border-color: #00f0ff55; box-shadow: inset 0 0 40px #00f0ff08; }
.sf-empty-slim { padding: 44px 20px; }

.sf-specs { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 13px; }
.sf-specs dt { color: var(--v2-muted); }
.sf-specs dd { margin: 0; font-weight: 600; }

/* ---------- Listing / card detail ---------- */
.sf-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sf-gallery { position: sticky; top: 150px; }
.sf-gallery-stage { position: relative; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); background: radial-gradient(circle at 50% 40%, #00f0ff1a, transparent 60%), var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-gallery-stage::before, .sf-gallery-stage::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid var(--v2-accent); }
.sf-gallery-stage::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.sf-gallery-stage::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.sf-gallery-stage img { width: min(100%, 380px); aspect-ratio: 600 / 838; object-fit: contain; filter: drop-shadow(0 30px 40px #000c); transition: transform .4s; }
.sf-gallery-stage:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.sf-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.sf-thumbs button { flex: 0 0 64px; height: 84px; border: 1px solid #ffffff24; padding: 3px; background: var(--v2-surface); }
.sf-thumbs button.active { border-color: var(--v2-accent); }
.sf-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sf-title { font: 800 clamp(24px, 3.2vw, 38px)/1.2 'Noto Sans Thai', var(--v2-display); margin: 8px 0 12px; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.sf-tag { font: 700 10px/1 var(--v2-mono); letter-spacing: 1px; padding: 6px 8px; border: 1px solid #00f0ff66; color: var(--v2-accent); text-transform: uppercase; }
.sf-tag.is-pink { border-color: #ff006e88; color: #ff5c9d; }
.sf-tag.is-yellow { border-color: #ffcf0088; color: #ffcf00; }
.sf-buy { margin: 6px 0 22px; }
.sf-price { font: 700 clamp(30px, 4vw, 44px)/1 var(--v2-mono); color: var(--v2-text); letter-spacing: -1px; }
.sf-price small { font: 400 12px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); margin-left: 10px; letter-spacing: 0; }
.sf-buy-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
.sf-buy-row .button { min-height: 50px; }
.quantity-control input[data-qty] { width: 46px; text-align: center; background: transparent; border: 0; color: var(--v2-text); font: 700 14px var(--v2-mono); -moz-appearance: textfield; }
.quantity-control input[data-qty]::-webkit-inner-spin-button { -webkit-appearance: none; }
.sf-qty { display: inline-flex; align-items: center; border: 1px solid #ffffff2e; height: 50px; }
.sf-qty button { width: 42px; height: 100%; display: grid; place-items: center; }   /* colours: buttons.css "Steppers" */
.sf-qty .icon { width: 16px; height: 16px; }
.sf-stock { font-size: 12px; color: var(--v2-muted); }
.sf-stock b { color: var(--v2-text); font-family: var(--v2-mono); }
.sf-note { font-size: 12px; color: var(--v2-muted); line-height: 1.7; }
.sf-alert { padding: 12px 14px; border: 1px solid #ffcf0066; background: #ffcf000d; color: #ffe27a; font-size: 12px; margin-top: 14px; }
.sf-effect { font-size: 13px; line-height: 1.85; color: #d9d0e6; }

.sf-shop-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; }
.sf-shop-logo { width: 56px; height: 56px; object-fit: cover; background: var(--v2-surface-2); border: 1px solid #00f0ff44; display: grid; place-items: center; font: 800 20px var(--v2-display); color: var(--v2-accent); }
.sf-shop-card h3 { font-size: 15px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.sf-shop-card h3 .icon { width: 15px; height: 15px; color: var(--v2-accent); }
.sf-shop-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--v2-muted); }
.sf-shop-meta b { color: var(--v2-text); font-family: var(--v2-mono); }

.sf-rows { display: grid; }
.sf-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--v2-line); font-size: 13px; }
.sf-row:last-child { border-bottom: 0; }
.sf-row img { width: 44px; height: 60px; object-fit: cover; background: var(--v2-surface-2); }
.sf-row b { font-weight: 600; }
.sf-row small { display: block; color: var(--v2-muted); font-size: 11px; }
.sf-row .sf-row-price { font: 700 14px var(--v2-mono); color: var(--v2-accent); }
.sf-price-list { display: grid; gap: 8px; }
.sf-price-list a, .sf-price-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #ffffff05; border: 1px solid var(--v2-line); font-size: 12px; }
.sf-price-list a:hover { border-color: #00f0ff66; }
.sf-price-list b { font-family: var(--v2-mono); color: var(--v2-accent); }
/* The site's own-currency price sits beside its ฿ conversion (partials/price-row). */
.sf-price-list .sf-price-val { display: inline-flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 8px; margin-left: auto; text-align: right; }
.sf-price-list .sf-price-val small { font: 11px var(--v2-mono); white-space: nowrap; }
.sf-price-list .sf-price-val b { white-space: nowrap; }
/* A price source's site icon before its name (partials/source-logo, MarketPrices::logo):
   on a small light plate, so the dark-on-transparent favicons (tcgthailand, snkrdunk,
   yuyu-tei) stay readable on the dark surfaces. */
.sf-src-logo { display: inline-block; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-right: 8px; padding: 1px; vertical-align: -4px; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px #ffffff2e; }
.sf-section { margin-top: 70px; }
.sf-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }

/* ---------- Cart ---------- */
.sf-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.sf-cart-shop { margin-bottom: 18px; }
.sf-cart-shop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--v2-line); }
.sf-cart-shop-head a { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.sf-cart-shop-head img, .sf-cart-shop-head .sf-shop-logo { width: 30px; height: 30px; font-size: 13px; }
.sf-line { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--v2-line); }
.sf-line:last-child { border-bottom: 0; }
.sf-line img { width: 70px; height: 98px; object-fit: cover; background: var(--v2-surface-2); }
.sf-line h3 { font-size: 14px; font-weight: 700; line-height: 1.4; }
.sf-line h3 a:hover { color: var(--v2-accent); }
.sf-line p { font-size: 11px; color: var(--v2-muted); }
.sf-line .sf-qty { height: 38px; }
.sf-line .sf-qty button { width: 34px; }
.sf-line-sum { text-align: right; min-width: 100px; }
.sf-line-sum b { display: block; font: 700 15px var(--v2-mono); }
.sf-line-sum button { font-size: 11px; color: var(--v2-muted); margin-top: 6px; }
.sf-line-sum button:hover { color: var(--v2-pink); }
.sf-summary { position: sticky; top: 150px; }
.sf-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 13px; margin-bottom: 18px; }
.sf-summary dd { margin: 0; font-family: var(--v2-mono); text-align: right; }
.sf-summary .sf-total { font: 700 26px var(--v2-mono); color: var(--v2-accent); }
.sf-summary .button { width: 100%; justify-content: center; }
.sf-locked { font-size: 11px; color: #ffcf00; }

/* ---------- Auction / buyback cards ---------- */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.sf-card { position: relative; display: flex; flex-direction: column; background: var(--v2-surface); border: 1px solid #ffffff1a; transition: border-color .2s, transform .25s, box-shadow .25s; clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, 0 100%); }
.sf-card:hover { border-color: #00f0ff66; transform: translateY(-4px); box-shadow: 0 20px 40px #0009; }
.sf-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.4; padding: 18px; background: radial-gradient(circle at 50% 35%, #00f0ff14, transparent 65%), #0d0719; border-bottom: 1px solid var(--v2-line); overflow: hidden; }
.sf-card-art img { max-height: 100%; width: auto; max-width: 78%; object-fit: contain; filter: drop-shadow(0 16px 22px #000b); transition: transform .35s; }
.sf-card:hover .sf-card-art img { transform: translateY(-6px) scale(1.04); }
.sf-card-badge { position: absolute; top: 10px; left: 10px; font: 700 9px/1 var(--v2-mono); letter-spacing: 1px; padding: 5px 7px; background: #0a0014e0; border: 1px solid #00f0ff66; color: var(--v2-accent); text-transform: uppercase; }
.sf-card-badge.is-pink { border-color: #ff006e99; color: #ff5c9d; }
.sf-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.sf-card-body h3 { font-size: 14px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-meta { font-size: 11px; color: var(--v2-muted); display: flex; justify-content: space-between; gap: 8px; }
.sf-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; border-top: 1px dashed #ffffff1a; }
.sf-card-foot small { display: block; font-size: 10px; color: var(--v2-muted); }
.sf-card-foot b { font: 700 17px var(--v2-mono); }
.sf-timer { font: 700 12px var(--v2-mono); color: var(--v2-accent); white-space: nowrap; }
.sf-timer.is-soon { color: var(--v2-pink); animation: sf-blink 1s steps(2) infinite; }
.sf-timer.is-over { color: var(--v2-muted); }
@keyframes sf-blink { 50% { opacity: .55; } }
.effects-off .sf-timer.is-soon { animation: none; }
.sf-tiers { display: grid; gap: 4px; margin-top: 4px; }
.sf-tiers div { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 8px; background: #ffffff06; }
.sf-tiers b { font-family: var(--v2-mono); color: var(--v2-accent); }

/* bid box + history */
.sf-bid-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 20px; }
.sf-bid-now div { padding: 14px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-bid-now small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-bid-now b { font: 700 20px var(--v2-mono); }
.sf-bid-form { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-bid-form .sf-input { flex: 1 1 160px; font-family: var(--v2-mono); font-size: 16px; min-height: 50px; }
.sf-error { color: #ff5c9d; font-size: 12px; margin-top: 8px; }
.sf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sf-table th { text-align: left; font: 400 10px var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-muted); padding: 8px 10px; border-bottom: 1px solid #ffffff24; }
.sf-table td { padding: 11px 10px; border-bottom: 1px solid var(--v2-line); }
.sf-table td.num { font-family: var(--v2-mono); text-align: right; }
.sf-table tr:first-child td { color: var(--v2-accent); }

/* ---------- Shops ---------- */
.sf-shop-tile { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.sf-shop-tile .sf-shop-logo { width: 64px; height: 64px; }
.sf-shop-hero { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; }
.sf-shop-hero .sf-shop-logo { width: 96px; height: 96px; font-size: 34px; }
.sf-shop-hero h1 { font: 900 clamp(24px, 3.4vw, 40px)/1.1 'Noto Sans Thai', var(--v2-display); }
.sf-stat-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; }
.sf-stat-row div { font-size: 11px; color: var(--v2-muted); }
.sf-stat-row b { display: block; font: 700 20px var(--v2-mono); color: var(--v2-text); }

/* /shops directory tile: cover band (the logo blurred) → logo + name → stat
   strip (same height on every tile, so the strips line up) → game tags →
   footer link. Scoped to .sf-shop-grid; the home shelf
   keeps the plain .sf-shop-tile above. */
.sf-shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.sf-shop-grid .sf-shop-tile { gap: 0; padding: 0; overflow: hidden; }
.sf-shop-tile-cover { position: relative; height: 88px; overflow: hidden; background: radial-gradient(circle at 12% 130%, #00f0ff3d, transparent 60%), radial-gradient(circle at 92% -30%, #ff006e33, transparent 55%), #140b26; }
.sf-shop-tile-cover::before { content: ''; position: absolute; inset: -40px; background: var(--logo) center / cover no-repeat; filter: blur(26px) saturate(1.5); opacity: .38; }
/* The same look from a picture blurred once on the server (App\Support\BlurredLogo): no GPU
   blur per tile, no shader compile when the shelf scrolls in (home froze ~0.2 s there). */
.sf-shop-tile-cover.has-blur::before { background-image: var(--logo-blur); filter: none; }
.sf-shop-tile-cover::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to bottom, #0a001433, var(--v2-surface) 96%), linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: auto, 16px 16px, 16px 16px; }
.sf-shop-tile-badge { position: absolute; top: 12px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font: 600 11px/1.3 'Noto Sans Thai', sans-serif; color: #cfc4df; background: #0a0014c9; border: 1px solid #ffffff26; }
.sf-shop-tile-badge.is-verified { color: var(--v2-accent); border-color: #00f0ff66; }
.sf-shop-tile-badge .icon { width: 12px; height: 12px; stroke-width: 3; }
.sf-shop-tile-head { position: relative; display: flex; align-items: flex-end; gap: 14px; margin-top: -40px; padding: 0 20px; }
.sf-shop-grid .sf-shop-logo { flex: 0 0 72px; width: 72px; height: 72px; font-size: 26px; background: #0d0719; border-color: #00f0ff59; box-shadow: 0 0 0 4px var(--v2-surface), 0 12px 26px #000b; }
.sf-shop-tile-head h3 { min-width: 0; padding-bottom: 4px; font: 800 17px/1.35 'Noto Sans Thai', var(--v2-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.sf-shop-tile:hover .sf-shop-tile-head h3 { color: var(--v2-accent); }
.sf-shop-tile-games { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 20px 20px; }
.sf-shop-tile-games span { --c: #b9aecb; padding: 3px 9px; font: 600 11px/1.4 'Noto Sans Thai', sans-serif; color: var(--c); border: 1px solid #ffffff26; background: #ffffff08; }
@supports (color: color-mix(in srgb, red, blue)) {
  .sf-shop-tile-games span { color: color-mix(in srgb, var(--c) 72%, #fff); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
}
.sf-shop-tile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 20px 16px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-shop-tile-stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; min-width: 0; }
.sf-shop-tile-stats div + div { border-left: 1px solid var(--v2-line); }
.sf-shop-tile-stats dt { font-size: 11px; color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-shop-tile-stats dd { margin: 0; display: flex; align-items: center; gap: 4px; font: 700 19px/1.2 var(--v2-mono); color: var(--v2-text); }
.sf-shop-tile-stats dd .icon { width: 14px; height: 14px; color: #ffcf00; fill: currentColor; }
.sf-shop-tile-go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--v2-text); border-top: 1px dashed #ffffff1f; transition: background .2s, color .2s; }
.sf-shop-tile-go .icon { width: 18px; height: 18px; color: var(--v2-accent); transition: transform .25s; }
.sf-shop-tile:hover .sf-shop-tile-go { color: var(--v2-accent); background: #00f0ff0d; }
.sf-shop-tile:hover .sf-shop-tile-go .icon { transform: translateX(4px); }

/* ---------- Tournament schedule (/tournaments) ----------
   One row per event, grouped by month: date | cover | details | fee + seats
   + button. The home shelf keeps the ticket cards (_ticket). */
.sf-event-month { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.sf-event-month h2 { font: 800 18px/1.3 'Noto Sans Thai', var(--v2-display); white-space: nowrap; }
.sf-event-month span { font-size: 12px; color: var(--v2-muted); white-space: nowrap; }
.sf-event-month::after { content: ''; flex: 1; align-self: center; height: 1px; background: var(--v2-line); }
.sf-toolbar + .sf-event-month { margin-top: 8px; }
.sf-events { display: grid; gap: 14px; }
.sf-events-past { margin-top: 26px; }
.sf-event { --game: var(--v2-accent); position: relative; display: grid; grid-template-columns: 88px 156px minmax(0, 1fr) 240px; grid-template-areas: "date art main side"; background: var(--v2-surface); border: 1px solid #ffffff1a; border-left: 3px solid var(--game); transition: border-color .2s, transform .25s, box-shadow .25s, opacity .2s; }
.sf-event:hover { border-color: #00f0ff66; border-left-color: var(--game); transform: translateY(-3px); box-shadow: 0 18px 36px #0009; }
.sf-event-date { grid-area: date; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 6px; text-align: center; border-right: 1px dashed #ffffff24; background: #ffffff04; }
.sf-event-date b { font: 900 36px/1 var(--v2-display); color: var(--v2-text); }
.sf-event-date span { font-size: 12px; color: var(--v2-muted); }
.sf-event-date .is-month { font-weight: 700; color: var(--v2-accent); }
.sf-event-art { grid-area: art; display: grid; place-items: center; min-height: 108px; margin: 14px 0 14px 16px; padding: 10px; background: linear-gradient(160deg, #ffffff, #ece6f7); overflow: hidden; }
.sf-event-art img { max-width: 100%; max-height: 88px; object-fit: contain; transition: transform .3s; }
.sf-event:hover .sf-event-art img { transform: scale(1.05); }
.sf-event-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 22px; }
.sf-event-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-event-tags span { padding: 2px 8px; font: 600 11px/1.5 'Noto Sans Thai', sans-serif; color: #cfc4df; border: 1px solid #ffffff2e; }
.sf-event-tags .is-game { color: var(--game); border-color: var(--game); }
.sf-event-tags .is-open { color: var(--v2-accent); border-color: #00f0ff66; background: #00f0ff12; }
.sf-event-tags .is-hot { color: #ff5c9d; border-color: #ff006e88; background: #ff006e14; }
.sf-event-tags .is-yellow { color: #ffcf00; border-color: #ffcf0066; }
.sf-event h3 { font: 700 18px/1.45 'Noto Sans Thai', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.sf-event:hover h3 { color: var(--v2-accent); }
.sf-event-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--v2-muted); }
.sf-event-meta li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sf-event-meta .icon { flex: 0 0 14px; width: 14px; height: 14px; color: var(--v2-accent); }
.sf-event-prize { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ffe27a; }
.sf-event-prize .icon { flex: 0 0 14px; width: 14px; height: 14px; }
.sf-event-side { grid-area: side; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px 20px; border-left: 1px solid var(--v2-line); background: #ffffff04; }
.sf-event-fee small, .sf-event-seats small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-event-fee b { display: block; font: 700 24px/1.2 var(--v2-mono); color: var(--v2-accent); }
.sf-event-seats { display: grid; gap: 6px; }
.sf-event-seats b { font-family: var(--v2-mono); color: var(--v2-text); }
.sf-event.is-full .seat-bar i { background: var(--v2-pink); box-shadow: 0 0 10px #ff006e88; }
.sf-event-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--v2-text); border: 1px solid #00f0ff66; transition: background .2s, color .2s, border-color .2s; }
.sf-event-cta .icon { width: 16px; height: 16px; transition: transform .2s; }
.sf-event:hover .sf-event-cta { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-bg); }
.sf-event:hover .sf-event-cta .icon { transform: translateX(4px); }
.sf-event.is-past { opacity: .7; border-left-color: #ffffff33; }
.sf-event.is-past:hover { opacity: 1; }
.sf-event.is-past .sf-event-art img { filter: grayscale(.6); }
.sf-event.is-past .sf-event-fee b { color: var(--v2-text); }
.sf-event.is-past .sf-event-cta { border-color: #ffffff2e; }
@media (max-width: 1080px) {
  .sf-event { grid-template-columns: 80px 132px minmax(0, 1fr); grid-template-areas: "date art main" "side side side"; }
  .sf-event-side { flex-direction: row; justify-content: flex-start; align-items: center; gap: 22px; border-left: 0; border-top: 1px solid var(--v2-line); padding: 12px 20px; }
  .sf-event-seats { flex: 1; max-width: 260px; }
  .sf-event-cta { margin-left: auto; }
}
@media (max-width: 680px) {
  .sf-event-month { margin: 26px 0 12px; }
  .sf-event-month h2 { font-size: 16px; }
  .sf-event { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "date main" "side side"; }
  .sf-event-art { display: none; }
  .sf-event-date { padding: 12px 4px; }
  .sf-event-date b { font-size: 28px; }
  .sf-event-date span { font-size: 11px; }
  .sf-event-main { padding: 14px 14px 14px 16px; gap: 6px; }
  .sf-event h3 { font-size: 16px; }
  .sf-event-meta { gap: 3px 14px; font-size: 12px; }
  .sf-event-side { flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px 14px; }
  .sf-event-fee b { font-size: 20px; }
  .sf-event-seats { min-width: 140px; }
  .sf-event-cta { flex: 1 0 100%; margin-left: 0; }
}

/* ---------- Content pages ---------- */
.sf-prose { max-width: 820px; font-size: 15px; line-height: 1.9; color: #ddd5ea; font-family: 'Noto Sans Thai', sans-serif; }
.sf-prose h1, .sf-prose h2, .sf-prose h3 { color: var(--v2-text); margin: 1.6em 0 .6em; line-height: 1.4; }
.sf-prose h2 { font-size: 22px; } .sf-prose h3 { font-size: 17px; }
.sf-prose p, .sf-prose ul, .sf-prose ol { margin: 0 0 1em; }
.sf-prose a { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; }
.sf-prose img { max-width: 100%; height: auto; }
.sf-prose table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.sf-prose td, .sf-prose th { border: 1px solid var(--v2-line); padding: 8px 10px; }
.sf-prose * { background-color: transparent !important; }
.sf-prose [style*="color"] { color: inherit !important; }
.sf-faq { display: grid; gap: 10px; max-width: 900px; }
.sf-faq details { background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-faq details[open] { border-color: #00f0ff55; }
.sf-faq summary { display: flex; gap: 14px; align-items: center; padding: 16px 18px; cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::before { content: 'Q'; flex: 0 0 28px; height: 28px; display: grid; place-items: center; font: 800 12px var(--v2-display); color: var(--v2-bg); background: var(--v2-accent); }
.sf-faq summary::after { content: '+'; margin-left: auto; font: 700 18px var(--v2-mono); color: var(--v2-accent); }
.sf-faq details[open] summary::after { content: '−'; }
.sf-faq .sf-prose { padding: 0 18px 18px 60px; font-size: 14px; }

/* ---------- Login ---------- */
.sf-auth { min-height: calc(100vh - 220px); display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(30px, 6vw, 100px); align-items: center; padding: 50px 0 90px; }
/* .sf-auth-art (heading, feature chips, card stage) lives in pkg-auth.css */
.sf-form { display: grid; gap: 16px; }
.sf-field label { display: block; font-size: 12px; color: var(--v2-muted); margin-bottom: 6px; }
.sf-field .sf-input { min-height: 48px; font-size: 15px; }
.sf-check { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--v2-muted); }
.sf-check input { accent-color: var(--v2-accent); width: 16px; height: 16px; }
.sf-form .button { width: 100%; justify-content: center; min-height: 50px; }
.sf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Closed / error ---------- */
.sf-closed { text-align: center; padding: 100px 0 120px; }
.sf-closed h1 { font: 900 clamp(28px, 4vw, 48px)/1.1 var(--v2-display); margin: 18px 0 10px; }
.sf-closed .icon { width: 48px; height: 48px; color: var(--v2-accent); }
.sf-closed p { color: var(--v2-muted); max-width: 520px; margin: 0 auto 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sf-detail, .sf-cart { grid-template-columns: 1fr; }
  .sf-gallery, .sf-summary { position: static; }
  .sf-auth { grid-template-columns: 1fr; }
  .sf-auth-art { display: none; }
}
@media (max-width: 680px) {
  .sf-page { padding: 22px 0 70px; }
  .sf-head { margin-bottom: 18px; }
  .sf-toolbar { align-items: stretch; }
  .sf-toolbar-right, .sf-search-inline { width: 100%; }
  .sf-toolbar-right .sf-select { flex: 1; }
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sf-grid.sf-shop-grid { grid-template-columns: 1fr; gap: 16px; }
  .sf-card-body { padding: 10px 12px 12px; }
  .sf-card-foot { flex-direction: column; align-items: flex-start; }
  .sf-card-foot b { font-size: 15px; }
  .sf-line { grid-template-columns: 60px minmax(0, 1fr); }
  .sf-line img { width: 60px; height: 84px; grid-row: span 2; }
  .sf-line-sum { text-align: left; display: flex; gap: 14px; align-items: center; }
  .sf-line-sum button { margin: 0; }
  .sf-bid-now { grid-template-columns: 1fr 1fr; }
  .sf-shop-hero { grid-template-columns: 64px 1fr; }
  .sf-shop-hero .sf-shop-logo { width: 64px; height: 64px; font-size: 24px; }
  .sf-shop-hero > :last-child { grid-column: 1 / -1; }
  .sf-row { grid-template-columns: 40px 1fr auto; }
  .sf-row > :nth-child(3) { display: none; }
  .sf-faq .sf-prose { padding-left: 18px; }
  .sf-panel { padding: 18px; }
  .sf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---------- Account shell (/me/*, /profile) ---------- */
.sf-acct { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.sf-acct-side { position: sticky; top: 150px; display: grid; gap: 12px; }
.sf-acct-me { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-acct-me .sf-shop-logo { width: 46px; height: 46px; font-size: 18px; }
.sf-acct-me b { display: block; font-size: 14px; line-height: 1.3; word-break: break-all; }
.sf-acct-me small { font-size: 11px; color: var(--v2-accent); }
.sf-acct-credit { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid #00f0ff55; background: #00f0ff0a; font-size: 12px; color: var(--v2-muted); }
.sf-acct-credit b { font: 700 16px var(--v2-mono); color: var(--v2-accent); }
.sf-acct-menu { display: grid; padding: 8px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-acct-group { font: 400 10px var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-muted); padding: 12px 10px 6px; }
.sf-acct-menu a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; font-size: 13px; color: #d9d0e6; border-left: 2px solid transparent; }
.sf-acct-menu a .icon { width: 16px; height: 16px; color: var(--v2-muted); }
.sf-acct-menu a:hover { color: var(--v2-accent); background: #00f0ff0a; }
.sf-acct-menu a.is-on { color: var(--v2-accent); border-left-color: var(--v2-accent); background: #00f0ff12; }
.sf-acct-menu a.is-on .icon { color: var(--v2-accent); }
.sf-acct-main { min-width: 0; }
.sf-acct-main > .sf-head { margin-top: 0; }

/* ---------- Shared building blocks for the feature packages ---------- */
/* status pill: add is-ok / is-warn / is-bad / is-info */
.sf-status { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--v2-mono); letter-spacing: .8px; text-transform: uppercase; padding: 5px 8px; border: 1px solid #ffffff33; color: #d9d0e6; white-space: nowrap; }
.sf-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-status.is-ok { color: #3ee8a0; border-color: #3ee8a055; }
.sf-status.is-warn { color: #ffcf00; border-color: #ffcf0055; }
.sf-status.is-bad { color: #ff5c9d; border-color: #ff006e66; }
.sf-status.is-info { color: var(--v2-accent); border-color: #00f0ff55; }
/* tabs as links: .sf-tabs > a(.is-on) */
.sf-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--v2-line); margin-bottom: 22px; scrollbar-width: none; }
.sf-tabs a, .sf-tabs button { padding: 11px 14px; font-size: 13px; color: var(--v2-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.sf-tabs a:hover, .sf-tabs button:hover { color: var(--v2-text); }
.sf-tabs .is-on { color: var(--v2-accent); border-bottom-color: var(--v2-accent); }
.sf-tabs b { font: 700 10px var(--v2-mono); margin-left: 6px; padding: 2px 5px; background: #ffffff14; }
/* Language tabs (card data, the card zooms): the flag before TH / EN / JP. The
   hairline keeps the white of the JP / TH flags off the dark panel. */
.sf-lang-flag { display: inline-block; height: 1.05em; width: auto; aspect-ratio: 3 / 2; margin-right: 6px; vertical-align: -.16em; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff2e; }
/* forms */
.sf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.sf-form-grid .is-wide { grid-column: 1 / -1; }
.sf-field .sf-hint { display: block; font-size: 11px; color: var(--v2-muted); margin-top: 5px; }
.sf-field textarea.sf-input { min-height: 110px; resize: vertical; line-height: 1.6; }
.sf-field .sf-error { margin-top: 5px; }
.sf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.button.is-sm { min-height: 38px; padding: 0 16px; font-size: 12px; }
.button.is-danger { background: var(--v2-pink); color: #fff; }
/* key-value summary list */
.sf-kv { display: grid; gap: 8px; font-size: 13px; }
.sf-kv > div { display: flex; justify-content: space-between; gap: 16px; }
.sf-kv dt, .sf-kv span:first-child { color: var(--v2-muted); }
.sf-kv dd { margin: 0; text-align: right; font-weight: 600; }
.sf-kv .is-total { padding-top: 10px; border-top: 1px solid var(--v2-line); font-size: 15px; }
.sf-kv .is-total dd { font: 700 20px var(--v2-mono); color: var(--v2-accent); }
/* list rows with thumb (orders, notifications …) */
.sf-list { display: grid; gap: 12px; }
.sf-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-item:hover { border-color: #00f0ff44; }
.sf-item > img, .sf-item > .sf-thumb { width: 52px; height: 72px; object-fit: cover; background: var(--v2-surface-2); }
.sf-item h3 { font-size: 14px; font-weight: 700; line-height: 1.4; }
.sf-item p { font-size: 12px; color: var(--v2-muted); }
.sf-item .sf-item-end { text-align: right; display: grid; gap: 6px; justify-items: end; }
.sf-item.is-unread { border-left: 3px solid var(--v2-accent); }
/* stat tiles */
.sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.sf-stat { padding: 16px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-stat small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-stat b { font: 700 22px var(--v2-mono); }
.sf-stat.is-accent { border-color: #00f0ff55; } .sf-stat.is-accent b { color: var(--v2-accent); }
/* modal: <dialog class="sf-dialog"> */
.sf-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid #00f0ff55; background: var(--v2-surface); color: var(--v2-text); box-shadow: 0 30px 80px #000d; }
.sf-dialog::backdrop { background: #05000ccc; backdrop-filter: blur(4px); }
.sf-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--v2-line); font: 800 14px var(--v2-display); text-transform: uppercase; }
.sf-dialog-body { padding: 20px; overflow: auto; }
/* QR / payment box */
.sf-qr { display: grid; justify-items: center; gap: 12px; padding: 22px; background: #fff; color: #111; max-width: 320px; margin: 0 auto; }
.sf-qr img { width: 240px; height: 240px; }

@media (max-width: 1080px) {
  .sf-acct { grid-template-columns: 1fr; gap: 18px; }
  .sf-acct-side { position: static; }
  .sf-acct-menu { display: flex; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  .sf-acct-group { display: none; }
  .sf-acct-menu a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .sf-acct-menu a.is-on { border-bottom-color: var(--v2-accent); }
}
@media (max-width: 680px) {
  .sf-form-grid { grid-template-columns: 1fr; }
  .sf-item { grid-template-columns: auto minmax(0, 1fr); }
  .sf-item .sf-item-end { grid-column: 1 / -1; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; }
}
.sf-account-credit b { margin-left: auto; font-family: var(--v2-mono); color: var(--v2-accent); }
.navigation { overflow-x: auto; scrollbar-width: none; }
.navigation > a { white-space: nowrap; }

/* ---------- Home: promo slides (/admin/slides) + shelves ---------- */
.sf-promo { position: relative; margin-top: 44px; }
.sf-promo-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 100%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
@media (min-width: 900px) { .sf-promo-track { grid-auto-columns: calc(50% - 8px); } }
.sf-promo-slide { position: relative; scroll-snap-align: start; min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; overflow: hidden; border: 1px solid #ffffff1f; background: linear-gradient(135deg, var(--from), var(--to)); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.sf-promo-slide::before { content: ''; position: absolute; inset: 0; background: var(--bg, none) var(--bx, 50%) var(--by, 50%) / cover; opacity: .55; mix-blend-mode: luminosity; }
/* ::after also draws the two notch edges; it sits on the padding box, so the
   18px cut crosses it as a 16px square in each corner. */
.sf-promo-slide::after { content: ''; position: absolute; inset: 0; color: var(--sf-edge); transition: color .2s; background: var(--sf-diag) right top / 16px 16px no-repeat, var(--sf-diag) left bottom / 16px 16px no-repeat, linear-gradient(90deg, #0a0014ee 0%, #0a001499 55%, transparent); }
.sf-promo-slide { --sf-edge: #ffffff1f; border-color: var(--sf-edge); }
.sf-promo-slide:hover { --sf-edge: #00f0ff66; }
.sf-promo-copy { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: start; max-width: 62%; }
.sf-promo-copy strong { font: 800 clamp(17px, 2vw, 24px)/1.25 'Noto Sans Thai', var(--v2-display); }
.sf-promo-copy small { color: var(--v2-muted); font-size: 12px; }
.sf-promo-copy b { font-size: 22px; color: var(--v2-accent); }
.sf-promo-cta { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--v2-accent); }
.sf-promo-slide > img { position: relative; z-index: 1; max-height: 170px; max-width: 36%; object-fit: contain; filter: drop-shadow(0 18px 24px #000c); transition: transform .35s; }
.sf-promo-slide:hover > img { transform: translateY(-6px) rotate(-2deg); }
.sf-promo-nav { position: absolute; right: 0; top: -44px; display: flex; gap: 6px; }
.sf-home-shelf { margin-top: 90px; }
.sf-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 18px; scrollbar-width: thin; scrollbar-color: #00f0ff55 transparent; }
.sf-shelf > * { scroll-snap-align: start; }
@media (min-width: 1200px) { .sf-shelf { grid-auto-columns: calc((100% - 60px) / 4); } }
.sf-shelf-shops { grid-auto-columns: minmax(240px, 1fr); }
/* Horizontal rows: .sf-hrow[data-sf-row] = scroller + partials/row-nav (storefront.js: .can-prev / .can-next
   while there is more that way, mouse drag). The ‹ › sit on the row's sides, half over the gutter
   (owner 2026-10-06: "น่าจะมีปุ่มเลื่อนซ้ายขวา หรือใช้มือเลื่อนได้"). The promo slider wears the same buttons. */
.sf-hrow { position: relative; }
.sf-hrow-btn { position: absolute; top: 50%; z-index: 4; width: 42px; height: 42px; display: none; place-items: center; padding: 0; color: var(--v2-accent); background: #0a0014e0; border: 1px solid #00f0ff66; box-shadow: 0 8px 22px #000b; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateY(-50%); transition: background .15s, color .15s, border-color .15s; }
.sf-hrow-btn.is-prev { left: -21px; }
.sf-hrow-btn.is-next { right: -21px; }
.sf-hrow-btn .icon { width: 19px; height: 19px; }
.sf-hrow.can-prev > .sf-hrow-btn.is-prev, .sf-hrow.can-next > .sf-hrow-btn.is-next { display: grid; }
.sf-hrow-btn:active { background: var(--v2-accent); color: var(--v2-bg); }
.sf-hrow-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sf-hrow-btn:hover { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-bg); }
  .sf-hrow.is-scrollable > :first-child { cursor: grab; }
}
.sf-hrow > .is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
@media (max-width: 680px) {
  .sf-hrow-btn { width: 36px; height: 36px; }
  .sf-hrow-btn.is-prev { left: -12px; }
  .sf-hrow-btn.is-next { right: -12px; }
  .sf-hrow-btn .icon { width: 17px; height: 17px; }
}
.sf-best { position: relative; }
.sf-best-rank { position: absolute; z-index: 2; top: 10px; right: 12px; font: 900 34px/1 var(--v2-display); color: transparent; -webkit-text-stroke: 1px var(--v2-accent); }
.sf-news-art { aspect-ratio: 16 / 9; padding: 0; }
.sf-news-art img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 680px) {
  .sf-promo-slide { min-height: 170px; padding: 18px; }
  .sf-promo-copy { max-width: 70%; }
  .sf-promo-slide > img { max-height: 120px; }
  .sf-home-shelf { margin-top: 60px; }
  .sf-shelf { grid-auto-columns: 62%; gap: 12px; }
}
.sf-alert.is-bad { border-color: #ff006e66; background: #ff006e12; color: #ff8fb8; }
.sf-alert.is-ok { border-color: #3ee8a066; background: #3ee8a00f; color: #8ff0c4; }
.sf-alert.is-info { border-color: #00f0ff55; background: #00f0ff0d; color: var(--v2-accent); }
.search-form .sf-imgsearch { padding: 0 8px; color: var(--v2-pink); }

/* ---------- Full-screen loading overlay (partials/loading, window.sfLoading) ---------- */
.sf-loading { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #2a1060 0%, #0e0420 48%, #05000c 100%); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
html.sf-is-loading .sf-loading { opacity: 1; visibility: visible; transition: opacity .25s ease; }
html.sf-is-loading, html.sf-is-loading body { overflow: hidden; }
/* Page change (storefront.js): a copy hung on <html> beside <body>, so the
   wire:navigate swap does not take it down. The copy a back-button snapshot
   carries is parsed into <body> — that one never shows. */
.sf-loading-nav.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.sf-loading-nav.is-instant { transition: none; }
body .sf-loading-nav { display: none !important; }
.sf-loading::before { content: ''; position: absolute; width: 200%; height: 200%; left: 0; top: 0; background: radial-gradient(#00f0ff 1px, transparent 1px); background-size: 56px 56px; opacity: .14; animation: sf-loading-grid 20s linear infinite; }
@keyframes sf-loading-grid { to { transform: translate(-280px, -280px); } }
.sf-loading::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #0000002a 3px 4px); pointer-events: none; }
.sf-loading-ring { position: absolute; left: 50%; top: 50%; width: min(78vw, 78vh, 440px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #00f0ff22; border-top-color: var(--v2-accent, #00f0ff); box-shadow: 0 0 30px #00f0ff22 inset; translate: -50% -50%; animation: sf-loading-spin 6s linear infinite; pointer-events: none; }
.sf-loading-ring.is-2 { width: min(94vw, 94vh, 540px); border-color: #ff006e1f; border-top-color: var(--v2-pink, #ff006e); animation-duration: 12s; animation-direction: reverse; }
@keyframes sf-loading-spin { to { rotate: 360deg; } }
.sf-loading-box { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; padding: 0 18px; animation: sf-loading-float 3s ease-in-out infinite; }
@keyframes sf-loading-float { 50% { translate: 0 -15px; } }
.sf-loading-mascot { width: clamp(150px, 38vw, 280px); max-height: 42vh; object-fit: contain; filter: drop-shadow(0 0 15px #00f0ff) drop-shadow(0 0 40px #7c3aed); animation: sf-loading-glow 2s ease-in-out infinite; }
@keyframes sf-loading-glow { 50% { filter: drop-shadow(0 0 32px #00f0ff) drop-shadow(0 0 70px #ff006e88); } }
.sf-loading-card { width: clamp(110px, 22vw, 150px); aspect-ratio: 600 / 838; perspective: 700px; }
.sf-loading-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 0 30px #00f0ff66; animation: sf-loading-flip 1.6s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes sf-loading-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.sf-loading-text { font: 700 clamp(13px, 3.4vw, 17px) var(--v2-display, sans-serif); letter-spacing: .14em; color: #b9f8ff; text-shadow: 0 0 10px #00f0ffb0; text-align: center; }
.sf-loading-text::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: sf-loading-dots 1.2s steps(4) infinite; }
@keyframes sf-loading-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.sf-loading-bar { position: relative; display: block; width: min(70vw, 320px); height: 12px; border: 2px solid var(--v2-accent, #00f0ff); background: #ffffff10; overflow: hidden; box-shadow: 0 0 20px #00f0ff66; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sf-loading-bar::after { content: ''; position: absolute; inset: -2px; pointer-events: none; color: var(--v2-accent, #00f0ff);
  background: linear-gradient(to top right, transparent calc(50% - 2px), currentColor calc(50% - 2px), currentColor calc(50% + 2px), transparent calc(50% + 2px)) right top / 8px 8px no-repeat,
    linear-gradient(to top right, transparent calc(50% - 2px), currentColor calc(50% - 2px), currentColor calc(50% + 2px), transparent calc(50% + 2px)) left bottom / 8px 8px no-repeat; }
.sf-loading-bar > span { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, #00f0ff, #7c3aed, #ff006e, #00f0ff); background-size: 200% 100%; translate: -110% 0; animation: sf-loading-sweep 1.4s ease-in-out infinite, sf-loading-flow 2s linear infinite; }
@keyframes sf-loading-sweep { to { translate: 240% 0; } }
@keyframes sf-loading-flow { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sf-loading::before, .sf-loading-box, .sf-loading-mascot, .sf-loading-card img { animation: none; }
  .sf-loading-ring { animation-duration: 18s; }
  .sf-loading-ring.is-2 { animation-duration: 30s; }
  .sf-loading-bar > span { animation-duration: 3s, 4s; }
}
/* Hidden, it holds still: its endless animations (the glow filter, the bar's
   background) otherwise restyle and repaint the page on every frame, loader or not. */
html:not(.sf-is-loading) .sf-loading:not(.is-on), html:not(.sf-is-loading) .sf-loading:not(.is-on) *,
html:not(.sf-is-loading) .sf-loading:not(.is-on)::before, html:not(.sf-is-loading) .sf-loading:not(.is-on) *::after { animation-play-state: paused; }

/* ---------- Notched corners keep their edge ----------
   clip-path cuts the border off along the diagonal, which left the notch
   without a line. Draw that diagonal back as a background layer sitting
   exactly on the cut (half of it is clipped away, the rest reads as the
   border). --sf-edge = the element's own border colour. */
:root { --sf-diag: linear-gradient(to top right, transparent calc(50% - .9px), currentColor calc(50% - .9px), currentColor calc(50% + .9px), transparent calc(50% + .9px)); }
.sf-panel, .sf-card, .sf-decks-tile { --sf-edge: #ffffff1a; border-color: var(--sf-edge); }
.sf-panel-accent { --sf-edge: #00f0ff55; }
.sf-card:hover, .sf-decks-tile:hover { --sf-edge: #00f0ff66; }
.sf-decks-hero { --sf-edge: #00f0ff44; --sf-notch: 22px; }
.sf-trust-hero { --sf-edge: #ff006e44; --sf-notch: 22px; }
.sf-panel {
  background-image:
    linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)),
    linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px));
  background-size: var(--sf-cut) var(--sf-cut), var(--sf-cut) var(--sf-cut);
  background-position: right top, left bottom;
  background-repeat: no-repeat;
  background-origin: border-box;
}
/* Tiles and heroes: the art (or a child's background) fills the notch and
   painted over a background line, so these draw it on ::after instead —
   above the children, covering the border box (inset -1px = the border). */
.sf-card::after, .sf-decks-tile::after, .sf-decks-hero::after, .sf-trust-hero::after {
  content: ''; position: absolute; inset: -1px; z-index: 5; pointer-events: none;
  color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-notch, var(--sf-cut)) var(--sf-notch, var(--sf-cut)) no-repeat;
}
.sf-decks-hero::after, .sf-trust-hero::after {
  background:
    var(--sf-diag) right top / var(--sf-notch) var(--sf-notch) no-repeat,
    var(--sf-diag) left bottom / var(--sf-notch) var(--sf-notch) no-repeat;
}

/* ---------- Themed confirm / alert (window.sfConfirm / sfAlert, storefront.js) ---------- */
.sf-modal { width: min(460px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--v2-text); overflow: visible; }
.sf-modal::backdrop { background: rgba(5, 0, 12, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: sf-modal-fade .2s ease both; }
.sf-modal[open] .sf-modal-box { animation: sf-modal-in .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.sf-modal.is-leaving .sf-modal-box { animation: sf-modal-out .15s ease forwards; }
.sf-modal.is-leaving::backdrop { animation: sf-modal-fade .15s ease reverse forwards; }
.sf-modal-box { --tone: var(--v2-accent); --sf-edge: color-mix(in srgb, var(--tone) 55%, transparent); --sf-cut: 16px;
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 26px 24px 22px;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tone) 14%, transparent), transparent 55%), var(--v2-surface);
  border: 1px solid var(--sf-edge); box-shadow: 0 30px 80px #000d, 0 0 40px color-mix(in srgb, var(--tone) 18%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut)));
  background-image:
    linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)),
    linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)),
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--tone) 14%, transparent), transparent 55%);
  background-size: var(--sf-cut) var(--sf-cut), var(--sf-cut) var(--sf-cut), auto;
  background-position: right top, left bottom, 0 0; background-repeat: no-repeat; background-origin: border-box; }
.sf-modal-box::before { content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.sf-modal[data-tone="danger"] .sf-modal-box { --tone: var(--v2-pink); }
.sf-modal[data-tone="ok"] .sf-modal-box { --tone: #3ee8a0; }
.sf-modal-ic { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tone); border: 1px solid var(--sf-edge); background: color-mix(in srgb, var(--tone) 10%, transparent); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background: linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)) right top / 8px 8px no-repeat border-box, color-mix(in srgb, var(--tone) 10%, transparent); }
.sf-modal-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-modal[open] .sf-modal-ic svg { animation: sf-modal-ic .5s cubic-bezier(.3, 1.6, .5, 1) .08s both; }
.sf-modal-text h2 { font: 800 16px/1.35 var(--v2-display); letter-spacing: .3px; text-transform: uppercase; margin: 2px 0 8px; }
.sf-modal-text p { font-size: 14px; line-height: 1.75; color: #d9d0e6; overflow-wrap: anywhere; }
.sf-modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.sf-modal-actions .button { min-height: 44px; min-width: 110px; justify-content: center; }
@keyframes sf-modal-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes sf-modal-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes sf-modal-fade { from { opacity: 0; } }
@keyframes sf-modal-ic { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
@media (max-width: 480px) {
  .sf-modal-box { grid-template-columns: 1fr; justify-items: start; padding: 22px 18px 18px; }
  .sf-modal-actions { justify-self: stretch; width: 100%; }
  .sf-modal-actions .button { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sf-modal-box, .sf-modal-ic svg, .sf-modal::backdrop { animation: none !important; } }

/* snkrdunk board — partials/snkrdunk-board (CardDetail::snkrdunk): a tile per condition / grade
   with a price, like snkrdunk's own product page; the ask in the price colour, the latest sale in
   green. Framed like the other sources' rows (the peek's .sf-peek-rows, .sf-price-list): faint
   fill, one hairline, the site's name in the row's type (owner 2026-09-29: "snkrdunk ทำเป็นกรอบ
   เหมือน yuyutei"). */
.sf-snkr { display: grid; gap: 12px; margin-top: 16px; padding: 10px 12px 12px; background: #ffffff07; border: 1px solid #ffffff14; }
.sf-snkr-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; font-size: 13px; font-weight: 400; color: var(--v2-text); }
.sf-snkr-h .sf-src-logo { margin-right: 0; }
.sf-snkr-h small { flex-basis: 100%; color: var(--v2-muted); font-weight: 400; font-size: 11px; }
.sf-snkr-print { display: grid; gap: 8px; }
.sf-snkr-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-text); text-decoration: none; }
.sf-snkr-title:hover { color: var(--v2-accent); }
.sf-snkr-title .icon { width: 12px; height: 12px; flex: none; opacity: .7; }
.sf-snkr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
/* content from the top: the condition labels (A · B · C · 他鑑定品) and the prices under them stay on
   one line across the row, whether or not a tile has a "ขายล่าสุด" line (owner 2026-09-29) */
.sf-snkr-tile { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 62px; padding: 8px 6px; background: #ffffff06; border: 1px solid #ffffff14; text-align: center; }
.sf-snkr-cond { font-size: 11px; color: var(--v2-muted); }
/* the box's one link: top-right, like the external icon of the other sources' rows */
.sf-snkr-go { margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--v2-muted); }
.sf-snkr-go .icon { width: 13px; height: 13px; }
.sf-snkr-go:hover, .sf-snkr-go:focus-visible { color: var(--v2-accent); }
span.sf-snkr-title { cursor: default; }
.sf-snkr-tile b { font-family: var(--v2-mono); font-size: 14px; color: var(--sf-price, #ffd24a); }
.sf-snkr-tile b.is-sold { color: #7cd992; }
.sf-snkr-tile small { font-size: 10px; color: var(--v2-muted); }
.sf-snkr-tile small.sf-snkr-sold { color: #7cd992; }
.sf-snkr.is-compact { margin-top: 12px; padding: 10px 12px 12px; }
.sf-snkr.is-compact .sf-snkr-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.sf-snkr.is-compact .sf-snkr-tile { min-height: 54px; padding: 6px 4px; }
.sf-snkr.is-compact .sf-snkr-tile b { font-size: 12px; }