/* ==========================================================================
   VRAMKAH DARK THEME — custom.css
   Child theme: classic-child (parent: classic)
   ========================================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

/* ---------- Momentum Scroll (Lenis) ---------- */
html.lenis, html.lenis body {
  height: auto;
  overscroll-behavior: none;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Colors */
  --brand-black: #0A0A0A;
  --brand-dark: #1A1A1A;
  --brand-dark-lighter: #222222;
  --brand-blue: #006AFF;
  --brand-blue-hover: #0052CC;
  --brand-blue-light: rgba(0, 102, 255, 0.1);
  --brand-blue-border: rgba(0, 102, 255, 0.3);
  --brand-orange: #FF6B00;
  --brand-orange-hover: #E66000;

  /* Text */
  --text-primary: #FAFAFA;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-dark: #374151;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-hover: rgba(255, 255, 255, 0.2);
  --border-subtle: #2D2D2D;

  /* Spacing */
  --section-padding: 5rem;
  --container-max: 1720px;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadows */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-blue: 0 0 20px rgba(0, 102, 255, 0.3);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ==========================================================================
   THEME SWITCHING LOGIC (Professional Approach)
   ========================================================================== */

/* Light Theme for all pages EXCEPT Index */
body:not(.page-home):not(.page-index) {
  --brand-black: #FFFFFF;
  --brand-dark: #F7F7F7;
  --brand-dark-lighter: #F3F4F6;
  --text-primary: #1A1A1A;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --border-color: rgba(0, 0, 0, 0.1);
  --border-subtle: #E5E7EB;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Hard-Isolation for Dark Elements (Header/Footer remain dark) */
#header,
#footer,
.vr-lang-dropdown,
.vr-dropdown-wrapper {
  --brand-black: #0A0A0A;
  --brand-dark: #1A1A1A;
  --brand-dark-lighter: #222222;
  --text-primary: #FAFAFA;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-subtle: #2D2D2D;
}

/* ==========================================================================
   GLOBAL RESETS & BASE
   ========================================================================== */

.section-container,
.container,
.container-fluid {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*
 * Override: theme.css в†’ .row { margin-left: -15px; margin-right: -15px; }
 * Bootstrap .row negative margins require parent padding: 15px to compensate.
 * .vr-full-width-wrapper has padding: 0 в†’ rows overflow by 30px total.
 *
 * Fix Layer 1: overflow-x: clip
 *   - Clips visually like overflow: hidden
 *   - Does NOT create a scroll container (safe for position:sticky)
 *   - Does NOT force overflow-y: auto (no double scrollbar)
 */
.vr-full-width-wrapper {
  max-width: none !important;
  padding: 0 !important;
  width: 100%;
  overflow-x: clip;
  /* Modern CSS — clips without scroll container */
  overflow-y: visible;
}

/*
 * Fix Layer 2: Direct Bootstrap .row override
 * Source: parent theme.css sets .row { margin: 0 -15px }
 * Since .vr-full-width-wrapper has no compensating padding, we neutralize here.
 * Scope: only .row that is a direct child of the wrapper (safe, doesn't affect nested grids)
 */
.vr-full-width-wrapper>.row {
  margin-left: 0;
  margin-right: 0;
}

.vr-full-width-wrapper>.row>.col-xs-12,
.vr-full-width-wrapper>.row>[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Ensure sections inside full-width wrapper are indeed full width */
.vr-full-width-wrapper>section {
  width: 100%;
}

@media (min-width: 640px) {

  .section-container,
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {

  .section-container,
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1280px) {

  .section-container,
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1536px) {

  .section-container,
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

body {
  font-family: var(--font-body) !important;
  background-color: var(--brand-black) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--brand-blue);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-blue-hover);
  text-decoration: none;
}

p {
  color: var(--text-secondary);
}

::selection {
  background: var(--brand-blue);
  color: #fff;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary,
.btn-primary:focus {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-transform: none;
  letter-spacing: 0;
}

.btn-primary:hover {
  background: var(--brand-blue-hover) !important;
  border-color: var(--brand-blue-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.btn-secondary:hover {
  background: var(--brand-blue-light) !important;
  transform: translateY(-2px);
}

.btn-outline-secondary {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.btn-outline-secondary:hover {
  border-color: var(--brand-blue) !important;
  background: var(--brand-blue-light) !important;
  color: var(--brand-blue) !important;
}

.btn-accent {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.btn-accent:hover {
  background: var(--brand-orange-hover) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Global UI Cleanup */
*:focus,
*:focus-visible,
a:focus,
button:focus,
input:focus,
.vr-category-card:focus {
  outline: none !important;
  box-shadow: none !important;
}

#header {
  background: var(--brand-black) !important;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1050;
  transition: all var(--transition-base);
}

#header.header-scrolled {
  background: var(--brand-black) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0;
}

#header .header-banner {
  background: var(--brand-blue) !important;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}

#header .header-banner a,
#header .header-banner span {
  color: #fff !important;
}

#header .header-nav {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color);
  padding: 0.35rem 0;
}

#header .header-nav a,
#header .header-nav .material-icons,
#header .header-nav span {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}

#header .header-nav a:hover {
  color: var(--brand-blue) !important;
}

#header .header-top {
  background: transparent !important;
  padding: 0.1rem 0;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  overflow: visible !important;
}

@media (min-width: 992px) {
  #header .header-top {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    padding: 0.1rem 0 !important;
  }
}

/* 1. Logo Left */
#header .header-logo {
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  #header .header-top {
    position: relative;
  }
  #header .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header-top__right {
    flex-direction: row-reverse;
  }
}

@media (min-width: 992px) {
  #header .header-logo {
    justify-self: start;
  }
}

/* 2. Center Navigation — container for ps_mainmenu hook output */
.header-nav-center {
  display: block;
}

@media (min-width: 992px) {
  .header-nav-center {
    display: flex !important;
    justify-self: center;
    align-items: center;
  }
}

/* Desktop/Mobile visibility helpers */
.vr-desktop-only {
  display: none !important;
}

@media (min-width: 992px) {
  .vr-desktop-only {
    display: flex !important;
  }
}

.vr-header-icons {
  align-items: center;
  gap: 1.25rem;
}

/* 3. Icons Right */
.header-top__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .header-top__right {
    gap: 1.25rem;
    justify-self: end;
  }
}

.header-icon-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  opacity: 1 !important;
}

.header-icon-btn:hover {
  transform: translateY(-2px);
}

.header-icon-btn svg {
  width: 24px;
  height: 24px;
  stroke: #FFFFFF !important;
  stroke-width: 2;
  transition: stroke var(--transition-fast);
  opacity: 1 !important;
}

.header-icon-btn:hover svg {
  stroke: var(--brand-blue) !important;
}

.header-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Custom Language Switcher — Dropdown Style */
.vr-language-selector {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible !important;
  /* Critical to show dropdown */
}

.vr-language-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0.5rem 0;
}

.vr-language-trigger:hover,
.vr-language-trigger:hover .vr-lang-text {
  color: var(--brand-blue) !important;
}

.vr-language-trigger i {
  font-size: 1.1rem;
  transition: transform var(--transition-fast);
}

.vr-language-trigger:hover i {
  transform: rotate(180deg);
  color: var(--brand-blue) !important;
}

.vr-lang-text {
  transition: color var(--transition-fast);
}

.vr-lang-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px);
  background-color: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  min-width: 80px !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Show on HOVER (like Catalog dropdown) */
.vr-language-selector:hover .vr-lang-dropdown,
.vr-language-selector.active .vr-lang-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.vr-language-selector:hover .vr-language-trigger i,
.vr-language-selector.active .vr-language-trigger i {
  transform: rotate(180deg);
  color: var(--brand-blue) !important;
}

.vr-language-selector:hover .vr-language-trigger .vr-lang-text,
.vr-language-selector.active .vr-language-trigger .vr-lang-text {
  color: var(--brand-blue) !important;
}

.vr-lang-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 15px !important;
  color: #FFFFFF !important;
  text-align: center !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.vr-lang-item:hover {
  background-color: rgba(0, 102, 255, 0.15) !important;
  color: var(--brand-blue) !important;
}

.header-icon-btn .cart-products-count {
  position: absolute;
  top: -4px;
  right: -5px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ps_shoppingcart widget integration */
#_desktop_cart {
  display: flex !important;
  align-items: center;
}

#_desktop_cart .blockcart {
  display: flex !important;
  align-items: center;
}

#_desktop_cart .blockcart.cart-preview {
  display: flex !important;
  align-items: center;
}

#_desktop_cart .blockcart.inactive {
  display: flex !important;
}

#_desktop_cart .blockcart .header {
  display: flex;
  align-items: center;
}

#_desktop_cart .cart-products-count:empty,
#_desktop_cart .cart-products-count[data-count="0"] {
  display: none;
}

/* Floating Search Bar */
.vr-search-overlay {
  position: absolute;
  top: 100%;
  right: 0;
  width: 350px;
  background: var(--brand-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: var(--shadow-card-hover);
  display: none;
  z-index: 1000;
  margin-top: 0.5rem;
}

.vr-search-overlay.active {
  display: block;
  animation: fadeInDown 0.3s ease forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vr-search-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vr-search-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.9rem;
  outline: none;
}

.vr-search-input:focus {
  border-color: var(--brand-blue) !important;
}

.vr-search-btn {
  background: var(--brand-blue);
  border: none;
  border-radius: 8px;
  padding: 0.6rem;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.vr-search-btn:hover {
  background: var(--brand-blue-hover);
}

/* Language selector override */
.vr-language-selector {
  margin-right: 0.5rem;
}

.vr-language-selector select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
}

/* Navigation Menu */
.vr-nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vr-nav-item {
  position: relative;
}

.vr-nav-link {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--transition-fast);
  padding: 0.5rem 0;
}

.vr-nav-link:hover {
  color: var(--brand-blue) !important;
}

.vr-nav-link .material-icons {
  font-size: 1.1rem;
  transition: transform var(--transition-fast);
}

.vr-nav-item:hover .vr-nav-link .material-icons {
  transform: rotate(180deg);
}

/* Dropdown Menu Styling */
.vr-dropdown-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  padding: 0.75rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 10000;
  pointer-events: none;
}

.vr-nav-item:hover>.vr-dropdown-wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Force overflow visible on ALL parents so dropdown is not clipped */
#header,
#header .section-container,
#header .header-top,
#header .header-nav-center,
#header .vr-nav-links,
#header .vr-nav-item,
#header .container {
  overflow: visible !important;
}

#header .vr-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#header .vr-menu-item {
  position: relative;
}

#header .vr-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: all var(--transition-fast);
}

#header .vr-menu-link:hover {
  background: var(--brand-blue-light);
  color: var(--brand-blue) !important;
}

#header .vr-menu-link .chevron_right {
  font-size: 1.1rem;
}

/* Nested Submenu */
#header .vr-dropdown-container {
  position: absolute;
  top: 0;
  left: 100%;
  width: 250px;
  background: var(--brand-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem 0;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all var(--transition-base);
}

#header .vr-menu-item:hover > .vr-dropdown-container {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ==========================================================================
   LOGO
   ========================================================================== */

#_desktop_logo {
  display: flex;
  align-items: center;
}

#header .vr-main-logo {
  max-height: 40px;
  width: auto;
}

@media (max-width: 768px) {
  #header .vr-main-logo {
  max-height: 30px;
  width: auto;
}
}

/* Surgical cleanup of standard PrestaShop elements */
#header .user-info,
#header .header-nav,
#_desktop_user_info,
#_desktop_search_widget,
#_desktop_wishtlist,
.customersignin {
  display: none !important;
}

/* Hide search widget ONLY inside catalog dropdown, not globally */
.vr-dropdown-wrapper .search-widget,
.vr-dropdown-wrapper .ps-searchbar,
.vr-dropdown-wrapper #search_widget {
  display: none !important;
}

/* Ensure our premium components are relative parents where needed */
.vr-language-selector,
.header-top__right,
.header-search-wrapper {
  position: relative !important;
  display: flex !important;
  visibility: visible !important;
}

/* Ensure our custom cart count is visible */
.header-icon-btn-wrapper .cart-products-count {
  display: flex !important;
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--accent-orange);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.vr-language-selector .language-selector {
  border: none;
  background: transparent;
  padding: 0;
}

.vr-language-selector .language-selector .expand-more {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.vr-language-selector .language-selector select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-weight: 500;
  padding: 0 1.5rem 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  cursor: pointer;
}

