/* Premium storefront (shop setting design = premium). Loaded after shop.css and scoped to body[data-design=premium],
   so a shop on the classic design never sees these rules. Calm black/deep-red look: flat surfaces, no glow, one accent,
   an 8px spacing rhythm, readable Thai type, a tab bar on phones. Dark by default, light theme supported. */
/* X2NZ RUBY TECH tokens (same palette as x2nz.com): graphite #090B10 / card #131720 in dark, pearl #F7F8FA in light.
   Surfaces: paper < card < card-2. Status colours always come with text and an icon, never colour alone.
   Motion: 150–250ms, switched off under prefers-reduced-motion. */
body[data-design=premium]{
  --p-red:var(--accent);
  --p-gap:16px;
  --r:14px;--r-sm:10px;--r-lg:20px;
  --t-fast:150ms;--t:200ms;--t-slow:250ms;--ease:cubic-bezier(.2,.7,.2,1);
  --sh-1:0 1px 2px #0000001f;--sh-2:0 12px 32px -16px #0000008c;
  --warn:#eab308;--warn-bg:#eab3081f;
  font-size:15px;line-height:1.6;
}
:root:not([data-theme=light]) body[data-design=premium]{--paper:#090b10;--card:#131720;--card-2:#1a1f2a;--field:#0e1118;--line:#232936;--line-2:#323a49;--ink:#f3f4f7;--mute:#a3aab8;
  --ok:#22c55e;--ok-bg:#22c55e1f;--bad:#f87171;--bad-bg:#ef44441f}
:root[data-theme=light] body[data-design=premium]{--paper:#f7f8fa;--card:#fff;--card-2:#f1f3f6;--field:#fff;--line:#e3e6eb;--line-2:#d2d7df;--ink:#0f1219;--mute:#5a6272;
  --ok:#15803d;--ok-bg:#dcfce7;--bad:#b91c1c;--bad-bg:#fee2e2;--warn:#a16207;--warn-bg:#fef9c3;--sh-2:0 12px 32px -18px #0f12193d}
@media (prefers-reduced-motion:reduce){body[data-design=premium] *{transition-duration:0s!important;animation-duration:0s!important}}
body[data-design=premium] h1{font-size:clamp(24px,3.2vw,34px);line-height:1.25;font-weight:800;letter-spacing:-.3px}
body[data-design=premium] h2{font-size:clamp(18px,2.2vw,22px);line-height:1.3;font-weight:700}
body[data-design=premium] h3{font-size:15px;line-height:1.4;font-weight:700}
body[data-design=premium] .sub{color:var(--mute)}
body[data-design=premium] .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* No glow, no gradients on buttons: solid accent, clear focus. */
body[data-design=premium] .btn,body[data-design=premium] .btn:not(.ghost):not(.dark),body[data-design=premium] .btn.auth-go{background:var(--p-red)!important;box-shadow:none!important;border-radius:10px;font-size:14px;padding:11px 18px}
body[data-design=premium] .btn.ghost{background:var(--card)!important;color:var(--ink);border:1.5px solid var(--line-2)}
body[data-design=premium] .btn:hover{transform:none;filter:brightness(1.1)}
body[data-design=premium] .btn.sm{padding:8px 14px;font-size:13.5px}
body[data-design=premium] :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,#fff);outline-offset:2px}
body[data-design=premium] .brand-mark{box-shadow:none;transform:none}
body[data-design=premium] .top-bar{background:var(--p-red)}
body[data-design=premium] .top-bar .marquee>div{animation:none!important;justify-content:center}
body[data-design=premium] .top-bar .marquee span:not(:first-child){display:none}
body[data-design=premium] .panel{border-radius:14px}
body[data-design=premium] .hv-layer{display:none!important}

/* Section headings */
body[data-design=premium] .p-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--p-gap)}
body[data-design=premium] .p-head .count{color:var(--mute);font-size:13.5px}
body[data-design=premium] main>.wrap{padding-top:24px;padding-bottom:24px}

/* Hero: the offer, two actions, three facts */
.p-hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-top:40px!important}
.p-hero .lead{margin-top:10px;color:var(--mute);font-size:16px;max-width:620px}
.p-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.p-facts{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mute);font-size:13.5px}
.p-facts li{display:flex;align-items:center;gap:7px}
.p-facts .ico{width:16px;height:16px;color:var(--accent-text)}
.p-hero-mark .hero-logo{width:120px;height:120px;border-radius:24px;font-size:40px;box-shadow:none}
.p-hero-mark img.hero-logo{object-fit:contain;background:none}
.p-note{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px}
.p-note .ico{color:var(--accent-text);flex:none}

/* Categories */
.p-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.p-cat{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-cat:hover{border-color:var(--line-2)}
.p-cat img,.p-cat-ph{grid-row:span 2;width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--card-2)}
.p-cat-ph{display:grid;place-items:center;font-weight:800;color:var(--accent-text)}
.p-cat b{font-size:14.5px}.p-cat small{color:var(--mute);font-size:12.5px}

