/* NG Doors — cream/sage editorial. Tokens as supplied; no CDN fonts, no gradient
   text, no elastic easing. */

/* ---------------------------------------------------------------- fonts */
/* Bitter (slab display) + Ubuntu Sans (text). Both self-hosted, both variable,
   both pass tools/check-fonts.py -- the Bulgarian alphabet plus U+045D, the
   grave-accent "и". That gate is not ceremony: it rejected Ruda, Golos Text and
   PT Sans here, each of which draws every other Cyrillic letter and would have
   shipped tofu in ordinary prose.

   Bitter's Cyrillic is drawn with the Bulgarian upright-cursive forms as its
   default -- т as m, и as u, д as g, л as a pointed lambda. That is why it is on
   the display face and not on the text face: those forms are right for a heading
   read as language, and wrong on a price or a wear class read as data. */
@font-face {
  font-family: 'Bitter';
  src: url('fonts/bitter-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Bitter';
  src: url('fonts/bitter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  src: url('fonts/bitter-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Sans';
  src: url('fonts/ubuntusans-var-cyrillic.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Ubuntu Sans';
  src: url('fonts/ubuntusans-var-latin-ext.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu Sans';
  src: url('fonts/ubuntusans-var-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --cream: #fff5e9;
  --ink: #292929;
  --sage: #587364;
  --sage-soft: #8aa79f;
  --line: #dbdbdb;
  --muted: #a0a0a0;
  --white: #fafafa;
  --shadow-soft: 0 18px 50px #29292914;
  --radius: 8px;
  --max: 1320px;
  --header-height: 118px;
  --gap: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Clamping the duration is not enough for a reveal: an element that starts at
     opacity 0 and is never observed stays invisible forever. It must start visible. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-film video { display: none; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Ubuntu Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: 'Bitter', 'Ubuntu Sans', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 3px;
}
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage); margin: 0 0 14px;
}
.lede { color: #5c5c5c; font-size: 16px; max-width: 56ch; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary { background: var(--sage); color: var(--cream); }
.btn-primary:hover { background: #465d51; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.link-underline {
  font-size: 14px; font-weight: 700;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: opacity .25s var(--ease);
}
.link-underline:hover { opacity: .6; }

/* ---------------------------------------------------------------- header */
.utility {
  background: var(--ink); color: #e8e0d5;
  font-size: 12px; letter-spacing: .01em;
}
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.utility a:hover { color: #fff; }
.utility-right { display: flex; gap: 18px; align-items: center; }
.utility .hours { color: #a79c8d; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.brand {
  font-family: 'Bitter', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: -.03em; white-space: nowrap;
}
.brand span { color: var(--sage); }
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav a {
  font-size: 14px; font-weight: 600; position: relative; padding: 6px 0;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--ink); transition: right .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav-cta { margin-left: 8px; }
/* ".nav a" zeroed the button's side padding, so "Запитване" ran edge to edge. */
.nav a.nav-cta { padding: 9px 18px; }
.nav a.nav-cta::after { display: none; }
.burger {
  display: none; margin-left: auto; background: none; border: 0;
  padding: 10px; cursor: pointer; color: var(--ink);
}
.burger svg { display: block; }
/* Open state folds the bars into an X — a hamburger that never changes leaves the
   only way out of the drawer looking like the way in. */
.burger line { transition: transform .3s var(--ease), opacity .2s var(--ease); transform-origin: 12px 12px; }
.burger[aria-expanded="true"] .b1 { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .b2 { opacity: 0; }
.burger[aria-expanded="true"] .b3 { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0 0 0 30%;
    background: var(--cream); border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 90px 26px 26px; margin: 0;
    transform: translateX(100%); transition: transform .35s var(--ease);
    overflow-y: auto; z-index: 70;
  }
  /* The spread shadow is the scrim: it darkens the rest of the viewport from the
     drawer itself, so the open menu reads as a layer without a second element. */
  .nav[data-open="true"] { transform: none; box-shadow: 0 0 0 100vmax #29292947; }
  .nav a { font-size: 17px; padding: 12px 0; width: 100%; }
  .burger { display: block; z-index: 80; }
  .utility .hours { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding: 64px 0 72px; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); margin-bottom: 22px; }
.hero .lede { font-size: 17px; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-art { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.hero-art figure { margin: 0; position: relative; }
.hero-art .tall { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.hero-art .short { border-radius: var(--radius); overflow: hidden; margin-top: 54px; box-shadow: var(--shadow-soft); }
.hero-art img, .hero-art .film { width: 100%; object-fit: cover; }
.hero-art .short img { aspect-ratio: 3 / 4; }
/* .hero-tall wraps the film so the figure keeps one child to lay out, and the
   3:4 box is held by the wrapper: a <video> that has not loaded yet reports its
   own intrinsic size and the hero would jump the moment metadata arrived. */
.hero-art .hero-tall { display: block; aspect-ratio: 3 / 4; }
.hero-art .hero-tall .film { display: block; height: 100%; }
.art-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: #fffffff0; color: var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
@media (max-width: 900px) {
  .hero { padding: 40px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art .short { margin-top: 0; }
}

/* ---------------------------------------------------------------- rail */
.section { padding: 62px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px 24px; margin-bottom: 34px;
  /* Wraps rather than squeezing. Bitter sets wider than the geometric sans this
     replaced, so at 390 the heading and the link were splitting one row between
     them and both broke into two cramped lines. Given the whole row the heading
     fits again and the link drops underneath it. */
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); flex: 1 1 12ch; }
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
/* labels wrap to two lines on the longer categories; a fixed label box keeps the
   counts on one baseline across the row */
.rail-item { scroll-snap-align: start; text-align: center; display: flex; flex-direction: column; }
.rail-item .label { min-height: 2.7em; }
.rail-item .shot {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--white); margin-bottom: 12px;
}
.rail-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.rail-item:hover img { transform: scale(1.04); }
.rail-item .label { font-size: 13px; font-weight: 600; }
.rail-item .count { font-size: 12px; color: var(--muted); }
.rail-btn {
  position: absolute; top: 34%; z-index: 5;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease);
}
.rail-btn:hover { background: #fff; }
.rail-prev { left: -12px; }
.rail-next { right: -12px; }
@media (max-width: 700px) { .rail-btn { display: none; } }

/* ---------------------------------------------------------------- bento */
.bento { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); }
.bento-right { display: grid; gap: var(--gap); }
.tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  display: block; background: var(--ink); min-height: 220px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.tile-lg img { aspect-ratio: 4 / 3.4; }
.tile-sm img { aspect-ratio: 16 / 9.6; }
.tile-body {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  /* the old two-stop ramp was already transparent where the eyebrow sits, so the
     kicker vanished over pale plank and door images */
  background: linear-gradient(to top, #000000d9 0%, #0000009e 48%, #00000000 100%);
  color: #fff;
}
.tile-body .eyebrow { color: #e7dcc9; margin-bottom: 8px; }
.tile-body h3 { font-size: clamp(1.2rem, 2.1vw, 1.75rem); color: #fff; margin-bottom: 6px; }
.tile-body p { font-size: 14px; color: #e6e6e6; max-width: 46ch; }
.tile-body .more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #ffffff88; padding-bottom: 2px; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- brands */
.brandstrip { border-block: 1px solid var(--line); padding: 30px 0; }
.brandstrip .strip-label { margin-bottom: 16px; }
.brandstrip .marks { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.brandstrip .mark {
  font-family: 'Bitter', sans-serif; font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 600; letter-spacing: .04em; color: #9a9186; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.brandstrip a.mark:hover { color: var(--ink); }

/* ---------------------------------------------------------------- sage panel */
.panel-sage { background: var(--sage); color: var(--cream); border-radius: var(--radius); padding: 46px 40px; }
.panel-sage .eyebrow { color: #cfe0d8; }
.panel-sage h2 { color: var(--cream); }
.panel-sage .section-head { margin-bottom: 30px; }
.panel-sage .link-underline { border-color: var(--cream); color: var(--cream); }
@media (max-width: 700px) { .panel-sage { padding: 32px 20px; } }

/* ---------------------------------------------------------------- cards */
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  /* the card carries its own colour: dropped into .panel-sage it inherited cream
     on a near-white card and every title went invisible */
  color: var(--ink);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.card .shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #f1ece4; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.card:hover .shot img { transform: scale(1.045); }
.card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.card .price { font-size: 14px; font-weight: 700; margin-top: auto; padding-top: 8px; }
.card .price.ask { color: var(--muted); font-weight: 600; }
/* Euro leads, lev follows. Bulgaria's dual-display window closed 2026-08-08; since
   then the euro is the price and the lev is an optional reference, so the lev is
   set as a secondary figure rather than given equal weight. */
.price .bgn, .price-big .bgn { color: var(--muted); font-weight: 500; }
.card .price .bgn { font-size: 12px; }
.product .price-big .bgn { font-size: 15px; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #fffffff0; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.card-flat { background: transparent; }
.card-flat .shot { aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* photo grid (gallery) */
.photos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.photo {
  border: 0; padding: 0; background: #f1ece4; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.photo:hover img { transform: scale(1.05); }
@media (max-width: 520px) { .photos { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------------------------------------------------------------- trust */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); border-top: 1px solid var(--line); padding-top: 34px; }
.trust h3 { font-size: 15px; font-weight: 700; font-family: 'Ubuntu Sans', sans-serif; letter-spacing: 0; margin-bottom: 6px; }
.trust p { font-size: 14px; color: #5c5c5c; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; gap: 22px; } }

/* ---------------------------------------------------------------- enquiry */
.enquiry {
  background: var(--sage); color: var(--cream); border-radius: var(--radius);
  padding: 52px 44px; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 36px; align-items: center;
}
.enquiry h2 { color: var(--cream); font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 12px; }
.enquiry p { color: #dfe8e3; font-size: 15px; }
.enquiry-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) {
  .enquiry { grid-template-columns: 1fr; padding: 34px 22px; }
  .enquiry-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- footer */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: 56px 0 26px; margin-top: 74px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap); }
.footer h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: 'Ubuntu Sans', sans-serif; font-weight: 700; margin-bottom: 14px; }
.footer li { list-style: none; margin-bottom: 9px; font-size: 14px; }
.footer ul { padding: 0; margin: 0; }
.footer a:hover { color: var(--sage); }
.footer .tagline { font-size: 14px; color: #5c5c5c; max-width: 34ch; margin-top: 10px; }
.footer-base {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- inner pages */
.pagehead { padding: 46px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.pagehead h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 12px; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.crumbs a:hover { color: var(--ink); }
/* only the separators are hairline — the current-page label must stay readable */
.crumbs .sep { color: var(--line); }
.crumbs .here { color: var(--ink); font-weight: 600; }
.count-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
/* Generated room scene under a section title. It is atmosphere, never a product:
   the catalogue photos stay real because a price sits beside them. See LOOK-LOCK.md.
   Height is clamped, not derived from the file's 21:9 ratio: at 1320px wide that
   ratio renders 566px tall and the band pushes every product below the fold. The
   image is cropped to the clamp by object-fit, which is why one file serves every
   width instead of a second render for phones. */
.scene {
  margin-top: 26px; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-soft);
  position: relative; height: clamp(150px, 22vw, 300px);
}
/* The film is taller than the band it sits in, and the overflow is the parallax
   budget: site.js slides it inside that margin as the band crosses the viewport,
   so there is headroom at both ends and no strip of background can ever show.
   88% is measured, not chosen, and must not drift back toward the middle. A band is
   3.6:1 and the clip is 16:9, so at 1440 the band shows less than half the frame's
   height -- and the floor line, which is the only thing giving the door a base,
   sits at 85% of it. A brightness profile down the left of every poster puts it
   there. At 50% the band came back as a bare wall with a door hanging in it; at
   72% the floor survived as six pixels. 88% is the lowest crop that still keeps
   the door's handle in shot at 390, 768 and 1440 alike. */
.scene .film {
  position: absolute; left: 0; top: -9%; width: 100%; height: 118%;
  object-fit: cover; object-position: 50% 88%;
}
.scene .film[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .scene .film { transform: none !important; }
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.chip {
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--cream); }

/* A brand pill goes somewhere; a facet pill filters where you already are. They
   were the same pill, so the row is labelled and the links carry the sage. */
.facet-row { display: flex; align-items: baseline; gap: 16px; }
.facet-row .chips { flex: 1; }
.facet-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 62px; padding-top: 9px;
}
.chip-link { border-color: var(--sage-soft); color: var(--sage); text-decoration: none; }
.chip-link:hover { background: var(--sage); border-color: var(--sage); color: var(--cream); }
.chip-n { color: var(--muted); font-weight: 500; }
.chip-link:hover .chip-n { color: var(--sage-soft); }
@media (max-width: 640px) {
  .facet-row { display: block; }
  .facet-label { display: block; margin-bottom: 8px; padding-top: 0; }
}

/* product detail */
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; }
.gallery-main {
  /* the catalogue cutouts are shot on white; a beige pad drew a second frame
     around the white plate inside it */
  border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--line);
  cursor: zoom-in; padding: 0; width: 100%; display: block;
  /* contain, not cover: these are catalogue cutouts of varied ratio and a 3/4
     cover box sliced the bottom off every door. Capped so the column stays
     balanced against the spec panel instead of running 830px tall. */
  height: min(70vh, 620px);
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 12px; }
.thumb {
  border: 1px solid transparent; border-radius: 6px; overflow: hidden; padding: 0;
  background: #f1ece4; cursor: pointer; aspect-ratio: 1;
}
.thumb[aria-current="true"] { border-color: var(--sage); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.product h1 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: 10px; }
.product .price-big { font-size: 22px; font-weight: 800; margin: 18px 0 4px; }
.product .price-big.ask { font-size: 17px; font-weight: 700; color: var(--sage); }
.product .desc { margin: 22px 0; font-size: 15px; color: #4a4a4a; white-space: pre-line; }
.spec { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.spec th, .spec td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 600; color: var(--muted); width: 42%; font-size: 13px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes-block { margin-top: 20px; }
.sizes-label,
.addons-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.size-pill {
  font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  background: transparent; color: inherit; font-family: inherit; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.size-pill .size-note { color: var(--muted); font-size: 12px; }
/* Same pressed language as the facet chips: one selected-state vocabulary, not two. */
.size-pill[aria-checked="true"] { background: var(--sage); border-color: var(--sage); color: var(--cream); }
.size-pill[aria-checked="true"] .size-note { color: var(--sage-soft); }
.size-pill:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
@media (hover: hover) {
  .size-pill:hover { border-color: var(--sage); transform: translateY(-1px); }
}
.size-pill:active { transform: translateY(0); }

.addons { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.addons ul { list-style: none; margin: 0; padding: 0; }
.addons li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 5px 0; }
.addon-price { white-space: nowrap; }
.addon-price .bgn { color: var(--muted); font-size: 12px; }

.price-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; max-width: 46ch; }
.price-note strong { color: var(--sage); font-weight: 700; }

/* The figure changes under the reader's finger; a short fade says which number
   is the new one without moving anything around it. */
@keyframes priceBump { from { opacity: .35; } to { opacity: 1; } }
.price-bump { animation: priceBump .32s var(--ease); }

/* ---------------------------------------------------------- sticky enquiry */
.stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px #29292912;
  padding: 10px 0; transform: translateY(110%);
  transition: transform .38s var(--ease);
}
.stickybuy[data-show="true"] { transform: translateY(0); }
.stickybuy .wrap { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.sb-name { font-family: 'Bitter', system-ui, sans-serif; font-weight: 500; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stickybuy .btn { flex: none; }
@media (min-width: 901px) { .stickybuy { display: none; } }

/* ---------------------------------------------------------- scroll reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- hero film */
.hero-film { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--white); }
.hero-film video, .hero-film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-film video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hero-film video[data-ready="true"] { opacity: 1; }
.hero-film video[data-failed="true"] { display: none; }
.product-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.source-note { font-size: 12px; color: var(--muted); margin-top: 20px; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------------------------------------- lightbox */
dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden;
}
dialog.lightbox::backdrop { background: #1a1a1ae8; }
.lb-stage { width: 100%; height: 100%; display: grid; place-items: center; padding: 46px 58px; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 92px); width: auto; object-fit: contain; border-radius: 4px; }
.lb-close, .lb-nav {
  position: absolute; background: #ffffff1f; border: 0; color: #fff;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  transition: background .2s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: #ffffff36; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #e6e6e6; font-size: 13px; }
@media (max-width: 620px) { .lb-stage { padding: 60px 12px; } }

/* ---------------------------------------------------------------- misc */
.empty { color: var(--muted); font-size: 15px; padding: 30px 0; }
.map-link { margin-top: 28px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: start; }
.contact-list { font-size: 15px; }
.contact-list dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
.contact-list dd { margin: 5px 0 0; font-weight: 600; }
.contact-list dd a:hover { color: var(--sage); }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); font: inherit; font-size: 15px; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: transparent; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------------------------------------- 2026-09-29 */
/* Still banners: same crop box as the films. A still has no parallax budget, so it
   fills the band exactly, and 62% keeps the door and a strip of floor in a 3:2
   photo cropped to a 3.6:1 band. */
.scene .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* Home trust row: each promise gets its photograph. */
.trust-img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 16px; background: #f1ece4;
}

/* The one line she can put above every page from the panel. */
.announce { background: var(--sage); color: var(--cream); font-size: 13px; font-weight: 600; text-align: center; }
.announce .wrap { padding-top: 9px; padding-bottom: 9px; }

/* A sale: her new price leads, the old euro price follows struck through. */
.price .was, .price-big .was { color: var(--muted); font-weight: 500; font-size: .85em; margin-left: 6px; }
.badge-sale { background: var(--sage); color: var(--cream); }
.badge-new { background: var(--ink); color: var(--cream); }
.badge-hit { background: #fffffff0; color: var(--ink); }
.product .badge { position: static; display: inline-block; margin-bottom: 10px; }

/* Contact form outcome. */
.form-note { font-size: 14px; margin-top: 14px; min-height: 1.4em; }
.form-note[data-state="ok"] { color: var(--sage); font-weight: 700; }
.form-note[data-state="err"] { color: #9b3b2f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }