/*
Theme Name:   Fault Line Cellars
Theme URI:    https://forwineries.com/templates/fault-line-cellars/
Description:  A bold, design-forward WordPress theme for urban tasting rooms and small-batch wineries, with oversized fluid serif type, a cinematic full-height hero, and a glassmorphism header with smooth scroll animations throughout. Includes native Commerce7 integration (shop, wine club, and cart) and works with the free version of Elementor. Part of the For Wineries collection at forwineries.com.
Author:       ForWineries.com
Author URI:   https://forwineries.com
Version:      1.0.3
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  faultline
Tags:         wine, winery, commerce7, e-commerce, elementor-compatible, editorial, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. DESIGN TOKENS
   The canonical --fw-* tokens (clay, cream, charcoal, radius, space-*,
   etc.) are NOT declared here — they come from functions.php's
   flc_fw_config_array()['tokens'] and are emitted as one :root block by
   ForWineries\Core\DesignTokens (core/src/DesignTokens.php), enqueued
   ahead of this stylesheet. Declaring them again here would just be a
   second, driftable source of truth for the exact values already in
   functions.php. Fault Line has no genuinely one-off tokens beyond the
   canonical 26 (docs/DESIGN-TOKEN-SCHEMA.md in forwineries-theme-core),
   so unlike Larkhaven (which kept one, --fw-gold-light) this block is
   empty — every value below already comes from the "wine-first" palette
   (deep burgundy clay, warm ivory cream, muted gold olive) ported
   verbatim into functions.php's tokens array.
========================================================= */

/* Brand-toned text selection — a small detail that makes the whole site
   feel deliberately designed the moment anyone highlights a sentence. */
::selection { background: var(--fw-clay); color: var(--fw-cream); }

/* =========================================================
   2. RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Skip-to-content link (WCAG 2.4.1 "Bypass Blocks") — off-screen until
   keyboard-focused, then jumps straight above the header. Landing target
   is <main id="flc-main">, opened in header.php right after </header> and
   closed in footer.php right before <footer>, so it wraps every
   template's content automatically with zero per-template changes. */
.flc-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  background: var(--fw-charcoal);
  color: var(--fw-cream);
  padding: 12px 20px;
  font-family: var(--fw-font-body);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.flc-skip-link:focus { top: 0; }

/* Baseline visible focus ring for every keyboard-focusable element that
   doesn't already define its own focus treatment — WCAG 2.4.7 "Focus
   Visible". Nothing in this file sets outline:none, so this is additive,
   not a fight against a suppressed default. */
:focus-visible {
  outline: 2px solid var(--fw-clay);
  outline-offset: 2px;
}
/* The merlot outline above has ~1.2:1 contrast against merlot-dark —
   invisible on our own dark-background sections (footer, hero, club
   cards). WCAG 1.4.11 wants focus indicators at 3:1 against their
   background; gold-light clears that everywhere it's needed here. */
#flc-footer :focus-visible,
.fw-hero :focus-visible,
.fw-club-card :focus-visible {
  outline-color: var(--fw-cream);
}

/* Root cause of every "pink button" bug chased throughout this project —
   it was never Commerce7, a branding plugin, or anything else in this
   file: the Hello Elementor PARENT theme's own reset.css gives every
   plain, unstyled <button>/[type="button"]/[type="submit"] a hardcoded
   pink (#c36) outline by default and a solid pink fill on hover/focus.
   Any element without more specific CSS of its own — e.g. Commerce7's
   icon-only cart-close button, which carries no class at all — falls
   straight into this default. Confirmed via live DevTools: the winning
   rule was listed as reset.css:1.
   Overridden here with the exact same selector list, using the site's
   neutral charcoal instead of pink, WITH !important — checked the actual
   live <link> order and this child theme's stylesheet loads BEFORE
   Hello Elementor's reset.css on this site (hello-elementor enqueues its
   own reset.css late), so an equal-specificity rule here without
   !important still loses the cascade tie to the parent's later rule.
   !important is the correct tool for exactly this one case: overriding a
   parent theme's core stylesheet whose load order we don't control.
   Any button with its own class (.fw-btn, .c7-btn, .c7-link, etc) already
   has higher specificity and is completely unaffected regardless — this
   only changes genuinely unstyled buttons. */
/* Bare-button fallback restores a real bordered/outline look — a plain
   button with no box at all reads as broken, not "clean". A bordered
   outline that fills solid on hover is the right treatment for a TEXT
   button (e.g. one with no other class anywhere on the site). Anything
   that already has its own class (.fw-btn, .c7-btn, .c7-btn--primary,
   .c7-link, etc) has higher specificity and is unaffected regardless. */
/* :not(.c7-reservation-availability *) — Commerce7's own tasting-
   reservation widget (calendar day cells, its own "Check Availability"
   button) renders entirely client-side from commerce7.js with complete
   button styling already; this blanket bare-button fallback was
   bleeding into every calendar day <button> too, forcing our border/
   fill treatment onto cells Commerce7 already styles and breaking the
   calendar grid's layout/spacing. */
[type="button"]:where(:not(.c7-reservation-availability *)),
[type="submit"]:where(:not(.c7-reservation-availability *)),
button:where(:not(.c7-reservation-availability *)) {
  background-color: transparent !important;
  border: 1px solid var(--fw-charcoal) !important;
  border-radius: var(--fw-radius-sm) !important;
  color: var(--fw-charcoal) !important;
}
[type="button"]:where(:not(.c7-reservation-availability *)):focus,
[type="button"]:where(:not(.c7-reservation-availability *)):hover,
[type="submit"]:where(:not(.c7-reservation-availability *)):focus,
[type="submit"]:where(:not(.c7-reservation-availability *)):hover,
button:where(:not(.c7-reservation-availability *)):focus,
button:where(:not(.c7-reservation-availability *)):hover {
  background-color: var(--fw-charcoal) !important;
  border-color: var(--fw-charcoal) !important;
  color: var(--fw-cream) !important;
  text-decoration: none !important;
}

/* ...EXCEPT icon-only buttons — an SVG icon with no visible text label,
   like Commerce7's cart toggle and side-cart close button (both bare
   <button> elements containing only an icon, confirmed via DevTools).
   Boxing an icon in a bordered/filled button looks wrong; these get a
   completely chrome-free treatment instead, in every state.

   The cart toggle specifically also carries the .c7-link class, whose own
   rule (further down, .c7-link.c7-link — two classes, !important) is
   MORE specific than a plain button:has(svg) (two type-level selectors —
   class beats type at equal !important, regardless of source order), so
   it was winning and putting the border/hover-fill back. .c7-link.c7-link
   :has(svg) below is specific enough to beat that base rule, but ONLY
   when an svg icon is actually present — "Remove" (.c7-link, no icon) is
   completely unaffected and keeps its normal bordered/fill-on-hover look. */
button:has(svg), [type="button"]:has(svg),
.c7-link.c7-link:has(svg) {
  border: none !important;
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  min-height: 0 !important;
}
button:has(svg):hover, button:has(svg):focus,
[type="button"]:has(svg):hover, [type="button"]:has(svg):focus,
.c7-link.c7-link:has(svg):hover, .c7-link.c7-link:has(svg):focus {
  background-color: transparent !important;
  color: inherit !important;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevents horizontal scroll from full-bleed sections. Deliberately on
     <html>, not <body>: overflow-x:hidden on body with no overflow-y set
     forces the browser to compute overflow-y as auto too (per the CSS
     Overflow spec, when only one axis is non-visible the other becomes
     auto), turning body into its own scroll container. That breaks any
     position:fixed descendant — including Commerce7's .c7-side-cart drawer
     — which then renders relative to that scrolling body box instead of
     the real viewport, producing a squished, mispositioned panel instead
     of a proper full-height right-side drawer. */
  overflow-x: hidden;
}

body {
  background: var(--fw-cream);
  color: var(--fw-charcoal);
  font-family: var(--fw-font-body);
  font-size: 17px;
  /* 400, not 300 — the Google Fonts request never actually shipped a 300
     cut of Manrope, so browsers were silently substituting 400 anyway;
     declaring the real rendered weight keeps this honest. */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  width: 100%;
}

img, video, iframe, table { max-width: 100%; height: auto; }
/* :not(.c7-reservation-availability *) — same problem as the bare-button
   reset above: Commerce7's reservation-availability widget renders its
   calendar day grid as a real <table> internally. Without this
   exclusion, this reset's display:block strips the table's row/column
   layout, scrambling the calendar into overlapping cells (a nav control
   bleeding into a date cell) instead of a real grid — the reservation
   calendar effectively fails to display. */
table:where(:not(.c7-reservation-availability *)) { display: block; overflow-x: auto; }

@media (max-width: 600px) {
  body { font-size: 16px; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fw-font-heading);
  font-weight: 600;
  color: var(--fw-charcoal);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--fw-space-sm);
  /* Ragged two-word orphan lines on big display headings read as broken;
     balance keeps multi-line headlines visually even (safe no-op where
     unsupported). */
  text-wrap: balance;
}

/* Oversized, tightly-tracked fluid display scale — the single biggest
   "current-era editorial" move on the whole site. Big serifs at these
   sizes need negative tracking or they fall apart into loose letters. */
h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.45rem, 2vw, 1.85rem); }

p { margin: 0 0 var(--fw-space-sm); }

/* Scoped away from Commerce7's own mount points (#c7-content, #c7-cart,
   #c7-account) — those regions must be styled entirely by commerce7.css's
   own --c7-link-color etc. (see inc/commerce7.php), not by our global
   anchor color, or its buttons/links pick up our merlot tint by accident.
   :where() keeps this at the same specificity as a plain "a" selector so
   it still loses cleanly to Commerce7's own more specific component
   classes on the rare occasion the two overlap. */
