/*
 * Premium public header
 *
 * The homepage hero uses an ink / glass / aurora visual language. This sheet
 * gives the shared header the same language while keeping the existing DOM,
 * navigation hooks, breakpoints, and off-canvas menu behavior intact.
 */
:root {
  --header-content-max: 154rem;
  --header-gutter: clamp(1.8rem, 3vw, 4.5rem);
  --header-text: #20324d;
  --header-muted: #71829a;
  --header-blue: #397fdf;
  --header-cyan: #53dcff;
  --header-violet: #9277f6;
  --header-border: rgba(90, 125, 180, 0.2);
  --header-surface: rgba(255, 255, 255, 0.78);
  --header-surface-strong: rgba(255, 255, 255, 0.94);
  --header-control-bg: rgba(255, 255, 255, 0.88);
  --header-control-border: rgba(90, 125, 180, 0.22);
  --header-control-text: #5d7694;
  --header-glow: rgba(74, 132, 236, 0.09);
}

/* Promo bar: keep the offer visible while giving the header a shorter first layer. */
html[data-theme] .banner-spring {
  border-bottom-color: rgba(124, 255, 150, 0.11);
  box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(124, 255, 150, 0.04);
}

html[data-theme] .banner-spring-content {
  width: min(var(--header-content-max), 100%);
  max-width: none;
  box-sizing: border-box;
  padding: 0.65rem var(--header-gutter);
  gap: 0.8rem;
}

html[data-theme] .banner-spring::before {
  background: radial-gradient(ellipse, rgba(100, 220, 130, 0.06) 0%, transparent 70%);
  filter: blur(22px);
}

html[data-theme] .banner-spring::after {
  opacity: 0.22;
}

html[data-theme] .aurora-left {
  background: radial-gradient(ellipse, rgba(160, 100, 255, 0.05) 0%, transparent 70%);
  filter: blur(20px);
}

html[data-theme] .banner-text {
  gap: 0.9rem;
}

html[data-theme] .banner-icon-wrap {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 1rem;
  box-shadow: 0 0 0.9rem rgba(100, 220, 130, 0.06);
}

html[data-theme] .spring-title {
  font-size: 1.45rem;
}

html[data-theme] .spring-message {
  font-size: 1.12rem;
}

html[data-theme] .timer-group {
  gap: 0.45rem;
}

html[data-theme] .timer-box {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.9rem;
}

html[data-theme] .timer-box div {
  font-size: 1.6rem;
}

html[data-theme] .banner-cta {
  padding: 0.75rem 1.45rem;
  border-radius: 0.85rem;
  box-shadow: 0 0 1rem rgba(100, 220, 130, 0.04);
}

html[data-theme="dark"] .header {
  --header-text: #edf5ff;
  --header-muted: #aabbd2;
  --header-blue: #76cfff;
  --header-cyan: #68e0ff;
  --header-violet: #b29aff;
  --header-border: rgba(132, 177, 231, 0.2);
  --header-surface: rgba(12, 27, 49, 0.76);
  --header-surface-strong: rgba(15, 33, 58, 0.92);
  --header-control-bg: rgba(18, 39, 65, 0.9);
  --header-control-border: rgba(132, 177, 231, 0.24);
  --header-control-text: #c4d1df;
  --header-glow: rgba(91, 183, 255, 0.09);
}

html[data-theme] .header {
  position: relative;
  z-index: 80;
  min-height: auto;
  overflow: visible;
  color: var(--header-text);
  background:
    radial-gradient(circle at 10% -140%, rgba(83, 220, 255, 0.09), transparent 34rem),
    radial-gradient(circle at 86% -130%, rgba(146, 119, 246, 0.08), transparent 31rem),
    linear-gradient(180deg, #fafdff 0%, #edf5fc 100%);
  box-shadow: 0 0.45rem 1.5rem rgba(29, 61, 104, 0.08);
}

html[data-theme] .header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(90, 135, 190, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 135, 190, 0.025) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
  mask-image: linear-gradient(to left, transparent 2%, #000 30%, rgba(0, 0, 0, 0.42) 82%, transparent 100%);
  content: "";
  pointer-events: none;
}

html[data-theme] .header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(83, 220, 255, 0.28), rgba(146, 119, 246, 0.26), transparent);
  content: "";
  pointer-events: none;
}

