/* AIWine — browse components (regions + catalogue).
   Extracted from index.html so the dedicated Regions and Wines pages share the
   exact same card/grid styling. Loaded alongside styles.css on those pages. */

/* Section frame */
.section { padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 32px; flex-wrap: wrap; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: var(--t-h1); font-weight: 400; line-height: 1.05; max-width: 640px; letter-spacing: -0.01em; }
.section-title em { font-style: italic; color: var(--claret); }
.section-sub { max-width: 380px; color: var(--ink-soft); font-size: 15px; }
.section-cta { margin-top: 44px; display: flex; justify-content: center; }

/* Compact page hero for browse pages */
.browse-hero { padding: clamp(56px, 8vw, 104px) var(--pad-x) clamp(28px, 4vw, 48px); position: relative; }
.browse-hero-ring { position: absolute; top: 0; right: clamp(16px, 4vw, 60px); width: clamp(150px, 20vw, 300px); height: auto; opacity: 0.7; pointer-events: none; z-index: 0; }
.browse-hero > *:not(.browse-hero-ring) { position: relative; z-index: 1; }
@media (max-width: 760px) { .browse-hero-ring { display: none; } }
.browse-hero .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink); display: inline-flex; align-items: center; gap: 9px; }
.browse-hero .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--brass); }
.browse-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(38px, 6vw, 68px); line-height: 1.03; letter-spacing: -0.015em; margin: 16px 0 0; max-width: 16ch; }
.browse-hero h1 em { font-style: italic; color: var(--claret); }
.browse-hero p { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--ink-soft); max-width: 58ch; margin: 18px 0 0; }

/* REGIONS */
.regions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .regions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .regions-grid { grid-template-columns: 1fr; } }
.region-card { background: var(--card); padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; transition: background 0.2s; position: relative; cursor: pointer; }
.region-card.soon { cursor: default; }
.region-card.live:hover, .region-card.directory:hover { background: var(--bg-alt); }
.region-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.region-tag.live { background: var(--claret); color: var(--bg); }
.region-tag.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-soft); animation: pulse 2s infinite; }
.region-tag.soon { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.region-tag.directory { background: var(--bg-alt); color: var(--brass-ink); border: 1px solid var(--brass-soft); }
.region-tag.directory::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.region-name { font-family: 'Cormorant Garamond', serif; font-size: 36px; line-height: 1.05; font-weight: 400; }
.region-tag-line { color: var(--ink-soft); font-size: 14px; flex: 1; }
.region-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; margin-top: auto; }
.region-cta.live, .region-cta.directory { color: var(--claret); }
.region-cta.soon { color: var(--muted); }
.region-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--region-accent, var(--line)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.region-card.live:hover .region-accent, .region-card.directory:hover .region-accent { transform: scaleX(1); }
.region-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-height: 0; padding: 28px 32px; gap: 28px; }
.region-card.wide .rc-wide-main { display: flex; flex-direction: column; gap: 8px; }
.region-card.wide .region-name { font-size: 30px; }
.region-card.wide .region-tag-line { flex: none; max-width: 520px; }
.region-card.wide .region-cta { margin-top: 0; white-space: nowrap; }
@media (max-width: 560px) { .region-card.wide { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* CATALOGUE / WINES */
.featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .featured-grid { grid-template-columns: 1fr; } }
.wine-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); transition: box-shadow 0.3s; }
.wine-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

