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

/* Questrial — declared inline rather than @import'd.

   `@import url(fonts.googleapis.com/css2?...)` costs an extra serialised
   round trip: this file has to download and parse before the request for
   Google's CSS is even made, and only then is the woff2 discovered. On a
   slow connection that pushes the font hundreds of ms past first paint, so
   the page renders in the fallback face and visibly reflows when Questrial
   lands — the flash.

   Inlining the @font-face that Google's CSS would have returned removes the
   middle hop: main.css -> woff2, one round trip instead of two. Latin
   subset only; add the other unicode-range blocks back if a store needs
   Vietnamese or latin-ext.

   `font-display: swap` still allows a swap if the font is late. Change it to
   `optional` to guarantee zero reflow — the browser then keeps the fallback
   for that pageview and uses Questrial from cache on later ones. */

@font-face { font-family: aktiv-grotesk; src: url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/l?subset_id=2&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/d?subset_id=2&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/a?subset_id=2&fvd=n4&v=3") format("opentype"); font-style: normal; font-weight: 400; font-stretch: normal; font-display: auto; }

@font-face { font-family: aktiv-grotesk; src: url("https://use.typekit.net/af/36c3c6/00000000000000007753ca29/31/l?subset_id=2&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/36c3c6/00000000000000007753ca29/31/d?subset_id=2&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/36c3c6/00000000000000007753ca29/31/a?subset_id=2&fvd=n5&v=3") format("opentype"); font-style: normal; font-weight: 500; font-stretch: normal; font-display: auto; }

@font-face { font-family: aktiv-grotesk; src: url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/l?subset_id=2&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/d?subset_id=2&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/a?subset_id=2&fvd=n7&v=3") format("opentype"); font-style: normal; font-weight: 700; font-stretch: normal; font-display: auto; }

@font-face { font-family: aktiv-grotesk; src: url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/l?subset_id=2&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/d?subset_id=2&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/a?subset_id=2&fvd=i4&v=3") format("opentype"); font-style: italic; font-weight: 400; font-stretch: normal; font-display: auto; }

@font-face { font-family: aktiv-grotesk; src: url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/l?subset_id=2&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/d?subset_id=2&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/a?subset_id=2&fvd=i7&v=3") format("opentype"); font-style: italic; font-weight: 700; font-stretch: normal; font-display: auto; }

@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 - Questrial normalized across display & body */
  --font-display: aktiv-grotesk, sans-serif;
  --font-display-bold: aktiv-grotesk, sans-serif;

  --font-body: aktiv-grotesk, 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 - Silver Lake Black & Cream */
  --color-primary: #000000;
  --color-primary-dark: #111111;
  --color-primary-light: #333333;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-cream: #F1E9DE;
  --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: #000000;

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

  /* Brand Accent */
  --color-accent: #000000;
  --color-accent-secondary: #8a8a8a;

  /* Silver Lake surface tones */
  --color-surface: #F1E9DE;
  --color-nav-surface: #000000;
  --color-nav-border: #222222;

  /* ========== NAVIGATION SPECIFIC ========== */
  --nav-bg-color: #000000;
  --nav-text-color: #ffffff;
  --nav-link-color: #ffffff;
  --nav-link-hover-color: #F1E9DE;

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

  /* ========== LEGACY/COMPONENT PROPERTIES ========== */
  --btn-padding: 10px 24px;
  --btn-text-transform: none;
  --btn-letter-spacing: normal;
  --btn-border: 1px solid #000000;
  --btn-hover-opacity: 1;
  --btn-radius: 0;
  --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: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --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: #1C1B19;
}



/* ========================================
   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.
   ------------------------------------------------------------ */

#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);

/* Page canvas (#box/html) is dark now, so the core text tokens read
   light-on-dark everywhere they're used directly against the page
   background. Anything with its OWN separately-declared light background
   (price-table stripes, toasts, badges using --color-gray-50 etc.) keeps
   its own scoped dark-text override where that's still the case — see
   each such consumer. */
--color-text: rgba(255, 255, 255, 0.82);
--color-text-dark: var(--color-white);
--color-text-light: rgba(255, 255, 255, 0.55);
--color-background: var(--color-white);
/* Surface panels (dropdowns, side menus, related-item cards, wine-club
   cards) are a slightly different dark than the page canvas so they still
   read as elevated. Same text tokens work for both, kept separate in case
   that changes. */
--color-surface: #272725;
--color-surface-alt: #322F2B;
--color-surface-text: var(--color-white);
--color-surface-text-light: rgba(255, 255, 255, 0.6);
--color-surface-border: rgba(255, 255, 255, 0.18);
--color-surface-border-light: rgba(255, 255, 255, 0.09);
--color-border: rgba(255, 255, 255, 0.16);
--color-border-light: rgba(255, 255, 255, 0.08);

--color-accent: var(--color-gray-750);
--color-accent-secondary: var(--color-gray-500);

--nav-bg-color: var(--color-white);
--nav-text-color: var(--color-gray-750);
--nav-link-color: var(--color-gray-750);
--nav-link-hover-color: var(--color-gray-500);

--btn-bg-color: #272725;
--btn-color: var(--color-white);
--btn-border-color: #272725;
--btn-hover-background-color: var(--color-white);
--btn-hover-text-color: #272725;
--btn-radius: 0;

--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: #1C1B19;
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);

/* Knox's header sits in-flow inside #box (not fixed), so no top offset is
   needed here. 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. */
display: flex;
flex-direction: column;
min-height: 100vh;


/* ------------------------------------------------------------
   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;
  margin: 0 auto;
  background: #272725;
}

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

& .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(--btn-radius);
  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;
  /* Platform table default is a hardcoded dark gray (#333) — invisible on
     the dark page canvas. Only the label column themed its own color
     before; the value column needs one explicitly too. */
  color: var(--color-text);
}

& 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-surface-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-surface-text);
  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-surface-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-surface-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-surface-text);
}

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