/* Product cards: square picture, name, price, stock, one action */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--p-gap)}
.pcard{display:flex;flex-direction:column;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.pcard:hover{border-color:var(--line-2)}
.pcard-media{position:relative;display:block;aspect-ratio:1;background:var(--card-2)}
.pcard-media .thumb{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.pcard.is-out .pcard-media .thumb{filter:grayscale(.85) brightness(.7)}
.pbadges{position:absolute;left:10px;top:10px;right:10px;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px;pointer-events:none}
.pbadges .pb{white-space:nowrap;flex:none;line-height:1.4}
.pbadges.inline{position:static;margin:4px 0}
.pb{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#000c;color:#fff}
.pb svg,.ps svg,.p-facts svg{width:14px;height:14px;flex:none}
.pb.pb-pick{background:#111c;border:1px solid #fff3}
.pb.pb-best{background:var(--p-red)}
.pb.pb-off{background:#fff;color:#111}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;flex:1}
.pcat{font-size:12.5px;color:var(--mute)}
.pname h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.prow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
.pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.pp small{width:100%;font-size:12px;color:var(--mute)}
.pp strong{font-size:18px;font-weight:800;color:var(--ink)}
.pp s{font-size:13px;color:var(--mute)}
.ps{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--mute);white-space:nowrap}
.ps .ico{width:13px;height:13px}
/* Stock / status pills, one shape for every state */
.ps.ps-ok,.ps.ps-low,.ps.ps-out{padding:3px 9px;border-radius:999px;font-weight:600}
.ps.ps-ok{color:var(--ok);background:var(--ok-bg)}.ps.ps-low{color:#f5a524;background:#f5a5241f}.ps.ps-out{color:var(--bad);background:var(--bad-bg)}
:root[data-theme=light] .ps.ps-low{color:#9a5b00;background:#fff1d6}
.p-details .desc{border:0;padding:0;line-height:1.75}
.pcard .btn.full{margin-top:4px}

/* How to buy, FAQ, contact */
.p-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.p-steps li{display:flex;gap:12px;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-steps li>b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text)}
.p-steps p{color:var(--mute);font-size:13.5px;margin-top:2px}
.p-faq details{border-bottom:1px solid var(--line)}
.p-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-weight:700;cursor:pointer;list-style:none}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary .ico{transition:transform .2s;transform:rotate(90deg);color:var(--mute)}
.p-faq details[open] summary .ico{transform:rotate(-90deg)}
.p-faq details p{padding:0 0 16px;color:var(--mute)}
.p-contact{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.p-contact p{color:var(--mute);margin-top:4px;max-width:560px}
.p-contact-links{display:flex;flex-wrap:wrap;gap:10px}

/* Store: tools, chips, results, empty state */
.p-tools{display:flex;align-items:stretch;gap:10px;margin-bottom:14px}
.p-tools .views{align-items:center;align-self:center;flex:none;height:46px}
.p-tools .views button{height:36px}
.p-tools .search{flex:1}
.p-select select{height:100%;min-height:46px;padding:0 12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);color:var(--ink)}
body[data-design=premium] .chips{margin-bottom:var(--p-gap)}
.p-rows{display:grid;gap:10px}
.p-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-row-media .thumb{width:72px;height:72px;border-radius:10px}
.p-row.is-out .thumb{filter:grayscale(.85)}
.p-row-buy{display:grid;justify-items:end;gap:8px}
.p-empty{text-align:center;padding:40px 20px;border-radius:14px;background:var(--card);border:1px dashed var(--line-2)}
.p-empty b{display:block;font-size:16px}
.p-empty p{color:var(--mute);margin:6px 0 16px}
.p-empty.big{padding:56px 24px}
.p-empty .p-contact-links{justify-content:center}

/* Product page */
.p-product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:12px}
.p-gallery{position:relative;border-radius:16px;overflow:hidden;background:var(--card-2);align-self:start}
.p-gallery .product-img{width:100%;aspect-ratio:1;object-fit:cover}
.p-info{display:flex;flex-direction:column;gap:12px}
.p-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.p-sum .pp strong{font-size:26px}
.p-buy{padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-buy .plan small{color:var(--mute)}
.p-details{display:grid;gap:14px;margin-top:28px;max-width:820px}
.p-details section{padding:18px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-details h2{font-size:17px;margin-bottom:8px}
.p-details .desc{color:var(--mute);white-space:pre-line}

/* History: tabs, orders, credit statement */
.p-tabs{display:flex;gap:4px;padding:4px;margin-bottom:var(--p-gap);border-radius:12px;background:var(--card);border:1px solid var(--line)}
.p-tabs button{flex:1;padding:9px;border-radius:9px;color:var(--mute);font-weight:700}
.p-tabs button.on{background:var(--card-2);color:var(--ink)}
.p-order{padding:16px;margin-bottom:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-order-top{display:flex;justify-content:space-between;gap:12px}
.p-order-top small{display:block;color:var(--mute);font-size:12.5px}
.p-order-amt{display:grid;justify-items:end;gap:4px;text-align:right}
.p-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--p-gap)}
.p-totals>div{padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.p-totals small{display:block;color:var(--mute);font-size:12px}
.p-totals b{font-size:16px}
.p-ledger{border-radius:14px;background:var(--card);border:1px solid var(--line)}
.p-led{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.p-led:last-child{border-bottom:0}
.p-led small{display:block;color:var(--mute);font-size:12.5px}
.p-led-amt{text-align:right}
.p-led-amt .plus{color:var(--ok)}.p-led-amt .minus{color:var(--ink)}

/* Phone: header without the menu strip, a tab bar at the bottom with the open page marked */
.p-tabbar{display:none}
@media (max-width:760px){
  body[data-design=premium] .bar .nav{display:none}
  /* One header row: logo + name, theme switch and account; sign-up lives in the tab bar's sign-in page. */
  body[data-design=premium] .bar{flex-wrap:nowrap;gap:10px;padding:10px 16px}
  body[data-design=premium] .bar .brand{min-width:0;flex:1}
  body[data-design=premium] .bar .brand span:last-child{max-width:none}
  body[data-design=premium] .bar .who{flex:none;gap:6px}
  body[data-design=premium] .bar .who .btn.ghost span{display:none}
  body[data-design=premium] .bar .who a.btn[href="#register"]{display:none}
  body[data-design=premium] .buy-row .product-price{font-size:24px}
  body[data-design=premium] .p-tabbar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  body[data-design=premium] .p-tabbar a{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:10px;font-size:11.5px;color:var(--mute);min-height:48px}
  body[data-design=premium] .p-tabbar a .ico{width:22px;height:22px}
  body[data-design=premium] .p-tabbar a.on{color:var(--accent-text);background:var(--accent-soft);font-weight:700}
  body[data-design=premium] #shop{padding-bottom:76px}
  body[data-design=premium] #recent{bottom:84px}
  .p-hero{grid-template-columns:1fr;padding-top:24px!important}
  .p-hero-mark{display:none}
  .p-steps{grid-template-columns:1fr 1fr}
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pcard-body{padding:10px}
  .pp strong{font-size:16px}
  .prow{flex-direction:column;align-items:flex-start;gap:4px}
  .p-product-grid{grid-template-columns:1fr;gap:18px}
  .p-tools{flex-wrap:wrap}.p-tools .search{flex-basis:100%}
  .p-totals{grid-template-columns:1fr 1fr}
  .p-row{grid-template-columns:56px 1fr;}.p-row-media .thumb{width:56px;height:56px}.p-row-buy{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;align-items:center}
}
@media (max-width:380px){.p-steps{grid-template-columns:1fr}.p-cats{grid-template-columns:1fr}}

/* Hero with the shop's own banner beside the text (falls back to the logo mark when there are no slides). */
body[data-design=premium] .p-hero:has(.p-hero-banner){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
body[data-design=premium] .p-hero-banner .slides{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin:0}
body[data-design=premium] .p-hero-banner .banner{display:block;width:100%;height:auto;aspect-ratio:16/5;object-fit:cover}
/* Product page: what is about to be bought, in one place. */
body[data-design=premium] .p-buysum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0;padding:12px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
body[data-design=premium] .p-buysum div{min-width:0}
body[data-design=premium] .p-buysum dt{font-size:12px;color:var(--mute)}
body[data-design=premium] .p-buysum dd{margin:2px 0 0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  body[data-design=premium] .p-hero:has(.p-hero-banner){grid-template-columns:minmax(0,1fr)}
  body[data-design=premium] .p-hero-banner{order:-1}
  body[data-design=premium] .p-buysum{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The demo/notice bar does not scroll in premium, so it wraps instead of being cut off on phones. */
body[data-design=premium] .top-bar .marquee>div{width:auto}
body[data-design=premium] .top-bar .marquee span{white-space:normal;text-align:center;padding:0 16px;line-height:1.5}

/* ---------- v5 Ruby Tech storefront details ---------- */
/* Header search (premium only) */
body[data-design=premium] .p-search{flex:1;max-width:320px;margin:0 8px}
body[data-design=premium] .p-search label{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;background:var(--field);border:1px solid var(--line);transition:border-color var(--t-fast)}
body[data-design=premium] .p-search label:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body[data-design=premium] .p-search .ico{width:16px;height:16px;color:var(--mute);flex:none}
body[data-design=premium] .p-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px}
@media (max-width:1499px){body[data-design=premium] .p-search{display:none}}
body[data-design=premium] .p-tools .search{position:relative}
body[data-design=premium] .p-clear{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--mute);flex:none}
body[data-design=premium] .p-clear:hover{background:var(--card-2);color:var(--ink)}
body[data-design=premium] .p-clear .ico{width:16px;height:16px}
/* Demo / notice bar: small and readable, never louder than the products. */
body[data-design=premium] .top-bar{background:var(--card-2)!important;color:var(--ink);border-bottom:1px solid var(--line);padding:6px 0}
body[data-design=premium] .top-bar .marquee span{font-size:12.5px;font-weight:600;color:var(--mute)}
/* Cards: the same height, a gentle lift on hover (transform only, the layout never moves). */
body[data-design=premium] .pcard{transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
@media (hover:hover){body[data-design=premium] .pcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--sh-2)}}
body[data-design=premium] .pcard-media{position:relative}
body[data-design=premium] .p-soldout{position:absolute;inset:auto 10px 10px auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:#090b10d9;color:#fff;font-size:13px;font-weight:700}
body[data-design=premium] .p-soldout .ico{width:14px;height:14px}
body[data-design=premium] .pcard.is-out .pcard-media img{filter:grayscale(.7) brightness(.75)}
body[data-design=premium] .pp small{display:block;font-size:12px;color:var(--mute)}
body[data-design=premium] .ps .ico{width:14px;height:14px;margin-right:2px;vertical-align:-2px}
body[data-design=premium] .p-cat img,body[data-design=premium] .p-cat .p-cat-ph{aspect-ratio:1;object-fit:cover}
/* Product page */
body[data-design=premium] .p-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--mute);margin-bottom:16px}
body[data-design=premium] .p-crumbs a:hover{color:var(--ink);text-decoration:underline}
body[data-design=premium] .p-crumbs .ico{width:14px;height:14px;opacity:.6}
body[data-design=premium] .p-crumbs [aria-current]{color:var(--ink);font-weight:600;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-design=premium] .plans .plan{transition:border-color var(--t-fast),background var(--t-fast)}
body[data-design=premium] .p-buybar{display:none}
@media (max-width:860px){
  body[data-design=premium][data-page=product] .p-tabbar{display:none}
  body[data-design=premium][data-page=product] main{padding-bottom:84px}
  body[data-design=premium] .p-buybar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px #0006}
  body[data-design=premium] .p-buybar small{display:block;font-size:12px;color:var(--mute)}
  body[data-design=premium] .p-buybar b{font-size:18px}
  body[data-design=premium] .p-buybar .btn{min-height:46px;padding:0 22px}
}
/* Order history as a timeline */
body[data-design=premium] .p-order{position:relative;margin-left:18px}
body[data-design=premium] .p-order:before{content:"";position:absolute;left:-18px;top:0;bottom:-12px;width:2px;background:var(--line)}
body[data-design=premium] .p-order:after{content:"";position:absolute;left:-23px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--ok)}
body[data-design=premium] .p-order:last-child:before{bottom:50%}
/* Skeleton that matches the real rows */
body[data-design=premium] .p-skel{display:grid;gap:10px;margin-top:12px}
body[data-design=premium] .p-skel i{display:block;height:64px;border-radius:12px;background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%);background-size:200% 100%;animation:pskel 1.2s linear infinite}
@keyframes pskel{to{background-position:-200% 0}}
/* Preview mode (framed by the back office or x2nz.com) */
:root[data-preview="1"] body[data-design=premium] .p-buybar{display:none}

:root[data-preview="1"] [class*=recent],:root[data-preview="1"] [id*=recent]{display:none!important}

/* ================= v6 "true black" premium storefront =================
   Tokens: page #050505 · section #0B0B0D · card #111113 · hover #19191C · line rgba(255,255,255,.08) · text #F5F5F7 / #A1A1AA.
   Brand = the shop's own colour (--accent, set in the back office); the deep tone is derived from it. Light theme is its own palette. */
:root:not([data-theme=light]) body[data-design=premium]{--paper:#050505;--paper-2:#0b0b0d;--card:#111113;--card-2:#19191c;--field:#0b0b0d;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --ink:#f5f5f7;--mute:#a1a1aa;--accent-text:color-mix(in srgb,var(--accent) 82%,#fff);--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);--sh-2:0 18px 40px -22px #000}
:root[data-theme=light] body[data-design=premium]{--paper:#fafafa;--paper-2:#f4f4f5;--card:#fff;--card-2:#f4f4f5;--field:#fff;--line:rgba(9,9,11,.09);--line-2:rgba(9,9,11,.16);
  --ink:#09090b;--mute:#52525b;--accent-text:color-mix(in srgb,var(--accent) 78%,#000);--accent-soft:color-mix(in srgb,var(--accent) 10%,#fff);--sh-2:0 18px 40px -24px #09090b40}
body[data-design=premium]{--accent-deep:color-mix(in srgb,var(--accent) 72%,#000);--wrap:1220px;background:var(--paper)}
body[data-design=premium] .wrap{max-width:calc(var(--wrap) + 40px);padding:20px 20px}
body[data-design=premium] h1{font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.4px}
body[data-design=premium] h2{font-size:clamp(20px,2.2vw,26px);font-weight:800}
body[data-design=premium] .p-sec{padding-top:24px;padding-bottom:24px;margin-top:8px}
/* Buttons: one bright primary, dark secondary with a thin line. */
body[data-design=premium] .btn,body[data-design=premium] .btn:not(.ghost):not(.dark){background:var(--accent)!important;color:#fff;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:700;min-height:42px;padding:0 18px;box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent) 80%,transparent)!important}
body[data-design=premium] .btn:hover{filter:brightness(1.08);transform:none}
body[data-design=premium] .btn.ghost{background:var(--card)!important;color:var(--ink);border:1px solid var(--line-2);box-shadow:none!important}
body[data-design=premium] .btn.ghost:hover{background:var(--card-2)!important}
body[data-design=premium] .btn.sm{min-height:36px;padding:0 14px;font-size:13px}
body[data-design=premium] .btn.full{min-height:44px}
/* Demo notice: a thin readable strip above the bar. */
body[data-design=premium] .top-bar{background:var(--paper-2)!important;border-bottom:1px solid var(--line);padding:5px 0}
body[data-design=premium] .top-bar .marquee span{font-size:12px;color:var(--mute);font-weight:500}
/* Navbar: full width, black, thin bottom line, 68px. Logo left, menu centre, actions right. */
body[data-design=premium] .bar,body[data-design=premium] .bar.nav-capsule{position:sticky;top:0;z-index:20;width:100%;margin:0;min-height:68px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
  padding:0 max(20px,calc((100vw - var(--wrap)) / 2));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);gap:12px}
body[data-design=premium] .top-bar+.bar{margin-top:0}
body[data-design=premium] .brand{font-size:17px;font-weight:800}
body[data-design=premium] .brand .brand-mark,body[data-design=premium] .brand img{box-shadow:0 0 0 1px var(--line),0 6px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
body[data-design=premium] .nav{margin:0 auto;gap:2px}
body[data-design=premium] .nav a{height:40px;padding:0 12px;border-radius:10px;font-size:14px;color:var(--mute);background:none}
body[data-design=premium] .nav a:hover{color:var(--ink);background:var(--card)}
body[data-design=premium] .nav a.on{color:var(--ink);background:var(--card);box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}
body[data-design=premium] .nav a.on .ico{color:var(--accent-text)}
body[data-design=premium] .who{margin-left:0;gap:8px}
body[data-design=premium] .bar .icon-btn{width:40px;height:40px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
body[data-design=premium] .bar .contact{height:40px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
body[data-design=premium] .bar .btn.sm{height:40px;min-height:40px}
body[data-design=premium] .user-btn{height:40px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
body[data-design=premium] .user-text em{color:var(--accent-text);font-style:normal}
/* Top: intro row, then the stage (banner ~2/3 + side panel). */
body[data-design=premium] .p-top{padding-top:32px}
body[data-design=premium] .p-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
body[data-design=premium] .p-intro .lead{margin-top:8px;color:var(--mute);font-size:16px;max-width:640px}
body[data-design=premium] .p-intro .p-cta{margin:0}
body[data-design=premium] .p-stage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:stretch}
body[data-design=premium] .p-stage.full,body[data-design=premium] .p-stage.only-side{grid-template-columns:minmax(0,1fr)}
body[data-design=premium] .p-facts{margin-top:16px}
/* Slider */
body[data-design=premium] .ps-slider{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);aspect-ratio:3.2/1;min-height:220px;isolation:isolate}
body[data-design=premium] .p-stage:not(.full) .ps-slider{aspect-ratio:auto;min-height:340px}
body[data-design=premium] .ps-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
body[data-design=premium] .ps-slide.on{opacity:1;visibility:visible;transition:opacity var(--t-slow) var(--ease)}
body[data-design=premium] .ps-slide picture,body[data-design=premium] .ps-slide img,body[data-design=premium] .ps-link{display:block;width:100%;height:100%}
body[data-design=premium] .ps-slide img{object-fit:cover}
body[data-design=premium] .ps-words{position:absolute;left:0;bottom:0;right:0;padding:56px 28px 26px;display:grid;gap:6px;background:linear-gradient(0deg,#050505e6 0%,#050505a6 45%,transparent 100%);color:#fff}
body[data-design=premium] .ps-words b{font-size:clamp(20px,2.4vw,30px);font-weight:800;line-height:1.2;text-shadow:0 2px 12px #0008}
body[data-design=premium] .ps-words span{font-size:15px;color:#e4e4e7;max-width:560px}
body[data-design=premium] .ps-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#050505b3;border:1px solid #ffffff2e;color:#fff;transition:background var(--t-fast)}
body[data-design=premium] .ps-nav:hover{background:var(--accent)}
body[data-design=premium] .ps-nav .ico{width:18px;height:18px}
body[data-design=premium] .ps-nav.prev{left:14px}body[data-design=premium] .ps-nav.next{right:14px}
body[data-design=premium] .ps-dots{position:absolute;right:20px;bottom:18px;z-index:2;display:flex;gap:6px}
body[data-design=premium] .ps-dots button{width:10px;height:10px;border-radius:999px;background:#ffffff66;border:0;padding:0;transition:width var(--t),background var(--t)}
body[data-design=premium] .ps-dots button.on{width:28px;background:#fff}
body[data-design=premium] .ps-dots button::before{content:"";position:absolute;inset:-10px}
body[data-design=premium] .ps-dots button{position:relative}
/* Side panel */
body[data-design=premium] .ps-side{display:grid;gap:12px;align-content:start}
body[data-design=premium] .ps-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
body[data-design=premium] .ps-box-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
body[data-design=premium] .ps-box-h b{font-size:15px}
body[data-design=premium] .ps-box-h .link{font-size:13px}
body[data-design=premium] .ps-cat{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;transition:background var(--t-fast)}
body[data-design=premium] .ps-cat:hover{background:var(--card-2)}
body[data-design=premium] .ps-cat img,body[data-design=premium] .ps-cat .p-cat-ph{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
body[data-design=premium] .ps-cat span{flex:1;min-width:0}
body[data-design=premium] .ps-cat b{display:block;font-size:14px}
body[data-design=premium] .ps-cat small{color:var(--mute);font-size:12.5px}
body[data-design=premium] .ps-cat>.ico{width:16px;height:16px;color:var(--mute)}
body[data-design=premium] .ps-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
body[data-design=premium] .ps-steps li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;counter-increment:s}
body[data-design=premium] .ps-steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-weight:800;font-size:13px}
body[data-design=premium] .ps-steps b{font-size:14px}
body[data-design=premium] .ps-steps small{color:var(--mute);font-size:12.5px}
/* Categories: large picture tiles that fill the row evenly. */
body[data-design=premium] .p-cats2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
body[data-design=premium] .p-cat2{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);aspect-ratio:16/9;transition:transform var(--t) var(--ease),border-color var(--t)}
body[data-design=premium] .p-cat2 img,body[data-design=premium] .p-cat2 .p-cat-ph{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;font-size:40px}
body[data-design=premium] .p-cat2-t{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;background:linear-gradient(0deg,#050505e0,transparent);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
body[data-design=premium] .p-cat2-t b{font-size:18px;font-weight:800}
body[data-design=premium] .p-cat2-t small{color:#e4e4e7;font-size:13px;white-space:nowrap}
@media (hover:hover){body[data-design=premium] .p-cat2:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}}
/* Product cards: 4 columns, picture first, two-line name, price leads, stock secondary, button always at the bottom. */
body[data-design=premium] .p-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body[data-design=premium] .pcard{background:var(--card);border:1px solid var(--line);border-radius:16px}
body[data-design=premium] .pcard-media{background:var(--paper-2);border-bottom:1px solid var(--line)}
body[data-design=premium] .pcard-body{gap:6px;padding:14px}
body[data-design=premium] .pcat{font-size:12px;color:var(--mute)}
body[data-design=premium] .pname h3{font-size:15px;line-height:1.4;min-height:2.8em}
body[data-design=premium] .pc-price{margin-top:auto;display:grid;gap:0}
body[data-design=premium] .pc-price small{font-size:12px;color:var(--mute)}
body[data-design=premium] .pc-price div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
body[data-design=premium] .pc-price strong{font-size:20px;font-weight:800;color:var(--ink)}
body[data-design=premium] .pc-price s{font-size:13px;color:var(--mute)}
body[data-design=premium] .pc-price em{font-style:normal;font-size:12px;font-weight:700;color:var(--accent-text)}
body[data-design=premium] .pc-stock .ps{font-size:12.5px;padding:0;background:none!important;border:0!important}
body[data-design=premium] .pcard .btn.full{margin-top:6px}
body[data-design=premium] .pbadges .pb{background:#050505cc;color:#fff;border:1px solid #ffffff26;backdrop-filter:blur(6px)}
body[data-design=premium] .pb-pick .ico{color:var(--accent-text)}
@media (hover:hover){body[data-design=premium] .pcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--sh-2)}}
/* Other blocks pick up the same surfaces */
body[data-design=premium] .p-steps li,body[data-design=premium] .p-contact,body[data-design=premium] .p-faq details,body[data-design=premium] .p-buy,body[data-design=premium] .p-details>section{background:var(--card);border-color:var(--line)}
body[data-design=premium] footer,body[data-design=premium] .foot{background:var(--paper-2);border-top:1px solid var(--line)}
@media (max-width:1100px){body[data-design=premium] .p-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-design=premium] .nav a span{display:none}}
@media (max-width:980px){
  body[data-design=premium] .p-stage{grid-template-columns:minmax(0,1fr)}
  body[data-design=premium] .p-stage:not(.full) .ps-slider{aspect-ratio:2/1;min-height:0}
  body[data-design=premium] .ps-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
}
@media (max-width:760px){
  body[data-design=premium] .bar{min-height:60px}
  body[data-design=premium] .p-top{padding-top:20px}
  body[data-design=premium] h1{font-size:clamp(26px,7.6vw,32px)}
  body[data-design=premium] .p-intro{display:block}
  body[data-design=premium] .p-intro .p-cta{margin-top:14px}
  body[data-design=premium] .ps-slider,body[data-design=premium] .p-stage:not(.full) .ps-slider{aspect-ratio:16/10;border-radius:14px}
  body[data-design=premium] .ps-words{padding:40px 16px 16px}
  body[data-design=premium] .ps-words b{font-size:20px}
  body[data-design=premium] .ps-words span{font-size:13.5px}
  body[data-design=premium] .ps-nav{width:36px;height:36px;top:auto;bottom:12px;transform:none}
  body[data-design=premium] .ps-nav.prev{left:auto;right:56px}body[data-design=premium] .ps-nav.next{right:12px}
  body[data-design=premium] .ps-dots{left:16px;right:auto;bottom:24px}
  body[data-design=premium] .ps-slider:has(.ps-words) .ps-dots{top:14px;bottom:auto}
  body[data-design=premium] .p-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-design=premium] .pcard-body{padding:10px}
  body[data-design=premium] .pname h3{font-size:14px}
  body[data-design=premium] .pc-price strong{font-size:17px}
  body[data-design=premium] .p-cats2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-design=premium] .p-cat2-t{padding:20px 10px 10px;flex-direction:column;align-items:flex-start;gap:0}
  body[data-design=premium] .p-cat2-t b{font-size:15px}
  body[data-design=premium] .p-sec{padding-top:16px;padding-bottom:16px}
}
@media (max-width:359px){body[data-design=premium] .p-grid{grid-template-columns:minmax(0,1fr)}}
/* v6.1: the banner keeps 3.2:1 beside a compact category panel of the same height. */
body[data-design=premium] .p-stage:not(.full) .ps-slider{aspect-ratio:3.2/1;min-height:0;align-self:start}
body[data-design=premium] .p-stage:not(.full){align-items:start}
body[data-design=premium] .ps-side .ps-box{padding:12px;height:100%}
body[data-design=premium] .ps-box-h{margin-bottom:4px}
body[data-design=premium] .ps-cat{padding:6px 8px}
body[data-design=premium] .ps-cat img,body[data-design=premium] .ps-cat .p-cat-ph{width:38px;height:38px}
body[data-design=premium] .ps-note{display:flex;align-items:center;gap:6px;margin:6px 8px 0;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .ps-note .ico{width:14px;height:14px;color:var(--accent-text);flex:none}
@media (min-width:981px){body[data-design=premium] .p-stage:not(.full){grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}}
@media (max-width:980px){body[data-design=premium] .p-stage:not(.full) .ps-slider{aspect-ratio:2.4/1}}
@media (max-width:760px){body[data-design=premium] .p-stage:not(.full) .ps-slider,body[data-design=premium] .ps-slider{aspect-ratio:16/10}}
@media (max-width:760px){
  body[data-design=premium] .ps-side{display:none}
  body[data-design=premium] .p-stage{grid-template-columns:minmax(0,1fr)}
  body[data-design=premium] .ps-slider:has(.ps-words) .ps-nav{top:12px;bottom:auto}
  body[data-design=premium] .ps-slider:has(.ps-words) .ps-dots{top:26px;left:16px;bottom:auto}
  body[data-design=premium] .p-cats2{grid-template-columns:minmax(0,1fr);gap:8px}
  body[data-design=premium] .p-cat2{aspect-ratio:auto;display:flex;align-items:center;gap:12px;padding:8px}
  body[data-design=premium] .p-cat2 img,body[data-design=premium] .p-cat2 .p-cat-ph{width:88px;height:56px;border-radius:10px;flex:none}
  body[data-design=premium] .p-cat2-t{position:static;background:none;padding:0;color:var(--ink);flex:1;flex-direction:row;align-items:center}
  body[data-design=premium] .p-cat2-t small{color:var(--mute)}
}
body[data-design=premium] .p-cats2{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
@media (max-width:1100px){body[data-design=premium] .bar .contact span{display:none}body[data-design=premium] .bar .contact{width:40px;padding:0;justify-content:center}}
@media (max-width:980px){body[data-design=premium] .ps-side{display:none}}
@media (max-width:760px){body[data-design=premium] .p-cats2{grid-template-columns:minmax(0,1fr)}}

body[data-design=premium] .p-product h1{font-size:clamp(24px,2.6vw,34px)}
body[data-design=premium] .p-gallery{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
body[data-design=premium] .p-gallery .pbadges{top:12px;left:12px}

/* ================= v7: Web2U-Plus-like flow in x2nz's own look ================= */
/* Welcome page */
body[data-design=premium][data-page=welcome]{background:#050505}
body[data-design=premium] .pw{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:48px 20px 72px;isolation:isolate}
body[data-design=premium] .pw-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 420px at 50% -60px,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),radial-gradient(600px 300px at 50% 115%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
body[data-design=premium] .pw-glow::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000,transparent 75%)}
body[data-design=premium] .pw-in{max-width:760px;text-align:center;display:grid;justify-items:center;gap:18px}
body[data-design=premium] .pw-mark{width:96px;height:96px;border-radius:24px;object-fit:contain;display:grid;place-items:center;font-size:34px;font-weight:800;background:var(--card);box-shadow:0 0 0 1px var(--line),0 20px 60px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
body[data-design=premium] .pw-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:14px;color:var(--ink)}
body[data-design=premium] .pw-badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
body[data-design=premium] .pw h1{font-size:clamp(32px,5.4vw,60px);line-height:1.15;font-weight:800;margin:0}
body[data-design=premium] .pw h1 em{font-style:normal;color:var(--accent-text);text-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent)}
body[data-design=premium] .pw p{color:var(--mute);font-size:16px;max-width:560px;margin:0}
body[data-design=premium] .pw-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
body[data-design=premium] .pw-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--ink)}
body[data-design=premium] .pw-chips .ico{width:15px;height:15px;color:var(--accent-text)}
body[data-design=premium] .pw-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
body[data-design=premium] .pw-cta .btn{min-height:48px;padding:0 24px;font-size:15px}
body[data-design=premium] .pw-foot{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:13px;color:var(--mute)}
/* Home intro: words and the two main actions together on the left, the logo on the right */
body[data-design=premium] .p-intro2{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}
body[data-design=premium] .p-intro2 .lead{color:var(--mute);margin-top:6px;font-size:16px}
body[data-design=premium] .p-intro2 .p-cta{margin-top:18px}
body[data-design=premium] .pi-mark{width:84px;height:84px;border-radius:20px;object-fit:contain;display:grid;place-items:center;font-size:30px;font-weight:800;background:var(--card);box-shadow:0 0 0 1px var(--line),0 16px 50px -12px color-mix(in srgb,var(--accent) 65%,transparent)}
/* Row: banner + notice | real numbers | community or contact */
body[data-design=premium] .p-row3{display:grid;gap:14px;align-items:stretch;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr)}
body[data-design=premium] .p-row3.c1{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
body[data-design=premium] .p-row3.c0{grid-template-columns:minmax(0,1fr)}
body[data-design=premium] .pr-main{display:grid;gap:10px;align-content:start;min-width:0}
body[data-design=premium] .pr-main .ps-slider{aspect-ratio:3.2/1;min-height:0}
body[data-design=premium] .pr-notice{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13.5px}
body[data-design=premium] .pr-notice span{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap;color:var(--accent-text)}
body[data-design=premium] .pr-notice .ico{width:16px;height:16px}
body[data-design=premium] .pr-notice p{margin:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-design=premium] .pr-stats{display:grid;gap:10px;align-content:start}
body[data-design=premium] .pr-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body[data-design=premium] .pr-stat{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;gap:2px}
body[data-design=premium] .pr-stat>span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);margin-bottom:4px}
body[data-design=premium] .pr-stat .ico{width:16px;height:16px}
body[data-design=premium] .pr-stat small{font-size:12px;color:var(--mute)}
body[data-design=premium] .pr-stat b{font-size:20px;font-weight:800}
body[data-design=premium] .pr-stat em{font-style:normal;font-size:12px;font-weight:400;color:var(--mute)}
body[data-design=premium] .pr-best{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;gap:8px}
body[data-design=premium] .pr-best>small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .pr-best .ico{width:14px;height:14px;color:var(--accent-text)}
body[data-design=premium] .pr-best a{display:flex;gap:10px;align-items:center;min-width:0}
body[data-design=premium] .pr-best .mini-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none}
body[data-design=premium] .pr-best b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-design=premium] .pr-best em{font-style:normal;font-size:12px;color:var(--accent-text)}
body[data-design=premium] .pr-comm{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
body[data-design=premium] .pr-comm-h{display:flex;align-items:center;gap:8px}
body[data-design=premium] .pr-comm-h .ico{width:18px;height:18px;color:var(--accent-text)}
body[data-design=premium] .pr-comm p{margin:0;color:var(--mute);font-size:13.5px}
body[data-design=premium] .pr-comm-links{display:grid;gap:8px;margin-top:auto}
body[data-design=premium] .pr-comm-links .btn.full{margin:0}
/* Sections */
body[data-design=premium] .p-brand{font-style:normal;color:var(--accent-text)}
body[data-design=premium] .p-head h2 .ico{width:20px;height:20px;vertical-align:-3px;margin-right:6px;color:var(--accent-text)}
body[data-design=premium] .p-head h2 small{font-size:13px;color:var(--mute);font-weight:400;margin-left:6px}
body[data-design=premium] .p-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
body[data-design=premium] .p-why-c{display:flex;gap:14px;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
body[data-design=premium] .p-why-c>span{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
body[data-design=premium] .p-why-c h3{font-size:16px}
body[data-design=premium] .p-why-c p{color:var(--mute);font-size:13.5px;margin-top:4px}
body[data-design=premium] .p-bestrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
body[data-design=premium] .p-bestc{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line);transition:border-color var(--t),transform var(--t) var(--ease)}
@media (hover:hover){body[data-design=premium] .p-bestc:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}
body[data-design=premium] .p-bestc .mini-thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
body[data-design=premium] .p-bestc span{flex:1;min-width:0}
body[data-design=premium] .p-bestc b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-design=premium] .p-bestc small{color:var(--mute);font-size:12.5px}
body[data-design=premium] .p-bestc>.ico{width:16px;height:16px;color:var(--mute)}
body[data-design=premium] .p-rank{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-weight:800;background:var(--card-2);color:var(--ink)}
body[data-design=premium] .p-rank.r1{background:var(--accent);color:#fff}
body[data-design=premium] .p-board{border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden}
body[data-design=premium] .p-brow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
body[data-design=premium] .p-brow:first-child{border-top:0}
body[data-design=premium] .p-brow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-design=premium] .p-brow strong{color:var(--accent-text)}
body[data-design=premium] .p-brow.me{background:var(--accent-soft)}
body[data-design=premium] .p-emptyline{display:flex;align-items:center;gap:10px;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--mute);font-size:14px}
body[data-design=premium] .p-emptyline .ico{width:18px;height:18px;color:var(--accent-text)}
@media (max-width:1100px){body[data-design=premium] .p-row3,body[data-design=premium] .p-row3.c1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body[data-design=premium] .p-row3 .pr-main{grid-column:1/-1}}
@media (max-width:760px){
  body[data-design=premium] .p-intro2{align-items:flex-start}
  body[data-design=premium] .p-intro-mark{display:none}
  body[data-design=premium] .p-row3,body[data-design=premium] .p-row3.c1{grid-template-columns:minmax(0,1fr)}
  body[data-design=premium] .pr-main .ps-slider{aspect-ratio:16/10}
  body[data-design=premium] .pw-mark{width:80px;height:80px}
  body[data-design=premium] .pw-cta .btn{flex:1 1 100%}
}
body[data-design=premium] .pw-foot{background:none!important;border:0!important}
/* Banner fills the row next to the numbers and the contact panel */
@media (min-width:1101px){
  body[data-design=premium] .p-row3:not(.c0) .pr-main{grid-template-rows:1fr auto}
  body[data-design=premium] .p-row3:not(.c0) .pr-main .ps-slider{aspect-ratio:auto;height:100%;min-height:250px}
}
body[data-design=premium] .p-cat2.has-cover .p-cat2-t{inset:auto 12px 12px auto;left:auto;padding:0;background:none}
body[data-design=premium] .p-cat2.has-cover .p-cat2-t small{padding:5px 10px;border-radius:999px;background:#050505cc;border:1px solid #ffffff26;color:#fff}
@media (max-width:760px){body[data-design=premium] .p-cat2.has-cover .p-cat2-t{position:static;margin-left:auto}body[data-design=premium] .p-cat2.has-cover .p-cat2-t small{background:var(--card-2);color:var(--ink);border-color:var(--line)}}

@media (min-width:761px){body[data-design=premium] .p-cat2.has-cover .p-cat2-t b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:760px){body[data-design=premium] .p-cat2.has-cover .p-cat2-t{display:flex;justify-content:space-between;align-items:center;flex:1;gap:8px}body[data-design=premium] .p-cat2.has-cover img{width:112px;height:63px}}

/* ================= v8: tighter top, balanced banner row, artwork-led cards =================
   Same tokens as v6 (#050505 / #111113 / rgba(255,255,255,.08) / #F5F5F7 / #A1A1AA, brand = the shop's --accent).
   Red light only on the primary button and the promo picture; cards, logo and panels stay flat. */
body[data-design=premium]{--wrap:1200px}
body[data-design=premium] .brand .brand-mark,body[data-design=premium] .brand img{box-shadow:0 0 0 1px var(--line)}
body[data-design=premium] .btn.ghost,body[data-design=premium] .pcard .btn{box-shadow:none!important}
/* Intro: 36–40px name, two lines of words at most, both actions together, a small logo that lines up with the text. */
body[data-design=premium] .p-top{padding-top:24px}
body[data-design=premium] .p-intro2{margin-bottom:16px;gap:20px}
body[data-design=premium] .p-intro2 h1{font-size:38px;line-height:1.2;margin:0}
body[data-design=premium] .p-intro2 .lead{margin-top:6px;max-width:640px;font-size:15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body[data-design=premium] .p-intro2 .p-cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
body[data-design=premium] .p-intro2 .p-cta .btn{margin:0}
body[data-design=premium] .pi-mark{width:64px;height:64px;border-radius:16px;font-size:24px;box-shadow:0 0 0 1px var(--line);background:var(--card)}
/* Row: banner 55% · numbers 20% · contact 25%, 16px apart, all the same height. */
body[data-design=premium] .p-row3{gap:16px}
@media (min-width:1101px){body[data-design=premium] .p-row3{grid-template-columns:minmax(0,55fr) minmax(0,20fr) minmax(0,25fr)}body[data-design=premium] .p-row3.c1{grid-template-columns:minmax(0,70fr) minmax(0,30fr)}}
body[data-design=premium] .pr-main{gap:12px}
@media (min-width:1101px){
  body[data-design=premium] .p-row3:not(.c0) .pr-main{grid-template-rows:none;align-content:start}
  body[data-design=premium] .p-row3:not(.c0) .pr-main .ps-slider,body[data-design=premium] .pr-main .ps-slider{aspect-ratio:2.2/1;height:auto;min-height:0}
}
/* Banner: the first picture is on screen at once; words are HTML at the lower left; arrows and dots sit together at the lower right. */
body[data-design=premium] .ps-slider{background:var(--paper-2)}
body[data-design=premium] .ps-slide.on{transition:none}
body[data-design=premium] .ps-words{padding:24px 26px 22px;max-width:calc(100% - 150px);right:auto;gap:4px;background:none}
body[data-design=premium] .ps-slide picture{position:relative}
body[data-design=premium] .ps-slide picture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505e6 0%,#050505a0 34%,transparent 62%),linear-gradient(0deg,#050505b3,transparent 45%);pointer-events:none}
body[data-design=premium] .ps-words b{font-size:clamp(20px,1.9vw,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-design=premium] .ps-words span{font-size:14px;color:#d4d4d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-design=premium] .ps-ctrl{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px}
body[data-design=premium] .ps-ctrl .ps-nav{position:static;transform:none;width:34px;height:34px;inset:auto}
body[data-design=premium] .ps-ctrl .ps-nav.next{order:3}
body[data-design=premium] .ps-ctrl .ps-dots{position:static;order:2;padding:0 4px}
/* Real shop numbers: 2×2, the number leads, the label is small, every icon the same size. */
body[data-design=premium] .pr-stats{display:flex;flex-direction:column;gap:12px}
body[data-design=premium] .pr-stat-grid{gap:10px;grid-auto-rows:1fr;flex:1}
body[data-design=premium] .pr-stat{padding:12px;gap:0;align-content:center;border-radius:14px}
body[data-design=premium] .pr-stat>span{width:28px;height:28px;border-radius:8px;margin-bottom:8px}
body[data-design=premium] .pr-stat .ico{width:15px;height:15px}
body[data-design=premium] .pr-stat b{order:2;font-size:26px;line-height:1.1;letter-spacing:-.3px}
body[data-design=premium] .pr-stat em{font-size:12px;letter-spacing:0}
body[data-design=premium] .pr-stat small{order:3;font-size:12px;margin-top:2px}
/* Contact: icon, title, one line, buttons — kept together, centred in the panel. */
body[data-design=premium] .pr-comm{justify-content:center;gap:12px;padding:18px}
body[data-design=premium] .pr-comm-h{gap:10px}
body[data-design=premium] .pr-comm-h .ico{width:20px;height:20px;padding:10px;box-sizing:content-box;border-radius:12px;background:var(--accent-soft)}
body[data-design=premium] .pr-comm-h b{font-size:16px}
body[data-design=premium] .pr-comm-links{margin-top:2px}
/* Category tiles: the name is text over the cover, with the count beside it. */
body[data-design=premium] .p-cat2.has-cover .p-cat2-t{inset:auto 0 0 0;padding:32px 16px 14px;background:linear-gradient(0deg,#050505e6,transparent);align-items:center}
@media (min-width:761px){body[data-design=premium] .p-cat2.has-cover .p-cat2-t b{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
/* Product cards: equal heights, two-line names, price first, stock second, buttons on one line across the row. */
body[data-design=premium] .p-grid>.pcard{height:100%}
body[data-design=premium] .pname h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body[data-design=premium] .pcard-media .thumb{object-fit:cover}
body[data-design=premium] .pbadges{left:10px;top:10px}
body[data-design=premium] .pbadges .pb{font-size:11.5px;padding:3px 8px}
body[data-design=premium] .pc-stock{min-height:20px}
body[data-design=premium] .pcard .btn.full{margin-top:auto}
body[data-design=premium] .pc-price{margin-top:4px}
@media (max-width:760px){
  body[data-design=premium] .p-top{padding-top:16px}
  body[data-design=premium] .p-intro2 h1{font-size:30px}
  body[data-design=premium] .p-intro2 .lead{font-size:14px}
  body[data-design=premium] .p-intro2 .p-cta{flex-wrap:nowrap}
  body[data-design=premium] .p-intro2 .p-cta .btn{flex:1}
  /* Phone banner: the phone picture on top, the words underneath on the card, controls beside the words. */
  body[data-design=premium] .ps-slider,body[data-design=premium] .pr-main .ps-slider{aspect-ratio:auto!important;display:grid;background:var(--card)}
  body[data-design=premium] .ps-slide{position:relative;inset:auto;grid-area:1/1}
  body[data-design=premium] .ps-link{height:auto}
  body[data-design=premium] .ps-slide picture,body[data-design=premium] .ps-slide img{height:auto;aspect-ratio:16/10}
  body[data-design=premium] .ps-slide picture::after{display:none}
  body[data-design=premium] .ps-words{position:static;max-width:none;padding:12px 16px 14px;background:var(--card)}
  body[data-design=premium] .ps-words b{font-size:17px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  body[data-design=premium] .ps-words span{font-size:13px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--mute)}
  body[data-design=premium] .ps-ctrl{position:static;grid-row:2;display:flex;padding:0 16px 14px;background:var(--card)}
  body[data-design=premium] .ps-ctrl .ps-dots{order:1;padding:0;top:auto;left:auto;bottom:auto}
  body[data-design=premium] .ps-ctrl .ps-nav.prev{order:2;margin-left:auto}
  body[data-design=premium] .ps-ctrl .ps-nav{top:auto;bottom:auto;left:auto;right:auto}
  body[data-design=premium] .pr-stat b{font-size:22px}
  body[data-design=premium] .pr-comm{padding:16px}
  body[data-design=premium] .p-cat2.has-cover .p-cat2-t{position:static;background:none;padding:0}
}
/* ================= v9: lighter type and wider margins, in Model1's own look =================
   Font files (shop.css @font-face): Regular serves 100–500, Bold 600–700, ExtraBold 800–900, all real files (no synthetic bold).
   Weights 400/500 draw Regular, 600/700 draw Bold; ExtraBold is left to logo marks. One token set per role, used everywhere below. */
body[data-design=premium]{
  --gutter:clamp(16px,5vw,64px);
  --t-welcome:600 clamp(32px,4.7vw,60px)/1.25 'LINE Seed Sans TH',system-ui,sans-serif;--t-welcome-ls:-.02em;
  --t-hero:400 clamp(28px,3.3vw,42px)/1.25 'LINE Seed Sans TH',system-ui,sans-serif;--t-hero-ls:-.01em;
  --t-section:500 clamp(20px,1.9vw,24px)/1.33 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-card-title:500 16px/1.5 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-product:500 15px/1.4 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-page-title:500 clamp(22px,2.2vw,28px)/1.3 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-body:400 14px/1.6 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-lead:400 14px/1.55 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-label:400 12px/1.4 'LINE Seed Sans TH',system-ui,sans-serif;
  --t-nav:400 13px/20px 'LINE Seed Sans TH',system-ui,sans-serif;
  --fw-btn:500;--fw-price:700;--fw-strong:600}
/* Width: the same 64px side margin as the reference at 1280px, 1200px of content on wide screens, 16px on phones. */
body[data-design=premium] .wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
body[data-design=premium] .bar,body[data-design=premium] .bar.nav-capsule{padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
/* Headings */
body[data-design=premium] .pw h1{font:var(--t-welcome);letter-spacing:var(--t-welcome-ls)}
body[data-design=premium] h1,body[data-design=premium] .p-intro2 h1{font:var(--t-hero);letter-spacing:var(--t-hero-ls)}
body[data-design=premium] h2{font:var(--t-section);letter-spacing:0}
body[data-design=premium] h3,body[data-design=premium] .p-why-c h3{font:var(--t-card-title)}
body[data-design=premium] .p-product h1{font:var(--t-page-title);letter-spacing:0}
body[data-design=premium] .p-details h2{font-size:16px;font-weight:var(--fw-strong);margin-bottom:6px}
/* Text, labels, menu, buttons */
body[data-design=premium] .p-intro2 .lead,body[data-design=premium] .pw p{font:var(--t-lead)}
body[data-design=premium] .pcat,body[data-design=premium] .pc-price small,body[data-design=premium] .pr-stat small,body[data-design=premium] .p-buysum dt{font:var(--t-label)}
body[data-design=premium] .nav a{font:var(--t-nav)}
body[data-design=premium] .nav a.on{font-weight:500}
body[data-design=premium] .brand{font-size:16px;font-weight:var(--fw-strong)}
body[data-design=premium] .btn,body[data-design=premium] .btn:not(.ghost):not(.dark){font-weight:var(--fw-btn)}
body[data-design=premium] .bar .btn,body[data-design=premium] .bar .contact{font-size:13px}
body[data-design=premium] .faq-item summary,body[data-design=premium] .p-faq summary{font-weight:500}
/* Product cards: the name is medium, the price stays bold because it is what people compare. */
body[data-design=premium] .pname h3{font:var(--t-product);min-height:2.8em}
body[data-design=premium] .pc-price strong{font-size:19px;font-weight:var(--fw-price);letter-spacing:-.2px}
body[data-design=premium] .plan span{font-weight:var(--fw-strong)}
/* Banner words, category names, numbers, step and rank markers: Bold at most. */
body[data-design=premium] .ps-words b{font-size:clamp(20px,1.8vw,24px);font-weight:var(--fw-strong)}
body[data-design=premium] .p-cat2-t b{font-size:16px;font-weight:var(--fw-strong)}
body[data-design=premium] .ps-steps li::before,body[data-design=premium] .p-rank{font-weight:var(--fw-strong)}
body[data-design=premium] .p-steps h3{font:var(--t-product)}
/* Shop numbers: 2×2, as tall as their content (they no longer stretch to the banner's height). */
body[data-design=premium] .pr-stats{align-self:start}
body[data-design=premium] .pr-stat-grid{flex:none;grid-auto-rows:auto}
body[data-design=premium] .pr-stat{padding:12px 14px;align-content:start}
body[data-design=premium] .pr-stat>span{width:26px;height:26px;margin-bottom:8px}
body[data-design=premium] .pr-stat b{font-size:22px;font-weight:var(--fw-strong);line-height:1.15;letter-spacing:0}
@media (min-width:1101px){body[data-design=premium] .p-row3:not(.c0) .pr-main .ps-slider,body[data-design=premium] .pr-main .ps-slider{aspect-ratio:2.4/1}}
/* Product page summary: plan, price per item, quantity, then the total on its own line. */
body[data-design=premium] .p-buysum{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:12px 14px}
body[data-design=premium] .p-buysum dd{font-weight:500}
body[data-design=premium] .p-buysum dd small{display:block;font-size:12px;color:var(--mute);font-weight:400}
body[data-design=premium] .p-buysum .total{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
body[data-design=premium] .p-buysum .total dt{font-size:14px;color:var(--ink)}
body[data-design=premium] .p-buysum .total dd{margin:0;font-size:22px;font-weight:var(--fw-price);color:var(--accent-text)}
body[data-design=premium] .p-buysum .total s{margin-right:6px;font-size:13px;font-weight:400;color:var(--mute)}
body[data-design=premium] .p-buynote{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .p-buynote .ico{width:14px;height:14px;flex:none;color:var(--accent-text)}
@media (max-width:860px){body[data-design=premium] .p-buysum{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  body[data-design=premium]{--gutter:16px}
  body[data-design=premium] .bar{padding-left:16px;padding-right:16px}
  body[data-design=premium] .p-intro2 h1{font-size:28px}
  body[data-design=premium] h2{font-size:20px}
  body[data-design=premium] .pname h3{font-size:14px}
  body[data-design=premium] .pc-price strong{font-size:17px}
  body[data-design=premium] .pr-stat b{font-size:20px}
}
/* Footer lines up with the page content. */
body[data-design=premium] .foot-in,body[data-design=premium] .foot-bottom{max-width:calc(var(--wrap) + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
body[data-design=premium] .foot-in h4{font-weight:var(--fw-strong)}
/* ---------- v10: back-office choices that Premium now reads ---------- */
/* Hero Banner → "แบนเนอร์เต็มแถว": the banner takes the whole row; numbers and Discord/contact sit side by side under it. */
body[data-design=premium] .p-row3.full{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-design=premium] .p-row3.full.c1,body[data-design=premium] .p-row3.full.c0{grid-template-columns:minmax(0,1fr)}
body[data-design=premium] .p-row3.full .pr-main{grid-column:1/-1}
body[data-design=premium] .p-row3.full .pr-main .ps-slider{aspect-ratio:3/1}
body[data-design=premium] .p-row3.full .pr-stats{align-self:stretch}
@media (max-width:760px){body[data-design=premium] .p-row3.full{grid-template-columns:minmax(0,1fr)}body[data-design=premium] .p-row3.full .pr-main .ps-slider{aspect-ratio:auto}}
/* Layout add-on: columns of products and categories on a computer screen (tablet 3 and phone 2 stay as they are). */
@media (min-width:1101px){
  body[data-design=premium] .p-grid.pc1{grid-template-columns:minmax(0,1fr)}body[data-design=premium] .p-grid.pc2{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-design=premium] .p-grid.pc3{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-design=premium] .p-grid.pc4{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-design=premium] .p-grid.pc5{grid-template-columns:repeat(5,minmax(0,1fr))}body[data-design=premium] .p-grid.pc6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:761px){
  body[data-design=premium] .p-cats2.cc1{grid-template-columns:minmax(0,1fr)}body[data-design=premium] .p-cats2.cc2{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-design=premium] .p-cats2.cc3{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-design=premium] .p-cats2.cc4{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-design=premium] .p-cats2.cc1 .p-cat2{aspect-ratio:4/1}
}
/* Hover add-on "ปิด": no lift. */
body[data-design=premium][data-hover=off] .pcard:hover,body[data-design=premium][data-hover=off] .p-cat2:hover{transform:none;box-shadow:none}
/* Sold-out add-on: the shop's note under a sold-out card. */
body[data-design=premium] .pc-note{margin:0;font-size:12px;color:var(--mute);line-height:1.4}
/* ---------- v11: UI details ---------- */
/* Category covers: the picture box fills the tile (desktop) or the 112×63 thumbnail (phone). A cover far from that shape
   (fit-whole, set by fitCovers()) is shown whole over a blurred copy of itself — never stretched. */
body[data-design=premium] .p-cat2-pic{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--paper-2)}
body[data-design=premium] .p-cat2-pic img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:0}
body[data-design=premium] .p-cat2-bg{display:none}
body[data-design=premium] .p-cat2.fit-whole .p-cat2-bg{display:block;filter:blur(14px) brightness(.55);transform:scale(1.2)}
body[data-design=premium] .p-cat2.fit-whole .p-cat2-img{object-fit:contain}
@media (max-width:760px){body[data-design=premium] .p-cat2-pic{width:112px;height:63px;flex:none;border-radius:10px}}
/* Banner controls: each dot is a 24px button (32px on touch screens) with a small dot drawn inside; pause/play sits last. */
body[data-design=premium] .ps-ctrl .ps-dots{gap:0;padding:0 2px}
body[data-design=premium] .ps-dots button,body[data-design=premium] .ps-dots button.on{width:24px;height:24px;padding:0;background:none!important;border-radius:8px;display:grid;place-items:center}
body[data-design=premium] .ps-dots button.on{width:34px}
body[data-design=premium] .ps-dots button::before{content:none}
body[data-design=premium] .ps-dots button::after{content:"";width:8px;height:8px;border-radius:999px;background:#ffffff8c;transition:width var(--t-fast),background var(--t-fast)}
body[data-design=premium] .ps-dots button.on::after{width:22px;background:#fff}
body[data-design=premium] .ps-ctrl .ps-play{order:4}
body[data-design=premium] .ps-nav:focus-visible,body[data-design=premium] .ps-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #050505b3}
@media (pointer:coarse){body[data-design=premium] .ps-dots button,body[data-design=premium] .ps-dots button.on{width:32px;height:32px}body[data-design=premium] .ps-dots button.on{width:40px}body[data-design=premium] .ps-ctrl .ps-nav{width:40px;height:40px}}
@media (max-width:760px){
  body[data-design=premium] .ps-dots button::after{background:color-mix(in srgb,var(--ink) 30%,transparent)}
  body[data-design=premium] .ps-dots button.on::after{background:var(--accent)}
  body[data-design=premium] .ps-ctrl .ps-nav{background:var(--card-2);color:var(--ink);border-color:var(--line-2)}
  body[data-design=premium] .ps-nav:focus-visible,body[data-design=premium] .ps-dots button:focus-visible{outline-color:var(--accent);box-shadow:none}
}
/* Product page: quantity with its limits, the chosen plan named on the illustration, unit price vs total. */
body[data-design=premium] .qty-field{display:flex;align-items:center;gap:12px;margin-left:auto}
body[data-design=premium] .qty-label{font-size:13px;color:var(--mute)}
body[data-design=premium] .buy-row{display:flex;align-items:center;gap:12px}
body[data-design=premium] .qty-limits{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute);text-align:right}
body[data-design=premium] .qty-limits b{display:block;font-weight:500;color:var(--accent-text)}
body[data-design=premium] .plan .per{font-style:normal;font-size:11px;font-weight:400;color:var(--mute);margin-left:2px}
body[data-design=premium] .p-buysum .total dt{display:grid;gap:2px}
body[data-design=premium] .p-buysum .total dt small{font-size:12px;color:var(--mute);font-weight:400}
body[data-design=premium] .p-buysum dd s{font-size:12px;font-weight:400;color:var(--mute)}
body[data-design=premium] .p-plantag{position:absolute;left:12px;right:12px;bottom:12px;margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:8px 12px;border-radius:10px;background:#050505cc;border:1px solid #ffffff26;color:#fff;backdrop-filter:blur(6px);font-size:12px}
body[data-design=premium] .p-plantag span{color:#d4d4d8}
body[data-design=premium] .p-plantag b{font-weight:600;font-size:13.5px}
@media (max-width:760px){body[data-design=premium] .qty-field{margin-left:0}body[data-design=premium] .buy-row{justify-content:space-between}body[data-design=premium] .qty-limits{text-align:left}}
/* Banner row: the numbers column spreads its cards to the banner's height with space between — the cards keep their size. */
@media (min-width:1101px){body[data-design=premium] .p-row3:not(.full) .pr-stats{align-self:stretch;justify-content:space-between}body[data-design=premium] .p-row3:not(.full) .pr-stat-grid{flex:1;align-content:space-between}}
/* Footer line: two lines at most. */
body[data-design=premium] .foot-brand p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:420px}
body[data-design=premium] .p-empty.big .btn{margin-top:14px}
/* Long plan names wrap in the summary instead of being cut off. */
body[data-design=premium] .p-buysum dd{white-space:normal;overflow-wrap:anywhere}
/* The chosen-plan caption sits under the picture (it never covers words baked into the product art). */
body[data-design=premium] .p-gallery .p-plantag{position:static;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--card);color:var(--ink);backdrop-filter:none;padding:10px 14px}
body[data-design=premium] .p-gallery .p-plantag span{color:var(--mute)}
/* Account pages: the page title is a real H1 at section size (not the hero size). */
body[data-design=premium] .page-title{font:var(--t-section);margin:0 0 14px}
body[data-design=premium] .profile-page .panel h2{font-size:17px;font-weight:600}
/* When the side column is taller (e.g. with the "สินค้าขายดี" box), the banner grows to the same height (never below its 2.4:1 frame; the focus point decides the crop). */
@media (min-width:1101px){body[data-design=premium] .p-row3:not(.full):not(.c0) .pr-main{display:flex;flex-direction:column}body[data-design=premium] .p-row3:not(.full):not(.c0) .pr-main .ps-slider{flex:1 0 auto}}
/* Slides shown whole ("แสดงทั้งภาพ ไม่ครอป", words baked into the picture): no crop, no dark overlay; a blurred copy fills spare room.
   On a phone the picture keeps its own shape at full width. */
body[data-design=premium] .ps-slide .ps-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.45);transform:scale(1.15)}
body[data-design=premium] .ps-slide.whole picture{position:relative;z-index:1}
body[data-design=premium] .ps-slide.whole picture::after{display:none}
body[data-design=premium] .ps-slide.whole picture img{object-fit:contain}
@media (max-width:760px){body[data-design=premium] .ps-slide.whole picture,body[data-design=premium] .ps-slide.whole picture img{aspect-ratio:auto;height:auto}body[data-design=premium] .ps-slide.whole .ps-fill{display:none}}
/* Wide category banners (2.2:1 and wider): a frame of the picture's own shape, name and count in a strip below, never over it. */
body[data-design=premium] .p-cat2.wide{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;align-self:start;padding:0;gap:0}
body[data-design=premium] .p-cat2.wide .p-cat2-pic{width:100%;height:auto;aspect-ratio:var(--ar);border-radius:0;flex:none}
body[data-design=premium] .p-cat2.wide .p-cat2-bg{display:none}
body[data-design=premium] .p-cat2.wide .p-cat2-t{position:static;inset:auto;margin:0;padding:10px 14px;background:var(--card);color:var(--ink);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}
body[data-design=premium] .p-cat2.wide .p-cat2-t b{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:15px}
body[data-design=premium] .p-cat2.wide .p-cat2-t small{padding:3px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);color:var(--mute)}

/* v15 — home page measured against the reference layout: wider content (64px side gutters at 1440), a lower menu bar with
   the current page in the shop colour, a banner frame of the picture's own shape, compact stat boxes, one card shape per row. */
body[data-design=premium]{--wrap:1312px}
body[data-design=premium] .bar,body[data-design=premium] .bar.nav-capsule{min-height:58px}
body[data-design=premium] .nav a{height:34px;padding:0 10px;border-radius:8px}
body[data-design=premium] .nav a.on{color:var(--accent-text);background:var(--accent-soft);box-shadow:none}
body[data-design=premium] .bar .icon-btn{width:36px;height:36px;border-radius:9px}
body[data-design=premium] .bar .contact,body[data-design=premium] .bar .btn.sm{height:36px;min-height:36px;border-radius:9px}
@media (min-width:761px){
  body[data-design=premium] .ps-slider.fit-pic,body[data-design=premium] .pr-main .ps-slider.fit-pic,body[data-design=premium] .p-row3:not(.c0) .pr-main .ps-slider.fit-pic{aspect-ratio:var(--ps-ar)!important;height:auto!important;min-height:0!important;flex:none!important}
  body[data-design=premium] .ps-slider.fit-pic .ps-fill{display:none}
}
/* Desktop: the community panel follows the row's height (banner / numbers) and scrolls inside instead of stretching the row. */
@media (min-width:1101px){
  body[data-design=premium] .p-row3:not(.full) .pr-comm{contain:size;overflow:auto;min-height:0;align-self:stretch}
}
body[data-design=premium] .pr-stat{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i l" "i v";column-gap:10px;row-gap:0;align-items:center;align-content:center;padding:10px 12px}
body[data-design=premium] .pr-stat>span{grid-area:i;margin:0;width:32px;height:32px}
body[data-design=premium] .pr-stat small{grid-area:l;margin:0;line-height:1.3}
body[data-design=premium] .pr-stat b{grid-area:v;font-size:19px;line-height:1.25}
body[data-design=premium] .p-cat2.framed{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;align-self:start;padding:0;gap:0}
body[data-design=premium] .p-cat2.framed .p-cat2-pic{width:100%;height:auto;aspect-ratio:var(--ar);border-radius:0;flex:none}
body[data-design=premium] .p-cat2.framed .p-cat2-bg{display:block;filter:blur(14px) brightness(.55);transform:scale(1.2)}
body[data-design=premium] .p-cat2.framed .p-cat2-img{object-fit:contain}
body[data-design=premium] .p-cat2.framed .p-cat2-t{position:static;inset:auto;margin:0;padding:10px 14px;background:var(--card);color:var(--ink);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}
body[data-design=premium] .p-cat2.framed .p-cat2-t b{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:15px}
body[data-design=premium] .p-cat2.framed .p-cat2-t small{padding:3px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);color:var(--mute)}
/* Detector fixes: shop-colour buttons meet 4.5:1 (shades set by buttonInk in shop.js), FAQ text off the card edge,
   no single words left alone on a last line, the footer's x2 mark at a readable size. */
body[data-design=premium] .btn,body[data-design=premium] .btn:not(.ghost):not(.dark),body[data-design=premium] .btn.auth-go{background:var(--btn-bg,var(--accent))!important;color:var(--on-accent,#fff)}
body[data-design=premium] .btn:not(.ghost):not(.dark) .ico{color:inherit}
body[data-design=premium] .p-faq summary{padding-left:16px;padding-right:16px}
body[data-design=premium] .p-faq details p{padding-left:16px;padding-right:16px}
body[data-design=premium] .p-intro2 .lead,body[data-design=premium] .p-sec p,body[data-design=premium] .p-contact p,body[data-design=premium] .foot-in p,body[data-design=premium] .discord-panel p{text-wrap:pretty}
body[data-design=premium] .mb-mark{font-size:11px;padding:2px 5px;background:var(--btn-bg,var(--accent));color:var(--on-accent,#fff)}
body[data-design=premium] ::selection{background:var(--btn-bg,var(--accent));color:var(--on-accent,#fff)}
/* Wider screens: the number boxes are narrow, so icon, label and number stack (as the reference does); phones keep them side by side. */
@media (min-width:761px){
  body[data-design=premium] .pr-stat{grid-template-columns:minmax(0,1fr);grid-template-areas:"i" "l" "v";row-gap:0;align-content:start;padding:8px 12px}
  body[data-design=premium] .pr-stat>span{width:24px;height:24px;border-radius:7px;margin-bottom:2px}
  body[data-design=premium] .pr-stat .ico{width:14px;height:14px}
  body[data-design=premium] .pr-stat b{font-size:18px;white-space:nowrap}
  body[data-design=premium] .pr-stat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Discord in the banner row: content starts at the top (centring clipped the first member when the list overflowed),
   compact rows, and two columns of members when the panel is wide enough, so 6+ show without making the row taller. */
body[data-design=premium] .pr-comm.discord-panel{justify-content:flex-start;gap:0;padding:10px 12px}
body[data-design=premium] .discord-panel .dc-head{padding-bottom:6px;margin-bottom:6px}
body[data-design=premium] .discord-panel .dc-head .ico{width:18px;height:18px;padding:0;background:none}
body[data-design=premium] .discord-panel .dc-list{flex:1 1 auto;min-height:0;max-height:none;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px;align-content:start}
body[data-design=premium] .discord-panel .dc-member{padding:3px 8px;gap:8px;border-radius:8px}
body[data-design=premium] .discord-panel .dc-ava,body[data-design=premium] .discord-panel .dc-ava img,body[data-design=premium] .discord-panel .dc-ava b{width:24px;height:24px}
body[data-design=premium] .discord-panel .dc-dot{width:9px;height:9px;border-width:2px}
body[data-design=premium] .discord-panel .dc-name{font-size:12.5px}
body[data-design=premium] .discord-panel .dc-join{margin-top:8px;min-height:36px;padding:8px}
@media (max-width:1100px){body[data-design=premium] .discord-panel .dc-list{max-height:200px}}
/* 1101–1399px: the banner column is narrower, so the number boxes shrink to keep the row no taller than the banner. */
@media (min-width:1101px) and (max-width:1399px){
  body[data-design=premium] .pr-stat{padding:6px 10px}
  body[data-design=premium] .pr-stat>span{width:20px;height:20px;border-radius:6px;margin-bottom:1px}
  body[data-design=premium] .pr-stat .ico{width:12px;height:12px}
  body[data-design=premium] .pr-stat small{font-size:11.5px;line-height:1.25}
  body[data-design=premium] .pr-stat b{font-size:16px;line-height:1.2}
}
/* v16 — product list measured against the reference: a section-sized title, 44px search and sort, the category cards
   (same component as home, hidden while a search or a category narrows the list), and a compact product card with price
   and stock on one line. Contrast: the search placeholder and the selected chip's count reach 4.5:1. */
body[data-design=premium] .p-store .p-head{align-items:center;margin-bottom:16px}
body[data-design=premium] .p-store .p-head h1{font-size:24px;line-height:1.33;font-weight:500;letter-spacing:0;margin:0}
body[data-design=premium] .p-tools{align-items:center}
body[data-design=premium] .p-tools .search{height:44px;border-radius:10px;border-width:1px}
body[data-design=premium] .p-tools .search input{padding:0}
body[data-design=premium] .p-tools .search input::placeholder{color:var(--mute);opacity:1}
body[data-design=premium] .p-select select{min-height:44px;height:44px;border-radius:10px;border-width:1px}
body[data-design=premium] .p-tools .views{height:44px}
body[data-design=premium] .chip.on em{color:inherit;opacity:1}
body[data-design=premium] .p-store-cats{margin-bottom:var(--p-gap)}
body[data-design=premium] .pc-plans{font:var(--t-label);color:var(--mute)}
body[data-design=premium] .pc-line{display:flex;align-items:baseline;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
body[data-design=premium] .pc-line .pc-price{margin:0}
body[data-design=premium] .pc-line .pc-stock{min-height:0;text-align:right}
body[data-design=premium] .pc-line .pc-stock .ps{font-size:12px}
body[data-design=premium] .pcard .btn.full{margin-top:8px}
@media (max-width:760px){body[data-design=premium] .p-store .p-head h1{font-size:20px}body[data-design=premium] .pc-line{flex-direction:column;align-items:flex-start;gap:0;padding-top:0}body[data-design=premium] .pcard .btn.full{margin-top:2px}body[data-design=premium] .pc-line .pc-stock{text-align:left}}
/* Phones: the chips already pick a category, so the stacked category cards (≈450px) step aside and the products come first. */
@media (max-width:760px){body[data-design=premium] .p-store-cats{display:none}body[data-design=premium] .pc-plans{line-height:1.35}}

/* Leaderboard rank 1 uses the readable shade of the shop colour (set by buttonInk), like the buttons. */
body[data-design=premium] .p-rank.r1{background:var(--btn-bg,var(--accent));color:var(--on-accent,#fff)}

/* v22 motion (add-on "การเคลื่อนไหว"). One authored moment: the welcome box lights up once per visit, then stays still
   apart from a slow red light and a few dim sparkles. Feedback elsewhere is short (160–220ms). Only transform, opacity
   and shadow move; every light layer ignores clicks and is clipped to its box. <body data-motion=off|reduced|standard>,
   data-sparkles / data-bg-motion / data-card-fx come from shop.js; the device's reduced-motion setting caps it at reduced. */
body[data-design=premium]{--ease-out:cubic-bezier(.16,1,.3,1);--glow:color-mix(in srgb,var(--accent) 55%,transparent)}
/* Welcome box: black with a soft red light behind the logo and the shop name */
body[data-design=premium] .p-intro2{position:relative;isolation:isolate;overflow:hidden;padding:28px 32px;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));background:#050609}
body[data-design=premium] .p-intro2>.pi-text,body[data-design=premium] .p-intro2>.p-intro-mark{position:relative;z-index:1}
body[data-design=premium] .p-atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
body[data-design=premium] .atmo-move{position:absolute;inset:-8px;translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -10px);transition:translate .7s var(--ease-out)}
body[data-design=premium] .atmo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
body[data-design=premium] .atmo-glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 42%,transparent),transparent);will-change:transform}
body[data-design=premium] .atmo-glow.g1{width:380px;height:380px;right:-40px;top:50%;margin-top:-190px}
body[data-design=premium] .atmo-glow.g2{width:620px;height:300px;left:-120px;top:-120px;opacity:.55}
/* Dark layer that keeps the words readable on a picture */
body[data-design=premium] .atmo-shade{position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 50%,#050609e6 30%,#05060999 70%,#05060966)}
body[data-design=premium] .p-intro2:not(.has-img) .atmo-shade{display:none}
/* Sparkles: ten dim points in the top box only, drifting very slowly */
body[data-design=premium] .atmo-sparks i{position:absolute;width:2px;height:2px;border-radius:50%;background:color-mix(in srgb,var(--accent) 45%,#fff);opacity:.4}
body[data-design=premium] .atmo-sparks i:nth-child(1){left:8%;top:22%}body[data-design=premium] .atmo-sparks i:nth-child(2){left:19%;top:74%;width:3px;height:3px}
body[data-design=premium] .atmo-sparks i:nth-child(3){left:31%;top:14%}body[data-design=premium] .atmo-sparks i:nth-child(4){left:44%;top:62%}
body[data-design=premium] .atmo-sparks i:nth-child(5){left:56%;top:30%;width:3px;height:3px}body[data-design=premium] .atmo-sparks i:nth-child(6){left:66%;top:80%}
body[data-design=premium] .atmo-sparks i:nth-child(7){left:74%;top:18%}body[data-design=premium] .atmo-sparks i:nth-child(8){left:83%;top:56%;width:3px;height:3px}
body[data-design=premium] .atmo-sparks i:nth-child(9){left:91%;top:28%}body[data-design=premium] .atmo-sparks i:nth-child(10){left:95%;top:72%}
@keyframes atmoDrift{from{transform:translate3d(-14px,6px,0) scale(1)}to{transform:translate3d(16px,-8px,0) scale(1.06)}}
@keyframes atmoSpark{0%,100%{transform:translate3d(0,0,0);opacity:.25}50%{transform:translate3d(4px,-10px,0);opacity:.55}}
body[data-design=premium][data-bg-motion=on] .atmo-glow.g1{animation:atmoDrift 10s ease-in-out infinite alternate}
body[data-design=premium][data-bg-motion=on] .atmo-glow.g2{animation:atmoDrift 12s ease-in-out -4s infinite alternate-reverse}
body[data-design=premium][data-sparkles=on] .atmo-sparks i{animation:atmoSpark 9s ease-in-out infinite}
body[data-design=premium][data-sparkles=on] .atmo-sparks i:nth-child(3n){animation-duration:11s;animation-delay:-3s}
body[data-design=premium][data-sparkles=on] .atmo-sparks i:nth-child(3n+1){animation-duration:13s;animation-delay:-6s}
body[data-design=premium][data-sparkles=off] .atmo-sparks{display:none}
/* Loops rest when the box is off screen or the tab is hidden */
body[data-design=premium] .p-intro2.still .p-atmo *,body[data-design=premium].tab-hidden .p-atmo *{animation-play-state:paused!important}
/* Entrance, once per visit: logo 450ms from 96%, then heading, words and buttons 70ms apart (all done by ~700ms) */
@keyframes mRise{from{opacity:0;transform:translateY(8px)}}
@keyframes mLogo{from{opacity:0;transform:scale(.96)}}
@keyframes mFade{from{opacity:0}}
body[data-design=premium] .p-intro2.intro .p-atmo{animation:mFade .6s var(--ease-out) backwards}
body[data-design=premium] .p-intro2.intro .pi-mark{animation:mLogo 450ms var(--ease-out) backwards}
body[data-design=premium] .p-intro2.intro h1{animation:mRise 420ms var(--ease-out) 40ms backwards}
body[data-design=premium] .p-intro2.intro .lead{animation:mRise 420ms var(--ease-out) 110ms backwards}
body[data-design=premium] .p-intro2.intro .p-cta>*{animation:mRise 420ms var(--ease-out) 180ms backwards}
body[data-design=premium] .p-intro2.intro .p-cta>:nth-child(2){animation-delay:250ms}
body[data-design=premium] .p-intro2.intro .p-cta>:nth-child(n+3){animation-delay:280ms}
body[data-design=premium][data-motion=reduced] .p-intro2.intro *{animation-name:mFade!important;animation-duration:200ms!important;animation-delay:0s!important}
/* Header logo: same box and click area in both themes; on hover a soft red light behind it and a 1.5px lift */
body[data-design=premium] .brand{position:relative;isolation:isolate}
body[data-design=premium] .brand::before{content:"";position:absolute;z-index:-1;left:-10px;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity 220ms var(--ease-out);pointer-events:none}
body[data-design=premium] .brand .brand-mark{transition:transform 200ms var(--ease-out)}
body[data-design=premium] .brand:hover::before,body[data-design=premium] .brand:focus-visible::before{opacity:1}
body[data-design=premium][data-motion=standard] .brand:hover .brand-mark,body[data-design=premium][data-motion=standard] .brand:focus-visible .brand-mark{transform:translateY(-1.5px)}
/* Primary buttons: red gradient (never lighter than the readable shop colour, only deeper toward the bottom), rim and soft light; hover lifts 2px and nudges the arrow; press dips to 98% */
body[data-design=premium] .btn:not(.ghost):not(.dark){position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--btn-bg,var(--accent)) 0%,var(--btn-bg,var(--accent)) 35%,color-mix(in srgb,var(--btn-bg,var(--accent)) 78%,#000) 100%)!important;
  background-color:var(--btn-bg,var(--accent))!important;
  border:1px solid color-mix(in srgb,var(--btn-bg,var(--accent)) 72%,#fff);
  box-shadow:inset 0 1px 0 #ffffff2e,0 8px 22px -12px var(--glow)!important;
  transition:transform 180ms var(--ease-out),box-shadow 200ms var(--ease-out),filter 180ms var(--ease-out)}
body[data-design=premium] .btn:not(.ghost):not(.dark):not(:disabled):hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 #ffffff38,0 14px 30px -12px color-mix(in srgb,var(--accent) 75%,transparent)!important}
body[data-design=premium][data-motion=standard] .btn:not(.ghost):not(.dark):not(:disabled):hover{transform:translateY(-2px)}
body[data-design=premium]:not([data-motion=off]) .btn:not(:disabled):active{transform:scale(.98)!important;transition-duration:90ms}
body[data-design=premium] .btn-arrow{display:inline-flex;margin-left:2px;transition:transform 200ms var(--ease-out)}
body[data-design=premium] .btn-arrow .ico{width:16px;height:16px}
body[data-design=premium][data-motion=standard] .btn:hover .btn-arrow{transform:translateX(3px)}
/* One light sweep per hover, on full-size primary buttons only (never a loop) */
body[data-design=premium] .btn:not(.ghost):not(.dark):not(.sm)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff33 50%,transparent 65%);transform:translateX(-110%)}
body[data-design=premium][data-motion=standard] .btn:not(.ghost):not(.dark):not(.sm):not(:disabled):hover::after{transform:translateX(110%);transition:transform 650ms var(--ease-out)}
/* Disabled: flat, no light, nothing that looks pressable. Busy: words + a small ring. */
body[data-design=premium] .btn:disabled,body[data-design=premium] .btn:not(.ghost):not(.dark):disabled,body[data-design=premium] .btn[aria-disabled=true],body[data-design=premium] .btn:not(.ghost):not(.dark)[aria-disabled=true]{background:var(--card-2)!important;color:var(--mute)!important;border-color:var(--line-2);box-shadow:none!important;filter:none;transform:none!important;opacity:1;cursor:not-allowed}
body[data-design=premium] .btn:disabled::after{display:none}
body[data-design=premium] .btn[aria-busy=true],body[data-design=premium] .btn:not(.ghost):not(.dark)[aria-busy=true]:disabled{cursor:progress;color:var(--ink)!important}
body[data-design=premium] .busy-dot{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:busySpin .8s linear infinite}
@keyframes busySpin{to{transform:rotate(1turn)}}
/* Light theme: the lights become a visible shadow and border, not the dark values copied */
:root[data-theme=light] body[data-design=premium]{--glow:color-mix(in srgb,var(--accent) 30%,transparent)}
:root[data-theme=light] body[data-design=premium] .p-intro2{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 4%,#fff));border-color:color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 1px 2px #0f121914,0 18px 40px -28px color-mix(in srgb,var(--accent) 50%,transparent)}
:root[data-theme=light] body[data-design=premium] .atmo-glow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 13%,transparent),transparent)}
:root[data-theme=light] body[data-design=premium] .atmo-sparks i{background:var(--accent);opacity:.3}
:root[data-theme=light] body[data-design=premium] .atmo-shade{background:radial-gradient(120% 140% at 0% 50%,#ffffffeb 30%,#ffffffb8 70%,#ffffff80)}
:root[data-theme=light] body[data-design=premium] .atmo-img{opacity:.5}
:root[data-theme=light] body[data-design=premium] .btn:not(.ghost):not(.dark){box-shadow:inset 0 1px 0 #ffffff40,0 1px 2px #0f121924,0 8px 18px -10px color-mix(in srgb,var(--accent) 45%,transparent)!important}
@media (max-width:760px){body[data-design=premium] .p-intro2{padding:20px 18px;border-radius:var(--r)}
  body[data-design=premium] .atmo-glow.g1{width:260px;height:260px;right:-80px;margin-top:-130px}}
/* v22: the text column may shrink inside the welcome box; on phones the main button takes a full row, the others share the next */
body[data-design=premium] .p-intro2>.pi-text{min-width:0;flex:1 1 auto}
@media (max-width:760px){body[data-design=premium] .p-intro2 .p-cta{flex-wrap:wrap}
  body[data-design=premium] .p-intro2 .p-cta .btn{flex:1 1 0;min-width:0;padding:0 12px}
  body[data-design=premium] .p-intro2 .p-cta .btn:first-child{flex-basis:100%}}

/* v22 phase 2 — banner and cards, in the same language as the welcome box: opacity and small rises on the
   --ease-out curve, red light only on what can be bought, nothing that loops. */
/* Banner: the new slide fades in over 400ms on top of the old one, which stays whole underneath until it is covered
   (no dip to black between slides). Pictures are never zoomed; "whole" slides stay uncropped as before. */
body[data-design=premium] .ps-slide{z-index:0;transition:opacity 0s linear 400ms,visibility 0s linear 400ms}
body[data-design=premium] .ps-slide.on{z-index:1}
body[data-design=premium]:not([data-motion=off]) .ps-slide.on{transition:opacity 400ms var(--ease-out)!important}
body[data-design=premium] .ps-ctrl{z-index:3}
body[data-design=premium] .ps-ctrl .ps-nav{width:38px;height:38px;transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
body[data-design=premium] .ps-dots button,body[data-design=premium] .ps-dots button.on{height:28px}
body[data-design=premium] .ps-dots button::after{transition:width 300ms var(--ease-out),background-color 300ms var(--ease-out)}

/* Cards below the first screen: fade and rise 10px once (shop.js adds .rv, then .rv-in with a 50ms step) */
body[data-design=premium] .rv{opacity:0;transform:translateY(10px)}
body[data-design=premium] .rv.rv-in{opacity:1;transform:none;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
/* Hover / keyboard focus, one language for every card: brighter red border, a little more shadow, picture to 102.5% */
body[data-design=premium] .pcard,body[data-design=premium] .p-cat2,body[data-design=premium] .p-bestc{transition:border-color 200ms var(--ease-out),box-shadow 220ms var(--ease-out)}
body[data-design=premium] .pcard-media{overflow:hidden}
body[data-design=premium] .pcard-media .thumb,body[data-design=premium] .p-cat2-img{transition:transform 450ms var(--ease-out)}
@media (hover:hover){
  body[data-design=premium] .pcard:hover,body[data-design=premium] .p-cat2:hover,body[data-design=premium] .p-bestc:hover{transform:none;border-color:color-mix(in srgb,var(--accent) 62%,var(--line));box-shadow:0 16px 34px -22px color-mix(in srgb,var(--accent) 60%,transparent),var(--sh-2)}
  body[data-design=premium][data-motion=standard][data-card-fx=on] .pcard:not(.is-out):hover .pcard-media .thumb,
  body[data-design=premium][data-motion=standard][data-card-fx=on] .p-cat2:not(.framed):not(.wide):not(.fit-whole):hover .p-cat2-img{transform:scale(1.025)}
  /* Sold out: no "buy me" light; it still opens its details */
  body[data-design=premium] .pcard.is-out:hover,body[data-design=premium] .p-row.is-out:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
  body[data-design=premium][data-hover=off] .pcard:hover,body[data-design=premium][data-hover=off] .p-cat2:hover,body[data-design=premium][data-hover=off] .p-bestc:hover{box-shadow:none}
  body[data-design=premium][data-hover=off] .pcard:hover .thumb,body[data-design=premium][data-hover=off] .p-cat2:hover .p-cat2-img{transform:none}
}
body[data-design=premium] .pcard:not(.is-out):focus-within,body[data-design=premium] .p-cat2:focus-visible,body[data-design=premium] .p-bestc:focus-visible{border-color:color-mix(in srgb,var(--accent) 62%,var(--line))}
:root[data-theme=light] body[data-design=premium] .pcard:not(.is-out):hover,:root[data-theme=light] body[data-design=premium] .p-cat2:hover,:root[data-theme=light] body[data-design=premium] .p-bestc:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 1px 2px #0f121914,0 14px 28px -18px #0f121952}

/* Plan picker: border, tint and a check mark ease in on the chosen plan and out of the old one; prices just change */
body[data-design=premium] .plan{position:relative;transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
body[data-design=premium] .plan-check{position:absolute;top:9px;right:9px;display:grid;color:var(--accent-text);opacity:0;transform:scale(.6)}
body[data-design=premium] .plan-check .ico{width:18px;height:18px}
body[data-design=premium] .plan>b{padding-right:24px}
body[data-design=premium] .plan.on .plan-check{opacity:1;transform:none}
@keyframes planOn{from{border-color:var(--line);background-color:var(--card-2)}}
@keyframes planOff{from{border-color:var(--accent);background-color:var(--accent-soft)}}
@keyframes checkIn{from{opacity:0;transform:scale(.6)}}
body[data-design=premium]:not([data-motion=off]) .plan.just-on{animation:planOn 200ms var(--ease-out)}
body[data-design=premium]:not([data-motion=off]) .plan.just-on .plan-check{animation:checkIn 220ms var(--ease-out)}
body[data-design=premium]:not([data-motion=off]) .plan.was-on{animation:planOff 180ms ease-out}
@media (pointer:coarse){body[data-design=premium] .ps-ctrl .ps-nav{width:40px;height:40px}body[data-design=premium] .ps-dots button,body[data-design=premium] .ps-dots button.on{height:32px}}
body[data-design=premium] .plan .per{white-space:nowrap;display:inline-block}
/* v22: phone banner with slides of different shapes — a "whole" picture (words baked in) sits centred in the shared
   height on a blurred copy of itself, never cropped or zoomed, instead of leaving an empty band under it. */
@media (max-width:760px){
  body[data-design=premium] .ps-slider:not(.fit-pic) .ps-slide.whole{display:flex;overflow:hidden}
  body[data-design=premium] .ps-slider:not(.fit-pic) .ps-slide.whole>.ps-link{display:flex;flex:1;align-items:center;position:relative}
  body[data-design=premium] .ps-slider:not(.fit-pic) .ps-slide.whole>picture{align-self:center}
  body[data-design=premium] .ps-slider:not(.fit-pic) .ps-slide.whole .ps-fill{display:block;position:absolute;inset:0;width:100%;height:100%}
}

/* v22 phase 3 — menu, FAQ, notices and page changes, same curve and restraint as phases 1–2. */
/* Account menu: 150ms fade + 6px slide in, 100ms out; reduced = fade only; off = none */
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes menuOut{to{opacity:0;transform:translateY(-4px)}}
@keyframes fadeOut{to{opacity:0}}
body[data-design=premium] .dropdown{transform-origin:top right;animation:menuIn 150ms var(--ease-out)}
body[data-design=premium] .dropdown.closing{animation:menuOut 100ms ease-in forwards;pointer-events:none}
body[data-design=premium][data-motion=reduced] .dropdown{animation-name:mFade}
body[data-design=premium][data-motion=reduced] .dropdown.closing{animation-name:fadeOut}
body[data-design=premium][data-motion=off] .dropdown{animation:none}
/* FAQ: the answer's height eases open and shut (no jump of the page below); the arrow turns with it.
   Browsers without ::details-content simply open at once. */
body[data-design=premium] .p-faq{interpolate-size:allow-keywords}
body[data-design=premium] .p-faq details::details-content{height:0;overflow:hidden;transition:height 220ms var(--ease-out),content-visibility 220ms allow-discrete}
body[data-design=premium] .p-faq details[open]::details-content{height:auto}
body[data-design=premium] .p-faq summary .ico{transition:transform 220ms var(--ease-out)}
body[data-design=premium][data-motion=off] .p-faq details::details-content,body[data-design=premium][data-motion=off] .p-faq summary .ico{transition:none}
/* Notices: card surface, icon + words, rise 12px in 220ms, leave in 160ms; above the phone's bottom bars */
body[data-design=premium] #toast{display:flex;align-items:center;gap:10px;bottom:24px;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;border-radius:12px;
  background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-left:4px solid var(--accent);box-shadow:0 18px 40px -18px #000000b3;font-size:14px;line-height:1.45;text-wrap:pretty;
  transform:translate(-50%,12px);transition:opacity 160ms ease-in,transform 160ms ease-in}
body[data-design=premium] #toast.show{transform:translate(-50%,0);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
body[data-design=premium] #toast .ico{width:18px;height:18px;flex:none}
body[data-design=premium] #toast[data-kind=ok]{border-left-color:var(--ok)}body[data-design=premium] #toast[data-kind=ok] .ico{color:var(--ok)}
body[data-design=premium] #toast[data-kind=error]{border-left-color:var(--bad)}body[data-design=premium] #toast[data-kind=error] .ico{color:var(--bad)}
body[data-design=premium] #toast.show{pointer-events:auto}
:root[data-theme=light] body[data-design=premium] #toast{box-shadow:0 1px 2px #0f121914,0 14px 30px -14px #0f121959}
body[data-design=premium][data-motion=off] #toast{transition:none}
@media (max-width:760px){body[data-design=premium] #toast{bottom:calc(84px + env(safe-area-inset-bottom));width:max-content}}
/* Page change: only the new page's content fades in (180ms); the header and menu stay put. Never a loader. */
@keyframes pgIn{from{opacity:0}}
body[data-design=premium] #main.pg-in{animation:pgIn 180ms var(--ease-out)}
body[data-design=premium][data-motion=off] #main.pg-in{animation:none}
/* v23: the welcome page is always the black screen (its own dark background, grid and red glow), so in the light theme it
   keeps the dark-theme colours for its words, badge, chips and buttons instead of light-theme ink on black. */
:root[data-theme=light] body[data-design=premium] .pw{--paper:#050505;--paper-2:#0b0b0d;--card:#111113;--card-2:#19191c;--field:#0b0b0d;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --ink:#f5f5f7;--mute:#a1a1aa;--accent-text:color-mix(in srgb,var(--accent) 82%,#fff);--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);--glow:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink);color-scheme:dark}
:root[data-theme=light] body[data-design=premium] .pw .btn:not(.ghost):not(.dark){box-shadow:inset 0 1px 0 #ffffff2e,0 8px 22px -12px var(--glow)!important}
:root[data-theme=light] body[data-design=premium] .pw .logo-light{display:none}
:root[data-theme=light] body[data-design=premium] .pw .logo-dark{display:grid}

/* v25 — the rest of the page brought up to the welcome box. Categories follow the Layout setting on wide screens and give up
   columns when there is no room; a category left alone on the last row of two spans the row instead of leaving a hole. */
@media (min-width:761px) and (max-width:1023px){
  body[data-design=premium] .p-cats2.cc3,body[data-design=premium] .p-cats2.cc4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:761px){
  body[data-design=premium] .p-cats2.cc2>.p-cat2:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:761px) and (max-width:1023px){
  body[data-design=premium] .p-cats2.cc3>.p-cat2:last-child:nth-child(odd),body[data-design=premium] .p-cats2.cc4>.p-cat2:last-child:nth-child(odd){grid-column:1/-1}
}
/* v25 — one set of surfaces below the welcome box: 16px corners, the same hairline border and card fill, 56px between
   sections, 16px from a heading to its content. Red light stays in the welcome box; below it only borders and soft
   neutral shadows. */
body[data-design=premium]{--r-card:16px;--sec-gap:56px;--head-gap:16px;--sh-card:0 1px 2px #0000002e;--sh-card-hover:0 14px 30px -18px #000000cc}
:root[data-theme=light] body[data-design=premium]{--sh-card:0 1px 2px #0f121912;--sh-card-hover:0 14px 28px -18px #0f12194d}
body[data-design=premium] #main>section.p-sec{margin-top:var(--sec-gap)}
body[data-design=premium] .p-sec>.p-head{margin-bottom:var(--head-gap);align-items:baseline}
body[data-design=premium] .pcard,body[data-design=premium] .p-cat2,body[data-design=premium] .p-bestc,body[data-design=premium] .pr-stat,body[data-design=premium] .pr-comm,
body[data-design=premium] .ps-slider,body[data-design=premium] .pr-main .ps-slider,body[data-design=premium] .p-steps li,body[data-design=premium] .p-contact,body[data-design=premium] .p-board{
  border-radius:var(--r-card);border-color:var(--line);box-shadow:var(--sh-card)}

/* Product card: the picture leads, the name reads easily, the price is clear, stock is a quiet second line.
   The name keeps two lines' room, so price and button line up across a row whatever the name length. */
body[data-design=premium] .pcard{background:var(--card);border:1px solid var(--line)}
body[data-design=premium] .pcard-body{gap:0;padding:12px 14px 14px}
body[data-design=premium] .pcard .pcat{margin-bottom:2px}
body[data-design=premium] .pcard .pname h3{margin:0;min-height:2.8em}
body[data-design=premium] .pcard .pc-price{margin-top:8px}
body[data-design=premium] .pcard .pc-price div{align-items:baseline;gap:2px 8px}
body[data-design=premium] .pcard .pc-from{font-size:12px;font-weight:500;color:var(--mute);margin-right:-2px}
body[data-design=premium] .pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:4px 0 14px;min-height:18px;font-size:12px;line-height:1.5;color:var(--mute)}
body[data-design=premium] .pc-meta .ps{display:inline-flex;align-items:center;gap:6px;padding:0;font-size:12px;font-weight:500;color:var(--mute)!important;background:none!important;border:0!important}
body[data-design=premium] .pc-meta .ps .ico{display:none}
body[data-design=premium] .pc-meta .ps::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
body[data-design=premium] .pc-meta .ps-low::before{background:var(--warn)}
body[data-design=premium] .pc-meta .ps-out{color:var(--bad)!important;font-weight:700}
body[data-design=premium] .pc-meta .ps-out::before{background:var(--bad)}
body[data-design=premium] .pc-meta .pc-plans{font:inherit;color:inherit}
body[data-design=premium] .pc-meta .pc-plans::before{content:"·";margin-right:10px}
body[data-design=premium] .pcard .pc-note{margin:-8px 0 12px;font-size:12px;color:var(--mute)}
body[data-design=premium] .pcard-body>.btn{margin-top:auto}
/* Badges: compact, in the corner, never over the subject */
body[data-design=premium] .pcard .pbadges{left:8px;top:8px}
body[data-design=premium] .pcard .pbadges .pb{font-size:11px;padding:2px 7px;gap:3px;border-radius:6px;line-height:1.5}
body[data-design=premium] .pcard .pbadges .pb .ico{width:12px;height:12px}
/* Card button: quiet at rest so the welcome box's "ดูสินค้า" stays the main call; full red on hover / keyboard focus. */
body[data-design=premium] .pcard .btn.pc-btn{background:color-mix(in srgb,var(--btn-bg,var(--accent)) 16%,var(--card))!important;background-color:color-mix(in srgb,var(--btn-bg,var(--accent)) 16%,var(--card))!important;
  border:1px solid color-mix(in srgb,var(--btn-bg,var(--accent)) 42%,transparent);color:var(--ink)!important;box-shadow:none!important;
  transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),color 180ms var(--ease-out),box-shadow 200ms var(--ease-out)}
body[data-design=premium] .pcard .btn.pc-btn::after{display:none}
body[data-design=premium] .pcard .btn.pc-btn:focus-visible,body[data-design=premium] .pcard:focus-within .btn.pc-btn{
  background:linear-gradient(180deg,var(--btn-bg,var(--accent)) 0%,var(--btn-bg,var(--accent)) 35%,color-mix(in srgb,var(--btn-bg,var(--accent)) 78%,#000) 100%)!important;background-color:var(--btn-bg,var(--accent))!important;
  border-color:color-mix(in srgb,var(--btn-bg,var(--accent)) 72%,#fff);color:var(--on-accent,#fff)!important;box-shadow:inset 0 1px 0 #ffffff2e,0 8px 20px -12px var(--glow)!important}
@media (hover:hover){
  body[data-design=premium] .pcard:not(.is-out):hover .btn.pc-btn,body[data-design=premium] .pcard .btn.pc-btn:hover{
    background:linear-gradient(180deg,var(--btn-bg,var(--accent)) 0%,var(--btn-bg,var(--accent)) 35%,color-mix(in srgb,var(--btn-bg,var(--accent)) 78%,#000) 100%)!important;background-color:var(--btn-bg,var(--accent))!important;
    border-color:color-mix(in srgb,var(--btn-bg,var(--accent)) 72%,#fff);color:var(--on-accent,#fff)!important;box-shadow:inset 0 1px 0 #ffffff2e,0 8px 20px -12px var(--glow)!important}
}
body[data-design=premium][data-motion=standard] .pcard .btn.pc-btn:not(:disabled):hover{transform:none}
:root[data-theme=light] body[data-design=premium] .pcard .btn.pc-btn{background:color-mix(in srgb,var(--btn-bg,var(--accent)) 8%,#fff)!important;background-color:color-mix(in srgb,var(--btn-bg,var(--accent)) 8%,#fff)!important;
  border-color:color-mix(in srgb,var(--btn-bg,var(--accent)) 35%,#fff);color:var(--accent-text)!important}
/* Sold out: still opens its details, but plainly not for sale now */
body[data-design=premium] .pcard.is-out .pc-price strong{color:var(--mute)}
body[data-design=premium] .pcard.is-out .pc-price s,body[data-design=premium] .pcard.is-out .pc-price em{display:none}

/* Hover / focus for every card: lift 2px and a red border; shadows stay neutral (no red light below the welcome box) */
body[data-design=premium] .pcard,body[data-design=premium] .p-cat2,body[data-design=premium] .p-bestc{transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out),box-shadow 220ms var(--ease-out)}
@media (hover:hover){
  body[data-design=premium] .pcard:hover,body[data-design=premium] .p-cat2:hover,body[data-design=premium] .p-bestc:hover{box-shadow:var(--sh-card-hover)}
  body[data-design=premium][data-motion=standard] .pcard:not(.is-out):hover,body[data-design=premium][data-motion=standard] .p-cat2:hover,body[data-design=premium][data-motion=standard] .p-bestc:hover{transform:translateY(-2px)}
  body[data-design=premium] .pcard.is-out:hover{box-shadow:var(--sh-card)}
}
:root[data-theme=light] body[data-design=premium] .pcard:not(.is-out):hover,:root[data-theme=light] body[data-design=premium] .p-cat2:hover,:root[data-theme=light] body[data-design=premium] .p-bestc:hover{box-shadow:var(--sh-card-hover)}
@media (max-width:760px){
  body[data-design=premium]{--sec-gap:40px;--head-gap:12px}
  body[data-design=premium] .pcard-body{padding:10px 10px 12px}
  body[data-design=premium] .pc-meta{margin-bottom:10px}
}
/* v25: the gap between sections is the margin alone (no extra padding stacked on it); room before the footer kept */
body[data-design=premium] #main>section.p-sec{padding-top:0;padding-bottom:0}
body[data-design=premium] #main>section.p-sec:last-child{padding-bottom:var(--sec-gap)}
/* v25: the card button always sits on the card's bottom edge (an older margin rule was more specific) */
body[data-design=premium] .pcard .pcard-body>.btn.full{margin-top:auto}
@media (max-width:760px){body[data-design=premium] .pcard .pbadges .pb .ico{display:none}body[data-design=premium] .pcard .pbadges .pb{font-size:10.5px;padding:2px 6px}}
/* v25: "วิธีซื้อ" step numbers readable on their tinted chip whatever red the shop picks (dark theme) */
:root:not([data-theme=light]) body[data-design=premium] .p-steps li>b{color:color-mix(in srgb,var(--accent) 62%,#fff)}

/* v26 — top-up page (Premium). A task page: the form leads, the balance and the steps for the chosen channel sit beside it
   (on phones: balance, form, steps). Same surfaces as v25: 16px corners, hairline border, card fill; red only where it
   means something (chosen channel, chosen amount, the main button). */
body[data-design=premium] .p-topup{max-width:1080px;padding-top:32px;padding-bottom:var(--sec-gap,56px)}
body[data-design=premium] .p-topup .p-head{margin-bottom:20px}
body[data-design=premium] .p-topup .p-head h1{margin:0}
body[data-design=premium] .tp-sub{margin:4px 0 0;color:var(--mute);font-size:14.5px}
body[data-design=premium] .tp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"main balance" "main help";grid-template-rows:auto 1fr;gap:16px;align-items:start}
body[data-design=premium] .tp-main{grid-area:main}body[data-design=premium] .tp-balance{grid-area:balance}body[data-design=premium] .tp-help{grid-area:help}
body[data-design=premium] .tp-main,body[data-design=premium] .tp-balance,body[data-design=premium] .tp-help,body[data-design=premium] .tp-hist{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,16px);box-shadow:var(--sh-card)}
body[data-design=premium] .tp-main{padding:24px}
body[data-design=premium] .tp-balance{padding:18px 20px;display:grid;gap:2px}
body[data-design=premium] .tp-balance small{font-size:13px;color:var(--mute)}
body[data-design=premium] .tp-balance b{font-size:34px;line-height:1.15;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
body[data-design=premium] .tp-balance span{font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Channels: each says how the money arrives */
body[data-design=premium] .tp-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:0 0 20px}
body[data-design=premium] .tp-tabs button,body[data-design=premium] .tp-one{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);text-align:left;font:inherit;
  transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
body[data-design=premium] .tp-one{margin:0 0 20px}
body[data-design=premium] .tp-tabs .ico,body[data-design=premium] .tp-one .ico{width:20px;height:20px;flex:none;color:var(--mute)}
body[data-design=premium] .tp-tabs b,body[data-design=premium] .tp-one b{display:block;font-size:14.5px;font-weight:700;line-height:1.35}
body[data-design=premium] .tp-tabs small,body[data-design=premium] .tp-one small{display:block;font-size:12.5px;color:var(--mute);line-height:1.4}
body[data-design=premium] .tp-tabs button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}
body[data-design=premium] .tp-tabs button.on{border-color:color-mix(in srgb,var(--accent) 75%,var(--line-2));background:color-mix(in srgb,var(--accent) 10%,var(--card))}
body[data-design=premium] .tp-tabs button.on .ico{color:var(--accent-text)}
/* Form */
body[data-design=premium] .tp-form{display:grid;gap:14px;margin:0}
body[data-design=premium] .tp-amount{display:grid;gap:8px;margin:0}
body[data-design=premium] .tp-amount>span:first-child,body[data-design=premium] .tp-label{font-size:13.5px;font-weight:600;color:var(--ink)}
body[data-design=premium] .tp-label{display:grid;gap:8px;margin:0}
body[data-design=premium] .tp-field{display:flex;align-items:center;gap:10px;height:64px;padding:0 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--field);transition:border-color 160ms,box-shadow 160ms}
body[data-design=premium] .tp-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
body[data-design=premium] .tp-field em{font-style:normal;font-size:24px;font-weight:700;color:var(--mute)}
body[data-design=premium] .tp-field input{flex:1;min-width:0;height:auto;padding:0;border:0!important;background:none!important;box-shadow:none!important;outline:none;font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
body[data-design=premium] .tp-field input::-webkit-inner-spin-button,body[data-design=premium] .tp-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body[data-design=premium] .tp-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
body[data-design=premium] .tp-quick button{height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);font:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
body[data-design=premium] .tp-quick button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-2))}
body[data-design=premium] .tp-quick button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card))}
body[data-design=premium] .tp-hint{margin-top:-6px;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--mute);font-size:13px;line-height:1.55}
body[data-design=premium] .tp-note .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent-text)}
body[data-design=premium] .tp-go{min-height:52px;font-size:15.5px}
body[data-design=premium] .tp-go-amt{margin-left:8px;padding-left:10px;border-left:1px solid #ffffff59;font-variant-numeric:tabular-nums}
body[data-design=premium] .tp-go-amt:empty{display:none}
body[data-design=premium] .tp-main .bank-card{margin:0 0 16px;border-radius:12px}
body[data-design=premium] .tp-main .bonus-line{margin:0}
/* Steps for the chosen channel */
body[data-design=premium] .tp-help{padding:18px 20px}
body[data-design=premium] .tp-help h2{margin:0 0 14px;font-size:15px;font-weight:700}
body[data-design=premium] .tp-help ol{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px;counter-reset:tp}
body[data-design=premium] .tp-help li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.55;color:var(--ink);counter-increment:tp}
body[data-design=premium] .tp-help li::before{content:counter(tp);display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:12.5px;font-weight:800;
  background:color-mix(in srgb,var(--accent) 14%,var(--card-2));color:color-mix(in srgb,var(--accent) 62%,#fff)}
:root[data-theme=light] body[data-design=premium] .tp-help li::before{color:var(--accent-text)}
body[data-design=premium] .tp-help .link{display:inline-flex;align-items:center;gap:6px;font-size:13px}
body[data-design=premium] .tp-help .link .ico{width:15px;height:15px}
/* Histories */
body[data-design=premium] .tp-hist{margin-top:16px;padding:18px 20px}
body[data-design=premium] .tp-main .tp-hist{margin-top:20px;padding:0;border:0;box-shadow:none;background:none}
body[data-design=premium] .tp-hist h2{margin:0 0 6px;font-size:15px;font-weight:700}
body[data-design=premium] .tp-hist .line:last-child{border-bottom:0}
body[data-design=premium] .tp-hist .line b{font-variant-numeric:tabular-nums}
@media (max-width:1000px){body[data-design=premium] .tp-grid{grid-template-columns:minmax(0,1fr) 290px}}
@media (max-width:760px){
  body[data-design=premium] .p-topup{padding-top:16px}
  body[data-design=premium] .tp-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"balance" "main" "help";grid-template-rows:auto;gap:12px}
  body[data-design=premium] .tp-balance{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:14px 16px}
  body[data-design=premium] .tp-balance b{font-size:26px;order:2;margin-left:auto}
  body[data-design=premium] .tp-balance span{order:3;flex-basis:100%}
  body[data-design=premium] .tp-main{padding:16px}
  body[data-design=premium] .tp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-design=premium] .tp-tabs button{padding:10px 12px;gap:8px}
  body[data-design=premium] .tp-field{height:56px;padding:0 14px}
  body[data-design=premium] .tp-field input{font-size:26px}
  body[data-design=premium] .tp-quick{gap:6px}
  body[data-design=premium] .tp-quick button{height:42px;font-size:13.5px}
}
@media (max-width:760px){body[data-design=premium] .tp-tabs .ico{display:none}body[data-design=premium] .tp-tabs b{white-space:nowrap;font-size:14px}}
/* v26: placeholder words in fields readable (≥4.5:1) in both themes */
:root:not([data-theme=light]) body[data-design=premium] input::placeholder,:root:not([data-theme=light]) body[data-design=premium] textarea::placeholder{color:#8b8b95;opacity:1}
:root[data-theme=light] body[data-design=premium] input::placeholder,:root[data-theme=light] body[data-design=premium] textarea::placeholder{color:#6b6b75;opacity:1}
/* v26: slip picker in the page's own words; the real file field covers it, so click, keyboard and "required" still work */
body[data-design=premium] .tp-file{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:12px;border:1px dashed var(--line-2);background:var(--field);transition:border-color 160ms}
body[data-design=premium] .tp-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
body[data-design=premium] .tp-file:focus-within,body[data-design=premium] .tp-file:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2))}
body[data-design=premium] .tp-file:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
body[data-design=premium] .tp-file .btn{pointer-events:none;flex:none}
body[data-design=premium] .tp-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--mute)}
body[data-design=premium] .tp-file.has-file{border-style:solid}body[data-design=premium] .tp-file.has-file .tp-file-name{color:var(--ink)}
/* v26: every status in the top-up lists is a pill with words (green done, red refused, neutral waiting) */
body[data-design=premium] .tp-hist .line>span:not(.pay-state),body[data-design=premium] .tp-hist .pay-state>span{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--card-2);color:var(--mute);border:1px solid var(--line)}
body[data-design=premium] .tp-hist .line>span.ok,body[data-design=premium] .tp-hist .pay-state>span.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
body[data-design=premium] .tp-hist .line>span.bad,body[data-design=premium] .tp-hist .pay-state>span.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
/* v26: grid and form children may shrink, so a long file name is cut with "…" instead of widening the page */
body[data-design=premium] .tp-grid>*,body[data-design=premium] .tp-form,body[data-design=premium] .tp-label,body[data-design=premium] .tp-file{min-width:0}
body[data-design=premium] .tp-file-name{flex:1}

/* ===== v27 (3 Nov 2026): atmosphere per category/product, product finder, library — Premium only =====
   The atmosphere is a fixed layer behind the page (no layout effect, no clicks); it cross-fades in 600ms and drifts slowly
   only when the motion setting allows a moving background. No flashing: opacity is never looped. */
.ms-mood{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ms-mood .lm{position:absolute;inset:-6%;opacity:0;transition:opacity 600ms cubic-bezier(.16,1,.3,1)}
.ms-mood .lm.on{opacity:1}
.ms-mood .lm::before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;filter:blur(60px) saturate(1.2);opacity:.16;transform:scale(1.1)}
.ms-mood .lm::after{content:"";position:absolute;inset:0}
/* arena (games): embers low-left, a warm diagonal light */
.ms-mood .m-arena::after{background:radial-gradient(45% 55% at 12% 88%,#e11d2e3d,transparent 70%),radial-gradient(35% 40% at 88% 12%,#f9731626,transparent 70%),linear-gradient(115deg,transparent 40%,#e11d2e14 50%,transparent 60%)}
/* stage (streaming, music, video): a spotlight from above, red on the floor */
.ms-mood .m-stage::after{background:radial-gradient(40% 50% at 50% -5%,#a855f733,transparent 70%),radial-gradient(60% 35% at 50% 105%,#e11d2e33,transparent 70%)}
/* studio (programs, keys): cool steel rim light, a fine grid, red low */
.ms-mood .m-studio::after{background:radial-gradient(40% 45% at 92% 8%,#38bdf826,transparent 70%),radial-gradient(45% 45% at 6% 96%,#e11d2e2e,transparent 70%),
  repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 48px)}
@keyframes msDrift{from{transform:translate3d(-1.5%,1%,0)}to{transform:translate3d(1.5%,-1%,0)}}
body[data-bg-motion=on] .ms-mood .lm.on{animation:msDrift 16s ease-in-out infinite alternate}
.ms-mood.paused .lm{animation-play-state:paused!important}
body[data-motion=off] .ms-mood .lm,body[data-motion=reduced] .ms-mood .lm{transition-duration:0s}
@media (prefers-reduced-motion:reduce){.ms-mood .lm{transition:none!important;animation:none!important}}
:root[data-theme=light] .ms-mood .lm::before{opacity:.1}
:root[data-theme=light] .ms-mood .m-arena::after{background:radial-gradient(45% 55% at 12% 88%,#e11d2e1f,transparent 70%),radial-gradient(35% 40% at 88% 12%,#f973161a,transparent 70%)}
:root[data-theme=light] .ms-mood .m-stage::after{background:radial-gradient(40% 50% at 50% -5%,#a855f71f,transparent 70%),radial-gradient(60% 35% at 50% 105%,#e11d2e1a,transparent 70%)}
:root[data-theme=light] .ms-mood .m-studio::after{background:radial-gradient(40% 45% at 92% 8%,#0ea5e91a,transparent 70%),radial-gradient(45% 45% at 6% 96%,#e11d2e17,transparent 70%)}
/* the page itself stays on its own surfaces above the mood */
body[data-design=premium][data-mood]:not([data-mood=""]){background:transparent}
:root:not([data-theme=light]) body[data-design=premium][data-mood]:not([data-mood=""]){background:transparent}
html:has(body[data-mood]:not([data-mood=""])){background:var(--paper,#050505)}

/* Source tags: real / test / not specified — words, never colour alone */
.ms-src{display:inline-flex;align-items:center;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;vertical-align:1px;white-space:nowrap;border:1px solid}
.ms-src-real{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-bg)}
.ms-src-test{color:#d4a72c;border-color:#d4a72c66;background:#d4a72c14}
:root[data-theme=light] .ms-src-test{color:#8a6400;border-color:#8a640066;background:#fdf3d4}
.ms-src-none{color:var(--mute);border-color:var(--line-2);background:var(--card-2)}
.ms-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 20px;font-size:12.5px;color:var(--mute)}
.ms-sub{margin:4px 0 0;color:var(--mute);font-size:14.5px}
.ms-finder,.ms-lib{max-width:1080px;padding-top:32px;padding-bottom:var(--sec-gap,56px)}
.ms-finder .p-head h1,.ms-lib .p-head h1{margin:0}

/* Questions */
.ms-q{display:grid;gap:16px;padding:20px 22px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-card)}
.ms-q fieldset{border:0;margin:0;padding:0;min-width:0}
.ms-q legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:700;color:var(--ink)}
.ms-chips{display:flex;flex-wrap:wrap;gap:8px}
.ms-chip{position:relative;display:inline-flex}
.ms-chip input{position:absolute;opacity:0;width:1px;height:1px}
.ms-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color 160ms,background-color 160ms}
.ms-chip span:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-2))}
.ms-chip input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.ms-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ms-q .btn{justify-self:start}

/* Results */
.ms-h{display:flex;align-items:baseline;gap:8px;margin:32px 0 12px;font-size:18px}
.ms-h .count{font-size:13px;color:var(--mute);font-weight:500}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ms-res{display:grid!important;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px;flex-direction:row!important}
.ms-res-pic img{width:112px;height:112px;border-radius:12px;object-fit:cover;display:block}
.ms-res-body{display:grid;gap:8px;align-content:start;min-width:0}
.ms-res h3{margin:0;font-size:15px;line-height:1.4}.ms-res h3 a{color:var(--ink)}
.ms-price{margin:0;font-size:13px;color:var(--mute)}.ms-price b{font-size:18px;color:var(--ink)}
.ms-res .btn{justify-self:start;margin-top:2px}
.ms-why,.ms-dev,.ms-needs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ms-why li,.ms-dev li,.ms-needs li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;font-size:13px;line-height:1.5;color:var(--ink)}
.ms-why .ico,.ms-dev .ico,.ms-needs .ico{width:16px;height:16px;margin-top:2px}
.ms-why .y .ico,.ms-dev .y .ico{color:var(--ok)}.ms-why .u .ico,.ms-dev .u .ico{color:var(--mute)}.ms-why .n .ico,.ms-dev .n .ico{color:var(--bad)}
.ms-why .l .ico,.ms-needs .ico{color:var(--warn)}
.ms-dev .u span{color:var(--mute)}
.ms-note,.ms-ask,.ms-empty,.ms-none{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--mute);font-size:13px;line-height:1.55}
.ms-ask,.ms-empty{margin-top:20px;background:var(--card);padding:16px 18px}
.ms-ask b,.ms-empty b{display:block;color:var(--ink);font-size:14.5px}.ms-ask p,.ms-empty p{margin:2px 0 8px}
.ms-note .ico,.ms-ask .ico,.ms-empty .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent-text)}
.ms-out{margin-top:24px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.ms-out summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--mute)}
.ms-out ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--mute)}

/* Product page panel */
.ms-panel{display:grid;gap:14px;padding:18px 20px!important;border-radius:var(--r-card,16px);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))!important;background:var(--card)}
.ms-panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ms-panel h2{margin:0;font-size:17px}.ms-panel h3{margin:0 0 8px;font-size:13.5px;color:var(--mute);font-weight:700}
.ms-panel .link{display:inline-flex;align-items:center;gap:4px;font-size:13px}.ms-panel .link .ico{width:14px;height:14px}
.ms-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.ms-terms{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ms-terms li{display:grid;gap:2px;font-size:13px;line-height:1.5}.ms-terms b{color:var(--ink);font-size:13.5px}.ms-terms span{color:var(--mute)}
.ms-panel .btn{justify-self:start}

/* Library */
.ms-items{display:grid;gap:12px}
.ms-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-card)}
.ms-item.is-preview{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}
.ms-item-pic img{width:96px;height:96px;border-radius:12px;object-fit:cover;display:block}
.ms-item-body{display:grid;gap:8px;min-width:0}
.ms-item-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ms-item-h h3{margin:0;font-size:15.5px}
.ms-pill{padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--card-2))}
.ms-meta,.ms-term{margin:0;font-size:13px;color:var(--mute);line-height:1.5}
.ms-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ms-mask{flex:1 1 220px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--field);font-family:ui-monospace,Consolas,monospace;font-size:14px;letter-spacing:.5px;color:var(--ink);overflow-wrap:anywhere}
span.ms-mask{font-family:inherit;letter-spacing:0;color:var(--mute)}
.ms-code .btn .ico{width:15px;height:15px}
.ms-guide summary{cursor:pointer;font-size:13.5px;font-weight:600}
.ms-guide ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:13px;color:var(--ink)}
.ms-actions{margin:12px 0 0}

/* One entry card (home page / order history) — not a menu */
.ms-entry{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 18px;border-radius:var(--r-card,16px);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--card);color:var(--ink);transition:border-color 180ms}
.ms-entry:hover,.ms-entry:focus-visible{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.ms-entry>.ico{width:22px;height:22px;flex:none;color:var(--accent-text)}.ms-entry>.ico:last-child{width:18px;height:18px;margin-left:auto;color:var(--mute)}
.ms-entry b{display:block;font-size:14.5px}.ms-entry small{display:block;font-size:12.5px;color:var(--mute)}
.ms-term{display:flex;gap:6px;align-items:flex-start}.ms-term .ico{width:15px;height:15px;flex:none;margin-top:2px;color:var(--mute)}
.ms-muted{margin:0;font-size:13px;color:var(--mute);line-height:1.55}
.ms-res-pic .p-cat-ph,.ms-item-pic .p-cat-ph{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:12px}
.ms-lib .p-head p{margin:4px 0 0}

@media (max-width:760px){
  .ms-finder,.ms-lib{padding-top:16px}
  .ms-q{padding:16px}
  .ms-grid{grid-template-columns:minmax(0,1fr)}
  .ms-res{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px}.ms-res-pic img{width:80px;height:80px}
  .ms-cols{grid-template-columns:minmax(0,1fr)}
  .ms-item{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px}.ms-item-pic img{width:64px;height:64px}
}
.ms-h,.ms-item-h h3,.ms-res h3,.ms-panel h2{text-wrap:balance}
.ms-empty p,.ms-ask p,.ms-note,.ms-none,.ms-muted,.ms-sub{text-wrap:pretty}

/* ===== v29 (Nov 2026): logo — plates belong to the wrapper with room around the mark, so its tips are never cut ===== */
body[data-design=premium] .brand .brand-mark.lg,body[data-design=premium] .brand .lg-img{box-shadow:none}
body[data-design=premium] .pi-mark.lg{padding:9px;overflow:visible}
body[data-design=premium] .pw-mark.lg{padding:12px;overflow:visible}
body[data-design=premium] .pi-mark.lg .lg-img,body[data-design=premium] .pw-mark.lg .lg-img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
@media (max-width:760px){body[data-design=premium] .pi-mark.lg{padding:8px}body[data-design=premium] .pw-mark.lg{padding:10px}}

/* ===== v29: card hover "Atom Orbit" (hover.style atom). Only the pointed/focused card (.fx-on) runs it; the effect layers
   sit over the picture only — name, price, stock and button are never covered or blurred. Returns in ~220ms. ===== */
@property --ob-a{syntax:'<angle>';inherits:false;initial-value:0deg}
body[data-design=premium]{--fx:var(--fx-color,var(--accent))}
body[data-design=premium] .pcard{position:relative;isolation:isolate}
body[data-design=premium] .pcard-media{position:relative;overflow:hidden}
body[data-design=premium] .pcard-media img:not(.lg-img){transition:filter 220ms var(--ease-out,ease),transform 220ms var(--ease-out,ease)}
/* the frame: a thin light that runs around the border (masked ring), plus a soft glow */
body[data-design=premium][data-hover=atom] .pcard::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ob-a),transparent 0 58%,color-mix(in srgb,var(--fx) 65%,transparent) 74%,#fff 81%,var(--fx) 87%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity 220ms}
body[data-design=premium][data-hover=atom] .pcard.fx-on{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fx) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--fx) calc(30% * var(--fx-k,1)),transparent),0 18px 44px -18px color-mix(in srgb,var(--fx) calc(70% * var(--fx-k,1)),transparent)}
body[data-design=premium][data-hover=atom][data-motion=standard] .pcard.fx-on::before{opacity:1;animation:obRing calc(2.8s * var(--fx-t,1)) linear infinite}
@keyframes obRing{to{--ob-a:360deg}}
body[data-design=premium][data-hover=atom][data-motion=standard] .pcard.fx-on .pcard-media img:not(.lg-img){filter:brightness(.42) saturate(1.1) blur(1.5px);transform:scale(1.04)}
/* the orbit, inside the picture only */
.p-orbit{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity 220ms var(--ease-out,ease)}
.pcard.fx-on .p-orbit{opacity:1}
.p-orbit>*{grid-area:1/1}
.ob-glow{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fx) calc(55% * var(--fx-k,1)),transparent),transparent 70%)}
.ob-svg{width:min(86%,280px);max-height:96%;aspect-ratio:1;overflow:visible;fill:none}
.ob-svg ellipse{stroke:color-mix(in srgb,var(--fx) 75%,#fff);stroke-width:1.1;opacity:calc(.7 * var(--fx-k,1))}
.ob-svg circle{fill:#fff;filter:drop-shadow(0 0 3px var(--fx)) drop-shadow(0 0 7px var(--fx))}
.ob-mark.lg{position:relative;z-index:1;height:27%;max-width:34%;transform:scale(.9);transition:transform 260ms var(--ease-out,ease);filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 14px color-mix(in srgb,var(--fx) 70%,transparent))}
.pcard.fx-on .ob-mark.lg{transform:none}
/* over a darkened picture the light-on-dark logo reads in either theme */
.p-orbit .lg .logo-light{display:none!important}.p-orbit .lg .logo-dark{display:block!important}
/* the main button: more light and a small arrow move */
body[data-design=premium] .pcard .btn.pc-btn{gap:4px}
body[data-design=premium] .pcard .btn.pc-btn .ico{width:15px;height:15px;transition:transform 200ms var(--ease-out,ease)}
body[data-design=premium][data-hover=atom] .pcard.fx-on .btn.pc-btn{box-shadow:0 0 0 1px color-mix(in srgb,var(--fx) 55%,transparent),0 8px 24px -8px color-mix(in srgb,var(--fx) calc(80% * var(--fx-k,1)),transparent)}
body[data-design=premium]:not([data-motion=off]) .pcard.fx-on .btn.pc-btn .ico,body[data-design=premium]:not([data-motion=off]) .pcard .btn.pc-btn:hover .ico{transform:translateX(3px)}
/* reduced motion / Minimal: a still, clear frame only */
body[data-design=premium][data-hover=atom]:not([data-motion=standard]) .pcard.fx-on{transform:none}
@media (prefers-reduced-motion:reduce){.p-orbit{display:none}body[data-design=premium] .pcard::before{animation:none!important}body[data-design=premium] .pcard .btn.pc-btn .ico{transition:none}}

/* ===== v29: opening scene — a black–red energy core. Decoration is aria-hidden and takes no clicks except "ข้าม";
   one ring expands once, the page is revealed from the centre (no full-screen flash, no sound). ~1.2s ===== */
@property --sr{syntax:'<length>';inherits:false;initial-value:0px}
.scene{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(55% 55% at 50% 50%,#1c0508 0%,#090606 55%,#030303 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--sr),#000 calc(var(--sr) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--sr),#000 calc(var(--sr) + 1px));
  animation:scReveal 1200ms cubic-bezier(.6,0,.2,1) forwards}
@keyframes scReveal{0%,52%{--sr:0px}100%{--sr:150vmax}}
.scene.done{opacity:0;transition:opacity 220ms ease-out}
.sc-fx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sc-fx>*{grid-area:1/1}
.sc-ray{position:absolute;left:50%;top:50%;width:min(42vmin,340px);height:2px;margin-top:-1px;transform-origin:0 50%;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 85%,transparent) 55%,#fff);animation:scRay 560ms cubic-bezier(.3,.6,.2,1) forwards}
@keyframes scRay{0%{opacity:0;transform:rotate(var(--a)) translateX(55vmin) scaleX(1)}35%{opacity:.95}100%{opacity:0;transform:rotate(var(--a)) translateX(7vmin) scaleX(.15)}}
.sc-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--accent),0 0 2px #fff;opacity:0;
  animation:scSpark 620ms cubic-bezier(.3,.6,.2,1) forwards}
@keyframes scSpark{0%{opacity:0;transform:rotate(var(--a)) translateX(var(--d,36vmin))}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(5vmin)}}
.sc-ray:nth-child(1){--a:0deg}.sc-ray:nth-child(2){--a:45deg;animation-delay:30ms}.sc-ray:nth-child(3){--a:90deg;animation-delay:60ms}.sc-ray:nth-child(4){--a:135deg;animation-delay:20ms}
.sc-ray:nth-child(5){--a:180deg;animation-delay:50ms}.sc-ray:nth-child(6){--a:225deg;animation-delay:10ms}.sc-ray:nth-child(7){--a:270deg;animation-delay:40ms}.sc-ray:nth-child(8){--a:315deg;animation-delay:70ms}
.sc-spark:nth-child(9){--a:20deg;--d:30vmin}.sc-spark:nth-child(10){--a:62deg;--d:40vmin;animation-delay:40ms}.sc-spark:nth-child(11){--a:104deg;--d:34vmin;animation-delay:80ms}
.sc-spark:nth-child(12){--a:150deg;--d:42vmin;animation-delay:20ms}.sc-spark:nth-child(13){--a:196deg;--d:31vmin;animation-delay:60ms}.sc-spark:nth-child(14){--a:236deg;--d:38vmin;animation-delay:100ms}
.sc-spark:nth-child(15){--a:278deg;--d:44vmin;animation-delay:30ms}.sc-spark:nth-child(16){--a:318deg;--d:33vmin;animation-delay:70ms}.sc-spark:nth-child(17){--a:340deg;--d:46vmin;animation-delay:110ms}
.sc-spark:nth-child(18){--a:128deg;--d:28vmin;animation-delay:90ms}
.sc-core{width:min(34vmin,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 68%);opacity:0;
  animation:scCore 1000ms ease-out forwards}
@keyframes scCore{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.sc-ring{width:min(26vmin,200px);aspect-ratio:1;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 90%,#fff);
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 50%,transparent);opacity:0;
  animation:scRing 640ms 420ms cubic-bezier(.2,.7,.2,1) forwards}
@keyframes scRing{0%{opacity:0;transform:scale(.45)}18%{opacity:1}100%{opacity:0;transform:scale(7)}}
.sc-mark.lg{height:min(20vmin,132px);max-width:min(40vmin,260px);opacity:0;animation:scMark 1150ms cubic-bezier(.2,.7,.2,1) forwards;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 60%,transparent))}
.sc-mark .logo-light{display:none!important}.sc-mark .logo-dark{display:block!important}
@keyframes scMark{0%{opacity:0;transform:scale(.9)}28%{opacity:1;transform:scale(1)}58%{opacity:1;transform:scale(1)}82%{opacity:0;transform:scale(1.04)}100%{opacity:0}}
.scene.cine .sc-ring{border-width:3px}.scene.cine .sc-core{width:min(42vmin,320px)}
.sc-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:1;min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid #ffffff3a;background:#0009;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.sc-skip:hover{background:#000c;border-color:#fff7}.sc-skip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.scene{display:none}}

/* Hero: a faint grid joins the light (decoration, no clicks); Cinematic adds a little more glow. */
body[data-design=premium] .atmo-grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 44px);
  -webkit-mask:radial-gradient(70% 90% at 70% 40%,#000,transparent 75%);mask:radial-gradient(70% 90% at 70% 40%,#000,transparent 75%)}
:root[data-theme=light] body[data-design=premium] .atmo-grid{background:repeating-linear-gradient(0deg,#0000000a 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,#0000000a 0 1px,transparent 1px 44px)}
body[data-design=premium][data-level=cinematic] .atmo-glow{opacity:1;filter:saturate(1.15)}
body[data-design=premium] .p-atmo,body[data-design=premium] .p-atmo *{pointer-events:none}
html:not(.scene-go) .scene.srv{display:none}

/* ===== v29: banner, categories, sections, buttons ===== */
/* banner: a soft light passes once as a slide changes (crossfade itself is the Phase 1 opacity change) */
body[data-design=premium] .ps-slider{position:relative}
body[data-design=premium] .ps-slider::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,#fff 16%,transparent) 48%,color-mix(in srgb,var(--fx) 22%,transparent) 52%,transparent 70%);background-size:250% 100%;background-position:120% 0}
body[data-design=premium][data-motion=standard] .ps-slider.ps-sweep::after{animation:psSweep 700ms var(--ease-out,ease) forwards}
@keyframes psSweep{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-20% 0}}
/* categories: frame and picture answer the pointer, a step quieter than product cards */
@media (hover:hover){body[data-design=premium][data-motion=standard] .p-cat2:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--fx) 30%,transparent),0 14px 30px -20px color-mix(in srgb,var(--fx) 60%,transparent)}
  body[data-design=premium][data-motion=standard] .p-cat2 .p-cat2-img{transition:transform 260ms var(--ease-out,ease)}body[data-design=premium][data-motion=standard] .p-cat2:hover .p-cat2-img{transform:scale(1.02)}}
body[data-design=premium] .p-cat2:focus-visible{outline:2px solid var(--fx);outline-offset:3px}
/* section headings below the first screen: fade and rise 10px once */
body[data-design=premium] .p-head.sv{opacity:0;transform:translateY(10px)}
body[data-design=premium] .p-head.sv-in{opacity:1;transform:none;transition:opacity 420ms var(--ease-out,ease),transform 420ms var(--ease-out,ease)}
/* primary buttons: one light sweep on hover/focus, instant response on press; disabled shows none of it */
body[data-design=premium] .btn:not(.ghost){position:relative;overflow:hidden}
body[data-design=premium] .btn:not(.ghost)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 35%,#ffffff40 50%,transparent 65%);background-size:260% 100%;background-position:130% 0}
body[data-design=premium][data-motion=standard] .btn:not(.ghost):not(:disabled):not([aria-disabled=true]):hover::before,
body[data-design=premium][data-motion=standard] .btn:not(.ghost):not(:disabled):not([aria-disabled=true]):focus-visible::before{animation:btnSweep 650ms var(--ease-out,ease) forwards}
@keyframes btnSweep{0%{opacity:1;background-position:130% 0}100%{opacity:0;background-position:-30% 0}}
body[data-design=premium] .btn:disabled,body[data-design=premium] .btn[aria-disabled=true]{box-shadow:none!important;filter:saturate(.6)}
@media (prefers-reduced-motion:reduce){body[data-design=premium] .p-head.sv{opacity:1;transform:none}}
/* card picture → product picture (View Transitions; other browsers keep the page fade) */
body[data-design=premium] .p-gallery .product-img{view-transition-name:pimg}
::view-transition-group(pimg){animation-duration:340ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* FAQ answers, account menu and toasts share one short rhythm (quieter than the opening scene) */
body[data-design=premium][data-motion=standard] .p-faq details[open]>p{animation:mRise 220ms var(--ease-out,ease)}

/* ===== v30 (Nov 2026): the one storefront — settings from "หน้าตาและเอฟเฟกต์" ===== */
/* Logo: the mark floats on the page (files are transparent; the black plate was CSS). A plate is an option, off by default.
   Light may sit behind the mark, never a plate. */
body[data-design=premium][data-logo-plate=off] .pi-mark.lg,body[data-design=premium][data-logo-plate=off] .pw-mark.lg{width:auto;padding:0;background:none;border-radius:0;box-shadow:none;position:relative}
body[data-design=premium][data-logo-plate=off] .pi-mark.lg{height:84px;max-width:120px}
body[data-design=premium][data-logo-plate=off] .pw-mark.lg{height:112px;max-width:160px}
body[data-design=premium][data-logo-plate=off] .pi-mark.lg .lg-img,body[data-design=premium][data-logo-plate=off] .pw-mark.lg .lg-img{position:relative;filter:drop-shadow(0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent))}
@media (max-width:760px){body[data-design=premium][data-logo-plate=off] .pw-mark.lg{height:88px;max-width:124px}}
/* Fonts: the shop's own, or the visitor's system font */
body[data-design=premium][data-font=system]{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
/* The other two colours from "สี": the second light in the hero and the running light's tail */
body[data-design=premium] .atmo-glow.g2{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-2,var(--accent)) 42%,transparent),transparent)}

/* Banner: whole picture, framed; the light sits on the frame and passes softly over the top, never blurring the picture */
body[data-design=premium] .ps-slider,body[data-design=premium] .pr-main .ps-slider{border-radius:var(--bn-r,16px)}
body[data-design=premium][data-bn-frame=none] .pr-main .ps-slider,body[data-design=premium][data-bn-frame=none] .ps-slider{border-color:transparent}
body[data-design=premium][data-bn-frame=accent] .pr-main .ps-slider,body[data-design=premium][data-bn-frame=accent] .ps-slider{border-color:color-mix(in srgb,var(--fx) calc(55% * var(--bn-k,1)),var(--line))}
body[data-design=premium][data-bn-shadow=soft] .pr-main .ps-slider,body[data-design=premium][data-bn-shadow=soft] .ps-slider{box-shadow:0 14px 34px -22px #000c}
body[data-design=premium][data-bn-shadow=glow] .pr-main .ps-slider,body[data-design=premium][data-bn-shadow=glow] .ps-slider{box-shadow:0 0 0 1px color-mix(in srgb,var(--fx) calc(14% * var(--bn-k,1)),transparent),0 14px 44px -20px color-mix(in srgb,var(--fx) calc(70% * var(--bn-k,1)),transparent)}
body[data-design=premium][data-bn-edge=on] .ps-slider::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ob-a),transparent 0 66%,color-mix(in srgb,var(--fx) 70%,transparent) 80%,#fff 86%,var(--accent-3,var(--fx)) 91%,transparent 98%);opacity:var(--bn-k,1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
body[data-design=premium][data-bn-edge=on][data-motion=standard] .ps-slider::before{animation:obRing 14s linear infinite}
body[data-design=premium][data-bn-sweep=on][data-motion=standard] .ps-slider:not(.ps-sweep)::after{animation:bnSweep 9s ease-in-out infinite}
@keyframes bnSweep{0%,72%{opacity:0;background-position:120% 0}76%{opacity:calc(.55 * var(--bn-k,1))}100%{opacity:0;background-position:-20% 0}}
body[data-design=premium] .ps-slider.away::before,body[data-design=premium] .ps-slider.away::after,body[data-design=premium].tab-hidden .ps-slider::before,body[data-design=premium].tab-hidden .ps-slider::after{animation-play-state:paused!important}
body[data-design=premium] .ps-ctrl{z-index:4}

/* Stat cards, 2×2 */
body[data-design=premium] .pr-stat{position:relative;transition:border-color 200ms,box-shadow 200ms}
body[data-design=premium] .pr-stat b i{font-style:normal;font-variant-numeric:tabular-nums}
body[data-design=premium][data-st-bg=tint] .pr-stat{background:color-mix(in srgb,var(--fx) 9%,var(--card))}
body[data-design=premium][data-st-bg=glass] .pr-stat{background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(8px)}
body[data-design=premium][data-st-border=accent] .pr-stat{border-color:color-mix(in srgb,var(--fx) 42%,var(--line))}
body[data-design=premium][data-st-border=none] .pr-stat{border-color:transparent}
body[data-design=premium][data-st-icon=none] .pr-stat>span{display:none}
body[data-design=premium][data-st-icon=plain] .pr-stat>span{background:none;box-shadow:none;width:auto;height:auto}
body[data-design=premium][data-st-color=neutral] .pr-stat>span,body[data-design=premium][data-st-color=neutral] .pr-stat>span .ico{color:var(--mute)}
body[data-design=premium][data-st-color=neutral] .pr-stat>span{background:var(--card-2)}
@media (hover:hover){body[data-design=premium][data-st-hover=on] .pr-stat:hover{border-color:color-mix(in srgb,var(--fx) 60%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--fx) 22%,transparent),0 10px 26px -16px color-mix(in srgb,var(--fx) 70%,transparent)}}
body[data-design=premium][data-st-appear=on][data-motion=standard] .pr-stat-grid:not(.st-seen) .pr-stat{animation:mRise 420ms var(--ease-out,ease) backwards}
body[data-design=premium] .pr-stat:nth-child(2){animation-delay:60ms!important}body[data-design=premium] .pr-stat:nth-child(3){animation-delay:120ms!important}body[data-design=premium] .pr-stat:nth-child(4){animation-delay:180ms!important}

/* Sold label */
body[data-design=premium] .pc-sold{display:flex;align-items:center;gap:5px;margin:2px 0 0;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .pc-sold .ico,body[data-design=premium] .p-soldw .ico{width:14px;height:14px;color:var(--accent-text)}
body[data-design=premium] .p-soldw{display:inline-flex;align-items:center;gap:5px}
/* Small best-seller box */
body[data-design=premium] .pr-best a em strong{color:var(--accent-text);font-weight:700;margin-right:4px}
/* Large BEST SELLER row: what the list is on the left, products on the right */
body[data-design=premium] .p-bs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
body[data-design=premium] .p-bs-lead{position:relative;overflow:hidden;display:grid;align-content:center;gap:6px;padding:24px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card)}
body[data-design=premium] .p-bs-lead small{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--mute)}
body[data-design=premium] .p-bs-lead small .ico{width:18px;height:18px;color:var(--accent-text)}
body[data-design=premium] .p-bs-lead h2{margin:0;font-size:22px}
body[data-design=premium] .p-bs-lead p{margin:0;font-size:13px;color:var(--mute)}
body[data-design=premium] .p-bs-lead>i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;font-size:56px;line-height:1;color:color-mix(in srgb,var(--ink) 6%,transparent);pointer-events:none;white-space:nowrap}
body[data-design=premium] .p-bs-list{display:grid;gap:12px;min-width:0}
body[data-design=premium] .p-bs-item{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:16px;padding-right:16px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);overflow:hidden;transition:border-color 200ms,box-shadow 200ms}
@media (hover:hover){body[data-design=premium] .p-bs-item:hover{border-color:color-mix(in srgb,var(--fx) 50%,var(--line));box-shadow:0 12px 30px -20px color-mix(in srgb,var(--fx) 70%,transparent)}}
body[data-design=premium] .p-bs-pic{display:block;align-self:stretch;min-height:112px}
body[data-design=premium] .p-bs-pic img,body[data-design=premium] .p-bs-pic .mini-thumb{display:block;width:100%;height:100%;min-height:112px;object-fit:cover;border-radius:0}
body[data-design=premium] .p-bs-t{min-width:0;padding:12px 0}
body[data-design=premium] .p-bs-t h3{margin:0 0 6px;font-size:15px;line-height:1.4}
body[data-design=premium] .p-bs-t h3 a{color:var(--ink)}
body[data-design=premium] .p-bs-t p{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .p-bs-t p span{display:inline-flex;align-items:center;gap:4px}
body[data-design=premium] .p-bs-t .ico{width:14px;height:14px}
body[data-design=premium] .p-bs-buy{display:grid;justify-items:end;gap:8px}
body[data-design=premium] .p-bs-buy b{font-size:18px;color:var(--accent-text);font-variant-numeric:tabular-nums}
body[data-design=premium] .p-bs-buy .btn{white-space:nowrap}
body[data-design=premium] .p-bs-item.is-out .p-bs-pic img{filter:grayscale(.7) brightness(.75)}
@media (max-width:900px){body[data-design=premium] .p-bs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){body[data-design=premium] .p-bs-lead>i{display:none}
  body[data-design=premium] .p-bs-item{grid-template-columns:88px minmax(0,1fr);padding-right:0}
  body[data-design=premium] .p-bs-pic{grid-row:1/3;min-height:0}body[data-design=premium] .p-bs-t{padding:12px 12px 0 0}
  body[data-design=premium] .p-bs-buy{display:flex;justify-content:space-between;align-items:center;padding:0 12px 12px 0}}

/* Older card effects on the one card: over the picture only, while pointed at or focused */
body[data-design=premium] .pcard:hover .hv-layer,body[data-design=premium] .pcard:focus-within .hv-layer{opacity:1}
body[data-design=premium] .pcard:hover .hv-layer,body[data-design=premium] .pcard:hover .hv-layer *,body[data-design=premium] .pcard:focus-within .hv-layer,body[data-design=premium] .pcard:focus-within .hv-layer *{animation-play-state:running!important}
body[data-design=premium][data-hover=tilt] .pcard:hover{transform:perspective(700px) rotateX(3deg) rotateY(-3deg)}
body[data-design=premium] .hv-always .hv-layer{opacity:0}
/* Sold-out looks from the add-on */
body[data-design=premium] .pcard.is-out .so-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* Navbar styles */
body[data-design=premium] .bar.nav-flat{background:var(--paper);backdrop-filter:none}
body[data-design=premium] .bar.nav-minimal{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body[data-design=premium] .bar.nav-glass{background:color-mix(in srgb,var(--paper) 62%,transparent);backdrop-filter:blur(14px) saturate(1.2)}
/* Falling effects and the product background never take clicks or sit over the words */
body[data-design=premium] #fx,body[data-design=premium] #pbgFull,body[data-design=premium] #pbgFull *{pointer-events:none}
body[data-design=premium] #pbgFull{position:fixed;inset:0;z-index:-1;opacity:.28}
/* Phone */
@media (max-width:760px){body[data-design=premium][data-mb-cols="1"] .p-grid{grid-template-columns:minmax(0,1fr)!important}
  body[data-design=premium][data-mb-tabbar=off] .p-tabbar{display:none}body[data-design=premium][data-mb-tabbar=off]{padding-bottom:0}}

/* ===== Top-up, one column: balance, channels, recent ===== */
body[data-design=premium] .p-topup2{max-width:640px;padding-top:24px;padding-bottom:var(--sec-gap,56px);display:grid;gap:20px}
body[data-design=premium] .tp2-card{position:relative;overflow:hidden;display:grid;gap:2px;padding:24px;border-radius:24px;color:#fff;background:var(--accent);box-shadow:0 18px 48px -20px color-mix(in srgb,var(--accent) 80%,transparent)}
body[data-design=premium] .tp2-card>i{position:absolute;border-radius:50%;pointer-events:none}
body[data-design=premium] .tp2-card .c1{width:210px;height:210px;left:-44px;top:-30px;background:#00000024}
body[data-design=premium] .tp2-card .c2{width:190px;height:190px;right:-34px;top:-44px;background:#ffffff1f}
body[data-design=premium] .tp2-card>small,body[data-design=premium] .tp2-card>b,body[data-design=premium] .tp2-card>span{position:relative}
body[data-design=premium] .tp2-card>small{display:flex;align-items:center;gap:6px;font-size:14px}
body[data-design=premium] .tp2-card>small .ico{width:18px;height:18px}
body[data-design=premium] .tp2-card>b{font-size:40px;line-height:1.2;font-variant-numeric:tabular-nums}
body[data-design=premium] .tp2-card>span{font-size:13.5px}
body[data-design=premium] .tp2-h{margin:4px 0 -8px;font-size:18px;font-weight:600}
body[data-design=premium] .tp2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-design=premium] .tp2-grid.one{grid-template-columns:minmax(0,1fr)}
body[data-design=premium] .tp2-ch{display:grid;justify-items:center;text-align:center;gap:8px;padding:20px 12px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);color:var(--ink);transition:border-color 180ms,box-shadow 180ms,transform 180ms}
@media (hover:hover){body[data-design=premium] .tp2-ch:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 12px 28px -18px color-mix(in srgb,var(--accent) 70%,transparent)}}
body[data-design=premium][data-motion=standard] .tp2-ch:hover{transform:translateY(-2px)}
body[data-design=premium] .tp2-ch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-design=premium] .tp2-ch b{font-size:15px}
body[data-design=premium] .tp2-ch small{font-size:12px;line-height:1.5;color:var(--mute)}
body[data-design=premium] .tp2-ico{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:16px;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 16%,var(--card))}
body[data-design=premium] .tp2-ico .ico{width:26px;height:26px}
body[data-design=premium] .tp2-recent{display:grid;gap:12px;margin-top:8px}
body[data-design=premium] .tp2-recent-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
body[data-design=premium] .tp2-recent-h h2{margin:0;font-size:18px}
body[data-design=premium] .tp2-recent-h .link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--mute)}
body[data-design=premium] .tp2-recent-h .ico{width:16px;height:16px}
body[data-design=premium] .tp2-empty{display:grid;justify-items:center;gap:8px;padding:40px 16px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);color:var(--mute)}
body[data-design=premium] .tp2-empty p{margin:0}
body[data-design=premium] .tp2-empty .ico{width:26px;height:26px}
body[data-design=premium] .tp2-rows{display:grid;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);overflow:hidden}
body[data-design=premium] .tp2-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
body[data-design=premium] .tp2-row+.tp2-row{border-top:1px solid var(--line)}
body[data-design=premium] .tp2-row>div{display:grid;min-width:0}
body[data-design=premium] .tp2-row small{color:var(--mute);font-size:12.5px;overflow-wrap:anywhere}
body[data-design=premium] .tp2-back{display:inline-flex;align-items:center;gap:6px;justify-self:start;min-height:40px;font-size:14px;color:var(--mute)}
body[data-design=premium] .tp2-back:hover{color:var(--ink)}
body[data-design=premium] .tp2-back .ico{width:16px;height:16px}
body[data-design=premium] .tp2-form{display:grid;gap:16px;padding:20px;border-radius:var(--r-card,16px);border:1px solid var(--line);background:var(--card);min-width:0}
body[data-design=premium] .tp2-form form,body[data-design=premium] .tp2-form label{min-width:0}
body[data-design=premium] .tp2-form-h{display:flex;align-items:center;gap:12px}
body[data-design=premium] .tp2-form-h h1{margin:0;font-size:18px}
body[data-design=premium] .tp2-form-h small{color:var(--mute);font-size:12.5px}
body[data-design=premium] .tp2-how summary{cursor:pointer;font-size:14px;font-weight:600}
body[data-design=premium] .tp2-how ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;color:var(--mute)}
@media (max-width:420px){body[data-design=premium] .tp2-card>b{font-size:34px}body[data-design=premium] .tp2-ch{padding:16px 8px}}
body[data-design=premium] .tp2-ch{align-content:start}
body[data-design=premium] .pr-best a em{display:block;white-space:normal;color:var(--mute);font-style:normal;font-size:12.5px;line-height:1.45}
body[data-design=premium] .pr-best a>span{min-width:0}
body[data-design=premium] .pr-best a b{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
body[data-design=premium][data-st-icon=plain][data-st-color=neutral] .pr-stat>span{background:none}
body[data-design=premium][data-bn-shadow=none] .pr-main .ps-slider,body[data-design=premium][data-bn-shadow=none] .ps-slider{box-shadow:none}
body[data-design=premium] .so-stamp em{background:#c81e1e}
@media (max-width:760px){body[data-design=premium] .pcard .pb{font-size:11px}}

/* ===== v31 (Nov 2026): home row. The stats are their own group at the top of the middle column: never stretched to the height of
   the banner or Discord (the old space-between pulled the two rows apart). An odd last card takes the full width, so no hole. ===== */
@media (min-width:1101px){body[data-design=premium] .p-row3:not(.full) .pr-stats{align-self:start;justify-content:flex-start}
  body[data-design=premium] .p-row3:not(.full) .pr-stat-grid{flex:none;align-content:start;grid-auto-rows:auto}}
body[data-design=premium] .pr-stats{gap:14px}
body[data-design=premium] .pr-stat-grid{gap:14px;grid-auto-rows:auto;align-content:start}
body[data-design=premium] .pr-stat:last-child:nth-child(odd){grid-column:1/-1}

/* Landing: the logo keeps its whole box; about 22px to the label below it, on every screen (row gap 18 + 4), with nothing moving it */
body[data-design=premium] .pw-logo{display:grid;place-items:center}
body[data-design=premium] .pw-logo+.pw-badge{margin-top:4px}
/* Opening scene: its logo has gone before the reveal reaches the page's own logo, so two are never seen together */
@keyframes scMark{0%{opacity:0;transform:scale(.9)}28%{opacity:1;transform:scale(1)}46%{opacity:1;transform:scale(1)}56%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* v31: the logo box is as tall as the picture. .pw-mark and .pi-mark are display:grid with a fixed height, so a picture wider than that box
   overflowed it and the badge below sat on the mark. The limits go on the picture, which keeps its own ratio from its width and height. */
body[data-design=premium][data-logo-plate=off] .pw-mark.lg,body[data-design=premium][data-logo-plate=off] .pi-mark.lg{display:block;height:auto;max-width:none}
body[data-design=premium][data-logo-plate=off] .pw-mark.lg>.lg-img{width:auto;height:auto;max-width:160px;max-height:150px}
body[data-design=premium][data-logo-plate=off] .pi-mark.lg>.lg-img{width:auto;height:auto;max-width:120px;max-height:112px}
@media (max-width:760px){body[data-design=premium][data-logo-plate=off] .pw-mark.lg{height:auto;max-width:none}
  body[data-design=premium][data-logo-plate=off] .pw-mark.lg>.lg-img{max-width:124px;max-height:116px}}
/* v31: the column already spaces its children */
body[data-design=premium] .pr-main>.ms-entry{margin-top:0}
/* ===== v33 (Nov 2026): เพลงประจำร้าน — the player card. Colours come from the shop's accent; text and buttons stay readable on either theme.
   Three places, chosen by the room on screen (music.js): float = a card in the empty gutter beside the content; dock = a full-width bar the page reserves;
   bar = the same above the phone's bottom menu, opening into a sheet. ===== */
.mu{--mu-ink:#fff;--mu-sub:#ffffffc9;--mu-line:#ffffff26;--mu-btn:#fff;--mu-btn-ink:#121216;--mu-track:#ffffff33;
  --mu-bg:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#0c0c0f),color-mix(in srgb,var(--accent) 16%,#0c0c0f));--mu-solid:color-mix(in srgb,var(--accent) 22%,#0c0c0f);
  position:fixed;z-index:35;left:0;right:0;bottom:var(--mu-bottom,0px);font-size:14px;color:var(--mu-ink);pointer-events:none}
:root[data-theme=light] .mu{--mu-ink:#14141a;--mu-sub:#14141ac4;--mu-line:#14141a22;--mu-btn:#14141a;--mu-btn-ink:#fff;--mu-track:#14141a2b;
  --mu-bg:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,#fff),color-mix(in srgb,var(--accent) 7%,#fff));--mu-solid:color-mix(in srgb,var(--accent) 12%,#fff)}
.mu[hidden]{display:none}
.mu audio{display:none}
.mu-card{position:relative;pointer-events:auto;background:var(--mu-bg);border:1px solid var(--mu-line);box-shadow:0 14px 34px -20px #000c}
.mu-bar{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px}
.mu button{min-width:44px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.mu button:hover{background:color-mix(in srgb,var(--mu-ink) 12%,transparent)}
.mu button:focus-visible,.mu input:focus-visible{outline:2px solid var(--mu-ink);outline-offset:2px}
.mu .ico{width:18px;height:18px;flex:none}
.mu-cover{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--accent) 55%,var(--mu-solid));color:var(--mu-ink)}
.mu-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.mu-cover.has-img img{opacity:1}
.mu-cover-fb{display:grid;place-items:center}.mu-cover.has-img .mu-cover-fb{visibility:hidden}
.mu-open{flex:1 1 auto;min-width:0;gap:8px;justify-content:flex-start!important;padding:0 4px!important;border-radius:10px!important;text-align:left}
.mu-open-txt{display:grid;min-width:0}
.mu-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.mu-open-txt{gap:3px}
.mu[data-state=error] .mu-open-txt .mu-eq,.mu[data-state=blocked] .mu-open-txt .mu-eq,.mu[data-state=loading] .mu-open-txt .mu-eq{display:none}
.mu[data-mode=float] .mu-bar .mu-mute{min-width:36px}
.mu-status{display:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--mu-sub)}
.mu[data-state=error] .mu-status,.mu[data-state=blocked] .mu-status,.mu[data-state=loading] .mu-status{display:block}
.mu-chev{display:inline-flex;margin-left:auto;color:var(--mu-sub);transition:transform 180ms var(--ease-out,ease)}.mu.open .mu-chev{transform:rotate(180deg)}
.mu .mu-play{flex:none;background:var(--mu-btn);color:var(--mu-btn-ink)}.mu .mu-play:hover{background:color-mix(in srgb,var(--mu-btn) 86%,var(--mu-solid))}
.mu-play span{margin-left:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.mu[data-state=blocked] .mu-play,.mu[data-state=error] .mu-play{padding:0 14px}
.mu-eq{display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:14px;flex:none;color:var(--mu-ink)}
.mu-eq i{flex:1;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;transform:scaleY(.28)}
.mu[data-state=playing] .mu-eq i{animation:muEq 1.1s ease-in-out infinite alternate}
.mu-eq i:nth-child(2){animation-delay:-.45s!important}.mu-eq i:nth-child(3){animation-delay:-.8s!important}.mu-eq i:nth-child(4){animation-delay:-.2s!important}
@keyframes muEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mu[data-state=playing] .mu-eq i{animation:none;transform:scaleY(.7)}.mu-chev{transition:none}}
body[data-motion=off] .mu[data-state=playing] .mu-eq i{animation:none;transform:scaleY(.7)}
.mu-panel{display:grid;gap:6px;padding:14px 14px 4px;min-width:0}.mu-panel[hidden]{display:none}
.mu-panel-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}
.mu-panel-h .mu-cover{width:88px;height:88px;border-radius:10px}.mu-panel-h .mu-cover .ico{width:30px;height:30px}
.mu-panel-txt{display:grid;gap:3px;min-width:0;justify-items:start}
.mu-panel-t{overflow-wrap:anywhere;font-size:14.5px;line-height:1.3}.mu-artist{color:var(--mu-sub);font-size:12.5px;overflow-wrap:anywhere}.mu-artist[hidden]{display:none}
.mu .mu-close{gap:4px;padding:0 10px;min-width:44px;font-size:12.5px;border:1px solid var(--mu-line)}
.mu input[type=range]{width:100%;min-width:0;height:28px;margin:0;background:none;accent-color:var(--mu-ink);cursor:pointer}.mu input[type=range]:disabled{opacity:.45;cursor:default}
.mu-times{display:flex;justify-content:space-between;font-size:12px;color:var(--mu-sub);font-variant-numeric:tabular-nums;margin-top:-6px}
.mu-sound{display:flex;align-items:center;gap:2px}.mu-vol-n{flex:none;width:36px;text-align:right;font-size:12.5px;color:var(--mu-sub);font-variant-numeric:tabular-nums}
.mu .mu-loop[aria-pressed=false]{color:var(--mu-sub);opacity:.75}.mu .mu-loop[aria-pressed=true]{background:color-mix(in srgb,var(--mu-ink) 16%,transparent)}
.mu-back{position:fixed;inset:0;pointer-events:auto;background:#0009}.mu-back[hidden]{display:none}

/* float: a card in the empty gutter, outside the content */
.mu[data-mode=float]{left:auto;right:auto;width:var(--mu-w,300px)}
.mu[data-mode=float][data-corner=left]{left:16px}.mu[data-mode=float][data-corner=right]{right:16px}
.mu[data-mode=float] .mu-card{border-radius:16px}
.mu[data-mode=float].open .mu-open{display:none}.mu[data-mode=float].open .mu-bar>.mu-cover,.mu[data-mode=float].open .mu-bar>.mu-mute{display:none}
.mu[data-mode=float].open .mu-bar{justify-content:center}


/* dock and bar: a strip the page reserves, with the player at the owner's corner; a thin line shows the time */
.mu[data-mode=dock] .mu-card,.mu[data-mode=bar] .mu-card{border-width:1px 0 0;border-radius:0}
.mu[data-mode=dock] .mu-card::before,.mu[data-mode=bar] .mu-card::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:var(--mu-progress,0%);background:var(--mu-ink);pointer-events:none}
.mu[data-mode=dock] .mu-bar{width:min(440px,100%);padding-inline:16px}
.mu[data-mode=dock][data-corner=right] .mu-bar{margin-left:auto}
.mu[data-mode=dock] .mu-panel{position:absolute;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 32px));padding:14px;background:var(--mu-bg),var(--mu-solid);border:1px solid var(--mu-line);border-radius:16px;box-shadow:0 14px 34px -20px #000c}
.mu[data-mode=dock][data-corner=left] .mu-panel{left:16px}.mu[data-mode=dock][data-corner=right] .mu-panel{right:16px}
.mu[data-mode=bar] .mu-panel{position:fixed;z-index:1;left:8px;right:8px;bottom:calc(var(--mu-bottom,0px) + 64px);max-height:calc(100dvh - var(--mu-bottom,0px) - 80px);overflow:auto;padding:14px;background:var(--mu-bg),var(--mu-solid);border:1px solid var(--mu-line);border-radius:16px}
.mu[data-mode=bar] .mu-bar{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))}
/* with nothing below the bar, it clears the phone's home indicator itself */
.mu[data-mode=bar][data-below=no] .mu-bar{padding-bottom:calc(6px + env(safe-area-inset-bottom))}

