@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ========================================
   MAIN.CSS - Combined Application Styles
   Load order: cms.css → card.css → ws-style.css → shop-left-menu.css
   ======================================== */

@font-face {
  font-family: "Roister";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://orderport-webstore.b-cdn.net/BosmaEstateWinery/fonts/roister-typeface.ttf") format("truetype");
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/questrial/v19/QdVUSTchPBm7nuUeVf70viFl.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.eot");
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.woff2") format("woff2"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.woff") format("woff"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.ttf") format("truetype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-regular-400.eot");
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-regular-400.woff") format("woff"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-regular-400.ttf") format("truetype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.eot");
  src: url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.woff2") format("woff2"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.woff") format("woff"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.ttf") format("truetype"),
    url("https://orderport-webstore.b-cdn.net/Fonts/fa-solid-900.svg#fontawesome") format("svg");
}

/* ========================================
   ROOT VARIABLES - Bosma Estate Winery Design System
   ======================================== */

:root {
  /* ========== TYPOGRAPHY ========== */
  --font-nav: "ltc-kennerley", "LTC Kennerley", "Cormorant Garamond", "Sorts Mill Goudy", "Goudy Old Style", "Roister", "PT Serif", Georgia, serif;
  --font-serif: "Roister", "PT Serif", Georgia, serif;
  --font-display: "Roister", "PT Serif", Georgia, serif;
  --font-display-bold: "Roister", "PT Serif", Georgia, serif;
  --font-heading: "Roister", "PT Serif", Georgia, serif;
  --font-body: "PT Serif", "Plus Jakarta Sans", -apple-system, sans-serif;

  /* Font Sizes */
  --font-size-2xs: 11px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.35;
  --line-height-normal: 1.6;

  /* ========== COLOR PALETTE (Bosma Estate Winery) ========== */
  --color-primary: #2A221C;
  --color-primary-dark: #1F1914;
  --color-primary-light: #3D322B;

  --color-secondary: #96623B;
  --color-accent: #9B9E83;
  --color-dark-accent: #A04B42;

  --color-white: #ffffff;
  --color-black: #2A221C;
  --color-cream: #F8F3EA;
  --color-background: #F8F3EA;

  --color-gray-50: #FAF7F2;
  --color-gray-100: #F3ECE1;
  --color-gray-200: #E6DDCF;
  --color-gray-300: #D8CEBE;
  --color-gray-400: #A89D8E;
  --color-gray-500: #6B6158;
  --color-gray-600: #4D453E;
  --color-gray-700: #362E27;
  --color-gray-800: #2A221C;
  --color-gray-900: #1C1612;

  /* Semantic Colors */
  --color-text: var(--color-primary);
  --color-text-dark: var(--color-primary);
  --color-text-light: var(--color-gray-500);
  --color-border: #E2DACD;
  --color-border-light: rgba(42, 34, 28, 0.12);
  --color-error: #A04B42;

  /* Surface & Navigation */
  --color-surface: #FFFFFF;
  --color-nav-surface: #F8F3EA;
  --color-nav-border: #E2DACD;

  --nav-bg-color: #F8F3EA;
  --nav-text-color: #2A221C;
  --nav-link-color: #2A221C;
  --nav-link-hover-color: #96623B;

  /* Component Colors */
  --color-input-bg: #FFFFFF;
  --color-input-text: #2A221C;
  --color-input-border: #E2DACD;

  /* Overlays */
  --overlay-subtle: rgba(42, 34, 28, 0.05);
  --overlay-light: rgba(42, 34, 28, 0.1);
  --overlay-medium: rgba(42, 34, 28, 0.25);
  --overlay-strong: rgba(42, 34, 28, 0.5);
  --overlay-dark: rgba(28, 22, 18, 0.8);

  /* Spacing & Radii */
  --border-width-thin: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;

  --shadow-sm: 0 2px 8px rgba(42, 34, 28, 0.04);
  --shadow-md: 0 4px 16px rgba(42, 34, 28, 0.08);
  --shadow-lg: 0 8px 24px rgba(42, 34, 28, 0.12);

  --container-max-width: 1280px;
  --header-height: 125px;

  --btn-padding: 12px 24px;
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 1.5px;
  --btn-border: 1px solid #2A221C;

  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 60px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
}

/* Global Letter Spacing Normalization */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, .btn, .label, .price, .prod-title, .sl-menu-link {
  letter-spacing: normal !important;
}

html {
    background-color: white;
}



/* ========================================
   BOOTSTRAP VARIABLE OVERRIDES
   Align Bootstrap variables with design system
   ======================================== */

:root {
  /* Core Brand Colors */
  --purple: var(--color-primary);
  --maroon: var(--color-primary-dark);
  --orange: var(--color-primary-light);
  --light: var(--color-white);
  --darkkhaki: var(--color-primary-light);
  --black: var(--color-black);

  /* Typography */
  --font-family-primary: var(--font-body);
  --font-color: var(--color-text);
  --font-color-rgb: 0, 0, 0;

  /* Borders */
  --border-color: var(--color-border);
  --border: 1px solid var(--border-color);

  /* Primary Colors */
  --primary: var(--color-primary);
  --primary-rgb: 0, 0, 0;
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-white);

  /* Secondary Colors */
  --secondary: var(--color-primary-light);

  /* Background */
  --bg-color: #F1E9DE;
  --modal-bg-color: var(--color-white);
  --bg-input: var(--color-white);

  /* Button Styles */
  --btn-border-color: #000000;
  --btn-bg-color: #F1E9DE;
  --btn-color: #000000;
  --btn-active-bg-color: #000000;
  --btn-active-color: #F1E9DE;
  --btn-active-border-color: #000000;
  --btn-background-color: #F1E9DE;
  --btn-text-color: #000000;
  --btn-hover-background-color: #000000;
  --btn-hover-text-color: #F1E9DE;
  --box-shadow-primary: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);

  /* Links */
  --lnk-color: var(--color-primary);
  --lnk-color-active: var(--color-primary-light);

  /* Headings */
  --head-color: var(--color-primary);

  /* Forms */
  --bg-color-checkbox: var(--color-black);
}
/* ============================================================
   & SCOPE — TEMPLATE BASE
   Everything below is scoped to #box (the store shell wrapper).
   Section order:
     A. Neutral token overrides
     B. Global "show everything" reset
     C. Shell / page layout
     D. Product Display Page (PDP)
   ============================================================ */

/* ------------------------------------------------------------
   A. NEUTRAL TOKENS + SHELL ROOT
   Scoped to #box so the per-store :root above stays untouched.
   ------------------------------------------------------------ */

html,
body,
#aspnetForm,
#page-container,
#mainContainer,
#contentContainer,
#pageContent,
.page-wrapper {
  background-color: #F8F3EA !important;
}

#box {
--color-gray-150: #ececec;
--color-gray-250: #d8d8d8;
--color-gray-750: #1a1a1a;

--color-primary: #2A221C;
--color-primary-dark: #1F1914;
--color-primary-light: #3D322B;

--color-text: #2A221C;
--color-text-dark: #2A221C;
--color-text-light: #6B6158;
--color-background: #F8F3EA;
--color-surface: #FFFFFF;
--color-surface-alt: #F3ECE1;
--color-border: #E2DACD;
--color-border-light: rgba(42, 34, 28, 0.12);

--color-accent: #9B9E83;
--color-accent-secondary: #96623B;

--nav-bg-color: #F8F3EA;
--nav-text-color: #2A221C;
--nav-link-color: #2A221C;
--nav-link-hover-color: #96623B;

--btn-bg-color: #F5EBDB;
--btn-color: #362821;
--btn-border-color: #F5EBDB;
--btn-hover-background-color: #362821;
--btn-hover-text-color: #F5EBDB;

--bg-color: #F8F3EA;
--border-color: #E2DACD;

--pdp-gap: var(--spacing-3xl);
--pdp-media-width: 340px;
/* Fixed #siteHeader is header-height + the 36px auth bar tall; sticky
   elements need to clear that or they scroll up underneath it. */
--sidebar-sticky-top: calc(var(--header-height) + 36px + 16px);

box-sizing: border-box;
color: var(--color-text);
background: #F8F3EA;
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);

/* Clears the fixed #siteHeader (nav + 36px auth bar). Sticky footer: #box
   holds header/pageContent/footer as siblings in the real DOM, so
   stretching it to the viewport and letting #pageContent absorb the slack
   keeps <footer> pinned to the bottom on short pages. */
