:root {
  --bg:#FFFFFF;
  --bg-soft:#F5F7FB;
  --bg-soft-2:#EEF2F8;
  --surface:#FFFFFF;
  --line:#E6EAF2;
  --line-2:#D7DDE8;
  --ink:#0F1B2D;
  --ink-2:#3D4A5F;
  --ink-3:#6B7689;
  --muted:#98A1B3;
  --brand:#1F3FCB; /* deep brand blue from logo */
  --brand-2:#2E5BFF; /* electric accent */
  --brand-soft:#EAF0FF; /* very light blue tint */
  --brand-glow:rgba(46,91,255,0.18);
  --warn:#FF7A2E;
  --good:#1EAB5A;
  --gold:#F5B12D;
  --r:16px;
  --r-lg:24px;
  --r-sm:10px;
  --max:1320px;
  --sh-sm:0 1px 2px rgba(15,27,45,0.04), 0 1px 3px rgba(15,27,45,0.05);
  --sh:0 4px 14px -2px rgba(15,27,45,0.06), 0 2px 6px -2px rgba(15,27,45,0.04);
  --sh-lg:0 20px 50px -12px rgba(15,27,45,0.12), 0 8px 16px -8px rgba(15,27,45,0.06);
  --sh-blue:0 12px 30px -8px var(--brand-glow);
}
 
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
 
html {
  scroll-behavior:smooth;
}
 
body {
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.55;
  width:100%;
  /* overflow-x:clip prevents drawer from causing horizontal scroll without breaking position:sticky */
  overflow-x:clip;
}
 
a {
  color:inherit;
  text-decoration:none;
}
 
button {
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}
 
img {
  display:block;
  max-width:100%;
  /* hide alt text if image fails — keeps layout clean during dev */
  color:transparent;
  font-size:0;
}
 
::selection {
  background:var(--brand-soft);
  color:var(--brand);
}
 
/* ============ ANNOUNCEMENT BAR ============ */
.announce {
  background:var(--brand);
  color:white;
  font-size:13px;
  font-weight:500;
  text-align:center;
  padding:9px 28px;
  letter-spacing:0.01em;
}
 
.announce .dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  margin:0 14px;
  vertical-align:middle;
}
 
.announce a {
  text-decoration:underline;
  text-underline-offset:3px;
}
 
/* ============ TOP UTILITY BAR ============ */
.util {
  background:white;
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-3);
}
 
.util .inner {
  max-width:var(--max);
  margin:0 auto;
  padding:10px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
 
.util .left {
  display:flex;
  gap:24px;
  align-items:center;
}
 
.util .left span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
 
.util .left svg {
  width:13px;
  height:13px;
  color:var(--brand-2);
}
 
.util .right {
  display:flex;
  gap:18px;
  align-items:center;
}
 
.util .right a:hover {
  color:var(--brand);
}
 
.util .right .sep {
  color:var(--line-2);
}
 
/* ============ NAV ============ */
.header-main {
  background:rgba(255,255,255,0.95);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:padding 0.25s ease, box-shadow 0.25s ease;
}
 
body.scrolled .header-main {
  box-shadow:0 4px 20px -8px rgba(15,27,45,0.1);
}
 
body.scrolled .header-main .inner {
  padding-top:10px;
  padding-bottom:10px;
}
 
body.scrolled .header-main .logo img {
  height:38px;
}
 
.header-main .logo img,
.header-main .inner {
  transition:height 0.25s ease, padding 0.25s ease;
}
 
.header-main .inner {
  max-width:var(--max);
  margin:0 auto;
  padding:18px 28px;
  display:flex;
  align-items:center;
  gap:36px;
}
 
.logo {
  display:flex;
  align-items:center;
  gap:12px;
}
 
.logo img {
  height:48px;
  width:auto;
  display:block;
}
 
.logo-mark {
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);
  display:grid;
  place-items:center;
  box-shadow:var(--sh-blue);
  position:relative;
}
 
.logo-mark svg {
  width:22px;
  height:22px;
}
 
.logo-text {
  display:flex;
  flex-direction:column;
  line-height:1;
}
 
.logo-text .a {
  font-weight:800;
  font-size:17px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
 
.logo-text .b {
  font-size:10.5px;
  color:var(--ink-3);
  letter-spacing:0.06em;
  margin-top:3px;
  font-weight:500;
  text-transform:uppercase;
}
 
/* search */
.search {
  flex:1;
  max-width:560px;
  display:flex;
  align-items:center;
  background:var(--bg-soft);
  border:1.5px solid transparent;
  border-radius:14px;
  transition:all 0.2s;
  overflow:hidden;
}
 
.search:focus-within {
  border-color:var(--brand-2);
  background:white;
  box-shadow:0 0 0 4px var(--brand-glow);
}
 
.search .cat-pick {
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 16px;
  border-right:1px solid var(--line);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  flex-shrink:0;
}
 
.search .cat-pick svg {
  width:12px;
  height:12px;
  color:var(--ink-3);
}
 
.search input {
  flex:1;
  background:none;
  border:none;
  outline:none;
  padding:13px 16px;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
}
 
.search input::placeholder {
  color:var(--muted);
}
 
.search button.go {
  background:var(--brand);
  color:white;
  padding:0 22px;
  align-self:stretch;
  transition:background 0.2s;
}
 
.search button.go:hover {
  background:var(--brand-2);
}
 
.search button.go svg {
  width:18px;
  height:18px;
}
 
/* right cluster: phone, account, wishlist, cart */
.nav-right {
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}
 
.phone-pill {
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 14px 8px 8px;
  border-radius:99px;
  background:var(--bg-soft);
  transition:background 0.2s;
}
 
.phone-pill:hover {
  background:var(--bg-soft-2);
}
 
.phone-pill .ico {
  width:34px;
  height:34px;
  border-radius:50%;
  background:white;
  display:grid;
  place-items:center;
  color:var(--brand);
  box-shadow:var(--sh-sm);
}
 
.phone-pill .ico svg {
  width:15px;
  height:15px;
}
 
.phone-pill .t {
  display:flex;
  flex-direction:column;
  line-height:1;
}
 
.phone-pill .t .a {
  font-size:10px;
  color:var(--ink-3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:3px;
}
 
.phone-pill .t .b {
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-0.01em;
}
 
.icon-btn {
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--bg-soft);
  display:grid;
  place-items:center;
  color:var(--ink-2);
  position:relative;
  transition:all 0.2s;
}
 
.icon-btn:hover {
  background:var(--brand-soft);
  color:var(--brand);
}
 
.icon-btn svg {
  width:19px;
  height:19px;
}
 
.icon-btn .badge {
  position:absolute;
  top:-3px;
  right:-3px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  background:var(--brand);
  color:white;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  display:grid;
  place-items:center;
  border:2px solid white;
}
 
.cart-btn {
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 16px 8px 8px;
  border-radius:99px;
  background:var(--ink);
  color:white;
  transition:all 0.2s;
}
 
.cart-btn:hover {
  background:var(--brand);
}
 
.cart-btn .ico {
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  display:grid;
  place-items:center;
  position:relative;
}
 
.cart-btn .ico svg {
  width:16px;
  height:16px;
}
 
.cart-btn .ico .badge {
  position:absolute;
  top:-3px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  background:var(--warn);
  color:white;
  border-radius:99px;
  font-size:10.5px;
  font-weight:700;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
}
 
.cart-btn:hover .ico .badge {
  border-color:var(--brand);
}
 
.cart-btn .t {
  display:flex;
  flex-direction:column;
  line-height:1;
}
 
.cart-btn .t .a {
  font-size:10px;
  color:rgba(255,255,255,0.6);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:3px;
}
 
.cart-btn .t .b {
  font-size:14px;
  font-weight:700;
}
 
/* ============ MAIN NAV ============ */
.navbar {
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;
  /* sit just below header-main */
  top:82px;
  z-index:49;
  transition:top 0.25s ease;
}
 
body.scrolled .navbar {
  top:62px;
}
 
.navbar .inner {
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:8px;
}
 
.nav-cat {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--brand);
  color:white;
  padding:14px 22px;
  border-radius:12px 12px 0 0;
  font-weight:700;
  font-size:14px;
  margin-bottom:-1px;
  position:relative;
  z-index:1;
}
 