& .product-search .txt-product-search:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--color-surface-text) !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-surface-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-surface-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-surface-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-surface-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

/* .shop-left-menu's own > span wrapper is always on --color-surface (dark),
   in both the vertical sidebar and horizontal top-nav layout below — so
   text inside it is scoped light-on-dark here rather than touching the
   shared --color-text* tokens used all over the rest of the page. */
& .shop-left-menu .menu-header,
& .shop-left-menu li.g > a.selected,
& .shop-left-menu li.g.selected > a {
  color: var(--color-surface-text);
}

& .shop-left-menu .menu-header {
  border-bottom-color: var(--color-surface-border-light);
}

& .shop-left-menu .menu-header:focus-visible {
  outline-color: var(--color-surface-text);
}

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

& .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-base);
  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-surface-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-surface-text-light);
  white-space: normal;
}

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

/* 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. Panel
   itself is dark now, so the selected pill inverts to light instead. */
& .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-surface-text);
  color: var(--color-surface);
}

/* --- 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: #272725;
  border: 1px solid rgba(255, 255, 255, 0.08);
  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: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  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;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 0 var(--spacing-2xs);
  background: transparent;
  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-white);
  text-decoration: none;
}

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

& .productItem .prod-content p {
  margin: 0 0 var(--spacing-3xs);
  color: rgba(255, 255, 255, 0.65);
}

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

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

/* Line 413 un-hides this against the platform's display:none; center it
   for the grid card layout instead of leaving it at its default left align. */
& .productItem .stock {
  display: block !important;
  width: 100%;
  text-align: center;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--spacing-2xs) 0;
}

& .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: rgba(255, 255, 255, 0.55);
}

& .productItem .qty-container {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--spacing-2xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  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-white);
}

/* Card sits on a dark tile, so the CTA inverts to light-on-dark for
   contrast — the opposite of the dark-on-light button used elsewhere
   on the (light) page background. */
& .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(--color-white);
  color: #272725;
  border: 1px solid var(--color-white);
  border-radius: var(--btn-radius);
  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, border-color 0.2s ease;
}

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

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

& .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-surface-border-light);
  color: var(--color-surface-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-surface-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-surface-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-surface-text);
}

/* 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(--btn-radius);
  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-surface-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-surface-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-surface-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);
  }

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

/* Card is dark (--color-surface), so the CTA inverts to light-on-dark for
   contrast — same treatment as .productItem .cmd-container .btn. */
& .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(--color-surface-text);
  color: var(--color-surface);
  border: 1px solid var(--color-surface-text);
  border-radius: var(--btn-radius);
  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: transparent;
  color: var(--color-surface-text);
}

& .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-surface-text-light);
}

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

/* --- Variation groups (clubs with multiple ship-frequency options) ---
   Card has no title/button of its own here; instead a group heading
   (h3.wine-club-group) plus a `.variations` block holding one row
   per variation, each with its own title + Join button. Everything
   here still lives inside the font-size:0 card, so every real child
   needs its own font-size reset — same rule as the top-level title/btn
   above, just one level deeper. Without this, variation clubs (any
   group with more than one ship option) render with invisible text. */

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

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

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

& .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-surface-border-light);
}

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

& .wineclub-membership > div[class^="club-"] .variations li > a:first-child {
  grid-column: 1;
  color: var(--color-surface-text);
  text-decoration: none;
}

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

& .wineclub-membership > div[class^="club-"] .variations li > a:first-child h3 {
  display: block;
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

& .wineclub-membership > div[class^="club-"] .variations li > a.btn {
  grid-column: 2;
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px !important;
  padding: 0 var(--spacing-sm);
  background: var(--color-surface-text);
  color: var(--color-surface);
  border: 1px solid var(--color-surface-text);
  border-radius: var(--btn-radius);
  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-"] .variations li > a.btn:hover {
  background: transparent;
  color: var(--color-surface-text);
}

@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;
  z-index: 500;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: 0 var(--spacing-xl);
  height: var(--header-height);
  background: var(--nav-bg-color);
  border-bottom: 1px solid var(--color-border-light);
  transition: height 0.3s ease, background 0.3s ease;
}

#navbar.scrolled {
  height: calc(var(--header-height) * 0.7);
}

.nav-logo {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--nav-text-color);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  text-decoration: none;
}

.nav-logo img {
  height: 60%;
  width: auto;
  display: block;
}

#hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-2xs);
  background: none;
  border: none;
  cursor: pointer;
}

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

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.nav-menu > li > a {
  display: block;
  padding: var(--spacing-2xs) 0;
  color: var(--nav-link-color);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-menu > li > a:hover {
  color: var(--nav-link-hover-color);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--nav-bg-color);
  border: 1px solid var(--color-border-light);
  padding: var(--spacing-2xs) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-menu > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dropdown a {
  display: block;
  padding: var(--spacing-2xs) var(--spacing-md);
  color: var(--nav-link-color);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.dropdown a:hover {
  color: var(--nav-link-hover-color);
}

.nav-cta {
  display: inline-block;
  padding: var(--btn-padding);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-cta:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
}

/* Mobile drawer — toggled by tools/../main.js's toggleMobileMenu()/closeMobileMenu() */
#mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--nav-bg-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: var(--spacing-xl) 0;
}

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

#mobileMenu a {
  padding: var(--spacing-sm) var(--spacing-xl);
  color: var(--nav-text-color);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  text-decoration: none;
  text-align: center;
}

#mobileMenu .mobile-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: none;
  border: none;
  color: var(--nav-text-color);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  line-height: 1;
}

@media only screen and (max-width: 900px) {
  #navbar {
    padding: 0 var(--spacing-md);
  }
  .nav-menu,
  .nav-cta {
    display: none;
  }
  #hamburger {
    display: flex;
  }
}

/* --- Auth / cart status bar --- */
.auth-wrapper {
  display: flex;
  align-items: center;
  height: 36px;
  background: #272725;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.auth-wrapper .ord-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#authStatus {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  color: #ffffff;
}

#authStatus a,
#authStatus .cart-link,
#authStatus .auth-link {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

#authStatus a:hover,
#authStatus .cart-link:hover,
#authStatus .auth-link:hover {
  color: #F1E9DE;
}

/* The platform renders Sign In as `.btn-signin-top` (real id ends in
   `hlnkSignIn`), which the global .btn rule elsewhere in this file turns
   into a solid button. In the auth bar it should read as plain text like
   the cart link, not a button. */
#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: var(--font-size-2xs) !important;
  color: #ffffff !important;
}

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

.auth-wrapper .splitter {
  color: var(--color-border-light);
}

@media only screen and (max-width: 900px) {
  .auth-wrapper .ord-container {
    padding: 0 var(--spacing-md);
  }
}

/* --- Footer --- */
footer {
  background: var(--nav-bg-color);
  color: var(--nav-text-color);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-lg);
  flex-shrink: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spacing-xl);
  max-width: var(--container-max-width);
  margin: 0 auto var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-light);
}

.footer-logo-sec img {
  height: 48px;
  width: auto;
  margin-bottom: var(--spacing-sm);
}

.footer-bio {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--nav-link-color);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
}

.footer-social {
  display: flex;
  gap: var(--spacing-2xs);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-light);
  color: var(--nav-text-color);
  text-decoration: none;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

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

.footer-links li {
  margin-bottom: var(--spacing-2xs);
}

.footer-links a {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--nav-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--nav-link-hover-color);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.footer-copy,
.footer-legal {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  color: var(--color-border-light);
}

@media only screen and (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
.header-wrapper {
  background: #272725 !important;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.header-main-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  padding: 10px 0;
  box-sizing: border-box;
}

/* Left: Site Title Link */
.header-logo-wrap {
  display: flex;
  align-items: center;
}

.site-title {
  z-index: 100;
}

.site-title-link {
  font-family: "aktiv-grotesk", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.site-title-link:hover {
  opacity: 0.8;
}

/* Right: Desktop Navigation */
.header-right-menu {
  display: flex;
  align-items: center;
}

.header-nav-desktop {
  display: block;
}

.header-nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 33px;
  align-items: center;
}

.header-nav-item {
  position: relative;
  list-style: none;
}

.header-nav-link {
  display: block;
  font-family: "aktiv-grotesk", sans-serif !important;
  font-size: 16px !important;
  line-height: 28.8px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 8px 0;
  transition: opacity 0.2s ease;
}

.header-nav-link:hover {
  opacity: 0.7;
}

/* Submenu Dropdown */
.header-nav-item--has-submenu {
  position: relative;
}

.header-nav-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 180px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: none !important;
  border-radius: 0;
  margin-top: 4px;
}

/* Hover bridge to maintain hover state when moving to submenu */
.header-nav-submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

.header-nav-item--has-submenu:hover .header-nav-submenu {
  display: none !important;
}

.header-nav-submenu li {
  list-style: none;
  border: none;
  margin: 0;
}

.header-nav-submenu a {
  display: block;
  padding: 10px 20px;
  font-family: "aktiv-grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #5f5f5f !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.header-nav-submenu a:hover {
  background-color: #f5f5f5;
  color: #000000 !important;
}

.nav-chevron {
  display: none !important;
}

/* Burger Button Styles */
.header-burger-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 6px;
  display: none;
  z-index: 1041;
  color: #ffffff !important;
  transition: opacity 0.3s ease;
}

.header-burger-btn:hover {
  opacity: 0.7;
}

.burger-box {
  width: 24px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.burger-inner {
  position: relative;
  width: 24px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-inner .line {
  width: 100%;
  height: 1px;
  background-color: #ffffff !important;
  transition: all 250ms cubic-bezier(0.2, 0.6, 0.3, 1);
  will-change: transform, opacity;
}

.burger.open .burger-inner .top-bun {
  transform: translateY(6.5px) rotate(45deg);
}

.burger.open .burger-inner .patty {
  opacity: 0;
}

.burger.open .burger-inner .bottom-bun {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile Navigation Menu */
.mobile-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #272725 !important;
  z-index: 1040;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center links */
  align-items: center; /* Horizontally center links */
  box-sizing: border-box;
  padding: 40px;
}

body.open .mobile-navigation {
  transform: translateY(0);
}

.btn-close-wrap {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
}

.btn-close-menu {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff !important; /* Close icon color white */
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-menu svg {
  width: 100%;
  height: 100%;
}

.mobile-navigation .nav-logo {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start;
  position: absolute;
  top: 20px;
  left: 20px;
  height: auto;
  padding: 0;
  border: none !important;
  margin: 0;
  max-width: calc(100% - 80px); /* Leave room for close button */
}

.mobile-navigation .site-title-link {
  font-family: "aktiv-grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.2;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-top,
.mobile-shop-nav {
  display: none !important; /* Get rid of the account/cart part */
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.mobile-menu li {
  list-style: none;
  text-align: center;
}

.mobile-menu .menu-link {
  display: block;
  font-family: "aktiv-grotesk", sans-serif !important;
  font-size: 6.6vmin !important;
  line-height: 42.5667px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-transform: uppercase;
  color: #ffffff !important; /* White links */
  text-decoration: none !important;
  padding: 10px 20px;
  transition: opacity 0.2s ease;
}

.mobile-menu .menu-link:hover {
  opacity: 0.8;
}

/* Mobile Submenu Disabled */
.mobile-menu li ul,
.mobile-menu li.expanded ul {
  display: none !important;
}

/* Overlay Backdrop */
.ord-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.open .ord-overlay {
  display: block;
  opacity: 1;
}

/* ========================================
   HEADER RESPONSIVE DESIGN
   ======================================== */

@media only screen and (max-width: 1024px) {
  .header-main {
    min-height: 80px;
    padding: 10px 0;
  }

  .site-title-link {
    font-size: 20px;
  }

  .header-nav-desktop {
    display: none !important;
  }

  .header-burger-btn {
    display: flex !important;
  }

  body.open {
    overflow: hidden;
  }
}

@media only screen and (min-width: 1025px) {
  .mobile-navigation,
  .btn-close-menu,
  .ord-overlay {
    display: none !important;
  }
}


/***** cat-v1-1 *****/
#cat-v1-1 .no-data {
  font-size:var(--font-size-md);
  text-align:center;
  padding:90px 0;
}

/* ========================================
   SHOP CONTENT TYPOGRAPHY
   ======================================== */
.shop-content h1 span {
  font-weight:400 !important;
}

.shop-content h2 {
  font-family:var(--font-display);
  font-size:var(--font-size-xl);
  line-height:42px;
  font-weight:400;
  color:var(--color-text);
  margin:var(--spacing-lg) 0 var(--spacing-sm);
}

.shop-content h3 {
  font-family:var(--font-display);
  font-size:var(--font-size-lg);
  line-height:30px;
  font-weight:400;
  color:var(--color-text);
  margin:var(--spacing-sm) 0 var(--spacing-xs);
}

.shop-content h4 {
  font-family:var(--font-display);
  font-size:var(--font-size-md);
  line-height:var(--line-height-normal);
  font-weight:400;
  color:var(--color-text);
  margin:var(--spacing-lg) 0 var(--spacing-2xs);
}

.shop-content p {
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  font-weight:400;
  line-height:var(--line-height-normal);
  color:var(--color-text);
  margin:0 0 var(--spacing-sm);
}

.shop-content hr {
  border:none;
  border-top:1px solid var(--color-border);
  margin:var(--spacing-2xl) 0;
}

/* h2/h3 immediately after divider — hr already provides top spacing */
.shop-content hr + h2,
.shop-content hr + h3 {
  margin-top:0;
}

/* Restore list styling stripped by the global ul/ol reset */
.shop-content ul,
.shop-content ol {
  list-style:disc;
  padding-left:var(--spacing-lg);
  margin:0 0 var(--spacing-sm);
}

.shop-content ol {
  list-style:decimal;
}

.shop-content li {
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  font-weight:400;
  line-height:var(--line-height-normal);
  color:var(--color-text);
  list-style-position:outside;
  padding-left:var(--spacing-3xs);
  margin-bottom:var(--spacing-2xs);
}

.shop-content li:last-child {
  margin-bottom: 0;
}

.shop-content strong,.shop-content b, .subtotal-cost-label {
  font-weight:600;
  color:var(--color-text);
}

.shop-content small {
  font-family:var(--font-body);
  font-size:var(--font-size-sm);
  line-height:20px;
  color:var(--color-text-light);
  display:inline-block;
}

.activeCart-panel {
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  right:0;
  width:100% !important;
  height:100vh !important;
  height:100dvh !important;
  background:var(--color-white);
  z-index:10001 !important;
  box-shadow:-30px 0 60px rgba(0, 0, 0, 0.15) !important;
  transform:translateX(100%);
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column;
}

.activeCart-panel.open {
  transform:translateX(0);
}

.add-to-cart {
  border:none;
  padding:0;
  margin:0;
}

.add-to-cart legend {
  display:none;
}

.add-to-cart > table {
  margin:0 0 var(--spacing-xs);
}

.add-to-cart .qty-container {
  display:inline-block;
  vertical-align:middle;
}

/***** activeCart *****/

.uc.activeCart {
  top:0 !important;
  border:none !important;
  border-radius:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column;
}

table.activeCart {
  border:none;
  width:100%;
  border-radius:0;
  overflow:hidden;
  height:100%;
  border-collapse:collapse;
  display:flex !important;
  flex-direction:column;
  background:var(--color-white);
}

table.activeCart > tbody {
  display:flex !important;
  flex-direction:column;
  flex:1;
  width:100%;
  min-height:0;
}

table.activeCart > tbody > tr:first-child {
  display: flex !important;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.uc.activeCart table,
.uc.activeCart tbody,
.uc.activeCart tr {
	width:100% !important;
}

.uc.activeCart tr {
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:0;
}

.uc.activeCart td {
  display:flex !important;
  box-sizing:border-box !important;
  padding:0;
}

.activeCart .cartBody {
  background: #272725 !important;

  padding:0 var(--spacing-xl) 0 !important; /* Adjust bottom padding as sticky elements will provide their own */
  flex:1;
  overflow:hidden !important; /* Hide overflow for the cart body itself, allowing children to scroll */
  width:100%;
  min-height:0;
  display:flex !important;
  flex-direction:column !important;
}

#ctl00_cphBody_cphContentLeftSide_ctl01_ctl00_ActiveCart1_pnlSumary {
  background: #272725 !important;
}

.activeCart .cartBody > * {
  flex-shrink:0;
}

.activeCart .cartBody br {
  display:none !important;
}

.activeCart .cartBody .empty-cart {
  padding: var(--spacing-xl) 0;
  text-align: center;
  width: 100%;
}

.activeCart .cartBody .empty-cart center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text-light) !important;
  line-height: var(--line-height-normal) !important;
}

.activeCart .cartBody .empty-cart a.btn {
  display: inline-block !important;
  margin-top: var(--spacing-xs) !important;
  padding: var(--spacing-2xs) var(--spacing-lg) !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  font-size: var(--font-size-sm) !important;
  transition: all 0.2s ease !important;
  border: 1px solid var(--color-primary) !important;
}

.activeCart .cartBody .empty-cart a.btn:hover {
  background: transparent !important;
  color: var(--color-primary) !important;
}

.activeCartMainContainer {
  display:flex !important;
  flex-direction:column;
  height:100%;
  width:100%;
  min-height:0;
  flex:1;
}

.activeCart-panel.open {
  transform:translateX(0);
}

/* Cart Drawer Overlay */
.cart-drawer-overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.4);
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
}

