/* =====================================================================
   ZULI WOW — luxury motion & micro-interactions (Tier 1 + Tier 2).
   Additive only. GPU-friendly (transform/opacity). Honors reduced-motion.
   ===================================================================== */
:root{
  --zw-ease:cubic-bezier(.22,.61,.36,1);
  --zw-spring:cubic-bezier(.34,1.56,.64,1);
  --zw-gold:#C08A4A; --zw-gold-lt:#E3BE86; --zw-gold-dk:#7A5323;
  --zw-cream:#F7F0E6; --zw-cream-2:#EFE5D8; --zw-ink:#2a1d12;
}

/* ---------- 1) App-like page transitions (Chrome/Edge/Android) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:zwVtOut .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:zwVtIn .34s var(--zw-ease) both; }
@keyframes zwVtOut{ to{ opacity:0; } }
@keyframes zwVtIn{ from{ opacity:0; transform:translate3d(0,12px,0); } }
::view-transition-group(zuli-pimg){ animation-duration:.45s; animation-timing-function:var(--zw-ease); }
::view-transition-old(zuli-pimg), ::view-transition-new(zuli-pimg){ animation-duration:.45s; border-radius:14px; overflow:hidden; }

/* ---------- 2) Skeleton loading cards ---------- */
.z-skel{
  border-radius:16px; background:#fff; border:1px solid rgba(236,227,215,.9);
  padding:12px; display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.z-skel i{ display:block; border-radius:10px; }
.z-skel .zs-img{ aspect-ratio:1/1; width:100%; }
.z-skel .zs-l1{ height:14px; width:80%; margin:6px auto 0; }
.z-skel .zs-l2{ height:12px; width:55%; margin:0 auto; }
.z-skel .zs-b{ height:40px; width:100%; border-radius:10px; margin-top:auto; }
.z-skel i, #under99Container:empty::before, #under99Page:empty::before{
  background:linear-gradient(100deg,var(--zw-cream-2) 30%,#fbf6ef 50%,var(--zw-cream-2) 70%);
  background-size:200% 100%; animation:zwSkel 1.2s linear infinite;
}
.trending-container .z-skel{ flex:0 0 150px; min-width:150px; height:230px; }
#under99Container:empty::before, #under99Page:empty::before{
  content:""; display:block; height:220px; width:100%; border-radius:16px; grid-column:1/-1;
}
@keyframes zwSkel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- 3) Add-to-cart "✓ Added" moment ---------- */
.zw-added{
  background:linear-gradient(100deg,#2f7d4f,#3f9d66) !important; color:#fff !important;
  border-color:transparent !important;
}
.zw-added .zw-tick{ display:inline-block; animation:zwTick .45s var(--zw-spring) both; }
@keyframes zwTick{ from{ transform:scale(.3) rotate(-25deg); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- 4) Desktop sticky buy bar (product page) ---------- */
#zwBuyBar{
  position:fixed; left:50%; bottom:22px; z-index:950;
  display:flex; align-items:center; gap:14px;
  padding:10px 10px 10px 12px; border-radius:18px;
  background:rgba(255,253,250,.96); border:1px solid rgba(192,138,74,.28);
  box-shadow:0 18px 50px rgba(42,29,18,.18);
  transform:translate3d(-50%,140%,0); opacity:0;
  transition:transform .45s var(--zw-ease), opacity .3s ease;
  max-width:min(760px, calc(100vw - 40px));
}
#zwBuyBar.show{ transform:translate3d(-50%,0,0); opacity:1; }
#zwBuyBar img{ width:46px; height:46px; border-radius:10px; object-fit:cover; background:var(--zw-cream-2); }
#zwBuyBar .zw-bb-txt{ min-width:0; display:flex; flex-direction:column; }
#zwBuyBar .zw-bb-name{ font:600 14px/1.3 'Poppins',sans-serif; color:var(--zw-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
#zwBuyBar .zw-bb-price{ font:700 14px/1.3 'Poppins',sans-serif; color:var(--zw-gold); }
#zwBuyBar button{
  border:0; cursor:pointer; border-radius:12px; padding:12px 18px;
  font:600 14px 'Poppins',sans-serif; white-space:nowrap;
  transition:transform .2s var(--zw-ease), box-shadow .2s ease;
}
#zwBuyBar .zw-bb-add{ background:#fff; color:var(--zw-gold-dk); border:1.5px solid var(--zw-gold); }
#zwBuyBar .zw-bb-buy{ background:linear-gradient(100deg,var(--zw-gold-dk),var(--zw-gold),var(--zw-gold-lt)); color:#fff; }
#zwBuyBar button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(168,127,46,.28); }
@media (max-width:768px){ #zwBuyBar{ display:none !important; } }

/* ---------- 5) Search: popular panel + gold highlight ---------- */
mark.search-highlight{ background:linear-gradient(transparent 58%, rgba(227,190,134,.55) 0) !important; color:inherit !important; padding:0 1px; border-radius:2px; }
.zw-pop{ padding:12px 14px 14px; }
.zw-pop-h{ font:600 11px 'Poppins',sans-serif; letter-spacing:1.6px; text-transform:uppercase; color:#9a7a55; margin:2px 0 10px; }
.zw-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.zw-chip{
  border:1px solid rgba(192,138,74,.35); background:#fffaf3; color:var(--zw-ink);
  border-radius:999px; padding:7px 13px; font:500 13px 'Poppins',sans-serif; cursor:pointer;
  transition:background .2s ease, transform .2s var(--zw-ease), border-color .2s ease;
}
.zw-chip:hover{ background:#f6ead8; border-color:var(--zw-gold); transform:translateY(-1px); }
#suggestionsBox.zw-anim{ animation:zwDrop .22s var(--zw-ease) both; transform-origin:top center; }
@keyframes zwDrop{ from{ opacity:0; transform:translate3d(0,-6px,0) scale(.985); } }

/* ---------- 6) Gold light + soft tilt on cards (mouse only) ---------- */
@media (hover:hover) and (pointer:fine){
  .card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:radial-gradient(420px circle at var(--zx,50%) var(--zy,0%), rgba(227,190,134,.22), transparent 42%);
    opacity:0; transition:opacity .35s ease;
  }
  .card.zw-lit::after{ opacity:1; }
  .card.zw-lit{ box-shadow:0 22px 50px rgba(122,83,35,.18), 0 0 0 1px rgba(192,138,74,.35) !important; }
}

/* ---------- 7) Hero: letter-by-letter reveal + parallax video ---------- */
.hero-content h1 z-w{ display:inline-block; white-space:nowrap; }
.hero-content h1 z-l{
  display:inline-block; opacity:0; transform:translate3d(0,.45em,0) rotate(4deg);
  animation:zwLetter .75s var(--zw-ease) forwards;
  animation-delay:calc(var(--i) * 38ms + 250ms);
}
@keyframes zwLetter{ to{ opacity:1; transform:none; } }
.hero-content h1 > span.zw-gold{
  animation:goldShimmer 5.5s linear infinite, zwGoldIn .9s var(--zw-ease) .75s both;
}
@keyframes zwGoldIn{ from{ opacity:0; transform:translate3d(0,.35em,0); } to{ opacity:1; transform:none; } }
@supports (animation-timeline: scroll()){
  @media (min-width:769px){
  .hero-video{
    animation:heroFade 1.8s ease both, zwParallax linear both;
    animation-timeline:auto, scroll(root);
    animation-range:normal, 0 100vh;
  }
  }
  @keyframes zwParallax{ from{ transform:translate3d(0,0,0) scale(1.03); } to{ transform:translate3d(0,28vh,0) scale(1.1); } }
}

/* ---------- 8) Second-look image on hover ---------- */
.card .product-img.zw-swap{ transition:opacity .22s ease, transform .6s var(--zw-ease) !important; }
.card .product-img.zw-fade{ opacity:.25; }

/* ---------- 9) Shade picker: pop + colour halo ---------- */
.shade.zw-pop-shade{ animation:zwShadePop .42s var(--zw-spring); }
@keyframes zwShadePop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.28); } 100%{ transform:scale(1); } }
.product-image-box.zw-halo{ transition:box-shadow .6s var(--zw-ease); box-shadow:0 30px 80px -26px var(--zw-shade, rgba(192,138,74,.5)) !important; }

/* ---------- 10) Price drop: animated strike + count-down ---------- */
#productPrice .zw-strike{ position:relative; text-decoration:none !important; }
#productPrice .zw-strike::after{
  content:""; position:absolute; left:-2px; right:-2px; top:52%; height:2px; border-radius:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  animation:zwStrike .5s var(--zw-ease) .15s forwards;
}
@keyframes zwStrike{ to{ transform:scaleX(1); } }
#productPrice .zw-off{ display:inline-block; animation:zwOff .5s var(--zw-spring) .75s both; }
@keyframes zwOff{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }

/* ---------- 11) Branded empty states ---------- */
.z-empty{ text-align:center; padding:26px 18px; animation:zwRise .5s var(--zw-ease) both; }
.z-empty-ic{
  width:84px; height:84px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:38px;
  background:radial-gradient(circle at 30% 30%, #fff, var(--zw-cream-2));
  box-shadow:0 12px 30px rgba(122,83,35,.15), inset 0 0 0 1px rgba(192,138,74,.25);
  animation:zwFloat 3.2s ease-in-out infinite;
}
.z-empty h4{ font:700 20px/1.3 'Playfair Display',serif; color:var(--zw-ink); margin:0 0 6px; }
.z-empty p{ font:400 13.5px/1.6 'Poppins',sans-serif; color:#8a7560; margin:0 auto 16px; max-width:280px; }
.z-empty-btn{
  display:inline-block; padding:12px 26px; border-radius:999px; text-decoration:none; cursor:pointer; border:0;
  background:linear-gradient(100deg,var(--zw-gold-dk),var(--zw-gold),var(--zw-gold-lt)); color:#fff !important;
  font:600 14px 'Poppins',sans-serif; letter-spacing:.3px; box-shadow:0 10px 24px rgba(168,127,46,.3);
  transition:transform .2s var(--zw-ease), box-shadow .2s ease;
}
.z-empty-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(168,127,46,.38); }
.z-empty-btn:active{ transform:scale(.96); }
@keyframes zwRise{ from{ opacity:0; transform:translate3d(0,12px,0); } }
@keyframes zwFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-6px,0); } }

/* ---------- Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .hero-content h1 z-l, .hero-content h1 > span.zw-gold{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero-video{ animation:none !important; }
  .z-skel i, .z-empty-ic, .z-empty, .shade.zw-pop-shade, #productPrice .zw-off{ animation:none !important; }
  #productPrice .zw-strike::after{ animation:none !important; transform:scaleX(1); }
  #zwBuyBar{ transition:none !important; }
}

/* NAVBAR — solid ivory that blends with the phone status bar (theme-color #f5f0ea).
   The old 82% see-through bar turned grey over the dark hero once blur was off. */
nav.navbar{
  background:#f5f0ea !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:0 6px 18px -12px rgba(42,26,16,.35) !important;
}
nav.navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(184,137,59,.55) 20%,rgba(217,179,106,.8) 50%,rgba(184,137,59,.55) 80%,transparent);
}