:root {
  --nav-shell: #f8f9fb;
  --nav-white: #ffffff;
  --nav-ink: #0f1b2d;
  --nav-deep: #06152d;
  --nav-deep-2: #0d2342;
  --nav-line: #dde3ea;
  --nav-orange: #ff8a1e;
  --nav-blue: #24b8ff;
  --nav-pink: #ff4fd8;
  --navbar-h: 84px;
  --nav-main-h: 60px;
  --nav-strip-h: 16px;
  --nav-gap: 4px;
  --lens-size: 100px;
}

.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--navbar-h);
  color: var(--nav-ink);
}

.navbar-main {
  position: relative;
  height: var(--nav-main-h);
  padding: 4px 14px 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(36,184,255,.2), transparent 26%),
    linear-gradient(180deg, #07162d 0%, #06152d 100%);
}

.navbar-shell {
  position: relative;
  height: 100%;
  max-width: 1880px;
  margin: 0 auto;
}

.navbar-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,24,43,.95), rgba(7,18,34,.98)) top center / calc(100% - 280px) 12px no-repeat,
    linear-gradient(90deg, rgba(9,24,43,.95), rgba(7,18,34,.98)) bottom center / calc(100% - 320px) 12px no-repeat;
  clip-path: polygon(2.3% 0, 97.7% 0, 100% 26%, 100% 74%, 97.7% 100%, 2.3% 100%, 0 74%, 0 26%);
  transform: translateY(5px) scaleX(.988);
  transform-origin: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

.navbar-panel {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) var(--lens-size) minmax(460px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 30px;
  background: transparent;
  overflow: visible;
}

.navbar-panel::before,
.navbar-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.navbar-panel::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.98));
  clip-path: polygon(2.6% 0, 97.4% 0, 100% 26%, 100% 74%, 97.4% 100%, 2.6% 100%, 0 74%, 0 26%);
  box-shadow:
    0 10px 22px rgba(2,12,28,.18),
    0 2px 0 rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(221,227,234,.95);
}

.navbar-panel::after {
  inset: 7px 18px;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,138,30,.95), transparent) 9% 12px / 60px 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,138,30,.95), transparent) 91% calc(100% - 12px) / 60px 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(36,184,255,.55), transparent) 50% 100% / 260px 2px no-repeat;
  border-top: 1px solid rgba(15,27,45,.09);
  border-bottom: 1px solid rgba(15,27,45,.09);
}

.navbar-side {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-width: 0;
}

.navbar-side--left { grid-column: 1; }
.navbar-side--right { grid-column: 3; }

.navbar-side--left { gap: 20px; }
.navbar-side--right { justify-content: flex-end; gap: 10px; }

.navbar-logo-wrap { display: none; }

.nav-tabs-left {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-tab-group { position: relative; }

.nav-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  color: var(--nav-ink);
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Oxanium', var(--font, 'Rajdhani'), sans-serif;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.nav-tab:hover,
.nav-tab.active {
  background: rgba(36,184,255,.08);
  box-shadow: inset 0 0 0 1px rgba(36,184,255,.18);
}

.nav-tab::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nav-blue), transparent);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .22s ease, transform .22s ease;
}

.nav-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(36,184,255,.14) 42%, transparent 68%);
  transform: translateX(-120%);
}

.nav-tab:hover {
  transform: translateY(-1px);
}

.nav-tab:hover::before,
.nav-tab.active::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav-tab:hover::after {
  animation: navScan .72s ease;
}

.nav-tab--offers { color: #dc6b00; }

.nav-dropdown,
.locale-dropdown,
.nav-user-panel {
  position: absolute;
  top: calc(100% + 10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .18s ease;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--nav-line);
  box-shadow: 0 18px 40px rgba(3,18,40,.18);
  z-index: 3000;
}

.nav-dropdown {
  left: 0;
  width: min(980px, calc(100vw - 48px));
  padding: 16px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(430px, 2.6fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(247,250,253,.97));
  box-shadow:
    0 18px 42px rgba(4,18,40,.16),
    0 1px 0 rgba(255,255,255,.95) inset;
  overflow: hidden;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(36,184,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(255,138,30,.10), transparent 38%);
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(15,27,45,.06);
  border-radius: 12px;
}

.nav-tab-group:hover .nav-dropdown,
.locale-switcher:hover .locale-dropdown,
.nav-user-dropdown:hover .nav-user-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item,
.locale-option,
.nav-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--nav-ink);
  text-decoration: none;
  border: 0;
  background: transparent;
  border-radius: 12px;
}

.nav-dropdown-group {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(15,27,45,.05);
}

.nav-dropdown-group:first-of-type {
  grid-column: span 1;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
}

.nav-dropdown-group:first-of-type .nav-dropdown-item--header {
  grid-column: 1 / -1;
}

.nav-dropdown-item--sub {
  position: relative;
  min-height: 38px;
  padding: 8px 12px;
  font-size: .82rem;
  line-height: 1.18;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,27,45,.06);
  box-shadow: 0 8px 18px rgba(6,21,45,.04);
}

.nav-dropdown-item--header,
.nav-dropdown-all {
  position: relative;
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-weight: 700;
}

.nav-dropdown-item--header,
.nav-dropdown-all,
.nav-dropdown-divider {
  grid-column: 1 / -1;
}

.nav-dropdown-group:first-of-type .nav-dropdown-item--sub:nth-of-type(2n + 2) { transform: translateX(0); }
.nav-dropdown-group:first-of-type .nav-dropdown-item--sub:nth-of-type(2n + 1) { transform: translateX(12px); }
.nav-dropdown-group:not(:first-of-type) .nav-dropdown-item--sub:nth-of-type(odd) { transform: translateX(0); }
.nav-dropdown-group:not(:first-of-type) .nav-dropdown-item--sub:nth-of-type(even) { transform: translateX(12px); }

.nav-dropdown-item--sub::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(36,184,255,.75), rgba(36,184,255,0));
}

.nav-dropdown-group:first-of-type .nav-dropdown-item--sub:nth-of-type(2n + 1)::before,
.nav-dropdown-group:not(:first-of-type) .nav-dropdown-item--sub:nth-of-type(even)::before {
  left: -20px;
  width: 20px;
}

.nav-dropdown-item:hover,
.locale-option:hover,
.nav-user-item:hover {
  background: rgba(36,184,255,.1);
}

.nav-dropdown-divider {
  height: 1px;
  margin: 10px 4px 6px;
  background: rgba(15,27,45,.08);
}

.nav-dropdown-all {
  justify-content: flex-end;
  color: var(--nav-orange);
}

.di-sub-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--nav-orange);
}

.nav-search-inline {
  position: relative;
  flex: 0 1 290px;
}

.nav-search-input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--nav-line);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  color: var(--nav-ink);
}

.nav-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.locale-switcher,
.nav-user-dropdown {
  position: relative;
}

.locale-btn,
.nav-icon-btn,
.nav-cta-btn {
  min-height: 42px;
  border: 1px solid var(--nav-line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.98) !important;
  color: var(--nav-ink) !important;
}

.locale-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.locale-mark {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(36,184,255,.08);
  box-shadow: inset 0 0 0 1px rgba(36,184,255,.18);
  font-family: 'Oxanium', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.locale-dropdown {
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 16px;
}

.nav-user-panel {
  right: 0;
  left: auto;
}

.nav-icon-btn {
  position: relative;
  width: 42px;
  display: inline-grid;
  place-items: center;
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  text-decoration: none;
}

.nav-cart-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nav-orange);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
}

.lens-stage {
  position: absolute;
  z-index: 3200;
  left: 50%;
  top: 50%;
  width: var(--lens-size);
  height: var(--lens-size);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 18px rgba(1,10,24,.26));
}

.lens {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.lens-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.24));
}

.lens-neon {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
}

.lens-neon--blue {
  background: conic-gradient(from 10deg, transparent 0 10%, rgba(36,184,255,0) 10%, var(--nav-blue) 18%, transparent 30%, transparent 100%);
  animation: lensBlue 7.5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(36,184,255,.95)) drop-shadow(0 0 20px rgba(36,184,255,.48));
}

