/* ROOMS — единый хедер для всех страниц (источник: главная). Меняешь тут — меняется везде. */
.topbar { background: var(--rooms-black); color: #fff; height: var(--topbar-h); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; position: sticky; top: 0; z-index: 80; }
.topbar__inner { width: 100%; height: 100%; display: flex; align-items: center; gap: 24px; }
.topbar__ticker { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, #000 86%, transparent 100%); }
.topbar__util { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: #fff; }
.topbar__util-link { color: var(--rooms-black); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; transition: color var(--dur-fast); }
.topbar__util-link:hover { color: var(--accent); }
.topbar__util-link--accent { color: var(--rooms-orange); }
.topbar__util-link--accent:hover { color: var(--rooms-orange); filter: brightness(1.12); }
.topbar__phones { display: inline-flex; align-items: center; gap: 10px; }
.topbar__phone { font-weight: 700; text-transform: none; letter-spacing: 0.01em; color: var(--rooms-black); }
.topbar__phone svg { width: 14px; height: 14px; color: var(--rooms-orange); flex: none; }
.topbar__phone:hover { color: var(--rooms-orange); }
.topbar__phone--2 { padding-left: 10px; border-left: 1px solid var(--border); }
.topbar__ai { position: relative; align-self: stretch; display: inline-flex; align-items: center; gap: 7px; padding: 0 0 0 15px; margin-left: 2px; background: linear-gradient(100deg, var(--rooms-orange) 0%, #c8431a 100%); color: #fff; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; white-space: nowrap; transition: filter .25s; }
.topbar__ai::before { content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 100vw; background: #c8431a; } /* дотяжка фона до правого края экрана */
.topbar__ai > * { position: relative; z-index: 1; }
.topbar__ai svg { width: 13px; height: 13px; flex: none; opacity: .95; }
.topbar__ai-badge { font-style: normal; font-weight: 700; font-size: 0.72em; background: rgba(255,255,255,.2); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.05em; }
.topbar__ai:hover { filter: brightness(1.06); }
.topbar__dd { position: relative; }
.topbar__dd-chev { font-style: normal; font-size: 0.8em; opacity: .7; transition: transform var(--dur-fast); }
.topbar__dd:hover .topbar__dd-chev { transform: rotate(180deg); }
.topbar__dd::after { content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 16px; }
.topbar__dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 22px 50px rgba(15,12,10,.18); padding: 8px; min-width: 232px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; z-index: 90; }
.topbar__dd-menu::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0; }
.topbar__dd:hover .topbar__dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.topbar__dd-menu a { color: var(--rooms-black); font-size: 0.82rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 9px 12px; border-radius: 8px; transition: background var(--dur-fast), color var(--dur-fast); }
.topbar__dd-menu a:hover { background: var(--bg-soft); color: var(--accent); }
.topbar .marquee { display: flex; gap: 64px; white-space: nowrap; animation: marquee 16s linear infinite; }
.topbar .marquee span { color: rgba(255,255,255,.7); }
.topbar .marquee .accent { color: var(--rooms-orange); font-weight: 700; }
.header { position: sticky; top: var(--topbar-h); z-index: var(--z-header); background: #fff; border-bottom: 1px solid var(--border); height: var(--header-h); transition: height var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.header.scrolled { height: 72px; box-shadow: var(--sh-sm); }
.header__inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6); }
.header__logo { display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity var(--dur-fast); }
.header__logo:hover { opacity: .85; }
.header__logo img { height: 50px; width: auto; display: block; transition: height var(--dur-base) var(--ease-out); }
.header.scrolled .header__logo img { height: 40px; }
.header__nav { display: flex; gap: 32px; justify-content: center; }
.header__nav a { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.005em; position: relative; padding: 8px 0; transition: color var(--dur-fast) var(--ease-out); white-space: nowrap; }
.header__nav a:hover { color: var(--accent); }
.header__nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--dur-base) var(--ease-out); }
.header__nav a:hover::after { width: 100%; }
.navdd { position: relative; display: inline-flex; align-items: center; }
.navdd__trigger { display: inline-flex; align-items: center; gap: 5px; }
.navdd__chev { font-style: normal; font-size: 0.62em; opacity: .55; transition: transform var(--dur-fast); }
.navdd:hover .navdd__chev { transform: rotate(180deg); }
.navdd::after { content: ""; position: absolute; top: 100%; left: -12px; right: -12px; height: 18px; }
.navdd__menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 22px 50px rgba(15,12,10,.16); padding: 8px; min-width: 212px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; z-index: 90; }
.navdd__menu::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0; }
.navdd:hover .navdd__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.navdd__menu a { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--rooms-black); padding: 9px 12px; border-radius: 8px; transition: background var(--dur-fast), color var(--dur-fast); }
.navdd__menu a::after { display: none; }
.navdd__menu a:hover { background: var(--bg-soft); color: var(--accent); }
.nav-sale { color: var(--accent); display: inline-flex; align-items: center; }
.nav-sale__ic { width: 16px; height: 16px; margin-left: 6px; flex-shrink: 0; }
.nav-horeca { color: var(--accent); display: inline-flex; align-items: center; cursor: pointer; }
.nav-horeca__ic { width: 15px; height: 16px; margin-left: 6px; flex-shrink: 0; }
.mnav-horeca { color: var(--accent) !important; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mnav-horeca__ic { width: 16px; height: 17px; flex-shrink: 0; }
.header__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 500; transition: all var(--dur-fast) var(--ease-out); flex-shrink: 0; white-space: nowrap; line-height: 1; }
.tool-btn:hover { background: var(--bg-soft); }
.tool-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tool-btn.icon-only { width: 42px; padding: 0; justify-content: center; border: 1px solid var(--border); }
.tool-btn.icon-only:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.city-btn { color: var(--text); border: 1px solid var(--border); background: #fff; }
.city-btn:hover { border-color: var(--accent); color: var(--accent); }
.city-btn svg { color: var(--accent); }
.city-btn .city-arrow { width: 12px; height: 12px; opacity: .5; margin-left: 2px; }
.search-btn { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); min-width: 180px; justify-content: flex-start; padding: 0 14px; font-weight: 500; }
.search-btn:hover { border-color: var(--accent); background: #fff; color: var(--text); }
.search-btn .search-kbd { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-body); font-size: 0.6875rem; color: var(--text-muted); background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-weight: 600; line-height: 1; }
.header__mobile-socials { display: none; align-items: center; gap: 8px; }
.cart-btn { background: var(--rooms-black); color: #fff; padding: 0 16px; }
.cart-btn:hover { background: var(--rooms-charcoal); }
.cart-btn .count { background: var(--accent); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 700; line-height: 1; margin-left: 2px; }
.header__nav { position: relative; }
.burger { display: none; position: relative; z-index: 100; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; padding: 0; margin-left: 4px; flex-shrink: 0; }
.burger::before { content: ''; position: absolute; inset: -4px; }  /* clickable area extend */
.burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 1px; transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base); }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== мобильная адаптация шапки (статьи/контент-страницы) ===== */
@media (max-width: 1024px){ .topbar__util { display: none; } }
@media (max-width: 980px){
  .header__nav, .header__tools { display: none; }
  .burger { display: flex; margin-left: auto; }
  .header__logo img { height: 38px; }
}
/* мобильный drawer */
.shdr-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.shdr-drawer__ov { position: absolute; inset: 0; background: rgba(15,12,10,.55); opacity: 0; transition: opacity .3s; }
.shdr-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(84vw,360px); background: #fff; box-shadow: -20px 0 50px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .35s var(--ease-out); display: flex; flex-direction: column; padding: 20px; gap: 2px; overflow-y: auto; }
.shdr-drawer.open { visibility: visible; pointer-events: auto; }
.shdr-drawer.open .shdr-drawer__ov { opacity: 1; }
.shdr-drawer.open .shdr-drawer__panel { transform: none; }
.shdr-drawer__close { align-self: flex-end; width: 40px; height: 40px; border: 0; background: var(--bg-soft); border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--rooms-black); margin-bottom: 6px; }
.shdr-drawer__search { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; }
.shdr-drawer__search svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.shdr-drawer__search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--rooms-black); font-family: inherit; font-size: 0.95rem; }
.shdr-drawer__panel a { padding: 14px 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--rooms-black); border-bottom: 1px solid var(--border); }
.shdr-drawer__panel a:hover { color: var(--accent); }
.shdr-drawer__cta { margin-top: 14px; background: var(--accent); color: #fff !important; text-align: center; border-radius: var(--r-pill); border-bottom: 0 !important; }
.shdr-drawer__sub { display: flex; flex-direction: column; padding: 2px 0 6px 14px; border-bottom: 1px solid var(--border); }
.shdr-drawer__sub a { padding: 9px 6px !important; font-size: .92rem !important; font-weight: 500 !important; color: var(--text-muted) !important; border-bottom: 0 !important; }
.shdr-drawer__sub a:hover { color: var(--accent) !important; }

/* стрелки-индикаторы выпадающих меню (заметнее) */
.topbar__dd-chev { font-size: 0.95em; opacity: .95; margin-left: 2px; color: var(--accent); }
.nav-cat__chev { font-style: normal; font-size: 0.66em; opacity: .6; margin-left: 5px; display: inline-block; transition: transform var(--dur-fast), opacity var(--dur-fast); }
.nav-cat:hover .nav-cat__chev { transform: rotate(180deg); opacity: 1; color: var(--accent); }

/* стильное выпадающее меню «О компании» */
.navdd__menu { min-width: 244px; padding: 10px; border-radius: 16px; box-shadow: 0 26px 56px rgba(15,12,10,.2); gap: 2px; }
.navdd__menu a { position: relative; font-weight: 600; font-size: 0.92rem; padding: 11px 34px 11px 18px; border-radius: 11px; display: block; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast); }
.navdd__menu a::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 17px; background: var(--accent); border-radius: 3px; transition: transform .2s var(--ease-out); }
.navdd__menu a::after { content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-5px); opacity: 0; color: var(--accent); font-weight: 700; transition: opacity .2s, transform .2s; }
.navdd__menu a:hover { background: var(--bg-soft); color: var(--accent); padding-left: 20px; }
.navdd__menu a:hover::before { transform: translateY(-50%) scaleY(1); }
.navdd__menu a:hover::after { opacity: 1; transform: translateY(-50%); }

