/* =========================================================
   BHUMITVA — From Soil to Soul
   Global stylesheet. Only rules that Tailwind utility classes
   cannot express live here (custom @font-face, keyframes,
   custom scrollbar, gradient overlays, marquee, custom cursor,
   print styles, header scroll state, etc).
   ========================================================= */

/* ---------- Brand color custom properties ---------- */
:root {
  --color-olive: #2B3210;
  --color-maroon: #81192A;
  --color-orange: #DE6E27;
  --color-forest: #153A28;
  --color-sand: #FFD67B;
  --color-bg: #F8F7F3;
  --color-ink: #222222;
  --header-h: 92px;
  --header-h-scrolled: 68px;
}

/* ---------- Font faces (placeholders — drop licensed files into /assets/fonts/) ---------- */
@font-face {
  font-family: 'TAN Tangkiwood';
  src: url('../fonts/tan-tangkiwood.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'The Something Script';
  src: url('../fonts/the-something-script.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('../fonts/garet.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

/* ---------- Font utility classes (mirrors tailwind.config.js fontFamily.*) ---------- */
.font-heading { font-family: 'TAN Tangkiwood', 'Fraunces', serif; }
.font-accent  { font-family: 'The Something Script', 'Dancing Script', cursive; }
.font-body    { font-family: 'Garet', 'Poppins', sans-serif; }

html, body { font-family: 'Garet', 'Poppins', sans-serif; background-color: var(--color-bg); color: var(--color-ink); scroll-behavior: auto; }

/* ---------- Lenis smooth scroll requirements ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-olive); border-radius: 999px; border: 2px solid var(--color-bg); }
* { scrollbar-width: thin; scrollbar-color: var(--color-olive) var(--color-bg); }

/* ---------- Header ---------- */
.site-header {
  height: var(--header-h);
  transition: height .4s var(--tw-ease, cubic-bezier(.65,0,.35,1)), background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.site-header.header-scrolled {
  height: var(--header-h-scrolled);
  background-color: rgba(248, 247, 243, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -15px rgba(43,50,16,.35);
  border-bottom-color: transparent;
}
.site-header.header-transparent { background-color: transparent; }
.site-header .logo-mark-dark { display: block; }
.site-header .logo-mark-light { display: none; }
.site-header.header-scrolled .logo-mark-dark,
.site-header.header-solid .logo-mark-dark { display: block; }
.site-header.header-scrolled .logo-mark-light,
.site-header.header-solid .logo-mark-light { display: none; }
.site-header.header-transparent:not(.header-scrolled) .logo-mark-dark { display: none; }
.site-header.header-transparent:not(.header-scrolled) .logo-mark-light { display: block; }
.site-header.header-transparent:not(.header-scrolled) .nav-link,
.site-header.header-transparent:not(.header-scrolled) .icon-btn { color: #F8F7F3; }

/* Mega menu
   The positioning wrapper (.has-mega > div — a plain Tailwind-only div with
   no opacity/visibility of its own, see about.html/services.html/etc.) sits
   right under the whole nav even while its .mega-menu child is invisible,
   because `visibility: hidden` still reserves layout space. Without
   pointer-events:none there, that big empty 760px box silently intercepts
   hover anywhere underneath it and keeps the menu propped open — this is
   what makes it look like "hovering anywhere" opens the dropdown. */
.has-mega > div { pointer-events: none; }
.has-mega:hover > div, .has-mega > div:has(.mega-menu.is-open) { pointer-events: auto; }
.mega-menu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--tw-ease, ease), transform .3s ease, visibility .3s; }
.has-mega:hover .mega-menu, .mega-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Offcanvas mobile menu */
.offcanvas-panel { transform: translateX(100%); transition: transform .5s cubic-bezier(.65,0,.35,1); }
.offcanvas-panel.is-open { transform: translateX(0); }
.offcanvas-overlay { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.offcanvas-overlay.is-open { opacity: 1; visibility: visible; }

/* Search slide-down */
.search-panel { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.65,0,.35,1); }
.search-panel.is-open { max-height: 140px; overflow: visible; }

/* Mini cart drawer */
.drawer-panel { transform: translateX(100%); transition: transform .5s cubic-bezier(.65,0,.35,1); }
.drawer-panel.is-open { transform: translateX(0); }
.drawer-overlay { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* Mobile filter bottom sheet (shop.html) — below lg the panel becomes a
   fixed sheet that slides + fades up from the bottom; at lg and above these
   rules simply don't apply and the element sits in the page's normal flow
   (sticky sidebar) via its own Tailwind lg: classes. */
.filter-overlay { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.filter-overlay.is-open { opacity: 1; visibility: visible; }
@media (max-width: 1023px) {
  .filter-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    max-height: 85vh;
    display: flex; flex-direction: column;
    background: var(--color-bg);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -10px 40px -12px rgba(43,50,16,.35);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .45s ease;
  }
  .filter-panel.is-open { transform: translateY(0); opacity: 1; }
  /* Content scrolls; the Apply Filters button (.filter-panel-footer) stays
     pinned at the bottom of the sheet instead of scrolling away with it. */
  .filter-panel-scroll { overflow-y: auto; min-height: 0; }
  .filter-panel-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(43,50,16,.1);
    background: var(--color-bg);
  }
}

/* ---------- Offer marquee bar (fixed above the header) ---------- */
.marquee-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2.25rem; z-index: 40; overflow: hidden; }
.marquee-track { display: flex; align-items: center; height: 100%; width: max-content; animation: marquee-scroll 26s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--color-orange), var(--color-maroon)); z-index: 60; }

/* ---------- Floating action buttons ---------- */
.fab-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.fab-btn { width: 3.1rem; height: 3.1rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; box-shadow: 0 10px 25px -8px rgba(0,0,0,.35); }
.fab-top { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.8); transition: all .35s cubic-bezier(.65,0,.35,1); }
.fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fab-whatsapp { animation: wa-pulse 2.4s infinite; }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Hover lift micro-interaction ---------- */
.hover-lift { transition: transform .4s cubic-bezier(.65,0,.35,1), box-shadow .4s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(43,50,16,.35); }

/* ---------- Product image hover swap ---------- */
.product-media { position: relative; overflow: hidden; }
.product-media img { transition: transform .4s ease; }
.product-media:hover img { transform: scale(1.04); }
.product-card { cursor: pointer; }

/* ---------- Image placeholder (no real assets yet) ---------- */
.img-placeholder {
  background: repeating-linear-gradient(135deg, #EDEBE3, #EDEBE3 12px, #E4E1D6 12px, #E4E1D6 24px);
  display: flex; align-items: center; justify-content: center; color: #9C9686;
}

/* ---------- Hero gradient overlay ---------- */
.hero-overlay { background: linear-gradient(180deg, rgba(21,58,40,.55) 0%, rgba(21,58,40,.75) 55%, rgba(21,58,40,.92) 100%); }
.overlay-dark { background: linear-gradient(180deg, rgba(43,50,16,.2) 0%, rgba(21,58,40,.85) 100%); }
.gradient-band { background: linear-gradient(120deg, var(--color-forest), var(--color-olive)); }
.gradient-sand { background: linear-gradient(120deg, var(--color-sand), #FFEBB8); }

/* ---------- Angled color panel (home.html hero) ---------- */
.angled-panel { clip-path: polygon(0 0, 62% 0, 42% 100%, 0 100%); }
.angled-panel-edge { clip-path: polygon(62% 0, 63.4% 0, 43.4% 100%, 42% 100%); }

/* ---------- Cycling headline word ---------- */
.word-cycle { transition: opacity .35s ease, transform .35s ease; display: inline-block; }
.word-cycle.is-swapping { opacity: 0; transform: translateY(6px); }

/* ---------- Homepage hero slider ---------- */
.hero-swiper, .hero-swiper .swiper-slide { height: 100%; }
.hero-kenburns { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.hero-nav-prev, .hero-nav-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(248,247,243,.12); border: 1px solid rgba(248,247,243,.3);
  backdrop-filter: blur(6px); transition: background-color .3s ease, transform .3s ease;
}
.hero-nav-prev:hover, .hero-nav-next:hover { background: var(--color-orange); border-color: var(--color-orange); }
.hero-nav-prev { left: 1.25rem; }
.hero-nav-next { right: 1.25rem; }
@media (min-width: 1024px) { .hero-nav-prev { left: 2.5rem; } .hero-nav-next { right: 2.5rem; } }
.hero-fraction { font-family: 'TAN Tangkiwood', 'Fraunces', serif; letter-spacing: .05em; }
.hero-fraction.swiper-pagination-fraction { left: auto; width: auto; text-align: right; }
.hero-fraction .swiper-pagination-current { font-size: 1.5rem; color: var(--color-sand); }
.hero-fraction .swiper-pagination-total { opacity: .6; }

/* ---------- Decorative dot-grid pattern (used behind Why Choose section) ---------- */
.dot-pattern { background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size: 22px 22px; }

/* ---------- Numbered feature card (Why Choose BHUMITVA) ---------- */
.feature-card { transition: background-color .35s ease, border-color .35s ease, transform .35s ease; }
.feature-card:hover { transform: translateY(-4px); }
.feature-card .feature-icon { transition: background-color .35s ease, color .35s ease; }

/* ---------- Journey timeline connector ---------- */
.journey-line { position: absolute; top: 2rem; left: 8%; right: 8%; height: 2px; background: rgba(255,255,255,.15); }
.journey-line-fill { height: 100%; background: linear-gradient(90deg, var(--color-sand), var(--color-orange)); }

/* ---------- Why Choose: interactive expanding fan panels (desktop) ---------- */
.fan-row { display: flex; gap: 0.75rem; height: 32rem; }
.fan-panel { position: relative; flex: 1 1 0%; min-width: 0; border-radius: 1.25rem; overflow: hidden; cursor: pointer; transition: flex-grow .6s cubic-bezier(.4,0,.2,1); }
.fan-panel:hover, .fan-panel:focus-within { flex-grow: 3.2; }
.fan-panel .fan-collapsed { transition: opacity .3s ease; }
.fan-panel:hover .fan-collapsed, .fan-panel:focus-within .fan-collapsed { opacity: 0; }
.fan-panel .fan-expanded { opacity: 0; transition: opacity .4s ease .1s; }
.fan-panel:hover .fan-expanded, .fan-panel:focus-within .fan-expanded { opacity: 1; }
.fan-panel img { transition: transform .8s cubic-bezier(.4,0,.2,1); }
.fan-panel:hover img { transform: scale(1.08); }

/* ---------- Category tab buttons (Shop the Collection) ---------- */
.cat-tab-btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.cat-tab-btn.is-active { background: var(--color-maroon); color: #fff; border-color: var(--color-maroon); }

/* ---------- Service card top accent reveal ---------- */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--color-orange), var(--color-maroon));
  transition: width .45s cubic-bezier(.65,0,.35,1);
}
.service-card:hover::before { width: 100%; }

/* ---------- Marquee (Instagram / logos strip) ---------- */
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Split text reveal (word spans injected via app.js) ---------- */
.split-word { display: inline-block; overflow: hidden; }
.split-word > span { display: inline-block; transform: translateY(110%); }

/* ---------- Section heading underline flourish ---------- */
.heading-flourish::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: .9rem;
  background: var(--color-orange);
  border-radius: 999px;
}
.heading-flourish.center::after { margin-left: auto; margin-right: auto; }