margin-top: calc(var(--header-height) + 36px);
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--header-height) - 36px);


/* ------------------------------------------------------------
   B. GLOBAL "SHOW EVERYTHING" RESET

   Platform CSS (common.css / common-r2.css / bootstrap-common.css)
   hides a lot of markup by class. `display: revert` rolls each
   element back to its user-agent default, so nothing is lost.

   Deliberately NOT `!important`: inline `style="display:none"` still
   wins. That keeps ASP.NET staging containers (#authContainer,
   #viewCartContainer), jQuery-UI-replaced <select>s, and any JS
   show/hide behaviour working exactly as before.

   The :not() list excludes widget infrastructure that is *supposed*
   to stay hidden until scripted open (dialogs, overlays, menus).

   Only the hidden ancestors need listing — a child of a
   `display: none` element never renders regardless of its own value,
   so no descendant selectors are required here.
   ------------------------------------------------------------ */

/* The exclusions live inside :where() so they contribute ZERO specificity.
   A bare `:not(.a):not(.b)...` chain would score one class each — ~20
   classes — and this rule would then outrank every layout rule below it.
   With :where() the whole selector is just (1,0,1): enough to beat the
   platform's class rules, never enough to beat our own component CSS. */

/* & *:not(script, style, link, meta):not(:where(
  .aspNetHidden,
  .ui-helper-hidden, .ui-helper-hidden-accessible,
  .ui-selectmenu-menu, .ui-menu, .ui-dialog, .ui-autocomplete,
  .ui-datepicker, .ui-widget-overlay,
  .overlay, .simple_overlay, .mask, .expose, .cc_dialog, .modal, .tooltip,
  .d-none, .hidden, .section-loader, .section-loader *, .template,
  .add-to-cart-confirmation-message,
  [hidden], [aria-hidden="true"]
)) {
  display: revert;
  visibility: visible;
} */

/* --- Platform rules that hide real content ---
   These are in common.css and either carry `!important` or outrank the
   reset above, so each needs an explicit `!important` un-hide.
   Line references are to /CSS/common.css.

     .three-items-across .prod-content            (2158) product copy
     .three-items-across .add-to-cart .cmd-container (2178) qty + button
     .N-items-across .productItem ... .stock      (2209/2309) !important
     .N-items-across .productItem ... .limited-offer  (2209/2309) !important
     .three-items-across-menu .menu-header        (2193) sidebar heading
     .three-items-across-container .activeCart    (2180)
   Everything the platform hides for a real reason (.section-loader *,
   select.ddl.custom.inline, .hidden, a.on-waiting-list) is left alone. */

& .productItem .prod-content,
& .add-to-cart .cmd-container,
& .productItem .addToCart > span .stock,
& .productItem .addToCart > span .limited-offer,
& .shop-left-menu .menu-header {
  display: block !important;
}

& .add-to-cart .cmd-container {
  display: flex !important;
}

/* Hidden form plumbing must never render. */
& input[type="hidden"],
& .aspNetHidden,
& script,
& style {
  display: none;
}

/* Tabbed panels: show every panel, drop the tab chrome.
   Product details, wine club, and reservations all use this. */
& .ui-tabs .ui-tabs-panel {
  display: block;
}

/* ------------------------------------------------------------
   C. SHELL / PAGE LAYOUT
   ------------------------------------------------------------ */

& *,
& *::before,
& *::after {
  box-sizing: border-box;
}

& input,
& select,
& textarea,
& button {
  outline: none !important;
}

& img {
  max-width: 100%;
  height: auto;
}

& #pageContent {
  width: 100% !important;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-md);
  float: none;
  flex: 1 0 auto;
}

/* common.css pins #pageContent and #headerContainer to a hard 960px. */
& #headerContainer {
  width: 100% !important;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Platform floats the content columns; template uses normal flow. */
& #contentContainer,
& #pageContentCenter,
& #pageContentLeft,
& #productDetails {
  float: none !important;
  width: 100%;
}

/* ------------------------------------------------------------
   D. PRODUCT DISPLAY PAGE (PDP)

   Real markup (OrderPort):

     #productDetails                        inline float:left
       .prod-details.vertical-menu#cat-v1-1
         .shop-left-menu.same-height        same category sidebar as the shop
         .shop-content.same-height
           .data
             .data-header
               .pager.col                   "Viewing product 7 of 8" + prev/next
               .title > h1                  product name
               .prod-image-mobile           duplicate image, mobile only
             #tabs-product.ui-tabs
               ul.ui-tabs-nav               5 tabs
               .tabs-container              inline height from JS
                 .tabs-wrap > .tabs-content
                   .prod-image
                   #tab_overview            .sub-title .prod-summary .prod-descr
                                            .tasting-notes-hdr + .tasting-notes
                                            .production-notes-hdr + .production-notes
                                            .other-notes-hdr + .other-notes
                   #tab_wine_spec           table.wine-information
                   #tab_reviews
                   #tab_vineyards
                   #tab_winemaker
                 .uc.addToCart              sibling of .tabs-wrap

   The tabs are replaced by one continuous page. Two things fight that:

     1. Inactive panels carry an inline `style="display:none"`, and jQuery UI
        rewrites it on every tab click. Only `display: block !important`
        beats an inline style, and it keeps beating it after initTabs() runs.
     2. .tabs-container gets an inline pixel height sized to the tallest
        panel — 1346px in the sample. Zeroed with `height: auto !important`.

   Layout: image sticky on the left beside the overview and the buy box;
   everything that used to be a tab runs full width underneath.
   ------------------------------------------------------------ */

/* The sidebar + content split is the same `.vertical-menu` grid the catalog
   uses (section E), so the PDP picks it up for free. */

& #productDetails {
  float: none !important;
  width: 100%;
}

/* --- Header: pager, title --- */

& .prod-details .data-header {
  display: block;
  padding: 0;
}

/* "Viewing product 7 of 8" with prev/next. Position within an arbitrary
   catalog ordering is not information a shopper on a product page needs, and
   it competes with the title for the top of the page. Catalog pagers are
   untouched. */
& .prod-details .data-header .pager {
  display: none !important;
}

& .prod-details .data-header .title {
  display: block;
  padding: 0;
  text-align: left;
}

& .prod-details .data-header .title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-dark);
}

/* common.css hides this duplicate of the h1; the show-everything reset in
   section B outranks that, so re-hide it deliberately. */
& .prod-details .sub-title,
& #tab_overview .sub-title {
  display: none !important;
}

/* .prod-image-mobile is a second copy of the same image. The platform
   swaps the two at 640px (common.css 2541) — but .prod-image stacks fine on
   its own, so keep one image at every width and drop the duplicate. */
& .prod-image-mobile {
  display: none !important;
}

& #tabs-product .prod-image {
  display: block !important;
}

/* --- Tabs stripped back to a plain container --- */

& #tabs-product {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Clean, Functional 2-Column PDP Grid (Final Verdict) --- */

& .prod-details .data {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  column-gap: var(--spacing-3xl, 36px);
  row-gap: 0;
  align-items: start;
  width: 100%;
}

& .prod-details #tabs-product,
& .prod-details .tabs-container,
& .prod-details .tabs-wrap,
& .prod-details .tabs-content {
  display: contents !important;
  height: auto !important;
}

/* Hide tab bar */
& #tabs-product > ul,
& #tabs-product .ui-tabs-nav {
  display: none !important;
}

/* 1. Left Column: Sticky Image on Desktop (scrolls with viewport) */
& #tabs-product .prod-image {
  grid-column: 1;
  grid-row: 1 / span 12;
  position: sticky !important;
  top: var(--sidebar-sticky-top) !important;
  align-self: start !important;
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  z-index: 2;
}

/* Platform wraps the img in an ASP.NET-generated `<div id="ctl00_...">` with
   no dimensions of its own — img's percentage max-height only resolves if
   this wrapper has an explicit height, so it has to stretch to fill the
   square before the image can be centered/contained inside it. */
& #tabs-product .prod-image > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

& #tabs-product .prod-image img,
& #tabs-product .prod-image img.imgLarge {
  display: block;
  width: auto;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* 2. Right Column Stack: Title -> Buy Box -> All Content Expanded */

/* Title in Right Column */
& .prod-details .data .data-header {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: var(--spacing-xs);
}

& .prod-details .data-header .title h1 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400 !important;
  line-height: 1.2;
  color: #362821 !important;
  text-transform: capitalize !important;
}

