/* ── WaaSizo Global Stylesheet — Executive Stealth Edition ──────
   Load AFTER Google Fonts, BEFORE page-level <style>.
   ──────────────────────────────────────────────────────────── */

/* ── Zero-Latency Black-Screen Guardrail ────────────────────────
   Mirrors the inline guard in header.php so the rule survives in
   the cached stylesheet even if the inline <style> is stripped or
   overridden by a late-loading third-party rule. */
div:not([id*='wz']):not([id*='vg']):not([id*='inferno']):not([id*='waasizo']):not(.header):not(.nav):not(nav) {
  pointer-events: auto;
}
body.lock-scroll, html.lock-scroll,
body.no-scroll,   html.no-scroll,
body.overflow-hidden, body.modal-open, body.scroll-locked {
  overflow: visible !important;
  height: auto !important;
  position: static !important;
}

/* ── Strict cart-overlay state lock ─────────────────────────────
   Hard-coded #cart-overlay in index.php must NEVER intercept clicks
   in its resting (closed) state. .open is added by openCart() only.
   Mirrored from brand.css for redundancy. */
#cart-overlay:not(.open),
.cart-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Stacking lift for primary tap targets ─────────────────────
   Logo and add-to-cart buttons stay above general page content
   (z:10) but well below modals and the torch. */
#waasizo-wordmark,
.btn--add-to-cart,
.add-to-cart-btn {
  position: relative;
  z-index: 10;
}

/* ── Font + brand variables inherited from brand.css ────────── */
/* brand.css defines: --vault-gold, --vault-gold-hi, --scarlet-ember,
   --scarlet-deep, --font-h, --font-n, --font-b, --fh, --fn, --fb,
   --fw-display, --ls-prestige, --shimmer-gradient, vault-gold-shimmer */

/* ── Semantic layout tokens ─────────────────────────────────── */
:root {
  --bg-primary:   #252525;
  --bg-secondary: #383838;
}

/* ── Full reset: remove default backgrounds before explicit rules */
*, *::before, *::after { background-color: transparent; }
html {
  background-color: #252525 !important;
  color: #E0E0E0 !important;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* on root element this controls the viewport — must be hidden, not clip */
}
body {
  background-color: #252525 !important;
  color: #E0E0E0 !important;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip; /* clip: no ghost scroll container; falls back to visible, but html catches it */
}
/* Safe-area for physical notch/island on any page that has a <header> */
header {
  width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  margin-top: 0 !important;
}

/* ── Executive Stealth color system ─────────────────────────── */
:root {
  /* Canonical brand tokens */
  --waasizo-scarlet:  #B30000;
  --waasizo-slate:    #707070;
  --waasizo-charcoal: #252525;

  /* Precision Scarlet — buttons and torch only */
  --scarlet:       #B30000;
  --scarlet-hi:    #CC1100;
  --scarlet-dk:    #8A0000;
  --scarlet-glow:  rgba(179,0,0,.3);

  /* Charcoal & Slate architecture */
  --charcoal:      #252525;
  --smoke:         #383838;
  --smoke-hi:      #444444;
  --gunmetal:      #1C1C1C;
  --slate:         #707070;
  --silver:        #E0E0E0;

  /* ── Page palette overrides ─────────────────────────────────── */
  --blue:          #B30000;
  --cyan:          #CC1100;
  --blue-dk:       #8A0000;
  --blue-hi:       #D44;
  --blue-xl:       #C88;

  /* Vault vs Market */
  --vault-accent:  #B30000;
  --market-accent: #3D3D3D;

  /* Glass / border */
  --border-hi:     rgba(179,0,0,.25);
  --glass-hi:      rgba(179,0,0,.04);
}

/* ── Native American torch-i — scarlet plasma flicker ───────── */
.torch-i {
  height: 1.22em; width: auto;
  vertical-align: middle; position: relative; top: -.10em;
  margin: 0 -4px;
  animation: wz-flicker 2.5s ease-in-out infinite alternate;
}
@keyframes wz-flicker {
  0%   { filter: drop-shadow(0 0 7px rgba(200,18,0,.55)) drop-shadow(1px 3px 5px rgba(0,0,0,.82)); }
  35%  { filter: drop-shadow(0 0 16px rgba(255,55,0,.78)) drop-shadow(1px 3px 5px rgba(0,0,0,.82)); }
  65%  { filter: drop-shadow(0 0 10px rgba(220,28,0,.64)) drop-shadow(1px 3px 5px rgba(0,0,0,.82)); }
  100% { filter: drop-shadow(0 0 26px rgba(255,80,0,.92)) drop-shadow(1px 3px 5px rgba(0,0,0,.82)); }
}