/* выпадающие меню должны раскрываться поверх (на контент-страницах топбар клипал overflow:hidden) */
.topbar { overflow: visible !important; }
.topbar__ticker { overflow: hidden; }
.topbar__dd-menu, .navdd__menu { z-index: 200; }

/* ===== Mega-menu каталога (перенесён с главной — единый на всех страницах) ===== */
.megamenu { position: fixed; top: calc(var(--header-h,72px) + var(--topbar-h,38px)); left: 50%; transform: translateX(-50%) translateY(-8px); width: min(1160px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px; box-shadow: 0 28px 56px rgba(15,12,10,.16); z-index: 65; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; pointer-events: none; }
.megamenu.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.megamenu__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; padding: 0; }
.megamenu__inner.mm2 { display: grid; grid-template-columns: 280px 1fr; gap: 0; padding: 0; min-height: 344px; }
.mm2__rail { display: flex; flex-direction: column; padding: 14px; gap: 2px; background: var(--bg-soft); border-radius: 0 0 0 16px; }
.mm2__cat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--rooms-black); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.mm2__cat svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); transition: color var(--dur-fast); }
.mm2__cat .mm2__chev { margin-left: auto; font-style: normal; color: var(--text-muted); font-size: 1.15rem; line-height: 1; transition: transform var(--dur-fast), color var(--dur-fast); }
.mm2__cat:hover, .mm2__cat.active { background: #fff; color: var(--accent); box-shadow: 0 4px 14px rgba(15,12,10,.06); }
.mm2__cat:hover svg, .mm2__cat.active svg, .mm2__cat:hover .mm2__chev, .mm2__cat.active .mm2__chev { color: var(--accent); }
.mm2__cat.active .mm2__chev { transform: translateX(3px); }
.mm2__panels { position: relative; padding: 32px 40px; }
.mm2__panel { display: none; grid-template-columns: 1fr auto; gap: 36px; align-items: start; }
.mm2__panel.active { display: grid; animation: mmFade .28s ease; }
@keyframes mmFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mm2__col-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
.mm2__link { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 6px 0; font-size: 0.9rem; font-weight: 500; color: var(--rooms-black); min-width: 220px; transition: color var(--dur-fast); }
.mm2__link:hover { color: var(--accent); }
.mm2__link span { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.mm2__link--all { margin-top: 6px; font-weight: 700; color: var(--accent); }
.mm2__feat { position: relative; display: flex; flex-direction: column; width: 250px; padding: 14px; border-radius: 14px; background: var(--bg-soft); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.mm2__feat:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15,12,10,.12); }
.mm2__feat-img { display: block; aspect-ratio: 1/1; border-radius: 10px; background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--border); }
.mm2__feat-tag { position: absolute; top: 22px; left: 22px; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 20px; }
.mm2__feat-tag--sale { background: var(--accent); }
.mm2__feat-tag--hit { background: var(--rooms-black); }
.mm2__feat-name { font-size: 0.85rem; font-weight: 600; color: var(--rooms-black); margin-top: 12px; }
.mm2__feat-price { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--accent); margin-top: 3px; }
@media (max-width: 1024px) { .megamenu { display: none !important; } }
.megamenu__overlay { position: fixed; inset: 0; background: rgba(15,12,10,.3); backdrop-filter: blur(2px); z-index: 64; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; pointer-events: none; }
.megamenu__overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ===== Выпадающий список городов (единый на всех страницах) ===== */
.city-dd { position: relative; }
.city-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px rgba(15,12,10,.14); padding: 6px; z-index: 120; }
.city-menu[hidden] { display: none; }
.city-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: 0.9rem; color: var(--text); font-family: inherit; }
.city-menu button:hover { background: var(--bg-soft); color: var(--accent); }
.city-menu button.active { color: var(--accent); font-weight: 700; }

/* ===== Дисконт-панель мегаменю — реальные товары со скидкой ===== */
.mm2__feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:start; min-width:380px; }
.mm2__feats:empty{ display:none; }
.mm2__dprod{ display:flex; flex-direction:column; background:var(--bg-soft); border-radius:12px; padding:9px; transition:transform .2s, box-shadow .2s; }
.mm2__dprod:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(15,12,10,.1); }
.mm2__dprod-img{ position:relative; aspect-ratio:1/1; border-radius:8px; background:#fff center/cover no-repeat; border:1px solid var(--border); margin-bottom:7px; }
.mm2__dprod-tag{ position:absolute; top:6px; left:6px; background:#E5484D; color:#fff; font-size:.6rem; font-weight:800; padding:2px 6px; border-radius:9px; }
.mm2__dprod-n{ font-size:.76rem; font-weight:600; color:var(--rooms-black); line-height:1.25; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mm2__dprod-p{ font-size:.82rem; font-weight:800; color:var(--accent); }
.mm2__dprod-p s{ font-size:.68rem; color:var(--text-muted); margin-left:5px; font-weight:600; }