/* =========================================================
   Szabó Családi Pincészet — premium stylesheet
   ========================================================= */

:root {
  /* Palette */
  --wine:        #5a1726;   /* deep burgundy */
  --wine-dark:   #3c0e1a;
  --wine-soft:   #7a2235;
  --gold:        #c2a05a;   /* muted gold */
  --gold-bright: #d9bd7f;
  --cream:       #f8f4ec;
  --cream-2:     #f1e9da;
  --ink:         #2a2326;
  --ink-soft:    #564a4e;
  --line:        rgba(90, 23, 38, 0.12);

  --maxw: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px -22px rgba(60, 14, 26, 0.45);
  --shadow-sm: 0 8px 24px -12px rgba(60, 14, 26, 0.35);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* --header-offset is set from JS (main.js's updateHeaderOffset), measured
   from the real fixed header height so it can't drift out of sync with
   it again — 84px here is only the pre-JS/no-JS fallback. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset, 84px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--wine); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.1em; color: var(--ink-soft); }

.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--wine); color: #fff; padding: 0.7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.83rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.95rem 1.8rem; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--gold); color: var(--wine-dark); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-bright); }
.btn-ghost { border-color: currentColor; color: var(--wine); }
.btn-ghost:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); }
/* Over the dark hero, the default dark-wine text is nearly invisible — use a light variant */
.hero .btn-ghost { color: var(--cream); border-color: rgba(248, 244, 236, 0.65); }
.hero .btn-ghost:hover { background: var(--cream); color: var(--wine-dark); border-color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
  padding: 0.6rem 0;
}
.site-header.scrolled {
  /* No backdrop-filter: blurring whatever scrolls underneath a fixed,
     full-width header, continuously, for as long as you're scrolled past
     the top, is one of the most commonly cited CSS scroll-performance
     costs there is — a strong remaining candidate for the leftover
     pixelation after removing Lenis. Bumped opacity to compensate, since
     the header is now a plain semi-opaque panel instead of frosted glass. */
  background: rgba(248, 244, 236, 0.97);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 0.8rem; color: var(--cream); }
.site-header.scrolled .brand { color: var(--wine); }
/* img/logo-icon.png is just the barrel/vine artwork, no text baked in —
   unlike the full logo, its dark outline + gold/red art reads fine on
   both a light and a dark background as-is, so (unlike the brand name
   below) it needs no separate light/dark variant. The name itself is
   real text, not part of the image: it needs to stay legible over the
   hero video's actual footage — which is far busier and less predictable
   than a flat color — and plain HTML text sized/colored by CSS handles
   that far more reliably than anything baked into a raster logo. */
.brand-mark-img { display: block; width: 46px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.3px; }
.brand-sub { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.9; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  color: var(--cream); font-size: 0.82rem; letter-spacing: 0.13em;
  text-transform: uppercase; position: relative; padding: 0.3rem 0;
  transition: color 0.3s;
}
.site-header.scrolled .nav a { color: var(--ink); }
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.nav a:not(.nav-cta):hover::after { width: 100%; }
.nav .nav-cta {
  border: 1px solid var(--gold); color: var(--cream);
  padding: 0.55rem 1.3rem; border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
.site-header.scrolled .nav .nav-cta { color: var(--wine); }
.nav .nav-cta:hover { background: var(--gold); color: var(--wine-dark); }
.nav .nav-cta.is-current { background: var(--gold); color: var(--wine-dark); }
/* Icon-only (no label — the heart + count says enough on its own) and
   hidden by default: the trigger only earns header space once the visitor
   actually has a favourite saved (see favoritesSystem's updateCount in
   main.js, which toggles the [hidden] attribute). The [hidden] rule below
   is needed despite the attribute existing: the plain class rule above it
   and the browser's own [hidden]{display:none} are equal specificity, and
   the author stylesheet wins that tie (same gotcha already hit once for
   .cart-drawer-total — see its own comment). */
.nav-favorites {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; cursor: pointer; font-family: var(--sans);
  color: var(--cream); font-size: 1.1rem; padding: 0.3rem; transition: color 0.3s;
}
.nav-favorites[hidden] { display: none; }
.site-header.scrolled .nav-favorites { color: var(--ink); }
.nav-favorites:hover { color: var(--gold-bright); }
.site-header.scrolled .nav-favorites:hover { color: var(--wine); }
.nav-favorites-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; height: 1.4em; padding: 0 0.3em; border-radius: 999px;
  background: var(--gold); color: var(--wine-dark); font-size: 0.72rem; line-height: 1;
}

/* appearance:none strips whatever native chrome the browser would
   otherwise draw on a <select> (border, background, dropdown icon —
   varies a lot by browser/OS, and on some combinations renders as an
   odd extra icon/double-border clashing with the pill styling below) so
   the only thing drawn is what's declared here, including a hand-drawn
   chevron standing in for the native arrow this removes. Two color
   variants (cream / ink) since the chevron can't just use currentColor
   the way real pseudo-element/border-based arrows can — background-image
   is fetched as its own resource with no access to the element's
   computed color, so the two states below each bake in a literal color. */
.lang-switch {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: none; cursor: pointer; font-family: var(--sans);
  color: var(--cream); font-size: 0.74rem; letter-spacing: 0.06em;
  border: 1px solid rgba(248,244,236,0.35); border-radius: 999px;
  padding: 0.3rem 1.5rem 0.3rem 0.6rem; transition: border-color 0.25s, color 0.25s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f8f4ec' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 9px 6px;
}
.lang-switch:hover { border-color: var(--gold-bright); }
.lang-switch option { color: var(--ink); background: var(--cream); }
.site-header.scrolled .lang-switch {
  color: var(--ink); border-color: var(--line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232a2326' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-header.scrolled .lang-switch:hover { border-color: var(--gold); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; z-index: 110;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--cream); border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.site-header.scrolled .nav-toggle span,
.nav-open .nav-toggle span { background: var(--wine); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  color: var(--cream); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(122, 34, 53, 0.55), transparent 60%),
    linear-gradient(160deg, #2c0a14 0%, #5a1726 45%, #7a2235 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 60px),
    radial-gradient(circle at 18% 78%, rgba(194,160,90,0.28), transparent 38%),
    radial-gradient(circle at 70% 30%, rgba(194,160,90,0.16), transparent 42%);
  mix-blend-mode: screen;
}
/* Static hero backdrop: shown immediately (no wait on the YouTube API),
   stays up on mobile where the video never loads at all (see main.js —
   the background video is skipped below a viewport-width threshold, since
   the 16:9-cover math below crops a portrait phone screen down to a tiny,
   mostly-off-frame sliver of the video), and fades out once the video
   actually starts playing on desktop. */
.hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-poster.is-hidden { opacity: 0; }
/* YouTube background video — scaled to cover the hero (16:9) */
.hero-video {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero-video.is-ready { opacity: 1; }
.hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;          /* 16:9 based on width */
  min-width: 177.78vh; min-height: 100vh;  /* 16:9 based on height */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(44,10,20,0.55) 0%, rgba(44,10,20,0.25) 30%, rgba(44,10,20,0.7) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(122, 34, 53, 0.35), transparent 60%);
}
.hero-content { position: relative; z-index: 2; padding: 8rem 0 5rem; max-width: 760px; }
.eyebrow, .section-eyebrow {
  font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-bright); margin: 0 0 1.2rem; font-weight: 500;
}
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.3); }
.hero-lead { font-size: 1.18rem; color: rgba(248,244,236,0.9); max-width: 56ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-bright); line-height: 1; }
.hero-stats span { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; margin-top: 0.35rem; }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 1px solid rgba(248,244,236,0.5); border-radius: 14px;
  display: grid; justify-items: center; padding-top: 8px;
}
.scroll-cue span {
  width: 4px; height: 8px; border-radius: 4px; background: var(--gold-bright);
  animation: scrollcue 1.6s var(--ease) infinite;
}
@keyframes scrollcue { 0% { opacity: 0; transform: translateY(-2px);} 40% {opacity:1;} 100% { opacity: 0; transform: translateY(12px);} }

/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-tint { background: var(--cream-2); }
.section-dark { background: linear-gradient(160deg, var(--wine-dark), var(--wine)); color: var(--cream); }
.section-dark h2 { color: var(--cream); }
.section-dark p { color: rgba(248,244,236,0.82); }
.section-eyebrow.light { color: var(--gold-bright); }

/* Subtle vine/grape motif in the corner of a few plainer sections, purely
   decorative — sits behind the content and stays out of the way on small
   screens, where there isn't spare room for it. z-index (not just
   position:relative) forces .section-vine to establish its own stacking
   context, so the ::before's z-index:-1 stays scoped inside it — painted
   above this section's own background but below its content — instead of
   escaping to the page's root context and landing underneath every
   section's background, including this one's. */
.section-vine { position: relative; z-index: 0; }
.section-vine::before {
  content: "";
  position: absolute;
  z-index: -1;
  display: none;
  width: min(30vw, 380px);
  height: min(30vw, 380px);
  background: url("../img/vine-motif.svg") no-repeat center / contain;
  opacity: 0.16;
  pointer-events: none;
}
.section-vine-bl::before { left: 0; bottom: 0; }
.section-vine-tr::before { right: 0; top: 0; transform: scaleX(-1); }
@media (min-width: 760px) {
  .section-vine::before { display: block; }
}

/* Full-section watercolor backdrop (grape cluster + vine top-left, an oak
   barrel and vineyard hillside bottom-right, a wide pale-cream middle) —
   richer than the small .section-vine corner icon above, so used instead
   of it rather than alongside it. A translucent cream scrim sits between
   the image and the section's content (first layer in a multi-background
   paints on top) — the full-strength image (no scrim) turned out to fight
   the text's legibility more than expected in the two-column layout,
   where the vine/grape corner art sits directly behind the paragraph
   text rather than only in the originally-intended blank middle. */
.section-bg-vine {
  background:
    linear-gradient(rgba(248, 244, 236, 0.62), rgba(248, 244, 236, 0.62)),
    url("../img/section-bg-vine-v2.jpg") center / cover no-repeat;
}

.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-intro { font-size: 1.08rem; }

/* Full-section watercolor backdrop for the homepage's "Boraink" wine
   carousel teaser only — Badacsony hill itself, overlooking Lake Balaton
   (the winery's actual location), with vine/grape corner framing and a
   wide blank pale-cream middle/top for the heading and intro text. Scoped
   to a dedicated class (not shared with .wine-section generally) since
   that class is also used for webshop.html's full product grid, which
   this background was never composed for. Same translucent-scrim
   approach as .section-bg-vine above, for the same reason — the source
   image's own pale middle isn't quite enough on its own once real text
   sits on top of it. */
.section-bg-badacsony {
  position: relative;
  background: url("../img/section-bg-badacsony.jpg") center / cover no-repeat;
}
/* Mood overlays — three stacked scrims crossfaded by JS (setupWineCarousel
   in main.js) as the carousel's centered slide changes, so the Badacsony
   backdrop's tone follows the wine on screen: pale gold/cream for whites
   (the original, single-scrim look this replaces), dusty mauve for rosé,
   deep burgundy for reds. Plain stacked divs with an opacity transition
   rather than animating a CSS custom property in the gradient itself —
   simpler and doesn't need @property/browser-support gymnastics for
   something this is easy to fake with two flat layers. Absolute+inset:0
   needs the section itself positioned (added above) to size against;
   z-index:0 plus the explicit z-index:1 on .container below keeps them
   under the section's real content regardless of DOM order, since
   positioned-vs-non-positioned stacking order is otherwise easy to get
   backwards here. */
.wine-mood-overlay {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.wine-mood-overlay.is-active { opacity: 1; }
.wine-mood-feher { background: linear-gradient(rgba(248, 244, 236, 0.6), rgba(248, 244, 236, 0.6)); }
.wine-mood-roze { background: linear-gradient(rgba(148, 70, 76, 0.29), rgba(118, 46, 56, 0.36)); }
.wine-mood-voros { background: linear-gradient(rgba(90, 23, 38, 0.58), rgba(60, 14, 26, 0.66)); }
#borok .container { position: relative; z-index: 1; }
/* Only the vörös mood swaps the section-head's text to light — its scrim
   is dark enough that the default dark-wine heading/intro color drops to
   ~2:1 contrast against it (the same trap already hit once with the About
   section's backdrop). Rozé's lighter scrim keeps ~5.2:1 with the default
   dark text as-is, and flipping it to cream there would actually make
   things worse (~2.3:1) — checked both directions, see main.js's
   updateMood(). */
#borok .section-head h2, #borok .section-intro { transition: color 1.1s var(--ease); }
#borok.is-mood-dark .section-head h2 { color: var(--cream); }
#borok.is-mood-dark .section-intro { color: rgba(248, 244, 236, 0.85); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.grid-2-balance { align-items: start; }

.signature { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--wine); margin-top: 1.4rem; }

/* Draw-in signature mark — fully visible by default; JS hides then draws the
   stroke in only once GSAP has confirmed it's available (see main.js) */
.draw-mark { color: var(--gold); margin-top: 1.2rem; }

/* media stack in about */
.media-stack { display: grid; gap: 1.2rem; }
.media-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.media-tall {
  min-height: 360px; width: 100%; object-fit: cover; display: block;
  position: relative; overflow: hidden;
}
.media-quote {
  background: var(--wine); color: var(--cream); padding: 2rem 2.2rem;
  display: grid; align-items: center;
}
.media-quote blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.35;
}

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.feature {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem; text-align: left;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature-icon { font-size: 1.9rem; display: block; margin-bottom: 0.8rem; }
.feature h3 { color: var(--wine); font-size: 1.25rem; }
.feature p { margin: 0; font-size: 0.96rem; }

/* ---------- Wine filters ---------- */
.wine-filters { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-bottom: 2.2rem; }
.filter-btn {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.55rem 1.3rem; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--wine); }
.filter-btn.is-active { background: var(--wine); border-color: var(--wine); color: var(--cream); }

/* ---------- Wines ---------- */
/* Cards are equal-height per row (grid's default align-items:stretch) and
   the description absorbs whatever leftover vertical space that leaves
   (flex:1 on the <p>, everything after it flex:0 0 auto) — so wine-foot /
   wine-qty / wine-actions line up at the same height across a row
   regardless of how long any one card's description is, instead of each
   floating at a height set by its own description's wrapped line count. */
.wine-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1.4rem;
}
.wine-card {
  position: relative; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: row; align-items: stretch;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.wine-card.is-hidden { display: none; }
/* Full bottle, not a cropped landscape photo: contain (not cover) on a
   neutral backdrop, like a product shot, so a tall bottle never gets its
   top/bottom cut off the way a 4:3 cover-fit would. */
.wine-card-img {
  flex: 0 0 clamp(120px, 26%, 170px); width: clamp(120px, 26%, 170px); height: auto;
  object-fit: contain; display: block; background: var(--cream-2); padding: 1.2rem;
}
.wine-card-body {
  position: relative; flex: 1; min-width: 0; padding: 1.6rem 1.7rem 1.9rem;
  display: flex; flex-direction: column;
}
.wine-card-body::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease);
}
.wine-card[data-type="roze"] .wine-card-body::before { background: #d98a8f; }
.wine-card[data-type="voros"] .wine-card-body::before { background: var(--wine-soft); }
.wine-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.wine-card:hover .wine-card-body::before { transform: scaleY(1); }
.wine-card h3 { color: var(--wine); margin-bottom: 0.5rem; }
.wine-card-body > p:not(.wine-stock-badge) { margin: 0 0 1.2rem; font-size: 0.95rem; flex: 1 1 auto; }
/* Tasting sheet: built entirely in JS from live /api/wines data (see
   fetchLiveWineData in main.js) into this otherwise-empty container, the
   same "static skeleton + live overlay" pattern already used for price
   and the stock badge — empty and invisible (no margin/content) for any
   wine the admin hasn't filled tasting details in for yet. */
.wine-tasting:empty { display: none; }
.wine-tasting-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem;
  margin: 0 0 0.7rem; font-size: 0.8rem;
}
.wine-tasting-facts > div { display: contents; }
.wine-tasting-facts dt { margin: 0; color: var(--ink-soft); font-weight: 500; }
.wine-tasting-facts dt::after { content: ":"; }
.wine-tasting-facts dd { margin: 0; color: var(--ink); }
.wine-tasting-pairing { margin: 0 0 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.wine-tasting-pairing strong { color: var(--wine); font-weight: 500; }
.wine-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  flex: 0 0 auto; margin-bottom: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line);
}
/* Stacked image-beside-text needs real width to not feel cramped — below
   this, fall back to the image-on-top layout the cards used to use. The
   grid's 420px column minimum (set above, for the side-by-side layout)
   has to shrink back down here too — left at 420px, cards were wider than
   the viewport itself on phones and overflowed off the right edge. */
@media (max-width: 640px) {
  .wine-track { grid-template-columns: 1fr; }
  .wine-card { flex-direction: column; }
  .wine-card-img { flex: 0 0 auto; width: 100%; height: 200px; padding: 0; }
}
.wine-meta { font-size: 0.82rem; color: var(--ink-soft); }
/* The price is the most important number on the card — once a real one
   loads (js/main.js adds .has-price once /api/wines responds), it's shown
   much larger/bolder than anything else here. Until then the static
   "Ár egyeztetés alapján" placeholder stays small/italic, since it's not
   really the same kind of content and doesn't deserve the same emphasis. */
.wine-price { font-size: 0.82rem; font-style: italic; color: var(--wine-soft); text-align: right; }
.wine-price.has-price {
  font-size: 1.6rem; font-weight: 600; font-style: normal;
  font-family: var(--serif); color: var(--wine);
}
/* Wraps .wine-price so .wine-foot's flex row still only sees two children
   (meta | this column) — the unit price stacks underneath the main price,
   right-aligned, rather than fighting it for the same line. Legally
   required unit pricing (Ft/liter, see js/main.js's formatUnitPriceHUF),
   not just decorative, so it stays hidden (not removed) until a real
   price loads rather than ever showing a stale/wrong number. */
.wine-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.wine-price-unit { font-size: 0.72rem; color: var(--ink-soft); }
.wine-price-unit[hidden] { display: none; }
/* Stock badge — hidden by default, shown by js/main.js once /api/wines
   confirms this wine is actually low/out. Sits between wine-foot and the
   quantity picker; out-of-stock also dims+disables the qty/order controls
   below it (same card, via .is-out-of-stock on .wine-card itself) rather
   than hiding them outright, so the description/photo stay browsable. */
.wine-stock-badge {
  display: none; font-size: 0.78rem; font-weight: 500; margin: -0.4rem 0 1rem;
  padding: 0.5rem 0.9rem; border-radius: 999px; text-align: center; flex: 0 0 auto;
}
.wine-stock-badge.is-visible { display: block; }
.wine-stock-badge.is-low { background: rgba(194,160,90,0.16); color: var(--wine-soft); border: 1px solid rgba(194,160,90,0.4); }
.wine-stock-badge.is-out { background: rgba(90,23,38,0.06); color: var(--ink-soft); border: 1px solid var(--line); }
.wine-card.is-out-of-stock .wine-qty,
.wine-card.is-out-of-stock .wine-actions [data-cart-add],
.wine-card.is-out-of-stock .wine-actions .wine-favorite {
  opacity: 0.4; pointer-events: none;
}
/* Column, not row: two pill buttons side by side ("Kosárba" +
   "+ Kedvencekhez") don't fit a grid card's content width once the grid
   runs at its narrow end (minmax(255px,...)) — confirmed overflowing/
   clipped at 4-up desktop widths on the webshop page. Stacked, each
   button gets the full content width regardless of how many columns the
   grid lands on. */
.wine-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.btn-sm { padding: 0.7rem 1.2rem; font-size: 0.74rem; }
.wine-favorite {
  flex: 0 0 auto; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.7rem 1rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.wine-favorite:hover { border-color: var(--gold); color: var(--wine); }
.wine-favorite.is-active { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.wine-tag {
  display: inline-block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.7rem; margin-bottom: 1rem;
}
.tag-roze { color: #b85a60; border-color: #e3b9bc; }
.tag-voros { color: var(--wine-soft); border-color: rgba(122,34,53,0.3); }

/* ---------- Bor részletező oldal (borok/<slug>.html) ---------- */
/* display:block + explicit text-align:left, not just inline-block —
   .shop-hero itself is text-align:center (a plain inherited property, so
   even a block-level child's own text centers unless overridden here),
   which centered this link above the eyebrow/h1 by default — an
   unconventional spot for a "back" link, which reads as wayfinding, not
   decorative centered content. Left-aligned against the same container
   the eyebrow/h1 use, so it sits at the natural top-left starting point
   of the page's content instead of floating centered above the title. */
.wine-detail-back {
  display: block; text-align: left; margin-bottom: 1.4rem; font-size: 0.8rem;
  letter-spacing: 0.04em; color: var(--wine-soft); transition: color 0.25s;
}
.wine-detail-back:hover { color: var(--wine); }
/* Reuses .wine-card as-is (same image/description/tasting/qty/actions
   markup and styling as the old full webshop card) — just centered with
   a sensible max-width instead of sitting in a multi-column grid, since
   there's only ever one per page here. */
.wine-detail-wrap { max-width: 900px; margin-inline: auto; }

/* ---------- Kompakt katalógus-csempe (webshop.html rácsnézete) ----------
   A teljes, kép+leírás+kóstolási adatok+darabszám+gombok elrendezés
   (.wine-card, változatlanul) mostantól csak a bor saját, dedikált oldalán
   (borok/<slug>.html) jelenik meg — a webshop-rácson minden bor egy kis,
   kattintható csempe, ami a saját oldalára visz. Szándékosan minimál: csak
   kép + név + ár, a típuscímke/készletjelzés/"részletek" felirat nélkül —
   a típus továbbra is jelzve van a .wine-card-body::before bal szegély
   színén (data-type szerint), csak nem külön szöveges címkeként. Ugyanaz
   a .wine-card osztály marad rajta (data-type, .wine-card-img,
   .wine-price — így a js/main.js élő ár-lekérése, fetchLiveWineData,
   változtatás nélkül működik mindkét nézeten, egyszerűen nem talál
   tag/badge/leírás/kóstolási/darabszám-elemeket a csempén, amit viszont
   már eddig is toleránsan kihagyott), a .wine-tile pedig — azonos
   specificitású osztályként, de a stíluslapban KÉSŐBB deklarálva, ezért
   nyer a kaszkádban — felülírja a .wine-card oldalt-egymás-mellett
   elrendezését egy függőleges, kép-előtérben elrendezésre. */
.wine-tile-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem;
}
.wine-tile {
  flex-direction: column; align-items: stretch; cursor: pointer;
  color: inherit; text-decoration: none;
}
.wine-tile .wine-card-img {
  width: 100%; height: 320px; flex: 0 0 auto; padding: 1.8rem;
}
.wine-tile .wine-card-body { padding: 1rem 1.3rem 1.3rem; }
.wine-tile h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.wine-tile .wine-foot { border-top: none; padding-top: 0; margin-bottom: 0; }

/* ---------- Quantity stepper + karton quick-add (webshop page) ---------- */
.wine-qty { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.wine-qty-stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden;
}
.wine-qty-btn {
  width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: var(--cream-2);
  color: var(--wine); font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.3s var(--ease);
}
.wine-qty-btn:hover { background: var(--gold); color: var(--wine-dark); }
.wine-qty-input {
  width: 42px; height: 30px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-family: var(--sans); font-size: 0.85rem; color: var(--ink); background: var(--cream);
  -moz-appearance: textfield;
}
.wine-qty-input::-webkit-outer-spin-button, .wine-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wine-qty-karton {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; background: transparent; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: 999px; padding: 0.45rem 0.8rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.wine-qty-karton:hover, .wine-qty-karton.is-active { border-color: var(--gold); color: var(--wine); border-style: solid; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Homepage wine carousel (replaces the old pinned horizontal
   showcase — see js/main.js setupWineCarousel). Full product listing with
   filters, descriptions and quantities now lives on the dedicated webshop
   page; this is just a taste, so it doesn't need scroll-hijacking or a
   height computed to match content, which was the root cause of a large
   dead-space gap below the cards on any viewport taller than the card row
   itself while the section was pinned.

   3-wide "coverflow" stage: one full-size centered slide, one dimmed/tilted
   slide on each side (as if curving back into the screen), everything else
   parked invisible directly behind center. Auto-advances right→left and
   loops via modulo in JS — no strip to reset, so the loop has no seam. ---------- */
/* overflow:hidden clips the tilted side slides at the stage edge instead
   of letting them bleed past it — invisible on wide screens (the stage is
   wide enough that the side slides' offset never reaches its edge there),
   but on a narrow mobile viewport that same percentage-based offset does
   reach past a now-narrow stage, and did — confirmed 18px of real
   horizontal page overflow on a 390px viewport, silently masked rather
   than fixed by body's own overflow-x:hidden safety net. */
.wine-carousel { position: relative; max-width: 980px; margin: 0 auto 2.2rem; height: clamp(280px, 32vw, 400px); perspective: 1600px; overflow: hidden; }
/* transform-style is deliberately the default (flat), NOT preserve-3d: the
   slides don't need to occlude each other in a shared 3D space (z-index
   already handles their stacking explicitly — is-center:3, is-left/
   is-right:2, hidden:1) and `perspective` on .wine-carousel above still
   applies to each slide's own rotateY/translateZ regardless. preserve-3d
   here was actively harmful: in this Chromium build it decouples
   hit-testing from the visually painted position of 3D-transformed
   descendants, so pointer-events/clicks on .is-left/.is-right (added for
   click-to-bring-to-front) silently landed on the track underneath
   instead of the card — confirmed by testing, not a hunch. */
.wine-carousel-track { position: relative; width: 100%; height: 100%; }
.wine-carousel-slide {
  /* margin-left must use max(), not min(): once the 58% clause of the
     width would exceed the 340px cap, -29% keeps growing more negative
     with viewport width forever (percentages here resolve against the
     container, not this element's own capped width) while the offset
     needs to stop at -170px right when width stops at 340px — min() kept
     picking the ever-more-negative percentage instead of clamping, which
     dragged the whole "centered" slide further left the wider the screen. */
  position: absolute; top: 0; left: 50%; width: min(58%, 340px); height: 100%; margin-left: max(-29%, -170px);
  display: flex; align-items: flex-end;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  transition: transform 1s var(--ease), opacity 1s var(--ease);
  opacity: 0; pointer-events: none; z-index: 1;
  transform: translateX(0) translateZ(-500px) scale(0.55);
}
.wine-carousel-slide.is-center { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); opacity: 1; z-index: 3; pointer-events: auto; }
/* Real click targets, not just decorative tilt — clicking either brings
   that wine to the front (see setupWineCarousel's track click listener in
   main.js). The opacity bump on hover is the only affordance for that;
   nothing else about their look changes, so it stays subtle rather than
   fighting the coverflow tilt effect. */
.wine-carousel-slide.is-left, .wine-carousel-slide.is-right {
  opacity: 0.55; z-index: 2; pointer-events: auto; cursor: pointer;
}
.wine-carousel-slide.is-left { transform: translateX(-72%) translateZ(-180px) rotateY(34deg) scale(0.8); }
.wine-carousel-slide.is-right { transform: translateX(72%) translateZ(-180px) rotateY(-34deg) scale(0.8); }
.wine-carousel-slide.is-left:hover, .wine-carousel-slide.is-right:hover { opacity: 0.8; }
.wine-carousel-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wine-carousel-caption {
  position: relative; z-index: 1; width: 100%; padding: 1.8rem 2rem;
  color: var(--cream); background: linear-gradient(0deg, rgba(44,10,20,0.78), transparent 70%);
}
.wine-carousel-caption .wine-tag { color: var(--cream); border-color: rgba(248,244,236,0.5); margin-bottom: 0.6rem; }
.wine-carousel-caption h3 { color: var(--cream); margin: 0; }
.wine-carousel-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.1rem; }
.wine-carousel-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.wine-carousel-dot.is-active { background: var(--wine); transform: scale(1.2); }
.wine-teaser-cta { text-align: center; }

/* ---------- Webshop page ---------- */
.shop-hero { padding: clamp(7.5rem, 13vw, 9.5rem) 0 1rem; text-align: center; }
.shop-note {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.6rem; margin: 0 auto 3rem; max-width: 760px;
  font-size: 0.92rem; color: var(--ink-soft); text-align: center;
}
.shop-note strong { color: var(--wine); }

/* ---------- Service list (dark) ---------- */
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.service-list li {
  border-top: 1px solid rgba(248,244,236,0.18); padding: 1.3rem 0;
}
/* Staggered entrance (each <li> carries its own .reveal, see index.html) —
   they sit close enough together vertically to all cross the scroll
   IntersectionObserver's threshold in the same tick, so the "one by one"
   feel comes entirely from this per-item transition-delay, no extra JS.
   The sideways slide-in is desktop-only: on a narrow phone, the list is
   already close to full viewport width, so the pre-reveal translateX(36px)
   pushed it far enough right to overflow the viewport by ~16px (masked,
   not fixed, by body's overflow-x:hidden). Plain .reveal's default
   translateY fade-up is vertical-only and doesn't have that risk. */
@media (min-width: 700px) {
  .service-list li.reveal { transform: translateX(36px); }
}
.service-list li:nth-child(1) { transition-delay: 0s; }
.service-list li:nth-child(2) { transition-delay: 0.14s; }
.service-list li:nth-child(3) { transition-delay: 0.28s; }
.service-list li:nth-child(4) { transition-delay: 0.42s; }
.service-list li:last-child { border-bottom: 1px solid rgba(248,244,236,0.18); }
.service-list h3 { color: var(--gold-bright); margin-bottom: 0.25rem; }
.service-list p { margin: 0; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}
.gallery figure {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  display: flex; align-items: flex-end;
  color: var(--cream);
}
.gallery figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.gallery figcaption {
  position: relative; z-index: 2; padding: 1rem 1.2rem;
  font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.gallery figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(44,10,20,0.65));
  z-index: 1;
}
.gallery figure { transition: transform 0.5s var(--ease); }
.gallery figure:hover { transform: scale(1.015); }
.g1 { grid-column: span 2; grid-row: span 2; }
.g2 { grid-column: span 2; }
.g5 { grid-column: span 2; }
.g6 { grid-column: span 2; }
.gallery-note { text-align: center; font-size: 0.85rem; margin-top: 1.5rem; opacity: 0.7; font-style: italic; }

/* ---------- Ticks list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(194,160,90,0.18);
}
.ticks-light { margin-top: 1.6rem; }
.ticks-light li { color: rgba(248,244,236,0.82); }
.ticks-light li::before { background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(217,189,127,0.2); }

/* Reusable call-to-action card (dark gradient) */
.contact-cards { display: grid; gap: 1.5rem; align-self: start; }
.cta-card {
  background: linear-gradient(160deg, var(--wine), var(--wine-dark)); color: var(--cream);
  border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--shadow);
}
.cta-card h3 { color: var(--gold-bright); font-size: 1.6rem; }
.cta-card .hours-note { color: rgba(248,244,236,0.78); margin-bottom: 1.5rem; }

.opening-hours {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm);
}
.opening-hours h3 { color: var(--wine); font-size: 1.4rem; margin-bottom: 1.1rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td {
  text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  font-weight: 400; font-size: 0.95rem;
}
.hours-table th { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-weight: 500; }
.hours-table td { text-align: right; color: var(--wine-soft); font-weight: 500; }
.hours-table td.closed { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; margin: 1.8rem 0 2rem; padding: 0; display: grid; gap: 1.2rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.ci {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--cream-2); border: 1px solid var(--line);
}
.contact-list strong { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--wine); font-weight: 600; }
.contact-list a { color: var(--ink-soft); transition: color 0.3s; }
.contact-list a:hover { color: var(--gold); }
.contact-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wine-dark); color: rgba(248,244,236,0.82); padding-top: 3.5rem; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-logo-wrap { display: block; width: 100%; max-width: 190px; }
/* max-width applies here too (not just on the wrapper above) so the
   legal pages' plain, unwrapped <img class="footer-logo"> — no
   .footer-logo-wrap there, see the comment further down — is capped the
   same as the animated version on index.html/webshop.html. */
.footer-logo { display: block; width: 100%; max-width: 190px; height: auto; }
.footer-brand p { margin-top: 1rem; max-width: 36ch; color: rgba(248,244,236,0.62); }
/* Wipe-reveal on scroll (index.html/webshop.html only — the only pages
   that load main.js's IntersectionObserver, which is what adds .in; the
   legal pages get the plain, always-visible .footer-logo rule above with
   no wrapper/.reveal at all, since they're intentionally self-contained/
   JS-free). Grows bottom-to-top — the barrel and wordmark resolve first,
   the vine and grapes last, roughly the direction a vine actually grows
   in.

   The clip-path lives on the WRAPPER'S CHILD (.footer-logo), not on the
   .reveal element itself: the wrapper is what main.js's
   IntersectionObserver watches, and Chromium (confirmed by testing)
   simply never reports an element clipped to zero visible height as
   intersecting — a .reveal element that starts at clip-path: inset(100%…)
   never receives its own .in class, so it can never un-clip itself.
   Keeping the wrapper's own box unclipped (only its ordinary .reveal
   opacity/translateY applies there) sidesteps that entirely; the clip-path
   wipe on the child is purely a visual response to the wrapper's .in. */
.footer-logo-wrap .footer-logo {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease);
}
.footer-logo-wrap.in .footer-logo { clip-path: inset(0 0 0 0); }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a, .footer-contact a, .footer-contact span { font-size: 0.92rem; color: rgba(248,244,236,0.78); transition: color 0.3s; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold-bright); }
.footer-contact { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-bottom {
  border-top: 1px solid rgba(248,244,236,0.12); padding: 1.4rem 0 2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.footer-bottom p { margin: 0; font-size: 0.78rem; color: rgba(248,244,236,0.5); }
.footer-fine { font-style: italic; }
.footer-legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal a { font-size: 0.78rem; color: rgba(248,244,236,0.5); transition: color 0.3s; }
.footer-legal a:hover { color: var(--gold-bright); }

/* ---------- Cart floating bar (trigger only — details live in the drawer below) ---------- */
.cart-bar {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 90;
  background: linear-gradient(160deg, var(--wine), var(--wine-dark)); color: var(--cream);
  border-radius: 999px; box-shadow: var(--shadow);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  pointer-events: none;
}
.cart-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cart-bar-trigger {
  display: flex; align-items: center; gap: 0.9rem;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--sans); border-radius: inherit; padding: 0.9rem 1.6rem;
}
.cart-bar-text { font-size: 0.88rem; white-space: nowrap; }
.cart-bar-text strong { color: var(--gold-bright); font-family: var(--serif); font-size: 1.15rem; margin-right: 0.3rem; }
.cart-bar-open {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(248,244,236,0.5); padding-bottom: 2px; white-space: nowrap;
}

/* ---------- Cart drawer (full overview: line items, quantities, total) ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
body.cart-open { overflow: hidden; }
.cart-drawer.is-open { visibility: visible; }
.cart-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(44,10,20,0.5);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.cart-drawer.is-open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--cream); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.cart-drawer-head h2 { margin: 0; font-size: 1.5rem; }
.cart-drawer-close {
  background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--ink-soft); padding: 0.2rem 0.5rem;
}
.cart-drawer-close:hover { color: var(--wine); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 0.4rem 1.6rem; }
.cart-drawer-empty { color: var(--ink-soft); text-align: center; padding: 3rem 0.5rem; }
.cart-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.cart-line-info { flex: 1 1 140px; min-width: 0; }
.cart-line-name { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--wine); }
.cart-line-price { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.cart-line-controls { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.cart-line-remove {
  background: none; border: 0; color: var(--ink-soft); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0.2rem 0.4rem;
}
.cart-line-remove:hover { color: var(--wine-soft); }
.cart-line-subtotal { flex: 1 0 100%; text-align: right; font-weight: 500; color: var(--wine); font-size: 0.92rem; }
.cart-drawer-foot {
  flex: 0 0 auto; padding: 1.2rem 1.6rem 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.cart-drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
/* The plain class rule above and the browser's own [hidden]{display:none}
   are equal specificity, and the author stylesheet wins that tie — so
   setting the hidden *attribute* via JS silently had no visual effect
   (confirmed: element stayed flex-visible with stale content after the
   cart was cleared). This compound selector is more specific than either
   alone, so it correctly wins instead. */
.cart-drawer-total[hidden] { display: none; }
.cart-drawer-total strong { color: var(--wine); font-family: var(--serif); font-size: 1.4rem; }
.cart-drawer-vat-note { margin: -0.4rem 0 0; font-size: 0.76rem; color: var(--ink-soft); text-align: right; }
.cart-clear {
  background: none; border: 0; color: var(--ink-soft); font-size: 0.82rem;
  text-decoration: underline; cursor: pointer; padding: 0.4rem; align-self: center;
}
.cart-clear:hover { color: var(--wine); }

/* ---------- Age gate (webshop.html only) ----------
   Visible by default (not opened via an .is-open toggle like the drawers
   above) — see the inline script right after this element in webshop.html
   for why: showing it via CSS from the very first paint, then having JS
   only ever hide it, is what avoids a flash of the real page content for
   a first-time visitor while ALSO avoiding a flash of the gate itself for
   an already-confirmed returning one. */
.age-gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.age-gate[hidden] { display: none; }
.age-gate-backdrop { position: absolute; inset: 0; background: rgba(20,6,10,0.78); }
.age-gate-panel {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--cream); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 2.4rem 2.2rem; text-align: center;
}
.age-gate-panel h2 { color: var(--wine); margin-bottom: 0.9rem; font-size: 1.7rem; }
.age-gate-panel p { color: var(--ink-soft); margin-bottom: 1.8rem; }
.age-gate-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* The full liability text sits behind this native <details> disclosure
   instead of always being shown — a native element rather than a custom
   JS-toggled one specifically so the expand/collapse needs no JS at all
   and is keyboard/screen-reader accessible for free. Only the "terms"
   word inside the <summary> is styled as an underlined link (see
   .age-gate-terms-word) even though — per how <summary> works — the
   whole line is clickable, a bigger and more forgiving target than just
   that one word. */
.age-gate-terms { margin-top: 1.4rem; text-align: left; }
.age-gate-terms summary {
  cursor: pointer; font-size: 0.82rem; color: var(--ink-soft); text-align: center;
  list-style-position: inside;
}
.age-gate-terms-word { color: var(--wine); text-decoration: underline; }
.age-gate-terms p { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .g1, .g5, .g6 { grid-column: span 2; }
  .g1 { grid-row: span 1; }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    background: var(--cream); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 1.6rem; padding: 2rem 2.2rem;
    transform: translateX(100%); transition: transform 0.45s var(--ease);
    box-shadow: -20px 0 60px -30px rgba(0,0,0,0.5);
  }
  .nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav a { color: var(--ink) !important; font-size: 1rem; }
  .nav .nav-cta { color: var(--wine) !important; }
  .nav-favorites { color: var(--ink) !important; font-size: 1.1rem; }
  .lang-switch {
    color: var(--ink) !important; border-color: var(--line) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232a2326' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
  .nav-toggle { display: flex; }
  .grid-2 { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.8rem; }
  .media-tall { min-height: 280px; }
  .cart-bar { bottom: 0.8rem; }
  .cart-drawer-panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Admin (/admin) ---------- */
.admin-badge {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wine); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem;
}
.admin-login { max-width: 380px; margin: 0 auto; }
.admin-login form { display: flex; flex-direction: column; gap: 1.1rem; }
.admin-login label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.admin-login input {
  font-family: var(--sans); font-size: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream);
}
.admin-error { color: var(--wine-soft); font-size: 0.88rem; margin: 0; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.admin-hint { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 0.9rem 0.8rem; border-bottom: 1px solid var(--line); }
.admin-table th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.admin-table input {
  width: 8rem; font-family: var(--sans); font-size: 0.95rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.admin-row-status { font-size: 0.78rem; color: var(--wine-soft); min-width: 5rem; display: inline-block; }
.admin-wine-name { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.admin-photo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.admin-photo-thumb {
  width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); background: var(--cream-2);
}
/* Same [hidden]-vs-author-stylesheet gotcha as .nav-favorites above: the
   global `img { display: block }` reset beats the native [hidden]
   behavior, so a wine with no uploaded photo would otherwise still show
   an empty placeholder box here instead of nothing. */
.admin-photo-thumb[hidden] { display: none; }
.admin-photo-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.02em;
  cursor: pointer; padding: 0.3rem 0.7rem; transition: border-color 0.2s, color 0.2s;
}
.admin-photo-btn:hover { border-color: var(--wine-soft); color: var(--wine); }
.admin-photo-btn:disabled { opacity: 0.5; cursor: default; }
.admin-photo-preview { width: 100%; margin-top: 0.6rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); }
.admin-photo-preview[hidden] { display: none; }
.admin-photo-preview-note { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--ink-soft); }
.admin-photo-preview-options { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.admin-photo-preview-option {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  width: 7.5rem; padding: 0.5rem; border: 2px solid var(--line); border-radius: 8px;
  background: var(--cream); cursor: pointer; font-size: 0.72rem; color: var(--ink-soft);
  transition: border-color 0.2s;
}
.admin-photo-preview-option:hover { border-color: var(--gold); }
.admin-photo-preview-option.is-selected { border-color: var(--wine); color: var(--wine); }
.admin-photo-preview-option img { width: 100%; height: 6rem; object-fit: contain; background: var(--cream-2); border-radius: 4px; }
.admin-photo-preview-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.admin-detail-toggle {
  background: none; border: 0; color: var(--ink-soft); font-size: 0.78rem;
  text-decoration: underline; cursor: pointer; padding: 0.3rem;
}
.admin-detail-toggle:hover { color: var(--wine); }
.admin-detail-row[hidden] { display: none; }
.admin-detail-row td { border-bottom: 1px solid var(--line); background: var(--cream-2); }
.admin-tasting-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem;
  padding: 0.4rem 0.2rem 0.8rem;
}
.admin-tasting-form label {
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; color: var(--ink-soft);
}
.admin-tasting-form input, .admin-tasting-form select, .admin-tasting-form textarea {
  width: 100%; font-family: var(--sans); font-size: 0.92rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.admin-tasting-form .admin-pairing-field { grid-column: 1 / -1; }
.admin-tasting-form textarea { resize: vertical; min-height: 4.5rem; font-family: var(--sans); }
@media (max-width: 700px) {
  .admin-detail-row td { display: block; padding: 0.6rem 0.4rem; }
}
@media (max-width: 700px) {
  .admin-table, .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table th, .admin-table td { display: block; }
  .admin-table thead { display: none; }
  .admin-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; padding: 1rem; }
  .admin-table td { border: 0; padding: 0.4rem 0; }
  .admin-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
}

/* ---------- Admin: Rendelések (Orders) ---------- */
.admin-orders { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.admin-orders h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.admin-orders-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.admin-order-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  background: var(--cream-2);
}
.admin-order-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.admin-order-ref { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--wine); }
.admin-order-date { font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; }
.admin-order-status {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.25rem 0.7rem; background: var(--line); color: var(--ink-soft);
}
.admin-order-status--paid, .admin-order-status--fulfilled { background: var(--wine); color: var(--cream); }
.admin-order-status--awaiting_manual_payment, .admin-order-status--pending { background: var(--gold); color: var(--wine-dark); }
.admin-order-status--failed, .admin-order-status--cancelled { background: transparent; border: 1px solid var(--wine-soft); color: var(--wine-soft); }
.admin-order-customer, .admin-order-address, .admin-order-totals { font-size: 0.9rem; margin: 0 0 0.4rem; }
.admin-order-items { margin: 0.4rem 0; padding-left: 1.2rem; font-size: 0.88rem; color: var(--ink-soft); }
.admin-order-totals { font-weight: 500; }
.admin-order-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; flex-wrap: wrap; }

/* ---------- Pénztár (/penztar) ---------- */
.checkout-empty { text-align: center; padding: 2rem 0; }
.checkout-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 3rem;
  align-items: start; max-width: 1080px; margin-inline: auto;
}
/* Same [hidden]-vs-author-stylesheet gotcha as .admin-photo-thumb/
   .nav-favorites elsewhere in this file: a normal-importance author rule
   setting `display` always beats the UA [hidden] rule regardless of
   specificity, so without this override the empty <form> shell would
   stay visible (as an empty grid) even while checkoutSystem() has left
   it `hidden` because the cart is empty. */
.checkout-grid[hidden] { display: none; }
.checkout-fields h2 { font-size: 1.4rem; margin: 0 0 0.9rem; }
.checkout-fields h2:not(:first-child) { margin-top: 2.2rem; }
.checkout-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkout-field-grid label {
  display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft);
}
.checkout-field-grid .checkout-field-wide { grid-column: 1 / -1; }
.checkout-field-grid input {
  font-family: var(--sans); font-size: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream);
}
.checkout-shipping { display: flex; flex-direction: column; gap: 0.8rem; }
.shipping-option {
  display: flex; align-items: flex-start; gap: 0.9rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem;
  transition: border-color 0.2s, background 0.2s;
}
.shipping-option:hover { border-color: var(--gold); }
.shipping-option.is-active { border-color: var(--wine); background: var(--cream-2); }
.shipping-option input[type="radio"] { margin-top: 0.3rem; accent-color: var(--wine); }
.shipping-option-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.25rem; }
.shipping-option-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; }
.shipping-option-price { font-family: var(--sans); color: var(--wine); white-space: nowrap; }
.shipping-option-desc { font-size: 0.85rem; color: var(--ink-soft); }
.checkout-summary {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem 1.8rem; position: sticky; top: 6rem;
}
.checkout-summary h2 { font-size: 1.25rem; margin-bottom: 0.9rem; }
.checkout-summary-items { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.4rem; }
.checkout-summary-totals { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-bottom: 0.6rem; }
.checkout-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--ink-soft); padding: 0.2rem 0; }
.checkout-summary-row--total { font-size: 1.05rem; color: var(--ink); font-weight: 500; padding-top: 0.5rem; }
.checkout-summary-row--total span:last-child { color: var(--wine); font-family: var(--serif); font-size: 1.3rem; }
.checkout-summary .btn { width: 100%; margin-top: 1rem; }
.checkout-error { color: var(--wine-soft); font-size: 0.85rem; margin: 0.7rem 0 0; }
.checkout-done { text-align: center; max-width: 480px; margin-inline: auto; padding: 2rem 0; }
.checkout-done h2 { margin-bottom: 0.6rem; }
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}
@media (max-width: 540px) {
  .checkout-field-grid { grid-template-columns: 1fr; }
  .checkout-field-grid .checkout-field-wide { grid-column: auto; }
}

/* ---------- Legal pages (impresszum / ászf / adatvédelem / elállás) ---------- */
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc h2 { margin-top: 2.6rem; font-size: 1.5rem; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { margin-top: 1.6rem; font-size: 1.1rem; color: var(--wine); }
.legal-doc p, .legal-doc li { color: var(--ink-soft); font-size: 0.98rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3rem; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-doc table th, .legal-doc table td { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--line); font-size: 0.92rem; }
.legal-doc table th { background: var(--cream-2); }
/* Anything that still needs the client's real business details or a
   lawyer's review before this page is actually complete — deliberately
   loud, so it can't be mistaken for a finished, ready-to-publish page. */
.legal-todo {
  background: rgba(194,160,90,0.14); border: 1px solid rgba(194,160,90,0.5);
  border-radius: var(--radius); padding: 1rem 1.3rem; margin: 1.2rem 0;
  font-size: 0.92rem; color: var(--ink);
}
.legal-todo strong { color: var(--wine); }
.legal-updated { font-size: 0.85rem; color: var(--ink-soft); margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }