/* =====================================================================
   Cave — loaded after classic/base.css, overrides only what differs.
   The barrel cellar by candlelight: near-black pages, cream text,
   wine red for bands, candle gold for fine lines, links and prices.
   Type: Playfair Display for titles and the menu, Figtree for the text.
   ===================================================================== */
:root {
  --cellar: #1A1614;          /* the page: near-black, warm */
  --barrel: #231D1A;          /* boxes and bands, one step lighter */
  --cellar-deep: #120F0E;     /* footer, form fields */
  --wine: #6E1E2B;            /* wine red: the price-list band */
  --gold: #C9A45C;            /* candle gold: fine lines, links, prices, the current menu entry */
  --cream: #EDE4D3;           /* the text */
  --ash: #A89F92;             /* quieter text: dates, labels */

  --color-header-bg: var(--cellar);
  --color-header-text: var(--cream);
  --color-accent: var(--gold);
  --color-page-bg: var(--cellar);
  --color-text: var(--cream);
  --color-footer-bg: var(--cellar-deep);
  --color-footer-text: #CFC5B5;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --surface: var(--cellar);
  --submenu-bg: var(--barrel);
  --submenu-hover-bg: var(--cellar-deep);
  --newsletter-bg: var(--barrel);
  --subfooter-bg: #0D0B0A;
  --muted: var(--ash);
  --line: rgba(237, 228, 211, .14);
  --radius: 0;
  --container: 1160px;

  --cave-logo-height: 96px;   /* the logo in the top bar */
  --page-fade-in: .55s;       /* candlelight: how long the new page takes to rise into focus */
  --page-fade-out: .35s;      /* candlelight: how long the old page takes to dim (app.js reads it from here) */
}

body { background: var(--cellar); color: var(--cream); font-size: 16px; line-height: 1.75; font-weight: 300; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
strong, b { font-weight: 500; }
::selection { background: var(--wine); color: var(--cream); }
:focus-visible { outline-color: var(--gold); }

/* ---------- Candlelight: changing page ----------
   The old page dims and softens, as if the candle were going out; the new one rises a few pixels
   into focus. Chrome, Edge and Safari do it themselves (@view-transition) by blending the two pages.
   Firefox: app.js adds "is-leaving" when a link is clicked; the same dimming is done below.
   The page is near-black, so nothing light ever shows in between. */
@view-transition { navigation: auto; }
@keyframes cave-candle-out { to { opacity: 0; filter: blur(6px) brightness(.55); } }
@keyframes cave-candle-in { from { opacity: 0; filter: blur(5px); transform: translateY(10px); } }
::view-transition-old(root) { animation: cave-candle-out var(--page-fade-out) ease-in both; }
::view-transition-new(root) { animation: cave-candle-in var(--page-fade-in) ease-out both; }
/* The Menu button stays where it is while the page changes. */
.cave-actions { view-transition-name: cave-actions; }
html:has(.cave-curtain[open]) .cave-actions { view-transition-name: none; }   /* leaving from the curtain: everything dims */

/* Firefox (and the first page of a visit): the new page rises into focus by itself.
   ":root" wins over classic's own short fade (".has-fade .site-main"); "backwards" lets the dimming below take over. */
:root .site-main, :root .site-footer, :root .cave-top { animation: cave-candle-in var(--page-fade-in) ease-out backwards; }
.site-main, .site-footer, .cave-top { transition: opacity var(--page-fade-out) ease-in, filter var(--page-fade-out) ease-in; }
html.is-leaving .site-main, html.is-leaving .site-footer, html.is-leaving .cave-top,
html.is-leaving .cave-curtain[open] { opacity: 0; filter: blur(6px) brightness(.55); transition: opacity var(--page-fade-out) ease-in, filter var(--page-fade-out) ease-in; }
/* When the browser is blending the pages itself, the new page must not also rise by itself. */
html:active-view-transition .site-main, html:active-view-transition .site-footer, html:active-view-transition .cave-top { animation: none; }
html.arrived-by-cross-fade .site-main, html.arrived-by-cross-fade .site-footer, html.arrived-by-cross-fade .cave-top { animation: none; }

/* ---------- Top bar: the logo, centred ---------- */
.cave-top { background: var(--cellar); text-align: center; padding: 22px var(--gutter) 18px; border-bottom: 1px solid var(--line); }
.cave-top__brand { display: inline-block; text-decoration: none; color: var(--cream); }
.cave-top__brand img { height: var(--cave-logo-height); width: auto; margin-inline: auto; }
.cave-top__brand span { font-family: var(--font-heading); font-size: 28px; letter-spacing: .02em; }

/* The Menu button (and the cart when it holds bottles): top right, always visible. */
.cave-actions { position: fixed; top: 18px; right: var(--gutter); z-index: 70; display: flex; gap: 10px; align-items: center; }
.cave-actions__menu, .cave-actions__cart {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: rgba(26, 22, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 164, 92, .55); color: var(--cream); font-size: 14px; letter-spacing: .04em; text-decoration: none;
}
.cave-actions__menu:hover, .cave-actions__cart:hover { border-color: var(--gold); color: var(--gold); }
.cave-actions__lines, .cave-actions__lines::before { display: block; width: 20px; height: 1px; background: currentColor; position: relative; }
.cave-actions__lines::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; }
.cave-actions__lines { margin-top: -6px; }
.badge { background: var(--gold); color: var(--cellar); }