.nav-cat svg {
  width:16px;
  height:16px;
}
 
.nav-links {
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
}
 
.nav-links a {
  padding:14px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color 0.2s;
  position:relative;
}
 
.nav-links a:hover {
  color:var(--brand);
}
 
.nav-links a.dd::after {
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  opacity:0.55;
  margin-left:2px;
}
 
.nav-links a.hot {
  color:var(--warn);
}
 
.nav-links a.hot::before {
  content:"HOT";
  position:absolute;
  top:6px;
  right:-2px;
  background:var(--warn);
  color:white;
  font-size:8.5px;
  font-weight:800;
  padding:1.5px 4px;
  border-radius:3px;
  letter-spacing:0.04em;
}
 
.nav-extra {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  color:var(--ink-3);
}
 
.nav-extra a {
  display:flex;
  gap:6px;
  align-items:center;
  font-weight:500;
}
 
.nav-extra a:hover {
  color:var(--brand);
}
 
.nav-extra svg {
  width:14px;
  height:14px;
}
 
/* ============ HERO ============ */
.hero {
  padding:28px 28px 0;
  background:var(--bg);
}
 
.hero-inner {
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:240px 1fr 280px;
  gap:18px;
}
 
/* sidebar categories */
.sidebar {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px;
}
 
.sidebar a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-2);
  transition:all 0.15s;
}
 
.sidebar a:hover {
  background:var(--brand-soft);
  color:var(--brand);
}
 
.sidebar a .ico {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:var(--brand-2);
  flex-shrink:0;
}
 
.sidebar a .ico svg {
  width:18px;
  height:18px;
}
 
.sidebar a .arrow {
  margin-left:auto;
  color:var(--muted);
  transition:transform 0.2s;
}
 
.sidebar a:hover .arrow {
  transform:translateX(2px);
  color:var(--brand);
}
 
.sidebar a .arrow svg {
  width:12px;
  height:12px;
}
 
/* main hero banner */
/* ============ HERO SLIDER ============ */
.hero-main {
  border-radius:var(--r);
  position:relative;
  overflow:hidden;
  min-height:560px;
}
 
.slides {
  position:relative;
  width:100%;
  min-height:560px;
}
 
.slide {
  position:absolute;
  inset:0;
  padding:48px 60px 100px;
  display:flex;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.7s ease, visibility 0s linear 0.7s;
}
 
.slide.on {
  opacity:1;
  visibility:visible;
  transition:opacity 0.7s ease, visibility 0s linear 0s;
  z-index:2;
}
 
.slide::before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  top:-180px;
  right:-160px;
  pointer-events:none;
}
 
.slide::after {
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  bottom:-120px;
  left:-80px;
  pointer-events:none;
}
 
