/* ================================================
   ELECTRIC GO — WordPress-specific overrides
   (runs before the design system CSS below)
   ================================================ */

/* Hide ALL WoodMart chrome on all pages */
.whb-header,
.whb-sticky-header,
.whb-clone,
.whb-general-header,
body.eg-home .whb-header,
body.eg-home .whb-sticky-header,
body.eg-home .whb-clone,
body.eg-home .whb-general-header,
body.eg-home .woodmart-footer,
body.eg-home .wd-toolbar,
body.eg-home .wd-skip-links,
body.eg-home .wd-prefooter,
body.eg-home .wd-page-content > .container,
body.eg-home .main-page-wrapper { display: none !important; }

/* Kill WoodMart's header-height padding on the page wrapper */
body.eg-home { padding-top: 12px !important; margin-top: 0 !important; }
body.eg-home .wd-page-wrapper { padding-top: 12px !important; }
body.eg-home .whb-sticky-prepared { padding-top: 12px !important; }

/* Our app takes full page */
body.eg-home #eg-app { display: block !important; }

/* Fix sticky header — body overflow hidden breaks position:sticky */
html, body { overflow: visible !important; }
html { overflow-x: hidden; scroll-padding-top: 120px; }

/* WP admin bar offset */
html { margin-top: 12px !important; scroll-padding-top: 120px; }

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   BOTTOM NAVIGATION BAR
   ======================================================= */
/* Padding on body so content doesn't hide behind the bar — mobile only */
@media (max-width: 768px) {
  body { padding-bottom: 80px !important; }
}

/* Bottom nav — mobile only (hidden on desktop) */
@keyframes bn-wave {
  0%   { left: -60%; }
  100% { left: 120%; }
}

@media (max-width: 768px) {
.eg-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 99998 !important;
  display: flex !important;
}

/* ── Hide bottom nav on desktop ── */
@media (min-width: 1025px) {
  .eg-bottom-nav { display: none !important; }
  body:not(.home) { padding-bottom: 0 !important; }
}
.eg-bottom-nav.filter-open {
  display: none !important;
  z-index: 95 !important;
}
.eg-bottom-nav:not(.filter-open) {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 8px 8px max(env(safe-area-inset-bottom, 0px), 8px) 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 16px rgba(15,23,42,0.08) !important;
  border-radius: 0 !important;
  height: 60px !important;
  overflow: hidden !important;
}

/* Wave animation — sliding light sweep behind icons */
.eg-bottom-nav::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(79,70,229,0.18) 30%, rgba(79,70,229,0.35) 50%, rgba(79,70,229,0.18) 70%, transparent 100%) !important;
  animation: bn-wave 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.eg-bn-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  min-width: 44px !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
  flex: 1 !important;
}

.eg-bn-btn:hover,
.eg-bn-btn:focus-visible {
  color: #4f46e5 !important;
}

.eg-bn-btn:active {
  transform: scale(0.93) !important;
}

/* Bottom nav highlight — menu button */
#eg-bn-menu {
  color: #4f46e5 !important;
  position: relative !important;
}

#eg-bn-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 3px !important;
  background: #4f46e5 !important;
  border-radius: 0 0 3px 3px !important;
}

#eg-bn-menu span {
  color: #4f46e5 !important;
}

.eg-bn-btn span {
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.eg-bn-btn svg {
  flex-shrink: 0 !important;
  display: block !important;
}

/* Cart count badge */
.eg-bn-cart-count {
  position: absolute !important;
  top: 12px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f59e0b !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}

} /* end @media (max-width: 768px) for bottom nav */

/* Hide WoodMart's own toolbar if present */
.wd-toolbar,
.woodmart-toolbar {
  display: none !important;
}

/* WooCommerce product image */
.woocommerce-product-gallery { opacity: 1 !important; }

/* Kill duplicate footer */
body.eg-home .foot ~ .foot { display: none !important; }

:root {
  --bg: #f6f1e7;          /* warm cream paper */
  --bg-1: #efe8d8;        /* slightly deeper cream */
  --surface: #ffffff;     /* card surface */
  --surface-2: #faf6ec;
  --line: #d9cfb8;        /* warm beige line */
  --line-2: #b8ac8e;
  --text: #1a2238;        /* deep ink-blue */
  --muted: #5b667e;
  --muted-2: #8a93a7;
  --accent: #1d3fb3;      /* electric royal blue */
  --accent-dim: #16329a;
  --accent-2: #d96a2a;    /* copper / orange secondary */
  --accent-ink: #ffffff;
  --glow: 0.4;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input { font-family: inherit; color: inherit; }

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(29,63,179,0.06), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(217,106,42,0.05), transparent 60%),
    linear-gradient(180deg, #f8f3e8 0%, #f6f1e7 50%, #efe8d8 100%);
  background-attachment: fixed;
}
.circuit-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 0;
  opacity: calc(0.55 + var(--glow) * 0.4);
}
.scanlines { display: none; }

/* ---------- glow utility ---------- */
.glow-y {
  filter: drop-shadow(0 0 calc(6px * var(--glow)) rgba(29,63,179,0.45));
}

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   HEADER
   ======================================================= */
header.hdr {
  position: sticky !important;
  top: 12px !important;
  z-index: 999 !important;
  margin: 12px auto !important;
  border-radius: 24px !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  overflow: visible !important;   /* mega-menu must overflow */
  background: transparent !important;
  box-shadow: 0 6px 32px rgba(0,0,0,.13), 0 1px 4px rgba(0,0,0,.06) !important;
  border: none !important;
}

/* Фон сторінки — легкий градієнт, щоб glassmorphism було видно */
body {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2f8 50%, #f5f0ff 100%) !important;
  background-attachment: fixed !important;
}
/* hdr-strip — rounds the top corners of the pill */
header.hdr .hdr-strip {
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}

/* Mobile menu — rounded corners + spacing (matches header) — adjust hidden state */
.m-menu {
  left: 12px !important;
  right: auto !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 86vw !important;
  max-width: 330px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transform: translateX(calc(-100% - 12px)) !important;
  
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  
  /* Animation: slide right + fade in + subtle scale */
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
  opacity: 0;
}
.m-menu.on {
  z-index: 2000 !important;
  transform: translateX(0) !important;
  opacity: 1;
}

/* Fix header so it doesn't move when mobile menu opens */
body.m-menu-open {
  overflow: hidden !important;
}
body.m-menu-open .hdr {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}
body.m-menu-open .wd-page-wrapper {
  
}

/* Also ensure mobile menu drawer isn't cut off by body scrollbar */
.m-menu {
  z-index: 101 !important;
}
.m-menu-bg {
  z-index: 100 !important;
}

/* Mobile overlay — lighter */
.m-menu-bg {
  background: rgba(10,14,22,0.15) !important;
}
.hdr-strip {
  border-radius: 24px 24px 0 0;   /* top of pill */
  border-bottom: none;             /* no seam line */
  background: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
}
.strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.strip-inner .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); margin-right: 6px;
  box-shadow: 0 0 8px rgba(217,106,42,0.6);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Animated glass wave for header */
@keyframes hdr-wave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hdr-main {
  max-width: 100%;
  margin: 0;
  border-radius: 0 0 24px 24px;  /* bottom of pill */
  overflow: visible;              /* mega-menu must overflow */
  padding: 8px 24px 12px;
  background: rgba(255,255,255,0.97);
  display: grid;
  grid-template-columns: auto 1fr minmax(160px,240px) auto;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--accent);
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; width: 6px; height: 6px;
  border: 1px solid var(--accent-2);
}
.brand-mark::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brand-mark::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--accent); }
.brand-txt i {
  font-style: normal; font-family: var(--mono); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em;
  color: var(--accent-2); margin-left: 4px;
}
.brand-txt b, .brand-txt i { display: inline; }
.brand-txt em {
  font-style: normal; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--muted-2); margin-top: 4px;
}

/* ── Desktop navigation ── */
.nav { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
/* Remove old .nav a rules — replaced by .nav-link in mega-menu header */
.nav a:not(.nav-link):not(.nav-sale) {
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  border: 1px solid transparent;
  transition: all .15s;
}
.nav a:not(.nav-link):not(.nav-sale):hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
/* Old dot classes — no longer rendered but keep for compat */
.nav-auto::before, .nav-radio::before, .nav-home::before { content: none; }
.nav-sep {
  width: 1px; height: 16px; background: var(--line-2);
  margin: 0 6px; flex-shrink: 0;
}

.search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  width: 100%;
  min-width: 0;
}
.search:focus-within { border-color: var(--accent); color: var(--text); background: #fff; }
.search input {
  flex: 1; background: none; border: 0; outline: 0; font-size: 12.5px;
  color: var(--text);
}
.search input::placeholder { color: var(--muted-2); }
.search kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 2px 6px; border: 1px solid var(--line-2); color: var(--muted);
  background: #fff;
}

.hdr-actions { display: flex; gap: 4px; align-items: center; }
.ic-btn {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--text);
  transition: all .15s;
  border-radius: 50%;
  flex-shrink: 0;
}
.ic-btn.cart-btn { border-radius: 999px; width: auto; padding: 0 10px; gap: 6px; }
.ic-btn:hover { color: var(--accent); border-color: var(--accent); }
.ic-btn > span:not(.cart-count):not(.bc-icn) {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-family: var(--mono); font-size: 9.5px;
  background: var(--accent-2); color: #fff;
  display: grid; place-items: center; border-radius: 10px;
}
.cart-btn { width: auto; padding: 0 12px 0 10px; gap: 8px; background: var(--accent); color: #fff; border-color: var(--accent); }
body.home .cart-btn { border-radius: 999px; }
.cart-btn:hover { background: var(--accent-dim); color: #fff; }
.cart-btn em {
  font-style: normal; font-family: var(--mono); font-size: 12px;
  color: #fff; font-weight: 700;
}
.cart-btn .cart-count {
  position: static; background: var(--accent-2); color: #fff;
  padding: 2px 6px; font-family: var(--mono); font-size: 10px; font-weight: 700;
}

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   SHOP / CATEGORY — indigo/slate redesign
   ======================================================= */
body.woocommerce-shop .eg-p-card,
body.tax-product_cat .eg-p-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
body.woocommerce-shop .eg-p-badge,
body.tax-product_cat .eg-p-badge {
  border-radius: 999px;
}
body.woocommerce-shop .eg-p-add,
body.tax-product_cat .eg-p-add {
  border-radius: 0 0 0 14px;
}
body.woocommerce-shop .eg-p-detail,
body.tax-product_cat .eg-p-detail {
  border-radius: 0 0 14px 0;
}
body.woocommerce-shop .products .product,
body.tax-product_cat .products .product {
  border-radius: 14px;
  overflow: hidden !important;
  background: var(--surface);
  border: 1px solid var(--line);
}
body.woocommerce-shop .product-wrapper,
body.tax-product_cat .product-wrapper {
  display: none !important;
}
body.woocommerce-shop .wd-loop-footer,
body.tax-product_cat .wd-loop-footer,
body.woocommerce-shop .woocommerce-pagination,
body.tax-product_cat .woocommerce-pagination {
  border-radius: 12px;
}
body.woocommerce-shop .woocommerce-pagination .page-numbers,
body.tax-product_cat .woocommerce-pagination .page-numbers {
  border-radius: 8px;
}
/* Sidebar filters */
body.woocommerce-shop .widget-area .widget,
body.tax-product_cat .widget-area .widget {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface);
}
body.woocommerce-shop .widget_product_categories ul li a,
body.tax-product_cat .widget_product_categories ul li a {
  border-radius: 8px;
}

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   CART — indigo/slate redesign
   ======================================================= */
body.eg-cart-page .cart_totals,
body.woocommerce-cart .cart_totals,
body.eg-cart-page .cart-collaterals {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
}
body.eg-cart-page .shop_table,
body.woocommerce-cart .shop_table {
  border-radius: 12px;
  overflow: hidden !important;
  border: 1px solid var(--line);
}
body.eg-cart-page .checkout-button,
body.woocommerce-cart .checkout-button,
body.eg-cart-page .wc-proceed-to-checkout .button {
  background: var(--accent) !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body.eg-cart-page .checkout-button:hover,
body.woocommerce-cart .checkout-button:hover {
  background: var(--accent-dim) !important;
}
body.eg-cart-page .coupon .input-text,
body.woocommerce-cart .coupon .input-text {
  border-radius: 10px;
  border-color: var(--line-2);
}
body.eg-cart-page .coupon .button,
body.woocommerce-cart .coupon .button {
  border-radius: 10px;
  background: var(--accent-2);
  border: none;
}
body.eg-cart-page .quantity input,
body.woocommerce-cart .quantity input {
  border-radius: 8px;
  border-color: var(--line-2);
}

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   SINGLE PRODUCT — indigo/slate redesign
   ======================================================= */
body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery__image {
  border-radius: 16px;
}
body.single-product .woocommerce-product-gallery__wrapper {
  border-radius: 16px;
  overflow: hidden !important;
}
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
  background: var(--accent) !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body.single-product .single_add_to_cart_button:hover {
  background: var(--accent-dim) !important;
}
body.single-product .variations select,
body.single-product .variations .reset_variations {
  border-radius: 10px;
  border-color: var(--line-2);
}
body.single-product .quantity input {
  border-radius: 10px;
  border-color: var(--line-2);
}
body.single-product .product_meta,
body.single-product .woocommerce-tabs {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px;
}
body.single-product .related.products .product {
  border-radius: 14px;
  overflow: hidden !important;
}
body.single-product .onsale,
body.single-product .woocommerce-badge {
  border-radius: 999px !important;
  background: var(--accent-2) !important;
}
body.single-product .stock.in-stock {
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(79,70,229,0.08);
  color: var(--accent);
  font-family: var(--mono);
}

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   CRUMB
   ======================================================= */
.crumb {
  position: relative; z-index: 5;
  max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
}
.crumb-id { color: var(--accent-2); letter-spacing: 0.1em; font-weight: 700; }
.crumb-path {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  flex: 1;
}
.crumb-path a:hover { color: var(--accent); }
.crumb-path span:last-child { color: var(--text); font-weight: 600; }
.crumb-path svg { opacity: 0.4; }
.crumb-nav { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.crumb-nav button:hover { color: var(--accent); }
.crumb-nav .sep { width: 1px; height: 12px; background: var(--line-2); }

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   MAIN — PRODUCT PAGE LEFT
   ======================================================= */
.main {
  position: relative; z-index: 5;
  max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: 92px 1fr; gap: 16px; }
.g-rail { display: flex; flex-direction: column; gap: 8px; }
.thumb {
  position: relative;
  width: 92px; height: 92px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden !important;
  transition: border-color .15s;
}
.thumb:hover { border-color: var(--line-2); }
.thumb.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent),
              0 0 0 3px rgba(29,63,179,0.12);
}
.thumb .th-idx {
  position: absolute; top: 4px; left: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--muted);
}
.thumb.on .th-idx { color: var(--accent); }