.cart-drawer-overlay.open {
  opacity:1;
  visibility:visible;
}

/* Floating Cart Button */
.js-cart-drawer-toggle {
  position:fixed;
  right:0px;
  top:calc(100vh / 2);
  width:64px;
  height:64px;
  background:var(--color-primary);
  color:var(--color-white);
  display:flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;
  box-shadow:var(--shadow-md);
  transition:transform 0.3s ease, background 0.3s ease;
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

.js-cart-drawer-toggle:hover {
  transform: scale(1.1);
  background:var(--color-primary-dark);
}

.js-cart-drawer-toggle::before {
  content: "" !important;
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Header */
.activeCart .cartHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--spacing-lg) var(--spacing-xl) !important;
  background: #807e78 !important;
  color:var(--color-white) !important;
  font-family:var(--font-display) !important; /* Baskervville */
  font-size:var(--font-size-lg) !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:0.5px !important;
  border-bottom:1px solid var(--color-primary-dark) !important;
}

.close-cart-drawer {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  font-size:var(--font-size-2xl);
  font-weight:200;
  line-height:0.8;
  color:var(--color-white) !important;
  padding:0;
  transition:all 0.25s ease;
  opacity:0.8;
  min-height: 64px !important;
  max-height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

.close-cart-drawer:hover {
  opacity: 1;
  transform:scale(1.15) rotate(90deg);
}

/* Shopping Summary Styling */
.activeCart .cartBody .cart-checkout-container { /* Target specifically within cartBody */
  order:6 !important;
  position:relative !important;
  top:auto !important;
  z-index:1 !important;
  background: #272725 !important;
  padding:0 0 var(--spacing-lg) !important;
  margin:0 !important;
  border-bottom:none !important;
  box-shadow:none !important;
}

.activeCart .cartBody .cart-checkout-container .btn {
  margin:0 !important;
}

.activeCart a:not(.basket):not(.btncontinueshopping):not(.btn),
.activeCart button,
.activeCart .btn {
  display: inline-block;
  width:auto;
  text-align:center;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-sm) !important;
  font-weight:500 !important;
  line-height:1em !important;
  text-transform: uppercase !important;
  letter-spacing:0 !important;
  background: #807e78 !important;
  color:var(--color-white) !important;
  border:var(--btn-border) !important;
  border-radius:var(--btn-radius) !important;
  padding:var(--btn-padding) !important;
  text-decoration:none !important;
  transition:all 0.3s ease !important;
  box-sizing:border-box;
}

.activeCart a:not(.basket):not(.btncontinueshopping):not(.btn):hover,
.activeCart button:hover,
.activeCart .btn:hover,
.cart-checkout-container .btn:hover,
.activeCart .btncontinueshopping:hover,
.cart-item-line .btn.hvr:hover {
  background: var(--color-primary-dark) !important;
  color:var(--color-white) !important;
  border-color:var(--color-primary-dark) !important;
  transform:translateY(-1px) !important;
}

.cart-checkout-container .btn,
.activeCart .btncontinueshopping {
  display:block;
  width:100%;
  text-align:center;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-sm) !important;
  font-weight:600 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  background: #807e78 !important;
  color:var(--color-white) !important;
  border:none !important;
  border-radius: 0 !important;
  padding:var(--spacing-sm) var(--spacing-xl) !important;
  text-decoration:none !important;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow:var(--shadow-sm) !important;
  box-sizing:border-box;
}

.cart-checkout-container .btn:hover,
.activeCart .btncontinueshopping:hover {
  background: var(--color-primary-dark) !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--shadow-sm) !important;
}

/* Secondary Button Outline Variant for Continue Shopping if displayed */
.activeCart .btncontinueshopping {
  background:transparent !important;
  color:var(--color-primary) !important;
  border:1px solid var(--color-primary) !important;
  box-shadow:none !important;
}

.activeCart .btncontinueshopping:hover {
  background: var(--color-primary) !important;
  color:var(--color-white) !important;
  box-shadow:var(--shadow-sm) !important;
}

.cart-items-label {
  order:1 !important;
  display:block !important;
  margin:var(--spacing-md) 0 var(--spacing-xs) !important;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-2xs) !important;
  font-weight:600 !important;
  text-align:left !important;
  color:var(--color-gray-500) !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
}

.cart-items-label .lblVal {
  color:inherit !important;
  font-size:inherit !important;
  text-transform:none;
  letter-spacing:0;
}

.cart-items-container {
  order:3 !important;
  width:100% !important;
  border-collapse:collapse;
  display:block !important;
  flex:1 !important; /* Allow it to grow and take available space */
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  padding:0 !important; /* Reset padding for perfect alignment */
}

/* Custom Scrollbar for Cart Items Container */
.cart-items-container::-webkit-scrollbar {
  width: 5px;
}
.cart-items-container::-webkit-scrollbar-track {
  background: transparent;
}
.cart-items-container::-webkit-scrollbar-thumb {
  background: var(--color-gray-200);
  border-radius:var(--radius-md);
}
.cart-items-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-300);
}

.cart-items-container tbody {
  display:block !important;
  width:100% !important;
}

.cart-item-line {
  display:flex !important; 
  flex-direction:row !important;
  align-items:flex-start !important; /* Align content to top for premium look */
  width:100% !important;
  border-bottom:1px solid var(--color-gray-100) !important;
  padding:var(--spacing-md) 0 !important;
  margin-bottom:0 !important;
  transition:all 0.25s ease;
}

.cart-item-line:hover {
  opacity: 1 !important;
}

.cart-items-secondary-label {
  padding:var(--spacing-xl) 0 var(--spacing-sm) !important;
  text-align:center;
  display:block !important;
  width:100%;
}
.cart-items-secondary-label .rule {
  display:none;
}

.cart-items-secondary-label center {
  display:flex;
  align-items:center;
  gap:var(--spacing-sm);
}

.cart-items-secondary-label center::before,
.cart-items-secondary-label center::after {
  content: "";
  flex:1;
  height:1px;
  background:var(--color-gray-200);
}

.cart-items-secondary-label .lblVal {
  font-family:var(--font-body);
  font-size:var(--font-size-2xs);
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--color-gray-500);
}

.cart-item-line .thumb {
  width:70px !important;
  flex:0 0 70px !important;
  margin-right:var(--spacing-sm) !important;
  max-height:none !important;
  padding:0 !important;
}

.cart-item-line .thumb img {
  width:100%;
  height:auto;
  border-radius:var(--border-radius-sm);
  border:1px solid var(--color-border-light);
  max-height:none !important;
  object-fit:cover;
  box-shadow:var(--shadow-sm);
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-item-line:hover .thumb img {
  transform: translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:var(--color-border);
}

.cart-item-line .prod-info {
  padding:0 !important;
  flex:1;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:var(--spacing-2xs) !important;
  font-family:var(--font-body) !important;
}

/* Reset the legacy selector leak that targeted all `a` tags in `.prod-info` */
.cart-item-line .prod-info a {
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  text-align:left !important;
  width:auto !important;
  display:inline-block !important;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-sm) !important;
  font-weight:400 !important;
  line-height:inherit !important;
  color:inherit !important;
  letter-spacing:normal !important;
}

.cart-item-line .prod-info .title,
.cart-item-line .prod-info a.title {
  display:block !important;
  font-family:var(--font-display) !important; /* Baskervville */
  font-size:var(--font-size-md) !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  margin-bottom:2px !important;
  color: #FFFFFF !important;
  letter-spacing:0 !important;
  width:100% !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  text-align:left !important;
  text-decoration:none !important;
}

.cart-item-line .price {
  margin:0 !important;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-base) !important;
  font-weight:500 !important;
  color: #FFFFFF !important;
  text-align:left;
}

.cart-item-line .price-label {
  display:none;
}

.cart-item-line .qty {
  margin-top:var(--spacing-2xs) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:var(--spacing-2xs) !important;
  width:100% !important;
}

.cart-item-line .qty-label {
  font-family:var(--font-body) !important;
  font-size:var(--font-size-2xs) !important;
  text-transform:uppercase !important;
  letter-spacing:0.5px !important;
  color:var(--color-gray-500) !important;
  font-weight:500 !important;
  margin:0 !important;
}

