/* ============================================================
   LUXVI — Design System
   Light & editorial: warm bone gallery, cognac accent, Fraunces display
   ============================================================ */

:root {
  /* tell the browser this site manages its own theming — stops Android/Samsung "auto dark mode" from recolouring the light site */
  color-scheme: light;
  /* Palette — warm gallery light theme */
  --bg: #f4eee3;
  --bg-2: #ebe2d3;
  --surface: #fbf7f0;
  --surface-2: #f0e8db;
  --line: rgba(43, 36, 28, 0.16);
  --line-strong: rgba(43, 36, 28, 0.30);
  --text: #2b2520;
  --muted: #6d6353;
  --gold: #8a5a2b;        /* cognac/bronze accent (var name kept for compatibility) */
  --gold-bright: #a8743f; /* lighter accent for hover / decorative use */
  --gold-dim: rgba(138, 90, 43, 0.32);
  --on-accent: #faf6ef;   /* text/icons sitting on an accent fill */
  --hero-text: #f7f2e8;   /* light text used over the hero photo */

  /* Type */
  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-med: 350ms;
  --t-slow: 700ms;

  /* Layout */
  --max-w: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 5rem;
  --radius: 14px;
  --media-radius: 5px;   /* subtle corners on product/media images — premium, gallery-like */
  --radius-sm: 8px;
  --media-shadow: 0 22px 50px -24px rgba(43, 32, 20, 0.4);
}

/* ---------- Dark theme (opt-in via the footer switch) ---------- */
:root.theme-dark {
  color-scheme: dark;
  --bg: #141110;
  --bg-2: #1a1614;
  --surface: #201b18;
  --surface-2: #272019;
  --line: rgba(237, 230, 219, 0.12);
  --line-strong: rgba(237, 230, 219, 0.24);
  --text: #ede6db;
  --muted: #a89e90;
  --gold: #c6a15b;
  --gold-bright: #dcc08a;
  --gold-dim: rgba(198, 161, 91, 0.32);
  --on-accent: #1a1410;
  --media-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.6);
}
/* black brand logos flip to light on the dark chips */
:root.theme-dark .brand-chip img { filter: invert(1); }

/* theme switch (sun / toggle / moon) */
.theme-toggle { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; color: var(--muted); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-switch {
  width: 2.7rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 1rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--gold);
  transition: left var(--t-med) var(--ease-out);
}
:root.theme-dark .theme-knob { left: calc(100% - 1.15rem - 2px); }
/* Compact theme toggle injected into the top nav */
.theme-toggle--nav { margin-top: 0; gap: 0.4rem; color: var(--hdr-text, var(--muted)); }
.theme-toggle--nav svg { width: 0.95rem; height: 0.95rem; }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--on-accent); }

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