.g-video {
  margin-top: 4px;
  height: 92px;
  border: 1px dashed var(--line-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em;
  background: #fff;
}
.g-video:hover { color: var(--accent); border-color: var(--accent); }

.g-main {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  background: #fff;
  overflow: hidden !important;
}
.g-badges {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
}
.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; padding: 5px 9px;
}
.b-new { background: var(--accent-2); color: #fff; }
.b-stock { border: 1px solid var(--accent); color: var(--accent); background: #fff; }

.g-meta {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.g-meta span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10.5px;
  color: var(--accent);
}
.g-meta em { font-style: normal; color: var(--text); }

.zoom-btn {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  transition: all .15s;
}
.zoom-btn:hover {
  background: var(--accent-dim);
}

.g-ticks {
  position: absolute; bottom: 16px; left: 16px; z-index: 3;
  display: flex; gap: 4px;
}
.g-ticks span {
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--muted);
}

.g-coords {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--muted-2);
}

.ph {
  position: relative; width: 100%; height: 100%;
  background: #f6f1e7;
}
.ph-main { aspect-ratio: 1; }
.ph svg { display: block; width: 100%; height: 100%; }

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   INFO (right)
   ======================================================= */
.info { display: flex; flex-direction: column; gap: 22px; }

.i-top { display: flex; justify-content: space-between; align-items: center; }
.i-rating { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; }
.i-rating .stars { display: inline-flex; gap: 1px; color: var(--line-2); }
.i-rating .stars .on { color: var(--accent-2); }
.i-rating b { color: var(--text); }
.i-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.i-rating a:hover { color: var(--accent); }
.i-rating .sep { width: 1px; height: 12px; background: var(--line-2); }

.i-share { display: flex; gap: 6px; }
.i-share button {
  padding: 6px 10px; border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted);
  background: #fff;
}
.i-share button:hover { color: var(--accent); border-color: var(--accent); }

.i-title {
  margin: 0;
  font-size: 30px; line-height: 1.15; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.i-model {
  display: block;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent-2);
  margin-bottom: 10px;
}

.i-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.i-tags span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text);
}
.i-tags span svg { color: var(--accent); }

.i-stock {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: var(--mono); font-size: 11px;
  border-left: 3px solid var(--accent);
}
.stock-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2ea043;
  box-shadow: 0 0 8px rgba(46,160,67,0.4);
  animation: pulse 2s ease-in-out infinite;
}
.stock-main { color: #1f7a36; font-weight: 700; letter-spacing: 0.12em; }
.stock-sub { color: var(--muted); }
.stock-sub b { color: var(--text); }
.stock-code { margin-left: auto; color: var(--muted-2); letter-spacing: 0.1em; }

/* ---------- Variants ---------- */
.variants { display: flex; flex-direction: column; gap: 14px; }
.var-row { display: flex; flex-direction: column; gap: 8px; }
.var-head { display: flex; justify-content: space-between; align-items: baseline; }
.var-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; color: var(--muted); }
.var-val { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; }

.var-opts.power { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.var-opt {
  position: relative;
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  transition: all .15s;
}
.var-opt b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); }
.var-opt em { font-style: normal; display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.var-opt:hover { border-color: var(--line-2); }
.var-opt.on {
  border-color: var(--accent);
  background: rgba(29,63,179,0.04);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.var-opt.on b { color: var(--accent); }
.var-opt .pop {
  position: absolute; top: -8px; right: 8px;
  padding: 2px 6px; background: var(--accent-2); color: #fff;
  font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.1em; font-weight: 700;
}

.var-opts.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-opt {
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--mono); font-size: 11.5px;
  transition: all .15s;
}
.chip-opt:hover { border-color: var(--line-2); }
.chip-opt.on {
  border-color: var(--accent); color: var(--accent);
  background: rgba(29,63,179,0.06);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.chip-more {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); margin-left: 4px; cursor: pointer;
}
.chip-more:hover { color: var(--accent); }

/* ---------- Price ---------- */
.price-block {
  padding: 18px 18px 16px;
  border: 1px solid var(--line-2);
  background: #fff;
  position: relative;
  border-top: 3px solid var(--accent);
}
.price-main { display: flex; align-items: baseline; gap: 18px; }
.price-amt {
  font-family: var(--mono); font-weight: 700;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent);
}
.price-amt sup { font-size: 22px; margin-left: 4px; top: -0.35em; color: var(--accent-2); }
.price-side { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 12px; }
.price-old { color: var(--muted); text-decoration: line-through; }
.price-save {
  color: #fff; background: var(--accent-2); padding: 2px 6px; font-weight: 700; letter-spacing: 0.08em;
}
.price-extra {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.price-extra b { color: var(--text); }
.price-extra .bonus b { color: var(--accent-2); }

/* ---------- CTAs ---------- */
.cta-row { display: flex; gap: 10px; }
.qty {
  display: flex; align-items: center;
  border: 1px solid var(--line-2);
  background: #fff;
}
.qty button {
  width: 44px; height: 56px; display: grid; place-items: center;
  color: var(--muted);
}
.qty button:hover { color: var(--accent); }
.qty input {
  width: 44px; height: 56px; text-align: center;
  background: none; border: 0; outline: 0;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

.btn-cart {
  position: relative; flex: 1;
  height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 0 18px 0 20px;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em;
  overflow: hidden !important;
  transition: transform .08s, box-shadow .15s;
  box-shadow: 0 6px 16px rgba(217,106,42,0.35);
}
.btn-cart:hover {
  background: #c25e22;
  box-shadow: 0 10px 22px rgba(217,106,42,0.45);
}
.btn-cart:active { transform: translateY(1px); }
.btn-cart .bc-icn { display: inline-grid; place-items: center; }
.btn-cart .bc-main { font-size: 15px; text-align: left; }
.btn-cart .bc-sub { font-size: 10.5px; opacity: 0.8; text-align: right; letter-spacing: 0.08em; }
.btn-cart .bc-flare {
  position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: flare 3.5s ease-in-out infinite;
}
@keyframes flare { 0%, 100% { left: -30%; } 60%, 100% { left: 130%; } }

.btn-cart::before, .btn-cart::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1px solid rgba(255,255,255,0.5);
}
.btn-cart::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.btn-cart::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* ---------- 1-click ---------- */
.oneclick {
  padding: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  position: relative;
}
.oc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.oc-idx { font-family: var(--mono); font-size: 10.5px; color: var(--accent-2); letter-spacing: 0.15em; font-weight: 700; }
.oc-title { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.oc-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: auto; }

.oc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.oc-input {
  display: flex; align-items: center;
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 0 14px;
  height: 50px;
  transition: border-color .15s;
}
.oc-input:focus-within { border-color: var(--accent); }
.oc-flag { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-right: 12px; border-right: 1px solid var(--line); margin-right: 12px; }
.oc-input input {
  flex: 1; background: none; border: 0; outline: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em;
}
.oc-input input::placeholder { color: var(--muted-2); }
.oc-status {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.1em;
}
.oc-status .ok {
  color: var(--accent); display: inline-flex; align-items: center; gap: 4px;
}

.btn-1click {
  height: 50px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em;
  transition: all .15s;
}
.btn-1click:hover {
  background: var(--accent); color: #fff;
}

.oc-agree {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.oc-agree input { accent-color: var(--accent); }
.oc-agree a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Trust ---------- */
.trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}
.trust > div {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
}
.trust > div:last-child { border-right: 0; }
.trust > div > span:first-child {
  grid-row: span 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--accent);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.trust b { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; }
.trust em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }

.wd-page-wrapper { background: transparent !important; }
/* =======================================================
   TABS
   ======================================================= */
.tabs {
  position: relative; z-index: 5;
  max-width: 1600px; margin: 32px auto 0;
  padding: 0 32px;
}
.tab-head {
  display: flex; align-items: stretch; gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.tab {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  color: var(--muted);
  position: relative;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab-n { font-size: 10px; letter-spacing: 0.15em; color: var(--muted-2); }
.tab-t { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; }
.tab-c {
  font-size: 10px; padding: 2px 6px;
  border: 1px solid var(--line-2);
}
.tab.on { color: var(--accent); }
.tab.on .tab-n { color: var(--accent-2); }
.tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.tab-spacer { flex: 1; border-right: 1px solid var(--line); }
.tab-print {
  padding: 18px 22px; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
}
.tab-print:hover { color: var(--accent); }

.tab-body { padding: 32px 0 48px; }

/* ---------- Description ---------- */
.desc { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; }
.desc-main h3 {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent-2); margin: 0 0 14px;
}
.desc-main p { color: var(--muted); margin: 0 0 14px; max-width: 56ch; }
.desc-main p b { color: var(--text); }
.desc-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.desc-list li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px;
}
.desc-list li span { color: var(--accent); }

.desc-side {
  border: 1px solid var(--line-2); padding: 20px;
  background: #fff;
}
.pk-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent-2); margin-bottom: 14px; font-weight: 700; }
.pk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-list li {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline;
  font-family: var(--mono); font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.pk-list li:last-child { border-bottom: 0; }
.pk-list li b { color: var(--accent); font-weight: 700; }
.pk-list li em { font-style: normal; color: var(--muted); font-size: 11px; }

.pk-foot {
  display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
}
.pk-foot span { color: var(--muted); }
.pk-foot b { color: var(--text); text-align: right; }

/* ---------- Spec ---------- */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); background: #fff; }
.sp-group { padding: 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-group:nth-child(even) { border-right: 0; }
.sp-group:nth-last-child(-n+2) { border-bottom: 0; }
.sp-g { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent-2); margin-bottom: 14px; font-weight: 700; }
.sp-group dl { margin: 0; display: flex; flex-direction: column; }
.sp-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono); font-size: 12px;
}
.sp-row:last-child { border-bottom: 0; }
.sp-row dt { color: var(--muted); margin: 0; }
.sp-row dd { margin: 0; color: var(--text); text-align: right; }