.cart-item-line .qty input {
  width:38px !important;
  height:28px !important;
  padding:0 !important;
  text-align:center !important;
  font-family:var(--font-body) !important;
  font-size:var(--font-size-sm) !important;
  font-weight:500 !important;
  /* Own white chip against the dark cart row — stays dark-on-white
     regardless of --color-text-dark elsewhere on the page. */
  color:var(--color-gray-750) !important;
  border:1px solid var(--color-gray-250) !important;
  border-radius:var(--border-radius-sm) !important;
  background:var(--color-white) !important;
  box-shadow:none !important;
  transition:all 0.2s ease !important;
}

.cart-item-line .qty input:focus {
  border-color: var(--color-primary) !important;
  outline:none !important;
  box-shadow: none !important;
}

.cart-item-line .qty .lnk-update {
  display:inline-block !important;
  font-family:var(--font-body) !important;
  font-size:10px !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--color-primary) !important;
  text-decoration:none !important;
  cursor:pointer !important;
  margin-left:var(--spacing-3xs) !important;
  border-bottom:1px solid transparent !important;
  transition:all 0.2s ease !important;
  padding:0 !important;
  background:transparent !important;
}

.cart-item-line .qty .lnk-update:hover {
  color: var(--color-primary-dark) !important;
  border-bottom-color:var(--color-primary-dark) !important;
}

.cart-item-line .btn.hvr {
  display:none !important; /* Hide standard hvr button styles for change/remove inside qty */
}

/* Remove button styled as a minimal, high-end text link on the far right */
.cart-item-line .qty a.remove {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  color:var(--color-gray-400) !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  font-family:var(--font-body) !important;
  font-size:10px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  text-decoration:none !important;
  margin-left:auto !important; /* Push remove button to the far right */
  border-bottom:1px solid transparent !important;
  transition:all 0.2s ease !important;
}

.cart-item-line .qty a.remove:hover {
  background: transparent !important;
  color:var(--color-primary) !important;
  border-bottom-color:var(--color-primary) !important;
  transform:none !important;
  box-shadow:none !important;
}

.cart-item-line .btn.basket {
  display:none !important;
}

/* Space and Rule Styling */
.space-after-items {
  order:4 !important;
  height:10px;
}

.rule {
  border-top:1px solid var(--color-gray-200);
  margin:var(--spacing-sm) 0;
  height:0;
}

.activeCart .cartBody > .rule {
  order:2 !important;
}

.tr-empty-last {
  display:none !important;
}

/* Order Summary / Subtotal */
[id$="_pnlSumary"] {
  order:5 !important;
  margin-top:var(--spacing-sm);
  background:var(--color-white);
  border-top:1px solid var(--color-gray-200);
}

[id$="_pnlSumary"] .rule {
  display:none !important; /* Hide duplicate lines inside subtotal panel */
}

.subtotal-cost {
  display:flex;
  justify-content:space-between;
  align-items:center !important;
  padding:var(--spacing-md) 0 var(--spacing-lg) !important;
  border-top:none !important; /* Hide double border */
  margin-top:0 !important;
}

.subtotal-cost-label {
  font-family:var(--font-body) !important;
  font-size:var(--font-size-sm) !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  font-weight:600 !important;
  color:var(--color-gray-500) !important;
  margin:0 !important;
}

.subtotal-cost .numeric {
  font-family:var(--font-display) !important; /* Baskervville */
  font-weight:400 !important;
  color: #FFFFFF !important;
  font-size:var(--font-size-xl) !important;
  line-height:1 !important;
}

h2.anounce {
  /* Its own light chip (--color-gray-50), independent of the dark page
     canvas — text stays dark regardless of --color-text-dark elsewhere. */
  color:var(--color-gray-750) !important;
  font-size:var(--font-size-sm) !important;
  line-height:1.5 !important;
  text-align:left !important;
  margin:0 !important; /* Reset margin; container handles spacing */
  background:var(--color-gray-50) !important;
  padding:var(--spacing-sm) var(--spacing-md) !important;
  font-weight:500 !important;
  border-left:var(--spacing-3xs) solid var(--color-primary) !important;
  border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-family:var(--font-body) !important;
  display:flex !important;
  align-items:center !important;
}

#announce br {
  display:none !important;
}

h2.anounce::before {
  content: "\f05a"; /* FontAwesome Info Circle */
  font-family:"Font Awesome 5 Pro";
  font-weight:900;
  font-size:var(--font-size-sm);
  color:var(--color-primary);
  margin-right:var(--spacing-xs);
  flex-shrink:0;
}

/* Announcement Layout Wrapper */
table.activeCart > tbody > tr:last-child {
  width: 100% !important;
  display:block !important;
  flex-shrink:0 !important;
  margin-top:auto !important;
}

table.activeCart > tbody > tr:last-child > td {
  width: 100% !important;
  padding:var(--spacing-md) var(--spacing-xl) var(--spacing-lg) !important;
  display:block !important;
  box-sizing:border-box !important;
}

[id$="ActiveCart1_pnlContinueShopping"] {
  order:7 !important;
}

[id$="ActiveCart1_pnlUpdateCart"] {
  order:8 !important;
}

/* --- Premium Staggered Pop-in Animations for Cart Elements --- */

/* Initial hidden state for elements inside the drawer to allow animation from opacity 0 */
.activeCart-panel .cartHeader,
.activeCart-panel .cart-items-label,
.activeCart-panel .cartBody > .rule,
.activeCart-panel .cart-items-container,
.activeCart-panel .cart-item-line,
.activeCart-panel [id$="ActiveCart1_pnlSumary"],
.activeCart-panel .cart-checkout-container,
.activeCart-panel table.activeCart > tbody > tr:last-child {
  opacity: 0;
}

/* Animations active state when drawer slides open */
.activeCart-panel.open .cartHeader {
  animation:cartFadeInDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.1s;
}

.activeCart-panel.open .cart-items-label {
  animation:cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.2s;
}

.activeCart-panel.open .cartBody > .rule {
  animation:cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.25s;
}

.activeCart-panel.open .cart-items-container {
  animation:cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.3s;
}

.activeCart-panel.open .cart-item-line {
  animation:cartFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered delay for cart items */
.activeCart-panel.open .cart-item-line:nth-child(1) { animation-delay: 0.35s; }
.activeCart-panel.open .cart-item-line:nth-child(2) { animation-delay: 0.45s; }
.activeCart-panel.open .cart-item-line:nth-child(3) { animation-delay: 0.55s; }
.activeCart-panel.open .cart-item-line:nth-child(4) { animation-delay: 0.65s; }
.activeCart-panel.open .cart-item-line:nth-child(5) { animation-delay: 0.75s; }

.activeCart-panel.open [id$="ActiveCart1_pnlSumary"] {
  animation:cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.45s;
}

.activeCart-panel.open .cart-checkout-container {
  animation:cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.5s;
}

.activeCart-panel.open table.activeCart > tbody > tr:last-child {
  animation: cartFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.6s;
}

/* Keyframe Animations */
@keyframes cartFadeInUp {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes cartFadeInDown {
  from {
    opacity:0;
    transform:translateY(-12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}


@media only screen and (max-width:640px) {
  .add-to-cart-confirmation-message {
    top: 16px !important;
    bottom:auto !important;
    right:var(--spacing-sm) !important;
    left:var(--spacing-sm) !important;
    max-width:none !important;
    width:auto !important;
    transform:none !important;
    animation:toastPopDownFadeMobile 4.5s ease-in-out forwards !important;
  }
  .add-to-cart-confirmation-message.hiding {
    animation:toastFadeOutExitMobile 0.3s ease-in forwards !important;
  }
}


/***** shop-left-menu *****/

/* ========================================
   FOOTER STYLES - Knox Road Vineyards
   ======================================== */

.op-footer,
#footer-sections,
#footer-sections .page-section,
#footer-sections .section-background {
  background: #272725 !important;
  background-color: #272725 !important;
  color: #ffffff !important;
}

#footer-sections {
  font-family: "aktiv-grotesk", sans-serif;
}

#footer-sections .content-wrapper {
  padding-top: 70px !important;
  padding-bottom: 50px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

#footer-sections .sqs-row {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
}

/* Social Links Block */
#block-8e819627b09f5e05539b {
  --social-icons-justify-content: flex-start;
  --social-icons-dimension: 20px;
  --social-icons-gap: 16px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

#block-8e819627b09f5e05539b .sqs-svg-icon--list {
  display: flex;
  justify-content: var(--social-icons-justify-content, flex-start);
  column-gap: var(--social-icons-gap, 16px);
  row-gap: var(--social-icons-gap, 16px);
  list-style: none;
  padding: 0;
  margin: 0;
}

#block-8e819627b09f5e05539b .sqs-svg-icon--wrapper {
  width: var(--social-icons-dimension, 20px);
  height: var(--social-icons-dimension, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#block-8e819627b09f5e05539b .sqs-svg-icon--wrapper i {
  font-size: 20px;
  line-height: 1;
}

#block-8e819627b09f5e05539b .sqs-svg-icon--wrapper:hover {
  opacity: 1;
}

#block-8e819627b09f5e05539b .sqs-svg-icon--social {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#block-8e819627b09f5e05539b .sqs-use--icon {
  fill: currentColor;
}

#block-8e819627b09f5e05539b .sqs-use--mask {
  fill: transparent;
}

/* Text Link Columns (About/Photos, Squarespace Attribution) */
#block-b7af6707ce37c3223e02 p,
#block-99c01a85ac82efb44baa p {
  color: #ffffff !important;
  font-family: "aktiv-grotesk", sans-serif !important;
  font-size: 16px !important;
  line-height: 28.8px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  margin: 0;
}

#block-b7af6707ce37c3223e02 a,
#block-99c01a85ac82efb44baa a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: "aktiv-grotesk", sans-serif !important;
  font-size: 16px !important;
  line-height: 28.8px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-decoration: underline !important;
  transition: color 0.2s ease;
  display: inline-block;
}

#block-b7af6707ce37c3223e02 a:hover,
#block-99c01a85ac82efb44baa a:hover {
  color: #ffffff !important;
}

#block-99c01a85ac82efb44baa {
  padding-right: 20px;
}

/* Desktop alignment side-by-side grid */
@media (min-width: 768px) {
  #footer-sections .sqs-row {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 40px;
  }

  #footer-sections .span-8 {
    width: 60%;
    flex-shrink: 0;
  }

  #footer-sections .span-4 {
    width: 35%;
    flex-shrink: 0;
  }

  #footer-sections .span-4 .sqs-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 80px; /* Space between the two link columns */
  }

  #footer-sections .span-4 .span-2 {
    width: auto;
  }
}