/* ============================================
   xSmart.cz — Mironet.cz pixel-perfect clone
   v100 — Complete mironet redesign
   ============================================ */

/* ═══════════════════════════════════════════
   1. CUSTOM PROPERTIES + RESET
   ═══════════════════════════════════════════ */
:root {
  /* Primary — Deep navy */
  --xs-primary: #1a365d;
  --xs-primary-dark: #132a4a;
  --xs-primary-light: #f0f4f8;
  --xs-primary-glow: rgba(26, 54, 93, 0.12);
  /* Legacy aliases */
  --xs-blue: #1a56db;
  --xs-blue-dark: #1e40af;
  --xs-blue-deeper: #1e3a8a;
  --xs-blue-light: #eff6ff;
  --xs-blue-glow: rgba(26, 86, 219, 0.12);
  /* CTA — warm amber for Koupit */
  --xs-cta: #f59e0b;
  --xs-cta-dark: #d97706;
  --xs-cta-light: #fffbeb;
  --xs-cta-glow: rgba(245, 158, 11, 0.30);
  /* Accent — vibrant blue */
  --xs-accent: #2563eb;
  --xs-accent-light: #eff6ff;
  /* Neutrals */
  --xs-black: #0a0f1a;
  --xs-dark: #111827;
  --xs-700: #374151;
  --xs-600: #4b5563;
  --xs-500: #6b7280;
  --xs-400: #9ca3af;
  --xs-300: #d1d5db;
  --xs-200: #e5e7eb;
  --xs-100: #f3f4f6;
  --xs-50: #f9fafb;
  --xs-white: #ffffff;
  /* Semantic colors */
  --xs-green: #059669;
  --xs-green-light: #ecfdf5;
  --xs-red: #dc2626;
  --xs-red-light: #fef2f2;
  --xs-yellow: #d97706;
  --xs-yellow-light: #fffbeb;
  /* Top bar */
  --xs-topbar: #1e293b;
  /* Typography */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Layout */
  --container: 1280px;
  --sidebar-width: 260px;
  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-blue: 0 4px 14px rgba(26, 86, 219, 0.2);
  --shadow-cta: 0 4px 14px rgba(54, 98, 161, 0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.10);
  /* Animation */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.2s;
  --duration-fast: 0.12s;
  --duration-slow: 0.35s;
}

*, *::before, *::after { box-sizing: border-box; }

/* Remove ugly black focus outline everywhere */
*:focus { outline: none !important; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Accessible focus for keyboard users only */
*:focus-visible {
  outline: 2px solid #3662A1 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Hide breadcrumb */
.breadcrumb { display: none !important; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px;
  color: #000000;
  background: #ECF8FF;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  overflow-x: hidden;
}

a { color: #2563eb; text-decoration: none; transition: color 0.2s; }
a:hover { color: #1d4ed8; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--xs-dark);
}

::selection { background: var(--xs-blue); color: var(--xs-white); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--xs-blue); outline-offset: 2px; }


/* ═══════════════════════════════════════════
   2. TYPOGRAPHY (Satoshi)
   ═══════════════════════════════════════════ */
.h1, h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.h2, h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.h3, h3 { font-size: 14px; font-weight: 700; }
.h4, h4 { font-size: 13px; font-weight: 600; }
.h5, h5 { font-size: 12px; font-weight: 600; }
.h6, h6 { font-size: 11px; font-weight: 600; }

p { margin: 0 0 1em; line-height: 1.7; color: var(--xs-600); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--xs-dark); }
small { font-size: 0.82rem; color: var(--xs-500); }

.xs-section-title {
  font-size: 1.5rem; font-weight: 800; text-align: center;
  letter-spacing: -0.03em; color: var(--xs-dark);
  margin-bottom: 36px; position: relative;
}
.xs-section-title::after {
  content: ''; display: block;
  width: 48px; height: 3px; background: var(--xs-blue);
  border-radius: 2px; margin: 12px auto 0;
}


/* ═══════════════════════════════════════════
   3. HIDE OLD PS ELEMENTS + PROMO STRIP
   ═══════════════════════════════════════════ */
#header .header-banner:not(.xs-strip):not(.xh-topbar),
#header .header-top:not(.xh-main),
#header .header-nav:not(.xh-navbar),
.footer-container { display: none !important; }

#header .xs-nav #contact-link,
#header .xs-nav #_desktop_contact_link,
#header .xs-nav #search_widget,
#header .xs-nav .search-widgets,
#header #contact-link { display: none !important; }

#header .xs-strip {
  background: linear-gradient(90deg, var(--xs-blue) 0%, var(--xs-blue-dark) 100%) !important;
  color: var(--xs-white); text-align: center;
  padding: 10px 48px 10px 16px; font-size: 0.82rem;
  font-weight: 500; letter-spacing: 0.02em;
  position: relative; line-height: 1.4;
}
#header .xs-strip a { color: var(--xs-white); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
#header .xs-strip a:hover { opacity: 0.85; }
#header .xs-strip__close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--xs-white);
  font-size: 1.3rem; cursor: pointer; opacity: 0.5; padding: 6px;
  transition: opacity var(--duration); line-height: 1;
}
#header .xs-strip__close:hover { opacity: 1; }


/* ═══════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════ */
#header .xs-header {
  background: var(--xs-white) !important;
  border-bottom: 1px solid var(--xs-200);
  padding: 0; width: 100%;
}
#header .xs-header__container {
  max-width: var(--container); margin: 0 auto;
  padding: 14px 28px; display: flex; align-items: center; gap: 32px;
}

#header .xs-header__logo { flex-shrink: 0; }
#header .xs-header__logo h1, #header .xs-header__logo-h1 { margin: 0; line-height: 1; }
#header .xs-logo { display: flex; align-items: baseline; text-decoration: none; gap: 0; transition: opacity var(--duration); }
#header .xs-logo:hover { opacity: 0.8; }
#header .xs-logo__name { font-size: 1.75rem; font-weight: 800; color: var(--xs-dark); letter-spacing: -0.04em; }
#header .xs-logo__dot { font-size: 1.75rem; font-weight: 800; color: var(--xs-blue); }
#header .xs-logo--sm .xs-logo__name, #header .xs-logo--sm .xs-logo__dot { font-size: 1.3rem; }

#header .xs-header__search { flex: 1; max-width: 580px; }
#header .xs-header__search .search-widgets, #header .xs-header__search #search_widget { width: 100%; overflow: hidden !important; }
#header .xs-header__search form { position: relative; display: flex; overflow: hidden; }

#header .xs-header__search input[type="text"] {
  width: 100% !important; border: 2px solid var(--xs-200) !important;
  border-radius: var(--radius) !important; padding: 12px 52px 12px 18px !important;
  font-size: 0.9rem; font-family: var(--font-body);
  background: var(--xs-50) !important; outline: none;
  transition: all var(--duration) var(--ease); color: var(--xs-dark);
}
#header .xs-header__search input[type="text"]::placeholder { color: var(--xs-400); font-weight: 400; }
#header .xs-header__search input[type="text"]:focus {
  border-color: var(--xs-blue) !important; background: var(--xs-white) !important;
  box-shadow: 0 0 0 4px var(--xs-blue-glow) !important;
}

#header .xs-header__search form::after {
  content: ''; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; background: var(--xs-blue); border-radius: var(--radius-sm);
  z-index: 1; pointer-events: none; transition: background var(--duration);
}
#header .xs-header__search form:focus-within::after { background: var(--xs-blue-dark); }

/* OLD material-icons search — replaced by .xs-search module override */
/*
#header .xs-header__search form i.material-icons.search {
  position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important; color: transparent !important; z-index: 2; cursor: pointer; border-radius: var(--radius-sm);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center !important;
  border: none !important;
}
#header .xs-header__search form i.material-icons.clear {
  position: absolute !important; right: 48px !important; top: 50% !important; transform: translateY(-50%) !important;
  color: var(--xs-400) !important; font-size: 16px !important; z-index: 3; cursor: pointer;
}
*/
#header .xs-header__search .ui-helper-hidden-accessible, #header .xs-header__search .ui-slider { display: none !important; }

#header .xs-header__right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#header .xs-header__right > div { display: flex; align-items: center; }
#header .xs-header__right a {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  color: var(--xs-dark); font-size: 0.84rem; font-weight: 500;
  text-decoration: none; border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease); white-space: nowrap;
}
#header .xs-header__right a:hover { background: var(--xs-100); color: var(--xs-blue); }
#header .xs-header__right .cart-products-count {
  background: #cc0000; color: #fff;
  font-size: 0.6rem; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0 5px;
}
#header .xs-header__right .language-selector, #header .xs-header__right .currency-selector { display: none; }

#header .xs-header__right .shopping-cart,
#header .xs-header__right i.material-icons.shopping-cart {
  font-size: 0 !important; width: 22px; height: 22px; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center;
  vertical-align: middle; transition: opacity var(--duration);
}
#header .xs-header__right .user-info .material-icons {
  font-size: 0 !important; width: 22px; height: 22px; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='1.8'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center;
  vertical-align: middle;
}
#header .xs-header__right .blockcart { position: relative; }
#header .xs-header__right .blockcart .header { display: flex; align-items: center; }


/* ═══════════════════════════════════════════
   5. NAVIGATION + MEGA DROPDOWN
   ═══════════════════════════════════════════ */
#header .xs-nav {
  background: var(--xs-white) !important;
  border-bottom: 1px solid var(--xs-200);
  position: sticky; top: 0; z-index: 999;
  transition: box-shadow var(--duration);
}
#header .xs-nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
#header .xs-nav__container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

#header .xs-nav .top-menu, #header .xs-nav #_desktop_top_menu, #header .xs-nav__menu .top-menu {
  display: flex !important; align-items: stretch; list-style: none; margin: 0; padding: 0;
}
#header .xs-nav .top-menu > li { position: relative; }
#header .xs-nav .top-menu > li > a {
  display: flex; align-items: center; padding: 14px 18px;
  color: var(--xs-700) !important; font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--duration) var(--ease); position: relative;
}
#header .xs-nav .top-menu > li > a:hover,
#header .xs-nav .top-menu > li:hover > a,
#header .xs-nav .top-menu > li > a.active {
  color: var(--xs-blue) !important; border-bottom-color: var(--xs-blue);
}
#header .xs-nav .top-menu > li > a .material-icons { display: none; }

#header .xs-nav .top-menu > li > .sub-menu.collapse,
#header .xs-nav .top-menu > li > .popover.sub-menu,
#header .xs-nav .top-menu > li > .sub-menu {
  display: block !important; position: absolute; top: calc(100% + 1px); left: 0;
  min-width: 320px; background: var(--xs-white); border: 1px solid var(--xs-200);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-xl);
  padding: 20px 24px; z-index: 1000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
#header .xs-nav .top-menu > li:hover > .sub-menu.collapse,
#header .xs-nav .top-menu > li:hover > .popover.sub-menu,
#header .xs-nav .top-menu > li:hover > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

#header .xs-nav .top-menu .sub-menu ul, #header .xs-nav .top-menu .sub-menu .top-menu {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px; list-style: none; margin: 0; padding: 0;
}
#header .xs-nav .top-menu .sub-menu a {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  color: var(--xs-600) !important; font-size: 0.84rem; font-weight: 500;
  border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--ease); white-space: nowrap;
}
#header .xs-nav .top-menu .sub-menu a:hover {
  background: var(--xs-blue-light); color: var(--xs-blue) !important; transform: translateX(2px);
}

#header .xs-nav .top-menu .sub-menu > .top-menu > li { margin-bottom: 4px; }
#header .xs-nav .top-menu .sub-menu > .top-menu > li > a {
  font-weight: 700 !important; color: var(--xs-dark) !important; font-size: 0.86rem;
  padding: 10px 14px 6px; border-bottom: 1px solid var(--xs-100);
}

#header .xs-nav .top-menu .sub-menu .sub-menu {
  position: static !important; display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 2px;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important; box-shadow: none !important; border: none !important;
  background: transparent !important; padding: 4px 0 8px !important; min-width: unset !important;
}
#header .xs-nav .top-menu .sub-menu .sub-menu a { font-size: 0.8rem; font-weight: 500; padding: 6px 10px; color: var(--xs-500) !important; }

#header .xs-nav .top-menu .collapse-icons, #header .xs-nav .top-menu .navbar-toggler { display: none !important; }
#header .xs-nav .top-menu .collapse:not(.show) { display: block !important; }
#header .xs-nav .popover { display: none !important; }

#header .xs-nav .top-menu > #category-15 > .sub-menu {
  left: 0; right: 0; min-width: 600px; width: max-content;
  max-width: calc(var(--container) - 56px); padding: 24px 28px;
}
#header .xs-nav .top-menu > #category-15 > .sub-menu > ul,
#header .xs-nav .top-menu > #category-15 > .sub-menu > .top-menu {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px;
}
#header .xs-nav .top-menu > #category-15 > .sub-menu > .top-menu > li > a {
  font-weight: 700 !important; font-size: 0.9rem !important; color: var(--xs-dark) !important;
  padding: 8px 10px !important; border-bottom: 2px solid var(--xs-100); margin-bottom: 4px; gap: 10px;
}

#header .xs-nav #category-16 > a::before, #header .xs-nav #category-28 > a::before,
#header .xs-nav #category-32 > a::before, #header .xs-nav #category-33 > a::before,
#header .xs-nav #category-34 > a::before {
  content: ''; display: inline-block; width: 20px; height: 20px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle;
}
#header .xs-nav #category-16 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%230f172a'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184 4 270.2c0 26.5 4.9 53.9 14.6 82.3C29.9 386.3 72.6 480 122 480c24.5-.5 41.9-17 74-17 31 0 47.3 17 74 17 49.7-.5 88.3-87 99-120.8-63-30-74.1-89.8-74-90.5zM231.6 128c24-28.6 40-68.5 35.3-108.7C229.9 22.5 193.3 44 168.8 72.3c-23 26.1-39.4 66.6-34 105.4 38.3 2.7 73.8-17.6 96.8-49.7z'/%3E%3C/svg%3E"); }
#header .xs-nav #category-28 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%231428a0'/%3E%3Ctext x='12' y='15' text-anchor='middle' font-family='Arial' font-weight='700' font-size='8' fill='white'%3ES%3C/text%3E%3C/svg%3E"); }
#header .xs-nav #category-32 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23ff6900'/%3E%3Ctext x='12' y='15.5' text-anchor='middle' font-family='Arial' font-weight='700' font-size='8' fill='white'%3EXi%3C/text%3E%3C/svg%3E"); }
#header .xs-nav #category-33 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23cf0a2c'/%3E%3Ctext x='12' y='15.5' text-anchor='middle' font-family='Arial' font-weight='700' font-size='8' fill='white'%3EHW%3C/text%3E%3C/svg%3E"); }
#header .xs-nav #category-34 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%234285f4'/%3E%3Ctext x='12' y='15.5' text-anchor='middle' font-family='Arial' font-weight='700' font-size='8' fill='white'%3EG%3C/text%3E%3C/svg%3E"); }

#header .xs-nav #category-15 .sub-menu .sub-menu { grid-template-columns: 1fr !important; gap: 0 !important; padding: 2px 0 6px !important; }

#header .xs-nav #category-15 > a::before, #header .xs-nav #category-13 > a::before,
#header .xs-nav #category-12 > a::before, #header .xs-nav #category-10 > a::before,
#header .xs-nav #category-11 > a::before, #header .xs-nav #category-14 > a::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 6px;
  flex-shrink: 0; background-size: contain; background-repeat: no-repeat;
  background-position: center; vertical-align: middle;
}
#header .xs-nav #category-15 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E"); }
#header .xs-nav #category-13 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Cpath d='M20 16V4H4v12'/%3E%3Crect x='2' y='16' width='20' height='4' rx='1'/%3E%3C/svg%3E"); }
#header .xs-nav #category-12 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
#header .xs-nav #category-10 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E"); }
#header .xs-nav #category-11 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Cpath d='M5 12.55a11 11 0 0114.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0121.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 016.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E"); }
#header .xs-nav #category-14 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Crect x='1' y='6' width='22' height='12' rx='2'/%3E%3Cline x1='6' y1='10' x2='6' y2='14'/%3E%3Cline x1='10' y1='10' x2='10' y2='14'/%3E%3Cline x1='14' y1='10' x2='14' y2='14'/%3E%3Cline x1='18' y1='10' x2='18' y2='14'/%3E%3C/svg%3E"); }


/* ═══════════════════════════════════════════
   6. MOBILE HEADER
   ═══════════════════════════════════════════ */
.xs-mob { background: var(--xs-white); border-bottom: 1px solid var(--xs-200); padding: 12px 16px; }
.xs-mob__bar { display: flex; align-items: center; justify-content: space-between; }
.xs-mob__toggle { background: none; border: none; padding: 8px; color: var(--xs-dark); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--duration); }
.xs-mob__toggle:hover { background: var(--xs-100); }
.xs-mob__toggle svg { width: 24px; height: 24px; }
.xs-mob__logo img { max-height: 28px; }
.xs-mob__icons { display: flex; align-items: center; gap: 4px; }
.xs-mob__icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--xs-dark); transition: background var(--duration); }
.xs-mob__icons a:hover { background: var(--xs-100); }
.xs-mob__search { margin-top: 10px; }
.xs-mob__search input[type="text"] { width: 100%; border: 2px solid var(--xs-200); border-radius: var(--radius); padding: 10px 16px; font-size: 0.88rem; background: var(--xs-50); font-family: var(--font-body); }
.xs-mob__search input[type="text"]:focus { border-color: var(--xs-blue); outline: none; background: var(--xs-white); }
.xs-mob__menu { background: var(--xs-white); border-top: 1px solid var(--xs-200); padding: 16px; max-height: 70vh; overflow-y: auto; }
.xs-mob__menu ul { list-style: none; padding: 0; margin: 0; }
.xs-mob__menu li { border-bottom: 1px solid var(--xs-100); }
.xs-mob__menu li:last-child { border-bottom: none; }
.xs-mob__menu a { display: block; padding: 12px 8px; font-size: 0.9rem; font-weight: 600; color: var(--xs-700); transition: color var(--duration); }
.xs-mob__menu a:hover { color: var(--xs-blue); }
@media (min-width: 992px) { .xs-mob { display: none !important; } }