/* ---------- Reviews ---------- */
.rev { display: grid; grid-template-columns: 280px 1fr; gap: 32px; }
.rev-sum {
  padding: 20px; border: 1px solid var(--line-2);
  background: #fff;
  display: flex; flex-direction: column; gap: 16px;
  align-self: start;
}
.rev-score { text-align: center; }
.rev-score .big {
  font-family: var(--mono); font-weight: 700;
  font-size: 56px; line-height: 1; color: var(--accent);
}
.rev-score .big sup { font-size: 22px; color: var(--muted); }
.rev-score .stars { display: inline-flex; gap: 2px; margin: 10px 0 4px; color: var(--line-2); }
.rev-score .stars .on { color: var(--accent-2); }
.rev-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.rev-bars { display: flex; flex-direction: column; gap: 6px; }
.bar { display: grid; grid-template-columns: 28px 1fr 32px; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bar .track { height: 4px; background: var(--bg-1); border: 1px solid var(--line); position: relative; }
.bar .track div { position: absolute; inset: 0 auto 0 0; background: var(--accent-2); }
.bar .bn { text-align: right; }

.rev-btn {
  padding: 10px 14px; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
  background: #fff;
}
.rev-btn:hover { background: var(--accent); color: #fff; }

.rev-list { display: flex; flex-direction: column; gap: 16px; }
.rv { padding: 20px; border: 1px solid var(--line); background: #fff; }
.rv header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rv-who { display: flex; align-items: center; gap: 10px; }
.rv-av {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.rv-who b { font-family: var(--mono); font-size: 12.5px; display: block; }
.rv-who em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rv-rate { display: flex; gap: 1px; color: var(--line-2); }
.rv-rate .on { color: var(--accent-2); }
.rv p { margin: 0 0 12px; color: var(--text); max-width: 70ch; }
.rv footer { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rv-tag { padding: 3px 8px; border: 1px solid var(--line); color: var(--muted); }
.rv footer .sp { flex: 1; }
.rv footer button { color: var(--muted); }
.rv footer button:hover { color: var(--accent); }

/* ---------- QA ---------- */
.qa { display: flex; flex-direction: column; gap: 10px; }
.qa details {
  border: 1px solid var(--line); background: #fff; padding: 16px 18px;
}
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .qi { font-size: 10.5px; color: var(--accent-2); letter-spacing: 0.15em; font-weight: 700; }
.qa .qc { margin-left: auto; color: var(--muted); transition: transform .15s; }
.qa details[open] .qc { transform: rotate(90deg); color: var(--accent); }
.qa p { color: var(--muted); margin: 10px 0 0; padding-left: 32px; max-width: 70ch; }

/* ---------- Docs ---------- */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  transition: all .15s;
  cursor: pointer;
}
.doc:hover { border-color: var(--accent); }
.doc .d-icn {
  grid-row: span 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.doc b { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.doc em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.doc .d-dl { grid-row: span 2; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.doc:hover .d-dl { color: var(--accent); }

/* ---------- Footer strip ---------- */
.fstrip {
  position: relative; z-index: 5;
  max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important;
  padding: 18px 32px;
  display: flex; align-items: center; gap: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--muted);
  background: #fff;
}
.fstrip .sp { flex: 1; }

/* ---------- Responsive safety ---------- */
@media (max-width: 1200px) {
  .main { grid-template-columns: 1fr; }
  .desc, .rev { grid-template-columns: 1fr; }
  .spec, .docs { grid-template-columns: 1fr; }
  .sp-group { border-right: 0 !important; }
  .nav { display: none; }
  .search { min-width: 220px; }
}

/* ============ HEADER MOBILE BURGER + DRAWER (shared) ============ */
.hdr-burger {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--text);
}
.hdr-burger:hover { color: var(--accent); border-color: var(--accent); }

.m-menu-bg {
  position: fixed; inset: 0;
  background: rgba(10,14,22,0.55);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.m-menu-bg.on { opacity: 1; pointer-events: auto; z-index: 1999 !important; }
.m-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 86vw; max-width: 360px;
  z-index: 101;
  background: var(--bg);
  border-right: 2px solid var(--accent);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.m-menu.on {
  z-index: 2000 !important; transform: translateX(0); }
.m-menu-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.m-menu-h span b { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--accent); }
.m-menu-h span i { font-style: normal; font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--accent-2); }
.m-menu-h button {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: #fff;
}
.m-menu-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line-2);
}
.m-menu-search span { color: var(--muted); display: inline-flex; }
.m-menu-search input {
  flex: 1; padding: 10px 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 13.5px;
}
.m-menu-list { list-style: none; margin: 0; padding: 8px 0; }
.m-menu-list li.sep {
  height: 1px; background: var(--line-2); margin: 8px 18px;
}
.m-menu-list li a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--text);
  border-left: 3px solid transparent;
  transition: all .12s;
}
.m-menu-list li a:hover, .m-menu-list li a:active {
  background: #fff;
  border-left-color: var(--accent);
  color: var(--accent);
}
.mml-n {
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  color: var(--accent-2); letter-spacing: 0.18em;
  width: 28px;
  flex-shrink: 0;
  text-align: left;
}
.m-menu-list li a span:nth-child(2):not(.mml-n) {
  /* category name text */
  flex: 1;
}
.m-menu-list li a em {
  font-style: normal; margin-left: auto;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-2);
  flex-shrink: 0;
}
.m-menu-list li a svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.m-menu-list li a .mml-n + svg { display: none; }
/* Icon-colored links (promotions, catalog) */
.m-menu-list li a:has(svg:first-child) {
  gap: 10px;
}
.m-menu-list li a:has(svg:first-child) svg {
  color: var(--accent);
}
.m-menu-phone { color: var(--accent-2) !important; font-size: 16px !important; }
.m-menu-phone svg { color: var(--accent-2) !important; }
/* =========================================
   MOBILE CATEGORY BAR (below header, ≤768px)
   ========================================= */
/* =========================================
   HIDE ON MOBILE (used for desktop-only elements)
   ========================================= */
@media (max-width: 768px) { .hide-m { display: none !important; } }
@media (min-width: 769px) { .hide-m { display: revert; } }

/* =========================================
   TABLET (≤1100px) — categories hide, search adapts
   ========================================= */
@media (max-width: 1100px) {
  .nav { display: none !important; }
}

/* =========================================
   MOBILE (≤768px) — full mobile header
   ========================================= */
@media (max-width: 768px) {
  .strip-inner { padding: 5px 14px; gap: 10px; font-size: 9px; letter-spacing: 0.04em; }
  .strip-inner > span:nth-child(n+3) { display: none; }

  .hdr-burger { display: grid; }
  .nav { display: none !important; }
  .hide-m { display: none !important; }

  .hdr-main {
    padding: 8px 14px !important;
    gap: 10px !important;
    grid-template-columns: auto 1fr auto !important;
  }
  .brand-mark { width: 32px; height: 32px; }
  .brand-txt b, .brand-txt i { font-size: 13px; }
  .brand-txt em { display: none; }
  .brand { flex-shrink: 0; }
  .brand .brand-mark { border-radius: 50%; }
  .brand .brand-mark svg { width: 22px; height: 22px; }

  /* BURGER + BRAND-MARK: full circle on mobile */
  .hdr-burger,
  body.home .hdr-burger,
  body.eg-cart-page .hdr-burger {
    border-radius: 50% !important;
  }
  .brand-mark { border-radius: 50% !important; }
  .search { display: none !important; min-width: 0 !important; }
  .ic-btn:not(.cart-btn) { display: none; }
  .cart-btn { padding: 0 8px !important; height: 32px !important; min-width: 40px; }
  .cart-btn em { display: none; }
  .cart-btn svg { width: 16px; height: 16px; }
  .cart-btn .cart-count { min-width: 16px; height: 16px; font-size: 9px; line-height: 16px; padding: 0 4px; }

  /* Crumb */
  .crumb {
    padding: 10px 14px !important;
    flex-wrap: wrap; gap: 8px;
    font-size: 10px;
  }
  .crumb-nav { display: none; }
  .crumb-path { font-size: 10.5px; }

  /* Product page layout */
  .main { padding: 16px !important; gap: 24px; }
  .gallery { grid-template-columns: 1fr !important; }
  .g-rail { display: none; }

  /* Info column */
  .i-top { flex-wrap: wrap; gap: 10px; }
  .i-share { display: none; }
  .i-title { font-size: 22px !important; }
  .i-model { font-size: 11px !important; }
  .i-tags { gap: 4px; }
  .i-tags span { font-size: 9.5px; padding: 4px 8px; }
  .var-opts.power { grid-template-columns: 1fr 1fr; }
  .price-amt { font-size: 32px !important; }
  .price-amt sup { font-size: 16px !important; }
  .price-extra { flex-direction: column; gap: 6px; }
  .cta-row { flex-direction: column; gap: 8px; }
  .qty { width: 100%; justify-content: space-between; }
  .qty input { flex: 1; }
  .btn-cart {
    width: 100%;
    grid-template-columns: auto 1fr !important;
    height: 52px;
  }
  .btn-cart .bc-sub { display: none; }
  .trust { grid-template-columns: 1fr; }
  .trust > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .trust > div:last-child { border-bottom: 0; }

  /* Tabs */
  .tabs { padding: 0 14px; margin-top: 18px; }
  .tab-head { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tab-head::-webkit-scrollbar { display: none; }
  .tab { padding: 14px 16px; flex-shrink: 0; }
  .tab-spacer, .tab-print { display: none; }
  .tab-c { display: none; }
  .tab-body { padding: 18px 0 28px; }
  .desc, .rev, .docs { grid-template-columns: 1fr !important; gap: 18px !important; }
  .desc-side, .pk-foot { font-size: 11px; }
  .spec { grid-template-columns: 1fr !important; }
  .sp-group { padding: 14px 16px; border-right: 0 !important; }

  /* OneClick + Reviews */
  .oc-row { grid-template-columns: 1fr; gap: 10px; }
  .btn-1click { width: 100%; justify-content: center; height: 46px; }
  .rev { grid-template-columns: 1fr; gap: 18px; }
  .rev-sum { padding: 16px; }
  .rev-score .big { font-size: 42px; }
  .rv { padding: 14px; }
  .rv header { flex-wrap: wrap; gap: 8px; }
  .rv p { font-size: 13px; }

  /* Footer strip */
  .fstrip {
    padding: 14px 14px !important;
    flex-wrap: wrap; gap: 10px 16px;
    font-size: 9.5px;
  }
  .fstrip .sp { display: none; }
}

/* Very small (≤420px) */
@media (max-width: 420px) {
  .i-title { font-size: 20px !important; }
  .price-amt { font-size: 28px !important; }
  .var-opts.power { grid-template-columns: 1fr; }
  .tab-body { padding: 14px 0 24px; }
}
/* ============ HOME PAGE ONLY — indigo/slate redesign ============ */
body.home {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,70,229,0.06), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(245,158,11,0.05), transparent 60%),
    linear-gradient(180deg, #f1f5f9 0%, #eef1f5 50%, #e9edf2 100%) !important;
  background-attachment: fixed;
}

/* Home header overrides */
body.home .hdr-strip { background: #0f172a; border-bottom-color: #1e293b; }
body.home .hdr-strip .dot { background: var(--accent-2); box-shadow: 0 0 8px rgba(245,158,11,0.55); }

body.home .hdr-main { background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(217,106,42,0.04), rgba(79,70,229,0.02), rgba(217,106,42,0.06), rgba(79,70,229,0.04)), rgba(255, 255, 255, 0.65) !important; border-radius: 0 0 24px 24px; overflow: hidden !important; }

/* Home glow utility override */
body.home .glow-y { filter: drop-shadow(0 0 calc(6px * var(--glow)) rgba(79,70,229,0.40)); }

/* Home header — band background override */
body.home .band { background: var(--accent); border-color: var(--accent-dim); }

/* Home sticky pnav — slate backdrop */
body.home .pnav { background: rgba(248,250,252,0.92); }

/* ============ HOME (NEW: was Categories) ============ */
.cat-page { position: relative; z-index: 5; max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important; padding: 0 32px; }

