/* ============================================================
   Modern layer (update 146): sticky glass header, hero zari-thread
   entrance, icon buttons, mobile bottom navigation, focus rings.
   Loaded after style.css; only adds/overrides, never replaces it.
   ============================================================ */
:root { --zari: #b8923a; --zari-soft: #e9d9ae; }

/* sticky header that condenses on scroll */
/* the blur sits on a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside it */
.site-header { position: sticky; top: 0; z-index: 60; background: transparent; transition: box-shadow .25s; isolation: isolate; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246,243,234,.9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); transition: background .25s; }
.site-header .wrap { transition: padding .25s; }
.site-header .brand-logo img, .site-header .brand img { transition: height .25s, width .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(14,68,41,.45); }
.site-header.is-scrolled::before { background: rgba(246,243,234,.97); }
.site-header.is-scrolled .wrap { padding-top: 7px; padding-bottom: 7px; }
.header-actions .cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: background .2s, color .2s; }
.header-actions .cart-link:hover { background: rgba(20,96,58,.08); color: var(--maroon); }
.header-actions .cart-link .count { animation: tr-pop .4s ease-out; }
@keyframes tr-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* icon buttons */
.btn .bi { width: 17px; height: 17px; flex: none; margin-right: 8px; vertical-align: -3px; }
.hero-cta .btn { display: inline-flex; align-items: center; }

/* hero entrance: copy rises line by line while a zari thread is drawn under the headline (home page only, once) */
.zari-thread { display: block; width: min(320px, 70%); height: 16px; margin: -6px 0 18px; overflow: visible; }
.zari-thread path { fill: none; stroke: var(--zari); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 0; }
.zari-thread circle { fill: var(--zari); }
.js .page-home .hero-copy > * { opacity: 0; transform: translateY(18px); animation: tr-rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.js .page-home .hero-copy > :nth-child(1) { animation-delay: .05s; }
.js .page-home .hero-copy > :nth-child(2) { animation-delay: .18s; }
.js .page-home .hero-copy > :nth-child(3) { animation-delay: .32s; }
.js .page-home .hero-copy > :nth-child(4) { animation-delay: .5s; }
.js .page-home .hero-copy > :nth-child(5) { animation-delay: .64s; }
.js .page-home .zari-thread path { stroke-dashoffset: 360; animation: tr-draw 1.6s .45s cubic-bezier(.6,.1,.2,1) forwards; }
.js .page-home .zari-thread circle { opacity: 0; animation: tr-fade .4s 1.9s forwards; }
@keyframes tr-rise { to { opacity: 1; transform: none; } }
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-fade { to { opacity: 1; } }

/* keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2.5px solid var(--zari); outline-offset: 2px; border-radius: 4px; }

/* mobile bottom navigation */
.mnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -18px rgba(14,68,41,.5); }
  .mnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--muted); text-decoration: none; font-size: .66rem; font-weight: 600; letter-spacing: .02em; }
  .mnav a svg { width: 23px; height: 23px; transition: transform .2s; }
  .mnav a.on { color: var(--maroon); }
  .mnav a.on::before { content: ""; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--zari); }
  .mnav a:active svg { transform: scale(.88); }
  .mnav .count { position: absolute; top: 0; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--zari); color: #fff; font-size: .62rem; line-height: 17px; text-align: center; animation: tr-pop .4s ease-out; }
  /* these three live in the bottom bar on phones */
  .header-actions a[aria-label="Track your order"], .header-actions a[aria-label="Account"], .header-actions a[aria-label="Cart"] { display: none; }
  .header-actions { margin-left: auto; }
  .nav { padding-bottom: 110px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(80px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .js .page-home .hero-copy > *, .js .page-home .zari-thread path, .js .page-home .zari-thread circle { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .site-header, .site-header .wrap, .mnav a svg { transition: none; }
}