/* Top menu */
.header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#_desktop_top_menu .top-menu>li>a,
.top-menu a[data-depth="0"] {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
  text-transform: none;
}

#_desktop_top_menu .top-menu>li>a:hover,
.top-menu a[data-depth="0"]:hover {
  color: var(--brand-blue) !important;
}

/* Search */
#search_widget {
  min-width: 200px;
}

#search_widget input[type="text"] {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: border-color var(--transition-fast);
}

#search_widget input[type="text"]:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-blue-light);
}

#search_widget input[type="text"]::placeholder {
  color: var(--text-muted);
}

#search_widget button {
  color: var(--text-secondary) !important;
}

/* Cart block */
.blockcart {
  background: transparent;
}

.blockcart .header {
  color: var(--text-primary) !important;
}

.blockcart a {
  color: var(--text-primary) !important;
}

.blockcart .cart-products-count {
  background: var(--brand-blue) !important;
  color: #fff !important;
  font-size: 0.75rem;
  border-radius: 50%;
}

/* Sign in */
.user-info a,
.user-info .account {
  color: var(--text-primary) !important;
}

.user-info a:hover {
  color: var(--brand-blue) !important;
}

/* Dropdown menus */
.top-menu .sub-menu,
.popover {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.top-menu .sub-menu a {
  color: var(--text-secondary) !important;
}

.top-menu .sub-menu a:hover {
  color: var(--brand-blue) !important;
  background: var(--brand-blue-light) !important;
}

/* ==========================================================================
   MOBILE HEADER — Burger Trigger
   ========================================================================== */

.vr-burger-trigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
  position: relative;
}

@media (min-width: 992px) {
  .vr-burger-trigger {
    display: none !important;
  }
}

.burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Burger в†’ X morph */
.vr-burger-trigger.is-active .burger-line--1 {
  transform: translateY(7px) rotate(45deg);
}

.vr-burger-trigger.is-active .burger-line--2 {
  opacity: 0;
}

.vr-burger-trigger.is-active .burger-line--3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   MOBILE MENU OVERLAY
   ========================================================================== */

#mobile-menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(10, 10, 10, 0.98);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#mobile-menu-container.is-open {
  opacity: 1;
  visibility: visible;
}

body.mobile-menu-open {
  overflow: hidden;
}

.vr-mobile-nav {
  text-align: left;
  width: 100%;
  padding: 5rem 1.5rem 2rem;
}

.vr-mobile-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Main menu items --- */
.vr-mobile-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vr-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none !important;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.vr-mobile-link:hover {
  color: var(--brand-blue) !important;
}

/* --- Accordion arrow --- */
.vr-mobile-arrow {
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease;
  display: inline-block;
}

.vr-mobile-item--has-children.is-expanded .vr-mobile-arrow {
  transform: rotate(90deg);
  color: var(--brand-blue);
}

/* --- Submenu (accordion) --- */
.vr-mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}

.vr-mobile-item--has-children.is-expanded .vr-mobile-submenu {
  max-height: 500px;
  opacity: 1;
}

.vr-mobile-sublink {
  display: block;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.vr-mobile-sublink:hover {
  color: var(--brand-blue) !important;
}

.vr-mobile-sublink--all {
  color: var(--brand-blue) !important;
  font-weight: 500;
}

@media (min-width: 992px) {
  #mobile-menu-container {
    display: none !important;
  }
}

._mobile_logo img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   HOMEPAGE — GENERAL
   ========================================================================== */

.page-home #wrapper,
#wrapper {
  background: var(--brand-black) !important;
}

.page-home #content-wrapper {
  padding: 0;
}

/* Section containers on homepage */
.vr-section {
  padding: var(--section-padding) 0;
}

/* Section Header with Left Content and Right Link */
.vr-section-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .vr-section-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.vr-section-header__left {
  flex: 1;
}

.vr-section-link {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.vr-section-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.vr-section-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .vr-section-title {
    font-size: 3.5rem;
  }
}

.vr-section-subtitle {
  color: #9CA3AF;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0;
}

.vr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-blue-light);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* ==========================================================================
   HOMEPAGE — IMAGE SLIDER (ps_imageslider)
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE — IMAGE SLIDER (ps_imageslider)
   ========================================================================== */
.homeslider-vr {
  position: relative;
  background: var(--brand-black);
  margin-bottom: 0;
}

.homeslider-vr .carousel-inner {
  height: clamp(500px, 80vh, 700px);
}

.homeslider-vr .carousel-item {
  height: 100%;
  background: var(--brand-black);
}

.homeslider-vr .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  opacity: 0.6;
  transition: transform 10s ease-out;
}

.homeslider-vr .carousel-item.active img {
  transform: scale(1.1);
}

.homeslider-vr .carousel-caption {
  z-index: 10;
  text-align: left;
  padding: 0;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.vr-slide-title {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1;
  color: #fff !important;
}

.vr-slide-description {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-bottom: 2.5rem;
}

.vr-slide-btn {
  padding: 1rem 3rem !important;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Indicators */
.homeslider-vr .carousel-indicators {
  margin-bottom: 2rem;
  justify-content: flex-start;
  padding: 0 4rem;
}

.homeslider-vr .carousel-indicators li {
  width: 40px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 5px;
}

.homeslider-vr .carousel-indicators li.active {
  background: var(--brand-blue);
}

/* ==========================================================================
   HOMEPAGE — CATEGORY GRID
   ========================================================================== */
.vr-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.vr-category-card {
  position: relative;
  
  border-radius: var(--radius-lg);
  background: var(--brand-dark);
  display: block;
  text-decoration: none !important;
  /* Fallback patterns */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
}

.vr-category-card img {
  width: 100%;
  transition: transform var(--transition-slow);
  /* Removed brightness filter to make images lighter */
}

.vr-category-card:hover img {
  transform: scale(1.1);
}

.vr-category-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  z-index: 5;
}

.vr-category-card__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.vr-category-card__count {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.vr-category-card__arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-base);
  z-index: 6;
}

.vr-category-card:hover .vr-category-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .vr-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vr-categories-grid {
    grid-template-columns: 1fr;
  }

  .homeslider-vr .carousel-inner {
    height: 450px;
  }

  .vr-slide-title {
    font-size: 2rem !important;
  }
}

/* ==========================================================================
   HOMEPAGE — PRODUCT CARDS
   ========================================================================== */
.vr-product-card {
  background: var(--brand-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
  transition: all var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vr-product-card:hover {
  transform: translateY(-10px);
  border-color: var(--brand-blue-border);
  box-shadow: var(--shadow-card-hover);
}

.vr-product-card .thumbnail-container {
  position: relative;
  aspect-ratio: 1/1;
  background: #111;
  overflow: hidden;
}

.vr-product-card .thumbnail img {
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}

.vr-product-card:hover .thumbnail img {
  transform: scale(1.05);
}

.vr-product-card__info {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vr-product-card__title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
  height: 3.1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vr-product-card__title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.vr-product-card__price-wrapper {
  margin-bottom: 1.5rem;
}

.vr-product-card__price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-blue);
  font-family: var(--font-heading);
}

.vr-product-card__price--old {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-right: 0.5rem;
}

.vr-btn-buy {
  width: 100%;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem !important;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
  padding-top: 6rem;
  padding-bottom: 6rem;
}

#carousel .carousel-indicators li.active {
  background: var(--brand-blue);
  transform: scale(1.3);
}

#carousel .carousel-control {
  background: rgba(0, 0, 0, 0.3) !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

#carousel:hover .carousel-control {
  opacity: 1;
}

#carousel .left.carousel-control {
  left: 1.5rem;
}

#carousel .right.carousel-control {
  right: 1.5rem;
}

#carousel .carousel-control i {
  color: #fff !important;
  font-size: 1.5rem;
}

/* ==========================================================================
   HOMEPAGE — CATEGORIES SECTION (Light Theme Recap)
   ========================================================================== */

.vr-categories {
  padding: 0;
  background: #FFFFFF !important;
  position: relative;
}

.vr-categories .vr-section-title {
  color: #0F172A !important;
  text-align: center;
}

.vr-categories .vr-section-subtitle {
  color: #64748B;
  text-align: center;
  margin: 0 auto 4rem auto;
}

.vr-categories-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2.5rem;
  justify-content: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 768px) {
  .vr-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .vr-categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 460px));
    gap: 3rem;
  }
}

.vr-category-card {
  background: #F9FAFB !important;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border: 1px solid #F3F4F6;
  text-decoration: none !important;
  overflow: hidden;
  align-self: stretch;
  width: 100%;
  height: auto !important;
  
}

.vr-category-card:hover {
  border-color: var(--brand-blue-border);
}

.vr-category-card__image {
  width: 100%;
  height: 0 !important;
  padding-bottom: 55.33% !important;
  background: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #F3F4F6;
}

.vr-category-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
  object-fit: cover;
}

.vr-category-card:hover .vr-category-card__image img {
  transform: scale(1.08);
}

.vr-category-card__info {
  display: flex;
  flex-direction: column;
  text-align: left !important;
  padding: 1.2rem;
  background: transparent !important;
  gap: 0.5rem;
  justify-content: flex-start !important;
}

.vr-category-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: #0F172A !important;
  margin: 0 0 0.45rem 0;
  line-height: 1.2;
}

.vr-category-card__description {
  color: #64748B;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.vr-category-card__link {
  color: var(--brand-blue);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  margin-top: auto;
}

.vr-category-card__link svg {
  transition: transform 0.3s ease;
}

.vr-category-card:hover .vr-category-card__link {
  color: var(--brand-blue);
}

.vr-category-card:hover .vr-category-card__link svg {
  transform: translateX(6px);
}

/* ==========================================================================
   HOMEPAGE — FEATURED PRODUCTS (ps_featuredproducts)
   ========================================================================== */

.featured-products {
  background: var(--brand-black);
  padding: var(--section-padding) 0;
}

.featured-products .products-section-title {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  text-transform: none !important;
  margin-bottom: 2.5rem;
}

.featured-products .all-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-blue) !important;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 2rem;
  transition: all var(--transition-base);
}

.featured-products .all-product-link:hover {
  gap: 0.75rem;
}

.featured-products .all-product-link i {
  transition: transform var(--transition-base);
}

.featured-products .all-product-link:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   PRODUCT MINIATURE (card override)
   ========================================================================== */

.product-miniature {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: all var(--transition-base);
  height: 100%;
}

@media (max-width: 767px) {
  .products .product-miniature,
  .featured-products .product-miniature,
  .vr-featured-products .col-xs-12 {
    margin-bottom: 1.5rem;
  }
}

.product-miniature:hover {
  transform: translateY(-0.5rem);
  border-color: var(--brand-blue-border);
  box-shadow: var(--shadow-card-hover);
}

.product-miniature .thumbnail-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-miniature .thumbnail-top {
  position: relative;
  overflow: hidden;
  background: var(--brand-dark-lighter);
}

.product-miniature .thumbnail-top .product-thumbnail img {
  transition: transform var(--transition-base);
}

.product-miniature:hover .thumbnail-top .product-thumbnail img {
  transform: scale(1.05);
}

.product-miniature .thumbnail-container .product-thumbnail {
  display: block;
}