.lens-neon--pink {
  background: conic-gradient(from 190deg, transparent 0 10%, rgba(255,79,216,0) 10%, var(--nav-pink) 18%, transparent 30%, transparent 100%);
  animation: lensPink 9s linear infinite reverse;
  filter: drop-shadow(0 0 8px rgba(255,79,216,.95)) drop-shadow(0 0 20px rgba(255,79,216,.44));
}

.lens-logo-slot {
  position: absolute;
  inset: 46px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.12);
}

.lens-shutter {
  position: absolute;
  inset: 27px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #02060c 0 16.6%,
      #111824 16.6% 33.2%,
      #02060c 33.2% 49.8%,
      #111824 49.8% 66.4%,
      #02060c 66.4% 83%,
      #111824 83% 100%
    );
  transform: scale(.08);
  opacity: 0;
  animation: shutterIntro 1.2s cubic-bezier(.2,.8,.2,1) 1s both;
}

.lens-brand {
  position: absolute;
  inset: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: 0;
  animation: brandReveal .6s ease 1.62s forwards;
}

.lens-brand img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.38)) drop-shadow(0 0 10px rgba(36,184,255,.34));
}

@keyframes lensBlue { to { transform: rotate(360deg); } }
@keyframes lensPink { to { transform: rotate(360deg); } }
@keyframes navScan {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes shutterIntro {
  0% { transform: scale(.08); opacity: 0; }
  35%, 58% { transform: scale(1); opacity: .98; }
  100% { transform: scale(.08); opacity: 0; }
}
@keyframes brandReveal {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.navbar-strip {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(var(--nav-main-h) + var(--nav-gap));
  height: var(--nav-strip-h);
  background: var(--nav-deep);
  clip-path: polygon(1.6% 0, 98.4% 0, 100% 28%, 100% 72%, 98.4% 100%, 1.6% 100%, 0 72%, 0 28%);
  box-shadow: inset 0 0 0 1px rgba(36,184,255,.16);
  z-index: 1;
}

.navbar-strip-overlay { display: none; }

.navbar-strip-inner {
  height: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.94);
}

.strip-badges {
  display: flex;
  gap: 18px;
}

.strip-badge,
.strip-promo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .62rem;
  white-space: nowrap;
}

.strip-promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nav-orange);
}

.nav-hamburger {
  display: none;
}

#search-overlay {
  top: var(--navbar-h) !important;
}

@media (max-width: 1280px) {
  .navbar-panel {
    grid-template-columns: minmax(260px, 1fr) 96px minmax(360px, 1fr);
    padding: 0 18px;
  }
  :root { --lens-size: 96px; }
  .nav-search-inline { flex-basis: 220px; }
}

@media (max-width: 1080px) {
  .nav-tabs-left,
  .nav-search-inline {
    display: none;
  }
  .navbar-panel { grid-template-columns: 1fr 80px auto; }
  :root {
    --navbar-h: 76px;
    --nav-main-h: 56px;
    --nav-strip-h: 14px;
    --nav-gap: 4px;
    --lens-size: 80px;
  }
  .nav-hamburger {
    display: flex;
    width: 42px;
    height: 42px;
    border: 1px solid var(--nav-line);
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: #fff;
  }
  .nav-hamburger span {
    width: 18px;
    height: 2px;
    background: var(--nav-ink);
  }
}

@media (max-width: 760px) {
  :root { --navbar-h: 92px; --nav-main-h: 92px; }
  .navbar { height: auto; }
  .navbar-main { height: auto !important; padding: 0 !important; }
  .navbar-panel { display: none !important; }
  .navbar-strip { display: none; }
  .mob-bar,
  .mob-searchrow { display: flex; }
}

#mob-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(4,10,24,.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}
#mob-overlay.is-open { opacity: 1; visibility: visible; }

#mob-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #07162d;
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow: hidden;
}
#mob-menu.is-open { transform: translateY(0); }

.mob-head,
.mob-search-wrap,
.mob-footer,
.mob-trust { padding: 14px 18px; }
.mob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nav-line);
}
.mob-logo img { height: 34px; }
.mob-close-btn,
.mob-search-input,
.mob-cta-btn,
.mob-action-btn {
  border: 1px solid var(--nav-line);
  border-radius: 14px;
  background: #fff;
}
.mob-search-wrap { position: relative; }
.mob-search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
}
.mob-search-icon {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.mob-nav { overflow-y: auto; padding: 10px 0; }
.mob-item,
.mob-sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  color: var(--nav-ink);
  text-decoration: none;
  border: 0;
  background: transparent;
}
.mob-item.active,
.mob-item:hover,
.mob-sub-item:hover { background: rgba(36,184,255,.08); }
.mob-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.mob-label { flex: 1; }
.mob-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: .25s ease;
}
.mob-group.is-open .mob-accordion-body { grid-template-rows: 1fr; }
.mob-accordion-inner { overflow: hidden; }
.mob-sub-item--child { padding-left: 44px; }
.mob-divider {
  height: 1px;
  margin: 8px 18px;
  background: var(--nav-line);
}
.mob-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--nav-line);
}
.mob-cta-btn,
.mob-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  color: var(--nav-ink);
  text-decoration: none;
}
.mob-actions-row {
  display: flex;
  gap: 8px;
}
.mob-action-btn { flex: 1; position: relative; }
.mob-cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
}
.mob-trust {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--nav-line);
}
.mob-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mob-user-name { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .lens-neon--blue,
  .lens-neon--pink,
  .lens-shutter,
  .lens-brand {
    animation: none !important;
  }
  .lens-brand {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE TOP BAR  —  mob-bar  (visible ≤ 760px)
════════════════════════════════════════════════════════════ */
.mob-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 52px;
  padding: 0 10px 0 12px;
  background: linear-gradient(180deg, #07162d 0%, #06152d 100%);
  border-bottom: 1px solid rgba(36,184,255,.08);
}

.mob-bar-burger {
  width: 38px; height: 38px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.mob-bar-burger span {
  display: block; width: 20px; height: 2px;
  background: rgba(255,255,255,.85); border-radius: 2px;
  transition: transform .22s, opacity .22s;
}

.mob-bar-logo {
  position: absolute;
  left: 50%; transform: translateX(-50%);
}
.mob-bar-lens-wrap {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(36,184,255,.35);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #06152d;
  box-shadow: 0 0 14px rgba(36,184,255,.18);
  position: relative;
}
.mob-bar-lens-wrap img {
  width: 28px; height: 28px; object-fit: contain;
}
.mob-bar-ring {
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(36,184,255,.25);
  pointer-events: none;
}

.mob-bar-actions {
  display: flex; align-items: center; gap: 2px;
}
.mob-bar-icon {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.88);
  background: none; border: none;
  cursor: pointer; text-decoration: none;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.mob-bar-icon:hover, .mob-bar-icon:active {
  background: rgba(255,255,255,.08); color: #fff;
}
.mob-bar-badge {
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px;
  background: #ff8a1e; color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   MOBILE SEARCH ROW  —  mob-searchrow  (visible ≤ 760px)
════════════════════════════════════════════════════════════ */
.mob-searchrow {
  display: none;
  padding: 6px 10px 8px;
  background: #06152d;
}
.mob-searchrow-btn {
  flex: 1; width: 100%;
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.4);
  font-size: .85rem; text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mob-searchrow-btn:active {
  background: rgba(255,255,255,.11);
  border-color: rgba(36,184,255,.35);
}
.mob-sr-placeholder { flex: 1; color: rgba(255,255,255,.38); font-size: .84rem; }
.mob-sr-icon   { color: rgba(255,255,255,.38); flex-shrink: 0; }
.mob-sr-filter { color: rgba(255,255,255,.25); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER — dark theme redesign
════════════════════════════════════════════════════════════ */

/* ── Drawer header ── */
.mob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 13px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.mob-head-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: #fff;
}
.mob-head-lens {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(36,184,255,.38);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(36,184,255,.06);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(36,184,255,.14);
  position: relative;
}
.mob-head-lens img { width: 32px; height: 32px; object-fit: contain; }
.mob-head-ring {
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(36,184,255,.2);
  pointer-events: none;
}
.mob-head-info { display: flex; flex-direction: column; gap: 1px; }
.mob-head-name  { font-size: .9375rem; font-weight: 700; color: #fff; letter-spacing: .015em; }
.mob-head-tagline { font-size: .72rem; color: rgba(255,255,255,.42); font-style: normal; }

.mob-close-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: rgba(255,255,255,.65); cursor: pointer;
  transition: background .15s;
}
.mob-close-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Nav items ── */
.mob-nav { padding: 6px 0; flex: 1; overflow-y: auto; min-height: 0; }

.mob-item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px;
  color: rgba(255,255,255,.82);
  text-decoration: none; font-size: .9375rem; font-weight: 500;
  border: none; background: none; width: 100%; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.mob-item:hover  { background: rgba(255,255,255,.05); color: #fff; }
.mob-item.active { color: #24b8ff; }

.mob-item-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border-radius: 9px; flex-shrink: 0;
  color: rgba(255,255,255,.48);
  transition: background .15s, color .15s;
}
.mob-item.active .mob-item-icon { background: rgba(36,184,255,.12); color: #24b8ff; }
.mob-item:hover  .mob-item-icon { background: rgba(255,255,255,.09); color: rgba(255,255,255,.75); }

.mob-item-arrow {
  margin-left: auto; color: rgba(255,255,255,.28);
  transition: transform .22s;
}
.mob-group.is-open .mob-item-arrow { transform: rotate(90deg); }

/* Offers */
.mob-item--offers       { color: #ff8a1e !important; }
.mob-item--offers .mob-item-icon { background: rgba(255,138,30,.1) !important; color: #ff8a1e !important; }
.mob-item--offers:hover { background: rgba(255,138,30,.06) !important; }

/* Accordion body */
.mob-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.mob-group.is-open .mob-accordion-body { max-height: 360px; }
.mob-accordion-inner { padding: 2px 0 8px 63px; }

.mob-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  color: rgba(255,255,255,.55);
  text-decoration: none; font-size: .875rem;
  background: none; border: none; width: 100%; cursor: pointer; text-align: left;
  transition: color .15s;
}
.mob-sub-item:hover { color: rgba(255,255,255,.88); }

.mob-sub-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.28); flex-shrink: 0;
}
.mob-sub-all {
  color: #24b8ff !important;
  font-size: .82rem; letter-spacing: .025em; margin-top: 3px;
}

/* ── Drawer footer ── */
.mob-drawer-footer {
  padding: 12px 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.mob-drawer-locales {
  display: flex; align-items: center; gap: 8px;
}
.mob-locale-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: rgba(255,255,255,.7); font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.mob-locale-btn:hover { background: rgba(255,255,255,.11); }

.mob-drawer-login {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  background: rgba(36,184,255,.09);
  border: 1px solid rgba(36,184,255,.22);
  border-radius: 10px;
  color: #24b8ff; font-size: .8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.mob-drawer-login:hover { background: rgba(36,184,255,.16); }

.mob-drawer-ctas { display: flex; gap: 8px; }
.mob-drawer-cta {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.78); font-size: .875rem; font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}
.mob-drawer-cta:hover { background: rgba(255,255,255,.1); }
.mob-drawer-cta--cart {
  background: rgba(255,138,30,.09);
  border-color: rgba(255,138,30,.22); color: #ff8a1e;
}
.mob-drawer-cta--cart:hover { background: rgba(255,138,30,.16); }
.mob-drawer-badge {
  min-width: 18px; height: 18px;
  background: #ff8a1e; color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ── Drawer scan line ── */
.mob-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36,184,255,.04) 0%, transparent 40%);
  z-index: 0;
}
.mob-head, .mob-nav, .mob-drawer-footer { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   MOBILE SEARCH PANEL  (fullscreen, z-index > drawer)
════════════════════════════════════════════════════════════ */
#mob-search-panel {
  display: none; /* shown by .is-open */
  position: fixed; inset: 0;
  z-index: 1300;
  background: #06152d;
  flex-direction: column;
  overflow: hidden;
}
#mob-search-panel.is-open { display: flex; }

/* Top bar */
.mob-sp-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #07162d;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.mob-sp-back {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(255,255,255,.72); cursor: pointer; flex-shrink: 0;
  border-radius: 10px;
  transition: background .15s;
}
.mob-sp-back:hover { background: rgba(255,255,255,.07); }

.mob-sp-input-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
#mob-sp-input {
  width: 100%; height: 38px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(36,184,255,.3);
  border-radius: 10px;
  padding: 0 34px 0 12px;
  color: #fff; font-size: .9rem; outline: none;
  transition: border-color .15s;
}
#mob-sp-input:focus { border-color: rgba(36,184,255,.55); }
#mob-sp-input::placeholder { color: rgba(255,255,255,.32); }

.mob-sp-x {
  position: absolute; right: 8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: none; border-radius: 50%;
  color: rgba(255,255,255,.6); cursor: pointer;
  transition: background .15s;
}
.mob-sp-x:hover { background: rgba(255,255,255,.18); }

.mob-sp-cancel {
  background: none; border: none;
  color: #24b8ff; font-size: .875rem; font-weight: 600;
  cursor: pointer; padding: 0 4px; flex-shrink: 0;
}

/* Body */
.mob-sp-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mob-sp-section { padding: 16px 14px 4px; }

.mob-sp-heading {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,255,255,.32);
  margin: 0 0 11px;
  font-family: var(--font-mono, 'Courier New', monospace);
}

/* Chips */
.mob-sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mob-sp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.72); font-size: .8125rem;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.mob-sp-chip:hover, .mob-sp-chip:active {
  background: rgba(36,184,255,.1);
  border-color: rgba(36,184,255,.28); color: #24b8ff;
}

