/**
 * ============================================================================
 * SAB001 (Sabora) skin on the Simplex theme
 * ============================================================================
 * Typography: Montserrat 300-600 (headings, nav, buttons) + Lato (body) - Google Fonts
 * Palette: rose #8c3b4a (accent) / blush #f7e9e7 (soft surfaces) / ink #231f20 (text, dark surfaces)
 * Shop-specific layout rules live in the SAB001 block at the end of mobile-shop-overrides.css;
 * this file only carries token VALUES (it renders FIRST, see Head.cshtml).
 */
/*
1. CASE 1: Dark/Black Background Color Scheme (Lines 178-216)

  Purpose: Header, footer, navigation menus, dark sections

  Color Variables Added:
  - Text: --dark-bg-text-primary (white), --dark-bg-text-secondary (light grey), --dark-bg-text-muted (muted grey)
  - Links: --dark-bg-text-link (light gold), --dark-bg-text-link-hover (brighter gold)
  - Buttons: Primary (gold bg/black text), Secondary (transparent/white border)
  - Icons: Default (light grey), Active (light gold), Hover (gold)
  - Borders: Subtle grey borders with gold focus states
  - Effects: White overlay hover, transparent overlays

  Key Principle: Light text on dark backgrounds with luxury gold accents

  2. CASE 2: Gold Background Color Scheme (Lines 218-256)

  Purpose: CTAs, promotional banners, featured products, highlight sections

  Color Variables Added:
  - Text: --gold-bg-text-primary (black), --gold-bg-text-secondary (dark grey), --gold-bg-text-muted (medium grey)
  - Links: --gold-bg-text-link (burgundy), --gold-bg-text-link-hover (dark burgundy)
  - Buttons: Primary (black bg/light gold text), Secondary (transparent/black border)
  - Icons: Default (medium grey), Active (black), Hover (grey-black)
  - Borders: Darker gold borders with black focus states
  - Effects: Dark overlay hover, subtle dark overlays
 */

/* ============================================================================
 * 1. CSS VARIABLES & ROOT DEFINITIONS
 * ============================================================================ */

:root {
  /* ============================================================================
   * LUXURY WIGS THEME - COMPLETE COLOR SYSTEM
   * ============================================================================
   * Primary: Luxury Gold (brand, CTAs)
   * Accent: Burgundy Red (secondary actions, errors)
   * Neutrals: Grey-Black scale (text, backgrounds)
   * Semantic: Green (success), Blue (info), Red (error), Gold (warning)
   * ========================================================================= */
  /* Primary Typography - SAB001: Montserrat for headings / nav / buttons */
  --font-primary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-content: "Lato", "Helvetica Neue", Arial, sans-serif; /* body copy */
  /* UI Typography - body face (Lato) for forms and running text */
  --font-ui: var(--font-content);
  --font-default: var(--font-ui); /* Backward compatibility - UI elements */
  --font-medium: var(--font-primary); /* Backward compatibility - headers */
  /* Font Sizes - Optimized for modern sans-serif */
  --text-base-content: 15px; /* Lato body text (optimal readability) */
  --text-base-ui: 14px; /* UI elements (optimal density) */
  --text-base: var(--text-base-ui); /* Default for backward compatibility */
  /* Font Weights (applied to both families) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* COMPONENTS */
  /* 0: the SAB001 rose utility bar runs edge to edge; the header rows size
     their own content width (mobile-shop-overrides.css, SAB001 block) */
  --header-padding: 0;
  --header-menu-padding: 0;
  --radius-full: 30px;
  --transition-base: 250ms ease-in-out;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  /* ---------------------------------------------------------------------------
   * SAB001 PALETTE (user decision 2026-09-29, v1 "A")
   * rose = point colour (fills, CTAs, active states), blush = soft surfaces
   * (newsletter band, cards), ink = text and dark surfaces (footer)
   * --------------------------------------------------------------------------- */
  --sab-rose: #8c3b4a; /* white text on it 7.4:1 */
  --sab-rose-dark: #6e2a39; /* hover / pressed */
  --sab-blush: #f7e9e7; /* ink text on it 13.8:1, rose text 6.3:1 */
  --sab-ink: #231f20; /* white text on it 16.3:1 */
  --sab-line: #efe1de; /* hairlines on white */
  --sab-muted-on-ink: #d9cfcd; /* secondary text on the ink footer (10.7:1) */
  /* ---------------------------------------------------------------------------
   * BLACK FAMILY - Primary Brand Color (SAB001: ink)
   * Use: Primary buttons, brand elements, main CTAs, text, logo
   * --------------------------------------------------------------------------- */
  --black: #231f20;
  --black-dark: #1b1718;
  --black-darker: #141112;
  --black-light: #3d3638;
  --black-lighter: #5c5456;
  /* Legacy aliases for compatibility */
  --primary: #231f20;
  --primary-rgb: 35, 31, 32;
  --primary-dark: #1b1718;
  --primary-darker: #141112;
  --primary-light: #3d3638;
  --primary-lighter: #5c5456;
  /* ---------------------------------------------------------------------------
   * ACCENT FAMILY - SAB001 rose (token names kept from the red base theme)
   * Use: Accent buttons, alert states, CTAs, energy/action elements
   * --------------------------------------------------------------------------- */
  --rd-accent-red: #8c3b4a;
  --rd-accent-red-dark: #7a3240;
  --rd-accent-red-darker: #6e2a39;
  --rd-accent-red-light: #a8596a;
  --rd-accent-red-lighter: #c98f9b;
  /* #8c3b4a already passes WCAG AA as body text (7.4:1 on white, 6.3:1 on blush),
     so text usages share the fill colour. */
  --rd-accent-red-text: #8c3b4a;
  /* Legacy aliases for compatibility */
  --rd-burgundy: #8c3b4a;
  --rd-burgundy-dark: #7a3240;
  --rd-burgundy-darker: #6e2a39;
  --rd-burgundy-light: #a8596a;
  /* ---------------------------------------------------------------------------
   * GOLD FAMILY - referenced by the warning / sidebar / brand-button tokens
   * below but never defined by the base theme (silent fallback). SAB001 maps
   * it onto the rose scale so those consumers stay on-brand.
   * --------------------------------------------------------------------------- */
  --gold: #8c3b4a;
  --gold-dark: #7a3240;
  --gold-darker: #6e2a39;
  --gold-light: #c98f9b;
  --gold-lighter: #f7e9e7;
  /* ---------------------------------------------------------------------------
   * GREY-BLACK SCALE - Neutral Colors
   * Use: Text, backgrounds, borders, disabled states
   * --------------------------------------------------------------------------- */
  --black: #231f20;
  --grey-black: #343a40;
  --grey-800: #202020;
  --grey-700: #333333;
  --grey-600: #4a4a4a;
  --grey-500: #666666;
  --grey-400: #999999;
  --grey-300: #bbbbbb;
  --grey-200: #dddddd;
  --grey-100: #e6e6e6;
  --grey-50: #f4f4f4;
  --white: #ffffff;
  /* Legacy neutral aliases */
  --neutral-800: #202020;
  --neutral-500: #666666;
  --neutral-400: #999999;
  --neutral-100: #dddddd;
  --neutral-90: #e6e6e6;
  --neutral-50: #f4f4f4;
  /* ---------------------------------------------------------------------------
   * GREEN FAMILY - Success Color
   * Use: Success messages, confirmations, positive feedback, complete states
   * --------------------------------------------------------------------------- */
  --green: #4a7c59;
  --green-dark: #3a6347;
  --green-light: #6b9d7a;
  /* ---------------------------------------------------------------------------
   * BLUE FAMILY - Info Color
   * Use: Info messages, links (alternative), trust badges, notifications
   * --------------------------------------------------------------------------- */
  --blue: #2c5f7c;
  --blue-dark: #1f4559;
  --blue-light: #4a8ba8;
  /* ---------------------------------------------------------------------------
   * SEMANTIC COLORS - Component States
   * Use: Consistent semantic meaning across all components
   * --------------------------------------------------------------------------- */
  --color-success: var(--green);
  --color-success-dark: var(--green-dark);
  --color-success-light: var(--green-light);
  --color-error: var(--rd-burgundy);
  --color-error-dark: var(--rd-burgundy-dark);
  --color-error-light: var(--rd-burgundy-light);
  --color-warning: var(--gold);
  --color-warning-dark: var(--gold-dark);
  --color-warning-light: var(--gold-light);
  --color-info: var(--blue);
  --color-info-dark: var(--blue-dark);
  --color-info-light: var(--blue-light);
  /* ---------------------------------------------------------------------------
   * TEXT COLORS - Modern Minimalist Hierarchy
   * Primary: Black (brand, text, professional)
   * Accent: Red (CTAs, highlights, action elements)
   * --------------------------------------------------------------------------- */
  --text-primary: var(--black); /* #000000 - Primary brand text */
  --text-default: var(--grey-black); /* #202020 - Default body text */
  --text-secondary: var(--grey-500); /* #666666 - Secondary text */
  --text-gray: #5c5456; /* SAB001 muted ink (7.3:1 on white) - .header-menu colour, was undefined */
  --text-tertiary: var(--grey-400); /* #999999 - Tertiary text */
  --text-muted: var(--grey-400); /* #999999 - Muted text */
  --text-disabled: var(--grey-300); /* #bbbbbb - Disabled text */

  --text-brand: var(--black); /* #000000 - Brand emphasis */
  --text-accent: var(--rd-accent-red); /* #da000b - Accent highlights */
  --text-hover: var(--black-light); /* #333333 - Interactive hover */

  --text-link: var(--black); /* #000000 - Link text */
  --text-link-hover: var(--rd-accent-red); /* #da000b - Link hover */

  --text-black: var(--black); /* #000000 - Pure black */
  --text-white: var(--white); /* #ffffff - Pure white */

  --text-success: var(--green-dark); /* #3a6347 - Success state */
  --text-error: var(--rd-burgundy-dark); /* #6f2f39 - Error state */
  --text-warning: var(--gold-darker); /* #c08810 - Warning state */
  --text-info: var(--blue-dark); /* #1f4559 - Info state */
  /* ---------------------------------------------------------------------------
   * BACKGROUND COLORS - Modern Minimalist Hierarchy
   * Primary: Black (main buttons, brand elements)
   * Secondary: Red (accent, CTAs)
   * Backgrounds: White/neutral for product focus
   * --------------------------------------------------------------------------- */
  --bg-primary: var(--rd-accent-red); /* SAB001: primary CTA fill (checkout) = rose */
  --bg-default: var(--grey-500); /* #202020 - Default dark background */
  --bg-secondary: var(--grey-800); /* #202020 - Secondary background */
  --bg-tertiary: var(--grey-700); /* #333333 - Tertiary background */

  --bg-brand: var(--sab-blush); /* SAB001: brand band (newsletter) = blush */
  --bg-hover: var(--grey-100); /* #eeeeee - Interactive hover (light grey) */

  --bg-white: var(--white); /* #ffffff - Pure white */
  --bg-black: var(--black); /* #000000 - Pure black */
  --bg-light: var(--grey-50); /* #f4f4f4 - Light background */
  --bg-dark: var(--grey-black); /* #343a40!important  - Dark background */

  --bg-header: var(
    --bg-white
  ); /* #ffffff - Clean white header (ltjdenim.com style) */
  --bg-header-menu: var(--bg-white); /* #ffffff - White navigation menu */
  --bg-footer: var(--bg-black); /* SAB001: ink footer */

  --bg-success: var(--green-light); /* #6b9d7a - Success background */
  --bg-error: var(--rd-burgundy-light); /* #c58a92 - Error background */
  --bg-warning: var(--gold-lighter); /* #f5d085 - Warning background */
  --bg-info: var(--blue-light); /* #4a8ba8 - Info background */
  /* ---------------------------------------------------------------------------
   * BORDER COLORS - Modern Minimalist Hierarchy
   * Primary: Black (focus, active, brand elements)
   * Accent: Red (highlights, CTAs)
   * --------------------------------------------------------------------------- */
  --border-primary: var(--black); /* #000000 - Primary brand borders */
  --border-default: var(--grey-black); /* #202020 - Default borders */
  --border-secondary: var(--grey-600); /* #4a4a4a - Secondary borders */
  --border-tertiary: var(--grey-500); /* #666666 - Tertiary borders */

  --border-light: var(--grey-200); /* #dddddd - Light borders */
  --border-dark: var(--grey-800); /* #202020 - Dark borders */

  --border-brand: var(--black); /* #000000 - Brand borders */
  --border-focus: var(--rd-accent-red); /* #da000b - Focus state (red accent) */
  --border-hover: var(--black-light); /* #333333 - Hover state */

  --border-success: var(--green); /* #4a7c59 - Success borders */
  --border-error: var(--rd-burgundy); /* #8b4049 - Error borders */
  --border-warning: var(--gold); /* #ecb235 - Warning borders */
  --border-info: var(--blue); /* #2c5f7c - Info borders */
  /* ---------------------------------------------------------------------------
   * ICON COLORS - Modern Minimalist Hierarchy
   * Primary: Black (brand icons)
   * Accent: Red (active, interactive, hover states)
   * --------------------------------------------------------------------------- */
  --icon-primary: var(--black); /* #000000 - Primary brand icons */
  --icon-default: var(--grey-black); /* #202020 - Default icons */
  --icon-secondary: var(--grey-500); /* #666666 - Secondary icons */
  --icon-tertiary: var(--grey-400); /* #999999 - Tertiary icons */

  --icon-brand: var(--black); /* #000000 - Brand icons */
  --icon-active: var(--rd-accent-red); /* #da000b - Active state (red accent) */
  --icon-hover: var(--rd-accent-red); /* #da000b - Hover state (red accent) */
  --icon-disabled: var(--grey-300); /* #bbbbbb - Disabled state */

  --icon-success: var(--green); /* #4a7c59 - Success icons */
  --icon-error: var(--rd-burgundy); /* #8b4049 - Error icons */
  --icon-warning: var(--gold); /* #ecb235 - Warning icons */
  --icon-info: var(--blue); /* #2c5f7c - Info icons */
  /* ============================================================================
   * CONTEXTUAL COLOR SCHEMES - Dark & Gold Backgrounds
   * ============================================================================
   * CASE 1: Dark/Black Background (Header, Footer, Dark Sections)
   * CASE 2: Gold Background (CTAs, Promotional Banners, Highlights)
   * ========================================================================= */
  /* ---------------------------------------------------------------------------
   * CASE 1: LIGHT/WHITE BACKGROUND COLOR SCHEME
   * Use: Header, footer, navigation menus, main content areas
   * Contrast: WCAG AA compliant (4.5:1 minimum for normal text)
   * --------------------------------------------------------------------------- */
  /* Text colors on light backgrounds */
  --light-bg-text-primary: var(--black); /* #000000 - Primary text (black) */
  --light-bg-text-secondary: var(--grey-700); /* #333333 - Secondary text */
  --light-bg-text-muted: var(--grey-500); /* #666666 - Muted text */
  --light-bg-text-accent: var(--rd-accent-red); /* #da000b - Red accent text */
  --light-bg-text-link: var(--black); /* #000000 - Link text (black) */
  --light-bg-text-link-hover: var(
    --rd-accent-red
  ); /* #da000b - Link hover (red) */
  /* Button colors on light backgrounds */
  --light-bg-btn-primary-bg: var(--black); /* Black primary button */
  --light-bg-btn-primary-text: var(--white); /* White text on black */
  --light-bg-btn-primary-hover: var(--black-light); /* Dark grey hover */

  --light-bg-btn-secondary-bg: var(--rd-accent-red); /* Red secondary button */
  --light-bg-btn-secondary-text: var(--white); /* White text */
  --light-bg-btn-secondary-border: var(--rd-accent-red); /* Red border */
  --light-bg-btn-secondary-hover-bg: var(
    --rd-accent-red-dark
  ); /* Darker red hover */
  --light-bg-btn-secondary-hover-text: var(--white); /* White text hover */
  /* Icon colors on light backgrounds */
  --light-bg-icon-default: var(--grey-700); /* #333333 - Default icons */
  --light-bg-icon-active: var(--rd-accent-red); /* #da000b - Active icons */
  --light-bg-icon-hover: var(--rd-accent-red); /* #da000b - Icon hover */
  /* Border colors on light backgrounds */
  --light-bg-border-default: var(--grey-200); /* #dddddd - Subtle borders */
  --light-bg-border-light: var(--grey-100); /* #eeeeee - Lighter borders */
  --light-bg-border-focus: var(--rd-accent-red); /* #da000b - Focus state */
  /* Background variations on light base */
  --light-bg-overlay: rgba(0, 0, 0, 0.05); /* Light overlay */
  --light-bg-hover: rgba(0, 0, 0, 0.03); /* Subtle dark hover */
  --light-bg-active: rgba(0, 0, 0, 0.07); /* Active state */
  /* ---------------------------------------------------------------------------
   * CASE 2: GOLD BACKGROUND COLOR SCHEME
   * Use: CTAs, promotional banners, highlight sections, featured products
   * Contrast: WCAG AA compliant with dark text for readability
   * --------------------------------------------------------------------------- */
  /* Text colors on gold backgrounds */
  --gold-bg-text-primary: var(--black); /* #000000 - Primary text */
  --gold-bg-text-secondary: var(--grey-800); /* #202020 - Secondary text */
  --gold-bg-text-muted: var(--grey-600); /* #4a4a4a - Muted text */
  --gold-bg-text-accent: var(--rd-burgundy); /* #6f2f39 - Burgundy accent */
  --gold-bg-text-link: var(--rd-burgundy-light); /* #8b4049 - Link text */
  --gold-bg-text-link-hover: var(--rd-burgundy); /* #5e2832 - Link hover */
  /* Button colors on gold backgrounds */
  --gold-bg-btn-primary-bg: var(--black); /* Black primary button */
  --gold-bg-btn-primary-text: var(--gold-lighter); /* Light gold text */
  --gold-bg-btn-primary-hover: var(--grey-black); /* Grey-black hover */

  --gold-bg-btn-secondary-bg: transparent; /* Transparent secondary */
  --gold-bg-btn-secondary-text: var(--black); /* Black text */
  --gold-bg-btn-secondary-border: var(--black); /* Black border */
  --gold-bg-btn-secondary-hover-bg: var(--black); /* Black background hover */
  --gold-bg-btn-secondary-hover-text: var(--gold-lighter); /* Gold text hover */
  /* Icon colors on gold backgrounds */
  --gold-bg-icon-default: var(--grey-600); /* #4a4a4a - Default icons */
  --gold-bg-icon-active: var(--black); /* #000000 - Active icons */
  --gold-bg-icon-hover: var(--grey-black); /* #202020 - Icon hover */
  /* Border colors on gold backgrounds */
  --gold-bg-border-default: var(
    --gold-darker
  ); /* #c08810 - Darker gold borders */
  --gold-bg-border-light: var(--gold-dark); /* #d9a020 - Lighter borders */
  --gold-bg-border-focus: var(--black); /* #000000 - Focus state */
  /* Background variations on gold base */
  --gold-bg-overlay: rgba(236, 178, 53, 0.9); /* Gold overlay */
  --gold-bg-hover: rgba(0, 0, 0, 0.05); /* Subtle dark hover */
  --gold-bg-active: rgba(0, 0, 0, 0.1); /* Active state */
  /* ---------------------------------------------------------------------------
   * BUTTON COLORS - Modern Minimalist Hierarchy
   * Primary: Black (main CTAs, brand actions)
   * Secondary: Red (accent actions, highlights)
   * --------------------------------------------------------------------------- */
  /* Primary Buttons - Black */
  --btn-primary-bg: var(--black); /* #000000 - Primary button */
  --btn-primary-text: var(--white); /* #ffffff - White text on black */
  --btn-primary-hover-bg: var(--rd-accent-red-darker); /* SAB001: darker rose on hover */
  --btn-primary-hover-text: var(--white); /* #ffffff - Text on hover */
  --btn-primary-border: var(--black); /* #000000 - Border color */
  /* Default Buttons - Grey-black */
  --btn-default-bg: var(--grey-500); /* #202020 - Default button */
  --btn-default-text: var(--white); /* #ffffff - White text */
  --btn-default-hover-bg: var(--grey-500); /* #333333 - Hover state */
  --btn-default-hover-text: var(--white); /* #ffffff - Text on hover */
  --btn-default-border: var(--grey-black); /* #202020 - Border color */
  /* Secondary Buttons - Red Accent */
  --btn-secondary-bg: var(--rd-accent-red); /* #da000b - Red background */
  --btn-secondary-text: var(--white); /* #ffffff - White text */
  --btn-secondary-border: var(--rd-accent-red); /* #da000b - Red border */
  --btn-secondary-hover-bg: var(
    --rd-accent-red-dark
  ); /* #b00009 - Hover darker red */
  --btn-secondary-hover-text: var(--white); /* #ffffff - White on hover */
  /* Tertiary Buttons - Minimal styling */
  --btn-tertiary-bg: transparent; /* Transparent */
  --btn-tertiary-text: var(--grey-black); /* #202020 - Grey-black text */
  --btn-tertiary-hover-text: var(--gold); /* #ecb235 - Gold on hover */
  /* Brand Buttons - Same as primary for consistency */
  --btn-brand-bg: var(--gold); /* #ecb235 - Brand button */
  --btn-brand-text: var(--black); /* #000000 - Black text */
  --btn-brand-hover-bg: var(--gold-dark); /* #d9a020 - Hover state */
}

