:root{
  --red:#9d0a1e;
  --dark:#393637;
  --bg:#ffffff;
  --muted:#f4f4f5;
  --text:#1f1f1f;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#cacaca}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92vw);margin:0 auto;}
.topbar{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:10;width:min(1180px,92vw);margin:0 auto;border-radius: 7px;}
.topbar__inner{display:flex;gap:16px;align-items:center;padding:10px 0}
.logo img{height:46px;display:block;margin-left: 10px;}
.logo__text{font-weight:800;color:var(--red);font-size:20px}
.topbar__title{flex:1;min-width:240px;text-align: center;}
.h1{font-weight:800;color:var(--dark);line-height:1.15}
.phone{color:var(--red);font-weight:800;margin-top:4px}
.topbar__actions{display:flex;gap:50px;align-items:end;margin-right: 10px;}
.citybox__label{font-size:12px;color:#666;margin-bottom:4px}
.select{padding:10px 12px;border:1px solid #ddd;border-radius:12px;min-width:180px}
.btn{background:var(--red);color:#fff;border:none;padding:11px 14px;font-weight:700;cursor:pointer;border-radius: 7px;font-size: 16px;}
.btn:hover{filter:brightness(.95)}
.btn--wide{width:100%}

.menu{background:var(--dark);border-radius: 7px;}
.menu__inner{display:flex;gap:16px;padding:10px 0}
.menu__link{color:#fff;opacity:.92;font-weight:600}
.menu__link:hover{opacity:1}
/* Dropdown "Каталог" */
.menu__drop{position:relative}
.menu__link--drop{display:flex;align-items:center;gap:6px}
.menu__caret{font-size:12px;opacity:.85}

.menu__dd{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:10px;
  background:#fff;
  color:var(--text);
  border:1px solid #eee;
  border-radius:14px;
  padding:8px;
  min-width:280px;
  max-width:min(420px,92vw);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  z-index:50;
}
.menu__drop:hover .menu__dd{display:block}

.menu__ddlist{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.menu__dditem{margin:0;padding:0}
.menu__ddlink:hover{background:var(--muted);color:var(--red)}

.centr{max-width:1200px;margin:0 auto; padding:10px;background:#fff;border-radius: 7px;}

.hero{position:relative;padding:18px 0 0}
.heroBox{position:relative;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.08);margin:0 auto}
.hero__track{position:relative;height:420px}

.pcard{width:250px;} 
@media (max-width:980px){.hero__track{height:340px}}
@media (max-width:520px){.hero__track{height:240px}}

.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero__slide.is-active{opacity:1}
.hero__slide--empty{opacity:1;display:flex;align-items:center;background:linear-gradient(90deg,#eee,#f9f9f9)}

.hero__overlay{position:absolute;inset:0;display:flex;align-items:end;padding:22px;background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0))}
.hero__title{color:#fff;font-size:34px;font-weight:900;margin:0 0 8px 0}
.hero__descr{color:#fff;opacity:.95;margin:0 0 18px 0;max-width:640px}

.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:22px;line-height:1}
.hero__arrow:hover{background:rgba(0,0,0,.35)}
.hero__arrow--prev{left:14px}
.hero__arrow--next{right:14px}

.hero__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:3}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.55;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.dot.active{opacity:1}


.section{}
.section__title{font-size:24px;font-weight:900;color:var(--dark);margin-bottom:14px}
.section__subtitle{font-size:18px;font-weight:900;color:var(--dark);margin:18px 0 10px}
.grid{display: flex;grid-template-columns:repeat(4,1fr);gap:14px;max-width: 850px;flex-wrap: wrap;}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)} .topbar__inner{flex-wrap:wrap}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid #eee;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.05);border-radius: 7px;}
.card__img{aspect-ratio:4/3;background:var(--muted);display:flex;align-items:center;justify-content:center;    width: 190px;}
.card__img img{width:100%;height:100%;object-fit:cover;display:block}
.card__name{padding:12px 12px 14px;font-weight:900;color:var(--dark)}

.grid--products{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.grid--products{grid-template-columns:repeat(2,1fr)}}
.pcard{background:#fff;border:1px solid #eee;overflow:hidden;border-radius: 7px;}
.pcard__img{aspect-ratio:1/1;background:var(--muted)}
.pcard__img img{width:100%;height:100%;object-fit:cover}
.pcard__name{padding:10px;font-weight:900}

.footer{background:#0f0f10;color:#fff;margin-top:20px;border-radius: 7px;}
.footer__inner{display:flex;justify-content:space-between;gap:18px;padding:20px;flex-wrap:wrap}
.footer__title{font-weight:900;margin-bottom:8px}
.footer__copy{opacity:.75}

.crumbs{font-size:13px;opacity:.75;margin-bottom:10px}
.pageh1{font-size:28px;font-weight:900;margin:10px 0 16px}
.cathead{display:flex;gap:16px;align-items:center}
.cathead__img{width:84px;height:84px;object-fit:cover;border:1px solid #eee;background:var(--muted);border-radius: 7px;}

.product{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:980px){.product{grid-template-columns:1fr}}
.product__mainimg{background:var(--muted);border-radius:var(--radius);overflow:hidden;border:1px solid #eee}
.product__mainimg img{width:100%;height:100%;display:block;object-fit:cover}
.gallery{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gallery__thumb{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;width:72px;height:72px;padding:0;cursor:pointer}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.specs{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:12px}
.desc{margin-top:12px;line-height:1.6}
.variants{display:flex;gap:10px;flex-wrap:wrap}
.variants img{width:84px;height:84px;object-fit:cover;border-radius:14px;border:1px solid #eee;background:var(--muted)}

.modal{position:fixed;inset:0;display:none}
.modal.open{display:block;z-index: 9999;}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal__card{position:relative;width:min(520px,92vw);margin:8vh auto;background:#fff;overflow:hidden}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eee}
.modal__title{font-weight:900;color:var(--dark)}
.iconbtn{border:none;background:transparent;font-size:22px;cursor:pointer}
.form{display:grid;gap:10px;padding:14px 16px}
.form input,.form textarea{width:100%;padding:12px 12px;border:1px solid #ddd;border-radius:7px}
.form textarea{min-height:110px;resize:vertical}
.form__note{font-size:13px;opacity:.8}
.muted{opacity:.7}

/* === Colors on product page === */
.colors{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.color{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:7px;
  background:#fff;
  min-width:120px;
}
.color__img{
  width:64px;
  height:64px;
  border-radius:7px;
  border:1px solid #eee;
  background:var(--muted);
  overflow:hidden;
}
.color__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.color__name{
  font-weight:900;
  color:var(--dark);
  font-size:13px;
  text-align:center;
}

/* === Module schemes like screenshot === */
.modules-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:14px;
}
@media (max-width:980px){
  .modules-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .modules-grid{grid-template-columns:1fr;}
}

.module-card{
  text-align:center;
}
.module-card__title{
  font-style:italic;
  font-weight:800;
  color:#111;
  margin-bottom:10px;
}
.module-card__img{
  border:1px solid #ddd;
  border-radius:7px;
  background:#fff;
  padding:10px;
}
.module-card__img img{
  width:100%;
  height:240px;
  object-fit:contain;
  display:block;
}
.module-card__size{
  margin-top:10px;
  text-align:left;
  display:inline-block;
  font-size:13px;
  line-height:1.5;
}
.module-card__size-title{
  font-weight:900;
  margin-bottom:4px;
}

.product__gallery{
    display: flex;
    flex-direction: column-reverse;
}

/* Контакты */
.contactsGrid{
  display: flex;
  grid-template-columns:1fr 1fr;
  gap:14px;
  flex-direction: column;
}
@media (max-width:980px){
  .contactsGrid{grid-template-columns:1fr}
}
.contactsCard{
  background:#fff;
  padding:14px;
  margin-top:14px;
}
.citem{padding:10px 0;}
.citem:last-child{border-bottom:none}
.citem__k{font-size:12px;opacity:.7;margin-bottom:4px}
.citem__v{font-weight:700;color:var(--dark)}
.cphones{display:grid;gap:10px;margin-top:6px}
.cphone__name{font-size:12px;opacity:.75}
.cphone__num{display:inline-block;margin-top:2px;font-weight:900;color:var(--red)}
.contactsMap{
  margin-top:14px;
  background:#fff;
  overflow:hidden;
  border-radius: 7px;
}
.contactsMap iframe{
  width:100% !important;
  height:420px;
  border:0;
  display:block;
}
.form--card{padding:0}

/* ====== Header mobile ====== */
.burger{
  display:none;
  width:44px;height:44px;
  border:1px solid #eee;
  background:#fff;
  border-radius:7px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--dark);border-radius:7px}

@media (max-width:980px){
  .topbar__inner{flex-wrap:wrap;align-items:flex-start}
  .burger{display:flex}
  .logo img{height:40px}
  .topbar__title{order:3;width:100%;min-width:unset}
  .topbar__actions{order:4;width:100%;justify-content:space-between;align-items:end;flex-wrap:wrap;display: flex;justify-content: center;}
  .citybox{flex:1;min-width:220px}
  .select{width:100%;min-width:unset}
  #openPrice{width:100%;margin-top:10px}
  .topbar{position: relative;}

  .menu__inner{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px 0 14px;
  }
  body.menu-open .menu__inner{display:flex}

  .menu__link{
    display:flex;
    justify-content:space-between;
    padding:12px 12px;
    background:rgba(255,255,255,.08);
  }
}

/* ====== Catalog dropdown (desktop) ====== */
.menu__drop{position:relative}
.menu__link--drop{display:flex;align-items:center;gap:6px}
.menu__caret{font-size:12px;opacity:.85}

/* “мостик”, чтобы не пропадало при переводе мыши */
.menu__drop::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:12px;
}

.menu__dd{
  position:absolute;
  left:0;
  top:100%;
  padding-top:10px;          /* пространство под “мостик” */
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  z-index:60;
}
.menu__drop:hover .menu__dd,
.menu__drop:focus-within .menu__dd{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.menu__ddpanel{
  background:#fff;
  color:var(--text);
  border:1px solid #eee;
  border-radius:7px;
  min-width:320px;
  max-width:min(420px,92vw);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  overflow:visible;
}

/* Root list */
.menu__ddlist{list-style:none;margin:0;padding:0}
.menu__ddlist--root{max-height:60vh;overflow:auto}

/* Item */
.menu__dditem{position:relative;list-style-type: none;}
.menu__ddlink{
  display:block;
  padding:10px 12px;
  font-weight:800;
  color:var(--dark);
  white-space:nowrap;
}
.menu__ddlink:hover{background:var(--muted);color:var(--red)}
.menu__subcaret{
  position:absolute;
  right:10px;
  top:10px;
  font-weight:900;
  opacity:.5;
}

/* Submenu to the right (2+ level) */
.menu__sub{
  position:absolute;
  left:100%;
  top:0;
  margin-left:8px;
  background:#fff;
  border:1px solid #eee;
  border-radius:7px;
  padding:8px;
  min-width:320px;
  max-height:60vh;
  overflow:auto;
  box-shadow:0 14px 34px rgba(0,0,0,.12);

  opacity:0;
  visibility:hidden;
  transform:translateX(6px);
  pointer-events:none;
  z-index:70;
}
.menu__dditem:hover > .menu__sub,
.menu__dditem:focus-within > .menu__sub{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

/* ====== Catalog dropdown (mobile) ====== */
@media (max-width:980px){
  .menu__drop::after{display:none}

  .menu__dd{
    position:static;
    padding-top:8px;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;            /* закрыто по умолчанию */
  }
  .menu__drop.open .menu__dd{display:block}

  .menu__ddpanel{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    min-width:unset;
    max-width:unset;
  }

  .menu__ddlist--root{max-height:none;overflow:visible}

  .menu__ddlink{
    background:rgba(255,255,255,.06);
    color:#fff;
  }
  .menu__ddlink:hover{background:rgba(255,255,255,.10);color:#fff}

  .menu__sub{
    position:static;
    margin:6px 0 0 0;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0 0 0 12px;
    min-width:unset;
    max-height:none;
    overflow:visible;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    display:block;
  }

  .menu__subcaret{display:none}
}

/* === FIX: убрать скроллы в выпадающем меню "Каталог" === */
.menu__ddpanel{
  overflow: visible !important;
}

.menu__ddlist--root,
.menu__ddlist,
.menu__sub{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* чтобы не было горизонтального скролла из-за nowrap */
.menu__ddlink{
  white-space: normal !important;
}

/* на всякий: скрыть скроллбары, если вдруг где-то остаются */
.menu__ddlist--root,
.menu__sub{
  scrollbar-width: none;            /* Firefox */
}
.menu__ddlist--root::-webkit-scrollbar,
.menu__sub::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* ================= MEGA MENU (override) ================= */

/* Desktop: раскрытие без "щелей" */
.menu__drop{position:relative}
.menu__link--drop{}
.menu__caret{font-size:12px;opacity:.85}

/* ВАЖНО: никаких margin-top/padding-top у выпадашки -> нет разрыва */
.menu__dd.mega{
  position:absolute;
  left:0; right:0;
  top:100%;
  padding:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  z-index:70;
}
.menu__drop:hover .menu__dd.mega,
.menu__drop:focus-within .menu__dd.mega{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

/* Панель мега-меню */
.mega__wrap{padding:0} /* контейнер сайта */
.mega__panel{
  margin-top:0;
  background:#fff;
  border:1px solid #eee;
  border-radius:7px;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

/* Desktop layout */
.mega__desktop{display:block}
.mega__mobile{display:none}

.mega__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.mega__group{
  padding:8px 6px;
  border-radius:7px;
}
.mega__head{
  display:block;
  font-weight:900;
  color:var(--dark);
  padding:10px 12px;
  border-radius:7px;
  background:rgba(0,0,0,.03);
}
.mega__head:hover{background:rgba(0,0,0,.05);color:var(--red)}

.mega__links{margin-top:10px;display:grid;gap:10px}
.mega__item{padding:0 6px}
.mega__link{
  display:inline-flex;
  font-weight:800;
  color:var(--dark);
  padding:6px 8px;
  border-radius:7px;
}
.mega__link:hover{background:var(--muted);color:var(--red)}

.mega__sub{
  margin-top:6px;
  display:grid;
  gap:6px;
  padding-left:10px;
  border-left:2px solid rgba(0,0,0,.06);
}
.mega__sublink{
  font-weight:700;
  font-size:13px;
  color:rgba(0,0,0,.75);
  padding:4px 8px;
  border-radius:7px;
}
.mega__sublink:hover{background:var(--muted);color:var(--red)}

/* ===== Mobile: меню + каталог как аккордеон ===== */
@media (max-width:980px){
  /* шапка/меню (если у тебя уже есть — этот блок просто усилит) */
  .burger{display:flex}
  .menu__inner{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px 0 14px;
  }
  body.menu-open .menu__inner{display:flex}

  /* выпадашка становится частью потока */
  .menu__dd.mega{
    position:static;
    left:auto; right:auto; top:auto;
    opacity:1; visibility:visible; transform:none;
    pointer-events:auto;
    display:none;
  }
  .menu__drop.open .menu__dd.mega{display:block}

  .mega__panel{
    box-shadow:none;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
  }

  .mega__desktop{display:none}
  .mega__mobile{display:block}

  .megaM{display:grid;gap:10px}
  .megaM__link{
    display:block;
    padding:12px 12px;
    border-radius:7px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-weight:800;
    color: #393637;
  }
  .megaM__link:hover{background:rgba(255,255,255,.10);color:#fff}

  .megaM__item{
    border-radius:7px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
  }
  .megaM__sum{
    list-style:none;
    cursor:pointer;
    padding:12px 12px;
    font-weight:900;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color: #393637;
  }
  .megaM__item summary::-webkit-details-marker{display:none}
  .megaM__sum:after{
    content:"▾";
    opacity:.9;
    font-size:12px;
  }
  .megaM__item[open] .megaM__sum:after{content:"▴"}

  .megaM__body{padding:10px 12px 12px;display:grid;gap:8px}
  .megaM__all{
    display:block;
    padding:10px 12px;
    border-radius:7px;
    background:rgba(0,0,0,.10);
    color:#fff;
    font-weight:900;
    color: #393637;
  }
  .megaM__item--sub{background:rgba(0,0,0,.10)}
}

/* ==== City guess popup ==== */
.city-guess{
  position:fixed;
  left:16px;
  bottom:16px;
  width:min(360px, calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-left:6px solid #9d0a1e;
  border-radius:7px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  padding:14px 14px 12px;
  z-index:9999;
  display:none;
}
.city-guess.open{display:block}
.city-guess__close{
  position:absolute; right:10px; top:8px;
  width:32px;height:32px;border-radius:7px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-size:18px; line-height:1;
}
.city-guess__title{font-weight:900;color:#393637;margin-bottom:6px}
.city-guess__name{font-weight:900;font-size:18px;color:#9d0a1e;margin-bottom:10px}
.city-guess__actions{display:flex;gap:10px;flex-wrap:wrap}
.city-guess__btn{
  border-radius:7px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#393637;
}
.city-guess__btn--yes{
  background:#9d0a1e;
  border-color:#9d0a1e;
  color:#fff;
}
.city-guess__btn--no{
  background:#f5f5f6;
}

/* ===== Header menu like mebel-optom58 (catalog dropdown by click) ===== */
.menu{
  background: var(--red);
}

.menu__inner{
  gap: 0;
  padding: 0;
}


  background: transparent;
  border: 0;            /* чтобы button выглядел как link */
  cursor: pointer;      /* для button */
}

.menu__link:hover{
  background: rgba(0,0,0,.22);
}

.menu__caret{
  transition: transform .15s ease;
}

/* отключаем hover-открытие (у тебя оно сейчас включено) */
.menu__drop:hover .menu__dd{ display:none; }

/* открытие только по клику */
.menu__drop.is-open .menu__dd{ display:block; }
.menu__drop.is-open .menu__caret{ transform: rotate(180deg); }

/* выпадающее меню как на скрине */
.menu__dd--catalog{
  display:none;
  position:absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;

  background: #2b2f36;
  border: 0;
  border-radius: 7px;
  padding: 10px 0;
  min-width: 320px;

  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  z-index: 1000;
}

.menu__dd--catalog .menu__ddlist{
  list-style:none;
  margin:0;
  padding:0;
  max-height: none;     /* без скроллов */
  overflow: visible;    /* без скроллов */
}

.menu__dd--catalog .menu__ddlink{
  display:block;
  padding: 12px 20px;
  color:#fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration:none;
  background: transparent;
}

.menu__dd--catalog .menu__ddlink:hover{
  background: rgba(0,0,0,.22);
}

/* на мобиле выпадашка по ширине экрана */
@media (max-width: 720px){
  .menu__dd--catalog{
    left: 10px;
    right: 10px;
    min-width: auto;
  }
}

/* category tiles like on reference */
.cats-tiles{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.cat-tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 7px;
  background: #f3f4f6;
  color: var(--dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration:none;
}
.cat-tile:hover{
  background: #e9eaee;
  color: var(--red);
}

/* ===================== REF 1:1 (mebel-optom58) ===================== */

/* Topbar like reference */
.topbar{position:static;border-bottom:none;background:#fff}
.topbar__inner{padding:14px 0;gap:18px}
.topbar__title{text-align:center}
.h1{font-size:18px;font-weight:700;color:#111}
.phone{font-size:18px;color:var(--red);font-weight:800}

/* City link like reference */
.topbar__city{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.citylink{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:0;cursor:pointer;
  padding:0;font-weight:600;color:#111;
}
.citylink__icon{font-size:16px;opacity:.9}
.citylink__name{font-size:16px;color: #9d0a1e;}
.topbar__time{font-size:16px;opacity:.75}
.citySelectHidden{display:none !important}

/* Menu: red bar + active black */
.menu{background:var(--red)}
.menu__inner{gap:0;padding:0}
.menu__link{
  display:flex;align-items:center;gap:8px;
  padding:14px 22px;
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:1;
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius: 7px;
  font-size: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.menu__link:hover{background:rgba(0,0,0,.18)}
.menu__link.is-active{background:#1f1f1f}

.menu__caret{transition:transform .15s ease}

/* Catalog dropdown by click */
.menu__drop{position:relative;}
.menu__dd--catalog{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:10px;
  min-width:360px;
  background:#2b2f36;
  border-radius:7px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  z-index:1000;
  padding:10px 0;
}
.menu__drop.is-open .menu__dd--catalog{display:block}
.menu__drop.is-open .menu__caret{transform:rotate(180deg)}
.menu__dd--catalog .menu__ddlist{list-style:none;margin:0;padding:0}
.menu__dd--catalog .menu__dditem{margin:0}
.menu__dd--catalog .menu__ddlink{
  display:block;
  padding:12px 20px;
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
}
.menu__dd--catalog .menu__ddlink:hover{background:rgba(0,0,0,.22)}

/* Hero: centered frame like reference */
.hero{padding:12px 0;background:#fff}
.heroBox{
  position:relative;
  border:1px solid #eee;
  background:#fff;
}
.hero__track{display:flex;overflow:hidden}

.hero__emptyText{font-weight:800;opacity:.7}

.hero__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.6;border:1px solid rgba(0,0,0,.2)}
.dot.active{opacity:1}

/* Download bar like reference */
.download{}
.download__bar{
  display:block;
  background:var(--red);
  color:#fff;
  text-align:center;
  padding:12px 10px;
  font-weight:900;
  text-transform:uppercase;
  border-radius: 7px;
}

/* Categories blocks like reference */
.section--cats{padding-top:10px}
.catsGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  align-items:start;
}
@media (max-width:980px){.catsGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catsGrid{grid-template-columns:1fr}}

.catBlock{display:block}
.catBlock__img{
  border:1px solid #e8e8ea;
  background:#fff;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius: 7px;
}
.catBlock__img img{width:100%;height:100%;object-fit:cover;display:block}
.catBlock__name{
  text-align:center;
  font-size:18px;
  font-weight:700;
  padding-top:8px;
  color:#111;
}

/* About like reference: 2 columns */
.section--about{padding-top:18px}
@media (max-width:980px){.aboutGrid{grid-template-columns:1fr}}
.aboutTitle{margin:0 0 10px;font-size:28px;font-weight:900;color:#111}
.home-text{line-height:1.65}
.aboutImg{
  border:1px solid #eee;
  background:#fff;
  min-height:240px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.aboutImg img{width:100%;height:100%;object-fit:cover;display:block}
.aboutImg__ph{padding:18px;opacity:.65;text-align:center;font-weight:700}

/* City picker modal */
.modal__card--city{width:min(520px,92vw)}
.cityPick{padding:14px 16px 16px}
.cityPick__search{
  width:100%;
  padding:12px 12px;
  border:1px solid #ddd;
  border-radius:7px;
  margin-bottom:10px;
}
.cityPick__list{
  display:grid;
  gap:8px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}
.cityPick__item{
  text-align:left;
  padding:12px 12px;
  border-radius:7px;
  border:1px solid #eee;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.cityPick__item:hover{border-color:var(--red);color:var(--red)}
.cityPick__empty{padding:10px 0;opacity:.7}

/* Mobile menu keeps working */
@media (max-width:980px){
  .menu__inner{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px 0 14px;
  }
  body.menu-open .menu__inner{display:flex}

  .menu__link{
    padding:12px 12px;
    background:rgba(255,255,255,.10);
    border-radius:7px;
    text-transform:none;
    letter-spacing:0;
  }

  .menu__dd--catalog{
    position:static;
    margin-top:8px;
    min-width:auto;
    border-radius:7px;
  }
}

/* ===== Layout with sidebar (all pages except home) ===== */
.page{padding:18px 0 26px}
.page__grid{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap:22px;
  align-items:start;
}
@media (max-width:980px){
  .page__grid{grid-template-columns:1fr}
}

.sidebox{
  background:#2b2f36;
  padding:10px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.sidebox__title{
  color:#fff;
  font-weight:600;
  font-size:20px;
  margin:4px 0 14px;
}
.sidebox__nav{display:flex;flex-direction:column;gap:8px}
.sidebox__a{
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:10px 10px;
  border-radius:7px;
  background:rgba(255,255,255,.06);
}
.sidebox__a:hover{background:rgba(255,255,255,.12)}
.sidebox__a.is-active {
    background: rgb(98 98 98 / 35%);
    outline: 1px solid rgb(76 76 76 / 35%);
}

/* About/content text */
.pageSection{padding:2px 0}
.pageTitle{margin:0 0 14px;font-size:34px;font-weight:900;color:#111}
.richText{line-height:1.75}
.richText h2{margin:16px 0 10px}
.richText h3{margin:14px 0 8px}
.richText p{margin:10px 0}
.richText ul,.richText ol{padding-left:20px}

/* ===== Sidebar layout ===== */
.layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:22px;
  align-items:start;
  padding:26px 0;
}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;padding:18px 0}
}
.layout__sidebar{}
@media (max-width:980px){
  .layout__sidebar{position:static;top:auto}
}

.sidebox{
  background:#2f3136;
  border-radius:7px;
  padding:16px;
  color:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}
.sidebox__title{font-size:22px;font-weight:900;margin:0 0 12px}
.sidebox__list{display:grid;gap:8px}
.sidebox__link{
  display:block;
  padding:12px 14px;
  border-radius:7px;
  background:rgba(255,255,255,.08);
  font-weight:800;
}
.sidebox__link:hover{background:rgba(255,255,255,.13)}
.sidebox__link.is-active{background:rgba(255,255,255,.18);outline:2px solid rgba(255,255,255,.20)}

/* убрать “двойной контейнер” внутри layout__content */
.layout__content > .container{width:100%;margin:0;padding:0}

/* ===== Product clickable images ===== */
.product__mainimg--btn{
  border:none;
  padding:0;
  background:none;
  width:100%;
  text-align:left;
  cursor:zoom-in;
}
.variantThumb{
  border:none;
  padding:0;
  background:none;
  cursor:zoom-in;
}
.variantThumb img{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid #eee;
  background:var(--muted);
  display:block;
}

/* ===== Image Lightbox (modal fits image) ===== */
.imgbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}
.imgbox.open{
  display:flex;                 /* центрируем по экрану */
  align-items:center;
  justify-content:center;
}
.imgbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

/* stage теперь НЕ фиксированный — под размер картинки */
.imgbox__stage{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px;                 /* ✅ небольшая окантовка */
  background:#fff;
  border-radius:7px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);

  max-width:94vw;               /* чтобы не вылезало за экран */
  max-height:86vh;
}

/* картинка занимает максимум внутри stage, но stage под неё подстраивается */
.imgbox__img{
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;

  max-width:calc(94vw - 20px);  /* 20px = padding*2 */
  max-height:calc(86vh - 20px);
  background:#fff;
}

/* кнопка закрытия — на уголке рамки */
.imgbox__close{
  position:absolute;
  right:-14px;
  top:-14px;
  width:30px;height:30px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  font-size:34px;
  line-height:20px;
  cursor:pointer;
  z-index:5;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  padding: 0px 0 0 3px;
}

/* стрелки — снаружи рамки, по центру (как на референсе) */
.imgbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  font-size:34px;
  line-height:30px;
  cursor:pointer;
  z-index:5;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  padding: 0 0 5px 2px;
}
.imgbox__nav--prev{ left:-15px; }
.imgbox__nav--next{ right:-15px; }

@media (max-width:520px){
  .imgbox__stage{ padding:8px; max-height:82vh; }
  .imgbox__img{
    max-width:calc(94vw - 16px);
    max-height:calc(82vh - 16px);
  }
  .imgbox__nav{ width:44px;height:44px;font-size:30px;line-height:40px; }
  .imgbox__nav--prev{ left:8px; }   /* на мобиле внутрь, чтобы не вылезало */
  .imgbox__nav--next{ right:8px; }
  .imgbox__close{ right:8px; top:8px; }
}

body.no-scroll{overflow:hidden}

.checkline{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.checkline input{
  width:18px;
  height:18px;
}

.badge-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:12px;
  padding:6px 12px;
  border-radius:999px;
  background:#9d0a1e;
  color:#fff;
  font-size:14px;
  font-weight:800;
  vertical-align:middle;
}

.badge-new--small{
  margin-left:0px;
  padding:4px 9px;
  font-size:12px;
   position: absolute;
   border-radius: 7px 0;
}