/* Gift-search pages (wedding gifts, housewarming gifts, ...). The reel, reviews, FAQ and gift cards come from
   sections.css, copied from the homepage by scripts/sections.py; this file holds the page's own parts. */
:root { --ink:#231F20; --silver:#BCBEC0; --muted:#5E5A5B; --rule:#DCDDDF; --mist:#F4F4F5; --paper:#fff; --display:"Libre Bodoni", Didot, serif; --stage-h:min(100vh, 900px); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Jost, system-ui, sans-serif; font-size:15px; line-height:1.65; }
h2 { font-family:var(--display); font-weight:400; }
.eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--muted); }
.btn { font:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:#fff; border:0; padding:16px 26px; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; }
.btn:hover:not(:disabled) { background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }

/* ---- shop: one large picture with thumbnails beside the letter picker, on white ---- */
.gp-shop { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:48px; background:var(--paper); }
.gp-hero { --s:min(100%, calc((var(--stage-h) - var(--nav-h) - 96px) * .8));   /* picture + thumbnails (1.25 × s) leave 48px of air above and below */
  width:var(--s); justify-self:end; min-width:0; }
.gp-stage { position:relative; width:100%; aspect-ratio:1/1; background:var(--mist); overflow:hidden; }
.gp-slide { position:absolute; inset:0; display:none; }
.gp-slide.on { display:block; }
.gp-slide > img, .gp-slide > video { width:100%; height:100%; object-fit:cover; display:block; }
.gp-pair { position:relative; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:22%; padding:10% 8% 8%; box-sizing:border-box; }
.gp-pair img { height:100%; width:auto; max-width:38%; object-fit:contain; }
.gp-mid { position:absolute; left:50%; top:62%; transform:translate(-50%, -50%); display:grid; place-items:center; }   /* level with the letters on the labels */
.gp-heart { width:clamp(32px, 3.4vw, 56px); height:auto; color:var(--ink); }
.gp-pair.gp-one img { max-width:60%; }   /* one-letter pages: a single bottle, centred */
.gp-packs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 24px; }
.gp-packs button { font:inherit; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:12px 8px; border:1px solid var(--rule); background:#fff; color:var(--ink); cursor:pointer; }
.gp-packs button[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.gp-thumbs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:8px; }
.gp-thumb { position:relative; padding:0; border:1px solid transparent; background:var(--mist); aspect-ratio:1/1; cursor:pointer; overflow:hidden; }
.gp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gp-thumb:first-child img { object-fit:contain; padding:8px; box-sizing:border-box; }
.gp-thumb.on { border-color:var(--ink); }
.gp-thumb i { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-style:normal; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.cp-info { max-width:480px; display:grid; gap:0; position:sticky; top:calc(var(--nav-h) + 24px); }
.cp-info > .eyebrow { margin-bottom:24px; }
.cp-info h1 { margin:0 0 16px !important; }
.cp-info > p { margin:0 0 16px; }
.cp-info > .cp-for { margin-bottom:24px; }
.cp-info .cp-pick, .cp-info .cp-selects { margin-bottom:24px; }
.cp-info .gp-packs + .cp-meta, .cp-info .cp-selects + .gp-packs { margin-top:0; }
.cp-info .cp-meta { margin:0 0 16px; color:var(--muted); font-size:13px; }
.cp-info h1 { font-family:var(--display); font-weight:400; font-size:clamp(30px, 3.6vw, 44px); line-height:1.08; margin:0; }
.cp-info p { color:var(--muted); }
.cp-for { font-size:12.5px; letter-spacing:.04em; }
.cp-price { display:flex; align-items:baseline; gap:12px; }
.cp-price b { font-family:var(--display); font-weight:500; font-size:26px; }
.cp-price span { color:var(--muted); font-size:13px; }
.cp-pick { display:grid; gap:8px; }
.cp-lab { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.cp-lab:first-child { margin-top:0; }
.f1-letters { display:grid; grid-template-columns:repeat(13, minmax(0,1fr)); gap:4px; }
.f1-letters button { font-family:var(--display); font-size:16px; padding:6px 0; border:1px solid var(--rule); background:#fff; cursor:pointer; color:var(--ink); }
.f1-letters button[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.cp-selects { display:none; }
.letter-select { height:44px; border:1px solid var(--ink); border-radius:0; background:#fff; padding:0 12px; font:inherit; font-size:14px; color:var(--ink); }
/* the homepage's "Also available on Amazon" line (index.html .o1-cta .amz), centred 16px under the button */
.gp-amz { display:block; margin:16px 0 0; font-size:13px; text-align:center; color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--silver); }
.gp-amz:hover { text-decoration-color:var(--ink); }
.cp-info > .gp-trust { margin:16px 0 0; font-size:12.5px; letter-spacing:.02em; text-align:center; }

/* ---- why it works: dark band, white line drawing (no photos on black) ---- */
.gp-why { background:var(--ink); color:#fff; text-align:center; padding:64px 48px; }
.gp-why .gp-art { display:block; width:100%; max-width:560px; height:auto; margin:0 auto 48px; color:#fff; }
.gp-why .gp-glyph { font-family:var(--display); font-size:29px; fill:currentColor; }
.gp-why .eyebrow { display:block; margin-bottom:24px; color:rgba(255,255,255,.6); }
.gp-why h2 { font-size:clamp(30px, 3.6vw, 44px); line-height:1.08; margin:0 0 48px; }
.gp-points { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px; max-width:1040px; margin:0 auto; text-align:left; }
.gp-points h3 { font-family:var(--display); font-weight:400; font-size:21px; line-height:1.25; margin:0 0 8px; }
.gp-points p { color:rgba(255,255,255,.72); margin:0; font-size:14.5px; }
.gp-facts { margin:48px 0 0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.gp-cta { margin:32px 0 0; text-align:center; }
/* the inner pages' one button size: 280 wide, 16/24 padding (chrome.css .pt-btn), here in white on black */
.gp-btn-light { display:inline-block; width:280px; max-width:100%; padding:16px 24px; box-sizing:border-box; text-align:center; text-decoration:none; background:#fff; color:var(--ink); }
.gp-btn-light:hover:not(:disabled) { background:transparent; color:#fff; box-shadow:inset 0 0 0 1px #fff; }

/* ---- screens: like the homepage, every section is exactly one screen tall under the header, and scrolling
   settles on whole screens (gift-pages.js on computers, CSS snapping on phones). --stage-h is the window height. ---- */
.gp-shop, .gp-why { height:calc(var(--stage-h) - var(--nav-h)); box-sizing:border-box; overflow:hidden; }
.gp-shop { padding:32px 48px; grid-template-rows:minmax(0,1fr); }   /* one row the height of the screen, so the picture stays centred in it */
.cp-info { position:static; }
.gp-why { display:flex; flex-direction:column; justify-content:center; padding:48px; }
.gp-why .gp-art { max-height:calc((var(--stage-h) - var(--nav-h)) * .3); width:auto; max-width:100%; margin-bottom:32px; }
.gp-why h2 { margin-bottom:32px; }
.gp-facts { margin-top:32px; }
.gifts-screen.gp-gifts { box-sizing:border-box; justify-content:center; padding:64px 48px; gap:32px; border-top:1px solid var(--rule); }
.gifts-screen.gp-gifts .gs-occ { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; max-width:none; }
.gifts-screen.gp-gifts .go-item { border-bottom:0; }   /* the homepage gift list has no end rules */
.reviews-screen .rv-hist { gap:8px; }

/* when the text column is taller than its screen, gift-pages.js (fitShop) steps it down: a compact heading, then no occasions line */
.gp-tight .cp-info h1 { font-size:clamp(28px, 2.8vw, 34px); }
.gp-tight .f1-letters button { padding:3px 0; font-size:15px; }
.gp-tight .cp-info > .eyebrow { margin-bottom:16px; }
.gp-tighter .cp-info > .cp-for { display:none; }

@media (max-width:760px) {
  html { scroll-snap-type:y mandatory; }
  .gp-shop, .reel, .gp-why, .reviews-screen, .faq, .gp-end, .site-foot { scroll-snap-align:start; scroll-margin-top:var(--nav-h); scroll-snap-stop:always; }
  .gp-shop { grid-template-columns:minmax(0,1fr); grid-template-rows:none; align-content:start; padding:16px; gap:16px; height:auto; min-height:calc(var(--stage-h) - var(--nav-h)); overflow:visible; }   /* as the homepage's phone shop (.o1 min-height): never clips the button or the Amazon link */
  .gp-hero { --s:calc((var(--stage-h) - var(--nav-h)) * .3); justify-self:center; }
  .gp-thumbs { gap:4px; }
  .cp-info > .cp-for { display:none; }   /* as on the homepage phone shop */
  .cp-info { position:static; text-align:center; justify-items:center; gap:0; }
  .cp-pick { display:none; }
  .cp-selects { display:flex; align-items:center; gap:8px; width:100%; }
  .cp-selects .letter-select { flex:1; }
  .gp-packs { width:100%; }
  .cp-and { font-family:var(--display); font-size:24px; }
  .gp-shop .btn { width:100%; }
  .gp-why { padding:32px 16px; }
  .gp-why .gp-art { max-height:calc((var(--stage-h) - var(--nav-h)) * .22); margin-bottom:24px; }
  .gp-why .eyebrow { margin-bottom:16px; }
  .gp-why h2 { margin-bottom:24px; }
  .gp-points { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; margin-inline:-16px; padding-inline:16px; scrollbar-width:none; }
  .gp-points::-webkit-scrollbar { display:none; }
  .gp-points > div { flex:0 0 84%; scroll-snap-align:center; }
  .gp-facts { margin-top:24px; }
  .gp-cta { margin-top:24px; }
  .gp-btn-light { width:100%; }
  .gifts-screen.gp-gifts { padding:48px 16px; }
  .gifts-screen.gp-gifts .gs-occ { grid-template-columns:minmax(0,1fr); }
}
.toast a { color:#fff; text-decoration:underline; }
.toast[hidden] { display:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }