/* The light tone of a shop's own site — hand-written, after the generated shop-light.css (ai_test/scripts/shop-light-gen.py).
   Loaded by storefront/layouts/app only when the shop's background is light (ShopLook::tone). Here: what a colour swap
   can't decide — the platform strip + shop footer, buttons in the shop's colour, form fields, the preview bar — and every
   theme's light look (owner 2026-10-10 picked "ทุกธีมรองรับสีอ่อน"). Selectors carry [data-shop-tone="light"] so they win
   over pkg-shop-themes.css. */

body.sf-shopmode[data-shop-tone="light"] { color: var(--v2-text); }
body.sf-shopmode[data-shop-tone="light"]::before { opacity: .45; }
body.sf-shopmode[data-shop-tone="light"] :is(h1, h2, h3, h4) { color: var(--sf-heading); }

/* buttons in the shop's colour, its own ink on top */
body.sf-shopmode[data-shop-tone="light"] :is(.button-primary, .add-cart, .add-cart:hover) { background: var(--shop-c); color: var(--shop-c-ink); box-shadow: none; }
body.sf-shopmode[data-shop-tone="light"] .button-outline { color: var(--shop-c); border-color: color-mix(in srgb, var(--shop-c) 55%, transparent); }
body.sf-shopmode[data-shop-tone="light"] :is(.text-link, .sf-tabs a.is-on, .sf-tabs a[aria-current]) { color: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"] .sf-tabs a.is-on { border-bottom-color: var(--shop-c); }

/* form fields: white, dark text */
body.sf-shopmode[data-shop-tone="light"] :is(.sf-input, .sf-search-inline input, select, textarea, input[type="search"], input[type="text"], input[type="number"]) {
  background: #fff; color: var(--v2-text); border-color: var(--sf-border-strong);
}
body.sf-shopmode[data-shop-tone="light"] :is(input, textarea)::placeholder { color: #8a8398; }
body.sf-shopmode[data-shop-tone="light"] .sf-search-inline { background: #fff; border-color: var(--sf-border-strong); }
body.sf-shopmode[data-shop-tone="light"] .sf-search-inline button { color: var(--shop-c); }

/* the owner's preview bar */
body.sf-shopmode[data-shop-tone="light"] .sf-shop-previewbar { background: #fff8db; border-color: #d4a106; color: #6b4e00; }
body.sf-shopmode[data-shop-tone="light"] .sf-shop-previewbar b { color: #3d2c00; }

/* the platform strip: light, a hairline under it */
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip { background: color-mix(in srgb, var(--v2-bg) 92%, #fff); border-bottom-color: #0000001a; color: var(--v2-muted); }
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip-home:hover { color: var(--v2-text); }
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip-txt em { color: var(--v2-text); }
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip :is(.icon-button, .account-button) { color: var(--v2-text); border-color: #0000001f; background: transparent; }
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip :is(.icon-button, .account-button):hover { color: var(--shop-c); background: #0000000a; }
body.sf-shopmode[data-shop-tone="light"] .sf-shopstrip .cart-count { color: var(--shop-c-ink); background: var(--shop-c); }

/* the shop's header on item / cart pages */
body.sf-shopmode[data-shop-tone="light"] .sf-shophead { border-bottom-color: #0000001a; }
body.sf-shopmode[data-shop-tone="light"] .sf-shophead-id { color: var(--sf-heading); }
body.sf-shopmode[data-shop-tone="light"] :is(.sf-shophead-logo, .sf-shopfoot-logo) { box-shadow: 0 0 0 1px #0000001a; }

/* the shop's footer */
body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot { background: color-mix(in srgb, var(--v2-surface) 70%, transparent); border-top-color: color-mix(in srgb, var(--shop-c) 35%, transparent); color: var(--v2-muted); }
body.sf-shopmode[data-shop-tone="light"] :is(.sf-shopfoot-id, .sf-shopfoot-col h3) { color: var(--sf-heading); }
body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot-col a:hover, body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot-bottom a:hover { color: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot-site { border-color: #00000024; }
body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot-bottom { border-top-color: #00000014; }
body.sf-shopmode[data-shop-tone="light"] .sf-shopfoot-id small { color: #0f8a55; }

/* ================================================================== themes on a light page =========== */
/* filled tab pills: the shop colour's own ink on them (the generic rule above colours text with the shop colour) */
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="minimal"], [data-shop-theme="manga"], [data-shop-theme="esport"], [data-shop-theme="retro"]) .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="minimal"], [data-shop-theme="manga"], [data-shop-theme="esport"], [data-shop-theme="retro"]) .sf-tabs a.is-on :is(.icon, b) { color: var(--shop-c-ink); }

/* minimal — white boxes, soft shadow instead of lines */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="minimal"] .sf-panel { border-color: #0000000f; box-shadow: 0 1px 2px #0000000d, 0 8px 24px -12px #0000001f; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="minimal"] .product-card:hover { filter: drop-shadow(0 14px 20px #00000014); }

/* neon arcade — dark scan lines, coloured glow, outline buttons that fill on hover */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="neon"]::before {
  opacity: 1;
  background: repeating-linear-gradient(0deg, #0000000a 0 1px, transparent 1px 4px),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, var(--shop-accent) 10%, transparent), transparent 60%);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="neon"] :is(h1, h2, h3) { text-shadow: 0 0 10px color-mix(in srgb, var(--shop-accent) 28%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="neon"] .sf-panel { box-shadow: 0 0 12px color-mix(in srgb, var(--shop-accent) 30%, transparent), inset 0 0 0 3px var(--v2-bg), inset 0 0 0 4px color-mix(in srgb, var(--shop-accent) 35%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="neon"] :is(.add-cart, .button-primary) { background: #fff; color: var(--shop-c); border: 1.5px solid var(--shop-c); box-shadow: 0 0 10px color-mix(in srgb, var(--shop-accent) 30%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="neon"] :is(.add-cart, .button-primary):hover { background: var(--shop-c); color: var(--shop-c-ink); }

/* luxury — ivory boxes, gold hairlines, gold outline buttons */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="luxury"]::before { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, var(--shop-accent) 8%, transparent), transparent 70%); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="luxury"] .sf-panel { background-color: var(--v2-surface-2); border-color: color-mix(in srgb, var(--shop-c) 45%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="luxury"] .product-image { background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--shop-c) 8%, transparent), transparent 65%), var(--v2-surface-2); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="luxury"] :is(.add-cart, .button-primary) { background: transparent; color: var(--shop-c); border: 1px solid var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="luxury"] :is(.add-cart, .button-primary):hover { background: var(--shop-c); color: var(--shop-c-ink); }

/* manga — black ink on white paper: thick black lines, hard black shadows, grey halftone */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] { --ink: #14101d; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"]::before { opacity: 1; background: radial-gradient(#00000017 1px, transparent 1.4px) 0 0 / 9px 9px; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .sf-panel { border: 2.5px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .product-card { filter: drop-shadow(5px 5px 0 var(--ink)); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .product-card:hover { filter: drop-shadow(8px 8px 0 var(--ink)); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] :is(.product-image, .product-body) { border: 2.5px solid var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .product-body { border-top: 0; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] :is(.add-cart, .button-primary, .button-outline) { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .sf-tabs a { background: #fff; color: var(--ink); border-color: var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .sf-tabs a.is-on { background: var(--shop-c); box-shadow: 3px 3px 0 var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] .sf-shops-sec-head h2 { color: var(--shop-c-ink); box-shadow: 4px 4px 0 var(--ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="manga"] :is(.sf-shopfoot-logo, .sf-shophead-logo, .sf-shops-hero-logo > img) { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* esport — light speed stripes, slanted pills */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="esport"]::before {
  opacity: 1;
  background: repeating-linear-gradient(115deg, #0000000a 0 2px, transparent 2px 16px),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--shop-accent) 12%, transparent), transparent 60%);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="esport"] .sf-tabs a { background: #0000000a; }

/* retro — warm paper */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="retro"]::before {
  opacity: 1;
  background: radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--shop-accent) 10%, transparent), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, #0000000a 0 1px, transparent 1px 5px);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="retro"] .sf-panel { box-shadow: 0 8px 20px #0000001a; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="retro"] .product-image { background: radial-gradient(ellipse at 50% 70%, #a0602010, transparent 65%), var(--v2-surface-2); }

/* galaxy — dawn sky: pastel nebula, dark star dots, frosted white glass, ink-to-colour headings */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"]::before {
  opacity: 1;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #1d172966, transparent 60%), radial-gradient(1px 1px at 33% 68%, #1d172955, transparent 60%),
    radial-gradient(1px 1px at 58% 14%, #1d172944, transparent 60%), radial-gradient(1.5px 1.5px at 76% 46%, #1d172966, transparent 60%),
    radial-gradient(1px 1px at 88% 84%, #1d172944, transparent 60%),
    radial-gradient(1000px 600px at 85% 5%, color-mix(in srgb, var(--shop-accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px at 0% 75%, #8a7bff22, transparent 60%);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] :is(h1, h2, h3) { background: linear-gradient(100deg, var(--sf-heading) 35%, var(--shop-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] .sf-panel { background-color: rgba(255, 255, 255, .62); border-color: #ffffffb3; box-shadow: 0 10px 40px -14px color-mix(in srgb, var(--shop-accent) 45%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] .product-body { background: rgba(255, 255, 255, .7); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] .product-image { background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--shop-accent) 14%, transparent), transparent 70%), rgba(255, 255, 255, .55); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] :is(.add-cart, .button-primary) { background: linear-gradient(100deg, var(--shop-c), #d6339a); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] .sf-shops-tabbar { background: rgba(255, 255, 255, .6); border-color: #ffffffb3; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="galaxy"] .sf-tabs a.is-on { background: #fff; color: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="esport"] .sf-tabs a.is-on { background: var(--shop-c); }

/* ================================================================== the 8 themes of 2026-10-10 evening, light ====== */
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="pixel"], [data-shop-theme="candy"]) .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="pixel"], [data-shop-theme="candy"]) .sf-tabs a.is-on :is(.icon, b) { color: var(--shop-c-ink); }

/* holo — pastel rainbow on white */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="holo"]::before { opacity: 1; background: radial-gradient(900px 600px at 100% 0%, #ff5bd81a, transparent 60%), radial-gradient(900px 700px at 0% 90%, #4dc3ff1a, transparent 60%); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="holo"] :is(h1, h2, h3) { background: linear-gradient(115deg, #c8179a, #b07a00 25%, #0f8a55 50%, #1a6fd1 75%, #6b3fd4); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="holo"] .sf-panel { background: linear-gradient(var(--v2-surface-2), var(--v2-surface-2)) padding-box, var(--holo) border-box; box-shadow: 0 10px 28px -14px #b388ff66; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="holo"] :is(.add-cart, .button-primary) { background: var(--holo); color: #140a22; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="holo"] .sf-tabs a.is-on { color: var(--sf-heading); }

/* fire — a warm cream page, darker embers */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"]::before { opacity: 1; background: radial-gradient(1200px 520px at 50% 115%, color-mix(in srgb, var(--shop-c) 18%, transparent), transparent 65%); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"] :is(h1, h2, h3) { text-shadow: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"] .sf-panel { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--shop-c) 45%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"] .product-image { background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--shop-c) 14%, transparent), transparent 70%), var(--v2-surface-2); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"] :is(.add-cart, .button-primary) { background: linear-gradient(180deg, #ff9a3d, var(--shop-c) 55%, #c0261a); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fire"] .sf-tabs a.is-on { text-shadow: none; }

/* ice — frosted white, blue specks */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] { --rime: #1a6fd12e; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"]::before {
  opacity: 1;
  background: radial-gradient(1.5px 1.5px at 15% 25%, #1a6fd155, transparent 60%), radial-gradient(1px 1px at 40% 70%, #1a6fd144, transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 35%, #1a6fd155, transparent 60%), radial-gradient(1000px 600px at 50% -10%, color-mix(in srgb, var(--shop-c) 12%, transparent), transparent 65%);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] :is(h1, h2, h3) { color: var(--sf-heading); text-shadow: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] .sf-panel { background-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 12px 28px -16px #1a6fd133; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] :is(.add-cart, .button-primary) { background: linear-gradient(180deg, #5b9bff, var(--shop-c)); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] .sf-shops-tabbar { background: rgba(255, 255, 255, .7); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ice"] .sf-tabs a.is-on { color: var(--shop-c); }

/* pixel — dark grid lines and pixel edges on a light page */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pixel"] { --pxl: #14101d55; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pixel"]::before { opacity: 1; background: linear-gradient(#0000000a 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, #0000000a 1px, transparent 1px) 0 0 / 16px 16px; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pixel"] :is(h1, h2, h3) { text-shadow: 2px 2px 0 #00000026; }

/* fantasy — parchment: ivory boxes, gilt lines, ink headings */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fantasy"]::before { opacity: 1; background: radial-gradient(1200px 700px at 50% -20%, color-mix(in srgb, var(--shop-c) 12%, transparent), transparent 60%), repeating-radial-gradient(circle at 50% 50%, #5a3a0008 0 1px, transparent 1px 6px); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fantasy"] { --gilt: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fantasy"] :is(h1, h2, h3) { color: var(--sf-heading); text-shadow: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fantasy"] .sf-panel { background-color: var(--v2-surface-2); box-shadow: inset 0 0 0 3px var(--v2-surface-2), inset 0 0 0 4px color-mix(in srgb, var(--gilt) 45%, transparent), 0 10px 24px -14px #5a3a0040; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="fantasy"] :is(.add-cart, .button-primary) { background: linear-gradient(180deg, #ffe9a8, #e2b13c 55%, #a8740c); color: #2b1a00; }

/* sakura — white with pink petals */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="sakura"] { --petal: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="sakura"]::before {
  opacity: 1;
  background:
    radial-gradient(7px 4px at 14% 22%, color-mix(in srgb, var(--shop-c) 22%, transparent), transparent 70%),
    radial-gradient(5px 3px at 38% 64%, color-mix(in srgb, var(--shop-c) 18%, transparent), transparent 70%),
    radial-gradient(6px 4px at 72% 30%, color-mix(in srgb, var(--shop-c) 22%, transparent), transparent 70%),
    radial-gradient(5px 3px at 86% 78%, color-mix(in srgb, var(--shop-c) 16%, transparent), transparent 70%);
}
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="sakura"] .sf-panel { box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--shop-c) 45%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="sakura"] :is(.add-cart, .button-primary) { background: var(--shop-c); color: var(--shop-c-ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="sakura"] .sf-tabs a.is-on { background: color-mix(in srgb, var(--shop-c) 14%, transparent); color: var(--shop-c); }

/* candy — the stripes lighter, the buttons in the shop colour */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="candy"]::before { opacity: 1; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--shop-c) 7%, transparent) 0 14px, transparent 14px 28px); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="candy"] { --sweet: color-mix(in srgb, var(--shop-c) 30%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="candy"] :is(.add-cart, .button-primary) { background: linear-gradient(90deg, var(--shop-c), #d6339a); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--shop-c) 60%, #000); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="candy"] .sf-shops-sec-head h2 { color: var(--sf-heading); }

/* mono — black ink on white */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mono"] { --mono: #111114; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mono"]::before { background: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mono"] :is(.add-cart, .button-primary) { background: var(--mono); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mono"] .sf-tabs a.is-on { color: var(--mono); }

/* ================================================================== the 12 added 2026-10-10 evening, on a light page ===
   (popart / paper / jungle / pastel open here; the rest when the seller picks a light background) */
/* filled tab pills keep their own ink (the generic rule above colours a lit tab with the shop colour) */
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="samurai"], [data-shop-theme="jungle"]) .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="samurai"], [data-shop-theme="jungle"]) .sf-tabs a.is-on :is(.icon, b) { color: var(--shop-c-ink); }
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-theme="samurai"], [data-shop-theme="jungle"]) .sf-tabs a.is-on { background: var(--shop-c); border-color: var(--shop-c); }

/* synth — dawn: the chrome turns violet-to-pink so it reads on white */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="synth"]::before { opacity: .9; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="synth"] :is(h1, h2, h3) { background: linear-gradient(180deg, #4b1fb8 10%, var(--shop-c) 55%, #b0177a 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="synth"] { --syn2: #0097a7; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="synth"] :is(.add-cart, .button-primary) { background: linear-gradient(90deg, var(--shop-c), #6b3cff); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="synth"] .sf-tabs a.is-on { color: var(--sf-heading); text-shadow: none; }

/* mecha — a light metal plate: dark dot grid, brackets in the readable shop colour */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mecha"] { --hud: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mecha"]::before { opacity: 1; background: radial-gradient(#0000001f 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(180deg, color-mix(in srgb, var(--shop-c) 10%, transparent), transparent 30%); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mecha"] .sf-panel { background-color: color-mix(in srgb, var(--v2-surface-2) 88%, #8a9bb0); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mecha"] .product-image { background: radial-gradient(#00000014 1px, transparent 1.5px) 0 0 / 12px 12px, var(--v2-surface-2); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="mecha"] .sf-tabs a.is-on { color: var(--shop-c); }

/* street — a light wall: dark specks, black frames, the tape keeps its beige */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"] { --wall: #15120c; --tape: #f3e6bf; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"]::before { opacity: 1;
  background: radial-gradient(1px 1px at 20% 30%, #0000002a, transparent), radial-gradient(1px 1px at 70% 60%, #00000022, transparent), radial-gradient(1.5px 1.5px at 45% 85%, #0000001e, transparent),
    radial-gradient(700px 420px at 92% 8%, color-mix(in srgb, var(--shop-c) 14%, transparent), transparent 65%);
  background-size: 60px 60px, 70px 70px, 90px 90px, 100% 100%; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"] .sf-shops-sec-head h2 { box-shadow: 0 1px 3px #0000002e; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"] :is(.add-cart, .button-primary) { background: var(--shop-c); color: var(--shop-c-ink); box-shadow: 3px 3px 0 #15120c; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"] .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="street"] .sf-tabs a.is-on :is(.icon, b) { color: var(--tape-ink); }

/* popart — its v2 rules (pkg-shop-themes.css, :not(#sf-pop)) carry the light look; here only the dots + the name's shadow */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="popart"]::before { opacity: 1; background: radial-gradient(color-mix(in srgb, var(--shop-c) 16%, transparent) 2px, transparent 2.6px) 0 0 / 16px 16px; }

/* paper — a cream notebook page (its own page): white sheets, grey pencil lines, yellow tape */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] { --margin: #e5484d66; --tape: #ffe680cc; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"]::before { opacity: 1; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] .sf-panel { background-color: #fffdf7; border-color: #0000002e; box-shadow: 0 3px 0 #00000012, 0 12px 24px -16px #0000002e; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] .product-card { --frame: #00000029; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] :is(.product-image, .product-body) { background-color: #fffdf7; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] .product-card:hover { filter: drop-shadow(0 10px 14px #00000017); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] :is(.add-cart, .button-primary) { background: var(--shop-c); color: var(--shop-c-ink); border: 2px solid color-mix(in srgb, var(--shop-c) 70%, #000); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="paper"] .sf-shops-tabbar { border-bottom-color: #00000026; }

/* samurai — rice paper: ink-black lines, the red sun and bars kept */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="samurai"]::before { opacity: .45; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="samurai"] .sf-panel { border-color: #0000001f; border-left-color: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="samurai"] .sf-shops-sec-head h2 .icon { color: var(--shop-c-ink); background: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="samurai"] .product-card { --frame: #00000024; }

/* royal — ivory and lacquer red: deep red headings, the gold darkened to read */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] { --gilt: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"]::before { opacity: .8; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] :is(h1, h2, h3) { color: #7a0f28; text-shadow: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] .sf-panel { box-shadow: inset 0 0 0 4px var(--v2-surface-2), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 50%, transparent), 0 14px 28px -18px #0000004d; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] :is(.add-cart, .button-primary) { background: linear-gradient(180deg, #a3173a, #7a0f28); color: #fff3c4; border: 1.5px solid var(--gilt); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] :is(.add-cart, .button-primary):hover { background: #7a0f28; color: #fff3c4; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="royal"] .product-card:hover { filter: drop-shadow(0 10px 16px #0000002e); }

/* steampunk — parchment: brown ink, the brass kept */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] :is(h1, h2, h3) { color: #5a3a10; text-shadow: none; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] .product-image { background: radial-gradient(ellipse at 50% 60%, #c8902f14, transparent 65%), var(--v2-surface-2); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] :is(.add-cart, .button-primary) { background: var(--brass-btn); color: #2a1600; border: 1px solid #4a300c; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] .sf-tabs a.is-on :is(.icon, b) { color: #2a1600; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="steampunk"] .product-card:hover { filter: drop-shadow(0 10px 16px #0000002e); }

/* ocean — shallow water: the bubbles and light in the shop colour */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ocean"] { --sea: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ocean"]::before { opacity: 1;
  background: radial-gradient(circle at 20% 70%, transparent 0 6px, color-mix(in srgb, var(--shop-c) 22%, transparent) 6px 7.5px, transparent 8px),
    radial-gradient(circle at 70% 30%, transparent 0 4px, color-mix(in srgb, var(--shop-c) 18%, transparent) 4px 5px, transparent 5.5px),
    linear-gradient(180deg, color-mix(in srgb, var(--shop-c) 12%, transparent), transparent 50%);
  background-size: 260px 300px, 190px 220px, 100% 100%; background-repeat: repeat, repeat, no-repeat; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ocean"] .sf-panel { background-color: color-mix(in srgb, var(--v2-surface-2) 90%, var(--shop-c)); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--shop-c) 50%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ocean"] :is(.add-cart, .button-primary) { background: linear-gradient(180deg, color-mix(in srgb, var(--shop-c) 75%, #fff), var(--shop-c)); color: var(--shop-c-ink); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="ocean"] .sf-shops-tabbar { background: color-mix(in srgb, var(--v2-surface-2) 80%, transparent); }

/* jungle — a fresh mint page (its own page): leaf-cut boxes, deep green ink */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="jungle"] { --leaf: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="jungle"]::before { opacity: 1; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="jungle"] .sf-panel { box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--shop-c) 55%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="jungle"] .product-card:hover { filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--shop-c) 25%, transparent)); }

