*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --blue: #1962f7;
      --blue-l: #2b76ff;
      --blue-xl: #9cbcfb;
      --blue-dim: #1050d0;
      --blue-glow: rgba(25,98,247, .35);
      --blue-glow2: rgba(25,98,247, .15);
      --bg: #04070e;
      --bg2: #070b17;
      --bg3: #0a0e1f;
      --card: #070b17;
      --card-solid: #060b18;
      --border: rgba(25,98,247, .2);
      --border2: rgba(25,98,247, .2);
      --border3: rgba(25,98,247, .4);
      --text: #dde8ff;
      --text2: #7a90c2;
      --text3: #3a4d7a;
      --r: 14px;
      --transition: .22s cubic-bezier(.4, 0, .2, 1);
      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    /* -- FOOTER -- */
    footer{border-top:1px solid var(--border);padding:clamp(40px,6vw,80px) clamp(16px,4vw,60px) 30px;position:relative;z-index:10;background:var(--bg)}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1100px;margin:0 auto 48px}
    .footer-brand .logo{font-size:1.4rem;font-weight:900;letter-spacing:2px;color:var(--blue);display:block;margin-bottom:12px;text-shadow:0 0 28px rgba(25,98,247,.55)}
    .footer-brand p{color:var(--text2);font-size:.85rem;line-height:1.7;max-width:280px}
    .footer-col h4{font-size:.82rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
    .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
    .footer-col ul a{color:var(--text2);text-decoration:none;font-size:.85rem;transition:color .2s}
    .footer-col ul a:hover{color:var(--blue-xl)}
    .footer-socials{display:flex;gap:10px;margin-top:16px}
    .social-btn{width:38px;height:38px;border-radius:9px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);text-decoration:none;transition:all .2s;font-size:.9rem}
    .social-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 15px rgba(25,98,247,.4)}
    .footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1100px;margin:0 auto}
    .footer-bottom p{color:var(--text3);font-size:.8rem}
    @media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:24px}.footer-bottom{flex-direction:column;align-items:flex-start}}

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Jost', sans-serif;
      overflow-x: hidden;
      min-height: 100vh;
      max-width: 100%
    }

    /* -- BACKGROUND -- */
    #bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: #04060e;
      transition: background .05s
    }

    #rainCanvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
      opacity: .55
    }

    /* -- NAV -- */
    .nav-wrap {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 300;
      width: 95%;
      max-width: 1140px;
      background: rgba(17, 12, 27, .1);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, .04);
      box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
      overflow: hidden
    }

    nav {
      padding: 0 clamp(20px, 4vw, 32px);
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    body {
      padding-top: 130px
    }

    .nav-logo {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0
    }

    .nav-logo-img {
      height: 36px;
      width: auto;
      object-fit: contain
    }

    .nav-logo-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-l));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, .2), 0 0 20px var(--blue-glow2);
    }

    .nav-logo-text {
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: .3px;
      color: #fff;
      font-family: 'Jost', sans-serif
    }

    .nav-logo-linex {
      color: #fff;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
    }

    .nav-logo-stocks {
      color: var(--blue);
      text-shadow: 0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5);
      animation: stocksGlow 2.8s ease-in-out infinite;
    }

    @keyframes stocksGlow {

      0%,
      100% {
        text-shadow: 0 0 28px rgba(25,98,247, .55)
      }

      50% {
        text-shadow: 0 0 48px rgba(25,98,247, .85), 0 0 18px rgba(25,98,247, .2)
      }
    }

    .nav-links-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      list-style: none
    }

    .nav-links-center a {
      color: rgba(255, 255, 255, .55);
      text-decoration: none;
      font-size: .9rem;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 10px;
      transition: all .2s;
      white-space: nowrap
    }

    .nav-links-center a:hover {
      color: #fff;
      background: rgba(25,98,247, .1)
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .nav-btn-filled {
      background: linear-gradient(135deg, var(--blue), var(--blue-dim));
      color: #fff;
      padding: 9px 20px;
      border-radius: 12px;
      font-size: .88rem;
      font-weight: 700;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: all .2s;
      white-space: nowrap;
      box-shadow: 0 4px 16px var(--blue-glow)
    }

    .nav-btn-filled:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 24px var(--blue-glow)
    }

    .nav-btn-telegram {
      background: rgba(6, 182, 212, .12);
      color: var(--teal);
      padding: 9px 18px;
      border-radius: 12px;
      font-size: .88rem;
      font-weight: 700;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: all .2s;
      white-space: nowrap;
      border: 1px solid rgba(6, 182, 212, .22)
    }

    .nav-btn-telegram:hover {
      background: rgba(6, 182, 212, .2);
      transform: translateY(-1px)
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all .3s
    }

    /* ticker */
    .ticker-wrap {
      position: relative;
      overflow: hidden;
      background: rgba(25,98,247, .06);
      border-right: 1px solid rgba(25,98,247,.2);
      height: 32px;
      display: flex;
      align-items: center
    }

    .ticker-scan {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(123, 150, 255, .7), transparent);
      animation: tscan 3s linear infinite;
      pointer-events: none;
      z-index: 3
    }

    @keyframes tscan {
      0% {
        left: -2px;
        opacity: 0
      }

      5% {
        opacity: 1
      }

      95% {
        opacity: 1
      }

      100% {
        left: 100%;
        opacity: 0
      }
    }

    .ticker-inner {
      flex: 1;
      height: 100%;
      overflow: hidden;
      position: relative
    }

    .ticker-msg {
      position: absolute;
      inset: 0;
      width: 100%;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      pointer-events: none;
      white-space: nowrap
    }

    /* mobile nav */
    .mobile-menu-backdrop {
      display: none; position: fixed; inset: 0; z-index: 398;
      background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px)
    }
    .mobile-menu-backdrop.open { display: block }
    .mobile-menu {
      display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 399;
      background: #080d1c; border-radius: 32px 32px 0 0;
      border: 1px solid rgba(25, 98, 247, .2); border-bottom: none;
      transform: translateY(100%); transition: transform .38s cubic-bezier(.22, 1, .36, 1);
      padding-bottom: env(safe-area-inset-bottom, 16px);
      max-height: 82vh; overflow-y: auto;
      box-shadow: 0 -12px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(25,98,247,.08) inset;
    }
    .mobile-menu.open { transform: translateY(0) }
    .mobile-menu-handle { width: 40px; height: 4px; background: rgba(255, 255, 255, .15); border-radius: 4px; margin: 14px auto 0 }
    .mobile-menu-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px }
    .mobile-menu-logo { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 900; color: #fff }
    .mobile-menu-logo img { height: 26px; width: auto }
    .mobile-menu-close {
      width: 32px; height: 32px; border-radius: 9px;
      background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .5); display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: .8rem; transition: all .2s;
    }
    .mobile-menu-close:hover { background: rgba(239, 68, 68, .15); color: #f87171; border-color: rgba(239, 68, 68, .3) }
    .mobile-menu-links { padding: 6px 16px 16px }
    .mobile-menu-grid { display: flex; flex-direction: column; gap: 4px }
    .mobile-menu-grid a {
      color: rgba(255, 255, 255, .75); text-decoration: none;
      font-size: 1rem; font-weight: 600;
      padding: 14px 16px; border-radius: 14px;
      background: transparent; border: 1px solid transparent;
      transition: all .18s ease;
      display: flex; align-items: center; gap: 14px;
    }
    .mobile-menu-grid a i {
      width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
      background: rgba(25, 98, 247, .12); border: 1px solid rgba(25, 98, 247, .22);
      display: flex; align-items: center; justify-content: center;
      font-size: .88rem; color: var(--blue-l); transition: all .18s ease;
    }
    .mm-chev { margin-left: auto; color: rgba(255, 255, 255, .2); font-size: .7rem }
    .mm-divider { height: 1px; background: rgba(255, 255, 255, .05); margin: 4px 0 }
    .mobile-menu-grid a:hover { color: #fff; background: rgba(25, 98, 247, .06) }
    .mobile-menu-grid a:hover i { background: rgba(25, 98, 247, .25); color: #fff }
    .mobile-menu-footer { padding: 8px 16px 24px; display: flex; gap: 10px }
    .mm-discord { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(135deg, #5865F2, #4752C4); color: #fff; border-radius: 14px; text-decoration: none; font-weight: 800; font-size: .88rem; box-shadow: 0 10px 25px -4px rgba(88, 101, 242, .4) }
    .mm-telegram { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(135deg, #24A1DE, #1C82B6); color: #fff; border-radius: 14px; text-decoration: none; font-weight: 800; font-size: .88rem; box-shadow: 0 10px 25px -4px rgba(36, 161, 222, .4) }

    /* -- HERO BANNER -- */
    .product-hero {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: clamp(32px, 5vh, 56px) clamp(16px, 4vw, 40px) 0
    }

    .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .8rem;
      color: var(--text2);
      margin-bottom: 28px
    }

    .hero-breadcrumb a {
      color: var(--text2);
      text-decoration: none;
      transition: color .2s
    }

    .hero-breadcrumb a:hover {
      color: var(--blue-l)
    }

    .hero-breadcrumb .sep {
      color: var(--text3)
    }

    /* -- MAIN LAYOUT -- */
    .product-layout {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 clamp(16px, 4vw, 40px) 80px;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 40px;
      align-items: start
    }

    .pp-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.3;
      letter-spacing: .2px;
    }

    /* -- LEFT COLUMN -- */
    .product-media {
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    /* Image card */
    .media-image-card {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: var(--bg3);
      border: 1px solid var(--border2);
      box-shadow: 0 0 40px rgba(25,98,247, .08)
    }

    .product-img-wrap {
      aspect-ratio: 16/9;
      position: relative
    }

    .product-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease
    }

    .product-img-wrap:hover img {
      transform: scale(1.03)
    }

    .img-placeholder {
      width: 100%;
      aspect-ratio: 16/9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: linear-gradient(135deg, #0d1232, #0a1840);
      position: relative;
      overflow: hidden
    }

    .img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(25,98,247, .18), transparent 70%)
    }

    .img-placeholder .ph-icon {
      font-size: 3.5rem;
      background: linear-gradient(135deg, var(--blue-l), var(--blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      z-index: 1
    }

    .img-placeholder .ph-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .7);
      position: relative;
      z-index: 1
    }

    .media-badge-row {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      gap: 8px;
      z-index: 2
    }

    .media-badge {
      font-size: .72rem;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      letter-spacing: .4px;
      backdrop-filter: blur(8px)
    }

    .badge-cat {
      background: rgba(25,98,247, .25);
      color: var(--blue-xl);
      border: 1px solid rgba(25,98,247, .3)
    }

    .badge-discount {
      background: rgba(34, 197, 94, .2);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .3)
    }

    /* Image shimmer overlay */
    .img-shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .05) 50%, transparent 60%);
      animation: shimmer 3s infinite;
      pointer-events: none
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%)
      }

      100% {
        transform: translateX(100%)
      }
    }

    /* Video card */
    .media-video-card {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg3);
      aspect-ratio: 16/9
    }

    .media-video-card iframe {
      width: 100%;
      height: 100%;
      display: block
    }

    /* Info card */
    .info-card {
      background: var(--card);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border2);
      border-radius: 20px;
      padding: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      background-color: var(--border)
    }

    .info-cell {
      background: var(--card);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .info-cell:first-child {
      border-radius: 19px 0 0 19px
    }

    .info-cell:last-child {
      border-radius: 0 19px 19px 0
    }

    .info-cell-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      margin-bottom: 4px
    }

    .info-cell-icon.blue {
      background: rgba(25,98,247, .15);
      color: var(--blue-l)
    }

    .info-cell-icon.green {
      background: rgba(34, 197, 94, .12);
      color: #4ade80
    }

    .info-cell-icon.blue {
      background: rgba(25,98,247, .12);
      color: var(--blue-l)
    }

    .info-cell-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--text2)
    }

    .info-cell-value {
      font-size: .9rem;
      font-weight: 700;
      color: var(--text)
    }

    /* Description card */
    .desc-card {
      background: var(--card);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden
    }

    .desc-card-header {
      padding: 18px 24px 0;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .desc-card-header h4 {
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--blue-l)
    }

    .desc-card-header .line {
      flex: 1;
      height: 1px;
      background: var(--border)
    }

    .desc-card-body {
      padding: 16px 24px 24px
    }

    .product-desc {
      font-size: .88rem;
      color: #fff;
      line-height: 1.25 !important;
      font-weight: 400;
      white-space: normal !important;
    }
    .product-desc p {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.25 !important;
    }
    .product-desc .ce-p-row {
       margin: 0 !important;
       padding-left: 36px !important;
       line-height: 1.25 !important;
    }
    /* Hide empty paragraphs and redundant whitespace injected by markdown */
    .product-desc p:empty {
        display: none !important;
    }
    .product-desc *:last-child {
      margin-bottom: 0 !important;
    }
    .product-desc {
        line-height: 1.42 !important;
    }
    @media (max-width: 768px) {
        .product-desc p { margin-bottom: 4px !important; }
        .product-desc .ce-p-row, .product-desc li { margin-bottom: 3px !important; }
    }

    .product-desc ul,
    .product-desc ol {
      padding: 0 !important;
      margin-bottom: 2px !important;
      margin-top: -10px !important; /* Pull sub-lists extremely tight to feature rows */
      list-style: none;
    }

    .product-desc li {
      margin: 0 !important;
      padding: 0 0 0 36px !important;
      position: relative;
      display: flex;
      align-items: flex-start;
      min-height: 1.15em;
      line-height: 1.25 !important;
    }

    .product-desc .ce-p-row {
        margin: 0 !important;
        position: relative;
        padding-left: 36px !important;
        display: flex;
        align-items: flex-start;
        min-height: 1.15em;
        line-height: 1.25 !important;
    }

    /* Unified serial dots - Refined Size and Position */
    .product-desc li::before,
    .product-desc .ce-p-row::before {
        content: "•" !important;
        position: absolute;
        left: 6px !important;
        top: -2px;
        font-size: 1.15rem !important;
        color: #1962f7 !important;
        text-shadow: 0 0 10px rgba(25,98,247,0.6);
        opacity: 0.9 !important;
        z-index: 5;
        display: block !important;
    }

    /* Icon positioning refined */
    .product-desc li .ce-icon,
    .product-desc .ce-p-row .ce-icon {
        position: absolute !important;
        left: 18px !important;
        top: 5px !important;
        font-size: 0.95rem !important;
    }

    .product-desc strong {
      color: var(--text);
      font-weight: 700;
      text-shadow: 0 0 10px rgba(255,255,255,0.1);
    }


    /* Trust badges */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .trust-card {
      background: var(--card);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      transition: border-color .2s, transform .2s
    }

    .trust-card:hover {
      border-color: var(--border2);
      transform: translateY(-2px)
    }

    .trust-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem
    }

    .trust-icon.blue {
      background: rgba(25,98,247, .15);
      color: var(--blue-l)
    }

    .trust-icon.teal {
      background: rgba(6, 182, 212, .12);
      color: var(--teal)
    }

    .trust-icon.green {
      background: rgba(34, 197, 94, .12);
      color: #4ade80
    }

    .trust-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3
    }

    /* ── RIGHT COLUMN — BUY PANEL ── */
    .product-buy-wrap {
      position: sticky;
      top: 92px
    }

    .buy-panel {
      background: var(--card);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border2);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 0 60px rgba(25,98,247, .08), 0 20px 60px rgba(0, 0, 0, .4)
    }

    /* Buy panel header */
    .buy-header {
      padding: 24px 24px 0;
      position: relative
    }

    .buy-header::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--blue), var(--blue-l), transparent)
    }

    .product-cat {
      font-size: .72rem;
      font-weight: 700;
      color: var(--blue-l);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .product-cat::before {
      content: '';
      width: 16px;
      height: 2px;
      background: var(--blue-l);
      border-radius: 2px
    }

    .product-title {
      font-size: 1.55rem;
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 16px;
      background: linear-gradient(135deg, #fff 60%, var(--blue-xl));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 12px rgba(255,255,255,.2)) drop-shadow(0 0 28px rgba(25,98,247,.25))
    }

    /* Divider */
    .buy-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border2), transparent);
      margin: 0
    }

    /* Buy panel body */
    .buy-body {
      padding: 20px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    /* variants */
    .variants-label {
      font-size: .75rem;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 10px
    }

    .variants-grid {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .variant-btn {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      cursor: pointer;
      text-align: left;
      transition: all .22s cubic-bezier(.4, 0, .2, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--text);
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .variant-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(25,98,247, .06), rgba(100, 180, 255, .04));
      opacity: 0;
      transition: opacity .2s
    }

    .variant-btn:hover {
      border-color: var(--border2);
      background: rgba(25,98,247, .04)
    }

    .variant-btn:hover::before {
      opacity: 1
    }

    .variant-btn.selected {
      border-color: var(--blue);
      background: rgba(25,98,247, .07);
      box-shadow: 0 0 0 1px rgba(25,98,247, .2), 0 0 20px rgba(25,98,247, .1)
    }

    .variant-btn.selected::before {
      opacity: 1
    }

    .variant-btn.oos {
      opacity: .4;
      cursor: not-allowed
    }

    .variant-left {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 1
    }

    .variant-name {
      font-size: .92rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .variant-desc {
      font-size: .72rem;
      color: var(--text2)
    }

    .variant-price-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 5px
    }

    .variant-slash {
      font-size: .78rem;
      color: var(--text3);
      text-decoration: line-through
    }

    .variant-price {
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--blue-xl);
      line-height: 1;
      letter-spacing: -.5px
    }

    .variant-price .v-cur {
      font-size: .85rem;
      font-weight: 700;
      margin-right: 1px;
      vertical-align: super
    }

    .variant-stock-badge {
      font-size: .68rem;
      padding: 3px 9px;
      border-radius: 20px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 5px;
      width: fit-content
    }

    .in-stock {
      background: rgba(34, 197, 94, .1);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .18)
    }

    .low-stock-b {
      background: rgba(245, 158, 11, .1);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, .18)
    }

    .out-stock {
      background: rgba(239, 68, 68, .1);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, .18)
    }

    .variant-purchase-btn {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 9px 18px;
      font-size: .82rem;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-dim));
      transition: all .25s cubic-bezier(.4, 0, .2, 1);
      white-space: nowrap;
      position: relative;
      z-index: 1;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 81, 255, .2)
    }

    .variant-purchase-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
      transform: translateX(-100%);
      transition: transform .5s
    }

    .variant-btn:hover .variant-purchase-btn::before,
    .variant-btn.selected .variant-purchase-btn::before {
      transform: translateX(100%)
    }

    .variant-btn:hover .variant-purchase-btn {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0, 81, 255, .35);
      filter: brightness(1.1)
    }

    .variant-btn.oos .variant-purchase-btn {
      border-color: rgba(239, 68, 68, .25);
      color: #f87171;
      background: transparent
    }

    /* qty */
    .qty-section {}

    .qty-row {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .qty-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .5px;
      flex: 1
    }

    .qty-ctrl {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden
    }

    .qty-btn {
      background: transparent;
      border: none;
      color: var(--text2);
      width: 38px;
      height: 38px;
      cursor: pointer;
      font-size: .9rem;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .qty-btn:hover {
      background: rgba(25,98,247, .12);
      color: var(--blue-xl)
    }

    .qty-num {
      min-width: 40px;
      text-align: center;
      font-size: .95rem;
      font-weight: 800;
      color: var(--text)
    }

    /* price display */
    .price-display {
      background: linear-gradient(135deg, rgba(25,98,247, .1), rgba(0, 150, 255, .06));
      border: 1px solid var(--border2);
      border-radius: 14px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .price-left-col {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .price-label {
      font-size: .72rem;
      font-weight: 600;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .price-main-row {
      display: flex;
      align-items: baseline;
      gap: 8px
    }

    .price-display .amount {
      font-size: 2rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -.5px
    }

    .price-display .original {
      font-size: .85rem;
      color: var(--text3);
      text-decoration: line-through
    }

    .discount-tag {
      font-size: .72rem;
      background: rgba(34, 197, 94, .12);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .22);
      border-radius: 20px;
      padding: 3px 10px;
      font-weight: 700
    }

    /* coupon */
    .coupon-row {
      display: flex;
      gap: 8px
    }

    .coupon-row input {
      flex: 1;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--text);
      font-size: .88rem;
      font-family: 'Outfit', sans-serif;
      outline: none;
      transition: border-color .2s
    }

    .coupon-row input:focus {
      border-color: var(--blue-l)
    }

    .coupon-row input::placeholder {
      color: var(--text3)
    }

    .coupon-row button {
      background: rgba(25,98,247, .1);
      border: 1px solid var(--border2);
      color: var(--blue-xl);
      padding: 10px 18px;
      border-radius: 10px;
      cursor: pointer;
      font-size: .85rem;
      font-weight: 700;
      font-family: 'Outfit', sans-serif;
      transition: all .2s;
      white-space: nowrap
    }

    .coupon-row button:hover {
      background: rgba(25,98,247, .2);
      border-color: var(--blue)
    }

    .coupon-msg {
      font-size: .8rem;
      margin-top: -8px;
      padding: 8px 12px;
      border-radius: 8px;
      display: none
    }

    .coupon-msg.success {
      background: rgba(34, 197, 94, .08);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .18)
    }

    .coupon-msg.error {
      background: rgba(239, 68, 68, .08);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, .18)
    }

    /* email */
    .email-field {}

    .field-label {
      font-size: .75rem;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .5px;
      display: block;
      margin-bottom: 8px
    }

    .field-input {
      width: 100%;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 14px;
      color: var(--text);
      font-size: .9rem;
      font-family: 'Outfit', sans-serif;
      outline: none;
      transition: border-color .2s
    }

    .field-input:focus {
      border-color: var(--blue-l)
    }

    .field-input::placeholder {
      color: var(--text3)
    }

    /* alert */
    .alert {
      padding: 10px 14px;
      border-radius: 10px;
      font-size: .85rem;
      display: none
    }

    .alert.error {
      background: rgba(239, 68, 68, .08);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, .2);
      display: block
    }

    .alert.success {
      background: rgba(34, 197, 94, .08);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .2);
      display: block
    }

    /* checkout btn */
    .checkout-btn {
      width: 100%;
      background: linear-gradient(135deg, #1962f7, #2b76ff, #1050d0);
      background-size: 200% 200%;
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 18px;
      font-size: 1.05rem;
      font-weight: 900;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
      box-shadow: 0 10px 20px -10px rgba(25,98,247, .5), 0 0 0 1px rgba(255, 255, 255, .1) inset;
      letter-spacing: .5px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .checkout-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
      transform: translateX(-100%);
      transition: transform .6s;
    }

    .checkout-btn:hover:not(:disabled)::before { transform: translateX(100%); }

    .checkout-btn:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 15px 30px -10px rgba(25,98,247, .6), 0 0 0 1px rgba(255, 255, 255, .2) inset;
      filter: brightness(1.1);
      background-position: right center;
    }

    .checkout-btn:hover i { animation: pulseLightning .8s ease-in-out infinite; }

    @keyframes pulseLightning {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2) rotate(10deg); opacity: 0.8; filter: drop-shadow(0 0 8px #fff); }
    }

    .checkout-btn:active:not(:disabled) {
      transform: translateY(-1px) scale(0.99);
      box-shadow: 0 5px 15px -5px rgba(25,98,247, .5);
    }

    .checkout-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none
    }

    .checkout-note {
      text-align: center;
      font-size: .75rem;
      color: var(--text2);
      line-height: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px
    }

    /* buy panel footer */
    .buy-footer {
      padding: 0 24px 20px;
      display: flex;
      justify-content: center;
      gap: 20px
    }

    .buy-footer-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: .72rem;
      color: var(--text2)
    }

    .buy-footer-item i {
      color: var(--blue-l);
      font-size: .75rem
    }

    /* overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .8);
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(12px)
    }

    .overlay.show {
      display: flex
    }

    .overlay-box {
      background: var(--card-solid);
      border: 1px solid var(--border2);
      border-radius: 24px;
      padding: 40px;
      text-align: center;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 0 60px rgba(25,98,247, .15)
    }

    .overlay-box h3 {
      font-size: 1.1rem;
      font-weight: 800;
      margin-bottom: 8px
    }

    .overlay-box p {
      font-size: .88rem;
      color: var(--text2);
      margin-bottom: 24px;
      line-height: 1.6
    }

    .cf-turnstile {
      display: inline-block
    }

    /* flash */
    .flash {
      padding: 12px 16px;
      border-radius: 10px;
      font-size: .88rem;
      margin: 12px auto;
      max-width: 1140px;
      margin-inline: auto;
      position: relative;
      z-index: 2
    }

    .flash.error {
      background: rgba(239, 68, 68, .08);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, .2)
    }

    .flash.success {
      background: rgba(34, 197, 94, .08);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .2)
    }

    /* scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    /* ── PRODUCT STATS STRIP ── */
    .product-stats-strip {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: 14px clamp(16px, 4vw, 40px) 4px
    }

    .stats-strip-inner {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden
    }

    .stat-pill {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--text2);
      padding: 13px 8px;
      transition: background .2s, color .2s;
      cursor: default
    }

    .stat-pill:hover {
      background: rgba(25,98,247, .06);
      color: var(--text)
    }

    .stat-divider {
      width: 1px;
      height: 28px;
      background: var(--border);
      flex-shrink: 0
    }

    @media(max-width:600px) {
      .stat-pill {
        font-size: .7rem;
        padding: 10px 4px;
        gap: 4px
      }

      .stat-pill i {
        display: none
      }
    }

    /* ── BUY PANEL GLOW WRAP ── */
    .buy-glow-wrap {
      position: relative;
      border-radius: 25px
    }

    .buy-panel-glow {
      position: absolute;
      inset: -2px;
      border-radius: 26px;
      background: linear-gradient(45deg, var(--blue), var(--blue-dim), var(--blue-l), var(--blue));
      background-size: 300% 300%;
      animation: glowShift 4s ease infinite;
      z-index: 0;
      opacity: .4;
      filter: blur(2px);
      pointer-events: none
    }

    @keyframes glowShift {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    .buy-glow-wrap .buy-panel {
      position: relative;
      z-index: 1
    }

    /* ── LIVE BADGE ── */
    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: .73rem;
      color: rgba(255, 255, 255, .6);
      background: rgba(34, 197, 94, .07);
      border: 1px solid rgba(34, 197, 94, .2);
      border-radius: 20px;
      padding: 4px 12px;
      margin-bottom: 14px
    }

    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      flex-shrink: 0;
      box-shadow: 0 0 6px #22c55e;
      animation: ldot 1.5s ease-in-out infinite
    }

    @keyframes ldot {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.7)
      }
    }

    /* ── WHAT'S INCLUDED ── */
    .whats-included {
      background: rgba(25,98,247, .04);
      border: 1px solid rgba(34, 197, 94, .12);
      border-radius: 14px;
      padding: 14px 16px
    }

    .wi-title {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: #4ade80;
      margin-bottom: 10px
    }

    .wi-items {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .wi-item {
      font-size: .83rem;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 9px;
      line-height: 1.4
    }

    .wi-item i {
      color: #4ade80;
      font-size: .72rem;
      flex-shrink: 0;
      background: rgba(34, 197, 94, .15);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* ── UNIT PRICE ROW ── */
    .unit-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(25,98,247, .06);
      border: 1px solid rgba(25,98,247,.2);
      border-radius: 12px;
      padding: 12px 16px
    }

    .unit-price-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--text2)
    }

    .unit-price-val {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--blue-xl);
      letter-spacing: -.4px
    }

    .unit-slash {
      font-size: .85rem;
      font-weight: 500;
      color: var(--text3);
      text-decoration: line-through
    }

    .unit-discount-tag {
      font-size: .68rem;
      font-weight: 700;
      background: rgba(34, 197, 94, .15);
      color: #4ade80;
      border-radius: 6px;
      padding: 2px 7px
    }

    /* ── QUANTITY ROW ── */
    .qty-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .qty-label-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .qty-label {
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--text2)
    }

    .qty-minmax {
      font-size: .68rem;
      color: var(--text3)
    }

    .qty-controls {
      display: flex;
      align-items: center;
      gap: 0;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border2);
      border-radius: 12px;
      overflow: hidden
    }

    .qty-btn {
      background: none;
      border: none;
      color: var(--text2);
      font-size: .85rem;
      cursor: pointer;
      padding: 8px 14px;
      transition: background .18s, color .18s;
      line-height: 1
    }

    .qty-btn:hover {
      background: rgba(25,98,247, .12);
      color: var(--blue-l)
    }

    .qty-num {
      min-width: 32px;
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 8px 4px
    }

    /* ── TOTAL ROW ── */
    .total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border2);
      padding-top: 14px
    }

    .total-label {
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--text2)
    }

    .total-val {
      font-size: 1.55rem;
      font-weight: 900;
      color: #fff;
      letter-spacing: -.6px
    }

    /* ── PAYMENT METHODS ── */
    .payment-methods {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 2px
    }

    .pm-label {
      font-size: .72rem;
      color: var(--text3);
      font-weight: 600;
      white-space: nowrap
    }

    .pm-icons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .pm-badge {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: .75rem;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 600
    }

    .pm-badge-now {
      background: rgba(25,98,247, .1);
      border-color: rgba(25,98,247, .35);
      color: var(--blue-l);
      padding: 6px 14px;
      font-size: .78rem;
      letter-spacing: .02em
    }

    /* ── PURCHASE TOAST ── */
    .purchase-toast {
      position: fixed;
      bottom: 28px;
      left: 24px;
      background: rgba(8, 10, 26, .97);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(25,98,247, .3);
      border-radius: 16px;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 450;
      transform: translateY(130px);
      opacity: 0;
      transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s;
      min-width: 250px;
      max-width: 310px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .5), 0 0 20px rgba(25,98,247, .1)
    }

    .purchase-toast.show {
      transform: translateY(0);
      opacity: 1
    }

    .pt-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-l));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      color: #fff;
      flex-shrink: 0
    }

    .pt-info {
      flex: 1;
      min-width: 0
    }

    .pt-name {
      font-size: .8rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px
    }

    .pt-action {
      font-size: .72rem;
      color: var(--text2)
    }

    .pt-time {
      font-size: .68rem;
      color: var(--text3);
      margin-top: 1px
    }

    .pt-close {
      color: var(--text3);
      cursor: pointer;
      font-size: .75rem;
      padding: 4px;
      flex-shrink: 0;
      transition: color .2s
    }

    .pt-close:hover {
      color: var(--text2)
    }

    /* ── CHECKOUT BTN PULSE ── */
    .checkout-btn:not(:disabled) {
      animation: none
    }

    .checkout-btn:not(:disabled):hover {
      box-shadow: 0 8px 40px rgba(25,98,247, .6)
    }

    /* ── IMAGE HOT TAGS ── */
    .img-hot-tags {
      position: absolute;
      bottom: 14px;
      left: 14px;
      display: flex;
      gap: 7px;
      z-index: 3;
      flex-wrap: wrap
    }

    .hot-tag {
      font-size: .7rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      gap: 5px
    }

    .hot-tag.fire {
      background: rgba(249, 115, 22, .18);
      color: #fb923c;
      border: 1px solid rgba(249, 115, 22, .28)
    }

    .hot-tag.bolt {
      background: rgba(25,98,247, .18);
      color: var(--blue-l);
      border: 1px solid rgba(25,98,247, .28)
    }

    .hot-tag.shield {
      background: rgba(34, 197, 94, .14);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .22)
    }

    /* ── DOT VARIANT SELECTOR ── */
    .vdot-grid{display:flex;flex-direction:column;gap:8px}
    .vdot-btn{width:100%;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .2s,background .2s;text-align:left}
    .vdot-btn:hover{border-color:var(--border2);background:rgba(25,98,247,.04)}
    .vdot-btn.selected{border-color:var(--blue);background:rgba(25,98,247,.06)}
    .vdot-btn.oos{opacity:.4;cursor:not-allowed}
    .vdot-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s}
    .vdot-btn.selected .vdot-radio{border-color:var(--blue)}
    .vdot-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:0;transform:scale(0);transition:opacity .2s,transform .2s}
    .vdot-btn.selected .vdot-dot{opacity:1;transform:scale(1)}
    .vdot-body{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
    .vdot-name{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.4}
    .vdot-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
    .vdot-slash{font-size:.78rem;color:var(--text3);text-decoration:line-through}
    .vdot-price{font-size:1rem;font-weight:800;color:var(--blue-l)}
    .vdot-stock{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}
    .vdot-stock.ok{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.18)}
    .vdot-stock.low{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.18)}
    .vdot-stock.out{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.18)}

    /* ── VARIANT SELECTED GLOW ── */
    .variant-btn.selected {
      border-color: var(--blue);
      background: rgba(25,98,247, .08);
      box-shadow: 0 0 0 1px rgba(25,98,247, .25), 0 0 24px rgba(25,98,247, .12), inset 0 0 20px rgba(25,98,247, .04)
    }

    /* ── ANIMATED PRICE ── */
    @keyframes priceFlash {
      0% {
        transform: scale(1.12);
        color: var(--blue-l)
      }

      100% {
        transform: scale(1);
        color: #fff
      }
    }

    .price-flash {
      animation: priceFlash .3s ease-out
    }

    /* ── CUSTOM CURSOR ── */
    .cursor-glow {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, opacity .2s;
      mix-blend-mode: screen
    }

    .cursor-dot {
      width: 8px;
      height: 8px;
      background: #fff;
      top: 0;
      left: 0
    }

    .cursor-ring {
      width: 36px;
      height: 36px;
      border: 1.5px solid rgba(25,98,247, .7);
      background: transparent;
      box-shadow: 0 0 12px rgba(25,98,247, .4), inset 0 0 6px rgba(25,98,247, .1);
      transition: width .18s, height .18s, border-color .2s, box-shadow .2s, transform .1s
    }

    .cursor-ring.hovering {
      width: 52px;
      height: 52px;
      border-color: rgba(123, 150, 255, .9);
      box-shadow: 0 0 24px rgba(25,98,247, .6), inset 0 0 12px rgba(25,98,247, .15)
    }

    @media(hover:none) {
      .cursor-glow {
        display: none
      }
    }

    /* ── 3D TILT IMAGE ── */
    .media-image-card {
      transform-style: preserve-3d;
      transition: transform .1s ease-out, box-shadow .3s
    }

    .media-image-card:hover {
      box-shadow: 0 0 60px rgba(25,98,247, .18), 0 20px 60px rgba(0, 0, 0, .5)
    }

    /* ── STAR RATING ── */
    .product-rating {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px
    }

    .stars-row {
      display: flex;
      gap: 2px;
      color: #fbbf24;
      font-size: .9rem
    }

    .rating-score {
      font-size: .88rem;
      font-weight: 800;
      color: var(--text)
    }

    .rating-count {
      font-size: .78rem;
      color: var(--text2)
    }

    /* ── BENTO FEATURES GRID ── */
    .bento-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 12px
    }

    .bento-cell {
      background: var(--card);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color .25s, transform .25s, box-shadow .25s;
      cursor: default
    }

    .bento-cell:hover {
      border-color: var(--border2);
      transform: translateY(-3px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .25)
    }

    .bento-cell.wide {
      grid-column: span 2
    }

    .bento-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      flex-shrink: 0
    }

    .bento-icon.blue {
      background: rgba(25,98,247, .15);
      color: var(--blue-l);
      box-shadow: 0 0 12px rgba(25,98,247, .2)
    }

    .bento-icon.teal {
      background: rgba(6, 182, 212, .12);
      color: var(--teal);
      box-shadow: 0 0 12px rgba(6, 182, 212, .2)
    }

    .bento-icon.green {
      background: rgba(34, 197, 94, .12);
      color: #4ade80;
      box-shadow: 0 0 12px rgba(34, 197, 94, .18)
    }

    .bento-icon.blue {
      background: rgba(25,98,247, .12);
      color: var(--blue-l);
      box-shadow: 0 0 12px rgba(25,98,247, .18)
    }

    .bento-icon.orange {
      background: rgba(249, 115, 22, .1);
      color: #fb923c;
      box-shadow: 0 0 12px rgba(249, 115, 22, .15)
    }

    .bento-title {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text)
    }

    .bento-desc {
      font-size: .75rem;
      color: var(--text2);
      line-height: 1.5
    }

    .bento-cell.wide .bento-inner {
      display: flex;
      align-items: center;
      gap: 14px
    }

    @media(max-width:480px) {
      .bento-grid {
        grid-template-columns: 1fr
      }

      .bento-cell.wide {
        grid-column: span 1
      }
    }

    /* ── RESPONSIVE ── */
    @media(max-width:900px) {
      .product-layout {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .product-buy-wrap {
        position: static
      }

      .info-card {
        grid-template-columns: 1fr
      }

      .info-cell:first-child {
        border-radius: 19px 19px 0 0
      }

      .info-cell:last-child {
        border-radius: 0 0 19px 19px
      }
    }

    @media(max-width:768px) {
      .product-layout { padding: 0 16px; align-items: stretch }
      .buy-panel { border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.4) }
      .qty-row { transform: scale(1) !important; width: 100% !important; justify-content: space-between !important; }
      
      /* Mobile Persistent Status Glows */
      .buy-panel.is-out-of-stock {
        border-color: rgba(25, 98, 247, 0.4) !important;
        box-shadow: 0 0 30px rgba(25, 98, 247, 0.1) !important;
      }
      .buy-panel.is-on-hold {
        border-color: rgba(25, 98, 247, 0.3) !important;
        box-shadow: 0 0 30px rgba(25, 98, 247, 0.08) !important;
      }
      .vdot-stock.out {
        background: rgba(25, 98, 247, 0.1) !important;
        border-color: rgba(25, 98, 247, 0.3) !important;
        color: var(--blue-l) !important;
      }
      .vdot-stock.out:nth-of-type(1) { /* Hold version */
        background: rgba(25, 98, 247, 0.12) !important;
        border-color: rgba(25, 98, 247, 0.35) !important;
        color: var(--blue-xl) !important;
      }

      .nav-wrap {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(25,98,247,.2);
        background: rgba(4,6,14,.97)
      }

      nav {
        height: 60px;
        padding: 0 16px
      }

      .nav-links-center,
      .nav-btn-filled,
      .nav-btn-telegram {
        display: none
      }

      .nav-hamburger {
        display: flex
      }

      body {
        padding-top: 84px
      }

      .product-layout {
        padding: 0 14px 60px
      }

      .trust-grid {
        grid-template-columns: 1fr 1fr 1fr
      }

      .buy-header,
      .buy-body {
        padding-left: 18px;
        padding-right: 18px
      }
    }

    @media(max-width:480px) {
      .trust-grid {
        grid-template-columns: 1fr
      }

      .product-title {
        font-size: 1.3rem
      }

      .price-display .amount {
        font-size: 1.6rem
      }

      .info-card {
        display: flex;
        flex-direction: column
      }
    }

    /* ── UNIT PRICE HERO (top of buy panel) ── */
    .bp-unit-price {
      padding: 22px 24px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .bp-up-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text2)
    }

    .bp-up-val {
      display: flex;
      align-items: baseline;
      gap: 10px
    }

    .bp-up-slash {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text3);
      text-decoration: line-through
    }

    .bp-up-val > #unitDisplay {
      font-size: 2.1rem;
      font-weight: 900;
      color: var(--blue);
      line-height: 1;
      letter-spacing: -.8px;
      text-shadow: 0 0 24px rgba(25,98,247,.6), 0 0 48px rgba(25,98,247,.3)
    }

    .bp-up-save {
      font-size: .72rem;
      font-weight: 700;
      background: rgba(34, 197, 94, .12);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .22);
      border-radius: 20px;
      padding: 3px 10px;
      margin-left: 4px
    }

    /* ── QUANTITY CONTROLS ── */
    .bp-qty-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .bp-qty-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px
    }

    .bp-qty-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .bp-qty-minmax {
      font-size: .75rem;
      color: var(--text3)
    }

    .bp-qty-bar {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      width: fit-content
    }

    .bp-qty-btn {
      background: transparent;
      border: none;
      color: var(--text2);
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      padding: 10px 16px;
      transition: all .2s;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .bp-qty-btn:hover {
      background: rgba(255, 255, 255, .05);
      color: var(--blue-l)
    }

    .bp-qty-btn:active {
      transform: scale(.9)
    }

    .bp-qty-num {
      width: 44px;
      background: transparent;
      border: none;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      text-align: center;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 800;
      color: #fff;
      padding: 8px 4px;
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .bp-qty-num::-webkit-outer-spin-button,
    .bp-qty-num::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0
    }

    /* Locked state */
    .locked-stepper {
        opacity: 0.5;
        pointer-events: none;
        background: rgba(255,255,255,0.02);
        cursor: not-allowed;
        filter: grayscale(1);
    }
    .locked-stepper .bp-qty-num { border-color: rgba(255,255,255,0.1); }
    /* ── TOTAL PRICE BOX ── */
    .bp-total-box {
      background: linear-gradient(135deg, rgba(25,98,247, .1), rgba(25,98,247, .04));
      border: 1px solid var(--border2);
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .bp-total-label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .6px
    }

    .bp-total-val {
      font-size: 1.55rem;
      font-weight: 900;
      color: var(--blue);
      letter-spacing: -.5px;
      text-shadow: 0 0 20px rgba(25,98,247, .6), 0 0 40px rgba(25,98,247, .3)
    }

    /* ── PAYMENT METHODS ── */
    .payment-methods {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    .pm-label {
      font-size: .75rem;
      color: var(--text3);
      font-weight: 600
    }

    .pm-icons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .pm-badge {
      font-size: .72rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      color: var(--text2)
    }

    /* ── WHAT'S INCLUDED ── */
    .whats-included {
      background: rgba(25,98,247, .04);
      border: 1px solid rgba(34, 197, 94, .15);
      border-radius: 14px;
      padding: 14px 16px
    }

    .wi-title {
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: #4ade80;
      margin-bottom: 10px
    }

    .wi-title i {
      margin-right: 4px
    }

    .wi-items {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .wi-item {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: .83rem;
      color: var(--text2)
    }

    .wi-item i {
      color: #4ade80;
      font-size: .78rem;
      width: 14px;
      text-align: center
    }

    /* ── FIELD HINT ── */
    .field-hint {
      font-size: .73rem;
      color: var(--text3);
      margin-top: 5px
    }

    /* ── COUPON SECTION ── */
    
    /* ── COUPON SECTION ── */
    .coupon-section {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, .02)
    }

    .coupon-toggle {
      width: 100%;
      background: transparent;
      border: none;
      padding: 12px 16px;
      color: var(--text2);
      font-size: .82rem;
      font-weight: 700;
      font-family: 'Jost', sans-serif;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: color .2s, background .2s
    }

    .coupon-toggle:hover {
      background: rgba(25,98,247, .05);
      color: var(--blue-xl)
    }

    .coupon-toggle span {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .coupon-toggle i.fa-tag {
      color: var(--blue-l)
    }

    .coupon-body {
      padding: 0 14px 14px;
      border-top: 1px solid var(--border)
    }

    .coupon-row {
      display: flex;
      gap: 8px;
      margin-top: 12px
    }

    .coupon-apply-btn {
      background: rgba(25,98,247, .12);
      border: 1px solid var(--border2);
      color: var(--blue-xl);
      padding: 0 16px;
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 800;
      font-family: 'Jost', sans-serif;
      cursor: pointer;
      transition: all .2s;
      flex-shrink: 0;
      white-space: nowrap
    }

    /* ── ICON GLOWS ── */
    .badge-cat i, .badge-discount i { text-shadow: 0 0 8px rgba(25,98,247,.9); }
    .info-cell-icon.blue i { text-shadow: 0 0 10px rgba(25,98,247,1),0 0 20px rgba(25,98,247,.5); }
    .info-cell-icon.green i { text-shadow: 0 0 10px rgba(34,197,94,1),0 0 20px rgba(34,197,94,.5); }
    .vdot-stock.ok i { text-shadow: 0 0 7px rgba(34,197,94,.9); }
    .vdot-stock.low i { text-shadow: 0 0 7px rgba(245,158,11,.9); }
    .bp-qty-label i { text-shadow: 0 0 8px rgba(25,98,247,.9); }
    .desc-card-header h4 i, .desc-card-header i { text-shadow: 0 0 8px rgba(25,98,247,.9); }

    /* ── BLUE ICON GLOWS ── */
    .product-cat i { color:var(--blue-l);text-shadow:0 0 8px rgba(25,98,247,.9); }
    .vdot-name i,.variants-label i { color:var(--blue-l);text-shadow:0 0 8px rgba(25,98,247,.8); }
    .checkout-btn i,.buy-btn i { text-shadow:0 0 10px rgba(255,255,255,.8); }
    .trust-card .trust-icon.blue i { text-shadow:0 0 10px rgba(25,98,247,1),0 0 20px rgba(25,98,247,.5); }
    .trust-card .trust-icon.green i { text-shadow:0 0 10px rgba(34,197,94,1),0 0 20px rgba(34,197,94,.5); }
    .trust-card .trust-icon.teal i { text-shadow:0 0 10px rgba(6,182,212,1),0 0 20px rgba(6,182,212,.5); }
    .bp-unit-price .bp-up-label i { color:var(--blue-l);text-shadow:0 0 8px rgba(25,98,247,.8); }
    .vdot-dot { background:var(--blue-l);box-shadow:0 0 6px rgba(25,98,247,.8); }

/* ── DELIVERY PREFERENCE ── */
.dc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    position: relative;
    z-index: 10;
}

.dc-btn {
    background: linear-gradient(135deg, rgba(10,14,30,0.9) 0%, rgba(15,20,45,0.8) 100%);
    border: 1.5px solid rgba(25, 98, 247, .15);
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    text-align: left;
}

/* shimmer sweep on hover */
.dc-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(25,98,247,.08) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s ease;
    pointer-events: none;
}
.dc-btn:hover::before { transform: translateX(100%); }

.dc-btn:hover {
    border-color: rgba(25, 98, 247, .35);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(25,98,247,.1);
}

.dc-btn.sel {
    background: linear-gradient(135deg, rgba(25,98,247,.18) 0%, rgba(25,98,247,.08) 100%);
    border-color: var(--blue);
    box-shadow: 0 0 0 1px rgba(25,98,247,.3), 0 0 28px rgba(25,98,247,.25), inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(-2px);
}

/* top row: icon + check */
.dc-btn-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dc-btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 98, 247, .12);
    border: 1px solid rgba(25, 98, 247, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--blue-xl);
    transition: all .3s;
    flex-shrink: 0;
}

