/* Spinner */
      @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
      .spinner{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #22c55e;width:40px;height:40px;animation:spin 1s linear infinite}

      .input-field:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2);outline:none}
      .btn-raise:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
      .product-card{transition:transform .25s ease, box-shadow .25s ease}
      .product-card:hover{transform:translateY(-6px);box-shadow:0 20px 34px -16px rgba(0,0,0,.25)}

      /* Ticker */
      .ticker-wrap{position:fixed; top:64px; left:0; width:100%; z-index:50}
      .ticker{white-space:nowrap; will-change:transform}
      @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

      /* Gift modal */
      .gift-modal{position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9999; display:none; padding:1rem}
      .gift-modal.show{display:flex; justify-content:center; align-items:center}
      .gift-modal-content{background:#fff; border-radius:14px; max-width:680px; width:100%; padding:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:fadeInUp .35s ease}
      .gift-modal-close{position:absolute; top:12px; right:16px; background:transparent; border:0; font-size:1.5rem; cursor:pointer}
      @keyframes fadeInUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}

      /* Toast */
      .toast{position:fixed; bottom:1rem; right:1rem; background:#323232; color:#fff; padding:12px 20px; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.25); font-size:.875rem; opacity:0; transform:translateY(16px); transition:.25s all; z-index:10000}
      .toast.show{opacity:1; transform:translateY(0)}

      /* Buy Now Modal */
      .buynow-modal{position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9999; display:none; padding:1rem}
      .buynow-modal.show{display:flex; justify-content:center; align-items:center}
      .buynow-modal-content{background:#fff; border-radius:14px; max-width:800px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:fadeInUp .35s ease}
      .buynow-modal-close{position:absolute; top:12px; right:16px; background:transparent; border:0; font-size:1.5rem; cursor:pointer; z-index:10}

      /* Network Selection Modal */
      .network-modal{position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9999; display:none; padding:1rem}
      .network-modal.show{display:flex; justify-content:center; align-items:center}
      .network-modal-content{background:#fff; border-radius:14px; max-width:500px; width:100%; padding:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:fadeInUp .35s ease}
      .network-modal-close{position:absolute; top:12px; right:16px; background:transparent; border:0; font-size:1.5rem; cursor:pointer}
      .network-option{transition:all 0.3s ease; cursor:pointer}
      .network-option:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.15)}

      /* Floating labels */
      .floating-label-group {position: relative;}
      .floating-label {position: absolute; pointer-events: none; left: 12px; top: 11px; transition: all 0.2s ease; background: white; padding: 0 4px;}
      .floating-input:focus ~ .floating-label,
      .floating-input:not(:placeholder-shown) ~ .floating-label {top: -8px; font-size: 0.75rem; color: #3b82f6;}

      /* Prevent nav overlap with ticker */
      body{padding-top:112px}
      @media (max-width: 768px){ body{padding-top:128px} }

      /* Smooth hover badge */
      .badge-hot{background:#ef4444; color:#fff; padding:.25rem .5rem; font-size:.75rem; border-radius:9999px; animation:pulse 2s infinite}
      @keyframes pulse{0%{opacity:1}50%{opacity:.75}100%{opacity:1}}

:root{
    --bar-height: 48px;
    --bar-gap: 8px; /* space between bars */
    --bars-total-height: calc((var(--bar-height) * 2) + var(--bar-gap));
    --buy-width: auto;
  }

  /* ensure page content doesn't hide under fixed bars */
  body { padding-top: var(--bars-total-height); }

  .promo-stack {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--bar-gap);
    pointer-events: none;
    padding: 8px; /* tiny outer safety */
    box-sizing: border-box;
  }

  .promo-bar {
    height: var(--bar-height);
    display: flex;
    align-items: center;
    justify-content: space-between; /* left text, right button */
    gap: 1rem;
    padding: 0 1rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    pointer-events: auto;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    animation: fadeIn 600ms ease both;
    overflow: hidden;
  }

  .promo-left {
    display:flex;
    align-items:center;
    gap:0.75rem;
    min-width:0;
  }

  .promo-left span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .promo-green { background: linear-gradient(90deg,#059669,#10b981); }
  .promo-blue  { background: linear-gradient(90deg,#0ea5e9,#0369a1); }

  .promo-icon { width:22px; height:22px; flex:0 0 22px; display:inline-block; }

  /* LIMITED badge */
  .limited {
    background: rgba(255,255,255,0.12);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    margin-left: 6px;
    text-transform:uppercase;
    letter-spacing: .06em;
  }

  /* BUY NOW button styles: glow + blinking + hover-shake */
  .buy-now {
    background: linear-gradient(180deg,#ef4444,#dc2626);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 900;
    color:#fff;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow: 0 6px 20px rgba(220,38,38,0.28), 0 0 18px rgba(239,68,68,0.18);
    border: 1px solid rgba(255,255,255,0.06);
    transform-origin: center;
    transition: transform 160ms ease, box-shadow 160ms ease;
    animation: buyPulse 1.2s infinite alternate;
    white-space:nowrap;
  }

  .buy-now .dot {
    width:8px; height:8px; border-radius:50%;
    background: #fff7f7;
    box-shadow: 0 0 8px rgba(255,255,255,0.9);
    opacity: .95;
  }

  /* pulse (soft blink) */
  @keyframes buyPulse {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-2px) scale(1.02); opacity: .6; }
  }

  /* hover: small shake and heavier glow */
  .buy-now:hover {
    transform: translateY(-3px) rotate(-1deg) scale(1.03);
    box-shadow: 0 10px 30px rgba(220,38,38,0.36), 0 0 28px rgba(239,68,68,0.28);
  }

  /* slight attention wobble when focused (keyboard) */
  .buy-now:focus { outline: 3px solid rgba(255,255,255,0.14); box-shadow: 0 12px 36px rgba(220,38,38,0.42); }

  /* small responsive adjustments */
  @media (max-width:640px) {
    .promo-bar { padding: 0 0.8rem; border-radius:6px; font-size:.86rem; }
    .limited { display:none; } /* hide badge on very small screens */
    .promo-left span { display:inline-block; max-width: 60vw; }
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }