/* ==========================================================================
   FÉMINI v3 — Animation / behaviour CSS.
   Safe alongside Elementor: this file controls only motion, layering,
   positioning and states (transform, opacity, clip-path, transitions).

   It never sets a font, size, weight, line height or brand colour of its own.
   Where a value is needed (gold lines, the product cards and the search/menu
   panels printed by the plugin), it reads Elementor's global variables:
     --e-global-color-<id>                 Site Settings → Global Colors
     --e-global-typography-<id>-<prop>     Site Settings → Global Fonts
   Change those in Elementor and everything here follows.
   ========================================================================== */

:root {
  --fm-gold: var(--e-global-color-accent, #C6A15B);
  --fm-ink: var(--e-global-color-primary, #0B0A09);
  --fm-paper: var(--e-global-color-fmwhite, #FFFFFF);
  --fm-ivory: var(--e-global-color-fmivory, #F4EEE4);
  --fm-line: var(--e-global-color-fmline, #E3D8C8);
  --fm-ease: cubic-bezier(0.16, 1, 0.3, 1);       /* arrivals: expo-out */
  --fm-ease-io: cubic-bezier(0.76, 0, 0.24, 1);   /* wipes, lines, hovers: quart in-out */
  --fm-ease-film: cubic-bezier(0.65, 0.05, 0.36, 1); /* slide changes */
}

/* Typography helpers that read Elementor globals (used only by markup the plugin prints) */
.fm-t-accent { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); }

/* ---------- Layering: content sections slide over the pinned hero ---------- */
.fm-site .elementor > .e-con, .fm-site .elementor .e-parent { position: relative; z-index: 1; }
.elementor .fm-slider.e-con { position: sticky !important; top: 0; z-index: 0 !important; }
.fm-bleed { margin-right: calc(50% - 50vw) !important; max-width: none !important; width: auto !important; }
.fm-bleed-both { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: none !important; width: auto !important; }
.elementor .fm-static, .fm-static { position: static !important; }

/* ---------- Header (behaviour + state) ---------- */
.elementor .fm-header.e-con, .fm-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; transition: transform 700ms var(--fm-ease), background-color 500ms linear, box-shadow 500ms linear; }
body.admin-bar .fm-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fm-header { top: 46px; } }
.fm-header::after { content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0)); transition: opacity 500ms; }
.fm-header--hidden { transform: translateY(-100%); }
/* Solid state after scrolling: background + ink follow the Elementor globals */
.fm-header--solid { background-color: var(--fm-paper) !important; box-shadow: 0 1px 0 var(--fm-line); }
.fm-header--solid::after { opacity: 0; }
.fm-header--solid .elementor-heading-title, .fm-header--solid .elementor-button { color: var(--fm-ink) !important; }
.fm-js .fm-header { opacity: 0; transition: opacity 900ms var(--fm-ease) 1500ms, transform 700ms var(--fm-ease), background-color 500ms linear, box-shadow 500ms linear; }
.fm-ready .fm-header { opacity: 1; }
/* Gold underline on navigation buttons (class fm-navlink) */
.fm-navlink .elementor-button { position: relative; overflow: visible; }
.fm-navlink .elementor-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--fm-gold); transform: scaleX(0); transform-origin: center; transition: transform 500ms var(--fm-ease-io); }
.fm-navlink .elementor-button:hover::after, .fm-navlink .elementor-button:focus-visible::after, .fm-navlink.is-current .elementor-button::after { transform: scaleX(1); }
.fm-bag-count { color: var(--fm-gold); margin-left: 2px; }
.elementor-editor-active .fm-header { position: relative !important; opacity: 1 !important; background-color: var(--fm-ink); }

/* ---------- Buttons: gold sweep (class fm-sweep). Colours on hover come from the button's own Hover tab ---------- */
.fm-sweep .elementor-button { position: relative; overflow: hidden; isolation: isolate; transition: color 600ms var(--fm-ease-io), border-color 600ms var(--fm-ease-io), background-color 0s !important; }
.fm-sweep .elementor-button::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--fm-gold); transform: scaleX(0); transform-origin: right; transition: transform 650ms var(--fm-ease-io); }
.fm-sweep .elementor-button:hover::before, .fm-sweep .elementor-button:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.fm-sweep .elementor-button:hover { background-color: transparent !important; }
/* Text link with gold underline (class fm-underline) */
.fm-underline .elementor-button { position: relative; overflow: visible; }
.fm-underline .elementor-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--fm-gold); transform-origin: left; }
.fm-underline .elementor-button:hover::after { animation: fm-redraw 800ms var(--fm-ease-io); }
@keyframes fm-redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 55% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.fm-site :focus-visible { outline: 1px solid var(--fm-gold); outline-offset: 4px; }
.fm-site .elementor-heading-title em { font-style: normal; color: var(--fm-gold); }
.fm-site .elementor-heading-title a { text-decoration: none; }