/* ═══════════════════════════════════════════
   7. HOMEPAGE
   ═══════════════════════════════════════════ */
.page-home #wrapper { padding-top: 0 !important; }

.xs-hero {
  background: linear-gradient(135deg, var(--xs-blue-light) 0%, #e8effc 40%, #f0ecff 70%, var(--xs-50) 100%);
  padding: 64px 0 56px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  position: relative; overflow: hidden;
}
.xs-hero::before { content: ''; position: absolute; top: -120px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(37, 99, 235, 0.04); pointer-events: none; }
.xs-hero__left { padding-left: max(28px, calc((100vw - var(--container)) / 2 + 28px)); }
.xs-hero__badge { display: inline-flex; align-items: center; gap: 6px; background: var(--xs-blue); color: var(--xs-white); padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; margin-bottom: 20px; letter-spacing: 0.01em; }
.xs-hero__badge svg { stroke: var(--xs-white); }
.xs-hero__title { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 16px; line-height: 1.1; }
.xs-hero__title span { color: var(--xs-blue); }
.xs-hero__desc { font-size: 1.05rem; color: var(--xs-500); line-height: 1.7; margin: 0 0 28px; max-width: 460px; }
.xs-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.xs-hero__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: all 0.2s var(--ease); border: none; cursor: pointer; }
.xs-hero__btn--primary { background: #2563eb; color: #fff !important; box-shadow: 0 4px 14px rgba(37,99,235,0.3); }
.xs-hero__btn--primary:hover { background: #2d5289; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(54, 98, 161, 0.4); color: #fff !important; }
.xs-hero__btn--primary svg { stroke: var(--xs-white); }
.xs-hero__btn--ghost { background: transparent; color: var(--xs-dark) !important; border: 2px solid var(--xs-300); }
.xs-hero__btn--ghost:hover { border-color: var(--xs-blue); color: var(--xs-blue) !important; background: var(--xs-blue-light); }
.xs-hero__stats { display: flex; align-items: center; gap: 28px; }
.xs-hero__stat strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--xs-dark); }
.xs-hero__stat span { font-size: 0.78rem; color: var(--xs-500); }
.xs-hero__stat-divider { width: 1px; height: 36px; background: var(--xs-300); }
.xs-hero__right { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-right: max(28px, calc((100vw - var(--container)) / 2 + 28px)); }
.xs-hero__card { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.3s var(--ease); cursor: pointer; box-shadow: var(--shadow-xs); text-decoration: none; color: var(--xs-dark); }
.xs-hero__card:hover { border-color: var(--xs-blue); transform: translateY(-6px); box-shadow: var(--shadow-blue); color: var(--xs-blue); }
.xs-hero__card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--xs-blue-light); border-radius: var(--radius); transition: background 0.3s var(--ease); }
.xs-hero__card:hover .xs-hero__card-icon { background: var(--xs-blue); }
.xs-hero__card:hover .xs-hero__card-icon svg { stroke: var(--xs-white); }
.xs-hero__card span { font-size: 0.88rem; font-weight: 600; text-align: center; }

.xs-benefits { background: var(--xs-white); border-top: 1px solid var(--xs-200); border-bottom: 1px solid var(--xs-200); padding: 20px 0; }
.xs-benefits__grid { display: flex; justify-content: space-between; gap: 8px; }
.xs-benefits__item { display: flex; align-items: center; gap: 12px; flex: 1; padding: 12px 14px; border-radius: var(--radius-sm); transition: background var(--duration-fast); }
.xs-benefits__item:hover { background: var(--xs-50); }
.xs-benefits__icon { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--xs-blue-light); border-radius: var(--radius-sm); }
.xs-benefits__icon svg { stroke: var(--xs-blue); }
.xs-benefits__item strong { display: block; font-size: 0.82rem; font-weight: 700; line-height: 1.2; color: var(--xs-dark); }
.xs-benefits__item span { display: block; font-size: 0.74rem; color: var(--xs-500); margin-top: 2px; }

.xs-categories { padding: 56px 0; background: var(--xs-white); }
.xs-categories__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.xs-catcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 14px; background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); text-decoration: none; color: var(--xs-dark); transition: all 0.3s var(--ease); }
.xs-catcard:hover { background: var(--xs-blue-light); border-color: var(--xs-blue); transform: translateY(-4px); box-shadow: var(--shadow-blue); color: var(--xs-blue); }
.xs-catcard__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--xs-blue-light); border-radius: var(--radius); transition: background 0.3s var(--ease); }
.xs-catcard:hover .xs-catcard__icon { background: var(--xs-blue); }
.xs-catcard__icon svg { stroke: var(--xs-blue); transition: stroke 0.2s; }
.xs-catcard:hover .xs-catcard__icon svg { stroke: var(--xs-white); }
.xs-catcard__name { font-size: 0.86rem; font-weight: 600; text-align: center; }

.xs-why { padding: 64px 0; background: var(--xs-50); border-top: 1px solid var(--xs-200); }
.xs-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.xs-why__item { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 36px 28px; transition: all 0.3s var(--ease); }
.xs-why__item:hover { border-color: var(--xs-blue); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.xs-why__num { font-size: 2.2rem; font-weight: 800; color: var(--xs-blue); opacity: 0.15; margin-bottom: 12px; line-height: 1; }
.xs-why__item h3 { font-size: 1.08rem; font-weight: 700; margin: 0 0 10px; }
.xs-why__item p { font-size: 0.88rem; color: var(--xs-500); line-height: 1.7; margin: 0; }

.xs-home-modules { padding: 48px 0; }
.xs-module-wrap:empty { display: none !important; }
.page-home h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 24px; }


/* ═══════════════════════════════════════════
   8. PRODUCT CARD — see cards.css (SINGLE SOURCE OF TRUTH)
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   9. PRODUCT DETAIL (xpd-)
   ═══════════════════════════════════════════ */
.xpd { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.xpd-hero { display: grid; grid-template-columns: 55% 45%; gap: 48px; align-items: start; padding: 32px 0 48px; }
.xpd-gallery { position: relative; }
.xpd-gallery .product-cover { border-radius: var(--radius-lg); overflow: hidden; background: var(--xs-50); border: 1px solid var(--xs-200); }
.xpd-gallery .product-cover img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: zoom-in; }
.xpd-gallery .product-cover:hover img { transform: scale(1.04); }
.xpd-gallery__flags { position: absolute; top: 16px; left: 16px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; }
.xpd-gallery__flags .product-flag { background: var(--xs-blue); color: var(--xs-white); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 20px; }
.xpd-badge-refurb { display: inline-flex; align-items: center; gap: 5px; background: var(--xs-green-light); color: var(--xs-green); font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.15); }
.xpd-gallery .product-images { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: var(--xs-300) transparent; }
.xpd-gallery .product-images > li { flex: 0 0 76px; }
.xpd-gallery .product-images > li img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--xs-200); cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.xpd-gallery .product-images > li img:hover { border-color: var(--xs-400); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.xpd-gallery .product-images > li.selected img { border-color: var(--xs-blue); box-shadow: 0 0 0 3px var(--xs-blue-glow); }
.xpd-gallery .scroll-box-arrows svg { position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; padding: 8px; background: var(--xs-white); border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--duration-fast), box-shadow var(--duration-fast); stroke: var(--xs-700); }
.xpd-gallery .scroll-box-arrows svg.left { left: 12px; transform: translateY(-50%); }
.xpd-gallery .scroll-box-arrows svg.right { right: 12px; transform: translateY(-50%); }
.xpd-gallery .scroll-box-arrows svg:hover { box-shadow: var(--shadow-lg); transform: translateY(-50%) scale(1.1); }

.xpd-info { position: sticky; top: 80px; padding: 8px 0; }
.xpd-title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--xs-dark); margin: 0 0 12px 0; }
.xpd-condition-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--xs-green-light); color: var(--xs-green); font-size: 0.76rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.15); margin-bottom: 12px; }
.xpd-short-desc { font-size: 0.92rem; line-height: 1.7; color: var(--xs-600); margin-bottom: 0; }
.xpd-short-desc p { margin: 0; }
.xpd-short-desc ul { padding-left: 18px; margin: 8px 0; }
.xpd-short-desc li { margin-bottom: 4px; color: var(--xs-600); }
.xpd-divider { border: none; border-top: 1px solid var(--xs-200); margin: 20px 0; }
.xpd-prices .product-prices { margin-bottom: 4px; }
.xpd-prices .current-price .price, .xpd-prices .product-price.current-price span[itemprop="price"], .xpd-prices .current-price > span:first-child { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--xs-dark); letter-spacing: -0.02em; line-height: 1.1; }
.xpd-prices .regular-price, .xpd-prices .product-price.regular-price { color: var(--xs-400); font-size: 1rem; text-decoration: line-through; margin-left: 10px; }
.xpd-prices .product-discount .discount { display: inline-block; background: var(--xs-red-light); color: var(--xs-red); font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px; }
.xpd-prices .tax-shipping-delivery-label { font-size: 0.78rem; color: var(--xs-400); margin-top: 4px; }
.xpd-stock { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.xpd-stock__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.xpd-stock__dot--green { background: var(--xs-green); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); animation: xpd-pulse-green 2s ease-in-out infinite; }
.xpd-stock__dot--red { background: var(--xs-red); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
@keyframes xpd-pulse-green { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.08); } }
.xpd-stock__text { font-size: 0.84rem; font-weight: 600; color: var(--xs-green); }