/* ============================================================================
 * 2. GLOBAL & TYPOGRAPHY STYLES
 * ============================================================================ */

/* Base Typography - Roboto Font */
body {
  font-family: var(--font-default);
  color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title.sub-title strong,
.title strong,
.newsletter-email strong {
  /* font-family: var(--font-medium); */
  font-family: var(--font-primary) !important;
  /* color: #111; */
}

input {
  font-family: var(--font-default);
}

a:focus,
a:hover {
  color: var(--text-link-hover) !important;
  text-decoration: dashed !important;
}

/* ============================================================================
 * 2.1  Content styling
 * ============================================================================ */

/* .ocarousel-grid .title,
.ocarousel-grid .title *,
.ocarousel-title,
.ocarousel-title * {
  font-family: var(--font-primary) !important;
} */

/* .title.sub-title strong {
  font-family: var(--font-primary) !important;
} */

.header-logo img {
  max-width: 100% !important;
}

.title.sub-title strong {
  border: 0px solid #ccc !important;
}

.topic-html-content a {
  color: var(--text-link) !important;
}

.panel-heading h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-black);
  text-transform: uppercase;
  margin: 0;
  text-align: left;
  letter-spacing: 2px;
  font-family: var(--font-primary) !important;
}

.forum-top i,
.forum-top a,
.forums-table-section .topic-name a,
.shipment-details-page a,
.downloadable-products-page .a-center.product a,
.downloadable-products-page .a-center.order a:hover,
.address-list-page ul .email a,
.order-details-page .a-left.name a,
.return-request-page .a-left.name a,
.back-in-stock-subscription-list-page .a-left.product a,
.return-request-list-page ul li a,
.forums-main-page a:hover,
.forum-search-box .advanced a:hover,
.forum-page-edit .topic-header a:hover,
.forum-page-edit .topic-header i:hover,
.forum-page-edit .manage a:hover,
.forum-page-edit .post-content .pull-right a:hover,
.forum-page-edit .topic-footer a:hover,
.forum-page-edit .send-pm-box a,
.private-messages-page .panel-body ul li a,
.private-messages-page .data-table a:hover,
.forum-search-page a:hover,
.forum-subscriptions-page .data-table a:hover,
.forum-page-edit .post-info .manage i:hover,
.blog-page .post-head a:hover,
.blog-page .blog-details a:hover,
.blog-page .blog-details ul li a:hover,
.news-list-pag .news-head a:hover,
.blogpost-page .tags ul li a:hover,
.blogpost-page .post-body p a,
.sitemap-page .entity-body ul li a:hover,
.news-item-page .news-body p a,
.forum-group-page .forums-table-section-title a:hover,
.forum-group-page .forums-table-section-body tr td a:hover {
  color: var(--primary-darker) !important;
  text-decoration: none;
}