.display-xl { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.display-lg { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.display-md { font-size: clamp(1.5rem, 3vw, 2.2rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.lead { font-size: 1.08rem; color: var(--muted); max-width: 60ch; }

/* ---------- Layout helpers ---------- */

.container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.grid-2 { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }
/* On mobile, always show the photo before its text block so the page reads photo → text, photo → text */
@media (max-width: 899px) { .grid-2 .tile-reveal { order: -1; } }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color var(--t-med) ease, border-color var(--t-med) ease, backdrop-filter var(--t-med) ease, transform var(--t-med) var(--ease-out);
  border-bottom: 1px solid transparent;
  /* default = transparent over the hero photo: use light text */
  --hdr-text: var(--hero-text);
  --hdr-muted: rgba(247, 242, 232, 0.78);
  --hdr-accent: var(--gold-bright);
}
.site-header.scrolled {
  background: rgba(26, 20, 13, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(247, 242, 232, 0.12);
  /* scrolled onto the light page: a decisive dark bar with light text */
  --hdr-text: var(--hero-text);
  --hdr-muted: rgba(247, 242, 232, 0.78);
  --hdr-accent: var(--gold-bright);
}
/* in dark theme the page itself is dark, so lift the scrolled bar a few shades + give it a clearer edge so it reads as a distinct bar */
:root.theme-dark .site-header.scrolled {
  background: rgba(46, 37, 28, 0.92);
  border-bottom-color: rgba(247, 242, 232, 0.16);
}
/* slides up out of view when scrolling down; JS reveals it on scroll-up */
.site-header.hidden { transform: translateY(-100%); }
/* while the mobile menu is open, drop the backdrop-filter/transform so the
   full-screen menu (a fixed child) is sized to the viewport, not the header bar */
.site-header.menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  border-bottom-color: transparent;
  /* drop the backdrop-filter INSTANTLY (not over --t-med): while it lingers it acts as the
     containing block for the fixed menu, so a transitioned removal makes the menu grow from
     header-size to full-screen — which reads as "text before background" once you've scrolled */
  transition: none;
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--hdr-text, var(--text));
  white-space: nowrap;
  transition: color var(--t-med) ease;
}
.logo .logo-mark { width: 2.1rem; height: 2.1rem; flex-shrink: 0; color: var(--hdr-accent, var(--gold)); transition: color var(--t-med) ease; }
.logo .logo-word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* optical centering of tracked text */
}
/* full brand logo — inline SVG wordmark; text uses currentColor so it follows the header/footer
   colour (cream on the dark header, --text in the footer), the rule keeps its cognac gradient */
.logo-svg { height: 2.4rem; width: auto; display: block; overflow: visible; }
.footer-brand .logo-svg { height: 2.9rem; }
/* while the mobile menu is open the logo sits on the light page backdrop → dark text (light theme) */
:root:not(.theme-dark) .site-header.menu-open .logo { color: var(--text); }
/* full brand logo image (legacy webp variant — kept for reference) */
.logo-img { height: 2.5rem; width: auto; display: block; }
.logo-img--cream { display: none; }
/* the header always sits on a dark backdrop (hero / dark bar) → warm cream logo */
.site-header .logo-img--color { display: none; }
.site-header .logo-img--cream { display: block; }
.footer-brand .logo-img { height: 3rem; }
/* dark theme footer → cream logo */
:root.theme-dark .logo-img--color { display: none; }
:root.theme-dark .logo-img--cream { display: block; }

.main-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.main-nav a {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hdr-muted);
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--t-fast) ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--hdr-text); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--hdr-accent);
  transition: right var(--t-med) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }

/* Language switcher */
.lang-switch { display: flex; align-items: center; gap: 0.25rem; }
.lang-switch button {
  appearance: none;
  background: none;
  border: none;
  color: var(--hdr-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  transition: color var(--t-fast) ease;
}
.lang-switch button:hover { color: var(--hdr-text); }
.lang-switch button.active { color: var(--hdr-accent); }
.lang-switch .sep { color: var(--hdr-muted); opacity: 0.5; font-size: 0.7rem; }

/* Mobile nav */
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 60;
}
.nav-toggle svg { width: 26px; height: 26px; stroke: var(--hdr-text); transition: stroke var(--t-med) ease; }
/* When the full-screen mobile menu is open it sits on a solid page-coloured backdrop,
   so the hamburger + logo must use the page text colour (auto-adapts to light/dark theme). */
.site-header.menu-open .nav-toggle svg { stroke: var(--text); }
/* lift the logo above the full-screen menu overlay so it stays visible while the menu is open */
.site-header.menu-open .logo { position: relative; z-index: 60; }
:root:not(.theme-dark) .site-header.menu-open .logo-img--color { display: block; }
:root:not(.theme-dark) .site-header.menu-open .logo-img--cream { display: none; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    background: var(--bg);
    z-index: 55;
    visibility: hidden;
    pointer-events: none;
    /* the panel is the SAME colour as the page (--bg), so it can appear INSTANTLY with no visible
       pop. That avoids compositing the whole page behind a semi-transparent overlay every frame —
       which was the source of the stutter. Only the links fade, so it reads as one smooth motion.
       On close, keep the panel until the links have faded out, then hide. */
    transition: visibility 0s linear 240ms;
  }
  .main-nav.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  .main-nav a,
  .main-nav .lang-switch,
  .main-nav .theme-toggle--nav {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms ease, transform 260ms ease, color var(--t-fast) ease;
  }
  .main-nav.open a,
  .main-nav.open .lang-switch,
  .main-nav.open .theme-toggle--nav { opacity: 1; transform: none; }
  /* open fullscreen menu sits on a light backdrop → force dark text */
  .main-nav.open a { font-size: 1.05rem; color: var(--text); }
  .main-nav.open a:hover, .main-nav.open a.active { color: var(--gold); }
  .main-nav.open a::after { background: var(--gold); }
  .main-nav.open .lang-switch button { color: var(--muted); }
  .main-nav.open .lang-switch button.active { color: var(--gold); }
  .main-nav.open .theme-toggle--nav { color: var(--text); margin-top: 0.2rem; }
  .main-nav a { font-size: 1.05rem; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--t-med) ease, border-color var(--t-med) ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--on-accent); }