/* ---------- The curtain: the full-screen menu ---------- */
html:has(.cave-curtain[open]) { overflow: hidden; }   /* the page behind does not scroll */
.cave-curtain {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--cellar); color: var(--cream); overflow-y: auto;
}
.cave-curtain::backdrop { background: var(--cellar); }
.cave-curtain[open] { animation: cave-curtain-in .45s ease-out; }
@keyframes cave-curtain-in { from { opacity: 0; } }
.cave-curtain__inner {
  min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 30px;
  padding: 26px clamp(24px, 7vw, 110px) 34px;
  /* A warm glow, like a candle on the left of the room. */
  background: radial-gradient(ellipse 55% 60% at 22% 48%, rgba(201, 164, 92, .11), transparent 70%), var(--cellar);
}
.cave-curtain__top { display: flex; justify-content: space-between; align-items: center; }
.cave-curtain__name { font-family: var(--font-heading); font-size: 18px; color: var(--ash); }
.cave-curtain__close { background: none; border: 1px solid rgba(201, 164, 92, .55); color: var(--cream); width: 46px; height: 46px; font-size: 26px; line-height: 1; }
.cave-curtain__close:hover { color: var(--gold); border-color: var(--gold); }
.cave-curtain__nav { align-self: center; }

/* "#dialog-menu" makes these rules stronger than classic's top-bar menu rules,
   so nothing slides or jumps. */