/* aurora — a pale night sky: ink-to-colour headings, white glass */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] { --aur2: #7c4dff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"]::before { opacity: 1; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] :is(h1, h2, h3) { background: linear-gradient(100deg, var(--sf-heading) 30%, var(--shop-c) 70%, var(--aur2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] .sf-panel { background-color: rgba(255, 255, 255, .65); border-color: #ffffffb3; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--shop-c) 60%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--shop-c) 45%, transparent); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] :is(.add-cart, .button-primary) { background: linear-gradient(90deg, var(--shop-c), var(--aur2)); color: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] .sf-tabs a.is-on { color: var(--sf-heading); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="aurora"] .sf-shops-tabbar { background: rgba(255, 255, 255, .6); border-bottom-color: #0000000f; }

/* pastel — a pale page (its own): white boxes edged in soft colours, every product tinted its own */
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"]::before { opacity: 1; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .product-body { background: color-mix(in srgb, var(--pc) 22%, #fff); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .product-image { background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--pc) 40%, transparent), transparent 70%), #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] :is(.add-cart, .button-primary) { background: linear-gradient(90deg, var(--p1), var(--p2)); color: #2b2140; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .sf-tabs a { background: #fff; }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .sf-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .sf-tabs a.is-on :is(.icon, b) { color: var(--sf-heading); }
body.sf-shopmode[data-shop-tone="light"][data-shop-theme="pastel"] .sf-tabs a.is-on { background: color-mix(in srgb, var(--p5) 55%, #fff); }

/* ================================================================== shop menu styles, light page ===== */
body.sf-shopmode[data-shop-tone="light"]:not([data-shop-nav="theme"]):not(#sf-nav) .sf-shops-tabs a.is-on { color: var(--shop-c); }
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-nav="pills"], [data-shop-nav="boxed"], [data-shop-nav="side"]):not(#sf-nav) .sf-shops-tabs a.is-on,
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-nav="pills"], [data-shop-nav="boxed"], [data-shop-nav="side"]):not(#sf-nav) .sf-shops-tabs a.is-on :is(.icon, b) { color: var(--shop-c-ink); }
body.sf-shopmode[data-shop-tone="light"]:is([data-shop-nav="pills"], [data-shop-nav="side"]):not(#sf-nav) .sf-shops-tabs a:not(.is-on) { background: #fff; }   /* :not(.is-on) — 2026-10-12: it painted the open tab white too (white text on white) */
body.sf-shopmode[data-shop-tone="light"][data-shop-nav="boxed"]:not(#sf-nav) .sf-shops-tabs { background: #fff; }
@media (min-width: 1025px) {
  body.sf-shopmode[data-shop-tone="light"][data-shop-nav="side"]:not(#sf-nav) .sf-shops-main > .sf-shops-tabbar { background: var(--v2-surface-2); }
  body.sf-shopmode[data-shop-tone="light"][data-shop-nav="side"]:not(#sf-nav) .sf-shops-main > .sf-shops-tabbar .sf-shops-tabs a { background: transparent; }
  body.sf-shopmode[data-shop-tone="light"][data-shop-nav="side"]:not(#sf-nav) .sf-shops-main > .sf-shops-tabbar .sf-shops-tabs a.is-on,
  body.sf-shopmode[data-shop-tone="light"][data-shop-nav="side"]:not(#sf-nav) .sf-shops-main > .sf-shops-tabbar .sf-shops-tabs a.is-on :is(.icon, b) { color: var(--shop-c); }
}

/* the chosen game chip / filter chip on a light page (2026-10-12): the light sheet's muted .filter-tab / .sf-chip colour out-ranked
   palette.css's "on" ink, so the open chip read muted-on-colour ("ทั้งหมด" on /shop/…/products was red on red) */
body.sf-shopmode[data-shop-tone="light"] :is(.filter-tab.active, .filter-tab.active:hover, .sf-chip.is-on, .sf-chip.is-on:hover) { color: var(--shop-c-ink, #fff); }