/* ---------- Self-hosted webfonts ----------
   These used to come from fonts.googleapis.com with `display=optional`,
   which tells the browser: if the font isn't already cached, don't block
   on it and never swap it in later. On a hard refresh the cache is
   bypassed, so the whole page kept the fallback for its entire lifetime
   — and since Times New Roman runs metrically larger than Cormorant at
   the same font-size, the title rendered visibly bigger than on a normal
   reload. Serving the files from our own origin (preloaded in the head)
   means they arrive alongside the CSS, so `swap` has almost no window in
   which to show anything, on a cold load or a warm one.
   One variable file covers 400-500 per style, hence the weight range. */
@font-face{
  font-family:'Cormorant';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/cormorant-400-normal-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';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/cormorant-400-normal-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';
  font-style:italic;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/cormorant-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';
  font-style:italic;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/cormorant-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:'EB Garamond';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/eb-garamond-400-normal-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:'EB Garamond';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/eb-garamond-400-normal-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:'EB Garamond';
  font-style:italic;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/eb-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:'EB Garamond';
  font-style:italic;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/eb-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;
}

:root{
  --ink:#201E1B;
  --ink-soft:#4B4844;
  --muted:#5C5952;
  --stone:#EDEAE3;
  --surface:#F8F6F1;
  --graphite:#84817A;

  /* Cool counterweight. Not invented: #C7D0D7 is the exact backdrop of the
     winery's own studio bottle shots, and the deep tone is sampled from the
     Gótika label. Used as a GROUND behind bottle photography — gold stays
     the only accent, so this never competes for the eye on links/buttons. */
  --mist:#C7D0D7;
  --mist-pale:#E7EBEE;
  --mist-line:#B7C3CB;
  --ink-blue:#295878;
  --graphite-tint:#DCD9D1;
  --line:#D3CFC3;
  --gold:#7C5F2C;
  --gold-bright:#D2AA57;
  --basalt:#433E39;
  --basalt-deep:#302C28;
  --paper-on-basalt:#EDEAE3;
  --on-basalt-muted:rgba(237,234,227,0.68);
  --on-basalt-line:rgba(237,234,227,0.22);

  /* Times New Roman first: it's a lighter, higher-contrast fallback
     than Georgia's heavier slab-like forms, so the brief pre-webfont
     render looks closer to Cormorant/EB Garamond's delicate strokes
     instead of visibly bolder. */
  --font-display:'Cormorant', 'Times New Roman', Georgia, serif;
  --font-body:'EB Garamond', 'Times New Roman', Georgia, serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Georgia/Times (the fallback serif shown before Cormorant/EB Garamond
   finish loading) has no true 500-weight face, so the browser fakes
   one by synthetically bolding it — a visible flash of heavy text
   that then thins out once the real webfont swaps in. Disabling
   synthesis makes the fallback render at its normal weight instead,
   so the swap is just a typeface change, not a weight change. */
html{ font-synthesis:none; }
/* ---------- Fluid type scale ----------
   Everything on the page is sized in rem, but the root stayed at the
   browser default 16px, so a 2560px monitor rendered text and spacing at
   exactly the same pixel size as a 1280px laptop — the design simply
   couldn't grow into a large display. Scaling the root instead of
   individual rules keeps every proportion the design already has and
   grows the whole system together. Below 1280px nothing changes, so
   laptops and phones render exactly as before. `rem` inside this
   declaration resolves against the initial 16px, not itself. */
html{ font-size:clamp(16px, 16px + (100vw - 1280px) / 320, 20px); }
::selection{ background:rgba(210,170,87,0.38); color:var(--basalt-deep); }
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; }

img,svg{ max-width:100%; display:block; }

/* A class that sets `display` outranks the UA stylesheet's
   [hidden]{display:none}, so an element toggled via the hidden attribute
   (the lightbox, the map frame and its consent notice) would stay laid
   out — an "invisible" fixed overlay still covering the page and eating
   every click. Make the attribute authoritative wherever it's used. */
[hidden]{ display:none !important; }

a{ color:inherit; }
button{ font:inherit; color:inherit; }

.wrap{
  max-width:76.25rem; /* 1220px at the base scale, grows with the root */
  margin-inline:auto;
  padding-inline:clamp(1.5rem,5vw,4.5rem);
}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.26em;
  font-size:0.72rem;
  color:var(--muted);
  font-weight:500;
}
/* .on-basalt is reused here purely as a color modifier, not the section
   background utility below — cancel that utility's background so it
   doesn't paint a tight box behind small inline text like this. */
.eyebrow.on-basalt{ color:var(--on-basalt-muted); background:none; }

/* ---------- Wordmark ---------- */
.wordmark{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:0.5em;
  text-decoration:none;
  color:inherit;
}
.wordmark .mark{
  display:flex;
  align-items:center;
  gap:0.55em;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0.34em;
  text-transform:uppercase;
}
.wordmark .mark::before,
.wordmark .mark::after{
  content:"·";
  color:var(--graphite);
}
/* Letter-spacing adds its gap after EVERY character, the last one
   included — so each line carries an invisible trailing sliver on its
   right with nothing balancing it on the left. Centering then centers
   ink+sliver, pushing the visible glyphs half a sliver to the left
   (measured: 13.5px on the hero lockup). Cancelling just that trailing
   space with an equal negative margin on the final box puts the ink
   itself back on the centre line. On .mark it goes on ::after (the last
   flex item) so the two dots stay evenly spaced around the word. */
.wordmark .mark::after{ margin-right:-0.34em; }
.wordmark .sub{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.48em;
  margin-right:-0.48em;
  font-weight:500;
  opacity:0.62;
}
.wordmark.small .mark{ font-size:1rem; letter-spacing:0.28em; }
.wordmark.small .mark::after{ margin-right:-0.28em; }
.wordmark.small .sub{ font-size:0.56rem; letter-spacing:0.4em; margin-right:-0.4em; }
.wordmark.small{ gap:0.3em; }
.wordmark.large .mark{ font-size:clamp(2.6rem,7vw,4.75rem); }
.wordmark.large .sub{ font-size:clamp(0.78rem,1.6vw,1.05rem); }

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.9rem clamp(1.5rem,5vw,4.5rem);
  color:var(--paper-on-basalt);
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(67,62,57,0.86);
  backdrop-filter:blur(10px);
  border-color:var(--on-basalt-line);
}
.nav-links{
  display:flex;
  gap:clamp(1.1rem,2.6vw,2.5rem);
  list-style:none;
  margin:0; padding:0;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.74rem;
}
.nav-links a{
  text-decoration:none;
  position:relative;
  padding-bottom:0.3em;
  opacity:0.85;
}
.nav-links a.is-current{ opacity:1; color:var(--gold-bright); }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px;
  background:var(--gold-bright);
  transition:right .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ right:0; }
.nav-links a:hover{ opacity:1; }

.nav-right{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem,2.4vw,2rem);
}
.nav-utils{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,1.6rem);
  padding-left:clamp(1.1rem,2.4vw,2rem);
  border-left:1px solid var(--on-basalt-line);
}

.lang-switch{ position:relative; }
.lang-current{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
  opacity:0.9;
}
.lang-current{ padding:0.5rem 0; margin:-0.5rem 0; }
.lang-current:hover{ opacity:1; color:var(--gold-bright); }
.lang-current svg{ width:0.6rem; height:0.6rem; transition:transform .3s var(--ease); }
.lang-switch.open .lang-current svg{ transform:rotate(180deg); }
.lang-menu{
  list-style:none;
  margin:0; padding:0.4rem;
  position:absolute;
  top:calc(100% + 0.9rem);
  left:50%;
  transform:translateX(-50%);
  min-width:8rem;
  background:var(--basalt-deep);
  border:1px solid var(--on-basalt-line);
  box-shadow:0 18px 40px rgba(20,18,16,0.35);
  opacity:0;
  pointer-events:none;
  transform-origin:top center;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lang-switch.open .lang-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.lang-menu li{
  padding:0.55rem 0.75rem;
  font-size:0.75rem;
  letter-spacing:0.08em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  color:var(--on-basalt-muted);
}
.lang-menu li.active{ color:var(--gold-bright); }
.lang-menu li.disabled{ opacity:0.45; cursor:default; }
.lang-menu li .tag{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; border:1px solid currentColor; padding:0.1rem 0.4rem; }

.social-icons{ display:flex; align-items:center; gap:0.9rem; }
/* The icons themselves are 16px; the padding is what makes the tappable box
   a usable size on a phone without changing how they look. */
.social-icons a{ display:flex; color:var(--paper-on-basalt); opacity:0.82; text-decoration:none; padding:0.5rem; margin:-0.5rem; }
.social-icons a:hover{ opacity:1; color:var(--gold-bright); }
.social-icons svg{ width:1rem; height:1rem; }

.cart-btn{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.72rem;
}
.cart-btn{ padding:0.6rem 0; margin:-0.6rem 0; }
.cart-btn:hover{ color:var(--gold-bright); }
.cart-btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }
.cart-count{
  min-width:1.5em;
  height:1.5em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:0.65rem;
  font-variant-numeric:tabular-nums;
}

.nav-burger{
  all:unset;
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:0.32rem;
  width:1.6rem;
  height:1.6rem;
  /* Padding only — the bars stay 1.6rem wide, but the box you can actually
     hit with a thumb grows to ~2.8rem. */
  padding:0.6rem;
  margin:-0.6rem;
  box-sizing:content-box;
  cursor:pointer;
}
.nav-burger span{
  display:block;
  height:1px;
  background:currentColor;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-burger span:nth-child(1){ width:100%; }
.nav-burger span:nth-child(2){ width:70%; }
.nav-burger span:nth-child(3){ width:100%; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); width:100%; }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:100%; }

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0;
  z-index:55;
  background:var(--basalt-deep);
  color:var(--paper-on-basalt);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(2rem,8vh,3rem);
  opacity:0;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.mobile-menu-links{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.mobile-menu-links a{
  text-decoration:none;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.6rem,6vw,2.2rem);
  color:var(--paper-on-basalt);
}
.mobile-menu-links a.is-current{ color:var(--gold-bright); }
.mobile-menu-foot{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  background:var(--basalt);
  color:var(--paper-on-basalt);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
/* Slow one-time zoom on hero photography (ken-burns). Applied to the
   media wrapper, not the <img> itself, since the home hero's <img>
   already gets a scroll-parallax transform from JS — animating a
   different element avoids the two transforms fighting each other. */
@keyframes kenBurns{
  from{ transform:scale(1); }
  to{ transform:scale(1.08); }
}
.hero-media{ position:absolute; inset:0; z-index:0; animation:kenBurns 26s var(--ease) forwards; }
.hero-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,30,27,0.32) 0%, rgba(38,35,31,0.42) 45%, rgba(28,26,23,0.94) 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(1.1rem,2vw + 1.6vh,2.25rem);
  padding:clamp(5rem,10vh + 2rem,7rem) clamp(1.5rem,6vw,4rem) clamp(1.75rem,5vh,3rem);
}
.hero-rule{
  width:1px;
  height:clamp(1.5rem,4vh,3rem);
  background:linear-gradient(var(--on-basalt-line), transparent);
}
.hero-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.9rem,2.6vw + 2.2vh,3.9rem);
  line-height:1.14;
  max-width:34ch;
  text-wrap:balance;
}
.hero-quote .accent{ color:var(--gold-bright); font-style:italic; }
.hero-cite{
  font-family:var(--font-body);
  letter-spacing:0.14em;
  font-size:0.92rem;
  color:var(--on-basalt-muted);
}
.hero-cite::before{ content:"— "; }

.hero-foot{
  position:relative; z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem clamp(1.5rem,5vw,4.5rem) 1.5rem;
  border-top:1px solid var(--on-basalt-line);
  font-size:0.7rem;
}
.scroll-cue{
  display:flex; align-items:center; gap:0.6rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--on-basalt-muted);
}
.scroll-cue .line{
  width:2.75rem; height:1px;
  background:var(--on-basalt-line);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:"";
  position:absolute; inset:0;
  background:var(--gold-bright);
  transform:translateX(-100%);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateX(-100%); }
  50%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.32s; }

/* ---------- Section shells ---------- */
/* isolation:isolate traps a z-index:-1 motif (below) to just this
   section's own stacking context, instead of it escaping upward and
   landing behind an unrelated ancestor. */
section{ position:relative; isolation:isolate; }
.section-pad{ padding-block:clamp(5.5rem,11vh,8.5rem); }
.section-pad-sm{ padding-block:clamp(3.5rem,7vh,5.5rem); }
.on-basalt{ background:var(--basalt); color:var(--paper-on-basalt); }

/* ---------- Decorative line-art motifs ----------
   Quiet background flourishes — a section's own painted background
   sits below them, its in-flow content (.wrap, headings, copy) above,
   via z-index:-1 on an already-relative section. */
.motif{
  position:absolute;
  z-index:-1;
  opacity:0.1;
  pointer-events:none;
  user-select:none;
  height:auto;
}
.motif.motif-br{ right:clamp(-1.5rem,-3vw,1rem); bottom:clamp(-1.5rem,-3vw,0.5rem); }
.motif.motif-tr{ right:clamp(-1rem,-2vw,1.5rem); top:clamp(-1rem,-2vw,1rem); }
.motif.motif-bl{ left:clamp(-1.5rem,-3vw,1rem); bottom:clamp(-1.5rem,-3vw,0.5rem); }
@media (max-width:760px){ .motif{ display:none; } }
.on-surface{ background:var(--surface); }

.hairline{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---------- Page hero (Birtok / Látogatás / Szállás / Borok) ----------
   Full-bleed cover treatment, like the home hero: fills whatever
   viewport it's given rather than sizing to a fixed padding, so it
   never leaves a gap before the next section on a tall screen. */
.page-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100svh;
  padding-block:clamp(6rem,7vh + 3.5rem,8.5rem) clamp(3rem,7vh,4.5rem);
  background:var(--basalt);
  color:var(--paper-on-basalt);
}
.page-hero-media{ position:absolute; inset:0; z-index:0; animation:kenBurns 26s var(--ease) forwards; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,29,26,0.58) 0%, rgba(31,29,26,0.7) 55%, rgba(28,26,23,0.94) 100%);
}
/* Kapcsolat: a short title banner, not a full-screen cover — it's a
   utility page, not a storytelling one, so it stays compact and its
   heading stays on one line rather than filling the viewport. */
.page-hero.is-texture{
  min-height:auto;
  justify-content:flex-start;
  padding-block:calc(4.5rem + clamp(1.25rem,5vh,2.75rem)) clamp(2.5rem,6vh,3.75rem);
  background:var(--basalt);
}
.page-hero.is-texture .page-hero-media{ opacity:0.16; mix-blend-mode:screen; }
.page-hero.is-texture .page-hero-media::after{ display:none; }
.page-hero-inner{ position:relative; z-index:1; max-width:64rem; }
.page-hero h1{ font-size:clamp(2.1rem,4.4vw + 1vh,3.75rem); margin-top:0.85rem; margin-bottom:0.85rem; }
.page-hero .intro{ color:var(--on-basalt-muted); max-width:62ch; line-height:1.65; font-size:1rem; }
.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--on-basalt-muted);
  text-decoration:none;
  margin-bottom:2.25rem;
}
.back-link:hover{ color:var(--gold-bright); }
.back-link.on-light{ color:var(--muted); }
.back-link.on-light:hover{ color:var(--gold); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0.5rem;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  min-width:0;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; transition:color .3s var(--ease); }
.breadcrumb a:hover, .breadcrumb a:focus-visible{ color:var(--gold); }
.breadcrumb .sep{ color:var(--line); }
/* The wine's own name ends the trail, so it carries the ink colour and is
   allowed to truncate rather than wrap the bar onto a second line. */
.breadcrumb .current{
  color:var(--ink);
  max-width:min(46ch, 52vw);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:640px){ .breadcrumb{ font-size:0.66rem; letter-spacing:0.1em; } }

/* ---------- PDP award lines ---------- */
.pdp-awards{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.45rem;
}
.pdp-awards li{
  display:flex; align-items:baseline; gap:0.6rem;
  font-size:0.8rem; letter-spacing:0.06em;
  color:var(--gold);
}
.pdp-awards li::before{ content:"★"; font-size:0.72rem; line-height:1; }

/* ---------- PDP top bar (breadcrumb + subtle prev/next) ---------- */
.pdp-topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:2.25rem; }
.pdp-topbar-left{ display:flex; flex-direction:column; gap:0.6rem; min-width:0; }
.pdp-topbar .back-link{ margin-bottom:0; }
.pdp-mini-pager{ display:flex; align-items:center; gap:0.5rem; }
.pdp-mini-link{
  display:flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem;
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--font-display);
  font-size:1.05rem;
  text-decoration:none;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.pdp-mini-link:hover, .pdp-mini-link:focus-visible{ border-color:var(--gold); color:var(--gold); }

/* ---------- Philosophy ---------- */
.philosophy{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.philosophy h2{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.22;
  font-weight:400;
  font-style:italic;
  color:var(--ink-soft);
}
.philosophy .body-col{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  padding-top:0.4rem;
}
.philosophy .body-col p{ color:var(--ink-soft); font-size:1.08rem; line-height:1.8; max-width:46ch; }
.signature{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--ink);
  margin-top:0.5rem;
}
.signature small{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.65rem;
  color:var(--muted);
  margin-top:0.5rem;
}

/* ---------- Terroir ---------- */
.terroir{ background:var(--surface); }
.terroir-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.terroir-copy h2{
  font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1.08;
  margin-bottom:1.4rem;
}
.terroir-copy p{ color:var(--ink-soft); font-size:1.06rem; line-height:1.8; max-width:48ch; margin-bottom:1.75rem; }
.stat-ledger{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:clamp(1.5rem,4vw,3rem);
  padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.stat-ledger dt{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.65rem;
  color:var(--muted);
  margin-bottom:0.5rem;
}
.stat-ledger dd{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:var(--ink);
}
.terroir-art{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  background:var(--stone);
  overflow:hidden;
}
.terroir-art img{ width:100%; height:100%; object-fit:cover; }
.terroir-art .cap{
  position:absolute;
  left:1.25rem; bottom:1.1rem;
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--paper-on-basalt);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}

/* ---------- Photo band (full-bleed image + overlay text) ---------- */
.photo-band{
  position:relative;
  min-height:clamp(320px,52vw,520px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--paper-on-basalt);
  text-align:center;
}
.photo-band-media{ position:absolute; inset:0; z-index:0; }
.photo-band-media img{ width:100%; height:100%; object-fit:cover; }
.photo-band-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,26,23,0.5) 0%, rgba(28,26,23,0.34) 40%, rgba(28,26,23,0.66) 100%);
}
.photo-band-inner{ position:relative; z-index:1; padding:clamp(2.5rem,6vw,4rem); max-width:42ch; }
.photo-band-inner.is-wide{ max-width:58ch; }
.photo-band-text{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.75rem,4vw,2.75rem);
  line-height:1.24;
}
.photo-band-text.is-long{ font-size:clamp(1.35rem,2.8vw,2.1rem); line-height:1.4; }
.photo-band-cite{ margin-top:1.1rem; font-size:0.85rem; letter-spacing:0.1em; color:var(--on-basalt-muted); }
.photo-band-cite::before{ content:"— "; }
.photo-band.is-tall{ min-height:clamp(380px,60vw,620px); justify-content:flex-end; text-align:left; }
/* 58ch in this italic display serif is much narrower than in a normal-width
   face — it wrapped this passage to 8 short lines. A rem width, checked
   against the actual rendered line count rather than assumed, gets it to
   the requested 4. */
.photo-band.is-tall .photo-band-inner.is-wide{ max-width:min(50rem,90vw); }

/* ---------- Wine ledger (estate teaser) ---------- */
.wines{ background:var(--stone); }
.wines-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.wines-head h2{ font-size:clamp(2.1rem,4vw,3.2rem); }
.wines-head p{ max-width:34ch; color:var(--ink-soft); text-align:right; }

.wine-row{
  display:grid;
  grid-template-columns:5rem 1fr auto auto;
  align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.1rem) 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:padding-left .45s var(--ease), background-color .45s var(--ease);
}
.wine-row:last-child{ border-bottom:1px solid var(--line); }
.wine-row:hover, .wine-row:focus-visible{
  padding-left:0.9rem;
  background:rgba(124,95,44,0.06);
}
.wine-vintage{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.wine-id{ display:flex; align-items:center; gap:1.1rem; min-width:0; }
.wine-id .text{ min-width:0; }
.wine-glyph{ width:1.6rem; height:2.9rem; flex-shrink:0; }
.wine-thumb{
  width:3.4rem; height:3.4rem;
  flex-shrink:0;
  object-fit:cover;
  background:var(--surface);
}
.wine-name{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.3vw,1.6rem);
  color:var(--ink);
}
.wine-note{
  display:block;
  font-size:0.92rem;
  color:var(--muted);
  margin-top:0.2rem;
  max-width:44ch;
}
.wine-tag{
  font-size:0.68rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.wine-price{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.wines-more{ margin-top:clamp(2rem,4vw,2.75rem); }
@media (max-width:760px){
  .wine-row{ grid-template-columns:3.4rem 1fr; row-gap:0.6rem; }
  .wine-tag{ grid-column:2; }
  .wine-price{ grid-column:2; justify-self:start; }
}

/* ---------- Flagship ---------- */
.flagship{
  background:var(--basalt);
  color:var(--paper-on-basalt);
}
.flagship-grid{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:clamp(3rem,7vw,6rem);
  align-items:center;
}
.flagship-bottle{
  display:flex;
  justify-content:center;
}
.flagship-bottle img{
  width:100%;
  max-width:360px;
  aspect-ratio:3/4;
  object-fit:cover;
  box-shadow:0 30px 60px rgba(10,9,8,0.45);
}
.flagship-copy .badge{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 1rem;
  border:1px solid var(--on-basalt-line);
  border-radius:999px;
  font-size:0.66rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:1.75rem;
}
.flagship-copy h2{
  font-size:clamp(2.4rem,5vw,3.75rem);
  letter-spacing:0.02em;
  margin-bottom:1.5rem;
}
.flagship-copy .quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.25rem,2vw,1.55rem);
  line-height:1.5;
  color:var(--paper-on-basalt);
  max-width:34ch;
  margin-bottom:1.25rem;
}
.flagship-copy .cite{
  font-size:0.85rem;
  color:var(--on-basalt-muted);
  margin-bottom:2.25rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  padding:0.95rem 2rem;
  border:1px solid var(--gold-bright);
  background:transparent;
  color:var(--gold-bright);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.72rem;
  font-family:var(--font-body);
  cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover, .btn:focus-visible{
  background:var(--gold-bright);
  color:var(--basalt);
}
.btn.on-light{ border-color:var(--gold); color:var(--gold); }
.btn.on-light:hover, .btn.on-light:focus-visible{ background:var(--gold); color:var(--stone); }

/* ---------- Info cards (visit / tasting / accommodation teasers) ---------- */
.info-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.info-card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.info-card{
  background:var(--surface);
  padding:clamp(2rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
  text-decoration:none;
  color:inherit;
}
.info-card .num{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.05rem;
}
.info-card h3{ font-size:1.55rem; }
.info-card p{ color:var(--ink-soft); line-height:1.75; max-width:38ch; }
.info-card .text-link{ align-self:flex-start; }
.info-card.has-media{ padding:0; overflow:hidden; }
.info-card.has-media .media{ aspect-ratio:16/10; overflow:hidden; }
.info-card.has-media .media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.info-card.has-media:hover .media img{ transform:scale(1.05); }
.info-card.has-media .body{ padding:clamp(1.75rem,3.5vw,2.5rem); display:flex; flex-direction:column; gap:0.85rem; }
@media (max-width:760px){ .info-card-grid, .info-card-grid.cols-3{ grid-template-columns:1fr; } }

/* ---------- Founder cards (Birtok) ---------- */
.founder-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.founder-card{ display:flex; flex-direction:column; }
.founder-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--graphite-tint); }
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-body{ padding-top:1.5rem; }
.founder-body h3{ font-size:1.9rem; margin-top:0.5rem; }
.founder-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin-top:1rem;
  max-width:38ch;
}
.founder-body .text-link{ margin-top:1.25rem; }
@media (max-width:760px){ .founder-grid{ grid-template-columns:1fr; } }

/* A single wide lead photo ahead of the founder cards — same figcaption
   treatment as .gallery-grid, but full width and landscape rather than
   gridded, so it reads as an opening image rather than one tile of a set. */
.family-photo{
  position:relative;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  aspect-ratio:16/9;
  overflow:hidden;
}
.family-photo img{ width:100%; height:100%; object-fit:cover; }
.family-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.25rem 1.5rem;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg, rgba(20,18,16,0.68), transparent);
}
@media (max-width:640px){ .family-photo{ aspect-ratio:4/5; } }

/* ---------- Simple image gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2.5rem,5vw,4rem); }
.gallery-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.gallery-grid figure{ margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface); }
.gallery-grid.cols-3 figure{ aspect-ratio:3/4; }
/* Landscape frames for wide source photography (terrace vistas), so a
   panorama isn't cropped down into the default portrait frame. */
.gallery-grid.is-wide figure{ aspect-ratio:3/2; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-grid figure:hover img{ transform:scale(1.045); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.1rem;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg, rgba(20,18,16,0.72), transparent);
}
@media (max-width:640px){ .gallery-grid, .gallery-grid.cols-3{ grid-template-columns:1fr 1fr; } }

/* ---------- Fact rows (shared k/v ledger: contact, room specs, pdp facts) ---------- */
.fact-list{ display:flex; flex-direction:column; }
.fact-row{ display:flex; gap:1.25rem; padding-bottom:0.9rem; margin-bottom:0.9rem; border-bottom:1px solid var(--line); }
.fact-row:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.fact-list.divided .fact-row{ border-bottom:1px solid var(--line); padding-bottom:0.9rem; margin-bottom:0.9rem; }
.fact-row .k{
  width:9rem; flex-shrink:0;
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.66rem;
  color:var(--muted); padding-top:0.25rem;
}
.fact-row .v{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); line-height:1.5; }
.on-basalt .fact-row{ border-color:var(--on-basalt-line); }
.on-basalt .fact-row .k{ color:var(--on-basalt-muted); }
.on-basalt .fact-row .v{ color:var(--paper-on-basalt); }
.fact-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; }
@media (max-width:640px){ .fact-row .k{ width:7rem; } .fact-grid-2{ grid-template-columns:1fr; } }

/* ---------- Room card (Szállás) ---------- */
.room-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.room-card-media{ aspect-ratio:4/5; overflow:hidden; }
.room-card-media img{ width:100%; height:100%; object-fit:cover; }
.room-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.room-card-head h3{ font-size:clamp(1.6rem,3vw,2.1rem); }
.room-price{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold); white-space:nowrap; }
.room-price small{ display:block; font-family:var(--font-body); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-top:0.2rem; }
.room-note{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:0.9rem; line-height:1.75; color:var(--ink-soft); }
.room-note a{ color:var(--gold); text-decoration:underline; text-underline-offset:0.2em; }
@media (max-width:900px){ .room-card{ grid-template-columns:1fr; } .room-card-media{ order:-1; aspect-ratio:16/10; } }

/* ---------- Compact room cards (Diófás / Családi — no photo yet) ---------- */
.room-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem); }
.room-mini{ background:var(--surface); border:1px solid var(--line); padding:clamp(1.75rem,3vw,2.25rem); }
.room-mini-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.room-mini-head h3{ font-size:1.4rem; margin-top:0.4rem; }
.room-mini .room-price{ font-size:1.1rem; }
.room-mini .fact-list{ margin-bottom:1.25rem; }
@media (max-width:760px){ .room-mini-grid{ grid-template-columns:1fr; } }

/* ---------- Visit / Kapcsolat ---------- */
.visit{ background:var(--graphite-tint); }
.horizon{
  height:clamp(140px,20vw,240px);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
.horizon img{ width:100%; height:100%; object-fit:cover; display:block; }
.section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:52ch; }
/* Szállás's "Három szoba..." heading wrapped to 3 short lines at the shared
   52ch — each phrase landing on its own line and pushing the room cards
   down. Wider, so it settles into 2. */
.section-head.is-roomy{ max-width:min(46rem,90vw); }
.section-head h2{ font-size:clamp(2.1rem,4vw,3.2rem); margin-bottom:1rem; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.8; }
.on-basalt .section-head p{ color:var(--on-basalt-muted); }

.map-band{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; margin-top:clamp(2.5rem,5vw,4rem); }
.map-photo{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--on-basalt-line); }
.map-photo img{ width:100%; height:100%; object-fit:cover; }
.map-photo iframe{ width:100%; height:100%; border:0; display:block; }
/* ---------- Generic text link (arrow-style CTA, adapts to background) ---------- */
.text-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.text-link:hover, .text-link:focus-visible{ border-color:var(--gold); }
.on-basalt .text-link{ color:var(--gold-bright); }
@media (max-width:900px){ .map-band{ grid-template-columns:1fr; } .map-photo{ order:-1; } }

/* ---------- Vásárlási feltételek (legal/terms) ---------- */
.legal-content{ max-width:54rem; }
.legal-block{ margin-bottom:clamp(3rem,6vw,4rem); }
.legal-block:last-child{ margin-bottom:0; }
.legal-block h2{ font-size:clamp(1.3rem,2.2vw,1.65rem); margin-bottom:1.25rem; }
.legal-block p{ color:var(--ink-soft); font-size:1rem; line-height:1.8; margin-bottom:1.1rem; }
.legal-block p:last-child{ margin-bottom:0; }
.legal-block p a{ color:var(--gold); text-decoration:underline; text-underline-offset:0.2em; }
.legal-block .fact-list{ max-width:34rem; }

/* ---------- Contact / Footer ---------- */
.contact{ background:var(--basalt); color:var(--paper-on-basalt); }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem);
}
.contact h2{
  font-size:clamp(2.1rem,4vw,3rem);
  margin-bottom:1.75rem;
  color:var(--paper-on-basalt);
}
.contact-row a:hover{ color:var(--gold-bright); }

.site-footer{
  background:var(--basalt-deep);
  color:var(--paper-on-basalt);
  padding-block:clamp(2rem,4vw,2.75rem);
}
.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2.5rem;
  flex-wrap:wrap;
  padding-bottom:clamp(1.5rem,3vw,2rem);
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--on-basalt-line);
}
.footer-brand .wordmark{ margin-bottom:0.85rem; }
.footer-brand .wordmark .mark::before, .footer-brand .wordmark .mark::after{ color:var(--on-basalt-muted); }
.footer-brand p{ color:var(--on-basalt-muted); font-size:0.85rem; max-width:30ch; line-height:1.6; }
.footer-cols{ display:flex; gap:clamp(2.5rem,5vw,4.5rem); flex-wrap:wrap; }
.footer-col h4{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.66rem;
  color:var(--on-basalt-muted);
  margin-bottom:0.9rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a{ text-decoration:none; font-size:0.92rem; color:var(--paper-on-basalt); display:inline-flex; align-items:center; gap:0.55rem; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-col a svg{ width:0.9rem; height:0.9rem; flex-shrink:0; }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem 1.5rem;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-basalt-muted);
}
.footer-bottom a{ text-decoration:none; color:inherit; }
.footer-bottom a:hover{ color:var(--gold-bright); }

.funding-note{
  max-width:52rem;
  margin:0 auto;
  padding:clamp(1.75rem,4vw,2.5rem) 1.5rem clamp(3rem,6vw,4.5rem);
  font-size:0.72rem;
  line-height:1.6;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  opacity:0.72;
  text-align:center;
}

/* ---------- Webshop view ---------- */
.shop-hero .shipping-note{
  margin-top:1.75rem;
  padding-top:1.4rem;
  border-top:1px solid var(--on-basalt-line);
  max-width:54ch;
  font-size:0.82rem;
  line-height:1.75;
  color:var(--on-basalt-muted);
}

.shop-body{ background:var(--stone); padding-block:clamp(3rem,6vh,4.5rem) clamp(6rem,10vh,8rem); }
.shop-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vh,3rem);
}
.shop-filters{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.shop-search{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.55rem 1rem;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  flex:0 1 18rem;
  transition:border-color .3s var(--ease);
}
.shop-search:focus-within{ border-color:var(--gold); color:var(--ink); }
.shop-search input{
  all:unset;
  flex:1;
  min-width:0;
  font-family:var(--font-body);
  font-size:0.85rem;
  color:var(--ink);
}
.shop-search input::placeholder{ color:var(--muted); }
.shop-search input::-webkit-search-cancel-button{ display:none; }
@media (max-width:640px){ .shop-search{ flex-basis:100%; } }
.shop-empty{
  border:1px solid var(--line);
  background:var(--surface);
  padding:clamp(3rem,7vw,5rem) clamp(1.5rem,4vw,2.5rem);
  text-align:center;
}
.shop-empty-title{ font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--ink); }
.shop-empty-note{ color:var(--muted); font-size:0.95rem; line-height:1.7; margin:0.75rem auto 1.75rem; max-width:42ch; }
.chip{
  all:unset;
  cursor:pointer;
  padding:0.55rem 1.3rem;
  border:1px solid var(--line);
  background:var(--graphite-tint);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--stone); }
.chip:hover{ border-color:var(--ink-soft); }
.chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  /* The featured card spans 2 columns, so default (sparse) placement leaves a
     hole whenever the cursor is mid-row when it comes up — and a hole here is
     a bare block of the grid's own --line background between the cards. dense
     back-fills those holes with the following single-width cards. */
  grid-auto-flow:dense;
  background:var(--line);
  border:1px solid var(--line);
}
.product-card{
  background:var(--surface);
  padding:clamp(2rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
}
.product-card.is-hidden{ display:none; }
.product-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.badge-pill{
  display:block;
  width:fit-content;
  align-self:flex-start;
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:0.3rem 0.7rem;
  margin-bottom:1.25rem;
}
/* .figure-wrap holds the clickable photo button plus the vintage pill as
   siblings — always position:relative, and never itself transformed, so
   it's a stable anchor for the pill. (A transformed element becomes a
   positioning root for absolute descendants only *while* the transform is
   active — nesting the pill inside .product-figure made it jump on hover.) */
.figure-wrap{ position:relative; margin-bottom:1.5rem; }
/* On the shop grid, the vintage pill sits on the bottle photo itself
   (mirrors .award-badge on the opposite corner) instead of taking a row
   in the card copy — frees that space up for a larger product image. */
.badge-pill.on-photo{
  position:absolute;
  top:0.75rem; left:0.75rem;
  margin-bottom:0;
  background:var(--surface);
  pointer-events:none;
}
.product-figure{
  all:unset;
  cursor:pointer;
  display:block;
  transition:transform .35s var(--ease);
}
.product-figure:hover{ transform:translateY(-4px); }
.product-figure:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
/* Wraps the photo + medal seal, always position:relative, so the medal
   anchors to the image and tracks it when .product-figure lifts on hover. */
.figure-frame{ position:relative; display:block; }
.product-figure svg{ filter:drop-shadow(0 14px 14px rgba(32,30,27,0.16)); }
.product-figure img:not(.award-badge){ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; filter:drop-shadow(0 14px 14px rgba(32,30,27,0.16)); }
/* Award seal — an actual photo of the medal, not just the "Aranyérmes"
   text pill, so it sits on the bottle photo itself rather than in the
   card copy below it. Only wines with an `award` image get one. */
.award-badge{
  position:absolute;
  top:0.75rem; right:0.75rem;
  width:clamp(3rem,6vw,3.75rem);
  height:auto;
  filter:drop-shadow(0 6px 10px rgba(32,30,27,0.3));
  pointer-events:none;
}
.product-vintage{ font-family:var(--font-display); color:var(--muted); font-size:0.95rem; }
.product-name{ font-family:var(--font-display); font-size:1.5rem; margin-top:0.35rem; }
.product-note{ color:var(--muted); font-size:0.9rem; line-height:1.65; margin-top:0.6rem; flex:1; }
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}
.product-price{ font-family:var(--font-display); font-size:1.2rem; font-variant-numeric:tabular-nums; }
.product-actions{ display:flex; align-items:center; gap:1.25rem; }
.link-details{
  font-family:var(--font-body);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-details:hover{ color:var(--gold); border-color:var(--gold); }
.btn-add{
  all:unset;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:0.2rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn-add:hover{ color:var(--gold); border-color:var(--gold); }
.btn-add:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.product-card.featured{
  position:relative;
  grid-column:span 2;
  background:var(--mist);
  flex-direction:row;
  align-items:center;
  gap:clamp(2rem,4vw,3rem);
}
.product-card.featured .figure-wrap{ flex-shrink:0; width:clamp(240px,22vw,310px); margin-bottom:0; }
.product-card.featured .product-figure img:not(.award-badge){ filter:drop-shadow(0 14px 14px rgba(32,30,27,0.16)); }
/* Sits straddling the photo's own top-right corner rather than inset
   within it — translate(35%,-35%) centers the badge on the corner point
   regardless of its clamp()'d size. */
.product-card.featured .award-badge{ width:clamp(3.5rem,6vw,4.25rem); top:0; right:0; transform:translate(35%,-35%); }
.product-card.featured .product-name{ font-size:2rem; }
.product-card.featured .product-foot{ border-color:var(--mist-line); }

@media (max-width:900px){
  .product-grid{ grid-template-columns:1fr 1fr; }
  .product-card.featured{ grid-column:span 2; flex-direction:column; text-align:left; }
}
@media (max-width:640px){
  .product-grid{ grid-template-columns:1fr; }
  .product-card.featured{ grid-column:span 1; }
}

/* ---------- Product detail page ---------- */
.pdp-top{ background:var(--stone); padding-top:calc(5rem + clamp(1.25rem,4vh,2.25rem)); padding-bottom:clamp(2.5rem,5vh,3.5rem); }
.pdp-grid{ display:grid; grid-template-columns:0.8fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; margin-top:2.5rem; }
.pdp-figure{ position:relative; display:flex; justify-content:center; padding-block:1.5rem; }
.pdp-figure svg{ width:clamp(120px,16vw,168px); height:auto; filter:drop-shadow(0 20px 20px rgba(32,30,27,0.18)); }
.pdp-figure img:not(.award-badge){ height:clamp(330px,35vw,430px); width:auto; max-width:100%; box-shadow:0 24px 48px rgba(32,30,27,0.28); }
.pdp-figure .award-badge{ width:clamp(3.75rem,7vw,4.75rem); top:0.5rem; right:0.5rem; }
.pdp-name{ font-size:clamp(2.4rem,5vw,3.75rem); margin-top:0.75rem; }
.pdp-tagline{ color:var(--ink-soft); font-size:1.1rem; line-height:1.75; margin-top:1rem; max-width:52ch; }
.pdp-buy{ display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem 1.5rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.pdp-price{ font-family:var(--font-display); font-size:1.6rem; font-variant-numeric:tabular-nums; }
.pdp-quickfacts{ margin-top:2rem; }

.pdp-section{ padding-block:clamp(4rem,8vh,6rem); }

.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); }
.profile-axis .labels{ display:flex; justify-content:space-between; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:0.9rem; }
.profile-track{ position:relative; height:1px; background:var(--line); }
.profile-track .dot{ position:absolute; top:50%; width:0.6rem; height:0.6rem; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); }

.tasting-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); }
.tasting-grid h3{ font-size:1.2rem; margin-bottom:0.6rem; }
.tasting-grid p{ color:var(--ink-soft); line-height:1.75; }

.pdp-details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); margin-top:2.5rem; }
.pdp-story p{ color:var(--on-basalt-muted); line-height:1.85; font-size:1.05rem; max-width:46ch; }
.pdp-story p + p{ margin-top:1.25rem; }

@media (max-width:900px){
  .pdp-grid, .pdp-details-grid{ grid-template-columns:1fr; }
  .tasting-grid{ grid-template-columns:1fr; }
}

/* ---------- Product pager (prev/next) ---------- */
.pdp-pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--stone);
  border-top:1px solid var(--line);
}
.pdp-pager-link{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,5vw,4.5rem);
  text-decoration:none;
  color:inherit;
  min-width:0;
  transition:background-color .3s var(--ease);
}
.pdp-pager-link:hover, .pdp-pager-link:focus-visible{ background:var(--surface); }
.pdp-pager-link.next{ justify-content:flex-end; text-align:right; border-left:1px solid var(--line); }
.pdp-pager-arrow{
  flex-shrink:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold);
  transition:transform .3s var(--ease);
}
.pdp-pager-link.prev:hover .pdp-pager-arrow{ transform:translateX(-5px); }
.pdp-pager-link.next:hover .pdp-pager-arrow{ transform:translateX(5px); }
.pdp-pager-meta{ display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
.pdp-pager-label{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.pdp-pager-name{
  font-family:var(--font-display); font-size:1.2rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:640px){
  .pdp-pager{ grid-template-columns:1fr; }
  .pdp-pager-link{ padding:1.5rem clamp(1.25rem,5vw,2rem); }
  .pdp-pager-link.next{ border-left:0; border-top:1px solid var(--line); justify-content:flex-start; text-align:left; }
  .pdp-pager-link.next .pdp-pager-arrow{ order:-1; }
}

/* ---------- Cart drawer ----------
   Above the cookie banner (250). The drawer is full-height with its summary
   pinned to the bottom, so at the banner's old higher z-index the banner
   covered the subtotal and the "Tovább a pénztárhoz" button outright — on a
   first visit checkout was unreachable until the banner was dismissed. */
.cart-backdrop{
  position:fixed; inset:0;
  background:rgba(67,62,57,0.5);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
  z-index:260;
}
.cart-backdrop.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%;
  width:min(26.875rem,92vw);
  background:var(--surface);
  color:var(--ink);
  z-index:261;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,4vw,2.5rem);
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  box-shadow:-24px 0 60px rgba(67,62,57,0.18);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.cart-head h2{ font-size:1.4rem; }
.cart-close{ all:unset; cursor:pointer; font-size:1.6rem; line-height:1; color:var(--muted); padding:0.25rem; }
.cart-close:hover{ color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1.4rem; }
.cart-empty{ color:var(--muted); font-size:0.95rem; padding-block:1rem; }
.cart-item{ display:flex; gap:1.25rem; align-items:center; }
.cart-item .glyph{ width:1.4rem; height:2.5rem; flex-shrink:0; margin-top:0.15rem; }
.cart-thumb{
  width:4.5rem; height:4.5rem;
  flex-shrink:0;
  object-fit:cover;
  background:var(--surface);
}
.cart-item .info{ flex:1; min-width:0; }
.cart-item .name{ font-family:var(--font-display); font-size:1.1rem; }
.cart-item .meta{ font-size:0.78rem; color:var(--muted); margin-top:0.15rem; }
.qty-stepper{ display:flex; align-items:center; gap:0.6rem; margin-top:0.6rem; }
.qty-stepper button{ all:unset; cursor:pointer; width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); font-size:0.85rem; }
.qty-stepper button:hover{ border-color:var(--ink); }
.qty-stepper .qty-val{ font-variant-numeric:tabular-nums; min-width:1.2em; text-align:center; font-size:0.85rem; }
.cart-item-end{ display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem; }
.cart-item .line-price{ font-family:var(--font-display); font-size:1rem; white-space:nowrap; }
.cart-remove{
  all:unset;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:0.66rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.cart-remove:hover, .cart-remove:focus-visible{ color:var(--gold); }
.cart-summary{ border-top:1px solid var(--line); padding-top:1.5rem; margin-top:1.5rem; }
.cart-row{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:1.15rem; margin-bottom:1rem; font-variant-numeric:tabular-nums; }
.cart-note{ font-size:0.78rem; color:var(--muted); line-height:1.65; margin-bottom:1.5rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Checkout ---------- */
.checkout-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
.checkout-section{ margin-bottom:clamp(2.25rem,4vw,3rem); }
.checkout-section h2{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.25rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.25rem; }
.field span{
  font-family:var(--font-body);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--muted);
}
.field input{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  padding:0.85rem 1rem;
  outline:none;
  transition:border-color .25s var(--ease);
}
.field input:focus{ border-color:var(--gold); }
.field-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.field-row.two .field{ margin-bottom:1.25rem; }

.option-list{ display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.25rem; }
.option-row{
  display:flex;
  align-items:center;
  gap:0.85rem;
  border:1px solid var(--line);
  padding:0.9rem 1.1rem;
  cursor:pointer;
  transition:border-color .25s var(--ease);
}
.option-row:has(input:checked){ border-color:var(--gold); }
.option-row input{ accent-color:var(--gold); }
.option-row span:first-of-type{ flex:1; font-family:var(--font-body); font-size:0.95rem; }
.option-price{ font-family:var(--font-display); font-size:0.95rem; color:var(--muted); }

.pay-redirect-note{
  background:var(--stone);
  border:1px solid var(--line);
  padding:1rem 1.25rem;
  margin-top:0.25rem;
}
.pay-redirect-note p{ font-size:0.88rem; color:var(--ink-soft); line-height:1.65; }
.pay-redirect-note.is-hidden{ display:none; }
.checkout-fake-note{ font-size:0.78rem; color:var(--muted); line-height:1.6; margin-top:0.75rem; }

.checkout-summary{
  background:var(--stone);
  border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2rem);
  position:sticky;
  top:6rem;
}
.checkout-summary h2{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:1.25rem; }
.checkout-lines{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.checkout-line{ display:flex; gap:0.85rem; align-items:center; }
.checkout-thumb{ width:3.25rem; height:3.25rem; flex-shrink:0; object-fit:cover; background:var(--surface); }
.checkout-line .info{ flex:1; min-width:0; }
.checkout-line .name{ font-family:var(--font-display); font-size:0.98rem; }
.checkout-line .meta{ font-size:0.75rem; color:var(--muted); margin-top:0.1rem; }
.checkout-line .line-price{ font-family:var(--font-display); font-size:0.9rem; white-space:nowrap; }
.checkout-total{ font-size:1.3rem; padding-top:0.75rem; border-top:1px solid var(--line); margin-top:0.25rem; }

.checkout-empty{ max-width:34rem; }
.checkout-empty p{ color:var(--ink-soft); line-height:1.75; margin-bottom:1.75rem; }

.checkout-confirm{ max-width:40rem; }
.checkout-confirm .fact-list{ margin-bottom:2rem; }
.checkout-confirm .checkout-lines{ margin-bottom:1.5rem; }
.checkout-confirm-actions{ display:flex; align-items:center; gap:1.5rem; margin-top:2rem; flex-wrap:wrap; }

@media (max-width:900px){
  .checkout-grid{ grid-template-columns:1fr; }
  .checkout-summary{ position:static; }
}
@media (max-width:640px){
  .field-row.two{ grid-template-columns:1fr; }
}

/* ---------- Page-switch transition ---------- */
.transition-overlay{ position:fixed; inset:0; z-index:270; pointer-events:none; }
.cube-grid{ position:absolute; inset:0; display:grid; width:100%; height:100%; }
.cube{
  background:var(--basalt);
  /* Non-inset halo, same color as the fill: papers over the
     sub-pixel seams grid tracks otherwise leave between cells
     once several tiles land at slightly different rounded sizes. */
  box-shadow:0 0 0 1px var(--basalt);
  display:flex; align-items:center; justify-content:center;
  transform:scale(0);
  opacity:0;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
/* The logo lockup during the transition: an independently centered
   overlay (flexbox, same technique as .wordmark) rather than letters
   built out of individual grid cells. A letter can only ever land on
   a cube's center, and no cube center coincides with the true middle
   of the grid when its column count is even — off by up to half a
   cube on those viewports, however carefully the math rounds. Sizing
   it off the viewport itself, not the grid, keeps it exact everywhere. */
.cube-wordmark{
  position:absolute; inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.6em;
  opacity:0;
  transition:opacity .4s ease;
}
.cube-wordmark.visible{ opacity:1; }
.cube-wordmark .mark{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  letter-spacing:0.34em;
  text-transform:uppercase;
  font-size:clamp(1.6rem,5vw,3.4rem);
  color:var(--gold-bright);
  display:flex; align-items:center; gap:0.55em;
}
.cube-wordmark .mark::before, .cube-wordmark .mark::after{ content:"·"; color:var(--on-basalt-muted); }
/* Same trailing-letter-spacing correction as .wordmark above. */
.cube-wordmark .mark::after{ margin-right:-0.34em; }
.cube-wordmark .sub{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.48em;
  margin-right:-0.48em;
  font-weight:500;
  font-size:clamp(0.68rem,1.8vw,1.05rem);
  color:var(--on-basalt-muted);
}
@keyframes cubeIn{
  from{ transform:scale(0.2); opacity:0; }
  55%{ opacity:1; }
  to{ transform:scale(1); opacity:1; }
}
@keyframes cubeOut{
  from{ transform:scale(1); opacity:1; }
  to{ transform:scale(0.2); opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .philosophy, .terroir-grid, .flagship-grid, .contact-grid{
    grid-template-columns:1fr;
  }
  .terroir-art{ order:-1; aspect-ratio:16/10; }
  .flagship-bottle{ order:-1; }
  .wines-head{ flex-direction:column; align-items:flex-start; }
  .wines-head p{ text-align:left; }
  .nav-links, .nav-utils{ display:none; }
  .nav-burger{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue .line::after{ animation:none; }
  .hero-media, .page-hero-media{ animation:none; }
}

/* ---------- Overlapping photo pair ---------- */
/* Two prints laid over one another rather than a tidy side-by-side grid:
   a tall image on the left with a second one overlapping its lower-right
   corner and hanging past its bottom edge. */
.photo-pair{
  position:relative;
  max-width:46rem;
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-bottom:7%; /* room for the front image to hang past the back one */
}
.photo-pair figure{
  margin:0;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
}
.photo-pair img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.photo-pair figure:hover img{ transform:scale(1.04); }
.photo-pair figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.1rem;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg, rgba(20,18,16,0.72), transparent);
}
.photo-pair-back{ width:64%; aspect-ratio:4/5; }
/* Two classes, so this outranks `.photo-pair figure{position:relative}`
   above — otherwise the front image never leaves the normal flow and just
   stacks underneath instead of overlapping. Widths sum past 100% on
   purpose: that difference is the horizontal overlap. */
.photo-pair .photo-pair-front{
  position:absolute; right:0; bottom:0;
  width:48%; aspect-ratio:4/5;
  /* Ring painted in the page colour so the overlap reads as a separate
     photograph sitting on top, not one image cropped into another. */
  box-shadow:0 0 0 clamp(0.45rem,1vw,0.85rem) var(--stone),
             0 24px 48px rgba(32,30,27,0.22);
}
@media (max-width:700px){
  .photo-pair{ display:grid; gap:1rem; padding-bottom:0; max-width:none; }
  .photo-pair-back,
  .photo-pair .photo-pair-front{
    position:static; width:100%; aspect-ratio:4/5; box-shadow:none;
  }
}

/* ---------- Szállás intro collage ----------
   Four photo prints scattered across a single overlapping row, each on
   its own slight rotation with a cream mat border standing in for a
   mount — like prints laid out by hand rather than filed into a grid.
   Painting order follows DOM order, so later prints naturally sit on
   top of earlier ones where they overlap; hover straightens and lifts
   a print clear of its neighbours. */
.stay-collage{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  max-width:52rem;
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding:1.5rem 0.5rem;
}
.stay-collage figure{
  flex:0 0 auto;
  width:clamp(9rem,19vw,13.5rem);
  margin:0;
  padding:0.65rem 0.65rem 1.7rem;
  background:var(--surface);
  box-shadow:0 16px 32px rgba(32,30,27,0.28), 0 3px 7px rgba(32,30,27,0.16);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.stay-collage figure + figure{ margin-left:clamp(-2.4rem,-3.6vw,-1.1rem); }
.stay-collage figure:nth-child(1){ transform:rotate(-7deg) translateY(0.6rem); }
.stay-collage figure:nth-child(2){ transform:rotate(5deg) translateY(-1rem); }
.stay-collage figure:nth-child(3){ transform:rotate(-4deg) translateY(0.8rem); }
.stay-collage figure:nth-child(4){ transform:rotate(8deg) translateY(-0.3rem); }
.stay-collage img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.stay-collage figure:hover{
  transform:rotate(0deg) translateY(-0.7rem) scale(1.06);
  box-shadow:0 26px 46px rgba(32,30,27,0.34), 0 8px 14px rgba(32,30,27,0.2);
  z-index:5;
}
@media (max-width:700px){
  .stay-collage{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem 1rem;
    max-width:21rem;
    padding:0.5rem 0;
  }
  .stay-collage figure{ width:100%; margin:0; }
  .stay-collage figure + figure{ margin-left:0; }
  .stay-collage figure:nth-child(1){ transform:rotate(-4deg); }
  .stay-collage figure:nth-child(2){ transform:rotate(3deg) translateY(0.7rem); }
  .stay-collage figure:nth-child(3){ transform:rotate(3deg) translateY(-0.5rem); }
  .stay-collage figure:nth-child(4){ transform:rotate(-5deg); }
  .stay-collage figure:hover{ transform:rotate(0deg) scale(1.05); z-index:5; }
}

/* ---------- Lightbox ---------- */
.is-zoomable{ cursor:zoom-in; }
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,18,16,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(3.5rem,7vw,5rem);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.lightbox.open{ opacity:1; }
.lightbox-figure{
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.lightbox-figure img{
  max-width:100%; max-height:calc(100svh - 12rem);
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.lightbox-figure figcaption{
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--on-basalt-muted); text-align:center; max-width:60ch;
}
.lightbox-close, .lightbox-nav{
  position:absolute; z-index:1;
  width:2.75rem; height:2.75rem;
  display:flex; align-items:center; justify-content:center;
  background:none;
  border:1px solid var(--on-basalt-line);
  color:var(--paper-on-basalt);
  font-size:1.6rem; line-height:1;
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover,
.lightbox-close:focus-visible, .lightbox-nav:focus-visible{
  border-color:var(--gold); color:var(--gold-bright);
}
.lightbox-close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lightbox-nav{ top:50%; transform:translateY(-50%); }
.lightbox-nav.prev{ left:clamp(0.75rem,2.5vw,2rem); }
.lightbox-nav.next{ right:clamp(0.75rem,2.5vw,2rem); }
.lightbox-counter{
  position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%;
  transform:translateX(-50%);
  font-size:0.68rem; letter-spacing:0.16em;
  color:var(--on-basalt-muted);
}
@media (max-width:640px){
  .lightbox-nav{ width:2.25rem; height:2.25rem; font-size:1.3rem; }
  .lightbox{ padding:3rem 1rem 4.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .lightbox{ transition:none; }
  .photo-pair img{ transition:none; }
}

/* ---------- 18+ age gate ----------
   Sits above everything else, the lightbox (300) included — it has to be the
   first and only thing reachable until it's answered. */
.age-gate{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.25rem,5vw,3rem);
  background:var(--basalt-deep);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.age-gate.show{ opacity:1; }
/* The blur keeps the site legible-but-unreadable behind the gate, so it reads
   as "there is a real site here" without giving the content away. */
body.age-locked{ overflow:hidden; }
.age-gate-panel{
  position:relative;
  width:min(34rem,100%);
  text-align:center;
  color:var(--paper-on-basalt);
}
.age-gate .wordmark.large{ display:inline-flex; margin-bottom:clamp(1.5rem,4vw,2.25rem); }
.age-gate .wordmark.large .mark{ font-size:clamp(2rem,5vw,3rem); color:var(--paper-on-basalt); }
.age-gate .wordmark.large .sub{ color:var(--on-basalt-muted); }
.age-gate .wordmark .mark::before, .age-gate .wordmark .mark::after{ color:var(--gold-bright); }
.age-gate-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.6vw,2.35rem);
  line-height:1.2;
  margin-bottom:1rem;
}
.age-gate-note{
  color:var(--on-basalt-muted);
  font-size:1rem; line-height:1.75;
  max-width:44ch; margin:0 auto clamp(1.75rem,4vw,2.25rem);
}
.age-gate-actions{
  display:flex; justify-content:center; gap:1rem;
  flex-wrap:wrap; margin-bottom:clamp(1.75rem,4vw,2.25rem);
}
.age-gate-legal{
  font-size:0.76rem; line-height:1.7;
  color:var(--on-basalt-muted); opacity:0.75;
  max-width:46ch; margin:0 auto;
}
.age-gate-back{
  all:unset; cursor:pointer;
  color:var(--gold-bright);
  border-bottom:1px solid currentColor;
}
.age-gate-back:hover{ color:var(--paper-on-basalt); }
@media (max-width:420px){
  .age-gate-actions{ flex-direction:column; }
  .age-gate-actions .btn{ justify-content:center; }
}

/* ---------- Cookie consent ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  background:var(--basalt-deep);
  color:var(--paper-on-basalt);
  border-top:1px solid var(--on-basalt-line);
  padding:clamp(1rem,2.5vw,1.5rem) clamp(1.25rem,5vw,4.5rem);
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-inner{
  max-width:76.25rem; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap;
}
.cookie-text{ font-size:0.88rem; line-height:1.65; max-width:66ch; color:var(--on-basalt-muted); }
.cookie-text a{ color:var(--gold-bright); text-underline-offset:0.2em; }
.cookie-actions{ display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.cookie-actions .btn{ padding:0.7rem 1.35rem; font-size:0.68rem; }
.btn.ghost{ border-color:var(--on-basalt-line); color:var(--on-basalt-muted); }
.btn.ghost:hover, .btn.ghost:focus-visible{
  background:none; border-color:var(--paper-on-basalt); color:var(--paper-on-basalt);
}
/* Placeholder shown in the map's own frame until the embed is allowed. */
.map-photo{ position:relative; }
.map-consent{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center;
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--basalt-deep);
  color:var(--on-basalt-muted);
}
.map-consent p{ font-size:0.86rem; line-height:1.65; max-width:40ch; }
.footer-consent{
  background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
  text-transform:uppercase; letter-spacing:0.14em;
}
.footer-consent:hover{ color:var(--gold-bright); }