/* ── Brand inline torch (legacy alias) ──────────────────────── */
.brand-torch { animation: wz-flicker 2.5s ease-in-out infinite alternate; }

/* ── Wordmark brand wrap + curved slogan ─────────────────────── */
.wz-brand-wrap { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; padding-top: 10px; }
.waasizo-slogan-seal { width: 460px; height: 48px; margin-top: 5px; overflow: visible; }
@media (max-width: 860px) {
  .wz-brand-wrap { width: 100%; justify-content: center; padding-top: 8px; }
  .waasizo-slogan-seal { width: min(88vw, 360px); height: 40px; }
}
@media (max-width: 480px) {
  .waasizo-slogan-seal { width: min(94vw, 320px); height: 36px; }
}

/* ── Global link reset — crush browser-default blue everywhere ── */
a, a:link, a:visited, a:active {
  color: inherit !important;
  text-decoration: none !important;
}
a:hover { color: #B30000 !important; text-decoration: none !important; }

/* ── Vault link — Liquid Silver with Scarlet hover ───────────── */
.vault-link, .vault-link:link, .vault-link:visited { color: #E0E0E0 !important; }
.vault-link:hover { color: #B30000 !important; }

/* ── AI chat toggle button — hidden; Scarlet Torch is the trigger ── */
#wz-chat-toggle { display: none !important; }

/* ── Suppress any external chat widget (Tidio, Intercom, etc.) ── */
#tidio-chat, #tidio-chat-iframe,
[id*="tidio"], [id*="intercom"], [id*="drift"],
[id*="crisp"], [id*="hubspot"], [id*="chat-widget"],
[class*="tidio"], [class*="intercom-lightweight"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Base body — Matte Charcoal ─────────────────────────────── */
body {
  font-family: var(--font-b); -webkit-font-smoothing: antialiased;
  background: #252525;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-h); font-weight: 400; letter-spacing: 0.08em; line-height: 1.6; }

/* ── Gold shimmer — prestige numbers & titles ───────────────── */
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.prestige-gold {
  color: var(--vault-gold);
  background: var(--shimmer-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vault-gold-shimmer var(--shimmer-duration) linear infinite;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-prestige);
}

/* ── Prestige button — gold border, obsidian fill ───────────── */
.prestige-btn,
.btn-buy,
.btn-primary.ignite-btn {
  background: rgba(13,13,13,.82) !important;
  border: 1px solid var(--vault-gold) !important;
  color: var(--vault-gold) !important;
  font-family: var(--font-n) !important;
  font-weight: var(--fw-label) !important;
  letter-spacing: var(--ls-prestige) !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 0 0 var(--vault-gold-lo) !important;
  transition: background .2s, box-shadow .2s, border-color .2s !important;
  -webkit-text-fill-color: var(--vault-gold) !important;
}
.prestige-btn:hover,
.btn-buy:hover,
.btn-primary.ignite-btn:hover {
  background: rgba(30,22,0,.9) !important;
  border-color: var(--vault-gold-hi) !important;
  box-shadow: 0 0 18px var(--vault-gold-border), 0 0 36px var(--vault-gold-lo) !important;
  color: var(--vault-gold-hi) !important;
  -webkit-text-fill-color: var(--vault-gold-hi) !important;
}
.btn-buy:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }
.place-order-final { animation: vault-btn-pulse 2s ease-in-out infinite !important; }
@keyframes vault-btn-pulse {
  0%,100% { box-shadow: 0 0 8px var(--vault-gold-lo) !important; }
  50%      { box-shadow: 0 0 24px var(--vault-gold-border), 0 0 48px var(--vault-gold-lo) !important; }
}

/* ── Container baseline — Slate Grey ────────────────────────── */
.card, .product-card, .off-card, .sea-card, .art-card, .feat-card,
.ed-tile, .panel, .modal-inner, .drawer, .sidebar,
[class*="card-wrap"], [class*="-panel"], [class*="-box"],
.filter-bar, .filter-panel, .checkout-box, .order-summary,
.dash-card, .vault-card, .seller-card, .listing-card {
  background: #2E2E2E;
}

/* ── Typography — luxury serif on titles, Cinzel on numbers ─── */
.card-title, .ctitle, .off-name, .sea-name, .product-title, .listing-title {
  font-family: var(--font-h); font-weight: 400; letter-spacing: 0.05em;
}
.card-price, .cprice, .off-price, .sea-price, .price,
.excl-price, .culinary-card-price, .lib-card-price {
  font-family: var(--font-n); font-weight: var(--fw-display); color: var(--vault-gold);
}
.logo, .nav-logo {
  font-family: 'Playfair Display', var(--font-h), serif;
  font-weight: 700; letter-spacing: 0.10em;
  text-decoration: none !important;
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, #d8d8d8 0%, #888 42%, #444 52%, #aaa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(220,28,0,.48));
  transition: filter .4s ease;
  cursor: pointer;
}
.logo:hover, .nav-logo:hover { filter: drop-shadow(0 0 20px rgba(255,60,0,.70)); }

/* ── Global button overrides — Precision Scarlet ─────────────── */
.btn-primary,
.btn-sell,
.btn-gold-full,
.sync-btn,
.btn-submit,
.btn-accept {
  background: var(--scarlet) !important;
  box-shadow: none !important;
  color: #fff !important;
  border: none !important;
  transition: background .15s, transform .1s;
}
.btn-primary:hover,
.btn-sell:hover,
.btn-gold-full:hover,
.sync-btn:hover,
.btn-submit:hover,
.btn-accept:not(:disabled):hover {
  background: var(--scarlet-hi) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active,
.btn-sell:active { transform: scale(.98) !important; background: var(--scarlet-dk) !important; }

/* ── Ghost / secondary button ────────────────────────────────── */
.btn-ghost,
.btn-secondary,
.btn-guide {
  background: rgba(26,26,26,.8) !important;
  border: 1px solid var(--slate) !important;
  color: var(--silver) !important;
  box-shadow: none !important;
}
.btn-ghost:hover, .btn-secondary:hover, .btn-guide:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--silver) !important;
  color: #fff !important;
}

/* ── Nav CTA ─────────────────────────────────────────────────── */
.nav-cta, .nav-login-btn {
  background: var(--scarlet) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.nav-cta:hover, .nav-login-btn:hover {
  background: var(--scarlet-hi) !important;
}

/* ── Vault badge — Scarlet, Market badge — Gunmetal ─────────── */
.vault-badge, .cert-badge, .official-badge {
  background: var(--scarlet) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.market-badge, .source-badge {
  background: #2E2E2E !important;
  color: #E0E0E0 !important;
  border: 1px solid #4A4A4A !important;
}

/* ── Focus rings — Scarlet ──────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--scarlet) !important;
  box-shadow: 0 0 0 2px rgba(179,0,0,.15) !important;
  outline: none;
}

/* ── Scrollbar — dark with scarlet thumb ────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1C1C1C; }
::-webkit-scrollbar-thumb { background: rgba(179,0,0,.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(179,0,0,.8); }
* { scrollbar-color: rgba(179,0,0,.5) #1C1C1C; scrollbar-width: thin; }

/* ── Selection highlight ─────────────────────────────────────── */
::selection { background: rgba(179,0,0,.25); color: #fff; }

/* ── Floating CSS Torch (AI assistant trigger) ───────────────── */
#scarlet-orb {
  position: fixed; bottom: 28px; right: 102px; z-index: 9999; /* shifted left to clear 3D Tidio torch */
  width: 18px; height: 64px;
  background: linear-gradient(to bottom, #4A4A4A 0%, #2E2E2E 40%, #1A1A1A 100%);
  border-radius: 3px 3px 7px 7px;
  cursor: pointer; border: none; padding: 0;
  display: flex; align-items: flex-start; justify-content: center;
  box-shadow: 2px 4px 12px rgba(0,0,0,.6);
  transition: transform .15s;
}
#scarlet-orb:hover { transform: translateY(-2px); }
/* Flame flares on hover — signals the agent is "live" */
#scarlet-orb:hover::before {
  width: 34px; height: 48px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%,
    #B30000 0%, #E02200 30%, #FF5500 55%, rgba(255,140,0,.7) 78%, transparent 100%);
  animation-duration: 0.35s;
  filter: blur(0.3px) brightness(1.18);
  transition: width .2s, height .2s;
}

/* Flame */
#scarlet-orb::before {
  content: '';
  position: absolute; bottom: calc(100% - 2px); left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 36px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%,
    #B30000 0%, #CC2200 35%, #FF4400 60%, rgba(255,120,0,.55) 80%, transparent 100%);
  border-radius: 50% 50% 30% 30% / 65% 65% 35% 35%;
  animation: torch-flicker 0.7s ease-in-out infinite alternate;
  filter: blur(0.5px);
}
/* Torch cup — connects handle to flame */
#scarlet-orb::after {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 8px;
  background: #3D3D3D;
  border-radius: 3px 3px 0 0;
  border: 1px solid #555;
}

@keyframes torch-flicker {
  0%   { transform: translateX(-50%) scaleX(1)   scaleY(1)    skewX(0deg); opacity: 1; }
  25%  { transform: translateX(-52%) scaleX(.92) scaleY(1.06) skewX(-2deg); opacity: .95; }
  50%  { transform: translateX(-48%) scaleX(1.06) scaleY(.96) skewX(1.5deg); opacity: 1; }
  75%  { transform: translateX(-51%) scaleX(.96) scaleY(1.04) skewX(-1deg); opacity: .9; }
  100% { transform: translateX(-50%) scaleX(1)   scaleY(1)    skewX(0deg); opacity: 1; }
}

@keyframes torchWelcome {
  0%   { box-shadow: 2px 4px 12px rgba(0,0,0,.6), 0 0 0 0 rgba(179,0,0,0); }
  25%  { box-shadow: 2px 4px 12px rgba(0,0,0,.6), 0 0 28px 14px rgba(179,0,0,.6); }
  60%  { box-shadow: 2px 4px 12px rgba(0,0,0,.6), 0 0 18px 8px rgba(179,0,0,.35); }
  100% { box-shadow: 2px 4px 12px rgba(0,0,0,.6), 0 0 0 0 rgba(179,0,0,0); }
}
.torch-welcome-pulse {
  animation: torchWelcome 2s ease-out 0.5s 1 both;
}

/* Torch tooltip */
#scarlet-orb-tip {
  position: fixed; bottom: 104px; right: 94px; z-index: 9999;
  background: rgba(17,17,17,.95); border: 1px solid rgba(179,0,0,.3);
  color: #E0E0E0; font-family: var(--font-b); font-size: .78rem;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transform: translateY(4px); transition: opacity .15s, transform .15s;
}
#scarlet-orb:hover ~ #scarlet-orb-tip,
#scarlet-orb-tip:hover {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ── Hide AI orb on mobile — mob-nav + 3D torch fill that corner ── */
@media (max-width: 768px) {
  #scarlet-orb, #scarlet-orb-tip { display: none !important; }
}

/* ── Mobile tap target floor — min 48px ─────────────────────── */
@media (pointer: coarse) {
  .qty-btn, .nav-cart-btn, .pwd-toggle, .btn-mute,
  .filter-pill, .pill, .species-btn, .species-pill,
  .nav-link, .nav-cta, .nav-login-btn {
    min-width: 48px; min-height: 48px;
  }
  .qty-btn { width: 44px !important; height: 44px !important; }
}

/* ── Sticky mobile buy bar (product pages) ───────────────────── */
.sticky-buy-bar {
  display: none;
}
@media (max-width: 768px) {
  .sticky-buy-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 8888;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #111111;            /* solid — no backdrop-filter on mobile */
    border-top: 1px solid #2E2E2E;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sticky-buy-price {
    font-family: var(--font-h, 'Syne', sans-serif);
    font-size: 1.1rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
  }
  .sticky-buy-btn {
    flex: 1; padding: 14px;
    background: var(--waasizo-scarlet, #B30000);
    border: none; border-radius: 10px; cursor: pointer;
    font-family: var(--font-h, 'Syne', sans-serif);
    font-size: .88rem; font-weight: 700; color: #fff;
    letter-spacing: .04em; transition: background .15s;
  }
  .sticky-buy-btn:hover { background: #CC1100; }
  /* Add bottom padding so content isn't hidden under the bar */
  body.has-sticky-buy { padding-bottom: 80px; }
}

/* ── Scarlet Glow — global action buttons ────────────────────── */
@keyframes scarlet-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 77, 77, 0.4); }
  50%       { box-shadow: 0 0 22px #ff4d4d, 0 0 44px rgba(255, 0, 0, 0.35); }
}

.checkout-btn,
.add-to-cart-btn {
  background: linear-gradient(135deg, #ff4d4d 0%, #b30000 100%);
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}

.checkout-btn:hover,
.add-to-cart-btn:hover {
  box-shadow: 0 0 20px #ff4d4d, 0 0 40px rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
}

.place-order-final {
  animation: scarlet-pulse 2s infinite;
}

/* ── Neon Ember — breathing glow, dark amber + deep scarlet (no gold-on-gold wash) ─── */
@keyframes neon-ember {
  0%, 100% {
    text-shadow: 2px 2px 0px #000, 0 0 6px rgba(165,122,3,.7), 0 0 14px rgba(139,0,0,.35);
  }
  50% {
    text-shadow: 2px 2px 0px #000, 0 0 10px rgba(165,122,3,.9), 0 0 22px rgba(139,0,0,.55), 0 0 36px rgba(165,122,3,.2);
  }
}
.card-price { animation: neon-ember 3.2s ease-in-out infinite; }
.wl-sc:not(:empty) { animation: neon-ember 3.2s ease-in-out infinite; }

/* ── High-contrast text on dark backgrounds ─────────────────── */
.on-smoke        { color: #E0E0E0; }
.on-smoke strong { color: #fff; }
.on-smoke a      { color: var(--scarlet-hi); }

/* ── Seller Tier Hallmarks ──────────────────────────────────── */
.seller-badge{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:default;flex-shrink:0}
.seller-badge .sb-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0a0a0a;border:1px solid rgba(212,175,55,.35);border-radius:6px;padding:4px 10px;font-size:.62rem;font-weight:600;letter-spacing:.06em;color:#d4af37;pointer-events:none;opacity:0;transition:opacity .18s;z-index:999}
.seller-badge:hover .sb-tip{opacity:1}

/* Vault Flame — Individual */
.vault-flame{width:22px;height:22px;border-radius:50%;background:#0a0a0a;border:1.5px solid #B30000;display:inline-flex;align-items:center;justify-content:center}
.vault-flame svg{width:11px;height:11px}

/* Merchant Seal — Verified Heat Collector (3D Wax Badge) */
@keyframes seal-spin{to{transform:rotate(360deg)}}
@keyframes seal-glow{
  0%,100%{box-shadow:0 0 8px rgba(212,175,55,.35),0 4px 14px rgba(0,0,0,.55)}
  50%    {box-shadow:0 0 18px rgba(212,175,55,.65),0 4px 20px rgba(0,0,0,.65)}
}
.merchant-seal-wrap{position:relative;display:inline-flex;align-items:center}
.merchant-seal{
  position:relative;width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  animation:seal-glow 2.4s ease-in-out infinite;
  overflow:hidden;flex-shrink:0;cursor:pointer
}
.merchant-seal::before{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;
  background:conic-gradient(from 0deg,transparent 78%,rgba(255,255,255,.5) 86%,rgba(255,255,248,.75) 90%,transparent 97%);
  animation:seal-spin 3s linear infinite
}
.merchant-seal .wz-seal-svg{display:block;width:100%;height:100%;position:relative;z-index:1}
/* Tooltip */
.merchant-seal-wrap .seal-tip{
  display:none;position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:rgba(12,12,12,.96);
  border:1px solid rgba(212,175,55,.4);border-radius:10px;padding:9px 13px;
  font-size:.67rem;font-weight:500;line-height:1.55;color:rgba(255,255,255,.85);
  width:210px;text-align:center;white-space:normal;pointer-events:none;
  z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.65)
}
.merchant-seal-wrap:hover .seal-tip{display:block}

/* Verified Heat Collector — Individual who has uploaded ID and been approved */
@keyframes vhc-pulse{
  0%,100%{box-shadow:0 0 8px #FF4D4D,0 0 20px rgba(255,77,77,.45),inset 0 0 5px rgba(255,77,77,.2)}
  50%    {box-shadow:0 0 16px #FF4D4D,0 0 36px rgba(255,77,77,.65),inset 0 0 10px rgba(255,77,77,.3)}
}
.vhc-badge{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,77,77,.18),rgba(139,0,0,.12));
  border:1.5px solid #FF4D4D;
  display:inline-flex;align-items:center;justify-content:center;
  animation:vhc-pulse 1.8s ease-in-out infinite;
}
.vhc-badge svg{width:11px;height:11px}

/* Card-corner placement */
.card-seller-badge{position:absolute;bottom:8px;left:8px;z-index:4}

/* ═══════════════════════════════════════════════════════════════
   MOBILE GPU CRASH PREVENTION — ≤ 768px
   Disables compositing layer triggers that cause iOS/Android
   to render a solid black void over all content.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Body baseline — prevent transparent-to-black in Safari */
  html, body {
    background-color: #1A1A1A !important;
    position: relative !important;
    touch-action: pan-y; /* block horizontal rubber-band that reveals the black void */
  }

  /* 2. Kill full-screen fixed overlays that create GPU layers */
  #seasonal-fx,
  #torch-vol-light {
    display: none !important;
  }

  /* 2b. Hide ambient orbs — 800px blurred fixed divs are the #1 source
         of phantom horizontal scroll on iOS Safari.
         Explicit compound selectors cover specificity from inline .o1/.o2/.o3 rules. */
  .orb,
  .orb.o1,
  .orb.o2,
  .orb.o3 {
    display: none !important;
  }

  /* 2c. Kill Google Translate injected iframes — GT injects a position:fixed
         iframe (goog-te-banner-frame) at top:0 left:0 even with autoDisplay:false.
         On iOS Safari this fixed iframe composites as a solid black box. */
  iframe.goog-te-banner-frame,
  .goog-te-banner-frame,
  #goog-gt-tt,
  .skiptranslate > iframe,
  body > .skiptranslate {
    display: none !important;
  }
  body {
    top: 0 !important; /* GT sets body.top to offset the banner height; undo it */
  }

  /* 3. Strip backdrop-filter sitewide — the #1 iOS black void trigger.
        Fixed+backdrop-filter on iOS WebKit creates an offscreen
        compositing buffer that can render entirely black. */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3a. brand.css sets nav { backdrop-filter: blur(12px) !important } with
         specificity 1 — beats the universal * above (specificity 0) even with
         !important. Add an equal-specificity nav rule here (style.css loads
         AFTER brand.css, so source-order wins at equal specificity).
         iOS Safari also breaks position:sticky when backdrop-filter is active —
         removing it restores sticky behavior and kills the scrolling black box. */
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3b. Logo gradient-clip + filter = iOS black box.
         -webkit-text-fill-color:transparent + filter:drop-shadow on the SAME element
         creates a black compositing layer on iOS Safari. Strip the filter; the gradient
         text still renders — it just loses the glow, which is acceptable on mobile. */
  .logo,
  .logo:hover {
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* 4. Disable volumetric/expensive filter animations on torch nav icons */
  .torch-i,
  .torch-i.online,
  .torch-i.offline {
    filter: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* 5. Kill perspective + filter on torch cup (creates its own stacking context) */
  .etorch-cup {
    transform: none !important;
    filter: none !important;
  }

  /* 6. Throttle torch canvas — stop requesting animation frames on hidden GPU */
  #torch-canvas {
    display: none !important;
  }

  /* 7. Nuke common marketing-app injected modal patterns
        (SMSBump, Klaviyo, Privy, Omnisend, etc.) */
  [class*="smsbump"],
  [class*="klaviyo-popup"],
  [class*="privy-overlay"],
  [class*="omnisend-popup"],
  [class*="tidio-popup-container"],
  [id*="smsbump"],
  [id*="klaviyo_form"],
  [id*="privy-"] {
    display: none !important;
  }

  /* 9. ── ZERO-GAP NAV FIX ──────────────────────────────────────
        Kill the seller-util-bar and pass-torch-bar — both render
        above the nav and push WaaSizo branding down on mobile.
        These bars carry desktop-only utility links irrelevant on
        small screens. The nav becomes the true top edge. */
  .seller-util-bar,
  .pass-torch-bar {
    display: none !important;
  }

  /* 10. Reset nav offset injected by .seller-util-bar + nav rule */
  nav, [role="navigation"] {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 11. Safe-area-inset-top — fills iPhone notch so nav hugs the
         hardware edge (only works when viewport-fit=cover is set) */
  nav:first-of-type,
  header,
  .snav {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* 12. html/body zero margin/padding — belt and braces */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 13. Safe-area-inset-bottom — fills iPhone home indicator gap so
         content never hides behind it. Mirrors rule 11's top treatment.
         Pages with a mob-nav (index.php) override this via their own
         inline rule: calc(58px + env(safe-area-inset-bottom)). */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}