/* ==========================================================================
   SVITLANA ZAMKOVA — SMART BOUTIQUE E-COMMERCE HEADER (NO ELEMENTOR)
   100% Live Site Aesthetic (#595C54 Olive, #E9ECE6 Stone, Ledger + Kantumruy Pro)
   Includes 3-Column Mega-Catalog, Expandable Search, Manager Popover & Mobile Drawer
   ========================================================================== */

:root {
  --sz-olive: #595c54;
  --sz-olive-dark: #43463f;
  --sz-olive-light: #6e7268;
  --sz-olive-subtle: rgba(89, 92, 84, 0.1);
  --sz-olive-border: rgba(89, 92, 84, 0.24);
  --sz-canvas: #e9ece6;
  --sz-surface: #f4f3f0;
  --sz-surface-white: #ffffff;
  --sz-ink: #171c18;
  --sz-text: #2c302b;
  --sz-muted: #686d64;
  --sz-font-logo: "Ledger", Georgia, serif;
  --sz-font-nav: "Kantumruy Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sz-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sz-header-h: 66px;
  --header: 66px;
}

/* ==========================================================================
   1. ELEMENTOR THEME ISOLATION & RESET
   Prevents Hello Elementor & .elementor-kit-38 from overriding buttons/inputs/links
   ========================================================================== */
#sz-site-header,
#sz-site-header *,
#sz-site-header *::before,
#sz-site-header *::after {
  box-sizing: border-box;
}

#sz-site-header button {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  line-height: normal;
}

#sz-site-header a {
  text-decoration: none;
}

/* Base Header Root */
.sz-site-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: auto !important;
  z-index: 1000;
  background-color: var(--sz-canvas);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: box-shadow 220ms ease, background-color 220ms ease;
}

/* WordPress Admin Bar offset */
body.admin-bar .sz-site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .sz-site-header {
    top: 46px;
  }
}

.sz-site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(23, 28, 24, 0.09);
}

.sz-header-variant.sz-v1 {
  display: block;
  width: 100%;
  background-color: var(--sz-canvas);
  border-top: 1px solid var(--sz-olive);
  border-bottom: 1px solid var(--sz-olive);
}

.sz-header-inner {
  max-width: 94%;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  .sz-header-inner {
    max-width: 1480px;
  }
}

.sz-v1 .sz-header-inner {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ==========================================================================
   2. AUTHENTIC BRAND LOGO (Zamkova.shoes)
   ========================================================================== */
#sz-site-header .sz-brand-logo {
  font-family: var(--sz-font-logo) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--sz-olive) !important;
  text-decoration: none !important;
  letter-spacing: -0.015em !important;
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: 1 !important;
  transition: color 160ms ease, opacity 160ms ease;
  flex-shrink: 0;
}

#sz-site-header .sz-brand-logo:hover {
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-brand-logo .sz-dot-shoes {
  font-family: var(--sz-font-logo) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  color: var(--sz-olive) !important;
  margin-left: 1px;
}

/* ==========================================================================
   3. DESKTOP NAVIGATION & 3-COLUMN MEGA-CATALOG
   ========================================================================== */
.sz-desktop-nav {
  display: flex;
  align-items: center;
}

.sz-nav-list {
  display: flex;
  align-items: center;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(16px, 1.8vw, 28px);
}

.sz-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 !important;
}

#sz-site-header .sz-nav-link {
  font-family: var(--sz-font-nav) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  height: auto !important;
  padding: 8px 2px !important;
  position: relative;
  white-space: nowrap;
  transition: color 150ms ease;
}

#sz-site-header .sz-nav-link:hover,
#sz-site-header .sz-nav-link.sz-active {
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--sz-olive);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#sz-site-header .sz-nav-link:hover::after,
#sz-site-header .sz-nav-link.sz-active::after {
  transform: scaleX(1);
}

/* Highlighted Bespoke Link (Індивідуальне замовлення) */
#sz-site-header .sz-nav-link.sz-nav-link-bespoke {
  color: var(--sz-olive-dark) !important;
  font-weight: 600 !important;
  background-color: rgba(89, 92, 84, 0.1) !important;
  height: 34px !important;
  padding: 0 13px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(89, 92, 84, 0.24) !important;
  align-self: center;
  transition: all 160ms ease;
}

#sz-site-header .sz-nav-link.sz-nav-link-bespoke::after {
  display: none !important;
}