/* Buy Box in Right Column */
& .prod-details .uc.addToCart {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
  margin: var(--spacing-xs) 0 var(--spacing-md);
  padding-bottom: var(--spacing-md);
  background: none;
  border-bottom: 1px solid var(--color-border-light);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

& .tabs-container .uc.addToCart fieldset.add-to-cart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
  margin: 0;
  padding: 0;
  border: 0;
}

& .tabs-container .uc.addToCart legend,
& .tabs-container .uc.addToCart .price-label {
  display: none;
}

& .tabs-container .uc.addToCart .price-container {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

& .tabs-container .uc.addToCart .price,
& .tabs-container .uc.addToCart .sale-price {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #362821 !important;
  background: none;
}

& .tabs-container .uc.addToCart .price.old-price {
  font-size: 15px;
  font-weight: 400;
  color: rgba(54, 40, 33, 0.5);
  text-decoration: line-through;
}

& .tabs-container .uc.addToCart .cmd-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0;
}

& .tabs-container .uc.addToCart .qty-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
  color: #362821 !important;
}

& .tabs-container .uc.addToCart .qty-container {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 8px;
  background: #FFFFFF !important;
  border: 1.5px solid #D8CEBE !important;
  border-radius: 2px;
  flex: 0 0 auto;
}

& .tabs-container .uc.addToCart input[type="text"].number {
  width: 36px !important;
  height: 40px;
  padding: 0;
  border: 0 !important;
  outline: none !important;
  background: none !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #362821 !important;
}

& .tabs-container .uc.addToCart .btn.jqp {
  display: none !important;
}

& .tabs-container .uc.addToCart .btn:not(.jqp),
& .prod-details .uc.addToCart .btn:not(.jqp) {
  position: relative;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 28px;
  background-color: #362821 !important;
  color: #F5EBDB !important;
  border: 2px solid #362821 !important;
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

& .tabs-container .uc.addToCart .btn:not(.jqp)::before,
& .prod-details .uc.addToCart .btn:not(.jqp)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #F5EBDB;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

& .tabs-container .uc.addToCart .btn:not(.jqp):hover::before,
& .prod-details .uc.addToCart .btn:not(.jqp):hover::before {
  transform: translateY(0);
}

& .tabs-container .uc.addToCart .btn:not(.jqp):hover,
& .prod-details .uc.addToCart .btn:not(.jqp):hover {
  color: #362821 !important;
  border-color: #362821 !important;
}

& .tabs-container .uc.addToCart .subtotal {
  display: none !important;
}

/* 3. Expanded Content Sections in Right Column under Cart */
& #tab_overview {
  grid-column: 2;
  grid-row: 3;
  display: block !important;
  padding: 0;
  margin: 0 0 var(--spacing-md);
  border: 0;
  background: none;
}

& #tab_overview .sub-title {
  display: none !important;
}

& #tab_overview .prod-summary,
& #tab_overview .prod-descr,
& #tab_overview .tasting-notes,
& #tab_overview .production-notes,
& #tab_overview .other-notes,
& #tab_overview .vineyard-notes {
  padding: 0 !important;
  margin: 0 0 var(--spacing-sm, 12px);
  font-size: var(--font-size-base, 14px);
  line-height: var(--line-height-normal, 1.6);
  color: var(--color-gray-700, #3e3e3e);
}

/* CMS copy strings wrapping */
& #tab_overview,
& #tab_reviews,
& #tab_vineyards,
& #tab_winemaker,
& table.wine-information td {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

& #tab_overview img,
& #tab_reviews img,
& #tab_vineyards img,
& #tab_winemaker img {
  max-width: 100%;
  height: auto;
}

& #tab_overview p {
  margin: 0 0 var(--spacing-xs, 8px);
}

& #tab_overview p:last-child {
  margin-bottom: 0;
}

/* Tasting & Production Notes section headings */
& .tasting-notes-hdr,
& .production-notes-hdr,
& .other-notes-hdr,
& .vineyard-notes-hdr {
  display: block;
  margin: var(--spacing-md) 0 var(--spacing-2xs);
  font-family: var(--font-body);
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
  color: var(--color-text-dark, #000000);
}

/* Wine Specs, Reviews, Vineyards, Winemaker in Right Column */
& #tab_wine_spec {
  grid-column: 2;
  grid-row: 4;
  display: block !important;
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}

& #tab_reviews {
  grid-column: 2;
  grid-row: 5;
  display: block !important;
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}

& #tab_vineyards {
  grid-column: 2;
  grid-row: 6;
  display: block !important;
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}

& #tab_winemaker {
  grid-column: 2;
  grid-row: 7;
  display: block !important;
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}

/* Section headings when expanded */
& #tab_wine_spec::before,
& #tab_reviews::before,
& #tab_vineyards::before,
& #tab_winemaker::before {
  display: block;
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400 !important;
  color: #362821 !important;
}

& #tab_wine_spec::before { content: "Wine Information"; }
& #tab_reviews::before   { content: "Reviews"; }
& #tab_vineyards::before { content: "Vineyards"; }
& #tab_winemaker::before { content: "Winemaker"; }

/* Hide empty sections */
& #tab_wine_spec:not(:has(table)),
& #tab_reviews:empty,
& #tab_vineyards:empty,
& #tab_winemaker:empty {
  display: none !important;
}

/* --- Clean, Functional Wine Information Table --- */
& table.wine-information {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  margin-top: var(--spacing-xs);
}

& table.wine-information td {
  padding: 10px 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(54, 40, 33, 0.15) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 1.5;
  color: #362821 !important;
  vertical-align: top;
}

& table.wine-information td:first-child:not([colspan]) {
  width: 160px !important;
  padding-right: var(--spacing-md);
  font-weight: 400 !important;
  color: rgba(54, 40, 33, 0.75) !important;
}

& table.wine-information tr:last-child td {
  border-bottom: 0 !important;
}

/* Download tech sheet / wine-notes button */
& table.wine-information td[colspan="2"] {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
}

& table.wine-information a.lnk,
& table.wine-information a.wine-notes,
& a.wine-notes,
& .wine-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #F5EBDB !important;
  color: #362821 !important;
  border: 1.5px solid #362821 !important;
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

& table.wine-information a.lnk:hover,
& table.wine-information a.wine-notes:hover,
& a.wine-notes:hover,
& .wine-notes-btn:hover {
  background-color: #362821 !important;
  color: #F5EBDB !important;
  border-color: #362821 !important;
}


/* --- Reviews / vineyards / winemaker copy --- */

& #tab_reviews p,
& #tab_vineyards p,
& #tab_winemaker p {
  margin: 0 0 var(--spacing-2xs);
  max-width: 70ch;
  line-height: var(--line-height-normal);
}

& #tab_reviews em {
  color: var(--color-text-light);
}

/* --- Responsive --- */

@media only screen and (max-width: 900px) {
  & .prod-details .data {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-lg);
  }

  & #tabs-product .prod-image {
    grid-column: 1;
    grid-row: auto;
    position: static !important;
    top: auto !important;
    align-self: auto !important;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  & .prod-details .data .data-header,
  & .prod-details .uc.addToCart,
  & #tab_overview,
  & #tab_wine_spec,
  & #tab_reviews,
  & #tab_vineyards,
  & #tab_winemaker {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }

  & .prod-details .data .data-header { order: 1; }
  & #tabs-product .prod-image        { order: 2; }
  & .prod-details .uc.addToCart      { order: 3; }
  & #tab_overview                    { order: 4; }
  & #tab_wine_spec                   { order: 5; }
  & #tab_reviews                     { order: 6; }
  & #tab_vineyards                   { order: 7; }
  & #tab_winemaker                   { order: 8; }
}

@media only screen and (max-width: 640px) {
  & .prod-details .data-header .title h1 {
    font-size: var(--font-size-xl);
  }

  & .tabs-container > .uc.addToCart {
    padding: var(--spacing-md);
  }

  & .tabs-container .uc.addToCart .btn {
    flex: 1 1 100%;
  }

  & table.wine-information td:first-child:not([colspan]) {
    width: 45% !important;
  }
}