a:where(:not(#c7-content *, #c7-cart *, #c7-account *)) {
  color: var(--fw-clay);
  text-decoration: none;
  transition: color .2s ease;
}
a:where(:not(#c7-content *, #c7-cart *, #c7-account *)):hover { color: var(--fw-clay); }

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

/* Eyebrows are now small "chip" badges (hairline pill outline) rather
   than bare tracked text — a lightweight current-era detail that gives
   every section a crisp designed entry point without adding weight. */
.fw-eyebrow {
  display: inline-block;
  font-family: var(--fw-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fw-clay);
  border: 1px solid rgba(var(--fw-clay-rgb), 0.4);
  border-radius: 999px;
  padding: 7px 16px 6px;
  margin-bottom: var(--fw-space-sm);
}
/* Breadcrumb trail (functions.php, flc_render_breadcrumbs()) — reuses
   .fw-eyebrow's font/size/color/uppercase wholesale, but the chip
   outline is wrong for a multi-link trail; strip it back to plain
   tracked text, and tone down the letter-spacing (0.22em reads fine for
   one short word but is too spaced-out across a whole "Home / The
   Estate / Team" trail). */
.fw-breadcrumbs.fw-eyebrow {
  display: block;
  letter-spacing: 0.08em;
  margin-bottom: var(--fw-space-md);
  border: none;
  border-radius: 0;
  padding: 0;
}
.fw-breadcrumbs a { color: var(--fw-clay); text-decoration: none; }
.fw-breadcrumbs a:hover { color: var(--fw-clay); text-decoration: underline; }
.fw-breadcrumbs [aria-current="page"] { color: var(--fw-charcoal-soft); }
.fw-breadcrumb-sep { margin: 0 6px; color: var(--fw-charcoal-soft); opacity: 0.5; }

.fw-container {
  max-width: var(--fw-container);
  margin: 0 auto;
  padding: 0 var(--fw-space-md);
}
@media (max-width: 600px) {
  .fw-container { padding: 0 var(--fw-space-sm); }
}

.fw-btn { width: auto; }
@media (max-width: 480px) {
  .fw-btn { width: 100%; justify-content: center; }
}

/* Full-pill buttons with a built-in arrow that nudges forward on hover —
   the arrow is a ::after glyph (no markup changes across any template),
   always present so hover never causes a width/layout shift. */
.fw-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--fw-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--fw-clay);
  color: var(--fw-clay);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--fw-ease), box-shadow 0.3s var(--fw-ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fw-btn::after {
  content: "\2192"; /* → */
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.3s var(--fw-ease-spring);
}
/* Gentle lift + soft warm shadow on hover, not a hard offset — fits the
   softer, more approachable mood than a graphic poster-style shadow. */
.fw-btn:hover {
  background: var(--fw-clay);
  color: var(--fw-cream);
  transform: translateY(-2px);
  box-shadow: var(--fw-shadow-md);
}
.fw-btn:hover::after { transform: translateX(4px); }
.fw-btn--solid { background: var(--fw-clay); color: var(--fw-cream); box-shadow: var(--fw-shadow-sm); }
.fw-btn--solid:hover { background: var(--fw-clay-dark); border-color: var(--fw-clay-dark); color: var(--fw-cream); }
/* Ghost button used over hero photos — cream text on a frosted dark
   chip (blur + scrim, not a solid fill) so it reads against any photo.
   backdrop-filter is safe here: this is a leaf-level <a>/<button> with
   no position:fixed descendants (unlike #fw-header — see its comment). */
.fw-btn--accent {
  border-color: rgba(var(--fw-cream-rgb), 0.5);
  color: var(--fw-cream);
  background: rgba(36, 19, 24, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fw-btn--accent:hover { background: var(--fw-clay); border-color: var(--fw-clay); color: var(--fw-cream); }

/* =========================================================
   3. PLACEHOLDER IMAGERY
   Elegant CSS-only stand-ins. Each block is tagged with the
   exact replacement spec in a corner label — search Unsplash /
   Pexels for the suggested term, drop the real photo in, then
   delete the .ph-tag span (or just leave it, it's display:none
   ready via .flc-no-tags on <body> if you want to hide labels
   site-wide while still deciding).
========================================================= */
.ph-img {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--fw-radius);
  /* A dark neutral instead of the browser's default transparent (which
     shows the page background through, usually a much lighter cream) —
     the gap between this box existing and its background-image finishing
     its download reads as an intentional dark photo box settling in,
     not a broken/blank load (2026-09-11 audit, worst on the hero: it's
     the single biggest box on the page and often the LCP candidate). */
  background-color: var(--fw-ink);
  background-size: cover;
  background-position: center;
  /* Explicit no-repeat: the ph-* fallbacks below intentionally use
     background-IMAGE (not the background shorthand) so this size/repeat
     pair is never reset — a shorthand there once silently reverted
     size to auto and tiled hero photos on tall viewports. */
  background-repeat: no-repeat;
  overflow: hidden;
}
.ph-tag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-family: var(--fw-font-body);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(43, 36, 32, 0.72);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--fw-radius-sm);
}
body.flc-no-tags .ph-tag { display: none; }

.ph-hero {
  min-height: 640px;
  background-image: linear-gradient(155deg, #d9c4b8 0%, #7d2035 60%, #43101f 100%);
}
.ph-vineyard-row {
  min-height: 260px;
  background-image: linear-gradient(160deg, #cabb9f 0%, #b18a4a 55%, #6e5426 100%);
}
.ph-wine {
  min-height: 380px;
  background-image: linear-gradient(165deg, #7d2035 0%, #4a0f1d 60%, #241318 100%);
}
.ph-club {
  min-height: 460px;
  background-image: linear-gradient(150deg, #b18a4a 0%, #7d2035 55%, #241318 100%);
}
.ph-portrait {
  min-height: 480px;
  background-image: linear-gradient(160deg, #5c4a3a 0%, #3a2c20 100%);
}
.ph-stone {
  min-height: 420px;
  background-image: linear-gradient(160deg, #cabfa8 0%, #a89a7c 55%, #7d6f56 100%);
}

/* =========================================================
   4. SITE HEADER
========================================================= */
#fw-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: transparent;
  box-shadow: 0 1px 0 var(--fw-line);
  transition: box-shadow 0.35s ease;
}
#fw-header.is-scrolled { box-shadow: 0 1px 0 var(--fw-line), 0 12px 32px rgba(36, 19, 24, 0.09); }
/* Frosted-glass backdrop on its own ::before layer, NOT on #fw-header
   itself — per the CSS spec, backdrop-filter makes an element a new
   containing block for its own position:fixed DESCENDANTS. #c7-cart
   lives inside this header (Commerce7 renders its .c7-side-cart drawer,
   position:fixed, as a descendant of it), so backdrop-filter directly on
   #fw-header would resolve that drawer's fixed coordinates against the
   header's own small box instead of the viewport, squishing it into a
   short band instead of a full-height panel. This pseudo-element is a
   sibling of #c7-cart in the DOM (both children of #fw-header), not an
   ancestor of it, so it can carry backdrop-filter safely — #c7-cart's
   containing-block chain never passes through it. */
#fw-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--fw-cream-rgb), 0.72);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  transition: background 0.35s ease;
}
/* Glass gets a touch more opaque once content is actually scrolling
   underneath it — at rest it stays airier. */
#fw-header.is-scrolled::before { background: rgba(var(--fw-cream-rgb), 0.88); }

/* A quiet, same-family tint (cream-raised, not a hard charcoal band) —
   the utility strip should read as "part of this warm page" rather than
   a jarring dark bar dropped on top of it. */
.flc-topbar {
  background: var(--fw-cream-raised);
  color: var(--fw-charcoal-soft);
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.flc-topbar .fw-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flc-topbar a { color: var(--fw-charcoal-soft); }
.flc-topbar a:hover { color: var(--fw-clay); }

.flc-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Longhand top/bottom only — this element is ALSO .fw-container (same
     div, both classes), which sets its own left/right padding via the
     "padding" shorthand. Using the shorthand here too would reset those
     to 0 (it appears later in the file, so it'd win the cascade) — that
     silently stripped the header's side inset site-wide, most visible in
     the mobile nav dropdown where full-width list rows made the missing
     edge padding obvious. */
  padding-top: 30px;
  padding-bottom: 30px;
  transition: padding 0.25s ease;
}

/* Oversized italic wordmark, sitting alone with real vertical breathing
   room. Same Fraunces family as every heading on the site, but the
   italic cut (used only here, plus pull-quotes/press mentions/stat
   numbers — see --fw-font-accent in section 1) makes the logotype read
   as its own distinct flourish rather than just a big heading. */
.flc-logo {
  font-family: var(--fw-font-accent);
  font-style: italic;
  font-size: clamp(1.9rem, 2.6vw, 2.7rem);
  font-weight: 500;
  color: var(--fw-charcoal);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.flc-logo img { max-height: 52px; width: auto; }
.flc-logo span.flc-logo-sub {
  display: block;
  font-family: var(--fw-font-body);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fw-clay);
  font-weight: 500;
  margin-top: 4px;
  /* Prevents wrapping onto a second line if the logo is the flex item
     that gets squeezed when the header row is tight — same fix applied
     to albariza-house-theme's .alb-logo-sub (2026-09-07 report). */
  white-space: nowrap;
}

/* Direct-child combinator on purpose — scopes this to the top-level list
   only, so a nested .sub-menu (added when a menu item has children, e.g.
   "Wines" > Our Wines/Wine Club/Gift Cards) gets its own dropdown
   treatment below instead of inheriting this flex row layout. */
#flc-primary-nav > ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
/* Sliding underline — grows in from the left on hover, retreats to the
   right on mouse-out (the transform-origin swap), and stays fully drawn
   on the current page's item. ::before, NOT ::after — the submenu
   parent items already use ::after for their ▾ caret below. */
#flc-primary-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 4px;
  margin: 0 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fw-charcoal);
  transition: color 0.25s ease;
}
#flc-primary-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1.5px;
  background: var(--fw-clay);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--fw-ease);
}
#flc-primary-nav a:hover,
#flc-primary-nav .current-menu-item > a {
  color: var(--fw-clay-dark);
}
#flc-primary-nav a:hover::before,
#flc-primary-nav .current-menu-item > a::before {
  transform: scaleX(1);
  transform-origin: left;
}
/* Submenu links live in their own dropdown panel — the sweep underline
   sitting at the very bottom edge of each full-width row reads as a
   stray border there, so submenus keep the plain color-change only. */
#flc-primary-nav .sub-menu a::before { display: none; }

/* Submenus (a menu item with children, e.g. Wines > Our Wines/Wine Club/
   Gift Cards, or Visit > Plan Your Visit/Events/Reserve a Tasting) —
   revealed on hover AND :focus-within so tabbing to a submenu link with
   a keyboard opens it too, not just a mouse hover. No custom nav walker/
   ARIA menu roles here — a plain nested <ul> is already announced
   correctly by screen readers, and this covers mouse + keyboard, which
   covers real use; a full ARIA menu widget would be real added
   machinery for marginal benefit over that. */
#flc-primary-nav .menu-item-has-children { position: relative; }
#flc-primary-nav .menu-item-has-children > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.7em;
}
#flc-primary-nav .sub-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  min-width: 200px;
  margin: 0;
  padding: var(--fw-space-xs) 0;
  background: var(--fw-cream);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-sm);
  box-shadow: var(--fw-shadow-md);
  z-index: 20;
}
#flc-primary-nav .menu-item-has-children:hover > .sub-menu,
#flc-primary-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
#flc-primary-nav .sub-menu a { display: block; padding: 10px var(--fw-space-sm); white-space: nowrap; }

.flc-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Icon-only by default via the existing button:has(svg) bare-icon
   fallback (section 2) — no color/border rules needed here, just
   sizing/cursor to match the other header icon controls. */
.flc-search-toggle { display: flex; align-items: center; cursor: pointer; padding: 4px; }
/* The dropdown panel toggled by #flc-search-toggle (assets/js/theme.js) —
   [hidden] is all the show/hide logic needs (see the JS comment), this
   just adds the visual chrome once it's visible. */
.flc-header-search {
  border-top: 1px solid rgba(58, 54, 48, 0.08);
  background: var(--fw-cream);
  padding: var(--fw-space-sm) 0;
}
.flc-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fw-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--fw-charcoal);
  background: none;
  color: var(--fw-charcoal);
  padding: 9px 18px;
  border-radius: var(--fw-radius-sm);
  cursor: pointer;
}
.flc-cart-link:hover { border-color: var(--fw-clay); color: var(--fw-clay); }
.flc-cart-link--disabled { opacity: 0.5; cursor: not-allowed; }

/* Commerce7 mounts real widgets into these — we only control spacing
   around them, not their internal markup (that's commerce7.css's job). */
#c7-account { display: flex; align-items: center; font-size: 0.85rem; }
.c7-buy-product, .c7-club-join-button { margin-top: var(--fw-space-xs); }

/* #c7-cart lives in the header now (inc/commerce7.php, [c7_cart_trigger])
   — its intended location per Commerce7's own docs, right in the nav
   actions row. Two earlier attempts to reposition it with CSS
   (display:none, then position:fixed) both broke its internal count-badge
   logic, so this is deliberately hands-off: no positioning, no hiding,
   just normal inline-flex alignment matching its header siblings. */
#c7-cart { display: inline-flex; align-items: center; }

/* An earlier version of this rule reset EVERY descendant of #c7-cart
   (border/background/color, via a `#c7-cart *` wildcard). That assumed
   the drawer panel (.c7-side-cart) was NOT nested inside #c7-cart — it
   is, at least in this rendering — so the wildcard also stripped the
   drawer's own background and legitimately-styled buttons like "Proceed
   to Checkout", making the whole cart panel transparent. Reverted to the
   :has(svg) icon-button rule further down this file, which only targets
   genuinely icon-only buttons (the header toggle, the drawer's close X)
   without touching containers or intentional CTA buttons. */

/* Login — Commerce7 leaves this view visually bare by design; give it a
   card treatment matching the rest of the site. Scoped to .c7-form--login
   specifically (a real modifier class, confirmed in commerce7's own JS)
   rather than the bare .c7-form base class, which Commerce7 reuses for
   every form on the site — including the tiny inline add-to-cart form on
   each product tile. An earlier version of this rule targeted .c7-form
   generically and put the login card's huge padding/background on every
   product card's add-to-cart controls instead. */
#c7-content .c7-form--login,
#c7-content .c7-login-form {
  max-width: 460px;
  margin: var(--fw-space-lg) auto;
  padding: var(--fw-space-lg) var(--fw-space-md);
  background: var(--fw-cream-raised);
  border: 1px solid rgba(58, 54, 48, 0.1);
  border-radius: var(--fw-radius);
}
#c7-content .c7-club,
#c7-content .c7-reservation-type {
  padding: var(--fw-space-md);
  background: var(--fw-cream);
  border: 1px solid rgba(58, 54, 48, 0.08);
  border-radius: var(--fw-radius);
}
/* Confirmed via the widget's own rendered markup: .c7-form__group has no
   align-items set, so the bare submit button (no label sibling like the
   Date/Time/Guests fields have) stretches to the full label+field row
   height and its text centers across that taller box — reading as
   misaligned against the actual input row. Align the row to the fields'
   own baseline instead. */
.c7-reservation__search .c7-form__group {
  align-items: flex-end;
}
@media (max-width: 600px) {
  #c7-content .c7-form--login,
  #c7-content .c7-login-form { padding: var(--fw-space-md) var(--fw-space-sm); margin: var(--fw-space-md) auto; }
}

/* Wine/product cards — restyle Commerce7's default collection grid to
   match the site's editorial look (no underlined serif titles, on-brand
   pricing font). Card background/border is scoped to the "featured"
   variant ONLY (.c7-product-collection__products--featured .c7-product)
   — plain, non-featured grid items keep Commerce7's own bare background
   as-is, matching how Commerce7 itself distinguishes the two.
   Padding is intentionally left untouched on the featured card: Commerce7
   pairs its own 30px/20px/20px padding with a -60px top margin on
   .c7-product__image specifically so the bottle art pokes above the card
   by a calibrated amount — an earlier version of this rule overrode
   padding to a smaller value without adjusting for that, which crowded
   the image into the top of the card. */
#c7-content .c7-product-collection__product-list {
  gap: var(--fw-space-md);
}

/* Commerce7 only caps image height (max-height:300px) — it doesn't fix a
   consistent height or center images within one, so bottle photos with
   different natural proportions (some tall and thin, some shorter/wider
   crops) each render at their own size, making a row of products look
   misaligned. Forcing a fixed-height flex box with object-fit:contain
   gives every product image the same footprint and vertically centers
   the bottle within it, regardless of the source photo's own dimensions.

   !important is required here — the shop-layout-branding-for-commerce7
   plugin's own "Shop Layout" feature injects its own !important rules for
   .c7-product__image / .c7-product__image img at every breakpoint (e.g.
   "max-height: 300px !important; width: auto !important; height: auto
   !important;", confirmed via the live page's actual injected CSS), and
   !important always wins over a normal declaration regardless of
   specificity — an earlier version of this rule had no !important and
   was being silently overridden by the plugin's, which is why the fix
   appeared to do nothing.

   Scoped specifically to .c7-product-collection — NOT a bare #c7-content
   .c7-product__image. .c7-product__image is reused on the single product
   detail page (its own main photo + thumbnail gallery, an entirely
   different layout with no "row of products" to align) and in any
   related-products rail, both of which this fix was also incorrectly
   reaching and distorting. Only the collection/grid listing actually has
   the multiple-different-bottle-photos-in-a-row problem this solves. */
/* Selector matches the plugin's own exact chain (#c7-content
   .c7-product-collection .c7-product .c7-product__image, confirmed via
   the live page's injected CSS) with .c7-product doubled for extra
   specificity — the plugin's rule goes THROUGH .c7-product, which made it
   more specific than an earlier version of this rule that skipped
   straight from .c7-product-collection to .c7-product__image, so the
   plugin's !important won on specificity even before considering load
   order, and none of this was actually applying yet.

   align-self:stretch (overriding the plugin's own flex-start) makes the
   image box stretch to match its row's full height — necessary because a
   2-line product title on one card versus a 1-line title on its neighbor
   makes their rows genuinely different heights, so a fixed height alone
   still lets image boxes start at different Y positions if one row is
   taller than the other. Using min-height rather than height is what
   lets stretch actually take effect: per the flexbox spec, align-self:
   stretch is a no-op once an item has an explicit (non-auto) height —
   min-height doesn't count as "explicit" the same way, so the box can
   still grow to fill the row while keeping a guaranteed floor. Centering
   the bottle within whatever height that resolves to (align-items:
   center) keeps every image on the same visual centerline regardless of
   how tall the text content beside it happens to be. */
