/* style */
  .pwa-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;max-width:460px;margin:0 auto;
    display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;
    background:var(--surface,#12151d);border:1px solid var(--edge,#242a36);
    box-shadow:0 18px 50px -18px rgba(0,0,0,.7);animation:pwaUp .35s cubic-bezier(.2,.9,.3,1.2)}
  .pwa-banner[hidden]{display:none!important}
  .pwa-ic{border-radius:12px;flex:none}
  .pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .pwa-txt b{font-size:14.5px}.pwa-txt span{font-size:12.5px;color:var(--muted,#94a3b8);margin-top:2px}
  .pwa-acts{display:flex;flex-direction:column;gap:6px;flex:none}
  .pwa-yes{border:0;border-radius:10px;padding:9px 16px;font-weight:800;font-size:13.5px;color:#fff;cursor:pointer;
    background:linear-gradient(135deg,var(--accent,#FBBF24),var(--accent2,#F97316))}
  .pwa-no{border:0;background:none;color:var(--muted,#94a3b8);font-size:12px;cursor:pointer;padding:2px}
  .pwa-ios{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;max-width:460px;margin:0 auto;
    display:flex;align-items:center;gap:12px;padding:12px 40px 12px 14px;border-radius:18px;
    background:var(--surface,#12151d);border:1px solid var(--edge,#242a36);box-shadow:0 18px 50px -18px rgba(0,0,0,.7)}
  .pwa-ios[hidden]{display:none!important}
  .pwa-ios .pwa-txt b{font-size:14px}.pwa-ios .pwa-txt span{font-size:12.5px}
  .pwa-ios-x{position:absolute;top:8px;right:10px;border:0;background:none;color:var(--muted,#94a3b8);font-size:15px;cursor:pointer}
  @keyframes pwaUp{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
  @media(display-mode:standalone){.pwa-banner,.pwa-ios{display:none!important}}

/* style */
  /* Glossy $50k storefront finishes — fail visible, no layout shift */
  .card,.cyber-card,.drop-card,.pcard,.hc-card{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--neu-out-sm);
  }
  html[data-theme="light"] .card,html[data-theme="light"] .cyber-card,html[data-theme="light"] .drop-card{
    box-shadow:inset 0 1px 0 #fff,0 10px 28px -18px rgba(15,23,42,.18);
  }
  header.site::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent);
  }
  /* Menus drop out of the 58px bar. overflow:hidden clipped More and currency under the hero. */
  header.site,.navbar{overflow:visible}
  .navbar{position:relative}
  .navbar::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  }
  footer.site .fcard{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--neu-out);
  }
  @media(prefers-reduced-motion:reduce){
    .billboard-bg,.hero-orbs i{animation:none!important}
  }

  /* Hero: sequenced load-in. Deliberately CSS-only with fill-mode `both` and a
     visible resting state, so if animation never runs the content is still
     visible. Scroll-triggered reveals were tried and removed: on the 32k-px
     Microsoft catalog the observer did not fire and left products invisible,
     which is unacceptable on a storefront. Motion must fail visible. */
  html.js-motion .hero-copy>*{animation:heroIn .8s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.08s + var(--h,0) * .085s)}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  /* Sticky header condenses once the page scrolls (IO sentinel, no scroll listener).
     NOTE: never animate the navbar's height — it is a sticky element, so changing its
     height reflows all page content below it on every frame, which reads as the nav
     "jumping" and a gap opening as you scroll. Condense with shadow only (no layout). */
  header.site{transition:box-shadow .35s ease}
  .navbar{transition:box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s ease}
  html.scrolled .navbar{box-shadow:0 22px 50px -22px rgba(0,0,0,.8),0 0 46px -20px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--accent) 32%,var(--glass-edge))}

  /* More generous vertical rhythm on desktop — premium pages breathe */
  @media(min-width:900px){
    section{padding:76px 0}
    /* Checkout is a short column. The catalogue rhythm opened a blank band under the header. */
    body.checkout-mode main > section.co-page{padding:8px 0 24px !important}
    /* Landing page: category rail and cinematic hero sit on the header. */
    body.has-hero main > section.cat-shop,
    body.has-hero main > section.cinematic-hero-wrap{
      padding:0 !important;
      margin-top:0 !important;
    }
    /* Product page: the rate line is hidden and the path sits on the image. */
    body:not(.checkout-mode) main:not(.ibx) > section.pdp-page{
      padding:8px 0 48px !important;
    }
  }

  /* Everything collapses to static under reduced motion */
  @media(prefers-reduced-motion:reduce){
    html.js-motion .hero-copy>*{opacity:1!important;transform:none!important;animation:none!important}
    .navbar{transition:none}
  }

/* id="site-responsive-finish" */
  /* Shared storefront finish: quieter surfaces, consistent focus, fluid content. */
  :root{--content-gutter:clamp(16px,4vw,28px);--surface-radius:18px}
  html[data-theme="light"]{--edge:rgba(15,23,42,.10);--edge2:rgba(15,23,42,.16);--muted:#526076;--faint:#65738A}
  main,main section,.wrap,main form,main article,main aside{min-width:0}
  .wrap{width:100%;padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
  main :where(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%}
  main :where(button,a.btn,[role=button]){touch-action:manipulation}
  main :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 78%,white);outline-offset:3px}
  main :where(pre,code){max-width:100%;overflow-wrap:anywhere}
  main table{max-width:100%}
  main :where(.prose,.blog-body,.doc,.legal-copy){overflow-wrap:anywhere}
  @media(max-width:900px){
    :root{--content-gutter:clamp(16px,4.5vw,28px)}
    /* 16px wins over page and inline field sizes so iOS does not zoom the page on focus. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]),
    select,textarea{font-size:16px!important;min-height:44px}
    /* iOS ignores font-size on search fields until they paint as a text field. */
    input[type=search]{-webkit-appearance:textfield;appearance:textfield}
    /* Phone search stays inside the sticky header as a short strip. The shared
       input min-height above is 44px; this field is the one exception. */
    header.site .hdr-search-wrap{max-height:46px;padding:2px 0 4px}
    header.site .hdr-search{height:36px}
    header.site .hdr-search input{
      height:36px;min-height:36px!important;font-size:16px!important;
      padding:0 12px;border-radius:10px 0 0 10px;line-height:1.2
    }
    header.site .hdr-search:focus-within{border-radius:10px}
    header.site .hdr-search button{width:40px;height:36px;min-height:36px;border-radius:0 10px 10px 0}
    header.site .hdr-search button svg{width:16px;height:16px;max-width:16px}
    body:not(.checkout-mode):not(.topup-mode){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
    body.login-mode{padding-bottom:24px!important}
    body:not(.checkout-mode) main:not(.ibx) section{padding:14px 0!important}
    /* Category rail sits directly on the hero. Shared section padding opened a band between them. */
    body:not(.checkout-mode) main:not(.ibx) section.cat-shop,
    body:not(.checkout-mode) main:not(.ibx) section.cinematic-hero-wrap{
      padding:0 !important;
      margin-top:0 !important;
      margin-bottom:0 !important;
    }
    body:not(.checkout-mode) main:not(.ibx) section.drop-boxed,
    body:not(.checkout-mode) main:not(.ibx) section.deal-stage{
      padding-top:8px !important;
      padding-bottom:10px !important;
    }
    body:not(.checkout-mode) .wrap{padding-left:var(--content-gutter)!important;padding-right:var(--content-gutter)!important}
    .sec-head{align-items:flex-start}
    .sec-head h1,.sec-head h2{font-size:clamp(22px,4.8vw,30px)!important;line-height:1.15}
    .sec-head p{font-size:14px;line-height:1.5}
    .hero{padding:clamp(30px,8vw,52px) 0!important}
    .hero h1{font-size:clamp(30px,7vw,44px)!important;line-height:1.08;margin:10px 0 14px!important}
    .hero p.sub,.hero-sub{font-size:clamp(15px,3.8vw,18px)!important;line-height:1.55}
    .features{gap:14px}
    .cta-band{padding:clamp(24px,6vw,38px) clamp(18px,5vw,30px)!important}
    .fcard,.faq-item,.co-card,.tp-card{border-radius:var(--surface-radius)}
    .pg-search{width:100%;max-width:640px}
    main :where(table){display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    main :where(.table-wrap,.table-responsive){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .blog-body img,.prose img{height:auto}
  }
  @media(max-width:640px){
    :root{--content-gutter:16px;--surface-radius:16px}
    .features{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .chip{min-height:44px;display:inline-flex;align-items:center}
    .feat{min-width:0;padding:15px 13px!important}
    .feat h3{font-size:15px;line-height:1.25}
    .feat p{font-size:13px;line-height:1.5}
    .prose h1{font-size:clamp(26px,7vw,34px);line-height:1.12}
    .prose h2{font-size:20px;margin:24px 0 10px}
    .prose p,.prose li{font-size:15px;line-height:1.7}
    .faq-item{padding:18px 16px;margin-bottom:12px}
    .faq-item h3{font-size:16px}
    .cta-band .cta{gap:10px}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
    .card{min-width:0;border-radius:16px;display:flex;flex-direction:column}
    .card .thumb{width:100%;height:auto;aspect-ratio:1/1}
    .card .price-current-row{flex-wrap:wrap}
    .card .price-current-row > span{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
    .card .price-usd{margin-left:0}
    .card-body{padding:10px!important;gap:7px}
    .prod-category{font-size:10px;letter-spacing:.02em}
    .badge-pill{font-size:9px;padding:3px 6px}
    .card h3{font-size:14px!important;line-height:1.3;min-height:2.6em;max-height:2.6em}
    .price-box{padding:7px 8px}
    .price-val{font-size:17px}
    .price-term{font-size:10px}
    .card-btns{gap:8px;margin-top:4px}
    .cbtn-buy{height:auto;min-height:44px;font-size:12px;padding:0 8px;border-radius:10px}
    .cbtn-cart{width:44px;height:44px;flex:none;border-radius:10px}
    .cbtn-cart svg{width:18px;height:18px}
    .buybar .btn,.cart-pay{min-height:48px}
    .dash-tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
    .dash-tabs::-webkit-scrollbar{display:none}
    .dash-tabs .dt{flex:0 0 auto;min-height:44px}
    .cart-page-items{padding:10px}
    .cart-page-foot{padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px))}
    .pdp-info{padding:16px!important}
    .co-page,.cart-page{width:100%}
    .fcols{gap:20px 14px}
  }
  @media(max-width:380px){
    :root{--content-gutter:12px}
    .features{grid-template-columns:minmax(0,1fr)}
    /* Home catalogue stays two-up on small phones. */
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
    .card{display:flex!important;flex-direction:column!important}
    .card .thumb{width:100%!important;height:auto!important;aspect-ratio:1/1!important}
    .card .card-body{min-width:0}
    .card h3{font-size:13px!important;min-height:2.6em;max-height:2.6em}
    .card .cbtn-buy .cbtn-arr{display:none}
    .card .price-usd{display:none}
    .hero .cta .btn,.cta-band .cta .btn{width:100%;justify-content:center}
  }
  @media(max-width:420px){
    /* The round mark plus the wordmark were wider than the slot, so the name ran under INR. */
    .logo{gap:6px;font-size:16px;min-width:0}
    .logo .mark{width:32px;height:32px;font-size:15px;flex:none}
    .brandlogo{max-width:100%;width:auto;height:auto;max-height:30px}
  }
  @media(max-width:340px){
    .navbar{gap:2px;padding-inline:8px;height:54px}
    .logo{gap:4px}
    .logo .mark{width:28px;height:28px;font-size:14px}
    .theme-toggle{width:36px}
    .theme-toggle .track-icons{padding:0 4px}
    html[data-theme="light"] .theme-toggle .knob{transform:translateX(8px)}
    .nav-actions .cart-btn,.menu-btn{width:40px;height:44px}
  }
  @media(orientation:landscape) and (max-height:500px) and (max-width:900px){
    body:not(.checkout-mode):not(.topup-mode){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
    .hero{padding-block:22px!important}
    .hero .badges{margin-top:16px}
    .dock{bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }
  /* ── 2. COMMUNITY LANYARD POPUP STYLES ── */
  .cjoin-ov {
    position: fixed;
    inset: 0;
    z-index: 2300;
    background: rgba(3, 5, 10, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    animation: popFadeIn 0.25s ease forwards;
  }
  .cjoin-ov[hidden] { display: none !important; }

  .cjoin-x {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 35;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--edge);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.15s ease;
  }
  .cjoin-x:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
  }

  .lanyard-anchor { position: absolute; top: 0; left: 50%; width: 0; height: 0; }
  .lanyard {
    position: absolute;
    top: 0;
    left: 50%;
    width: 350px;
    max-width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 0;
    transform: translateX(-50%);
    will-change: transform;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .ly-strap {
    width: 18px;
    height: clamp(50px, 9vh, 90px);
    border-radius: 0 0 6px 6px;
    position: relative;
    background: repeating-linear-gradient(180deg, var(--accent), var(--accent) 10px, #128c7e 10px, #128c7e 20px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.6);
  }
  .ly-clip {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f1f5f9, #94a3b8 60%, #64748b);
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.5);
  }
  .ly-clip::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #475569;
    background: transparent;
  }

  .ly-card {
    position: relative;
    margin-top: 10px;
    width: 100%;
    cursor: grab;
    text-align: center;
    background: linear-gradient(165deg, color-mix(in srgb, #25d366 12%, var(--surface)), var(--surface) 55%, var(--bg2));
    border: 1.5px solid color-mix(in srgb, #25d366 40%, var(--edge));
    border-radius: 26px;
    padding: 30px 24px 24px;
    box-shadow: 0 44px 90px -30px rgba(0,0,0,.92),
                0 0 50px -20px color-mix(in srgb, #25d366 40%, transparent),
                inset 0 1px 0 rgba(255,255,255,.1);
  }
  html[data-theme="light"] .ly-card {
    background: #ffffff;
    border-color: rgba(37, 211, 102, 0.4);
    box-shadow: 0 32px 80px -20px rgba(15, 23, 42, 0.25), 0 0 40px -10px rgba(37, 211, 102, 0.25);
  }
  .lanyard.dragging .ly-card { cursor: grabbing; }

  .ly-hole {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 9px;
    border-radius: 999px;
    background: #05070c;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08);
  }
  .ly-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .ly-logo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 0 24px -4px rgba(37, 211, 102, 0.55), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .ly-tag {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #25d366;
  }
  .ly-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px auto 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
  }
  .ly-card h3 {
    font-family: var(--font-display);
    font-size: 20.5px;
    font-weight: 800;
    margin: 12px 0 6px;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  .ly-card p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 18px;
  }
  .ly-actions { display: grid; gap: 10px; }
  .ly-actions .btn { width: 100%; justify-content: center; }
  .cjoin-skip {
    margin-top: 12px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
  }
  .cjoin-skip:hover { color: var(--text); }
  .ly-hint {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--faint, #64748b);
    letter-spacing: 0.02em;
  }


  @media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .cjoin-ov {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgba(3, 5, 10, 0.94);
    }
  }
  body > .cjoin-ov { z-index: 4000; }

  /* main and footer.site are both z-index:1. A fixed dialog inside main
     cannot paint above the footer, so the amount sheet is cut off. */
  body > .amt-ov,
  body > .app-gate{z-index:4000}
  body > .vf-ov{z-index:5000}

/* id="site-skin" */
  /* Site skin: warm neutral surfaces, glass cards with a light rim, pill controls,
     one sans family and a soft colour mesh behind the page. Gold stays the CTA colour.
     Loaded last so it wins over the older finishes above at equal specificity. */
  :root{
    --font-display:'Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    --font-body:var(--font-display);
    --r:22px; --r-card:26px; --r-tile:22px; --r-ctl:999px; --surface-radius:22px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --pine:#2f5c50; --tomato:#c8431f; --butter:#f2c94c; --cream:#fbf8f2;
  }
  html[data-theme="dark"]{
    --bg:#111412; --bg2:#161917; --canvas:#111412; --field-bar:#111412; --field:none;
    --surface:#1f2421; --surface2:#272d2a; --card:#1f2421; --card2:#272d2a;
    --text:#f7f4ee; --muted:#b8bbb5; --faint:#9a9d97;
    --edge:rgba(255,255,255,.10); --edge2:rgba(255,255,255,.18); --hi:rgba(255,255,255,.07);
    --well:rgba(255,255,255,.06); --rim:rgba(255,255,255,.07);
    --glass:rgba(28,32,30,.9); --glass-strong:rgba(28,32,30,.97); --glass-edge:rgba(255,255,255,.1);
    --tile:rgba(255,255,255,.045); --float:#242927;
    --ink:#f1eee8; --on-ink:#17191a;
    --mesh-a:rgba(232,92,48,.40); --mesh-b:rgba(38,150,112,.42); --mesh-c:rgba(251,191,36,.24);
    --shadow-card:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -30px rgba(0,0,0,.75);
    --shadow-pop:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
    --shadow-lg:var(--shadow-pop);
    --input-bg:#161917; --money:#6cc59a;
  }
  html[data-theme="light"]{
    --bg:#ebe8e1; --bg2:#e4e0d7; --canvas:#ebe8e1; --field-bar:#ebe8e1; --field:none;
    --surface:#f6f4ef; --surface2:#efece5; --card:#f6f4ef; --card2:#efece5;
    --text:#17191a; --muted:#5f625e; --faint:#73766f;
    --edge:rgba(23,25,26,.09); --edge2:rgba(23,25,26,.16); --hi:rgba(23,25,26,.04);
    --well:rgba(23,25,26,.06); --rim:rgba(255,255,255,.78);
    --glass:rgba(253,252,249,.9); --glass-strong:rgba(253,252,249,.97); --glass-edge:rgba(23,25,26,.1);
    --tile:rgba(255,255,255,.5); --float:#fdfcf9;
    --ink:#17191a; --on-ink:#fbf8f2;
    --mesh-a:#f2d3bd; --mesh-b:#cfdfcd; --mesh-c:#f1e4bf;
    --shadow-card:inset 0 1px 0 rgba(255,255,255,.7),0 24px 48px -30px rgba(70,50,30,.32);
    --shadow-pop:0 24px 60px -18px rgba(40,30,20,.32),0 2px 6px rgba(40,30,20,.08);
    --shadow-lg:var(--shadow-pop);
    --input-bg:#fdfcf9; --money:#2f7a52; --alert:#c8431f;
    --btn-text:#1B1206; --on-accent:#1B1206;
  }

  /* Type: one family, medium body weight, tight display tracking. */
  body{font-family:var(--font-body);font-weight:500;line-height:1.55}
  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.08}
  .sec-head h1,.sec-head h2,
  html[data-theme="dark"] .sec-head h1,html[data-theme="dark"] .sec-head h2,
  html[data-theme="light"] .sec-head h1,html[data-theme="light"] .sec-head h2{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
    color:var(--text);font-weight:700;letter-spacing:-.03em}

  /* Background: three soft colour blobs on a flat warm field. Static gradients, so phones keep them. */
  html .bg-fx,
  html[data-theme] .bg-fx{background-color:var(--bg)!important;background-size:auto!important;background-repeat:no-repeat!important;
    background-image:
      radial-gradient(closest-side,var(--mesh-a),transparent) ,
      radial-gradient(closest-side,var(--mesh-c),transparent),
      radial-gradient(closest-side,var(--mesh-b),transparent)!important;
    background-position:-18vmax -24vmax,calc(100% - 8vmax) -16vmax,calc(100% + 24vmax) calc(100% + 30vmax)!important;
    background-size:62vmax 62vmax,46vmax 46vmax,70vmax 70vmax!important}
  .bg-horizon,.bg-dots{display:none!important}
  html,body{background:var(--bg)}

  /* Header: transparent bar, centred pill tab track, round icon controls. */
  header.site,body.has-hero header.site,html[data-theme="light"] header.site{
    background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--edge)}
  header.site::after{display:none}
  .logo{font-weight:700;font-size:21px;letter-spacing:-.02em}
  .logo .mark,html[data-theme="light"] .logo .mark{width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--on-ink);
    box-shadow:none;text-shadow:none;font-weight:700}
  nav.links,html[data-theme="light"] nav.links{gap:2px;padding:4px;border-radius:var(--r-ctl);background:var(--well);border:1px solid var(--edge)}
  nav.links a.nl,nav.links .nl-trigger,html[data-theme="light"] nav.links a.nl{
    color:var(--text);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:var(--r-ctl);
    transition:background .2s var(--ease),color .2s var(--ease)}
  nav.links a.nl::after{display:none}
  nav.links a.nl:hover,nav.links .nl-trigger:hover{background:var(--well);color:var(--text)}
  nav.links a.nl.active,nav.links .nl-trigger.active,
  html[data-theme="light"] nav.links a.nl.active,html[data-theme="light"] .nl-trigger.active{
    background:var(--ink);color:var(--on-ink);box-shadow:none;text-shadow:none}
  .nl-menu,html[data-theme="light"] .nl-menu{background:var(--float)!important;border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow-pop)}
  .ccy-btn,.acct-btn,.menu-btn{border-radius:var(--r-ctl);background:var(--tile);border:1px solid var(--rim);color:var(--text)}
  .ccy-btn:hover,.acct-btn:hover{background:var(--well);border-color:var(--edge2);color:var(--text)}
  .cart-btn{background:var(--tomato)}
  .cart-btn::after{display:none}
  .hdr-search input{border-radius:var(--r-ctl) 0 0 var(--r-ctl);background:var(--tile);border-color:var(--edge2);color:var(--text)}
  .hdr-search input::placeholder{color:var(--faint)}
  .hdr-search button{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
  .hdr-search:focus-within{border-radius:var(--r-ctl)}

  /* Buttons: pills. Gold stays primary; ghost is a neutral glass pill. */
  .btn{border-radius:var(--r-ctl);font-weight:700;letter-spacing:0;
    transition:filter .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
  .btn:hover{transform:none;filter:brightness(1.06);box-shadow:none}
  .btn:active{transform:scale(.98)}
  .btn.sm{border-radius:var(--r-ctl)}
  html[data-theme="light"] .btn:not(.ghost):not(.secondary){color:var(--gold-ink,#1B1206);text-shadow:none;border-color:color-mix(in srgb,#b45309 40%,var(--gold))}
  html[data-theme="light"] .btn.primary,html[data-theme="light"] .btn.shop-cta{color:var(--gold-ink,#1B1206)}
  .btn.ghost,.btn.secondary,
  html[data-theme="light"] .btn.ghost,html[data-theme="light"] .btn.secondary{
    color:var(--text);background:var(--tile);border:1px solid var(--edge2);box-shadow:none}
  .btn.ghost:hover,.btn.secondary:hover,
  html[data-theme="light"] .btn.ghost:hover{color:var(--text);background:var(--well);border-color:var(--edge2)}

  /* Product card actions: gold pill + round glass cart, same in both themes. */
  .cbtn-buy,html[data-theme="light"] .cbtn-buy{border-radius:var(--r-ctl);background:var(--gold);color:var(--gold-ink,#1B1206)!important;
    font-family:var(--font-display);font-weight:700;text-shadow:none;box-shadow:none}
  .cbtn-buy:active,html[data-theme="light"] .cbtn-buy:active{transform:scale(.98)!important;box-shadow:none!important}
  .cbtn-cart,html[data-theme="light"] .cbtn-cart,html[data-theme="light"] .cbtn-cart:hover{border-radius:50%;background:var(--tile);border:1px solid var(--edge2);color:var(--text);box-shadow:none}
  .cbtn-cart:hover{border-color:var(--gold);color:var(--text)}
  .cbtn-cart:active{transform:scale(.94)!important;box-shadow:none!important}
  html[data-theme] .cbtn-cart.added{background:color-mix(in srgb,var(--money) 16%,transparent);border-color:var(--money);color:var(--money)}
  @media(max-width:900px){.cbtn-buy,.cbtn-cart,.btn-cart-quick{border-radius:var(--r-ctl)}.cbtn-cart{box-shadow:none}}
  /* Product page: pill buy bar, panels on the card radius. */
  .buybar .btn,.pdp-page .buybar .btn{border-radius:var(--r-ctl)}
  .pdp-info,.pdp-frame{border-radius:var(--r-card)}
  .pp-card,.phist{border-radius:var(--r-tile)}

  /* Chips / filters: pill track, ink pill when active. */
  .chip{border-radius:var(--r-ctl)}
  .chip:not(.active){background:var(--tile);border:1px solid var(--edge);color:var(--text)}
  .chip:not(.active):hover{background:var(--well);border-color:var(--edge2);transform:none}
  .chip.active,html[data-theme="dark"] .chip.active,html[data-theme="light"] .chip.active{
    background:var(--ink);color:var(--on-ink);border:1px solid transparent;box-shadow:none;text-shadow:none}
  .chip.active b{color:inherit}

  /* Cards: glass panels with a light rim and a soft, low shadow. */
  .card,.hc-card,.drop-card,.bh-card,.pcard,.cyber-card,
  html[data-theme="light"] .card,html[data-theme="light"] .cyber-card,html[data-theme="light"] .drop-card{
    background:var(--tile);border:1px solid var(--rim);border-radius:var(--r-tile);box-shadow:var(--shadow-card)}
  html[data-theme="dark"] .card,html[data-theme="dark"] .hc-card,html[data-theme="dark"] .drop-card,html[data-theme="dark"] .bh-card{
    background:var(--surface);border-color:var(--edge)}
  .card:hover,html[data-theme="light"] .card:hover{transform:translateY(-2px);border-color:var(--edge2);box-shadow:var(--shadow-card)}
  .card .thumb,html[data-theme="light"] .card .thumb{background:var(--well);border-bottom:1px solid var(--edge)}
  .price-box,html[data-theme="light"] .price-box{background:var(--well);border:1px solid var(--edge);border-radius:14px}
  .feat,html[data-theme="dark"] .feat,html[data-theme="light"] .feat,
  .cta-band,.about-panel,.rs-home-card,.drop-box,.deal-stage-in,.tp-widget{
    background:var(--tile);border:1px solid var(--rim);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
  html[data-theme="dark"] :is(.feat,.cta-band,.about-panel,.rs-home-card,.drop-box,.deal-stage-in,.tp-widget){background:var(--surface);border-color:var(--edge)}
  .feat::before{display:none}
  .feat:hover{transform:none;border-color:var(--edge2);box-shadow:var(--shadow-card)}
  .feat .ic{border-radius:50%;background:var(--well);border:1px solid var(--rim)}

  /* Fields */
  .field,html[data-theme="light"] .field{background:var(--input-bg);border:1px solid var(--edge2);border-radius:14px;color:var(--text)}
  .field::placeholder{color:var(--faint)}
  .field:focus,html[data-theme="light"] .field:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent);border-color:var(--gold)}

  /* Footer */
  .fcard,html[data-theme="light"] .fcard{background:var(--tile);border:1px solid var(--rim);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
  html[data-theme="dark"] .fcard{background:var(--surface);border-color:var(--edge)}
  .fcard::before,.fcard::after{display:none}

  /* Dark mode lift: cards catch a little light from the top, gold CTAs glow, section kickers carry colour. */
  html[data-theme="dark"] :is(.card,.hc-card,.drop-card,.bh-card,.feat,.cta-band,.about-panel,.rs-home-card,.drop-box,.deal-stage-in,.tp-widget,.fcard,.pdp-info){
    background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%)}
  html[data-theme="dark"] :is(.btn:not(.ghost):not(.secondary),.cbtn-buy,.fomo-go){box-shadow:0 10px 26px -12px rgba(251,191,36,.65)}
  html[data-theme="dark"] :is(.btn:not(.ghost):not(.secondary),.cbtn-buy):hover{box-shadow:0 14px 32px -12px rgba(251,191,36,.8)}
  html[data-theme="dark"] .drop-kicker,html[data-theme="dark"] .sec-head .eyebrow{color:var(--gold)}

  /* Phone dock: one ink capsule with round buttons. */
  @media(max-width:900px){
    .dock,html[data-theme] .dock{background:var(--ink)!important;border:1px solid var(--edge);border-radius:var(--r-ctl);padding:6px 8px;
      box-shadow:0 20px 40px -18px rgba(0,0,0,.45)}
    html[data-theme="dark"] .dock{background:#262b29!important;border-color:var(--edge2)}
    .dock-item{border-radius:var(--r-ctl);color:color-mix(in srgb,var(--on-ink) 78%,transparent)}
    html[data-theme="dark"] .dock-item{color:color-mix(in srgb,var(--text) 78%,transparent)}
    .dock-item.active,html[data-theme="dark"] .dock-item.active{color:var(--gold);background:rgba(255,255,255,.12)}
    .dock-item.cart{background:var(--tomato);border-color:transparent}
  }
  @media(prefers-reduced-motion:reduce){
    .card:hover{transform:none}
  }

/* id="site-skin-light" */
  /* Light theme: calm, premium storefront. Warm off-white page, near-white cards,
     pastel tiles behind product art, big tight display type, ink pill buttons.
     Gold stays for sale and deal accents. Loaded after site-skin. */
  :root{
    --font-display:'Bricolage Grotesque','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-body:'Geist','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  html[data-theme="light"]{
    --bg:#f2efe9; --bg2:#ebe7df; --canvas:#f2efe9; --field-bar:#f2efe9;
    --surface:#fbfaf7; --surface2:#f5f2ec; --card:#fbfaf7; --card2:#f5f2ec; --float:#fbfaf7;
    --text:#1c1b18; --muted:#66625a; --faint:#7d796f;
    --edge:rgba(28,27,24,.08); --edge2:rgba(28,27,24,.14); --well:rgba(28,27,24,.05); --rim:rgba(28,27,24,.06);
    --tile:#fbfaf7; --ink:#1c1b18; --on-ink:#f2efe9;
    --mesh-a:transparent; --mesh-b:transparent; --mesh-c:transparent;
    --shadow-card:none; --shadow-pop:0 24px 60px -24px rgba(28,27,24,.25),0 2px 8px rgba(28,27,24,.06);
    --t-sage:#dbe4d3; --t-butter:#f1e7c6; --t-sky:#dbe3ee; --t-sand:#ebe2d4; --t-blush:#efded7; --t-stone:#e5e2db;
    --money:#1c1b18; --alert:#c2410c; --blue:#2f47d0;
    /* Accent: ink. Blue stays for a few small highlights. --gold keeps its name so older rules that read it follow the light theme. */
    --gold:#1c1b18; --accent:#1c1b18; --accent2:#33312c; --neon-cyan:#1c1b18;
    --gold-ink:#FFFFFF; --on-accent:#FFFFFF; --btn-text:#FFFFFF;
  }
  body{font-family:var(--font-body)}
  html[data-theme="light"] body{font-weight:400;letter-spacing:0}
  html[data-theme="light"] :is(h1,h2,h3){font-family:var(--font-display);font-weight:650;letter-spacing:-.035em;color:var(--text)}
  html[data-theme="light"] .sec-head h1,html[data-theme="light"] .sec-head h2{font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.04em;font-weight:650}
  html[data-theme="light"] .sec-head p{color:var(--muted)}
  html[data-theme="light"] :is(.drop-kicker,.eyebrow,.sec-kicker,.rv-k){font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  /* Page: flat warm field */
  html[data-theme="light"] .bg-fx{background-image:none!important;background-color:var(--bg)!important}

  /* Header: floating glass pill */
  html[data-theme="light"] header.site{background:transparent;border-bottom:0}
  html[data-theme="light"] header.site .navbar{margin-top:10px;padding:0 8px 0 18px;height:60px;border-radius:999px;
    background:color-mix(in srgb,#fbfaf7 78%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    box-shadow:0 1px 0 rgba(28,27,24,.04),0 12px 30px -20px rgba(28,27,24,.25)}
  html[data-theme="light"] nav.links{background:transparent;border:0;padding:0;gap:4px}
  html[data-theme="light"] nav.links a.nl,html[data-theme="light"] nav.links .nl-trigger{font-size:14px;font-weight:500;padding:9px 14px;color:var(--text)}
  html[data-theme="light"] nav.links a.nl:hover{background:var(--well)}
  html[data-theme="light"] .logo{font-family:var(--font-display);font-weight:650;letter-spacing:-.03em}
  html[data-theme="light"] .cart-btn{background:var(--ink);color:var(--on-ink)}
  html[data-theme="light"] :is(.ccy-btn,.acct-btn){background:transparent;border-color:transparent}
  html[data-theme="light"] .hdr-search input{background:#fbfaf7;border-color:var(--edge)}
  html[data-theme="light"] .hdr-search button{background:var(--ink);color:var(--on-ink)}
  html[data-theme="light"] .hdr-search button svg{color:var(--on-ink)}

  /* Buttons: ink pills, light ghost pills */
  html[data-theme="light"] .btn:not(.ghost):not(.secondary),
  html[data-theme="light"] :is(.cbtn-buy,.btn-cinema-primary,.fomo-go,.btn.primary,.btn.shop-cta){
    background:var(--ink)!important;color:var(--on-ink)!important;border:0!important;box-shadow:none!important;text-shadow:none!important;
    font-family:var(--font-body);font-weight:500;letter-spacing:0;border-radius:999px}
  html[data-theme="light"] .btn:not(.ghost):not(.secondary):hover,html[data-theme="light"] .cbtn-buy:hover{filter:none;background:#33312c!important}
  html[data-theme="light"] :is(.btn.ghost,.btn.secondary,.btn-cinema-secondary){background:#fbfaf7!important;color:var(--text)!important;border:1px solid var(--edge2)!important;box-shadow:none!important;font-weight:500}
  html[data-theme="light"] .cbtn-cart{background:#fbfaf7;border:1px solid var(--edge2);color:var(--text)}

  /* Chips */
  html[data-theme="light"] .chip:not(.active){background:#fbfaf7;border:1px solid var(--edge)}

  /* Home hero: the same cinematic dark poster as dark mode. The hero keeps the
     dark theme's colours and keys here so both themes show one design. */
  html[data-theme="light"] .cinematic-hero-wrap{
    --accent:#F43F3F; --accent2:#F64343; --gold:#F43F3F; --gold-ink:#FFFFFF; --on-accent:#FFFFFF; --btn-text:#FFFFFF;
    --text:#ECEFF4; --muted:#B3BAC7; --faint:#848D9D; --edge:rgba(255,255,255,.075); --edge2:rgba(255,255,255,.14);
    --r-key:9px;
    --key:linear-gradient(180deg,#2C3139 0%,#22262D 55%,#1C2026 100%);
    --key-bevel:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.65);
    --gold-key:linear-gradient(180deg,#F75454 0%,#F41A1A 55%,#CD1616 100%);
    --gold-bevel:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.6),0 10px 24px -12px rgba(244,26,26,.6);
    --cta:linear-gradient(180deg,#F75454 0%,#F41A1A 55%,#CD1616 100%);
    --cta-glow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.3),0 12px 28px -12px rgba(244,26,26,.75);--cta-ink:#fff;
    --font-display:'Space Grotesk','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-body:'Inter','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-family:var(--font-body);color-scheme:dark}
  html[data-theme="light"] .cinematic-hero-wrap .billboard-title{color:#fff;font-weight:600}
  html[data-brand="ott24x7"][data-theme="light"] .cinematic-hero-wrap{--accent:#ff7180;--accent2:#ff4057;--gold:#e11d48}
  html[data-theme="light"] .cinematic-hero-wrap .billboard-eyebrow{font-family:var(--font-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
  html[data-theme="light"] .cinematic-hero-wrap :is(.btn-cinema-primary,.hs-btn){border-radius:var(--r-key)!important;font-family:var(--font-body)}
  html[data-theme="light"] .cinematic-hero-wrap .btn-cinema-secondary{
    background:var(--key)!important;color:var(--text)!important;border:0!important;border-radius:var(--r-key)!important;box-shadow:var(--key-bevel)!important}

  /* Leftover hard-coded yellows: badges, chips, deal tags, cookie button, toggle knob */
  html[data-theme="light"] :is(.badge-pill.badge-bestseller,.deal-off,.drop-chip.sale,.drop-chip.fresh,.market-cat-count){background:#1c1b18!important;background-image:none!important;color:#fff!important;border-color:transparent!important;box-shadow:none!important}
  html[data-theme="light"] .deal-stage-media{border-color:var(--edge)!important}
  html[data-theme="light"] .cookie-yes{background:var(--ink)!important;color:var(--on-ink)!important;border-color:transparent!important}
  html[data-theme="light"] .skip-link{background:var(--ink)!important;color:var(--on-ink)!important}
  html[data-theme="light"] .theme-toggle .knob{background:#fbfaf7!important;background-image:none!important;border-color:var(--edge2)!important}
  html[data-theme="light"] .ly-clip{background-image:linear-gradient(180deg,#5b6cf0,#2f47d0)!important}
  html[data-theme="light"] .co-imp{background:#e8ebfb!important;color:#1d2c8f!important}

  /* Countdown timers: soft cream cells with ink mono digits */
  html[data-theme="light"] .dt-box{background:#f2efe9!important;color:var(--text)!important;border:1px solid var(--edge)!important;box-shadow:none!important}
  html[data-theme="light"] .dt-box b{font-family:var(--font-mono);font-weight:500;letter-spacing:0}
  html[data-theme="light"] .dt-box i{color:var(--muted);opacity:1}
  html[data-theme="light"] .dt-sep{color:var(--faint)}

  /* Featured banners (Netflix, Prime...): dark poster tiles with cream type and a cream pill */
  html[data-theme="light"] .hc-card{background:#141311!important;border:0!important;border-radius:28px!important;box-shadow:0 24px 50px -32px rgba(28,27,24,.55)!important}
  html[data-theme="light"] .hc-overlay{background:linear-gradient(90deg,rgba(20,19,17,.94) 0%,rgba(20,19,17,.72) 42%,rgba(20,19,17,.08) 78%)!important}
  html[data-theme="light"] .hc-image-wrap img{filter:none!important;opacity:1!important}
  html[data-theme="light"] .hc-title{color:#f7f4ee!important;font-family:var(--font-display);font-weight:650;letter-spacing:-.03em}
  html[data-theme="light"] .hc-sub{color:rgba(247,244,238,.72)!important}
  html[data-theme="light"] .hc-eyebrow{color:rgba(247,244,238,.7)!important;font-family:var(--font-mono);font-weight:500;letter-spacing:.12em}
  html[data-theme="light"] .hc-cta{background:#fbfaf7!important;color:#1c1b18!important;box-shadow:none!important;border:0!important}
  html[data-theme="light"] .hc-cta svg{color:#1c1b18}

  /* Product cards: near-white card, art inside a pastel tile, ink price */
  html[data-theme="light"] :is(.card,.hc-card,.drop-card,.bh-card){background:#fbfaf7;border:0;border-radius:28px;box-shadow:none}
  html[data-theme="light"] .card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(28,27,24,.35)}
  html[data-theme="light"] .card .thumb{background:var(--t-sand);border:0;border-radius:22px;margin:10px 10px 0;width:auto;padding:12px}
  html[data-theme="light"] .card .thumb img{border-radius:14px;position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+1) .thumb{background:var(--t-sage)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+2) .thumb{background:var(--t-butter)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+3) .thumb{background:var(--t-sky)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+4) .thumb{background:var(--t-sand)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+5) .thumb{background:var(--t-blush)}
  html[data-theme="light"] :is(.grid,.shelf-row,.drop-grid,.market-grid) > .card:nth-child(6n+6) .thumb{background:var(--t-stone)}
  html[data-theme="light"] .card h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;color:var(--text)!important}
  html[data-theme="light"] :is(.price,.price-val){color:var(--text)!important;font-family:var(--font-body);font-weight:600}
  html[data-theme="light"] .price-box{background:transparent;border:0;padding-inline:0}
  html[data-theme="light"] :is(.price-savings,.pill){color:#9a3412;background:#fbe9d9;border-color:transparent}
  html[data-theme="light"] .badge-pill.badge-discount{background:#fbe9d9;border-color:transparent;color:#9a3412}

  /* Big panels */
  html[data-theme="light"] :is(.feat,.cta-band,.about-panel,.rs-home-card,.drop-box,.deal-stage-in,.tp-widget,.fcard,.pdp-info,.phist,.pp-card){
    background:#fbfaf7!important;border:0!important;border-radius:28px;box-shadow:none!important}
  html[data-theme="light"] .feat .ic{background:var(--t-sage);border:0}
  html[data-theme="light"] .feat:nth-child(2) .ic{background:var(--t-butter)}
  html[data-theme="light"] .feat:nth-child(3) .ic{background:var(--t-sky)}
  html[data-theme="light"] .feat:nth-child(4) .ic{background:var(--t-blush)}
  html[data-theme="light"] .drop-timer .dt-box{background:var(--ink);color:var(--on-ink);border:0}
  html[data-theme="light"] .pdp-frame{background:var(--t-sand);border:0}
  html[data-theme="light"] .pdp-price .amt{color:var(--text)}

  /* Fields */
  html[data-theme="light"] .field{background:#fbfaf7;border-color:var(--edge2);border-radius:14px}
  html[data-theme="light"] .field:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,27,24,.08)}

  /* Card actions: a slim pill row that fits narrow two-column cards. */
  html[data-theme="light"] .card-btns{gap:6px}
  html[data-theme="light"] .card-btns .cbtn-buy{height:44px;min-height:44px;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-theme="light"] .card-btns .cbtn-buy .cbtn-arr{display:none}
  html[data-theme="light"] .card-btns .cbtn-cart{width:44px;height:44px;min-width:44px;min-height:44px}
  @media(max-width:360px){html[data-theme="light"] .card-btns .cbtn-cart{display:none}}
  html[data-theme="light"] :is(.prod-category,.card-cat,.cc-cat){color:var(--muted)!important;font-family:var(--font-mono);font-weight:500;letter-spacing:.06em}
  @media(max-width:350px){header.site .logo>span:not(.mark):not(.logo-lockup){display:none}}

  /* Phone dock: frosted light pill, ink icons, soft butter pill on the active tab, ink cart. */
  @media(max-width:900px){
    html[data-theme="light"] .dock{background:rgba(251,250,247,.92)!important;border:1px solid rgba(28,27,24,.08)!important;
      -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
      box-shadow:0 22px 44px -20px rgba(28,27,24,.45),0 2px 8px rgba(28,27,24,.06)!important;padding:6px!important;gap:4px!important}
    html[data-theme="light"] .dock-item{color:rgba(28,27,24,.62)!important;background:transparent!important;border-radius:999px!important;border:0!important;box-shadow:none!important}
    html[data-theme="light"] .dock-item.active{color:var(--ink)!important;background:var(--t-butter)!important}
    html[data-theme="light"] .dock-item.cart{background:var(--ink)!important;color:var(--on-ink)!important;border:0!important;box-shadow:0 10px 22px -10px rgba(28,27,24,.6)!important}
    html[data-theme="light"] .dock-item.cart.active{background:var(--ink)!important;color:var(--on-ink)!important}
    html[data-theme="light"] .dock-badge{background:var(--blue);color:#fff;border-color:#fbfaf7!important}
    html[data-theme="light"] header.site .navbar{margin:8px 10px 0;height:56px;padding:0 6px 0 8px}
    html[data-theme="light"] :is(.card,.hc-card,.drop-card,.bh-card){border-radius:22px}
    html[data-theme="light"] .card .thumb{border-radius:16px;margin:6px 6px 0;padding:8px}
    html[data-theme="light"] .card .thumb img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:10px}
  }

/* id="app-sheets" */
  /* Phones: checkout and sign-in open like Android app screens. A sticky app bar
     (back + title) on top and the form in a bottom sheet with a grab handle. */
  .app-bar{display:none}
  @media(max-width:640px){
    body:is(.checkout-mode,.login-mode) :is(header.site,footer.site,nav.dock,.ticker,.ccy-promo-bar,.breadcrumb){display:none!important}
    body:is(.checkout-mode,.login-mode){padding-top:0!important;padding-bottom:0!important}
    body:is(.checkout-mode,.login-mode) main{min-height:100dvh}
    body:is(.checkout-mode,.login-mode) main>section,body.login-mode .login-only{margin:0 auto!important;padding:0!important;max-width:none!important;width:100%!important}

    /* App bar */
    body.checkout-mode .co-top,body.login-mode .app-bar{position:sticky;top:0;z-index:30;display:grid!important;grid-template-columns:44px 1fr 44px;align-items:center;
      gap:8px;min-height:60px;margin:0!important;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
      background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}
    body.checkout-mode .co-top b,body.login-mode .app-bar b{text-align:center;font-family:var(--font-display);font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--text)}
    body.checkout-mode .co-top>a:first-child,body.login-mode .ab-back{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
      background:var(--surface);border:1px solid var(--edge);color:var(--text);font-size:0;text-decoration:none}
    body.checkout-mode .co-top>a:first-child::before{content:"";width:20px;height:20px;background:currentColor;
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
              mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
    body.checkout-mode .co-progress{margin:2px 14px 12px!important}

    /* Bottom sheet */
    body.checkout-mode .co-card,body.login-mode .login-card{position:relative;margin:0!important;border:0!important;
      border-radius:28px 28px 0 0!important;min-height:calc(100dvh - 120px);padding:26px 18px calc(28px + env(safe-area-inset-bottom,0px))!important;
      background:var(--surface)!important;box-shadow:0 -18px 44px -24px rgba(0,0,0,.35)!important;animation:sheetUp .34s cubic-bezier(.2,.8,.2,1) both}
    body.login-mode .login-card{min-height:calc(100dvh - 60px)}
    body.checkout-mode .co-card::before,body.login-mode .login-card::before{content:"";position:absolute;top:9px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:999px;background:var(--edge2)}
    body:is(.checkout-mode,.login-mode) :is(.co-card,.login-card) :is(.btn,button[type=submit]){width:100%;min-height:52px;border-radius:16px}
    html[data-theme="light"] body:is(.checkout-mode,.login-mode) :is(.co-card,.login-card) :is(.btn,button[type=submit]){border-radius:999px}
    body.login-mode .login-card h1{font-family:var(--font-display);font-size:30px;margin-top:6px}
    body.login-mode .login-back{display:none}
  }
  @keyframes sheetUp{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
  @media(prefers-reduced-motion:reduce){body:is(.checkout-mode,.login-mode) :is(.co-card,.login-card){animation:none}}

/* id="cta-shine" */
  /* Primary calls to action across the site: vivid gradient, soft glow and a slow light sweep. */
  html[data-theme="light"]{--cta:linear-gradient(135deg,#FF7A3D 0%,#FF4D5E 55%,#F2386B 100%);--cta-glow:0 12px 28px -12px rgba(255,77,94,.75),inset 0 1px 0 rgba(255,255,255,.35);--cta-ink:#fff}
  html[data-theme="dark"]{--cta:linear-gradient(180deg,#F75454 0%,#F41A1A 55%,#CD1616 100%);--cta-glow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.3),0 12px 28px -12px rgba(244,26,26,.75);--cta-ink:#fff}
  html[data-theme] :is(.btn.primary,.btn.shop-cta,.btn:not(.ghost):not(.secondary):not(.sm),.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn,#pdpBuy,#pdpStickyBuy,.cookie-yes,.cart-pay):not(.shop-card .cbtn-buy){
    background:var(--cta)!important;color:var(--cta-ink)!important;box-shadow:var(--cta-glow)!important;border:0!important;text-shadow:none!important;
    position:relative;overflow:hidden;isolation:isolate;font-weight:600}
  html[data-theme] :is(.btn.primary,.btn.shop-cta,.btn:not(.ghost):not(.secondary):not(.sm),.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn,#pdpBuy,#pdpStickyBuy,.cart-pay):not(.shop-card .cbtn-buy) svg{color:currentColor}
  html[data-theme] :is(.btn.primary,.btn.shop-cta,.btn:not(.ghost):not(.secondary):not(.sm),.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn,#pdpBuy,#pdpStickyBuy,.cart-pay):not(.shop-card .cbtn-buy)::after{
    content:"";display:block!important;position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;pointer-events:none;
    background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-18deg);
    animation:ctaShine 3.6s cubic-bezier(.4,0,.2,1) infinite}
  html[data-theme] :is(.btn.primary,.btn.shop-cta,.btn:not(.ghost):not(.secondary):not(.sm),.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn,#pdpBuy,#pdpStickyBuy,.cart-pay):not(.shop-card .cbtn-buy):hover{filter:brightness(1.06) saturate(1.05)!important;transform:translateY(-1px)}
  @keyframes ctaShine{0%,55%{left:-60%}100%{left:130%}}
  @media(prefers-reduced-motion:reduce){html[data-theme] :is(.btn,.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn,#pdpBuy,#pdpStickyBuy,.cart-pay)::after{animation:none!important;display:none!important}}
  /* Countdown seconds pick up the CTA colour so the clock reads as live. */
  html[data-theme="light"] .dt-box:last-child b{color:#F2386B}
  html[data-theme="light"] .dt-box:last-child{background:#fff1ee!important;border-color:rgba(242,56,107,.18)!important}

/* id="logo-lockup" */
  /* OTT24x7 logo drawn in code so it follows the theme: motion lines + play button + wordmark. */
  .logo-lockup{display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap}
  .ll-mark{width:46px;height:36px;flex:none;display:block;max-width:none!important}
  .ll-word{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.035em;color:var(--text)}
  .ll-word em{font-style:normal}
  html[data-theme="light"] .ll-ring{fill:#1c1b18}
  html[data-theme="light"] .ll-play{fill:#fbfaf7}
  html[data-theme="light"] .ll-lines rect{fill:#2f47d0}
  html[data-theme="light"] .ll-word em{color:#2f47d0}
  /* Dark: crisp bright mark (no clipped glow), thin light outline, brighter coral "24", bolder wordmark. */
  html[data-theme="dark"] .ll-ring{fill:#FF3B3B;stroke:rgba(255,255,255,.22);stroke-width:1.4}
  html[data-theme="dark"] .ll-play{fill:#fff}
  html[data-theme="dark"] .ll-lines rect{fill:#FF6B6B;transform:scaleY(1.25);transform-origin:center;transform-box:fill-box}
  html[data-theme="dark"] .ll-word{color:#fff;font-weight:800}
  html[data-theme="dark"] .ll-word em{color:#FF5A5A}
  footer.site .logo-lockup .ll-word{font-size:24px}
  @media(max-width:900px){.ll-mark{width:40px;height:31px}.ll-word{font-size:19px}}
  @media(max-width:350px){.ll-word{display:none}}

/* id="site-skin-dark" */
  /* Dark theme: console look. Near-black blue-grey field with grain and a dot grid,
     hairline panels with tight corners, bevelled keys, mono labels, gold accent. */
  html[data-theme="dark"]{
    --font-display:'Space Grotesk','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-body:'Inter','Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --bg:#090B0F; --bg2:#0C0F14; --canvas:#090B0F; --field-bar:#0C0F14;
    --surface:#11151C; --surface2:#161B24; --card:#11151C; --card2:#161B24; --float:#161B24; --tile:#11151C;
    --text:#ECEFF4; --muted:#B3BAC7; --faint:#848D9D;
    --edge:rgba(255,255,255,.075); --edge2:rgba(255,255,255,.14); --rim:rgba(255,255,255,.075); --well:#0B0E13; --hi:rgba(255,255,255,.05);
    --ink:#ECEFF4; --on-ink:#090B0F; --money:#34D47F; --alert:#F2545B;
    --dot:rgba(255,255,255,.055);
    --r-card:14px; --r-tile:12px; --r-key:9px;
    --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 16px 40px -24px rgba(0,0,0,.8);
    --shadow-pop:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);
    --key:linear-gradient(180deg,#2C3139 0%,#22262D 55%,#1C2026 100%);
    --key-bevel:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.65);
    /* Accent: red. --gold keeps its name so every older rule that reads it turns red in dark mode. */
    --gold:#F43F3F; --accent:#F43F3F; --accent2:#F64343; --neon-cyan:#F43F3F;
    --gold-ink:#FFFFFF; --on-accent:#FFFFFF; --btn-text:#FFFFFF;
    --gold-key:linear-gradient(180deg,#F75454 0%,#F41A1A 55%,#CD1616 100%);
    --gold-bevel:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.6),0 10px 24px -12px rgba(244,26,26,.6);
  }
  html[data-theme="dark"] body{font-family:var(--font-body);font-weight:400}
  html[data-theme="dark"] :is(h1,h2,h3,.logo){font-family:var(--font-display);font-weight:600;letter-spacing:-.035em}
  html[data-theme="dark"] .sec-head :is(h1,h2){font-size:clamp(28px,4vw,52px);line-height:1.02;letter-spacing:-.04em;font-weight:600;color:var(--text)}
  html[data-theme="dark"] :is(.drop-kicker,.eyebrow,.sec-kicker,.hc-eyebrow,.billboard-eyebrow,.phist-kicker){font-family:var(--font-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase}

  /* Field: radial glow, grain, fading dot grid */
  html[data-theme="dark"] .bg-fx{background-color:#090B0F!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 70% at 50% -10%,#1B1F26 0%,#0C0E12 55%,#08090C 100%)!important;
    background-size:128px 128px,cover!important;background-repeat:repeat,no-repeat!important;background-position:0 0,center!important}
  html[data-theme="dark"] .bg-dots{display:block!important}
  html[data-theme="dark"] .bg-horizon{display:block!important;opacity:.55}

  /* Header: dark rail with a bevel line */
  html[data-theme="dark"] header.site{background:color-mix(in srgb,#0C0F14 88%,transparent);border-bottom:0;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.05)}
  html[data-theme="dark"] nav.links{background:transparent;border:0;padding:0}
  html[data-theme="dark"] nav.links a.nl,html[data-theme="dark"] nav.links .nl-trigger{border-radius:var(--r-key);font-size:13.5px;font-weight:500;color:var(--muted)}
  html[data-theme="dark"] nav.links a.nl:hover{color:var(--text);background:rgba(255,255,255,.05)}
  html[data-theme="dark"] nav.links a.nl.active,html[data-theme="dark"] nav.links .nl-trigger.active{background:var(--key);color:var(--text);box-shadow:var(--key-bevel)}
  html[data-theme="dark"] :is(.ccy-btn,.acct-btn,.menu-btn){border-radius:var(--r-key);background:var(--key);border:0;box-shadow:var(--key-bevel)}
  html[data-theme="dark"] .hdr-search input{border-radius:var(--r-key) 0 0 var(--r-key);background:#0B0E13;border-color:var(--edge2);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
  html[data-theme="dark"] .hdr-search button{border-radius:0 var(--r-key) var(--r-key) 0}
  html[data-theme="dark"] .logo .mark{border-radius:9px}
  html[data-theme="dark"] .cart-btn{background:var(--gold-key);color:#FFFFFF;border-radius:var(--r-key);box-shadow:var(--gold-bevel)}

  /* Keys: bevelled buttons with tight corners */
  html[data-theme="dark"] .btn:not(.ghost):not(.secondary),
  html[data-theme="dark"] :is(.cbtn-buy,.btn-cinema-primary,.fomo-go,.hs-btn):not(.shop-card .cbtn-buy){
    background:var(--gold-key)!important;color:#FFFFFF!important;border:0!important;border-radius:var(--r-key)!important;box-shadow:var(--gold-bevel)!important;font-family:var(--font-body);font-weight:600;letter-spacing:0}
  html[data-theme="dark"] :is(.btn.ghost,.btn.secondary,.btn-cinema-secondary,.cbtn-cart){
    background:var(--key)!important;color:var(--text)!important;border:0!important;border-radius:var(--r-key)!important;box-shadow:var(--key-bevel)!important}
  html[data-theme="dark"] .btn:active,html[data-theme="dark"] .cbtn-buy:active{transform:translateY(1px)}
  html[data-theme="dark"] .chip{border-radius:var(--r-key)}
  html[data-theme="dark"] .chip.active{background:var(--key);color:var(--text);box-shadow:var(--key-bevel),inset 0 -2px 0 var(--gold)}

  /* Panels: console cards */
  html[data-theme="dark"] :is(.card,.hc-card,.drop-card,.bh-card,.cyber-card){background:#11151C;border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--shadow-card);background-image:none}
  html[data-theme="dark"] .card:hover{border-color:var(--edge2);transform:translateY(-2px)}
  html[data-theme="dark"] .card .thumb{background:#0B0E13;border-bottom:1px solid var(--edge)}
  html[data-theme="dark"] :is(.feat,.cta-band,.about-panel,.rs-home-card,.drop-box,.deal-stage-in,.tp-widget,.fcard,.pdp-info,.phist,.pp-card,.nl-menu){
    background:#11151C!important;border:1px solid var(--edge)!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow-card)!important;background-image:none!important}
  html[data-theme="dark"] .price-box{background:#0B0E13;border:1px solid var(--edge);border-radius:var(--r-key)}
  html[data-theme="dark"] :is(.price,.price-val){color:var(--money)!important;font-family:var(--font-mono);font-weight:500}
  html[data-theme="dark"] .dt-box{background:#0B0E13!important;color:#ECEFF4!important;border:1px solid var(--edge2)!important;border-radius:8px;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)!important}
  html[data-theme="dark"] .dt-box b{font-family:var(--font-mono);font-weight:500;text-shadow:0 0 12px rgba(244,63,63,.35)}
  html[data-theme="dark"] .dt-box:last-child b{color:#F43F3F}
  html[data-theme="dark"] .dt-box i{color:var(--faint);opacity:1}
  html[data-theme="dark"] .dt-sep{color:#F43F3F}
  html[data-theme="dark"] .field{background:#0B0E13;border-color:var(--edge2);border-radius:var(--r-key);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  html[data-theme="dark"] .hc-card{border-radius:var(--r-card)}
  html[data-theme="dark"] .billboard-container{border-radius:0}

  /* Phone dock: bevelled console bar */
  @media(max-width:900px){
    html[data-theme="dark"] .dock{background:#11151C!important;border:1px solid var(--edge2)!important;border-radius:16px!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 50px -20px rgba(0,0,0,.9)!important}
    html[data-theme="dark"] .dock-item{border-radius:11px!important;color:var(--faint)!important}
    html[data-theme="dark"] .dock-item.active{background:var(--key)!important;color:var(--gold)!important;box-shadow:var(--key-bevel)!important}
    html[data-theme="dark"] .dock-item.cart{background:var(--gold-key)!important;color:#FFFFFF!important;box-shadow:var(--gold-bevel)!important;border-radius:13px!important}
  }

/* id="quick-buy" */
  .qb-ov{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,10,12,.48);
    opacity:0;transition:opacity .22s ease;-webkit-tap-highlight-color:transparent}
  .qb-ov[hidden]{display:none}
  .qb-ov.on{opacity:1}
  .qb-sheet{position:relative;width:100%;max-width:520px;max-height:92dvh;overflow:auto;padding:26px 18px calc(18px + env(safe-area-inset-bottom,0px));
    border-radius:28px 28px 0 0;background:var(--surface);color:var(--text);box-shadow:0 -24px 60px -20px rgba(0,0,0,.45);
    transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.9,.25,1.06)}
  .qb-ov.on .qb-sheet{transform:none}
  .qb-handle{position:absolute;top:9px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:999px;background:var(--edge2)}
  .qb-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:transparent;color:var(--text);font-size:20px;line-height:1;cursor:pointer}
  .qb-top{display:flex;gap:14px;align-items:center;margin:6px 0 14px;padding-right:40px}
  .qb-art{flex:none;width:112px;height:112px;border-radius:22px;padding:8px;background:var(--surface2)}
  html[data-theme="light"] .qb-art{background:#dbe4d3}
  .qb-art img{width:100%;height:100%;object-fit:cover;border-radius:15px;display:block}
  .qb-tx{min-width:0}
  .qb-cat{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .qb-tx h3{margin:0 0 8px;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
  .qb-price{font-size:24px;font-weight:700;letter-spacing:-.02em}
  .qb-price s,.qb-price del{font-size:14px;font-weight:500;color:var(--muted);margin-left:6px}
  .qb-trust{list-style:none;margin:0 0 16px;padding:12px 14px;display:grid;gap:9px;border-radius:18px;background:var(--surface2)}
  .qb-trust li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text)}
  .qb-trust svg{flex:none;color:var(--muted)}
  .qb-go{display:flex!important;width:100%;min-height:54px;justify-content:center;align-items:center;font-size:16px;text-decoration:none}
  .qb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .qb-row .btn{min-height:48px;width:100%;justify-content:center;text-decoration:none}
  @media(min-width:641px){.qb-ov{align-items:center;padding:20px}.qb-sheet{border-radius:28px;transform:translateY(24px) scale(.97);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.25,1.06),opacity .25s ease}.qb-ov.on .qb-sheet{opacity:1}}
  /* Press feedback on every button and card */
  :is(.btn,.cbtn-buy,.cbtn-cart,.chip,.dock-item,.card):active{transform:scale(.97)!important;transition:transform .08s ease!important}
  /* Toast + cart badge pop */
  .qb-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:3100;transform:translate(-50%,16px);opacity:0;
    display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--ink,#1c1b18);color:var(--on-ink,#fff);font-size:14px;font-weight:600;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.9,.25,1.2),opacity .2s ease;pointer-events:none;white-space:nowrap}
  .qb-toast.on{transform:translate(-50%,0);opacity:1}
  .qb-toast[hidden]{display:none}
  @media(min-width:901px){.qb-toast{bottom:28px}}
  .badge-pop{animation:badgePop .5s cubic-bezier(.2,.9,.25,1.4)}
  @keyframes badgePop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
  /* Cards rise in as they scroll into view */
  .rise{opacity:0;transform:translateY(14px)}
  .rise.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  @media(prefers-reduced-motion:reduce){.qb-ov,.qb-sheet,.qb-toast,.rise,.rise.in{transition:none!important}.badge-pop{animation:none}.rise{opacity:1;transform:none}}

/* id="ux-fixes" */
  /* Touch size, keyboard focus, and motion. The phone search strip stays 36px. */
  .theme-toggle{height:44px;min-height:44px}
  .theme-toggle .knob{top:50%;margin-top:-11px}
  @media(max-width:900px){
    .theme-toggle{width:56px;height:44px;min-height:44px}
  }
  .ccy-btn,.acct-btn,.nl-trigger,.cat-toggle,.hs-btn,.hc-cta,.mth-cart-btn,.qb-x,.side .close{min-height:44px}
  .acct-btn,.qb-x,.side .close{width:44px;height:44px;min-width:44px}
  .qb-x,.side .close{display:grid;place-items:center;padding:0}
  .qb-x{top:8px;right:8px}
  .qb-top{padding-right:52px}
  .nl-menu a{min-height:44px}
  .cbtn-buy{height:44px;min-height:44px}
  .cbtn-cart{width:44px;height:44px;min-width:44px;min-height:44px}
  html[data-theme="light"] .card-btns .cbtn-buy{height:44px;min-height:44px}
  html[data-theme="light"] .card-btns .cbtn-cart{width:44px;height:44px;min-width:44px;min-height:44px}
  .hero-search input{font-size:16px}
  .theme-toggle:focus-visible,
  header.site :where(a,button):focus-visible,
  nav.dock a:focus-visible,
  aside.side :where(a,button,summary):focus-visible,
  .qb-x:focus-visible,.hc-cta:focus-visible,.cat-toggle:focus-visible,
  .cbtn-buy:focus-visible,.cbtn-cart:focus-visible,.hs-btn:focus-visible{
    outline:2px solid var(--gold,#FBBF24);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){
    #siteBoot,#siteBoot *{animation:none!important}
    .theme-toggle .knob,.hc-cta,.hs-btn,.cbtn-buy,.cbtn-cart,.mth-cart-btn{transition:none!important}
    .hc-card:hover .hc-cta,.hs-btn:hover,.cbtn-buy:hover,.card:hover{transform:none!important}
  }

/* id="site-motion" */
  /* App-style motion for the website, same feel as the Mini App.
     Page changes: browser View Transitions (fade + slide), and the product art grows into the product page.
     First load: page sections and the first cards rise in. Buttons: ripple. Add to cart: art flies to the cart.
     Everything sits behind prefers-reduced-motion: no-preference. */
  @media (prefers-reduced-motion: no-preference){
    @view-transition{navigation:auto}
    ::view-transition-old(root){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
    ::view-transition-new(root){animation:vtIn .42s cubic-bezier(.2,.8,.2,1) both}
    header.site{view-transition-name:site-header}
    nav.dock{view-transition-name:site-dock}
    ::view-transition-old(site-header),::view-transition-new(site-header),
    ::view-transition-old(site-dock),::view-transition-new(site-dock){animation:none}
    ::view-transition-group(pd-art){animation-duration:.46s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
    ::view-transition-old(pd-art),::view-transition-new(pd-art){height:100%;object-fit:cover;border-radius:22px;overflow:hidden}
    @keyframes vtOut{to{opacity:0;transform:translateY(-6px) scale(.992)}}
    @keyframes vtIn{from{opacity:0;transform:translateY(16px)}}

    /* First paint after a refresh (no view transition): sections rise in one after another. */
    html.pg-enter #main>*{animation:pgRise .6s cubic-bezier(.2,.8,.2,1) both}
    html.pg-enter #main>*:nth-child(2){animation-delay:.06s}
    html.pg-enter #main>*:nth-child(3){animation-delay:.12s}
    html.pg-enter #main>*:nth-child(4){animation-delay:.18s}
    html.pg-enter #main>*:nth-child(n+5){animation-delay:.24s}
    @keyframes pgRise{from{opacity:0;transform:translateY(18px)}}
    /* Cards already on screen pop in with a short stagger (cards below use the existing .rise on scroll). */
    .card-pop{animation:cardPop .55s cubic-bezier(.2,.85,.25,1.08) both;animation-delay:calc(.12s + var(--ci,0) * 45ms)}
    @keyframes cardPop{from{opacity:0;transform:translateY(16px) scale(.96)}}

    /* Hover lift on desktop */
    @media (hover:hover){
      :is(a.card,a.cyber-card){transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
      :is(a.card,a.cyber-card):hover{transform:translateY(-4px)}
      :is(a.card,a.cyber-card):hover :is(img.art-img,.thumb img){transform:scale(1.04)}
      :is(a.card,a.cyber-card) :is(img.art-img,.thumb img){transition:transform .45s cubic-bezier(.2,.8,.2,1)}
    }
    /* Tapped card: quick squeeze while the next page loads */
    :is(a.card,a.cyber-card).is-opening{transform:scale(.97);transition:transform .12s ease}

    /* Category pills: active pill glides in */
    .market-pill.active{animation:pillOn .4s cubic-bezier(.34,1.4,.64,1) both}
    @keyframes pillOn{from{transform:scale(.9)}}

    /* Ripple on buttons and pills */
    .rpl-host{position:relative;overflow:hidden;isolation:isolate}
    .rpl{position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:currentColor;opacity:.22;transform:scale(0);animation:rpl .55s ease-out forwards}
    @keyframes rpl{to{transform:scale(1);opacity:0}}

    /* Buy now: press glow */
    .buy-press{animation:buyPress .45s cubic-bezier(.2,.85,.25,1.2)}
    @keyframes buyPress{40%{transform:scale(.95);filter:brightness(1.12)}100%{transform:none}}

    /* Add to cart: flying art + cart icon bounce */
    .fly-art{position:fixed;z-index:100000;pointer-events:none;border-radius:16px;object-fit:cover;box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
    .cart-hit{animation:cartHit .5s cubic-bezier(.34,1.6,.64,1)}
    @keyframes cartHit{35%{transform:scale(1.22) rotate(-8deg)}70%{transform:scale(.94)}}
  }

/* id="shop-card-template" */
  /* Product cards: white tile, badges on the art, price + strike, cart then Buy Now. */
  @media (min-width:1180px){
    .grid:has(> a.shop-card){grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  }
  @media (min-width:901px) and (max-width:1179px){
    .grid:has(> a.shop-card){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  }
  html[data-theme] a.shop-card{
    background:#fff !important;color:#1a1a1a;border:0 !important;border-radius:22px !important;
    box-shadow:0 10px 28px -16px rgba(20,16,12,.28),0 1px 2px rgba(20,16,12,.06) !important;
    padding:10px 10px 12px !important;overflow:hidden;text-decoration:none;
    transform:none;
  }
  html[data-theme] a.shop-card:hover{
    border:0 !important;transform:translateY(-3px);
    box-shadow:0 18px 36px -18px rgba(20,16,12,.34),0 1px 2px rgba(20,16,12,.06) !important;
  }
  html[data-theme] a.shop-card.is-bestseller,
  html[data-theme] a.shop-card.is-bestseller:hover{border:0 !important}
  html[data-theme] a.shop-card :is(.thumb,.card-artwork){
    position:relative;width:100%;aspect-ratio:1/1;border:0 !important;border-radius:16px !important;
    overflow:hidden;background:#f4f5f7 !important;display:block;
  }
  html[data-theme] a.shop-card :is(.thumb,.card-artwork) img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;
  }
  html[data-theme] a.shop-card .thumb-flags{
    position:absolute;z-index:3;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:5px;
    pointer-events:none;min-width:0;
  }
  html[data-theme] a.shop-card .flag-off,
  html[data-theme] a.shop-card .flag-trend{
    display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:999px;
    font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1;
    text-transform:uppercase;white-space:nowrap;
  }
  html[data-theme] a.shop-card .flag-off{background:#F6D3C4;color:#3F2A24}
  html[data-theme] a.shop-card .flag-trend{background:#E11D48;color:#fff}
  html[data-theme] a.shop-card .flag-trend svg{width:11px;height:11px;display:block}
  html[data-theme] a.shop-card .flag-bolt{
    margin-left:auto;width:26px;height:26px;border-radius:50%;background:#1a1a1a;display:grid;place-items:center;flex:none;
    box-shadow:0 2px 6px rgba(0,0,0,.28);
  }
  html[data-theme] a.shop-card .flag-bolt svg{width:13px;height:13px;display:block}
  html[data-theme] a.shop-card :is(.card-body,.card-info){
    display:flex;flex-direction:column;gap:8px;padding:10px 4px 2px !important;background:transparent !important;min-width:0;
  }
  html[data-theme] a.shop-card .prod-category{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  html[data-theme] a.shop-card :is(h3,.prod-name){
    margin:0;color:#1a1a1a !important;font-family:var(--font-display);font-size:15px !important;font-weight:600 !important;
    letter-spacing:-.02em;line-height:1.25;min-height:2.5em;max-height:2.5em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  html[data-theme] a.shop-card .price-line{
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;background:none;border:0;padding:0;
  }
  html[data-theme] a.shop-card .price-val{
    color:#141414 !important;font-family:var(--font-display) !important;font-size:20px !important;font-weight:800 !important;
    letter-spacing:-.03em;line-height:1;background:none !important;
  }
  html[data-theme] a.shop-card .price-strike{
    color:#6b7280 !important;font-size:13px;font-weight:600;text-decoration:line-through;background:none !important;border:0 !important;padding:0;
  }
  html[data-theme] a.shop-card .price-usd,
  html[data-theme] a.shop-card .price-term,
  html[data-theme] a.shop-card .price-savings{display:none !important}
  html[data-theme] a.shop-card .drop-timer{margin:0;transform:scale(.9);transform-origin:left center}
  html[data-theme] a.shop-card .card-btns{
    display:flex;align-items:center;gap:8px;margin-top:2px;width:100%;
  }
  html[data-theme] a.shop-card :is(.cbtn-cart,.btn-cart-quick){
    width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;flex:none;
    border-radius:50% !important;background:#fff !important;color:#1a1a1a !important;
    border:1.5px solid #e4e4e7 !important;box-shadow:none !important;display:grid !important;place-items:center;padding:0;
  }
  html[data-theme] a.shop-card :is(.cbtn-cart,.btn-cart-quick) svg{width:18px !important;height:18px !important;max-width:18px !important}
  html[data-theme] a.shop-card :is(.cbtn-cart,.btn-cart-quick):hover{border-color:#1a1a1a !important;color:#1a1a1a !important;transform:none}
  html[data-theme] a.shop-card :is(.cbtn-cart,.btn-cart-quick).added{
    background:#ecfdf3 !important;border-color:#16a34a !important;color:#15803d !important;box-shadow:none !important;
  }
  /* Beat the sitewide CTA gradient. That rule's :is() counts every :not() on .btn. */
  html[data-theme] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock,
  html[data-theme] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock{
    flex:1;min-width:0;height:42px !important;min-height:42px !important;padding:0 12px !important;border-radius:999px !important;
    background:#161616 !important;background-image:none !important;color:#fff !important;box-shadow:none !important;border:0 !important;text-shadow:none !important;
    font-family:var(--font-body);font-size:14px !important;font-weight:700 !important;letter-spacing:0;gap:6px;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;filter:none !important;
  }
  html[data-theme] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock::before,
  html[data-theme] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock::before,
  html[data-theme] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock::after,
  html[data-theme] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock::after{
    display:none !important;animation:none !important;content:none !important;
  }
  html[data-theme] a.shop-card :is(.cbtn-buy,.btn-unlock) .cbtn-arr{display:block !important;width:14px;height:14px;flex:none;color:#fff}
  html[data-theme] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock:hover,
  html[data-theme] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock:hover{
    background:#000 !important;background-image:none !important;filter:none !important;transform:none;color:#fff !important;
  }
  html[data-theme] a.shop-card :is(.cbtn-buy,.cbtn-cart):focus-visible{outline:2px solid #161616;outline-offset:2px}
  /* Dark theme: raised graphite card with a hairline edge, light text, inverse Buy button. */
  html[data-theme="dark"] a.shop-card{
    background:#17191F !important;color:#F2F3F5;border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 14px 32px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04) !important;
  }
  html[data-theme="dark"] a.shop-card:hover{
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 22px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
  html[data-theme="dark"] a.shop-card.is-bestseller,
  html[data-theme="dark"] a.shop-card.is-bestseller:hover{border:1px solid rgba(255,255,255,.08) !important}
  html[data-theme="dark"] a.shop-card :is(.thumb,.card-artwork){background:#20232B !important}
  html[data-theme="dark"] a.shop-card :is(h3,.prod-name){color:#F2F3F5 !important}
  html[data-theme="dark"] a.shop-card .price-val{color:#FFFFFF !important}
  html[data-theme="dark"] a.shop-card .price-strike{color:#8A909C !important}
  html[data-theme="dark"] a.shop-card :is(.cbtn-cart,.btn-cart-quick){
    background:transparent !important;color:#E9EAEE !important;border:1.5px solid rgba(255,255,255,.18) !important;
  }
  html[data-theme="dark"] a.shop-card :is(.cbtn-cart,.btn-cart-quick):hover{border-color:#FFFFFF !important;color:#FFFFFF !important}
  html[data-theme="dark"] a.shop-card :is(.cbtn-cart,.btn-cart-quick).added{
    background:rgba(22,163,74,.16) !important;border-color:#22C55E !important;color:#4ADE80 !important;
  }
  html[data-theme="dark"] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock,
  html[data-theme="dark"] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock{
    background:#F4F4F5 !important;color:#111214 !important;
  }
  html[data-theme="dark"] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock:hover,
  html[data-theme="dark"] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock:hover{
    background:#FFFFFF !important;color:#000000 !important;
  }
  html[data-theme="dark"] a.shop-card :is(.cbtn-buy,.btn-unlock) .cbtn-arr{color:#111214}
  html[data-theme="dark"] a.shop-card :is(.cbtn-buy,.cbtn-cart):focus-visible{outline-color:#F4F4F5}
  @media (max-width:640px){
    html[data-theme] a.shop-card{border-radius:18px !important;padding:8px 8px 10px !important}
    html[data-theme] a.shop-card :is(.thumb,.card-artwork){border-radius:14px !important}
    html[data-theme] a.shop-card .thumb-flags{top:6px;left:6px;right:6px;gap:4px}
    html[data-theme] a.shop-card .flag-off,
    html[data-theme] a.shop-card .flag-trend{height:18px;padding:0 6px;font-size:8.5px}
    html[data-theme] a.shop-card .flag-bolt{width:20px;height:20px}
    html[data-theme] a.shop-card .flag-bolt svg{width:11px;height:11px}
    html[data-theme] a.shop-card :is(.card-body,.card-info){padding:8px 2px 0 !important;gap:6px}
    html[data-theme] a.shop-card :is(h3,.prod-name){font-size:13px !important;min-height:2.5em;max-height:2.5em}
    html[data-theme] a.shop-card .price-val{font-size:16px !important}
    html[data-theme] a.shop-card .price-strike{font-size:11px}
    html[data-theme] a.shop-card :is(.cbtn-cart,.btn-cart-quick){width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important}
    html[data-theme] a.shop-card.card :is(button,span).cbtn-buy.btn-unlock,
    html[data-theme] a.shop-card.cyber-card :is(button,span).cbtn-buy.btn-unlock{height:36px !important;min-height:36px !important;font-size:12px !important;padding:0 8px !important}
    html[data-theme] a.shop-card :is(.cbtn-buy,.btn-unlock) .cbtn-arr{width:12px;height:12px}
  }
  @media (max-width:430px){
    /* Two pills and the bolt overflow a ~150px phone tile; the bolt is decoration. */
    html[data-theme] a.shop-card .flag-bolt{display:none}
    html[data-theme] a.shop-card .flag-off,
    html[data-theme] a.shop-card .flag-trend{padding:0 5px;letter-spacing:.01em}
  }
  /* Hover: card lifts, the artwork zooms 10% and tilts -3deg (scale >= 1.06 keeps the
     tilted corners covered inside the rounded thumb). Pointer devices only. */
  @media (hover:hover) and (pointer:fine){
    html[data-theme] a.shop-card{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
    html[data-theme] a.shop-card:hover{
      transform:translateY(-4px);
      box-shadow:0 26px 44px -20px rgba(20,16,12,.38),0 2px 4px rgba(20,16,12,.06) !important;
    }
    html[data-theme="dark"] a.shop-card:hover{box-shadow:0 28px 48px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06) !important}
    html[data-theme] a.shop-card :is(.thumb,.card-artwork) :is(img,.thumb-fallback){
      transition:transform .5s cubic-bezier(.4,0,.2,1),filter .5s cubic-bezier(.4,0,.2,1);
      will-change:transform;backface-visibility:hidden;
    }
    html[data-theme] a.shop-card:hover :is(.thumb,.card-artwork) :is(img,.thumb-fallback){
      transform:scale(1.1) rotate(-3deg);filter:brightness(1.04);
    }
  }
  /* Windows with "Animation effects" off reports reduce-motion, and the site-wide rule
     then cuts every transition to 0.01ms. This hover is small and only follows the
     user's own mouse, so it keeps its easing there too. */
  @media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
    html[data-theme] a.shop-card{transition-duration:.3s !important}
    html[data-theme] a.shop-card:hover{transform:translateY(-4px) !important}
    html[data-theme] a.shop-card :is(.thumb,.card-artwork) :is(img,.thumb-fallback){transition-duration:.5s !important}
  }