.xpd-actions { margin-top: 8px; }
.xpd-actions .product-variants > .product-variants-item { margin-bottom: 16px; }
.xpd-actions .product-variants .control-label { font-size: 0.82rem; font-weight: 700; color: var(--xs-700); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; display: block; }
.xpd-actions .product-variants .variant-links li a, .xpd-actions .product-variants .color { border-radius: var(--radius-sm); border: 2px solid var(--xs-200); transition: border-color var(--duration-fast); }
.xpd-actions .product-variants .variant-links li.selected a, .xpd-actions .product-variants .color.selected { border-color: var(--xs-blue); box-shadow: 0 0 0 3px var(--xs-blue-glow); }
.xpd-actions .product-quantity { display: flex; align-items: center; gap: 16px; margin: 16px 0; flex-wrap: wrap; }
.xpd-actions .qty, .xpd-actions .product-quantity .input-group.bootstrap-touchspin { display: flex; align-items: center; border: 2px solid var(--xs-200); border-radius: var(--radius); overflow: hidden; background: var(--xs-white); }
.xpd-actions .qty .js-touchspin, .xpd-actions .product-quantity .input-group .input-group-btn button, .xpd-actions .product-quantity .bootstrap-touchspin .btn-touchspin { width: 44px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--xs-50); border: none; color: var(--xs-700); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background var(--duration-fast); }
.xpd-actions .qty .js-touchspin:hover, .xpd-actions .product-quantity .input-group .input-group-btn button:hover { background: var(--xs-200); }
.xpd-actions .qty input[name="qty"], .xpd-actions .product-quantity #quantity_wanted { width: 56px; height: 48px; text-align: center; border: none; border-left: 1px solid var(--xs-200); border-right: 1px solid var(--xs-200); font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--xs-dark); background: var(--xs-white); -moz-appearance: textfield; }
.xpd-actions .qty input::-webkit-inner-spin-button, .xpd-actions .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.xpd-actions .add-to-cart, .xpd-actions .product-quantity .add-to-cart, .xpd-actions button.add-to-cart { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: #3662A1; border: none; border-radius: 3px; padding: 18px 32px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.1rem; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(54, 98, 161, 0.35); transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-transform: none; letter-spacing: 0; }
.xpd-actions .add-to-cart:hover { background: #2d5289; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(54, 98, 161, 0.4); }
.xpd-actions .add-to-cart:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(54, 98, 161, 0.3); }
.xpd-actions .add-to-cart[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.xpd-actions .product-additional-info { margin-top: 12px; font-size: 0.8rem; color: var(--xs-500); }

.xpd-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--xs-200); }
.xpd-trust__item { display: flex; align-items: flex-start; gap: 10px; }
.xpd-trust__icon { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--xs-blue-light); border-radius: var(--radius-sm); color: var(--xs-blue); }
.xpd-trust__text { display: flex; flex-direction: column; }
.xpd-trust__text strong { font-size: 0.76rem; font-weight: 700; color: var(--xs-dark); line-height: 1.3; }
.xpd-trust__text span { font-size: 0.7rem; color: var(--xs-500); line-height: 1.3; }

.xpd-tabs { max-width: var(--container); margin: 0 auto; padding: 0 0 48px; }
.xpd-tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--xs-200); padding: 0; overflow-x: auto; }
.xpd-tabs__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; color: var(--xs-500); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color var(--duration-fast), border-color var(--duration-fast); white-space: nowrap; }
.xpd-tabs__btn:hover { color: var(--xs-blue); }
.xpd-tabs__btn--active, .xpd-tabs__btn.active { color: var(--xs-blue); border-bottom-color: var(--xs-blue); }
.xpd-tabs__btn svg { opacity: 0.6; }
.xpd-tabs__btn--active svg, .xpd-tabs__btn.active svg { opacity: 1; }
.xpd-tabs__content { padding: 32px 0; }
.xpd-description { font-size: 0.92rem; line-height: 1.8; color: var(--xs-600); max-width: 800px; }
.xpd-description h2, .xpd-description h3 { color: var(--xs-dark); margin: 24px 0 12px; font-weight: 700; }
.xpd-description img { border-radius: var(--radius); max-width: 100%; margin: 16px 0; }
.xpd-description ul, .xpd-description ol { padding-left: 20px; margin: 12px 0; }
.xpd-description li { margin-bottom: 6px; }
.xpd-tabs .product-features, .xpd-tabs .data-sheet { width: 100%; max-width: 640px; border-collapse: collapse; }
.xpd-tabs .data-sheet .name, .xpd-tabs .data-sheet .value, .xpd-tabs .product-features dt, .xpd-tabs .product-features dd { padding: 12px 16px; font-size: 0.88rem; border-bottom: 1px solid var(--xs-100); }
.xpd-tabs .data-sheet .name, .xpd-tabs .product-features dt { font-weight: 600; color: var(--xs-700); background: var(--xs-50); }
.xpd-tabs .data-sheet .value, .xpd-tabs .product-features dd { color: var(--xs-600); }
.xpd-info .blockreassurance_product { display: none; }
.xpd-related { max-width: var(--container); margin: 0 auto; padding: 0 0 64px; }
.xpd-related__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--xs-dark); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--xs-200); }

.product-container h1.h1, h1.h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
.product-prices .current-price .price { font-size: 2.4rem; font-weight: 800; color: var(--xs-dark); letter-spacing: -0.02em; }
.product-prices .regular-price { color: var(--xs-400); text-decoration: line-through; }
.product-cover img { border-radius: var(--radius-lg); }
.product-images > li img { border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: border-color var(--duration-fast); }
.product-images > li img:hover, .product-images > li.selected img { border-color: var(--xs-blue); }
.tab-content { padding: 24px 0; }
.product-description { line-height: 1.7; color: var(--xs-600); }


/* ═══════════════════════════════════════════
   10. CATEGORY / LISTING
   ═══════════════════════════════════════════ */
.block-category { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 24px; }
.block-category h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.block-category #category-description { font-size: 0.88rem; color: var(--xs-500); line-height: 1.7; }
.block-category #category-description p { margin: 0; }
.products-selection { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 16px; border-bottom: 1px solid var(--xs-100); }
.total-products { font-size: 0.85rem; font-weight: 600; color: var(--xs-500); }
.products-sort-order .select-title { border: 2px solid var(--xs-200); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.84rem; background: var(--xs-white); cursor: pointer; transition: border-color var(--duration); font-weight: 500; color: var(--xs-700); }
.products-sort-order .select-title:hover { border-color: var(--xs-blue); }
.products-sort-order .dropdown-menu { border: 1px solid var(--xs-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 8px 0; background: var(--xs-white); }
.products-sort-order .dropdown-menu a { padding: 8px 16px; font-size: 0.84rem; color: var(--xs-600); display: block; transition: background var(--duration-fast); }
.products-sort-order .dropdown-menu a:hover { background: var(--xs-blue-light); color: var(--xs-blue); }
#left-column { padding-right: 24px !important; }
#left-column .category-top-menu { list-style: none; padding: 0; margin: 0 0 24px; }
#left-column .category-top-menu > li > a { display: block; padding: 8px 12px; font-size: 0.86rem; font-weight: 500; color: var(--xs-600); border-radius: var(--radius-sm); transition: all var(--duration); }
#left-column .category-top-menu > li > a:hover, #left-column .category-top-menu > li.current > a { background: var(--xs-blue-light); color: var(--xs-blue); font-weight: 600; }
#search_filters { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
#search_filters .facet { margin-bottom: 24px; }
#search_filters .facet:last-child { margin-bottom: 0; }
#search_filters .facet .facet-title, #search_filters .facet .title { font-size: 0.82rem; font-weight: 700; color: var(--xs-dark); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--xs-200); }
#search_filters .facet ul { list-style: none; padding: 0; margin: 0; }
#search_filters .facet ul li { margin-bottom: 4px; }
#search_filters .facet .facet-label a, #search_filters .facet .facet-label label { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--xs-600); padding: 5px 0; cursor: pointer; transition: color var(--duration); }
#search_filters .facet .facet-label a:hover, #search_filters .facet .facet-label label:hover { color: var(--xs-blue); }
#search_filters .facet .custom-checkbox input[type="checkbox"] + span { width: 18px; height: 18px; border: 2px solid var(--xs-300); border-radius: var(--radius-xs); transition: all var(--duration-fast); }
#search_filters .facet .custom-checkbox input[type="checkbox"]:checked + span { background: var(--xs-blue); border-color: var(--xs-blue); }
.active_filters { background: var(--xs-blue-light); border: 1px solid rgba(37, 99, 235, 0.15); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; }
.active_filters .filter-block { display: inline-flex; align-items: center; gap: 6px; background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-full); padding: 4px 12px; font-size: 0.78rem; font-weight: 500; margin: 2px 4px 2px 0; }
.active_filters .js-search-filters-clear-all { color: var(--xs-blue); font-weight: 600; font-size: 0.82rem; }
nav.pagination { display: flex; align-items: center; justify-content: center; padding: 32px 0; }


