:root{
  --red:#e30613;
  --black:#111;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f6f7f9;
  --card:#ffffff;
  --stroke:#e8eaee;
  --radius:18px;
  --shadow: 0 14px 40px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--black);
  background:var(--bg);
}

a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%); margin:0 auto}
.muted{color:var(--muted)}
.hidden{display:none !important}

@keyframes floatIn {
  from{transform:translateY(10px); opacity:0}
  to{transform:translateY(0); opacity:1}
}
@keyframes pop {
  0%{transform:scale(.98); opacity:.2}
  100%{transform:scale(1); opacity:1}
}

/* ===== Fixed Header ===== */
.header{
  position:sticky; top:0; z-index:999;
  background:#fff;
  border-bottom:1px solid var(--stroke);
}
.topbar{
  padding:10px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.social{
  display:flex; gap:10px; align-items:center;
}
.iconbtn{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background:#fff;
  transition:.2s;
}
.iconbtn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.08)}
.iconbtn svg{width:18px;height:18px}

.topnav{
  display:flex; align-items:center; gap:18px;
  color:#3b3f46;
  font-weight:600;
}
.topnav a{padding:6px 8px; border-radius:10px}
.topnav a:hover{background:var(--soft)}
.phone{
  display:flex; align-items:center; gap:10px; font-weight:800; color:#0b63d1;
}
.phone small{color:var(--muted); font-weight:700}
.lang{
  display:flex; align-items:center; gap:10px;
}
.lang button{
  border:1px solid var(--stroke);
  background:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; gap:8px;
  transition:.2s;
}
.lang button:hover{box-shadow:0 10px 22px rgba(0,0,0,.06); transform:translateY(-1px)}
.flag{font-size:16px}