#dialog-menu .menu--l1 { display: block; position: relative; width: min(100%, 480px); }
#dialog-menu .menu--l1 > .menu__item { display: flex; align-items: center; border: 0; }
#dialog-menu .menu--l1 > .menu__item > a {
  flex: 1; padding: 6px 0; font-family: var(--font-heading); font-size: clamp(30px, 4vw, 50px); line-height: 1.2;
  text-transform: none; letter-spacing: 0; color: var(--cream); text-decoration: none; transition: color .25s;
}
#dialog-menu .menu--l1 > .menu__item:hover > a,
#dialog-menu .menu--l1 > .menu__item:focus-within > a,
#dialog-menu .menu--l1 > .menu__item.is-active > a { color: var(--gold); }
/* Entries rise in one after the other when the curtain opens. */
.cave-curtain[open] .menu--l1 > .menu__item { animation: cave-entry-in .5s ease-out backwards; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(2) { animation-delay: .05s; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(3) { animation-delay: .1s; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(4) { animation-delay: .15s; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(5) { animation-delay: .2s; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(6) { animation-delay: .25s; }
.cave-curtain[open] .menu--l1 > .menu__item:nth-child(n+7) { animation-delay: .3s; }
@keyframes cave-entry-in { from { opacity: 0; transform: translateY(8px); } }

/* The small + beside an entry with sub-pages (for touch screens and the keyboard). */
#dialog-menu .menu__open { display: block; flex: none; width: 40px; height: 40px; background: none; border: 0; color: var(--gold); }
#dialog-menu .menu__open::before { content: "+"; font-size: 22px; }
#dialog-menu .menu__open[aria-expanded="true"]::before { content: "–"; }

/* Sub-pages: in a column to the right of their entry, on the same line.
   Shown when the mouse is on the entry, when it is opened with +, or for the current page's entry. */
#dialog-menu .menu--l2,
#dialog-menu .menu__item:hover > .menu--l2,
#dialog-menu .menu__item:focus-within > .menu--l2 {
  position: absolute; left: 100%; top: 0; transform: none; transition: opacity .25s, visibility 0s;
  width: max-content; max-width: min(420px, 40vw); min-width: 0; margin: 0; padding: 14px 0 0 64px;
  background: none; box-shadow: none; opacity: 0; visibility: hidden; display: block;
}
#dialog-menu .menu__item.is-open > .menu--l2,
#dialog-menu .menu__item.is-active > .menu--l2,
#dialog-menu .menu__item:hover > .menu--l2,
#dialog-menu .menu__item:focus-within > .menu--l2 { opacity: 1; visibility: visible; }
/* While the mouse is on another entry, only that entry's sub-pages show. */
#dialog-menu .menu--l1:hover > .menu__item:not(:hover) > .menu--l2 { opacity: 0; visibility: hidden; }
#dialog-menu .menu--l2 a {
  display: block; padding: 5px 0; border: 0; background: none; font-size: 17px; text-transform: none; letter-spacing: .01em;
  color: var(--ash); text-decoration: none;
}
#dialog-menu .menu--l2 a:hover, #dialog-menu .menu--l2 .is-active > a { color: var(--gold); background: none; }

/* Languages, account, cart and phone at the bottom of the curtain. */
.cave-curtain__tools { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding-top: 22px; border-top: 1px solid rgba(201, 164, 92, .25); font-size: 15px; }
.cave-curtain__tools a { color: var(--ash); text-decoration: none; }
.cave-curtain__tools a:hover, .cave-curtain__tools .langs a[aria-current] { color: var(--gold); }
.cave-curtain__tools .langs { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }

/* ---------- Buttons, links, titles ---------- */
.btn { text-transform: none; letter-spacing: .03em; font-size: 15px; font-weight: 400; }
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--cellar); }
.btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--cellar); }
.btn--outline { border-color: var(--gold); color: var(--gold); }
.btn--outline:hover { background: var(--gold); color: var(--cellar); }
.btn--light { color: var(--cream); border-color: var(--cream); }
.btn--light:hover { background: var(--cream); color: var(--cellar); }
.prose a, .page-text a, .card__more { color: var(--gold); }
.subpages a, .ranges a { text-transform: none; letter-spacing: 0; border-color: var(--gold); color: var(--gold); }
.subpages a:hover, .ranges a:hover { background: var(--gold); color: var(--cellar); }

.page-head { background: var(--cellar); color: var(--cream); padding: 64px 0 34px; text-align: center; }
.page-head__title { text-transform: none; letter-spacing: 0; font-size: clamp(36px, 5vw, 62px); line-height: 1.08; }
.page-head:not(.page-head--photo) .page-head__title::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 24px auto 0; }
.page-head__kicker { color: var(--gold); text-transform: none; letter-spacing: .02em; font-size: 16px; }
.section-title { text-transform: none; letter-spacing: 0; font-size: clamp(30px, 3.4vw, 42px); }
.breadcrumb, .card__date, .card__more, .range-tabs, .wine-detail__appellation { text-transform: none; letter-spacing: .01em; }
.breadcrumb { color: var(--ash); }