.dc-btn.sel .dc-btn-icon {
    background: linear-gradient(135deg, var(--blue-l), var(--blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 18px rgba(25, 98, 247, .55);
}

.dc-btn-info { pointer-events: none; width: 100%; }
.dc-btn-title {
    font-size: .9rem;
    font-weight: 800;
    color: #d0dcff;
    margin-bottom: 3px;
    line-height: 1.2;
    transition: color .25s;
}
.dc-btn.sel .dc-btn-title { color: #fff; }

.dc-btn-sub {
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dc-btn.sel .dc-btn-sub { color: rgba(155,188,251,.6); }

/* radio dot — now top-right corner */
.dc-btn-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(25,98,247,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all .3s;
    flex-shrink: 0;
}
.dc-btn.sel .dc-btn-check {
    border-color: var(--blue);
    background: rgba(25,98,247,.15);
    box-shadow: 0 0 8px rgba(25,98,247,.5);
}
.dc-btn-check::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--blue-l);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.4);
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.dc-btn.sel .dc-btn-check::after { opacity: 1; transform: scale(1); }

/* ── QUANTITY LOCKING ── */
.qty-stepper.locked { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

.bp-sec-lbl { font-size: 0.72rem; font-weight: 800; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.bp-sec-lbl i { color: var(--blue-l); font-size: 0.85rem; }

@media(max-width: 480px) {
    .dc-grid { grid-template-columns: 1fr; }
    .dc-btn-sub { white-space: normal; }
}

/* Premium Shortcode Icons */
@keyframes iconGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(25, 98, 247, 0.5)); }
    50% { filter: drop-shadow(0 0 12px rgba(25, 98, 247, 0.85)); }
}

.ce-icon {
    color: var(--blue, #1962f7);
    font-size: 1.1em;
    vertical-align: middle;
    margin: 0 4px;
    filter: drop-shadow(0 0 8px rgba(25, 98, 247, 0.5));
    animation: iconGlowPulse 3s ease-in-out infinite;
    display: inline-block;
}
 
/* ── BUY PANEL STATE THEMES ── */
.buy-panel.is-out-of-stock{--theme-color:var(--blue-l);--theme-color-rgb:43,118,255;--theme-glow:rgba(25,98,247,0.4);--theme-border:rgba(25,98,247,0.35)}
.buy-panel.is-on-hold{--theme-color:var(--blue-xl);--theme-color-rgb:156,188,251;--theme-glow:rgba(156,188,251,0.4);--theme-border:rgba(156,188,251,0.35)}
.product-price-section{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:22px;margin-bottom:24px;transition:all 0.3s ease}
.is-out-of-stock .product-price-section{border-color:rgba(25,98,247,0.15);background:rgba(25,98,247,0.03)}
.is-on-hold .product-price-section{border-color:rgba(156,188,251,0.15);background:rgba(156,188,251,0.03)}
.is-out-of-stock .pp-current,.is-on-hold .pp-current{color:var(--theme-color)!important;filter:drop-shadow(0 0 10px var(--theme-glow))!important}
.is-out-of-stock .checkout-btn,.is-on-hold .checkout-btn{background:rgba(var(--theme-color-rgb),0.05)!important;border:1px solid var(--theme-border)!important;color:var(--theme-color)!important;cursor:not-allowed;box-shadow:0 0 20px rgba(var(--theme-color-rgb),0.1)!important;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:0.8}
.is-out-of-stock .checkout-btn i,.is-on-hold .checkout-btn i{background:var(--theme-color);color:#000;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;box-shadow:0 0 10px var(--theme-glow);margin-right:0!important}
.is-out-of-stock .bp-total-val,.is-on-hold .bp-total-val{color:var(--theme-color)!important;text-shadow:0 0 15px var(--theme-glow)!important}
.is-out-of-stock .bp-qty-num,.is-on-hold .bp-qty-num{border-color:var(--theme-border)!important}
.pp-price-wrap{display:flex;align-items:baseline;gap:8px}
.pp-slash{font-size:1rem;color:rgba(255,255,255,.4);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.55);text-decoration-thickness:1.5px;align-self:center}
.pp-main-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-current{font-size:1.8rem;font-weight:900;color:var(--blue);background:linear-gradient(110deg,var(--blue) 40%,rgba(255,255,255,0.7) 50%,var(--blue) 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:priceShine 3.5s linear infinite;filter:drop-shadow(0 0 8px rgba(25,98,247,0.25))}
@keyframes priceShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.pp-stock-wrap{display:flex;align-items:center;gap:10px}
.pp-stock-glass{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(25,98,247,.12);border:1px solid rgba(25,98,247,.35);border-radius:10px;padding:6px 12px;backdrop-filter:blur(8px);min-width:48px;text-align:center;box-shadow:0 0 16px rgba(25,98,247,.15)}
.pp-stock-num{font-size:1.2rem;font-weight:800;color:var(--blue-l);letter-spacing:-.5px;line-height:1}
.pp-stock-sublbl{font-size:.6rem;font-weight:600;color:var(--blue-xl);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.vdot-stock.hold{color:#ffd700}
.bp-qty-wrap{margin-top: 24px}
.bp-email-wrap{position:relative}
.bp-sec-lbl{font-size:0.75rem;font-weight:800;color:var(--muted);letter-spacing:1.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
.bp-sec-lbl i{font-size:0.85rem;color:var(--blue-l)}
.bp-email-field{width:100%;height:56px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:0 20px;color:#fff;font-family:inherit;font-size:1rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}
.bp-email-field:focus{background:rgba(255,255,255,0.05);border-color:var(--blue);box-shadow:0 0 0 4px rgba(25,98,247,0.1),inset 0 2px 4px rgba(0,0,0,0.2)}
.bp-email-field::placeholder{color:rgba(255,255,255,0.2)}
.bp-email-hint{font-size:0.7rem;color:var(--muted);font-weight:500;margin-top:6px;padding-left:4px;display:flex;align-items:center;gap:4px}
.bp-email-hint::before{content:"\f129";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--blue);margin-right:4px;font-size:0.65rem}
.bp-qty-header{margin-bottom:12px;}
.bp-qty-bar{margin-top:4px;}