html[data-theme] .header__Top {
  position: relative;
  z-index: 1;
  padding: 1.2rem var(--header-gutter);
  border-bottom: 1px solid var(--header-border);
  background: linear-gradient(180deg, rgba(234, 243, 251, 0.92), rgba(225, 236, 247, 0.88)) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 0.35rem 0.7rem rgba(45, 78, 121, 0.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme] .header__content {
  width: min(var(--header-content-max), 100%);
  max-width: none;
  margin: 0 auto;
}

html[data-theme] .header__Top > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

html[data-theme] .header__Top-Lists {
  gap: 0.3rem;
}

html[data-theme] .header__Top-Items {
  color: var(--header-muted);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme] .header__Top-Links,
html[data-theme] .header__Top-Email-Icon,
html[data-theme] .header__Top-Phone-Icon {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.24rem 0.62rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  color: var(--header-muted) !important;
  font-weight: 600;
  line-height: 1.5;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .header__Top-Links:hover,
html[data-theme] .header__Top-Links.is-active,
html[data-theme] .header__Top-Items.is-active > .header__Top-Links,
html[data-theme] .header__Top-Email-Icon:hover,
html[data-theme] .header__Top-Phone-Icon:hover {
  border-color: rgba(57, 127, 223, 0.2);
  color: var(--header-blue) !important;
  background: rgba(57, 127, 223, 0.08);
  transform: translateY(-1px);
}

html[data-theme] .header__Top-Left {
  gap: 0.35rem;
}

html[data-theme] .header__Top-SocialMedia {
  gap: 0.3rem;
  color: var(--header-muted);
  font-size: 1.18rem;
}

html[data-theme] .header__Top-Phone {
  padding: 0;
}

html[data-theme] .header__Top-Telegram,
html[data-theme] .header__Top-Email {
  margin-inline-start: 0.2rem;
  padding-inline-start: 0.2rem;
  border-inline-start: 0;
}

html[data-theme] .header__Top-Icon {
  color: var(--header-blue) !important;
  font-size: 1.45rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .header__Top-SocialMedia:hover .header__Top-Icon {
  color: var(--header-violet) !important;
  transform: translateY(-1px) scale(1.06);
}

html[data-theme] .main-Header,
html[data-theme] .main-Header__Content {
  background: transparent !important;
}

html[data-theme] .main-Header {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(90, 125, 180, 0.16);
  box-shadow: 0 0.35rem 0.9rem rgba(29, 61, 104, 0.06);
}

html[data-theme] .main-Header__Content {
  width: min(var(--header-content-max), 100%);
  min-height: 7.25rem;
  margin: 0 auto;
  padding: 0.85rem var(--header-gutter);
}

html[data-theme] .main-Header__Content-Right {
  gap: clamp(1.4rem, 2.25vw, 3rem);
}

html[data-theme] .main-Header__BrandImage {
  width: auto;
  height: 4.7rem;
  filter: drop-shadow(0 0.5rem 0.8rem rgba(35, 73, 118, 0.12));
  transition: transform 0.24s ease, filter 0.24s ease;
}

html[data-theme] .main-Header__BrandImage:hover {
  filter: drop-shadow(0 0.75rem 1rem rgba(70, 123, 217, 0.24));
  transform: translateY(-2px) scale(1.015);
}

html[data-theme] .main-Header__Lists {
  gap: 0.2rem;
}

html[data-theme] .main-Header__Links {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3.35rem;
  padding: 0.48rem 0.82rem;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  color: var(--header-text) !important;
  font-family: "Peyda", "iransansweb", sans-serif;
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

html[data-theme] .main-Header__Links::after {
  position: absolute;
  right: 0.9rem;
  bottom: 0.18rem;
  left: 0.9rem;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--header-cyan), var(--header-violet));
  box-shadow: 0 0 0.4rem rgba(83, 220, 255, 0.24);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Links:hover,
html[data-theme] .main-Header__Items:hover > .main-Header__Links {
  border-color: rgba(83, 220, 255, 0.08);
  color: var(--header-blue) !important;
  background: rgba(83, 220, 255, 0.035);
}

html[data-theme] .main-Header__Links.is-active,
html[data-theme] .main-Header__Items.is-active > .main-Header__Links {
  border-color: transparent;
  color: var(--header-blue) !important;
  background: transparent !important;
  font-weight: 700;
}

html[data-theme] .main-Header__Links:hover::after,
html[data-theme] .main-Header__Items:hover > .main-Header__Links::after,
html[data-theme] .main-Header__Links.is-active::after,
html[data-theme] .main-Header__Items.is-active > .main-Header__Links::after {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme] .main-Header__Chevron {
  padding-right: 0;
  color: var(--header-muted) !important;
  font-size: 1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Items:hover > .main-Header__Chevron,
html[data-theme] .main-Header__Items.is-active > .main-Header__Chevron {
  color: var(--header-blue) !important;
  transform: translateY(1px);
}

html[data-theme] .main-Header__Content-Left {
  gap: 0.7rem;
}

html[data-theme] .main-Header__Content-Items {
  width: 4rem;
  height: 4rem;
  overflow: visible;
  border: 1px solid var(--header-control-border);
  border-radius: 1rem;
  background: var(--header-control-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0.4rem 1rem rgba(40, 76, 122, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

html[data-theme] .main-Header__Login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-theme] .main-Header__Content-Items:hover {
  border-color: rgba(57, 127, 223, 0.28);
  background: var(--header-surface-strong) !important;
  box-shadow: 0 0.55rem 1.2rem var(--header-glow);
  transform: translateY(-2px);
}

html[data-theme] .main-Header__Basket-Icon {
  color: var(--header-blue) !important;
  font-size: 1.55rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Content-Items:hover .main-Header__Basket-Icon {
  color: var(--header-violet) !important;
  transform: translateY(-1px) scale(1.06);
}

html[data-theme] .main-Header__Basket-Circle {
  top: -0.6rem;
  right: -0.55rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid #f7fbff !important;
  border-radius: 50%;
  color: #fff !important;
  background: linear-gradient(135deg, var(--header-violet), var(--header-blue)) !important;
  box-shadow: 0 0.3rem 0.8rem rgba(72, 113, 211, 0.35);
  font-size: 0.9rem;
  font-weight: 800;
}

html[data-theme] .main-Header__ThemeToggle {
  padding: 0;
  border: 1px solid var(--header-border) !important;
  font: inherit;
  appearance: none;
}

html[data-theme] .main-Header__ThemeToggle:hover .main-Header__ThemeIcon,
html[data-theme] .main-Header__ThemeToggle:focus-visible .main-Header__ThemeIcon {
  color: var(--header-violet) !important;
  transform: rotate(-18deg) scale(1.1);
}

html[data-theme] .main-Header__ThemeIcon {
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Login {
  min-height: 4rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--header-control-border) !important;
  border-radius: 1rem;
  color: var(--header-control-text) !important;
  background: var(--header-control-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0.4rem 1rem rgba(40, 76, 122, 0.06);
  font-family: "Peyda", "iransansweb", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 2.45rem;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Login:hover {
  color: var(--header-blue) !important;
  border-color: rgba(57, 127, 223, 0.34) !important;
  background: rgba(57, 127, 223, 0.08) !important;
  box-shadow: 0 0.55rem 1.2rem var(--header-glow);
  transform: translateY(-2px);
}

html[data-theme] .main-Header__SubMenu {
  top: calc(100% + 0.9rem);
  width: min(45rem, 32vw);
  padding: 0.8rem;
  border: 1px solid rgba(106, 148, 202, 0.25) !important;
  border-bottom: 1px solid rgba(106, 148, 202, 0.25) !important;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.93) !important;
  box-shadow: 0 1.35rem 3.5rem rgba(25, 54, 94, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(0.6rem);
}

html[data-theme] .main-Header__Items:hover > .main-Header__SubMenu {
  transform: translateY(0);
}

html[data-theme] .main-Header__SubMenu-Items {
  padding: 0;
}

html[data-theme] .main-Header__SubMenu-Link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  color: var(--header-text) !important;
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__SubMenu-Link:hover,
html[data-theme] .main-Header__SubMenu-Link.is-active {
  color: var(--header-blue) !important;
  background: linear-gradient(135deg, rgba(83, 220, 255, 0.055), rgba(146, 119, 246, 0.05));
  transform: translateX(-3px);
}

html[data-theme] .main-Header__ThemeToggle:focus-visible,
html[data-theme] .main-Header__Links:focus-visible,
html[data-theme] .main-Header__Login:focus-visible,
html[data-theme] .header__Top-Links:focus-visible,
html[data-theme] .header__Top-Email-Icon:focus-visible,
html[data-theme] .header__Top-Phone-Icon:focus-visible,
html[data-theme] .HamburgerMenu:focus-visible {
  outline: 3px solid rgba(83, 220, 255, 0.4);
  outline-offset: 3px;
}

/* Dark mode uses the same ink and aurora values as the homepage hero. */
html[data-theme="dark"] .header {
  background:
    radial-gradient(circle at 8% -130%, rgba(39, 174, 255, 0.1), transparent 35rem),
    radial-gradient(circle at 88% -120%, rgba(143, 95, 255, 0.1), transparent 32rem),
    linear-gradient(118deg, #091522 0%, #0d192b 48%, #12192f 100%);
  box-shadow: 0 0.55rem 1.7rem rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .header::before {
  background-image:
    linear-gradient(rgba(115, 166, 224, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 166, 224, 0.028) 1px, transparent 1px);
  opacity: 0.68;
}

html[data-theme="dark"] .header__Top {
  background: linear-gradient(180deg, #142840 0%, #102139 100%) !important;
  border-bottom-color: rgba(135, 188, 235, 0.18);
  box-shadow: inset 0 -1px 0 rgba(214, 242, 255, 0.06), 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .header__Top-Items,
html[data-theme="dark"] .header__Top-SocialMedia {
  color: #cad8e8;
}

html[data-theme="dark"] .header__Top-Links,
html[data-theme="dark"] .header__Top-Email-Icon,
html[data-theme="dark"] .header__Top-Phone-Icon {
  color: #d0ddec !important;
}

html[data-theme="dark"] .main-Header {
  background: linear-gradient(180deg, #0b1a2d 0%, #081625 100%) !important;
  border-bottom-color: rgba(130, 181, 229, 0.2);
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .main-Header {
  background: #ffffff !important;
  border-bottom-color: rgba(90, 125, 180, 0.16);
  box-shadow: 0 0.35rem 0.9rem rgba(29, 61, 104, 0.055);
}

html[data-theme="dark"] .banner-spring {
  background: linear-gradient(105deg, #0b1a2a 0%, #15172c 52%, #10221d 100%) !important;
  border-bottom-color: rgba(124, 255, 150, 0.08);
}

html[data-theme="dark"] .banner-cta {
  border-color: rgba(113, 201, 255, 0.28) !important;
  color: #c8eaff !important;
  background: linear-gradient(135deg, rgba(73, 157, 224, 0.18), rgba(137, 112, 228, 0.13)) !important;
  box-shadow: 0 0 0.85rem rgba(83, 220, 255, 0.055) !important;
}

html[data-theme="dark"] .banner-cta:hover {
  border-color: rgba(137, 215, 255, 0.44) !important;
  color: #eff9ff !important;
  background: linear-gradient(135deg, rgba(73, 157, 224, 0.28), rgba(137, 112, 228, 0.2)) !important;
}

/* Shared light-mode spring banner. This stylesheet is loaded last by header.php,
   so the same presentation is used by the homepage and every inner page. */
html[data-theme="light"] .banner-spring {
  min-height: 7.8rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(104, 190, 255, 0.28), transparent 25rem),
    radial-gradient(circle at 88% 82%, rgba(151, 112, 255, 0.18), transparent 28rem),
    linear-gradient(112deg, #f9fcff 0%, #eef7ff 48%, #f6f2ff 100%) !important;
  border-bottom: 1px solid rgba(104, 144, 198, 0.22) !important;
  box-shadow: 0 0.8rem 2.2rem rgba(55, 91, 139, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="light"] .banner-spring::before {
  top: -7rem;
  right: 8%;
  width: 34rem;
  height: 22rem;
  background: radial-gradient(ellipse, rgba(58, 156, 244, 0.22) 0%, transparent 70%) !important;
  filter: blur(2.8rem);
}

html[data-theme="light"] .banner-spring::after {
  opacity: 0.11;
}

html[data-theme="light"] .aurora-left {
  background: radial-gradient(ellipse, rgba(128, 96, 232, 0.17) 0%, transparent 70%) !important;
  filter: blur(2.6rem);
}

html[data-theme="light"] .banner-spring-content {
  width: min(var(--header-content-max), 100%);
  min-height: 7.8rem;
  max-width: none;
  padding: 1rem var(--header-gutter);
  gap: 1.25rem;
}

html[data-theme="light"] .banner-icon-wrap {
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(78, 142, 220, 0.2);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, #ffffff, #eaf4ff);
  box-shadow: 0 0.7rem 1.6rem rgba(57, 117, 192, 0.13), inset 0 1px 0 #fff;
}

html[data-theme="light"] .banner-icon-wrap i {
  color: #347fd2 !important;
  font-size: 1.55rem;
}

html[data-theme="light"] .banner-text {
  gap: 1.1rem;
}

html[data-theme="light"] .banner-text-content {
  gap: 0.35rem;
}

html[data-theme="light"] .spring-title {
  color: #203754 !important;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0;
}

html[data-theme="light"] .spring-message {
  color: #637993 !important;
  font-size: 1.13rem;
  font-weight: 600;
}

html[data-theme="light"] .discount {
  padding: 0.18rem 0.65rem;
  border: 1px solid rgba(99, 100, 221, 0.19);
  border-radius: 0.65rem;
  color: #4f56c5;
  background: rgba(104, 110, 231, 0.1);
}

html[data-theme="light"] .banner-divider {
  width: 1px;
  height: 3.8rem;
  background: linear-gradient(to bottom, transparent, rgba(81, 126, 183, 0.25), transparent);
}

html[data-theme="light"] .timer-group {
  gap: 0.55rem;
}

html[data-theme="light"] .timer-box {
  width: 4.9rem;
  height: 4.9rem;
  border: 1px solid rgba(97, 139, 195, 0.2);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.55rem 1.3rem rgba(57, 99, 156, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(1rem);
}

html[data-theme="light"] .timer-box::before {
  background: linear-gradient(to right, transparent, rgba(76, 142, 223, 0.4), transparent);
}

html[data-theme="light"] .timer-box:hover {
  border-color: rgba(71, 137, 219, 0.45);
  box-shadow: 0 0.8rem 1.6rem rgba(57, 111, 187, 0.16);
}

html[data-theme="light"] .timer-box div {
  color: #315882;
}

html[data-theme="light"] .timer-box small,
html[data-theme="light"] .timer-sep {
  color: #7d91aa;
}

html[data-theme="light"] .banner-cta {
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(74, 109, 209, 0.2) !important;
  border-radius: 1rem;
  color: #fff !important;
  background: linear-gradient(135deg, #5360d8, #268bd9) !important;
  box-shadow: 0 0.7rem 1.5rem rgba(58, 105, 207, 0.22) !important;
}

html[data-theme="light"] .banner-cta:hover {
  border-color: rgba(67, 116, 211, 0.36) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4654ce, #167dce) !important;
  box-shadow: 0 0.95rem 2rem rgba(49, 97, 199, 0.29) !important;
  transform: translateY(-0.15rem);
}

html[data-theme="light"] .spring-item {
  filter: drop-shadow(0 0.3rem 0.55rem rgba(72, 133, 210, 0.24));
}

html[data-theme="dark"] .main-Header__Content-Items {
  border-color: rgba(132, 177, 231, 0.2);
  background: rgba(17, 36, 60, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(214, 242, 255, 0.07), 0 0.55rem 1.4rem rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .main-Header__Content-Items:hover {
  border-color: rgba(118, 207, 255, 0.34);
  background: rgba(22, 47, 78, 0.98) !important;
}

html[data-theme="dark"] .main-Header__Basket-Icon,
html[data-theme="dark"] .main-Header__ThemeIcon {
  color: #b9c9da !important;
}

html[data-theme="dark"] .main-Header__Content-Items:hover .main-Header__Basket-Icon {
  color: #8fd9ff !important;
}

html[data-theme="dark"] .main-Header__ThemeToggle:hover .main-Header__ThemeIcon,
html[data-theme="dark"] .main-Header__ThemeToggle:focus-visible .main-Header__ThemeIcon {
  color: #c3adff !important;
}

html[data-theme="dark"] .main-Header__Login {
  border-color: rgba(132, 177, 231, 0.2) !important;
  color: #c4d1df !important;
  background: rgba(17, 36, 60, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(214, 242, 255, 0.07), 0 0.55rem 1.4rem rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .main-Header__Login:hover {
  border-color: rgba(118, 207, 255, 0.34) !important;
  color: #9edfff !important;
  background: rgba(22, 47, 78, 0.98) !important;
}

html[data-theme="dark"] .main-Header__Links::after {
  box-shadow: 0 0 0.35rem rgba(104, 224, 255, 0.205);
}

html[data-theme="dark"] .main-Header__Basket-Circle {
  border-color: #0b1728 !important;
}

html[data-theme="dark"] .main-Header__SubMenu {
  background: rgba(10, 25, 46, 0.96) !important;
  box-shadow: 0 1.5rem 3.8rem rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(211, 239, 255, 0.07);
}

/* Preserve the existing responsive structure while restyling its surfaces. */
@media (max-width: 1300px) {
  html[data-theme] .header {
    min-height: 0;
  }

  html[data-theme] .main-Header__Content {
    min-height: 0;
    padding: 0.7rem 1.5rem 0;
  }

  html[data-theme] .main-Header__Content-Right {
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--header-border) !important;
    border-radius: 1.25rem 1.25rem 0 0;
    background: rgba(255, 255, 255, 0.24);
  }

  html[data-theme="dark"] .main-Header__Content-Right {
    background: rgba(8, 20, 37, 0.3);
  }

  html[data-theme] .HamburgerMenu {
    display: grid !important;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid var(--header-border);
    border-radius: 1.2rem;
    color: var(--header-blue) !important;
    background: var(--header-surface-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0.55rem 1.4rem rgba(40, 76, 122, 0.08);
    font-size: 1.7rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

  html[data-theme] .HamburgerMenu::after {
    display: block;
    width: 1.55rem;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    box-shadow: 0 -0.55rem currentColor, 0 0.55rem currentColor;
    content: "";
  }

  html[data-theme] .HamburgerMenu:hover {
    border-color: rgba(57, 127, 223, 0.4);
    color: var(--header-violet) !important;
    background: var(--header-surface);
    transform: translateY(-2px);
  }
}

html[data-theme] .Menu-Hamburger__DarkPage {
  z-index: 99;
  background: #030914;
  opacity: 0.68;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html[data-theme] .Menu-Hamburger__Content {
  z-index: 100;
  border-left: 1px solid var(--header-border);
  background: linear-gradient(155deg, rgba(250, 253, 255, 0.98), rgba(232, 242, 253, 0.98)) !important;
  box-shadow: -1.3rem 0 4rem rgba(11, 30, 58, 0.24);
}

html[data-theme] .Menu-Hamburger__Content::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(83, 220, 255, 0.17), transparent 20rem), radial-gradient(circle at 100% 15%, rgba(146, 119, 246, 0.13), transparent 22rem);
  content: "";
  pointer-events: none;
}

html[data-theme] .Menu-Hamburger__Top,
html[data-theme] .Menu-Hamburger__Lists,
html[data-theme] .Menu-Hamburger__Buttom {
  position: relative;
  z-index: 1;
}

html[data-theme] .Menu-Hamburger__Link {
  border-bottom-color: var(--header-border);
}

html[data-theme] .Menu-Hamburger__Close-Icon {
  z-index: 2;
  color: var(--header-blue) !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .Menu-Hamburger__Close-Icon:hover {
  color: var(--header-violet) !important;
  transform: rotate(90deg);
}

html[data-theme] .Menu-Hamburger__Item {
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(90, 125, 180, 0.1);
}

html[data-theme] .Menu-Hamburger__Item-Links,
html[data-theme] .Menu-Hamburger__SubItem-Links {
  color: var(--header-text) !important;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .Menu-Hamburger__Item-Links:hover,
html[data-theme] .Menu-Hamburger__SubItem-Links:hover,
html[data-theme] .Menu-Hamburger__SubItem-Links.is-active {
  color: var(--header-blue) !important;
  transform: translateX(-3px);
}

html[data-theme] .Menu-Hamburger__Item-Icon {
  color: var(--header-blue);
}

html[data-theme] .Menu-Hamburger__SubMenu-Item::before {
  background: linear-gradient(90deg, var(--header-cyan), var(--header-violet));
  box-shadow: 0 0 0.4rem rgba(83, 220, 255, 0.22);
}

html[data-theme="dark"] .Menu-Hamburger__Content {
  background: linear-gradient(155deg, #0b1c33, #071321) !important;
  box-shadow: -1.3rem 0 4rem rgba(0, 0, 0, 0.44);
}

@media (max-width: 576px) {
  html[data-theme] {
    --header-gutter: 1rem;
  }

  html[data-theme] .banner-spring-content {
    padding: 0.55rem var(--header-gutter);
    gap: 0.55rem;
  }

  html[data-theme] .banner-icon-wrap {
    display: none;
  }

  html[data-theme] .spring-title {
    font-size: 1.28rem;
  }

  html[data-theme] .spring-message {
    font-size: 1rem;
  }

  html[data-theme] .timer-box {
    width: 4.25rem;
    height: 4.25rem;
  }

  html[data-theme] .timer-box div {
    font-size: 1.4rem;
  }

  html[data-theme] .banner-cta {
    padding: 0.62rem 1.15rem;
  }

  html[data-theme] .main-Header__Content {
    padding-right: var(--header-gutter);
    padding-left: var(--header-gutter);
  }

  html[data-theme] .main-Header__Content-Right {
    padding: 0.6rem 0.75rem;
  }

  html[data-theme] .main-Header__BrandImage {
    height: 4.2rem;
  }

  html[data-theme] .main-Header__Content-Items,
  html[data-theme] .HamburgerMenu {
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 0.9rem;
  }

  html[data-theme] .main-Header__Login {
    min-height: 3.65rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.9rem;
    font-size: 1.05rem;
    line-height: 2rem;
  }

  html[data-theme] .main-Header__Content-Left {
    gap: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .header *,
  html[data-theme] .Menu-Hamburger * {
    transition-duration: 0.01ms !important;
  }
}

/* Responsive header and drawer share one geometry in both color themes. */
@media (max-width: 1300px) {
  html[data-theme="light"] .main-Header__Content,
  html[data-theme="dark"] .main-Header__Content {
    display: flex !important;
    min-height: 6.4rem;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem;
    padding: 0.7rem var(--header-gutter) !important;
  }

  html[data-theme="light"] .main-Header__Content-Right,
  html[data-theme="dark"] .main-Header__Content-Right {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-radius: 0;
    background: transparent !important;
  }

  /* The responsive trigger is intentionally the only item in this area. */
  html[data-theme] .main-Header__Content-Right > a,
  html[data-theme] .main-Header__Content-Right > .main-Header__Navbar {
    display: none !important;
  }

  html[data-theme] .HamburgerMenu {
    flex: 0 0 4rem;
    margin: 0;
  }

  /* Font Awesome already draws the bars; the old pseudo-element duplicated it. */
  html[data-theme] .HamburgerMenu::after {
    display: none !important;
    content: none !important;
  }

  /* Keep the off-canvas shell out of document flow (prevents the header/hero gap). */
  html[data-theme] .Menu-Hamburger {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Unified off-canvas redesign. Theme variables change color, never dimensions. */
html[data-theme] .Menu-Hamburger__Content {
  width: min(42rem, 92vw);
  height: 100vh;
  height: 100dvh;
  padding: 2.2rem 2rem 3rem;
  border-left: 1px solid var(--header-border);
  border-radius: 2rem 0 0 2rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

html[data-theme] .Menu-Hamburger__Content::before {
  position: absolute;
  inset: 0;
  border-radius: 2rem 0 0 2rem;
}

html[data-theme] .Menu-Hamburger__Top {
  margin: 3.8rem 0 0;
}

html[data-theme] .Menu-Hamburger__Buttom {
  margin-top: 0.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--header-border);
}

html[data-theme] .Menu-Hamburger__Buttom > h5 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.8rem;
  color: var(--header-muted);
  font-size: 1.25rem;
  font-weight: 800;
}

html[data-theme] .Menu-Hamburger__Lists {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

html[data-theme] .Menu-Hamburger__Item {
  padding: 0;
  border: 0;
}

html[data-theme] .Menu-Hamburger__Item-Links,
html[data-theme] .Menu-Hamburger__SubItem-Links {
  min-height: 5.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(90, 125, 180, 0.13);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

html[data-theme="dark"] .Menu-Hamburger__Item-Links,
html[data-theme="dark"] .Menu-Hamburger__SubItem-Links {
  border-color: rgba(77, 163, 255, 0.19);
  background: rgba(14, 38, 68, 0.68);
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.055), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.12);
}

html[data-theme] .Menu-Hamburger__Item-Links:hover,
html[data-theme] .Menu-Hamburger__SubItem-Links:hover,
html[data-theme] .Menu-Hamburger__SubItem-Links.is-active {
  border-color: rgba(57, 127, 223, 0.3);
  background: rgba(57, 127, 223, 0.075);
  transform: translateX(-3px);
}

html[data-theme] .Menu-Hamburger__Item-Icon {
  display: grid;
  flex: 0 0 3.8rem;
  width: 3.8rem;
  height: 3.8rem;
  place-items: center;
  border: 1px solid rgba(57, 127, 223, 0.25);
  border-radius: 1.1rem;
  color: #397fdf !important;
  background: rgba(57, 127, 223, 0.09);
  box-shadow: 0 0 1.2rem rgba(57, 127, 223, 0.2), inset 0 0 0.9rem rgba(83, 220, 255, 0.08);
  font-size: 1.55rem;
}

html[data-theme="dark"] .Menu-Hamburger__Item-Icon {
  border-color: rgba(86, 189, 255, 0.48);
  color: #66c7ff !important;
  background: rgba(22, 119, 255, 0.15);
  box-shadow: 0 0 0.7rem rgba(0, 153, 255, 0.42), 0 0 1.7rem rgba(37, 99, 235, 0.26), inset 0 0 1rem rgba(61, 186, 255, 0.12);
  text-shadow: 0 0 0.8rem rgba(102, 199, 255, 0.88);
}

html[data-theme] .Menu-Hamburger__Close-Icon {
  top: 1.7rem;
  left: 1.7rem;
  display: grid;
  width: 3.8rem;
  height: 3.8rem;
  place-items: center;
  border: 1px solid var(--header-border);
  border-radius: 1.1rem;
  background: var(--header-surface-strong);
  box-shadow: 0 0.6rem 1.6rem rgba(25, 54, 94, 0.12);
  font-size: 1.65rem;
}

html[data-theme="dark"] .Menu-Hamburger__Content {
  --header-text: #edf5ff;
  --header-muted: #aabbd2;
  --header-blue: #66c7ff;
  --header-violet: #5baeff;
  --header-border: rgba(77, 163, 255, 0.25);
  --header-surface-strong: rgba(12, 36, 64, 0.96);
  border-left-color: rgba(77, 163, 255, 0.25);
  background: linear-gradient(155deg, #0a1d34 0%, #071728 52%, #06111f 100%) !important;
}

@media (max-width: 576px) {
  html[data-theme="light"] .main-Header__Content,
  html[data-theme="dark"] .main-Header__Content {
    min-height: 5.7rem;
    padding: 0.65rem 1rem !important;
  }

  html[data-theme] .Menu-Hamburger__Content {
    width: 94vw;
    max-width: 420px;
    padding-inline: 1.3rem;
    border-radius: 1.5rem 0 0 1.5rem;
  }
}

/* The promo banner becomes three deliberate rows on phones. */
@media (max-width: 767.98px) {
  html[data-theme] .banner-spring {
    height: auto !important;
    min-height: 0;
  }

  html[data-theme] .banner-spring-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem clamp(1rem, 4vw, 1.8rem);
    text-align: center;
  }

  html[data-theme] .banner-text,
  html[data-theme] .banner-text-content {
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
  }

  html[data-theme] .spring-title,
  html[data-theme] .spring-message {
    max-width: 48rem;
    white-space: normal;
  }

  html[data-theme] .timer-group {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    gap: clamp(0.1rem, 0.8vw, 0.3rem);
  }

  html[data-theme] .timer-box {
    width: clamp(4.4rem, 14vw, 5.2rem);
    height: clamp(4.4rem, 14vw, 5.2rem);
  }

  html[data-theme] .timer-sep {
    margin-inline: 0;
  }

  html[data-theme] .banner-cta {
    min-height: 4rem;
    justify-content: center;
    white-space: normal;
  }
}

@media (max-width: 379.98px) {
  html[data-theme] .spring-message {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  html[data-theme] .timer-group {
    width: fit-content;
    gap: 0.1rem;
  }

  html[data-theme] .timer-box {
    width: 4.2rem;
    height: 4.2rem;
  }
}

/* Theme changes colors only; every header layer keeps identical geometry. */
@media (min-width: 768px) {
  html[data-theme="light"] .banner-spring,
  html[data-theme="dark"] .banner-spring,
  html[data-theme="light"] .banner-spring-content,
  html[data-theme="dark"] .banner-spring-content {
    box-sizing: border-box;
    min-height: 7.8rem;
  }
}

html[data-theme="light"] .header__Top,
html[data-theme="dark"] .header__Top,
html[data-theme="light"] .main-Header__Content,
html[data-theme="dark"] .main-Header__Content {
  box-sizing: border-box;
}

/* Compact wallet, cart count, and signed-in account controls. */
html[data-theme] .header__Top-Wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(72, 122, 202, 0.16);
  border-radius: 0.9rem;
  color: var(--header-muted);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  font-weight: 700;
}

html[data-theme] .header__Top-Wallet-Icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  flex: 0 0 2rem;
  border-radius: 0.65rem;
  color: #fff;
  background: linear-gradient(135deg, var(--header-violet), var(--header-blue));
  box-shadow: 0 0.35rem 0.7rem rgba(91, 102, 213, 0.2);
  font-size: 0.9rem;
}

html[data-theme] .header__Top-Wallet-Label {
  white-space: nowrap;
}

html[data-theme] .header__Top-Wallet-Balance {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 0.55rem;
  color: var(--header-text) !important;
  background: rgba(82, 131, 219, 0.08);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

html[data-theme] .header__Top-Wallet-Balance:hover {
  color: var(--header-violet) !important;
  background: rgba(124, 92, 224, 0.12);
}

html[data-theme] .header__Top-Wallet-Balance small {
  color: var(--header-muted);
  font-size: 0.82em;
  font-weight: 700;
}

html[data-theme] .main-Header__Basket--cart .main-Header__Basket-Circle {
  top: -0.75rem;
  right: -0.7rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.35rem;
  border: 2px solid var(--header-surface) !important;
  background: linear-gradient(135deg, #e75074, var(--header-violet)) !important;
  box-shadow: 0 0.45rem 1rem rgba(179, 65, 151, 0.38), 0 0 0 0.25rem rgba(223, 81, 135, 0.1);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(68, 18, 67, 0.28);
}

html[data-theme] .main-Header__Login--user {
  gap: 0.6rem;
  padding-inline: 0.9rem 1.05rem;
}

html[data-theme] .main-Header__Login-Icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  flex: 0 0 2.2rem;
  border-radius: 50%;
  color: var(--header-blue);
  background: rgba(74, 124, 222, 0.1);
  font-size: 1.3rem;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

html[data-theme] .main-Header__Login--user:hover .main-Header__Login-Icon,
html[data-theme] .main-Header__Login--user:focus-visible .main-Header__Login-Icon {
  color: #fff;
  background: linear-gradient(135deg, var(--header-violet), var(--header-blue));
  transform: scale(1.06);
}

html[data-theme="dark"] .header__Top-Wallet {
  border-color: rgba(123, 171, 235, 0.2);
  color: #b5c6db;
  background: rgba(9, 23, 41, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .header__Top-Wallet-Balance {
  color: #e3edfb !important;
  background: rgba(91, 132, 207, 0.16);
}

html[data-theme="dark"] .header__Top-Wallet-Balance small {
  color: #9fb4cc;
}

html[data-theme="dark"] .main-Header__Basket--cart .main-Header__Basket-Circle {
  border-color: #142840 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #e95c7d, #8763ef) !important;
}

html[data-theme="dark"] .main-Header__Login--user {
  background: rgba(15, 34, 57, 0.78) !important;
}

html[data-theme="dark"] .main-Header__Login-Icon {
  color: #91d9ff;
  background: rgba(68, 153, 213, 0.15);
}

@media (max-width: 576px) {
  html[data-theme] .header__Top-Wallet {
    gap: 0.38rem;
    min-height: 2.75rem;
    padding: 0.32rem 0.58rem;
    font-size: 0.92rem;
  }

  html[data-theme] .header__Top-Wallet-Icon {
    width: 1.8rem;
    height: 1.8rem;
    flex-basis: 1.8rem;
    font-size: 0.78rem;
  }

  html[data-theme] .header__Top-Wallet-Label {
    display: none;
  }

  html[data-theme] .main-Header__Basket--cart .main-Header__Basket-Circle {
    top: -0.55rem;
    right: -0.45rem;
    min-width: 2.05rem;
    height: 2.05rem;
    font-size: 0.9rem;
  }

  html[data-theme] .main-Header__Login--user {
    gap: 0.42rem;
    padding-inline: 0.68rem 0.78rem;
  }

  html[data-theme] .main-Header__Login-Icon {
    width: 1.9rem;
    height: 1.9rem;
    flex-basis: 1.9rem;
    font-size: 1.15rem;
  }
}