/* ============================================================
   INTIMO.EE — Stage 1 front-end styles
   Layout rebuilt as responsive flow from the Figma design
   (not absolute coords). Iterate by plain-language direction.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--c-bg); }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0.16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  /* Outer box grows by the side padding so the VISIBLE readable column always
     measures exactly --content-max, however wide --gutter happens to be. */
  max-width: calc(var(--content-max) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.serif { font-family: var(--font-serif); }
.accent { color: var(--c-accent); }

/* ---------- Scroll reveal: blocks fade + rise as they enter the viewport ----------
   Same easing/manner as the oversize wordmark. --r-i staggers siblings that reveal together.
   Wrapped so reduced-motion users just see content (nothing hidden). */
/* Hiding is gated on .has-reveal (added by JS) so content is NEVER hidden if JS fails. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-rise));
    transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
    transition-delay: calc(var(--r-i, 0) * 80ms);
    will-change: opacity, transform;
  }
  .has-reveal .reveal.is-revealed { opacity: 1; transform: none; }
}

/* ---------- Frosted brand nav: floating pill → pinned bar on scroll ----------
   Floating: shrink-wraps tightly around its 7-column logo grid (not stretched), sits
   centered with large empty margins either side, generous inner padding.
   Stuck: expands to a full-width bar, grid spreads to fill it edge-to-edge. */
.nav {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  /* Tied to --content-max, but always leave ≥50px between the bar and each window edge. */
  width: min(calc(var(--content-max) + 60px), calc(100% - 100px));
  z-index: 50;
  padding: 32px 56px;
  background: var(--c-frost);
  backdrop-filter: blur(var(--c-frost-blur));
  -webkit-backdrop-filter: blur(var(--c-frost-blur));
  border-radius: var(--radius-nav);
  transition: top .3s ease, width .3s ease, max-width .3s ease, border-radius .3s ease, padding .3s ease;
}
.nav.is-stuck {
  top: 0;
  /* Keep the same width as the floating/top state (no full-bleed); just pin to the top,
     square the top corners and compress the padding. */
  border-radius: 0 0 var(--radius-nav) var(--radius-nav);
  padding: 16px 48px;
}
/* Two independent rows, not a shared grid — each row spans the full width with its
   own even spacing between logos; row 1 and row 2 don't need to line up column-for-column. */
.nav__brands {
  display: flex;
  flex-direction: column;
  row-gap: 26px;
  transition: row-gap .3s ease;
}
.nav__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.nav.is-stuck .nav__brands { row-gap: 14px; }
.nav__brands a { display: inline-flex; align-items: center; }
/* Base nav-logo height lives in one variable per state (default / stuck / any future
   breakpoint). .is-big always derives from it at +10%, so the ratio between "big" and
   normal logos can't drift out of sync no matter how many states get added later. */
.nav { --nav-logo-h: 26px; }
.nav.is-stuck { --nav-logo-h: 24.7px; }   /* 2-row sticky: logos 5% smaller than the 26px floating size */

/* Ultra-wide (~1700px+): only the SCROLLED (sticky) bar collapses to a single row.
   On landing (floating/top) it keeps the normal 2-row layout, same as smaller screens.
   The two .nav__row wrappers collapse via display:contents so every logo becomes a direct
   flex child, spread evenly across a wider bar. */
@media (min-width: 1700px) {
  .nav.is-stuck { width: min(1600px, calc(100% - 48px)); --nav-logo-h: 18px; }
  .nav.is-stuck .nav__brands { flex-direction: row; justify-content: space-between; align-items: center; }
  .nav.is-stuck .nav__row { display: contents; }
}

/* Stopgap (not the full responsive pass yet): as the window narrows past the bar's natural
   content width, step the logo height down so space-between always keeps a gap and logos
   never touch/overlap. Real tablet/phone layout comes later. */
@media (max-width: 1340px) { .nav { --nav-logo-h: 22px; } .nav.is-stuck { --nav-logo-h: 21px; } }
@media (max-width: 1160px) { .nav { --nav-logo-h: 19px; } .nav.is-stuck { --nav-logo-h: 18px; } }
@media (max-width: 1000px) { .nav { --nav-logo-h: 16px; } .nav.is-stuck { --nav-logo-h: 15px; } }
/* ≤860 the nav goes 3 rows (see renderNav) — fewer logos per row, so they can grow again;
   tighter row-gap keeps the 3-row bar (esp. sticky) from getting tall. */
@media (max-width: 860px) {
  .nav { --nav-logo-h: 21px; padding-left: 28px; padding-right: 28px; }  /* half the 56px — wider rows */
  .nav .nav__brands { row-gap: 18px; }
  .nav.is-stuck { --nav-logo-h: 20px; padding-left: 24px; padding-right: 24px; }
  .nav.is-stuck .nav__brands { row-gap: 10px; }
}
/* ---------- Mobile brand menu (≤560) ----------
   Top of page: the full logo grid, stretched wide, 5 rows (built by renderNav).
   Scrolled (is-stuck) — and product pages, which are always stuck — the grid swaps for one
   big obvious menu button; tapping opens the fullscreen brand overlay. */
.nav__menu-btn { display: none; }
/* Phone = narrow (portrait) OR flat (iPhone landscape): same brand-menu behaviour. */
@media (max-width: 560px), (max-height: 440px) {
  .nav { top: 16px; width: calc(100% - 24px); padding: 24px 19px; --nav-logo-h: 26px; }
  .nav .nav__brands { row-gap: 18px; }
  /* 2 proper centred columns: each logo centres in its half (not pushed to the edges). */
  .nav .nav__row { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; }
  /* Front page: the brands box sits IN the page flow under the intimo logo (JS moves it
     there) — 2 columns × 7 rows of bigger logos; pins to the top only once scrolled past. */
  body[data-page="home"] .nav:not(.is-stuck) {
    /* stacked grid adds a 32px row-gap above — negative margins net ~17px gap above,
       ~19px below (half the old gap to the "Armas klient!" block). */
    position: static; transform: none; width: 100%; margin: -15px 0 -13px;
  }
  /* Half spacing between the Estonian and English welcome blocks too. */
  .welcome .lang-block { margin-bottom: 18px; }
  /* 20px = the container gutter at phone width — same gap top, left, and logo→brands box. */
  body[data-page="home"] .home { padding-top: 20px; }
  body[data-page="home"] .home__logo { height: 40.6px; }   /* 58px −30% */
  /* Phones: per-logo mobile scale (config scaleMobile) wins over the global scale.
     (Extra selector depth: the base img rules appear LATER in the file and would
     override an equal-specificity rule here.) */
  .nav .nav__brands img {
    height: calc(var(--nav-logo-h, 24px) * var(--logo-scale-m, var(--logo-scale, 1)));
  }
  /* Pinned bar doubles as the menu: row 1 = the 54px button, row 2 = the logo grid
     collapsed to 0fr. .menu-open transitions row 2 to 1fr — the SAME bar slides open. */
  .nav.is-stuck {
    top: 0; width: calc(100% - 20px); padding: 0; --nav-logo-h: 18px;
    height: 54px;                      /* explicit so open-state height can transition */
    display: grid;
    grid-template-rows: 54px 0fr;
    animation: nav-drop .45s var(--ease-out);   /* bar slides in from above when it pins */
    transition: grid-template-rows .55s var(--ease-out), height .55s var(--ease-out),
                top .55s var(--ease-out), width .55s var(--ease-out),
                border-radius .55s var(--ease-out);
  }
  .nav.is-stuck .nav__menu-btn {
    grid-row: 1;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; min-height: 54px;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: 15px;
    letter-spacing: 2.5px; text-transform: uppercase; color: #111;
    transition: opacity .35s var(--ease-out);
  }
  .nav.is-stuck .nav__menu-btn svg { width: 24px; height: 24px; color: var(--c-accent); }
  .nav.is-stuck .nav__brands {
    grid-row: 2;
    min-height: 0; overflow: hidden;   /* lets the 0fr row truly collapse */
    opacity: 0;
    padding: 0 19px;
    align-items: center;
    row-gap: 4px;
    transition: opacity .4s var(--ease-out), padding .55s var(--ease-out);
  }
  /* Open menu = ONE centred column (the overlay layout he liked): row wrappers dissolve
     so all 14 logos stack; generous tap padding per logo. */
  .nav.is-stuck .nav__row { display: contents; }
  .nav.is-stuck .nav__brands a { padding: 8px 16px; }
  /* Open = a proper box: 15px off EVERY screen edge, all corners rounded, above the OL
     (z 500 > watermark's 100). Logos centre both ways; the ::before/::after auto-margin
     pair keeps the column vertically centred yet top-aligned if it ever overflows. */
  .nav.is-stuck.menu-open {
    top: 20px;
    width: calc(100% - 40px);
    height: calc(100vh - 40px);
    height: calc(100svh - 40px);   /* svh = smallest viewport: Safari's collapsing address
                                      bar can never cut the box off */
    grid-template-rows: 0px 1fr;   /* header row collapses too — logos own the whole box */
    border-radius: var(--radius-nav);
    z-index: 500;
    --nav-logo-h: 21px;            /* smaller so all 14 always fit top to bottom */
  }
  .nav.is-stuck.menu-open .nav__brands a { padding: 7px 16px; }
  @keyframes nav-drop {
    from { transform: translate(-50%, -110%); }
    to   { transform: translate(-50%, 0); }
  }
  /* While open, the fading VAATA button collapses with its 0px row instead of
     holding 54px of empty space above the first logo. */
  .nav.is-stuck.menu-open .nav__menu-btn { min-height: 0; height: 100%; overflow: hidden; }
}
/* Hidden EVERYWHERE by default (outside the phone block — otherwise it renders as a raw
   button inside the iPad/desktop nav); the phone menu-open rule below reveals it. */
.nav__menu-close { display: none; }
@media (max-width: 560px), (max-height: 440px) {
  .nav.is-stuck.menu-open .nav__brands { opacity: 1; padding: 34px 19px; overflow-y: auto; }
  .nav.is-stuck .nav__brands::before, .nav.is-stuck .nav__brands::after { content: ""; margin: auto; }
  .nav.is-stuck.menu-open .nav__menu-btn { opacity: 0; pointer-events: none; }
  .nav.is-stuck.menu-open .nav__menu-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3); background: transparent;
    color: #111; font-size: 22px; line-height: 1; cursor: pointer;
    animation: lb-fade .4s ease;
  }
}
/* Invisible tap-outside-to-close backdrop for the expanding bar menu (the menu itself is
   the pinned nav — see the .nav.is-stuck rules). Sits UNDER the bar (z 300 < 400). */
