/* Marchvet - overrides.css
   Applied AFTER the Nuxt CSS bundles. Sets up:
   1. Preloader animation (counter + line + split-panel reveal + logo assembly)
   2. Scroll-reveal / line-reveal (replaces GSAP ScrollTrigger + SplitText)
   3. Parallax base (replaces GSAP parallax)
   4. Mobile menu staggered item animation
   5. Scrollbar visibility
   6. Body scroll lock helper
   7. Header state transitions

   All easings/durations match the original GSAP specs (see ANIMATION-SPEC.md).
   */

/* ============================================================
   1. PRELOADER ANIMATION
   Matches the original GSAP timeline from CVLmCYPL.js:
   a) Counter 00→99 (expo.out, 0.6s per step, ~2.1s total)
   b) Logo halves slide in (stagger 0.1s, duration 1.4s, expo.inOut)
   c) Line grows (scaleY 0→1)
   d) Line fades (opacity 0, power1.out)
   e) Logo halves exit (y: +105% / -105%, stagger 0.1s)
   f) BG panels slide away (scaleY 0, stagger 0.1s)
   ============================================================ */

.preloader {
  display: flex !important;
}

/* Number strips: expo.out easing, 0.6s per step (matches GSAP) */
.preloader .number-wrapper .left-inner,
.preloader .number-wrapper .right-inner {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo halves: expo.inOut, 1.4s, stagger 0.1s */
.preloader .logo__left,
.preloader .logo__right {
  transition: transform 1.4s cubic-bezier(0.87, 0, 0.13, 1);
}
.preloader.is--logo-in .logo__left {
  transform: translateY(0);
  transition-delay: 0s;
}
.preloader.is--logo-in .logo__right {
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* Spinner fades out when logo comes in */
.preloader .loading {
  transition: opacity 0.4s ease-out;
}
.preloader.is--logo-in .loading {
  opacity: 0;
}

/* Vertical line: grows scaleY 0→1, then fades.
   Line grow starts at 95% of logo-in phase. */
.preloader .line {
  transform: translate(-50%, 0) scaleY(0);
  transform-origin: top;
  transition:
    transform 1s cubic-bezier(0.87, 0, 0.13, 1),
    opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.preloader.is--line-growing .line {
  transform: translate(-50%, 0) scaleY(1);
}
.preloader.is--line-fading .line {
  opacity: 0;
}

/* Logo halves exit: left slides down (+105%), right slides up (-105%) */
.preloader.is--logo-out .logo__left {
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
  transition-delay: 0s;
}
.preloader.is--logo-out .logo__right {
  transform: translateY(-105%);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
  transition-delay: 0.1s;
}

/* BG panels: scaleY 0, stagger 0.1s, starts at 30% of logo-out */
.preloader.is--exiting .bg__left,
.preloader.is--exiting .bg__right {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s cubic-bezier(0.87, 0, 0.13, 1);
}
.preloader.is--exiting .bg__left {
  transition-delay: 0s;
}
.preloader.is--exiting .bg__right {
  transition-delay: 0.1s;
}

/* Fully done: remove from layout entirely. */
.preloader.is--done {
  display: none !important;
}

/* ============================================================
   2. LINE REVEAL (replaces GSAP SplitText + linereveal directive)
   Original spec: yPercent:105, stagger:0.15, duration:1.4, ease:expo.out
   ============================================================ */

/* All reveal elements start hidden.
   data-split elements use translateY(105%) for mask-reveal effect.
   Other reveal elements use translateY(40px) for subtle fade-up. */
[data-split] {
  opacity: 0;
  transform: translateY(105%);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[reveal-notrigger]:not([data-split]),
[reveal-delay]:not([data-split]),
[reveal-waitpreloader]:not([data-split]) {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* When revealed, animate to visible */
.is--revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger via --reveal-i variable (set by JS for data-split parents) */
.is--revealed[style*="--reveal-i"] {
  transition-delay: calc(var(--reveal-i) * 0.15s);
}

/* ELEMENTS WITH EXISTING TRANSFORMS:
   These elements use transform for positioning. Our reveal CSS must
   preserve their X transform while adding/removing the Y reveal offset. */

/* ethos__title-2: transform: translate(40%) — shifts right (DESKTOP ONLY)
   Reference applies translate(40%) only inside @media (min-width:767.99px).
   On mobile, no horizontal offset — just left-aligned text. */
@media (min-width: 768px) {
  .ethos__title-2[data-split] {
    transform: translate(40%, 105%) !important;
  }
  .ethos__title-2[data-split].is--revealed {
    transform: translate(40%, 0) !important;
  }
}

/* MOBILE: only Y reveal offset, no X shift */
@media (max-width: 767.98px) {
  .ethos__title-2[data-split] {
    transform: translateY(105%) !important;
  }
  .ethos__title-2[data-split].is--revealed {
    transform: translateY(0) !important;
  }
  /* Pull ethos image down slightly so it doesn't hide the text.
       Reference uses margin-top:-15% which is too aggressive for our layout. */
  #ethos .ethos__image {
    margin-top: -5% !important;
  }
}

/* Reduce line spacing for "Radical Transparency. Hide Nothing." titles.
   Reference inherits line-height:1.1 from global h1,h2 rule, but at 10vw/17vw
   font sizes the gaps look too large. Tighten to 0.9. */
.ethos__title,
.ethos__title-2 {
  line-height: 0.9 !important;
}

/* connect__title-1: transform: translate(-50%) — centers horizontally.
   Reference has data-split on connect__title-1 only (NOT on connect__title-2). */
.connect__title-1[data-split] {
  transform: translate(-50%, 105%) !important;
}
.connect__title-1[data-split].is--revealed {
  transform: translate(-50%, 0) !important;
}

/* explore__title: Reference does NOT have data-split, but GSAP targets it
   directly with SplitText({type:"lines"}) + yPercent:120 (not 105).
   We animate it via a dedicated JS function (initExploreTitleReveal) that
   wraps each line in .masking-text and applies the 120% offset. */
.explore__title .masking-text {
  display: block;
  overflow: hidden;
}
.explore__title .masking-text > * {
  display: block;
  transform: translateY(120%);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); /* expo.out */
  transition-delay: calc(var(--line-i, 0) * 0.15s);
}
.explore__title.is--revealed .masking-text > * {
  transform: translateY(0);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-split],
  [reveal-notrigger],
  [reveal-waitpreloader],
  [reveal-delay] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   2b. HERO CTA ANIMATION (matches SectionIntro GSAP timeline)
   scale:0→1, opacity:0→1, duration:1.2, ease:power4.out, delay:0.2
   Then text: yPercent:-105→0 at 25% of CTA animation
   ============================================================ */

.intro__cta[reveal-waitpreloader] {
  opacity: 0;
  transform: translate(-50%, 0) scale(0);
  transition:
    opacity 1.2s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s,
    transform 1.2s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s;
}
.intro__cta[reveal-waitpreloader].is--revealed {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

/* CTA text: mask reveal from top (yPercent:-105) at 25% of CTA anim */
.intro__cta .masking-text {
  overflow: hidden;
}
.intro__cta .masking-text .text {
  transform: translateY(-105%);
  transition: transform 1.2s cubic-bezier(0.17, 0.84, 0.44, 1);
  transition-delay: calc(0.2s + 0.3s); /* 0.2s delay + 25% of 1.2s */
}
.intro__cta[reveal-waitpreloader].is--revealed .masking-text .text {
  transform: translateY(0) !important;
}

/* ============================================================
   2c. INGREDIENTS TITLE — "skincare." word
   In the reference, "skincare." breaks to its own line and aligns
   with the description paragraph below. No nowrap — let it break naturally.
   ============================================================ */

/* The underline border animation: scaleX(0) → scaleX(1) when revealed. */
.ingredients__title .text-underline-border:after {
  transform: scaleX(0);
  transform-origin: left;
}
.ingredients__title.is--revealed .text-underline-border:after,
[data-split].is--revealed .text-underline-border:after {
  transform: scaleX(1);
}

/* ============================================================
   2d. INGREDIENTS IMAGE POSITIONS
   EXACT match to reference site CSS:
   - Leaf (image-1): right:5%, top:20% (RIGHT side)
   - Orange peel/empress (image-2): bottom:7%, left:25% (LEFT side)
   - Wrapper parallax speed: -1 (original, not -3)
   ============================================================ */

#ingredients .ingredients__image-1 {
  right: 5% !important;
  top: 20% !important;
  left: auto !important;
}

#ingredients .ingredients__image-2 {
  bottom: 7% !important;
  left: 25% !important;
  top: auto !important;
}

/* The underline border animation: scaleX(0) → scaleX(1) when revealed.
   Original GSAP triggers this on scroll. We use .is--revealed class. */
.ingredients__title .text-underline-border:after {
  transform: scaleX(0);
  transform-origin: left;
}
.ingredients__title.is--revealed .text-underline-border:after,
[data-split].is--revealed .text-underline-border:after {
  transform: scaleX(1);
}

/* Respect reduced-motion preference: skip animations entirely. */
@media (prefers-reduced-motion: reduce) {
  [data-split],
  [reveal-notrigger],
  [reveal-waitpreloader],
  [reveal-delay] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   3. PARALLAX BASE
   Elements with [data-parallax-top] or .parallax-image get their
   transform updated by JS on scroll (rAF-throttled).
   ============================================================ */

[data-parallax-top],
.parallax-image {
  will-change: transform;
  transform: translateZ(0);
}

/* ============================================================
   4. MOBILE MENU POLISH + DESKTOP MENU VISIBILITY
   The base Nuxt CSS already slides the menu in/out via
   #header .navbar.active .navbar-menu { transform: translate(0); }
   We add staggered item reveals when active.
   ============================================================ */

/* DESKTOP (min-width: 768px): menu is a centered horizontal bar.
   The Nuxt CSS only sets display:flex for desktop but doesn't position
   it. We center it absolutely so the logo stays left and menu is centered. */
@media (min-width: 768px) {
  #header .navbar-menu {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    height: auto !important;
    pointer-events: inherit !important;
    z-index: 2;
  }

  /* Menu link color: white when header is transparent (is--white),
       dark when header has solid background (.active). */
  #header.is--white .navbar-menu a {
    color: #fff !important;
  }
  #header.is--white .navbar-menu a:before {
    background: #fff !important;
  }
  #header:not(.is--white) .navbar-menu a {
    color: #333 !important;
  }
  #header:not(.is--white) .navbar-menu a:before {
    background: #333 !important;
  }
}

/* MOBILE: staggered item animation when hamburger menu opens.
   Only apply opacity:0 on mobile — desktop menu is always visible. */
@media (max-width: 767.98px) {
  #header .navbar .navbar-menu-list .navbar-menu-list-item,
  #header .navbar .navbar-menu-foot {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #header .navbar.active .navbar-menu-list .navbar-menu-list-item,
  #header .navbar.active .navbar-menu-foot {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger: each item gets a progressively longer delay. */
  #header .navbar.active .navbar-menu-list .navbar-menu-list-item:nth-child(1) {
    transition-delay: 0.2s;
  }
  #header .navbar.active .navbar-menu-list .navbar-menu-list-item:nth-child(2) {
    transition-delay: 0.28s;
  }
  #header .navbar.active .navbar-menu-list .navbar-menu-list-item:nth-child(3) {
    transition-delay: 0.36s;
  }
  #header .navbar.active .navbar-menu-list .navbar-menu-list-item:nth-child(4) {
    transition-delay: 0.44s;
  }
  #header .navbar.active .navbar-menu-list .navbar-menu-list-item:nth-child(5) {
    transition-delay: 0.52s;
  }
  #header .navbar.active .navbar-menu-foot {
    transition-delay: 0.6s;
  }
}

/* DESKTOP: menu items always visible (no stagger animation). */
@media (min-width: 768px) {
  #header .navbar .navbar-menu-list .navbar-menu-list-item,
  #header .navbar .navbar-menu-foot {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   5. SCROLLBAR — CUSTOM DESIGN SCROLLBAR
   The original Nuxt site has a custom scrollbar (div.scrollbar > div.inner > div#thumb)
   driven by Lenis. We hide the browser scrollbar and wire up the custom one in JS.

   Nuxt CSS has:
     html body::-webkit-scrollbar { height:0!important; width:0!important }
     html body { -ms-overflow-style:none }
     .scrollbar { display:none }  ← we override this to show it
   ============================================================ */

/* Hide browser scrollbar on all browsers (Nuxt CSS already does this,
   but we reinforce it so it stays hidden after our other overrides). */
html body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
html body {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important; /* Firefox */
}

/* Show the custom scrollbar */
.scrollbar {
  display: block !important;
}

/* Make the thumb draggable cursor more obvious */
.scrollbar .thumb {
  cursor: grab;
}
.scrollbar .thumb:active {
  cursor: grabbing;
}

/* Body scroll lock helper (added by JS when menu overlay is open). */
body.is--scroll-locked {
  overflow: hidden !important;
}

/* ============================================================
   6. SCROLL FIXES
   Ensure vertical scrolling ALWAYS works. These rules override
   any conflicting Nuxt CSS.
   ============================================================ */

html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh;
  position: relative;
}

/* Make sure the main content container doesn't constrain height. */
main,
#main,
#__nuxt {
  overflow: visible !important;
  height: auto !important;
}