/* Real room for the strip, and the things that float move above it */
body[data-design=premium][data-music-mode=dock] #shop,body[data-design=premium][data-music-mode=bar] #shop{padding-bottom:var(--mu-reserve,76px)}
html:has(body[data-music-mode=dock]),html:has(body[data-music-mode=bar]){scroll-padding-bottom:var(--mu-reserve,76px)}
body[data-design=premium][data-music-mode=dock] #recent,body[data-design=premium][data-music-mode=bar] #recent,body[data-design=premium][data-music=left][data-music-mode=float] #recent{bottom:var(--mu-stack,84px)}
body[data-design=premium][data-music-mode=dock] #toast,body[data-design=premium][data-music-mode=bar] #toast{bottom:var(--mu-stack,84px)}
/* ===== v35 (Nov 2026): the product background, on the Premium storefront. Never over the words or the clicks: inside the hero card under its text, or a fixed layer behind the page. ===== */
body[data-design=premium] #pbgFull{opacity:1}
body[data-design=premium] #pbgFull .pbg{position:absolute;inset:0;height:auto}
body[data-design=premium] #pbgFull .pbg-stage{opacity:.5;width:112%;right:-6%}
body[data-design=premium] #pbgFull .pbg::after{background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--paper) 62%,transparent),color-mix(in srgb,var(--paper) 30%,transparent) 88%)}
body[data-design=premium] .p-intro2>.pbg{position:absolute;inset:0;height:auto;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 72%);mask-image:linear-gradient(90deg,transparent 26%,#000 72%)}
body[data-design=premium] .p-intro2>.pbg::after{display:none}
body[data-design=premium] .p-intro2>.pbg .pbg-stage{top:-70%;right:-4%;width:62%;height:300%;opacity:.62}
body[data-design=premium] .p-intro2>.p-atmo{z-index:0}
.pbg-tile{display:block;width:100%;aspect-ratio:1;flex:none;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 48%,var(--paper)),color-mix(in srgb,var(--accent) 12%,var(--paper)))}
.pbg-col{will-change:transform}
.pbg.lite .pbg-col{will-change:auto}
body.tab-hidden .pbg-col{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.pbg-col,.pbg-col.down{animation:none!important;will-change:auto}}
body[data-motion=off] .pbg-col,body[data-motion=off] .pbg-col.down{animation:none!important;will-change:auto}
@media (max-width:760px){body[data-design=premium] .p-intro2>.pbg .pbg-stage{width:110%;right:-36%;opacity:.42}
  body[data-design=premium] #pbgFull .pbg-stage{width:150%;right:-30%;opacity:.42}}
.ts-msg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ts-wait{color:var(--mute);font-size:12.5px}

/* ===== v39 product page (Premium): picture and facts left, one buying card right. Colours are the shop's tokens only. ===== */
body[data-design=premium] .pd{max-width:1136px}
body[data-design=premium] .pd .p-crumbs{margin-bottom:14px}
body[data-design=premium] .pd-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);grid-template-rows:auto auto 1fr;column-gap:26px;align-items:start}
body[data-design=premium] .pd-left{grid-column:1;grid-row:1/-1;display:grid;gap:14px;min-width:0}
body[data-design=premium] .pd-head,body[data-design=premium] .pd-buy{grid-column:2;background:var(--card);border:1px solid var(--line);min-width:0}
body[data-design=premium] .pd-head{grid-row:1;border-bottom:0;border-radius:16px 16px 0 0;padding:22px 24px 16px;display:grid;gap:12px}
body[data-design=premium] .pd-head h1{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.3;overflow-wrap:anywhere;text-wrap:balance}
body[data-design=premium] .pd-buy{grid-row:2;border-top:0;border-radius:0 0 16px 16px;padding:0 24px 24px}
body[data-design=premium] .pd-more{grid-column:2;grid-row:3;margin-top:14px;display:grid;gap:8px;min-width:0}
/* The picture is shown whole: a tall or wide image is letterboxed, words baked into it are never cropped. */
body[data-design=premium] .pd .p-gallery{border-radius:16px}
body[data-design=premium] .pd .p-gallery .product-img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--card-2)}
/* Sections inside the card: a hairline apart, tight within. */
body[data-design=premium] .pd-sec{padding:16px 0;border-top:1px solid var(--line)}
body[data-design=premium] .pd-box>.pd-sec:first-child{border-top:1px solid var(--line)}
body[data-design=premium] .pd h2{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;line-height:1.4}
body[data-design=premium] .pd h2 .ico{width:16px;height:16px;color:var(--accent-text);flex:none}
body[data-design=premium] .pd-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
body[data-design=premium] .pd-sec-h>span{font-size:12.5px;color:var(--mute);white-space:nowrap}
body[data-design=premium] .pd-desc{margin:8px 0 0;color:var(--mute);font-size:14.5px;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere;max-width:70ch}
body[data-design=premium] .pd-desc.is-long:not(.is-open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
body[data-design=premium] .pd-readmore{display:inline-block;margin-top:4px;padding:6px 0;font-size:13.5px;background:none;border:0}
/* Plans */
body[data-design=premium] .pd-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-design=premium] .pd-plan{display:grid;align-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);cursor:pointer;min-height:76px;transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
body[data-design=premium] .pd-plan>b{font-size:14.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
body[data-design=premium] .pd-plan-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;padding-top:9px;border-top:1px solid var(--line);font:inherit;color:inherit}
body[data-design=premium] .pd-plan-price{font-size:15px;font-weight:700;color:var(--accent-text);white-space:nowrap}
body[data-design=premium] .pd-plan-price s{margin-right:5px;font-size:12px;font-weight:400;color:var(--mute)}
body[data-design=premium] .pd-plan small{font-size:12px;color:var(--mute);white-space:nowrap}
@media (hover:hover){body[data-design=premium] .pd-plan:not(.is-out):not(.on):hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}
body[data-design=premium] .pd-plan.on{border-color:var(--accent);background:var(--accent-soft)}
body[data-design=premium] .pd-plan.on .pd-plan-row{border-top-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
body[data-design=premium] .pd-plan:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
body[data-design=premium] .pd-plan.is-out{cursor:not-allowed;background:transparent;border-style:dashed}
body[data-design=premium] .pd-plan.is-out>b,body[data-design=premium] .pd-plan.is-out .pd-plan-price,body[data-design=premium] .pd-plan.is-out .pd-plan-price s{color:var(--mute);font-weight:500}
body[data-design=premium] .pd-plan.is-out small,body[data-design=premium] .pd .is-bad{color:var(--bad)}
body[data-design=premium] .pd-plan.is-out small{font-weight:600}
body[data-design=premium] .pd-single{display:flex;align-items:center;justify-content:space-between;gap:12px}
body[data-design=premium] .pd-single>div{display:grid;gap:2px}
body[data-design=premium] .pd-single small{font-size:13px;color:var(--mute)}
body[data-design=premium] .pd-single b{font-size:20px;font-weight:700;color:var(--accent-text)}
body[data-design=premium] .pd-single s{margin-right:6px;font-size:13px;font-weight:400;color:var(--mute)}
/* Quantity */
body[data-design=premium] .pd-qty{display:flex;align-items:center;justify-content:space-between;gap:12px}
body[data-design=premium] .pd-qty>span{font-size:14.5px;font-weight:600}
body[data-design=premium] .pd .stepper button{min-width:44px;min-height:44px}
body[data-design=premium] .pd-hint{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}
body[data-design=premium] .pd-adjust,body[data-design=premium] .pd-cstat{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
body[data-design=premium] .pd-adjust{color:var(--ink)}
body[data-design=premium] .pd-adjust .ico,body[data-design=premium] .pd-cstat .ico{width:15px;height:15px;margin-top:2px;flex:none}
body[data-design=premium] .pd-cstat.is-ok{color:var(--ok)}
/* Code */
body[data-design=premium] .pd-coupon{display:flex;gap:8px;align-items:stretch}
body[data-design=premium] .pd-coupon .coupon-field{flex:1;background:var(--field,var(--card-2));border-width:1px;min-height:44px}
body[data-design=premium] .pd-coupon .coupon-field input[readonly]{color:var(--mute)}
body[data-design=premium] .pd-coupon .coupon-field input::placeholder{text-transform:none;letter-spacing:0;color:var(--mute);opacity:1}
body[data-design=premium] .pd-coupon .btn{min-height:44px;flex:none}
/* Total */
body[data-design=premium] .pd-line{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:13.5px;color:var(--mute)}
body[data-design=premium] .pd-line.is-off{color:var(--ok)}
body[data-design=premium] .pd-total{display:flex;align-items:center;justify-content:space-between;gap:12px}
body[data-design=premium] .pd-total>div{display:grid;gap:1px;min-width:0}
body[data-design=premium] .pd-total b{font-size:14.5px;font-weight:600}
body[data-design=premium] .pd-total small{font-size:12.5px;color:var(--mute)}
body[data-design=premium] .pd-total strong{font-size:clamp(22px,2.2vw,26px);font-weight:700;color:var(--accent-text);white-space:nowrap}
body[data-design=premium] .pd-act{display:grid;gap:8px}
body[data-design=premium] .pd-act>.btn{min-height:48px}
body[data-design=premium] .pd-credit{margin:0;text-align:center;font-size:13px;color:var(--mute)}
/* Left column */
body[data-design=premium] .pd-video{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
body[data-design=premium] .pd-video>button{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
body[data-design=premium] .pd-video>button>i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);flex:none}
body[data-design=premium] .pd-video>button .ico{width:17px;height:17px}
body[data-design=premium] .pd-video>button span{flex:1;display:grid;min-width:0}
body[data-design=premium] .pd-video b{font-size:14.5px;font-weight:600}
body[data-design=premium] .pd-video small{font-size:12.5px;color:var(--mute)}
body[data-design=premium] .pd-video em{display:grid;color:var(--mute);transition:transform 180ms var(--ease-out)}
body[data-design=premium] .pd-video>button[aria-expanded=true] em{transform:rotate(180deg)}
body[data-design=premium] .pd-video .video{margin:0;border-radius:0;border:0;border-top:1px solid var(--line)}
body[data-design=premium] .pd-facts{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 6px}
body[data-design=premium] .pd-facts dl{margin:8px 0 0}
body[data-design=premium] .pd-facts dl>div{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;padding:7px 0;border-top:1px solid var(--line)}
body[data-design=premium] .pd-facts dt{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--mute)}
body[data-design=premium] .pd-facts dt span{overflow-wrap:anywhere}
body[data-design=premium] .pd-facts dt .ico{width:15px;height:15px;flex:none}
body[data-design=premium] .pd-facts dd{margin:0;font-size:14px;font-weight:600;text-align:right;flex:none;max-width:60%;overflow-wrap:anywhere}
body[data-design=premium] .pd-facts dd .link{font-weight:600}
/* More about the product: folded, all of it one tap away. */
body[data-design=premium] .pd-fold{background:var(--card);border:1px solid var(--line);border-radius:12px}
body[data-design=premium] .pd-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:10px 16px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;border-radius:12px}
body[data-design=premium] .pd-fold>summary::-webkit-details-marker{display:none}
body[data-design=premium] .pd-fold>summary .ico{width:16px;height:16px;color:var(--mute);flex:none;transition:transform 180ms var(--ease-out)}
body[data-design=premium] .pd-fold[open]>summary .ico{transform:rotate(180deg)}
body[data-design=premium] .pd-fold-b{padding:0 16px 16px;color:var(--mute);font-size:14px;line-height:1.7}
body[data-design=premium] .pd-fold-b .desc{margin:0;white-space:pre-line;border:0;padding:0}
body[data-design=premium] .pd-fold-b .ms-panel{margin:0;padding:0;background:none;border:0;box-shadow:none}
body[data-design=premium] .pd-fold-b .ms-panel-h h2{display:none}
body[data-design=premium] .pd-fold-b .ms-panel-h{justify-content:flex-end}
/* Background effects stay behind the page and never take a press meant for the form. */
body[data-design=premium][data-page=product] .pbg,body[data-design=premium][data-page=product] .ms-mood{pointer-events:none}
@media (max-width:860px){
  body[data-design=premium] .pd-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  body[data-design=premium] .pd-left{display:contents}
  body[data-design=premium] .pd-head,body[data-design=premium] .pd-buy,body[data-design=premium] .pd-more{grid-column:1;grid-row:auto}
  body[data-design=premium] .pd-head{order:1;background:none;border:0;padding:0}
  body[data-design=premium] .pd .p-gallery{order:2}
  body[data-design=premium] .pd-video{order:3}
  body[data-design=premium] .pd-buy{order:4;border:1px solid var(--line);border-radius:16px;padding:0 16px 16px}
  body[data-design=premium] .pd-about{border-top:0}
  body[data-design=premium] .pd-facts{order:5}
  body[data-design=premium] .pd-more{order:6;margin-top:0}
  body[data-design=premium] .pd .p-buybar .btn{min-height:46px;padding:0 18px;white-space:nowrap}
}
@media (max-width:340px){body[data-design=premium] .pd-plans{grid-template-columns:minmax(0,1fr)}}
/* The buying box is part of the card, not a card inside it. */
body[data-design=premium] .pd #buyBox{margin:0;padding:0;border:0;border-radius:0;background:none}
body[data-design=premium] .pd #buyBox .btn.full{margin-top:0}
body[data-design=premium] .pd-coupon .btn{height:44px;margin:0;white-space:nowrap;align-self:center}
body[data-design=premium] .pd .pd-act>.btn.full{min-height:48px}

