/* PHOXShop redesign (Claude Design export "PHOXShop Storefront", 2026-11).
   Loaded by ui.controller on every page that runs /assets/phoxshop-runtime.js, after the page's own
   stylesheet and before a shop's colour override, so a shop's colour scheme still wins.

   Look: a #EEEEEE canvas with white 8px surfaces, Montserrat for headings, labels and navigation,
   Roboto for body text, pill buttons, 4px fields, sentence case, ink #242424. Colours are the
   template's own theme (--color-primary, the charcoal category row), not the export's, which
   came from the generic PHOX theme. See docs/design/phoxshop-redesign/APPLY-NOTES.md. */

:root{
  --color-text:#242424;
  --ps-canvas:#eeeeee;
  --ps-surface:#ffffff;
  --ps-soft:#f5f5f5;
  --ps-ink:#242424;
  --ps-ink-2:#424242;
  --ps-muted:#616161;
  --ps-hairline:rgba(0,0,0,.12);
  --ps-control:rgba(0,0,0,.45);
  --ps-charcoal:#333333;
  /* The footer's own token. A category page's brand row sets its own value inline. */
  --nav:#333333;
  --ps-primary:var(--color-primary,#005d91);
  --ps-primary-deep:color-mix(in srgb,var(--ps-primary) 78%,#000);
  --ps-display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ps-body:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ps-radius:8px;
  --ps-field:4px;
  --ps-success:#1b5e20;
  --ps-warn:#7a4f00;
  --ps-error:#b3261e;
  /* The brand row and the category row. The runtime republishes the real height for sticky offsets. */
  --brandrow-h:72px;
  --secondnav-h:48px;
  --section-y:32px;
  --radius:8px;
  /* Tokens the Builder's generic sheet reads on the category pages. */
  --ink:#242424;
  --link:var(--ps-primary);
  --link-hover:var(--ps-primary-deep);
  --line:rgba(0,0,0,.12);
  --bg:#eeeeee;
  --muted:#616161;
}

body{background:var(--ps-canvas);color:var(--ps-ink);font-family:var(--ps-body);font-size:15px;line-height:1.5}
h1,h2,h3,h4,button,.btn-accent,.btn-ghost,.pg-btn,.lp-btn,.quickorder,.addbtn,.loadmore{font-family:var(--ps-display)}
a{color:var(--ps-primary)}
a:hover{color:var(--ps-primary-deep)}

/* ---------- Header: primary band, charcoal category row ---------- */
header{position:sticky;top:0;z-index:50;box-shadow:none}
.topnav{min-height:var(--brandrow-h);height:auto;padding-block:12px;gap:12px 20px}
.brand .wordmark,.wordmark{font-family:var(--ps-display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.brand .wordmark em{color:inherit}
.brand small,.wordmark small,#brandTagline{font-family:var(--ps-display);font-weight:600;font-size:.56rem;letter-spacing:.08em;text-transform:none;color:#fff;opacity:.9}
.topnav .brand-logo,.brand-logo{max-height:44px;max-width:200px}
.searchwrap{height:40px;max-width:620px;border-radius:var(--ps-field);background:#fff;overflow:hidden;box-shadow:none;border:0}
#search,#phox-search{height:40px;border:0;border-radius:0;background:#fff;padding:0 14px;font-family:var(--ps-body);font-size:.94rem;color:var(--ps-ink)}
#search:focus,#phox-search:focus{outline:none;box-shadow:none}
.searchwrap:focus-within{outline:2px solid #fff;outline-offset:1px}
.searchbtn,.searchbtn:hover{width:44px;padding:0;background:#fff;color:var(--ps-primary);border:0;border-radius:0;font-size:1.1rem}
.searchbtn svg{stroke:currentColor}
.quickorder,.topnav .quickorder,.topnav .quickorder.solid,.topnav .quickorder.outline{height:40px;padding:0 16px;display:inline-flex;align-items:center;background:transparent;border:1px solid transparent;border-radius:999px;color:#fff;font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none;white-space:nowrap}
.quickorder:hover,.topnav .quickorder:hover{background:rgba(255,255,255,.14);color:#fff;filter:none;text-decoration:none}
.navbtn,.topnav .navbtn{height:48px;padding:0 14px;background:none;border:0;border-radius:999px;color:#fff;font-family:var(--ps-display);text-align:left}
.navbtn:hover,.topnav .navbtn:hover{background:rgba(255,255,255,.14);border:0}
.navbtn .l1,.topnav .navbtn .l1{font-family:var(--ps-body);font-size:.75rem;font-weight:400;opacity:1}
.navbtn .l2,.topnav .navbtn .l2{font-size:.875rem;font-weight:600}
.topnav .avatar{background:none;color:#fff;width:24px;height:24px}
.topnav .avatar svg{width:24px;height:24px}
.cart,.topnav .cart{height:48px;padding:0 16px 0 12px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:999px;color:#fff;font-family:var(--ps-display);font-size:.875rem;font-weight:600}
.cart:hover,.topnav .cart:hover{background:rgba(255,255,255,.14);color:#fff;border:0}
.cart svg,.topnav .cart svg{width:24px;height:24px;stroke:currentColor}
.cart .qty,.topnav .cart .qty{min-width:22px;height:22px;margin:0;padding:0 6px;border-radius:999px;background:#fff;color:var(--ps-primary);font-family:var(--ps-display);font-size:.75rem;font-weight:700;line-height:22px;text-align:center}
.cart .lbl,.topnav .cart .lbl{font-weight:600}

.secondnav{font-family:var(--ps-display)}
.secondnav-inner{height:var(--secondnav-h)}
.secondnav-link{height:var(--secondnav-h);padding:0 14px;font-size:.875rem;font-weight:400;border-bottom:3px solid transparent;background:none}
.secondnav-link:first-child{padding-left:14px}
.secondnav-search{display:none}
/* The account menu on the category pages sits on the white surface, not the band. */
.topnav .acctmenu{border:0;border-radius:var(--ps-radius);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.topnav .acctmenu a{font-family:var(--ps-display);font-weight:400;font-size:.875rem;color:var(--ps-ink)}
.topnav .acctmenu a:hover{background:var(--ps-soft);color:var(--ps-ink)}

/* ---------- Buttons ---------- */
.btn-accent,.pg-btn,.addbtn,.checkout-btn,.lp-btn.solid,.lp-btn.light{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 20px;background:var(--ps-primary);color:#fff;border:1px solid var(--ps-primary);border-radius:999px;font-family:var(--ps-display);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:none;filter:none}
.btn-accent:hover,.pg-btn:hover,.addbtn:hover,.checkout-btn:hover{background:var(--ps-primary-deep);border-color:var(--ps-primary-deep);color:#fff;filter:none;text-decoration:none}
.btn-ghost,.pg-btn.ghost,.loadmore,.rail-shopall,.lp-btn.outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 20px;background:transparent;color:var(--ps-primary-deep);border:1px solid var(--ps-primary-deep);border-radius:999px;font-family:var(--ps-display);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none}
.btn-ghost:hover,.pg-btn.ghost:hover,.loadmore:hover,.rail-shopall:hover{background:var(--ps-soft);color:var(--ps-primary-deep);border-color:var(--ps-primary-deep);text-decoration:none}
.pg-btn.sm{min-height:28px;padding:4px 14px;font-size:.8125rem}
.pg-btn[disabled],.addbtn:disabled,.checkout-btn:disabled{background:#e0e0e0;border-color:#e0e0e0;color:#757575;opacity:1;cursor:not-allowed}
.pg-link{color:var(--ps-primary);font-family:var(--ps-display);font-weight:600}
:focus-visible{outline:2px solid var(--ps-primary);outline-offset:2px}

/* ---------- Home: hero and its side panel ---------- */
.hero{background:none;color:var(--ps-ink);padding:32px var(--gutter) 0;overflow:visible}
.hero::after{content:none}
.hero-inner{max-width:var(--maxw);margin-inline:auto;padding:0;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;min-height:0}
.hero-copy{flex:2 1 520px;min-width:0;background:var(--ps-surface);border-radius:var(--ps-radius);padding:48px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.hero .eyebrow{margin:0;font-family:var(--ps-display);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ps-primary)}
.hero-title{margin:0;font-family:var(--ps-display);font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.02em;color:var(--ps-ink);text-wrap:balance}
.hero-title .ln1,.hero-title .ln2{display:inline;font-size:inherit;font-weight:700;color:inherit}
.hero-title .ln1::after{content:" "}
.hero-sub{margin:0;max-width:560px;font-size:1.0625rem;line-height:1.55;color:var(--ps-ink-2);text-wrap:pretty}
.hero-sub b{font-weight:500;color:var(--ps-ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.hero-media{flex:1 1 320px;min-width:0;display:flex;align-items:stretch;justify-content:stretch;margin:0;padding:0}
.hero-card{width:100%;max-width:none;height:auto;margin:0;transform:none;background:var(--ps-surface);border:0;border-radius:var(--ps-radius);box-shadow:none;padding:24px;color:var(--ps-ink)}
.hero-card .hc-img{background:var(--ps-soft);border-radius:var(--ps-field)}
.hero-card .hc-brand{font-family:var(--ps-body);font-size:.8125rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ps-muted)}
.hero-card .hc-name{font-family:var(--ps-display);font-weight:600;font-style:normal;color:var(--ps-ink)}
.hero-card .hc-price{font-family:var(--ps-display);font-weight:700;color:var(--ps-ink)}
.hero-card .hc-price.muted{font-family:var(--ps-body);font-weight:400;font-style:normal;color:var(--ps-muted)}
.hero-media.has-panel .hero-card{display:none}
.home-panel{width:100%;background:var(--ps-surface);border-radius:var(--ps-radius);padding:24px;display:flex;flex-direction:column;gap:18px;color:var(--ps-ink)}
.hp-head{display:flex;flex-direction:column;gap:6px}
.hp-head h2{margin:0;font-size:1.25rem;line-height:1.2;font-weight:700;color:var(--ps-ink);overflow-wrap:anywhere}
.hp-head p,.hp-kicker,.hp-meta{margin:0;font-size:.875rem;line-height:1.45;color:var(--ps-muted)}
.hp-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.hp-steps li{display:flex;gap:12px;align-items:flex-start}
.hp-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ps-primary);color:#fff;font:700 13px/28px var(--ps-display);text-align:center}
.hp-steps b{display:block;font:600 14px/1.3 var(--ps-display)}
.hp-steps span:not(.hp-n){display:block;font-size:.8125rem;line-height:1.4;color:var(--ps-muted)}
.hp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.hp-order{border:1px solid var(--ps-hairline);border-radius:var(--ps-radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.hp-order-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hp-order-top b{font:600 14px/1.25 var(--ps-display)}
.hp-order .hp-actions{margin-top:0}
.hp-note{margin:0;font-size:.875rem;line-height:1.45;color:var(--ps-ink)}
.hp-points{font:600 14px/1.3 var(--ps-display);color:var(--ps-ink);text-decoration:none}
.hp-points:hover{color:var(--ps-primary);text-decoration:underline}

/* ---------- Home: value strip ---------- */
.strip{background:none;color:var(--ps-ink);padding:20px var(--gutter) 0;border:0}
.strip-inner{max-width:var(--maxw);margin-inline:auto;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--ps-hairline);border-radius:var(--ps-radius);overflow:hidden}
.strip .item{background:var(--ps-surface);padding:16px 20px;display:flex;align-items:center;gap:12px;font-size:.875rem;line-height:1.4;color:var(--ps-ink);white-space:normal}
.strip svg{flex:none;width:24px;height:24px;color:var(--ps-primary);stroke:currentColor}
.strip b{font-weight:500;color:var(--ps-ink)}

/* ---------- Home: shop by category (the promo blocks, as tiles) ---------- */
.home-section-title{max-width:var(--maxw);margin:32px auto 14px;padding-inline:var(--gutter);font:700 1.375rem/1.2 var(--ps-display);color:var(--ps-ink)}
.lp-split,.lp-triple{max-width:calc(var(--maxw) + var(--gutter) * 2);margin:0 auto 16px;padding-inline:var(--gutter);display:grid;gap:16px;min-height:0}
.lp-split{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-triple{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-panel,.lp-split>.lp-panel:first-child,.lp-split>.lp-panel:last-child,.lp-triple>.lp-panel:first-child,.lp-triple>.lp-panel:last-child{min-height:0;padding:24px;border-radius:var(--ps-radius);justify-content:flex-start;gap:8px}
.lp-panel h2{margin:0;font-size:1.125rem;line-height:1.25;font-weight:700;letter-spacing:0}
.lp-panel p{flex:1;max-width:none;margin:0;font-size:.875rem;line-height:1.5}
/* A tile's text follows its background, so a dark panel set in the Builder stays readable. */
.lp-panel.on-light h2{color:var(--ps-ink)}
.lp-panel.on-light p{color:var(--ps-ink-2)}
.lp-panel.on-dark h2,.lp-panel.on-dark p{color:#fff}
.lp-panel .lp-btn,.lp-panel .lp-btn.solid,.lp-panel .lp-btn.outline,.lp-panel .lp-btn.light{align-self:flex-start;min-height:0;margin-top:6px;padding:0;background:none;border:0;border-radius:0;color:var(--ps-primary-deep);font-family:var(--ps-display);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none}
.lp-panel.on-dark .lp-btn,.lp-panel.on-dark .lp-btn:hover{color:#fff}
.lp-panel .lp-btn::after{content:"\2192";margin-left:4px}
.lp-panel .lp-btn:hover{background:none;color:var(--ps-primary);text-decoration:underline}
.lp-pokemon,.lp-loyalty{min-height:0;max-width:var(--maxw);margin:0 auto 16px;padding:32px;border-radius:var(--ps-radius);text-align:left;display:block}
.lp-pokemon{width:calc(100% - var(--gutter) * 2)}
.lp-loyalty{width:calc(100% - var(--gutter) * 2);margin-block:32px 0}
.lp-pokemon .lp-inner,.lp-loyalty .lp-inner{max-width:760px;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lp-pokemon h2,.lp-loyalty h2{margin:0;font-size:1.75rem;line-height:1.15;font-weight:700}
.lp-pokemon p,.lp-loyalty p{max-width:640px;margin:0;font-size:.9375rem;line-height:1.6}
/* White text only on a dark band: the block's background setting decides which this is. */
.on-dark.lp-pokemon h2,.on-dark.lp-loyalty h2,.on-dark.lp-pokemon p,.on-dark.lp-loyalty p,.on-dark .lp-eyebrow{color:#fff}
.on-light.lp-pokemon,.on-light.lp-loyalty{color:var(--ps-ink)}
.on-light.lp-pokemon h2,.on-light.lp-loyalty h2,.on-light.lp-pokemon p,.on-light.lp-loyalty p{color:var(--ps-ink)}
.on-light .lp-eyebrow{color:var(--ps-primary)}
.lp-eyebrow,.lp-loyalty .eyebrow{margin:0;font-family:var(--ps-display);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none}
.lp-pokemon .lp-btn,.lp-loyalty .lp-btn{min-height:40px;margin:6px 0 0;padding:8px 20px;border-radius:999px;font-family:var(--ps-display);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none}
.on-dark.lp-pokemon .lp-btn,.on-dark.lp-loyalty .lp-btn{background:#fff;color:var(--ps-primary-deep);border:1px solid #fff}
.on-dark.lp-pokemon .lp-btn:hover,.on-dark.lp-loyalty .lp-btn:hover{background:var(--ps-soft);color:var(--ps-primary-deep);text-decoration:none}
.lp-tiers,.lp-tier{display:none}
.lp-tiers.on{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:4px 0}
.lp-tier.on{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:1px solid currentColor;border-radius:999px;font:600 13px/1 var(--ps-display);text-align:left}
.lp-tier b{margin:0;font:inherit}
.lp-tier small{display:none}
.lp-medal{width:auto;height:auto;margin:0;background:none;box-shadow:none;font-size:.875rem}
.lp-medal:empty{display:none}
.lp-medal.has-tier-icon{width:16px;height:16px}

/* ---------- Brand bar and wholesale notice ---------- */
.brandbar{position:static;background:none;border:0;box-shadow:none;padding:16px var(--gutter) 0}
.brandbar-inner{max-width:var(--maxw);margin-inline:auto;padding:12px 20px;background:var(--ps-surface);border-radius:var(--ps-radius);display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow:visible}
.btab{min-height:28px;padding:4px 14px;background:transparent;color:var(--ps-primary-deep);border:1px solid var(--ps-primary-deep);border-radius:999px;font-family:var(--ps-display);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
.btab:hover{background:var(--ps-soft);color:var(--ps-primary-deep)}
.btab.active{background:var(--ps-primary);border-color:var(--ps-primary);color:#fff}
.gate{margin-top:16px;padding:0 var(--gutter)}
.gate-inner{max-width:var(--maxw);margin-inline:auto;background:var(--ps-surface);border:0;border-radius:var(--ps-radius);padding:12px 20px}
.gate-inner svg{color:var(--ps-primary)}
.gate-inner .g-text{font-size:.875rem;color:var(--ps-ink)}
.gate-inner .g-text b{font-weight:600}
.gate .checkout-btn{width:auto;margin:0}

/* ---------- Carousels and the product grid ---------- */
.cat-rails{padding-block:32px 0;gap:32px}
.rail-head{margin-bottom:14px}
.rail-title{font-family:var(--ps-display);font-size:1.375rem;font-weight:700;letter-spacing:0;color:var(--ps-ink)}
.rail-shopall{flex:none;min-height:0;padding:0;border:0;background:none;color:var(--ps-primary-deep)}
.rail-shopall:hover{background:none;color:var(--ps-primary);text-decoration:underline}
.rail-note{color:var(--ps-muted);font-size:.875rem}
.rail-arrow{border:0;background:var(--ps-surface);color:var(--ps-ink);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rail-arrow:hover{background:var(--ps-soft);color:var(--ps-ink)}

.shell{max-width:calc(var(--maxw,1300px) + var(--gutter,22px) * 2);margin-inline:auto;padding:32px var(--gutter,22px) 48px;grid-template-columns:280px minmax(0,1fr);gap:24px}
.sidebar{background:var(--ps-surface);border:0;border-radius:var(--ps-radius);padding:12px 20px 16px}
.sidebar h2{margin:0 0 6px;font-family:var(--ps-display);font-size:1rem;font-weight:700;color:var(--ps-ink)}
.facet-group,.facet-group:first-of-type{border:0;border-top:1px solid var(--ps-hairline);margin:0;padding:8px 0}
.sidebar>.facet-group:first-of-type{border-top:0}
.facet-title{margin:4px 0;font-family:var(--ps-display);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ps-muted)}
.facet{min-height:32px;font-size:.875rem;color:var(--ps-ink)}
.facet input{accent-color:var(--ps-primary)}
.facet .n{color:var(--ps-muted)}
.clear-btn{font-family:var(--ps-display);font-size:.8125rem;font-weight:600;color:var(--ps-primary-deep)}
.filter-toggle{background:transparent;color:var(--ps-primary-deep);border:1px solid var(--ps-primary-deep);font-family:var(--ps-display);font-weight:600;font-size:.875rem}
.results-head{align-items:baseline;gap:10px;margin-bottom:16px}
.results-head h1{font-family:var(--ps-display);font-size:1.875rem;line-height:1.15;font-weight:700;color:var(--ps-ink)}
.results-head .count{font-size:.875rem;color:var(--ps-muted)}
.results-head .sortlbl{font-family:var(--ps-display);font-size:.8125rem;font-weight:600;color:var(--ps-muted)}
.sortsel{height:40px;padding:0 10px;background:#fff;border:0;border-radius:var(--ps-field);box-shadow:inset 0 0 0 1px var(--ps-control);font-family:var(--ps-body);font-size:.875rem;color:var(--ps-ink)}
.grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{position:relative;padding:0;gap:6px;background:var(--ps-surface);border:0;border-radius:var(--ps-radius);overflow:hidden;transition:box-shadow .15s}
.card:hover{transform:none;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}
.card>*{margin-inline:14px}
.card>.imgbox,.card>a.imgbox{margin:0 0 8px;background:var(--ps-soft);border-radius:0}
.card img.product{mix-blend-mode:multiply}
.card .brand{margin-top:0;font-family:var(--ps-body);font-size:.75rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ps-muted)}
.card h3,.card h3.title{min-height:0;font-family:var(--ps-display);font-size:.9375rem;line-height:1.3;font-weight:600;color:var(--ps-ink)}
.card a.card-link:hover h3,.card h3:hover,.card h3.title:hover{color:var(--ps-primary);text-decoration:underline}
.price-row{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price,.price .cents,.price .sym{font-family:var(--ps-display);font-weight:700;color:var(--ps-ink);font-variant-numeric:tabular-nums}
.price{font-size:1.125rem}
.was-price{color:var(--ps-muted);font-size:.8125rem;font-weight:400}
.sale-badge{background:#fdecea;color:var(--ps-error);border-radius:999px;padding:2px 8px;font-family:var(--ps-display);font-size:.75rem;font-weight:600}
.card .price-hidden{display:none}
.card .ship,.card .fulfil{display:none}
.card .stock{position:absolute;top:10px;left:0;margin:0 0 0 10px;padding:3px 10px;border-radius:999px;background:var(--ps-surface);font-family:var(--ps-display);font-size:.75rem;font-weight:600;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.stock.in{color:var(--ps-success)}
.stock.low{color:var(--ps-warn)}
.stock.out{color:var(--ps-muted)}
.ribbon{top:10px;left:auto;right:10px;background:var(--ps-primary);color:#fff;font-family:var(--ps-display);font-weight:600}
.addbtn{margin:auto 14px 14px;width:calc(100% - 28px)}
.price-row+.addbtn,.stock+.addbtn{margin-top:8px}
/* The export always shows the action; the hover reveal and its overlay stay off. */
[data-hover-add="on"] .card .addbtn{opacity:1;transform:none;pointer-events:auto}
[data-hover-add="on"] .card .imgbox::after{content:none}
.noimg{color:#9e9e9e}
.noimg span{font-family:var(--ps-body);font-size:.75rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ps-muted)}
.showing{color:var(--ps-muted);font-size:.875rem}
.empty{background:var(--ps-surface);border-radius:var(--ps-radius);padding:56px 24px;color:var(--ps-muted)}
.empty b{font-family:var(--ps-display);font-size:1.125rem;font-weight:700;color:var(--ps-ink)}

/* ---------- Footer ---------- */
footer{margin-top:48px;color:#fff;font-size:.8125rem}
footer .foot-col h4{font-family:var(--ps-display);font-size:.875rem;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
footer .foot-col a{font-family:var(--ps-body);font-size:.875rem;font-weight:400;color:#fff}
footer .foot-col a:hover{color:#fff;text-decoration:underline}
footer .foot-bar{border-color:rgba(255,255,255,.3)}
footer .foot-copy{color:#fff}
footer .foot-copy b{font-weight:600;color:#fff}
footer .admin-login{border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;font-family:var(--ps-display);font-weight:600}
footer .admin-login:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.toast{background:var(--ps-ink);border-radius:var(--ps-field);font-family:var(--ps-body);font-size:.875rem;font-weight:400}
.pts-fab{font-family:var(--ps-display);font-weight:600;font-size:.875rem}
.pts-fab .pts-name{font-size:.75rem;font-weight:600;letter-spacing:0;text-transform:none;opacity:1}

/* ---------- Full pages: shared ---------- */
.pg-title{margin:0 0 20px;font-family:var(--ps-display);font-size:1.875rem;line-height:1.15;font-weight:700;color:var(--ps-ink)}
.pg-note,.pg-loading{color:var(--ps-muted);font-size:.875rem}
.pg-card{background:var(--ps-surface);border:0;border-radius:var(--ps-radius);padding:24px}
.pg-card+.pg-card{margin-top:16px}
.pg-card h2{margin:0 0 14px;font-family:var(--ps-display);font-size:1.0625rem;font-weight:700;color:var(--ps-ink)}
.pg-grid{gap:20px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.pg-empty{background:var(--ps-surface);border:0;border-radius:var(--ps-radius);padding:56px 24px;color:var(--ps-muted)}
.pg-field label{font-family:var(--ps-display);font-size:.8125rem;font-weight:600;color:var(--ps-muted)}
.pg-field input:not([type=checkbox]):not([type=radio]),.pg-field select{min-height:40px;border:0;border-radius:var(--ps-field);box-shadow:inset 0 0 0 1px var(--ps-control);font-family:var(--ps-body);font-size:.875rem;color:var(--ps-ink)}
.pg-field input:focus,.pg-field select:focus{outline:2px solid var(--ps-primary);outline-offset:0}
.pg-field input[readonly]{background:var(--ps-soft);box-shadow:inset 0 0 0 1px var(--ps-hairline);color:var(--ps-muted)}
.pg-badge{padding:3px 10px;background:#eeeeee;color:var(--ps-ink);font-family:var(--ps-display);font-size:.75rem;font-weight:600}

/* ---------- Product page ---------- */
.pdp-crumbs{padding-top:24px;font-size:.8125rem;color:var(--ps-muted)}
.pdp-crumbs a{color:var(--ps-muted);font-weight:400;text-decoration:underline}
.pdp-crumbs a:hover{color:var(--ps-primary)}
.pdp{margin-top:16px;padding:32px;width:calc(100% - var(--gutter,22px) * 2);max-width:var(--maxw,1300px);background:var(--ps-surface);border-radius:var(--ps-radius);gap:32px}
.pdp-main,.pdp-thumb,.cart-thumb{background:var(--ps-soft)}
.pdp-main{border-radius:var(--ps-radius)}
.pdp-noimg{color:var(--ps-muted);font-weight:400;font-size:.8125rem}
.pdp-ribbon{background:var(--ps-primary);font-family:var(--ps-display);font-weight:600}
.pdp-thumb{border-radius:var(--ps-field)}
.pdp-thumb.active,.pdp-thumb:hover{border-color:var(--ps-primary)}
.pdp-brand{margin-bottom:8px;font-family:var(--ps-display);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ps-primary)}
.pdp-name{margin:0 0 8px;font-family:var(--ps-display);font-size:1.75rem;line-height:1.2;font-weight:700;color:var(--ps-ink);text-wrap:balance}
.pdp-sku{margin:0 0 16px;font-size:.8125rem;color:var(--ps-muted)}
.pdp-buy{border-color:var(--ps-hairline);padding:18px 0}
.pdp-now{font-family:var(--ps-display);font-size:1.625rem;font-weight:700;color:var(--ps-ink);font-variant-numeric:tabular-nums}
.pdp-was{font-size:.9375rem;color:var(--ps-muted)}
.pdp-save{font-family:var(--ps-display);font-weight:600;font-size:.75rem}
.pdp-price-hidden{font-family:var(--ps-display);font-size:.9375rem;font-weight:600;color:var(--ps-ink)}
.pdp-hint{font-size:.875rem;color:var(--ps-ink-2)}
.pdp-stock{font-family:var(--ps-display);font-size:.8125rem;font-weight:600;color:var(--ps-success)}
.pdp-stock.low{color:var(--ps-warn)}
.pdp-stock.out{color:var(--ps-error)}
.pdp-opt-label{font-family:var(--ps-display);font-weight:600;font-size:.8125rem}
.pdp-opt{border:1px solid var(--ps-control);font-family:var(--ps-display);font-weight:600;font-size:.875rem}
.pdp-opt.active{background:var(--ps-primary);border-color:var(--ps-primary)}
.pdp-qty{height:44px;border:1px solid var(--ps-control);border-radius:var(--ps-field)}
.pdp-qty button{width:44px;background:#fff}
.pdp-qty input{width:48px;font-family:var(--ps-body);font-weight:500}
.pdp-add{min-height:44px}
.pdp-desc{font-size:.9375rem;color:var(--ps-ink)}
.pdp-sections{border-color:var(--ps-hairline)}
.pdp-section{border-color:var(--ps-hairline)}
.pdp-section summary{font-family:var(--ps-display);font-weight:600;font-size:.875rem}
.pdp-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.875rem;line-height:1.4}
.pdp-trust li{display:flex;align-items:center;gap:10px}
.pdp-trust li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ps-primary)}
.pdp-trust b{font-weight:500}
.pdp-facts{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ps-hairline);display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.875rem;line-height:1.4}
.pdp-facts dt{color:var(--ps-muted)}
.pdp-facts dd{margin:0}
.pdp-bundle h2{font-family:var(--ps-display);font-size:1rem;font-weight:700}
.pdp-related{padding-block:24px 48px}
.pdp-related h2{margin:0 0 14px;font-family:var(--ps-display);font-size:1.25rem;font-weight:700}

/* ---------- Cart ---------- */
.cart-row{padding:16px 0;border-color:var(--ps-hairline)}
.cart-thumb{width:72px;height:72px;border-radius:var(--ps-field)}
.cart-name{font-family:var(--ps-display);font-size:.9375rem;font-weight:600;color:var(--ps-ink)}
.cart-unit{font-size:.8125rem;color:var(--ps-muted)}
.cart-total{font-family:var(--ps-display);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.cart-controls .pdp-qty{height:40px}
.cart-controls .pdp-qty button{width:40px;height:38px}
.cart-controls .pdp-qty input{height:38px}
.sum-row{font-size:.875rem;font-variant-numeric:tabular-nums}
.sum-row.total{border-color:var(--ps-hairline);font-family:var(--ps-display);font-size:1.125rem;font-weight:700}
.sum-row.discount{color:var(--ps-success)}
.sum-item{font-size:.8125rem;color:var(--ps-ink-2);font-variant-numeric:tabular-nums}

/* ---------- Checkout ---------- */
.co-steps li{background:#e0e0e0;color:var(--ps-ink);font-family:var(--ps-display);font-weight:600}
.co-steps li.on{background:var(--ps-primary);color:#fff}
.ship-choice{min-height:56px;border:0;border-radius:var(--ps-field);box-shadow:inset 0 0 0 1px var(--ps-hairline)}
.ship-choice:hover{background:var(--ps-soft)}
.ship-choice.sel{background:none;box-shadow:inset 0 0 0 2px var(--ps-primary)}
.ship-choice .sc-lbl{font-family:var(--ps-display);font-weight:600;font-size:.875rem}
.ship-choice .sc-amt{font-family:var(--ps-display);font-weight:600;font-variant-numeric:tabular-nums}
.co-reserve,.co-info{background:var(--ps-soft);border:0;border-radius:var(--ps-field)}
.co-done h2{font-family:var(--ps-display);font-weight:700}

/* ---------- Account: tabs over one surface ---------- */
.acct-layout{grid-template-columns:minmax(0,1fr);gap:20px}
.acct-side{flex-direction:row;gap:4px;padding:0;background:none;border:0;border-bottom:1px solid var(--ps-hairline);border-radius:0;overflow-x:auto;scrollbar-width:none}
.acct-side a,.acct-side button{flex:none;height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:0;border-bottom:3px solid transparent;font-family:var(--ps-display);font-size:.875rem;font-weight:400;color:var(--ps-ink);white-space:nowrap}
.acct-side a:hover,.acct-side button:hover{background:none;border-bottom-color:var(--ps-control)}
.acct-side a.active{background:none;color:var(--ps-ink);font-weight:600;border-bottom-color:var(--ps-primary)}
.acct-side button{margin-left:auto;color:var(--ps-primary-deep);font-weight:600}
#acctPanel>h2{font-size:1.25rem}
#acctPanel .pg-card{padding:16px 0;border-radius:0;border-top:1px solid var(--ps-hairline)}
#acctPanel .pg-card+.pg-card{margin-top:0}
.acct-tile{background:var(--ps-soft);border-radius:var(--ps-radius)}
.acct-tile b{font-family:var(--ps-display);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.addr-name,.ord-id{font-family:var(--ps-display);font-size:.9375rem;font-weight:600}
.addr-confirm{align-self:center;font-size:.875rem;font-weight:500}
.ord-meta{font-size:.8125rem;color:var(--ps-muted)}
.ord-total{font-family:var(--ps-display);font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums}
.ord-line{border-color:var(--ps-hairline);font-size:.875rem}

/* ---------- Info pages and the 404 ---------- */
.info-page h1,.info-page h2,.info-page h3{font-family:var(--ps-display);color:var(--ps-ink)}
.pg-404 h1{font-family:var(--ps-display);font-weight:700}

/* ---------- Narrow screens ---------- */
@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .lp-triple{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-copy{padding:32px}
}
@media (max-width:820px){
  :root{--gutter:16px;--section-y:24px}
  .topnav{flex-wrap:wrap;padding:10px var(--gutter) 12px;gap:10px 4px}
  .topnav .brand,.brand{margin-right:auto}
  .brand-logo,.topnav .brand-logo{max-height:36px;max-width:150px}
  .searchwrap{order:9;flex:1 1 100%;max-width:none;margin:0}
  .quickorder,.topnav .quickorder{height:44px;padding:0 10px;font-size:.8125rem;margin-left:0}
  .navbtn,.topnav .navbtn{height:44px;padding:0 8px}
  .navbtn .l1{display:none}
  .topnav .navbtn-lines,.cart .lbl,.topnav .cart .lbl{display:none}
  .cart,.topnav .cart{height:44px;padding:0 8px}
  .secondnav-link{padding:0 12px}
  .hero{padding-top:16px}
  .hero-copy{padding:24px}
  .hero-title{font-size:2rem}
  .home-section-title{margin-top:24px;font-size:1.25rem}
  .lp-split,.lp-triple{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
  .lp-pokemon,.lp-loyalty{padding:24px}
  .lp-pokemon h2,.lp-loyalty h2{font-size:1.375rem}
  .brandbar-inner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:10px 12px}
  .cat-rails{padding-block:24px 0;gap:24px}
  .rail-title{font-size:1.125rem}
  .shell{padding-block:24px 32px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .results-head h1{font-size:1.5rem}
  .results-head .sortlbl{margin-left:0}
  .card>*{margin-inline:10px}
  .addbtn{margin:auto 10px 10px;width:calc(100% - 20px);padding-inline:8px}
  .card .stock{margin-left:8px;font-size:.6875rem}
  .pdp{width:calc(100% - var(--gutter) * 2);padding:16px;grid-template-columns:minmax(0,1fr);gap:20px}
  .pdp-name{font-size:1.5rem}
  .pdp-add{min-width:0}
  .pg-wrap{padding-block:20px 40px}
  .pg-title{font-size:1.5rem}
  .pg-grid{grid-template-columns:minmax(0,1fr)}
  .pg-card{padding:16px}
  .cart-row{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .cart-thumb{width:64px;height:64px}
  .acct-side{flex-wrap:nowrap}
  .acct-side button{margin-left:0}
}

/* ---------- One column for the whole page: the same left and right edge as the brand row ---------- */
:root{--maxw:1300px;--gutter:22px}
.topnav{padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2))}
.hero-copy{order:1}
.hero-media{order:2}
.secondnav-link:first-child,.secondnav-search+.secondnav-link{padding-left:0}
.secondnav-inner{gap:0;padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2))}
.pg-wrap,.pdp-crumbs,.pdp-related,.cat-rails,.gate,.shell,.lp-split,.lp-triple,.home-section-title,footer .foot-inner,footer .foot-cols{width:calc(100% - var(--gutter) * 2);max-width:var(--maxw);margin-inline:auto;padding-inline:0}
.gate-inner,.brandbar-inner,.hero-inner,.strip-inner{max-width:var(--maxw)}
.pg-grid>.pg-card,.pg-grid>div>.pg-card:first-child{margin-top:0}

/* The category pages' brand row holder is empty when there are no tabs. */
header .brandbar{padding:0;background:var(--ps-surface)}
header .brandbar-inner{border-radius:0;padding:0 var(--gutter)}
header .brandbar-inner:empty{display:none}

/* The category pages' card wraps the image box in a link. */
.card>a.card-link:first-child{margin:0 0 8px}
.card .imgbox{margin:0;background:var(--ps-soft);border-radius:0}

/* Six to a row leaves little room for the card's button. */
.rail-track .addbtn{padding-inline:8px;font-size:.8125rem;white-space:nowrap}

@media (max-width:820px){
  :root{--gutter:16px}
  .secondnav-inner{padding-inline:var(--gutter)}
}
@media (max-width:520px){
  /* A phone's brand row holds the logo, the account and the cart, if a shop sets this link's label. */
  .topnav>.quickorder,.topnav .quickorder,.topnav .quickorder.solid,.topnav .quickorder.outline{display:none}
}

@media (max-width:520px){
  /* One brand row on a phone: a smaller logo and no tagline. */
  .brand.has-logo .brand-logo,.topnav .brand-logo{max-width:72px;max-height:32px}
  .brand.has-logo .brand-text small{display:none}
  .brand.has-logo{gap:6px}
}

@media (max-width:820px){
  /* A floating pill always sits on someone's content on a phone. Here it closes the page instead. */
  .pts-fab{position:static;display:flex;width:fit-content;margin:12px var(--gutter)}
}

/* ---------- Top bar: every control is a real link or a form ---------- */
a.navbtn,a.cart,a.secondnav-link,.btab{text-decoration:none}
a.navbtn:hover,a.cart:hover,a.navbtn:visited,a.cart:visited{color:#fff;text-decoration:none}
.topnav>a.navbtn{display:inline-flex;flex-direction:column;justify-content:center;line-height:1.2}
.topnav>a.navbtn .l1,.topnav>a.navbtn .l2{display:block}
form.searchwrap{margin:0}
.searchbtn svg{width:18px;height:18px}
/* One look for the active item wherever the row comes from: the server marks it, per page. */
a.secondnav-link,a.secondnav-link:visited{color:#fff}
a.secondnav-link:hover{color:#94e3ff}
.secondnav-link.active,.secondnav-link.active:visited{color:#94e3ff;font-weight:600;border-bottom-color:#94e3ff}
/* The points pill and the chat button have a place in the bar, so neither sits on the page. */
.pts-fab.pts-docked{position:static;flex:none;margin:auto 0 auto auto;padding:4px 12px;min-height:28px;border-radius:999px;box-shadow:none;transform:none;font-size:.8125rem;white-space:nowrap}
.pts-docked .pts-copy{flex-direction:row;align-items:center;gap:4px}
.pts-docked .pts-value{font-size:.8125rem;font-weight:600}
.pts-docked .pts-name{font-size:.8125rem;font-weight:400}
.topnav #phox-support-fab{position:static;flex:none;width:40px;height:40px;margin-left:auto;background:none;box-shadow:none;border-radius:999px;color:#fff;transform:none}
.topnav #phox-support-fab:hover{background:rgba(255,255,255,.14);transform:none}
.topnav #phox-support-fab svg{width:22px;height:22px}
.topnav #phox-support-fab~.acct,.topnav #phox-support-fab~.navbtn{margin-left:0}

/* ---------- Home: hero and panel, the same height ---------- */
.hero-copy{padding:40px;gap:14px}
.hero-title{font-size:clamp(1.875rem,3vw,2.75rem)}
.hero-sub{font-size:1rem}
/* The slot keeps its size while the read decides between the panel and the featured product. */
.hero-card.placeholder{visibility:hidden;min-height:0;transform:none}
.home-panel{justify-content:space-between}
.hp-steps{flex:1;justify-content:center}
.hero-card .hc-img img{width:86%;height:86%;max-width:86%;max-height:86%;object-fit:contain}

/* ---------- Home: category tiles, each with a product from its category and one big link ---------- */
.lp-split>.lp-panel,.lp-triple>.lp-panel,.lp-split>.lp-panel:first-child,.lp-split>.lp-panel:last-child,.lp-triple>.lp-panel:first-child,.lp-triple>.lp-panel:last-child{position:relative;min-height:180px;padding-right:152px;overflow:hidden;transition:box-shadow .15s}
.lp-split .lp-panel:hover,.lp-triple .lp-panel:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14)}
.lp-panel .lp-btn::before{content:"";position:absolute;inset:0}
.lp-panel .lp-cover{position:absolute;top:50%;right:16px;width:112px;height:112px;object-fit:contain;transform:translateY(-50%);mix-blend-mode:multiply;pointer-events:none}
.lp-pokemon h2,.lp-loyalty h2{font-size:1.375rem}

/* ---------- Home: brand links, one row ---------- */
#brandbar{scroll-margin-top:calc(var(--header-h,120px) + 12px)}
.brandbar-inner{flex-wrap:nowrap;min-height:56px;overflow-x:auto;scrollbar-width:none}
.brandbar-inner::-webkit-scrollbar{display:none}
.brandbar-label{flex:none;margin-right:6px;font:600 .875rem/1.2 var(--ps-display);color:var(--ps-ink);white-space:nowrap}
.btab{flex:none;display:inline-flex;align-items:center}
.btab.btab-all{margin-left:auto;border-color:transparent;background:none}
.btab.btab-all:hover{text-decoration:underline;background:none}

/* ---------- Cards: nothing moves as images and listings land ---------- */
.cat-rails{--rail-card-w:calc((min(100vw - var(--gutter) * 2,var(--maxw)) - var(--rail-gap) * (var(--rail-cols) - 1)) / var(--rail-cols))}
.rail-track>.rail-note{min-height:calc(var(--rail-card-w) + 136px);padding:0}
.card img.product{width:100%;height:100%;max-width:100%;max-height:100%;padding:8%;box-sizing:border-box;object-fit:contain}
.card h3,.card h3.title{display:-webkit-box;min-height:2.6em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* A price behind sign-in is a quiet link on the card, not a row of loud buttons. */
.addbtn.signin,.rail-track .addbtn.signin{min-height:32px;padding:4px 8px;background:transparent;border:1px solid var(--ps-hairline);color:var(--ps-primary-deep);font-size:.8125rem;font-weight:600}
.addbtn.signin:hover{background:var(--ps-soft);border-color:var(--ps-primary-deep);color:var(--ps-primary-deep)}

@media (max-width:820px){
  /* The row scrolls sideways: the fade says there is more of it. */
  .secondnav-inner{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pts-fab.pts-docked{margin:auto 28px auto 12px}
  .topnav #phox-support-fab{width:44px;height:44px;margin-left:0}
  .hero-copy{padding:24px;gap:12px}
  .hero-media{min-height:240px}
  .lp-split>.lp-panel,.lp-triple>.lp-panel,.lp-split>.lp-panel:first-child,.lp-split>.lp-panel:last-child,.lp-triple>.lp-panel:first-child,.lp-triple>.lp-panel:last-child{min-height:128px;padding-right:112px}
  .lp-panel .lp-cover{right:12px;width:88px;height:88px}
  .brandbar-label{display:none}
  .btab.btab-all{margin-left:0;text-decoration:underline}
}