/* tinted shelf that stands a bottle */
.wine-shot { aspect-ratio: 4/5; position: relative; overflow: hidden; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 80% at 50% 8%, #FBF7EF 0%, #F1E9D8 55%, #E6DAC2 100%); }
.wine-shot::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(92,27,39,0.14); pointer-events: none; z-index: 3; }
/* ground glow removed — the bottle's own drop-shadow is the only shadow now */
.wine-shot::after { content: none; }
.wine-shot-meta { position: relative; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.9; }
.wine-shot-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.9; }
/* The bottle stands ABOVE the pin band (14 Sep 2026).
   ---------------------------------------------------------------
   bottom: 3% put the bottle's base in the same 16px strip as .wine-pins.
   With a one-word "Awarded" pin the overlap was small enough to read as
   deliberate; with a real award name ("DOUBLE GOLD · 98 PTS") the label runs
   under the glass. The pin states a fact about the wine, so the layout has to
   reserve room for it rather than hope it is short.

   transform-origin is 50% 100%, so the hover scale grows the bottle UPWARD
   from its base — lifting the base clear of the band keeps it clear at every
   scale, with no separate hover rule to keep in step.

   MEASURED off the live page, 14 Sep 2026 (not inferred — four rounds of
   inferring these numbers all landed wrong). Shelf runs y 88–478px, so 390px
   tall. Off that:

       award pin band top  y≈444  →  9% from the shelf floor
       region chip underside y≈143  →  86% from the floor

   So the bottle's usable band is bottom 14% → top 84% — **70% of shelf**, and
   the scale has to come out of that.

   ORIGIN 50% 50%, not 50% 100%. With a base origin the whole scale is spent
   upward, so 1.03 was all the shelf could afford and it read as nothing. From
   the centre the growth splits both ways, so the same ceiling buys roughly
   double the visible movement:

       hovered top  = bottom + height + (scale−1)×height/2
                    = 14 + 66 + 2.6  =  82.6%    ≤ 84 ✓
       hovered base = bottom − (scale−1)×height/2
                    = 14 − 2.6      =  11.4%    ≥ 9 ✓

   The base rising is why this works twice over: growing downward would reach
   for the pin, and at 1.08 it stops 2% short of it.

   Both ends are live constraints now — raise the scale and check the FLOOR as
   well as the ceiling. */
.wine-bottle { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); height: 66%; width: auto; max-width: 72%; object-fit: contain; object-position: center bottom; z-index: 2;
  transform-origin: 50% 50%; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.22));
  transition: transform 0.35s ease; }
/* 1.02, not 1.06 or 1.12 (14 Sep 2026).
   The bottle is the subject of the card and shrinking it to buy hover headroom
   made every card worse to pay for one hovered state. The SCALE is the cheap
   variable: at 1.02 the bottle keeps its original 82% height and its hovered
   top is 8 + 1.02×82 = 91.6%, and the lift reads as a lift rather than a lunge.
   Raise this and the height must come down to match — see the note above. */
/* 1.08 from a CENTRE origin — see the derivation above. Roughly 2.6x the
   movement of the old 1.03, for the same headroom, because half the growth goes
   down into shelf the pin is not using. */
.wine-shot:hover .wine-bottle, .wine-shot:active .wine-bottle { transform: translateX(-50%) scale(1.08); z-index: 6; }
/* wobble briefly, then rest — and stagger duration + delay so no two swirl together */
@keyframes tasteWobble {
  0%      { transform: translateX(-50%) rotate(0deg); }
  3%      { transform: translateX(-50.5%) rotate(-0.9deg); }
  6.5%    { transform: translateX(-49.6%) rotate(0.7deg); }
  9.5%    { transform: translateX(-50.2%) rotate(-0.3deg); }
  12.5%   { transform: translateX(-50%) rotate(0deg); }
  100%    { transform: translateX(-50%) rotate(0deg); }
}
.wine-card:nth-child(8n+1) .wine-bottle { --wob-dur: 13s; --wob-delay: 0s; }
.wine-card:nth-child(8n+2) .wine-bottle { --wob-dur: 17s; --wob-delay: 3.4s; }
.wine-card:nth-child(8n+3) .wine-bottle { --wob-dur: 15s; --wob-delay: 6.1s; }
.wine-card:nth-child(8n+4) .wine-bottle { --wob-dur: 19s; --wob-delay: 1.7s; }
.wine-card:nth-child(8n+5) .wine-bottle { --wob-dur: 14s; --wob-delay: 8.3s; }
.wine-card:nth-child(8n+6) .wine-bottle { --wob-dur: 18s; --wob-delay: 4.6s; }
.wine-card:nth-child(8n+7) .wine-bottle { --wob-dur: 16s; --wob-delay: 10.2s; }
.wine-card:nth-child(8n+8) .wine-bottle { --wob-dur: 20s; --wob-delay: 2.5s; }
@keyframes tasteWobbleHover {
  0%,100% { transform: translateX(-50%) rotate(0deg); }
  25%     { transform: translateX(-50.8%) rotate(-1.3deg); }
  75%     { transform: translateX(-49.2%) rotate(1.3deg); }
}
@media (prefers-reduced-motion: reduce) { .wine-bottle, .wine-card:hover .wine-bottle { animation: none; } }

