/* Storefront chrome — last13's layouts/tcg header / footer / phone chrome in
 * the ex_website theme: test-world strip, bell + messages + wallet in the
 * header, account menu head, scam-report pill, /admin/ads frame, phone tab
 * bar and ☰ sheet, image lightbox. Markup: storefront/partials/chrome/*,
 * partials/ad. Behaviour: js/pkg-chrome.js. Every class is sf-chrome-* /
 * sf-ad*; the few rules that touch other packages' classes only move their
 * fixed bottom bars above the phone tab bar (bottom of this file). */

/* ---------- Database branding: use the uploaded artwork at its own ratio ---------- */
.sf-chrome-logo { display: inline-flex; align-items: center; width: 190px; min-height: 56px; font: 800 17px/1.3 var(--v2-display); letter-spacing: 0; white-space: normal; }
.sf-chrome-logo img { display: block; width: 100%; height: 64px; object-fit: contain; object-position: left center; }
@media (max-width: 680px) {
  .sf-chrome-logo { width: 148px; min-height: 48px; font-size: 15px; }
  .sf-chrome-logo img { height: 51px; }
}

/* ---------- Test-world strip + header chip ---------- */
.sf-chrome-test { position: relative; z-index: 31; background: repeating-linear-gradient(-45deg, #ffcf00 0 16px, #f2bd00 16px 32px); color: #1a1205; }
.sf-chrome-test-in { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; padding-block: 6px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.45; }
.sf-chrome-test-in .icon { width: 18px; height: 18px; stroke-width: 2; }
.sf-chrome-test b { font-weight: 800; }
.sf-chrome-test.is-admin { background: #1b1405; color: #ffcf00; border-bottom: 1px solid #ffcf0066; }
.sf-chrome-testchip { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 4px 7px; font: 700 10px/1 var(--v2-mono); letter-spacing: 1.5px; color: #111; background: #ffcf00; align-self: center; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.sf-chrome-testchip .icon { width: 13px; height: 13px; stroke-width: 2.2; }

/* ---------- Header: popovers (bell + account share the <details> pattern) ---------- */
.sf-chrome-pop { position: relative; }
.sf-chrome-pop > summary { list-style: none; cursor: pointer; }
.sf-chrome-pop > summary::-webkit-details-marker { display: none; }
.sf-chrome-pop[open] > summary.icon-button { color: var(--v2-accent); background: #00f0ff12; }
.sf-chrome-panel { position: absolute; right: -8px; top: calc(100% + 12px); z-index: 60; width: 360px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px)); background: var(--v2-surface); border: 1px solid #00f0ff44; box-shadow: 0 24px 50px #000c; }
.sf-chrome-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--v2-line); }
.sf-chrome-panel-head b { display: inline-flex; align-items: center; gap: 8px; font: 800 13px var(--v2-display); letter-spacing: .5px; }
.sf-chrome-panel-head .icon { width: 18px; height: 18px; color: var(--v2-accent); }
.sf-chrome-total { min-width: 24px; padding: 3px 8px; text-align: center; font: 700 11px/1.2 var(--v2-mono); color: #fff; background: var(--v2-pink); }
.sf-chrome-panel-body { overflow: auto; padding: 6px 0; overscroll-behavior: contain; }
/* Thai labels: no letter-spacing (spaced Thai loses its vowel marks). */
.sf-chrome-grp { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: 11px; font-weight: 700; color: var(--v2-muted); }
.sf-chrome-grp .icon { width: 14px; height: 14px; }
.sf-chrome-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; font-size: 13px; line-height: 1.4; color: var(--v2-text); }
.sf-chrome-item:hover, .sf-chrome-item:focus-visible { background: #00f0ff12; color: var(--v2-accent); }
.sf-chrome-item .icon { width: 18px; height: 18px; color: var(--v2-accent); }
.sf-chrome-item em { min-width: 24px; padding: 2px 7px; text-align: center; font: 700 11px/1.4 var(--v2-mono); font-style: normal; color: #fff; background: var(--v2-pink); }
.sf-chrome-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center; color: var(--v2-muted); font-size: 13px; }
.sf-chrome-empty .icon { width: 30px; height: 30px; color: #6f6585; }
.sf-chrome-panel-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--v2-line); font-size: 12px; font-weight: 700; color: var(--v2-accent); }
.sf-chrome-panel-foot .icon { width: 15px; height: 15px; }
.sf-chrome-panel-foot:hover { background: #00f0ff0d; }

/* ---------- Header: language menu (flag · TH ▾ → ไทย / English) ----------
 * Desktop + tablet only — phones pick the language in the ☰ sheet (owner 2026-10-08). */
.sf-chrome-langpop { flex-shrink: 0; }
.sf-chrome-langbtn { display: inline-flex; align-items: center; gap: 6px; height: 39px; padding: 0 8px 0 9px; font: 700 12px/1 var(--v2-mono); letter-spacing: .5px; color: var(--v2-text); border: 1px solid #ffffff1f; transition: color .2s, border-color .2s, background .2s; }
.sf-chrome-langbtn img, .sf-chrome-langlist img, .sf-chrome-lang img { display: block; width: 21px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff2e; }
.sf-chrome-langbtn .icon { width: 14px; height: 14px; color: var(--v2-muted); transition: transform .2s; }
.sf-chrome-langbtn:hover, .sf-chrome-langpop[open] > .sf-chrome-langbtn { color: var(--v2-accent); border-color: #00f0ff66; background: #00f0ff0d; }
.sf-chrome-langpop[open] > .sf-chrome-langbtn .icon { transform: rotate(180deg); color: var(--v2-accent); }
.sf-chrome-langlist { width: 196px; padding: 6px 0; }
.sf-chrome-langlist .sf-chrome-item { grid-template-columns: 21px minmax(0, 1fr) 16px; }
.sf-chrome-langlist .sf-chrome-item .icon { width: 16px; height: 16px; }
.sf-chrome-langlist .sf-chrome-item.is-on { color: var(--v2-accent); font-weight: 700; }
.sf-chrome-lang { display: inline-flex; align-items: center; gap: 7px; }
.sf-chrome-lang img { width: 18px; height: 12px; }

/* ---------- Header: wallet pill (− ฿balance +) ----------
 * A chamfered frame: the element's own background is the red→cyan edge,
 * ::before (1px in, same cut) is the fill — a border would be sliced off at
 * the cut corners by the clip-path. The two keys sit INSIDE the frame (4px in)
 * and repeat its cut on their outer corner, so the three shapes nest; their
 * glow is painted into the fill (--glow-l / --glow-r) because the clip-path
 * would cut a box-shadow off. ::after = the sheen that crosses on hover.
 * − withdraw = red (money out), lit like the cyan + top-up (owner 2026-09-28);
 * restyled as inset keys the same day (owner: "ไม่ค่อยสวย ปรับให้สวยกว่านี้"). */
.sf-chrome-wallet { --cut: 10px; --kcut: 7.5px; --glow-l: #ff4d6d24; --glow-r: #00f0ff24; position: relative; isolation: isolate; display: inline-flex; align-items: stretch; height: 40px; padding: 4px; flex-shrink: 0; overflow: hidden; background: linear-gradient(115deg, #ff4d6da6, #ffffff1c 38%, #ffffff1c 62%, #00f0ffb3); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.sf-chrome-wallet::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, #ffffff0e, transparent 45%), radial-gradient(52px 30px at 20px 50%, var(--glow-l), transparent 75%), radial-gradient(52px 30px at calc(100% - 20px) 50%, var(--glow-r), transparent 75%), radial-gradient(60% 120% at 50% 135%, #00f0ff1a, transparent 70%), linear-gradient(180deg, #1d1233, #0e0720); clip-path: polygon(0 0, calc(100% - var(--cut) + .5px) 0, 100% calc(var(--cut) - .5px), 100% 100%, calc(var(--cut) - .5px) 100%, 0 calc(100% - var(--cut) + .5px)); }
.sf-chrome-wallet::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, #ffffff24 50%, transparent 62%); transform: translateX(-110%); }
.sf-chrome-wallet:hover { background: linear-gradient(115deg, #ff4d6d, #ffffff33 38%, #ffffff33 62%, #00f0ff); }
.sf-chrome-wallet:hover::after { transform: translateX(110%); transition: transform .9s cubic-bezier(.3, .7, .3, 1); }
.sf-chrome-wallet:has(.sf-chrome-wallet-pm:not(.is-add):hover) { --glow-l: #ff4d6d5c; }
.sf-chrome-wallet:has(.sf-chrome-wallet-pm.is-add:hover) { --glow-r: #00f0ff5c; }
.sf-chrome-wallet-pm { display: grid; place-items: center; width: 32px; flex-shrink: 0; transition: background .2s, filter .2s; }
.sf-chrome-wallet-pm .icon { width: 15px; height: 15px; stroke-width: 2.4; transition: transform .25s; }
.sf-chrome-wallet-pm:active { filter: brightness(.9); }
.sf-chrome-wallet-pm:focus-visible, .sf-chrome-wallet-bal:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sf-chrome-wallet-pm:not(.is-add) { color: #fff; background: linear-gradient(160deg, #ff9aac, #ff4d6d 48%, #d9143f); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -7px 10px -7px #7f0d2cb3; clip-path: polygon(0 0, 100% 0, 100% 100%, var(--kcut) 100%, 0 calc(100% - var(--kcut))); }
.sf-chrome-wallet-pm:not(.is-add) .icon { filter: drop-shadow(0 1px 1px #9f1239b3); }
.sf-chrome-wallet-pm:not(.is-add):hover { background: linear-gradient(160deg, #ffc2cd, #ff6b86 48%, #f43f5e); }
.sf-chrome-wallet-pm:not(.is-add):hover .icon { transform: scaleX(1.3); }
.sf-chrome-wallet-pm.is-add { color: #04121a; background: linear-gradient(160deg, #a5feff, var(--v2-accent) 50%, #00bcd6); box-shadow: inset 0 1px 0 #ffffffa6, inset 0 -7px 10px -7px #006f80b3; clip-path: polygon(0 0, calc(100% - var(--kcut)) 0, 100% var(--kcut), 100% 100%, 0 100%); }
.sf-chrome-wallet-pm.is-add:hover { background: linear-gradient(160deg, #e0ffff, #6ffcff 50%, #00e0f5); }
.sf-chrome-wallet-pm.is-add:hover .icon { transform: rotate(90deg); }
.sf-chrome-wallet-bal { display: inline-flex; align-items: center; gap: 9px; padding: 0 12px 0 11px; white-space: nowrap; }
.sf-chrome-wallet-bal > .icon { width: 17px; height: 17px; color: var(--v2-accent); filter: drop-shadow(0 0 6px #00f0ff99); transition: transform .25s; }
.sf-chrome-wallet-bal:hover > .icon { transform: translateY(-1px) rotate(-8deg); }
.sf-chrome-wallet-bal > span { display: grid; gap: 4px; }
.sf-chrome-wallet-bal small { font: 600 10px/1 'Noto Sans Thai', sans-serif; color: #a89ebc; transition: color .2s; }
.sf-chrome-wallet-bal:hover small { color: var(--v2-accent); }
.sf-chrome-wallet-bal b { display: flex; align-items: baseline; gap: 3px; font: 700 15px/1 var(--v2-display); letter-spacing: .5px; color: #f2fdff; text-shadow: 0 0 14px #00f0ff59; font-variant-numeric: tabular-nums; transition: text-shadow .2s; }
.sf-chrome-wallet-bal:hover b { text-shadow: 0 0 16px #00f0ffa6; }
.sf-chrome-wallet-bal b i { font: 700 11px/1 'Noto Sans Thai', sans-serif; font-style: normal; color: var(--v2-accent); }
@media (prefers-reduced-motion: reduce) { .sf-chrome-wallet::after { display: none; } }
.sf-chrome-wallet.is-locked, .sf-chrome-wallet.is-locked:hover { --glow-l: transparent; --glow-r: transparent; background: #ffffff2e; }
.sf-chrome-wallet.is-locked::before { background: #120a1f; }
.sf-chrome-wallet.is-locked::after { display: none; }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-bal > .icon { color: var(--v2-muted); filter: none; transform: none; }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-bal small { color: var(--v2-muted); }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-bal b { color: var(--v2-muted); text-shadow: none; }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-bal b i { color: var(--v2-muted); }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-pm, .sf-chrome-wallet.is-locked .sf-chrome-wallet-pm:hover { background: #ffffff14; color: var(--v2-muted); box-shadow: none; }
.sf-chrome-wallet.is-locked .sf-chrome-wallet-pm .icon { filter: none; transform: none; }

/* ---------- Header: account button + menu head, register link, ☰ dot ---------- */
/* Always outlined; hover / open turns it pink (owner 2026-09-28). */
.sf-chrome-acct { gap: 9px; height: 40px; padding: 0 9px 0 4px; font-size: 14px; font-weight: 600; border: 1px solid #00f0ff47; background: #ffffff05; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.sf-chrome-acct:hover, .sf-account[open] > .sf-chrome-acct { color: var(--v2-text); background: #ff006e14; border-color: var(--v2-pink); box-shadow: 0 0 16px #ff006e38; }
.sf-chrome-acct:focus-visible { outline: 2px solid var(--v2-pink); outline-offset: 2px; }
.sf-chrome-acct > span { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.sf-chrome-ava { box-sizing: border-box; width: 32px; height: 32px; padding: 2px; display: grid; place-items: center; object-fit: cover; flex-shrink: 0; border: 1px solid #00f0ff99; background: var(--v2-bg); background-clip: padding-box; box-shadow: 0 0 10px #00f0ff33; font: 800 13px/1 var(--v2-display); color: var(--v2-accent); }
b.sf-chrome-ava { background: linear-gradient(145deg, #00f0ff26, #ff006e26), var(--v2-surface-2); }
.sf-chrome-ava { transition: border-color .2s, box-shadow .2s; }
.sf-chrome-acct:hover .sf-chrome-ava, .sf-account[open] .sf-chrome-ava { border-color: var(--v2-pink); box-shadow: 0 0 14px #ff006e66; }
.sf-chrome-acct .sf-chrome-acct-chev { width: 14px; height: 14px; color: var(--v2-muted); transition: transform .2s, color .2s; }
.sf-chrome-acct:hover .sf-chrome-acct-chev { color: var(--v2-pink); }
.sf-account[open] .sf-chrome-acct-chev { transform: rotate(180deg); color: var(--v2-pink); }
.sf-account-menu { width: 280px; }
.sf-account-menu .saved-count { margin-left: auto; font: 700 11px var(--v2-mono); color: var(--v2-accent); }
.sf-chrome-me { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--v2-line); }
.sf-chrome-me b { display: block; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chrome-me small { display: block; font-size: 11px; color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chrome-me-ava { width: 44px; height: 44px; display: grid; place-items: center; object-fit: cover; flex-shrink: 0; font: 800 18px var(--v2-display); color: var(--v2-accent); background: var(--v2-surface-2); border: 1px solid #00f0ff55; }
.sf-chrome-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sf-chrome-role { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font: 700 10px/1.5 var(--v2-mono); letter-spacing: .5px; color: var(--v2-accent); border: 1px solid #00f0ff44; }
.sf-chrome-role .icon { width: 11px !important; height: 11px !important; }
.sf-chrome-role.is-admin { color: var(--v2-pink); border-color: #ff006e66; }
.sf-account-menu .sf-chrome-out { color: #ff8fb8; }
.sf-chrome-join { flex-shrink: 0; padding: 8px 13px; font-size: 12px; font-weight: 700; color: var(--v2-pink); border: 1px solid #ff006e77; white-space: nowrap; transition: background .2s, color .2s; }
.sf-chrome-join:hover { background: var(--v2-pink); color: #fff; }
.mobile-menu { position: relative; }
.mobile-menu .sf-mm-x { display: none; }
.mobile-menu[aria-expanded="true"] { color: var(--v2-accent); }
.mobile-menu[aria-expanded="true"] .sf-mm-open { display: none; }
.mobile-menu[aria-expanded="true"] .sf-mm-x { display: inline-block; animation: sf-mm-turn .22s ease both; }
@keyframes sf-mm-turn { from { transform: rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Phone search row folded behind the 🔍 (owner 2026-10-06: "ตัวค้นหาควรซ่อนไว้ กดไอคอนค้นหาถึงจะแสดง").
   The header renders it open when the page shows a search (/market?q=). */
.sf-chrome-searchbtn { display: none; }
.sf-chrome-dot { position: absolute; top: 5px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-pink); box-shadow: 0 0 0 2px var(--v2-bg); }

/* ---------- Nav: scam-report pill (pinned right) ---------- */
.navigation > a.sf-chrome-scam { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; color: #ff8fb8; border: 1px solid #ff006e55; background: #ff006e0d; }
.navigation > a.sf-chrome-scam .icon { width: 15px; height: 15px; }
.navigation > a.sf-chrome-scam:hover, .navigation > a.sf-chrome-scam.is-on { color: #fff; background: var(--v2-pink); border-color: var(--v2-pink); }
.navigation > a.sf-chrome-scam::after { display: none; }
.sf-chrome-scam ~ .nav-end { margin-left: 18px; }

/* ---------- /admin/ads frame (partials/ad) ---------- */
.sf-ad-global { padding-top: 18px; }
.sf-ads { display: grid; gap: 14px; margin: 0 0 24px; }
.sf-ads-global { margin: 0; }
.sf-ad { --sf-edge: #ffffff1f; position: relative; display: block; overflow: hidden; background: var(--v2-surface); border: 1px solid var(--sf-edge); transition: border-color .2s, transform .2s; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
a.sf-ad:hover { --sf-edge: #00f0ff66; transform: translateY(-2px); }
/* the picture fills the notches: the cut edges go on top of it */
.sf-ad::after { content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none; color: var(--sf-edge); transition: color .2s; background: var(--sf-diag) right top / 14px 14px no-repeat, var(--sf-diag) left bottom / 14px 14px no-repeat; }
.sf-ad img { display: block; width: 100%; height: auto; }
.sf-ad-tag { position: absolute; top: 8px; right: 18px; padding: 2px 8px; font: 700 10px/1.5 var(--v2-mono); letter-spacing: 1px; color: #d9d0e6; background: #0a0014c7; border: 1px solid #ffffff2a; }

/* ---------- Language chips (footer + sheet; config('storefront.languages')) ---------- */
.sf-chrome-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-chrome-lang { padding: 5px 12px; font-size: 12px; border: 1px solid #ffffff2a; color: #c7bdd6; }
.sf-chrome-lang:hover { color: var(--v2-accent); border-color: #00f0ff66; }
.sf-chrome-lang.is-on { color: var(--v2-bg); background: var(--v2-accent); border-color: var(--v2-accent); }

/* ---------- Footer (partials/chrome/footer; 2026-10-07, owner: "footer ให้สวยกว่านี้ ดูมันสูงไปไหม") ----------
   One row: brand | shop (columns of 5 links) | help | contact card — it was 4 loose
   columns, the 10 shop links stacked ~450px tall. Own sf-foot-* classes: the theme's
   footer-top/-links/-signoff rules (style → colorful → brand → refine → theme-v2)
   no longer apply. A rainbow hairline on top, two soft glows, no fixed background. */
.site-footer.sf-foot { position: relative; border-top: 0; background: radial-gradient(620px 240px at 4% 0%, #00f0ff10, transparent 70%), radial-gradient(560px 260px at 98% 100%, #ff006e0f, transparent 70%), #07000f; }
.sf-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #00f0ff8c 20%, #8b5cf68c 50%, #ff2e888c 80%, transparent); box-shadow: 0 0 12px #00f0ff33; }
.sf-foot-top { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto minmax(250px, 300px); column-gap: clamp(28px, 3.6vw, 80px); align-items: start; padding-block: 34px 30px; }
.sf-foot-brand .brand { display: inline-flex; }
.sf-foot-brand p { max-width: 320px; margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: var(--v2-muted); }
.sf-foot-brand .sf-chrome-langs { margin-top: 14px; }
.sf-foot h3 { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 14px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: 0; color: var(--sf-heading, #fff); }
.sf-foot h3::before { content: ''; width: 3px; height: 14px; background: var(--sf-heading-mark, #ff2e88); box-shadow: 0 0 8px #ff2e8873; }
.sf-foot-col > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; list-style: none; cursor: default; pointer-events: none; }
.sf-foot-col > summary::-webkit-details-marker { display: none; }
.sf-foot-col > summary .icon { display: none; width: 18px; height: 18px; color: var(--v2-muted); transition: transform .2s; }
.sf-foot-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); justify-content: start; column-gap: 34px; }
.sf-foot-list a { display: inline-flex; align-items: center; justify-self: start; padding: 4px 0; font-size: 14px; line-height: 1.5; color: #b9aecb; white-space: nowrap; transition: color .18s; }
/* a short bar grows in front of the hovered link and nudges it right */
.sf-foot-list a::before { content: ''; width: 0; height: 2px; margin-right: 0; background: var(--sf-action, #00f0ff); box-shadow: 0 0 6px #00f0ff99; transition: width .18s, margin-right .18s; }
.sf-foot-list a:focus-visible { color: var(--sf-action, #00f0ff); }
.sf-foot-contact { --cut: 14px; --sf-edge: #00f0ff33; position: relative; display: grid; gap: 12px; padding: 16px 18px 18px; background: linear-gradient(150deg, #00f0ff0d, transparent 55%), #120a1f; border: 1px solid var(--sf-edge); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: border-color .2s; }
/* the clip-path cuts the border off along both diagonals — paint them back (one colour var) */
.sf-foot-contact::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge); transition: color .2s; background: var(--sf-diag) right top / var(--cut) var(--cut) no-repeat, var(--sf-diag) left bottom / var(--cut) var(--cut) no-repeat; }
.sf-foot-contact:hover { --sf-edge: #00f0ff66; }
.sf-foot-contact h3 { margin-bottom: 2px; }
.sf-foot-reach { --tint: var(--v2-accent); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--v2-text); }
.sf-foot-reach.is-line { --tint: #06c755; }
.sf-foot-ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--tint); background: linear-gradient(145deg, color-mix(in srgb, var(--tint) 24%, transparent), color-mix(in srgb, var(--tint) 6%, transparent)); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: background .2s, color .2s; }
.sf-foot-ico .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.sf-foot-reach > span:last-child { display: grid; gap: 3px; min-width: 0; }
.sf-foot-reach small { font-size: 11px; line-height: 1.2; color: var(--v2-muted); }
.sf-foot-reach b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--v2-display); letter-spacing: .5px; font-variant-numeric: tabular-nums; transition: color .2s; }
.sf-foot-reach:focus-visible b { color: var(--tint); }
.sf-foot-hours { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--v2-muted); }
.sf-foot-hours .icon { width: 15px; height: 15px; color: var(--v2-accent); }
.sf-foot-all { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13px; font-weight: 700; color: var(--sf-action, #00f0ff); }
.sf-foot-all .icon { width: 15px; height: 15px; transition: transform .2s; }
.sf-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 15px 18px; border-top: 1px solid #ffffff14; font-size: 12px; line-height: 1.6; color: #8e849d; }
.sf-foot-bottom .sf-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.sf-foot-bottom .sf-legal-links a { display: inline-flex; align-items: center; white-space: nowrap; transition: color .18s; }
.sf-foot-bottom .sf-legal-links a + a::before { content: ''; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: #ffffff38; }
.sf-foot-bottom .sf-legal-links a:focus-visible { color: var(--sf-action, #00f0ff); }
@media (hover: hover) and (pointer: fine) {
  .sf-foot-list a:hover { color: var(--sf-action, #00f0ff); }
  .sf-foot-list a:hover::before { width: 10px; margin-right: 8px; }
  .sf-foot-reach:hover b { color: var(--tint); }
  .sf-foot-reach:hover .sf-foot-ico { color: #0a0014; background: var(--tint); }
  .sf-foot-all:hover { color: var(--sf-action-hover, #fff); }
  .sf-foot-all:hover .icon { transform: translateX(4px); }
  .sf-foot-bottom .sf-legal-links a:hover { color: var(--sf-action, #00f0ff); }
}
/* 901–1180px: brand over the two lists, the contact card on the right of both */
@media (max-width: 1180px) {
  .sf-foot-top { grid-template-columns: auto auto minmax(250px, 1fr); grid-template-areas: "brand brand contact" "shop help contact"; gap: 24px clamp(32px, 5vw, 64px); padding-block: 30px 26px; }
  .sf-foot-brand { grid-area: brand; }
  .sf-foot-contact { grid-area: contact; justify-self: end; width: 100%; max-width: 320px; }
  .sf-foot-col.is-shop { grid-area: shop; }
  .sf-foot-col.is-help { grid-area: help; }
}
/* 681–900px: brand | contact, then shop | help (three across no longer fits an English page) */
@media (max-width: 900px) {
  .sf-foot-top { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); grid-template-areas: "brand contact" "shop help"; column-gap: clamp(24px, 5vw, 48px); }
  .sf-foot-contact { justify-self: stretch; max-width: none; }
}
/* ≤680px: the lists fold into two rows (pkg-chrome.js closes them; summary = the toggle).
   Slim (2026-10-09, owner: "footer รูปแบบมือถือมันดูยาวไป" — 480px at 390 wide): the logo shares its row
   with the language chips (the tagline is dropped here), and the contact card became a third row like
   ร้าน / ช่วยเหลือ — heading on the left, the tappable LINE / phone right after it. */
@media (max-width: 680px) {
  .sf-foot-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 0; padding-block: 16px 4px; }
  .sf-foot-brand, .sf-foot-contact, .sf-foot-col.is-shop, .sf-foot-col.is-help { grid-area: auto; }
  .sf-foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding-bottom: 14px; }
  .sf-foot-brand .sf-chrome-logo { width: 112px; min-height: 0; }
  .sf-foot-brand .sf-chrome-logo img { height: 38px; }
  .sf-foot-brand p { display: none; }
  .sf-foot-brand .sf-chrome-langs { margin-top: 0; }
  .sf-foot-brand .sf-chrome-lang { padding: 5px 10px; }
  .sf-foot-col { border-top: 1px solid #ffffff14; }
  .sf-foot-col.is-help { border-bottom: 1px solid #ffffff14; }
  .sf-foot-col > summary { min-height: 46px; margin: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .sf-foot-col > summary .icon { display: block; }
  .sf-foot-col[open] > summary .icon { transform: rotate(180deg); color: var(--v2-accent); }
  .sf-foot-col > summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
  .sf-foot-list { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 0 0 12px 12px; }
  .sf-foot-list a { min-height: 40px; padding: 0; font-size: 14px; white-space: normal; }
  /* contact = a row: heading | the ways to reach us (stacked, left-aligned: the right edge is where the
     floating back-to-top key parks at the page end — pkg-chrome.js lifts it only if a number runs under it) */
  .sf-foot-contact { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 7px 0; background: none; border: 0; clip-path: none; }
  .sf-foot-contact::after { content: none; }
  .sf-foot-contact h3 { grid-column: 1; grid-row: 1; margin: 0; }
  .sf-foot-reach { grid-column: 2; justify-self: start; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 44px; }
  .sf-foot-ico { width: 34px; height: 34px; }
  .sf-foot-ico .icon { width: 18px; height: 18px; }
  .sf-foot-reach small { font-size: 10px; }
  .sf-foot-reach b { font-size: 15px; }
  .sf-foot-hours, .sf-foot-all { grid-column: 1 / -1; }
  .sf-foot-all { min-height: 36px; }
  .sf-foot-bottom { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 12px 14px; font-size: 11px; }
}

/* ---------- Back to top (the floating .sf-totop beside the scrollbar; pkg-chrome.js) ----------
   Shows once the page is scrolled ~¾ screen down. The notched frame is the
   page's scroll progress (conic --p, written by pkg-chrome.js); hover = a pink
   fill rises from the bottom, the arrow hops, a label slides out on its left.
   --lift (pkg-chrome.js) raises it over a bottom bar it would cover (cart/orders
   checkout bar, deck foot, PDPA card); phones sit it above the tab bar. */
.sf-totop { --p: 0%; --lift: 0px; position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: 24px; z-index: 58; display: block; padding: 0; border: 0; background: none; color: var(--v2-accent); cursor: pointer; filter: drop-shadow(0 6px 14px #000a) drop-shadow(0 0 10px #00f0ff38); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.86); translate: 0 calc(var(--lift) * -1); transition: opacity .2s, transform .3s cubic-bezier(.2, .9, .3, 1.25), translate .25s ease, visibility 0s linear .3s; -webkit-tap-highlight-color: transparent; }
.sf-totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s cubic-bezier(.2, .9, .3, 1.25), translate .25s ease, visibility 0s; }
html.sf-op-covered .sf-totop { visibility: hidden; }
.sf-totop-key { --cut: 12px; --icut: calc(var(--cut) - 1.2px); position: relative; isolation: isolate; display: grid; place-items: center; width: 50px; height: 50px; background: conic-gradient(var(--v2-accent) var(--p), #ffffff30 0); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
/* fill 2px inside the frame (the inner cut keeps the diagonal band 2px too); its pink layer rises on hover */
.sf-totop-key::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(to top, var(--sf-wipe, #ff2e88) 50%, transparent 50%) 0 0 / 100% 200% no-repeat, linear-gradient(160deg, #26163f, #0d0619); clip-path: polygon(0 0, calc(100% - var(--icut)) 0, 100% var(--icut), 100% 100%, var(--icut) 100%, 0 calc(100% - var(--icut))); transition: background-position .22s ease; }
.sf-totop-key .icon { width: 22px; height: 22px; stroke-width: 2.2; transition: color .2s; }
.sf-totop-tip { position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 11px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: #fff; background: #140c22f2; border: 1px solid #ff2e8866; pointer-events: none; opacity: 0; translate: 8px -50%; transition: opacity .18s, translate .18s; }
.sf-totop:focus-visible { outline: none; }
.sf-totop:focus-visible .sf-totop-key { outline: 2px solid #fff; outline-offset: -4px; }
.sf-totop:active .sf-totop-key { scale: .94; }
@keyframes sf-totop-hop { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (hover: hover) and (pointer: fine) {
  .sf-totop:hover .sf-totop-key::before { background-position: 0 100%, 0 0; }
  .sf-totop:hover .sf-totop-key .icon { color: #fff; animation: sf-totop-hop .8s ease-in-out infinite; }
  .sf-totop:hover .sf-totop-tip { opacity: 1; translate: 0 -50%; }
}
.sf-totop:focus-visible .sf-totop-tip { opacity: 1; translate: 0 -50%; }
@media (max-width: 680px) {
  .sf-totop { right: max(12px, env(safe-area-inset-right)); bottom: calc(60px + env(safe-area-inset-bottom) + 14px); }
  .sf-totop-key { --cut: 11px; width: 44px; height: 44px; }
  .sf-totop-key .icon { width: 20px; height: 20px; }
  .sf-totop-tip { display: none; }
  .sf-totop:active .sf-totop-key::before { background-position: 0 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sf-totop { transform: none; } }

/* ---------- Phone tab bar (≤680px) ---------- */
.sf-chrome-tabs { display: none; }

/* ---------- ☰ sheet (<dialog>) ----------
   Full screen: the ☰ only shows ≤680px, where a 420px drawer left a sliver of
   page on its left (owner 2026-09-29). Head + body hold their content to a
   560px column (--sheet-pad), so tiles don't stretch on a wide phone. */
/* Opens UNDER the header (owner 2026-10-06: "กดเมนูแฮมเบอเกอร์ มันรีเฟรชตัวเอง" — the full-screen
   slide-in from the right covered the logo and read as a page change). pkg-chrome.js sets --sheet-top
   = the header's bottom edge; the backdrop is clear, so logo + ☰ (now ×) stay on show, and a tap
   there lands on the backdrop = the dialog = close. The sheet fades, its content drops 10px. */
.sf-chrome-sheet { --sheet-pad: max(16px, calc((100% - 560px) / 2)); position: fixed; inset: var(--sheet-top, 0px) 0 auto; margin: 0; width: 100%; max-width: 100%; height: calc(100dvh - var(--sheet-top, 0px)); max-height: none; padding: 0; border: 0; border-top: 1px solid #00f0ff38; background: var(--v2-surface); color: var(--v2-text); box-shadow: none; }
.sf-chrome-sheet[open] { display: flex; flex-direction: column; animation: sf-chrome-in .18s ease both; }
.sf-chrome-sheet[open] > * { animation: sf-chrome-drop .26s cubic-bezier(.2, .9, .3, 1) both; }
.sf-chrome-sheet.is-leaving { animation: sf-chrome-out .16s ease forwards; }
.sf-chrome-sheet::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }   /* style.css blurs every dialog backdrop */
@keyframes sf-chrome-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-chrome-drop { from { transform: translateY(-10px); } to { transform: none; } }
@keyframes sf-chrome-out { to { opacity: 0; } }
.sf-chrome-sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; padding-top: max(16px, env(safe-area-inset-top)); padding-inline: max(var(--sheet-pad), env(safe-area-inset-left)) max(var(--sheet-pad), env(safe-area-inset-right)); border-bottom: 1px solid var(--v2-line); background: linear-gradient(135deg, #00f0ff10, transparent 60%); }
.sf-chrome-sheet-who { display: grid; gap: 6px; min-width: 0; flex: 1; }
.sf-chrome-sheet-who > b { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chrome-sheet-who > small { font-size: 12px; color: var(--v2-muted); line-height: 1.5; }
.sf-chrome-sheet-who .sf-chrome-wallet { justify-self: start; }
.sf-chrome-sheet-x { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; align-self: flex-start; color: var(--v2-muted); border: 1px solid #ffffff1f; }
.sf-chrome-sheet-x:hover { color: var(--v2-accent); border-color: #00f0ff66; }
/* the header's × is the visible one; this shows only when a keyboard lands on it */
.sf-chrome-sheet-x:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.sf-chrome-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); padding-inline: max(var(--sheet-pad), env(safe-area-inset-left)) max(var(--sheet-pad), env(safe-area-inset-right)); }
.sf-chrome-sheet-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; }
.sf-chrome-sheet-auth .button { justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; font-size: 13px; }
.sf-chrome-sec { padding-top: 6px; }
.sf-chrome-sec h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 13px; font-weight: 700; color: #cfc6de; }
.sf-chrome-sec h3 .icon { width: 15px; height: 15px; color: var(--v2-accent); }
.sf-chrome-sec h3 a { margin-left: auto; font-size: 12px; color: var(--v2-accent); }
.sf-chrome-sec > .sf-chrome-item { padding-inline: 10px; margin-inline: -10px; }
/* One joined panel per section, hairlines between the keys — like the home shortcuts (owner 2026-10-09:
   "รูปแบบปุ่มควรชิดกันไหม"; they were separate boxes 8px apart). A 6-column grid, a key = 2 columns (3 a
   row) or 3 (2 a row ≤380px), and a short last row is shared out so the panel never has a hole: one key
   left = the whole row (icon beside its name), two left of three = half each. */
.sf-chrome-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--v2-line); border-left: 1px solid var(--v2-line); background: var(--v2-surface-2); }
.sf-chrome-tile { --tint: var(--v2-accent); grid-column: span 2; display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 78px; padding: 12px 6px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--v2-text); background: none; border-right: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); transition: background .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.sf-chrome-tile .icon { width: 22px; height: 22px; color: var(--tint); }
.sf-chrome-tile:active { background: color-mix(in srgb, var(--tint) 12%, var(--v2-surface-2)); }
.sf-chrome-tile:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .sf-chrome-tile:hover { background: color-mix(in srgb, var(--tint) 9%, var(--v2-surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 55%, transparent); } }
@media (min-width: 381px) {
  .sf-chrome-tile:nth-last-child(2):nth-child(3n+1), .sf-chrome-tile:last-child:nth-child(3n+2) { grid-column: span 3; }
  .sf-chrome-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .sf-chrome-tile { grid-column: span 3; }
  .sf-chrome-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a key alone on its row reads as a row: icon beside the name, shorter */
@media (min-width: 381px) { .sf-chrome-tile:last-child:nth-child(3n+1) { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; min-height: 58px; } }
@media (max-width: 380px) { .sf-chrome-tile:last-child:nth-child(odd) { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; min-height: 58px; } }
.sf-chrome-tile.is-gacha { --tint: #b794ff; }
.sf-chrome-tile.is-packs { --tint: #ffcf00; }
.sf-chrome-tile.is-auctions, .sf-chrome-tile.is-scam { --tint: #ff5c9d; }
.sf-chrome-tile.is-buybacks, .sf-chrome-tile.is-sell { --tint: #3ee8a0; }
.sf-chrome-more { margin-top: 8px; }
.sf-chrome-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 12px; font-weight: 700; color: var(--v2-accent); }
.sf-chrome-more > summary::-webkit-details-marker { display: none; }
.sf-chrome-more > summary .icon { width: 15px; height: 15px; transition: transform .2s; }
.sf-chrome-more[open] > summary .icon { transform: rotate(180deg); }
.sf-chrome-wide { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; background: var(--v2-surface-2); border: 1px solid #ffffff14; }
.sf-chrome-wide:hover { border-color: #00f0ff66; }
.sf-chrome-wide .icon { width: 24px; height: 24px; color: var(--v2-accent); }
.sf-chrome-wide b { display: block; font-size: 14px; }
.sf-chrome-wide small { display: block; font-size: 12px; color: var(--v2-muted); }
.sf-chrome-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--v2-line); font-size: 12px; color: var(--v2-muted); }
.sf-chrome-legal a:hover { color: var(--v2-accent); }
.sf-chrome-sheet-out { margin-top: 18px; }
.sf-chrome-sheet-out .button { width: 100%; justify-content: center; gap: 10px; min-height: 44px; font-size: 13px; color: #ff8fb8; border-color: #ff006e55; }

/* ---------- Livewire request bar (pkg-chrome.js) ---------- */
.sf-chrome-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--v2-accent), #7c3aed, var(--v2-pink)); box-shadow: 0 0 10px #00f0ff99; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.sf-chrome-progress.is-loading { opacity: 1; transform: scaleX(.82); transition: transform 2.4s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
.sf-chrome-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .3s ease .12s; }

/* ---------- Image lightbox (pkg-chrome.js: [data-sf-lightbox]) ---------- */
.sf-chrome-lb { width: min(900px, calc(100% - 24px)); }
.sf-chrome-lb .sf-dialog-body { display: grid; place-items: center; padding: 12px; background: #07000f; }
.sf-chrome-lb img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }
.sf-chrome-lb .sf-dialog-head button { display: grid; place-items: center; width: 34px; height: 34px; color: var(--v2-muted); }
.sf-chrome-lb .sf-dialog-head button:hover { color: var(--v2-accent); }
.sf-chrome-lb .sf-dialog-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; font: 700 13px 'Noto Sans Thai', sans-serif; }

/* ---------- Breakpoints ---------- */
/* the search box needs the room more than the wallet icon / the name (the menu head shows the name) */
@media (max-width: 1280px) { .header-actions > .sf-chrome-wallet .sf-chrome-wallet-bal > .icon { display: none; } }
@media (max-width: 1180px) { .sf-chrome-join, .sf-chrome-acct > span { display: none; } .sf-chrome-acct { gap: 6px; padding-left: 3px; } }
@media (max-width: 1080px) { .header-actions > .sf-chrome-wallet { display: none; } }   /* the account menu keeps the credit row */
/* language button: a customer's row (bell, chat, wallet) drops the "TH" first, then everyone keeps the flag only */
@media (max-width: 1440px) { .header-actions:has(> .sf-chrome-wallet) .sf-chrome-langbtn > span { display: none; } }
@media (max-width: 1180px) { .sf-chrome-langbtn > span, .sf-chrome-langbtn > .icon { display: none; } .sf-chrome-langbtn { justify-content: center; width: 39px; padding: 0; } }
@media (max-width: 680px) {
  .sf-chrome-test-in { font-size: 12px; gap: 8px; min-height: 30px; }
  .sf-chrome-testchip { padding: 3px 5px; font-size: 9px; letter-spacing: 1px; }
  /* the tab bar carries chat + cart and the sheet carries the wallet */
  .header-actions > .sf-chrome-msg, .header-actions > .cart-toggle, .header-actions > .sf-chrome-wallet, .header-actions > .sf-chrome-langpop { display: none; }
  .sf-chrome-searchbtn { display: inline-grid; }
  .site-header:not(.is-search) .header-main > .search-form { display: none; }
  .site-header.is-search .sf-chrome-searchbtn { color: var(--v2-accent); background: #00f0ff14; }
  .site-header.is-search .header-main > .search-form { animation: sf-hdr-search-in .2s ease both; }
  .sf-chrome-notif .sf-chrome-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; max-height: calc(100dvh - 150px); }
  .sf-ad-global { padding-top: 12px; }

  .sf-chrome-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #0a0014f5; border-top: 1px solid #00f0ff38; box-shadow: 0 -10px 30px #0008; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  body.sf { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sf-chrome-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; line-height: 1.2; color: #a99fbb; -webkit-tap-highlight-color: transparent; }
  .sf-chrome-tab .icon { width: 22px; height: 22px; }
  .sf-chrome-tab.is-on { color: var(--v2-accent); }
  .sf-chrome-tab.is-on::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--v2-accent); box-shadow: 0 0 10px var(--v2-accent); }
  .sf-chrome-tab-home { align-content: end; padding-bottom: 7px; }
  .sf-chrome-tab-home.is-on::before { display: none; }
  .sf-chrome-tab-disc { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -24px; color: var(--v2-bg); background: var(--v2-accent); box-shadow: 0 0 22px #00f0ff66, 0 0 0 4px var(--v2-bg); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
  .sf-chrome-tab-home .sf-chrome-tab-disc .icon { width: 24px; height: 24px; stroke-width: 1.8; }
  .sf-chrome-tab-home:not(.is-on) .sf-chrome-tab-disc { background: #1f1436; color: var(--v2-accent); box-shadow: 0 0 0 1px #00f0ff66, 0 0 0 4px var(--v2-bg); }
  .sf-chrome-tab-n, .sf-chrome-tab .cart-count { position: absolute; top: 6px; left: calc(50% + 5px); right: auto; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; font: 700 10px/1 var(--v2-mono); color: #fff; background: var(--v2-pink); border-radius: 9px; box-shadow: 0 0 0 2px var(--v2-bg); }
  .sf-chrome-tab-dot { position: absolute; top: 9px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--v2-pink); box-shadow: 0 0 0 2px var(--v2-bg); }

  /* Fixed bottom bars of other packages ride above the tab bar. */
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .sf-auth-pdpa, .sf-orders-bar { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sf-decks-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .sf-chrome-sheet-auth { grid-template-columns: 1fr; }
}
@keyframes sf-hdr-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sf-chrome-sheet[open], .sf-chrome-sheet[open] > *, .sf-chrome-sheet.is-leaving, .mobile-menu .sf-mm-x, .site-header.is-search .search-form { animation: none !important; }
}

/* ---------- Toast: the "done" look (2026-10-09) ----------
   storefront.js notify(message, 'ok') / sf-toast kind 'ok' / a success flash: green edge + a tick, a little longer. */
.toast.is-ok { padding-left: 50px; color: #e6fff4; border-color: #2ee59d; background: linear-gradient(120deg, #0f2a26, #1d1a33); box-shadow: 0 8px 30px #0007, 0 0 24px #2ee59d26; }
.toast.is-ok::before { content: ''; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: #2ee59d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%2304121a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- Toast: the "heads-up" look (2026-10-09) ----------
   notify(message, 'warn') / a session('warning') flash: amber edge + "!" — e.g. สั่งสินค้า with too little
   credit (ShippingRequestController::walletShortNote). Stays up longer (storefront.js, by length). */
.toast.is-warn { padding-left: 50px; color: #fff3cf; border-color: #ffcf00; background: linear-gradient(120deg, #2e2410, #1d1a33); box-shadow: 0 8px 30px #0007, 0 0 24px #ffcf0026; }
.toast.is-warn::before { content: '!'; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  display: grid; place-items: center; background: #ffcf00; color: #1a1300; font: 800 14px/1 var(--v2-mono); }

/* ---------- Where an error shows (storefront.js hitNotice, 2026-10-10) ----------
   The toast's error, found on the page: a yellow ring that rings out three times. Motion off = a still ring. */
.sf-notice-hit { outline: 2px solid #ffcf00; outline-offset: 3px; animation: sf-notice-hit .8s ease-out 3; }
@keyframes sf-notice-hit { 0% { box-shadow: 0 0 0 0 #ffcf0080; } 100% { box-shadow: 0 0 0 12px #ffcf0000; } }
@media (prefers-reduced-motion: reduce) { .sf-notice-hit { animation: none; } }
.effects-off .sf-notice-hit { animation: none; }

/* ---------- "You are here" (2026-10-10, owner: "ตอนนี้ฉันอยู่เมนูไหน เมนูนั้นต้องเด่นขึ้น") ----------
   The current main-nav item: white text on a cyan-tinted notched slab + a 3px glowing bar (it was cyan text
   + a hairline, the same colour as hover). The header icon / account chip of the page you are on: cyan
   frame, tint and a bar along its foot (header.blade $here, account-menu $acctHere). Desktop nav only — the
   phone keeps its tab bar's own active state. */
@media (min-width: 681px) {
  /* The slab + bar reach 12px past the item; .navigation scrolls (overflow-x: auto), so the first item's
     left side was cut off at the text (owner: "เมนูหน้าหลัก เป็นแบบนี้"). It is a .container (width + margin
     auto): content-box + 12px padding = 24px wider, still centred, so the items stay where they were. */
  .navigation { box-sizing: content-box; padding-inline: 12px; }
  .navigation > a.nav-active { color: #fff; font-weight: 800; isolation: isolate; }
  .navigation > a.nav-active::before { content: ''; position: absolute; z-index: -1; inset: 6px -12px 1px; color: #00f0ff40; background: var(--sf-diag) right top / 8px 8px no-repeat border-box, linear-gradient(180deg, #00f0ff08, #00f0ff2e); border: 1px solid currentColor; border-bottom: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
  .navigation > a.nav-active::after { height: 3px; inset-inline: -12px; bottom: 0; background: var(--sf-action); box-shadow: 0 0 12px #00f0ffb3, 0 0 2px #00f0ff; }
}
.header-actions .icon-button.is-current { color: var(--sf-action); background: linear-gradient(180deg, #00f0ff0d, #00f0ff33); box-shadow: inset 0 0 0 1px #00f0ff99, inset 0 -3px 0 var(--sf-action), 0 0 16px #00f0ff4d; }
.header-actions .sf-chrome-acct.is-current { border-color: #00f0ff99; box-shadow: inset 0 -3px 0 var(--sf-action), 0 0 14px #00f0ff33; }