/* ---------- The gold thread (HTML widget: <span class="fm-gline"></span>) ---------- */
.fm-gline { display: block; height: 1px; width: 100%; background: var(--fm-gold); transform-origin: left; }
.fm-gline--short { width: 88px; }
.fm-gline--center { margin: 0 auto; transform-origin: center; }
.fm-thread { display: block; width: 1px; height: 120px; margin: -60px auto 0; background: linear-gradient(to bottom, transparent, var(--fm-gold) 30%, var(--fm-gold) 70%, transparent); transform-origin: top; position: relative; z-index: 3; }
.fm-js .fm-in .fm-gline, .fm-js .fm-in .fm-thread, .fm-js .fm-gline-host .fm-gline, .fm-js .fm-gline-host .fm-thread { transform: scaleX(0); transition: transform 1300ms var(--fm-ease-io) var(--fm-delay, 0ms); }
.fm-js .fm-gline-host .fm-thread, .fm-js .fm-in .fm-thread { transform: scaleY(0); }
.fm-js .fm-in.is-in .fm-gline, .fm-js .fm-gline-host.is-in .fm-gline { transform: scaleX(calc(1 - var(--fm-out, 0) * 0.75)); }
.fm-js .fm-in.is-in .fm-thread, .fm-js .fm-gline-host.is-in .fm-thread { transform: scaleY(1); }

/* ==========================================================================
   HERO SLIDER  (container .fm-slider > three containers .fm-slide)
   Slides stack in one grid cell. The active slide's background is repainted on
   ::after (Elementor's own background overlay stays on ::before above it).
   ========================================================================== */
.elementor .fm-slider.e-con { display: grid !important; grid-template: 1fr / 1fr; overflow: hidden; overflow: clip; }
.fm-slider > .fm-slide { grid-area: 1 / 1; isolation: isolate; overflow: hidden; visibility: hidden; z-index: 0; }
.fm-slider > .fm-slide.is-active, .fm-slider > .fm-slide.is-leaving, .fm-slider:not(.fm-on) > .fm-slide:first-child { visibility: visible; }
.fm-slider > .fm-slide.is-active { z-index: 2; }
.fm-slider > .fm-slide.is-leaving { z-index: 1; }
.fm-slide::after { content: ""; position: absolute; inset: -5%; z-index: -1; background: inherit; background-size: cover; background-repeat: no-repeat; transform: translate3d(calc(var(--fm-sx, 0%) + var(--fm-mx, 0px)), var(--fm-my, 0px), 0) scale(var(--fm-ss, 1.06)); will-change: transform; }
.fm-slide { background-color: transparent; }
/* entering: mask opens from the right, image glides in and settles */
.fm-slide.is-entering { animation: fm-slide-mask 1500ms var(--fm-ease-film) both; }
.fm-slide.is-entering::after { animation: fm-slide-img-in 2600ms var(--fm-ease) both; }
.fm-slide.is-active:not(.is-entering)::after { animation: fm-slide-drift var(--fm-dur, 7000ms) linear both; }
.fm-slide.is-leaving::after { animation: fm-slide-img-out 1500ms var(--fm-ease-film) both; }
@keyframes fm-slide-mask { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes fm-slide-img-in { from { transform: translate3d(8%, 0, 0) scale(1.24); } to { transform: translate3d(0, 0, 0) scale(1.06); } }
@keyframes fm-slide-drift { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-1.5%, 0, 0) scale(1.0); } }
@keyframes fm-slide-img-out { from { transform: translate3d(-1.5%, 0, 0) scale(1.0); opacity: 1; } to { transform: translate3d(-10%, 0, 0) scale(1.12); opacity: 0.55; } }
/* the gold edge that travels with the mask */
.fm-slider__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--fm-gold) 20%, var(--fm-gold) 80%, transparent); opacity: 0; }
.fm-slider__edge.is-running { animation: fm-edge 1500ms var(--fm-ease-film) both; }
@keyframes fm-edge { 0% { transform: translateX(100vw); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

/* text choreography inside slides */
.fm-lines .fm-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fm-lines .fm-line > span { display: inline-block; }
.fm-js .fm-slide .fm-lines .fm-line > span { transform: translate3d(0, 110%, 0); transition: transform 1000ms var(--fm-ease); }
.fm-js .fm-slide.is-shown .fm-lines .fm-line > span { transform: none; transition-delay: calc(650ms + var(--i, 0) * 130ms); }
.fm-js .fm-slide.is-leaving .fm-lines .fm-line > span { transform: translate3d(0, -110%, 0); transition: transform 600ms var(--fm-ease-io); transition-delay: calc(var(--i, 0) * 60ms); }
.fm-js .fm-slide .fm-s-label, .fm-js .fm-slide .fm-s-text, .fm-js .fm-slide .fm-s-cta { opacity: 0; translate: 0 18px; transition: opacity 500ms linear, translate 500ms var(--fm-ease-io); }
.fm-js .fm-slide.is-shown .fm-s-label { opacity: 1; translate: 0 0; transition: opacity 800ms linear 450ms, translate 1000ms var(--fm-ease) 450ms; }
.fm-js .fm-slide.is-shown .fm-s-text { opacity: 1; translate: 0 0; transition: opacity 800ms linear 1150ms, translate 1000ms var(--fm-ease) 1150ms; }
.fm-js .fm-slide.is-shown .fm-s-cta { opacity: 1; translate: 0 0; transition: opacity 800ms linear 1400ms, translate 1000ms var(--fm-ease) 1400ms; }
.fm-js .fm-slide .fm-gline { transform: scaleX(0); transition: transform 500ms var(--fm-ease-io); }
.fm-js .fm-slide.is-shown .fm-gline { transform: scaleX(1); transition: transform 1100ms var(--fm-ease-io) 900ms; }
/* hero copy lifts as the next section covers it */
.fm-slider .fm-slide__copy { translate: 0 calc(var(--fm-hp, 0) * -80px); opacity: calc(1 - var(--fm-hp, 0) * 1.5); }

/* slider UI (built by JS) */
.fm-slider__ui { position: absolute; z-index: 6; right: clamp(20px, 4.4vw, 64px); bottom: clamp(28px, 5vh, 56px); display: flex; align-items: center; gap: 20px; color: var(--fm-paper); }
.fm-slider__count { font-variant-numeric: tabular-nums; min-width: 64px; }
.fm-slider__bars { display: flex; gap: 8px; }
.fm-slider__bar { width: 56px; height: 1px; background: rgba(255, 255, 255, 0.35); position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.fm-slider__bar::before { content: ""; position: absolute; inset: -10px 0; } /* bigger hit area */
.fm-slider__bar span { position: absolute; inset: 0; background: var(--fm-gold); transform: scaleX(0); transform-origin: left; }
.fm-slider__bar.is-done span { transform: scaleX(1); }
.fm-slider__bar.is-on span { animation: fm-bar var(--fm-dur, 7000ms) linear both; }
.fm-slider.is-paused .fm-slider__bar.is-on span { animation-play-state: paused; }
@keyframes fm-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fm-slider__ui button { background: none; border: 0; color: inherit; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.fm-slider__ui button:focus-visible { outline: 1px solid var(--fm-gold); }
.fm-slider__ui .fm-slider__bar { min-width: 0; min-height: 0; height: 1px; padding: 0; display: block; }
.fm-slider__ui .fm-slider__arrow { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; width: 44px; height: 44px; transition: border-color 400ms, background-color 400ms; }
.fm-slider__ui .fm-slider__arrow:hover { border-color: var(--fm-gold); background: rgba(198, 161, 91, 0.18); }
@media (max-width: 767px) { .fm-slider__arrow { display: none !important; } .fm-slider__bar { width: 36px; } .fm-slider__ui { left: 20px; right: 20px; justify-content: space-between; } }

/* ==========================================================================
   SECTION MOTION IDENTITIES (entrances). Classes go on widgets/containers.
   Entrances use `translate` / `opacity` / `clip-path`; exits use `scale` and
   the inner element's opacity, so the two never fight (or touch Elementor's
   own Transform controls, which use `transform`).
   ========================================================================== */
/* Generic rise (text) */
.fm-js .fm-in { opacity: 0; translate: 0 36px; transition: opacity 1000ms var(--fm-ease), translate 1200ms var(--fm-ease); transition-delay: var(--fm-delay, 0ms); }
.fm-js .fm-in.is-in { opacity: 1; translate: 0 0; }
.fm-js .fm-in--left { translate: -56px 0; }
.fm-js .fm-in--right { translate: 56px 0; }
.fm-js .fm-in--left.is-in, .fm-js .fm-in--right.is-in { translate: 0 0; }
.fm-d1 { --fm-delay: 120ms; } .fm-d2 { --fm-delay: 240ms; } .fm-d3 { --fm-delay: 380ms; } .fm-d4 { --fm-delay: 520ms; } .fm-d5 { --fm-delay: 700ms; }

/* Headline line rise on scroll (`fm-rise-lines`: put <br> where lines break) */
.fm-rise-lines .fm-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fm-rise-lines .fm-line > span { display: inline-block; }
.fm-js .fm-rise-lines .fm-line > span { transform: translate3d(0, 110%, 0); transition: transform 1100ms var(--fm-ease); transition-delay: calc(var(--fm-delay, 0ms) + var(--i, 0) * 120ms); }
.fm-js .fm-rise-lines.is-in .fm-line > span { transform: none; }

/* Letter reveal (`fm-letters`): each letter rises and un-blurs, 28 ms apart */
.fm-letters .fm-ch { display: inline-block; }
.fm-js .fm-letters .fm-ch { opacity: 0; translate: 0 0.5em; transition: opacity 700ms var(--fm-ease), translate 900ms var(--fm-ease); transition-delay: calc(var(--fm-delay, 0ms) + var(--c, 0) * 28ms); }
.fm-js .fm-letters.is-in .fm-ch { opacity: 1; translate: 0 0; }

/* Image wipes (on Image widgets) */
.fm-js .fm-wipe-up img { clip-path: inset(100% 0 0 0); scale: 1.16; transition: clip-path 1300ms var(--fm-ease-io), scale 2000ms var(--fm-ease); transition-delay: var(--fm-delay, 0ms); }
.fm-js .fm-wipe-left img { clip-path: inset(0 100% 0 0); scale: 1.12; transition: clip-path 1500ms var(--fm-ease-io), scale 2200ms var(--fm-ease); transition-delay: var(--fm-delay, 0ms); }
.fm-js .fm-zoom-in img { opacity: 0; scale: 1.32; transition: opacity 1400ms linear, scale 2600ms var(--fm-ease); transition-delay: var(--fm-delay, 0ms); }
.fm-js .fm-wipe-up.is-in img, .fm-js .fm-wipe-left.is-in img { clip-path: inset(0 0 0 0); scale: 1; }
.fm-js .fm-zoom-in.is-in img { opacity: 1; scale: 1; }
.fm-img img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; }
.fm-img { overflow: hidden; }
.fm-ratio-45 img { aspect-ratio: 4 / 5; } .fm-ratio-34 img { aspect-ratio: 3 / 4; } .fm-ratio-23 img { aspect-ratio: 2 / 3; } .fm-ratio-32 img { aspect-ratio: 3 / 2; }

/* Background zoom on containers (class fm-zoombg): repaints the container's own
   Elementor background on ::after, beneath Elementor's overlay (::before). */
.fm-zoombg { isolation: isolate; overflow: hidden; }
.fm-zoombg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; background-size: cover; transition: transform 1800ms var(--fm-ease); }
.fm-panel:hover.fm-zoombg::after { transform: scale(1.07); }
.fm-z2 { z-index: 2 !important; }
.elementor .fm-thread-top { position: absolute !important; top: -60px; left: 50%; width: 1px !important; margin: 0 !important; z-index: 5; }
.fm-thread-top .fm-thread { margin: 0; }
.elementor .fm-inset-drop { position: absolute !important; right: 14%; bottom: -120px; width: 240px !important; max-width: 40% !important; z-index: 5; }
@media (max-width: 767px) { .elementor .fm-inset-drop { position: relative !important; right: auto; bottom: auto; width: 60% !important; max-width: 60% !important; margin-left: auto !important; } }

/* Discover: three living panels */
.elementor .fm-panel.e-con { flex: 1 1 0 !important; width: auto !important; max-width: none !important; position: relative; overflow: hidden; justify-content: flex-end; transition: flex-grow 1100ms var(--fm-ease-io); }
@media (hover: hover) and (min-width: 1025px) {
  .fm-panels:hover > .fm-panel { flex-grow: 0.84 !important; }
  .fm-panels > .fm-panel:hover { flex-grow: 1.45 !important; }
}
.fm-panel > .fm-panel__img { position: absolute !important; inset: 0; width: 100% !important; max-width: none !important; height: 100%; margin: 0 !important; z-index: 0; }
.fm-panel__img > *, .fm-panel__img a { height: 100%; display: block; }
.fm-panel__img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 1800ms var(--fm-ease); }
.fm-panel:hover .fm-panel__img img { transform: scale(1.07); }
.fm-panel > *:not(.fm-panel__img) { position: relative; z-index: 2; }
.fm-panel .fm-panel__title { transition: translate 900ms var(--fm-ease); }
.fm-panel:hover .fm-panel__title { translate: 0 -6px; }
.fm-panel .fm-gline { transform: scaleX(0.2) !important; transition: transform 1100ms var(--fm-ease-io) !important; }
.fm-panel:hover .fm-gline, .fm-panel:focus-within .fm-gline { transform: scaleX(1) !important; }
.elementor .fm-panel__more.e-con { display: grid !important; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 900ms var(--fm-ease-io), opacity 600ms; }
.fm-panel__more > .e-con { min-height: 0; overflow: hidden; }
.fm-panel:hover .fm-panel__more, .fm-panel:focus-within .fm-panel__more { grid-template-rows: 1fr; opacity: 1; transition-delay: 150ms; }
@media (max-width: 1024px), (hover: none) {
  .fm-panel .fm-gline { transform: scaleX(1) !important; }
  .elementor .fm-panel__more.e-con { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 767px) { .elementor .fm-panel.e-con { flex: 0 0 auto !important; width: 100% !important; } }
/* staggered panel reveal: the whole panel opens from the bottom */
.fm-js .fm-panel-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1400ms var(--fm-ease-io); transition-delay: var(--fm-delay, 0ms); }
.fm-js .fm-panel-reveal.is-in { clip-path: inset(0 0 0 0); }

/* Everyday: inset image overlapping into the next section */
.fm-overlap-next { margin-bottom: -140px !important; position: relative; z-index: 4; }
@media (max-width: 767px) { .fm-overlap-next { margin-bottom: -72px !important; } }

/* Sleep & Home film strip */
.fm-strip-wrap { overflow: hidden; }
.elementor .fm-strip.e-con { flex-wrap: nowrap !important; translate: var(--fm-stripx, 0px) 0; will-change: translate; }
.fm-strip > .elementor-widget-image { flex: 0 0 32vw !important; width: 32vw !important; max-width: none !important; }
@media (max-width: 767px) { .fm-strip > .elementor-widget-image { flex-basis: 70vw !important; width: 70vw !important; } }

/* Brand statement: pinned, three lines in sequence */
.fm-sticky { position: sticky !important; top: 0; height: 100vh; height: 100svh; }
.fm-seq .fm-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.fm-seq .fm-line > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1200ms var(--fm-ease); }
.fm-seq .fm-line.is-on > span { transform: none; }
.fm-seq-after { opacity: 0; translate: 0 20px; transition: opacity 900ms var(--fm-ease), translate 900ms var(--fm-ease); }
.fm-seq-after.is-on { opacity: 1; translate: 0 0; }
.fm-seq-after .fm-gline { transform: scaleX(0); transition: transform 1300ms var(--fm-ease-io); }
.fm-seq-after.is-on .fm-gline { transform: scaleX(1); }

/* Final frame: framed image opens to full bleed with scroll */
.fm-frame { overflow: hidden; overflow: clip; isolation: isolate; clip-path: inset(calc((1 - var(--fm-fp, 1)) * 9%) calc((1 - var(--fm-fp, 1)) * 11%)); }
.fm-frame::after { content: ""; position: absolute; inset: -4%; z-index: -1; background: inherit; background-size: cover; scale: calc(1.24 - var(--fm-fp, 1) * 0.24); }

/* ==========================================================================
   EXITS: as a section scrolls away (class fm-exit on the section container,
   JS writes --fm-out 0→1), its pieces ease back so the next section takes over.
   ========================================================================== */
.fm-exit .fm-out-img { scale: calc(1 - var(--fm-out, 0) * 0.06); translate: calc(var(--fm-out, 0) * -18px) 0; transform-origin: center top; }
.fm-exit .fm-out-img-r { scale: calc(1 - var(--fm-out, 0) * 0.06); translate: calc(var(--fm-out, 0) * 18px) 0; }
.fm-exit .fm-out-text > * { opacity: calc(1 - var(--fm-out, 0) * 0.55); }
.fm-exit .fm-out-type { translate: 0 calc(var(--fm-out, 0) * -48px); }
.fm-exit .fm-out-shift { translate: calc(var(--fm-out, 0) * -40px) 0; }

/* ==========================================================================
   PRODUCTS ([femini_products]) — typography + colours read Elementor globals
   ========================================================================== */
.fm-products { --fm-card-w: 29vw; position: relative; }
.fm-products__track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: clamp(20px, 4.4vw, 64px); cursor: grab; }
.fm-products__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fm-products__track.is-dragging a { pointer-events: none; }
.fm-products__track::-webkit-scrollbar { display: none; }
.fm-products--carousel .fm-card { flex: 0 0 var(--fm-card-w); max-width: 500px; scroll-snap-align: start; }
.fm-products__nav { display: flex; align-items: center; gap: 24px; margin-top: 44px; padding-right: clamp(20px, 4.4vw, 64px); color: var(--fm-ink); }
.fm-products__nav button { width: 48px; height: 48px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; cursor: pointer; display: grid; place-items: center; transition: background-color 500ms var(--fm-ease-io), color 500ms, border-color 500ms; }
.fm-products__nav button:hover { background: var(--fm-ink); color: var(--fm-gold); border-color: var(--fm-ink); }
.fm-products__nav button[disabled] { opacity: 0.25; pointer-events: none; }
.fm-products__bar { flex: 1; height: 1px; background: var(--fm-line); position: relative; overflow: hidden; }
.fm-products__bar span { position: absolute; inset: 0; background: var(--fm-gold); transform-origin: left; transform: scaleX(var(--fm-p, 0.3)); transition: transform 500ms var(--fm-ease); }
.fm-products__count, .fm-card__rank, .fm-card__quick a { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: var(--e-global-typography-accent-text-transform); }
.fm-products__count { color: var(--e-global-color-fmgold2, #7E5E2B); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.fm-products--ranked .fm-products__track { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; scroll-snap-type: none; padding-right: 0; cursor: default; }
.fm-products--ranked .fm-card:nth-child(even) { margin-top: 88px; }

.fm-card { position: relative; min-width: 0; }
.fm-card__media { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fm-ivory); }
.fm-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 900ms var(--fm-ease-io), transform 1600ms var(--fm-ease); }
.fm-card__media img + img { opacity: 0; transform: scale(1.06); }
.fm-card:hover .fm-card__media img:first-child { opacity: 0; transform: scale(1.04); }
.fm-card:hover .fm-card__media img + img { opacity: 1; transform: scale(1); }
.fm-card__quick { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 14px; pointer-events: none; }
.fm-card__quick a { pointer-events: auto; width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; background: var(--fm-paper); color: var(--fm-ink) !important; text-decoration: none; border: 1px solid var(--fm-gold); opacity: 0; translate: 0 12px; transition: opacity 600ms var(--fm-ease), translate 600ms var(--fm-ease), background-color 400ms, color 400ms; }
.fm-card:hover .fm-card__quick a, .fm-card:focus-within .fm-card__quick a { opacity: 1; translate: 0 0; }
.fm-card__quick a:hover { background: var(--fm-ink); color: var(--fm-paper) !important; }
.fm-card__quick a.loading { opacity: 0.6 !important; }
.fm-card__quick a.added { font-size: 0; }
.fm-card__quick a.added::after { content: attr(data-added); font-size: var(--e-global-typography-accent-font-size); }
.fm-card .added_to_cart { display: none !important; }
@media (hover: none) { .fm-card__quick { display: none; } }
.fm-card__info { position: relative; padding-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; }
.fm-card__info::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--fm-gold); transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--fm-ease-io); }
.fm-card:hover .fm-card__info::before { transform: scaleX(1); }
.fm-card__rank { grid-column: 1 / -1; color: var(--e-global-color-fmgold2, #7E5E2B); margin-bottom: 6px; }
.fm-card__name { margin: 0; font-family: var(--e-global-typography-fmprod-font-family), sans-serif; font-weight: var(--e-global-typography-fmprod-font-weight); font-size: var(--e-global-typography-fmprod-font-size); letter-spacing: var(--e-global-typography-fmprod-letter-spacing); text-transform: var(--e-global-typography-fmprod-text-transform); line-height: var(--e-global-typography-fmprod-line-height); color: var(--fm-ink); }
.fm-card__name a { color: inherit !important; text-decoration: none; }
.fm-card__price { font-family: var(--e-global-typography-fmprice-font-family), sans-serif; font-weight: var(--e-global-typography-fmprice-font-weight); font-size: var(--e-global-typography-fmprice-font-size); letter-spacing: var(--e-global-typography-fmprice-letter-spacing); color: var(--e-global-color-secondary, #6B6157); white-space: nowrap; }
.fm-card__price del { opacity: 0.55; margin-right: 6px; }
.fm-card__price ins { text-decoration: none; color: var(--e-global-color-fmgold2, #7E5E2B); }
.fm-products__empty { font-family: var(--e-global-typography-text-font-family), sans-serif; color: var(--e-global-color-secondary); padding: 40px 0; border-top: 1px solid var(--fm-gold); }
/* product entrances: carousel rises; cards stagger left → right; image settles; info follows */
.fm-js .fm-products-in .fm-products { opacity: 0; translate: 0 80px; transition: opacity 1000ms var(--fm-ease), translate 1300ms var(--fm-ease); }
.fm-js .fm-products-in .fm-card { opacity: 0; translate: -36px 0; transition: opacity 900ms var(--fm-ease), translate 1100ms var(--fm-ease); transition-delay: calc(200ms + var(--i, 0) * 120ms); }
.fm-js .fm-products-in .fm-card__media img:first-child { scale: 1.14; transition: opacity 900ms var(--fm-ease-io), transform 1600ms var(--fm-ease), scale 1800ms var(--fm-ease); transition-delay: calc(200ms + var(--i, 0) * 120ms); }
.fm-js .fm-products-in .fm-card__info { opacity: 0; translate: 0 14px; transition: opacity 800ms var(--fm-ease), translate 800ms var(--fm-ease); transition-delay: calc(550ms + var(--i, 0) * 120ms); }
.fm-js .fm-products-in.is-in .fm-products, .fm-js .fm-products-in.is-in .fm-card, .fm-js .fm-products-in.is-in .fm-card__info { opacity: 1; translate: 0 0; }
.fm-js .fm-products-in.is-in .fm-card__media img:first-child { scale: 1; }
/* ranked: one by one, image opens from the bottom */
.fm-js .fm-ranked-in .fm-card__media { clip-path: inset(100% 0 0 0); transition: clip-path 1200ms var(--fm-ease-io); transition-delay: calc(var(--i, 0) * 180ms); }
.fm-js .fm-ranked-in .fm-card__info { opacity: 0; translate: 0 16px; transition: opacity 800ms var(--fm-ease), translate 800ms var(--fm-ease); transition-delay: calc(450ms + var(--i, 0) * 180ms); }
.fm-js .fm-ranked-in.is-in .fm-card__media { clip-path: inset(0 0 0 0); }
.fm-js .fm-ranked-in.is-in .fm-card__info { opacity: 1; translate: 0 0; }
@media (max-width: 1024px) {
  .fm-products { --fm-card-w: 44vw; }
  .fm-products--ranked .fm-products__track { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .fm-products--ranked .fm-card:nth-child(even) { margin-top: 48px; }
}
@media (max-width: 767px) {
  .fm-products { --fm-card-w: 76vw; }
  .fm-products__track { gap: 16px; }
  .fm-products__nav button { display: none; }
  .fm-products--ranked .fm-products__track { gap: 32px 12px; }
  .fm-card__info { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PANELS printed by the plugin (search, mobile menu), cursor, progress line
   ========================================================================== */
.fm-sheet, .fm-search { position: fixed; z-index: 1001; background: var(--fm-paper); color: var(--fm-ink); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--fm-ease-io), visibility 0s 800ms; }
.fm-sheet { inset: 0; padding: 84px 24px 32px; display: flex; flex-direction: column; overflow-y: auto; }
.fm-search { left: 0; right: 0; top: 0; padding: 112px clamp(20px, 4.4vw, 64px) 64px; box-shadow: 0 1px 0 var(--fm-line); }
.fm-sheet.is-open, .fm-search.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--fm-ease-io); }
.fm-panel-close { position: absolute; top: 20px; right: clamp(20px, 4.4vw, 64px); min-height: 44px; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: uppercase; }
.fm-search__inner { max-width: 760px; margin: 0 auto; }
.fm-search-form { display: flex; align-items: center; border-bottom: 1px solid var(--fm-gold); margin-bottom: 36px; }
.fm-search-form input[type="search"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 16px 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none; color: var(--fm-ink); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight); font-size: var(--e-global-typography-secondary-font-size); letter-spacing: var(--e-global-typography-secondary-letter-spacing); }
.fm-search-form button { background: none !important; border: 0 !important; padding: 16px 0 16px 16px !important; cursor: pointer; color: var(--fm-ink) !important; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: uppercase; }
.fm-sheet__links { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 4px; }
.fm-sheet__links a { display: block; padding: 10px 0; color: var(--fm-ink); text-decoration: none; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight); font-size: var(--e-global-typography-primary-font-size); letter-spacing: var(--e-global-typography-primary-letter-spacing); text-transform: uppercase; line-height: 1.1; opacity: 0; translate: 0 20px; transition: opacity 700ms var(--fm-ease), translate 700ms var(--fm-ease); transition-delay: calc(300ms + var(--i, 0) * 70ms); }
.fm-sheet.is-open .fm-sheet__links a { opacity: 1; translate: 0 0; }
.fm-sheet__foot { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 24px; margin-top: 40px; border-top: 1px solid var(--fm-line); }
.fm-sheet__foot a { color: var(--fm-ink); text-decoration: none; padding: 12px 0; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: uppercase; }
.fm-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.32); opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 0s 500ms; }
.fm-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 500ms; }
body.fm-locked { overflow: hidden; }
.fm-progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 1002; pointer-events: none; background: var(--fm-gold); transform-origin: left; transform: scaleX(var(--fm-sp, 0)); }
body.admin-bar .fm-progress { top: 32px; }
.fm-cursor { position: fixed; top: 0; left: 0; z-index: 1003; pointer-events: none; opacity: 0; transition: opacity 300ms; }
.fm-cursor span { display: grid; place-items: center; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; border: 1px solid var(--fm-gold); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--fm-ink); text-align: center; padding: 0 12px; transform: scale(0.4); transition: transform 500ms var(--fm-ease); font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: calc(var(--e-global-typography-accent-font-size, 11px) * 0.85); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: uppercase; line-height: 1.4; }
.fm-cursor.is-on { opacity: 1; }
.fm-cursor.is-on span { transform: scale(1); }
.fm-news { display: flex; border-bottom: 1px solid var(--fm-gold); max-width: 440px; }
.fm-news input[type="email"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 14px 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none; color: var(--fm-ink); font: inherit; }
.fm-news button { background: none !important; border: 0 !important; padding: 14px 0 14px 16px !important; cursor: pointer; color: var(--fm-ink) !important; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-weight: var(--e-global-typography-accent-font-weight); font-size: var(--e-global-typography-accent-font-size); letter-spacing: var(--e-global-typography-accent-letter-spacing); text-transform: uppercase; }
.fm-news-done { display: none; }
.fm-links a { text-decoration: none; background: linear-gradient(var(--fm-gold), var(--fm-gold)) no-repeat 0 100% / 0 1px; transition: background-size 500ms var(--fm-ease-io); }
.fm-links a:hover, .fm-links a:focus-visible { background-size: 100% 1px; }
.fm-news-wrap.is-joined .fm-news { display: none; }
.fm-news-wrap.is-joined .fm-news-done { display: block; }