/* ===== 1A card furniture: bone plinth, brass rating seal, region chip ===== */
.wine-card { cursor: pointer; }
.wine-region { position: absolute; top: 18px; left: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--claret);
  background: rgba(255,255,255,0.78); border: 1px solid rgba(92,27,39,0.18); border-radius: 999px; padding: 5px 10px; }
.wine-region::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }
.wine-seal { position: absolute; bottom: 16px; right: 16px; z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #C9A878, #8a6a3c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(90,60,20,0.38); border: 1.5px solid rgba(255,255,255,0.55); }
.wine-seal .n { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 19px; line-height: 1; }
.wine-seal .l { font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; margin-top: 1px; }
.wine-seal { cursor: help; }
.seal-pop { display: none; position: absolute; bottom: 56px; right: 0; width: 210px; background: var(--ink); color: #f4efe5; padding: 12px 14px; border-radius: 8px; font-size: 12px; line-height: 1.55; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 8; text-align: left; }
.seal-pop b { color: #d8b487; }
.wine-seal.open .seal-pop { display: block; }
.seal-pop::after { content: ''; position: absolute; bottom: -6px; right: 16px; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); }
/* ABOVE the hovered bottle (z-index 6) and never a hover target itself.
   The badge is a claim about the wine — a bottle that grows over it on hover
   hides the one piece of evidence on the card. pointer-events: none keeps the
   pin from stealing the hover it sits on top of. */
.wine-pins { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 8; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.wine-body-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.match-bars { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-top: 2px; cursor: help; }
.match-bars .mb-row { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.match-bars .mb-row span { width: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); }
.match-bars .mb-row span.on { background: var(--brass); }
.match-bars .mb-label { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ql-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 40px; }
.wine-pin { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #5c4a20;
  background: rgba(255,255,255,0.82); border: 1px solid rgba(169,134,84,0.5); border-radius: 4px; padding: 3px 7px; }
/* generated label for wineries without a photo yet (sample bottle) */
.wine-samplelabel { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); z-index: 5; width: 38%; min-width: 92px; text-align: center;
  background: linear-gradient(180deg,#f6efe0,#ece0c9); border: 1px solid #d8c9a8; border-radius: 2px; padding: 11px 9px 9px; box-shadow: 0 3px 8px rgba(0,0,0,0.28); }
.wine-samplelabel .sl-w { font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a3c; }
.wine-samplelabel .sl-n { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.02; color: #3a2a18; margin: 3px 0; }
.wine-samplelabel .sl-d { font-family: 'JetBrains Mono', monospace; font-size: 6px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6a3c; border-top: 1px solid #d0bd98; padding-top: 3px; margin-top: 3px; }
.wine-samplehint { position: absolute; right: 14px; bottom: 12px; z-index: 4; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wine-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-ink); }

/* ===== Option 2: quick-look overlay ===== */
.ql-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(27,20,16,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; }
.ql-overlay.open { display: flex; }
.ql-modal { width: min(760px, 100%); max-height: 92vh; max-height: 92dvh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 300px 1fr; box-shadow: 0 40px 90px rgba(0,0,0,0.4); }
@media (max-width: 640px) { .ql-modal { grid-template-columns: 1fr; } }
.ql-shot { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 8%, #FBF7EF, #E6DAC2); min-height: 300px; }
.ql-shot::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(92,27,39,0.14); z-index: 3; }
.ql-shot::after { content: none; }
/* The photo keeps its own proportions (15 Oct 2026). The delivery lines made the
   text column taller, so 92% of the panel's height became wider than the panel;
   the site-wide img max-width then squeezed it — tall, thin bottles. contain draws
   the whole photo, undistorted, inside whatever box that leaves. */
.ql-shot img { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); height: 92%; width: auto; max-width: calc(100% - 40px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2)); z-index: 2; }
.ql-body { padding: 30px 32px; position: relative; }
.ql-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; background: var(--card); }
.ql-close:hover { background: var(--bg-alt); }
.ql-why { margin-top: 16px; padding: 12px 14px; background: #F1E8E5; background: color-mix(in oklab, var(--claret), var(--card) 92%); border-left: 2px solid var(--claret); border-radius: 0 5px 5px 0; }
.ql-why .k { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--claret); margin-bottom: 4px; }
.ql-why p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ql-pairings { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
/* the quick look's way to the wine's own page (api/wine-page.js, 7 Oct 2026) */
.ql-page-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--claret); text-decoration: underline; text-underline-offset: 3px; }
.ql-pair { font-size: 11px; color: var(--ink-soft); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
/* Awards in the quick-look (13 Sep 2026, Foley/Te Kairanga). The card carried a
   "★ Awarded" badge and the modal listed nothing, so the badge was an unbacked
   claim on every wine that had one. Gold rather than claret: it is a third-party
   accolade, visually distinct from our own "why" note and from the pairings. */
.ql-awards { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.ql-awards .k { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink, #7A5E2E); }
.ql-award { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.ql-award::before { content: '★'; color: var(--brass, #A9863F); font-size: 10px; flex: none; }
.wine-body-head { display: flex; flex-direction: column; gap: 3px; }
.wine-body-winery { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* The name is CLAMPED to three lines (14 Sep 2026, Te Kairanga).
   "Te Kairanga Estate Martinborough Sauvignon Blanc 2025" set five lines at
   24px italic, which pushed the tasting note down until its last line was
   sliced in half by the card's overflow — a producer's own description of their
   wine, cut mid-word. Clamping the NAME rather than shrinking it keeps every
   card in the grid the same shape and keeps the first three lines (winery,
   range, variety) which is what identifies the wine; the full name is one tap
   away in the quick-look and on the wine page, both of which unclamp below.
   Producers name wines in a fixed order, so the words that fall off the end are
   the least distinguishing ones. */
.wine-body-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.05; font-style: italic; font-weight: 400; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: break-word; }

.wine-label { aspect-ratio: 4/5; position: relative; background: var(--tint, var(--claret)); background: linear-gradient(180deg, var(--tint, var(--claret)) 0%, color-mix(in oklab, var(--tint, var(--claret)), black 28%) 100%); padding: 26px; color: rgba(255,255,255,0.95); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.wine-label::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,0.18); pointer-events: none; }
.wine-label-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.wine-label-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.05; font-style: italic; font-weight: 400; }
.wine-label-winery { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; }
.wine-label-foot { display: flex; justify-content: space-between; align-items: flex-end; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.wine-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* 14 Sep 2026: the third line was sheared through the descenders.
   line-height 1.5 x 3 lines = 4.5em EXACTLY, so a box of min-height 4.5em with
   overflow:hidden had no room for the g/y/p that hang below the last baseline.
   The clamp was working; the box was a third of a descender too short. 4.9em
   keeps the 3-line rhythm and lets the tails finish. Any future change to
   line-height or line-clamp has to move this number with it. */
/* 30 Sep 2026: notes may now run to 45 words (portal), so the card shows up to 5 lines
   (was 3). min-height stays at the 3-line floor so short notes do not make tall cards;
   the Quick look pop-up shows the whole note. */
.wine-notes { font-size: 14px; color: var(--ink-soft); line-height: 1.5; min-height: 4.9em; padding-bottom: 0.12em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.wine-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; margin-top: auto; border-top: 1px solid var(--line); }
.wine-price { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; }
.wine-add { padding: 9px 16px; border: 1px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; transition: all 0.2s; }
.wine-add:hover { background: var(--ink); color: var(--bg); }
.wine-add.added { background: var(--claret); border-color: var(--claret); color: var(--bg); }
.wine-add.sold-out, .wine-add:disabled { opacity: 0.5; cursor: default; }
.filters-bar { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 24px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--card); color: var(--ink-soft); transition: background-color .2s, color .2s, border-color .2s; cursor: pointer; }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.1em; white-space: nowrap; }
/* region + sort controls */
.cat-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
.cat-sel { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cat-sel select { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 34px 9px 14px; cursor: pointer; transition: border-color .2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a8d80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.cat-sel select:hover { border-color: var(--ink); }
/* wines.html: the region list is filled after load; start it at its final width
   so the filter chips beside it don't jump to a new row (layout shift, CI budget) */
@media (min-width: 761px) { #region-sel { min-width: 200px; } }
/* ...and keep room for the second row (the "N wines" count, filled after load, and
   the reset link once the web font widens row one). Without it the whole catalogue
   below dropped ~40px a second after load — CLS 0.34, "poor". */
@media (min-width: 761px) { .cat-controls { min-height: 75px; align-content: flex-start; } }
/* keyword search + toggles (compose with existing .cat-sel) */
.cat-search { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; transition: border-color .2s; }
.cat-search:focus-within { border-color: var(--ink); }
.cat-search svg { flex: none; color: var(--muted); }
.cat-search input { border: none; background: none; outline: none; font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--ink); width: 168px; }
.cat-search input::placeholder { color: var(--muted); }
.cat-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.cat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cat-toggle .tg { width: 34px; height: 19px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.cat-toggle .tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.cat-toggle input:checked + .tg { background: var(--claret); }
.cat-toggle input:checked + .tg::after { transform: translateX(15px); }
.cat-toggle input:focus-visible + .tg { outline: 2px solid var(--claret); outline-offset: 2px; }
.cat-reset { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--claret); background: none; border: none; cursor: pointer; padding: 4px 2px; }
.cat-reset:hover { text-decoration: underline; }
.browse-somm { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.browse-somm button { font: inherit; color: var(--claret); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.wine-organic { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 4; }
.wine-shot .wine-organic { top: 38px; }

/* region + winery grids: smaller cards — shrink bottle & nudge bottle+label down so they don't crowd the header */
/* region + winery grids: smaller cards — shrink bottle & nudge bottle+label down so they don't crowd the header. */
/* Compact grids: same equation, smaller card. top 16+58+2.3 = 76.3%, base 13.7%. */
body.compact-cards .wine-bottle { height: 58%; max-width: 64%; bottom: 16%; }
body.compact-cards .wine-samplelabel { top: 48%; }
.wine-samplelabel { z-index: 7; }

/* ===== Loading skeleton (catalogue never a blank dead-end while data loads) ===== */
.wine-skeleton { cursor: default; pointer-events: none; overflow: hidden; }
.wine-skeleton .ws-shot { aspect-ratio: 3/4; background: var(--bg-alt, #F1E9DA); position: relative; }
.wine-skeleton .ws-line { height: 13px; margin: 14px 18px 0; border-radius: 3px; background: var(--bg-alt, #F1E9DA); }
.wine-skeleton .ws-line.short { width: 52%; margin-bottom: 18px; }
.wine-skeleton .ws-shot::after, .wine-skeleton .ws-line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: ws-shimmer 1.25s infinite;
}
.wine-skeleton .ws-line { position: relative; overflow: hidden; }
@keyframes ws-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wine-skeleton .ws-shot::after, .wine-skeleton .ws-line::after { animation: none; } }

.wine-name-link{color:inherit;text-decoration:none}
.wine-name-link:hover{color:var(--claret);text-decoration:underline;text-underline-offset:2px}

/* quicklook + wine page show the FULL description AND the full name
   (cards clamp both — see .wine-body-name). A clamp that is not undone here
   would mean the long name is truncated in every surface, so the detail view
   has to be the place it is whole. */
.ql-modal .wine-notes{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible;min-height:0}
.ql-modal .wine-body-name{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}

/* Quick-look shot furniture — three corners, no collisions:
   region top-left · heart top-right · match seal bottom-right. The seal carries
   inline top/right from the page templates, so its move needs !important. */
.ql-shot .wish-btn { position: absolute; top: 14px; right: 14px; left: auto; z-index: 4; }
.ql-shot .wine-seal { top: auto !important; bottom: 14px; right: 14px !important; }
.ql-shot .wine-seal .seal-pop { bottom: 56px; top: auto; }
.wish-btn.needs-login { opacity: 0.85; }

/* ===== BR-10 (browser review, 6 Oct 2026): Wines on a phone =====
   Before, 31 variety chips wrapped into six rows and the filters stacked one per
   line, so the first wine started ~1,360px (1.7 screens) down; each card was
   ~700px tall. Now: one swipeable row of chips, filters two-up, squarer photos. */
@media (max-width: 720px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 6px; scroll-padding: 0 var(--pad-x);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }
  .cat-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
  .cat-search { grid-column: 1 / -1; }
  .cat-search input { width: 100%; min-width: 0; }
  .cat-sel { flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .cat-sel select { width: 100%; min-width: 0; }
  .filter-count { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .featured-grid .wine-shot { aspect-ratio: 1 / 1; }
}
/* ===== BR-11: on phones, nothing a customer needs to read is under 11px ===== */
@media (max-width: 720px) {
  .wine-region, .wine-body-winery, .wine-meta, .wine-pin, .cat-sel > span, .cat-toggle, .cat-reset { font-size: 11px; }
  .match-bars .mb-label { font-size: 9.5px; }
}