.brand-overlay { position: fixed; inset: 0; z-index: 300; display: none; }
.brand-overlay.is-open { display: block; }

/* --logo-scale is set inline per-logo (config `scale` field); defaults to 1 = no change. */
.nav__brands img { height: calc(var(--nav-logo-h) * var(--logo-scale, 1)); width: auto; object-fit: contain; opacity: .82; transition: height .3s ease, opacity .28s ease; }
/* micro-interaction: hovered brand logo lifts + brightens */
.nav__brands a { transition: transform .28s var(--ease-out); }
.nav__brands a:hover { transform: translateY(-3px); }
.nav__brands a:hover img { opacity: 1; }
/* Text fallback when a logo image is missing */
.nav__brands .brand-fallback {
  color: #111; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase;
}

/* ---------- Hero background photo (fixed, lowest layer, left-aligned) ---------- */
.herobg {
  position: fixed;
  top: 0;
  left: 0;
  width: min(1060px, 100%);
  height: auto;
  z-index: 0;               /* lowest — sits behind all content */
  pointer-events: none;
}

/* ---------- Fade behind OL: full width, height matches OL (set via JS custom property) ---------- */
.ol-fade {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--ol-height, 30vh);   /* fallback until JS measures OL; kept in sync on resize */
  background: linear-gradient(to top, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0) 100%);
  z-index: 90;    /* above all page content (z-index 1), below OL (z-index 100) */
  pointer-events: none;
}