/* ---------- Page transitions (View Transitions API; no JS, never delays a click) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fm-vt-out 380ms var(--fm-ease-io) both; }
::view-transition-new(root) { animation: fm-vt-in 700ms var(--fm-ease) 120ms both; }
@keyframes fm-vt-out { to { opacity: 0; } }
@keyframes fm-vt-in { from { opacity: 0; clip-path: inset(5% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }

/* ---------- Elementor editor: everything visible and still ---------- */
.elementor-editor-active .fm-in, .elementor-editor-active .fm-s-label, .elementor-editor-active .fm-s-text, .elementor-editor-active .fm-s-cta, .elementor-editor-active .fm-seq-after, .elementor-editor-active .fm-ch { opacity: 1 !important; translate: none !important; }
.elementor-editor-active [class*="fm-wipe"] img, .elementor-editor-active .fm-zoom-in img, .elementor-editor-active .fm-panel-reveal, .elementor-editor-active .fm-frame { clip-path: none !important; scale: 1 !important; opacity: 1 !important; }
.elementor-editor-active .fm-slider.e-con { display: flex !important; flex-direction: column !important; position: relative !important; }
.elementor-editor-active .fm-slider > .fm-slide { visibility: visible; min-height: 70vh; }
.elementor-editor-active .fm-gline, .elementor-editor-active .fm-thread { transform: none !important; }
.elementor-editor-active .fm-sticky { position: relative !important; height: auto; }
.elementor-editor-active .fm-seq .fm-line > span, .elementor-editor-active .fm-lines .fm-line > span { transform: none !important; }