/* ------------------------------------------------------------
   E. CATALOG / PRODUCT LIST PAGE

   Markup (OrderPort):
     #cat-v1-1.pageContentWidth.vertical-menu
       .shop-left-menu.same-height
         span.three-items-across-menu > ul > li.g[.selected] > a (+ nested ul)
       .shop-content.same-height.three-items-across-container
         .shop-wrap > .shop-holder
           .data.pagination.three-items-across
             .group-summary                 <- CMS copy, user generated
             .row.catalog-controls > .sort-products.col
             .productItem > .pi-content
               .prod-img > a > div > img
               .prod-summary > h2.prod-name > a.prod-title
                             > .prod-content  <- CMS copy, user generated
               .uc.addToCart > fieldset.add-to-cart
             .h-split / .break               <- legacy float clears

   Layout signals read from the class names:
     .vertical-menu          -> menu is a left sidebar, sub-menus toggle
     .horizontal-menu        -> menu is a top bar (handled below)
     .three-items-across     -> 3-column product grid
   ------------------------------------------------------------ */

/* --- Un-float the platform's column shell ---
   #pageContentCenter/Left/Right carry inline `float`, so !important
   is the only way to win. --- */

& #pageContentCenter,
& #pageContentLeft,
& #pageContentRight {
  float: none !important;
  width: 100%;
}

/* Empty CMS slots must not reserve space. */
& #pageContentCenter:empty,
& #pageContentRight:empty,
& #textContent:empty {
  display: none;
}

/* --- Product search bar ---

   Full rebuild. The platform ships this as three overlapping absolutely
   positioned boxes inside one relative wrapper (common.css 2012-2135):

     .product-search-options   position:absolute; left:0; float:left;
                               own background + border + rounded left cap
     .txt-product-search       full width, padding-left:113px to clear it,
                               position:relative; top:2px
     .button-search-product    position:absolute; right:15px; top:6px;
                               search-icon.png as a background image

   ...and then CMSScripts measures .product-search-options at runtime and
   writes an inline `padding-left` onto the input to keep the text clear of
   the overlay. That measurement is the alignment bug: it runs before the
   jQuery selectmenu has been built and before webfonts settle, so the
   padding is computed against the wrong width and the caret lands under
   the dropdown. Nudging the numbers never fixes it because the numbers are
   re-derived on every filter change (refreshUi()).

   So: no overlap, no measuring. Three real boxes in a flex row, everything
   the platform positions is reset to static, and every padding is
   !important — an author !important beats the script's inline style, so
   refreshUi() can keep writing padding-left and it no longer has any
   effect.

   Placement: stays where the platform puts it, at the top of
   #contentContainer, spanning the full content width. Low visual weight
   does the work instead of a small footprint — flat surface, muted
   placeholder, icon-only submit, no heavy chrome. */

& .product-search {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

/* Shared shell: one bordered pill, children are seams inside it. */
& .product-search .product-search-options,
& .product-search .txt-product-search,
& .product-search .button-search-product {
  position: static !important;
  float: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  background: #FFFFFF !important;
  border: 1px solid #D8CEBE !important;
  border-radius: 0 !important;
  z-index: auto !important;
  overflow: visible !important;
  color: #362821 !important;
}

/* Filter dropdown — left cap. */
/* DOM order is input, button, dropdown — flex `order` puts them right. */
& .product-search .product-search-options {
  order: 1;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  width: auto !important;
  padding: 0 !important;
  border-right: 0 !important;
  border-radius: 4px 0 0 4px !important;
  background: #FFFFFF !important;
}

& .product-search .product-search-options .dropdown {
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #362821 !important;
}

/* common.css pulls this 5px left to hide the seam it created. */
& .product-search .product-search-options-dropdown {
  margin-left: 0 !important;
}

& .product-search .ui-selectmenu-button {
  height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 var(--spacing-2xs) 0 var(--spacing-xs) !important;
  color: #362821 !important;
}

& .product-search .ui-selectmenu-button .ui-selectmenu-text {
  padding-left: 0 !important;
  line-height: normal !important;
  font-size: 14px;
  color: #362821 !important;
  font-weight: 500;
}

/* Text field — middle. All four paddings !important so the runtime
   padding-left the script writes inline is inert. */
& .product-search .txt-product-search,
& .product-search .txt-product-search-temp-important {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  padding: 0 var(--spacing-xs) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  font-family: var(--font-body);
  font-size: 14px;
  color: #362821 !important;
  background: #FFFFFF !important;
}

& .product-search .txt-product-search::placeholder {
  color: rgba(54, 40, 33, 0.5) !important;
}

& .product-search .txt-product-search:focus {
  outline: none;
  box-shadow: none !important;
  border-color: #96623B !important;
}

/* Submit — right cap. Icon only; the label would double the footprint. */
& .product-search .button-search-product {
  order: 3;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  padding: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  color: #362821 !important;
  background: #FFFFFF !important;
  cursor: pointer;
  text-decoration: none;
}

& .product-search .button-search-product:hover {
  background: #F8F3EA !important;
}

/* The shipped icon is a background-image on the anchor plus a 1x1
   transparent gif in the markup. Drop both, draw the glyph instead. */
& .product-search .button-search-product img {
  display: none !important;
}

/* Drawn as an inline SVG mask. `currentColor` keeps it themeable. */
& .product-search .button-search-product::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #362821 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Catalog search has nothing to act on from a product page — searching from
   here throws the shopper back out to a results list. `:has(#productDetails)`
   keys off the page's own markup, so no body class is needed. */
& #contentContainer:has(#productDetails) .product-search {
  display: none !important;
}

/* --- Dropdown toggles, selectmenu, and sort controls --- */

& .ui-selectmenu-button,
& .ddl:not(select),
& .sort-by select {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  height: 40px;
  padding: 0 16px !important;
  background: #FFFFFF !important;
  border: 1px solid #D8CEBE !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: #362821 !important;
  text-decoration: none;
}

& .product-search-options select,
& .product-search select,
& select.initialized {
  display: none !important;
}

& .ui-selectmenu-button .ui-selectmenu-text {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #362821 !important;
  font-weight: 500;
}

& .ui-selectmenu-button .ui-icon {
  position: static;
  margin: 0;
  flex: 0 0 auto;
  color: #362821 !important;
}

& .ui-selectmenu-menu .ui-menu {
  background: #FFFFFF !important;
  border: 1px solid #D8CEBE !important;
  border-radius: 4px;
  box-shadow: none;
}

& .ui-selectmenu-menu .ui-menu-item-wrapper {
  color: #362821 !important;
  padding: 8px 14px !important;
}

& .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
& .ui-selectmenu-menu .ui-menu-item-wrapper:hover {
  background: #F8F3EA !important;
  color: #362821 !important;
}

/* --- Catalog shell: sidebar + content --- */

& .vertical-menu {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-2xl);
  align-items: start;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
}

/* `.same-height` is a JS equal-height hack — grid handles it now. */
& .same-height {
  height: auto !important;
  min-height: 0 !important;
}

& .shop-content,
& .shop-wrap,
& .shop-holder {
  width: 100%;
  min-width: 0;
  float: none;
}

/* common.css pads .shop-content 20px/15px. The 15px inset misaligns the
   sort control from the search box above it — grid gaps handle spacing. */
& .shop-content {
  padding: 0 !important;
}

/* --- Vertical sidebar menu --- */

& .vertical-menu .shop-left-menu {
  position: sticky;
  top: var(--sidebar-sticky-top);
  background: none;
  border: 0;
  padding: 0;
}

& .vertical-menu .shop-left-menu > span {
  display: block;
  background: #FFFFFF !important;
  border: 1px solid #D8CEBE !important;
  border-radius: 4px;
  padding: 20px;
  box-shadow: none;
}

& .shop-left-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

& .shop-left-menu li {
  margin: 0;
  padding: 0;
}

& .shop-left-menu .menu-header {
  position: relative;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: #362821 !important;
  padding: 0 0 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid #D8CEBE !important;
}

& .shop-left-menu .menu-header:focus-visible {
  outline: 2px solid #362821;
  outline-offset: 2px;
}

& .shop-left-menu li.g > a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400 !important;
  color: #362821 !important;
  text-decoration: none !important;
}

& .shop-left-menu li.g > a:hover,
& .shop-left-menu li.g > a:focus-visible {
  color: #96623B !important;
}

& .shop-left-menu li.g > a.selected,
& .shop-left-menu li.g.selected > a {
  font-weight: 600 !important;
  color: #362821 !important;
}

/* Sub-menus: collapsed by default, opened on hover/keyboard focus, and
   always open when the branch contains the current page. `.open` and
   inline styles are honoured too, so a JS toggler can take over later
   without any CSS change. */

/* --- Sub-menus ---

   Collapsed by default. Opened by: the injected .op-toggler button (touch
   and keyboard), :focus-within (keyboard tabbing), hover on pointer devices
   only, and always when the branch contains the current page. */

& .shop-left-menu li.g {
  position: relative;
}

& .shop-left-menu li.g:has(> ul) > a {
  padding-right: 36px;
}

& .shop-left-menu li.g > ul {
  display: none;
  margin: 0 0 var(--spacing-2xs) var(--spacing-2xs);
  padding-left: var(--spacing-2xs);
  border-left: 1px solid var(--color-border-light);
}

& .shop-left-menu li.g.open > ul {
  display: block;
}

/* Auto-expanding the branch containing the current page is a sidebar
   behaviour. A horizontal menu's sub-list is an absolutely positioned
   drop-down, so the same rule would park a panel over the page on load. */
& .vertical-menu .shop-left-menu li.g.selected > ul,
& .vertical-menu .shop-left-menu li.g.sselected > ul,
& .vertical-menu .shop-left-menu li.g:has(> ul .selected) > ul,
& .vertical-menu .shop-left-menu li.g:has(> ul .sselected) > ul {
  display: block;
}

/* Deliberately NOT `:focus-within`. Clicking .op-toggler focuses it, and the
   button lives inside the li — so `:focus-within` would stay true and pin the
   sub-menu open, making it impossible to close by clicking a second time.

   Hover likewise only applies to branches with no toggler, i.e. when main.js
   has not run. With a real button present, hover-to-open fights the button:
   closing it does nothing while the pointer is still over the row. */
@media (hover: hover) and (pointer: fine) {
  & .shop-left-menu li.g:not(:has(> .op-toggler)):hover > ul {
    display: block;
  }
}

& .shop-left-menu li.g > ul li.g > a {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* --- Sub-menu toggle button (injected by main.js) --- */

& .shop-left-menu .op-toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  /* 36px square: the smallest comfortable touch target that still fits the
     row height. */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-light);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

& .shop-left-menu .op-toggler::before {
  content: "\203A";
  display: block;
  font-size: var(--font-size-md);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

& .shop-left-menu li.g.open > .op-toggler::before {
  transform: rotate(-90deg);
}

& .shop-left-menu .op-toggler:hover {
  color: var(--color-text-dark);
}

& .shop-left-menu .op-toggler:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* CSS-only fallback caret for when main.js has not run. Superseded by the
   real button as soon as one exists. */
& .shop-left-menu li.g:has(> ul):not(:has(> .op-toggler)) > a::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(90deg);
  color: var(--color-text-light);
}

& .shop-left-menu .toggle-menu {
  display: none;
}

/* --- Horizontal menu variant ---

   Same markup as the sidebar, different class on the wrapper:
   `#cat-v1-1.pageContentWidth.horizontal-menu`. Categories run as a plain
   text nav across the top with a rule underneath; the current category is
   marked by a bar sitting on that rule. Sub-groups drop down beneath their
   parent.

   Below 900px this switches to the sidebar treatment wholesale — stacked
   list, collapsible behind its header, sub-menus expanding inline. See the
   mobile block further down. --- */

& .horizontal-menu {
  display: block;
}

& .horizontal-menu .shop-left-menu {
  position: static;
  margin: 0 0 44px !important;
  background: none;
  border: 0;
  padding: 0;
}

& .horizontal-menu .shop-left-menu > span {
  display: block;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(54, 40, 33, 0.15);
  border-radius: 0;
  padding: 0 0 6px;
}

& .horizontal-menu .shop-left-menu > span > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
}

/* "Our Wine Shop" is a sidebar heading; in a top nav it reads as a category. */
& .horizontal-menu .shop-left-menu .menu-header {
  display: none !important;
}

& .horizontal-menu .shop-left-menu li.g {
  position: relative;
}

/* --- Top-level category menu links --- */

& .horizontal-menu .shop-left-menu li.g > a {
  position: relative;
  display: block;
  padding: 8px 4px 10px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  font-family: var(--font-serif);
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: #362821 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

& .horizontal-menu .shop-left-menu li.g > a:hover {
  color: #96623B !important;
  border-bottom-color: #96623B !important;
}

& .horizontal-menu .shop-left-menu li.g > a.selected,
& .horizontal-menu .shop-left-menu li.g.selected > a,
& .horizontal-menu .shop-left-menu li.g > a.sselected,
& .horizontal-menu .shop-left-menu li.g.sselected > a {
  color: #362821 !important;
  font-weight: 500 !important;
  border-bottom: 2px solid #362821 !important;
}

/* Room for the toggle button beside the label. */
& .horizontal-menu .shop-left-menu li.g:has(> ul) > a {
  padding-right: 22px;
}

& .horizontal-menu .shop-left-menu .op-toggler {
  top: 0;
  bottom: 0;
  right: -4px;
  width: 22px;
  height: auto;
  color: #362821 !important;
}

& .horizontal-menu .shop-left-menu li.g:has(> ul):not(:has(> .op-toggler)) > a::after {
  right: 2px;
  color: #362821 !important;
}

/* --- Submenu Dropdowns --- */

& .horizontal-menu .shop-left-menu li.g > ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  margin: 0;
  padding: 8px 0;
  background: #FFFFFF !important;
  border: 1px solid #D8CEBE !important;
  border-radius: 4px;
  box-shadow: none;
}

& .horizontal-menu .shop-left-menu li.g > ul li.g > a {
  display: block;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: #362821 !important;
  white-space: normal;
  transition: background-color 0.15s ease, color 0.15s ease;
}

& .horizontal-menu .shop-left-menu li.g > ul li.g > a:hover {
  background: #F8F3EA !important;
  color: #362821 !important;
}

& .horizontal-menu .shop-left-menu li.g > ul li.g > a.selected,
& .horizontal-menu .shop-left-menu li.g > ul li.g > a.sselected,
& .horizontal-menu .shop-left-menu li.g > ul li.g.selected > a {
  background: #362821 !important;
  color: #F5EBDB !important;
  font-weight: 600;
}

/* --- CMS copy blocks (user generated — style, never hide) --- */

& .group-summary,
& .prod-content,
& #textContent {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

& .group-summary {
  margin: 0 0 var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

/* The platform still emits the wrapper when a group has no summary copy —
   which would draw an empty tinted box above the grid. `:empty` alone does
   not catch it, because ASP.NET leaves whitespace and newlines inside the
   div; `:not(:has(*))` is what actually matches "no content elements". */
& .group-summary:empty,
& .group-summary:not(:has(*)) {
  display: none !important;
}

& .group-summary p:first-child { margin-top: 0; }
& .group-summary p:last-child  { margin-bottom: 0; }

& .group-summary a {
  color: var(--color-text-dark);
  text-decoration: underline;
}

/* --- Catalog controls (sort) --- */

& .row.catalog-controls,
& .catalog-controls {
  display: none !important;
}

& .sort-products.col {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}

/* --- Product grid --- */

& .data.two-items-across,
& .data.three-items-across,
& .data.four-items-across {
  display: grid !important;
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-xl);
  align-items: stretch;
  width: 100%;
}

/* A `.data` carrying no `-items-across` class renders one item per row —
   that is the events / single-column list. `:has(.productItem)` keeps this
   off the other `.data` blocks the platform uses elsewhere. */
& .data:not([class*="-items-across"]):has(.productItem),
& .data.one-item-across {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: var(--spacing-lg);
  width: 100%;
}

& .data.two-items-across   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
& .data.three-items-across { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
& .data.four-items-across  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Full-width rows inside the grid. */
& .data .group-summary,
& .data .row.catalog-controls,
& .data .pager,
& .data .data-header {
  grid-column: 1 / -1;
}

/* Legacy float clears — meaningless in grid, and they create empty cells. */
& .h-split,
& .break {
  display: none !important;
}

/* --- Product card --- */

& .productItem {
  display: flex !important;
  width: auto !important;
  min-width: 0;
  vertical-align: top;
  border: 0;
}

/* Product card load-in fade — quick opacity drop from 0 to 1, no movement */
@keyframes productFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* `.pi-content` gets an inline pixel height from the equal-height script. */
& .productItem .pi-content {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  animation: productFadeIn 0.35s ease both;
}

& .productItem:hover .pi-content {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

/* Platform mobile breakpoints center the whole catalog container and the
   sidebar span, and force `min-height: 300px !important` on .prod-img.
   Both are float-era workarounds — undo them for the grid. */
& .three-items-across-container,
& .four-items-across-container,
& .responsive-items-across-container,
& .shop-left-menu > span {
  text-align: left !important;
}

& .productItem .prod-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 0 var(--spacing-xs);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

& .productItem .prod-img a,
& .productItem .prod-img a > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Stores inject `<style>.productItem img{max-width:140px!important}</style>`
   at the end of the catalog. Override it so the image fits the card box. */
& .productItem .prod-img img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1);
}