.midbar{
  padding:12px 0 16px;
  display:grid;
  grid-template-columns: 240px 1fr 220px;
  gap:16px;
  align-items:center;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{height:54px; width:auto}
.search{
  display:flex; align-items:center; gap:10px;
  background:var(--soft);
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:10px 14px;
}
.search input{
  border:none; outline:none; background:transparent;
  width:100%;
  font-size:16px;
}
.catalogBtn{
  justify-self:end;
  border:none;
  background:var(--red);
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:12px 16px;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 14px 30px rgba(227,6,19,.22);
  transition:.2s;
}
.catalogBtn:hover{transform:translateY(-1px)}
.cartBtn{
  justify-self:end;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
}
.cartPill{
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  background:#fff;
}
.badge{
  min-width:22px; height:22px; border-radius:999px;
  background:var(--red); color:#fff;
  display:grid; place-items:center;
  font-size:12px; font-weight:900;
}

/* ===== Slider ===== */
.sliderWrap{
  padding:18px 0 10px;
}
.slider{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
}
.slide{
  width:100%;
  height:min(420px, 56vw);
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  filter:saturate(1.03);
  animation: pop .4s ease both;
}
.slideNav{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  pointer-events:none;
}
.slideNav button{
  pointer-events:auto;
  width:44px; height:44px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.88);
  cursor:pointer;
  transition:.2s;
}
.slideNav button:hover{transform:scale(1.05)}
.dots{
  position:absolute; left:0; right:0; bottom:14px;
  display:flex; justify-content:center; gap:8px;
}
.dots span{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.55);
}
.dots span.active{background:#fff; width:22px}

/* ===== About + Stats ===== */
.about{
  padding:40px 0;
}
.aboutGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.aboutBrand{
  display:flex; align-items:center; gap:16px;
}
.aboutBrand img{height:44px}
.aboutTitle{
  font-size:44px;
  line-height:1.05;
  margin:0 0 10px;
}
.stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.stat{
  border-left:3px solid var(--stroke);
  padding-left:14px;
}
.stat b{
  display:block;
  font-size:36px;
  color:var(--red);
  letter-spacing:-.5px;
}
.stat span{color:var(--muted); font-weight:700}

/* ===== Sections ===== */
.section{
  padding:46px 0;
}
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.sectionHead h2{
  margin:0;
  font-size:32px;
}
.pills{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.pill{
  border:1px solid var(--stroke);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  transition:.15s;
}
.pill.active{
  border-color: rgba(227,6,19,.35);
  color:var(--red);
  box-shadow:0 14px 30px rgba(227,6,19,.10);
}
.pill:hover{transform:translateY(-1px)}

/* ===== Product Cards ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} .midbar{grid-template-columns:220px 1fr 220px}}
@media (max-width:850px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .midbar{grid-template-columns:1fr; gap:10px}
  .cartBtn{justify-self:start}
  .catalogBtn{justify-self:start}
}
@media (max-width:520px){ .grid{grid-template-columns:1fr} .aboutGrid{grid-template-columns:1fr} .aboutTitle{font-size:34px}}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transition:.2s;
  animation: floatIn .35s ease both;
}
.card:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(0,0,0,.10)}
.cardImg{
  height:210px;
  width:100%;
  background:linear-gradient(135deg,#f3f4f6,#fff);
  display:block;
  object-fit:cover;
}
.cardBody{padding:14px 14px 16px}
.cardTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.tag{
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  color:#4b5563;
  font-size:13px;
}
.cardTitle{
  margin:0;
  font-size:18px;
  font-weight:900;
}
.cardDesc{margin:8px 0 10px; color:var(--muted); min-height:40px}
.priceRow{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.oldPrice{color:#9aa0a6; text-decoration:line-through; font-weight:800}
.newPrice{color:var(--red); font-weight:950}
.onePrice{color:#111; font-weight:950}
.cardActions{
  margin-top:14px;
  display:flex; gap:10px; align-items:center;
}
.btn{
  border:none; cursor:pointer;
  border-radius:14px;
  padding:11px 14px;
  font-weight:900;
  transition:.2s;
}
.btn.primary{background:var(--red); color:#fff; box-shadow:0 14px 30px rgba(227,6,19,.18)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff; border:1px solid var(--stroke)}
.btn.ghost:hover{transform:translateY(-1px)}
/* Small icon button */
.sbtn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  transition:.2s;
  display:grid; place-items:center;
}
.sbtn:hover{transform:translateY(-1px)}

/* ===== Floating buttons ===== */
.toTop{
  position:fixed; left:18px; bottom:18px;
  width:48px; height:48px;
  border-radius:999px;
  border:none;
  background:var(--red);
  color:#fff;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(227,6,19,.25);
  display:none;
  z-index:1000;
}
.toTop.show{display:grid; place-items:center}
.toTop svg{width:20px;height:20px}

.chatFloat{
  position:fixed; right:18px; bottom:18px;
  display:flex; align-items:center; gap:10px;
  background:#0b78d1;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 14px;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(11,120,209,.25);
  z-index:1000;
}
.chatFloat span{font-weight:900}

/* ===== Modal ===== */
.modalOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.42);
  display:none;
  z-index:1200;
}
.modalOverlay.show{display:block}
.modal{
  position:fixed; right:18px; bottom:80px;
  width:min(380px, calc(100vw - 36px));
  background:#fff;
  border-radius:22px;
  border:1px solid var(--stroke);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
  z-index:1300;
}
.modal.show{display:block; animation: pop .18s ease both}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--stroke);
}
.modalHead b{font-size:14px}
.modalHead button{
  border:none; background:transparent; cursor:pointer; font-size:18px;
}
.modalBody{padding:14px}
.modalBody textarea{
  width:100%; min-height:120px;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  resize:vertical;
  outline:none;
}
.modalRow{
  margin-top:10px;
  display:flex; gap:10px;
}
.modalRow input{
  flex:1;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  outline:none;
}
.modalRow button{
  border:none; background:var(--red); color:#fff;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
}

/* ===== Footer ===== */
.footer{
  padding:46px 0;
  background:#0f0f10;
  color:#fff;
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:22px;
}
.footerLogo{
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px;
}
.footerLogo img{height:42px}
.footer h4{margin:0 0 12px}
.footer a{color:#d7dbe2}
.footer a:hover{color:#fff}
.payments{
  display:flex; flex-wrap:wrap; gap:10px;
}
.payments img{
  height:28px;
  background:#fff;
  padding:6px 10px;
  border-radius:10px;
}
.footerBottom{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#cfd5df;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}