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

/* Montserrat — declared inline rather than @import'd, matching the live
   Cordant Winery site's font. See git history for the rationale on
   inlining @font-face instead of @import (removes a round trip). Latin
   subset only; add other unicode-range blocks back if a store needs
   Vietnamese or latin-ext. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aXo.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 - Design System
   ======================================== */

:root {
  /* ========== TYPOGRAPHY ========== */
  /* Font Families - Montserrat, matching the live Cordant Winery site */
  --font-display: "Montserrat", sans-serif;
  --font-display-bold: "Montserrat", sans-serif;

  --font-body: "Montserrat", sans-serif;

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

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

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

  /* ========== COLOR PALETTE ========== */
  /* Primary Brand Color - Cordant Winery sage green */
  --color-primary: #8DB5AB;
  --color-primary-dark: #59746D;
  --color-primary-light: #C2DDD6;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #121212;
  --color-cream: #F5F5F5;
  --color-gray-50: #f7f8fa;
  --color-gray-100: #fafafa;
  --color-gray-200: #eeeeee;
  --color-gray-300: #dddddd;
  --color-gray-400: #a9a9a9;
  --color-gray-500: #6e6e6e;
  --color-gray-600: #3e3e3e;
  --color-gray-700: #272727;
  --color-gray-800: #111111;
  --color-gray-900: #121212;

  /* Semantic Colors */
  --color-text: var(--color-black);
  --color-text-dark: var(--color-black);
  --color-text-light: var(--color-gray-600);
  --color-background: #ffffff;
  --color-border: var(--color-gray-300);
  --color-border-light: var(--color-gray-300);
  --color-error: #ff3333;

  /* Brand Accent - Cordant's promo-banner coral/pink */
  --color-accent: #F4989E;
  --color-accent-secondary: #8a8a8a;

  /* Surface tones */
  --color-surface: #F5F5F5;
  --color-nav-surface: #121212;
  --color-nav-border: #222222;

  /* ========== NAVIGATION SPECIFIC - matches live site's black header/footer ========== */
  --nav-bg-color: #121212;
  --nav-text-color: #ffffff;
  --nav-link-color: #ffffff;
  --nav-link-hover-color: #8DB5AB;

  /* ========== COMPONENT COLORS ========== */
  --color-input-bg: var(--color-white);
  --color-input-text: var(--color-gray-700);
  --color-input-border: var(--color-border);

  /* ========== OVERLAYS & TRANSPARENCY ========== */
  --overlay-subtle: rgba(0, 0, 0, 0.1);
  --overlay-light: rgba(167, 172, 183, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.16);
  --overlay-strong: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --overlay-header: rgba(19, 24, 29, 0.12);

  /* ========== SPACING ========== */
  --border-width-thin: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 4px;
  --border-radius-lg: 4px;

  /* ========== SHADOWS ========== */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ========== GRADIENTS ========== */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  --gradient-error: linear-gradient(287deg, #f0280a 0%, #bc2610 100%);

  /* ========== LAYOUT ========== */
  --container-max-width: 1400px;
  --header-height: 150px;
  --promo-banner-height: 55px;
  --masthead-height: 165px;

  /* ========== LEGACY/COMPONENT PROPERTIES ========== */
  --btn-padding: 10px 24px;
  --btn-text-transform: none;
  --btn-letter-spacing: normal;
  --btn-border: 1px solid #000000;
  --btn-hover-opacity: 1;
  --cart-summary-top: 150px;
  
    /* ========== SPACING SCALE (Strategic & Harmonized) ========== */
  --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;

  /* ========== BORDER RADII SCALE ========== */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
}

/* Global Hard Edge Reset (No Border Radius) */
*,
.productItem,
.productItem .pi-content,
.productItem .prod-img,
.productItem .cmd-container .btn,
.productItem .qty-container,
.productItem .comingSoon,
.productItem .soldout,
.btn,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="search"],
select,
textarea {
  border-radius: 0 !important;
}