/* ============ HERO ============ */
.cp-hero { padding: 48px 0 36px; border-bottom: 1px solid var(--line); }
.cp-h-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--muted);
}
.cp-h-kicker .hk-n { color: var(--accent-2); font-weight: 700; }
.cp-h-kicker .hk-sep { flex: 1; height: 1px; background: var(--line-2); max-width: 200px; }
.cp-h-kicker .hk-live { display: inline-flex; align-items: center; gap: 8px; }
.cp-h-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 8px rgba(217,106,42,0.5);
  animation: pulse 2.2s ease-in-out infinite;
}
.cp-h-title {
  margin: 24px 0 18px;
  font-family: var(--mono); font-weight: 800;
  font-size: 64px; line-height: 1; letter-spacing: -0.03em;
  color: var(--text); text-wrap: balance;
}
.cp-h-title em {
  font-style: normal; color: var(--accent); position: relative;
}
.cp-h-title em::after {
  content: "_"; color: var(--accent);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.cp-h-lead {
  margin: 0; color: var(--muted); max-width: 64ch;
  font-size: 14.5px; line-height: 1.55;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin-top: 28px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.hero-stats > div { padding: 10px 0; }
.hero-stats b {
  display: block; font-family: var(--mono); font-weight: 800;
  font-size: 26px; color: var(--text); letter-spacing: -0.02em;
}
.hero-stats b sup { font-size: 13px; color: var(--accent-2); }
.hero-stats em {
  font-style: normal; display: block;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.12em; margin-top: 4px;
}

/* ============ PILLAR NAV (sticky) ============ */
.pnav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 8;
  background: rgba(246,241,231,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pnav-l {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  background: #fff;
  transition: all .15s;
}
body.home .pnav-l { border-radius: 12px; }
body.home .pnav-l:hover {
  box-shadow: 0 8px 18px rgba(79,70,229,0.10);
}
.pnav-l:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(29,63,179,0.12);
  transform: translateY(-1px);
}
.pnav-l.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 10px 22px rgba(29,63,179,0.16);
}
.pnav-l.on::before {
  content: ""; position: absolute; top: 0; left: 0;
  height: 3px; width: 100%; background: var(--accent);
}
.pn-n { font-family: var(--mono); font-size: 11px; font-weight: 700;
        color: var(--accent-2); letter-spacing: 0.18em; }
.pn-icn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--accent); background: var(--surface-2);
  flex-shrink: 0;
}
.pnav-l.on .pn-icn { border-color: var(--accent); background: var(--accent); color: #fff; }
.pn-body { flex: 1; min-width: 0; }
.pn-body b {
  display: block; font-family: var(--mono); font-size: 14px; font-weight: 800;
  color: var(--text); white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.pn-body em {
  font-style: normal; display: block;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  margin-top: 3px; letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;
}
.pn-hot {
  position: absolute; top: -7px; right: 12px;
  padding: 3px 8px; background: var(--accent-2); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
}

/* ============ BAND ============ */
.band {
  margin-top: 24px;
  overflow: hidden !important;
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  background: var(--accent); color: #fff;
  padding: 12px 0;
}
.band-track { display: flex; width: max-content; animation: scroll 38s linear infinite; }
.band-group {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
  white-space: nowrap;
}
.band-group span:nth-child(2n) { color: rgba(255,255,255,0.55); }
@keyframes scroll { to { transform: translateX(-33.333%); } }

/* ============ PILLAR BLOCKS ============ */
.pblocks { display: flex; flex-direction: column; }
.pblock {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 140px;
}
.pblock:last-child { border-bottom: 0; }
.pblock-radio {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(217,106,42,0.06), transparent 70%);
}

.pb-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px;
  align-items: end;
  padding-bottom: 24px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.pb-n {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--accent-2); letter-spacing: 0.2em;
}
.pb-head h2 {
  margin: 10px 0 6px;
  font-family: var(--mono); font-size: 42px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
}
.pb-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch; line-height: 1.55; }
.pb-right { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pb-stat { text-align: right; }
.pb-stat b {
  display: block; font-family: var(--mono); font-size: 24px; font-weight: 800;
  color: var(--accent); letter-spacing: -0.01em;
}
.pb-stat em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.14em;
}
.pb-hot {
  padding: 6px 10px; background: var(--accent-2); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
  box-shadow: 0 4px 10px rgba(217,106,42,0.25);
}

.pb-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); background: #fff;
}
body.home .pb-grid { border-radius: 18px; overflow: hidden !important; }
.pgrp {
  padding: 20px 20px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: #fff;
  transition: background .12s;
}
.pgrp:last-child { border-right: 0; }
.pgrp:hover { background: var(--surface-2); }
.pg-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.pg-n { font-family: var(--mono); font-size: 10.5px; color: var(--accent-2);
        letter-spacing: 0.15em; font-weight: 700; }
.pg-head h3 {
  margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em; color: var(--text);
}
.pg-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.pgrp ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.pgrp li a {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 10px;
  padding: 7px 0;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text);
  border-bottom: 1px dashed transparent;
  transition: all .1s;
}
.pgrp li a:hover { color: var(--accent); border-bottom-color: rgba(29,63,179,0.25); }
.pgi-count { color: var(--muted-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pgi-arr { color: var(--muted-2); }
.pgrp li a:hover .pgi-arr { color: var(--accent-2); }
.pg-more {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  color: var(--accent); letter-spacing: 0.12em; cursor: pointer;
}
.pg-more:hover { color: var(--accent-2); }

.pb-cta {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: #fff; border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: 0.16em;
  transition: all .15s;
}
body.home .pb-cta { border-radius: 12px; }
.pb-cta:hover {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 18px rgba(29,63,179,0.28);
}

/* ============ SECTION HEAD (reused) ============ */
.sh {
  display: flex; align-items: baseline; gap: 18px;
  padding: 48px 0 22px;
}
.sh-n { font-family: var(--mono); font-size: 11px; font-weight: 800;
        color: var(--accent-2); letter-spacing: 0.2em; }
.sh h2 {
  margin: 0;
  font-family: var(--mono); font-size: 26px; font-weight: 800;
  letter-spacing: 0.04em; color: var(--text);
}
.sh-bar { flex: 1; height: 1px; background: var(--line-2); max-width: 240px; align-self: center; }
.sh-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.1em; }
.sh-cta {
  font-family: var(--mono); font-size: 11.5px; font-weight: 800;
  color: var(--accent); letter-spacing: 0.14em;
  padding: 8px 12px; border: 1px solid var(--accent); background: #fff;
}
.sh-cta:hover { background: var(--accent); color: #fff; }

/* ============ FEATURED ============ */
.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.pc {
  position: relative;
  border: 1px solid var(--line-2);
  background: #fff;
  display: flex; flex-direction: column;
  transition: all .25s;
  overflow: hidden !important;
}
/* Home: rounded cards + soft shadows */
body.home .pc {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pc:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(29,63,179,0.12);
  transform: translateY(-2px);
}
body.home .pc:hover {
  border-color: var(--bg-1);
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
  transform: translateY(-3px);
}
.pc-media {
  position: relative; aspect-ratio: 16/11; overflow: hidden !important;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
body.home .pc-media { border-radius: 16px 16px 0 0; }
.pc-media svg { width: 100%; height: 100%; display: block; }
.pc-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
}
body.home .pc-tag { border-radius: 999px; }
body.home .pn-hot { border-radius: 999px; }
.pc-tag.hot { background: var(--accent-2); color: #fff; }
.pc-tag.new { background: var(--accent); color: #fff; }
.pc-tag.off { background: var(--text); color: #fff; }
.pc-cat {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 7px;
  background: #fff; border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
}
.pc-cat-auto  { color: var(--accent-2); }
.pc-cat-radio { color: var(--accent); }
.pc-cat-home  { color: var(--text); }

.pc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-top { display: flex; justify-content: space-between; align-items: center; }
.pc-model { font-family: var(--mono); font-size: 10.5px; font-weight: 800;
            color: var(--accent-2); letter-spacing: 0.14em; }
.pc-rate { display: inline-flex; align-items: center; gap: 4px;
           font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pc-rate svg { color: var(--accent-2); }
.pc-rate em { font-style: normal; }
.pc-title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3;
            min-height: 2.6em; color: var(--text); }
.pc-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
}
.pc-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-price b { font-family: var(--mono); font-weight: 800; font-size: 20px; color: var(--accent); }
.pc-price b sup { font-size: 12px; color: var(--accent-2); }
.pc-old { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-decoration: line-through; }
.pc-cart {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 8px;
  transition: all .15s;
}
body.home .pc-cart {
  border-radius: 50%;
}
body.home .pc-cart:hover {
  background: var(--accent-dim);
  transform: scale(1.08);
}

/* ============ BRANDS ============ */
.brands-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--line); background: #fff;
}
.brand-cell {
  position: relative; padding: 22px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: background .15s;
}
.brand-cell:nth-child(6n) { border-right: 0; }
.brand-cell:nth-last-child(-n+6) { border-bottom: 0; }
.brand-cell:hover { background: var(--surface-2); }
.bc-k { font-family: var(--mono); font-size: 18px; font-weight: 800; letter-spacing: 0.06em; color: var(--text); }
.brand-cell:hover .bc-k { color: var(--accent); }
.bc-d { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.12em; }
.bc-p {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--accent-2);
}

/* ============ WHY US ============ */
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); background: #fff;
}
body.home .why-grid { border-radius: 12px; overflow: hidden !important; }
.why-cell {
  padding: 24px 22px;
  border-right: 1px solid var(--line);
}
.why-cell:last-child { border-right: 0; }
.wy-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.wy-n { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--accent-2); letter-spacing: 0.2em; }
.wy-ic {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent);
  background: var(--surface-2);
}
.why-cell h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--text); }
.why-cell p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ============ FOOT CTA ============ */
.cp-foot-cta {
  margin: 56px 0 32px;
  padding: 32px 36px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  border: 1px solid var(--line-2);
  background: radial-gradient(circle at top right, rgba(217,106,42,0.08), transparent 50%), #fff;
  position: relative;
}
.cp-foot-cta::before, .cp-foot-cta::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 1px solid var(--accent-2);
}
.cp-foot-cta::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cp-foot-cta::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.cfc-n { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--accent-2); letter-spacing: 0.2em; }
.cp-foot-cta h3 { margin: 10px 0 6px; font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--text); }
.cp-foot-cta p { margin: 0; color: var(--muted); max-width: 56ch; font-size: 13.5px; line-height: 1.55; }
.cfc-ctas { display: flex; gap: 10px; }
.cfc-p, .cfc-s {
  padding: 14px 20px;
  font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
  cursor: pointer;
}
.cfc-p {
  background: var(--accent); color: #fff;
  display: inline-flex; gap: 10px; align-items: center;
  box-shadow: 0 8px 18px rgba(29,63,179,0.30);
}
.cfc-p:hover { background: var(--accent-dim); }
.cfc-s { border: 1px solid var(--line-2); background: #fff; color: var(--text); }
.cfc-s:hover { border-color: var(--accent); color: var(--accent); }

/* ============ FOOTER ============ */
.foot {
  position: relative; z-index: 5;
  margin-top: 0;
  border-top: 3px solid var(--accent);
  background: var(--text); color: #f6f1e7;
}
.foot-top {
  max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important; padding: 48px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.f-brand { max-width: 340px; }
.f-b-txt b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.f-b-txt b i { font-style: normal; color: var(--accent-2); }
.f-b-txt em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(246,241,231,0.5); }
.f-brand p { margin: 18px 0 0; color: rgba(246,241,231,0.65); font-size: 12.5px; line-height: 1.55; }
.f-col h5 {
  margin: 0 0 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; color: var(--accent-2);
}
.f-col a {
  display: block; padding: 6px 0;
  font-family: var(--mono); font-size: 12.5px; color: rgba(246,241,231,0.7);
}
.f-col a:hover { color: #fff; }
.f-phone { color: var(--accent-2) !important; font-weight: 800 !important; font-size: 15px !important; }
.f-soc { display: flex; gap: 6px; margin-top: 14px; }
.f-soc a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(246,241,231,0.2); color: rgba(246,241,231,0.7);
  font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  padding: 0 !important;
}
.f-soc a:hover { color: var(--accent-2); border-color: var(--accent-2); }
body.home .f-soc a { border-radius: 50%; }
body.home .f-soc a:hover { color: #fff; border-color: var(--accent); }
.foot-bot {
  max-width: 1600px; margin: 0 auto; border-radius: 0 0 24px 24px; overflow: hidden !important; padding: 16px 32px;
  border-top: 1px solid rgba(246,241,231,0.1);
  display: flex; align-items: center; gap: 20px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: rgba(246,241,231,0.55);
}
.foot-bot .sp { flex: 1; }

/* ============ HEADER MOBILE BURGER ============ */
.hdr-burger {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--text);
}
.hdr-burger:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================
   MOBILE DRAWER (for all non-home pages, uses header.php)
   ========================================= */
.mob-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 86vw; max-width: 360px;
  z-index: 101;
  background: #fff;
  border-right: 2px solid var(--accent);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mob-drawer.open { transform: translateX(0); }
.mob-overlay {
  position: fixed; inset: 0;
  background: rgba(10,14,22,0.55);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.mob-overlay.show { opacity: 1; pointer-events: auto; }
.mob-drawer-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
}
.mob-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.mob-drawer-logo b { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--accent); }
.mob-drawer-logo i { font-style: normal; font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--accent-2); }
.mob-drawer-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: #fff; cursor: pointer;
}
.mob-nav {
  padding: 8px 0;
}
.mob-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--text);
  border-left: 3px solid transparent;
  transition: all .12s;
  text-decoration: none;
}
.mob-nav a:hover, .mob-nav a:active {
  background: #fff;
  border-left-color: var(--accent);
  color: var(--accent);
}
.mob-nav a svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}
.mob-nav a.sale svg { color: var(--accent-2); }
.mob-nav a.sale:hover { color: var(--accent-2); }
.mob-drawer-search {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.mob-drawer-search form {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
}
.mob-drawer-search form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(29,63,179,0.08);
}
.mob-drawer-search form svg { color: var(--muted); flex-shrink: 0; }
.mob-drawer-search form input {
  flex: 1;
  border: 0; outline: 0;
  font-family: var(--mono); font-size: 13.5px;
  background: transparent;
}
.mob-drawer-contacts {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mob-drawer-contacts a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--accent-2);
}
.mob-drawer-contacts a:last-child { color: var(--accent); }

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

