/* PageSpeed Insights Performance Optimizations */
@font-face {
  font-display: swap;
}

.mp-card-media img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

html.vita-scroll-locked,
body.vita-scroll-locked {
  overflow: hidden !important;
  touch-action: none;
}

:root {
  /* Main Palette & Brand Accents (Concept Vita = Life: Organic Sage Green #8C9D93) */
  --mp-primary: #8C9D93;
  --mp-primary-hover: #7A8B81;
  --mp-primary-light: #F2F6F4;
  --mp-accent: #8C9D93;
  --mp-accent-hover: #7A8B81;
  --mp-secondary: #5A8F76;
  --mp-wb-purple: #8C9D93;

  /* Backgrounds & Surfaces */
  --mp-bg-body: #f8fafc;
  --mp-bg-surface: #ffffff;
  --mp-bg-topbar: #f8fafc;
  --mp-bg-hover: #f1f5f9;
  --mp-bg-subtle: #f8fafc;
  --mp-card-bg: #ffffff;
  --mp-backdrop: rgba(0, 0, 0, 0.45);

  /* Text & Typography Colors (Soft Charcoal #2D3748, NO Pitch Black) */
  --mp-text-main: #2D3748;
  --mp-text-body: #2D3748;
  --mp-text-muted: #64748B;
  --mp-text-light: #94A3B8;
  --mp-text-inverse: #ffffff;

  /* Borders & Dividers */
  --mp-border-color: #E2E8F0;
  --mp-border-hover: #CBD5E1;
  --mp-border-divider: #F1F5F9;

  /* Status, Badges & Micro-Interactions */
  --mp-badge-discount-bg: #dc2626;
  --mp-badge-express-bg: #059669;
  --mp-badge-hit-bg: #d97706;
  --mp-star-color: #f59e0b;

  /* Geometry & Radius Tokens (Default 4px Minimal Style) */
  --mp-radius-sm: 2px;
  --mp-radius-md: 4px;
  --mp-radius-lg: 6px;
  --mp-radius-pill: 9999px;

  /* Shadows */
  --mp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --mp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --mp-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Native System Font Stack (Zero HTTP Requests / Fast LCP) */
  --mp-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mp-transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  --vita-topbar-bg: #f8fafc;
  --vita-topbar-text: #475569;
  --vita-topbar-border: #e2e8f0;
  --vita-topbar-link-hover: #8c9d93;
  --vita-topbar-control-bg: #f1f5f9;
  --vita-topbar-control-text: #475569;
  --vita-topbar-control-border: #e2e8f0;
  --vita-header-bg: #ffffff;
  --vita-header-text: #2d3748;
  --vita-header-muted: #64748b;
  --vita-header-border: #e2e8f0;
  --vita-header-search-bg: #ffffff;
  --vita-header-search-text: #2d3748;
  --vita-header-search-placeholder: #64748b;
  --vita-header-search-border: #8c9d93;
  --vita-header-search-button-bg: #8c9d93;
  --vita-header-search-button-text: #ffffff;
  --vita-header-catalog-bg: #8c9d93;
  --vita-header-catalog-text: #ffffff;
  --vita-header-catalog-hover: #7a8b81;
  --vita-header-action-bg: #f1f5f9;
  --vita-header-action-text: #2d3748;
  --vita-header-action-hover: #8c9d93;
  --vita-header-badge-bg: #8c9d93;
  --vita-header-badge-text: #ffffff;
  --vita-topbar-dropdown-bg: #ffffff;
  --vita-topbar-dropdown-text: #2d3748;
  --vita-topbar-dropdown-hover-bg: #f1f5f9;
  --vita-topbar-dropdown-hover-text: #8c9d93;
  --vita-topbar-dropdown-border: #e2e8f0;
  --vita-search-button-hover-bg: #7a8b81;
  --vita-search-button-hover-text: #ffffff;
  --vita-search-dropdown-bg: #ffffff;
  --vita-search-dropdown-text: #2d3748;
  --vita-search-dropdown-border: #e2e8f0;
  --vita-search-dropdown-hover-bg: #f1f5f9;
  --vita-search-dropdown-hover-text: #8c9d93;
  --vita-logo-tagline: #64748b;
  --vita-header-catalog-hover-text: #ffffff;
  --vita-header-action-hover-bg: #e2e8f0;
  --vita-mega-bg: #ffffff;
  --vita-mega-sidebar-bg: #ffffff;
  --vita-mega-text: #242424;
  --vita-mega-muted: #868695;
  --vita-mega-hover-bg: #f4f4f5;
  --vita-mega-hover-text: #8c9d93;
  --vita-mega-border: #f1f5f9;
  --vita-mobile-header-bg: #f8fafc;
  --vita-mobile-header-text: #2d3748;
  --vita-mobile-drawer-bg: #ffffff;
  --vita-mobile-drawer-text: #2d3748;
  --vita-mobile-border: #e2e8f0;
  --vita-mobile-menu-divider: #e2e8f0;
  --vita-mobile-nav-bg: #ffffff;
  --vita-mobile-nav-text: #64748b;
  --vita-mobile-nav-active: #8c9d93;
  --vita-header-focus: #8c9d93;
}

/* Screen Reader Only Utility for Accessibility (a11y) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reset & Global */
body {
  font-family: var(--mp-font-family);
  background-color: var(--mp-bg-body);
  color: var(--mp-text-body);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--mp-transition);
}

a:hover {
  color: var(--mp-primary);
  text-decoration: none;
}

/* Accessibility (a11y) Screen Reader & Focus Visible Styles */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
div[tabindex="0"]:focus-visible {
  outline: 2px solid var(--vita-header-focus) !important;
  outline-offset: 2px !important;
}

/* Kill mouse-click focus rings (Bootstrap 3 draws 5px auto black ring on a:focus);
   keyboard users still get the :focus-visible ring above */
a:focus,
button:focus,
[role="button"]:focus,
[tabindex]:focus {
  outline: none;
}

/* Container (width controlled by theme setting --vita-container-max) */
.container,
.mp-container {
  width: 100% !important;
  max-width: var(--vita-container-max, 1640px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container,
  .mp-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Fixed-width content container: blog article + article category pages (ignores --vita-container-max) */
.container.vita-container-1170 {
  max-width: 1170px !important;
}

/* Full-width header/footer containers (ignore --vita-container-max) */
.mp-container--full {
  max-width: 100% !important;
}

/* Full-bleed: break any block out of the fixed container to the viewport edges.
   100vw includes the vertical scrollbar, so the block is ~scrollbar/2 wider than
   the visible area on each side; the scrollbar width is measured by JS into
   --vita-scrollbar-w and subtracted here (width + both margins). */
html {
  overflow-x: clip;
}

.mp-full-bleed {
  width: calc(100vw - var(--vita-scrollbar-w, 0px));
  max-width: none;
  /* 100vw включает полосу прокрутки, область контента — нет: на полноширинной
     странице calc(50% - 50vw) сдвигал блок на полскроллбара влево за экран
     (контент HTML-модуля обрезался слева). Реальная ширина скроллбара
     выставляется в CSS-переменную скриптом и вычитается здесь. */
  margin-left: calc(50% - (100vw - var(--vita-scrollbar-w, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--vita-scrollbar-w, 0px)) / 2);
}

/* PDP Flex Row & Sticky Column Architecture */
.mp-pdp-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.mp-sticky-col {
  position: relative !important;
}

.mp-sticky-box {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 90px !important;
  z-index: 90 !important;
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-lg);
  padding: 24px;
  box-shadow: var(--mp-shadow-md);
  border: 1px solid var(--mp-border-color);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.mp-sticky-header-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--vita-header-bg);
  box-shadow: var(--mp-shadow-sm);
  transition: transform 0.25s ease;
}

body.route-product-product .mp-sticky-header-wrapper {
  position: static !important;
  box-shadow: none !important;
  transform: none !important;
}

.vita-header-overlay:not(.is-scrolled) {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--vita-home-hero-blur, 12px));
  backdrop-filter: blur(var(--vita-home-hero-blur, 12px));
}

.vita-header-overlay.is-scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
}

.mp-sticky-header-wrapper.vita-header-overlay {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.mp-sticky-header-wrapper.vita-header-overlay .mp-header,
.mp-sticky-header-wrapper.vita-header-overlay .mp-header-top {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.vita-header-overlay:not(.is-scrolled).vita-header-overlay--dark,
.vita-header-overlay:not(.is-scrolled).vita-header-overlay--auto {
  --vita-header-bg: rgba(15, 23, 42, var(--vita-home-hero-opacity, .72));
  --vita-header-text: #ffffff;
  --vita-header-muted: rgba(255, 255, 255, .78);
  --vita-header-border: rgba(255, 255, 255, .25);
  --vita-header-search-bg: rgba(255, 255, 255, .14);
  --vita-header-search-text: #ffffff;
  --vita-header-search-placeholder: rgba(255, 255, 255, .78);
  --vita-header-search-border: rgba(255, 255, 255, .42);
  --vita-header-search-button-bg: rgba(255, 255, 255, .18);
  --vita-header-search-button-text: #ffffff;
  --vita-header-catalog-bg: rgba(255, 255, 255, .16);
  --vita-header-catalog-text: #ffffff;
  --vita-header-catalog-hover: rgba(255, 255, 255, .3);
  --vita-header-catalog-hover-text: #ffffff;
  --vita-header-action-bg: transparent;
  --vita-header-action-text: #ffffff;
  --vita-header-action-hover: #ffffff;
  --vita-header-action-hover-bg: rgba(255, 255, 255, .16);
  --vita-topbar-bg: rgba(15, 23, 42, var(--vita-home-hero-opacity, .72));
  --vita-topbar-text: #ffffff;
  --vita-topbar-border: rgba(255, 255, 255, .2);
  --vita-topbar-control-bg: rgba(255, 255, 255, .14);
  --vita-topbar-control-text: #ffffff;
  --vita-topbar-control-border: rgba(255, 255, 255, .28);
  --vita-logo-text: #ffffff;
  --vita-logo-icon: #ffffff;
  --vita-logo-tagline: rgba(255, 255, 255, .78);
}

.vita-header-overlay:not(.is-scrolled).vita-header-overlay--light {
  --vita-header-bg: rgba(255, 255, 255, var(--vita-home-hero-opacity, .72));
  --vita-header-text: #0f172a;
  --vita-header-muted: #475569;
  --vita-header-border: rgba(15, 23, 42, .18);
  --vita-header-search-bg: rgba(255, 255, 255, .72);
  --vita-header-search-text: #0f172a;
  --vita-header-search-placeholder: #64748b;
  --vita-header-search-border: rgba(15, 23, 42, .3);
  --vita-header-catalog-bg: rgba(15, 23, 42, .1);
  --vita-header-catalog-text: #0f172a;
  --vita-header-catalog-hover: rgba(15, 23, 42, .18);
  --vita-header-catalog-hover-text: #0f172a;
  --vita-header-action-bg: transparent;
  --vita-header-action-text: #0f172a;
  --vita-header-action-hover: #0f172a;
  --vita-header-action-hover-bg: rgba(15, 23, 42, .08);
  --vita-topbar-bg: rgba(255, 255, 255, var(--vita-home-hero-opacity, .72));
  --vita-topbar-text: #0f172a;
  --vita-topbar-border: rgba(15, 23, 42, .14);
  --vita-topbar-control-bg: rgba(15, 23, 42, .08);
  --vita-topbar-control-text: #0f172a;
  --vita-topbar-control-border: rgba(15, 23, 42, .2);
  --vita-logo-text: #0f172a;
  --vita-logo-icon: #0f172a;
  --vita-logo-tagline: #475569;
}

/* Dark theme: the hero scrim has to be mixed from the dark palette (var(--vita-dark-topbar) topbar,
   var(--vita-dark-page) header), otherwise the overlay header keeps the light-mode slate colour
   and floats over the page in a foreign hue. */
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled).vita-header-overlay--dark,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled).vita-header-overlay--auto {
  --vita-header-bg: rgba(34, 31, 36, var(--vita-home-hero-opacity, .72));
  --vita-header-border: rgba(255, 255, 255, .16);
  --vita-header-search-bg: rgba(255, 255, 255, .1);
  --vita-header-search-border: rgba(255, 255, 255, .28);
  --vita-header-search-button-bg: rgba(255, 255, 255, .14);
  --vita-header-catalog-bg: rgba(255, 255, 255, .12);
  --vita-header-catalog-hover: rgba(255, 255, 255, .24);
  --vita-header-action-hover-bg: rgba(255, 255, 255, .12);
  --vita-topbar-bg: rgba(29, 26, 32, var(--vita-home-hero-opacity, .72));
  --vita-topbar-border: rgba(255, 255, 255, .14);
  --vita-topbar-control-bg: rgba(255, 255, 255, .1);
  --vita-topbar-control-border: rgba(255, 255, 255, .22);
}

/* Hero: the first content_top block is stretched by its own module (mp-full-bleed),
   so no route-specific slideshow rules are needed here. */
.mp-header {
  background: var(--vita-header-bg);
  color: var(--vita-header-text);
  position: relative;
  z-index: 1001;
  border-bottom: 1px solid var(--vita-header-border);
}

.mp-header-top {
  background: var(--vita-topbar-bg);
  font-size: 12px;
  color: var(--vita-topbar-text);
  border-bottom: 1px solid var(--vita-topbar-border);
  padding: 6px 0;
  position: relative;
  z-index: 1050;
}

.mp-header-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp-top-dropdown-wrap:hover .mp-top-dropdown-menu {
  display: block;
}

.mp-top-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--vita-topbar-dropdown-border);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: 6px 0;
  z-index: 1060;
}

.mp-top-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--vita-topbar-dropdown-text);
  text-decoration: none;
  transition: var(--mp-transition);
}

.mp-top-dropdown-item:hover {
  background: var(--vita-topbar-dropdown-hover-bg);
  color: var(--vita-topbar-dropdown-hover-text);
}

.mp-header-main {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--vita-header-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-catalog-toggle {
  background: var(--vita-header-catalog-bg);
  color: var(--vita-header-catalog-text);
  border: 1px solid transparent;
  border-radius: var(--mp-radius-md);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: var(--mp-transition);
  flex-shrink: 0;
}

.btn-catalog-toggle:hover,
.btn-catalog-toggle.active {
  background: var(--vita-header-catalog-hover);
  color: var(--vita-header-catalog-hover-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-catalog-toggle.has-label {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 22px;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.btn-catalog-label {
  white-space: nowrap;
}

.mp-search-form {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: var(--mp-radius-md);
  height: 44px;
  transition: all 0.2s ease;
}

.mp-search-form:focus-within {
  background: #ffffff;
  border-color: var(--vita-header-focus, var(--mp-primary, #8C9D93));
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.18);
}

.mp-search-icon-inside {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.15s ease;
}

.mp-search-form:focus-within .mp-search-icon-inside {
  color: var(--vita-header-focus, var(--mp-primary, #8C9D93));
}

.mp-search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 42px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: transparent;
  color: #1e293b;
}

.mp-search-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.mp-search-btn {
  display: none;
}

/* Fallback: standard OpenCart search widget when the theme search is off */
.mp-search-form--stock #search {
  width: 100%;
}
.mp-search-form--stock .input-group .form-control,
.mp-search-form--stock .input-group .btn {
  height: 44px;
  font-size: 13px;
  border-radius: var(--mp-radius-md);
}
.mp-search-form--stock .input-group .form-control {
  border: 1px solid var(--vita-header-search-border);
  background: var(--vita-header-search-bg);
  color: var(--vita-header-search-text);
}
.mp-search-form--stock .input-group .btn {
  background: var(--vita-header-search-button-bg);
  color: var(--vita-header-search-button-text);
  border-color: var(--vita-header-search-button-bg);
}

.mp-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-action-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 6px;
  min-width: 48px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.mp-action-item:hover {
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
}

.mp-action-icon {
  font-size: 20px;
  margin-bottom: 3px;
  line-height: 1;
}

.mp-badge-counter {
  position: absolute;
  top: 0px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mp-primary, #e11d48);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Modern Pill Switchers (Language & Currency) */
.mp-pill-switch-form {
  margin: 0;
  display: inline-flex;
}

.mp-pill-group {
  display: inline-flex;
  background: #eef2f6;
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}

.mp-pill-item {
  border: none;
  background: transparent;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.3;
}

.mp-pill-item:hover {
  color: #0f172a;
}

.mp-pill-item.is-active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Category drawer: active lang/currency highlighted with accent background */
.mp-vita-panel-bottom .mp-pill-item.is-active {
  background: var(--vita-primary, var(--mp-primary, #ec1c24));
  color: #ffffff;
}
.mp-vita-panel-bottom .mp-pill-item.is-active:hover {
  color: #ffffff;
}

/* Compare page: highlight rows where products differ */
.vita-compare-diff {
  background-color: #fff9e6;
}
[data-theme="dark"] .vita-compare-diff {
  background-color: rgba(250, 204, 21, 0.10);
}

/* ==========================================================================
   DESCRIPTION SPOILER (PDP)
   ========================================================================== */
.vita-description-spoiler {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vita-description-spoiler.is-expanded {
  max-height: none !important;
}
.vita-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 6px);
  background: var(--mp-card-bg, #ffffff);
  color: var(--vita-primary, #8C9D93);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vita-desc-toggle:hover {
  border-color: var(--vita-primary, #8C9D93);
}
.vita-desc-toggle .fa-chevron-up { transform: rotate(180deg); }

/* Hide main header when sticky bar is visible (desktop & mobile) */
body.header-hidden .mp-sticky-header-wrapper,
body.header-hidden .mp-header,
body.header-hidden .mp-header-sticky,
body.header-hidden #mobile-header,
body.header-hidden .mp-mobile-header {
  transform: translateY(-100%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   DARK MODE: catalog page adaptation
   (sortbar, pagination, filter sidebar, card hover plates)
   ========================================================================== */
[data-theme="dark"] .mp-sortbar {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}
[data-theme="dark"] .mp-sortbar-label { color: #9aa4b2; }
[data-theme="dark"] .mp-select-clean {
  background-color: var(--vita-dark-photo);
  border-color: var(--vita-dark-border);
  color: #e2e8f0;
}
[data-theme="dark"] .mp-view-switcher {
  background: var(--vita-dark-photo);
  border-color: var(--vita-dark-border);
}
[data-theme="dark"] .mp-btn-view { color: #9aa4b2; }
[data-theme="dark"] .mp-btn-view.is-active,
[data-theme="dark"] .mp-btn-view.active {
  background: #1e293b;
  color: #ffffff;
}

[data-theme="dark"] .mp-pagination-bar {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}
[data-theme="dark"] .mp-pagination-bar .pagination > li > a,
[data-theme="dark"] .mp-pagination-bar .pagination > li > span {
  background: var(--vita-dark-photo);
  border-color: var(--vita-dark-border);
  color: #cbd5e1;
}
[data-theme="dark"] .mp-pagination-bar .pagination > li > a:hover {
  background: var(--vita-dark-border);
  color: #ffffff;
}
[data-theme="dark"] .mp-pagination-bar .pagination > .active > a,
[data-theme="dark"] .mp-pagination-bar .pagination > .active > span {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

/* Filter sidebar + mobile drawer (vita_filter): colors live in its own
   variable system (vita-filter.css :root + [data-theme="dark"] overrides).
   Only layout-level integration stays here. */
[data-theme="dark"] .vita-filter-wrapper,
[data-theme="dark"] .vita-filter-container.vita-filter-drawer {
  background: #241f28;
}
[data-theme="dark"] .vita-filter-close-btn { color: #e2e8f0; }

/* Card hover plates (wishlist/compare quick actions) */
[data-theme="dark"] .mp-card-quick-actions .btn-card-quick-action {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  color: #e2e8f0;
}

.mp-header-pill-switch .dropdown-menu li a,
.mp-header-pill-switch .dropdown-menu button {
  font-size: 13px;
  font-weight: 500;
  color: var(--vita-topbar-dropdown-text);
  padding: 6px 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
}

.mp-header-pill-switch .dropdown-menu li a:hover,
.mp-header-pill-switch .dropdown-menu button:hover {
  background: var(--vita-topbar-dropdown-hover-bg);
  color: var(--vita-topbar-dropdown-hover-text);
}

.mp-switch-label {
  white-space: nowrap;
}

.mp-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: var(--vita-header-action-text);
  border-radius: var(--mp-radius-sm);
  padding: 4px 5px;
  position: relative;
  cursor: pointer;
}

.mp-action-item i {
  font-size: 22px;
  margin-bottom: 2px;
  color: var(--vita-header-action-text);
  transition: var(--mp-transition);
}

.mp-action-item:hover i,
.mp-action-item:hover span {
  color: var(--vita-header-action-hover);
}

.mp-action-item:hover .mp-badge-counter {
  color: var(--vita-header-badge-text);
}

.mp-badge-counter {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--vita-header-badge-bg);
  color: var(--vita-header-badge-text);
  font-size: 11px;
  font-weight: 700;
  height: 18px;
  min-width: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--vita-search-dropdown-bg);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-lg);
  border: 1px solid var(--vita-search-dropdown-border);

  color: var(--vita-search-dropdown-text);
  z-index: 1050;
  max-height: 480px;
  overflow-y: auto;
  padding: 8px 0;
}

.mp-search-dropdown a,
.mp-search-dropdown button {
  color: var(--vita-search-dropdown-text);
}

.mp-search-dropdown a:hover,
.mp-search-dropdown button:hover {
  background: var(--vita-search-dropdown-hover-bg);
  color: var(--vita-search-dropdown-hover-text);
}

/* ==========================================================================
   SEARCH (WB-style full-screen overlay on mobile + inline suggestions)
   ========================================================================== */
.mp-search-dropdown[hidden] {
  display: none;
}
.mp-search-dropdown {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--vita-search-dropdown-bg);
  border: 1px solid var(--vita-search-dropdown-border);
  border-radius: 10px;
  box-shadow: var(--mp-shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1060;
  list-style: none;
  padding: 6px;
}

/* Full-screen overlay (mobile) */
.mp-vita-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vita-mobile-drawer-bg);
  color: var(--vita-mobile-drawer-text);
  z-index: 10003;
  flex-direction: column;
}
.mp-vita-search-overlay.is-open {
  display: flex;
}
html.vita-search-open,
html.vita-search-open body {
  overflow: hidden;
}

.mp-vita-search-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--vita-mobile-header-bg);
  border-bottom: 1px solid var(--vita-mobile-border);
}
.mp-vita-search-close,
.mp-vita-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--vita-mobile-header-text);
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
}
.mp-vita-search-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--vita-mobile-border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--vita-mobile-drawer-bg);
  color: var(--vita-mobile-drawer-text);
  outline: none;
}

.mp-vita-search-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
}

.mp-vita-search-section {
  margin-bottom: 22px;
}
.mp-vita-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mp-vita-search-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vita-mobile-drawer-text);
}
.mp-vita-search-clear {
  border: none;
  background: transparent;
  color: var(--vita-mega-hover-text);
  font-size: 13px;
  cursor: pointer;
}

.mp-vita-search-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-vita-search-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--vita-mobile-border);
  background: var(--vita-mobile-drawer-bg);
  color: var(--vita-mobile-drawer-text);
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
}
.mp-vita-search-tag i {
  color: var(--vita-mega-muted);
  font-size: 13px;
}

.mp-vita-search-suggest-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-vita-search-suggest-head {
  padding: 10px 6px 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vita-mega-muted);
}
.mp-vita-search-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  color: var(--vita-mobile-drawer-text);
  text-decoration: none;
  border-bottom: 1px solid var(--vita-mobile-menu-divider);
}
.mp-vita-search-suggest-item:hover {
  background: var(--vita-mega-hover-bg);
}
.mp-vita-search-suggest-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.mp-vita-search-suggest-item i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vita-mega-muted);
  flex-shrink: 0;
}
.mp-vita-search-suggest-item .mp-vita-search-suggest-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-vita-search-suggest-item .mp-vita-search-suggest-price {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--vita-mega-hover-text);
  white-space: nowrap;
}
.mp-vita-search-suggest-item .mp-vita-search-suggest-price s {
  color: var(--vita-mega-muted);
  font-weight: 400;
}

/* ==========================================================================
   UNIFIED PUSH MENU (mobile + desktop)
   Drawer slides from the left; the whole page shifts right by the drawer
   width (--vita-menu-width) and is clipped without horizontal scroll.
   ========================================================================== */
:root {
  --vita-menu-width: 440px;
}
@media (max-width: 767.98px) {
  :root {
    --vita-menu-width: min(85vw, 360px);
  }
}

/* Push mechanics */
.mp-page {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html.vita-menu-open,
html.vita-menu-open body {
  overflow: hidden;
}
html.vita-menu-open .mp-page {
  transform: translateX(var(--vita-menu-width));
}
html.vita-menu-open .mp-mobile-bottom-nav {
  display: none;
}

/* Invisible blocker over the shifted page (click closes the menu) */
.mp-vita-blocker {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: transparent;
  cursor: pointer;
}
.mp-vita-blocker.is-open {
  display: block;
}

/* Drawer */
.mp-vita-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--vita-menu-width);
  max-width: 100vw;
  background: var(--vita-mobile-drawer-bg);
  color: var(--vita-mobile-drawer-text);
  z-index: 10002;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--mp-shadow-lg);
  display: flex;
  flex-direction: column;
}
.mp-vita-menu.is-open {
  transform: translateX(0);
}

/* Viewport: relative box hosting the sliding panels */
.mp-vita-menu-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

/* Panels (stacked; active in view, previous behind, next off to the right) */
/* Panels (GPU-accelerated slide transitions; active in view, previous in parallax depth) */
.mp-vita-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--vita-mobile-drawer-bg);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
  will-change: transform;
}
.mp-vita-panel.is-active,
.mp-vita-panel.is-prev {
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.mp-vita-panel.is-active {
  transform: translate3d(0, 0, 0);
}
.mp-vita-panel.is-prev {
  transform: translate3d(-30%, 0, 0);
  filter: brightness(0.94);
}

/* Panel navbar (back + title + close) */
.mp-vita-panel-navbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 8px 0 16px;
  background: var(--vita-mobile-header-bg);
  border-bottom: 1px solid var(--vita-mobile-border);
  color: var(--vita-mobile-header-text);
}
.mp-vita-nav-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-vita-nav-back,
.mp-vita-nav-close {
  background: transparent;
  border: none;
  color: var(--vita-mobile-header-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  font-size: 18px;
  border-radius: 8px;
}
.mp-vita-nav-back:hover,
.mp-vita-nav-close:hover {
  background: var(--vita-mega-hover-bg);
}
.mp-vita-nav-close {
  font-size: 24px;
  line-height: 1;
}

/* Panel body */
.mp-vita-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 16px 24px;
}

/* User row */
.mp-vita-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 14px;
}
.mp-vita-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vita-mobile-nav-bg);
  color: var(--vita-mobile-header-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mp-vita-user-link {
  font-weight: 700;
  font-size: 15px;
  color: var(--vita-mobile-header-text);
  display: block;
}
.mp-vita-user-hint {
  font-size: 11px;
  color: var(--vita-mobile-drawer-text);
}
.mp-vita-user-info {
  min-width: 0;
}
.mp-vita-user--logged {
  padding-bottom: 10px;
}
.mp-vita-user-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--vita-mobile-header-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Account tab of the mobile drawer: personal cabinet links */
.mp-vita-account-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--vita-mobile-border);
}
.mp-vita-account-list__item {
  border-bottom: 1px solid var(--vita-mobile-border);
}
.mp-vita-account-list__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vita-mobile-header-text);
  text-decoration: none;
}
.mp-vita-account-list__link:hover,
.mp-vita-account-list__link:focus {
  color: var(--vita-mobile-nav-active);
  text-decoration: none;
}
.mp-vita-account-list__icon {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 15px;
  color: var(--vita-mobile-nav-text);
}
.mp-vita-account-list__link:hover .mp-vita-account-list__icon,
.mp-vita-account-list__link:focus .mp-vita-account-list__icon {
  color: var(--vita-mobile-nav-active);
}
.mp-vita-account-list__counter {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--vita-mobile-nav-text);
  background: var(--vita-mobile-nav-bg);
  border-radius: 10px;
}
.mp-vita-account-list__item--logout .mp-vita-account-list__link {
  font-weight: 500;
  color: var(--vita-mobile-nav-text);
}
.mp-vita-account-list__item--logout .mp-vita-account-list__link:hover {
  color: var(--vita-mobile-nav-active);
}

/* Pinned bottom bar: language / currency switchers (always at the bottom) */
.mp-vita-panel-bottom {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: var(--vita-mobile-header-bg);
  border-top: 1px solid var(--vita-mobile-border);
}
/* Dropdowns inside the bottom bar open upward so they stay on screen */
.mp-vita-panel-bottom .mp-header-pill-switch .dropdown-menu {
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  margin-top: 0;
  margin-bottom: 6px;
}

/* Root panel tabs (catalog / info) */
.mp-vita-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--vita-mega-hover-bg);
  border-radius: 10px;
}
.mp-vita-tab {
  flex: 1;
  min-height: 36px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vita-mobile-drawer-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mp-vita-tab.is-active {
  background: var(--vita-mobile-drawer-bg);
  color: var(--vita-mega-hover-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.mp-vita-tab-pane {
  display: none;
}
.mp-vita-tab-pane.is-active {
  display: block;
}

/* Sections and lists */
.mp-vita-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vita-mobile-drawer-text);
  margin: 10px 0 6px 4px;
}
.mp-vita-cat-list,
.mp-vita-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-vita-cat-item {
  border-bottom: 1px solid var(--vita-mobile-menu-divider);
  display: flex;
  align-items: stretch;
}
.mp-vita-cat-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vita-mobile-drawer-text);
  text-decoration: none;
}
.mp-vita-cat-link:hover {
  color: var(--vita-mega-hover-text);
}
.mp-vita-cat-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--vita-mega-muted);
  font-size: 15px;
}
.mp-vita-cat-icon-img {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.mp-vita-cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-vita-cat-counter {
  flex-shrink: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: var(--vita-mega-muted);
  margin-left: 8px;
}
.mp-vita-cat-next {
  flex: 0 0 44px;
  align-self: stretch;
  background: transparent;
  border: none;
  border-left: 1px solid var(--vita-mega-border);
  color: var(--vita-mega-muted);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-vita-cat-next:hover {
  background: var(--vita-mega-hover-bg);
  color: var(--vita-mega-hover-text);
}

/* Loading / empty states */
.mp-vita-menu-loading {
  padding: 16px 6px;
  font-size: 13px;
  color: var(--vita-mega-muted);
}

/* Promo block inside category panels */
.mp-vita-promo {
  margin-top: 20px;
  border-top: 1px solid var(--vita-mobile-border);
  padding-top: 14px;
}
.mp-vita-promo-media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 10px;
}
.mp-vita-promo-media img {
  display: block;
  width: 100%;
  height: auto;
}
.mp-vita-promo-html {
  font-size: 13px;
  color: var(--vita-mobile-drawer-text);
}
.mp-vita-promo-html img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Info list */
.mp-vita-info-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 13px;
  color: var(--vita-mobile-drawer-text);
  border-bottom: 1px solid var(--vita-mobile-border);
}
.mp-vita-info-list a:hover {
  color: var(--vita-mega-hover-text);
}

@media (prefers-reduced-motion: reduce) {
  .mp-page,
  .mp-vita-menu,
  .mp-vita-panel {
    transition: none;
  }
}

/* ==========================================================================
   DESKTOP DROPDOWN MENU (classic mode, restored)
   Optional dropdown below the header instead of the push drawer.
   ========================================================================== */
/* VITA MEGA MENU */
.mp-menu-backdrop {
  display: none;
  position: fixed;
  top: 105px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mp-backdrop);
  z-index: 998;
}

.mp-menu-backdrop.open {
  display: block;
}

.mp-wb-megamenu {
  display: none;
  position: fixed;
  top: 105px;
  left: 0;
  right: auto;
  z-index: 999;
  pointer-events: none;
}

.mp-wb-megamenu.open {
  display: flex;
}

.mp-wb-menu-container {
  display: flex;
  align-items: stretch;
  width: auto;
  max-width: calc(100vw - 16px);
  height: auto;
  max-height: calc(100dvh - 121px);
  overflow: hidden;
  pointer-events: auto;
  background: var(--vita-mega-bg) !important;
  box-shadow: var(--mp-shadow-lg);
  border-right: 1px solid var(--vita-mega-border);
}

