/* ═══════════════════════════════════════════════════════════════
   FORGEDWORKS · Kovaštvo Kalčič - design system
   Warm charcoal + forged gold · Cormorant Garamond + Barlow
   Shared by every page on kovacija.si and forged-works.com
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted fonts (subset: latin, latin-ext). Downloaded from Google Fonts 2026-07-12. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-300-latin-ext.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-300-latin.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-400-latin-ext.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-400-latin.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-500-latin-ext.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-500-latin.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-600-latin-ext.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/site/fonts/barlow-600-latin.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-400-italic-latin-ext.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-400-italic-latin.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-400-latin.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-500-latin.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/site/fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  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;
}

:root {
  /* color · warm parchment body, forge-dark header/hero/footer (2026-07-14) */
  --bg: #F7F2E7;          /* warm parchment */
  --bg-raised: #F0E9DA;   /* raised sections */
  --bg-card: #FFFDF8;     /* cards */
  --bg-inset: #EAE2D0;    /* inset strips, form fields */
  --line: #DCD1B8;
  --line-soft: #E6DDC9;
  --gold: #C5A55A;        /* brand gold: fills, rules, decoration */
  --gold-bright: #DCBE78; /* brighter gold (use on DARK surfaces only) */
  --gold-dim: #B99B57;
  --gold-ink: #8A6A24;    /* gold TEXT on light bg (links, eyebrows) */
  --gold-ink-hover: #6B5119;
  --ink: #26201A;         /* warm near-black text */
  --ink-mute: #5C5245;
  --ink-faint: #8A7F6D;
  /* dark surfaces (nav, hero, footer, drawer, photo overlays) */
  --dark: #14100B;
  --dark-soft: rgba(20, 16, 11, .90);
  --on-dark: #F2ECDD;
  --on-dark-mute: #BDB29C;
  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  /* layout */
  --w-wide: 1240px;
  --w-text: 720px;
  --sp-section: clamp(64px, 10vw, 112px);
  --sp-gutter: clamp(18px, 4vw, 32px);
  /* motion */
  --ease: cubic-bezier(.33, .1, .2, 1);
}

/* ── base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold-bright); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 6vw, 64px); }
h2 { font-size: clamp(30px, 4.2vw, 44px); }
h3 { font-size: clamp(22px, 2.6vw, 27px); }
p  { margin: 0 0 1.1em; }

.wrap      { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-gutter); }
.wrap-text { max-width: var(--w-text); margin: 0 auto; padding: 0 var(--sp-gutter); }
.section   { padding: var(--sp-section) 0; }
.section-raised { background: var(--bg-raised); }
.section-inset  { background: var(--bg-inset); }

.eyebrow {
  font: 500 12px/1 var(--sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.lede { font-size: 17.5px; color: var(--ink-mute); max-width: 640px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.rule {
  width: 56px; height: 1px; border: 0; margin: 26px 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.center .rule, .rule.center { margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font: 600 13px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 1px solid var(--gold);
  transition: all .25s var(--ease);
  cursor: pointer;
}
.btn-gold { background: var(--gold); color: #14100A !important; }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--gold) !important; }
.btn-ghost:hover { background: rgba(197,165,90,.08); color: var(--gold-bright) !important; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── header / nav (identical on every page - see CLAUDE.md) ───── */
nav.topnav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 8, 6, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.topnav-inner {
  max-width: var(--w-wide); margin: 0 auto;
  padding: 0 var(--sp-gutter);
  display: flex; align-items: center; gap: 28px;
  min-height: 74px;
}
.wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1; margin-right: auto; }
.wordmark .wm-main {
  font: 600 21px/1 var(--serif);
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
}
.wordmark .wm-sub {
  font: 500 11px/1.25 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-cta { margin-left: 4px; padding: 12px 22px; font-size: 12px; }
.nav-langs { display: flex; gap: 2px; align-items: center; }
.nav-lang {
  font: 600 11px/1 var(--sans); letter-spacing: .1em;
  color: var(--ink-faint); padding: 6px 7px;
}
.nav-lang.active { color: var(--gold); }
.nav-lang:hover { color: var(--ink); }
.nav-lang + .nav-lang { border-left: 1px solid var(--line-soft); }

.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  margin: 5px 0; transition: transform .25s var(--ease), opacity .2s;
}
.nav-drawer { display: none; }