/* ---------- Oversize "intimo" — solid gradient wordmark, fixed near the bottom ----------
   Outer element handles the entrance tween + resting position; inner handles the scroll
   parallax. Kept separate so the two transforms don't fight. */
.watermark {
  position: fixed;
  left: 5%;
  bottom: 0;
  width: 90%;
  aspect-ratio: 1819.79 / 432;   /* wordmark SVG viewBox */
  z-index: 100;                  /* in front of all content, incl. nav */
  pointer-events: none;
  transform: translateY(120%);   /* starts fully off-screen below (entrance) */
  transition: transform 2.5s cubic-bezier(.22, 1, .36, 1);
}
.watermark.is-in {
  transform: translateY(3%);     /* rests 3% lower, bleeding off the window bottom */
}
.watermark__mark {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(var(--wm-scroll, 0%));   /* scroll parallax, set by JS (no transition) */
}

/* ---------- OL, right-edge variant (product page) ----------
   Same wordmark, entrance tween and parallax as the front page, mirrored 90°:
   glued to the RIGHT screen edge, 90% of viewport height long, 5% margins top/bottom,
   resting 3% off the right edge. Entrance slides in from off-screen right. */
.watermark--side {
  --ol-side-w: 20vw;                   /* one knob: OL width as a fraction of screen width */
  left: auto;
  bottom: auto;
  right: 0;
  top: 130px;                          /* starts just below the pinned nav */
  width: var(--ol-side-w);
  height: calc(var(--ol-side-w) * 1819.79 / 432);  /* long side follows the wordmark ratio —
                                                      taller than the viewport, so the bottom
                                                      is cut off by the screen edge */
  aspect-ratio: auto;
  /* Unlike the front page: sits BEHIND content (z1), in front of the fixed hero bg (z0). */
  z-index: 0;
  transform: translateX(120%);         /* entrance start: fully off-screen right */
}
.watermark--side.is-in { transform: translateX(3%); }
.watermark--side .watermark__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ol-side-w) * 1819.79 / 432);   /* long side, laid horizontally then rotated */
  max-width: none;   /* the global img { max-width:100% } reset would clamp this to the narrow container */
  height: var(--ol-side-w);
  /* rotate(-90deg) matches the Figma frame; trailing translateY runs along the rotated
     local axis, which points toward the RIGHT screen edge — same 0–15% drift as front. */
  transform: translate(-50%, -50%) rotate(-90deg) translateY(var(--wm-scroll, 0%));
}