/* slide 1 — blue */
.slide.s1 {
  background:linear-gradient(115deg, #E8EFFF 0%, #F4F7FF 50%, #DCE6FF 100%);
}
 
.slide.s1::before {
  background:radial-gradient(circle, rgba(46,91,255,0.22) 0%, transparent 65%);
}
 
.slide.s1::after {
  background:radial-gradient(circle, rgba(46,91,255,0.18) 0%, transparent 65%);
}
 
/* slide 2 — peach */
.slide.s2 {
  background:linear-gradient(115deg, #FFF1E6 0%, #FFF8F0 50%, #FFE0C7 100%);
}
 
.slide.s2::before {
  background:radial-gradient(circle, rgba(255,122,46,0.22) 0%, transparent 65%);
}
 
.slide.s2::after {
  background:radial-gradient(circle, rgba(255,122,46,0.15) 0%, transparent 65%);
}
 
/* slide 3 — mint */
.slide.s3 {
  background:linear-gradient(115deg, #E6FFF0 0%, #F0FFF5 50%, #C5F2D7 100%);
}
 
.slide.s3::before {
  background:radial-gradient(circle, rgba(30,171,90,0.22) 0%, transparent 65%);
}
 
.slide.s3::after {
  background:radial-gradient(circle, rgba(30,171,90,0.15) 0%, transparent 65%);
}
 
/* fade-in animation for active slide content */
.slide.on .hero-content > * {
  animation:slideUp 0.7s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
 
.slide.on .hero-content > *:nth-child(1) {
  animation-delay:0.1s;
}
 
.slide.on .hero-content > *:nth-child(2) {
  animation-delay:0.2s;
}
 
.slide.on .hero-content > *:nth-child(3) {
  animation-delay:0.3s;
}
 
.slide.on .hero-content > *:nth-child(4) {
  animation-delay:0.4s;
}
 
.slide.on .hero-content > *:nth-child(5) {
  animation-delay:0.5s;
}
 
.slide.on .hero-visual {
  animation:slideRight 0.8s cubic-bezier(0.2,0.8,0.2,1) backwards;
  animation-delay:0.2s;
}
 
@keyframes slideUp {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
 
@keyframes slideRight {
  from {
    opacity:0;
    transform:translate(40px,-50%);
  }
  to {
    opacity:1;
    transform:translate(0,-50%);
  }
}
 
.hero-content {
  position:relative;
  z-index:2;
  max-width:48%;
}
 
.hero-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:white;
  padding:7px 14px;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  box-shadow:var(--sh-sm);
  margin-bottom:22px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
 
.slide.s2 .hero-tag {
  color:var(--warn);
}
 
.slide.s3 .hero-tag {
  color:var(--good);
}
 
.hero-tag .pulse {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 0 4px rgba(255,122,46,0.25);
  animation:pulse 1.5s infinite;
}
 
.slide.s3 .hero-tag .pulse {
  background:var(--good);
  box-shadow:0 0 0 4px rgba(30,171,90,0.25);
}
 
@keyframes pulse {
  0%,100% {
    transform:scale(1);
    opacity:1;
  }
  50% {
    transform:scale(1.2);
    opacity:0.7;
  }
}
 
.hero h1 {
  font-family:'Archivo',sans-serif;
  font-size:clamp(28px,4.4vw,36px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:18px;
}
 
.hero h1 .blue {
  color:var(--brand);
  font-style:italic;
}
 
.slide.s2 h1 .blue {
  color:var(--warn);
}
 
.slide.s3 h1 .blue {
  color:var(--good);
}
 
.hero-sub {
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.55;
  max-width:380px;
  margin-bottom:30px;
}
 
.hero-price {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
 
.hero-price .from {
  font-size:13px;
  color:var(--ink-3);
  font-weight:500;
}
 
.hero-price .val {
  font-family:'Archivo',sans-serif;
  font-size:clamp(30px,3.4vw,42px);
  color:var(--brand);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
}
 
.slide.s2 .hero-price .val {
  color:var(--warn);
}
 
.slide.s3 .hero-price .val {
  color:var(--good);
}
 
.hero-price .was {
  font-size:18px;
  color:var(--ink-3);
  text-decoration:line-through;
}
 
.hero-cta {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
 
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.005em;
  transition:all 0.2s;
}
 
.btn-primary {
  background:var(--brand);
  color:white;
  box-shadow:var(--sh-blue);
}
 
.btn-primary:hover {
  background:var(--brand-2);
  transform:translateY(-1px);
  box-shadow:0 18px 40px -8px var(--brand-glow);
}
 
.slide.s2 .btn-primary {
  background:var(--warn);
  box-shadow:0 12px 30px -8px rgba(255,122,46,0.4);
}
 
.slide.s2 .btn-primary:hover {
  background:#FF9355;
}
 
.slide.s3 .btn-primary {
  background:var(--good);
  box-shadow:0 12px 30px -8px rgba(30,171,90,0.4);
}
 
.slide.s3 .btn-primary:hover {
  background:#27C46B;
}
 
.btn-light {
  background:white;
  color:var(--ink);
  box-shadow:var(--sh-sm);
}
 
.btn-light:hover {
  box-shadow:var(--sh);
}
 
.btn svg {
  width:15px;
  height:15px;
}
 
.hero-visual {
  position:absolute;
  right:-40px;
  top:50%;
  transform:translateY(-50%);
  width:55%;
  max-width:620px;
  z-index:1;
  pointer-events:none;
}
 
.hero-visual img {
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(15,27,45,0.18));
  mix-blend-mode:multiply;
}
 
/* slider controls */
.slider-arrows {
  position:absolute;
  bottom:24px;
  right:24px;
  display:flex;
  gap:8px;
  z-index:5;
}
 
.slider-arrow {
  width:42px;
  height:42px;
  border-radius:50%;
  background:white;
  color:var(--ink);
  box-shadow:var(--sh);
  display:grid;
  place-items:center;
  transition:all 0.2s;
  cursor:pointer;
}
 
.slider-arrow:hover {
  background:var(--brand);
  color:white;
  transform:scale(1.05);
}
 
.slider-arrow svg {
  width:16px;
  height:16px;
}
 
.hero-dots {
  position:absolute;
  bottom:32px;
  left:60px;
  display:flex;
  gap:8px;
  z-index:5;
}
 
.hero-dots .d {
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(15,27,45,0.2);
  cursor:pointer;
  transition:all 0.3s;
  border:none;
  padding:0;
}
 
.hero-dots .d:hover {
  background:rgba(15,27,45,0.4);
}
 
.hero-dots .d.on {
  width:28px;
  border-radius:99px;
  background:var(--brand);
}
 
.slide.s2 .hero-dots .d.on,.slides[data-active="1"] ~ .hero-dots .d.on {
  background:var(--warn);
}
 
.slide.s3 .hero-dots .d.on,.slides[data-active="2"] ~ .hero-dots .d.on {
  background:var(--good);
}
 
/* hero side promos */
.hero-side {
  display:flex;
  flex-direction:column;
  gap:18px;
}
 
.promo-card {
  border-radius:var(--r);
  padding:24px;
  position:relative;
  overflow:hidden;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:200px;
  box-shadow:var(--sh-sm);
}
 
.promo-card.a {
  background:linear-gradient(135deg,#FFF4EA 0%,#FFE8D2 100%);
}
 
.promo-card.b {
  background:linear-gradient(135deg,#E6FFF0 0%,#D3F5E1 100%);
}
 
.promo-card .promo-tag {
  font-size:11px;
  font-weight:700;
  color:var(--warn);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
 
.promo-card.b .promo-tag {
  color:var(--good);
}
 
.promo-card h3 {
  font-family:'Archivo',sans-serif;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-top:8px;
}
 
.promo-card .from {
  font-size:12px;
  color:var(--ink-3);
  margin-top:6px;
}
 
.promo-card .price {
  font-family:'Archivo',sans-serif;
  font-size:30px;
  line-height:1;
  letter-spacing:-0.02em;
  margin-top:2px;
}
 
.promo-card .price .small {
  font-size:18px;
  color:var(--ink-3);
}
 
.promo-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-top:14px;
  align-self:flex-start;
}
 
.promo-link:hover {
  color:var(--brand);
}
 
/* ============ SERVICE STRIP ============ */
.services {
  max-width:var(--max);
  margin:32px auto 0;
  padding:0 28px;
}
 
.services-inner {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
 
.svc {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:12px;
  transition:background 0.2s;
}
 
.svc:hover {
  background:var(--bg-soft);
}
 
.svc + .svc {
  border-left:1px solid var(--line);
}
 
.services-inner:hover .svc + .svc {
  border-left-color:transparent;
}
 
.svc .ico {
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--brand-soft);
  display:grid;
  place-items:center;
  color:var(--brand);
  flex-shrink:0;
}
 
.svc .ico svg {
  width:22px;
  height:22px;
}
 
.svc .t {
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
 
.svc .t .a {
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin-bottom:4px;
}
 
.svc .t .b {
  font-size:12.5px;
  color:var(--ink-3);
}
 
/* ============ SECTION HEADER ============ */
section {
  padding:64px 28px;
}
 
.section-inner {
  max-width:var(--max);
  margin:0 auto;
}
 
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:32px;
  gap:30px;
  flex-wrap:wrap;
}
 
.section-head .left .eyebrow {
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:0.1em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
 
.section-head .left .eyebrow::before {
  content:"";
  width:24px;
  height:2px;
  background:var(--brand);
  border-radius:99px;
}
 
.section-head h2 {
  font-family:'Archivo',sans-serif;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
}
 
.section-head h2 .blue {
  color:var(--brand);
  font-style:italic;
}
 
.section-head .right {
  display:flex;
  gap:10px;
  align-items:center;
}
 
.tabs {
  display:flex;
  gap:6px;
  background:var(--bg-soft);
  padding:5px;
  border-radius:99px;
}
 
.tabs button {
  padding:8px 16px;
  border-radius:99px;
  font-weight:600;
  font-size:13px;
  color:var(--ink-3);
  transition:all 0.2s;
}
 
.tabs button:hover {
  color:var(--ink);
}
 
.tabs button.on {
  background:white;
  color:var(--brand);
  box-shadow:var(--sh-sm);
}
 
.view-all {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--brand);
  padding:9px 16px;
  border-radius:99px;
  border:1.5px solid var(--brand-soft);
  transition:all 0.2s;
}
 
.view-all:hover {
  background:var(--brand);
  color:white;
  border-color:var(--brand);
}
 
.view-all svg {
  width:13px;
  height:13px;
}
 
/* ============ CATEGORY TILES ============ */
.cats {
  padding-top:48px;
}
 
.cat-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
 
.cat-tile {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 16px 20px;
  text-align:center;
  transition:all 0.25s;
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
}
 
.cat-tile:hover {
  border-color:var(--brand-2);
  transform:translateY(-3px);
  box-shadow:var(--sh);
}
 
.cat-tile .ico {
  width:64px;
  height:64px;
  border-radius:18px;
  background:var(--brand-soft);
  display:grid;
  place-items:center;
  color:var(--brand);
  margin-bottom:14px;
  transition:all 0.25s;
}
 
.cat-tile:hover .ico {
  background:var(--brand);
  color:white;
}
 
.cat-tile .ico svg {
  width:30px;
  height:30px;
}
 
.cat-tile h4 {
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-0.005em;
  margin-bottom:3px;
  color:var(--ink);
}
 
.cat-tile .count {
  font-size:11.5px;
  color:var(--ink-3);
  font-weight:500;
}
 
/* ============ PRODUCT GRID ============ */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
 
.product {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:all 0.25s;
  display:flex;
  flex-direction:column;
  position:relative;
}
 
.product:hover {
  border-color:transparent;
  box-shadow:var(--sh-lg);
  transform:translateY(-4px);
}
 
.prod-image {
  aspect-ratio:1;
  background:var(--bg-soft);
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
}
 
.prod-image img {
  width:78%;
  height:78%;
  object-fit:contain;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
 
.product:hover .prod-image img {
  transform:scale(1.08) rotate(-2deg);
}
 
.prod-chip {
  position:absolute;
  top:14px;
  left:14px;
  padding:4px 9px;
  border-radius:99px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
 
.prod-chip.new {
  background:var(--brand);
  color:white;
}
 
.prod-chip.sale {
  background:var(--warn);
  color:white;
}
 
.prod-chip.hot {
  background:var(--ink);
  color:white;
}
 
.prod-actions {
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  transform:translateX(8px);
  transition:all 0.25s;
}
 
.product:hover .prod-actions {
  opacity:1;
  transform:translateX(0);
}
 
.pa {
  width:36px;
  height:36px;
  border-radius:50%;
  background:white;
  box-shadow:var(--sh-sm);
  display:grid;
  place-items:center;
  color:var(--ink-2);
  transition:all 0.2s;
}
 
.pa:hover {
  background:var(--brand);
  color:white;
}
 
.pa svg {
  width:15px;
  height:15px;
}
 
.prod-quickadd {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--ink);
  color:white;
  padding:12px;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transform:translateY(100%);
  transition:transform 0.25s;
}
 
.product:hover .prod-quickadd {
  transform:translateY(0);
}
 
.prod-quickadd:hover {
  background:var(--brand);
}
 
.prod-quickadd svg {
  width:14px;
  height:14px;
}
 
.prod-info {
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
}
 
.prod-cat {
  font-size:11px;
  color:var(--brand);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
 
.prod-title {
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-0.005em;
  line-height:1.35;
  margin-bottom:10px;
  color:var(--ink);
}
 
.prod-title a:hover {
  color:var(--brand);
}
 
.stars {
  display:flex;
  gap:2px;
  align-items:center;
  margin-bottom:12px;
}
 
.stars svg {
  width:13px;
  height:13px;
  color:var(--gold);
}
 
.stars .num {
  font-size:12px;
  color:var(--ink-3);
  margin-left:6px;
  font-weight:600;
}
 
.prod-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
}
 
.prod-price {
  display:flex;
  align-items:baseline;
  gap:8px;
}
 
.prod-price .now {
  font-family:'Archivo',sans-serif;
  font-size:22px;
  color:var(--brand);
  letter-spacing:-0.015em;
  line-height:1;
}
 
.prod-price .was {
  font-size:13px;
  color:var(--ink-3);
  text-decoration:line-through;
}
 
.prod-vat {
  font-size:10.5px;
  color:var(--ink-3);
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
 
/* ============ BIG BANNER ============ */
.big-banner {
  padding-top:0;
}
 
.bb-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:18px;
}
 
.bb-card {
  border-radius:var(--r-lg);
  padding:48px;
  position:relative;
  overflow:hidden;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
 
.bb-card.main {
  background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%);
  color:white;
}
 
.bb-card.main::before {
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
  top:-200px;
  right:-100px;
}
 
.bb-card.main::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at right, black, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at right, black, transparent 75%);
}
 
.bb-card.main .content {
  position:relative;
  z-index:1;
  max-width:60%;
}
 
.bb-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);
  padding:6px 13px;
  border-radius:99px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:18px;
}
 
.bb-card h2 {
  font-family:'Archivo',sans-serif;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:16px;
  font-weight:800;
}
 
.bb-card.main p {
  color:rgba(255,255,255,0.85);
  font-size:15px;
  line-height:1.55;
  max-width:380px;
  margin-bottom:26px;
}
 
.bb-card.main .btn-light {
  background:white;
  color:var(--brand);
}
 
.bb-card.main .btn-light:hover {
  transform:translateY(-1px);
}
 
.bb-card.main .visual {
  position:absolute;
  right:-30px;
  bottom:-50px;
  width:50%;
  max-width:380px;
  z-index:0;
  opacity:0.95;
}
 
.bb-card.main .visual img {
  width:100%;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.3));
  transform:rotate(-8deg);
}
 
.bb-card.side {
  background:linear-gradient(135deg,#FFF8E6 0%,#FFE9B8 100%);
  color:var(--ink);
}
 
.bb-card.side h2 {
  color:var(--ink);
  font-size:32px;
}
 
.bb-card.side p {
  color:var(--ink-2);
  font-size:14px;
  margin-bottom:20px;
}
 
.bb-card.side .deal-price {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:18px;
}
 
.bb-card.side .deal-price .pct {
  background:var(--warn);
  color:white;
  font-weight:800;
  font-size:18px;
  padding:6px 12px;
  border-radius:8px;
  font-family:'Archivo';
}
 
.bb-card.side .timer {
  display:flex;
  gap:6px;
}
 
.timer-box {
  background:white;
  border-radius:8px;
  padding:8px 10px;
  text-align:center;
  min-width:48px;
  box-shadow:var(--sh-sm);
}
 
.timer-box .v {
  font-family:'Archivo',sans-serif;
  font-size:20px;
  color:var(--ink);
  line-height:1;
}
 
.timer-box .l {
  font-size:9.5px;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:700;
  margin-top:2px;
}
 
/* ============ FEATURED PRODUCT (DETAIL CARD) ============ */
.featured {
  background:var(--bg-soft);
}
 
.feat-card {
  background:white;
  border-radius:var(--r-lg);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  box-shadow:var(--sh);
}
 
.feat-visual {
  background:linear-gradient(135deg,#F4F7FF 0%,#E8EFFF 100%);
  padding:60px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:540px;
}
 
.feat-visual::before {
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(46,91,255,0.15),transparent 65%);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
 
.feat-visual img {
  width:100%;
  max-width:480px;
  position:relative;
  filter:drop-shadow(0 30px 40px rgba(15,27,45,0.18));
}
 
.feat-thumbs {
  position:absolute;
  left:32px;
  bottom:32px;
  display:flex;
  gap:8px;
}
 
.feat-thumb {
  width:62px;
  height:62px;
  border-radius:12px;
  background:white;
  border:2px solid var(--line);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:border-color 0.2s;
  overflow:hidden;
}
 
.feat-thumb img {
  width:80%;
  height:80%;
  object-fit:contain;
  filter:none;
}
 
.feat-thumb.on {
  border-color:var(--brand);
}
 
.feat-info {
  padding:60px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
 
.feat-brand {
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
 
.feat-brand::before {
  content:"";
  width:24px;
  height:2px;
  background:var(--brand);
  border-radius:99px;
}
 
.feat-info h3 {
  font-family:'Archivo',sans-serif;
  font-size:38px;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:18px;
  font-weight:800;
}
 
.feat-stars {
  display:flex;
  gap:2px;
  align-items:center;
  margin-bottom:18px;
}
 
.feat-stars svg {
  width:15px;
  height:15px;
  color:var(--gold);
}
 
.feat-stars .num {
  font-size:13px;
  color:var(--ink-2);
  font-weight:700;
  margin-left:8px;
}
 
.feat-stars .reviews {
  color:var(--ink-3);
  font-size:13px;
}
 
.feat-info p {
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:24px;
}
 
.feat-pills {
  display:flex;
  gap:8px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
 
.feat-pill {
  background:var(--bg-soft);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:99px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:6px;
}
 
.feat-pill svg {
  width:12px;
  height:12px;
  color:var(--brand);
}
 
.feat-price-row {
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:6px;
}
 
.feat-price {
  font-family:'Archivo',sans-serif;
  font-size:44px;
  color:var(--brand);
  letter-spacing:-0.02em;
  line-height:1;
}
 
.feat-was {
  color:var(--ink-3);
  text-decoration:line-through;
  font-size:20px;
}
 
.feat-save {
  background:#FFE9D6;
  color:var(--warn);
  font-size:12px;
  font-weight:800;
  padding:4px 10px;
  border-radius:8px;
}
 
.feat-vat {
  font-size:12px;
  color:var(--ink-3);
  font-weight:600;
  margin-bottom:26px;
}
 
.feat-buy {
  display:flex;
  gap:10px;
  align-items:center;
}
 
.qty {
  display:flex;
  align-items:center;
  background:white;
  border:1.5px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
 
.qty button {
  width:42px;
  height:50px;
  font-size:18px;
  color:var(--ink-2);
  font-weight:500;
  transition:background 0.2s;
}
 
.qty button:hover {
  background:var(--bg-soft);
  color:var(--ink);
}
 
.qty .v {
  width:38px;
  text-align:center;
  font-weight:700;
  font-size:15px;
}
 
.feat-buy .btn-primary {
  flex:1;
  justify-content:center;
  padding:15px 22px;
}
 
/* ============ MID NEWSLETTER STRIP ============ */
.newsletter {
  padding:48px 28px;
}
 
.nl-inner {
  max-width:var(--max);
  margin:0 auto;
  background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%);
  border-radius:var(--r-lg);
  padding:56px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:white;
}
 
.nl-inner::before {
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
  top:-160px;
  right:-80px;
}
 
.nl-inner::after {
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 65%);
  bottom:-130px;
  left:30%;
}
 
.nl-left {
  position:relative;
  z-index:1;
}
 
.nl-icon {
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  margin-bottom:18px;
}
 
.nl-icon svg {
  width:24px;
  height:24px;
}
 
.nl-left h2 {
  font-family:'Archivo',sans-serif;
  font-size:36px;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:10px;
  font-weight:800;
}
 
.nl-left p {
  color:rgba(255,255,255,0.85);
  font-size:14.5px;
  max-width:380px;
}
 
.nl-form {
  position:relative;
  z-index:1;
}
 
.nl-input {
  display:flex;
  background:white;
  border-radius:14px;
  padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}
 
.nl-input input {
  flex:1;
  padding:14px 18px;
  background:none;
  border:none;
  outline:none;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
}
 
.nl-input button {
  background:var(--ink);
  color:white;
  padding:14px 24px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background 0.2s;
}
 
.nl-input button:hover {
  background:var(--brand);
}
 
.nl-input button svg {
  width:14px;
  height:14px;
}
 
.nl-perks {
  margin-top:18px;
  display:flex;
  gap:24px;
  color:rgba(255,255,255,0.85);
  font-size:13px;
}
 
.nl-perks span {
  display:flex;
  align-items:center;
  gap:8px;
}
 
.nl-perks svg {
  width:14px;
  height:14px;
}
 
/* ============ BRANDS ============ */
.brands {
  padding:48px 28px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
 
.brands-inner {
  max-width:var(--max);
  margin:0 auto;
}
 
.brands-head {
  text-align:center;
  margin-bottom:28px;
}
 
.brands-head .eyebrow {
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}
 
.brands-head h3 {
  font-family:'Archivo',sans-serif;
  font-size:24px;
  letter-spacing:-0.02em;
  font-weight:800;
}
 
.brand-row {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  align-items:center;
}
 
.brand {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  display:grid;
  place-items:center;
  transition:all 0.2s;
  height:90px;
}
 
.brand:hover {
  border-color:var(--brand-2);
  transform:translateY(-2px);
}
 
.brand span {
  font-weight:800;
  font-size:16px;
  color:var(--ink-3);
  letter-spacing:-0.01em;
  font-style:italic;
  transition:color 0.2s;
}
 
.brand:hover span {
  color:var(--brand);
}
 
/* ============ FOOTER ============ */
footer {
  background:#0F1B2D;
  color:rgba(255,255,255,0.7);
  padding:72px 28px 0;
  margin-top:0;
}
 
.foot-inner {
  max-width:var(--max);
  margin:0 auto;
}
 
.foot-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;
  gap:50px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
 
.foot-brand .logo img {
  height:54px;
}
 
.foot-brand p {
  font-size:13.5px;
  line-height:1.6;
  margin:18px 0 22px;
  max-width:320px;
}
 
.foot-contact {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:22px;
}
 
.foot-contact a {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:13.5px;
  color:rgba(255,255,255,0.85);
}
 
.foot-contact a:hover {
  color:white;
}
 
.foot-contact .ico {
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  color:#88A4FF;
  flex-shrink:0;
}
 
.foot-contact .ico svg {
  width:15px;
  height:15px;
}
 
.foot-contact .t {
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
 
.foot-contact .t .a {
  font-size:11px;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
  margin-bottom:3px;
}
 
.foot-contact .t .b {
  font-weight:700;
  color:white;
  font-size:14px;
}
 
.foot-col h5 {
  font-size:14px;
  font-weight:700;
  color:white;
  margin-bottom:20px;
}
 
.foot-col ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
 
.foot-col a {
  font-size:13.5px;
  transition:color 0.15s;
}
 
.foot-col a:hover {
  color:white;
}
 
.foot-col.newsl p {
  font-size:13.5px;
  line-height:1.55;
  margin-bottom:14px;
}
 
.foot-mini-form {
  display:flex;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  padding:4px;
  border:1px solid rgba(255,255,255,0.1);
}
 
.foot-mini-form input {
  flex:1;
  background:none;
  border:none;
  outline:none;
  padding:11px 14px;
  color:white;
  font-family:inherit;
  font-size:13px;
}
 
.foot-mini-form input::placeholder {
  color:rgba(255,255,255,0.4);
}
 
.foot-mini-form button {
  background:var(--brand);
  color:white;
  padding:0 16px;
  border-radius:7px;
  display:grid;
  place-items:center;
  transition:background 0.2s;
}
 
.foot-mini-form button:hover {
  background:var(--brand-2);
}
 
.foot-mini-form button svg {
  width:15px;
  height:15px;
}
 
.foot-socials {
  display:flex;
  gap:8px;
  margin-top:18px;
}
 
.foot-socials a {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  transition:all 0.2s;
}
 
.foot-socials a:hover {
  background:var(--brand);
}
 
.foot-socials svg {
  width:15px;
  height:15px;
  color:white;
}
 
.foot-bottom {
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12.5px;
  color:rgba(255,255,255,0.5);
  gap:24px;
  flex-wrap:wrap;
}
 
.foot-bottom .pays {
  display:flex;
  gap:8px;
  align-items:center;
}
 
.pay-chip {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  padding:5px 10px;
  border-radius:6px;
  font-size:10px;
  color:rgba(255,255,255,0.7);
  font-weight:700;
  letter-spacing:0.04em;
}
 
/* ============ RESPONSIVE ============ */
/* ============ MOBILE MENU BUTTON ============ */
.mobile-menu-btn {
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--bg-soft);
  color:var(--ink);
  place-items:center;
  flex-shrink:0;
}
 
.mobile-menu-btn svg {
  width:20px;
  height:20px;
}
 
/* ============ MOBILE SEARCH BAR ============ */
.mobile-search {
  display:none;
  background:white;
  border-bottom:1px solid var(--line);
  padding:12px 20px;
  position:sticky;
  top:74px;
  z-index:49;
}
 
.mobile-search .search {
  display:flex !important;
  width:100%;
  max-width:none;
}
 
/* ============ DRAWER ============ */
.drawer-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,27,45,0.5);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s, visibility 0s linear 0.3s;
  z-index:99;
  backdrop-filter:blur(4px);
}
 
.drawer-overlay.open {
  opacity:1;
  visibility:visible;
  transition:opacity 0.3s, visibility 0s linear 0s;
}
 
.drawer {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:320px;
  max-width:85vw;
  background:white;
  z-index:100;
  transform:translateX(-100%);
  transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 50px rgba(15,27,45,0.2);
  overflow:hidden;
}
 
.drawer.open {
  transform:translateX(0);
}
 
.drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
 
.drawer-close {
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--bg-soft);
  color:var(--ink);
  display:grid;
  place-items:center;
}
 
.drawer-close svg {
  width:18px;
  height:18px;
}
 
.drawer-body {
  flex:1;
  overflow-y:auto;
  padding:18px 14px 30px;
}
 
.drawer-call {
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--brand-soft);
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:18px;
}
 
.drawer-call .ico {
  width:38px;
  height:38px;
  border-radius:50%;
  background:white;
  color:var(--brand);
  display:grid;
  place-items:center;
  box-shadow:var(--sh-sm);
  flex-shrink:0;
}
 
.drawer-call .ico svg {
  width:17px;
  height:17px;
}
 
.drawer-call .t {
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
 
.drawer-call .t .a {
  font-size:11px;
  color:var(--brand);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:3px;
}
 
.drawer-call .t .b {
  font-weight:800;
  color:var(--ink);
  font-size:16px;
}
 
.drawer-section {
  font-size:11px;
  color:var(--ink-3);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:14px 10px 8px;
}
 
.drawer-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  transition:background 0.15s;
}
 
.drawer-link:hover,.drawer-link:active {
  background:var(--bg-soft);
  color:var(--brand);
}
 
.drawer-link svg {
  width:14px;
  height:14px;
  color:var(--ink-3);
}
 
.drawer-link.hot .hot-badge {
  background:var(--warn);
  color:white;
  font-size:9px;
  font-weight:800;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.04em;
}
 
body.no-scroll {
  overflow:hidden;
}
 
/* ============ RESPONSIVE ============ */
@media (max-width:1280px) {
  .nav-links a {
    padding:14px 12px;
    font-size:13.5px;
  }
  .header-main .inner {
    gap:24px;
  }
  .search {
    max-width:480px;
  }
}
 
@media (max-width:1180px) {
  .hero-inner {
    grid-template-columns:1fr;
    gap:18px;
  }
  .sidebar {
    display:none;
  }
  .hero-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .phone-pill .t {
    display:none;
  }
  .phone-pill {
    padding:6px;
  }
  .cart-btn .t {
    display:none;
  }
  .cart-btn {
    padding:6px;
  }
  .cart-btn .ico {
    width:38px;
    height:38px;
  }
}
 
@media (max-width:1024px) {
  .cat-grid {
    grid-template-columns:repeat(4,1fr);
  }
  .prod-grid {
    grid-template-columns:repeat(3,1fr);
  }
  .prod-grid .product:nth-child(4) {
    display:none;
  }
  .feat-info h3 {
    font-size:32px;
  }
  .feat-visual {
    min-height:420px;
  }
  .nav-extra {
    display:none;
  }
  .header-main .inner {
    padding:14px 20px;
    gap:18px;
  }
  .navbar .inner {
    padding:0 20px;
  }
  .nav-links a {
    padding:14px 10px;
    font-size:13px;
  }
  .nav-cat {
    padding:14px 16px;
    font-size:13px;
  }
}
 
@media (max-width:900px) {
  .mobile-menu-btn {
    display:grid;
  }
  .search {
    display:none;
  }
  .phone-pill {
    display:none;
  }
  .navbar {
    display:none;
  }
  .mobile-search {
    display:block;
  }
  .icon-btn[aria-label="Account"] {
    display:none;
  }
  .util .left span:nth-child(2) {
    display:none;
  }
  .util .right a:nth-child(5) {
    display:none;
  }
  .util .right .sep:nth-child(4) {
    display:none;
  }
  .logo img {
    height:40px;
  }
  .logo-text .b {
    display:none;
  }
  .logo-text .a {
    font-size:16px;
  }
  .logo-mark {
    width:38px;
    height:38px;
  }
  .logo-mark svg {
    width:20px;
    height:20px;
  }
  section {
    padding:48px 20px;
  }
  .hero {
    padding:20px;
  }
  /* mobile slider — switch to display-none/block instead of absolute */
  .hero-main {
    min-height:auto;
    overflow:visible;
    border-radius:var(--r);
  }
  .slides {
    min-height:auto;
  }
  .slide {
    position:relative;
    inset:auto;
    padding:36px 28px 76px;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    min-height:auto;
    display:none;
    border-radius:var(--r);
  }
  .slide.on {
    display:flex;
  }
  .hero-content {
    max-width:100%;
    order:2;
    width:100%;
  }
  .hero-visual {
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    max-width:320px;
    order:1;
    align-self:center;
    margin-top:6px;
  }
  .slide.on .hero-visual {
    animation:slideRightMobile 0.6s cubic-bezier(0.2,0.8,0.2,1) backwards;
    animation-delay:0.1s;
  }
  @keyframes slideRightMobile {
    from {
      opacity:0;
      transform:translateY(20px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }
  .hero-sub {
    max-width:none;
  }
  .hero-dots {
    bottom:24px;
    left:28px;
  }
  .slider-arrows {
    bottom:18px;
    right:18px;
  }
  .slider-arrow {
    width:38px;
    height:38px;
  }
  .bb-grid,.feat-card,.nl-inner {
    grid-template-columns:1fr;
  }
  .feat-visual {
    min-height:340px;
    padding:36px;
  }
  .feat-info {
    padding:36px 28px;
  }
  .feat-info h3 {
    font-size:28px;
  }
  .services-inner {
    grid-template-columns:repeat(2,1fr);
  }
  .svc + .svc {
    border-left:none;
  }
  .svc:nth-child(3) {
    border-top:1px solid var(--line);
  }
  .svc:nth-child(4) {
    border-top:1px solid var(--line);
  }
  .foot-grid {
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
  .brand-row {
    grid-template-columns:repeat(3,1fr);
  }
  .section-head {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .section-head .right {
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .tabs {
    overflow-x:auto;
    scrollbar-width:none;
    max-width:100%;
  }
  .tabs::-webkit-scrollbar {
    display:none;
  }
  .tabs button {
    flex-shrink:0;
  }
  .bb-card {
    padding:32px;
  }
  .bb-card h2 {
    font-size:32px;
  }
  .bb-card.main .visual {
    width:48%;
    right:-20px;
    bottom:-30px;
  }
  .nl-inner {
    padding:40px 32px;
  }
  .nl-perks {
    flex-wrap:wrap;
    gap:14px;
  }
  .util .inner {
    padding:8px 20px;
  }
}
 
@media (max-width:680px) {
  .announce {
    font-size:12px;
    padding:9px 16px;
  }
  .announce .dot {
    margin:0 8px;
  }
  .util {
    font-size:11px;
  }
  .util .inner {
    padding:7px 16px;
  }
  .util .left span svg {
    display:none;
  }
  .util .left {
    gap:14px;
  }
  .util .right {
    gap:10px;
  }
  .header-main .inner {
    padding:12px 16px;
    gap:10px;
  }
  .icon-btn {
    width:42px;
    height:42px;
    border-radius:12px;
  }
  .cart-btn {
    padding:5px;
  }
  .cart-btn .ico {
    width:36px;
    height:36px;
  }
  .nav-right {
    gap:6px;
  }
  .mobile-search {
    top:68px;
    padding:10px 16px;
  }
  .mobile-search .search {
    padding:0;
  }
  .mobile-search .search input {
    padding:11px 0;
    font-size:14px;
  }
  .mobile-search .search button.go {
    padding:0 16px;
  }
  section {
    padding:40px 16px;
  }
  .hero {
    padding:16px;
  }
  .section-head h2 {
    font-size:26px;
  }
  .section-head .left .eyebrow {
    font-size:11px;
  }
  .cat-grid {
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .cat-tile {
    padding:18px 10px 16px;
  }
  .cat-tile .ico {
    width:52px;
    height:52px;
    border-radius:14px;
    margin-bottom:10px;
  }
  .cat-tile .ico svg {
    width:24px;
    height:24px;
  }
  .cat-tile h4 {
    font-size:12.5px;
  }
  .cat-tile .count {
    font-size:11px;
  }
  .prod-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .prod-grid .product:nth-child(4) {
    display:flex;
  }
  .prod-info {
    padding:14px;
  }
  .prod-title {
    font-size:13.5px;
    margin-bottom:8px;
  }
  .prod-cat {
    font-size:10px;
  }
  .prod-price .now {
    font-size:18px;
  }
  .prod-price .was {
    font-size:12px;
  }
  .stars {
    margin-bottom:8px;
  }
  .stars svg {
    width:11px;
    height:11px;
  }
  .stars .num {
    font-size:11px;
  }
  .prod-chip {
    font-size:9.5px;
    padding:3px 7px;
    top:10px;
    left:10px;
  }
  .prod-actions {
    top:10px;
    right:10px;
    gap:5px;
  }
  .pa {
    width:30px;
    height:30px;
  }
  .pa svg {
    width:13px;
    height:13px;
  }
  .services-inner {
    grid-template-columns:1fr;
    padding:4px;
  }
  .svc {
    padding:14px;
  }
  .svc + .svc {
    border-top:1px solid var(--line) !important;
    border-left:none !important;
  }
  .svc:nth-child(3) {
    border-top:1px solid var(--line);
  }
  .hero-side {
    grid-template-columns:1fr;
    gap:12px;
  }
  .promo-card {
    min-height:160px;
    padding:20px;
  }
  .promo-card h3 {
    font-size:20px;
  }
  .promo-card .price {
    font-size:26px;
  }
  .foot-grid {
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:36px;
  }
  .foot-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .foot-bottom .pays {
    flex-wrap:wrap;
  }
  .pay-chip {
    font-size:9px;
    padding:4px 8px;
  }
  .nl-inner {
    padding:32px 24px;
    gap:30px;
  }
  .nl-left h2 {
    font-size:28px;
  }
  .nl-input {
    flex-direction:column;
    padding:8px;
    gap:6px;
  }
  .nl-input input {
    padding:12px 14px;
  }
  .nl-input button {
    padding:13px;
    justify-content:center;
  }
  .nl-perks {
    font-size:12px;
    gap:10px;
  }
  .brand-row {
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .brand {
    height:70px;
    padding:14px;
  }
  .brand span {
    font-size:14px;
  }
  .bb-card {
    padding:26px;
    min-height:220px;
  }
  .bb-card h2 {
    font-size:26px;
  }
  .bb-card.side h2 {
    font-size:24px;
  }
  .bb-card.main .visual {
    display:none;
  }
  .bb-card.main .content {
    max-width:100%;
  }
  .timer {
    flex-wrap:wrap;
  }
  .timer-box {
    min-width:42px;
    padding:6px 8px;
  }
  .timer-box .v {
    font-size:18px;
  }
  /* hero slide on small mobile */
  .slide {
    padding:28px 22px;
    min-height:auto;
  }
  .hero h1 {
    font-size:28px;
    margin-bottom:14px;
  }
  .hero-sub {
    font-size:14px;
    margin-bottom:20px;
  }
  .hero-price .val {
    font-size:32px;
  }
  .hero-price .was {
    font-size:15px;
  }
  .hero-tag {
    font-size:11px;
    padding:6px 12px;
    margin-bottom:16px;
  }
  .btn {
    padding:12px 18px;
    font-size:13.5px;
  }
  .hero-visual {
    max-width:260px;
  }
  .hero-dots {
    bottom:14px;
    left:22px;
  }
  .slider-arrows {
    bottom:12px;
    right:12px;
    gap:6px;
  }
  .slider-arrow {
    width:34px;
    height:34px;
  }
  .slider-arrow svg {
    width:14px;
    height:14px;
  }
  .feat-visual {
    min-height:280px;
    padding:28px;
  }
  .feat-info {
    padding:28px 22px;
  }
  .feat-info h3 {
    font-size:24px;
  }
  .feat-thumbs {
    left:18px;
    bottom:18px;
    gap:6px;
  }
  .feat-thumb {
    width:50px;
    height:50px;
    border-radius:10px;
  }
  .feat-pills {
    gap:6px;
    margin-bottom:18px;
  }
  .feat-pill {
    font-size:11px;
    padding:5px 10px;
  }
  .feat-price {
    font-size:34px;
  }
  .feat-was {
    font-size:16px;
  }
  .feat-buy {
    flex-wrap:wrap;
    gap:8px;
  }
  .feat-buy .btn-primary {
    flex:1;
    padding:13px 18px;
    min-width:140px;
  }
  .qty button {
    width:38px;
    height:46px;
  }
  .qty .v {
    width:32px;
  }
}
 
@media (max-width:380px) {
  .icon-btn[aria-label="Wishlist"] {
    display:none;
  }
  .cart-btn .ico {
    width:32px;
    height:32px;
  }
  .cart-btn .ico svg {
    width:14px;
    height:14px;
  }
  .logo img {
    height:34px;
  }
  .logo-text .a {
    font-size:14px;
  }
  .prod-grid {
    grid-template-columns:1fr;
  }
  .cat-grid {
    grid-template-columns:repeat(2,1fr);
  }
}