/* ═══════════════════════════════════════════
   11. CHECKOUT + CART
   ═══════════════════════════════════════════ */
body#cart .cart-grid { max-width: var(--container); margin: 0 auto; }
body#cart .cart-container { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 0; overflow: hidden; }
body#cart .cart-overview .cart-items { padding: 0; }
body#cart .cart-item { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--xs-100); transition: background var(--duration-fast); }
body#cart .cart-item:hover { background: var(--xs-50); }
body#cart .cart-item:last-child { border-bottom: none; }
body#cart .product-line-grid { display: flex; align-items: center; gap: 20px; width: 100%; }
body#cart .product-line-grid .product-line__image { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--xs-200); }
body#cart .product-line-grid .product-line__image img { width: 100%; height: 100%; object-fit: contain; }
body#cart .product-line-grid .product-line__body { flex: 1; }
body#cart .product-line-grid .product-line__title a { font-size: 0.9rem; font-weight: 600; color: var(--xs-dark); text-decoration: none; }
body#cart .product-line-grid .product-line__title a:hover { color: var(--xs-blue); }
body#cart .product-line-grid .product-price { font-size: 1.1rem; font-weight: 700; color: var(--xs-dark); }
body#cart .qty input { width: 48px; height: 40px; text-align: center; border: 2px solid var(--xs-200); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; }
body#cart .cart-summary { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 28px; }
body#cart .cart-summary .cart-summary-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 0.9rem; color: var(--xs-600); }
body#cart .cart-summary .cart-total { font-size: 1.2rem; font-weight: 800; color: var(--xs-dark); border-top: 2px solid var(--xs-200); padding-top: 16px; margin-top: 8px; }
body#cart .cart-summary .cart-total .value { font-size: 1.4rem; color: var(--xs-dark); }
body#cart .checkout a, body#cart .text-sm-center a.btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--xs-cta) !important; color: var(--xs-white) !important; border: none !important; border-radius: var(--radius) !important; padding: 16px 24px !important; font-size: 1rem !important; font-weight: 700 !important; box-shadow: var(--shadow-cta) !important; transition: all 0.2s var(--ease) !important; text-transform: none !important; }
body#cart .checkout a:hover, body#cart .text-sm-center a.btn-primary:hover { background: var(--xs-cta-dark) !important; transform: translateY(-2px) !important; }
body#cart .cart-grid .continue { font-size: 0.86rem; color: var(--xs-blue); font-weight: 600; }
body#cart .block-promo { background: var(--xs-50); border: 1px solid var(--xs-200); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
body#cart .block-promo input { border: 2px solid var(--xs-200); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.86rem; }

body#checkout #content-wrapper { max-width: 900px; margin: 0 auto; }
body#checkout .checkout-step { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
body#checkout .checkout-step .step-title { display: flex; align-items: center; gap: 16px; padding: 20px 24px; font-size: 1rem; font-weight: 700; color: var(--xs-dark); background: var(--xs-50); border-bottom: 1px solid var(--xs-200); cursor: pointer; }
body#checkout .checkout-step .step-number { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--xs-blue); color: var(--xs-white); border-radius: 50%; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; }
body#checkout .checkout-step.-complete .step-number { background: var(--xs-green); }
body#checkout .checkout-step.-current .step-number { background: var(--xs-cta); }
body#checkout .checkout-step .content { padding: 24px; }
body#checkout .form-group { margin-bottom: 16px; }
body#checkout .form-control, body#checkout input[type="text"], body#checkout input[type="email"], body#checkout input[type="tel"], body#checkout input[type="password"], body#checkout select, body#checkout textarea { border: 2px solid var(--xs-200) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px !important; font-family: var(--font-body) !important; font-size: 0.9rem !important; color: var(--xs-dark) !important; background: var(--xs-white) !important; transition: border-color var(--duration) !important; width: 100%; }
body#checkout .form-control:focus, body#checkout input:focus, body#checkout select:focus, body#checkout textarea:focus { border-color: var(--xs-blue) !important; box-shadow: 0 0 0 3px var(--xs-blue-glow) !important; outline: none !important; }
body#checkout label { font-size: 0.84rem; font-weight: 600; color: var(--xs-700); margin-bottom: 6px; display: block; }
body#checkout .continue, body#checkout button.continue, body#checkout .btn-primary { background: var(--xs-cta) !important; color: var(--xs-white) !important; border: none !important; border-radius: var(--radius) !important; padding: 14px 28px !important; font-weight: 700 !important; font-size: 0.95rem !important; box-shadow: var(--shadow-cta) !important; transition: all 0.2s var(--ease) !important; }
body#checkout .continue:hover, body#checkout button.continue:hover, body#checkout .btn-primary:hover { background: var(--xs-cta-dark) !important; transform: translateY(-1px) !important; }
body#checkout .cart-summary { background: var(--xs-50); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 24px; }
body#checkout .payment-options { list-style: none; padding: 0; margin: 0; }
body#checkout .payment-option { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 2px solid var(--xs-200); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: border-color var(--duration); }
body#checkout .payment-option:hover, body#checkout .payment-option.selected { border-color: var(--xs-blue); background: var(--xs-blue-light); }
body#order-confirmation .card { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 48px 32px; max-width: 700px; margin: 0 auto; text-align: center; }
body#order-confirmation .card .material-icons { font-size: 56px; color: var(--xs-green); margin-bottom: 16px; }
.xs-checkout-trust { display: flex; justify-content: center; gap: 32px; padding: 16px 0; margin: 16px 0; border-top: 1px solid var(--xs-100); border-bottom: 1px solid var(--xs-100); }
.xs-checkout-trust__item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--xs-500); font-weight: 500; }
.xs-checkout-trust__item svg { width: 18px; height: 18px; stroke: var(--xs-green); }


