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

/* Bargetto Winery webfonts (Google Fonts)
   - Playfair Display SC / Playfair Display (400, 700, 900)
   - Work Sans (variable 100..900)
   - Fleur De Leah (400) */
@import url("https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Playfair+Display+SC:wght@400;700;900&family=Playfair+Display:wght@400..900&family=Work+Sans:wght@100..900&display=swap");

@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-display: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --font-display-bold: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

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

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

  /* ========== COLOR PALETTE (Bargetto Winery Style Guide) ========== */
  --color-primary: #14191d;
  --color-primary-dark: #000000;
  --color-primary-light: #2d291f;

  /* Neutral & Brand Tones */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-cream: #ece1c5;
  --color-gray-50: #fbf9f4;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e7e3d9;
  --color-gray-300: #d1d5dc;
  --color-gray-400: #ae934f;
  --color-gray-500: #6f6c62;
  --color-gray-600: #555043;
  --color-gray-700: #364153;
  --color-gray-800: #2d291f;
  --color-gray-900: #14191d;

  /* Semantic Colors */
  --color-text: #14191d;
  --color-text-dark: #14191d;
  --color-text-light: #555043;
  --color-background: #ffffff;
  --color-border: #14191d;
  --color-border-light: rgba(20, 25, 29, 0.18);
  --color-error: #c41e3a;

  /* Brand Accent (Bargetto Gold) */
  --color-accent: #d9c89e;
  --color-accent-secondary: #ebdbb1;

  /* Surface tones */
  --color-surface: rgba(255, 255, 255, 0.92);
  --color-nav-surface: #14191d;
  --color-nav-border: rgba(217, 200, 158, 0.16);

  /* ========== NAVIGATION SPECIFIC ========== */
  --nav-bg-color: #14191d;
  --nav-text-color: #e7e3d9;
  --nav-link-color: #e7e3d9;
  --nav-link-hover-color: #d9c89e;

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

  /* ========== OVERLAYS & TRANSPARENCY ========== */
  --overlay-subtle: rgba(20, 25, 29, 0.08);
  --overlay-light: rgba(217, 200, 158, 0.22);
  --overlay-medium: rgba(20, 25, 29, 0.16);
  --overlay-strong: rgba(20, 25, 29, 0.5);
  --overlay-dark: rgba(20, 25, 29, 0.93);
  --overlay-header: rgba(20, 25, 29, 0.93);

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

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 2px 8px rgba(20, 25, 29, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 25, 29, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 25, 29, 0.12);

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

  /* ========== LAYOUT ========== */
  --container-max-width: 1360px;
  --header-height: 80px;
  --auth-bar-height: 28px;

  /* ========== LEGACY/COMPONENT PROPERTIES ========== */
  --btn-padding: 10px 24px;
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 0.04em;
  --btn-border: 1px solid #ece1c5;
  --btn-hover-opacity: 1;
  --cart-summary-top: 96px;

  /* ========== 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 (Sharp Architectural Corners) ========== */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --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,
body {
  background-color: var(--color-white);
  background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/paper-background-2.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-size: 560px auto;
  color: var(--color-text);
  margin: 0;
}

.cc_dialog,
.cc-empty,
.cc-container {
  display: none !important;
}

/* ========================================
   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: 20, 25, 29;

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

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

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

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

  /* Button Styles */
  --btn-border-color: #ece1c5;
  --btn-bg-color: #14191d;
  --btn-color: #ece1c5;
  --btn-active-bg-color: #2d291f;
  --btn-active-color: #ece1c5;
  --btn-active-border-color: #ece1c5;
  --btn-background-color: #14191d;
  --btn-text-color: #ece1c5;
  --btn-hover-background-color: #fffefb;
  --btn-hover-text-color: #14191d;
  --box-shadow-primary: 0 0 0 0.2rem rgba(217, 200, 158, 0.35);

  /* 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-primary);

  /* Shared Account / Checkout / Modal (account.css) Token Overrides */
  --acct-theme-color: var(--color-primary);
  --acct-font: var(--font-body);
  --acct-font-body: var(--font-body);
  --acct-font-display: var(--font-display);
  --acct-primary: var(--color-primary);
  --acct-primary-dark: var(--color-primary-dark);
  --acct-text: var(--color-text);
  --acct-text-dark: var(--color-text-dark);
  --acct-text-light: var(--color-text-light);
  --acct-surface: var(--color-gray-50);
  --acct-panel: var(--color-gray-50);
  --acct-line-strong: var(--color-border-light);
  --acct-line: var(--color-border-light);
  --acct-border: var(--color-border);
  --acct-radius: var(--radius-sm);
  --acct-radius-card: var(--radius-md);
}
/* ============================================================
   & 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: rgba(20, 25, 29, 0.16);
--color-gray-250: rgba(20, 25, 29, 0.32);
--color-gray-750: var(--color-gray-900);

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

--color-text: var(--color-gray-750);
--color-text-dark: var(--color-gray-750);
--color-text-light: var(--color-gray-600);
--color-background: var(--color-white);
--color-surface: rgba(255, 255, 255, 0.92);
--color-surface-alt: var(--color-gray-50);
--color-border: var(--color-gray-750);
--color-border-light: var(--color-gray-150);

--color-accent: var(--color-gray-400);
--color-accent-secondary: var(--color-gray-600);

--nav-bg-color: var(--color-gray-750);
--nav-text-color: var(--color-gray-200);
--nav-link-color: var(--color-gray-200);
--nav-link-hover-color: var(--color-accent);

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

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

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

box-sizing: border-box;
color: var(--color-text);
background-color: var(--color-white);
background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/paper-background-2.jpg");
background-repeat: repeat;
background-position: top left;
background-size: 560px auto;
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);

/* Clears the fixed Bargetto header (auth strip + 80px nav bar). */
margin-top: calc(var(--auth-bar-height) + var(--header-height));
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--auth-bar-height) - var(--header-height));

/* Suppress legacy v1 Bargetto header/footer containers when previewing live URLs */
& #headerContainer > .secondary-nav-wrapper,
& #headerContainer > .header-box-wrapper,
& #headerContainer > .nav-box,
& #footer > .ft-main-container,
& #footer > .copyright_text {
  display: none !important;
}


/* ------------------------------------------------------------
   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 and legacy floating cart widgets must never render. */
& input[type="hidden"],
& .aspNetHidden,
& script,
& style,
& .activeCart-panel,
& #activeCartContainer,
& .help_aside {
  display: none !important;
}

/* 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-xl) var(--spacing-lg) var(--spacing-3xl);
  float: none;
  flex: 1 0 auto;
}

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

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

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

   Real markup (OrderPort):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

& .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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}

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

& .tabs-container .uc.addToCart .qty-select {
  width: 62px !important;
  height: 36px;
  padding: 0 26px 0 8px;
  border: 0;
  outline: none !important;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-dark);
  cursor: pointer;
}

& .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;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  padding: 0 var(--spacing-xl);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: 0;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color);
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& .tabs-container .uc.addToCart .btn:not(.jqp)::after {
  content: "";
  width: 14px;
  height: 14px;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& .tabs-container .uc.addToCart .btn:not(.jqp):hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border);
}

& .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 (including live OrderPort panels that contain only <br/>) */
& #tab_wine_spec:not(:has(table)),
& #tab_reviews:empty,
& #tab_reviews:not(:has(p, div, span, table, ul, ol, blockquote)),
& #tab_vineyards:empty,
& #tab_vineyards:not(:has(p, div, span, table, ul, ol, blockquote)),
& #tab_winemaker:empty,
& #tab_winemaker:not(:has(p, div, span, table, ul, ol, blockquote)) {
  display: none !important;
}

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

& table.wine-information td {
  padding: 8px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  font-size: var(--font-size-sm, 13px);
  line-height: var(--line-height-normal, 1.5);
  vertical-align: top;
}

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

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

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

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

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


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

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

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

/* --- Responsive --- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Product search bar ---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

& .product-search .txt-product-search:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--color-accent) !important;
}

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

& .product-search .button-search-product:hover {
  background: var(--color-surface-alt) !important;
}

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

/* Drawn as an inline url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") mask rather than a Font Awesome glyph: no extra
   request, so the icon is present at first paint instead of popping in when
   the icon font arrives. `currentColor` keeps it themeable. */
& .product-search .button-search-product::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

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

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

& .ui-selectmenu-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  height: 40px;
  padding: 0 var(--spacing-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
}

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

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

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

& .vertical-menu,
& #cat-v1-1:has(> .shop-left-menu),
& .prod-details:has(> .shop-left-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,
& #cat-v1-1 > .shop-left-menu,
& .prod-details > .shop-left-menu {
  position: sticky;
  top: var(--sidebar-sticky-top);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

& .vertical-menu .shop-left-menu > span,
& #cat-v1-1 > .shop-left-menu > span,
& .prod-details > .shop-left-menu > span {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

& #cat-v1-1 > .shop-left-menu > span > ul,
& .prod-details > .shop-left-menu > span > ul {
  display: block;
}

& #cat-v1-1 > .shop-left-menu .menu-header,
& .prod-details > .shop-left-menu .menu-header {
  display: block !important;
}

& .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. */
& .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,
& #cat-v1-1 > .shop-left-menu li.g.selected > ul,
& #cat-v1-1 > .shop-left-menu li.g.sselected > ul,
& #cat-v1-1 > .shop-left-menu li.g:has(> ul .selected) > ul,
& #cat-v1-1 > .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: "\f078";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  display: block;
  font-size: 13px;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

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

& .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: "\f078";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-text-light);
}

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

/* --- Horizontal menu variant ---
   For Bargetto, the client requested a vertical group menu everywhere.
   Force any .horizontal-menu container with .shop-left-menu to render as the
   vertical sidebar menu on desktop (>900px) and collapsible menu on mobile. */

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

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

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

/* --- Qty dropdown override (main.js swaps in a <select>) ---
   The real ASP.NET textbox stays in the DOM (name/id untouched, still
   what postback + cart logic reads) — just visually removed so only the
   dropdown shows. `position: absolute` rather than `display: none`: some
   platform scripts read layout/geometry off form fields, and this keeps
   it there without taking up space. */
& .qty-input--shadowed {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

& .qty-container:has(.qty-select)::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  line-height: 1;
  transform: translateY(-50%) rotate(90deg);
  color: var(--color-text-light);
  pointer-events: none;
}

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

& .row.catalog-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

& .productItem .prod-img {
  margin: 0 0 var(--spacing-md) !important;
  padding: var(--spacing-sm) !important;
  min-height: 220px !important;
  background: var(--color-surface-alt) !important;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

& .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:60px!important;max-height:250px!important}</style>`
   at the end of the catalog. Override with !important so images fit the card box. */
& .productItem .prod-img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 240px !important;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

& .productItem .qty-select {
  width: 58px !important;
  height: 38px;
  padding: 0 26px 0 8px;
  border: 0;
  outline: none !important;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  cursor: pointer;
}

& .productItem .cmd-container .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--spacing-sm);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: 0;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color);
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& .productItem .cmd-container .btn::after {
  content: "";
  width: 14px;
  height: 14px;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& .productItem .cmd-container .btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border);
}

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

/* --- Availability states ---
   `.comingSoon` / `.comingSoon.soldout` sit inside fieldset.add-to-cart at
   the bottom of the card. Lift them out to a badge over the image. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

& .shopping-suggestions .qty-select {
  width: 54px !important;
  height: 34px;
  padding: 0 26px 0 8px;
  border: 0;
  outline: none !important;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  cursor: pointer;
}

/* 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;
  gap: 6px;
  height: 38px;
  padding: 0 var(--spacing-md);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: 0;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color);
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& .shopping-suggestions .cmd-container .btn:not(.jqp)::after {
  content: "";
  width: 14px;
  height: 14px;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& .shopping-suggestions .cmd-container .btn:not(.jqp):hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border);
}

@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 !important;
    padding: 0 var(--spacing-lg) 0 0 !important;
    background: none !important;
    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 285px !important;
    width: 285px !important;
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 0 0 var(--spacing-lg) !important;
    border-left: 1px solid var(--color-border-light);
  }

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

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

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

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

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

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

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

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

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

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

/* --- Responsive --- */

@media only screen and (max-width: 1024px) {
  & .vertical-menu,
  & #cat-v1-1:has(> .shop-left-menu),
  & .prod-details:has(> .shop-left-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,
  & #cat-v1-1:has(> .shop-left-menu),
  & .prod-details:has(> .shop-left-menu) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--spacing-lg);
  }

  & .vertical-menu .shop-left-menu,
  & #cat-v1-1 > .shop-left-menu,
  & .prod-details > .shop-left-menu {
    position: static;
  }

  /* --- Mobile category menu ---
     Under 900px the category menu is a stacked card, collapsed behind its
     header, with sub-menus expanding inline. */

  & .horizontal-menu .shop-left-menu > span {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
  }

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

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

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

  & .horizontal-menu .shop-left-menu li.g > a.selected,
  & .horizontal-menu .shop-left-menu li.g.selected > a,
  & .horizontal-menu .shop-left-menu li.g > a.sselected,
  & .horizontal-menu .shop-left-menu li.g.sselected > a {
    border-bottom: 0;
  }

  /* Sub-lists become inline branches, not floating panels. */
  & .horizontal-menu .shop-left-menu li.g > ul {
    position: static;
    z-index: auto;
    min-width: 0;
    max-width: none;
    margin: 0 0 var(--spacing-2xs) var(--spacing-2xs);
    padding: 0 0 0 var(--spacing-2xs);
    background: none;
    border: 0;
    border-left: 1px solid var(--color-border-light);
    border-radius: 0;
    box-shadow: none;
  }

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

  & .horizontal-menu .shop-left-menu li.g > ul li.g > a.selected,
  & .horizontal-menu .shop-left-menu li.g > ul li.g > a.sselected,
  & .horizontal-menu .shop-left-menu li.g > ul li.g.selected > a {
    background: none;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-medium);
  }

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

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

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

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

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

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

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

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

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

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

  & .wineclub-membership {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

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

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

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

  & .wineclub-membership > div[class^="club-"],
  & #tableColumnsContainer:has(.uc.newsletter) .help_holder > ._column {
    padding: var(--spacing-md);
  }
}

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

& .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-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: 0;
  margin-bottom: 0 !important;
}

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

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

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

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

& .wineclub-membership > div[class^="club-"] > a.btn::after {
  content: "";
  width: 14px;
  height: 14px;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& .wineclub-membership > div[class^="club-"] > a.btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border);
}

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

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

/* --- Variation groups (clubs with multiple ship-frequency options) --- */

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

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

& .wineclub-membership > div[class^="club-"] .variations ul {
  list-style: none;
  margin: 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-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-text-dark);
  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-family: var(--font-display);
  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;
  gap: 6px;
  box-sizing: border-box;
  height: 38px !important;
  padding: 0 var(--spacing-md);
  background: var(--btn-bg-color);
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  border-radius: 0;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color);
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& .wineclub-membership > div[class^="club-"] .variations li > a.btn::after {
  content: "";
  width: 14px;
  height: 14px;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& .wineclub-membership > div[class^="club-"] .variations li > a.btn:hover {
  background: var(--btn-hover-background-color);
  color: var(--btn-hover-text-color);
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border);
}

/* --- Editorial Catalog Bottle Image Hover Polish --- */

& .productItem .prod-image img {
  transition: transform 0.35s ease;
}

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

/* --- Newsletter & Standalone Form Pages --- */

& .newsletter-container,
& #divNewsletter,
& .mailing-list,
& #tableColumnsContainer:has(.uc.newsletter) .help_holder > ._column {
  width: 100% !important;
  max-width: 680px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: inset 0 0 0 6px var(--color-surface), inset 0 0 0 7px var(--color-border-light);
  box-sizing: border-box;
}

& #tableColumnsContainer:has(.uc.newsletter) .help_aside {
  display: none !important;
}

& .uc.newsletter .newsletter_table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

& .uc.newsletter .newsletter_table .row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin: 0;
}

& .uc.newsletter .newsletter_table .row .col {
  width: 100%;
  padding: 0;
}

& .uc.newsletter .newsletter_table label.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-dark);
}

& .uc.newsletter .newsletter_table input[type="text"],
& .uc.newsletter .newsletter_table select {
  width: 100% !important;
  max-width: 100%;
  height: 42px;
  padding: 0 var(--spacing-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  box-sizing: border-box;
}

& .uc.newsletter .newsletter_table br {
  display: none;
}

& #pageContent h1,
& #pageContent h2,
& #pageContent h3 {
  font-family: var(--font-display);
  color: var(--color-text-dark);
}

& #pageContent .btn:not(.jqp),
& #pageContent .uc.newsletter .btn.jqp,
& #pageContent #accountContent .btn.jqp,
& #pageContent #divMain.reservations .btn.jqp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--spacing-lg) !important;
  background: var(--btn-bg-color) !important;
  color: var(--btn-color) !important;
  border: 1px solid var(--btn-border-color) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color) !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& #pageContent .btn.jqp .ui-button-text {
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  background: none !important;
  line-height: 1 !important;
}

& #pageContent .btn:not(.jqp)::after,
& #pageContent .uc.newsletter .btn.jqp::after,
& #pageContent #accountContent .btn.jqp::after,
& #pageContent #divMain.reservations .btn.jqp::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& #pageContent .btn:not(.jqp):hover,
& #pageContent .uc.newsletter .btn.jqp:hover,
& #pageContent #accountContent .btn.jqp:hover,
& #pageContent #divMain.reservations .btn.jqp:hover {
  background: var(--btn-hover-background-color) !important;
  color: var(--btn-hover-text-color) !important;
  border-color: var(--color-border) !important;
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border) !important;
}

/* ------------------------------------------------------------
   J. ACCOUNT DASHBOARD (#accountContent / .account-holder)
   Full styling for Customer Information, Billing & Shipping
   Addresses, Wine Club Membership, Allocation Offering,
   Saved Payment Methods, Loyalty Summary, and Order History.
   ------------------------------------------------------------ */

/* Hide catalog search bar and empty right column on Account & Newsletter pages */
& #contentContainer:has(#accountContent) #divSearchWebstoreCatalog,
& #contentContainer:has(#accountContent) .product-search,
& #contentContainer:has(.uc.newsletter) #divSearchWebstoreCatalog,
& #contentContainer:has(.uc.newsletter) .product-search,
& #contentContainer:has(#wine-clubs) #divSearchWebstoreCatalog,
& #contentContainer:has(#wine-clubs) .product-search,
& #contentContainer:has(#divMain.reservations) #divSearchWebstoreCatalog,
& #contentContainer:has(#divMain.reservations) .product-search {
  display: none !important;
}

& #accountContent ~ #pageContentRight,
& #contentContainer:has(#accountContent) #pageContentRight {
  display: none !important;
}

& #contentContainer:has(#accountContent) #pageContentCenter {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

& #accountContent,
& .account-holder {
  width: 100% !important;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  float: none !important;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: left;
}

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

/* Editorial Notice Callout Banner (overrides inline yellow warning box) */
& #accountContent .uc.oPText > div {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-dark) !important;
  border: 1px solid var(--color-border-light) !important;
  border-left: 4px solid var(--color-gray-400) !important;
  border-radius: 0 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  margin: 0 0 var(--spacing-xl) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-height-normal) !important;
  box-shadow: var(--shadow-sm);
}

& #accountContent .uc.oPText > div strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  text-transform: uppercase;
}

/* Account Section Cards */
& #accountContent .section {
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-top: 2px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Suppress sections whose content container has no child elements (e.g. unused Member Account panel) */
& #accountContent .section:not(:has(> .content > *)),
& #accountContent .section > .content:not(:has(> *)) {
  display: none !important;
}

/* Section Header Bar — Inverted to match Bargetto Header colors */
& #accountContent .section > .header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin: 0 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  background-color: var(--nav-bg-color) !important;
  background-image: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/header-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-gray-400) !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-cream) !important;
  line-height: var(--line-height-tight) !important;
  text-align: left !important;
}

& #accountContent .section > .content {
  padding: var(--spacing-lg);
}

/* Sign Out Button in Customer Information Header */
& #accountContent .lnkSignOut {
  float: none !important;
  margin-left: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--spacing-md);
  background: transparent !important;
  color: var(--color-cream) !important;
  border: 1px solid var(--color-cream) !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

& #accountContent .lnkSignOut:hover {
  background: var(--color-cream) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-cream) !important;
}

/* Loyalty Points Badge in Section Header */
& #accountContent #ctl00_cphBody_PageWrapper_Content_pnlLoyaltySummary > .header span,
& #accountContent .section > .header span[id*="lblLoyaltyPoints"] {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-primary-light) !important;
  color: var(--color-cream) !important;
  border: 1px solid var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Billing & Shipping Address 2-Column Grid */
& #accountContent .account_address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xl);
  width: 100%;
}

& #accountContent .account_address .column,
& #accountContent .account_address .column:first-child {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

& #accountContent .account_address h3,
& #accountContent .section .content h3 {
  margin: 0 0 var(--spacing-xs) !important;
  padding-bottom: var(--spacing-2xs);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-display) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-dark) !important;
  text-transform: uppercase !important;
}

/* Key / Value Rows in Address Cards (.ciRegularView) */
& #accountContent .ciRegularView {
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  width: 100%;
}

& #accountContent .ciRegularView .row {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--spacing-sm);
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--color-border-light);
}

& #accountContent .ciRegularView .row:last-child {
  border-bottom: 0;
}

& #accountContent .ciRegularView .row.fax,
& #accountContent .fax {
  display: none !important;
}

& #accountContent .ciRegularView .col {
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  word-break: break-word;
}

& #accountContent .ciRegularView .label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-light);
  line-height: 1.5;
}

& #accountContent .label::after {
  content: ":";
}

& #accountContent .ciRegularView .col:last-child {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-3xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
}

& #accountContent .ciRegularView a:not(.lnk) {
  color: var(--color-text-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-gray-400);
  text-underline-offset: 2px;
}

& #accountContent .ciRegularView a:not(.lnk):hover {
  color: var(--color-gray-400);
}

& #accountContent .ciRegularView .col > span > br:first-child {
  display: none;
}

/* "change" link inside Billing / Shipping Address */
& #accountContent .ciRegularView .col:last-child > span[style] {
  padding-left: 0 !important;
  margin-left: auto;
}

& #accountContent .lnk:not(#hlnkChangePassword),
& #accountContent .ciRegularView .col:last-child > span[style] a {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--color-primary);
  background: var(--nav-bg-color);
  color: var(--color-cream) !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

& #accountContent .lnk:not(#hlnkChangePassword):hover,
& #accountContent .ciRegularView .col:last-child > span[style] a:hover {
  background: var(--color-cream);
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

/* Customer Service Note & Change Password CTA */
& #accountContent .customer-service {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-light);
}

& #accountContent a.customer-service {
  margin-top: 2px;
  color: var(--color-text-dark) !important;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline !important;
}

& #accountContent a#hlnkChangePassword {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content !important;
  min-width: 210px;
  min-height: 40px;
  margin-top: var(--spacing-md) !important;
  padding: 0 var(--spacing-lg) !important;
  align-self: flex-start;
  background: var(--btn-bg-color) !important;
  color: var(--btn-color) !important;
  border: 1px solid var(--btn-border-color) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 4px var(--btn-bg-color), inset 0 0 0 5px var(--btn-border-color) !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

& #accountContent a#hlnkChangePassword::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px 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' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

& #accountContent a#hlnkChangePassword:hover {
  background: var(--btn-hover-background-color) !important;
  color: var(--btn-hover-text-color) !important;
  border-color: var(--color-border) !important;
  box-shadow: inset 0 0 0 4px var(--btn-hover-background-color), inset 0 0 0 5px var(--color-border) !important;
}

/* Data Panels: Wine Club Membership, Allocation Offering, Saved Payment Methods */
& #accountContent .json-data,
& #accountContent .json-data.data,
& #accountContent .json-data.data.three-items-across,
& #accountContent .wineclub-membership,
& #accountContent .wineclub-allocation,
& #accountContent .card-on-file {
  display: block !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Neutralize .section-loader 150px blank height and surface .empty state cleanly */
& #accountContent .section-loader {
  min-height: 0 !important;
  background-image: none !important;
}

& #accountContent .section-loader > .empty:not(.hidden) {
  display: block !important;
}

& #accountContent .table.template,
& #accountContent .hidden,
& #accountContent .pending-releases-alert,
& #accountContent .allocation-pending-releases-alert,
& #accountContent .jqmDialog {
  display: none !important;
}

& #accountContent .section > .content > br,
& #accountContent .card-on-file > br,
& #accountContent .card-on-file .template > br,
& #accountContent .account_address > .column > br {
  display: none;
}

& #accountContent .info-text {
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-gray-400);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

/* Account Data Tables (Clubs, Allocations, Cards on File) */
& #accountContent .table {
  display: block !important;
  width: 100% !important;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  overflow: hidden;
}

& #accountContent .table .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px 150px 210px;
  align-items: center;
  gap: var(--spacing-md);
  padding: 14px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-light);
}

& #accountContent .table .row:last-child {
  border-bottom: 0;
}

& #accountContent .table .row.h {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: var(--nav-bg-color) !important;
  border-bottom: 1px solid var(--color-gray-400) !important;
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-cream) !important;
}

& #accountContent .table .row > div {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
}

& #accountContent .table .row span {
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  overflow-wrap: anywhere;
}

& #accountContent .mobile-label {
  display: none;
}

& #accountContent .table .cmd,
& #accountContent .cmd.align-right {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-2xs);
  text-align: center;
}

& #accountContent .div-add-card-on-file {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: flex-start;
}

& #accountContent .div-add-card-on-file .btn {
  width: fit-content !important;
  min-width: 220px;
}

/* Empty State Panels */
& #accountContent .empty {
  padding: var(--spacing-lg) var(--spacing-md) !important;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Order History Table (.customer-order-history) */
& #accountContent .customer-order-history {
  display: block;
  width: 100%;
  font-family: var(--font-body);
}

& #accountContent .customer-order-history .details {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  overflow: hidden;
}

& #accountContent .customer-order-history .details_header {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1.3fr) 120px;
  align-items: center;
  gap: var(--spacing-md);
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: var(--nav-bg-color) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-gray-400) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  color: var(--color-cream) !important;
}

& #accountContent .customer-order-history .details_header > div {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  font-weight: var(--font-weight-semibold) !important;
  text-align: left !important;
  color: var(--color-cream) !important;
}

& #accountContent .customer-order-history .details_header > .hdr-price {
  text-align: right !important;
}

& #accountContent .customer-order-history .item.order {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1.3fr) 120px;
  align-items: start;
  gap: var(--spacing-md);
  width: 100% !important;
  margin: 0 !important;
  padding: var(--spacing-md) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  background: var(--color-white);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text);
  transition: background 0.15s ease;
}

& #accountContent .customer-order-history .item.order:last-child {
  border-bottom: 0 !important;
}

& #accountContent .customer-order-history .item.order:hover {
  background: var(--color-surface-alt);
}

& #accountContent .customer-order-history .item.order > div {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  text-align: left !important;
}

& #accountContent .customer-order-history .item.order > .col-1:first-child strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& #accountContent .customer-order-history .ship-method {
  display: block;
  margin-bottom: var(--spacing-3xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& #accountContent .customer-order-history .item.order .item {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: var(--font-size-xs);
}

& #accountContent .customer-order-history .item.order .item:last-child {
  margin-bottom: 0 !important;
}

& #accountContent .customer-order-history .item.order .item a {
  color: var(--color-text-dark) !important;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

& #accountContent .customer-order-history .item.order .item a:hover {
  color: var(--color-gray-400) !important;
  text-decoration: underline;
}

& #accountContent .customer-order-history .item.order > .hdr-price {
  font-family: var(--font-display);
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-dark) !important;
  text-align: right !important;
  white-space: nowrap;
}

/* PDF Invoice Badge Link */
& #accountContent .customer-order-history .pdf-icon {
  display: flex !important;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-2xs);
  padding: 4px 10px;
  background: var(--nav-bg-color);
  border: 1px solid var(--color-primary);
  color: var(--color-cream) !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

& #accountContent .customer-order-history .pdf-icon::before {
  content: "\f1c1";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
}

& #accountContent .customer-order-history .pdf-icon::after {
  content: "Invoice";
}

& #accountContent .customer-order-history .pdf-icon:hover {
  background: var(--color-cream);
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

& #accountContent .customer-order-history .show-more {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
}

& #accountContent .customer-order-history .show-more .btn {
  min-width: 220px;
}

/* ------------------------------------------------------------
   K. RESERVATIONS LANDING & SITEWIDE EDITORIAL CONTENT
   ------------------------------------------------------------ */

& #divMain.reservations {
  width: 100% !important;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
}

& #divMain.reservations > .row:first-child > .col-12 {
  max-width: 820px;
  margin: 0 auto var(--spacing-xs);
  text-align: center;
}

& #divMain.reservations h1,
& #divMain.reservations h2.title {
  margin: 0 0 var(--spacing-2xs);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& #divMain.reservations > .row:nth-child(2) p {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

& #divMain.reservations > .row:nth-child(2) a {
  margin-left: 4px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-gray-400);
  text-underline-offset: 3px;
}

& #divMain.reservations > .row:nth-child(2) a:hover {
  color: var(--color-gray-400);
}

/* Each .locations > .row is a unified horizontal location card (.col-a image | .col-b details) */
& #divMain.reservations .locations > .row {
  display: grid !important;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 0;
  margin: 0 0 var(--spacing-xl) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light) !important;
  border-top: 2px solid var(--color-primary) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

& #divMain.reservations .locations > .row::before,
& #divMain.reservations .locations > .row::after {
  display: none !important;
}

& #divMain.reservations .locations > .row > .col-a {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-right: 1px solid var(--color-border-light);
}

& #divMain.reservations .locations > .row > .col-a .location-link,
& #divMain.reservations .locations > .row > .col-a img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
  max-height: 340px;
  object-fit: cover;
  margin: 0 !important;
}

& #divMain.reservations .locations > .row > .col-b {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--spacing-2xl) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

& #divMain.reservations .location-name {
  width: 100%;
  margin: 0 0 var(--spacing-md) !important;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-display) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-dark) !important;
  text-align: left !important;
}

& #divMain.reservations .description {
  width: 100%;
  flex: 1 1 auto;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-light);
  text-align: left !important;
}

& #divMain.reservations .locations .col-b > .btn {
  width: fit-content !important;
  min-width: 200px;
  margin-top: var(--spacing-lg) !important;
}

/* Editorial Catalog Landing Content (.shop-content without product grid) */
& .shop-content:not(:has(.data)) {
  padding: var(--spacing-2xl) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

& .shop-content:not(:has(.data)) h1 {
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& .shop-content:not(:has(.data)) h2 {
  margin: var(--spacing-xl) 0 var(--spacing-xs);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

& .shop-content:not(:has(.data)) h3 {
  margin: var(--spacing-md) 0 var(--spacing-2xs);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-400);
}

& .shop-content:not(:has(.data)) p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

& .shop-content:not(:has(.data)) a {
  color: var(--color-text-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-gray-400);
  text-underline-offset: 3px;
}

& .shop-content:not(:has(.data)) a:hover {
  color: var(--color-gray-400);
}

/* Account & Reservations Responsive Breakpoints */
@media only screen and (max-width: 860px) {
  & #accountContent .account_address {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
  }

  & #accountContent .table {
    border: 0;
    background: none;
  }

  & #accountContent .table .row.h {
    display: none !important;
  }

  & #accountContent .table .row {
    display: block !important;
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-sm) !important;
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
  }

  & #accountContent .table .row > div {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 4px 0 !important;
  }

  & #accountContent .mobile-label {
    display: block !important;
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-light);
  }

  & #accountContent .customer-order-history .details {
    border: 0;
    background: none;
  }

  & #accountContent .customer-order-history .details_header {
    display: none !important;
  }

  & #accountContent .customer-order-history .item.order {
    display: block !important;
    margin-bottom: var(--spacing-sm) !important;
    padding: var(--spacing-md) !important;
    border: 1px solid var(--color-border-light) !important;
    background: var(--color-white);
  }

  & #accountContent .customer-order-history .item.order > div {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 6px 0 !important;
    text-align: right !important;
  }

  & #accountContent .customer-order-history .item.order > div:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light);
  }

  & #accountContent .customer-order-history .item.order > .col-1:first-child,
  & #accountContent .customer-order-history .item.order > .col-4 {
    display: block !important;
    text-align: left !important;
  }

  & #accountContent .customer-order-history .item.order > .col-1:first-child .mobile-label,
  & #accountContent .customer-order-history .item.order > .col-4 .mobile-label {
    margin-bottom: 4px;
  }

  & #divMain.reservations .locations > .row {
    grid-template-columns: minmax(0, 1fr);
  }

  & #divMain.reservations .locations > .row > .col-a {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  & #divMain.reservations .locations > .row > .col-b {
    padding: var(--spacing-lg) !important;
  }
}

@media only screen and (max-width: 640px) {
  & #accountContent .section > .header {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-base) !important;
  }

  & #accountContent .section > .content {
    padding: var(--spacing-md);
  }

  & #accountContent .ciRegularView .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 12px !important;
  }

  & #accountContent a#hlnkChangePassword,
  & #accountContent .div-add-card-on-file .btn,
  & #accountContent .customer-order-history .show-more .btn,
  & #divMain.reservations .locations .col-b > .btn {
    width: 100% !important;
  }
}

}

/* Suppress any unreplaced legacy header/footer shells in template fixtures */
#siteHeader,
#mobileMenu,
#box > footer:not(#bargetto-site-footer) {
  display: none !important;
}

/* ============================================================
   BARGETTO WINERY HEADER & FOOTER — 1-to-1 Staging Match
   ============================================================ */

.bargetto-skip-link {
  position: absolute;
  top: -100px;
  left: var(--spacing-md);
  z-index: 9999;
  padding: var(--spacing-2xs) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  transition: top 0.2s ease;
}

.bargetto-skip-link:focus {
  top: var(--spacing-2xs);
}

#bargetto-site-header {
  /* The header renders inside #box, whose neutral tokens swap the brand
     gold for gray-400. Restore the store :root brand values here. */
  --color-accent: #d9c89e;
  --color-accent-secondary: #ebdbb1;
  --nav-link-hover-color: #d9c89e;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  font-family: var(--font-body);
  box-sizing: border-box;
  transition: background-color 0.3s ease-out;
}

#bargetto-site-header *,
#bargetto-site-header *::before,
#bargetto-site-header *::after {
  box-sizing: border-box;
}

/* Bar stays put; the dropdown's max-height transition grows the header. */
#bargetto-site-header.is-submenu-open {
  background-color: var(--overlay-dark);
}

.bargetto-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--nav-bg-color);
  background-image: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/header-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

#bargetto-site-header.is-submenu-open .bargetto-header-bg,
#bargetto-site-header.is-mobile-open .bargetto-header-bg {
  opacity: 1;
}

.bargetto-header-bar {
  position: relative;
  z-index: 10;
  width: 100%;
  height: var(--header-height);
  padding: 0 3.6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--overlay-header);
  border-bottom: 1px solid var(--color-nav-border);
  flex-shrink: 0;
}

.bargetto-header-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bargetto-header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bargetto-header-logo-text {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  white-space: nowrap;
  line-height: 1.2;
}

.bargetto-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bargetto-header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding-top: 2px;
}

.bargetto-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.bargetto-op-menu-source {
  display: none !important;
}

.bargetto-nav-link {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--nav-link-color);
  transition: color 0.2s ease;
}

.bargetto-nav-link-inner {
  display: flex;
  align-items: center;
  gap: 3px;
}

.bargetto-nav-label {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--nav-link-color);
  line-height: 1.55;
  transition: color 0.2s ease;
}

.bargetto-nav-chevron {
  display: inline-flex;
  align-items: center;
  padding-top: 4px;
  color: var(--nav-link-color);
  transition: transform 0.3s ease-out, color 0.2s ease;
}

.bargetto-nav-underline {
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--color-accent);
  transition: width 0.3s ease-out;
}

.bargetto-nav-link:hover .bargetto-nav-label,
.bargetto-nav-link:hover .bargetto-nav-chevron,
.bargetto-nav-link.is-current .bargetto-nav-label,
.bargetto-nav-item.is-active .bargetto-nav-label,
.bargetto-nav-item.is-active .bargetto-nav-chevron {
  color: var(--color-accent);
}

.bargetto-nav-link:hover .bargetto-nav-chevron,
.bargetto-nav-item.is-active .bargetto-nav-chevron {
  transform: rotate(180deg);
}

.bargetto-nav-link:hover .bargetto-nav-underline,
.bargetto-nav-item.is-active .bargetto-nav-underline {
  width: 100%;
}

/* Header Right Actions */
.bargetto-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

.bargetto-contact-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  color: var(--nav-link-color);
  padding-top: 2px;
  transition: color 0.2s ease;
}

.bargetto-contact-link:hover {
  color: var(--color-accent);
}

/* Header SVG icons: paint via CSS so they stay line icons in currentColor
   even when the platform strips fill/stroke presentation attributes. */
#bargetto-site-header svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#bargetto-site-header .bargetto-nav-chevron svg,
#bargetto-site-header .bargetto-close-svg,
#bargetto-site-header .bargetto-mobile-nav-btn svg,
#bargetto-site-header .bargetto-mobile-back-btn svg {
  stroke-width: 2;
}

#bargetto-site-header .bargetto-hamburger-svg {
  width: 24px;
  height: 24px;
  stroke-width: 1;
}

#bargetto-site-header .bargetto-nav-chevron svg,
#bargetto-site-header .bargetto-close-svg,
#bargetto-site-header .bargetto-mobile-nav-btn svg,
#bargetto-site-header .bargetto-mobile-back-btn svg {
  width: 16px;
  height: 16px;
}

#bargetto-site-header .bargetto-mobile-back-btn {
  color: var(--color-accent);
}

/* OrderPort auth strip (#authStatus is filled by the platform at runtime) */
#bargetto-site-header .auth-wrapper {
  position: relative;
  z-index: 11;
  width: 100%;
  height: var(--auth-bar-height);
  padding: 0 3.6vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--nav-bg-color);
  border-bottom: 1px solid var(--color-nav-border);
  flex-shrink: 0;
  overflow: hidden;
}

/* The open mobile header's flex gap is meant for bar -> drawer only;
   cancel it between the auth strip and the bar. */
#bargetto-site-header.is-mobile-open .auth-wrapper {
  margin-bottom: calc(-1 * var(--spacing-xl));
}

#bargetto-site-header .auth-wrapper .ord-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#bargetto-site-header #authStatus {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  line-height: 1;
  color: var(--nav-link-color);
  white-space: nowrap;
}

#bargetto-site-header #authStatus > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

#bargetto-site-header #authStatus a {
  color: var(--nav-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

#bargetto-site-header #authStatus a:hover {
  color: var(--color-accent);
}

#bargetto-site-header #authStatus .splitter {
  color: var(--color-gray-500);
}

@media only screen and (max-width: 767px) {
  #bargetto-site-header .auth-wrapper {
    justify-content: center;
    padding: 0 var(--spacing-sm);
  }

  #bargetto-site-header #authStatus {
    gap: 6px;
    font-size: 11px;
  }

  /* Guest-only "Welcome |" label; the signed-in greeting stays. */
  #bargetto-site-header #ctl00_Auth1_lblAccountGreetingGuest,
  #bargetto-site-header #ctl00_Auth1_lblSplitterGuest {
    display: none;
  }
}

.bargetto-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-accent);
}

.bargetto-close-svg {
  display: none;
}

#bargetto-site-header.is-mobile-open .bargetto-hamburger-svg {
  display: none;
}

#bargetto-site-header.is-mobile-open .bargetto-close-svg {
  display: block;
}

/* Desktop Submenu Drawer */
.bargetto-desktop-dropdown {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.3s ease-out, opacity 0.25s ease-out, visibility 0.25s ease-out;
}

#bargetto-site-header.is-submenu-open .bargetto-desktop-dropdown {
  max-height: 480px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.bargetto-desktop-dropdown-inner {
  margin-left: 34vw;
  padding-right: 3.6vw;
}

.bargetto-submenu-pane {
  display: none;
  gap: var(--spacing-3xl);
  align-items: flex-start;
}

.bargetto-submenu-pane.is-active {
  display: flex;
}

.bargetto-submenu-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: 6px;
}

.bargetto-submenu-heading {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
}

.bargetto-submenu-heading:hover {
  font-weight: 900;
}

.bargetto-submenu-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs) var(--spacing-md);
}

.bargetto-submenu-links-wrap {
  flex-wrap: wrap;
  max-height: 100px;
}

.bargetto-submenu-link {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--nav-link-color);
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.bargetto-submenu-link:hover {
  color: var(--color-accent);
}

.bargetto-submenu-accent-link {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: var(--spacing-3xs);
}

.bargetto-submenu-accent-link:hover {
  font-weight: var(--font-weight-semibold);
}

/* Explore Submenu - Our Brands Card */
.bargetto-brands-outer {
  position: relative;
  top: -16px;
  padding: 10px;
  border: 1px solid var(--color-cream);
  display: inline-flex;
  flex-direction: column;
}

.bargetto-brands-inner {
  padding: 14px 56px 28px 20px;
  background-color: var(--overlay-dark);
  border: 1px solid var(--color-gray-600);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.bargetto-brands-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bargetto-brands-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: 1.25;
}

.bargetto-brands-rule {
  display: block;
  width: 96px;
  height: 1px;
  background-color: var(--color-accent);
}

.bargetto-brands-cards {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.bargetto-brand-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 176px;
}

.bargetto-brand-card-lavita {
  position: relative;
  width: 176px;
  height: 48px;
  padding: 4px;
  background-color: var(--color-primary-dark);
  border: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.bargetto-brand-lavita-inner {
  flex: 1;
  align-self: stretch;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
}

.bargetto-lavita-la {
  color: var(--color-primary-dark);
}

.bargetto-lavita-vita {
  color: var(--color-error);
  margin-left: 4px;
}

.bargetto-lavita-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: var(--color-error);
}

.bargetto-brand-card-chaucers {
  position: relative;
  width: 160px;
  height: 48px;
  padding: 5px 28px;
  background-color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.bargetto-chaucers-logo {
  content: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/chaucers-logo.svg");
  width: 104px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.bargetto-chaucers-corner {
  content: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/chaucer-scroll-decoration.svg");
  position: absolute;
  width: 18px;
  height: 18px;
}

.bargetto-corner-tl { top: 3px; left: 4px; }
.bargetto-corner-bl { bottom: 3px; left: 4px; transform: scaleY(-1); }
.bargetto-corner-tr { top: 3px; right: 4px; transform: scaleX(-1); }
.bargetto-corner-br { bottom: 3px; right: 4px; transform: scale(-1, -1); }

.bargetto-brand-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  line-height: 1.3;
  color: var(--color-gray-100);
}

/* Mobile Navigation Drawer */
.bargetto-mobile-drawer {
  display: none;
}

/* Tablet Desktop Header Sizing (768px .. 1023px — matches staging md: vs lg:) */
/* Mobile/Tablet Header & Full-Screen Drawer (< 1024px). The desktop nav
   doesn't fit below 1024px, so the hamburger takes over from here. */
@media only screen and (max-width: 1023px) {
  .bargetto-header-logo-text {
    font-size: var(--font-size-md);
  }

  .bargetto-header-center,
  .bargetto-header-actions > .bargetto-contact-link,
  .bargetto-desktop-dropdown {
    display: none !important;
  }

  .bargetto-mobile-toggle {
    display: inline-flex;
  }

  #bargetto-site-header.is-mobile-open {
    height: 100vh;
    height: 100dvh;
    background-color: var(--overlay-dark);
    gap: var(--spacing-xl);
  }

  .bargetto-mobile-drawer {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 var(--spacing-2xl);
    overflow-x: hidden;
    overflow-y: auto;
  }

  #bargetto-site-header.is-mobile-open .bargetto-mobile-drawer {
    display: flex;
  }

  .bargetto-mobile-drawer-body {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: var(--spacing-md);
  }

  .bargetto-mobile-nav-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  /* Visibility is class-driven: the OrderPort editor strips the HTML
     `hidden` attribute, so main.js toggles .is-active instead. */
  [data-bargetto-mobile-view]:not(.is-active) {
    display: none !important;
  }

  .bargetto-mobile-nav-btn,
  .bargetto-mobile-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    background: transparent;
    border: 0;
    padding: 2px 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--nav-link-color);
    text-decoration: none;
    cursor: pointer;
  }

  .bargetto-mobile-nav-btn {
    padding-left: 22px;
  }

  .bargetto-mobile-nav-link.is-current,
  .bargetto-mobile-nav-btn:hover,
  .bargetto-mobile-nav-link:hover {
    color: var(--color-accent);
  }

  .bargetto-mobile-subview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
  }

  .bargetto-mobile-subview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    padding-right: 18px;
  }

  .bargetto-mobile-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .bargetto-mobile-subview-title {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
  }

  .bargetto-mobile-subview-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xs);
  }

  .bargetto-mobile-sublink {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--nav-link-color);
    text-decoration: none;
    text-align: center;
  }

  .bargetto-mobile-sublink:hover,
  .bargetto-mobile-sublink-gold {
    color: var(--color-accent);
  }

  /* Mobile Explore Submenu - Our Brands Box */
  .bargetto-brands-outer-mobile {
    top: 0;
    margin-top: var(--spacing-xs);
    min-width: 245px;
    width: 100%;
    max-width: 500px;
    padding: 10px;
  }

  .bargetto-brands-outer-mobile .bargetto-brands-inner {
    width: 100%;
    padding: 28px 20px;
    align-items: center;
    gap: var(--spacing-md);
  }

  .bargetto-brands-outer-mobile .bargetto-brands-header {
    align-items: center;
    gap: 10px;
  }

  .bargetto-brands-outer-mobile .bargetto-brands-title {
    font-size: var(--font-size-sm);
    text-align: center;
  }

  .bargetto-brands-outer-mobile .bargetto-brands-rule {
    width: 64px;
  }

  .bargetto-brands-outer-mobile .bargetto-brands-cards {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  .bargetto-brands-outer-mobile .bargetto-brand-item {
    align-items: center;
    width: 160px;
  }

  .bargetto-brands-outer-mobile .bargetto-brand-card-lavita {
    width: 160px;
  }

  .bargetto-brands-outer-mobile .bargetto-brand-desc {
    text-align: center;
    width: 160px;
  }

  .bargetto-mobile-drawer-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--overlay-light);
  }
}

/* ============================================================
   BARGETTO WINERY FOOTER (#bargetto-site-footer)
   ============================================================ */

#bargetto-site-footer {
  /* Same #box token shadowing as the header: restore the brand gold. */
  --color-accent: #d9c89e;
  --color-accent-secondary: #ebdbb1;
  --nav-link-hover-color: #d9c89e;

  width: 100%;
  padding: 64px 8vw 72px;
  background-color: var(--nav-bg-color);
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.96) 38.74%,
      rgba(9, 11, 13, 0.92) 68.46%,
      rgba(0, 0, 0, 0.88) 92.31%
    ),
    url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/footer-background.jpg");
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--nav-text-color);
  font-family: var(--font-body);
  flex-shrink: 0;
  box-sizing: border-box;
}

#bargetto-site-footer *,
#bargetto-site-footer *::before,
#bargetto-site-footer *::after {
  box-sizing: border-box;
}

.bargetto-footer-container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

/* Newsletter CTA Block */
.bargetto-footer-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-align: center;
}

.bargetto-footer-newsletter-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xs);
}

.bargetto-footer-newsletter-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-cream);
  line-height: 1.2;
}

.bargetto-footer-newsletter-subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-100);
}

/* Double-bordered Gold Sign Up Button */
.bargetto-footer-signup-btn {
  display: inline-flex;
  padding: 6px 8px;
  background-color: var(--color-accent-secondary);
  border: 1px solid var(--color-primary);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.bargetto-footer-signup-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
  min-width: 147px;
  height: 28px;
  padding: 0 36px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.bargetto-footer-signup-text {
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.bargetto-footer-signup-chevron {
  color: var(--color-primary);
  flex-shrink: 0;
}

.bargetto-footer-signup-btn:hover {
  background-color: var(--color-cream);
}

.bargetto-footer-signup-btn:hover .bargetto-footer-signup-text {
  font-weight: var(--font-weight-semibold);
}

.bargetto-footer-newsletter-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  color: var(--color-gray-100);
}

/* Main 4-Column Area (Desktop >= 1280px) */
.bargetto-footer-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  width: 100%;
}

.bargetto-footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.bargetto-footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.bargetto-footer-logo-img {
  content: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/bargetto-footer-logo.svg");
  display: block;
  width: 265px;
  height: auto;
}

.bargetto-footer-sustainable-img {
  content: url("https://orderport-webstore.b-cdn.net/BargettoWinery/Images/certified-california-sustainable.jpg");
  display: block;
  width: 265px;
  height: auto;
  aspect-ratio: 240 / 111;
  object-fit: cover;
  opacity: 0.6;
}

.bargetto-footer-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;
}

.bargetto-footer-nav-pair {
  display: flex;
  flex-direction: row;
  gap: 64px;
  padding-top: var(--spacing-xs);
}

.bargetto-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bargetto-footer-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  line-height: 1.2;
}

.bargetto-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.bargetto-footer-link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nav-link-color);
  text-decoration: none;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.bargetto-footer-link:hover {
  color: var(--color-accent);
}

.bargetto-footer-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-xs);
}

.bargetto-footer-visit,
.bargetto-footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bargetto-footer-locations,
.bargetto-footer-contact-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bargetto-footer-location,
.bargetto-footer-contact-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
}

.bargetto-footer-subhead {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nav-text-color);
  line-height: 1.4;
}

.bargetto-footer-hours-list,
.bargetto-footer-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bargetto-footer-hours {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  color: var(--nav-text-color);
  line-height: 1.4;
}

.bargetto-footer-contact-link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--nav-text-color);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.bargetto-footer-contact-link.bargetto-underline {
  text-decoration: underline;
}

.bargetto-footer-contact-link:hover {
  color: var(--color-accent);
}

/* Footer Bottom Bar */
.bargetto-footer-bottom {
  width: 100%;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.bargetto-footer-copy {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--nav-text-color);
  line-height: 1.4;
  text-align: center;
}

.bargetto-footer-socials {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.bargetto-social-link {
  display: inline-flex;
  text-decoration: none;
}

.bargetto-social-circle {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background-color: rgba(209, 213, 220, 0.2);
  color: var(--nav-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Footer SVGs: paint via CSS so stripped fill/stroke/size attributes
   don't turn them into black 300x150 boxes. */
#bargetto-site-footer .bargetto-footer-signup-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#bargetto-site-footer .bargetto-social-circle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.bargetto-social-link:hover .bargetto-social-circle {
  background-color: rgba(209, 213, 220, 0.4);
  color: var(--color-accent);
}

/* Desktop Medium (< 1280px — matches staging xl: breakpoints) */
@media only screen and (max-width: 1279px) {
  .bargetto-footer-main {
    gap: var(--spacing-2xl);
  }

  .bargetto-footer-columns {
    gap: 56px;
  }

  .bargetto-footer-nav-pair {
    gap: var(--spacing-2xl);
  }
}

/* Tablet Footer (768px .. 1023px — matches staging md:flex-row + lg:flex-row)
   At 900px, brand column is on the left (350px logo + 265px badge) and
   [Resources + Support] stacks above [Visit Us + Contact] on the right. */
@media only screen and (max-width: 1023px) {
  #bargetto-site-footer {
    padding: 64px 12vw 72px;
  }

  .bargetto-footer-logo-img {
    width: 350px;
    max-width: 100%;
  }

  .bargetto-footer-columns {
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
  }
}

/* Mobile Footer (< 768px): one centered column. */
@media only screen and (max-width: 767px) {
  #bargetto-site-footer {
    padding: 56px var(--spacing-md) 64px;
  }

  .bargetto-footer-main {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
  }

  .bargetto-footer-brand-col {
    width: 100%;
  }

  .bargetto-footer-logo-img,
  .bargetto-footer-sustainable-img {
    width: 300px;
    max-width: 100%;
    height: auto;
  }

  .bargetto-footer-columns {
    width: 100%;
    align-items: center;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .bargetto-footer-nav-pair {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xl) var(--spacing-2xl);
    padding-top: 0;
  }

  .bargetto-footer-col,
  .bargetto-footer-links,
  .bargetto-footer-info-col,
  .bargetto-footer-visit,
  .bargetto-footer-locations,
  .bargetto-footer-location,
  .bargetto-footer-hours-list,
  .bargetto-footer-contact,
  .bargetto-footer-contact-groups,
  .bargetto-footer-contact-group,
  .bargetto-footer-contact-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bargetto-footer-info-col {
    width: 100%;
    gap: var(--spacing-2xl);
    padding-top: 0;
  }

  .bargetto-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Fully hide platform checkout link — never shown, per client direction */
#ctl00_ViewCart1_lnkCheckout {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}