/* ==========================================================================
   S-5! E-Commerce Store — Brand Override Stylesheet
   Aligns shop.s-5.com with the S-5! corporate design language
   Reference: s-5.com case study pages, S-5! Corporate Style Guide (June 2024),
              s5-nav-v4.html navigation redesign prototype
   Updated: March 2026 — Aligned with newer s-5.com design system + nav v4
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONT IMPORTS
   -------------------------------------------------------------------------- */
/* PT Sans — brand primary + narrow for labels/uppercase */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans+Narrow:wght@400;700&display=swap');

/* FontAwesome 5 — loaded by base SuiteCommerce CSS from ./SC/ThreadsV4/4.0.0/fontawesome/.
   No override needed on the live site. CDN fallbacks removed to avoid conflicts. */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Brand Tokens)
   Aligned with nav v4 design system tokens
   -------------------------------------------------------------------------- */
:root {
  /* S-5! Brand Colors — from Corporate Style Guide (Pantone 123C + Black) */
  --s5-gold: #FDC82F;
  --s5-gold-hover: #fdd562;
  --s5-gold-dark: #e5b526;
  --s5-gold-light: #fff8e6;
  --s5-gold-glow: rgba(253, 200, 47, 0.15);
  --s5-gold-subtle: rgba(253, 200, 47, 0.08);
  --s5-gold-border: rgba(253, 200, 47, 0.35);
  --s5-gold-border-hover: rgba(253, 200, 47, 0.6);

  /* Neutrals — nav v4 aligned */
  --s5-black: #1a1a1a;
  --s5-dark: #111111;
  --s5-rich-black: #0d0d0d;
  --s5-charcoal: #2a2a2a;
  --s5-gray-dark: #414141;
  --s5-gray-mid: #6d6d6d;
  --s5-gray-light: #bbbbbb;
  --s5-gray-border: #d9d9d9;
  --s5-off-white: #f1f1f1;
  --s5-white: #ffffff;

  /* Opacity scale (on dark backgrounds) — from nav v4 */
  --s5-gray-100: rgba(255, 255, 255, 0.88);
  --s5-gray-200: rgba(255, 255, 255, 0.72);
  --s5-gray-300: rgba(255, 255, 255, 0.55);
  --s5-gray-400: rgba(255, 255, 255, 0.50);
  --s5-gray-500: rgba(255, 255, 255, 0.28);
  --s5-gray-600: rgba(255, 255, 255, 0.15);
  --s5-gray-700: rgba(255, 255, 255, 0.08);
  --s5-border: rgba(255, 255, 255, 0.10);

  /* Typography */
  --s5-font-primary: 'PT Sans', Arial, sans-serif;
  --s5-font-narrow: 'PT Sans Narrow', 'PT Sans', Arial, sans-serif;
  --s5-font-weight-normal: 400;
  --s5-font-weight-bold: 700;
  --s5-font-weight-black: 900;

  /* Spacing */
  --s5-spacing-xs: 4px;
  --s5-spacing-sm: 8px;
  --s5-spacing-md: 16px;
  --s5-spacing-lg: 24px;
  --s5-spacing-xl: 48px;
  --s5-spacing-2xl: 72px;

  /* Transitions — nav v4 timing */
  --s5-transition: 0.2s ease;
  --s5-transition-slow: 0.3s ease-in-out;
  --s5-transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --s5-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --s5-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --s5-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
  --s5-shadow-header: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  --s5-shadow-gold: 0 4px 16px rgba(253, 200, 47, 0.25);

  /* Border Radius */
  --s5-radius-sm: 3px;
  --s5-radius-md: 6px;
  --s5-radius-pill: 9999px;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY RESET
   -------------------------------------------------------------------------- */
html {
  font-family: var(--s5-font-primary) !important;
}

body,
body.seo-support,
input,
button,
select,
textarea,
.shopping-layout,
h1, .testimonial .testimonial-header,
h2, .featuredproductcct-layout .ribbon,
h3, .testimonial .testimonial-content-title,
h4, h5, h6,
p, .testimonial .testimonial-content-paragraph,
a, span, li, td, th, label, div {
  font-family: var(--s5-font-primary) !important;
}

/* Protect FontAwesome icons from the global font-family reset above.
   The base CSS sets font-family:"FontAwesome" WITHOUT !important, so our
   global reset can override it via inheritance or specificity.
   Belt-and-suspenders: target the ELEMENT and its ::before pseudo-element.
   Also set font-weight:900 (FA5 Solid requires weight 900). */

/* 1. Element-level: ensures inheritance path is correct */
.fa, .fas, .far, .fab,
[class*="-icon"],
[class*="icon-"] {
  font-family: "FontAwesome" !important;
  font-weight: 900 !important;
}

/* 2. Pseudo-element level: directly set font on ::before where glyphs render.
   This beats any inherited font-family from parent elements. */
.fa::before, .fas::before, .far::before, .fab::before,
[class*="-icon"]::before,
[class*="icon-"]::before {
  font-family: "FontAwesome" !important;
  font-weight: 900 !important;
}

/* 3. Explicit class names for the most critical visible icons —
   highest specificity guarantee */
.header-mini-cart-menu-cart-icon,
.header-menu-search-icon,
.header-sidebar-toggle-icon,
.site-search-button-icon,
.site-search-input-icon,
.site-search-input-reset-icon,
.global-views-back-to-top-icon,
.home-gallery-prev-icon,
.home-gallery-next-icon {
  font-family: "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.header-mini-cart-menu-cart-icon::before,
.header-menu-search-icon::before,
.header-sidebar-toggle-icon::before,
.site-search-button-icon::before,
.site-search-input-icon::before,
.site-search-input-reset-icon::before,
.global-views-back-to-top-icon::before,
.home-gallery-prev-icon::before,
.home-gallery-next-icon::before {
  font-family: "FontAwesome" !important;
  font-weight: 900 !important;
}

/* 4. Brand icons — override with FontAwesome Brands font.
   CRITICAL: @font-face for "FontAwesome Brands" is registered at font-weight:900.
   Must match that weight or the browser won't find the font file. */
.fab,
.footer-content-social-icon,
[class*="icon-facebook"],
[class*="icon-instagram"],
[class*="icon-youtube"],
[class*="icon-linkedin"],
[class*="icon-tiktok"],
[class*="icon-pinterest"],
[class*="icon-x"] {
  font-family: "FontAwesome Brands" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fab::before,
.footer-content-social-icon::before,
[class*="icon-facebook"]::before,
[class*="icon-instagram"]::before,
[class*="icon-youtube"]::before,
[class*="icon-linkedin"]::before,
[class*="icon-tiktok"]::before,
[class*="icon-pinterest"]::before,
[class*="icon-x"]::before {
  font-family: "FontAwesome Brands" !important;
  font-weight: 900 !important;
}

/* Social icons missing from base CSS — add FontAwesome Brands Unicode codepoints.
   LinkedIn (f0e1) has been in FA since v4. TikTok (e07b) was added in FA 5.15.1.
   X/Twitter: use the classic Twitter bird (f099) for older FA5 font files,
   since the "X" glyph (e61b) only exists in FA6+. */
i.icon-linkedin::before,
.footer-content-social-icon.icon-linkedin::before {
  content: "\f0e1" !important;
}

/* TikTok — FA Brands font doesn't include \e07b glyph; use inline SVG instead */
i.icon-tiktok,
.footer-content-social-icon.icon-tiktok {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  vertical-align: middle !important;
}

i.icon-tiktok::before,
.footer-content-social-icon.icon-tiktok::before {
  content: "" !important;
  display: none !important;
}

i.icon-x::before,
.footer-content-social-icon.icon-x::before {
  content: "\f099" !important;
}

body {
  color: var(--s5-gray-dark) !important;
  background-color: var(--s5-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden !important;
}

/* Focus-visible ring — gold, consistent with nav v4 accessibility */
*:focus-visible {
  outline: 2px solid var(--s5-gold) !important;
  outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}

/* Headings */
h1, .testimonial .testimonial-header,
h3.logolistcct-header,
.large-title-viewonly,
.large-title-navigable,
.large-title {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-black) !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h2, .featuredproductcct-layout .ribbon {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  line-height: 1.2;
}

h3, .testimonial .testimonial-content-title {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  line-height: 1.25;
}

h4, h5, h6 {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  line-height: 1.3;
}

a {
  color: var(--s5-black) !important;
  transition: color var(--s5-transition) !important;
}

a:hover,
a:focus {
  color: var(--s5-gold) !important;
}

/* All links and text inside the dark header must be light —
   override the global black `a` color for everything in the header bar */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) a,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) span,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-main-nav a,
.sc-shippingbar-header a {
  color: var(--s5-gray-200) !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) a:hover,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) a:focus {
  color: var(--s5-white) !important;
}

/* --------------------------------------------------------------------------
   2b. LAYOUT — Remove min-height: 100% that causes white space on short pages
   -------------------------------------------------------------------------- */
/* The base SuiteCommerce CSS sets min-height: 100% on the entire layout chain
   (html, body, .main, .layout-container, .shopping-layout) which forces pages
   to fill the full viewport height even when content is short (e.g., product pages).
   This creates large white gaps between content and footer. */
.shopping-layout,
.checkout-layout,
.myaccount-layout {
  min-height: 0 !important;
}

.main,
.layout-container,
#main,
[role="main"] {
  min-height: 0 !important;
}

.shopping-layout-content,
.checkout-layout-content,
.myaccount-layout-content {
  min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   3. HEADER — Single-line compact bar (per header idea design)
   Logo left | Nav center-left | Utility icons right — all one row
   -------------------------------------------------------------------------- */

/* Top header wrapper — dark single bar
   KEY INSIGHT: .header-secondary-wrapper (nav) is a SIBLING of .header-main-wrapper,
   not inside .header-main-nav. We use display:contents to flatten the DOM so all
   major elements become direct flex children of :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header). */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) {
  background-color: var(--s5-dark) !important;
  border-bottom: none !important;
  box-shadow: var(--s5-shadow-header);
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0 20px !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header)::after {
  display: none !important;
  content: none !important;
}

/* Flatten ALL wrapper layers so logo, nav, and utility become direct flex children.
   DOM: header > div(anon) > div(anon) > {header-main-wrapper > header-main-nav > {logo, content}, header-secondary-wrapper}
   We use display:contents at every level to collapse the nesting. */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) > div {
  display: contents !important;
}

.header-main-wrapper,
.header-main-wrapper.header-main-wrapper-standalone {
  display: contents !important;
}

.header-main-nav {
  display: contents !important;
}

/* Hide mobile-only elements */
.header-sidebar-toggle-wrapper,
.header-logo-mobile-wrapper {
  display: none !important;
}

/* Hide <section> elements that may appear inside header wrappers */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) section {
  display: none !important;
}

/* Hide "Home" nav item — logo already links home.
   Target the anchor AND its parent li (via :has, with anchor fallback). */
.header-menu-home-anchor {
  display: none !important;
}

.header-menu-level1 li:has(.header-menu-home-anchor) {
  display: none !important;
}

/* Fallback: even if :has() fails, the anchor itself is hidden via the rule above,
   and the empty li collapses to zero width with inline-flex + no padding. */

/* Hide the first search button (before nav items) */
.header-menu-secondary-nav > .header-menu-search.search-link {
  display: none !important;
}

/* Flatten the second .header-menu-search wrapper (contains desktop + mobile search forms)
   so .header-site-search.search-desktop becomes a direct flex child */
.header-menu-secondary-nav > .header-menu-search:not(.search-link) {
  display: contents !important;
}

/* --- JS-CONTROLLED SEARCH ---
   JS toggles div.site-search: adds class "active" + inline style "display: block".
   Base CSS: .header-site-search { display: none } hides the parent wrapper.
   We must override that so the parent is present in the DOM (but collapsed when
   .site-search is not .active), and style the opened state. */

/* Search wrapper — now a direct flex child of :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header)
   thanks to display:contents on all parent wrappers.
   Order 4 = after utility links (order 3), before cart (order 5). */
.header-search-wrapper {
  display: flex !important;
  align-items: center !important;
  order: 4 !important;
  margin-left: 4px !important;
  background-color: transparent !important;
}

/* Search icon button — styled inline with other header utilities */
.site-search-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

/* Override base CSS "display: none" on the desktop search wrapper.
   Position it absolutely so it drops below the header when JS activates .site-search.
   Order 99 keeps it out of the visual flow. */
.header-site-search.search-desktop {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  order: 99 !important;
}