/* Two prefixes, not one: #c7-content is present on the dedicated /collection
   page (page-templates/page-c7-content.php manually wraps its mount point
   in <div id="c7-content">), but flc_c7_render_collection() — what powers
   the homepage's [c7_collection] embed — outputs a bare
   <div class="c7-product-collection"> with no #c7-content ancestor at all
   (inc/commerce7.php). An earlier version of this fix only had the
   #c7-content-prefixed selector, so it silently never matched on the
   homepage (0 specificity contest, just a selector that never applies) —
   the fix "worked" on /collection and did nothing on the homepage, which
   is why the bottle image stayed flush-left there specifically. The
   .flc-collection-embed prefix (the wrapper front-page.php puts around the
   homepage's shortcode output) covers that second context the same way. */
#c7-content .c7-product-collection .c7-product.c7-product .c7-product__image,
.flc-collection-embed .c7-product-collection .c7-product.c7-product .c7-product__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 340px !important;
}
#c7-content .c7-product-collection .c7-product.c7-product .c7-product__image img,
.flc-collection-embed .c7-product-collection .c7-product.c7-product .c7-product__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
/* Confirmed via live DOM inspection that .c7-product__image wraps its img
   in an <a> (<div class="c7-product__image"><a><img></a></div>) — the <a>,
   not the img, is the actual direct flex item under the display:flex rule
   above. Left unstyled, that <a> has no explicit size, so it shrink-wraps
   to the img's own intrinsic pixel dimensions (confirmed 180x600 for the
   seed Chardonnay photo — a tall, narrow cutout) instead of filling the
   box, which is why justify-content: center above had an undersized item
   to center and bottle photos rendered flush left with dead space beside
   them.

   height is a fixed px value here, NOT 100% — .c7-product__image only sets
   min-height (a floor, kept deliberately so align-self:stretch can still
   equalize row heights per the comment above), never an explicit height,
   so it has no definite height of its own in the common case. height:100%
   on the <a> had nothing real to resolve against and fell back toward the
   img's own intrinsic height (600px for the seed photo), which is what
   blew the card up to nearly full-viewport-tall on mobile the first time
   this shipped. A fixed px height matching the container's own min-height
   floor gives object-fit:contain on the img below a real, bounded box to
   scale into instead. */
#c7-content .c7-product-collection .c7-product.c7-product .c7-product__image a,
.flc-collection-embed .c7-product-collection .c7-product.c7-product .c7-product__image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 340px !important;
}
#c7-content .c7-product-collection__products--featured .c7-product {
  background: var(--fw-cream);
  border: 1px solid rgba(58, 54, 48, 0.08);
  border-radius: var(--fw-radius);
}
#c7-content .c7-product__title a {
  text-decoration: none;
}
#c7-content .c7-product__title a:hover {
  text-decoration: underline;
}
#c7-content .c7-product__add-to-cart__price {
  font-family: var(--fw-font-body);
}
/* Quantity box + Add to Cart button default to flexbox's own nowrap —
   comfortable at normal widths, but with zero margin for error on the
   narrowest phones (~320px) once a product page adds its own side
   padding on top. Letting this pair wrap is a safe, invisible-until-
   actually-needed safety net rather than a visible layout change. */
#c7-content .c7-product__add-to-cart__form {
  flex-wrap: wrap;
}

/* Homepage embeds the collection widget just below our own "Featured
   Wines" section head — Commerce7 also renders its own collection-name
   heading ("Wines") at the top of the widget itself, duplicating ours.
   Broadened from the original direct-child (>) selectors: the live
   widget nests its heading deeper than __content's immediate children
   (screenshot-confirmed the "Wines" h-tag was still rendering), so match
   ANY h1/h2 inside the collection that is NOT part of a product card —
   product titles themselves can legitimately be headings. Hidden only in
   this homepage wrapper; the dedicated /collection page still shows
   Commerce7's own heading normally, since nothing else labels it there. */
.flc-collection-embed .c7-product-collection :is(h1, h2, .c7-h1):not(.c7-product *) {
  display: none;
}

/* Homepage collection embed — proper wine cards.
   The widget's own layout renders each product as a loose image-beside-
   text row on a bare background (screenshot-confirmed), which reads as
   an unstyled directory listing between the theme's otherwise polished
   sections. Restack each product as a centered vertical card: bottle on
   top, then name / region / note / price / buy. !important throughout
   because Commerce7 + the shop-layout plugin inject their own !important
   layout rules (see the .c7-product__image saga above) — matching their
   specificity game is the established pattern in this file.
   Scoped to .flc-collection-embed only: the /collection page keeps
   Commerce7's own full-page layout, which works fine there. */
.flc-collection-embed .c7-product-collection__product-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: var(--fw-space-sm) !important;
  align-items: stretch !important;
}
.flc-collection-embed .c7-product.c7-product {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: var(--fw-space-sm) var(--fw-space-sm) var(--fw-space-md) !important;
  background: var(--fw-cream);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  transition: transform 0.35s var(--fw-ease), box-shadow 0.35s var(--fw-ease);
}
.flc-collection-embed .c7-product.c7-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--fw-shadow-md);
}
.flc-collection-embed .c7-product__title {
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 14px 0 4px;
}
.flc-collection-embed .c7-product__title a { color: var(--fw-charcoal); }
.flc-collection-embed .c7-product__title a:hover { color: var(--fw-clay); }
/* Region/appellation line ("Walla Walla", "Napa Valley") as a quiet
   small-caps kicker under the name rather than body-copy gray text. */
.flc-collection-embed .c7-product__subtitle,
.flc-collection-embed .c7-product__region {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fw-olive);
}
/* Tasting-note paragraph: muted, measure-capped, clamped to three lines
   so one wordy note can't stretch its whole card row. The :not() guards
   keep this off the price/add-to-cart area's own text. */
.flc-collection-embed .c7-product p:not([class*="price"]):not([class*="add-to-cart"] *) {
  color: var(--fw-charcoal-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 40ch;
  margin: 8px auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flc-collection-embed .c7-product__add-to-cart__price {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fw-charcoal);
}
/* The buy row (qty + add-to-cart) hugs the card's bottom edge so every
   card's buy button lines up across the row regardless of note length. */
.flc-collection-embed .c7-product__add-to-cart,
.flc-collection-embed .c7-product__add-to-cart__form {
  margin-top: auto !important;
  justify-content: center !important;
}

/* Product grid on small phones — two columns of wine cards gets cramped
   under ~480px (image, title, and price all squeeze together); drop to
   a single column so each card keeps readable proportions. Also shrink
   the fixed 260px image box from the alignment fix above — that height
   was sized for a multi-column desktop/tablet grid; once the grid is a
   single column on a narrow phone, 260px of image before any text even
   starts reads as a lot of scrolling for not much content. */
@media (max-width: 480px) {
  #c7-content .c7-product-collection__products--featured .c7-product-collection__product-list,
  #c7-content .c7-product-collection__product-list.c7-product-collection__product-list,
  .flc-collection-embed .c7-product-collection__products--featured .c7-product-collection__product-list,
  .flc-collection-embed .c7-product-collection__product-list.c7-product-collection__product-list {
    grid-template-columns: 1fr !important;
  }
  #c7-content .c7-product-collection .c7-product.c7-product .c7-product__image,
  .flc-collection-embed .c7-product-collection .c7-product.c7-product .c7-product__image {
    min-height: 280px !important;
  }
  #c7-content .c7-product-collection .c7-product.c7-product .c7-product__image a,
  .flc-collection-embed .c7-product-collection .c7-product.c7-product .c7-product__image a {
    height: 280px !important;
  }
}

/* Side-cart drawer line items — confirmed via live DevTools inspection to
   use a different, older set of classes (.c7-order-item__title, .c7-link)
   than the rest of the storefront (.c7-product__title etc), styled by a
   separate stylesheet ("c7-base.css") that hardcodes a pink/rose color
   (#c36) directly — including a solid fill on hover — rather than
   through any --c7-* custom property.

   Rather than hardcoding our own merlot here (which would work, but then
   permanently locks these specific elements out of a Commerce7 branding
   plugin's Brand Kit — it can only ever adjust --c7-* variables, never
   this file's literal color), these rules are pointed at the SAME
   --c7-* variables the rest of the storefront already uses. This theme's
   own bridge (top of this file) sets those variables to the brand colors
   below by default; a branding plugin overriding e.g. --c7-primary-color
   flows through here exactly like it does for every other Commerce7
   button, with no special-casing needed.

   Specificity is deliberately doubled (.c7-link.c7-link, not just
   .c7-link) and !important is still required — c7-base.css is injected
   by Commerce7's JS at runtime (after this stylesheet), so a same-
   specificity rule there wins any tie regardless of !important on either
   side. Unscoped/global on purpose: the drawer is portaled to <body> by
   Commerce7's own JS, so it isn't actually a descendant of #c7-content
   or #c7-cart, and .c7-link/.c7-order-item__title also appear on the
   dedicated /cart page outside any of those wrappers too. */
/* Product title — a plain text link, never a boxed button. */
.c7-order-item__title a,
.c7-order-item .c7-order-item__title a {
  color: var(--c7-link-color) !important;
  border: none !important;
  background-color: transparent !important;
}
.c7-order-item__title a:hover {
  color: var(--c7-primary-color-dark) !important;
}

/* "Remove" etc (.c7-link) — this one IS an actual button control, so it
   keeps a real bordered/outline look that fills on hover, same pattern as
   the generic bare-button fallback above, just routed through Commerce7's
   own --c7-primary-* variables instead of the theme's own charcoal/merlot
   — so a Commerce7 branding plugin's Brand Kit can still control this
   specific element's color, unlike the generic fallback which isn't
   Commerce7-specific and has no reason to defer to it. */
.c7-link.c7-link {
  color: var(--c7-link-color) !important;
  border: 1px solid var(--c7-primary-color) !important;
  background-color: transparent !important;
  padding: 0.45em 0.9em !important;
  line-height: 1.25 !important;
  min-height: 2.35em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.c7-link.c7-link:hover {
  color: var(--c7-primary-button-text-color) !important;
  background-color: var(--c7-primary-button-bg-hover) !important;
  border-color: var(--c7-primary-button-bg-hover) !important;
}
.c7-order-item__price.c7-order-item__price,
.c7-order-item__price.c7-order-item__price span,
.c7-order-item__total.c7-order-item__total,
.c7-product__price.c7-product__price,
#c7-content .c7-product__add-to-cart__price {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Commerce7 reuses the SAME bare .c7-link class for the login page's
   "Forgot your password?" / "Create one" links (confirmed via user-
   supplied DOM: <a class="c7-link" href="/profile/forgot-password">,
   <a class="c7-link" href="/profile/create-account">) — the boxed-
   button look above is right for "Remove" in the cart, but wrong here:
   two bordered boxes next to the real "Log In" button reads as three
   competing buttons instead of one primary action plus two subtle
   secondary links. Scoped by the exact confirmed href rather than a
   guessed ancestor wrapper (e.g. ".c7-account-login") — the cart's
   "Remove" link isn't a real page link at all, so there's no risk of
   this ever matching it by accident, unlike a class/ancestor guess that
   could go wrong in either direction. */
a.c7-link[href*="/profile/forgot-password"],
a.c7-link[href*="/profile/create-account"] {
  border: none !important;
  background-color: transparent !important;
  color: var(--c7-link-color) !important;
  text-decoration: underline !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: inline !important;
}
a.c7-link[href*="/profile/forgot-password"]:hover,
a.c7-link[href*="/profile/create-account"]:hover {
  background-color: transparent !important;
  color: var(--c7-primary-color-dark) !important;
}

/* "Proceed to Checkout" and other primary CTAs (.c7-btn.c7-btn--primary)
   — confirmed real selector via browser inspection (an <a> styled as a
   filled button, e.g. #c7-side-cart__summary__proceed). The earlier fix
   here guessed at a --c7-primary-button-text-color-hover CSS variable,
   which had no effect — Commerce7's own hover state isn't reading a
   variable for this element at all, so only a direct override works.
   Same specificity-doubling + !important pattern as .c7-link.c7-link
   above, for the same reason: c7-base.css loads after this stylesheet
   via Commerce7's own JS, so an equal-specificity rule there would win
   any tie regardless of !important on either side. */
.c7-btn.c7-btn--primary:hover,
.c7-btn.c7-btn--primary:focus {
  color: var(--c7-primary-button-text-color) !important;
  background-color: var(--c7-primary-button-bg-hover) !important;
  border-color: var(--c7-primary-button-bg-hover) !important;
}

/* Product page image gallery (confirmed real markup via browser
   inspection): Commerce7 already renders a proper main-image +
   clickable-thumbnail-strip structure on its own
   (.c7-product-detail__photo__thumbs wraps one <a><img></a> per extra
   image) — it just needs the thumbnails constrained to thumbnail SIZE.
   Our own global "img { max-width: 100%; display: block; }" rule
   (this file, section 2) was blowing each one up to the full width of
   .c7-product__image instead, which is what made multiple images stack
   as full-width "rows" rather than sit in a compact strip below the
   main photo. No slider/carousel needed — this is that gallery,
   correctly sized. */
/* Main product image — a direct child <img> of .c7-product__image,
   confirmed via inspection (sibling to .c7-product-detail__photo__thumbs,
   not inside it). Different product photos have wildly different
   aspect ratios (a tall bottle shot vs. a wide banner image, seen in
   the same product's own gallery) — with no fixed box, each one renders
   at its own natural height, so the whole layout visibly jumps every
   time a different thumbnail is clicked. A fixed-height box + object-fit
   fixes the jump; object-position: center (contain's own default, set
   explicitly here) keeps differently-shaped images centered in it
   instead of pinned to one corner. */
.c7-product__image > img {
  width: 100% !important;
  height: 460px !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 600px) {
  .c7-product__image > img { height: 320px !important; }
}
.c7-product-detail__photo__thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.c7-product-detail__photo__thumbs a {
  display: block !important;
  width: 64px !important;
  flex: 0 0 64px !important;
}
.c7-product-detail__photo__thumbs img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: var(--fw-radius) !important;
  border: 1px solid rgba(58, 54, 48, 0.15) !important;
  cursor: pointer;
}
.flc-wine-view-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
}

/* Cart drawer line items (.c7-order-item) — Commerce7's own CSS never
   gives this a responsive treatment at all (checked directly in
   commerce7.css: zero @media/@container rules reference .c7-order-item
   anywhere). It's a fixed 3-column flex row — 60px image, a flexible
   details column, and a pricing column carrying price + quantity
   dropdown + line total — that Commerce7's own CSS pins to a single row
   with flex-wrap: nowrap !important, regardless of how much space is
   actually available. On a narrow cart panel that overflowed/cramped
   (a forced horizontal scrollbar inside the drawer).

   The fix is just flex-wrap: wrap on .c7-order-item, with !important to
   beat Commerce7's own !important nowrap (confirmed via live DOM
   inspection — same pattern documented elsewhere in this file for
   .c7-product__image etc). Nothing else needs forcing: flex-wrap only
   has an effect once content actually doesn't fit, so this is a no-op
   on any row that already has room, and only drops pricing to its own
   line on the rows that genuinely need it.

   An earlier version of this ALSO forced .c7-order-item__pricing to
   flex: 0 0 100% — meant to make that wrapped line indent nicely under
   the details column — but that forced the full-width line
   UNCONDITIONALLY, on every cart regardless of available space, which
   is exactly the bug this fix exists to prevent: price/quantity kept
   landing on their own row even on cart panels with plenty of room
   beside the details column. Removed; .c7-order-item__pricing keeps
   only flex-wrap + alignment for the genuinely-narrow case, no forced
   basis. */
.c7-order-item {
  display: flex !important;
  flex-wrap: wrap !important;
}
.c7-order-item__pricing {
  display: flex !important;
  /* NOT flex:0 0 100% — an earlier version of this fix forced this onto
     its own full-width line unconditionally, on every cart regardless of
     how much room the row actually had. flex-wrap on the parent above
     already does the real job on its own: with no forced basis here,
     this row sits inline next to the details column whenever it fits
     (which is most of the time, including every wide cart panel — the
     case this was breaking), and only drops to its own line via normal
     flex-wrap once the row genuinely runs out of width. */
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px 12px !important;
}
.c7-order-item__price,
.c7-order-item__quantity,
.c7-order-item__total {
  flex: 0 0 auto !important;
}
@media (max-width: 480px) {
  .c7-side-cart__summary-container { padding: 16px 20px; }
}

/* .fw-section is defined further down this file with the same 0,1,0
   specificity as a plain .flc-c7-page — on a tie, the LATER rule in the
   file wins, which was silently winning over these regardless of source
   position. Compounding every class actually present together on the
   element (.fw-section.flc-c7-page, not just .flc-c7-page) raises
   specificity enough to beat .fw-section outright. Confirmed via
   DevTools Box Model on the Larkhaven sibling that the single-class
   version of this fix was NOT actually winning before. */
.fw-section.flc-c7-page { min-height: 50vh; padding: var(--fw-space-md) 0; }
.fw-hero + .fw-section.flc-c7-page { padding-top: var(--fw-space-md); }
/* Product route only ("Back to Wines" + the PDP itself) — no gap above
   the back-link at all. Cart/collection/reservation/club/profile keep
   their normal var(--fw-space-md) top breathing room, untouched. */
.fw-section.flc-c7-page.flc-c7-page--product { padding-top: var(--fw-space-sm); }

/* "Back to Wines" link on Commerce7 product pages (/product/...) — this
   sits outside #c7-content, so it's ours to style; Commerce7's own
   product widget has no built-in way back to the collection. */
.flc-back-link { margin-bottom: var(--fw-space-md); }
.flc-back-link a { color: var(--fw-charcoal-soft); text-decoration: none; font-size: 0.9rem; }
.flc-back-link a:hover { color: var(--fw-clay); text-decoration: underline; }

/* Checkout template's chrome (.fw-checkout-wrap / body.fw-c7-checkout-body,
   not flc-prefixed — core/templates/page-c7-checkout.php hardcodes those
   class names) is styled by forwineries-theme-core's
   core/assets/css/commerce7-overrides.css, loaded on every front-end page
   by core/src/Commerce7/Integration.php. This theme never had a
   flc-checkout-wrap or body.flc-c7-checkout-body in its own markup, so the
   block that used to sit here styling those names never matched anything
   live — dead weight, removed rather than fixed to match, same as every
   other theme already relies on the shared core copy for this. */

.flc-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  /* !important required — the generic bare-button fallback further up
     this file sets border: 1px solid ... !important on every plain
     <button> (including this one, since it matches the bare "button"
     tag selector), and a non-important border:none here loses to that
     regardless of source order, leaving an unwanted border box around
     the hamburger icon. Same category of issue as the pink-button saga
     documented earlier in this file. */
  border: none !important;
  cursor: pointer;
  padding: 6px;
}
.flc-nav-toggle span { width: 24px; height: 2px; background: var(--fw-charcoal); }
/* Defensive: guarantee no background in any interaction state. A pink fill
   was observed here on mobile that doesn't come from any rule in this
   file — likely a browser default tap-highlight or an external stylesheet
   — so this pins it down regardless of source. */
.flc-nav-toggle,
.flc-nav-toggle:hover,
.flc-nav-toggle:focus,
.flc-nav-toggle:active {
  background: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  #flc-primary-nav {
    display: block;
    width: 100%;
    order: 3;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  #flc-primary-nav.is-open { max-height: 600px; opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    #flc-primary-nav { transition: none; }
  }
  #flc-primary-nav > ul { flex-direction: column; gap: 0; padding: var(--fw-space-sm) 0; }
  #flc-primary-nav li { border-top: 1px solid rgba(58,54,48,0.08); }
  #flc-primary-nav a { display: block; padding: 14px 0; margin: 0; }
  /* The sweep underline is a desktop hover affordance — on the stacked
     touch menu it just reads as a stray border under whichever row was
     last tapped. */
  #flc-primary-nav a::before { display: none; }

  /* Submenus on mobile: no hover on touch, and the whole primary nav is
     already tucked behind the hamburger, so there's no real UX cost to
     just always showing children inline (indented) rather than building
     a second expand/collapse tap-toggle on top of the one that already
     opens/closes the whole menu. */
  #flc-primary-nav .menu-item-has-children > a::after { content: ""; }
  #flc-primary-nav .sub-menu {
    display: flex;
    position: static;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 0 var(--fw-space-sm);
    padding: 0;
    background: none;
    border: none;
    border-left: 2px solid rgba(58,54,48,0.12);
    box-shadow: none;
  }
  #flc-primary-nav .sub-menu a { padding: 12px var(--fw-space-sm); font-size: 0.72rem; }
  #flc-primary-nav .sub-menu li { border-top: none; }

  /* Logo stays alone on the left; hamburger + login/cart are grouped as
     one cluster on the right (margin-left:auto on the first of the pair
     pushes that whole trailing group to the edge) instead of the default
     flex space-between spreading all three across the row with an
     awkward gap on each side of the hamburger. */
  .flc-header-main { flex-wrap: wrap; gap: 12px; }
  .flc-nav-toggle { display: flex; order: 1; margin-left: auto; }
  .flc-header-actions { order: 2; }
  #flc-primary-nav { order: 3; }

  .flc-topbar .fw-container { flex-direction: column; gap: 4px; text-align: center; }
  /* The stacked two-line mobile layout above is taller than the 40px
     cap the desktop collapse animation uses — without this the second
     line (phone/reserve) renders half-clipped. */
  .flc-topbar { max-height: 76px; }
}

@media (max-width: 480px) {
  .flc-logo { font-size: 1.4rem; gap: 6px; }
  .flc-logo span.flc-logo-sub { font-size: 0.52rem; letter-spacing: 0.16em; }
  .flc-header-actions { gap: 10px; }
  #c7-account { font-size: 0.72rem; }
}

/* =========================================================
   5. WINE / CLUB CARDS (used by Commerce7 shortcodes)
========================================================= */
.fw-section { padding: var(--fw-space-xl) 0; }
/* Compact variant — small connective sections (the homepage stats strip)
   that shouldn't command a full section's worth of vertical air. */
.fw-section--tight { padding: var(--fw-space-lg) 0; }
.fw-section--cream { background: var(--fw-cream-raised); }
.fw-section-head { max-width: 680px; margin: 0 auto var(--fw-space-lg); text-align: center; }
.fw-section-head p { color: var(--fw-charcoal-soft); font-size: 1.05rem; }

/* Horizontal image+details layout, matching Commerce7's own default
   storefront product listing (see readme.txt section 2) — no card
   background/border/padding "box" at all, just image + text sitting
   directly on the page, the same plain presentation Commerce7's own
   listing uses. The bottle image keeps its natural aspect ratio,
   uncropped, at a fixed column width instead of a fixed-height box. */
/* Plain, boxless layout by default — used directly on the page (homepage
   "Our Wines" section, and the full Wines Catalog at /collection/wines/),
   the same presentation Commerce7's own listing uses. Still exposed as
   --fw-wine-* custom properties (unset = the neutral defaults below, so
   these two built-in usages are unaffected) so a Featured Wines Teaser
   placed standalone elsewhere via Elementor can opt into a boxed-card
   look through its Style tab (see class-flc-c7-elementor-widget.php's
   register_style_controls()) without changing the default look here. */
.flc-wine-grid {
  display: grid;
  grid-template-columns: var(--fw-wine-grid-columns, repeat(auto-fit, minmax(440px, 1fr)));
  gap: var(--fw-wine-grid-gap, var(--fw-space-xl)) var(--fw-wine-grid-gap, var(--fw-space-lg));
}
.flc-wine-card {
  display: flex;
  align-items: flex-start;
  gap: var(--fw-space-md);
  background: var(--fw-wine-card-bg, transparent);
  border-radius: var(--fw-wine-card-radius, 0);
  padding: var(--fw-wine-card-padding, 0);
}
/* Only wines marked in Settings > Commerce7 > "Featured wine slugs" get
   this — everything else stays the plain, boxless layout above. A subtle
   left accent rather than a filled background box, so it stands out
   without looking like a different, heavier card style bolted on. */
.flc-wine-card--featured { border-left: 3px solid var(--fw-clay); padding-left: var(--fw-space-sm); }
.flc-wine-featured-tag {
  display: inline-block;
  color: var(--fw-clay);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Wraps .flc-wine-img so the scarcity badge below has an absolute-
   position anchor without changing the image's own flex sizing — the
   wrapper takes over the flex-item role .flc-wine-img used to play
   directly, with identical width so the layout is unchanged otherwise. */
.flc-wine-card .flc-wine-img-wrap { position: relative; flex: 0 0 var(--fw-wine-img-size, 170px); width: var(--fw-wine-img-size, 170px); }
.flc-wine-card .flc-wine-img {
  display: block;
  margin: 0 auto;
  width: var(--fw-wine-img-size, 170px);
  height: auto;
  max-height: 380px;
  object-fit: contain;
}
/* Distinct from .flc-wine-featured-tag (subtle gold text, "this wine is
   worth noticing") — this is urgency, not curation, so it gets an actual
   filled pill rather than plain text, positioned on the image itself
   where it can't be missed while scanning the grid. */
.flc-wine-scarcity-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--fw-clay);
  color: var(--fw-cream);
  font-family: var(--fw-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: var(--fw-radius-sm);
  max-width: calc(100% - 16px);
}
/* On the product page there's no image wrap to anchor to (Commerce7 owns
   the product image inside #c7-content) — shown inline above the mount
   instead of pinned to a corner. */
