/**
 * INTERLUX — reference design (tema_nutu / indexut.html), 1:1.
 *
 * Sections marked "REFERENCE" are the reference stylesheet as written. The
 * only edits inside them are: the `.scene` poster and `.cta` photo move to
 * inline `style`/custom properties so WordPress can supply real URLs, and the
 * footer is addressed as `.nutu-footer`.
 *
 * Sections marked "INTEGRATION" exist because this stylesheet loads on top of
 * the theme's base layer and inside a WordPress/WooCommerce page: they cancel
 * base rules the reference does not have, wire real product photography into
 * the reference's drawn-door slots, and add the cart badge and keyboard access
 * the storefront needs. None of them change the reference's own values.
 *
 * Scoping: the reference uses generic class names (.product, .price, .section,
 * .lead, .step…) that WooCommerce and page content also use. Every rule for a
 * homepage-only block is therefore wrapped in `:where(.home)` — limited to the
 * front page, with its specificity unchanged. Only the main menu, footer,
 * buttons and intro rules apply site-wide.
 */

/* =========================================================================
 * REFERENCE — tokens, base
 * ====================================================================== */

:root{
  --ink:#171914;
  --muted:#6d7168;
  --paper:#f5f3ed;
  --white:#fff;
  --accent:#c79d66;
  --accent-dark:#9f7442;
  --line:rgba(23,25,20,.12);
  --shadow:0 24px 70px rgba(0,0,0,.16);
  --radius:28px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* The strip of canvas below the body takes the footer's colour. A page's
     height rounds up to a whole pixel, and that fraction of a pixel was
     showing the pale body background as a hairline under the footer. */
  background:#0f100e;
}
body:where(.home){
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x:hidden;
}

button,a{ -webkit-tap-highlight-color:transparent; }
img{max-width:100%;display:block}
::selection{background:#1e211c;color:#fff}

/* =========================================================================
 * INTEGRATION — neutralise the theme's base layer where the reference relies
 * on browser defaults (line-height, heading fonts, link colour, buttons).
 *
 * Every selector here is kept at element-level specificity (via :where) so it
 * wins over the base layer's `h2`, `p`, `a`, `strong`, `button` rules — this
 * sheet loads last — while every class rule of the reference above and below
 * still wins over it, exactly as it does in the reference document.
 * ====================================================================== */

body:where(.home){
  font-size:16px;
  line-height:normal;
  letter-spacing:0;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

/* The reference blocks that appear on every page (main menu, footer and the
   storefront overlays) carry the reference typography themselves, so they
   look the same on the homepage and on shop, product, cart and content pages,
   whose body typography stays the theme's own. */
.mm-header,.nutu-footer,.ilx-search,.ilx-drawer,.ilx-minicart{
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:normal;
  letter-spacing:0;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) :is(h1,h2,h3,h4,h5,h6){
  margin:0;
  font-family:inherit;
  font-weight:bold;
  font-size:inherit;
  line-height:normal;
  letter-spacing:normal;
  color:inherit;
  text-wrap:initial;
}
:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) h4{font-size:1em}

:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) p{margin:0;text-wrap:initial}
:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) strong{font-weight:bold;color:inherit}
:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) small{font-size:smaller}
:where(.hero-copy,.mm-header,.home .content-hero,.home .trust,.home .section,.home .cta,.nutu-footer) ul{margin:0;padding:0;list-style:none}

:where(.intro,.mm-header,.nutu-footer,.nutu-home,.ilx-search,.ilx-drawer,.ilx-minicart) a{color:inherit;text-decoration:none;transition:none}
:where(.intro,.mm-header,.nutu-footer,.nutu-home,.ilx-search,.ilx-drawer,.ilx-minicart) a:hover{color:inherit;text-decoration:none}

:where(.mm-header,.home .section,.home .content-hero,.home .cta) button{
  margin:0;
  padding:0;
  min-height:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:normal;
  letter-spacing:normal;
  text-transform:none;
  box-shadow:none;
  cursor:pointer;
}
:where(.mm-header,.home .section,.home .content-hero,.home .cta) button:hover{background:transparent;border-color:transparent;color:inherit;box-shadow:none}

/* Reference class rules that the base `a:hover` / `button:hover` (0,1,1)
   would otherwise beat on hover — restated at class+hover specificity. */
:where(.home) .filter:hover{background:transparent;border-color:var(--line);color:var(--muted)}
:where(.home) .filter.active:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink);border-color:rgba(23,25,20,.18)}
.btn-gold:hover{background:var(--accent);border-color:var(--accent);color:#17140f}
.mm-link:hover{color:inherit}
.mm-item:hover .mm-link:hover{color:var(--mm-wine)}

/* =========================================================================
 * REFERENCE — intro / scroll experience
 * ====================================================================== */

.intro{
  position:relative;
  height:400vh;   /* reference: 500vh — shortened so the site arrives sooner */
  background:#0a0b09;
}

.scene{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:#0a0b09 center / cover no-repeat;  /* poster set inline by the template */
  isolation:isolate;
}

/* Scroll-driven film (see intro.js). The first frame is also the scene
   background, so something shows before the video loads. */
/* A few pixels of overscan: some GPUs bleed a light row at the video's
   edges when scaling it; this keeps any such edge outside the screen. */
#film{
  position:absolute;
  top:-4px;
  left:-4px;
  width:calc(100% + 8px);
  height:calc(100% + 8px);
  max-width:none;   /* the base layer caps video at 100%: that left a 4px poster strip at the right edge */
  max-height:none;
  display:block;
  object-fit:cover;
  pointer-events:none;
}

.interior-fill{
  position:absolute;
  inset:0;
  z-index:12;
  background:var(--paper);
  opacity:0;
  pointer-events:none;
}

:where(.home) .handle{
  position:absolute;
  right:12%;
  top:49%;
  width:8%;
  aspect-ratio:1;
  border-radius:50%;
  background:#d4b17c;
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
}

.scene-shade{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 70%,rgba(0,0,0,.55)),
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 24%,transparent 76%,rgba(0,0,0,.22));
}

:where(.intro,.nutu-footer) .brand{
  font-size:clamp(20px,2vw,31px);
  font-weight:750;
  letter-spacing:.24em;
}

.hero-copy{
  position:absolute;
  z-index:14;
  left:50%;
  top:50%;
  width:min(900px,88vw);
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  text-shadow:0 3px 30px rgba(0,0,0,.34);
  will-change:opacity, transform;
}

:where(.home) .eyebrow{
  margin:0 0 18px;
  font-size:12px;
  letter-spacing:.28em;
  font-weight:700;
  text-transform:uppercase;
}

.hero-copy h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(47px,7vw,116px);
  line-height:.94;
  font-weight:400;
  letter-spacing:-.055em;
}

.hero-copy p{
  width:min(660px,86vw);
  margin:24px auto 0;
  font-size:clamp(15px,1.25vw,20px);
  line-height:1.6;
  color:rgba(255,255,255,.84);
}

.scroll-cue{
  position:absolute;
  z-index:15;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:opacity .25s ease;
}

.scroll-line{
  width:1px;
  height:52px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}

.scroll-line::after{
  content:"";
  display:block;
  width:100%;
  height:45%;
  background:#fff;
  animation:drop 1.8s ease-in-out infinite;
}

@keyframes drop{
  0%{transform:translateY(-130%)}
  70%,100%{transform:translateY(240%)}
}

/* =========================================================================
 * INTEGRATION — intro: guidance, quick menu, file swap
 *
 * Written for visitors who do not know what "scroll" means: a plain
 * Romanian hint with a moving arrow, a clear button that goes straight to the
 * site, and a small menu to the main pages. All of it fades out as soon as the
 * door starts to open (intro.js drives the opacity).
 * ====================================================================== */

/* ---------- Opening screen ----------
   On a first visit the page waits behind frosted glass, the poster showing
   through it, while the film downloads (loader in inc/assets.php, lift in
   intro.js). Only the wordmark and a gold line with the download's progress
   sit on the glass. When the film's first frame is on screen the glass
   clears in place: the frame under it is the very image the glass was over.
   Scrolling is held by intro.js (wheel, touch, keys, and any scroll put back
   to 0) rather than by overflow:hidden on the root: WebKit leaves sticky
   elements unpinned after the root's overflow changes, and the scene would
   scroll away with the page until the next scroll cycle. */