/* Fade behind side-mounted OL: full height, right edge, gradient right→left.
   Same layer band as the OL — above the hero bg, below content (DOM order keeps it under OL). */
.ol-fade--side {
  left: auto;
  bottom: auto;
  right: 0;
  top: 0;
  height: 100%;
  width: var(--ol-width, 20vw);        /* synced to OL's rendered width by parallax.js */
  z-index: 0;
  background: linear-gradient(to left, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0) 100%);
}

/* ---------- Home two-column layout ---------- */
.home {
  position: relative;
  z-index: 1;               /* content sits above the hero bg, below the oversize wordmark */
  padding-top: 293px;       /* clears the floating nav + 60px gap below it */
  padding-bottom: 0;
}
.home__grid { display: flex; flex-direction: column; }
/* Each row is its own left/right pair — top edges align automatically because the two
   sides are siblings in the same row, instead of two independently-flowing columns. */
.home__row {
  display: grid;
  /* minmax(0,1fr) lets columns shrink below content — so the gallery's scroll viewport
     stays constrained to half-width instead of expanding to fit its track. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(24px, 4vw, 60px);
}
.home__row:first-child { margin-top: 0; }
/* Collapse below iPad portrait (768) — the desktop layout must hold on all iPads.
   Stacked order: gallery jumps ahead of its row partner, landing between the
   KINKEKAARDID block (end of row 1) and the "30-aastane…" experience block. */
@media (max-width: 740px) {
  .home__row { grid-template-columns: 1fr; }
  .home__row .gallery { order: -1; }
}

.home__logo { height: 58px; width: auto; }
.home__row-left, .home__row-right { display: flex; flex-direction: column; }

.welcome h2 { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.5px; margin: 0 0 12px; }
.welcome p { margin: 0 0 20px; max-width: 60ch; }
.welcome .lang-block { margin-bottom: 36px; }
.welcome .lang-block:last-child { margin-bottom: 0; }

.experience h2 { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.5px; margin: 0 0 16px; }
.experience ul { margin: 0; padding-left: 1.2em; }
.experience li { margin-bottom: 6px; }

.company { margin-top: 10px; font-size: var(--fs-body-2); line-height: 1.55; }
.company p { margin: 0 0 20px; }

/* booking / contact / gift cards (centred right column) */
.info-block { font-size: var(--fs-body-2); line-height: 1.55; text-align: center; margin: 8px 0 0; }
.info-block p { margin: 0 0 32px; white-space: pre-line; }

/* contact lines with tiny outline icons */
.contact-list { list-style: none; margin: 0 0 32px; padding: 0; }
.contact-list li { display: flex; align-items: center; justify-content: center; gap: 9px; line-height: 1.85; }
.contact-list .ci { width: 1.05em; height: 1.05em; flex: 0 0 auto; color: rgba(255, 255, 255, 0.9); }

.divider { height: 1px; background: rgba(255,255,255,0.5); border: 0; margin: 40px 0; width: 100%; }
.divider--footer { margin-top: 0; }  /* .footer's own padding-block already provides the gap above */

/* ---------- Photo gallery — horizontal carousel (2×2 visible, scrollable) ---------- */
.gallery { position: relative; min-width: 0; }
.gallery__dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; min-height: 7px; }
.gallery__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, 0.25); transition: background .25s var(--ease-out);
}
.gallery__dot.is-active { background: var(--c-accent); }