.mp-wb-col-1 {
  width: clamp(300px, 25vw, 380px);
  min-width: 300px;
  flex: 0 0 clamp(300px, 25vw, 380px);
  height: auto;
  background: var(--vita-mega-sidebar-bg) !important;
  border-right: 1px solid var(--vita-mega-border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.mp-wb-item-l1 {
  min-height: 48px;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--vita-mega-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: var(--vita-mega-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: 0;
}

.mp-wb-l1-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-wb-l1-link { color: inherit; flex: 1; min-width: 0; min-height: 48px; padding: 0 8px; text-decoration: none; }
.mp-wb-l1-link,
.mp-wb-l2-link { cursor: pointer; }
.mp-wb-btn-disclosure,
.mp-drawer-utility { border-left: 1px solid var(--vita-mega-border); }
.mp-wb-btn-disclosure { align-self: stretch; min-width: 44px; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; color: var(--vita-mega-muted); cursor: pointer; }
.mp-wb-l1-disclosure { width: 56px; min-width: 56px; align-self: stretch; border-radius: 0; }
.mp-wb-menu-counter,
.mp-drawer-menu-counter {
  margin-right: 8px;
  color: var(--vita-mega-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.mp-wb-btn-disclosure:hover,
.mp-wb-btn-disclosure:focus { background: var(--vita-mega-hover-bg); color: var(--vita-mega-hover-text); outline: none; }

.mp-wb-l1-icon {
  font-size: 14px;
  color: var(--vita-mega-muted);
  width: 18px;
  text-align: center;
}

.mp-wb-l1-icon-image {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	object-fit: contain;
	flex: 0 0 24px;
}

.vita-megamenu-promo {
	margin: 0;
	padding: 0;
  border: 0;
	display: flex;
	flex-direction: column;
}

.vita-megamenu-l2-layout {
	display: block;
	padding: 12px;
}

.vita-megamenu-l2-layout .mp-wb-l2-grid {
	width: 100%;
}

.vita-megamenu-promo__media {
	padding: 12px 12px 0;
	order: 1;
}

.vita-megamenu-promo__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
	border-radius: var(--mp-radius-md);
}

.vita-megamenu-promo__html {
	margin: 0;
	padding: 12px;
	order: 2;
}

.mp-wb-item-l1:hover,
.mp-wb-item-l1.active {
  background: transparent;
  color: var(--vita-mega-hover-text);
  font-weight: 500;
}

.mp-wb-item-l1:hover .mp-wb-l1-link,
.mp-wb-item-l1.active .mp-wb-l1-link {
  background: transparent;
  border-radius: 0;
  font-weight: 600;
}

.mp-wb-item-l1:hover .mp-wb-l1-icon,
.mp-wb-item-l1.active .mp-wb-l1-icon {
  color: var(--vita-mega-hover-text);
}

.mp-wb-item-l1 i.arrow-icon {
  font-size: 12px;
  color: var(--vita-mega-muted);
}

/* WB 2-PANEL MEGAMENU STYLES */
.mp-wb-stage {
  display: none;
  width: clamp(320px, 24vw, 360px);
  min-width: 320px;
  max-width: calc(100vw - 300px);
  flex: 0 0 clamp(320px, 24vw, 360px);
  height: auto;
  align-self: stretch;
  background: var(--vita-mega-bg) !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  border-left: 1px solid var(--vita-mega-border);
}

.mp-wb-stage.has-active {
  display: block;
}

.mp-wb-promo-stage {
  display: none;
  width: clamp(320px, 24vw, 360px);
  min-width: 320px;
  max-width: calc(100vw - 300px);
  flex: 0 0 clamp(320px, 24vw, 360px);
  align-self: stretch;
  background: var(--vita-mega-bg) !important;
  overflow: hidden;
  border-left: 1px solid var(--vita-mega-border);
}

.mp-wb-promo-stage.has-active {
  display: block;
}

.mp-wb-stage-content {
  display: none;
  height: auto;
}

.mp-wb-stage-content.active {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	box-sizing: border-box;
	/* список прижат к верху независимо от высоты колонки */
	justify-content: flex-start;
}

.mp-wb-column-header,
.mp-wb-stage-header {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 60px;
	padding: 10px 12px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--vita-mega-border);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vita-mega-text);
}

.mp-wb-back-header {
  margin-bottom: 14px;
}

.mp-wb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vita-mega-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mp-wb-back-link:hover {
  color: var(--vita-mega-hover-text);
}

.mp-wb-l2-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--vita-mega-text);
  margin-top: 4px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mp-wb-l2-title:hover {
  color: var(--vita-mega-hover-text);
}

.mp-wb-l3-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-wb-l3-link,
.mp-wb-l4-link {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--vita-mega-text);
  padding: 3px 0;
  text-decoration: none;
  transition: color 0.15s ease;
  line-height: 1.35;
}

.mp-wb-l3-link:hover,
.mp-wb-l4-link:hover {
  color: var(--vita-mega-hover-text);
}

.mp-wb-l2-link,
.mp-wb-l3-link,
.mp-wb-l4-link,
.mp-wb-drill-title-center a {
  color: var(--vita-mega-text) !important;
}

.mp-wb-l2-link:hover,
.mp-wb-l3-link:hover,
.mp-wb-l4-link:hover,
.mp-wb-back-link:hover,
.mp-wb-btn-back:hover {
  color: var(--vita-mega-hover-text) !important;
}

.mp-wb-btn-arrow {
  background: var(--vita-mega-hover-bg) !important;
  border-color: var(--vita-mega-border) !important;
  color: var(--vita-mega-muted) !important;
}

.mp-wb-stage-title {
	display: none;
}

.mp-wb-trigger-hover .mp-wb-column-header {
	display: none;
}

.mp-wb-flyout {
	flex: 0 0 clamp(280px, 20vw, 320px);
	min-width: 260px;
	height: auto;
	/* все колонки уровней — на одной линии: смещение по offset строки
	   рвёт общую сетку бордеров и оставляет зазоры снизу коротких колонок */
	align-self: stretch;
	background: var(--vita-mega-bg) !important;
	border-left: 1px solid var(--vita-mega-border);
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	max-height: 100%;
}

@media (min-width: 992px) {
	.mp-wb-megamenu {
		height: auto;
	}
}

.mp-wb-l2-list {
  margin: 0;
  padding: 0;
  align-content: start;
}

.mp-wb-l2-grid {
  display: flex;
  flex-direction: column;
  align-content: start;
}

/* прижатый к верху список в колонке: контейнер растягивается, грид — нет */
.mp-wb-stage-content.active .mp-wb-l2-grid,
.mp-wb-flyout .mp-wb-l2-grid {
  flex: 0 0 auto;
}

/* строки флайаута начинаются с той же линии, что и строки первой колонки:
   верхний отступ обёртки сдвигал первую строку вниз и рвал сетку бордеров.
   Горизонтальный отступ остаётся — отступ текста от границы колонки. */
.mp-wb-flyout .vita-megamenu-l2-layout {
  padding-top: 0;
  padding-bottom: 0;
}

/* активная строка-родитель (её дети открыты в следующей колонке) —
   в стиле L1: без заливки, акцент цветом и весом */
.mp-wb-item-l2.active {
  background: transparent;
  color: var(--vita-mega-hover-text);
  font-weight: 500;
}

.mp-wb-item-l2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--mp-text-main);
  cursor: default;
  transition: background 0.12s ease, color 0.12s ease;
  border-bottom: 1px solid var(--vita-mega-border);
}

.mp-wb-item-l2:hover {
  background: transparent;
  color: var(--vita-mega-hover-text);
  font-weight: 500;
}

.mp-wb-item-l2.active .mp-wb-l2-link {
  font-weight: 600;
}

/* в усечённой колонке стрелки раскрытия скрываем: следующий уровень туда
   не помещается — не обещаем пункты, которые не отрисуются */
.vita-mega-truncated .mp-wb-item-l2:not(.active) .vita-lazy-disclosure {
  visibility: hidden;
}

.mp-wb-item-l2 .mp-wb-l2-link,
.mp-wb-split-subrow .mp-wb-l3-link {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px;
  border-radius: 0;
}

.mp-wb-item-l2 .mp-wb-l2-link:hover,
.mp-wb-split-subrow .mp-wb-l3-link:hover {
  background: transparent;
  color: var(--vita-mega-hover-text) !important;
}

.mp-wb-menu-utility {
  display: inline-flex;
  align-self: stretch;
  border-left: 1px solid var(--vita-mega-border);
}

.mp-wb-menu-utility .mp-wb-btn-disclosure {
  width: 56px;
  min-width: 56px;
}

.mp-wb-menu-utility .mp-wb-menu-counter {
  align-self: stretch;
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-right: 0;
}

.mp-wb-item-l2 i.arrow-icon {
  font-size: 11px;
  color: var(--vita-mega-muted);
  margin-left: 6px;
}

/* Drill-Down View (Level 3/4) Header matching Tom's screenshot */
.mp-wb-view-drill {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mp-wb-drill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--vita-mega-bg);
  border-bottom: 1px solid var(--vita-mega-border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.mp-wb-btn-back {
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--vita-mega-text);
  cursor: pointer;
  padding: 0 8px 0 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.mp-wb-btn-back:hover {
  color: var(--vita-mega-hover-text);
}

.mp-wb-drill-title-center {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--vita-mega-text);
}

.mp-wb-drill-title-center a {
  color: var(--vita-mega-text);
}

.mp-wb-l3-list {
  padding: 8px 16px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}

.mp-wb-l3-item {
  border-bottom: 1px solid var(--vita-mega-border);
  padding: 6px 4px;
}

.mp-wb-l3-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--vita-mega-text);
  display: block;
}

.mp-wb-l3-link:hover {
  color: var(--vita-mega-hover-text);
}

.mp-wb-l4-list {
  padding: 4px 0 2px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-wb-l4-link {
  font-size: 13px;
  color: var(--vita-mega-muted);
}

.mp-wb-l4-link:hover {
  color: var(--vita-mega-hover-text);
}
.vita-shortcode-gallery {
  margin: 24px 0;
}

.vita-shortcode-gallery__title {
  margin: 0 0 12px;
}

.vita-shortcode-gallery__description {
  margin-bottom: 16px;
}

.vita-shortcode-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.vita-shortcode-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f5f5;
}

.vita-shortcode-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .2s ease;
}

.vita-shortcode-gallery__item:hover img {
  transform: scale(1.03);
}

/* Shortcode gallery: masonry (natural proportions, no crop) */
.vita-shortcode-gallery--masonry .vita-shortcode-gallery__masonry {
  columns: var(--vita-gallery-columns, 4);
  column-gap: 6px;
}

.vita-shortcode-gallery--masonry .vita-shortcode-gallery__item {
  display: block;
  break-inside: avoid;
  margin: 0 0 6px;
  border-radius: 8px;
  background: #f5f5f5;
}

.vita-shortcode-gallery--masonry .vita-shortcode-gallery__item img {
  aspect-ratio: auto;
  height: auto;
}

/* Shortcode gallery: carousel */
.vita-shortcode-gallery--carousel .vita-shortcode-gallery__carousel {
  position: relative;
}

.vita-shortcode-gallery--carousel .vita-shortcode-gallery__swiper {
  overflow: hidden;
  border-radius: 10px;
}

.vita-shortcode-gallery--carousel .vita-shortcode-gallery__slide {
  height: 420px;
  background: #f5f5f5;
}

.vita-shortcode-gallery--carousel .vita-shortcode-gallery__slide .vita-shortcode-gallery__item {
  display: block;
  height: 100%;
}

.vita-shortcode-gallery--carousel .vita-shortcode-gallery__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.vita-shortcode-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}

.vita-shortcode-gallery__nav:hover {
  background: #fff;
}

.vita-shortcode-gallery__nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-style: solid;
  border-color: #334155;
  border-width: 2px 2px 0 0;
}

.vita-shortcode-gallery__nav--prev {
  left: 12px;
}

.vita-shortcode-gallery__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.vita-shortcode-gallery__nav--next {
  right: 12px;
}

.vita-shortcode-gallery__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

@media (max-width: 767px) {
  .vita-shortcode-gallery--carousel .vita-shortcode-gallery__slide {
    height: 240px;
  }

  .vita-shortcode-gallery__nav {
    width: 34px;
    height: 34px;
  }
}

.vita-shortcode-news {
  display: inline-block;
  max-width: 320px;
  width: 100%;
  margin: 24px 0;
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  overflow: hidden;
  color: var(--mp-text-main);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.vita-shortcode-news:hover {
  color: var(--mp-text-main);
  border-color: var(--mp-border-hover);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}

.vita-shortcode-news__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform .2s ease;
}

.vita-shortcode-news:hover .vita-shortcode-news__image {
  transform: scale(1.03);
}

.vita-shortcode-news__title {
  display: block;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.vita-shortcode-testimonials {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

.vita-shortcode-testimonial {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-subtle);
  border-left: 3px solid var(--mp-primary);
}

.vita-shortcode-testimonial__text {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mp-text-main);
}

.vita-shortcode-testimonial__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.vita-shortcode-testimonial__name {
  font-weight: 700;
  color: var(--mp-text-main);
}

.vita-shortcode-testimonial__date {
  color: var(--mp-text-muted);
}

.vita-shortcode-testimonial__rating {
  color: var(--mp-star-color);
}

/* ==========================================================================
   HIGH-PERFORMANCE PRODUCT CARDS GRID (MODERN E-COMMERCE STYLE)
   ========================================================================== */
.mp-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--mp-grid-cols-desktop, 4), minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}

@media (max-width: 1200px) {
  .mp-products-grid {
    grid-template-columns: repeat(min(var(--mp-grid-cols-desktop, 4), 3), minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .mp-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mp-products-grid {
    grid-template-columns: repeat(var(--mp-grid-cols-mobile, 2), minmax(0, 1fr));
    gap: 10px;
  }
}

/* ==========================================================================
   HIGH-PERFORMANCE PRODUCT CARDS LIST (HORIZONTAL CATALOG STYLE)
   ========================================================================== */
.mp-card-stickers-list,
.mp-card-body-header,
.mp-card-stickers-list,
.mp-card-body-header,
.mp-card-attributes-inline,
.mp-card-options-inline,
.mp-card-delivery-info,
.mp-card-media-dot,
.btn-card-buy-text,
.btn-card-quick-action {
  display: none;
}

.mp-products-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
  contain: layout style;
}

.mp-products-list .mp-product-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: var(--mp-list-card-gap, 16px) !important;
  padding: 14px !important;
  min-height: auto !important;
  width: 100% !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  box-sizing: border-box !important;
}

.mp-products-list .mp-card-stickers-grid {
  display: none;
}

.mp-products-list .mp-card-stickers-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-products-list .mp-card-stickers-list .mp-card-badges {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-products-list .mp-card-body-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
  min-height: 22px;
}

.mp-products-list .mp-card-quick-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.mp-products-list .btn-card-quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 19px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 4px;
  transition: all 0.15s ease;
  line-height: 1;
}

.mp-products-list .btn-card-quick-action:hover {
  color: #ef4444;
}

.mp-products-list .btn-card-quick-action.btn-card-compare:hover {
  color: var(--mp-primary, #8c9d93);
}

.mp-products-list .mp-card-media {
  width: var(--mp-list-media-width, 185px) !important;
  min-width: calc(var(--mp-list-media-width, 185px) - 20px) !important;
  max-width: var(--mp-list-media-width, 185px) !important;
  height: auto !important;
  min-height: auto !important;
  aspect-ratio: 1 / 1 !important;
  align-self: flex-start !important;
  border-radius: var(--mp-radius-md, 6px) !important;
  padding: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.mp-products-list .mp-card-media img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 !important;
}

.mp-products-list .mp-card-media-dot {
  display: none;
}

.mp-products-list .mp-card-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  overflow: visible !important;
}

.mp-products-list .mp-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--mp-text-main, #1e293b) !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.mp-products-list .mp-card-title a {
  color: inherit !important;
}

.mp-products-list .mp-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.mp-products-list .mp-rating-val {
  font-weight: 700;
  color: var(--mp-text-main, #0f172a);
}

.mp-products-list .mp-card-stars {
  color: #f59e0b;
  display: flex;
  gap: 2px;
}

.mp-products-list .mp-rating-reviews {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
}

.mp-card-attributes-inline,
.mp-card-options-inline {
  display: none;
}

.mp-products-list .mp-card-attributes-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 8px !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--mp-text-muted, #64748b) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
}

.mp-products-list .mp-card-attr-item {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.mp-products-list .mp-card-attr-name {
  color: var(--mp-text-muted, #64748b) !important;
  font-weight: 400 !important;
}

.mp-products-list .mp-card-attr-value {
  color: var(--mp-text-main, #1e293b) !important;
  font-weight: 500 !important;
}

.mp-products-list .mp-card-attr-sep {
  display: inline !important;
  color: var(--mp-border-color, #94a3b8) !important;
  margin: 0 4px !important;
}

.mp-products-list .mp-card-overflow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mp-primary, #8c9d93) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.mp-products-list .mp-card-overflow-badge i {
  font-size: 10px;
  color: var(--mp-primary, #8c9d93);
}

.mp-products-list .mp-card-options-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 14px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

.mp-products-list .mp-card-option-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
}

.mp-products-list .mp-card-option-title {
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
}

.mp-products-list .mp-card-option-values {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
  overflow: visible !important;
  white-space: normal !important;
}

.mp-products-list .mp-card-option-chip {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  min-width: auto !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.mp-products-list .mp-card-option-chip:not(:last-child)::after {
  content: ",";
  color: #64748b;
  margin-right: 4px;
}

.mp-products-list .mp-card-option-chip--image {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #cbd5e1 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

.mp-products-list .mp-card-option-chip--image:not(:last-child)::after {
  content: none !important;
}

.mp-products-list .mp-card-option-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.mp-products-list .mp-card-option-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--mp-primary, #8c9d93) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.mp-products-list .mp-card-option-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.mp-products-list .mp-card-option-edit:hover {
  color: var(--mp-primary, #8c9d93) !important;
}

/* Live Price Animation (Zero layout shift, purely visual text pulse) */
.vita-price-flash {
  animation: vita-price-flash-anim 0.35s ease-in-out;
}

@keyframes vita-price-flash-anim {
  0% {
    opacity: 0.4;
    color: var(--mp-primary, #16a34a);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.vita-price-fade {
  animation: vita-price-fade-anim 0.35s ease;
}

@keyframes vita-price-fade-anim {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.mp-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.35;
}

.mp-products-list .mp-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 4px;
}

.mp-products-list .mp-card-footer {
  width: var(--mp-list-footer-width, 220px) !important;
  min-width: calc(var(--mp-list-footer-width, 220px) - 15px) !important;
  max-width: var(--mp-list-footer-width, 220px) !important;
  border-left: 1px solid #f1f5f9 !important;
  padding-left: var(--mp-list-footer-pad, 18px) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.mp-products-list .mp-card-delivery-info,
.mp-products-list .mp-card-footer .mp-card-delivery-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  order: 1 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  margin-bottom: auto !important;
}

.mp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}

.mp-stock-badge--in {
  color: #10b981;
}

.mp-stock-badge--low {
  color: #f59e0b;
}

.mp-stock-badge--out {
  color: #ef4444;
}

.mp-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.mp-products-list .mp-stock-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.mp-card-meta-list {
  display: none;
}

.mp-products-list .mp-card-meta-list {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.mp-meta-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
}

.mp-meta-label {
  color: var(--mp-text-muted, #64748b);
  font-weight: 500;
  font-size: 12px;
  flex-shrink: 0;
}

.mp-meta-value {
  color: var(--mp-text-main, #1e293b);
  font-weight: 600;
  font-size: 12px;
  word-break: break-word;
}

.mp-meta-value a {
  color: var(--mp-text-main, #1e293b);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mp-meta-value a:hover {
  color: var(--mp-primary, #8C9D93);
  text-decoration: underline;
}

.mp-products-list .mp-delivery-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
}

.mp-products-list .mp-card-prices,
.mp-products-list .mp-card-footer .mp-card-prices {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 2px !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.mp-products-list .mp-card-prices .mp-price-current,
.mp-products-list .mp-card-footer .mp-card-prices .mp-price-current {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mp-text-main) !important;
  text-align: left !important;
  margin: 0 !important;
  display: block !important;
}

.mp-products-list .mp-card-prices .mp-price-old,
.mp-products-list .mp-card-footer .mp-card-prices .mp-price-old {
  font-size: 13px !important;
  color: var(--mp-text-muted) !important;
  text-decoration: line-through !important;
  text-align: left !important;
  margin: 0 !important;
  display: block !important;
}

.mp-products-list .mp-card-action-bar,
.mp-products-list .mp-card-footer .mp-card-action-bar {
  width: 100% !important;
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.mp-products-list .mp-card-slide-actions {
  display: none;
}

.mp-products-list .btn-card-buy,
.mp-products-list .mp-card-footer .mp-card-action-bar .btn-card-buy {
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: var(--mp-radius-md, 6px) !important;
  background: var(--mp-buy-bg, #8c9d93) !important;
  color: var(--mp-buy-text, #ffffff) !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.mp-products-list .btn-card-buy:hover,
.mp-products-list .mp-card-footer .mp-card-action-bar .btn-card-buy:hover {
  background: var(--mp-buy-hover-bg, #7A8B81) !important;
}

.mp-products-list .btn-card-buy-text,
.mp-products-list .mp-card-footer .mp-card-action-bar .btn-card-buy .btn-card-buy-text {
  display: inline-block !important;
}

@media (max-width: 991px) and (min-width: 768px) {
  .mp-products-list .mp-card-media {
    width: 160px;
    min-width: 140px;
    max-width: 160px;
  }
  .mp-products-list .mp-card-footer {
    width: 200px;
    min-width: 180px;
    padding-left: 16px;
  }
}

@media (max-width: 767px) {
  .mp-products-list .mp-product-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .mp-products-list .mp-card-media {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .mp-products-list .mp-card-footer {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-left: 0 !important;
    padding-top: 14px !important;
    gap: 12px !important;
  }
}

.mp-product-card {
  background: var(--mp-card-bg, #ffffff);
  border-radius: var(--mp-radius-md, 6px);
  padding: 8px 8px 12px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.mp-product-card:hover {
  border-color: var(--mp-border-hover, #cbd5e1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.mp-card-media {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: var(--mp-radius-sm, 4px);
  margin-bottom: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 !important;
}

.mp-card-badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
}

.mp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--mp-radius-sm, 2px);
  line-height: 1.2;
  white-space: nowrap;
}

.mp-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mp-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #1e293b;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 35px;
  text-decoration: none;
}

.mp-card-title:hover {
  color: var(--mp-primary, #ec1c24);
}

.mp-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.mp-card-stars {
  display: flex;
  gap: 1px;
  color: #f59e0b;
  font-size: 10px;
}

.mp-rating-val {
  font-weight: 700;
  color: var(--mp-text-main);
  margin-left: 2px;
}

.mp-rating-reviews {
  color: #94a3b8;
}

/* Card Bottom / Footer (Price on Left, Actions on Right) */
.mp-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.mp-card-delivery-info {
  width: 100%;
  flex: 1 0 100%;
  margin-bottom: 2px;
}

.mp-card-prices {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  margin-right: auto;
  margin-left: 0;
  min-height: 38px;
}

.mp-price-old {
  font-size: 11px;
  color: var(--mp-text-muted);
  text-decoration: line-through;
  line-height: 1.1;
  margin-bottom: 2px;
  text-align: left;
  margin-right: auto;
  margin-left: 0;
}

.mp-price-current {
  font-size: 17px;
  font-weight: 700;
  color: var(--mp-text-main);
  letter-spacing: -0.3px;
  line-height: 1.1;
  text-align: left;
  margin-right: auto;
  margin-left: 0;
}

.mp-price-special {
  color: var(--mp-primary, #8C9D93);
}

/* Action Group (Slideout Wishlist / Compare + Buy Button) */
.mp-card-action-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.mp-card-slide-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (min-width: 992px) {
  .mp-card-slide-actions {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-right: 6px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    background: var(--mp-card-bg, rgba(255, 255, 255, 0.96));
    padding: 2px;
    border-radius: var(--mp-radius-md, 6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mp-product-card:hover .mp-card-slide-actions,
  .mp-card-action-bar:hover .mp-card-slide-actions,
  .mp-card-slide-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }
}

.btn-card-action {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--mp-radius-md, 4px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  background: var(--mp-card-bg, #ffffff);
  color: var(--mp-text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-card-wishlist {
  background: var(--mp-wishlist-bg, #ffffff);
  border: 1px solid var(--mp-wishlist-border, #e2e8f0);
  color: var(--mp-wishlist-icon, #64748b);
}

.btn-card-wishlist:hover,
.btn-card-wishlist.active,
.btn-card-wishlist.mp-wishlisted {
  background: var(--mp-wishlist-hover-bg, #fef2f2);
  border-color: var(--mp-wishlist-hover-border, #ef4444);
  color: var(--mp-wishlist-hover-icon, #ef4444);
}

.btn-card-compare {
  background: var(--mp-compare-bg, #ffffff);
  border: 1px solid var(--mp-compare-border, #e2e8f0);
  color: var(--mp-compare-icon, #64748b);
}

.btn-card-compare:hover,
.btn-card-compare.active,
.btn-card-compare.mp-compared {
  background: var(--mp-compare-hover-bg, #f1f5f9);
  border-color: var(--mp-compare-hover-border, #8c9d93);
  color: var(--mp-compare-hover-icon, #8c9d93);
}

/* Compact Square Buy Button */
.btn-card-buy {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--mp-buy-bg, var(--mp-primary, #ec1c24));
  color: var(--mp-buy-text, #ffffff);
  border: none;
  border-radius: var(--mp-radius-md, 4px);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(236, 28, 36, 0.2);
}

.btn-card-buy img,
.btn-card-buy svg,
.btn-card-buy-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.btn-card-buy:hover {
  background: var(--mp-buy-hover-bg, var(--mp-primary-hover, #d01017));
  color: var(--mp-buy-hover-text, #ffffff);
}

.btn-card-buy.btn-card-buy--upcoming {
  background: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-card-buy.btn-card-buy--compact .btn-card-buy-text {
  display: none !important;
}

.mp-btn-buy.mp-btn-buy--compact span {
  display: none !important;
}

.mp-fl-buy.mp-fl-buy--compact span {
  display: none !important;
}

/* ==========================================================================
   CLEAN LIGHT-THEMED LIGHTBOX WITH IN-STAGE TOP-LEFT INFO BADGE
   ========================================================================== */
.mp-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
}

.mp-lightbox.open {
  display: flex;
  flex-direction: column;
}

.mp-lb-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mp-lb-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 100000;
}

.mp-lb-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100002;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  flex-shrink: 0;
}

.mp-lb-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 60px);
}

.mp-lb-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mp-lb-counter-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.mp-lb-close {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.mp-lb-close svg {
  display: block !important;
  margin: auto !important;
  pointer-events: none !important;
}

.mp-lb-close:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.08);
}

.mp-lb-stage-wrapper {
  flex: 1;
  width: 100%;
  height: calc(100% - 140px);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mp-lb-parallax-dots {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 160%;
  height: 140%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

.mp-lb-parallax-grid {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 160%;
  height: 140%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.mp-lb-parallax-custom-img {
  position: absolute;
  top: -15%;
  left: -25%;
  width: 150%;
  height: 130%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6) saturate(0.85);
  pointer-events: none;
  z-index: 0;
}

.mp-lb-main-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.mp-lb-main-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mp-lb-main-swiper .swiper-zoom-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.mp-lb-main-swiper .swiper-zoom-container img {
  max-width: 90vw;
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--mp-radius-lg, 14px);
  background: #ffffff;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px -12px rgba(0, 0, 0, 0.65);
  user-select: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mp-lb-prev,
.mp-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  z-index: 100010 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box !important;
}

.mp-lb-prev svg,
.mp-lb-next svg {
  display: block !important;
  margin: auto !important;
  pointer-events: none !important;
}

.mp-lb-prev { left: 24px; }
.mp-lb-next { right: 24px; }

.mp-lb-prev:hover,
.mp-lb-next:hover {
  background: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.mp-lb-prev:active,
.mp-lb-next:active {
  transform: translateY(-50%) scale(0.95);
}

.mp-lb-prev.swiper-button-disabled,
.mp-lb-next.swiper-button-disabled {
  opacity: 0.25 !important;
  pointer-events: none;
}

.mp-lb-thumbs-wrap {
  height: 84px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  box-sizing: border-box;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  flex-shrink: 0;
  z-index: 100002;
}

.mp-lb-thumbs-swiper {
  width: auto;
  max-width: 100%;
  height: 100%;
}

.mp-lb-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer !important;
  background: #ffffff;
  padding: 3px;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp-lb-thumb:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.mp-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
}

.mp-lb-thumb.swiper-slide-thumb-active,
.mp-lb-thumb.active {
  opacity: 1 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: scale(1.08) !important;
}

/* Light mode support */
.mp-lightbox--light .mp-lb-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
}
.mp-lightbox--light .mp-lb-title {
  color: #0f172a;
  text-shadow: none;
}
.mp-lightbox--light .mp-lb-counter-tag {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}
.mp-lightbox--light .mp-lb-close,
.mp-lightbox--light .mp-lb-prev,
.mp-lightbox--light .mp-lb-next {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}
.mp-lightbox--light .mp-lb-thumbs-wrap {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
}
.mp-lightbox--light .mp-lb-thumb.swiper-slide-thumb-active,
.mp-lightbox--light .mp-lb-thumb.active {
  border-color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 2px rgba(140, 157, 147, 0.4);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.tech-footer {
  background-color: var(--vita-footer-bg, var(--mp-bg-surface));
  padding-top: 3.5rem;
  padding-bottom: 2rem;
  margin-top: 4rem;
  border-top: 1px solid var(--vita-footer-border, var(--mp-border-color));
  color: var(--vita-footer-text, var(--mp-text-muted));
}

.tech-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px 48px;
  margin-bottom: 3rem;
}

.tech-footer-title {
  font-weight: 700;
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--vita-footer-title, var(--mp-text-main));
  letter-spacing: -0.01em;
}

.tech-footer-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vita-footer-text, var(--mp-text-muted));
  margin-top: 0;
  margin-bottom: 0;
}

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

.tech-footer-list li {
  margin-bottom: 10px;
}

.tech-footer-list a {
  color: var(--vita-footer-text, var(--mp-text-muted));
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tech-footer-list a:hover {
  color: var(--vita-footer-link-hover, var(--mp-primary));
}

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

.tech-footer-contacts-list li {
  margin-bottom: 10px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-footer-contact-item {
  color: var(--vita-footer-text, var(--mp-text-muted));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
}

.tech-footer-contact-item:hover {
  color: var(--vita-footer-link-hover, var(--mp-primary));
}

.tech-footer-schedule {
  color: var(--vita-footer-text, var(--mp-text-muted));
  font-size: 13px;
}

.tech-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.tech-social-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mp-radius-md, 6px);
  background: var(--mp-bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vita-footer-text, var(--mp-text-muted));
  transition: all 0.2s ease;
  text-decoration: none;
  border: 1px solid var(--vita-footer-border, var(--mp-border-color));
}

.tech-social-icon:hover {
  background: var(--vita-footer-link-hover, var(--mp-primary));
  border-color: var(--vita-footer-link-hover, var(--mp-primary));
  color: #ffffff;
  transform: translateY(-2px);
}

.mp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--vita-footer-border, var(--mp-border-color));
  font-size: 13px;
  color: var(--vita-footer-bottom-text, var(--mp-text-muted));
  flex-wrap: wrap;
  gap: 16px;
}

.mp-payment-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  letter-spacing: 0.5px;
  border: 1px solid var(--mp-border-color);
  background: #ffffff;
  color: #0f172a;
}

.mp-payment-mir {
  color: #0b9e5c;
}

.mp-payment-sbp {
  color: #1a56db;
}

.mp-payment-visa {
  font-size: 24px;
  color: #1a1f71;
}

.mp-payment-mastercard {
  font-size: 24px;
  color: #eb001b;
}

/* Mobile Drawer Off-Canvas Styles */
.mp-mobile-hamburger-btn {
  display: none;
  background: var(--vita-mobile-header-bg);
  border: 1px solid var(--vita-mobile-border);
  color: var(--vita-mobile-header-text);
  width: 40px;
  height: 40px;
  border-radius: var(--mp-radius-md);
  font-size: 18px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Mobile Bottom Navigation Bar */
.mp-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--vita-mobile-nav-bg);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  z-index: 1001;
  border-top: 1px solid var(--vita-mobile-border);
}

.mp-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--vita-mobile-nav-text);
  flex: 1;
}

.mp-mobile-nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

.mp-mobile-nav-item.active,
.mp-mobile-nav-item:hover {
  color: var(--vita-mobile-nav-active);
}

@media (max-width: 768px) {
  .mp-header-top {
    display: none !important;
  }

  .mp-mobile-hamburger-btn {
    display: flex;
  }

  .mp-header-actions {
    display: none !important;
  }

  .mp-header-main {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 0;
    padding: 10px 0;
  }

  .mp-search-form {
    order: 3;
    width: 100%;
    margin: 0;
  }

  .mp-search-input {
    height: 40px;
    padding-right: 80px;
  }

  .mp-search-btn {
    padding: 0 16px;
  }

  .mp-mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .mp-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }

  .mp-product-card {
    padding: 6px 6px 10px 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mp-card-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    height: 32px !important;
    margin-bottom: 4px !important;
  }

  /* Hide attributes & options on mobile cards to keep cards clean and prevent layout blowup */
  .mp-card-attributes-inline,
  .mp-card-attributes,
  .mp-card-attr-chip,
  .mp-card-options-inline,
  .mp-card-delivery-info {
    display: none !important;
  }

  /* Hide View Switcher (Grid/List) on mobile devices */
  .mp-view-switcher {
    display: none !important;
  }

  /* Mobile Lightbox Optimizations */
  .mp-lb-header {
    height: 48px !important;
    padding: 0 12px !important;
  }

  .mp-lb-title {
    font-size: 13px !important;
  }

  .mp-lb-counter-tag {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  .mp-lb-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 20px !important;
  }

  .mp-lb-stage-wrapper {
    padding: 50px 6px 12px !important;
  }

  .mp-lb-stage img {
    max-width: 96vw !important;
    max-height: 80vh !important;
    padding: 6px !important;
    border-radius: 6px !important;
  }

  .mp-lb-prev,
  .mp-lb-next {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .mp-lb-prev { left: 8px !important; }
  .mp-lb-next { right: 8px !important; }
}

/* ==========================================================================
   COMPONENT & UTILITY CLASSES
   (extracted from inline template styles)
   ========================================================================== */

/* --- Page shells --- */
.mp-page-top { margin-top: 20px; }
.mp-breadcrumb {
  background: transparent;
  padding: 0 0 16px 0;
  margin: 0;
  font-size: 13px;
}
.mp-h1 { font-size: 26px; font-weight: 800; margin-bottom: 16px; }
.mp-chips-mb { margin-bottom: 20px; }
.mp-pagination-mt { margin-top: 30px; }
.mp-results-text { font-size: 13px; color: var(--mp-text-muted); }

/* --- Card panels (PDP / category blocks) --- */
.mp-panel {
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-sm);
  border: 1px solid var(--mp-border-color);
  margin-bottom: 24px;
}
.mp-panel-lg { padding: 24px; }
.mp-panel-compact { padding: 20px 24px; }
.mp-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text-main);
  margin-top: 0;
  margin-bottom: 12px;
}
.mp-block-title-lg {
  font-size: 18px;
  font-weight: 700;
  color: var(--mp-text-main);
  margin-top: 0;
  margin-bottom: 20px;
}

/* --- Header extras --- */
.mp-top-left { display: flex; align-items: center; gap: 16px; }
.mp-top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mp-top-link-item {
  color: var(--vita-topbar-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.mp-top-link-item:hover { color: var(--vita-topbar-link-hover); }
.mp-top-note { font-size: 12px; color: var(--mp-text-muted); }
.mp-logo-image-link { display: inline-flex; align-items: center; max-width: 100%; }
.mp-logo-image-link img { display: block; width: auto; height: auto; max-width: 100%; max-height: 50px; object-fit: contain; }
.mp-logo { text-decoration: none; }
.mp-logo-text { display: inline-flex; align-items: center; gap: var(--vita-logo-gap, 10px); }
.mp-logo-text--icon-right { flex-direction: row-reverse; }
.mp-logo-text--icon-top { flex-direction: column; align-items: var(--vita-logo-align-items, center); }
.mp-logo-text-icon { font-size: var(--vita-logo-icon-size, 26px); color: var(--vita-logo-icon, var(--mp-primary)); flex-shrink: 0; }
.mp-logo-text-icon-img { width: var(--vita-logo-icon-size, 26px); height: var(--vita-logo-icon-size, 26px); flex: 0 0 auto; }
.mp-logo-text-col { display: flex; flex-direction: column; align-items: var(--vita-logo-align-items, flex-start); line-height: var(--vita-logo-tagline-line-height, 1.15); text-align: var(--vita-logo-align, left); }
.mp-logo-text-title {
  font-weight: var(--vita-logo-title-weight, 700);
  font-style: var(--vita-logo-title-style, normal);
  font-size: var(--vita-logo-title-size, 24px);
  line-height: var(--vita-logo-title-line-height, 1.15);
  color: var(--vita-logo-text, var(--mp-text-main));
  letter-spacing: var(--vita-logo-title-tracking, -0.5px);
  text-transform: var(--vita-logo-title-transform, none);
  text-shadow: var(--vita-logo-title-shadow, none);
  font-family: var(--vita-logo-font, inherit);
}
.mp-logo-tagline {
  font-size: var(--vita-logo-tagline-size, 12px);
  font-weight: var(--vita-logo-tagline-weight, 400);
  font-style: var(--vita-logo-tagline-style, normal);
  line-height: var(--vita-logo-tagline-line-height, 1.15);
  letter-spacing: var(--vita-logo-tagline-tracking, 0);
  color: var(--vita-logo-tagline, var(--vita-header-muted, var(--mp-text-muted)));
  margin-top: var(--vita-logo-tagline-gap, 2px);
}
@media (max-width: 767px) {
  .mp-logo-text-title { font-size: var(--vita-logo-title-size-mobile, var(--vita-logo-title-size, 24px)); }
  .mp-logo-tagline { font-size: var(--vita-logo-tagline-size-mobile, var(--vita-logo-tagline-size, 12px)); }
  .mp-logo-text-icon { font-size: var(--vita-logo-icon-size-mobile, var(--vita-logo-icon-size, 26px)); }
  .mp-logo-text-icon-img { width: var(--vita-logo-icon-size-mobile, var(--vita-logo-icon-size, 26px)) !important; height: var(--vita-logo-icon-size-mobile, var(--vita-logo-icon-size, 26px)) !important; }
  .mp-logo-text[data-vita-hide-tagline-mobile="1"] .mp-logo-tagline { display: none; }
}
html[data-theme="dark"] .mp-logo-text[data-vita-dark-colors="1"] { --vita-logo-text: var(--vita-logo-text-dark, #FFFFFF); --vita-logo-icon: var(--vita-logo-icon-dark, var(--mp-primary)); --vita-logo-tagline: var(--vita-logo-tagline-dark, var(--vita-dark-muted, #9E99A6)); }
.mp-vita-section-title--info { margin-top: 20px; }
.mp-vita-panel-bottom .mp-header-pill-switch { flex: 1; justify-content: center; }
.mp-badge-counter--mobile { top: -6px; right: -8px; }
.mp-mobile-cart-icon { position: relative; }

/* --- Category sort bar --- */
.mp-sortbar {
  background: #ffffff;
  border-radius: var(--mp-radius-md, 4px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  padding: 10px 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mp-sortbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mp-sortbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.mp-sortbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-sortbar-label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin: 0;
}

.mp-select-clean {
  border-radius: var(--mp-radius-md, 4px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  height: 34px;
  font-size: 13px;
  color: #1e293b;
  background-color: #f8fafc;
}

.mp-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f8fafc;
  padding: 3px;
  border-radius: var(--mp-radius-md, 4px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
}

.mp-btn-view {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mp-radius-sm, 2px);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.mp-btn-view:hover {
  color: var(--mp-primary, #8c9d93);
  background: #ffffff;
}

.mp-btn-view.active {
  color: #ffffff;
  background: var(--mp-primary, #8c9d93);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Pagination & Load More Bar --- */
.mp-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 32px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: var(--mp-radius-md, 4px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  flex-wrap: wrap;
}

.mp-pagination-bar-left {
  display: flex;
  align-items: center;
}

.mp-pagination-bar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.mp-btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid var(--mp-border-color, #cbd5e1);
  border-radius: var(--mp-radius-md, 4px);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.mp-btn-load-more:hover {
  background: #f8fafc;
  border-color: var(--mp-primary, #8c9d93);
  color: var(--mp-primary, #8c9d93);
}

.mp-btn-load-more.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.mp-btn-load-more.is-loading .fa-refresh {
  animation: fa-spin 1s infinite linear;
}

.mp-pagination-bar .pagination {
  margin: 0;
}

.mp-pagination-bar .pagination > li > a,
.mp-pagination-bar .pagination > li > span {
  border-radius: var(--mp-radius-sm, 3px) !important;
  margin: 0 2px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  color: #475569;
}

.mp-pagination-bar .pagination > .active > a,
.mp-pagination-bar .pagination > .active > span {
  background-color: var(--mp-primary, #8c9d93);
  border-color: var(--mp-primary, #8c9d93);
  color: #ffffff;
}

@media (max-width: 576px) {
  .mp-pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mp-pagination-bar-left,
  .mp-btn-load-more {
    width: 100%;
  }
  .mp-pagination-bar-right {
    margin-left: 0;
    justify-content: center;
  }
}



/* --- PDP Product Gallery Layouts --- */
.mp-gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mp-gallery-layout-left {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mp-gallery-layout-bottom,
.mp-gallery-layout-right {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mp-gallery-thumbs-col {
  width: 86px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mp-gallery-thumbs-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mp-gallery-thumbs-vertical {
  height: 420px;
  max-height: 420px;
}

.mp-gallery-thumbs-vertical .swiper-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 0;
  box-sizing: border-box;
}

.mp-gallery-thumbs-horizontal {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.mp-gallery-thumbs-horizontal .swiper-wrapper {
  padding: 0 3px;
  box-sizing: border-box;
}

.mp-gallery-thumbs-bottom-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 44px;
}

/* Thumbnail Navigation Arrows */
.mp-thumbs-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  border: 1.5px solid var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #1e293b) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.mp-thumbs-nav:hover {
  background: var(--mp-primary-light, #F2F6F4) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: var(--mp-primary, #8C9D93) !important;
  transform: scale(1.05) !important;
}

.mp-thumbs-nav-prev {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

.mp-thumbs-nav-next {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

.mp-thumbs-nav-up {
  width: 100% !important;
  height: 24px !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
  font-size: 11px !important;
}

.mp-thumbs-nav-down {
  width: 100% !important;
  height: 24px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  font-size: 11px !important;
}

/* Hide arrows while all thumbnails fit (Swiper locks navigation) */
.mp-thumbs-nav.swiper-button-lock {
  display: none !important;
}

.mp-thumb-slide {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-gallery-thumbs-vertical .mp-thumb-slide {
  width: 76px !important;
  height: 76px !important;
}

.mp-gallery-thumbs-horizontal .mp-thumb-slide {
  width: 76px !important;
  height: 76px !important;
}

.mp-gallery-thumbs-scrollbar {
  position: absolute;
  z-index: 10;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  pointer-events: none;
}

.mp-gallery-thumbs-vertical .mp-gallery-thumbs-scrollbar {
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 3.5px;
}

.mp-gallery-thumbs-horizontal .mp-gallery-thumbs-scrollbar {
  bottom: -6px;
  left: 10px;
  right: 10px;
  height: 3.5px;
}

.mp-gallery-thumbs-scrollbar .swiper-scrollbar-drag {
  background: var(--mp-primary, #8C9D93);
  border-radius: 999px;
  opacity: 0.8;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.mp-main-image {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 480px;
  max-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mp-card-bg, #ffffff);
  background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-lg, 14px);
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  padding: 0;
}
.mp-main-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}
.mp-main-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.mp-main-image a:hover img {
  transform: scale(1.02);
}
.mp-gallery-zoom-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-text-main, #1e293b);
  font-size: 15px;
  pointer-events: none;
  transition: transform 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
  z-index: 5;
}
.mp-main-image a:hover .mp-gallery-zoom-badge {
  transform: scale(1.08);
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
}
[data-theme="dark"] .mp-gallery-zoom-badge {
  background: rgba(44, 41, 48, 0.85);
  border-color: rgba(80, 74, 89, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--mp-text-body, var(--vita-dark-text));
}
[data-theme="dark"] .mp-main-image a:hover .mp-gallery-zoom-badge {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

.mp-thumb-item {
  border: 1.5px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px !important;
  height: 76px !important;
  background: var(--mp-card-bg, #ffffff);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
}
.mp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.mp-thumb-item.active {
  border-color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 1.5px var(--mp-primary, #8C9D93);
}
.mp-thumb-item:hover {
  border-color: var(--mp-primary, #8C9D93);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .mp-gallery-layout-left {
    flex-direction: column-reverse;
  }
  .mp-gallery-thumbs-col {
    width: 100%;
  }
  .mp-gallery-thumbs-vertical {
    height: auto;
    max-height: none;
    padding-top: 12px;
  }
  .mp-gallery-thumbs-vertical .swiper-wrapper {
    flex-direction: row !important;
  }
  .mp-gallery-thumbs-vertical .mp-thumb-slide {
    margin-bottom: 0;
    margin-right: 10px;
  }
  .mp-main-image {
    height: 380px;
    max-height: 380px;
  }
}

@media (max-width: 767px) {
  .mp-main-image {
    height: 320px;
    max-height: 320px;
  }

  /* Thumbs row under the main image: arrows sit LEFT/RIGHT of the row
     (not above/below) and only render while the thumbs overflow. */
  .mp-gallery-layout-left .mp-gallery-thumbs-col {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .mp-gallery-layout-left .mp-gallery-thumbs-col .mp-gallery-thumbs-swiper {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mp-gallery-layout-left .mp-gallery-thumbs-col .mp-thumbs-nav-up,
  .mp-gallery-layout-left .mp-gallery-thumbs-col .mp-thumbs-nav-down {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    margin: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  .mp-gallery-layout-left .mp-thumbs-nav-up .fa:before {
    content: "\f053";
  }

  .mp-gallery-layout-left .mp-thumbs-nav-down .fa:before {
    content: "\f054";
  }

  .mp-gallery-layout-left .mp-gallery-thumbs-col:not(.vita-thumbs-overflow) .mp-thumbs-nav {
    display: none !important;
  }

  /* Real overflow wins over Swiper's stale lock snapshot */
  .mp-gallery-layout-left .mp-gallery-thumbs-col.vita-thumbs-overflow .mp-thumbs-nav {
    display: inline-flex !important;
  }
}

/* --- PDP brand block --- */
.mp-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.mp-brand-info { display: flex; align-items: center; gap: 16px; }
.mp-brand-logo { max-height: 40px; width: auto; object-fit: contain; }
.mp-brand-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mp-primary-light);
  color: var(--mp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.mp-brand-label { font-size: 12px; color: var(--mp-text-muted); }
.mp-brand-name { font-size: 16px; font-weight: 700; color: var(--mp-text-main); }
.mp-brand-all-btn {
  border-radius: var(--mp-radius-pill);
  font-weight: 600;
  padding: 6px 16px;
}

/* --- PDP tabs --- */
.mp-tabs-nav { border-bottom: 2px solid var(--mp-border-color); font-weight: 700; }
.mp-tabs-content { padding-top: 20px; line-height: 1.6; color: var(--mp-text-body); }
.mp-spec-cell { width: 30%; }

/* --- PDP trails & tags --- */
.mp-trails-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mp-trail-item { display: flex; align-items: center; gap: 8px; color: var(--mp-text-muted); }
.mp-trail-item i { color: var(--mp-primary); }
.mp-trail-link { color: var(--mp-primary); font-weight: 500; }
.mp-tags-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-tag-chip {
  background: var(--mp-bg-topbar);
  color: var(--mp-text-main);
  border: 1px solid var(--mp-border-color);
  padding: 6px 14px;
  border-radius: var(--mp-radius-pill);
  font-size: 12px;
  font-weight: 500;
  transition: var(--mp-transition);
}
.mp-tag-chip:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
.mp-related-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0 0;
  width: 100%;
}

@media (max-width: 1200px) {
  .mp-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 992px) {
  .mp-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .mp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

.mp-related-grid > .mp-product-card {
  width: 100%;
  max-width: 100%;
  min-height: auto;
}

/* --- Unified Vita Carousel & Related Products Slider --- */
.vita-all-in-one--carousel,
.mp-related-carousel-wrap {
  position: relative;
  width: 100%;
}

.vita-all-in-one__carousel,
.mp-related-carousel-wrap {
  position: relative;
}

.vita-all-in-one__viewport,
.mp-related-swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.vita-all-in-one__viewport .swiper-wrapper,
.mp-related-swiper .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.vita-all-in-one__slide,
.mp-related-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  height: auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.vita-all-in-one__slide .mp-product-card,
.mp-related-slide .mp-product-card {
  height: 100%;
  width: 100%;
  max-width: 100%;
}

.mp-module-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.vita-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-text-main, #1e293b);
}

.mp-module-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
}

.mp-module-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mp-module-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  background: #ffffff;
  color: var(--mp-text-main, #1e293b);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.mp-module-btn:hover,
.mp-module-btn:focus {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
  transform: scale(1.05);
  outline: none;
}

.mp-module-btn.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .mp-module-btn {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .mp-module-btn:hover {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

[data-theme="dark"] .mp-module-btn.swiper-button-disabled {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #475569 !important;
}

.vita-all-in-one__scrollbar,
.mp-related-scrollbar,
.vita-checkout-crosssell__scrollbar {
  background: var(--mp-border-color, #e2e8f0);
  height: 4px;
  margin: 24px auto 0;
  position: relative;
  width: 100%;
  border-radius: 999px;
  overflow: visible;
  transition: background 0.2s ease;
  cursor: pointer;
}

.vita-all-in-one__scrollbar .swiper-scrollbar-drag,
.mp-related-scrollbar .swiper-scrollbar-drag,
.vita-checkout-crosssell__scrollbar .swiper-scrollbar-drag {
  background: var(--mp-primary, #8C9D93);
  cursor: grab;
  height: 6px;
  margin-top: -1px;
  position: relative;
  top: 0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(140, 157, 147, 0.4);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vita-all-in-one__scrollbar:hover .swiper-scrollbar-drag,
.mp-related-scrollbar:hover .swiper-scrollbar-drag,
.vita-checkout-crosssell__scrollbar:hover .swiper-scrollbar-drag {
  background: var(--mp-primary-hover, #7A8B81);
  transform: scaleY(1.3);
  box-shadow: 0 3px 12px rgba(122, 139, 129, 0.55);
}

.vita-all-in-one__scrollbar .swiper-scrollbar-drag:active,
.mp-related-scrollbar .swiper-scrollbar-drag:active,
.vita-checkout-crosssell__scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing;
  transform: scaleY(1.4);
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.3), 0 4px 14px rgba(122, 139, 129, 0.6);
}

[data-theme="dark"] .vita-all-in-one__scrollbar,
[data-theme="dark"] .mp-related-scrollbar,
[data-theme="dark"] .vita-checkout-crosssell__scrollbar {
  background: rgba(51, 65, 85, 0.7);
}

[data-theme="dark"] .vita-all-in-one__scrollbar .swiper-scrollbar-drag,
[data-theme="dark"] .mp-related-scrollbar .swiper-scrollbar-drag,
[data-theme="dark"] .vita-checkout-crosssell__scrollbar .swiper-scrollbar-drag {
  background: var(--mp-primary, #8C9D93);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .vita-all-in-one__arrow {
    display: none;
  }
}

/* --- PDP sticky buy box --- */
.mp-pdp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mp-text-main);
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.35;
}
.mp-pdp-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
}
.mp-pdp-sku-badge {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  background: var(--mp-bg-topbar, #f8fafc);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
}
.mp-pdp-sku-badge strong {
  color: var(--mp-text-main, #1e293b);
}
.mp-pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mp-text-muted, #64748b);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.mp-pdp-rating:hover {
  color: var(--mp-primary, #8C9D93);
}
.mp-pdp-rating i {
  color: var(--mp-star-color, #f59e0b);
}

.mp-pdp-props-block {
  margin-bottom: 16px;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.mp-pdp-prop-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.45;
  padding: 4px 0;
}
.mp-pdp-prop-row:not(:last-child) {
  border-bottom: 1px dashed var(--mp-border-color, rgba(226, 232, 240, 0.7));
}
.mp-pdp-prop-name {
  color: var(--mp-text-muted, #64748b);
  font-weight: 500;
  flex-shrink: 0;
}
.mp-pdp-prop-dots {
  flex: 1;
  border-bottom: 1px dotted var(--mp-border-color, #cbd5e1);
  margin: 0 6px 3px 6px;
  display: block;
}
.mp-pdp-prop-val {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
  text-align: right;
  flex-shrink: 0;
  max-width: 60%;
}
.mp-pdp-prop-link {
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
  font-weight: 600;
}
.mp-pdp-prop-link:hover {
  text-decoration: underline;
}
.mp-pdp-props-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 14px;
}
.mp-pdp-prop-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mp-text-muted, #64748b);
  background: var(--mp-bg-topbar, #f8fafc);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
}
.mp-pdp-prop-chip strong {
  color: var(--mp-text-main, #1e293b);
  font-weight: 600;
}
.mp-pdp-prop-chip .mp-pdp-prop-name {
  color: var(--mp-text-muted, #64748b);
}
.mp-pdp-prop-chip .mp-pdp-prop-link {
  font-weight: 600;
}
.mp-pdp-prop-chip .vita-copy-btn {
  opacity: 1;
  color: #94A3B8;
  font-size: 11px;
  padding: 0 0 0 2px;
}
.mp-pdp-prop-chip .vita-copy-btn:hover {
  color: var(--mp-primary, #8C9D93);
}
.mp-price-box {
  background: var(--mp-bg-topbar);
  border-radius: var(--mp-radius-md);
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--mp-border-color);
}
.mp-price-now { font-size: 28px; font-weight: 800; color: var(--mp-text-main); line-height: 1; }
.mp-price-now--special { color: var(--mp-badge-discount-bg); }
.mp-price-was {
  font-size: 14px;
  color: var(--mp-text-light);
  text-decoration: line-through;
  margin-top: 4px;
}
.mp-availability {
  font-size: 12px;
  color: var(--mp-badge-express-bg);
  font-weight: 600;
  margin-top: 8px;
}
.mp-options { margin-bottom: 16px; }
.mp-option-group { margin-bottom: 14px; }
.mp-option-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--mp-text-main);
  margin-bottom: 6px;
  display: block;
}
.mp-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-option-btn {
  border: 1px solid var(--mp-border-color);
  background: #ffffff;
  color: var(--mp-text-main);
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  margin: 0;
  transition: var(--mp-transition);
}
.mp-option-btn:hover { border-color: var(--mp-primary); }
.mp-option-btn.selected {
  border: 2px solid var(--mp-primary);
  color: var(--mp-primary);
}
.mp-option-btn input[type="radio"] { display: none; }
.mp-qty-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mp-qty-label { font-size: 13px; font-weight: 600; color: var(--mp-text-muted); }
.mp-qty-stepper {
  display: inline-flex;
  border: 1px solid var(--mp-border-hover);
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
  align-items: center;
  background: var(--mp-card-bg, #ffffff);
}
.mp-qty-btn {
  width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: var(--mp-text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.mp-qty-btn:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-primary);
}
.mp-qty-input::-webkit-outer-spin-button,
.mp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mp-qty-input {
  -moz-appearance: textfield;
  width: 64px;
  min-width: 56px;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--mp-text-main);
  background: transparent;
  outline: none;
  padding: 0 4px;
}
.mp-buy-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.mp-btn-primary-lg {
  background: var(--mp-primary);
  color: var(--mp-text-inverse);
  font-weight: 600;
  font-size: 15px;
  height: 46px;
  border-radius: 8px;
  width: 100%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--mp-transition);
}
.mp-btn-primary-lg:hover {
  background: var(--mp-primary-hover);
  color: var(--mp-text-inverse);
}
.mp-btn-dark {
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  height: 42px;
  border-radius: 8px;
  width: 100%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--mp-transition);
}
.mp-btn-dark:hover {
  background: #1f2937;
  color: #ffffff;
}
.mp-extras-row {
  display: flex;
  justify-content: space-around;
  padding-top: 14px;
  border-top: 1px solid var(--mp-border-color);
  font-size: 13px;
  color: var(--mp-text-muted);
}
.mp-extras-row a { display: inline-flex; align-items: center; gap: 6px; }
.mp-extras-row a:hover { color: var(--mp-primary); }
.mp-extras-row .fa-heart-o { color: var(--mp-accent); }
.mp-extras-row .fa-exchange { color: var(--mp-primary); }

/* --- Module blocks (latest / featured / bestseller) --- */
.mp-module-block { margin-top: 24px; margin-bottom: 24px; }
.mp-module-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mp-module-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-module-link {
  color: var(--mp-primary);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mp-module-link:hover { color: var(--mp-primary-hover); }
.mp-icon-orange { color: #ff922b; }
.mp-icon-blue { color: #005bff; }

/* --- Flash deals (special module) --- */
.mp-flash-deals {
  margin: 24px 0;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%);
  border: 1px solid #fecaca;
  border-radius: var(--mp-radius-lg);
  padding: 20px;
}
.mp-flash-deals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.mp-flash-title {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-accent);
}
.mp-timer-box {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-muted);
}
.mp-timer-digit {
  background: #111827;
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}
.mp-flash-deals .mp-products-grid { margin: 0; }

/* --- Slideshow with Parallax --- */
.mp-slideshow {
  position: relative;
  border-radius: var(--mp-radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--mp-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.06));
  margin-bottom: 24px;
}
.mp-slideshow-slide {
  position: relative;
  overflow: hidden;
  border-radius: var(--mp-radius-lg, 12px);
}
.mp-slide-link {
  display: block;
  position: relative;
  text-decoration: none;
  width: 100%;
  height: 100%;
}
.mp-slide-bg {
  width: 120%;
  height: 100%;
  position: relative;
  left: -10%;
}
.mp-slide-img {
  width: 100%;
  height: auto;
  border-radius: var(--mp-radius-lg, 12px);
  display: block;
}
.mp-slide-content {
  position: absolute;
  bottom: 24px;
  left: 28px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.mp-slide-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mp-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: var(--mp-text-main, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  padding: 0;
}
.mp-slideshow:hover .mp-slideshow-nav {
  opacity: 1;
}
.mp-slideshow-nav--prev { left: 16px; }
.mp-slideshow-nav--next { right: 16px; }
.mp-slideshow-nav:hover {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
}
.mp-slideshow-nav:before,
.mp-slideshow-nav:after,
.swiper-button-prev:before,
.swiper-button-next:before {
  display: none !important;
  content: "" !important;
}

/* Prevent opencart.css from distorting swiper viewports */
.swiper-viewport {
  margin: 0 0 24px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Brands carousel styling */
.mp-brands-section {
  padding: 12px 0 20px;
  margin-bottom: 24px;
}

.mp-brands-swiper {
  padding: 6px 0;
}

.mp-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  height: 72px;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.mp-brand-item:hover {
  border-color: var(--mp-primary, #8C9D93);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.mp-brand-img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.mp-brand-item:hover .mp-brand-img {
  filter: grayscale(0%);
  opacity: 1;
}

[data-theme="dark"] .mp-brand-item {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .mp-brand-img {
  filter: grayscale(100%) brightness(1.6);
  opacity: 0.8;
}

[data-theme="dark"] .mp-brand-item:hover .mp-brand-img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* --- Footer extras --- */
.mp-footer-top-row { margin-bottom: 3rem; }
.mp-footer-brand-title {
  font-weight: 800;
  font-size: 20px;
  color: var(--mp-primary);
  margin-bottom: 12px;
}
.mp-footer-about {
  font-size: 13px;
  color: var(--mp-text-muted);
  max-width: 320px;
  margin-bottom: 16px;
}
.mp-footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--mp-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}
.mp-footer-copyright { color: var(--mp-text-muted); }
.mp-payment-icons { display: flex; align-items: center; gap: 16px; }
.mp-payment-icons i { font-size: 26px; }
.mp-payment-visa { color: #1a1f71; }
.mp-payment-mastercard { color: #eb001b; }
.mp-payment-paypal { color: #003087; }

/* --- Lightbox extras --- */
.mp-lb-title { font-weight: 600; color: var(--mp-text-main); }
.mp-lb-price { color: var(--mp-accent); margin-left: 6px; }

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.mp-toast-container {
  position: fixed;
  top: auto;
  bottom: 24px;
  right: 24px;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.mp-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--mp-card-bg, #ffffff);
  color: var(--mp-text-main, #1e293b);
  padding: 14px 18px;
  border-radius: var(--mp-radius-md, 6px);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  pointer-events: auto;
  animation: mp-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.mp-toast--success .mp-toast-icon { color: #16a34a; }
.mp-toast--error .mp-toast-icon { color: #dc2626; }
.mp-toast-body {
  flex: 1;
  min-width: 0;
}
.mp-toast-body a {
  color: var(--vita-primary, #8C9D93);
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.mp-toast-body a:hover {
  color: #1e293b;
}
.mp-toast-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-left: 8px;
  opacity: 0.7;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mp-toast-close:hover {
  opacity: 1;
  color: #1e293b;
}
.mp-toast--leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes mp-toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="dark"] .mp-toast {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .mp-toast-body a {
  color: #38bdf8;
}
[data-theme="dark"] .mp-toast-close {
  color: #64748b;
}
[data-theme="dark"] .mp-toast-close:hover {
  color: #f8fafc;
}

.mp-product-listing {
  transition: opacity 0.16s ease;
}
.mp-product-listing.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

#vita-home-canvas {
  width: 100%;
}

.vita-home-canvas__row {
  margin-bottom: 24px;
}

.vita-home-canvas__row--full {
  width: 100%;
}

.vita-home-canvas__container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.vita-home-canvas__column > * + * {
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .mp-product-listing { transition: none; }
}

@media (max-width: 768px) {
  .mp-panel-lg { padding: 16px; }
  .mp-panel-compact { padding: 16px; }
  .mp-sortbar { padding: 10px 12px; }
  .mp-main-image { min-height: 240px; }
  .mp-main-image img { max-width: 100%; }
  .mp-toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
  }
  .mp-toast { max-width: none; }
  .mp-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mp-related-grid > .mp-product-card {
    max-width: 100%;
    min-height: auto;
  }
}

/* ==========================================================================
   Alerts (.alert, .alert-info, .alert-success, .alert-warning, .alert-danger)
   ========================================================================== */
.alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  background: var(--mp-card-bg, #ffffff);
  color: var(--mp-text-main, #1e293b);
  box-shadow: none;
}

.alert a {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}

.alert .close {
  color: inherit;
  opacity: 0.5;
  font-size: 18px;
  font-weight: 400;
  text-shadow: none;
  transition: opacity 0.15s ease;
  margin-left: auto;
  padding: 0;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.alert .close:hover {
  opacity: 0.9;
}

.alert > i.fa:first-child,
.alert > .fa:first-child {
  font-size: 15px;
  flex-shrink: 0;
}

/* Alert Info */
.alert-info {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
.alert-info > i.fa:first-child,
.alert-info > .fa:first-child {
  color: #0284c7;
}

/* Alert Success */
.alert-success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.alert-success > i.fa:first-child,
.alert-success > .fa:first-child {
  color: #16a34a;
}

/* Alert Warning */
.alert-warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.alert-warning > i.fa:first-child,
.alert-warning > .fa:first-child {
  color: #d97706;
}

/* Alert Danger / Error */
.alert-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.alert-danger > i.fa:first-child,
.alert-danger > .fa:first-child {
  color: #dc2626;
}

/* Dark Mode Alerts */
[data-theme="dark"] .alert {
  background-color: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .alert-info {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fde68a;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Global Bootstrap Modals & Backdrops */
.modal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 10500 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

/* ==========================================================================
   SWEETALERT2-INSPIRED MODAL SYSTEM (Clean Blur Backdrop, Cards & Animation)
   ========================================================================== */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  z-index: 10400 !important;
}

.modal-backdrop.in {
  opacity: 1 !important;
}

.modal {
  z-index: 10500 !important;
  text-align: center;
  padding: 0 !important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  z-index: 10501 !important;
  margin: 30px auto !important;
  max-width: 92vw;
}

.modal.fade .modal-dialog {
  transform: scale(0.92) translateY(-16px) !important;
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

.modal.in .modal-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1;
}

.modal-content,
.mp-modal-card,
.mp-auth-card {
  background-color: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #0f172a);
  border-radius: var(--mp-radius-lg, 16px) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  border: none !important;
  overflow: hidden;
  position: relative;
}

.modal-header,
.mp-modal-header,
.mp-auth-header {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--mp-border-color, #f1f5f9) !important;
  background: var(--mp-bg-topbar, #f8fafc) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-title,
.mp-modal-title,
.mp-auth-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--mp-text-main, #0f172a) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mp-modal-title-icon,
.mp-auth-title-icon {
  color: var(--mp-primary, #8C9D93) !important;
  font-size: 18px !important;
}

/* SweetAlert2 Circular Close Button */
.modal-header .close,
.mp-modal-close,
.mp-auth-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: var(--mp-input-bg, #f1f5f9) !important;
  color: var(--mp-text-muted, #64748b) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
  text-shadow: none !important;
}

.modal-header .close:hover,
.mp-modal-close:hover,
.mp-auth-close:hover {
  background: var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #0f172a) !important;
  transform: scale(1.05) !important;
}

.modal-body,
.mp-modal-body,
.mp-auth-body {
  padding: 22px 24px !important;
  background-color: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #0f172a) !important;
}

.modal-footer,
.mp-modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--mp-border-color, #f1f5f9) !important;
  background: var(--mp-bg-topbar, #f8fafc) !important;
  border-radius: 0 0 var(--mp-radius-lg, 16px) var(--mp-radius-lg, 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Modal Action Buttons (SweetAlert2 & Modern Theme Parity) */
.modal-footer .btn,
.modal-body .btn {
  height: 42px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

.modal-footer .btn-primary,
.modal-body .btn-primary,
.modal-footer #saveToWishlist,
.modal-footer #saveNewCategory,
.modal-body #button-review {
  background-color: var(--mp-primary, #8C9D93) !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(140, 157, 147, 0.35) !important;
}

.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover,
.modal-footer #saveToWishlist:hover,
.modal-footer #saveNewCategory:hover,
.modal-body #button-review:hover {
  background-color: var(--mp-primary-hover, #7a8c82) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.45) !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn-default,
.modal-body .btn-secondary,
.modal-body .btn-default {
  background-color: var(--mp-input-bg, #f1f5f9) !important;
  background-image: none !important;
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #334155) !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover,
.modal-body .btn-secondary:hover,
.modal-body .btn-default:hover {
  background-color: var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #0f172a) !important;
}

/* Wishlist Categories List in Modal */
#wishlistModal .list-group {
  margin-bottom: 0 !important;
}

#wishlistModal .list-group-item {
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
  background-color: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #0f172a) !important;
  border-radius: var(--mp-radius-sm, 6px) !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#wishlistModal .list-group-item:hover,
#wishlistModal .list-group-item.active {
  background-color: var(--mp-bg-topbar, #f8fafc) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: var(--mp-primary, #8C9D93) !important;
}

#wishlistModal .list-group-item.create-category {
  border-style: dashed !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: var(--mp-primary, #8C9D93) !important;
  font-weight: 600 !important;
}

#wishlistModal .list-group-item.create-category:hover {
  background-color: var(--mp-bg-topbar, #f0fdf4) !important;
}

#createCategoryModal #newCategoryName {
  height: 44px !important;
  border-radius: var(--mp-radius-sm, 6px) !important;
  border: 1px solid var(--mp-border-color, #cbd5e1) !important;
  background-color: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #0f172a) !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
}

#createCategoryModal #newCategoryName:focus {
  border-color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.2) !important;
}

/* Dark Theme Overrides for Modals */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .mp-modal-card,
[data-theme="dark"] .mp-auth-card {
  background-color: var(--mp-card-bg, var(--vita-dark-surface)) !important;
  color: var(--mp-text-main, #FFFFFF) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .mp-modal-header,
[data-theme="dark"] .mp-auth-header {
  background: var(--mp-bg-topbar, var(--vita-dark-topbar)) !important;
  border-color: var(--mp-border-color, var(--vita-dark-border)) !important;
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .mp-modal-title,
[data-theme="dark"] .mp-auth-title {
  color: var(--mp-text-main, #FFFFFF) !important;
}

[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .mp-modal-close,
[data-theme="dark"] .mp-auth-close {
  background: var(--vita-dark-hover) !important;
  color: var(--vita-dark-muted) !important;
}

[data-theme="dark"] .modal-header .close:hover,
[data-theme="dark"] .mp-modal-close:hover,
[data-theme="dark"] .mp-auth-close:hover {
  background: var(--vita-dark-control-border) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-body,
[data-theme="dark"] .mp-modal-body,
[data-theme="dark"] .mp-auth-body {
  background-color: var(--mp-card-bg, var(--vita-dark-surface)) !important;
  color: var(--mp-text-main, #FFFFFF) !important;
}

[data-theme="dark"] .modal-footer,
[data-theme="dark"] .mp-modal-footer {
  background: var(--mp-bg-topbar, var(--vita-dark-topbar)) !important;
  border-color: var(--mp-border-color, var(--vita-dark-border)) !important;
}

[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-default {
  background-color: var(--vita-dark-hover) !important;
  border-color: var(--mp-border-color, var(--vita-dark-border)) !important;
  color: var(--mp-text-main, #FFFFFF) !important;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover,
[data-theme="dark"] .modal-footer .btn-default:hover {
  background-color: var(--vita-dark-control-border) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] #wishlistModal .list-group-item {
  background-color: var(--mp-card-bg, var(--vita-dark-surface)) !important;
  border-color: var(--mp-border-color, var(--vita-dark-border)) !important;
  color: var(--mp-text-main, #FFFFFF) !important;
}

[data-theme="dark"] #wishlistModal .list-group-item:hover,
[data-theme="dark"] #wishlistModal .list-group-item.active {
  background-color: var(--mp-bg-topbar, var(--vita-dark-topbar)) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: var(--mp-primary, #8C9D93) !important;
}

[data-theme="dark"] #createCategoryModal #newCategoryName {
  background-color: var(--mp-input-bg, var(--vita-dark-topbar)) !important;
  border-color: var(--mp-border-color, var(--vita-dark-border)) !important;
  color: var(--mp-text-main, #FFFFFF) !important;
}

/* --------------------------------------------------------------------------
   THEME VARIATION 1: MINIMAL (Flat, Clean 1px Borders, Subtle Shadows)
   -------------------------------------------------------------------------- */
[data-modal-theme="minimal"] .modal-content,
[data-modal-theme="minimal"] .mp-modal-card,
[data-modal-theme="minimal"] .mp-auth-card,
.swal2-popup.vita-modal-theme-minimal {
  border-radius: 6px !important;
  border: 1.5px solid var(--mp-border-color, #cbd5e1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

[data-modal-theme="minimal"] .modal-header,
[data-modal-theme="minimal"] .mp-modal-header,
[data-modal-theme="minimal"] .mp-auth-header {
  background: transparent !important;
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0) !important;
  padding: 14px 20px !important;
}

[data-modal-theme="minimal"] .modal-header .close,
[data-modal-theme="minimal"] .mp-modal-close,
[data-modal-theme="minimal"] .mp-auth-close,
.swal2-popup.vita-modal-theme-minimal .swal2-close {
  border-radius: 4px !important;
  background: transparent !important;
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
}

[data-modal-theme="minimal"] .modal-footer,
[data-modal-theme="minimal"] .mp-modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--mp-border-color, #e2e8f0) !important;
  border-radius: 0 0 6px 6px !important;
}

/* --------------------------------------------------------------------------
   THEME VARIATION 2: BORDERLESS (Air, Smooth 22px Corners, No Dividers)
   -------------------------------------------------------------------------- */
[data-modal-theme="borderless"] .modal-content,
[data-modal-theme="borderless"] .mp-modal-card,
[data-modal-theme="borderless"] .mp-auth-card,
.swal2-popup.vita-modal-theme-borderless {
  border-radius: 22px !important;
  border: none !important;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

[data-modal-theme="borderless"] .modal-header,
[data-modal-theme="borderless"] .mp-modal-header,
[data-modal-theme="borderless"] .mp-auth-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 22px 28px 8px 28px !important;
}

[data-modal-theme="borderless"] .modal-body,
[data-modal-theme="borderless"] .mp-modal-body,
[data-modal-theme="borderless"] .mp-auth-body {
  padding: 12px 28px 24px 28px !important;
}

[data-modal-theme="borderless"] .modal-footer,
[data-modal-theme="borderless"] .mp-modal-footer {
  background: transparent !important;
  border-top: none !important;
  padding: 8px 28px 24px 28px !important;
  border-radius: 0 0 22px 22px !important;
}

/* --------------------------------------------------------------------------
   THEME VARIATION 3: MATERIAL UI (Elevated Google Shadow, 4px Corners)
   -------------------------------------------------------------------------- */
[data-modal-theme="material-ui"] .modal-content,
[data-modal-theme="material-ui"] .mp-modal-card,
[data-modal-theme="material-ui"] .mp-auth-card,
.swal2-popup.vita-modal-theme-material-ui {
  border-radius: 4px !important;
  border: none !important;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-modal-theme="material-ui"] .btn-primary,
[data-modal-theme="material-ui"] .mp-btn-primary,
[data-modal-theme="material-ui"] .mp-auth-btn,
.swal2-popup.vita-modal-theme-material-ui .swal2-confirm,
.swal2-popup.vita-modal-theme-material-ui .swal2-cancel {
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* --------------------------------------------------------------------------
   THEME VARIATION 4: BOOTSTRAP 5 (Standard Corporate 8px Radius & Outline)
   -------------------------------------------------------------------------- */
[data-modal-theme="bootstrap-5"] .modal-content,
[data-modal-theme="bootstrap-5"] .mp-modal-card,
[data-modal-theme="bootstrap-5"] .mp-auth-card,
.swal2-popup.vita-modal-theme-bootstrap-5 {
  border-radius: 8px !important;
  border: 1px solid var(--mp-border-color, #dee2e6) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

[data-modal-theme="bootstrap-5"] .modal-header,
[data-modal-theme="bootstrap-5"] .mp-modal-header,
[data-modal-theme="bootstrap-5"] .mp-auth-header {
  border-bottom: 1px solid var(--mp-border-color, #dee2e6) !important;
  border-radius: 8px 8px 0 0 !important;
}

[data-modal-theme="bootstrap-5"] .modal-footer,
[data-modal-theme="bootstrap-5"] .mp-modal-footer {
  border-top: 1px solid var(--mp-border-color, #dee2e6) !important;
  border-radius: 0 0 8px 8px !important;
}

/* ==========================================================================
   FAST ORDER (QUICK ORDER) SWEETALERT2 STYLING
   ========================================================================== */
/* Quick Order Modal - Base / Single Product (1-column compact) */
.mp-quick-order-modal .modal-dialog {
  max-width: 500px;
}

.mp-quick-order-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mp-quick-order-col-preview {
  order: -1;
}

/* Quick Order Modal - Multiple Items / Merged Cart (2-column desktop layout) */
@media (min-width: 768px) {
  .mp-quick-order-modal.is-multiple-items .modal-dialog {
    max-width: 840px;
    width: 840px;
  }

  .mp-quick-order-modal.is-multiple-items .mp-quick-order-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .mp-quick-order-modal.is-multiple-items .mp-quick-order-col-preview {
    order: unset;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mp-quick-order-modal.is-multiple-items .mp-quick-order-preview {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .mp-quick-order-modal.is-multiple-items .mp-quick-order-items-scroll {
    flex: 1;
    max-height: 310px;
  }
}

.mp-quick-order-preview {
  margin-bottom: 18px;
  background: var(--mp-bg-topbar, #f8fafc);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 10px);
  padding: 16px;
}

.mp-quick-order-preview__head {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mp-text-main, #334155);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-modal-icon-accent {
  color: var(--mp-primary, #8C9D93);
  margin-right: 6px;
}

.mp-quick-order-items-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.mp-quick-order-items-scroll::-webkit-scrollbar {
  width: 5px;
}

.mp-quick-order-items-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.mp-quick-order-items-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.mp-quick-order-items-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--mp-primary, #8C9D93);
}

.mp-quick-order-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
}

.mp-quick-order-item:last-child {
  border-bottom: none;
}

.mp-quick-order-item-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: var(--mp-radius-sm, 6px);
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  flex-shrink: 0;
  margin-top: 2px;
}

.mp-quick-order-item-info {
  flex: 1;
  min-width: 0;
}

.mp-quick-order-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main, #0f172a);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-quick-order-item-options {
  font-size: 11px;
  color: var(--mp-text-muted, #64748b);
  margin-top: 3px;
}

.mp-quick-order-opt-badge {
  display: inline-block;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #cbd5e1);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 4px;
  margin-top: 2px;
}

.mp-quick-order-item-qty {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  margin-top: 3px;
}

.mp-quick-order-item-total {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mp-text-main, #0f172a);
  white-space: nowrap;
  margin-left: 8px;
  flex-shrink: 0;
  text-align: right;
}

.mp-quick-order-empty-hint {
  padding: 16px 0;
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
}

.mp-quick-order-total-bar {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px dashed var(--mp-border-color, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mp-quick-order-total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-muted, #475569);
  white-space: nowrap;
}

.mp-quick-order-total-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--mp-primary, #8C9D93);
  white-space: nowrap;
}

.mp-quick-order-fields .form-group {
  margin-bottom: 13px;
}

.mp-quick-order-fields .control-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-muted, #475569);
  margin-bottom: 4px;
}

.mp-quick-order-agree-group {
  margin-top: 10px;
  margin-bottom: 12px;
}

.mp-quick-order-agree-label {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--mp-text-muted, #475569) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-weight: normal !important;
}

.mp-quick-order-submit {
  height: 48px !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(140, 157, 147, 0.35) !important;
  transition: all 0.15s ease !important;
}

.mp-quick-order-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(140, 157, 147, 0.45) !important;
}

/* ==========================================================================
   QUICKSIGN AUTH MODAL SWEETALERT2 STYLING
   ========================================================================== */
.mp-auth-modal {
  z-index: 10500 !important;
}

.mp-auth-modal .modal-dialog {
  max-width: 440px;
}

.mp-auth-card {
  overflow: hidden;
  position: relative;
  z-index: 10502 !important;
}

.mp-auth-nav {
  display: flex;
  background: var(--mp-bg-topbar, #f1f5f9);
  border-radius: var(--mp-radius-md, 8px);
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.mp-auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-muted, #64748b);
  border-radius: var(--mp-radius-sm, 6px);
  cursor: pointer;
  transition: all 0.18s ease;
}

.mp-auth-tab.is-active {
  background: var(--mp-card-bg, #ffffff);
  color: var(--mp-text-main, #0f172a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mp-auth-nav {
  background: var(--mp-input-bg, var(--vita-dark-topbar));
}

[data-theme="dark"] .mp-auth-tab.is-active {
  background: var(--mp-card-bg, var(--vita-dark-surface));
  color: var(--mp-text-main, #FFFFFF);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.mp-auth-pane {
  display: none;
}
.mp-auth-pane.is-active {
  display: block;
  animation: mpFadeIn 0.2s ease-in-out;
}
@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.mp-auth-field {
  margin-bottom: 14px;
}
.mp-auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-muted, #475569);
  margin-bottom: 5px;
}
.mp-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mp-auth-icon {
  position: absolute;
  left: 12px;
  color: var(--mp-text-muted, #94a3b8);
  font-size: 14px;
  pointer-events: none;
}
.mp-auth-input {
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  color: var(--mp-text-main, #1e293b);
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #cbd5e1);
  border-radius: var(--mp-radius-sm, 6px);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mp-auth-input:focus {
  border-color: var(--mp-primary, #8C9D93);
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.2);
}
.mp-auth-subrow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  margin-top: -6px;
}
.mp-auth-forgot {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mp-auth-forgot:hover {
  color: var(--mp-primary, #8C9D93);
  text-decoration: underline;
}
.mp-auth-agree {
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
}
.mp-auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
  line-height: 1.4;
}
.mp-auth-btn {
  width: 100%;
  height: 44px;
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  border: none;
  border-radius: var(--mp-radius-sm, 6px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.3);
  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
}
.mp-auth-btn:hover {
  background: var(--mp-primary-hover, #7a8c82);
  transform: translateY(-1px);
}
.mp-auth-btn.is-loading {
  opacity: 0.7;
  cursor: wait;
}

/* Logged In Customer Header Dropdown */
.mp-action-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mp-action-item--user-logged {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  border-radius: 50%;
  color: var(--mp-primary, #e11d48) !important;
  background: rgba(140, 157, 147, 0.08);
  border: 1.5px solid rgba(140, 157, 147, 0.25);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mp-action-item--user-logged:hover,
.mp-action-dropdown-wrap:hover .mp-action-item--user-logged,
.mp-action-dropdown-wrap.is-open .mp-action-item--user-logged {
  background: rgba(140, 157, 147, 0.16);
  border-color: var(--mp-primary, #e11d48);
  transform: translateY(-1px);
}

.mp-action-item--user-logged i {
  font-size: 22px !important;
  margin: 0 !important;
  line-height: 1;
}

.mp-account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: 250px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.mp-action-dropdown-wrap:hover .mp-account-dropdown,
.mp-action-dropdown-wrap.is-open .mp-account-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mp-account-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #eef2f6;
  border-top: 1px solid #eef2f6;
  transform: rotate(45deg);
}

.mp-account-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mp-account-dropdown__item {
  margin: 0;
  padding: 0;
}

.mp-account-dropdown__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mp-account-dropdown__link:hover {
  background-color: #f8fafc;
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
}

.mp-account-dropdown__icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #64748b;
  flex-shrink: 0;
}

.mp-account-dropdown__link:hover .mp-account-dropdown__icon {
  color: var(--mp-primary, #8C9D93);
}

.mp-account-dropdown__icon--accent {
  color: var(--mp-badge-discount-bg, #dc2626) !important;
}

.mp-account-dropdown__item--city {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.mp-account-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fbfcfd;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  gap: 12px;
}

.mp-account-dropdown__user-name {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.mp-account-dropdown__user-icon {
  color: var(--mp-primary, #8C9D93);
  margin-right: 6px;
}

.mp-account-dropdown__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #e11d48;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.mp-account-dropdown__logout:hover {
  background-color: #fee2e2;
  color: #be123c;
}

/* --- Dropdown Mini-Cart --- */
.mp-cart-dropdown-wrap {
  position: relative;
}

.mp-cart-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1150;
  width: 380px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  overflow: hidden;
}

.mp-cart-dropdown.open,
.mp-cart-dropdown-wrap.is-open .mp-cart-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mp-cart-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #eef2f6;
  border-top: 1px solid #eef2f6;
  transform: rotate(45deg);
  z-index: 1;
}

.mp-cart-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fbfcfd;
  border-bottom: 1px solid #f1f5f9;
}

.mp-cart-dropdown__title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.mp-cart-dropdown__count {
  color: var(--mp-primary, #8C9D93);
  font-weight: 600;
}

.mp-cart-dropdown__close {
  background: none;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}

.mp-cart-dropdown__close:hover {
  color: #1e293b;
}

.mp-cart-dropdown__items {
  max-height: 290px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mp-cart-dropdown__items::-webkit-scrollbar {
  width: 4px;
}

.mp-cart-dropdown__items::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 4px;
}

.mp-cart-dropdown__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
}

.mp-cart-dropdown__item:last-child {
  border-bottom: none;
}

.mp-cart-dropdown__thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid #eef2f6;
  overflow: hidden;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-cart-dropdown__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-cart-dropdown__info {
  flex: 1;
  min-width: 0;
}

.mp-cart-dropdown__top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.mp-cart-dropdown__name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.mp-cart-dropdown__name:hover {
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
}

.mp-cart-dropdown__options {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.mp-cart-dropdown__remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s;
}

.mp-cart-dropdown__remove:hover {
  color: #ef4444;
}

.mp-cart-dropdown__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.mp-cart-dropdown__price {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.mp-cart-dropdown__stepper {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
}

.mp-cart-step-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #ffffff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.mp-cart-step-btn:hover {
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

.mp-cart-step-qty {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  min-width: 24px;
  text-align: center;
}

.mp-cart-dropdown__footer {
  padding: 14px 18px;
  background: #fbfcfd;
  border-top: 1px solid #f1f5f9;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.mp-cart-dropdown__totals {
  margin-bottom: 12px;
}

.mp-cart-dropdown__total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.mp-cart-dropdown__total-row--final {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  margin-bottom: 0;
}

.mp-cart-dropdown__total-row--final .mp-cart-dropdown__total-val {
  color: #e11d48;
  font-size: 16px;
  font-weight: 800;
}

.mp-cart-dropdown__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-cart-btn-fast {
  background: #ffffff;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  color: #b45309;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.mp-cart-btn-fast:hover {
  background: #fef3c7;
  border-color: #d97706;
  color: #92400e;
}

.mp-cart-btn-checkout {
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  background: #e11d48;
  border: none;
  color: #ffffff !important;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
  transition: background 0.15s, transform 0.15s;
}

.mp-cart-btn-checkout:hover {
  background: #be123c;
  color: #ffffff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

.mp-cart-dropdown__view-cart {
  text-align: center;
  padding-top: 4px;
}

.mp-cart-link-full {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s;
}

.mp-cart-link-full:hover {
  color: var(--mp-primary, #8C9D93);
  text-decoration: underline;
}

.mp-cart-dropdown__empty {
  padding: 36px 20px;
  text-align: center;
}

.mp-cart-dropdown__empty-icon {
  font-size: 42px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.mp-cart-dropdown__empty-text {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
}

/* Dark mode for Mini-Cart */
[data-theme="dark"] .mp-cart-dropdown {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .mp-cart-dropdown::before {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .mp-cart-dropdown__header,
[data-theme="dark"] .mp-cart-dropdown__footer {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .mp-cart-dropdown__title,
[data-theme="dark"] .mp-cart-dropdown__name,
[data-theme="dark"] .mp-cart-dropdown__price,
[data-theme="dark"] .mp-cart-dropdown__total-row--final {
  color: #f8fafc;
}
[data-theme="dark"] .mp-cart-dropdown__thumb {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .mp-cart-dropdown__item {
  border-color: #334155;
}
[data-theme="dark"] .mp-cart-dropdown__stepper {
  background: #334155;
}
[data-theme="dark"] .mp-cart-step-btn {
  background: #1e293b;
  color: #f8fafc;
}
[data-theme="dark"] .mp-cart-step-qty {
  color: #f8fafc;
}
[data-theme="dark"] .mp-cart-btn-view {
  background: #334155;
  border-color: #475569;
  color: #f8fafc;
}
[data-theme="dark"] .mp-cart-btn-fast {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}

/* Theme Toggle Button (Moon / Sun) */
.mp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef2f6;
  border: none;
  cursor: pointer;
  color: #475569;
  font-size: 15px;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.mp-theme-toggle:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Theme toggle in the top service bar: sits right of language/currency pills */
.mp-theme-toggle--topbar {
  width: 26px;
  height: 26px;
  font-size: 13px;
  background: var(--vita-topbar-control-bg, #f1f5f9);
  color: var(--vita-topbar-control-text, #475569);
}

.mp-theme-toggle--topbar:hover {
  background: var(--vita-topbar-control-border, #e2e8f0);
  color: var(--vita-topbar-text, #0f172a);
}

.mp-theme-toggle--topbar .mp-theme-icon-moon {
  color: var(--vita-topbar-control-text, #475569);
}

[data-theme="dark"] .mp-theme-toggle--topbar {
  background: var(--vita-topbar-control-bg, var(--vita-dark-input));
  color: var(--vita-topbar-control-text, var(--vita-dark-text));
}

[data-theme="dark"] .mp-theme-toggle--topbar:hover {
  background: var(--vita-topbar-control-border, var(--vita-dark-control-border));
}

[data-theme="dark"] .mp-theme-toggle--topbar .mp-theme-icon-moon {
  color: var(--vita-topbar-control-text, var(--vita-dark-text));
}

.mp-theme-icon-sun {
  display: none;
  color: #f59e0b;
}

.mp-theme-icon-moon {
  display: inline-block;
  color: #475569;
}

/* Dark Mode Tokens & Overrides (Warm Graphite Palette) */
[data-theme="dark"] {
  --mp-bg-body: var(--vita-dark-page);
  --mp-bg-surface: var(--vita-dark-surface);
  --mp-bg-topbar: var(--vita-dark-topbar);
  --mp-bg-hover: var(--vita-dark-hover);
  --mp-bg-subtle: var(--vita-dark-subtle);
  --mp-card-bg: var(--vita-dark-surface);
  --mp-backdrop: rgba(0, 0, 0, 0.72);

  --mp-text-main: #FFFFFF;
  --mp-text-body: var(--vita-dark-text);
  --mp-text-muted: var(--vita-dark-muted);
  --mp-text-light: var(--vita-dark-muted);
  --mp-text-inverse: var(--vita-dark-page);

  --mp-border-color: var(--vita-dark-border);
  --mp-border-hover: var(--vita-dark-border-hover);
  --mp-border-divider: var(--vita-dark-subtle);

  --vita-header-bg: var(--vita-dark-surface);
  --vita-header-text: #FFFFFF;
  --vita-header-muted: var(--vita-dark-muted);
  --vita-header-border: var(--vita-dark-border);
  --vita-header-search-bg: var(--vita-dark-input);
  --vita-header-search-text: #FFFFFF;
  --vita-header-search-placeholder: var(--vita-dark-muted);
  --vita-header-search-border: var(--vita-dark-border);

  --vita-topbar-bg: var(--vita-dark-topbar);
  --vita-topbar-text: var(--vita-dark-muted);
  --vita-topbar-border: var(--vita-dark-surface);
  --vita-topbar-control-bg: var(--vita-dark-input);
  --vita-topbar-control-text: var(--vita-dark-text);
  --vita-topbar-control-border: var(--vita-dark-control-border);

  --vita-mega-bg: var(--vita-dark-surface);
  --vita-mega-sidebar-bg: var(--vita-dark-topbar);
  --vita-mega-text: #FFFFFF;
  --vita-mega-muted: var(--vita-dark-muted);
  --vita-mega-hover-bg: var(--vita-dark-hover);
  --vita-mega-border: var(--vita-dark-border);
}

[data-theme="dark"] body {
  background-color: var(--mp-bg-body);
  color: var(--mp-text-body);
}

[data-theme="dark"] .mp-theme-toggle {
  background: var(--vita-dark-input);
  color: var(--vita-dark-text);
}

[data-theme="dark"] .mp-theme-toggle:hover {
  background: var(--vita-dark-control-border);
  color: #FFFFFF;
}

[data-theme="dark"] .mp-theme-icon-moon {
  display: none;
}

[data-theme="dark"] .mp-theme-icon-sun {
  display: inline-block;
}

[data-theme="dark"] .mp-search-form {
  background: var(--vita-dark-input);
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-search-form:focus-within {
  background: var(--vita-dark-input);
  border-color: var(--mp-primary, #8C9D93);
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.2);
}

[data-theme="dark"] .mp-search-input {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-search-icon-inside {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-pill-group {
  background: var(--vita-dark-input);
}

[data-theme="dark"] .mp-pill-item {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-pill-item:hover {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-pill-item.is-active {
  background: var(--vita-dark-selected);
  color: #FFFFFF;
}

[data-theme="dark"] .mp-action-item {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-action-item:hover {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-account-dropdown {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mp-account-dropdown::before {
  background: var(--vita-dark-surface);
  border-left-color: var(--vita-dark-border);
  border-top-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-account-dropdown__link {
  color: var(--vita-dark-text);
}

[data-theme="dark"] .mp-account-dropdown__link:hover {
  background-color: var(--vita-dark-hover);
  color: #FFFFFF;
}

[data-theme="dark"] .mp-account-dropdown__footer {
  background: var(--vita-dark-page);
  border-top-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-account-dropdown__user-name {
  color: #FFFFFF;
}

/* Crisp background for product photos in dark mode */
[data-theme="dark"] .mp-card-media {
  background: var(--vita-dark-photo) !important;
  border-radius: 4px;
  padding-top: 0;
  padding-bottom: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-theme="dark"] .mp-card-media img {
  background: transparent !important;
  padding: 0 !important;
}

[data-theme="dark"] .mp-product-card {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-card-option-chip {
  background: var(--vita-dark-border);
  border-color: var(--vita-dark-option-border);
  color: #E2E8F0;
}

[data-theme="dark"] .mp-card-option-chip:hover {
  border-color: var(--mp-primary, #8c9d93);
  color: var(--mp-primary, #8c9d93);
}

[data-theme="dark"] .mp-card-option-chip.is-active,
[data-theme="dark"] .mp-card-option-chip.active {
  background: var(--mp-primary, #8c9d93);
  border-color: var(--mp-primary, #8c9d93);
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-product-card:hover {
  border-color: var(--vita-dark-border-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .mp-card-title {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-card-title:hover {
  color: var(--mp-primary, #8C9D93);
}

[data-theme="dark"] .mp-card-price-current {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-card-price-old {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-card-attribute-chip {
  background: var(--vita-dark-page);
  border-color: var(--vita-dark-border);
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-card-option-chip {
  background: var(--vita-dark-page);
  border-color: var(--vita-dark-border);
  color: var(--vita-dark-text);
}

[data-theme="dark"] .mp-card-footer {
  border-left-color: var(--vita-dark-border) !important;
}

[data-theme="dark"] .mp-auth-card {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-auth-header {
  background: var(--vita-dark-page);
  border-bottom-color: var(--vita-dark-border);
}

[data-theme="dark"] .mp-auth-title {
  color: #FFFFFF;
}

[data-theme="dark"] .mp-auth-nav {
  background: var(--vita-dark-page);
}

[data-theme="dark"] .mp-auth-tab {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .mp-auth-tab.is-active {
  background: var(--vita-dark-surface);
  color: #FFFFFF;
}

[data-theme="dark"] .mp-auth-input {
  background: var(--vita-dark-input);
  border-color: var(--vita-dark-border);
  color: #FFFFFF;
}

[data-theme="dark"] .mp-auth-label {
  color: var(--vita-dark-text);
}

/* Category Quick Tags & Filters */
[data-theme="dark"] .mp-category-chip,
[data-theme="dark"] .tag-item {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  color: var(--vita-dark-text);
}

[data-theme="dark"] .mp-filter-panel,
[data-theme="dark"] .list-group-item {
  background-color: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  color: var(--vita-dark-text);
}

[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb > li > a {
  color: var(--vita-dark-muted);
}

[data-theme="dark"] .breadcrumb > li + li:before {
  color: #7A7582;
}

[data-theme="dark"] h1,
[data-theme="dark"] .page-title,
[data-theme="dark"] .mp-section-title {
  color: #FFFFFF;
}

/* ============================================================
   Ultra-Smooth Soft Blurred Theme Dissolve Transition
   ============================================================ */
.vita-theme-transition,
.vita-theme-transition *,
.vita-theme-transition *:before,
.vita-theme-transition *:after {
  transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important,
              border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important,
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important,
              box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-delay: 0s !important;
}

::view-transition-old(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both vitaThemeFadeOut;
  z-index: 1;
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both vitaThemeFadeIn;
  z-index: 2;
}

@keyframes vitaThemeFadeOut {
  from {
    opacity: 1;
    filter: blur(0px);
  }
  to {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes vitaThemeFadeIn {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

/* --- Top Sticky Buy Bar (Clean Single-Row Layout) --- */
.vita-sticky-buy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
  background: #ffffff;
  border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.vita-sticky-buy-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.vita-sticky-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  gap: 24px;
}

.vita-sticky-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.vita-sticky-bar-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: var(--mp-radius-md, 4px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 3px;
  flex-shrink: 0;
}

.vita-sticky-bar-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vita-sticky-bar-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--mp-text-main, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-width: 550px;
}

.vita-sticky-bar-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vita-sticky-link {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vita-sticky-link:hover {
  color: var(--vita-primary, #8C9D93);
}

.vita-sticky-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.vita-sticky-bar-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-right: 6px;
}

.vita-sticky-price-now {
  font-size: 22px;
  font-weight: 800;
  color: var(--mp-text-main, #1e293b);
  white-space: nowrap;
  letter-spacing: -0.3px;
}

.vita-sticky-price-was {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Desktop: the sticky bar price duplicates the buybox price, keep the
   bar to navigation links only. Mobile keeps the price (stacked under
   the title) as designed. */
@media (min-width: 992px) {
  .vita-sticky-bar-price {
    display: none;
  }
}

.vita-sticky-btn-buy {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
  border: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  box-shadow: 0 3px 12px rgba(140, 157, 147, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.vita-sticky-btn-buy:hover,
.vita-sticky-btn-buy:focus {
  background: var(--mp-primary-hover, #7A8B81) !important;
  color: #FFFFFF !important;
  border: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(140, 157, 147, 0.45) !important;
}

.vita-sticky-btn-buy .fa {
  font-size: 16px !important;
}

.vita-sticky-btn-wishlist {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  transition: all 0.15s ease;
}

.vita-sticky-btn-wishlist:hover {
  border-color: var(--vita-primary, #8C9D93);
  color: var(--vita-primary, #8C9D93);
  background: #f8fafc;
}

@media (max-width: 991px) {
  .vita-sticky-bar-title {
    max-width: 300px;
  }
}

@media (max-width: 767px) {
  /* Mobile buy plate: slides up from under the bottom nav (z-index below it),
     docks right above it. Price on the left, buy button on the right. */
  .vita-sticky-buy-bar {
    position: fixed !important;
    top: auto !important;
    bottom: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--vita-header-bg, #ffffff) !important;
    border-bottom: none !important;
    border-top: 1px solid var(--mp-border-color, #E2E8F0) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    /* Hidden state sits exactly BEHIND the bottom nav; on show it slides
       up out from under it and docks flush at the nav top edge. */
    transform: translateY(100%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 999 !important;
  }

  .vita-sticky-buy-bar.is-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .vita-sticky-bar-content {
    padding: 8px 14px !important;
    gap: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .vita-sticky-bar-left {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .vita-sticky-bar-img {
    display: none !important;
  }

  .vita-sticky-bar-links {
    display: none !important;
  }

  .vita-sticky-bar-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    max-width: none !important;
    color: var(--mp-text-muted, #64748b) !important;
  }

  .vita-sticky-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .vita-sticky-bar-price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
  }

  .vita-sticky-price-was {
    order: -1 !important;
  }

  .vita-sticky-price-now {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mp-primary, #8C9D93) !important;
    white-space: nowrap !important;
  }

  .vita-sticky-price-was {
    font-size: 12px !important;
    text-decoration: line-through !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
  }

  /* Scoped to the bar to out-rank the generic .mp-btn-buy { flex: 1 } rule,
     otherwise the plate button stretches and leaves huge empty gaps
     around its icon and label. */
  .vita-sticky-buy-bar .vita-sticky-btn-buy {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: var(--mp-radius-md, 4px) !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
  }

  .vita-sticky-btn-buy span {
    display: inline !important;
  }

  .vita-sticky-btn-wishlist {
    display: none !important;
  }
}

[data-theme="dark"] .vita-sticky-buy-bar {
  background: var(--vita-dark-page);
  border-color: var(--mp-border-color, var(--vita-dark-border));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .vita-sticky-bar-title {
  color: var(--mp-text-main, #FFFFFF);
}
[data-theme="dark"] .vita-sticky-link {
  color: var(--mp-text-body, var(--vita-dark-text));
}
[data-theme="dark"] .vita-sticky-link:hover,
[data-theme="dark"] .vita-sticky-link.active {
  color: var(--mp-primary, #8C9D93);
}
[data-theme="dark"] .vita-sticky-price-now {
  color: var(--mp-text-main, #FFFFFF);
}
[data-theme="dark"] .vita-sticky-price-was {
  color: var(--mp-text-muted, var(--vita-dark-muted));
}
[data-theme="dark"] .vita-sticky-btn-wishlist {
  background: var(--mp-bg-surface, var(--vita-dark-surface));
  border-color: var(--mp-border-color, var(--vita-dark-border));
  color: var(--mp-text-body, var(--vita-dark-text));
}

.vita-discounts-box {
  background: #f8fafc;
  border: 1px dashed var(--mp-border-color, #CBD5E1);
  border-radius: var(--mp-radius-sm, 2px);
  padding: 10px 12px;
  margin-bottom: 16px;
}
[data-theme="dark"] .vita-discounts-box {
  background: var(--mp-bg-subtle, var(--vita-dark-subtle));
  border-color: var(--mp-border-color, var(--vita-dark-border));
}
[data-theme="dark"] .mp-discounts-title {
  color: var(--mp-text-muted, var(--vita-dark-muted));
}
[data-theme="dark"] .mp-discount-price {
  color: var(--mp-primary, #8C9D93);
}

.vita-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.vita-spec-group {
  background: #f8fafc;
  border-radius: var(--mp-radius-sm, 2px);
  padding: 14px 16px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
}

.vita-spec-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  margin-top: 0;
  margin-bottom: 10px;
}

.vita-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed var(--mp-border-color, #e2e8f0);
  font-size: 13px;
}

.vita-spec-row:last-child {
  border-bottom: none;
}

.vita-spec-label {
  color: #64748b;
  flex: 1;
  padding-right: 12px;
}

.vita-spec-value {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
  text-align: right;
}

[data-theme="dark"] .vita-sticky-buy-bar {
  background: var(--vita-dark-page);
  border-top-color: var(--mp-border-color, var(--vita-dark-border));
}

[data-theme="dark"] .vita-spec-group {
  background: var(--mp-bg-subtle, var(--vita-dark-subtle));
  border: 1px solid var(--mp-border-color, var(--vita-dark-border));
  border-radius: var(--mp-radius-sm, 2px);
  padding: 14px 16px;
}

/* ==========================================================================
   VITA ONE-PAGE CHECKOUT (SOVEREIGN DESIGN SYSTEM)
   ========================================================================== */
.vita-checkout-container {
  padding-top: 16px;
  padding-bottom: 60px;
}

.vita-checkout-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.vita-checkout-main-col {
  position: relative;
}

/* XL-extended grid column: summary keeps 5/12 only on very wide monitors (>=1920px) */
@media (min-width: 1920px) {
  .col-xxl-5 {
    width: 41.66666667%;
  }
  .col-xxl-7 {
    width: 58.33333333%;
  }
}

/* Sticky summary column must stretch to the full row height,
   otherwise position: sticky has no room to travel. */
.vita-checkout-summary-col {
  position: relative;
  align-self: stretch !important;
}

.vita-checkout-summary-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 90px !important;
  z-index: 80;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  padding: 10px;
  box-shadow: var(--mp-shadow-md);
}

.vita-checkout-count-val {
  color: var(--mp-primary);
  font-weight: 700;
}

.vita-checkout-card {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--mp-shadow-sm);
  transition: var(--mp-transition);
}

.vita-checkout-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text-main);
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vita-checkout-step-badge {
  display: inline-flex;
  width: 24px;
  height: 24px;
  background: var(--mp-primary-light);
  color: var(--mp-primary);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.vita-checkout-radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--mp-bg-surface);
  transition: var(--mp-transition);
}

.vita-checkout-radio-card:hover {
  border-color: var(--mp-border-hover);
  background: var(--mp-bg-hover);
}

.vita-checkout-radio-card.is-active {
  border-color: var(--mp-primary);
  background: var(--mp-primary-light);
}

.vita-checkout-radio-card__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vita-checkout-radio-card__title {
  font-weight: 600;
  color: var(--mp-text-main);
  font-size: 13px;
}

.vita-checkout-radio-card__price {
  font-weight: 700;
  color: var(--mp-primary);
  font-size: 13px;
}

.vita-checkout-product-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mp-border-divider);
  transition: var(--mp-transition);
}
.vita-checkout-products-card .vita-checkout-products-table .vita-checkout-product-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 88px 96px 96px 30px;
  gap: 12px 10px;
  align-items: center;
}
.vita-checkout-products-card .vita-checkout-products-table .vita-checkout-product-name {
  grid-column: 1 / -1;
}
.vita-checkout-products-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 88px 96px 96px 30px;
  gap: 12px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mp-border-divider);
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-muted);
}
.vita-checkout-ph-price,
.vita-checkout-ph-total,
.vita-checkout-products-card .vita-checkout-products-table .vita-checkout-product-price,
.vita-checkout-products-card .vita-checkout-products-table .vita-checkout-product-total {
  text-align: right;
}
.vita-checkout-product-model {
  font-size: 11px;
  color: var(--mp-text-muted);
  margin-top: 2px;
}
.vita-checkout-products-card .vita-checkout-product-price {
  font-weight: 700;
  font-size: 13px;
  color: var(--mp-text-main);
  margin-top: 0;
  white-space: nowrap;
}
.vita-checkout-product-total {
  font-weight: 700;
  font-size: 13px;
  color: var(--mp-text-main);
  white-space: nowrap;
}
.vita-checkout-save-link {
  border: none;
  background: none;
  padding: 0;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ef4444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}
.vita-checkout-save-link:hover {
  color: #dc2626;
  text-decoration: underline;
}
.vita-checkout-save-link.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
[data-theme="dark"] .vita-checkout-save-link {
  color: var(--mp-star-color, #f59e0b);
}
[data-theme="dark"] .vita-checkout-save-link:hover {
  color: #fbbf24;
}
.vita-hide-mobile {
  display: block;
}
@media (max-width: 767px) {
  .vita-hide-mobile {
    display: none !important;
  }
}

.vita-checkout-product-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-border-color);
  flex-shrink: 0;
}

.vita-checkout-product-info {
  flex: 1;
  min-width: 0;
}

.vita-checkout-product-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--mp-text-main);
  text-decoration: none;
  display: block;
  transition: color 0.15s ease;
}

.vita-checkout-product-name:hover {
  color: var(--mp-primary);
}

.vita-checkout-product-options {
  font-size: 11px;
  color: var(--mp-text-muted);
  margin-top: 2px;
}

.vita-checkout-product-price {
  font-weight: 700;
  font-size: 13px;
  color: var(--mp-primary);
  margin-top: 3px;
}

.vita-checkout-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  height: 32px;
  background: var(--mp-bg-surface);
  transition: var(--mp-transition);
}

.vita-checkout-stepper:hover {
  border-color: var(--mp-border-hover);
}

.vita-checkout-step-btn {
  width: 28px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.vita-checkout-step-btn:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-primary);
}

.vita-checkout-step-qty {
  width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main);
}

.vita-checkout-remove-btn {
  border: none;
  background: transparent;
  color: #ef4444;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--mp-radius-sm);
  transition: var(--mp-transition);
  font-size: 13px;
}

.vita-checkout-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.vita-checkout-action-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--mp-radius-sm);
  transition: var(--mp-transition);
  font-size: 13px;
  line-height: 1;
}

.vita-checkout-action-btn:hover {
  background: var(--mp-bg-hover, #f1f5f9);
  color: var(--mp-primary, #8C9D93);
}

.vita-checkout-action-btn:hover i {
  transform: scale(1.15);
}

.vita-cart-save-later i {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vita-cart-save-later i {
  margin-right: 5px;
}

.vita-checkout-action-text {
  white-space: nowrap;
}

/* Mobile checkout product row: title (and options) on top, below a line
   with thumbnail, price, quantity stepper and action buttons. */
@media (max-width: 767px) {
  .vita-checkout-products-card .vita-checkout-products-table .vita-checkout-product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
  }
  .vita-checkout-products-card .vita-checkout-products-table .vita-checkout-products-head {
    display: none;
  }

  .vita-checkout-product-info {
    display: contents;
  }

  .vita-checkout-product-name {
    order: 1;
    flex: 0 0 100%;
  }

  .vita-checkout-product-model {
    order: 2;
    flex: 0 0 100%;
    margin-top: 0;
  }

  .vita-checkout-product-options {
    order: 2;
    flex: 0 0 100%;
    margin-top: 0;
  }

  .vita-checkout-product-thumb {
    order: 3;
  }

  .vita-checkout-product-total {
    order: 4;
  }

  .vita-checkout-stepper {
    order: 5;
    margin-left: auto;
  }

  .vita-checkout-product-row > .vita-checkout-step-qty {
    order: 5;
    margin-left: auto;
  }

  .vita-checkout-save-link {
    order: 6;
  }

  .vita-checkout-remove-btn {
    order: 7;
    margin-left: auto;
  }
}

.mp-cart-dropdown__wishlist-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.vita-checkout-totals-box {
  background: transparent;
  border-radius: var(--mp-radius-md);
  padding: 2px 0;
  margin-bottom: 20px;
}

.vita-checkout-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-text-muted);
}

.vita-checkout-total-line:last-child {
  border-top: 1px solid var(--mp-border-color);
  padding-top: 12px;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text-main);
}

.vita-checkout-total-line:last-child .vita-checkout-total-val {
  color: var(--mp-primary);
  font-size: 18px;
  font-weight: 800;
}

.vita-checkout-submit-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  background: var(--mp-primary);
  border: 1px solid var(--mp-primary);
  border-radius: var(--mp-radius-md);
  cursor: pointer;
  box-shadow: var(--mp-shadow-md);
  transition: var(--mp-transition);
  text-align: center;
}

.vita-checkout-submit-btn:hover {
  background: var(--mp-primary-hover);
  border-color: var(--mp-primary-hover);
  box-shadow: var(--mp-shadow-lg);
  color: #ffffff !important;
}

.vita-checkout-submit-btn:active {
  transform: translateY(1px);
}

[data-theme="dark"] .vita-checkout-card,
[data-theme="dark"] .vita-checkout-summary-sticky {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .vita-checkout-radio-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .vita-checkout-radio-card.is-active {
  background: rgba(140, 157, 147, 0.15);
  border-color: var(--mp-primary);
}

[data-theme="dark"] .vita-checkout-totals-box {
  background: transparent;
}

.mp-checkout-agreements {
  margin-top: 14px;
}
.mp-checkout-agree-group {
  margin-bottom: 8px;
}
.mp-checkout-agree-label {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mp-text-muted);
  cursor: pointer;
}
.mp-checkout-agree-label input[type="checkbox"] {
  vertical-align: middle;
  margin: -2px 8px 0 0;
  accent-color: var(--mp-primary);
  cursor: pointer;
}
.mp-checkout-agree-label a {
  color: var(--mp-primary);
}

/* Cart popup after add-to-cart (donor compact cart pattern, Vita palette) */
.vita-cart-added-modal .vita-cart-added-modal__dialog {
  width: 680px;
  max-width: calc(100vw - 24px);
}
.vita-cart-added-modal__content {
  position: relative;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--mp-shadow-lg);
}
[data-theme="dark"] .vita-cart-added-modal__content {
  background: #0f172a;
  border-color: #1e293b;
}
.vita-cart-added-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.vita-cart-added-modal__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text-main);
}
.vita-cart-added-modal__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--mp-bg-hover);
  color: var(--mp-text-muted);
  font-size: 12px;
  line-height: 28px;
  padding: 0;
  cursor: pointer;
}
.vita-cart-added-modal__close:hover {
  background: var(--mp-border-color);
  color: var(--mp-text-main);
}
.vita-cart-added-modal__columns,
.vita-cart-added-modal__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 84px 96px 96px 28px;
  align-items: center;
  gap: 10px;
}
.vita-cart-added-modal__columns {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--mp-border-color);
  font-size: 11px;
  font-weight: 600;
  color: var(--mp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.vita-cart-added-modal__columns .vita-cart-added-modal__col-label:nth-of-type(1) {
  text-align: right;
}
.vita-cart-added-modal__columns .vita-cart-added-modal__col-label:nth-of-type(2) {
  text-align: right;
}
.vita-cart-added-modal__items {
  max-height: 216px;
  overflow-y: auto;
}
.vita-cart-added-modal__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--mp-border-divider);
}
.vita-cart-added-modal__item:last-child {
  border-bottom: 0;
}
.vita-cart-added-modal__thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  background: var(--mp-bg-subtle);
}
.vita-cart-added-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vita-cart-added-modal__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vita-cart-added-modal__name:hover {
  color: var(--mp-primary-hover);
}
.vita-cart-added-modal__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vita-cart-added-modal__step-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  color: var(--mp-text-muted);
  font-size: 10px;
  line-height: 22px;
  padding: 0;
  cursor: pointer;
  transition: var(--mp-transition);
}
.vita-cart-added-modal__step-btn:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
.vita-cart-added-modal__step-qty {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main);
}
[data-theme="dark"] .vita-cart-added-modal__step-btn {
  background: #0f172a;
  border-color: #1e293b;
  color: #94a3b8;
}
.vita-cart-added-modal__unit-price,
.vita-cart-added-modal__line-total {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main);
  white-space: nowrap;
}
.vita-cart-added-modal__line-total {
  font-weight: 700;
}
.vita-cart-added-modal__remove {
  width: 26px;
  height: 26px;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mp-text-muted);
  font-size: 13px;
  line-height: 26px;
  padding: 0;
  cursor: pointer;
  transition: var(--mp-transition);
}
.vita-cart-added-modal__remove:hover {
  background: #dc2626;
  color: #ffffff;
}
.vita-cart-added-modal__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 6px 0 14px;
}
.vita-cart-added-modal__total-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-width: 240px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-text-muted);
  padding: 3px 0;
}
.vita-cart-added-modal__total-row strong {
  color: var(--mp-text-main);
}
.vita-cart-added-modal__total-row--final {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text-main);
}
.vita-cart-added-modal__total-row--final strong {
  font-size: 18px;
  color: var(--mp-primary);
}
.vita-cart-added-modal__footer {
  display: flex;
  gap: 10px;
}
.vita-cart-added-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  border-radius: var(--mp-radius-lg);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--mp-transition);
}
.vita-cart-added-modal__btn--ghost {
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--mp-bg-hover);
  border: 1px solid var(--mp-border-color);
  color: var(--mp-text-main) !important;
}
.vita-cart-added-modal__btn--ghost:hover {
  background: var(--mp-border-divider);
}
.vita-cart-added-modal__btn--primary {
  flex: 1 1 auto;
  background: var(--mp-primary);
  border: 1px solid var(--mp-primary);
  color: #ffffff !important;
}
.vita-cart-added-modal__btn--primary:hover {
  background: var(--mp-primary-hover);
  border-color: var(--mp-primary-hover);
  color: #ffffff !important;
}
@media (max-width: 767px) {
  .vita-cart-added-modal .vita-cart-added-modal__dialog {
    width: 100%;
  }
  .vita-cart-added-modal__columns,
  .vita-cart-added-modal__item {
    grid-template-columns: 52px minmax(0, 1fr) 84px 96px 28px;
  }
  .vita-cart-added-modal__columns .vita-cart-added-modal__col-label:nth-of-type(1) {
    display: none;
  }
  .vita-cart-added-modal__unit-price {
    display: none;
  }
  .vita-cart-added-modal__items {
    max-height: none;
  }
  .vita-cart-added-modal__footer {
    flex-direction: column-reverse;
  }
  .vita-cart-added-modal__btn--ghost {
    padding: 0 10px;
  }
}

/* Cart page table (donor hybrid: product | price | qty stepper | total | remove) */
.mp-cartpage-table {
  margin-bottom: 0;
}
.mp-cartpage-product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.mp-cartpage-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  background: var(--mp-bg-subtle);
}
.mp-cartpage-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-cartpage-info {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-cartpage-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-text-main);
}
.mp-cartpage-name:hover {
  color: var(--mp-primary);
}
.mp-cartpage-sub {
  font-size: 12px;
  font-style: italic;
  color: var(--mp-text-muted);
  margin-top: 2px;
}
.mp-cartpage-price {
  font-weight: 500;
  color: var(--mp-text-main);
  white-space: nowrap;
}
.mp-cartpage-step {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.mp-cartpage-step-input {
  width: 46px;
  height: 32px;
  text-align: center;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  color: var(--mp-text-main);
  font-size: 13px;
  font-weight: 600;
}
.mp-cartpage-step-input:focus {
  outline: none;
  border-color: var(--mp-primary);
}
.mp-cartpage-step-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  color: var(--mp-text-muted);
  font-size: 11px;
  line-height: 30px;
  padding: 0;
  cursor: pointer;
  transition: var(--mp-transition);
}
.mp-cartpage-step-btn:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
[data-theme="dark"] .mp-cartpage-step-input {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
[data-theme="dark"] .mp-cartpage-step-btn {
  background: #0f172a;
  border-color: #1e293b;
  color: #94a3b8;
}
.mp-cartpage-actions {
  white-space: nowrap;
}
.mp-cartpage-act {
  width: 30px;
  height: 30px;
  margin: 0 2px;
  border: 1px solid var(--mp-border-color);
  border-radius: 50%;
  background: var(--mp-bg-surface);
  color: var(--mp-text-muted);
  font-size: 13px;
  line-height: 28px;
  padding: 0;
  cursor: pointer;
  transition: var(--mp-transition);
}
.mp-cartpage-act:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
.mp-cartpage-act--remove:hover {
  border-color: #dc2626;
  background: #dc2626;
  color: #ffffff;
}
@media (max-width: 767px) {
  .mp-cartpage-th-price,
  .mp-cartpage-price {
    display: none;
  }
}



/* ==========================================================================
   COMPACT & ELEGANT PDP OPTIONS STYLING
   Space-efficient chips, swatches, and stepper controls
   ========================================================================== */

.mp-sticky-box {
  background: var(--mp-bg-surface, #ffffff);
  border-radius: var(--mp-radius-lg, 10px);
  padding: 20px !important;
  box-shadow: var(--mp-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  border: 1px solid var(--mp-border-color, #e2e8f0);
}

.mp-pdp-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--mp-text-main, #1e293b) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.mp-pdp-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12px !important;
  color: var(--mp-text-muted, #64748b) !important;
  margin-bottom: 12px !important;
}

.mp-price-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--mp-border-color, #f1f5f9) !important;
}

.mp-price-values {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.mp-price-now {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--mp-text-main, #0f172a) !important;
  white-space: nowrap !important;
}

.mp-price-now--special {
  color: var(--mp-badge-discount-bg, #dc2626) !important;
}

.mp-price-was {
  font-size: 14px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
}

.mp-availability {
  font-size: 12px !important;
  color: #16a34a !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

.mp-price-now {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--mp-text-main, #0f172a) !important;
}

.mp-price-now--special {
  color: var(--mp-badge-discount-bg, #dc2626) !important;
}

.mp-price-was {
  font-size: 14px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.mp-availability {
  font-size: 12px !important;
  color: #16a34a !important;
  font-weight: 600 !important;
  margin-left: auto !important;
}

/* Compact Standard OpenCart Options */
.mp-options-wrap {
  margin-bottom: 12px !important;
}

.mp-option-group {
  margin-bottom: 10px !important;
}

.mp-option-group .control-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--mp-text-muted, #64748b) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.mp-option-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  gap: 10px;
}

.mp-option-head__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mp-option-head__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mp-option-head__count {
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
}

.mp-selected-opt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mp-bg-light, #f1f5f9);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}

.mp-selected-opt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-primary, #8C9D93);
}

.mp-selected-opt-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
}

.mp-option-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.mp-option-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  min-height: 32px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--mp-border-color, #cbd5e1) !important;
  border-radius: 6px !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  color: var(--mp-text-main, #1e293b) !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  line-height: 1.2 !important;
  user-select: none !important;
}

.mp-option-btn:hover {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  transform: translateY(-1px) !important;
}

.mp-option-btn.selected,
.mp-option-btn:has(input:checked) {
  border: 1.5px solid var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  color: var(--mp-text-main, #1e293b) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.mp-option-btn--image {
  padding: 2px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--mp-border-color, #cbd5e1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #ffffff !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.mp-option-btn--image .mp-option-thumb {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  display: block !important;
  padding: 0 !important;
}

.mp-option-btn--image:hover {
  border-color: var(--mp-primary, #8C9D93) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.mp-option-btn--image.selected,
.mp-option-btn--image:has(input:checked) {
  border: 2px solid var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 2px rgba(140, 157, 147, 0.3), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}

.mp-option-btn input[type="radio"],
.mp-option-btn input[type="checkbox"] {
  display: none !important;
}

.mp-option-thumb {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.mp-option-name {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Select-type options: themed closed select + dropdown list colors.
   Chromium paints the native popup from these option styles, so the
   system blue highlight is replaced with the theme accent. */
.mp-option-group select.mp-form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 32px;
  padding: 4px 34px 4px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mp-text-main, #1e293b);
  background-color: var(--mp-bg-surface, #ffffff);
  border: 1.5px solid var(--mp-border-color, #cbd5e1);
  border-radius: 6px;
  color-scheme: light;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease;
}

.mp-option-group select.mp-form-control:hover {
  border-color: var(--mp-primary, #8C9D93);
}

.mp-option-group select.mp-form-control:focus {
  border-color: var(--mp-primary, #8C9D93);
  box-shadow: none;
  outline: none;
}

.mp-option-group select.mp-form-control option {
  background-color: #ffffff;
  color: #1e293b;
}

.mp-option-group select.mp-form-control option:checked,
.mp-option-group select.mp-form-control option:hover {
  background-color: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

[data-theme="dark"] .mp-option-group select.mp-form-control {
  background-color: var(--vita-dark-input) !important;
  border-color: var(--vita-dark-control-border) !important;
  color: #FFFFFF !important;
  color-scheme: dark;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23E5E2E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .mp-option-group select.mp-form-control:focus {
  background-color: var(--vita-dark-input) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-option-group select.mp-form-control option {
  background-color: var(--vita-dark-surface);
  color: var(--vita-dark-text);
}

[data-theme="dark"] .mp-option-group select.mp-form-control option:checked,
[data-theme="dark"] .mp-option-group select.mp-form-control option:hover {
  background-color: var(--vita-dark-border-hover);
  color: #FFFFFF;
}

/* ==========================================================================
   Mebel.kz Style Options Configurator Card & Fabric Swatches
   ========================================================================== */

.mp-configurator-card {
  border: 1.5px solid var(--mp-border-color, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--mp-bg-surface, #ffffff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mp-configurator-card:hover {
  border-color: #cbd5e1;
}

.mp-configurator-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--mp-bg-light, #f8fafc);
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.mp-configurator-card__header:hover {
  background: #f1f5f9;
}

.mp-configurator-card__title-col {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mp-configurator-card__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  letter-spacing: -0.01em;
}

.mp-configurator-card__count {
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
  font-weight: 500;
}

.mp-configurator-card__selected-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-primary, #8C9D93);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-cfg-preview-thumb-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--mp-primary, #8C9D93);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mp-cfg-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-cfg-preview-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-configurator-card__chevron {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.mp-configurator-card__body {
  padding: 14px;
}

.mp-configurator-search {
  position: relative;
  margin-bottom: 12px;
}

.mp-configurator-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  pointer-events: none;
}

.mp-configurator-search input.mp-cfg-search-input {
  padding-left: 36px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--mp-border-color, #e2e8f0) !important;
  font-size: 13px !important;
  background: var(--mp-bg-surface, #ffffff) !important;
}

.mp-configurator-search input.mp-cfg-search-input:focus {
  border-color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 2px rgba(140, 157, 147, 0.2) !important;
}

/* Fabric Swatches Grid (Scrollable) */
.mp-configurator-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
  gap: 10px !important;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Individual Fabric Swatch Card */
.mp-fabric-card {
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
  transition: transform 0.15s ease !important;
  position: relative !important;
}

.mp-fabric-card.is-hidden {
  display: none !important;
}

.mp-fabric-card input[type="radio"],
.mp-fabric-card input[type="checkbox"] {
  display: none !important;
}

.mp-fabric-card__media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1.5px solid var(--mp-border-color, #e2e8f0) !important;
  background: #f8fafc !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mp-fabric-card:hover .mp-fabric-card__media {
  border-color: var(--mp-primary, #8C9D93) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.mp-fabric-card.selected .mp-fabric-card__media,
.mp-fabric-card:has(input:checked) .mp-fabric-card__media {
  border: 2px solid var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 2px rgba(140, 157, 147, 0.35), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

.mp-fabric-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mp-fabric-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #94a3b8;
  font-size: 14px;
  background: #f1f5f9;
}

.mp-fabric-card__check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.mp-fabric-card.selected .mp-fabric-card__check,
.mp-fabric-card:has(input:checked) .mp-fabric-card__check {
  display: flex !important;
}

.mp-fabric-card__info {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
}

.mp-fabric-card__name {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: var(--mp-text-main, #1e293b) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-height: 28px;
}

.mp-fabric-card.selected .mp-fabric-card__name,
.mp-fabric-card:has(input:checked) .mp-fabric-card__name {
  font-weight: 700 !important;
  color: var(--mp-text-main, #0f172a) !important;
}

.mp-fabric-card__price {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mp-primary, #8C9D93) !important;
  margin-top: 1px;
}

/* ==========================================================================
   Clean Pill Options (Legs, Sizes, Dimensions)
   ========================================================================== */

.mp-option-group--pills {
  margin-bottom: 18px;
}

.mp-option-pills-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.mp-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  min-height: 34px !important;
  border: 1.5px solid var(--mp-border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--mp-text-main, #1e293b) !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  margin: 0 !important;
}

.mp-pill-btn input[type="radio"],
.mp-pill-btn input[type="checkbox"] {
  display: none !important;
}

.mp-pill-btn:hover {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  transform: translateY(-1px);
}

.mp-pill-btn.selected,
.mp-pill-btn:has(input:checked) {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  color: var(--mp-text-main, #1e293b) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.mp-pill-btn__price {
  font-size: 11px;
  color: var(--mp-text-muted, #64748b);
  font-weight: 400;
}

/* Custom Scrollbar for Configurator Grid */
.mp-custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.mp-custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}
.mp-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.mp-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--mp-primary, #8C9D93);
}

/* Dark mode overrides */
[data-theme="dark"] .mp-configurator-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .mp-configurator-card__header {
  background: #0f172a;
  border-bottom-color: #334155;
}
[data-theme="dark"] .mp-configurator-card__title {
  color: #f8fafc;
}
[data-theme="dark"] .mp-configurator-search input.mp-cfg-search-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .mp-fabric-card__media {
  background: #0f172a !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .mp-fabric-card__name {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .mp-pill-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .mp-pill-btn.selected,
[data-theme="dark"] .mp-pill-btn:has(input:checked) {
  background: rgba(140, 157, 147, 0.2) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
}

.mp-option-price {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--mp-text-muted, #64748b) !important;
  margin-left: 2px !important;
}

.mp-option-btn.selected .mp-option-price {
  color: var(--mp-primary, #8C9D93) !important;
  font-weight: 600 !important;
}

.mp-option-group .form-control {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--mp-border-color, #cbd5e1) !important;
  max-width: 280px !important;
}

/* Compact Buy Actions Bar */
.mp-buy-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
}

.mp-qty-control {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--mp-border-color, #cbd5e1) !important;
  border-radius: 6px !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  height: 42px !important;
  width: 105px !important;
  flex-shrink: 0 !important;
}

.mp-qty-btn {
  width: 32px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  color: var(--mp-text-main, #1e293b) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: background 0.15s ease !important;
}

.mp-qty-btn:hover {
  background: var(--mp-bg-subtle, #f1f5f9) !important;
}

.mp-qty-input {
  width: 41px !important;
  height: 100% !important;
  border: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--mp-text-main, #1e293b) !important;
  background: transparent !important;
  padding: 0 !important;
}

.mp-btn-buy {
  flex: 1 !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.mp-btn-quick-buy {
  height: 34px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  border-color: var(--mp-border-color, #cbd5e1) !important;
  color: var(--mp-text-main, #1e293b) !important;
}

.mp-badges-row {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--mp-border-color, #f1f5f9) !important;
  gap: 8px !important;
}

.mp-badge-item {
  font-size: 12px !important;
}

.mp-extras-row {
  margin-top: 8px !important;
  font-size: 12px !important;
}

/* PDP Sticky Buy Box Fix */
.mp-pdp-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  position: relative !important;
}

.mp-sticky-col {
  position: relative !important;
  align-self: stretch !important;
}

.mp-sticky-box {
  position: static !important;
  background: var(--mp-bg-surface, #ffffff);
  border-radius: var(--mp-radius-lg, 10px);
  padding: 24px !important;
  box-shadow: var(--mp-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  border: 1px solid var(--mp-border-color, #e2e8f0);
  max-height: none !important;
  overflow: visible !important;
}

/* Product Meta Badges & Identifiers */
.mp-pdp-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  font-size: 12px !important;
  color: var(--mp-text-muted, #64748b) !important;
  margin-bottom: 12px !important;
}

.mp-pdp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mp-bg-subtle, #f8fafc);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--mp-text-main, #1e293b);
  line-height: 1.3;
}

.mp-pdp-meta-item strong {
  font-weight: 700;
  color: var(--mp-text-main, #0f172a);
}

.mp-meta-label {
  color: var(--mp-text-muted, #64748b);
  font-weight: 500;
}

/* Brief Specifications Preview Block */
.mp-brief-specs {
  background: var(--mp-bg-subtle, #f8fafc);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 6px);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.mp-brief-specs-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--mp-text-main, #1e293b);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-brief-specs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mp-brief-spec-item {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
}

.mp-brief-spec-name {
  color: var(--mp-text-muted, #64748b);
  flex-shrink: 0;
}

.mp-brief-spec-dots {
  flex: 1;
  border-bottom: 1px dotted #cbd5e1;
  margin: 0 6px 3px 6px;
}

.mp-brief-spec-val {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
  text-align: right;
  flex-shrink: 0;
  max-width: 55%;
}

.mp-brief-specs-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mp-brief-specs-more:hover {
  color: var(--mp-primary-hover, #7A8B81);
  text-decoration: underline;
}

.mp-option-btn--more {
  border-style: dashed !important;
  color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
}

.mp-option-btn--more:hover {
  background: #ffffff !important;
  border-style: solid !important;
}

.mp-modal-opt-item {
  margin-bottom: 4px;
}

/* Home Filter Overflow Button */
.mp-btn-catalog-overflow {
  background: var(--mp-primary, #8C9D93) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.mp-btn-catalog-overflow:hover {
  background: var(--mp-primary-hover, #7A8B81) !important;
  border-color: var(--mp-primary-hover, #7A8B81) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(140, 157, 147, 0.35) !important;
}

/* ============================================================
   PDP Filter Drawer (off-canvas right)
   ============================================================ */

/* Body scroll lock */
body.vita-drawer-lock {
  overflow: hidden;
}

/* Dark overlay behind drawer */
.vita-pdp-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vita-pdp-drawer-overlay--visible {
  display: block;
  opacity: 1;
}

/* Drawer panel */
.vita-pdp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 640px;
  max-width: 95vw;
  height: 100%;
  background: #ffffff;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 40px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.vita-pdp-drawer--open {
  transform: translateX(0);
}

/* Header */
.vita-pdp-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
  flex-shrink: 0;
}
.vita-pdp-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vita-pdp-drawer-title .fa {
  color: var(--mp-primary, #8C9D93);
  font-size: 15px;
}
.vita-pdp-drawer-close-x {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--mp-text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.vita-pdp-drawer-close-x:hover {
  background: var(--mp-border-color, #e2e8f0);
  color: var(--mp-text-main, #1e293b);
}

/* Scrollable body */
.vita-pdp-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}
.vita-pdp-drawer-body::-webkit-scrollbar {
  width: 5px;
}
.vita-pdp-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 4px;
}

/* Sticky footer with close button (like mebel.kz) */
.vita-pdp-drawer-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--mp-border-color, #e2e8f0);
  background: #ffffff;
}
.vita-pdp-drawer-close-btn {
  display: block;
  width: 100%;
  padding: 13px 0;
  background: var(--mp-text-main, #1e293b);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  letter-spacing: 0.02em;
}
.vita-pdp-drawer-close-btn:hover {
  background: #334155;
}

/* Responsive: full width on mobile */
@media (max-width: 480px) {
  .vita-pdp-drawer {
    width: 100%;
    max-width: 100vw;
  }
}

/* ============================================================
   Drawer Configurator — price row, options, confirm, chips
   ============================================================ */

/* Price row */
.vita-pdp-drawer-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px;
  background: var(--mp-bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
  flex-shrink: 0;
}
.vita-drawer-price-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.vita-drawer-price-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--mp-primary, #8C9D93);
  line-height: 1;
}
.vita-drawer-price-was {
  display: none;
  font-size: 14px;
  color: var(--mp-text-muted, #94a3b8);
  text-decoration: line-through;
}

/* Option group */
.vita-drawer-option-group {
  margin-bottom: 20px;
}
.vita-drawer-opt-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vita-drawer-required {
  color: #ef4444;
  font-size: 14px;
}

/* Option search inside drawer */
.vita-drawer-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.vita-drawer-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.vita-drawer-search-wrap input.vita-lazy-search {
  padding-left: 38px !important;
  height: 42px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--mp-border-color, #cbd5e1) !important;
  font-size: 13.5px !important;
}

/* Option buttons grid */
.vita-drawer-opt-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Visual Cards Grid for Swatches */
.vita-drawer-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.vita-drawer-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 6px !important;
  border: 1.5px solid var(--mp-border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  user-select: none !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}

.vita-drawer-card:hover {
  border-color: var(--mp-primary, #8C9D93) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.vita-drawer-card.vita-drawer-btn--selected,
.vita-drawer-card:has(input:checked) {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  box-shadow: 0 0 0 1.5px var(--mp-primary, #8C9D93), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.vita-drawer-card__media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 90px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.vita-drawer-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.vita-drawer-card__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.vita-drawer-card.vita-drawer-btn--selected .vita-drawer-card__check,
.vita-drawer-card:has(input:checked) .vita-drawer-card__check {
  display: flex !important;
}

.vita-drawer-card__content {
  padding-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.vita-drawer-card__name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--mp-text-main, #1e293b) !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  text-overflow: ellipsis !important;
  min-height: 28px !important;
  margin: 0 !important;
}

.vita-drawer-card__price {
  font-size: 11px !important;
  color: var(--mp-primary, #8C9D93) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

/* Pills and standard buttons in drawer */
.vita-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--mp-border-color, #e2e8f0);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-text-main, #1e293b);
  transition: all 0.2s ease;
  user-select: none;
}
.vita-drawer-btn:hover {
  border-color: var(--mp-primary, #8C9D93);
  background: var(--mp-primary-light, #F2F6F4);
  transform: translateY(-1px);
}
.vita-drawer-btn.vita-drawer-btn--selected {
  border-color: var(--mp-primary, #8C9D93);
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  font-weight: 600;
}
.vita-drawer-btn.vita-drawer-btn--hidden {
  display: none !important;
}

/* Checkbox variant */
.vita-drawer-btn--check.vita-drawer-btn--selected {
  border-color: var(--mp-primary, #8C9D93);
  background: var(--mp-primary-light, #F2F6F4);
  color: var(--mp-primary, #8C9D93);
}

/* Price addon inside button */
.vita-drawer-btn-price {
  font-size: 11px;
  opacity: 0.8;
}

/* Show more button */
.vita-drawer-show-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px dashed var(--mp-primary, #8C9D93);
  border-radius: 6px;
  background: transparent;
  color: var(--mp-primary, #8C9D93);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.vita-drawer-show-more:hover {
  background: var(--mp-primary-light, #F2F6F4);
}

/* Quantity row inside drawer */
.vita-drawer-qty-row {
  border-top: 1px solid var(--mp-border-color, #e2e8f0);
  padding-top: 16px;
  margin-top: 4px;
}
.vita-drawer-qty-control {
  margin-top: 8px;
}

/* Confirm button */
.vita-pdp-drawer-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  letter-spacing: 0.01em;
}
.vita-pdp-drawer-confirm-btn:hover {
  background: var(--mp-primary-hover, #7A8B81);
}

/* ─── Selected options chips in buy box ─────────────────────── */
.mp-selected-chips {
  display: none;
  margin: 10px 0 4px;
  padding: 10px 14px;
  background: var(--mp-primary-light, #F2F6F4);
  border: 1px solid var(--mp-primary, #8C9D93);
  border-radius: 8px;
  font-size: 12px;
}
.mp-chips-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-primary, #8C9D93);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mp-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #ffffff;
  border: 1px solid var(--mp-primary, #8C9D93);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
}

/* Dark theme: selected-options chips + special price must use the warm
   graphite palette (readable on dark; the light sage/white chip surfaces
   disappear against --mp-bg-surface and invert the text color). */
[data-theme="dark"] .mp-selected-chips {
  background: var(--mp-bg-subtle, var(--vita-dark-subtle));
  border-color: var(--mp-border-color, var(--vita-dark-border));
}

[data-theme="dark"] .mp-chip {
  background: var(--mp-bg-surface, var(--vita-dark-surface));
  border-color: var(--mp-border-hover, var(--vita-dark-border-hover));
  color: var(--mp-text-main, #FFFFFF);
}

[data-theme="dark"] .mp-price-now--special {
  color: #f87171 !important;
}

/* Compare link on PDP: visible "in comparison" state */
[data-vita-compare].mp-compared,
[data-vita-compare].mp-compared i {
  color: var(--mp-primary, #8C9D93);
}



/* ============================================================
   PDP Options Configurator Drawer — Full Mobile Responsiveness
   ============================================================ */
@media (max-width: 767px) {
  .vita-pdp-drawer {
    width: 100% !important;
    max-width: 100vw !important;
    box-shadow: none;
  }
  .vita-pdp-drawer-header {
    padding: 14px 16px 12px;
  }
  .vita-pdp-drawer-title {
    font-size: 15px;
  }
  .vita-pdp-drawer-close-x {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .vita-pdp-drawer-price-row {
    padding: 10px 16px;
  }
  .vita-drawer-price-val {
    font-size: 20px;
  }
  .vita-pdp-drawer-body {
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .vita-drawer-opt-label {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .vita-drawer-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 38px;
  }
  .vita-pdp-drawer-footer {
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    background: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .vita-pdp-drawer-confirm-btn {
    padding: 13px 0;
    font-size: 15px;
    border-radius: 8px;
  }
  .mp-selected-chips {
    margin: 8px 0;
    padding: 8px 12px;
  }
  .mp-chips-label {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .mp-chip {
    padding: 4px 10px;
    font-size: 12px;
  }
  .mp-btn-filter-trigger {
    height: 38px !important;
    font-size: 13px !important;
  }
}


/* ============================================================
   PDP Master Grid (Desktop 2-Col Balanced / Mobile Single Stream)
   ============================================================ */
.mp-pdp-layout {
  width: 100%;
}

@media (min-width: 992px) {
  .mp-pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); /* 60% Gallery/Specs, 40% Sticky Buy Box */
    grid-template-rows: auto auto;
    column-gap: 28px;
    align-items: start;
  }
  .mp-pdp-gallery-area {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .mp-pdp-buybox-area {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    /* Pin offset is computed in pdp.js: fixation starts only once the buy box
       bottom (options + buy button) is fully in view and holds until the
       layout ends, so the button never requires scrolling past the details. */
    top: auto;
    min-width: 0;
  }
  .mp-pdp-details-area {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
}

@media (max-width: 991px) {
  .mp-pdp-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mp-pdp-gallery-area {
    order: 1;
    width: 100%;
  }
  .mp-pdp-buybox-area {
    order: 2;
    width: 100%;
  }
  .mp-pdp-details-area {
    order: 3;
    width: 100%;
  }
}

/* ============================================================
   PDP Split Layout (theme_vita_product_two_columns_status):
   image | product data | purchase block, like the mechta-style
   reference. Desktop 3 columns; tablet keeps gallery + buy box
   side by side and flows the data block below the gallery;
   mobile stacks with the buy box right after the gallery.
   ============================================================ */
.mp-pdp-layout--columns .mp-pdp-data-area {
  min-width: 0;
}
.mp-pdp-layout--columns .mp-pdp-title-area {
  min-width: 0;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
@media (min-width: 992px) {
  .mp-pdp-layout--columns .mp-pdp-title-area {
    margin-bottom: 16px;
  }
}

@media (min-width: 1200px) {
  .mp-pdp-layout--columns {
    display: grid;
    grid-template-columns: minmax(0, 39fr) minmax(0, 35fr) minmax(0, 26fr);
    grid-template-rows: auto auto auto;
    column-gap: 24px;
    align-items: start;
  }
  .mp-pdp-layout--columns .mp-pdp-gallery-area {
    grid-column: 1;
    /* Span the title row too: row 1 then hugs the short title card instead of
       stretching to the gallery height, so the data blocks (props, brief,
       options) start right under the title instead of below the image line. */
    grid-row: 1 / span 2;
  }
  .mp-pdp-layout--columns .mp-pdp-title-area {
    grid-column: 2;
    grid-row: 1;
  }
  .mp-pdp-layout--columns .mp-pdp-data-area {
    grid-column: 2;
    grid-row: 2;
  }
  .mp-pdp-layout--columns .mp-pdp-buybox-area {
    grid-column: 3;
    grid-row: 1 / span 3;
    position: sticky;
    /* Pin offset is computed in pdp.js, same as the classic layout:
       the box stays pinned until the end of the two-column grid
       (description, specifications, reviews, related products). */
    top: auto;
  }
  .mp-pdp-layout--columns .mp-pdp-details-area {
    grid-column: 1 / span 2;
    grid-row: 3;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .mp-pdp-layout--columns {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 28px;
    align-items: start;
  }
  .mp-pdp-layout--columns .mp-pdp-gallery-area {
    grid-column: 1;
    grid-row: 1;
  }
  .mp-pdp-layout--columns .mp-pdp-buybox-area {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: auto;
  }
  .mp-pdp-layout--columns .mp-pdp-title-area {
    grid-column: 1;
    grid-row: 2;
  }
  .mp-pdp-layout--columns .mp-pdp-data-area {
    grid-column: 1;
    grid-row: 3;
  }
  .mp-pdp-layout--columns .mp-pdp-details-area {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (max-width: 991px) {
  .mp-pdp-layout--columns .mp-pdp-gallery-area {
    order: 1;
  }
  .mp-pdp-layout--columns .mp-pdp-title-area {
    order: 2;
  }
  .mp-pdp-layout--columns .mp-pdp-buybox-area {
    order: 3;
  }
  .mp-pdp-layout--columns .mp-pdp-data-area {
    order: 4;
  }
  .mp-pdp-layout--columns .mp-pdp-details-area {
    order: 5;
  }
}

/* Options relocated into the buy box on mobile by pdp.js sit above the
   buy button; add separation from the price block above them. */
.mp-pdp-layout--columns .mp-pdp-buybox-area .mp-options-wrap {
  margin-top: 14px;
}

/* Option value image popover (Bootstrap popover, hover on thumbnails) */
.vita-opt-pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.popover .vita-opt-pop__img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 4px;
}
.vita-opt-pop__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-primary, #8C9D93);
}
.popover.vita-opt-popover .popover-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.mp-option-btn--image[data-vita-pop="1"] {
  cursor: help;
}
[data-theme="dark"] .popover {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border-hover);
  color: var(--vita-dark-text);
}
[data-theme="dark"] .popover .popover-title {
  background: var(--vita-dark-page);
  border-bottom-color: var(--vita-dark-input);
  color: var(--vita-dark-text);
}
[data-theme="dark"] .popover.top > .arrow,
[data-theme="dark"] .popover.top > .arrow:after {
  border-top-color: var(--vita-dark-surface);
}

/* Purchase block custom fields (theme_vita_product_buy_fields) */
.vita-pd-buy-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mp-border-color, #e2e8f0);
}
.vita-pd-buy-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vita-pd-buy-field__icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--mp-primary, #8C9D93);
}
.vita-pd-buy-field__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.vita-pd-buy-field__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main, #0f172a);
}
.vita-pd-buy-field__text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mp-text-muted, #64748b);
}

/* Ensure sticky buy bar is hidden by default and only slides in when scrolled past buy box */
.vita-sticky-buy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990 !important;
  background: #ffffff;
  border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.vita-sticky-buy-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   Vita Ergonomics — Mobile PDP Refinements
   ============================================================ */
.mp-brief-specs {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--mp-bg-subtle, #F8FAFC);
  border: 1px solid var(--mp-border-color, #E2E8F0);
  border-radius: var(--mp-radius-md, 8px);
}

.mp-brief-specs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text-main, #0F172A);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-brief-specs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-brief-spec-item {
  display: flex;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.4;
}

.mp-brief-spec-name {
  color: var(--mp-text-muted, #64748B);
  flex-shrink: 0;
}

.mp-brief-spec-dots {
  flex: 1;
  border-bottom: 1px dotted #CBD5E1;
  margin: 0 6px 3px;
}

.mp-brief-spec-val {
  color: var(--mp-text-main, #0F172A);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

.mp-brief-specs-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-primary, #8C9D93);
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}

.mp-brief-specs-more:hover {
  opacity: 0.8;
  text-decoration: underline !important;
}

@media (max-width: 767px) {
  .mp-pdp-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .mp-pdp-meta {
    margin-bottom: 12px !important;
    gap: 8px !important;
  }
  .mp-price-box {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
  }
  .mp-price-now {
    font-size: 24px !important;
  }
  .mp-buy-actions {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .mp-btn-buy {
    height: 46px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  .mp-btn-quick-buy {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}


/* ============================================================
   Vita Mobile PDP Benchmark & Bottom Bar
   ============================================================ */

/* 1. Full-bleed mobile specs with dotted leader lines */
.vita-spec-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vita-spec-group {
  margin-bottom: 8px;
}

.vita-spec-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text-main, #0F172A);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--mp-border-color, #E2E8F0);
  letter-spacing: 0.04em;
}

.vita-spec-row {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
}

.vita-spec-label {
  color: var(--mp-text-muted, #64748B);
  flex-shrink: 0;
  max-width: 55%;
}

.vita-spec-value {
  color: var(--mp-text-main, #0F172A);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
  max-width: 45%;
}

/* 2. Vita Option Chips */
.mp-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--mp-border-color, #CBD5E1);
  border-radius: var(--mp-radius-md, 8px);
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main, #1E293B);
  transition: all 0.15s ease;
  user-select: none;
}

.mp-option-btn:hover {
  border-color: var(--mp-primary, #8C9D93);
  background: var(--mp-primary-light, #F2F6F4);
}

.mp-option-btn.selected, .mp-option-btn:has(input:checked) {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: var(--mp-primary-light, #F2F6F4) !important;
  color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 1px var(--mp-primary, #8C9D93);
}




/* ============================================================
   PDP Enhancements: Breadcrumbs, Lightbox Text, Meta Grid, 52px Buy Button
   ============================================================ */

/* 1. Horizontal Scrollable Breadcrumbs on Mobile */
.breadcrumb.mp-breadcrumb {
  background: transparent !important;
  padding: 8px 0 12px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

.breadcrumb.mp-breadcrumb::-webkit-scrollbar {
  display: none !important;
}

.breadcrumb.mp-breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.breadcrumb.mp-breadcrumb > li + li:before {
  padding: 0 6px !important;
  color: #94A3B8 !important;
  content: "/\00a0" !important;
}

/* 2. Lightbox Title Text Always Crisp White */
.mp-lb-title, .mp-lb-header, #mp-lb-title,
.mfp-title, .mfp-counter, .lb-caption, .lb-number, .lb-data, .pswp__caption__center {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
}

/* 3. Meta Identifiers Grid (2 Per Row on Mobile/Tablet) */
.mp-pdp-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  font-size: 12px !important;
  margin-bottom: 16px !important;
}

.mp-pdp-meta-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--mp-bg-subtle, #F8FAFC) !important;
  border: 1px solid var(--mp-border-color, #E2E8F0) !important;
  border-radius: 6px !important;
  padding: 5px 9px !important;
  font-size: 11.5px !important;
  color: var(--mp-text-main, #1E293B) !important;
  min-width: 0 !important;
}

.mp-pdp-meta-item .mp-meta-label {
  color: var(--mp-text-muted, #64748B) !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

.mp-pdp-meta-item strong {
  font-weight: 700 !important;
  color: var(--mp-text-main, #0F172A) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mp-pdp-rating {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  color: #F59E0B !important;
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  width: fit-content !important;
}

/* 4. Large 52px High Buy CTA & Stepper */
.mp-buy-actions {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.mp-qty-control {
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--mp-border-color, #CBD5E1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.mp-qty-btn {
  width: 38px !important;
  height: 100% !important;
  background: var(--mp-bg-subtle, #F8FAFC) !important;
  border: none !important;
  color: var(--mp-text-main, #1E293B) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}

.mp-qty-btn:hover {
  background: #E2E8F0 !important;
}

.mp-qty-input {
  width: 44px !important;
  height: 100% !important;
  border: none !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mp-text-main, #0F172A) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mp-btn-buy {
  flex: 1 !important;
  height: 52px !important;
  min-height: 52px !important;
  background: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 16px rgba(140, 157, 147, 0.35) !important;
  transition: all 0.2s ease !important;
}

.mp-btn-buy:hover {
  background: var(--mp-primary-hover, #7A8B81) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(140, 157, 147, 0.45) !important;
}

.mp-btn-buy .fa {
  font-size: 18px !important;
}

.mp-btn-quick-buy {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--mp-primary, #8C9D93) !important;
  color: var(--mp-primary, #8C9D93) !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  transition: all 0.15s ease !important;
}

.mp-btn-quick-buy:hover {
  background: var(--mp-primary-light, #F2F6F4) !important;
}


/* ============================================================
   Vita Specifications Layout (2 Columns on Desktop / 1 on Mobile)
   ============================================================ */
.vita-specs-panel {
  padding: 24px;
}

.vita-specs-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vita-spec-group {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.vita-spec-group--extra {
  display: none;
}

.vita-spec-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text-main, #0F172A);
  margin: 0 0 10px 0;
  padding: 0 0 4px 0;
  border-bottom: 1.5px solid var(--mp-border-color, #E2E8F0);
  letter-spacing: 0.02em;
}

.vita-spec-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;
}

.vita-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 12px;
  padding: 5px 0;
  border-bottom: none;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}

.vita-spec-label {
  color: var(--mp-text-muted, #64748B);
  font-weight: 500;
  flex: 1;
}

.vita-spec-value {
  color: var(--mp-text-main, #0F172A);
  font-weight: 500;
  text-align: right;
  flex-shrink: 0;
  max-width: 60%;
  word-break: break-word;
}

.vita-copy-btn {
  background: none;
  border: none;
  padding: 0 0 0 6px;
  margin: 0;
  color: var(--mp-text-muted, #64748B);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.vita-spec-row:hover .vita-copy-btn,
.mp-pdp-prop-row:hover .vita-copy-btn,
.vita-copy-btn:focus-visible {
  opacity: 1;
}

.vita-copy-btn:hover {
  color: var(--mp-primary, #8C9D93);
}

.vita-copy-btn.is-copied {
  color: #16A34A;
  opacity: 1;
}

.mp-pdp-prop-row .vita-copy-btn {
  opacity: 1;
  color: #94A3B8;
}

.mp-pdp-prop-row .vita-copy-btn:hover {
  color: var(--mp-primary, #8C9D93);
}

@media (max-width: 767px) {
  .vita-spec-row .vita-copy-btn {
    opacity: 1;
    color: #94A3B8;
  }
}

.vita-specs-toggle-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--mp-border-color, #E2E8F0);
  text-align: center;
}

.vita-specs-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-primary, #8C9D93);
  border: 1.5px solid var(--mp-primary, #8C9D93);
  border-radius: 8px;
  background: transparent;
  transition: all 0.15s ease;
}

.vita-specs-toggle-btn:hover {
  background: var(--mp-primary-light, #F2F6F4);
  color: var(--mp-primary-hover, #7A8B81);
  border-color: var(--mp-primary-hover, #7A8B81);
}


/* ============================================================
   Global Comprehensive Dark Mode Styles
   ============================================================ */
[data-theme="dark"] .mp-panel,
[data-theme="dark"] .mp-product-card,
[data-theme="dark"] .mp-brand-card,
[data-theme="dark"] .mp-category-card,
[data-theme="dark"] .mp-info-card,
[data-theme="dark"] .mp-card-box {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .mp-block-title,
[data-theme="dark"] .mp-block-title-lg,
[data-theme="dark"] .mp-h1,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 {
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-action-btn,
[data-theme="dark"] .mp-action-item,
[data-theme="dark"] .mp-header-btn,
[data-theme="dark"] .mp-header-action-btn {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .mp-action-btn:hover,
[data-theme="dark"] .mp-action-item:hover,
[data-theme="dark"] .mp-header-btn:hover,
[data-theme="dark"] .mp-header-action-btn:hover {
  background: var(--vita-dark-hover) !important;
  color: #FFFFFF !important;
}

/* Dark theme + hero slider: inside the not-yet-scrolled overlay header the
   global opaque dark control backgrounds turn every control into a "square"
   floating over the slider. The overlay must win: controls follow the overlay
   tokens (--vita-header-action-*), for the light scheme that means transparent
   controls with dark text, for dark/auto - transparent with white text. */
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-btn,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-item,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-header-btn,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-header-action-btn {
  background: var(--vita-header-action-bg, transparent) !important;
  border-color: transparent !important;
  color: var(--vita-header-action-text, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-btn:hover,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-item:hover,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-header-btn:hover,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-header-action-btn:hover {
  background: var(--vita-header-action-hover-bg, rgba(255, 255, 255, .14)) !important;
  color: var(--vita-header-action-hover, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-item i,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-action-item span {
  color: var(--vita-header-action-text, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-theme-toggle--topbar,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-theme-toggle--mobile {
  background: var(--vita-topbar-control-bg, rgba(255, 255, 255, .12)) !important;
  color: var(--vita-topbar-control-text, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-theme-toggle--topbar:hover,
[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-theme-toggle--mobile:hover {
  background: var(--vita-topbar-control-border, rgba(255, 255, 255, .24)) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-pill-item {
  background: transparent !important;
  color: var(--vita-topbar-text, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-pill-item.is-active {
  background: var(--vita-topbar-control-bg, rgba(255, 255, 255, .16)) !important;
  color: var(--vita-topbar-control-text, #ffffff) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled).vita-header-overlay--light .mp-pill-item {
  color: var(--vita-topbar-text, #0f172a) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled).vita-header-overlay--light .mp-pill-item.is-active {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form--stock .input-group .form-control {
  background: var(--vita-header-search-bg) !important;
  color: var(--vita-header-search-text) !important;
  border-color: var(--vita-header-search-border) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form--stock .input-group .form-control::placeholder {
  color: var(--vita-header-search-placeholder, var(--vita-dark-muted)) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form--stock .input-group .btn {
  background: var(--vita-header-search-button-bg) !important;
  color: var(--vita-header-search-button-text) !important;
  border-color: var(--vita-header-search-button-bg) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form {
  background: var(--vita-header-search-bg) !important;
  border-color: var(--vita-header-search-border) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form:focus-within {
  background: var(--vita-header-search-bg) !important;
  border-color: var(--vita-header-search-border) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form .mp-search-input {
  color: var(--vita-header-search-text) !important;
}

[data-theme="dark"] .vita-header-overlay:not(.is-scrolled) .mp-search-form .mp-search-input::placeholder {
  color: var(--vita-header-search-placeholder, var(--vita-dark-muted)) !important;
}

[data-theme="dark"] .btn-default {
  background-color: var(--vita-dark-input) !important;
  border-color: var(--vita-dark-control-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active {
  background-color: var(--vita-dark-control-border) !important;
  border-color: #5A5464 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--vita-dark-input) !important;
  border-color: var(--vita-dark-control-border) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .form-control:focus {
  background-color: #403C47 !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  background-color: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span {
  background-color: var(--mp-primary, #8C9D93) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .vita-specs-panel,
[data-theme="dark"] .mp-brief-specs {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border) !important;
}

[data-theme="dark"] .vita-spec-group-title {
  color: #FFFFFF !important;
  border-bottom-color: var(--vita-dark-border) !important;
}

[data-theme="dark"] .vita-spec-label {
  color: var(--vita-dark-muted) !important;
}

[data-theme="dark"] .vita-spec-value {
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-pdp-meta-item {
  background: var(--vita-dark-input) !important;
  border-color: var(--vita-dark-control-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .mp-pdp-meta-item strong {
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-qty-control {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-control-border) !important;
}

[data-theme="dark"] .mp-qty-btn {
  background: var(--vita-dark-input) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-qty-input {
  background: var(--vita-dark-surface) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-btn-quick-buy {
  background: transparent !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-btn-quick-buy:hover {
  background: rgba(140, 157, 147, 0.2) !important;
}

[data-theme="dark"] .vita-pdp-drawer {
  background: var(--vita-dark-page) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .vita-drawer-btn {
  background: var(--vita-dark-surface) !important;
  border-color: var(--vita-dark-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .vita-drawer-btn:hover {
  border-color: var(--mp-primary, #8C9D93) !important;
}

[data-theme="dark"] .vita-drawer-btn--selected {
  border-color: var(--mp-primary, #8C9D93) !important;
  background: rgba(140, 157, 147, 0.2) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .tech-footer {
  background: var(--vita-dark-topbar) !important;
  border-top-color: var(--vita-dark-surface) !important;
  color: var(--vita-dark-muted) !important;
}

[data-theme="dark"] .tech-footer h5,
[data-theme="dark"] .mp-footer-brand-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .tech-footer-list a {
  color: var(--vita-dark-muted) !important;
}

[data-theme="dark"] .tech-footer-list a:hover {
  color: #FFFFFF !important;
}

[data-theme="dark"] .mp-footer-bottom {
  border-top-color: var(--vita-dark-surface) !important;
}

/* ==========================================================================
   Vita common partials — styles moved from inline attributes / <style> blocks
   (home top stage, logo icon image, form message, quick auth, fast order)
   Values preserved 1:1 from the original inline styles.
   ========================================================================== */

#home-top-stage {
  margin-bottom: 24px;
}

.mp-logo-text-icon-img {
  object-fit: contain;
  flex-shrink: 0;
}

/* ===== Vita forms (vita_form module) ===== */

/* Inline form («Форма на странице»): a proper card instead of a bare
   full-width field stack. */
.vita-form--inline {
  max-width: 720px;
  margin: 28px auto;
  padding: 24px;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-lg, 16px);
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.28);
}

.vita-form__title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mp-text-main, #0f172a);
}

.vita-form--inline .form-group {
  margin-bottom: 16px;
}

.vita-form--inline .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mp-text-main, #0f172a);
}

.vita-form--inline .form-text {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mp-text-muted, #64748b);
}

/* Inside a modal the modal itself supplies the card chrome. */
.vita-form--modal {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Submit button: same look as the modal action buttons, in every context
   (the inline form has no .modal-body wrapper to style it). */
.vita-form .vita-form-submit {
  height: 42px;
  padding: 0 22px;
  border: none;
  border-radius: var(--mp-radius-md, 8px);
  background-color: var(--mp-primary, #8C9D93);
  background-image: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(140, 157, 147, 0.35);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.vita-form .vita-form-submit:hover,
.vita-form .vita-form-submit:focus {
  background-color: var(--mp-primary-hover, #7a8c82);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.45);
}

.vita-form .vita-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.vita-form .vita-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}

.vita-form .vita-form-captcha {
  margin-bottom: 16px;
}

.vita-form .vita-form-captcha img {
  max-width: 100%;
  height: auto;
}

.vita-form-message {
  margin-top: 12px;
}

.vita-form .vita-form-message.text-success {
  color: #2f855a;
}

.vita-form .vita-form-message.text-danger {
  color: #c53030;
}

/* Sent state: the submit button gives way to the confirmation, which takes its
   place in the layout (same height) instead of showing up under it. There is
   nothing left to press, so the button is gone for good on this page. */
.vita-form--sent .vita-form-submit {
  display: none;
}

.vita-form .vita-form-message.vita-form-message--sent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 0;
  padding: 10px 14px;
  border: 1px solid var(--mp-border-color, #E2E8F0);
  border-radius: var(--mp-radius-md, 8px);
  background: var(--mp-bg-subtle, #f8fafc);
  color: var(--mp-text-main, #2D3748);
  font-size: 14px;
  font-weight: 600;
}

.vita-form .vita-form-message.vita-form-message--sent::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* Per-field validation message (rendered by common.js right under the field). */
.vita-form .vita-form-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}

.vita-form .form-group.has-error > label {
  color: #c53030;
}

.mp-auth-title-icon {
  color: var(--mp-primary, #8C9D93);
  margin-right: 6px;
}

.mp-auth-alert {
  display: none;
  margin-top: 14px;
}

.mp-auth-alert.is-error {
  padding: 10px 12px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
}

.mp-quick-badge-icon {
  color: var(--mp-primary);
  margin-right: 6px;
}

#quick-order-product-badge {
  display: none;
  margin-bottom: 15px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

#quick-order-success {
  display: none;
  padding: 20px;
}

#quick-order-success h3 {
  margin-top: 0;
}

#quikordermodal .has-error .form-control {
  border-color: #a94442;
}

#quikordermodal .has-error .text-danger {
  margin-top: 5px;
  font-size: 12px;
}

#quick-order-error {
  display: none;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 13px;
}

/* ============================================================
   Hardcode cleanup classes (inline styles moved to CSS)
   ============================================================ */

/* Generic card surface (sitemap / contact / checkout) */
.mp-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
}
.mp-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-card__list {
  padding-left: 20px;
  line-height: 1.8;
  margin-bottom: 0;
}
.mp-card__link {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
}
.mp-card--sitemap {
  padding: 24px;
  margin-bottom: 20px;
}
.mp-card--form {
  padding: 24px 30px;
  margin-bottom: 24px;
}
.mp-card--contact {
  padding: 20px;
  height: 100%;
}
.mp-icon-accent {
  color: var(--vita-primary, #8C9D93);
  margin-right: 6px;
}
.mp-empty-state {
  color: var(--vita-text-muted, #718096);
  font-size: 15px;
}
.mp-h1--gap24 {
  margin-bottom: 24px;
}

/* Contact page */
.mp-contact-info-row {
  margin-bottom: 24px;
}
.mp-contact-info-col {
  margin-bottom: 15px;
}
.mp-contact-icon {
  font-size: 20px;
  color: var(--vita-primary, #8C9D93);
  margin-bottom: 10px;
}
.mp-contact-label {
  font-size: 15px;
  display: block;
  margin-bottom: 6px;
}
.mp-contact-text {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.mp-contact-phone {
  font-size: 14px;
  font-weight: 600;
}
.mp-contact-fax {
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
  margin-top: 4px;
}
.mp-contact-map-btn {
  margin-top: 10px;
  border-radius: var(--mp-radius-sm, 4px);
}
.mp-form-label {
  font-weight: 600;
}
.mp-form-control-lg {
  border-radius: var(--mp-radius-md, 4px);
  height: 42px;
}
.mp-form-error {
  font-size: 12px;
  margin-top: 4px;
}
.mp-form-buttons {
  margin-top: 20px;
  text-align: right;
}
.mp-form-submit {
  padding: 10px 32px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
}

/* Checkout page */
.mp-checkout-city-row {
  margin-top: 14px;
}
.mp-checkout-cart-items {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 18px;
  padding-right: 4px;
}
.mp-checkout-coupon-group {
  margin-bottom: 18px;
}
.mp-checkout-coupon-group .input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.mp-checkout-coupon-group .input-group-btn {
  width: auto;
}
.mp-checkout-coupon-input {
  background: var(--mp-bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--mp-radius-lg);
  box-shadow: none;
  height: 38px;
  transition: var(--mp-transition);
}
.mp-checkout-coupon-input::placeholder {
  color: var(--mp-text-light);
}
.mp-checkout-coupon-input:focus {
  background: var(--mp-bg-surface);
  border-color: var(--mp-primary);
  box-shadow: none;
}
.mp-checkout-coupon-group .input-group .input-group-btn > .mp-checkout-coupon-btn,
.mp-checkout-coupon-btn {
  height: 38px;
  padding: 0 18px;
  background: var(--mp-primary);
  color: #ffffff !important;
  border: 1px solid var(--mp-primary);
  border-radius: var(--mp-radius-lg);
  font-weight: 600;
  transition: var(--mp-transition);
}
.mp-checkout-coupon-group .input-group .input-group-btn > .mp-checkout-coupon-btn:hover,
.mp-checkout-coupon-group .input-group .input-group-btn > .mp-checkout-coupon-btn:focus,
.mp-checkout-coupon-btn:hover,
.mp-checkout-coupon-btn:focus {
  background: var(--mp-primary-hover);
  border-color: var(--mp-primary-hover);
  color: #ffffff !important;
}
.mp-checkout-coupon-msg {
  margin-top: 4px;
}
.mp-checkout-secure-note {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--mp-text-light);
}
.mp-checkout-online-payment {
  display: none;
  margin-top: 15px;
}

/* PDP panels */
.mp-panel-gap16 {
  margin-bottom: 16px;
}
.mp-panel-gap24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.mp-reviews-count {
  font-size: 12px;
  opacity: 0.85;
}
.mp-discounts-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mp-discounts-title .mp-icon-accent {
  margin-right: 0;
}
.mp-discounts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-discount-chip {
  padding: 3px 8px;
  background: var(--mp-bg-surface, #ffffff);
  border: 1px solid var(--mp-border-color, #E2E8F0);
  border-radius: var(--mp-radius-sm, 2px);
  font-size: 12px;
  color: var(--mp-text-main, #1e293b);
}
.mp-discount-price {
  color: var(--vita-primary);
  font-weight: 700;
}
.mp-option-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.mp-option-head__label {
  margin-bottom: 0 !important;
}
.mp-btn-open-opt-modal {
  padding: 0;
  font-size: 11px;
  color: var(--mp-primary, #8C9D93);
  text-decoration: none;
}
.mp-btn-filter-trigger {
  margin-bottom: 10px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  background: var(--mp-primary-light, #F2F6F4) !important;
  border: 1.5px solid var(--mp-primary, #8C9D93) !important;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(140, 157, 147, 0.22);
  transition: all 0.15s ease;
}
.mp-btn-filter-trigger:hover,
.mp-btn-filter-trigger:focus {
  background: #ffffff !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: var(--mp-text-main, #1e293b) !important;
  box-shadow: 0 2px 8px rgba(140, 157, 147, 0.35);
}
[data-theme="dark"] .mp-btn-filter-trigger {
  background: rgba(140, 157, 147, 0.16) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}
[data-theme="dark"] .mp-btn-filter-trigger:hover,
[data-theme="dark"] .mp-btn-filter-trigger:focus {
  background: rgba(140, 157, 147, 0.28) !important;
  border-color: var(--mp-primary, #8C9D93) !important;
  color: #FFFFFF !important;
}
.mp-block-title-lg--tight {
  margin-bottom: 16px;
}
.mp-block-title-lg--flush {
  margin: 0;
}
.mp-block-title-lg--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vita-description-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mp-text-main, #334155);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.vita-description-body img,
#product-description img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  border-radius: 6px;
}
.vita-description-body iframe,
#product-description iframe,
.vita-description-body video,
#product-description video {
  max-width: 100% !important;
  height: auto;
  border-radius: 6px;
}
.vita-description-body table,
#product-description table {
  max-width: 100% !important;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.mp-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.mp-reviews-head .mp-block-title-lg {
  margin: 0;
}
.mp-btn-write-review {
  padding: 6px 14px;
  font-weight: 600;
}
.vita-drawer-hidden-input {
  display: none;
}

/* Filter listing card */
.mp-fl-gap-bottom {
  margin-bottom: 20px;
}
.mp-fl-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
  position: relative;
}
.mp-fl-stickers {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mp-fl-sticker {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.mp-fl-image {
  margin-bottom: 12px;
}
.mp-fl-img {
  margin: 0 auto;
  max-height: 200px;
  object-fit: contain;
}
.mp-fl-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px 0;
  min-height: 40px;
}
.mp-fl-name {
  color: #0f172a;
  text-decoration: none;
}
.mp-fl-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.mp-fl-attr {
  font-size: 11px;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 6px;
  border-radius: 4px;
}
.mp-fl-rating {
  margin-bottom: 8px;
  color: #f59e0b;
}
.mp-fl-price {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 10px 0;
}
.mp-fl-price-new {
  color: #dc2626;
}
.mp-fl-price-old {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 400;
  margin-left: 6px;
}
.mp-fl-buttons {
  display: flex;
  gap: 6px;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  margin-top: 10px;
}
.mp-fl-buy {
  flex: 1;
  font-weight: 600;
}
.mp-fl-results {
  color: #64748b;
  font-size: 12px;
  line-height: 34px;
}

/* Home overflow button (vita_listing) */
.mp-home-overflow-bar {
  margin-top: 24px;
  text-align: center;
}
.mp-btn-catalog-overflow {
  font-weight: 700;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.25);
  text-decoration: none;
}

/* Landing page sortbar (vita_landing_page) */
.mp-lp-sortbar {
  margin-bottom: 20px;
}

/* Account dashboard cards (account/account.twig) */
.mp-account-col {
  margin-bottom: 20px;
}
.mp-account-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 24px;
  height: 100%;
}
.mp-account-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-account-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2.2;
}
.mp-account-nav a {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
}
.mp-account-nav .fa {
  margin-right: 8px;
  color: #94a3b8;
}

/* Account form pages (register/edit/password/forgotten/login) */
.mp-form-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 24px 30px;
  margin-bottom: 24px;
}
.mp-form-legend {
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.mp-form-label {
  font-weight: 600;
}
.mp-form-label-block {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.mp-form-wrap {
  max-width: 600px;
  margin: 0 auto;
}
.mp-form-control-lg {
  height: 42px;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-form-error {
  font-size: 12px;
  margin-top: 4px;
}
.mp-form-intro {
  color: var(--mp-text-muted, #64748b);
  font-size: 14px;
  margin-bottom: 20px;
}
.mp-form-buttons {
  margin-top: 24px;
}
.mp-form-buttons--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mp-form-buttons--right {
  text-align: right;
}
.mp-form-buttons--end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.mp-form-checkbox-label {
  cursor: pointer;
  font-size: 13px;
  margin: 0;
}
.mp-btn-back {
  padding: 10px 24px;
  font-weight: 600;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-btn-primary-lg {
  padding: 10px 32px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-form-radio-hidden {
  display: none;
}
.mp-form-radio-hidden.is-visible {
  display: block;
}

/* Login page (account/login.twig) */
.mp-login-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mp-login-card--form {
  justify-content: flex-start;
}
.mp-login-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
}
.mp-login-card-sub {
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
  margin-bottom: 8px;
}
.mp-login-card-text {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
  line-height: 1.6;
}
.mp-login-card-text--strong {
  margin-bottom: 20px;
}
.mp-login-card-actions {
  margin-top: 24px;
}
.mp-login-card-btn {
  padding: 10px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-login-form-group {
  margin-bottom: 16px;
}
.mp-login-forgotten {
  text-align: right;
  margin-top: 6px;
}
.mp-login-forgotten a {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  text-decoration: underline;
}
.mp-login-submit {
  height: 42px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
  margin-top: 20px;
}

/* Order list table (account/order_list.twig) */
.mp-table-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 15px;
  margin-bottom: 20px;
}
.mp-table-flat {
  margin-bottom: 0;
}
.mp-table-head {
  background: var(--mp-bg-topbar, #f8fafc);
  border-bottom: 2px solid var(--mp-border-color, #e2e8f0);
}
.mp-table-th {
  font-weight: 700;
}
.mp-table-row {
  border-bottom: 1px solid var(--mp-border-color, #e2e8f0);
}
.mp-table-cell {
  vertical-align: middle;
}
.mp-table-cell-strong {
  font-weight: 700;
}
.mp-table-cell-total {
  font-weight: 800;
  color: var(--mp-text-main, #1e293b);
}
.mp-table-cell-muted {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
}
.mp-table-badge {
  font-size: 12px;
  border-radius: var(--mp-radius-sm, 4px);
  padding: 4px 8px;
}
.mp-table-view {
  border-radius: var(--mp-radius-sm, 4px);
}
.mp-table-results {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
  padding-top: 8px;
}
.mp-empty-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 40px;
  text-align: center;
}
.mp-empty-card-icon {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
}
.mp-empty-card-text {
  font-size: 16px;
  color: var(--mp-text-muted, #64748b);
  margin-bottom: 20px;
}
.mp-empty-card-btn {
  padding: 10px 24px;
  border-radius: var(--mp-radius-md, 4px);
}

/* Cart page (checkout/cart.twig) */
.mp-cart-weight {
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
}
.mp-cart-table {
  margin-bottom: 24px;
}
.mp-cart-th-image {
  width: 80px;
}
.mp-cart-th-qty {
  width: 140px;
}
.mp-cart-thumb {
  border-radius: var(--mp-radius-sm, 4px);
}
.mp-cart-name {
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  font-size: 15px;
}
.mp-cart-no-stock {
  font-size: 12px;
  display: block;
  font-weight: 700;
}
.mp-cart-options {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  margin-top: 4px;
}
.mp-cart-reward {
  font-size: 12px;
  color: var(--vita-primary, #8C9D93);
  margin-top: 2px;
}
.mp-cart-recurring {
  font-size: 12px;
  color: #64748b;
}
.mp-cart-model {
  color: var(--mp-text-muted, #64748b);
  font-size: 13px;
}
.mp-cart-qty {
  max-width: 130px;
}
.mp-cart-qty--voucher {
  max-width: 200px;
}
.mp-cart-qty-input {
  text-align: center;
  border-radius: var(--mp-radius-sm, 4px) 0 0 var(--mp-radius-sm, 4px);
  height: 34px;
}
.mp-cart-qty-btn {
  height: 34px;
  padding: 6px 10px;
}
.mp-cart-qty-btn-remove {
  border-radius: 0 var(--mp-radius-sm, 4px) var(--mp-radius-sm, 4px) 0;
}
.mp-cart-price {
  font-weight: 600;
  font-size: 14px;
}
.mp-cart-total {
  font-weight: 800;
  font-size: 16px;
  color: var(--mp-text-main, #1e293b);
}
.mp-cart-section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.mp-cart-section-sub {
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
  margin-bottom: 16px;
}
.mp-cart-accordion {
  margin-bottom: 24px;
}
.mp-cart-summary-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 20px;
  margin-bottom: 24px;
}
.mp-cart-summary-table {
  margin-bottom: 16px;
}
.mp-cart-summary-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-text-muted, #64748b);
}
.mp-cart-summary-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--mp-text-main, #1e293b);
}
.mp-cart-summary-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.mp-cart-summary-checkout {
  padding: 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: var(--mp-radius-md, 4px);
  text-align: center;
}
.mp-cart-summary-continue {
  padding: 10px;
  font-weight: 600;
  border-radius: var(--mp-radius-md, 4px);
  text-align: center;
}

/* Compare page (product/compare.twig) */
.mp-compare-table {
  margin-bottom: 24px;
}
.mp-compare-section {
  background: var(--mp-bg-topbar, #f8fafc);
  font-weight: 700;
}
.mp-compare-label {
  font-weight: 600;
  width: 200px;
}
.mp-compare-name {
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
}
.mp-compare-img {
  max-width: 100px;
  border-radius: var(--mp-radius-sm, 4px);
}
.mp-compare-price {
  font-size: 16px;
  font-weight: 700;
}
.mp-compare-price--special {
  color: #dc2626;
}
.mp-compare-price-old {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 13px;
  margin-left: 6px;
}
.mp-star-empty {
  color: #cbd5e1;
}
.mp-star-filled {
  color: #f59e0b;
}
.mp-compare-reviews {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.mp-compare-description {
  font-size: 13px;
  line-height: 1.5;
}
.mp-compare-cart {
  border-radius: var(--mp-radius-md, 4px);
  margin-bottom: 8px;
}
.mp-compare-remove {
  border-radius: var(--mp-radius-md, 4px);
  color: #dc2626;
}
.mp-compare-btn-icon {
  margin-right: 6px;
}
.mp-empty-card--gap {
  margin-bottom: 24px;
}

/* Search page (product/search.twig) */
.mp-search-criteria-box {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 20px;
  margin-bottom: 24px;
}
.mp-search-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--mp-text-main, #1e293b);
  display: block;
}
.mp-search-row {
  margin-bottom: 12px;
}
.mp-search-col {
  margin-bottom: 10px;
}
.mp-search-input {
  height: 42px;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-search-btn {
  height: 42px;
  font-weight: 600;
  border-radius: var(--mp-radius-md, 4px);
  background: var(--vita-primary, #8C9D93);
  border-color: var(--vita-primary, #8C9D93);
}
.mp-search-btn-icon {
  margin-right: 6px;
}
.mp-search-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
}
.mp-search-check {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.mp-search-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}

/* Review card (product/review.twig) */
.vita-review-card {
  padding: 18px 20px;
  border: 1px solid var(--mp-border-color, #E2E8F0);
  border-radius: var(--mp-radius-lg, 12px);
  margin-bottom: 16px;
  background: var(--mp-card-bg, #ffffff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.vita-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.vita-review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vita-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mp-bg-hover, #F1F5F9);
  color: var(--mp-primary, #8C9D93);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border: 1px solid var(--mp-border-color, #E2E8F0);
}
.vita-review-author {
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
}
.vita-review-stars {
  color: #f59e0b;
  font-size: 13px;
  margin-top: 2px;
}
.vita-review-star-empty {
  color: var(--mp-border-hover, #cbd5e1);
}
.vita-review-date {
  font-size: 13px;
  color: var(--mp-text-muted, #64748b);
}
.vita-review-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mp-text-body, var(--mp-text-main, #334155));
}
.vita-review-pagination {
  margin-top: 14px;
}
.vita-review-empty {
  border-radius: 8px;
}
.mp-reviews-head .btn.btn-primary.mp-btn-primary.mp-btn-write-review {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: var(--mp-text-inverse, #ffffff);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--mp-radius-md, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: var(--mp-transition, all 0.2s ease);
}
.mp-reviews-head .btn.btn-primary.mp-btn-primary.mp-btn-write-review:hover,
.mp-reviews-head .btn.btn-primary.mp-btn-primary.mp-btn-write-review:focus,
.mp-reviews-head .btn.btn-primary.mp-btn-primary.mp-btn-write-review:active {
  background: var(--mp-primary-hover, #7A8B81);
  border-color: var(--mp-primary-hover, #7A8B81);
  color: var(--mp-text-inverse, #ffffff);
}
.vita-review-pagination .pagination {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vita-review-pagination .pagination > li > a,
.vita-review-pagination .pagination > li > span {
  color: var(--mp-text-main, #0f172a);
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #E2E8F0);
  border-radius: 8px;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  transition: var(--mp-transition, all 0.2s ease);
}
.vita-review-pagination .pagination > li:first-child > a,
.vita-review-pagination .pagination > li:first-child > span,
.vita-review-pagination .pagination > li:last-child > a,
.vita-review-pagination .pagination > li:last-child > span {
  border-radius: 8px;
}
.vita-review-pagination .pagination > li > a:hover,
.vita-review-pagination .pagination > li > a:focus {
  background: var(--mp-bg-hover, #F1F5F9);
  border-color: var(--mp-primary, #8C9D93);
  color: var(--mp-primary, #8C9D93);
}
.vita-review-pagination .pagination > .active > a,
.vita-review-pagination .pagination > .active > a:hover,
.vita-review-pagination .pagination > .active > a:focus,
.vita-review-pagination .pagination > .active > span {
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: var(--mp-text-inverse, #ffffff);
}
.vita-review-pagination .text-left {
  font-size: 13px;
  color: var(--mp-text-muted, #64748B);
  padding-top: 8px;
}
[data-theme="dark"] .vita-review-pagination .pagination > li > a:hover,
[data-theme="dark"] .vita-review-pagination .pagination > li > a:focus {
  background: var(--mp-bg-hover, var(--vita-dark-hover));
}
[data-theme="dark"] .vita-description-body [style*="color"],
[data-theme="dark"] .vita-description-spoiler [style*="color"] {
  color: var(--mp-text-body, var(--vita-dark-text)) !important;
}
[data-theme="dark"] .vita-news-gallery-module__description [style*="color"] {
  color: var(--mp-text-body, var(--vita-dark-text)) !important;
}
[data-theme="dark"] .vita-description-body [style*="background"],
[data-theme="dark"] .vita-description-spoiler [style*="background"] {
  background-color: var(--mp-bg-subtle, var(--vita-dark-subtle)) !important;
}
[data-theme="dark"] .vita-description-body img,
[data-theme="dark"] .vita-description-spoiler img {
  border-radius: var(--mp-radius-md, 8px);
}
[data-theme="dark"] .vita-description-body table,
[data-theme="dark"] .vita-description-spoiler table {
  border-color: var(--mp-border-color, var(--vita-dark-border));
}
[data-theme="dark"] .vita-description-body th,
[data-theme="dark"] .vita-description-body td,
[data-theme="dark"] .vita-description-spoiler th,
[data-theme="dark"] .vita-description-spoiler td {
  border-color: var(--mp-border-color, var(--vita-dark-border));
  color: var(--mp-text-body, var(--vita-dark-text));
}

/* Manufacturer list (product/manufacturer_list.twig) */
.mp-manufacturer-index {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mp-manufacturer-index-label {
  font-weight: 600;
  font-size: 14px;
  margin-right: 8px;
}
.mp-manufacturer-index-btn {
  border-radius: var(--mp-radius-sm, 4px);
  font-weight: 700;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mp-manufacturer-block {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 20px;
  margin-bottom: 20px;
}
.mp-manufacturer-block-title {
  font-size: 20px;
  font-weight: 800;
  border-bottom: 2px solid var(--vita-primary, #8C9D93);
  padding-bottom: 8px;
  margin-top: 0;
  margin-bottom: 16px;
}
.mp-manufacturer-col {
  margin-bottom: 10px;
}
.mp-manufacturer-link {
  font-weight: 600;
  font-size: 14px;
  color: var(--mp-text-main, #1e293b);
  text-decoration: none;
  display: block;
  padding: 8px 12px;
  border-radius: var(--mp-radius-sm, 4px);
  transition: background 0.15s ease;
}
.mp-manufacturer-link:hover {
  background: var(--mp-bg-topbar, #f8fafc);
}
.mp-manufacturer-link-icon {
  color: var(--vita-primary, #8C9D93);
  margin-right: 6px;
}

/* Category subcategory/tag chips (product/category.twig) */
.vita-category-description {
  margin: 0 0 20px;
  line-height: 1.6;
  color: var(--mp-text-main, #334155);
}
.vita-category-description img {
  max-width: 100%;
  height: auto;
}
.mp-subcategories-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.mp-subcat-chip {
  border-radius: 16px;
  padding: 4px 12px;
  font-weight: 500;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  color: var(--mp-text-main, #334155);
  transition: all 0.2s ease;
}
.mp-subcat-chip:hover {
  border-color: var(--mp-primary, #8c9d93);
  color: var(--mp-primary, #8c9d93);
}
.mp-subcat-chip--tile {
  border-color: var(--mp-border-color, #cbd5e1);
  background: var(--mp-bg-hover, #f8fafc);
  color: var(--mp-text-main, #334155);
}
.mp-landing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.mp-tag-chip {
  border-radius: 16px;
  padding: 5px 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  color: var(--mp-text-main, #334155);
  transition: all 0.2s ease;
}
.mp-tag-chip:hover {
  border-color: var(--mp-primary, #8c9d93);
  color: var(--mp-primary, #8c9d93);
}

/* Landing page (extension/module/vita_landing_page.twig) */
.mp-landing-description {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: var(--mp-text-main, #334155);
  line-height: 1.65;
}
.mp-landing-description--bottom {
  margin-top: 24px;
  margin-bottom: 0;
}

/* 404 (error/not_found.twig) */
.mp-h1--page {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 16px;
}
.mp-404-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 24px;
}
.mp-404-code {
  font-size: 72px;
  font-weight: 900;
  color: var(--vita-primary, #8C9D93);
  line-height: 1;
  margin-bottom: 12px;
}
.mp-404-text {
  font-size: 15px;
  color: var(--mp-text-muted, #64748b);
  max-width: 480px;
  margin: 0 auto 24px auto;
}
.mp-404-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mp-404-btn {
  padding: 10px 28px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
}
.mp-404-btn-icon {
  margin-right: 6px;
}

/* Checkout success (checkout/success.twig) */
.mp-success-card {
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 50px 30px;
  text-align: center;
  margin-bottom: 24px;
}
.mp-success-icon-wrap {
  width: 72px;
  height: 72px;
  background: #f0fdf4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mp-success-icon {
  font-size: 36px;
  color: #16a34a;
}
.mp-success-message {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mp-text-main, #334155);
  max-width: 600px;
  margin: 0 auto 24px auto;
}
.mp-success-btn {
  padding: 12px 32px;
  font-weight: 700;
  border-radius: var(--mp-radius-md, 4px);
}

/* Info page (information/information.twig) */
.mp-h1--info {
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-card--info {
  padding: 24px 30px;
  margin-bottom: 24px;
}
.mp-article-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mp-text-main, #334155);
}

/* Extra wall header (extension/module/vita_extra_wall.twig) */
.vita-extra-wall-header {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}
.vita-extra-wall-title {
  margin: 0;
}
.vita-extra-wall-desc {
  color: var(--vita-text-muted, #718096);
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 0;
}

/* News gallery (extension/module/vita_news_gallery.twig) */
.vita-news-gallery-module__grid {
  display: grid;
  gap: 16px;
  align-items: start;
}
.vita-news-gallery-module__img {
  display: block;
  width: 100%;
  height: auto;
}

/* News gallery module: masonry */
.vita-news-gallery-module--masonry .vita-news-gallery-module__masonry {
  columns: var(--vita-gallery-columns, 4);
  column-gap: 6px;
}
.vita-news-gallery-module--masonry .vita-news-gallery-module__item {
  display: block;
  break-inside: avoid;
  margin: 0 0 6px;
}

@media (max-width: 1200px) {
  .vita-shortcode-gallery--masonry .vita-shortcode-gallery__masonry,
  .vita-news-gallery-module--masonry .vita-news-gallery-module__masonry {
    columns: 3;
  }
}

@media (max-width: 480px) {
  .vita-shortcode-gallery--masonry .vita-shortcode-gallery__masonry,
  .vita-news-gallery-module--masonry .vita-news-gallery-module__masonry {
    columns: 2;
  }
}

/* News gallery module: carousel */
.vita-news-gallery-module--carousel .vita-news-gallery-module__carousel {
  position: relative;
}
.vita-news-gallery-module--carousel .vita-news-gallery-module__swiper {
  overflow: hidden;
  border-radius: 10px;
}
.vita-news-gallery-module--carousel .vita-news-gallery-module__slide {
  height: 320px;
  background: #f5f5f5;
}
.vita-news-gallery-module--carousel .vita-news-gallery-module__item {
  display: block;
  height: 100%;
}
.vita-news-gallery-module--carousel .vita-news-gallery-module__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.vita-news-gallery-module__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}
.vita-news-gallery-module__nav:hover {
  background: #fff;
}
.vita-news-gallery-module__nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-style: solid;
  border-color: #334155;
  border-width: 2px 2px 0 0;
}
.vita-news-gallery-module__nav--prev {
  left: 12px;
}
.vita-news-gallery-module__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.vita-news-gallery-module__nav--next {
  right: 12px;
}
.vita-news-gallery-module__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
@media (max-width: 767px) {
  .vita-news-gallery-module--carousel .vita-news-gallery-module__slide {
    height: 200px;
  }
  .vita-news-gallery-module__nav {
    width: 34px;
    height: 34px;
  }
}

/* Testimonial (extension/module/vita_testimonial.twig) */
.vita-testimonial-show-all {
  font-size: 12px;
}

.vita_testimonial_carousel {
  position: relative;
  margin-bottom: 24px;
}

.vita_testimonial_carousel .swiper-container {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.vita_testimonial_carousel .swiper-pagination {
  position: static;
  margin-top: 14px;
  text-align: center;
}

.vita_testimonial_carousel .swiper-slide {
  padding: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-sizing: border-box;
}

.vita_testimonial_carousel .vita_testimonial-module__name {
  margin: 0 0 8px;
  font-size: 15px;
}

.vita_testimonial_carousel .vita_testimonial-module__text {
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}

.vita_testimonial_carousel .vita_testimonial-module__rating {
  margin-top: 10px;
  color: #f5b301;
}

.vita_testimonial_carousel .vita_testimonial-module__posted {
  margin-top: 6px;
  color: #999;
  font-size: 12px;
}

[data-theme="dark"] .vita_testimonial_carousel .swiper-slide {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .vita_testimonial_carousel .vita_testimonial-module__text {
  color: #bbb;
}

/* Testimonial module empty state (vita_testimonial.twig) */
.vita-testimonial-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  background: #fff;
  border: 1px dashed #d5dbe3;
  border-radius: 8px;
  text-align: center;
}

.vita-testimonial-empty i {
  font-size: 26px;
  color: var(--vita-primary, #8C9D93);
}

.vita-testimonial-empty__text {
  margin: 0;
  color: #555;
  font-size: 14px;
}

.vita-testimonial-empty__cta {
  margin-top: 4px;
}

[data-theme="dark"] .vita-testimonial-empty {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .vita-testimonial-empty__text {
  color: #bbb;
}

/* Extra HTML content (extension/module/vita_extra_html.twig) */
.vita-extra-html-content {
  padding-top: 10px;
}

/* News page (vita_news/news.twig) */
.vita-news-related {
  margin: 30px 0;
}
.vita-news-card {
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}
.vita-news-card__img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.vita-news-card__body {
  padding: 10px;
}
.vita-news-card__title {
  margin: 0;
}
.vita-news-downloads {
  margin: 30px 0;
}
.vita-news-download-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vita-news-comments {
  margin: 40px 0;
  border-top: 1px solid #eee;
  padding-top: 30px;
}
.vita-news-comments-badge {
  background: #00a0dc;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 14px;
}
.vita-news-rating-summary {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vita-news-rating-avg {
  color: #666;
  font-size: 13px;
}
.vita-news-comment-item {
  margin-bottom: 25px;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
.vita-news-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.vita-news-comment-author {
  font-weight: 600;
}
.vita-news-comment-user {
  margin-right: 5px;
  color: #999;
}
.vita-news-comment-meta {
  color: #999;
  font-size: 13px;
}
.vita-news-comment-stars {
  margin-left: 10px;
}
.vita-news-star-filled {
  color: #ffc107;
}
.vita-news-star-empty {
  color: #ccc;
}
.vita-news-comment-reply {
  margin-left: 30px;
  margin-top: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-left: 3px solid #00a0dc;
  border-radius: 4px;
}
.vita-news-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.vita-news-reply-author {
  font-weight: 600;
  color: #00a0dc;
}
.vita-news-reply-icon {
  margin-right: 5px;
}
.vita-news-reply-meta {
  color: #999;
  font-size: 12px;
}
.vita-news-reply-text {
  color: #555;
}
.vita-news-reply-actions {
  margin-top: 10px;
  text-align: right;
}
.vita-news-reply-toggle {
  color: #666;
  border: 1px solid #ddd;
}
.vita-news-reply-form {
  display: none;
  margin-top: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}
.vita-news-reply-form-group {
  margin-bottom: 8px;
}
.vita-news-reply-label {
  font-weight: 600;
  font-size: 13px;
}
.vita-news-reply-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.vita-news-comment-form {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}
.vita-news-comment-form-title {
  margin-bottom: 15px;
}
.vita-news-form-group {
  margin-bottom: 12px;
}
.vita-news-form-label {
  font-weight: 600;
  font-size: 14px;
}
.vita-news-required {
  color: #f00;
}
.vita-news-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.vita-news-rating {
  font-size: 20px;
}
.vita-news-star {
  cursor: pointer;
  color: #ccc;
  margin-right: 3px;
}
.vita-news-form-submit {
  padding: 8px 20px;
}
.vita-news-comment-message {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
}

.vita-news-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.vita-modal-message {
  display: none;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
}

/* ============================================================
   Module inline styles moved to CSS (FAQ / news sections / gallery / testimonial form / wishlist modal)
   ============================================================ */

/* vita_faq module + faq_shortcode */
.vita-faq {
  margin: 16px 0;
  max-width: 640px;
}
.vita-faq-item {
  margin: 0;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
}
.vita-faq-question {
  position: relative;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  list-style: none;
}
.vita-faq-question::-webkit-details-marker {
  display: none;
}
.vita-faq-question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat center / 16px 16px;
  transition: transform 0.2s ease;
}
.vita-faq-item[open] .vita-faq-question::after {
  transform: rotate(180deg);
}
.vita-faq-question:hover {
  background: transparent;
}
.vita-faq-question:focus {
  outline: none;
}
.vita-faq-answer {
  padding: 0 0 20px;
}
.vita-faq-answer a {
  color: #1b66c9;
}
.vita-faq-title {
  margin: 0 0 14px;
  max-width: 640px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
/* Centered variant: per-group switch in the FAQ list form ("Показывать по центру").
   The 640px column moves to the middle of the container; text stays left-aligned. */
.vita-faq.vita-faq--centered {
  margin: 16px auto;
}
.vita-faq-title.vita-faq--centered {
  margin: 0 auto 14px;
}
[data-theme="dark"] .vita-faq-item {
  border-bottom-color: #2a3441;
}
[data-theme="dark"] .vita-faq-question::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2e8f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .vita-faq-title {
  color: #e2e8f0;
}

/* News sections (vita_news/news.twig) */
.vita-news-sections {
  margin-top: 28px;
}
.vita-news-sections-heading {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #111;
}
.vita-news-sections-list {
  margin: 0 0 28px;
  padding-left: 22px;
  list-style: disc;
}
.vita-news-sections-item {
  margin: 0 0 10px;
  padding: 0;
}
.vita-news-sections-item a {
  color: #1b66c9;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 102, 201, .35);
}
.vita-news-sections-item a:hover {
  color: #0d4ea6;
  border-color: #0d4ea6;
}
.vita-news-section {
  margin-bottom: 24px;
}
.vita-news-section-heading {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
.vita-news-section-content a {
  color: #1b66c9;
  font-weight: 600;
}
/* «Секции / Якоря»: режим «левая колонка» (DNS-style) */
.vita-news-sections--column {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.vita-news-toc {
  position: sticky;
  top: 90px;
  flex: 0 0 240px;
  max-width: 240px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.vita-news-toc__title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
}
.vita-news-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #e8ecf1;
}
.vita-news-toc__item {
  margin: 0;
}
.vita-news-toc__item a {
  display: block;
  padding: 7px 10px 7px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: #334155;
  text-decoration: none;
}
.vita-news-toc__item a:hover {
  color: #1b66c9;
}
.vita-news-toc__item a.is-active {
  color: #1b66c9;
  font-weight: 700;
  border-left-color: #1b66c9;
}
.vita-news-sections-col {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 991px) {
  .vita-news-sections--column {
    display: block;
  }
  .vita-news-toc {
    position: static;
    max-width: none;
    max-height: none;
    margin: 0 0 20px;
  }
}

/* News gallery (vita_news/gallery.twig) */
.vita-news-gallery__items {
  columns: 3 260px;
  column-gap: 18px;
}
.vita-news-gallery__item {
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
}
.vita-news-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Testimonial form (vita_posttestimonial.twig) */
.vita_testimonial-form-card {
  max-width: 920px;
  margin: 10px 0 30px;
  padding: 24px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.vita_testimonial-form-card__header {
  margin-bottom: 20px;
}
.vita_testimonial-form-card__title {
  margin: 0 0 10px;
  font-size: 2.1rem;
  line-height: 1.25;
}
.vita_testimonial-form-card__lead {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;
}
.vita_testimonial-form-card__note {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #6b7280;
}
.vita_testimonial-form__group {
  margin-bottom: 18px;
}
.vita_testimonial-form__group label {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
}
.vita_testimonial-form__help {
  margin-top: 8px;
  font-size: 1.2rem;
  line-height: 1.45;
  color: #6b7280;
}
.vita_testimonial-form textarea.form-control {
  min-height: 160px;
  resize: vertical;
}
.vita_testimonial-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vita_testimonial-rating__item {
  margin: 0;
  cursor: pointer;
}
.vita_testimonial-rating__item input {
  display: none;
}
.vita_testimonial-rating__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d7dce3;
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
  color: #344054;
  transition: .2s ease;
}
.vita_testimonial-rating__item input:checked + span {
  border-color: #f59e0b;
  background: #fff7e6;
  color: #9a6700;
}
.vita_testimonial-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.vita_testimonial-form__actions .btn {
  min-width: 170px;
}
@media (max-width: 767px) {
  .vita_testimonial-form-card {
    padding: 18px;
  }
  .vita_testimonial-form__actions {
    flex-direction: column;
  }
  .vita_testimonial-form__actions .btn {
    width: 100%;
  }
}

/* Testimonials page (vita_testimonial_list.twig) */
.vita_testimonials-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 24px;
  padding: 18px 20px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #fbfbfd 100%);
}
.vita_testimonials-page__title {
  margin: 0 0 6px;
  font-size: 2.2rem;
  line-height: 1.25;
}
.vita_testimonials-page__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 1.35rem;
}
.vita_testimonials-page__cta {
  white-space: normal;
  text-align: center;
  min-width: 180px;
  background: var(--mp-primary, #8C9D93);
  border-color: var(--mp-primary, #8C9D93);
  color: var(--mp-text-inverse, #ffffff);
  font-weight: 600;
  border-radius: var(--mp-radius-md, 8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: var(--mp-transition, all 0.2s ease);
}
.vita_testimonials-page__cta:hover,
.vita_testimonials-page__cta:focus,
.vita_testimonials-page__cta:active {
  background: var(--mp-primary-hover, #7A8B81);
  border-color: var(--mp-primary-hover, #7A8B81);
  color: var(--mp-text-inverse, #ffffff);
}
.vita_testimonials-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vita_testimonial-card {
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.vita_testimonial-card__title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.vita_testimonial-card__name {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}
.vita_testimonial-card__meta {
  color: #999;
  font-size: 1.4rem;
}
.vita_testimonial-card__rating {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  color: #f5a623;
  font-size: 1.8rem;
}
.vita_testimonial-card__body {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vita_testimonial-card__section {
  padding-top: 2px;
}
.vita_testimonial-card__section--reply {
  padding: 14px 16px;
  border-radius: 8px;
  background: #f8fafc;
}
.vita_testimonial-card__label {
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
}
.vita_testimonial-card__text {
  font-size: 1.6rem;
  line-height: 1.55;
  color: #333;
  word-break: break-word;
}
.vita_testimonial-empty {
  padding: 28px;
  border: 1px dashed #d0d5dd;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.vita_testimonial-empty__title {
  margin: 0 0 8px;
  font-size: 2rem;
}
.vita_testimonial-empty__text {
  max-width: 640px;
  margin: 0 auto 18px;
  color: #667085;
  font-size: 1.45rem;
  line-height: 1.55;
}
@media (max-width: 767px) {
  .vita_testimonials-page__header {
    flex-direction: column;
  }
  .vita_testimonials-page__cta {
    width: 100%;
  }
  .vita_testimonial-card {
    padding: 16px;
  }
  .vita_testimonial-card__head {
    flex-direction: column;
  }
}

/* Testimonials page — dark theme */
[data-theme="dark"] .vita_testimonials-page__header {
  background: linear-gradient(135deg, var(--vita-dark-surface) 0%, var(--vita-dark-subtle) 100%);
  border-color: var(--vita-dark-border);
}
[data-theme="dark"] .vita_testimonials-page__subtitle {
  color: var(--vita-dark-muted);
}
[data-theme="dark"] .vita_testimonial-card {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .vita_testimonial-card__name,
[data-theme="dark"] .vita_testimonial-card__label {
  color: var(--vita-dark-text);
}
[data-theme="dark"] .vita_testimonial-card__meta {
  color: var(--vita-dark-muted);
}
[data-theme="dark"] .vita_testimonial-card__section--reply {
  background: var(--vita-dark-subtle);
}
[data-theme="dark"] .vita_testimonial-card__text {
  color: #D6D2DA;
}
[data-theme="dark"] .vita_testimonial-empty {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}
[data-theme="dark"] .vita_testimonial-empty__text {
  color: var(--vita-dark-muted);
}
[data-theme="dark"] .vita_testimonial-form-card {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .vita_testimonial-form-card__lead {
  color: #D6D2DA;
}
[data-theme="dark"] .vita_testimonial-form-card__note,
[data-theme="dark"] .vita_testimonial-form__help {
  color: var(--vita-dark-muted);
}
[data-theme="dark"] .vita_testimonial-rating__item span {
  background: var(--vita-dark-subtle);
  border-color: var(--vita-dark-border);
  color: var(--vita-dark-text);
}
[data-theme="dark"] .vita_testimonial-rating__item input:checked + span {
  background: var(--vita-dark-input);
  border-color: #f59e0b;
  color: #F5B84F;
}

/* Wishlist modal (account/wishlist_modal.twig) */
.wishlist-modal .list-group-item.active,
#wishlistModal .list-group-item.active {
  background-color: #007bff;
  color: #fff;
}
.wishlist-modal .list-group-item:hover,
#wishlistModal .list-group-item:hover {
  cursor: pointer;
  background-color: #f8f9fa;
}
#createCategoryModal {
  z-index: 1060;
}

/* Vita checkout — cross-sell strip (marketplace style, display-only cards) */
.vita-checkout-crosssell {
  margin: 14px 0 6px;
}
/* Slides beyond the visible window must not bleed outside the block:
   the generic .swiper-container overflow rule does not apply here,
   so the viewport clips itself. */
.vita-checkout-crosssell__viewport {
  overflow: hidden;
}
.vita-checkout-crosssell__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
  margin: 0 0 10px;
}
.vita-checkout-crosssell__slide {
  width: calc(25% - 7.5px);
  flex-shrink: 0;
  box-sizing: border-box;
  height: auto;
}
.vita-checkout-crosssell__card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-sm, 6px);
  background: #ffffff;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--mp-text-main, #1e293b);
}
.vita-checkout-crosssell__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--mp-radius-sm, 6px);
  background: var(--mp-bg-muted, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vita-checkout-crosssell__thumb img {
  max-width: 100%;
  max-height: 100%;
}
.vita-checkout-crosssell__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vita-checkout-crosssell__name {
  font-size: 12px;
  line-height: 1.35;
  color: var(--mp-text-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vita-checkout-crosssell__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text-main, #1e293b);
}
.vita-checkout-crosssell__price s {
  color: var(--mp-text-light, #94a3b8);
  font-weight: 400;
  margin-right: 4px;
}
.vita-checkout-crosssell__price b {
  color: var(--mp-badge-discount-bg, #dc2626);
}
@media (max-width: 992px) {
  .vita-checkout-crosssell__slide {
    width: calc(33.333% - 6.667px);
  }
}
@media (max-width: 768px) {
  .vita-checkout-crosssell__slide {
    width: calc(50% - 5px);
  }
}
@media (max-width: 480px) {
  .vita-checkout-crosssell__slide {
    width: 100%;
  }
}
[data-theme="dark"] .vita-checkout-crosssell__title {
  color: #FFFFFF;
}
[data-theme="dark"] .vita-checkout-crosssell__card {
  background: var(--mp-bg-surface, var(--vita-dark-surface));
  border-color: var(--mp-border-color, var(--vita-dark-border));
}
[data-theme="dark"] .vita-checkout-crosssell__thumb {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .vita-checkout-crosssell__name {
  color: var(--mp-text-muted, var(--vita-dark-muted));
}
[data-theme="dark"] .vita-checkout-crosssell__price {
  color: #FFFFFF;
}
[data-theme="dark"] .vita-checkout-crosssell__price s {
  color: var(--mp-text-light, #7A7582);
}
[data-theme="dark"] .vita-checkout-crosssell__price b {
  color: #f87171;
}

/* Vita product documents (downloads) — shared download core */
.vita-downloads-panel {
  margin-top: 18px;
}
.vita-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.vita-download-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-sm, 6px);
  background: var(--mp-bg-subtle, #f8fafc);
  color: var(--mp-text-main, #1e293b);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vita-download-item:hover {
  border-color: var(--mp-primary, #8C9D93);
  background: var(--mp-primary-light, #F2F6F4);
  color: var(--mp-text-main, #1e293b);
}
.vita-download-item > i {
  color: var(--mp-primary, #8C9D93);
  font-size: 18px;
  width: 20px;
  text-align: center;
}
.vita-download-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.vita-download-size {
  font-size: 12px;
  color: var(--mp-text-muted, #64748b);
  white-space: nowrap;
}
.vita-news-download-size {
  float: right;
  color: var(--mp-text-muted, #64748b);
  font-size: 12px;
}
[data-theme="dark"] .vita-download-item {
  background: var(--mp-bg-subtle, var(--vita-dark-subtle));
  border-color: var(--mp-border-color, var(--vita-dark-border));
  color: #FFFFFF;
}
[data-theme="dark"] .vita-download-item:hover {
  background: var(--mp-bg-surface, var(--vita-dark-surface));
  border-color: var(--mp-primary, #8C9D93);
}
[data-theme="dark"] .vita-download-size,
[data-theme="dark"] .vita-news-download-size {
  color: var(--mp-text-muted, var(--vita-dark-muted));
}

/* ==========================================================================
   MOBILE HEADER REDESIGN
   Row1: [empty] logo-center switchers-right | Row2: full-width search.
   On scroll only the search row stays pinned (.vita-mob-scrolled).
   ========================================================================== */
.mp-header-mobile-switchers { display: none; }

@media (max-width: 991px) {
  /* Header pins from the start; crossing the scroll threshold toggles
     .vita-mob-collapsed once and the brand row (logo + switchers) hides
     as ONE element, leaving only the search field pinned full-width.
     Anchoring is disabled so the browser cannot fight the collapse. */
  html {
    overflow-anchor: none;
  }

  .mp-sticky-header-wrapper {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0;
    z-index: 1020;
    background: var(--vita-header-bg, #ffffff);
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    transition: box-shadow 0.4s ease;
  }

  .mp-header-brand-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    grid-column: 1 / -1;
    width: 100%;
    max-height: 76px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  .mp-sticky-header-wrapper .mp-header-main {
    align-items: start;
    padding: 8px 0;
    row-gap: 8px;
    transition: row-gap 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mp-sticky-header-wrapper.vita-mob-collapsed .mp-header-brand-row {
    max-height: 0;
    opacity: 0;
  }

  /* The catalog toggle sits in the same grid row as the brand row; hide it
     in the collapsed state so only the search row stays pinned. */
  .mp-sticky-header-wrapper.vita-mob-collapsed .btn-catalog-toggle {
    display: none;
  }

  .mp-sticky-header-wrapper.vita-mob-collapsed .mp-header-main {
    padding: 6px 0;
    row-gap: 0;
  }

  .mp-sticky-header-wrapper.vita-mob-collapsed {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .mp-header-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 8px 0;
    row-gap: 8px;
  }

  .mp-mobile-hamburger-btn { display: none !important; }

  .mp-logo,
  .mp-logo-image-link {
    grid-column: 2;
    justify-self: center;
    margin: 0;
  }

  .mp-header-mobile-switchers {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mp-header-mobile-switchers .mp-header-pill-switch {
    float: none;
    display: inline-flex;
    white-space: nowrap;
  }

  .mp-header-mobile-switchers .btn-group {
    display: inline-flex;
    float: none;
  }

  /* Compact stock widgets: hide caret/labels, keep flag+code pill */
  .mp-header-mobile-switchers .btn-link {
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1;
  }

  /* Mobile pill switchers: only the CURRENT value is visible; tap cycles to next */
  .mp-header-mobile-switchers .mp-pill-item { display: none; }

  .mp-header-mobile-switchers .mp-pill-item.is-active,
  .mp-header-mobile-switchers .mp-pill-group:not(:has(.is-active)) .mp-pill-item:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    background: #f1f5f9;
    color: #0f172a;
    border: none;
    border-radius: 18px;
    cursor: pointer;
  }

  [data-theme="dark"] .mp-header-mobile-switchers .mp-pill-item.is-active,
  [data-theme="dark"] .mp-header-mobile-switchers .mp-pill-group:not(:has(.is-active)) .mp-pill-item:first-child {
    background: #1e293b;
    color: #e2e8f0;
  }

  .mp-header-mobile-switchers .btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 4px 6px;
  }

  /* Theme toggle sits right of the currency pill, same geometry as the pills */
  .mp-header-mobile-switchers .mp-theme-toggle--mobile {
    width: 44px;
    height: 36px;
    border-radius: 18px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 15px;
  }

  .mp-header-mobile-switchers .mp-theme-toggle--mobile:hover {
    background: #e2e8f0;
    color: #0f172a;
  }

  [data-theme="dark"] .mp-header-mobile-switchers .mp-theme-toggle--mobile {
    background: #1e293b;
    color: #e2e8f0;
  }

  [data-theme="dark"] .mp-header-mobile-switchers .mp-theme-toggle--mobile:hover {
    background: #334155;
    color: #ffffff;
  }

  .mp-search-form {
    grid-column: 1 / -1;
    order: 0;
    width: 100%;
    margin: 0;
  }

  /* CARD: delivery on top (if present), price on left, buy button on right */
  .mp-card-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 8px !important;
  }
  .mp-card-footer .mp-card-delivery-info {
    order: 1 !important;
    width: 100% !important;
    flex: 1 0 100% !important;
    margin-bottom: 4px !important;
  }
  .mp-card-footer .mp-card-prices {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 auto 0 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mp-card-footer .mp-card-prices .mp-price-old,
  .mp-card-footer .mp-card-prices .mp-price-current {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    display: block !important;
    width: auto !important;
  }
  .mp-card-footer .mp-card-action-bar {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .mp-card-footer .mp-card-action-bar .btn-card-buy {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  .mp-card-footer .mp-card-action-bar .btn-card-buy .btn-card-buy-text {
    display: none !important;
  }
  .mp-card-footer .mp-card-action-bar .btn-card-buy .btn-card-buy-icon {
    display: flex !important;
    margin: 0 !important;
  }

  /* FILTER trigger bar above products */
  .vita-filter-wrapper .vita-mobile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    margin: 0 0 10px;
    font-size: 14px;
    color: #1e293b;
  }

  /* CHECKOUT: stack columns on mobile (flex row overrides Bootstrap grid widths) */
  .vita-checkout-main-col,
  .vita-checkout-summary-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .vita-checkout-summary-sticky {
    position: static !important;
    top: auto !important;
  }
  .mp-toast-container {
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
  }
  .mp-toast {
    max-width: none;
  }

  /* PDP sticky anchors: sit below the sticky search row on mobile */
  .vita-sticky-bar-links { gap: 12px; }
  .vita-sticky-link { font-size: 12px; }

  /* Description spoiler on mobile: compact two tabs style */
  .vita-description-spoiler.is-expanded { max-height: none !important; }
  .vita-desc-toggle { margin-top: 10px; }
}

/* ==========================================================================
   VITA THEME — SweetAlert2 Custom Styling & Toasts
   ========================================================================== */
.swal2-container {
  z-index: 100005 !important;
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
  top: 76px !important;
  right: 24px !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .swal2-container.swal2-top-end,
  .swal2-container.swal2-top-right {
    top: 64px !important;
    right: 12px !important;
    left: 12px !important;
  }
}

.swal2-popup.vita-swal-popup {
  font-family: inherit !important;
  border-radius: var(--mp-radius-lg, 14px) !important;
  padding: 24px !important;
  background: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #1e293b) !important;
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25) !important;
}

.swal2-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mp-text-main, #1e293b) !important;
  padding: 0 0 10px !important;
}

.swal2-html-container {
  font-size: 14px !important;
  color: var(--mp-text-muted, #64748b) !important;
  line-height: 1.5 !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--mp-primary, #8C9D93) !important;
  color: #ffffff !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.3) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.swal2-styled.swal2-confirm:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.swal2-styled.swal2-cancel {
  background-color: var(--mp-bg-light, #f1f5f9) !important;
  color: var(--mp-text-main, #334155) !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  transition: background 0.15s ease !important;
}

.swal2-styled.swal2-cancel:hover {
  background-color: #e2e8f0 !important;
}

.swal2-timer-progress-bar {
  background: var(--mp-primary, #8C9D93) !important;
}

/* Toast styling */
.swal2-popup.vita-swal-toast {
  font-family: inherit !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  background: var(--mp-card-bg, #ffffff) !important;
  color: var(--mp-text-main, #1e293b) !important;
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  align-items: center !important;
}

.vita-swal-toast .swal2-title {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vita-swal-toast .swal2-icon {
  margin: 0 10px 0 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}

.vita-swal-toast .swal2-close {
  color: #94a3b8 !important;
  font-size: 20px !important;
}

/* Dark mode for SweetAlert2 */
.dark-mode .swal2-popup.vita-swal-popup,
.dark-mode .swal2-popup.vita-swal-toast {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.dark-mode .swal2-title {
  color: #f8fafc !important;
}

.dark-mode .swal2-html-container {
  color: #94a3b8 !important;
}

.dark-mode .swal2-styled.swal2-cancel {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Quick Order SweetAlert2 Modal Styling */
.swal2-popup.mp-swal-quick-order-popup {
  max-width: 480px !important;
  width: 92vw !important;
  padding: 28px 24px 24px !important;
  text-align: left !important;
}

.mp-swal-title-icon {
  color: var(--mp-primary, #8C9D93);
  margin-right: 8px;
}

.mp-swal-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mp-bg-subtle, #f8fafc);
  border: 1px solid var(--mp-border-color, #e2e8f0);
  border-radius: var(--mp-radius-md, 8px);
  padding: 10px 14px;
  margin-bottom: 18px;
}

.mp-swal-badge-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--mp-border-color, #e2e8f0);
  flex-shrink: 0;
}

.mp-swal-badge-icon {
  font-size: 24px;
  color: var(--mp-primary, #8C9D93);
  margin-right: 4px;
}

.mp-swal-badge-details {
  flex: 1;
  min-width: 0;
}

.mp-swal-badge-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-text-main, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-swal-badge-qty {
  font-size: 12.5px;
  color: var(--mp-text-muted, #64748b);
  margin-top: 2px;
}

.mp-swal-quick-form {
  margin-top: 10px;
}

.mp-swal-field {
  margin-bottom: 14px;
}

.mp-swal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-main, #334155);
  margin-bottom: 6px;
}

.mp-swal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mp-swal-input-wrap .mp-swal-icon {
  position: absolute;
  left: 14px;
  color: var(--mp-text-muted, #94a3b8);
  font-size: 14px;
  pointer-events: none;
}

.mp-swal-input {
  width: 100% !important;
  height: 42px !important;
  padding: 8px 14px 8px 38px !important;
  font-size: 14px !important;
  border: 1px solid var(--mp-border-color, #cbd5e1) !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  color: var(--mp-text-main, #1e293b) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mp-swal-input:focus,
.mp-swal-textarea:focus {
  border-color: var(--mp-primary, #8C9D93) !important;
  box-shadow: 0 0 0 3px rgba(140, 157, 147, 0.2) !important;
  outline: none !important;
}

.mp-swal-textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  border: 1px solid var(--mp-border-color, #cbd5e1) !important;
  border-radius: var(--mp-radius-md, 8px) !important;
  background: var(--mp-bg-surface, #ffffff) !important;
  color: var(--mp-text-main, #1e293b) !important;
  resize: vertical !important;
  min-height: 56px !important;
}

[data-theme="dark"] .mp-swal-badge,
.dark-mode .mp-swal-badge {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .mp-swal-badge-img,
.dark-mode .mp-swal-badge-img {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .mp-swal-badge-name,
.dark-mode .mp-swal-badge-name {
  color: #f8fafc;
}

[data-theme="dark"] .mp-swal-label,
.dark-mode .mp-swal-label {
  color: #e2e8f0;
}

[data-theme="dark"] .mp-swal-input,
[data-theme="dark"] .mp-swal-textarea,
.dark-mode .mp-swal-input,
.dark-mode .mp-swal-textarea {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}


/* ==========================================================================
   VITA NEWS CARDS (blog category listing + news module carousel)
   ========================================================================== */
.vita-news-wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

.vita-news-list {
  margin-bottom: 8px;
}

.vita-news-item {
  position: relative;
  margin-bottom: 40px;
}

.vita-news-item__image {
  display: block;
  width: 70%;
  overflow: hidden;
}

.vita-news-item__image img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.vita-news-item__body {
  position: absolute;
  top: 12%;
  right: 0;
  width: 50%;
  height: 360px;
  overflow: hidden;
  background: var(--mp-card-bg, #ffffff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  padding: 28px 32px;
  z-index: 1;
}

.vita-news-item__title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 10px;
}

.vita-news-item__title a {
  color: var(--mp-text-main, #2D3748);
  text-decoration: none;
}

.vita-news-item__title a:hover {
  color: var(--mp-primary, #8C9D93);
}

.vita-news-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mp-text-muted, #64748B);
  margin-bottom: 14px;
}

.vita-news-item__meta .fa {
  color: var(--mp-primary, #8C9D93);
}

.vita-news-item__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mp-text-muted, #64748B);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 14px;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vita-news-item__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-primary, #8C9D93);
  border: 1px solid var(--mp-primary, #8C9D93);
  border-radius: 8px;
  padding: 9px 18px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.vita-news-item__more:hover {
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

.vita-news-card {
  display: flex;
  flex-direction: column;
  background: var(--mp-card-bg, #ffffff);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vita-news-card:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  transform: translateY(-3px);
}

.vita-news-card__image {
  display: block;
  overflow: hidden;
}

.vita-news-card__image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.vita-news-card:hover .vita-news-card__image img {
  transform: scale(1.04);
}

.vita-news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.vita-news-card__title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 8px;
  min-height: 45px;
}

.vita-news-card__title a {
  color: var(--mp-text-main, #2D3748);
  text-decoration: none;
}

.vita-news-card__title a:hover {
  color: var(--mp-primary, #8C9D93);
}

.vita-news-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mp-text-muted, #64748B);
  margin-bottom: 10px;
}

.vita-news-card__meta .fa {
  color: var(--mp-primary, #8C9D93);
}

.vita-news-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mp-text-muted, #64748B);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vita-news-card__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-primary, #8C9D93);
  border: 1px solid var(--mp-primary, #8C9D93);
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.vita-news-card__more:hover {
  background: var(--mp-primary, #8C9D93);
  color: #ffffff;
}

.vita-news-swiper {
  position: relative;
  margin-bottom: 24px;
}

.vita-news-swiper .swiper-container {
  padding: 6px 2px 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.vita-news-swiper .vita-news-card {
  height: 100%;
}

.vita-news-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
}

.vita-news-swiper .vita-news-card__desc {
  -webkit-line-clamp: 3;
}

.vita-news-swiper__pagination {
  position: static;
  margin-top: 14px;
  text-align: center;
}

[data-theme="dark"] .vita-news-card {
  background: var(--vita-dark-surface);
  border-color: var(--vita-dark-border);
}

[data-theme="dark"] .vita-news-item__body {
  background: var(--vita-dark-surface);
}

[data-theme="dark"] .vita-news-item__desc {
  border-top-color: var(--vita-dark-border);
}

[data-theme="dark"] .vita-news-item__title a {
  color: #E5E7EB;
}

[data-theme="dark"] .vita-news-card__title a {
  color: #E5E7EB;
}

@media (max-width: 767px) {
  .vita-news-swiper {
    margin-bottom: 16px;
  }
  .vita-news-swiper .swiper-container {
    padding: 4px 0 8px;
  }
  .vita-news-card__body {
    padding: 14px 14px 16px;
  }
  .vita-news-card__title {
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 6px;
    min-height: 38px;
  }
  .vita-news-swiper .vita-news-card__desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 13px;
  }
  .vita-news-swiper__pagination {
    margin-top: 10px;
  }
}

@media (max-width: 991px) {
  .vita-news-item__image img {
    height: 380px;
  }
  .vita-news-item__body {
    width: 50%;
    height: 280px;
    padding: 22px 24px;
  }
  .vita-news-item__title {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .vita-news-item {
    margin-bottom: 28px;
  }
  .vita-news-item__image {
    width: 100%;
  }
  .vita-news-item__image img {
    height: 230px;
  }
  .vita-news-item__body {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    overflow: visible;
    margin: -30px 14px 0;
    padding: 18px 20px;
  }
  .vita-news-item__title {
    font-size: 16px;
  }
}

/* Slider card: .mp-card-media uses the padding-bottom aspect trick (content height 0),
   but swiper-slide is position:relative, so the absolutely positioned img would resolve
   against a zero-height slide. Give the anchor a real square via aspect-ratio and let
   wrapper/slide inherit 100% height so the img fills the slide. */
.mp-card-media.mp-card-slider {
  display: block;
  position: relative;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 1 / 1;
}

.mp-card-slider .swiper-wrapper {
  height: 100%;
}

.mp-card-slider .swiper-slide {
  height: 100%;
  text-align: center;
}

.mp-card-slider .mp-card-slider-pagination {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

.mp-card-slider .mp-card-slider-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  background: #94a3b8;
  opacity: .55;
  display: inline-block;
  border-radius: 50%;
}

.mp-card-slider .mp-card-slider-pagination .swiper-pagination-bullet-active {
  background: var(--vita-primary, #ef4623);
  opacity: 1;
}

.mp-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-footer-bottom .mp-theme-toggle {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 14px;
}

.mp-footer-bottom .mp-theme-toggle:hover {
  background: rgba(148, 163, 184, .18);
}

.mp-footer-bottom .mp-theme-toggle .mp-theme-icon-moon,
.mp-footer-bottom .mp-theme-toggle .mp-theme-icon-sun {
  color: inherit;
}

/* Home builder grid */
.vita-home-row {
  margin-bottom: 24px;
}
.vita-home-row:last-child {
  margin-bottom: 0;
}
/* Container rows own the width: a module's own full-bleed (mp-full-bleed)
   must not escape a container row — it caused the block to render
   off-screen (title pinned to x=0, content clipped by overflow-x).
   Full-width rows keep the module edge-to-edge behaviour. */
.vita-home-row:not(.vita-home-row--full) .vita-home-col .mp-full-bleed {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* Layout-bound modules (no .vita-home-row ancestor) own the container width too:
   a module instance bound directly to a layout (content_top / content_bottom /
   ordinary pages) lands inside .mp-container — its default full_width=1
   stretched it to 100vw BEYOND the content column (owner report 2026-09-23,
   «E2E Лендинг» pinned to x=0 while the column starts at x=42). Full-width
   sections there must be done by the vcc-section/module background itself,
   not by a layout-bound module's own bleed. EXCEPTION: the home hero slider
   (vita_visual[data-hero]) — its edge-to-edge stage under the transparent
   overlay header is by design (vita-home-hero-page machinery). */
.mp-container > .mp-module-block.mp-full-bleed:not([data-hero]),
.mp-container > .vita-visual.mp-full-bleed:not([data-hero]) {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.vita-home-row__inner {
  width: 100%;
}
.vita-home-row--full {
  width: calc(100vw - var(--vita-scrollbar-w, 0px));
  /* та же компенсация скроллбара, что у .mp-full-bleed */
  margin-left: calc(50% - (100vw - var(--vita-scrollbar-w, 0px)) / 2);
}
.vita-home-row--full .vita-home-row__inner {
  max-width: var(--vita-container-width, 1240px);
  margin: 0 auto;
  padding: 0 15px;
}
.vita-home-col > * + * {
  margin-top: 24px;
}
/* Full-bleed inside a narrow builder column overlaps its neighbours. The home
   controller already strips the module flag; this guard also covers bleed
   implied by the hero mode itself. */
.vita-home-row .vita-home-col:not(.col-md-12) .mp-full-bleed {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 767px) {
  .vita-home-row {
    margin-bottom: 16px;
  }
  .vita-home-col > * + * {
    margin-top: 16px;
  }
}
/* Vita: «Нашли дешевле» link under the product price */
.vita-price-match-wrap {
  text-align: center;
  margin-top: 8px;
}
.vita-price-match-link {
  display: inline-block;
  font-size: 12px;
  color: #64748B;
  text-decoration: underline dotted;
  cursor: pointer;
}
.vita-price-match-link:hover,
.vita-price-match-link:focus {
  color: var(--vita-primary, #2563EB);
  text-decoration: underline;
}
.vita-price-match-link .fa {
  margin-right: 4px;
  color: #F59E0B;
}

/* Rating stars — unicode glyphs, no icon-font dependency */
.vita-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 14px;
  line-height: 1;
}
.vita-stars .vita-stars__star::before {
  content: "\2606";
  color: #C4CCC6;
}
.vita-stars .vita-stars__star.is-filled::before {
  content: "\2605";
  color: #F5A623;
}
[data-theme="dark"] .vita-stars .vita-stars__star::before {
  color: #4A5548;
}
[data-theme="dark"] .vita-stars .vita-stars__star.is-filled::before {
  color: #F5A623;
}

/* Review form star picker */
.stars-rating label {
  display: block;
}
.stars-rating .wrap {
  display: inline-block;
  font-size: 0;
}
.stars-rating .wrap span {
  font-size: 26px;
  line-height: 20px;
  cursor: pointer;
}
.stars-rating .wrap span:before {
  content: "\2606";
  color: #bbb;
}
.stars-rating .wrap:not([data-rate="0"]) span:before {
  content: "\2605";
}
.stars-rating .wrap:hover span:before {
  content: "\2605";
  color: #fe2;
}
.stars-rating .wrap:hover span:hover ~ span:before {
  color: #bbb;
}
.stars-rating .wrap[data-rate="1"] span:nth-child(-n+1):before,
.stars-rating .wrap[data-rate="2"] span:nth-child(-n+2):before,
.stars-rating .wrap[data-rate="3"] span:nth-child(-n+3):before,
.stars-rating .wrap[data-rate="4"] span:nth-child(-n+4):before,
.stars-rating .wrap[data-rate="5"] span:nth-child(-n+5):before {
  color: #fa0;
}

/* Star picker (radio-based, pure CSS).
   DOM order 5..1 + row-reverse => visually 1..5; `input:checked ~ label`
   fills the chosen star and every star to its left. */
.vita-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2px;
}
.vita-stars-input input {
  display: none;
}
.vita-stars-input label {
  cursor: pointer;
  line-height: 1;
}
.vita-stars-input label::before {
  content: "\2606";
  font-size: 24px;
  color: #C4CCC6;
}
.vita-stars-input input:checked ~ label::before {
  content: "\2605";
  color: #F5A623;
}
.vita-stars-input label:hover::before,
.vita-stars-input label:hover ~ label::before {
  content: "\2605";
  color: #FCD34D;
}
[data-theme="dark"] .vita-stars-input label::before {
  color: #4A5548;
}
/* ==========================================================================
   VITA BUTTON SYSTEM — глобальная стилизация Bootstrap-кнопок витрины
   (аудит 2026-09-19: 13 кнопок в 9 шаблонах рендерились дефолтным Bootstrap
   и выбивались из стиля темы; плюс страховка для кнопок сторонних модулей).
   Базовые размеры .btn не трогаем — только цвета/формы; специфичность ниже
   контекстных Vita-классов (mp-btn-*), так что стилизованные кнопки не меняются.
   ========================================================================== */

.btn-primary {
  background-color: var(--mp-primary, #8C9D93) !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: var(--mp-radius-md, 4px) !important;
  box-shadow: 0 2px 8px rgba(140, 157, 147, 0.35) !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--mp-primary-hover, #7a8c82) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(140, 157, 147, 0.45) !important;
}

.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary[disabled]:hover {
  background-color: var(--mp-primary, #8C9D93) !important;
  opacity: 0.55 !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-default {
  background-color: var(--mp-input-bg, #f1f5f9) !important;
  background-image: none !important;
  border: 1px solid var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #334155) !important;
  font-weight: 500 !important;
  border-radius: var(--mp-radius-md, 4px) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  background-color: var(--mp-border-color, #e2e8f0) !important;
  border-color: var(--mp-border-color, #e2e8f0) !important;
  color: var(--mp-text-main, #0f172a) !important;
}

/* Иконки внутри кнопок наследуют цвет (календари, upload) */
.btn-primary .fa,
.btn-default .fa {
  color: inherit !important;
}

/* Кнопки в input-group-btn (календари у полей дат) — без радиуса со стороны поля */
.input-group-btn .btn-default {
  border-radius: 0 var(--mp-radius-md, 4px) var(--mp-radius-md, 0) !important;
}

/* Кнопка-опасность (удаление) — системный красный, без Bootstrap-синего ховера */
.btn-danger {
  background-color: #DC2626 !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--mp-radius-md, 4px) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #B91C1C !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-default {
  background-color: var(--vita-dark-input) !important;
  border-color: var(--vita-dark-control-border) !important;
  color: var(--vita-dark-text) !important;
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active {
  background-color: var(--vita-dark-control-border) !important;
  border-color: #5A5464 !important;
  color: #FFFFFF !important;
}