@media (max-width: 1020px) {
  .nav-links, .topnav-inner > .nav-langs, .topnav-inner > .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav-drawer {
    display: block; position: fixed; inset: 74px 0 0 0; z-index: 55;
    background: #0A0806;
    padding: 36px var(--sp-gutter);
    transform: translateX(102%); visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
    overflow-y: auto;
  }
  .nav-drawer.open { transform: translateX(0); visibility: visible; }
  .nav-drawer .nav-link { display: block; font-size: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-drawer .nav-cta { display: inline-block; margin: 22px 0 0; }
  .nav-drawer .nav-langs { margin-top: 26px; }
  .nav-drawer .nav-lang { font-size: 14px; padding: 8px 12px; }
  body.drawer-open { overflow: hidden; }
  .drawer-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .drawer-open .nav-burger span:nth-child(2) { opacity: 0; }
  .drawer-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(75deg, rgba(10,8,6,.60) 0%, rgba(10,8,6,.34) 40%, rgba(10,8,6,.06) 72%, rgba(10,8,6,.14) 100%);
}
.hero-content { max-width: 660px; padding: 120px 0; }
@media (max-width: 720px) {
  .hero { min-height: 74vh; }
  .hero-content { padding: 84px 0 64px; }
  .hero-bg::after {
    background: linear-gradient(0deg, rgba(10,8,6,.8) 0%, rgba(10,8,6,.34) 100%);
  }
}
.hero-content .lede { font-size: clamp(16px, 2vw, 19px); margin-bottom: 36px; }
.hero-content h1 { margin-bottom: 20px; }

/* subpage hero (world / category / about) */
.hero-sub { min-height: 44vh; }
.hero-sub .hero-content { padding: 90px 0 64px; }

/* ── trust strip ──────────────────────────────────────────────── */
.trust-strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-inset);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-gutter);
}
.trust-item { padding: 30px 26px 30px 0; }
.trust-item + .trust-item { border-left: 1px solid var(--line-soft); padding-left: 26px; }
.trust-item b {
  display: block; font: 500 19px/1.3 var(--serif); color: var(--ink); margin-bottom: 4px;
}
.trust-item span { font-size: 13.5px; color: var(--ink-mute); }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust-item { border-top: 1px solid var(--line-soft); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .trust-item:first-child { border-top: 0; }
}

/* ── world tiles ──────────────────────────────────────────────── */
.world-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 52px;
}
.world-card {
  position: relative; display: block; aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--bg-card);
  border: 1px solid var(--line);
}
.world-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), opacity .4s;
  opacity: .88;
}
.world-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,6,4,.58) 0%, rgba(8,6,4,.14) 46%, transparent 70%);
}
.world-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 22px 24px;
}
.world-card-body h3 { margin: 0 0 3px; font-size: 25px; color: #F2ECDD; }
.world-card-body span { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.world-card:hover img { transform: scale(1.045); opacity: 1; }
.world-card:hover { border-color: var(--gold-dim); }
@media (max-width: 900px) { .world-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .world-grid { grid-template-columns: 1fr; } }

/* ── product cards ────────────────────────────────────────────── */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 48px;
}
.product-card {
  display: block; background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.product-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-inset); }
.product-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card-body { padding: 15px 17px 17px; }
.product-card-body h3 {
  font-size: 19px; margin: 0 0 4px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-body .p-meta {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.product-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.product-card:hover img { transform: scale(1.05); }
@media (max-width: 1020px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 400px)  { .product-grid { grid-template-columns: 1fr; } }

/* category card variant (photo + name + count) */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* ── breadcrumbs ──────────────────────────────────────────────── */
.crumbs {
  font-size: 12.5px; letter-spacing: .06em; color: var(--ink-faint);
  padding: 18px 0 0;
}
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { margin: 0 8px; color: var(--ink-faint); }

/* ── product page ─────────────────────────────────────────────── */
.product-layout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px);
  align-items: start; padding-top: 34px;
}
.gallery-hero {
  border: 1px solid var(--line); background: var(--bg-inset);
  overflow: hidden; cursor: zoom-in;
}
.gallery-hero img { width: 100%; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs a {
  border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1; background: var(--bg-inset);
}
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .2s; }
.gallery-thumbs a:hover img { opacity: 1; }
/* captioned photos sit in <figure>: without these rules the browser's 40px figure
   margins squeezed each photo into a ~100px strip as tall as its caption (2026-10-28) */
.gallery-thumbs:has(.gallery-item) {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; align-items: start; margin-top: 14px;
}
.gallery-item { margin: 0; min-width: 0; }
.gallery-item a { display: block; }
.gallery-item img { aspect-ratio: 1; }
.gallery-item figcaption { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
@media (max-width: 560px) {
  .gallery-thumbs:has(.gallery-item) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
.product-info h1 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 10px; }
.product-info .p-sku {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 22px;
}
.product-info .p-desc { color: var(--ink-mute); font-size: 16.5px; }
.spec-table { margin: 30px 0; border-top: 1px solid var(--line); }
.spec-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.spec-row dt { color: var(--ink-faint); letter-spacing: .04em; }
.spec-row dd { margin: 0; color: var(--ink); }
.price-line { font: 500 22px/1.3 var(--serif); margin: 26px 0 6px; }
.price-line small { font-size: 14px; font-family: var(--sans); color: var(--ink-mute); }
.p-bullets { list-style: none; margin: 26px 0 30px; padding: 0; }
.p-bullets li {
  padding: 9px 0 9px 26px; position: relative;
  color: var(--ink-mute); font-size: 14.5px;
}
.p-bullets li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 10px; height: 1px; background: var(--gold);
}
.cta-block { border: 1px solid var(--line); background: var(--bg-raised); padding: 26px; }
.cta-block .btn { width: 100%; text-align: center; }
.cta-block .cta-sub { font-size: 13px; color: var(--ink-faint); margin: 12px 0 0; text-align: center; }
@media (max-width: 880px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .gallery-thumbs { grid-template-columns: repeat(6, 1fr); }
}