.gallery__stage { position: relative; }
.gallery__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
/* scroll-behavior deliberately NOT smooth here — JS drives the arrow/dot scroll animation
   with its own easing (animateScrollTo); CSS smoothing would fight it frame-by-frame. */
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__track { display: grid; grid-auto-flow: column; }
.gallery__track .cell {
  border-radius: var(--radius-img); overflow: hidden; background: #1a1a1a; cursor: zoom-in;
}
.gallery__track img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.gallery__track .cell:hover img { transform: scale(1.04); }

.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, opacity .25s;
}
.gallery__arrow:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gallery__arrow--prev { left: -60px; }
.gallery__arrow--next { right: -60px; }
.gallery__arrow[hidden] { display: none; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 310px; }  /* +250px extra below the logo */
/* Product pages: tighter footer — no big empty band below the logo. */
body[data-page="product"] .footer { padding-bottom: 60px; }
/* logo pinned left, socials centred on the full row (empty 3rd track balances the 1st) */
.footer__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.footer__home { justify-self: start; }
.footer__logo { height: 58px; width: auto; }
.footer__social { display: flex; align-items: center; gap: 14px; }
.footer p { margin: 0 0 20px; line-height: 1.55; font-size: var(--fs-body-2); }
/* Phones: side-by-side row gets squeezed — stack it, socials on top, logo below, centred.
   Half the desktop height: 60+310 padding → 30+155. (Product pages keep their own 60px
   bottom — that override outranks this.) */
@media (max-width: 560px) {
  .footer { padding-top: 30px; padding-bottom: 100px; }
  .footer__row { display: flex; flex-direction: column; align-items: center; gap: 34px; }
  .footer__logo { justify-self: auto; }
}