#sz-site-header .sz-nav-link.sz-nav-link-bespoke:hover,
#sz-site-header .sz-nav-link.sz-nav-link-bespoke.sz-active {
  background-color: var(--sz-olive) !important;
  border-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

.sz-chevron-icon {
  width: 9px;
  height: 6px;
  stroke: currentColor;
  transition: transform 180ms ease;
}

.sz-has-dropdown:hover .sz-chevron-icon {
  transform: rotate(180deg);
}

/* 3-Column E-Commerce Mega-Menu */
.sz-has-dropdown {
  position: relative;
}

.sz-mega-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-45%) translateY(8px);
  width: 720px;
  background-color: var(--sz-surface);
  border: 1px solid var(--sz-olive);
  border-radius: 4px;
  box-shadow: 0 20px 48px rgba(23, 28, 24, 0.16);
  padding: 22px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 180ms;
  z-index: 1200;
}

/* Invisible hover bridge */
.sz-mega-dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.sz-has-dropdown:hover .sz-mega-dropdown,
.sz-has-dropdown:focus-within .sz-mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-45%) translateY(0);
}

.sz-mega-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.sz-mega-col-title {
  font-family: var(--sz-font-nav);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sz-olive);
  margin: 0 0 12px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--sz-olive-border);
  display: block;
}

.sz-mega-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sz-mega-models-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sz-site-header .sz-mega-link {
  font-family: var(--sz-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
  border-radius: 3px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 140ms ease, color 140ms ease, padding-left 140ms ease;
}

#sz-site-header .sz-mega-link:hover {
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
  padding-left: 11px !important;
}

.sz-mega-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background-color: var(--sz-olive);
  color: #ffffff;
  border-radius: 3px;
}

#sz-site-header .sz-mega-link:hover .sz-mega-badge {
  background-color: #ffffff;
  color: var(--sz-olive);
}

/* Featured Bespoke Card inside Mega-Menu */
.sz-mega-promo-card {
  background-color: var(--sz-canvas);
  border: 1px solid var(--sz-olive-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sz-mega-promo-tag {
  font-family: var(--sz-font-nav);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sz-olive);
}

.sz-mega-promo-title {
  font-family: var(--sz-font-logo) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--sz-ink) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.sz-mega-promo-desc {
  font-family: var(--sz-font-body);
  font-size: 12px;
  color: var(--sz-muted);
  margin: 0;
  line-height: 1.45;
}

#sz-site-header .sz-mega-promo-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
  font-family: var(--sz-font-nav) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 3px;
  transition: background-color 150ms ease;
}

#sz-site-header .sz-mega-promo-btn:hover {
  background-color: var(--sz-ink) !important;
  color: #ffffff !important;
}

#sz-site-header .sz-mega-all-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  font-family: var(--sz-font-nav) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sz-olive-dark) !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
  border: 1px solid var(--sz-olive-border);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
  transition: all 140ms ease;
}

#sz-site-header .sz-mega-all-link:hover {
  background: var(--sz-olive) !important;
  border-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4. FUNCTIONAL CONTROLS (Search, Consultation, Lang, Curr, Cart)
   ========================================================================== */
.sz-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Search Trigger Button */
#sz-site-header .sz-search-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px !important;
  padding: 6px 11px !important;
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sz-text) !important;
  cursor: pointer;
  transition: all 150ms ease;
}

#sz-site-header .sz-search-toggle-btn:hover,
#sz-site-header .sz-search-toggle-btn.is-active {
  background: #ffffff !important;
  border-color: var(--sz-olive) !important;
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-search-toggle-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* Quick Manager Consultation Popover */
.sz-consult-wrap {
  position: relative;
}

#sz-site-header .sz-consult-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px !important;
  padding: 6px 11px !important;
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sz-text) !important;
  cursor: pointer;
  transition: all 150ms ease;
}

#sz-site-header .sz-consult-trigger:hover {
  background: #ffffff !important;
  border-color: var(--sz-olive) !important;
  color: var(--sz-ink) !important;
}

.sz-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4caf50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.7);
}

.sz-consult-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 265px;
  background: var(--sz-surface);
  border: 1px solid var(--sz-olive);
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(23, 28, 24, 0.15);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 160ms ease;
  z-index: 1200;
}

.sz-consult-popover::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.sz-consult-wrap:hover .sz-consult-popover,
.sz-consult-wrap:focus-within .sz-consult-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.sz-consult-head {
  font-family: var(--sz-font-nav);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sz-olive);
  margin-bottom: 4px;
}

#sz-site-header .sz-consult-phone {
  display: block;
  font-family: var(--sz-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sz-ink) !important;
  text-decoration: none !important;
  margin-bottom: 2px;
}

.sz-consult-hours {
  font-family: var(--sz-font-body);
  font-size: 11.5px;
  color: var(--sz-muted);
  margin-bottom: 12px;
}

.sz-consult-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#sz-site-header .sz-consult-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 11px !important;
  background: var(--sz-canvas) !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 3px;
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  transition: all 140ms ease;
}

#sz-site-header .sz-consult-btn:hover {
  background: var(--sz-olive) !important;
  border-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

/* Language & Currency Controls */
.sz-lang-pill-wrap {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--sz-olive-border);
  border-radius: 4px;
  padding: 2px;
}

#sz-site-header .sz-lang-pill-btn {
  font-family: var(--sz-font-nav) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sz-muted) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 3px;
  line-height: 1 !important;
  transition: all 140ms ease;
}

#sz-site-header .sz-lang-pill-btn:hover {
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-lang-pill-btn.sz-active {
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

.sz-curr-dropdown {
  position: relative;
}

#sz-site-header .sz-curr-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sz-text) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--sz-olive-border) !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 140ms ease;
}

#sz-site-header .sz-curr-trigger:hover {
  background: #ffffff !important;
  border-color: var(--sz-olive) !important;
  color: var(--sz-ink) !important;
}

.sz-curr-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--sz-surface);
  border: 1px solid var(--sz-olive);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(23, 28, 24, 0.14);
  min-width: 110px;
  padding: 4px;
  display: none;
  z-index: 1200;
}

.sz-curr-dropdown.sz-open .sz-curr-menu {
  display: block;
}

#sz-site-header .sz-curr-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  border-radius: 3px;
  transition: all 120ms ease;
}

#sz-site-header .sz-curr-item:hover {
  background-color: var(--sz-olive-subtle) !important;
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-curr-item.sz-active {
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Cart Capsule (Unified with WooCommerce fragments) */
#sz-site-header .sz-cart-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px;
  padding: 6px 13px !important;
  background-color: var(--sz-olive) !important;
  border: 1px solid var(--sz-olive) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: all 150ms ease;
}

#sz-site-header .sz-cart-capsule:hover {
  background-color: var(--sz-ink) !important;
  border-color: var(--sz-ink) !important;
  color: #ffffff !important;
}

#sz-site-header .sz-cart-amount,
#sz-site-header .sz-cart-amount .woocommerce-Price-amount,
#sz-site-header .sz-cart-amount .woocommerce-Price-currencySymbol {
  font-family: var(--sz-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.sz-cart-capsule-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sz-cart-capsule-icon svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

#sz-site-header .sz-cart-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background-color: #ffffff !important;
  color: var(--sz-ink) !important;
  font-family: var(--sz-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   5. EXPANDABLE LIVE SEARCH BAR PANEL
   ========================================================================== */
.sz-search-panel {
  display: none;
  background-color: var(--sz-surface);
  border-bottom: 1px solid var(--sz-olive);
  padding: 14px 0;
  box-shadow: 0 12px 28px rgba(23, 28, 24, 0.1);
}

.sz-search-panel.is-open {
  display: block;
  animation: szSlideDown 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes szSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sz-search-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sz-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
}

.sz-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.sz-search-input-wrap svg {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  stroke: var(--sz-muted);
  pointer-events: none;
}

#sz-site-header .sz-search-input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px 0 40px !important;
  font-family: var(--sz-font-body) !important;
  font-size: 14px !important;
  color: var(--sz-ink) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 150ms ease;
}

#sz-site-header .sz-search-input:focus {
  border-color: var(--sz-olive) !important;
}

#sz-site-header .sz-search-submit {
  height: 40px !important;
  padding: 0 20px !important;
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--sz-font-nav) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

#sz-site-header .sz-search-submit:hover {
  background-color: var(--sz-ink) !important;
}

#sz-site-header .sz-search-close {
  background: transparent !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--sz-text) !important;
  cursor: pointer;
}

.sz-search-quick-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sz-font-body);
  font-size: 12px;
  color: var(--sz-muted);
}