.opening{
  display:none;
  position:fixed;
  inset:0;
  z-index:1200;
  place-items:center;
  touch-action:none;
  background:linear-gradient(165deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.28) 50%,rgba(214,186,140,.28) 100%);
  -webkit-backdrop-filter:blur(34px) saturate(1.25);
  backdrop-filter:blur(34px) saturate(1.25);
  transition:opacity 1s cubic-bezier(.22,1,.36,1);
}
html.ilx-opening .opening,.opening.is-lifting{display:grid}
.opening.is-lifting{opacity:0;pointer-events:none}
.opening.is-done{display:none}
/* Light on the glass: a soft bloom from the top corner, a hairline at the edges. */
.opening::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.42),transparent 62%);pointer-events:none}
.opening::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.25);pointer-events:none}
.opening__body{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  animation:openingIn 1s cubic-bezier(.22,1,.36,1) both;
  transition:opacity .55s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.opening.is-lifting .opening__body{opacity:0;transform:translateY(-6px) scale(.985)}
/* The wordmark on the glass: polished silver, a soft glint passing over it
   now and then. The gradient is clipped to the letters; a drop shadow (not a
   text-shadow, which would show through the clipped letters) lifts them off
   the pale glass. */
.opening__brand{
  color:#eceef0;
  font-size:clamp(24px,3vw,34px);
  font-weight:800;
  letter-spacing:.34em;
  text-indent:.34em;
  white-space:nowrap;
  background:linear-gradient(105deg,#c6cbd1 0%,#f6f7f8 16%,#a3a9b1 34%,#dfe3e7 45%,#fff 50%,#dfe3e7 55%,#aeb4bc 68%,#f4f5f6 84%,#cbd0d5 100%);
  background-size:250% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(30,27,22,.42)) drop-shadow(0 6px 18px rgba(30,27,22,.24));
  animation:openingGlint 4s cubic-bezier(.45,0,.2,1) .6s infinite;
}
.opening__brand span{color:inherit;-webkit-text-fill-color:transparent}
@keyframes openingGlint{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.opening__bar{position:relative;display:block;width:min(220px,52vw);height:1px;overflow:hidden;background:rgba(23,23,20,.16)}
.opening__bar i{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#9f7442,#c79d66);
  transform:scaleX(var(--p,0));
  transform-origin:left;
  transition:transform .3s ease;
}
@keyframes openingIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.opening,.opening__body,.opening__brand,.opening__bar i{transition:none;animation:none}}

/* ---- hint + "Intră pe site" ---- */
.scroll-cue{
  bottom:max(28px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  gap:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
  transition:none;
}
.scroll-cue__text{white-space:nowrap}
.scroll-cue__arrow{
  width:14px;
  height:14px;
  margin:2px 0 8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  animation:cueNudge 1.6s ease-in-out infinite;
}
@keyframes cueNudge{
  0%,100%{translate:0 -3px;opacity:.55}
  50%{translate:0 5px;opacity:1}
}

.intro-enter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  margin:0;
  padding:0 26px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:#171914;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  text-transform:none;
  text-shadow:none;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.intro-enter span{transition:transform .2s ease}
.intro-enter:hover,
.intro-enter:focus-visible{
  background:#fff;
  color:#171914;
  border:0;
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.32);
}
.intro-enter:hover span{transform:translateX(4px)}
.intro-enter:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- top bar: wordmark + quick menu ---- */
.intro-bar{
  position:absolute;
  z-index:16;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:max(22px, env(safe-area-inset-top, 0px)) clamp(18px,3.2vw,48px) 0;
  color:#fff;
}

.intro-brand{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2em;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
  white-space:nowrap;
}

.intro-nav ul{
  display:flex;
  gap:2px;
  margin:0;
  padding:4px;
  list-style:none;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(18,18,16,.24);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.intro-nav li{margin:0}
.intro-nav a{
  display:block;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.intro-nav a:hover,
.intro-nav a:focus-visible{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.intro-nav a:focus-visible{outline:2px solid #fff;outline-offset:1px}

.intro-menu-toggle{
  display:none;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin:0;
  padding:0 16px 0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(18,18,16,.3);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
}
.intro-menu-toggle:hover,
.intro-menu-toggle:focus-visible{
  background:rgba(18,18,16,.45);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.intro-menu-toggle__icon{
  position:relative;
  display:block;
  width:18px;
  height:12px;
}
.intro-menu-toggle__icon i{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease, top .25s ease;
}
.intro-menu-toggle__icon i:first-child{top:1px}
.intro-menu-toggle__icon i:last-child{top:9px}
.intro-bar.is-open .intro-menu-toggle__icon i:first-child{top:5px;transform:rotate(45deg)}
.intro-bar.is-open .intro-menu-toggle__icon i:last-child{top:5px;transform:rotate(-45deg)}

@media (max-width:760px){
  .intro-menu-toggle{display:inline-flex}
  .intro-nav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    right:clamp(18px,3.2vw,48px);
    min-width:210px;
  }
  .intro-bar.is-open .intro-nav{display:block}
  .intro-bar.is-open .intro-nav ul{animation:introMenuIn .32s cubic-bezier(.22,1,.36,1) backwards}
  .intro-nav ul{
    flex-direction:column;
    gap:2px;
    padding:8px;
    border-radius:20px;
    background:rgba(18,18,16,.62);
  }
  .intro-nav a{
    padding:14px 16px;
    border-radius:12px;
    font-size:16px;
    letter-spacing:.01em;
  }
  .intro-brand{font-size:16px;letter-spacing:.18em}
}
@keyframes introMenuIn{
  from{opacity:0;translate:0 -8px;scale:.97}
  to{opacity:1;translate:0 0;scale:1}
}

/*
 * Leaving and returning are driven by the scroll position in intro.js, in
 * step with the "Intră pe site" button, so no CSS transitions here: they
 * would lag behind the scroll. Hover effects keep their own transitions.
 */

/* =========================================================================
 * REFERENCE — main site
 * ====================================================================== */

.site{
  position:relative;
  z-index:20;
  background:var(--paper);
  box-shadow:0 -30px 100px rgba(0,0,0,.18);
}

/* ---------- MAIN MENU (mega menu) ---------- */
.mm-header{
  --mm-ink:#171714;
  --mm-line:#e8e3da;
  --mm-wine:#8d2025;
  --mm-gold:#c79d66;
  --mm-ease:cubic-bezier(.22,1,.36,1);
  position:sticky;
  top:0;
  z-index:100;        /* over page furniture such as WooCommerce's gallery zoom (99); under the search and cart overlays (400) */
  color:var(--mm-ink);
}

/* Frosted rather than opaque: the page moves under the bar instead of behind a
   wall. The pane is a layer of its own — a backdrop filter on the header would
   make the header the containing block for the scrim below, which has to cover
   the whole window. */
.mm-glass{
  position:absolute;
  inset:0;
  z-index:-2;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border-bottom:1px solid rgba(32,30,26,.08);
  transition:background .5s ease, box-shadow .5s ease, border-color .5s ease;
}

/* Once the page has moved under it, the bar lifts off the page: it gains a
   shadow and a gold thread along its lower edge. */
.mm-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,157,102,.65) 20%,rgba(199,157,102,.65) 80%,transparent);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.mm-header.is-stuck .mm-glass{background:rgba(255,255,255,.88);box-shadow:0 14px 40px rgba(28,24,18,.10)}
.mm-header.is-stuck::after{opacity:1}

/* Over the film the bar is still travelling; it earns its shadow only once it
   has docked. */
.home .mm-header.is-gated:not(.is-docked) .mm-glass{background:rgba(255,255,255,.72);box-shadow:none}
.home .mm-header.is-gated:not(.is-docked)::after{opacity:0}

/* An open panel dims the page under it, so the menu reads as something that
   has opened over the site rather than as part of the bar. The scrim belongs to
   the header, underneath its frosted pane: the header is painted as one piece
   above the page, so everything inside it — this included — clears the page
   whatever the theme wraps the header in. */
/* The scrim only exists while a panel is open. Kept hidden the rest of the
   time, a window-sized fixed layer would still be one more layer for the
   browser to carry through every frame of scrolling. */
/* A panel is open when assets/js/theme.js marks its entry .is-open, once the
   pointer has come to rest on it; touch screens and pages without script
   open it on :hover, as before. The script also marks the header itself
   (.has-open-panel), and the scrim follows that mark: Safari does not
   re-check :has() on the header when an entry's class changes, so a scrim
   tied to :has() showed the first time only. :has() is left for pages
   without script. */
.mm-header.has-open-panel::before,
html:not(.ilx-js) .mm-header:has(.mm-item:hover .mm-panel)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:rgba(18,16,13,.34);
  pointer-events:none;
  animation:mmScrim .45s ease both;
}
@keyframes mmScrim{from{opacity:0}to{opacity:1}}

/* With the page dimmed behind it, the bar stops being see-through. */
.mm-header.has-open-panel .mm-glass,
html:not(.ilx-js) .mm-header:has(.mm-item:hover .mm-panel) .mm-glass{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

.mm-main{
  height:82px;
  max-width:1500px;
  margin:0 auto;
  padding:0 34px;
  display:grid;
  grid-template-columns:190px 1fr 110px;
  align-items:center;
  gap:24px;
}

.mm-logo{
  position:relative;
  font-weight:800;
  font-size:23px;
  letter-spacing:.115em;
  white-space:nowrap;
  transition:letter-spacing .6s var(--mm-ease);
}
.mm-logo:hover{letter-spacing:.135em}
.mm-logo span{color:var(--mm-wine);transition:color .4s ease}

.mm-nav{
  display:flex;
  align-items:stretch;
  justify-content:center;
  height:100%;
}

/* One marker for the whole row: it slides and stretches from the entry the
   pointer leaves to the one it arrives at, instead of each entry drawing and
   erasing a line of its own. */
.mm-ink{
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:var(--ink-w,0px);
  border-radius:2px;
  background:linear-gradient(90deg,var(--mm-wine),#b4343a);
  transform:translateX(var(--ink-x,0px));
  opacity:0;
  transition:transform .55s var(--mm-ease), width .55s var(--mm-ease), opacity .3s ease;
  pointer-events:none;
}
.mm-nav.is-marking .mm-ink{opacity:1}

.mm-item{display:flex;align-items:center}

.mm-link{
  position:relative;
  height:82px;
  padding:0 28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  font-size:12px;
  font-weight:700;
  letter-spacing:.075em;
  white-space:nowrap;
  transition:color .22s ease;
}

/* UȘI is a short word over the widest panel. Its link reaches further out —
   well to the left, where nothing sits, and to the right by less than
   PARCHET's own padding — so the hand can drop down into the panel without
   brushing the next entry. The negative margins keep every word in place. */
.mm-item:first-child .mm-link{z-index:1;padding:0 46px 0 64px;margin:0 -18px 0 -36px}

/* Less room beside the logo: the entries close up a little. */
@media (max-width:1280px){
  .mm-link{padding:0 24px}
  .mm-item:first-child .mm-link{padding:0 40px 0 60px;margin:0 -16px 0 -36px}
}
@media (max-width:1180px){
  .mm-link{padding:0 20px}
  .mm-item:first-child .mm-link{padding:0 34px 0 56px;margin:0 -14px 0 -36px}
}

/* The label and its understudy: one rises out of the top as the other arrives
   from below, in a single movement. The clipping box is the label itself —
   exactly one line tall — so the copy waiting below it is never in sight. */
.mm-label{
  position:relative;
  display:block;
  overflow:hidden;
  line-height:1.5;
}
.mm-label i{
  display:block;
  font-style:normal;
  transition:transform .55s var(--mm-ease);
}
.mm-label::before{
  content:attr(data-label);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  color:var(--mm-wine);
  transform:translateY(100%);
  transition:transform .55s var(--mm-ease);
}
.mm-item:hover .mm-label i{transform:translateY(-100%)}
.mm-item:hover .mm-label::before{transform:translateY(0)}
.mm-item.is-current .mm-link{color:var(--mm-wine)}

.mm-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

/* Round targets that fill with ink under the pointer, the line drawing
   inverting with them. */
.mm-icon{
  position:relative;
  width:40px;
  height:40px;
  display:inline-grid !important;
  place-items:center;
  border-radius:50% !important;
  color:var(--mm-ink);
  transition:background .4s ease, color .4s ease, transform .5s var(--mm-ease);
}
.mm-icon svg{
  width:19px;
  height:19px;
  transition:transform .5s var(--mm-ease);
}
.mm-icon:hover{background:var(--mm-ink) !important;color:#fff}
.mm-icon:active{transform:scale(.92)}
.mm-icon[data-ilx-search-open]:hover svg{transform:rotate(-12deg) scale(1.06)}
.mm-icon--cart:hover svg{transform:translateY(-1px) scale(1.06)}

.mm-panel{
  display:none;
  position:absolute;
  left:50%;
  top:82px;
  width:min(1240px, calc(100vw - 48px));
  transform:translateX(-50%);
  padding:0;
  background:#fff;
  color:#282824;
  border:1px solid rgba(44,40,34,.08);
  border-top:0;
  border-radius:0 0 24px 24px;
  box-shadow:0 40px 100px rgba(28,24,18,.24);
  text-align:left;
  overflow:hidden;
  animation:mmIn .5s cubic-bezier(.22,1,.36,1) both;
}

/* A gold thread across the top of the panel, drawn open with it. */
.mm-panel::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,157,102,.7) 22%,rgba(199,157,102,.7) 78%,transparent);
  transform:scaleX(0);
  animation:mmThread .7s .08s cubic-bezier(.22,1,.36,1) both;
}

.mm-item.is-open .mm-panel,
html:not(.ilx-js) .mm-item:hover .mm-panel{display:block}
@media (hover:none){
  .mm-item:hover .mm-panel{display:block}
}

@keyframes mmIn{
  from{opacity:0;transform:translate(-50%,-14px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes mmThread{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* ---------- The explorer: groups | categories | collections | preview ----------
   Each pane opens the next one beside it, so the hand only ever moves one pane
   to the right. The panes arrive a beat apart when the panel opens. */
@keyframes mmColumn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes mmSwap{
  from{opacity:0;transform:translateX(10px)}
  to{opacity:1;transform:none}
}

.mm-explorer{display:grid;min-height:432px}
.mm-explorer--multi{grid-template-columns:246px 292px minmax(0,1fr) 300px}
.mm-explorer--single{grid-template-columns:300px minmax(0,1fr) 300px}
.mm-explorer--leaf{grid-template-columns:minmax(0,1fr) 300px;min-height:0}
/* An entry that is one category needs no room for panes it does not have. */
.mm-panel--leaf{width:min(960px, calc(100vw - 48px))}

.mm-explorer>.mm-pane{animation:mmColumn .55s cubic-bezier(.22,1,.36,1) both}
.mm-explorer>.mm-pane:nth-child(1){animation-delay:.05s}
.mm-explorer>.mm-pane:nth-child(2){animation-delay:.1s}
.mm-explorer>.mm-pane:nth-child(3){animation-delay:.15s}
.mm-explorer>.mm-pane:nth-child(4){animation-delay:.2s}

.mm-pane{position:relative;min-width:0;padding:38px 30px 34px}

/* Panes are divided by a hairline that fades out before either edge. */
.mm-pane+.mm-pane::before{
  content:"";
  position:absolute;
  left:0;top:34px;bottom:34px;
  width:1px;
  background:linear-gradient(transparent,rgba(23,25,20,.11) 16%,rgba(23,25,20,.11) 84%,transparent);
}

/* The label that opens every pane: a gold rule and small capitals. (Not
   .mm-label — that name belongs to the nav link's two-copy label.) */
.mm-panel .mm-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding-left:16px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.3;
  text-transform:uppercase;
  color:#9f7442;
}
.mm-panel .mm-kicker::before{content:"";width:18px;height:1px;flex:none;background:var(--mm-gold)}
.mm-pane--sub .mm-kicker,.mm-pane--intro .mm-kicker{padding-left:0}

/* ---------- entries: groups and categories ---------- */
.mm-nodes{position:relative;margin:0;padding:0;list-style:none}
/* The theme's content styles space list items apart; the panel sets its own rhythm. */
.mm-panel li{margin:0;padding:0}

/* One gold marker per list, sliding to whichever entry is open. */
.mm-nodes[data-mm-rail]::before{
  content:"";
  position:absolute;
  z-index:1;          /* over the open entry's tinted background */
  left:0;top:0;
  width:2px;
  height:var(--rail-h,0px);
  border-radius:2px;
  background:linear-gradient(var(--mm-gold),#9f7442);
  transform:translateY(var(--rail-y,0px));
  opacity:0;
  transition:transform .5s var(--mm-ease), height .5s var(--mm-ease), opacity .3s ease;
}
.mm-nodes.has-rail::before{opacity:1}

.mm-panel .mm-node{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:1px 0;
  padding:10px 14px 10px 16px;
  border-radius:0 12px 12px 0;
  color:var(--mm-ink);
  transition:background .35s ease, color .3s ease;
}
.mm-node__title{flex:1;min-width:0}
.mm-node__count{
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:#a39e94;
  transition:color .3s ease;
}
.mm-node__chev{
  width:14px;height:14px;
  flex:none;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .35s ease, transform .45s var(--mm-ease);
}

/* Every entry of the panel — group, category — is set alike, so the columns
   read as one list of choices whichever panel is open. */
.mm-node--group .mm-node__title,
.mm-node--item .mm-node__title{font-size:14.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35}

/* Pointing is answered by assets/js/theme.js (.is-pointed) once the hand has
   arrived, so an entry only passed over does not light up; plain :hover is the
   fallback without script. */
.mm-panel .mm-node.is-pointed,.mm-panel .mm-node:focus-visible,
html:not(.ilx-js) .mm-panel .mm-node:hover{color:var(--mm-wine)}
.mm-panel .mm-node.is-active{background:#f5f3ed;color:var(--mm-wine)}
.mm-node.is-active .mm-node__count{color:#9f7442}
.mm-node.has-children .mm-node__chev{opacity:.3;transform:none}
/* The arrow only promises more where there is more inside. */
.mm-node.has-children.is-active .mm-node__chev{opacity:1;transform:translateX(3px)}

/* ---------- panes that change with the entry ---------- */
.mm-list,.mm-sub{display:none}
.mm-list.is-active,.mm-sub.is-active{display:block;animation:mmSwap .45s var(--mm-ease) both}
.mm-list.is-active li,.mm-sub.is-active li{animation:mmSwap .45s var(--mm-ease) both}
.mm-list.is-active li:nth-child(2),.mm-sub.is-active li:nth-child(2){animation-delay:.025s}
.mm-list.is-active li:nth-child(3),.mm-sub.is-active li:nth-child(3){animation-delay:.05s}
.mm-list.is-active li:nth-child(4),.mm-sub.is-active li:nth-child(4){animation-delay:.075s}
.mm-list.is-active li:nth-child(5),.mm-sub.is-active li:nth-child(5){animation-delay:.1s}
.mm-list.is-active li:nth-child(6),.mm-sub.is-active li:nth-child(6){animation-delay:.125s}
.mm-list.is-active li:nth-child(n+7),.mm-sub.is-active li:nth-child(n+7){animation-delay:.15s}

.mm-panel .mm-heading{
  margin:0 0 22px;
  text-transform:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.1;
  color:var(--mm-ink);
}
.mm-panel .mm-meta{margin:-10px 0 22px;font-size:13px;color:#8a857b}
.mm-panel .mm-lede{margin:0 0 14px;max-width:36ch;font-size:15px;line-height:1.6;color:#5f5a52}

/* Collections: two columns of names, each drawing a gold dash as it is pointed at. */
.mm-leaves{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  margin:0;
  padding:0 0 0 14px;
  list-style:none;
}
.mm-panel .mm-leaf{
  position:relative;
  display:block;
  padding:9px 0;
  font-size:14.5px;
  color:#3b3934;
  transition:color .3s ease, transform .45s var(--mm-ease);
}
.mm-panel .mm-leaf::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:8px;
  height:1px;
  background:var(--mm-gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--mm-ease);
}
/* The collection of the page the visitor is on: set in wine, its dash drawn. */
.mm-panel .mm-leaf.is-current{color:var(--mm-wine);font-weight:600}
.mm-panel .mm-leaf.is-current::before{transform:scaleX(1)}
.mm-panel .mm-leaf.is-pointed,.mm-panel .mm-leaf:focus-visible,
html:not(.ilx-js) .mm-panel .mm-leaf:hover{color:var(--mm-wine);transform:translateX(10px)}
.mm-panel .mm-leaf.is-pointed::before,.mm-panel .mm-leaf:focus-visible::before,
html:not(.ilx-js) .mm-panel .mm-leaf:hover::before{transform:scaleX(1)}

.mm-panel .mm-all{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:24px 0 0 16px;
  padding:9px 0 4px;
  color:var(--mm-ink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid #b9b1a5;
  transition:color .3s ease, border-color .3s ease;
}
.mm-pane--sub .mm-all,.mm-pane--intro .mm-all{margin-left:0}
.mm-all span{display:inline-block;transition:transform .45s var(--mm-ease)}
.mm-panel .mm-all:hover{color:var(--mm-wine);border-color:var(--mm-wine)}
.mm-all:hover span{transform:translateX(5px)}
.mm-actions-row{display:flex;flex-wrap:wrap;gap:6px 28px}
.mm-pane--intro .mm-heading{font-size:38px}
.mm-pane--intro .mm-lede{margin-bottom:26px}
/* Nothing to shelve: the introduction sits in the middle of the panel's height. */
.mm-pane--intro.is-bare{display:flex;flex-direction:column;justify-content:center;padding-bottom:48px}
.mm-pane--intro.is-bare .mm-lede{margin-bottom:34px}

/* ---------- a shelf of products, for categories without collections ---------- */
.mm-shelf{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:4px 0 2px;
  padding:0;
  list-style:none;
}
.mm-panel .mm-product{display:flex;flex-direction:column;gap:4px;color:var(--mm-ink)}
.mm-product__stage{
  position:relative;
  display:block;
  aspect-ratio:1;
  margin-bottom:8px;
  overflow:hidden;
  border-radius:14px;
  background:#f5f3ed;
  transition:background .4s ease, box-shadow .5s ease;
}
.mm-product__stage img{
  position:absolute;
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
  max-width:none;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .8s var(--mm-ease);
}
.mm-product__name{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  transition:color .3s ease;
}
.mm-product__price{font-size:12px;font-variant-numeric:tabular-nums;color:#9f7442}
.mm-nowrap{white-space:nowrap}
/* In the wide pane of a single-group entry the tiles would grow too large. */
.mm-explorer--single .mm-shelf{max-width:500px}
.mm-panel .mm-product.is-pointed .mm-product__stage,
.mm-panel .mm-product:focus-visible .mm-product__stage,
html:not(.ilx-js) .mm-panel .mm-product:hover .mm-product__stage{background:#efebe3;box-shadow:inset 0 0 0 1px rgba(199,157,102,.45)}
.mm-panel .mm-product.is-pointed img,.mm-panel .mm-product:focus-visible img,
html:not(.ilx-js) .mm-panel .mm-product:hover img{transform:scale(1.06)}
.mm-panel .mm-product.is-current .mm-product__stage{box-shadow:inset 0 0 0 1px rgba(199,157,102,.45)}
.mm-panel .mm-product.is-current .mm-product__name,
.mm-panel .mm-product.is-pointed .mm-product__name,
html:not(.ilx-js) .mm-panel .mm-product:hover .mm-product__name{color:var(--mm-wine)}
/* The last tile leads to every product of the category: the same pale tile
   as the products, holding only an arrow in a fine ring. Once the hand has
   arrived on it the tile deepens a shade, the ring darkens and the arrow moves
   along — nothing more. */
.mm-panel .mm-product--all .mm-see-all{display:grid;place-items:center}
.mm-panel .mm-product--all.is-pointed .mm-see-all,
.mm-panel .mm-product--all:focus-visible .mm-see-all,
html:not(.ilx-js) .mm-panel .mm-product--all:hover .mm-see-all{background:#efebe3;box-shadow:none}
.mm-see-all__arrow{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(23,23,20,.2);
  border-radius:50%;
  color:var(--mm-ink);
  transition:border-color .45s ease;
}
.mm-see-all__arrow svg{width:17px;height:17px;transition:transform .6s var(--mm-ease)}
.mm-product--all.is-pointed .mm-see-all__arrow,
.mm-product--all:focus-visible .mm-see-all__arrow,
html:not(.ilx-js) .mm-product--all:hover .mm-see-all__arrow{border-color:rgba(23,23,20,.55)}
.mm-product--all.is-pointed .mm-see-all__arrow svg,
.mm-product--all:focus-visible .mm-see-all__arrow svg,
html:not(.ilx-js) .mm-product--all:hover .mm-see-all__arrow svg{transform:translateX(4px)}
.mm-pane--intro .mm-see-all__arrow{width:50px;height:50px}

.mm-pane--intro .mm-shelf{gap:18px;margin-bottom:8px}
.mm-pane--intro .mm-product__stage{aspect-ratio:4/3}

/* ---------- an empty category: an invitation instead of a blank ---------- */
.mm-invite{
  position:relative;
  max-width:380px;
  margin:8px 0 0;
  padding:22px 24px 22px 60px;
  border-radius:16px;
  background:linear-gradient(135deg,#f7f4ee,#f1ece2);
}
.mm-invite__mark{
  position:absolute;
  left:22px;top:24px;
  width:22px;height:22px;
  border:1px solid var(--mm-gold);
  border-radius:50%;
}
.mm-invite__mark::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:var(--mm-gold);
  opacity:.55;
}
.mm-invite p{margin:0;font-size:14.5px;line-height:1.6;color:#5f5a52}

/* ---------- the preview: a door from whatever is under the pointer ---------- */
.mm-pane--preview{padding:20px;background:#f5f3ed}
.mm-pane--preview::before{display:none}

.mm-panel .mm-preview{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:390px;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  color:var(--mm-ink);
  box-shadow:0 1px 0 rgba(23,25,20,.05);
  transition:box-shadow .5s ease, transform .5s var(--mm-ease);
}
.mm-panel .mm-preview:hover{box-shadow:0 20px 46px rgba(28,24,18,.14);transform:translateY(-2px)}

.mm-preview__stage{position:relative;flex:1;min-height:236px;overflow:hidden;background:#efebe3}
/* Two classes deep on purpose: WooCommerce's layout sheet sets every image of
   a shop page (categories, products) to height:auto with a selector that
   outweighs a single class, which let the door grow past its stage there and
   showed only its top half. */
.mm-panel .mm-preview__img{
  position:absolute;
  inset:18px 16px;
  width:calc(100% - 32px);
  height:calc(100% - 36px);
  max-width:none;
  object-fit:contain;
  mix-blend-mode:multiply;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .45s ease, transform .8s var(--mm-ease);
}
.mm-panel .mm-preview__img.is-shown{opacity:1;transform:none}
.mm-panel .mm-preview__img[hidden]{display:none}
/* No photograph: a framed wordmark, so the card still looks finished. */
.mm-preview__mark{
  position:absolute;
  inset:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(159,116,66,.28);
  border-radius:12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  letter-spacing:.42em;
  text-indent:.42em;
  color:rgba(23,25,20,.38);
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.75),transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
.mm-preview__mark::before,.mm-preview__mark::after{content:"";width:28px;height:1px;background:var(--mm-gold)}
.mm-preview__stage.is-empty .mm-preview__mark{opacity:1}

.mm-preview__body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px}
.mm-preview__eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9f7442}
.mm-preview__title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.15;
  transition:opacity .3s ease, transform .45s var(--mm-ease);
}
.mm-preview__meta{min-height:1.3em;font-size:12.5px;color:#8a857b;transition:opacity .3s ease}
.mm-preview__cta{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mm-preview__cta span{display:inline-block;transition:transform .45s var(--mm-ease)}
.mm-panel .mm-preview:hover .mm-preview__cta span{transform:translateX(5px)}
.mm-preview.is-swapping .mm-preview__title{animation:mmSwap .45s var(--mm-ease) both}
.mm-preview.is-swapping .mm-preview__meta{animation:mmSwap .45s .04s var(--mm-ease) both}

/* Narrower desktops: the panes give up width first, then the preview goes. */
@media (max-width:1280px){
  .mm-explorer--multi{grid-template-columns:222px 262px minmax(0,1fr) 262px}
  .mm-explorer--single{grid-template-columns:270px minmax(0,1fr) 262px}
  .mm-pane{padding:34px 24px 30px}
  .mm-panel .mm-heading{font-size:27px}
}
@media (max-width:1150px){
  .mm-explorer--multi{grid-template-columns:210px 246px minmax(0,1fr)}
  .mm-explorer--single{grid-template-columns:250px minmax(0,1fr)}
  .mm-explorer--multi .mm-pane--preview,.mm-explorer--single .mm-pane--preview{display:none}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  transition:.25s ease;
}

.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:rgba(23,25,20,.18)}
.btn-gold{background:var(--accent);border-color:var(--accent);color:#17140f}

:where(.home) .content-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:82vh;
  /* Top trimmed from the reference's clamp(70px,9vw,145px): under the docked
     menu that band read as empty. Any spare min-height now goes below the
     content instead of being split above it. */
  padding:clamp(32px,3.6vw,56px) clamp(22px,6vw,100px) clamp(70px,9vw,145px);
  gap:7vw;
  align-items:center;
  align-content:start;
  overflow:hidden;
}

:where(.home) .content-hero h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(52px,6.2vw,105px);
  line-height:.95;
  letter-spacing:-.055em;
  max-width:920px;
}

:where(.home) .content-hero h2 em{
  color:var(--accent-dark);
  font-style:italic;
}

:where(.home) .lead{
  margin:28px 0 34px;
  max-width:650px;
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.65;
  color:var(--muted);
}

:where(.home) .button-row{display:flex;gap:12px;flex-wrap:wrap}

:where(.home) .hero-door-card{
  min-height:620px;
  position:relative;
  border-radius:38px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 25%,rgba(255,255,255,.9),transparent 34%),
    linear-gradient(145deg,#dedbd1,#a9aaa3);
  box-shadow:var(--shadow);
  isolation:isolate;
}

:where(.home) .architecture-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 22%,rgba(255,255,255,.3) 22% 22.4%,transparent 22.4% 72%,rgba(255,255,255,.25) 72% 72.3%,transparent 72.3%),
    linear-gradient(0deg,transparent 0 22%,rgba(255,255,255,.26) 22% 22.3%,transparent 22.3%);
}

:where(.home) .show-door{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(48%,270px);
  height:76%;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(0deg,#68472f 0 36px,#714e33 36px 72px);
  border:14px solid #20211e;
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

:where(.home) .show-door::before{
  content:"";
  position:absolute;
  inset:6% 8%;
  border:1px solid rgba(255,255,255,.2);
}

:where(.home) .show-door .handle{
  width:18px;
  height:18px;
  right:8%;
  background:#e1c08c;
}

:where(.home) .floating-tag{
  position:absolute;
  left:26px;
  top:26px;
  padding:11px 15px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  backdrop-filter:blur(12px);
  font-size:12px;
  font-weight:700;
}

:where(.home) .floating-price{
  position:absolute;
  right:24px;
  bottom:24px;
  padding:18px 19px;
  background:rgba(21,23,18,.9);
  color:#fff;
  border-radius:18px;
  backdrop-filter:blur(12px);
  font-size:12px;
  line-height:1.3;
}

:where(.home) .floating-price strong{
  display:block;
  font-size:22px;
  margin-top:4px;
}

/* The fact bands. Both bars on the page are this one block, so a change here
   is a change to both.
   The band is lit rather than flat: a breath of warm light down its face, a
   gold hairline along its top edge, and dividers that fade out at both ends
   instead of cutting it into four boxes. Each fact opens with a gold rule and
   a small capital label, then states itself in the display serif the section
   headings use — the bar speaks in the page's own voice instead of shouting
   in bold. */
:where(.home) .trust{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,#fdfcfa 55%,#faf8f2 100%);
}

:where(.home) .trust::before{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,157,102,.5) 16%,rgba(199,157,102,.5) 84%,transparent);
  pointer-events:none;
}

:where(.home) .trust-item{
  position:relative;
  padding:clamp(34px,3.3vw,54px) clamp(22px,3vw,48px);
  border-right:0;
}

/* The divider fades away before it reaches the band's edges. */
:where(.home) .trust-item:nth-child(n+2)::before{
  content:"";
  position:absolute;
  left:0;top:15%;bottom:15%;
  width:1px;
  background:linear-gradient(transparent,rgba(23,25,20,.16) 18%,rgba(23,25,20,.16) 82%,transparent);
}

/* The fact sets the width of its own block, and that block is centred in the
   cell — so the fact reads centred while the label above it and the note below
   it both begin exactly where the fact begins. */
:where(.home) .trust-cell{
  display:block;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}

:where(.home) .trust-item .trust-key{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:15px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-dark);
}

:where(.home) .trust-item .trust-key::before{
  content:"";
  width:22px;
  height:1px;
  flex:none;
  background:var(--accent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}

:where(.home) .trust-item strong{
  display:block;
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(19px,1.5vw,25px);
  line-height:1.2;
  letter-spacing:-.015em;
}

:where(.home) .trust-item .trust-note{
  display:block;
  /* Held in, so the fact above stays the widest line and keeps setting the
     block's width, and split evenly rather than leaving a word alone on the
     last line. */
  max-width:22ch;
  text-wrap:balance;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* Only an item that goes somewhere answers the pointer: the gold line draws
   itself along the top of the cell and the fact's own rule reaches further. */
:where(.home) a.trust-item{display:block;color:inherit;transition:background .5s ease}
:where(.home) a.trust-item::after{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
:where(.home) a.trust-item:hover{background:rgba(199,157,102,.07)}
:where(.home) a.trust-item:hover::after{transform:scaleX(1)}
:where(.home) a.trust-item:hover .trust-key::before{width:40px}

:where(.home) .section{
  padding:clamp(80px,9vw,145px) clamp(22px,6vw,100px);
}

:where(.home) .section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px;
}

:where(.home) .section-head h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(43px,5vw,82px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.045em;
}

:where(.home) .section-head p{
  max-width:560px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

:where(.home) .filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:28px;
}

:where(.home) .filter{
  padding:11px 17px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  font-weight:650;
}
:where(.home) .filter.active{background:var(--ink);color:white;border-color:var(--ink)}

/* The collection reads as one carousel row: four cards in view, one card per
   step. The reference's grid becomes the rail's track. */
:where(.home) .door-rail{
  --rail-per:4;
  --rail-gap:18px;
  position:relative;
}

:where(.home) .door-rail__viewport{
  overflow:hidden;
  /* Room for the cards' hover lift and shadow, given back with the margins so
     the section's rhythm is unchanged. */
  padding:16px 0 38px;
  margin:-16px 0 -38px;
  cursor:grab;
}

:where(.home) .door-rail.is-dragging .door-rail__viewport{cursor:grabbing}

:where(.home) .door-rail__track{
  display:flex;
  gap:var(--rail-gap);
  touch-action:pan-y;
  transform:translate3d(var(--rail-x,0px),0,0);
  transition:transform 820ms cubic-bezier(.22,1,.36,1);
}

/* While a finger or the pointer holds the rail it follows the hand exactly. */
:where(.home) .door-rail.is-dragging .door-rail__track{transition:none}
:where(.home) .door-rail.is-dragging{user-select:none}

/* The hand drags the rail, never a photograph out of the page. */
:where(.home) .door-rail__track a,
:where(.home) .door-rail__track img{-webkit-user-drag:none}

:where(.home) .door-rail__track>.product{
  flex:0 0 calc((100% - (var(--rail-per) - 1) * var(--rail-gap)) / var(--rail-per));
  min-width:0;
  /* One row means every card is as tall as the tallest, so the action row is
     pinned to the bottom instead of leaving white space under it. */
  display:flex;
  flex-direction:column;
}

:where(.home) .door-rail__track>.product .product-info{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* The free space goes above the action row, never below it, and the row keeps
   its own breathing space. */
:where(.home) .door-rail__track>.product .product-top{flex:1}

/* The category follows the name straight away, however short the name is: the
   spare room a card has goes below the text, where the price and the rule stay
   at one height across the whole row. Two lines is the cap, not a reservation
   — at the card's full width no name in the catalogue needs a third. */
:where(.home) .door-rail__track>.product h4{
  line-height:1.3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

:where(.home) .door-rail__track>.product .product-top p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

:where(.home) .door-rail.is-dragging .door-rail__track>.product{
  /* No card lifts under a dragging hand. */
  transform:none;
  box-shadow:none;
}

/* The controls sit between the filters and the cards: what moves the rail is
   visible before the rail itself. */
:where(.home) .door-rail__foot{
  display:flex;
  align-items:center;
  gap:30px;
  margin-bottom:26px;
}

:where(.home) .door-rail__progress{
  position:relative;
  flex:1;
  max-width:340px;
  height:4px;
  border-radius:999px;
  overflow:hidden;
}

:where(.home) .door-rail__progress::before{
  content:"";
  position:absolute;
  left:0;right:0;top:1px;
  height:2px;
  border-radius:999px;
  background:var(--line);
}

:where(.home) .door-rail__progress span{
  position:absolute;
  top:0;
  height:4px;
  left:calc(var(--rail-p,0) * 1%);
  width:var(--rail-w,25%);
  border-radius:999px;
  background:var(--ink);
  transition:left 820ms cubic-bezier(.22,1,.36,1), width .35s ease;
}

/* The spare markers stand one bar-length either side, so the half of the
   marker that has run off one end is drawn coming in at the other. */
:where(.home) .door-rail__progress span:nth-child(2){left:calc(var(--rail-p,0) * 1% - 100%)}
:where(.home) .door-rail__progress span:nth-child(3){left:calc(var(--rail-p,0) * 1% + 100%)}

/* Under a hand, and in the moment the rail is put back at rest, nothing
   glides: the marker keeps up with the cards instead of chasing them. */
:where(.home) .door-rail.is-dragging .door-rail__progress span,
:where(.home) .door-rail.is-settling .door-rail__progress span,
:where(.home) .door-rail.is-settling .door-rail__track{transition:none}

:where(.home) .door-rail__nav{
  display:flex;
  gap:10px;
  margin-left:auto;
}

:where(.home) .rail-arrow{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease,
             transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}

:where(.home) .rail-arrow svg{
  width:18px;
  height:18px;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

:where(.home) .rail-arrow:hover:not(:disabled){
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  transform:translateY(-2px);
}

:where(.home) .rail-arrow:hover:not(:disabled) svg{transform:translateX(3px)}
:where(.home) [data-rail-prev]:hover:not(:disabled) svg{transform:translateX(-3px)}
:where(.home) .rail-arrow:active:not(:disabled){transform:translateY(0) scale(.94)}

:where(.home) .rail-arrow:disabled{
  opacity:.26;
  cursor:default;
}

:where(.home) .product{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  transition:.28s ease;
}

:where(.home) .product:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 55px rgba(0,0,0,.09);
}

:where(.home) .product-visual{
  height:clamp(280px,23vw,380px);
  position:relative;
  display:grid;
  /* One row and one column the size of the stage, so the photograph is
     measured against the stage instead of stretching it. */
  grid-template:100% / 100%;
  place-items:center;
  padding:0;
  overflow:hidden;
}

/* Each card carries its own tint, set once when the page is built. The rail
   re-orders the cards as it turns, so a tint that depended on a card's place
   in the row would change under it at every step. */
:where(.home) .product--tint-1 .product-visual{background:#e8e3d8}
:where(.home) .product--tint-2 .product-visual{background:#dfe4e1}
:where(.home) .product--tint-3 .product-visual{background:#e2dedc}
:where(.home) .product--tint-4 .product-visual{background:#dad7d0}
:where(.home) .product--tint-5 .product-visual{background:#e7e2d9}
:where(.home) .product--tint-6 .product-visual{background:#d9d9d7}

:where(.home) .mini-door{
  width:42%;
  height:86%;
  position:relative;
  background:#513d30;
  border:9px solid #2c2e2a;
  box-shadow:0 16px 28px rgba(0,0,0,.18);
}

:where(.home) .mini-door::after{
  content:"";
  position:absolute;
  width:11px;height:11px;border-radius:50%;
  right:9%;top:50%;
  background:#c6a56f;
}

:where(.home) .door-2{background:linear-gradient(90deg,#111 0 34%,#bbb 34% 38%,#111 38%)}
:where(.home) .door-3{background:repeating-linear-gradient(0deg,#ad8c68 0 48px,#a17d59 48px 96px)}
:where(.home) .door-4{background:#1d302b}
:where(.home) .door-5{background:linear-gradient(#eee 0 27%,#343532 27% 30%,#eee 30% 63%,#343532 63% 66%,#eee 66%)}
:where(.home) .door-6{background:#252323}

:where(.home) .product-info{padding:22px}
/* Name and category run the full width of the card; the price sits on its own
   line underneath, against the right edge and just above the rule. */
:where(.home) .product-top{display:block}
:where(.home) .product-info>.price{display:block;text-align:right;margin-top:14px}
:where(.home) .product h4{font-size:19px;margin:0 0 6px}
:where(.home) .product p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
:where(.home) .price{font-weight:800;white-space:nowrap}
:where(.home) .product-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:18px;border-top:1px solid var(--line)}
:where(.home) .text-link{font-size:13px;font-weight:800}
:where(.home) .swatches{display:flex;gap:6px}
:where(.home) .swatches i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
:where(.home) .swatches i:nth-child(1){background:#282926}
:where(.home) .swatches i:nth-child(2){background:#896442}
:where(.home) .swatches i:nth-child(3){background:#d9d4ca}

:where(.home) .how{
  background:#171914;
  color:#fff;
}

:where(.home) .how .section-head p{color:rgba(255,255,255,.58)}
:where(.home) .steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:55px;
  border-top:1px solid rgba(255,255,255,.14);
}

:where(.home) .step{
  padding:34px 28px 42px 0;
  border-right:1px solid rgba(255,255,255,.14);
  margin-right:28px;
}
:where(.home) .step:last-child{border-right:0;margin-right:0}
:where(.home) .num{font-size:12px;letter-spacing:.18em;color:#c9b08d}
:where(.home) .step h4{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:55px 0 12px}
:where(.home) .step p{color:rgba(255,255,255,.58);font-size:14px;line-height:1.7}

:where(.home) .cta{
  margin:clamp(22px,4vw,70px);
  padding:clamp(55px,8vw,120px);
  min-height:550px;
  display:flex;
  align-items:end;
  position:relative;
  border-radius:36px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(0,0,0,.73),rgba(0,0,0,.18)),
    var(--cta-image, linear-gradient(145deg,#2b2a26,#5a5248))
    center / cover no-repeat;
}

:where(.home) .cta h3{
  margin:0 0 22px;
  max-width:820px;
  font-family:Georgia,serif;
  font-size:clamp(48px,6vw,95px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.05em;
}
:where(.home) .cta p{max-width:590px;color:rgba(255,255,255,.78);line-height:1.6}
/* Air between the sentence and the buttons, so the row reads as a step to
   take rather than as the end of the paragraph. */
:where(.home) .cta .button-row{margin-top:clamp(22px,2.2vw,32px)}

/* The footer, lit rather than flat: a warm glow rising from the brand corner,
   a gold hairline sealing the top edge, and a closing bar that carries the
   copyright and the two pictograms the law asks a Romanian shop to show. */
.nutu-footer{
  position:relative;
  padding:clamp(66px,7vw,98px) clamp(22px,6vw,100px) clamp(30px,3vw,42px);
  background:
    radial-gradient(130% 150% at 10% 0%, rgba(199,157,102,.11), transparent 56%),
    #0f100e;
  color:#fff;
}

.nutu-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,157,102,.5) 14%,rgba(199,157,102,.5) 86%,transparent);
}

.footer-main{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:50px;
}

.nutu-footer .brand{font-size:25px}

/* A gold rule under the wordmark, the width of the mark itself. */
.footer-brand .brand::after{
  content:"";
  display:block;
  width:54px;
  height:1px;
  margin-top:20px;
  background:var(--accent);
}

.nutu-footer h5{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:0 0 20px}
.nutu-footer a,.nutu-footer p{display:block;color:rgba(255,255,255,.58);font-size:13px;line-height:2}

/* Links answer the pointer: they step sideways and a gold rule draws itself
   underneath, left to right. */
.footer-main a{
  position:relative;
  width:fit-content;
  transition:color .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.footer-main a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:7px;
  height:1px;
  background:var(--accent);
  transition:right .5s cubic-bezier(.22,1,.36,1);
}
.footer-main a:hover{color:#fff;transform:translateX(3px)}
.footer-main a:hover::after{right:0}

/* The way to the contact page: a small gold pill, a line or two below the
   phone numbers. Light runs across it and the arrow moves on when pointed at. */
.footer-main a.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  padding:0 15px 0 17px;
  height:36px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg,#d9b27c 0%,#c79d66 48%,#a97f4b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px rgba(199,157,102,.18);
  color:#17140f;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.11em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, filter .4s ease;
}
.footer-main a.footer-cta::after{
  left:-60%;
  right:auto;
  top:0;
  bottom:0;
  width:45%;
  height:auto;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  transition:left .9s cubic-bezier(.22,1,.36,1);
}
.footer-cta svg{
  width:13px;
  height:13px;
  flex:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.footer-main a.footer-cta:hover{
  color:#17140f;
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 34px rgba(199,157,102,.3);
}
.footer-main a.footer-cta:hover::after{left:120%;right:auto}
.footer-main a.footer-cta:hover svg{transform:translateX(4px)}

/* Phones: a smaller pill, sized by its own words, that keeps everything
   inside its rounded edge (Safari lets moving children escape an
   overflow-hidden radius unless the box is masked), and no hover movement
   left stuck after a tap. */
@media (max-width:640px){
  .footer-main a.footer-cta{
    width:max-content;
    max-width:none;
    height:34px;
    gap:7px;
    margin-top:22px;
    padding:0 14px 0 16px;
    font-size:10px;
    letter-spacing:.1em;
    -webkit-mask-image:-webkit-radial-gradient(white, black);
    isolation:isolate;
  }
  .footer-cta svg{width:12px;height:12px}
}
@media (hover:none){
  .footer-main a.footer-cta:hover{transform:none;filter:none}
  .footer-main a.footer-cta:hover svg{transform:none}
  .footer-main a.footer-cta:hover::after{left:-60%}
  .footer-main a.footer-cta:active{transform:scale(.97)}
}

.footer-legal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:26px;
  margin-top:clamp(48px,5vw,74px);
  padding-top:clamp(24px,2.4vw,34px);
  border-top:1px solid rgba(255,255,255,.12);
}

:where(.nutu-footer) .copyright{
  margin:0!important;
  color:rgba(255,255,255,.42);
  font-size:12px;
  letter-spacing:.03em;
  line-height:1.6;
}

/* The pictograms carry their own rounded outline, so nothing is put behind or
   around them: the file is the whole badge. */
.footer-anpc{display:flex;align-items:center;flex-wrap:wrap;gap:16px}

.footer-anpc a{
  display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.footer-anpc a:hover{transform:translateY(-3px)}

.footer-anpc img{display:block;width:auto;height:44px}

.mobile-menu{display:none}

@media (max-width:1280px){
  :where(.home) .door-rail{--rail-per:3}
}

@media (max-width:1150px){
  .mm-main{padding:0 22px;grid-template-columns:160px 1fr 80px}
  .mm-link{padding:0 13px;font-size:11px}
  .mm-link::after{left:13px;right:13px}
  .mm-item:first-child .mm-link{padding:0 21px 0 43px;margin:0 -8px 0 -30px}
}

@media (max-width:980px){
  .mm-nav{display:none}
  .mm-main{display:flex;justify-content:space-between;height:70px}
  .mobile-menu{display:inline-flex}
  :where(.home) .content-hero{grid-template-columns:1fr;padding-top:48px}
  :where(.home) .hero-door-card{min-height:530px}
  :where(.home) .trust{grid-template-columns:repeat(2,1fr)}
  :where(.home) .trust-item:nth-child(n+2)::before{content:none}
  :where(.home) .trust-item:nth-child(even)::before{content:""}
  :where(.home) .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* Two by two: each fact sits in the middle of its cell, across and down,
     every line centred — the fact wrapped into even lines, the label between
     two gold rules — so the four quarters of the "plus" mirror each other.
     (On a desktop the block stays as it is: centred by its fact line, the
     label and note starting where the fact starts.) */
  :where(.home) .trust-item,
  :where(.home) a.trust-item{display:flex;align-items:center;justify-content:center;text-align:center}
  :where(.home) .trust-cell{width:auto;margin-inline:0}
  :where(.home) .trust-item .trust-key{justify-content:center}
  :where(.home) .trust-item .trust-key::after{content:"";width:22px;height:1px;flex:none;background:var(--accent)}
  :where(.home) .trust-item strong{text-wrap:balance}
  :where(.home) .trust-item .trust-note{margin-inline:auto}
  :where(.home) .door-rail{--rail-per:2}
  :where(.home) .steps{grid-template-columns:repeat(2,1fr)}
  :where(.home) .step:nth-child(2){border-right:0}
  :where(.home) .step:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
  .footer-main{grid-template-columns:1.5fr 1fr}
}

@media (max-width:640px){
  .intro{height:330vh}
  .mm-main{padding:0 18px}
  .mm-logo{font-size:19px}
  .mm-actions .mm-icon{display:none}
  .hero-copy{top:45%}
  .hero-copy h1{font-size:50px}
  .hero-copy p{font-size:14px}
  :where(.home) .content-hero{padding:104px 18px 70px;gap:45px}
  :where(.home) .hero-door-card{min-height:460px;border-radius:25px}
  :where(.home) .section{padding:80px 18px}
  :where(.home) .section-head{display:block}
  :where(.home) .section-head p{margin-top:18px}
  :where(.home) .trust{grid-template-columns:1fr 1fr}
  :where(.home) .trust-item{padding:28px 18px}
  :where(.home) .trust-item strong{font-size:17px}
  :where(.home) .trust-item .trust-key{margin-bottom:11px;gap:8px}
  :where(.home) .trust-item .trust-key::before,
  :where(.home) .trust-item .trust-key::after{width:14px}
  /* A sliver of the next card shows what the swipe is for. */
  :where(.home) .door-rail{--rail-per:1.12;--rail-gap:14px}
  :where(.home) .door-rail__foot{gap:18px;margin-bottom:22px}
  :where(.home) .rail-arrow{width:48px;height:48px}
  :where(.home) .product-visual{height:340px}
  :where(.home) .steps{grid-template-columns:1fr}
  :where(.home) .step,:where(.home) .step:nth-child(2){border-right:0;border-bottom:1px solid rgba(255,255,255,.14);margin-right:0}
  :where(.home) .cta{margin:18px;padding:34px;min-height:520px;border-radius:25px}
  .nutu-footer{padding:58px 22px 30px}
  .footer-main{grid-template-columns:1fr 1fr;gap:38px}
  .footer-main>div:first-child{grid-column:1/-1}
  .footer-legal{justify-content:flex-start;gap:20px}
  .footer-anpc img{height:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-line::after{animation:none}
  .scroll-cue__arrow{animation:none}
  :where(.home) .product,.btn{transition:none}
  :where(.home) .door-rail__track,
  :where(.home) .door-rail__progress span,
  :where(.home) .article-tile img,
  .footer-cta svg,
  .footer-main a,.footer-main a::after,.footer-anpc a,
  .mm-ink,.mm-label i,.mm-label::before,.mm-icon,.mm-icon svg,.mm-logo{transition:none}
  .mm-panel,.mm-panel::before,.mm-explorer>.mm-pane,.mm-list.is-active,.mm-sub.is-active,
  .mm-list.is-active li,.mm-sub.is-active li,.mm-preview.is-swapping *,.mm-header::before{animation:none}
  .mm-nodes[data-mm-rail]::before,.mm-node,.mm-node__chev,.mm-leaf,.mm-leaf::before,.mm-preview,.mm-panel .mm-preview__img,
  .mm-product__stage,.mm-product__stage img,.mm-product__name,
  .mm-see-all__arrow,.mm-see-all__arrow svg{transition:none}
}

/* =========================================================================
 * INTEGRATION — real store data inside the reference's slots
 * ====================================================================== */

/* Search and cart stay reachable on phones: the storefront needs them, so the
   reference's ≤640px rule that hides the icons is not applied. */
@media (max-width:640px){
  .mm-actions .mm-icon{display:inline}
}

/* The page rides over the end of the film instead of waiting for it: it
   starts rising when the door is open (frame ~210) and is 30% up by
   the time the film ends, leaving a short paper beat. The film timing is unchanged. */
.intro ~ .site{margin-top:-30vh}   /* ~ not +: the intro's inline script sits between them */

/* Phones: half of the pale beat between the film's last frames and the menu
   docking is taken out — the page rises over the end of the film sooner, so
   the menu and the first section arrive earlier. The film itself is untouched. */
@media (max-width:640px){
  .intro ~ .site{margin-top:-68vh}
}

/*
 * Main menu docking (homepage). The bar rides up over the intro inert and
 * empty but for the wordmark; when it docks at the top its links and actions
 * glide in one after another, and hover panels open only once the visitor
 * moves the mouse (see the inline script in template-parts/nutu/header.php).
 * The links are animated, not the .mm-item wrappers: a transform on the
 * wrapper would re-anchor the absolutely positioned mega panel inside it.
 */
.home .mm-header.is-gated .mm-link,
.home .mm-header.is-gated .mm-actions{
  opacity:0;
  translate:0 8px;
  transition:opacity .22s ease, translate .22s ease;
}
.home .mm-header.is-gated.is-docked .mm-link,
.home .mm-header.is-gated.is-docked .mm-actions{
  opacity:1;
  translate:none;
  transition:opacity .8s cubic-bezier(.22,1,.36,1), translate .9s cubic-bezier(.22,1,.36,1);
}
.home .mm-header.is-gated.is-docked .mm-item:nth-child(2) .mm-link{transition-delay:.06s}
.home .mm-header.is-gated.is-docked .mm-item:nth-child(3) .mm-link{transition-delay:.12s}
.home .mm-header.is-gated.is-docked .mm-item:nth-child(4) .mm-link{transition-delay:.18s}
.home .mm-header.is-gated.is-docked .mm-item:nth-child(5) .mm-link{transition-delay:.24s}
.home .mm-header.is-gated.is-docked .mm-item:nth-child(n+6) .mm-link{transition-delay:.3s}

/* The sweep finishes on the right: the search and the cart arrive after the
   last entry, and the gold thread is drawn along the bar in the same
   direction the links came in. */
.home .mm-header.is-gated.is-docked .mm-actions{transition-delay:.34s}

.home .mm-header.is-gated::after{
  transform:scaleX(0);
  transform-origin:left;
  transition:opacity .45s ease, transform 1.1s .14s cubic-bezier(.22,1,.36,1);
}
.home .mm-header.is-gated.is-docked::after{transform:scaleX(1)}
.home .mm-header.is-gated.is-docked .mm-actions{transition-delay:.36s}

/* Phones: the bar's search, cart and "Meniu" arrive at once when it docks,
   instead of after the desktop's sweep of links (which phones do not show). */
@media (max-width:980px){
  .home .mm-header.is-gated.is-docked .mm-actions{
    transition:opacity .35s ease, translate .45s cubic-bezier(.22,1,.36,1);
    transition-delay:0s;
  }
  .home .mm-header.is-gated::after{transition:opacity .3s ease, transform .6s cubic-bezier(.22,1,.36,1)}
}

/* Inert until armed: no panel, no hover colour, no underline, no clicks. */
.home .mm-header.is-gated:not(.is-docked) .mm-main{pointer-events:none}
.home .mm-header.is-gated:not(.is-armed) .mm-item:is(:hover,.is-open) .mm-panel,
.home .mm-header.is-gated .mm-item.is-suppressed:is(:hover,.is-open) .mm-panel{display:none}
.home .mm-header.is-gated:not(.is-armed) .mm-item:hover .mm-link,
.home .mm-header.is-gated .mm-item.is-suppressed:hover .mm-link{color:inherit}
.home .mm-header.is-gated:not(.is-armed) .mm-item:hover .mm-link::after,
.home .mm-header.is-gated .mm-item.is-suppressed:hover .mm-link::after{transform:scaleX(0)}
.home .mm-header.is-gated:not(.is-armed) .mm-item:focus-within .mm-panel{display:none}

@media (prefers-reduced-motion:reduce){
  .home .mm-header.is-gated .mm-link,
  .home .mm-header.is-gated .mm-actions{transition:none}
}

/*
 * Putting a reloaded page back where the visitor was (see the head script in
 * inc/assets.php). The page is held invisible for those few frames so the top
 * of the intro is never shown on the way; the paper background stays, so the
 * hold reads as the page simply taking a moment to appear.
 */
html.ilx-restoring{background:var(--paper)}
html.ilx-restoring body{visibility:hidden}

/*
 * Homepage scroll stops (inline script in template-parts/nutu/header.php).
 * While a stop holds the page, native scrolling — and whatever momentum a
 * trackpad or finger still carries — is switched off. body is reset so it
 * does not turn into its own scroll container, which would unstick the
 * sticky intro scene and main menu; the gutter keeps the layout from shifting
 * on systems with classic scrollbars.
 */
html.is-scroll-held{overflow:hidden;scrollbar-gutter:stable}
html.is-scroll-held body{overflow:visible}

/* Keyboard users open a panel by tabbing into it — same panel, same look. */
.mm-item:focus-within .mm-panel{display:block}

/* Live cart count on the reference's cart glyph (updated by WooCommerce fragments). */
.mm-icon--cart{position:relative}
.mm-icon .ilx-cart-count{
  position:absolute;
  top:-7px;
  right:-11px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--mm-wine);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:16px;
  text-align:center;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mm-icon .ilx-cart-count.is-empty{display:none}

/* The reference's inline-styled second CTA button, as a class. */
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}

/*
 * Hero "model etalon" card: a framed presentation of one real product —
 * corner marks on a paper card, the product's category as a badge, its
 * photograph inside a thin frame and a link to the product page.
 */
:where(.home) .hero-etalon{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.6vw,24px);
  min-height:0;
  /* The whole card fits one screen under the docked menu, so nothing is cut
     off where the page comes to rest. */
  max-height:calc(100svh - 168px);
  /* Narrower than the column it sits in, so the card reads as a tall frame
     rather than a square block. */
  width:min(100%, clamp(340px, 30vw, 460px));
  /* Centred in its column rather than pushed against the page edge. */
  margin-inline:auto;
  padding:clamp(18px,2vw,30px);
  border:1px solid rgba(23,25,20,.14);
  border-radius:4px;
  background:#f7f5f0;
  box-shadow:none;
  /* The reference card clips its contents; the corner marks sit outside it. */
  overflow:visible;
}

/* The corner marks of the reference frame, set just outside the card. */
:where(.home) .hero-etalon::before,
:where(.home) .hero-etalon::after{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  border:2px solid var(--accent-dark);
  pointer-events:none;
}
:where(.home) .hero-etalon::before{
  top:-12px;
  right:-12px;
  border-left:0;
  border-bottom:0;
}
:where(.home) .hero-etalon::after{
  bottom:-12px;
  left:-12px;
  border-right:0;
  border-top:0;
}

:where(.home) .hero-etalon__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

:where(.home) .hero-etalon__eyebrow{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}

:where(.home) .hero-etalon__title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,1.9vw,30px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.1;
}

:where(.home) .hero-etalon__badge{
  flex:none;
  padding:9px 14px;
  background:var(--ink);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

:where(.home) .hero-etalon__frame{
  --frame-pad:clamp(10px,1vw,16px);
  position:relative;
  /* The photograph's own proportion (set inline by the template), so it fills
     the frame. The frame shrinks first when the card has to fit a short
     screen, because the photograph inside is sized by it. */
  flex:1 1 auto;
  aspect-ratio:var(--photo-aspect, 3 / 4);
  min-height:180px;
  overflow:hidden;
  border:1px solid rgba(23,25,20,.14);
  background:#fbfaf7;
}

/* Placed inside the frame rather than sized by it: the photograph then takes
   whatever room the card has left, centred, and can never spill over the
   title or the button. */
:where(.home) .hero-etalon__frame img{
  position:absolute;
  inset:var(--frame-pad);
  width:auto;
  height:auto;
  max-width:100%;
  /* A door photographed to the very edge of its file would otherwise sit
     against the top and bottom of the frame; this keeps a little air there,
     and the picture stays centred. */
  max-height:calc(100% - clamp(18px,2.2vw,34px));
  margin:auto;
  object-fit:contain;
  /* Door photographs are cut-outs on white; multiply drops that white away. */
  mix-blend-mode:multiply;
}

:where(.home) .hero-etalon__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 20px;
  background:#ece8e0;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease;
}
:where(.home) .hero-etalon__cta:hover,
:where(.home) .hero-etalon__cta:focus-visible{
  background:var(--ink);
  color:#fff;
}

@media (max-width:980px){
  /* One column: the card shares the screen with the text above it. */
  :where(.home) .hero-etalon{max-height:calc(100svh - 210px);min-height:360px;width:min(100%,460px);margin:0 auto}
}

@media (max-width:640px){
  :where(.home) .hero-etalon{padding:16px}
  :where(.home) .hero-etalon__head{flex-direction:column;gap:10px}
  :where(.home) .hero-etalon__frame{padding:12px}
}

/* Hero card: a real product photograph takes the drawn door's slot and
   geometry (same position, width and height). Door and hardware photographs
   are cut-outs on white; multiply blending drops that white onto the card. */
:where(.home) .show-door--photo{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:none;
  border:0;
  box-shadow:none;
}
:where(.home) .show-door--photo::before{display:none}
:where(.home) .show-door--photo img{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:bottom;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.24));
}

/* Product cards: photograph in the mini-door's slot, same stage. */
:where(.home) .product-visual{color:inherit}
:where(.home) .product-photo{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  /* The photographs already have their own white margin, so the stage adds
     none: the whole picture shows, centred, never cropped. */
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
}
/* Upright photographs keep a hairline of air above and below, enough for the
   door to read as whole without giving the background the card. Files that
   carry a white border of their own are enlarged and slid by the amount that
   border takes up, measured when the page is built, so every door stands the
   same height in its stage. */
:where(.home) .product-photo--tall{
  padding:5px 0;
  transform:translateY(var(--ink-shift,0)) scale(var(--ink-scale,1));
}

/* Articles: one tall panel and two stacked beside it, pictures only. The wall
   keeps one height and the panels divide it, so the three always line up. */
/* The wall is 85% of the column it sits in and centred there, so the pictures
   read as a plate set inside the section rather than as a band across it.
   The height comes down by the same 15%, keeping each panel's proportion. */
:where(.home) .article-wall{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
  width:85%;
  margin-inline:auto;
  height:clamp(391px,39.1vw,578px);
}

:where(.home) .article-tile{
  position:relative;
  display:block;
  min-height:0;
  overflow:hidden;
  border-radius:24px;
  background:var(--line);
}

:where(.home) .article-tile--lead{grid-row:1 / span 2}

:where(.home) .article-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .85s cubic-bezier(.22,1,.36,1);
}

:where(.home) .article-tile:hover img{transform:scale(1.045)}

/* The wash that carries the writing. It deepens on hover, so the photograph
   reads at its brightest until the visitor is actually interested in it. */
:where(.home) .article-tile::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:72%;
  background:linear-gradient(transparent,rgba(9,10,8,.28) 38%,rgba(9,10,8,.82));
  pointer-events:none;
  transition:opacity .6s ease;
}

:where(.home) .article-tile__body{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:clamp(22px,2vw,34px);
  color:#fff;
  transform:translateY(0);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

:where(.home) .article-tile:hover .article-tile__body{transform:translateY(-4px)}

/* A hairline of gold above the date: the one flourish the panel gets. */
:where(.home) .article-tile__date{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}

:where(.home) .article-tile__date::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--accent);
  flex:none;
}

:where(.home) .article-tile__title{
  margin:12px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.18;
  font-size:19px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

:where(.home) .article-tile--lead .article-tile__title{
  font-size:clamp(25px,2.3vw,36px);
  margin-top:16px;
  max-width:16em;
}

/* Kept in the flow so the writing never shifts: it only fades into place. */
:where(.home) .article-tile__more{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

:where(.home) .article-tile__more i{font-style:normal;transition:transform .6s cubic-bezier(.22,1,.36,1)}
:where(.home) .article-tile:hover .article-tile__more{opacity:1;transform:none}
:where(.home) .article-tile:hover .article-tile__more i{transform:translateX(4px)}

/* Keyboard users get the same reveal as a pointer. */
:where(.home) .article-tile:focus-visible .article-tile__more{opacity:1;transform:none}
:where(.home) .article-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* The strip between the products and the articles: what the shop does about
   delivery, payment and being reached. Dark and full width, so it reads as the
   seam between two pale sections rather than a section of its own. */
/* Stacked on a phone or a narrow window, each panel keeping its own shape.
   This has to follow the block above: a media query carries no extra weight. */
@media (max-width:980px){
  :where(.home) .article-wall{
    grid-template-columns:1fr;
    grid-template-rows:none;
    /* Stacked, the panels use the whole column: inset by a further 15% they
       would be a stamp on a phone. */
    width:100%;
    height:auto;
    gap:14px;
  }
  :where(.home) .article-tile{aspect-ratio:16/10}
  :where(.home) .article-tile--lead{grid-row:auto;aspect-ratio:4/3}
}

:where(.home) .product-sale{z-index:1}
:where(.home) .product h4 a{color:inherit}
:where(.home) .price del{color:var(--muted);font-weight:400;margin-right:6px;font-size:12px}
:where(.home) .price ins{text-decoration:none}
.footer-tagline{max-width:380px;margin-top:18px!important}

/* =========================================================================
 * PHONE: the bar's menu button and the full-screen menu
 * (template-parts/nutu/header.php, template-parts/header/drawer.php)
 * ====================================================================== */

.mobile-menu__lines{display:grid;justify-items:end;gap:5px;width:18px}
.mobile-menu__lines i{
  display:block;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:width .55s var(--mm-ease, cubic-bezier(.22,1,.36,1));
}
.mobile-menu__lines i:first-child{width:18px}
.mobile-menu__lines i:last-child{width:11px;background:#c79d66}

@media (max-width:980px){
  .mm-actions{gap:4px}
  .mm-actions .mm-icon{width:42px;height:42px}

  .mm-header .mobile-menu,
  .mm-header .mobile-menu:hover{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:42px;
    min-height:0;
    margin-left:6px;
    padding:0 16px 0 18px;
    border:0;
    border-radius:999px;
    background:var(--mm-ink);
    box-shadow:0 10px 24px rgba(23,23,20,.18);
    color:#fff;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.16em;
    line-height:1;
    text-transform:uppercase;
    transform:none;
    transition:transform .5s var(--mm-ease), box-shadow .4s ease;
  }
  .mm-header .mobile-menu:active{transform:scale(.95)}
  .mm-header .mobile-menu:hover .mobile-menu__lines i:last-child,
  .mm-header .mobile-menu[aria-expanded="true"] .mobile-menu__lines i:last-child{width:18px}
}

@media (max-width:360px){
  .mm-header .mobile-menu__label{display:none}
  .mm-header .mobile-menu,
  .mm-header .mobile-menu:hover{width:42px;padding:0;justify-content:center}
}

/* ---------- the menu sheet ---------- */

#ilx-drawer{
  --d-ink:#171714;
  --d-text:#3b3934;
  --d-muted:#8a857b;
  --d-wine:#8d2025;
  --d-gold:#c79d66;
  --d-gold-dark:#9f7442;
  --d-pale:#f5f3ed;
  --d-line:rgba(23,23,20,.1);
  --d-ease:cubic-bezier(.22,1,.36,1);
  color:var(--d-ink);
}

#ilx-drawer .ilx-drawer__scrim,
#ilx-drawer .ilx-drawer__scrim:hover{
  border:0;
  background:rgba(20,18,15,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

#ilx-drawer .ilx-drawer__panel{
  width:100%;
  max-width:520px;
  background:#fff;
  box-shadow:-30px 0 90px rgba(28,24,18,.2);
  transition:transform .32s ease;
}
#ilx-drawer.is-open .ilx-drawer__panel{transition:transform .65s var(--d-ease)}

#ilx-drawer .ilx-drawer__head{
  position:relative;
  min-height:70px;
  padding:0 16px 0 20px;
  border-bottom:0;
}
#ilx-drawer .ilx-drawer__head::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(199,157,102,.65),var(--d-line) 40%,var(--d-line) 80%,transparent);
}

#ilx-drawer .ilx-mnav__logo{
  color:var(--d-ink);
  font-size:19px;
  font-weight:800;
  letter-spacing:.115em;
  white-space:nowrap;
}
#ilx-drawer .ilx-mnav__logo span{color:var(--d-wine)}

#ilx-drawer .ilx-drawer__close,
#ilx-drawer .ilx-drawer__close:hover{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(23,23,20,.14);
  border-radius:50%;
  background:transparent;
  color:var(--d-ink);
  transition:border-color .4s ease, transform .6s var(--d-ease);
}
#ilx-drawer .ilx-drawer__close svg{width:20px;height:20px}
#ilx-drawer .ilx-drawer__close:hover,
#ilx-drawer .ilx-drawer__close:active{border-color:var(--d-ink);transform:rotate(90deg)}

#ilx-drawer .ilx-drawer__body{
  padding:20px 20px 30px;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

/* One level at a time, sliding in the way the visitor is going. */
.ilx-mnav__level[hidden]{display:none}
.ilx-mnav__level.is-in-forward{animation:ilxMnavForward .5s var(--d-ease) both}
.ilx-mnav__level.is-in-back{animation:ilxMnavBack .5s var(--d-ease) both}
@keyframes ilxMnavForward{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes ilxMnavBack{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes ilxMnavUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#ilx-drawer .ilx-mnav__search,
#ilx-drawer .ilx-mnav__search:hover{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  height:52px;
  min-height:0;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:var(--d-pale);
  color:var(--d-muted);
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  line-height:1;
  text-transform:none;
}
#ilx-drawer .ilx-mnav__search svg{width:19px;height:19px;color:var(--d-ink)}

.ilx-mnav__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:30px 0 4px;
  color:var(--d-gold-dark);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.3;
  text-transform:uppercase;
}
.ilx-mnav__kicker::before{content:"";width:18px;height:1px;background:var(--d-gold)}

.ilx-mnav__entries,
.ilx-mnav__rows{margin:0;padding:0;list-style:none}
.ilx-mnav__entries li,
.ilx-mnav__rows li{margin:0;border-bottom:1px solid var(--d-line)}

#ilx-drawer.is-open .ilx-mnav__level[data-ilx-level="root"]:not(.is-in-back) .ilx-mnav__entries li{
  animation:ilxMnavUp .65s var(--d-ease) both;
  animation-delay:calc(.12s + var(--i, 0) * 45ms);
}

/* The six entries of the bar, set large. */
#ilx-drawer .ilx-mnav__entry,
#ilx-drawer .ilx-mnav__entry:hover{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 40px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:86px;
  padding:14px 0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--d-ink);
  font-size:inherit;
  font-weight:400;
  letter-spacing:0;
  line-height:1.2;
  text-align:left;
  text-transform:none;
}
.ilx-mnav__num{
  align-self:start;
  padding-top:8px;
  color:var(--d-gold-dark);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.ilx-mnav__label{display:flex;flex-direction:column;gap:5px;min-width:0}
.ilx-mnav__word{
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  letter-spacing:-.02em;
  line-height:1.08;
  transition:color .3s ease;
}
.ilx-mnav__line{color:var(--d-muted);font-size:12.5px;line-height:1.35}
#ilx-drawer .ilx-mnav__entry.is-current .ilx-mnav__word{color:var(--d-wine)}

.ilx-mnav__go{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(23,23,20,.14);
  color:var(--d-ink);
  transition:background .35s ease, color .35s ease, box-shadow .35s ease, transform .5s var(--d-ease);
}
.ilx-mnav__go svg{width:16px;height:16px}
#ilx-drawer .ilx-mnav__entry:active .ilx-mnav__go,
#ilx-drawer .ilx-mnav__row:active .ilx-mnav__go{background:var(--d-ink);box-shadow:none;color:#fff;transform:translateX(3px)}
#ilx-drawer .ilx-mnav__entry:active .ilx-mnav__word,
#ilx-drawer .ilx-mnav__row:active .ilx-mnav__name{color:var(--d-wine)}
@media (hover:hover){
  #ilx-drawer .ilx-mnav__entry:hover .ilx-mnav__go,
  #ilx-drawer .ilx-mnav__row:hover .ilx-mnav__go{background:var(--d-ink);box-shadow:none;color:#fff}
  #ilx-drawer .ilx-mnav__entry:hover .ilx-mnav__word,
  #ilx-drawer .ilx-mnav__row:hover .ilx-mnav__name{color:var(--d-wine)}
}

/* ---------- a level inside ---------- */

.ilx-mnav__top{padding:2px 0 24px;border-bottom:1px solid var(--d-line)}

#ilx-drawer .ilx-mnav__back,
#ilx-drawer .ilx-mnav__back:hover{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  min-height:0;
  padding:0 16px 0 12px;
  border:0;
  border-radius:999px;
  background:var(--d-pale);
  color:var(--d-ink);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  transition:background .3s ease;
}
#ilx-drawer .ilx-mnav__back svg{width:16px;height:16px;transition:transform .5s var(--d-ease)}
#ilx-drawer .ilx-mnav__back:active svg{transform:translateX(-3px)}

#ilx-drawer .ilx-mnav__title{
  margin:22px 0 0;
  color:var(--d-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.08;
  text-transform:none;
}

#ilx-drawer .ilx-mnav__all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:4px 0 3px;
  border-bottom:1px solid #b9b1a5;
  color:var(--d-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#ilx-drawer .ilx-mnav__all svg{width:14px;height:14px}

.ilx-mnav__level.is-in-forward .ilx-mnav__rows li,
.ilx-mnav__level.is-in-back .ilx-mnav__rows li{animation:ilxMnavUp .55s var(--d-ease) both}
.ilx-mnav__rows li:nth-child(2){animation-delay:.04s}
.ilx-mnav__rows li:nth-child(3){animation-delay:.08s}
.ilx-mnav__rows li:nth-child(4){animation-delay:.12s}
.ilx-mnav__rows li:nth-child(5){animation-delay:.16s}
.ilx-mnav__rows li:nth-child(n+6){animation-delay:.2s}

#ilx-drawer .ilx-mnav__row,
#ilx-drawer .ilx-mnav__row:hover{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 36px;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:0;
  padding:12px 0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--d-ink);
  font-size:inherit;
  font-weight:400;
  letter-spacing:0;
  line-height:1.3;
  text-align:left;
  text-transform:none;
}
.ilx-mnav__thumb{
  position:relative;
  width:58px;
  height:58px;
  overflow:hidden;
  border-radius:15px;
  background:var(--d-pale);
}
.ilx-mnav__thumb img{
  position:absolute;
  inset:6px;
  width:calc(100% - 12px);
  height:calc(100% - 12px);
  max-width:none;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.ilx-mnav__initial{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--d-gold-dark);
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
}
.ilx-mnav__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.ilx-mnav__name{font-size:16px;font-weight:600;line-height:1.3;transition:color .3s ease}
.ilx-mnav__meta{color:var(--d-muted);font-size:12.5px}
.ilx-mnav__row .ilx-mnav__go{width:36px;height:36px}

/* ---------- the foot: one way to Contact ---------- */

#ilx-drawer .ilx-drawer__foot{
  padding:14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--d-line);
  background:#fff;
}

#ilx-drawer .ilx-mnav__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:52px;
  border-radius:999px;
  background:var(--d-ink);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .3s ease;
}
#ilx-drawer .ilx-mnav__cta:active{background:#000}
#ilx-drawer .ilx-mnav__cta svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  #ilx-drawer *,
  #ilx-drawer *::before,
  #ilx-drawer *::after,
  .mobile-menu__lines i{animation:none !important;transition:none !important}
}