/* Reusable static ring button — same visual language as .gallery__arrow, but not positioned. */
.icon-ring {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  /* currentColor + 1px = exactly the icons' own stroke (0.7 scaled from the 24 viewBox ≈ 1px) */
  border: 1px solid currentColor; background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.icon-ring:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* stroke-width scales with the viewBox, so the enlarged ring icons need it halved
   (1.4 → .7) to keep the same hairline weight as the small contact icons. */
.icon-ring .ci { width: 34px; height: 34px; stroke-width: .7; }
.icon-ring--fb .ci { width: 37.4px; height: 37.4px; }   /* +10% */

/* ---------- Lightbox (all site images) ---------- */
[data-lb-clickable] { cursor: zoom-in; }
body.lb-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
}
.lightbox.is-open { display: flex; animation: lb-fade .25s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 9, 9, 0.93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lightbox__stage {
  position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 100%; max-height: 100%;
}
.lightbox__img {
  max-width: min(1100px, 88vw);
  max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-img);
  background: #1a1a1a;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.lightbox__cap { text-align: center; max-width: min(1100px, 88vw); font-family: var(--font-sans); }
.lightbox__caption { display: block; color: var(--c-text); font-size: var(--fs-body-2); margin-bottom: 4px; }
.lightbox__counter { color: var(--c-accent); font-size: 14px; letter-spacing: 1.5px; }

.lightbox__close {
  position: absolute; top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3); background: transparent;
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(13, 13, 13, 0.35);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.lightbox__nav--prev { left: clamp(10px, 2.5vw, 28px); }
.lightbox__nav--next { right: clamp(10px, 2.5vw, 28px); }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--c-accent); color: var(--c-accent); }
.lightbox__nav[hidden] { display: none; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
/* Nav is always pinned (fixed) on product pages — clear it + 60px gap, and sit above
   the fixed hero bg (same stacking as .home on the front page). */
body[data-page="product"] main.container {
  position: relative;
  z-index: 1;
  padding-top: 145px;   /* two-row pinned nav (~115px) + 30px gap above the brand logo */
}
/* Ultrawide: nav collapses to one row (see the ≥1700px nav rules) and is ~half as tall —
   pull the content up to keep the same visual gap under it. */
@media (min-width: 1700px) {
  body[data-page="product"] main.container { padding-top: 85px; }
}
/* ≤860: nav is 3 rows (taller) — push content further down to keep a clear gap under it. */
@media (max-width: 860px) {
  body[data-page="product"] main.container { padding-top: 165px; }
}
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
}
/* Collapse below iPad portrait (768) — the desktop layout must hold on all iPads. */
@media (max-width: 740px) { .product { grid-template-columns: 1fr; } }

/* left column */
.product__media { position: relative; }
.product__hero {
  width: 100%;
  border-radius: var(--radius-nav);   /* same rounding as the frosted nav bar */
  overflow: hidden;
  background: #1a1a1a;
  aspect-ratio: 657 / 753;
}
.product__hero img { width: 100%; height: 100%; object-fit: cover; }
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.thumbs button {
  padding: 0; border: 0; background: #1a1a1a;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid transparent;
  transition: outline-color 0.15s;
}
.thumbs button.is-active { outline-color: var(--c-accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* right column */
/* Sits above the whole product grid, left-aligned. The filter forces the (dark,
   nav-coloured) brand SVG to pure white on the dark page. */
.product__brand-link { display: inline-block; margin-bottom: 20px; }
.product__brand-logo { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); }
.product__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, var(--fs-title));
  line-height: 1.0;
  letter-spacing: -0.56px;
  margin: 0 0 18px;
  font-weight: 400;
}
.product__subtitle { color: var(--c-text); margin: 0 0 28px; }

/* price + discount */
.price-row { display: flex; align-items: center; gap: 22px; position: relative; margin-bottom: 30px; }
.price-now { font-size: var(--fs-price); font-weight: 600; color: var(--c-accent); line-height: 1; }
.price-old { font-size: 30px; color: var(--c-text); text-decoration: line-through; }
.discount-badge {
  font-family: var(--font-serif-badge);
  font-size: 40px;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 9px;
  padding: 14px 26px;
  transform: rotate(-14.5deg);
  line-height: 1;
  margin-left: auto;   /* pushes the badge to the right edge of the content column */
}

/* option groups (frame 3 supports several) */
.option { margin-bottom: 26px; }
.option__label {
  font-size: var(--fs-heading);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}