#sz-site-header .sz-quick-tag {
  text-decoration: none !important;
  color: var(--sz-text) !important;
  background-color: var(--sz-canvas) !important;
  border: 1px solid var(--sz-olive-border) !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 140ms ease;
}

#sz-site-header .sz-quick-tag:hover {
  background-color: var(--sz-olive) !important;
  border-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   6. MOBILE SUB-BAR & SLIDE-IN DRAWER
   ========================================================================== */
.sz-mobile-subbar {
  display: none;
}

#sz-site-header .sz-mobile-btn {
  display: none;
  background: transparent !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px !important;
  cursor: pointer;
  padding: 6px !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.5px;
  width: 36px !important;
  height: 36px !important;
}

.sz-burger-bar {
  display: block;
  width: 18px;
  height: 1.8px;
  background-color: var(--sz-ink) !important;
  border-radius: 1px;
}

.sz-drawer {
  position: fixed;
  inset: 0;
  z-index: 10010 !important;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 300ms ease;
}

.sz-drawer.sz-open {
  visibility: visible;
  pointer-events: auto;
}

.sz-drawer-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(23, 28, 24, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sz-drawer.sz-open .sz-drawer-overlay {
  opacity: 1;
}

.sz-drawer-sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(88vw, 360px);
  background-color: var(--sz-canvas);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sz-drawer.sz-open .sz-drawer-sheet {
  transform: translateX(0);
}

.sz-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sz-olive-border);
  flex-shrink: 0;
}

#sz-site-header .sz-drawer-close-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 6px !important;
  color: var(--sz-olive) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px;
}

.sz-drawer-content {
  padding: 18px 20px 24px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Mobile Drawer Search Form */
.sz-drawer-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--sz-olive-border);
  border-radius: 4px;
  padding: 4px 4px 4px 10px;
  margin: 0 !important;
  flex-shrink: 0;
}

#sz-site-header .sz-drawer-search-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--sz-font-body) !important;
  font-size: 13.5px !important;
  color: var(--sz-ink) !important;
  width: 100% !important;
  padding: 4px 0 !important;
}

#sz-site-header .sz-drawer-search-btn {
  background: var(--sz-olive) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 6px 12px !important;
  font-family: var(--sz-font-nav) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* Drawer Switchers Card */
.sz-drawer-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--sz-olive-border);
  flex-shrink: 0;
}

.sz-seg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sz-seg-label {
  font-family: var(--sz-font-body);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sz-muted);
  font-weight: 500;
}

.sz-segmented {
  display: inline-flex;
  background: var(--sz-canvas);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}

#sz-site-header .sz-seg-btn {
  font-family: var(--sz-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: var(--sz-olive) !important;
  padding: 4px 10px !important;
  border-radius: 3px;
  line-height: 1 !important;
  transition: background-color 140ms ease, color 140ms ease;
}

#sz-site-header .sz-seg-btn.sz-active {
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

/* Drawer Navigation Links */
.sz-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#sz-site-header .sz-drawer-navlink {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 10px !important;
  font-family: var(--sz-font-nav) !important;
  font-size: 15.5px !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  border-radius: 4px;
  transition: background-color 140ms ease, padding-left 140ms ease;
}

#sz-site-header .sz-drawer-navlink:hover,
#sz-site-header .sz-drawer-navlink.sz-active {
  background-color: rgba(89, 92, 84, 0.08) !important;
  color: var(--sz-ink) !important;
}

#sz-site-header .sz-drawer-navlink.sz-active {
  font-weight: 600 !important;
}

/* Accordions in Mobile Drawer */
.sz-drawer-acc {
  border-radius: 4px;
  overflow: hidden;
}

.sz-acc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sz-acc-bar .sz-drawer-navlink {
  flex: 1;
}

#sz-site-header .sz-acc-trigger-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 10px 12px !important;
  color: var(--sz-olive) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sz-acc-trigger-btn .sz-chevron-icon {
  width: 11px;
  height: 7px;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sz-drawer-acc.sz-open .sz-acc-trigger-btn .sz-chevron-icon {
  transform: rotate(180deg);
}

.sz-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.16, 1, 0.3, 1);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  margin-top: 2px;
}

.sz-drawer-acc.sz-open .sz-acc-panel {
  max-height: 460px;
}