/* ===== v40 top-up page (Premium): who and how on the left, the chosen channel's form on the right. Colours are the shop's tokens only. ===== */
body[data-design=premium] .p-topup3{max-width:1040px;padding-top:24px;padding-bottom:var(--sec-gap,56px);display:grid;gap:20px}
body[data-design=premium] .tp3-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
body[data-design=premium] .tp3-head h1{margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.3}
body[data-design=premium] .tp3-head p{margin:4px 0 0;font-size:14px;color:var(--mute)}
body[data-design=premium] .tp3-head .btn{flex:none;white-space:nowrap}
body[data-design=premium] .tp3-grid{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:24px;align-items:start}
body[data-design=premium] .tp3-left{display:grid;gap:12px;min-width:0}
body[data-design=premium] .tp3-me{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
body[data-design=premium] .tp3-who{display:flex;align-items:center;gap:12px;min-width:0}
body[data-design=premium] .tp3-who>div{display:grid;min-width:0}
body[data-design=premium] .tp3-who small{font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp3-who b{font-size:15.5px;font-weight:600;overflow-wrap:anywhere}
body[data-design=premium] .tp3-avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-weight:700}
body[data-design=premium] .tp3-bal{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
body[data-design=premium] .tp3-bal small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp3-bal .ico{width:15px;height:15px;color:var(--accent-text)}
body[data-design=premium] .tp3-bal b{font-size:clamp(28px,3vw,34px);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body[data-design=premium] .tp3-h2{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--mute)}
body[data-design=premium] .tp3-list{display:grid;gap:10px}
body[data-design=premium] .tp3-ch{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
@media (hover:hover){body[data-design=premium] .tp3-ch:not(.on):hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}
body[data-design=premium] .tp3-ch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-design=premium] .tp3-ch.on{border-color:var(--accent);background:var(--accent-soft)}
body[data-design=premium] .tp3-ch .tp2-ico{width:44px;height:44px;border-radius:12px}
body[data-design=premium] .tp3-ch .tp2-ico .ico{width:22px;height:22px}
body[data-design=premium] .tp3-ch-b{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
body[data-design=premium] .tp3-ch-b b{font-size:15px;font-weight:600}
body[data-design=premium] .tp3-ch-b em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1.4;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--mute);white-space:nowrap}
body[data-design=premium] .tp3-ch.on .tp3-ch-b em{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent-text)}
body[data-design=premium] .tp3-ch-b small{flex-basis:100%;font-size:12.5px;line-height:1.4;color:var(--mute)}
body[data-design=premium] .tp3-tick{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:50%}
body[data-design=premium] .tp3-ch.on .tp3-tick{border-color:var(--accent);background:var(--accent);color:#fff}
body[data-design=premium] .tp3-tick .ico{width:16px;height:16px}
body[data-design=premium] .tp3-ch.on .tp3-tick .ico circle{display:none}
body[data-design=premium] .p-topup3 .tp2-form{padding:22px;gap:16px;border-radius:16px}
body[data-design=premium] .p-topup3 .tp2-form-h{padding-bottom:14px;border-bottom:1px solid var(--line)}
body[data-design=premium] .p-topup3 .tp2-form-h h2{margin:0;font-size:18px}
body[data-design=premium] .p-topup3 .tp2-form-h .tp2-ico{width:44px;height:44px;border-radius:12px}
body[data-design=premium] .p-topup3 .tp2-form-h .tp2-ico .ico{width:22px;height:22px}
body[data-design=premium] .tp3-acct{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
body[data-design=premium] .tp3-acct-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px}
body[data-design=premium] .tp3-acct small{display:block;font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp3-acct b{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
body[data-design=premium] .tp3-acct-no{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
body[data-design=premium] .tp3-acct-no .acct{font-size:clamp(17px,2vw,20px);letter-spacing:.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body[data-design=premium] .tp3-acct-no .btn{flex:none;min-height:40px}
body[data-design=premium] .tp3-field{display:grid;gap:8px;min-width:0}
body[data-design=premium] .tp3-label{font-size:14px;font-weight:600}
body[data-design=premium] .tp3-drop{display:grid;justify-items:center;text-align:center;gap:6px;padding:36px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--card-2);cursor:pointer;transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
body[data-design=premium] .tp3-drop[hidden]{display:none}
@media (hover:hover){body[data-design=premium] .tp3-drop:hover{border-color:var(--accent)}}
body[data-design=premium] .tp3-drop.over{border-color:var(--accent);background:var(--accent-soft)}
body[data-design=premium] .tp3-drop:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
body[data-design=premium] .tp3-up{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
body[data-design=premium] .tp3-up .ico{width:20px;height:20px}
body[data-design=premium] .tp3-drop b{font-size:14px;font-weight:600}
body[data-design=premium] .tp3-drop small{font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp3-preview{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
body[data-design=premium] .tp3-preview[hidden]{display:none}
body[data-design=premium] .tp3-preview canvas{display:block;width:96px;height:auto;max-height:150px;object-fit:contain;flex:none;border-radius:8px;background:var(--card)}
body[data-design=premium] .tp3-preview-b{display:grid;gap:4px;min-width:0}
body[data-design=premium] .tp3-preview-b b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
body[data-design=premium] .tp3-preview-b small{font-size:12.5px;color:var(--mute)}
body[data-design=premium] .tp3-preview-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
body[data-design=premium] .tp3-preview-a .btn{min-height:40px}
body[data-design=premium] .tp3-err{margin:0;font-size:13px;color:var(--bad)}
body[data-design=premium] .tp3-err[hidden]{display:none}
body[data-design=premium] .tp3-out{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
body[data-design=premium] .tp3-out-h{display:flex;align-items:center;gap:8px}
body[data-design=premium] .tp3-out-h b{font-size:15px;font-weight:600}
body[data-design=premium] .tp3-out-h .ico{width:18px;height:18px}
body[data-design=premium] .tp3-out.is-ok{border-color:var(--ok)}
body[data-design=premium] .tp3-out.is-ok .tp3-out-h{color:var(--ok)}
body[data-design=premium] .tp3-out.is-bad{border-color:var(--bad)}
body[data-design=premium] .tp3-out.is-bad .tp3-out-h{color:var(--bad)}
body[data-design=premium] .tp3-out.is-wait .tp3-out-h{color:var(--accent-text)}
body[data-design=premium] .tp3-out p{margin:0;font-size:14px;line-height:1.6;color:var(--mute)}
body[data-design=premium] .tp3-out dl{display:grid;gap:4px;margin:0}
body[data-design=premium] .tp3-out dl>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
body[data-design=premium] .tp3-out dt{color:var(--mute)}
body[data-design=premium] .tp3-out dd{margin:0;font-variant-numeric:tabular-nums}
body[data-design=premium] .tp3-out .link{justify-self:start;padding:4px 0;font-size:13px;background:none;border:0}
body[data-design=premium] .p-topup3 .btn.full{min-height:48px}
body[data-design=premium] .p-topup3 .btn.full:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:860px){
  body[data-design=premium] .tp3-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  body[data-design=premium] .tp3-head{flex-direction:column;gap:10px}
  body[data-design=premium] .p-topup3 .tp2-form{padding:16px;scroll-margin-top:72px}
  body[data-design=premium] .tp3-drop{padding:28px 12px}
}
body[data-design=premium] .tp3-acct-no .btn,body[data-design=premium] .tp3-preview-a .btn,body[data-design=premium] .tp3-head .btn{min-height:44px}
body[data-design=premium] .phr .btn.phr-go{min-height:48px}
body[data-design=premium] .wrap.phr{max-width:560px;margin-inline:auto}
body[data-design=premium] .phr .phr-head h1{margin:0;font-size:clamp(22px,5vw,28px);line-height:1.3}

/* ===== Compact type (owner's request, 2026-11-05): sizes measured from the shop's earlier site. Columns stay the shop's own layout setting. ===== */
body[data-design=premium]{font-size:13px}
body[data-design=premium] #shop .bar .brand span:last-child{font-size:14px}
body[data-design=premium] #shop .bar .btn,body[data-design=premium] #shop .who .btn{font-size:13px}
body[data-design=premium] #shop .p-head h2{font-size:20px;font-weight:500}
body[data-design=premium] #shop .p-head .link{font-size:12px}
body[data-design=premium] #shop .pi-text .lead{font-size:13px}
body[data-design=premium] #shop .p-cta .btn{font-size:13px}
body[data-design=premium] #shop .p-cat2-t b{font-size:13px;font-weight:600}
body[data-design=premium] #shop .p-cat2-t small{font-size:11px}
body[data-design=premium] #shop .pb{font-size:10px}
body[data-design=premium] #shop .pname h3{font-size:13px;font-weight:600;line-height:1.45}
body[data-design=premium] #shop .pcard .pc-from{font-size:11px}
body[data-design=premium] #shop .pcard .pp strong{font-size:14px;font-weight:600}
body[data-design=premium] #shop .pcard .pp s{font-size:11px}
body[data-design=premium] #shop .pc-stock .ps,body[data-design=premium] #shop .pc-plans,body[data-design=premium] #shop .pc-meta{font-size:11px}
body[data-design=premium] #shop .pcard .btn{font-size:12px}
body[data-design=premium] #shop .p-sec h3{font-size:14px}
body[data-design=premium] #shop .p-sec p{font-size:12px}
body[data-design=premium] #shop .p-faq summary{font-size:13px}
body[data-design=premium] #shop .p-contact-links .btn{font-size:13px}
body[data-design=premium] #shop .foot-h{font-size:13px}
body[data-design=premium] #shop .foot a,body[data-design=premium] #shop .foot-brand p{font-size:12px}
body[data-design=premium] #shop .fb-left,body[data-design=premium] #shop .fb-left a,body[data-design=premium] #shop .fb-links a{font-size:12px}
/* The price and the buy button stay easy to press on a small screen. */
@media (max-width:760px){body[data-design=premium] #shop .p-head h2{font-size:18px}body[data-design=premium] #shop .pcard .btn{min-height:40px}}

body[data-design=premium] #shop .pc-price strong{font-size:14px;font-weight:600}
body[data-design=premium] #shop .pc-price s,body[data-design=premium] #shop .pc-price em,body[data-design=premium] #shop .pc-price small{font-size:11px}
body[data-design=premium] #shop .pcard .pname h3{font-size:13px!important;font-weight:600;line-height:1.45}
body[data-design=premium] #shop .pc-sold,body[data-design=premium] #shop .pc-note{font-size:11px}