.product-miniature .product-description {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-miniature .product-title a {
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.product-miniature .product-title a:hover {
  color: var(--brand-blue) !important;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto;
}

.product-miniature .product-price-and-shipping .price {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1.15rem;
}

.product-miniature .regular-price {
  color: var(--text-muted) !important;
  text-decoration: line-through;
  font-size: 0.85rem;
}

.product-miniature .discount-percentage,
.product-miniature .discount-amount {
  background: var(--brand-orange) !important;
  color: #fff !important;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Highlighted Info / Quick View */
.product-miniature .highlighted-informations {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 1rem;
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.product-miniature:hover .highlighted-informations {
  transform: translateY(0);
}

.product-miniature .quick-view {
  color: #fff !important;
  font-size: 0.85rem;
}

.product-miniature .quick-view i {
  color: var(--brand-blue) !important;
}

/* Product flags */
.product-flag {
  background: var(--brand-blue);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}

.product-flag.discount {
  background: var(--brand-orange);
}

.product-flag.new {
  background: #10B981;
}

/* ==========================================================================
   HOMEPAGE — CONSTRUCTOR SECTION
   ========================================================================== */

.vr-constructor {
  padding: var(--section-padding) 0;
  background: var(--brand-dark);
}

.vr-constructor__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.vr-constructor__visual {
  background: var(--brand-black);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  position: relative;
  overflow: hidden;
}

.vr-constructor__visual-icon {
  font-size: 5rem;
  line-height: 1;
  opacity: 0.3;
}

.vr-constructor__visual-text {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.vr-constructor__content h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.vr-constructor__content p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.vr-constructor__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.vr-constructor__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.vr-constructor__features li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   HOMEPAGE — ADVANTAGES SECTION
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE — ADVANTAGES SECTION (Refined Full-Bleed)
   ========================================================================== */
.vr-advantages {
  padding: 8rem 0;
  background: var(--brand-black) !important;
  text-align: center;
  /* Center header content */
}

.vr-advantages .vr-section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.vr-advantages .vr-section-subtitle {
  text-align: center;
  margin: 0 auto 3rem auto;
}

.vr-advantages-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  text-align: left;
  /* Keep card content left-aligned */
}

@media (min-width: 768px) {
  .vr-advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .vr-advantages-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vr-advantage-card {
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1.2rem 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  width: 100%;
}

.vr-advantage-card:hover {
  background: #222222;
  transform: translateY(-8px);
  border-color: rgba(0, 106, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.vr-advantage-icon {
  width: 56px;
  height: 56px;
  background: rgba(0, 106, 255, 0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--brand-blue);
  /* Blue icon initially */
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.vr-advantage-card:hover .vr-advantage-icon {
  background: rgba(0, 106, 255, 0.2);
  color: var(--brand-blue);
  /* White icon on hover */
}

.vr-advantage-icon svg {
  width: 28px;
  /* Reduced from 32px */
  height: 28px;
  stroke-width: 2.2;
}

.vr-advantage-card h4 {
  font-family: var(--font-heading) !important;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: #FFFFFF !important;
  line-height: 1.2;
}

.vr-advantage-card p {
  color: #9CA3AF;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   HOMEPAGE — FRAME ANATOMY SECTION
   ========================================================================== */
.vr-frame-anatomy {
  padding: 6rem 0;
  background: var(--brand-dark) !important;
}

.vr-frame-anatomy__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 992px) {
  .vr-frame-anatomy__layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

.vr-frame-anatomy__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.vr-frame-anatomy__center {
  flex: 1.5;
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .vr-frame-anatomy__center {
    order: -1;
  }
  .vr-anatomy-feature__text.text-right,
  .vr-anatomy-feature__text.text-left {
    text-align: left !important;
  }
}

.anatomy-main-img {
  max-width: 100%;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.anatomy-main-img:hover {
  transform: scale(1.02);
}

.vr-anatomy-feature {
  background: transparent;
  padding: 0;
  border: none;
  transition: all 0.3s ease;
}

.vr-anatomy-feature:hover {
  background: transparent;
  transform: translateY(-3px);
}

.vr-anatomy-feature__text {
  background: #1A1A1A;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.vr-anatomy-feature__icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 106, 255, 0.1);
  color: var(--brand-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.vr-anatomy-feature__text strong {
  display: block;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.vr-anatomy-feature__text p {
  color: #9CA3AF;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   HOMEPAGE — INSTALLATION SECTION
   ========================================================================== */
.vr-installation {
  padding: 6rem 0;
  background: var(--brand-black) !important;
}

.vr-installation__subtitle {
  font-weight: 600;
}

.vr-installation__badge {
  display: inline-block;
  margin-top: 1rem;
  background: #FCE83A;
  color: #000;
  padding: 6px 20px;
  font-weight: 700;
  border-radius: 6px;
  font-size: 1.1rem;
}

.vr-installation__layout-center {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
}

@media (min-width: 992px) {
  .vr-installation__layout-center {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
  }
}

.vr-installation__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.vr-installation__visual {
  flex: 1.2;
  text-align: center;
}

@media (max-width: 991px) {
  .vr-installation__visual {
    order: -1;
    margin-bottom: 1rem;
  }
}

.car-bumper-img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.vr-install-step {
  background: rgba(0, 106, 255, 0.05);
    border: 1px solid rgba(0, 106, 255, 0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: left;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vr-install-step--compact {
  flex-direction: row;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.vr-install-step:hover {
  transform: translateY(-5px);
  border-color: var(--brand-blue);
}

.vr-install-step__img {
  text-align: center;
  background: #222;
  border-radius: 8px;
  padding: 10px;
}

.vr-install-step--compact .vr-install-step__img {
  padding: 5px;
  background: transparent;
  flex-shrink: 0;
  width: 150px;
  display: flex;
  justify-content: center;
}

.vr-install-step__img img {
  max-width: 100%;
  height: auto;
  max-height: 120px;
}

.vr-install-step--compact .vr-install-step__img img {
  max-height: 150px;
  background: var(--brand-blue);
  border-radius: 0.8rem;
}

.vr-install-step__content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.vr-install-step--compact .vr-install-step__content {
  flex: 1;
}

.vr-install-step__number {
  width: 36px;
  height: 36px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 106, 255, 0.4);
}

.vr-install-step__number--grey {
  background: #FCE83A;
  color: #000;
  box-shadow: none;
}

.vr-install-step__number--yellow {
  background: #FCE83A;
  color: #000;
  box-shadow: none;
}

.vr-install-step--compact .vr-install-step__number {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  margin-top: 3px;
}

.vr-install-step__text p {
  color: #9CA3AF;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.vr-install-step--compact .vr-install-step__text p {
  font-size: 0.85rem;
  line-height: 1.4;
}

.vr-recommendation-box {
  background: rgba(0, 106, 255, 0.05);
  border: 1px solid rgba(0, 106, 255, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 800px;
  margin: 1rem auto;
}

.vr-recommendation-box--full {
  max-width: 100%;
}

.vr-recommendation-box strong {
  color: #fff;
}

/* ==========================================================================
   HOMEPAGE — REVIEWS SECTION (Professional Light Theme)
   ========================================================================== */
.vr-reviews {
  padding: 6rem 0;
  background: #FFFFFF !important;
  position: relative;
}

.vr-reviews .vr-section-title {
  color: #111827 !important;
  text-align: center;
}

.vr-reviews .vr-section-subtitle {
  color: #6B7280;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem auto;
}

.vr-reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .vr-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1200px) {
  .vr-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vr-review-card {
  background: #F9FAFB;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  text-align: left;
  min-height: 380px;
}

.vr-review-quote svg {
  color: #006AFF;
  opacity: 0.2;
  /* lucide text-brand-blue/20 equivalent */
}

.vr-review-stars {
  color: #FFB800;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.vr-review-text {
  color: #111827;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
  font-weight: 450;
}

.vr-review-divider {
  border: 0;
  border-top: 1px solid #E5E7EB;
  margin: 0 0 1.5rem 0;
  opacity: 0.6;
}

.vr-review-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vr-review-avatar {
  width: 55px;
  height: 55px;
  background: #006AFF;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.vr-review-meta {
  display: flex;
  flex-direction: column;
}

.vr-review-author-name {
  color: #111827;
  font-weight: 700;
  font-size: 1rem;
}

.vr-review-author-info {
  color: #6B7280;
  font-size: 0.8125rem;
  margin-top: 2px;
}

/* Global blue text helper (generated via JS for titles) */
.text-blue {
  color: #006AFF !important;
  font-weight: inherit;
  display: inline-block;
}

/* Specific for Hero Title (manual exclusion from JS) */
.vr-hero__title,
.vr-hero__content #custom-text h1 {
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  color: #FFFFFF !important;
  font-family: inherit;
}

.vr-hero__title .text-blue,
.vr-hero__content #custom-text h1 span.text-blue {
  display: block;
  margin-top: 0.2rem;
  background: linear-gradient(90deg, #0066FF 0%, #00D1FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  color: transparent !important;
  width: fit-content;
}

.vr-hero__subtitle,
.vr-hero__content #custom-text p {
  color: #9CA3AF !important;
  font-size: 1.125rem !important;
  max-width: 600px;
  margin-bottom: 0;
  line-height: 1.6 !important;
  background: transparent !important;
}

/* Remove default PrestaShop module styles in Hero area */
.vr-hero__content #custom-text {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.vr-hero__content #custom-text>div {
  padding: 0 !important;
}

/* ==========================================================================
   HOMEPAGE — CTA SECTION
   ========================================================================== */

.vr-cta {
  padding: 100px 20px;
  background: linear-gradient(135deg, #0088FF 0%, #0066FF 50%, #0044CC 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.vr-cta::before {
  content: "\2713";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transform: rotate(-15deg);
  pointer-events: none;
}

.vr-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.vr-cta__title {
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.vr-cta__subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.vr-cta__buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

.vr-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
}

.vr-cta__btn--primary {
  background: #FFFFFF;
  color: #0066FF !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vr-cta__btn--primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: #f8f9fa;
}

.vr-cta__btn--outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #FFFFFF !important;
}

.vr-cta__btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  transform: translateY(-4px);
}

.vr-cta__badges {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.vr-cta__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem;
  font-weight: 600;
}

.vr-icon {
  flex-shrink: 0;
}

.vr-icon-badge {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .vr-cta {
    padding: 80px 20px;
  }

  .vr-cta__title {
    font-size: 2.25rem;
  }

  .vr-cta__buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .vr-cta__btn {
    justify-content: center;
  }

  .vr-cta__badges {
    flex-direction: column;
    gap: 15px;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer {
  background: var(--brand-black) !important;
  border-top: 1px solid var(--border-subtle);
}

.footer-container {
  background: var(--brand-black) !important;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.footer-container .h3,
.footer-container h3,
.footer-container .vr-footer-heading,
.footer-container h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  text-transform: none !important;
}

.footer-container a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-container a:hover {
  color: var(--brand-blue) !important;
}

.footer-container li {
  margin-bottom: 0.5rem;
}

.footer-container p,
.footer-container .text-sm-center {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
}

.footer-container .text-sm-center a {
  color: var(--text-muted) !important;
}

.footer-container .text-sm-center a:hover {
  color: var(--brand-blue) !important;
}

/* Dynamic Social Follow icons in Contacts block */
.vr-footer-social-wrapper {
  margin-top: 1rem;
}

.vr-social-icons {
  display: flex !important;
  gap: 1rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vr-social-icons li a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand-dark-lighter);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.vr-social-icons li a:hover {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 102, 255, 0.4);
}

.vr-social-icons li a span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Contact info in footer */
.block-contact {
  color: var(--text-secondary);
}

.block-contact .block-contact-title {
  color: var(--text-primary) !important;
}

/* Newsletter */
.block_newsletter {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem !important;
}

.block_newsletter p {
  color: var(--text-secondary) !important;
}

.block_newsletter input[type="email"] {
  background: var(--brand-black) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.block_newsletter input[type="email"]::placeholder {
  color: var(--text-muted);
}

.block_newsletter .btn-primary {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   INNER PAGES — WRAPPER / BREADCRUMB
   ========================================================================== */

#wrapper {
  background: var(--brand-black) !important;
}

.breadcrumb {
  background: transparent;
}

.breadcrumb li {
  color: var(--text-muted);
}

.breadcrumb li::after {
  color: var(--text-muted);
}

.breadcrumb li a {
  color: var(--text-secondary) !important;
}

.breadcrumb li a:hover {
  color: var(--brand-blue) !important;
}

.breadcrumb li:last-child span {
  color: var(--text-primary);
}

/* ==========================================================================
   INNER PAGES — CATALOG / CATEGORY
   ========================================================================== */

#left-column {
  background: transparent;
}

.block-categories,
.facets-title {
  color: var(--text-primary) !important;
}

.block-categories .category-sub-menu li a {
  color: var(--text-secondary) !important;
}

.block-categories .category-sub-menu li a:hover {
  color: var(--brand-blue) !important;
}

/* Faceted search */
.faceted-search .facet .title {
  color: var(--text-primary) !important;
}

.faceted-search .facet .facet-label a {
  color: var(--text-secondary) !important;
}

.faceted-search .facet .custom-checkbox input[type="checkbox"]+span {
  border-color: var(--border-color);
  background: var(--brand-dark);
}

/* Sort orders */
.products-sort-order .select-title {
  background: var(--brand-dark) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.products-sort-order .dropdown-menu {
  background: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
}

.products-sort-order .dropdown-menu a {
  color: var(--text-secondary) !important;
}

.products-sort-order .dropdown-menu a:hover {
  background: var(--brand-blue-light) !important;
  color: var(--brand-blue) !important;
}

/* Pagination */
.pagination .page-list li a,
.pagination .page-list li span {
  background: var(--brand-dark);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.pagination .page-list li.current a,
.pagination .page-list li.current span {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-color: var(--brand-blue) !important;
}

.pagination .page-list li a:hover {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  border-color: var(--brand-blue-border);
}

/* Products count */
.products-sort-nb .showing,
.total-products p {
  color: var(--text-secondary);
}

/* ==========================================================================
   INNER PAGES — PRODUCT PAGE
   ========================================================================== */

.product-container {
  background: var(--brand-black);
}

.product-information .product-title {
  color: var(--text-primary) !important;
}

.product-prices .current-price span {
  color: var(--text-primary) !important;
}

.product-prices .regular-price {
  color: var(--text-muted) !important;
}

.product-actions .add-to-cart {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.75rem 2rem;
  transition: all var(--transition-base);
}

.product-actions .add-to-cart:hover {
  background: var(--brand-blue-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.product-actions .qty-input {
  background: var(--brand-dark) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.product-description,
.product-details {
  color: var(--text-secondary);
}

.tabs .nav-tabs {
  border-bottom-color: var(--border-color);
}

.tabs .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  color: var(--brand-blue) !important;
  border-bottom-color: var(--brand-blue);
  background: transparent;
}

.tabs .tab-content {
  color: var(--text-secondary);
  border: none;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0 1.5rem 0 1.5rem;
}

.product-page__tabs .nav-tabs {
  border-bottom: 2px solid #e2e8f0 !important;
  margin-bottom: 1.25rem;
}

.tabs {
    padding: 0;
    margin-top: 1rem;
    background: #fff;
}

.product-page__tabs .nav-tabs .nav-link {
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  padding: 0.75rem 1rem !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  margin-bottom: -2px;
}

.product-page__tabs .nav-tabs .nav-link.active,
.product-page__tabs .nav-tabs .nav-link:hover {
  color: #2563eb !important;
}

.product-features {
    margin-top: 0.25rem;
    margin-left: .3125rem;
}

.tabs .tab-pane {
    padding-top: 0.25rem;
}

/* Вміст табок */
.product-page__tabs .tab-content .product-description {
  color: #475569 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

.definition-list dl dd:nth-of-type(even), .definition-list dl dt:nth-of-type(even), .product-features>dl.data-sheet dd.value:nth-of-type(even), .product-features>dl.data-sheet dt.name:nth-of-type(even) {
    background: #ffffff;
}

.product-features>dl.data-sheet dd.value, .product-features>dl.data-sheet dt.name {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 40%;
    flex: 1 0 40%;
    min-height: 1.5rem;
    padding: 0.2rem 0.8rem;
    margin-right: .625rem;
    margin-bottom: .5rem;
    font-weight: 500;
    text-transform: lowercase;
    word-break: normal;
    background: #f1f5f9;
}

/* ==========================================================================
   INNER PAGES — CART
   ========================================================================== */

.cart-grid .card {
  background: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
  border-radius: var(--radius-md);
}

.cart-grid .card-header {
  background: transparent !important;
  border-bottom-color: var(--border-color) !important;
}

.cart-grid .card-header h1 {
  color: var(--text-primary) !important;
}

.cart-grid .product-line-info a {
  color: var(--text-primary) !important;
}

.cart-grid .product-price {
  color: var(--text-primary) !important;
}

.cart-grid .cart-summary-line .label,
.cart-grid .cart-summary-line .value {
  color: var(--text-secondary);
}

.cart-grid .cart-total .label,
.cart-grid .cart-total .value {
  color: var(--text-primary) !important;
  font-weight: 700;
}

/* ==========================================================================
   INNER PAGES — CMS PAGES (FAQ, Delivery, etc.)
   ========================================================================== */

.page-cms .page-content,
.page-content {
  color: var(--text-secondary);
}

.page-cms .page-content h1,
.page-cms .page-content h2,
.page-cms .page-content h3 {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   FORMS (Checkout, Login, Register)
   ========================================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  transition: border-color var(--transition-fast);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-blue-light) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

label {
  color: var(--text-secondary) !important;
}

.custom-checkbox input[type="checkbox"]+span {
  border-color: var(--border-color);
  background: var(--brand-dark);
}

.custom-checkbox input[type="checkbox"]:checked+span {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.custom-radio input[type="radio"]+span {
  border-color: var(--border-color);
}

.custom-radio input[type="radio"]:checked+span {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.radio-label {
    display: inline-block;
    padding: .125rem .625rem;
    font-weight: 600;
    background: #f1f5f9;
    border: 1px solid #f1f5f9;
    border-radius: var(--radius-sm);
}

.input-color:checked+span, .input-color:hover+span, .input-radio:checked+span, .input-radio:hover+span {
    border: 1px solid var(--brand-blue);
}

/* ==========================================================================
   CARDS & ALERTS
   ========================================================================== */

.card {
  background: var(--brand-black) !important;
  border-color: var(--border-color) !important;
  border-radius: var(--radius-md);
}

.card-header {
  background: transparent !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.card-body {
  color: var(--text-secondary);
}

.alert-info {
  background: var(--brand-blue-light);
  border-color: var(--brand-blue-border);
  color: var(--brand-blue);
}

.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10B981;
}

.alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #FBBF24;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  color: var(--text-secondary);
}

.table thead th {
  background: var(--brand-dark);
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

.table td {
  border-color: var(--border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

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

/* Tablet */
@media (max-width: 991px) {
  .vr-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vr-advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vr-reviews-grid {
    grid-template-columns: 1fr;
  }

  .vr-constructor__inner {
    grid-template-columns: 1fr;
  }

  .vr-section-title {
    font-size: 1.75rem;
  }

  .vr-cta h2 {
    font-size: 2rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --section-padding: 3rem;
  }

  .vr-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .vr-advantages-grid {
    grid-template-columns: 1fr;
  }

  .vr-section-title {
    font-size: 1.5rem;
  }

  .vr-cta h2 {
    font-size: 1.5rem;
  }

  .vr-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .vr-cta__badges {
    flex-direction: column;
    gap: 0.75rem;
  }

  #carousel .carousel-item img {
    min-height: 250px;
  }

  #carousel .carousel-item .caption h2 {
    font-size: 1.5rem;
  }

  .featured-products .products-section-title {
    font-size: 1.5rem;
  }
}

/* Small mobile */
@media (max-width: 600px) {
  .vr-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MOBILE MENU DRAWER
   ========================================================================== */
#mobile_top_menu_wrapper {
  background: var(--brand-black) !important;
  color: var(--text-primary) !important;
  padding: 2rem 1.5rem !important;
  width: 300px !important;
}

#mobile_top_menu_wrapper .js-top-menu {
  margin-top: 1rem;
}

#mobile_top_menu_wrapper .top-menu[id^="mobile_top_menu"] a {
  color: var(--text-secondary) !important;
  font-size: 1.1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-subtle);
  display: block;
}

#mobile_top_menu_wrapper .top-menu[id^="mobile_top_menu"] a:hover {
  color: var(--brand-blue) !important;
}

#mobile_top_menu_wrapper .top-menu .collapse-icons {
  color: var(--text-muted);
}

/* User info & Cart in mobile menu */
#_mobile_user_info,
#_mobile_cart {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

#_mobile_user_info i,
#_mobile_cart i {
  color: var(--brand-blue);
  margin-right: 0.5rem;
}

/* Mobile Search */
#_mobile_search_widget {
  margin: 1.5rem 0;
}

#_mobile_search_widget form input {
  background: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Menu Overlay */
.menu-open #mobile_top_menu_wrapper {
  box-shadow: 20px 0 50px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   CATALOG FACETS (Left Column)
   ========================================================================== */
.faceted-search .facet .facet-title {
  color: var(--text-primary) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.faceted-search .facet .facet-label {
  padding: 0.35rem 0;
}

.faceted-search .facet .custom-checkbox input[type="checkbox"]+span .checkbox-checked {
  color: var(--brand-blue) !important;
}

.faceted-search .facet .facet-label a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
}

.faceted-search .facet .facet-label a:hover {
  color: var(--brand-blue) !important;
}

/* Range sliders */
.ui-slider {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color) !important;
  height: 6px !important;
}

.ui-slider-range {
  background: var(--brand-blue) !important;
}

.ui-slider-handle {
  background: #fff !important;
  border: 2px solid var(--brand-blue) !important;
  width: 16px !important;
  height: 16px !important;
  top: -6px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.ps-banner,
#ps-banner {
  margin: 0;
}

/* Custom text block */
.custom-text-block {
  background: var(--brand-dark);
  color: var(--text-secondary);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* Account pages */
.page-my-account #content .links a {
  background: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-base);
  border-radius: var(--radius-md);
}

.page-my-account #content .links a:hover {
  border-color: var(--brand-blue-border) !important;
  transform: translateY(-2px);
}

.page-my-account #content .links a i {
  color: var(--brand-blue) !important;
}

/* Checkout */
.checkout-step .step-title {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color);
}

.checkout-step .-current .step-title {
  border-bottom-color: var(--brand-blue);
}

.checkout-step .step-number {
  background: var(--brand-blue) !important;
  color: #fff;
}

/* Notifications */
.notifications-container .alert {
  border-radius: var(--radius-md);
}

/* ==========================================================================
   TEXT LOGO — Vramkah
   ========================================================================== */

.vr-logo {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none !important;
  letter-spacing: -0.02em;
}

.vr-logo:hover {
  text-decoration: none !important;
}

.vr-logo-accent {
  color: var(--brand-blue);
}

.vr-logo--footer {
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: 1rem;
}

#_desktop_logo a {
  text-decoration: none !important;
}

#_desktop_logo h1 {
  line-height: 1;
}

/* ==========================================================================
   HEADER SCROLL STATE
   ========================================================================== */

#header.header-scrolled {
  background: rgba(10, 10, 10, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   FOOTER — CUSTOM ELEMENTS
   ========================================================================== */

.vr-footer-col {
  margin-bottom: 30px;
  border: none !important;
}

#vr-footer-logo-img {
  max-width: 160px;
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  #vr-footer-logo-img {
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
  }
}

.footer-container hr {
  display: none !important;
}

.vr-footer-row {
  border: none !important;
}

/* Delivery & Payment Block
   ========================================================================== */
.vr-delivery-payment {
  padding: 80px 0;
  background: #000000 !important;
  color: #FFFFFF !important;
}

.vr-dp__header {
  text-align: center;
  margin-bottom: 60px;
}

.vr-dp__title {
  color: #FFFFFF !important;
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  margin-bottom: 15px;
}

.vr-dp__subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 1.15rem;
}

.vr-dp__col-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.vr-dp__col-header h3 {
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0;
  text-transform: uppercase;
}

.vr-icon-blue {
  color: #0066FF !important;
}

.vr-dp__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.vr-dp__item {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px 25px !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.vr-dp__item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #0066FF !important;
  transform: translateX(5px);
}

.vr-dp__item-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.vr-dp__item-icon {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px;
  background: #FFFFFF !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.vr-dp__item-icon img {
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  object-fit: contain;
}

.vr-dp__item-info {
  display: flex;
  flex-direction: column;
}

.vr-dp__item-name {
  color: #FFFFFF !important;
  font-size: 1.15rem !important;
  font-weight: 700;
}

.vr-dp__item-delay {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.9rem;
}

.vr-dp__item-price {
  color: #0066FF !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.vr-dp__item-tag {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

.vr-dp__tip {
  margin-top: 25px;
  background: rgba(0, 102, 255, 0.1) !important;
  border-radius: 16px;
  padding: 20px;
  border-left: 4px solid #0066FF;
}

.vr-dp__tip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #FEC84B !important;
  font-weight: 700;
}

.vr-dp__tip p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 768px) {
  .vr-dp__title {
    font-size: 2.25rem;
  }

  .vr-dp__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .vr-dp__item-right {
    width: 100%;
    text-align: right;
  }
}

footer#footer {
  background-color: var(--brand-black) !important;
  color: var(--text-primary) !important;
  padding: 0;
  margin-top: 4rem;
  border-top: 1px solid var(--border-color);
}

.vr-footer-desc {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.vr-footer-social {
  display: flex;
  gap: 0.5rem;
}

.vr-footer-heading {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: 1.25rem;
}

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

.vr-footer-links li {
  margin-bottom: 0.6rem;
}

.vr-footer-links a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.vr-footer-links a:hover {
  color: var(--brand-blue) !important;
}

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

.vr-footer-contacts li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.vr-footer-contact-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.vr-footer-contact-label {
  color: var(--text-primary) !important;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.vr-footer-contact-value {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  margin: 0;
}

.vr-footer-contacts a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.vr-footer-contacts a:hover {
  color: var(--brand-blue) !important;
}

.vr-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 1rem;
}

.vr-footer-copyright {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  margin: 0;
}

.vr-footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.vr-footer-bottom-links a {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.vr-footer-bottom-links a:hover {
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   HIDE UNNECESSARY DEFAULT PS ELEMENTS
   ========================================================================== */

.page-home .featured-products .products-section-title::before,
.page-home .featured-products .products-section-title::after {
  display: none;
}

/* Remove default PS container padding on home */
.page-home #wrapper .container {
  padding-top: 0;
}

/* Hide default banner and custom text modules on homepage if shown twice */
.page-home #ps-banner,
.page-home .ps-banner {
  display: none;
}

/* ==========================================================================
   GLOBAL UI DESIGN SYSTEM (VR UI KIT)
   ========================================================================== */

/* 1. TYPOGRAPHY & LINKS */
.vr-link {
  color: var(--brand-blue);
  text-decoration: none !important;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.vr-link:hover {
  color: var(--brand-blue-hover);
  padding-left: 2px;
}

/* 2. PREMIUM BUTTONS */
.vr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none !important;
  gap: 0.5rem;
}

.vr-btn--primary {
  background: var(--brand-blue);
  color: #FFFFFF !important;
}

.vr-btn--primary:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.vr-btn--outline {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary) !important;
}

.vr-btn--outline:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue) !important;
  background: var(--brand-blue-light);
}

.vr-btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* 3. PREMIUM CARDS (Product Miniatures) */
/* 3. PREMIUM CARDS (Product Miniatures) */
.vr-card {
  background: #ffffff !important;
  /* Deeper dark for cards */
  border: 1px solid #1F2937;
  border-radius: 1.25rem;
  padding: 0;
  /* Remove padding to let image fill top */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.vr-card:hover {
  border-color: var(--brand-blue-border);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.vr-card__img-wrapper {
  position: relative;
  /* Image fills card top edge-to-edge, height determined by image aspect ratio */
  overflow: hidden;
  background: #FFFFFF;
  /* White so product photos display correctly without blending */
  flex-shrink: 0;
}

.vr-card__img-link {
  display: block;
  width: 100%;
}

.vr-card__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* NO mix-blend-mode, NO filter, NO padding — clean edge-to-edge */
}

.vr-card:hover .vr-card__img {
  transform: scale(1.08);
}

/* в”Ђв”Ђ Wishlist button: hidden by default, fades in on card hover в”Ђв”Ђ */
.vr-card__wishlist {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  padding: 0;
}

.vr-card:hover .vr-card__wishlist {
  opacity: 1;
  transform: translateY(0);
}

.vr-card__wishlist svg {
  stroke: #374151;
  transition: stroke 0.2s ease, fill 0.2s ease;
}

.vr-card__wishlist:hover {
  background: rgba(255, 255, 255, 1);
}

.vr-card__wishlist:hover svg {
  stroke: #EF4444;
}

.vr-card__wishlist.in-wishlist svg,
.vr-card__wishlist.wishlist-button--in-wishlist svg {
  fill: #EF4444;
  stroke: #EF4444;
}

.vr-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #2D2D2D;
  /* Dark/Black like mockup */
  color: #fff;
  font-size: 0.65rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  /* More rounded like mockup */
  z-index: 5;
  text-transform: none;
  /* Usually not all-caps in such designs */
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

/* в”Ђв”Ђ Product Flags (NEW, ON SALE) в”Ђв”Ђ */
.vr-card .product-flags {
  position: absolute;
  top: 2.5rem;
  /* Position below the category badge */
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 4;
}

/* Override for flags inside the rating row (Move them to the right of stars) */
.vr-card__rating-row .product-flags {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  flex-direction: row !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  gap: 4px;
}

.vr-card .product-flag {
  background: #111111 !important;
  color: #FACC15 !important;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  border: 1px solid #FACC15;
  width: fit-content;
}

/* Smaller flags in the rating row context */
.vr-card__rating-row .product-flag {
  font-size: 0.45rem !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  height: fit-content;
  align-self: center;
}

.vr-card .product-flag.on-sale,
.vr-card .product-flag.discount {
  background: #EF4444 !important;
  color: #fff !important;
  border-color: #EF4444 !important;
}

.vr-card .product-flag.new {
  background: #22C55E !important;
  color: #fff !important;
  border-color: #22C55E !important;
}

.vr-card__info-wrapper {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.vr-card__rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.75rem;
}

.vr-card__stars {
  display: flex !important;
  align-items: center !important;
}

/* Force ProductComments stars to render correctly in dark card context */
.vr-card__stars .product-list-reviews {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  visibility: visible !important;
  position: relative !important;
  /* OVERRIDE module absolute */
  top: 0 !important;
  /* OVERRIDE module -26px */
  background: none !important;
  /* OVERRIDE module gray bg */
  padding: 0 !important;
  width: auto !important;
  justify-content: flex-start !important;
}

/* grade-stars needs position:relative + fixed dimensions for absolute star-content layers */
.vr-card__stars .grade-stars {
  position: relative !important;
  display: inline-block !important;
  height: 16px !important;
  width: 90px !important;
  /* Fixed width for 5 stars (5 * 18px) */
  min-width: 90px !important;
  visibility: visible !important;
}

/* star-content (empty + full layers) — absolute positioned, left:0 top:1px (module default) */
.vr-card__stars .star-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
  height: 16px !important;
  overflow: hidden !important;
  /* Clipping for partial ratings */
}

/* Individual star elements — fixed size, NO SHRINK */
.vr-card__stars div.star,
.vr-card__stars div.star-on {
  display: block;
  visibility: visible !important;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: 2px;
  opacity: 1 !important;
}

/* Color Filter: Turn orange sprite into Gold #FFB800 */
.vr-card__stars div.star-on {
  filter: hue-rotate(15deg) saturate(2) brightness(1.1);
}

/* Empty stars: make them dim and gray for contrast */
.vr-card__stars .star-empty div.star {
  filter: grayscale(1) opacity(0.2);
}

/* Ensure the full star layer stays on top within its container */
.vr-card__stars .star-full {
  z-index: 2;
  width: auto !important;
  /* Allow dynamic width from JS/inline-style */
  height: 16px !important;
}

.vr-card__stars .star-empty {
  width: 90px !important;
  /* Always 5 stars wide background */
  height: 16px !important;
}

/* Comment count "(N)" styling */
.vr-card__stars .comments-nb {
  color: #9CA3AF !important;
  /* Lighter for dark theme */
  font-size: 0.85rem !important;
  margin-left: 0.5rem !important;
  display: inline-block !important;
}

.vr-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0F172A !important;
  margin-bottom: 1rem;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: calc(1.125rem * 1.4 * 3); /* 3 рядки — вирівнювання карток */
}

.vr-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
}

.vr-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.vr-card__price span {
  font-size: 0.9rem;
  font-weight: 400;
  margin-left: 0.1rem;
}

.vr-card__regular-price {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: line-through;
  display: block;
  margin-bottom: 0.1rem;
}

/* в”Ђв”Ђ Cart button: solid blue square в”Ђв”Ђ */
.vr-card__add-btn {
  width: 44px;
  height: 44px;
  background: var(--brand-blue);
  border: none;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
  padding: 0;
}

.vr-card__add-btn:hover {
  background: var(--brand-blue-hover);
  transform: scale(1.05);
}

.vr-card__add-btn:disabled {
  background: #374151;
  cursor: not-allowed;
  opacity: 0.6;
}

.vr-card__add-btn svg {
  pointer-events: none;
}

.vr-card__actions form {
  margin: 0;
  padding: 0;
}

/* 4. PREMIUM DROPDOWNS & MODALS */
.vr-dropdown-content {
  background: var(--brand-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5. TOOLTIPS */
[data-vr-tooltip] {
  position: relative;
}

[data-vr-tooltip]::after {
  content: attr(data-vr-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--brand-dark-lighter);
  color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 1000;
  border: 1px solid var(--border-color);
}

[data-vr-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* 6. FORMS & FILTERS */
.vr-input {
  background: var(--brand-dark) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.vr-input:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.vr-hero {
  position: relative;
  padding: 6rem 0 4rem;
  background: var(--brand-black);
  overflow: hidden;
}

.vr-hero__bg-glow {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 106, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.vr-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.vr-hero__content {
  animation: fadeInUp 0.8s ease-out;
}

.vr-hero__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem;
  color: var(--text-primary) !important;
}

.text-blue {
  color: var(--brand-blue) !important;
}

.vr-hero__subtitle {
  color: var(--text-secondary) !important;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

.vr-hero__buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.vr-hero__slogan {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
  background: linear-gradient(90deg, #FFFFFF 0%, #006AFF 70%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.vr-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--transition-base);
  text-decoration: none !important;
  white-space: nowrap;
}

.vr-hero__btn--primary {
  background: var(--brand-blue);
  color: #fff !important;
  border: 2px solid var(--brand-blue);
}

.vr-hero__btn--primary:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue);
  color: #fff !important;
}

.vr-hero__btn--outline {
  background: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-primary) !important;
}

.vr-hero__btn--outline:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue) !important;
  background: var(--brand-blue-light);
}

.vr-hero__stats {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.vr-hero__stat {
  text-align: left;
}

.vr-hero__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.vr-hero__stat-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
  display: block;
}

.vr-hero__stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-color);
  flex-shrink: 0;
}

.vr-hero__visual {
  position: relative;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.vr-hero__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  /* Оптимальне співвідношення для фото авто/мото */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.vr-hero__slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.5s ease-in-out, transform 6s ease-in-out;
  z-index: 1;
}

.vr-hero__slider-img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

@media (max-width: 991px) {
  #header {
    margin-bottom: 0 !important;
  }
  #index #wrapper {
    padding-top: 0 !important;
  }
  .vr-hero {
    padding: 1.5rem 0 3rem !important;
  }

  .vr-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }

  .vr-hero__buttons {
    justify-content: center;
  }

  .vr-hero__stats {
    justify-content: center;
  }

  .vr-hero__stat {
    text-align: center;
  }

  .vr-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .vr-hero__visual {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .vr-hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .vr-hero__stats {
    flex-direction: column;
    gap: 1rem;
  }

  .vr-hero__stat-divider {
    width: 40px;
    height: 1px;
  }

  .vr-hero__title {
    font-size: 2rem !important;
  }
}

/* ==========================================================================
   PRODUCT CARD — Add to Cart Icon Button
   ========================================================================== */
.vr-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 0.75rem;
}

.vr-card__price-container {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vr-card__price-container .regular-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.vr-card__actions {
  flex-shrink: 0;
}

.vr-card__add-btn {
  width: 40px;
  height: 40px;
  border-radius: 0.625rem;
  background: var(--brand-blue);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.vr-card__add-btn:hover {
  background: var(--brand-blue-hover);
  transform: scale(1.05);
}

/* --- 6. FOOTER REBUILD --- */
.vr-footer-bottom-info {
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vr-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vr-footer-contacts-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.vr-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.vr-contact-icon {
  flex-shrink: 0;
  color: #006AFF;
  /* Brand Blue */
  margin-top: 0.15rem;
}

.vr-contact-text {
  display: flex;
  flex-direction: column;
}

.vr-contact-label {
  font-size: 0.75rem;
  color: #9CA3AF;
  /* Gray-400 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.vr-contact-text a,
.vr-contact-text span {
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.vr-contact-text a:hover {
  color: #006AFF;
}

@media (max-width: 991px) {
  .vr-footer-bottom-info .col-lg-6 {
    width: 100%;
    margin-bottom: 2rem;
  }
}

/* Social Icons in Footer */
.vr-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.vr-social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #1f2937;
  border-radius: 12px;
  color: #9CA3AF;
  transition: all 0.2s ease;
}

.vr-social-icon-btn:hover {
  background: #2D3748;
  color: #006AFF;
  transform: translateY(-2px);
}

/* Hide duplicate social block if it renders from the displayFooter hook */
.section-container>.row>.vr-footer-social {
  display: none !important;
}

/* в”Ђв”Ђ DYNAMIC FOOTER BACKGROUND (WOW EFFECT) в”Ђв”Ђ */
.footer-container {
  position: relative;
  overflow: hidden;
}

.vr-footer-glass {
  background: rgba(10, 15, 25, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.vr-footer-bg {
  position: absolute;
  inset: 0;
  background: #020617;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.vr-footer-bg::before {
  content: "\2713";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, #0c2b5e 0%, transparent 80%),
              radial-gradient(circle at top left, #0a192f 0%, transparent 80%);
  opacity: 0.1;
  animation: pulseBlue 10s ease-in-out infinite alternate;
}

@keyframes pulseBlue {
  0% { opacity: 0.1; }
  100% { opacity: 0.8; }
}


/* ==========================================================================
   HOME PAGE CARDS (product-home.tpl)
   ⚠️  Ці стилі обслуговують ТІЛЬКИ homepage картки (.vr-card).
   ⚠️  Шаблон: catalog/_partials/miniatures/product-home.tpl
   ⚠️  ЗАБОРОНЕНО змінювати без відповідних змін у product-home.tpl.
   — Всі .vr-card стилі знаходяться в секціях вище (PRODUCT CARDS, FEATURED).
   ========================================================================== */


/* ==========================================================================
   CATALOG LISTING REDESIGN (.catalog-card__)
   Template: catalog/_partials/miniatures/product.tpl
   Design: maket_white – v2.php (Light Mode)
   BEM: .catalog-card__*
   ========================================================================== */

/* в”Ђв”Ђ Wrapper в”Ђв”Ђ */
.catalog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #f1f5f9;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.catalog-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

/* в”Ђв”Ђ Image в”Ђв”Ђ */
.catalog-card__img-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: auto;
  background: transparent;
  flex-shrink: 0;
}

.catalog-card__img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-card__img {
  width: 100%;
  height: auto;
  transition: transform 0.7s ease;
  display: block;
}

.catalog-card:hover .catalog-card__img {
  transform: scale(1.05);
}

.catalog-card__img--placeholder {
  object-fit: contain;
  padding: 1rem;
}

/* ── Product flags: inline в rating-row, вирівнювання по правому краю ── */
.product-flags {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 0 auto !important; /* Вирівнювання по правому краю */
  padding: 0;
  pointer-events: none;
  justify-content: flex-end !important;
}

/* ── Badge категорії (top-left) ── */
.catalog-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* Перебиваємо theme.css через подвоєну специфічність */
.product-flags li.product-flag,
li.product-flag.on-sale,
li.product-flag.new,
li.product-flag.discount {
  width: fit-content !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-break: break-word;
  pointer-events: auto;
  border-radius: 4px !important;
  order: 0 !important;
}

/* ── Wishlist (top-right, появляється при ховері) ── */
.catalog-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.catalog-card:hover .catalog-card__wishlist {
  opacity: 1;
  transform: translateY(0);
}

.catalog-card__wishlist:hover {
  color: #ef4444 !important;
}

.catalog-card__wishlist.wishlist-button-add svg {
  fill: #ef4444;
  stroke: #ef4444;
}

/* в”Ђв”Ђ Body в”Ђв”Ђ */
.catalog-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Flags в каталозі: завжди по правому краю */
.catalog-card__rating .product-flags {
  margin-left: auto !important;
  justify-content: flex-end !important;
  flex: 1 1 auto;
}

/* в”Ђв”Ђ Rating row в”Ђв”Ђ */
.catalog-card__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  min-height: 20px;
}

/* в”Ђв”Ђ Stars: productcomments overlay в”Ђв”Ђ
   Структура DOM від productcomments JS:
   .product-list-reviews          ← зовнішня обгортка (модуль ставить position:absolute — перебиваємо)
     .grade-stars.small-stars     ← позиціонований контекст (position:relative)
       .star-content.star-empty   ← ШАР 1: порожні зірки (position:absolute, z-index:0)
         .star Г— 5
       .star-content.star-full    ← ШАР 2: заповнені зірки (position:absolute, z-index:1, width ≤ 100%)
         .star Г— 5
     .comments-nb                 ← лічильник "(1)"
*/

.catalog-card__stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0 !important;
  min-width: 90px !important;
  /* 80px Р·С–СЂРєРё + gap + comments-nb */
}

/* Порожній блок зірок (без відгуків) — згортається, щоб flags притиснулись вправо */
.catalog-card__stars:not(:has(.star)) {
  min-width: 0 !important;
  width: 0 !important;
  gap: 0 !important;
}

/* 1. product-list-reviews: повертаємо в нормальний потік (модуль ставить position:absolute + top:-26px)
   display:flex щоб .grade-stars і .comments-nb стояли в рядок */
.catalog-card__stars .product-list-reviews {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 2. grade-stars: позиціонований контекст для overlay двох шарів
   НЕ flex! — display:block щоб .star-content.star-full лягав ПОВЕРХ .star-content.star-empty */
.catalog-card__stars .grade-stars {
  position: relative !important;
  display: block !important;
  width: 80px !important;
  /* 5 Г— 16px */
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* 3. star-content: абсолютно позиціоновані шари (overlay)
   Перший (.star-empty) = фон порожніх зірок (z-index: 0)
   Другий (.star-full) = зафарбовані зірки ПОВЕРХ (z-index: 1) */
.catalog-card__stars .star-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 16px !important;
  overflow: hidden !important;
}

/* Порожні зірки (нижній шар - відправляємо на задній план) */
.catalog-card__stars .star-content.star-empty {
  position: relative !important;
  display: block !important;
  z-index: 1 !important;
}

/* Зафарбовані зірки (верхній шар - витягуємо на передній план) */
.catalog-card__stars .star-content.star-full {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: block !important;
  z-index: 2 !important;
}

/* Кожна заповнена зірка має стояти в ряд */
.catalog-card__stars .star-content.star-full .star-on {
  float: left !important;
  display: block !important;
}

/* 4. Кожна .star — sprite 16×16, float:left для горизонтального ряду */
.catalog-card__stars .star-content .star {
  visibility: visible !important;
  display: block !important;
  float: left !important;
  width: 16px !important;
  height: 16px !important;
}

/* 5. Лічильник відгуків — "(1)" праворуч від зірок */
.catalog-card__stars .comments-nb,
.catalog-card__stars+span,
.catalog-card__rating .nb-comments {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Product flags (знижки, новинки) */
.catalog-card .product-flag {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.catalog-card .product-flag.on-sale,
.catalog-card .product-flag.discount,
.catalog-card .product-flags li.product-flag.on-sale {
  background: #EF4444 !important;
  color: #fff !important;
}

.catalog-card .product-flag.new,
.catalog-card .product-flags li.product-flag.new {
  background: #22C55E !important;
  color: #fff !important;
}

/* в”Ђв”Ђ Title (max 3 СЂСЏРґРєРё) в”Ђв”Ђ */
.catalog-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.5rem; max-height: 9rem;
  line-height: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b !important;
  text-decoration: none !important;
  font-family: var(--font-body);
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

.catalog-card__title:hover {
  color: #2563eb !important;
}

/* ── Footer: ціна + кнопка ── */
.catalog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 0.75rem;
}

.catalog-card__price-wrap {
  display: flex;
  flex-direction: column;
}

.catalog-card__price-old {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

.catalog-card__price {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: var(--font-heading);
}

/* в”Ђв”Ђ Add to cart button в”Ђв”Ђ */
.catalog-card__add-btn {
  background: #2563eb;
  border: none;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  flex-shrink: 0;
}

.catalog-card__add-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.catalog-card__add-btn:active {
  transform: scale(0.95);
}

.catalog-card__add-btn:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Grid: по 3 в ряд (col-lg-4) — без змін ── */
/* Специфічна ізоляція: catalog-card стилі не потрапляють на homepage */
.page-home .catalog-card {
  display: none !important;
  /* homepage використовує ТІЛЬКИ .vr-card */
}


/* ==========================================================================
   CATALOG LISTING PAGE — layout, breadcrumb, sort, pagination overrides
   (Light Mode, відповідно до body:not(.page-home) theme switch вище)
   ========================================================================== */

/* Відступ між картками */
#js-product-list .js-product {
  margin-bottom: 1.5rem;
}

/* H1 категорії */
#js-product-list-header.h2 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

#js-product-list-header .text-blue {
  color: #2563eb !important;
}

/* Сортування */
#js-product-list-top .products-sort-order .select-title {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
}

/* Кількість товарів */
.total-products p,
.showing-products {
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Пагінація — стиль з maket_black.php (адаптовано до light mode)
   Оригінал: w-10 h-10 rounded-lg, active=bg-blue-600, inactive=bg-[#161a20]
   Light: білий фон, синій active, по центру
*/

/* 1. Центрування зовнішньої обгортки */
.pagination,
#js-product-list-bottom .pagination {
  display: flex !important;
  justify-content: center !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

/* 2. Р СЏРґРѕРє РєРЅРѕРїРѕРє */
.pagination .page-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* 3. Базова кнопка: 40×40px, заокруглена */
.pagination .page-list li a,
.pagination .page-list li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  line-height: 1 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* 4. Активна сторінка */
.pagination .page-list li.current a,
.pagination .page-list li.current span {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* 5. Ховер неактивних */
.pagination .page-list li a:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* 6. Кнопки "Далі" / "Попередня" — тільки іконка, без тексту
   Ховаємо текст через font-size: 0, показуємо стрілку через ::before/::after
*/
.pagination .page-list li.next a,
.pagination .page-list li.previous a {
  font-size: 0 !important;
  /* ховаємо "Далі" / "Попередня" */
  color: transparent !important;
}

/* Стрілка "›" для "Далі" */
.pagination .page-list li.next a::after {
  content: '›';
  font-size: 1.2rem;
  font-weight: 700;
  color: #475569;
  line-height: 1;
}

/* Стрілка "‹" для "Попередня" */
.pagination .page-list li.previous a::before {
  content: 'РІР‚в„–';
  font-size: 1.2rem;
  font-weight: 700;
  color: #475569;
  line-height: 1;
}

/* Ховер на стрілках */
.pagination .page-list li.next a:hover::after,
.pagination .page-list li.previous a:hover::before {
  color: #1e293b;
}

/* Material Icons у кнопках (якщо PrestaShop рендерить через material-icons) */
.pagination .page-list li.next a .material-icons,
.pagination .page-list li.previous a .material-icons {
  font-size: 1.1rem !important;
  color: #475569 !important;
}

/* ==========================================================================
   STICKY SIDEBAR
   Причина проблеми: Bootstrap .row = float-based → sticky не працює
   Рішення: перевести .row → flexbox + align-self:flex-start на #left-column
   ========================================================================== */

/* 1. Перетворюємо Bootstrap .row на flexbox для каталогу/пошуку
   Реальний DOM: #wrapper > .section-container > .row (НЕ .container!) */
body.page-category #wrapper .row,
body.page-search #wrapper .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* 2. Знімаємо float з Bootstrap-колонок (важливо для flexbox!) */
body.page-category #wrapper .row>[class*="col-"],
body.page-search #wrapper .row>[class*="col-"] {
  float: none !important;
}

/* 3. Sticky на самій #left-column
   align-self: flex-start — КРИТИЧНО щоб sticky спрацював у flexbox */
body.page-category #left-column,
body.page-search #left-column {
  position: sticky !important;
  top: 90px !important;
  align-self: flex-start !important;
  /* ← без цього sticky ≠ sticky */
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Scrollbar для сайдбару */
body.page-category #left-column::-webkit-scrollbar,
body.page-search #left-column::-webkit-scrollbar {
  width: 4px;
}

body.page-category #left-column::-webkit-scrollbar-track,
body.page-search #left-column::-webkit-scrollbar-track {
  background: transparent;
}

body.page-category #left-column::-webkit-scrollbar-thumb,
body.page-search #left-column::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

body.page-category #left-column::-webkit-scrollbar-thumb:hover,
body.page-search #left-column::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 5. Мобільний fallback — без sticky */
@media (max-width: 767px) {

  body.page-category #left-column,
  body.page-search #left-column {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: auto !important;
  }
}

/* 3. Sticky контейнер фільтрів */
#search_filters_wrapper,
.faceted-search-wrapper,
.block.faceted-search,
#left-column>.block {
  position: sticky !important;
  top: 90px !important;
  /* висота header + відступ */
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  /* Light design */
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 4. Кастомний скролбар всередині фільтрів */
#search_filters_wrapper::-webkit-scrollbar,
.faceted-search-wrapper::-webkit-scrollbar,
#left-column>.block::-webkit-scrollbar {
  width: 4px;
}

#search_filters_wrapper::-webkit-scrollbar-track,
.faceted-search-wrapper::-webkit-scrollbar-track,
#left-column>.block::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

#search_filters_wrapper::-webkit-scrollbar-thumb,
.faceted-search-wrapper::-webkit-scrollbar-thumb,
#left-column>.block::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#search_filters_wrapper::-webkit-scrollbar-thumb:hover,
.faceted-search-wrapper::-webkit-scrollbar-thumb:hover,
#left-column>.block::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 5. Заголовок блоку фільтрів */
#left-column .block-title,
#search_filters_wrapper .faceted-title,
.faceted-search-wrapper>.title {
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Іконка фільтрів перед заголовком */
#left-column .block-title::before,
#search_filters_wrapper .faceted-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3Cline x1='11' y1='18' x2='13' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Фасети / фільтри — light */
.faceted-search .facet .title {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 0.5rem !important;
}

.faceted-search .facet .facet-label a {
  color: #475569 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.faceted-search .facet .facet-label a:hover {
  color: #2563eb !important;
}

.faceted-search .facet .custom-checkbox input[type="checkbox"]+span {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.faceted-search .facet .custom-checkbox input[type="checkbox"]:checked+span {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* Активні фільтри (теги) */
.active-filter-title {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #64748b !important;
}

.filter-block .js-search-filters-clear-all {
  color: #ef4444 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.filter-block .js-search-filters-clear-all:hover {
  color: #dc2626 !important;
}

/* Мобільна кнопка "Фільтри" */
.btn-filter-toggle,
#search_filter_toggler {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0.6rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* На мобільних — не sticky, звичайний блок */
@media (max-width: 767px) {

  #search_filters_wrapper,
  .faceted-search-wrapper,
  #left-column>.block {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Breadcrumbs — light (catalog) */
body:not(.page-home) .breadcrumb li {
  color: #64748b;
}

body:not(.page-home) .breadcrumb li a {
  color: #475569 !important;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body:not(.page-home) .breadcrumb li a:hover {
  color: #2563eb !important;
}

body:not(.page-home) .breadcrumb li:last-child span {
  color: #2563eb;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body:not(.page-home) .breadcrumb li::after {
  color: #94a3b8;
}


/* ==========================================================================
   PRODUCT PAGE (.product-page)
   Template: catalog/product.tpl (child theme override)
   Light Mode — зберігається разом із .product-page__* класами
   ========================================================================== */

/* Обгортка сторінки */
.product-page {
  background: #ffffff;
}

/* Fix for sticky: parents must not have overflow hidden/auto */
#wrapper, #content-wrapper, #main {
  overflow: visible !important;
}

.product-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Заголовок товару */
.product-page__title.h1 {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 0.75rem !important;
  font-family: var(--font-heading) !important;
}

/* Ціна на сторінці товару */
.product-page .product-prices .current-price span,
.product-page .product-prices .price {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: var(--brand-blue) !important; /* Premium Blue Price */
  letter-spacing: -0.03em !important;
  font-family: var(--font-heading) !important;
}

.product-add-to-cart .product-prices {
  margin-bottom: 1.5rem;
}

.product-page .product-prices .regular-price {
  font-size: 1rem !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.product-page .product-prices .discount-percentage {
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Короткий опис */
.product-page__short-desc {
  color: #475569 !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem;
}

/* Кнопка "Додати в кошик" */
.product-page .product-actions .add-to-cart {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 0.2rem 2rem !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.product-page .product-actions .add-to-cart:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

.product-page .product-actions .add-to-cart:active {
  transform: scale(0.98) !important;
}

/* Override Native Bootstrap Touchspin */
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.input-group {
  width: 2rem;
}

.product-page .product-actions .bootstrap-touchspin {
  display: flex !important;
  align-items: center !important;
  background: #F1F5F9;
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  border: 1px solid #E2E8F0;
  box-shadow: none !important;
}

/* Break the vertical wrapper and make its children flex items of .bootstrap-touchspin */
.product-page .product-actions .bootstrap-touchspin .input-group-btn-vertical {
  display: contents !important;
}

/* Base styles for buttons */
.product-page .product-actions .bootstrap-touchspin .btn-touchspin {
  background: #FFFFFF !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569 !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin: 0 !important;
  padding: 0 !important;
  position: static !important; /* Reset PrestaShop absolute positioning */
  float: none !important; /* Reset float */
}

/* Order: Minus (Down) -> Input -> Plus (Up) */
.product-page .product-actions .bootstrap-touchspin .bootstrap-touchspin-down {
  order: 1 !important;
}

.product-page .product-actions .bootstrap-touchspin input {
  order: 2 !important;
  background: transparent !important;
  border: none !important;
  width: 50px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  float: none !important;
}

.product-page .product-actions .bootstrap-touchspin .bootstrap-touchspin-up {
  order: 3 !important;
}

.product-page .product-actions .bootstrap-touchspin .btn-touchspin:hover {
  background: var(--brand-blue-light) !important;
  color: var(--brand-blue) !important;
}

.product-page .product-actions .bootstrap-touchspin .btn-touchspin i {
  font-size: 18px !important;
  margin: 0 !important;
  position: static !important; /* Reset icon positioning */
  top: auto !important;
  left: auto !important;
}

/* Replace Up/Down Arrows with Plus/Minus without duplication */
.product-page .product-actions .bootstrap-touchspin .btn-touchspin i.touchspin-down::before {
  content: none !important; 
}
.product-page .product-actions .bootstrap-touchspin .btn-touchspin i.touchspin-down::after {
  content: '\E15B' !important; /* Minus (-) */
}

.product-page .product-actions .bootstrap-touchspin .btn-touchspin i.touchspin-up::before {
  content: none !important; 
}
.product-page .product-actions .bootstrap-touchspin .btn-touchspin i.touchspin-up::after {
  content: '\E145' !important; /* Plus (+) */
}

.product-page .product-actions .bootstrap-touchspin input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.product-quantity {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
.material-icons {
    display: inline-block;
    width: auto;
    height: auto;
    font-family: "Material Icons", Arial, sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
}

/* Кількість */
.product-page .product-actions .qty-input,
.product-page .product-actions .input-group input[type="number"] {
  color: #0f172a !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Атрибути (комбінації) */
.product-page .product-variants .control-label {
  color: #374151 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.product-page .product-variants .color {
  border-radius: 50% !important;
  border: 2px solid #e2e8f0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.product-page .product-variants .color.selected,
.product-page .product-variants .color:hover {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px #2563eb !important;
}

/* Галерея */
/* Галерея - STICKY */
.product-page__gallery {
  position: sticky !important;
  top: 110px !important;
  height: max-content;
  transition: top 0.3s ease;
}

@media (max-width: 767px) {
  .product-page__gallery {
    position: relative !important;
    top: auto !important;
  }
}

.product-page__gallery .product-cover img {
  border-radius: 16px;
}

.product-page__gallery .product-images-thumbnails .thumb {
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  transition: border-color 0.2s ease;
}

.product-page__gallery .product-images-thumbnails .thumb:hover,
.product-page__gallery .product-images-thumbnails .thumb.selected {
  border-color: #2563eb;
}

/* Аксесуари "Вам також може сподобатись" */
.product-accessories {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.product-accessories>.h5 {
  color: #0f172a !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8rem !important;
  margin-bottom: 1.5rem !important;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   PAGINATION — vr-pagination
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Kill parent theme .pagination styles */
nav.pagination {
  display: none !important;
}

.vr-pagination {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

/* в”Ђв”Ђ Load More button в”Ђв”Ђ */
.vr-pagination__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.vr-pagination__load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2.5rem;
  background: #2563eb;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.vr-pagination__load-more:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.vr-pagination__load-more:active {
  transform: translateY(0);
}

.vr-pagination__load-more:disabled {
  cursor: wait;
  opacity: 0.8;
}

.vr-pagination__load-more-spinner {
  display: inline-flex;
  align-items: center;
}

/* в”Ђв”Ђ Row: summary + pages в”Ђв”Ђ */
.vr-pagination__row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 42px;
}

/* Summary — absolute left */
.vr-pagination__summary {
  position: absolute;
  left: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}

/* в”Ђв”Ђ Page list в”Ђв”Ђ */
.vr-pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vr-pagination__item {
  display: flex;
}

.vr-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  transition: all 0.2s;
}

.vr-pagination__link:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

/* Active page */
.vr-pagination__item--active .vr-pagination__link {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  pointer-events: none;
}

/* Disabled link (current page in prev/next context) */
.vr-pagination__link--disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* Prev/Next arrows */
.vr-pagination__link--prev,
.vr-pagination__link--next {
  min-width: 40px;
  padding: 0;
}

.vr-pagination__link--prev svg,
.vr-pagination__link--next svg {
  stroke: currentColor;
}

/* Spacer (…) */
.vr-pagination__spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 40px;
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
}

/* в”Ђв”Ђ Responsive в”Ђв”Ђ */
@media (max-width: 767px) {
  .vr-pagination__row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .vr-pagination__summary {
    position: static;
    text-align: center;
  }

  .vr-pagination__link {
    min-width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .vr-pagination__load-more {
    width: 100%;
    padding: 0.85rem;
  }
}

/* в”Ђв”Ђ Override default .page-list from parent theme в”Ђв”Ђ */
.page-list {
  display: none !important;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   PRODUCTS TOP — Sort bar (compact)
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Kill parent theme products-selection */
.products-selection {
  display: none !important;
}

/* в”Ђв”Ђ Vr Products Top в”Ђв”Ђ */
.vr-products-top {
  margin-bottom: 1rem;
}

.vr-products-top__sort-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* в”Ђв”Ђ Sort component в”Ђв”Ђ */
.vr-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vr-sort__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  margin: 0;
}

.vr-sort__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.vr-sort__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 170px;
}

.vr-sort__select:hover {
  border-color: #cbd5e1;
}

.vr-sort__select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.vr-sort__chevron {
  position: absolute;
  right: 0.6rem;
  pointer-events: none;
  color: #64748b;
}

/* в”Ђв”Ђ Mobile в”Ђв”Ђ */
@media (max-width: 767px) {
  .vr-products-top__sort-row {
    justify-content: space-between;
  }

  .vr-sort__select {
    min-width: 140px;
    font-size: 0.75rem;
  }
}

/* ── Hide "Підкатегорії" heading ── */
.subcategory-heading {
  display: none !important;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Subcategory thumbnails — full override
   Kill all parent-theme effects: outline, scale, transition:all
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
#subcategories .subcategory-image a,
#subcategories .subcategory-image a.img {
  display: block !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  outline: 0 !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  transform: none !important;
}

#subcategories .subcategory-image a:hover,
#subcategories .subcategory-image a.img:hover,
#subcategories .subcategory-image a:active,
#subcategories .subcategory-image a.img:active {
  border-color: #2563eb !important;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15) !important;
  outline: 0 !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  transform: none !important;
}

#subcategories .subcategory-image a:focus,
#subcategories .subcategory-image a.img:focus {
  outline: 0 !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  border-color: #2563eb !important;
  transform: none !important;
}

#subcategories .subcategory-image img,
#subcategories .subcategory-image picture img {
  border-radius: 8px !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}

#subcategories .subcategory-image a:hover img,
#subcategories .subcategory-image a.img:hover img {
  transform: none !important;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   SIDEBAR — Full redesign (.vr-sidebar)
   Categories + Faceted Search filters
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Reset parent-theme within sidebar в”Ђв”Ђ */
.vr-sidebar,
.vr-sidebar *,
.vr-sidebar *::before,
.vr-sidebar *::after {
  box-sizing: border-box;
}

.vr-sidebar {
  padding-top: 0.5rem !important;
}

/* в”Ђв”Ђ Categories block в”Ђв”Ђ */
.vr-sidebar-block {
  margin-bottom: 1.5rem;
}

.vr-sidebar-block__title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: #1a1a1a !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.vr-sidebar-block__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vr-sidebar-block__item {
  margin-bottom: 0.15rem;
}

.vr-sidebar-block__link {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  color: #4b5563 !important;
  text-decoration: none !important;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.vr-sidebar-block__link:hover {
  background: #f0f4ff;
  color: #2563eb !important;
}

/* ── Faceted search — container ── */
.vr-sidebar #search_filters_wrapper {
  display: block !important;
}

.vr-sidebar #search_filters {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Faceted search — main title ── */
.vr-sidebar #search_filters > p.h6 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  color: #1a1a1a !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #2563eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vr-sidebar #search_filters > p.h6::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* ── Faceted search — section (facet) ── */
.vr-sidebar #search_filters .facet {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.vr-sidebar #search_filters .facet:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Faceted search — section title ── */
.vr-sidebar #search_filters .facet-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  color: #6b7280 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

/* ── Faceted search — filter labels ── */
.vr-sidebar #search_filters .facet ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vr-sidebar #search_filters .facet li {
  margin-bottom: 0.15rem;
}

.vr-sidebar #search_filters .facet label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-sidebar #search_filters .facet label:hover {
  background: #f0f4ff;
}

/* в”Ђв”Ђ Custom checkboxes в”Ђв”Ђ */
.vr-sidebar #search_filters .facet .custom-checkbox {
  position: relative;
  flex-shrink: 0;
}

.vr-sidebar #search_filters .facet .custom-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.vr-sidebar #search_filters .facet .custom-checkbox span.ps-shown-by-js {
  display: none !important;
}

/* в”Ђв”Ђ Magnitude (count badge) в”Ђв”Ђ */
.vr-sidebar #search_filters .facet .magnitude {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

/* в”Ђв”Ђ Price slider в”Ђв”Ђ */
.vr-sidebar #search_filters .faceted-slider {
  margin: 0.5rem 0;
}

.vr-sidebar #search_filters .ui-slider {
  background: #e5e7eb !important;
  border: none !important;
  height: 4px !important;
  border-radius: 2px !important;
}

.vr-sidebar #search_filters .ui-slider .ui-slider-range {
  background: #2563eb !important;
}

.vr-sidebar #search_filters .ui-slider .ui-slider-handle {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #2563eb !important;
  top: -6px !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.vr-sidebar #search_filters .ui-slider .ui-slider-handle:hover {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* в”Ђв”Ђ Price display в”Ђв”Ђ */
.vr-sidebar #search_filters .facet p {
  font-size: 0.85rem;
  color: #6b7280;
}

/* в”Ђв”Ђ Active filters в”Ђв”Ђ */
.vr-sidebar .js-active-filters,
.vr-sidebar #js-active-search-filters {
  margin-bottom: 1rem;
}

.vr-sidebar .active-filter-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.vr-sidebar .js-search-filters-clear-all {
  font-size: 0.8rem;
  color: #ef4444;
  text-decoration: underline;
  cursor: pointer;
}

/* в”Ђв”Ђ Kill all parent-theme outline/border artifacts in sidebar в”Ђв”Ђ */
.vr-sidebar a:focus,
.vr-sidebar a:hover,
.vr-sidebar button:focus {
  outline: 0 !important;
}

/* ── Facet label text — prevent clipping ── */
.vr-sidebar #search_filters .facet label .search-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

#search_filters .facet .facet-label .custom-checkbox, #search_filters .facet .facet-label .custom-radio {
    top: 0px;
    margin-right: 0;
}

#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {
    display: inline-block;
    margin-top: 0;
    font-size: .8375rem;
    color: #232323;
}

/* ==========================================================================
   SOCIAL SHARING ICONS (Product Page)
   ========================================================================== */
.social-sharing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem;
    column-gap: 1rem;
}   
.social-sharing li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: var(--brand-dark-lighter, #f3f4f6) !important;
  color: var(--text-primary, #1A1A1A) !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none;
  font-size: 0 !important; /* Hide text */
}

.social-sharing ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.social-sharing li {
  margin: 0 !important;
}

.social-sharing li a:hover {
  background-color: var(--brand-blue, #006AFF) !important;
  color: #fff !important;
}

.social-sharing li a::before {
  content: "" !important;
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
}

/* Facebook */
.social-sharing li.facebook a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 124.7v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 124.7v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Pinterest */
.social-sharing li.pinterest a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M248 8C111 8 0 119 0 256c0 105.4 65.5 194.7 158.2 235.4-2.1-19.4-4-49.3 .8-70.5 4.3-19.2 28.1-118.9 28.1-118.9s-7.1-14.3-7.1-35.4c0-33.1 19.2-57.9 43.1-57.9 20.3 0 30.1 15.2 30.1 33.4 0 20.4-13 50.9-19.7 79.1-5.6 23.6 11.8 42.8 35.1 42.8 42.2 0 74.6-44.5 74.6-108.6 0-56.5-40.6-96-98.8-96-67.4 0-107 50.6-107 101.4 0 19.9 7.7 41.3 17.3 52.9 1.9 2.3 2.1 4.3 1.5 6.6-1.8 7.4-5.8 23.6-6.6 26.9-1.2 4.6-3.8 5.6-8.5 3.4-31.5-14.7-51.2-61.2-51.2-98.5 0-80.3 58.4-154 168.3-154 88.3 0 156.9 62.9 156.9 146.9 0 87.7-55.3 158.4-132.2 158.4-25.8 0-50-13.4-58.3-29.2 0 0-12.7 48.4-15.8 60.5-5.7 22-21 49.6-31.3 66.4 22.8 7 47.1 10.8 72.3 10.8 137 0 248-111 248-248S385 8 248 8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M248 8C111 8 0 119 0 256c0 105.4 65.5 194.7 158.2 235.4-2.1-19.4-4-49.3 .8-70.5 4.3-19.2 28.1-118.9 28.1-118.9s-7.1-14.3-7.1-35.4c0-33.1 19.2-57.9 43.1-57.9 20.3 0 30.1 15.2 30.1 33.4 0 20.4-13 50.9-19.7 79.1-5.6 23.6 11.8 42.8 35.1 42.8 42.2 0 74.6-44.5 74.6-108.6 0-56.5-40.6-96-98.8-96-67.4 0-107 50.6-107 101.4 0 19.9 7.7 41.3 17.3 52.9 1.9 2.3 2.1 4.3 1.5 6.6-1.8 7.4-5.8 23.6-6.6 26.9-1.2 4.6-3.8 5.6-8.5 3.4-31.5-14.7-51.2-61.2-51.2-98.5 0-80.3 58.4-154 168.3-154 88.3 0 156.9 62.9 156.9 146.9 0 87.7-55.3 158.4-132.2 158.4-25.8 0-50-13.4-58.3-29.2 0 0-12.7 48.4-15.8 60.5-5.7 22-21 49.6-31.3 66.4 22.8 7 47.1 10.8 72.3 10.8 137 0 248-111 248-248S385 8 248 8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* X (Twitter) */
.social-sharing li.twitter a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.6 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.6 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Instagram */
.social-sharing li.instagram a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Threads */
.social-sharing li.threads a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Cpath d='M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.194473 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C160.865 101.024 153.273 93.6353 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Cpath d='M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.194473 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C160.865 101.024 153.273 93.6353 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* TikTok */
.social-sharing li.tiktok a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* WhatsApp */
.social-sharing li.whatsapp a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   HOMEPAGE — MOBILE INSTRUCTION FIX
   ========================================================================== */
@media (max-width: 767px) {
  .vr-install-step--compact {
    flex-direction: column;
    text-align: left;
    align-items: stretch;
  }
  
  .vr-install-step--compact .vr-install-step__content {
    align-items: flex-start;
  }
  
  .vr-install-step--compact .vr-install-step__img {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   PREMIUM MAP BUTTON
   ========================================================================== */
.vr-btn-directions-premium {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.vr-btn-directions-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

.vr-btn-directions-premium:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.25);
    transform: translateY(-2px);
}

.vr-btn-directions-premium:hover::before {
    left: 150%;
}

.vr-btn-directions-premium svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vr-btn-directions-premium:hover svg {
    transform: translateX(4px) translateY(-4px);
}



/* Premium Subcategories Hover Effect - Override */
#subcategories .subcategories-list li {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  will-change: transform;
}

#subcategories .subcategories-list li:hover {
  transform: translateY(-6px) !important;
}

#subcategories .subcategory-image a,
#subcategories .subcategory-image a.img {
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  outline: 0 !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
  transform: translateZ(0) !important;
}

#subcategories .subcategories-list li:hover .subcategory-image a {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18) !important;
  border-color: rgba(37, 99, 235, 0.1) !important;
}

#subcategories .subcategory-image img,
#subcategories .subcategory-image picture img {
  border-radius: 10px !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  width: 100% !important;
}

#subcategories .subcategories-list li:hover .subcategory-image img {
  transform: scale(1.05) !important;
}

#subcategories .subcategory-name {
  transition: color 0.3s ease !important;
}

#subcategories .subcategories-list li:hover .subcategory-name {
  color: #2563eb !important;
}

/* === CATEGORY IMAGE FIX === */
#subcategories .subcategory-image a,
#subcategories .subcategory-image a.img {
  z-index: 1 !important; /* Fixed Z-index for category image */
}

/* === WISHLIST Z-INDEX FIX === */
.wishlist-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    pointer-events: none;
}

.wishlist-modal .modal-dialog {
    pointer-events: auto;
    margin: 0 !important;
    position: fixed !important;
    left: 50% !important;
    top: 20% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
}

.js-product-miniature,
.vr-card,
.catalog-card {
    transform: none !important;
}

/* === CATEGORY IMAGE FIX === */
.vr-category-card img {
  z-index: 1 !important; /* Fix overlapping image z-index */
}

/* ===============================================================
   BLOCKWISHLIST MODAL FIXES (Final Restored)
   =============================================================== */
.wishlist-modal.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    background: rgba(0,0,0,0.5) !important;
    display: block !important;
}
.wishlist-modal .modal-dialog {
    position: absolute !important;
    top: 20% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.wishlist-modal .modal-content {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
}

/* FIX FOR BACKDROP-FILTER BREAKING POSITION:FIXED */
.footer-container:has(.wishlist-modal.show),
#wrapper:has(.wishlist-modal.show),
main:has(.wishlist-modal.show) {
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

/* ТЕКСТ І ІНПУТ ДЛЯ СВІТЛОГО ФОНУ МОДАЛКИ */
.wishlist-modal .modal-header h5, 
.wishlist-modal .modal-header .h5, 
.wishlist-modal .modal-title {     
    color: #111827 !important; 
} 
.wishlist-modal .close, 
.wishlist-modal button.close {     
    color: #111827 !important;     
    text-shadow: none !important;     
    opacity: 0.7 !important; 
} 
.wishlist-modal .close:hover, 
.wishlist-modal button.close:hover {     
    color: #000000 !important;     
    opacity: 1 !important; 
} 
.wishlist-modal .modal-body label {     
    color: #374151 !important; 
} 
.wishlist-modal .modal-body input.form-control, 
.wishlist-modal .modal-body input {     
    background-color: #f9fafb !important;     
    color: #111827 !important;     
    border: 1px solid #d1d5db !important; 
} 
.wishlist-modal .modal-body input.form-control::placeholder, 
.wishlist-modal .modal-body input::placeholder {     
    color: #6b7280 !important; 
}

/* Скасувати stacking context з карток */
.js-product-miniature,
.vr-card,
.catalog-card {
    transform: none !important;
}

/* === CATEGORY IMAGE FIX === */
.vr-category-card img,
#subcategories .subcategory-image a {
  z-index: 1 !important;
}



.products .js-product { height: 100%; }



.products.row > div { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.products.row > div > .js-product { flex: 1; display: flex; flex-direction: column; }


.products.row { display: flex; flex-wrap: wrap; }
.products.row::before, .products.row::after { display: none !important; }

















/* ===== Product share block — mirror blog article design (scoped to .vr-share) ===== */
.social-sharing.vr-share {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 14px;
    margin-top: 1.5rem;
    padding: 16px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    column-gap: 0;
}
.vr-share__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vr-share__label {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}
.vr-share .vr-share-native {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--brand-blue, #006AFF);
    background: transparent;
    color: var(--brand-blue, #006AFF);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.vr-share .vr-share-native:hover {
    background: var(--brand-blue, #006AFF);
    color: #fff;
}
.vr-follow-btn {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    transition: all 0.2s ease;
}
.vr-follow-btn--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.vr-follow-btn--instagram:hover { opacity: 0.9; color: #fff; text-decoration: none; }
.vr-follow-btn--tiktok { background: #000000; }
.vr-follow-btn--tiktok:hover { opacity: 0.85; color: #fff; text-decoration: none; }