#sz-site-header .sz-acc-sublink {
  display: block !important;
  padding: 8px 16px 8px 22px !important;
  font-family: var(--sz-font-nav) !important;
  font-size: 14px !important;
  color: var(--sz-olive) !important;
  text-decoration: none !important;
  transition: color 140ms ease, background-color 140ms ease;
}

#sz-site-header .sz-acc-sublink:hover {
  color: var(--sz-ink) !important;
  background-color: rgba(89, 92, 84, 0.08) !important;
}

/* Drawer Bottom Messengers (Telegram / WhatsApp / Viber) & Cart */
.sz-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--sz-olive-border);
  flex-shrink: 0;
}

.sz-drawer-messengers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

#sz-site-header .sz-drawer-msg-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 6px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--sz-olive-border) !important;
  border-radius: 4px;
  font-family: var(--sz-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sz-text) !important;
  text-decoration: none !important;
  transition: all 140ms ease;
}

#sz-site-header .sz-drawer-msg-btn:hover {
  background: var(--sz-olive) !important;
  border-color: var(--sz-olive) !important;
  color: #ffffff !important;
}

#sz-site-header .sz-drawer-cart-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 12px 16px !important;
  background-color: var(--sz-olive) !important;
  color: #ffffff !important;
  border-radius: 4px;
  text-decoration: none !important;
  font-family: var(--sz-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background-color 160ms ease;
}

#sz-site-header .sz-drawer-cart-action:hover {
  background-color: var(--sz-ink) !important;
  color: #ffffff !important;
}

#sz-site-header .sz-drawer-cart-total,
#sz-site-header .sz-drawer-cart-total .woocommerce-Price-amount,
#sz-site-header .sz-drawer-cart-total .woocommerce-Price-currencySymbol {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   7. RESPONSIVE TABLET & MOBILE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1140px) {
  :root {
    --sz-header-h: 90px;
    --header: 90px;
  }

  .sz-desktop-nav,
  .sz-consult-wrap,
  .sz-lang-pill-wrap,
  .sz-curr-dropdown {
    display: none !important;
  }

  #sz-site-header .sz-mobile-btn {
    display: flex !important;
  }

  .sz-v1 .sz-header-inner {
    height: 56px;
  }

  #sz-site-header .sz-brand-logo {
    font-size: 20px !important;
  }

  #sz-site-header .sz-brand-logo .sz-dot-shoes {
    font-size: 18px !important;
  }

  #sz-site-header .sz-search-toggle-btn span {
    display: none;
  }

  #sz-site-header .sz-search-toggle-btn {
    padding: 7px 9px !important;
  }

  #sz-site-header .sz-cart-amount {
    display: none !important;
  }

  #sz-site-header .sz-cart-capsule {
    padding: 7px 11px !important;
  }

  .sz-mobile-subbar {
    display: flex !important;
    background-color: var(--sz-canvas) !important;
    border-bottom: 1px solid var(--sz-olive-border) !important;
    height: 34px;
    padding: 0 14px;
    justify-content: space-between;
    align-items: center;
  }

  .sz-subbar-curr {
    display: inline-flex;
    background: rgba(89, 92, 84, 0.08);
    border-radius: 4px;
    padding: 2px;
    gap: 2px;
  }

  #sz-site-header .sz-curr-pill {
    font-family: var(--sz-font-body) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--sz-olive) !important;
    padding: 3px 8px !important;
    border-radius: 3px;
    line-height: 1 !important;
    transition: background-color 140ms ease, color 140ms ease;
  }

  #sz-site-header .sz-curr-pill.sz-active {
    background-color: var(--sz-olive) !important;
    color: #ffffff !important;
  }

  .sz-subbar-lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--sz-font-nav);
    font-size: 13px;
  }

  #sz-site-header .sz-lang-pill {
    font-family: var(--sz-font-body) !important;
    color: var(--sz-muted) !important;
    text-decoration: none !important;
  }

  #sz-site-header .sz-lang-pill.sz-active {
    color: var(--sz-ink) !important;
    font-weight: 600 !important;
  }

  .sz-lang-sep {
    color: var(--sz-olive-border);
    font-size: 12px;
  }
}

/* ==========================================================================
   8. ANCHOR SCROLL OFFSET & SMOOTH SCROLLING
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

#about,
#contact,
#contacts,
.sz-about-section,
.sz-contacts-section {
  scroll-margin-top: 88px;
}