:root{
    --maroon:#5C0E1A;
    --maroon-deep:#3E0812;
    --gold:#D4A017;
    --gold-light:#F2C94C;
    --marigold:#E2711D;
    --cream:#FFF6E7;
    --ink:#1B1030;
    --ink-2:#2A1846;
  }
  *{box-sizing:border-box;}
  body{
    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--ink);
  }
  h1,h2,h3,h4,.font-display{font-family:'Playfair Display',serif;}
  .text-maroon{color:var(--maroon);}
  .bg-maroon{background:var(--maroon);}
  .bg-maroon-deep{background:var(--maroon-deep);}
  .text-gold{color:var(--gold);}
  .bg-gold{background:var(--gold);}
  .border-gold{border-color:var(--gold);}
  .bg-ink{background:var(--ink);}
  .bg-marigold{background:var(--marigold);}
  .text-marigold{color:var(--marigold);}
  .text-maroon-deep{color:var(--maroon-deep);}
  .text-cream{color:var(--cream);}
  .text-cream\/90{color:var(--cream);opacity:.9;}
  .bg-footer{background:linear-gradient(160deg, #4A2F0C 0%, #35220A 55%, #241706 100%);}

  /* rangoli concentric rings */
  .rangoli{position:absolute;border-radius:50%;border:1px solid rgba(212,160,23,.35);}
  .diya-row{display:flex;gap:0;}
  .hairline{border-bottom:1px solid rgba(212,160,23,.4);}
  .gold-rule{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}

  .btn-primary{
    background:var(--marigold);color:#fff;font-weight:600;
    padding:.7rem 1.6rem;border-radius:4px;transition:background .15s ease;
    display:inline-flex;align-items:center;gap:.5rem;
  }
  .btn-primary:hover{background:#c65e14;}
  .btn-outline{
    background:transparent;border:1.5px solid var(--gold);color:var(--maroon);font-weight:600;
    padding:.65rem 1.5rem;border-radius:4px;transition:.15s ease;
  }
  .btn-outline:hover{background:var(--gold);color:#fff;}
  .btn-ghost{color:var(--maroon);font-weight:500;}
  .btn-ghost:hover{color:var(--marigold);}

  .card{
    background:#fff;border:1px solid #EADFC7;border-radius:8px;
  }
  .input{
    width:100%;border:1px solid #D8C9A3;border-radius:4px;padding:.6rem .8rem;
    background:#fff;font-family:'Poppins',sans-serif;
  }
  .input:focus{outline:2px solid var(--gold);outline-offset:1px;}
  label.field-label{font-size:.8rem;font-weight:600;color:var(--maroon-deep);display:block;margin-bottom:.25rem;}

  /* ---------- cart quantity stepper ---------- */
  .qty-stepper{display:inline-flex;align-items:center;gap:.65rem;}
  button.qty-btn{
    width:24px;height:24px;flex-shrink:0;border:none;border-radius:50%;
    background:var(--cream);color:var(--maroon);font-weight:700;font-size:1.05rem;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
  }
  button.qty-btn:hover:not(:disabled){background:var(--gold);color:#fff;}
  button.qty-btn:disabled{opacity:.35;cursor:not-allowed;}
  .qty-value{min-width:1.4rem;text-align:center;font-weight:600;color:var(--maroon-deep);}

  .password-field{position:relative;}
  .password-field input{padding-right:2.6rem;}
  .password-toggle-btn{
    position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1;padding:.3rem;
  }

  .nav-link{font-weight:500;color:var(--cream);opacity:.85;padding:.4rem .2rem;position:relative;}
  .nav-link:hover{opacity:1;}
  .nav-link.active{opacity:1;color:var(--gold-light);}

  table.ledger{width:100%;border-collapse:collapse;}
  table.ledger thead th{
    background:var(--maroon);color:var(--gold-light);text-align:left;
    padding:.7rem .9rem;font-weight:600;font-size:.85rem;
  }
  table.ledger tbody td{padding:.6rem .9rem;border-bottom:1px solid #EADFC7;font-size:.9rem;}
  table.ledger tbody tr.cat-row td{
    background:#FBF0DA;color:var(--maroon-deep);font-weight:700;font-size:.8rem;letter-spacing:.02em;
  }
  table.ledger tbody tr:hover td{background:#FFFBF2;}

  .price-strike{color:#9c8b6f;text-decoration:line-through;font-size:.85em;}
  .badge{display:inline-block;background:var(--gold);color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:3px;}
  .badge-outline{display:inline-block;border:1px solid var(--maroon);color:var(--maroon);font-size:.7rem;font-weight:600;padding:.1rem .5rem;border-radius:3px;}

  .cat-tile{
    border:1px solid #EADFC7;border-radius:8px;background:#fff;padding:1.2rem;
    cursor:pointer;transition:.15s ease;width:100%;display:block;
  }
  .cat-tile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(92,14,26,.08);}

  .modal-overlay{position:fixed;inset:0;background:rgba(27,16,48,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem;}
  .modal-box{background:#fff;border-radius:8px;max-width:420px;width:100%;padding:1.75rem;position:relative;max-height:90vh;overflow-y:auto;}

  .qr-mock{width:180px;height:180px;margin:0 auto;background:#fff;border:3px solid var(--maroon);padding:8px;}
  .toast{position:fixed;bottom:1.25rem;right:1.25rem;background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:6px;font-size:.9rem;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:320px;}

  .tab-btn{padding:.55rem 1rem;font-weight:600;font-size:.85rem;color:#8a7a5c;border-bottom:2px solid transparent;}
  .tab-btn.active{color:var(--maroon);border-color:var(--marigold);}

  /* buttons used for in-app navigation should never look/behave like external links */
  button{font-family:inherit;}
  button.nav-link,button.logo-btn,button.cat-tile,button.plain-link{
    appearance:none;-webkit-appearance:none;background:none;border:none;margin:0;cursor:pointer;text-align:inherit;
  }
  /* .btn-primary/.btn-outline/.btn-ghost keep their own background/border/margin below —
     only strip the native OS button chrome, not the component's visible styling.
     (margin is intentionally NOT reset here — an element+class selector like this
     outranks single-class spacing utilities such as .mt-4/.mt-auto and would silently
     cancel them; browsers already default <button> margin to 0.) */
  button.btn-primary,button.btn-outline,button.btn-ghost{
    appearance:none;-webkit-appearance:none;cursor:pointer;text-align:inherit;
  }
  button.plain-link{color:var(--marigold);font-weight:600;}
  button.plain-link:hover{text-decoration:underline;}
  button.plain-link:disabled{color:#999;cursor:not-allowed;}
  button.plain-link:disabled:hover{text-decoration:none;}
  .logo-btn{display:flex;align-items:center;gap:.5rem;}

  /* ---------- festive animation & scale-up icon system ---------- */
  @keyframes flicker{
    0%,100%{opacity:1;transform:scale(1);}
    45%{opacity:.75;transform:scale(.96) rotate(-2deg);}
    55%{opacity:.9;transform:scale(1.04) rotate(2deg);}
  }
  @keyframes floatSparkle{
    0%{transform:translateY(0) scale(.8);opacity:0;}
    15%{opacity:1;}
    100%{transform:translateY(-140px) scale(1.15);opacity:0;}
  }
  @keyframes heroFadeUp{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes glowPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(212,160,23,.35);}
    50%{box-shadow:0 0 0 10px rgba(212,160,23,0);}
  }
  @keyframes popIn{
    from{opacity:0;transform:scale(.85);}
    to{opacity:1;transform:scale(1);}
  }
  @keyframes tickerScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  }

  /* ---------- scrolling alert banner (train/ticker effect) ---------- */
  .alert-ticker-outer{position:relative;overflow:hidden;padding:.55rem 2.5rem .55rem 0;}
  .alert-ticker-track{display:flex;width:max-content;animation-name:tickerScroll;animation-timing-function:linear;animation-iteration-count:infinite;}
  .alert-ticker-item{padding-left:2.5rem;padding-right:2.5rem;white-space:nowrap;flex-shrink:0;}
  .alert-dismiss-btn{
    position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
    background:none;border:none;color:rgba(255,255,255,.9);font-size:1.15rem;line-height:1;cursor:pointer;z-index:2;
  }
  .alert-dismiss-btn:hover{color:#fff;}

  .hero-fade{animation:heroFadeUp .7s ease both;}
  .hero-fade.delay-1{animation-delay:.12s;}
  .hero-fade.delay-2{animation-delay:.24s;}
  .hero-fade.delay-3{animation-delay:.36s;}

  .sparkle-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
  .sparkle{position:absolute;bottom:0;font-size:1.4rem;animation:floatSparkle linear infinite;opacity:0;}

  .diya-flame{display:inline-block;animation:flicker 2.4s ease-in-out infinite;}

  .icon-badge{
    width:88px;height:88px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFF3D6 0%, #FBE7B4 45%, #F2C94C 100%);
    display:flex;align-items:center;justify-content:center;margin:0 auto;
    font-size:2.75rem;line-height:1;animation:glowPulse 2.8s ease-in-out infinite;
  }
  .icon-badge-lg{width:110px;height:110px;font-size:3.5rem;}
  .icon-badge svg{width:58%;height:58%;}
  .icon-badge{position:relative;overflow:hidden;}
  .icon-badge .product-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
  .icon-badge .product-icon-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
  .cat-tile .icon-badge{transition:transform .2s ease;}
  .cat-tile:hover .icon-badge{transform:scale(1.08) rotate(-3deg);}

  /* ---------- sticky cart / buy bar ---------- */
  .sticky-cart-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;
    border-top:1px solid #EADFC7;box-shadow:0 -8px 24px rgba(92,14,26,.14);
    animation:heroFadeUp .25s ease both;
  }
  .sticky-cart-inner{
    max-width:56rem;margin:0 auto;padding:.75rem 1rem;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
  }
  .sticky-cart-info{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--maroon-deep);font-weight:600;flex-wrap:wrap;}
  .sticky-cart-total{color:var(--maroon);font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;}
  .cart-login-warning{color:#dc2626;font-weight:600;font-size:.85rem;}
  body.has-sticky-cart-bar{padding-bottom:72px;}
  @media (max-width:480px){
    .sticky-cart-inner{padding:.6rem .8rem;}
    .sticky-cart-info{font-size:.78rem;}
  }

  /* ---------- decorative side fireworks ---------- */
  .fireworks-side{position:fixed;top:0;right:0;width:150px;height:100vh;pointer-events:none;z-index:35;overflow:hidden;}
  @media (max-width:900px){.fireworks-side{display:none;}}
  .fw-burst{position:absolute;right:70px;width:0;height:0;}
  .fw-particle{
    position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
    transform:rotate(var(--angle)) translateX(0) scale(1);
    animation:fwPop linear forwards;opacity:0;
  }
  @keyframes fwPop{
    0%{opacity:1;transform:rotate(var(--angle)) translateX(0) scale(1);}
    75%{opacity:1;}
    100%{opacity:0;transform:rotate(var(--angle)) translateX(50px) scale(.3);}
  }

  .feature-tile{
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:10px;padding:1.75rem 1.25rem;
  }

  .card{overflow:hidden;transition:box-shadow .18s ease;}
  .card:hover{box-shadow:0 12px 28px rgba(92,14,26,.12);}

  .pop-in{animation:popIn .35s ease both;}

  @media (max-width:768px){
    .hide-mobile{display:none;}
  }

  /* ---------- Diwali background for auth pages (login/signup/forgot) ---------- */
  .auth-page{position:relative;overflow:hidden;background:radial-gradient(ellipse at top, #FFF6E7 0%, #FBEFD6 55%, #F5DFA9 100%);}
  .auth-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .auth-bg .rangoli{animation:rangoliSpin 50s linear infinite;}
  .auth-bg .rangoli.spin-rev{animation-direction:reverse;}
  .auth-diya{position:absolute;font-size:2.1rem;opacity:.65;animation:diyaFloat 5s ease-in-out infinite, flicker 2.6s ease-in-out infinite;}
  .auth-spark{position:absolute;font-size:1rem;opacity:0;animation:floatSparkle linear infinite;}
  .auth-page .card{position:relative;z-index:1;}
  @keyframes diyaFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
  @keyframes rangoliSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  /* colorful cracker bursts scattered in the auth background */
  .auth-cracker{position:absolute;width:0;height:0;}
  .auth-cracker span{
    position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;
    transform:rotate(var(--angle)) translateX(0) scale(.5);
    animation:crackerPop 2.4s ease-in-out infinite;animation-delay:var(--delay,0s);opacity:0;
  }
  @keyframes crackerPop{
    0%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.5);}
    18%{opacity:1;transform:rotate(var(--angle)) translateX(8px) scale(1);}
    65%{opacity:.85;}
    100%{opacity:0;transform:rotate(var(--angle)) translateX(44px) scale(.3);}
  }
  @media (max-width:640px){
    .auth-diya{font-size:1.5rem;}
  }