/* ---------- Content ---------- */
.presentation, .page-section, .news-strip, .wines-strip, .ranges-strip { background: var(--cellar); }
.presentation__title { font-size: clamp(38px, 5vw, 66px); line-height: 1.06; text-transform: none; }
.news-strip--alt { background: var(--barrel); }
.card { border: 0; background: transparent; }
.card__body { padding: 16px 0 0; }
.card__title { font-size: 24px; }
.card__date { color: var(--ash); }
.price-band { background: var(--wine); color: var(--cream); }
.price-band__title { text-transform: none; letter-spacing: 0; font-size: 34px; }
.gallery-tile__title { font-family: var(--font-heading); }

/* ---------- The wines: bottles under a soft spotlight ---------- */
.wines-page:not(.has-bg), .wine-detail:not(.has-bg) { background: var(--cellar); }
.wines-page__title { text-transform: none; letter-spacing: 0; font-size: clamp(34px, 4.6vw, 56px); }
.range-tabs a[aria-current], .range-tabs a:hover { border-color: var(--gold); color: var(--gold); }
.range__title { text-transform: none; letter-spacing: 0; font-size: 34px; border-bottom: 1px solid rgba(201, 164, 92, .4); padding-bottom: 12px; }
.wine-grid { gap: 48px 32px; }
.wine-card__media {
  display: block; padding: 26px 0 0; margin-bottom: 16px;
  background: radial-gradient(ellipse 60% 55% at 50% 62%, rgba(201, 164, 92, .2), transparent 72%);
}
.wine-card__media img { height: 300px; margin-bottom: 0; }
.wine-card__name { font-family: var(--font-heading); font-size: 22px; text-transform: none; letter-spacing: 0; }
.wine-card__price { color: var(--gold); }
.wine-detail__image { background: radial-gradient(ellipse 55% 50% at 50% 60%, rgba(201, 164, 92, .18), transparent 72%); padding: 40px 0; }
.wine-detail__name { text-transform: none; letter-spacing: 0; font-size: clamp(36px, 4.8vw, 60px); }
.wine-detail__appellation { color: var(--gold); font-size: 16px; }
.wine-detail__meta span + span::before { content: "/"; }
.wine-detail__punchline { border-color: var(--gold); }
.wine-text h2 { text-transform: none; letter-spacing: 0; font-family: var(--font-heading); font-size: 24px; color: var(--gold); }
.buy-box { background: var(--barrel); }
.buy-box__price { color: var(--gold); font-family: var(--font-heading); }
.related { border-top: 1px solid var(--line); padding-top: 50px; }

/* The background photo: as wide as the page, at the top, never stretched in height; the cellar below it. */
.wines-page.has-bg, .wine-detail.has-bg { background: var(--cellar) var(--bg) center top / 100% auto no-repeat; }
.has-bg .range__title { border-color: rgba(237, 228, 211, .4); }
/* One wine's page on a photo: the texts on a dark panel, so they stay readable over the photo. */
.wine-detail.has-bg .wine-detail__info,
.wine-detail.has-bg .wine-text,
.wine-detail.has-bg .breadcrumb { background: rgba(26, 22, 20, .84); padding: 22px 26px; text-shadow: none; }
.wine-detail.has-bg .breadcrumb { display: inline-block; padding: 6px 14px; }
.wine-detail.has-bg .wine-detail__texts { border-top: 0; }
.wine-detail.has-bg .wine-detail__image { background: transparent; }
.has-bg .wine-card__price, .has-bg .wine-detail__appellation { color: var(--gold); }
.has-bg .btn--outline { color: var(--gold); border-color: var(--gold); }
.has-bg .btn--outline:hover { background: var(--gold); color: var(--cellar); }
.has-bg .share__link:hover, .has-bg .share__link:focus-visible { background: var(--gold); color: var(--cellar); }