/* ---------- Star rating ---------- */
.stars-row i { color: var(--color-sand); }

/* ---------- Custom cursor for hero (desktop only) ---------- */
@media (min-width: 1024px) {
  .cursor-dot { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 999px; background: var(--color-orange); pointer-events: none; z-index: 70; transform: translate(-50%,-50%); mix-blend-mode: difference; opacity: 0; transition: opacity .3s ease; }
  .cursor-dot.is-active { opacity: 1; }
}

/* ---------- Accordion ---------- */
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.65,0,.35,1); }
.accordion-item.is-open .accordion-panel { max-height: 600px; }
.accordion-item .accordion-icon { transition: transform .4s ease; }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }

/* ---------- Checkout payment method description reveal ---------- */
.payment-option .payment-desc { display: none; }
.payment-option:has(:checked) .payment-desc { display: block; }

/* ---------- Range slider (shop filter) ---------- */
input[type="range"].brand-range { accent-color: var(--color-maroon); }

/* ---------- Fancybox brand tweaks ---------- */
.fancybox__container { --fancybox-bg: rgba(21,58,40,.94); }

/* ---------- Swiper pagination/nav brand tweaks ---------- */
.swiper-pagination-bullet-active { background: var(--color-orange) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--color-maroon) !important; }

/* Bestsellers swiper sits on a dark forest background — its nav arrows and
   pagination dots need light colors instead of the site-wide maroon/black
   defaults, which would be nearly invisible there. */
.bestsellers-swiper .swiper-button-next,
.bestsellers-swiper .swiper-button-prev { color: var(--color-sand) !important; }
.bestsellers-swiper .swiper-pagination-bullet { background: #fff; opacity: .35; }
.bestsellers-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* ---------- Magnetic button anchor (JS lerps the CSS var every frame — see
   initMagneticButtons — so no CSS transition here, that would fight the JS
   easing and make the follow feel laggy instead of smooth) ---------- */
.magnetic-btn { transform: translate(var(--mx, 0), var(--my, 0)); will-change: transform; }

/* ---------- Simple, smooth button hover (site-wide) ----------
   Targets every pill-shaped CTA/icon button across all pages (they all use
   Tailwind's rounded-full utility) without having to touch 30 HTML files.
   A soft lift + eased color swap reads as "smooth"; anything faster/sharper
   or combined with the old 24px magnetic snap read as janky. */
a[class*="rounded-full"]:not(.magnetic-btn),
button[class*="rounded-full"]:not(.magnetic-btn),
a.icon-btn, button.icon-btn {
  transition: background-color .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1),
              border-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1),
              box-shadow .3s cubic-bezier(.4,0,.2,1);
}
a[class*="rounded-full"]:not(.magnetic-btn):hover,
button[class*="rounded-full"]:not(.magnetic-btn):hover,
a.icon-btn:hover, button.icon-btn:hover {
  transform: translateY(-2px);
}
a[class*="rounded-full"]:not(.magnetic-btn):active,
button[class*="rounded-full"]:not(.magnetic-btn):active {
  transform: translateY(0);
}
.magnetic-btn:hover { box-shadow: 0 14px 30px -12px rgba(43,50,16,.35); }

/* ---------- Utility: line clamp fallback ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Stepper (track order) ---------- */
.tracker-step .tracker-dot { transition: background-color .4s ease, border-color .4s ease; }
.tracker-step.is-complete .tracker-dot { background: var(--color-forest); border-color: var(--color-forest); }
.tracker-step.is-complete .tracker-line { background: var(--color-forest); }

/* ---------- Print styles (legal pages) ---------- */
@media print {
  .site-header, .fab-stack, .site-footer, .scroll-progress, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}