.btn:hover::before { transform: scaleX(1); }

.btn-solid { background: var(--gold); color: var(--on-accent); }
.btn-solid::before { background: var(--gold-bright); }
.btn-solid:hover { border-color: var(--gold-bright); }

.btn-ghost { border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap var(--t-fast) ease, color var(--t-fast) ease;
}
.link-arrow:hover { gap: 1rem; color: var(--gold-bright); }
/* prominent "view all" variant — larger, a touch bolder, tighter tracking so it stands out */
.link-arrow.link-lg { font-size: 0.95rem; letter-spacing: 0.1em; font-weight: 500; }
/* a thin underline that "draws" from left to right when the link scrolls into view, then stays */
.link-arrow.link-lg > span:first-child { position: relative; }
.link-arrow.link-lg > span:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 720ms var(--ease-out) 260ms, background-color var(--t-fast) ease;
}
.link-arrow.link-lg.visible > span:first-child::after { transform: scaleX(1); }
.link-arrow.link-lg:hover > span:first-child::after { transform: scaleX(1); background: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) {
  .link-arrow.link-lg > span:first-child::after { transform: scaleX(1); transition: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroIntro 3200ms var(--ease-out) both;
  will-change: transform;
}
@keyframes heroIntro {
  from { transform: scale(1.12); }
  to { transform: scale(1.04); }
}
/* composed hero: headline reveals with an upward wipe */
.hero-headline {
  animation: heroHeadlineIn 1150ms var(--ease-out) 240ms both;
  will-change: transform, opacity, clip-path;
}
@keyframes heroHeadlineIn {
  from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;            clip-path: inset(0 0 0 0); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(28,21,13,0.92) 0%, rgba(28,21,13,0.74) 38%, rgba(28,21,13,0.56) 66%, rgba(28,21,13,0.16) 100%);
}
.hero-content {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(4rem, 10vh, 7rem);
  color: var(--hero-text);
}
.hero-content h1 { max-width: 14ch; color: var(--hero-text); text-shadow: 0 2px 26px rgba(0,0,0,0.45); }
.hero-content .lead { margin-bottom: 2.4rem; color: rgba(247, 242, 232, 0.84); text-shadow: 0 1px 16px rgba(0,0,0,0.45); }
/* Hero eyebrow keeps the elegant cognac accent with only a soft shadow — legibility comes from the strengthened scrim behind the hero text, not a hard outline */
.hero-content .eyebrow { color: #e6cfa4; text-shadow: 0 1px 16px rgba(0,0,0,0.7); font-size: clamp(0.82rem, 2.2vw, 0.94rem); font-weight: 600; letter-spacing: 0.22em; }
.hero-content .eyebrow::before { background: #e6cfa4; }

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: rgba(247, 242, 232, 0.7);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(to bottom, var(--gold-bright), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.55); opacity: 0.5; }
}
@media (max-width: 820px) { .hero-scroll { display: none; } }