/* ---------- Forms: dark fields with cream text (contact, price list, account, cart, store locator) ---------- */
:is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]):not([type=button]), select, textarea) {
  background: var(--cellar-deep); color: var(--cream); border: 1px solid rgba(237, 228, 211, .25); border-radius: 0; text-shadow: none;
}
:is(input, select, textarea):focus { border-color: var(--gold); outline: none; }
input[readonly] { opacity: .7; }
::placeholder { color: rgba(168, 159, 146, .7); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }
.form-grid label, .account-box label, .dialog__form label, .promo-form label, .contact-form label { color: var(--ash); text-transform: none; letter-spacing: .01em; font-size: 14px; }

/* ---------- Shop ---------- */
.shop { background: var(--cellar); }
.shop h2 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; }
.cart-summary, .account-box { background: var(--barrel); }
.cart-table th { text-transform: none; letter-spacing: 0; font-size: 14px; }
.totals__total { font-family: var(--font-heading); font-size: 24px; color: var(--gold); }
.totals__discount { color: #A9C79B; }
.cart-problem { color: #E7A595; }

/* ---------- Messages ("added to your cart"…) ---------- */
.flash--ok { background: #1F2A1C; color: #CFE3C6; }
.flash--info { background: #1C2229; color: #CDD9E6; }
.flash--error { background: #2E1714; color: #F0C4BB; }

/* ---------- Footer ---------- */
.newsletter-band { background: var(--barrel); color: var(--cream); }
.newsletter-band__title, .footer-title { font-family: var(--font-heading); text-transform: none; letter-spacing: 0; }
.newsletter-band__title { font-size: 24px; }
.footer-title { color: var(--gold); font-size: 24px; }
.footer-col a:hover { color: var(--gold); }
.subfooter__evin { letter-spacing: .02em; }

/* ---------- Dialogs (price list, newsletter) and the "Are you 18?" screen ---------- */
.dialog { background: var(--barrel); color: var(--cream); border: 1px solid rgba(201, 164, 92, .3); }
.dialog::backdrop { background: rgba(13, 11, 10, .85); }
.dialog__form h2 { font-family: var(--font-heading); }
.dialog__close { color: var(--cream); }
.dialog__notice { background: rgba(201, 164, 92, .12); border-left-color: var(--gold); color: var(--cream); }
.age-gate { background: rgba(13, 11, 10, .97); }
.age-gate__box { background: var(--barrel); color: var(--cream); border: 1px solid rgba(201, 164, 92, .3); }
.age-gate__title { font-family: var(--font-heading); text-transform: none; font-size: 32px; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  :root { --cave-logo-height: 64px; }
  .cave-top { text-align: left; padding: 14px var(--gutter); }
  .cave-actions { top: 14px; }
  .cave-actions__cart { display: none; }   /* the cart is in the curtain */
  .wine-card__media img { height: 230px; }

  /* The curtain: entries one under the other; sub-pages open under their entry with +. */
  .cave-curtain__inner { padding: 20px var(--gutter) 28px; }
  #dialog-menu .menu--l1 { width: 100%; }
  #dialog-menu .menu--l1 > .menu__item { flex-wrap: wrap; border: 0; }
  #dialog-menu .menu--l1 > .menu__item > a { padding: 6px 0; font-size: 30px; }
  #dialog-menu .menu--l2,
  #dialog-menu .menu__item:hover > .menu--l2,
  #dialog-menu .menu__item:focus-within > .menu--l2,
  #dialog-menu .menu__item.is-active > .menu--l2 {
    position: static; display: none; width: 100%; max-width: none; padding: 0 0 12px 16px; opacity: 1; visibility: visible;
  }
  #dialog-menu .menu__item.is-open > .menu--l2 { display: block; }
  #dialog-menu .menu--l1:hover > .menu__item:not(:hover) > .menu--l2 { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root .site-main, :root .site-footer, :root .cave-top,
  .cave-curtain[open], .cave-curtain[open] .menu--l1 > .menu__item { animation: none; transition: none; }
}