/* Tablet */
@media (max-width: 1100px) {
  .cat-page { padding: 0 22px; }
  .cp-h-title { font-size: 46px; }
  .pnav { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .pblock { padding: 36px 0; }
  .pb-head { grid-template-columns: 1fr; gap: 16px; }
  .pb-head h2 { font-size: 32px; }
  .pb-right { justify-content: flex-start; }
  .pb-grid { grid-template-columns: 1fr 1fr; }
  .pgrp:nth-child(2n) { border-right: 0; }
  .pgrp:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-cell:nth-child(6n) { border-right: 1px solid var(--line); }
  .brand-cell:nth-child(3n) { border-right: 0; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-cell { border-bottom: 1px solid var(--line); }
  .why-cell:nth-child(2n) { border-right: 0; }
  .why-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .cp-foot-cta { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Планшет: header — ховаємо nav, показуємо бургер */
  .nav { display: none !important; }
  .hdr-burger { display: grid; }
  .hdr-main {
    grid-template-columns: auto auto 1fr auto !important;
    padding: 12px 22px !important;
    gap: 12px !important;
  }
  .search { min-width: 0 !important; max-width: 240px; }
  .brand-txt em { font-size: 9px; letter-spacing: 0.06em; }
}

/* Mobile (≤720px) */
@media (max-width: 720px) {
  .cat-page { padding: 0 16px; }

  /* Global content padding — prevent edge sticking */
  main, .main, .eg-home, .cat-page, .eg-sp-wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* Header — collapse to brand + burger + cart */
  .hdr-burger { display: grid; }
  .nav { display: none !important; }
  .search { display: none !important; }
  .hdr-strip { font-size: 9.5px; letter-spacing: 0.08em; }
  .strip-inner { padding: 6px 16px; gap: 10px; }
  .strip-inner .hide-m { display: none; }
  .hdr-main {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    align-items: center;
  }
  .brand-mark { width: 36px; height: 36px; }
  .brand-txt b, .brand-txt i { font-size: 15px; }
  .brand-txt em { display: none; }
  .hide-m { display: none !important; }
  .cart-btn { padding: 0 10px !important; }
  .ic-btn { width: 40px; height: 40px; }

  /* Hero */
  .cp-hero { padding: 24px 0 20px; }
  .cp-h-kicker { font-size: 9.5px; gap: 8px; flex-wrap: wrap; }
  .cp-h-kicker .hk-sep { max-width: 60px; }
  .cp-h-title { font-size: 36px; margin: 18px 0 14px; }
  .cp-h-lead { font-size: 13px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 18px; }
  .hero-stats > div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-top: 0;
  }
  .hero-stats > div:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .hero-stats > div:nth-child(odd) { border-right: 0; }
  .hero-stats b { font-size: 22px; }

  /* Pillar nav */
  .pnav-l { padding: 12px 14px; gap: 10px; }
  .pn-icn { width: 36px; height: 36px; }
  .pn-body b { font-size: 13px; }

  /* ФЛАГМАН badge: keep inside parent, tight top-right corner */
  .pnav-l { overflow: visible !important; }
  .pn-hot { top: 0; right: 0; border-radius: 0 11px 0 8px; font-size: 9px; padding: 4px 10px; }
  .pn-body em { font-size: 9.5px; }

  /* Pillar block */
  .pblock { padding: 24px 0; }
  .pb-head { padding-bottom: 18px; margin-bottom: 18px; }
  .pb-head h2 { font-size: 24px; }
  .pb-head p { font-size: 13px; }
  .pb-right { gap: 16px; }
  .pb-stat b { font-size: 20px; }
  .pb-grid { grid-template-columns: 1fr; }
  .pgrp { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .pgrp:last-child { border-bottom: 0; }
  .pb-cta { width: 100%; justify-content: center; padding: 16px; font-size: 11.5px; }

  /* Sections */
  .sh {
    padding: 28px 0 16px;
    flex-wrap: wrap; gap: 10px;
  }
  .sh-bar { display: none; }
  .sh h2 { font-size: 18px; }
  .sh-cta { margin-left: auto; }

  /* Featured */
  .feat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pc-body { padding: 10px 12px 12px; gap: 6px; }
  .pc-title { font-size: 12.5px; min-height: 2.4em; }
  .pc-price b { font-size: 17px; }
  .pc-old { font-size: 10.5px; }
  .pc-cart { width: 32px; height: 32px; }

  /* Brands */
  .brands-grid { grid-template-columns: 1fr 1fr; }
  .brand-cell:nth-child(6n), .brand-cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .brand-cell:nth-child(2n) { border-right: 0; }
  .brand-cell:last-child { border-bottom: 0; }

  /* Why us */
  .why-grid { grid-template-columns: 1fr; }
  .why-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .why-cell:last-child { border-bottom: 0; }

  /* Foot CTA */
  .cp-foot-cta { padding: 24px 20px; margin: 32px 0 24px; }
  .cp-foot-cta h3 { font-size: 20px; }
  .cfc-ctas { flex-direction: column; width: 100%; }
  .cfc-p, .cfc-s { width: 100%; justify-content: center; text-align: center; padding: 14px; }

  /* Footer */
  .foot-top { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  .f-brand { max-width: none; }
  .foot-bot { padding: 14px 20px; flex-wrap: wrap; gap: 10px 16px; font-size: 9.5px; }
  .foot-bot .sp { display: none; }

  /* Band */
  .band-group { font-size: 11px; gap: 18px; padding-right: 18px; }
}

/* Large phone (≤540px) — fills gap between 421–539px */
@media (max-width: 540px) {
  .cat-page { padding: 0 14px; }
  .cp-h-title { font-size: 34px; }
  .hero-stats b { font-size: 20px; }
  .hero-stats em { font-size: 10.5px; }
  /* pb-grid → 1 колонка */
  .pb-grid { grid-template-columns: 1fr !important; }
  .pgrp:nth-child(2n) { border-bottom: 1px solid var(--line) !important; }
  /* brands → 2 колонки */
  .brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .brand-cell:nth-child(3n) { border-right: 1px solid var(--line) !important; }
  .brand-cell:nth-child(2n) { border-right: 0 !important; }
  /* featured → 1 колонка */
  .feat-grid { grid-template-columns: 1fr !important; gap: 6px; }
  /* footer → 1 колонка */
  .foot-top { grid-template-columns: 1fr !important; gap: 24px; padding: 28px 14px; }
  .foot-bot { padding: 12px 14px; }
  /* section header */
  .sh { padding: 24px 0 14px; }
  .pb-head { padding-bottom: 16px; margin-bottom: 16px; }
}

/* Small (≤420px) */
@media (max-width: 420px) {
  .cp-h-title { font-size: 30px; }
  .pb-head h2 { font-size: 20px; }
  .feat-grid { gap: 6px; }
  .pc-title { font-size: 11.5px; }
  .pc-price b { font-size: 15px; }
}

/* Very small phone (≤360px) — Samsung Galaxy S-серія, маленькі Android */
@media (max-width: 360px) {
  .cat-page { padding: 0 12px; }
  .brand-txt b, .brand-txt i { font-size: 13px; }
  .brand-txt em { display: none !important; }
  .cp-h-title { font-size: 26px; }
  .cp-h-lead { font-size: 12px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats b { font-size: 18px; }
  .hero-stats em { font-size: 9.5px; }
  .pb-head h2 { font-size: 18px; }
  .pgi-name { font-size: 12px; }
  .pc-title { font-size: 11px; }
  .pc-price b { font-size: 14px !important; }
  .pc-old { font-size: 10px; }
  .band-group { font-size: 10px; gap: 14px; }
  .pn-body b { font-size: 12px; }
  .pn-body em { font-size: 9px; }
  .f-col h5 { font-size: 11px; }
  .f-col a { font-size: 12.5px; }
  .foot-top { padding: 24px 12px; }
  .foot-bot { font-size: 9px; padding: 12px; }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   DESKTOP HEADER — compact pill container (≥1025px)
   ============================================================ */
@media (min-width: 1025px) {
  .hdr {
    max-width: 1200px !important;
    margin: 12px auto !important;
    border-radius: 24px !important;
    overflow: visible !important;
    position: sticky !important;
    top: 12px !important;
    z-index: 999 !important;
  }
  .hdr-strip {
    /* border-radius inherited from parent .hdr */
  }
  .hdr-main {
    max-width: none !important;
  }

  /* Push body content down to account for floating header */
  body.home .cp-hero,
  body.woocommerce-shop .wd-content-layout,
  body.tax-product_cat .wd-content-layout,
  body.single-product .eg-sp-wrap {
    margin-top: 0;
  }

  /* Close button in mobile menu — not in desktop header, keep hidden */
  .m-menu .hdr-burger { display: none !important; }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   HEADER SHAPES — unified border-radius 12px
   Overrides: .search input, .ic-btn, .brand-mark
   ============================================================ */
.search,
.search input,
.m-menu-search input {
  border-radius: 12px !important;
}

/* Action buttons — was circle(50%)/pill(999px) → soft square 12px */
.ic-btn {
  border-radius: 12px !important;
}

/* Brand icon — was 0px → soft square */
.brand-mark {
  border-radius: 12px !important;
}

/* Burger button — keep round on mobile only (mobile rule overrides this) */
@media (min-width: 721px) {
  .hdr-burger {
    border-radius: 12px !important;
  }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   HEADER — default top:0 sticky (consistent all widths)
   ============================================================ */
@media (max-width: 1024px) {
  .hdr {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.1) !important;
  }

  .hdr-strip {
    border-radius: 0 !important;
  }
  .hdr-main {
    border-radius: 0 !important;
  }

  .pnav {
    position: static !important;
  }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   MOBILE — Category alignment + Stats rounding (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Category blocks: center the 3-direction grid */
  .pblock {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pb-grid {
    justify-content: center !important;
    justify-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Stats table — rounded card */
  .hero-stats {
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   DESKTOP GRID SYNC — header + content same width (≥1024px)
   .hdr = max-width:1200px; width:calc(100% - 24px); margin:12px auto
   Content containers must match exactly
   ============================================================ */
@media (min-width: 1024px) {
  /* Global WoodMart page wrapper */
  .wd-page-wrapper {
    max-width: 1200px !important;
    width: calc(100% - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }



  /* Single product wrapper */
  .eg-sp-wrap {
    max-width: 1200px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Catalog page */
  .cat-page {
    max-width: 1200px !important;
    width: calc(100% - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Home: main is inside .hdr — auto width fills hdr-main grid */
  main {
    max-width: 1200px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cart — content is inside .hdr via page-cart.php */
  body.eg-cart-page .eg-crumb-inner,
  body.eg-cart-page .eg-shop-page {
    max-width: 1200px !important;
    width: calc(100% - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   HELP CARD + FOOTER ROUNDING
   ============================================================ */

/* Help card container */
.cp-foot-cta {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Help card buttons */
.cfc-p,
.cfc-s {
  border-radius: 12px !important;
}

/* Footer — round top corners only */
.foot {
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   HERO SECTION — two-column layout (desktop only)
   ============================================================ */
@media (min-width: 1025px) {
  .custom-hero-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
  }

  .custom-hero-content {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .custom-hero-image-wrap {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .custom-hero-image-wrap img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   HEADER COMPACT — all pages consistent (≤1100px nav hidden)
   ============================================================ */
@media (max-width: 1100px) {
  .nav { display: none !important; }
  .hdr-actions { gap: 2px; }
}

/* Ensure logo never squishes */
.brand { flex-shrink: 0; }
.brand-mark { flex-shrink: 0; }
.brand-txt { flex-shrink: 0; white-space: nowrap; }

/* Wishlist button clickable */
.ic-btn[title="Обране"]:hover { color: #e11d48; border-color: #e11d48; }

/* Header actions gap consistency */
.hdr-actions { gap: 6px; }

/* Keep cart count badge visible on all pages */
.cart-btn .cart-count { min-width: 18px; }

/* Wedge sticky header for WooCommerce page wrapper */
body .wd-page-wrapper { padding-top: 12px !important; }

/* Fix hdr-burger z-index on all pages */
.hdr-burger { z-index: 1; }

.wd-page-wrapper { background: transparent !important; }
/* ============================================================
   CATEGORY FILTERS — mobile bottom sheet
/* ===== SUB-CATEGORY CHIPS ===== */
.eg-subcat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px 0; padding: 0;
}
.eg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.eg-chip:hover { border-color: var(--accent); color: var(--accent); }
.eg-chip.active {
  background: #4F46E5; color: #fff; border-color: #4F46E5;
}
.eg-chip.active:hover { opacity: 0.9; }
.eg-chip-cnt {
  font-size: 11px; opacity: 0.6;
}
.eg-chip.active .eg-chip-cnt { opacity: 0.85; }

@media (max-width: 768px) {
  .eg-subcat-chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 -16px 16px; padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .eg-subcat-chips::-webkit-scrollbar { display: none; }
  .eg-chip { flex-shrink: 0; font-size: 14px; padding: 10px 20px; }
}

   ============================================================ */
.eg-filter-bar {
  position: sticky;
  top: 100px;
  z-index: 50;
  background: #4F46E5;
  border-radius: 14px;
  padding: 12px 20px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(79,70,229,0.25);
}
@media (min-width: 769px) {
  .eg-filter-bar { display: none; }
}

/* Filter hint pulse animation */
@keyframes eg-filter-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(79,70,229,0), 0 0 16px 4px rgba(79,70,229,0.3); }
}

.eg-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.eg-filter-btn.eg-filter-hint {
  animation: eg-filter-glow 2.2s ease-in-out infinite;
}
.eg-filter-btn:active {
  background: rgba(255,255,255,0.25);
  transform: scale(0.95);
}

.eg-filter-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ========== FILTER BOTTOM SHEET ========== */
.eg-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
.eg-filter-overlay.on {
  opacity: 1;
  visibility: visible;
}

.eg-filter-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 80vh;
  z-index: 999;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
.eg-filter-sheet.on {
  transform: translateY(0);
}

.eg-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.eg-filter-header h3 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.eg-filter-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  transition: color 0.15s;
}
.eg-filter-close:hover { color: var(--text); }
.eg-filter-close svg { width: 20px; height: 20px; }

.eg-filter-body {
  padding: 18px 20px;
  flex: 1;
  overflow-y: auto;
}

.eg-filter-group {
  margin-bottom: 22px;
}
.eg-filter-group:last-child { margin-bottom: 0; }

.eg-filter-group h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

/* Price range */
.eg-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eg-price-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  background: #f8f9fc;
  outline: none;
  transition: border-color 0.15s;
}
.eg-price-row input:focus {
  border-color: var(--accent);
}
.eg-price-row span {
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
}

/* Checkbox list */
.eg-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eg-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.eg-checkbox-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.eg-checkbox-list .count {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}

/* Filter footer */
.eg-filter-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px 24px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.eg-filter-footer button {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.eg-filter-reset {
  background: #f8f9fc;
  color: var(--text);
  border: 1px solid var(--line) !important;
}
.eg-filter-reset:active {
  background: #eee;
}
.eg-filter-apply {
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}
.eg-filter-apply:active {
  opacity: 0.9;
}

/* Round filter sheet itself */
.eg-filter-sheet {
  border-radius: 20px 20px 0 0 !important;
}

/* =======================================================
   MOBILE CATEGORY TABS + CARD GRID
   @media (max-width: 767px) ONLY — never affects desktop
   ======================================================= */

/* Hide mobile cat block on desktop (belt-and-suspenders) */
.eg-mobile-cats { display: none; }

@media (max-width: 767px) {

  .eg-mobile-cats {
    display: block !important;
  }

  /* Tab row */
  .eg-cat-tabs {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 0 2px 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .eg-cat-tabs::-webkit-scrollbar { display: none !important; }

  .eg-cat-tab {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #fff !important;
    color: #64748b !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .eg-cat-tab.active {
    background: #eef2ff !important;
    border-color: #4f46e5 !important;
    color: #4f46e5 !important;
  }

  .eg-cat-tab:active {
    transform: scale(0.96) !important;
  }

  /* Subcategory card grid */
  .eg-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 8px 0 12px !important;
  }

  .eg-cat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    padding: 10px 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
  }

  .eg-cat-card:active {
    transform: scale(0.96) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
  }

  .eg-cat-card-img {
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
  }

  .eg-cat-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }

  .eg-cat-card-img svg {
    opacity: 0.5 !important;
  }

  .eg-cat-name {
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  .eg-cat-count {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
    line-height: 1 !important;
  }

  /* Show All / Collapse button */
  .eg-cat-show-all {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    background: none !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    color: #64748b !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin-bottom: 12px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .eg-cat-show-all:active {
    background: #f1f5f9 !important;
    border-color: #4f46e5 !important;
    color: #4f46e5 !important;
  }

} /* end @media (max-width: 767px) */

/* =======================================================
   DESKTOP: category cards & menu elements border-radius
   (mobile overrides below in @media queries)
   ======================================================= */
.eg-cat-card { border-radius: 16px; }
.eg-cat-card-img { border-radius: 12px; overflow: hidden; }
.eg-cat-card-img img { border-radius: 12px; }
.eg-menu-back-btn { border-radius: 10px; }
.eg-menu-subcat-title { border-radius: 8px; }
.eg-menu-subcat-all { border-radius: 8px; }
.eg-menu-subcat-grid { border-radius: 12px; }

/* =======================================================
   MOBILE MENU SUB-CATEGORY PANELS
   @media (max-width: 767px) ONLY
   ======================================================= */

/* Default: hide subcat panels and show main menu on desktop */
.eg-menu-subcat-panel { display: none; }
.m-menu-parent-btn { cursor: pointer; }

@media (max-width: 767px) {

  /* Parent category button in menu list */
  .m-menu-parent-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: none !important;
    border: none !important;
    color: #0f172a !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .m-menu-parent-btn .mml-n {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    min-width: 24px !important;
  }

  .m-menu-parent-btn em {
    font-style: normal !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-left: auto !important;
    font-family: 'JetBrains Mono', monospace !important;
  }

  .m-menu-parent-btn .mml-arr {
    font-size: 12px !important;
    color: #cbd5e1 !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
  }

  .m-menu-parent-btn:active {
    background: #f1f5f9 !important;
    border-radius: 12px !important;
  }

  /* Subcategory panel — slides in from right, fixed to cover menu */
  .eg-menu-subcat-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 86vw !important;
    max-width: 360px !important;
    background: #fff !important;
    z-index: 2001 !important;
    overflow-y: auto !important;
    padding: 8px 16px 80px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    transform: translateX(-100%) !important;
    border-right: 2px solid var(--accent) !important;
  }

  .eg-menu-subcat-panel.on {
    transform: translateX(0) !important;
  }

  /* Back button */
  .eg-menu-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #4f46e5 !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    margin: 4px 0 8px !important;
  }

  .eg-menu-back-btn svg {
    flex-shrink: 0 !important;
  }

  .eg-menu-back-btn:active {
    opacity: 0.7 !important;
  }

  /* Subcat title with "all" link */
  .eg-menu-subcat-title {
    margin: 4px 0 12px !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 6px 10px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
  }

  .eg-menu-subcat-title a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    text-decoration: none !important;
  }

  .eg-menu-subcat-all {
    font-size: 12px !important;
    color: #4f46e5 !important;
    font-weight: 600 !important;
    margin-left: auto !important;
    padding: 4px 10px !important;
    background: #eef2ff !important;
    border-radius: 8px !important;
  }

  /* Subcat card grid — same as filter */
  .eg-menu-subcat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  /* Reuse eg-cat-card, eg-cat-card-img, eg-cat-name, eg-cat-count from filter styles above */

  /* ===== PRODUCT GRID: 2 columns on mobile ===== */
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  ul.products > li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ul.products > li.product .product-wrapper,
  ul.products > li.product .wd-product {
    width: 100% !important;
  }

  ul.products > li.product .wd-entities-title {
    font-size: 13px !important;
  }

  ul.products > li.product .price {
    font-size: 13px !important;
  }

  /* ===== NEW PRODUCT CARD STYLE (mobile redesign) ===== */
  ul.products > li.product {
    padding: 0 !important;
    margin: 0 !important;
  }

  .eg-p-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(15,23,42,0.08) !important;
    border: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Badge — pill shape, position top-left */
  .eg-p-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    font-family: var(--mono) !important;
    z-index: 2 !important;
  }

  .eg-p-badge.eg-badge-sale,
  .eg-p-badge.eg-badge-hit {
    background: #4f46e5 !important;
    color: #ffffff !important;
  }

  .eg-p-badge.eg-badge-new {
    background: #f59e0b !important;
    color: #ffffff !important;
  }

  /* Wishlist icon — top-right */
  .eg-p-wishlist {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    padding: 0 !important;
    transition: color 0.2s, border-color 0.2s, transform 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .eg-p-wishlist:active {
    transform: scale(0.9) !important;
  }

  .eg-p-wishlist.active {
    color: #ef4444 !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
  }

  /* Image — square, contained */
  .eg-p-image {
    aspect-ratio: 1 !important;
    background: #ffffff !important;
    padding: 12px !important;
  }

  .eg-p-img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Body padding */
  .eg-p-body {
    padding: 0 12px 8px !important;
    gap: 2px !important;
  }

  /* Title */
  .eg-p-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .eg-p-title a {
    color: #0f172a !important;
    text-decoration: none !important;
  }

  /* Categories */
  .eg-p-cats {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Price */
  .eg-p-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    margin: 4px 0 !important;
  }

  .eg-p-price-curr {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #4f46e5 !important;
  }

  .eg-p-price-old {
    font-size: 12px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
    display: inline !important;
  }

  /* Stock */
  .eg-p-stock {
    margin: 2px 0 !important;
  }

  .eg-p-stock-in {
    font-size: 11px !important;
    color: #059669 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .eg-p-stock-out {
    font-size: 11px !important;
    color: #ef4444 !important;
  }

  /* Actions — cart icon + detail button */
  .eg-p-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 0 12px 12px !important;
    border-top: none !important;
    margin-top: auto !important;
  }

  .eg-p-add {
    width: 40px !important;
    height: 40px !important;
    flex: none !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    color: #4f46e5 !important;
    padding: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    transition: background 0.15s, border-color 0.15s !important;
  }

  .eg-p-add:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
  }

  .eg-p-add:active {
    transform: scale(0.93) !important;
  }

  .eg-p-detail {
    flex: 1 !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    border-left: 1.5px solid #e2e8f0 !important;
    white-space: nowrap !important;
  }

  .eg-p-detail:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4f46e5 !important;
  }

  .eg-p-detail:active {
    transform: scale(0.97) !important;
  }

} /* end @media (max-width: 767px) for menu subcats */



/* =======================================================
   DESKTOP MEGA-MENU  (≥1101px)
   ======================================================= */

/* Nav item wrapper — needed for dropdown positioning */
.nav-item {
  position: relative;
}

/* Dot indicator before each nav category */
.nav-cat-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}
.nav-dot-auto  { background: var(--accent-2); }
.nav-dot-radio { background: var(--accent); }
.nav-dot-home  { background: var(--text); }

/* Nav link (replaces old .nav a styles; keep compat) */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
  border-radius: 6px;
}
.nav-link:hover,
.nav-item:hover > .nav-link {
  color: var(--accent);
  background: rgba(29,63,179,.04);
}
.nav-sale.nav-link { color: var(--accent-2) !important; font-weight: 700 !important; }

/* ── Mega dropdown ── */
.nav-mega {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 480px;
  max-width: 680px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  z-index: 200;
  overflow: hidden;
  pointer-events: auto;
}

/* Keep dropdown visible when hovering it */
.nav-item:hover > .nav-mega,
.nav-mega:hover {
  display: block;
}

/* Inner padding */
.nav-mega-inner {
  padding: 18px 18px 0;
}

/* Grid of subcategory cards */
.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.nav-mega-grid::-webkit-scrollbar { width: 4px; }
.nav-mega-grid::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

/* Single subcategory card */
.nav-mega-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition: all .13s;
  gap: 6px;
}
.nav-mega-card:hover {
  background: rgba(29,63,179,.06);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29,63,179,.12);
}

/* Card image slot */
.nav-mega-img {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
}
.nav-mega-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Card text */
.nav-mega-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-mega-cnt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted-2);
  font-weight: 500;
}

/* Mega footer link */
.nav-mega-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.nav-mega-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  transition: gap .15s;
}
.nav-mega-all:hover { gap: 10px; }

/* Hide mega on mobile (nav itself is already hidden) */
@media (max-width: 1100px) {
  .nav-mega { display: none !important; }
}


/* =======================================================
   CATALOG — archive-product.php
   Single clean block. Desktop + Mobile.
   ======================================================= */

/* ── Cat strip: hidden (nav handles category switching) ── */
.eg-cat-strip { display: none !important; }

/* ─────────────────────────────────────────────────────────
   LAYOUT  (Desktop: sidebar 260px + main)
───────────────────────────────────────────────────────── */
.eg-archive-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/* ─────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────── */
.eg-archive-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
  /* iOS glass */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius: 16px;
  padding: 16px 14px;
  align-self: start;
}
.eg-archive-sidebar::-webkit-scrollbar { width: 3px; }
.eg-archive-sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

/* Sidebar header */
.eg-filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.eg-filter-title {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.eg-filter-close {
  display: none;
  width: 28px; height: 28px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.eg-filter-close:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* Filter badge */
.eg-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent-2);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 999px;
}

/* Filter sections */
.eg-filter-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.eg-filter-section:first-of-type { margin-top: 8px; border-top: none; }
.eg-fh {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 7px;
  display: block;
}

/* Subcategory chips */
.eg-subcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.eg-scat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all .12s;
  line-height: 1.4;
}
.eg-scat-chip:hover { border-color: var(--accent); color: var(--accent); }
.eg-scat-chip.on  { border-color: var(--accent); background: var(--accent); color: #fff; }
.eg-scat-chip.on .eg-scat-cnt { background: rgba(255,255,255,.25); color: #fff; }
.eg-scat-img { width: 14px; height: 14px; flex-shrink: 0; overflow: hidden; border-radius: 2px; display: flex; }
.eg-scat-img img { width: 14px; height: 14px; object-fit: contain; }
.eg-scat-cnt { font-size: 8px; background: var(--bg); color: var(--muted-2); border-radius: 999px; padding: 0 4px; font-weight: 700; }

/* Checkboxes */
.eg-check-list { display: flex; flex-direction: column; gap: 1px; }
.eg-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  user-select: none;
}
.eg-check-row:hover .eg-chk-label { color: var(--accent); }
.eg-chk { display: none; }
.eg-chk-box {
  width: 15px; height: 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: all .12s;
}
.eg-chk:checked + .eg-chk-box { background: var(--accent); border-color: var(--accent); }
.eg-chk:checked + .eg-chk-box::after {
  content: "";
  position: absolute;
  top: 2px; left: 4px;
  width: 5px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.eg-chk-label { flex: 1; }
.eg-chk-cnt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted-2);
  background: var(--bg);
  border-radius: 999px;
  padding: 0 5px;
  font-weight: 700;
}

/* Price */
.eg-price-row { display: flex; align-items: flex-end; gap: 6px; }
.eg-price-field { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.eg-price-field label { font-family: var(--mono); font-size: 8px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }
.eg-price-field input {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
  transition: border-color .12s;
}
.eg-price-field input:focus { border-color: var(--accent); }
.eg-price-dash { color: var(--muted-2); font-size: 12px; flex-shrink: 0; padding-bottom: 6px; }

/* Attribute accordion */
.eg-attr-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  gap: 5px;
}
.eg-attr-toggle .eg-fh { margin: 0; flex: 1; text-align: left; }
.eg-attr-badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.eg-toggle-arr { flex-shrink: 0; color: var(--muted-2); transition: transform .2s; }
.eg-attr-opts { display: none; margin-top: 6px; }
.eg-attr-opts.open { display: block; }

/* Filter actions */
.eg-filter-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.eg-filter-apply {
  flex: 2;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .12em;
  padding: 11px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .14s;
}
.eg-filter-apply:hover { background: var(--accent-dim); }
.eg-filter-reset {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .08em;
  padding: 11px;
  border: 1.5px solid var(--line-2);
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .12s;
}
.eg-filter-reset:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* ─────────────────────────────────────────────────────────
   MAIN COLUMN
───────────────────────────────────────────────────────── */
.eg-archive-main { min-width: 0; }

.eg-archive-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}
.eg-archive-title {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin: 0;
  letter-spacing: -.02em;
}
.eg-archive-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eg-archive-count { font-family: var(--sans); font-size: 11px; color: var(--muted-2); }

.woocommerce-ordering select {
  padding: 7px 10px;
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  background: #fff;
  outline: none;
  cursor: pointer;
}

/* Mobile filter button — hidden on desktop */
.eg-mob-filter-btn { display: none; }

/* Active filter tags */
.eg-active-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.eg-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(29,63,179,.07);
  border: 1px solid rgba(29,63,179,.2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
}
.eg-tag-rm { color: var(--muted-2); text-decoration: none; font-size: 11px; margin-left: 2px; }
.eg-tag-rm:hover { color: var(--accent-2); }
.eg-clear-all {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  border: 1px solid rgba(217,106,42,.3);
  border-radius: 999px;
  transition: all .12s;
}
.eg-clear-all:hover { background: var(--accent-2); color: #fff; }

/* Products grid */
.eg-archive-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.eg-archive-main ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Pagination */
.woocommerce-pagination { margin-top: 24px; text-align: center; }
.woocommerce-pagination .page-numbers { display: inline-flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.woocommerce-pagination .page-numbers li .page-numbers {
  font-family: var(--mono);
  font-size: 10px;
  padding: 6px 11px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
  color: var(--muted);
  transition: all .13s;
  display: flex;
  align-items: center;
}
.woocommerce-pagination .page-numbers li .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Empty state */
.eg-empty-state { padding: 48px 0; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.eg-empty-state p { font-size: 14px; }
.eg-empty-state a { color: var(--accent); text-decoration: underline; }

/* Mob badge on filter button */
.eg-mob-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  border-radius: 999px;
  margin-left: 2px;
}

/* WoodMart overrides on catalog */
body.tax-product_cat .eg-archive-main ul.products,
body.woocommerce-shop .eg-archive-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  float: none !important; width: 100% !important;
}
body.tax-product_cat .eg-archive-main ul.products li.product,
body.woocommerce-shop .eg-archive-main ul.products li.product {
  float: none !important; width: 100% !important; margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   MOBILE  ≤ 1024px: sidebar becomes a drawer
───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Single column layout */
  .eg-archive-wrap {
    grid-template-columns: 1fr;
    padding: 16px 12px 80px;
    gap: 0;
  }

  /* Show mobile filter button */
  .eg-mob-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #fff;
    border: 1.5px solid var(--line-2);
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text);
    cursor: pointer;
    text-transform: uppercase;
    transition: all .12s;
  }
  .eg-mob-filter-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Sidebar → full-screen overlay drawer */
  .eg-archive-sidebar {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 360px;
    height: 100%;
    max-height: 100%;
    border-radius: 0 24px 24px 0;
    top: 0;
    left: 0;
    transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 2000;
    overflow-y: auto;
    padding: 0;
    /* iOS glass drawer */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-right: 1px solid rgba(255,255,255,.6);
    box-shadow: 8px 0 48px rgba(0,0,0,.18), inset -1px 0 0 rgba(255,255,255,.5);
    display: flex;
    flex-direction: column;
  }
  .eg-archive-sidebar.open { transform: translateX(0); }

  /* Inner content inside drawer */
  .eg-archive-sidebar > .eg-filter-head {
    padding: 18px 18px 12px;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .eg-archive-sidebar > .eg-filter-form {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px 0;
    -webkit-overflow-scrolling: touch;
  }

  /* Show close button */
  .eg-filter-close { display: flex !important; }

  /* Dark overlay behind drawer */
  .eg-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.35);
    z-index: 1999;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
  }
  .eg-filter-overlay.open { display: block; }

  /* Sticky action buttons at bottom of drawer */
  .eg-filter-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin: 0 -18px;
    padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 14px);
    border-top: 1.5px solid var(--line);
    border-radius: 0;
    z-index: 3;
    flex-shrink: 0;
  }
  .eg-filter-apply, .eg-filter-reset { padding: 13px !important; font-size: 10px !important; }

  /* Subcategory chips — 3 per row on mobile */
  .eg-subcat-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .eg-scat-chip {
    border-radius: 10px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 4px;
    border-width: 1.5px;
  }
  .eg-scat-img { width: 28px; height: 28px; border-radius: 6px; background: var(--bg); }
  .eg-scat-img img { width: 28px; height: 28px; }
  .eg-scat-cnt { font-size: 8px; }

  /* Checkboxes */
  .eg-check-row { padding: 6px 0; font-size: 13px; }
  .eg-chk-box { width: 18px; height: 18px; border-radius: 5px; }
  .eg-chk:checked + .eg-chk-box::after { top: 2px; left: 5px; width: 6px; height: 9px; }

  /* Price fields bigger on mobile */
  .eg-price-field input { padding: 10px 10px; font-size: 14px; }
  .eg-price-field label { font-size: 9px; }

  /* Title */
  .eg-filter-title { font-size: 12px; }
}