/* ---------- Product cards ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Homepage featured: always a clean row of three on desktop */
@media (min-width: 760px) { #featured-grid { grid-template-columns: repeat(3, 1fr); } }
/* Tighten the gap between the "view all" link and the categories block on mobile */
@media (max-width: 600px) { #home-categories { padding-top: 1.5rem; } }

.product-card { position: relative; cursor: pointer; }
.product-card .card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow);
  transition: border-color var(--t-med) ease, box-shadow var(--t-med) ease;
}
.product-card:hover .card-media {
  border-color: var(--gold-dim);
  box-shadow: 0 24px 55px -16px rgba(0, 0, 0, 0.7);
}
.product-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), opacity var(--t-med) ease;
}
.product-card:hover .card-media img { transform: scale(1.05); }
.product-card .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,32,20,0.22), transparent 45%);
  opacity: 0;
  transition: opacity var(--t-med) ease;
}
.product-card:hover .card-media::after { opacity: 1; }

.card-body { padding-top: 1.1rem; }
.card-brand {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.card-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0.3rem 0 0.2rem;
  transition: color var(--t-fast) ease;
}
.product-card:hover .card-name { color: var(--gold); }
.card-blurb { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.55rem; }
.card-price { font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em; }
.card-price .each { font-size: 0.75rem; color: var(--muted); }
.card-price.on-request { color: var(--muted); font-style: italic; font-size: 0.85rem; }

/* sold badge (future use: set "sold": true on a product) */
.card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(251,247,240,0.92);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.42rem 0.9rem;
}

/* ---------- Filters ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* tidy 2×2 grid of equal-width filters on small screens */
@media (max-width: 560px) {
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-bar button { width: 100%; text-align: center; padding-inline: 0.5rem; }
}
.filter-bar button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.filter-bar button:hover { color: var(--text); border-color: var(--line-strong); }
.filter-bar button.active {
  color: #18140f;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- Product detail ---------- */

.product-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .product-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.gallery-main {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow);
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity var(--t-med) ease;
}
.gallery-main img.fading { opacity: 0; }