/* ---------- Mobile: shorter distances; no hover-only effects ---------- */
@media (max-width: 767px) {
  .fm-js .fm-in { translate: 0 20px; }
  .fm-js .fm-in--left { translate: -24px 0; }
  .fm-js .fm-in--right { translate: 24px 0; }
  .fm-js .fm-products-in .fm-card { translate: -16px 0; }
  .fm-exit .fm-out-img, .fm-exit .fm-out-img-r { translate: 0 0; scale: calc(1 - var(--fm-out, 0) * 0.03); }
  .fm-exit .fm-out-shift { translate: 0 0; }
  .fm-cursor { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fm-site *, .fm-site *::before, .fm-site *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 200ms !important; transition-delay: 0ms !important; }
  .fm-js .fm-in, .fm-js .fm-letters .fm-ch, .fm-js .fm-products-in .fm-card, .fm-js .fm-products-in .fm-products, .fm-js .fm-products-in .fm-card__info, .fm-js .fm-ranked-in .fm-card__info { translate: none !important; }
  .fm-js [class*="fm-wipe"] img, .fm-js .fm-zoom-in img, .fm-js .fm-panel-reveal, .fm-js .fm-ranked-in .fm-card__media, .fm-frame { clip-path: none !important; scale: 1 !important; }
  .fm-js .fm-slide .fm-lines .fm-line > span, .fm-seq .fm-line > span, .fm-js .fm-rise-lines .fm-line > span { transform: none !important; }
  .fm-exit [class*="fm-out"], .fm-strip, .fm-slider .fm-slide__copy { translate: none !important; scale: 1 !important; opacity: 1 !important; }
  .fm-slide::after, .fm-frame::after { animation: none !important; transform: none !important; scale: 1 !important; }
  .fm-cursor { display: none; }
}