.option__price { color: var(--c-accent); font-weight: 600; font-size: 28px; margin-left: 12px; }
/* Sizes: a table — equal columns that line up across wrapped rows, thin rules between
   columns AND rows (no pill outlines). Two knobs: --size-col-w is the narrowest a column
   may get before the grid drops to fewer columns; --size-row-h is the row height.
   Row rules are painted as a repeating background on the grid rather than as each cell's
   border, so they run the FULL table width even where the last row is only part full
   (a border can only ever be as wide as the cells that exist). That requires a fixed row
   height for the gradient to land on. Column rules stay per-cell (border-right), which is
   what keeps them out of the last row's empty area.
   The grid then overhangs its clipping wrapper by 1px right and bottom, trimming the last
   column's rule and the rule under the final row — so the table has no outer border and
   CSS never needs to know how many columns auto-fill landed on. */
.sizes { overflow: hidden; }
.sizes__grid {
  --size-col-w: 104px;
  --size-row-h: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-col-w), 1fr));
  grid-auto-rows: var(--size-row-h);
  width: calc(100% + 1px);
  margin-bottom: -1px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--size-row-h) - 1px),
    rgba(255, 255, 255, 0.35) calc(var(--size-row-h) - 1px),
    rgba(255, 255, 255, 0.35) var(--size-row-h)
  );
}
.size {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18.7px;   /* 22px −15% */
  color: var(--c-text);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.description { color: var(--c-text); line-height: 1.35; margin: 30px 0; max-width: 62ch; }

/* ---------- Prev/next product nav (below the product grid) ----------
   Gallery-language ring arrows in the middle; the neighbouring product's name either
   side, hugging its arrow. Everything links to that product. */
.product-nav {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 70px;
}
.product-nav__label {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.15;
  transition: color .15s;
}
.product-nav__label--prev { justify-self: end; text-align: right; }
.product-nav__label--next { justify-self: start; text-align: left; }
.product-nav__label:hover { color: var(--c-accent); }
/* Reversed states vs the shared .icon-ring: red at rest, white on hover.
   (Ring border is currentColor, but .icon-ring:hover sets border-color explicitly —
   so the hover here re-sets both.) */
.product-nav__arrow { font-size: 22px; line-height: 1; color: var(--c-accent); }
.product-nav__arrow:hover { color: #fff; border-color: #fff; }
/* Phones: tighter middle (arrows 12px apart) and smaller neighbour names. */
@media (max-width: 560px) {
  .product-nav { gap: 12px; }
  .product-nav__label { font-size: 15.4px; }   /* 22px −30% */
}

/* inquiry form */
/* --field-h / --field-gap are shared by the inputs and the submit button so the button
   can be sized to one input's box without either drifting from the other. */
.inquiry { margin-top: 40px; --field-h: 60px; --field-gap: 20px; }
.inquiry h2 { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.5px; margin: 0 0 20px; }
.inquiry .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--field-gap); }
.inquiry input, .inquiry textarea {
  width: 100%;
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-input);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  padding: 20px;
}
.inquiry input { height: var(--field-h); padding-block: 0; }
.inquiry textarea { grid-column: 1 / -1; min-height: 152px; resize: vertical; }
.inquiry input::placeholder, .inquiry textarea::placeholder { color: var(--c-text-muted); }
.inquiry .full { grid-column: 1 / -1; }
/* One input wide (the .fields grid is two equal columns split by --field-gap), same height
   as an input, centred on the form. */
.btn-submit {
  display: block;
  width: calc((100% - var(--field-gap)) / 2);
  height: var(--field-h);
  margin: 22px auto 0;
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-input);
  color: var(--c-accent);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-heading);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-submit:hover { background: rgba(206,0,0,0.1); }
/* ≤860 (iPad portrait): the form lives in a half-width column — stack the name/email
   fields, shave 15px off the input/button height, heading + SAADA type −15%. */