.gallery-nav {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 0.8rem;
  pointer-events: none;
}
.gallery-nav button {
  pointer-events: auto;
  appearance: none;
  border: 1px solid var(--line-strong);
  background: rgba(251,247,240,0.78);
  backdrop-filter: blur(6px);
  color: var(--text);
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.gallery-nav button:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.gallery-nav svg { width: 18px; height: 18px; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.gallery-thumbs button {
  appearance: none;
  padding: 0;
  border: 1px solid transparent;
  background: var(--surface);
  cursor: pointer;
  aspect-ratio: 1;
  overflow: hidden;
  opacity: 0.55;
  border-radius: var(--radius-sm);
  transition: opacity var(--t-fast) ease, border-color var(--t-fast) ease;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover { opacity: 0.85; }
.gallery-thumbs button.active { opacity: 1; border-color: var(--gold); }

.product-info .eyebrow { margin-bottom: 0.9rem; }
.product-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.4rem; }
.product-price {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin: 0.8rem 0 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.product-price .original {
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: line-through;
}
.product-price .each { font-size: 0.85rem; color: var(--muted); }
.product-price.on-request { font-size: 1.05rem; color: var(--muted); font-style: italic; }
/* savings vs. original price — resale is compelling when the discount is explicit */
.price-save { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--gold); margin: 0 0 0.5rem; }
.price-save .save-pct { background: var(--gold); color: #faf6ef; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.14rem 0.5rem; border-radius: 999px; }
:root.theme-dark .price-save .save-pct { color: #1a1410; }
.card-save { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; background: var(--gold); color: #faf6ef; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: 999px; }
:root.theme-dark .card-save { color: #1a1410; }

.product-desc { color: var(--muted); margin: 1.4rem 0 2rem; }
.product-desc p { margin: 0 0 1em; }

.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 300;
  vertical-align: top;
}
.spec-table th {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding-right: 1.4rem;
  white-space: nowrap;
  width: 1%;
}

.dims-note { margin-bottom: 2.2rem; }
.dims-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.dims-list { list-style: none; padding: 0; margin: 0; }
.dims-list li {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.dims-list li:last-child { border-bottom: none; }

.viewing-note {
  border-left: 2px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 2rem;
}

/* ---------- Category tiles (home) ---------- */

/* mobile: smooth horizontal swipe carousel */
.category-tiles {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: var(--pad);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.category-tiles::-webkit-scrollbar { display: none; }
/* desktop: 3-column grid */
@media (min-width: 760px) {
  .category-tiles {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.category-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  flex: 0 0 86%;
  scroll-snap-align: center;
  display: flex;
  align-items: flex-end;
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow);
  transition: border-color var(--t-med) ease;
}
@media (min-width: 760px) { .category-tile { flex: none; } }
.category-tile:hover { border-color: var(--gold-dim); }
.category-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out), opacity 700ms ease;
}
.category-tile:hover img { transform: scale(1.06); }
.category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  /* guaranteed dark scrim where the label sits, fading out higher up — keeps light label readable on ANY photo */
  background: linear-gradient(to top, rgba(18,14,10,0.94) 0%, rgba(18,14,10,0.62) 26%, rgba(18,14,10,0.08) 62%, rgba(18,14,10,0) 100%);
}
.category-tile .tile-label {
  position: relative;
  z-index: 1;
  padding: 1.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.category-tile h3 {
  font-size: 1.7rem;
  margin: 0;
  color: #f7f2e8;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.category-tile .count {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ---------- Statement / about ---------- */

.statement {
  text-align: left;
}
.statement .display-lg { max-width: 24ch; }

.about-media {
  overflow: hidden;
  position: relative;
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow);
}
.about-media img { transition: transform 1100ms var(--ease-out), opacity 700ms ease; }
.about-media:hover img { transform: scale(1.04); }
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(43,32,20,0.16), transparent 42%);
}

.value-list { display: grid; gap: 2.2rem; margin-top: 1rem; }
.value-list .value h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.value-list .value h3::before {
  content: counter(value-counter, decimal-leading-zero);
  counter-increment: value-counter;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.value-list { counter-reset: value-counter; }
.value-list .value p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* ---------- Reveal stack (about: values + animated image reveal) ---------- */
.reveal-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .reveal-stack { grid-template-columns: 1fr; gap: 2.5rem; } }
.rs-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
/* the three values are a tap accordion at ALL widths — only the active value shows its text */
.rs-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  opacity: 0.72;
  padding: 1.4rem 2.2rem 1.4rem 0;
  border-bottom: 1px solid var(--gold-dim);
  transition: opacity var(--t-med) ease;
}
.rs-item:first-child { border-top: 1px solid var(--gold-dim); }
.rs-item.is-active { opacity: 1; }
.rs-num {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.55rem;
  flex-shrink: 0;
  transition: color var(--t-med) ease;
}
.rs-item.is-active .rs-num { color: var(--gold); }
.rs-item h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; }
/* smooth collapse via animatable grid rows (0fr -> 1fr) — resolves to the text's real height,
   so it never overshoots or jumps like a fixed max-height */
.rs-item > div { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 380ms var(--ease-out); }
.rs-item.is-active > div { grid-template-rows: auto 1fr; }
.rs-item p {
  min-height: 0; overflow: hidden; margin: 0;
  color: var(--muted); font-size: 0.9rem; line-height: 1.6;
  opacity: 0; padding-top: 0;
  transition: opacity 260ms ease, padding-top 380ms var(--ease-out);
}
.rs-item.is-active p { opacity: 1; padding-top: 0.5rem; }
.rs-item::after {
  content: ""; position: absolute; right: 0.4rem; top: 2rem;
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg); transition: transform var(--t-med) ease; opacity: 0.7;
}
.rs-item.is-active::after { transform: rotate(225deg); }
.rs-visual { display: flex; justify-content: center; }
.rs-svg { width: 100%; max-width: 460px; height: auto; filter: drop-shadow(0 22px 44px rgba(43, 32, 20, 0.28)); }
.rs-tile { transform-box: fill-box; transform-origin: center; }
/* mobile: slightly smaller value titles + tighter padding */
@media (max-width: 820px) {
  .rs-item { padding: 1.15rem 2rem 1.15rem 0; }
  .rs-item h3 { font-size: 1.25rem; }
  .rs-item::after { top: 1.6rem; }
}
.tile-reveal { display: flex; justify-content: center; }

