/* Additions on top of the wellnwomen.site stylesheet (wnw.css). */
html, body { background: #161513; }
.mead-home { min-height: 100vh; }

/* page transition veil */
.gam-veil { position: fixed; inset: 0; z-index: 90; background: #161513; opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s; display: grid; place-items: center; }
.gam-veil.on { opacity: 1; visibility: visible; }
.gam-veil img { width: 74px; height: 74px; opacity: .85; animation: gamBreathe 1.6s ease-in-out infinite; }
@keyframes gamBreathe { 50% { transform: scale(1.06); opacity: .55; } }

/* toast */
.gam-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; display: flex; gap: 14px; align-items: center; padding: 14px 18px; max-width: calc(100vw - 32px);
  background: #22201c; color: #f3ead6; border: 1px solid rgba(214, 186, 128, .35); box-shadow: 0 14px 40px rgba(0,0,0,.45); font: 500 14px/1.4 Manrope, system-ui, sans-serif; }
.gam-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gam-toast a { color: #d9bf86; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* cart badge count (wellnwomen styles .ga-cart span) */
.ga-cart span[hidden] { display: none !important; }

/* farm photo grid (Miki's 13 photos, 19 Oct) */
.gam-farm { max-width: 1240px; margin: 0 auto; padding: 0 5% 96px; }
.gam-farm-day { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px 48px; padding: 44px 0; border-top: 1px solid var(--border); }
.gam-farm-date { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); }
.gam-farm-date b { display: block; font-weight: 400; font-size: 54px; line-height: .9; color: var(--primary); }
.gam-farm-date span { display: block; margin-top: 8px; font: 500 11px/1.4 var(--font-sans, Manrope, sans-serif); letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.gam-farm-date em { display: block; margin-top: 14px; font-size: 24px; }
.gam-farm-shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gam-farm-shots figure { margin: 0; grid-column: span 3; }
.gam-farm-shots figure.w { grid-column: span 6; }
.gam-farm-shots figure.p { grid-column: span 2; }
.gam-farm-shots button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.gam-farm-shots button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gam-farm-shots img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gam-farm-shots figure.p img { aspect-ratio: 9/16; }
.gam-farm-shots figcaption { padding-top: 8px; font-style: italic; font-size: 15px; opacity: .78; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); }
@media (max-width: 760px) {
  .gam-farm-day { grid-template-columns: 1fr; }
  .gam-farm-shots figure, .gam-farm-shots figure.w { grid-column: span 6; }
  .gam-farm-shots figure.p { grid-column: span 3; }
}
.gam-lb { position: fixed; inset: 0; z-index: 92; background: rgba(8, 7, 6, .96); display: grid; grid-template-rows: 1fr auto; padding: 56px 16px 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.gam-lb.open { opacity: 1; visibility: visible; }
.gam-lb img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; min-height: 0; }
.gam-lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; color: #f3ead6; }
.gam-lb-bar p { margin: 0; flex: 1; text-align: center; font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; }
.gam-lb button { background: none; border: 1px solid rgba(214, 186, 128, .4); color: #f3ead6; width: 42px; height: 42px; cursor: pointer; font-size: 18px; }
.gam-lb-close { position: absolute; top: 10px; right: 12px; }

/* cart page */
.gam-cart { max-width: 860px; margin: 0 auto; padding: 0 5% 110px; }
.gam-cart ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.gam-cart li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.gam-cart li img { width: 64px; height: 96px; object-fit: contain; }
.gam-cart h3 { margin: 0 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 26px; }
.gam-cart .gam-line { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.gam-cart .gam-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 1px solid var(--border); }
.gam-cart .gam-qty button { background: none; border: 0; color: inherit; width: 34px; height: 34px; cursor: pointer; font-size: 18px; }
.gam-cart .gam-qty output { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.gam-cart .gam-price { font-variant-numeric: tabular-nums; font-size: 18px; text-align: right; }
.gam-cart .gam-remove { display: block; margin-top: 8px; background: none; border: 0; color: inherit; opacity: .65; text-decoration: underline; cursor: pointer; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gam-cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 26px 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; }
.gam-cart-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.gam-cart-note { opacity: .7; font-size: 14px; text-align: right; margin-top: 12px; }
.gam-cart-empty { text-align: center; padding: 40px 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-style: italic; opacity: .85; }

/* contact thank-you */
.gam-thanks { max-width: 640px; margin: 0 auto; padding: 36px; border: 1px solid var(--border); text-align: center; }
.gam-thanks h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 38px; margin: 0 0 10px; }
.gam-thanks p { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .gam-veil, .gam-toast { transition: none; }
}

/* ---------- page photographs (client, 21 Oct) ---------- */
/* Home: the farm in autumn behind the hero */
.mead-home[data-route=home] .mead-hero-media{background:#0d0b09 url(../img/bg-home.webp?v=202610250600) 50% 58%/cover no-repeat}
.mead-home[data-route=home] .mead-scene-canvas,.mead-home[data-route=home] .mead-motion-toggle{display:none}
.mead-home[data-route=home] .mead-hero-shade{background:
  linear-gradient(90deg,rgba(10,8,6,.86) 0%,rgba(10,8,6,.72) 28%,rgba(10,8,6,.30) 52%,rgba(10,8,6,0) 70%),
  linear-gradient(180deg,rgba(10,8,6,.40) 0%,rgba(10,8,6,0) 20%,rgba(10,8,6,0) 72%,var(--background) 100%)}
.mead-home[data-route=home] .mead-hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.mead-home[data-route=home] .mead-hero-bottles img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.mead-home[data-route=home] .mead-bottle-caption{color:#f3ead9;text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media (max-width:760px){
  .mead-home[data-route=home] .mead-hero-media{background-position:41% 50%}
  .mead-home[data-route=home] .mead-hero-shade{background:linear-gradient(180deg,rgba(10,8,6,.84) 0%,rgba(10,8,6,.62) 42%,rgba(10,8,6,.12) 62%,rgba(10,8,6,.18) 82%,var(--background) 100%)}
}
/* Store + Contact: photograph behind the page, content on soft dark glass */
.mead-home[data-route=store]>main,.mead-home[data-route=contact]>main{position:relative;isolation:isolate}
.mead-home[data-route=store]>main:before,.mead-home[data-route=contact]>main:before{content:"";position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-size:cover}
.mead-home[data-route=store]>main:after,.mead-home[data-route=contact]>main:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.mead-home[data-route=store]>main:before{background-image:url(../img/bg-store.webp?v=202610250600);background-position:60% 42%}
.mead-home[data-route=store]>main:after{background:
  linear-gradient(90deg,rgba(10,8,6,.70) 0%,rgba(10,8,6,.35) 45%,rgba(10,8,6,.05) 75%),
  linear-gradient(180deg,var(--background) 0%,rgba(10,8,6,.10) 12%,rgba(10,8,6,.12) 55%,rgba(10,8,6,.55) 85%,var(--background) 100%)}
.mead-home[data-route=contact]>main:before{background-image:url(../img/bg-contact.webp?v=202610250600);background-position:50% 40%}
.mead-home[data-route=contact]>main:after{background:
  linear-gradient(90deg,rgba(10,8,6,.62) 0%,rgba(10,8,6,.30) 45%,rgba(10,8,6,0) 70%),
  linear-gradient(180deg,var(--background) 0%,rgba(10,8,6,.05) 12%,rgba(10,8,6,.05) 75%,var(--background) 100%)}
.mead-home[data-route=store] .mead-page-hero,.mead-home[data-route=contact] .mead-page-hero{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.mead-home[data-route=store] .mead-page-lede,.mead-home[data-route=contact] .mead-page-lede{color:#e9dfcd}
.mead-home[data-route=store] .mead-product{background:rgba(14,11,8,.62);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border:1px solid rgba(255,236,200,.10);padding:22px 22px 26px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.mead-home[data-route=store] .mead-product-image{background:transparent}
.mead-home[data-route=contact] .mead-form{background:rgba(14,11,8,.62);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border:1px solid rgba(255,236,200,.10);padding:34px 34px 38px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
@media (max-width:760px){
  /* phone: show the whole photo across the top of the page (no heavy crop), then fade into the page */
  .mead-home[data-route=store]>main:before{background-size:100% auto;background-position:50% 0}
  .mead-home[data-route=store]>main:after{background:
    linear-gradient(90deg,rgba(10,8,6,.45) 0%,rgba(10,8,6,.12) 60%,rgba(10,8,6,0) 100%),
    linear-gradient(180deg,rgba(10,8,6,.25) 0,rgba(10,8,6,0) 18vw,rgba(10,8,6,0) 52vw,var(--background) 76vw,var(--background) 100%)}
  .mead-home[data-route=contact]>main:before{background-position:50% 30%}
  .mead-home[data-route=contact] .mead-form{padding:24px 20px 28px}
  .mead-home[data-route=store] .mead-product{padding:18px 16px 22px}
}

/* ---------- 19+ age check (client, 21 Oct) ---------- */
html.gam-age-lock, html.gam-age-lock body { overflow: hidden; }
.gam-age { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px 16px; background: #0e0c0a; overflow: auto;
  transition: opacity .45s ease, visibility .45s; }
.gam-age.out { opacity: 0; visibility: hidden; }
.gam-age::before { content: ""; position: fixed; inset: -40px; pointer-events: none; background: url(../img/bg-home.webp?v=202610250600) 50% 55% / cover no-repeat;
  filter: blur(14px) brightness(.5) saturate(1.1); transform: scale(1.04); }
.gam-age::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(14,12,10,.30), rgba(14,12,10,.86) 78%); }
.gam-age-card { position: relative; z-index: 1; width: min(460px, 100%); text-align: center; padding: 40px 34px 28px; color: #f3ead6;
  background: rgba(18,15,12,.74); border: 1px solid rgba(214,186,128,.28); box-shadow: 0 30px 80px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 14px/1.6 Manrope, system-ui, sans-serif; }
.gam-age-logo { width: 104px; height: 104px; display: block; margin: 0 auto 18px; }
.gam-age-eyebrow { margin: 0 0 22px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #d9bf86; }
.gam-age h2 { margin: 0 0 12px; font: 400 40px/1.1 "Cormorant Garamond", Georgia, serif; color: #f6efe1; }
.gam-age p { margin: 0 auto; max-width: 340px; color: #cfc3ad; }
.gam-age-btns { display: flex; gap: 12px; justify-content: center; margin: 28px 0 6px; }
.gam-age-btns button { min-width: 132px; height: 48px; padding: 0 22px; cursor: pointer; font: 600 12px/1 Manrope, system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.gam-age-yes { background: #d6ba80; color: #1a1712; border: 1px solid #d6ba80; }
.gam-age-yes:hover { background: #e4cb95; border-color: #e4cb95; }
.gam-age-no { background: transparent; color: #f3ead6; border: 1px solid rgba(243,234,214,.45); }
.gam-age-no:hover { border-color: #f3ead6; background: rgba(243,234,214,.06); }
.gam-age button:focus-visible { outline: 2px solid #f3ead6; outline-offset: 3px; }
.gam-age-sorry p { margin-bottom: 22px; }
.gam-age-link { background: none; border: 0; padding: 6px 4px; cursor: pointer; color: #d9bf86; font: 500 13px/1.4 Manrope, system-ui, sans-serif;
  text-decoration: underline; text-underline-offset: 3px; }
.gam-age-fine { margin-top: 26px !important; padding-top: 18px; border-top: 1px solid rgba(214,186,128,.18); font-size: 11px; letter-spacing: .06em; color: #a99d88 !important; }
@media (max-width: 480px) {
  .gam-age-card { padding: 32px 22px 22px; }
  .gam-age h2 { font-size: 32px; }
  .gam-age-logo { width: 88px; height: 88px; }
  .gam-age-btns button { min-width: 0; flex: 1; }
}

/* ---------- two bottle sizes per mead (client, 21 Oct) ---------- */
.gam-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mead-product-image.gam-pair { align-items: flex-end; gap: 18px; }
.mead-product-image.gam-pair img { height: 100%; width: auto; transition: transform .7s, opacity .35s, filter .35s; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.mead-product-image.gam-pair .gam-b200 { height: 86%; }  /* true-to-life: the 200 ml stands lower than the 750 ml */
.mead-product-image.gam-pair:hover img { transform: none; }
.mead-product-image.gam-pair[data-size="750"]:hover .gam-b750,
.mead-product-image.gam-pair[data-size="200"]:hover .gam-b200 { transform: translateY(-8px); }
.gam-size { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.gam-size label { flex: 1; position: relative; cursor: pointer; }
.gam-size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gam-size span { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); color: var(--foreground);
  font: 500 11px/1 var(--font-sans, Manrope, sans-serif); letter-spacing: .08em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; }
.gam-size b { font-weight: 600; color: var(--primary); letter-spacing: .02em; }
.gam-size label:hover span { border-color: var(--primary); }
.gam-size input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.gam-size input:checked + span b { color: var(--primary-foreground); }
.gam-size input:focus-visible + span { outline: 2px solid var(--foreground); outline-offset: 2px; }
.mead-pdp-info .gam-size { max-width: 360px; margin: 22px 0 18px; }
@media (max-width: 760px) {
  .mead-product-image.gam-pair { gap: 14px; }
}

/* ---------- story text under each mead scene: standing text only (client, 21 Oct) ---------- */
.mead-setting-crawl { display: none !important; }
.mead-setting-footer { justify-content: flex-end; }

/* ---------- Contact: rainbow visible between the heading and the form (client, 21 Oct) ---------- */
.mead-home[data-route=contact]>main:before { background-size: 100% auto; background-position: 50% -10vw; }
.mead-home[data-route=contact] .mead-page-hero { min-height: 54vw; box-sizing: border-box; }
.mead-home[data-route=contact]>main:after { background:
  linear-gradient(90deg, rgba(10,8,6,.58) 0%, rgba(10,8,6,.22) 34%, rgba(10,8,6,0) 52%),
  linear-gradient(180deg, var(--background) 0, rgba(10,8,6,.08) 6vw, rgba(10,8,6,0) 30vw, rgba(10,8,6,0) 58vw, rgba(10,8,6,.55) 90vw, var(--background) 120vw); }
@media (max-width: 760px) {
  .mead-home[data-route=contact]>main:before { background-size: 170% auto; background-position: 50% -4vw; }
  .mead-home[data-route=contact] .mead-page-hero { min-height: 112vw; }
  .mead-home[data-route=contact]>main:after { background:
    linear-gradient(180deg, rgba(10,8,6,.55) 0, rgba(10,8,6,.35) 40vw, rgba(10,8,6,0) 62vw, rgba(10,8,6,0) 108vw, rgba(10,8,6,.45) 140vw, var(--background) 200vw); }
}

/* mead pages, phones only (client 22-23 Oct): Miki's realistic tall pictures in their own proportions.
   Computers keep the previous wide scenes. */
@media (max-width: 760px) {
  .mead-setting[data-kind] { aspect-ratio: 1068 / 1472; }
}