/* ============================================================
   7. HEADER STATE TRANSITIONS
   The original Nuxt JS toggled .active and .is--hidden on the header
   based on scroll position. We do the same in site.js.
   ============================================================ */

#header {
  transition:
    background-color 0.8s cubic-bezier(0.18, 0.71, 0.11, 1),
    box-shadow 0.8s cubic-bezier(0.18, 0.71, 0.11, 1),
    transform 0.8s cubic-bezier(0.18, 0.71, 0.11, 1);
}

/* ============================================================
   8. SWIPER OVERRIDES
   Make sure the product carousels don't show a horizontal scrollbar
   and slides don't trigger navigation on drag.
   ============================================================ */

.product__list-item.swiper {
  overflow: hidden;
}
.product__list-item.swiper .swiper-slide {
  /* Swiper's preventClicks handles drag-vs-click; keep cursor as pointer
       so users know the CTA is clickable. */
  cursor: pointer;
}

/* Hide Swiper's default pagination if any (we use drag + arrow if added). */
.product__list-item.swiper .swiper-pagination {
  display: none;
}

/* ============================================================
   PRODUCTS PAGE: ACCORDION + FILTERS
   ============================================================ */

/* Accordion content collapse: only show when .is--active */
#product
  .product__filters
  .accordion-toggle:not(.is--active)
  > .accordion-toggle__content {
  max-height: 0 !important;
  opacity: 0;
}