/* Category grid */
.mob-sp-cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.mob-sp-cat {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; padding: 8px 4px;
  border-radius: 10px;
  transition: background .15s;
}
.mob-sp-cat:hover { background: rgba(255,255,255,.04); }
.mob-sp-cat-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; color: rgba(255,255,255,.6);
  transition: background .15s, border-color .15s;
}
.mob-sp-cat:hover .mob-sp-cat-icon {
  background: rgba(36,184,255,.1);
  border-color: rgba(36,184,255,.22); color: #24b8ff;
}
.mob-sp-cat-name {
  font-size: .68rem; color: rgba(255,255,255,.52);
  text-align: center; line-height: 1.2;
}

/* Recents */
.mob-sp-recents-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mob-sp-clear-all {
  background: none; border: none;
  color: #24b8ff; font-size: .78rem; cursor: pointer;
}
.mob-sp-recent-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(255,255,255,.62); font-size: .875rem;
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; cursor: pointer;
  transition: color .15s;
}
.mob-sp-recent-item:hover { color: rgba(255,255,255,.9); }
.mob-sp-ri-clock { color: rgba(255,255,255,.28); flex-shrink: 0; }
.mob-sp-ri-arrow { color: rgba(255,255,255,.2); margin-left: auto; flex-shrink: 0; }

/* Search results */
.mob-sp-ri {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.mob-sp-ri:hover { background: rgba(255,255,255,.04); }
.mob-sp-ri-img {
  width: 52px; height: 52px; border-radius: 10px;
  object-fit: cover; background: rgba(255,255,255,.05); flex-shrink: 0;
}
.mob-sp-ri-img--ph {
  display: flex; align-items: center; justify-content: center;
}
.mob-sp-ri-name {
  font-size: .875rem; color: rgba(255,255,255,.82); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mob-sp-ri-price {
  font-size: .8rem; color: #24b8ff;
  font-family: var(--font-mono, monospace); margin-top: 3px;
}
.mob-sp-see-all {
  display: block; padding: 14px;
  text-align: center; color: #24b8ff;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .05em; text-decoration: none;
  transition: background .15s;
}
.mob-sp-see-all:hover { background: rgba(36,184,255,.05); }
.mob-sp-empty {
  padding: 2.5rem 1rem; text-align: center;
  color: rgba(255,255,255,.32); font-size: .875rem;
}