/* 2-col products tablet */
@media (max-width: 860px) {
  .eg-archive-main ul.products { grid-template-columns: repeat(2,1fr) !important; }
  body.tax-product_cat .eg-archive-main ul.products { grid-template-columns: repeat(2,1fr) !important; }
}

/* 1-col or 2-col products phone */
@media (max-width: 480px) {
  .eg-archive-wrap { padding: 12px 10px 80px; }
  .eg-archive-top { margin-bottom: 12px; }
  .eg-archive-title { font-size: 16px; }
  .eg-archive-main ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  body.tax-product_cat .eg-archive-main ul.products { grid-template-columns: repeat(2,1fr) !important; }
  .eg-archive-sidebar { max-width: 100%; border-radius: 0; }
  .eg-subcat-chips { grid-template-columns: repeat(2, 1fr); }
}



/* =======================================================
   SUBCATEGORY CARDS — main area grid (content-product-cat.php)
   ======================================================= */

/* Override WooCommerce list to grid */
.eg-archive-main ul.products:has(.eg-cat-card-item),
.eg-archive-main ul.products:not(:has(.product:not(.product-category))) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
.eg-cat-card-item { list-style: none !important; }

/* Card */
.eg-subcat-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow .15s, border-color .15s, transform .15s;
  height: 100%;
}
.eg-subcat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(29,63,179,.1);
  transform: translateY(-2px);
}

/* Image area */
.eg-subcat-card-img {
  width: 100%;
  aspect-ratio: 5/3;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eg-subcat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
}

/* Body */
.eg-subcat-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.eg-subcat-card.no-img .eg-subcat-card-body {
  padding: 14px 14px 14px;
  justify-content: center;
  min-height: 64px;
}
.eg-subcat-card-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
}
.eg-subcat-card.no-img .eg-subcat-card-name {
  font-size: 14px;
}
.eg-subcat-card-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted-2);
  font-weight: 600;
}

@media (max-width: 768px) {
  .eg-archive-main ul.products:has(.eg-cat-card-item) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .eg-subcat-card-name { font-size: 12px; }
  .eg-subcat-card-body { padding: 8px 10px 10px; }
}

@media (max-width: 420px) {
  .eg-subcat-card-name { font-size: 11px; }
}

/* =======================================================
   MOBILE LAYOUT — final clean overrides
   ======================================================= */

/* Body padding for bottom nav */
@media (max-width: 1024px) {
  body:not(.home) { padding-bottom: 70px !important; }
}

/* Archive title smaller on mobile */
@media (max-width: 600px) {
  .eg-archive-title { font-size: 15px !important; }
  .eg-archive-count { font-size: 10px; }
  .woocommerce-ordering select { font-size: 10px; padding: 5px 8px; }
}

