/**
 * ============================================================================
 * 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("../Themes/SimplexTheme/Content/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;
}
/**
 * Product Details Page - Container Width Override
 *
 * Purpose: Override Bootstrap's fixed container widths with 95% width on multiple page types
 * Scope: Product details, category, recently added, recently viewed, and account pages
 * Priority: Loaded last to ensure override
 *
 * Optimization: Consolidated media queries - all breakpoints use same 95% width
 */

/* Target multiple page types using body class - applies to all screen sizes */
.html-product-details-page .container,
.html-category-page .container,
.html-recently-added-products-page .container,
.html-recently-viewed-products-page .container,
.html-account-page .container,
.html-search-page .container,
.html-apply-vendor-page .container,
.html-news-list-page .container,
.html-blog-page .container,
.html-compare-products-page .container,
.html-contact-page .container,
.html-news-item-page .container,
.html-blogpost-page .container,
.html-email-a-friend-page .container {
  width: 95% !important;
  max-width: 95% !important;
}

/* Footer-only 95% width for specific pages (content stays default width) */
.html-login-page .footer .container,
.html-registration-page .footer .container,
.html-wishlist-page .footer .container,
.html-shopping-cart-page .footer .container,
.html-checkout-page .footer .container,
.html-order-completed-page .footer .container,
.html-order-details-page .footer .container,
.html-topic-page .footer .container,
.html-forums-main-page .footer .container {
  width: 95% !important;
  max-width: 95% !important;
}

/*
 * PRODUCT BOX IMAGE ASPECT RATIO - 3:4 (Taller Portrait)
 * Applies consistent aspect ratio across all product grid displays
 *
 * Target Ratio: 3:4 (width:height)
 * Calculation: height/width = 4/3 = 1.333 = 133.33%
 *
 * Features:
 * - Modern aspect-ratio property with fallback
 * - object-fit: cover for consistent filling
 * - Preserves Swiper functionality
 * - Responsive across all breakpoints
 * - Taller format reduces top/bottom cropping
 */

/* ============================================
   PRODUCT GRID - 3:4 Aspect Ratio
   ============================================ */

/* Modern browsers - aspect-ratio property */
.product-grid .item-box .picture,
.product-grid .item-box .thumbnail .picture {
    aspect-ratio: 3/4 !important; /* 3:4 ratio (0.75) - Taller portrait */
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Swiper container inherits aspect ratio */
.product-grid .item-box .picture .swiper,
.product-grid .item-box .thumbnail .picture .swiper {
    width: 100% !important;
    height: 100% !important;
}

/* Swiper slide wrapper */
.product-grid .item-box .picture .swiper-wrapper,
.product-grid .item-box .thumbnail .picture .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
}

/* Individual slide link containers */
.product-grid .item-box .picture .swiper-slide,
.product-grid .item-box .thumbnail .picture .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Single image link (non-swiper) */
.product-grid .item-box .picture > a,
.product-grid .item-box .thumbnail .picture > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Image styling - contain with centering */
.product-grid .item-box .picture img,
.product-grid .item-box .thumbnail .picture img,
.product-grid .item-box .picture .swiper-slide img,
.product-grid .item-box .thumbnail .picture .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Show full image within container, matching ocarousel pattern */
    object-position: center !important; /* Center image within frame */
    display: block !important;
    /* position removed - allows proper display in aspect-ratio containers */
}

/* ============================================
   LEGACY BROWSER FALLBACK - Padding-top technique
   ============================================ */

@supports not (aspect-ratio: 3/4) {
    /* Container with padding-top ratio */
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        height: 0 !important;
        padding-top: 133.33% !important; /* 4/3 = 133.33% for 3:4 ratio */
        position: relative !important;
    }

    /* Absolute positioning for swiper */
    .product-grid .item-box .picture .swiper,
    .product-grid .item-box .thumbnail .picture .swiper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Absolute positioning for single image link */
    .product-grid .item-box .picture > a,
    .product-grid .item-box .thumbnail .picture > a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Desktop - maintain 3:4 ratio */
@media (min-width: 1200px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* Tablet - maintain 3:4 ratio */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* Mobile - maintain 3:4 ratio */
@media (max-width: 767.98px) {
    .product-grid .item-box .picture,
    .product-grid .item-box .thumbnail .picture {
        aspect-ratio: 3/4 !important;
    }

    @supports not (aspect-ratio: 3/4) {
        .product-grid .item-box .picture,
        .product-grid .item-box .thumbnail .picture {
            padding-top: 133.33% !important;
        }
    }
}

/* ============================================
   SWIPER NAVIGATION COMPATIBILITY
   ============================================ */

/* Ensure navigation arrows remain visible and functional */
.product-grid .item-box .picture .swiper-button-prev,
.product-grid .item-box .picture .swiper-button-next,
.product-grid .item-box .picture .swiper-pagination {
    z-index: 15 !important; /* Above images but below overlays */
}

/* ============================================
   OBJECT-FIT VARIATIONS (Optional customization)
   ============================================ */

/* Alternative: Use 'cover' instead of 'contain' to fill frame completely
 * Uncomment below to switch from letterboxing to cropping (may cut off product details) */
/*
.product-grid .item-box .picture img,
.product-grid .item-box .thumbnail .picture img {
    object-fit: cover !important;
}
*/

/* Alternative aspect ratios:
 * For 4:5 ratio: aspect-ratio: 4/5; padding-top: 125%;
 * For 1:1 ratio: aspect-ratio: 1/1; padding-top: 100%;
 * For 16:9 ratio: aspect-ratio: 16/9; padding-top: 56.25%;
 * For 2:3 ratio: aspect-ratio: 2/3; padding-top: 150%;
 */

/*
 * PRODUCT IMAGE HOVER NAVIGATION ARROWS
 * Luxury e-commerce style matching ynakim.com aesthetic
 *
 * Features:
 * - Prev/Next arrows appear on image hover
 * - Minimalist design with subtle backgrounds
 * - Smooth fade-in animations
 * - Positioned inside image container
 * - Works with Swiper.js image galleries
 */

/* ============================================
   ARROW CONTAINER - Position relative wrapper
   ============================================ */

.product-grid .item-box .picture,
.product-grid .item-box .thumbnail .picture {
    position: relative !important;
}

/* ============================================
   NAVIGATION ARROWS - Hidden by default
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev,
.product-grid .item-box .picture .swiper-button-next {
    position: absolute !important;
    bottom: 12px !important; /* Align with pagination dots */
    top: auto !important;
    transform: none !important;
    width: 48px !important; /* Increased from 36px for better click target */
    height: 48px !important; /* Meets WCAG touch target minimum */
    margin-top: 0 !important;
    z-index: 25 !important; /* Increased from 10 to prevent parent link click-through */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Transparent styling */
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    /* Smooth transitions */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Prevent clicks when hidden */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Previous arrow positioning */
.product-grid .item-box .picture .swiper-button-prev {
    left: -8px !important; /* Outside the image by 8px */
}

/* Next arrow positioning */
.product-grid .item-box .picture .swiper-button-next {
    right: -8px !important; /* Outside the image by 8px */
}

/* ============================================
   ARROW ICONS - Classic arrows with transparent background
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev::after,
.product-grid .item-box .picture .swiper-button-next::after {
    font-family: 'FontAwesome' !important;
    font-size: 24px !important;
    color: var(--grey-black) !important; /* Grey-black color */
    opacity: 0.5 !important; /* 50% opacity for subtle appearance */
    font-weight: normal !important;
    line-height: 1 !important;
}

.product-grid .item-box .picture .swiper-button-prev::after {
    content: '\f060' !important; /* FontAwesome arrow-left (classic) */
}

.product-grid .item-box .picture .swiper-button-next::after {
    content: '\f061' !important; /* FontAwesome arrow-right (classic) */
}

/* ============================================
   PAGINATION DOTS - Hidden by default
   ============================================ */

.product-grid .item-box .picture .swiper-pagination,
.product-grid .item-box .thumbnail .picture .swiper-pagination {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   HOVER BEHAVIOR - Fade in arrows and dots
   ============================================ */

.product-grid .item-box .picture:hover .swiper-button-prev,
.product-grid .item-box .picture:hover .swiper-button-next,
.product-grid .item-box .picture:hover .swiper-pagination,
.product-grid .item-box .thumbnail:hover .swiper-button-prev,
.product-grid .item-box .thumbnail:hover .swiper-button-next,
.product-grid .item-box .thumbnail:hover .swiper-pagination {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Enable clicks when visible */
}

/* ============================================
   HOVER EFFECTS - Arrow color change on hover (only for enabled arrows)
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev:not(.swiper-button-disabled):hover::after,
.product-grid .item-box .picture .swiper-button-next:not(.swiper-button-disabled):hover::after {
    color: var(--grey-black) !important; /* Grey-black color on arrow hover */
    opacity: 1 !important; /* Full opacity on hover */
}

/* ============================================
   DISABLED STATE - Show disabled arrows on hover but prevent clicks and hover effect
   ============================================ */

.product-grid .item-box .picture .swiper-button-disabled {
    cursor: default !important; /* Change cursor to indicate not clickable */
    pointer-events: none !important; /* Prevent all clicks */
}

.product-grid .item-box .picture .swiper-button-disabled::after {
    color: rgba(37, 37, 37, 0.1) !important; /* Very light/disabled appearance - stays same on hover */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet - maintain accessible touch targets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .product-grid .item-box .picture .swiper-button-prev,
    .product-grid .item-box .picture .swiper-button-next {
        width: 44px !important; /* Increased from 32px - still meets iOS 44px minimum */
        height: 44px !important;
    }

    .product-grid .item-box .picture .swiper-button-prev::after,
    .product-grid .item-box .picture .swiper-button-next::after {
        font-size: 20px !important; /* Increased from 14px for better visibility */
    }

    .product-grid .item-box .picture .swiper-button-prev {
        left: -8px !important;
    }

    .product-grid .item-box .picture .swiper-button-next {
        right: -8px !important;
    }
}

/* Mobile - hide arrows (touch swipe works better) */
@media (max-width: 767.98px) {
    .product-grid .item-box .picture .swiper-button-prev,
    .product-grid .item-box .picture .swiper-button-next {
        display: none !important;
    }
}


/* Utilities */
.visibility-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Categories List Container */
.categories-list {
  width: 100%;
  padding: 0px 0 20px 0;
  /*background: #ffffff;*/
}

/* Add container padding for alignment with other homepage sections */
.categories-list .container {
  max-width: 100% !important;
}

.categories-list-content {
  padding-left: 35px !important;
  padding-right: 35px !important;
  width: 100%;
}

/* Collections Grid */
.collections-list {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.collections-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

/* 3 Column Grid - All items in single horizontal line */
.collections-grid-3 {
  /* Flexbox properties inherited from .collections-grid */
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

/* Responsive Grid */
@media (max-width: 989px) {
  .collections-grid-3 {
    /* No changes needed for flexbox */
  }
  
  .collections-grid-item {
    flex: 0 0 calc((100% - 15px) / 2);
    max-width: calc((100% - 15px) / 2);
    width: calc((100% - 15px) / 2);
  }
}
@media (max-width: 749px) {
  .collections-grid-3 {
    gap: 15px;
  }
  
  .collections-grid-item {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .categories-list .container {
    padding: 0 16px;
  }
}

/* Grid Item - Remove max-width constraint for large images */
.collections-grid-item {
  position: relative;
  list-style: none;
  flex: 0 0 calc((100% - 30px) / 3);
  max-width: calc((100% - 30px) / 3);
  width: calc((100% - 30px) / 3);
  margin: 0;
}

.collections-grid-item-background {
  /*background: #f5f5f5;*/
}

/* Link Overlay */
.collections-grid-link-overlay {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.collections-grid-link-overlay:hover {
  text-decoration: none;
}

/* Image Container */
.collections-grid-image {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.collections-grid-image-portrait {
  /* Removed aspect-ratio to preserve original image ratios */
}

.collections-grid-image-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Image Element */
.collections-grid-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collections-grid-link-overlay:hover .collections-grid-image img {
  transform: scale(1.05);
}

/* Overlay */
.collections-grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.collections-grid-link-overlay:hover .collections-grid-overlay {
  /*background: rgba(0, 0, 0, var(--opacity-hover, 0.2));*/
}

/* Shop Collection Button — category label.
   COLOUR SCHEME matched to the MOBILE tile treatment (user request 2026-06-04):
   a full-width dark translucent strip pinned to the tile bottom with white
   uppercase text. VISIBILITY stays the original desktop behaviour — revealed
   on hover only (user request, same day). Touch devices keep it always
   visible via the @media (hover:none) block + the mobile overrides. */
.collections-grid-image .button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.collections-grid-link-overlay:hover .collections-grid-image .button {
  opacity: 1;
}

.button--simple {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  min-height: 44px;
  box-sizing: border-box;
}

/* hover affordance: deepen the strip (replaces the old opacity reveal) */
.collections-grid-link-overlay:hover .button--simple {
  background: rgba(0, 0, 0, 0.72);
}

.button--simple span {
  display: block;
}

.focus-inset:focus-visible {
  outline: 2px solid #000000;
  outline-offset: -2px;
}

/* Information Container */
.collections-grid-information {
  padding: 20px 0;
  text-align: center;
}

.collections-grid-information.container {
  max-width: 100%;
  padding: 20px 16px;
}

/* Title */
.collections-grid-title {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000000;
  line-height: 1.3;
}

.collections-grid-title.h3 {
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.collections-grid-title span {
  display: block;
}

/* Responsive Adjustments - Bootstrap 3 Standard Breakpoints */
/* Container widths handled by global .container rules in simplex.styles.responsive.css */
@media (min-width: 1200px) {
  .collections-grid {
    gap: 15px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .collections-grid {
    gap: 15px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .collections-grid {
    gap: 15px;
  }
}

@media (max-width: 749px) {
  .collections-grid-title {
    font-size: 16px;
  }

  .button--simple {
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* Touch Device Adjustments */
@media (hover: none) {
  .collections-grid-image .button {
    opacity: 1;
  }

  .collections-grid-link-overlay:hover .collections-grid-image img {
    transform: scale(1);
  }
}

/* Print Styles */
@media print {
  .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px;
  }

  .collections-grid-image .button {
    display: none;
  }

  .collections-grid-link-overlay:hover .collections-grid-image img {
    transform: none;
  }
}

/* ===================================
   HOMEPAGE SECTIONS CONSISTENT SPACING
   Ensure all homepage sections have uniform vertical spacing
   =================================== */

/* Product grid sections - match category grid spacing */
.home-page .product-grid.home-page-product-grid,
.home-page .product-grid.bestsellers,
.home-page .blog-list-homepage {
  padding: 20px 20px 0px 20px; /* Horizontal spacing for product grid */
}

/* Ensure no conflicting margins on first/last sections */
.home-page .page-body > div:first-child {
  margin-top: 15px;
}

.home-page .page-body > div:last-child {
  margin-bottom: 15px;
}

/* ===================================
   PRODUCT GRID CENTER ALIGNMENT
   Center-align product grid content on category pages
   =================================== */

/* Center the product grid container within col-md-9 */
.side-content .product-grid .item-grid.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* Remove float from product items to work with flexbox */
.side-content .product-grid .item-box {
  float: none;
}

/* Center content within each product box */
.side-content .product-grid .item-box .thumbnail {
  margin: 0 auto;
}

/* ====================================
   ANNOUNCEMENT BAR STYLES
   Modern, minimal announcement bar inspired by high-end fashion e-commerce
   ==================================== */

/* Main announcement bar container */
.announcement-bar {
/*    background-color: var(--grey-black);
    color: #ffffff;*/
    width: 100%;
    padding: 12px 20px;
    text-align: center;
    font-family: var(--font-default);
    position: relative;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.5s ease-in-out;
}

/* Announcement content wrapper */
.announcement-bar__content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Announcement text */
.announcement-bar__text {
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

/* Make <p> from Rich Editor inline so the "Details" link flows on the same line
   as the last line of text. <br> inside still works for line breaks. */
.announcement-bar .announcement-bar__text p {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Link styling — continues inline after last line of text */
.announcement-bar__link {
/*    color: #ffffff;*/
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 500;
    transition: opacity 0.2s ease;
    margin-left: 8px;
    white-space: nowrap;
}

.announcement-bar__link:hover {
    opacity: 0.8;
/*    color: #ffffff;*/
}

/* Multiple messages slider — vertical slide-up transition */
.announcement-bar__slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.announcement-bar__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out;
    pointer-events: none;
}

/* Active slide — visible at natural position */
.announcement-bar__slide.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Entering state — start below (set by JS before reflow, then removed to trigger transition) */
.announcement-bar__slide.entering {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
}

/* Exiting state — slide up and out */
.announcement-bar__slide.exiting {
    position: absolute;
    opacity: 0;
    transform: translateY(-100%);
}

/* Close button - ynakim.com style */
.announcement-bar__close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
/*    color: #ffffff;*/
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    padding: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.announcement-bar__close svg {
    width: 14px;
    height: 14px;
    display: block;
}

.announcement-bar__close:hover {
    opacity: 1;
}

.announcement-bar__close:focus {
    outline: none;
    opacity: 1;
}

.announcement-bar__close:active {
    opacity: 0.8;
}

/* Responsive design */
@media (max-width: 768px) {
    .announcement-bar {
        padding: 10px 50px 10px 15px;
    }

    .announcement-bar__text {
        font-size: 14px;
        letter-spacing: 0.3px;
    }

    .announcement-bar__close {
        right: 15px;
        width: 28px;
        height: 28px;
        padding: 6px;
    }

    .announcement-bar__close svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .announcement-bar {
        padding: 8px 12px;
    }

    .announcement-bar__text {
        font-size: 14px;
    }
}

/* Alternative color schemes (can be toggled via classes) */
.announcement-bar--dark-grey {
  /*  background-color: #2c2c2c;*/
}

.announcement-bar--brand {
/*    background-color: var(--red, #e74c3c);*/
}

.announcement-bar--white {
    /*background-color: #ffffff;
    color: #000000;*/
    border-bottom: 1px solid #e0e0e0;
}

.announcement-bar--white .announcement-bar__link {
    /*color: #000000;*/
}

.announcement-bar--white .announcement-bar__close {
   /* color: #000000;*/
}

/* UNIFIED SIDEBAR COLLAPSIBILITY FIX */
/* Ensures ALL sidebar filters are collapsible on mobile AND tablet (768px-1200px) */

/* DEBUG HELPER - DISABLED for production */
/* Debug styling removed to fix visual appearance */

/* Mobile range - ALL sidebar sections hidden by default */
@media (max-width: 767.98px) {
    .sidebar .listbox {
        display: none !important;
    }

    .sidebar .block.block-newsletter .listbox {
        display: block !important;
    }

    /* Mobile main titles with grey-black background */
    .sidebar .block .title.main-title {
        background: var(--grey-black) url("../Themes/SimplexTheme/Content/images/toggle-down-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }

    /* Mobile expanded state for main titles */
    .sidebar .block .title.main-title.arrow-up-down {
        background: var(--grey-black) url("../Themes/SimplexTheme/Content/images/toggle-up-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }
}

/* CRITICAL FIX: Bridge the 768px gap - Extend mobile behavior */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Force ALL sidebar content hidden by default - extending mobile behavior */
    /* SIMPLIFIED: Use only display for easier JavaScript control */
    .sidebar .listbox,
    .sidebar .block .listbox,
    .sidebar .block .filter-content,
    .box-shadow-wrapper .listbox,
    .box-shadow-wrapper .filter-content,
    /* Additional specific selectors for problematic containers */
    .block-category-navigation .listbox,
    .block-recently-viewed-products .listbox {
        display: none !important;
    }

    /* Allow JavaScript inline styles to override CSS */
    .sidebar .listbox[style*="display: block"],
    .sidebar .block .listbox[style*="display: block"],
    .sidebar .block .filter-content[style*="display: block"],
    .box-shadow-wrapper .listbox[style*="display: block"],
    .box-shadow-wrapper .filter-content[style*="display: block"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Exception: Newsletter signup should remain visible */
    .sidebar .block.block-newsletter .listbox {
        display: block !important;
    }

    /* Force ALL sidebar titles to be clickable - extending mobile behavior */
    .sidebar .title,
    .sidebar .block .title,
    .box-shadow-wrapper .title,
    .box-shadow-wrapper .block .title {
        background: url("../Themes/SimplexTheme/Content/images/toggle-down-arrow.png") no-repeat var(--red) right center !important;
        font-size: 16px !important;
        padding: 15px !important;
        padding-right: 60px !important;
        cursor: pointer !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 -3px 5px #aaaaaa !important;
        -moz-box-shadow: 0 -3px 5px #aaa !important;
        -webkit-box-shadow: 0 -3px 5px #aaaaaa !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Main titles (Categories, Recently Viewed) with grey-black background */
    .sidebar .block .title.main-title,
    .block.box-shadow-wrapper .title.main-title {
        background: var(--grey-black) url("../Themes/SimplexTheme/Content/images/toggle-down-arrow.png") no-repeat right center !important;
        color: #fff !important;
        font-size: 16px !important;
        padding: 15px !important;
        padding-right: 60px !important;
        cursor: pointer !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 -3px 5px #aaaaaa !important;
        -moz-box-shadow: 0 -3px 5px #aaa !important;
        -webkit-box-shadow: 0 -3px 5px #aaaaaa !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force expanded state styling - extending mobile behavior */
    .sidebar .title.arrow-up-down,
    .sidebar .block .title.arrow-up-down,
    .box-shadow-wrapper .title.arrow-up-down,
    .box-shadow-wrapper .block .title.arrow-up-down {
        background: url("../Themes/SimplexTheme/Content/images/toggle-up-arrow.png") no-repeat var(--red) right center !important;
    }

    /* Expanded state for main titles with grey-black background */
    .sidebar .block .title.main-title.arrow-up-down,
    .block.box-shadow-wrapper .title.main-title.arrow-up-down {
        background: var(--grey-black) url("../Themes/SimplexTheme/Content/images/toggle-up-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }
}

/* Layout fixes for tablet range */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Reset sidebar blocks to single column for better mobile-like behavior */
    .sidebar .block {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }

    /* Reset box-shadow-wrapper to single column as well */
    .box-shadow-wrapper {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }

    /* Ensure proper spacing and styling for listbox content */
    .sidebar .block .listbox,
    .box-shadow-wrapper .listbox {
        border: 1px solid #ddd !important;
        background: #fff !important;
        margin-top: 0 !important;
        border-top: none !important;
    }

    /* Ensure sidebar container behaves properly */
    .side-2,
    .sidebar {
        clear: both !important;
        width: 100% !important;
    }
}

/* Desktop range (1201px+) - Grey-black main titles */
@media (min-width: 1201px) {
    /* Desktop main titles with grey-black background */
    .sidebar .block .title.main-title {
        background: var(--grey-black) !important;
        color: #fff !important;
    }

    /* Desktop expanded state for main titles (if collapsible behavior is enabled) */
    .sidebar .block .title.main-title.arrow-up-down {
        background: var(--grey-black) !important;
        color: #fff !important;
    }
}


/* Discount minimum order amount — notices (pending coupon, spend-more hint) and the pending coupon chip.
   New file instead of editing a cached stylesheet (1-year cache): rename to -v3 on any later change (v2: re-entered pending coupon message). */
.alert.discount-notices {
    clear: both;
    margin: 0 0 12px;
    padding: 10px 14px;
    background-color: #eef6fb;
    border: 0;
    border-left: 3px solid #31708f;
    border-radius: 4px;
    color: #245269;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.alert.discount-notices ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alert.discount-notices li {
    font-size: 14px;
    margin: 0;
    padding: 2px 0;
}

/* Pending coupon chip: same pill as the applied chip of the grouped cart (shopping-cart-grouped-v2.css,
   dark #1e1e1e), outlined variant = saved but not applied yet. !important because that sheet uses it. */
.coupon-box .current-code.pending-code .bg-warning {
    background: #fff !important;
    color: #1e1e1e !important;
    border: 1px dashed #1e1e1e !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 6px 4px 12px;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.coupon-box .current-code.pending-code .remove-discount-button.pending-remove {
    background: transparent !important;
    border: 0 !important;
    color: #1e1e1e !important;
    width: auto !important;
    height: auto !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none !important;
}

.coupon-box .current-code.pending-code .remove-discount-button.pending-remove:hover,
.coupon-box .current-code.pending-code .remove-discount-button.pending-remove:focus-visible {
    background: #f0f0f0 !important;
}

/* Re-entered pending coupon (_DiscountBox IsPending): info, not the red "not applied" error.
   Same blue as .alert.discount-notices; html prefix beats the mobile .order-summary-content .coupon-box .message override. */
html .coupon-box .message.bg-info,
html .coupon-box .message-info {
    background: #eef6fb !important;
    color: #245269 !important;
    border: 0 !important;
    border-left: 2px solid #31708f !important;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 5px 12px;
    margin: 2px 0;
}
/* B2B Shipping Message - SimplexTheme Red Styling */

/* The text sits on a 10%-opacity tint, which is the worst case for contrast.
   Text, tint, border and the <strong> colour all derive from the shop accent
   family (SAB001 rose: the text token measures ~6.6:1 on this tint). */
.b2b-shipping-message {
    color: var(--rd-accent-red-text, #8c3b4a) !important;
    font-weight: 500;
    margin: 10px 0;
    padding: 8px 12px;
    background-color: rgba(140, 59, 74, 0.10);
    border-left: 3px solid var(--rd-accent-red, #8c3b4a);
    border-radius: 4px;
    /* the shipping method list (ul.method-list) is floated: start below it, not behind it */
    clear: both;
}

.b2b-shipping-message strong {
    color: var(--rd-accent-red-darker, #6e2a39) !important;
    font-weight: 600;
}

/* Typography Variables - SimplexTheme Compatible */
:root {
    /* --font-primary: Inherited from wigstheme.css (Montserrat) */
    --font-secondary: var(--font-default);

    /* SimplexTheme Font Sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Spacing Variables for Consistent Layout */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
}

/*!
 * B2B Registration Wizard Styles
 * Compatible with SimplexTheme and Bootstrap 3
 */

/* B2B Registration Wizard Container */
.b2b-registration-wizard {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: var(--space-8);
    margin-top: var(--space-6);
    position: relative;
    z-index: 1;
}

/* Tab Navigation Styling - Fixed for SimplexTheme */
.b2b-registration-wizard .nav-tabs {
    border-bottom: 2px solid #e7e7e7;
    background: #f8f9fa;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.b2b-registration-wizard .nav-tabs > li {
    flex: 1;
    margin-bottom: 0;
    border-bottom: none;
    display: flex;
    justify-content: center;
}

.b2b-registration-wizard .nav-tabs > li > a {
    font-family: var(--font-default);
    color: #666;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 15px 20px;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.5;
}

.b2b-registration-wizard .nav-tabs > li > a:hover,
.b2b-registration-wizard .nav-tabs > li > a:focus {
    background: rgba(140, 59, 74, 0.1);
    color: var(--red, #8c3b4a);
    border: none;
}

.b2b-registration-wizard .nav-tabs > li.active > a,
.b2b-registration-wizard .nav-tabs > li.active > a:hover,
.b2b-registration-wizard .nav-tabs > li.active > a:focus {
    color: var(--red, #8c3b4a);
    background: #fff;
    border: none;
    border-bottom: 3px solid var(--red, #8c3b4a);
}

.b2b-registration-wizard .nav-tabs > li.disabled > a {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

.b2b-registration-wizard .nav-tabs > li.disabled > a:hover {
    background: transparent;
    color: #ccc;
}

/* Tab Number and Title */
.tab-number {
    background: var(--red, #8c3b4a);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.nav-tabs > li.disabled .tab-number {
    background: #ccc;
}

.nav-tabs > li.active .tab-number,
.nav-tabs > li .tab-number.current {
    background: var(--red, #8c3b4a);
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(140, 59, 74, 0.2);
}

.nav-tabs > li .tab-number.completed {
    background: #28a745;
    color: #fff;
}

.nav-tabs > li .tab-number.completed::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
}

.tab-title {
    font-family: var(--font-default);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: 1.25;
    letter-spacing: 0;
}

/* Tab Content - Enhanced spacing */
.b2b-registration-wizard .tab-content {
    background: #fff;
    padding: 0;
    position: relative;
    z-index: 5;
    margin-top: 0;
    border-top: 1px solid #e7e7e7;
}

.b2b-registration-wizard .tab-pane {
    padding: var(--space-8) var(--space-10);
    min-height: 1100px;
    position: relative;
    z-index: 1;
    background: #fff;
}

/* Fieldset Headers - Fixed overlap with tabs */
.fieldset-header {
    margin-bottom: var(--space-6);
    margin-top: 0;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: var(--space-4);
    padding-top: var(--space-2);
    position: relative;
    z-index: 1;
}

.fieldset-header h3 {
    font-family: var(--font-default);
    color: var(--grey-black, #333);
    margin: 0 0 12px 0;
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

.fieldset-header .help-text {
    font-family: var(--font-default);
    color: #666;
    font-size: var(--text-base);
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

/* Form Groups */
.b2b-registration-wizard .form-group {
    margin-bottom: var(--space-5);
}

.b2b-registration-wizard .form-control {
    font-family: var(--font-default);
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: var(--text-base);
    line-height: 1.5;
    transition: border-color 0.2s ease;
    height: 34px;
    font-weight: 400;
    color: #333;
    box-sizing: border-box;
}

.b2b-registration-wizard .form-control:focus {
    border-color: var(--grey-black, #333);
    box-shadow: 0 0 0 1px rgba(140, 59, 74, 0.08);
    outline: none;
}

.b2b-registration-wizard .input-validation-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

/* Ensure consistent sizing for all input types */
.b2b-registration-wizard input[type="text"],
.b2b-registration-wizard input[type="email"],
.b2b-registration-wizard input[type="password"],
.b2b-registration-wizard input[type="tel"],
.b2b-registration-wizard select,
.b2b-registration-wizard textarea {
    height: 34px;
    padding: 8px 12px;
    font-size: var(--text-base);
    line-height: 1.5;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    box-sizing: border-box;
}

.b2b-registration-wizard textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* Labels */
.b2b-registration-wizard .control-label {
    font-family: var(--font-default);
    font-weight: 600;
    color: var(--grey-black, #333);
    margin-bottom: 8px;
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: 0;
}

/* Required Field Indicators - Position to right of labels */
.b2b-registration-wizard .form-title-required {
    font-family: var(--font-default);
    color: var(--red, #8c3b4a);
    font-size: var(--text-sm);
    font-weight: 400;
    display: inline;
    white-space: nowrap;
    line-height: 1.4;
    margin-left: 5px;
}

/* Only add asterisk to labels for required fields */
.b2b-registration-wizard .form-group:has(.form-title-required) .control-label::after {
    content: "*";
    color: var(--red, #8c3b4a);
    font-size: var(--text-sm);
    font-weight: 400;
    margin-left: 5px;
    display: inline;
}

/* Alternative approach for better browser support - show asterisk for specific required fields */
.b2b-registration-wizard label[for="Email"]::after,
.b2b-registration-wizard label[for="ConfirmEmail"]::after,
.b2b-registration-wizard label[for="Username"]::after,
.b2b-registration-wizard label[for="Password"]::after,
.b2b-registration-wizard label[for="ConfirmPassword"]::after,
.b2b-registration-wizard label[for="Company"]::after,
.b2b-registration-wizard label[for="Attention"]::after,
.b2b-registration-wizard label[for="ContactName"]::after,
.b2b-registration-wizard label[for="SellerPermitId"]::after,
.b2b-registration-wizard label[for="CountryId"]::after,
.b2b-registration-wizard label[for="StreetAddress"]::after,
.b2b-registration-wizard label[for="City"]::after,
.b2b-registration-wizard label[for="StateProvinceId"]::after,
.b2b-registration-wizard label[for="ZipPostalCode"]::after,
.b2b-registration-wizard label[for="Phone"]::after {
    content: "*";
    color: var(--red, #8c3b4a);
    font-size: var(--text-sm);
    font-weight: 400;
    margin-left: 5px;
    display: inline;
}

/* Hide ALL original required field indicators since we're using ::after */
.b2b-registration-wizard .form-title-required,
.b2b-registration-wizard .visible-lg.form-title-required,
.b2b-registration-wizard .visible-md.form-title-required,
.b2b-registration-wizard .visible-sm.form-title-required,
.b2b-registration-wizard .visible-xs.form-title-required {
    display: none !important;
}

/* Also hide any <span class="required">*</span> elements */
.b2b-registration-wizard .required,
.b2b-registration-wizard span.required {
    display: none !important;
}

/* Remove duplicate asterisk - nopCommerce already provides it via nop-required tag helper */

/* Fix spacing around required indicators */
.b2b-registration-wizard .visible-xs.form-title-required,
.b2b-registration-wizard .visible-lg.form-title-required,
.b2b-registration-wizard .visible-md.form-title-required,
.b2b-registration-wizard .visible-sm.form-title-required {
    margin: 5px 0;
    padding: 2px 5px;
}

/* Validation Messages - Display under field, not on right side */
.b2b-registration-wizard .field-validation-error {
    color: #dc3545;
    font-size: var(--text-xs);
    margin-top: 5px;
    display: block;
    width: 100%;
    max-width: none;
    clear: both;
    text-align: left;
    font-family: var(--font-default);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Override Bootstrap form layout to move validation messages under inputs */
.b2b-registration-wizard .form-group {
    position: relative;
}

/* Reposition validation messages from right column to below input */
.b2b-registration-wizard .form-group .col-sm-3:last-child {
    position: absolute;
    left: 25%; /* Start after the label column (col-sm-3 = 25%) */
    top: 100%;
    width: 75%; /* Take remaining width */
    margin-top: 5px;
    padding-left: 15px; /* Bootstrap column padding */
}

/* Exception: File upload validation messages need different positioning */
.b2b-registration-wizard .form-group:has([id="seller-permit-file"]) .col-sm-3:last-child,
.b2b-registration-wizard #seller-permit-file ~ .col-sm-3 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding-left: 0 !important;
    clear: both;
    z-index: 10;
}

/* Hide the required field indicators in the repositioned column */
.b2b-registration-wizard .form-group .col-sm-3:last-child .form-title-required {
    display: none;
}

.b2b-registration-wizard .field-validation-valid {
    display: none;
}

/* Standard File Upload Styling (Admin-like) */
.file-upload-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.file-upload-wrapper input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-default);
    font-size: 14px;
    color: #333;
    display: block;
    box-sizing: border-box;
    height: auto;
    text-indent: 0;
    overflow: visible;
}

.file-upload-wrapper input[type="file"]:hover {
    border-color: var(--red, #8c3b4a);
    background: rgba(140, 59, 74, 0.05);
    color: var(--red, #8c3b4a);
}

.file-upload-wrapper input[type="file"]:focus {
    border-color: var(--red, #8c3b4a);
    background: rgba(140, 59, 74, 0.08);
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 59, 74, 0.1);
}

/* Help text styling */
.file-upload-wrapper .help-block {
    margin-top: 8px;
    color: #6b7280;
    font-size: var(--text-xs);
    font-family: var(--font-default);
    line-height: 1.4;
}


/* Address Sections */
.address-section {
    margin-bottom: var(--space-10);
    padding: var(--space-6);
    background: #fafafa;
    border-radius: 4px;
    border-left: 2px solid var(--red, #8c3b4a);
}

.address-section h4 {
    font-family: var(--font-default);
    color: var(--grey-black, #333);
    margin: 0 0 var(--space-5) 0;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
}

.address-section .help-text {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
    font-style: italic;
}

/* Checkbox Styling */
.b2b-registration-wizard .checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.b2b-registration-wizard .checkbox label {
    font-weight: 500;
    color: var(--grey-black, #333);
    cursor: pointer;
    padding-left: 25px;
    position: relative;
}

.b2b-registration-wizard .checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
    transform: scale(1.2);
}

/* Wizard Buttons - Updated to match screenshot */
.wizard-buttons {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e7e7e7;
    text-align: right;
}

.wizard-buttons .btn {
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    margin-left: 10px;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    min-width: 120px;
}

/* Next/Continue button: shop accent (SAB001 primary buttons are rose, white text 7.4:1) */
.wizard-buttons .btn-primary {
    background: var(--red, #8c3b4a);
    border-color: var(--red, #8c3b4a);
    color: #fff;
}

.wizard-buttons .btn-primary:hover,
.wizard-buttons .btn-primary:focus {
    background: var(--dark-red, #6e2a39);
    border-color: var(--dark-red, #6e2a39);
    color: #fff;
}

/* Previous button styling */
.wizard-buttons .btn-default {
    background: #fff;
    border-color: #d1d5db;
    color: #6B7280;
}

.wizard-buttons .btn-default:hover,
.wizard-buttons .btn-default:focus {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.wizard-buttons .fa {
    margin: 0 5px;
}

/* Additional Sections Styling */
.newsletter-section,
.captcha-section,
.privacy-section {
    background: #fafafa;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.privacy-section h4 {
    color: var(--grey-black, #333);
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
}

.accept-privacy-policy,
.accept-consent {
    margin-bottom: 15px;
}

.accept-privacy-policy label,
.accept-consent label {
    font-weight: 500;
    color: var(--grey-black, #333);
    cursor: pointer;
    padding-left: 25px;
    position: relative;
}

.accept-privacy-policy input[type="checkbox"],
.accept-consent input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
    transform: scale(1.2);
}

.read {
    color: var(--red, #8c3b4a);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
}

.read:hover {
    color: var(--dark-red, #6e2a39);
}

/* Responsive Design - Desktop 1200px and below */
@media (max-width: 1200px) {
    /* Fix tab navigation for desktop breakpoint */
    .b2b-registration-wizard .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .b2b-registration-wizard .nav-tabs > li {
        flex: 1;
        min-width: 200px;
        text-align: center;
    }

    .b2b-registration-wizard .nav-tabs > li > a {
        padding: 15px 10px;
        min-height: 60px;
        justify-content: center;
        text-align: center;
    }

    /* Fix fieldset header spacing */
    .fieldset-header {
        margin-bottom: 25px;
        padding-bottom: 12px;
    }

    .fieldset-header h3 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    /* Adjust tab content padding */
    .b2b-registration-wizard .tab-pane {
        padding: 25px 20px;
        min-height: 800px; /* Increased for medium screens with Company tab content */
    }

    /* Fix text overlap issues */
    .fieldset-header {
        clear: both;
        margin-top: 10px;
    }

    /* Ensure proper spacing for tab navigation */
    .b2b-registration-wizard .tab-content {
        margin-top: 15px;
        clear: both;
    }

    /* Prevent text overlap with tabs */
    .b2b-registration-wizard .nav-tabs + .tab-content {
        margin-top: 0;
        border-top: 1px solid #e7e7e7;
    }
}

/* Desktop responsive improvements for 992px-1200px range */
@media (max-width: 1200px) and (min-width: 993px) {
    .b2b-registration-wizard .nav-tabs > li > a {
        padding: 12px 8px;
        font-size: 14px;
    }

    .tab-title {
        font-size: 14px;
    }

    .tab-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
        margin-right: 8px;
    }

    /* Fix spacing at this breakpoint */
    .fieldset-header {
        margin-top: 5px;
    }

    .fieldset-header h3 {
        font-size: 20px;
    }
}

/* Medium desktop responsive (769px-992px) */
@media (max-width: 992px) and (min-width: 769px) {
    .b2b-registration-wizard .nav-tabs > li {
        flex: 1;
        min-width: 180px;
    }

    .b2b-registration-wizard .nav-tabs > li > a {
        padding: 10px 6px;
        font-size: 13px;
        min-height: 55px;
    }

    .tab-title {
        font-size: 13px;
    }

    .tab-number {
        width: 26px;
        height: 26px;
        font-size: 12px;
        margin-right: 6px;
    }

    .fieldset-header h3 {
        font-size: 20px;
    }

    .b2b-registration-wizard .tab-pane {
        padding: 20px 15px;
        min-height: 750px; /* Increased for tablet screens to accommodate Company tab */
    }
}

/* Mobile responsive design - 768px and below */
@media (max-width: 768px) {
    /* Mobile fixes for page title and tabs */
    .registration-page .page-title.panel-heading h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    /* Override desktop layout for true mobile */
    .b2b-registration-wizard .nav-tabs {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        flex-wrap: nowrap !important;
    }

    /* Fix tab pane positioning on mobile */
    .b2b-registration-wizard .tab-pane {
        position: relative;
        transform: none;
    }

    .b2b-registration-wizard .nav-tabs > li {
        float: none;
        width: 100% !important;
        display: block;
        margin-bottom: 0;
        flex: none !important;
        min-width: auto !important;
    }

    .b2b-registration-wizard .nav-tabs > li > a {
        padding: 15px 20px;
        text-align: center;
        justify-content: center;
        min-height: 60px;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .tab-title {
        font-size: 14px;
    }

    .b2b-registration-wizard .tab-pane {
        padding: 20px 15px;
        min-height: 700px; /* Increased for mobile screens to accommodate Company tab */
    }

    .fieldset-header h3 {
        font-size: 20px;
    }

    .address-section {
        padding: 20px 15px;
    }

    .wizard-buttons {
        text-align: center;
    }

    .wizard-buttons .btn {
        width: 100%;
        margin: 5px 0;
    }

    /* Stack form labels and inputs on mobile */
    .b2b-registration-wizard .form-horizontal .control-label {
        text-align: left;
        margin-bottom: 8px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .b2b-registration-wizard .nav-tabs {
        flex-direction: column !important;
    }

    .b2b-registration-wizard .nav-tabs > li {
        width: 100% !important;
        display: block;
        float: none;
        flex: none !important;
        min-width: auto !important;
    }

    .tab-number {
        width: 25px;
        height: 25px;
        font-size: 12px;
        margin-right: 8px;
    }

    .tab-title {
        font-size: 13px;
    }

    .b2b-registration-wizard .nav-tabs > li > a {
        padding: 12px 15px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* High DPI / Retina Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .b2b-registration-wizard .form-control {
        border-width: 1px;
    }

    .b2b-registration-wizard .form-control:focus {
        box-shadow: 0 0 0 1px rgba(140, 59, 74, 0.2);
    }
}

/* Prevent horizontal overflow on narrow screens */
@media (max-width: 1200px) {
    .b2b-registration-wizard {
        overflow-x: hidden;
    }

    .b2b-registration-wizard .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .b2b-registration-wizard .nav-tabs::-webkit-scrollbar {
        height: 3px;
    }

    .b2b-registration-wizard .nav-tabs::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .b2b-registration-wizard .nav-tabs::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
}

/* Animation for smooth transitions */
.b2b-registration-wizard .tab-pane {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.b2b-registration-wizard .tab-pane.active {
    opacity: 1;
}

/* Progress indicator styling */
.b2b-registration-wizard .nav-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--red, #8c3b4a);
    transition: all 0.3s ease;
    width: 0;
}

.b2b-registration-wizard .nav-tabs > li:nth-child(1).active ~ ::after {
    width: 33.33%;
}

.b2b-registration-wizard .nav-tabs > li:nth-child(2).active ~ ::after {
    width: 66.66%;
}

.b2b-registration-wizard .nav-tabs > li:nth-child(3).active ~ ::after {
    width: 100%;
}

/* Focus styles for accessibility */
.b2b-registration-wizard .nav-tabs > li > a:focus {
    outline: 2px solid var(--red, #8c3b4a);
    outline-offset: 2px;
}

.b2b-registration-wizard .btn:focus {
    outline: 2px solid var(--red, #8c3b4a);
    outline-offset: 2px;
}

.b2b-registration-wizard .form-control:focus {
    outline: none;
}

/* Loading states */
.b2b-registration-wizard .please-wait {
    color: #666;
    font-style: italic;
    font-size: 12px;
}

/* Fix for SimplexTheme Integration - Page Title Separation */
.registration-page .page-title.panel-heading {
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}

.registration-page .page-title.panel-heading h1 {
    font-family: var(--font-default);
    color: var(--grey-black, #333);
    font-size: var(--text-3xl);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.25;
}

.registration-page .page-title.panel-heading .subtitle {
    font-family: var(--font-default);
    color: #666;
    font-size: var(--text-md);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 10px;
    text-align: center;
    line-height: 1.5;
}

/* Enhanced Tab Interaction States */
.b2b-registration-wizard .nav-tabs > li.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.b2b-registration-wizard .nav-tabs > li:not(.disabled) > a {
    cursor: pointer;
}

.b2b-registration-wizard .nav-tabs > li:not(.disabled) > a:hover {
    background: rgba(140, 59, 74, 0.05);
    border-bottom: 3px solid rgba(140, 59, 74, 0.3);
}

/* Fix tab transition animations */
.b2b-registration-wizard .tab-pane {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(20px);
    min-height: 1100px !important; /* Force override for Company tab content */
}

.b2b-registration-wizard .tab-pane.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateX(0);
}

.b2b-registration-wizard .tab-content {
    position: relative;
    min-height: 1500px !important; /* Increased to accommodate Company tab content */
}

/* Error state for file upload */
#seller-permit-file-error.field-validation-error {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

/* Fix for seller permit file input truncation */
#seller-permit-file {
    width: 100%;
    height: 34px;
    padding: 8px 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
    overflow: visible;
}

/* Ensure adequate bottom padding for Company tab */
.b2b-registration-wizard #company-tab {
    padding-bottom: 80px !important;
}

/* Add bottom margin to last form group in Company tab */
.b2b-registration-wizard #company-tab .form-group:last-child {
    margin-bottom: 40px;
}

/* Fix seller permit file validation message positioning */
.b2b-registration-wizard #seller-permit-file-error {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 8px 12px !important;
    padding-left: 0 !important;
    display: block;
    color: #dc3545;
    font-size: 12px;
    font-family: var(--font-default);
    font-weight: 400;
    line-height: 1.4;
    clear: both;
    z-index: 10;
    min-height: 20px;
    background: transparent;
}

/* Ensure the form group containing seller permit file has enough space */
.b2b-registration-wizard .form-group:has([id="seller-permit-file"]) {
    margin-bottom: 40px;
    padding-bottom: 15px;
    min-height: 120px; /* Ensure enough space for enhanced file upload + validation */
}

/* Alternative selector for better browser support */
.b2b-registration-wizard input#seller-permit-file {
    margin-bottom: 15px;
}

/* Fix validation message column positioning for file upload */
.b2b-registration-wizard .form-group:has([id="seller-permit-file"]) .col-sm-3:last-child {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 10px;
    padding-left: 0;
    clear: both;
}

/* Specific styling for file upload wrapper to accommodate validation message */
.b2b-registration-wizard .file-upload-wrapper {
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

/* Ensure help-block doesn't interfere with validation message */
.b2b-registration-wizard .file-upload-wrapper .help-block {
    margin-bottom: 10px;
}

/* Fix for z-index stacking issues */
.registration-page .page {
    position: relative;
    z-index: 1;
}

.b2b-registration-wizard {
    isolation: isolate; /* Create new stacking context */
}

/* Enhanced Visual Separation */
.b2b-registration-wizard .nav-tabs::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #e7e7e7;
    z-index: 1;
}

/* Step Progress Indicator Enhancement */
.b2b-registration-wizard .nav-tabs::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    background: var(--red, #8c3b4a);
    transition: all 0.3s ease;
    width: 33.33%; /* Default to first step */
    z-index: 15;
}

.b2b-registration-wizard .nav-tabs[data-current-step="2"]::after {
    width: 66.66%;
}

.b2b-registration-wizard .nav-tabs[data-current-step="3"]::after {
    width: 100%;
}

/* ===== MOBILE FIX (<=767px) =====
   The desktop wizard reserves a tall fixed min-height (1500px, set above) so the
   absolutely-stacked tabs fit the multi-column Company step. On a phone every step
   is a single column and the ACTIVE pane is in-flow (position:relative), so that
   reserve leaves a ~1000px empty gap below the form (the Account step is ~456px).
   Let the container size to its active step instead. Appended after the 1500px rule
   so it wins on equal specificity + !important without depending on file load order. */
@media (max-width: 767.98px) {
    /* Desktop stacks the wizard steps as absolutely-positioned panes and reserves a
       tall fixed height (.tab-content 1500px + .tab-pane 1100px) so the slide animation
       has room. On a phone that reserve leaves a ~1000px empty gap under step 1, and
       simply zeroing the min-heights collapses the container so steps 2/3 (still
       absolute) render on top of the footer. Fix on mobile by laying the steps out in
       NORMAL FLOW: only the active pane is shown (display:block, static), so the
       container always fits the current step. The slide transition is dropped on mobile
       (acceptable) in exchange for a correct, gap-free layout. */
    .b2b-registration-wizard .tab-content { min-height: 0 !important; }
    .b2b-registration-wizard .tab-pane {
        position: static !important; min-height: 0 !important;
        transform: none !important; transition: none !important;
    }
    .b2b-registration-wizard .tab-pane:not(.active) { display: none !important; }
    .b2b-registration-wizard .tab-pane.active {
        display: block !important; opacity: 1 !important; visibility: visible !important;
    }
}
/* ============================================================================
   MOBILE app-like registration (<=767px) — appended LAST so it wins the legacy
   mobile blocks above (which stack the 3 step-tabs vertically, ~150px of
   chrome). Best-practice pattern: ONE compact horizontal stepper row
   (numbered circles + small labels + connector line) and 44px form controls.
   ============================================================================ */
@media (max-width: 767.98px) {

    /* --- horizontal compact stepper ------------------------------------- */
    .b2b-registration-wizard .nav-tabs {
        flex-direction: row !important;
        align-items: flex-start;
        background: none;
        border-bottom: 1px solid #ececec;
        padding: 4px 0 10px;
    }
    .b2b-registration-wizard .nav-tabs > li {
        display: flex !important;
        width: auto !important;
        flex: 1 1 0 !important;
        position: relative;
    }
    /* connector line between the step circles (drawn first, circles cover it) */
    .b2b-registration-wizard .nav-tabs > li + li::before {
        content: "";
        position: absolute;
        top: 21px;                       /* centre of the 30px circle (+6px pad) */
        inset-inline-start: -50%;
        width: 100%;
        height: 2px;
        background: #e3e3e3;
    }
    .b2b-registration-wizard .nav-tabs > li > a {
        position: relative;              /* paints above the connector */
        flex-direction: column;
        gap: 6px;
        min-height: 44px;
        padding: 6px 4px !important;
        border-bottom: 0 !important;     /* active red underline -> red circle */
        background: none !important;
    }
    .b2b-registration-wizard .tab-number {
        margin-right: 0;                 /* desktop puts the label beside it */
        width: 30px !important; height: 30px !important; font-size: 13px !important;
    }
    .b2b-registration-wizard .tab-title { font-size: 12px; line-height: 1.2; }

    /* --- 44px touch ergonomics ------------------------------------------ */
    .b2b-registration-wizard .form-control,
    .b2b-registration-wizard input[type="text"],
    .b2b-registration-wizard input[type="email"],
    .b2b-registration-wizard input[type="password"],
    .b2b-registration-wizard input[type="tel"],
    .b2b-registration-wizard select {
        min-height: 44px;
        box-sizing: border-box;
    }
    .b2b-registration-wizard .btn,
    .b2b-registration-wizard button[type="submit"] {
        min-height: 44px;
    }
    .b2b-registration-wizard input[type="checkbox"],
    .registration-page .checkbox input[type="checkbox"] {
        width: 20px; height: 20px;
    }
    /* the Newsletter row is a BS3 .checkbox OUTSIDE the wizard — give the whole
       label a 44px tap row */
    .registration-page .checkbox label {
        display: flex; align-items: center; gap: 10px;
        min-height: 44px; font-size: 15px;
    }
}

/* live email availability check (step 1) */
.email-availability {
    margin-top: -10px;
}

.email-availability-checking {
    color: #666;
    padding-left: 5px;
}

.email-already-registered {
    display: block;
    clear: both;
    padding-left: 5px;
}

/* ============================================================================
   CLEAN MINIMAL PRODUCT BOX CAPTION DESIGN - SimplexTheme
   ============================================================================ */

/* CSS Custom Properties for Design System */
:root {
    /* Spacing Scale */
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-s: 4px;
    --spacing-m: 8px;
    --spacing-l: 12px;
    --spacing-xl: 16px;

    /* Typography Scale */
    --font-family-base: var(--font-default);
    --font-size-title: 16px;
    --font-size-price: 13px;
    --font-size-secondary: 13px;
    --font-size-meta: 12px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.3;
    --line-height-relaxed: 1.4;

    /* Colors */
    --color-title: #999999;
    --color-price: #333333;
    --color-secondary: #999999;
    --color-meta: #999999;
    --color-old-price: #999999;
}

/* ============================================================================
   CAPTION CONTAINER - Clean Minimal Foundation
   ============================================================================ */

/* SimplexTheme structure (.caption .details) */
.product-item .caption {
    padding: var(--spacing-m) !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: solid 1px #f0f0f0 !important;
    box-shadow: none !important;
}

.product-item .caption .details {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-m) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base theme structure (.details directly) */
.product-item .details {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-m) !important;
    margin: 0 !important;
    padding: var(--spacing-m) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   TITLE STYLING - Primary Hierarchy Element
   ============================================================================ */

/* SimplexTheme structure */
.product-item .caption .details .title-price-inline {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
}

.product-item .caption .details .product-title-inline,
.product-item .caption .details .product-title {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: calc(var(--font-size-title) * var(--line-height-base) * 2) !important;
}

.product-item .caption .details .product-title-inline a,
.product-item .caption .details .product-title a {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: var(--line-height-base) !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-item .caption .details .product-title-inline a:hover,
.product-item .caption .details .product-title a:hover {
    text-decoration: none !important;
}

/* Base theme structure */
.product-item .details .product-title {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: calc(var(--font-size-title) * var(--line-height-base) * 2) !important;
}

.product-item .details .product-title a {
    color: var(--color-title) !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-title) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-base) !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-item .details .product-title a:hover {
    color: var(--color-title) !important;
    text-decoration: none !important;
}

/* ============================================================================
   PRICE STYLING - Secondary Hierarchy Element
   ============================================================================ */

/* SimplexTheme structure */
.product-item .caption .details .prices-inline,
.product-item .caption .details .prices {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-m) !important;
    align-items: baseline !important;
    text-align: left !important;
}

.product-item .caption .details .prices-inline .price,
.product-item .caption .details .prices .price,
.product-item .caption .details .prices span {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-price) !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.product-item .caption .details .prices-inline .actual-price,
.product-item .caption .details .prices .actual-price {
    color: var(--color-price) !important;
    font-weight: 600 !important;
}

.product-item .caption .details .prices-inline .old-price,
.product-item .caption .details .prices .old-price {
    color: var(--color-old-price) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* Base theme structure */
.product-item .details .prices {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-m) !important;
    align-items: baseline !important;
    text-align: left !important;
}

.product-item .details .prices .price,
.product-item .details .prices span {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-price) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.product-item .details .prices .actual-price {
    color: var(--color-price) !important;
    font-weight: 600 !important;
}

.product-item .details .prices .old-price {
    color: var(--color-old-price) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* ============================================================================
   SECONDARY INFORMATION - Tertiary Hierarchy
   ============================================================================ */

/* SimplexTheme and Base theme structure (both use same selectors) */
.product-item .caption .details .sku,
.product-item .details .sku {
    margin: 0 !important;
    margin-bottom: var(--spacing-s) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-meta) !important;
    font-weight: 400 !important;
    line-height: var(--line-height-tight) !important;
    color: var(--color-meta) !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.product-item .caption .details .description,
.product-item .details .description {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    line-height: var(--line-height-base) !important;
    color: #999999 !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    max-height: calc(var(--font-size-secondary) * var(--line-height-base) * 2) !important;
}

/* ============================================================================
   PRE-ORDER AVAILABILITY - Meta Information
   ============================================================================ */

/* SimplexTheme and Base theme structure */
.product-item .caption .details .pre-order-availability,
.product-item .details .pre-order-availability {
    margin: 0 !important;
    margin-bottom: var(--spacing-xxs) !important;
    padding: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: var(--line-height-tight) !important;
    color: #999999 !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.product-item .caption .details .pre-order-availability .availability-label,
.product-item .caption .details .pre-order-availability .availability-date,
.product-item .details .pre-order-availability .availability-label,
.product-item .details .pre-order-availability .availability-date {
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    color: #999999 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   HIDE VISUAL CLUTTER - Minimal Design Elements
   ============================================================================ */

/* Remove decorative elements for minimal design - SimplexTheme and Base theme */
.product-item .caption .details .product-border-bottom,
.product-item .caption .details .product-rating-box,
.product-item .caption .details .rating,
.product-item .details .product-border-bottom,
.product-item .details .product-rating-box,
.product-item .details .rating {
    display: none !important;
}

/* Hide or minimize tax and shipping info if present - SimplexTheme and Base theme */
.product-item .caption .details .tax-shipping-info,
.product-item .caption .details .base-price-pangv,
.product-item .details .tax-shipping-info,
.product-item .details .base-price-pangv {
    display: none !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - Mobile-First Approach
   ============================================================================ */

/* Mobile Optimization (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-title: 15px;
        --font-size-price: 12px;
        --font-size-secondary: 12px;
        --font-size-meta: 11px;
        --spacing-s: 3px;
        --spacing-m: 6px;
    }

    .product-item .caption {
        padding: var(--spacing-s) !important;
    }

    .product-item .caption .details {
        gap: calc(var(--spacing-s) - 1px) !important;
    }
}

/* Small Mobile Optimization (< 480px) */
@media (max-width: 479px) {
    :root {
        --font-size-title: 15px;
        --font-size-price: 11px;
        --font-size-secondary: 11px;
        --font-size-meta: 10px;
        --spacing-xs: 1px;
        --spacing-s: 2px;
        --spacing-m: 4px;
    }

    .product-item .caption .details .title-price-inline {
        margin-bottom: var(--spacing-s) !important;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Focus states for keyboard navigation */
.product-item .caption .details .product-title-inline a:focus,
.product-item .caption .details .product-title a:focus,
.product-item .details .product-title a:focus {
    outline: 2px solid #ea5648 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-title: #999999;
        --color-price: #000000;
        --color-secondary: #999999;
        --color-meta: #999999;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-title: #999999;
        --color-price: #f0f0f0;
        --color-secondary: #999999;
        --color-meta: #999999;
        --color-old-price: #888888;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .product-item .caption,
    .product-item .caption * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PRINT STYLES - Optimized for Print Layout
   ============================================================================ */

@media print {
    .product-item .caption {
        break-inside: avoid !important;
        margin-bottom: 10px !important;
    }

    .product-item .caption .details .product-title-inline a,
    .product-item .caption .details .product-title a,
    .product-item .details .product-title a {
        color: #000000 !important;
        text-decoration: none !important;
    }

    .product-item .caption .details .prices-inline .actual-price,
    .product-item .caption .details .prices .actual-price,
    .product-item .details .prices .actual-price {
        color: #000000 !important;
        font-weight: bold !important;
    }
}

/* ============================================================================
   GRID-SPECIFIC OPTIMIZATIONS
   ============================================================================ */

/* Product Grid Layout */
.product-grid .item-box .product-item .caption {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.product-grid .item-box .product-item .caption .details {
    height: auto !important;
    overflow: visible !important;
}

/* OCarousel Grid Layout */
.ocarousel-grid .item-box .product-item .caption {
    height: auto !important;
    min-height: auto !important;
    padding: var(--spacing-s) !important;
}

.ocarousel-grid .item-box .product-item .caption .details {
    gap: calc(var(--spacing-s) - 1px) !important;
}

/* OCarousel Grid - Allow more height for description and pre-order-availability */
.ocarousel-grid .item-box .product-item .caption .details .description {
    -webkit-line-clamp: 3 !important;
    max-height: calc(var(--font-size-secondary) * var(--line-height-base) * 3) !important;
    font-size: 14px !important;
    color: #999999 !important;
}

.ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
    white-space: normal !important;
    max-height: none !important;
    line-height: var(--line-height-base) !important;
    font-size: 14px !important;
    color: #999999 !important;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* GPU acceleration for smooth rendering */
.product-item .caption {
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* Efficient repaints */
.product-item .caption .details > * {
    contain: layout style !important;
}

/* ============================================================================
   LEGACY BROWSER FALLBACKS
   ============================================================================ */

/* Flexbox fallback for older browsers */
.no-flexbox .product-item .caption .details {
    display: block !important;
}

.no-flexbox .product-item .caption .details > * {
    margin-bottom: 4px !important;
}

/* Line-clamp fallback */
.no-webkit-line-clamp .product-item .caption .details .product-title-inline,
.no-webkit-line-clamp .product-item .caption .details .product-title {
    max-height: 36px !important; /* Approximately 2 lines */
    overflow: hidden !important;
}

.no-webkit-line-clamp .product-item .caption .details .description {
    max-height: 32px !important; /* Approximately 2 lines */
    overflow: hidden !important;
}

/* ============================================================================
   DEBUG MODE (Uncomment for development debugging)
   ============================================================================ */

/*
.debug .product-item .caption {
    border: 1px dashed red !important;
}

.debug .product-item .caption .details > * {
    border: 1px dotted blue !important;
    background: rgba(0, 0, 255, 0.05) !important;
}
*/

/* ============================================================================
   RESPONSIVE FONT SIZES - Match .product-title-inline breakpoints
   ============================================================================ */

@media (max-width: 768px) {
    .ocarousel-grid .item-box .product-item .caption .details .description,
    .ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .description,
    .product-item .details .description {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability,
    .product-item .details .pre-order-availability {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability .availability-label,
    .product-item .caption .details .pre-order-availability .availability-date,
    .product-item .details .pre-order-availability .availability-label,
    .product-item .details .pre-order-availability .availability-date {
        font-size: 12px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .prices-inline .old-price,
    .product-item .caption .details .prices .old-price,
    .product-item .details .prices .old-price {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .ocarousel-grid .item-box .product-item .caption .details .description,
    .ocarousel-grid .item-box .product-item .caption .details .pre-order-availability {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .description,
    .product-item .details .description {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability,
    .product-item .details .pre-order-availability {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .pre-order-availability .availability-label,
    .product-item .caption .details .pre-order-availability .availability-date,
    .product-item .details .pre-order-availability .availability-label,
    .product-item .details .pre-order-availability .availability-date {
        font-size: 11px !important;
        color: #999999 !important;
    }

    .product-item .caption .details .prices-inline .old-price,
    .product-item .caption .details .prices .old-price,
    .product-item .details .prices .old-price {
        font-size: 11px !important;
    }
}

/* Pre-order Availability Display Styles - Separate Line with Title Styling */
.pre-order-availability {
    flex: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    display: block;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: inherit !important;
}

.pre-order-availability .availability-label {
}

.pre-order-availability .availability-date {
}

/* Ocarousel-grid specific styling to match description color */
.ocarousel-grid .pre-order-availability,
.ocarousel-grid .pre-order-availability .availability-label,
.ocarousel-grid .pre-order-availability .availability-date {
}

/* Base theme specific styles */
.product-item .details .pre-order-availability {
    padding: 0;
    border: none;
    margin: 0;
    display: block;
    margin-bottom: 5px;
}

/* SimplexTheme specific styles */
.simplex-theme .product-item .caption .details .pre-order-availability,
.product-item.clearfix .caption .details .pre-order-availability {
    flex: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    display: block;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #999999 !important;
    margin-bottom: 5px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .pre-order-availability {
        font-size: 11px;
        margin: 0;
    }

    .pre-order-availability .availability-label,
    .pre-order-availability .availability-date {
        display: inline;
        font-size: 11px;
    }

    /* Ensure ocarousel-grid maintains color consistency on mobile */
    .ocarousel-grid .pre-order-availability,
    .ocarousel-grid .pre-order-availability .availability-label,
    .ocarousel-grid .pre-order-availability .availability-date {
    }
}

@media (max-width: 480px) {
    .pre-order-availability {
        font-size: 10px;
        margin: 0;
        margin-bottom: 5px;
    }

    /* Ensure ocarousel-grid maintains color consistency on small mobile */
    .ocarousel-grid .pre-order-availability,
    .ocarousel-grid .pre-order-availability .availability-label,
    .ocarousel-grid .pre-order-availability .availability-date {
    }
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
    .pre-order-availability {
        color: #aaa;
    }

    .pre-order-availability .availability-label {
    }

    .pre-order-availability .availability-date {
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .pre-order-availability .availability-date {
        color: #333;
        font-weight: normal;
    }
}

/* Product Title Inline - Now uses old pre-order availability styling (Swapped from pre-order-availability) */
.product-title-inline {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #999;
    text-align: left;
    display: inline;
}

.product-title-inline a {
    font-weight: normal;
    color: #999;
    font-size: 12px;
}

/* SimplexTheme specific styles for product-title-inline */
.simplex-theme .product-item .caption .details .product-title-inline,
.product-item.clearfix .caption .details .product-title-inline {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #333333;
    display: inline;
}

/* Responsive styles for product-title-inline */
@media (max-width: 768px) {
    .product-title-inline {
        font-size: 11px;
        margin: 0;
    }

    .product-title-inline a {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .product-title-inline {
        font-size: 10px;
        margin: 0;
    }

    .product-title-inline a {
        font-size: 10px;
    }
}

/* Dark theme compatibility for product-title-inline */
@media (prefers-color-scheme: dark) {
    .product-title-inline {
        color: #aaa;
    }

    .product-title-inline a {
        color: #aaa;
    }
}

/* High contrast mode for product-title-inline */
@media (prefers-contrast: high) {
    .product-title-inline a {
        color: #333;
        font-weight: normal;
    }
}
/* Discount Code and Gift Cards - Neutral Color Scheme Override */

/* Remove bright colors and use neutral styling */
.coupon-box, .giftcard-box {
    background: #f9f9f9 !important;
    border-color: #ddd !important;
    box-shadow: 0px 0px 2px #e0e0e0 !important;
}

.coupon-box .title, .giftcard-box .title {
    background: #f5f5f5 !important;
    color: #666 !important;
    border-bottom-color: #ddd !important;
}

/* Neutral message colors */
.coupon-box .message.bg-success, 
.giftcard-box .message-success {
    background: #f0f8ff !important;
    color: #555 !important;
    border: 1px solid #d6ebff !important;
}

.coupon-box .message.bg-danger, 
.giftcard-box .message-failure {
    background: #fef8f8 !important;
    color: #666 !important;
    border: 1px solid #f0d0d0 !important;
}

/* Applied discount code - neutral green */
.current-code .bg-success,
.applied-discount-code.bg-success {
    background: #f0f8f0 !important;
    color: #555 !important;
    border: 1px solid #d5e5d5 !important;
}

/* Button styling - more subdued */
.apply-discount-coupon-code-button,
.apply-gift-card-coupon-code-button {
    background: #f8f8f8 !important;
    border: 1px solid #ccc !important;
    color: #666 !important;
}

.apply-discount-coupon-code-button:hover,
.apply-gift-card-coupon-code-button:hover {
    background: #e8e8e8 !important;
    color: #555 !important;
}

/* Input fields - neutral styling */
.discount-coupon-code,
.gift-card-coupon-code {
    border-color: #ddd !important;
    background: #fff !important;
}

/* Remove any color emphasis from wrapper */
.cart-box-wrapper {
    color: #666 !important;
}

/* Responsive overrides */
@media (max-width: 767px) {
    .order-summary-content .coupon-box .message, 
    .order-summary-content .giftcard-box .message {
        background: #f9f9f9 !important;
        color: #666 !important;
    }
}
/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(../lib_npm/jquery-ui-dist/"images/ui-icons_555555_256x240.png")&iconsHighlight=url(../lib_npm/jquery-ui-dist/"images/ui-icons_777620_256x240.png")&iconsHeader=url(../lib_npm/jquery-ui-dist/"images/ui-icons_444444_256x240.png")&iconsError=url(../lib_npm/jquery-ui-dist/"images/ui-icons_cc0000_256x240.png")&iconsDefault=url(../lib_npm/jquery-ui-dist/"images/ui-icons_777777_256x240.png")&iconsContent=url(../lib_npm/jquery-ui-dist/"images/ui-icons_444444_256x240.png")&iconsActive=url(../lib_npm/jquery-ui-dist/"images/ui-icons_ffffff_256x240.png")&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;-ms-filter:"alpha(opacity=0)"}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:75%;width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;-ms-filter:"alpha(opacity=25)";opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:pointer;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:.222em 0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:2em}.ui-spinner-button{width:1.6em;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top-style:none;border-bottom-style:none;border-right-style:none}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#2b2b2b;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.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 #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-checked{border:1px solid #dad55e;background:#fffa90}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;-ms-filter:"alpha(opacity=70)";font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;-ms-filter:"alpha(opacity=35)";background-image:none}.ui-state-disabled .ui-icon{-ms-filter:"alpha(opacity=35)"}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_444444_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_cc0000_256x240.png")}.ui-button .ui-icon{background-image:url("../lib_npm/jquery-ui-dist/images/ui-icons_777777_256x240.png")}.ui-icon-blank.ui-icon-blank.ui-icon-blank{background-image:none}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.003;-ms-filter:Alpha(Opacity=.3)}.ui-widget-shadow{-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}
/**
 * Swiper 11.1.14
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 12, 2024
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../Themes/SimplexTheme/Content/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

/*
 * TABLET GRID LAYOUT FIX
 * Unified 3-column layout for tablets (768px-1199px)
 *
 * Solution: With vertical sidebar stacking, full width allows consistent 3-column grid
 */

/* TABLET LAYOUT: Unified 3-column for all tablets (768-1199px) */
@media (min-width: 768px) and (max-width: 1199.98px) {

    /* PURE FLEXBOX CONTAINER */
  .product-grid .item-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    overflow: hidden !important;
    justify-content: center;
  }

    /* 3-COLUMN LAYOUT: Consistent across all tablet sizes */
    .product-grid .item-grid .item-box.col-md-4 {
        flex: 0 0 33.333333% !important;
        width: 33.333333% !important;
        max-width: 33.333333% !important;

        padding: 12px !important;
        margin-bottom: 25px !important;

        float: none !important;
        clear: none !important;
        box-sizing: border-box !important;
    }

    /* Clear every 3rd item for 3-column layout */
    .product-grid .item-grid .item-box.col-md-4:nth-child(3n+1) {
        clear: left !important;
    }

    /* Thumbnail sizing for 3-column */
    .product-grid .item-grid .item-box.col-md-4 .thumbnail {
        min-height: 420px;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Images for 3-column layout */
    .product-grid .item-grid .item-box.col-md-4 .picture {
        width: 100%;
        max-width: 220px;
        height: auto;
        margin: 0 auto;
    }

    .product-grid .item-grid .item-box.col-md-4 .picture img {
        width: 100%;
        max-width: 220px;
        height: auto;
        object-fit: contain;
    }
}

/* Fallback for older browsers that don't support flexbox */
@supports not (display: flex) {
    @media (min-width: 768px) and (max-width: 1199.98px) {
        .product-grid .item-grid {
            display: block !important;
        }

        .product-grid .item-grid .item-box.col-md-4 {
            float: left !important;
        }

        /* Enhanced clearfix for float-based layout */
        .product-grid .item-grid .item-box.col-md-4:nth-child(3n+1) {
            clear: left !important;
        }

        .product-grid .item-grid::after {
            content: "";
            display: table;
            clear: both;
        }
    }
}

/* DESKTOP GRID FIX: Force 3-column layout for screens 1200px+ */
@media (min-width: 1200px) {
    /* Force flexbox container */
  .product-grid .item-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    justify-content: center;
  }

    /* Force all items to display and take exact 33.33% width */
    .product-grid .item-grid .item-box.col-md-4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 30px !important;
        float: none !important;
        clear: none !important;
    }
}
/*!
 * OCarousels Simplex Styling Override
 * Transforms NopStation.Plugin.Widgets.OCarousels to match Simplex design system
 * Compatible with Simplex Theme v2.9.0 and nopCommerce 4.80
 * Generated by SuperClaude v4 Workflow System
 */

/* ===============================================
   SIMPLEX DESIGN SYSTEM INTEGRATION
   =============================================== */

/* Apply Simplex typography to all carousel elements */
.ocarousel-grid,
.ocarousel-grid .title,
.ocarousel .category-name,
.ocarousel .manufacturer-name,
.ocarousel-background {
    font-family: var(--font-default);
}

/* ===============================================
   SIMPLEX COLOR TRANSFORMATION
   =============================================== */

/* Loader Animation - Transform blue to Simplex red */
.lds-ellipsis div {
    background: var(--red, #ea5648) !important;
}

/* Title styling with inverted color scheme - shop heading face (--font-primary) */
.ocarousel-grid .title,
.ocarousel-grid .title *,
.ocarousel-title,
.ocarousel-title *,
.widget-title.ocarousel,
.widget-title.ocarousel *,
.section-title.ocarousel,
.section-title.ocarousel *,
.carousel-header .title,
.carousel-header .title *,
.ocarousel-container .title,
.ocarousel-container .title *,
.home-page-product-grid .title,
.home-page-product-grid .title *,
.block-title,
.block-title * {
    color: var(--grey-black, #333333) !important; /* Grey-black for titles */
    border-bottom-color: #ccc !important;
    font-family: var(--font-primary) !important; /* shop heading face */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    text-align: center !important; /* Center title horizontally */
}

.ocarousel-grid .title strong,
.ocarousel-title strong,
.widget-title.ocarousel strong,
.section-title.ocarousel strong,
.carousel-header .title strong,
.ocarousel-container .title strong {
    font-family: var(--font-primary) !important; /* shop heading face */
    font-weight: 700 !important;
    color: var(--grey-black, #333333) !important; /* Grey-black accent */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Enhanced title hierarchy for all carousel contexts */
.ocarousel h1, .ocarousel h2, .ocarousel h3,
.ocarousel h4, .ocarousel h5, .ocarousel h6 {
    font-family: var(--font-primary);
    color: var(--grey-black, #333333);
}

/* Category and manufacturer names */
.ocarousel .category-name,
.ocarousel .manufacturer-name {
    color: var(--grey-black, #333333);
    font-family: var(--font-default);
    font-weight: 400;
}

/* Widget/section title enhancements for carousel integration */
/* Enhanced section title styling for all carousel contexts */
.home-page-product-grid .title,
.widget-block .block-title,
.product-carousel-title,
[class*="carousel"] .section-header {
    font-family: var(--font-primary) !important;
    color: var(--grey-black, #333333) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* Add Simplex-style underline accent */
.home-page-product-grid .title:after,
.widget-block .block-title:after,
.product-carousel-title:after,
.ocarousel-grid .title:after,
.block-title:after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 3px !important;
    background-color: #f0f0f0 !important;
}

/* ===============================================
   NAVIGATION CONTROLS - AUTHENTIC SIMPLEX STYLING
   =============================================== */

/* Navigation Buttons - Transparent with FontAwesome icons only */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev,
.ocarousel-grid .ocarousel .owl-nav button.owl-next,
.ocarousel .owl-nav button.owl-prev,
.ocarousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 35px;
    height: 35px;
    padding: 10px;
    cursor: pointer;
    z-index: 15;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    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: transparent !important;
    color: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    border: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 0 !important; /* Hide HTML text content (???? */
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-prev:hover,
.ocarousel-grid .ocarousel .owl-nav button.owl-next:hover,
.ocarousel .owl-nav button.owl-prev:hover,
.ocarousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    color: #ffffff !important; /* White icon on hover */
    border: none !important;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-prev:focus,
.ocarousel-grid .ocarousel .owl-nav button.owl-next:focus,
.ocarousel .owl-nav button.owl-prev:focus,
.ocarousel .owl-nav button.owl-next:focus,
.owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-next:focus {
    outline: none;
    background: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    color: #ffffff !important; /* White icon on focus */
    border: none !important;
}

/* Navigation Button Positioning - Different for each slider */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    left: 10px !important; /* FIXED: Moved inside container to prevent overflow clipping */
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    right: 10px !important; /* FIXED: Moved inside container to prevent overflow clipping */
}

/* Home new products slider navigation positioning - vertically centered */
#home-new-products-slider.owl-carousel .owl-nav button.owl-prev,
.product-grid.home-page-product-grid .owl-nav button.owl-prev {
    position: absolute !important;
    left: -40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#home-new-products-slider.owl-carousel .owl-nav button.owl-next,
.product-grid.home-page-product-grid .owl-nav button.owl-next {
    position: absolute !important;
    right: -40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Home bestseller slider navigation positioning - centered at product image height */
#home-bestseller-slider.owl-carousel .owl-nav button.owl-prev,
.product-grid.bestsellers .owl-nav button.owl-prev {
    position: absolute !important;
    left: -40px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

#home-bestseller-slider.owl-carousel .owl-nav button.owl-next,
.product-grid.bestsellers .owl-nav button.owl-next {
    position: absolute !important;
    right: -40px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}


/* ===============================================
   SHARP EDGE AESTHETIC
   =============================================== */

/* Apply border-radius: 0px to all carousel elements */
.carousel-grid-background,
.ocarousel-background,
.ocarousel-item,
.OCarousel-container .OCarousel-picture-wrapper .title,
.ocarousel-grid .ocarousel .owl-nav button {
    border-radius: 0px !important;
}

/* ===============================================
   ENHANCED VISUAL CONSISTENCY
   =============================================== */

/* Background overlays with Simplex styling */
.ocarousel-background::before {
    background: rgba(234, 86, 72, 0.05); /* Subtle red tint */
}

/* Crimson theme specific - Title overlays */
.OCarousel-container .OCarousel-picture-wrapper .title {
    background: rgba(255, 255, 255, 0.95);
    color: var(--grey-black, #333333);
    font-weight: 600;
    border-radius: 0px;
}

.OCarousel-container .OCarousel-picture-wrapper .title strong {
    color: var(--red, #ea5648);
    font-weight: 700;
}

/* ===============================================
   RESPONSIVE ENHANCEMENTS
   =============================================== */

/* Mobile optimizations */
@media (max-width: 991.98px) {
    .OCarousel-container .OCarousel-picture-wrapper .title {
        background: var(--red, #ea5648);
        color: #fff;
        font-weight: 600;
    }

    .OCarousel-container .OCarousel-picture-wrapper .title strong {
        color: #fff;
    }

    /* Adjust navigation buttons for mobile */
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        font-size: 20px;
        padding: 8px 12px !important;
    }
}

/* ===============================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================== */

/* Focus states for keyboard navigation */
.ocarousel-grid .ocarousel .owl-nav button:focus {
    outline: 2px solid var(--red, #ea5648);
    outline-offset: 2px;
}

/* Enhanced High Contrast Mode Support for Accessibility */
@media (prefers-contrast: high) {
    .ocarousel-grid .title {
        border-bottom-width: 3px;
        color: #000000 !important;
    }

    /* High contrast navigation buttons */
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-prev:hover,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    /* High contrast product buttons */
    .ocarousel .item-box .product-box-add-to-cart-button,
    .ocarousel .item-box .btn.btn-primary,
    .ocarousel .item-box .add-to-cart-button {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .ocarousel .item-box .add-to-wishlist-button,
    .ocarousel .item-box .add-to-compare-list-button {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
    }

    /* High contrast product cards */
    .ocarousel .item-box .product-item {
        border: 3px solid #000000 !important;
    }
}

/* ===============================================
   PERFORMANCE OPTIMIZATIONS
   =============================================== */

/* Enhanced Performance Optimizations */
.ocarousel-grid .ocarousel .owl-nav button,
.ocarousel .item-box .add-to-wishlist-button,
.ocarousel .item-box .add-to-compare-list-button,
.ocarousel .item-box .product-box-add-to-cart-button,
.ocarousel .item-box .product-item,
.lds-ellipsis div {
    will-change: transform, background-color, box-shadow;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Optimize image rendering for 4:3 aspect ratio */
.ocarousel .item-box .product-item .picture a img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

/* ===============================================
   HOME PAGE TOP SLIDER HEIGHT CONSTRAINT
   =============================================== */

/* Set max-height 500px for home page top slider on desktop only */
@media (min-width: 992px) {
    /* CRITICAL: Use max-height for flexible behavior while maintaining limits */
    .slider-grid {
        max-height: 800px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .slider-grid .owl-stage-outer {
        max-height: 800px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .slider-grid .owl-stage {
        max-height: 800px !important;
        height: auto !important;
    }

    /* Ensure slide containers use flexible height up to maximum */
    .slider-grid .owl-item {
        max-height: 800px !important;
        height: auto !important;
        display: block !important;
    }

    /* Target all possible slider content containers */
    .slider-grid .owl-item > *,
    .slider-grid .owl-item > div,
    .slider-grid .owl-item > a,
    .slider-grid .slide,
    .slider-grid .carousel-item,
    .slider-grid .slider-item {
        max-height: 800px !important;
        height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* All slider images - flexible height with maximum constraint */
    .slider-grid img,
    .slider-grid .owl-item img,
    .slider-grid .ocarousel-background img,
    .slider-grid .carousel-item img,
    .slider-grid .slide img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: 800px !important;
        min-height: 300px !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    /* ===============================================
       SLIDER TEXT SIZE REDUCTIONS FOR .slider-grid
       =============================================== */

    /* Much smaller font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 24px !important; /* Much smaller - reduced from 32px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Much smaller font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 13px !important; /* Much smaller - reduced from 16px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }

    /* ===============================================
       REDUCE .slider-container MARGIN FOR .slider-grid
       =============================================== */

    /* Reduce .slider-container margin to 0px within .slider-grid */
    .slider-grid .slider-container {
        margin: 0px !important;
    }

    /* ===============================================
       SLIDER-GRID NAVIGATION ARROW POSITIONING FIX
       =============================================== */

    /* Fix navigation arrow positioning for .slider-grid after margin reduction */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        position: absolute !important;
        left: 10px !important; /* ADJUSTED: Positioned inside container due to 0px margin */
        z-index: 20 !important; /* Higher z-index to ensure visibility above slider content */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        position: absolute !important;
        right: 10px !important; /* ADJUSTED: Positioned inside container due to 0px margin */
        z-index: 20 !important; /* Higher z-index to ensure visibility above slider content */
    }

    /* Ensure .slider-grid container allows for proper navigation display */
    .slider-grid {
        position: relative !important;
        overflow: visible !important;
    }

    /* Make sure .slider-grid owl-carousel has relative positioning */
    .slider-grid .owl-carousel {
        position: relative !important;
        overflow: hidden !important; /* Keep content clipped but allow nav buttons to show */
    }

    /* ===============================================
       REDUCE .slider-caption MARGINS/PADDING FOR .slider-grid
       =============================================== */

    /* Much smaller caption spacing to fit better with image proportions */
    .slider-grid .slider-caption,
    .slider-grid .slide-caption,
    .slider-grid .caption,
    .slider-grid .slide-content {
        padding: 12px 16px !important; /* Much smaller - reduced from 20px 25px */
        margin: 8px !important; /* Much smaller - reduced from 15px */
    }

    /* Minimal spacing in caption text elements */
    .slider-grid .slider-caption *,
    .slider-grid .slide-caption *,
    .slider-grid .caption * {
        margin-bottom: 4px !important; /* Much smaller - reduced from 8px */
    }

    /* Minimal top/bottom margins for caption container */
    .slider-grid .slider-caption:first-child,
    .slider-grid .slide-caption:first-child {
        margin-top: 6px !important; /* Reduced from 10px */
    }

    .slider-grid .slider-caption:last-child,
    .slider-grid .slide-caption:last-child {
        margin-bottom: 6px !important; /* Reduced from 10px */
    }
}

/* ===============================================
   PRINT STYLES
   =============================================== */

@media print {
    .ocarousel-grid .ocarousel .owl-nav,
    .lds-ellipsis {
        display: none !important;
    }

    .ocarousel-grid .title {
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
    }
}

/* ===============================================
   PRODUCT ITEM LAYOUT FIXES
   =============================================== */

/* Fix picture height issues in carousel product items - 3:4 aspect ratio */
.ocarousel .item-box .product-item .picture {
    width: 100%;
    aspect-ratio: 3/4; /* 3:4 aspect ratio (width:height) */
    overflow: hidden;
    position: relative;
    margin-bottom: 4px; /* OPTIMIZED: 8px ??4px for more image space */
    border-radius: 0px; /* Sharp edge aesthetic */
}

.ocarousel .item-box .product-item .picture a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ocarousel .item-box .product-item .picture a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

/* Hover effects for carousel product images */
.ocarousel .item-box .product-item .picture a:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    -moz-transform: translate(-50%, -50%) scale(1.05);
    -o-transform: translate(-50%, -50%) scale(1.05);
}

/* ===============================================
   OPTION 1: INCREASED PRODUCT CARD SIZE (PHASE 4)
   =============================================== */

/* Product Card Layout - Increased Container Size with 3:4 Ratio Maintained */
.ocarousel .item-box .product-item {
    background: #ffffff;
    border: 2px solid #f8f8f8;
    border-radius: 0px; /* Sharp edge aesthetic */
    padding: 8px; /* OPTIMIZED: Previous phase optimization maintained */
    height: auto;
    min-height: 640px; /* INCREASED: 560px ??640px (+80px, 14% increase for larger images) */
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Enhanced Product Card Hover Effect */
.ocarousel .item-box .product-item:hover {
    border-color: #bbbb8e;
    box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    -webkit-box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    -moz-box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    transform: translateY(-3px);
}

/* Product title styling fixes */
.ocarousel .item-box .product-item .product-title {
    height: auto;
    min-height: 40px;
    margin-bottom: 4px; /* OPTIMIZED: 6px ??4px for more image space */
    text-align: center;
    font-family: var(--font-default);
    line-height: 1.3;
}

.ocarousel .item-box .product-item .product-title a {
    color: var(--grey-black, #333333);
    font-weight: 200;
    font-size: 14px;
    text-decoration: none;
    display: block;
}

.ocarousel .item-box .product-item .product-title a:hover {
    color: var(--red, #ea5648);
}

/* Price styling - OPTIMIZED: Further reduced margin-bottom for more image space */
.ocarousel .item-box .product-item .prices {
    text-align: center;
    margin-bottom: 4px; /* OPTIMIZED: 6px ??4px for more image space (Phase 3) */
}

.ocarousel .item-box .product-item .prices .price {
    font-family: var(--font-default);
    font-weight: 200;
    color: var(--grey-black, #333333);
    font-size: 14px;
}

.ocarousel .item-box .product-item .prices .price.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
    font-size: 14px;
    display: inline-block;
}

/* Add to Cart Button - Professional Simplex Styling - OPTIMIZED: Reduced padding and min-height */
.ocarousel .item-box .product-box-add-to-cart-button,
.ocarousel .item-box .btn.btn-primary,
.ocarousel .item-box button.btn-primary,
.ocarousel .item-box .add-to-cart-button,
.ocarousel .item-box input[type="button"],
.ocarousel .product-item .btn,
.ocarousel .product-item button,
.owl-carousel .item-box button,
.owl-carousel .product-item .btn,
.ocarousel .item-box .btn-secondary,
.ocarousel .item-box .rent-button,
.ocarousel .item-box input[value*="RENT"],
.ocarousel .item-box input[value*="ADD TO CART"] {
    /* Base Styling */
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    color: var(--grey-black, #333333) !important;
    border-radius: 0px !important;

    /* Typography */
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Layout - OPTIMIZED: Reduced vertical padding and min-height for more image space */
    padding: 10px 20px !important; /* OPTIMIZED: 12px ??10px vertical for more image space (Phase 3) */
    width: 100% !important;
    min-height: 42px !important; /* OPTIMIZED: 45px ??42px for more image space (Phase 3) */

    /* Effects */
    transition: all 0.3s ease-in-out !important;
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

/* Add to Cart Button Hover States - Enhanced Professional Animation */
.ocarousel .item-box .product-box-add-to-cart-button:hover,
.ocarousel .item-box .btn.btn-primary:hover,
.ocarousel .item-box button.btn-primary:hover,
.ocarousel .item-box .add-to-cart-button:hover,
.ocarousel .item-box input[type="button"]:hover,
.ocarousel .product-item .btn:hover,
.ocarousel .product-item button:hover,
.owl-carousel .item-box button:hover,
.owl-carousel .product-item .btn:hover,
.ocarousel .item-box .btn-secondary:hover,
.ocarousel .item-box .rent-button:hover,
.ocarousel .item-box input[value*="RENT"]:hover,
.ocarousel .item-box input[value*="ADD TO CART"]:hover {
    background-color: var(--red, #ea5648) !important;
    background: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(234, 86, 72, 0.4) !important;
}

/* Enhanced Focus States for Accessibility Compliance */
.ocarousel .item-box .product-box-add-to-cart-button:focus,
.ocarousel .item-box .btn.btn-primary:focus,
.ocarousel .item-box button.btn-primary:focus,
.ocarousel .item-box .add-to-cart-button:focus,
.ocarousel .item-box input[type="button"]:focus,
.ocarousel .product-item .btn:focus,
.ocarousel .product-item button:focus {
    outline: none !important;
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(234, 86, 72, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Focus States for Wishlist and Compare Buttons */
.ocarousel .item-box .add-to-wishlist-button:focus,
.ocarousel .item-box .add-to-compare-list-button:focus {
    outline: none !important;
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    box-shadow: 0 0 0 4px rgba(234, 86, 72, 0.4) !important;
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* ISSUE #2 FIX: Wishlist Button Container - Prevent Left Truncation */
.ocarousel .item-box .wishlist-compare-wrapper,
.ocarousel .product-item .wishlist-compare-wrapper,

/* Show on hover - targeting both item-box and product-item structures */
.ocarousel .item-box:hover .wishlist-compare-wrapper,
.ocarousel .product-item:hover .wishlist-compare-wrapper,

/* ISSUE #2 FIX: Wishlist Button Dimensions - Prevent Left Truncation */
.ocarousel .item-box .add-to-wishlist-button,
.ocarousel .item-box .add-to-compare-list-button,
.ocarousel .item-box .button-2,
.ocarousel .product-item .add-to-wishlist-button,
.ocarousel .product-item .add-to-compare-list-button,
.ocarousel .product-item .button-2,

/* FIXED: Enhanced Unicode Icons for Wishlist and Compare Buttons */
.ocarousel .item-box .add-to-wishlist-button::before,
.ocarousel .product-item .add-to-wishlist-button::before,

/* FIXED: Enhanced Unicode Icons for Compare Buttons */
.ocarousel .item-box .add-to-compare-list-button::before,
.ocarousel .product-item .add-to-compare-list-button::before,

/* Wishlist Button Hover States - White Heart on Red Background */
.ocarousel .item-box .add-to-wishlist-button:hover,
.ocarousel .item-box .add-to-compare-list-button:hover,
.ocarousel .item-box .button-2:hover,

/* White heart icon color on hover */
.ocarousel .item-box .add-to-wishlist-button:hover::before,

/* White compare icon color on hover */
.ocarousel .item-box .add-to-compare-list-button:hover::before,

/* Compare Button - Professional Styling with Proper Icon */
.ocarousel .item-box .add-to-compare-list-button {
    background-image: url('../Themes/SimplexTheme/Content/images/product-compare-icon.png') !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}

.ocarousel .item-box .add-to-compare-list-button:hover {
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    background-image: url('../Themes/SimplexTheme/Content/images/product-compare-icon.png') !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    opacity: 1 !important;
}

/* Show buttons on product hover for better UX */
.ocarousel .item-box .product-item:hover .add-to-wishlist-button,
.ocarousel .item-box .product-item:hover .add-to-compare-list-button {
    opacity: 1 !important;
}

/* ===============================================
   RESPONSIVE LAYOUT FIXES
   =============================================== */

/* RESPONSIVE MIN-HEIGHT FIX: Tablet Range (768px-1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    /* PHASE 4: Increased min-height for tablets to accommodate larger images */
    .ocarousel .item-box .product-item {
        min-height: 480px !important; /* INCREASED: 420px ??480px (+60px, 14% increase proportional to desktop) */
    }
}

/* Enhanced Mobile Optimizations */
@media (max-width: 767.98px) {

    /* .slider-grid navigation positioning for mobile */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        left: 8px !important; /* MOBILE: Closer to edge but still visible */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        right: 8px !important; /* MOBILE: Closer to edge but still visible */
    }

    /* ===============================================
       RESPONSIVE SLIDER TEXT SIZES FOR MOBILE
       =============================================== */

    /* Mobile font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 20px !important; /* Mobile - reduced from desktop 24px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Mobile font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 11px !important; /* Mobile - reduced from desktop 13px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }
}

/* ===============================================
   NAVIGATION BUTTONS - AUTHENTIC SIMPLEX STYLING
   =============================================== */

/* Navigation Button Positioning - Symmetric Outside Layout */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    left: -24px !important; /* SYMMETRIC: Clean outside positioning */
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    right: -24px !important; /* SYMMETRIC: Matches left positioning exactly */
}

/* Home featured slider positioning - separate from ocarousel-grid */

/* Enhanced Mobile Navigation Positioning */
@media (max-width: 767.98px) {
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        left: -20px !important; /* SYMMETRIC: Balanced mobile positioning */
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        right: -20px !important; /* SYMMETRIC: Matches left positioning for visual balance */
    }

    /* Home featured slider mobile positioning - separate */
}

/* ===============================================
   FINAL CLEANUP & OVERRIDES
   =============================================== */

/* Enhanced Tablet Optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* .slider-grid navigation positioning for tablets */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        left: 9px !important; /* TABLET: Balanced positioning */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        right: 9px !important; /* TABLET: Balanced positioning */
    }

    /* ===============================================
       RESPONSIVE SLIDER TEXT SIZES FOR TABLET
       =============================================== */

    /* Tablet font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 22px !important; /* Tablet - reduced from desktop 24px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Tablet font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 12px !important; /* Tablet - reduced from desktop 13px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        left: -22px !important; /* SYMMETRIC: Balanced tablet positioning */
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        right: -22px !important; /* SYMMETRIC: Matches left positioning for visual balance */
    }

    /* Home featured slider tablet positioning - separate */
}

/* ===============================================
   COMPREHENSIVE FONT OVERRIDE - MAXIMUM SPECIFICITY
   =============================================== */

/* Ultimate font override for ocarousel-grid .title elements to ensure the shop heading face is applied */
body .ocarousel-grid .title,
body .ocarousel-grid .title *,
html body .ocarousel-grid .title,
html body .ocarousel-grid .title * {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--grey-black, #333333) !important;
}

/* Maximum specificity for strong elements within carousel titles */
body .ocarousel-grid .title strong,
body .ocarousel-grid .title strong *,
html body .ocarousel-grid .title strong,
html body .ocarousel-grid .title strong * {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--grey-black, #333333) !important;
}

/* ===============================================
   NAVIGATION BUTTON CONTENT (ICONS)
   =============================================== */

/* Navigation Arrow Icons - FontAwesome 4.7.0 Chevron */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev:before,
.ocarousel .owl-nav button.owl-prev:before,
.owl-carousel .owl-nav button.owl-prev:before,
#home-new-products-slider.owl-carousel .owl-nav button.owl-prev:before,
#home-bestseller-slider.owl-carousel .owl-nav button.owl-prev:before {
    content: '\f053' !important; /* FontAwesome 4.7 chevron-left */
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next:before,
.ocarousel .owl-nav button.owl-next:before,
.owl-carousel .owl-nav button.owl-next:before,
#home-new-products-slider.owl-carousel .owl-nav button.owl-next:before,
#home-bestseller-slider.owl-carousel .owl-nav button.owl-next:before {
    content: '\f054' !important; /* FontAwesome 4.7 chevron-right */
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FontAwesome icons for enhanced visual appeal (when FontAwesome is available) */
.ocarousel-grid.fa-icons .ocarousel .owl-nav button.owl-prev:before {
    content: '\f053' !important; /* FontAwesome chevron-left */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 24px !important;
}

.ocarousel-grid.fa-icons .ocarousel .owl-nav button.owl-next:before {
    content: '\f054' !important; /* FontAwesome chevron-right */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 24px !important;
}

/* ENHANCED: Wishlist Button Icon Content - Increased Size & Perfect Centering */
.ocarousel .item-box .add-to-wishlist-button:before {
    content: '\2665' !important; /* Unicode heart symbol */
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ENHANCED: Compare Button Icon Content - Increased Size & Perfect Centering */
.ocarousel .item-box .add-to-compare-list-button:before {
    content: '\2696' !important; /* Unicode balance scale symbol */
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FontAwesome alternative for better icon quality (when available) */
.fa-icons .ocarousel .item-box .add-to-wishlist-button:before {
    content: '\f004' !important; /* FontAwesome heart */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

.fa-icons .ocarousel .item-box .add-to-compare-list-button:before {
    content: '\f24d' !important; /* FontAwesome balance-scale */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* ===============================================
   FEATURED PRODUCT SLIDER SPECIFIC FIXES
   =============================================== */

/* Fix featured product slider container and ensure proper layout */
.home-page-product-grid {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 0px !important;
}

.home-page-product-grid .product-grid {
    position: relative !important;
    overflow: visible !important;
}

/* Featured slider owl-carousel specific styling */

/* Ensure equal height for featured slider product cards */

/* Image area (picture column) - 80% height with 3:4 aspect ratio */

/* Caption area (content column) - 20% height */

/* ===============================================
   ADDITIONAL ENHANCEMENTS
   =============================================== */

/* Improve product title styling */
.ocarousel .item-box .product-item .product-title {
    text-align: center;
    margin-bottom: 8px; /* REDUCED: 15px ??8px for more image space */
    min-height: 30px;
    font-family: var(--font-default);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ocarousel .item-box .product-item .product-title a {
    color: var(--grey-black, #333333);
    font-weight: 200;
    font-size: 14px;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease-in-out;
}

.ocarousel .item-box .product-item .product-title a:hover {
    color: var(--red, #ea5648);
}

/* Enhanced price styling */
.ocarousel .item-box .product-item .prices {
    text-align: center;
    margin-bottom: 10px; /* REDUCED: 20px ??10px for more image space */
}

.ocarousel .item-box .product-item .prices .price {
    font-family: var(--font-default);
    font-weight: 200;
    color: var(--grey-black, #333333);
    font-size: 14px;
    display: inline-block;
}

.ocarousel .item-box .product-item .prices .price.old-price {
    text-decoration: line-through;
    color: #999999;
    font-size: 14px;
    margin-right: 10px;
    font-weight: 400;
}

/* Subtle loading animation enhancement */
@keyframes simplexPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.ocarousel-grid.loading .ocarousel .item-box .product-item {
    animation: simplexPulse 1.5s ease-in-out infinite;
}

/* ===============================================
   CRITICAL UI FIXES APPLIED
   ===============================================

   ISSUE #1 FIXED: Navigation Arrow Display
   ??Removed pseudo-element content blocking HTML arrows
   ??Navigation buttons now display ????arrows instead of "PREV"/"NEXT" text
   ??32px arrow size for optimal visibility
   ??Proper centering with flexbox layout
   ??Responsive sizing: 32px desktop, 30px tablet, 26px mobile
   
   ISSUE #2 FIXED: Wishlist Button Truncation
   ??Reduced container right positioning from 15px to 6px
   ??Reduced button dimensions from 42px to 36px to prevent clipping
   ??Mobile optimizations: 32px buttons positioned at 4px from right
   ??Proper heart (?? and compare (?? icons display
   ??Maintained hover states with red background and white icons
   ??Prevented overflow issues with max-width constraints
   
   ACCESSIBILITY MAINTAINED:
   ??Touch target balance: 36px minimum (acceptable for usability)
   ??High contrast mode support
   ??Reduced motion support
   ??WCAG compliance maintained with visual enhancements
   
   INTEGRATION NOTES:
   This file should be included after the main OCarousels CSS files:
   1. owl.carousel.css
   2. styles.css (from OCarousels plugin)
   3. simplex.styles.css (Simplex theme)
   4. ocarousels-simplex-override.css (this file)

   Include in theme layout file:
   <link rel="stylesheet" href="~/Themes/SimplexTheme/Content/css/ocarousels-simplex-override.css" />

   NAVIGATION POSITIONING OPTIMIZATION:
   ??Desktop: -24px symmetric positioning for clean separation and visual balance
   ??Tablet: -22px symmetric positioning for consistent visual hierarchy
   ??Mobile: -20px symmetric positioning for optimal touch interaction
   ??Maintains accessibility with 46px+ button dimensions
   ??Provides perfect visual balance without content overlap
   
   POSITIONING RATIONALE:
   - Symmetric negative values (-24px both sides) create perfect visual balance
   - Clean separation prevents any content overlap issues
   - Responsive values maintain symmetry across all breakpoints
   - Button size (46px) ensures safe positioning without obscuring content
   - Professional appearance with consistent spacing and visual harmony

   DESKTOP IMAGE CROPPING FIX:
   ??Changed object-fit from 'contain' to 'cover' for .slider-grid images
   ??Problem: object-fit: contain was scaling images down to fit entirely in 500px height
   ??Solution: object-fit: cover fills the container properly, cropping edges if needed
   ??Added proper container height (500px) and flexbox centering for slide items
   ??Added background color fallback for any exposed areas
   ??Alternative: .preserve-aspect class available for images that need full display
   
   SLIDER-GRID NAVIGATION ARROW TRUNCATION FIX:
   ??Problem: .slider-grid .slider-container margin reduced to 0px caused arrow truncation
   ??Root Cause: Navigation arrows positioned at left: -24px / right: -24px, but no margin space
   ??Solution: Added specific .slider-grid navigation positioning inside container bounds
   ??Desktop: left: 10px / right: 10px (positioned inside container)
   ??Tablet: left: 9px / right: 9px (balanced positioning)
   ??Mobile: left: 8px / right: 8px (closer to edges but still visible)
   ??Enhanced z-index: 20 to ensure visibility above slider content
   ??Maintained overflow: hidden on .owl-carousel while allowing nav button visibility
   
   TECHNICAL DETAILS:
   - object-fit: contain = scales image to fit entirely inside container (can leave empty space)
   - object-fit: cover = scales image to fill container completely (may crop edges)
   - For hero sliders, 'cover' is usually preferred to avoid empty space
   - 500px height constraint maintained for desktop consistency
   - Responsive behavior unaffected (mobile/tablet still use responsive scaling)
   - .slider-grid navigation now positioned inside container due to 0px margin constraint
   - .ocarousel-grid navigation remains outside container with negative positioning
   - Phase 3 optimizations applied strategic reductions while maintaining professional appearance
   - Phase 4 implements proportional container size increase maintaining 3:4 aspect ratio

   =============================================== */

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,
.owl-carousel .owl-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.owl-carousel {
  display: none;
  width: 100%;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  margin-top: 3px;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
  display: none;
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}
.owl-carousel .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.owl-height {
  transition: height 0.5s ease-in-out;
}
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
  max-height: 0;
}
.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 0.1s ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.4s ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.eot);src:url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.woff) format('woff'),url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../Themes/SimplexTheme/Content/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767.98px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767.98px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767.98px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767.98px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767.98px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767.98px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767.98px){.visible-xs-block{display:block!important}}@media (max-width:767.98px){.visible-xs-inline{display:inline!important}}@media (max-width:767.98px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991.98px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991.98px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991.98px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991.98px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199.98px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199.98px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199.98px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199.98px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767.98px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991.98px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199.98px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
/*!
 * nopAccelerate Simplex Theme v2.9.0 (http://themes.nopaccelerate.com/themes/nopaccelerate-simplex-theme-3/)
 * Copyright 2025 Xcellence-IT.
 * Licensed under LICENSETYPE (http://www.nopaccelerate.com/terms/)
 */

/* Web Styles for nopAccelerate Simplex Theme */

body {
  font-family: var(--font-default);
  background: #fff;
  color: var(--grey-black);
}

:root {
  --red: #ea5648;
  --grey-black: #333333;
  --dark-red: #ca3628;
  overflow-x: hidden;
}

ul {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.item-box .col-lg-1,
.item-box .col-lg-10,
.item-box .col-lg-11,
.item-box .col-lg-12,
.item-box .col-lg-2,
.item-box .col-lg-3,
.item-box .col-lg-4,
.item-box .col-lg-5,
.item-box .col-lg-6,
.item-box .col-lg-7,
.item-box .col-lg-8,
.item-box .col-lg-9,
.item-box .col-md-1,
.item-box .col-md-10,
.item-box .col-md-11,
.item-box .col-md-12,
.item-box .col-md-2,
.item-box .col-md-3,
.item-box .col-md-4,
.item-box .col-md-5,
.item-box .col-md-6,
.item-box .col-md-7,
.item-box .col-md-8,
.item-box .col-md-9,
.item-box .col-sm-1,
.item-box .col-sm-10,
.item-box .col-sm-11,
.item-box .col-sm-12,
.item-box .col-sm-2,
.item-box .col-sm-3,
.item-box .col-sm-4,
.item-box .col-sm-5,
.item-box .col-sm-6,
.item-box .col-sm-7,
.item-box .col-sm-8,
.item-box .col-sm-9,
.item-box .col-xs-1,
.item-box .col-xs-10,
.item-box .col-xs-11,
.item-box .col-xs-12,
.item-box .col-xs-2,
.item-box .col-xs-3,
.item-box .col-xs-4,
.item-box .col-xs-5,
.item-box .col-xs-6,
.item-box .col-xs-7,
.item-box .col-xs-8,
.item-box .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

/*.subscribe-button,
a:hover,
a,
.owl-prev,
.owl-next,
.login-page .remember-me .checkbox label {
  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;
  text-decoration: none;
}*/
.admin-header-links {
  background: var(--grey-black);
  text-align: center;
}
.admin-header-links a,
.btn-default:active:focus {
  color: #fff;
}
.btn.btn-primary,
.google-authenticator-conteiner .buttons button {
  background-color: var(--red);
  border: none;
  color: #fff;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 700;
  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;
  padding: 10px 15px;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.google-authenticator-conteiner .buttons button:hover,
.google-authenticator-conteiner .buttons button:focus {
  background-color: var(--grey-black);
  opacity: 1 !important;
}
.btn.btn-default,
.payment-method .save-customer-info-button {
  background-color: var(--grey-black);
  border: none;
  color: #fff;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 700;
  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;
  padding: 10px 15px;
}
.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(--red);
}
.panel {
  border-radius: 0px;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: none;
}
.form-control:focus {
  border-color: var(--grey-black, #333);
  box-shadow: none;
}
a:focus {
  outline: none;
}
.form-control {
  border-radius: 0;
}
input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
}
input[type="checkbox"],
input[type="radio"] {
  margin: 4px 2px 0 0;
}

/* ADMIN HEADER LINKS */
.master-wrapper-page.container {
  margin-top: 15px;
  overflow: hidden;
}
.main-menu.goToTop {
  left: 0;
  top: 0px !important;
  z-index: 9999;
  position: fixed;
  max-width: 100% !important;
  border-radius: 0px;
  background: #ffffff; /* Changed from dark to white to match header-menu */
  border-bottom: 1px solid #e9ecef; /* Added subtle border for definition */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Softened shadow for white background */
  -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}
.navbar.navbar-inverse {
  max-width: 100% !important;
  border: none;
  background-color: transparent;
  margin-bottom: 0px;
}
.admin-header-links {
  display: none;
}
.header-links .logo {
  height: 48px;
}
.manage-page {
  margin-left: 15px;
}

/* HEADER SECTION STYLE */
.header-logo {
  text-align: center;
}
.header-upper {
  height: 25px; /* Reduced from 45px for more compact header */
}
.currency-selector,
.language-selector,
.tax-display-type-selector {
  float: left;
  margin: 5px 6px 0px 0px; /* Reduced top margin for compact header */
}
.language-selector .language-list li {
  display: inline-block;
  padding: 0 5px;
}
.header-selectors-wrapper select {
  background: #f5f5f5;
  color: var(--grey-black);
  width: 80px;
  margin-top: 0px !important;
  padding: 0px 5px !important;
  height: 26px;
  font-size: 12px;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.header-links-wrapper .admin-header-links {
  display: none !important;
}
.admin-header-links {
  display: block !important;
}
.header-links-wrapper .header-top-right {
  float: right;
  width: auto;
  position: relative;
}
.header-top-right ul li {
  float: left;
}
.header-top-right ul li.my-account a,
.header-top-right ul li.register a {
  border-left: 1px solid #ccc;
}
.header-top-right ul li a {
  padding: 4px 12px 4px 28px; /* Reduced padding for compact header */
  float: left;
  border-right: 1px solid #ccc;
  font-size: 11px; /* Slightly smaller font */
  line-height: 16px; /* Reduced line height */
  color: var(--grey-black);
  text-decoration: none;
  margin: 2px 0px; /* Reduced margin */
  text-transform: capitalize;
  font-family: var(--font-default);
}
.header-top-right ul li a:hover {
  color: var(--red);
}
.header-top-right ul li .ico-account {
  background: url(../Themes/SimplexTheme/Content/images/user-icon.png) no-repeat 10px 6px;
}
.header-top-right ul li .ico-account:hover {
  background: url(../Themes/SimplexTheme/Content/images/user-icon.png) no-repeat 10px -19px;
}
.header-top-right ul li .ico-register {
  background: url(../Themes/SimplexTheme/Content/images/register-icon.png) no-repeat 10px 7px;
}
.header-top-right ul li .ico-register:hover {
  background: url(../Themes/SimplexTheme/Content/images/register-icon.png) no-repeat 10px -18px;
}
.header-top-right ul li .ico-wishlist {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-icon.png) no-repeat 10px 7px;
}
.header-top-right ul li .ico-wishlist:hover {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-icon.png) no-repeat 10px -18px;
}
.header-top-right ul li .ico-inbox {
  background: url(../Themes/SimplexTheme/Content/images/inbox-icon.png) no-repeat 10px 9px;
}
.header-top-right ul li .ico-inbox:hover {
  background: url(../Themes/SimplexTheme/Content/images/inbox-icon.png) no-repeat 10px -19px;
}
.header-top-right ul li .ico-logout {
  background: url(../Themes/SimplexTheme/Content/images/logout-icon.png) no-repeat 10px 6px;
}
.header-top-right ul li .ico-logout:hover {
  background: url(../Themes/SimplexTheme/Content/images/logout-icon.png) no-repeat 10px -19px;
}
.header-top-right ul li .ico-login {
  background: url(../Themes/SimplexTheme/Content/images/login-icon.png) no-repeat 10px 7px;
}
.header-top-right ul li .ico-login:hover {
  background: url(../Themes/SimplexTheme/Content/images/login-icon.png) no-repeat 10px -18px;
}
.search-box .ui-menu .ui-menu-item a.ui-state-focus,
.search-box .ui-menu .ui-menu-item a.ui-state-active {
  margin-top: 0px !important;
  border: none !important;
}
.search-box .ui-state-focus,
.search-box .ui-widget-content .ui-state-focus,
.search-box .ui-widget-header .ui-state-focus {
  background: transparent;
  border: none;
}
.header-lower .search-box .ui-widget-content {
  border-radius: 0px;
  border: 1px solid #ddd;
  padding: 0px;
  width: 260px !important;
  position: absolute;
}
.header-lower .search-box .ui-autocomplete li:first-child {
  border: none;
}
.header-lower .ui-autocomplete li {
  border-top: 1px dashed #bbb;
  float: left;
  width: 100%;
}
.header-lower .ui-autocomplete li a {
  padding: 10px;
  border-radius: 0px;
  font-family: var(--font-default);
  font-size: 12px;
  background: #f5f5f5;
  cursor: pointer;
  float: left;
  width: 100%;
  color: var(--grey-black);
}
.header-lower .ui-autocomplete li a:hover,
.header-lower .ui-autocomplete li a:focus {
  color: var(--red);
  border: none !important;
  background-color: #fff;
}
.header-lower .ui-autocomplete img {
  display: block;
  float: left;
  margin-right: 10px;
}
.header-lower .ui-menu .ui-menu-item a.ui-state-focus,
.header-lower .ui-menu .ui-menu-item a.ui-state-active {
  margin: 0px;
}
.header-lower .ui-autocomplete li a span {
  float: left;
  width: 80%;
}
.header-lower .search-box {
  float: left;
  position: relative;
  margin-top: 5px;
}
.header-lower .search-box .navbar-form {
  padding-left: 0px;
}
.header-lower .search-box .search-nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
  width: 260px;
  padding-left: 5px;
}
.forum-search-box .search-box-text:focus,
.header-lower .search-box .search-nav:focus {
  border-color: var(--red);
}
.search-box .btn.search-box-button {
  font-size: 0;
  background: url("../Themes/SimplexTheme/Content/images/search-icon.png") no-repeat 0px 0px;
  border-radius: 0px;
  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;
}
.search-box .btn.search-box-button:hover {
  background: url("../Themes/SimplexTheme/Content/images/search-icon.png") no-repeat 0px -34px;
}
.header .search-box .form-control,
.header .search-box .btn {
  border-radius: 0;
}

/* FLYOUT CART STYLE */
.flyout-main-wrapper .flyout-cart-wrapper {
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 999999;
  width: 320px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  border: 0px solid #ddd;
  border-radius: 0px;
  opacity: 0;
  visibility: hidden;
}
.flyout-main-wrapper {
  float: right;
  margin: 20px 15px 0px 0px;
}
.flyout-main-wrapper.shopping-cart-link {
  float: right;
}
.flyout-main-wrapper .shopping-cart-link .ico-cart {
  background: url(../Themes/SimplexTheme/Content/images/cart-icon.png) no-repeat 0px 0px;
  float: right;
  height: 20px;
  padding-left: 30px;
  text-decoration: none;
}
.flyout-main-wrapper .shopping-cart-link .ico-cart:hover {
  background: url(../Themes/SimplexTheme/Content/images/cart-icon.png) no-repeat 0px -28px;
}
.flyout-main-wrapper .shopping-cart-link .cart-label {
  color: var(--grey-black);
}
.flyout-main-wrapper .shopping-cart-link .cart-qty {
  color: var(--red);
}
.flyout-main-wrapper .flyout-cart-wrapper::before {
  background: url(../Themes/SimplexTheme/Content/images/flyout-arrow-top.png) no-repeat center center;
  content: " ";
  height: 14px;
  left: 70%;
  position: absolute;
  top: -14px;
  width: 26px;
}
.flyout-cart-wrapper.active {
  opacity: 1;
  visibility: visible;
}
.header-lower .flyout-cart-wrapper .mini-shopping-cart .count a {
  float: none;
  border-right: 0;
}
.header-lower .flyout-cart-wrapper a {
  border-right: none;
}
.mini-shopping-cart {
  padding: 0 3px 3px 3px;
  text-align: left;
  font-size: 12px;
  color: var(--grey-black);
  font-family: var(--font-default);
}
.mini-shopping-cart .count {
  padding: 10px 0px;
  color: var(--grey-black);
  border-bottom: 1px solid #ddd;
}
.mini-shopping-cart .count a {
  margin: 0 2px;
  font-weight: bold;
  color: #2c3e50;
}
.mini-shopping-cart .items {
  margin: 0 0 0px;
  max-height: 273px;
  overflow-y: auto;
}
.mini-shopping-cart .item {
  overflow: hidden;
  padding: 10px 0px;
  border-bottom: 1px solid #ddd;
}
.mini-shopping-cart .picture {
  float: left;
  width: 70px;
  text-align: center;
  width: 70px;
}
.mini-shopping-cart .picture a {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0px;
}
.mini-shopping-cart .picture a:before {
  content: "";
  display: block;
  padding-top: 0px;
}
.mini-shopping-cart .picture img {
  position: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  width: 70px;
}
.mini-shopping-cart .picture + .product {
  float: left;
  margin-left: 15px;
}
.mini-shopping-cart .name {
  margin: 0 0 5px;
  overflow: hidden;
  width: 100%;
  float: left;
}
.mini-shopping-cart .name a {
  color: #2c3e50;
  font-size: 13px;
}
.mini-shopping-cart .name a:hover {
  color: var(--grey-black);
  text-decoration: none;
}
.mini-shopping-cart .attributes {
  margin: 5px 0;
  color: #606162;
  float: left;
  width: 100%;
}
.mini-shopping-cart .totals {
  margin: 0 0 15px;
  font-size: 14px;
  display: inline-block;
  clear: both;
  float: left;
  color: #000;
  width: 100%;
  text-align: center;
  font-weight: 700;
}
.mini-shopping-cart .totals strong {
  font-size: 14px;
  color: #2c3e50;
}
.mini-shopping-cart .buttons {
  margin: 0 0 15px;
  display: inline-block;
  clear: both;
  width: 100%;
}
.mini-shopping-cart button[type="button"] {
  display: inline-block;
  border: none;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
}
.mini-shopping-cart .product {
  width: 65%;
}
.mini-shopping-cart .quantity {
  float: left;
  margin-right: 5%;
  text-transform: capitalize;
  color: #666;
}
.mini-shopping-cart .price {
  float: left;
}
.empty-shopping-cart {
  padding: 15px 0px;
  color: var(--grey-black);
  font-weight: 700;
  font-family: var(--font-default);
}
.mini-shopping-cart .price span {
  color: var(--grey-black);
  font-weight: 700;
}
#flyout-cart .shopping-cart-link {
  height: 35px;
}

/* HEADER AND MENU STYLE */
/* override some jQuery UI style */
.search-box .ui-autocomplete-loading {
  background: white url("../Themes/SimplexTheme/Content/images/ajax_loader_small.gif") right center
    no-repeat;
}
.ui-autocomplete {
  z-index: 10 !important;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  z-index: 9999999 !important;
}
.ui-autocomplete .ui-menu-item a {
  text-align: left !important;
}
.header-lower {
  padding: 0px 0 8px 0; /* Reduced bottom padding from 15px to 8px */
  position: relative;
}
.header-menu .navbar-default {
  background-color: transparent;
  border-color: transparent;
  margin-bottom: 0px;
}
.header-menu {
  background: #ffffff; /* Changed from dark to white background */
  margin-bottom: 30px;
  border-bottom: 0px solid #e0e0e0; /* Removed border as requested */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/ /* Added subtle shadow */
}
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu.sub-menusublist.first-level
  li
  .dropdown-menu.sub-menusublist.first-level,
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu.sub-menusublist.first-level
  li
  .dropdown-menu.sub-menusublist.first-level
  li
  .dropdown-menu.sub-menusublist.first-level {
  display: none;
}
.header-menu .navbar.navbar-inverse .navbar-collapse {
  padding: 0px;
}

/* Mobile hamburger menu styling for white background */
.header-menu .navbar-inverse .navbar-toggle {
  border-color: #333333; /* Dark border for visibility on white */
}

.header-menu .navbar-inverse .navbar-toggle .icon-bar {
  background-color: #333333; /* Dark bars for visibility on white */
}

.header-menu .navbar-inverse .navbar-toggle:hover,
.header-menu .navbar-inverse .navbar-toggle:focus {
  background-color: #f5f5f5; /* Light hover background */
}
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.active > a {
  background: var(--red);
  color: #fff;
  padding: 12px 22px; /* Reduced from 15px to match other menu items */
}
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li {
  float: left;
}

/* Center align the navigation menu items */
.header-menu .navbar.navbar-inverse .nav.navbar-nav {
  display: flex;
  justify-content: flex-start; /* Safe default for tablet - prevents left-side truncation */
  width: 100%;
  float: none;
}
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li > a {
  float: left;
  padding: 12px 22px; /* Reduced from 20px to 12px for compact header */
  line-height: 22px; /* Slightly reduced line height */
  color: #333333; /* Changed from white to dark for contrast on white background */
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-default);
}
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:hover {
  background: var(--red);
  color: #fff; /* Ensure white text on red hover background */
}
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  > a:hover:before {
  background: url(../Themes/SimplexTheme/Content/images/active-menu-icon.png) no-repeat center bottom;
  position: absolute;
  left: 40%;
  height: 12px;
  width: 24px;
  content: "";
  top: 46px; /* Adjusted from 54px due to reduced menu height */
}
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown.open > a {
  background: var(--red);
}
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu
  li
  a {
  padding: 10px 15px 10px 40px;
  line-height: 15px;
  background: url("../Themes/SimplexTheme/Content/images/submenu-deactive-icon-rtl.png") no-repeat 20px 10px
    #f9f9f9;
  white-space: normal;
  word-wrap: break-word;
}
.header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu
  li
  a:hover {
  color: var(--red);
  background: url("../Themes/SimplexTheme/Content/images/submenu-active-icon-rtl.png") no-repeat 20px 10px
    #f9f9f9;
}
.master-wrapper-content > .swiper.nop-slider {
  margin-bottom: 0px;
}
.main-menu.goToTop .navbar.navbar-inverse.category-menu {
  margin: 0 auto;
  /* width: 1140px !important;  */
}
.header-menu .main-menu {
  width: 100% !important;
  transition: all 0.5s ease-in-out 0s;
}

/* Apply wide container to header-menu on ALL pages (not just homepage) */
.header-menu .container {
  width: 95% !important;
  max-width: 95% !important;
}

.html-home-page .header-menu {
  margin-bottom: 0px;
}
.theme-custom .nivo-controlNav a.active {
  background-color: var(--red) !important;
}

/* CONTENT SECTION STYLE */
.title.sub-title {
  margin-bottom: 50px;
  position: relative;
  text-align: center;
}
.title.sub-title::before {
  border-top: 1px solid #ccc;
  content: "";
  left: 0%;
  position: absolute;
  right: 0%;
  top: 50%;
}
.title.sub-title strong {
  background: #fff;
  /*border: 1px solid #ccc;*/
  display: inline-block;
  position: relative;
  z-index: 10;
  padding: 15px 25px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--grey-black);
  letter-spacing: 3px;
  line-height: 24px;
  font-family: var(--font-default);
}

/* HOME NEWS SECTION STYLE */
.news-list-homepage .news-items .item {
  margin-bottom: 10px;
  border-radius: 0px;
  background: #fff;
  float: left;
  width: 100%;
}
.news-list-homepage .news-items .news-head {
  float: left;
  width: 100%;
}
.news-list-homepage .news-head a {
  float: left;
  width: 100%;
  background: #f5f5f5;
  padding: 25px 0px;
  color: var(--grey-black);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  text-align: center;
  font-family: var(--font-default);
}
.news-list-page .news-date,
.news-list-homepage .news-date {
  float: right;
  width: 100%;
  text-align: right;
  margin: 20px 0px;
  color: #2c3e50;
}
.news-list-homepage .news-details {
  clear: both;
  line-height: 24px;
  margin-bottom: 25px;
  color: #555;
  padding: 0 10px;
}
.news-list-page .news-button,
.news-list-homepage .news-button {
  text-align: center;
}
.news-list-page .news-button .read-more,
.news-list-homepage .read-more {
  text-transform: uppercase;
  padding: 10px 25px;
}
.news-list-page .news-button .read-more span,
.news-list-homepage .read-more span {
  float: left;
  line-height: 20px;
}
.news-list-page .news-button .read-more i,
.news-list-homepage .read-more i {
  margin-left: 8px;
  float: left;
  line-height: 20px;
}
.home-page .news-list-homepage .view-all {
  clear: both;
  text-align: center;
}
.home-page .news-list-homepage .view-all a {
  text-transform: uppercase;
  padding: 10px 20px;
}
.news-list-homepage {
  margin-bottom: 50px;
}

/* POLL BLOCK STYLE */
.poll-options {
  list-style: none;
}
.listbox .poll-results .answer {
  padding-bottom: 5px;
}
#block-poll-vote-error-1 {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
  padding: 0px 10px;
  margin-top: 10px;
  font-weight: bold;
  clear: both;
}
.poll {
  text-align: center;
}
.poll-options li {
  display: inline-block;
  float: none;
  margin: 0px 30px;
}
.poll-options li .radio input {
  margin-right: 5px;
}
.poll-options li label {
  color: var(--grey-black);
  font-weight: normal;
  font-family: var(--font-default);
}
.block.block-poll.well .poll-options li {
  float: left;
  width: 100%;
  margin: 0px;
}
.block.block-poll.well .poll-options li label,
.block.block-poll.well .poll {
  text-align: left;
}
.block.block-poll.well .poll-display-text {
  text-align: left;
}
.poll strong {
  font-weight: 500;
  margin-bottom: 25px;
  text-align: center;
  display: inline-block;
  background: #f5f5f5;
  padding: 15px 40px;
  color: #555;
  text-transform: uppercase;
}
.home-page-polls .buttons {
  margin-top: 30px;
}
.home-page-polls .buttons .vote-poll-button {
  text-transform: uppercase;
  padding: 10px 20px;
}
.block.block-poll.well.box-shadow-wrapper .poll-total-votes {
  margin-bottom: 15px;
  float: left;
  width: 100%;
  margin-top: 10px;
}
.block.block-poll.well.box-shadow-wrapper .listbox .poll-results .answer {
  padding-bottom: 0px;
  margin-top: 10px;
}
.home-page-polls .title {
  text-align: center;
}

/* FOOTER SECTION STYLE */
.change-device {
  clear: both;
  text-align: right;
}
.designedby {
  text-align: right;
}
.footer-store-theme {
  text-align: center;
}
.footer {
  float: left;
  width: 100%;
  background: #f8f8f8;
  margin-top: 0px;
  /*  box-shadow: 0px 0px 20px #ddd;
  -moz-box-shadow: 0px 0px 20px #ddd;
  -webkit-box-shadow: 0px 0px 20px #ddd;*/
}
.footer ul.nav li a {
  padding: 0;
}
.footer-upper .social-wrapper {
  float: right;
}
.footer-upper .social-wrapper li {
  float: left;
}
.footer-upper .social-wrapper li a {
  float: left;
  height: 45px;
  width: 45px;
  border: 1px solid #ddd;
  margin-right: 10px;
  text-align: center;
  line-height: 45px;
  background: #fff;
  color: var(--grey-black);
  font-size: 20px;
  word-break: break-word;
}
.footer-upper .social-wrapper li a:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
/* Hide RSS icon in footer social buttons */
.footer .social-wrapper .rss {
  display: none !important;
}
.newsletter-subscribe-block .newsletter-email {
  float: left;
}
.newsletter-subscribe-block .form-group {
  float: left;
  margin-bottom: 0px;
}
#newsletter-email,
#newsletter-subscribe-button {
  border-radius: 0;
}
.footer-disclaimer {
  margin-top: 10px;
}
#newsletter-subscribe-block #newsletter-email {
  float: left;
  width: 300px;
  height: 45px;
  color: #aaa;
}
#newsletter-subscribe-block #newsletter-subscribe-button {
  float: left;
  width: auto;
  max-height: 45px;
}
.newsletter-subscribe-block .options {
  clear: both;
  padding-top: 10px;
}
.newsletter-subscribe-block .options .subscribe {
  padding-right: 10px;
}
#newsletter-subscribe-button {
  font-size: 15px;
  padding: 12px;
  text-transform: uppercase;
}
.footer-upper {
  padding: 30px 0px;
  border-bottom: 1px solid #e5e5e5;
}
.footer-upper > .container > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-upper .newsletter-wrapper,
.footer-upper .follow-us {
  float: none;
  width: auto;
  flex: 0 0 auto;
}
.footer-upper .follow-us {
  margin-left: 30px;
}
.footer-upper .social-wrapper {
  float: none;
}
.newsletter-wrapper strong {
  float: left;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  margin-right: 15px;
  margin-top: 10px;
}
.newsletter-result-block {
  color: #2c3e50;
  clear: both;
  text-align: center;
  float: left;
  width: 100%;
}
.newsletter-validation {
  text-align: center;
}
.footer-middle {
  padding: 35px 0px;
}
.footer-middle .title {
  margin-bottom: 25px;
}
.footer-middle .title strong {
  font-size: 18px;
  color: var(--grey-black);
  text-transform: uppercase;
  white-space: nowrap;
}
.footer .footer-middle ul li a {
  color: #777;
  text-transform: capitalize;
  margin-bottom: 20px;
  display: inline-block;
}
.footer .footer-middle ul li a i {
  margin-right: 8px;
}
.footer-middle ul li a:hover,
.footer-middle ul li a:focus {
  background: transparent;
  color: var(--red);
}
.footer-middle .contact-wrapper i {
  float: left;
  margin-right: 20px;
  font-size: 16px;
  line-height: 20px;
}
.footer-middle .contact-wrapper .address i {
  line-height: 65px;
}
.footer-middle .contact-wrapper .phone-number i {
  margin-right: 16px;
}
.footer-middle .contact-wrapper .fax i {
  margin-right: 14px;
}
.footer-middle .contact-wrapper p {
  float: left;
  width: 85%;
  color: #777;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.footer-lower {
  padding: 20px 0px;
  background: #222;
  color: #fff;
}
.footer-lower a {
  color: #2c3e50;
}
.footer-lower a:hover {
  color: #fff;
}
.footer-lower .poweredby,
.footer-designedby {
  color: #999999;
}
.footer-lower .payment-method ul li {
  background: url(../Themes/SimplexTheme/Content/images/payment-method.png) no-repeat left center;
  float: left;
  width: 55px;
  height: 30px;
}
.footer-lower .payment-method ul .payment-method2 {
  background-position: -55px center;
}
.footer-lower .payment-method ul .payment-method3 {
  background-position: -110px center;
}
.footer-lower .payment-method ul .payment-method4 {
  background-position: -165px center;
}
.footer-lower .payment-method ul .payment-method5 {
  background-position: -220px center;
}
.footer-lower .payment-method {
  float: left;
  margin-top: 20px;
}
.footer-lower .footer-theme-credit {
  margin-bottom: 8px;
}
.footer-lower .footer-store-theme .theme-selector select {
  color: #000;
  padding: 5px;
  margin-top: 10px;
}

/* SIDEBAR NAVIGATION STYLE */
.box-shadow-wrapper .listbox ul li,
.box-shadow-wrapper .listbox .nav.nav-list,
.box-shadow-wrapper .listbox .sublist.nav.nav-list {
  clear: both;
}
.block-popular-tags.sidebar .nav > li > a:hover,
.block-popular-tags.sidebar .nav > li > a:focus {
  background: none;
}
#customerTaxType,
#customerCurrency,
#customerlanguage {
  border: 1px solid #ddd;
}
.title.main-title {
  background: var(
    --grey-black
  ); /* Changed from red to grey-black for sidebar titles */
  padding: 15px 20px;
}
.title.main-title strong {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.box-shadow-wrapper .listbox {
  border: 1px solid #ddd;
  padding: 15px;
  float: left;
  width: 100%;
}
.box-shadow-wrapper {
  margin-bottom: 30px;
  float: left;
  width: 100%;
  padding: 0px;
  border-radius: 0px;
  border: none;
  background: #fff;
}
.block.block-blog-archive.well.box-shadow-wrapper .listbox ul li strong,
.box-shadow-wrapper .listbox ul li a {
  padding: 15px 0px 15px 25px;
  float: left;
  width: 100%;
  border-bottom: 1px solid #ddd;
  color: var(--grey-black);
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  word-break: break-word;
}
.box-shadow-wrapper .listbox ul li.active.last {
  clear: both;
}
.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,
.box-shadow-wrapper .listbox ul li a:hover,
.block-blog-archive .listbox ul li a {
  color: #2c3e50;
}
.block.block-blog-archive.well.box-shadow-wrapper .listbox ul li strong,
.box-shadow-wrapper .listbox ul li > a {
  background: url(../Themes/SimplexTheme/Content/images/submenu-deactive-icon.png) no-repeat left center;
}
.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: url(../Themes/SimplexTheme/Content/images/submenu-active-icon.png) no-repeat transparent left
    center;
  font-weight: 700;
}
.box-shadow-wrapper .listbox ul li .sublist li a {
  padding: 15px 0px 15px 45px;
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-deactive-icon.png) no-repeat 30px
    center;
}
.box-shadow-wrapper .listbox ul li .sublist li a:hover,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a {
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-active-icon.png) no-repeat transparent
    30px center;
}
.box-shadow-wrapper .listbox ul li .sublist li .sublist li a {
  padding: 15px 0px 15px 60px;
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-deactive-icon.png) no-repeat 45px
    center;
}
.box-shadow-wrapper .listbox ul li .sublist li .sublist li a:hover,
.box-shadow-wrapper .listbox ul li .sublist li .sublist li.active.last > a {
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-active-icon.png) no-repeat transparent
    45px center;
}
.box-shadow-wrapper .listbox ul li .sublist li .sublist li .sublist li a {
  padding: 15px 0px 15px 78px;
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-deactive-icon.png) no-repeat 60px
    center;
}
.box-shadow-wrapper .listbox ul li .sublist li .sublist li .sublist li a:hover,
.box-shadow-wrapper
  .listbox
  ul
  li
  .sublist
  li
  .sublist
  li
  .sublist
  li.active.last
  > a {
  background: url(../Themes/SimplexTheme/Content/images/submenu-list-active-icon.png) no-repeat transparent
    60px center;
}
.box-shadow-wrapper .listbox .view-all,
.block.block-poll.well.box-shadow-wrapper .buttons {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.box-shadow-wrapper .listbox .view-all a,
.box-shadow-wrapper .listbox .vote-poll-button {
  background: var(--grey-black);
  color: #fff;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  float: left;
  margin-bottom: 10px;
}
.box-shadow-wrapper .listbox .view-all a:hover,
.box-shadow-wrapper .listbox .vote-poll-button:hover {
  background: var(--red);
  text-decoration: none;
}
.block.block-popular-tags.box-shadow-wrapper .listbox ul li a {
  float: left;
  width: auto;
  border-bottom: none;
  padding: 0px;
  font-size: 100% !important;
  margin-right: 5px;
}
.block.block-popular-tags.box-shadow-wrapper .listbox .tags {
  padding: 10px 0px;
  float: left;
  width: 100%;
}
.block.block-popular-tags.box-shadow-wrapper .listbox .tags ul li {
  margin-left: 0px;
  clear: none;
  margin-bottom: 5px;
}
.block.block-popular-tags.box-shadow-wrapper
  .listbox
  .tags
  ul
  li:last-child
  span {
  display: none;
}
.block.block-popular-tags.well.box-shadow-wrapper .listbox ul li a {
  background: none;
}
.block.block-popular-tags.well.box-shadow-wrapper .view-all {
  margin-top: 0px;
}
.block.block-poll.well.box-shadow-wrapper .poll-options.nav.nav-pills {
  margin-left: 0px;
  padding-top: 0px;
}
.block.block-poll.well.box-shadow-wrapper .poll strong {
  padding: 15px 10px;
  margin-top: 10px;
  margin-bottom: 0px;
}
.block.block-poll.well.box-shadow-wrapper .poll-options li label {
  margin: 5px 0px;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper .product-picture {
  float: left;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper
  .product-picture
  a {
  float: left;
  padding: 5px 0px;
  margin-right: 10px;
  border: none;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper .product-info {
  float: left;
  width: 60%;
  padding: 5px 0px;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper .product-name {
  border: none;
  background: none;
  line-height: 1.2;
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper ul li {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper
  ul
  li:hover
  .product-name {
  color: var(--red);
}

/* Compact single-line display for sidebar products */
.block.block-recently-viewed-products.well.box-shadow-wrapper .prices {
  display: inline-block;
  float: right;
  margin-top: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 12px;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper .prices .price {
  font-size: 12px;
  font-weight: 600;
  margin-left: 3px;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper
  .prices
  .old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 10px;
}
.block.block-recently-viewed-products.well.box-shadow-wrapper ul li {
  padding: 2px 0px;
  margin: 2px 0px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Single-line title and price for product boxes - Enhanced specificity */
.caption .details .title-price-inline {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  width: 100% !important;
}

.caption .details .product-title-inline {
  flex: 1 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}

.caption .details .product-title-inline a {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: inherit !important;
  text-decoration: none !important;
}

.caption .details .prices-inline {
  flex-shrink: 0 !important;
  text-align: right !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.caption .details .prices-inline .price {
  margin-left: 3px !important;
}

.caption .details .prices-inline .price.actual-price {
  color: #2c3e50 !important;
  font-size: 16px !important;
}

.caption .details .prices-inline .old-price {
  text-decoration: line-through !important;
  color: #999 !important;
  margin-right: 10px !important;
}

/* PRODUCT SLIDER STYLE */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel {
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-stage-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-stage-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-nav div {
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel.owl-theme {
  position: relative;
}
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
}
.owl-carousel .owl-nav button.owl-next {
  background: url(../Themes/SimplexTheme/Content/images/next-arrow.png) no-repeat 52px 15px;
  border: 1px solid #ddd;
  color: #999;
  float: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  right: -90px;
  padding: 12px 30px 12px 10px !important;
  position: absolute;
  text-transform: uppercase;
  font-family: var(--font-default);
}
.owl-carousel .owl-nav button.owl-prev {
  background: url("../Themes/SimplexTheme/Content/images/previous-arrow.png") no-repeat scroll 10px 15px;
  border: 1px solid #ddd;
  color: #999;
  line-height: 20px;
  float: left;
  font-size: 14px;
  font-weight: 700;
  left: -90px;
  padding: 12px 10px 12px 30px !important;
  position: absolute;
  text-transform: uppercase;
  font-family: var(--font-default);
}
.owl-carousel .owl-nav button.owl-next:hover {
  background: url("../Themes/SimplexTheme/Content/images/next-arrow.png") no-repeat scroll 52px -19px var(--grey-black);
  color: #fff;
  border-color: var(--grey-black);
}
.owl-carousel .owl-nav button.owl-prev:hover {
  background: url(../Themes/SimplexTheme/Content/images/previous-arrow.png) no-repeat 10px -19px var(--grey-black);
  color: #fff;
  border-color: var(--grey-black);
}
.crosssell-products-slider .owl-nav,
.also-purchased-products-grid .owl-nav,
.related-products-grid .owl-nav,
.product-grid.home-page-product-grid .owl-nav,
.product-grid.bestsellers .owl-nav {
  top: 20%;
}

/* Main Slider Navigation - Matching ocarousels-grid styling */
.slider-container .owl-nav button.owl-prev,
.slider-container .owl-nav button.owl-next {
  /* Base Styling - Authentic Simplex Pattern (matching ocarousels-grid) */
  background-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(240, 240, 240, 0.8) !important;
  color: var(--grey-black, #333333) !important;
  border-radius: 0px !important;

  /* Typography - Authentic Simplex Font Stack */
  font-family: var(--font-default) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1 !important;

  /* Dimensions - Optimized for Authentic Appearance */
  width: 45px !important;
  height: 45px !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Layout - Perfect Centered Positioning */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 15 !important;

  /* Effects - Smooth Professional Transitions */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  opacity: 0.8 !important;

  /* Remove default styling */
  background-image: none !important;
  text-indent: 0 !important;
  outline: none !important;
}

/* Position arrows outside slider boundaries (matching ocarousels-grid) */
.slider-container .owl-nav button.owl-prev {
  left: -22px !important;
}

.slider-container .owl-nav button.owl-next {
  right: -22px !important;
}

/* Hover effects matching ocarousels-grid styling */
.slider-container .owl-nav button.owl-prev:hover,
.slider-container .owl-nav button.owl-next:hover {
  background-color: var(--red, #ea5648) !important;
  background: var(--red, #ea5648) !important;
  border-color: var(--red, #ea5648) !important;
  color: #ffffff !important;
  transform: translateY(-50%) translateZ(0) scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(234, 86, 72, 0.3) !important;
  opacity: 1 !important;
  border-radius: 0px !important;
}

/* Focus states for accessibility */
.slider-container .owl-nav button.owl-prev:focus,
.slider-container .owl-nav button.owl-next:focus {
  outline: 2px solid var(--red, #ea5648) !important;
  outline-offset: 2px !important;
}

/* Ensure main slider container has proper positioning */
.slider-container {
  position: relative !important;
  margin: 0 25px !important;
}
.product-grid.cross-sells {
  margin-top: 20px;
}
.owl-carousel .owl-item img {
  max-width: 100%;
  width: auto;
}

/* ============================================
   SWIPER NAVIGATION BUTTON COLOR OVERRIDE
   Override default Swiper theme color with grey-black
   ============================================ */
.swiper-button-next,
.swiper-button-prev {
  color: var(--grey-black) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  color: var(--grey-black) !important;
}

/* CATEGORY BOX STYLE*/
.product-category-item .picture {
  position: relative;
}
.product-category-item .picture:hover .product-img::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
.product-category-item .picture .product-img::after {
  background-color: rgba(255, 255, 255, 0.3);
  bottom: 5%;
  content: "";
  height: 90%;
  left: 15%;
  position: absolute;
  right: 15%;
  top: 5%;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -o-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -moz-transform: scaleX(0);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  width: 70%;
}
.product-category-item .picture .product-img::before {
  background-color: rgba(255, 255, 255, 0.3);
  bottom: 15%;
  content: "";
  height: 70%;
  left: 5%;
  position: absolute;
  right: 5%;
  top: 15%;
  transform: scaleY(0);
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -moz-transform: scaleY(0);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  width: 90%;
}
.product-category-item .picture:hover .product-img::before {
  transform: scaleY(1);
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -moz-transform: scaleY(1);
  z-index: 1;
}
.product-category-item .picture .title a {
  color: #2c3e50;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  padding: 22px 0 18px;
  display: inline-block;
  width: 215px;
  background-color: #fff;
}
.product-category-item .picture .title a:hover {
  background: var(--red);
  color: #fff;
}
.vendor-grid .product-category-item .picture .title,
.manufacturer-grid .product-category-item .picture .title,
.sub-category-grid .product-category-item .picture .title {
  width: 150px;
}
.vendor-grid .product-category-item .picture .title a,
.manufacturer-grid .product-category-item .picture .title a,
.sub-category-grid .product-category-item .picture .title a {
  width: 150px;
  padding: 18px 0px;
  font-size: 15px;
  word-wrap: break-word;
}
.picture-thumbs.product-slider .owl-nav,
.manufacturer-grid .owl-nav,
.sub-category-grid .owl-nav {
  position: inherit;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.picture-thumbs.product-slider .owl-nav .owl-prev,
.manufacturer-grid .owl-nav .owl-prev,
.sub-category-grid .owl-nav .owl-prev {
  float: none !important;
  display: inline-block !important;
  margin-right: 15px !important;
  position: inherit !important;
  left: 0 !important;
}
.picture-thumbs.product-slider .owl-nav .owl-next,
.manufacturer-grid .owl-nav .owl-next,
.sub-category-grid .owl-nav .owl-next {
  float: none !important;
  display: inline-block !important;
  position: inherit !important;
  right: 0 !important;
}

/* BREADCRUMB STYLE */
.breadcrumb-wrapper .breadcrumb {
  border: none;
  padding: 15px;
  border-radius: 0px;
  margin-bottom: 30px;
  clear: both;
}
.breadcrumb-wrapper .breadcrumb li a {
  color: var(--grey-black);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-default);
}
.breadcrumb-wrapper .breadcrumb li a:hover {
  color: #2c3e50;
}
.breadcrumb-wrapper .breadcrumb li .current-item.active,
.breadcrumb-wrapper .breadcrumb li .active {
  color: #2c3e50;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  font-family: var(--font-default);
}
.breadcrumb-wrapper .breadcrumb > li + li::before,
.breadcrumb-wrapper .breadcrumb > ol + ol::before {
  padding: 0px 10px;
}

/* PRODUCT BOX STYLE */
.price.old-price {
  float: left;
  text-decoration: line-through;
  width: 100%;
  font-size: 12px;
}
.product-item .description {
  font-size: 12px;
  line-height: 1.4em;
  display: none;
}
.product-item .prices {
  margin-bottom: 15px;
}
.title.panel-heading {
  padding: 0;
}
.thumbnail {
  box-shadow: none;
  border: 2px solid transparent;
  padding: 0px;
  background-color: transparent;
  overflow: visible;
  border-radius: 0;
  margin-bottom: 0px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
  margin-top: 2px;
  transition: all 0.3s ease-in-out;
}
/*.product-grid .item-box:hover .thumbnail,
.product-grid .item-box:hover .thumbnail {
  border-color: var(--red);
  border-top: 3px solid var(--red);
  border-left: 2px solid var(--red);
  border-right: 2px solid var(--red);
  border-bottom: 1px solid var(--red);
  box-shadow: 0 4px 15px rgba(234, 86, 72, 0.2);
  transform: translateY(-2px);
}*/
.product-grid .item-box .thumbnail .caption {
  padding: 0px 6px;
}
.product-grid .item-box {
  margin-bottom: 0px;
  transition: all 200ms ease-in-out 0s;
  -moz-transition: all 200ms ease-in-out 0s;
  -webkit-transition: all 200ms ease-in-out 0s;
  -o-transition: all 200ms ease-in-out 0s;
}
.item-box .product-rating-box {
  display: inline-block;
  margin: 0 0 20px;
  width: 100%;
  position: relative;
}
.item-box .rating {
  background: url("../Themes/SimplexTheme/Content/images/star-x-inactive.png") repeat-x;
  width: 100px;
  height: 16px;
  margin: 0 auto;
}
.item-box .rating div {
  background: url("../Themes/SimplexTheme/Content/images/star-x-active.png") repeat-x;
  height: 16px;
}
.item-box,
.product-grid .item-box {
  height: auto !important;
}
  .item-box .product-item {
    background: #fff;
    float: left;
    width: 100%;
    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;
  }
.item-box .product-item .picture a img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Fit entire image within 3:4 container without cropping */
  object-position: center; /* Center the image within container */
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
.item-box .product-item .picture {
  margin-bottom: 0px; /* Reduced from 15px for better spacing consistency */
  overflow: hidden;
  position: relative;
}
.item-box .product-item .product-title {
  overflow: hidden;
  margin: 0px;
  height: auto;
  line-height: 18px;
  font-size: 14px;
  text-align: center;
  font-family: var(--font-default);
}
.item-box .product-item .product-title a {
  color: #2c3e50;
  text-align: center;
  font-weight: 200;
  text-transform: capitalize;
}
.item-box .product-item .product-title a:hover {
  color: var(--grey-black);
}
.item-box .product-item .sku {
  text-align: center;
  margin-bottom: 16px;
}
.product-list .item-box .product-item .sku {
  text-align: left;
}
.product-grid .item-box .product-border-bottom {
  background: #e7e7e7;
  height: 1px;
  margin: 5px auto 15px;
  width: 50%;
}
.product-grid .item-box .prices {
  width: 100%;
  float: left;
  text-align: center;
}
.product-grid .item-box .product-item .add-info .buttons {
  float: left;
  width: 100%;
  text-align: center;
}
.item-box .prices span {
  line-height: 26px;
  font-size: 14px;
  font-weight: 200;
  color: var(--grey-black);
  display: inline-block;
}

/* Remove red color from actual-price in grid view */
.item-box .actual-price,
.product-grid .item-box .actual-price,
.item-box .prices .actual-price {
  color: var(
    --grey-black
  ) !important; /* Override any red color with neutral grey-black */
  font-weight: 600; /* Make price more prominent without using red */
}

.item-box .prices .price.old-price {
  text-decoration: line-through;
  float: none;
  margin-right: 10px;
  width: auto;
  color: #999999;
}
.item-box .product-box-add-to-cart-button {
  background: url("../Themes/SimplexTheme/Content/images/product-cart-icon.png") no-repeat 12px 11px;
  border: 2px solid #ccc;
  color: #999;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 15px 10px 40px;
  line-height: 18px;
}
.item-box .product-box-add-to-cart-button:hover {
  background: url("../Themes/SimplexTheme/Content/images/product-cart-icon.png") no-repeat 12px -20px var(--red);
  border-color: var(--red);
  color: #fff;
}
.item-box .product-box-add-to-cart-button:focus {
  background: url("../Themes/SimplexTheme/Content/images/product-cart-icon.png") no-repeat 12px -20px var(--red);
  border-color: var(--red);
  color: #fff;
}
.item-box .add-to-compare-list-button {
  background: url("../Themes/SimplexTheme/Content/images/product-compare-icon.png") no-repeat 15px 18px #fff;
  height: 50px;
  width: 50px;
  text-indent: -999999px;
  padding: 0;
  border: none;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}
.item-box .add-to-wishlist-button {
  background: url("../Themes/SimplexTheme/Content/images/product-wishlist-icon.png") no-repeat 15px 20px
    #fff;
  height: 50px;
  width: 50px;
  text-indent: -999999px;
  padding: 0;
  border: none;
  margin-right: 10px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}
.item-box .add-to-compare-list-button:hover {
  background: url("../Themes/SimplexTheme/Content/images/product-compare-icon.png") no-repeat 15px -16px var(--red);
}
.item-box .add-to-wishlist-button:hover {
  background: url("../Themes/SimplexTheme/Content/images/product-wishlist-icon.png") no-repeat 15px -12px var(--red);
}
.item-box .rating::before {
  background: #222;
  content: "";
  height: 1px;
  left: 10%;
  position: absolute;
  top: 6px;
  width: 40px;
}
.item-box .rating::after {
  background: #222;
  content: "";
  height: 1px;
  right: 10%;
  position: absolute;
  top: 6px;
  width: 40px;
}
.item-box .thumbnail .picture a {
  display: block;
  position: relative;
}
.item-box .thumbnail .picture a::before {
  content: "";
  display: block;
  padding-top: 133.33%; /* 3:4 aspect ratio (4/3 = 133.33%) to match carousel standards */
}
.item-box .thumbnail .wishlist-compare-wrapper {
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 999;
  opacity: 0;
  top: 80%;
  display: none;
  transition: all 200ms ease-in-out 0s;
  -webkit-transition: all 200ms ease-in-out 0s;
  -moz-transition: all 200ms ease-in-out 0s;
  -o-transition: all 200ms ease-in-out 0s;
}
.item-box .thumbnail:hover .picture .wishlist-compare-wrapper {
  top: 40%;
  opacity: 1;
  transition: all 200ms ease-in-out 0s;
  -webkit-transition: all 200ms ease-in-out 0s;
  -moz-transition: all 200ms ease-in-out 0s;
  -o-transition: all 200ms ease-in-out 0s;
}

/* PRODUCT LIST PAGE STYLE */
.product-list .item-box {
  height: auto;
  margin-bottom: 30px;
}
.product-list .item-box .product-item {
  background: transparent;
}
.product-list .item-box .thumbnail {
  border-bottom: none;
  padding-bottom: 0px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}
.product-list .item-box .thumbnail:hover {
  background: #f1f1f1;
}
.product-list .item-box .picture {
  width: 30%;
  float: left;
  margin-right: 30px;
  margin-bottom: 0px;
}
.product-list .item-box .details {
  float: left;
  overflow: visible;
  width: 100%;
}
.product-list .item-box .description {
  display: block;
  font-size: 14px;
  width: 100%;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.product-list .item-box .product-item .price.old-price {
  display: block;
  text-decoration: line-through;
}
.product-list .item-box .thumbnail .caption {
  padding: 5px 0px;
  float: left;
  width: 65%;
  text-align: left;
  height: auto;
  min-height: inherit;
}
.product-list .item-box .thumbnail .caption .add-info .buttons {
  width: 100%;
}
.product-list .item-box .product-item .rating {
  text-align: left;
  margin: 0px 0px 0px 55px;
}
.product-list .item-box .rating::before {
  left: 0px;
}
.product-list .item-box .rating::after {
  right: -35%;
}
.product-list .item-box .product-item .product-title a {
  padding: 0px;
  text-align: left;
  margin-bottom: 15px;
}
.product-list .item-box .product-item .product-title {
  height: auto;
  margin-bottom: 25px;
  text-align: left;
}
.product-list .item-box .add-info {
  float: left;
  width: 100%;
}
.product-list .item-box .product-item .prices {
  margin-bottom: 25px;
}
.product-list .item-box .prices span {
  line-height: 20px;
}
.product-list .item-box .product-rating-box {
  display: inline-block;
  clear: both;
  width: auto;
  margin-bottom: 25px;
}

/* CATEGORY, SUB CATEGORY AND MANUFACTURER PAGE SELECTORS STYLE */
.vendor-grid .item-box .product-category-item,
.manufacturer-grid .item-box .manufacturer-item,
.sub-category-grid .item-box .sub-category-item {
  margin-bottom: 30px;
  background: #fff;
  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;
  cursor: pointer;
}
.manufacturer-grid .item-box .manufacturer-item {
  background: #f5f5f5;
}
.category-grid .item-box .category-item {
  margin-bottom: 50px;
  background: #fff;
  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;
  cursor: pointer;
}
.vendor-grid .item-box .picture a img,
.manufacturer-grid .item-box .picture a img,
.category-grid .item-box .picture a img,
.sub-category-grid .item-box .picture a img {
  width: 100%;
}
.home-page-category-grid .item-box {
  height: auto;
}
.order {
  padding: 7px 0;
}
.product-selectors {
  margin: 0px 0px 30px;
  background: #fff;
  color: var(--grey-black);
  clear: both;
}
.product-selectors .product-span {
  padding: 5px 0 0 10px !important;
}
.product-selectors .remove_left_padding {
  padding-left: 0px;
}
.viewmode-icon.grid i,
.viewmode-icon.list i {
  font-size: 18px !important;
}
.vendor-grid .item-box,
.sub-category-grid .item-box,
.manufacturer-grid .item-box {
  height: auto;
}
.viewmode-icon:focus,
.viewmode-icon:hover {
  color: #2c3e50;
}
.viewmode-icon {
  padding: 12px;
  float: left;
  border: 1px solid #ddd;
  color: var(--grey-black);
  height: 45px;
  width: 45px;
  line-height: 23px;
  text-align: center;
}
.viewmode-icon.selected {
  color: #2c3e50;
}
.viewmode-icon:hover {
  border-color: var(--red);
}
.product-viewmode .grid-list-icon {
  padding: 0;
  float: right;
}
.list-grid-view {
  float: right;
}
.product-sorting,
.product-page-size {
  margin-top: 5px;
}

/* CATEGOTY, SEARCH, MANUFACTURER, PRODUCT TAG, VENDOR, COMPARE PRODUCT PAGE STYLE */
.product-filters-wrapper .well {
  border: none;
  border-radius: 0;
  box-shadow: 0 0 5px #ddd;
  -moz-box-shadow: 0 0 5px #ddd;
  -webkit-box-shadow: 0 0 5px #ddd;
  padding: 0;
  margin-bottom: 30px;
  border: 1px solid #ededed;
}
.product-spec-filter .filter-title .fa.fa-arrow-circle-right,
.price-range-filter .filter-title .fa.fa-arrow-circle-right {
  float: left;
  margin: 3px 10px 0px 0px;
  font-size: 17px;
  color: var(--grey-black);
}
.product-filters .filter-title strong {
  display: block;
  margin-left: 20px;
  overflow: hidden;
  font-size: 16px;
}
.product-filters ul {
  padding-left: 20px;
}
.product-tags-all-page a {
  color: #777;
  font-weight: 700;
  border-radius: 0 !important;
}
.product-tags-all-page a:hover {
  color: var(--red);
}
.already-filtered-items,
.price-range-filter .selected-price-range {
  margin-left: 20px;
  color: #777;
  font-weight: 700;
}
.product-filters .already-filtered-items .filter-title strong {
  font-weight: 700;
  margin-left: 0px;
}
.product-filters .filter-content .title strong {
  color: #2c3e50;
}
.product-filters .filter-content .nav > li > a {
  font-size: 14px;
  color: #777;
  font-weight: 700;
  display: inline-block;
}
.product-filters .filter-content .nav > li > a:hover,
.product-filters .filter-content .nav > li > a:focus {
  background: transparent;
  color: var(--red);
}
.product-spec-filter .filter-content .available-items .nav.nav-list .title {
  margin-bottom: 8px;
}
.product-filters .filter-content {
  padding: 15px 20px;
  background: #fff;
}
.product-filters .filter-content ul {
  padding-left: 20px;
}
.product-filters > .filter-title {
  background: #f5f5f5;
  padding: 15px 20px;
}
.product-filters .already-filtered-items .filter-title strong {
  font-size: 14px;
}
.product-filters .already-filtered-items .filter-title strong {
  color: var(--grey-black);
}
.product-filters .already-filtered-items .item {
  font-weight: normal;
  margin-top: 5px;
}
.product-filters .filter-content ul li a i,
.product-filters .selected-price-range i,
.product-filters .already-filtered-items .item i {
  float: left;
  font-size: 16px;
  line-height: 22px;
  margin-right: 8px;
}
.clear-list.btn.btn-primary {
  margin-bottom: 10px;
}

/* Compare Products Page - Improved Styling */
.compare-products-table .picture {
  display: flex;
  justify-content: center;
  align-items: center;
}
.compare-products-table .picture img {
  max-width: 280px;
  max-height: 350px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.compare-products-table .overview td {
  vertical-align: top;
  padding: 15px 10px !important;
}
.compare-products-table .overview .remove-button {
  margin-bottom: 15px;
}
.compare-products-table .product-name td {
  font-weight: 600;
  font-size: 15px;
  padding: 12px 10px !important;
}
.compare-products-table .product-price td {
  font-size: 16px;
  color: var(--red);
  font-weight: 600;
}
.recently-added-products-page .page-body,
.recently-viewed-products-page .page-body {
  padding: 0;
}
.apply-vendor-page .from-panel .panel-body,
.product-filters.price-range-filter .filter-content ul {
  padding: 0px;
}
.contact-vendor {
  margin-bottom: 30px;
}
.recently-added-products-page .link-rss,
.compare-products-page .compare-products-table a {
  color: var(--red);
}
.compare-products-page .compare-products-table a:hover {
  color: var(--grey-black);
}
.apply-vendor-page .topic-html-content {
  border: none;
}
.vendor-contact-page .form-horizontal .control-label,
.apply-vendor-page .form-horizontal .control-label {
  text-align: left;
}
.apply-vendor-page .form-horizontal .control-label {
  float: left;
  padding-right: 5px;
}
.product-tags-all-page .page-body {
  padding: 15px;
  border: 1px solid #ddd;
}
.category-description li,
.vendor-description li,
.manufacturer-description li,
.page.topic-page .page-body li,
.post-body li,
.full-description tab-pane fade in active li,
.attribute-description li,
.news-body li {
  list-style: inherit;
}
.category-description ul,
.vendor-description ul,
.manufacturer-description ul,
.page.topic-page .page-body ul,
.post-body ul,
.full-description tab-pane fade in active ul,
.attribute-description ul,
.news-body ul {
  padding-left: 40px;
}
.vendor-attributes .option-list li {
  display: inline-block;
  margin-right: 10px;
}
.product-tags-all-page .nav-pills > li {
  height: 50px;
  display: flex;
  align-items: center;
}
.compare-products-page .panel-default {
  overflow-x: auto;
}
.compare-products-page .panel-default tr td {
  min-width: 200px;
}
.compare-products-page .specification .color-container {
  display: inline-block;
}
.compare-products-page .specification .color-container .color {
  display: table !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #222 !important;
  cursor: pointer;
}

/* SEARCH PAGE STYLE */
.search-box .search-box-button {
  background: url("../Themes/SimplexTheme/Content/images/search.png") no-repeat scroll center center #65c178;
  padding: 16px 19px;
  height: 0;
  width: 0;
}
.search-box .search-nav {
  float: left;
  height: 34px;
  padding: 0px 40px;
  margin-right: -3px;
  width: 210px;
  background: #e5e5e5;
  border: none;
  box-shadow: none;
}
.search-input .basic-search .forum-search-text.form-control {
  padding: 0px 12px;
  border-radius: 0;
  margin-bottom: 20px;
  height: 34px;
  margin-right: -3px;
}
.price-range {
  float: left;
  margin-top: 7px;
  width: 100%;
  font-weight: 700;
}
.price-range-from {
  float: left;
  margin-left: 16px;
}
.price-from.form-control {
  float: left;
  margin-left: 15px;
  width: 21%;
}
.price-range-to {
  float: left;
  margin: 0 20px;
}
.price-to.form-control {
  float: left;
  width: 21%;
}
.search-page .search-results strong {
  float: left;
  width: 100%;
  text-align: center;
}
.search-page .form-group label {
  text-align: left;
  padding-top: 5px;
  padding-right: 0px;
}
.search-page .form-group label.checkbox {
  text-align: left;
}
.search-page .product-selectors {
  margin-top: 30px;
  clear: both;
  float: left;
  width: 100%;
}
.search-box .navbar-form {
  padding-right: 0px;
}
.search-input label {
  padding-bottom: 5px;
  margin-bottom: 0;
}
.search-page .checkbox > label {
  padding-left: 0px;
  color: var(--grey-black);
  margin-left: 5px;
}
.remove_right_padding {
  padding-left: 15px;
}
.blogpost-page .page-title.panel-heading h1,
.blog-page .page-title.panel-heading h1,
.search-page .page-title.panel-heading h1,
.news-list-page .page-title.panel-heading h1,
.news-item-page .page-title.panel-heading h1 {
  text-align: left;
}
.new-comment .title {
  text-align: center;
}
.search-page .search-input.form-horizontal {
  clear: both;
  margin-bottom: 20px;
}
.search-page .search-btn {
  text-transform: uppercase;
  padding: 10px 20px;
}
.search-page .form-group {
  margin-bottom: 20px;
}
.search-results {
  clear: both;
}
.search-box .navbar-form .form-group {
  max-width: 260px;
  display: flex;
  flex-wrap: wrap;
}
.search-box .navbar-form .search-box-category {
  width: 100%;
  margin-top: 10px;
}

/* PAGINATION STYLE */
.pager li {
  margin-right: 10px;
  display: inline-block;
}
.pager li.current-page > span,
.pager li.individual-page > a {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #2c3e50;
  border-radius: 100%;
  padding: 10px 15px;
  font-weight: 700;
  font-family: var(--font-default);
}
.pager li.current-page > span {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.pager li.individual-page > a:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.pager li.previous-page a,
.pager li.next-page a,
.pager .last-page a,
.pager .first-page a {
  color: #fff;
  padding: 10px 20px;
  border-radius: 100%;
  background: var(--grey-black);
  border-color: var(--grey-black);
  font-weight: 700;
  font-family: var(--font-default);
}
.pager li.previous-page a {
  background: url(../Themes/SimplexTheme/Content/images/pagination-previous-arrow.png) no-repeat 15px 15px
    var(--grey-black);
  text-indent: -9999px;
  border-color: var(--grey-black);
}
.pager li.next-page a {
  background: url(../Themes/SimplexTheme/Content/images/pagination-next-arrow.png) no-repeat 15px 15px
    var(--grey-black);
  text-indent: -9999px;
  border-color: var(--grey-black);
}
.pager li.previous-page a:hover {
  background: url(../Themes/SimplexTheme/Content/images/pagination-previous-arrow.png) no-repeat 15px 15px
    var(--red);
  border-color: var(--red);
}
.pager li.next-page a:hover {
  background: url(../Themes/SimplexTheme/Content/images/pagination-next-arrow.png) no-repeat 15px 15px
    var(--red);
  border-color: var(--red);
}
.pager li.first-page a {
  background: url(../Themes/SimplexTheme/Content/images/pagination-previous-last-arrow.png) no-repeat 14px
    15px var(--grey-black);
  text-indent: -9999px;
  border-color: var(--grey-black);
}
.pager li.last-page a {
  background: url(../Themes/SimplexTheme/Content/images/pagination-next-last-arrow.png) no-repeat 14px 15px
    var(--grey-black);
  text-indent: -9999px;
  border-color: var(--grey-black);
}
.pager li.first-page a:hover {
  background: url(../Themes/SimplexTheme/Content/images/pagination-previous-last-arrow.png) no-repeat 14px
    15px var(--red);
  border-color: var(--red);
}
.pager li.last-page a:hover {
  background: url(../Themes/SimplexTheme/Content/images/pagination-next-last-arrow.png) no-repeat 14px 15px
    var(--red);
  border-color: var(--red);
}

/* MISC. CLASSES */
/*.nobr{white-space:nowrap!important;}*/
.wrap {
  white-space: normal !important;
}
.a-left {
  text-align: left !important;
}
.a-right {
  text-align: right !important;
}
.noscript {
  border: 1px solid #ddd;
  border-width: 0 0 1px;
  background: #ffff90;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: #2f2f2f;
}
.clearer {
  zoom: 1;
}
.clearer:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

/* AJAX LOADING INDICATOR */
.ajax-loading-block-window {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 128px;
  height: 128px;
  overflow: hidden;
  z-index: 1104;
}
.ajax-loading-block-window .loading-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 128px;
  height: 128px;
  background-image: url("../Themes/SimplexTheme/Content/images/ajax_loader_large.gif");
}
.please-wait {
  background: url("../Themes/SimplexTheme/Content/images/ajax-loader-small.gif") no-repeat;
  padding-left: 20px;
}

/* VALIDATION AND ERRORS STYLE */
.message-error,
.validation-summary-errors {
  font-size: 11px;
  text-align: center;
  margin: 5px 0px;
}
.message-error ul {
  padding: 0px;
  margin: 0;
}
.message-error ul li {
  list-style: none;
}
.field-validation-error,
.section.payment-info .message-error ul {
  font-size: 10px;
  color: red;
  background: #f2dede;
  color: #a94442;
  padding: 5px 5px 5px 5px;
  margin-top: 5px;
  float: left;
}
.required {
  color: red;
}
.error {
  font-size: 11px;
  color: #b94a48;
}
.input-validation-error {
  background-color: #fff;
}

/* TOPICS(hero-unit) PAGE STYLE */
.from-panel {
  margin-bottom: 50px;
  background: #fff;
}
.panel-heading {
  padding: 0;
}
.panel-heading h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-black);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  letter-spacing: 2px;
  font-family: var(--font-default);
}
.topic-html-content-body {
  padding: 15px;
  text-align: center;
}
.not-found-page ul li {
  list-style: none;
  margin-bottom: 10px;
}
.topic-html-content a {
  color: var(--red);
}
.topic-html-content a:hover {
  color: var(--grey-black);
}
.not-found-page .page-body.from-panel {
  clear: both;
}
.panel-body {
  padding: 0;
}
.topic-html-content {
  border: 0px solid #ddd;
}
.topic-html-content .panel-heading {
  margin-bottom: 0px;
  padding: 15px;
}
.topic-page .page-body img,
.topic-html-content .topic-html-content-body img,
.category-description img,
.manufacturer-description img,
.product-details-tabs #description img,
.news-item-page .news-body img,
.blogpost-page .post-body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.page.topic-page {
  padding: 15px;
}
.page.topic-page .panel-heading h1 {
  text-align: center;
}
.home-page .topic-html-content {
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px;
}

/* SITE MAP PAGE STYLE */
.sitemap-page .entity {
  margin: 0 0 30px 0;
  padding: 20px;
}
.sitemap-page h2 {
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 10px;
}
.sitemap-page .entity ul {
  overflow: hidden;
  margin: 0;
}
.sitemap-page .entity li {
  float: left;
  list-style: none;
  width: 170px;
  border-bottom: none;
  margin-bottom: 0;
}
.sitemap-page .entity .entity-body a {
  text-decoration: none;
  color: #666;
}
.entity-body.category-body.product-link li {
  float: left;
  margin-right: 26px;
  width: 48%;
  margin-bottom: 8px;
}
.entity-body.category-body.product-link li:nth-child(2n) {
  margin-right: 0px;
}
.sitemap-page .page-title.panel-heading h1,
.sitemap-page h2 {
  text-align: center;
  margin-top: 0px;
}
.sitemap-page .entity-body ul li {
  padding-bottom: 5px;
}
.sitemap-page .description {
  text-align: center;
  margin-bottom: 15px;
}

/* EU COOKIE LAW */
.eu-cookie-law {
  text-align: left;
}
a.eu-cookie-privacyinfo-tag {
  color: #b80709 !important;
  text-decoration: underline;
}
.eu-cookie-bar-notification {
  background: none repeat scroll 0 0 #f5f5f5;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  margin-left: 26%;
  margin-top: 20px;
  padding: 15px;
}
.eu-cookie-bar-notification .text {
  margin-bottom: 10px;
  color: var(--grey-black);
}

/* NOTIFICATIONS */
.bar-notification {
  display: none;
  left: 0;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1000000;
}
.bar-notification.success {
  background: #4bb07a;
  color: #ffffff;
  margin: 0 0 10px;
}
.bar-notification.error {
  background: #e4444c;
  color: #ffffff;
  margin: 0 0 10px;
}
.bar-notification .close {
  background: url(../Themes/SimplexTheme/Content/images/ico-close-notification-bar.png) no-repeat;
  width: 20px;
  height: 20px;
  float: right;
  margin: 25px 10px 0px 0px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.9;
}
.bar-notification p.content {
  padding: 20px 40px 20px 20px;
  margin: 5px 0px;
  text-align: center;
}
.bar-notification p.content a {
  text-decoration: underline;
  color: #ffffff;
}
.bar-notification p.content a:hover {
  text-decoration: none;
  color: #ffffff;
}
.bar-notification.error p.content {
  margin: 5px 0px;
  padding: 10px 25px;
  text-align: center;
  font-size: 14px;
}

/* PRODUCT DETAILS PAGE STYLE */
.product-details-page .overview {
  float: left;
  width: 100%;
}
.product-collateral {
  margin-bottom: 10px;
  clear: both;
}
.product-details-page .gallery .picture {
  text-align: center;
  margin-bottom: 20px;
}
.product-details-page .thumb-popup-link {
  border: 2px solid #ddd;
  display: inline-block;
  margin-bottom: 20px;
  margin-right: 5px;
  padding: 5px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
}
.product-details-page .thumb-popup-link:hover {
  border: 2px solid var(--red);
}
.product-details-page .thumb-popup-link img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.product-details-page .thumb-popup-link:last-child {
  margin-right: 0px;
}
.product-details-page .gallery .picture-thumbs a:hover,
.product-details-page .gallery .picture-thumbs a:focus {
  text-decoration: none;
}
.product-details-page .overview,
.product-details-page .gallery {
  margin-bottom: 10px;
  float: left;
  width: 100%;
}
.product-details-page .giftcard,
.product-details-page .tier-prices {
  margin-bottom: 20px;
  float: left;
  width: 100%;
}
.product-details-page .gallery .picture-thumbs {
  text-align: center;
}
.product-details-page .product-name.panel-heading {
  margin-bottom: 20px;
  border-bottom: none;
}
.product-details-page .product-name h1 {
  font-size: 22px !important;
  color: var(--grey-black) !important;
  font-weight: bold !important;
  text-transform: capitalize;
  letter-spacing: 0px;
  font-family: var(--font-default) !important;
}
.product-details-page .short-description,
.product-details-page .variant-description {
  margin-bottom: 25px;
  clear: both;
  color: #555;
  line-height: 22px;
  font-family: var(--font-default);
}
.product-details-page .product-reviews-overview,
.product-details-page .additional-details {
  float: left;
  width: 100%;
}
.product-details-page .product-reviews-overview .product-review-links,
.product-details-page .product-reviews-overview .product-review-box,
.product-details-page .product-reviews-overview .product-no-reviews {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.product-details-page
  .product-reviews-overview
  .product-review-links
  .separator {
  margin: 0 2px;
  color: #666;
}
.product-review-box .rating {
  height: 16px;
  width: 100px;
  background: url("../Themes/SimplexTheme/Content/images/star-x-inactive.png") 0 0 repeat-x;
}
.product-review-box .rating div {
  float: left;
  height: 16px;
  background: url("../Themes/SimplexTheme/Content/images/star-x-active.png") 0 0 repeat-x;
  font-size: 0;
}
.product-details-page .availability {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.product-details-page .availability .stock strong {
  font-weight: normal;
  color: #555;
  float: left;
  line-height: 25px;
  margin-right: 5px;
}
.back-in-stock-subscription-page .page-title h1 {
  font-size: 18px;
}
.back-in-stock-subscription-page .page-title,
.back-in-stock-subscription-page .page-body {
  padding: 10px;
}
.back-in-stock-subscription-page #back-in-stock-notify-me {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  font-family: var(--font-default);
}
.backinstocksubscription-tooltip {
  border: 1px solid #ddd;
  margin-top: 5px;
  padding: 5px;
}
.product-details-page .subscribe-button {
  background: url(../Themes/SimplexTheme/Content/images/notification-icon.png) no-repeat 15px 14px #f5f5f5;
  border: 2px solid #ddd;
  font-weight: 700;
  padding: 10px 15px 10px 38px;
}
.product-details-page .subscribe-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/notification-icon.png) no-repeat 15px -19px var(--grey-black);
  border-color: var(--grey-black);
  color: #fff;
}
.product-details-page .back-in-stock-subscription {
  margin-top: 20px;
  float: left;
  width: 100%;
}
.product-vendor .value,
.delivery-date .value,
.stock .value,
.sku .value,
.manufacturer-part-number .value,
.gtin .value,
.manufacturers .value {
  margin-left: 3px;
  color: #2c3e50;
}
.product-vendor .value a,
.manufacturers .value a,
.tax-shipping-info a {
  color: #2c3e50;
}
.product-vendor .value a:hover,
.manufacturers .value a:hover,
.tax-shipping-info a:hover {
  color: var(--grey-black);
}
.product-details-page .stock .value {
  background: #72b226;
  padding: 5px 10px;
  color: #fff;
  float: left;
}
.product-details-page .additional-details .label,
.product-details-page .manufacturers .label {
  color: #555;
  padding: 0px;
  font-size: 14px;
  border-radius: 0px;
  font-weight: normal;
  text-transform: capitalize;
}
.product-details-page .additional-details div {
  margin-bottom: 20px;
}
.product-details-page .delivery,
.product-details-page .add-to-cart,
.product-details-page .overview .delivery-date {
  float: left;
  width: 100%;
  margin-bottom: 25px;
}
.product-details-page .delivery {
  margin-bottom: 0 !important;
}
.product-details-page .delivery > div {
  margin-bottom: 20px !important;
}
.product-details-page .free-shipping {
  color: #fff;
  display: inline-block;
  background: var(--grey-black);
  padding: 10px 15px;
  margin-bottom: 20px;
}
.product-details-page .free-shipping strong {
  margin-left: 5px;
}
.product-details-page .download-sample {
  clear: both;
  margin-bottom: 20px;
}
.product-details-page .download-sample-button {
  background: url(../Themes/SimplexTheme/Content/images/download-icon.png) no-repeat 15px 15px #f5f5f5;
  border: 2px solid #ddd;
  font-weight: 700;
  padding: 10px 15px 10px 38px;
  color: var(--grey-black);
}
.product-details-page .download-sample-button:hover,
.product-details-page .download-sample-button:focus {
  background: url(../Themes/SimplexTheme/Content/images/download-icon.png) no-repeat 15px -20px var(--grey-black);
  border-color: var(--grey-black);
  color: #fff;
}
.product-details-page .prices div,
.product-details-page .manufacturers {
  margin-bottom: 0px;
  float: left;
}
.product-details-page .prices .product-price {
  font-weight: bold;
}
.product-details-page .prices .product-price span {
  font-size: 18px;
  color: #2c3e50;
}
.product-details-page .old-product-price {
  display: inline-block;
  text-decoration: line-through;
  color: #999;
  margin-right: 15px;
  margin-bottom: 0;
}
.product-details-page .old-product-price label {
  display: inline;
  font-weight: normal;
  font-size: 15px;
}
.product-details-page .product-price label {
  display: inline;
  font-size: 20px;
  color: var(--grey-black);
}
.product-details-page .prices .rental-price label {
  font-weight: normal;
  color: #555;
}
.product-details-page .prices .rental-price span {
  color: #2c3e50;
}
/* Tier prices - semantic volume-pricing table.
   Colors are derived from the theme brand variables (--red, --grey-black) so each
   shop branch's color scheme applies. Neutral tints are mixed from --grey-black;
   override --tp-* per branch for fine control. */
.product-details-page .tier-prices {
  --tp-accent: var(--red);
  --tp-accent-dark: var(--dark-red);
  --tp-strong: var(--grey-black);
  --tp-border: color-mix(in srgb, var(--grey-black) 16%, transparent);
  --tp-hairline: color-mix(in srgb, var(--grey-black) 10%, transparent);
  --tp-header-bg: color-mix(in srgb, var(--grey-black) 6%, transparent);
  --tp-stripe-bg: color-mix(in srgb, var(--grey-black) 4%, transparent);
  --tp-muted: color-mix(in srgb, var(--grey-black) 72%, transparent);
  --tp-save-bg: color-mix(in srgb, var(--red) 12%, transparent);
  float: none;
  clear: both;
  width: 100%;
  max-width: 360px;
}
.product-details-page .tier-prices .tier-prices-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  background: var(--tp-header-bg);
  color: var(--tp-strong);
  padding: 9px 14px;
  text-align: left;
  border: 1px solid var(--tp-border);
  border-top: 2px solid var(--tp-accent);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.product-details-page .tier-prices .tier-prices-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tp-strong);
}
.product-details-page .tier-prices .tier-prices-subtitle {
  font-size: 12px;
  color: var(--tp-muted);
}
.product-details-page .tier-prices .tier-prices-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid var(--tp-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  table-layout: auto;
}
.product-details-page .tier-prices .tier-prices-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--tp-muted);
  background: transparent;
  padding: 7px 14px;
  border-bottom: 1px solid var(--tp-hairline);
}
.product-details-page .tier-prices .tier-prices-table thead .tier-col-qty {
  text-align: left;
}
.product-details-page .tier-prices .tier-prices-table thead .tier-col-price {
  text-align: right;
}
.product-details-page .tier-prices .tier-prices-table tbody td {
  padding: 11px 14px;
  border-top: 1px solid var(--tp-hairline);
  vertical-align: middle;
}
.product-details-page .tier-prices .tier-prices-table tbody tr:first-child td {
  border-top: 0;
}
.product-details-page .tier-prices .tier-prices-table tbody tr {
  background: transparent;
}
.product-details-page .tier-prices .tier-qty {
  white-space: nowrap;
}
.product-details-page .tier-prices .tier-qty-num {
  font-weight: 700;
  color: var(--tp-strong);
  font-size: 16px;
}
.product-details-page .tier-prices .tier-qty-label {
  font-size: 12px;
  color: var(--tp-muted);
  margin-left: 4px;
}
.product-details-page .tier-prices .tier-price {
  text-align: right;
  white-space: nowrap;
}
.product-details-page .tier-prices .tier-price-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--tp-accent);
}
.product-details-page .tier-prices .tier-save {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tp-accent-dark);
  background: var(--tp-save-bg);
  border-radius: 10px;
}
/* Conflict fix: contain floats so the B2B matrix block cannot overlap tier prices */
.product-details-page .price-availability::after {
  content: "";
  display: block;
  clear: both;
}
.product-details-page .matrix-container {
  clear: both;
}
.product-details-page .attributes .btn-dropdown.form-control {
  width: 100%;
}
.product-details-page .attributes .text-prompt {
  font-weight: bold;
  display: inline;
  color: #555;
}
.product-details-page .attributes .size-chart-link {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 2px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #888;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, opacity 0.2s ease;
  vertical-align: middle;
}
.product-details-page .attributes .size-chart-link:hover {
  color: var(--red);
  text-decoration: none;
  opacity: 0.9;
}
.product-details-page .attributes .size-chart-link i,
.product-details-page .attributes .size-chart-link svg,
.product-details-page .attributes .size-chart-link img.size-chart-icon {
  margin-right: 5px;
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.product-details-page .attributes .size-chart-link:hover img.size-chart-icon,
.product-details-page .attributes .size-chart-link:hover i,
.product-details-page .attributes .size-chart-link:hover svg {
  opacity: 1;
}
.product-details-page .attributes .attribute-description {
  font-size: 11px;
}
.product-details-page .attributes ul.option-list {
  padding: 0px;
  margin: 0px;
}
.product-details-page .attributes ul.option-list li {
  list-style: none;
  display: inline-block;
}
.product-details-page .attributes ul.option-list li label {
  font-weight: normal;
  color: #555;
  vertical-align: middle;
}
.product-details-page .attributes .textbox {
  width: 100%;
}
.product-details-page .attributes textarea {
  height: 150px;
  border: 1px solid #ccc;
}
.product-details-page .add-to-cart .qty-input {
  width: 60px;
  float: left;
  margin: 0;
  height: 40px;
  font-size: 16px; /* ENHANCED: Consistent font size for better readability */
}
.product-details-page .addtocart-quantity-box {
  float: left;
  margin-right: 20px;
  width: 135px;
}
.product-details-page .add-to-cart .qty-.dropdown {
  width: 80px;
}
.product-details-page .add-to-cart .qty-dropdown {
  width: 80px;
  float: left;
  margin-right: 10px;
  height: 40px;
}
.product-details-page .add-to-cart .quantity-box label {
  font-weight: 600;
  color: #555;
  float: left;
  margin-right: 15px;
  line-height: 35px;
}
.product-details-page .add-to-cart .addtocart-quantity-box span {
  border: 1px solid #ddd;
  cursor: pointer;
  float: left;
  font-size: 10px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 20px;
  color: #999;
}
.product-details-page .add-to-cart .product-add-button .add-to-cart-button {
  background: url(../Themes/SimplexTheme/Content/images/product-cart-icon.png) no-repeat 12px -20px var(--red);
  text-transform: uppercase;
  padding-left: 40px;
}
.product-details-page
  .add-to-cart
  .product-add-button
  .add-to-cart-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/product-cart-icon.png) no-repeat 12px -20px var(--grey-black);
}
.product-details-page .add-to-cart .product-add-button {
  float: left;
}
.product-details-page .overview-buttons {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 25px;
}
.product-details-page .overview-buttons .add-to-wishlist-button {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-product-icon.png) no-repeat 20px 10px
    var(--grey-black);
  text-transform: uppercase;
  padding-left: 50px;
  float: left;
}
.product-details-page .overview-buttons .add-to-wishlist-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-product-icon.png) no-repeat 20px 10px
    var(--red);
}
.product-details-page .overview-buttons .add-to-compare-list-button {
  background: url(../Themes/SimplexTheme/Content/images/compare-product-icon.png) no-repeat 20px 10px
    var(--grey-black);
  text-transform: uppercase;
  padding-left: 50px;
  float: left;
}
.product-details-page .overview-buttons .add-to-compare-list-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/compare-product-icon.png) no-repeat 20px 10px
    var(--red);
}
.product-details-page .overview-buttons .email-a-friend-button {
  background: url(../Themes/SimplexTheme/Content/images/email-product-icon.png) no-repeat 20px 10px
    var(--grey-black);
  text-transform: uppercase;
  padding-left: 50px;
  float: left;
}
.product-details-page .overview-buttons .email-a-friend-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/email-product-icon.png) no-repeat 20px 10px
    var(--red);
}
.product-details-page .customer-entered-price .enter-price-label {
  float: left;
  padding-top: 0px;
  font-weight: 600;
  color: #555;
}
.product-details-page .customer-entered-price .enter-price-input {
  margin: 0 0 0 10px;
  width: 60px;
  float: left;
}
.product-details-page .attributes.rental-attribute,
.product-details-page .price-availability .rental-price,
.product-details-page .price-availability .prices,
.product-details-page .price-availability {
  clear: both;
}
.product-details-page .price-range,
.customer-entered-price .price-input {
  margin-bottom: 20px;
  margin-top: 0px;
  overflow: hidden;
}
.product-details-page .product-reviews-overview .product-review-links a,
.product-details-page .product-reviews-overview .product-no-reviews a {
  color: #666;
}
.product-details-page .product-reviews-overview .product-review-links a:hover,
.product-details-page .product-reviews-overview .product-no-reviews a:hover {
  color: var(--red);
}
#fancybox-close {
  position: absolute !important;
  right: -25px !important;
  top: -9px !important;
}
#fancybox-outer {
  width: 103% !important;
  height: 106% !important;
}
.product-details-page .product-share-button {
  clear: both;
}
.product-details-page .product-share-button a {
  padding: 0px;
  float: left;
  margin-right: 8px;
}
.product-details-page .product-share-button a span {
  height: 40px !important;
  width: 40px !important;
  text-align: center;
  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;
}
.product-details-page .product-share-button a span .at-icon {
  height: 40px !important;
  width: 25px !important;
}
.product-details-page .product-share-button a span:hover {
  background: var(--red) !important;
}
.product-details-page .tab-content {
  float: left;
  margin-top: 0;
  padding: 15px 15px;
  width: 100%;
  border: 1px solid #ddd;
  margin-top: -1px;
}
.product-details-page .nav-tabs {
  border: none;
}
.product-details-page .nav-tabs li a {
  font-weight: normal;
  color: #666;
  /*font-size: 16px;*/
  text-transform: capitalize;
}
.product-details-page .nav-tabs li.active {
  margin-bottom: 0px;
}
.product-details-page .nav-tabs li.active a {
  /*  color: #666;*/
  background: #ddd;
  border-color: #ddd;
}
.product-details-page .nav-tabs li.active a:hover,
.product-details-page .nav-tabs > li.active > a:focus {
  /*background: var(--grey-black);*/
}

.product-details-page .nav-tabs li.active a::after {
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #ddd;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}
.product-details-page .nav-tabs > li > a {
  margin-right: 15px;
  border: 1px solid #f5f5f5;
  border-radius: 0px;
  padding: 5px 35px;
  background: #f5f5f5;
}
.product-details-page .nav-tabs > li:last-child > a {
  margin-right: 0;
}
.product-details-page .nav > .label.label-default > a:hover,
.product-details-page .nav > .label.label-default > a:focus {
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}
/*.product-details-page .nav-tabs > li > a:focus,
.product-details-page .nav-tabs > li > a:hover {
  background-color: var(--grey-black);
  color: #fff;
  outline: none;
}*/
.product-details-page .product-specs-box .panel {
  border: none;
}
.product-details-page .product-specs-box .table-bordered {
  border: 1px solid #ddd;
}
.product-details-page .product-specs-box .table-bordered tr td {
  padding: 10px;
  color: #555;
}
.product-details-page .product-specs-box .table-bordered .a-left.spec-name {
  color: #2c3e50;
  font-weight: 700;
}
.product-details-page .product-specs-box .title {
  margin-bottom: 0px;
}
.product-details-page .product-specs-box {
  clear: both;
  margin-bottom: 30px;
}
.product-details-page .tab-content .product-tags {
  margin-top: 10px;
}
.product-details-page .full-description {
  clear: both;
  margin-bottom: 20px;
  margin-top: 10px;
  /*  color: #999;*/
  line-height: 25px;
}
.product-details-page .product-tags-box .product-tags-list ul {
  margin: 0;
}
.product-details-page .product-tags-list ul li a {
  font-size: 12px;
}
.product-details-page .product-tags-box .title {
  margin-bottom: 0px;
}
.product-details-page .product-tags-box .product-tags-list .separator {
  display: none;
}
.product-details-page .product-tags-box .product-tags-list li {
  float: left;
  list-style: none;
  margin-bottom: 10px;
  padding-right: 5px;
  margin-right: 10px;
  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: #666;
  border-radius: 0px;
}
.product-details-page .product-tags-box .product-tags-list li:hover {
  background: var(--red);
  color: #fff;
}
.product-details-page .product-tags-box .panel-heading {
  padding: 0;
}
.product-details-page .product-details-tabs {
  margin-bottom: 50px;
  float: left;
  width: 100%;
}
.min-qty-notification {
  margin-bottom: 10px;
}
.product-details-page .giftcard label {
  color: #555;
  font-weight: 600;
  display: inline-block;
}
.product-details-page .giftcard .message {
  height: 100px;
}
.overview .action-button {
  display: block;
}
.product-details-page .no-associated-products {
  font-weight: bold;
}
.product-details-page .variant-picture {
  margin-right: 25px;
}
.product-details-page .product-variant-list .addtocart-quantity-box {
  margin-right: 15px;
}
.product-details-page .variant-overview .variant-name {
  font-weight: 700;
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 20px;
}
.product-details-page .tax-shipping-info {
  float: left;
  padding-bottom: 10px;
  width: 100%;
}
.variant-overview .tax-shipping-info {
  border: none;
}
.back-in-stock-subscription-page .tooltip {
  opacity: 1;
  position: relative;
}
.product-details-page .price-availability .availability {
  position: absolute;
  right: 0px;
}
.product-details-page .price-availability {
  position: relative;
  margin-bottom: 0px; /* Add bottom margin to account for absolutely positioned availability */
}
.base-price-pangv {
  clear: both;
  float: left;
  margin-bottom: 15px;
}
.product-attribute-label {
  padding-right: 0;
}
.product-details-page .related-products-grid {
  clear: both;
}
.product-details-page
  .product-variant-list
  .product-variant-line:nth-child(2n + 1) {
  clear: both;
}
.qty-box {
  margin-top: 15px;
}
.qty-box .text-prompt {
  padding: 0;
  margin-top: 5px;
}
.qty-box .qty-text {
  padding: 0;
}
/* Magnific Popup z-index - consolidated rules for popup display above header (z-index: 99999) */
.mfp-ready,
.mfp-wrap {
  z-index: 9999999 !important;
}
.product-specification .data-table tr.hidden-row th {
  padding: 0;
  border-top: none;
}
.product-specification .data-table tr.hidden-row th > span {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
}

/* PRODUCT REVIEW PAGE STYLE */
.product-reviews-page .write-review {
  margin-bottom: 10px;
}
.product-reviews-page .write-review .title {
  margin-bottom: 20px;
  font-size: 16px;
}
.product-reviews-page .product-review-list .title {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 10px;
}
.product-reviews-page .write-review .review-text {
  max-width: 100%;
  min-height: 120px;
  background-color: #fff;
}
.product-reviews-page .write-review .review-rating {
  float: left;
  width: 100%;
}
.product-reviews-page .write-review .review-title {
  background: #fff;
}
.review-rating .first {
  float: left;
  padding: 4px;
}
.review-rating .rb {
  float: left;
  margin: 4px 4px 0 0;
}
.review-rating .last {
  padding: 4px;
}
.product-reviews-page .product-review-list {
  margin: 0 0;
}
.my-product-reviews-list-page .product-review-item,
.product-reviews-page .product-review-item {
  float: left;
  width: 100%;
  margin: 0;
  border: 1px solid #d3d3d3;
  padding: 10px 10px 10px;
  margin-bottom: 10px;
}
.product-reviews-page .captcha-box {
  margin-bottom: 20px;
}
.my-product-reviews-list-page .review-title,
.product-review-list .review-title {
  float: left;
  margin-bottom: 5px;
  clear: both;
}
.my-product-reviews-list-page .product-review-item .rating,
.product-review-list .product-review-item .rating {
  float: right;
  margin-right: 5px;
}
.product-review-list .product-review-item .reply-text,
.product-review-list .product-review-item .review-text,
.downloadable-products-page
  a.product-review-list
  .product-review-item
  .review-info {
  margin-bottom: 5px;
  clear: both;
  float: left;
  text-align: justify;
}
.product-review-item .review-info .separator {
  margin: 0 2px;
}
.product-review-item .product-review-helpfulness {
  clear: both;
  font-size: 11px;
}
.product-review-item .product-review-helpfulness .vote {
  font-size: 13px;
  text-decoration: none;
  color: var(--red);
}
.product-review-item .product-review-helpfulness .vote:hover {
  cursor: pointer;
  color: var(--grey-black);
}
.product-review-item .avatar {
  padding: 10px;
  display: inline-block;
}
.product-review-item .avatar img {
  max-width: 100%;
  height: auto;
}
.product-review-list .product-review-item .review-text {
  clear: none;
}
.product-review-item .review-content {
  clear: both;
}
.write-review .validation-summary-errors ul {
  margin-bottom: 0px;
}
.product-reviews-page .review-rating ul {
  padding: 0;
  margin-bottom: 0;
}
.product-reviews-page .review-rating ul li {
  list-style: none;
}
.product-reviews-page .review-rating .control-label {
  padding-top: 2px !important;
}
.product-reviews-page a,
.email-a-friend-page h2 a {
  color: var(--red);
}
.product-reviews-page a:hover,
.email-a-friend-page h2 a:hover {
  color: var(--grey-black);
}
.product-review-list .product-review-item .reply-text,
.product-review-list .product-review-item .review-text {
  color: #555;
}
.result.review-result {
  color: var(--red);
}
.my-product-reviews-list-page .review-content {
  clear: both;
}
.my-product-reviews-list-page .review-content .review-text {
  margin-bottom: 10px;
}
.my-product-reviews-list-page .user a {
  color: var(--red);
}
.my-product-reviews-list-page .user a:hover {
  color: var(--grey-black);
}
.product-review-list .product-review-item .reply .reply-header {
  font-weight: bold;
  margin: 10px 0;
}
.tooltip {
  position: initial;
  display: inline-block;
  color: #444;
  font-family: var(--font-default);
}
.review-item-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vendor-product-reviews .product-review-box {
  width: auto;
}
.vendor-product-reviews-title {
  margin-bottom: 20px;
  font-size: 16px;
}
.vendor-page .block {
  max-width: 100%;
  text-align: right;
}
.review-item-info .review-product-name a,
.vendor-page .block a {
  display: inline-block;
  color: var(--red);
  cursor: pointer;
}
.review-item-info .review-product-name a:hover {
  color: var(--grey-black);
}
.vendor-page .block .btn-primary {
  color: #ffffff;
  margin-top: 10px;
}
.vendor-page .product-review-item {
  float: left;
  width: 100%;
  margin: 0;
  border: 1px solid #d3d3d3;
  padding: 10px 10px 10px;
  margin-bottom: 10px;
}
.tooltiptext {
  visibility: hidden;
  width: auto;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  text-align: Left;
  padding: 10px 10px 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 27%;
  left: 1%;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltiptext::after {
  content: "";
  position: absolute;
}
.name-description label {
  cursor: pointer;
}
.name-description:hover > .tooltiptext {
  visibility: visible;
  opacity: 1;
  cursor: help;
}
.product-review-item .avatar {
  margin: 0 0 10px;
}
.product-review-item .review-type-rating-ext {
  overflow: hidden;
  margin: 0 0 20px;
}
.product-review-item .review-item-head {
  overflow: hidden;
  padding: 5px 0;
}
.product-review-item .review-text {
  margin: 0 0 15px !important;
}
.product-review-item .review-info {
  margin: 0 0 5px;
}

/* EMAIL A FRIEND PAGE STYLE */
.email-a-friend-page form {
  margin-bottom: 15px;
}
.email-a-friend-page h2 {
  font-size: 20px;
  margin: 0 0 30px 0;
  float: left;
  width: 100%;
}
.email-a-friend-page .personal-message {
  min-height: 120px;
}
.email-a-friend-page .bg-success,
.coupon-box .bg-success {
  padding: 5px;
}
.email-a-friend-page .alert.alert-success {
  clear: both;
}
.email-a-friend-page .form-horizontal .control-label {
  text-align: left;
  padding-top: 0px;
}

/* LOGIN PAGE STYLE */
.send-email-a-friend-button,
.write-product-review-button,
.login-page .register-button,
.login-page .checkout-as-guest-button,
.register-continue-button,
.registration-page .register-next-step-button,
.login-page .new-wrapper.register-block .register-button,
.login-page .login-button,
.password-recovery-page .password-recovery-button {
  text-transform: uppercase;
}
.password-recovery-page .page-title {
  margin-bottom: 15px;
}
.login-page .new-wrapper legend + *::before,
.login-page .returning-wrapper legend + *::before {
  margin-bottom: 0px;
}
.login-page .checkout-as-guest-or-register-block legend,
.login-page .new-wrapper.register-block fieldset legend,
.login-page .returning-wrapper fieldset legend {
  text-align: left;
  font-weight: 700;
  color: #000;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.alert {
  padding: 5px !important;
}
.login-page .customer-blocks {
  margin-bottom: 30px;
}
.new-wrapper.register-block,
.returning-wrapper,
.checkout-as-guest-or-register-block {
  border: 1px solid #ededed;
  border-radius: 0px;
  padding: 20px;
  float: left;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  -moz-box-shadow: 0 0 10px #ccc;
}
.login-page .new-wrapper.register-block .text {
  color: #646464;
}
.login-page .checkout-as-guest-or-register-block .topic-html-content {
  border: none;
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
}
.login-page .checkout-as-guest-or-register-block li,
.login-page .external-auth-errors li {
  list-style: none;
}
.login-page .checkout-as-guest-or-register-block .panel-body ul {
  padding-left: 20px;
}
.new-wrapper.checkout-as-guest-or-register-block {
  margin-bottom: 15px;
}
.login-page .returning-wrapper .control-label {
  text-align: left;
  padding-top: 0px;
  margin-bottom: 10px;
}
.login-page .remember-me .checkbox label {
  display: inline-block;
  color: #666;
}
.login-page .forgot-password {
  margin-top: 1px;
  float: right;
  margin-right: 15px;
}
.login-page .remember-me .checkbox {
  padding-top: 0;
  padding-left: 35px;
}
.login-page .checkbox input[type="checkbox"] {
  margin-left: -20px;
  position: absolute;
  width: auto;
  min-height: inherit;
  margin-top: -3px;
}
.login-page .checkbox label {
  padding-left: 0;
}
.login-page .validation-summary-errors.alert.alert-danger {
  font-size: 11px;
  background: none repeat scroll 0 0 #f2dede;
  color: #a94442;
  border: none;
  margin-bottom: 10px !important;
  clear: both;
}
.login-page .form-group .forgot-password a {
  color: var(--grey-black);
  text-decoration: none;
}
.login-page .form-group .forgot-password a:hover {
  color: var(--red);
}
.login-page .checkout-as-guest-or-register-block .buttons {
  margin: 20px 0px;
  padding-right: 0px;
}
.login-page .btn.btn-default.checkout-as-guest-button {
  margin-right: 10px;
}
.topic-html-content.from-panel .panel-heading {
  padding: 15px;
}
.facebook-login-block .buttons {
  text-align: center;
}
.facebook-login-block .facebook-btn:hover {
  background: url(../Themes/SimplexTheme/Content/images/facebook-signing.png) no-repeat center center;
  height: 33px;
  width: 175px;
}
.facebook-login-block .facebook-btn {
  background: url(../Themes/SimplexTheme/Content/images/facebook-signing.png) no-repeat center center;
  height: 33px;
  width: 175px;
}
.login-page .remember-me .checkbox label:hover {
  color: var(--red);
}
.external-authentication .facebook-login-block {
  width: 100%;
}
.external-authentication ol {
  padding: 0;
}
.external-authentication {
  margin-top: 40px;
}
.external-authentication .facebook-btn:active {
  background-position: 0px;
}
.facebook-login-block .title {
  font-size: 18px;
  font-weight: 700;
  margin: 0px 0px 15px;
  padding: 0 0 10px;
  text-align: center;
  color: var(--grey-black);
  text-transform: uppercase;
}
.login-page .checkout-as-guest-or-register-block .buttons .btn {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* REGISTRATION PAGE STYLE */
.registration-result-page .result {
  margin-bottom: 20px;
}
.registration-page .accept-privacy-policy .read {
  cursor: pointer;
}
.registration-page .radio-inline input[type="radio"] {
  margin-left: -20px;
  position: absolute;
}
.registration-page .form-horizontal .radio-inline {
  padding-top: 0;
}
.registration-page .form-horizontal .form-group label {
  text-align: left;
  padding-top: 0px;
}
.registration-page .date-picker-wrapper select,
.customer-info-page .date-picker-wrapper select {
  border: 1px solid #ccc;
  padding: 5px 10px;
}
.registration-page h3 {
  text-align: left;
  font-weight: 700;
  font-size: 15px;
  color: var(--grey-black);
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
  margin-top: 0px;
  text-transform: uppercase;
}
.account-page .form-group,
.registration-page .form-group {
  margin-bottom: 30px;
}
.registration-page .form-horizontal .accept-privacy-policy label {
  text-transform: capitalize;
}
.external-authentication .title {
  font-size: 14px;
  text-align: center;
}
.date-of-birth .select-wrapper + .select-wrapper {
  margin: 0 0 0 10px;
}

/* ORDER SUMMARY, SHOPPING CART, WISHLIST PAGE STYLE - Enhanced Simplex Design */
.cart-footer.row {
  clear: both;
}

/* Cart Page Title - Simplex Style */
.shopping-cart-page .page-title h1 {
  font-family: var(--font-default);
  color: var(--grey-black);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Enhanced Cart Table Styling */
.order-summary-content .panel.panel-default.cart-item-table {
  border: 1px solid #ededed;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 0;
  margin-bottom: 0;
}
.section.order-summary-body {
  float: left;
  margin-top: 10px;
  width: 100%;
}
.message-error .alert.alert-danger {
  margin-bottom: 5px !important;
}
.order-summary-content,
.wishlist-content {
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  font-family: var(--font-default);
}
.order-summary-content .message-error,
.wishlist-content .message-error {
  margin: 5px 0 10px;
  color: var(--red) !important;
  font-family: var(--font-default);
}
.wishlist-content .cart-header-row th,
.order-summary-content .cart-header-row th {
  text-align: center;
  background: var(--grey-black);
  color: #fff;
  font-family: var(--font-default);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wishlist-content .cart-header-row .products-title,
.order-summary-content .cart-header-row .products-title {
  text-align: left;
}
.wishlist-content .panel.panel-default table tr th,
.order-summary-content .panel.panel-default table tr th {
  text-transform: uppercase;
  padding: 12px 10px;
  vertical-align: middle;
  font-family: var(--font-default);
  border-bottom: 2px solid var(--red);
}
.wishlist-content .panel.panel-default table tr td,
.wishlist-content .panel.panel-default table tr th,
.order-summary-content .panel.panel-default.cart-item-table table tr th,
.order-summary-content .panel.panel-default.cart-item-table table tr td,
.total-info .panel.panel-default table tr td {
  border: none;
}
.wishlist-content .panel.panel-default table tbody tr,
.order-summary-content .panel.panel-default.cart-item-table table tbody tr {
  border-top: 1px solid #ddd;
}
.wishlist-content .panel.panel-default > table,
.order-summary-content .panel.panel-default.cart-item-table > table {
  border-bottom: 1px solid #ddd;
}
.order-summary-content .cart .cart-item-row td,
.wishlist-content .cart .cart-item-row td {
  vertical-align: middle;
  text-align: center;
  padding: 15px 10px;
  font-family: var(--font-default);
  border-bottom: 1px solid #f0f0f0;
}
.order-summary-content .cart .cart-item-row td.product,
.wishlist-content .cart .cart-item-row td.product {
  text-align: left;
}
.order-summary-content .cart .cart-item-row td.product a,
.wishlist-content .cart .cart-item-row td.product a {
  font-family: var(--font-default);
  font-weight: 700;
  color: #2c3e50;
  font-size: 16px;
  transition: all 0.3s ease;
}
.order-summary-content .cart .cart-item-row td.product a:hover,
.wishlist-content .cart .cart-item-row td.product a:hover {
  color: var(--grey-black);
  text-decoration: none;
}
.order-summary-content .cart .cart-item-row .qty-input,
.wishlist-content .cart .cart-item-row .qty-input {
  text-align: center;
  margin-bottom: 0;
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 0;
  font-family: var(--font-default);
  font-size: 16px; /* ENHANCED: Consistent font size for better readability */
  font-weight: 600;
  color: var(--grey-black);
  transition: border-color 0.3s ease;
}
.order-summary-content .cart .cart-item-row .qty-input:focus,
.wishlist-content .cart .cart-item-row .qty-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 5px rgba(234, 86, 72, 0.3);
  outline: none;
}
.order-details-page .panel.panel-default table tbody tr .prices-alignment-right,
.return-request-page
  .panel.panel-default
  table
  tbody
  tr
  .prices-alignment-right,
.wishlist-content .cart .cart-item-row .unit-price,
.wishlist-content .cart .cart-item-row .subtotal.nobr,
.order-summary-content .cart .cart-item-row .unit-price,
.order-summary-content .cart .cart-item-row .subtotal.nobr {
  color: var(--grey-black);
  font-weight: 700;
  font-family: var(--font-default);
  font-size: 15px;
}
.order-summary-content .product-picture,
.order-summary-content .qty.nobr,
.wishlist-page .qty.nobr,
.wishlist-page .product-picture {
  width: 10%;
}
.wishlist-page .panel > .table-bordered > tbody > tr:last-child > td,
.order-summary-content .panel > .table-bordered > tbody > tr:last-child > td {
  border-bottom: 1px solid #ddd;
}
.order-summary-content .update-continue-button {
  margin: 30px 0px;
  overflow: hidden;
}
.order-summary-content .update-continue-button .estimate-shipping,
.order-summary-content .update-continue-button .update-cart,
.order-summary-content .update-continue-button .continue-shopping {
  float: left;
  margin-left: 20px;
}
.order-summary-content .update-continue-button .continue-shopping-button {
  background: url(../Themes/SimplexTheme/Content/images/shopping-cart-icon.png) no-repeat 20px 10px
    var(--grey-black);
  padding: 12px 15px 12px 50px;
  text-transform: uppercase;
  font-family: var(--font-default);
  font-weight: 700;
  font-size: 14px;
  border: none;
  color: #fff;
  transition: all 0.3s ease;
  border-radius: 0;
}
.order-summary-content .update-continue-button .estimate-shipping-button span {
  text-transform: uppercase;
  margin-left: 8px;
}
.order-summary-content .update-continue-button .continue-shopping-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/shopping-cart-icon.png) no-repeat 20px 10px
    var(--red);
}
.wishlist-page .buttons .common-buttons .update-wishlist-button,
.order-summary-content .update-continue-button .update-cart-button {
  background: url(../Themes/SimplexTheme/Content/images/shopping-cart-update-icon.png) no-repeat 20px 12px
    var(--red);
  padding: 12px 15px 12px 45px;
  text-transform: uppercase;
  font-family: var(--font-default);
  font-weight: 700;
  font-size: 14px;
  border: none;
  color: #fff;
  transition: all 0.3s ease;
  border-radius: 0;
}
.wishlist-page .buttons .common-buttons .update-wishlist-button:hover,
.order-summary-content .update-continue-button .update-cart-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/shopping-cart-update-icon.png) no-repeat 20px 12px
    var(--grey-black);
}
.order-summary-content .buttons.checkout-attribute {
  margin-bottom: 20px;
  float: left;
  width: 100%;
}
.cart-collaterals,
.totals,
.order-summary-content .buttons {
  clear: both;
}
.order-summary-content .coupon-box .message,
.order-summary-content .giftcard-box .message {
  font-size: 10px;
  color: #a94442;
  background: #f2dede;
  margin: 10px 0px 0px;
  clear: both;
  padding: 5px 10px;
}
.order-summary-content .panel.panel-default.cart-item-table,
.wishlist-page .panel.panel-default {
  border-radius: 0px;
  background-color: transparent;
  float: left;
  width: 100%;
  margin-bottom: 30px;
  border: none;
  box-shadow: none;
  margin-bottom: 0px;
}
.wishlist-page .totals .total-info .panel.panel-default,
.order-summary-content .totals .total-info .panel.panel-default {
  margin-bottom: 0px;
}
.order-summary-content .panel > .table-bordered > tbody,
.wishlist-page .panel > .table-bordered > tbody {
  background: #fff;
}
.shopping-cart-page .coupon-box,
.shopping-cart-page .giftcard-box {
  border: 1px solid #ededed;
  margin: 0 0 30px;
  overflow: hidden;
  background: #f7f7f7;
  box-shadow: 0px 0px 3px #ddd;
  -webkit-box-shadow: 0px 0px 3px #ddd;
  -moz-box-shadow: 0px 0px 3px #ddd;
  font-style: normal;
}
.coupon-box .title,
.giftcard-box .title,
.estimate-shipping .title {
  padding: 15px 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  text-transform: uppercase;
}
.cart-footer .estimate-shipping .cart-box-wrapper,
.cart-footer .cart-collaterals .deals .coupon-box .cart-box-wrapper,
.cart-footer .cart-collaterals .deals .giftcard-box .cart-box-wrapper {
  padding: 15px 15px 20px 15px;
  float: left;
  width: 100%;
}
.cart-footer .cart-collaterals .deals .coupon-box .cart-box-wrapper,
.cart-footer .cart-collaterals .deals .giftcard-box .cart-box-wrapper {
  text-align: center;
  color: #999;
}
.cart-footer .estimate-shipping .cart-box-wrapper .estimate-shipping-button,
.cart-footer
  .cart-collaterals
  .deals
  .coupon-box
  .cart-box-wrapper
  .apply-discount-coupon-code-button,
.cart-footer
  .cart-collaterals
  .deals
  .giftcard-box
  .cart-box-wrapper
  .apply-gift-card-coupon-code-button {
  text-transform: uppercase;
}
.shopping-cart-page .estimate-shipping {
  padding-bottom: 0px;
}
.shopping-cart-page .estimate-shipping .estimate-shipping-buttons {
  text-align: center;
}
.estimate-shipping .hint {
  margin-bottom: 20px;
  text-align: center;
  color: #999;
}
.estimate-shipping .country-input,
.estimate-shipping .state-input,
.estimate-shipping .zip-input {
  width: 100%;
}
.shipping-options .form-horizontal label {
  text-align: left;
  padding-bottom: 18px;
  color: #666;
  font-weight: normal;
  padding-top: 0px;
}
.shipping-results {
  background: #fff;
  box-shadow: 0 0 3px #dddddd;
  -moz-box-shadow: 0 0 3px #dddddd;
  -webkit-box-shadow: 0 0 3px #dddddd;
  padding: 10px;
  clear: both;
  border: 1px solid #ededed;
}
.estimate-shipping .shipping-results li.shipping-option-item {
  list-style: none;
  text-align: left;
  vertical-align: text-top;
  padding: 5px 0 0 5px;
}
.estimate-shipping .shipping-results .shipping-option-item .option-name {
  display: block;
  font-weight: 700;
  color: #555;
}
.estimate-shipping .shipping-results .shipping-option-item .option-description {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: #777;
}
.message.bg-danger {
  padding: 4px;
}
.order-summary-content .total-info .selected-shipping-method {
  font-weight: normal;
  font-size: 15px;
}
.order-summary-content .cart-footer .cart-total-left {
  font-weight: normal;
  height: 20px;
  text-align: left;
  vertical-align: middle;
  width: 100%;
  color: #555;
}
.cart-total-left-below {
  width: 100%;
  text-align: right;
  vertical-align: top;
  height: 30px;
}
.order-summary-content .remove-gift-card-button,
.order-summary-content .remove-discount-button {
  background: url(../Themes/SimplexTheme/Content/images/remove-icon.png) no-repeat;
  border: 0;
  width: 20px;
  height: 15px;
  background-position: center center;
}
.order-summary-content .remove-gift-card-button:hover,
.order-summary-content .remove-discount-button:hover {
  cursor: pointer;
}
.order-summary-content .selected-checkout-attributes {
  margin: 0;
  padding: 10px 5px 10px 0;
  width: 100%;
  text-align: right;
  vertical-align: middle;
}
.order-summary-content .checkout-attributes {
  border: 1px solid #ddd;
  clear: both;
  padding: 10px;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  background: #fff;
}
.order-summary-content .checkout-attributes dl {
  margin: 0;
  float: left;
  width: 100%;
}
.order-summary-content .checkout-attributes dl dt {
  float: left;
  padding-top: 5px;
  margin-right: 5px;
}
.order-summary-content .checkout-attributes dl dd {
  float: left;
  width: auto;
}
.order-summary-content .checkout-attributes ul.option-list {
  padding: 0px;
  margin: 0px;
}
.order-summary-content .checkout-attributes ul.option-list li {
  list-style: none;
}
.order-summary-content .product,
.wishlist-page .product {
  width: 35%;
}
.order-summary-content .estimate-shipping .shipping-options .form-group {
  margin: 0 0 20px;
}
.remaining-price {
  font-weight: normal;
  font-size: 12px;
}
.totals .modal-dialog {
  margin: 125px auto;
}
.order-summary-content .terms-of-service > input {
  float: left;
  margin-right: 10px;
}
.order-summary-content .terms-of-service > p {
  float: left;
  width: 90%;
  color: #666;
}
.order-summary-content .coupon-box .current-code .bg-success {
  clear: both;
  margin: 10px 0px 0px;
  color: #3c763d;
  /* font-size: 10px; */
  display: flex;
  float: left;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.current-code .bg-success input {
  background: url(../Themes/SimplexTheme/Content/images/remove-icon.png) no-repeat center center;
  border: none;
}
.order-summary-content .checkout-attributes ul.color-squares li,
.order-summary-content .checkout-attributes ul.image-squares li {
  display: inline;
}
.order-summary-content
  .checkout-attributes
  ul.color-squares
  .attribute-square-container,
.order-summary-content
  .checkout-attributes
  ul.image-squares
  .attribute-square-container {
  position: relative;
  display: inline-block;
  border: solid 1px #999;
  padding: 1px;
  margin-bottom: 5px;
}
.order-summary-content
  .checkout-attributes
  ul.color-squares
  .selected-value
  .attribute-square-container,
.order-summary-content
  .checkout-attributes
  ul.image-squares
  .selected-value
  .attribute-square-container {
  border-color: #075899;
  border-width: 2px;
  padding: 1px;
}
.order-summary-content .checkout-attributes ul.color-squares .color,
.order-summary-content .checkout-attributes ul.image-squares .image {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.order-summary-content .checkout-attributes ul.color-squares label,
.order-summary-content .checkout-attributes ul.image-squares label {
  cursor: pointer;
  position: relative;
}
.order-summary-content .checkout-attributes ul.color-squares input,
.order-summary-content .checkout-attributes ul.image-squares input {
  height: 0;
  overflow: hidden;
  z-index: -10000;
  position: absolute;
  float: none;
}
.order-summary-content .min-amount-warning {
  margin: 0;
  padding: 10px 0 10px 10px;
}
.order-summary-content .terms-of-service {
  margin: 0;
  padding: 0px 0 10px 0px;
  float: left;
  width: 100%;
  font-style: normal;
}
.order-summary-content .terms-of-service .read {
  text-decoration: underline;
  color: #2c3e50;
}
.order-summary-content .terms-of-service .read:hover {
  cursor: pointer;
}
.order-summary-content .addon-buttons {
  clear: both;
  float: right;
  margin: 0;
  padding: 10px 0 10px 10px;
  text-align: right;
}
.order-summary-content .checkout-buttons {
  font-style: normal;
  clear: both;
}
.order-summary-content .checkout-buttons .checkout-button.checkout-new {
  text-transform: uppercase;
  font-size: 18px;
  width: 100%;
  font-family: var(--font-default);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 15px 20px;
  background: var(--red);
  border: none;
  color: #fff;
  transition: all 0.3s ease;
  border-radius: 0;
  box-shadow: 0 4px 8px rgba(234, 86, 72, 0.3);
}
.order-summary-content .checkout-buttons .checkout-button.checkout-new:hover {
  background: var(--dark-red);
  box-shadow: 0 6px 12px rgba(234, 86, 72, 0.4);
  transform: translateY(-2px);
}
.order-summary-content .checkout-buttons .checkout-button.checkout-new i {
  margin-right: 8px;
  font-size: 20px;
}
.shipment-details-page .order-info-wrap .info-content,
.shipment-details-page .order-info-wrap .info-content,
.order-details-page .payment-infomation,
.order-details-page .shipping-information,
.order-details-page .billing-info-wrap .info-content,
.order-details-page .order-info-wrap .info-content,
.order-details-page .total-info .panel.panel-default,
.order-summary-content .cart-footer .total-info .panel.panel-default {
  padding: 12px;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  border-color: #ededed;
  font-size: 15px;
}
.order-details-page .total-info .panel.panel-default table tr:last-child td,
.order-summary-content .total-info .panel.panel-default table tr:last-child td {
  border-bottom: none;
}
.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(--red);
  font-weight: 700;
  color: var(--grey-black);
  font-family: var(--font-default);
  font-size: 16px;
  padding: 15px 12px;
}
.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 .selected-checkout-attributes a,
.read {
  color: #2c3e50;
  font-family: var(--font-default);
  font-weight: 600;
}
.order-summary-content .cart-footer #terms-of-service-warning-box {
  z-index: 99999;
}
.qty-input.form-control,
.shopping-cart-page .qty-dropdown.form-control {
  margin: 0 auto;
  width: 60%;
}
.wishlist-page .qty-dropdown.form-control {
  margin: 0 auto;
}
#cart-page .modal-backdrop {
  z-index: 9999;
}
.wishlist-page .update-email-button {
  float: left;
}
.wishlist-page .wishlist-add-to-cart {
  float: right;
}
.wishlist-page .update-email-button .update-wishlist,
.wishlist-page .update-email-button .email-a-friend-btn {
  float: left;
  margin-right: 20px;
}
.wishlist-page .share-info {
  float: left;
}
.wishlist-page .share-info .share-label {
  font-weight: 700;
}
.wishlist-page .buttons .common-buttons {
  overflow: hidden;
  margin: 30px 0px;
}
.wishlist-page .buttons .common-buttons .btn.btn-primary,
.wishlist-page .buttons .common-buttons .btn.btn-default {
  text-transform: uppercase;
}
.wishlist-page .share-info a.share-link {
  color: #2c3e50;
  text-decoration: none;
}
.wishlist-page .share-info a.share-link:hover {
  color: var(--grey-black);
}
.wishlist-page .buttons .common-buttons .email-a-friend-wishlist-button {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-email-icon.png) no-repeat 20px 11px
    var(--grey-black);
  padding-left: 48px;
  text-transform: uppercase;
}
.wishlist-page .buttons .common-buttons .email-a-friend-wishlist-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/wishlist-email-icon.png) no-repeat 20px 11px
    var(--red);
}
.wishlist-page .buttons .common-buttons .wishlist-add-to-cart-button {
  background: url(../Themes/SimplexTheme/Content/images/product-cart-icon.png) no-repeat 12px -20px var(--red);
  text-transform: uppercase;
  padding-left: 40px;
}
.wishlist-page .buttons .common-buttons .wishlist-add-to-cart-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/product-cart-icon.png) no-repeat 12px -20px var(--grey-black);
}
.terms-of-service label {
  font-weight: normal;
  font-family: var(--font-default);
  color: var(--grey-black);
}
.tax-shipping-info {
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
  font-family: var(--font-default);
  color: #666;
  font-size: 13px;
}
.date-picker-wrapper {
  display: flex;
}
.date-picker-wrapper select {
  margin-bottom: 10px;
  padding: 6px 4px;
  color: #555;
  border: 1px solid #ccc;
  width: 100%;
}
.date-picker-wrapper select + select {
  margin-left: 10px;
}
.giftcard-box .message-success {
  margin-top: 10px;
}
.order-summary-body {
  display: inline-block;
  width: 100%;
}

/*** ESTIMATE SHIPPING POPUP COMMON ***/
.estimate-shipping-popup {
  position: relative;
  background: #fff;
  padding: 25px 10px;
  width: auto;
  max-width: 800px;
  margin: 0 auto;
}
.estimate-shipping-popup-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.estimate-shipping-popup-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.estimate-shipping-popup-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.estimate-shipping-popup-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.estimate-shipping-popup-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.estimate-shipping-popup-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}
.shipping-options-loading {
  background: url(../Themes/SimplexTheme/Content/images/ajax-loader-small.gif) no-repeat;
  width: 16px;
  height: 16px;
  position: relative;
  right: 8px;
  margin: 4% 50%;
}
.shipping-address .required {
  margin-left: 0px;
}
.estimate-shipping-row {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.estimate-shipping-row.shipping-option {
  cursor: pointer;
}
.estimate-shipping-row.shipping-option.active {
  font-weight: 700;
}
.estimate-shipping-row-item {
  flex: 0 1 100%;
}
.estimate-shipping-row-item.shipping-item {
  padding: 8px 0;
  overflow: hidden;
  overflow-wrap: break-word;
}
.estimate-shipping-row-item.shipping-header-item {
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
  align-self: flex-end;
}
.estimate-shipping-row-item.address-item
  + .estimate-shipping-row-item.address-item {
  padding-left: 15px;
}
.estimate-shipping-row-item + .estimate-shipping-row-item {
  padding-left: 10px;
}
.estimate-shipping-row-item-radio {
  flex: 0 0 35px;
}
.ship-to-title {
  margin-bottom: 10px;
}
.choose-shipping-title {
  margin-top: 20px;
}
.estimate-shipping-address-control {
  width: 100%;
  height: 36px;
}
.estimate-shipping-radio {
  display: none;
}
.estimate-shipping-radio + label {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  padding: 9px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  margin-bottom: 0;
}
.estimate-shipping-radio:checked + label:after {
  content: " ";
  width: 6px;
  height: 6px;
  border-radius: 50px;
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ffffff;
}
.estimate-shipping-radio:checked + label {
  background-color: var(--red);
  color: #99a1a7;
  border: 1px solid #adb8c0;
  border-color: var(--red);
}
.apply-shipping-button {
  border: none;
  padding: 8px 25px;
  color: #fff;
}
.apply-shipping-button-container {
  margin-top: 15px;
  text-align: center;
}
.shipping-options-header {
  top: 0;
  z-index: 1;
  position: sticky;
  background-color: #fff;
}
.shipping-options {
  position: relative;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
  max-height: 200px;
  background: #fff no-repeat;
  background-image: -webkit-radial-gradient(
      50% 0,
      farthest-side,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0)
    ),
    -webkit-radial-gradient(50% 100%, farthest-side, rgba(242, 242, 242, 1), rgba(0, 0, 0, 0));
  background-image: -moz-radial-gradient(
      50% 0,
      farthest-side,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0)
    ),
    -moz-radial-gradient(50% 100%, farthest-side, rgba(242, 242, 242, 1), rgba(0, 0, 0, 0));
  background-image: radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(242, 242, 242, 1),
      rgba(0, 0, 0, 0)
    );
  background-position: 0 0, 0 100%;
  background-size: 100% 7px;
}
.shipping-options:before,
.shipping-options:after {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  height: 30px;
  margin: 0 0 -30px;
  background: -webkit-linear-gradient(
    top,
    #fff,
    #fff 30%,
    rgba(255, 255, 255, 0)
  );
  background: -moz-linear-gradient(top, #fff, #fff 30%, rgba(255, 255, 255, 0));
  background: linear-gradient(
    to bottom,
    #fff,
    #fff 30%,
    rgba(255, 255, 255, 0)
  );
}
.shipping-options:after {
  margin: -30px 0 0;
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0),
    #fff 70%,
    #fff
  );
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #fff 70%, #fff);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    #fff 70%,
    #fff
  );
}
.no-shipping-options {
  text-align: center;
  margin: 4% 0;
}
.estimate-shipping-popup .message-failure {
  margin: 5px 0 -5px;
  font-size: 12px;
  color: #e4434b;
}
.estimate-shipping-popup .shipping-address .form-group {
  margin-left: 0;
  margin-right: 0;
}

/*** PRODUCT ESTIMATE SHIPPING ***/
.product-estimate-shipping {
  margin-bottom: 20px;
}
.open-estimate-shipping-popup {
  color: #555;
}
.open-estimate-shipping-popup .shipping-address span {
  text-decoration: underline;
}
.open-estimate-shipping-popup:focus,
.open-estimate-shipping-popup:hover {
  color: var(--red);
}
.product-estimate-shipping .shipping-date {
  margin-top: 3px;
}
.product-estimate-shipping .shipping-title {
  font-size: 16px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
  justify-content: center;
  clear: both;
}
.product-estimate-shipping .shipping-title .shipping-price {
  margin-left: 5px;
  vertical-align: middle;
}
.product-estimate-shipping .shipping-title .shipping-loading {
  margin-left: 5px;
  vertical-align: middle;
  background: url(../Themes/SimplexTheme/Content/images/ajax-loader-small.gif) no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.product-estimate-shipping .open-estimate-shipping-popup .arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin: 0 0 3px 6px;
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}

/* ONE PAGE CHECKOUT STYLE */
.checkout-data .opc {
  padding: 0;
  overflow: hidden;
}
.opc {
  margin: 0 0 10px 0;
}
.opc li {
  list-style: none;
}
.opc li.tab-section {
  float: left;
  width: 100%;
  background: #fff;
}
.opc .step-title:after {
  display: block;
  content: ".";
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0;
  overflow: hidden;
}
.opc .ul {
  list-style: disc outside;
  padding-left: 18px;
}
.opc .allow .step-title {
  cursor: pointer;
}
.opc .step-title {
  text-align: right;
  background: #eee;
}
.opc .step-title .number {
  float: left;
  background-color: var(--grey-black);
  margin: 0 15px 0 0;
  font-size: 16px;
  line-height: 43px;
  color: #fff;
  font-weight: bold;
  width: 43px;
  height: 43px;
  text-align: center;
}
.opc .active .step-title .number {
  background-color: var(--red);
  font-weight: 700;
}
.opc .step-title h2 {
  float: left;
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 18px;
  font-weight: 700;
  color: var(--grey-black);
  padding: 12px 0px;
}
.opc .tab-section {
  margin-bottom: 10px;
}
.opc .active .step-title h2 {
  font-weight: 700;
  font-size: 14px;
  color: var(--red);
}
.opc .step {
  padding: 20px 15px;
  float: left;
  width: 100%;
}
.select-billing-address label,
.select-shipping-address label {
  margin-bottom: 15px;
  color: #000;
}
.select-billing-address .address-box label,
.select-shipping-address .address-box label {
  margin-bottom: 0;
  font-weight: normal;
  color: #777;
}
.opc .order-summary-content .cart-footer {
  background: none !important;
}
.opc .section.payment-info label {
  display: inline;
}
.new-billing-address,
.new-shipping-address {
  padding: 0;
}
#checkout-confirm-order-load .billing-info .payment-method,
#checkout-confirm-order-load .shipping-info .shipping-method {
  padding: 0;
}
#checkout-shipping-method-load .shipping-method,
#checkout-payment-method-load .payment-method,
#checkout-payment-info-load .payment-info,
#checkout-order-completed-load .order-completed {
  border: none;
  padding: 0;
  margin-bottom: 0;
}
#checkout-step-billing form,
#checkout-step-shipping form,
#checkout-step-shipping-method form,
#checkout-step-payment-method form,
#checkout-step-payment-info form {
  margin-bottom: 0;
}
.section.order-completed .title {
  margin: 0;
}
.checkout-page #billing-buttons-container,
.next-btn-wrapper {
  float: left;
  width: 100%;
}
.checkout-page .section.payment-info table {
  background-color: transparent;
}
.checkout-data .shipping-method .method-name .radio,
.checkout-data .payment-method .method-name .radio {
  float: left;
  color: #000;
}
.checkout-data .shipping-method .method-name .method-description,
.checkout-data .shipping-method ul li,
.checkout-data .shipping-method ul,
.checkout-data .payment-method ul,
.checkout-data .payment-method ul li {
  float: left;
  width: 100%;
}
.checkout-data .payment-method .method-name {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.checkout-data .payment-method .method-name .payment-logo > label {
  float: left;
  margin-right: 10px;
}
.checkout-data .payment-method .method-name .payment-details {
  float: left;
}
.checkout-data .payment-method .method-name .payment-details label {
  color: #000;
}
.payment-method .label,
.shipping-method .label,
.payment-method-status .label,
.shipping-status .label {
  color: #666;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
}
#checkout-steps .buttons {
  clear: both;
  float: left;
  width: 100%;
}
.checkout-data #checkout-steps .btn.btn-primary {
  background: url(../Themes/SimplexTheme/Content/images/checkout-continue-arrow.png) no-repeat var(--red)
    right center;
  float: right;
  text-transform: uppercase;
  padding-right: 35px;
  margin-right: 0;
}
.checkout-data #checkout-steps .btn.btn-primary:hover {
  background: url(../Themes/SimplexTheme/Content/images/checkout-continue-arrow.png) no-repeat
    var(--grey-black) right center;
}
.checkout-data #confirm-order-buttons-container .btn.btn-primary {
  background: url(../Themes/SimplexTheme/Content/images/checkout-order-confrim.png) no-repeat var(--red)
    105px center;
  text-transform: uppercase;
  font-size: 18px;
  padding: 10px 15px 10px 55px;
  width: 350px;
}
.checkout-data #confirm-order-buttons-container .btn.btn-primary:hover {
  background: url(../Themes/SimplexTheme/Content/images/checkout-order-confrim.png) no-repeat
    var(--grey-black) 105px center;
}
.next-btn-wrapper .btn.btn-primary {
  background: url(../Themes/SimplexTheme/Content/images/checkout-continue-arrow.png) no-repeat var(--red)
    right center;
  float: right;
  margin-top: 0px;
  padding-right: 35px;
}
.next-btn-wrapper .btn.btn-primary:hover {
  background: url(../Themes/SimplexTheme/Content/images/checkout-continue-arrow.png) no-repeat
    var(--grey-black) right center;
}
.checkout-data .enter-address .edit-address .form-group {
  margin-bottom: 15px;
}
.checkout-data .shipping-method ul .radio label {
  padding-left: 0;
}
.checkout-page .back-link {
  float: left;
  margin-bottom: 0px;
}
.opc .buttons .back-link small {
  display: none;
}
.back-link .btn.btn-default {
  background: url(../Themes/SimplexTheme/Content/images/checkout-back-arrow.png) no-repeat var(--grey-black)
    15px center;
  text-transform: uppercase;
  padding-left: 35px;
}
.back-link .btn.btn-default:hover {
  background: url(../Themes/SimplexTheme/Content/images/checkout-back-arrow.png) no-repeat var(--red) 15px
    center;
}
.opc .buttons.disabled button {
  display: none;
}
.opc .buttons .please-wait {
  height: 21px;
  line-height: 21px;
  float: right;
  clear: both;
}
.checkout-page .order-summary-content .order-review-data .title {
  margin-bottom: 10px;
  color: #000;
  font-size: 15px;
}
.checkout-page .order-summary-content .order-review-data li {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}
.section.payment-info .message-error ul {
  margin-bottom: 15px;
}
.payment-title {
  margin-top: 25px;
}
.checkout-data .shipping-method .method-name .method-description {
  padding-right: 10px;
  color: #666;
  margin-top: 5px;
}
.method-list {
  padding: 0;
}
.payment-info .info table tbody tr td {
  float: left;
}
.payment-info .info td label {
  float: left;
  padding-bottom: 10px;
  width: 130px;
  margin: 0;
}
.payment-info .dropdownlists,
.payment-info .info input,
.payment-info .info select,
.payment-info .valid {
  margin-left: 6px;
  margin-bottom: 10px;
}
.payment-info .info #ExpireMonth,
.payment-info .info #ExpireYear {
  width: 72px !important;
  display: inline-block !important;
  padding: 6px;
}
.checkout-page .order-summary-content .cart-footer .total-info {
  margin-bottom: 35px;
}
.checkout-page .order-completed-continue-button,
.checkout-page .btn.btn-primary {
  text-transform: uppercase;
}
.cart-footer .checkout-disabled {
  font-size: 20px;
  text-align: center;
  background: #ffa500;
  border: 1px solid #c3891e;
  color: #fff;
  padding: 15px 50px;
}
.checkout-page .edit-address-button {
  float: right;
  margin: 10px 0 10px 0;
}
.checkout-page .delete-address-button {
  float: right;
  margin: 10px 0 10px 0;
}

/* MULTIPLE CHEKOUT PAGE STYLE */
.checkout-page .address-grid {
  margin-bottom: 20px;
}
.checkout-data .address-grid .address-item .select-button {
  margin-bottom: 20px;
  text-align: center;
}
.checkout-data .section .address-box {
  list-style: none;
  padding: 15px 15px 15px 15px;
  margin: 0;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  text-align: center;
  margin-bottom: 30px;
  min-height: 260px;
  word-wrap: break-word;
}
.checkout-data .section .address-box li {
  color: #777;
  margin-bottom: 5px;
}
.checkout-data .section .address-box .name {
  color: #000;
  font-size: 16px;
}
.checkout-data .shipping-method ul,
.checkout-data .payment-method ul {
  list-style: none;
  margin: 0;
}
.checkout-data .new-billing-address,
.checkout-data .new-shipping-address {
  margin-bottom: 20px;
  overflow: hidden;
}
#billing-address-select,
#shipping-address-select {
  margin-bottom: 30px;
  width: 50%;
}
.checkout-page .primary-buttons {
  padding: 10px 0px;
}
.checkout-page .primary-buttons label,
.checkout-page .primary-buttons .control-group {
  margin-bottom: 0;
}
.checkout-data .enter-address {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.order-summary-content .cart-footer .cart-total-right {
  padding-left: 5px;
  text-align: right;
  vertical-align: middle;
  color: #555;
}
.checkout-data .shipping-method,
.checkout-data .payment-method,
.checkout-data .payment-info,
.checkout-data .order-completed {
  margin-bottom: 20px;
  float: left;
  width: 100%;
}
.checkout-page .shipping-method ul li,
.order-summary-content .cart-footer .total-info {
  margin-bottom: 20px;
  float: left;
  width: 100%;
  font-style: normal;
}
.section.order-completed a {
  color: var(--red);
}
.section.order-completed a:hover {
  color: var(--grey-black);
}
.order-summary-content .cart-footer .total-info .selected-shipping-method {
  font-size: 15px;
  font-weight: normal;
}
.checkout-page .checkout-data .order-completed ul {
  list-style: none;
  margin: 0;
  padding: 10px 0 10px 0;
}
.checkout-data .order-review-data .billing-info .payment-method,
.checkout-data .order-review-data .shipping-info .shipping-method {
  border: none;
}
.checkout-page .checkout-data .shipping-info .shipping-method,
.checkout-page .checkout-data .billing-info .payment-method {
  padding: 0;
}
.checkout-page .section.payment-info label {
  display: inline;
}
.method-description {
  margin-left: 15px;
}
.section.shipping-method .radio {
  margin: 0;
}
.section.payment-method .use-reward-points {
  padding-left: 0;
  display: flex;
  align-items: start;
  margin-bottom: 20px;
}
.enter-address .form-group label {
  text-align: left;
}
.next-btn {
  margin-top: 10px;
}
.order-summary-content .country,
.checkout-data .new-billing-address .title,
.checkout-data .new-shipping-address .title {
  margin-bottom: 10px;
  overflow: hidden;
}
.payment-info #ExpireMonth,
.payment-info #ExpireYear,
.payment-info #PurchaseOrderNumber,
.payment-info #CreditCardType,
.payment-info #CardholderName,
.payment-info #CardNumber,
.payment-info #CardCode,
#opc-payment_info #CreditCardType,
#opc-payment_info #CardholderName,
#opc-payment_info #CardNumber,
#opc-payment_info #CardCode {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}
.order-progress {
  margin-bottom: 40px;
}
.order-progress .nav.nav-pills {
  text-align: center;
}
.order-progress .nav.nav-pills li {
  display: inline-block;
  float: none;
  margin-right: 5px;
}
.order-progress .nav.nav-pills li.active-step .progress-icon {
  background: var(--dark-red);
}
.order-progress .nav.nav-pills li.active-step a {
  background: var(--red);
}
.order-progress .nav > li > a {
  color: #fff;
  font-weight: bold;
  padding: 0px;
  background: #ccc;
  padding-right: 20px;
  display: inline-block;
  border-radius: 3px;
}
.order-progress .nav > li > a > .progress-icon {
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
  margin-right: 15px;
  padding: 15px;
  background: #aaa;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.order-progress .nav > li > a:hover,
.order-progress .nav > li > a:focus {
  border: medium none;
}
.order-progress .nav > li > a,
.order-progress .nav > li > a {
  background-image: none;
  border: medium none;
}
.checkout-page .checkout-data .enter-address {
  margin-bottom: 0px;
}
.order-completed-page .section.order-completed,
.order-completed-page .panel-heading h1 {
  text-align: center;
}

/* CHECKOUT PAGE READ LINK POPUP */
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
  font-family: var(--font-default);
  border: none !important;
}
.ui-corner-all {
  border-radius: 0px !important;
}
.ui-dialog {
  padding: 0 !important;
}
.ui-widget-header {
  background: var(--grey-black) !important; /* Changed from red to grey-black */
  color: #fff !important;
  border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close {
  background: url("../Themes/SimplexTheme/Content/images/ico-close-notification-bar.png") repeat-x scroll
    50% 50% !important;
  border: none !important;
}
.ui-dialog .ui-dialog-title {
  font-weight: 500;
}
.ui-dialog .ui-dialog-content {
  border: 1px solid #aaa !important;
}
.ui-widget.ui-widget-content.ui-tabs {
  border: none;
}

/* CUSTOMER ACCOUNT PAGE STYLE */
.customer-info-page fieldset h3,
.multi-factor-authentication-page .description p:first-child {
  text-align: left;
  margin-bottom: 20px;
  font-size: 15px;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  margin-top: 0px;
  font-weight: 600;
}
.account-page .result {
  font-size: 10px;
  font-weight: 700;
  color: #3c763d;
}
.username-available-status {
  color: green;
  padding-left: 5px;
}
.username-not-available-status {
  color: red;
  padding-left: 5px;
  float: left;
  clear: both;
  width: 100%;
}
.account-page .form-group label {
  text-align: left;
  display: inline;
}
.account-page .form-group label.btn-default {
  display: block;
}
.small-heading > strong {
  float: left;
  font-size: 16px;
  margin-bottom: 20px;
  width: 100%;
}
.address-list-page .add-button {
  text-align: center;
  margin-top: 20px;
}
.form-group .save-btn-mt {
  padding-left: 10px;
}
.a-center.quantity {
  width: 10%;
}
.product.new-product-iteam {
  width: 100%;
}
.a-center.product.new-product-iteam,
.a-left.product.new-product-iteam,
.a-left.info.new-product-iteam,
.a-center.info.new-product-iteam {
  vertical-align: middle;
}
.downloadable-products-page table tr td {
  text-align: center;
}
.customer-info-page .category-iteam,
.return-request-page .form-group label {
  text-align: left;
}
.check-availability .field-validation-error {
  margin-bottom: 5px;
  width: 120px;
}
.customer-info-page .radio-inline,
.customer-info-page .checkbox-inline {
  padding-left: 0px;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
}
.customer-info-page .form-horizontal .radio-inline {
  padding-top: 0px;
}
.customer-info-page .control-label {
  padding-top: 0;
}
.account-page .section:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.address-list .address-item,
.multi-factor-authentication-page .fieldset {
  margin-bottom: 30px;
  border: 1px solid #ededed;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  padding: 10px;
  min-height: 100%;
  position: relative;
}
.address-list .address-item .title,
.multi-factor-authentication-page .fieldset .title {
  text-align: center;
  float: left;
  width: 100%;
}
.return-request-list-page .request-item .title strong,
.address-list .address-item .title strong,
.order-list-page .order-item .title strong,
.gdpr-tools-page .title strong,
.multi-factor-authentication-page .fieldset .title strong {
  font-size: 16px;
  margin-bottom: 15px;
  text-transform: capitalize;
  display: inline-block;
  margin-top: 5px;
}
.address-list .address-item ul li {
  color: #666;
  clear: both;
  margin-bottom: 5px;
}
.address-list .address-item label {
  display: inline;
}
.address-list .address-item .phone label {
  color: #646464;
}
.address-list .address-item address {
  margin-bottom: 0;
  float: left;
}
.address-list .address-item .buttons {
  text-align: center;
  position: relative;
  margin: 10px 0;
}
.section.address-item .edit-address-button {
  background: url(../Themes/SimplexTheme/Content/images/edit-icon.png) no-repeat 15px 14px var(--grey-black);
  text-transform: uppercase;
  padding-left: 35px;
  margin-right: 5px;
}
.section.address-item .edit-address-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/edit-icon.png) no-repeat 15px 14px var(--red);
}
.section.address-item .delete-address-button {
  background: url(../Themes/SimplexTheme/Content/images/delete-icon.png) no-repeat 15px 13px
    var(--grey-black);
  text-transform: uppercase;
  padding-left: 35px;
}
.section.address-item .delete-address-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/delete-icon.png) no-repeat 15px 13px var(--red);
}
.address-list-page .add-address-button {
  background: url(../Themes/SimplexTheme/Content/images/add-new-address-icon.png) no-repeat 15px 10px
    var(--red);
  text-transform: uppercase;
  padding-left: 40px;
}
.address-list-page .add-address-button:hover {
  background: url(../Themes/SimplexTheme/Content/images/add-new-address-icon.png) no-repeat 15px 10px
    var(--grey-black);
}
.order-list-page .order-item {
  margin-bottom: 30px;
  border: 1px solid #ededed;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  position: relative;
}
.return-request-list-page .request-item .title,
.order-list-page .order-item .title {
  text-align: center;
  margin-bottom: 15px;
  padding-top: 10px;
  border-bottom: 1px solid #ddd;
}
.order-list-page .order-item-detail {
  padding: 0px 10px 15px;
  overflow: hidden;
}
.return-request-list-page .section ul li,
.order-list-page .order-item-detail ul li {
  color: #666;
  margin-bottom: 5px;
}
.order-list-page .order-item-detail .buttons {
  text-align: center;
  margin-top: 15px;
  float: left;
  width: 100%;
  overflow: hidden;
}
.order-details-page .actions .btn {
  margin: 0 10px 10px 0;
}
.downloadable-products-page .panel-default {
  overflow-x: auto;
}
.downloadable-products-page table .product {
  min-width: 200px;
}
.avatar-page .buttons {
  margin: 10px 0 10px 0;
}
.back-in-stock-subscription-list-page .description,
.forum-subscriptions-page .description {
  margin-bottom: 20px;
}
.reward-points-page .reward-points-overview,
.avatar-page .image {
  margin-bottom: 10px;
}
.reward-points-page .reward-points-overview .min-balance,
.account-page .recurring-payments .title {
  margin-top: 10px;
}
.reward-points-page .reward-points-history .title {
  margin-bottom: 5px;
}
.return-request-page .a-center.quantity,
.return-request-page .a-center.price,
.shipment-details-page .a-center.quantity,
.order-details-page .a-center.quantity,
.reward-points-page .data-table td,
.reward-points-page .data-table th {
  text-align: center;
}
.use-reward-points {
  padding-left: 40px;
}
.category-iteam {
  width: 100%;
}
.address-edit-page .category-iteam {
  text-align: left;
}
.change-password-page #OldPassword,
.change-password-page #NewPassword,
.change-password-page #ConfirmNewPassword {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: var(--grey-black);
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: 0px;
  position: inherit;
}
.address-edit-page .control-label {
  padding-top: 0px;
}
.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(--red);
  text-decoration: none;
}
.forum-top i:hover,
.forum-top a:hover,
.forums-table-section .topic-name a:hover,
.shipment-details-page a:hover,
.downloadable-products-page .a-center.product a:hover,
.downloadable-products-page .a-center.order a,
.address-list-page ul .email a:hover,
.order-details-page .a-left.name a:hover,
.return-request-page .a-left.name a:hover,
.back-in-stock-subscription-list-page .a-left.product a:hover,
.return-request-list-page ul li a:hover,
.forum-subscriptions-page .a-left.info a,
.forums-main-page a,
.forum-page-edit .topic-header a,
.forum-search-box .advanced a,
.forum-page-edit .topic-header a,
.forum-page-edit .manage a,
.forum-page-edit .post-content .pull-right a,
.forum-page-edit .topic-footer a,
.forum-page-edit .send-pm-box a:hover,
.private-messages-page .panel-body ul li a:hover,
.private-messages-page .data-table a,
.forum-search-page a,
.forum-subscriptions-page .data-table,
.blog-page .post-head a,
.blog-page .blog-details a,
.blog-page .blog-details ul li a,
.news-list-pag .news-head a,
.blogpost-page .tags ul li a,
.blogpost-page .post-body p a:hover,
.sitemap-page .entity-body ul li a,
.news-item-page .news-body p a:hover,
.forum-group-page .forums-table-section-title a,
.forum-group-page .forums-table-section-body tr td a {
  color: var(--grey-black);
}
.forum-page-edit .forum-topic-page .manage a:hover,
.forum-page-edit .forum-topic-page .title i:hover {
  color: #000;
}
.customer-info-page .panel.panel-default.extrnal-table,
.customer-info-page .form-fields.add-more-external-records {
  margin: 20px 0px 40px;
}
.forums-table-section-title .link-rss,
.customer-info-page .form-fields.add-more-external-records a,
.customer-info-page .extrnal-table a {
  color: var(--red);
}
.customer-info-page .form-fields.add-more-external-records a:hover,
.customer-info-page .extrnal-table a:hover {
  color: var(--grey-black);
}
.prices-alignment-right {
  text-align: right !important;
}
.form-title-rquired {
  float: left;
}
.contact-page .btn.btn-primary,
.vendor-page .contact-vendor .btn.btn-primary,
.vendor-contact-page .btn.btn-primary,
.compare-products-page .btn.btn-default,
.compare-products-page .btn.btn-primary,
.apply-vendor-page .btn.btn-primary,
.blogpost-page .blog-post-add-comment-button,
.news-item-page .btn.btn-primary,
.private-message-view-page .btn.btn-default,
.private-messages-page .btn.btn-primary,
.private-messages-page .btn.btn-default,
.private-message-send-page .btn.btn-default,
.private-message-send-page .btn.btn-primary,
.move-topic-page .btn.btn-default,
.move-topic-page .btn.btn-primary,
.forum-edit-page .btn.btn-primary,
.forum-edit-page .btn.btn-default,
.order-details-page .btn.btn-default,
.order-details-page .btn.btn-primary,
.return-request-page .btn.btn-primary,
.account-page .btn.btn-primary,
.account-page .btn.btn-default {
  text-transform: uppercase;
}
.gdpr-tools-page .result {
  margin: 20px 0;
  font-size: 13px;
  color: #e4434b;
}
.gdpr-tools-page .buttons {
  margin-top: 20px;
}
.gdpr-tools-page .page-body form .fieldset {
  margin-bottom: 20px;
  padding: 10px;
  margin-bottom: 30px;
  border: 1px solid #ededed;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  min-height: 220px;
}
.gdpr-tools-page .page-body form .fieldset .title {
  text-align: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
.gdpr-tools-page .page-body form .fieldset .buttons {
  text-align: center;
}
.check-gift-card-balance-page .result,
.check-gift-card-balance-page .message-error {
  margin: 20px 0;
}
.check-gift-card-balance-page .fieldset {
  margin: 0 0 30px;
}

/* ORDER DETAIL PAGE STYLE */
.order-details-page .links .controls {
  display: inline-block;
}
.order-details-page .links .controls i {
  margin-right: 5px;
}
.order-details-page .cart-total-left {
  font-weight: 700;
  height: 21px;
  text-align: left;
  vertical-align: middle;
}
.order-details-page .cart-total-right {
  padding-left: 5px;
  text-align: left;
  vertical-align: middle;
}
.order-details-page .links {
  text-align: center;
  margin: 15px 0px 25px;
}
.actions {
  margin-top: 10px;
}
.order-details-page .billing-info,
.order-details-page .shipping-info {
  list-style: none;
}
.order-info-wrap .title,
.billing-info-wrap .title,
.shipment-details-page .shipment-overview li,
.order-details-page .shipping-information li,
.order-details-page .payment-infomation li {
  margin-bottom: 5px;
  color: #666;
  font-size: 13px;
}
.shipment-details-page .section .title,
.order-details-page .products .title,
.order-details-page .shipments .title {
  margin-bottom: 20px;
}
.checkout-attributes.shipping-text,
.order-details-page .order-number h4 {
  font-weight: bold;
}
.shipment-details-page .shipment-overview,
.order-details-page .order-details-area {
  margin-bottom: 20px;
}
.order-details-page .section table th,
.order-details-page .data-table th {
  text-align: center;
}
.order-info-wrap .title,
.billing-info-wrap .title,
.shipment-details-page .shipment-overview li.title,
.order-details-page li.title {
  color: #000;
  font-size: 15px;
}
.shipment-details-page .title > strong,
.order-details-page .title > strong,
.checkout-attributes.shipping-text {
  font-size: 16px;
}
.order-details-page .total-info {
  margin-top: 20px;
}
.shipment-details-page .panel-heading h1,
.return-request-page .panel-heading h1,
.order-details-page .panel-heading h1,
.order-overview {
  text-align: center;
}
.order-details-page .tax-shipping-info {
  padding: 10px;
}
.checkout-attributes.shipping-text,
.section.products .actions {
  float: right;
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
.order-details-page .section.shipments a {
  color: var(--red);
}
.order-details-page .section.shipments .a-left {
  text-align: center !important;
}
.order-details-page .section.shipments a {
  color: var(--red);
  text-align: center;
}
.order-details-page .section.shipments a:hover {
  color: var(--grey-black);
}
.order-details-page .section.shipments .a-center.details {
  text-align: center;
}
.wishlist-page .section .panel.panel-default,
.reward-points-page .panel.panel-default,
.sitemap-page .entity,
.compare-products-page .panel.panel-default,
.news-list-page .item,
.private-message-view-page .view-message,
.private-messages-page .panel.panel-default,
.forum-topic-page .topic-posts,
.forum-topic-content-top,
.forum-subscriptions-page .panel.panel-default,
.forum-page .forum-top,
.forums-table-section,
.reward-points-page.panel.panel-default,
.back-in-stock-subscription-list-page .panel.panel-default,
.downloadable-products-page .panel.panel-default,
.return-request-page .section .panel.panel-default,
.shipment-details-page .section .panel.panel-default,
.order-details-page .section .panel.panel-default {
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
  border-color: #ededed;
  font-size: 14px;
}
.wishlist-page .section .panel.panel-default table tbody tr td,
.wishlist-page .panel.panel-default > table,
.reward-points-page .panel.panel-default table,
.reward-points-page .panel.panel-default table thead tr th,
.reward-points-page .panel.panel-default table tbody tr td,
.compare-products-page .panel.panel-default table,
.compare-products-page .panel.panel-default tbody tr td,
.private-messages-page .panel.panel-default table tbody tr td,
.private-messages-page .panel.panel-default table thead tr th,
.private-messages-page .panel.panel-default table,
.forum-subscriptions-page .subscription-list table thead tr th,
.forum-subscriptions-page .subscription-list table tbody tr td,
.forum-subscriptions-page .subscription-list table,
.forums-table-section table thead tr th,
.forums-table-section table tbody tr td,
.forums-table-section table,
.reward-points-page.panel.panel-default table thead tr th,
.reward-points-page.panel.panel-default table tbody tr td,
.reward-points-page.panel.panel-default table,
.back-in-stock-subscription-list-page .panel.panel-default table thead tr th,
.back-in-stock-subscription-list-page .panel.panel-default table tbody tr td,
.back-in-stock-subscription-list-page .panel.panel-default table,
.shipment-details-page .section .panel.panel-default table,
.shipment-details-page .section .panel.panel-default table tbody tr td,
.shipment-details-page .section .panel.panel-default table thead tr th,
.order-details-page .section .panel.panel-default table,
.order-details-page .section .panel.panel-default table tbody tr td,
.order-details-page .section .panel.panel-default table thead tr th {
  border: none;
  padding: 10px;
  vertical-align: middle;
  text-align: center !important;
}
.reward-points-page .panel.panel-default table tbody tr,
.compare-products-page .panel.panel-default table tbody tr,
.private-messages-page .panel.panel-default table tbody tr,
.forum-subscriptions-page .subscription-list table tbody tr,
.forums-table-section table tbody tr,
.reward-points-page.panel.panel-default table tbody tr,
.back-in-stock-subscription-list-page .panel.panel-default table tbody tr,
.shipment-details-page .section .panel.panel-default table tbody tr,
.order-details-page .section .panel.panel-default table tbody tr {
  border-top: 1px solid #ddd;
}
.order-details-page .section .panel.panel-default table .a-center.name {
  text-align: left;
}
.shipment-details-page .section .panel.panel-default table .a-left.name em,
.order-details-page .section .panel.panel-default table .a-left.name em {
  font-style: normal;
}
.order-details-page .section .panel.panel-default table .a-left.name {
  width: 50%;
  text-align: left !important;
  font-weight: 700;
}

/* RETUN REQUEST AND RETURN REQUEST LIST PAGE STYLE */
.return-request-page .page-title {
  text-align: center;
}
.return-request-page .page-title h1 a {
  color: var(--red);
}
.return-request-page select {
  width: 100%;
  text-align: left;
}
.request-item ul {
  list-style: none;
  margin-bottom: 0;
}
.return-request-page .section .table,
.return-request-page .section .title,
.return-request-page .fieldset .title {
  margin-bottom: 20px;
  text-align: left;
}
.return-request-page .section {
  margin-bottom: 20px;
}
.downloadable-products-page table th {
  padding: 10px 0 20px 0;
  text-align: center;
}
.return-request-page textarea.form-control {
  height: 100px;
}
.return-request-page .fieldset label {
  text-align: left;
}
.downloadable-products-page .panel.panel-default table thead tr th,
.downloadable-products-page .panel.panel-default table tbody tr td,
.downloadable-products-page .panel.panel-default table,
.return-request-page .panel.panel-default table,
.return-request-page .panel.panel-default table tbody tr td,
.return-request-page .panel.panel-default table thead tr th {
  border: none;
  padding: 10px;
  vertical-align: middle;
}
.downloadable-products-page .panel.panel-default table tbody tr,
.return-request-page .panel.panel-default table tbody tr {
  border-top: 1px solid #ddd;
}
.downloadable-products-page .panel.panel-default table,
.return-request-page .panel.panel-default table {
  margin-bottom: 0px;
}
.order-details-page
  .section.products
  .panel.panel-default
  table
  tbody
  tr
  .prices-alignment-right,
.return-request-page
  .panel.panel-default
  table
  tbody
  tr
  .prices-alignment-right {
  text-align: center !important;
}
.return-request-list-page .section {
  margin-bottom: 30px;
  border: 1px solid #ededed;
  box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  -moz-box-shadow: 0px 0px 10px #ddd;
}
.return-request-list-page .section .details {
  padding: 0 10px 15px;
}
.return-request-list-page .section .comments > div {
  height: 80px;
  overflow: hidden;
}

/* DOWNLOAD PRODUCT PAGE STYLE */
.downloadable-products-page .panel.panel-default table .a-center.product {
  text-align: left;
}
.reward-points-page .panel.panel-default table tbody tr td,
.downloadable-products-page .panel.panel-default table tbody tr td {
  color: #666;
  font-size: 14px;
}
.avatar-page .validation-summary-errors ul li {
  background: #f2dede;
  color: #a94442;
  font-size: 14px;
  margin-top: 5px;
  padding: 5px;
  margin-bottom: 10px;
}
.downloadable-products-page .panel.panel-default table a {
  color: var(--red);
}
.downloadable-products-page .panel.panel-default table a:hover {
  color: var(--grey-black);
}

/* FORUM MAIN AND COMMON PAGE STYLE */
.forums-main-page .forums-main-header {
  height: 50px;
  margin-bottom: 10px;
}
.forums-main-page .forums-main-header .current-time,
.active-discussions-page .forums-header .current-time,
.current-time {
  text-align: right;
  margin-bottom: 15px;
  color: #666;
}
.forum-search-box {
  text-align: right;
  margin-bottom: 20px;
}
.forums-table-section {
  margin-bottom: 40px;
  float: left;
  width: 100%;
}
.forums-table-section-title {
  padding: 15px;
  background: #f9f9f9;
  border-bottom: 1px solid #ddd;
  float: left;
  width: 100%;
}
.forums-table-section-title a {
  font-weight: 700;
}
.forums-table-section-title .link-rss {
  margin: 0 0 0 10px;
  float: right;
}
.forums-table-section-title .view-all {
  float: right;
  text-align: right;
}
.forums-table-section .topic-name {
  text-align: left;
}
.forums-table-section th.last-post {
  width: 25%;
  text-align: center;
}
.forums-table-section th.forum-name,
.forums-main-page .forums-table-section td.forum-name,
.forums-main-page .forums-table-section td.topic-name {
  text-align: left;
  width: 55%;
}
.forums-table-section td {
  text-align: center;
}
.forums-table-section td.forum-name .forum-title a:hover,
.forum-search-box .advanced a:hover,
.forums-main-page .active-discussions .view-all a:hover {
  color: var(--grey-black);
}
.forum-group-page .forums-table-section td,
.forum-search-page .forums-table-section td,
.active-discussions-page .forums-table-section td,
.forum-page .forums-table-section td,
.forums-main-page .forums-table-section td {
  color: #666;
}
.forums-table-section td.forum-name .forum-title a {
  display: block;
  font-weight: 700;
  margin-bottom: 3px;
  display: inline-block;
}
.forums-table-section td.forum-name .forum-title a,
.forum-search-box .advanced a,
.forums-main-page .active-discussions .view-all a {
  color: var(--red);
}
.forums-table-section td.last-post .author label,
.forums-table-section .last-post .origin label {
  display: inline;
}
.forums-table-section td.topic-name .topic-type {
  font-size: 0.9em;
  line-height: 18px;
}
.forum-group-page .posts,
.forum-group-page .topics,
.forum-page .replies,
.forum-page .views,
.active-discussions-page .forums-table-section-body .replies,
.active-discussions-page .forums-table-section-body .views,
.active-discussions-page .forums-table-section-body .last-post,
.forum-search-page .forums-table-section.topics-group .replies,
.forum-search-page .forums-table-section.topics-group .views,
.forum-search-page .forums-table-section.topics-group .last-post,
.forums-main-page .forums-table-section.topics-group .replies,
.forums-main-page .forums-table-section.topics-group .views,
.forums-main-page .forums-table-section.topics-group .last-post {
  text-align: center;
}
.forums-main-page .forums-table-section th.topics,
.forums-main-page .forums-table-section th.replies,
.forums-main-page .forums-table-section th.views,
.forums-main-page .forums-table-section th.posts {
  width: 10%;
  text-align: center;
}
.forums-main-page .forums-header {
  float: left;
  width: 100%;
}
.forums-main-page .topic-html-content .panel-heading {
  padding: 0px;
  margin-bottom: 10px;
}
.forums-main-page .topic-html-content {
  border: none;
  text-align: center;
}
.forums-main-page .active-discussions .view-all a {
  padding: 15px;
  float: left;
}
.forum-search-box {
  float: left;
  position: relative;
}
.forum-search-box .navbar-form {
  padding-left: 0px;
}
.search-box-text {
  float: left;
  height: 34px;
  padding: 0px 12px;
  margin-right: -3px;
  border: none;
  box-shadow: none;
}
.forum-search-box .search-box-text {
  background: #fff;
  border-bottom: 1px solid #ddd;
  width: 400px;
  padding-left: 5px;
}
.forum-search-box .search-nav:focus {
  border-color: var(--red);
}
.forum-search-box .btn.search-box-button {
  font-size: 0;
  background: url("../Themes/SimplexTheme/Content/images/search-icon.png") no-repeat 0px 0px;
  border-radius: 0px;
  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;
  z-index: 1;
  padding: 0px;
}
.forum-search-box .btn.search-box-button:hover {
  background: url("../Themes/SimplexTheme/Content/images/search-icon.png") no-repeat 0px -34px;
}
.forum-search-box .form-control,
.forum-search-box .btn {
  border-radius: 0;
}
.forum-search-box .advanced {
  margin-top: 15px;
  float: left;
  width: 100%;
}
.forums-table-section .panel.panel-default {
  border: none;
  margin-bottom: 0px;
}
.forum-page .forum-top {
  padding: 15px;
  margin-bottom: 40px;
}
.forum-page .forums-table-section table tr .image {
  width: 3%;
}
.forums-table-section .topic-name a {
  font-weight: 700;
}
.forum-subscriptions-page .new-product-iteam a {
  color: var(--grey-black);
  font-weight: 700;
}
.forum-subscriptions-page .new-product-iteam a:hover {
  color: var(--red);
}
.private-message-send-page .page-title h1,
.move-topic-page .page-title h1,
.forum-edit-page h1,
.forum-search-page .panel-heading h1,
.forums-main-page .topic-html-content .panel-heading h1 {
  text-align: center;
}
.active-discussions-page .active-discussions .topic-details .topic-title a {
  color: var(--grey-black);
}
.active-discussions-page
  .active-discussions
  .topic-details
  .topic-title
  a:hover {
  color: var(--red);
}
.active-discussions-page .active-discussions .topic-details .topic-starter a {
  color: var(--red);
}
.active-discussions-page
  .active-discussions
  .topic-details
  .topic-starter
  a:hover {
  color: var(--grey-black);
}

/* FORUM PAGE STYLE */
.forum-page .forum-top:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}
.forum-page .forum-top .forum-info {
  float: left;
}
.forum-page .forum-top .forum-info .forum-name {
  font-weight: 700;
  font-size: 1.2em;
  line-height: 25px;
}
.forum-page .forum-top .forum-info .forum-description {
  margin-bottom: 10px;
}
.forum-page .forum-top .actions {
  float: right;
  text-align: right;
  margin-top: 0px;
}
.forum-page .forum-top .actions .newtopic {
  padding: 0 5px 3px 3px;
}
.forum-page .forum-top .actions .watch-forum {
  padding-left: 5px;
}
.forum-page .pager ul {
  float: left;
  margin: 5px 0;
}
.forum-group-page,
.forum-breadcrumb,
.active-discussions-page,
.forum-page {
  clear: both;
}
.forum-page .forums-table-section {
  border: 0;
  padding: 0;
}
.forum-group-page .forums-table-section .forum-name {
  text-align: left;
}
.forum-group-page .forums-table-section {
  background: #fff;
}
.forum-page .forum-top .forum-info .forum-name h1 {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 25px;
  margin-top: 0;
  display: inline-block;
  padding-right: 10px;
}
.topics-group .author a,
.forum-page .watch-forum:hover i {
  color: var(--grey-black);
}
.topics-group .author a:hover {
  color: var(--red);
}
.forum-page .actions i,
.forum-topic-content-top .actions i,
.forum-topic-page .topic-post .post-head .manage-post i,
.forum-topic-page .topic-actions.lower i {
  cursor: pointer;
  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;
}
.new-topic {
  font-family: var(--font-default);
}

/* FORUM SEARCH PAGE STYLE */
.basic-search .controls {
  padding-top: 3px;
}
.forum-search-page .forum-search-panel .search-error {
  color: red;
}
.forum-search-page .basic-search {
  margin-bottom: 10px;
}
.forum-search-page .forum-search-button {
  margin-top: 0px;
}
.forum-search-page .advanced-search {
  margin-bottom: 10px;
  padding-top: 10px;
}
.forum-search-page .inputs {
  padding: 4px;
}
.forum-search-page .inputs label {
  display: inline-block;
  width: 140px;
}
.forum-search-page .pager ul {
  float: left;
  margin: 5px 0;
}
.forum-search-page .form-group label {
  text-align: left;
}
.search-input .basic-search .col-md-3 {
  padding-right: 0;
}
.forum-search-box .form-group {
  margin-bottom: 0px;
}
.forum-search-page .search-results .forums-table-section {
  border: none;
}
.forum-search-page .search-results .forums-table-section table {
  width: 100%;
}
.forum-search-page .forums-table-section {
  padding: 0;
}
.forum-search-page .checkbox > input {
  margin-top: 0 !important;
}
.forum-search-page .checkbox label {
  padding-left: 10px;
}
.forum-search-page .forum-serach-input {
  float: left;
  width: 100%;
}
.forum-search-page .forum-serach-input .checkbox {
  clear: both;
  float: left;
  width: 100%;
  text-align: left;
  margin-top: 20px;
}

/* FORUM TOPIC PAGE STYLE */
.forums-header::after {
  clear: both;
  content: "";
  display: block;
}
.forums-header {
  margin-bottom: 25px;
}
.forum-topic-content-top {
  text-align: center;
  padding: 15px;
  margin-bottom: 40px;
  float: left;
  width: 100%;
}
.forum-topic-content-top h2 {
  text-transform: capitalize;
  font-size: 22px;
  margin: 0px 0px 15px 0px;
}
.forum-topic-content-top .actions .actions-btn {
  padding: 8px;
  display: inline-block;
  line-height: 14px;
  color: #888;
}
.forum-topic-page .topic-actions.lower i:hover,
.forum-topic-page .topic-actions.lower i:hover a,
.forum-topic-content-top .actions .actions-btn:hover i,
.forum-topic-content-top .actions .actions-btn:hover a,
.forum-topic-page .topic-post .post-head .manage-post i:hover,
.forum-topic-page .topic-post .post-head .manage-post i:hover a {
  color: var(--red);
}
.forum-topic-page .topic-actions.lower a,
.forum-topic-content-top .actions .actions-btn a {
  margin-left: 5px;
  color: #888;
  font-size: 13px;
  font-weight: 700;
}
.forum-topic-page .topic-posts {
  padding: 50px;
  float: left;
  width: 100%;
  color: #888;
  margin-bottom: 30px;
}
.forum-topic-page .topic-post {
  float: left;
  width: 100%;
  padding: 20px;
}
.topic-post .post-info {
  float: left;
  margin: 0;
  width: 15%;
}
.topic-post .post-info {
  text-align: left;
}
.topic-post .post-content {
  float: right;
  width: 85%;
}
.forum-topic-page .topic-post .post-info {
  text-align: center;
}
.forum-topic-page .topic-post .post-info .user-info a {
  color: var(--grey-black);
}
.forum-topic-page .topic-post .post-info .user-info a:hover {
  color: var(--red);
}
.forum-topic-page .topic-post .user-info a {
  background: #f5f5f5;
  padding: 15px;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  color: #666;
}
.forum-topic-page .topic-post .user-info .avatar {
  text-align: center;
  clear: both;
  margin-bottom: 15px;
}
.profile-page .profile-info-box .user-details .send-pm-box {
  text-align: center;
}
.forum-topic-page .topic-post .post-info .send-pm a,
.profile-page .profile-info-box .user-details .send-pm-box a {
  background: var(--grey-black);
  padding: 8px;
  color: #fff;
  float: left;
  width: 100%;
  margin-top: 5px;
}
.forum-topic-page .topic-post .post-info .send-pm a:hover,
.profile-page .profile-info-box .user-details .send-pm-box a:hover {
  background: var(--red);
  color: #fff;
}
.forum-topic-page .topic-post .post-head {
  background: #f5f5f5;
  padding: 15px;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  color: #666;
}
.forum-topic-page .topic-post .post-body {
  clear: both;
  padding: 0px 15px;
  line-height: 22px;
  letter-spacing: 0.5px;
  word-break: break-word;
}
.forum-topic-page .topic-post .post-head .post-time label {
  margin-bottom: 0px;
}
.forum-topic-page .topic-post .post-head .quote-post,
.forum-topic-page .topic-post .post-head .manage-post,
.forum-topic-page .topic-post .post-head .post-time {
  float: left;
}
.forum-topic-page .topic-post .post-head .post-actions {
  float: right;
}
.forum-topic-page .topic-post .post-head .manage-post i,
.forum-topic-page .topic-actions.lower i {
  color: #888;
}
.forum-topic-page .topic-post .post-head .manage-post a {
  color: #888;
  font-size: 13px;
  font-weight: 700;
  margin-left: 5px;
  margin-right: 20px;
}
.forum-topic-page .topic-post .post-head .quote-post a {
  color: var(--red);
  font-weight: 700;
  margin-right: 15px;
}
.forum-topic-page .topic-post .post-head .quote-post a:hover {
  color: var(--grey-black);
}
.forum-topic-page .topic-actions.lower {
  clear: both;
  text-align: center;
}
.forum-topic-page .topic-actions.lower a {
  margin-right: 15px;
}

/* FORUM TOPIC EDIT, FORUM POST EDIT, MOVE FORUM TOPIC PAGE STYLE */
.forum-edit-page .forum-subject-title {
  padding-top: 0px;
}
.forum-edit-page .forum-subject-name {
  color: #666;
}
.forum-edit-page .inputs {
  padding: 5px 0;
}
.forum-edit-page .field-validation-error {
  display: block;
}
.forum-edit-page .buttons {
  margin: 5px;
}
.forum-edit-page .form-group label {
  text-transform: capitalize;
}
.forum-edit-page label.options-checkbox,
.forum-edit-page label.checkbox {
  text-align: left;
}
.forum-edit-page .page-title,
.forum-edit-page fieldset legend {
  text-align: center;
  font-size: 18px;
}
.forum-edit-page .form-group.form-submit {
  clear: both;
}
.forum-edit-page .form-group {
  overflow: hidden;
}
.forum-edit-page .checkbox {
  color: #666;
}
.private-messages-page .delete-selected-pm-button,
.private-message-send-page .send-pm-button,
.forum-edit-page .submit-post-button,
.move-topic-page .submit-forum-topic-button,
.forum-edit-page .submit-topic-button,
.forum-edit-page .checkbox .check-box {
  margin-right: 5px;
}
.move-topic-page .inputs label {
  color: #555;
  font-weight: 700;
  white-space: nowrap;
  width: 30%;
}
.forum-edit-page .checkbox {
  margin-top: 0px;
}

/* FORUM INPUTS STYLE */
.forum-topic-title-text,
.pm-title-text {
  vertical-align: top;
  font-size: 12px;
}
.forum-post-text,
.bb-editor-text {
  min-height: 150px;
}
.private-message-subject-text {
  width: 500px;
  border: 1px solid #acacac;
  vertical-align: top;
  font-size: 12px;
}
.forum-search-text {
  border: 1px solid #ccc;
  font-size: 14px;
  margin-right: 5px;
  float: left;
}
.forum-search-box-text {
  border: 1px solid #acacac;
  font-size: 12px;
}
.bb-editor-text {
  border: #cec6b5 1px solid;
}
.quote-post-link-button,
.post-link {
  float: right;
  padding: 0 !important;
}
.post-link {
  padding: 1px 3px;
  margin-right: 5px;
  border: none;
  margin-top: 1px;
}

/* PRIVATE MESSAGES PAGE STYLE */
.private-message-send-page .inputs label {
  float: left;
  line-height: 20px;
}
.private-message-send-page .toolbar {
  display: block;
}
.private-message-send-page textarea {
  margin: 0 0 10px 0px;
}
.private-message-view-page .view-message div {
  margin: 10px 0px 5px;
}
.private-message-view-page .view-message label {
  display: inline-block;
  font-weight: 700;
}
.private-message-send-page .page-title,
fieldset legend {
  text-align: center;
}
.private-message-send-page .form-group label {
  margin-bottom: 5px;
  padding-top: 5px;
}
.send-pm-button {
  margin-left: 15px;
}
.private-messages-page .pagination {
  display: block;
}
.private-message-send-page .form-group .private-message-title {
  padding-top: 0px;
}
.private-message-username {
  color: #666;
  font-weight: 700;
}
.private-message-username:hover {
  color: var(--red);
}
.private-messages-page .tab-content {
  float: left;
  margin-top: 0;
  padding: 20px 15px;
  width: 100%;
  border: 1px solid #ddd;
}
.private-messages-page .nav-tabs {
  border: none;
  padding: 0;
}
.private-messages-page .nav-tabs li a {
  font-weight: normal;
  color: #666;
  font-size: 16px;
  text-transform: capitalize;
}
.private-messages-page .nav-tabs li.active {
  margin-bottom: 0px;
}
.private-messages-page .nav-tabs li.active a {
  color: #fff;
  background: var(--red);
  font-weight: 700;
  border-color: var(--red);
}
.private-messages-page .nav-tabs li.active a:hover,
.private-messages-page .nav-tabs > li.active > a:focus {
  background: var(--red);
}
.private-messages-page .nav-tabs li.active a::after {
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: var(--red);
  border: 10px solid transparent;
  border-top-color: var(--red);
  top: 100%;
  left: 50%;
  margin-left: -10px;
}
.private-messages-page .nav-tabs > li > a {
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 0px;
}
.private-messages-page .nav > .label.label-default > a:hover,
.private-messages-page .nav > .label.label-default > a:focus {
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}
.private-messages-page .nav-tabs > li > a:focus,
.private-messages-page .nav-tabs > li > a:hover {
  background-color: var(--grey-black);
  color: #fff;
  outline: none;
}
.private-messages-page {
  overflow: hidden;
  float: left;
  width: 100%;
}
.private-message-view-page .view-message span,
.private-messages-page .panel.panel-default td {
  color: #666;
}
.private-messages-page .panel.panel-default a {
  color: var(--red);
}
.private-messages-page .panel.panel-default a:hover {
  color: var(--grey-black);
}
.private-message-view-page .view-message {
  padding: 15px;
}
.private-message-view-page .view-message label {
  text-transform: capitalize;
}
.private-message-view-page .view-message .btn.btn-default {
  margin-right: 5px;
  margin-bottom: 5px;
}

/* PROFILE PAGE STYLE */
.profile-page .profile-info-box .profile-stats {
  margin-left: 200px;
  padding: 10px;
}
.profile-page .profile-info-box .profile-stats .title {
  margin-bottom: 10px;
  text-transform: uppercase;
}
.profile-page .profile-info-box .profile-stats ul {
  margin: 0 0 10px 0;
}
.profile-page .profile-info-box .profile-stats li {
  list-style: none outside none;
}
.profile-page .profile-info-box .user-details {
  width: 180px;
  float: left;
  padding: 10px;
  height: 100%;
  border-right: solid 1px #ddd;
}
.profile-page .profile-info-box .user-details .avatar {
  margin-bottom: 5px;
  text-align: center;
}
.profile-page .profile-info-box .user-details .avatar img {
  max-width: 100%;
}
.profile-page .profile-info-box .user-stats {
  margin: 0;
  padding: 0;
}
.profile-page .profile-info-box .user-stats li {
  font-weight: 700;
  list-style: none;
  padding: 2px;
}
.profile-page .profile-info-box .user-stats span {
  color: #555;
  font-weight: 400;
}
.profile-page .user-last-posts .topic {
  margin-bottom: 20px;
}
.profile-page .user-last-posts .topic-title a {
  color: var(--red);
}
.profile-page .user-last-posts .topic-title a:hover {
  color: var(--grey-black);
}
.profile-page .user-last-posts .topic-title {
  font-weight: 700;
  line-height: 20px;
  padding: 0 0 5px 10px;
}
.profile-page .user-last-posts .topic-title label {
  display: inline;
}
.profile-page .user-last-posts .topic-body {
  padding: 0 10px 5px 10px;
}
.profile-page .user-last-posts .topic-body p {
  margin: 0;
}
.profile-page .user-last-posts .topic-body a {
  color: #b80709;
  text-decoration: underline;
}
.profile-page .user-last-posts .topic-body .quote {
  padding: 5px;
}
.profile-page .user-last-posts .topic-data {
  padding-left: 10px;
  color: #555;
  font-size: 0.9em;
}
.profile-page .user-last-posts .topic-data label {
  display: inline;
}
.profile-page .profile-info-box .profile-stats label,
.profile-page .profile-info-box .user-stats label {
  font-weight: 700;
  display: inline;
}
.profile-page .profile-stats > ul {
  padding-left: 10px;
}
.profile-page .tab-content {
  float: left;
  margin-top: 0;
  padding: 20px 15px;
  width: 100%;
  border: 1px solid #ddd;
}
.profile-page .nav-tabs {
  border: none;
  padding: 0;
}
.profile-page .nav-tabs li a {
  font-weight: normal;
  color: #666;
  font-size: 16px;
  text-transform: capitalize;
}
.profile-page .nav-tabs li.active {
  margin-bottom: 0px;
}
.profile-page .nav-tabs li.active a {
  color: #fff;
  background: var(--red);
  font-weight: 700;
  border-color: var(--red);
}
.profile-page .nav-tabs li.active a:hover,
.profile-page .nav-tabs > li.active > a:focus {
  background: var(--red);
}
.profile-page .nav-tabs li.active a::after {
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: var(--red);
  border: 10px solid transparent;
  border-top-color: var(--red);
  top: 100%;
  left: 50%;
  margin-left: -10px;
}
.profile-page .nav-tabs > li > a {
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 15px 35px;
}
.profile-page .nav > .label.label-default > a:hover,
.profile-page .nav > .label.label-default > a:focus {
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}
.profile-page .nav-tabs > li > a:focus,
.profile-page .nav-tabs > li > a:hover {
  background-color: var(--grey-black);
  color: #fff;
  outline: none;
}
.profile-page {
  overflow: hidden;
  float: left;
  width: 100%;
}

/* NEWS BLOCK PAGE STYLE */
.news-list-page .item {
  margin-bottom: 20px;
}
.news-list-page .news-detail-box {
  padding: 15px;
  color: #666;
  clear: both;
}
.news-list-page .news-head {
  text-align: center;
  border-bottom: 1px solid #ddd;
  float: left;
  width: 100%;
}
.news-list-page .news-items .news-head a {
  margin-bottom: 0px;
  float: left;
  width: 100%;
  padding: 10px 0px;
  color: var(--grey-black);
  font-weight: 700;
  font-size: 16px;
}
.news-list-homepage .news-head a:hover,
.news-list-page .news-items .news-head a:hover {
  color: var(--red);
}
.news-list-page .news-items .news-details {
  margin-bottom: 15px;
}
.news-list-page .news-date {
  margin: 0px 0px 10px 0px;
}
.news-item-page .news-body {
  clear: both;
  margin-top: 15px;
  float: left;
  width: 100%;
  color: #666;
}
.news-item-page .news-date {
  color: var(--red);
}
.news-item-page .fieldset.new-comment .title {
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  padding-bottom: 5px;
  font-size: 16px;
  clear: both;
  text-align: left;
}
.blogpost-page .user-info .username,
.news-item-page .user-info .username {
  float: left;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: #f6f6f6;
  color: var(--grey-black);
}
.blogpost-page .user-info .username:hover,
.news-item-page .user-info .username:hover {
  color: var(--red);
}
.news-item-page .comment-list .title,
.blogpost-page .comment-list .title {
  clear: both;
  float: left;
  font-size: 18px;
  margin-bottom: 10px;
  margin-top: 20px;
  width: 100%;
}
.news-item-page .user-info,
.blogpost-page .user-info {
  border: none;
  color: #444;
  display: block;
  font-weight: bold;
  margin: 0 0 -1px;
  padding: 0px 0px 10px 0px;
  text-align: center;
  font-size: 14px;
}
.news-item-page .comment-time label {
  display: inline;
}
.news-item-page .comment-content .comment-time,
.blog-comment .comment-content .comment-time {
  background-color: #f6f6f6;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  min-height: 40px;
  padding: 10px 15px;
}
.comment-list .news-comment {
  border-top: 1px solid #ddd;
  margin-bottom: 0px;
  padding-bottom: 0px;
  float: left;
  width: 100%;
}
.news-item-page .new-comment .buttons {
  padding-left: 10px;
}
.news-comment .comment-info,
.comment-content,
.blogpost-page .comment-info {
  padding: 0px;
}
.comment-list .comment-content {
  border-left: 1px solid #ddd;
  display: table-cell;
  text-align: left;
  vertical-align: top;
}
.comment-list .comment-title {
  margin: 0 0 -20px;
  padding: 20px;
  color: #666;
  font-size: 16px;
}
.comment-list .comment-body {
  padding: 20px;
  line-height: 22px;
  color: #666;
}

/* BLOG PAGE STYLE */
.block.block-blog-archive.well.box-shadow-wrapper .listbox ul li strong {
  padding: 8px 0 8px 25px;
  font-weight: 700;
  color: #000;
}
.block.block-blog-archive.well.box-shadow-wrapper .listbox .nav.nav-list li a {
  padding: 8px 0 8px 40px;
  background: rgba(0, 0, 0, 0) url("../Themes/SimplexTheme/Content/images/dot-icon.png") no-repeat scroll
    25px center;
}
.block-blog-archive .listbox ul li strong {
  padding-left: 20px;
  margin-top: 10px;
  float: left;
  clear: both;
}
.blog-posts .post .post-head,
.blogpost-page .comment-list .title {
  float: left;
  width: 100%;
}
.blog-posts .post .post-body {
  float: left;
  width: 100%;
  border: 0px solid #eee;
  padding: 0px 0px 0px 0px;
  color: #666;
  line-height: 22px;
}
.blog-posts .post {
  float: left;
  width: 100%;
}
.blog-posts .post-head a {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 15px 20px;
  float: left;
  width: 100%;
  background: var(--grey-black);
  color: #fff;
  text-transform: uppercase;
}
.blogpost-page .tags label,
.blog-posts .post .tags-list label {
  float: left;
  margin-right: 15px;
  text-transform: uppercase;
  color: #000;
}
.blog-posts .post .tags-list ul,
.blogpost-page .tags ul {
  float: none;
  overflow: hidden;
  padding-left: 0px;
}
.blog-posts .post .tags-list li,
.blogpost-page .tags li {
  float: left;
  list-style: none;
  margin-right: 5px;
  line-height: 18px;
}
.blog-posts .post .tags-list,
.blogpost-page .tags {
  margin: 15px 0px;
}
.blog-posts .post .tags-list .separator,
.blogpost-page .tags .separator {
  color: var(--red);
}
.blog-posts .post .blog-details {
  float: left;
  width: 100%;
  font-size: 16px;
}

/* Responsive images in blog list pages (4 columns) - MAINTAIN ORIGINAL ASPECT RATIOS */
.html-blog-page .blog-posts .post .blog-details img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 10px auto 0px auto;
  object-fit: contain;
}

/* Responsive video embeds in blog posts - maintain aspect ratio */
.blogpost-page .post-body iframe,
.html-blog-page .blog-posts .post .blog-details iframe,
.blog-list-homepage .blog-details iframe {
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 10px auto 0px auto;
}

/* Blog list pages - smaller but clear videos */
.html-blog-page .blog-posts .post .blog-details iframe {
  min-height: 180px;
  max-height: 220px;
}

/* Homepage blog - appropriate sizing */
.blog-list-homepage .blog-details iframe {
  min-height: 200px;
  max-height: 250px;
}

/* Blog detail pages - larger videos for better viewing */
.blogpost-page .post-body iframe {
  min-height: 400px;
}

.blogpost-page .post-date {
  margin-bottom: 10px;
  text-align: left;
  padding: 0;
}
.blogpost-page .post-body {
  color: #666;
  line-height: 22px;
}
.blogpost-page .comment-text {
  max-width: 100%;
  min-height: 120px;
}
.blogpost-page .comment-list {
  margin: 0 0 10px 0;
}
.blogpost-page .avatar {
  width: 100%;
}
.blogpost-page .comment-time label {
  display: inline;
}
.blogpost-page .blog-comment {
  border-top: 1px solid #ddd;
  float: left;
  margin-bottom: 0;
  padding-bottom: 0;
  width: 100%;
}
.blogpost-page .fieldset.new-comment .title {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 16px;
}
.blogpost-page .form-group .category-iteam,
.blog-comment .comment-info {
  text-align: left;
}
.blog-comment .comment-info,
.news-item-page .comment-info {
  border-right: 1px solid #ddd;
  margin-right: -1px;
}
.blog-posts .tags-list ul li a,
.blogpost-page .tags ul li a {
  font-size: 16px;
  padding: 0px;
  font-weight: normal;
  color: var(--red);
}
.blog-posts .tags-list ul li a:hover,
.blogpost-page .tags ul li a:hover {
  text-decoration: underline;
  color: var(--grey-black);
}
.blog-posts .btn.btn-primary.read-more {
  text-transform: uppercase;
  color: #fff;
}
.blog-details .comments-text {
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
}
.post-date {
  float: right;
  color: var(--red);
  width: 100%;
  padding: 10px 0px;
  text-align: right;
}
.blogpost-page .new-comment .form-group label {
  text-align: left;
}
.blogpost-page .avatar img,
.news-item-page .avatar img {
  max-width: 100%;
}
.blog-page .bottom-box-shadow {
  float: left;
  width: 100%;
  margin-bottom: 30px;
}
.bottom-box-shadow {
  background: url("../Themes/SimplexTheme/Content/images/bottom-box-shadow.png") no-repeat scroll left
    bottom;
  height: 20px;
  background-size: 100%;
}

/* CONTACT US PAGE STYLE */
.account-activation-page .page-body {
  margin: 0;
  padding: 0;
  color: #555;
  background-color: inherit;
}
.contact-page .topic-html-content {
  border: none;
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
}
.contact-page .contact-details {
  margin-bottom: 15px;
}
.contact-page .inputs {
  margin-bottom: 12px;
}
.contact-page .enquiry {
  max-width: 100%;
  min-height: 120px;
  margin: 0;
}
.email-a-friend-page .validation-summary-errors ul li,
.private-message-send-page .validation-summary-errors ul li,
.customer-info-page .validation-summary-errors ul li,
.avatar-page .validation-summary-errors ul li,
.address-edit-page .validation-summary-errors ul li,
.apply-vendor-page .validation-summary-errors ul li,
.vendor-contact-page .validation-summary-errors ul li,
.community-poll .validation-summary-errors ul li,
.change-password-page .validation-summary-errors ul li,
.contact-page .validation-summary-errors ul li,
.product-reviews-page .validation-summary-errors ul li,
.blogpost-page .validation-summary-errors ul li,
.news-item-page .validation-summary-errors ul li,
.search-page .validation-summary-errors ul li,
.registration-page .validation-summary-errors ul li {
  background: #f2dede;
  margin-bottom: 10px;
  padding: 5px 10px;
  color: #b94a48;
  clear: both;
}
.contact-page p {
  margin-bottom: 0px;
}
.contact-page .form-horizontal .control-label {
  text-align: left;
}
.apply-vendor-page .topic-html-content-body,
.contact-page .topic-html-content-body {
  padding: 0;
  margin-bottom: 20px;
}

/* COLOR SQUARES ATTRIBUTE TYPE STYLE */
.product-details-page .date-picker-wrapper > select,
.product-details-page .date-picker-wrapper > select {
  border: 1px solid #ccc;
  padding: 5px 10px;
  width: auto;
}
.product-details-page .attributes dd {
  margin: 0;
}
.product-details-page .attributes ul.color-squares li,
.product-details-page .attributes ul.image-squares li {
  display: inline;
  margin-right: 10px;
  position: relative;
}
.product-details-page .attributes ul.color-squares .attribute-square-container,
.product-details-page .attributes ul.image-squares .attribute-square-container {
  position: relative;
  display: inline-block;
  padding: 2px;
  line-height: 1em;
}
.product-details-page
  .attributes
  ul.color-squares
  .selected-value
  .attribute-square-container,
.product-details-page
  .attributes
  ul.image-squares
  .selected-value
  .attribute-square-container {
  border-color: #bbb;
  border-width: 2px;
}
/* Product details page - color and image swatches (70px image size with contain fit)
   Container: 76px (image-squares), 70px (color-squares)
   Image: 70px with background-size: contain to prevent border overlap
   Backend generates 70px thumbnails via MediaSettings.ImageSquarePictureSize */
.product-details-page .attributes ul.color-squares .attribute-square,
.product-details-page .attributes ul.image-squares .attribute-square {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: cover !important;
}
.product-details-page .attributes ul.color-squares label,
.product-details-page .attributes ul.image-squares label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}
/* A11y(WCAG 2.1.1 Keyboard): 시각적으로만 숨기고 포커스는 유지한다.
   이전에는 display:none 이었고, 그 결과 라디오가 탭 순서에서 완전히 제외되어
   키보드 사용자가 색상을 하나도 선택할 수 없었다(라벨은 포커스 대상이 아니다).
   display:none / visibility:hidden 은 포커스 자체를 막으므로 여기서는 쓰지 않는다.
   이 규칙은 Simple·Grouped 두 상품 템플릿에 모두 적용된다
   (product-details-minimal.css 는 Simple 템플릿에서만 로드된다). */
.product-details-page .attributes ul.color-squares input,
.product-details-page .attributes ul.image-squares input {
  display: block;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  z-index: -10000;
  position: absolute;
  float: none;
}
/* 포커스 링. 라디오는 투명·1px 이므로 링을 스와치 타일에 그린다.
   마크업이 <label><span class="attribute-square-container"/><input/></label> 로
   input 이 label 의 자식이라 인접 형제 결합자(input + label)로는 매치되지 않는다 — :has() 를 쓴다. */
.product-details-page
  .attributes
  ul.color-squares
  label:has(input[type="radio"]:focus-visible)
  .attribute-square-container,
.product-details-page
  .attributes
  ul.image-squares
  label:has(input[type="radio"]:focus-visible)
  .attribute-square-container {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}
.product-filters .color-squares,
.product-filters .image-squares {
  font-size: 0;
}
.product-filters .color-squares .attribute-square-container,
.product-filters .image-squares .attribute-square-container {
  display: inline-block;
  padding: 1px;
  position: relative;
  z-index: 0;
}
.product-filters .color-squares .attribute-square,
.product-filters .image-squares .attribute-square {
  border: 1px solid #444 !important;
  cursor: pointer;
  display: table !important;
  height: 32px !important;
  width: 32px !important;
}
.product-filters .product-spec-color li.color-item {
  display: inline-block;
}
.product-filters .product-spec-color li.color-item a {
  padding: 0px;
  width: 100%;
}
/* Color and image squares - specific styling for swatch attributes (70px display size)
   Used in product filters and attribute selection contexts */
.color-squares .attribute-square,
.image-squares .attribute-square {
  border: 2px solid #ddd;
  cursor: pointer;
  display: table !important;
  height: 70px !important;
  width: 70px !important;
}
.tooltip-container {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  border-radius: 5px;
  color: #000;
  position: absolute;
  text-align: center;
  visibility: hidden;
  width: 200px;
  left: 0px;
  top: 0px;
}
.tooltip-container::after {
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  bottom: 100%;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -6px;
  position: absolute;
  width: 0;
}
.tooltip-container::before {
  border-bottom: 7px solid #eee;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: 100%;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}
.color-squares li:hover .tooltip-container,
.image-squares li:hover .tooltip-container {
  margin-left: 0;
  margin-top: 80px;
  visibility: visible;
  z-index: 999;
}
.tooltip-container .tooltip-header {
  background-color: #f6f6f6;
  border-bottom: 1px solid #eee;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 15px;
  height: 30px;
  padding-left: 10px;
  padding-top: 5px;
  text-align: left;
  width: 198px;
}
.tooltip-container .tooltip-body {
  margin: 5px;
}
.tooltip-container .tooltip-body img {
  border: 0 none #fff;
  width: 190px;
}
.product-details-page
  .attributes
  ul.color-squares
  .selected-value
  .attribute-square-container
  .attribute-square,
.product-details-page
  .attributes
  ul.image-squares
  .selected-value
  .attribute-square-container
  .attribute-square {
  border-color: var(--red);
}
.attributes ul.color-squares .selected-value .attribute-square-container,
.attributes ul.image-squares .selected-value .attribute-square-container {
  border-color: var(--grey-black);
  border-width: 1px;
}

/* SLIM BOX (PRODUCT IMAGES) */
#lbOverlay {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  cursor: pointer;
}
#lbCenter,
#lbBottomContainer {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  background-color: #fff;
}
.lbLoading {
  background: #fff url(../Themes/SimplexTheme/Content/images/loading.gif) no-repeat center;
}
#lbImage {
  position: absolute;
  left: 0;
  top: 0;
  border: 10px solid #fff;
  background-repeat: no-repeat;
}
#lbPrevLink,
#lbNextLink {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  outline: none;
}
#lbPrevLink {
  left: 0;
}
#lbPrevLink:hover {
  background: transparent url(../Themes/SimplexTheme/Content/images/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
  right: 0;
}
#lbNextLink:hover {
  background: transparent url(../Themes/SimplexTheme/Content/images/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
  font-size: 10px;
  color: #666;
  line-height: 1.4em;
  text-align: left;
  border: 10px solid #fff;
  border-top-style: none;
}
#lbCloseLink {
  display: block;
  float: right;
  width: 66px;
  height: 22px;
  background: transparent url(../Themes/SimplexTheme/Content/images/closelabel.gif) no-repeat center;
  margin: 5px 0;
  outline: none;
}
#lbCaption,
#lbNumber {
  margin-right: 71px;
}
#lbCaption {
  font-weight: 700;
}

/* BB CODE EDITOR */
.toolbar {
  padding: 2px;
  display: block;
  margin-bottom: 10px;
}
.toolbar .button {
  background: url(../Themes/SimplexTheme/Content/images/bbeditor-button-bg.gif) repeat-x;
  padding: 2px;
  margin-right: 2px;
  border: #cec6b5 1px solid;
}
.toolbar .button:hover {
  border: var(--grey-black) 1px solid;
}

/* BBCODES */

.csharpcode {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.csharpcode,
.csharpcode pre {
  font-size: small;
  color: #000;
  font-family: Consolas, "Courier New", Courier, Monospace;
  background-color: #fff;
}
.csharpcode pre {
  margin: 0;
}
.csharpcode .rem {
  color: green;
}
.csharpcode .kwrd {
  color: #00f;
}
.csharpcode .str {
  color: #006080;
}
.csharpcode .op {
  color: #0000c0;
}
.csharpcode .preproc {
  color: #c63;
}
.csharpcode .asp {
  background-color: #ff0;
}
.csharpcode .html {
  color: maroon;
}
.csharpcode .attr {
  color: red;
}
.csharpcode .alt {
  background-color: #f4f4f4;
  width: 100%;
  margin: 0;
}
.csharpcode .lnum {
  color: #606060;
}

/* NEW STYLE */
.pm-title-text.form-control {
  width: 44%;
}

/* Back To Top Arrow */
#backTop {
  width: 35px;
  height: 35px;
  padding: 10px;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 999999999;
  display: none;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  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: url(../Themes/SimplexTheme/Content/images/top-arrow.png) no-repeat center center var(--red);
}
#backTop:hover {
  background: url(../Themes/SimplexTheme/Content/images/top-arrow.png) no-repeat center center
    var(--grey-black);
}

/* Bootstrap Hacks & Fixes*/
/*  Legend not having bottom-margin on Webkit Browsers - Safari and Opera
    https://github.com/twbs/bootstrap/issues/9187
    */
legend + *:before {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  margin-bottom: 20px;
}
.eq-ie7 legend {
  margin-bottom: 20px;
}
textarea:hover,
input:hover,
select:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
select:focus,
button:focus,
button:active,
button:hover {
  outline: 0px !important;
}

/* IE8 And IE9 STYLE */
.navbar-search .search-query {
  line-height: 20px;
}
.eq-ie8 .item-box .thumbnail .wishlist-compare-wrapper {
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 999;
  opacity: 0;
  top: calc(80% + 0px);
  transition: all 200ms ease-in-out 0s;
  -webkit-transition: all 200ms ease-in-out 0s;
  -moz-transition: all 200ms ease-in-out 0s;
  -o-transition: all 200ms ease-in-out 0s;
  visibility: hidden;
}
.eq-ie8 .item-box .thumbnail:hover .picture .wishlist-compare-wrapper {
  top: 40%;
  opacity: 1;
  visibility: visible;
}
.eq-ie8
  .header-menu
  .navbar.navbar-inverse
  .nav.navbar-nav
  > li.dropdown
  .dropdown-menu {
  border: 1px solid #ddd;
}
.eq-ie8 .product-list .item-box .product-item .rating {
  margin-left: 0px;
}
.eq-ie8 .product-details-page .product-share-button a span {
  height: 30px !important;
  width: 30px !important;
}
.eq-ie8 .product-details-page .product-share-button a span .at-icon {
  height: 30px !important;
  width: 25px !important;
}
.eq-ie8 .sitemap-page .entity,
.eq-ie8 .news-list-page .item,
.eq-ie8 .order-summary-content .checkout-attributes,
.eq-ie8 .private-message-view-page .view-message,
.eq-ie8 .private-messages-page .panel-default.panel,
.eq-ie8 .compare-products-page .panel-default.panel,
.eq-ie8 .reward-points-page .panel-default.panel,
.eq-ie8 .forum-topic-page .topic-posts,
.eq-ie8 .forum-topic-content-top,
.eq-ie8 .forum-search-page .search-results .forums-table-section,
.eq-ie8 .forum-subscriptions-page .panel-default.panel,
.eq-ie8 .back-in-stock-subscription-list-page .panel-default.panel,
.eq-ie8 .downloadable-products-page .panel-default.panel,
.eq-ie8 .return-request-list-page .section,
.eq-ie8 .return-request-page .section .panel-default.panel,
.eq-ie8 .shipment-details-page .section .panel-default.panel,
.eq-ie8 .order-list-page .order-item,
.eq-ie8 .address-list .address-item,
.eq-ie8 .checkout-as-guest-or-register-block,
.eq-ie8 .returning-wrapper,
.eq-ie8 .register-block.new-wrapper,
.eq-ie8 .forums-table-section,
.eq-ie8 .order-details-page .section .panel-default.panel,
.eq-ie8 .checkout-data .section .address-box,
.eq-ie8 .shipment-details-page .order-info-wrap .info-content,
.eq-ie8 .shipment-details-page .order-info-wrap .info-content,
.eq-ie8 .order-details-page .billing-info-wrap .info-content,
.eq-ie8 .order-details-page .order-info-wrap .info-content,
.eq-ie8 .order-details-page .payment-method-wrap .side-list-wrap,
.eq-ie8 .order-details-page .order-info-wrap .side-list-wrap,
.eq-ie8 .order-details-page .total-info .panel.panel-default,
.eq-ie8 .order-summary-content .cart-footer .total-info .panel.panel-default {
  border: 1px solid #ddd;
}
.eq-ie8 .footer {
  border-top: 1px solid #ededed;
}
.eq-ie8 .login-page FIELDSET LEGEND {
  margin-bottom: 0px;
}
.eq-ie8 .forum-edit-page .form-group LABEL {
  padding-top: 0px;
}
.lt-ie9 .registration-page h3 {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #e5e5e5;
  border-image: none;
  border-width: 0 0 1px;
  display: block;
  line-height: inherit;
  margin-bottom: 20px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.lt-ie9 .payment-info .info td label {
  float: none;
  margin: 0;
  padding-bottom: 10px;
  width: 130px;
}
.lt-ie9 .entity-body.category-body.product-link li {
  float: left;
  margin-right: 26px;
  width: 46%;
  margin-bottom: 8px;
}
.lt-ie9 .main-menu.goToTop {
  border-bottom: 1px solid #4b5461;
}
.eq-ie11 .header-selectors-wrapper SELECT {
  padding-right: 0px !important;
}
.lt-ie10 select {
  background: #fff !important;
  border: 1px solid #ddd;
}
.lt-ie10 .footer-upper .column ul li a:hover,
.lt-ie10 .footer-upper .column ul li a:focus {
  margin-left: 0px;
}

/* ==========================================================================
   FOOTER BRANDING REMOVAL - Method 2 (CSS Hiding)
   ========================================================================== */

/* Hide "Powered by nopCommerce" section */
.footer-powered-by,
.poweredby {
  display: none !important;
}

/* Hide "Theme by" section (Store Theme Selector) */
.store-theme-selector,
.footer-store-theme .store-theme-selector {
  display: none !important;
}

/* Hide "Designed by" section */
.designedby,
.designedby.pull-right,
.footer-designedby {
  display: none !important;
}

/* Hide add-info section in OCarousel grid */
.add-info {
  display: none !important;
}

/* Optional: Hide entire theme selector wrapper if needed */
.theme-selector {
  display: none !important;
}

/* Clean up spacing after hiding elements */
.footer-lower .footer-store-theme {
  text-align: center;
}

.footer-lower .container .row .col-xs-12.col-sm-4.col-md-4:last-child {
  /* Adjust layout if theme selector column is now empty */
}
.lt-ie9 .header-selectors-wrapper select {
  padding: 5px 0px 5px 5px !important;
}

/* IE9 and IE10 STYLE */
.lt-ie11 .login-page .checkbox input[type="checkbox"] {
  margin-left: 15px;
  min-height: 15px;
  margin-top: 3px;
}
.lt-ie11 .login-page .remember-me .checkbox {
  padding-left: 0px;
  padding-top: 0px;
  margin-left: 0px;
}
.lt-ie11 .remember-me .checkbox > label > .checkbox {
  margin-top: 3px;
}
.lt-ie11 .review-rating .rating-text .rb {
  margin-top: 6px;
}
.lt-ie11 .img-responsive,
.lt-ie11 .thumbnail > img,
.lt-ie11 .thumbnail a > img,
.lt-ie11 .carousel-inner > .item > img,
.lt-ie11 .carousel-inner > .item > a > img {
  width: auto;
}
.lt-ie11 .order-summary-content .terms-of-service > INPUT {
  margin-top: 5px;
}
.lt-ie11 .forum-search-box .search-box-text,
.eq-ie11 .forum-search-box .search-box-text {
  width: 100%;
}
.lt-ie11 .forum-search-page .forum-search-box .search-box-text,
.eq-ie11 .forum-search-page .forum-search-box .search-box-text {
  width: 400px;
}
.lt-ie11 .login-page .checkbox .remember-text {
  padding-left: 35px;
}
.lt-ie11 .customer-info-page .date-picker-wrapper > SELECT,
.eq-ie11 .customer-info-page .date-picker-wrapper > SELECT,
.lt-ie11 .registration-page .date-picker-wrapper > SELECT,
.eq-ie11 .registration-page .date-picker-wrapper > SELECT {
  float: left;
}
.lt-ie11 .customer-info-page .date-picker-wrapper .field-validation-error,
.eq-ie11 .customer-info-page .date-picker-wrapper .field-validation-error,
.lt-ie11 .registration-page .date-picker-wrapper .field-validation-error,
.eq-ie11 .registration-page .date-picker-wrapper .field-validation-error {
  margin-left: 10px;
}
.ie.ie11 .registration-page .radio-inline input[type="radio"],
.lt-ie11 .registration-page .radio-inline input[type="radio"] {
  margin-top: 5px;
}

/* OPERA STYLE */
doesnotexist:-o-prefocus,
.forum-search-box .btn.search-box-button {
  padding: 15px 19px;
}
doesnotexist:-o-prefocus,
.forum-search-box .basic .form-group {
  margin-bottom: 0;
}
doesnotexist:-o-prefocus,
.btn {
  height: 34px;
}
doesnotexist:-o-prefocus,
.new-wrapper.register-block legend,
doesnotexist:-o-prefocus,
.returning-wrapper legend {
  margin-bottom: 20px;
  float: left;
}

/* SAFARI STYLE */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .forum-page .pagination {
    margin: 0;
  }
  .checkout-as-guest-or-register-block legend,
  .new-wrapper.register-block legend,
  .returning-wrapper legend,
  .facebook-login-block legend {
    margin-bottom: 20px;
    float: left;
  }

  /* Safari 5+ ONLY */
  ::i-block-chrome,
  .product-selectors select {
    margin-top: 5px;
  }
}
/*CSS for nopCommerce 4.0*/
.ui-state-hover.ui-datepicker-prev-hover {
  background: none !important;
  border: none !important;
  top: 2px !important;
  left: 2px !important;
  cursor: pointer;
}
.ui-state-hover.ui-datepicker-next-hover {
  background: none !important;
  border: none !important;
  top: 2px !important;
  right: 2px !important;
  cursor: pointer;
}
.read {
  cursor: pointer;
  text-decoration: underline;
}
.checkout-page .terms-of-service {
  display: flex;
}
.terms-of-service > label,
.use-reward-points .checkbox label {
  display: inline-block;
}
.use-reward-points .checkbox label {
  padding: 0;
}
.use-reward-points .checkbox {
  display: flex;
  align-items: start;
}
.terms-of-service > input,
.use-reward-points .checkbox input {
  display: inline-block;
  vertical-align: top;
}
.estimate-shipping .estimate-shipping-result {
  color: #a94442;
  clear: both;
  margin: 0 15px 20px;
  text-align: center;
}
.products-breadcrumb-link {
  display: none;
}

.eu-cookie-bar-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 320px;
  height: auto;
  margin: -90px 0 0 -160px;
  border: 1px solid #ccc;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  padding: 20px;
  text-align: center;
}
.eu-cookie-bar-notification a {
  display: block;
  color: var(--red);
  margin-top: 10px;
}
.news-item-page p.comment-text {
  word-break: break-word;
}
.product-filters .filter-content ul {
  vertical-align: top;
}
.product-filter .product-spec-group {
  display: inline-block;
  margin: 0 25px 10px 0;
}
.product-filters .product-spec-group {
  max-width: 190px;
  display: inline-block;
  margin: 0 25px 10px 0;
}
.product-filters .group li {
  font-size: 15px;
}
.product-filters .group li.item {
  display: block;
  margin-bottom: 10px;
}
.product-filters .group li a,
.product-filters .group li strong {
  display: inline-block;
  padding: 5px 0;
}
.product-filters .group li.color-item a {
  padding: 0;
}
.attribute-squares {
  font-size: 0;
}
.attribute-squares-padding {
  padding: 0 5px 0 0;
}
.attribute-squares .attribute-square-container {
  display: block;
  position: relative;
  z-index: 0;
  padding: 1px;
}
/* General attribute squares fallback - applies to all attribute-squares contexts (70px display size)
   Legacy rule from nopCommerce 4.0 - thinner border (1px) for general attribute displays */
.attribute-squares .attribute-square {
  display: table !important;
  width: 70px !important;
  height: 70px !important;
  border: 1px solid #ddd !important;
  cursor: pointer;
}
/*CSS for nopCommerce 4.0*/

.cart .remove-from-cart input[type="checkbox"] {
  display: none;
}

.cart .remove-from-cart .remove-btn {
  width: 11px;
  height: 11px;
  border: 0;
  background: url("../Themes/SimplexTheme/Content/images/remove.png") center no-repeat;
}
.newsletter-email:focus-within {
  overflow: visible;
}
.product-filter .group {
  font-size: 15px;
}

.product-filter .group + .group {
  margin-top: 16px;
}

.product-filter .group .name {
  padding-bottom: 10px;
}

.product-filter .group .item {
  display: flex;
  padding-left: 15px;
  align-items: center;
}

.product-filter .group .item + .item {
  padding-top: 8px;
}

.product-filter .group .item label {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 8px;
  flex-grow: 1;
}

.price-range-filter .selected-price-range {
  padding: 5px 0;
}

.price-range-filter .selected-price-range .to {
  float: right;
}

.price-range-filter .selected-price-range.manually {
  display: flex;
}

.price-range-filter .selected-price-range.manually .from {
  margin-right: 8px;
}

.price-range-filter .selected-price-range.manually .from,
.price-range-filter .selected-price-range.manually .to {
  width: 50%;
}

.product-filter .attribute-squares {
  font-size: inherit;
}

.product-filters .color-squares .attribute-square {
  width: 20px !important;
  height: 20px !important;
  margin-right: 10px;
  float: left;
}

.item-box .picture a:focus {
  opacity: 0.85;
}
.products-container {
  position: relative;
}
.products-container .ajax-products-busy {
  display: none;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #ffffffab url(../Themes/SimplexTheme/Content/images/loading.gif) center no-repeat;
}
.product-specs-box td.spec-group-name {
  border: 0;
  padding-top: 20px;
  font-size: 16px;
  color: #444;
}
.attributes .option-list:not(.attribute-squares) .disabled {
  opacity: 0.5;
}
.attributes .attribute-squares .disabled .attribute-square {
  cursor: default;
  opacity: 1;
}

/* Sold-out swatch: grey-out only, no diagonal X mark */
.attributes .attribute-squares .disabled .attribute-square-container {
  /* pink X gradient removed — opacity on .attribute-square is sufficient */
}

.attributes .attribute-squares .tooltip-container .not-available-text {
  font-size: 12px;
}

.attributes
  .attribute-squares.color-squares
  .tooltip-container
  .not-available-text {
  margin: 5px;
}
.attributes .attribute-squares.color-squares .tooltip-container {
  width: 120px;
  display: none;
}
.attributes .attribute-squares.color-squares li:hover .tooltip-container {
  margin-left: 0;
  margin-top: 80px;
  visibility: visible;
  z-index: 999;
}

.attributes .attribute-squares.color-squares .disabled .tooltip-container {
  display: block;
}

.attributes
  .attribute-squares.image-squares
  .tooltip-container
  .not-available-text {
  margin-bottom: 5px;
  display: none;
}
.attributes
  .attribute-squares.image-squares
  .disabled
  .tooltip-container
  .not-available-text {
  display: block;
}

.attributes select option.disabled,
.attributes select option:disabled {
  color: #cecece;
}
.compare-products-table .specification-group td {
  border: 0;
  padding: 20px 10px 10px 10px;
}

.compare-products-table .specification-group td label {
  font-size: 16px;
  color: #444;
}
.top-menu > li > a:focus {
  position: relative;
  z-index: 1;
}

/*4.40 css*/
.filter-content .ui-slider-handle:focus {
  outline: none;
}
.price-range-filter .selected-price-range {
  margin-left: 0px;
}
.product-filters .item label {
  font-weight: 400;
}
.nav.nav-list.group.product-spec-group {
  padding: 0px;
  margin: 0px;
  display: block;
}
.product-manufacturer-filter .item,
.product-filters .filter-content ul,
.product-filter .group .item,
.product-filter .group .item label {
  padding-left: 0px;
}
.product-filter .group .item label {
  display: inline-block;
  font-size: 14px;
  color: var(--grey-black);
  font-weight: 400;
}
.product-filters .filter-content .item.color-item {
  display: flex;
  align-items: center;
  position: relative;
}
.product-filters .filter-content .item.color-item input {
  margin: 0px;
  border: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.sidebar input[type="checkbox"] {
  margin: 0px 10px 0px 0px;
}
.product-filters .filter-content .product-spec-color label {
  cursor: pointer;
  font-size: 14px;
}
.sidebar label {
  margin: 0px;
}
.provider-verification .inputs {
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: 15px;
}
.provider-verification .inputs label {
  margin-bottom: 0;
  text-align: right;
  width: 16.66666667%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}
.provider-verification .inputs .username {
  display: inline-block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  margin: 0px 15px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  width: 25%;
}
.provider-verification .inputs .field-validation-error {
  width: 100%;
  display: block;
  margin: 5px 0px;
  float: left;
}
.provider-verification .form-group .buttons {
  margin-left: 16.666667%;
  width: 16.666667%;
  float: left;
  padding: 0px 15px;
}
.provider-verification .form-group .buttons .save-customer-info-button {
  background-color: var(--red);
  border: none;
  color: #fff;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 700;
  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;
  padding: 10px 15px;
  display: inline-block;
  text-transform: uppercase;
}
.provider-verification .form-group .buttons .save-customer-info-button:hover,
.provider-verification .form-group .buttons .save-customer-info-button:focus {
  background-color: var(--grey-black);
  opacity: 1 !important;
}
.multi-factor-authentication-page,
.multi-factor-authentication-config-page {
  color: #666;
}
.multi-factor-authentication-page .description p:first-child {
  color: var(--grey-black);
}
.multi-factor-authentication-page .description ol {
  padding: 0px;
}
.multi-factor-authentication-page .fieldset .title strong {
  color: var(--grey-black);
}
.fieldset .warnings {
  text-align: center;
  margin-block-end: 30px;
  color: #e4444c;
}
.inputs .form-input-wrapper {
  display: inline-block;
  max-width: 100%;
}
.multi-factor-authentication-page .buttons {
  margin: 10px 0px;
  text-align: center;
}
.google-authenticator-conteiner .inputs input {
  height: 34px;
  margin-left: 15px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
}
.google-authenticator-conteiner .buttons {
  margin-top: 20px;
}
.google-authenticator-conteiner .field-validation-error {
  width: 100%;
  display: block;
  text-align: center;
  margin: 5px 0px;
}
#flyout-cart .shopping-cart-link:focus {
  outline: none;
}
.btn.active,
.btn:active {
  box-shadow: none;
}

/* ========================================
   PRODUCT VIDEO GALLERY - ENHANCED
   One video per line, preview-friendly
   ======================================== */

/* Container Setup */
.video-gallery {
  width: 100%;
  max-width: 400px;
  margin: 12px auto;
}

.video-gallery .video-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Video Thumbnail - Full Width, One Per Line */
.video-gallery .video-thumbs .thumb-item {
  display: block !important;
  position: relative;
  width: 100% !important;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background: #000;
  transition: all 0.3s ease;
}

/* Hover Effect - Lift on hover */
.video-gallery .video-thumbs .thumb-item:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Video iframe - Responsive with Aspect Ratio */
.video-gallery .video-thumbs iframe {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  min-height: 167px;
  max-width: 100%;
  margin: 0;
  border: none;
  border-radius: 6px;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .video-gallery {
    max-width: 100%;
  }

  .video-gallery .video-thumbs iframe {
    min-height: 147px;
  }

  .video-gallery .video-thumbs {
    gap: 10px;
  }
}

/* Mobile (481px - 767px) */
@media (max-width: 767.98px) {
  .video-gallery .video-thumbs iframe {
    min-height: 133px;
  }

  .video-gallery .video-thumbs {
    gap: 12px;
  }

  .video-gallery {
    margin: 15px 0;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  .video-gallery .video-thumbs iframe {
    min-height: 120px;
    border-radius: 6px;
  }

  .video-gallery .video-thumbs .thumb-item {
    border-radius: 6px;
  }

  .video-gallery .video-thumbs {
    gap: 10px;
  }
}

/* Accessibility - Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .video-gallery .video-thumbs .thumb-item {
    transition: none !important;
  }

  .video-gallery .video-thumbs .thumb-item:hover {
    transform: none !important;
  }
}

.vat-number-warning {
  text-align: center;
  font-size: 13px;
  color: #e4434b;
  margin-top: 5px;
}
.vat-number-warning a {
  text-decoration: underline;
}
.product-filter .filter-title {
  background: #f6f6f6;
}
.item-box .description:not([data-short-description]) {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 0 15px;
  line-height: 22px;
}
.item-box .description[data-short-description] {
  display: none;
}
.html-home-page .header .container,
.html-home-page .footer .container {
  width: 95% !important;
  max-width: 95% !important;
}
.home-page .news-list-homepage .view-all {
  margin-top: 10px;
}
.news-list-homepage .news-items-wrapper {
  margin-bottom: 10px;
  display: inline-block;
}
.product-details-page .variant-picture {
  position: relative;
  margin: 0 auto 15px;
  overflow: hidden;
  float: left;
  width: 220px;
  height: 220px;
}
.variant-overview {
  display: inline-block;
}
.product-details-page .variant-picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.product-item .swiper-pagination-bullet-active {
  padding: 4px;
  background-color: var(--red);
}
.header-logo img {
  max-width: 140px;
}
.product-category-item .picture .title {
  margin: auto;
  position: absolute;
  text-align: center;
  width: 215px;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}
.vendor-page .vendor-description {
  margin-bottom: 10px;
}
.qq-uploader-selector .qq-upload-button-focus {
  outline: 1px solid transparent;
}
textarea.form-control:focus,
.change-password-page .form-control:focus {
  border-color: var(--grey-black, #333) !important;
}
.product-details-page .picture-gallery .picture {
  position: relative;
}
.product-details-page .picture-gallery .picture::before {
  content: "";
  display: block;
}
.product-details-page .picture-gallery .picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateZ(0) scale(1, 1);
}
.attribute-squares .image-squares-container .attribute-square {
  background-color: #fff !important;
}
.product-details-page .attributes ul.option-list li:not(:last-child) {
  margin-right: 0px;
}
/* Desktop: Equal-width buttons displayed horizontally */
.overview-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.overview-buttons > div {
  flex: 1;
  margin: 0 0 10px 0;
  min-width: 200px;
}
.product-details-page .product-variant-list .product-variant-line {
  display: block;
  padding: 0 15px;
}
.shipping-title {
  margin-top: 5px;
}
.product-reviews-page .name-description label {
  margin-bottom: 0;
  display: inline-block;
  line-height: 24px;
}
.form-horizontal .control-label {
  padding-top: 0;
  text-align: inherit;
}
.order-list-page .return-items-button {
  display: inline-block;
  margin-right: 2px;
}
.order-details-page .links .controls:not(:last-child) {
  margin-right: 10px;
}
.order-details-page .order-overview {
  margin-bottom: 25px;
}
.return-request-page .title strong,
.reward-points-page .title strong {
  font-size: 16px;
}
.forum-search {
  padding: 0;
}
.private-messages-box .buttons button,
.checkout-page #billing-buttons-container > button {
  margin-bottom: 5px;
}
.private-messages-box .buttons button:not(:last-child),
.checkout-page #billing-buttons-container > button:not(:last-child) {
  margin-right: 5px;
}
.my-product-reviews-list-page .pager {
  display: inline-block;
  width: 100%;
}
.vendorinfo-page label + .vendor-picture {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
}
.vendorinfo-page .remove-picture-button {
  margin-right: 5px;
}
.order-summary-content .checkout-attributes label {
  float: left;
}
.checkout-page {
  margin-right: 0;
}
.checkout-page .pickup-in-store {
  margin-bottom: 10px;
}
.section.payment-method .use-reward-points input[type="checkbox"],
.checkout-billingadress-btns > button,
.next-btn-wrapper .billings-address-btns > button:not(:last-child),
.avatar-page .buttons > button:not(:last-child),
.next-btn-wrapper .shippings-address-btns > button:not(:last-child) {
  margin-right: 5px;
}
.checkout-page #shipping-buttons-container > button,
.checkout-page #shipping-buttons-container .back-link {
  margin: 0 5px 5px 0;
}
.address-item .address-list-page {
  display: flex;
  width: 100%;
  justify-content: center;
}
.address-item .address-list-page > button:not(:last-child) {
  margin-right: 10px;
}
.next-btn-wrapper {
  margin: 0 0 10px 0;
}
.next-btn-wrapper .billings-address-btns > button,
.next-btn-wrapper .shippings-address-btns > button {
  margin-bottom: 5px;
}
.checkout-page .order-review-data {
  margin-bottom: 40px;
}
/* Moved to consolidated compare-products styling above */
.apply-vendor-page .uploads-files {
  width: 100%;
}
.home-category-slider.owl-carousel,
.home-features-slider.owl-carousel,
.home-bestseller-slider.owl-carousel,
.home-news-slider.owl-carousel,
.sub-category-slider.owl-carousel,
.manufacturer-slider.owl-carousel,
.also-purchased-products-slider.owl-carousel,
.related-products-slider.owl-carousel,
.crosssell-products-slider.owl-carousel {
  width: calc(100% - 30px);
  margin: 0 auto;
}
.home-category-slider .owl-item > .item-box,
.home-features-slider .owl-item > .item-box,
.home-bestseller-slider .owl-item > .item-box,
.home-news-slider .owl-item > .home-news-slider-wrapper,
.sub-category-slider .owl-item > .item-box,
.manufacturer-slider .owl-item > .item-box,
.also-purchased-products-slider .owl-item > .item-box,
.related-products-slider .owl-item > .item-box,
.crosssell-products-slider .owl-item > .item-box {
  padding: 0;
}
.news-list-homepage .news-date {
  padding: 0 10px;
}
.product-details-page .product-variant-wrapper {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  overflow: hidden;
}
.order-details-page .billing-info li,
.order-details-page .shipping-info li {
  margin-bottom: 5px;
  color: #666;
  font-size: 14px;
}
.order-details-area .title {
  margin-bottom: 10px;
}
.shipping-info-wrap .shipping-info .title {
  margin-bottom: 5px;
}
.payment-details .payment-description {
  word-break: break-word;
}
/* Order Details - Payment Method Info - Consistent Label Alignment */
.order-details-page .payment-method-info .info-list li,
.order-details-page .payment-method-info .info-list li.custom-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  text-align: left;
}
.order-details-page .payment-method-info .info-list li .label,
.order-details-page .payment-method-info .info-list li.custom-value .label {
  min-width: 160px;
  flex-shrink: 0;
  text-align: left;
}
.order-details-page .payment-method-info .info-list li .value,
.order-details-page .payment-method-info .info-list li.custom-value .value {
  text-align: left;
  flex: 1;
  word-break: break-all;
}

/* ========================================
   ORDER DETAILS - COMPACT INFO BOXES
   ======================================== */

/* Remove excessive height from info boxes */
.order-details-page .billing-info,
.order-details-page .shipping-info,
.order-details-page .payment-method-info,
.order-details-page .shipping-method-info {
  min-height: auto !important;
  padding: 10px 15px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fafafa;
}

/* Compact list items */
.order-details-page .billing-info li,
.order-details-page .shipping-info li,
.order-details-page .payment-method-info li,
.order-details-page .shipping-method-info li {
  margin-bottom: 3px;
  line-height: 1.4;
}

/* Compact title spacing */
.order-details-page .order-details-area .title {
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e5e5;
}

/* Row spacing */
.order-details-page .order-details-area .row {
  margin-bottom: 15px;
}

/* Consistent column alignment */
.order-details-page .order-details-area .billing-info-wrap,
.order-details-page .order-details-area .shipping-info-wrap,
.order-details-page .order-details-area .payment-method-wrap {
  margin-bottom: 10px;
}

.color-item .form-check {
  position: relative;
}
.color-item input[type="checkbox"]:checked + label::before {
  content: "";
  display: block;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  left: 0;
  top: 0;
  border-radius: 2px;
  border: 1px solid rgb(150 150 150 / 30%);
}
.color-item input[type="checkbox"]:checked + label::after {
  content: url("../Themes/SimplexTheme/Content/img/checkmark.png");
  display: block;
  position: absolute;
  left: 4px;
  top: 0;
}
.checkout-page .vat-numbers {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.checkout-page .vat-numbers:focus {
  border-color: var(--red);
}
.next-btn-wrapper .billings-address-btns,
.next-btn-wrapper .shippings-address-btns,
.next-btn-wrapper .shippings-methods,
.next-btn-wrapper .payments-methods {
  padding: 0;
}
.checkout-page .ship-to-same-address {
  margin-bottom: 5px;
}
.recently-added-products-page .page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.recently-added-products-page .page-title h1 {
  margin: 0;
}
.recently-added-products-page .link-rss:hover {
  color: var(--grey-black);
}
.recently-added-products-page .link-rss i {
  margin-right: 5px;
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-pagination-bullet-active {
  padding: 5px;
  background-color: #4ab2f1;
}
.shopping-cart-page .product-quantity {
  width: 80px;
  margin: 0 auto;
}
.shopping-cart-page .product-quantity .qty-input {
  width: 60px;
  float: left;
  margin: 0;
  height: 40px;
  font-size: 16px; /* ENHANCED: Consistent font size for better readability */
}
.shopping-cart-page .product-quantity span {
  border: 1px solid #ddd;
  cursor: pointer;
  float: left;
  font-size: 10px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 20px;
  color: #999;
}
a.skip {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}
a.skip:active,
a.skip:focus,
a.skip:hover {
  position: initial;
  top: 0;
  left: 0;
  display: block;
  height: auto;
  margin: 3px 0;
  overflow: visible;
  padding: 2px;
  color: #444444;
  background: #ffffff;
  text-decoration: underline;
  text-align: center;
  width: 100%;
  font-size: 16px;
}
.login-page .login-password {
  position: relative;
  max-width: 100%;
}
.login-page .password-eye {
  content: "";
  display: block;
  height: 24px;
  width: 24px;
  background-image: url("../Themes/SimplexTheme/Content/images/eye-closed.png");
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.75;
}
.login-page .password-eye-open {
  background-image: url("../Themes/SimplexTheme/Content/images/eye.png");
}
/* the eye is a <button> (keyboard reachable, aria-pressed): drop the browser's button chrome */
.login-page button.password-eye {
  padding: 0;
  border: 0;
  background-color: transparent;
}
.change-password-recovery-link {
  text-align: right;
  font-size: 13px;
  margin-top: 5px;
}
.master-wrapper-content > .nop-slider {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 20px;
  max-width: 100vw !important;
}
.master-wrapper-content > .nop-slider .slider-img {
  max-width: 100%;
  width: 100%;
}
.master-wrapper-content > .nop-slider .swiper-pagination {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  font-size: 0;
}
.master-wrapper-content > .nop-slider .swiper-pagination span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 7px;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  font-size: 0;
  border-radius: 0;
  opacity: 1;
}
.master-wrapper-content > .nop-slider span.swiper-pagination-bullet-active {
  background-color: var(--red);
}
.comment-list .news-comment:last-child {
  border-bottom: 1px solid #ddd;
}

/* ============================================================================
   ENHANCED CART PAGE STYLING - Simplex Theme Integration
   ============================================================================ */

/* Product Attributes Styling in Cart */
.order-summary-content .cart .cart-item-row .attributes,
.wishlist-content .cart .cart-item-row .attributes {
  font-family: var(--font-default);
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  font-style: italic;
}

/* Quantity Controls Enhancement */
.order-summary-content .cart .cart-item-row .product-quantity {
  position: relative;
  display: inline-block;
}
.order-summary-content .increase-quantity,
.order-summary-content .decrease-quantity {
  background: var(--red);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-default);
}
.order-summary-content .increase-quantity:hover,
.order-summary-content .decrease-quantity:hover {
  background: var(--dark-red);
}

/* Enhanced Button Styling */
.order-summary-content .update-continue-button .btn {
  font-family: var(--font-default);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  border-radius: 0;
  border: none;
  transition: all 0.3s ease;
}

/* Cart Totals Enhancement */
.order-summary-content .totals .total-info {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0;
}
.order-summary-content .totals .total-info table {
  font-family: var(--font-default);
  margin-bottom: 0;
}
.order-summary-content .totals .total-info table tr td {
  font-family: var(--font-default);
  font-weight: 600;
  color: var(--grey-black);
  padding: 10px 12px;
  border-bottom: 1px solid #dee2e6;
}
.order-summary-content .totals .total-info table tr:last-child td {
  border-bottom: none;
}

/* Empty Cart Styling */
.order-summary-content .no-data {
  text-align: center;
  padding: 50px 20px;
  font-family: var(--font-default);
  font-size: 18px;
  color: var(--grey-black);
  font-weight: 600;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0;
  margin: 20px 0;
}

/* Remove Button Enhancement */
.order-summary-content .remove-btn {
  background: var(--red);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-default);
  font-weight: bold;
  font-size: 16px;
  position: relative;
}
.order-summary-content .remove-btn:hover {
  background: var(--dark-red);
  transform: scale(1.1);
}
.order-summary-content .remove-btn::after {
  content: "\00d7";
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cart Warning Messages */
.order-summary-content .message-error ul {
  font-family: var(--font-default);
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-summary-content .message-error ul li {
  font-family: var(--font-default);
  color: var(--red);
  font-weight: 600;
  padding: 5px 0;
}

/* Mobile Responsive Cart Enhancements */
@media (max-width: 768px) {
  .shopping-cart-page .page-title h1 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
  }

  .order-summary-content .cart .cart-item-row td {
    padding: 10px 5px;
    font-size: 14px;
  }

  .order-summary-content .checkout-buttons .checkout-button.checkout-new {
    font-size: 16px;
    padding: 12px 15px;
  }

  .order-summary-content .update-continue-button .btn {
    margin: 5px 0;
    width: 100%;
  }
}

/* Tablet Cart Responsive */
@media (min-width: 768px) and (max-width: 992px) {
  .order-summary-content .cart .cart-item-row td.product a {
    font-size: 15px;
  }

  .order-summary-content .cart .cart-item-row .unit-price,
  .order-summary-content .cart .cart-item-row .subtotal {
    font-size: 15px;
  }
}

/* Enhanced Focus States for Accessibility */
.order-summary-content .cart .cart-item-row .qty-input:focus,
.order-summary-content .checkout-buttons .checkout-button:focus,
.order-summary-content .update-continue-button .btn:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Discount and Gift Card Boxes Enhancement */
.shopping-cart-page .coupon-box .title,
.shopping-cart-page .giftcard-box .title {
  font-family: var(--font-default);
  font-weight: 700;
  font-size: 15px;
  color: var(--grey-black);
  background: var(--red);
  color: #fff;
  text-transform: uppercase;
}

.shopping-cart-page .coupon-box .cart-box-wrapper,
.shopping-cart-page .giftcard-box .cart-box-wrapper {
  font-family: inherit;
  font-size: 15px;
}

.shopping-cart-page .coupon-box .hint,
.shopping-cart-page .giftcard-box .hint {
  font-size: 15px;
  font-family: var(--font-default);
}

.shopping-cart-page .coupon-box .discount-coupon-code,
.shopping-cart-page .giftcard-box .gift-card-coupon-code {
  font-size: 15px;
}

.shopping-cart-page .coupon-box .message,
.shopping-cart-page .giftcard-box .message {
  font-size: 15px;
}

.shopping-cart-page .coupon-box .current-code,
.shopping-cart-page .giftcard-box .current-code {
  font-size: 15px;
}

.shopping-cart-page .coupon-box .apply-discount-coupon-code-button,
.shopping-cart-page .giftcard-box .apply-gift-card-coupon-code-button {
  background: var(--red);
  color: #fff;
  font-family: var(--font-default);
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: all 0.3s ease;
}

.shopping-cart-page .coupon-box .apply-discount-coupon-code-button:hover,
.shopping-cart-page .giftcard-box .apply-gift-card-coupon-code-button:hover {
  background: var(--dark-red);
}

/* HEADER OVERLAY FIX - Ensure header menu stays above all elements */
.main-menu.goToTop,
.navbar.navbar-inverse,
.header {
  z-index: 99999 !important;
}

/* Magnific Popup modal overlays - additional elements requiring high z-index */
.mfp-container,
.mfp-bg {
  z-index: 9999999 !important;
}

/* Magnific Popup close button styling - bold, bigger, hand cursor */
.mfp-close,
button.mfp-close,
button.mfp-arrow {
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 48px !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s ease !important;
}

.mfp-close:hover,
button.mfp-close:hover {
  opacity: 1 !important;
}

/* Fix for product image zoom overlays and containers */
.picture-zoom-overlay,
.picture-zoom-container,
.product-picture-zoom,
.zoomContainer,
.zoomWindow,
.zoomLens {
  z-index: 9998 !important;
}

/* Fix for product detail page images to not interfere with header */
.product-details-page .product-pictures,
.product-details-page .product-image,
.product-details-page .picture-gallery,
.product-details-page .picture-gallery .picture,
.product-details-page .gallery .picture img {
  z-index: auto !important;
}

/* Additional fix for any fixed positioned elements that might interfere */
[style*="position: fixed"]:not(.main-menu):not(.navbar):not(.header) {
  z-index: 9000 !important;
}

/* FONT CONSISTENCY - Ensure Garamond serif font throughout SimplexTheme */
/* Sliders and carousels */
.swiper,
.swiper-slide,
.nop-slider,
.owl-carousel,
.carousel-inner,
.slider-content,
.slider-text,
.slide-caption {
  font-family: var(--font-default);
}

/* Form elements and inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea,
.form-control,
.form-group label {
  font-family: var(--font-default);
}

/* Buttons without explicit font family */
button:not([style*="font-family"]),
.btn:not([style*="font-family"]),
input[type="button"]:not([style*="font-family"]),
input[type="submit"]:not([style*="font-family"]) {
  font-family: var(--font-default);
}

/* Tables and data display */
table,
th,
td,
.table,
.data-table {
  font-family: var(--font-default);
}

/* Navigation and menu elements */
.nav,
.navbar,
.dropdown-menu,
.menu-item,
.breadcrumb {
  font-family: var(--font-default);
}

/* Content areas missing font declarations */
.content,
.main-content,
.page-body,
.section,
p:not([style*="font-family"]),
span:not([style*="font-family"]),
div:not([style*="font-family"]) {
  font-family: inherit; /* Inherits from body which is Garamond */
}

/* Specific slider pagination and controls */
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination-bullet,
.owl-nav,
.owl-dots,
.carousel-control {
  font-family: var(--font-default);
}

/* OCarousel-grid font consistency */
.ocarousel-grid {
  font-family: var(--font-default);
}

/* OCarousel-grid title styling to match SimplexTheme pattern */
.ocarousel-grid .title {
  margin-bottom: 50px;
  position: relative;
  text-align: center;
  border-bottom: none !important;
}

.ocarousel-grid .title::before {
  border-top: 1px solid #ccc;
  content: "";
  left: 0%;
  position: absolute;
  right: 0%;
  top: 50%;
}

.ocarousel-grid .title strong {
  background: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  position: relative;
  z-index: 10;
  padding: 15px 25px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--grey-black);
  letter-spacing: 3px;
  line-height: 24px;
  font-family: var(--font-default);
}

.ocarousel-grid .carousel-product,
.ocarousel-grid .owl-carousel,
.ocarousel-grid .ocarousel {
  font-family: var(--font-default);
}

.ocarousel-grid .item-box,
.ocarousel-grid .product-item,
.ocarousel-grid .caption,
.ocarousel-grid .details {
  font-family: var(--font-default);
}

.ocarousel-grid .product-title,
.ocarousel-grid .product-title a,
.ocarousel-grid h3 {
  font-family: var(--font-default);
}

.ocarousel-grid .prices,
.ocarousel-grid .price,
.ocarousel-grid .actual-price,
.ocarousel-grid .old-price {
  font-family: var(--font-default);
}

.ocarousel-grid .description,
.ocarousel-grid p {
  font-family: var(--font-default);
}

.ocarousel-grid .buttons,
.ocarousel-grid .btn,
.ocarousel-grid .product-box-add-to-cart-button,
.ocarousel-grid .add-to-wishlist-button {
  font-family: var(--font-default);
}

.ocarousel-grid .owl-nav button,
.ocarousel-grid .owl-dots button {
  font-family: var(--font-default);
}

/* BENCHMARK LAYOUT TRANSFORMATION - Match Image #2 layout */

/* 1. ENFORCE 3:4 ASPECT RATIO - Width:Height proportion (Modern approach) */
.ocarousel-grid .item-box .product-item .picture {
  aspect-ratio: 3/4 !important; /* Force 3:4 aspect ratio */
  width: 100% !important;
  height: auto !important; /* Let aspect-ratio control height */
  margin-bottom: 3px !important; /* Minimal spacing */
  overflow: hidden !important;
  position: relative !important;
  max-width: 415px !important; /* 50% larger container (275.5px × 1.5 = 413px) */
}

.ocarousel-grid .item-box .product-item .picture a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.ocarousel-grid .item-box .product-item .picture a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Fit entire image within 3:4 container without cropping */
  object-position: center !important; /* Center the image within container */
}

/* Legacy browser fallback using padding-top technique */
@supports not (aspect-ratio: 3/4) {
  .ocarousel-grid .item-box .product-item .picture {
    height: 0 !important;
    padding-top: 133.33% !important; /* 3:4 ratio = 4/3 = 133.33% */
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 415px !important;
  }

  .ocarousel-grid .item-box .product-item .picture a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .ocarousel-grid .item-box .product-item .picture a img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* 2. CONSTRAIN CAPTION TO COMPACT SINGLE-LINE (45px total) */
.ocarousel-grid .caption {
  height: 45px !important; /* Compact height for single-line display */
  overflow: hidden !important;
}

.ocarousel-grid .caption .details {
  max-height: 80px !important;
  overflow: hidden !important;
}

/* 3. IMPLEMENT 2-LINE TITLE TRUNCATION */
.ocarousel-grid .caption .details h3.product-title {
  font-size: 14px !important; /* Compact font for more content */
  line-height: 14px !important;
  height: 18px !important; /* Exactly 2 lines (14px × 2) */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 0 5px 0 !important;
}

/* 4. HIDE NON-ESSENTIAL ELEMENTS FOR CLEAN LAYOUT */
.ocarousel-grid .caption .details .sku,
.ocarousel-grid .item-box .product-rating-box,
.ocarousel-grid .item-box .rating,
.ocarousel-grid .item-box .description,
.ocarousel-grid .item-box .product-border-bottom {
  display: none !important; /* Hide to match benchmark minimalism */
}

/* 5. COMPACT PRICE DISPLAY (Single line) */
.ocarousel-grid .caption .details .prices {
  font-size: 11px !important;
  line-height: 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 6. RESPONSIVE ADJUSTMENTS FOR MOBILE */
@media (max-width: 767.98px) {
  .ocarousel-grid .caption {
    height: 40px !important; /* Very compact on mobile */
  }

  /* Compact header adjustments for mobile */
  .header-upper {
    height: 20px; /* Even more compact on mobile */
  }

  .header-top-right ul li a {
    padding: 2px 8px 2px 24px; /* Further reduced padding for mobile */
    font-size: 10px;
    line-height: 14px;
    margin: 1px 0px;
  }

  .currency-selector,
  .language-selector,
  .tax-display-type-selector {
    margin: 2px 4px 0px 0px;
  }

  .header-menu .navbar.navbar-inverse .nav.navbar-nav > li > a {
    padding: 10px 15px; /* Reduced padding for mobile menu */
    font-size: 12px;
  }

  /* Adjust header-top-right icons for mobile */
  .header-top-right ul li .ico-account {
    background-position: 8px 5px;
  }
  .header-top-right ul li .ico-account:hover {
    background-position: 8px -20px;
  }
  .header-top-right ul li .ico-register {
    background-position: 8px 5px;
  }
  .header-top-right ul li .ico-register:hover {
    background-position: 8px -20px;
  }
  .header-top-right ul li .ico-wishlist {
    background-position: 8px 5px;
  }
  .header-top-right ul li .ico-wishlist:hover {
    background-position: 8px -20px;
  }
  .header-top-right ul li .ico-inbox {
    background-position: 8px 7px;
  }
  .header-top-right ul li .ico-inbox:hover {
    background-position: 8px -21px;
  }
  .header-top-right ul li .ico-logout {
    background-position: 8px 4px;
  }
  .header-top-right ul li .ico-logout:hover {
    background-position: 8px -21px;
  }
  .header-top-right ul li .ico-login {
    background-position: 8px 5px;
  }
  .header-top-right ul li .ico-login:hover {
    background-position: 8px -20px;
  }
}

/* UNIVERSAL 3:4 ASPECT RATIO FOR ALL CAROUSEL TYPES */
/* Applied to home-features-slider, ocarousel, and other carousel components */
.home-features-slider .item-box .picture,
.home-features-slider .item-box .product-item .picture {
  aspect-ratio: 3/4 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  max-width: 415px !important;
}

.home-features-slider .item-box .picture a,
.home-features-slider .item-box .product-item .picture a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.home-features-slider .item-box .picture img,
.home-features-slider .item-box .picture a img,
.home-features-slider .item-box .product-item .picture img,
.home-features-slider .item-box .product-item .picture a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Legacy fallback for home-features-slider */
@supports not (aspect-ratio: 3/4) {
  .home-features-slider .item-box .picture,
  .home-features-slider .item-box .product-item .picture {
    height: 0 !important;
    padding-top: 133.33% !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 415px !important;
  }

  .home-features-slider .item-box .picture a,
  .home-features-slider .item-box .product-item .picture a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home-features-slider .item-box .picture img,
  .home-features-slider .item-box .picture a img,
  .home-features-slider .item-box .product-item .picture img,
  .home-features-slider .item-box .product-item .picture a img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ==========================================================================
   MATRIX TABLE NUMBER INPUT SPINNER FIX
   ========================================================================== */

/* Fix truncated number input spinner buttons in matrix table */
.matrix-table .size-input.matrix-quantity-input,
input.size-input.matrix-quantity-input,
.pack-input,
input.pack-input,
.pack-input-individual,
input.pack-input-individual {
  /* height: 36px; */
  padding: 6px 4px;
  box-sizing: border-box;
  border: 1px solid #ced4da;
  background: #fff;
  font-size: 14px; /* ENHANCED: Consistent with B2B plugin for better readability */
}

/* Ensure webkit spinner buttons are fully visible */
.matrix-table .size-input.matrix-quantity-input::-webkit-inner-spin-button,
.matrix-table .size-input.matrix-quantity-input::-webkit-outer-spin-button,
input.size-input.matrix-quantity-input::-webkit-inner-spin-button,
input.size-input.matrix-quantity-input::-webkit-outer-spin-button,
.pack-input::-webkit-inner-spin-button,
.pack-input::-webkit-outer-spin-button,
input.pack-input::-webkit-inner-spin-button,
input.pack-input::-webkit-outer-spin-button,
.pack-input-individual::-webkit-inner-spin-button,
.pack-input-individual::-webkit-outer-spin-button,
input.pack-input-individual::-webkit-inner-spin-button,
input.pack-input-individual::-webkit-outer-spin-button {
  opacity: 1;
  height: 18px;
  margin: 0;
  display: block;
}

/* Firefox number input spinner buttons */
input.size-input.matrix-quantity-input[type="number"],
input.pack-input[type="number"],
input.pack-input-individual[type="number"] {
  -moz-appearance: textfield;
}

input.size-input.matrix-quantity-input[type="number"]::-webkit-inner-spin-button,
input.size-input.matrix-quantity-input[type="number"]::-webkit-outer-spin-button,
input.pack-input[type="number"]::-webkit-inner-spin-button,
input.pack-input[type="number"]::-webkit-outer-spin-button,
input.pack-input-individual[type="number"]::-webkit-inner-spin-button,
input.pack-input-individual[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
}

/*!
 * nopAccelerate Simplex Theme v2.9.0 (http://themes.nopaccelerate.com/themes/nopaccelerate-simplex-theme-3/)
 * Copyright 2025 Xcellence-IT.
 * Licensed under LICENSETYPE (http://www.nopaccelerate.com/terms/)
 */

/* Responsive Styles for nopAccelerate Simplex Theme
    @media Queries
*/

/* Bootstrap 3 Standard Container Widths - Default for all pages */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }

    /* Full-width override for Homepage */
    .html-home-page .container {
        width: 100%;
        max-width: 100%;
/*        padding-left: 20px;
        padding-right: 20px;*/
    }

    /* Wide container for header-menu on ALL pages */
    .header-menu .container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        width: 970px;
    }

    /* Full-width override for Homepage */
    .html-home-page .container {
        width: 100%;
        max-width: 100%;
    }

    /* Wide container for header-menu on ALL pages */
    .header-menu .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Navigation menu - center items at md breakpoint (mirrors sm behavior) */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-menu .navbar.navbar-inverse .nav.navbar-nav li a {
        font-size: 13px;
        padding: 14px 12px;
        white-space: nowrap;
    }
}

/* TABLET RANGE (768-991px): Stack sidebar vertically for optimal space */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        width: 750px;
    }

    /* Full-width override for Homepage */
    .html-home-page .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Wide container for header-menu on ALL pages */
    .header-menu .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ================================================
       iPad Header & Menu UI Improvements
       ================================================ */

    /* Reduce container padding for better space usage */
    .header .container,
    .header-menu .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Header lower - better layout for search/logo/cart */
    .header-lower {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 8px 5px;
        margin: 0;
    }
    .header-lower .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /* Search box - compact for tablet */
    .header-lower .search-box {
        order: 1;
        flex: 0 0 200px;
        margin: 0;
    }
    .header-lower .search-box .search-nav {
        width: 180px;
    }

    /* Logo - centered */
    .header-logo {
        order: 2;
        flex: 1;
        text-align: center;
        margin: 0;
    }
    .header-logo a img {
        max-height: 50px;
    }

    /* Shopping cart - fix text wrapping */
    .flyout-main-wrapper {
        order: 3;
        flex: 0 0 auto;
        margin: 0;
        float: none;
    }
    .flyout-main-wrapper .shopping-cart-link {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .flyout-main-wrapper .shopping-cart-link .cart-label {
        display: none;
    }
    .flyout-main-wrapper .shopping-cart-link .cart-qty {
        font-size: 14px;
        font-weight: 600;
    }

    /* Top links - better spacing between icon and text */
    .header-top-right ul li a {
        padding: 4px 12px 4px 32px;
        font-size: 11px;
    }
    .header-top-right ul li .ico-account,
    .header-top-right ul li .ico-wishlist,
    .header-top-right ul li .ico-logout,
    .header-top-right ul li .ico-login,
    .header-top-right ul li .ico-register {
        background-position-x: 8px;
    }

    /* Navigation menu - centered with better touch targets */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav li a {
        font-size: 13px;
        padding: 14px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ================================================
       iPad Footer Layout Fix
       ================================================ */
    .footer-middle .container > .row {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-middle .container > .row > div {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        padding: 0 10px;
        margin-bottom: 25px;
    }
    .footer-middle .title strong {
        font-size: 14px;
        white-space: nowrap;
    }
    .footer-middle ul li a {
        font-size: 13px;
    }
}

@media (max-width:1199.98px) {
    .shopping-cart-page .qty-dropdown.form-control {
        padding: 0px 3px;
    }
    .checkout-attributes .row>div:nth-child(odd) {clear: both;}
}
@media (max-width:991.98px){
    .checkout-page .terms-of-service {
        margin-bottom: 20px;
    }
    .lt-ie11 .login-page .checkbox input[type="checkbox"]{ margin-left:15px;}
    .header-upper{height:auto;}
    .currency-selector, .language-selector,.tax-display-type-selector{display:inline-block;float:none;}
    .header-selectors-wrapper{width:100%;text-align:center;border-bottom:0px solid #ddd;padding-bottom:10px;}
    .header-links-wrapper .header-top-right{display:inline-block;text-align:center;width:100%;}
    .header-top-right ul li{display:inline-block;float:none;}
    .header-top-right ul li.my-account a, .header-top-right ul li.register a{border-left:none;}
    .header-top-right ul li a{border-right:none;float:left;display:inline-block;}
    .header-upper-right{float:none !important;}
    .main-menu.goToTop .navbar.navbar-inverse.category-menu{margin: 0 auto;width: 720px !important;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav li a{font-size:12px;padding:15px 12px;white-space:nowrap;}
    /* Fix dropdown arrow positioning to prevent overlap with text */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown{position:relative !important;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > .fa-angle-down.visible-xs,
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > span.fa-angle-down{
        display:none !important;
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a.dropdown-toggle{padding-right:35px !important;}
    /* Enable dropdown menu on hover */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover > .dropdown-menu{
        display:block !important;
    }
    #index-page .slider-wrapper.theme-custom{width:100%;max-width:100%;}
    .main-content,.category-grid.home-page-category-grid.row{clear:both;}
    .product-grid .item-box{height:500px;margin-bottom:30px;}
    .product-details-page .product-add-button{float:left;}
    .forum-edit-page .form-group label{margin-bottom:5px;}
    .master-wrapper-page{margin-top:0px;}
    .home-news-slider .owl-nav,.crosssell-products-slider .owl-nav,.home-bestseller-slider .owl-nav,.related-products-slider .owl-nav,.also-purchased-products-slider .owl-nav,.home-category-slider .owl-nav{position:inherit;float:left;width:100%;text-align:center;margin-bottom:40px;}
    .home-news-slider .owl-nav .owl-prev,.crosssell-products-slider .owl-nav .owl-prev,.home-bestseller-slider .owl-nav .owl-prev,.related-products-slider .owl-nav .owl-prev,.also-purchased-products-slider .owl-nav .owl-prev,.home-category-slider .owl-nav .owl-prev{float:none !important;display:inline-block !important;position:inherit !important;margin-right:15px !important;left:0 !important;}
    .home-news-slider .owl-nav .owl-next,.crosssell-products-slider .owl-nav .owl-next,.home-bestseller-slider .owl-nav .owl-next,.related-products-slider .owl-nav .owl-next,.also-purchased-products-slider .owl-nav .owl-next,.home-category-slider .owl-nav .owl-next{float:none !important;display:inline-block !important;position:inherit !important;right:0 !important;}
    .category-grid .item-box .category-item,.home-news-slider .owl-nav{margin-bottom:0px;}
    .home-news-slider .owl-nav{margin-top:20px;}
    .product-category-item .picture .title a{width:140px;padding:10px;font-size:16px;}
    .product-category-item .picture .title{width:140px;}
    .home-page .topic-html-content,.title.sub-title{margin-bottom:30px;}
    .item-box .rating::after{right:3%;}
    .item-box .rating::before{left:3%;}
    /*.product-details-page .overview,.product-details-page .product-name.panel-heading h1{text-align:center;}*/
    .product-details-page .customer-entered-price .enter-price-input, .product-details-page .customer-entered-price .enter-price-label {float:none; display:inline-block;}
    .product-details-page .product-share-button a,.product-details-page .delivery, .product-details-page .add-to-cart, .product-details-page .overview .delivery-date,.product-details-page .product-reviews-overview .product-review-links, .product-details-page .product-reviews-overview .product-review-box, .product-details-page .product-reviews-overview .product-no-reviews{float:none;text-align:center;display:inline-block;}
    .product-details-page .rating{margin:0 auto;text-align:center;}
    .product-details-page .addtocart-quantity-box,.product-details-page .availability .stock strong,.product-details-page .stock .value, .product-details-page .add-to-cart .qty-dropdown {display:inline-block;float:none;}
    .product-details-page .add-to-cart .quantity-box label{float:none;vertical-align:middle;display:inline-block;}
    .product-details-page .add-to-cart .product-add-button{float:none;margin-top:15px;display:inline-block;}
    .product-details-page .attributes{clear:both;}
    .product-details-page .attributes .text-prompt{display:inline-block;margin-bottom:5px;}
    .product-details-page .attributes .btn-dropdown.form-control,.product-details-page .attributes select{margin:0 auto;display:inline-block;}
    .overview-buttons div{float:none;display:inline-block;}
    .product-details-page .gallery{margin-bottom:0px;}
    .product-details-page .addtocart-quantity-box{margin-right:0px;vertical-align:middle}
    .product-details-page .variant-overview .add-to-cart .qty-input{width:60px !important}
    .order-details-page .billing-info, .order-details-page .shipping-info{margin-bottom:20px;}
    .forum-topic-page .topic-posts{padding:0;}
    .order-progress .nav.nav-pills li{margin-bottom:10px;}
    .qty-input.form-control{width:100%;}
    .return-request-page select{padding:6px 1px;}
    .bottom-box-shadow {height: 30px;}
	.eu-cookie-bar-notification {
        margin: -90px 0 0 -160px !important;
    }
    .shopping-cart-page .qty-dropdown.form-control {
        width: 100%;
    }
    .provider-verification .inputs label {width: 25%;}
    .provider-verification .inputs .username {width: 41.66666667%;}
    .provider-verification .inputs .field-validation-valid {width: 25%;}
    .provider-verification .form-group .buttons {margin-left: 25%;}
    .product-details-page .overview .attributes textarea{margin: 0 auto;}
    .product-details-page .attributes input {
        display: inline-block;
    }
    .overview .qq-upload-button {
        margin: 0 auto;
    }
    .giftcard label {
        margin-bottom: 5px;
    }
    .product-details-page .picture-gallery .picture::before {
        padding-top: 85%;
    }
    .login-page .login-password {
        float: left;
        width: 100%;
    }

}
@media (max-width:767.98px) {
    /* Mobile header links - add space between icon and text */
    .header-top-right ul li a {
        padding: 4px 10px 4px 28px;
    }
    .header-top-right ul li .ico-account,
    .header-top-right ul li .ico-wishlist,
    .header-top-right ul li .ico-logout,
    .header-top-right ul li .ico-login,
    .header-top-right ul li .ico-register {
        background-position-x: 6px;
    }

    /* Mobile product name - center align on mobile */
    .product-name {
        text-align: center !important;
    }

    /* Mobile breadcrumb - reduced spacing for mobile screens */
    .breadcrumb-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .breadcrumb-wrapper .breadcrumb {
        display: block;
        padding: 8px 15px;
        margin: 0 0 10px 0;
        line-height: 1.5;
        text-align: center;
    }
    .breadcrumb-wrapper .breadcrumb li {
        display: inline;
    }
    .breadcrumb-wrapper .breadcrumb li a,
    .breadcrumb-wrapper .breadcrumb li .current-item {
        font-size: 13px;
    }
    /* Prevent word wrapping for active breadcrumb item */
    .breadcrumb-wrapper .breadcrumb li .active {
        white-space: nowrap;
    }
    /* Show '/' separator for active breadcrumb item on mobile */
    .breadcrumb-wrapper .breadcrumb li:last-child::before {
        content: '/' !important;
        padding: 0 5px;
        color: #999;
    }
    .breadcrumb-wrapper .breadcrumb li:last-child {
        display: inline;
        margin-top: 0;
        font-weight: 600;
    }

    /* Mobile product page - reduce spacing above gallery */
    .product-details-page .product-essential {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .product-details-page .gallery {
        margin-top: 0 !important;
    }

    /* Mobile product buttons - stack vertically full width */
    .product-details-page .overview-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 15px;
    }
    .product-details-page .overview-buttons div {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    .product-details-page .overview-buttons .add-to-wishlist-button,
    .product-details-page .overview-buttons .add-to-compare-list-button,
    .product-details-page .overview-buttons .email-a-friend-button {
        width: 100%;
        margin: 0;
        padding: 14px 20px 14px 50px;
        font-size: 14px;
        box-sizing: border-box;
        text-align: center;
        background-position: 20px center !important;
    }

    /* Mobile share buttons - centered */
    .product-details-page .product-share-button {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin: 15px 0;
    }
    .product-details-page .product-share-button a {
        float: none;
        margin: 0;
    }

    /* Mobile product tabs - clean horizontal style */
    .product-details-page .nav-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border: none;
        gap: 0;
        /*margin-bottom: 15px;*/
    }
    .product-details-page .nav-tabs li {
        float: none;
        flex: 1;
        max-width: 50%;
        text-align: center;
    }
    .product-details-page .nav-tabs li a {
        display: block;
        margin: 0;
        padding: 12px 15px;
        border: 1px solid #ddd;
        background: #f8f8f8;
        color: #666;
        font-size: 14px;
    }
    .product-details-page .nav-tabs li.active a {
        background: #fff;
        border-bottom-color: #fff;
        color: #333;
        font-weight: 600;
    }

    .header-menu .main-menu.goToTop .navbar.navbar-inverse .nav.navbar-nav, .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav {
        overflow-y: scroll;
        max-height: 300px;
    }
    .wishlist-content .tax-shipping-info {
        display: inline-block;
        text-align: center;
        width: 100%;
    }
    .apply-vendor-page .terms-of-service label {
        float: none;
        width:auto;
    }
    .product-list .item-box .product-item .sku {
        text-align: center;
    }
    ul.option-list {
        clear:both;
    }
    .wishlist-page .remove-addtocart-checkbox .custom-checkbox {
        display:inline-block;
    }
    .wishlist-page .wishlist-small-wrapper .remove-addtocart-checkbox {
        margin-bottom: 10px;
    }
    .footer-tax-shipping {
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav {
        margin: 0;
        flex-direction: column;
    }
    .header-menu li.dropdown .caret {
        float: right;
        margin-top: 8px;
    }
    .responsive {
        display: none;
    }
    .navbar.navbar-inverse.goToTop {
        position: fixed;
        top: 0 !important;
    }
    .header-menu .col-md-12 {
        padding: 0;
    }

    /* Hamburger button - minimal design */
    .navbar-toggle,
    .dropdown-image.navbar-toggle {
        display: block;
        float: right;
        margin: 10px 0;
        padding: 8px 10px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 3px;
        transition: border-color 0.2s;
    }
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background: transparent;
        border-color: rgba(255,255,255,0.6);
        outline: none;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #fff;
        border-radius: 1px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
    /* Animate bars → × when menu is open */
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
        transform: translateY(6px) rotate(45deg);
    }
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { opacity: 0; }
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
        transform: translateY(-6px) rotate(-45deg);
    }
    /* Expanded menu: thin top border as separator */
    #mobile-menu.in {
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    /* Compact hamburger: remove excess top/bottom space around navbar */
    .header-menu {
        margin-bottom: 0;
    }
    .header-menu .navbar.navbar-inverse {
        min-height: 40px;
    }
    .dropdown.open .dropdown-menu.sublist.firstLevel li a{background-image:none;}
    .headerlinks .header-links .nav .dropdown.cart-full-screen {display:none;}
    .header-links-wrapper .header-top-right li.dropdown:hover .dropdown-menu{display:none;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li{float:none;width:100%;}
    .header-menu .nav.navbar-nav > li{border-bottom:1px solid #444;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav li a{float:none;width:100%;padding:15px 25px;border-right:none;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover .dropdown-menu{display:none;}
    .header-menu .navbar.navbar-inverse .navbar-collapse,.header-menu .navbar.navbar-inverse .home-wrapper a{border-color:transparent;border-left:0px;}
    .header-menu .navbar.navbar-inverse .home-wrapper a{border-top:1px solid #434b56;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a:hover:before{background:none;}
    .search-box .ui-widget-content{width: 255px !important;}
    .flyout-cart-wrapper.active{opacity:0;display:none;}
    .header-lower{padding:15px 0px;}
    .header-lower .search-box{float:none;margin:0 auto 15px;width:260px;text-align:center;overflow:hidden;}
    .search-box .navbar-form{width:auto;margin:0 auto;padding:0;position:relative;}
    .header-lower .search-box{position:static;}
    .flyout-main-wrapper{float:none;text-align:center;}
    .flyout-main-wrapper .shopping-cart-link .ico-cart{float:none;margin-top:10px;}
    .footer-disclaimer{display:block;text-align:center;}
    .footer-upper .information , .footer-upper .customer-service , .footer-upper .my-account , .footer-upper .follow-us{margin-bottom:25px;}
    #newsletter-subscribe-block #newsletter-email{float:none;display:inline-block;margin:15px -3px 15px 0px;width:280px}
    .footer-upper .column .social ul li{display:inline-block;float:none;}
    .newsletter-wrapper strong{margin-top:0px;margin-right:0px;}
    .newsletter-wrapper strong,#newsletter-subscribe-block #newsletter-subscribe-button,.newsletter-subscribe-block .newsletter-email{float: none;text-align:center;}
    #newsletter-subscribe-block #newsletter-subscribe-button{margin-top:-4px;}
    .block.block-newsletter .newsletter-result-block{margin:10px auto;}
    .newsletter-subscribe-block .form-group{width:100%;}
    .footer-upper .follow-us{margin-bottom:0px;clear:both;}
    .footer-upper .social-wrapper{float:none;text-align:center;clear:both;}
    .footer-middle .contact-wrapper i,.footer-lower .payment-method ul li,.footer-upper .social-wrapper li{display:inline-block;float:none;}
    .footer-lower .payment-method{float:none;text-align:center;}
    .footer-middle,.poweredby,.designedby.pull-right{text-align:center;}
    .footer-middle .contact-wrapper .address i{line-height:22px;}
    .footer-middle .contact-wrapper p{display:inline;float:none;}
    .footer-middle .contact-wrapper i{margin-right:10px;}
    .eq-ie8 #newsletter-subscribe-block #newsletter-subscribe-button{margin-top:5px;}
    .designedby.pull-right{float: none !important;margin: 10px 0;}
    .category-grid .item-box .category-item, .home-news-slider .owl-nav{margin-bottom:30px;}
    .item-box .product-rating-box{width:auto;clear:both;}
    .item-box .rating::after,.product-list .item-box .rating::after{right:-50%;}
    .item-box .rating::before,.product-list .item-box .rating::before{left:-50%;}
    .product-list .item-box .picture{margin:0px 0px 10px;width:100%;}
    .item-box .thumbnail .caption,.product-list .item-box .thumbnail .caption{text-align:center;width:100%;}
    .product-list .item-box .product-item .product-title{text-align:center;}
    .product-details-page .product-item .rating{text-align:center;display:block;margin:0 auto;}
    .product-details-page .product-essential .tab-content {width:100%;}
    .product-reviews-page .write-product-review-button{margin-left:0px;}
    .product-reviews-page .rating-text {margin-top:-1px;}
    .product-list .item-box .product-item .rating{margin:0 auto;}
    .product-list .item-box .product-item .product-title a{text-align:center;}
    .item-box, .product-grid .item-box{height:auto;}
    .manufacturer-grid .item-box .picture a img,.category-grid .item-box .picture a img,.sub-category-grid .item-box .picture a img{width:100%;}
    .product-list .description{padding:0px 10px;}
    .side-content{clear:both;}
    .listbox,.lt-ie9 .listbox{display:none;}
    .block.block-newsletter .listbox{display:block;}
    .sidebar .title{background:url("../Themes/SimplexTheme/Content/images/toggle-down-arrow.png") no-repeat var(--red)  right center;font-size:16px;padding:15px;cursor:pointer;border-bottom:1px solid #ddd;box-shadow:0 -3px 5px #aaaaaa;-moz-box-shadow:0 -3px 5px #aaa;-web-box-shadow:0 -3px 5px #aaaaaa;padding-right: 60px;}
    .sidebar .title.arrow-up-down{background:url("../Themes/SimplexTheme/Content/images/toggle-up-arrow.png") no-repeat var(--red) right center;}
    .box-shadow-wrapper{width:49%;margin-right:2%;}
    .lt-ie9 .box-shadow-wrapper{width:48%;margin-right:2%;}
    .box-shadow-wrapper:nth-child(2n){margin-right:0px;}
    .box-shadow-wrapper .listbox{border-top:none;}
    .block.block-account-navigation.well.box-shadow-wrapper{float: none;margin: 0 auto 30px;}
    .product-selectors{text-align:center;}
    .product-viewmode .grid-list-icon{display: inline-block;float:none;margin-top:15px;}
    .product-selectors .remove_left_padding{padding-left:15px;}
    .product-details-page .variant-picture{float: none;margin: 0 auto 30px;width: 50%;}
    .product-details-page .variant-overview{text-align:center;width:100%;}
    .product-details-page .variant-overview .overview-buttons .add-to-wishlist-button{margin-right:0px;}
    .new-wrapper.register-block{margin-bottom:20px;}
    .registration-page .form-horizontal .form-group label{text-align:left !important; display:inline;}
    .password-recovery-page .control-label,.email-a-friend-page .control-label,.product-reviews-page .control-label,.contact-page .control-label,.change-password-page .control-label,.customer-info-page .control-label,.registration-page .control-label,.address-edit-page .control-label,.checkout-page .enter-address-body.form-horizontal .control-label,.form-title-rquired{float:left;padding-right:5px;}
    .customer-info-page .form-horizontal .control-label{text-align:left;}
    .category-select , .forum-topic-page .post-info , .forum-topic-page .post-content , .private-message-send-page textarea , .pm-title-text.form-control{ width:100%;}    
    .customer-info-page .panel.panel-default{overflow-x:scroll;border:1px solid #ddd !important;}
    .check-username-availability-button {margin-top:10px;}
    .registration-page .username-not-available-status{padding-left:0px;}
    .registration-page .check-username-availability-button{clear: both;display: block;float: left;margin-top: 8px;}
    .checkout-button.checkout-new {margin-bottom:10px;}
    .customer-info-textarea{width:100% !important;}
    .customer-info-page .form-group .save-btn-mt,.address-edit-page .form-group .save-btn-mt,.news-item-page .new-comment .buttons{padding-left:0px;}
    .order-details-page .payment-infomation, .order-details-page .shipping-information,.shipment-details-page .shipping-details{margin-bottom:20px;}
    .order-details-page .section .panel.panel-default,.recurring-payments-box .panel.panel-default,.forums-table-section.forum-group .forums-table-section-body,.forums-table-section.topics-group.active-discussions .forums-table-section-body,.forum-page .forums-table-section{overflow-x:scroll; width:100%;}
    .forum-search-box{float:none;width:260px;margin:0px auto 20px;overflow:hidden;}
    .forum-search-box .search-box-text{width:100%;}
    .current-time{text-align:center !important;}
    .forums-table-section {margin-top:20px;}
    .private-message-send-page .form-group label,.forum-edit-page .form-group label,.forum-edit-page .form-group label{text-align:left;}
    .forum-topic-page .topic-post .post-head .post-actions,.forum-topic-page .topic-post .post-head .quote-post, .forum-topic-page .topic-post .post-head .manage-post, .forum-topic-page .topic-post .post-head .post-time{float:none;}
    .forum-topic-page .topic-post .post-info .send-pm a{display:inline-block;width:auto;text-align:center;float:none;}
    .topic-post .post-content{margin-top:20px;}
    .forum-topic-page .topic-post .post-head .manage-post{margin:10px 0px;}
    .private-message-view-page .page-title,.account-page .page-title,.order-details-page .page-title,.shipment-details-page .page-title,.private-messages-page .page-title{text-align:center;}
    .email-a-friend-page .personal-message , .product-reviews-page .write-review .review-text{ min-width:100%;}
    .forum-topic-page .post-content , .forum-topic-page .post-info , .topic-header{border:none; margin-left:0;}
    .forums-table-section.forum-group table,.forums-table-section.topics-group.active-discussions table,.forum-page .forums-table-section table{margin-bottom:0px;}
    .forum-search-text.form-control {width:65%;margin-top:1px; margin-right:0px;}
    .forum-post{border-bottom:1px solid #ddd;}
    .forum-edit-page .options-checkbox { padding-left:5px;}
    .forum-edit-page .checkbox.options-checkbox.checkbox input[type="checkbox"]{margin-left:-5px; position:relative;}
    .forum-topic-page .title{padding-left:0;}
    .forum-topic-page .title .manage{font-size:12px!important;padding:2px!important;}
    .topic-header .topic-options, .topic-footer .topic-options{float:none;text-align:center;}
    .forum-topic-page .post-content, .forum-topic-page .post-info, .topic-header{text-align:center;}
    .forum-topic-page .post-info .user-info .user-stats label{float:none;}
    .send-pm-box{float:none;display:inline;}
    .section.products .actions {margin:10px 0;}
    .profile-page .profile-info-box .user-details{ width:120px;}
    .profile-page .profile-info-box .profile-stats{ margin-left:120px;}
    .remove-from-cart .visible-xs,.add-to-cart .visible-xs{display: none !important;}
    .total-info .panel.panel-default {overflow:inherit;}
    .checkout-page .checkout-data .select-billing-address div select , .checkout-page .checkout-data .select-shipping-address div select{ width:100%;}
    .totals {float:left;margin-top:10px;width:100%;}
    .wishlist-page .wishlist-add-to-cart,.shopping-cart-page .common-buttons .estimate-shipping,.shopping-cart-page .common-buttons .update-cart,.wishlist-page .common-buttons .update-wishlist,.wishlist-page .common-buttons .email-a-friend-btn{ width:100%;text-align:center;margin:10px 0px 10px 0px;}
    .shopping-cart-page .common-buttons .continue-shopping{ width:100%;text-align:center; float:left; margin:0px 0px 10px 0px; }
    .shopping-cart-page .product-picture > img , .wishlist-page .product-picture > img ,.checkout-page .product-picture > img{margin-bottom:10px;}
    .shopping-cart-page .product > a , .wishlist-page .product > a,.checkout-page .product > a {float:left;margin-bottom:10px;width:auto;}
    .shopping-cart-page .modal-dialog.modal-sm {margin:80px auto;width:300px;}
    .shopping-cart-page .order-summary-content .qty-input.form-control,.wishlist-page .wishlist-content .qty-input.form-control{ padding:0px; width:100%;}
    #billing-address-select,#shipping-address-select{margin-bottom:20px; width:100%;}
    .wishlist-content .product-wrapper,.order-summary-content .product-wrapper {background:transparent;border-bottom: 2px solid #ddd;padding: 0;float:left;width:100%;}
    .product-wrapper .product-content-wrapper .product-image {float: left;margin-right: 12px;}
    .product-wrapper .product-content-wrapper .product-name-sku {float: left;width: 65%;text-align: left;}
    .product-wrapper .product-content-wrapper .product-name-sku .product{float: left;width: 100%;}
    .product-wrapper .product-content-wrapper .product-name-sku .product div{clear:both;color:#666;margin-bottom:10px;}
    .product-wrapper .product-content-wrapper .product-name-sku .sku.nobr{white-space:normal !important;float:left;width:100%;color:#666;}
    .product-wrapper > table {float: left;margin-top:10px;width:100%;}
    .wishlist-content .panel.panel-default table tr th, .order-summary-content .panel.panel-default table tr th{text-align:center;}
    .wishlist-page .wishlist-small-wrapper > td, .shopping-cart-page .shopping-cart-small-wrapper > td, .checkout-page .shopping-cart-small-wrapper > td {border: medium none;padding: 0;width: 100%;}
    .wishlist-page .panel > .table-bordered > tbody > tr:last-child > td, .order-summary-content .panel > .table-bordered > tbody > tr:last-child > td {border-bottom: none;}
    .wishlist-content .panel.panel-default table tbody tr, .order-summary-content .panel.panel-default.cart-item-table table tbody tr {border-top:none;background:#f5f5f5;}
    .order-summary-content .product-wrapper .product a, .wishlist-content .product-wrapper .product a {color: var(--red);font-weight: 700;display:block;}
    .order-summary-content .product-wrapper .product a:hover, .wishlist-content .product-wrapper .product a:hover{color:var(--grey-black);}
    .shopping-cart-page .order-summary-content .qty-input.form-control,.wishlist-page .wishlist-content .qty-input.form-control{ padding:0px; text-align:center;vertical-align:middle;}
    .remove-addtocart-checkbox .remove-from-cart{color:#666;}
    .order-summary-content .update-continue-button{margin:25px 0px;}
    .wishlist-content .panel.panel-default .wishlist-small-wrapper  > td, .order-summary-content .panel.panel-default .shopping-cart-small-wrapper > td{padding:10px;}
    .wishlist-content .panel.panel-default .cart.table, .order-summary-content .panel.panel-default.cart-item-table .cart.table{box-shadow:0px 0px 10px #ddd;-webkit-box-shadow: 0px 0px 10px #ddd;-moz-box-shadow: 0px 0px 10px #ddd;border-color:#ededed;border:1px solid #ededed;}
    .shopping-cart-page .common-buttons{float:none !important;}
    .remove-addtocart-checkbox .remove-from-cart{float: left;margin-right: 10px;margin-bottom:5px;}
    .remove-addtocart-checkbox .custom-checkbox {
        display:inline-block;
    }
    .remove-addtocart-checkbox .add-to-cart span{color:#666;}
    .remove-addtocart-checkbox{float:left;width:100%;margin-bottom:10px;}
    .wishlist-content .panel.panel-default table tbody tr:last-child td .product-wrapper, .order-summary-content .panel.panel-default.cart-item-table table tbody tr:last-child td .product-wrapper{border-bottom:none;}
    .wishlist-page .wishlist-add-to-cart,.wishlist-page .update-email-button{float:none;}
    .wishlist-page .wishlist-add-to-cart{clear:both;display:inline-block;}
    .wishlist-page .wishlist-add-to-cart{text-align:center;}
    .wishlist-page .share-info{width:100%;text-align:center;}
    #opc-confirm_order #confirm-order-buttons-container .confirm-order-next-step-button{padding:10px 15px;background:var(--red) url("../Themes/SimplexTheme/Content/images/checkout-order-confrim.png") no-repeat scroll 20px center;float:right;width:150px;font-size:14px;background-image:none;}
    #opc-confirm_order #confirm-order-buttons-container .confirm-order-next-step-button:hover{background:var(--grey-black) url("../Themes/SimplexTheme/Content/images/checkout-order-confrim.png") no-repeat scroll 20px center;}
    .entity-body.category-body.product-link li{width:100%;}
    .sitemap-page .entity .category-body ul{padding:0; margin:0px 10px;}
    .search-box.pull-right {float:none !important;margin:0 auto;width:280px;}
    .eu-cookie-bar-notification{ margin-left:0;}
	.remove_right_padding {padding-left:15px;padding-right:15px;}
    .master-wrapper-page.container{margin-top:15px;}
    #products-pagesize{width:100%;}
    .blog-comment .comment-info{text-align:left;}
    .blog-page .bottom-box-shadow{display:none;}
    .blog-posts .post{margin-bottom:30px;}
    .lt-ie9 .entity-body.category-body.product-link li {float: left;margin-right:26px;width:100%; margin-bottom:8px;}
    .order-details-area .row > div,.shipment-details-page .shipment-overview .info-content{clear: both;margin-bottom: 20px;}
    .newsletter-subscribe-block .options {
        text-align: center;
    }
    .flyout-main-wrapper .flyout-cart-wrapper{left:0 !important;}
    .header-menu li.dropdown .dropdown-menu li.dropdown:hover > .dropdown-menu {
        display: none;
    }
    .header-menu li.dropdown.open .dropdown-menu {
        display: block;
    }
    #mobile-menu .dropdown .fa-angle-down {
        position: absolute;
        padding: 0px 25px;
        right: 0px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        z-index: 9;
        -webkit-transition: all 0.2s;
        -webkit-transition-timing-function: linear;
        transition: all 0.2s;
        transition-timing-function: linear;
        top: 15px;
    }
    #mobile-menu .dropdown .sub-menusublist .dropdown .fa-angle-down{
        top:5px;
        color:var(--grey-black);
    }
    #mobile-menu .dropdown .fa-angle-down.rotate {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    #mobile-menu .dropdown .dropdown-menu {
        position: static;
        float: left;
        width:100%;
        padding:0;
        margin:0;
        border:none;
        border-radius:0;
    }
    .header-menu .nav.navbar-nav > li {
        position: relative;
    }
    #mobile-menu .dropdown-menu > li > a:focus, #mobile-menu .dropdown-menu > li > a {
        background-color: transparent;
        color: var(--grey-black);
    }
    #mobile-menu .dropdown-menu > li > a:focus, #mobile-menu .dropdown-menu > li > a:hover {
        background-color: transparent;
        color: var(--red);
    }
    .dropdown-menu.sub-menusublist li a, .dropdown-menu.sub-menusublist li a:hover {
        padding-bottom: 10px;
        padding-left: 55px !important;
        padding-top: 10px;
        background-position: 35px 10px !important;
    }
    .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist li a, .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist li a:hover {
        padding-left: 75px !important;
        background-position: 55px 10px !important;
    }
    .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level li a, .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level li a:hover {
        padding-left: 95px !important;
        background-position: 75px 10px !important;
    }
    .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level li a, .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level .dropdown-menu.sub-menusublist.first-level li a:hover {
        padding-left: 115px !important;
        background-position: 95px 10px !important;
    }
    /*** ESTIMATE SHIPPING POPUP ***/
    .shipping-address {
      flex-flow: column;
    }
    .address-item {
      width: 100%;
    }
    .estimate-shipping-row-item.address-item + .estimate-shipping-row-item.address-item {
      padding-left: 0px;
      padding-top: 8px;
    }
    .my-product-reviews-list-page .review-title, .product-review-list .review-title{
        float:none;
        width:100%;
        text-align:center;
    }
    .product-review-box {
        display: inline-block;
        width: 100%;
    }
    .my-product-reviews-list-page .product-review-item .rating, .product-review-list .product-review-item .rating {
        float: none;
        margin: 0 auto;
    }
    .product-review-list .product-review-item .review-text{
        float:none;
    }
    .product-review-item .avatar {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .product-review-list .product-review-item .review-text, .product-review-item .review-info, .product-review-item .product-review-helpfulness {
        text-align: center;
    }
    .estimate-shipping-row-item > div:last-child {
        padding: 0 15px !important;
    }
    .estimate-shipping-popup .fieldset .required {
        position: absolute;
        right: 5px;
        top: -40px;
    }
    .estimate-shipping-popup .address-item {
        margin: 0;
    }
    .cart .remove-from-cart .remove-btn {
        margin-right: 4px;
    }
    .provider-verification .inputs {
        margin-right: 0px;
        margin-left: 0px;
    }
    .provider-verification .inputs label {
        width: 100%;
        text-align: left;
        margin-bottom: 5px;
        padding-right: 0;
        padding-left: 0;
    }
    .provider-verification .inputs .username {width: 100%;margin: 0px;}
    .provider-verification .form-group .buttons {margin-left: 0;}
    .provider-verification .inputs .field-validation-valid {width: 100%;}
    .google-authenticator-conteiner .inputs label,
    .google-authenticator-conteiner .inputs input {
        width: 100%;
        display: block;
    }
    .google-authenticator-conteiner .inputs input {
        margin: 0px;
    }
    .vendor-contact-page .form-horizontal .control-label{float:left;padding-right:5px}
    .wishlist-content .cart .cart-item-row td.qty {padding: 8px 0;}
    .wishlist-page .qty-dropdown.form-control{width: 100%;padding: 6px 2px;}
    .checkout-page .order-review-data .billing-info ,.checkout-page .order-review-data .shipping-info{margin-bottom:20px;}
    .checkout-page .order-review-data > div + div{margin-top:20px;display: inline-block;width: 100%;}
    .product-details-page .product-variant-list .product-variant-line {
        display: block;
    }
    .variant-overview .qq-upload-button {
        margin: 0 auto;
    }
    .product-reviews-page .form-group label,
    .email-a-friend-page .form-group label {
        text-align: left;
        float: left;
        padding-right: 5px;
    }
    .registration-page .gender-label,
    .registration-page .newsletter-label,
    .password-recovery-page .control-label,
    .account-page .gender-label,
    .account-page .newsletter-label {
        width: auto;
    }
    .shipment-details-page .panel-default,
    .return-request-page .panel-default,
    .private-messages-box .panel-default {
        overflow-x: auto;
    }
    .forum-search-box .btn.search-box-button {
        right: -5px;
    }
    .forum-search-page .forum-serach-input .checkbox,
    .my-product-reviews-list-page .review-content .review-text {
        text-align: center;
    }
    .account-page .form-group label,
    .new-comment .form-horizontal label {
        float: left;
        padding-right: 5px;
    }
    .checkout-attributes .row > div {
        margin-bottom: 5px;
    }
    .order-summary-content .coupon-box .discount-coupon-code,
    .order-summary-content .giftcard-box .gift-card-coupon-code {
        margin: 5px 0px 0px;
    }
    .shipment-overview .order-info-wrap {
        margin-bottom: 20px;
    }
    .vendor-page .review-item-info {
        align-items: center;
        flex-direction: column;
        gap: 5px;
    }
    .vendor-page .review-title,
    .vendor-page .review-content {
        text-align: center;
    }
}
@media (max-width:575.98px) {
    .shopping-cart-page .qty-dropdown.form-control {
        padding: 0px;
    }
    .cart-item-table .cart-item-row .qty.nobr {
        padding: 8px 0px;
    }
    .product-details-page .tier-prices .tier-prices-table thead th,.product-details-page .tier-prices .tier-prices-table tbody td{padding-left:12px;padding-right:12px;}
    .manufacturer-grid .item-box .picture a img,.category-grid .item-box .picture a img,.sub-category-grid .item-box .picture a img{width:100%;}
    .product-category-item .picture .title a{width:215px;padding:22px 0 18px;font-size:18px;}
    .product-category-item .picture .title{width:215px;}
    .product-details-page .nav-tabs li.active a::after{border:none;}
    .product-details-page .nav-tabs li{float:left;width:100%;}
    .product-details-page .nav-tabs li a{margin-right:0px;}
    .compare-products-page .panel.panel-default{overflow-x:scroll;}
    .ui-dialog{width:300px !important;}
    .product-details-page .nav-tabs > li > a{padding:15px 20px;}
}
@media (max-width:480px) {
    .forum-topic-page .topic-header{clear:both;}
    .product-filters .filter-content .nav > li > a{width:100%;}
    .product-details-page .product-reviews-overview .product-no-reviews{width:100%;}
    .order-details-page .products .panel panel-default{overflow-x:hidden !important;}
    .header-top-right ul li a{margin:0;}
    .lt-ie9 .box-shadow-wrapper,.box-shadow-wrapper{width:100%;margin-right:0px;}
    .block.block-account-navigation.well.box-shadow-wrapper{float:left;width:100%;margin-bottom:30px;}
    .product-details-page .overview-buttons .add-to-wishlist-button,.product-details-page .overview-buttons .add-to-compare-list-button{margin-right:0px;}
    .profile-page .nav-tabs > li > a{padding:15px 14px;}
    .google-authenticator-conteiner .qr-code{
        width: 100%;
        display: block;
        text-align: center;
        margin: 10px 0px;
    }
    .google-authenticator-conteiner .manual-code {
        display: block;
        width: 100%;
    }
    .reward-points-page .panel.panel-default{overflow-x:scroll;}
}
@media (max-width:375px){
     .form-control.password-w {width:94%;}
     .login-page .checkout-as-guest-or-register-block .buttons.buttons{padding:0px;}
     .profile-page .profile-stats > ul{ padding-left:25px;}
     .payment-info .info table tbody tr td {width:100%;}
     .product-details-page .variant-overview{ width:100%; margin:0; padding:0; border:none;}
     .private-message-view-page .view-message .options .btn{margin-bottom:10px;}
     .forum-topic-page .title .manage{float:left;}
     .forum-topic-page .title .manage a {color:#B0B0B0;}
     .forums-main-page .forums-main-header .current-time{ margin-bottom:15px;clear:both;}
     .product-review-item .product-review-helpfulness .result{ float:left;}
     .payment-info .info #ExpireMonth,.payment-info .info #ExpireYear{ margin-bottom:10px;}
     .order-progress .nav > li > a > .progress-icon{padding:10px;margin-right:10px;}
     .lt-ie11 .customer-info-page .date-birth-text .field-validation-error,.eq-ie11 .customer-info-page .date-birth-text .field-validation-error,.lt-ie11 .registration-page .date-birth-text .field-validation-error,.eq-ie11 .registration-page .date-birth-text .field-validation-error{margin-left:0px;}
     #opc-confirm_order .product-wrapper .product-content-wrapper .product-name-sku{float: left;width: 60%;}
     .payment-info .dropdownlists , .payment-info .info input , .payment-info .info select , .payment-info .valid {margin:0;}
     .payment-info #PurchaseOrderNumber, .payment-info #CreditCardType, .payment-info #CardholderName, .payment-info #CardNumber, .payment-info #CardCode, #opc-payment_info #CreditCardType, #opc-payment_info #CardholderName, #opc-payment_info #CardNumber, #opc-payment_info #CardCode{ margin-bottom:10px;}
     .search-input label{ padding-bottom:5px;}
     #products-pagesize{width:100%;}
     .footer-disclaimer,.poweredby{display:block;text-align:center;}
     .news-comment .comment-info,.news-comment .comment-content {padding:0}
     .topic-header {float:none;clear:both;}
     .topic-header .topic-options, .topic-footer .topic-options{float:none;text-align:center;}
     .forum-topic-page .post-info .manage{text-align:center;}
     .posts .post-info{text-align:center;}
     .forum-topic-page .post-info .user-info .user-stats label{float:none;}
     .send-pm-box{float:none;display:inline;}
     .move-topic-wrapper .form-group  label{text-align:left;}
     .product-details-page .thumb-popup-link{width:90px;height:90px;}
     .poll-options li{margin:0px;}
     .remove-from-cart .visible-xs,.add-to-cart .visible-xs{display:block !important;}
     .downloadable-products-page .panel.panel-default{overflow-x:scroll;}
     #newsletter-subscribe-block #newsletter-subscribe-button,.product-details-page .add-to-cart-panel .quan{margin-bottom:15px;}
     .common-buttons.pull-right{float:none;width:100%;}
     .checkout-page .prices-alignment-right,.shopping-cart-page .prices-alignment-right,.wishlist-page .prices-alignment-right{text-align:center !important;}
     .subtotal.nobr.end.prices-alignment-right{white-space:normal !important;}
     .header-menu .main-menu.goToTop .navbar.navbar-inverse .nav.navbar-nav,.header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav{overflow-y:scroll;max-height:400px;}
     .product-details-page .variant-picture img{width:100%;}
     .title.sub-title strong{padding:15px;}
     .method-list .payment-details{width:170px;}
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .order-summary-content .coupon-box .message, .order-summary-content .giftcard-box .message{float:left!important;margin-top:5px!important;overflow:hidden!important;}
    .newsletter-subscribe-block .form-group, .newsletter-subscribe-block .buttons{float:left;}
    }
    .pager li {margin-bottom:5px;}
    .private-messages-page .nav-tabs > li > a{padding:15px 25px;}
}
@media (min-width:376px){
    .private-messages-page .nav-tabs > li > a{padding:15px 35px;}
}
@media (min-width:576px) and (max-width:767.98px) {
    .product-details-page .nav-tabs > li > a{padding:15px 10px;}
    .item-box {
        width: 50%;
    }
    .owl-carousel .item-box {
        width: inherit;
    }
    .item-box:nth-child(2n+1) {
        clear: both;
    }
}
@media (min-width:768px) and (max-width:991.98px) { 
    .responsive{display:none;}
    .new-wrapper.register-block{margin-bottom:20px;}
    .forum-search-text.form-control {width:85%;margin-top:1px;margin-right:0px;}
    .forum-edit-page .options-checkbox {padding-left:5px;}
    .forum-topic-page .post-info{width:30%;}
    .forum-topic-page .post-content {width:69%;}
    .cart-total .nobr{white-space: inherit !important;}
    .entity-body.category-body.product-link li {width:47%;}
    .sitemap-page .entity .category-body ul{padding:0; margin:0px 10px;}
    .forum-edit-page .checkbox.options-checkbox.checkbox input[type="checkbox"]{ margin-left:-5px; position:relative;}
    .eu-cookie-bar-notification{ margin-left:0;}
    #billing-address-select,#shipping-address-select{margin-bottom:20px; width:100%;}
    .navbar.navbar-inverse.goToTop{position:fixed;top:0px !important;}
    .master-wrapper-page.container{margin-top:15px;}
    #newsletter-email {font-size: 13px!important;}
    #products-pagesize{width:100%;}
    .newsletter-subscribe-block {display: inline-block;width: auto;}
    .attributes .btn-dropdown.form-control{width:100%;}
    .account-page .page-title,.order-details-page .page-title,.shipment-details-page .page-title,.private-messages-page .page-title,.private-message-view-page .page-title{text-align:center;}
    .forums-main-page .forums-main-header .current-time{padding-right:30px;padding-top:10px;}
    #newsletter-subscribe-block #newsletter-email{float: left;width: 155px;}
    .product-details-page .gallery .picture img{width:auto;}
    .header-lower .search-box .search-nav{width:220px;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a:hover::before{top:43px;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu.sub-menusublist.first-level li.dropdown:hover .dropdown-menu.sub-menusublist.first-level,.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu.sub-menusublist.first-level li .dropdown-menu.sub-menusublist.first-level li.dropdown:hover .dropdown-menu.sub-menusublist.first-level{top:3px;}
    .owl-nav{top:30%;}
    .owl-prev{left:-70px;}
    .owl-next{right:-70px;}
    .news-list-homepage .owl-nav{top:50%;}
    .home-page .news-list-homepage .view-all a{margin-top:25px;}
    .footer-middle .contact-wrapper p{width:80%;}
    .footer-middle .title strong{font-size:16px;}
    .footer-middle .title,.footer-middle .contact-wrapper div{margin-bottom:15px;}
    .flyout-main-wrapper .flyout-cart-wrapper{left:-60px;}
    .side-content {clear: both;}
    .listbox, .lt-ie9 .listbox {display: none;}
    .block.block-newsletter .listbox {display: block;}
    .sidebar .title {background: url("../Themes/SimplexTheme/Content/images/toggle-down-arrow.png") no-repeat var(--red) right center;font-size: 16px;padding: 15px;cursor: pointer;border-bottom: 1px solid #ddd;box-shadow: 0 -3px 5px #aaaaaa;-moz-box-shadow: 0 -3px 5px #aaa;-web-box-shadow: 0 -3px 5px #aaaaaa;padding-right: 60px;}
    .sidebar .title.arrow-up-down {background: url("../Themes/SimplexTheme/Content/images/toggle-up-arrow.png") no-repeat var(--red) right center;}
    .box-shadow-wrapper {width: 49%;margin-right: 2%;}
    .lt-ie9 .box-shadow-wrapper {width: 48%;margin-right: 2%;}
    .box-shadow-wrapper:nth-child(2n) {margin-right: 0px;}
    .box-shadow-wrapper .listbox {border-top: none;}
    .block.block-account-navigation.well.box-shadow-wrapper {float: none;margin: 0 auto 30px;}
    .category-grid .item-box .category-item{margin-bottom:30px;}
    .product-details-page .variant-overview .product-share-button a, .product-details-page .variant-overview .delivery, .product-details-page .variant-overview .add-to-cart, .product-details-page .variant-overview .delivery-date, .product-details-page .variant-overview .product-reviews-overview .product-review-links, .product-details-page .variant-overview .product-reviews-overview .product-review-box, .product-details-page .variant-overview .product-reviews-overview .product-no-reviews{text-align:left;}
    .order-totals{float:none !important;clear:both;}
    .footer-lower .payment-method ul li{margin-bottom:5px;}
    .order-details-area .row > div:nth-child(2n+1){clear: both;margin-bottom: 20px;}
    .product-details-page .nav-tabs > li > a{padding:15px;}
	.wishlist-page .qty-dropdown.form-control{width:100%;padding: 6px 2px;}
    .product-details-page .attributes select,
    .product-details-page .attributes input,
    .product-details-page .attributes textarea,
    .product-details-page .giftcard input,
    .product-details-page .giftcard .message {
        max-width: 80%;
    }
    .product-details-page .overview .giftcard input,
    .product-details-page .overview .giftcard .message {
        margin: 0 auto;
    }

}
@media (min-width:768px) {
    .order-details-page .section .panel.panel-default table .a-left.vendor .td-title {
        display: none
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu {
        border-radius: 0px;
        min-width: 200px;
        padding: 5px 0px 0px;
        background: #f9f9f9;
        border: none;
        width: 200px;
        opacity: 0;
        display: block;
        transition: all 300ms ease-in-out 0s;
        -webkit-transition: all 300ms ease-in-out 0s;
        -moz-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        visibility: hidden;
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
        left: 0px;
        opacity: 1;
        visibility: visible;
    }

    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu.sub-menusublist.first-level li.dropdown:hover > .dropdown-menu.sub-menusublist.first-level {
        display: block;
        top: 13px;
        left: 197px;
        opacity: 1;
        visibility: visible;
    }

    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu.sub-menusublist.first-level li .dropdown-menu.sub-menusublist.first-level li.dropdown:hover > .dropdown-menu.sub-menusublist.first-level {
        display: block;
        top: 13px;
        left: 197px;
        opacity: 1;
        visibility: visible;
    }
    .side-content .product-grid .item-box:nth-child(3n+1) {
        clear: both;
    }
    /*** ESTIMATE SHIPPING POPUP ***/

    .estimate-shipping-popup {
        padding: 25px;
    }
    .product-review-list .review-title {
        width:80%;
    }
    .product-review-item .product-review-box {
        float: right;
    }
    .product-review-list .product-review-item .title-avatar {
        float: left;
    }
    .product-review-item .review-text {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .product-review-item .avatar {
        display: table-cell;
        vertical-align: top;
        width: 120px;
        padding:0;
    }
        .product-review-item .avatar img {
            max-width: 100%;
        }
        .product-review-item .avatar + .text-body {
            padding: 0 0 0 20px;
        }
    .product-review-item .text-body {
        display: table-cell;
        vertical-align: top;
    }
    .estimate-shipping-row-item > div:last-child {
        padding: 0;
    }
    .checkout-page .order-review-data .billing-info ,.checkout-page .order-review-data .shipping-info{margin-bottom:40px;}
    .product-details-page .variant-overview {
        width: calc(100% - 245px);
    }
    .variant-overview {
        margin: 0 0 0 25px;
    }
    .vendor-contact-page .field-validation-error,
    .product-reviews-page .field-validation-error,
    .email-a-friend-page .field-validation-error,
    .registration-page .field-validation-error,
    .password-recovery-page .field-validation-error,
    .customer-info-page .field-validation-error,
    .address-edit-page .field-validation-error,
    .change-password-page .field-validation-error,
    .vendorinfo-page .field-validation-error,
    .checkout-page .field-validation-error,
    .contact-page .field-validation-error,
    .new-comment .field-validation-error,
    .apply-vendor-page .field-validation-error {
        margin-left: 5px;
    }
    .address-list-page .address-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 0;
    }
    .address-list-page .customer-account-address {
        display: flex;
        flex-direction: column;
    }
    .address-list-page .address-list .address-item {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .address-list-page .address-item .buttons {
        display: flex;
        align-items: end;
        justify-content: center;
        flex-direction: row;
        flex-grow: 1;
    }
    .address-list-page .add-button {
        margin-top: 50px;
    }
    .checkout-attributes .row > div {
        margin-bottom: 15px;
    }
    .order-summary-content .coupon-box .discount-coupon-code, 
    .order-summary-content .giftcard-box .gift-card-coupon-code {
        margin: 15px 0px 0px;
    }
    .address-item .address-list-page {
        min-height: 60px;
    }
    .write-review .forms-label,
    .review-rating .control-label {
        text-align: right;
    }
}
/* Tablet: disable hover dropdown inside expanded hamburger menu.
   This block is placed AFTER the @media (min-width:768px) hover-enable block
   so it wins the cascade for 768-991px viewports. */
@media (min-width:768px) and (max-width:991.98px) {
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}
@media (min-width:992px) and (max-width:1199.98px){
    /* Prevent text wrapping in menu items */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav li a{white-space:nowrap;}
    /* Fix dropdown arrow positioning to prevent overlap with text */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown{position:relative !important;}
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > .fa-angle-down.visible-xs,
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > span.fa-angle-down{
        display:none !important;
    }
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a.dropdown-toggle{padding-right:35px !important;}
    /* Enable dropdown menu on hover */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover > .dropdown-menu{
        display:block !important;
    }
    .lt-1024 body .responsive {display: none;}
    .lt-1024 body .header-links{margin-top:0px;}
    .lt-1024 body .navbar.navbar-inverse.goToTop{position:fixed;top:0px !important;}
    .lt-1024 body .master-wrapper-page.container{margin-top:15px;}
    .lt-ie11 .login-page .checkbox input[type="checkbox"]{ margin-left:15px;}
    .compare-products-table{overflow-x: scroll;}
    .cart-total .nobr{white-space: inherit !important;}
    .entity-body.category-body.product-link li { width:47%;}
    .sitemap-page .entity .category-body ul{padding:0; margin:0px 10px;}
    .item-box, .product-grid .item-box{height:480px;}
    .product-tag-page .product-grid .item-box,.vendor-page .product-grid .item-box,.manufacturer-page .product-grid .item-box,.category-page .product-grid .item-box{margin-bottom:20px;}
    #newsletter-subscribe-block #newsletter-email{width:200px;}
    .main-menu.goToTop .navbar.navbar-inverse.category-menu{width:940px !important;}
    .product-details-page .product-reviews-overview .product-review-box{margin-right:15px;}
    .product-details-page .product-reviews-overview .product-no-reviews{margin-top:10px;}
    .product-details-page .customer-entered-price .enter-price-label{width:28%;padding-top:0px;}
    .flyout-main-wrapper .flyout-cart-wrapper{left:10px;}
    #index-page .slider-wrapper.theme-custom{max-width:100%;}
    .viewmode-icon.grid{margin-right:-5px;}
    .viewmode-icon{display:inline-block;float:none;}
    .grid-list-icon{width:100%;text-align:right;}
    .block.block-recently-viewed-products.well.box-shadow-wrapper .product-name{width:58%;}
    .item-box .rating::after{right:3%;}
    .item-box .rating::before{left:3%;}
    .product-details-page .thumb-popup-link{height:90px;width:90px;}
    .product-details-page .variant-overview{width:50%;}
    .product-details-page .variant-overview .add-to-cart{margin-bottom:15px;}
    #opc-confirm_order #confirm-order-buttons-container .confirm-order-next-step-button{background:var(--red) url("../Themes/SimplexTheme/Content/images/checkout-order-confrim.png") no-repeat scroll 60px center;width:280px;}
    #opc-confirm_order #confirm-order-buttons-container .confirm-order-next-step-button:hover{background:var(--grey-black) url("../Themes/SimplexTheme/Content/images/checkout-order-confrim.png") no-repeat scroll 60px center;}
   .bottom-box-shadow {height: 30px;}
   .wishlist-page .qty-dropdown.form-control{width:80%;}
   .owl-carousel .owl-nav button.owl-prev {
        left: -10px;
        background: #fff url(../Themes/SimplexTheme/Content/images/previous-arrow.png) no-repeat scroll 10px 15px;
    }
    .owl-carousel .owl-nav button.owl-next {
        right: -10px;
        background: #fff url(../Themes/SimplexTheme/Content/images/next-arrow.png) no-repeat 52px 15px;
    }

    /* Main Slider Navigation - Responsive Fix */
    .slider-container .owl-nav button.owl-prev {
        left: 10px !important;
    }
    
    .slider-container .owl-nav button.owl-next {
        right: 10px !important;
    }
    .news-list-homepage #home-news-slider .news-date,
    .news-list-homepage #home-news-slider .news-details {
        padding: 0 70px;
    }
}
@media (min-width:992px) {
    .checkout-page .terms-of-service {
        padding-bottom: 20px;
        justify-content: end;
    }
    .product-details-page .picture-gallery .picture::before {
        padding-top: 100%;
    }
    .product-details-page .customer-entered-price .enter-price-label {
        padding-top: 5px;
    }
    /* Restore center alignment for desktop where menu items fit comfortably */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav {
        justify-content: center;
    }
}
@media (min-width:1200px) and (max-width:1399px) {
    .owl-carousel .owl-nav button.owl-prev {
        left: -15px;
        background: #fff url(../Themes/SimplexTheme/Content/images/previous-arrow.png) no-repeat scroll 10px 15px;
    }
    .owl-carousel .owl-nav button.owl-next {
        right: -15px;
        background: #fff url(../Themes/SimplexTheme/Content/images/next-arrow.png) no-repeat 52px 15px;
    }

    /* Main Slider Navigation - Responsive Fix for Large Screens */
    .slider-container .owl-nav button.owl-prev {
        left: 15px !important;
    }
    
    .slider-container .owl-nav button.owl-next {
        right: 15px !important;
    }
    .news-list-homepage #home-news-slider .news-date,
    .news-list-homepage #home-news-slider .news-details {
        padding: 0 70px;
    }
}
@media (min-width:1200px){
   #customerTaxType, #customerCurrency, #customerlanguage{padding:5px;margin-top:10px;}
   .checkout-attributes .row>div:nth-child(4n+1) {clear: both;}
   .wishlist-page .qty-dropdown.form-control{width:60%;}
}

/* ============================================================================
 * RESPONSIVE HEADER PADDING ADJUSTMENTS
 * Reduce header padding on mobile and tablet devices (500px-1199px)
 * Desktop (1200px+) keeps default padding
 * ============================================================================ */

/* Mobile (500px-767px) - Minimal padding for small screens */
@media (min-width: 500px) and (max-width: 767.98px) {
    .header {
        padding: 15px 20px !important;
    }
}

/* Tablet (768px-991px) - Moderate padding for medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    .header {
        padding: 18px 35px !important;
    }
}

/* Small Desktop (992px-1199px) - Slightly reduced padding */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header {
        padding: 20px 50px !important;
    }
}

/* ============================================================================
 * HOMEPAGE BLOG SECTION STYLING
 * Responsive blog display with carousel and hover effects
 * ============================================================================ */

/* Blog items container - add horizontal padding */
.blog-list-homepage .blog-items {
  padding: 0 55px;
}

/* Blog item styling - match news items with 3:4 aspect ratio */
.blog-list-homepage .item {
  padding: 0px;
  background: #fff;
  border: 0px solid #e5e5e5;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;
}

/* Blog head - HIDDEN */
.blog-list-homepage .blog-head {
  display: none;
}

/* Blog title styling */
.blog-list-homepage .blog-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.blog-list-homepage .blog-title:hover {
  color: #4ab2f1;
}

/* Blog date styling - HIDDEN */
.blog-list-homepage .blog-date {
  display: none;
}

/* Blog details content */
.blog-list-homepage .blog-details {
  clear: both;
  line-height: 24px;
  margin: 0;
  padding: 0;
  color: #666;
  flex: 1;
  overflow: visible;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

/* Responsive images in blog homepage - MAINTAIN ORIGINAL ASPECT RATIOS */
.blog-list-homepage .blog-details img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 10px auto;
  object-fit: contain;
}

/* Blog button styling - hidden by default, shows on hover over .blog-details */
.blog-list-homepage .blog-button {
  padding: 15px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* Show blog button on item hover */
.blog-list-homepage .item:hover .blog-button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Blog button link styling */
.blog-list-homepage .blog-button .read-more {
  display: inline-block;
  padding: 10px 20px;
  background: var(--grey-black);
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.blog-list-homepage .blog-button .read-more:hover {
  background: var(--grey-black);
  opacity: 0.8;
}

/* View all button - HIDDEN */
.blog-list-homepage .view-all {
  display: none;
}

/* Blog navigation arrows - positioned absolutely at left/right edges */
#home-blog-slider.owl-carousel .owl-nav button.owl-prev,
.blog-list-homepage .home-blog-slider .owl-nav button.owl-prev {
    position: absolute !important;
    left: -75px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

#home-blog-slider.owl-carousel .owl-nav button.owl-next,
.blog-list-homepage .home-blog-slider .owl-nav button.owl-next {
    position: absolute !important;
    right: -75px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

/* Responsive navigation positioning for different screen widths */

/* Large screens (1400px+) - furthest outside */
@media (min-width: 1400px) {
    #home-blog-slider.owl-carousel .owl-nav button.owl-prev,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-prev {
        left: -75px !important;
    }

    #home-blog-slider.owl-carousel .owl-nav button.owl-next,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-next {
        right: -75px !important;
    }
}

/* Desktop (1200px-1399px) - moderate outside positioning */
@media (min-width: 1200px) and (max-width: 1399px) {
    #home-blog-slider.owl-carousel .owl-nav button.owl-prev,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-prev {
        left: -55px !important;
    }

    #home-blog-slider.owl-carousel .owl-nav button.owl-next,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-next {
        right: -55px !important;
    }
}

/* Tablet (992px-1199px) - closer positioning */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #home-blog-slider.owl-carousel .owl-nav button.owl-prev,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-prev {
        left: -40px !important;
    }

    #home-blog-slider.owl-carousel .owl-nav button.owl-next,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-next {
        right: -40px !important;
    }
}

/* Small tablet and mobile (<992px) - at container edges */
@media (max-width: 991.98px) {
    #home-blog-slider.owl-carousel .owl-nav button.owl-prev,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-prev {
        left: 0 !important;
    }

    #home-blog-slider.owl-carousel .owl-nav button.owl-next,
    .blog-list-homepage .home-blog-slider .owl-nav button.owl-next {
        right: 0 !important;
    }
}

/* ========================================
   BLOG LIST PAGE (.html-blog-page) STYLING
   Match homepage blog styling with hover effects
   ======================================== */

/* Hide blog-head, blog-date, tags-list, and comments-info */
.html-blog-page .blog-posts .post .post-head,
.html-blog-page .blog-posts .post .post-date,
.html-blog-page .blog-posts .post .tags-list,
.html-blog-page .blog-posts .post .comments-info {
  display: none;
}

/* Blog item styling - ensure proper structure for hover effects */
.html-blog-page .blog-posts .post {
  position: relative;
  overflow: hidden;
}

/* Blog button styling - hidden by default, shows on hover */
.html-blog-page .blog-posts .post .blog-button {
  padding: 15px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* Show blog button on item hover */
.html-blog-page .blog-posts .post:hover .blog-button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Blog button link styling - match homepage styling */
.html-blog-page .blog-posts .post .blog-button .read-more {
  display: inline-block;
  padding: 10px 20px;
  background: var(--grey-black);
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.html-blog-page .blog-posts .post .blog-button .read-more:hover {
  background: var(--grey-black);
  opacity: 0.8;
}

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
}

/* Fix newsletter - center and align horizontally */
@media (max-width: 767.98px) {
    .newsletter-subscribe-block {
        text-align: center;
    }
    #newsletter-subscribe-block {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
    }
    #newsletter-subscribe-block #newsletter-email {
        width: 180px !important;
        height: 40px !important;
        margin: 0 !important;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    #newsletter-subscribe-button {
        height: 40px !important;
        margin: 0 !important;
        white-space: nowrap;
        box-sizing: border-box;
    }
}
/* Grouped Flyout Shopping Cart Styles - Simplex Theme Color Scheme */

/* Simplex Color Variables */
:root {
  --simplex-red: #ea5648;
  --simplex-dark-red: #ca3628;
  --simplex-grey-black: #333333;
  --simplex-light-grey: #f9f9f9;
}

/* Professional Flyout Container - Enhanced Visual Hierarchy */
.flyout-cart-grouped {
  position: absolute;
  width: 480px;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  z-index: 1060;
  top: 100%;
  right: 0;
  margin-top: 0px;
  overflow: hidden;
  font-family: var(--font-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.flyout-cart-grouped-shopping-cart {
  font-size: 13px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #ffffff;
}

/* Professional Flyout Header - Simplex Typography Standards */
.flyout-cart-header {
  display: grid;
  grid-template-columns: 36px 1fr 55px 85px; /* Increased qty and amount columns */
  padding: 12px 16px;
  font: 600 14px var(--font-default);
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
  border-bottom: 2px solid #e9ecef;
  border-radius: 6px 6px 0 0;
  align-items: center;
  gap: 8px;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flyout-cart-header-product a {
  color: var(--simplex-red);
  text-decoration: none;
  font-weight: bold;
  font-family: var(--font-default);
  font-size: 14px;
}

.flyout-cart-header-product a:hover {
  color: var(--simplex-dark-red);
  text-decoration: none;
}

.flyout-cart-header-qty {
  text-align: center;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-default);
  text-transform: uppercase;
}

.flyout-cart-header-amount {
  text-align: right;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-default);
  text-transform: uppercase;
}

.flyout-cart-header-spacer {
  /* Empty spacer to align with image column */
}

/* Clean empty cart styling - Simplex Standards */
.flyout-cart-empty-cart {
  padding: 24px;
  text-align: center;
  color: #666;
  font-size: 14px;
  font-weight: normal;
  font-family: var(--font-default);
}

/* Professional Product Grouping - Enhanced Spacing */
.flyout-cart-grouped-items {
  padding: 0;
  background: #fff;
}

.flyout-cart-product-group {
  border-bottom: 2px solid #e9ecef;
  background: #fff;
  transition: background-color 0.1s ease;
}

.flyout-cart-product-group:hover {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.flyout-cart-product-group:last-child {
  border-bottom: none;
}

/* Professional Product Header - Simplex Typography Standards */
.flyout-cart-product-header {
  display: grid;
  grid-template-columns: 36px 1fr 55px 85px; /* Increased qty and amount columns */
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f2f4f5 100%);
  border-bottom: 1px solid #dee2e6;
  align-items: center;
  font: 500 14px var(--font-default);
  gap: 8px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.flyout-cart-product-name {
  color: #444;
  font-weight: 600;
  font-family: var(--font-default);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.3;
}

.flyout-cart-product-name .price {
  color: var(--simplex-grey-black);
  font-weight: 600;
  font-family: var(--font-default);
  font-size: 14px;
}

.flyout-cart-product-qty {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-default);
  color: #777;
}

.flyout-cart-product-amount {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-default);
  color: var(--simplex-grey-black);
}

/* Professional Variants Container - Enhanced Visual Hierarchy */
.flyout-cart-variants-container {
  background: linear-gradient(135deg, #fafbfc 0%, #f5f7f8 100%);
  border-top: 1px solid #dee2e6;
  border-left: 3px solid var(--simplex-red);
  box-shadow: inset 2px 0 4px rgba(74, 178, 241, 0.06);
}

/* Professional Variant Rows - Simplex Typography Standards */
.flyout-cart-variant-row {
  display: grid;
  grid-template-columns: 36px 1fr 55px 85px; /* Increased qty and amount columns */
  align-items: start;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid #e9ecef;
  gap: 8px;
  min-height: 44px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(250, 251, 252, 0.9) 100%
  );
  transition: background-color 0.1s ease;
}

.flyout-cart-variant-row:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 249, 250, 1) 100%
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.flyout-cart-variant-row:last-child {
  border-bottom: none;
  border-radius: 0 0 0 3px;
}

/* Professional Variant Image - Enhanced Visual Design */
.flyout-cart-variant-image {
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f2f4f5 100%);
  border: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.1s ease;
}

.flyout-cart-variant-image:hover {
  transform: scale(1.02);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flyout-cart-variant-image img {
  width: 23px;
  height: 30px;
  object-fit: contain;
  border-radius: 3px;
}

/* Variant info with color/pack and size breakdown - Simplex Standards */
.flyout-cart-variant-info {
  color: #555;
  font-size: 13px;
  line-height: 1.5;
  padding-right: 10px;
}

/* Professional Color and Pack Info - Simplex Typography Standards */
.flyout-cart-color-pack-line {
  color: #343a40;
  font: 700 13px var(--font-default);
  margin-bottom: 2px;
  line-height: 1.3;
  height: 16px;
  display: flex;
  align-items: center;
}

.pack-info {
  color: var(--simplex-grey-black);
  font: 600 12px var(--font-default);
  margin-left: 6px;
  background: linear-gradient(
    135deg,
    rgba(74, 178, 241, 0.12) 0%,
    rgba(74, 178, 241, 0.08) 100%
  );
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(74, 178, 241, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Professional Size Breakdown - Simplex Typography Standards */
.flyout-cart-size-breakdown-line {
  margin-left: 12px;
  color: #495057;
  font: 500 12px var(--font-default);
  line-height: 1.4;
  margin-top: 2px;
  display: block;
  word-wrap: break-word; /* Allow wrapping if too long */
  overflow-wrap: break-word; /* Modern browsers */
}

/* Mode-specific styling */
.flyout-cart-pack-mode .flyout-cart-size-breakdown-line {
  font-weight: 400;
}

.flyout-cart-manual-mode .flyout-cart-size-breakdown-line {
  font-weight: 400;
}

/* Professional Quantity Column - Simplex Typography Standards */
.flyout-cart-variant-qty {
  text-align: center;
  font: 600 13px var(--font-default);
  color: #495057;
  align-self: start;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  background: linear-gradient(
    135deg,
    rgba(74, 178, 241, 0.08) 0%,
    rgba(74, 178, 241, 0.05) 100%
  );
  border-radius: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(74, 178, 241, 0.15);
  letter-spacing: 0.2px;
}

/* Professional Amount Column - Simplex Typography Standards */
.flyout-cart-variant-amount {
  text-align: right;
  font: 600 13px var(--font-default);
  color: var(--simplex-grey-black);
  align-self: start;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 18px;
  background: linear-gradient(
    135deg,
    rgba(76, 177, 124, 0.08) 0%,
    rgba(76, 177, 124, 0.05) 100%
  );
  border-radius: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(76, 177, 124, 0.15);
  letter-spacing: 0.2px;
}

/* Professional Flyout Footer - Simplex Typography Standards */
.flyout-cart-footer {
  display: grid;
  grid-template-columns: 36px 1fr 55px 85px; /* Increased qty and amount columns */
  padding: 16px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
  border-top: 2px solid #e9ecef;
  border-radius: 0 0 6px 6px;
  align-items: center;
  font-size: 14px;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.flyout-cart-subtotal-container {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  justify-self: end;
  width: fit-content;
  max-width: 80px;
}

/* Subtotal label removed - now showing amount only */

.flyout-cart-subtotal-amount {
  font-weight: 700;
  color: var(--simplex-grey-black);
  font-size: 14px;
  font-family: var(--font-default);
  white-space: nowrap;
}

.flyout-cart-footer-buttons {
  grid-column: 2;
  display: flex;
  gap: 0.625rem;
  justify-content: flex-start;
}

.flyout-cart-product-spacer {
  /* Empty spacer to align with variant image column */
}

/* View Cart Button - TRUE nopCommerce 4.80 SEARCH Button Standards */
.flyout-cart-button {
  /* nopCommerce 4.80 SEARCH Button Typography */
  font-family: var(--font-default);
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  text-transform: uppercase;

  /* nopCommerce 4.80 SEARCH Button Sizing */
  height: 36px;
  min-height: 36px;
  padding: 0 15px;
  box-sizing: border-box;

  /* nopCommerce 4.80 SEARCH Button Visual Standards */
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;

  /* nopCommerce 4.80 SEARCH Button Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* nopCommerce 4.80 SEARCH Button Colors */
  background-color: var(--simplex-grey-black);
  color: #fff;

  /* Simple transition like SEARCH button */
  transition: background-color 0.2s ease;
}

.flyout-cart-button:hover,
.flyout-cart-button:focus {
  background-color: #222222;
  color: #fff;
  text-decoration: none;
  outline: none;
}

.flyout-cart-button:active {
  background-color: #222222;
  color: #fff;
}

/* Checkout Button - TRUE nopCommerce 4.80 SEARCH Button Standards with Success Color */
.flyout-cart-checkout-button {
  /* nopCommerce 4.80 SEARCH Button Typography */
  font-family: var(--font-default);
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  text-transform: uppercase;

  /* nopCommerce 4.80 SEARCH Button Sizing */
  height: 36px;
  min-height: 36px;
  padding: 0 15px;
  box-sizing: border-box;

  /* nopCommerce 4.80 SEARCH Button Visual Standards */
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;

  /* nopCommerce 4.80 SEARCH Button Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* nopCommerce 4.80 SEARCH Button Colors - Success Green */
  background-color: var(--simplex-red);
  color: #fff;

  /* Simple transition like SEARCH button */
  transition: background-color 0.2s ease;
}

.flyout-cart-checkout-button:hover,
.flyout-cart-checkout-button:focus {
  background-color: #3a8b63;
  color: #fff;
  text-decoration: none;
  outline: none;
}

.flyout-cart-checkout-button:active {
  background-color: #2d6b4d;
  color: #fff;
}

/* Clean scrollbar */
.flyout-cart-grouped-shopping-cart::-webkit-scrollbar {
  width: 6px;
}

.flyout-cart-grouped-shopping-cart::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.flyout-cart-grouped-shopping-cart::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 3px;
}

.flyout-cart-grouped-shopping-cart::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* ====================================================================
   OLD RESPONSIVE STYLES - REPLACED BY flyout-cart-responsive.css
   These styles have been moved to a dedicated responsive CSS file
   for better organization and comprehensive multi-resolution support.
   ==================================================================== */

/* @media (max-width: 576px) { ... } - See flyout-cart-responsive.css */

/* === Color Variant Unavailability (deleted attribute value) === */
.flyout-cart-variant-row.color-variant-unavailable {
    opacity: 0.55;
    border-left: 3px solid #e8a317;
    background-color: #fffdf5;
}
.color-unavailable-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #b8860b;
    background: #fff8e1;
    border: 1px solid #f5c842;
    border-radius: 3px;
    padding: 1px 6px;
}
/* Placeholder shown while the flyout body is being fetched.
   Language-neutral on purpose: the body arrives in well under a second for a normal
   cart, and a large B2B cart would otherwise stare at an empty panel. */
.flyout-cart-wrapper[data-flyout-state="loading"] {
  min-height: 90px;
}
.flyout-cart-loading {
  display: block;
  margin: 36px auto;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  animation: flyout-cart-spin 0.8s linear infinite;
}
@keyframes flyout-cart-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flyout-cart-loading { animation: none; }
}

/* ====================================================================
   ISOLATED FLYOUT CART BUTTON FIX - NOPCOMMERCE DEFAULT COLORS
   - Specifically targets flyout cart buttons only
   - Prevents conflicts with full cart styling
   - Uses high specificity selectors
   - Uses nopCommerce 4.80 default blue color scheme
   ==================================================================== */

/* nopCommerce Default Color Variables */
:root {
  --nop-primary-blue: #4ab2f1;
  --nop-dark-blue: #248ece;
  --simplex-red: #ea5648;
  --simplex-dark-red: #ca3628;
  --simplex-grey-black: #333333;
}

/* FLYOUT CART SPECIFIC SELECTORS ONLY - nopCommerce 4.80 Standards */
.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-button {
    /* Simplex Primary Button - VIEW CART */
    background: var(--simplex-grey-black, #333333) !important;
    color: #ffffff !important;
    border: 1px solid var(--simplex-grey-black, #333333) !important;
    border-radius: 0.25rem !important;
    
    /* Typography - Simplex Theme Standards */
/*    font-family: Garamond, Baskerville, Caslon, serif !important;*/
    font-size: 14px !important;
    font-weight: 400 !important;
    
    /* Layout */
    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;
    
    /* Clean Transition */
    transition: all 0.15s ease !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-button:hover {
    background: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-button:focus {
    outline: none !important;
    border-color: #222222 !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-button:active {
    background: #222222 !important;
    border-color: #222222 !important;
}

/* CHECKOUT BUTTON - nopCommerce 4.80 Standards */
.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button {
    /* Simplex Success Button - CHECKOUT */
    background: var(--simplex-red, #ea5648) !important;
    color: #ffffff !important;
    border: 1px solid var(--simplex-red, #ea5648) !important;
    border-radius: 0.25rem !important;
    
    /* Typography - Simplex Theme Standards */
    font-family: Garamond, Baskerville, Caslon, serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    
    /* Layout */
    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;
    
    /* Clean Transition */
    transition: all 0.15s ease !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button:hover {
    background: var(--simplex-dark-red, #ca3628) !important;
    border-color: var(--simplex-dark-red, #ca3628) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button:focus {
    outline: none !important;
    border-color: var(--simplex-dark-red, #ca3628) !important;
}

.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button:active {
    background: var(--simplex-dark-red, #ca3628) !important;
    border-color: var(--simplex-dark-red, #ca3628) !important;
}

/* ENSURE BUTTON CONTAINER LAYOUT */
.flyout-cart-grouped .flyout-cart-footer .flyout-cart-footer-buttons {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* FALLBACK FOR NON-GROUPED FLYOUT CART - nopCommerce 4.80 Standards */
.flyout-cart:not(.flyout-cart-grouped) .buttons .button-1.cart-button,
.flyout-cart:not(.flyout-cart-grouped) .buttons .button-1 {
    background: var(--simplex-grey-black, #333333) !important;
    color: #ffffff !important;
    border: 1px solid var(--simplex-grey-black, #333333) !important;
    border-radius: 0.25rem !important;
    font-family: Garamond, Baskerville, Caslon, serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 0.375rem 0.75rem !important;
    height: 2.25rem !important;
    transition: all 0.15s ease !important;
}

.flyout-cart:not(.flyout-cart-grouped) .buttons .button-1.cart-button:hover,
.flyout-cart:not(.flyout-cart-grouped) .buttons .button-1:hover {
    background: #222222 !important;
    border-color: #222222 !important;
}

/* ====================================================================
   RESPONSIVE ADJUSTMENTS - Moved to flyout-cart-responsive.css
   All responsive rules are now centralized in flyout-cart-responsive.css
   to prevent duplication and conflicts.
   ==================================================================== */

/* ENSURE NO CONFLICTS WITH FULL CART */
.full-cart-container .flyout-cart-button,
.full-cart-shopping-cart-grouped .flyout-cart-button,
.order-summary-content .flyout-cart-button {
    /* Prevent any styling conflicts with full cart */
    all: revert !important;
}
/* ====================================================================
   FLYOUT CART RESPONSIVE DESIGN FIX
   - Fixes display issues across mobile, tablet, and desktop resolutions
   - Prevents breaking/overflow in multi-resolution environments
   - Maintains SimplexTheme design standards
   ==================================================================== */

/* ====================================================================
   DESKTOP (992px+): Default Layout
   ==================================================================== */
@media (min-width: 992px) {
    .flyout-cart-grouped {
        position: absolute;
        width: 480px;
        max-width: 480px;
        right: 0;
        top: 100%;
        margin-top: 0;
    }
    
    /* Larger cart for bigger desktops to prevent truncation */
    @media (min-width: 1400px) {
        .flyout-cart-grouped {
            width: 580px;
            max-width: 580px;
        }
    }
    
    /* Ensure cart doesn't overflow viewport on smaller desktops */
    @media (max-width: 1199px) {
        .flyout-cart-grouped {
            width: 440px;
            max-width: 440px;
        }
    }
}

/* ====================================================================
   TABLET LANDSCAPE (768px-991px): Compact Layout
   ==================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart-grouped {
        position: absolute;
        width: 420px;
        max-width: calc(100vw - 40px);
        right: 10px;
        top: 100%;
        margin-top: 0;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    
    /* Adjust grid for tablet */
    .flyout-cart-header,
    .flyout-cart-product-header,
    .flyout-cart-variant-row,
    .flyout-cart-footer {
        grid-template-columns: 32px 1fr 50px 75px; /* Increased for better amount display */
        gap: 6px;
        padding: 8px 12px;
    }
    
    /* Reduce font sizes slightly */
    .flyout-cart-header {
        font-size: 13px;
    }
    
    .flyout-cart-header-qty,
    .flyout-cart-header-amount {
        font-size: 13px;
    }
    
    .flyout-cart-product-name,
    .flyout-cart-product-qty,
    .flyout-cart-product-amount {
        font-size: 13px;
    }
    
    .flyout-cart-variant-row {
        font-size: 12px;
        min-height: 40px;
    }
    
    .flyout-cart-variant-image {
        width: 28px;
        height: 28px;
    }
    
    .flyout-cart-variant-image img {
        width: 20px;
        height: 26px;
    }
    
    .flyout-cart-color-pack-line {
        font-size: 12px;
        height: 15px;
    }
    
    .pack-info {
        font-size: 11px;
        padding: 1px 5px;
    }
    
    .flyout-cart-size-breakdown-line {
        font-size: 11px;
        margin-left: 10px;
        /* No max-width - allow full text display on tablet */
    }
    
    .flyout-cart-variant-qty,
    .flyout-cart-variant-amount {
        font-size: 12px;
        height: 16px;
        padding: 2px 5px;
    }
    
    /* Buttons */
    .flyout-cart-button,
    .flyout-cart-checkout-button {
        height: 34px;
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }
    
    .flyout-cart-footer-buttons {
        gap: 8px;
    }
    
    .flyout-cart-subtotal-amount {
        font-size: 13px;
    }
}

/* ====================================================================
   TABLET PORTRAIT (577px-767px): Adapted Layout
   ==================================================================== */
@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart-grouped {
        position: absolute;
        width: 380px;
        max-width: calc(100vw - 30px);
        right: 15px;
        top: 100%;
        margin-top: 0;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    
    /* Adjust grid for small tablet */
    .flyout-cart-header,
    .flyout-cart-product-header,
    .flyout-cart-variant-row,
    .flyout-cart-footer {
        grid-template-columns: 30px 1fr 45px 70px; /* Increased amount column for readability */
        gap: 5px;
        padding: 7px 10px;
    }
    
    /* Reduce font sizes */
    .flyout-cart-header {
        font-size: 12px;
        padding: 10px 10px;
    }
    
    .flyout-cart-header-qty,
    .flyout-cart-header-amount {
        font-size: 12px;
    }
    
    .flyout-cart-product-name,
    .flyout-cart-product-qty,
    .flyout-cart-product-amount {
        font-size: 12px;
    }
    
    .flyout-cart-variant-row {
        font-size: 11px;
        min-height: 38px;
        padding: 8px 10px;
    }
    
    .flyout-cart-variant-image {
        width: 26px;
        height: 26px;
    }
    
    .flyout-cart-variant-image img {
        width: 19px;
        height: 25px;
    }
    
    .flyout-cart-color-pack-line {
        font-size: 11px;
        height: 14px;
    }
    
    .pack-info {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .flyout-cart-size-breakdown-line {
        font-size: 10px;
        margin-left: 8px;
        /* No max-width - allow full text display on small tablet */
    }
    
    .flyout-cart-variant-qty,
    .flyout-cart-variant-amount {
        font-size: 11px;
        height: 15px;
        padding: 2px 4px;
    }
    
    /* Buttons */
    .flyout-cart-button,
    .flyout-cart-checkout-button {
        height: 32px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
    
    .flyout-cart-footer {
        padding: 12px 10px;
    }
    
    .flyout-cart-footer-buttons {
        gap: 6px;
    }
    
    .flyout-cart-subtotal-amount {
        font-size: 12px;
    }
    
    .flyout-cart-subtotal-container {
        max-width: 60px;
    }
}

/* ====================================================================
   MOBILE (320px-576px): Full-Width Compact Layout
   ==================================================================== */
@media (max-width: 576px) {
    .flyout-cart-grouped {
        position: fixed !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 10px !important;
        left: 10px !important;
        top: 60px !important;
        margin: 0 !important;
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        z-index: 9999;
    }
    
    /* Mobile grid - very compact */
    .flyout-cart-header,
    .flyout-cart-product-header,
    .flyout-cart-variant-row,
    .flyout-cart-footer {
        grid-template-columns: 28px 1fr 38px 55px;
        gap: 4px;
        padding: 6px 8px;
    }
    
    .flyout-cart-grouped-shopping-cart {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
    
    /* Header */
    .flyout-cart-header {
        font-size: 11px;
        padding: 8px 8px;
    }
    
    .flyout-cart-header-product a {
        font-size: 12px;
    }
    
    .flyout-cart-header-qty,
    .flyout-cart-header-amount {
        font-size: 11px;
    }
    
    /* Product header */
    .flyout-cart-product-header {
        padding: 7px 8px;
    }
    
    .flyout-cart-product-name {
        font-size: 12px;
        line-height: 1.2;
    }
    
    .flyout-cart-product-name .price {
        font-size: 12px;
    }
    
    .flyout-cart-product-qty,
    .flyout-cart-product-amount {
        font-size: 12px;
    }
    
    /* Variant rows */
    .flyout-cart-variant-row {
        font-size: 11px;
        min-height: 34px;
        padding: 6px 8px;
    }
    
    .flyout-cart-variant-image {
        width: 24px;
        height: 24px;
    }
    
    .flyout-cart-variant-image img {
        width: 18px;
        height: 24px;
    }
    
    .flyout-cart-variant-info {
        font-size: 11px;
        padding-right: 4px;
    }
    
    .flyout-cart-color-pack-line {
        font-size: 11px;
        height: 13px;
        margin-bottom: 1px;
    }
    
    .pack-info {
        font-size: 9px;
        padding: 1px 3px;
        margin-left: 4px;
    }
    
    .flyout-cart-size-breakdown-line {
        font-size: 10px;
        margin-left: 6px;
        max-width: 200px; /* Increased for better mobile visibility */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .flyout-cart-variant-qty,
    .flyout-cart-variant-amount {
        font-size: 11px;
        height: 14px;
        padding: 2px 3px;
    }
    
    /* Footer */
    .flyout-cart-footer {
        padding: 10px 8px;
    }
    
    .flyout-cart-footer-buttons {
        gap: 4px;
        flex-wrap: wrap;
    }
    
    .flyout-cart-button,
    .flyout-cart-checkout-button {
        height: 32px;
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
        flex: 1;
        min-width: 80px;
    }
    
    .flyout-cart-subtotal-container {
        max-width: 55px;
    }
    
    .flyout-cart-subtotal-amount {
        font-size: 12px;
    }
    
    /* Empty cart message */
    .flyout-cart-empty-cart {
        padding: 20px;
        font-size: 13px;
    }
}

/* ====================================================================
   EXTRA SMALL MOBILE (320px-374px): Ultra-Compact Layout
   ==================================================================== */
@media (max-width: 374px) {
    .flyout-cart-grouped {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
    }
    
    /* Even more compact grid */
    .flyout-cart-header,
    .flyout-cart-product-header,
    .flyout-cart-variant-row,
    .flyout-cart-footer {
        grid-template-columns: 24px 1fr 35px 50px;
        gap: 3px;
        padding: 5px 6px;
    }
    
    /* Smaller fonts */
    .flyout-cart-header {
        font-size: 10px;
        padding: 6px 6px;
    }
    
    .flyout-cart-header-product a {
        font-size: 11px;
    }
    
    .flyout-cart-header-qty,
    .flyout-cart-header-amount {
        font-size: 10px;
    }
    
    .flyout-cart-product-name {
        font-size: 11px;
    }
    
    .flyout-cart-product-name .price {
        font-size: 11px;
    }
    
    .flyout-cart-product-qty,
    .flyout-cart-product-amount {
        font-size: 11px;
    }
    
    .flyout-cart-variant-row {
        font-size: 10px;
        min-height: 30px;
        padding: 5px 6px;
    }
    
    .flyout-cart-variant-image {
        width: 22px;
        height: 22px;
    }
    
    .flyout-cart-variant-image img {
        width: 16px;
        height: 22px;
    }
    
    .flyout-cart-color-pack-line {
        font-size: 10px;
        height: 12px;
    }
    
    .pack-info {
        font-size: 8px;
        padding: 1px 2px;
        margin-left: 3px;
    }
    
    .flyout-cart-size-breakdown-line {
        font-size: 9px;
        margin-left: 4px;
        max-width: 100px;
    }
    
    .flyout-cart-variant-qty,
    .flyout-cart-variant-amount {
        font-size: 10px;
        height: 13px;
        padding: 1px 2px;
    }
    
    .flyout-cart-button,
    .flyout-cart-checkout-button {
        height: 30px;
        min-height: 30px;
        padding: 0 6px;
        font-size: 10px;
        min-width: 70px;
    }
    
    .flyout-cart-footer {
        padding: 8px 6px;
    }
    
    .flyout-cart-subtotal-container {
        max-width: 50px;
    }
    
    .flyout-cart-subtotal-amount {
        font-size: 11px;
    }
}

/* ====================================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ==================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .flyout-cart-grouped-shopping-cart {
        max-height: calc(100vh - 100px) !important;
    }
    
    .flyout-cart-grouped {
        top: 50px !important;
    }
}

/* ====================================================================
   PREVENT HORIZONTAL OVERFLOW ON ALL DEVICES
   ==================================================================== */
/* Removed general overflow constraints - only apply on small mobile screens */
/* Desktop and tablet have enough space - no truncation needed */

/* ====================================================================
   HIGH DPI / RETINA DISPLAY OPTIMIZATIONS
   ==================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .flyout-cart-variant-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ====================================================================
   ACCESSIBILITY: ENSURE TOUCH TARGETS ARE ADEQUATE ON MOBILE
   ==================================================================== */
@media (max-width: 767px) and (pointer: coarse) {
    /* Increase button touch targets */
    .flyout-cart-button,
    .flyout-cart-checkout-button {
        min-height: 36px;
        padding: 8px 10px;
    }
    
    /* Ensure links have adequate touch targets */
    .flyout-cart-header-product a {
        padding: 4px 0;
        display: inline-block;
    }
}

/* ====================================================================
   FIX: PREVENT CART FROM PUSHING CONTENT (z-index management)
   ==================================================================== */
.flyout-cart-wrapper {
    position: absolute;
    z-index: 9998;
}

.flyout-cart-grouped {
    z-index: 9999;
}

/* Ensure cart appears above other content */
@media (max-width: 576px) {
    .flyout-cart-wrapper.active,
    .flyout-cart-wrapper:hover {
        z-index: 9999;
    }
}


/* ====================================================================
   DEFAULT (NON-GROUPED) FLYOUT CART RESPONSIVE FIXES
   Fixes for the standard mini shopping cart layout
   ==================================================================== */

/* Fix: SimplexTheme hides flyout cart on mobile - override this */
@media (max-width: 767px) {
    .flyout-cart-wrapper.active {
        opacity: 1 !important;
        display: block !important;
    }
}

/* Default flyout cart positioning and sizing */
@media (min-width: 992px) {
    .flyout-cart:not(.flyout-cart-grouped) {
        position: absolute;
        width: 350px;
        max-width: 350px;
        right: 0;
        top: 100%;
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart:not(.flyout-cart-grouped) {
        position: absolute;
        width: 320px;
        max-width: calc(100vw - 40px);
        right: 10px;
        top: 100%;
        margin-top: 0;
    }
    
    .mini-shopping-cart {
        font-size: 13px;
    }
    
    .mini-shopping-cart .item {
        padding: 10px;
    }
    
    .mini-shopping-cart .picture {
        width: 60px;
    }
    
    .mini-shopping-cart .product {
        padding-left: 70px;
    }
}

@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart:not(.flyout-cart-grouped) {
        position: absolute;
        width: 300px;
        max-width: calc(100vw - 30px);
        right: 15px;
        top: 100%;
        margin-top: 0;
    }
    
    .mini-shopping-cart {
        font-size: 12px;
    }
    
    .mini-shopping-cart .item {
        padding: 8px;
    }
    
    .mini-shopping-cart .picture {
        width: 50px;
    }
    
    .mini-shopping-cart .picture img {
        max-width: 50px;
    }
    
    .mini-shopping-cart .product {
        padding-left: 60px;
    }
    
    .mini-shopping-cart .buttons .button-1 {
        font-size: 12px;
        padding: 8px 10px;
    }
}

@media (max-width: 576px) {
    .flyout-cart:not(.flyout-cart-grouped) {
        position: fixed !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 10px !important;
        left: 10px !important;
        top: 60px !important;
        margin: 0 !important;
        z-index: 9999;
    }
    
    .mini-shopping-cart {
        font-size: 12px;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
    
    .mini-shopping-cart .count {
        padding: 10px;
        font-size: 13px;
    }
    
    .mini-shopping-cart .item {
        padding: 8px;
        border-bottom: 1px solid #e9ecef;
    }
    
    .mini-shopping-cart .picture {
        float: left;
        width: 50px;
        margin-right: 10px;
    }
    
    .mini-shopping-cart .picture img {
        max-width: 50px;
        height: auto;
    }
    
    .mini-shopping-cart .product {
        overflow: hidden;
        padding-left: 0;
    }
    
    .mini-shopping-cart .product .name {
        font-size: 12px;
        margin-bottom: 5px;
        line-height: 1.3;
    }
    
    .mini-shopping-cart .product .attributes,
    .mini-shopping-cart .product .price,
    .mini-shopping-cart .product .quantity {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .mini-shopping-cart .totals {
        padding: 10px;
        font-size: 13px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
    }
    
    .mini-shopping-cart .buttons {
        padding: 10px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .mini-shopping-cart .buttons .button-1 {
        flex: 1;
        min-width: 100px;
        font-size: 12px;
        padding: 10px;
    }
    
    .mini-shopping-cart .buttons .cart-button,
    .mini-shopping-cart .buttons .checkout-button {
        width: 100%;
        margin: 0 0 5px 0;
    }
}

@media (max-width: 374px) {
    .flyout-cart:not(.flyout-cart-grouped) {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
    }
    
    .mini-shopping-cart .count,
    .mini-shopping-cart .totals {
        font-size: 12px;
        padding: 8px;
    }
    
    .mini-shopping-cart .item {
        padding: 6px;
    }
    
    .mini-shopping-cart .picture {
        width: 40px;
        margin-right: 8px;
    }
    
    .mini-shopping-cart .picture img {
        max-width: 40px;
    }
    
    .mini-shopping-cart .product .name {
        font-size: 11px;
    }
    
    .mini-shopping-cart .product .attributes,
    .mini-shopping-cart .product .price,
    .mini-shopping-cart .product .quantity {
        font-size: 10px;
    }
    
    .mini-shopping-cart .buttons .button-1 {
        font-size: 11px;
        padding: 8px;
    }
}
/**
 * Flyout Cart Arrow/Pointer Positioning
 * Creates a triangle pointer that points to the cart icon
 * Arrow position adjusts based on device size
 */

/* ====================================================================
   ARROW/POINTER BASE STYLES
   ==================================================================== */

.flyout-cart-grouped::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #dee2e6;
    z-index: 1;
}

.flyout-cart-grouped::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
    z-index: 2;
}

/* ====================================================================
   DESKTOP (992px+): Arrow Far Right
   ==================================================================== */
@media (min-width: 992px) {
    .flyout-cart-grouped::before {
        right: 20px; /* Position near right edge */
    }
    
    .flyout-cart-grouped::after {
        right: 21px; /* Slightly offset for inner triangle */
    }
}

/* ====================================================================
   TABLET LANDSCAPE (768px-991px): Arrow Centered-Right
   ==================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart-grouped::before {
        right: 30px; /* More centered due to smaller cart width */
    }
    
    .flyout-cart-grouped::after {
        right: 31px;
    }
}

/* ====================================================================
   TABLET PORTRAIT (577px-767px): Arrow Center
   ==================================================================== */
@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart-grouped::before {
        right: 40px; /* More centered */
    }
    
    .flyout-cart-grouped::after {
        right: 41px;
    }
}

/* ====================================================================
   MOBILE (320px-576px): Arrow Left Side
   ==================================================================== */
@media (max-width: 576px) {
    .flyout-cart-grouped::before {
        right: auto;
        left: 20px; /* Move to left side for mobile */
    }
    
    .flyout-cart-grouped::after {
        right: auto;
        left: 21px;
    }
}

/* ====================================================================
   EXTRA SMALL MOBILE (320px-374px): Arrow Far Left
   ==================================================================== */
@media (max-width: 374px) {
    .flyout-cart-grouped::before {
        left: 15px; /* Closer to left edge */
    }
    
    .flyout-cart-grouped::after {
        left: 16px;
    }
}

/* ====================================================================
   DEFAULT (NON-GROUPED) FLYOUT CART ARROW
   ==================================================================== */

.flyout-cart:not(.flyout-cart-grouped)::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ddd;
    z-index: 1;
}

.flyout-cart:not(.flyout-cart-grouped)::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    z-index: 2;
}

/* Desktop - Far right */
@media (min-width: 992px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 20px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 21px;
    }
}

/* Tablet - Centered-right */
@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 30px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 31px;
    }
}

/* Tablet portrait - Center */
@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 40px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 41px;
    }
}

/* Mobile - Left side */
@media (max-width: 576px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: auto;
        left: 20px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: auto;
        left: 21px;
    }
}

/* Mobile small - Far left */
@media (max-width: 374px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        left: 15px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        left: 16px;
    }
}

/* =====================================================================================================================
   cart-skin-v1.css - shopping cart page (OrderSummary/Grouped) + header flyout cart (FlyoutShoppingCart/Grouped):
   token layer (core, all shops), loaded by both views ON TOP of shopping-cart-grouped-v2.css / flyout-cart-*.css.

   WHY (2026-10-03, user: "cart page / flyout cart UI, UX and readability"): price and quantity sat in grey boxes,
   the line amounts in grey boxes, the save / remove buttons were emoji (a purple floppy, a red cross) in grey
   squares, the size line ended in a stray "|", Continue shopping looked disabled (grey on grey), the totals card had
   a blue 2px frame; in the flyout the quantity / amount chips were pale blue / green, the thumbnails 32px, the last
   row ran under the footer and the View cart / Checkout buttons were 23px high.

   SHOP TOKENS: set them in a GLOBAL `:root { }` of the shop's mobile-shop-overrides.css (no :root here: every rule
   reads var(--cart-x, <neutral default>)).
     --cart-font     family                      --cart-fg        text            --cart-muted     secondary text
     --cart-line     hairlines / field borders   --cart-surface   card background --cart-soft      group header band
     --cart-accent   checkout button, links      --cart-accent-fg checkout text   --cart-radius    corners
     --cart-chip-bg  size / pack chips
   SPECIFICITY: `html body :is(.order-summary-content, #cart-skin)` / `html body :is(#flyout-cart-wrapper, #cart-skin)`
   give id weight (1,0,2) + !important over the older cart CSS (class chains, some !important). The flyout buttons
   use the id twice: wigstheme.css pins them with "#flyout-cart-wrapper > div > div > div... > button" (1,4,6).
   Cache: bump the file name (-v2) on any change (both views).
   ===================================================================================================================== */

/* ------------------------------------------------- cart page ---------------------------------------------------- */
html body :is(.order-summary-content, #cart-skin) .full-cart-container {
    border: 1px solid var(--cart-line, #e6e6e6) !important;
    border-radius: var(--cart-radius, 4px) !important;
    background: var(--cart-surface, #fff) !important;
    font-family: var(--cart-font, inherit) !important;
    color: var(--cart-fg, #222) !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-header {
    border-bottom: 1px solid var(--cart-line, #e6e6e6) !important;
    background: transparent !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-header > div {
    color: var(--cart-muted, #666) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 11px !important; line-height: 1.2 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
/* product group: a soft band with the style, unit price, quantity and amount as plain figures (no grey boxes) */
html body :is(.order-summary-content, #cart-skin) .full-cart-product-header {
    background: var(--cart-soft, #fafafa) !important;
    border-bottom: 1px solid var(--cart-line, #e6e6e6) !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-product-link {
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.3 !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-product-link:hover { text-decoration: underline !important; }
html body :is(.order-summary-content, #cart-skin) :is(.full-cart-product-price, .full-cart-product-qty, .full-cart-product-amount,
     .full-cart-variant-qty, .full-cart-variant-amount) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--cart-font, inherit) !important;
    font-variant-numeric: tabular-nums;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-product-price { color: var(--cart-muted, #666) !important; font-size: 14px !important; font-weight: 400 !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-product-qty { color: var(--cart-fg, #222) !important; font-size: 15px !important; font-weight: 600 !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-product-amount { color: var(--cart-fg, #222) !important; font-size: 16px !important; font-weight: 700 !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-variant-qty { color: var(--cart-muted, #666) !important; font-size: 14px !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-variant-amount { color: var(--cart-fg, #222) !important; font-size: 15px !important; font-weight: 600 !important; }
/* colour rows */
html body :is(.order-summary-content, #cart-skin) .full-cart-variant-row { border-bottom: 1px solid var(--cart-line, #e6e6e6) !important; background: transparent !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-variant-image img { border-radius: var(--cart-radius, 4px) !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-color-pack-line { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }
html body :is(.order-summary-content, #cart-skin) .full-cart-color-pack-line .color-name {
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.3 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-color-pack-line .pack-input-label { color: var(--cart-muted, #666) !important; font-family: var(--cart-font, inherit) !important; font-weight: 400 !important; font-size: 13px !important; line-height: 1 !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-color-pack-line .pack-input-field {
    width: 64px !important;
    height: 36px !important;
    padding: 0 6px !important;
    border: 1px solid var(--cart-line, #d6d6d6) !important;
    border-radius: var(--cart-radius, 4px) !important;
    background: #fff !important;
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1 !important;
    text-align: center !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-color-pack-line .pack-input-field:focus { outline: 2px solid var(--cart-fg, #222) !important; outline-offset: 1px; }
/* sizes: "S 2" chips instead of "S: 2 | M: 2 | L: 2 |" (the last "|" pointed at nothing) */
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; }
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line .size-slot {
    display: inline-flex !important;
    align-items: baseline;
    gap: 6px;
    margin: 0 !important;
    padding: 4px 10px !important;
    border-radius: 999px;
    background: var(--cart-chip-bg, #f2f2f2) !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line .size-slot::after,
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line .size-name::after { content: none !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line .size-name { color: var(--cart-muted, #666) !important; font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 11px !important; line-height: 1 !important; letter-spacing: .06em; }
html body :is(.order-summary-content, #cart-skin) .full-cart-size-breakdown-line .size-qty { color: var(--cart-fg, #222) !important; font-family: var(--cart-font, inherit) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1 !important; }
/* save / remove: line icons in round buttons (the emoji are hidden but stay in the DOM for the title / scripts) */
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons { display: inline-flex !important; gap: 8px; margin-left: 8px; }
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons :is(.full-cart-update-color-btn, .full-cart-remove-color-btn) {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cart-line, #d6d6d6) !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--cart-fg, #222) !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons :is(.full-cart-update-color-btn, .full-cart-remove-color-btn)::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--cart-ico) center / contain no-repeat;
    mask: var(--cart-ico) center / contain no-repeat;
}
html body :is(.order-summary-content, #cart-skin) .full-cart-update-color-btn {
    --cart-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
html body :is(.order-summary-content, #cart-skin) .full-cart-remove-color-btn {
    --cart-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
}
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons :is(.full-cart-update-color-btn, .full-cart-remove-color-btn):hover { border-color: var(--cart-fg, #222) !important; background: var(--cart-soft, #fafafa) !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons .full-cart-remove-color-btn:hover { color: #b3261e !important; border-color: #b3261e !important; }
html body :is(.order-summary-content, #cart-skin) .full-cart-inline-buttons :is(.full-cart-update-color-btn, .full-cart-remove-color-btn):focus-visible { outline: 2px solid var(--cart-fg, #222) !important; outline-offset: 2px; }
/* Continue shopping = a secondary button, not a disabled-looking grey bar */
html body :is(.order-summary-content, #cart-skin) .continue-shopping-button {
    width: auto !important;
    min-width: 200px;
    height: 44px !important;
    padding: 0 22px !important;
    border: 1px solid var(--cart-fg, #222) !important;
    border-radius: var(--cart-radius, 4px) !important;
    background: #fff !important;
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    opacity: 1 !important;
}
html body :is(.order-summary-content, #cart-skin) .continue-shopping-button:hover { background: var(--cart-soft, #fafafa) !important; }
/* discount / gift card boxes */
html body :is(.order-summary-content, #cart-skin) :is(.coupon-box, .giftcard-box) {
    border: 1px solid var(--cart-line, #e6e6e6) !important;
    border-radius: var(--cart-radius, 4px) !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body :is(.order-summary-content, #cart-skin) :is(.coupon-box, .giftcard-box) .title {
    padding: 14px 16px 6px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}
html body :is(.order-summary-content, #cart-skin) :is(.coupon-box, .giftcard-box) .title strong {
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1.2 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}
html body :is(.order-summary-content, #cart-skin) :is(.coupon-box, .giftcard-box) .hint { color: var(--cart-muted, #666) !important; font-family: var(--cart-font, inherit) !important; font-weight: 400 !important; font-size: 13px !important; line-height: 1.4 !important; }
html body :is(.order-summary-content, #cart-skin) :is(.coupon-box, .giftcard-box) .form-control {
    height: 40px !important;
    border: 1px solid var(--cart-line, #d6d6d6) !important;
    border-radius: var(--cart-radius, 4px) 0 0 var(--cart-radius, 4px) !important;
    box-shadow: none !important;
    font-size: 15px !important;
}
html body :is(.order-summary-content, #cart-skin) :is(.apply-discount-coupon-code-button, .apply-gift-card-coupon-code-button) {
    height: 40px !important;
    border: 1px solid var(--cart-fg, #222) !important;
    border-radius: 0 var(--cart-radius, 4px) var(--cart-radius, 4px) 0 !important;
    background: var(--cart-fg, #222) !important;
    color: #fff !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 12px !important; line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}
/* totals: one quiet card (it had a 2px blue frame inside a panel border) */
html body :is(.order-summary-content, #cart-skin) .full-cart-order-totals { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
html body :is(.order-summary-content, #cart-skin) .total-info .panel { border: 1px solid var(--cart-line, #e6e6e6) !important; border-radius: var(--cart-radius, 4px) !important; box-shadow: none !important; }
html body :is(.order-summary-content, #cart-skin) .cart-total.table td { border-color: var(--cart-line, #e6e6e6) !important; font-family: var(--cart-font, inherit) !important; font-size: 15px !important; }
html body :is(.order-summary-content, #cart-skin) .cart-total.table tr:last-child td { font-weight: 700 !important; color: var(--cart-fg, #222) !important; }


/* ------------------------------------------------- flyout cart -------------------------------------------------- */
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-grouped {
    border: 1px solid var(--cart-line, #e6e6e6) !important;
    border-radius: var(--cart-radius, 4px) !important;
    background: var(--cart-surface, #fff) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06) !important;
    font-family: var(--cart-font, inherit) !important;
    color: var(--cart-fg, #222) !important;
}
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-header { border-bottom: 1px solid var(--cart-line, #e6e6e6) !important; background: transparent !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-header > div,
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-header a {
    color: var(--cart-muted, #666) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 11px !important; line-height: 1.2 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-product-header { background: var(--cart-soft, #fafafa) !important; border-bottom: 1px solid var(--cart-line, #e6e6e6) !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-product-name { color: var(--cart-fg, #222) !important; font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.3 !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-product-name .price { color: var(--cart-muted, #666) !important; font-weight: 400 !important; font-size: 13px !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) :is(.flyout-cart-product-qty, .flyout-cart-product-amount, .flyout-cart-variant-qty, .flyout-cart-variant-amount) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cart-fg, #222) !important;
    font-family: var(--cart-font, inherit) !important;
    font-size: 14px !important;
    font-variant-numeric: tabular-nums;
}
html body :is(#flyout-cart-wrapper, #cart-skin) :is(.flyout-cart-product-amount, .flyout-cart-variant-amount) { font-weight: 600 !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-variant-qty { color: var(--cart-muted, #666) !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-variants-container { border-left: 0 !important; background: transparent !important; box-shadow: none !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-variant-row { align-items: center !important; border-bottom: 1px solid var(--cart-line, #f0f0f0) !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-variant-image { width: 40px !important; height: 56px !important; flex: 0 0 40px !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-variant-image img { width: 40px !important; height: 56px !important; object-fit: cover; border-radius: var(--cart-radius, 4px) !important; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-color-pack-line { color: var(--cart-fg, #222) !important; font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .03em; text-transform: uppercase; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-color-pack-line .pack-info {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--cart-chip-bg, #f2f2f2) !important;
    color: var(--cart-muted, #555) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 600 !important; font-size: 11px !important; line-height: 1 !important;
    letter-spacing: .04em;
    padding: 4px 8px !important;
}
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-size-breakdown-line { color: var(--cart-muted, #666) !important; font-family: var(--cart-font, inherit) !important; font-weight: 400 !important; font-size: 12px !important; line-height: 1.4 !important; word-spacing: .2em; }
/* the list scrolls inside the card; the last row ends clear of the footer */
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-grouped-items { padding-bottom: 8px !important; scrollbar-width: thin; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px !important;
    border-top: 1px solid var(--cart-line, #e6e6e6) !important;
    background: var(--cart-surface, #fff) !important;
    box-shadow: 0 -8px 16px rgba(255, 255, 255, .9);
}
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-footer-buttons { display: flex !important; gap: 8px; order: 2; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-subtotal-container { order: 1; }
html body :is(#flyout-cart-wrapper, #cart-skin) .flyout-cart-subtotal-amount { color: var(--cart-fg, #222) !important; font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
html body #flyout-cart-wrapper#flyout-cart-wrapper .flyout-cart-footer :is(.flyout-cart-button, .flyout-cart-checkout-button) {
    width: auto !important;
    min-width: 128px;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: var(--cart-radius, 4px) !important;
    font-family: var(--cart-font, inherit) !important; font-weight: 700 !important; font-size: 12px !important; line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    box-shadow: none !important;
}
html body #flyout-cart-wrapper#flyout-cart-wrapper .flyout-cart-footer .flyout-cart-button { border: 1px solid var(--cart-fg, #222) !important; background: #fff !important; color: var(--cart-fg, #222) !important; }
html body #flyout-cart-wrapper#flyout-cart-wrapper .flyout-cart-footer .flyout-cart-checkout-button { border: 1px solid var(--cart-accent, #222) !important; background: var(--cart-accent, #222) !important; color: var(--cart-accent-fg, #fff) !important; }
html body #flyout-cart-wrapper#flyout-cart-wrapper .flyout-cart-footer :is(.flyout-cart-button, .flyout-cart-checkout-button):focus-visible { outline: 2px solid var(--cart-fg, #222) !important; outline-offset: 2px; }

/* ============================================================
   npc-translator.css — CORE (structure + neutral defaults only)
   ------------------------------------------------------------
   Shops restyle by overriding the --npc-tr-* token VALUES in their own
   stylesheet (see Design §8). Never edit these rules on a shop branch.
   Colour literals appear only as var() fallbacks.
   ============================================================ */

.npc-tr,
.npc-tr-banner,
.npc-tr-progress {
    --npc-tr-fg: var(--npc-tr-shop-fg, currentColor);
    --npc-tr-bg: transparent;
    --npc-tr-border: color-mix(in srgb, currentColor 35%, transparent);
    --npc-tr-active-bg: var(--m-accent, #222);
    --npc-tr-active-fg: var(--m-accent-contrast, #fff);
    --npc-tr-radius: 999px;
    --npc-tr-font: var(--font-default, inherit);
    --npc-tr-size: 12px;
    --npc-tr-banner-bg: var(--npc-tr-shop-banner-bg, #1f1f1f); /* always dark-neutral: light accents fail WCAG with white text */
    --npc-tr-banner-fg: var(--npc-tr-shop-banner-fg, #fff);
    --npc-tr-banner-accent: var(--m-accent, #888);            /* 3px stripe only */
    --npc-tr-banner-radius: 10px;
    --npc-tr-banner-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    --npc-tr-z: 1032;                                          /* above sticky header (1029) and bottom nav (1031), below modals (1040) */
    --npc-tr-offset-bottom: 0px;
    --npc-tr-touch: 32px;
    --npc-tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* the mobile drawer — and, on phones, the header — sit on the app-bar surface */
.npc-tr--zone-menu { --npc-tr-fg: var(--m-header-fg, currentColor); }

@media (max-width: 767.98px) {
    .npc-tr--zone-header { --npc-tr-fg: var(--m-header-fg, currentColor); }
}

@media (max-width: 767.98px) {
    .npc-tr,
    .npc-tr-banner,
    .npc-tr-progress {
        --npc-tr-offset-bottom: calc(var(--m-bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px));
        --npc-tr-touch: var(--m-touch-min, 44px);
    }
}

.npc-tr__sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- switcher (shared) ---------- */

.npc-tr {
    display: inline-flex !important;   /* theme list/float rules must not reach it */
    float: none !important;
    align-items: center;
    gap: 0;
    vertical-align: middle;
    font-family: var(--npc-tr-font);
    font-size: var(--npc-tr-size);
    line-height: 1;
    color: var(--npc-tr-fg);
}

.npc-tr button,
.npc-tr select {
    font: inherit;
    color: inherit;
    margin: 0;
    cursor: pointer;
}

.npc-tr button:focus-visible,
.npc-tr select:focus-visible,
.npc-tr-banner__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Segmented: EN | ES */
.npc-tr--segmented {
    padding: 2px;
    border: 1px solid var(--npc-tr-border);
    border-radius: var(--npc-tr-radius);
    background: var(--npc-tr-bg);
}

.npc-tr__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: var(--npc-tr-touch);
    min-height: calc(var(--npc-tr-touch) - 6px);
    padding: 0 10px;
    border: 0;
    border-radius: var(--npc-tr-radius);
    background: transparent;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Tap target: on phones the segment grows its hit area to --npc-tr-touch without growing the pill. */
.npc-tr__opt,
.npc-tr-banner__btn { position: relative; }

@media (max-width: 767.98px) {
    .npc-tr__opt::after,
    .npc-tr-banner__btn::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        height: var(--npc-tr-touch);
        transform: translateY(-50%);
    }
}

.npc-tr__opt[aria-pressed="true"] {
    background: var(--npc-tr-active-bg);
    color: var(--npc-tr-active-fg);
}

/* Text link */
.npc-tr__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--npc-tr-touch);
    padding: 0 4px;
    border: 0;
    background: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Icon (globe + current target code) — icon drawn on our own ::after, never ::before */
.npc-tr__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: var(--npc-tr-touch);
    min-height: var(--npc-tr-touch);
    padding: 0 6px;
    border: 0;
    background: none !important;
    background-image: none !important;
}

.npc-tr__icon::after {
    content: "";
    order: -1;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none !important;
    transform: none !important;
    -webkit-mask: var(--npc-tr-icon) center / contain no-repeat;
    mask: var(--npc-tr-icon) center / contain no-repeat;
}

.npc-tr__code {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
}

/* Dropdown */
.npc-tr__select {
    min-height: var(--npc-tr-touch);
    padding: 0 8px;
    border: 1px solid var(--npc-tr-border);
    border-radius: 6px;
    background: var(--npc-tr-bg);
}

/* Flags (optional; inline SVG, no image requests) */
.npc-tr__flag {
    display: inline-block;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    background-size: cover;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}

.npc-tr__flag--en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath fill='%23fff' d='M0 0h16v11H0z'/%3E%3Cpath fill='%23b22234' d='M0 0h16v1H0zm0 2h16v1H0zm0 2h16v1H0zm0 2h16v1H0zm0 2h16v1H0zm0 2h16v1H0z'/%3E%3Cpath fill='%233c3b6e' d='M0 0h7v6H0z'/%3E%3C/svg%3E");
}

.npc-tr__flag--es {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath fill='%23aa151b' d='M0 0h16v11H0z'/%3E%3Cpath fill='%23f1bf00' d='M0 3h16v5H0z'/%3E%3C/svg%3E");
}

/* ---------- placements ---------- */

.header-selectors-wrapper .npc-tr--zone-header { margin-inline-start: 8px; }

/* The mobile-menu entry lives in the top-menu <ul>; the header switcher covers desktop. */
.npc-tr-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    list-style: none;
}

@media (min-width: 768px) {
    .npc-tr-menu-item { display: none !important; }
}

.npc-tr-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 12px;
}

.npc-tr-footer__note {
    font-size: 12px;
    opacity: .75;
}

/* ---------- progress bar ---------- */

.npc-tr-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--npc-tr-z);
    height: 2px;
    pointer-events: none;
    background: var(--npc-tr-banner-accent);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity .2s ease;
}

.npc-tr-progress.is-active {
    opacity: 1;
    animation: npc-tr-progress 1.2s ease-in-out infinite;
}

@keyframes npc-tr-progress {
    0% { transform: scaleX(0); }
    60% { transform: scaleX(.8); }
    100% { transform: scaleX(1); opacity: .4; }
}

/* ---------- banner / indicator ---------- */

.npc-tr-banner {
    z-index: var(--npc-tr-z);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 10px 14px;
    border-top: 3px solid var(--npc-tr-banner-accent);
    background: var(--npc-tr-banner-bg);
    color: var(--npc-tr-banner-fg);
    font-family: var(--npc-tr-font);
    font-size: 14px;
    line-height: 1.35;
    box-sizing: border-box;
}

.npc-tr-banner__text { min-width: 0; }

.npc-tr-banner__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.npc-tr-banner__btn {
    min-height: var(--npc-tr-touch);
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--npc-tr-banner-fg) 45%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--npc-tr-banner-fg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.npc-tr-banner__btn--primary {
    border-color: var(--npc-tr-banner-fg);
    background: var(--npc-tr-banner-fg);
    color: var(--npc-tr-banner-bg);
}

.npc-tr-banner--top-bar {
    position: sticky;
    top: 0;
    width: 100%;
    border-top: 0;
    border-bottom: 3px solid var(--npc-tr-banner-accent);
}

.npc-tr-banner--bottom-bar {
    position: fixed;
    inset-inline: 0;
    bottom: var(--npc-tr-offset-bottom);
}

.npc-tr-banner--bottom-left,
.npc-tr-banner--bottom-right {
    position: fixed;
    bottom: calc(var(--npc-tr-offset-bottom) + 12px);
    max-width: min(380px, calc(100vw - 24px));
    justify-content: flex-start;
    border-radius: var(--npc-tr-banner-radius);
    box-shadow: var(--npc-tr-banner-shadow);
}

.npc-tr-banner--bottom-left { inset-inline-start: 12px; }
.npc-tr-banner--bottom-right { inset-inline-end: 12px; }

/* the indicator is compact: one line on phones */
.npc-tr-banner--indicator { flex-wrap: nowrap; padding-block: 6px; font-size: 13px; }
.npc-tr-banner--indicator .npc-tr-banner__btn { min-height: 32px; }

/* docked while the footer switcher is on screen (it shows the same state) */
.npc-tr-banner--indicator { transition: opacity .2s ease, visibility .2s ease; }
.npc-tr-banner--indicator.is-docked { opacity: 0; visibility: hidden; }

/* the theme's back-to-top button and the accessibility button step up above a bottom banner
   (--npc-tr-float-h = banner height + 12px gap, set by npc-translator.js) */
html.npc-tr-float--bottom-right #backTop,
html.npc-tr-float--bottom-right .at-trigger--right,
html.npc-tr-float--bottom-left .at-trigger--left,
html.npc-tr-float--bottom-bar #backTop,
html.npc-tr-float--bottom-bar .at-trigger {
    margin-bottom: var(--npc-tr-float-h, 0px) !important;
    transition: margin-bottom .2s ease;
}

/* ---------- Google Website Translator chrome (free provider) ---------- */

.goog-te-banner-frame,
iframe.skiptranslate,
.skiptranslate > iframe,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }

body { top: 0 !important; }

font[style*="background-color"] { background-color: transparent !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
    .npc-tr-progress,
    .npc-tr-progress.is-active { animation: none; transition: none; }
}

/* ============================================================
   NPC Carousel — BEM namespaced styles
   Prefix: .npc-carousel (avoids .ocarousel conflict)
   Design tokens: SimplexTheme (--red, --grey-black, Garamond, border-radius: 0)
   ============================================================ */

/* --- Container --- */
.npc-carousel {
    margin: 30px 0;
    overflow: hidden;
}

/* --- Body: banner (left) + slider-wrap (right) --- */
.npc-carousel__body {
    display: flex;
    gap: 20px;
}

/* --- Banner (left column) --- */
.npc-carousel--with-banner .npc-carousel__banner {
    flex: 1; /* same weight as one product card */
    position: relative;
    overflow: hidden;
    align-self: stretch;
}

.npc-carousel__banner a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Banner image: fill column, preserve ratio via object-fit, crop excess */
.npc-carousel__banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* --- Slider wrap (right column) — contains header + owl slider --- */
.npc-carousel__slider-wrap {
    flex: 3; /* 3 items = 3× banner width → banner ≈ 1 item width */
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Without banner — full width */
.npc-carousel:not(.npc-carousel--with-banner) .npc-carousel__slider-wrap {
    width: 100%;
}

/* --- Header: title (left) + nav buttons (right) — inside slider-wrap --- */
.npc-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 0 30px 0 30px;
}

.npc-carousel__title {
    font-family: inherit; /* Garamond from SimplexTheme */
    font-size: 24px;
    font-weight: 700;
    color: var(--grey-black, #333333);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.npc-carousel__nav {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

.npc-carousel__nav-prev,
.npc-carousel__nav-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.npc-carousel__nav-prev svg,
.npc-carousel__nav-next svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.npc-carousel__nav-prev:hover,
.npc-carousel__nav-next:hover {
    border-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.05);
}

.npc-carousel__nav-prev:active,
.npc-carousel__nav-next:active {
    transform: scale(0.95);
}

/* --- Owl Carousel integration --- */
.npc-carousel__slider.owl-carousel .owl-stage-outer {
    overflow: hidden;
}

.npc-carousel__slider.owl-carousel .owl-stage {
    display: flex;
}

.npc-carousel__slider.owl-carousel .owl-item {
    flex-shrink: 0;
}

/* --- Product item inside carousel --- */
.npc-carousel__item {
    padding: 0 8px;
}

/* Reset item-box col widths inside owl items (owl handles sizing) */
.npc-carousel .owl-item .npc-carousel__item.item-box {
    width: 100%;
    float: none;
    padding: 0 8px;
}

.npc-carousel__item .product-item {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* Let theme CSS (product-box-aspect-ratio.css) handle picture sizing
   via .product-grid .item-box .picture selectors — do NOT override here */

/* --- Fallback: display items horizontally when Owl Carousel has NOT initialized --- */
.npc-carousel__slider:not(.owl-loaded) {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.npc-carousel__slider:not(.owl-loaded) > .npc-carousel__item {
    flex: 0 0 25%;
    min-width: 220px;
    scroll-snap-align: start;
}

/* Hide scrollbar for non-owl fallback */
.npc-carousel__slider:not(.owl-loaded)::-webkit-scrollbar {
    display: none;
}
.npc-carousel__slider:not(.owl-loaded) {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .npc-carousel--with-banner .npc-carousel__banner {
        flex: 1;
    }

    .npc-carousel__slider-wrap {
        flex: 3; /* 3 items on tablet → banner ≈ 1 item width */
    }

    /* Fallback: 3 items on tablet */
    .npc-carousel__slider:not(.owl-loaded) > .npc-carousel__item {
        flex: 0 0 33.333%;
        min-width: 200px;
    }
}

@media (max-width: 767px) {
    .npc-carousel__body {
        flex-direction: column;
    }

    /* Banner stacks full-width on top — use 16:9-ish banner crop */
    .npc-carousel--with-banner .npc-carousel__banner {
        flex: none;
        width: 100%;
       /* aspect-ratio: 5/2;*/
        align-self: auto;
    }

    .npc-carousel__slider-wrap {
        flex: none;
        width: 100%;
    }

    .npc-carousel__banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .npc-carousel__banner a {
        height: 100%;
    }

    .npc-carousel__title {
        font-size: 18px;
    }

    .npc-carousel__nav-prev,
    .npc-carousel__nav-next {
        width: 28px;
        height: 28px;
    }

    .npc-carousel__nav-prev svg,
    .npc-carousel__nav-next svg {
        width: 14px;
        height: 14px;
    }

    /* Fallback: 2 items on mobile */
    .npc-carousel__slider:not(.owl-loaded) > .npc-carousel__item {
        flex: 0 0 50%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .npc-carousel__header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .npc-carousel__title {
        font-size: 16px;
        flex: 1;
    }

    /* Fallback: 1 item on small mobile */
    .npc-carousel__slider:not(.owl-loaded) > .npc-carousel__item {
        flex: 0 0 100%;
        min-width: 0;
    }
}

/* ============================================================
   Swiper hover arrows inside NPC Carousel — Lucide icon overrides
   Override theme's product-image-hover-arrows.css (FontAwesome ::after)
   with inline Lucide SVGs injected by npc-carousel.js
   ============================================================ */

/* Hide FontAwesome ::after content — Lucide SVG is injected as child element */
.npc-carousel .product-grid .item-box .picture .swiper-button-prev::after,
.npc-carousel .product-grid .item-box .picture .swiper-button-next::after,
.npc-carousel .owl-item .item-box .picture .swiper-button-prev::after,
.npc-carousel .owl-item .item-box .picture .swiper-button-next::after {
    content: '' !important;
    display: none !important;
}

/* Lucide SVG icon inside Swiper arrows */
.npc-carousel .swiper-button-prev .npc-lucide-arrow,
.npc-carousel .swiper-button-next .npc-lucide-arrow {
    display: block;
    width: 24px;
    height: 24px;
    stroke: var(--grey-black, #333333);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Hover: full opacity on Lucide arrow */
.npc-carousel .item-box .picture:hover .swiper-button-prev:not(.swiper-button-disabled):hover .npc-lucide-arrow,
.npc-carousel .item-box .picture:hover .swiper-button-next:not(.swiper-button-disabled):hover .npc-lucide-arrow {
    opacity: 1;
}

/* Disabled state: very faint Lucide arrow */
.npc-carousel .swiper-button-disabled .npc-lucide-arrow {
    opacity: 0.1;
}

/* ============================================================
   Caption overrides — Price 20px + improved text readability
   Scoped to .npc-carousel to avoid affecting OCarousels
   ============================================================ */

/* Actual price — prominent, 20px */
.npc-carousel .product-item .caption .details .prices-inline .actual-price,
.npc-carousel .product-item .caption .details .prices .actual-price,
.npc-carousel .product-item .details .prices .actual-price {
    font-size: 18px !important;
    color: var(--grey-black, #333333) !important;
    font-weight: 600 !important;
}

/* Old price — proportional to 20px actual, subdued */
.npc-carousel .product-item .caption .details .prices-inline .old-price,
.npc-carousel .product-item .caption .details .prices .old-price,
.npc-carousel .product-item .details .prices .old-price {
    font-size: 18px !important;
    color: #999999 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* Product title link — darker for readability (was #999999 → #555555) */
.npc-carousel .product-item .caption .details .product-title-inline a,
.npc-carousel .product-item .caption .details .product-title a,
.npc-carousel .product-item .details .product-title a {
    color: #555555 !important;
}

/* Product title hover — accent color */
.npc-carousel .product-item .caption .details .product-title-inline a:hover,
.npc-carousel .product-item .caption .details .product-title a:hover,
.npc-carousel .product-item .details .product-title a:hover {
    color: var(--grey-black, #333333) !important;
}

/* SKU / meta text — slightly darker for readability */
.npc-carousel .product-item .caption .details .sku,
.npc-carousel .product-item .details .sku {
    color: #888888 !important;
}

/* Description text — subtle but readable */
.npc-carousel .product-item .caption .details .description,
.npc-carousel .product-item .details .description {
    color: #888888 !important;
}

/* Responsive caption — slightly smaller on mobile */
@media (max-width: 767px) {
    .npc-carousel .product-item .caption .details .prices-inline .actual-price,
    .npc-carousel .product-item .caption .details .prices .actual-price,
    .npc-carousel .product-item .details .prices .actual-price {
        font-size: 16px !important;
    }

    .npc-carousel .product-item .caption .details .prices-inline .old-price,
    .npc-carousel .product-item .caption .details .prices .old-price,
    .npc-carousel .product-item .details .prices .old-price {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .npc-carousel .product-item .caption .details .prices-inline .actual-price,
    .npc-carousel .product-item .caption .details .prices .actual-price,
    .npc-carousel .product-item .details .prices .actual-price {
        font-size: 15px !important;
    }

    .npc-carousel .product-item .caption .details .prices-inline .old-price,
    .npc-carousel .product-item .caption .details .prices .old-price,
    .npc-carousel .product-item .details .prices .old-price {
        font-size: 15px !important;
    }
}


/* ============================================================
   Per-carousel aspect ratio overrides
   Default 3/4 is applied globally by product-box-aspect-ratio.css.
   Overrides here use a more specific selector to win.
   ============================================================ */

.npc-carousel[data-aspect-ratio="1/1"] .product-grid .item-box .picture,
.npc-carousel[data-aspect-ratio="1/1"] .owl-item .item-box .picture {
    aspect-ratio: 1/1 !important;
}

.npc-carousel[data-aspect-ratio="4/3"] .product-grid .item-box .picture,
.npc-carousel[data-aspect-ratio="4/3"] .owl-item .item-box .picture {
    aspect-ratio: 4/3 !important;
}

.npc-carousel[data-aspect-ratio="2/3"] .product-grid .item-box .picture,
.npc-carousel[data-aspect-ratio="2/3"] .owl-item .item-box .picture {
    aspect-ratio: 2/3 !important;
}

/* 3/4 is already the global default — no override needed */
/* mobile: 28px arrow buttons are under the 44px touch minimum. Keep the visual
   size but extend the HIT AREA with padding + background-clip so the arrows do
   not visually bloat over slide content. (GOL002 mobile audit 2026-06-04) */
@media (max-width: 767px) {
    .npc-carousel__nav-prev,
    .npc-carousel__nav-next {
        min-width: 44px; min-height: 44px;
        padding: 8px;
        background-clip: content-box;
        box-sizing: border-box;
    }
}

/* ============================================================
   NPC Banner — page-targeted banners (Top/Bottom/Left zones)
   ============================================================ */
.npc-banner {
    margin: 0 0 20px;
    /* center horizontally regardless of page container alignment; never upscale the image */
    display: flex;
    justify-content: center;
}

.npc-banner--bottom {
    margin: 20px 0 0;
}

.npc-banner-link {
    display: block;
    max-width: 100%;
}

.npc-banner picture,
.npc-banner img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Left sidebar zone: constrained column width */
.npc-banner--left {
    margin: 0 0 15px;
}

/* ============================================================
   mobile-foundation-v2.css  —  CORE mobile responsive foundation (v2 = filename cache-bust)
   ------------------------------------------------------------
   Layer policy: visually-NEUTRAL structure + design tokens only.
   - NO brand colors / images here. Shops override --m-* VALUES
     on their own {shop}_mobileview branch.
   - Breakpoint standard (project-wide reference):
       mobile  <= 767px   |   tablet 768-991px   |   desktop >= 992px
   ============================================================ */

:root {
    /* --- sizing tokens --- */
    --m-touch-min: 44px;      /* min tap target (Apple HIG)            */
    --m-header-h: 56px;       /* compact mobile header row-1 height    */
    --m-bottomnav-h: 56px;    /* fixed bottom tab-bar height           */
    --m-scrim-h: 40px;        /* menu drawer scroll-affordance scrim   */
    --m-gap: 12px;

    /* --- color hooks (dark app-bar default; a shop can override to light) --- */
    --m-header-bg: #222831;            /* dark app-bar surface (header + menu + bottom nav) */
    --m-header-fg: #ffffff;            /* icons + text on the dark surfaces */
    --m-accent: #ff4f8b;               /* brand accent (badges, active, counts) */
    --m-border: rgba(255, 255, 255, .14); /* dividers on the dark surfaces */
    /* chevron drawn in the menu drawer's scroll scrim. Inline SVG rather than a
       FontAwesome glyph: the scrim is the sole carrier of the "more below" affordance,
       so it must not depend on a webfont that may still be loading (tofu) or that a
       shop upgraded to FA5/6 (where font-family:FontAwesome stops resolving). The
       stroke is baked in — a shop flipping the drawer to a LIGHT surface overrides
       this token alongside --m-header-fg. */
    --m-scrim-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");

    /* --- layering: kept BELOW Bootstrap-3 modal backdrop(1040)/modal(1050) --- */
    --m-z-header: 1029;
    --m-z-bottomnav: 1031;
}

/* NOTE: these were global but are scoped to mobile so DESKTOP rendering is untouched
   (the global img reset could alter fixed-size desktop images/SVGs). */
@media (max-width: 767.98px) {
    /* media never overflows its container */
    img, picture, video, svg { max-width: 100%; }
    img, picture, video { height: auto; }

    /* reusable touch-target utility */
    .m-touch { min-width: var(--m-touch-min); min-height: var(--m-touch-min); }

    /* visible keyboard focus (shop resets may strip outlines) */
    .m-touch:focus-visible,
    .mobile-bottom-nav a:focus-visible,
    .mobile-bottom-nav .m-sort-trigger:focus-visible {
        outline: 2px solid var(--m-accent);
        outline-offset: 2px;
    }
}

/* iOS zooms the page when a focused text field has font-size < 16px. The theme renders
   form inputs at 13-14px, so EVERY form (login, register, contact, search, account,
   checkout, newsletter) triggers a jarring zoom on focus. Force >=16px for text-like
   inputs on mobile (selects open a native picker so they're for legibility only). Inputs
   are already full-width on mobile, so the larger text adds no horizontal overflow.
   Desktop (>=768px) is untouched. */
@media (max-width: 767.98px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="search"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input:not([type]), select, textarea {
        /* !important: the theme has higher-specificity per-page rules (e.g.
           .inputs input) that otherwise keep these at 14px and re-trigger iOS zoom. */
        font-size: 16px !important;
    }
}

/* The theme sets body{overflow:hidden}, which turns <body> into a scroll container and
   BREAKS position:sticky on the header. Replace with overflow-x:clip (no scroll
   container, still no horizontal scroll) + overflow-y:visible so html/viewport is the
   scrollport and sticky works. !important to beat the minified body{overflow:hidden}. */
@media (max-width: 767.98px) {
    body { overflow-x: clip !important; overflow-y: visible !important; }
}

/* primary form actions on the account / contact form pages render as a small,
   left-aligned button (e.g. the 67px "Save" on customer-info) — easy to miss / hard
   to tap on a phone. Make the primary submit button full-width + a 44px tap target.
   Layout-only (no color) and scoped to these form pages, so product/cart CTAs and
   desktop (>=768px) are untouched. */
@media (max-width: 767.98px) {
    /* The primary action on these form pages is a .btn-primary (save-customer-info-button,
       change-password-button, contact-us-button, add-address-button, …) — NOT always a
       .button-1 and not always inside a .buttons wrapper. Target .btn-primary scoped to
       the page so every primary submit is full-width + 44px. Secondary .btn-default
       (Edit/Delete) stay inline. The header search button is .btn (not .btn-primary) and
       lives outside these wrappers, so it is unaffected. */
    .account-page .btn-primary,
    .account-page .buttons .button-1,
    .contact-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }
    /* private-message compose (/customer/messages/new): same form ergonomics —
       44px inputs, tall message box, stacked full-width Send/Cancel */
    .private-message-send-page .form-control { min-height: var(--m-touch-min); box-sizing: border-box; }
    .private-message-send-page textarea.form-control { min-height: 160px; }
    .private-message-send-page .send-pm-button,
    .private-message-send-page .cancel-pm-button {
        display: block; width: 100%; min-height: var(--m-touch-min);
        box-sizing: border-box; margin: 0 0 10px; float: none;
    }
    /* BB-code toolbar buttons above the message box: wrap + tappable */
    .private-message-send-page .bb-code-editor-wrapper {
        display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%;
    }
    .private-message-send-page .bb-code-editor-wrapper .bb-code-editor-button {
        min-width: 36px; min-height: 36px;
    }
    /* cart coupon / gift-card apply buttons render 34px tall — below the 44px
       touch minimum (flagged in the GOL001 checkout-flow audit). The grouped
       B2B cart pins button AND input to a joined 34px row with !important
       (wwwroot/css/shopping-cart-grouped.css:1748-1784), so this needs equal
       !important + later source order + the page-class specificity bump. The
       input is raised with the button to keep the joined pair aligned. */
    .shopping-cart-page .full-cart-discount-box .cart-box-wrapper input[type="text"],
    .shopping-cart-page .full-cart-gift-card-box .cart-box-wrapper input[type="text"],
    .shopping-cart-page .full-cart-discount-box .discount-button button,
    .shopping-cart-page .full-cart-gift-card-box .giftcard-button button {
        height: var(--m-touch-min) !important;
        min-height: var(--m-touch-min) !important;
        box-sizing: border-box;
    }
    /* fallback for the standard (non-grouped) cart layout */
    .shopping-cart-page .apply-discount-coupon-code-button,
    .shopping-cart-page .apply-gift-card-coupon-code-button,
    .shopping-cart-page .add-gift-card-button {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    /* cart quantity fields: the matrix pack input renders 29px and the standard
       cart .qty-input is similarly short — sub-40px touch targets on the page's
       most-used control. 40px (not 44) keeps the matrix row alignment intact. */
    .shopping-cart-page input[id^="packquantity"],
    .shopping-cart-page .size-input-inline,
    .shopping-cart-page .qty-input {
        min-height: 40px; box-sizing: border-box;
    }
    /* secondary full-width action under the items list. The grouped-cart css
       pins it to 32px with !important (shopping-cart-grouped.css:1093) — match
       the !important at higher specificity + later order. */
    .shopping-cart-page .continue-shopping-button,
    .shopping-cart-page .full-cart-continue-shopping-button {
        min-height: var(--m-touch-min) !important;
        height: auto !important;
        box-sizing: border-box;
    }
    /* CONSISTENCY: the Contact 'Submit' was the only primary CTA rendered in dark gray
       (#333) — every other primary action (Login, Register, Search, Add to cart, Save,
       Change password, Details) uses the brand coral (--red). Align it. */
    .contact-page .contact-us-button {
        background: var(--red, #ea5648) !important;
        border-color: var(--red, #ea5648) !important;
        color: #fff !important;
    }
}

/* reserve space so the fixed bottom nav never covers content/footer.
   scoped to portrait because the bottom nav is hidden in landscape. */
@media (max-width: 767.98px) and (orientation: portrait) {
    body { padding-bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* back-to-top widget (#backTop, theme _Root.cshtml): simplex.js pins it inline at
   bottom:40 / right:40 (position:fixed) and fades it in past 200px scroll — at
   bottom:40 it overlapped the fixed bottom tab bar. Originally core HID it on mobile
   (GOL001-era decision); revised 2026-06-05 (user, CHR001 round): long mobile pages
   benefit from a scroll-to-top affordance, so core now RE-SEATS it above the tab bar
   instead. !important is required to beat the plugin's inline bottom/right (a
   stylesheet !important outranks inline styles). Portrait-scoped: the bottom nav is
   hidden in landscape, where the theme's default seat is correct. The button colour
   comes from the shop's own tokens (--red / --rd-accent-red) = shop layer. */
@media (max-width: 767.98px) and (orientation: portrait) {
    #backTop {
        bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
        right: 16px !important;
        transition: bottom .25s ease, opacity .2s ease;
        /* READABILITY pass (user, GOL002 round): the theme's 55px square FAB
           (35px + 2x10px padding, brand-coloured) sat heavily over content.
           Mobile: 44px CIRCLE (24px + 2x10px padding keeps the sprite glyph
           centred), translucent at rest so the page reads through, full
           opacity on press. Colour still flows from the shop's own tokens. */
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        opacity: .9;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
        /* the theme's top-arrow.png sprite goes blurry/faint at FAB scale
           (user report) — draw a crisp FontAwesome chevron instead. */
        background-image: none !important;
    }
    #backTop::after {
        content: "\f077";                 /* fa chevron-up */
        font: normal normal normal 16px/24px FontAwesome;
        color: #fff;
        display: block;
        text-align: center;
        text-indent: 0;                   /* parent hides its text at -9999px */
    }
    /* shop skins re-paint the sprite on :hover via the background SHORTHAND
       (wigstheme: `#backTop:hover { background: url(../Themes/SimplexTheme/Content/css/top-arrow.png) ... }`) —
       on tap that stacked the unscaled sprite behind/over the FA chevron
       (user report: distorted on click). Mute the image in EVERY state;
       only the bg-color may change. */
    #backTop:hover, #backTop:active, #backTop:focus {
        opacity: 1;
        background-image: none !important;
    }
    /* pages with a SHOWN sticky CTA bar (PDP add-to-cart / cart checkout —
       .m-pdp-cta.m-show, ~60px: 44px button + 8px paddings) share the same
       right-bottom corner: the arrow parked ON the CHECKOUT button (user
       screenshot, CHR001 round). Keep the right-edge stack ordered
       bottom-nav -> CTA bar -> backTop; the transition above slides the
       arrow back down when the CTA hides. */
    html:has(.m-pdp-cta.m-show) #backTop {
        bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 60px + 12px) !important;
    }
}

/* B2B size-matrix pack inputs (PDP): the ProductMatrix plugin sets font-size:12px
   !important from an in-body <style> at up to (0,3,0) specificity
   (.matrix-container[data-is-pack-sale="true"] .pack-input-individual), which beats the
   generic 16px rule above and re-triggers the iOS focus-zoom. Out-rank it (html prefix
   -> (0,3,1)); the id arm covers the global #pack-count-input spinner. 2-3 digit pack
   counts still fit the 45px-wide matrix cells at 16px. */
@media (max-width: 767.98px) {
    html .matrix-container[data-is-pack-sale="true"] .pack-input,
    html .matrix-container[data-is-pack-sale="true"] .pack-input-individual,
    html .matrix-container .pack-input,
    html .matrix-container .pack-input-individual,
    html #pack-count-input, html .pack-count-input {
        font-size: 16px !important;
    }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- cross-page consistency (mobile) ---------- */
@media (max-width: 767.98px) {
    /* page titles: centre them on every page (account/contact pages were already
       centred, login/search/cart/wishlist were left-aligned). The .page-title is a direct
       child of .page (NOT inside .master-wrapper-main). */
    .page > .page-title { text-align: center !important; }

    /* page titles: top breathing room. Measured on /login at 390px: 2px below the
       sticky header — the heading reads as clipped/distorted (user report).
       Desktop already has ~80px above the title, so top margin is mobile-only. */
    .page > .page-title { margin-top: 14px; }
}

/* page titles, ALL viewports: the title sat 0px above the first content block on
   both mobile AND desktop (user report 2026-06-04) — give it bottom separation.
   Vertical margin only; no structural change. */
.page > .page-title { margin-bottom: 16px; }

/* ---------- login page (mobile) ---------- */
@media (max-width: 767.98px) {
    /* form ergonomics: Email/Password rendered 34px and LOG IN/REGISTER 40px —
       below the 44px touch minimum. Same pattern as the account/contact fix above. */
    .login-page input[type="text"],
    .login-page input[type="email"],
    .login-page input[type="password"] {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    .login-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }

    /* checkout (onepage): billing form-controls rendered 34px and the
       next-step buttons 40px (GOL002 audit 2026-06-04) — same ergonomics floor
       as the login/account/contact pages. Scoped to the checkout page only. */
    .checkout-page .form-control,
    .checkout-page select.form-control,
    .checkout-page input[type="text"],
    .checkout-page input[type="email"],
    .checkout-page input[type="tel"] {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    .checkout-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }

    /* a returning visitor's primary job on /login is LOGGING IN, but the form sat
       below the NEW CUSTOMER pitch (one full screen of scrolling, partially under
       the bottom tab-bar). Flip the stack order on mobile only: returning-customer
       form first, register pitch second. The returning column is the row's LAST
       child in every Login.cshtml branch. Bootstrap .row ::before/::after clearfix
       must not become flex items (proven item-grid gotcha). */
    .login-page .customer-blocks .row { display: flex; flex-direction: column; }
    .login-page .customer-blocks .row::before,
    .login-page .customer-blocks .row::after { content: none; }
    .login-page .customer-blocks .row > div:last-child { order: -1; }
}

/* print: never let fixed/sticky chrome cover printed content */
@media print {
    .header .header-lower { position: static !important; }
    .mobile-bottom-nav { display: none !important; }
}

/* grouped-cart per-size qty inputs (29px) + save/remove icon buttons (40px)
   sat under the 44px touch floor (sweep finding D3). The grouped cart css
   pins sizes with !important - counter with equal !important + page scope. */
@media (max-width: 767.98px) {
    .shopping-cart-page .size-input-inline {
        min-height: var(--m-touch-min, 44px) !important;
        box-sizing: border-box;
    }
    .shopping-cart-page .full-cart-update-color-btn,
    .shopping-cart-page .full-cart-remove-color-btn {
        min-height: var(--m-touch-min, 44px) !important;
        min-width: 50px;
        box-sizing: border-box;
    }
}

/* v2 — #backTop follows the v3 chrome (mobile-header-v3 / mobile-product-v3):
   - hidden while the header is hidden (scrolling down): it is only useful on the way
     back up, and at rest it covered the order rows' remove buttons (measured);
   - with the PDP CTA shown the tab bar is gone, so it stacks in the left gutter above
     the a11y trigger instead of on the right-edge tower. */
/* scoped to max-width (single condition, NFR-02) — both hooks only arise on mobile, but a
   phone resized/rotated past 767px must not keep the left-gutter seat. */
@media (max-width: 767.98px) {
    body.m-hdr-hidden #backTop {
        opacity: 0 !important;
        pointer-events: none;
    }
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) #backTop {
        left: 4px !important;
        right: auto !important;
        width: 12px !important;
        height: 12px !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px + 32px + 8px) !important;
    }
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) #backTop::after {
        font-size: 12px;
        line-height: 12px;
    }
}

/* =====================================================================================================================
   notifications-v1.css - toast notifications (core, all shops); behaviour in js/notifications-v1.js.

   WHY: the stock .bar-notification was a full-width coloured strip fixed over the header (green success / red error,
   14px centred white text, a PNG close at 20px). Now a card: top right under the header on desktop, above the tab bar
   on phones, with a type icon, an accent rail, a 32px close button and a countdown line while it auto-hides.

   SHOP TOKENS: set them in a GLOBAL `:root { }` of the shop's mobile-shop-overrides.css (no :root here on purpose:
   every rule reads var(--nt-x, <neutral default>)).
     --nt-font  --nt-size        family / size of the message      --nt-bg  --nt-fg   card background / text
     --nt-border                 card hairline                     --nt-radius        card corners
     --nt-success / -error / -warning   accent rail, icon and countdown per type
     --nt-link                   links inside the message ("shopping cart")       --nt-muted   close glyph
     --nt-top                    desktop distance from the top of the window (clear of the shop's header)
     --nt-shadow                 card shadow
   Specificity: #bar-notification + class (1,1,0) beats simplex.styles.css .bar-notification (0,1,0..0,2,1).
   Cache: bump the file name (-v2) on any change (and in Head.cshtml).
   ===================================================================================================================== */

#bar-notification.bar-notification-container {
    position: fixed;
    top: var(--nt-top, 96px);
    right: 16px;
    left: auto;
    z-index: 1000000002;   /* above the floating a11y trigger (1000000000) and #backTop */
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

#bar-notification .bar-notification.nt-toast {
    --nt-accent: var(--nt-success, #2e7d4f);
    position: relative;
    top: auto;
    left: auto;
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 14px 48px 14px 16px;
    border: 1px solid var(--nt-border, #e3e3e3);
    border-left: 4px solid var(--nt-accent);
    border-radius: var(--nt-radius, 6px);
    background: var(--nt-bg, #fff);
    color: var(--nt-fg, #222);
    box-shadow: var(--nt-shadow, 0 12px 32px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06));
    font-family: var(--nt-font, inherit);
    font-size: var(--nt-size, 14px);
    line-height: 1.45;
    text-align: left;
    overflow: hidden;
    pointer-events: auto;
    animation: nt-in .22s ease-out both;
}
#bar-notification .bar-notification.nt-toast.error { --nt-accent: var(--nt-error, #b3261e); }
#bar-notification .bar-notification.nt-toast.warning { --nt-accent: var(--nt-warning, #a15c00); }

#bar-notification .nt-icon { flex: 0 0 20px; height: 20px; margin-top: 1px; color: var(--nt-accent); }
#bar-notification .nt-icon svg { display: block; }
#bar-notification .nt-body { flex: 1 1 auto; min-width: 0; }
#bar-notification .bar-notification.nt-toast p.content {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
}
#bar-notification .bar-notification.nt-toast p.content + p.content { margin-top: 6px; }
#bar-notification .bar-notification.nt-toast p.content a {
    color: var(--nt-link, var(--nt-accent));
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#bar-notification .bar-notification.nt-toast p.content a:hover { color: var(--nt-link, var(--nt-accent)); text-decoration: none; }

#bar-notification .bar-notification.nt-toast .close {
    position: absolute;
    top: 8px;
    right: 8px;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--nt-muted, #666);
    opacity: 1;
    cursor: pointer;
}
#bar-notification .bar-notification.nt-toast .close svg { width: 18px; height: 18px; }
#bar-notification .bar-notification.nt-toast .close:hover { background: rgba(0, 0, 0, .06); color: var(--nt-fg, #222); }
#bar-notification .bar-notification.nt-toast .close:focus-visible { outline: 2px solid var(--nt-fg, #222); outline-offset: 1px; }

/* countdown while a success auto-hides; stops while hovered / focused */
#bar-notification .nt-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--nt-accent);
    opacity: .35;
    transform-origin: left center;
    animation: nt-countdown linear forwards;
}
#bar-notification .nt-toast.is-paused .nt-progress { animation-play-state: paused; }
#bar-notification .nt-toast.is-leaving { animation: nt-out .18s ease-in forwards; }

@keyframes nt-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes nt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes nt-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* phones: full width above the bottom tab bar (and above the PDP's add-to-cart bar when it is up) */
@media (max-width: 767.98px) {
    #bar-notification.bar-notification-container {
        top: auto;
        right: 12px;
        left: 12px;
        bottom: calc(var(--m-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
        width: auto;
    }
    html:has(.m-pdp-cta.m-show) #bar-notification.bar-notification-container {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px);
    }
    @keyframes nt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes nt-out { to { opacity: 0; transform: translateY(6px); } }
}

@media (prefers-reduced-motion: reduce) {
    #bar-notification .bar-notification.nt-toast,
    #bar-notification .nt-toast.is-leaving { animation: none; }
    #bar-notification .nt-progress { display: none; }
}

/* ============================================================
   mobile-header-v3.css  —  CORE mobile header overrides (<= 767px)
   (v3 = filename cache-bust, adds hide-on-scroll; static assets ship with a 1-year max-age and
    bundling is OFF, so the suffix MUST be bumped on every content change)
   ------------------------------------------------------------
   Loaded LAST so it wins source-order ties. Rules are scoped
   one level deeper (.header .header-lower ...) to beat the
   existing !important-laden rules in simplex.styles.responsive.css
   WITHOUT adding more !important. RTL-safe: logical properties.
   Visually neutral: colors come from --m-* tokens only.
   ============================================================ */

/* bottom nav is hidden by default; shown only on mobile (below) */
.mobile-bottom-nav { display: none; }

/* --m-scrim-h / --m-scrim-arrow (the drawer's scroll-scrim tokens) live with every
   other --m-* token in mobile-foundation.css, which loads FIRST — a shop overriding
   them there must win, and a :root block here would silently outrank it. */

@media (max-width: 767.98px) {

    /* ---------- top utility row: compact, single line ---------- */
    .header .header-upper { padding-block: 4px; font-size: 12px; }
    .header .header-upper .row {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--m-gap); margin: 0;
    }
    .header .header-upper [class*="col-"] { width: auto; float: none; padding: 0; }
    .header .header-upper .header-selectors-wrapper { display: flex; gap: 8px; align-items: center; }

    /* ---------- sticky compact main header ----------
       Row 1: [≡] [logo (center)] [cart]
       Row 2: [ full-width search ]
       Sticky is applied to the WHOLE .header (not .header-lower) so its containing
       block is the tall page wrapper — otherwise sticky un-pins once the short
       .header scrolls past (~160px). The announcement bar sits OUTSIDE .header and
       scrolls away as intended. */
    .header {
        position: sticky; inset-block-start: 0; z-index: var(--m-z-header);
        background: var(--m-header-bg);
    }
    .header .header-lower {
        background: var(--m-header-bg); color: var(--m-header-fg);
        border-block-end: 1px solid var(--m-border);
    }
    .header .header-lower .row {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--m-gap); margin: 0; min-height: var(--m-header-h);
    }
    .header .header-lower .row > [class*="col-"],
    .header .header-lower .m-menu-toggle-wrap { width: auto; float: none; padding: 0; }

    /* flex ordering (cols carry identifying classes from _Header.cshtml) */
    .header .header-lower .m-menu-toggle-wrap { order: 1; flex: 0 0 auto; }
    .header .header-lower .header-logo-col   { order: 2; flex: 1 1 auto; text-align: center; }
    .header .header-lower .header-cart-col   { order: 3; flex: 0 0 auto; }
    .header .header-lower .header-search-col { order: 5; flex: 1 0 100%; }

    .header .header-lower .header-logo img { max-height: 40px; width: auto; display: inline-block; }
    /* full-width, prominent mobile search (best practice). simplex pins .search-box and
       .search-nav to a fixed 260px on mobile — override with !important to fill the row. */
    .header .header-lower .search-box,
    .header .header-lower .search-box .navbar-form,
    .header .header-lower .search-box .form-group {
        width: 100% !important; margin: 0 !important; position: relative;
        float: none !important; display: block !important;
    }
    /* simplex.styles.responsive.css sets .header-lower .search-box{overflow:hidden}
       on mobile, which CLIPS the .ui-autocomplete dropdown (appendTo:'.search-box',
       absolute below the input) — suggestions fetched fine but never visible. */
    .header .header-lower .search-box { overflow: visible; }
    /* jQuery UI sizes the menu off the theme's 260px desktop pill — span the
       full mobile search row instead (inline width needs !important). */
    .header .header-lower .search-box .ui-autocomplete {
        width: 100% !important; left: 0 !important; right: 0;
    }
    /* the search-box .form-group has max-width:260px in the theme — lift that cap */
    .header .header-lower .header-search-col .search-box .form-group {
        width: 100% !important; max-width: none !important;
    }
    .header .header-lower .search-box .search-nav,
    .header .header-lower .search-box input#small-searchterms,
    .header .header-lower .search-box input.form-control {
        width: 100% !important; max-width: none !important; box-sizing: border-box; float: none !important;
    }
    /* ----- search as a pill on the app-bar (works on the dark surface) -----
       44px pill/button (was 40px — under the touch floor; flagged on the
       CHR001 round sweep and shop-patched there; promoted to core 2026-06-05) */
    .header .header-lower .search-box .search-nav {
        background: rgba(255, 255, 255, .12) !important; border: 0 !important;
        border-radius: 999px; color: var(--m-header-fg) !important;
        height: 44px; padding-inline-start: 16px; padding-inline-end: 46px;
    }
    .header .header-lower .search-box .search-nav::placeholder { color: rgba(255, 255, 255, .65); }
    /* magnifier: drop the dark sprite (invisible on dark) → white Font Awesome glyph */
    .header .header-lower .search-box .search-box-button {
        position: absolute; inset-inline-end: 0; inset-block-start: 0;
        width: 44px; height: 44px; background: none !important; border: 0;
        color: var(--m-header-fg); font-size: 0; cursor: pointer;
    }
    .header .header-lower .search-box .search-box-button::before {
        font: normal normal normal 16px/1 FontAwesome; content: "\f002";
    }

    /* ----- dark app-bar: light text/icons across header, menu, bottom nav ----- */
    .header .header-lower,
    .header .m-menu-toggle,
    .header .header-cart-col .ico-cart { color: var(--m-header-fg); }
    .header-menu .navbar-collapse.in a,
    .header-menu .navbar-collapse.in .nav > li > a,
    .header-menu .navbar-collapse.in .nav li a,
    #mobile-menu .mobile-menu-account .header-top-right li a { color: var(--m-header-fg) !important; }
    /* subcategory submenus (.dropdown-menu / .sub-menusu) default to a WHITE background —
       on the dark drawer that shows as a white band. Make them transparent so the dark
       panel shows through, with light text + light expand arrows. */
    .header-menu .navbar-collapse.in .dropdown-menu,
    .header-menu .navbar-collapse.in .sub-menusu,
    .header-menu .navbar-collapse.in ul ul {
        background: transparent !important; border: 0 !important; box-shadow: none !important;
    }
    /* parent categories EXPAND on tap (no navigation): collapsed by default, shown when
       mobile-header.js adds .m-open. This is the single source of truth for submenu
       visibility on mobile, overriding any hover/ajax inline display. */
    .header-menu .navbar-collapse.in li.dropdown > .dropdown-menu { display: none !important; }
    .header-menu .navbar-collapse.in li.dropdown.m-open > .dropdown-menu { display: block !important; }
    .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down { transition: transform .2s ease; }
    .header-menu .navbar-collapse.in li.dropdown.m-open > .fa-angle-down { transform: rotate(180deg); }
    /* "All {category}" link at the top of each submenu (reaches the parent page) */
    .header-menu .navbar-collapse.in .m-viewall a { font-style: italic; opacity: .85; }
    .header-menu .navbar-collapse.in .dropdown-menu a { padding-inline-start: 30px; }
    .header-menu .navbar-collapse.in .fa-angle-down,
    .header-menu .navbar-collapse.in .fa-angle-right,
    .header-menu .navbar-collapse.in [class*="angle"] {
        color: var(--m-header-fg) !important; background: transparent !important; border: 0 !important;
    }
    /* active/open category: subtle light highlight (not a clashing colour band) */
    .header-menu .navbar-collapse.in .nav > li.active > a,
    .header-menu .navbar-collapse.in .nav > li.open > a {
        background: rgba(255, 255, 255, .06) !important;
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav .m-sort-trigger { color: var(--m-header-fg); }
    .mobile-bottom-nav .cart-qty:not(:empty),
    #mobile-menu .mobile-menu-account .header-top-right .wishlist-qty { color: var(--m-accent); }

    /* compact the header cart to icon-only (the verbose label/qty would wrap to its own
       row). Text kept for screen readers (sr-only). Live count lives in the bottom nav. */
    /* vertically centre the cart icon. simplex pins .ico-cart/.shopping-cart-link to
       mismatched heights (20/35px) so the 44px icon overflows and sits low. Normalise
       the whole chain to a single flex-centred 44px box. */
    .header .header-lower .header-cart-col,
    .header .header-lower .header-cart-col #flyout-cart,
    .header .header-lower .header-cart-col .shopping-cart-link,
    .header .header-lower .header-cart-col .ico-cart {
        display: flex; align-items: center; justify-content: center;
        height: auto !important; min-height: var(--m-touch-min);
        margin: 0; padding: 0 !important; float: none;
    }
    /* the cart sprite (cart-icon.png) is a 2-frame vertical sprite; a 44px box exposed
       BOTH frames (the "doubled" cart). Drop the sprite and use a crisp Font Awesome
       glyph instead — vector, single icon, consistent with the bottom nav cart.
       Shops may override .ico-cart::before to restore their own branded icon. */
    .header .header-lower .header-cart-col .ico-cart {
        float: none; display: inline-flex; align-items: center; justify-content: center;
        min-width: var(--m-touch-min); min-height: var(--m-touch-min);
        padding: 0 !important; background: none !important; position: relative;
        color: inherit; text-decoration: none;
    }
    .header .header-lower .header-cart-col .ico-cart::before {
        font: normal normal normal 22px/1 FontAwesome; content: "\f07a";
    }
    /* live count badge on the header cart icon (populated by mobile-header.js) */
    .header .header-lower .header-cart-col .ico-cart .m-cart-badge {
        position: absolute; inset-block-start: 0; inset-inline-end: 0;
        min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
        border-radius: 8px; background: var(--m-accent); color: var(--m-header-bg);
        font: 700 10px/16px sans-serif; text-align: center;
    }
    .header .header-lower .header-cart-col .ico-cart .m-cart-badge:empty { display: none; }
    .header .header-lower .header-cart-col .cart-label,
    .header .header-lower .header-cart-col .cart-qty {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    /* the hover/ajax flyout-cart DROPDOWN is a desktop feature; on mobile the cart icon
       links straight to /cart. Hide the dropdown so it can't cover the header or get
       stuck open after an add-to-cart / notification (the toast gives the feedback). */
    .header-cart-col .flyout-cart-wrapper,
    #flyout-cart .flyout-cart-wrapper { display: none !important; }

    /* in-header hamburger (proxy button toggling the existing #mobile-menu) */
    .header .m-menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: var(--m-touch-min); min-height: var(--m-touch-min);
        background: transparent; border: 0; color: inherit;
        font-size: 22px; line-height: 1; cursor: pointer;
    }

    /* keep TopMenu widget zones, hide only its own toggle button */
    .header-menu { background: transparent; border: 0; padding: 0; min-height: 0; }
    .header-menu .navbar-header { display: none; }
    /* neutralise Bootstrap navbar-inverse's DARK background so it can't show as a dark
       band inside the white docked menu panel */
    .header-menu .navbar,
    .header-menu .navbar-inverse,
    .header-menu .navbar.category-menu {
        background: transparent !important; border: 0 !important; margin: 0; min-height: 0;
    }

    /* when BS3 collapse is open (.in) — and during its transition (.collapsing, which
       avoids a flash when UseAjaxMenu populates #mobile-menu async) — dock the panel
       under the sticky header. --m-header-stack-h is measured by mobile-header.js;
       falls back to row-1 height. */
    .header-menu .navbar-collapse.in,
    .header-menu .navbar-collapse.collapsing {
        position: fixed;
        inset-block-start: var(--m-header-stack-h, var(--m-header-h));
        inset-inline: 0;
        max-height: calc(100vh - var(--m-header-stack-h, var(--m-header-h)));
        /* 100vh is the LARGE viewport (URL bar collapsed): while iOS Safari shows its
           URL bar the panel's bottom edge sits BELOW the visible area and the last rows
           become unreachable. 100dvh tracks the live viewport; engines without dvh keep
           the line above. Applies in BOTH orientations — landscape has the same URL bar. */
        max-height: calc(100dvh - var(--m-header-stack-h, var(--m-header-h)));
        /* the drawer now runs to the very bottom of the viewport, so the last row would
           sit under the home indicator (100dvh includes it) and collide with the system
           swipe area. Pad instead of shrinking max-height: scroll reach is preserved and
           the sticky scrim's resting edge moves up with it. */
        padding-block-end: env(safe-area-inset-bottom, 0px);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        /* the scroll scrim below bleeds -15px each side to cancel BS3's inline padding;
           clip that bleed so it can never produce a horizontal scrollbar */
        overflow-x: hidden;
        /* WCAG 2.4.11 (Focus Not Obscured): keyboard focus landing on a row inside the
           scrim band would otherwise stay half-covered — the browser scrolls focus into
           view against the scrollport edge, which the sticky scrim overlaps. Reserve the
           scrim's height (+4px breathing room) so focus always ends up clear of it. */
        scroll-padding-block-end: calc(var(--m-scrim-h, 40px) + 4px);
        background: var(--m-header-bg); z-index: var(--m-z-header);
        border-block-start: 1px solid var(--m-border);
    }
    /* v4 (2026-10-03, menu UI/UX): the open drawer FILLS the space under the header. It used to end where its
       content ended (6 categories + a short account list = ~550px on a phone), so the page showed through below
       it with nothing to say it was behind a menu. Only on .in - .collapsing keeps BS3's animated height. */
    .header-menu .navbar-collapse.in {
        height: calc(100vh - var(--m-header-stack-h, var(--m-header-h))) !important;
        height: calc(100dvh - var(--m-header-stack-h, var(--m-header-h))) !important;
    }
    /* the hamburger turns into a close (x) while the drawer is open - its aria-expanded already follows the panel
       (mobile-header-v4.js setExpanded); shops that mask their own icon set swap the glyph on the same hook */
    .header .header-lower .m-menu-toggle[aria-expanded="true"] .fa-bars::before { content: "\f00d"; }
    /* The bottom tab bar (z 1031, portrait-only) sits ABOVE the drawer (z 1029) and
       covered its last rows. The previous fix stopped the panel exactly where the bar
       begins — which made the drawer's bottom hairline coincide with the bar's top
       hairline and read as a FALSE BOTTOM (nothing hinted at more content below).
       Instead: hide the bar while the drawer is open (same precedent as body.modal-open
       below, and the pattern Amazon/ASOS use) and let the drawer own the full height.
       Closing stays available via the sticky header hamburger and Escape.
       .m-pdp-cta (the sticky product CTA bar, z 1030 — mobile-product-v2.css) must go
       with it: it also outranks the drawer and, once the tab bar it rests on is gone,
       would float over the menu above a 56px hole. */
    html.m-menu-open .mobile-bottom-nav,
    html.m-menu-open .m-pdp-cta { display: none; }

    /* SCROLL AFFORDANCE — a sticky scrim + chevron pinned to the panel's own bottom
       edge, so a scrollable drawer never looks finished (NN/g "false bottom").
       sticky, not fixed: the panel is max-height (not height), so a fixed child would
       have to re-derive the portrait/safe-area geometry, and .in creates a stacking
       context at z 1029 that a fixed ::after could never escape anyway. Sticky rides
       the scrollport, is clipped by its overflow, and — with the negative block margin
       — contributes 0 to scrollHeight, so it can't influence the scrollable test.
       Scoped to .in (desktop keeps BS3's .navbar-collapse:after clearfix; inside .in
       the overflow:auto already establishes a BFC, so losing it here is inert).
       State classes toggle OPACITY ONLY — never box geometry. */
    .header-menu .navbar-collapse.in::after,
    .header-menu .navbar-collapse.collapsing::after {
        content: "";
        display: block;
        position: sticky; inset-block-end: 0;
        /* above the row chevrons (position:absolute; z-index:1, see below) */
        z-index: 2;
        block-size: var(--m-scrim-h, 40px);
        margin-block-start: calc(-1 * var(--m-scrim-h, 40px));
        /* cancel BS3 .navbar-collapse's 15px inline padding so the fade spans full width */
        margin-inline: -15px;
        /* The var() fallbacks here are deliberate duplication, not DRY sloppiness: this
           file carries a version suffix and mobile-foundation.css does NOT, so a
           returning visitor can hold a 1-year-cached foundation that predates these
           tokens. Without the fallbacks the shorthand would be invalid at
           computed-value time and the gradient would vanish with it — the affordance
           would silently disappear on exactly the users we shipped it for. A shop
           overriding the tokens in foundation still wins (it loads first). */
        background: var(--m-scrim-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"))
                    center bottom 6px / 18px 18px no-repeat,
                    linear-gradient(to top, var(--m-header-bg) 30%, transparent);
        pointer-events: none;
        opacity: 0; transition: opacity .18s ease;
    }
    .header-menu .navbar-collapse.in.m-scrollable::after { opacity: 1; }
    .header-menu .navbar-collapse.in.m-scroll-end::after { opacity: 0; }
    .header-menu .navbar-collapse.in .nav > li > a {
        min-height: var(--m-touch-min); display: flex; align-items: center;
    }
    /* ROOT CAUSE of "the categories are hidden and nothing says so":
       simplex.styles.responsive.css caps the category list itself at
       max-height:300px (400px under 375px) with overflow-y:scroll — a SECOND
       scroller nested inside the drawer's own scroller. Its rows were clipped
       mid-panel with the drawer still looking complete, and an expanded
       accordion could even land outside its scroll range (unreachable).
       Collapse it into a single scroll region: the drawer scrolls, the list flows.
       Selector deliberately carries the same ancestors as theirs (8 classes) so it
       wins on specificity without adding !important — file policy.
       .collapsing needs the SAME treatment: BS3's collapse.show() reads scrollHeight
       while the panel is .collapsing to animate to, so leaving the cap on there would
       open to the capped height and snap to full the moment .in lands. */
    .header-menu .main-menu .navbar.navbar-inverse .navbar-collapse.in .nav.navbar-nav,
    .header-menu .main-menu .navbar.navbar-inverse .navbar-collapse.collapsing .nav.navbar-nav {
        max-height: none;
        overflow: visible;
    }
    /* lock background scroll while the menu drawer is open (set by mobile-header.js).
       Lock the <html> scroll container (and body); overflow:hidden freezes at the
       current scroll offset so the docked menu stays aligned with the header. */
    html.m-menu-open, body.m-menu-open { overflow: hidden; }
    /* JOLT FIX (IJO001 report 2026-06-06): on desktop browsers with CLASSIC
       scrollbars (narrow-window testing), the locks above (and the search
       sheet's) REMOVE the scrollbar — the viewport widens ~17px and the whole
       page reflows ("출렁"). Reserve the gutter permanently in the mobile
       range: real phones use overlay scrollbars (no gutter, no effect),
       desktop windows keep a stable gutter so lock/unlock no longer shifts
       layout. */
    html { scrollbar-gutter: stable; }

    /* guarantee tap targets in header (header-lower only; header-upper account
       strip is hidden on mobile and moved into the menu — see below) */
    .header .header-lower a { min-height: var(--m-touch-min); }
    /* absorb the 44px min-height on the logo anchor without adding a visible gap */
    .header .header-lower .header-logo a {
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* ---------- density tightening (neutral: spacing/typography only) ---------- */
    /* trim header-lower padding + inter-row gap (logo row / search row) */
    .header .header-lower { padding-block: 6px; }
    .header .header-lower .row { gap: 6px; min-height: auto; }
    .header .header-lower .search-box { margin: 0; }
    /* header-upper: thin utility strip */
    .header .header-upper { padding-block: 2px; font-size: 11px; line-height: 1.2; }
    /* account links are MOVED into the hamburger menu on mobile (see TopMenu).
       Hide the cramped header-upper strip — its tiny sprite icons were poor touch
       targets and exposed a 2nd sprite frame (the "doubled" icons). */
    .header .header-upper .header-links { display: none; }

    /* account section inside the mobile menu: full-width, labeled, 44px tap rows.
       Drop the sprite background (avoids frame bleed) and show the text labels. */
    #mobile-menu .mobile-menu-account .header-top-right,
    #mobile-menu .mobile-menu-account .header-top-right ul {
        display: block; width: 100%; margin: 0; padding: 0;
    }
    #mobile-menu .mobile-menu-account .header-top-right li {
        display: block; float: none; width: 100%; margin: 0; border: 0;
    }
    #mobile-menu .mobile-menu-account .header-top-right li a {
        display: flex; align-items: center; gap: 8px; float: none !important;
        min-height: var(--m-touch-min); padding: 0 16px;
        background-image: none !important; font-size: 14px; width: auto;
        border-block-end: 1px solid var(--m-border);
    }
    #mobile-menu .mobile-menu-account .header-top-right .wishlist-qty,
    #mobile-menu .mobile-menu-account .header-top-right .inbox-unread { color: var(--m-accent); }
    /* uniform left rhythm for ALL drawer account rows (user report, CHR001
       round: Messages sat at 16px while the others sat at 30px). Shop skins
       pin their own desktop glyph offsets (wigstheme .ico-* padding-left:30px
       at higher specificity) and PLUGIN rows (.ico-inbox, NpcCustomerMessage)
       don't share those pins -> mixed indents. The !important on the padding
       here out-ranks every shop pin; 16px matches the section-title indent. */
    #mobile-menu .mobile-menu-account .header-top-right li a {
        padding: 0 16px !important;
    }

    /* 'Administration' / 'Manage this page' (AdminHeaderLinks, invoked inside
       HeaderLinks) already render in the persistent top admin bar
       (.admin-header-link, _Root.cshtml) — hide the duplicate drawer row. */
    #mobile-menu .mobile-menu-account .admin-header-links { display: none !important; }

    /* (1) section grouping: a labelled divider before the account block */
    #mobile-menu .mobile-menu-account { border-block-start: 2px solid var(--m-border); margin-block-start: 4px; }
    #mobile-menu .m-menu-section-title {
        padding: 12px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; opacity: .6; color: var(--m-header-fg);
    }
    /* (3) account-item icons (Font Awesome glyphs; the sprite bg was dropped earlier).
       position/transform resets: wigstheme-family skins absolute-pin these glyphs for
       their desktop header (.header-top-right ul li .ico-*::before { position:absolute;
       left:10px; transform:translateY(-50%) } ) — unreset, the glyph paints OVER the
       row text once the core 16px row padding applies (GOL001 drawer overlap report). */
    #mobile-menu .mobile-menu-account .header-top-right li a::before {
        font: normal normal normal 15px/1 FontAwesome; width: 20px; margin-inline-end: 4px;
        display: inline-block; text-align: center; opacity: .9;
        position: static; transform: none;
    }
    #mobile-menu .mobile-menu-account .ico-account::before { content: "\f007"; }   /* user */
    #mobile-menu .mobile-menu-account .ico-wishlist::before { content: "\f004"; }   /* heart */
    #mobile-menu .mobile-menu-account .ico-inbox::before { content: "\f0e0"; }      /* envelope */
    #mobile-menu .mobile-menu-account .ico-logout::before { content: "\f08b"; }     /* sign-out */
    #mobile-menu .mobile-menu-account .ico-register::before { content: "\f234"; }   /* user-plus */
    #mobile-menu .mobile-menu-account .ico-login::before { content: "\f090"; }      /* sign-in */
    #mobile-menu .mobile-menu-account .administration > a::before,
    #mobile-menu .mobile-menu-account a.ico-admin::before { content: "\f013"; }     /* gear */

    /* (2) expand affordance: pin the parent chevron to the right edge of the row so
       it clearly reads as "tap to expand" (it sits before the link in source). */
    .header-menu .navbar-collapse.in li.dropdown { position: relative; }
    .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down {
        position: absolute; inset-inline-end: 16px; inset-block-start: 15px;
        font-size: 16px; opacity: .8; pointer-events: none;
    }
    .header-menu .navbar-collapse.in li.dropdown > a.dropdown-toggle { padding-inline-end: 40px; }

    /* (2b) desktop hover affordances must not drive the drawer (IJO001 report
       2026-06-06, base-simplex shops): the theme opens .dropdown-menu on
       :hover and paints the parent row solid brand-red — on touch, hover
       goes sticky after a tap, and in narrow desktop windows the pointer
       pre-opens submenus over the accordion. Inside the OPEN drawer the core
       .m-open accordion is the ONLY opener, and rows keep their resting look. */
    .header-menu .navbar-collapse.in li.dropdown:not(.m-open) > .dropdown-menu,
    /* the theme's hover-openers carry an 8-class compound
       (.navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover) that
       out-ranks the drawer-scoped guard above — repeat their own compound
       plus :not(.m-open) to win, incl. the nested 3rd-depth variant. */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:not(.m-open):hover > .dropdown-menu,
    .header-menu li.dropdown .dropdown-menu li.dropdown:not(.m-open):hover > .dropdown-menu {
        display: none !important;
    }
    .header-menu .navbar-collapse.in li > a:hover,
    .header-menu .navbar-collapse.in li.dropdown > a.dropdown-toggle:hover {
        background: transparent !important;
        color: inherit !important;
    }
    /* (2c) submenu rows, minimal-readable: the theme styles drawer sublists
       as its desktop flyout (12px ITALIC + decorative glyphs) — normalise to
       plain indented 44px rows; the indent alone reads as hierarchy. */
    .header-menu .navbar-collapse.in .dropdown-menu li a {
        font-style: normal !important;
        font-size: 14px !important;
        min-height: var(--m-touch-min, 44px);
        display: flex !important;
        align-items: center;
        padding: 0 16px 0 32px !important;
        background: transparent !important;
        color: inherit !important;
        opacity: .85;
    }
    .header-menu .navbar-collapse.in .dropdown-menu li a:hover { opacity: 1; }
    .header-menu .navbar-collapse.in .dropdown-menu li::before,
    .header-menu .navbar-collapse.in .dropdown-menu li a::before,
    .header-menu .navbar-collapse.in .dropdown-menu li a i {
        display: none !important;
        content: none !important;
    }

    /* (2d) parents with children must READ differently from leaf rows
       (IJO001 report 2026-06-06): the markup ships a chevron span, but the
       theme HIDES it with an 8-class display:none !important
       (simplex.styles.responsive:222) and its #mobile-menu rule restyles the
       leftovers 30px/white/right-flush. Restore + normalise: quiet 16px FA
       chevron at the shared right inset; rotation on .m-open comes from the
       core rule above. pointer-events:none — taps land on the row link and
       mobile-header.js owns the accordion toggle. */
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > .fa-angle-down.visible-xs,
    .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > span.fa-angle-down,
    #mobile-menu li.dropdown > .fa-angle-down {
        display: inline-block !important;
        font: normal normal normal 16px/1 FontAwesome !important;
        position: absolute !important;
        inset-inline-end: 16px !important;
        inset-block-start: 15px !important;
        padding: 0 !important;
        opacity: .8;
        z-index: 1;
        pointer-events: none !important;
        cursor: default !important;
    }

    /* promo announcement bar eats ~98px (3 wrapped lines) on mobile — trim density
       modestly (this is shop-branded promo content; shops may override on their branch). */
    .announcement-bar { padding-block: 6px; }
    .announcement-bar .announcement-bar__text { font-size: 13px; line-height: 1.25; }
    /* the bar already has a dismiss (×) with localStorage persistence and sits in the
       document flow (scrolls away) — just guarantee the close control is a 44px target */
    .announcement-bar .announcement-bar__close {
        min-width: var(--m-touch-min); min-height: var(--m-touch-min);
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* ---------- fixed bottom tab bar ---------- */
    .mobile-bottom-nav {
        display: block; position: fixed; inset-inline: 0; inset-block-end: 0;
        z-index: var(--m-z-bottomnav);
        background: var(--m-header-bg); border-block-start: 1px solid var(--m-border);
        padding-block-end: env(safe-area-inset-bottom, 0px);
    }
    .mobile-bottom-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
    .mobile-bottom-nav li { flex: 1 1 0; text-align: center; }
    /* the Sort tab is a <button> (it toggles a sheet, it does not navigate) — it must
       render identically to the anchor tabs, so it shares every rule and adds a reset. */
    .mobile-bottom-nav a,
    .mobile-bottom-nav .m-sort-trigger {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; min-height: var(--m-bottomnav-h); padding: 6px 2px; position: relative;
        color: var(--m-header-fg); text-decoration: none; font-size: 11px; line-height: 1.1;
    }
    .mobile-bottom-nav .m-sort-trigger {
        width: 100%; border: 0; background: none; cursor: pointer;
        font-family: inherit; font-weight: inherit;
    }
    .mobile-bottom-nav a i,
    .mobile-bottom-nav .m-sort-trigger i { font-size: 18px; }
    /* cart count is a BADGE on the icon corner (not a stacked line) so the cart item
       keeps the same icon+label rhythm as the other tabs */
    .mobile-bottom-nav .cart-qty:empty { display: none; }
    .mobile-bottom-nav .cart-qty:not(:empty) {
        position: absolute; inset-block-start: 3px; inset-inline-start: calc(50% + 3px);
        min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
        border-radius: 8px; background: var(--m-accent); color: #fff;
        font: 700 9px/15px sans-serif; text-align: center;
    }
}

/* hide bottom nav in landscape (preserve scarce vertical space) */
@media (max-width: 767.98px) and (orientation: landscape) {
    .mobile-bottom-nav { display: none; }
}

/* never trap users behind the bottom nav while a BS3 modal is open */
@media (max-width: 767.98px) {
    body.modal-open .mobile-bottom-nav { display: none; }
}

/* v3 — hide-on-scroll header (state: body.m-hdr-hidden, set by mobile-header-v3.js).
   transform (not top/position) so nothing below reflows while it slides. */
@media (max-width: 767.98px) {
    .header { transition: transform .2s ease; }
    body.m-hdr-hidden .header { transform: translateY(-100%); }

    /* the tab bar slides away while the PDP sticky CTA is on screen: the CTA already is
       the page's primary action, and stacking both left 66% of a 377x723 viewport for
       content (measured). The CTA drops to the bottom edge (mobile-product-v3.css). */
    .mobile-bottom-nav { transition: transform .25s ease; }
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) .mobile-bottom-nav { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .header, .mobile-bottom-nav { transition: none; }
}

/* Order history list (2-depth) — v2.
   v1 대비 바뀐 것: 위계를 굵기가 아니라 "크기"로 만들고, 상태에 의미색을 주고,
   Depth-2 를 Admin 주문편집의 grouped 뷰와 같은 2-레벨 테이블로 세웠다.

   ⚠️ 이 파일에 ?v= 를 붙이지 말 것 — 번들러가 물리 경로로 해석해 파일을 조용히 누락한다.
   갱신은 파일명 버전 증가(order-history-v3.css) + Head.cshtml 동시 수정.
   접두사는 oh- 로 통일한다 (기존 .order-item* 규칙과 충돌 방지). */

.oh-wrap {
    /* 사이트 스킴을 그대로 쓴다: simplex.styles.css :root 의 --red / --grey-black.
       ⚠️ --red 는 흰 배경 위 대비가 3.55 라 텍스트에 쓰면 AA 미달이다.
       채워진 버튼의 배경(흰 글자 위)으로만 쓰고, 링크·본문은 --oh-ink 를 쓴다. */
    --oh-primary: var(--red, #ea5648);
    --oh-secondary: var(--grey-black, #333);
    --oh-ink: var(--grey-black, #333);
    --oh-muted: #6b6b6b;          /* 흰 배경 5.33 / #fafafa 5.11 — AA 통과 */
    --oh-line: #e3e3e3;
    --oh-line-soft: #efefef;
    --oh-surface: #f7f7f7;
    --oh-depth2-bg: #fafafa;
}

/* ── search bar : 조작하는 곳을 데이터와 분리한다 ────────── */
.oh-searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px;
    background: var(--oh-surface);
}

.oh-searchbar .oh-keyword {
    flex: 1 1 260px;
    min-width: 0;
}

.oh-searchbar input[type="text"],
.oh-searchbar select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: var(--oh-ink);
    /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 */
    font-size: 16px;
}

.oh-searchbar .oh-period,
.oh-searchbar .oh-status {
    flex: 0 1 150px;
}

.oh-searchbar .oh-actions {
    display: flex;
    gap: 6px;
}

/* ── buttons ─────────────────────────────────────────────── */
.oh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background-color: var(--oh-secondary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease-in-out 0s;
}

.oh-btn:hover,
.oh-btn:focus {
    background-color: var(--oh-primary);
    color: #fff;
    text-decoration: none;
}

.oh-btn-primary {
    background-color: var(--oh-primary);
}

.oh-btn-primary:hover,
.oh-btn-primary:focus {
    background-color: var(--oh-secondary);
}

.oh-btn-ghost {
    background-color: transparent;
    border: 1px solid #c9c9c9;
    color: var(--oh-secondary);
}

.oh-btn-ghost:hover,
.oh-btn-ghost:focus {
    background-color: var(--oh-secondary);
    border-color: var(--oh-secondary);
    color: #fff;
}

.oh-btn:focus-visible,
.oh-more:focus-visible,
.oh-toggle:focus-visible,
.oh-link-sm:focus-visible {
    outline: 2px solid var(--oh-secondary);
    outline-offset: 2px;
}

.oh-btn[disabled] {
    opacity: .55;
    cursor: default;
}

.oh-btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.oh-link-sm {
    color: var(--oh-muted);
    font-size: 11px;
    text-decoration: underline;
}

.oh-link-sm:hover {
    color: var(--oh-ink);
}

/* ── toolbar ─────────────────────────────────────────────── */
.oh-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    font-size: 13px;
    color: var(--oh-muted);
}

.oh-toolbar .oh-bulk {
    display: flex;
    gap: 6px;
}

/* ── list ────────────────────────────────────────────────── */
.oh-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.oh-table thead th {
    padding: 10px 8px;
    border-bottom: 1px solid var(--oh-line);
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* 폭은 어림잡지 않고 실제 텍스트 폭을 재서 배분했다 (약 960px 콘텐츠 기준).
   ⚠️ table-layout:fixed 는 첫 행(thead)의 셀 폭만 본다 — 폭 클래스를 th 에도 붙여야 한다. */
/* 유틸리티 컬럼은 실측 콘텐츠 최소치로 조이고, 남는 폭은 전부 PRODUCT/SKU 에 넘긴다.
   상품명은 콤마로 이어진 목록이라 가장 넓은 행이 391px 를 원한다 — 여기가 폭을 가장 잘 쓰는 곳이다. */
.oh-table .oh-cell-toggle  { width: 40px; }
.oh-table .oh-cell-thumb   { width: 96px; }   /* 44px 썸네일 2장 + 간격 + 패딩 */
.oh-table .oh-cell-order   { width: 106px; }  /* 주문번호 89 @16/700 + 패딩 16 */
.oh-table .oh-num          { width: 72px; }   /* "240 pcs" @15/600 */
.oh-table .oh-total        { width: 92px; }   /* $2,144.88 @17/700 = 76 */
.oh-table .oh-cell-status  { width: 110px; }  /* pill 96 + 송장번호가 들어갈 여유 */
.oh-table .oh-cell-actions { width: 112px; }  /* Reorder 버튼 98 */

/* 🔴 이 두 컬럼은 %가 아니라 "SKU 고정 + 상품 auto" 다. 이유 두 가지:
   1) px 합(628) + 35% 는 컨테이너가 정확히 966px 일 때만 100% 가 된다. 더 넓으면 남는 폭을
      px 컬럼들이 비례 확대로 나눠 가지고(1605 뷰포트 실측 1.19배), depth-2 는 그 배분을
      재현할 방법이 없어 컬럼이 어긋난다. auto 컬럼 하나가 잉여/부족을 다 떠안으면 나머지는
      어느 폭에서도 지정값 그대로라 두 테이블이 같은 격자를 갖는다.
   2) auto 를 SKU 가 아니라 상품에 준다 — 남는 폭은 콤마로 이어진 상품명 목록에 가는 게 맞다.
   966px 에서는 상품 208 / SKU 130 으로 종전의 21.5% / 13.5% 와 정확히 같다. */
.oh-table .oh-cell-item    { width: auto; }
.oh-table .oh-cell-sku     { width: 130px; }

.oh-table td {
    padding: 14px 8px;
    border-bottom: 1px solid var(--oh-line);
    vertical-align: middle;
    font-size: 14px;
    color: var(--oh-ink);
}

.oh-table .oh-num,
.oh-table .oh-total {
    text-align: right;
    /* 금액·수량 자릿수를 맞춰 세로로 읽히게 한다 */
    font-variant-numeric: tabular-nums;
}

/* 위계는 굵기가 아니라 크기로 만든다.
   v1 은 6개 값이 전부 14px 이고 굵기만 달랐다 — 그래서 평평하게 읽혔다. */
.oh-table td.oh-total {
    font-size: 17px;
    font-weight: 700;
}

/* 수량 편차가 1개~338개다. 주문 규모를 가르는 값이라 묻어두면 안 된다. */
.oh-table td.oh-num {
    font-size: 15px;
    font-weight: 600;
}

.oh-num .oh-unit {
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 400;
}

.oh-cell-order .oh-orderno {
    display: block;
    color: var(--oh-ink);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.oh-cell-order .oh-orderno:hover {
    text-decoration: underline;
}

.oh-cell-order .oh-date {
    display: block;
    margin-top: 2px;
    color: var(--oh-muted);
    font-size: 12px;
}

.oh-cell-item,
.oh-cell-sku {
    min-width: 0;
    /* 2줄이 되면 가운데 정렬은 위아래로 흔들려 보인다. 첫 줄을 기준선으로 고정한다. */
    vertical-align: middle;
}

/* 여러 상품이 콤마로 이어져 오므로 줄바꿈을 허용하되 줄 수를 묶는다.
   행 높이는 썸네일(44px)+패딩(14x2)=72px 가 이미 잡고 있으므로, 그 안에 들어가는
   2줄까지는 공짜다 — 행 높이를 늘리지 않으면서 한 줄일 때보다 두 배를 보여준다.
   넘치는 만큼만 말줄임되고 전문은 title 에 있다. */
.oh-item-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* 상품명은 "무엇을 샀나"라 필요하지만, 금액·주문번호·수량보다 앞설 값은 아니다.
       한 단계 낮춰 크기·굵기가 함께 내려가는 단조로운 계단을 만든다. */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    /* 콤마·공백에서 먼저 끊고, 끊을 데가 없는 긴 코드만 강제로 자른다 */
    overflow-wrap: break-word;
}

.oh-item-more {
    display: block;
    color: var(--oh-muted);
    font-size: 11px;
}

/* SKU 는 보조 정보다. 이 스토어는 상품 74%가 Name == Sku 라 두 컬럼이 같은 값을 보일 때가
   많은데, 크기·색을 낮춰 두면 중복이 소음이 아니라 부연으로 읽힌다. */
.oh-cell-sku .oh-sku {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--oh-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* ── thumbnails ──────────────────────────────────────────── */
.oh-thumbs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oh-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--oh-line-soft);
    background: #fff;
}

.oh-thumb-more {
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── row ─────────────────────────────────────────────────── */
.oh-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    /* 아이콘이 currentColor 를 쓰므로 여기 색이 곧 아이콘 색이다.
       muted 로 두면 20px 스트로크가 배경에 묻혀 다시 안 보인다. */
    color: var(--oh-ink);
    line-height: 1;
    cursor: pointer;
}

/* ▸(U+25B8)는 12x10px 로 렌더됐고 폰트마다 모양이 달랐다.
   Lucide chevron 은 stroke 라 크기·굵기를 CSS 로 정확히 제어할 수 있다. */
.oh-toggle .oh-caret {
    display: block;
    width: 20px;
    height: 20px;
}

/* ⚠️ 회전으로 상태를 표현하지 않는다 — 이 테마에서 CSS transform 은 SVG 에 적용되지 않는다
   (45deg 를 줘도 bounding box 가 20x20 그대로였다). 두 아이콘을 바꿔 끼운다. */
.oh-toggle .oh-caret-open,
.oh-row[data-expanded="true"] .oh-toggle .oh-caret-closed {
    display: none;
}

.oh-row[data-expanded="true"] .oh-toggle .oh-caret-open {
    display: block;
}

.oh-toggle:hover .oh-caret {
    color: var(--oh-primary);
}

/* 행 아무 곳이나 눌러 펼칠 수 있다. 버튼·링크는 JS 가 제외한다. */
.oh-row[data-oh-rowtoggle] {
    cursor: pointer;
}

.oh-row[data-oh-rowtoggle]:hover td {
    background-color: #fafafa;
}

/* 마우스에는 :hover 로 행 단위 피드백을 주면서 키보드에는 아무것도 주지 않으면
   탭으로 이동하는 사용자는 자기가 어느 행에 있는지 알 수 없다. */
.oh-row[data-oh-rowtoggle]:focus-within td {
    background-color: #fafafa;
}

.oh-row[data-expanded="true"] td {
    background-color: #f5f7f8;
}

/* ── status pill : 7px 점 대신 읽히는 라벨 ───────────────── */
.oh-status-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 2px;
    background: #efefef;
    color: #5c5c5c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 틴트 배경 + 진한 글자. 네 조합 모두 5.65 이상으로 AA 를 넘는다.
   브랜드 red 는 여기 쓰지 않는다 — 그 색은 "누를 것"을 뜻한다. */
.oh-status-chip.oh-st-pending    { background: #fdf3d9; color: #7a5804; }
.oh-status-chip.oh-st-processing { background: #e4eefc; color: #1a4f8f; }
.oh-status-chip.oh-st-complete   { background: #e3f3ea; color: #1b6b45; }
.oh-status-chip.oh-st-cancelled  { background: #efefef; color: #5c5c5c; }

/* 송장번호는 상태의 부연이다 — 상태 pill 아래에 더 작고 흐리게. */
.oh-tracking,
.oh-shipped {
    display: block;
    margin-top: 3px;
    color: var(--oh-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-tracking {
    font-variant-numeric: tabular-nums;
}

.oh-rowactions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

/* ── depth-2 : Admin grouped 뷰와 같은 2-레벨 테이블 ─────── */
.oh-items-cell {
    padding: 0 !important;
    background: var(--oh-depth2-bg);
}

/* 좌우 패딩이 있으면 depth-2 테이블 폭이 depth-1 과 달라져 컬럼이 어긋난다.
   들여쓰기는 패딩이 아니라 첫 컬럼(oh-d2-pic 136px = toggle 40 + thumb 96)이 만든다. */
.oh-items {
    padding: 8px 0 12px;
}

.oh-d2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    /* auto 레이아웃이면 아래 폭은 제안일 뿐이라 패널마다 컬럼 위치가 달라진다 */
    table-layout: fixed;
}

.oh-d2 thead th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--oh-line);
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}

.oh-d2 td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--oh-line-soft);
    vertical-align: middle;
}

/* depth-1(.oh-table)의 9컬럼 경계 위에 depth-2 7컬럼을 얹는다 — 인접 2쌍(toggle+thumb,
   order+item)만 병합하면 두 테이블의 고정폭 총합이 652px 로 같아지고, 남는 폭은 양쪽 다
   유일한 auto 컬럼(item ↔ product)이 흡수한다. 컨테이너 폭이 얼마든 경계가 일치한다.
   덕분에 행을 펼쳐도 세로 괘선이 끊기지 않고 숫자열이 같은 x 좌표에서 읽힌다.
   ⚠️ calc(% + px) 로 두 컬럼을 한 칸에 합치는 매핑은 안 된다 — 크롬은 fixed 레이아웃에서
      %를 담은 calc 를 auto 로 취급해 다른 auto 컬럼과 남은 폭을 균등 분할한다(실측).
   ⚠️ 폭 클래스는 thead th 에도 붙어 있어야 한다 — 셀렉터가 클래스만 보므로 이미 충족. */
.oh-d2 .oh-d2-pic     { width: 136px; }   /* toggle 40 + thumb 96 */
.oh-d2 .oh-d2-product { width: auto; }    /* order 106 + item(auto) — 이쪽도 유일한 auto 컬럼 */
.oh-d2 .oh-d2-sizes   { width: 130px; }   /* sku */
.oh-d2 .oh-d2-price,
.oh-d2 .oh-d2-qty,
.oh-d2 .oh-d2-amount { text-align: right; font-variant-numeric: tabular-nums; }
.oh-d2 .oh-d2-price   { width: 72px; }    /* num */
.oh-d2 .oh-d2-qty     { width: 92px; }    /* total */
.oh-d2 .oh-d2-amount  { width: 110px; }   /* status */
.oh-d2 .oh-d2-act    { width: 112px; text-align: right; }  /* actions */

/* 이 컬럼은 depth-1 의 toggle(40) + thumb(96) 두 칸을 합친 것이라, 기본 패딩(8)만 두면
   사진이 캐럿 자리에서 시작한다. toggle 폭만큼 밀어 depth-1 썸네일과 같은 x 에서 시작시킨다. */
.oh-d2 td.oh-d2-pic {
    padding-left: 48px;   /* 40(toggle) + 8(셀 패딩) */
}

.oh-d2 .oh-d2-pic img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--oh-line-soft);
}

/* Level 1 — 상품. Admin 은 파랑(#eef2f8 / #3b9dc4)을 쓰지만 여기서는 무채색으로 세운다.
   브랜드 red 를 구조선에 쓰면 액션과 구분이 사라진다. */
.oh-d2-style > td {
    border-top: 2px solid var(--oh-secondary);
    background: #f2f2f2;
    font-weight: 700;
}

.oh-d2-name {
    font-size: 14px;
}

.oh-d2-name a {
    color: var(--oh-ink);
    text-decoration: none;
}

.oh-d2-name a:hover {
    text-decoration: underline;
}

.oh-d2-sku {
    display: block;
    margin-top: 1px;
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 400;
}

/* Level 2 — 색상. 배경을 흰색으로 두면 회색 상품 행과 자연히 계단이 진다. */
.oh-d2-color > td {
    background: #fff;
    font-weight: 400;
}

.oh-d2-colorcell {
    padding-left: 28px !important;
    border-left: 3px solid #d9d9d9;
}

.oh-d2-colorname {
    font-weight: 600;
}

.oh-d2-pack {
    margin-left: 6px;
    color: var(--oh-muted);
    font-size: 11px;
}

/* 사이즈 칩 — 체크아웃 확인 페이지의 .confirmation-size-slot 과 같은 모양("S: 2").
   같은 주문을 확인 화면과 이력 화면에서 볼 때 표기가 달라지면 같은 값인지 의심하게 된다. */
.oh-d2-sizes {
    color: #46535f;
}

/* 이 셀에 오는 건 표준 상품뿐이다 — 매트릭스는 아래 .oh-mx 격자로 빠졌다.
   컬럼이 depth-1 SKU 폭(13.5% ≈ 130px)에 맞춰졌으므로 한 줄 고정이면 칩이 잘린다. 줄바꿈시킨다. */
.oh-sizes-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 3px;
    align-items: center;
}

.oh-size {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}

.oh-size-label {
    color: #777;
}

.oh-size-qty {
    color: var(--oh-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── 매트릭스 격자 (색상 x 사이즈) ──────────────────────── */
/* 우측 패딩 112px = depth-2 act 컬럼 폭. 격자의 오른쪽 끝이 amount 컬럼 오른쪽 끝과 만나므로
   아래 mx-qty 92 / mx-amt 110 이 depth-2 qty / amount 와 같은 x 좌표에 떨어진다. */
.oh-d2-matrixrow > td {
    background: #fff;
    padding: 8px 112px 10px 28px !important;
    border-left: 3px solid #d9d9d9;
}

/* 🔴 여기만 auto 레이아웃이다. 사이즈 열 개수가 스타일마다 다른데 fixed + 고정폭이면
   열이 8개만 넘어도 지정폭 합이 100% 를 넘어 표가 셀 밖으로 밀려나가고(실측), 그 순간
   Qty/Amount 정렬이 깨진다. auto 는 100% 를 넘지 않으므로 열이 늘어도 안전하다. */
.oh-mx {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 12px;
}

/* 오른쪽 두 열만 상위 컬럼에 못 박는다 — depth-2 qty / amount 와 같은 폭 */
.oh-mx .oh-mx-qty { width: 92px; }
.oh-mx .oh-mx-amt { width: 110px; }

.oh-mx th,
.oh-mx td {
    padding: 4px 10px;
    border: 1px solid #e8e8e8;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oh-mx thead th {
    background: #f7f7f7;
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 색상 이름은 행의 머리다 — 유일하게 왼쪽 정렬이라 눈이 행을 잡는다.
   폭을 주지 않아 격자의 남는 폭을 전부 흡수한다(왼쪽 정렬이라 넓어도 자연스럽다). */
.oh-mx .oh-mx-color {
    text-align: left;
    font-weight: 600;
    color: var(--oh-ink);
}

/* 값은 1~3자리, 머리는 S/M/L/1X 정도다. width:1px 은 auto 레이아웃에서 "내용 최소폭까지
   줄여라"는 뜻이다 — 이렇게 해야 사이즈가 1개뿐인 스타일에서 숫자 하나가 400px 짜리 칸에
   홀로 뜨지 않고, 남는 폭이 색상 이름으로 간다. */
.oh-mx .oh-mx-size {
    width: 1px;
    padding: 4px 6px;
}

.oh-mx thead .oh-mx-color {
    font-weight: 700;
}

.oh-mx .oh-mx-qty,
.oh-mx .oh-mx-amt {
    font-weight: 600;
    background: #fafafa;
}

/* 그 색상이 사지 않은 사이즈는 0 이 아니라 빈 칸이다 — 0개와 구분한다 */
.oh-mx .oh-mx-empty {
    color: #c9c9c9;
}

.oh-mx-row:hover > td {
    background: #f7f9fa;
}

/* 색상 8개 초과분은 접는다 */
.oh-d2-color.oh-color-extra,
.oh-mx-row.oh-color-extra {
    display: none;
}

.oh-d2-color.oh-color-extra.is-open,
.oh-mx-row.oh-color-extra.is-open {
    display: table-row;
}

.oh-d2-morerow > td {
    background: #fff;
    border-bottom: 1px solid var(--oh-line-soft);
}

.oh-more {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--oh-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.oh-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oh-loading,
.oh-error {
    padding: 14px 12px;
    color: var(--oh-muted);
    font-size: 13px;
}

.oh-error {
    color: #a33;
}

/* ── empty / toast ───────────────────────────────────────── */
.oh-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--oh-muted);
}

.oh-empty a {
    text-decoration: underline;
}

.oh-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1080;
    max-width: 90vw;
    padding: 12px 16px;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, .95);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

.oh-toast ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ── mobile : 표를 카드 스택으로 ─────────────────────────── */
@media (max-width: 767.98px) {
    /* 손가락으로 누르는 화면에서는 -sm 도 44px 아래로 내려가지 않는다.
       개별 자리마다 올리면 빠뜨리는 곳이 생기므로 여기서 한 번에 올린다.
       .oh-more / .oh-link-sm 는 버튼 모양이 아니지만 누르는 것은 같다. */
    .oh-btn,
    .oh-btn-sm,
    .oh-more,
    .oh-link-sm,
    .oh-toggle {
        min-height: 44px;
    }

    .oh-btn,
    .oh-btn-sm {
        height: 44px;
    }

    .oh-toggle {
        width: 44px;
        height: 44px;
    }

    .oh-link-sm {
        display: inline-flex;
        align-items: center;
    }

    .oh-table {
        table-layout: auto;
    }

    .oh-table thead {
        display: none;
    }

    .oh-table,
    .oh-table tbody,
    .oh-table tr,
    .oh-table td {
        display: block;
        width: 100%;
    }

    .oh-row {
        position: relative;
        display: grid !important;
        grid-template-columns: 56px 1fr auto;
        column-gap: 10px;
        padding: 12px 0 10px;
        border-bottom: 1px solid var(--oh-line);
    }

    .oh-row td {
        padding: 1px 0;
        border: 0;
    }

    .oh-cell-toggle {
        position: absolute;
        top: 8px;
        right: 0;
        width: auto !important;
        padding: 0;
    }

    .oh-cell-thumb {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: auto !important;
    }

    .oh-cell-order,
    .oh-cell-item,
    .oh-cell-sku,
    .oh-cell-status {
        grid-column: 2;
        width: auto !important;
        padding-right: 48px;
    }

    .oh-table .oh-num,
    .oh-table .oh-total {
        grid-column: 2;
        text-align: left;
        width: auto !important;
    }

    .oh-rowactions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 8px;
    }

    .oh-searchbar .oh-keyword,
    .oh-searchbar .oh-actions {
        flex: 1 1 100%;
    }

    .oh-searchbar .oh-period,
    .oh-searchbar .oh-status {
        flex: 1 1 calc(50% - 4px);
    }

    .oh-searchbar .oh-actions .oh-btn {
        flex: 1 1 auto;
    }

    /* 데스크톱에서 컬럼 정렬용으로 준 값들을 되돌린다 — 스택 레이아웃에는 해가 된다 */
    .oh-items {
        padding: 8px 12px 12px;
    }

    /* 🔴 .oh-d2 td 의 width:100% 보다 클래스 셀렉터가 더 구체적이라 이기지 못한다.
       데스크톱 격자용 폭을 남겨두면 390px 스택 레이아웃에서 가로 오버플로가 난다. */
    .oh-d2 .oh-d2-product,
    .oh-d2 .oh-d2-sizes {
        width: auto;
    }

    .oh-d2-matrixrow > td {
        padding: 8px 0 10px 12px !important;
        overflow-x: auto;
    }

    .oh-mx {
        width: auto;
        min-width: 100%;
        table-layout: auto;
    }

    /* depth-2 표도 스택으로 — 390px 에서 7열은 성립하지 않는다 */
    .oh-d2,
    .oh-d2 tbody,
    .oh-d2 tr,
    .oh-d2 td {
        display: block;
        width: 100%;
    }

    .oh-d2 thead {
        display: none;
    }

    .oh-d2 .oh-d2-pic {
        display: none;
    }

    .oh-d2-style,
    .oh-d2-color {
        display: grid !important;
        grid-template-columns: 1fr max-content max-content;
        column-gap: 10px;
        padding: 8px 0;
    }

    .oh-d2 td {
        border: 0;
        padding: 1px 0;
    }

    .oh-d2-style > td:first-child,
    .oh-d2-color > td:first-child {
        display: none;
    }

    .oh-d2-product {
        grid-column: 1;
    }

    .oh-d2-sizes {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .oh-d2-price {
        display: none;
    }

    .oh-d2-act {
        grid-column: 1 / -1;
        text-align: left !important;
        padding-top: 6px !important;
    }

    .oh-d2-colorcell {
        padding-left: 12px !important;
    }
}

/* ============================================================
   mobile-footer.css — CORE mobile footer (<= 767px)
   ------------------------------------------------------------
   Collapse the multi-column footer link lists into tap-to-expand
   accordions so the footer is not an endless scroll on mobile.
   The contact block (about-us) stays open; only the link columns
   (my-account / customer-service / information / our-offers)
   become accordions. Neutral: spacing + --m-* tokens only.
   Accordion state is driven by mobile-header.js (.m-acc/.m-open).
   ============================================================ */
@media (max-width: 767.98px) {
    .footer .footer-middle .container > .row { display: block; }

    /* the copyright row (.footer-disclaimer in .footer-lower) was hidden behind
       the fixed bottom tab bar. The core body padding-bottom can't protect it:
       the theme's floats collapse <body>'s height (measured body bottom ~216px
       while the footer paints to 844px), so padding on body lands mid-page.
       Pad the footer itself — it is the last element in flow and its dark
       background makes the extra space seamless. */
    .footer { padding-block-end: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
    .footer .footer-middle .column {
        width: 100%; float: none; margin: 0; padding: 0;
        border-block-end: 1px solid rgba(0, 0, 0, .1);
    }

    .footer .footer-middle .column .title {
        position: relative; margin: 0; padding-block: 14px; padding-inline-end: 28px;
    }
    .footer .footer-middle .column.m-acc > .title { cursor: pointer; }
    .footer .footer-middle .column.m-acc > .title::after {
        content: "\f107"; font: normal normal normal 16px/1 FontAwesome;
        position: absolute; inset-inline-end: 4px; inset-block-start: 50%;
        transform: translateY(-50%); transition: transform .2s ease;
    }
    .footer .footer-middle .column.m-acc.m-open > .title::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* collapsed list (smooth max-height reveal) */
    .footer .footer-middle .column.m-acc > .nav-list,
    .footer .footer-middle .column.m-acc > .list {
        overflow: hidden; max-height: 0; transition: max-height .25s ease;
    }
    .footer .footer-middle .column.m-acc.m-open > .nav-list,
    .footer .footer-middle .column.m-acc.m-open > .list {
        max-height: 70vh; padding-block-end: 10px;
    }

    /* comfortable tap rows for footer links */
    .footer .footer-middle .column .nav-list > li > a,
    .footer .footer-middle .column .list > li > a {
        min-height: 40px; display: flex; align-items: center;
    }

    /* lower bar: stack + center the credits/disclaimer */
    .footer .footer-lower [class*="col-"] {
        width: 100%; float: none; text-align: center; margin-block: 4px;
    }

    /* newsletter block renders ~419px wide (overflows the 390 viewport, gets clipped) —
       constrain it and make the email field full-width */
    .footer .newsletter-wrapper,
    .footer .block-newsletter,
    .footer .newsletter-subscribe-block,
    .footer .newsletter-email { max-width: 100%; box-sizing: border-box; }
    .footer #newsletter-email,
    .footer .newsletter-subscribe-block input[type="email"],
    .footer .newsletter-subscribe-block input[type="text"] {
        width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0 0 8px !important;
    }

    /* the rule above loses to simplex.styles.responsive.css's
       `#newsletter-subscribe-block #newsletter-email { width:180px !important;
       height:40px !important }` (two-ID specificity beats .footer + one ID even
       with equal !important) — the email field rendered 180×40px. Counter with
       .footer + BOTH ids and stack the field over a ≥44px subscribe button. */
    /* the newsletter column kept a desktop-ish 304px width on a 390px viewport
       (43px dead gold on each side) — let it span the row on mobile */
    .footer .footer-upper .newsletter-wrapper { width: 100%; float: none; }
    .footer .block-newsletter,
    .footer .block-newsletter .listbox { width: 100%; max-width: 100%; }
    .footer #newsletter-subscribe-block {
        display: flex !important; flex-direction: column; align-items: stretch;
        width: 100%;
    }
    /* simplex pins `margin:0 !important` on the field with two-ID specificity —
       win it back (.footer + two IDs) for the field↔button breathing space */
    .footer #newsletter-subscribe-block #newsletter-email {
        width: 100% !important; height: auto !important;
        min-height: var(--m-touch-min, 44px);
        margin: 0 0 10px !important;
    }
    /* stacked form: button matches the field width (a 144px pill under a
       full-width field reads unbalanced) */
    .footer #newsletter-subscribe-block #newsletter-subscribe-button,
    .footer #newsletter-subscribe-block .newsletter-subscribe-button {
        display: block; width: 100% !important;
        height: auto !important; min-height: var(--m-touch-min, 44px);
        margin: 0 !important; padding: 0 28px; box-sizing: border-box;
    }
}

/* footer "Search" link: redundant on mobile — the header search is always
   reachable (always-visible row or the search-toggle sheet). The <li> carries
   .footer-search-item from the Footer view (user 2026-06-06). */
@media (max-width: 767.98px) {
    .footer .footer-search-item { display: none !important; }
}

/* ============================================================
   mobile-banner.css — CORE mobile hero slider touch-ups (<=767px)
   ------------------------------------------------------------
   The hero is the AnywhereSlider (Swiper, .nop-slider) — its slides
   are generated by the plugin JS and its content/colours are shop
   config. We DON'T restyle it; we only add defensive, neutral
   best-practice aids: caption legibility over imagery, and 44px
   touch targets for the CTA and pagination. Attribute selectors are
   defensive — if a class isn't present the rule simply no-ops.
   ============================================================ */
@media (max-width: 767.98px) {
    /* caption legibility over busy/ light images (subtle, colour-neutral) */
    .nop-slider [class*="caption"],
    .nop-slider [class*="title"],
    .nop-slider [class*="subtitle"],
    .nop-slider [class*="text"] {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

    /* touch-friendly CTA button/link inside a slide
       (.swiper-full-link = the whole image is the link: it must stay a plain block, not a 44px flex box) */
    .nop-slider .swiper-slide a:not(.swiper-full-link) {
        min-height: var(--m-touch-min);
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* larger pagination dots for thumb taps */
    .nop-slider .swiper-pagination-bullet {
        width: 11px; height: 11px;
    }

    /* visual hierarchy: on a phone the hero is a short wide strip and the
       absolutely-positioned dot row lands ON the slide content (covered the
       baked-in CTA in the GOL002 audit). Best practice (Shein/Sephora mobile
       heroes): dots sit BELOW the imagery on their own row. Static flow also
       stops dots from fighting the slide for taps. Colour stays the swiper/
       shop default. */
    /* (!important: the swiper bundle css is injected at widget render time —
       after the theme list — so plain order/specificity can lose to it) */
    .nop-slider .swiper-pagination,
    .nop-slider .swiper-pagination-horizontal {
        position: static !important;
        margin-top: 8px;
        line-height: 1;
    }
    .nop-slider .swiper-pagination-bullet { margin: 0 5px !important; }

    /* slide CTA (.npc-slider-btn): the plugin lays it mid-left IN flow, where
       it covers the artwork's baked-in copy on a short mobile strip (user
       report). Best practice (mobile heroes): compact pill pinned bottom-left,
       clear of the headline zone. Colour-neutral translucent dark. */
    .nop-slider .swiper-slide { position: relative; }
    /* the plugin nests the CTA in a 20x20 .npc-slider-caption-inner whose
       TRANSFORM makes it the containing block for the absolute pill (a
       transformed element captures abs descendants even when static) — the
       pill must anchor to the FULL-SLIDE caption box, so neutralise both */
    .nop-slider .npc-slider-caption-inner {
        position: static !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }
    .nop-slider .swiper-slide .npc-slider-btn {
        position: absolute !important;
        left: 10px !important; right: auto !important;
        bottom: 8px !important; top: auto !important;
        transform: none !important;
        z-index: 2;
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; padding: 0 18px;
        border-radius: 999px;
        font-size: 12px; font-weight: 700; letter-spacing: .06em;
        white-space: nowrap;
        background: rgba(17, 19, 26, .78); color: #fff;
    }

    /* prev/next arrows: half-clipped 27px circles at the strip edges on a
       phone, and they fight the CTA for space — swipe + the dot row below are
       the mobile navigation (Shein/Sephora pattern). Desktop unaffected. */
    .nop-slider .swiper-button-prev,
    .nop-slider .swiper-button-next { display: none !important; }
}

/* ============================================================
   mobile-category.css — CORE mobile category/listing (<= 767px)
   ------------------------------------------------------------
   2-column product grid on phones.

   Root cause (found in PDCA Plan): catalog-viewmode-custom.css
   @media(max-width:479.98px) forces 1-column with
     .product-grid.viewmode-4col .item-grid .item-box{flex:0 0 100% !important}
   (specificity 0,4,0 + !important) — which catches all mainstream
   phones (360/375/390/393px). The theme actually INTENDS 2-up for
   viewmode-4col on mobile (col-xs-6) but that block kills it.

   Fix: restore a clean 2-up flex grid for 360–767px with a higher
   specificity (0,5,0 via .products-container) + !important, loaded
   last (AddCssFileParts). Uses align-items:flex-start so cards keep
   their natural height (the earlier display:grid attempt produced
   uneven cards); the 3:4 picture box (product-box-aspect-ratio.css)
   keeps the image portion uniform. Below 360px stays 1-column.
   ============================================================ */
@media (min-width: 360px) and (max-width: 767.98px) {
    /* 2-up grid for BOTH listing viewmodes (3col = Grid toggle, 4col = List toggle /
       store default). CRITICAL: neutralise the Bootstrap `.row` negative margin on
       .item-grid — otherwise item-box width:50% is computed against the wider (negative-
       margin-expanded) row, so 2×50% overflows the visible 341px container and wraps to
       1 column (the bug). With margin:0 + box-sizing:border-box, two 50% boxes fit. */
    /* CSS Grid forces EXACTLY two equal columns — immune to the flexbox "50% + 50%
       sub-pixel wrap" that was collapsing the cards to one column (two 50% flex items
       round up to >100% of the 341px row and wrap). align-items:start keeps each card's
       natural height (no stretching). */
    .products-container .product-grid.viewmode-4col .item-grid,
    .products-container .product-grid.viewmode-3col .item-grid {
        display: grid !important;
        /* minmax(0,1fr) — NOT 1fr — so a wide product image can't force its column past
           its fair half (1fr's implicit `auto` minimum makes columns unequal). */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        margin: 0 !important;
    }
    /* Bootstrap `.row` clearfix ::before/::after would otherwise become extra grid items
       occupying cells and shifting the cards. */
    .products-container .product-grid.viewmode-4col .item-grid::before,
    .products-container .product-grid.viewmode-4col .item-grid::after,
    .products-container .product-grid.viewmode-3col .item-grid::before,
    .products-container .product-grid.viewmode-3col .item-grid::after {
        content: none !important; display: none !important;
    }
    .products-container .product-grid.viewmode-4col .item-grid .item-box,
    .products-container .product-grid.viewmode-3col .item-grid .item-box {
        width: auto !important; max-width: none !important; flex: none !important;
        float: none !important; clear: none !important; height: auto !important;
        padding: 0 6px 12px !important; margin: 0 !important; box-sizing: border-box !important;
    }
    /* keep the image filling the narrower card */
    .products-container .product-grid .item-grid .item-box .picture,
    .products-container .product-grid .item-grid .item-box .picture a,
    .products-container .product-grid .item-grid .item-box .picture img { width: 100%; }
    .products-container .product-grid .item-grid .item-box .product-title { font-size: 13px; line-height: 1.3; }
    .products-container .product-grid .item-grid .item-box .prices { font-size: 13px; }
}

@media (max-width: 767.98px) {
    /* comfortable add-to-cart / button tap targets on listing cards */
    .item-box .buttons .button-2,
    .item-box .add-to-cart-button,
    .item-box .product-box-add-to-cart-button {
        min-height: var(--m-touch-min);
    }

    /* ---- compact sort / display / view-mode toolbar ----
       labels stacked ABOVE their dropdown (2 lines each) → put them inline (1 line)
       so the toolbar is tight and products rise up. */
    .product-selectors { padding-block: 6px; }
    .product-selectors .product-sorting,
    .product-selectors .product-page-size { padding: 0 4px; margin-block: 3px; }
    .product-selectors .product-sorting .row,
    .product-selectors .product-page-size .row {
        display: flex !important; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0;
    }
    .product-selectors .product-sorting .product-span,
    .product-selectors .product-page-size .product-span {
        width: auto !important; flex: 0 0 auto; padding: 0;
    }
    .product-selectors .product-span label { margin: 0; font-size: 11px; white-space: nowrap; }
    .product-selectors .remove_left_padding { flex: 1 1 auto; width: auto !important; padding: 0; }
    .product-selectors .dropdown-filter { width: 100%; min-height: 38px; font-size: 13px; }
    /* view-mode toggle: comfortable taps, aligned to the end */
    .product-selectors .product-viewmode { padding: 0 4px; margin-block: 3px; }
    .product-selectors .grid-list-icon { display: flex; justify-content: center; gap: 8px; }
    .product-selectors .viewmode-icon {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; min-height: 40px; border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, .15); /* dark border — the toolbar sits on a light page */
    }
    .product-selectors .viewmode-icon.selected { border-color: var(--m-accent); color: var(--m-accent); }

    /* products-first: move the catalog sidebar (Categories / Manufacturers /
       Recently-viewed / filters) BELOW the product grid on mobile so products are
       above the fold (Baymard). The accordion blocks are kept — only reordered.
       Scoped to LISTING pages (html-*-page on <html>) so account and other
       _ColumnsTwo pages are unaffected. Breadcrumb keeps its default order (top). */
    html.html-category-page .master-column-wrapper .row,
    html.html-manufacturer-page .master-column-wrapper .row,
    html.html-search-page .master-column-wrapper .row,
    html.html-product-tag-page .master-column-wrapper .row,
    html.html-recently-added-products-page .master-column-wrapper .row,
    html.html-vendor-page .master-column-wrapper .row {
        display: flex !important; flex-direction: column;
    }
    html.html-category-page .master-column-wrapper .row > .center-2,
    html.html-manufacturer-page .master-column-wrapper .row > .center-2,
    html.html-search-page .master-column-wrapper .row > .center-2,
    html.html-product-tag-page .master-column-wrapper .row > .center-2,
    html.html-recently-added-products-page .master-column-wrapper .row > .center-2,
    html.html-vendor-page .master-column-wrapper .row > .center-2 { order: 1; }
    html.html-category-page .master-column-wrapper .row > .sidebar,
    html.html-manufacturer-page .master-column-wrapper .row > .sidebar,
    html.html-search-page .master-column-wrapper .row > .sidebar,
    html.html-product-tag-page .master-column-wrapper .row > .sidebar,
    html.html-recently-added-products-page .master-column-wrapper .row > .sidebar,
    html.html-vendor-page .master-column-wrapper .row > .sidebar { order: 2; }

    /* 'Recently viewed products' is a merchandising widget, NOT a filter. At the bottom of
       a listing/search results page it sits below the grid + filters where mobile
       engagement is negligible, and (rendered as a dark accordion) it reads like a filter
       — clutter. Hide it ONLY on listing/search pages; it stays on PDP / cart where
       "recall what I was comparing" is genuinely useful. */
    html.html-search-page .block-recently-viewed-products,
    html.html-category-page .block-recently-viewed-products,
    html.html-manufacturer-page .block-recently-viewed-products,
    html.html-product-tag-page .block-recently-viewed-products,
    html.html-vendor-page .block-recently-viewed-products {
        display: none !important;
    }
}

/* empty state (no search results / empty listing): the theme renders a plain, small,
   left-aligned line that gets lost between the search form and the browse blocks below.
   Present it as a centred card with a search glyph so it reads as a proper empty state.
   No injected text (i18n-safe) — the Categories block below is the browse/recovery path. */
@media (max-width: 767.98px) {
    .no-result {
        text-align: center; font-size: 16px; line-height: 1.5;
        padding: 32px 16px; margin: 8px 0 20px; color: #555;
        background: #f7f7f8; border-radius: 12px;
    }
    .no-result::before {
        content: "\f002"; font: normal normal normal 30px/1 FontAwesome;
        display: block; margin-bottom: 14px; color: var(--m-accent); opacity: .85;
    }
}

/* ============================================================
   homepage categories-list -> horizontal swipe tile row (<=767px)
   ------------------------------------------------------------
   The desktop collections grid squeezed all 6 category cards into
   one 390px row (32px per tile — unreadable). Best-practice mobile
   pattern (Amazon/Temu category circles): fixed-size image tiles in
   a snap-scrolling horizontal row, label pinned to the tile bottom.
   ============================================================ */
@media (max-width: 767.98px) {
    .categories-list .collections-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* desktop .collections-grid-3 sets justify-content:center — on an
           overflowing scroll row, centring pushes overflow BOTH ways and the
           left side is unreachable by scrolling (scrollLeft can't go <0),
           hiding the 1st/2nd tiles. Scroll rows must start at flex-start. */
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        margin: 0;
        padding: 4px 2px 10px;
        scrollbar-width: none;            /* Firefox */
    }
    .categories-list .collections-list::-webkit-scrollbar { display: none; }

    /* desktop gives the content wrapper 30px side padding — at 390px that
       (plus page 15 + container 16) left only a 268px tile window. Drop it;
       the .container 16px gutter is enough on mobile. */
    .categories-list .categories-list-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .categories-list .collections-grid-item {
        flex: 0 0 112px;
        width: 112px !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
        list-style: none;
        scroll-snap-align: start;
    }
    .categories-list .collections-grid-image {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
    }
    .categories-list .collections-grid-image img {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover;
        display: block;
    }
    /* label: bottom strip on the tile (the desktop hover-button overlay).
       The desktop rule centres this button with top/left 50% + translate(-50%);
       without resetting those the strip slides half its width off the tile
       (left-clipped label, user report). Neutralise the desktop positioning. */
    .categories-list .collections-grid-image .button {
        position: absolute !important;
        inset: auto 0 0 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 6px 4px;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .02em;
        border: 0;
        white-space: normal;
    }
}

/* ============================================================
   search page (<=767px): power-user options are desktop noise on a
   phone - keyword box + the core [Filter] drawer cover refinement
   (Amazon/Shein pattern). Hide the "Advanced search" toggle row and
   the whole advanced block (Category select, "Automatically search
   sub categories", "Search in product descriptions", etc.).
   (user request 2026-06-04; CORE - applies identically to all shops)
   ============================================================ */
/* ALL viewports (user follow-up 2026-06-04): desktop hides them too. The
   options stay CHECKED inside the hidden form, so subcategory + description
   matching still applies server-side — nothing is lost, the form shrinks to
   keyword + button. */
.search-page .basic-search .form-group:has([id="advs"]),
.search-page #advanced-search-block {
    display: none !important;
}
@media (max-width: 767.98px) {
    /* keyword row: stack label over a full-width input */
    .search-page .basic-search .form-group label.control-label {
        width: 100%; text-align: left; padding-bottom: 4px;
    }
    .search-page .basic-search .form-group .col-sm-6 { width: 100%; }
}

/* =====================================================================================================================
   product-card-nav-v1.css — product-card picture slider: arrows + dots (core, all shops)

   WHY: the card arrows (product-image-hover-arrows.css) were thin grey glyphs in the bottom corners, partly OUTSIDE the
   image, level with the dots, shown only on hover; phones hid the arrows and never showed the dots (no hover), so a
   multi-picture product looked like a single picture.
   NOW: round chips centred on the image's vertical middle, inside its edges, shown on card hover AND keyboard focus;
   small dots always visible on touch screens (swipe to change picture), on hover/focus on desktop.

   SHOP TOKENS (the pattern of badge-shop-tokens-v1.css): this file holds structure + neutral defaults. A shop changes
   the look ONLY by setting these custom properties in a GLOBAL `:root { }` of its mobile-shop-overrides.css (registered
   last in Head.cshtml, so it wins). Do not restyle the selectors below in a shop skin.
     --card-nav-size          chip diameter                         --card-nav-icon-size   icon box inside the chip
     --card-nav-bg / -fg      chip background / icon colour         --card-nav-shadow      chip shadow
     --card-nav-radius        50% = round, 0 = square               --card-nav-inset       distance from the image edge
     --card-nav-icon-prev/-next  url() of an SVG used as a mask (any line set; painted in --card-nav-fg)
     --card-dot-size / -gap   dot diameter / spacing                --card-dot-color / -active  idle / current dot
   Registered with AddCssFileParts (rendered after the legacy files). Cache: bump the file name (-v2) on any change.
   ===================================================================================================================== */
:root {
    --card-nav-size: 40px;
    --card-nav-icon-size: 18px;
    --card-nav-bg: rgba(255, 255, 255, .9);
    --card-nav-fg: #222;
    --card-nav-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    --card-nav-radius: 50%;
    --card-nav-inset: 8px;
    --card-nav-icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --card-nav-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --card-dot-size: 6px;
    --card-dot-gap: 6px;
    --card-dot-color: rgba(0, 0, 0, .25);
    --card-dot-active: #222;
}

/* (0,5,2) + !important: beats product-image-hover-arrows.css (0,4,0), product-box-aspect-ratio.css z-index, the
   simplex/wigstheme colour rules and older shop-skin icon boxes. */
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
html body .product-grid .item-box .picture > .swiper > .swiper-button-next {
    top: 50% !important;
    bottom: auto !important;
    width: var(--card-nav-size) !important;
    height: var(--card-nav-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--card-nav-radius) !important;
    background: var(--card-nav-bg) !important;
    box-shadow: var(--card-nav-shadow) !important;
    color: var(--card-nav-fg) !important;
    z-index: 25 !important;
    cursor: pointer;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .15s ease, visibility .15s ease !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev { left: var(--card-nav-inset) !important; right: auto !important; }
html body .product-grid .item-box .picture > .swiper > .swiper-button-next { right: var(--card-nav-inset) !important; left: auto !important; }
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev::after,
html body .product-grid .item-box .picture > .swiper > .swiper-button-next::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: var(--card-nav-icon-size) !important;
    height: var(--card-nav-icon-size) !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    background: currentColor !important;   /* shorthand also clears background-image icons of older skins */
    -webkit-mask: var(--card-nav-icon-next) center / contain no-repeat !important;
    mask: var(--card-nav-icon-next) center / contain no-repeat !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev::after {
    -webkit-mask-image: var(--card-nav-icon-prev) !important;
    mask-image: var(--card-nav-icon-prev) !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-disabled { opacity: .35 !important; cursor: default; }

/* dots: centred under the picture's lower edge, inside the image */
html body .product-grid .item-box .picture > .swiper > .swiper-pagination {
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: var(--card-dot-gap) !important;
    z-index: 24 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .15s ease, visibility .15s ease !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-pagination .swiper-pagination-bullet {
    width: var(--card-dot-size) !important;
    height: var(--card-dot-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--card-dot-color) !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) !important;   /* readable on dark and light photos */
}
html body .product-grid .item-box .picture > .swiper > .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--card-dot-active) !important;
}

/* desktop (real hover): show on card hover and when anything in the picture has keyboard focus */
@media (hover: hover) and (pointer: fine) {
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev:focus-visible,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next:focus-visible,
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-pagination,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-pagination {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-disabled,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-disabled { opacity: .35 !important; }
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev:focus-visible,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next:focus-visible {
        outline: 2px solid var(--card-dot-active) !important;
        outline-offset: 2px !important;
    }
    html body .product-grid .item-box .picture > .swiper a.swiper-slide:focus-visible {
        outline: 2px solid var(--card-dot-active) !important;
        outline-offset: -2px !important;
    }
}

/* touch screens and phones: no arrows (they would cover a 2-column card), dots always visible, swipe to change */
@media (hover: none), (max-width: 767.98px) {
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next { display: none !important; }
    html body .product-grid .item-box .picture > .swiper > .swiper-pagination {
        opacity: 1 !important;
        visibility: visible !important;
        bottom: 6px !important;
        pointer-events: none !important;   /* 6px dots are an indicator here, not a target: a near miss opened the
                                              product; taps go to the picture link, swipes change the picture */
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture > .swiper > .swiper-pagination { transition: none !important; }
}

/* ============================================================
   mobile-sort.css — CORE mobile sort bottom-sheet (<= 767px)
   ------------------------------------------------------------
   Sorting on mobile lives in the bottom tab bar, not in a sticky
   toolbar above the products: the tab bar is already on screen, so
   the entry point costs no vertical space, while the old sticky
   [Filter][Sort] bar permanently ate ~60px of the product area.

   AJAX-safe: .product-selectors is NOT moved in the DOM — it is
   promoted to a bottom sheet purely via the .m-sort-open class on
   <html>/<body> (toggled by mobile-sort.js).

   Which tab is shown is decided here, from the server-rendered page
   class on <html>, so no JS is needed for the swap (no flash).

   NOTE: faceted FILTERS are deliberately not exposed on mobile
   (user decision 2026-09-02). The markup still renders and still
   works — it is only hidden — so restoring it is a few lines.
   ============================================================ */

/* desktop: the tab bar itself is hidden, but keep the Sort tab out of
   the document flow regardless of viewport */
.m-nav-sort { display: none; }

@media (max-width: 767.98px) {

    /* ---------- tab swap: Home -> Sort on catalog listing pages ----------
       The six page types below are exactly the ones that render
       _CatalogSelectors (category, manufacturer, search, vendor, product tag,
       recently-added). Same selector-list convention as mobile-category.css. */
    html.html-category-page .m-nav-home,
    html.html-manufacturer-page .m-nav-home,
    html.html-search-page .m-nav-home,
    html.html-product-tag-page .m-nav-home,
    html.html-recently-added-products-page .m-nav-home,
    html.html-vendor-page .m-nav-home { display: none; }

    html.html-category-page .m-nav-sort,
    html.html-manufacturer-page .m-nav-sort,
    html.html-search-page .m-nav-sort,
    html.html-product-tag-page .m-nav-sort,
    html.html-recently-added-products-page .m-nav-sort,
    html.html-vendor-page .m-nav-sort { display: block; }

    /* mobile-sort.js sets [hidden] on the one case CSS cannot detect: a catalog
       page whose _CatalogSelectors rendered nothing (empty search). The JS
       correction must always win over the rule above. */
    .m-nav-sort[hidden] { display: none !important; }

    /* ---------- the inline toolbar is redundant now ----------
       Portrait: sorting is reached from the tab bar, so the inline toolbar would
       only re-spend the space this change reclaims. (Landscape re-enables it
       further down — the tab bar is hidden there.) */
    html.html-category-page .product-selectors,
    html.html-manufacturer-page .product-selectors,
    html.html-search-page .product-selectors,
    html.html-product-tag-page .product-selectors,
    html.html-recently-added-products-page .product-selectors,
    html.html-vendor-page .product-selectors { display: none; }

    /* ---------- faceted filters: not exposed on mobile ----------
       .catalog-filter-bar-h is the horizontal filter strip on 1-column category
       pages. The .block.product-filters blocks are the same filters rendered as
       sidebar accordions (2-column category, and search) — without this rule they
       would resurface UNDER the grid, because mobile-category.css sends .sidebar
       to order:2 on listing pages.
       Category/manufacturer NAVIGATION blocks are intentionally NOT hidden: they
       are browse paths, not filters, and they are the only way left to move
       between categories from a search result. */
    .catalog-filter-bar-h,
    html.html-category-page .block.product-filters,
    html.html-manufacturer-page .block.product-filters,
    html.html-search-page .block.product-filters,
    html.html-product-tag-page .block.product-filters,
    html.html-recently-added-products-page .block.product-filters,
    html.html-vendor-page .block.product-filters { display: none !important; }

    /* ---------- bottom sheet ---------- */
    .m-sort-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
        z-index: 1090;
    }
    body.m-sort-open .m-sort-backdrop { display: block; }
    /* lock BOTH: <html> is the scroll container in this theme (same as the menu drawer) */
    html.m-sort-open, body.m-sort-open { overflow: hidden; }

    body.m-sort-open .product-selectors {
        display: block !important; position: fixed; inset-inline: 0; inset-block-end: 0;
        z-index: 1091; background: #fff; color: #222;
        max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        border-start-start-radius: 16px; border-start-end-radius: 16px;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);
        /* the tab bar is promoted ABOVE this sheet (see below) so the Sort tab stays
           tappable to close — which means it also covers the sheet last rows. Pad past it. */
        padding: 20px 16px calc(var(--m-bottomnav-h) + 20px + env(safe-area-inset-bottom, 0px));
        /* the theme gives .product-selectors margin-bottom:30px for its in-flow use.
           On a bottom-anchored fixed box, `bottom:0` aligns the MARGIN edge, so that
           30px lifted the sheet off the viewport floor and pushed its last rows behind
           the opaque tab bar — the sheet read as cut off. */
        margin: 0 !important;
    }

    /* Floating page furniture outranks the sheet (the promo banner sits at
       z-index 2147483645, the accessibility FAB at 1e9) and covered the sort
       controls. They are page-level affordances, not sheet controls — take them
       out while the sheet owns the screen. */
    body.m-sort-open .wpu-banner,
    body.m-sort-open .at-trigger,
    body.m-sort-open #backTop { display: none !important; }

    /* keep the tab bar above the backdrop while the sheet is open, so tapping Sort
       again closes it (the expected toggle) instead of hitting the scrim */
    body.m-sort-open .mobile-bottom-nav { z-index: 1092; }
    body.m-sort-open .m-sort-trigger { color: var(--m-accent); }

    /* drawer header */
    .m-drawer-title {
        font-size: 16px; font-weight: 700; margin: 0 0 12px; display: none;
        align-items: center; justify-content: space-between;
    }
    .m-drawer-title .m-drawer-close {
        border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #222;
        min-width: 44px; min-height: 44px;
    }
    body.m-sort-open .product-selectors .m-drawer-title { display: flex; }

    /* Sort sheet: stack Sort-by / Display as FULL-WIDTH labelled rows. The inline,
       narrow layout (mobile-category.css) is meant for the collapsed in-page toolbar;
       inside the sheet, full-width rows are easier to tap. */
    body.m-sort-open .product-selectors .product-sorting,
    body.m-sort-open .product-selectors .product-page-size {
        display: block; width: 100%; padding: 0; margin: 0 0 14px;
    }
    body.m-sort-open .product-selectors .product-sorting .row,
    body.m-sort-open .product-selectors .product-page-size .row {
        display: block !important; margin: 0;
    }
    body.m-sort-open .product-selectors .product-span {
        display: block; width: 100% !important; padding: 0;
    }
    body.m-sort-open .product-selectors .product-span label {
        display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; white-space: normal;
    }
    body.m-sort-open .product-selectors .remove_left_padding {
        width: 100% !important; padding: 0;
    }
    body.m-sort-open .product-selectors .dropdown-filter {
        width: 100% !important; min-height: 44px; font-size: 15px;
    }

    /* grid/list view toggle is hidden on mobile: BOTH viewmodes render as the same 2-up
       grid (see mobile-category.css), so the toggle changes nothing — a control that does
       nothing is confusing. */
    .product-viewmode { display: none !important; }
}

/* Landscape: the bottom tab bar is hidden to preserve vertical space
   (mobile-header-v2.css), which would leave no way to sort — put the inline
   toolbar back. Same six page types as the portrait hide rule. */
@media (max-width: 767.98px) and (orientation: landscape) {
    html.html-category-page .product-selectors,
    html.html-manufacturer-page .product-selectors,
    html.html-search-page .product-selectors,
    html.html-product-tag-page .product-selectors,
    html.html-recently-added-products-page .product-selectors,
    html.html-vendor-page .product-selectors { display: block; }
}

/* Print: an open sheet is position:fixed and would float over the printed page. */
@media print {
    body.m-sort-open .product-selectors { position: static !important; max-height: none; }
    .m-sort-backdrop { display: none !important; }
}

/* ============================================================
   mobile-product.css — CORE mobile product detail (<= 767px)
   ------------------------------------------------------------
   Sticky add-to-cart bar (best practice): a compact [price][Add to
   cart] bar docks above the bottom tab bar and appears only once the
   main add-to-cart button has scrolled out of view. Built by
   mobile-product.js, which proxies clicks to the real button (reusing
   the theme's AjaxCart logic). Visually neutral via --m-* tokens.
   ============================================================ */
.m-pdp-cta { display: none; }

@media (max-width: 767.98px) {
    .m-pdp-cta {
        display: flex; align-items: center; gap: 12px;
        position: fixed; inset-inline: 0;
        inset-block-end: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px));
        /* one BELOW the bottom nav: the hide animation slides the bar down BEHIND
           the tab bar instead of painting over it (same z + later DOM = on top) */
        z-index: calc(var(--m-z-bottomnav) - 1);
        background: var(--m-header-bg); color: var(--m-header-fg);
        border-block-start: 1px solid var(--m-border);
        padding: 8px 12px;
        /* hidden = fully OFF-SCREEN: 130% of the bar's own height only reached the
           bottom-nav strip, leaving the bar parked over the tab bar (visible bug) */
        transform: translateY(calc(100% + var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px));
        transition: transform .25s ease;
    }
    .m-pdp-cta.m-show { transform: translateY(0); }

    .m-pdp-cta .m-pdp-price { flex: 0 0 auto; font-weight: 700; font-size: 17px; white-space: nowrap; }
    .m-pdp-cta .m-pdp-add {
        flex: 1 1 auto; min-height: var(--m-touch-min);
        border: 0; border-radius: 6px; padding: 0 14px;
        background: var(--m-accent); color: #fff; font-weight: 600; font-size: 15px;
        /* 데스크톱 담기 버튼과 동일 변수로 대소문자 통일(기본 uppercase, 각 샵이 결정). */
        text-transform: var(--multicolor-add-transform, uppercase);
        cursor: pointer;
    }
    .m-pdp-cta .m-pdp-add:active { opacity: .85; }
    /* cart variant (mobile-cart.js): the real button renders uppercase via the
       grouped-cart css; mirror it so the proxy reads identically */
    .m-cart-cta .m-pdp-add { text-transform: uppercase; }

    /* ShareThis injects inline share buttons carrying an enormous z-index (94034). When
       they scroll into the bottom region they paint OVER the fixed sticky add-to-cart bar
       and bottom nav (z 1031). Confine the whole share widget to its own LOW stacking
       context (position:relative + z-index:0) so no descendant z-index can escape above
       our fixed chrome. !important guards against ShareThis's inline styles. */
    .product-share-button,
    .sharethis-inline-share-buttons {
        position: relative !important;
        z-index: 0 !important;
    }
}

/* hide in landscape (bottom nav is hidden there too) */
@media (max-width: 767.98px) and (orientation: landscape) {
    .m-pdp-cta { display: none; }
}

/* PDP inline purchase controls: the sticky CTA is the primary action, but the
   in-page qty field (28px) and add-to-cart/wishlist/compare buttons (37-38px)
   sat under the 44px touch minimum (found in the GOL002 audit - B2B GOL001
   guests never saw this block, so it was missed). Layout-only, no colours. */
@media (max-width: 767.98px) {
    /* product-details-minimal.css pins `.product-details-page .add-to-cart
       .qty-input { height:38px }` (3-class specificity) and a 28px min-height
       reaches the input elsewhere - match the specificity and force the floor. */
    .product-details-page .qty-input,
    .product-details-page .add-to-cart .qty-input,
    .product-details-page input.qty-input.form-control {
        min-height: var(--m-touch-min, 44px) !important;
        height: auto !important;
        box-sizing: border-box;
    }
    .product-details-page .add-to-cart-button,
    .product-details-page .add-to-wishlist-button,
    .product-details-page .add-to-compare-list-button {
        min-height: var(--m-touch-min, 44px); box-sizing: border-box;
    }
}

/* third-party accessibility floating button (.at-trigger): originally lifted
   above the CTA on PDP/cart only (sweep D1) — but the restored #backTop now
   shares that lifted right-edge seat and the two OVERLAPPED (user screenshot,
   GOL002 round 2026-06-05). REVISED (user choice): a single right-edge tower —
   bottom-nav -> CTA bar -> #backTop -> a11y trigger. The a11y seat sits one
   slot (55px backTop + 8px gap) above backTop's seat and steps up with the
   same html:has(.m-pdp-cta.m-show) state hook, so the stack never collides
   whatever combination of CTA/backTop is on screen. */
@media (max-width: 767.98px) {
    .at-trigger {
        top: auto !important;   /* the widget pins via top - top wins over bottom when both set */
        left: auto !important;
        right: 16px !important; /* column-aligned with #backTop (right:16) */
        /* slight intentional overlap onto backTop (user choice: -6px —
           clustered-FAB look) above the 44px backTop circle (readability
           pass: both buttons are 44px circles, translucent at rest so page
           content reads through; full opacity on press). a11y paints ABOVE
           backTop (z 999999999). */
        bottom: calc(var(--m-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px + 44px - 6px) !important;
        z-index: 1000000000 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        opacity: .82;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
        transition: bottom .25s ease, opacity .2s ease;
    }
    .at-trigger:hover, .at-trigger:active { opacity: 1; }
    html:has(.m-pdp-cta.m-show) .at-trigger {
        bottom: calc(var(--m-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 60px + 12px + 44px - 6px) !important;
    }
    /* PDP qty steppers were 20x20 (sweep D3) - give them a real hit area */
    .product-details-page .increase-quantity,
    .product-details-page .decrease-quantity {
        min-width: 36px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        box-sizing: border-box;
    }
    /* the 44px keys above need 80+36+36=152px but simplex clamps the box to
       135px (simplex.styles.css .addtocart-quantity-box{width:135px}) and the
       minimal skin adds overflow:hidden — the second key clipped (GOL001 '−'
       cut off). Size the box to its content and order the group [−][input][+]
       (theme markup is [input][+][−]). */
    .product-details-page .addtocart-quantity-box {
        width: auto !important; max-width: max-content;
        display: inline-flex; align-items: center;
    }
    .product-details-page .addtocart-quantity-box .decrease-quantity { order: 1; }
    .product-details-page .addtocart-quantity-box .qty-input { order: 2; }
    .product-details-page .addtocart-quantity-box .increase-quantity { order: 3; }
    /* unify the PDP action buttons to one full-width column — mismatched
       cart/wishlist widths read as broken (GOL001 report). The wishlist row
       lives inside .overview-buttons{padding:16px 15px 0} while the cart
       button does not — zero the horizontal padding so both align. */
    .product-details-page .add-to-cart-button,
    .product-details-page .add-to-wishlist-button {
        display: block; width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .product-details-page .overview-buttons {
        padding-left: 0 !important; padding-right: 0 !important;
    }
}

/* ============================================================
   v3 — the shown CTA replaces the tab bar (mobile-header-v3.css slides the bar
   away via the same html:has(.m-pdp-cta.m-show) hook), so it docks at the very
   bottom. Measured at 377x723 with a 29-colour order: content went from 480px
   (66%) to 663px (92%) together with the hide-on-scroll header.
   ============================================================ */
@media (max-width: 767.98px) {
    .m-pdp-cta {
        transition: transform .25s ease, inset-block-end .25s ease;
    }
    .m-pdp-cta.m-show:not(.m-cart-cta) {
        inset-block-end: env(safe-area-inset-bottom, 0px);
    }

    /* two-line summary: "29 colors · 510 pcs" over "$17,850.00". On one line the
       total was the part that got cut ("... · $1…") at <= 390px, and without the cap
       the button wrapped to two lines instead (measured). */
    /* scoped with :has(.m-pdp-count) — single-price PDPs and the cart bar (mobile-cart.js)
       keep the v2 layout (price hugging its text, button taking the rest). */
    .m-pdp-cta .m-pdp-price:has(.m-pdp-count) {
        flex: 1 1 auto; min-width: 0;
        display: flex; flex-direction: column; justify-content: center;
        line-height: 1.2;
    }
    .m-pdp-cta .m-pdp-count {
        font-size: 13px; font-weight: 600; opacity: .85;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .m-pdp-cta .m-pdp-sum { font-size: 17px; font-weight: 700; white-space: nowrap; }
    .m-pdp-cta:has(.m-pdp-count) .m-pdp-add { flex: 0 0 auto; white-space: nowrap; }

    /* floating buttons while the CTA is shown: the right-edge tower (x 317-361) sat
       exactly over the order rows' remove (x) and total column (measured). Move both
       into the panel's 24px left gutter, 32px each, so they clear the swatch (x>=37).
       !important — the widget pins itself with inline styles. */
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) .at-trigger {
        left: 4px !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
}

/* ============================================================================
   SAB001 (Sabora) shop overrides - token VALUES + shop-scoped counter-rules,
   then the SAB001 skin block at the END of this file.
   Never edit core mobile-*.css rules; this file re-values what core exposes.
   Registered LAST via AddCssFileParts in Head.cshtml (no ?v= querystrings -
   production bundling silently drops query-suffixed files).

   BRAND DIRECTION (user decision 2026-09-29, design v1 "A"): LA clubwear
   manufacturer & wholesaler. rose #8c3b4a point colour (7.4:1 with white
   text), blush #f7e9e7 soft surfaces, ink #231f20 text and footer,
   Montserrat headings/nav/buttons + Lato body. ONE accent on desktop and
   mobile: the palette lives in wigstheme.css :root (global), the mobile
   block below only re-values the core --m-* chrome tokens.

   The slim mobile header, search sheet and footer accordion fixes below
   were inherited from the CHR001 branch (skin-neutral) and are kept.
   ICONS = one SVG line set drawn as CSS masks over the FontAwesome markup (sections (5), (12)); sizes 22/20/16 in (17).
   ============================================================================ */

/* ---- GLOBAL token re-values (must NOT be media-scoped) ----
   Custom properties resolve at computed-value time, so a token declared inside the
   767px block below would leave consumers at their core default on desktop and flip
   colour at the breakpoint. Tokens used at every viewport live here instead.

   BULK (tier price) badge, consumed by badge-shop-tokens-v1.css (core default
   #337ab7 on white): white text on rose is 7.4:1.
   --m-accent: core mobile-foundation declares a hot-pink default in a GLOBAL
   :root, and desktop consumers read it too (NpcTranslator's active pill
   fallback) - re-value it globally. */
:root {
    --badge-bulk: #8c3b4a;      /* rose, same accent as the chrome */
    --badge-bulk-fg: #ffffff;
    --m-accent: #8c3b4a;
    /* ContactUs view (core) font hooks: display = headings face, body = Lato */
    --contact-font-display: var(--font-primary);
    --contact-font-body: var(--font-default);
}

/* ---- core mobile chrome token re-values ---- */
@media (max-width: 767.98px) {
    :root {
        --m-header-bg: #ffffff;            /* light app-bar                  */
        --m-header-fg: #231f20;            /* ink icons/text on light        */
        --m-border: rgba(35, 31, 32, 0.10); /* dividers on light surfaces    */
        /* the drawer's scroll-scrim chevron: the core default is a WHITE stroke
           for the dark app-bar - invisible on this light drawer. Ink stroke. */
        --m-scrim-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
        /* the rose accent, the --gold* family and --red are global
           (wigstheme.css :root / html:root) - no mobile-only copies */
    }
}

/* ----------------------------------------------------------------------------
   Shop-specific mobile rules (inherited from CHR001, skin-neutral — NOT part of
   the token convention). Mobile-scoped; the desktop skin is the SAB001 block.
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* wigstheme: `--header-padding` (was 20px 70px, now 0) consumed by
       `.header { padding: var(--header-padding) }` (L700) — the proven GOL001
       leak pattern #1 (squeezed the mobile header into a 250px column).
       Re-value for mobile only; the literal is zeroed too. */
    :root {
        --header-padding: 0;
        --header-menu-padding: 0;
    }
    .header { padding: 0 !important; }

    /* wigstheme `.footer-upper { padding: 30px 35px !important }`
       — leak pattern #2 (GOL001/LTJ001 had the identical rule). Align with the
       core mobile footer rhythm. Equal !important + later load order wins. */
    .footer-upper { padding: 24px 0 !important; }
    .footer-upper .container { max-width: 100%; margin-left: 0; margin-right: 0; }

    /* wigstheme `.main-menu.goToTop { position: fixed;
       z-index: 9999; top: 0 }` (applied by simplex.js on scroll) — desktop
       scroll-pinned menu bar. The core mobile chrome owns stickiness
       (.header) and the drawer; a second fixed bar at z9999 would paint over
       the mobile UI. Neutralise in the mobile range. */
    .main-menu.goToTop,
    .navbar.navbar-inverse.goToTop {
        position: static !important;
        z-index: auto !important;
        top: auto !important;
        left: auto !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    /* wigstheme pins EVERY header-links FA glyph absolute
       (left:10px / top:50% / translate) + host padding for the desktop row:
       .ico-account / .ico-wishlist / .ico-logout / .ico-login / .ico-register
       (cart handled separately below). In the drawer / mobile chrome the core
       lays these out in flow — unpin so glyphs sit inline with their labels. */
    .ico-account, .ico-wishlist, .ico-logout, .ico-login, .ico-register {
        padding-left: 0 !important;
    }
    .ico-account::before, .ico-wishlist::before, .ico-logout::before,
    .ico-login::before, .ico-register::before {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 8px 0 0 !important;
    }

    /* light app-bar needs a hairline + soft shadow to separate from white page
       content (a dark bar separates by contrast alone) */
    .header .header-lower {
        border-bottom: 1px solid var(--m-border);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }

    /* ---- light-surface search pill (core pill is tuned for the DARK GOL001
       bar: translucent-white bg + white placeholder = invisible on white) ---- */
    .header .header-lower .search-box .search-nav {
        background: #f4f4f4 !important;          /* --grey-50  */
        color: #1a1a1a !important;
        height: 48px;
        border: 1px solid #dddddd !important;     /* --grey-200 */
    }
    .header .header-lower .search-box .search-nav::placeholder { color: #999999; }
    .header .header-lower .search-box .search-box-button,
    .header .header-lower .search-box .search-box-button::before {
        color: #1a1a1a !important;
    }
    /* sweep finding 2026-06-05: the magnifier button computes 40px (<44 touch
       floor) — match the 48px search pill so the hit-area spans its full row */
    .header .header-lower .search-box .search-box-button {
        min-height: 48px;
        min-width: 44px;
    }

    /* ========================================================================
       SLIM 1-ROW HEADER + FULL-SCREEN SEARCH OVERLAY (GOL002 pattern, user
       request 2026-06-05). The core 2-row header keeps its markup; this shop
       hides the persistent search row on phones and re-opens it as an overlay
       via .m-search-toggle (mobile-shop.js toggles html.m-search-open).
       NOTE: header-search-col is ALSO the desktop search — every rule
       here is ≤767-scoped; desktop keeps the in-row search box untouched.
       ======================================================================== */
    /* row-1 (sab001-ui-round2 P2): [≡][🔍]  logo  [👤][🛍] - two 44px slots on each side keep the logo geometrically
       centred. Bootstrap 3's .row clearfix ::before/::after are flex items too (with the row gap they pushed the
       logo ~19px off centre), so they go. */
    .header .header-lower .row::before,
    .header .header-lower .row::after { content: none !important; display: none !important; }
    .header .header-lower .m-menu-toggle-wrap   { order: 1; flex: 0 0 44px; }
    .header .header-lower .m-search-toggle-wrap { order: 2; flex: 0 0 44px; }
    .header .header-lower .header-logo-col      { order: 3; flex: 1 1 auto; text-align: center; }
    .header .header-lower .m-account-wrap       { order: 4; flex: 0 0 44px; }
    .header .header-lower .header-cart-col      { order: 5; flex: 0 0 44px; width: 44px; padding: 0; }
    .m-account-link {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; min-height: 44px; color: var(--m-header-fg);
    }
    /* the logo gets the room: no row gap between the 44px slots, 8px side padding (was 6px gaps + 15px padding,
       which shrank the logo to 160px at 390) */
    .header .header-lower > .container { padding-left: 8px; padding-right: 8px; }
    .header .header-lower .row { gap: 0 !important; margin-left: 0; margin-right: 0; }
    .header .header-lower .header-logo-col { padding-left: 4px; padding-right: 4px; }

    /* 4 controls + logo must keep ONE row even at 320px (GOL002 lesson:
       cart wrapped to a second line). Never wrap, let the logo shrink. */
    .header .header-lower .row { flex-wrap: nowrap; }
    .header .header-lower .header-logo-col { min-width: 0; overflow: hidden; }
    .header .header-lower .header-logo img {
        max-width: 100%; height: auto; max-height: 40px; object-fit: contain;
    }

    .m-search-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; min-height: 44px;
        border: 0; background: none; cursor: pointer;
        color: var(--m-header-fg);
    }
    /* search toggle icon = the FA glyph itself (this skin's icon language is FA —
       no Lucide mask needed, unlike GOL002) */
    .m-search-toggle i.fa {
        font-size: 18px; line-height: 1;
        color: var(--m-header-fg);
    }

    /* search col: hidden in the bar; opens as a TOP SHEET (user feedback
       2026-06-05: the fullscreen overlay felt claustrophobic — Zara/Nike
       pattern instead: search bar pinned top, dimmed page visible below,
       backdrop tap closes). z-index above the docked menu drawer
       (~99999-100000); JS also enforces mutual exclusivity. */
    .header .header-lower .header-search-col { display: none; }
    html.m-search-open .header .header-lower .header-search-col {
        display: flex; align-items: center; gap: 4px;
        position: fixed; top: 0; left: 0; right: 0; bottom: auto;
        z-index: 100010;
        background: #ffffff; padding: 12px 12px 12px 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    }
    html.m-search-open .header .header-lower .header-search-col .search-box {
        flex: 1 1 auto !important;
        /* GOL002 round finding (668598a5) — same latent bug here: core's
           in-row `.search-box{width:100%!important}` also fires inside the
           SHEET, forcing full sheet width with no shrink (pill ran off the
           right edge on narrow desktop-UA windows). Size as a flex item. */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible; /* the theme's .search-box{overflow:hidden} CLIPPED
                              the autocomplete dropdown (281px list invisible —
                              the "autocomplete doesn't work on mobile" report) */
        position: static;  /* anchor the suggestions to the SHEET, not the pill:
                              full-width rows read better (user 2026-06-05;
                              Amazon/ASOS pattern) — the list was indented to
                              the pill's left edge past the ✕ */
    }
    /* dimmed backdrop below the sheet; tap-to-close handled in mobile-shop.js */
    html.m-search-open::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 100005; /* below the sheet (100010), above everything else */
    }
    html.m-search-open { overflow: hidden; } /* scroll-lock on the scrollport */
    /* the sheet lives INSIDE the sticky .header whose stacking context is
       low — lift the whole header context while the search is open so the
       bottom nav / sticky CTA / a11y button can't paint over it. */
    html.m-search-open .header { z-index: 100010 !important; }
    /* the z-lift also raises the REST of the header (app-bar row) above the
       page backdrop — it showed undimmed under the sheet. Dim the header's
       own box with a local pseudo: z1 sits above its static content but
       below the fixed sheet inside the same context. */
    html.m-search-open .header::after {
        content: "";
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        pointer-events: none;
    }
    html.m-search-open .m-pdp-cta,
    html.m-search-open .mobile-bottom-nav,
    html.m-search-open .at-trigger { visibility: hidden !important; }
    html.m-search-open .m-search-close {
        display: flex; align-items: center; justify-content: center;
        position: static; /* in-row, right of the pill */
        flex: 0 0 44px;
        width: 44px; height: 44px;
        border: 0; background: none; cursor: pointer;
        font-size: 28px; line-height: 1; color: #202020;
    }

    /* ---- autocomplete dropdown, sheet-tuned (suggestions render under the
       pill; jQuery UI positions it inline relative to .search-box) ---- */
    html.m-search-open .search-box .ui-autocomplete {
        position: absolute !important;
        top: 100% !important;          /* flush under the sheet (its anchor now) */
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-height: min(60vh, 480px);
        overflow-y: auto;
        background: #ffffff;
        border: 0;                      /* full-bleed: no side chrome */
        border-top: 1px solid #f0f0f0;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
        padding: 6px 0;
        list-style: none;
    }
    html.m-search-open .search-box .ui-autocomplete li,
    html.m-search-open .search-box .ui-autocomplete .ui-menu-item {
        display: flex; align-items: center;
        min-height: 44px;
        padding: 6px 14px;
        font-size: 15px;
        color: #1a1a1a;
    }
    html.m-search-open .search-box .ui-autocomplete img {
        width: 36px; height: 36px; object-fit: cover;
        border-radius: 6px; margin-right: 10px;
    }

    /* ---- cart icon & counter ---- */
    /* wigstheme family pins the FA \f07a glyph absolute + host padding for the
       DESKTOP header row. The core mobile cart slot centres its own \f07a —
       undo the pins so the two rule sets agree on one centred glyph. */
    .header .header-cart-col .ico-cart {
        padding-left: 0 !important;
        /* user report 2026-06-05: the cart glyph floated ABOVE the other
           controls' centre line. The link box itself was centred (44px,
           cy matching ≡/🔍) but display:block leaves the ::before glyph in
           inline flow at the TOP of the box — the toggles centre theirs via
           inline-flex. Make the cart a flex-centred box too (a ::before of a
           flex container becomes a flex item => centred). */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px;
        min-height: 44px;
    }
    .header .header-cart-col .ico-cart::before {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
    /* the static guest fallback cart link duplicates the flyout's own
       .ico-cart for LOGGED-IN users (the flyout renders nothing for B2B
       guests — verified live: two 44px \f07a glyphs side by side). When the
       flyout wrapper exists, the fallback yields. */
    .header .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback {
        display: none !important;
    }

    /* STATE-DEPENDENT double counter (the GOL002 "double cart" lesson,
       f2ee2c0c): nop's `.cart-qty` span only renders WITH ITEMS IN CART —
       the core .m-cart-badge is THE mobile counter; hide the text qty. */
    .header .header-cart-col .cart-qty {
        display: none !important;
    }
    .header .header-cart-col .cart-qty::before,
    .header .header-cart-col .cart-qty::after {
        content: none !important;
        display: none !important;
    }

    /* the in-menu flyout-search entry duplicates the header's search row */
    #mobile-menu .header-links #flyout-search { display: none !important; }

    /* bottom-nav: 3-tab layout (user decision 2026-06-05, LTJ001 pattern).
       Search lives in the always-visible header search row; Categories in the
       hamburger. Remaining 3 tabs (Home / Account / Cart) spread wider =
       bigger touch zones. */
    .mobile-bottom-nav li:has(> a[href*="/search"]),
    .mobile-bottom-nav li:has(> a[data-target="#mobile-menu"]) { display: none; }

    /* bottom-nav: icons + labels one colour on the light bar; active accent
       comes from --m-accent (core) */
    .mobile-bottom-nav a, .mobile-bottom-nav span { color: var(--m-header-fg); }

    /* hero pagination: simplex pins white square dots via
       `.master-wrapper-content > .nop-slider span.swiper-pagination-bullet`
       — white dots are invisible below the imagery on the light page bg
       (GOL001/GOL002 lesson). Neutral grey inactive, brand accent active —
       match the theme's specificity. */
    .master-wrapper-content > .nop-slider span.swiper-pagination-bullet {
        background-color: #bbbbbb; opacity: 1; border-radius: 50%;
    }
    .master-wrapper-content > .nop-slider span.swiper-pagination-bullet-active {
        background-color: var(--m-accent, #8c3b4a);
    }

    /* ---- touch: desktop hover affordances go STICKY after a tap ---- */
    /* cart variant rows: re-assert the MOBILE base border (grouped-v2:2584
       gives rows a 2px #e9ecef left border ≤768) so the tapped state looks
       identical to rest (LTJ001 lesson: fixed desktop values JUMP on tap). */
    .shopping-cart-page .full-cart-variant-row:hover,
    .shopping-cart-page .full-cart-variant-row:focus,
    .shopping-cart-page .full-cart-variant-row:focus-within,
    .shopping-cart-page .full-cart-variant-row:active {
        border-left: 2px solid #e9ecef !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    /* checkout button hover lifts -2px + shadow — sticky transform after tap
       shifts the CTA; pin it down on touch widths. */
    .full-cart-checkout-button:hover,
    .checkout-button:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* PDP qty stepper (3rd-shop recurring trap): the theme pins
       .addtocart-quantity-box to a fixed width with overflow:hidden, so the
       third stepper key clips once the core 44px touch floor inflates the
       keys. Rebuild as a content-sized flex group [−][input][+]. Icons stay
       FontAwesome: the spans carry <i class="fa fa-plus/fa-minus"> children —
       keep THOSE as the only glyphs (span text muted, no doubles). */
    .product-details-page .addtocart-quantity-box {
        display: inline-flex !important;
        align-items: stretch;
        border: 1px solid #dddddd;
        border-radius: 10px;
        overflow: hidden;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    .product-details-page .addtocart-quantity-box .qty-input {
        order: 2;
        width: 56px !important;
        border: 0 !important;
        border-left: 1px solid #dddddd !important;
        border-right: 1px solid #dddddd !important;
        border-radius: 0 !important;
        text-align: center;
    }
    .product-details-page .addtocart-quantity-box .decrease-quantity { order: 1; }
    .product-details-page .addtocart-quantity-box .increase-quantity { order: 3; }
    .product-details-page .increase-quantity,
    .product-details-page .decrease-quantity {
        position: static !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 42px !important;
        min-height: var(--m-touch-min, 44px);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: #f4f4f4 !important;
        background-image: none !important;
        font-size: 0;        /* mute any text glyphs on the span itself */
        cursor: pointer;
    }
    .product-details-page .increase-quantity::before,
    .product-details-page .decrease-quantity::before,
    .product-details-page .increase-quantity::after,
    .product-details-page .decrease-quantity::after { content: none !important; }

    /* the FA <i> children are THE icons — restore their glyph size/colour */
    .product-details-page .increase-quantity i.fa,
    .product-details-page .decrease-quantity i.fa {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: var(--m-header-fg, #1a1a1a) !important;
        opacity: 1 !important;
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* (back-to-top: now handled by CORE — mobile-foundation.css re-seats
       #backTop above the bottom tab bar since 2026-06-05; the button colour
       follows this shop's token re-values automatically.) */

    /* a11y focus ring on the open drawer: core focuses #mobile-menu on open
       (WCAG); theme variants paint the UA outline GOLD (#e59700) — recolour
       to the shop accent so the ring stays visible AND on-brand. */
    /* KEYBOARD focus only (IJO001 lesson 2026-06-06: the brand ring fired on
       every tap-open via programmatic focus() and read as an error border;
       :focus-visible keeps it for keyboard users). */
    #mobile-menu:focus { outline: none; }
    #mobile-menu:focus-visible {
        outline: 2px solid var(--m-accent, #8c3b4a);
        outline-offset: -2px;
    }
}

/* INTENTIONALLY UNSCOPED (the one exception to the ≤767 rule): unlike GOL002,
   this shop's header-search-col also renders on DESKTOP, so the overlay close
   button inside it must default to hidden at every width. It only appears
   under html.m-search-open (mobile-scoped rule above). */
.m-search-close { display: none; }

/* NpcTranslator — shop tokens (values only; never edit core .npc-tr rules).
   Unscoped on purpose so desktop gets the brand accent too (rose #8c3b4a: white text 7.4:1).
   On the rose utility bar and the ink footer the active pill flips to white (SAB001 block). */
.npc-tr, .npc-tr-banner, .npc-tr-progress { --npc-tr-active-bg: #8c3b4a; --npc-tr-active-fg: #fff; --npc-tr-banner-accent: #8c3b4a; }

/* ===== SAB001 (Sabora) =====
   Shop skin for design v1 "A" (docs/02-design/features/sab001-storefront.design.md
   §8.1-8.4, §8.6 skin). Palette / type TOKENS live in wigstheme.css :root
   (--sab-*, --rd-accent-red*, --black, --font-*); this block holds the RULES.
   It renders LAST (AddCssFileParts): equal-specificity ties go to it, and the
   wigstheme / simplex !important rules are out-ranked with !important plus a
   higher specificity where noted. Core views keep their markup - everything
   below targets existing classes.
   Breakpoints: phone <= 767 / desktop >= 768 (core standard). The promo tiles
   follow NpcBanner's own mobile-art switch (<= 768).
   ============================================================================ */

:root {
    --sab-gutter: clamp(16px, 4.45vw, 64px); /* 64px side padding at 1440 */
    --sab-content: 1312px;                    /* content width at 1440 */
    /* PDP selected states / multi-colour bulk add (product-details-minimal.css
       + multicolor-bulk-add-*.css read these) */
    --accent-red: #8c3b4a;
    --accent-red-hover: #6e2a39;
    --multicolor-add-bg: #8c3b4a;
    --multicolor-add-bg-hover: #6e2a39;
}
/* cart css declares its blue palette in its own :root and may load after this
   file (view-level <link>) - html:root (0,1,1) out-ranks :root regardless of order */
html:root {
    --nop-primary: #8c3b4a;
    --nop-primary-hover: #6e2a39;
    --nop-primary-active: #6e2a39;
}

/* ---------------------------------------------------------------------------
   1. TYPE + BUTTONS (all pages)
   --------------------------------------------------------------------------- */
body { color: var(--sab-ink); }

/* page titles: Montserrat 300, uppercase, .08em, centred.
   .page ... .panel-heading beats the ContactUs view's inline <style> (0,2,1)
   and b2b-registration.css (0,3,1). */
.page .page-title.panel-heading,
.page .page-title {
    border: 0;
    background: none;
    text-align: center;
}
.page .page-title.panel-heading h1,
.page .page-title h1 {
    font-family: var(--font-primary) !important;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sab-ink);
    margin: 8px 0 24px;
}
@media (max-width: 767.98px) {
    .page .page-title.panel-heading h1,
    .page .page-title h1 { font-size: 22px; margin: 4px 0 16px; }
}

/* primary button: rose fill, white text (7.4:1), >= 44px, flat (the base theme
   lifts buttons -2px with a shadow on hover) */
.btn.btn-primary,
.button-1,
.google-authenticator-conteiner .buttons button {
    background-color: var(--sab-rose) !important;
    border: 1px solid var(--sab-rose) !important;
    color: #fff !important;
    border-radius: 0 !important;
    min-height: 44px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: none !important;
    transform: none !important;
}
/* the flyout cart's checkout button (its css pins it ink at 0,4,0 !important) */
.flyout-cart-wrapper .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button.flyout-cart-checkout-button {
    background-color: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
    color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.button-1:hover,
.button-1:focus,
.google-authenticator-conteiner .buttons button:hover {
    background-color: var(--sab-rose-dark) !important;
    border-color: var(--sab-rose-dark) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
/* secondary button: 1px ink outline */
.btn.btn-default,
.payment-method .save-customer-info-button {
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
    border-radius: 0 !important;
    font: 500 12px var(--font-primary) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.payment-method .save-customer-info-button:hover,
.payment-method .save-customer-info-button:focus {
    background: var(--sab-ink) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
/* keyboard focus stays visible on the flat buttons */
.btn:focus-visible,
.button-1:focus-visible {
    outline: 2px solid var(--sab-rose) !important;
    outline-offset: 2px;
}

/* pager: rose current page */
.pager li.current-page > span {
    background: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   2. HEADER (desktop >= 768; phones keep the core v3 app-bar)
   --------------------------------------------------------------------------- */
/* simplex pads .header 15px 20px / 18px 35px / 20px 50px (!important) between
   500 and 1199px - the rose bar runs edge to edge instead */
.header {
    padding: 0 !important;
    background: #fff !important;
}

/* black (ink) utility bar (36px): announcement left, EN/ES right - owner 2026-10-01 (was rose + tagline) */
.header .header-upper {
    height: auto;
    background: var(--sab-ink);
    color: #fff;
}
/* EN/ES on the dark bar: white outline, white active pill with ink text */
.header .header-upper .npc-tr {
    --npc-tr-active-bg: #fff;
    --npc-tr-active-fg: var(--sab-ink);
    --npc-tr-border: rgba(255, 255, 255, .5);
    color: #fff;
}
.header .header-upper .npc-tr .npc-tr__opt { color: #fff; }
.header .header-upper .npc-tr .npc-tr__opt[aria-pressed="true"] { color: var(--sab-ink); }
.header .header-upper .npc-tr .npc-tr__opt span { color: inherit; }
.header .header-upper .npc-tr .npc-tr__opt:focus-visible { outline-color: #fff; }

@media (min-width: 768px) {
    /* simplex pins .html-home-page .header .container to 95% !important */
    .header .header-upper > .container,
    .header .header-lower > .container {
        width: 100% !important;
        max-width: calc(var(--sab-content) + 2 * var(--sab-gutter)) !important;
        margin: 0 auto;
        padding: 0 var(--sab-gutter);
    }
    .header .header-upper .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 36px;
        margin: 0;
    }
    .header .header-upper .row::before,
    .header .header-upper .row::after { content: none; }
    .header .header-upper .row > [class*="col-"] {
        width: auto;
        float: none;
        padding: 0;
    }
    .header .header-upper .header-selectors-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    /* 96px row, 3 equal columns: search | logo | account links + cart */
    .header .header-lower {
        padding: 0;
        border-bottom: 0;   /* logo row + menu row read as one white header (a hairline between them split it, user 2026-10-01) */
    }
    .header .header-lower .row {
        display: grid;
        /* sides share the rest equally, so the logo stays centred */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 24px;
        align-items: center;
        min-height: 96px;
        margin: 0;
    }
    .header .header-lower .row::before,
    .header .header-lower .row::after { content: none; }
    .header .header-lower .row > [class*="col-"] {
        width: auto;
        float: none !important;   /* .pull-left */
        padding: 0;
        min-height: 0;
    }

    /* search: underline field, 300px */
    .header .header-lower .header-search-col .search-box {
        float: none;
        width: 300px;
        max-width: 100%;
        margin: 0;
        overflow: visible;
    }
    .header .header-lower .header-search-col .search-box .navbar-form {
        margin: 0;
        padding: 0;
        width: 100%;
        border: 0;
        box-shadow: none;
    }
    .header .header-lower .header-search-col .search-box .form-group {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
        border-bottom: 1px solid var(--sab-ink);
    }
    .header .header-lower .header-search-col .search-box .search-nav {
        width: 100%;
        height: 38px;
        padding: 0 36px 0 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none;
        font: 400 14px var(--font-default);
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-search-col .search-box .search-nav::placeholder { color: #5c5456; }
    .header .header-lower .header-search-col .search-box .btn.search-box-button {
        right: 0;
        top: 2px;
        width: 34px;
        height: 34px;
    }
    .header .header-lower .header-search-col .search-box .btn.search-box-button::before {
        color: var(--sab-ink);
        opacity: 1;
    }

    /* logo: centred at its native 404x50 like saboraclothing.com (was 24px, design v1 "A") */
    .header .header-lower .header-logo-col { justify-self: center; }
    .header .header-lower .header-logo { text-align: center; }
    .header .header-lower .header-logo a { display: inline-flex; align-items: center; }
    .header .header-lower .header-logo img {
        display: block;
        max-height: 50px;
        width: auto;
        max-width: 100%;
    }

    /* right: SIGN IN, rose REGISTER, cart */
    .header .header-lower .header-cart-col {
        justify-self: end;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px 20px;
    }
    .header .header-lower .header-links-wrapper .header-top-right {
        float: none;
        width: auto;
    }
    .header .header-lower .header-top-right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 4px 20px;
        margin: 0;
        padding: 0;
    }
    .header .header-lower .header-top-right ul li { float: none; }
    .header .header-lower .header-top-right ul li.login,
    .header .header-lower .header-top-right ul li.my-account { order: 1; }
    .header .header-lower .header-top-right ul li.register,
    .header .header-lower .header-top-right ul li.logout { order: 2; }
    /* wishlist lives in the footer (Favorite items) and the account pages */
    .header .header-lower .header-top-right ul li.my-wishlist { display: none; }
    .header .header-lower .header-top-right ul li a {
        float: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        margin: 0;
        padding: 0 !important;
        border: 0;
        background: none !important;
        font-family: var(--font-primary);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-top-right ul li a:hover,
    .header .header-lower .header-top-right ul li a:focus { color: var(--sab-rose) !important; }
    .header .header-lower .header-top-right ul li a span { color: inherit !important; }
    /* the base theme pins a FontAwesome glyph before every header link */
    .header .header-lower .header-top-right ul li a::before {
        content: none !important;
        display: none !important;
    }
    .header .header-lower .header-top-right ul li.register a {
        padding: 0 16px !important;
        background: var(--sab-rose) !important;
        color: #fff !important;
    }
    .header .header-lower .header-top-right ul li.register a:hover,
    .header .header-lower .header-top-right ul li.register a:focus {
        background: var(--sab-rose-dark) !important;
        color: #fff !important;
    }

    /* cart: signed-in flyout link or the guest fallback - one 40px hit area (the icon itself is 22px, section (5)) */
    .header .header-lower .header-cart-col .flyout-main-wrapper {
        float: none;
        margin: 0;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart {
        float: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: auto !important;
        min-height: 44px;
        padding: 0 0 0 28px !important;
        color: var(--sab-ink) !important;
        text-decoration: none;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart::before {
        font-size: 20px;
        color: var(--sab-ink);
        opacity: 1;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .cart-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .cart-qty {
        font: 400 12px var(--font-default);
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--sab-ink) !important;
        text-decoration: none;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback::before {
        content: "\f07a";
        font: normal normal normal 20px/1 FontAwesome;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback .cart-qty { display: none; }
}
/* the guest fallback yields to the real flyout link at every width */
.header .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }

/* main nav: 48px, centred caps, SALE in rose (TopMenu markup, CSS only).
   Type matches saboraclothing.com: Lato 14px 400 (live asks 500, Lato has none), letter-spacing 1px, ~30px apart */
@media (min-width: 768px) {
    .header-menu {
        margin-bottom: 32px;
        border-bottom: 1px solid var(--sab-line);
        background: #fff !important;
    }
    .html-home-page .header-menu { margin-bottom: 0; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 30px;
        float: none;
        width: 100%;
        margin: 0;
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li { float: none; }
    /* simplex reserves 35px for a chevron that is hidden on desktop */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a.dropdown-toggle { padding-right: 0 !important; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a {
        float: none;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0;
        background: transparent;
        font-family: var(--font-default);
        font-size: 14px;
        font-weight: 400;   /* Lato has no 500 - it always rendered 400 (live asks 500 and gets 400 too) */
        line-height: 1.2;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sab-ink);
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:hover,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:focus,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.active > a,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown.open > a {
        background: transparent !important;
        color: var(--sab-rose) !important;
    }
    /* wigstheme paints every header-menu link black !important (0,1,1) */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a[href$="/sale"] {
        color: var(--sab-rose) !important;
        font-weight: 700;   /* Lato has no 600 - it always rendered 700 */
    }
    /* drop the base theme's hover triangle under dropdown parents */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a:hover::before { content: none; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu {
        border: 1px solid var(--sab-line);
        border-radius: 0;
        box-shadow: 0 8px 20px rgba(35, 31, 32, .08);
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a {
        padding: 10px 18px !important;
        background: #fff !important;
        font: 400 13px var(--font-default);
        letter-spacing: .04em;
        color: var(--sab-ink) !important;
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before { content: none; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a:hover { color: var(--sab-rose) !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav { column-gap: 24px; }
    .header .header-lower .header-cart-col,
    .header .header-lower .header-top-right ul { column-gap: 12px; }
    .header .header-lower .header-top-right ul li a { letter-spacing: .08em; }
    /* private messages stay reachable from the account pages */
    .header .header-lower .header-top-right ul li:has(> .ico-inbox) { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* tight side columns: the cart shows its icon only (the count stays for
       screen readers and in the flyout) */
    .header .header-lower .header-cart-col .shopping-cart-link .cart-qty {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    /* black strip (30px) with the announcement; EN/ES stays in the menu drawer and the footer on
       phones, so with no announcement the strip has nothing to show and is hidden */
    .header .header-upper { padding-block: 0; }
    .header .header-upper:not(:has(.announcement-bar)) { display: none; }
    .header .header-upper .row { justify-content: center; min-height: 30px; }
    .header .header-upper .header-selectors-col { display: none; }
    /* the account links sit in the drawer on phones (TopMenu .mobile-menu-account) */
    .header .header-lower .header-links-wrapper { display: none; }
}
@media (max-width: 374px) {
    .html-home-page .sab-cat-bars a { letter-spacing: .1em; }
}

/* ---------------------------------------------------------------------------
   3. HOME: category bars + promo tiles (NpcBanner, zone main_column_after)
   --------------------------------------------------------------------------- */
/* the home column carries the promo tiles as direct children: a 12-col grid
   lays them 7:5 inside the 1312px content width */
.html-home-page .master-column-wrapper > .container > .row > .col-md-12 {
    float: none;
    max-width: calc(var(--sab-content) + 30px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
}
.html-home-page .master-column-wrapper > .container > .row > .col-md-12 > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.html-home-page .sab-cat-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.html-home-page .sab-cat-bars li { margin: 0; }
.html-home-page .sab-cat-bars a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 12px;
    border: 1px solid var(--sab-ink);
    background: #fff;
    color: var(--sab-ink);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.html-home-page .sab-cat-bars a:hover,
.html-home-page .sab-cat-bars a:focus {
    background: var(--sab-ink);
    border-color: var(--sab-ink);
    color: #fff !important;
}
.html-home-page .sab-cat-bars a.is-sale {
    background: var(--sab-rose);
    border-color: var(--sab-rose);
    color: #fff;
}
.html-home-page .sab-cat-bars a.is-sale:hover,
.html-home-page .sab-cat-bars a.is-sale:focus {
    background: var(--sab-rose-dark);
    border-color: var(--sab-rose-dark);
}

.html-home-page .npc-banner.sab-promo {
    display: block;
    margin: 32px 0 0;
    overflow: hidden;
    background: var(--sab-blush);
}
.html-home-page .npc-banner.sab-promo .npc-banner-link,
.html-home-page .npc-banner.sab-promo picture {
    display: block;
    width: 100%;
    max-width: none;
}
.html-home-page .npc-banner.sab-promo img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}
@media (min-width: 769px) {
    .html-home-page .master-column-wrapper > .container > .row > .col-md-12 > .sab-promo--wide { grid-column: span 7; }
    .html-home-page .master-column-wrapper > .container > .row > .col-md-12 > .sab-promo--narrow { grid-column: span 5; }
    /* the desktop pair is one 2592x1040 artwork cut 1512 + 1080 (~ the 7/5 split) with the text baked in: the wide
       card keeps its image ratio and the narrow one stretches to the same row height. A fixed 520px height cropped
       "10% OFF" / the SALE caption bar as soon as the window got narrower than ~1300px (2026-10-03). */
    .html-home-page .npc-banner.sab-promo--wide { aspect-ratio: 1512 / 1040; }
    .html-home-page .npc-banner.sab-promo--narrow { align-self: stretch; }
    .html-home-page .npc-banner.sab-promo--narrow img { object-position: center bottom; }   /* caption bar is at the bottom */
    .html-home-page .npc-banner.sab-promo .npc-banner-link,
    .html-home-page .npc-banner.sab-promo picture,
    .html-home-page .npc-banner.sab-promo img { height: 100%; }
    .html-home-page .npc-banner.sab-promo img { object-fit: cover; }
}
@media (max-width: 767.98px) {
    .html-home-page .sab-cat-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }
    .html-home-page .sab-cat-bars a {
        height: 52px;
        font-size: 12px;
        letter-spacing: .18em;
    }
}
@media (max-width: 768px) {
    .html-home-page .npc-banner.sab-promo { margin-top: 12px; }
    .html-home-page .page.home-page + .npc-banner.sab-promo { margin-top: 20px; }
}

/* ---------------------------------------------------------------------------
   4. FOOTER: blush newsletter band + ink 4-column block
   --------------------------------------------------------------------------- */
.html-home-page .footer { margin-top: 72px; }
.footer { margin-top: 48px; }

.footer .footer-upper {
    padding: 48px var(--sab-gutter) !important;
    border-bottom: 0 !important;
    background: var(--sab-blush) !important;
}
.footer .footer-upper > .container { width: 100%; max-width: 100%; padding: 0; }
.footer .footer-upper .row { margin: 0; display: flex; justify-content: center; }
.footer .footer-upper .newsletter-wrapper { width: 100%; float: none; padding: 0; }
.footer .footer-upper .newsletter-email {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.footer .footer-upper .newsletter-email strong {
    float: none;
    margin: 0;
    color: var(--sab-ink) !important;
    font-family: var(--font-default);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}
.footer .footer-upper .newsletter-email .form-group {
    float: none;
    display: flex;
    width: 520px;
    max-width: 100%;
    margin: 0;
}
.footer #newsletter-subscribe-block #newsletter-email {
    float: none;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--sab-ink) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--sab-ink) !important;
    font: 400 15px var(--font-default);
    box-shadow: none !important;
}
.footer #newsletter-subscribe-block #newsletter-subscribe-button {
    float: none;
    flex: 0 0 auto;
    height: 54px;
    max-height: none;
    margin: 0 !important;
    padding: 0 30px !important;
    border: 1px solid var(--sab-ink) !important;
    border-radius: 0 !important;
    background: var(--sab-ink) !important;
    color: #fff !important;
    font: 600 12px var(--font-primary) !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    transform: none !important;
    box-shadow: none !important;
}
.footer #newsletter-subscribe-block #newsletter-subscribe-button:hover,
.footer #newsletter-subscribe-block #newsletter-subscribe-button:focus {
    background: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
}
.footer .footer-upper .newsletter-validation,
.footer .footer-upper .newsletter-result-block { color: var(--sab-ink); }

/* ink block */
.footer .footer-middle {
    padding: 52px 0 36px !important;
    background: var(--sab-ink) !important;
}
.footer .footer-middle > .container,
.footer .footer-lower > .container {
    width: 100% !important;
    max-width: calc(var(--sab-content) + 2 * var(--sab-gutter)) !important;
    margin: 0 auto;
    padding: 0 var(--sab-gutter);
}
.footer .footer-middle .title { margin: 0 0 16px; }
/* column titles / links: Lato caps like saboraclothing.com (16px 700 / 13px 400) */
.footer .footer-middle .title strong {
    color: #fff !important;
    font-family: var(--font-default) !important;   /* wigstheme sets the heading font !important */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.footer .footer-middle .column ul { margin: 0; padding: 0; }
.footer .footer-middle .column ul li {
    margin: 0 0 10px;
    text-transform: none;
}
.footer .footer-middle .column ul li a {
    display: inline;
    margin: 0;
    padding: 0;
    color: #fff !important;
    font: 400 13px/1.8 var(--font-default);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}
/* rose on ink is too dark (2.2:1): hover goes blush + underline */
.footer .footer-middle .column ul li a:hover,
.footer .footer-middle .column ul li a:focus {
    color: var(--sab-blush) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
/* (1) logo + FooterContact topic */
.footer .footer-middle .footer-logo { margin: 0 0 12px; }
.footer .footer-middle .footer-logo img {
    display: block;
    height: auto;
    max-height: 22px;   /* saboraclothing.com footer logo = 178x22 */
    width: auto;
    max-width: 100%;
    /* white version of a dark logo: invert, then 'screen' drops any (now black)
       background into the ink panel */
    filter: invert(1);
    mix-blend-mode: screen;
}
.footer .footer-middle .footer-contact .topic-html-content-title { display: none; }
.footer .footer-middle .footer-contact .topic-html-content,
.footer .footer-middle .footer-contact .topic-html-content-body,
.footer .footer-middle .footer-contact address,
.footer .footer-middle .footer-contact p {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--sab-muted-on-ink);
    font: normal 400 14px/1.7 var(--font-default);
    letter-spacing: 0;
    text-align: left;
}
.footer .footer-middle .footer-contact a {
    color: #fff !important;
    text-decoration: none;
}
.footer .footer-middle .footer-contact a:hover { text-decoration: underline !important; }

/* bottom row: copyright | English / Espanol | back to top */
.footer .footer-lower {
    padding: 0 0 12px;
    background: var(--sab-ink) !important;
}
.footer .footer-lower-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    min-height: 60px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.footer .footer-lower .footer-disclaimer {
    margin: 0;
    color: var(--sab-muted-on-ink) !important;
    font: 400 13px var(--font-default);
}
.footer .footer-lower .footer-lower-zone {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.footer .footer-lower .npc-tr-footer.container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer .footer-lower .npc-tr {
    --npc-tr-active-bg: #fff;
    --npc-tr-active-fg: var(--sab-ink);
    --npc-tr-border: rgba(255, 255, 255, .5);
}
/* wigstheme paints every footer-lower descendant white !important */
.footer .footer-lower .npc-tr .npc-tr__opt[aria-pressed="true"],
.footer .footer-lower .npc-tr .npc-tr__opt[aria-pressed="true"] * { color: var(--sab-ink) !important; }
.footer .footer-lower .footer-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #fff !important;
    font: 500 11px var(--font-primary);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}
.footer .footer-lower .footer-back-to-top:hover { text-decoration: underline !important; }
.footer .footer-lower .footer-credits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 4px 0 8px;
    font: 400 11px var(--font-default);
    opacity: .7;
}
.footer .footer-lower .footer-credits .designedby { text-align: left; }
.footer .footer-lower .footer-credits .designedby > span + span { margin-left: 8px; }

@media (min-width: 768px) {
    .footer .footer-middle > .container > .row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;
        margin: 0;
    }
    .footer .footer-middle > .container > .row::before,
    .footer .footer-middle > .container > .row::after { content: none; }
    .footer .footer-middle > .container > .row > .column {
        width: auto;
        max-width: none;
        float: none;
        flex: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer .footer-middle > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .html-home-page .footer { margin-top: 36px; }
    .footer { margin-top: 32px; }
    .footer .footer-upper { padding: 32px 16px !important; }
    .footer .footer-upper .newsletter-email { align-items: stretch; gap: 12px; }
    .footer .footer-upper .newsletter-email strong { font-size: 14px; letter-spacing: .16em; }
    .footer .footer-upper .newsletter-email .form-group {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .footer .footer-upper #newsletter-subscribe-block #newsletter-email {
        height: 50px !important;
        border-right: 1px solid var(--sab-ink) !important;
        font-size: 16px;
    }
    .footer .footer-upper #newsletter-subscribe-block #newsletter-subscribe-button {
        width: 100% !important;
        height: 50px !important;
    }

    .footer .footer-middle { padding: 8px 0 0 !important; }
    .footer .footer-middle > .container { padding: 0 16px; }
    /* accordions first (core m-acc), the always-open contact block below */
    .footer .footer-middle .container > .row {
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .footer .footer-middle .column {
        border-block-end: 1px solid rgba(255, 255, 255, .18);
        text-align: left;
    }
    .footer .footer-middle .column .title {
        display: flex;
        align-items: center;
        min-height: 52px;
        margin: 0;
        padding-block: 0;
        color: #fff;
    }
    .footer .footer-middle .column.m-acc > .title::after { color: #fff; }
    .footer .footer-middle .column ul li { margin: 0; }
    .footer .footer-middle .column .nav-list > li > a { min-height: 44px; display: flex; }
    .footer .footer-middle .footer-contact {
        order: 2;
        border-block-end: 0;
        padding: 22px 0 6px;
    }
    .footer .footer-middle .footer-logo img { max-height: 18px; }
    .footer .footer-middle .footer-contact address { font-size: 15px; line-height: 1.6; }

    .footer .footer-lower > .container { padding: 0 16px; }
    .footer .footer-lower-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-top: 0;
        padding: 8px 0 0;
    }
    .footer .footer-lower .footer-lower-zone { order: 1; margin-left: 0; }
    .footer .footer-lower .footer-disclaimer { order: 2; font-size: 12px; }
    .footer .footer-lower .footer-back-to-top { order: 3; }
    .footer .footer-lower .npc-tr-footer { justify-content: flex-start; padding-block: 0 !important; }
}

/* ---------------------------------------------------------------------------
   5. PAGES (Design §8.4) - CSS on the existing core markup
   --------------------------------------------------------------------------- */

/* 5.1 listing pages (category / search / new / manufacturer): 3 columns on
   desktop (phones: core mobile-category.css keeps 2). Page-scoped so product
   carousels / PDP grids keep their own columns. Selector specificity (0,5,0)
   + later load beats catalog-viewmode-custom.css (0,5,0 !important). */
@media (min-width: 768px) {
    .html-category-page .product-grid .item-grid.row,
    .html-search-page .product-grid .item-grid.row,
    .html-recently-added-products-page .product-grid .item-grid.row,
    .html-manufacturer-page .product-grid .item-grid.row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 24px;
        row-gap: 8px;
        margin: 0 !important;
        overflow: visible !important;
    }
    .html-category-page .product-grid .item-grid.row::before,
    .html-category-page .product-grid .item-grid.row::after,
    .html-search-page .product-grid .item-grid.row::before,
    .html-search-page .product-grid .item-grid.row::after,
    .html-recently-added-products-page .product-grid .item-grid.row::before,
    .html-recently-added-products-page .product-grid .item-grid.row::after,
    .html-manufacturer-page .product-grid .item-grid.row::before,
    .html-manufacturer-page .product-grid .item-grid.row::after { content: none !important; display: none !important; }
    .html-category-page .product-grid .item-grid .item-box.item-box,
    .html-search-page .product-grid .item-grid .item-box.item-box,
    .html-recently-added-products-page .product-grid .item-grid .item-box.item-box,
    .html-manufacturer-page .product-grid .item-grid .item-box.item-box {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        float: none !important;
        clear: none !important;
        padding: 0 !important;
        margin: 0 0 24px !important;
    }
}

/* 5.2 product box: portrait picture (core 3:4), 2-line name, rose price */
.product-grid .product-item .product-title-inline a,
.product-grid .product-item .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sab-ink);
    font-family: var(--font-default);
}
.product-grid .product-item .prices .actual-price,
.product-grid .product-item .prices-inline .actual-price {
    color: var(--sab-rose);
    font-weight: 700;
}

/* 5.3 product details: caps name, Montserrat accordion headers */
.product-details-page .product-name h1 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sab-ink);
}
.product-details-page .panel-heading .panel-title,
.product-details-page .panel-heading .panel-title a,
.product-details-page .product-details-tabs .nav-tabs > li > a {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.product-details-page .prices .product-price,
.product-details-page .prices .product-price span { color: var(--sab-rose); }

/* 5.4 login: centred title, the two existing blocks as blush cards, returning
   customer first (it is the second column in the markup) */
.login-page .customer-blocks > .row:first-child { display: flex; flex-wrap: wrap; }
.login-page .customer-blocks > .row:first-child::before,
.login-page .customer-blocks > .row:first-child::after { content: none; }
.login-page .customer-blocks > .row:first-child > div:has(.returning-wrapper) { order: -1; }
.login-page .returning-wrapper,
.login-page .new-wrapper {
    height: 100%;
    margin: 0 0 24px;
    padding: 32px;
    background: var(--sab-blush);
    border: 0;
    box-shadow: none;
}
.login-page .returning-wrapper fieldset,
.login-page .new-wrapper fieldset { margin: 0; padding: 0; border: 0; }
.login-page .returning-wrapper legend,
.login-page .new-wrapper legend {
    margin: 0 0 20px;
    border: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sab-ink);
}
.login-page .returning-wrapper .form-control {
    height: 46px;
    border: 1px solid #cfc3c1;
    border-radius: 0;
    background: #fff;
}
.login-page .returning-wrapper .login-button { width: 100%; min-height: 48px; }
.login-page .returning-wrapper .form-group .col-md-3 { width: 100%; float: none; }
/* new customer: nop copy + Register as the secondary (outline) button */
.login-page .new-wrapper .register-button {
    min-height: 48px;
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
}
.login-page .new-wrapper .register-button:hover,
.login-page .new-wrapper .register-button:focus {
    background: var(--sab-ink) !important;
    border-color: var(--sab-ink) !important;
    color: #fff !important;
}
.login-page .topic-html-content {
    margin: 8px 0 0;
    font-family: var(--font-default);
    color: var(--sab-ink);
}
@media (max-width: 767.98px) {
    .login-page .returning-wrapper,
    .login-page .new-wrapper { height: auto; padding: 24px 16px; }
}

/* 5.5 register: the 3 existing wizard tabs read as a rose step bar */
.b2b-registration-wizard .nav-tabs { background: #fff; }
.b2b-registration-wizard .nav-tabs > li > a,
.b2b-registration-wizard .tab-title {
    font-family: var(--font-primary);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.b2b-registration-wizard .tab-title { font-size: 13px; font-weight: 500; }
.b2b-registration-wizard .nav-tabs > li.active > a,
.b2b-registration-wizard .nav-tabs > li.active > a:hover,
.b2b-registration-wizard .nav-tabs > li.active > a:focus { color: var(--sab-rose); }
.b2b-registration-wizard .fieldset-header h3 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.registration-page .page-title .subtitle { font-family: var(--font-default); }

/* 5.6 info pages: left help menu (core markup .has-help-nav .help-nav, §8.6) */
.has-help-nav .help-nav h2,
.has-help-nav .help-nav h3,
.has-help-nav .help-nav h4 {
    margin: 0 0 10px;
    font-family: var(--font-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sab-rose);
}
.has-help-nav .help-nav ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.has-help-nav .help-nav li { margin: 0; }
.has-help-nav .help-nav a {
    display: block;
    padding: 6px 0;
    color: var(--sab-ink) !important;
    font: 400 14px/1.5 var(--font-default);
    text-decoration: none;
}
.has-help-nav .help-nav a:hover,
.has-help-nav .help-nav a:focus { color: var(--sab-rose) !important; }
.has-help-nav .help-nav a[aria-current="page"] {
    color: var(--sab-rose) !important;
    font-weight: 700;
}
.topic-page .page-body { font-family: var(--font-default); line-height: 1.7; }
@media (max-width: 767.98px) {
    /* horizontal chip row (scrolls), not a stacked list */
    .has-help-nav .help-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0 15px 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .has-help-nav .help-nav::-webkit-scrollbar { display: none; }
    .has-help-nav .help-nav h2,
    .has-help-nav .help-nav h3,
    .has-help-nav .help-nav h4 { display: none; }
    .has-help-nav .help-nav ul {
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
        margin: 0;
    }
    .has-help-nav .help-nav li { flex: 0 0 auto; }
    .has-help-nav .help-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid #cfc3c1;
        border-radius: 999px;
        white-space: nowrap;
        font-size: 13px;
    }
    .has-help-nav .help-nav a[aria-current="page"] {
        border-color: var(--sab-rose);
        background: var(--sab-rose);
        color: #fff !important;
    }
}

/* 5.7 contact: rose SUBMIT (fonts via the --contact-font-* hooks); info layout = "info pages" below */
.contact-page__info .topic-html-content-body a { color: var(--sab-rose) !important; }

/* 5.8 cart / checkout: carded groups, rose CHECKOUT */
.shopping-cart-page .full-cart-container,
.shopping-cart-page .full-cart-totals-section,
.checkout-page .opc .step {
    border: 1px solid var(--sab-line);
    background: #fff;
}
.shopping-cart-page .full-cart-totals-section { background: var(--sab-blush); padding: 20px; }
.shopping-cart-page .full-cart-header,
.shopping-cart-page .full-cart-header * {
    font-family: var(--font-primary);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.full-cart-checkout-button,
.checkout-button {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    letter-spacing: .16em;
    min-height: 48px;
}
.checkout-page .opc .step-title h2 {
    font-family: var(--font-primary) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* 5.9 my account: menu 3/12 | content 9/12, scrolling tab row on phones */
@media (min-width: 992px) {
    .html-account-page .master-column-wrapper .sidebar { width: 25%; }
    .html-account-page .master-column-wrapper .side-content { width: 75%; }
}
.html-account-page .block-account-navigation .title strong {
    font-family: var(--font-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.html-account-page .block-account-navigation .listbox a {
    color: var(--sab-ink);
    font-family: var(--font-default);
}
.html-account-page .block-account-navigation .listbox a.active,
.html-account-page .block-account-navigation .listbox a:hover { color: var(--sab-rose) !important; }
@media (max-width: 767.98px) {
    .html-account-page .block-account-navigation { margin: 0 0 16px; }
    .html-account-page .block-account-navigation .title { display: none; }
    .html-account-page .block-account-navigation .listbox { display: block !important; border: 0; }
    .html-account-page .block-account-navigation .listbox ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .html-account-page .block-account-navigation .listbox li { flex: 0 0 auto; border: 0; }
    .html-account-page .block-account-navigation .listbox li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px !important;
        border: 1px solid #cfc3c1;
        border-radius: 999px;
        white-space: nowrap;
        background: none !important;
    }
    .html-account-page .block-account-navigation .listbox li a.active {
        border-color: var(--sab-rose);
        background: var(--sab-rose) !important;
        color: #fff !important;
    }
    .html-account-page .block-account-navigation .listbox li a.active::before { content: none !important; }
}

/* SAB001: on phones the hero pagination row is static (mobile-banner.css) and shows the theme's grey slider
   background under the art; keep that row on blush so the hero reads as one block */
/* same specificity as wigstheme's `.master-wrapper-content > .swiper.nop-slider` (grey-200 !important), later in order */
.master-wrapper-content > .swiper.nop-slider,
.nop-slider {
    background: var(--sab-blush, #f7e9e7) !important;
}

/* ===========================================================================
   SAB001 benchmark match (saboraclothing.com, measured 2026-10-01)
   =========================================================================== */
/* (1) ONE black row = announcement bar + EN/ES. The announcement (NewsWidget) renders inside
   .header-tagline-col (no tagline any more). The admin back colour / image is not painted here:
   the row stays ink (local news item set to the same #231f20).
   Readability: white on ink #231f20 = 16.3:1 (AAA); every text/link/icon in the row is forced white,
   since rich-editor text can carry its own colour and the theme's link blue would fail. */
.header .header-upper .header-tagline-col { min-width: 0; flex: 1 1 auto; }
.header .header-upper .announcement-bar {
    position: relative;
    width: 100%;
    border: 0 !important;
    background: transparent !important;   /* overrides the inline admin colour/image */
    background-image: none !important;
    color: #fff !important;
}
.header .header-upper .announcement-bar__content { max-width: none; margin: 0; }
.header .header-upper .announcement-bar__text,
.header .header-upper .announcement-bar__text * {
    color: #fff !important;                /* rich-editor text may carry its own colour */
    font-family: var(--font-default) !important;
    font-size: 13px !important;
    background: transparent !important;
}
.header .header-upper .announcement-bar__text {
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header .header-upper .announcement-bar__link {
    margin-left: 14px;
    font-weight: 400 !important;
    letter-spacing: .14em;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.header .header-upper .announcement-bar__link:hover,
.header .header-upper .announcement-bar__link:focus-visible { opacity: 1; text-decoration-thickness: 2px; }
.header .header-upper .announcement-bar__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 768px) {
    /* EN/ES keep their natural width; the announcement takes the rest of the row */
    .header .header-upper .header-selectors-col { flex: 0 0 auto; padding-left: 24px !important; }
}
@media (max-width: 767.98px) {
    /* phones: the announcement replaces the short tagline in the 30px strip, centred */
    .header .header-upper .header-tagline-col { width: 100%; }
    .header .header-upper .announcement-bar__text,
    .header .header-upper .announcement-bar__text * { font-size: 11px !important; }
    .header .header-upper .announcement-bar__text { line-height: 30px; letter-spacing: .08em; }
    .header .header-upper .announcement-bar__link { margin-left: 8px; letter-spacing: .08em; }
}

/* (2) footer contact = Store record lines + FooterContact topic (hours), one line each */
.footer .footer-middle .footer-contact address.footer-contact__store { margin: 0; }
.footer .footer-middle .footer-contact .footer-contact__line { display: block; }

/* (3) announcement row geometry (2026-10-01): the message sits centred on the whole row (not hugging the
   left), EN/ES stays pinned right, and the row is a fixed 36px at every desktop width (at 800px the
   EN/ES pill used to stretch it to 42px and drop the text 3px). The close button is not offered in the
   merged row: the row stays for EN/ES anyway, and on phones its 44px box overflowed the 30px strip. */
.header .header-upper .announcement-bar__close { display: none !important; }
.header .header-upper .announcement-bar { padding: 0 !important; text-align: center; }
.header .header-upper .announcement-bar__content { justify-content: center; }
@media (min-width: 768px) {
    .header .header-upper .row { position: relative; height: 36px; min-height: 36px; }
    .header .header-upper .header-tagline-col {
        position: absolute;
        inset: 0 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 140px !important;   /* EN/ES is ~113px: keep the centred message clear of it on both sides */
        pointer-events: none;
    }
    .header .header-upper .header-tagline-col .announcement-bar { pointer-events: auto; width: auto; max-width: 100%; }
    .header .header-upper .header-selectors-col { margin-left: auto; position: relative; z-index: 1; }
    .header .header-upper .header-selectors-wrapper,
    .header .header-upper .npc-tr { max-height: 30px; }
}
@media (max-width: 767.98px) {
    .header .header-upper .announcement-bar { padding: 0 12px !important; }
}


/* (4) masthead: no sticky pinning; hide on scroll down / show on scroll up (sab-masthead-v8.js), and on the
   home page at the very top a transparent masthead over a full-bleed hero (2026-10-01).
   Replaces: simplex.js pinning only the nav bar (.main-menu.goToTop, fixed z9999) on desktop. Phones keep the
   core .header hide-on-scroll; the wrapper must not become the sticky containing block there. */
.main-menu.goToTop,
.navbar.navbar-inverse.goToTop {
    position: static !important;
    top: auto !important;
    width: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}
@media (max-width: 767.98px) {
    .sab-masthead { display: contents; }
}
@media (min-width: 768px) {
    /* html + body both carry overflow-x:hidden, which makes BODY its own scroll container, so sticky never
       engages. clip hides the same horizontal overflow without creating a scroll container. */
    html, body { overflow-x: clip !important; }
    /* Safari <= 15 has no clip: hidden on BODY only (html visible) propagates to the viewport - no scroll container */
    @supports not (overflow-x: clip) {
        html { overflow-x: visible !important; }
        body { overflow-x: hidden !important; }
    }
    .sab-masthead {
        position: sticky;
        top: 0;
        z-index: 1029;
        background: #fff;
        transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
    }
    .sab-masthead:not(.is-top) { box-shadow: 0 2px 14px rgba(35, 31, 32, .08); }
    body.sab-mh-hidden .sab-masthead { transform: translateY(-100%); box-shadow: none; }
    /* product details: the masthead scrolls away with the page and never comes back pinned (same decision as
       simplex-v2.js for the theme's .main-menu): the gallery column is sticky itself and needs the height.
       sab-masthead-v9.js still toggles sab-mh-hidden here; the transform is cancelled so it has no effect. */
    html.html-product-details-page .sab-masthead { position: relative; box-shadow: none; }
    html.html-product-details-page body.sab-mh-hidden .sab-masthead { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sab-masthead { transition: none; }
}

/* home, at the top (desktop): the banner starts under the solid white logo row and only the MENU row lies
   transparent over it (section (9)). sab-masthead-v8.js measures the banner pixels under EACH menu item on every
   slide change and gives it white (.sab-tone-dark) or ink/rose type (.is-adaptive); an item on a dark/light edge
   gets a chip (section (10)). Glass fallback (video slides, unloaded or cross-origin art): .is-glass-dark = dark
   band + white type, else a light band - colours in section (8). Banner art: keep text clear of the top ~60px. */
.html-home-page .master-wrapper-content > .nop-slider { margin-top: calc(-1 * var(--sab-overlay-h, 0px)); }
.html-home-page .sab-masthead.is-top { background: transparent; }
.html-home-page .sab-masthead.is-top .header-lower,
.html-home-page .sab-masthead.is-top .header-menu,
.html-home-page .sab-masthead.is-top .header-menu .main-menu,
.html-home-page .sab-masthead.is-top .header-menu .navbar {
    background: transparent !important;
    border-color: transparent !important;
    transition: background-color .3s ease;
}
/* transparent: a soft halo in the item's own tone for the edges of busier areas */
.html-home-page .sab-masthead.is-top.is-adaptive .header-lower a:not(.sab-tone-dark),
.html-home-page .sab-masthead.is-top.is-adaptive .header-menu .nav.navbar-nav > li > a:not(.sab-tone-dark) { text-shadow: 0 0 6px rgba(255, 255, 255, .75); }
/* items over dark pixels: white type/icons/logo; SALE white + bold (rose cannot promise contrast on a photo);
   REGISTER keeps its rose fill (white on rose 7.4:1) and is never toned. The #id beats the cart/SALE/search rules
   that pin ink or rose with !important. */
.html-home-page #sab-masthead.is-top img.sab-tone-dark { filter: invert(1); }
.html-home-page #sab-masthead.is-top a.sab-tone-dark,
.html-home-page #sab-masthead.is-top a.sab-tone-dark *,
.html-home-page #sab-masthead.is-top a.sab-tone-dark::before,
.html-home-page #sab-masthead.is-top .m-menu-toggle.sab-tone-dark,
.html-home-page #sab-masthead.is-top .m-menu-toggle.sab-tone-dark *,
.html-home-page #sab-masthead.is-top .m-search-toggle.sab-tone-dark,
.html-home-page #sab-masthead.is-top .m-search-toggle.sab-tone-dark *,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .search-nav,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .btn.search-box-button,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .btn.search-box-button::before {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.html-home-page #sab-masthead.is-top a.sab-tone-dark[href$="/sale"] { color: #fff !important; font-weight: 700; }
/* white type over dark art cannot turn rose on hover (low contrast, and the tone colour is !important): underline */
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-dark:hover,
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-dark:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark { border-bottom-color: rgba(255, 255, 255, .9) !important; }
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .search-nav::placeholder { color: rgba(255, 255, 255, .85) !important; }

/* (5) header icons = one SVG line set (24px grid, 1.5 stroke, round caps) instead of the FontAwesome font
   glyphs (menu 0c9, search 002, cart 07a). Drawn as a CSS mask on the existing elements, so the core
   markup is untouched and the icon takes the element's text colour (hover / rose states keep working).
   Cart -> shopping bag (fashion convention). Proposal for the rest of the site: docs/03-analysis/sab001-svg-icons.md */
:root {
    /* header icons (sab001-ui-round2 P2/P3): one size, 22px, phone + desktop (iOS HIG toolbar glyph range, 44px touch
       targets on phones) and a LIGHTER 1.5 stroke than the site set (1.8, section (12)) so the thin SABORA wordmark
       leads and the icons read as secondary - at 1.8 the icons had the logo's own weight and height and the row read
       as one string of glyphs (user, 2026-10-01). Same drawings as gen_icons.py, stroke 1.5. */
    --sab-ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --sab-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
    --sab-ico-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3C/svg%3E");
    --sab-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
    --sab-header-icon: var(--sab-icon-lg);   /* 24px since (22c) */
}
.header .header-lower .m-menu-toggle .fa-bars::before,
.header .header-lower .m-search-toggle .fa-search::before,
.header .header-lower .search-box .btn.search-box-button::before,
.header .header-lower .ico-cart::before,
.header .header-lower .m-account-link .fa-user-o::before {
    content: "" !important;
    display: inline-block !important;
    width: var(--sab-header-icon) !important;
    height: var(--sab-header-icon) !important;
    font-size: 0 !important;
    background-color: currentColor !important;
    -webkit-mask: var(--sab-ico) center / contain no-repeat;
    mask: var(--sab-ico) center / contain no-repeat;
    vertical-align: middle;
    opacity: 1 !important;   /* the core mobile cart glyph is drawn at .7 */
}
.header .header-lower .m-menu-toggle .fa-bars::before { --sab-ico: var(--sab-ico-menu); }
.header .header-lower .m-search-toggle .fa-search::before,
.header .header-lower .search-box .btn.search-box-button::before { --sab-ico: var(--sab-ico-search); }
.header .header-lower .ico-cart::before { --sab-ico: var(--sab-ico-bag); }
.header .header-lower .m-account-link .fa-user-o::before { --sab-ico: var(--sab-ico-user); }
@media (min-width: 768px) {
    /* desktop cart: the base theme pins the font glyph absolutely inside 28px of left padding */
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart,
    .header .header-lower .header-cart-col a.ico-cart { padding-left: 0 !important; gap: 8px; min-height: 36px; }   /* 44px overflowed the 36px row 4px down */
    .header .header-lower .header-cart-col .ico-cart::before { position: static !important; transform: none !important; margin: 0 !important; }
    /* one header icon size (sab001-ui-round2 P3, 22px + header stroke 1.5; was bag 26 / search 20) */
}

/* (6) logo sizes = saboraclothing.com, measured on the drawn glyphs at 768-1920px (2026-10-01):
   header 404x50 above 1024px, 323x40 (80%) at 768-1024px; footer fluid = 12.4% of the window width,
   min 128px (live: 157px @1280, 178 @1440, 190 @1536, 239 @1920). Phones keep their own sizes (the live
   site is not responsive there). */
@media (min-width: 768px) and (max-width: 1024px) {
    .header .header-lower .header-logo img { max-height: 40px; }
}
@media (min-width: 768px) {
    .footer .footer-middle .footer-logo img {
        width: max(128px, 12.4vw);
        max-width: 100%;
        height: auto;
        max-height: none;
    }
}

/* (7) page-by-page match with saboraclothing.com (measured at 1440, 2026-10-01). Accent colours stay.
   Titles: live = Lato 25px 700 caps, centred, no tracking (was Montserrat 28px 300 .08em). */
.page .page-title.panel-heading h1,
.page .page-title h1 {
    font-family: var(--font-default) !important;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    margin: 4px 0 18px;
}
@media (max-width: 767.98px) {
    .page .page-title.panel-heading h1,
    .page .page-title h1 { font-size: 21px; margin: 4px 0 14px; }
}
/* info pages (topics + contact): live = side menu 210px at the left edge, right-aligned Lato caps;
   content column 978px, 90px away, title centred above a 1px bordered box (no blush band) */
.topic-page.has-help-nav .page-title.panel-heading,
.contact-page__wrapper.has-help-nav .page-title.panel-heading { text-align: center; }
.topic-page.has-help-nav .page-title.panel-heading h1,
.contact-page__wrapper.has-help-nav .page-title.panel-heading h1 {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    text-align: center;
}
.has-help-nav .help-nav h2,
.has-help-nav .help-nav h3,
.has-help-nav .help-nav h4 {
    margin: 0 0 4px;
    font-family: var(--font-default) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--sab-ink);
}
.has-help-nav .help-nav a {
    padding: 2px 0;
    font: 400 14px/1.6 var(--font-default);
    text-transform: uppercase;
}
.has-help-nav .help-nav a[aria-current="page"] {
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (min-width: 992px) {
    /* live: menu at 22px from the window edge at 1440 = a 1396px column with no inner gutters */
    .master-column-wrapper > .container:has(.has-help-nav) { width: 100% !important; max-width: 1396px !important; padding-inline: 0; }   /* contact: the theme pins .html-contact-page .container to 95% */
    .master-column-wrapper > .container:has(.has-help-nav) > .row { margin-inline: 0; }
    .master-column-wrapper > .container:has(.has-help-nav) > .row > [class*="col-"],
    .topic-page.has-help-nav,
    .contact-page__wrapper.has-help-nav { padding-inline: 0 !important; }
    .has-help-nav .help-nav-row {
        display: grid;
        grid-template-columns: 210px minmax(0, 978px);
        column-gap: 90px;
        margin: 0;
    }
    .has-help-nav .help-nav-row::before,
    .has-help-nav .help-nav-row::after { content: none; }
    .has-help-nav .help-nav-row > [class*="col-"] { width: auto; float: none; padding: 0; }
    .has-help-nav .help-nav { text-align: right; }
    .has-help-nav .help-nav ul { margin: 0 0 30px; }
    .contact-page__wrapper.has-help-nav { max-width: none !important; }
    .topic-page.has-help-nav .help-nav-content > .page-body,
    .contact-page__wrapper.has-help-nav .help-nav-content > .contact-details {
        padding: 30px 36px;
        border: 1px solid #ddd;
    }
}
/* contact: info centred inside the box (no blush card); labels in a left column like the live form;
   SUBMIT centred, auto width (rose kept) */
.contact-page__info { padding: 0 0 24px; background: none; text-align: center; }
@media (min-width: 768px) {
    .contact-page .contact-form__group {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }
    .contact-page .contact-form__group > label { padding-top: 8px; }
    .contact-page .contact-form__group > :not(label):not(input):not(textarea):not(select) { grid-column: 2; }
}
.contact-page .contact-form__group > label {
    font: 400 13px/1.4 var(--font-default) !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;   /* live: "Your Name *" */
    color: var(--sab-ink) !important;
}
.contact-page .contact-form__submit { text-align: center; }
.contact-page .contact-form__submit .contact-us-button { width: auto !important; min-width: 160px; display: inline-flex; justify-content: center; }
/* login: live = two white boxes with a 1px border, Lato 20px 700 headings followed by a rule,
   13px labels; primary button full width (rose kept) */
.login-page .returning-wrapper,
.login-page .new-wrapper {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
}
.login-page .returning-wrapper fieldset legend,
.login-page .new-wrapper.register-block fieldset legend {   /* = simplex's own selectors (0,3,2) / (0,4,2) */
    display: flex;
    padding: 0;
    border-bottom: 0;
    align-items: center;
    gap: 16px;
    width: 100%;
    font-family: var(--font-default);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
.login-page .returning-wrapper fieldset legend::after,
.login-page .new-wrapper.register-block fieldset legend::after {
    content: "";
    flex: 1 1 auto;
    max-width: 140px;
    margin-left: auto;
    border-top: 2px solid var(--sab-ink);
}
.login-page .returning-wrapper label,
.login-page .returning-wrapper .forgot-password a {
    font: 400 13px/1.4 var(--font-default);
    color: var(--sab-ink);
}
.login-page .returning-wrapper .login-button,
.login-page .new-wrapper .register-button {
    width: 100%;
    font-family: var(--font-default) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

/* (8) full banner + header polish (2026-10-01)
   - the header retone is MEASURED at the start of a slide change and APPLIED with a short --sab-tone-ms (240ms, set
     by sab-masthead-v8.js) centred on the cross-fade's 50 % blend, on autoplay and dot click alike
   - glass fallback: the menu row near-opaque (.9 light / .86 dark; the logo row above is always white)
   - arrows: 44px round buttons that stay visible on any art; bullets with a ring
   - the transitions are declared WITHOUT .is-top so leaving the top animates too (they used to apply only while at
     the top: scrolling down flipped the menu row from transparent to white in one frame, coming back faded - 2026-10-02) */
.html-home-page #sab-masthead .header-lower,
.html-home-page #sab-masthead .header-menu {
    transition: background-color var(--sab-tone-ms, .3s) ease;
}
.html-home-page #sab-masthead .header-lower a,
.html-home-page #sab-masthead .header-lower a *,
.html-home-page #sab-masthead .header-lower a::before,
.html-home-page #sab-masthead .header-lower .search-nav,
.html-home-page #sab-masthead .header-lower .btn.search-box-button::before,
.html-home-page #sab-masthead .header-lower .m-menu-toggle,
.html-home-page #sab-masthead .header-lower .m-search-toggle,
.html-home-page #sab-masthead .header-lower .header-logo img,
.html-home-page #sab-masthead .header-lower .form-group,
.html-home-page #sab-masthead .header-menu .nav.navbar-nav > li > a {
    /* no text-shadow here: an interpolated halo over a half-faded slide read as blurred type (v8 switches it) */
    transition: color var(--sab-tone-ms, .24s) ease, background-color var(--sab-tone-ms, .24s) ease,
                filter var(--sab-tone-ms, .24s) ease, border-color var(--sab-tone-ms, .24s) ease;
}
.html-home-page #sab-masthead.is-top:not(.is-adaptive):not(.is-glass-dark) .header-menu { background: rgba(255, 255, 255, .9) !important; }
.html-home-page #sab-masthead.is-top.is-glass-dark .header-menu { background: rgba(35, 31, 32, .86) !important; }
.html-home-page #sab-masthead.is-top:not(.is-adaptive) .header-menu { box-shadow: inset 0 1px 0 rgba(128, 128, 128, .18); }
@media (prefers-reduced-motion: reduce) {
    .html-home-page #sab-masthead.is-top * { transition: none !important; }
}
.master-wrapper-content > .nop-slider .swiper-button-prev,
.master-wrapper-content > .nop-slider .swiper-button-next {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 10px rgba(35, 31, 32, .18);
    color: var(--sab-ink);
    transition: background-color .2s ease, transform .2s ease;
}
.master-wrapper-content > .nop-slider .swiper-button-prev { left: 20px; }
.master-wrapper-content > .nop-slider .swiper-button-next { right: 20px; }
.master-wrapper-content > .nop-slider .swiper-button-prev::after,
.master-wrapper-content > .nop-slider .swiper-button-next::after { font-size: 16px; font-weight: 700; color: var(--sab-ink); }
.master-wrapper-content > .nop-slider .swiper-button-prev:hover,
.master-wrapper-content > .nop-slider .swiper-button-next:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 767.98px) {
    .master-wrapper-content > .nop-slider .swiper-button-prev,
    .master-wrapper-content > .nop-slider .swiper-button-next { display: none; }   /* swipe on phones */
}


/* (9) the banner starts UNDER the logo row (2026-10-01: it looked cut by it): the logo row is always solid white,
   only the menu row lies over the banner (desktop); phones get no overlap at all. Slide cross-fade = 1.2s ease-in-out
   (duration set by sab-masthead-v8.js, the curve here). */
.html-home-page #sab-masthead.is-top .header-lower {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--sab-line) !important;
}
@media (max-width: 767.98px) {
    .html-home-page #sab-masthead.is-top .header-menu {
        background: var(--m-header-bg, #fff) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
.master-wrapper-content > .nop-slider .swiper-slide { transition-timing-function: cubic-bezier(.45, 0, .25, 1) !important; }
/* full-image slides keep the art's ratio even with a stale cached plugin styles.css (the old copy lacks height:auto and the
   img height attribute then squashes the art - sab001-ui-round2 P11); this bundle is hash-busted */
.nop-slider picture .slider-img,
.nop-slider .swiper-full-link .slider-img { height: auto !important; }
/* real cross-fade: the plugin hides every non-active slide with visibility, so the outgoing slide vanished at the
   start of a change and the incoming one faded in over the blush slider background - the header kept the old
   (white) tone over that light flash. Keep all slides painted and let opacity (Swiper's fade) do the work; the active
   slide stays on top (z-index 10), so clicks still reach it. */
.nop-slider.swiper-fade .swiper-slide { visibility: visible !important; }

/* (10) no backdrop blur on the menu row over the banner: it smeared whatever photo lies under it (the model's head,
   2026-10-01). The glass fallback is a plain translucent tint now; adaptive mode stays fully transparent. */
.html-home-page #sab-masthead.is-top .header-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* per-item chip (sab-masthead-v8.js): a menu item over a dark/light edge of the art gets a 28px tinted band behind
   its own label only - the row stays transparent and the photo is not covered. The band is a pseudo element so it
   fades (opacity) with the type instead of popping in (a gradient background cannot transition). */
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a {
    position: relative;
    isolation: isolate;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 28px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .9);
    opacity: 0;
    transition: opacity var(--sab-tone-ms, .24s) ease, background-color var(--sab-tone-ms, .24s) ease;
    z-index: -1;
    pointer-events: none;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip {
    margin-inline: -10px;
    padding-inline: 10px !important;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip::after { opacity: 1; }
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip.sab-tone-dark::after {
    background: rgba(35, 31, 32, .82);
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip.sab-tone-dark { text-shadow: none; }

/* (11) no "bounce" on load: the banner's pull-up must be right on the FIRST paint. The script used to set
   --sab-overlay-h only after load, so the banner painted 51px low and then jumped up. The menu row is 51px at every
   desktop width (measured 800-1920); the script still re-measures, normally to the same value. */
@media (min-width: 768px) {
    :root { --sab-overlay-h: 51px; }
}

/* (12) site-wide SVG icons (2026-10-01, docs/03-analysis/sab001-svg-icons.md - approved: class map, bag for cart
   everywhere, social marks in the same line style). Every FontAwesome 4.7 class the storefront uses (theme views,
   plugin views, scripts) and every theme CSS glyph hook is redrawn with one line set: 24px grid, 1.8 stroke, round
   caps, painted in currentColor through a CSS mask. Markup is untouched; an unmapped class keeps the FA glyph
   (fa-spinner keeps its animation). Generated by gen_icons.py (see the skill) - edit the icon table, not the URIs. */
:root {
    --sab-i-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.5h.01'/%3E%3C/svg%3E");
    --sab-i-alert-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 20h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E");
    --sab-i-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --sab-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --sab-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3C/svg%3E");
    --sab-i-bag-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3Cpath d='M12 12.5v5M9.5 15h5'/%3E%3C/svg%3E");
    --sab-i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5 12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E");
    --sab-i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
    --sab-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    --sab-i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E");
    --sab-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sab-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --sab-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --sab-i-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
    --sab-i-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 7-5 5 5 5M11 7l-5 5 5 5'/%3E%3C/svg%3E");
    --sab-i-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 7 5 5-5 5M13 7l5 5-5 5'/%3E%3C/svg%3E");
    --sab-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    --sab-i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14M5 7l-2.5 6a2.5 2.5 0 0 0 5 0zM19 7l-2.5 6a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E");
    --sab-i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
    --sab-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
    --sab-i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
    --sab-i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3h-3a4.5 4.5 0 0 0-4.5 4.5V10H7v3.5h2.5V21H13v-7.5h3l.5-3.5H13V7.5A1 1 0 0 1 14 6.5h3z'/%3E%3C/svg%3E");
    --sab-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5v18h11V6.5z'/%3E%3Cpath d='M14 3v3.5h3.5M9 12h6M9 15.5h6'/%3E%3C/svg%3E");
    --sab-i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l2 2h10V19H3z'/%3E%3C/svg%3E");
    --sab-i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
    --sab-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'/%3E%3C/svg%3E");
    --sab-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9-9.4C2 7.3 4.3 4.5 7.3 4.5c2 0 3.6 1.1 4.7 2.8 1.1-1.7 2.7-2.8 4.7-2.8 3 0 5.3 2.8 4.3 6.1-1.5 4.8-9 9.4-9 9.4z'/%3E%3C/svg%3E");
    --sab-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h12V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
    --sab-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
    --sab-i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M17.3 6.7h.01'/%3E%3C/svg%3E");
    --sab-i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l4 4-4 4M14 12H4'/%3E%3C/svg%3E");
    --sab-i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5v16h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
    --sab-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
    --sab-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --sab-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8.5 10.5h.01M12 10.5h.01M15.5 10.5h.01'/%3E%3C/svg%3E");
    --sab-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --sab-i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1L19.5 8 16 4.5 5 15.5z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E");
    --sab-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --sab-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
    --sab-i-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10.6 20.5 1.9-8.2'/%3E%3Cpath d='M9.2 14.5a3.8 3.8 0 1 1 3.3 1.3c-.9 0-1.5-.4-1.8-.9'/%3E%3C/svg%3E");
    --sab-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --sab-i-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9M7 17H4V9h16v8h-3'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E");
    --sab-i-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6 4 12l6 6M4 12h9.5a6.5 6.5 0 0 1 6.5 6.5'/%3E%3C/svg%3E");
    --sab-i-rss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8'/%3E%3Ccircle cx='6' cy='18' r='1'/%3E%3C/svg%3E");
    --sab-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
    --sab-i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7zM21 3 10 13.5'/%3E%3C/svg%3E");
    --sab-i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h7M4 12h5M4 18h3M17 5v14M14 16l3 3 3-3'/%3E%3C/svg%3E");
    --sab-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5V20h16V9.5M3 5h18l-1 4.5H4zM9.5 20v-5h5v5'/%3E%3C/svg%3E");
    --sab-i-thumbs-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%28180 12 12%29'%3E%3Cpath d='M7 10.5V20H4v-9.5zM7 10.5l4-7c1.5 0 2.5 1 2.2 2.6l-.6 3.4H19a1.6 1.6 0 0 1 1.6 1.9l-1.4 7a1.9 1.9 0 0 1-1.9 1.6H7'/%3E%3C/g%3E%3C/svg%3E");
    --sab-i-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10.5V20H4v-9.5zM7 10.5l4-7c1.5 0 2.5 1 2.2 2.6l-.6 3.4H19a1.6 1.6 0 0 1 1.6 1.9l-1.4 7a1.9 1.9 0 0 1-1.9 1.6H7'/%3E%3C/svg%3E");
    --sab-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6 7l1 13h10l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E");
    --sab-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h11v10h-11zM13.5 9.5h4l3.5 3.5v3h-7.5'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
    --sab-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
    --sab-i-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c.8-4 3.6-6 7-6s6.2 2 7 6M19 6.5v6M16 9.5h6'/%3E%3C/svg%3E");
    --sab-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4.5L20 20h-4.5zM20 4l-6.6 7.2M10.6 12.8 4 20'/%3E%3C/svg%3E");
    --sab-i-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='3.5'/%3E%3Cpath d='M10 9.3v5.4l4.6-2.7z'/%3E%3C/svg%3E");
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before,
.fa.fa-search::before,
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before,
.fa.fa-cart-plus::before,
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before,
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before,
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before,
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before,
.fa.fa-angle-double-right::before,
.fa.fa-angle-double-left::before,
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before,
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before,
.fa.fa-plus::before,
.fa.fa-minus::before,
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before,
.fa.fa-check::before,
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before,
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before,
.fa.fa-exclamation-circle::before,
.fa.fa-info-circle::before,
.fa.fa-trash::before,
.fa.fa-trash-o::before,
.fa.fa-truck::before,
.fa.fa-ship::before,
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before,
.fa.fa-eye::before,
.fa.fa-eye-slash::before,
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before,
.fa.fa-user::before,
.fa.fa-user-o::before,
.fa.fa-user-plus::before,
.fa.fa-heart::before,
.fa.fa-heart-o::before,
.fa.fa-envelope::before,
.fa.fa-envelope-o::before,
.fa.fa-print::before,
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before,
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before,
.fa.fa-home::before,
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before,
.fa.fa-rss::before,
.fa.fa-rss-square::before,
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before,
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before,
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before,
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before,
.fa.fa-arrows-alt::before,
.fa.fa-expand::before,
.fa.fa-store::before,
.fa.fa-box::before,
.fa.fa-cube::before,
.fa.fa-th::before,
.fa.fa-th-large::before,
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before,
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before,
.fa.fa-cog::before,
.fa.fa-gear::before,
.fa.fa-sign-in::before,
.fa.fa-sign-out::before,
.fa.fa-balance-scale::before,
.fa.fa-phone::before,
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before,
.fa.fa-instagram::before,
.fa.fa-twitter::before,
.fa.fa-twitter-square::before,
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before,
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before,
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.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,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before,
.footer .footer-middle .column.m-acc > .title::after,
.forum-search-box .btn.search-box-button::before,
.no-result::before,
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before,
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before,
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before,
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before,
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before,
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before,
#mobile-menu .mobile-menu-account .ico-inbox::before,
#mobile-menu .mobile-menu-account a.ico-admin::before,
#backTop::after {
    content: "" !important;
    background-color: currentColor !important;
    -webkit-mask: var(--sab-i) center / contain no-repeat;
    mask: var(--sab-i) center / contain no-repeat;
    font-family: inherit !important;
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before,
.fa.fa-search::before,
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before,
.fa.fa-cart-plus::before,
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before,
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before,
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before,
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before,
.fa.fa-angle-double-right::before,
.fa.fa-angle-double-left::before,
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before,
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before,
.fa.fa-plus::before,
.fa.fa-minus::before,
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before,
.fa.fa-check::before,
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before,
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before,
.fa.fa-exclamation-circle::before,
.fa.fa-info-circle::before,
.fa.fa-trash::before,
.fa.fa-trash-o::before,
.fa.fa-truck::before,
.fa.fa-ship::before,
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before,
.fa.fa-eye::before,
.fa.fa-eye-slash::before,
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before,
.fa.fa-user::before,
.fa.fa-user-o::before,
.fa.fa-user-plus::before,
.fa.fa-heart::before,
.fa.fa-heart-o::before,
.fa.fa-envelope::before,
.fa.fa-envelope-o::before,
.fa.fa-print::before,
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before,
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before,
.fa.fa-home::before,
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before,
.fa.fa-rss::before,
.fa.fa-rss-square::before,
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before,
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before,
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before,
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before,
.fa.fa-arrows-alt::before,
.fa.fa-expand::before,
.fa.fa-store::before,
.fa.fa-box::before,
.fa.fa-cube::before,
.fa.fa-th::before,
.fa.fa-th-large::before,
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before,
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before,
.fa.fa-cog::before,
.fa.fa-gear::before,
.fa.fa-sign-in::before,
.fa.fa-sign-out::before,
.fa.fa-balance-scale::before,
.fa.fa-phone::before,
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before,
.fa.fa-instagram::before,
.fa.fa-twitter::before,
.fa.fa-twitter-square::before,
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before,
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before { --sab-i: var(--sab-i-menu); }
.fa.fa-search::before { --sab-i: var(--sab-i-search); }
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before { --sab-i: var(--sab-i-bag); }
.fa.fa-cart-plus::before { --sab-i: var(--sab-i-bag-plus); }
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before { --sab-i: var(--sab-i-chevron-left); }
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before { --sab-i: var(--sab-i-chevron-right); }
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before { --sab-i: var(--sab-i-chevron-down); }
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before { --sab-i: var(--sab-i-chevron-up); }
.fa.fa-angle-double-right::before { --sab-i: var(--sab-i-chevrons-right); }
.fa.fa-angle-double-left::before { --sab-i: var(--sab-i-chevrons-left); }
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before { --sab-i: var(--sab-i-arrow-right); }
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before { --sab-i: var(--sab-i-arrow-left); }
.fa.fa-plus::before { --sab-i: var(--sab-i-plus); }
.fa.fa-minus::before { --sab-i: var(--sab-i-minus); }
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before { --sab-i: var(--sab-i-close); }
.fa.fa-check::before { --sab-i: var(--sab-i-check); }
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before { --sab-i: var(--sab-i-check-circle); }
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before { --sab-i: var(--sab-i-alert-triangle); }
.fa.fa-exclamation-circle::before { --sab-i: var(--sab-i-alert-circle); }
.fa.fa-info-circle::before { --sab-i: var(--sab-i-info); }
.fa.fa-trash::before,
.fa.fa-trash-o::before { --sab-i: var(--sab-i-trash); }
.fa.fa-truck::before,
.fa.fa-ship::before { --sab-i: var(--sab-i-truck); }
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before { --sab-i: var(--sab-i-card); }
.fa.fa-eye::before { --sab-i: var(--sab-i-eye); }
.fa.fa-eye-slash::before { --sab-i: var(--sab-i-eye-off); }
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before { --sab-i: var(--sab-i-sort); }
.fa.fa-user::before,
.fa.fa-user-o::before { --sab-i: var(--sab-i-user); }
.fa.fa-user-plus::before { --sab-i: var(--sab-i-user-plus); }
.fa.fa-heart::before,
.fa.fa-heart-o::before { --sab-i: var(--sab-i-heart); }
.fa.fa-envelope::before,
.fa.fa-envelope-o::before { --sab-i: var(--sab-i-mail); }
.fa.fa-print::before { --sab-i: var(--sab-i-printer); }
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before { --sab-i: var(--sab-i-file); }
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before { --sab-i: var(--sab-i-pen); }
.fa.fa-home::before { --sab-i: var(--sab-i-home); }
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before { --sab-i: var(--sab-i-pin); }
.fa.fa-rss::before,
.fa.fa-rss-square::before { --sab-i: var(--sab-i-rss); }
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before { --sab-i: var(--sab-i-thumbs-up); }
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before { --sab-i: var(--sab-i-thumbs-down); }
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before { --sab-i: var(--sab-i-reply); }
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before { --sab-i: var(--sab-i-folder); }
.fa.fa-arrows-alt::before,
.fa.fa-expand::before { --sab-i: var(--sab-i-expand); }
.fa.fa-store::before { --sab-i: var(--sab-i-store); }
.fa.fa-box::before,
.fa.fa-cube::before { --sab-i: var(--sab-i-box); }
.fa.fa-th::before,
.fa.fa-th-large::before { --sab-i: var(--sab-i-grid); }
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before { --sab-i: var(--sab-i-send); }
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before { --sab-i: var(--sab-i-message); }
.fa.fa-cog::before,
.fa.fa-gear::before { --sab-i: var(--sab-i-gear); }
.fa.fa-sign-in::before { --sab-i: var(--sab-i-login); }
.fa.fa-sign-out::before { --sab-i: var(--sab-i-logout); }
.fa.fa-balance-scale::before { --sab-i: var(--sab-i-compare); }
.fa.fa-phone::before { --sab-i: var(--sab-i-phone); }
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before { --sab-i: var(--sab-i-facebook); }
.fa.fa-instagram::before { --sab-i: var(--sab-i-instagram); }
.fa.fa-twitter::before,
.fa.fa-twitter-square::before { --sab-i: var(--sab-i-x); }
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before { --sab-i: var(--sab-i-youtube); }
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before { --sab-i: var(--sab-i-pinterest); }
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.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,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before { --sab-i: var(--sab-i-chevron-right); }
.footer .footer-middle .column.m-acc > .title::after { --sab-i: var(--sab-i-chevron-down); }
.forum-search-box .btn.search-box-button::before,
.no-result::before { --sab-i: var(--sab-i-search); }
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before { --sab-i: var(--sab-i-user); }
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before { --sab-i: var(--sab-i-heart); }
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before { --sab-i: var(--sab-i-compare); }
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before { --sab-i: var(--sab-i-logout); }
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before { --sab-i: var(--sab-i-login); }
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before { --sab-i: var(--sab-i-user-plus); }
#mobile-menu .mobile-menu-account .ico-inbox::before { --sab-i: var(--sab-i-mail); }
#mobile-menu .mobile-menu-account a.ico-admin::before { --sab-i: var(--sab-i-gear); }
#backTop::after { --sab-i: var(--sab-i-chevron-up); }
/* pseudo glyph hooks: a font glyph had no box of its own - give each one an icon-sized box, or an icon-sized
   mask inside the fixed box the theme already gives it */
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.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,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before,
.footer .footer-middle .column.m-acc > .title::after,
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before,
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before,
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before,
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before,
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before,
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before,
#mobile-menu .mobile-menu-account .ico-inbox::before,
#mobile-menu .mobile-menu-account a.ico-admin::before {
    display: inline-block;
    width: 1.1em !important;
    height: 1.1em !important;
    line-height: 1 !important;
    vertical-align: -.15em;
}
.forum-search-box .btn.search-box-button::before {
    -webkit-mask-size: 20px;
    mask-size: 20px;
}
.no-result::before {
    width: 34px;
    height: 34px;
    margin-inline: auto;
}
#backTop::after {
    width: 100%;
    height: 100%;
    -webkit-mask-size: 18px;
    mask-size: 18px;
}

/* (13) floating buttons on the right edge share one centre line on desktop: the accessibility button (46px at
   right 20px) and #backTop (55px incl. padding, theme default right 40px) were 24px apart (user report). */
@media (min-width: 768px) {
    #backTop { right: 16px !important; }
}

/* (14) company pages = saboraclothing.com (About us, Contact us, Customer service, Terms; measured at 1440, 2026-10-01).
   Topic HTML: operations/deploy/unpublished/sab001/topics/. Live's own body font falls back to Times - we keep Lato. */
.topic-page .page-body { font-size: 13px; line-height: 21px; }
@media (min-width: 992px) {
    .topic-page.has-help-nav .help-nav-content > .page-body { padding: 40px 70px; }   /* live: text inset 70px in the 978px box */
    .topic-page.has-help-nav .help-nav-content > .page-body:has(.sab-topic-center) { padding: 24px 18px; }   /* About: lines nearly box-wide */
}
.topic-page .page-body h2,
.topic-page .page-body h3 {
    font-family: var(--font-default) !important;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sab-ink);
}
.topic-page .page-body h2 { font-size: 18px; line-height: 1.3; margin: 26px 0 12px; }
.topic-page .page-body h3 { font-size: 13px; line-height: 21px; margin: 24px 0 0; }   /* Customer service: Return / Shipping / Cancellation Policy */
.topic-page .page-body h2:first-child,
.topic-page .page-body h3:first-child { margin-top: 0; }
/* About us: centred 16px lines, a blank line between them */
.topic-page .page-body .sab-topic-center { text-align: center; font-size: 16px; line-height: 19px; }
.topic-page .page-body .sab-topic-center p { margin: 0 0 38px; }
.topic-page .page-body .sab-topic-center p:last-child { margin-bottom: 0; }
/* Terms: the bold caps notice 18px, the agreement line 15px, then 13px; lists flush left with text markers "1." / "a)" */
.topic-page .page-body .sab-terms-lead { font-size: 18px; line-height: 23px; margin-bottom: 12px; }
.topic-page .page-body .sab-terms-intro { font-size: 15px; line-height: 23px; }
.topic-page .page-body ol { list-style: none; padding-left: 0; counter-reset: sab-ol; }
.topic-page .page-body ol > li { counter-increment: sab-ol; }
.topic-page .page-body ol > li::before { content: counter(sab-ol) ". "; }
.topic-page .page-body ol[type="a"] > li::before { content: counter(sab-ol, lower-alpha) ") "; }
/* live leaves a blank line pair between Terms paragraphs (text gap 50px; measured block by block) */
.topic-page .page-body .sab-terms-lead ~ p,
.topic-page .page-body .sab-terms-lead ~ ol { margin-bottom: 45px; }
/* Contact us: info centred, 13px lines under 16px bold headings; SUBMIT Lato 18 bold (rose kept) */
/* .contact-page prefix: ContactUs.cshtml's inline <style> (later in the cascade) sets the p left !important */
.contact-page .contact-page__info .topic-html-content-body,
.contact-page .contact-page__info .topic-html-content-body p {
    font: 400 13px/20px var(--font-default) !important;
    text-align: center !important;
    color: var(--sab-ink) !important;
}
.contact-page .contact-page__info .topic-html-content-body p { margin: 0 0 14px !important; }
.contact-page .contact-page__info .topic-html-content-body a[href^="tel:"] { color: var(--sab-ink) !important; text-decoration: none; }   /* live: plain text */
.contact-page .contact-page__info .topic-html-content-body strong { font: 700 16px/24px var(--font-default) !important; letter-spacing: normal !important; }
.contact-page .contact-form__submit .contact-us-button { font: 700 18px/1 var(--font-default) !important; letter-spacing: .02em !important; }

/* (15) search UX (sab001-ui-round2 P4, 2026-10-02)
   desktop: the underline field turns rose 2px on focus, a clear button appears while there is text;
   phones: the top sheet gets a 44px rounded field with a rose focus ring and a "Cancel" text button;
   autocomplete rows 48px with 40px thumbnails and a "see all results" row; guests see a sign-in hint;
   results page: "Results for "q"" + count, and category links when nothing was found. */
.search-box .search-nav::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-box .search-clear {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #5c5456; font-size: 20px; line-height: 1; cursor: pointer;
}
.search-box .search-clear[hidden] { display: none; }
.search-box .search-clear:hover, .search-box .search-clear:focus-visible { background: rgba(35, 31, 32, .08); color: var(--sab-ink); }
.search-guest-hint { margin: 6px 0 0; font: 400 12px/1.4 var(--font-default); color: #5c5456; }
.search-guest-hint a { color: var(--sab-rose); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
    .header .header-lower .header-search-col .search-box .form-group { border-bottom-width: 1px; transition: border-color .15s ease, box-shadow .15s ease; }
    .header .header-lower .header-search-col .search-box .search-nav:focus,
    .header .header-lower .header-search-col .search-box .search-nav:focus-visible { outline: none !important; box-shadow: none !important; }
    .header .header-lower .header-search-col .search-box .form-group:focus-within {
        border-bottom-color: var(--sab-rose) !important;
        box-shadow: 0 1px 0 0 var(--sab-rose);   /* 2px total without moving the text */
    }
    .header .header-lower .header-search-col .search-box .search-nav { height: 40px; padding-right: 64px; }
    .header .header-lower .header-search-col .search-box .search-clear { right: 34px; }
    .header .header-lower .header-search-col .search-box .btn.search-box-button { top: 3px; }
    /* under the 40px field: .search-box has no height of its own (floated children), so top:100% sat ON the field and
       the hint overlapped the placeholder (sab001-shop Act-1) */
    .header .header-lower .header-search-col .search-guest-hint { position: absolute; top: 44px; left: 0; margin: 0; white-space: nowrap; }
    .header .header-lower .header-search-col .search-box .ui-autocomplete { border: 1px solid var(--sab-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
}
@media (max-width: 767.98px) {
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav {
        height: 44px; border-radius: 22px; padding: 0 76px 0 16px;
        background: #f4f4f4 !important; border: 1px solid transparent !important;
        font-size: 16px;   /* >= 16px: iOS does not zoom the page on focus */
    }
    /* ONE quiet focus state: the theme's 2px rose outline + Bootstrap's glow + a ring stacked into the heavy wine double
       border the user flagged (2026-10-01 screenshot) */
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav:focus,
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav:focus-visible {
        background: #fff !important; border-color: var(--sab-rose) !important;
        box-shadow: none !important; outline: none !important;
    }
    html.m-search-open .header .header-lower .header-search-col .search-box .form-group { border: 0 !important; box-shadow: none !important; }
    /* Cancel on the RIGHT of the field (iOS / app convention) */
    html.m-search-open .header .header-lower .header-search-col .search-box { order: 1; }
    html.m-search-open .header .header-lower .header-search-col .search-box .search-clear { right: 44px; }
    html.m-search-open .header .header-lower .header-search-col .search-box .search-box-button { min-height: 44px; }
    html.m-search-open .m-search-close {
        order: 2;
        flex: 0 0 auto; width: auto; padding: 0 4px 0 8px;
        font: 600 15px var(--font-default); letter-spacing: .01em; color: var(--sab-ink);
    }
    html.m-search-open .search-box .ui-autocomplete li,
    html.m-search-open .search-box .ui-autocomplete .ui-menu-item { min-height: 48px; }
    html.m-search-open .search-box .ui-autocomplete img { width: 40px !important; height: 40px; object-fit: cover; border-radius: 6px; }
    html.m-search-open .search-guest-hint { padding: 0 16px; }
}
.search-box .ui-autocomplete .search-all-results a { font-weight: 600; color: var(--sab-rose) !important; }
.html-search-page .page-title .search-summary { margin: 4px 0 0; font: 400 14px var(--font-default); color: #5c5456; text-align: inherit; }
.html-search-page .search-empty-suggest { margin: 8px 0 24px; font: 400 14px var(--font-default); }
.html-search-page .search-empty-suggest ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.html-search-page .search-empty-suggest a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--sab-ink); color: var(--sab-ink); text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}
.html-search-page .search-empty-suggest a:hover { background: var(--sab-ink); color: #fff; }

/* (16) phones: the tab bar follows the header (sab001-ui-round2 P5) - scrolling DOWN slides both away, any scroll UP
   brings both back. State = body.m-hdr-hidden from mobile-header-v3.js (never set at the top, with the drawer open,
   while focus is in the header incl. the search sheet, or with reduced motion). Same .2s as the header. */
@media (max-width: 767.98px) {
    .mobile-bottom-nav { transition: transform .2s ease; }
    body.m-hdr-hidden .mobile-bottom-nav { transform: translateY(100%); }
}

/* (17) one size system for icons, form fields and buttons (sab001-shop Act-1, 2026-10-02; user: "inconsistency
   icon/font size", "login input text too small"). Measured before (docs/03-analysis/sab001-shop.analysis.md R-1..R-5):
   chrome icons 22 / 20.7 / 17.6 / 16.5 / 14.9 / 12.6 px + a 16px font glyph on the hero arrows; desktop inputs
   14 / 15 / 16 px; labels 13/400, 13/400 cap, 14/600, 14/700; buttons Montserrat 12/500, Lato 15/700, Lato 18/700,
   Lato 13/700; header links Montserrat 12 next to a Lato 14 menu; side-nav and section titles in two families.
   Now: three icon sizes, one field size, one label style, one button style, Lato for every UI role.
   This section is last on purpose - it wins over sections (5), (7), (12), (14) and the base theme. */
:root {
    --sab-icon-lg: 24px;     /* chrome: header row + phone tab bar (22 -> 24 for readability, section (22c)) */
    --sab-icon-md: 20px;     /* UI: drawer account links, footer accordion, floating back-to-top, slider arrows */
    --sab-icon-sm: 16px;     /* inline markers inside text: side-nav arrows, "Back to top", "Messages" */
    --sab-fs-input: 16px;    /* every field, every viewport (16 also stops iOS zooming on focus) */
    --sab-fs-label: 14px;
    --sab-fs-button: 14px;
    /* tab bar = chrome: same 1.5 stroke as the header set (section (5)); home / sort only exist at 1.8 */
    --sab-ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h12V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
    --sab-ico-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h7M4 12h5M4 18h3M17 5v14M14 16l3 3 3-3'/%3E%3C/svg%3E");
}

/* (17a) icons */
.mobile-bottom-nav i.fa::before {
    width: var(--sab-icon-lg) !important;
    height: var(--sab-icon-lg) !important;
    vertical-align: middle;
}
.mobile-bottom-nav i.fa-home::before { --sab-i: var(--sab-ico-home); }
.mobile-bottom-nav i.fa-sort-amount-asc::before { --sab-i: var(--sab-ico-sort); }
.mobile-bottom-nav i.fa-search::before { --sab-i: var(--sab-ico-search); }
.mobile-bottom-nav i.fa-shopping-cart::before { --sab-i: var(--sab-ico-bag); }
.mobile-bottom-nav i.fa-user::before,
.mobile-bottom-nav i.fa-user-o::before { --sab-i: var(--sab-ico-user); }
#mobile-menu .mobile-menu-account li a[class^="ico-"]::before,
.header-links li a[class^="ico-"]::before,
.footer .footer-middle .column.m-acc > .title::after {
    width: var(--sab-icon-md) !important;
    height: var(--sab-icon-md) !important;
    vertical-align: middle;
}
#backTop::after {
    -webkit-mask-size: var(--sab-icon-md);
    mask-size: var(--sab-icon-md);
}
.footer-back-to-top .fa::before,
.block.block-account-navigation .listbox a .fa::before,
.block.block-account-navigation .listbox > ul > li > a.active::before,
.box-shadow-wrapper .listbox ul li a::before {
    width: var(--sab-icon-sm) !important;
    height: var(--sab-icon-sm) !important;
    vertical-align: -.2em;
}
/* product page Add to cart: the theme paints a cart PNG as the button background; every other cart in the shop is the
   line-set bag (section (12)) -> same bag, md size, in the button's text colour */
.product-add-button .add-to-cart-button {
    position: relative;
    background-image: none !important;
}
.product-add-button .add-to-cart-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: var(--sab-icon-md);
    height: var(--sab-icon-md);
    margin-top: calc(var(--sab-icon-md) / -2);
    background-color: currentColor;
    -webkit-mask: var(--sab-i-bag) center / contain no-repeat;
    mask: var(--sab-i-bag) center / contain no-repeat;
}
@media (min-width: 768px) {
    .product-add-button .add-to-cart-button { padding-left: calc(16px + var(--sab-icon-md) + 10px) !important; padding-right: 22px !important; }
}
/* hero / banner slider arrows: Swiper's own icon font (a 16px bold glyph) -> the chevrons of the line set */
.master-wrapper-content > .swiper > .swiper-button-prev::after,
.master-wrapper-content > .swiper > .swiper-button-next::after {
    content: "" !important;
    width: var(--sab-icon-md);
    height: var(--sab-icon-md);
    font-size: 0 !important;
    background-color: currentColor;
    -webkit-mask: var(--sab-i) center / contain no-repeat;
    mask: var(--sab-i) center / contain no-repeat;
}
.master-wrapper-content > .swiper > .swiper-button-prev::after { --sab-i: var(--sab-i-chevron-left); }
.master-wrapper-content > .swiper > .swiper-button-next::after { --sab-i: var(--sab-i-chevron-right); }

/* (17b) form fields: 16px everywhere (was 14 in forms / 15 newsletter on desktop) */
.master-wrapper-page .form-control,
.master-wrapper-page input[type="text"],
.master-wrapper-page input[type="email"],
.master-wrapper-page input[type="password"],
.master-wrapper-page input[type="tel"],
.master-wrapper-page input[type="number"],
.master-wrapper-page input[type="search"],
.master-wrapper-page select,
.master-wrapper-page textarea,
.header .search-box input.search-nav,
.footer .newsletter-subscribe-text,
.npc-lp-root .npc-lp-input {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-input) !important;
}
/* size-matrix pack quantity cells (PDP): the matrix plugin's in-body <style> pins 12-13px !important at (0,3,0);
   and the matrix css pins `#matrix-table > tbody > tr:nth-child(n) > td.pack-cell > input` 1.3rem !important (1,2,4);
   mobile-foundation-v2's (0,3,1) fix measured 13px on the served page -> out-rank all of them */
html body .matrix-container[data-is-pack-sale] .pack-input,
html body .matrix-container[data-is-pack-sale] .pack-input-individual,
html body .matrix-container .pack-input.pack-input,
html body .matrix-container .pack-input-individual.pack-input-individual,
html body #pack-count-input,
html body #matrix-table tbody tr:nth-child(n) td.pack-cell > input { font-size: var(--sab-fs-input) !important; }
.master-wrapper-page .form-control::placeholder,
.master-wrapper-page input::placeholder,
.master-wrapper-page textarea::placeholder { font-size: var(--sab-fs-input); }

/* (17c) field labels: one style (was login 13/400, contact 13/400 capitalised, register 14/600, account 14/700) */
.master-column-wrapper .page form label:not(.sr-only),
.master-column-wrapper .page form .control-label,
.product-selectors label,
.login-page .returning-wrapper label,
.login-page .returning-wrapper .forgot-password a {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-label) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sab-ink);
}
/* checkbox captions and links next to fields read as text, not as field names */
.master-column-wrapper .page form .remember-text,
.master-column-wrapper .page form input[type="checkbox"] + label,
.master-column-wrapper .page form label.news-letter,
.master-column-wrapper .page form .newsletter-label,
.login-page .returning-wrapper .forgot-password a { font-size: var(--sab-fs-label) !important; font-weight: 400 !important; }
.b2b-registration-wizard label,
.registration-page .checkbox label { font-size: var(--sab-fs-label) !important; }
/* table header captions (size matrix "COLOR" select-all) are not field labels: keep the header style */
html body #matrix-table thead label,
html body .matrix-table thead label {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* (17d) buttons: one style for primary and secondary (was Montserrat 12/500 .14em, Lato 15/700, Lato 18/700 contact,
   Lato 13/700 order search, Montserrat 12/600 2.4px Subscribe) */
.btn.btn-primary,
.btn.btn-default,
.button-1,
.button-2,
.login-page .returning-wrapper .login-button,
.login-page .new-wrapper .register-button,
.contact-page .contact-form__submit .contact-us-button,
.footer .newsletter-subscribe-button,
.flyout-cart-wrapper .flyout-cart-footer-buttons .btn,
.oh-btn,
.m-pdp-cta .m-pdp-add,
.npc-lp-root .npc-lp-submit,
.footer #newsletter-subscribe-block #newsletter-subscribe-button {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-button) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* (17e) headings and header links in the UI family */
@media (min-width: 768px) {
    /* SIGN IN / REGISTER / MY ACCOUNT beside the Lato 14 menu: same family and tracking, one step smaller */
    .header .header-lower .header-top-right ul li a,
    .header .header-lower .header-top-right ul li a span {
        font-family: var(--font-default) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: 1px !important;
    }
}
/* newsletter heading = the other footer headings (was Montserrat 18 / 14 2px, wigstheme pins Montserrat !important) */
.footer .footer-upper .newsletter-email strong {
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}
/* account side-nav title = info-page side-nav title (section (7): Lato 14/700) */
.html-account-page .block-account-navigation .title strong {
    font-family: var(--font-default) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
/* form section titles (Your Personal Details, Company Details, Account Information ...) */
.master-column-wrapper .page form h3,
.master-column-wrapper .page form legend,
.b2b-registration-wizard .fieldset-header h3 {
    font-family: var(--font-default) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* (17f) product grid caption = design §8.4 5.2 (ink name, rose price). The shared theme pins the price #2c3e50 16px
   !important (simplex.styles.css `.caption .details .prices-inline .price.actual-price`) and product-box-caption-minimal
   pins the name #333 / #999 - neither colour is in the Sabora palette. Name and price share one size per viewport
   (phones had a 16px price next to a 15px name). Fabric line #999 on white was 2.8:1 -> #5c5456 (7:1). */
html body .product-grid .item-box .product-item .caption .details .product-title-inline a,
html body .product-grid .item-box .product-title a {
    color: var(--sab-ink) !important;
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
html body .product-grid .item-box .caption .details .prices-inline .price.actual-price,
html body .product-grid .item-box .prices .actual-price {
    color: var(--sab-rose) !important;
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
html body .product-grid .item-box .caption .details .prices-inline .old-price,
html body .product-grid .item-box .prices .old-price { color: #5c5456 !important; font-size: 13px !important; }
html body .product-grid .item-box .product-item .caption .details .description { color: #5c5456 !important; }
@media (max-width: 767.98px) {
    html body .product-grid .item-box .product-item .caption .details .product-title-inline a,
    html body .product-grid .item-box .product-title a,
    html body .product-grid .item-box .caption .details .prices-inline .price.actual-price,
    html body .product-grid .item-box .prices .actual-price { font-size: 15px !important; }
    html body .product-grid .item-box .product-item .caption .details .description { font-size: 12px !important; }   /* was 11 */
}

/* (17g) the rest of the icon system
   - desktop dropdown items: section (2) removed the chevron (`content: none`), section (12)'s hook list brought it back
     with `content: "" !important` - keep it off (only matters if sub-categories return; the menu is 1-depth now)
   - floating back-to-top = the accessibility button's 46px box on one centre line (was 35 + 2x10 padding = 55px)
   - search clear: the typed "x" (20px glyph) -> the line-set close icon at the inline size
   - drawer icons / chevrons: one opacity (were .9 / .8 / .85) */
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before { content: none !important; }
#backTop {
    box-sizing: border-box !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    #backTop { right: 20px !important; }
}
.search-box .search-clear { font-size: 0 !important; color: #5c5456; }
.search-box .search-clear::before {
    content: "";
    width: var(--sab-icon-sm);
    height: var(--sab-icon-sm);
    background-color: currentColor;
    -webkit-mask: var(--sab-i-close) center / contain no-repeat;
    mask: var(--sab-i-close) center / contain no-repeat;
}
@media (max-width: 767.98px) {
    #mobile-menu .mobile-menu-account li a[class^="ico-"]::before,
    .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down { opacity: 1 !important; }
}

/* (18) /login (2026-10-02, user: "login page UI/UX/layout"). Before: the new-customer box was mostly empty while the
   wholesale rules sat detached under the page, headings carried a long trailing rule that wrapped on phones, labels
   ended in colons, the password eye was a bitmap and the focused field had a heavy double rose ring.
   Now: one 960px column of two equal cards - sign in (white, primary) and new customer (blush) holding the wholesale
   note (moved into the card in Login.cshtml) and the Register action; short accent bar under each heading; 48px fields
   with an ink focus ring; remember / forgot on one row; line-set eye button (keyboard reachable). Phones: stacked. */
.login-page .customer-blocks { max-width: 960px; margin: 0 auto; }
.login-page .customer-blocks > .row:first-child { margin: 0; gap: 24px; align-items: stretch; }
.login-page .customer-blocks > .row:first-child > div { float: none; flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.login-page .returning-wrapper,
.login-page .new-wrapper {
    height: 100%;
    margin: 0 !important;
    padding: 40px !important;
    border-radius: 0;
}
.login-page .returning-wrapper { background: #fff !important; border: 1px solid #e3d8d6 !important; }
.login-page .new-wrapper { background: var(--sab-blush) !important; border: 1px solid var(--sab-blush) !important; }
.login-page .returning-wrapper fieldset legend,
.login-page .new-wrapper.register-block fieldset legend {
    display: block !important;
    width: 100%;
    margin: 0 0 28px !important;
    font-family: var(--font-default) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    color: var(--sab-ink);
}
.login-page .returning-wrapper fieldset legend::after,
.login-page .new-wrapper.register-block fieldset legend::after {
    display: block;
    width: 32px;
    max-width: none;
    margin: 12px 0 0;
    border-top: 2px solid var(--sab-rose);
}
.login-page .returning-wrapper .form-group { margin: 0 0 18px; }
.login-page .returning-wrapper .form-group .control-label { display: block; float: none; width: auto; margin: 0 0 6px; padding: 0; text-align: left; }
.login-page .returning-wrapper .form-group > div[class*="col-"] { float: none; width: auto; padding: 0; }
.login-page .returning-wrapper .form-control {
    height: 48px !important;
    padding: 0 14px;
    border: 1px solid #cfc3c1 !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-page .returning-wrapper .form-control:focus {
    border-color: var(--sab-ink) !important;
    box-shadow: 0 0 0 1px var(--sab-ink) !important;
    outline: none;
}
.login-page .returning-wrapper .login-password { position: relative; }
.login-page .returning-wrapper .login-password .form-control { padding-right: 52px; }
.login-page .password-eye {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none !important;
    opacity: 1;
    color: #5c5456;
    cursor: pointer;
}
.login-page .password-eye::before {
    content: "";
    position: absolute;
    inset: 12px;
    background-color: currentColor;
    -webkit-mask: var(--sab-i-eye-off) center / contain no-repeat;
    mask: var(--sab-i-eye-off) center / contain no-repeat;
}
.login-page .password-eye.password-eye-open::before {
    -webkit-mask-image: var(--sab-i-eye);
    mask-image: var(--sab-i-eye);
}
.login-page .password-eye:hover,
.login-page .password-eye:focus-visible { color: var(--sab-ink); }
.login-page .password-eye:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: -4px; }
.login-page .returning-wrapper .remember-me .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-height: 44px;
}
.login-page .returning-wrapper .remember-me input[type="checkbox"] {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sab-ink);
}
.login-page .returning-wrapper .remember-me .remember-text { margin: 0; padding: 0; cursor: pointer; }
.login-page .returning-wrapper .forgot-password { margin-left: auto; float: none; }
.login-page .returning-wrapper .forgot-password a { text-decoration: underline; text-underline-offset: 3px; }
.login-page .returning-wrapper .login-button { margin-top: 6px; }
/* new customer card: short copy, the wholesale note as a callout, Register at the bottom */
.login-page .new-wrapper.register-block fieldset,
.login-page .new-wrapper.register-block .text { display: flex; flex-direction: column; height: 100%; }
.login-page .new-wrapper .login-newcustomer-text { margin: 0 0 20px; font: 400 15px/1.6 var(--font-default); color: #5c5456; }
.login-page .login-wholesale-note { margin: 0 0 28px; }
.login-page .login-wholesale-note .topic-block { margin: 0; }
.login-page .login-wholesale-note .topic-block-body,
.login-page .login-wholesale-note .topic-html-content {
    margin: 0 !important;
    padding: 16px 18px;
    background: #fff;
    border-left: 3px solid var(--sab-rose);
    font: 400 14px/1.6 var(--font-default);
    text-align: left !important;
    color: var(--sab-ink);
}
.login-page .login-wholesale-note p { margin: 0; }
.login-page .login-wholesale-note * { text-align: left !important; }   /* the topic body is centred inline */
.login-page .new-wrapper .form-group { margin: auto 0 0; }
.login-page .new-wrapper .form-group > .control-label:empty { display: none; }
.login-page .new-wrapper .form-group .controls { margin: 0; }
@media (max-width: 767.98px) {
    .login-page .customer-blocks > .row:first-child { flex-direction: column; gap: 16px; }
    /* a 0 basis in a column collapses the cards (they overlapped the footer) - size them by their content */
    .login-page .customer-blocks > .row:first-child > div { flex: 0 0 auto; width: 100%; }
    .login-page .returning-wrapper,
    .login-page .new-wrapper { height: auto; padding: 28px 20px !important; }
    .login-page .returning-wrapper fieldset legend,
    .login-page .new-wrapper.register-block fieldset legend { margin-bottom: 22px !important; font-size: 20px !important; }
    .login-page .new-wrapper .form-group { margin-top: 0; }
}

/* (19) /register = the /login card style (2026-10-02, user: "register page in the same style"). Before: ~800px of
   blank space under every step (b2b-registration.css min-height 1500 / 1100px), labels in a left column with short
   28px fields and trailing colons, two rules around each step header, faint #ccc inactive steps, a green "completed"
   step, and the newsletter checkbox floating alone in a grey box under the wizard.
   Now: one 720px white card under the step bar; Lato 22/700 step heading + rose accent bar; labels on top (14/600,
   required mark beside the label), 48px fields with the ink focus ring; Back (outline) / Continue (primary) on one
   row (stacked on phones); newsletter inside step 3 before Register (Register.cshtml, SAB001 only); "Already have an
   account? Sign in" under the card. */
.registration-page .b2b-registration-wizard { max-width: 720px; margin: 0 auto; }
.registration-page .page-title .subtitle { display: none !important; }   /* "Create your business account in three easy steps" (user, 2026-10-02) */
/* step bar */
.registration-page .b2b-registration-wizard .nav-tabs { margin: 0 0 24px; border-bottom: 1px solid #e3d8d6; background: none; }
.registration-page .b2b-registration-wizard .nav-tabs > li > a {
    font: 700 13px/1 var(--font-default) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #776e70 !important;            /* was #ccc (1.6:1) -> 4.9:1 */
}
.registration-page .b2b-registration-wizard .nav-tabs > li.disabled > a { color: #776e70 !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li.active > a { color: var(--sab-rose) !important; border-bottom-color: var(--sab-rose); }
.registration-page .b2b-registration-wizard .tab-title { font: inherit !important; letter-spacing: inherit; color: inherit !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number {
    width: 28px;
    height: 28px;
    background: #e9e2e1;
    color: var(--sab-ink);
    font: 700 13px/1 var(--font-default);
    box-shadow: none;
    transform: none;
}
.registration-page .b2b-registration-wizard .nav-tabs > li.active .tab-number,
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.current { background: var(--sab-rose); color: #fff; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed { background: var(--sab-ink); color: #fff; }   /* was green #28a745 */
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number { position: relative; z-index: 1; }   /* phones: the connector line ran through the number */
/* the card: no fixed heights (they left ~800px of blank page under each step) */
.registration-page .b2b-registration-wizard .tab-content {
    min-height: 0 !important;
    padding: 40px;
    background: #fff;
    border: 1px solid #e3d8d6;
}
.registration-page .b2b-registration-wizard .tab-content > .tab-pane { min-height: 0 !important; padding: 0 !important; }
/* the steps were absolutely positioned panes (slide animation) - that is what needed the fixed heights and why a pane
   ignored the card padding. Normal flow at every width, only the active step shown (= the phone rule in
   b2b-registration.css) */
.registration-page .b2b-registration-wizard .tab-pane {
    position: static !important;
    transform: none !important;
    transition: none !important;
}
.registration-page .b2b-registration-wizard .tab-pane:not(.active) { display: none !important; }
.registration-page .b2b-registration-wizard .tab-pane.active { display: block !important; opacity: 1 !important; visibility: visible !important; }
.registration-page .b2b-registration-wizard #company-tab { padding-bottom: 0 !important; }
/* step 3: the address partial and the newsletter were grey boxes inside the card - flatten them */
.registration-page .b2b-registration-wizard .address-section,
.registration-page .b2b-registration-wizard .newsletter-section {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.registration-page .b2b-registration-wizard .address-section h4,
.registration-page .b2b-registration-wizard .address-section .title {
    margin: 8px 0 18px;
    font: 700 16px/1.3 var(--font-default) !important;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sab-ink);
}
.registration-page .b2b-registration-wizard .checkbox { margin: 0; padding: 0; }
.registration-page .b2b-registration-wizard .checkbox label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; font: 400 14px/1.4 var(--font-default) !important; }
.registration-page .b2b-registration-wizard input[type="checkbox"] { position: static; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--sab-ink); }
/* empty validation slots (the seller-permit one kept ~60px of blank space) take no room until there is a message */
.registration-page .b2b-registration-wizard .field-validation-valid { display: none !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"]:not(:has(> :not(.field-validation-valid))) { display: none; }
.registration-page .b2b-registration-wizard #seller-permit-file { margin: 0 !important; padding: 8px 10px !important; }
.registration-page .b2b-registration-wizard input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 0 16px;
    height: 32px;
    border: 1px solid var(--sab-ink);
    border-radius: 0;
    background: #fff;
    color: var(--sab-ink);
    font: 700 12px/1 var(--font-default);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
/* finished step: the check replaces the number (they overlapped) */
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed { color: transparent !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed::after {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 0 !important;
    background-color: #fff;
    -webkit-mask: var(--sab-i-check) center / contain no-repeat;
    mask: var(--sab-i-check) center / contain no-repeat;
}
.registration-page .b2b-registration-wizard .fieldset { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.registration-page .b2b-registration-wizard .fieldset-header { margin: 0 0 28px; padding: 0; border: 0 !important; }
.registration-page .b2b-registration-wizard .fieldset-header::before,
.registration-page .b2b-registration-wizard .fieldset-header::after { content: none !important; }
.registration-page .b2b-registration-wizard .fieldset-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--font-default) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sab-ink) !important;
}
.registration-page .b2b-registration-wizard .fieldset-header h3::after {
    content: "";
    display: block;
    width: 32px;
    margin: 12px 0 0;
    border-top: 2px solid var(--sab-rose);
}
.registration-page .b2b-registration-wizard .fieldset-header .help-text {
    margin: 16px 0 0;
    padding: 0;
    border: 0 !important;
    font: 400 15px/1.6 var(--font-default);
    color: #5c5456;
}
/* fields: label on top, required mark beside it, field full width, validation under it */
.registration-page .b2b-registration-wizard .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    margin: 0 0 18px;
}
.registration-page .b2b-registration-wizard .form-group::before,
.registration-page .b2b-registration-wizard .form-group::after { content: none; }
.registration-page .b2b-registration-wizard .form-group > .control-label {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}
.registration-page .b2b-registration-wizard .form-group > .form-title-required.visible-xs { order: 1; display: inline-block !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] .form-title-required { display: none !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"]:empty { display: none; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] + div[class*="col-"] { order: 3; }
.registration-page .b2b-registration-wizard .form-group.email-availability { margin: -12px 0 12px; }
.registration-page .b2b-registration-wizard .form-control {
    height: 48px !important;
    padding: 0 14px;
    border: 1px solid #cfc3c1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.registration-page .b2b-registration-wizard textarea.form-control { height: auto !important; min-height: 96px; padding: 12px 14px; }
.registration-page .b2b-registration-wizard input[type="file"].form-control { height: auto !important; padding: 10px 14px; }
.registration-page .b2b-registration-wizard .form-control:focus {
    border-color: var(--sab-ink) !important;
    box-shadow: 0 0 0 1px var(--sab-ink) !important;
    outline: none;
}
.registration-page .b2b-registration-wizard .help-block { margin: 6px 0 0; font: 400 13px/1.5 var(--font-default); color: #5c5456; }
/* messages under their field (b2b-registration.css floated them absolutely to the right with a pink band that ran
   past the card and over the next label) */
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] { position: static !important; left: auto !important; }
.registration-page .b2b-registration-wizard .field-validation-error,
.registration-page .b2b-registration-wizard .field-validation-error span {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    font: 400 13px/1.4 var(--font-default) !important;
    color: #b42318 !important;
}
.registration-page .b2b-registration-wizard .input-validation-error { border-color: #b42318 !important; }
/* newsletter (moved into step 3) */
.registration-page .b2b-registration-wizard .newsletter-section { margin: 8px 0 4px; }
.registration-page .register-newsletter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font: 400 14px/1.4 var(--font-default) !important;
    color: var(--sab-ink);
    cursor: pointer;
}
.registration-page .register-newsletter input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sab-ink); }
/* step buttons */
.registration-page .b2b-registration-wizard .wizard-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 12px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #efe1de;
}
.registration-page .b2b-registration-wizard .wizard-buttons .btn { min-width: 200px; min-height: 48px; margin: 0; }
.registration-page .b2b-registration-wizard .wizard-buttons .prev-tab { margin-right: auto; }
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default {
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
}
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default:hover,
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default:focus { background: var(--sab-ink) !important; color: #fff !important; }
.registration-page .register-signin-link { margin: 24px 0 0; text-align: center; font: 400 15px/1.6 var(--font-default); color: #5c5456; }
.registration-page .register-signin-link a { color: var(--sab-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.registration-page .captcha-section,
.registration-page .accept-privacy-policy { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 767.98px) {
    .registration-page .b2b-registration-wizard .tab-content { padding: 28px 20px; }
    .registration-page .b2b-registration-wizard .fieldset-header h3 { font-size: 20px !important; }
    .registration-page .b2b-registration-wizard .wizard-buttons { flex-direction: column-reverse; }
    .registration-page .b2b-registration-wizard .wizard-buttons .btn { width: 100%; min-width: 0; }
    .registration-page .b2b-registration-wizard .wizard-buttons .prev-tab { margin-right: 0; }
}

/* (20) shop tokens for the core components (product-card-nav-v1.css, plugin matrix.skin-v2.css) - 2026-10-02.
   The components hold structure + behaviour; Sabora only sets values here (global :root, never inside a media query).
   The card arrows left section (12)'s icon hook list: product-card-nav-v1.css now draws them from these tokens. */
:root {
    /* product-card picture slider */
    --card-nav-fg: var(--sab-ink);
    --card-nav-icon-size: var(--sab-icon-md);
    --card-nav-icon-prev: var(--sab-i-chevron-left);
    --card-nav-icon-next: var(--sab-i-chevron-right);
    --card-dot-color: rgba(35, 31, 32, .25);
    --card-dot-active: var(--sab-rose);
    /* size/colour matrix (PDP) */
    --mx-font: var(--font-default);
    --mx-fg: var(--sab-ink);
    --mx-muted: #5c5456;
    --mx-head-fg: #5c5456;
    --mx-border: #e3d8d6;
    --mx-row-stripe: #fbf5f4;
    --mx-row-selected: #fdf8f7;          /* paler than the blush chips and TOTAL row, so both still read */
    --mx-accent: var(--sab-rose);
    --mx-check-accent: var(--sab-rose);
    --mx-chip-bg: var(--sab-blush);
    --mx-chip-fg: var(--sab-ink);
    --mx-total-bg: var(--sab-blush);
    --mx-total-fg: var(--sab-ink);
    --mx-radius: 2px;
}

/* (21) footer logo + company info sizes (2026-10-02, user: "improve the footer logo and company info text size").
   Before: the logo drew ~12px-tall letterspaced glyphs (178px wide @1440 = the live site's 12.4vw) and the address
   lines were 14px grey - both read smaller than the 13-14px caps column links next to them. Now the logo is the
   largest thing in the footer and the info lines are body size, still in the muted-on-ink tone (10.7:1). */
@media (min-width: 768px) {
    .footer .footer-middle .footer-logo { margin: 0 0 18px; }
    .footer .footer-middle .footer-logo img { width: clamp(200px, 16vw, 260px); }
    .footer .footer-middle .footer-contact .topic-html-content,
    .footer .footer-middle .footer-contact .topic-html-content-body,
    .footer .footer-middle .footer-contact address,
    .footer .footer-middle .footer-contact p { font-size: 16px; line-height: 1.75; }
}
@media (max-width: 767.98px) {
    .footer .footer-middle .footer-logo { margin: 0 0 14px; }
    .footer .footer-middle .footer-logo img { max-height: 24px; }
    .footer .footer-middle .footer-contact .topic-html-content,
    .footer .footer-middle .footer-contact .topic-html-content-body,
    .footer .footer-middle .footer-contact address,
    .footer .footer-middle .footer-contact p { font-size: 16px; line-height: 1.7; }
}

/* (22) header-cart-col = icon buttons (2026-10-02, user: "SVG icons with a hover tooltip; header icons consistent in size
   and border"). Desktop only - the phone header was already [menu][search] logo [account][bag]. Every link (Messages,
   My account, Log out, Sign in, Register, cart) is one 40px round button holding the 22px line icon (--sab-icon-lg,
   same as search and the phone header); #sab-masthead (the SAB-only wrapper in _Root.cshtml) out-weighs the
   desktop text-link rules above (li.register a, (17e) type). The words stay in the DOM as the accessible name and come back as a tooltip
   (sab-header-icons-v1.js adds .sab-tip / the cart's .sab-count). Register loses its rose fill: one look for all. */
:root {
    /* header chrome set (stroke 1.5, like --sab-ico-search/-bag/-user): the four header links that had none */
    --sab-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
    --sab-ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5v16h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
    --sab-ico-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l4 4-4 4M14 12H4'/%3E%3C/svg%3E");
    --sab-ico-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c.8-4 3.6-6 7-6s6.2 2 7 6M19 6.5v6M16 9.5h6'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
    .header .header-lower .header-cart-col,
    .header .header-lower .header-top-right ul { gap: 4px 6px !important; }
    #sab-masthead .header .header-lower .header-top-right ul li a,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 50% !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    #sab-masthead .header .header-lower .header-top-right ul li a:hover,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover {
        background: var(--sab-blush) !important;
        border-color: var(--sab-blush) !important;
        color: var(--sab-rose) !important;
    }
    #sab-masthead .header .header-lower .header-top-right ul li a:focus-visible,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:focus-visible,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
    /* one glyph per link, the line set (the earlier desktop rule hid these to show words) */
    #sab-masthead .header .header-lower .header-top-right ul li a::before,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        flex: 0 0 auto;
        width: var(--sab-icon-lg) !important;
        height: var(--sab-icon-lg) !important;
        margin: 0 !important;
        font-size: 0 !important;
        background-color: currentColor !important;
        -webkit-mask: var(--sab-i) center / contain no-repeat !important;
        mask: var(--sab-i) center / contain no-repeat !important;
    }
    /* the chrome set throughout (stroke 1.5, as search and the phone header); the base theme dims some glyphs to .7 */
    #sab-masthead .header .header-lower .header-top-right ul li a::before { opacity: 1 !important; }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-inbox::before { --sab-i: var(--sab-ico-mail); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-account::before { --sab-i: var(--sab-ico-user); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-logout::before { --sab-i: var(--sab-ico-logout); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-login::before { --sab-i: var(--sab-ico-login); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-register::before { --sab-i: var(--sab-ico-user-plus); }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before { --sab-i: var(--sab-ico-bag); opacity: 1 !important; }
    /* words: read by screen readers, not drawn */
    #sab-masthead .header .header-lower .header-top-right ul li a > span:not(.sab-tip):not(.sab-count):not(.inbox-badge),
    #sab-masthead .header .header-lower .header-cart-col a.ico-cart .cart-label,
    #sab-masthead .header .header-lower .header-cart-col a.ico-cart .cart-qty {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    /* counts: unread messages (plugin markup) and cart products (script) share one badge */
    #sab-masthead .header .header-lower .header-top-right ul li a .inbox-badge,
    #sab-masthead .header .header-lower .header-cart-col a .sab-count {
        position: absolute;
        top: 2px;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--sab-rose) !important;
        color: #fff !important;
        font: 700 10px/1 var(--font-default) !important;
        letter-spacing: 0 !important;
        pointer-events: none;
    }
    #sab-masthead .header .header-lower .header-cart-col a .sab-count[hidden] { display: none; }
    /* tooltip */
    #sab-masthead .header .header-lower .header-cart-col a .sab-tip {
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        z-index: 1001;
        padding: 6px 9px;
        border-radius: 2px;
        background: var(--sab-ink);
        color: #fff !important;
        font: 500 11px/1 var(--font-default) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase;
        white-space: nowrap;
        transform: translate(-50%, -2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    }
    #sab-masthead .header .header-lower .header-cart-col a:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a:focus-visible > .sab-tip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }
    /* the guest fallback still yields to the real flyout link (the 40px rule above would otherwise show both carts),
       and the flyout wrapper is centred on the row like the list (its link sat 3px low) */
    #sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link { display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; height: 40px; }
    /* cart: its flyout opens BELOW on hover, so the caption sits to the left of the button (also keeps it in the window) */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback > .sab-tip { top: 50%; left: auto; right: calc(100% + 6px); transform: translate(2px, -50%); }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:focus-visible > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:focus-visible > .sab-tip { transform: translate(0, -50%); }
}

/* (22b) the rest of the icon outliers from size_audit.py (2026-10-02): the phone menu glyph box was 22x24.5 (line
   height), the breadcrumb home 14.9 / 16.1px (font-scaled), the PDP picture arrows 28px, and ShareThis drew brand-colour
   tiles with 16px <img> logos. Now: menu 22 square like its neighbours, home = --sab-icon-sm, picture arrows =
   --sab-icon-md (as the hero/card arrows), share buttons = the header's round outline buttons with ink glyphs. */
.header .header-lower .m-menu-toggle .fa-bars { display: inline-flex; width: var(--sab-icon-lg); height: var(--sab-icon-lg); line-height: 1; }
.breadcrumb .fa.fa-home {
    display: inline-flex;
    width: var(--sab-icon-sm);
    height: var(--sab-icon-sm);
    font-size: 0 !important;
    line-height: 1;
    vertical-align: -.2em;
}
.breadcrumb .fa.fa-home::before { width: 100% !important; height: 100% !important; }
html body .product-details-page .picture-wrapper .picture-nav svg { width: var(--sab-icon-md) !important; height: var(--sab-icon-md) !important; min-width: 0 !important; }
.sharethis-inline-share-buttons .st-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid #e3d8d6 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}
.sharethis-inline-share-buttons .st-btn:hover { background: var(--sab-blush) !important; border-color: var(--sab-blush) !important; top: 0 !important; }
.sharethis-inline-share-buttons .st-btn > img {
    width: var(--sab-icon-sm) !important;
    height: var(--sab-icon-sm) !important;
    top: auto !important;
    filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(1180%) hue-rotate(296deg) brightness(95%) contrast(93%); /* -> ink #231f20 */
}
.sharethis-inline-share-buttons .st-btn > .st-label { display: none !important; }

/* (22c) readability (2026-10-02, user: "improve icon size and border for readability"). The chrome icons were 22px line
   glyphs at stroke 1.5 with no frame - light on the white header. Now 24px (--sab-icon-lg, also the tab bar) at stroke
   1.75 (all --sab-ico-* tokens), and every header button - desktop links + cart, phone menu / search / account / bag -
   is the same circle (40px desktop, 44px phones = touch target) with a hairline ring that darkens on hover. The phone bag drew 16x22 (its link was 79px wide
   with the hidden count) and the PDP picture arrows 16x20 inside 28px buttons: both fixed here. */
:root { --sab-icon-ring: #e3d8d6; }
#sab-masthead .header .header-lower .header-top-right ul li a,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback,
#sab-masthead .header .header-lower .m-menu-toggle,
#sab-masthead .header .header-lower .m-search-toggle,
#sab-masthead .header .header-lower .m-account-link {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--sab-icon-ring) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--sab-ink) !important;
}
#sab-masthead .header .header-lower .header-top-right ul li a:hover,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover,
#sab-masthead .header .header-lower .m-menu-toggle:hover,
#sab-masthead .header .header-lower .m-search-toggle:hover,
#sab-masthead .header .header-lower .m-account-link:hover {
    border-color: var(--sab-ink) !important;
    background: var(--sab-blush) !important;
    color: var(--sab-ink) !important;
}
#sab-masthead .header .header-lower .header-top-right ul li a::before,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before,
#sab-masthead .header .header-lower .m-menu-toggle .fa::before,
#sab-masthead .header .header-lower .m-search-toggle .fa::before,
#sab-masthead .header .header-lower .m-account-link .fa::before {
    flex: 0 0 auto !important;
    width: var(--sab-icon-lg) !important;
    height: var(--sab-icon-lg) !important;
    min-width: var(--sab-icon-lg) !important;
    top: auto !important;
    transform: none !important;   /* the base theme shrinks + lifts the account / log-out glyph (scale .85, -12px) */
}
#sab-masthead .header .header-lower .m-menu-toggle .fa,
#sab-masthead .header .header-lower .m-search-toggle .fa,
#sab-masthead .header .header-lower .m-account-link .fa { display: inline-flex !important; width: var(--sab-icon-lg) !important; height: var(--sab-icon-lg) !important; line-height: 1 !important; }
/* the circle rule above must not resurrect the guest cart fallback next to the real flyout link (any width) */
#sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }
@media (max-width: 767.98px) {
    /* phones keep the 44px touch target (header_icons_check): the circle is the button itself */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
    #sab-masthead .header .header-lower .m-menu-toggle,
    #sab-masthead .header .header-lower .m-search-toggle,
    #sab-masthead .header .header-lower .m-account-link { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
    /* the phone bag: count and label are visually hidden already; the link is the 40px circle, nothing wider */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart { font-size: 0 !important; gap: 0 !important; position: relative; }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart > span:not(.sab-count) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
    html body .product-details-page .picture-wrapper .picture-nav { width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* (22d) desktop search button = the header-cart-col circle (user: "consistent header-search-col's icon with
   header-cart-col"): 40px, hairline ring, 24px chrome glyph, same hover. It sits at the right end of the underlined field;
   the underline stops short of it so the ring is not cut by the line. */
@media (min-width: 768px) {
    #sab-masthead .header .header-lower .header-search-col .search-box .form-group { border-bottom: 0 !important; box-shadow: none !important; position: relative; }
    #sab-masthead .header .header-lower .header-search-col .search-box .search-nav {
        height: 40px !important;
        margin-right: 48px;
        width: calc(100% - 48px) !important;
        padding-right: 30px !important;
        border-bottom: 1px solid var(--sab-ink) !important;
    }
    #sab-masthead .header .header-lower .header-search-col .search-box .form-group:focus-within .search-nav { border-bottom-color: var(--sab-rose) !important; box-shadow: 0 1px 0 0 var(--sab-rose); }
    #sab-masthead .header .header-lower .header-search-col .search-box .search-clear { right: 52px !important; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        transition: background-color .15s ease, border-color .15s ease;
    }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button:hover { border-color: var(--sab-ink) !important; background: var(--sab-blush) !important; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button::before {
        position: static !important;
        width: var(--sab-icon-lg) !important;
        height: var(--sab-icon-lg) !important;
        margin: 0 !important;
        transform: none !important;
        color: var(--sab-ink) !important;
        text-shadow: none !important;
    }
}

/* (23) sidebars + type outliers (2026-10-02, user: "improve the sidebar icons; icon/font/button consistency on every
   active page"). The account menu had a black title bar (14px) and FontAwesome filled circle-arrows (a rose chevron
   on the active row); the info-page help menu was right-aligned caps with plain 14px headings - two looks for one role.
   Now one sidebar: 13px caps heading on a hairline, 44px rows in 14px Lato, an 18px line icon per destination (account
   and help menus alike), active row = rose text + 2px rose rail on the paler blush. */
:root {
    --sab-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --sab-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
    --sab-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.3l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z'/%3E%3C/svg%3E");
    --sab-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
    --sab-side-icon: 18px;
}
/* desktop only: phones keep their own chip rows for both menus (account: section (7); help: e7_help_nav) */
@media (min-width: 768px) {
    html body .has-help-nav .help-nav h2,
    html body .has-help-nav .help-nav h3,
    html body .has-help-nav .help-nav h4 {
        display: block;
        margin: 0 0 4px !important;
        padding: 0 0 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--sab-icon-ring) !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 700 13px/1.2 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }
    html body .has-help-nav .help-nav ul { margin: 0 0 24px !important; padding: 0 !important; list-style: none; }
    html body .has-help-nav .help-nav ul li > a {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-left: 2px solid transparent !important;
        border-bottom: 1px solid #f3ecea !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1.3 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-align: left !important;
        text-decoration: none !important;
        transition: background-color .15s ease, color .15s ease;
    }
    html body .has-help-nav .help-nav ul li > a:hover { background: var(--sab-blush) !important; }
    html body .has-help-nav .help-nav ul li > a[aria-current="page"] {
        border-left-color: var(--sab-rose) !important;
        background: #fdf8f7 !important;
        color: var(--sab-rose) !important;
        font-weight: 700 !important;
    }
    html body .has-help-nav .help-nav ul li > a::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        flex: 0 0 auto;
        width: var(--sab-side-icon) !important;
        height: var(--sab-side-icon) !important;
        margin: 0 !important;
        font-size: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        background-color: currentColor !important;
        -webkit-mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
        mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
    }
    html body .has-help-nav .help-nav ul li > a[href$="/about-us"]::before { --sab-i: var(--sab-i-info); }
    html body .has-help-nav .help-nav ul li > a[href$="/contactus"]::before { --sab-i: var(--sab-i-phone); }
    html body .has-help-nav .help-nav ul li > a[href$="/shipping-returns"]::before { --sab-i: var(--sab-i-truck); }
    html body .has-help-nav .help-nav ul li > a[href$="/conditions-of-use"]::before { --sab-i: var(--sab-i-file); }
    html body .has-help-nav .help-nav ul li > a[href$="/privacy-notice"]::before { --sab-i: var(--sab-i-lock); }
        html body .block.block-account-navigation, html body .block.block-account-navigation.well, html body .block.block-account-navigation.box-shadow-wrapper { margin: 0 0 28px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
        html body .block.block-account-navigation .title.main-title {
            display: block;
            margin: 0 0 4px !important;
            padding: 0 0 10px !important;
            border: 0 !important;
            border-bottom: 1px solid var(--sab-icon-ring) !important;
            background: none !important;
            color: var(--sab-ink) !important;
            font: 700 13px/1.2 var(--font-default) !important;
            letter-spacing: .1em !important;
            text-transform: uppercase !important;
            text-align: left !important;
        }
        html body .block.block-account-navigation .title.main-title strong { padding: 0 !important; border: 0 !important; background: none !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
        html body .block.block-account-navigation .listbox { padding: 0 !important; border: 0 !important; background: none !important; }
        html body .block.block-account-navigation .listbox ul, html body .block.block-account-navigation .listbox ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; }
        html body .block.block-account-navigation .listbox ul li > a {
            position: relative;
            display: flex !important;
            align-items: center;
            gap: 12px !important;
            min-height: 44px;
            margin: 0 !important;
            padding: 0 12px !important;
            border: 0 !important;
            border-left: 2px solid transparent !important;
            border-bottom: 1px solid #f3ecea !important;
            background: none !important;
            color: var(--sab-ink) !important;
            font: 400 14px/1.3 var(--font-default) !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-align: left !important;
            text-decoration: none !important;
            transition: background-color .15s ease, color .15s ease;
        }
        html body .block.block-account-navigation .listbox ul li > a:hover { background: var(--sab-blush) !important; }
        html body .block.block-account-navigation .listbox ul li > a.active {
            border-left-color: var(--sab-rose) !important;
            background: #fdf8f7 !important;
            color: var(--sab-rose) !important;
            font-weight: 700 !important;
        }
        html body .block.block-account-navigation .listbox ul li > a::before {
            content: "" !important;
            display: block !important;
            position: static !important;
            flex: 0 0 auto;
            width: var(--sab-side-icon) !important;
            height: var(--sab-side-icon) !important;
            margin: 0 !important;
            font-size: 0 !important;
            transform: none !important;
            opacity: 1 !important;
            background-color: currentColor !important;
            -webkit-mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
            mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
        }
        html body .block.block-account-navigation .listbox ul li > a .fa { display: none !important; }
        html body .block.block-account-navigation .listbox > ul > li.customer-info > a::before { --sab-i: var(--sab-i-user); }
        html body .block.block-account-navigation .listbox > ul > li.customer-addresses > a::before { --sab-i: var(--sab-i-pin); }
        html body .block.block-account-navigation .listbox > ul > li.customer-orders > a::before { --sab-i: var(--sab-i-box); }
        html body .block.block-account-navigation .listbox > ul > li.downloadable-products > a::before { --sab-i: var(--sab-i-download); }
        html body .block.block-account-navigation .listbox > ul > li.back-in-stock-subscriptions > a::before { --sab-i: var(--sab-i-bell); }
        html body .block.block-account-navigation .listbox > ul > li.reward-points > a::before { --sab-i: var(--sab-i-star); }
        html body .block.block-account-navigation .listbox > ul > li.change-password > a::before { --sab-i: var(--sab-i-lock); }
        html body .block.block-account-navigation .listbox > ul > li.customer-messages-nav > a::before { --sab-i: var(--sab-i-mail); }
        html body .block.block-account-navigation .listbox > ul > li.customer-avatar > a::before { --sab-i: var(--sab-i-user); }
        html body .block.block-account-navigation .listbox > ul > li.gdpr-tools > a::before, html body .block.block-account-navigation .listbox > ul > li.check-gift-card-balance > a::before, html body .block.block-account-navigation .listbox > ul > li.recurring-payments > a::before { --sab-i: var(--sab-i-card); }
        html body .block.block-account-navigation .listbox > ul > li.return-requests > a::before { --sab-i: var(--sab-i-reply); }
}
/* phones: the help-menu chips lost their side padding to the later desktop rule (5.6 "padding: 2px 0"), so the words
   touched the pill edge ("ABOUT US"). Same words as the desktop sidebar (sentence case, 14px), ring border, 44px. */
@media (max-width: 767.98px) {
    html body .has-help-nav .help-nav ul li > a {
        padding: 0 18px !important;
        border: 1px solid var(--sab-icon-ring) !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-decoration: none !important;
    }
    html body .has-help-nav .help-nav ul li > a[aria-current="page"] {
        border-color: var(--sab-rose) !important;
        background: var(--sab-rose) !important;
        color: #fff !important;
        font-weight: 700 !important;
    }
}
/* type outliers: footer "Back to top" was the only Montserrat in the footer; breadcrumb current item capitalize/none */
html body .footer a.footer-back-to-top { font: 700 12px/1 var(--font-default) !important; letter-spacing: .12em !important; text-transform: uppercase; }
html body .breadcrumb li a,
html body .breadcrumb li a span,
html body .breadcrumb li > span,
html body .breadcrumb strong { font: 400 13px/1.3 var(--font-default) !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
html body .breadcrumb strong.current-item,
html body .breadcrumb strong.active,
html body .breadcrumb li:last-child > strong { font-weight: 700 !important; color: var(--sab-ink) !important; }

/* (24) catalog toolbar (2026-10-02, user: "improve the catalog-unified-toolbar UI/UX"). Before: the price filter sat in
   a bordered card with a heavy black jQuery UI bar and a tiny "0 - 10000"; Sort by / Display were bold 13px labels on
   34px native selects; the grid/list toggles were 18px glyphs in square boxes. Now one row between hairlines: caps
   labels (12px, muted), 40px selects with the ring border and a line chevron, a 2px rose range with 16px round
   handles, and the view toggles as the header's 40px ring buttons (selected = ink ring on blush). Desktop only -
   phones sort from the bottom tab bar. */
@media (min-width: 768px) {
    html body .catalog-unified-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 28px;
        margin: 0 0 24px !important;
        padding: 8px 0 !important;
        border-top: 1px solid var(--sab-icon-ring);
        border-bottom: 1px solid var(--sab-icon-ring);
        background: none !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h, html body .catalog-unified-toolbar #product-selectors { float: none !important; margin: 0 !important; padding: 0 !important; }
    html body .catalog-unified-toolbar .price-range-filter {
        display: flex !important;
        align-items: center;
        gap: 16px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    /* always-open row on tablets too: the title is a label (the core 768-1200 pill guard is 0,5,0 - outranked here) */
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.box-shadow-wrapper.price-range-filter .title.main-title {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
        cursor: default !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter .title.main-title::after { display: none !important; }
    /* the core tablet layout keeps the dropdown card (absolute, 220px, shadow) and a 50% block - not a row */
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter { flex: 0 0 auto !important; min-width: 0 !important; }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter .filter-content {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .price-range-filter .selected-price-range { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .price-range-filter #price-range-slider { flex: 0 0 200px; order: -1; }   /* label | slider | from-to at every width */
    html body .catalog-unified-toolbar .price-range-filter .title strong,
    html body .catalog-unified-toolbar #product-selectors label {
        margin: 0 !important;
        color: #5c5456 !important;
        font: 700 12px/1 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        white-space: nowrap;
    }
    html body .catalog-unified-toolbar .price-range-filter .filter-content { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sab-ink); font: 400 13px/1 var(--font-default); font-variant-numeric: tabular-nums; }
    html body .catalog-unified-toolbar #price-range-slider { width: 200px !important; height: 2px !important; margin: 0 8px !important; border: 0 !important; border-radius: 1px !important; background: var(--sab-icon-ring) !important; }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-range { height: 2px !important; top: 0 !important; border: 0 !important; background: var(--sab-rose) !important; }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-handle {
        top: -7px !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -8px !important;
        border: 1.5px solid var(--sab-ink) !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: none !important;
        cursor: grab;
        outline: none;
    }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-handle:focus-visible { box-shadow: 0 0 0 3px rgba(140, 59, 74, .25) !important; }
    html body .catalog-unified-toolbar #product-selectors { display: flex !important; align-items: center; gap: 24px; }
    html body .catalog-unified-toolbar #product-selectors > div { float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors .row { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors .row > div { float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control {
        height: 40px !important;
        min-width: 0;
        padding: 0 36px 0 12px !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 2px !important;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat !important;
        box-shadow: none !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1 var(--font-default) !important;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    html body .catalog-unified-toolbar #products-orderby { width: 180px !important; }
    html body .catalog-unified-toolbar #products-pagesize { width: 84px !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control:hover { border-color: var(--sab-ink) !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control:focus { border-color: var(--sab-ink) !important; outline: 2px solid var(--sab-ink); outline-offset: 1px; }
    html body .catalog-unified-toolbar .product-viewmode .grid-list-icon { display: flex !important; gap: 8px; float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        transition: background-color .15s ease, border-color .15s ease;
    }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon svg { width: 20px !important; height: 20px !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon:hover { background: var(--sab-blush) !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon.selected { border-color: var(--sab-ink) !important; background: var(--sab-blush) !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
}

/* (25) company pages: readability + hierarchy (2026-10-03, user: "About us / Contact us / Customer service / Terms:
   visual readability and visual hierarchy"). Section (14) copied saboraclothing.com: 13px/21px text in a 1px grey box
   with ~140 characters per line, section heads 13px bold (= body), About centred, Terms gaps of 45px. Now (copy
   unchanged, CSS only): no box, one 720px reading column, 16px/1.75 body in a softened ink, a clear ladder of
   title (25) > lead (19-20) > section head (18) > body (16) > label (12 caps), hairline section breaks, About's three
   notes as one blush callout, Terms' caps notice as a callout with hanging list numbers, Contact's facts as three
   labelled columns (stacked on phones). */
:root { --sab-read: #3b3536; --sab-hair: #eee6e4; }
html body .topic-page .page-body {
    max-width: 720px;
    margin: 0 auto !important;
    padding: 4px 0 8px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--sab-read);
    font: 400 16px/1.75 var(--font-default) !important;
    text-align: left;
}
html body .topic-page .page-body p { margin: 0 0 1.1em; font: inherit; color: inherit; }
html body .topic-page .page-body strong { color: var(--sab-ink); }
html body .topic-page .page-body a { color: var(--sab-rose); text-decoration: underline; text-underline-offset: 3px; }
/* section heads: Customer service h3 / Terms h2 */
html body .topic-page .page-body h2,
html body .topic-page .page-body h3 {
    margin: 40px 0 12px !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid var(--sab-hair);
    color: var(--sab-ink) !important;
    font: 700 18px/1.35 var(--font-default) !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}
html body .topic-page .page-body > h2:first-child,
html body .topic-page .page-body > h3:first-child,
html body .topic-page .page-body > div:first-child > h2:first-child,
html body .topic-page .page-body > div:first-child > h3:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
/* About: lead + body + the three notes as ONE blush callout (the asterisks stay - they are the copy) */
html body .topic-page .page-body .sab-topic-center { text-align: left !important; font: inherit !important; }
html body .topic-page .page-body .sab-topic-center p { margin: 0 0 1.1em !important; }
html body .topic-page .page-body .sab-topic-center p:first-child { color: var(--sab-ink); font-size: 20px !important; line-height: 1.6 !important; }
html body .topic-page .page-body .sab-topic-center p:nth-child(n+3) {
    margin: 0 !important;
    padding: 4px 24px !important;
    border-left: 3px solid var(--sab-rose);
    background: var(--sab-blush);
    color: var(--sab-ink);
    font-size: 15px !important;
    line-height: 1.7 !important;
}
html body .topic-page .page-body .sab-topic-center p:nth-child(3) { margin-top: 28px !important; padding-top: 18px !important; }
html body .topic-page .page-body .sab-topic-center p:last-child { padding-bottom: 18px !important; }
/* Terms: the caps notice as a callout, the intro as the lead, body 15px, sections on hairlines, hanging numbers */
html body .topic-page .page-body .sab-terms-lead {
    margin: 0 0 24px !important;
    padding: 20px 24px !important;
    border-left: 3px solid var(--sab-rose);
    background: var(--sab-blush);
    font: 700 13px/1.75 var(--font-default) !important;
    letter-spacing: .02em;
    color: var(--sab-ink);
}
html body .topic-page .page-body .sab-terms-intro { color: var(--sab-ink); font: 400 19px/1.6 var(--font-default) !important; margin-bottom: 8px !important; }
html body .topic-page .page-body .sab-terms-lead ~ p,
html body .topic-page .page-body .sab-terms-lead ~ ol { margin: 0 0 1.1em !important; font-size: 15px !important; line-height: 1.8 !important; }
html body .topic-page .page-body .sab-terms-lead ~ p.sab-terms-intro { font-size: 19px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }   /* the sibling rule above is equally specific */
html body .topic-page .page-body ol { margin: 0 0 1.1em !important; padding: 0 !important; }
html body .topic-page .page-body ol > li { position: relative; margin: 0 0 .6em; padding-left: 30px; }
html body .topic-page .page-body ol > li::before { position: absolute; left: 0; top: 0; color: var(--sab-rose); font-weight: 700; }
html body .topic-page .page-body ol ol { margin: .6em 0 0 !important; }
/* Contact: no box; Address / Phone / Business hours as three labelled columns between hairlines */
html body .contact-page .contact-details { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
html body .contact-page .contact-page__info { max-width: 720px; margin: 0 auto 8px; }
html body .contact-page .contact-page__info .topic-html-content-body {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sab-hair);
    border-bottom: 1px solid var(--sab-hair);
}
html body .contact-page .contact-page__info .topic-html-content-body p {
    margin: 0 !important;
    padding: 22px 16px !important;
    color: var(--sab-read) !important;
    font: 400 16px/1.65 var(--font-default) !important;
    text-align: center !important;
}
html body .contact-page .contact-page__info .topic-html-content-body p + p { border-left: 1px solid var(--sab-hair); }
html body .contact-page .contact-page__info .topic-html-content-body strong,
html body .contact-page .contact-page__info .topic-html-content-body p:has(a[href^="tel:"])::before {
    display: block;
    margin: 0 0 8px;
    color: #5c5456 !important;
    font: 700 12px/1.2 var(--font-default) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}
html body .contact-page .contact-page__info .topic-html-content-body p:has(a[href^="tel:"])::before { content: "Phone"; }
html body .contact-page .contact-page__info .topic-html-content-body br:first-of-type { display: none; }   /* the label is a block now */
html body .contact-page .contact-page__info .topic-html-content-body a[href^="tel:"] { color: var(--sab-ink) !important; font-weight: 700; font-size: 18px; text-decoration: none; }
html body .contact-page .contact-page__info .topic-html-content-body a[href^="tel:"]:hover { color: var(--sab-rose) !important; }
/* the form sits in the same 720px column; the info block's bottom hairline already separates it (no second rule) */
html body .contact-page .contact-page__form { max-width: 720px; margin: 0 auto !important; padding-top: 36px !important; border-top: 0 !important; }
@media (max-width: 767.98px) {
    html body .topic-page .page-body { padding: 0 2px 8px !important; font-size: 16px !important; }
    html body .topic-page .page-body .sab-topic-center p:first-child { font-size: 18px !important; }
    html body .topic-page .page-body .sab-terms-lead ~ p.sab-terms-intro { font-size: 17px !important; }
    html body .topic-page .page-body h2, html body .topic-page .page-body h3 { margin-top: 32px !important; padding-top: 24px !important; font-size: 17px !important; }
    html body .contact-page .contact-page__info .topic-html-content-body { grid-template-columns: 1fr; }
    html body .contact-page .contact-page__info .topic-html-content-body p + p { border-left: 0; border-top: 1px solid var(--sab-hair); }
    html body .contact-page .contact-page__info .topic-html-content-body p { padding: 18px 8px !important; }
}

/* (26) listing view modes = products per row (2026-10-03, core _CatalogSelectors: "3 per row" / "4 per row").
   Section 5.1 pinned every listing to repeat(3) !important, so the 4-up mode rendered 3 per row too. The 4-up
   grid gets its own column count (one more class = wins over 5.1); phones stay 2-up (5.1 is desktop-only). */
@media (min-width: 768px) {
    .html-category-page .product-grid.viewmode-4col .item-grid.row,
    .html-search-page .product-grid.viewmode-4col .item-grid.row,
    .html-recently-added-products-page .product-grid.viewmode-4col .item-grid.row,
    .html-manufacturer-page .product-grid.viewmode-4col .item-grid.row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 20px;
    }
}

/* (27) "On this page" on long topic pages (2026-10-03, user: section list for Terms - 26 sections). Built by
   sab-topic-toc-v1.js from the topic's h2s; two columns on desktop, one on phones; section heads keep clear of the
   masthead when jumped to. */
html body .topic-page .page-body .sab-toc {
    margin: 8px 0 36px;
    padding: 20px 24px 14px;
    border: 1px solid var(--sab-hair);
    border-radius: 2px;
    background: #fff;
}
html body .topic-page .page-body .sab-toc__title {
    margin: 0 0 12px !important;
    color: #5c5456 !important;
    font: 700 12px/1.2 var(--font-default) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .topic-page .page-body .sab-toc__list { margin: 0 !important; padding: 0 !important; list-style: none; columns: 2; column-gap: 32px; }
html body .topic-page .page-body .sab-toc__list > li { margin: 0; padding: 0 !important; break-inside: avoid; }
html body .topic-page .page-body .sab-toc__list > li::before { content: none !important; }
html body .topic-page .page-body .sab-toc__list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f3ecea;
    color: var(--sab-ink) !important;
    font: 400 14px/1.4 var(--font-default);
    text-decoration: none !important;
    text-transform: none;
}
html body .topic-page .page-body .sab-toc__list a:hover { color: var(--sab-rose) !important; }
html body .topic-page .page-body .sab-toc__num { flex: 0 0 22px; color: var(--sab-rose); font-weight: 700; font-variant-numeric: tabular-nums; }
html body .topic-page .page-body h2[id] { scroll-margin-top: 140px; }
@media (max-width: 767.98px) {
    html body .topic-page .page-body .sab-toc { padding: 16px 16px 10px; }
    html body .topic-page .page-body .sab-toc__list { columns: 1; }
    html body .topic-page .page-body h2[id] { scroll-margin-top: 120px; }
}

/* (28) notification tokens for the core toasts (notifications-v1.css / .js, 2026-10-03). Sabora: white card on the
   ink type, the hairline of the rest of the skin, square-ish corners, Lato; links in rose; states in muted tones
   that sit next to the rose instead of the stock bright green / red. Desktop: under the header icon row. */
:root {
    --nt-font: var(--font-default);
    --nt-size: 14px;
    --nt-bg: #fff;
    --nt-fg: var(--sab-ink);
    --nt-border: #e3d8d6;
    --nt-radius: 2px;
    --nt-success: #3d7a5a;
    --nt-error: #a3242f;
    --nt-warning: #9a5b00;
    --nt-link: var(--sab-rose);
    --nt-muted: #5c5456;
    --nt-top: 132px;
    --nt-shadow: 0 14px 36px rgba(35, 31, 32, .16), 0 2px 6px rgba(35, 31, 32, .06);
}

/* (29) phone menu drawer (2026-10-03, user: "hamburger menu popover UI/UX"). Core v4 makes the drawer fill the screen
   under the header and turns the hamburger into a close. Sabora look: category rows 54px in 15px caps on hairlines
   (were 12px bold on black rules) with a chevron for "goes somewhere", SALE in rose, the account block as a labelled
   section of 48px icon rows, the language switch compact at the top. */
:root { --sab-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E"); }
@media (max-width: 767.98px) {
    .header .header-lower .m-menu-toggle[aria-expanded="true"] .fa-bars::before { --sab-ico: var(--sab-ico-close); --sab-i: var(--sab-ico-close); }
    #sab-masthead .header-menu .navbar-collapse.in { background: #fff !important; border-top: 1px solid var(--sab-hair) !important; }
    /* mobile-header-v4.js focuses the panel on open (keyboard users land in it) - no ring on the whole drawer */
    #sab-masthead .header-menu .navbar-collapse.in:focus { outline: none !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav { margin: 0 !important; padding: 4px 0 0 !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li { position: relative; border: 0 !important; border-bottom: 1px solid var(--sab-hair) !important; background: none !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a {
        display: flex !important;
        align-items: center;
        min-height: 54px;
        padding: 0 48px 0 20px !important;
        border: 0 !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 600 15px/1.2 var(--font-default) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li:not(.dropdown) > a::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        background-color: #9a8f8d;
        -webkit-mask: var(--sab-i-chevron-right) center / contain no-repeat;
        mask: var(--sab-i-chevron-right) center / contain no-repeat;
    }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a[href$="/sale"] { color: var(--sab-rose) !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a:active,
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a:focus-visible { background: var(--sab-blush) !important; }
    #sab-masthead .header-menu .navbar-collapse .dropdown-menu li a { min-height: 48px; display: flex !important; align-items: center; padding: 0 20px 0 32px !important; font: 400 15px/1.3 var(--font-default) !important; letter-spacing: 0 !important; text-transform: none !important; }
    /* account block */
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account { margin-top: 20px !important; border-top: 0 !important; }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .m-menu-section-title {
        padding: 0 20px 8px !important;
        border-bottom: 1px solid var(--sab-hair);
        color: #5c5456 !important;
        font: 700 12px/1.2 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase;
    }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .header-top-right li { border-bottom: 1px solid var(--sab-hair) !important; }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .header-top-right li a {
        display: flex !important;
        align-items: center;
        gap: 14px;
        min-height: 48px;
        padding: 0 20px !important;
        color: var(--sab-ink) !important;
        font: 400 15px/1.2 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        border: 0 !important;   /* the li carries the one hairline */
    }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account li a[class^="ico-"]::before { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
    /* language switch: compact row at the top */
    #sab-masthead .header-menu .navbar-collapse .npc-tr { margin: 12px 20px 8px !important; }
}

/* (30) login popover / sheet (2026-10-03, user: "mobile login popover UI/UX"). Core: eye-icon password toggle,
   drag-down-to-close sheet, 44px foot links. Sabora: the title in the page-title family (Lato 22, was Montserrat 20). */
:root { --npc-lp-title-font: var(--font-default); --npc-lp-title-size: 22px; }
/* wigstheme pins every h1-h6 to Montserrat with !important; the dialog title is a heading of the UI, not of the page */
.npc-lp-root .npc-lp-title { font-family: var(--npc-lp-title-font) !important; }

/* (31) cart page + flyout cart tokens for the core cart-skin-v1.css (2026-10-03, user: "flyout cart / cart page UI,
   UX, readability"): Lato, ink figures, the skin hairline, blush bands and chips, rose checkout. The cart icon's
   tooltip stays hidden while its flyout is open (it sat on top of the neighbouring icons). */
:root {
    --cart-font: var(--font-default);
    --cart-fg: var(--sab-ink);
    --cart-muted: #5c5456;
    --cart-line: #e3d8d6;
    --cart-surface: #fff;
    --cart-soft: #fbf5f4;
    --cart-accent: var(--sab-rose);
    --cart-accent-fg: #fff;
    --cart-radius: 2px;
    --cart-chip-bg: var(--sab-blush);
}
#sab-masthead .header .header-lower .header-cart-col:has(.flyout-cart-wrapper.active) a.ico-cart > .sab-tip,
#sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper:hover a.ico-cart > .sab-tip { display: none !important; }

/* (32) flyout cart anchored to the bag icon (2026-10-03, user: "flyout cart popover display location is distorted").
   Theme simplex.styles.css puts the wrapper 20px in from the cart column (right:20px) and the responsive sheet adds
   left:10px, so below ~1200px the 440-580px card ran past the viewport and above it the caret (core
   flyout-cart-arrow.css, 16px, right:20px) sat left of the bag. The card's right edge = the column's right edge = the
   bag's right edge, and the caret is centred under the 40px bag (20 - 16/2). The theme's old png arrow is off. */
@media (min-width: 768px) {
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper { left: auto !important; right: 0 !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper::before { content: none !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart { right: 0 !important; }   /* core tablet sheet: right:10px */
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart::before { left: auto !important; right: 12px !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart::after { left: auto !important; right: 13.6px !important; }
}

/* (33) header logo on one continuous curve + breathing room (2026-10-03, user: "validate logo size when resizing
   window and mobile view"). Before, three rules stepped the size while resizing: 404 > 323 at 1024 (section 6)
   > 266 at 1023 > 200 at 768 > back to 323 at 767 > 152 at 390. Now: 404px (native) from 1200px; a straight
   line 200px @768 -> 404px @1200 (~321 @1024, the benchmark's 80%) that also keeps the tablet search field
   >= 170px; phones take what fits between the four 44px buttons, capped at the same 200px (no jump at 767/768),
   with 6px either side (the logo cell touched the account button). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #sab-masthead .header .header-lower .header-logo img {
        width: clamp(200px, 47.22vw - 162.6px, 404px) !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
    }
}
@media (max-width: 767.98px) {
    #sab-masthead .header .header-lower .header-logo-col { padding-inline: 6px !important; }
    #sab-masthead .header .header-lower .header-logo img { max-width: min(100%, 200px) !important; }
}

/* (34) /login: Sign in and Register on one line (2026-10-03, user: "horizontal align 'sign in'/'register' buttons").
   The two cards were already equal height, but each button sat right after its own content, so Register landed
   20px lower at 1024-1440 and 111px lower at 768. Side by side (>= 768px) each card is a column and its action row
   takes the free space above it (margin-top: auto) - both buttons end on the cards' bottom padding. Phones stack. */
@media (min-width: 768px) {
    .login-page .returning-wrapper,
    .login-page .new-wrapper { display: flex; flex-direction: column; }
    .login-page .returning-wrapper > fieldset,
    .login-page .new-wrapper > fieldset,
    .login-page .returning-wrapper > fieldset > .form-fields,
    .login-page .returning-wrapper > fieldset > .form-fields > form,
    .login-page .new-wrapper > fieldset > .text { display: flex; flex-direction: column; flex: 1 1 auto; }
    .login-page .returning-wrapper form > .form-group:has(.login-button),
    .login-page .new-wrapper .text > .form-group:has(.register-button) { margin-top: auto !important; margin-bottom: 0 !important; }
}

/* (35) compact breadcrumb area (2026-10-05, user: "reduce the breadcrumb's top/bottom space so more products fit one
   screen"). Category pages at 1440x900 spent 114px on one line of breadcrumb: the menu row's 32px bottom margin
   (it collapses out of the masthead), a 51px band (15px padding) and a 30px margin below; the toolbar then kept 24px
   above the grid. Now 12 / 36 / 12 and 16 - ~74px more product. Only on pages with a breadcrumb; the home page keeps
   its spacing (the hero overlay is measured from the menu row). */
html:not(.html-home-page):has(.breadcrumb-wrapper) #sab-masthead .header-menu { margin-bottom: 12px !important; }
html body .breadcrumb-wrapper ul.breadcrumb { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 12px !important; }
html body .catalog-unified-toolbar { margin-bottom: 16px !important; }