.flc-wine-scarcity-badge--standalone {
  position: static;
  display: inline-block;
  margin-bottom: var(--fw-space-md);
  max-width: none;
}
.flc-wine-card-body { flex: 1; min-width: 0; text-align: left; padding-top: 4px; }
.flc-wine-card h3 { margin-bottom: 2px; font-size: 1.5rem; line-height: 1.2; }
.flc-wine-card h3 a { color: inherit; text-decoration: none; }
.flc-wine-card h3 a:hover { text-decoration: underline; }
.flc-wine-card > a { display: block; }
.flc-wine-subtitle { color: var(--fw-charcoal-soft); font-size: 1rem; margin-bottom: var(--fw-space-sm); }
.flc-wine-teaser { color: var(--fw-charcoal); font-size: 0.98rem; line-height: 1.6; margin-bottom: var(--fw-space-sm); }
.flc-wine-vintage { color: var(--fw-charcoal-soft); font-size: 0.85rem; margin-bottom: var(--fw-space-xs); }
.flc-wine-price { color: var(--fw-clay); font-weight: 500; margin-bottom: var(--fw-space-sm); }
@media (max-width: 560px) {
  .flc-wine-card { flex-direction: column; align-items: center; text-align: center; }
  .flc-wine-card .flc-wine-img { width: var(--fw-wine-img-size, 170px); flex: none; max-height: 300px; }
  .flc-wine-card-body { text-align: center; padding-top: 0; }
  /* The featured card's left accent bar (border-left + padding-left)
     only makes sense in the desktop horizontal layout — once the card
     stacks into a centered column, that one-sided left padding skews
     the whole centered stack off-center. Switch to a top bar instead,
     which stays balanced regardless of centering. */
  .flc-wine-card--featured {
    border-left: none;
    padding-left: 0;
    border-top: 3px solid var(--fw-clay);
    padding-top: var(--fw-space-sm);
  }
}
.flc-wine-meta {
  color: var(--fw-charcoal-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* =========================================================
   RELATED WINES SLIDER
   inc/commerce7.php, flc_c7_render_related_wines() — the "More From Fault
   Line Cellars" rail on a product page. 4 cards visible at a time on
   desktop, scroll-snapped so touch/trackpad swipe works with zero JS;
   assets/js/theme.js only drives the prev/next arrow BUTTONS (scrolling
   the track by one page and disabling an arrow at either end) and is
   fully optional — the track is a plain scrollable element either way.
   Reuses .flc-wine-card's existing image/title/subtitle/buy-button
   styling via the --slider modifier below rather than inventing a second
   card design, same "one card component" rule as the Wines Catalog above. */
.flc-wine-slider { position: relative; display: flex; align-items: center; gap: var(--fw-space-sm); }
.flc-wine-slider-track {
  display: flex;
  gap: var(--fw-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.flc-wine-slider-track::-webkit-scrollbar { display: none; }
.flc-wine-slider-item {
  flex: 0 0 calc(25% - var(--fw-space-md) * 3 / 4);
  scroll-snap-align: start;
}

/* Stacked (image-on-top) card, same treatment .flc-wine-card already gets
   at its own mobile breakpoint — reused here at every width, since 4
   narrow columns need a compact vertical card regardless of viewport. */
.flc-related-wines-wrap { padding: var(--fw-space-lg) 0; }

.flc-wine-card--slider { flex-direction: column; align-items: center; text-align: center; height: 100%; }
.flc-wine-card--slider .flc-wine-img-wrap { width: 100%; flex: none; }
/* Caps bottle height so a related-wine tile stays compact — the base
   .flc-wine-img rule's own max-height (380px) was sized for a horizontal
   catalog card at a fixed 170px width; without a cap here, a 100%-width
   slider column would let the bottle blow up to its full unconstrained
   height instead (this exact bug already bit the sibling Larkhaven theme's
   first version of this same slider — fixed here from the start). */
.flc-wine-card--slider .flc-wine-img { width: 100%; flex: none; max-height: 260px; object-fit: contain; }
.flc-wine-card--slider .flc-wine-card-body { display: flex; flex-direction: column; text-align: center; padding-top: var(--fw-space-xs); flex: 1; }
.flc-wine-card--slider .flc-wine-card-body h3 { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.flc-wine-card--slider .flc-wine-card-body .c7-buy-product { margin-top: auto; padding-top: var(--fw-space-sm); }

.flc-wine-slider-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--fw-clay);
  border-radius: 50%;
  background: var(--fw-cream);
  color: var(--fw-clay);
  cursor: pointer;
  transition: background 0.2s var(--fw-ease), color 0.2s var(--fw-ease);
}
.flc-wine-slider-arrow:hover:not(:disabled) { background: var(--fw-clay); color: var(--fw-cream); }
.flc-wine-slider-arrow:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 900px) {
  .flc-wine-slider-item { flex-basis: calc(50% - var(--fw-space-md) / 2); }
}
@media (max-width: 560px) {
  /* Peeks the next card at the edge — a common, deliberate carousel cue
     that there's more to scroll to, rather than a single full-width card
     that reads as the only one. */
  .flc-wine-slider-item { flex-basis: 82%; }
  .flc-wine-slider-arrow { width: 36px; height: 36px; }
}

/* Wines Catalog widget (inc/commerce7.php, flc_c7_render_wines_catalog())
   + assets/js/wines-catalog.js */
/* Two zones: type-filter pills on the left, search + varietal + sort
   grouped together on the right — each group sizes to its own content
   (nowrap) rather than being forced into equal shares, so the row stays
   on one line down to the 900px breakpoint below, where it stacks. */
.flc-catalog-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
  padding-bottom: var(--fw-space-md);
  border-bottom: 1px solid rgba(58, 54, 48, 0.12);
}
.flc-catalog-filter { display: flex; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; }
.flc-catalog-controls-right { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--fw-space-sm); flex: 0 0 auto; margin-left: auto; }
/* Search, dropdowns, and type buttons all share this same pill shape now
   — one consistent control style across the row instead of rounded
   buttons next to rectangular boxes. */
.flc-catalog-pill,
.flc-catalog-select,
.flc-catalog-search {
  background: transparent;
  border: 1px solid rgba(58, 54, 48, 0.25) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-family: var(--fw-font-body);
  font-size: 0.85rem;
  color: var(--fw-charcoal) !important;
}
.flc-catalog-pill { cursor: pointer; }
.flc-catalog-pill.is-active,
.flc-catalog-pill:hover,
.flc-catalog-pill:focus {
  background: var(--fw-clay) !important;
  border-color: var(--fw-clay) !important;
  color: var(--fw-cream) !important;
}
.flc-catalog-select { background: var(--fw-cream) !important; min-width: 160px; }
/* Icon-first, not text-first: at rest this is just the magnifying glass
   in a circle-ish pill (42px, no room for the placeholder to actually
   show) — it only expands into a real text field once focused or once
   it has a value. :not(:placeholder-shown) is what keeps it expanded
   after a value is typed and the field loses focus, instead of snapping
   back to icon-only and hiding what's currently filtering the grid.
   Grows in normal flow (not absolutely positioned over its neighbor) —
   an earlier version overlaid the expanded field on top of the varietal
   select next to it instead of pushing it aside, which looked like a
   rendering bug (the focus ring cutting across the dropdown). Growing
   .flc-catalog-controls-right's own content is safe here because that
   group is pushed flush-right via margin-left: auto rather than the
   parent's old justify-content: space-between — so the left-hand
   type-filter pills never move no matter how wide the right-hand group
   gets. */
.flc-catalog-search-wrap {
  position: relative;
  flex: 0 0 auto;
}
.flc-catalog-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--fw-charcoal-soft);
  pointer-events: none;
  z-index: 2;
}
.flc-catalog-search {
  background: var(--fw-cream) !important;
  /* !important: Hello Elementor's own reset (input[type="search"] {
     width: 100%; }) has an attribute selector PLUS a type selector —
     specificity (0,1,1) — which technically edges out a bare class
     selector like this one (0,1,0). Without !important that rule wins
     at rest (this collapses to some fallback intrinsic width instead of
     42px), and only the :focus state (specificity (0,2,0), which does
     win) snaps to the correct 200px — visible as the field "shrinking"
     on click instead of expanding from a stable 42px. */
  width: 42px !important;
  min-width: 0 !important;
  padding-left: 34px !important;
  transition: width 0.2s ease;
}
.flc-catalog-search:focus,
.flc-catalog-search:not(:placeholder-shown) {
  width: 200px !important;
}
.flc-catalog-search::placeholder { color: var(--fw-charcoal-soft); }
/* Removes the default red/browser "X" clear-button styling some browsers
   apply to type="search" so it matches the rest of the field's chrome. */
.flc-catalog-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.flc-catalog-empty {
  text-align: center;
  color: var(--fw-charcoal-soft);
  padding: var(--fw-space-lg) 0;
}
.flc-catalog [hidden] { display: none; }

/* --- Mobile / tablet --- */
@media (max-width: 900px) {
  /* auto-fit + a fixed 440px minimum overflows any container narrower
     than that instead of shrinking (a well-known CSS Grid trap) — force
     a single column once there's no room for two anyway. Also tighten
     the 112px/64px desktop gap — stacked single-column cards on a phone
     don't need that much air between them. */
  .flc-wine-grid { grid-template-columns: 1fr; gap: var(--fw-space-lg); }

  /* Two groups side by side needs real width to read cleanly — stack
     them instead of letting the row get cramped. */
  .flc-catalog-controls { flex-wrap: wrap; justify-content: center; margin-bottom: var(--fw-space-md); padding-bottom: var(--fw-space-sm); }
  .flc-catalog-filter,
  .flc-catalog-controls-right { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .flc-catalog-select,
  .flc-catalog-search { width: 100%; min-width: 0; }
  .flc-catalog-search-wrap { width: 100%; }
  .flc-catalog-controls-right { flex-direction: column; align-items: stretch; }
}

/* --fw-club-* custom properties: same "set once on the grid, inherit
   down" pattern as .flc-wine-grid above — see that comment block for why,
   and register_style_controls() in class-flc-c7-elementor-widget.php for
   where the Elementor "Club Teaser" widget's Style tab sets them. */
.fw-club-grid {
  display: grid;
  grid-template-columns: var(--fw-club-grid-columns, repeat(auto-fit, minmax(280px, 1fr)));
  gap: var(--fw-club-grid-gap, var(--fw-space-md));
}
.fw-club-card {
  background: var(--fw-club-card-bg, var(--fw-charcoal));
  color: var(--fw-club-card-color, var(--fw-cream));
  padding: var(--fw-space-lg) var(--fw-space-md);
  border-radius: var(--fw-club-card-radius, var(--fw-radius));
  text-align: center;
}
.fw-club-card h3 { color: var(--fw-club-card-color, var(--fw-cream)); }
.fw-club-card .fw-eyebrow { color: var(--fw-clay); }

.flc-c7-notice {
  border: 1px dashed var(--fw-clay);
  background: var(--fw-cream-raised);
  color: var(--fw-charcoal-soft);
  padding: var(--fw-space-md);
  text-align: center;
  font-size: 0.9rem;
  border-radius: var(--fw-radius);
}

/* Team page (page-templates/page-team.php) */
.fw-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fw-space-md);
}
.fw-team-card {
  background: var(--fw-cream);
  border: 1px solid rgba(58, 54, 48, 0.08);
  border-radius: var(--fw-radius);
  overflow: hidden;
}
.fw-team-photo { width: 100%; min-height: 280px; object-fit: cover; }
.fw-team-card-body { padding: var(--fw-space-sm) var(--fw-space-sm) var(--fw-space-md); }
.fw-team-card h2 { margin-bottom: 2px; font-size: 1.3rem; }
.fw-team-role {
  color: var(--fw-clay);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--fw-space-xs);
}

/* Full-bleed clay (terracotta) section band — a warm editorial pull-quote
   interruption. Cream text throughout, since it's sitting on the mid-tone
   accent rather than the page's own light background. */
.fw-section--signal { background: var(--fw-clay); color: var(--fw-cream); }
.fw-eyebrow--on-signal,
h2.flc-on-signal { color: var(--fw-cream); }
/* On the clay band the chip's clay-tinted outline vanishes — swap it
   for a translucent cream outline that reads against the accent. */
.fw-eyebrow--on-signal { border-color: rgba(var(--fw-cream-rgb), 0.5); }

/* Testimonials & Press (front-page.php) — oversized italic pull-quotes
   directly on the clay band, no card border/background needed since the
   band itself already separates this from the rest of the page. */
.flc-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fw-space-lg) var(--fw-space-md);
}
.flc-testimonial-card {
  padding-top: var(--fw-space-md);
  text-align: left;
}
.flc-testimonial-quote {
  font-family: var(--fw-font-accent);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fw-cream);
  margin-bottom: var(--fw-space-sm);
}
.flc-testimonial-quote::before { content: "\201C"; color: var(--fw-cream); opacity: 0.5; }
.flc-testimonial-quote::after { content: "\201D"; color: var(--fw-cream); opacity: 0.5; }
.flc-testimonial-source {
  display: block;
  color: var(--fw-cream);
  font-family: var(--fw-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "As Seen In" press strip (front-page.php) — an editorial "masthead
   citation" treatment (thin rule above/below each name, italic serif,
   generous spacing) rather than a cramped row of dashed to-do boxes,
   since most sites run this section before any real logos are on hand.
   Real logo images still get the classic muted/grayscale-until-hover
   treatment once uploaded; the placeholder state below is what should
   look intentional and finished on its own, not like a stand-in. */
.flc-press-section { text-align: center; padding-top: var(--fw-space-xl); padding-bottom: var(--fw-space-xl); }
/* inline-block, not block — the eyebrow is a bordered chip now, and a
   block-level chip's pill outline would stretch the full container
   width; the section's own text-align:center centers it fine. */
.flc-press-section .fw-eyebrow { display: inline-block; margin-bottom: var(--fw-space-xs); }
.flc-press-heading { margin-bottom: var(--fw-space-lg); }
/* Continuous sliding "masthead" strip instead of wrapping to a second
   row once there are more publications than fit one line — front-
   page.php renders the item list twice (the second copy aria-hidden,
   tabindex="-1", visual-only) and this animates the combined row exactly
   -50% of its own width, which is precisely one full copy's width, so
   the moment the first copy has scrolled fully off, the (identical)
   second copy is sitting exactly where the first one started — the loop
   restarts with no visible seam. Fade mask softens the hard edges where
   logos enter/exit instead of an abrupt clip. Paused on hover/focus so
   a visitor can actually click a logo; disabled entirely under
   prefers-reduced-motion (vestibular-disorder safety, not just a nicety
   — continuous motion is exactly the kind of thing that spec exists for). */
.flc-press-strip-outer {
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.flc-press-strip {
  display: flex;
  align-items: center;
  gap: var(--fw-space-lg);
  width: max-content;
  animation: flc-press-scroll 32s linear infinite;
}
.flc-press-strip-dup { display: contents; }
.flc-press-strip-outer:hover .flc-press-strip,
.flc-press-strip-outer:focus-within .flc-press-strip { animation-play-state: paused; }
@keyframes flc-press-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .flc-press-strip { animation: none; }
}
/* Descendant selectors, not direct-child (>) — the duplicated set for
   the seamless loop sits inside .flc-press-strip-dup (display:contents),
   which removes it from the BOX tree for layout but not the DOM tree,
   so a > combinator here would silently miss every duplicated item. */
.flc-press-strip a,
.flc-press-strip .flc-press-logo-placeholder {
  flex: 0 0 auto;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flc-press-strip img {
  max-height: 38px;
  width: auto;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.flc-press-strip a:hover img,
.flc-press-strip a:focus-visible img { filter: grayscale(0%); opacity: 1; }
/* Real publication logos are trademarked, so an unset row shows this
   labeled placeholder instead of a fabricated logo image — same honesty-
   over-lorem-ipsum approach as every other ph-img placeholder. Thin
   rules above/below (not a box outline all the way round) read as a
   citation/masthead credit rather than an unfinished to-do item — the
   .ph-img default box/min-height/dashed-border look is overridden
   entirely rather than adapted, since none of it fits this treatment. */
.flc-press-logo-placeholder {
  width: auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fw-space-sm) var(--fw-space-xs);
  border: none;
  border-top: 1px solid rgba(58, 54, 48, 0.16);
  border-bottom: 1px solid rgba(58, 54, 48, 0.16);
  border-radius: 0;
  background: none;
}
.flc-press-logo-placeholder .ph-tag {
  position: static;
  background: none;
  color: var(--fw-charcoal-soft);
  padding: 0;
  font-family: var(--fw-font-accent);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

/* Wine Club tier comparison (/club, page-templates/page-c7-content.php)
   — same gold-rule accent as Testimonials, but keeps a defined card
   boundary (unlike the pull-quotes) since this is a pricing comparison,
   where visitors benefit from clear separation between options rather
   than open editorial spacing. */
.fw-club-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fw-space-md);
  align-items: start;
}
.fw-club-tier-card {
  background: var(--fw-cream);
  border: 1px solid rgba(58, 54, 48, 0.1);
  border-top: 2px solid var(--fw-clay);
  padding: var(--fw-space-lg) var(--fw-space-md);
  text-align: center;
}
.fw-club-tier-price {
  color: var(--fw-clay);
  font-family: var(--fw-font-accent);
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: var(--fw-space-xs);
}
.fw-club-tier-card .c7-club-join-button { margin-top: var(--fw-space-sm); }

/* Social feed photo grid (front-page.php) — a hand-curated grid, not a
   live Instagram API embed: the Graph API requires an app review and an
   access token that expires and needs periodic renewal, which is a poor
   fit for a theme meant to be handed off to a non-technical client with
   no ongoing developer support. A client swaps photo URLs here the same
   way they already do for Team photos. */
.flc-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fw-space-xs);
}
.flc-social-grid a { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--fw-radius); }
.flc-social-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--fw-ease), filter 0.4s ease; }
.flc-social-grid a:hover img { transform: scale(1.06); filter: brightness(1.05) saturate(1.1); }
/* A whisper of warm tint sweeping up on hover — signals "this is a link
   out" without a heavy icon overlay. */