/* ============================================================================
 * 5. UI COMPONENTS
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 5.1 BUTTON SYSTEM - Luxury Wigs Theme
 * ---------------------------------------------------------------------------- */
/* Default Buttons: Grey-black for standard actions
 * Accent Buttons: Luxury gold for primary CTAs
 */

/* Primary State - gold */
.btn.btn-primary,
.google-authenticator-conteiner .buttons button {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.google-authenticator-conteiner .buttons button.btn.btn-primary:hover,
.google-authenticator-conteiner .buttons button.btn.btn-primary:focus {
  background-color: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Default State - Grey-Black */
/*.btn.btn-default,
.payment-method .save-customer-info-button {
  background-color: var(--bg-default) !important;
  border: 0;
  color: var(--white) !important;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  transition: all var(--transition-base);
  padding: 10px 15px;
  cursor: pointer;
}*/

.btn.btn-default,
.payment-method .save-customer-info-button {
  padding: 8px 16px !important;
  font: 500 14px var(--font-default) !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  color: #333 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn.btn-default:hover,
.btn.btn-default:focus,
.payment-method .save-customer-info-button:hover,
.payment-method .save-customer-info-button:focus {
  background-color: var(--rd-accent-red) !important;
  color: var(--text-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
/* Disabled State - Muted Grey */
.btn.btn-default:disabled,
.btn.btn-default.disabled,
.payment-method .save-customer-info-button:disabled,
.payment-method .save-customer-info-button.disabled {
  background-color: var(--neutral-400);
  color: var(--neutral-100);
  cursor: not-allowed;
  opacity: 0.6;
}
/* ----------------------------------------------------------------------------
 * 5.2 FORM CONTROLS & INPUTS
 * ---------------------------------------------------------------------------- */
#AddProductReview_ReviewText:focus,
textarea.form-control:focus,
.change-password-page .form-control:focus,
.form-control:focus {
  border-color: var(--rd-accent-red) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  /* The header search box renders with border-width:0, so tinting the border
     left it with NO focus indicator at all (measured: border 0px, outline none,
     no ring) - WCAG 2.4.7 Focus Visible. Draw a real ring instead of killing the
     UA outline; the text token gives 5.51:1 on white, well past the 3:1 a focus
     indicator needs. */
  outline: 2px solid var(--rd-accent-red-text) !important;
  outline-offset: 1px;
}

.login-page .form-group .forgot-password a:hover,
.login-page .remember-me .checkbox label:hover {
  color: var(--text-link-hover) !important;
}
/* ----------------------------------------------------------------------------
 * 5.3 PAGINATION
 * ---------------------------------------------------------------------------- */

.viewmode-icon:hover {
  border-color: var(--primary) !important;
}

.pager li.current-page > span {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: var(--white) !important;
}

.pager li.current-page > span:hover,
.pager li.individual-page > a:hover {
  background: var(--bg-default) !important;
  border-color: var(--bg-default) !important;
  color: var(--text-white) !important;
}
/* Pagination Next Page - Font Awesome Icon */
.pager li.next-page a {
  background-color: var(--grey-black);
  border-color: var(--black);
  position: relative;
  text-indent: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.pager li.next-page a::before {
  content: "\f054";
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 16px;
  color: var(--white);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
}

.pager li.next-page > a:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.pager li.next-page > a:hover::before {
  color: var(--black);
  opacity: 0.9;
  transform: scale(1);
}
/* Pagination Previous Page - Font Awesome Icon */
.pager li.previous-page a {
  background-color: var(--grey-black);
  border-color: var(--black);
  position: relative;
  text-indent: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.pager li.previous-page a::before {
  content: "\f053";
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 16px;
  color: var(--white);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
}

.pager li.previous-page > a:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.pager li.previous-page > a:hover::before {
  color: var(--black);
  opacity: 0.9;
  transform: scale(1);
}
/* ----------------------------------------------------------------------------
 * 5.4 SLIDERS & CAROUSELS
 * ---------------------------------------------------------------------------- */

.product-item .swiper-pagination-bullet-active {
  padding: 4px;
  background-color: var(--rd-accent-red) !important;
}
/* #main
  > div.swiper.nop-slider.swiper-fade.swiper-initialized.swiper-horizontal.swiper-autoheight.swiper-watch-progress.swiper-backface-hidden
  > div.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal
  > span:nth-child(n), */

#main
  > div.swiper.nop-slider.swiper-fade.swiper-initialized.swiper-horizontal.swiper-autoheight.swiper-watch-progress.swiper-backface-hidden
  > div.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal
  > span.swiper-pagination-bullet.swiper-pagination-bullet-active,
.master-wrapper-content > .nop-slider span.swiper-pagination-bullet-active {
  background-color: var(--rd-accent-red) !important;
}

.nop-slider span.swiper-pagination-bullet-active {
  background-color: var(--rd-accent-red) !important;
}

.master-wrapper-content > .swiper.nop-slider {
  background-color: var(--grey-200) !important;
}
/* ============================================================================
 * 3. LAYOUT COMPONENTS
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 3.1 HEADER STYLING - Rosea Theme Pattern
 * ---------------------------------------------------------------------------- */

/* Header - Dark Charcoal Background */
.header {
  padding: var(--header-padding);
  background: var(--bg-header) !important;
}

/* Header Menu - Light Charcoal Background */
.header-menu {
  background: var(--bg-header-menu) !important;
  padding: var(--header-menu-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-gray);
}

/* ----------------------------------------------------------------------------
 * RESPONSIVE HEADER MENU SPACING
 * Since .header-menu contains .container (which has its own 15px padding),
 * we remove .header-menu padding to avoid double-padding issue
 * ---------------------------------------------------------------------------- */

/* Remove double padding - let Bootstrap .container handle spacing */
@media (max-width: 1199.98px) {
  .header-menu {
    padding: 0 !important;
  }
}

/* Header Links - Black text with red hover (ltjdenim.com style) */
.header a,
.header-menu a {
  color: var(--black) !important;
  transition: color var(--transition-base);
}

.header a:hover,
.header-menu a:hover {
  color: var(--rd-accent-red-text) !important;
}

/* Header Account Links - Wishlist, Login, Logout, Register, My Account */
.header .header-top-right ul li a,
.header-menu .header-top-right ul li a,
.header .header-top-right ul li.my-account a,
.header .header-top-right ul li.register a,
.header .header-top-right ul li .ico-wishlist,
.header .header-top-right ul li .ico-logout,
.header .header-top-right ul li .ico-login,
.header .header-top-right ul li .ico-register,
.header .header-top-right ul li .ico-account {
  color: var(--black) !important;
  transition: color var(--transition-base) !important;
}

.header .header-top-right ul li a:hover,
.header-menu .header-top-right ul li a:hover,
.header .header-top-right ul li.my-account a:hover,
.header .header-top-right ul li.register a:hover,
.header .header-top-right ul li .ico-wishlist:hover,
.header .header-top-right ul li .ico-logout:hover,
.header .header-top-right ul li .ico-login:hover,
.header .header-top-right ul li .ico-register:hover,
.header .header-top-right ul li .ico-account:hover {
  color: var(--rd-accent-red-text) !important;
}

/* Ensure link text shows hover color */
.header .header-top-right ul li a:hover span,
.header .header-top-right ul li.my-account a:hover span {
  color: var(--rd-accent-red-text) !important;
}

/* Header Text Elements */
.header,
.header-menu {
  color: var(--black);
}

.header *:not(a):not(a *),
.header-menu *:not(a):not(a *) {
  color: var(--black);
}

/* Header Icons */
.header .ico-cart,
.header .ico-wishlist,
.header .ico-account,
.header-menu .ico-cart,
.header-menu .ico-wishlist,
.header-menu .ico-account {
  color: var(--black) !important;
}

.header .ico-cart:hover,
.header .ico-wishlist:hover,
.header .ico-account:hover,
.header-menu .ico-cart:hover,
.header-menu .ico-wishlist:hover,
.header-menu .ico-account:hover {
  color: var(--rd-accent-red-text) !important;
}

/* Cart Count Badge */
.header .cart-qty,
.header-menu .cart-qty {
  /* body-sized text (14px) - needs the AA-passing token, not the fill accent */
  color: var(--rd-accent-red-text) !important;
}

/* Shopping Cart Label - Black on white header */
.header .flyout-main-wrapper .shopping-cart-link .cart-label,
.header-menu .flyout-main-wrapper .shopping-cart-link .cart-label {
  color: var(--black) !important;
}

/* Replace user-icon background image with Font Awesome icon */
.header-top-right ul li .ico-account {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
}

.header-top-right ul li .ico-account::before {
  content: "\f007";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 16px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-top-right ul li .ico-account:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* Replace wishlist-icon background image with Font Awesome icon */
.header-top-right ul li .ico-wishlist {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
}

.header-top-right ul li .ico-wishlist::before {
  content: "\f08a";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 16px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-top-right ul li .ico-wishlist:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* Replace logout-icon background image with Font Awesome icon */
.header-top-right ul li .ico-logout {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
}

.header-top-right ul li .ico-logout::before {
  content: "\f08b";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 16px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-top-right ul li .ico-logout:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* Replace login-icon background image with Font Awesome icon */
.header-top-right ul li .ico-login {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
}

.header-top-right ul li .ico-login::before {
  content: "\f090";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 16px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-top-right ul li .ico-login:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* Replace register-icon background image with Font Awesome icon */
.header-top-right ul li .ico-register {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
}

.header-top-right ul li .ico-register::before {
  content: "\f234";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 16px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-top-right ul li .ico-register:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* Replace cart-icon background image with Font Awesome icon */
.flyout-main-wrapper .shopping-cart-link .ico-cart {
  background: none !important;
  position: relative;
  padding-left: 30px !important;
  height: auto !important;
}

.flyout-main-wrapper .shopping-cart-link .ico-cart::before {
  content: "\f07a";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 18px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.flyout-main-wrapper .shopping-cart-link .ico-cart:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

#flyout-cart-wrapper
  > div
  > div
  > div.flyout-cart-footer
  > div.flyout-cart-footer-buttons
  > button.button-1.flyout-cart-checkout-button,
.flyout-cart-grouped
  .flyout-cart-footer
  .flyout-cart-footer-buttons
  .flyout-cart-checkout-button {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border: 1px solid var(--black) !important;
  border-radius: 0.25rem !important;
  font-family: var(--font-default) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0.375rem 0.75rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  display: inline-flex !important
;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

#flyout-cart-wrapper
  > div
  > div
  > div.flyout-cart-header
  > div.flyout-cart-header-product
  > a,
.flyout-cart-header-product a {
  color: var(--primary-darker) !important;
  text-decoration: none;
  font-weight: bold;
  font-family: var(--font-default);
  font-size: 14px;
}

.flyout-cart-header-product a:hover {
  color: var(--primary-darker);
  text-decoration: none;
}
/* ----------------------------------------------------------------------------
 * 3.2 NAVIGATION & MENUS
 * ---------------------------------------------------------------------------- */

.header-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:hover {
  background: var(--grey-100) !important;
  color: var(--rd-accent-red-darker) !important;
}

/* Dropdown Menus on Dark Header */
.header .dropdown-menu,
.header-menu .dropdown-menu {
  background-color: var(--white);
  border: 1px solid var(--neutral-100);
}

.header .dropdown-menu a,
.header-menu .dropdown-menu a {
  color: var(--text-black) !important;
}

.header .dropdown-menu a:hover,
.header-menu .dropdown-menu a:hover {
  background-color: var(--neutral-50);
  color: var(--rd-accent-red-text) !important;
}

/* Replace submenu icon background image with Font Awesome icon */
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu
  li
  a {
  padding: 10px 15px 10px 40px;
  line-height: 15px;
  background: #f9f9f9 !important;
  white-space: normal;
  word-wrap: break-word;
  position: relative;
}

.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu
  li
  a::before {
  content: "\f0a9";
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 18px;
  color: var(--neutral-400);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu
  li
  a:hover::before {
  color: var(--primary);
  opacity: 0.9;
  transform: translateY(-50%) scale(1);
}

/* ----------------------------------------------------------------------------
 * 3.2.1 SIDEBAR NAVIGATION - FIRST LEVEL ACTIVE ITEMS
 * Font Awesome Icon Implementation for Active Navigation Items
 * ---------------------------------------------------------------------------- */

/* Remove background image and prepare for Font Awesome icon - FIRST LEVEL ONLY */
.block.block-account-navigation .listbox > ul > li > a.active,
.block-manufacturer-navigation.box-shadow-wrapper .listbox > ul > li.active > a,
.box-shadow-wrapper .listbox > ul > li.active.last > a {
  background: none !important;
  font-weight: 700;
  position: relative;
  padding-left: 30px;
  transition: all var(--transition-base);
}

/* Add Font Awesome arrow-circle-right icon for active items - FIRST LEVEL ONLY */
.block.block-account-navigation .listbox > ul > li > a.active::before,
.block-manufacturer-navigation.box-shadow-wrapper
  .listbox
  > ul
  > li.active
  > a::before,
.box-shadow-wrapper .listbox > ul > li.active.last > a::before {
  content: "\f0a9";
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 18px;
  color: var(--gold);
  opacity: 0.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hover state for active navigation items - FIRST LEVEL ONLY */
.block.block-account-navigation .listbox > ul > li > a.active:hover::before,
.block-manufacturer-navigation.box-shadow-wrapper
  .listbox
  > ul
  > li.active
  > a:hover::before,
.box-shadow-wrapper .listbox > ul > li.active.last > a:hover::before {
  color: var(--gold-dark);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* ----------------------------------------------------------------------------
 * 3.2.2 SIDEBAR NAVIGATION - SECOND LEVEL+ ACTIVE SUBLIST ITEMS
 * Font Awesome Icon Implementation for Sublist Active Items
 * ---------------------------------------------------------------------------- */

/* Remove background image and prepare for Font Awesome icon - SUBLIST ACTIVE ITEMS */
.box-shadow-wrapper .listbox ul li .sublist li a:hover,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a {
  background: none !important;
  position: relative;
  padding-left: 50px;
  transition: all var(--transition-base);
}

/* Add Font Awesome chevron-right icon for sublist active items */
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before {
  content: "\f054";
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 14px;
  color: var(--gold);
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hover state for sublist active items */
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a:hover::before {
  color: var(--gold-dark);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* Sticky Navigation */
.main-menu.goToTop {
  left: 0;
  top: 0 !important;
  z-index: 9999;
  position: fixed;
  max-width: 100% !important;
  border-radius: 0;
  background: var(--bg-header-menu) !important;
  color: var(--black) !important;
  border-bottom: 0px solid var(--bg-header-menu) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Back to Top Button */
/* Matches the site's monochrome scheme (--primary #000, .button-1 #333, checkout
   button black-on-white) instead of standing out as the only accent-coloured
   control. The top-arrow.png sprite is dropped rather than recoloured - a dark
   arrow would vanish on a near-black background - and replaced with the same
   FontAwesome 4.7 chevron mobile-foundation.css already draws on mobile, so both
   viewports render the button identically. Contrast: 12.6:1. */
#backTop {
  background-color: #333 !important;
  background-image: none !important;
}

#backTop::after {
  content: "\f077"; /* fa chevron-up */
  font: normal normal normal 16px/35px FontAwesome;
  color: #fff;
  display: block;
  text-align: center;
  text-indent: 0; /* the element itself hides its text at -9999px */
}

#backTop:hover,
#backTop:focus {
  background-color: #000 !important;
  background-image: none !important;
}

/* ----------------------------------------------------------------------------
 * 3.3 SEARCH BOX - Rosea Style with Gold Accent
 * ---------------------------------------------------------------------------- */

/* Search Box Container */
.search-box,
.store-search-box {
  position: relative;
}

.search-box form,
.store-search-box form {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.search-box form:after,
.store-search-box form:after {
  content: "";
  display: block;
  clear: both;
}

/* Search Input Field */
.search-box input.search-box-text,
.store-search-box input.search-box-text {
  border-radius: 3px 0 0 3px;
  width: 100%;
  background-color: var(--white) !important;
  color: var(--black) !important;
  border: 1px solid var(--neutral-100);
  padding: 8px;
  font-family: var(--font-default);
  font-size: var(--text-base);
  height: 36px;
}

.search-box input.search-box-text::placeholder,
.store-search-box input.search-box-text::placeholder {
  color: var(--neutral-500);
}

/* Search Input - White background with black text */
.header .search-box input[type="text"],
.header-menu .search-box input[type="text"] {
  background-color: var(--bg-header) !important;
  color: var(--black) !important;
  border-color: var(--neutral-100);
}

.header .search-box input[type="text"]::placeholder,
.header-menu .search-box input[type="text"]::placeholder {
  color: var(--neutral-500);
}

.header-lower .search-box .search-nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
  width: 260px;
  padding-left: 5px;
}

.header-lower .ui-autocomplete li a {
  padding: 10px;
  border-radius: 0;
  font-family: var(--font-default);
  font-size: 14px;
  background: #f5f5f5 !important;
  cursor: pointer;
  float: left;
  width: 100%;
  color: var(--text-black) !important;
}

.header-lower .ui-autocomplete li a:hover,
.header-lower .ui-autocomplete li a:focus {
  color: var(--primary-dark) !important;
  border: 0 !important;
  /* background-color: #fff; */
}

.forum-search-box .search-box-text:focus,
.header-lower .search-box .search-nav:focus {
  border-bottom: 1px solid var(--rd-accent-red) !important;
}

/* Search Button - Font Awesome Icon Style */
.search-box .search-box-button,
.store-search-box .search-box-button {
  /* background-color: #27272b !important; */
  padding: 0 15px;
  text-align: center;
  color: var(--white) !important;
  text-transform: uppercase;
  border-radius: 0 3px 3px 0;
  border: 0px solid var(--white);
  position: relative;
  transition: all var(--transition-base);
  font-family: var(--font-default);
  font-weight: var(--weight-medium);
}

.search-box .search-box-button span,
.store-search-box .search-box-button span {
  font: normal var(--text-base) var(--font-default);
  margin-left: 4px;
}

/* Replace background image with Font Awesome icon */
.search-box .btn.search-box-button,
.forum-search-box .btn.search-box-button {
  font-size: 0 !important;
  background: none !important;
  border-radius: 0;
  width: 34px;
  height: 34px;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  right: -10px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white) !important;
  padding: 0;
}

/* Hide search button text */
.search-box .btn.search-box-button span,
.forum-search-box .btn.search-box-button span {
  display: none;
}

.search-box .btn.search-box-button::before,
.forum-search-box .btn.search-box-button::before {
  content: "\f002";
  font-family: "FontAwesome";
  font-weight: 100;
  font-size: 18px;
  color: var(--black);
  opacity: 0.7;
  transform: scale(0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-base);
}

.search-box .btn.search-box-button:hover,
.forum-search-box .btn.search-box-button:hover {
  background: none !important;
}

.search-box .btn.search-box-button:hover::before,
.forum-search-box .btn.search-box-button:hover::before {
  color: var(--rd-accent-red-text);
  opacity: 0.9;
  transform: scale(1);
}

/* Autocomplete Loading State */
.search-box .ui-autocomplete-loading,
.store-search-box .ui-autocomplete-loading {
  background: var(--white) url("../images/ajax-loader-small.gif") right center
    no-repeat;
}

/* Dark Header Search Box Variant */
.header .search-box input.search-box-text,
.header-menu .search-box input.search-box-text {
  border-color: var(--neutral-100);
}

/* ----------------------------------------------------------------------------
 * 3.4 FOOTER STYLING - PREMIUM DENIM BLACK/RED THEME
 * ---------------------------------------------------------------------------- */

/* Footer Upper - Newsletter Section (Black background with white text) */
.footer-upper {
  padding: 30px 35px !important;
  border-bottom: 1px solid rgb(75, 84, 92) !important;
  background: var(--bg-brand) !important; /* Black background */
  text-align: center;
}

/* Newsletter Heading - White text on black background */
.footer-upper .newsletter-email strong,
.footer-upper .title strong {
  color: var(--white) !important;
  font-family: var(--font-primary) !important;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Newsletter Input Field - White background with black text */
.footer-upper input,
.footer-upper .form-control {
  color: var(--text-black) !important;
  background-color: var(--white) !important;
  border: 1px solid var(--white) !important;
  padding: 12px 18px !important;
  border-radius: 4px;
  transition: all var(--transition-base) !important;
}

.footer-upper input:focus,
.footer-upper .form-control:focus {
  border: 1px solid var(--rd-accent-red) !important;
  box-shadow: 0 4px 12px rgba(218, 0, 11, 0.2) !important;
  outline: none !important;
}

/* Newsletter Subscribe Button - Red background with white text */
.footer-upper .newsletter-subscribe-button,
.footer-upper button[type="submit"],
.footer-upper input[type="submit"],
.footer-upper .btn-primary {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border: 1px solid var(--white) !important; /* Grey border to match btn-default background */
  padding: 12px 24px !important;
  font-family: var(--font-default) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-base) !important;
}

.footer-upper .newsletter-subscribe-button:hover,
.footer-upper button[type="submit"]:hover,
.footer-upper input[type="submit"]:hover,
.footer-upper .btn-primary:hover {
  background-color: var(--rd-accent-red-dark) !important;
  color: var(--white) !important;
  border-color: var(
    --rd-accent-red-dark
  ) !important; /* Grey border to match btn-default hover background */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(218, 0, 11, 0.3) !important;
}

/* Social Icons in Footer Upper - White icons with red hover */
.footer-upper .social-wrapper li a {
  color: var(--white) !important;
  background: transparent !important;
  border: 1px solid var(--white);
  transition: all var(--transition-base);
}

.footer-upper .social-wrapper li a:hover {
  background: var(--rd-accent-red) !important;
  color: var(--white) !important;
  border-color: var(--rd-accent-red) !important;
}

/* Footer Middle - Black background with white text */
.footer-middle {
  padding: 35px 35px !important;
  background: var(--bg-black) !important;
}

.footer .footer-middle ul li {
  color: var(--text-white) !important;
  text-transform: capitalize;
}

.footer .footer-middle ul li a {
  color: var(--text-white) !important;
  text-transform: capitalize;
  margin-bottom: 20px;
  display: inline-block;
  transition: color var(--transition-base);
}

.footer-middle ul li a:hover,
.footer-middle ul li a:focus {
  color: var(--rd-accent-red-text) !important;
}

.footer-middle .title strong {
  font-size: 18px;
  color: var(--text-white) !important;
  text-transform: uppercase;
  font-family: var(--font-primary) !important;
}

/* Footer Lower - Black background with white text */
.footer-lower {
  padding: 20px 0;
  background: var(--bg-black) !important;
  color: var(--white) !important;
}

.footer-lower * {
  color: var(--white) !important;
}

.footer-lower a {
  color: var(--white) !important;
  transition: color var(--transition-base);
}

.footer-lower a:hover {
  color: var(--rd-accent-red-text) !important;
}

/* ============================================================================
 * 4. SHOPPING COMPONENTS
 * ============================================================================ */
#matrix-table > tbody > tr:nth-child(n) > td.pack-cell > input:focus,
#pack-count-input:focus,
.pack-input-field:focus {
  border: 1px solid var(--primary) !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* .size-input:focus, .matrix-quantity-input:focus, .pack-input:focus, .pack-input-individual:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    background-color: #fff !important;
} */

#pack-count-input,
#matrix-table > tbody > tr:nth-child(n) > td.pack-cell > input {
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  background-color: #fff !important;
  color: var(--text-black) !important;
  font-size: 1.3rem !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
/* ----------------------------------------------------------------------------
 * 4.1 FLYOUT CART - COMPREHENSIVE BLACK TEXT STYLING
 * ---------------------------------------------------------------------------- */
/* Ensures ALL text within the flyout cart appears in black (#000000)
 * Includes header, product info, variant details, pricing, and footer
 */

/* Main flyout cart wrapper - set base text color */
.flyout-cart-wrapper,
.flyout-cart-wrapper * {
  color: var(--text-black) !important;
}

/* Flyout cart header (Product, Qty, AMT labels) */
.flyout-cart-header,
.flyout-cart-header * {
  color: var(--text-black) !important;
}

/* Product count link in header */
.flyout-cart-header-product,
.flyout-cart-header-product a,
.flyout-cart-header-product span {
  color: var(--text-black) !important;
}

/* Product name and price */
.flyout-cart-product-name,
.flyout-cart-product-name a,
.flyout-cart-product-name span,
.flyout-cart-product-name .price {
  color: var(--text-black) !important;
}

/* Variant information (color, sizes) */
.flyout-cart-variant-info,
.flyout-cart-variant-info *,
.flyout-cart-variant-info span,
.flyout-cart-variant-info strong {
  color: var(--text-black) !important;
}

/* Color and pack information line */
.flyout-cart-color-pack-line,
.flyout-cart-color-pack-line *,
.flyout-cart-color-pack-line span,
.flyout-cart-color-pack-line strong {
  color: var(--text-black) !important;
}

/* Size breakdown information line */
.flyout-cart-size-breakdown-line,
.flyout-cart-size-breakdown-line *,
.flyout-cart-size-breakdown-line span,
.flyout-cart-size-breakdown-line strong {
  color: var(--text-black) !important;
}

/* Cart footer with buttons and subtotal */
.flyout-cart-wrapper .mini-shopping-cart .buttons,
.flyout-cart-wrapper .mini-shopping-cart .buttons *,
.flyout-cart-wrapper .mini-shopping-cart .buttons span,
.flyout-cart-wrapper .mini-shopping-cart .buttons strong {
  color: var(--text-black) !important;
}

/* Subtotal amount */
.flyout-cart-subtotal-amount,
.flyout-cart-subtotal-amount span,
.flyout-cart-subtotal-amount strong {
  color: var(--text-black) !important;
}

/* Quantity and amount columns */
.flyout-cart-qty,
.flyout-cart-qty *,
.flyout-cart-amount,
.flyout-cart-amount *,
.flyout-cart-amount .price {
  color: var(--text-black) !important;
}

/* Cart item rows */
.flyout-cart-item,
.flyout-cart-item *,
.flyout-cart-item span,
.flyout-cart-item a {
  color: var(--text-black) !important;
}

/* Empty cart message */
.flyout-cart-empty-cart {
  padding: 24px;
  text-align: center;
  color: #666 !important;
  font-size: 14px;
  font-weight: normal;
  font-family: var(--font-default);
}

/* Links in flyout cart - maintain black text with underline on hover */
.flyout-cart-wrapper a:hover,
.flyout-cart-product-name a:hover,
.flyout-cart-header-product a:hover {
  color: var(--text-black) !important;
  text-decoration: underline;
}

/* Flyout cart totals section */
.flyout-cart-totals,
.flyout-cart-totals *,
.flyout-cart-totals span,
.flyout-cart-totals strong {
  color: var(--text-black) !important;
}

/* Additional specificity for nested elements */
.flyout-cart-wrapper .flyout-cart-item .product-name,
.flyout-cart-wrapper .flyout-cart-item .product-name a {
  color: var(--text-black) !important;
}

.flyout-cart-wrapper .flyout-cart-item .unit-price,
.flyout-cart-wrapper .flyout-cart-item .quantity,
.flyout-cart-wrapper .flyout-cart-item .subtotal {
  color: var(--text-black) !important;
}

/* Ensure buttons in flyout cart maintain proper styling */
.flyout-cart-wrapper .mini-shopping-cart .buttons .button-1,
.flyout-cart-wrapper .mini-shopping-cart .buttons .button-2,
.flyout-cart-wrapper .mini-shopping-cart .buttons button,
.flyout-cart-wrapper .mini-shopping-cart .buttons .btn {
  /* Buttons maintain their own color schemes - do not force black text */
  color: inherit !important;
}

/* ----------------------------------------------------------------------------
 * 4.2.0  full CART CHECKOUT BUTTON - Luxury Gold Primary CTA
 * ---------------------------------------------------------------------------- */
.full-cart-checkout-options-row .full-cart-continue-shopping-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.shopping-cart-page .coupon-box .apply-discount-coupon-code-button,
.shopping-cart-page .giftcard-box .apply-gift-card-coupon-code-button {
  background: var(--btn-default-bg) !important;
  color: #fff;
  font-family: var(--font-default);
  font-weight: 400 !important;
  border: 0;
  transition: all 0.3s ease;
}

.shopping-cart-page .coupon-box .apply-discount-coupon-code-button:hover,
.shopping-cart-page .coupon-box .apply-discount-coupon-code-button:focus,
.shopping-cart-page .giftcard-box .apply-gift-card-coupon-code-button:hover,
.shopping-cart-page .giftcard-box .apply-gift-card-coupon-code-button:focus {
  background: var(--btn-default-bg) !important;
}

.full-cart-checkout-button,
.checkout-button {
  width: 100%;
  min-height: 44px;
  padding: 12px 24px;
  font: normal 14px var(--font-default);
  font-weight: 700 !important;
  cursor: pointer;
  border: 0;
  background: var(--bg-primary) !important;
  color: var(--btn-primary-text) !important;
  display: block;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.full-cart-checkout-button:hover,
.checkout-button:hover {
  /* background: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s; */

  background-color: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.full-cart-variant-row:hover {
  background: rgba(248, 249, 250, 0.8);
  border-left: 3px solid var(--primary) !important;
  padding-left: 29px;
  transition: all 0.2s ease;
}

/* ----------------------------------------------------------------------------
 * 4.2 FLYOUT CART CHECKOUT BUTTON - Luxury Gold Primary CTA
 * ---------------------------------------------------------------------------- */
/* Aligns checkout button with luxury gold branding instead of red accent
 * Uses --bg-primary (gold) for primary CTA consistency across the theme
 */

.flyout-cart-grouped
  .flyout-cart-footer
  .flyout-cart-footer-buttons
  .flyout-cart-checkout-button {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border: 1px solid var(--black) !important;
  border-radius: 0.25rem !important;
  font-family: var(--font-default) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0.375rem 0.75rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  display: inline-flex !important
;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

.flyout-cart-checkout-button {
  font-family: var(--font-default);
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  text-transform: uppercase;
  height: 36px;
  min-height: 36px;
  padding: 0 15px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black) !important;
  color: var(--white) !important;
  transition: background-color 0.2s ease;
}

.flyout-cart-variants-container {
  background: linear-gradient(135deg, #fafbfc 0%, #f5f7f8 100%);
  border-top: 1px solid #dee2e6;
  border-left: 3px solid var(--primary) !important;
  box-shadow: inset 2px 0 4px rgba(74, 178, 241, 0.06);
}

/* ============================================================================
 * 6. CHECKOUT & ORDER PAGES
 * ============================================================================ */
.opc .active .step-title .number {
  background-color: var(--rd-accent-red) !important;
  font-weight: 700;
  color: var(--text-white) !important;
}

.opc .active .step-title h2 {
  font-weight: 700;
  font-size: 14px;
  color: var(--rd-burgundy) !important;
}

.order-details-page
  .total-info
  .panel.panel-default
  table
  tr
  .grand-total-title,
.order-details-page
  .total-info
  .panel.panel-default
  table
  tr
  .grand-total-prices,
.order-summary-content
  .total-info
  .panel.panel-default
  table
  tr
  .grand-total-prices,
.order-summary-content
  .total-info
  .panel.panel-default
  table
  tr
  .grand-total-title {
  border-top: 2px solid var(--rd-burgundy-light) !important;
  font-weight: 700;
  color: var(--grey-black);
  font-family: var(--font-default);
  font-size: 16px;
  padding: 15px 12px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--primary) !important;
  background: var(--primary-light) !important;
  font-weight: normal;
  color: #fff;
}

.block.block-recently-viewed-products.well.box-shadow-wrapper
  ul
  li:hover
  .product-name {
  color: var(--text-link-hover) !important;
}

/* ----------------------------------------------------------------------------
 * MOBILE HAMBURGER MENU - ICON VISIBILITY FIX
 * Make hamburger icon bars visible on dark header-menu background
 * ---------------------------------------------------------------------------- */
.header-menu .navbar-inverse .navbar-toggle .icon-bar {
  /*  background-color: var(--black) !important; */ /* White bars for visibility on dark background */
}

.header-menu .navbar-inverse .navbar-toggle {
  /* border-color: rgba(255, 255, 255, 0.3) !important; */ /* Light border for visibility */
}

.header-menu .navbar-inverse .navbar-toggle:hover,
.header-menu .navbar-inverse .navbar-toggle:focus {
  /* background-color: rgba(255, 255, 255, 0.1) !important;*/ /* Subtle hover effect */
}


/* ============================================================================
   SAB001 ACCENT UNIFICATION - one rose accent on desktop and mobile. The rd-*
   families above are re-valued in place (wigstheme-only tokens). --red,
   --dark-red and --grey-black however are defined by simplex.styles.css :root,
   which renders AFTER this file (AppendCssFileParts inserts at index 0 =
   wigstheme renders FIRST) - out-rank it by SPECIFICITY: html:root (0,1,1)
   beats :root (0,1,0) regardless of order. Consumers: b2b wizard circles /
   progress underline, simplex #backTop bg, .opc fallbacks, simplex body text.
   ============================================================================ */
html:root {
  --red: #8c3b4a;
  --dark-red: #6e2a39;
  --grey-black: #231f20;
}