/* =========================================================
   LIVING TRENDS — 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: #362A22;
  --color-maroon: #9C3B2E;
  --color-orange: #C6813C;
  --color-forest: #1F1815;
  --color-sand: #E8C77E;
  --color-bg: #FAF6F0;
  --color-ink: #2A2420;
  --header-h: 92px;
  --header-h-scrolled: 68px;
}

/* ---------- Font utility classes (mirrors tailwind.config.js fontFamily.*) ---------- */
.font-heading {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
}

.font-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-optical-sizing: auto;
}

.font-body {
  font-family: 'Poppins', sans-serif;
}

html,
body {
  font-family: '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 is full-width, fixed at the very top (trust/marquee row
   + nav row stacked inside it, inner content constrained to max-w-7xl
   like the rest of the page), so ITS height is intrinsic to its content
   rather than a fixed var — only the inner .header-row (the actual
   logo/nav/icon line) animates between --header-h and
   --header-h-scrolled, and the trust row collapses away entirely once
   scrolled for the same "shrinks on scroll" effect the old single-row
   header had. */
.site-header {
  transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.site-header .header-row {
  height: var(--header-h);
  transition: height .4s var(--tw-ease, cubic-bezier(.65, 0, .35, 1));
}

.site-header.header-scrolled .header-row {
  height: var(--header-h-scrolled);
}

.site-header .trust-row {
  max-height: 3rem;
  opacity: 1;
  transition: max-height .35s ease, opacity .3s ease, padding .35s ease, border-color .35s ease;
}

.site-header.header-scrolled .trust-row {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  overflow: hidden;
}

.site-header.header-scrolled {
  background-color: rgba(250, 246, 240, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -15px rgba(42, 36, 32, .35);
}

.site-header.header-transparent {
  background-color: transparent;
}

.site-header .logo-mark-dark {
  display: inline-flex;
}

.site-header .logo-mark-light {
  display: none;
}

.site-header.header-scrolled .logo-mark-dark,
.site-header.header-solid .logo-mark-dark {
  display: inline-flex;
}

.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: inline-flex;
}

.site-header.header-transparent:not(.header-scrolled) .nav-link,
.site-header.header-transparent:not(.header-scrolled) .icon-btn {
  color: #FAF6F0;
}

/* 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(42, 36, 32, .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(42, 36, 32, .1);
    background: var(--color-bg);
  }
}

/* ---------- Header trust/marquee row ----------
   Lives inside .site-header itself now (not a separate fixed bar) —
   .trust-row is the shared collapse-on-scroll wrapper (see the Header
   block above); .trust-marquee-track is only used for the
   scrolling-ticker variant (more than 4 items) and is a distinct class
   from the homepage Instagram strip's .marquee-track further down this
   file so the two never fight over the same animation/keyframe rule. */
.trust-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.trust-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(42, 36, 32, .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(31, 24, 21, .55) 0%, rgba(31, 24, 21, .75) 55%, rgba(31, 24, 21, .92) 100%);
}

.overlay-dark {
  background: linear-gradient(180deg, rgba(42, 36, 32, .2) 0%, rgba(31, 24, 21, .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: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(31, 24, 21, .35);
  border: 1px solid rgba(250, 246, 240, .3);
  backdrop-filter: blur(6px);
  transition: background-color .3s ease, transform .3s ease;
}

.hero-nav-prev:hover,
.hero-nav-next:hover {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
}

.hero-nav-prev {
  left: 1.25rem;
}

.hero-nav-next {
  right: 1.25rem;
}

@media (min-width: 1024px) {
  .hero-nav-prev {
    left: 2rem;
  }

  .hero-nav-next {
    right: 2rem;
  }
}

.hero-fraction {
  font-family: 'Fraunces', serif;
  letter-spacing: .05em;
  background: rgba(31, 24, 21, .35);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: .5rem .9rem;
  color: #fff;
}

.hero-fraction.swiper-pagination-fraction {
  left: auto;
  width: auto;
  text-align: right;
}

.hero-fraction .swiper-pagination-current {
  font-size: 1rem;
  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 LIVING TRENDS) ---------- */
.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(31, 24, 21, .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;
}

/* New Arrivals swiper — nav arrows sit inline in the section header (not
   overlaid on the slides) and use our own FA chevron icons instead of
   Swiper's default arrow glyph, so most of Swiper's default button
   positioning/content needs resetting. */
.new-arrivals-swiper .swiper-button-next,
.new-arrivals-swiper .swiper-button-prev {
  position: static;
  margin: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: inherit !important;
}

.new-arrivals-swiper .swiper-button-next::after,
.new-arrivals-swiper .swiper-button-prev::after {
  content: none;
}

.new-arrivals-swiper .swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

/* Reviews (testimonials) swiper — nav arrows + pagination dots sit in a
   centered row below the cards rather than overlaid on the slider, and
   the dots use a maroon "active" treatment instead of the site-wide
   orange default. */
.reviews-swiper .swiper-button-next,
.reviews-swiper .swiper-button-prev {
  position: static;
  margin: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit !important;
}

.reviews-swiper .swiper-button-next::after,
.reviews-swiper .swiper-button-prev::after {
  content: none;
}

.reviews-pagination.swiper-pagination {
  position: static;
  width: auto;
  display: inline-flex;
  align-items: center;
}

.reviews-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--color-ink);
  opacity: .2;
  margin: 0 4px;
  transition: opacity .3s ease, background-color .3s ease, width .3s ease, height .3s ease;
}

.reviews-pagination .swiper-pagination-bullet-active {
  background: var(--color-maroon);
  opacity: 1;
  width: 10px;
  height: 10px;
}

.new-arrivals-fraction .swiper-pagination-current {
  color: var(--color-ink);
  font-weight: 600;
}

.new-arrivals-fraction .swiper-pagination-total {
  color: var(--color-ink);
  opacity: .45;
}

/* ---------- 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(42, 36, 32, .35);
}

/* ---------- Utility: hidden scrollbar (horizontal quick-nav rows) ---------- */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ---------- 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;
  }
}


.new-arrivals-fraction {
  display: none !important;
}