/* --- SEARCH DROPDOWN: full styling for the opened state ---
   JS adds .active class + inline display:block to div.site-search.
   Use high-specificity selectors to override ALL base CSS rules. */

/* The dropdown panel — transparent wrapper, content aligns right, flush to header */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-site-search.search-desktop .site-search.active {
  pointer-events: auto !important;
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  box-shadow: none !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Content area — override base absolute positioning + 600px/1170px width.
   Constrain to a comfortable search bar width, centered.
   Dark bg + gold border + shadow now live HERE (not on the full-width panel). */
.site-search.active .site-search-content.site-search-content,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-content,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .nav-search-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 !important;
  background-color: var(--s5-dark) !important;
  border-bottom: 2px solid var(--s5-gold) !important;
  border-radius: 0 0 var(--s5-radius-sm) var(--s5-radius-sm) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  display: block !important;
  padding: 10px 16px !important;
  float: none !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Kill clearfix */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search-content::before,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search-content::after {
  display: none !important;
  content: none !important;
}

/* Form — full width, no padding override needed */
.site-search.active .site-search-content-form.site-search-content-form,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-content-form {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

/* Input container — THIS is the actual flex container.
   DOM: .site-search-content-input contains:
     1. div[data-view="ItemsSeacher"] (typeahead wrapper)
     2. i.site-search-input-icon
     3. a.site-search-input-reset
     4. button.site-search-button-submit  ← GO button is HERE, not in form
   So we flex THIS div to put input + GO side by side. */
.site-search.active .site-search-content-input.site-search-content-input,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-content-input {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  background-color: transparent !important;
  position: relative !important;
}

/* ItemsSearcher wrapper — takes remaining space */
.site-search.active .site-search-content-input > div[data-view="ItemsSeacher"],
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-content-input > div {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Hide the search icon and reset link inside the input area (they clutter flex) */
.site-search.active .site-search-content-input > i.site-search-input-icon,
.site-search.active .site-search-content-input > a.site-search-input-reset {
  display: none !important;
}

/* Typeahead span */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .twitter-typeahead {
  width: 100% !important;
  display: block !important;
}

/* The text input */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .itemssearcher-input.tt-input {
  width: 100% !important;
  background-color: var(--s5-gray-700) !important;
  color: var(--s5-white) !important;
  border: 1px solid var(--s5-gray-600) !important;
  border-radius: var(--s5-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-family: var(--s5-font-primary) !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .itemssearcher-input.tt-input:focus {
  border-color: var(--s5-gold) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 2px var(--s5-gold-glow) !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .itemssearcher-input.tt-input::placeholder {
  color: var(--s5-gray-400) !important;
}

/* Hide typeahead hint */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .itemssearcher-input.tt-hint {
  display: none !important;
}

/* Hide pre spacer */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active pre {
  display: none !important;
}

/* Go / Submit button — gold pill beside input.
   Base CSS: position:absolute; top:0; right:0; float:right; height:100% — must override ALL.
   Now a flex child of .site-search-content-input (same container as the typeahead). */
.site-search.active .site-search-content-input .site-search-button-submit,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-button-submit,
.site-search.active .site-search-button-submit.site-search-button-submit {
  position: static !important;
  visibility: visible !important;
  float: none !important;
  flex-shrink: 0 !important;
  order: 2 !important;
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: none !important;
  border-radius: var(--s5-radius-pill) !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: all var(--s5-transition) !important;
  width: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-button-submit:hover {
  background-color: var(--s5-gold-dark) !important;
  box-shadow: var(--s5-shadow-gold) !important;
}

/* Search icon inside input */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-input-icon {
  color: var(--s5-gray-400) !important;
}

/* Reset/clear button */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-input-reset {
  color: var(--s5-gray-400) !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .site-search-input-reset:hover {
  color: var(--s5-white) !important;
}

/* Typeahead dropdown results */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .tt-menu {
  background-color: var(--s5-dark) !important;
  border: 1px solid var(--s5-gray-600) !important;
  border-radius: var(--s5-radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  width: 100% !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .tt-menu a,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .tt-suggestion {
  color: var(--s5-gray-200) !important;
  background-color: transparent !important;
  padding: 8px 16px !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .tt-suggestion:hover,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .site-search.active .tt-cursor {
  background-color: var(--s5-gray-700) !important;
  color: var(--s5-white) !important;
}

/* Mobile search — hide in desktop single-line header */
.header-site-search.search-mobile {
  display: none !important;
}

/* Flatten .header-content so its children (subheader links, cart) become
   direct flex children of :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) alongside nav items. */
.header-content {
  display: contents !important;
}

/* Ensure all header children don't have stray backgrounds */
.header-right-menu,
.header-subheader,
.header-subheader-container,
.header-menu-profile,
.header-menu-cart {
  background-color: transparent !important;
}

/* Hide mobile cart inside header-content (desktop uses the one in subheader) */
.header-mobile-menu-cart {
  display: none !important;
}

/* --- LOGO: left-aligned, compact (desktop only — do NOT include
   .header-logo-mobile-wrapper here or it overrides the display:none above!) --- */
.header-logo-wrapper {
  background-color: transparent !important;
  padding: 10px 0 !important;
  order: 1 !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  float: none !important;
  width: auto !important;
  margin-right: 32px !important;
  justify-content: flex-start !important;
  display: flex !important;
  z-index: 5 !important;
}

.header-logo-image {
  max-height: 60px !important;
  width: auto !important;
  transition: opacity var(--s5-transition);
}

.header-logo:hover .header-logo-image {
  opacity: 0.85;
}

/* --- NAV: inline between logo (order:1) and utility (order:3) --- */
/* Flatten secondary-wrapper, .header-menu, and .header-menu-secondary-nav
   so all nav children become direct flex children of :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header).
   This lets us reorder search-wrapper to sit next to the cart. */
.header-secondary-wrapper {
  display: contents !important;
}

.header-secondary-wrapper::after {
  display: none !important;
  content: none !important;
}

.header-secondary-wrapper .header-menu {
  display: contents !important;
}

.header-menu-secondary-nav {
  display: contents !important;
}

.header-menu-level1 {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  order: 2 !important;
}

/* Force nav items horizontal */
.header-menu-level1 > li {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 !important;
}

/* (header-search-wrapper styled above in search section) */

/* Kill clearfix pseudo-elements that break flex layout */
.header-menu-secondary-nav::before,
.header-menu-secondary-nav::after,
.header-menu-level1::before,
.header-menu-level1::after,
.header-main-nav::before,
.header-main-nav::after,
.header-subheader-container::before,
.header-subheader-container::after,
.header-right-menu::before,
.header-right-menu::after,
.header-subheader::before,
.header-subheader::after,
.header-subheader-options::before,
.header-subheader-options::after,
.header-menu-profile::before,
.header-menu-profile::after,
.header-profile-menu-login-container::before,
.header-profile-menu-login-container::after,
.header-profile-menu-login::before,
.header-profile-menu-login::after,
.header-secondary-wrapper::before,
.header-secondary-wrapper .header-menu::before,
.header-secondary-wrapper .header-menu::after,
.header-content::before,
.header-content::after {
  display: none !important;
  content: none !important;
}

.header-menu-level1 li {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* TOP-LEVEL nav links only (direct children of .header-menu-level1 > li) —
   scoped with > to avoid bleeding into dropdown sub-menus */
.header-menu-level1 > li > a,
.header-menu-level1-anchor,
.header-menu-home-anchor,
.header-menu-shop-anchor {
  color: var(--s5-gray-200) !important;
  font-size: 14px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 12px 16px !important;
  transition: color var(--s5-transition) !important;
  border: none !important;
  border-bottom: none !important;
  border-width: 0 !important;
  position: relative !important;
  margin: 0 !important;
  margin-right: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header-menu-level1 > li > a:hover,
.header-menu-level1 > li > a:focus,
.header-menu-level1-anchor:hover,
.header-menu-level1-anchor:focus,
.header-menu-home-anchor:hover,
.header-menu-home-anchor:focus,
.header-menu-shop-anchor:hover,
.header-menu-shop-anchor:focus {
  color: var(--s5-white) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
}

.header-menu-level1 > li > a:active,
.header-menu-level1-anchor:active,
.header-menu-home-anchor:active,
.header-menu-shop-anchor:active {
  color: var(--s5-white) !important;
  background-color: transparent !important;
  border: none !important;
}

/* Active menu state — white text, no underline in single-line mode */
.header-menu-level1 > li > a.active,
.header-menu-home-anchor.active,
.header-menu-shop-anchor.active {
  color: var(--s5-white) !important;
  border: none !important;
  border-bottom: none !important;
}

/* --- DROPDOWN SUB-MENUS (level 2/3) ---
   Polished dropdown with gold accent, single-column vertical list. */

/* === NAV DROPDOWN (Shop > Brackets, Clamps, etc.) === */
.header-menu-level-container {
  background-color: #fff !important;
  border: none !important;
  border-top: 3px solid var(--s5-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 var(--s5-radius-sm) var(--s5-radius-sm) !important;
  padding: 8px 0 !important;
  margin-top: 0 !important;
  min-width: 220px !important;
}

/* Force all nested lists inside nav dropdown to be single-column vertical */
.header-menu-level-container ul,
.header-menu-level-container li,
.header-menu-level-container > li,
.header-menu-level-container > li > ul,
.header-menu-level-container > li > ul > li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
}

/* Nav dropdown links — single column, clean vertical list */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level-container a,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level2-anchor,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level3-anchor {
  color: var(--s5-black) !important;
  background-color: #fff !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 13px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 20px !important;
  transition: all var(--s5-transition) !important;
  display: block !important;
  white-space: nowrap !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level-container a:hover,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level2-anchor:hover,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-menu-level3-anchor:hover {
  color: var(--s5-black) !important;
  background-color: var(--s5-off-white) !important;
  padding-left: 24px !important;
}

/* Sub-level nav dropdowns — stack below, not side-by-side */
.header-menu-level-container > li > ul > li > ul {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: none !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--s5-gold-border) !important;
  margin-left: 16px !important;
}

/* Hide "Back" links — mobile navigation artifacts shown in all dropdowns.
   Profile dropdown uses .header-menu-myaccount-back (NOT .header-menu-back).
   Also hide push/pop icons used for mobile slide-in navigation. */
/* Scoped to desktop containers only — mobile sidebar back buttons must remain visible
   for the SuiteCommerce pusher mechanism (push/pop sub-menu navigation) */
.header-profile-menu-myaccount-container .header-menu-back,
.header-profile-menu-myaccount-container .header-menu-myaccount-back,
.header-menu-level-container .header-menu-back {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the parent li that wraps the back link (first child in each sub-menu) */
.header-profile-menu-myaccount-container li:has(> .header-menu-myaccount-back) {
  display: none !important;
}

/* Hide push/pop arrow icons (mobile slide navigation) */
/* Scoped to desktop dropdown — mobile sidebar needs push/pop icons for navigation */
.header-profile-menu-myaccount-container .header-menu-myaccount-menu-push-icon,
.header-profile-menu-myaccount-container .header-menu-myaccount-pop-icon,
.header-profile-menu-myaccount-container [class*="push-icon"],
.header-profile-menu-myaccount-container [class*="pop-icon"] {
  display: none !important;
}

/* Hide the top-level "My Account" push link (just an icon for mobile) */
.header-profile-menu-myaccount-container > li > a.header-menu-myaccount-anchor[data-action="push-menu"] {
  display: none !important;
}

/* === PROFILE DROPDOWN (Welcome Andrew > My Account, etc.) ===
   Wide mega-menu with flat sections — all sub-items always visible.
   Two-column layout using actual SuiteCommerce class names:
     ul.header-menu-myaccount                      — main list
     li.header-menu-myaccount-overview              — Account Overview + Sign Out row
     li.header-menu-myaccount-item-level2           — each section (Purchases, Wishlist, etc.)
     span.header-menu-myaccount-span-level2         — section headings
     a.header-menu-myaccount-anchor-level2          — Overview link
     ul.header-menu-myaccount-level3                — sub-menus
     a.header-menu-myaccount-anchor-level3          — sub-item links
*/
.header-profile-menu-myaccount-container {
  background-color: #fff !important;
  border: none !important;
  border-top: 3px solid var(--s5-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 var(--s5-radius-sm) var(--s5-radius-sm) !important;
  padding: 0 !important;
  margin-top: 0 !important;
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 500px !important;
  z-index: 1003 !important;
  overflow: visible !important;
  max-height: none !important;
}

/* Top-level li wrapper + ul.header-menu-myaccount — flex grid */
.header-profile-menu-myaccount-container > li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Scoped to desktop dropdown — mobile sidebar uses native block list for pusher */
.header-profile-menu-myaccount-container ul.header-menu-myaccount {
  display: flex !important;
  flex-wrap: wrap !important;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Account Overview row — hidden per request */
.header-menu-myaccount-overview {
  display: none !important;
}

/* Each section — 50% width column cell (desktop dropdown only) */
.header-profile-menu-myaccount-container li.header-menu-myaccount-item-level2 {
  display: block !important;
  float: none !important;
  width: 50% !important;
  position: relative !important;
  padding: 8px 16px 6px !important;
  box-sizing: border-box !important;
}

/* Section headings (PURCHASES, WISHLIST, BILLING, etc.) — gold underline (desktop dropdown only) */
.header-profile-menu-myaccount-container .header-menu-myaccount-span-level2,
.header-profile-menu-myaccount-container .header-menu-myaccount-anchor-level2 {
  color: var(--s5-black) !important;
  background-color: transparent !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 11px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 0 4px 0 !important;
  margin-bottom: 4px !important;
  border-bottom: 2px solid var(--s5-gold) !important;
  display: block !important;
  cursor: default !important;
}

/* Sub-menus (level 3) — always visible, flat (desktop dropdown only).
   On mobile, the base CSS + JS controls visibility via the pusher mechanism. */
.header-profile-menu-myaccount-container ul.header-menu-myaccount-level3 {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: none !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  padding: 2px 0 0 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Sub-menu list items (desktop dropdown only) */
.header-profile-menu-myaccount-container ul.header-menu-myaccount-level3 li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sub-item links (desktop dropdown only) */
.header-profile-menu-myaccount-container a.header-menu-myaccount-anchor-level3 {
  color: var(--s5-gray-600) !important;
  background-color: transparent !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 3px 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-bottom: none !important;
  transition: color var(--s5-transition) !important;
}

a.header-menu-myaccount-anchor-level3:hover {
  color: var(--s5-black) !important;
}

/* Account Overview link in header row */
.header-menu-myaccount-overview .header-menu-myaccount-overview-anchor {
  color: var(--s5-black) !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 12px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 4px 8px !important;
  display: inline-block !important;
  border-radius: 3px !important;
  transition: all var(--s5-transition) !important;
}

.header-menu-myaccount-overview .header-menu-myaccount-overview-anchor:hover {
  background-color: #fff !important;
}

/* Sign Out link in header row */
.header-menu-myaccount-signout-link {
  color: var(--s5-gray-600) !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 4px 8px !important;
  display: inline-block !important;
  border-radius: 3px !important;
  transition: all var(--s5-transition) !important;
}

.header-menu-myaccount-signout-link:hover {
  color: var(--s5-black) !important;
  background-color: #fff !important;
}

/* Hide signout icon */
.header-menu-myaccount-signout-icon {
  display: none !important;
}

/* Fallback: all other links/spans in profile dropdown */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-profile-menu-myaccount-container a,
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-profile-menu-myaccount-container span {
  color: var(--s5-black) !important;
  background-color: transparent !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  padding: 3px 0 !important;
  display: block !important;
  transition: all var(--s5-transition) !important;
}

:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-profile-menu-myaccount-container a:hover {
  color: var(--s5-black) !important;
}

/* --- SUBHEADER (Quick Order, Login, Register, Cart): inside .header-content ---

   ALIGNMENT FIX: Quick Order, Login, and Register live at different nesting depths:
     Quick Order:  .header-right-menu > .header-subheader > .header-subheader-container > ul > li > a
     Login/Reg:    .header-right-menu > .header-subheader > .header-subheader-container > .header-menu-profile > div > ul > li > a

   Using display:contents on ALL intermediate wrappers so every link becomes a
   direct flex child of .header-right-menu, eliminating vertical alignment differences. */

.header-right-menu {
  display: flex !important;
  float: none !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;
  height: auto !important;
  order: 3 !important;
}

/* Flatten subheader wrapper hierarchy */
.header-subheader {
  display: contents !important;
  background-color: transparent !important;
  border: none !important;
}

.header-subheader-container {
  display: contents !important;
}

/* Flatten the Quick Order <ul> and its <li> wrappers */
.header-subheader-options {
  display: contents !important;
}

.header-subheader-options li {
  display: contents !important;
}

/* Hide empty <li> elements (Quick Order list has empty siblings) */
.header-subheader-options li:empty {
  display: none !important;
}
.header-subheader-options li:not(:has(a)) {
  display: none !important;
}

/* Profile wrapper — MUST be a real positioned element (not display:contents)
   so the profile dropdown (.header-profile-menu-myaccount-container) has
   a proper positioning ancestor. Without this, the absolute-positioned
   dropdown references the full header bar and overflows horizontally. */
.header-menu-profile {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  gap: 4px !important;
}

/* Still flatten inner wrappers for login/register links */
.header-profile-menu-login-container {
  display: contents !important;
}

.header-profile-menu-login {
  display: contents !important;
}

.header-profile-menu-login li {
  display: contents !important;
}

/* Subheader links — smaller, icon-like in single-line header */
.header-subheader-options a,
.header-subheader-options li a,
.header-profile-login-link,
.header-profile-register-link,
.quickorder-accesspoints-headerlink-link {
  color: var(--s5-gray-300) !important;
  font-size: 11px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  transition: all var(--s5-transition) !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: var(--s5-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: auto !important;
  white-space: nowrap !important;
}

.header-subheader-options a:hover,
.header-subheader-options li a:hover,
.header-profile-login-link:hover,
.header-profile-register-link:hover,
.quickorder-accesspoints-headerlink-link:hover {
  color: var(--s5-white) !important;
  background-color: var(--s5-gray-700) !important;
  border: none !important;
}

.header-subheader-options a:active,
.header-subheader-options li a:active {
  border: none !important;
  background-color: var(--s5-gray-700) !important;
  color: var(--s5-gray-100) !important;
}

/* Profile menu containers — now flattened with display:contents above.
   Keep these overrides for margin/padding resets. */
.header-profile-menu-login {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-profile-menu-login li {
  float: none !important;
}

/* Cart — last item on the right */
.header-menu-cart {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 5 !important;
}

.header-mini-cart-menu-cart-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 6px 8px !important;
  color: var(--s5-white) !important;
  transition: color var(--s5-transition) !important;
}

.header-mini-cart-menu-cart-icon,
.header-menu-cart-icon {
  color: var(--s5-white) !important;
}

.header-mini-cart-menu-cart-link:hover {
  color: var(--s5-gold) !important;
}

.header-mini-cart-menu-cart-legend {
  color: var(--s5-gold) !important;
  font-weight: var(--s5-font-weight-bold) !important;
}

/* Cart mini-cart dropdown — dark text on white background */
.header-mini-cart {
  background-color: #fff !important;
  border: 1px solid var(--s5-gray-200) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--s5-radius-sm) !important;
}

.header-mini-cart a,
.header-mini-cart span,
.header-mini-cart p,
.header-mini-cart div,
.header-mini-cart-empty,
.header-mini-cart-empty a,
.open .header-mini-cart a,
.open .header-mini-cart-empty a {
  color: var(--s5-black) !important;
}

.header-mini-cart a:hover {
  color: var(--s5-gold-dark) !important;
}

/* Search */
.header-menu-search-link,
.header-menu-search-icon,
.site-search-button-link,
.site-search-button-icon {
  color: var(--s5-gray-300) !important;
  transition: color var(--s5-transition) !important;
}

.header-menu-search-link:hover,
.site-search-button-link:hover {
  color: var(--s5-white) !important;
}

.site-search-content-form {
  background-color: transparent !important;
}

.itemssearcher-input,
.itemssearcher-input.tt-input {
  background-color: var(--s5-gray-700) !important;
  color: var(--s5-white) !important;
  border: 1px solid var(--s5-gray-600) !important;
  border-radius: var(--s5-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--s5-transition), box-shadow var(--s5-transition) !important;
}

.itemssearcher-input::placeholder,
.itemssearcher-input.tt-input::placeholder {
  color: var(--s5-gray-400) !important;
}

.itemssearcher-input:focus,
.itemssearcher-input.tt-input:focus {
  border-color: var(--s5-gold) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--s5-gold-glow) !important;
}

.site-search-button-submit {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: none !important;
  font-weight: var(--s5-font-weight-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 0 var(--s5-radius-sm) var(--s5-radius-sm) 0 !important;
  padding: 10px 20px !important;
  transition: all var(--s5-transition) !important;
}

.site-search-button-submit:hover {
  background-color: var(--s5-gold-dark) !important;
  box-shadow: var(--s5-shadow-gold) !important;
}

/* Shipping bar — hide in single-line header (typically empty template) */
.header-shipping-bar,
.shipping-bar-container {
  display: none !important;
}

/* Content banners inside header — hide from flex flow (they're empty templates) */
:is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .content-banner {
  display: none !important;
}

/* Sidebar overlay — don't interfere with flex layout */
.header-sidebar-overlay {
  order: 30 !important;
  position: fixed !important;
}

/* Header sidebar wrapper — keep out of flex flow */
.header-sidebar-wrapper {
  order: 30 !important;
}

/* Skip link — keep accessible but out of flex flow */
.skip-to-main-content {
  position: absolute !important;
  order: -1 !important;
}

/* Header message container — hide if empty */
.header-message {
  display: none !important;
}

/* Mobile hamburger */
.header-sidebar-toggle-icon {
  color: var(--s5-white) !important;
}

.header-sidebar-toggle:hover .header-sidebar-toggle-icon {
  color: var(--s5-gold) !important;
}

/* Banners inside header — keep below the single-line bar */
.header-banner-top,
.header-banner-bottom {
  order: 10 !important;
}

/* Skip link */
.skip-to-main-content {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
}

/* Hide notification container (usually empty, just creates gaps) */
.shopping-layout-notifications,
.checkout-layout-notifications,
.myaccount-layout-notifications {
  display: none !important;
}

/* Breadcrumbs — hide on home page (empty container creates gap),
   show on product/category/other pages where they have content */
.shopping-layout-breadcrumb {
  padding: 8px 0 !important;
}

/* Home page: hide breadcrumb (it's empty) */
.shopping-layout:has(.home-page) .shopping-layout-breadcrumb,
.shopping-layout:has(.home) .shopping-layout-breadcrumb {
  display: none !important;
}

/* Remove any top margin/padding on the main content area */
#main-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.shopping-layout-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Add breathing room between header and body on non-homepage pages */
.checkout-layout-content,
.myaccount-layout-content {
  margin-top: 24px !important;
  padding-top: 0 !important;
}

.home-page,
.home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   4. HERO / CAROUSEL
   -------------------------------------------------------------------------- */
.home-slider-container {
  position: relative !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background-color: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* The home page wrapper — remove any spacing above hero */
.home > div:first-child {
  margin: 0 !important;
  padding: 0 !important;
}

.home-image-slider .bx-wrapper {
  border: none !important;
  background: var(--s5-dark) !important;
  box-shadow: 0 4px 30px rgba(253, 200, 47, 0.12) !important;
  position: relative !important;
}

.home-slide-main-container {
  position: relative !important;
}

/* Darken slide images for text contrast + gold glow (Figma pattern) */
.home-slide-image-container::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 25% 70%, rgba(253, 200, 47, 0.15) 0%, transparent 55%),
    linear-gradient(
      to right,
      rgba(17, 17, 17, 0.7) 0%,
      rgba(17, 17, 17, 0.4) 40%,
      rgba(17, 17, 17, 0.1) 75%,
      rgba(17, 17, 17, 0) 100%
    ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Gold glow accent at bottom of hero (Figma warm glow) */
.home-slide-image-container::before {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--s5-gold) 0%, var(--s5-gold-dark) 50%, var(--s5-gold) 100%) !important;
  z-index: 3 !important;
  box-shadow: 0 0 20px 4px rgba(253, 200, 47, 0.35), 0 0 60px 10px rgba(253, 200, 47, 0.15) !important;
}

.home-slide-image-container {
  position: relative !important;
}


/* Slide caption — Figma style: large title with gold first line */
.home-slide-caption-container {
  z-index: 2 !important;
}

.home-slide-caption {
  background: transparent !important;
  max-width: 520px !important;
}

.home-slide-caption-title {
  color: var(--s5-white) !important;
  font-size: 52px !important;
  font-weight: var(--s5-font-weight-black) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
  margin-bottom: 16px !important;
  line-height: 1.05 !important;
}

/* Figma: first line of caption in gold (CSS-only approximation) */
.home-slide-caption-title::first-line {
  color: var(--s5-gold) !important;
}

.home-slide-caption p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 17px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important;
  margin-bottom: 32px !important;
  font-weight: var(--s5-font-weight-normal) !important;
  line-height: 1.65;
  max-width: 440px !important;
}

/* CTA Button — Gold filled, Figma style */
.home-slide-caption-button {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: 2px solid var(--s5-gold) !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
  display: inline-block !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.home-slide-caption-button:hover {
  background-color: var(--s5-gold-dark) !important;
  border-color: var(--s5-gold-dark) !important;
  color: var(--s5-black) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(253, 200, 47, 0.35) !important;
}

/* Carousel controls — Figma: subtle, refined arrows */
.home-gallery-prev-icon,
.home-gallery-next-icon {
  color: var(--s5-white) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  text-align: center !important;
  transition: all var(--s5-transition) !important;
  backdrop-filter: blur(4px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 18px !important;
}

.home-gallery-prev-icon:hover,
.home-gallery-next-icon:hover {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
}

/* Carousel pager dots — Figma: rounded pill for active, dots for rest */
.bx-pager-link {
  background-color: rgba(255, 255, 255, 0.35) !important;
  transition: all var(--s5-transition) !important;
  border-radius: 10px !important;
}

.bx-pager-link.active {
  background-color: var(--s5-gold) !important;
  width: 24px !important;
  border-radius: 10px !important;
}

.bx-pager-link:hover {
  background-color: var(--s5-gold) !important;
}

/* --------------------------------------------------------------------------
   5. INFO BLOCKS (Category cards) — text overlaid on image per base CSS structure
   Base CSS: cell is 250px, image is z-index:-1 full-size bg,
   content-container is height:100% transparent flex overlay with centered text
   -------------------------------------------------------------------------- */
.home-infoblock-container {
  background-color: var(--s5-white) !important;
  padding: var(--s5-spacing-xl) 0 !important;
}

.home-infoblock-list {
  gap: var(--s5-spacing-md) !important;
}

.home-infoblock-cell {
  border-radius: var(--s5-radius-md) !important;
  overflow: hidden !important;
  transition: all var(--s5-transition-slow) !important;
  border: 1px solid transparent !important;
}

.home-infoblock-cell:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(253, 200, 47, 0.15) !important;
  border-color: var(--s5-gold) !important;
}

.home-infoblock-cell-link {
  text-decoration: none !important;
  background-color: var(--s5-black) !important;
}

/* Content container: keep transparent overlay, add dark gradient for text legibility */
.home-infoblock-content-container {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.15) 100%
  ) !important;
  transition: background var(--s5-transition) !important;
  border-left: none !important;
}

h4.home-infoblock-title,
.home-infoblock-content .home-infoblock-title,
.home-infoblock-title {
  color: var(--s5-white) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  font-style: italic !important;
  transition: color var(--s5-transition) !important;
}

.home-infoblock-cell:hover .home-infoblock-content-container {
  background: linear-gradient(
    to top,
    rgba(253, 200, 47, 0.9) 0%,
    rgba(253, 200, 47, 0.3) 50%,
    rgba(0, 0, 0, 0.1) 100%
  ) !important;
}

.home-infoblock-cell:hover h4.home-infoblock-title,
.home-infoblock-cell:hover .home-infoblock-title {
  color: var(--s5-black) !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. FREETEXT / "ABOUT" SECTION — Figma content card style
   -------------------------------------------------------------------------- */
.home-freetext-container {
  background-color: var(--s5-off-white) !important;
  padding: 64px 15px !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 48px auto !important;
  border-radius: var(--s5-radius-md) !important;
}

.home-freetext-title {
  color: var(--s5-black) !important;
  font-size: 34px !important;
  font-weight: var(--s5-font-weight-normal) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* Bold specific words pattern from Figma — "Behind The Threads" */
.home-freetext-title strong,
.home-freetext-title b {
  font-weight: var(--s5-font-weight-black) !important;
}

.home-freetext-subtitle {
  color: var(--s5-gray-mid) !important;
  font-size: 16px !important;
  font-weight: var(--s5-font-weight-normal) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.home-freetext-divider {
  border: none !important;
  height: 3px !important;
  width: 50px !important;
  background-color: var(--s5-gold) !important;
  margin: var(--s5-spacing-lg) auto !important;
  border-radius: 2px !important;
}

.home-freetext-text {
  color: var(--s5-gray-dark) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 640px !important;
  margin: 0 auto var(--s5-spacing-lg) !important;
}

.home-freetext-link {
  display: inline-block !important;
  background-color: var(--s5-black) !important;
  color: var(--s5-white) !important;
  padding: 14px 28px !important;
  font-size: 13px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
  border: 2px solid var(--s5-black) !important;
}

.home-freetext-link:hover {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border-color: var(--s5-gold) !important;
  box-shadow: var(--s5-shadow-gold) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   7. BUTTONS — Modern S-5! Button System (nav v4 aligned)
   -------------------------------------------------------------------------- */

/* Primary Button (Gold — CTA style from nav v4)
   NOTE: Do NOT include button[type="submit"] here — it's too broad and
   overrides compact button styles on category cards and product pages.
   Instead, we use more specific selectors for those contexts. */
.btn-primary,
.btn-default,
input[type="submit"] {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: 2px solid var(--s5-gold) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 28px !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
  font-size: 14px !important;
}

/* Gold styling for submit buttons, but NOT the padding/font-size
   (those get set contextually for cards vs product page)
   NOTE: .cart-add-to-cart-button is a WRAPPER DIV, not the button itself.
   Styling it creates a "button inside a button" visual. Only style the actual button. */
button[type="submit"] {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: 2px solid var(--s5-gold) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
}

/* Ensure .cart-add-to-cart-button wrapper div is invisible (not styled as a button) */
.cart-add-to-cart-button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-default:hover,
input[type="submit"]:hover {
  background-color: var(--s5-gold-dark) !important;
  border-color: var(--s5-gold-dark) !important;
  color: var(--s5-black) !important;
  box-shadow: var(--s5-shadow-gold) !important;
  transform: translateY(-1px) !important;
}

/* Generic submit/cart button hover — NO transform to avoid
   overriding card/product compact button positioning */
button[type="submit"]:hover,
.cart-add-to-cart-button-button:hover {
  background-color: var(--s5-gold-dark) !important;
  border-color: var(--s5-gold-dark) !important;
  color: var(--s5-black) !important;
}

/* Secondary Button — Gold outlined (Figma tier 2) */
.btn-secondary,
.btn-expanded {
  background-color: transparent !important;
  color: var(--s5-gold) !important;
  border: 2px solid var(--s5-gold) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 28px !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
  font-size: 14px !important;
}

.btn-secondary:hover,
.btn-expanded:hover {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border-color: var(--s5-gold) !important;
  box-shadow: var(--s5-shadow-gold) !important;
}

/* Tertiary Button — Black outlined (Figma tier 3) */
.product-details-full-add-to-wishlist-button,
.btn-outline {
  background-color: transparent !important;
  color: var(--s5-black) !important;
  border: 2px solid var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 28px !important;
  border-radius: var(--s5-radius-sm) !important;
  transition: all var(--s5-transition) !important;
  font-size: 14px !important;
}

.product-details-full-add-to-wishlist-button:hover,
.btn-outline:hover {
  background-color: var(--s5-black) !important;
  color: var(--s5-white) !important;
  border-color: var(--s5-black) !important;
}

/* --------------------------------------------------------------------------
   8. FOOTER — Dark footer with gold accents
   -------------------------------------------------------------------------- */
.shopping-layout-footer {
  background-color: var(--s5-charcoal) !important;
  color: var(--s5-gray-light) !important;
  position: relative !important;
}

/* Gold accent line at top of footer */
.shopping-layout-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 10%, var(--s5-gold) 35%, var(--s5-gold) 65%, transparent 90%) !important;
  opacity: 0.5 !important;
}

/* Back to top */
.global-views-back-to-top {
  background-color: var(--s5-black) !important;
  border-bottom: 1px solid var(--s5-border) !important;
}

.global-views-back-to-top a {
  color: var(--s5-gray-300) !important;
  font-family: var(--s5-font-primary) !important;
  font-size: 12px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: color var(--s5-transition) !important;
}

.global-views-back-to-top a:hover {
  color: var(--s5-gold) !important;
}

.global-views-back-to-top-icon {
  color: var(--s5-gold) !important;
}

/* Footer content area — dark */
.footer-content {
  background-color: var(--s5-charcoal) !important;
}

.footer-content-middle-section-container {
  background-color: var(--s5-charcoal) !important;
  padding: 48px 0 36px !important;
  border-bottom: 1px solid var(--s5-border) !important;
}

.footer-content-middle-section {
  background-color: transparent !important;
}

/* Footer logo */
.footer-content-social .header-logo-image {
  max-height: 45px !important;
}

.footer-content-social {
  margin-bottom: 16px !important;
}

/* Phone/contact info in footer */
.footer-content-social p,
.footer-content-social span {
  color: var(--s5-gray-300) !important;
  font-size: 13px !important;
}

/* Social icons — simple inline icons */
.footer-content-social-list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  list-style: none !important;
}

.footer-content-social-link {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color var(--s5-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}

.footer-content-social-link:hover {
  color: var(--s5-gold) !important;
  background-color: transparent !important;
  border: none !important;
  transform: none !important;
}

.footer-content-social-icon {
  color: inherit !important;
  font-size: 15px !important;
}

/* Footer column headings — gold with left bracket accent */
.footer-column-heading {
  font-family: var(--s5-font-primary) !important;
  color: var(--s5-gold) !important;
  font-size: 13px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: var(--s5-spacing-md) !important;
  padding-bottom: 0 !important;
  padding-left: 10px !important;
  border-bottom: none !important;
  border-left: 3px solid var(--s5-gold) !important;
}

/* Footer links — regular weight */
.footer-column-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  font-weight: var(--s5-font-weight-normal) !important;
  transition: color var(--s5-transition) !important;
  text-decoration: none !important;
  display: block !important;
  padding: 5px 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
}

.footer-column-link:hover {
  color: var(--s5-gold) !important;
  border-left: none !important;
  padding-left: 0 !important;
  background-color: transparent !important;
}

.footer-column-link-listitem {
  margin-bottom: 0 !important;
}

/* Footer bottom — dark */
.footer-content-bottom-section-container {
  background-color: var(--s5-dark) !important;
  border-top: 1px solid var(--s5-border) !important;
  padding: var(--s5-spacing-md) 0 !important;
}

.footer-content-copyright {
  color: var(--s5-gray-300) !important;
  font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   9. PRODUCT CARDS / ITEM CELLS — gold border hover (nav v4 sol-card pattern)
   -------------------------------------------------------------------------- */
/* Border on inner card only, NOT the outer cell span container */
.facets-items-collection-view-cell-span4,
.facets-items-collection-view-cell-span3,
.facets-items-collection-view-cell-span6 {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.facets-item-cell-grid,
.facets-item-cell-list {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.facets-item-cell-grid:hover,
.facets-item-cell-list:hover {
  border-color: #ccc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
}

/* Product name links — underlined like target design */
.facets-item-cell-grid .item-cell-item-title a,
.item-cell-item-title a {
  color: var(--s5-black) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  transition: color var(--s5-transition) !important;
  line-height: 1.35 !important;
}

.facets-item-cell-grid .item-cell-item-title a:hover,
.item-cell-item-title a:hover {
  color: var(--s5-gold-dark) !important;
}

/* Prices */
.item-views-price .item-views-price-lead,
.product-views-price-lead {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
}

/* --------------------------------------------------------------------------
   10. BREADCRUMBS
   -------------------------------------------------------------------------- */
.shopping-layout-breadcrumb {
  background-color: var(--s5-off-white) !important;
  border-bottom: 1px solid var(--s5-gray-border) !important;
  padding: 12px 0 !important;
}

.global-views-breadcrumb a {
  color: var(--s5-gray-mid) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color var(--s5-transition) !important;
}

.global-views-breadcrumb a:hover {
  color: var(--s5-gold) !important;
}

.global-views-breadcrumb .active {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
}

/* --------------------------------------------------------------------------
   11. FORMS & INPUTS — gold focus ring (nav v4 pattern)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control {
  border: 1px solid var(--s5-gray-border) !important;
  border-radius: var(--s5-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--s5-black) !important;
  transition: border-color var(--s5-transition), box-shadow var(--s5-transition) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--s5-gold) !important;
  box-shadow: 0 0 0 3px var(--s5-gold-glow) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   12. CART
   -------------------------------------------------------------------------- */
.cart-lines,
.cart-detailed {
  border-color: var(--s5-gray-border) !important;
}

.cart-summary {
  background-color: var(--s5-off-white) !important;
  border: 1px solid var(--s5-gray-border) !important;
  border-radius: var(--s5-radius-md) !important;
}

.cart-summary-button-container .btn-primary {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   13. NOTIFICATION / MESSAGE STYLES
   -------------------------------------------------------------------------- */
.global-views-message-info,
.global-views-message {
  border-radius: var(--s5-radius-md) !important;
  font-size: 14px !important;
}

.global-views-message-success {
  background-color: #e8f5e9 !important;
  border-color: #4caf50 !important;
  color: #2e7d32 !important;
}

.global-views-message-error {
  background-color: #ffebee !important;
  border-color: #f44336 !important;
  color: #c62828 !important;
}

.global-views-message-warning {
  background-color: var(--s5-gold-light) !important;
  border-color: var(--s5-gold) !important;
  color: #8b6914 !important;
}

/* --------------------------------------------------------------------------
   14. PAGINATION
   -------------------------------------------------------------------------- */
.global-views-pagination a,
.global-views-pagination-links a {
  color: var(--s5-black) !important;
  border: 1px solid var(--s5-gray-border) !important;
  border-radius: var(--s5-radius-sm) !important;
  padding: 8px 14px !important;
  transition: all var(--s5-transition) !important;
}

.global-views-pagination a:hover,
.global-views-pagination-links a:hover {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border-color: var(--s5-gold) !important;
}

.global-views-pagination .active a,
.global-views-pagination-links .active a {
  background-color: var(--s5-black) !important;
  color: var(--s5-white) !important;
  border-color: var(--s5-black) !important;
}

/* --------------------------------------------------------------------------
   15. STAR RATINGS
   -------------------------------------------------------------------------- */
.global-views-star-rating-filled {
  color: var(--s5-gold) !important;
}

.global-views-star-rating-empty {
  color: var(--s5-gray-border) !important;
}

/* --------------------------------------------------------------------------
   16. FIGMA DESIGN PATTERNS — Testimonials, Stats, Content Cards
   -------------------------------------------------------------------------- */

/* Testimonial / quote cards (Figma pattern: white card, subtle shadow, rounded) */
.testimonial,
.merchandising-zone .testimonial,
[class*="testimonial"] {
  background-color: var(--s5-white) !important;
  border-radius: var(--s5-radius-md) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 32px !important;
  position: relative !important;
}

.testimonial .testimonial-header,
.testimonial .testimonial-content-title {
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  font-size: 16px !important;
}

.testimonial .testimonial-content-paragraph {
  color: var(--s5-gray-dark) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-style: italic !important;
}

/* Quote mark accent */
.testimonial::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 16px !important;
  left: 24px !important;
  font-size: 48px !important;
  color: var(--s5-gold) !important;
  opacity: 0.3 !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
}

/* Featured product CCT — Figma ribbon/badge style */
.featuredproductcct-layout .ribbon {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
}

/* Logo list / certification bar (Figma: "CERTIFIED & AUDITED BY") */
.logolistcct-container,
[class*="logolist"] {
  background-color: var(--s5-white) !important;
  padding: 40px 0 !important;
  text-align: center !important;
}

h3.logolistcct-header {
  color: var(--s5-gray-mid) !important;
  font-size: 12px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 24px !important;
}

/* CMS content areas — general styling for Figma patterns */
.content-banner {
  font-family: var(--s5-font-primary) !important;
}

/* Merchandizing zone — card grid styling */
.home-merchandizing-zone {
  padding: var(--s5-spacing-xl) 0 !important;
}

/* "Read the article" / "Read case study" link style (Figma pattern) */
a[class*="read-more"],
a[class*="readmore"],
.cms-landing-page a {
  color: var(--s5-black) !important;
  font-size: 12px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color var(--s5-transition) !important;
}

a[class*="read-more"]:hover,
a[class*="readmore"]:hover {
  color: var(--s5-gold) !important;
}

/* --------------------------------------------------------------------------
   17. MISC / POLISH
   -------------------------------------------------------------------------- */

/* Loading indicator */
.global-loading-indicator {
  display: none !important;
}

/* Selection color */
::selection {
  background: var(--s5-gold) !important;
  color: var(--s5-black) !important;
}

::-moz-selection {
  background: var(--s5-gold) !important;
  color: var(--s5-black) !important;
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--s5-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--s5-gray-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--s5-gray-mid);
}

/* Ensure no remnant Barlow font */
.wf-barlowsemicondensed-n2-active *,
.wf-barlowsemicondensed-n3-active *,
.wf-barlowsemicondensed-n4-active *,
.wf-barlowsemicondensed-n6-active *,
.wf-barlowsemicondensed-n8-active *,
.wf-barlowsemicondensed-i8-active * {
  font-family: var(--s5-font-primary) !important;
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .home-slide-caption-title {
    font-size: 36px !important;
  }

  .home-slide-caption p {
    font-size: 16px !important;
  }

  .home-slide-caption-button {
    padding: 13px 24px !important;
    font-size: 13px !important;
  }

  .home-freetext-title {
    font-size: 28px !important;
  }
}

@media (max-width: 767px) {
  .home-slide-caption-title {
    font-size: 26px !important;
  }

  .home-slide-caption p {
    font-size: 14px !important;
  }

  .home-slide-caption-button {
    padding: 12px 20px !important;
    font-size: 12px !important;
  }

  .home-freetext-title {
    font-size: 24px !important;
  }

  .home-freetext-text {
    font-size: 14px !important;
  }

  .header-menu-level1 li a,
  .header-menu-level1-anchor {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  .footer-column-heading {
    font-size: 13px !important;
  }

  .home-freetext-container {
    padding: var(--s5-spacing-xl) 15px !important;
  }
}

/* ==========================================================================
   17. CATEGORY / BROWSE PAGE — Match target design (5-col grid, clean cards)
   ========================================================================== */

/* --- HIDE SIDEBAR: target design is full-width with no facet sidebar --- */
.facets-facet-browse-facets-sidebar,
.facets-facet-browse-facets,
[data-view="Facets.FacetedNavigation"],
[data-view="Facets.CategorySidebar"] {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Make the items/results area full-width (no sidebar offset) --- */
.facets-facet-browse-items,
.facets-facet-browse-results,
.facets-facet-browse-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Override any bootstrap grid columns on browse content */
.facets-facet-browse-content > .col-sm-8,
.facets-facet-browse-content > .col-md-9,
.facets-facet-browse-content > .col-lg-9,
.facets-facet-browse-content > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin-left: 0 !important;
}

/* Ensure browse-content uses flex full-width */
.facets-facet-browse {
  display: block !important;
}

.facets-facet-browse > .row,
.facets-facet-browse-content.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

/* --- HIDE LIST HEADER CONTROLS (Show/Sort/View) --- */
.facets-facet-browse-list-header,
.facets-facet-browse-list-header-actions,
[data-view="Facets.ItemListSortSelector"],
[data-view="Facets.ItemListShowSelector"],
[data-view="Facets.ItemListDisplaySelector"] {
  display: none !important;
}

/* --- HIDE the "59 Products" h1 — it's NOT the category name --- */
h1.facets-facet-browse-title,
.facets-facet-browse-header > h1.facets-facet-browse-title {
  display: none !important;
}

/* The actual category name is inside .facets-browse-category-heading-main-description h1 */
.facets-browse-category-heading-main-description h1 {
  font-family: var(--s5-font-primary) !important;
  font-size: 32px !important;
  font-weight: var(--s5-font-weight-black) !important;
  color: var(--s5-black) !important;
  text-transform: none !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

/* --- HIDE BREADCRUMBS on category and product pages --- */
.shopping-layout:has(.facets-facet-browse) .shopping-layout-breadcrumb,
.shopping-layout:has(.product-details-full) .shopping-layout-breadcrumb {
  display: none !important;
}

/* --- Category heading area — bold title + gold subtitle --- */
.facets-facet-browse-header {
  padding: 24px 0 0 !important;
  margin-bottom: 0 !important;
}

.facets-browse-category-heading-list-header {
  padding: 0 !important;
  margin-bottom: 12px !important;
}

.facets-facet-browse-title {
  font-family: var(--s5-font-primary) !important;
  font-size: 32px !important;
  font-weight: var(--s5-font-weight-black) !important;
  color: var(--s5-black) !important;
  text-transform: none !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

/* Category subtitle link — gold underlined */
.facets-browse-category-heading-main-description {
  margin-bottom: 16px !important;
}

.facets-browse-category-heading-main-description a {
  color: var(--s5-gold-dark) !important;
  text-decoration: underline !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* --- "X Products" count --- hide it, target doesn't show it */
.facets-faceted-navigation-results {
  display: none !important;
}

/* --- Product grid ---
   SuiteCommerce renders MULTIPLE .facets-items-collection-view-row divs,
   each containing 4 .facets-items-collection-view-cell-span3 children.
   At responsive widths, this causes 3+1 orphan patterns.
   FIX: Flatten ALL rows with display:contents so individual cards become
   direct grid children of the parent container. The grid is placed on
   .facets-facet-browse-items instead. --- */

/* Parent container becomes the grid */
.facets-facet-browse-items,
[data-view="Facets.Items"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 220px)) !important;
  gap: 16px !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 !important;
}

/* Flatten each row so its children participate in the parent grid */
.facets-items-collection-view-row {
  display: contents !important;
}

/* Clearfix pseudo-elements — hide them (display:contents makes them irrelevant
   but some browsers still render them) */
.facets-items-collection-view-row::before,
.facets-items-collection-view-row::after {
  display: none !important;
  content: none !important;
}

/* Also hide clearfix on parent */
.facets-facet-browse-items::before,
.facets-facet-browse-items::after,
[data-view="Facets.Items"]::before,
[data-view="Facets.Items"]::after {
  display: none !important;
  content: none !important;
}

/* Reset child cells — remove bootstrap col widths/floats */
.facets-items-collection-view-row > div,
div.facets-items-collection-view-cell-span3,
div.facets-items-collection-view-cell-span4,
div.facets-items-collection-view-cell-span6 {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

/* =================================================================
   BUTTON SIZE OVERRIDES — SINGLE AUTHORITATIVE BLOCK
   (All duplicate button rules below this have been removed)
   ================================================================= */

/* --- Category card: ADD TO CART button container --- */
.facets-item-cell-grid .cart-add-to-cart-button-container,
.facets-item-cell-grid [data-view="AddToCart"],
.facets-item-cell-grid .cart-add-to-cart-button {
  margin-top: 0 !important;
  padding: 0 8px 3px 8px !important;
  text-align: center !important;
  max-height: none !important;
  overflow: visible !important;
  zoom: 1 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Category card: ADD TO CART button itself --- */
.facets-item-cell-grid .cart-add-to-cart-button-button,
.facets-item-cell-grid button.cart-add-to-cart-button-button,
.facets-item-cell-grid button[type="submit"].cart-add-to-cart-button-button,
.facets-item-cell-grid button[type="submit"],
.facets-item-cell-grid button[data-type="add-to-cart"],
.cart-quickaddtocart button[type="submit"],
.cart-quickaddtocart .cart-add-to-cart-button-button {
  width: auto !important;
  max-width: 110px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: 28px !important;
  max-height: 28px !important;
  border-radius: 0 !important;
  border: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  cursor: pointer !important;
  transition: background-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
  transform: none !important;
  box-shadow: none !important;
}

.facets-item-cell-grid .cart-add-to-cart-button-button:hover,
.facets-item-cell-grid button[type="submit"]:hover {
  background-color: var(--s5-gold-dark) !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* --- Product page: ADD TO CART button (max specificity) --- */
.product-details-full .product-details-full-actions .cart-add-to-cart-button-container .cart-add-to-cart-button button.cart-add-to-cart-button-button,
.product-details-full .product-details-full-actions button[type="submit"].cart-add-to-cart-button-button,
.product-details-full .product-details-full-actions-container button[type="submit"],
.product-details-full-actions .cart-add-to-cart-button-button,
.product-details-full-actions button[data-type="add-to-cart"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: 140px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  font-size: 11px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: 34px !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transform: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.product-details-full-actions .cart-add-to-cart-button-button:hover,
.product-details-full-actions button[type="submit"]:hover {
  background-color: var(--s5-gold-dark) !important;
  transform: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- Product page: constrain containers too --- */
.product-details-full-actions .cart-add-to-cart-button-container,
.product-details-full-actions [data-view="AddToCart"],
.product-details-full-actions .cart-add-to-cart-button,
.product-details-full-actions [data-view="MainActionView"] {
  max-height: none !important;
  overflow: visible !important;
  zoom: 1 !important;
  width: auto !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.product-details-full-actions-container {
  width: auto !important;
}

/* --- Product cards — clean bordered cards with drop shadow --- */
.facets-item-cell-grid {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background-color: #f0f0f0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.facets-item-cell-grid:hover {
  border-color: #ccc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
}

/* Product card image — larger image area at top */
.facets-item-cell-grid-image-wrapper,
.facets-item-cell-grid .facets-item-cell-grid-image-wrapper {
  background-color: #efefef !important;
  text-align: center !important;
  padding: 12px 10px 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border-bottom: none !important;
}

.facets-item-cell-grid-image-wrapper img,
.facets-item-cell-grid .facets-item-cell-grid-link-image img {
  max-height: 150px !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Hide quick view overlay on cards */
.facets-item-cell-grid-quick-view-wrapper {
  display: none !important;
}

/* Card details area — compact below image, centered */
.facets-item-cell-grid-details {
  padding: 2px 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 0 !important;
  align-items: center !important;
  text-align: center !important;
}

/* Product card title — centered underlined link */
.facets-item-cell-grid-title,
.facets-item-cell-grid-title a {
  font-family: var(--s5-font-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--s5-black) !important;
  text-decoration: underline !important;
  line-height: 1.3 !important;
  margin: 0 0 2px !important;
  text-align: center !important;
}

.facets-item-cell-grid-title a:hover {
  color: var(--s5-gold-dark) !important;
}

/* Product card price — ensure visible, collapse when empty */
.facets-item-cell-grid-price,
.facets-item-cell-grid .product-views-price,
.facets-item-cell-grid .cart-quickaddtocart-price,
.facets-item-cell-grid .cart-quickaddtocart-price .product-views-price {
  display: block !important;
  margin: 0 0 2px !important;
  visibility: visible !important;
}

/* Collapse the price/form container when price is empty */
.facets-item-cell-grid-price:empty,
.facets-item-cell-grid .product-views-price:empty {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.facets-item-cell-grid .product-views-price-lead,
.facets-item-cell-grid .cart-quickaddtocart-price .product-views-price-lead {
  font-size: 14px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  color: var(--s5-black) !important;
  display: inline !important;
}

/* Product card stock message */
.facets-item-cell-grid-stock {
  font-size: 11px !important;
  color: var(--s5-gray-600) !important;
}

/* (Card button styles consolidated into SINGLE AUTHORITATIVE BLOCK above) */

/* Out of Stock badge — compact */
.facets-item-cell-grid .product-line-stock-msg-out,
.facets-item-cell-grid [class*="stock-msg"] {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

/* Shared quantity selector styling (product page + category cards)
   Target design: rectangular [-][0][+] with flat gray +/- buttons, white center */
.product-details-quantity-container,
.transaction-line-views-quantity-amount {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #ccc !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background-color: #fff !important;
}

.product-details-quantity-remove,
.product-details-quantity-add,
.transaction-line-views-quantity-amount button,
.product-details-quantity-container button {
  background-color: #e8e8e8 !important;
  border: none !important;
  color: #333 !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.product-details-quantity-remove:hover,
.product-details-quantity-add:hover,
.transaction-line-views-quantity-amount button:hover,
.product-details-quantity-container button:hover {
  background-color: #d5d5d5 !important;
  color: var(--s5-black) !important;
}

.product-details-quantity-value,
.transaction-line-views-quantity-amount input {
  width: 40px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
  height: 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background-color: #fff !important;
  -moz-appearance: textfield !important;
}

.product-details-quantity-value::-webkit-inner-spin-button,
.product-details-quantity-value::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   18. PRODUCT DETAIL PAGE — Match target design
   ========================================================================== */

/* --- Main layout: two-column, info LEFT, image RIGHT --- */
/* Gray background extends full width of screen.
   Base CSS (Bootstrap container) adds: margin: 0 auto; width: 750px/970px/1170px;
   padding: 0 15px. We override ALL of these. */
.product-details-full {
  padding: 28px 0 !important;
  background-color: #f2f2f2 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Content stays centered. Base CSS adds margin-top:25px — override it. */
.product-details-full-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  min-height: 0 !important;
  height: auto !important;
}

.product-details-full-main-content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
  align-items: flex-start !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* Swap sides: image (DOM "left") → visual right, info (DOM "right") → visual left */
.product-details-full-main-content-left {
  order: 2 !important;
  flex: 1 1 48% !important;
  min-width: 300px !important;
  padding: 0 !important;
}

.product-details-full-main-content-right {
  order: 1 !important;
  flex: 1 1 44% !important;
  min-width: 280px !important;
  padding: 0 !important;
}

/* Remove any default divider between columns */
.product-details-full-divider {
  display: none !important;
}

/* --- Product title --- match category view title size (32px) */
.product-details-full-content-header-title {
  font-family: var(--s5-font-primary) !important;
  font-size: 32px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  color: var(--s5-black) !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* Ensure the header wrapper aligns title with content below */
.product-details-full-content-header {
  padding: 0 !important;
  margin: 0 0 4px !important;
  max-width: none !important;
  width: 100% !important;
}

/* Remove any SuiteCommerce default indentation on title row */
.product-details-full-content-header .row,
.product-details-full-content-header [class*="col-"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  left: 0 !important;
  position: relative !important;
}

/* Align title with the info column (right column = order 1) */
.product-details-full-content-header-title {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* --- Ensure ALL elements inside product page align left --- */
/* Kill Bootstrap .row/.col-* padding at every depth */
.product-details-full .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.product-details-full [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.product-details-full .container,
.product-details-full .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* --- FIELD ALIGNMENT FIX ---
   The base SuiteCommerce CSS applies padding:15px via Bootstrap col-* selectors
   to .product-details-full-main-content-right, .product-details-full-main, etc.
   Also .product-details-options-selector gets padding:15px/20px from base CSS.
   We need to nuke ALL left padding/margin on every wrapper in the chain.
   Using both specific selectors AND a wildcard descendant to catch everything. */

/* Nuclear reset: ALL wrapper descendants of the right column lose left padding.
   Exclude form controls (input, select, textarea, button) which need internal padding. */
/* Nuclear reset on the entire right column — kill ALL padding/margin from Bootstrap
   so fields, descriptions, price all start at the same left edge as the title. */
.product-details-full-main-content-right {
  padding: 0 !important;
  margin: 0 !important;
}
.product-details-full-main-content-right > div,
.product-details-full-main-content-right > div > div,
.product-details-full-main-content-right > div > form,
.product-details-full-main-content-right > div > div > div,
.product-details-full-main-content-right > div > form > section,
.product-details-full-main-content-right > div > form > section > div,
.product-details-full-main-content-right > div > form > section > div > div,
.product-details-full-main-content-right > div > form > section > div > div > div,
.product-details-full-main-content-right > div > form > section > div > div > div > div,
.product-details-full-main-content-right section,
.product-details-full-main-content-right form {
  padding-left: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Named selectors for maximum specificity */
.product-details-full .product-details-full-main-content-right,
.product-details-full .product-details-full-main,
.product-details-full .product-details-full-main > form,
.product-details-full #product-details-full-form,
.product-details-full .product-details-full-info,
.product-details-full .product-details-full-banner-summary-bottom,
.product-details-full section[data-view="Product.Options"],
.product-details-full .product-details-options-selector,
.product-details-full .product-details-options-selector > div,
.product-details-full .product-details-options-selector-option-container,
.product-details-full .product-views-option-text,
.product-details-full .product-views-option-float,
.product-details-full [data-validation="control-group"],
.product-details-full [data-validation="control"],
.product-details-full section[data-view="Quantity"],
.product-details-full .product-details-quantity-options {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Also reset the base CSS padding shorthand (padding: 15px / 20px)
   on .product-details-options-selector by setting all sides explicitly */
.product-details-options-selector {
  padding: 0 !important;
}

/* Reset padding shorthand on .product-details-full-main (Bootstrap col padding) */
.product-details-full .product-details-full-main {
  padding: 0 !important;
}

/* Description section flush left with title and fields */
.product-details-information-content,
.product-details-information-content > *,
.product-details-information-tab-content-panel,
.product-details-information-tab-content-container {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Space between add-to-cart and the description/info section */
.product-details-information-content {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* --- Price --- */
.product-details-full-main .product-views-price,
.product-details-full-info .product-views-price {
  margin: 0 0 16px !important;
}

.product-details-full-main .product-views-price-lead,
.product-details-full-info .product-views-price-lead,
.product-details-full .product-views-price-lead {
  font-size: 22px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  color: var(--s5-black) !important;
}

/* --- SKU --- */
.product-line-sku-container {
  margin: 8px 0 12px !important;
  font-size: 13px !important;
  color: var(--s5-gray-600) !important;
}

.product-line-sku-label {
  font-weight: 600 !important;
}

/* --- Product description text --- */
.product-details-full-main .product-details-full-description,
.product-details-full-info .product-details-full-description {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #444 !important;
  margin-bottom: 20px !important;
}

/* --- HIDE "Add to Wishlist" / "Add to Quote" — target doesn't show them --- */
.product-details-full-actions-quotes-whishlist,
.product-details-full-actions-addtowishlist,
.product-details-full-actions-addtoquote,
.product-detail-to-quote-add-to-quote,
.product-list-control-button-wishlist {
  display: none !important;
}

/* --- HIDE social sharing on product --- */
.product-details-full-social-sharing,
.social-sharing-flyout-hover-icons,
[data-view="SocialSharing.Flyout"] {
  display: none !important;
}

/* --- HIDE star rating if empty --- */
.product-details-full-rating:empty,
.product-details-full-rating:not(:has(.star-rating-filled)) {
  display: none !important;
}

/* --- Quantity options --- */
.product-details-quantity-options {
  margin: 16px 0 !important;
}

.product-details-quantity-options-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--s5-black) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* --- Custom product options (text fields etc.) --- */
.product-details-options-selector-option-container {
  margin-bottom: 16px !important;
}

.product-views-option-text-label,
.product-views-option-float-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--s5-black) !important;
  margin-bottom: 4px !important;
}

.product-views-option-text-input,
.product-views-option-float-input {
  border: 1px solid #d0d0d0 !important;
  border-radius: 2px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
}

.product-views-option-text-input:focus,
.product-views-option-float-input:focus {
  border-color: var(--s5-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(253, 200, 47, 0.2) !important;
}

/* --- Add to Cart actions area --- */
.product-details-full-actions {
  margin-top: 16px !important;
  display: block !important;
  width: 100% !important;
}

.product-details-full-actions-container {
  display: block !important;
  width: 100% !important;
}

/* (Product page button styles consolidated into SINGLE AUTHORITATIVE BLOCK above) */

/* --- Image gallery --- */
.product-details-image-gallery {
  text-align: center !important;
}

.product-details-image-gallery-detailed-image {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #fafafa !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.product-details-image-gallery-detailed-image img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Image gallery thumbnails */
.product-details-image-gallery-container .bx-wrapper {
  margin-top: 16px !important;
}

.product-details-image-gallery-container .bx-wrapper .bx-pager-item,
.product-details-image-gallery-container .bx-wrapper li {
  display: inline-block !important;
  margin-right: 8px !important;
}

.product-details-image-gallery-container .bx-wrapper .bx-pager-item img,
.product-details-image-gallery-container .bx-wrapper li img {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 6px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
  cursor: pointer !important;
  transition: border-color 0.15s !important;
}

.product-details-image-gallery-container .bx-wrapper .bx-pager-item img:hover,
.product-details-image-gallery-container .bx-wrapper li img:hover {
  border-color: var(--s5-gold) !important;
}

/* --- Collapsible/Accordion sections (Description, Product features, etc.) --- */
/* Styled as clean accordion panels matching the target design */
.product-details-information-content {
  margin-top: 20px !important;
  border-top: 1px solid #ddd !important;
  padding-top: 0 !important;
  max-width: 600px !important;
}

/* HIDE the pusher button (mobile-style accordion trigger showing on desktop) */
button.product-details-information-pusher,
.product-details-information-pusher,
.product-details-information-content > button,
.product-details-information-content > .product-details-information-pusher,
[data-type="sc-pusher"].product-details-information-pusher {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* HIDE the pusher hint text (shows product name next to "Description") */
.product-details-information-hint,
p.product-details-information-hint {
  display: none !important;
}

/* HIDE the tab list navigation — show content directly */
.product-details-information-content-tabs,
ul.product-details-information-content-tabs,
[role="tablist"].product-details-information-content-tabs,
.product-details-information-content-container [role="tablist"],
.product-details-information-tab-title {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* HIDE pusher-header "Back" links inside content panels */
.product-details-information-tab-content-panel .sc-pusher-header,
.product-details-information-tab-content-panel .sc-pusher-header-back,
.sc-pusher-header,
.sc-pusher-header-back {
  display: none !important;
}

/* Show all tab content panels (not just active) */
.product-details-information-tab-content-panel {
  display: block !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  margin-bottom: 0 !important;
}

.product-details-information-tab-content-panel:last-child {
  border-bottom: none !important;
}

/* Description heading — clean section style */
.product-details-information-tab-content-panel-title {
  font-family: var(--s5-font-primary) !important;
  font-size: 18px !important;
  font-weight: var(--s5-font-weight-bold) !important;
  color: var(--s5-black) !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--s5-gold) !important;
  display: inline-block !important;
}

/* Description content text */
.product-details-information-tab-content-container {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #444 !important;
  padding-top: 4px !important;
}

/* --- Collapse empty product sections to prevent white space ---
   SuiteCommerce includes empty containers for reviews, related items,
   correlated items, banner areas etc. that can create gaps. */
.product-details-full-content-related-items:empty,
.product-details-full-content-correlated-items:empty,
.product-details-full-divider-desktop,
.product-details-full-divider,
[data-view="ProductReviews.Center"]:empty,
.content-banner:empty,
.banner-content-top:empty,
.banner-content-bottom:empty,
.banner-details-bottom:empty,
.product-details-full-banner-top:empty,
.product-details-full-banner-top-details:empty,
.product-details-full-banner-summary-bottom:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Also collapse any CMS areas with no content */
.product-details-full [data-cms-area]:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Quantity pricing table --- */
.quantity-pricing {
  margin: 12px 0 !important;
}

.quantity-pricing-expander-head-toggle {
  color: var(--s5-gold-dark) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.quantity-pricing-expander-head-toggle:hover {
  text-decoration: underline !important;
}

.quantity-pricing-expander-body {
  margin-top: 8px !important;
}

.quantity-pricing-table-header-quantity,
.quantity-pricing-table-header-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  background-color: var(--s5-off-white) !important;
}

/* --- Category pagination / "Load Next Page" — centered --- */
/* DOM structure (from saved HTML):
   .facets-facet-browse-pagination[data-view="GlobalViews.Pagination"]
     > div
       > .col-md-9.col-md-offset-3.infinite-scroll-ctrl-bottom
         > .infinite-scroll-btn-holder.arrow-down
           > a.infinite-scroll-btn-load-page[data-action="load-pages"]
               > p "Load Next Page"
               > i.icon-chevron-down
   KEY ISSUE: .col-md-offset-3 adds margin-left:25%, .col-md-9 limits width to 75%.
   Both must be killed for true centering. */

/* Pagination wrapper */
.facets-facet-browse-pagination,
.global-views-pagination,
[data-view="GlobalViews.Pagination"] {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  clear: both !important;
  margin-top: 16px !important;
}

/* Kill the Bootstrap grid offset and width on the inner container */
.facets-facet-browse-pagination .col-md-offset-3,
.facets-facet-browse-pagination .col-md-9,
.facets-facet-browse-pagination [class*="col-"],
.infinite-scroll-ctrl-bottom {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  text-align: center !important;
}

/* The button holder */
.infinite-scroll-btn-holder {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* The actual load-page link */
a.infinite-scroll-btn-load-page,
a[data-action="load-pages"] {
  display: inline-block !important;
  text-align: center !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Standard pagination links */
.global-views-pagination ul,
.global-views-pagination-links,
.global-views-pagination-links-list {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  padding-left: 0 !important;
  list-style: none !important;
}

/* --- Login page: ALL action buttons consistent size --- */
.login-register .login-register-login-submit,
.login-register .login-register-register-submit,
.login-register .login-register-login-sso-btn,
.login-register a.login-register-login-sso-btn,
.login-register button.login-register-login-sso-btn,
.login-register .btn-primary,
.login-register .btn-default,
.login-register button[type="submit"],
.login-register input[type="submit"] {
  background-color: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: 2px solid var(--s5-gold) !important;
  font-weight: var(--s5-font-weight-bold) !important;
  font-size: 14px !important;
  padding: 14px 28px !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--s5-radius-sm) !important;
  width: 100% !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
}

.login-register .login-register-login-sso-btn:hover,
.login-register a.login-register-login-sso-btn:hover,
.login-register .login-register-login-submit:hover,
.login-register .login-register-register-submit:hover,
.login-register .btn-primary:hover,
.login-register button[type="submit"]:hover {
  background-color: var(--s5-gold-dark) !important;
  border-color: var(--s5-gold-dark) !important;
  color: var(--s5-black) !important;
}

/* ==========================================================================
   RESPONSIVE: Category grid + Product page adjustments
   ========================================================================== */
@media (max-width: 992px) {
  /* Tablet: use auto-fill so grid adapts to available width naturally.
     Cards are min 160px, max 220px. The grid will fit 2-4 columns
     depending on viewport width without orphan cards.
     NOTE: Target the PARENT (.facets-facet-browse-items) because
     .facets-items-collection-view-row has display:contents. */
  .facets-facet-browse-items,
  [data-view="Facets.Items"] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 220px)) !important;
    justify-content: center !important;
  }

  /* Product page: stack columns on tablet */
  .product-details-full-main-content-left,
  .product-details-full-main-content-right {
    flex: 1 1 100% !important;
    order: unset !important;
    min-width: 100% !important;
  }

  /* --- HEADER: undo the display:contents flattening --- */
  /* At tablet and below, the flattened single-line header breaks.
     Restore SuiteCommerce's default block/flex mobile header. */
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) {
    display: block !important;
    padding: 0 !important;
    position: relative !important;
    flex-wrap: wrap !important;
  }

  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) > div {
    display: block !important;
  }

  /* Restore <section> elements */
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) section {
    display: block !important;
  }

  /* Re-materialize the main wrapper as a sticky flex row.
     position:sticky keeps the full header bar visible on scroll,
     replacing the base CSS's .fixed-header-mobile approach that
     floats only the hamburger + cart as individual fixed elements. */
  .header-main-wrapper,
  .header-main-wrapper.header-main-wrapper-standalone {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background-color: var(--s5-black) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
  }

  /* Override base .fixed-header-mobile rules that detach hamburger + cart
     as individual fixed-position elements. With sticky header, they stay
     inside the bar. */
  .fixed-header-mobile .shopping-layout-header .header-sidebar-toggle,
  .fixed-header-mobile .myaccount-layout-header .header-sidebar-toggle,
  .fixed-header-mobile .checkout-layout-header .header-sidebar-toggle {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    border-bottom: none !important;
    margin-left: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .fixed-header-mobile .shopping-layout-header .header-mini-cart-menu-cart-link,
  .fixed-header-mobile .myaccount-layout-header .header-mini-cart-menu-cart-link,
  .fixed-header-mobile .checkout-layout-header .header-mini-cart-menu-cart-link {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
  }

  .fixed-header-mobile .shopping-layout-header .header-mini-cart-menu-cart-link i,
  .fixed-header-mobile .myaccount-layout-header .header-mini-cart-menu-cart-link i,
  .fixed-header-mobile .checkout-layout-header .header-mini-cart-menu-cart-link i {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  .header-main-nav {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Show mobile hamburger */
  .header-sidebar-toggle-wrapper {
    display: flex !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  .header-sidebar-toggle-wrapper a,
  .header-sidebar-toggle-wrapper button {
    color: var(--s5-white) !important;
    font-size: 24px !important;
    padding: 4px 8px !important;
  }

  /* Hide the DESKTOP logo wrapper on mobile — it sits after .header-content
     in the DOM, making it impossible to center properly between hamburger and cart */
  .header-logo-wrapper {
    display: none !important;
  }

  /* Show the MOBILE logo wrapper — it's correctly positioned in the DOM
     between .header-sidebar-toggle-wrapper and .header-content */
  .header-logo-mobile-wrapper {
    display: flex !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 8px !important;
    min-width: 0 !important;
  }

  /* Mobile logo image — centered and larger */
  .header-logo-mobile-wrapper .header-logo-image {
    max-height: 50px !important;
    min-height: 36px !important;
    height: auto !important;
    width: auto !important;
    max-width: 180px !important;
  }

  .header-logo-mobile-wrapper .header-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Restore header-content as a flex row for cart — pushed to far right edge */
  .header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  /* Cart icon sizing on mobile */
  .header-mini-cart-menu-cart-link {
    padding: 4px 0 !important;
  }

  .header-mini-cart-menu-cart-icon {
    font-size: 22px !important;
  }

  /* --- MOBILE SIDEBAR: .header-secondary-wrapper is the sidebar panel ---
     On desktop it uses display:contents to flatten into the header flex row.
     On mobile it becomes the off-screen sidebar that slides in from the left
     when the hamburger is clicked (parent gets .header-sidebar-opened class +
     transform: translate(246px, 0) to reveal this panel).
     DO NOT hide it — restyle it as the sidebar panel. */
  .header-secondary-wrapper {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 0 !important;
    left: -246px !important;
    width: 246px !important;
    height: fit-content !important;
    background-color: #fff !important;
    z-index: 1000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    border-right: 1px solid #ddd !important;
    padding-top: 0px !important;
  }
  .header-secondary-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  /* Undo display:contents on the inner .header-menu */
  .header-secondary-wrapper .header-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* CRITICAL: the base CSS sets .header-menu-secondary-nav to width:750px / 970px
     via Bootstrap container rules — WAY wider than the 246px sidebar.
     Also has margin:auto centering and 15px side padding. All must be overridden. */
  .header-menu-secondary-nav {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Reset overflow on sidebar descendants to prevent nested scrollbars.
     EXCEPTION: .header-sidebar-menu-wrapper MUST keep overflow:hidden
     for the SuiteCommerce pusher mechanism (push/pop sub-menu panels). */
  .header-secondary-wrapper *,
  .header-secondary-wrapper .header-menu,
  .header-secondary-wrapper nav,
  .header-secondary-wrapper ul,
  .header-secondary-wrapper li,
  .header-secondary-wrapper div {
    overflow: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The sidebar menu wrapper: let content flow naturally.
     Override any JS-set inline height from the transition mechanism.
     Base CSS sets overflow:hidden + JS sets inline height for push animations,
     which constrains visible content. Force both to auto/visible.
     SPECIFICITY: must use .header-secondary-wrapper prefix (0,2,0) to beat
     the blanket .header-secondary-wrapper div rule (0,1,1). */
  .header-secondary-wrapper .header-sidebar-menu-wrapper {
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* The actual menu UL — base CSS sets overflow:hidden and JS may set
     inline height during transitions. Force auto to show all items.
     SPECIFICITY: .header-secondary-wrapper prefix (0,2,1) beats blanket (0,1,1). */
  .header-secondary-wrapper ul.header-sidebar-menu {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Force ALL direct menu items visible — base CSS hides them with
     .header-sidebar-menu li { display: none } and only shows them via
     .header-sidebar-menu-opened > ul > li { display: block }.
     High specificity prefix ensures we beat all base rules. */
  .header-secondary-wrapper .header-sidebar-menu-opened > ul.header-sidebar-menu > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Keep nested sub-menu li items hidden — they show via pusher mechanism */
  .header-secondary-wrapper .header-sidebar-menu-opened > ul.header-sidebar-menu > li > ul > li {
    display: none !important;
  }
  /* But show them when their parent is the active "flyer" (pushed panel) */
  .header-secondary-wrapper .header-sidebar-menu-flyer > li {
    display: block !important;
  }

  /* Sidebar inner wrapper: scrollable with hidden scrollbar for long menus.
     SPECIFICITY: .header-secondary-wrapper prefix (0,2,0) beats blanket
     .header-secondary-wrapper div rule (0,1,1) which would otherwise force
     overflow:visible on this div element. */
  .header-secondary-wrapper .header-sidebar-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .header-secondary-wrapper .header-sidebar-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  /* Ensure .header-menu fills the sidebar (flex item in column flex) */
  .header-secondary-wrapper .header-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Kill Bootstrap ::before / ::after clearfix pseudo-elements that can add height */
  .header-menu-secondary-nav::before,
  .header-menu-secondary-nav::after,
  .header-secondary-wrapper .header-menu::before,
  .header-secondary-wrapper .header-menu::after {
    display: none !important;
  }

  /* Style the nav list as a vertical menu */
  .header-secondary-wrapper .header-menu-level1 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background-color: transparent !important;
    order: unset !important;
  }

  .header-secondary-wrapper .header-menu-level1 > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* Sidebar menu link styling — dark text on white bg */
  .header-secondary-wrapper .header-menu-level1 > li > a,
  .header-secondary-wrapper .header-menu-level1-anchor,
  .header-secondary-wrapper .header-menu-home-anchor,
  .header-secondary-wrapper .header-menu-shop-anchor,
  .header-secondary-wrapper a {
    color: var(--s5-black) !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
    display: block !important;
    border-bottom: 1px solid #eee !important;
    background-color: transparent !important;
    white-space: normal !important;
    text-decoration: none !important;
  }

  .header-secondary-wrapper a:hover,
  .header-secondary-wrapper a:focus {
    color: var(--s5-gold-dark) !important;
    background-color: #f5f5f5 !important;
  }

  /* Submenu (level 2) */
  .header-secondary-wrapper .header-menu-level-container,
  .header-secondary-wrapper .header-menu-level2 {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background-color: #f9f9f9 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-secondary-wrapper .header-menu-level2 > li > a,
  .header-secondary-wrapper .header-menu-level2-anchor {
    color: var(--s5-black) !important;
    font-size: 14px !important;
    padding: 12px 20px 12px 32px !important;
    display: block !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Force all text/spans inside sidebar to be dark */
  .header-secondary-wrapper *,
  .header-secondary-wrapper span,
  .header-secondary-wrapper div,
  .header-secondary-wrapper label {
    color: var(--s5-black) !important;
  }

  /* Override the desktop header white text rules for sidebar items */
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-secondary-wrapper a,
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-secondary-wrapper span {
    color: var(--s5-black) !important;
  }

  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-secondary-wrapper a:hover,
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header) .header-secondary-wrapper a:focus {
    color: var(--s5-gold-dark) !important;
  }

  /* Hide the search inside the sidebar (we have mobile search in the header) */
  .header-secondary-wrapper .header-menu-search {
    display: none !important;
  }

  /* Hide the desktop search wrapper (separate from sidebar) */
  .header-search-wrapper,
  .header-site-search.search-desktop {
    display: none !important;
  }

  /* Hide desktop profile/subheader links that scatter */
  .header-subheader,
  .header-subheader-container {
    display: none !important;
  }

  /* Show mobile cart icon */
  .header-mobile-menu-cart {
    display: flex !important;
    align-items: center !important;
  }

  .header-mobile-menu-cart a {
    color: var(--s5-white) !important;
    font-size: 20px !important;
  }

  /* Show mobile search bar below header */
  .header-site-search.search-mobile {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    background-color: var(--s5-black) !important;
    box-sizing: border-box !important;
  }

  /* Style the mobile search input */
  .header-site-search.search-mobile input,
  .header-site-search.search-mobile .itemssearcher-input,
  .header-site-search.search-mobile .tt-input {
    width: 100% !important;
    padding: 10px 16px 10px 36px !important;
    font-size: 14px !important;
    border: 1px solid var(--s5-gray-400) !important;
    border-radius: var(--s5-radius-sm) !important;
    background-color: #fff !important;
    color: var(--s5-black) !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  /* Search icon inside mobile search */
  .header-site-search.search-mobile .site-search-button,
  .header-site-search.search-mobile button[type="submit"] {
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--s5-gray-600) !important;
    z-index: 2 !important;
  }

  /* Ensure mobile search container is relative for icon positioning */
  .header-site-search.search-mobile .site-search,
  .header-site-search.search-mobile form {
    position: relative !important;
    width: 100% !important;
  }

  /* Hide the reset button that creates the odd extra element */
  .header-site-search.search-mobile .site-search-input-reset {
    display: none !important;
  }

  /* Hide the desktop-only elements that scatter at this width */
  .header-menu-quick-order,
  .header-profile-menu-login-container,
  .header-profile-login-link,
  .header-profile-register-link {
    display: none !important;
  }

  /* --- SIDEBAR SLIDE MECHANISM ---
     When hamburger is clicked, .header-sidebar-opened is added to the
     header layout element. This sets position:fixed + transform:translate(246px,0)
     to slide the page right, revealing .header-secondary-wrapper (positioned
     at left: -246px). Our header rule sets position:relative — we need an
     exception when .header-sidebar-opened is active. */
  :is(.shopping-layout-header, .checkout-layout-header, .myaccount-layout-header).header-sidebar-opened {
    position: fixed !important;
    height: 100% !important;
    width: 100% !important;
    transform: translate(246px, 0) !important;
    -webkit-transform: translate(246px, 0) !important;
  }

  /* Sidebar overlay — must sit ABOVE the sticky header (z-index:1030)
     so clicks on the overlay can close the sidebar. */
  .header-sidebar-overlay {
    z-index: 1040 !important;
  }

  /* When sidebar is open, undo sticky on header-main-wrapper.
     position:sticky doesn't work inside a position:fixed parent anyway,
     and the sticky z-index (1030) would block the overlay (closing). */
  .header-sidebar-opened .header-main-wrapper,
  .header-sidebar-opened .header-main-wrapper.header-main-wrapper-standalone {
    position: relative !important;
    z-index: auto !important;
  }

  /* --- USER DROPDOWN FIX ---
     Profile dropdown: ensure readable colors */
  .header-menu-profile-dropdown,
  .header-menu-myaccount-container,
  .header-menu-myaccount-list,
  .header-menu-myaccount {
    background-color: #fff !important;
    color: var(--s5-black) !important;
  }

  .header-menu-myaccount a,
  .header-menu-myaccount-list a,
  .header-menu-profile-dropdown a {
    color: var(--s5-black) !important;
  }

  /* --- ADD-TO-CART: un-fix on mobile ---
     The BASE CSS has this exact rule at max-width:991px:
       .product-details-full-content .cart-add-to-cart-button {
         position: fixed; bottom: 0; left: 0; z-index: 99; width: 100%;
       }
     We must override it with matching or higher specificity. */
  .product-details-full-content .cart-add-to-cart-button {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Also hide the cloned sticky bar */
  .sticky-button-container-clone,
  .sticky-button-container-clone.sticked {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Kill fixed positioning on the validation error bar too (base CSS fixes it to bottom:58px) */
  .product-details-options-selector [data-validation-error=block] {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    width: auto !important;
    left: auto !important;
  }

  /* Ensure all add-to-cart wrappers stay in flow */
  .product-details-full-actions,
  .product-details-full-actions-container,
  .product-details-full .cart-add-to-cart-button-container,
  .cart-add-to-cart-button-container-sticky,
  [data-type="sticky"].sticked {
    position: static !important;
    bottom: auto !important;
    width: auto !important;
  }

  /* --- USER MENU: mobile sidebar uses the SuiteCommerce pusher mechanism ---
     All "hide back/push/pop" rules are now scoped to the desktop dropdown
     (.header-profile-menu-myaccount-container), so the mobile sidebar's
     My Account section (inside .header-sidebar-menu-myaccount) uses
     the native push/pop navigation without interference.
     Below: styling for the mobile sidebar's My Account elements. */

  /* My Account items: full width, single column in sidebar */
  .header-menu-myaccount-item-level2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  /* Section headings — make them look clickable (they trigger push-menu) */
  .header-menu-myaccount-span-level2 {
    display: block !important;
    padding: 15px !important;
    font-weight: 400 !important;
    color: #626362 !important;
    border-bottom: 1px solid #c8c8c8 !important;
    cursor: pointer !important;
  }

  /* Sub-item links inside pushed panels */
  .header-menu-myaccount-anchor-level3 {
    padding: 15px !important;
    display: block !important;
    color: #626362 !important;
    border-bottom: 1px solid #c8c8c8 !important;
  }

  /* Product title: ensure it doesn't clip on mobile */
  .product-details-full-content-header-title {
    padding: 0 4px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Product page: prevent content from being cut off by overflow */
  .product-details-full,
  .product-details-full-content {
    overflow-x: hidden !important;
  }

  /* --- SCROLL HEADER FIX ---
     Prevent the minimal floating-icons header on scroll */
  .header-main-wrapper[data-header-scroll],
  .header-main-wrapper.header-scrolled,
  .header-main-wrapper.header-minimized {
    padding: 10px 16px !important;
    background-color: var(--s5-black) !important;
  }

  /* Ensure mobile logo stays visible during scroll */
  .header-main-wrapper[data-header-scroll] .header-logo-mobile-wrapper,
  .header-main-wrapper.header-scrolled .header-logo-mobile-wrapper,
  .header-main-wrapper.header-minimized .header-logo-mobile-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-main-wrapper[data-header-scroll] .header-logo-mobile-wrapper .header-logo-image,
  .header-main-wrapper.header-scrolled .header-logo-mobile-wrapper .header-logo-image,
  .header-main-wrapper.header-minimized .header-logo-mobile-wrapper .header-logo-image {
    max-height: 40px !important;
  }

  /* --- WHITE SPACE FIX — kill min-height: 100% on layout chain ---
     Base CSS sets min-height: 100% on html, body, .main, .layout-container,
     .shopping-layout, forcing the page to fill the viewport even when content
     is shorter. This creates large white gaps on product pages. */
  .shopping-layout,
  .checkout-layout,
  .myaccount-layout {
    min-height: 0 !important;
    height: auto !important;
  }

  .main,
  .layout-container,
  #main,
  [role="main"] {
    min-height: 0 !important;
    height: auto !important;
  }

  .shopping-layout-content,
  .checkout-layout-content,
  .myaccount-layout-content {
    min-height: 0 !important;
    height: auto !important;
  }

  /* --- FOOTER: improved mobile layout --- */
  .footer-content-middle-section-container {
    flex-direction: column !important;
  }

  .footer-content-middle-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Social section — centered with spacing */
  .footer-content-social {
    text-align: center !important;
    padding: 0 0 24px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .footer-content-social .header-logo-image {
    max-height: 50px !important;
    margin-bottom: 12px !important;
  }

  .footer-content-social-list {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 16px auto 0 !important;
  }

  .footer-content-social-list li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-content-social-link {
    width: 32px !important;
    height: 32px !important;
  }

  .footer-content-social-icon {
    font-size: 18px !important;
  }

  /* Footer columns — 2x2 grid with proper spacing */
  .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-column-links {
    text-align: center !important;
  }

  .footer-column-links ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .footer-column-heading {
    font-size: 13px !important;
    text-align: center !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid var(--s5-gold) !important;
    padding-bottom: 6px !important;
    display: inline-block !important;
  }

  .footer-column-link-listitem {
    text-align: center !important;
  }

  .footer-column-link {
    padding: 6px 0 !important;
    font-size: 13px !important;
  }

  /* Footer bottom copyright */
  .footer-content-bottom-section-container {
    text-align: center !important;
    padding: 16px 20px !important;
  }

  .footer-content-copyright {
    font-size: 12px !important;
  }

  /* Product page content padding for mobile — equal left/right margins */
  .product-details-full-content {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .product-details-full {
    padding: 16px 16px !important;
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure the product main-content wrapper respects parent padding */
  .product-details-full-main-content {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-details-full-main-content-left,
  .product-details-full-main-content-right {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* Product header (title) — equal padding */
  .product-details-full-header {
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  /* Description section: full width on mobile */
  .product-details-information-content {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Product info section below add-to-cart — proper spacing */
  .product-details-information-content-container {
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Target the PARENT because rows have display:contents */
  .facets-facet-browse-items,
  [data-view="Facets.Items"] {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  .facets-browse-category-heading-main-description h1 {
    font-size: 24px !important;
  }

  .product-details-full-content-header-title {
    font-size: 20px !important;
  }

  .product-details-full .product-views-price-lead {
    font-size: 18px !important;
  }
}