.flc-social-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--fw-clay-rgb), 0.28), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.flc-social-grid a:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .flc-social-grid img { transition: none; }
  .flc-social-grid a:hover img { transform: none; }
}

/* Homepage email capture (front-page.php) — the same real [c7_subscribe]
   widget as the footer's "Stay in the Loop", but this section sits on a
   light background so it needs its own light-palette version rather than
   the footer's off-white-on-merlot styling. Structural fixes (column
   .c7-form__group, full-width .c7-form__field) match the footer's for
   the same confirmed-via-DevTools reasons — see style.css's "FOOTER"
   section for the full explanation. The submit button is left
   unstyled here on purpose: the global bare-button fallback (section 2)
   already renders charcoal-on-transparent, which is already correct
   against this light background, unlike the footer's dark one. */
.flc-email-capture { max-width: 480px; margin: 0 auto; text-align: center; }
.flc-email-capture .c7-form__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: var(--fw-space-sm) !important;
  margin-top: var(--fw-space-md);
}
.flc-email-capture .c7-form__field { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.flc-email-capture label {
  display: block !important;
  width: 100%;
  margin: 0 0 6px !important;
  color: var(--fw-charcoal-soft);
  font-size: 0.78rem;
  text-align: left;
}
.flc-email-capture input[type="email"] {
  width: 100% !important;
  height: auto !important;
  padding: 6px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(58, 54, 48, 0.3) !important;
  background: transparent !important;
  color: var(--fw-charcoal) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.flc-email-capture input[type="email"]:focus { border-bottom-color: var(--fw-clay) !important; outline: none; }
.flc-email-capture button,
.flc-email-capture [type="submit"] {
  width: auto !important;
  padding: 10px 24px !important;
}

/* Site search (searchform.php) — reused as-is by the header's search
   toggle panel, 404.php, and search.php, so it's defined once, generic,
   not scoped to any one of those. All three sit on the theme's normal
   off-white/light backgrounds, so unlike the newsletter form this needs
   no separate light/dark variant.

   The icon sits INSIDE the input as an absolutely-positioned overlay
   button (same idea as the Wines Catalog's own search, inc/commerce7.php
   .flc-catalog-search-wrap) rather than as a second element next to it —
   a bordered icon button beside a bordered input reads as two
   disconnected boxes rather than one search bar, especially once the
   input's own focus-visible outline (section 2 — WCAG 2.4.7, kept
   deliberately rather than suppressed) adds a second, differently-
   colored ring around just the input on open (the panel auto-focuses
   it, see assets/js/theme.js). One box, one border, is the fix — not
   fighting the accessibility outline. */
.flc-search-form-wrap { margin-bottom: var(--fw-space-md); }
.flc-search-form-field { position: relative; max-width: 480px; }
.flc-search-input {
  width: 100%;
  padding: 11px 46px 11px 16px;
  border: 1px solid rgba(58, 54, 48, 0.25);
  border-radius: var(--fw-radius-sm);
  font-family: var(--fw-font-body);
  font-size: 0.95rem;
  color: var(--fw-charcoal);
  background: var(--fw-cream);
  box-sizing: border-box;
}
.flc-search-submit {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: none !important;
  /* !important: the global button:has(svg) icon-only fallback (section 2)
     already sets color:inherit !important, which would otherwise win
     over a plain (non-important) color here regardless of this rule's
     own specificity. */
  color: var(--fw-charcoal-soft) !important;
}
.flc-search-submit:hover { color: var(--fw-clay) !important; background: transparent !important; }

/* Contact form (page-templates/page-contact.php) */
.fw-contact-form label {
  display: block;
  font-family: var(--fw-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fw-contact-form input[type="text"],
.fw-contact-form input[type="email"],
.fw-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(58, 54, 48, 0.2);
  border-radius: var(--fw-radius-sm);
  background: var(--fw-cream);
  color: var(--fw-charcoal);
  font-family: var(--fw-font-body);
  font-size: 1rem;
}
.fw-contact-form input:focus-visible,
.fw-contact-form textarea:focus-visible {
  outline: 2px solid var(--fw-clay);
  outline-offset: 1px;
}
.fw-contact-form button[type="submit"] { margin-top: var(--fw-space-xs); }
/* Honeypot — off-screen (not display:none) so unsophisticated bots that
   check for that specific property still fill it in, while aria-hidden
   plus tabindex="-1" (on the input, in page-contact.php) keeps it fully
   out of the way for screen reader and keyboard users. */
.fw-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fw-form-notice {
  padding: var(--fw-space-sm) var(--fw-space-md);
  border-radius: var(--fw-radius-sm);
  margin-bottom: var(--fw-space-md);
  font-size: 0.95rem;
}
.fw-form-notice--success { background: var(--fw-cream-raised); border: 1px solid var(--fw-clay); color: var(--fw-charcoal); }
.fw-form-notice--error { background: #fbeaea; border: 1px solid #c0392b; color: #7a2418; }

/* Blog archive (archive.php) */
.flc-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--fw-space-md);
}
.flc-blog-card {
  background: var(--fw-cream);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--fw-ease), box-shadow 0.4s var(--fw-ease), border-color 0.25s ease;
}
.flc-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fw-shadow-lg);
  border-color: rgba(var(--fw-clay-rgb), 0.45);
}
.flc-blog-card-media { display: block; overflow: hidden; }
.flc-blog-card-media img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s var(--fw-ease);
}
/* Image zooms gently inside its clipped frame while the card lifts —
   the two motions together are what make the hover feel dimensional. */
.flc-blog-card:hover .flc-blog-card-media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .flc-blog-card, .flc-blog-card-media img { transition: none; }
  .flc-blog-card:hover { transform: none; }
  .flc-blog-card:hover .flc-blog-card-media img { transform: none; }
}
.flc-blog-card-media .ph-img { min-height: 220px; }
.flc-blog-card-body { padding: var(--fw-space-md) var(--fw-space-sm) var(--fw-space-md); }
.flc-blog-meta {
  display: block;
  color: var(--fw-clay);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--fw-space-xs);
}
.flc-blog-card h2 { font-size: 1.4rem; margin-bottom: var(--fw-space-xs); }
.flc-blog-card h2 a { color: inherit; text-decoration: none; }

/* Events archive card — reuses .flc-blog-card wholesale, this is just the
   date badge overlaid on the card image (/events, archive-flc_event.php).
   Scoped to .flc-event-card specifically rather than changing the shared
   .flc-blog-card-media rule, so real blog post cards are unaffected. */
.flc-event-card .flc-blog-card-media { position: relative; }
.flc-event-date-badge {
  position: absolute;
  top: var(--fw-space-xs);
  left: var(--fw-space-xs);
  background: var(--fw-clay);
  color: var(--fw-cream);
  font-family: var(--fw-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--fw-radius-sm);
}
.flc-blog-card h2 a:hover { color: var(--fw-clay); }

.flc-pagination {
  display: flex;
  justify-content: center;
  gap: var(--fw-space-xs);
  margin-top: var(--fw-space-lg);
  flex-wrap: wrap;
}
.flc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(58, 54, 48, 0.15);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-charcoal);
  text-decoration: none;
}
.flc-pagination .page-numbers.current { background: var(--fw-clay); border-color: var(--fw-clay); color: var(--fw-cream); }
.flc-pagination .page-numbers:hover:not(.current) { border-color: var(--fw-clay); }

/* Single post (single.php) */
.flc-post-hero img { display: block; width: 100%; max-height: 480px; object-fit: cover; }
.flc-post-container { max-width: 760px; }
.flc-post-header { text-align: center; margin-bottom: var(--fw-space-lg); }
.flc-post-meta { color: var(--fw-charcoal-soft); font-size: 0.9rem; }
.flc-post-content { font-size: 1.05rem; line-height: 1.75; }
.flc-post-content > * + * { margin-top: var(--fw-space-sm); }
.flc-post-content img { max-width: 100%; height: auto; border-radius: var(--fw-radius); }
.flc-post-footer { margin-top: var(--fw-space-xl); padding-top: var(--fw-space-md); border-top: 1px solid rgba(58, 54, 48, 0.1); }
.flc-post-terms { color: var(--fw-charcoal-soft); font-size: 0.9rem; }
.flc-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin: var(--fw-space-md) 0;
  flex-wrap: wrap;
}
.flc-post-nav a { text-decoration: none; color: var(--fw-clay); font-weight: 500; }
.flc-post-nav a:hover { text-decoration: underline; }
.flc-post-back { text-align: center; margin-top: var(--fw-space-md); }
@media (max-width: 600px) {
  .flc-post-nav { flex-direction: column; text-align: center; }
}

/* .c7-buy-product (Commerce7's own quantity + Add to Cart mount point —
   used both by our own wine cards and inside Commerce7's official
   [c7_collection] widget on the homepage) renders its qty input/button
   as its own internal flex/block row, which text-align:center on a
   surrounding wrapper never reaches (that only affects inline content,
   not how a block/flex child arranges ITS OWN children). Once card
   layouts stack to a centered single column on mobile, that left this
   row visibly left-aligned while everything else around it centered.
   Forcing display:flex + justify-content:center here takes control of
   that arrangement directly instead of relying on inherited text-align. */
@media (max-width: 600px) {
  .c7-buy-product { display: flex !important; justify-content: center !important; }
}

/* =========================================================
   6. REUSABLE PAGE-BUILDING BLOCKS
   Apply these as "CSS Classes" (Advanced tab) on Elementor
   Section/Container + Column widgets so freehand pages still
   match the site system. See readme.txt for usage per block.
========================================================= */

/* Sticky header gets a touch shorter once you've scrolled — keeps
   more screen real-estate on phones. */
#fw-header.is-scrolled .flc-header-main { padding-top: 14px; padding-bottom: 14px; }
#fw-header.is-scrolled .flc-topbar { max-height: 0; opacity: 0; }

/* Header is NOT sticky on mobile. Commerce7 renders its own fixed/sticky
   elements on small screens (mobile checkout/cart action bars — see e.g.
   .c7-account-club-shipment__mobile-actions in commerce7.css, position:
   fixed), and two independent fixed/sticky layers both anchored to the
   viewport edge can end up overlapping each other, which is what caused
   cart/checkout content to render underneath the header instead of below
   it. Trading the always-visible nav for guaranteed no-collision is the
   right call on the limited vertical space of a phone screen anyway. */
@media (max-width: 900px) {
  #fw-header { position: static; }
}

/* Floating cart button — the mobile answer to "no sticky header" above:
   one small fixed element instead of a whole fixed header bar, so it
   can't collide with Commerce7's own fixed cart-drawer/checkout
   elements the way a sticky header did. Toggled by assets/js/theme.js
   once scrolled well past the header. Deliberately does NOT use
   transform/filter/backdrop-filter/contain — any of those would make
   THIS element a new containing block for Commerce7's .c7-side-cart
   drawer (rendered as ITS descendant), breaking its own position:fixed
   coordinates exactly like the backdrop-filter bug documented on
   #fw-header above. position:fixed alone doesn't have that effect, so
   plain positioning + a couple of harmless visual properties is safe. */
#c7-cart.flc-cart-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fw-cream);
  border: 1px solid var(--fw-clay);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(43, 36, 32, 0.25);
}
@media (min-width: 901px) {
  /* Never float on desktop — the sticky header already keeps the cart
     visible at all times there. */
  #c7-cart.flc-cart-float { position: static; width: auto; height: auto; background: none; border: none; box-shadow: none; }
}

/* Hero: an inset, rounded photo "card" with generous margin on the cream
   page background, rather than a full-bleed edge-to-edge photo — reads
   as curated/crafted instead of poster-graphic. Achieved entirely on the
   existing .fw-hero selector (no markup changes needed across the 8
   templates that use it): margin + border-radius + overflow:hidden turn
   the section itself into the card, so the background-image set inline
   per-template keeps working unchanged. */