/* 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: #ffffff;
  --modal-bg-color: var(--color-white);
  --bg-input: var(--color-white);

  /* Button Styles - matching the live site's black CTA buttons */
  --btn-border-color: #121212;
  --btn-bg-color: #121212;
  --btn-color: #ffffff;
  --btn-active-bg-color: #121212;
  --btn-active-color: #ffffff;
  --btn-active-border-color: #121212;
  --btn-background-color: #121212;
  --btn-text-color: #ffffff;
  --btn-hover-background-color: #8DB5AB;
  --btn-hover-text-color: #ffffff;
  --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.
   ------------------------------------------------------------ */

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

--color-primary: var(--color-gray-750);
--color-primary-dark: var(--color-black);
--color-primary-light: var(--color-gray-600);

--color-text: var(--color-gray-750);
--color-text-dark: var(--color-black);
--color-text-light: var(--color-gray-500);
--color-background: var(--color-white);
--color-surface: var(--color-white);
--color-surface-alt: var(--color-gray-50);
--color-border: var(--color-gray-250);
--color-border-light: var(--color-gray-150);

--color-accent: #F4989E;
--color-accent-secondary: var(--color-gray-500);

--nav-bg-color: #121212;
--nav-text-color: var(--color-white);
--nav-link-color: var(--color-white);
--nav-link-hover-color: #8DB5AB;

--btn-bg-color: var(--color-gray-750);
--btn-color: var(--color-white);
--btn-border-color: var(--color-gray-750);
--btn-hover-background-color: var(--color-white);
--btn-hover-text-color: var(--color-gray-750);

--bg-color: var(--color-white);
--border-color: var(--color-gray-250);

--pdp-gap: var(--spacing-3xl);
--pdp-media-width: 420px;
--sidebar-sticky-top: 24px;

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

/* Clears the fixed #siteHeader (55px promo banner + ~110px nav/auth rows =
   165px masthead, matching the live site). 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: var(--masthead-height);
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--masthead-height));


/* ------------------------------------------------------------
   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, 420px) minmax(0, 1fr);
  column-gap: var(--spacing-3xl, 36px);
  row-gap: 0;
  align-items: start;
  width: 100%;
  margin-top: var(--spacing-lg);
}

& .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(--spacing-xl, 24px) !important;
  align-self: start !important;
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 8px);
  z-index: 2;
}

& #tabs-product .prod-image img,
& #tabs-product .prod-image img.imgLarge {
  display: block;
  width: auto;
  max-width: 100% !important;
  max-height: 440px !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;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl, 30px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  color: var(--color-text-dark, #000000);
}

/* 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-display);
  font-size: 24px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--color-text-dark);
  background: none;
}

& .tabs-container .uc.addToCart .price.old-price {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  text-decoration: line-through;
}

& .tabs-container .uc.addToCart .cmd-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 10px);
  flex-wrap: nowrap;
  margin: 0;
}

& .tabs-container .uc.addToCart .qty-label {
  display: inline-block;
  font-size: var(--font-size-2xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
  color: var(--color-gray-600, #3e3e3e);
}

& .tabs-container .uc.addToCart .qty-container {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}

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

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

& .tabs-container .uc.addToCart .btn:not(.jqp) {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-height: 38px;
  padding: 0 var(--spacing-lg);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

& .tabs-container .uc.addToCart .btn:not(.jqp):hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

& .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-display);
  font-size: var(--font-size-md, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-dark, #000000);
}

& #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: 8px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  font-size: var(--font-size-sm, 13px);
  line-height: var(--line-height-normal, 1.5);
  vertical-align: top;
}

& table.wine-information td:first-child:not([colspan]) {
  width: 160px !important;
  padding-right: var(--spacing-md);
  font-weight: var(--font-weight-semibold, 600) !important;
  color: var(--color-text-light);
}

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

/* Download link row */
& table.wine-information td[colspan="2"] {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
}

& table.wine-information a.lnk,
& table.wine-information a.wine-notes {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-xs, 13px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-dark);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

& table.wine-information a.lnk:hover,
& table.wine-information a.wine-notes:hover {
  background: var(--color-surface);
}