#product
  .product__filters
  .accordion-toggle.is--active
  > .accordion-toggle__content {
  max-height: 1000px;
  opacity: 1;
}

/* Active filter item (selected by user) */
#product .product__filters .accordion-toggle__content li span.active {
  color: #3b3b3b;
  font-weight: 600;
  position: relative;
}

#product .product__filters .accordion-toggle__content li span.active::after {
  content: " ";
  color: #3b3b3b;
}

/* Clear All link styling */
#product .product__filters .filters-clear__all {
  color: #a0a0a0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-transform: uppercase;
}

#product .product__filters .filters-clear__all:hover {
  color: #3b3b3b;
}

/* Slider arrow colors: transparent background, black arrow stroke */
.slider-arrow.slider-prev,
.slider-arrow.slider-next {
  background-color: rgb(240, 203, 206);
}
.product__list .slider-arrow svg path {
  fill: none !important;
  stroke: #000 !important;
}

/* Grid card stagger animation (expo.out, scale 0→1, rotate -10→0) */
#productgrid .grid__list .card-wrapper {
  opacity: 0;
  transform: scale(0) rotate(-10deg);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#productgrid .grid__list .card-wrapper.is--visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Grid swap transition (fade) */
#productlist,
#productgrid {
  transition: opacity 0.4s cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================================
   GALLERY PAGE: INFINITE DRAG SCROLL
   Reference (BzyxKzly.js):
   - .gallery-container is translated by drag/wheel
   - Wheel: v -= deltaX (reverse direction)
   - Drag: v += deltaX * 2 (amplified)
   - wrap(-halfWidth, 0) for infinite loop on both axes
   - .gallerydrag gets .active class on press/drag (dark bg + scale 1.1)
   - Media stagger in: scale 0.5→1, opacity 0→1, clip-path inset 50%→0,
     stagger 0.3 from "random", expo.out, 1.4s
   ============================================================ */

/* Disable normal page scroll on gallery page (force drag-driven) */
body:has(#gallerydrag) {
  overflow: hidden;
}

body:has(#gallerydrag) .scrollbar {
  display: none;
}

#gallerydrag {
  cursor: grab;
  overscroll-behavior: none;
  touch-action: none;
}

#gallerydrag.is--active {
  background-color: #222;
  color: #fff;
  cursor: grabbing;
  transform: scale(1.1);
  transition:
    transform 0.5s cubic-bezier(0.18, 0.71, 0.11, 1),
    background-color 0.5s cubic-bezier(0.18, 0.71, 0.11, 1),
    color 0.5s cubic-bezier(0.18, 0.71, 0.11, 1);
}

#gallerydrag.is--active .title-wrapper {
  transform: translate(-50%, -50%) scale(0.9);
}

/* Gallery container: 2 columns × 4 content rows */
.gallery-container {
  backface-visibility: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Each content row: 5 columns of media */
#gallerydrag .content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  width: max-content;
  gap: 10vw;
  padding: 5vw;
}

#gallerydrag .media {
  aspect-ratio: 1;
  width: 25vw;
  will-change: transform, clip-path, opacity;
}

@media (max-width: 767.98px) {
  #gallerydrag .media {
    width: 65vw;
  }
}

#gallerydrag .media img,
#gallerydrag .media video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* Media stagger-in animation (expo.out, scale 0.5→1, clip-path inset 50%→0) */
#gallerydrag .media {
  opacity: 0;
  transform: scale(0.5);
  clip-path: inset(50% 50% 50% 50%);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--media-i, 0) * 0.05s);
}

#gallerydrag.is--loaded .media {
  opacity: 1;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}

/* Title wrapper centered */
#gallerydrag .title-wrapper {
  left: 50%;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s cubic-bezier(0.18, 0.71, 0.11, 1);
  z-index: 5;
}

#gallerydrag .title-wrapper h1 {
  font-size: 6.5rem;
  line-height: 1 !important;
  text-transform: none;
}

@media (max-width: 767.98px) {
  #gallerydrag .title-wrapper h1 {
    font-size: 3.25rem;
  }
}

/* ============================================================
   FADE-BOTTOM (replaces GSAP fade-bottom reveal)
   Elements with .fade-bottom class slide up + fade in on scroll.
   Reference: y:30→0, opacity:0→1, duration:1.2, ease:expo.out
   ============================================================ */
.fade-bottom {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-bottom.is--revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   Reference (CVLmCYPL.js CR transition):
   - On leave: sharedTransition (base-overlay-transition) fades to autoAlpha:1
   - On enter: sharedTransition fades to autoAlpha:0
   - Duration: 0.4s, ease: none (linear)
   We simulate SPA page transitions on static HTML:
   - On link click: overlay fades in (0 → 1), then navigate
   - On page load: overlay starts at 1, fades out to 0
   ============================================================ */
.base-overlay-transition {
  background-color: #fff;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 98;
  transition: opacity 0.4s ease;
}

.base-overlay-transition.is--visible {
  opacity: 1;
}

/* Body is transition-locked during overlay fade-in */
body.is--transitioning {
  pointer-events: none;
}

/* ============================================================
   JOURNAL DETAIL ANIMATIONS
   Reference (947ntW_k.js):
   - Article header: yPercent:70 → 0 (entrance after preloader)
   - Sticky share: pinned while scrolling through .article__content
   - Arrow-text SVG: draw on scroll (like .mask-path)
   - data-scrollto: click to scroll to target element
   ============================================================ */

/* Article header entrance (yPercent:70 → 0) */
.article__header.article-maxwidth {
  transform: translateY(70%);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (max-width: 767.98px) {
  .article__header.article-maxwidth {
    transform: none;
    transition: none;
  }
}

.article__header.article-maxwidth.is--entered {
  transform: translateY(0);
}

/* Article title: increase line-height to match reference masking-text behavior
   (reference wraps each line in .masking-text with height:1em, line-height:1em,
    effectively giving line-height:1 instead of 0.9) */
.article__title {
  line-height: 1 !important;
}

/* Sticky share pinning — position: absolute right:9% top:7% (reference CSS)
   JS toggles to position:fixed when scrolling through article content */
.article-share.sticky-content {
  position: absolute;
  right: 9%;
  top: 7%;
}

.article-share.sticky-content.is--pinned {
  position: fixed;
  top: 15%;
  right: 9%;
}

@media (max-width: 767.98px) {
  .article-share.sticky-content {
    display: none;
  }
}
.navbar-logo img {
  width: 118px;
}

/* Preloader wordmark: replaces the original hand-drawn "true./kind." vector
   logo with plain styled text so the brand name can be changed without
   redrawing custom letterforms. */
.preloader .logo-text {
  color: #fff;
  font-family: "PP Mori", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The original .logo container was sized/clipped to fit the narrow
   hand-drawn vector logo (max-width + overflow:hidden). Lift that so the
   full "MARCHVET" text always shows uncropped. */
.preloader .logo {
  max-width: none !important;
}
.footer__copyright img {
  width: 45px;
}
.media-img.n-a.ethos__image.parallax-scroll img {
  width: 400px;
}
#header.is--white.active .navbar-menu a {
  color: #000 !important;
}
@media (max-width: 767.98px) {
  #header.is--white.active
    .navbar-hamburger
    .navbar-hamburger-line[data-v-f756b3ad] {
    background: #000 !important;
  }
}
.product__item-title {
  text-transform: capitalize;
      font-size: 1.2rem !important;
}

/* Product Hover Effect */
.product__item-img {
  position: relative;
}
.product__item-img picture:first-child {
  transition: opacity 0.3s ease;
}
.product__item-img .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  object-fit: contain;
}
.product__item.has-hover:hover .product__item-img picture:first-child {
  opacity: 0;
}
.product__item.has-hover:hover .product__item-img .img-hover {
  opacity: 1;
}