.fw-hero {
  position: relative;
  /* Overrides .ph-img's width:100% (needed on this card, unlike other
     .ph-img consumers, because .fw-hero always carries its own
     left/right margin below and at the desktop max-width breakpoint —
     100% + nonzero margins doesn't shrink to fit, so the card was
     bleeding off the right edge of the viewport by exactly the margin
     width on mobile instead of sitting symmetrically inset like the
     left side. auto correctly fills available space minus margins. */
  width: auto;
  display: flex;
  /* Bottom-anchored content — the current editorial convention for big
     photo heroes: the photo owns the top two-thirds, the headline sits
     grounded at the base where the scrim is deepest (and therefore where
     text contrast is guaranteed). */
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  color: var(--fw-cream);
  padding: var(--fw-space-xl) clamp(24px, 4vw, 64px) var(--fw-space-lg);
  margin: var(--fw-space-md) var(--fw-space-md) 0;
  border-radius: var(--fw-radius-lg);
  overflow: hidden;
}
/* Every hero gets the same proper hero height regardless of which
   .ph-* gradient-fallback modifier it happens to be paired with for
   its placeholder color — ph-portrait/ph-stone/ph-vineyard-row (480px/
   420px/260px) were built for small split-section images, not
   full-bleed heroes, and background-size:cover still centers correctly
   in a too-short box, but crops down to a narrow sliver instead of a
   proper hero-height crop. Desktop-only (min-width matches the 600px
   mobile breakpoint below): .fw-hero.ph-img (2 classes) would otherwise
   outrank the mobile media query's plain .fw-hero rule on specificity
   alone regardless of viewport, undoing that deliberately shorter
   mobile height. */
@media (min-width: 601px) {
  /* Viewport-proportional cinematic height (svh, so mobile-browser chrome
     never causes a jump), capped so ultra-tall monitors don't get an
     absurdly stretched photo. Compact/band variants below override this. */
  .fw-hero.ph-img { min-height: min(82svh, 800px); }
  .fw-hero { margin: var(--fw-space-lg) auto 0; max-width: calc(var(--fw-container) + 80px); }
}
.fw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* A gentle, even warm-ink wash rather than a hard angled cut — nearly
     clear at the top so the photo reads, deepening decisively at the
     bottom where the (now bottom-anchored) text actually sits, keeping
     it WCAG AA-legible against the brightest plausible photo regions. */
  background: linear-gradient(180deg, rgba(36, 19, 24, 0.1) 0%, rgba(36, 19, 24, 0.22) 45%, rgba(36, 19, 24, 0.82) 100%);
  /* Matches the section's own rounding — needed once .fw-hero--band
     below turns overflow back to visible: without this, this pseudo-
     element's square corners (inset:0 sizes it to the same rect as its
     parent, but corner-radius isn't inherited) would peek past the
     parent's rounded photo corners instead of following them. */
  border-radius: inherit;
}
/* Film-grain texture over every hero photo — an inline SVG turbulence
   tile, so no extra asset request. Kept faint (soft-light, low opacity):
   it should read as photographic warmth, not a visible pattern.
   pointer-events:none so hero buttons/links underneath stay clickable. */
.fw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
  border-radius: inherit;
}
.fw-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  /* Flex items default to min-width:auto (not 0), which refuses to
     shrink below their content's own preferred width — Commerce7's
     reservation-form row (date input + calendar icon + two dropdowns)
     doesn't wrap, so on a narrow phone viewport this flex item (and the
     whole hero card along with it) was being forced wider than the
     available space instead of shrinking to fit, spilling the CTA band
     past its own rounded-card bounds. min-width:0 is the standard fix
     for this flexbox gotcha. */
  min-width: 0;
}
/* Homepage-hero display type goes a size class beyond the global h1
   scale — this is the one place on the site that earns true poster
   scale. Tighter leading than body headings; big serifs collapse
   gracefully at 0.99. */
.fw-hero-content h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.99;
  letter-spacing: -0.03em;
}
.fw-hero-content h1,
.fw-hero-content h2,
.fw-hero-content p,
.fw-hero-content .fw-eyebrow { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.fw-hero-content h1 { color: var(--fw-cream); }
.fw-hero-content h2 { color: var(--fw-cream); }
/* Over a photo the eyebrow chip goes frosted — cream text on a blurred
   dark glass pill — instead of the clay-outline version used on light
   backgrounds, which loses all contrast against a busy photo. Safe spot
   for backdrop-filter: a leaf <span>, no fixed-position descendants. */
.fw-hero-content .fw-eyebrow {
  color: var(--fw-cream);
  border-color: rgba(var(--fw-cream-rgb), 0.35);
  background: rgba(36, 19, 24, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* A short, punchy "why us" line — deliberately smaller and italic rather
   than styled like the main subtext above it, so it reads as a distinct
   supporting hook, not a continuation of the same sentence. */
.flc-hero-differentiator {
  color: var(--fw-cream);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: -8px;
}
@media (max-width: 600px) {
  .fw-hero { padding: var(--fw-space-lg) var(--fw-space-sm); min-height: 340px; margin: var(--fw-space-sm) var(--fw-space-sm) 0; border-radius: 18px; }
  /* The homepage's own hero (.ph-hero — only used there) keeps real
     cinematic presence on phones too; bands/compact heroes keep the
     shorter 340px above. svh, not vh, so iOS URL-bar collapse doesn't
     resize it mid-scroll. */
  .fw-hero.ph-hero { min-height: 76svh; }
}

/* Wraps the optional live c7-reservation-availability widget when it's
   embedded inline in the homepage Reservation CTA band (front-page.php) —
   Commerce7's own widget renders light/card-style internal markup, which
   needs an opaque light backdrop to stay legible against the band's dark
   photo overlay, unlike the plain text/buttons around it. */
/* 420px fit the plain search form, but Commerce7 swaps in its own
   .c7-reservation-type results card after "Check Availability" — that
   component has its own max-width:650px (image + details side by side),
   confirmed via live devtools inspection — and was breaking into an
   awkward, gappy layout squeezed into 420px. Widened to fit it properly;
   the hero-content column here is 800px, so there's room. Every required-
   field asterisk is also hidden — every field in this short form is
   required, so the markers were just clutter, not real information. */
.flc-reservation-widget-embed {
  background: var(--fw-cream);
  /* .fw-hero sets color: var(--fw-cream) (light) on itself so the
     heading/paragraph read against the dark photo — this card's own
     background is that SAME light cream, and without its own color
     reset it was inheriting that light text color too, rendering
     Commerce7's date/dropdown labels as cream-on-cream (invisible). */
  color: var(--fw-charcoal);
  border-radius: var(--fw-radius);
  padding: var(--fw-space-sm);
  margin: var(--fw-space-sm) 0;
  /* width:100% (not just max-width) + border-box: without an explicit
     width, this block box would try to size to its own content's
     preferred width, which pairs with the .fw-hero-content min-width
     fix above — this card only respects the space it's actually GIVEN
     once it isn't also trying to demand more than that itself. */
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
}
.flc-reservation-widget-embed .c7-required::after { display: none; }
/* Commerce7's own .c7-reservation__search (the actual form Commerce7
   renders inside this wrapper) carries a fixed max-width: 905px from
   their own CSS — wider than either this card's 700px CTA-band cap or
   the --page variant's cap below. Without this override the form
   doesn't shrink to fit, it just overflows past our card's right edge
   (our wrapper never clips it), which reads as the card having padding
   on the left but none on the right — that "missing padding" is
   actually Commerce7's own wider form bleeding past our boundary, not
   an asymmetric inset. */
.flc-reservation-widget-embed .c7-reservation__search {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Commerce7's date-picker dropdown (opened from the Date field) is a
   fixed ~606px box positioned via an inline transform their own JS
   computes from the trigger field — on desktop the field's containing
   block is wide enough that this lands fine, but under ~900px the form
   fields stack to full-width and the field's own box shrinks well below
   606px, so the fixed-width calendar spills off both the card and the
   viewport (the inline transform even shifts it flush to the screen's
   left edge, past the card's own padding). !important is required to
   beat Commerce7's inline style attribute. Re-anchoring to the field's
   actual box (instead of fighting their transform math) makes it track
   whatever width mobile actually has. */
@media (max-width: 900px) {
  .c7-date-picker-dropdown {
    position: absolute !important;
    inset: auto auto auto 0 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* Re-anchoring the dropdown (above) isn't enough on its own — the day
     grid inside is a real <table> (React DayPicker's .rdp-month_grid),
     and a table with no explicit width/table-layout always sizes to its
     cells' natural content width rather than shrinking to fit its
     container, so it kept overflowing past the now-correctly-sized
     dropdown regardless. table-layout:fixed + width:100% makes its
     columns share the available width equally instead. */
  .c7-date-picker-dropdown .rdp-month_grid {
    table-layout: fixed !important;
    width: 100% !important;
  }
  /* table-layout:fixed (above) shrinks each day <td> to an even share of
     the table's width (~43px at a 375px phone), but the day-number
     <button> inside each cell has its own fixed padding: 8px 16px and no
     explicit width, so it sizes to its own content instead of its cell —
     barely fitting single-digit dates but overflowing past the cell (and
     into the next column) for every double-digit one, worse the further
     right/lower the grid goes. Forcing it to fill its cell exactly and
     trimming the horizontal padding keeps it inside its column at any
     digit count. */
  .c7-date-picker-dropdown .rdp-day_button {
    width: 100% !important;
    padding: 8px 2px !important;
    box-sizing: border-box !important;
  }
  /* The button fix above still rendered as a tall, narrow pill — its
     own <td> (.rdp-day) carries a fixed padding: 15px on all sides from
     Commerce7's own CSS, sized for the original ~86px-wide desktop
     cell (where 15px padding leaves a reasonable ~56px of content). At
     our ~43px mobile cell that same 15px padding eats 30px of the 43,
     leaving the button barely 10px of width to fill regardless of its
     own width:100% — it was never the button that needed more room,
     it was the cell starving it. */
  .c7-date-picker-dropdown .rdp-day,
  .c7-date-picker-dropdown .rdp-weekday {
    padding: 2px !important;
  }
}
/* Used on the dedicated /reservation page instead of the 420px cap above
   — there the widget is the whole page's content, not a shortcut tucked
   into a narrow homepage CTA band. The base rule's --fw-cream background
   is invisible here (it's the exact same page-background color on this
   route, unlike the dark CTA band it was designed for), so this variant
   switches to the raised/alternating-section tone plus a real border and
   shadow to actually read as a card, and centers at a width close to
   Commerce7's own .c7-reservation__search max-width (905px) instead of
   stretching edge-to-edge. */
.flc-reservation-widget-embed--page {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  background: var(--fw-cream-raised);
  border: 1px solid var(--fw-line);
  box-shadow: var(--fw-shadow-md);
  padding: var(--fw-space-md);
}

/* Shorter variant for mid-page promo bands (e.g. wine club CTA) that reuse
   the hero's full-bleed overlay treatment without the full hero height. */
/* .fw-hero's own overflow:hidden (above) makes the rounded-photo-card
   look work, but this --band variant is also where the live Commerce7
   reservation-availability widget mounts (homepage Reservation CTA) —
   its calendar dropdown is a full month grid (~460px) that must extend
   below the band's own ~420px height to be visible at all. Clipped, the
   dropdown was rendering with a correct internal grid (see the table
   fix above) but with everything past the first row invisible. ::before/
   ::after above now inherit this section's own radius so their corners
   still follow the rounded photo now that this no longer clips them. */
.fw-hero.fw-hero--band { min-height: 420px; overflow: visible; }
@media (max-width: 600px) {
  .fw-hero.fw-hero--band { min-height: 340px; }
}
/* .fw-hero::before (above) is nearly clear at the TOP on purpose — it
   assumes the hero's content is short and bottom-anchored (flex
   align-items:flex-end), so the heading always lands in the gradient's
   dark 82%-opacity zone near the bottom. That assumption breaks on a
   --band CTA: the embedded reservation search form / club tier grid can
   add enough height (especially once the search form's fields stack on
   mobile) to push the eyebrow/heading up into the near-clear top zone,
   reading as low-contrast text fighting the photo behind it instead of
   sitting on a legible scrim. Uniformly dark overlay here instead —
   same WCAG-AA-safe formula as the sibling skins' hero gradient — keeps
   the heading legible no matter how tall the embedded content grows. */
.fw-hero.fw-hero--band::before {
  background: linear-gradient(180deg, rgba(36, 19, 24, 0.55) 0%, rgba(36, 19, 24, 0.72) 100%);
}

/* Shorter still, for every OTHER page's single top-of-page hero (How We
   Work, Visit, Wines, Club, Reservation, Profile, single/archive Event)
   — the full 620px cinematic height only earns its keep as the
   homepage's own first impression; on an inner page it was pushing real
   content an extra screen's height down for no reason. */
@media (min-width: 601px) {
  .fw-hero.fw-hero--compact.ph-img { min-height: 440px; }
}
/* The homepage stacks two of these back to back (Wine Club CTA, then
   Reservation CTA) — as separate rounded cards now (not full-bleed), the
   normal card margin between them already reads as two distinct photo
   moments; no special zero-gap/divider treatment needed. */
.fw-hero.fw-hero--band + .fw-hero.fw-hero--band { margin-top: var(--fw-space-md); }

/* Horizontal CTA button groups (hero, promo bands, visit section). */
.fw-btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--fw-space-sm);
}
@media (max-width: 480px) {
  .fw-btn-row { flex-direction: column; align-items: stretch; }
}

/* Centered CTA under a section (e.g. "View Full Collection"). */
.fw-section-cta { text-align: center; margin-top: var(--fw-space-lg); }

/* Two-up split (image / text) — reorders to image-on-top on mobile. */
.fw-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* Split-section photos get the big-media radius plus a soft grounded
   shadow — they're the largest surfaces inside content sections and
   earn the same sweep as the heroes. */
.fw-split-media {
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--fw-shadow-md);
}
/* Commerce7's own product photo is a bottle cutout on plain background,
   not the wide still-life shot .ph-img's background-size:cover otherwise
   assumes — cover crops a bottle photo into an unrecognizable close-up,
   so it gets shown whole on a neutral card instead. */
.fw-split-media.fw-split-media--product-photo {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--fw-cream-raised);
}
.fw-split.fw-split--reverse .fw-split-media { order: 2; }
.fw-split.fw-split--reverse .fw-split-text { order: 1; }
/* The Flagship Wine widget links its heading to the product page, which
   would otherwise pick up the global anchor color (see the merlot-tint
   comment above the sitewide "a" rule). .flc-wine-card h3 a and
   .flc-blog-card h2 a already override back to inherit for every other
   wine/post title on the site, so this section's title should match. */
.fw-split-text h2 a { color: inherit; text-decoration: none; }
@media (max-width: 780px) {
  .fw-split { grid-template-columns: 1fr; gap: var(--fw-space-md); }
  .fw-split .fw-split-media,
  .fw-split.fw-split--reverse .fw-split-media { order: 1 !important; }
  .fw-split .fw-split-text,
  .fw-split.fw-split--reverse .fw-split-text { order: 2 !important; }
}

/* Homepage in-page "chapter" nav (front-page.php) — desktop only. Active
   dot + smooth scroll are handled in assets/js/theme.js. */
.flc-section-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flc-section-nav a {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(58, 54, 48, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.flc-section-nav a:hover,
.flc-section-nav a:focus-visible,
.flc-section-nav a.is-active {
  background: var(--fw-clay);
  transform: scale(1.35);
}
/* Label stays invisible until hover/focus — the dots alone are enough of
   a landmark once you know what they do, so there's no need for
   permanently-visible text competing with the actual page content. */
.flc-section-nav-label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--fw-charcoal);
  color: var(--fw-cream);
  font-family: var(--fw-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: var(--fw-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.flc-section-nav a:hover .flc-section-nav-label,
.flc-section-nav a:focus-visible .flc-section-nav-label { opacity: 1; }
@media (max-width: 900px) {
  .flc-section-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flc-section-nav a { transition: none; }
  .flc-section-nav-label { transition: none; }
}

/* Homepage photo gallery (front-page.php) — full-bleed edge-to-edge
   (deliberately outside .fw-container, unlike every other homepage
   section), asymmetric mosaic: one large tile (a) plus four smaller
   ones (b-e), matching a magazine spread rather than a boxed gallery
   widget. Named grid-template-areas rather than nth-child/auto-flow so
   each tile's exact position is explicit and easy to reason about. */
.flc-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 260px);
  grid-template-areas:
    "a a b c"
    "a a d e";
  gap: 4px;
}
/* overflow:hidden + a scaling <img> inside (rather than background-size
   growing on the tile itself, the earlier version's approach) — needed
   now that each tile holds a real <img loading="lazy"> instead of a CSS
   background-image, which is what actually makes lazy-loading possible. */
.flc-gallery-tile { overflow: hidden; }
/* Warm full color, not the old grayscale-until-hover — a winery's photo
   wall should look like harvest and wine, not an industrial archive.
   At rest images sit just slightly softened so the mosaic reads as one
   set; hover brings each tile to full vibrancy with a gentle zoom. */
.flc-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.88);
  transition: transform 0.5s var(--fw-ease), filter 0.4s ease;
}
.flc-gallery-tile:hover img { transform: scale(1.05); filter: saturate(1.08); }
.flc-gallery-tile--a { grid-area: a; }
.flc-gallery-tile--b { grid-area: b; }
.flc-gallery-tile--c { grid-area: c; }
.flc-gallery-tile--d { grid-area: d; }
.flc-gallery-tile--e { grid-area: e; }
@media (max-width: 900px) {
  .flc-gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 200px);
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
}
@media (max-width: 480px) {
  .flc-gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 220px);
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";
  }
}
/* Respect the same motion-sensitivity concern as the press strip's
   marquee — the hover-zoom is decorative, not load-bearing. */