/* --- 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: 420px;
    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: 40px !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  z-index: auto !important;
  overflow: visible !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: var(--radius-md) 0 0 var(--radius-md) !important;
}

& .product-search .product-search-options .dropdown {
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !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: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 var(--spacing-2xs) 0 var(--spacing-xs) !important;
}

& .product-search .ui-selectmenu-button .ui-selectmenu-text {
  padding-left: 0 !important;
  line-height: normal !important;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* 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: var(--font-size-sm);
  color: var(--color-text);
}

& .product-search .txt-product-search::placeholder {
  color: var(--color-text-light);
}

& .product-search .txt-product-search:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--color-accent) !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: 40px !important;
  padding: 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color: var(--color-text) !important;
  cursor: pointer;
  text-decoration: none;
}

& .product-search .button-search-product:hover {
  background: var(--color-surface-alt) !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 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") mask rather than a Font Awesome glyph: no extra
   request, so the icon is present at first paint instead of popping in when
   the icon font arrives. `currentColor` keeps it themeable. */
& .product-search .button-search-product::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -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;
}

/* --- jQuery UI selectmenu (search filter + sort) --- */

& .ui-selectmenu-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  height: 40px;
  padding: 0 var(--spacing-xs);
  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);
  text-decoration: none;
}

& .ui-selectmenu-button .ui-selectmenu-text {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .ui-selectmenu-button .ui-icon {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}

/* --- 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: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

& .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-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  padding: 0 0 var(--spacing-2xs);
  margin: 0 0 var(--spacing-2xs);
  border-bottom: 1px solid var(--color-border-light);
}

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

& .shop-left-menu li.g > a {
  display: block;
  padding: var(--spacing-2xs) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  text-decoration: none;
}

& .shop-left-menu li.g > a:hover,
& .shop-left-menu li.g > a:focus-visible {
  color: var(--color-accent-secondary);
}

& .shop-left-menu li.g > a.selected,
& .shop-left-menu li.g.selected > a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

/* 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 var(--spacing-lg);
  background: none;
  border: 0;
  padding: 0;
}

& .horizontal-menu .shop-left-menu > span {
  display: block;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
  padding: 0;
}

& .horizontal-menu .shop-left-menu > span > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0 var(--spacing-lg);
}

/* "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 links --- */

& .horizontal-menu .shop-left-menu li.g > a {
  display: block;
  padding: var(--spacing-2xs) 0;
  /* Sits directly on the rule under the nav, so the marker on the current
     category reads as part of it. */
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

& .horizontal-menu .shop-left-menu li.g > a:hover {
  color: var(--color-text-dark);
  border-bottom-color: var(--color-border);
}

& .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: var(--color-text-dark);
  font-weight: var(--font-weight-medium);
  border-bottom-color: var(--color-accent);
}

/* 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;
}

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

/* --- Drop-downs --- */

& .horizontal-menu .shop-left-menu li.g > ul {
  position: absolute;
  top: calc(100% + var(--spacing-3xs));
  left: 0;
  z-index: 30;
  min-width: 190px;
  /* Never let a drop-down on a right-hand item run off the page. */
  max-width: min(280px, calc(100vw - var(--spacing-xl)));
  margin: 0;
  padding: var(--spacing-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px var(--overlay-subtle);
}

& .horizontal-menu .shop-left-menu li.g > ul li.g > a {
  display: block;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border: 0;
  border-radius: var(--radius-sm);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: normal;
}

& .horizontal-menu .shop-left-menu li.g > ul li.g > a:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-dark);
}

/* Must come after the rule above, which would otherwise repaint a selected
   sub-item's label dark on its dark fill — an unreadable black block. */
& .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: var(--color-accent);
  color: var(--color-white);
}

/* --- 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 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

& .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;
}

/* `.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-2xs);
  width: 100%;
  padding: var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

& .productItem:hover .pi-content {
  border-color: var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* 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;
  height: 240px;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 0 var(--spacing-2xs);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

& .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.3s cubic-bezier(0.2, 0, 0.2, 1);
}

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

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

& .productItem h2.prod-name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

& .productItem a.prod-title {
  font-family: var(--font-display);
  color: var(--color-text-dark);
  text-decoration: none;
}

& .productItem a.prod-title:hover {
  text-decoration: underline;
}

& .productItem .prod-content p {
  margin: 0 0 var(--spacing-3xs);
}

& .productItem .prod-content p:last-child {
  margin-bottom: 0;
}

/* --- Card add-to-cart --- */

& .productItem .uc.addToCart {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-top: auto;
  padding-top: var(--spacing-2xs);
}

& .productItem .addToCart > span {
  display: block;
  width: 100%;
}

& .productItem fieldset.add-to-cart {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Duplicates the button label. */
& .productItem fieldset.add-to-cart legend {
  display: none;
}

& .productItem .price-container {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2xs);
  margin: 0;
}

& .productItem .price-label {
  display: none;
}

& .productItem .price,
& .productItem .sale-price {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& .productItem .price.old-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  text-decoration: line-through;
}

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

& .productItem .qty-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  color: var(--color-text-light);
}

& .productItem .qty-container {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--spacing-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

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

& .productItem .cmd-container .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  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;
}

& .productItem .cmd-container .btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

/* 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 ---
   `.comingSoon` / `.comingSoon.soldout` sit inside fieldset.add-to-cart at
   the bottom of the card. Lift them out to a badge over the image. */

& .productItem .comingSoon {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 2;
  padding: var(--spacing-3xs) var(--spacing-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-dark);
}

& .productItem .comingSoon p {
  margin: 0;
}

/* Sold out reads as unavailable: badge recedes, card de-emphasised. */
& .productItem .comingSoon.soldout {
  background: var(--color-surface-alt);
  border-color: var(--color-border-light);
  color: var(--color-text-light);
}

& .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;
}

/* --- Shopping Suggestions Carousel ("Frequently bought together") ---
   Product-details page cross-sell. Platform markup: .shopping-suggestions
   > .header h4 + a single-slide Bootstrap carousel (#divShoppingSuggestionCarousel,
   data-wrap="false") whose .carousel-item .row holds plain .item.col cards —
   not .productItem, so none of the rules above apply. Each card reuses the
   same .prod-title / .price-container / .cmd-container / .qty-container /
   .subtotal class names as the PDP addToCart panel, scoped here to
   .shopping-suggestions so they can't leak into or collide with either. */

& .shopping-suggestions.section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border-light);
}

& .shopping-suggestions .header h4 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  text-align: center;
}

& .shopping-suggestions .carousel-inner,
& .shopping-suggestions .carousel-item {
  width: 100%;
}

& .shopping-suggestions .carousel-item > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  margin: 0;
}

& .shopping-suggestions .item.col {
  display: flex;
  flex-direction: column;
  flex: 0 1 220px;
  max-width: 220px;
  padding: 0;
  text-align: center;
}

& .shopping-suggestions .item.col a.img {
  display: block;
  margin-bottom: var(--spacing-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

& .shopping-suggestions .item.col img.img-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  padding: var(--spacing-md);
  object-fit: contain;
  border: 0;
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

& .shopping-suggestions .item.col a.img:hover img.img-thumbnail {
  transform: scale(1.04);
}

& .shopping-suggestions .item.col a.prod-title {
  display: block;
  margin-bottom: var(--spacing-2xs);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-dark);
  text-decoration: none;
}

& .shopping-suggestions .item.col a.prod-title:hover {
  text-decoration: underline;
}

& .shopping-suggestions .uc.alt-add-to-cart {
  margin-top: auto;
}

& .shopping-suggestions fieldset.add-to-cart {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Duplicates the panel heading; the qty label and running subtotal are
   noise on a small cross-sell card. */
& .shopping-suggestions fieldset.add-to-cart legend,
& .shopping-suggestions .price-label,
& .shopping-suggestions .qty-label,
& .shopping-suggestions .subtotal {
  display: none !important;
}

& .shopping-suggestions .price-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-2xs);
  margin: 0;
}

& .shopping-suggestions .price {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& .shopping-suggestions .cmd-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  margin: 0;
}

& .shopping-suggestions .qty-container {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--spacing-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

& .shopping-suggestions .qty-container input[type="text"].number {
  width: 30px !important;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-dark);
}

/* The platform ships a hidden `.btn.jqp` shipping-popup/limited-offer
   trigger alongside the real Add to Cart link (see .tabs-container .uc.addToCart
   .btn.jqp above) — keep it hidden here too rather than relying on its
   inline style. */
& .shopping-suggestions .cmd-container .btn.jqp {
  display: none !important;
}

& .shopping-suggestions .cmd-container .btn:not(.jqp) {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--spacing-md);
  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;
}