/* Product cards grid — mobile */
@media (max-width: 1024px) {
  .eg-archive-main ul.products:not(:has(.eg-cat-card-item)) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
/* 2 columns on all mobile sizes — never 1 column for products */

/* Filter chip in sidebar — no gap when no image */
.eg-scat-img:empty { display: none; }

/* Drawer filter: remove padding-top gap from form */
@media (max-width: 1024px) {
  .eg-archive-sidebar > .eg-filter-form .eg-filter-section:first-of-type {
    margin-top: 4px;
  }
  /* Chips — wrap properly */
  .eg-subcat-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .eg-scat-chip {
    border-radius: 10px !important;
    padding: 8px 5px !important;
    font-size: 10px !important;
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
    min-height: 44px !important;
    gap: 3px !important;
    white-space: normal !important;
  }
  /* Mini image in chip */
  .eg-scat-img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background: var(--bg) !important;
    margin: 0 auto !important;
  }
  .eg-scat-img img { width: 26px !important; height: 26px !important; }
  .eg-scat-cnt { margin-top: 1px; }

  /* Checkboxes bigger touch targets */
  .eg-check-row { min-height: 40px; padding: 4px 0; }
  .eg-chk-box { width: 20px !important; height: 20px !important; border-radius: 6px !important; flex-shrink: 0; }
  .eg-chk:checked + .eg-chk-box::after { top: 3px; left: 6px; width: 6px; height: 10px; }
  .eg-check-row .eg-chk-label { font-size: 13px; }
  .eg-chk-cnt { font-size: 10px; padding: 1px 7px; }

  /* Price inputs */
  .eg-price-field input { font-size: 15px !important; padding: 10px 10px !important; }
  .eg-price-field label { font-size: 9px !important; }

  /* Attribute accordion */
  .eg-attr-toggle .eg-fh { font-size: 10px !important; letter-spacing: .06em !important; }
  .eg-attr-opts .eg-check-row { min-height: 36px; }
}

@media (max-width: 380px) {
  .eg-subcat-chips { grid-template-columns: repeat(2, 1fr) !important; }
}



/* ═══════════════════════════════════════════════════════
   MOBILE PRODUCT GRID — 2 COLUMNS (absolute override)
   Перебиває WoodMart, WooCommerce, всі попередні правила.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Основна сітка — 2 колонки на всіх мобільних */
  body.tax-product_cat ul.products,
  body.woocommerce-shop ul.products,
  .eg-archive-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
  }

  /* Кожен продукт — не float, не width в %, чиста grid-клітинка */
  body.tax-product_cat ul.products li.product,
  body.woocommerce-shop ul.products li.product,
  .eg-archive-main ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  /* Внутрішня обгортка WoodMart теж на 100% */
  body.tax-product_cat ul.products li.product .product-wrapper,
  body.tax-product_cat ul.products li.product .wd-product,
  .eg-archive-main ul.products li.product .product-wrapper,
  .eg-archive-main ul.products li.product .wd-product,
  .eg-archive-main ul.products li.product .eg-p-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Картка товару всередині 2-col grid ──────────────── */
@media (max-width: 1024px) {
  /* eg-p-card на мобільному */
  .eg-p-card {
    border-radius: 12px !important;
  }
  .eg-p-card .eg-p-img {
    aspect-ratio: 1 / 1 !important;
  }
  .eg-p-card .eg-p-name {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .eg-p-card .eg-p-price {
    font-size: 13px !important;
  }
}



/* =======================================================
   DUAL RANGE PRICE SLIDER
   ======================================================= */

/* Price display (від X — до Y ₴) */
.eg-price-display {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.eg-price-sep { color: var(--muted-2); font-weight: 400; }
.eg-price-unit { color: var(--muted-2); font-size: 11px; font-weight: 600; margin-left: 1px; }

/* Slider track wrapper */
.eg-range-wrap {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  margin: 0 6px;
}

/* Background track */
.eg-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--line-2);
  border-radius: 999px;
  pointer-events: none;
}

/* Active fill between thumbs */
.eg-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Both range inputs stacked */
.eg-range {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  border: none;
  outline: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}

/* Thumb styles — the two handles */
.eg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--accent);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(29,63,179,.22), 0 1px 3px rgba(0,0,0,.1);
  transition: border-color .12s, box-shadow .12s, transform .1s;
  position: relative;
  z-index: 4;
}
.eg-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--accent);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(29,63,179,.22);
  transition: border-color .12s, box-shadow .12s;
}
.eg-range::-webkit-slider-thumb:hover,
.eg-range:active::-webkit-slider-thumb {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 5px rgba(29,63,179,.12), 0 2px 8px rgba(29,63,179,.22);
  transform: scale(1.1);
}
.eg-range::-moz-range-thumb:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 5px rgba(29,63,179,.12);
}

/* Track line (hidden — we use .eg-range-track instead) */
.eg-range::-webkit-slider-runnable-track { background: transparent; }
.eg-range::-moz-range-track { background: transparent; }

/* Number inputs row */
.eg-price-inputs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.eg-price-dash { color: var(--muted-2); font-size: 12px; flex-shrink: 0; }
.eg-price-num {
  flex: 1;
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
  transition: border-color .12s;
  text-align: center;
  min-width: 0;
}
.eg-price-num:focus { border-color: var(--accent); }

/* Mobile — bigger thumb */
@media (max-width: 1024px) {
  .eg-range::-webkit-slider-thumb { width: 26px; height: 26px; }
  .eg-range::-moz-range-thumb     { width: 26px; height: 26px; }
  .eg-range-wrap { height: 42px; }
  .eg-price-display { font-size: 15px; }
  .eg-price-num { font-size: 13px; padding: 8px 10px; }
}



/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS SYSTEM — єдина тема для всього сайту
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --glass-bg:       rgba(255, 255, 255, 0.75);
  --glass-bg-heavy: rgba(255, 255, 255, 0.90);
  --glass-blur:     blur(24px) saturate(180%);
  --glass-blur-lg:  blur(32px) saturate(200%);
  --glass-border:   1px solid rgba(255, 255, 255, 0.60);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
  --glass-shadow-lg:0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
  --glass-inner:    inset 0 1px 0 rgba(255,255,255,.95);
  --ease-smooth:    cubic-bezier(.4,0,.2,1);
}

/* ── Page background — depth for glass effect ──────────────── */
body {
  background:
    radial-gradient(ellipse 120% 60% at 20% 0%, rgba(29,63,179,.07) 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 90% 100%, rgba(217,106,42,.06) 0%, transparent 55%),
    linear-gradient(160deg, #f0f4ff 0%, #f5f0f9 40%, #eef2fb 100%) !important;
  background-attachment: fixed !important;
}

/* ── HEADER — liquid glass pill ────────────────────────────── */
header.hdr {
  background: transparent !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: var(--glass-shadow-lg) !important;
}
.hdr-strip {
  background: linear-gradient(90deg, var(--accent) 0%, #2347c7 100%);
  border-bottom: none;
  /* Glass tint over the blue */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hdr-main {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-top: var(--glass-border);
  box-shadow: var(--glass-inner);
}

/* ── FILTER SIDEBAR — deep glass ───────────────────────────── */
.eg-archive-sidebar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-lg) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Mobile drawer */
@media (max-width: 1024px) {
  .eg-archive-sidebar {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: var(--glass-blur-lg) !important;
    -webkit-backdrop-filter: var(--glass-blur-lg) !important;
    border-right: var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lg) !important;
  }
  .eg-archive-sidebar > .eg-filter-head {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* Filter overlay */
.eg-filter-overlay.open {
  background: rgba(15, 20, 40, 0.35) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

/* ── PRODUCT CARDS — subtle glass ──────────────────────────── */
.eg-p-card,
.product-wrapper,
.wd-product {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.eg-p-card:hover,
.product-wrapper:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  border-color: rgba(29,63,179,.25) !important;
}

/* ── CATEGORY SUBCARDS ─────────────────────────────────────── */
.eg-subcat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth) !important;
}
.eg-subcat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  border-color: rgba(29,63,179,.3) !important;
}

/* ── MEGA-MENU DROPDOWN ────────────────────────────────────── */
.nav-mega {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg) !important;
}
.nav-mega-card {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all .15s var(--ease-smooth) !important;
}
.nav-mega-card:hover {
  background: rgba(29,63,179,.08) !important;
  border-color: rgba(29,63,179,.25) !important;
  transform: translateY(-2px) !important;
}

/* ── CART PAGE ─────────────────────────────────────────────── */
.eg-cart-table,
.eg-totals,
.eg-promo,
.eg-cs-summary,
.eg-delivery-section,
.eg-payment-section,
.eg-order-review,
.woocommerce-cart-form,
.cart_totals {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 20px !important;
}

/* Cart item rows */
.eg-ci-row {
  border-bottom: 1px solid rgba(255,255,255,.4) !important;
  transition: background .15s !important;
}
.eg-ci-row:hover {
  background: rgba(255,255,255,.35) !important;
}

/* ── CHECKOUT FORM FIELDS ──────────────────────────────────── */
.eg-cs-field input,
.eg-cs-field select,
.eg-cs-field textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 10px !important;
  transition: all .15s var(--ease-smooth) !important;
}
.eg-cs-field input:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(29,63,179,.4) !important;
  box-shadow: 0 0 0 3px rgba(29,63,179,.1) !important;
  outline: none !important;
}

/* ── BUTTONS — smooth glass-feel ───────────────────────────── */
.eg-filter-apply,
.eg-checkout-btn,
.woocommerce-cart .checkout-button,
.woocommerce #payment #place_order {
  transition: all .18s var(--ease-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}
.eg-filter-apply::after,
.eg-checkout-btn::after,
.woocommerce-cart .checkout-button::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-15deg);
  transition: left .4s var(--ease-smooth);
  pointer-events: none;
}
.eg-filter-apply:hover::after,
.eg-checkout-btn:hover::after,
.woocommerce-cart .checkout-button:hover::after {
  left: 125%;
}

/* ── SLIDER TRACK — glass-style ────────────────────────────── */
.eg-range-track {
  background: rgba(0,0,0,.1) !important;
  backdrop-filter: blur(4px) !important;
}
.eg-range-fill {
  background: linear-gradient(90deg, var(--accent), #4f6ee8) !important;
  box-shadow: 0 2px 8px rgba(29,63,179,.3) !important;
}

/* ── MOBILE BOTTOM NAV — glass ─────────────────────────────── */
.eg-bottom-nav:not(.filter-open) {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08) !important;
}

/* ── SMOOTH SCROLL ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }

/* ── FILTER TAGS — glass pills ─────────────────────────────── */
.eg-active-tag {
  background: rgba(29,63,179,.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(29,63,179,.18) !important;
}

/* ── WOOCOMMERCE NOTICES ────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
}