& .productItem:hover .prod-img img {
  transform: scale(1.06);
}

& .productItem .prod-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  flex: 1 1 auto;
  color: var(--color-text);
}

& .productItem .prod-summary p,
& .productItem .prod-summary div,
& .productItem .prod-summary span {
  color: var(--color-text-light);
}

& .productItem h2,
& .productItem h2.prod-name,
& .productItem a.prod-title,
& .productItem .prod-title,
& .productItem .prod-name {
  margin: 0 0 4px;
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-primary) !important;
  text-transform: capitalize !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

& .productItem a.prod-title:hover {
  opacity: 0.7;
  color: var(--color-secondary) !important;
}

& .productItem .subtitle {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.4;
}

& .productItem .price-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 2px;
  gap: var(--spacing-xs);
  min-width: 0;
  margin-top: auto;
  padding-top: var(--spacing-2xs);
}

& .productItem .price-container,
& .productItem .price-container *,
& .productItem .price,
& .productItem .price.sale-price,
& .productItem .price.sale,
& .productItem .sale-price,
& .productItem .salePrice,
& .productItem [id*="price"],
& .productItem [class*="price"] {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--color-primary) !important;
  opacity: 1 !important;
}

& .productItem .price.old-price,
& .productItem .old-price,
& .productItem .strike {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--color-text-light) !important;
  text-decoration: line-through !important;
}

/* <fieldset> defaults to `min-inline-size: min-content` in every browser,
   and as a flex child of `.pi-content` it also gets an automatic
   `min-width: auto` — both ignore the card's own width and let long
   unbroken content (price/qty/button rows) push the fieldset wider than
   the card, spilling into the next column. `min-width: 0` on the whole
   chain lets it actually shrink to the card. */
& .productItem .uc.addToCart {
  display: block;
  width: 100%;
  min-width: 0;
}

& .productItem fieldset,
& .productItem .cmd-container,
& .productItem .pi-content fieldset,
& .productItem .pi-content > div:last-child {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

& .productItem .cmd-container {
  display: flex !important;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0 !important;
}

& .pi-content legend,
& .productItem legend,
& .productItem fieldset legend,
& .productItem .cmd-container legend {
  display: none !important;
}

& .productItem label,
& .productItem .qty-label,
& .productItem .cmd-container label,
& .productItem .cmd-container span,
& .productItem .cmd-container p {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

& .productItem .qty-container {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 8px;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border) !important;
  border-radius: 2px;
}

& .productItem .qty-container input[type="text"].number {
  width: 36px !important;
  height: 40px;
  padding: 0;
  border: 0 !important;
  background: none !important;
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  color: var(--color-text) !important;
  font-weight: 600;
}

& .productItem .cmd-container .btn {
  flex: 1 1 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background-color: #362821;
  color: #F5EBDB;
  border: 2px solid #362821;
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

& .productItem .cmd-container .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #F5EBDB;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

& .productItem .cmd-container .btn:hover::before {
  transform: translateY(0);
}

& .productItem .cmd-container .btn:hover {
  color: #362821;
  border-color: #362821;
}

/* Every card ships a `.subtotal` reading "Subtotal: $0.00" whether or not
   anything is in the cart. Noise in a grid — hide it on the card only.
   The same class on the product details page stays visible. */
& .productItem .subtotal,
& .pi-content .subtotal {
  display: none !important;
}

/* --- Availability states (Coming Soon, Sold Out, Limited Offer) --- */

& .productItem .comingSoon,
& .productItem [class*="comingSoon"],
& .productItem [class*="soldout"],
& .productItem .badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  padding: 6px 12px !important;
  background: #F5EBDB !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  font-family: var(--font-body);
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: #362821 !important;
  box-shadow: var(--shadow-sm);
}

& .productItem .comingSoon p,
& .productItem [class*="comingSoon"] p,
& .productItem .soldout p {
  margin: 0 !important;
  padding: 0 !important;
  color: #362821 !important;
  font-weight: 700 !important;
}

/* Sold Out badge: distinct high-contrast fill */
& .productItem .comingSoon.soldout,
& .productItem .soldout,
& .productItem [class*="soldout"] {
  background: #362821 !important;
  border: 1.5px solid #F5EBDB !important;
  color: #F5EBDB !important;
}

& .productItem .comingSoon.soldout p,
& .productItem .soldout p,
& .productItem [class*="soldout"] p {
  color: #F5EBDB !important;
  font-weight: 700 !important;
}

& .productItem .pi-content:has(.soldout) .prod-img,
& .productItem .pi-content:has(.soldout) .prod-summary {
  opacity: 0.55;
}

& .productItem .pi-content:has(.soldout):hover .prod-img,
& .productItem .pi-content:has(.soldout):hover .prod-summary {
  opacity: 1;
}

& .productItem .prod-img,
& .productItem .prod-summary {
  transition: opacity 0.2s ease;
}

/* --- Single-column row card (events, one-across lists) ---

   Three columns reading left to right, which is the order a shopper needs
   them in:

     [ image ] | [ what it is ] | [ what it costs / how to buy ]
       200px   ^     1fr        ^        260px
               |                |
          divider           divider

   The dividers are borders on the right edge of the image and on the left
   edge of the purchase panel, so the row reads as one object instead of
   three floating blocks.

   Note the platform writes an inline `min-height` onto .prod-img here that
   differs per row (408px, 324px, 435px, 474px in the events markup) — that
   is what makes stock one-across lists so ragged. It is zeroed in the base
   .prod-img rule so every row is the same height. */

@media only screen and (min-width: 560px) {
  & .data:not([class*="-items-across"]):has(.productItem) .pi-content,
  & .data.one-item-across .pi-content {
    flex-direction: row !important;
    align-items: stretch;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
  }

  /* Image column — divider on its right. */
  & .data:not([class*="-items-across"]):has(.productItem) .prod-img,
  & .data.one-item-across .prod-img {
    flex: 0 0 200px;
    min-width: 280px !important;
    height: 280px !important;
    height: auto;
    align-self: stretch;
    margin: 0;
    background: none;
    border-right: 1px solid var(--color-border-light);
    border-radius: 0;
  }

  /* Copy column. */
  & .data:not([class*="-items-across"]):has(.productItem) .prod-summary,
  & .data.one-item-across .prod-summary {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: var(--spacing-2xs);
    padding: var(--spacing-3xs) 0;
  }

  & .data:not([class*="-items-across"]):has(.productItem) h2.prod-name,
  & .data.one-item-across h2.prod-name {
    font-size: var(--font-size-xl);
  }

  /* Purchase column — divider on its left. Price / qty / Add to Cart are
     bottom-aligned so they sit on a common baseline down the whole list,
     however tall each product's copy runs. */
  & .data:not([class*="-items-across"]):has(.productItem) .uc.addToCart,
  & .data.one-item-across .uc.addToCart {
    flex: 0 0 260px !important;
    width: 260px !important;
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 0 0 var(--spacing-lg) !important;
    border-left: 1px solid var(--color-border-light);
  }

  & .data:not([class*="-items-across"]):has(.productItem) fieldset.add-to-cart,
  & .data.one-item-across fieldset.add-to-cart {
    justify-content: flex-end;
  }

  & .data:not([class*="-items-across"]):has(.productItem) .cmd-container,
  & .data.one-item-across .cmd-container {
    flex-wrap: nowrap;
  }

  /* Availability badge sits over the image, which now starts at the card
     padding edge rather than inset by it. */
  & .data:not([class*="-items-across"]):has(.productItem) .comingSoon,
  & .data.one-item-across .comingSoon {
    position: static;
    align-self: flex-start;
  }
}

/* --- Variant / date selector (tbl-color-size) ---
   Events and apparel add a table of Date / Colour / Size dropdowns inside
   fieldset.add-to-cart. The platform hides it on multi-column grids
   (common.css 2214) and leaves it raw everywhere else. */

& .tbl-color-size {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-2xs);
}

& .tbl-color-size td {
  padding: 0 0 var(--spacing-3xs);
  border: 0;
  vertical-align: middle;
}

& .tbl-color-size td:first-child {
  width: auto;
  padding-right: var(--spacing-2xs);
}

& .tbl-color-size .label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  color: var(--color-text-light);
  white-space: nowrap;
}

& .tbl-color-size select {
  width: 100%;
  max-width: 100%;
  height: 36px;
  padding: 0 var(--spacing-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

& .tbl-color-size br {
  display: none;
}

/* --- Responsive --- */

@media only screen and (max-width: 1024px) {
  & .vertical-menu {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: var(--spacing-lg);
  }

  & .data.four-items-across { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media only screen and (max-width: 900px) {
  & .vertical-menu {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  & .vertical-menu .shop-left-menu {
    position: static;
  }

  /* --- Mobile category menu ---

     Under 900px BOTH variants use the sidebar treatment: a stacked list in a
     card, collapsed behind its own header, sub-menus expanding inline rather
     than as drop-down panels. A horizontal nav has nowhere to go on a phone —
     it either wraps into an unreadable block of links or scrolls sideways and
     clips its own drop-downs.

     Collapsing is gated on `.js-collapsible`, which main.js adds once the
     header is wired up as a button — with JS off the menu stays open rather
     than becoming a list nobody can reach. */

  /* Undo the top-nav treatment on mobile screen widths */
  & .horizontal-menu .shop-left-menu > span {
    background: #FFFFFF !important;
    border: 1px solid #D8CEBE !important;
    border-radius: 4px;
    padding: 16px;
    box-shadow: none;
  }

  & .horizontal-menu .shop-left-menu > span > ul {
    display: block;
  }

  & .horizontal-menu .shop-left-menu .menu-header {
    display: block !important;
    font-family: var(--font-serif);
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #362821 !important;
    border-bottom: 1px solid #D8CEBE !important;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  & .horizontal-menu .shop-left-menu li.g > a {
    border-bottom: 0 !important;
    margin-bottom: 0;
    white-space: normal;
    font-family: var(--font-serif);
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #362821 !important;
    padding: 8px 0;
  }

  & .horizontal-menu .shop-left-menu li.g > a:hover {
    color: #96623B !important;
  }

  & .horizontal-menu .shop-left-menu li.g > a.selected,
  & .horizontal-menu .shop-left-menu li.g.selected > a,
  & .horizontal-menu .shop-left-menu li.g > a.sselected,
  & .horizontal-menu .shop-left-menu li.g.sselected > a {
    border-bottom: 0 !important;
    color: #362821 !important;
    font-weight: 600 !important;
  }

  /* Sub-lists become inline branches, not floating panels. */
  & .horizontal-menu .shop-left-menu li.g > ul {
    position: static;
    z-index: auto;
    min-width: 0;
    max-width: none;
    margin: 4px 0 8px 12px;
    padding: 0 0 0 12px;
    background: none !important;
    border: 0 !important;
    border-left: 1px solid #D8CEBE !important;
    border-radius: 0;
    box-shadow: none;
  }

  & .horizontal-menu .shop-left-menu li.g > ul li.g > a {
    padding: 6px 0;
    background: none !important;
    font-family: var(--font-serif);
    font-size: 15px !important;
    color: rgba(54, 40, 33, 0.8) !important;
  }

  & .horizontal-menu .shop-left-menu li.g > ul li.g > a.selected,
  & .horizontal-menu .shop-left-menu li.g > ul li.g > a.sselected,
  & .horizontal-menu .shop-left-menu li.g > ul li.g.selected > a {
    background: none !important;
    color: #362821 !important;
    font-weight: 600 !important;
  }

  /* --- Shared collapse behaviour --- */

  & .shop-left-menu.js-collapsible .menu-header {
    cursor: pointer;
    margin-bottom: 0;
    padding-right: 36px;
    border-bottom: 0;
  }

  & .shop-left-menu.js-collapsible .menu-header::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.15s ease;
    color: var(--color-text-light);
  }

  & .shop-left-menu.js-collapsible.open .menu-header::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  & .shop-left-menu.js-collapsible:not(.open) > span > ul > li.g {
    display: none;
  }

  & .shop-left-menu.js-collapsible.open .menu-header {
    margin-bottom: var(--spacing-2xs);
    border-bottom: 1px solid var(--color-border-light);
  }

  /* Bigger tap targets once the list is open. */
  & .shop-left-menu li.g > a {
    padding: var(--spacing-xs) 0;
  }

  & .shop-left-menu .op-toggler {
    width: 44px;
    height: 44px;
    right: 0;
    bottom: auto;
    top: 0;
  }

  & .shop-left-menu li.g:has(> ul) > a {
    padding-right: 44px;
  }

  & .data.three-items-across,
  & .data.four-items-across {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media only screen and (max-width: 640px) {
  & .data.two-items-across,
  & .data.three-items-across,
  & .data.four-items-across {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--spacing-lg);
  }

  & .productItem .prod-img {
    height: 200px;
  }

  & .row.catalog-controls {
    justify-content: stretch;
  }
}

/* This page's `._column` content cell ends up narrower than
   #pageContentCenter because it carries its own inline `width` (common.css
   default for multi-column layouts). Id is store-generated, so match the
   stable suffix rather than the full id. */
& [id$="ContentAndSideBar_c1"]._column {
  width: 100% !important;
}

/* common.css puts a flat 20px left margin on every direct child of
   #wine-clubs — meaningless here since the card grid supplies its own
   spacing. */
& #wine-clubs > div {
  margin-left: 0;
}

/* --- Wine club membership list ---
   Markup gives each club a plain `<div class="club-NNNN">` with a title
   link, a raw `&nbsp;-&nbsp;` separator, a `.btn` Join link, then one or
   more CMS-authored `<p>`/`<ul>` blocks. `font-size: 0` on the card
   collapses that stray separator text without touching markup; every
   real child resets its own font-size below.

   Reuses the existing recipes verbatim instead of inventing a new look:
   the `.productItem .pi-content` card (surface/border/radius/padding) and
   the `.productItem .cmd-container .btn` button (--btn-* tokens). */

& .wineclub-membership {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-xl);
  align-items: stretch;
  width: 100%;
  margin-top: var(--spacing-lg);
}

& .wineclub-membership > div[class^="club-"] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  row-gap: var(--spacing-md);
  column-gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 0;
  margin-bottom: 0 !important;
}

& .wineclub-membership > div[class^="club-"] > a:first-child {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-display);
  color: var(--color-text-dark);
  text-decoration: none;
}

& .wineclub-membership > div[class^="club-"] > a:first-child h3 {
  display: inline-block !important;
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 40px;
}

& .wineclub-membership > div[class^="club-"] > a:first-child:hover {
  text-decoration: underline;
}

& .wineclub-membership > div[class^="club-"] > a.btn {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px !important;
  line-height: 38px;
  padding: 0 var(--spacing-sm);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

& .wineclub-membership > div[class^="club-"] > a.btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

& .wineclub-membership > div[class^="club-"] > p,
& .wineclub-membership > div[class^="club-"] > ul {
  grid-column: 1 / -1;
  margin: var(--spacing-2xs) 0 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-light);
}

& .wineclub-membership > div[class^="club-"] p strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* Some clubs (e.g. "Founders Club") ship multiple purchasable variations:
   a `<h3 class="wine-club-group">` group title as a bare direct child (not
   wrapped in an `<a>`), followed by `.variations > ul > li` — one li per
   variation, each with its own title link, Join `.btn`, and description
   `<p>`. Neither of those is a `> a:first-child`/`> p`/`> ul` direct child,
   so they fell outside every selector above and inherited the `font-size: 0`
   set on the card itself — rendering as invisible text instead of a second
   club card. */

& .wineclub-membership > div[class^="club-"] > .wine-club-group {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& .wineclub-membership > div[class^="club-"] > .variations {
  grid-column: 1 / -1;
}

& .wineclub-membership > div[class^="club-"] .variations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

& .wineclub-membership > div[class^="club-"] .variations li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-light);
  font-size: 0;
}

& .wineclub-membership > div[class^="club-"] .variations li:first-child {
  padding-top: 0;
  border-top: 0;
}

& .wineclub-membership > div[class^="club-"] .variations li > a:first-child {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  text-decoration: none;
}

& .wineclub-membership > div[class^="club-"] .variations li > a:first-child h3 {
  display: inline;
  margin: 0;
  font: inherit;
}

& .wineclub-membership > div[class^="club-"] .variations li > a:first-child:hover {
  text-decoration: underline;
}

& .wineclub-membership > div[class^="club-"] .variations li > a.btn {
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--spacing-sm);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

& .wineclub-membership > div[class^="club-"] .variations li > a.btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

& .wineclub-membership > div[class^="club-"] .variations li > p {
  grid-column: 1 / -1;
  margin: var(--spacing-3xs) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-light);
}

@media only screen and (max-width: 900px) {
  & .wineclub-membership {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media only screen and (max-width: 640px) {
  & .wineclub-membership > div[class^="club-"] {
    padding: var(--spacing-md);
  }
}

}

/* ============================================================
   HEADER / NAV / AUTH-WRAPPER / FOOTER — baseline scaffold
   Lives outside #box: header.html/footer.html are their own top-level
   elements, not part of the platform's page content. Everything here
   uses only tokens already defined in :root above, so a new site
   inherits a working (if generic) header/footer the moment it copies
   this template and retunes :root — no separate rebuild required.

   header.html / footer.html ship using exactly these selectors.
   `header-footer-matching` reshapes the markup + these rules per site;
   this block just keeps a fresh `cp -r output/template` from rendering
   as a bare unstyled nav.
   ============================================================ */

#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  font-family: var(--font-body);
}

/* --- Auth / Cart Status Bar (Positioned ABOVE Nav) --- */
.auth-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-cream);
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-wrapper .ord-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

#authStatus,
#authPlaceHolder {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-cream);
  text-transform: uppercase !important;
}

#authStatus a,
#authStatus .cart-link,
#authStatus .auth-link {
  color: var(--color-cream) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}

#authStatus a:hover,
#authStatus .cart-link:hover,
#authStatus .auth-link:hover {
  color: var(--color-secondary) !important;
}

#authStatus .btn-signin-top,
.auth-wrapper [id$="hlnkSignIn"] {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--color-cream) !important;
}

#authStatus .btn-signin-top:hover,
.auth-wrapper [id$="hlnkSignIn"]:hover {
  background: none !important;
  color: var(--color-secondary) !important;
}

.cart-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: 4px;
}

.auth-wrapper .splitter {
  color: rgba(248, 243, 234, 0.3);
  margin: 0 4px;
}

@media only screen and (max-width: 640px) {
  .auth-wrapper {
    padding: 6px 12px;
    height: auto;
    min-height: 36px;
  }
  .auth-wrapper .ord-container {
    justify-content: center;
    padding: 0;
    flex-wrap: wrap;
  }
  #authStatus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    font-size: 12px;
    text-align: center;
  }
}

/* --- Main Navbar --- */
#navbar {
  background: linear-gradient(180deg, #E8D9C5 0%, #F5ECE0 55%, #FAF5EE 100%);
  border-bottom: 1px solid rgba(42, 34, 28, 0.12);
  transition: background 0.3s ease;
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 48px;
  height: 125px;
  box-sizing: border-box;
}

.nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.nav-logo img {
  width: 175px;
  height: auto;
  max-width: 175px !important;
  max-height: 100px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}

#hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

#hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary);
}

.nav-menu-left {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu-left > li {
  position: relative;
}

.nav-menu-left > li > a {
  position: relative;
  display: block;
  padding: 6px 0;
  color: #362821;
  font-family: var(--font-nav);
  font-size: 21px;
  font-weight: 700;
  text-transform: none;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.nav-menu-left > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #362821;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-menu-left > li:hover > a::after,
.nav-menu-left > li.active-tab > a::after {
  transform: scaleX(1);
}

.nav-right-cta {
  display: flex;
  align-items: center;
}

.nav-cta-btn {
  position: relative;
  display: inline-block;
  padding: 13px 28px;
  background-color: #96623B;
  color: #FFFFFF !important;
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 400;
  text-decoration: none !important;
  border: 2px solid #96623B;
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
  transition: color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #F5EBDB;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

.nav-cta-btn:hover::before {
  transform: translateY(0);
}

.nav-cta-btn:hover {
  color: #362821 !important;
}

/* Mobile drawer */
#mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: 32px 0;
}

#mobileMenu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mobileMenu a.mobile-menu-logo {
  display: block;
  margin-bottom: 10px;
  padding: 0;
}

#mobileMenu a.mobile-menu-logo img {
  width: 180px;
  height: auto;
  max-width: 180px;
  max-height: 80px;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

#mobileMenu a:not(.mobile-menu-logo) {
  padding: 4px 16px !important;
  color: #362821 !important;
  font-family: var(--font-nav) !important;
  font-size: 31px !important;
  font-weight: 700 !important;
  text-transform: none;
  text-decoration: none !important;
  text-align: center;
}

#mobileMenu .mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

@media only screen and (max-width: 900px) {
  .nav-inner {
    padding: 8px 16px;
    height: 70px;
  }
  .nav-menu-left,
  .nav-right-cta {
    display: none;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-logo img {
    width: 140px !important;
    height: 56px !important;
    max-width: 140px !important;
    max-height: 56px !important;
  }
  #hamburger {
    display: flex;
  }
}

/* --- Footer --- */
footer {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-cream);
  flex-shrink: 0;
  font-family: var(--font-body);
  margin-top: 24px;
}

.footer-bg-wrapper {
  position: relative;
  background-color: #2D231E;
  padding: 100px 40px 60px;
  overflow: hidden;
  min-height: 1050px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-top-left-radius: 50% 30px;
  border-top-right-radius: 50% 30px;
}

.footer-bg-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://images.squarespace-cdn.com/content/v1/69850c2f1aa2322f15827a12/da494dcd-6e60-41c6-908b-9ae6b4681826/Grape+illustrations+for+website.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1600px auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.footer-container,
.footer-bottom-bar {
  position: relative;
  z-index: 2;
}

.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.footer-left-sec {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
}

.footer-cols-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.footer-brand-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.footer-col-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.footer-address {
  font-style: normal;
  font-size: 16px;
  color: var(--color-cream);
  line-height: 1.8;
}

.footer-phone {
  color: var(--color-cream);
  text-decoration: underline;
  font-weight: 500;
  font-size: 16px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 14px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cream);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 0.8;
}

.footer-social-block {
  margin-top: 60px;
}

.social-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.social-icons {
  display: flex;
  gap: 20px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-icon:hover {
  opacity: 0.8;
}

/* Newsletter Outline Box on Right */
.footer-right-sec {
  width: 480px;
  flex-shrink: 0;
}

.newsletter-box {
  border: 2px solid var(--color-cream);
  padding: 56px 40px;
  text-align: center;
}

.newsletter-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.newsletter-subtitle {
  font-size: 14px;
  color: var(--color-cream);
  margin-bottom: 32px;
  opacity: 0.9;
  line-height: 1.5;
}

.newsletter-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.newsletter-signup-btn {
  position: relative;
  display: inline-block;
  padding: 16px 48px;
  background-color: #F5EBDB;
  color: #362821;
  border: 2px solid #F5EBDB;
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.newsletter-signup-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #362821;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

.newsletter-signup-btn:hover::before {
  transform: translateY(0);
}

.newsletter-signup-btn:hover {
  color: #F5EBDB;
  border-color: #F5EBDB;
}

.newsletter-disclaimer {
  font-size: 12px;
  color: var(--color-cream);
  opacity: 0.8;
  margin-top: 16px;
  line-height: 1.5;
}

.footer-bottom-bar {
  max-width: var(--container-max-width);
  margin: 60px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(248, 243, 234, 0.15);
  text-align: center;
  width: 100%;
}

.footer-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 24px;
}

.footer-legal-links a {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-cream);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.footer-legal-links a:hover {
  opacity: 0.8;
}

.footer-copy {
  font-size: 14px;
  color: var(--color-cream);
  opacity: 0.8;
}



@media only screen and (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    gap: 40px;
  }
  .footer-right-sec {
    width: 100%;
  }
}

@media only screen and (max-width: 640px) {
  .footer-bg-wrapper {
    padding: 40px 20px 24px;
  }
  .footer-cols-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .newsletter-box {
    padding: 32px 20px;
  }
  .newsletter-input-group {
    flex-direction: column;
  }
}