& .shopping-suggestions .cmd-container .btn:not(.jqp):hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

@media only screen and (max-width: 640px) {
  & .shopping-suggestions .carousel-item > .row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-sm);
  }

  & .shopping-suggestions .item.col {
    flex: 0 0 160px;
    max-width: 160px;
  }
}

/* --- 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;
    width: 200px !important;
    height: auto;
    align-self: stretch;
    margin: 0;
    padding: 0 var(--spacing-lg) 0 0;
    background: none;
    border-right: 1px solid var(--color-border-light);
    border-radius: 0;
  }

  & .data:not([class*="-items-across"]):has(.productItem) .prod-img img,
  & .data.one-item-across .prod-img img {
    max-height: 220px !important;
  }

  /* 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. */
  & .horizontal-menu .shop-left-menu > span {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
  }

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

  & .horizontal-menu .shop-left-menu .menu-header {
    display: block !important;
  }

  & .horizontal-menu .shop-left-menu li.g > a {
    border-bottom: 0;
    margin-bottom: 0;
    white-space: normal;
  }

  & .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;
  }

  /* 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: 0 0 var(--spacing-2xs) var(--spacing-2xs);
    padding: 0 0 0 var(--spacing-2xs);
    background: none;
    border: 0;
    border-left: 1px solid var(--color-border-light);
    border-radius: 0;
    box-shadow: none;
  }

  & .horizontal-menu .shop-left-menu li.g > ul li.g > a {
    padding-left: 0;
    padding-right: 0;
    background: none;
    color: var(--color-text-light);
  }

  & .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;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-medium);
  }

  /* --- 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-light);
  border-radius: var(--radius-md);
  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);
}

@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 — Cordant Winery Live Match
   ============================================================ */

#siteHeader.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--color-black);
  border-bottom: 1px solid var(--color-nav-border);
}

.header_banner {
  max-height: 55px;
  overflow: hidden;
  background-color: var(--color-accent);
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  padding: 4px 12px;
}

.header_banner a {
  display: block;
  color: var(--color-black);
  font-family: var(--font-body);
  text-decoration: none;
}

.header_banner strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header_banner .banner-subtext {
  font-size: 11px;
  font-weight: 400;
}

.header-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  min-height: 80px;
  background: var(--color-black);
  max-width: 1400px;
  margin: 0 auto;
}

#cordant_logo img {
  max-width: 250px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* --- Auth Wrapper Bar below main header row --- */
.auth-wrapper {
  background: var(--color-black);
  border-top: 1px solid var(--color-nav-border);
  border-bottom: 1px solid var(--color-nav-border);
  padding: 6px 0;
}

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

#authStatus {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 400 !important; /* DO NOT BOLD SIGN IN OR SHOPPING CART */
}

#authStatus a,
#authStatus .cart-link,
#authStatus .auth-link,
#viewCartPlaceHolder a,
#authPlaceHolder a {
  color: #FFFFFF !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 400 !important; /* DO NOT BOLD SIGN IN OR SHOPPING CART */
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

#authStatus a:hover,
#authStatus .cart-link:hover,
#authStatus .auth-link:hover,
#viewCartPlaceHolder a:hover,
#authPlaceHolder a:hover {
  color: #8DB5AB !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;
  font-weight: 400 !important; /* DO NOT BOLD SIGN IN OR SHOPPING CART */
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

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

#authStatus .splitter {
  color: #888888 !important;
  font-weight: 400 !important;
  margin: 0 4px;
}

.header-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  flex-shrink: 0;
  transition: color 0.2s ease, fill 0.2s ease;
}

#authStatus a:hover .header-icon,
.auth-wrapper [id$="hlnkSignIn"]:hover .header-icon {
  color: #8DB5AB !important;
  fill: #8DB5AB !important;
}

.main-navigation .desktop-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .desktop-menu > li > a {
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important; /* ALL CAPS */
  text-decoration: none;
  letter-spacing: 1.5px;
  transition: color 0.2s ease;
  padding: 4px 0;
}

.main-navigation .desktop-menu > li > a:hover {
  color: #8DB5AB !important;
}

.main-navigation .has-children {
  position: relative;
}

.main-navigation .dropdown-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: #1e1e1e;
  border: 1px solid var(--color-nav-border);
  padding: 8px 0;
  min-width: 180px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  z-index: 501;
}

.main-navigation .has-children:hover .dropdown-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.main-navigation .dropdown-submenu a {
  display: block;
  padding: 10px 20px;
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.main-navigation .dropdown-submenu a:hover {
  color: #000000 !important;
  background: #8DB5AB !important;
  font-weight: 700 !important;
}

#hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

#hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #8DB5AB;
  transition: all 0.3s ease;
}

#mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: 70px 20px 40px 20px;
}

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

#mobileMenu a {
  padding: 6px 16px;
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center;
  letter-spacing: 1.5px;
}

#mobileMenu a:hover {
  color: #8DB5AB !important;
}

#mobileMenu .mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

@media only screen and (max-width: 900px) {
  :root {
    --masthead-height: 210px;
  }

  .header_banner {
    max-height: none !important;
    overflow: visible !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
  }

  .header-main-row {
    padding: 10px 16px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  #siteHeader .main-navigation {
    display: none !important;
  }
  
  #hamburger {
    display: flex !important;
  }

  #cordant_logo img {
    max-width: 170px !important;
    height: auto !important;
  }

  .header_banner {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  .header_banner strong {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 640px) {
  .auth-wrapper .ord-container {
    padding: 0 10px !important;
    justify-content: center !important;
  }

  #authStatus {
    font-size: 11px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #authStatus a {
    font-size: 11px !important;
  }
}

/* --- FOOTER --- */
footer#cordant-footer {
  display: block !important;
  background: #000000 !important;
  color: var(--color-white) !important;
  padding: 0 0 35px 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

footer .stay-in-touch.offWhiteBg {
  background: #FFFEFD;
  color: #000000;
  padding: 40px 20px 30px 20px;
  text-align: center;
  margin-bottom: 30px;
  border-top: 1px solid black;
}

footer .stay-in-touch h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #8DB5AB;
  text-transform: uppercase;
  letter-spacing: 3px;
}

footer .stay-in-touch .button.black {
  display: inline-block;
  background: #000000;
  color: #FFFFFF;
  padding: 10px 28px;
  font-family: var(--font-body);
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s ease;
}

footer .stay-in-touch .button.black:hover {
  background: #222222;
}

footer ul.social.inline {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
}

footer ul.social.inline li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer ul.social li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #8DB5AB !important;
  border-radius: 50% !important;
  color: #8DB5AB !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

footer ul.social li a svg {
  display: block !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

footer ul.social li a:hover {
  background: #8DB5AB !important;
  color: #FFFFFF !important;
  border-color: #8DB5AB !important;
}

footer .footer-nav-wrapper {
  display: block !important;
  padding: 20px 0 !important;
}

footer ul#cordant-menu-footer-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer ul#cordant-menu-footer-menu li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

footer ul#cordant-menu-footer-menu li a {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #8DB5AB !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

footer ul#cordant-menu-footer-menu li a:hover {
  color: #FFFFFF !important;
}

footer .footer-contact {
  display: block !important;
  padding-top: 25px !important;
}

footer .footer-contact h5 {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #CCCCCC !important;
  margin: 8px 0 !important;
  text-transform: uppercase !important;
}

footer .footer-contact h5 a {
  color: #8DB5AB !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

footer .footer-contact h5 a:hover {
  color: #FFFFFF !important;
}

/* ============================================================
   BRAND ACCENT POP (#8DB5AB) ENHANCEMENTS
   ============================================================ */

/* Product Card Hover & Accent Styling */
.productItem .pi-content {
  border: 1px solid var(--color-border-light) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.productItem:hover .pi-content {
  border-color: #8DB5AB !important;
  box-shadow: 0 10px 24px rgba(141, 181, 171, 0.25) !important;
}

/* Availability & Award Badges Accent */
.productItem .comingSoon,
.productItem .soldout,
.badge.badge-primary,
.sl-badge {
  background: #8DB5AB !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* Form Input Focus Highlight */
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #8DB5AB !important;
  outline: 1px solid #8DB5AB !important;
  box-shadow: 0 0 0 2px rgba(141, 181, 171, 0.25) !important;
}