/* ---------- Contact ---------- */

.contact-card {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius);
}
.contact-row {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: none; }
.contact-row svg { width: 22px; height: 22px; stroke: var(--gold); flex-shrink: 0; margin-top: 0.2rem; }
.contact-row h3 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.contact-row p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.contact-row a { color: var(--gold); transition: color var(--t-fast) ease; }
.contact-row a:hover { color: var(--gold-bright); }

/* contact form */
.contact-form { display: grid; gap: 1rem; }
.cf-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 0.3rem; }
.cf-field { display: grid; gap: 0.35rem; }
.cf-field label { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  transition: border-color var(--t-fast) ease;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button.btn { justify-self: start; margin-top: 0.2rem; cursor: pointer; }
.cf-status { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.5; }
.cf-status.ok { color: #3f7d4f; }
.cf-status.err { color: #9d3b32; }
:root.theme-dark .cf-status.ok { color: #7fb98c; }
:root.theme-dark .cf-status.err { color: #e0a59c; }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; gap: 0.7rem; }
.faq > .eyebrow { margin-bottom: 0.4rem; }
.faq-search { position: relative; margin-bottom: 0.3rem; }
.faq-search input {
  width: 100%;
  height: 3rem;
  border-radius: 2rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0 2.9rem 0 1.3rem;
  outline: none;
  transition: border-color var(--t-fast) ease;
}
.faq-search input::placeholder { color: var(--muted); }
.faq-search input:focus { border-color: var(--gold); }
.faq-search input::-webkit-search-cancel-button { appearance: none; }
.faq-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.faq-clear:hover { color: var(--text); background: var(--surface-2); }
.faq-clear svg { width: 16px; height: 16px; }
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--t-fast) ease;
}
.faq-q:hover { color: var(--gold); }
.faq-q .chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--muted);
  transition: transform var(--t-med) var(--ease-out);
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.faq mark { background: var(--gold-dim); color: var(--text); border-radius: 2px; padding: 0 1px; }
.faq-empty { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 2rem 0; }

/* ---------- CTA band ---------- */

.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 50% 100%, rgba(168,116,64,0.12), transparent),
    var(--bg-2);
  text-align: center;
}
.cta-band .display-lg { max-width: 22ch; margin-inline: auto; }