@media (max-width: 860px) {
  .inquiry { --field-h: 45px; }
  .inquiry .fields { grid-template-columns: 1fr; }
  .inquiry h2, .btn-submit { font-size: calc(var(--fs-heading) * 0.85); }
  .inquiry h2 { line-height: 1.2; }
}
@media (max-width: 560px) {
  .inquiry .fields { grid-template-columns: 1fr; }
  /* single-column fields — the button follows them to full width */
  .btn-submit { width: 100%; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   BRAND PAGE — product grid
   Same shell as the product page (pinned nav, front-style OL);
   cards speak the existing motion language: staggered reveal,
   slow-settle image zoom, gentle lift on hover.
   ============================================================ */
body[data-page="brand"] main.container {
  position: relative;
  z-index: 1;
  max-width: min(calc(var(--content-max) + 60px), calc(100% - 100px));  /* match nav bar's outer width */
  padding-top: 145px;
  padding-bottom: 140px;   /* generous open space below the grid */
}
@media (min-width: 1700px) { body[data-page="brand"] main.container { padding-top: 85px; } }
@media (max-width: 860px)  { body[data-page="brand"] main.container { padding-top: 165px; padding-bottom: 100px; } }
/* Phones: smaller brand logo; top gap = the 54px pinned bar + 60px, matching the 60px bottom. */
@media (max-width: 560px), (max-height: 440px) {
  body[data-page="brand"] main.container { padding-top: 84px; }  /* 54px bar + 30px gap */
  .brand-head__logo { height: 27px; }
}

.brand-head { display: flex; align-items: baseline; }
.brand-head__logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.brand-head__fallback { font-family: var(--font-serif); font-size: 30px; }
.divider--brand { margin: 26px 0 44px; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 42vw), 1fr));
  gap: 10px;
  row-gap: clamp(30px, 4vw, 52px);
  /* .container's own padding-inline (--gutter) insets everything, incl. this grid — pull
     back out by that same amount so the cards reach exactly the nav bar's outer edges. */
  margin-inline: calc(var(--gutter) * -1);
}
.pcard { position: relative; display: block; transition: transform .28s var(--ease-out); }
.pcard:hover { transform: translateY(-4px); }
.pcard__imgwrap {
  position: relative;
  border-radius: var(--radius-nav) var(--radius-nav) 0 0;   /* squared to the info panel below */
  overflow: hidden;
  background: #1a1a1a;
  aspect-ratio: 657 / 753;            /* same crop as the product hero */
}
.pcard__imgwrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.pcard:hover .pcard__imgwrap img { transform: scale(1.04); }
/* Mini version of the product page's tilted discount badge, frosted onto the photo —
   hangs off the card's top-right corner like a price tag (sits outside .pcard__imgwrap
   so its overflow:hidden crop doesn't clip the overlap). */
.pcard__badge {
  position: absolute; top: -12px; right: -12px; z-index: 1;
  font-family: var(--font-serif-badge);
  font-size: 19px; line-height: 1;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 7px;
  padding: 7px 12px;
  transform: rotate(-14.5deg);
  background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* Info panel: genuinely light (near-white), so the card reads bright even on the dark page —
   dark text on it, not white-on-transparent. Rounds to match the image's top corners. */
.pcard__info {
  background: #f7f4f1;
  border-radius: 0 0 var(--radius-nav) var(--radius-nav);
  padding: 22px 18px 26px;
}
.pcard__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  color: #191512;
  margin: 0 0 8px;
}
.pcard__price { margin: 0; font-weight: 600; font-size: 19px; color: var(--c-accent); }
.pcard__price s { color: rgba(25, 21, 18, 0.45); font-weight: 400; margin-left: 10px; }
.pcard__from { font-weight: 400; color: rgba(25, 21, 18, 0.55); }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; row-gap: 26px; }
  .pcard__info { padding: 16px 14px 20px; }
  .pcard__name { font-size: 17px; }
  .pcard__price { font-size: 16px; }
  .pcard__badge { font-size: 15px; padding: 5px 9px; top: -8px; right: -8px; }
}

/* ---------- Page-exit transition ----------
   .page-exit (set by JS on internal link clicks) reverses the OL entrance FAST — an
   accelerating dive out — while the page content dips away; navigation follows ~450ms in. */
.page-exit .watermark {
  transition: transform .45s cubic-bezier(.6, 0, .9, .4);   /* ease-in: accelerates out */
}
.page-exit main, .page-exit .footer {
  opacity: 0;
  transition: opacity .4s ease;
}

/* small helper for JS-empty states */
.loading { opacity: 0.5; padding: 80px 0; text-align: center; }