/* ── process steps ────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.step .step-n {
  font: 400 52px/1 var(--serif); color: var(--gold);
  display: block; margin-bottom: 14px;
}
.step h3 { font-size: 23px; margin-bottom: 8px; }
.step p { color: var(--ink-mute); font-size: 15px; margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 30px; } }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { max-width: var(--w-text); margin: 44px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 22px 44px 22px 2px; position: relative;
  font: 500 19px/1.4 var(--serif); color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font: 300 26px/1 var(--sans); color: var(--gold);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--gold-bright); }
.faq .faq-a { padding: 0 2px 24px; color: var(--ink-mute); font-size: 15.5px; max-width: 640px; }

/* ── split section (photo + text) ─────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.split-img { border: 1px solid var(--line); overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ── about page: founder story + team ────────────────────────── */
.about-hero .hero-content { max-width: 620px; }
.story-split .split-img { aspect-ratio: 3 / 4; }
.story-split .split-img img { object-position: top center; }
.founder-quote {
  margin: 20px 0 10px; padding: 0 0 0 22px;
  border-left: 2px solid var(--gold);
  font: 400 19px/1.6 var(--serif); color: var(--ink);
}
.founder-signoff { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; text-align: left; }
.team-card { background: var(--bg-card); border: 1px solid var(--line); }
.team-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.team-card-body { padding: 18px 20px 22px; }
.team-card-body h3 { font-size: 20px; margin-bottom: 3px; }
.team-card-body .p-meta { display: block; margin-bottom: 12px; }
.team-card-body p { color: var(--ink-mute); font-size: 14.5px; font-style: italic; margin: 0; }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }

/* ── bespoke banner ───────────────────────────────────────────── */
.bespoke-banner {
  border: 1px solid var(--gold-dim);
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  max-width: 780px; margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(197,165,90,.07), transparent 60%),
    var(--bg-raised);
}

/* ── inquiry form ─────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .form-full { grid-column: 1 / -1; }
.field label {
  display: block; font: 500 11.5px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; padding: 14px 15px;
  background: var(--bg-inset); border: 1px solid var(--line);
  color: var(--ink); font: 400 15px/1.5 var(--sans);
  transition: border-color .25s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-dim); }
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }
.form-status { margin-top: 16px; font-size: 15px; display: none; }
.form-status.ok { display: block; color: #A8C68F; }
.form-status.err { display: block; color: #C68F8F; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ── footer (identical on every page - see CLAUDE.md) ─────────── */
footer.site-footer {
  background: var(--bg-inset);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--sp-section);
}
.footer-inner {
  max-width: var(--w-wide); margin: 0 auto;
  padding: 64px var(--sp-gutter) 28px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .wm-main {
  font: 600 19px/1 var(--serif); letter-spacing: .3em;
  color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 6px;
}
.footer-brand .wm-sub {
  font: 500 11px/1.3 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-mute); display: block; margin-bottom: 20px;
}
.footer-brand address { font-style: normal; font-size: 14px; color: var(--ink-mute); line-height: 1.9; }
.footer-col h4 {
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: var(--ink-mute); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  margin-top: 48px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-faint);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,5,3,.94);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.lightbox-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: 0; color: var(--ink); font-size: 34px; cursor: pointer;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 22px; width: 46px; height: 46px; cursor: pointer;
}
.lightbox-nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

/* ── misc ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #14100A; padding: 10px 18px;
}
.skip-link:focus { left: 0; }
::selection { background: var(--gold); color: #14100A; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* -- FAQ page ------------------------------------------------------- */
.faq-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.faq-toc a {
  font-size: 13px; letter-spacing: .04em; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.faq-toc a:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.faq-section { scroll-margin-top: 90px; }
.faq-section .faq { margin-left: 0; margin-top: 24px; }
.faq-more { max-width: var(--w-text); margin: 22px auto 0; }
.faq-more a {
  font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.faq-more a::after { content: " →"; }

/* -- product page: wide quote box above FAQ --------------------------- */
.product-cta-wide { max-width: 560px; margin: 0 auto; text-align: center; }
.product-cta-wide .btn { width: auto; padding-left: 44px; padding-right: 44px; }

/* -- product page: award callout (statement pieces) ------------------- */
.award-callout {
  border: 1px solid var(--gold-dim);
  background: rgba(197, 165, 90, .06);
  padding: 16px 18px; margin: 0 0 26px;
}
.award-callout b { display: block; font: 500 18px/1.3 var(--serif); color: var(--gold-bright); margin-bottom: 4px; }
.award-callout span { display: block; font-size: 13px; color: var(--ink-mute); margin-bottom: 10px; }
.award-callout a { font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* -- awards page ------------------------------------------------------ */
.award-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.award-card { background: var(--bg-card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.award-card-img {
  background: var(--bg-inset); border-bottom: 1px solid var(--line-soft);
  aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.award-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.award-card-body { padding: 22px 24px 26px; }
.award-card-body .award-year { font: 500 30px/1 var(--serif); color: var(--gold); display: block; margin-bottom: 10px; }
.award-card-body h3 { font-size: 21px; margin-bottom: 6px; }
.award-card-body .award-event { color: var(--ink-mute); font-size: 14.5px; margin: 0 0 10px; }
.award-card-body .award-meta { font-size: 13px; color: var(--ink-faint); margin: 0; }
@media (max-width: 760px) { .award-grid { grid-template-columns: 1fr; } }

/* -- about page: stats strip + timeline ------------------------------ */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-gutter);
}
.stat-item { padding: 36px 26px 36px 0; }
.stat-item + .stat-item { border-left: 1px solid var(--line-soft); padding-left: 26px; }
.stat-item b {
  display: block; font: 500 clamp(34px, 4vw, 50px)/1 var(--serif);
  color: var(--gold); margin-bottom: 10px;
}
.stat-item span {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-item { border-top: 1px solid var(--line-soft); }
  .stat-item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-item { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .stat-item:first-child { border-top: 0; }
}

.timeline { list-style: none; margin: 56px auto 0; padding: 0; max-width: 780px; }
.timeline li {
  position: relative; display: grid; grid-template-columns: 140px 1fr;
  gap: 40px; padding-bottom: 36px;
}
.timeline li::before {
  content: ""; position: absolute; left: 158px; top: 8px; bottom: 0;
  width: 1px; background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: ""; position: absolute; left: 154px; top: 8px;
  width: 8px; height: 8px; background: var(--bg-raised);
  border: 1px solid var(--gold); transform: rotate(45deg);
}
.tl-year { font: 500 20px/1.4 var(--serif); color: var(--gold); text-align: right; }
.tl-text { color: var(--ink-mute); font-size: 15.5px; text-align: left; padding-top: 3px; }
@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
  .timeline li::before { left: 3px; }
  .timeline li::after { left: 0; }
  .tl-year { text-align: left; }
}

/* -- about page: team rows (photo beside text, alternating) ---------- */
.team-rows {
  display: grid; gap: clamp(44px, 7vw, 80px);
  margin-top: clamp(44px, 7vw, 80px);
  text-align: left;
}
.team-row {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.team-row:nth-child(even) { grid-template-columns: 1fr minmax(260px, 380px); }
.team-row:nth-child(even) .team-row-img { order: 2; }
.team-row-img {
  border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--bg-inset);
}
.team-row-img img { width: 100%; height: 100%; object-fit: cover; }
.team-row-body h3 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 2px; }
.team-row-body .p-meta {
  display: block; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.team-row-body blockquote {
  margin: 0; padding-left: 22px; border-left: 2px solid var(--gold-dim);
  font: italic 400 18px/1.75 var(--serif); color: var(--ink-mute);
  max-width: 560px;
}
@media (max-width: 760px) {
  .team-row, .team-row:nth-child(even) { grid-template-columns: 1fr; }
  .team-row:nth-child(even) .team-row-img { order: 0; }
  .team-row-img { max-width: 420px; }
}

/* -- how it's made: numbered steps + video link cards ------------------ */
.process-steps { list-style: none; margin: 24px auto 0; padding: 0; max-width: 780px; }
.process-step {
  display: grid; grid-template-columns: 72px 1fr; gap: 8px 26px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
}
.process-step:last-child { border-bottom: none; }
.process-step .step-n { font: 400 52px/1 var(--serif); color: var(--gold); }
.process-step h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 10px; }
.process-step p { color: var(--ink-mute); margin: 0 0 12px; }
.process-step p:last-child { margin-bottom: 0; }
.steps-title { max-width: 780px; margin: 0 auto 8px; font-size: clamp(24px, 3vw, 32px); }
.step-link a { font: 600 11.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 600px) {
  .process-step { grid-template-columns: 1fr; gap: 6px; }
  .process-step .step-n { font-size: 38px; }
}
.usp-text { max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 30px; }
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-top: 40px; text-align: left;
}
.video-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); background: var(--bg-raised);
  transition: border-color .2s;
}
.video-card:hover { border-color: var(--gold); }
.video-play { color: var(--gold); font-size: 13px; }
.video-title { font: 600 14.5px/1.35 var(--sans); color: var(--ink); }
.video-duration { font: 400 12.5px/1 var(--sans); color: var(--ink-mute); }

/* -- videos page: our thumbnail until play, then the YouTube player (2026-11-05) -- */
.vid-note { font: 400 13.5px/1.5 var(--sans); color: var(--ink-mute); margin-top: 14px; }
.vid-h2 { margin: 0 0 24px; }
.vid-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px 18px; }
.vid-grid-short { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vid-grid-video { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vid { margin: 0; min-width: 0; }
.vid-frame {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: #0d0b09; cursor: pointer; overflow: hidden;
}
.vid-short .vid-frame { aspect-ratio: 9 / 16; }
.vid-video .vid-frame { aspect-ratio: 16 / 9; }
.vid-frame img, .vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-frame img { object-fit: cover; transition: transform .4s; }
.vid-frame:hover img { transform: scale(1.03); }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: rgba(12, 10, 8, .62); border: 1px solid rgba(255, 255, 255, .6); transition: background .2s, border-color .2s;
}
.vid-play::after {
  content: ""; position: absolute; left: 22px; top: 17px;
  border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff;
}
.vid-frame:hover .vid-play, .vid-frame:focus-visible .vid-play { background: var(--gold); border-color: var(--gold); }
.vid-frame:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vid-name { font: 600 15px/1.35 var(--sans); color: var(--ink); margin: 12px 0 4px; letter-spacing: 0; text-transform: none; }
.vid-meta { font: 400 12.5px/1.4 var(--sans); color: var(--ink-mute); margin: 0; }
@media (max-width: 1180px) { .vid-grid-short { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .vid-grid-video { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .vid-grid-short { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .vid-grid { gap: 24px 12px; }
  .vid-grid-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-grid-video { grid-template-columns: minmax(0, 1fr); }
  .vid-name { font-size: 14px; }
}

/* -- nav phone (SL only, quiet) ---------------------------------------- */
.nav-phone {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 500 13px/1 var(--sans); letter-spacing: .04em;
  color: var(--ink-mute); transition: color .2s;
}
.nav-phone:hover { color: var(--gold); }
.nav-phone-icon { color: var(--gold); font-size: 14px; }
.nav-phone-drawer { color: var(--gold) !important; letter-spacing: .08em; }
@media (max-width: 1020px) { .topnav-inner > .nav-phone { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME (2026-07-14, Bruno: "too black, warmer and paler")
   Body/sections = warm parchment. Nav, hero, world-card overlays,
   footer and the mobile drawer stay forge-dark: they sit over photos
   or anchor the page, and their text must stay light.
   ═══════════════════════════════════════════════════════════════ */

/* gold as TEXT needs to darken on a pale background */
a { color: var(--gold-ink); }
a:hover { color: var(--gold-ink-hover); }
.eyebrow { color: var(--gold-ink); }
.faq summary:hover { color: var(--gold-ink-hover); }
.btn-ghost { color: var(--gold-ink) !important; border-color: var(--gold-dim); }
.btn-ghost:hover { background: rgba(197,165,90,.14); color: var(--gold-ink-hover) !important; }
.form-status.ok  { color: #3F6B2A; }
.form-status.err { color: #8C2F2F; }

/* --- dark surface 1: top nav ------------------------------------ */
nav.topnav { background: var(--dark-soft); border-bottom-color: rgba(255,255,255,.08); }
.topnav .nav-link { color: var(--on-dark-mute); }
.topnav .nav-link:hover { color: var(--on-dark); }
.topnav .nav-link.active { color: var(--gold); border-bottom-color: var(--gold); }
.topnav .nav-lang { color: #8D8371; }
.topnav .nav-lang:hover { color: var(--on-dark); }
.topnav .nav-lang.active { color: var(--gold); }
.topnav .nav-lang + .nav-lang { border-left-color: rgba(255,255,255,.12); }
.topnav .nav-phone { color: var(--on-dark-mute); }
.topnav .nav-phone:hover { color: var(--gold); }
.topnav .nav-phone-icon { color: var(--gold); }
.nav-burger span { background: var(--on-dark); }

/* --- dark surface 2: mobile drawer ------------------------------ */
.nav-drawer { background: var(--dark); }
.nav-drawer .nav-link { color: var(--on-dark-mute); border-bottom-color: rgba(255,255,255,.08); }
.nav-drawer .nav-link:hover { color: var(--on-dark); }
.nav-drawer .nav-lang { color: #8D8371; }
.nav-drawer .nav-lang.active { color: var(--gold); }

/* --- dark surface 3: hero (text sits on the photo) --------------- */
.hero-content h1 { color: var(--on-dark); }
.hero-content .lede { color: var(--on-dark-mute); }
.hero-content .eyebrow { color: var(--gold); }
/* the photo behind is busy: the ghost button gets a body on every width */
.hero-content .btn-ghost { color: var(--gold-bright) !important; border-color: var(--gold-bright); background: rgba(20,16,11,.55) !important; }
.hero-content .btn-ghost:hover { color: var(--gold-bright) !important; border-color: var(--gold-bright); background: rgba(20,16,11,.78) !important; }

/* --- dark surface 4: world tiles (caption over photo) ------------ */
.world-card-body span { color: var(--on-dark-mute); }

/* --- dark surface 5: footer ------------------------------------- */
footer.site-footer { background: var(--dark); border-top: 0; color: var(--on-dark-mute); }
.site-footer a { color: var(--on-dark-mute); }
.site-footer a:hover { color: var(--gold); }
.site-footer h4 { color: var(--on-dark); }
.site-footer .wm-main { color: var(--gold); }
.site-footer address { color: var(--on-dark-mute); }
.footer-bottom { border-top-color: rgba(255,255,255,.10); color: #8D8371; }

/* --- lightbox stays dark ---------------------------------------- */
.lightbox-close, .lightbox-nav { color: var(--on-dark); }
.lightbox-nav { border-color: rgba(255,255,255,.25); }

/* -- homepage pillars: the four blocks from the old site ---------------- */
.pillars-section {
  padding-top: clamp(44px, 6vw, 64px); padding-bottom: clamp(44px, 6vw, 64px);
  background: var(--bg-inset); border-bottom: 1px solid var(--line-soft);
}
.pillar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.pillar-rule {
  display: block; width: 34px; height: 2px; background: var(--gold); margin-bottom: 18px;
}
.pillar h2 {
  font-size: clamp(20px, 2.1vw, 24px); margin: 0 0 10px; color: var(--ink);
}
.pillar p {
  margin: 0 0 14px; color: var(--ink-mute); font-size: 15px; line-height: 1.65;
}
.pillar-link {
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.pillar-link::after { content: " →"; }
@media (max-width: 980px) { .pillar-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; gap: 30px; } }

/* -- awards: the Zlati ceh 2011 feature ---------------------------------
   A forge-dark panel on the parchment page. The award is the one place on
   the site where an official body speaks about the work, so the citation
   gets the weight, not our own copy. Paper scans are never cropped. */
.award-feature {
  background: var(--dark); color: var(--on-dark);
  padding: clamp(52px, 7vw, 88px) 0;
  margin: clamp(44px, 6vw, 72px) 0 0;
  border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim);
}
.af-head {
  display: flex; gap: clamp(20px, 3vw, 34px); align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 26px; margin-bottom: clamp(30px, 4vw, 44px);
}
.af-year { font: 500 clamp(42px, 6vw, 66px)/1 var(--serif); color: var(--gold-bright); }
.award-feature .eyebrow { color: var(--gold-bright); }
.af-head h2 { color: var(--on-dark); font-size: clamp(26px, 3.4vw, 40px); margin: 8px 0 10px; }
.af-event { margin: 0; color: var(--on-dark-mute); font-size: 15px; line-height: 1.6; }

.af-hero { margin: 0; }
.af-hero img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(255,255,255,.14);
}
.award-feature figcaption {
  margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-mute);
}

.af-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 60px); align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}
.af-citation {
  margin: 0; padding: clamp(22px, 2.6vw, 30px);
  background: rgba(255,255,255,.045); border-left: 2px solid var(--gold);
}
.af-label {
  display: block; font: 600 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 16px;
}
.af-citation p {
  font: 400 clamp(17px, 1.9vw, 21px)/1.62 var(--serif);
  color: var(--on-dark); margin: 0 0 18px;
}
.af-citation cite {
  display: block; font-style: normal; font-size: 12.5px; line-height: 1.6; color: #8D8371;
}
.af-story p { margin: 0 0 16px; color: var(--on-dark-mute); line-height: 1.75; }
.af-cta { margin: 24px 0 0; }
.af-cta a {
  color: var(--gold-bright); font: 600 11.5px/1.5 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}
.af-cta a:hover { color: var(--gold); }

.af-gallery-title {
  margin: clamp(46px, 6vw, 70px) 0 24px;
  font-size: clamp(20px, 2.2vw, 24px); color: var(--on-dark);
}
.af-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); }
.af-gallery figure { margin: 0; }
.af-gallery img {
  display: block; width: 100%; height: 240px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  transition: opacity .25s var(--ease);
}
.af-gallery a:hover img { opacity: .82; }
.af-gallery figure.doc img { object-fit: contain; background: #0C0906; padding: 8px; }

@media (max-width: 900px) {
  .af-cols { grid-template-columns: 1fr; }
  .af-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .af-head { flex-direction: column; gap: 0; align-items: flex-start; }
  .af-gallery { grid-template-columns: 1fr; }
  .af-gallery img { height: auto; }
}

/* the certificate cards are clickable now: same hover as the gallery */
.award-card-img a { display: block; width: 100%; height: 100%; }
.award-card-img img { transition: opacity .25s var(--ease); }
.award-card-img a:hover img { opacity: .85; }

/* -- homepage hero carousel (12 photos, crossfade) ----------------------
   Slides are real <img> so the first one is the LCP element and each has
   alt text. The dark veil lives on .hero-slides::after, over ALL slides,
   so the headline stays readable on a blue-sky photo as well as a dark one. */
.hero-carousel .hero-slides { position: absolute; inset: 0; z-index: -1; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.hero-carousel .hero-slides::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(75deg, rgba(10,8,6,.60) 0%, rgba(10,8,6,.36) 40%, rgba(10,8,6,.08) 72%, rgba(10,8,6,.16) 100%);
}
.hero-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px;
  display: flex; gap: 9px; z-index: 2;
}
.hero-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(242,236,221,.55); background: transparent;
  cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero-dot:hover { border-color: var(--gold-bright); }
.hero-dot.is-active { background: var(--gold); border-color: var(--gold); }
@media (max-width: 720px) {
  .hero-carousel .hero-slides::after {
    background: linear-gradient(0deg, rgba(10,8,6,.80) 0%, rgba(10,8,6,.62) 52%, rgba(10,8,6,.30) 100%);
  }
  .hero-dots { bottom: 18px; left: var(--sp-gutter); transform: none; }
  /* the CTA must not sink into the photo: give the ghost button a body */
  .hero-content .btn-ghost {
    background: rgba(20,16,11,.65) !important;
    border-color: var(--gold-bright);
  }
  .hero-content .btn-gold { box-shadow: 0 2px 14px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* -- homepage favourites carousel --------------------------------------
   Bruno stars favourites in the editor; they cycle here so a long list all
   gets seen. Arrows sit outside the cards on desktop, under them on phones. */
.fav-carousel { position: relative; margin-top: 44px; }
.fav-viewport { overflow: hidden; }
.fav-track { display: flex; gap: 20px; transition: transform .6s var(--ease); }
.fav-track > * { flex: 0 0 calc((100% - 60px) / 4); }
.fav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--ink-mute);
  font: 400 22px/1 var(--serif); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.fav-arrow:hover { border-color: var(--gold); color: var(--gold-ink); }
.fav-arrow[disabled] { opacity: .35; cursor: default; }
.fav-prev { left: -20px; }
.fav-next { right: -20px; }
@media (max-width: 1180px) { .fav-prev { left: 4px; } .fav-next { right: 4px; } }
@media (max-width: 980px)  { .fav-track > * { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px)  { .fav-track > * { flex-basis: 100%; } }

/* -- pillars: desktop/landscape only (Munch, 2026-07-15) -----------------
   On phones and portrait tablets the four text blocks crowd the top of the
   page; the visitor should land on the hero and go straight to Naš program. */
@media (max-width: 920px), (orientation: portrait) {
  .pillars-section { display: none; }
}

/* -- product search (client-side, ~400 items) ---------------------------- */
/* desktop: a visible search bar in the nav (replaced the phone number) */
.nav-search-bar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 14px; margin-left: 2px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px; color: var(--on-dark-mute); cursor: text;
  font: 400 13px/1 var(--sans); letter-spacing: .01em; white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.nav-search-bar svg { flex: 0 0 auto; }
.nav-search-bar:hover { border-color: var(--gold-dim); color: var(--on-dark); background: rgba(255,255,255,.08); }
/* mobile: an icon button sitting left of the hamburger */
.nav-search-icon {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; background: transparent; border: 0;
  color: var(--on-dark); cursor: pointer;
}
@media (max-width: 760px) {
  .nav-search-bar { display: none; }
  .nav-search-icon { display: inline-flex; }
}
/* tablets in landscape and small laptops: the full nav needs ~1260px, so the inquiry
   button was cut off between 1021 and ~1310px; search becomes the icon, spacing tightens */
@media (min-width: 1021px) and (max-width: 1339px) {
  .topnav-inner { gap: 16px; }
  .wordmark .wm-main { font-size: 18px; letter-spacing: .24em; }
  .wordmark .wm-sub { font-size: 10px; letter-spacing: .12em; }
  .nav-links { gap: 15px; }
  .nav-link { font-size: 11.5px; letter-spacing: .09em; }
  .nav-search-bar { display: none; }
  .nav-search-icon { display: inline-flex; }
  .nav-cta { margin-left: 0; padding: 11px 15px; font-size: 11.5px; }
}
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,6,4,.72); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(60px, 12vh, 140px) 16px 16px;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(680px, 100%); background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.4); max-height: 76vh; display: flex; flex-direction: column;
}
.search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink-faint); }
.search-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: 400 19px/1.3 var(--serif); color: var(--ink);
}
.search-close { border: 0; background: transparent; font-size: 18px; color: var(--ink-faint); cursor: pointer; padding: 4px 8px; }
.search-close:hover { color: var(--ink); }
.search-results { overflow-y: auto; }
.search-msg { padding: 22px 20px; color: var(--ink-faint); font-size: 14px; }
.search-hit {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
.search-hit:hover, .search-hit.active { background: var(--bg-inset); }
.search-hit img { width: 52px; height: 40px; object-fit: cover; border: 1px solid var(--line); flex: 0 0 auto; background: var(--bg-inset); }
.search-hit .sh-name { font: 500 15.5px/1.25 var(--serif); color: var(--ink); }
.search-hit .sh-cat { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-top: 2px; }
.search-hit mark { background: rgba(197,165,90,.32); color: inherit; padding: 0 1px; }

/* -- program carousel: 3 world-cards per view (larger than the 4-up favourites) */
.program-carousel { margin-top: 52px; }
.program-carousel .fav-track > * { flex: 0 0 calc((100% - 40px) / 3); }
.world-card-story .world-card-body h3 { color: var(--gold-bright); }
@media (max-width: 900px) { .program-carousel .fav-track > * { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .program-carousel .fav-track > * { flex-basis: 100%; } }

/* -- wordmark on small screens: keep the subtitle readable ---------------
   (Munch, 2026-07-23: "on the phone it's not readable"). Slightly smaller
   main mark so both lines fit comfortably on a narrow bar. */
@media (max-width: 560px) {
  .wordmark .wm-main { font-size: 17px; letter-spacing: .22em; }
  .wordmark .wm-sub  { font-size: 10px; letter-spacing: .12em; }
}
@media (max-width: 380px) {
  .wordmark .wm-main { font-size: 15.5px; letter-spacing: .18em; }
  .wordmark .wm-sub  { font-size: 9.5px; letter-spacing: .10em; }
}

/* customer reviews page (2026-09-28) */
.rv-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.rv-platform { background: var(--bg-card); border: 1px solid var(--line); padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.rv-pname { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.rv-pscore { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.rv-pstat { font-size: 14px; color: var(--ink-mute); }
.rv-platform p { margin: 8px 0 10px; color: var(--ink-mute); }
.rv-platform a { margin-top: auto; color: var(--gold-ink); font-weight: 500; }
.rv-grid { columns: 3 300px; column-gap: 20px; margin-top: 28px; }
.rv-card { break-inside: avoid; margin: 0 0 20px; background: var(--bg-card); border: 1px solid var(--line); padding: 24px 24px 20px; }
.rv-card blockquote { margin: 0; }
.rv-card blockquote p { font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink); margin: 0; }
.rv-card blockquote p::before { content: "\201E"; color: var(--gold); }
.rv-card blockquote p::after { content: "\201C"; color: var(--gold); }
.rv-card blockquote[lang="en"] p::before { content: "\201C"; }
.rv-card blockquote[lang="en"] p::after { content: "\201D"; }
.rv-tr { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-mute); }
.rv-tr span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.rv-card figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.rv-card figcaption strong { font-weight: 500; color: var(--ink); }
.rv-card figcaption span { color: var(--ink-faint); }
.rv-note { max-width: var(--w-text); font-size: 14px; color: var(--ink-mute); margin-top: 12px; }
.rv-etsy { font-size: 12px; color: var(--ink-faint); }
.rv-cta { background: var(--bg-raised); text-align: center; }
.rv-cta .lede { margin: 12px auto 26px; }
@media (max-width: 760px) { .rv-platforms { grid-template-columns: 1fr; } .rv-card blockquote p { font-size: 19px; } }

/* terms checkbox + terms page (2026-09-28) */
.form-terms { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 1.45; color: var(--ink-mute); cursor: pointer; }
.form-terms input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--gold-ink); }
.form-terms a { color: var(--gold-ink); text-decoration: underline; }
.terms-body { max-width: var(--w-text); }
.terms-body h2 { font-size: 26px; margin: 40px 0 12px; }
.terms-body p { color: var(--ink-mute); margin: 0 0 12px; }
.terms-body .terms-asof { margin-top: 36px; font-size: 14px; color: var(--ink-faint); }

/* review quotes under the contact form (2026-09-29) */
.contact-quotes { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-quotes blockquote { margin: 14px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--gold); }
.contact-quotes blockquote p { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); margin: 0; }
.contact-quotes cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--ink-faint); }
.contact-quotes .cq-foot { margin-top: 18px; font-size: 13.5px; color: var(--ink-mute); }
.contact-quotes .cq-foot a { color: var(--gold-ink); }

/* long-form category / world / home text (2026-09-29) */
.seo-text { max-width: var(--w-text); }
.seo-text h2 { font-size: 28px; margin: 34px 0 12px; }
.seo-text h2:first-child { margin-top: 0; }
.seo-text p, .seo-text li { color: var(--ink-mute); font-size: 17px; line-height: 1.65; }
.seo-text p { margin: 0 0 14px; }
.seo-text ol { margin: 0 0 16px; padding-left: 22px; }
.seo-text strong { color: var(--ink); font-weight: 600; }
.seo-hub a { color: var(--gold-ink); font-weight: 500; }

/* WhatsApp button + marketplace line (2026-10-06) */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff;
  box-shadow: 0 6px 18px rgba(20,16,11,.28); transition: transform .2s var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
@media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; } }
.footer-markets { margin: 18px 0 0; font-size: 13.5px; color: var(--on-dark-mute); }
.footer-markets a { color: var(--gold-bright); }

/* Shops menu (Trgovine / Shops) in the top bar, drawer and footer, 2026-11-08. The same markup comes
   from base.html.j2 on the main site and from sell-pipeline/server/forge_chrome.py on the storefronts. */
.nav-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; }
.topnav .nav-drop-btn { color: var(--on-dark-mute); }
.topnav .nav-drop-btn:hover, .topnav .nav-drop.open .nav-drop-btn { color: var(--on-dark); }
.topnav .nav-drop-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-drop-btn::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 16px); right: -20px; z-index: 70;
  min-width: 270px; margin: 0; padding: 10px 0; list-style: none;
  background: var(--dark); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: block; padding: 11px 20px; color: var(--on-dark);
  font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.nav-drop-menu a small {
  display: block; margin-top: 5px; color: var(--on-dark-mute);
  font: 400 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none;
}
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: rgba(255,255,255,.05); color: var(--gold); }
.nav-drop-menu a[aria-current] { color: var(--gold); }
/* kovacija.si at 1340-1379px: the bar fits only without the arrow */
@media (min-width: 1340px) and (max-width: 1379px) { .nav-drop-btn::after { display: none; } }
.nav-drawer .nav-drawer-h {
  margin: 24px 0 2px; color: var(--gold);
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}