/* ---------- Zoom parallax (scroll-driven) ---------- */
.zoom-parallax { position: relative; height: 240vh; }
.zoom-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.zoom-el { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.zoom-el .zi { position: relative; width: 25vw; height: 25vh; overflow: hidden; }
/* central image is laid out full-screen and scaled 0.25→1 so it stays sharp at full zoom */
.zoom-el:first-child .zi { width: 100vw; height: 100vh; }
.zoom-el img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zi-narrow { display: none; } /* mobile-only central image; shown via the mobile query */
.zoom-el:nth-child(2) .zi { top: -30vh; left: 5vw; width: 35vw; height: 30vh; }
.zoom-el:nth-child(3) .zi { top: -10vh; left: -25vw; width: 20vw; height: 45vh; }
.zoom-el:nth-child(4) .zi { left: 27.5vw; width: 25vw; height: 25vh; }
.zoom-el:nth-child(5) .zi { top: 27.5vh; left: 5vw; width: 20vw; height: 25vh; }
.zoom-el:nth-child(6) .zi { top: 27.5vh; left: -22.5vw; width: 30vw; height: 25vh; }
.zoom-el:nth-child(7) .zi { top: 22.5vh; left: 25vw; width: 15vw; height: 15vh; }
/* CTA button that fades in (driven by JS) and ends centered over the fully-zoomed image */
.zoom-cta {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.zoom-cta .btn { box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.55); }
/* "scroll verder"-hint above the zoom photos (in-flow at the end of the "Iets moois gezien?" intro) */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 2.6rem; color: var(--gold); }
.scroll-cue > span:first-child { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; }
.scroll-cue .sc-track { position: relative; width: 1px; height: 42px; background: var(--gold-dim); }
.scroll-cue .sc-dot { position: absolute; left: 50%; margin-left: -3px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: scrollCueDot 2s ease-in-out infinite; }
@keyframes scrollCueDot { 0% { top: -3px; opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { top: 36px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .sc-dot { animation: none; top: 16px; } }
/* mobile: keep the scroll-zoom, but arrange the surrounding photos for a portrait screen
   (central image fills; four corner photos zoom outward — no slivers) */
@media (max-width: 760px) {
  /* mobile multi-image: corner frames are ~3:4 portrait — swap in portrait product images for a clean grid (no sliver crops) */
  /* shorter than desktop so the zoom resolves and hands off to the brands sooner (less endless scroll) */
  .zoom-parallax { height: 190vh; }
  .zoom-el .zi-wide { display: none; }
  .zoom-el .zi-narrow { display: block; }
  .zoom-el:nth-child(2) .zi { top: -27vh; left: -25vw; width: 34vw; height: 21vh; }
  .zoom-el:nth-child(3) .zi { top: -27vh; left: 25vw; width: 34vw; height: 21vh; }
  .zoom-el:nth-child(4) .zi { top: 0; left: -30vw; width: 30vw; height: 21vh; }
  .zoom-el:nth-child(5) .zi { top: 0; left: 30vw; width: 30vw; height: 21vh; }
  .zoom-el:nth-child(6) .zi { top: 27vh; left: -25vw; width: 34vw; height: 21vh; }
  .zoom-el:nth-child(7) .zi { top: 27vh; left: 25vw; width: 34vw; height: 21vh; }
}
@media (prefers-reduced-motion: reduce) { .zoom-parallax { height: 100vh; } }

/* ---------- Brands marquee ---------- */
.brands { overflow: hidden; }
.brands .eyebrow { font-size: 0.86rem; letter-spacing: 0.3em; }
.brands .lead { margin: 0 auto; }
.marquee {
  margin-top: clamp(2rem, 5vw, 3.2rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 17%, #000 83%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 17%, #000 83%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-chip {
  flex: 0 0 auto;
  height: 5rem;
  min-width: 11rem;
  margin-right: 1.2rem;
  display: grid;
  place-items: center;
  padding: 0 1.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.brand-chip img { height: 1.9rem; width: auto; max-width: 8.5rem; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2.5rem;
  background: var(--bg-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 2.5rem; }
  .footer-brand, .footer-follow { grid-column: 1 / -1; }
  /* hairline divider separating the brand/newsletter block from the columns */
  .footer-brand { border-bottom: 1px solid var(--line); padding-bottom: 2rem; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.9rem 1.4rem; }
  .footer-brand, .footer-follow { grid-column: 1 / -1; }
}
.footer-brand .logo { margin-bottom: 0.9rem; color: var(--text); }
.footer-brand .footer-news { margin-top: 1.4rem; }
.footer-brand .logo-word { font-size: 1.3rem; }
.footer-brand .logo-mark { width: 1.9rem; height: 1.9rem; }
.footer-tagline { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.4rem; max-width: 34ch; }
.footer-col h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 1.1rem;
}
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a, .footer-contact span { font-size: 0.9rem; color: var(--muted); transition: color var(--t-fast) ease; }
.footer-links a:hover { color: var(--gold); }
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; }
.footer-contact a { color: var(--gold); transition: color var(--t-fast) ease; }
.footer-contact a:hover { color: var(--gold-bright); }
/* newsletter */
.footer-news-text { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.9rem; max-width: 34ch; }
.footer-news-field { position: relative; max-width: 19rem; }
.footer-news-field input {
  width: 100%;
  height: 2.9rem;
  border-radius: 2rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0 3.1rem 0 1.2rem;
  outline: none;
  transition: border-color var(--t-fast) ease;
}
.footer-news-field input::placeholder { color: var(--muted); }
.footer-news-field input:focus { border-color: var(--gold); }
.footer-news-field button {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--t-fast) ease;
}
.footer-news-field button:hover { background: var(--gold-bright); }
.footer-news-field button svg { width: 15px; height: 15px; }
/* social icon buttons */
.footer-social-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.footer-social-row .theme-toggle { margin-top: 0; }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: nowrap; }
.footer-social-btn {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.footer-social-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.footer-social-btn svg { width: 1.05rem; height: 1.05rem; }
/* bottom bar */
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-terms-link { color: var(--muted); letter-spacing: 0.04em; transition: color var(--t-fast) ease; }
.footer-terms-link:hover { color: var(--gold); }

/* cookie / functional-storage notice */
.cookie-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
  flex-wrap: wrap;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.2);
  font-size: 0.84rem;
}
.cookie-notice p { margin: 0; color: var(--muted); line-height: 1.5; flex: 1 1 280px; }
.cookie-notice a { color: var(--gold); }
.cookie-accept {
  flex: 0 0 auto;
  background: var(--gold);
  color: var(--on-accent, #f7f2e8);
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) ease;
}
.cookie-accept:hover { background: var(--gold-bright); }

