:root{
    --blue:#2E5C8A;
    --blue-dark:#1F3F60;
    --mustard:#E8A230;
    --red:#C3402C;
    --olive:#A6AE39;
    --olive-dark:#5C6420;
    --dark-green:#28401F;
    --cream:#F7F1DC;
    --cream-2:#EFE6C4;
    --ink:#1C2415;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
  }
  .font-display{
    font-family:'Fascinate', cursive;
    letter-spacing:0.5px;
  }
  ::selection{background:var(--mustard);color:var(--ink);}

  /* ---------- scroll reveal ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-scale{opacity:0; transform:scale(.9); transition:opacity .6s ease, transform .6s ease;}
  .reveal-scale.in{opacity:1; transform:scale(1);}

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-scale{opacity:1 !important; transform:none !important; transition:none !important;}
    .float, .float2, .float3, .spin-slow{animation:none !important;}
  }

  /* ---------- floating veg ---------- */
  @keyframes floatY{
    0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
    50%{transform:translateY(-18px) rotate(calc(var(--r,0deg) + 4deg));}
  }
  @keyframes floatY2{
    0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
    50%{transform:translateY(16px) rotate(calc(var(--r,0deg) - 5deg));}
  }
  .float{animation:floatY 6s ease-in-out infinite;}
  .float2{animation:floatY2 7s ease-in-out infinite;}
  .float3{animation:floatY 5s ease-in-out infinite;}

  @keyframes spinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .spin-slow{animation:spinSlow 18s linear infinite;}

  .sticker{
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
  }

  /* torn edge divider */
  .torn-bottom{
    position:relative;
  }
  .torn-bottom::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:34px;
    background-repeat:repeat-x; background-size:42px 34px;
    background-image: radial-gradient(circle at 50% 0, transparent 18px, var(--tc, #F7F1DC) 19px);
    z-index:5;
  }

  /* button motion */
  .btn-pop{transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
  .btn-pop:hover{transform:translateY(-4px) rotate(-1deg); box-shadow:0 10px 0 0 rgba(0,0,0,.15);}
  .btn-pop:active{transform:translateY(0) rotate(0deg); box-shadow:0 2px 0 0 rgba(0,0,0,.15);}

  .card-zoom img, .card-zoom .art{transition:transform .5s ease;}
  .card-zoom:hover img, .card-zoom:hover .art{transform:scale(1.08) rotate(1deg);}

  .badge-rot{transform:rotate(-8deg);}
  .badge-rot2{transform:rotate(6deg);}
  .badge-rot3{transform:rotate(-4deg);}

  /* nav underline */
  .nav-link{position:relative;}
  .nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;background:var(--mustard);transition:width .25s ease;border-radius:2px;}
  .nav-link:hover::after{width:100%;}

  /* menu filter pill */
  .pill{transition:all .25s ease;}
  .pill.active{background:var(--blue); color:var(--cream); border-color:var(--blue) !important;}

  /* accordion */
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
  .faq-item.open .faq-a{max-height:280px;}
  .faq-item.open .faq-chevron{transform:rotate(180deg);}
  .faq-chevron{transition:transform .3s ease;}

  /* mobile nav */
  .mobile-nav{transform:translateX(100%); transition:transform .35s cubic-bezier(.65,0,.35,1);}
  .mobile-nav.open{transform:translateX(0);}

  /* cart drawer */
  .cart-drawer{transform:translateX(100%); transition:transform .4s cubic-bezier(.65,0,.35,1);}
  .cart-drawer.open{transform:translateX(0);}
  .overlay{opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .overlay.open{opacity:1; pointer-events:auto;}

  /* loader */
  #loader{position:fixed;inset:0;z-index:9999;background:var(--blue);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease, visibility .5s ease;}
  #loader.hide{opacity:0; visibility:hidden;}
  .loader-veg{animation:loaderBounce 1s ease-in-out infinite;}
  @keyframes loaderBounce{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-22px) scale(1.05);}}

  .marquee-track{display:flex; width:200%; animation:marquee 22s linear infinite;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  .stitch{border:3px dashed rgba(0,0,0,.18);}

  textarea:focus, input:focus, select:focus{outline:none; box-shadow:0 0 0 3px rgba(232,162,48,.5);}

  .qty-btn{transition:transform .15s ease;}
  .qty-btn:active{transform:scale(.85);}