/* ═══════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════ */
.xs-prefooter { background: linear-gradient(135deg, var(--xs-blue-light) 0%, #eef0ff 50%, #f5f3ff 100%); padding: 48px 0; border-top: 1px solid var(--xs-200); }
.xs-prefooter__inner { display: flex; align-items: center; justify-content: center; gap: 32px; max-width: 800px; margin: 0 auto; }
.xs-prefooter__icon { flex-shrink: 0; width: 60px; height: 60px; background: var(--xs-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.xs-prefooter__text strong { display: block; font-size: 1.15rem; color: var(--xs-dark); margin-bottom: 2px; }
.xs-prefooter__text span { font-size: 0.86rem; color: var(--xs-500); }
.xs-prefooter .block_newsletter p { display: none; }
.xs-prefooter .block_newsletter form { display: flex; gap: 8px; }
.xs-prefooter .block_newsletter input[type="email"] { border: 2px solid var(--xs-white); border-radius: var(--radius); padding: 12px 18px; font-size: 0.88rem; min-width: 260px; background: var(--xs-white); box-shadow: var(--shadow-sm); font-family: var(--font-body); transition: border-color var(--duration); }
.xs-prefooter .block_newsletter input[type="email"]:focus { border-color: var(--xs-blue); outline: none; box-shadow: 0 0 0 3px var(--xs-blue-glow); }
.xs-prefooter .block_newsletter input[type="email"]::placeholder { color: var(--xs-400); }
.xs-prefooter .block_newsletter button, .xs-prefooter .block_newsletter input[type="submit"] { background: var(--xs-cta); color: var(--xs-white); border: none; border-radius: var(--radius); padding: 12px 24px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-cta); transition: background var(--duration-fast); font-family: var(--font-body); font-size: 0.9rem; }
.xs-prefooter .block_newsletter button:hover { background: var(--xs-cta-dark); }

.xs-footer { background: var(--xs-dark); color: var(--xs-400); padding: 48px 0 0; }
.xs-footer__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 32px; }
.xs-footer__logo { display: flex; align-items: baseline; text-decoration: none; }
.xs-footer__logo-name { font-size: 1.5rem; font-weight: 800; color: var(--xs-white); letter-spacing: -0.03em; }
.xs-footer__logo-dot { font-size: 1.5rem; font-weight: 800; color: var(--xs-blue); }
.xs-footer__tagline { font-size: 0.78rem; color: var(--xs-500); margin-top: 4px; }
.xs-footer__contact { display: flex; gap: 20px; }
.xs-footer__contact a, .xs-footer__contact-item { display: flex; align-items: center; gap: 8px; color: var(--xs-400); font-size: 0.84rem; transition: color var(--duration-fast); }
.xs-footer__contact a:hover { color: var(--xs-white); }
.xs-footer__contact svg { opacity: 0.5; }
.xs-footer__links .row { margin: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.xs-footer__links [class*="col-"] { width: auto !important; max-width: none !important; flex: 1 1 160px !important; padding: 0 !important; }
.xs-footer__links .links .wrapper { display: flex; flex-wrap: wrap; gap: 32px; }
.xs-footer__links .links .wrapper > * { flex: 1 1 160px; min-width: 140px; }
.xs-footer a { color: var(--xs-400); transition: color var(--duration-fast); text-decoration: none; }
.xs-footer a:hover { color: var(--xs-white); }
.xs-footer .h3, .xs-footer h3 { color: var(--xs-white) !important; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.xs-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.xs-footer li { margin-bottom: 6px; }
.xs-footer li a { font-size: 0.84rem; transition: color var(--duration-fast), padding-left var(--duration-fast); }
.xs-footer li a:hover { padding-left: 4px; }
.xs-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.76rem; color: var(--xs-500); }
.xs-footer__payment { display: flex; gap: 8px; align-items: center; }
.xs-footer__payment img { height: 24px; opacity: 0.6; transition: opacity var(--duration-fast); }
.xs-footer__payment img:hover { opacity: 1; }


/* ═══════════════════════════════════════════
   13. BUTTONS, BREADCRUMB, PAGINATION, FORMS, ALERTS
   ═══════════════════════════════════════════ */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-sm); transition: all var(--duration) var(--ease); letter-spacing: 0; text-transform: none; }
.btn-primary, button.btn-primary { background: #2563eb !important; border-color: #2563eb !important; border-radius: 8px !important; font-weight: 600 !important; color: #fff !important; transition: all 0.2s !important; }
.btn-primary:hover, .btn-primary:focus, button.btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3) !important; }
.btn-secondary { background: var(--xs-50) !important; border: 1px solid #d9d9d9 !important; color: var(--xs-700) !important; border-radius: 3px !important; }
.btn-secondary:hover { border-color: var(--xs-blue) !important; color: var(--xs-blue) !important; background: var(--xs-blue-light) !important; }
.btn-warning, .btn-cta { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; border-radius: 8px !important; box-shadow: none; transition: all 0.2s !important; }
.btn-warning:hover, .btn-cta:hover { background: #d97706 !important; border-color: #d97706 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important; }

.breadcrumb { background: transparent !important; padding: 16px 0; font-size: 0.82rem; margin: 0; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb a { color: var(--xs-500); font-weight: 500; }
.breadcrumb a:hover { color: var(--xs-blue); }
.breadcrumb .breadcrumb-item.active, .breadcrumb li:last-child { color: var(--xs-dark); font-weight: 600; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--xs-300); padding: 0 4px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pagination .page-link { border-radius: var(--radius-sm); margin: 0; color: var(--xs-700); border: 1px solid var(--xs-200); padding: 8px 14px; font-size: 0.85rem; font-weight: 500; transition: all var(--duration); min-width: 40px; text-align: center; }
.pagination .page-link:hover { background: var(--xs-blue-light); border-color: var(--xs-blue); color: var(--xs-blue); }
.pagination .page-item.active .page-link { background: var(--xs-blue); border-color: var(--xs-blue); color: var(--xs-white); font-weight: 700; }
.pagination .page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; }
.pagination .previous a, .pagination .next a { font-weight: 600; color: var(--xs-blue); }

.form-group { margin-bottom: 20px; }
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { font-family: inherit; font-size: 13px; color: var(--xs-dark); border: 1px solid #d9d9d9; border-radius: 3px; padding: 8px 12px; transition: border-color var(--duration); background: var(--xs-white); width: 100%; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); outline: none; }
.form-control::placeholder, input::placeholder { color: var(--xs-400); }
label { font-size: 0.86rem; font-weight: 600; color: var(--xs-700); margin-bottom: 6px; display: block; }

.alert { border-radius: var(--radius); padding: 14px 20px; font-size: 0.88rem; font-weight: 500; border: 1px solid; margin-bottom: 16px; }
.alert-success { background: var(--xs-green-light); border-color: rgba(22, 163, 74, 0.2); color: var(--xs-green); }
.alert-danger, .alert-error { background: var(--xs-red-light); border-color: rgba(220, 38, 38, 0.2); color: var(--xs-red); }
.alert-warning { background: var(--xs-yellow-light); border-color: rgba(234, 179, 8, 0.3); color: #92400e; }
.alert-info { background: var(--xs-blue-light); border-color: rgba(37, 99, 235, 0.15); color: var(--xs-blue-dark); }

.card, .panel { background: #fff; border: 1px solid #d9d9d9; border-radius: 3px; overflow: hidden; }
.card-header, .panel-heading { background: var(--xs-50); border-bottom: 1px solid var(--xs-200); padding: 16px 20px; font-weight: 700; }
.card-body, .panel-body { padding: 20px; }
.table, table { width: 100%; border-collapse: collapse; }
.table th, table th { background: var(--xs-50); font-size: 0.82rem; font-weight: 700; color: var(--xs-700); text-transform: uppercase; letter-spacing: 0.03em; padding: 12px 16px; border-bottom: 2px solid var(--xs-200); text-align: left; }
.table td, table td { padding: 12px 16px; border-bottom: 1px solid var(--xs-100); font-size: 0.88rem; color: var(--xs-600); }
.table tr:hover, table tr:hover { background: var(--xs-50); }
.tooltip-inner { background: var(--xs-dark); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.78rem; font-weight: 500; }
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--xs-200); box-shadow: var(--shadow-xl); }
.modal-header { border-bottom: 1px solid var(--xs-200); padding: 20px 24px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--xs-200); padding: 16px 24px; }


/* ═══════════════════════════════════════════
   14. RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 991px) {
  #header .xs-header__container { flex-wrap: wrap; gap: 12px; }
  #header .xs-header__search { order: 3; max-width: 100%; flex-basis: 100%; }
  #header .xs-nav { display: none !important; }
  .xs-hero { grid-template-columns: 1fr; padding: 40px 0 32px; }
  .xs-hero__left { padding: 0 24px; }
  .xs-hero__right { padding: 0 24px; grid-template-columns: repeat(4, 1fr); }
  .xs-hero__title { font-size: 2rem; }
  .xs-benefits__grid { flex-wrap: wrap; }
  .xs-benefits__item { flex: 0 0 calc(50% - 4px); }
  .xs-categories__grid { grid-template-columns: repeat(3, 1fr); }
  .xs-why__grid { grid-template-columns: 1fr; }
  .xpd-hero { grid-template-columns: 1fr; gap: 24px; padding: 16px 0 32px; }
  .xpd-info { position: static; padding: 0; }
  .xpd-title { font-size: 1.4rem; }
  .xpd-trust { grid-template-columns: 1fr; gap: 10px; }
  .xpd-tabs__btn { padding: 12px 16px; font-size: 0.82rem; }
  #left-column { display: none !important; }
  #content-wrapper { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 768px) {
  #header .xs-strip { font-size: 0.74rem; padding: 8px 36px 8px 12px; }
  .xs-hero__title { font-size: 1.7rem; }
  .xs-hero__right { grid-template-columns: repeat(2, 1fr); }
  .xs-hero__desc { font-size: 0.95rem; }
  .xs-benefits__item { flex: 0 0 100%; }
  .xs-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .xs-catcard { padding: 18px 12px; }
  .xs-prefooter__inner { flex-direction: column; text-align: center; gap: 16px; }
  .xs-prefooter .block_newsletter form { flex-direction: column; align-items: center; }
  .xs-prefooter .block_newsletter input[type="email"] { min-width: 100%; max-width: 320px; }
  .xs-footer__top { flex-direction: column; gap: 16px; }
  .xs-footer__contact { flex-direction: column; gap: 8px; }
  .xs-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  body#cart .cart-item { flex-direction: column; align-items: flex-start; }
  body#cart .product-line-grid { flex-direction: column; }
  .xs-checkout-trust { flex-direction: column; gap: 12px; align-items: center; }
  .table-responsive { overflow-x: auto; }
}
@media (max-width: 480px) {
  .xs-hero__right { grid-template-columns: 1fr 1fr; gap: 10px; }
  .xs-hero__stats { gap: 16px; flex-wrap: wrap; }
  .xs-hero__stat strong { font-size: 1.1rem; }
  .xs-categories__grid { gap: 8px; }
  .xs-catcard { padding: 14px 8px; }
  .xs-catcard__name { font-size: 0.78rem; }
  .xpd-hero { gap: 16px; padding: 8px 0 24px; }
  .xpd-title { font-size: 1.25rem; }
  .xpd-prices .current-price .price, .xpd-prices .current-price > span:first-child { font-size: 1.7rem; }
  .xpd-trust { grid-template-columns: 1fr; }
  .xpd-tabs__nav { gap: 0; }
  .xpd-tabs__btn { padding: 10px 12px; font-size: 0.78rem; }
  .xpd-tabs__btn svg { display: none; }
  .btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .xs-hero__title { font-size: 1.5rem; }
  .xs-hero__btn { padding: 12px 20px; font-size: 0.85rem; width: 100%; justify-content: center; }
  .xs-hero__cta { flex-direction: column; }
  .xs-hero__right { grid-template-columns: 1fr; }
  .xs-categories__grid { grid-template-columns: 1fr 1fr; }
  .xs-footer__links .links .wrapper { gap: 16px; }
}


/* ═══════════════════════════════════════════
   15. ACCOUNT PAGES
   ═══════════════════════════════════════════ */
body#authentication #content-wrapper { max-width: 520px; margin: 0 auto; }
body#authentication .login-form, body#authentication .register-form { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm); }
body#authentication .login-form h1, body#authentication .register-form h1 { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 28px; letter-spacing: -0.03em; }
body#authentication .form-group { margin-bottom: 18px; }
body#authentication .form-footer { margin-top: 24px; }
body#authentication .form-footer .btn { width: 100%; padding: 14px; font-size: 0.95rem; }
body#authentication .no-account, body#authentication .forgot-password { text-align: center; margin-top: 16px; }
body#authentication .no-account a, body#authentication .forgot-password a { color: var(--xs-blue); font-weight: 600; font-size: 0.88rem; }
body#my-account .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
body#my-account .links a { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 28px 16px; text-decoration: none; color: var(--xs-dark); font-size: 0.88rem; font-weight: 600; transition: all 0.3s var(--ease); text-align: center; }
body#my-account .links a:hover { border-color: var(--xs-blue); box-shadow: var(--shadow-md); transform: translateY(-4px); color: var(--xs-blue); }
body#my-account .links a i, body#my-account .links a .material-icons { font-size: 32px; color: var(--xs-blue); opacity: 0.7; }
body#my-account .links a:hover i, body#my-account .links a:hover .material-icons { opacity: 1; }
body#history .orders, body#history table { width: 100%; }
body#history .order { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius); margin-bottom: 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; transition: background var(--duration-fast); }
body#history .order:hover { background: var(--xs-50); }
body#order-detail .box { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
body#addresses .address { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; transition: border-color var(--duration); }
body#addresses .address:hover { border-color: var(--xs-blue); }
body#addresses .address .address-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--xs-100); display: flex; gap: 12px; }
body#identity .form-group { margin-bottom: 16px; }


/* ═══════════════════════════════════════════
   16. CONTACT PAGE
   ═══════════════════════════════════════════ */
body#contact #content-wrapper { max-width: 800px; margin: 0 auto; }
body#contact .contact-form { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm); }
body#contact .contact-form h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 24px; }
body#contact .contact-form textarea { min-height: 160px; resize: vertical; }
body#contact .contact-rich { background: var(--xs-50); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 28px; margin-top: 24px; }
body#contact .contact-rich h4 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--xs-dark); }
body#contact .contact-rich .block { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; }


/* ═══════════════════════════════════════════
   17. SEARCH RESULTS
   ═══════════════════════════════════════════ */
body#search h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
body#search .search-query { color: var(--xs-blue); font-weight: 700; }
body#search #js-product-list-header { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; }
body#search .no-products { text-align: center; padding: 64px 24px; }
body#search .no-products h2 { font-size: 1.3rem; font-weight: 700; color: var(--xs-dark); margin-bottom: 12px; }
body#search .no-products p { font-size: 0.92rem; color: var(--xs-500); max-width: 400px; margin: 0 auto; }
.ui-autocomplete { background: var(--xs-white); border: 1px solid var(--xs-200); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; z-index: 9999; }
.ui-autocomplete .ui-menu-item { padding: 10px 16px; font-size: 0.88rem; cursor: pointer; transition: background var(--duration-fast); }
.ui-autocomplete .ui-menu-item:hover, .ui-autocomplete .ui-state-active { background: var(--xs-blue-light); color: var(--xs-blue); }


/* ═══════════════════════════════════════════
   18. 404 ERROR PAGE
   ═══════════════════════════════════════════ */
body#pagenotfound #content-wrapper, #pagenotfound .page-content { text-align: center; padding: 80px 24px; }
body#pagenotfound .page-content h1, #pagenotfound h1 { font-size: 6rem; font-weight: 800; color: var(--xs-blue); margin-bottom: 16px; line-height: 1; letter-spacing: -0.04em; }
body#pagenotfound .page-content p { font-size: 1rem; color: var(--xs-500); max-width: 480px; margin: 0 auto 24px; line-height: 1.7; }
body#pagenotfound .page-content .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; }
body#pagenotfound .search_widget, body#pagenotfound form { max-width: 400px; margin: 24px auto 0; }
body#pagenotfound .search_widget input { width: 100%; border: 2px solid var(--xs-200); border-radius: var(--radius); padding: 12px 18px; font-size: 0.9rem; }


/* ═══════════════════════════════════════════
   19. PRINT STYLES
   ═══════════════════════════════════════════ */
@media print {
  #header, .xs-strip, .xs-nav, .xs-mob, .xs-prefooter, .xs-footer, .breadcrumb, .product-actions, .xpd-actions, .xpd-trust, .social-sharing, #blockcart-modal, .modal, .xs-checkout-trust, .pagination, nav.pagination { display: none !important; }
  body { background: white !important; color: black !important; font-size: 12pt; }
  .xpd-hero { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 !important; }
  .xpd-title { font-size: 1.3rem; color: black !important; }
  .xpd-prices .current-price .price { font-size: 1.5rem; color: black !important; }
  .xpd-gallery .product-cover img { max-width: 300px; border-radius: 0; }
  * { box-shadow: none !important; text-shadow: none !important; transform: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  .xpd-tabs { page-break-before: always; }
  tr { page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  body#cart .cart-container, body#order-detail .box { border: 1px solid #ddd; padding: 12px; }
}


/* ═══════════════════════════════════════════
   20. PS MODULE OVERRIDES
   ═══════════════════════════════════════════ */

/* PS module section titles */
.featured-products h2,
.new-products h2,
.products-section-title,
h2.products-section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-align: left !important;
  letter-spacing: normal !important;
  color: #000 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: none !important;
}

/* PS "View all" links */
.all-product-link {
  font-size: 13px !important;
  color: #2563eb !important;
  text-decoration: none !important;
  float: right !important;
}
.all-product-link:hover { text-decoration: underline !important; }

/* Product card styles → see cards.css */

/* Form controls override */
input, select, textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}


/* ═══════════════════════════════════════════
   21. POST CLASSIC-CSS REMOVAL — GLOBAL FIXES
   Complete styling for PS elements that lost
   their styles when 196KB classic CSS was removed
   ═══════════════════════════════════════════ */

/* --- HTML/Body reset --- */
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* --- Wrapper spacing --- */
#wrapper { padding-top: 16px; min-height: 60vh; }
#wrapper .container { max-width: 1320px; margin: 0 auto; }

/* --- Left column / sidebar --- */
#left-column {
  padding-right: 20px;
}
#left-column .block-categories,
#left-column .facet,
#left-column .faceted-search {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
#left-column .block-categories .category-top-menu,
#left-column .block-categories .category-sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
#left-column .block-categories li {
  list-style: none;
}
#left-column .block-categories a {
  display: block;
  padding: 6px 0;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}
#left-column .block-categories a:hover {
  color: #2563eb;
}
#left-column .block-categories .category-sub-menu {
  padding-left: 14px;
}
#left-column .block-categories h5,
#left-column .facet .facet-title,
#left-column h4 {
  font-size: 13px;
  font-weight: 700;
  color: #1a365d;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Faceted search filters */
.faceted-search .facet {
  margin-bottom: 16px;
}
.faceted-search .facet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.faceted-search .facet-label a {
  color: #374151;
  text-decoration: none;
}
.faceted-search .facet-label a:hover {
  color: #2563eb;
}
.faceted-search .facet-label .magnitude {
  color: #9ca3af;
  font-size: 11px;
}
.faceted-search .custom-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}
.active-filter-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 8px;
}
.active_filters {
  margin-bottom: 16px;
}
.active_filters .filter-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: #2563eb;
  margin: 0 6px 6px 0;
}
.active_filters .filter-block .close {
  font-size: 14px;
  color: #2563eb;
  cursor: pointer;
  background: none;
  border: none;
}

/* --- Product listing page --- */
#js-product-list-header {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.block-category {
  margin-bottom: 16px;
}
.block-category .category-cover {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.block-category h1 {
  font-size: 20px;
  font-weight: 700;
  color: #1a365d;
  margin: 0 0 8px;
}
.block-category #category-description {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

/* Sort bar */
.products-sort-order,
.sort-by-row,
.products-selection {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.products-sort-order .select-title,
.sort-by-row .select-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.products-sort-order select,
.sort-by-row select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.products-sort-order .select-list,
.sort-by-row .select-list {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 200px;
}
.products-sort-order .select-list a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
}
.products-sort-order .select-list a:hover {
  background: #f3f4f6;
  color: #2563eb;
}

/* Total products count */
.total-products {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}
.total-products p {
  margin: 0;
}

/* Product miniature, card grids, and flags → see cards.css */

/* --- Featured products / New products / All product sections --- */
.featured-products,
.new-products,
.products-section,
.bestsellers-products {
  margin-bottom: 24px;
}

/* --- PS Image slider --- */
.homeslider, #homeslider, .ps-imageslider,
[id*="homeslider"], .nivoSlider {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.homeslider img, #homeslider img, .nivoSlider img {
  width: 100%;
  height: auto;
  display: block;
}
.bx-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.bx-wrapper .bx-viewport {
  border: none !important;
}
.bx-controls-direction a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.9) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.bx-controls-direction a:hover {
  background: rgba(255,255,255,1) !important;
}
/* Nivo slider controls */
.nivo-directionNav a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.9) !important;
  border-radius: 50%;
  text-indent: -9999px;
  top: 50%;
  transform: translateY(-50%);
}
.nivo-controlNav {
  bottom: 12px;
}
.nivo-controlNav a {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  margin: 0 4px;
  display: inline-block;
  text-indent: -9999px;
}
.nivo-controlNav a.active {
  background: #fff;
}

/* --- PS Search widget (standalone, outside header) --- */
#search_widget {
  width: 100%;
}
#search_widget form {
  display: flex;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#search_widget form:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
#search_widget input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  background: transparent;
}
#search_widget input[type="text"]::placeholder {
  color: #9ca3af;
}
#search_widget button[type="submit"] {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 0 16px;
  cursor: pointer;
  transition: background 0.15s;
}
#search_widget button[type="submit"]:hover {
  background: #1d4ed8;
}

/* --- Blockreassurance module --- */
.blockreassurance {
  display: none !important;
}

/* --- Shopping cart widget (header dropdown) --- */
.blockcart .header {
  cursor: pointer;
}
.blockcart .body {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 16px;
  z-index: 2000;
}
.blockcart:hover .body,
.blockcart.active .body {
  display: block;
}
.blockcart .cart-products-count:empty {
  display: none;
}

/* --- Customer sign-in --- */
.user-info a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* --- Notifications --- */
.notifications-container {
  margin-bottom: 12px;
}

/* --- Social follow / sharing --- */
.social-sharing {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.social-sharing a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 16px;
}
.social-sharing a:hover {
  background: #2563eb;
  color: #fff;
}

/* --- PS custom text module --- */
.custom-text-block {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* --- Quantity input touchspin --- */
.bootstrap-touchspin {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}
.bootstrap-touchspin .form-control,
.bootstrap-touchspin input {
  text-align: center;
  width: 48px;
  border: none;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
  border-radius: 0;
  padding: 6px 4px;
  font-weight: 600;
}
.bootstrap-touchspin .btn,
.bootstrap-touchspin .input-group-btn .btn {
  border: none;
  background: #f3f4f6;
  color: #374151;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 0;
  font-size: 16px;
  line-height: 1;
}
.bootstrap-touchspin .btn:hover {
  background: #e5e7eb;
}

/* --- Add to cart modal --- */
#blockcart-modal {
  z-index: 10001;
}
#blockcart-modal .modal-dialog {
  max-width: 600px;
}
#blockcart-modal .modal-header {
  background: #ecfdf5;
  border-bottom: 1px solid #a7f3d0;
}
#blockcart-modal .modal-header .close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
}
#blockcart-modal .modal-body {
  padding: 20px;
}
#blockcart-modal .product-name {
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}
#blockcart-modal .product-price {
  font-size: 16px;
  font-weight: 700;
  color: #1a365d;
}
#blockcart-modal .cart-content {
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}
#blockcart-modal .cart-content p {
  margin: 4px 0;
  font-size: 13px;
  color: #374151;
}
#blockcart-modal .cart-content .cart-products-count {
  font-weight: 600;
}
#blockcart-modal .modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
#blockcart-modal .modal-footer .btn {
  padding: 10px 20px;
  font-weight: 600;
}

/* --- PS email subscription (standalone) --- */
.block_newsletter {
  margin: 0;
  padding: 0;
}
.block_newsletter form {
  display: flex;
  gap: 0;
}
.block_newsletter input[type="email"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 13px;
}
.block_newsletter input[type="submit"],
.block_newsletter button[type="submit"] {
  padding: 10px 20px;
  background: #f59e0b;
  color: #fff;
  border: 1px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.block_newsletter input[type="submit"]:hover,
.block_newsletter button[type="submit"]:hover {
  background: #d97706;
  border-color: #d97706;
}

/* --- CMS pages --- */
.page-cms .page-content,
.cms-page .page-content {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}
.page-cms .page-content h1,
.page-cms .page-content h2,
.page-cms .page-content h3 {
  color: #1a365d;
}

/* --- Checkout pages --- */
body#checkout #header .header-nav,
body#checkout #header .xh-navbar {
  display: none !important;
}
body#checkout .checkout-step {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
body#checkout .checkout-step .step-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body#checkout .checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
body#checkout .checkout-step.-complete .step-title {
  color: #059669;
}
body#checkout .checkout-step.-unreachable {
  opacity: 0.5;
  pointer-events: none;
}
body#checkout .payment-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
body#checkout .payment-options label:hover {
  border-color: #2563eb;
}
body#checkout .payment-options input[type="radio"]:checked + label,
body#checkout .payment-options label:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}
body#checkout #payment-confirmation .btn {
  width: 100%;
  padding: 14px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
body#checkout #payment-confirmation .btn:hover {
  background: #d97706;
}

/* --- Order confirmation --- */
body#order-confirmation .card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
body#order-confirmation .card-block {
  padding: 24px;
}

/* --- PS contact info module (footer/sidebar) --- */
.block-contact {
  font-size: 13px;
  color: #6b7280;
}
.block-contact .block-contact-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 8px;
}

/* --- Pagination override (category/search) --- */
nav.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 12px;
}
nav.pagination .showing {
  font-size: 13px;
  color: #6b7280;
}

/* Miniature add-to-cart → see cards.css */

/* --- PS "No products" message --- */
#js-product-list .no-products,
.no-products {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* --- Quick view modal --- */
.quickview .modal-dialog {
  max-width: 800px;
}
.quickview .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px;
}
@media (max-width: 767px) {
  .quickview .modal-body {
    grid-template-columns: 1fr;
  }
}

/* --- Material Icons font (ensure loaded) --- */
.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* --- Hidden helper classes (PS uses these) --- */
.hidden, [hidden] {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
.pull-left { float: left; }
.pull-right { float: right; }
.text-xs-center { text-align: center; }
.text-xs-right { text-align: right; }
.text-xs-left { text-align: left; }
.text-muted { color: #6b7280; }
.text-success { color: #059669; }
.text-danger { color: #dc2626; }
.text-warning { color: #d97706; }
.text-info { color: #2563eb; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.font-weight-bold { font-weight: 700; }
.w-100 { width: 100%; }

/* --- Spacing helpers (PS classic provided these) --- */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.pt-1 { padding-top: 8px; }
.pt-2 { padding-top: 16px; }
.pb-1 { padding-bottom: 8px; }
.pb-2 { padding-bottom: 16px; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }

/* Responsive product grid → see cards.css */
@media (max-width: 991px) {
  #left-column {
    padding-right: 0;
    margin-bottom: 16px;
  }
}
@media (max-width: 576px) {
  body#checkout .checkout-step {
    padding: 16px;
    border-radius: 8px;
  }
}

/* ===== MODULE TEMPLATE OVERRIDES — Custom markup styling ===== */

/* Search bar */
.xs-search form {
  display: flex;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.xs-search form:focus-within {
  border-color: #3662A1;
  box-shadow: 0 0 0 3px rgba(54,98,161,0.1);
}
.xs-search__input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: #1f2937;
  background: transparent !important;
  box-shadow: none !important;
}
.xs-search__input::placeholder { color: #9ca3af; }
.xs-search__btn {
  padding: 0 24px;
  background: #3662A1;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.xs-search__btn:hover { background: #2d5289; }

/* Cart widget */
.xs-cart-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #1f2937 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.xs-cart-link:hover { background: rgba(54,98,161,0.06); }
.xs-cart-link svg { color: #374151; flex-shrink: 0; }
.xs-cart-count {
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
}
.xs-cart-total { font-weight: 600; }

/* User widget */
.xs-user__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #1f2937 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.xs-user__link:hover { background: rgba(54,98,161,0.06); color: #3662A1 !important; }
.xs-user__link svg { color: #374151; flex-shrink: 0; }
.xs-user__link:hover svg { color: #3662A1; }
.xs-user__logout { font-size: 11px; color: #6b7280; margin-left: 4px; }

/* Image slider */
.xs-slider { border-radius: 12px; overflow: hidden; }
.xs-slider__list { list-style: none; padding: 0; margin: 0; }
.xs-slider__slide { position: relative; }
.xs-slider__slide img { width: 100%; min-height: 300px; object-fit: cover; display: block; }
.xs-slider__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  padding: 40px 30px 24px;
}
.xs-slider__caption h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.xs-slider__desc { font-size: 14px; color: rgba(255,255,255,0.8); }

/* ===== PRODUCT MODULE OVERRIDES ===== */

/* Products module wrapper — no title, just products */
.xs-products-module {
  position: relative;
}
.xs-products-module__viewall {
  display: none; /* Hidden — our .m-section__header has its own "Zobrazit vše" */
}

/* Product grids and card sizing → see cards.css */

/* Newsletter form */
.xs-newsletter-form form {
  display: flex;
  gap: 0;
}
.xs-newsletter-form__input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: #1f2937;
  background: #fff;
  outline: none;
}
.xs-newsletter-form__input:focus { border-color: #3662A1; }
.xs-newsletter-form__input::placeholder { color: #9ca3af; }
.xs-newsletter-form__btn {
  height: 40px;
  padding: 0 20px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.xs-newsletter-form__btn:hover { background: #d97706; }
.xs-newsletter-form .alert { margin-top: 8px; font-size: 12px; }

/* Hide old PS module wrapper styles */
.block_newsletter { background: none !important; margin: 0 !important; padding: 0 !important; }
.block_newsletter p, .block_newsletter .title_block { display: none; }