/* product status badges (reserved / sold) */
.status-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  color: #f7f2e8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.status-reserved { background: var(--gold); }
.status-sold { background: rgba(28, 21, 13, 0.85); }
.product-card.is-sold .card-media img { filter: grayscale(0.45); opacity: 0.8; }
/* status on the product detail page */
.status-pill { display: inline-block; margin-top: 0.85rem; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 0.34rem 0.8rem; border-radius: 999px; color: #f7f2e8; }
.status-sold-block { display: inline-block; background: rgba(28, 21, 13, 0.85); color: #f7f2e8; padding: 0.85rem 1.8rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* ---------- Breadcrumb / back ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
  transition: color var(--t-fast) ease;
}
.back-link:hover { color: var(--gold); }
.back-link svg { width: 15px; height: 15px; }

/* prev / next product */
.product-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
/* prev hugs the left, next mirrors it on the right (text aligns outward when it wraps) */
.product-pager .link-arrow:first-child { justify-self: start; text-align: left; }
.product-pager .link-arrow:last-child { justify-self: end; text-align: right; }

/* ---------- Image load fade ---------- */

body.img-fade .card-media img:not(.loaded),
body.img-fade .category-tile img:not(.loaded),
body.img-fade .about-media img:not(.loaded) {
  opacity: 0;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Page transition ---------- */

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: pageIn 500ms ease both; }

/* cross-page transitions (native, where supported) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut 240ms ease both; }
::view-transition-new(root) { animation: vtFadeIn 460ms var(--ease-out) both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* browsers with native transitions handle the fade — drop the JS-era load fade to avoid double-animating */
@supports (view-transition-name: none) { main { animation: none; } }

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* dark atmospheric masthead for inner pages — mirrors the home hero's light-on-dark drama */
.page-hero.masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--hero-text);
}
.page-hero.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--masthead-img);
  background-size: cover;
  background-position: center;
  animation: heroIntro 3200ms var(--ease-out) both;
}
.page-hero.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(28,21,13,0.94) 0%, rgba(28,21,13,0.7) 42%, rgba(28,21,13,0.56) 100%);
}
.page-hero.masthead .eyebrow { color: #e6cfa4; text-shadow: 0 1px 16px rgba(0,0,0,0.7); font-size: clamp(0.82rem, 2.2vw, 0.94rem); font-weight: 600; letter-spacing: 0.22em; }
.page-hero.masthead .eyebrow::before { background: #e6cfa4; }
.page-hero.masthead h1 { color: var(--hero-text); text-shadow: 0 2px 26px rgba(0,0,0,0.5); }
.page-hero.masthead .lead { color: rgba(247, 242, 232, 0.88); text-shadow: 0 1px 16px rgba(0,0,0,0.5); }

/* ---------- Skip link & focus ---------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--gold);
  color: var(--on-accent);
  padding: 0.7rem 1.2rem;
  font-size: 0.8rem;
  transition: top var(--t-fast) ease;
}
.skip-link:focus { top: 1rem; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}