@media (prefers-reduced-motion: reduce) {
  .flc-gallery-tile { transition: none; }
}

/* Three-up stat row (est. year / acres / cases produced, etc) — thin
   vertical rules between figures instead of plain grid gaps, and an
   italic serif treatment on the numbers, matching the same editorial-
   citation language as the "As Seen In" strip and Testimonials pull-
   quotes rather than reading as a plainer, older part of the page. */
.fw-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fw-space-md);
  text-align: center;
}
.fw-stats-row > div { position: relative; padding: 0 var(--fw-space-sm); }
.fw-stats-row > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(58, 54, 48, 0.15);
}
.fw-stats-row .fw-stat-num {
  font-family: var(--fw-font-accent);
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fw-clay);
  display: block;
}
.fw-stats-row .fw-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fw-charcoal-soft);
}
@media (max-width: 600px) {
  .fw-stats-row { grid-template-columns: 1fr; gap: var(--fw-space-md); }
  .fw-stats-row > div + div::before { display: none; }
}

/* Generic responsive gap/padding helpers for Elementor sections. */
@media (max-width: 600px) {
  .fw-section { padding: var(--fw-space-md) 0; }
  .fw-section-head { margin-bottom: var(--fw-space-sm); }
}

/* =========================================================
   7. FOOTER
========================================================= */
/* Deep warm ink (not the body-text charcoal) with a big rounded top
   sweep floating over the cream page — the footer reads as its own
   grounded closing panel rather than a flat dark slab. */
#flc-footer {
  background: var(--fw-ink);
  color: var(--fw-cream);
  padding-top: var(--fw-space-xl);
  margin-top: var(--fw-space-lg);
  border-radius: var(--fw-radius-lg) var(--fw-radius-lg) 0 0;
}
#flc-footer a { color: var(--fw-cream); transition: color 0.2s ease, opacity 0.2s ease; }
#flc-footer a:hover { color: var(--fw-clay); }
#flc-footer h4 {
  color: var(--fw-cream);
  font-family: var(--fw-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--fw-space-sm);
}
.flc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--fw-space-lg);
  padding-bottom: var(--fw-space-lg);
  border-bottom: 1px solid rgba(var(--fw-cream-rgb), 0.16);
}
.flc-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.flc-footer-grid li { margin-bottom: 10px; font-size: 0.92rem; }
/* [c7_subscribe] — email-only (inc/commerce7.php dropped
   data-has-name-field), matching the minimal single-field pattern real
   winery footers use (e.g. Joseph Phelps: underline input, small label,
   compact outline button) instead of a boxed multi-field form. Actual
   rendered markup confirmed via live DevTools inspection:
     .c7-subscribe > form.c7-form > div.c7-form__group >
       div.c7-form__field (label+input) + button.c7-btn
   !important throughout because Commerce7's own base CSS is injected by
   its JS after this stylesheet loads, so an equal-specificity rule there
   would otherwise win the cascade tie regardless of source order (same
   reasoning as the .c7-link/.c7-btn overrides further down this file).

   The two rules below (.flc-footer-newsletter / .flc-email-capture) only
   apply once [c7_subscribe] sits inside one of this theme's two built-in
   placements — dropped anywhere else (its own Elementor widget/block/
   shortcode used standalone, e.g. on a page built to show off every
   Commerce7 widget), it falls back to Commerce7's own factory layout:
   .c7-form__field (label above input) sits next to the button in a flex
   ROW with no vertical-alignment rule, so the button — nothing above IT
   — sits noticeably higher than the input, which has a label pushing it
   down. This generic, unscoped rule fixes that baseline case everywhere
   the widget appears, on top of (not instead of) the two placements
   below getting their own fuller styling. */
.c7-subscribe .c7-form__group { align-items: flex-end !important; }

.flc-footer-newsletter .c7-form__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: var(--fw-space-sm) !important;
}
/* Commerce7's own CSS gives .c7-form__field its own margin/padding,
   designed for a wide multi-column layout — zeroed out so the flex gap
   above is the only source of spacing between the field and the button. */
.flc-footer-newsletter .c7-form__field { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.flc-footer-newsletter label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px !important;
  color: var(--fw-cream);
  font-size: 0.78rem;
}
/* Underline instead of a boxed input — same minimal treatment as the
   Joseph Phelps reference this was matched to. */
.flc-footer-newsletter input[type="email"] {
  width: 100% !important;
  height: auto !important;
  padding: 6px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(var(--fw-cream-rgb), 0.4) !important;
  background: transparent !important;
  color: var(--fw-cream) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.flc-footer-newsletter input[type="email"]:focus { border-bottom-color: var(--fw-clay) !important; outline: none; }
/* The widget's own submit button (.c7-btn.c7-btn--primary, confirmed via
   live DevTools) still falls back to this file's global bare-button
   treatment (section 2) for its border/text color — which uses
   --fw-charcoal, nearly invisible against this footer's dark merlot-dark
   background. Same off-white/gold treatment as the footer's legal links
   (verified 9.17:1 contrast) instead, kept compact/left-aligned (not
   full width) to match the reference's small "SIGN UP" button rather
   than a large full-width box. */
.flc-footer-newsletter button,
.flc-footer-newsletter [type="submit"] {
  width: auto !important;
  align-self: flex-start !important;
  padding: 10px 24px !important;
  border-color: var(--fw-cream) !important;
  color: var(--fw-cream) !important;
}
.flc-footer-newsletter button:hover, .flc-footer-newsletter button:focus,
.flc-footer-newsletter [type="submit"]:hover, .flc-footer-newsletter [type="submit"]:focus {
  background-color: var(--fw-clay) !important;
  border-color: var(--fw-clay) !important;
  color: var(--fw-cream) !important;
}
/* Circular outline icon buttons (inline SVGs in footer.php) — fill to
   burgundy on hover. Sized as real 38px touch targets, not bare glyphs. */
.flc-social { display: flex; gap: 10px; margin-top: var(--fw-space-sm); }
.flc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--fw-cream-rgb), 0.3);
  border-radius: 50%;
  color: rgba(var(--fw-cream-rgb), 0.8);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--fw-ease);
}
.flc-social a:hover, .flc-social a:focus-visible {
  background: var(--fw-clay);
  border-color: var(--fw-clay);
  color: var(--fw-cream);
  transform: translateY(-2px);
}
.flc-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm) 0;
  font-size: 0.75rem;
  color: rgba(var(--fw-cream-rgb), 0.65);
}
.flc-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.fw-credit { text-align: center; font-size: 0.68rem; opacity: 0.5; padding-bottom: var(--fw-space-sm); }
.fw-credit a { color: inherit; text-decoration: none; }
.fw-credit a:hover { opacity: 1; text-decoration: underline; }
/* CC BY/BY-SA attribution for the 4 Wikimedia-sourced homepage photos —
   see the comment above this markup in footer.php. Deliberately smaller/
   quieter than .flc-bottom-bar itself (this is compliance text, not
   something a visitor needs to notice), but still real, legible, and
   linked, not hidden. */
.flc-photo-credits {
  padding-bottom: var(--fw-space-sm);
  font-size: 0.68rem;
  color: rgba(var(--fw-cream-rgb), 0.5);
  text-align: center;
}
.flc-photo-credits a { color: rgba(var(--fw-cream-rgb), 0.65); }
.flc-photo-credits a:hover { color: var(--fw-cream); }
.flc-legal-links a { color: var(--fw-cream); text-decoration: none; }
.flc-legal-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .flc-footer-grid { grid-template-columns: 1fr 1fr; }
  .flc-bottom-bar { flex-direction: column; gap: 10px; text-align: center; }
  .flc-legal-links { justify-content: center; }
}
@media (max-width: 560px) {
  .flc-footer-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   9. MOTION & SCROLL REVEAL
   Every animation in this section is wrapped in a
   prefers-reduced-motion guard — nothing here fires unless the visitor's
   OS explicitly allows motion, and the sitewide .flc-reveal-init class
   (added by theme.js only once IntersectionObserver is confirmed
   available and reduced-motion is NOT set) makes the whole system
   opt-in and no-op safely on any browser/user that doesn't want it —
   elements are plain, fully visible, unanimated by default.
========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Reading-progress hairline (header.php / theme.js) — inside the
     motion guard: a continuously-moving bar is exactly the kind of
     ambient motion reduced-motion users opt out of. Sits above the
     sticky header (z-index 999). */
  #flc-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 1200;
    background: var(--fw-clay);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }

  /* Reveal timing/opacity/transform/filter is now owned sitewide by the
     shared core/assets/css/motion.css (.fw-revealable, 2026-09-10
     consolidation across all 5 themes — this theme's own blur-and-rise
     recipe is what the shared version adopted) — it wins on specificity
     regardless of load order, so a rule here would be dead weight, not a
     second source of truth. theme.js still tags elements with
     [data-flc-reveal] and .is-visible; that JS contract is unchanged,
     only the CSS moved. */

  /* Hero text entrance (child sequence + word-by-word headline) moved to
     core/assets/css/motion.css rule 7 and motion.js, where it is shared by
     all five themes and controlled from the Motion settings tab. */

  /* The v1 hero background "zoom" (background-size 112% → 100%) is
     deliberately GONE, not just restyled: a single percentage value
     scales WIDTH with auto height, which abandons cover behavior and
     visibly tiles the photo vertically whenever the hero box is taller
     than the image's own aspect allows — guaranteed on phones, and on
     any viewport now that hero heights are viewport-proportional (svh).
     background-size can't transition from "cover", so there's no safe
     variant of this effect without extra markup; the kinetic headline +
     content stagger above carry the hero's entrance instead. */
}

/* Stat numbers count up from 0 on scroll-in (theme.js) — the CSS here
   just keeps layout stable (tabular figures so digits don't jitter the
   surrounding label's position as the count changes width). */
.fw-stat-num { font-variant-numeric: tabular-nums; }

/* Card lift/tilt on hover, layered on top of each card type's own
   background-color transition (section 5/6) rather than replacing it. */
@media (prefers-reduced-motion: no-preference) {
  .flc-wine-card--featured,
  .flc-testimonial-card,
  .fw-team-card,
  .fw-club-tier-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  }
  .fw-team-card:hover,
  .fw-club-tier-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(58, 54, 48, 0.14);
  }
}