*{box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}body{margin:0;color:#004A1C;background:#f8fafc}
a{color:#004A1C;text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1200px,100% - 32px);margin:0 auto}
.grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.header{background:#ffffff;}.header__wrap{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;color:#111827;font-weight:700;font-size:20px}
.nav{display:flex;gap:16px}.nav a{color:#004A1C;padding:8px 10px;border-radius:10px}.nav a:hover{background:#f3f4f6}
.burger{display:none;background:#fff;border:1px solid #e5e7eb;padding:6px 10px;border-radius:10px}
.hero{background:linear-gradient(180deg,#fff, #f1f5f9)}.hero__wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:24px 0}
.hero__text h1{margin:0 0 8px 0;font-size: 35px;}.hero__text p{margin:0 0 16px 0;color:#004A1C}.hero__img img{width:100%;height:auto;border-radius:20px}
.speedbar{font-size:13px;color:#6b7280;margin:12px 0}
/* ======== MODAL ======== */
:root{ --rfm-header:#004a1c; }
.rfm{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;}
.rfm.open{display:flex;}
.rfm__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.rfm__dialog{
position:relative; width:min(700px,94vw); max-height:92vh; overflow:auto;
background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.rfm__title{
padding:14px 18px; background:var(--rfm-header); color:#fff; font-weight:700; border-radius:14px 14px 0 0;
}
.rfm__close{
position:absolute; right:10px; top:8px; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.rfm__body{ padding:16px; background:#f6f7f9; border-radius:0 0 14px 14px; }
/* немножко подправим вид формы внутри модала */
.rfm .rf-form{ max-width:100%; background:#fff; }
.admin-btn {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0 0 10px 0;
color: #fff;
background: var(--brand);
border-radius: 6px;
text-decoration: none; /* убрали подчёркивание */
transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.admin-btn:hover {
background: color-mix(in srgb, var(--brand) 85%, black 15%);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
transform: translateY(-2px);
text-decoration: none; /* оставляем без подчёркивания */
}
.admin-btn:active {
background: color-mix(in srgb, var(--brand) 70%, black 30%);
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* home categories tiles */
.home-cats{margin:8px auto 16px auto}
.home-cats__grid{display:grid;gap:12px}
.home-cats__grid--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.home-cats__grid--5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:992px){.home-cats__grid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.home-cats__grid--5{grid-template-columns:repeat(2,1fr)}}
.home-cat{position:relative;overflow:hidden;border-radius:16px;border:1px solid #e5e7eb;display:block}
.home-cat img{width:100%;height:120px;object-fit:cover;display:block;transition:transform .3s}
.home-cat span{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;padding:6px 10px;border-radius:10px;font-weight:600}
.home-cat:hover img{transform:scale(1.03)}
/* sidebar */
.search{display:flex;gap:8px;margin-bottom:16px}.search__input{flex:1;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px}
.widget{background:#fff;border:1px solid #e5e7eb;border-radius:16px;margin-bottom:16px}.widget__title{padding:12px 16px;border-bottom:1px solid #e5e7eb;font-weight:600}
.sidebar .catmenu{list-style:none;margin:0;padding:8px 12px}
.sidebar .catmenu > li{margin:6px 0}
.sidebar .catmenu a{display:block;padding:8px 10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#004A1C}
.sidebar .catmenu a:hover{background:#f3f4f6}
.sidebar .catmenu .submenu{list-style:none;margin:6px 0 0 12px;padding-left:0}
.sidebar .catmenu .submenu li{margin:6px 0}
.sidebar .catmenu .is-active > a{background:#004A1C;color:#fff;border-color:#004A1C}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card__img img{display:block;width:100%;height:220px;object-fit:cover;border-bottom:1px solid #e5e7eb}
.card__body{padding:12px}
.card__title{display:block;font-weight:600;color:#111827;margin-bottom:6px}
.card--product{transition:box-shadow .2s, transform .2s}
.card--product:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-2px)}
.card__meta{font-size:12px;color:#6b7280;margin-bottom:6px;display:flex;align-items:center}
.card__meta .dot{margin:0 6px;color:#9ca3af}
.card__price-badge{display:inline-block;margin:6px 0 8px 0;padding:6px 10px;border-radius:10px;background:#ecfdf5;color:#065f46;font-weight:700;border:1px solid #d1fae5}
.card__excerpt{color:#004A1C;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__actions{display:flex;gap:8px;margin-top:8px}
.product__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;background:#fff;border-radius:16px;padding:16px}
.product__cover img{width:100%;height:auto;border-radius:12px}
.product__thumbs{display:flex;gap:8px;margin-top:8px}.product__thumbs img{width:90px;height:70px;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb}
.product__title{margin:0 0 8px 0}
.product__price{font-size:24px;color:#16a34a;font-weight:800;margin-bottom:8px}
.specs{list-style:none;padding-left:0;margin:0 0 12px 0}.specs li{padding:6px 0;border-bottom:1px dashed #e5e7eb;display:flex;gap:6px}.specs li span{color:#6b7280;width:120px}
.product__actions{display:flex;gap:8px;margin-bottom:12px}
.product__desc{color:#004A1C}
.related{margin-top:16px}.related__title{font-weight:700;margin:8px 0}
.footer{margin-top:24px;background:#0f172a;color:#e5e7eb}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px 0}
.footer__title{font-weight:700;margin-bottom:8px}
.footer__copy{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding:12px 0;color:#004A1C}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid #e5e7eb}
.btn--primary{background:#004A1C;color:#fff;border-color:#004A1C}
.btn--ghost{background:#fff;color:#004A1C}
.section{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.section--center{display:grid;place-items:center;min-height:50vh}
.nf__code{font-size:72px;font-weight:800;color:#004A1C;text-align:center}
.nf__text{text-align:center;margin-bottom:12px}
/* responsive */
@media (max-width: 1024px){
.cards{grid-template-columns:repeat(2,1fr)}
.grid{grid-template-columns:1fr}
.product__grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
.hero__wrap{grid-template-columns:1fr}
.nav{display:none}.nav.nav--open{display:flex;flex-direction:column;background:#fff;position:absolute;left:0;right:0;top:60px;padding:12px;border-top:1px solid #e5e7eb}
.burger{display:block}
.cards{grid-template-columns:1fr}
}
/* Динамическая плитка категорий (categorytiles.tpl) */
.home-cats__grid--5 .home-cat{aspect-ratio:auto}
.home-cats__grid--5 .home-cat img{height:120px}
/* ===== Топ-меню (горизонтальное) ===== */
.topnav .catmenu{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.topnav .catmenu > li{position:relative}
.topnav .catmenu > li > a{display:block;padding:10px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#004A1C;white-space:nowrap}
.topnav .catmenu > li > a:hover{background:#f3f4f6}
.topnav .catmenu > li.is-active > a{background:#004A1C;color:#fff;border-color:#004A1C}
/* Выпадающее подменю */
.topnav .catmenu .submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 24px rgba(15,23,42,.08);padding:8px 0;list-style:none;margin:0;display:none;z-index:50}
.topnav .catmenu .submenu li a{display:block;padding:8px 12px;color:#004A1C;border-radius:8px;margin:2px 8px}
.topnav .catmenu .submenu li a:hover{background:#f3f4f6}
.topnav .catmenu > li.has-children:hover > .submenu{display:block}
/* Адаптив: превращаем в столбец внутри раскрывающегося nav */
@media(max-width: 720px){
.topnav .catmenu{flex-direction:column;gap:6px}
.topnav .catmenu > li > a{width:100%}
.topnav .catmenu .submenu{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:8px}
.topnav .catmenu .submenu li a{margin:0;padding:8px 10px}
}
/* Сайдбар остаётся вертикальным (правила уже заданы выше), но слегка подчистим отступы */
.sidebar .catmenu > li > a{display:block}
/* Топ-меню: компактнее и скролл на мобилке */
.topnav .catmenu{flex-wrap:wrap}
@media(max-width:720px){
.topnav{overflow:auto}
.topnav .catmenu{flex-wrap:nowrap;gap:8px}
.topnav .catmenu > li{flex:0 0 auto}
}
/* Верхнее меню (v9 style) */
.nav .topcat{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.nav .topcat > li > a{display:block;padding:8px 12px;border-radius:10px;color:#004A1C;border:1px solid #e5e7eb;background:#fff}
.nav .topcat > li > a:hover{background:#f3f4f6}
.nav .topcat > li.is-active > a{background:#004A1C;border-color:#004A1C;color:#fff}
@media(max-width:720px){.nav .topcat{flex-direction:column}}
/* ===== Новый Topbar ===== */
.topbar{position:relative;background:#ffffffd9;backdrop-filter:saturate(150%) blur(6px);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.topbar .topcat{display:flex;gap:10px;list-style:none;margin:8px 0;padding:6px;border-radius:999px;justify-content:center;flex-wrap:wrap}
.topbar .topcat > li{position:relative}
.topbar .topcat > li > a{display:block;padding:8px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#004A1C;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.topbar .topcat > li > a:hover{background:#f3f4f6}
.topbar .topcat > li.is-active > a{background:#004A1C;border-color:#004A1C;color:#fff;box-shadow:none}
/* Подкатегории как выпадающее меню */
.topbar .topcat .submenu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 24px rgba(15,23,42,.08);padding:8px 0;list-style:none;margin:0;display:none;z-index:60}
.topbar .topcat .submenu li a{display:block;padding:8px 12px;color:#004A1C;border-radius:8px;margin:2px 8px}
.topbar .topcat .submenu li a:hover{background:#f3f4f6}
.topbar .topcat > li:hover > .submenu{display:block}
/* Мобильная версия: горизонтальный скролл «чипсов» */
@media(max-width: 900px){
.topbar{border-radius:0}
.topbar .topcat{justify-content:flex-start;overflow:auto;white-space:nowrap;flex-wrap:nowrap;padding:8px 2px}
.topbar .topcat > li{flex:0 0 auto}
.topbar .topcat .submenu{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:12px}
}
/* ===== Стандартный стиль шапки ===== */
.nav .topcat{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav .topcat > li > a{display:block;padding:8px 0;border:none;background:transparent;color:#004A1C;border-radius:0}
.nav .topcat > li > a:hover{text-decoration:underline;background:transparent}
.nav .topcat > li.is-active > a{color:#004A1C;font-weight:600}
/* Подменю (минимал) */
.nav .topcat .submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.06);padding:6px 0;list-style:none;margin:0;display:none;z-index:50}
.nav .topcat > li{position:relative}
.nav .topcat .submenu li a{display:block;padding:8px 10px;color:#004A1C}
.nav .topcat .submenu li a:hover{background:#f3f4f6}
.nav .topcat > li.has-children:hover > .submenu{display:block}
/* Мобилка: столбец, без излишеств */
@media(max-width:720px){
.nav .topcat{flex-direction:column;gap:8px}
.nav .topcat .submenu{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:12px}
}
/* Простое статическое меню в шапке */
.topnav a{color:#004A1C;padding:8px 10px;border-radius:8px}
.topnav a:hover{background:#f3f4f6;text-decoration:none}
/* ===== Shortstory 2 columns ===== */
.content .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:720px){
.content .cards{grid-template-columns:1fr}
}
/* ===== Two-column cards layout ===== */
.cards{grid-template-columns:repeat(2,1fr)}
@media (max-width: 720px){
.cards{grid-template-columns:1fr}
}
/* ===== Old style news blocks (two-column float) ===== */
.news.float{width:48%;float:left;margin:1%}
.news.float img{max-width:100%;height:auto;display:block;margin:0 auto}
.news.float h3{font-size:16px;margin:8px 0;text-align:center}
.news.float .mlink{text-align:center;margin:8px 0}
.news.float .mlink a{color:#004A1C}
.news.float .argcat{font-size:12px;color:#6b7280;text-align:center}
.bsep{clear:both}
@media(max-width:720px){
.news.float{width:100%;float:none;margin:0 0 16px 0}
}
/* ===== Legacy shortstory: two-column float ===== */
.news.float{width:48%;float:left;margin:1%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.news.float .base.shortstory{padding:12px}
.news.float h3.btl{font-size:18px;margin:6px 0 10px 0;line-height:1.3}
.news.float h3.btl a{color:#111827}
.news.float .dpad img{max-width:100%;height:auto;border-radius:10px;border:1px solid #e5e7eb}
.news.float .mlink{margin-top:8px}
.news.float .mlink a{display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#004A1C}
.news.float .mlink a:hover{background:#f3f4f6;text-decoration:none}
.news.float .argcat.small{color:#6b7280;font-size:12px;margin-top:6px}
.news.float .bsep{height:4px}
/* Stack to one column on small screens */
@media (max-width: 720px){
.news.float{width:100%;float:none;margin:0 0 12px 0}
}
/* Ensure legacy list doesn't get affected by any grid parent accidentally */
.listing:after,.content:after{content:"";display:block;clear:both}
/* ===== Home news block under tiles ===== */
.home-news{margin:16px auto}
.home-news__title{margin:8px 0 12px 0;font-size:22px}
.home-news__list:after{content:"";display:block;clear:both}
/* ===== Двухколоночный макет: слева контент, справа сайдбар ===== */
.container.grid{
display:grid;
grid-template-columns:1fr 300px; /* левая колонка тянется, правая фикс */
gap:20px;
align-items:start;
}
.content{grid-column:1}
.sidebar{grid-column:2}
@media(max-width:900px){
.container.grid{grid-template-columns:1fr}
.sidebar{grid-column:1;order:2;margin-top:20px}
}
/* --- Fix: constrain About gallery images --- */
.about__gallery img{
display:block;
width:100%;
height:200px; /* fallback */
height:clamp(140px, 20vw, 220px); /* responsive cap */
object-fit:cover; /* crop to fit without distortion */
}
.about__gallery figure{margin:0}
/* --- Contacts page --- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:start}
.contact-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.contact-item{display:grid;grid-template-columns:140px 1fr;gap:8px;margin:8px 0}
.ci-label{color:#6b7280}
.ci-value a{color:#004A1C}
.contact-actions{display:flex;gap:10px;margin-top:12px}
.map-wrap{position:relative;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden}
.map-wrap::before{content:"";display:block;padding-top:62%} /* ratio */
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){
.contact-grid{grid-template-columns:1fr}
}
/* ===== Пагинация ===== */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:16px 0;flex-wrap:wrap}
.pager__prev,.pager__next{display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#004A1C}
.pager__prev:hover,.pager__next:hover{background:#f3f4f6;text-decoration:none}
.pager__pages{display:flex;gap:6px;flex-wrap:wrap}
.pager__pages a,.pager__pages span{display:inline-block;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#004A1C}
.pager__pages a:hover{background:#f3f4f6;text-decoration:none}
.pager__pages span{background:#004A1C;border-color:#004A1C;color:#fff} /* текущая страница */
@media(max-width:720px){.pager{gap:8px}.pager__pages a,.pager__pages span{padding:6px 8px}}
/* Navigation must drop below floated shortstories */
.pager, .pager-wrap{clear:both}
/* ===== Home: Популярное ===== */
.home-section__title{margin:10px 0 12px 0;font-size:22px}
.popular__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1200px){.popular__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.popular__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.popular__grid{grid-template-columns:1fr}}
.popcard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;transition:box-shadow .2s, transform .2s}
.popcard:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-2px)}
.popcard__img img{display:block;width:100%;height:170px;object-fit:cover;border-bottom:1px solid #e5e7eb}
.popcard__title{display:block;padding:10px 12px 6px 12px;color:#111827;font-weight:600;line-height:1.3}
.popcard__price{padding:0 12px 12px 12px;color:#16a34a;font-weight:800}
/* ===== Sidebar: Популярное (мини-карточки) ===== */
.widget .mini{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:8px 8px;border-bottom:1px solid #eef2f7}
.widget .mini:last-child{border-bottom:none}
.widget .mini__img img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb;display:block}
.widget .mini__title{display:block;line-height:1.3;color:#111827;font-weight:600;margin-bottom:2px}
.widget .mini__price{color:#16a34a;font-weight:800;font-size:14px}
/* ===== UI Polish ===== */
:root{--radius:12px;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--bg:#f8fafc;--brand:#004A1C}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#004A1C;transition:background .2s, color .2s, box-shadow .2s}
.btn:hover{background:#f3f4f6;text-decoration:none}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{box-shadow:0 8px 18px #004A1C}
.btn--ghost{background:transparent}
.widget{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:16px;margin-top: 16px;}
.widget__title{font-weight:700;margin-bottom:8px}
.search{display:flex;gap:8px;margin-bottom:12px}
.search__input{flex:1;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.card, .home-cat, .news.float{box-shadow:0 2px 6px rgba(15,23,42,.02)}
/* ===== Footer ===== */
.site-footer{margin-top:24px;background:var(--bg);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;padding:20px 0}
.footer-col{color:#004A1C}
.footer-brand .footer-logo{font-weight:800;font-size:20px;margin-bottom:4px}
.footer-tag{color: var(--ink);margin-bottom:8px}
.footer-contacts{list-style:none;padding-left:0;margin:10px 0 6px}
.footer-contacts li{margin:4px 0}
.footer-contacts a{color:#004A1C}
.footer-title{font-weight:700;margin-bottom:8px}
.footer-list{list-style:none;padding-left:0;margin:0}
.footer-list li{margin:6px 0}
.footer-list a{color:#004A1C}
.footer-list a:hover{text-decoration:underline}
.footer-note{color: var(--ink);}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#004A1C;font-size:13px}
.footer-actions{margin-top:10px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:10px 0;color:#6b7280}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;gap:6px}}
/* Minor card polish for home tiles */
.home-cats__grid--5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1100px){.home-cats__grid--5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.home-cats__grid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.home-cats__grid--5{grid-template-columns:repeat(2,1fr)}}
.home-cat{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px;text-align:center;transition:transform .15s, box-shadow .15s}
.home-cat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.home-cat img{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.home-cat span{font-weight:600;color:#111827}
/* Footer: phone + hours */
.footer-hours{color:var(--muted);margin-left:8px}
@media(max-width:640px){.footer-hours{display:block;margin-left:0;margin-top:2px}}
/* ===== Header contacts ===== */
.nav.topnav{display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav.topnav .nav-links{
display:flex;flex-wrap:wrap; gap: 5px;
}
.nav.topnav .nav-links a{color:#004A1C;padding:8px 0}
.header-contacts{display:flex;align-items:center;gap:12px;white-space:nowrap}
.header-contacts .phone{font-weight:700;color:#111827}
.header-contacts .hours{color:#6b7280;font-size:14px}
.header-contacts .call-btn{display:none;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#004A1C;color:#fff}
@media(max-width:900px){
.header-contacts .hours{display:none}
.header-contacts .call-btn{display:inline-block}
}
/* ===== Sidebar category menu (deep, pretty) ===== */
.sidemenu{list-style:none;margin:0;padding-left:0}
.sidemenu__item{position:relative}
.sidemenu__link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;color:#004A1C;text-decoration:none}
.sidemenu__link:hover{background:#f8fafc}
.sidemenu__item.is-active > .sidemenu__link{background:#eff6ff;color:#004A1C;box-shadow:0 0 0 1px #004A1C inset}
.sidemenu--sub{margin:4px 0 6px 12px;padding-left:10px;border-left:1px dashed #e5e7eb}
.sidemenu--sub .sidemenu__link{padding:8px 10px;border-radius:10px}
.sidemenu--sub .sidemenu--sub{margin-left:12px} /* уровни глубже */
.sidemenu__chev{width:14px;height:14px;display:inline-block;flex:0 0 14px;position:relative}
.sidemenu__chev:before{content:"›";display:block;transform:translateY(-1px);opacity:.5}
.has-children.is-active > .sidemenu__link .sidemenu__chev:before{transform:rotate(90deg);opacity:1}
.sidemenu__item + .sidemenu__item{margin-top:2px}
.sidebar .widget .sidemenu{margin-top:6px}
/* ===== Home categories (beauty pass) ===== */
.home-cats{margin:16px 0 8px}
.home-cats__grid--5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1100px){.home-cats__grid--5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.home-cats__grid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.home-cats__grid--5{grid-template-columns:repeat(2,1fr)}}
/* Card style with overlay title */
.home-cats .home-cat{
position:relative; display:block; border-radius:16px; overflow:hidden;
box-shadow:0 2px 6px rgba(15,23,42,.06); transition:transform .2s, box-shadow .2s;
background:#0b1220;
}
.home-cats .home-cat img{
display:block; width:100%; height:clamp(140px, 20vw, 220px);
object-fit:cover; transition:transform .35s ease, filter .35s ease;
}
.home-cats .home-cat::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
pointer-events:none;
}
.home-cats .home-cat span{
position:absolute; left:10px; right:10px; bottom:10px;
color:#fff; font-weight:700; line-height:1.25;
padding:8px 10px; border-radius:12px;
background:rgba(17,24,39,.45); border:1px solid rgba(255,255,255,.18);
backdrop-filter:saturate(140%) blur(6px);
text-shadow:0 1px 1px rgba(0,0,0,.3);
}
/* Hover / focus */
.home-cats .home-cat:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(15,23,42,.18)}
.home-cats .home-cat:hover img{transform:scale(1.04)}
.home-cats .home-cat:focus{outline:none}
.home-cats .home-cat:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
/* Optional small badge (enable by adding ... inside .home-cat) */
.home-cats .home-cat small{
position:absolute; top:10px; left:10px; font-size:12px; color:#fff;
padding:4px 8px; border-radius:999px; background:#004A1C;
}
/* Hero interior image responsive */
.hero img[alt="Интерьер с мебелью"], .intro img[alt="Интерьер с мебелью"]{
display:block; max-width:100%; height:auto; border-radius:16px; border:1px solid #e5e7eb;
}
/* ==== Home categories: light theme (override) ==== */
.home-cats .home-cat{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
box-shadow:0 2px 6px rgba(15,23,42,.04);
}
.home-cats .home-cat::after{display:none !important}
.home-cats .home-cat img{
height:clamp(140px, 20vw, 210px);
object-fit:cover;
}
.home-cats .home-cat span{
position:static !important;
display:block;
margin:8px 8px 6px;
padding:0;
color:#111827;
font-weight:700;
background:transparent;
border:0;
text-shadow:none;
}
/* ===== 200x150 Thumbnail Mode ===== */
:root{--thumb-w:200px;--thumb-h:150px}
/* Home categories: center 200x150 */
.home-cats .home-cat{display:flex;flex-direction:column;align-items:center;padding-bottom:10px}
.home-cats .home-cat img{
width:var(--thumb-w);
height:var(--thumb-h);
object-fit:cover; /* поменять на contain, если не хотите обрезания */
margin:12px auto 6px;
border-radius:12px;
border:1px solid var(--border);
}
/* Shortstory (две колонки): 200x150 по центру */
.news.float .dpad img{
width:var(--thumb-w);
height:var(--thumb-h);
object-fit:cover; /* или contain */
display:block;
margin:0 auto;
border-radius:10px;
border:1px solid #e5e7eb;
}
/* Sidebar Popular minis уже 64x64 — без изменений */
/* Optional: Popular cards (если используете на главной где-то ещё) */
.popcard__img img{
width:var(--thumb-w);
height:var(--thumb-h);
object-fit:cover;
display:block;
margin:8px auto 0;
border-radius:10px;
border:1px solid #e5e7eb;
}
.popcard__img{display:block}
.popcard{ text-align:center }
/* === Fix: images must never overflow blocks; responsive 4:3 frames === */
.home-cats .home-cat img,
.popcard__img img{
width:100% !important;
height:auto !important;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
.news.float .dpad img{
width:100% !important;
height:auto !important;
aspect-ratio:4/3;
object-fit:cover;
display:block;
max-width:420px;
margin:0 auto;
border-radius:10px;
border:1px solid #e5e7eb;
}
/* ===== HERO (merged) ===== */
.hero{padding:18px 0 22px;background:#fff}
.hero__wrap{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px}
.hero__text{padding:8px 0;max-width:560px}
.hero__text h1{margin:0 0 10px}
.hero__text p{margin:0 0 14px;color:#6b7280;line-height:1.6}
.hero__text .btn{margin-top:6px}
.hero__img{margin:6px 0}
.hero__img img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 8px 20px rgba(15,23,42,.06)}
@media (max-width:980px){
.hero__wrap{grid-template-columns:1fr;gap:18px}
.hero__text{max-width:none}
}
/* ==== Mobile-friendly topnav (pills + scroll + sticky) ==== */
.nav.topnav{position:relative; z-index:30}
@media(max-width:900px){
.nav.topnav{flex-wrap:wrap; row-gap:8px; position:sticky; top:0; background:rgba(255,255,255,.98); backdrop-filter:saturate(120%) blur(4px)}
.header-contacts{order:1; width:100%; justify-content:space-between}
.header-contacts .hours{display:none} /* компактнее на мобилках */
.nav.topnav .nav-links{
order:2; width:100%; display:flex; gap:8px; overflow-x:auto;
-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
padding:4px 0 8px; position:relative;
}
.nav.topnav .nav-links a{
scroll-snap-align:start; background:#fff; border:1px solid var(--border);
box-shadow:0 2px 8px rgba(15,23,42,.06);
padding:8px 12px; border-radius:999px;
}
.nav.topnav .nav-links::-webkit-scrollbar{height:6px}
.nav.topnav .nav-links::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:6px}
/* Fade edges hint */
.nav.topnav .nav-links::before,
.nav.topnav .nav-links::after{
content:""; position:absolute; top:0; bottom:0; width:16px; pointer-events:none;
}
.nav.topnav .nav-links::before{left:-2px; background:linear-gradient(90deg, #fff, rgba(255,255,255,0))}
.nav.topnav .nav-links::after{right:-2px; background:linear-gradient(270deg, #fff, rgba(255,255,255,0))}
}
/* ==== Sidebar menu: no underline, soft shadows, nicer active ==== */
.sidebar .widget{box-shadow:0 2px 10px rgba(15,23,42,.06)}
.sidebar .sidemenu a{ text-decoration:none }
.sidemenu__link{
border:1px solid var(--border);
background:#fff;
box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.sidemenu__link:hover{
background:#f9fbff;
box-shadow:0 6px 14px rgba(15,23,42,.08);
}
.is-active > .sidemenu__link{
background:#eff6ff;
color:#004A1C;
box-shadow:0 0 0 1px #004A1C inset, 0 6px 14px rgba(15,23,42,.08);
}
.sidemenu--sub{margin:6px 0 8px 12px}
/* General hover polish for anchors inside widgets */
.widget a:hover{text-decoration:none}
/* ==== Header width: make header wrap wider without touching other containers ==== */
.header__wrap,
header .container,
.site-header .container,
.nav.topnav > .container{
max-width:1320px;
}
/* ==== Sidebar menu: prettier look (no underline, soft gradient, accent rail) ==== */
.sidebar .sidemenu{padding:6px 4px 2px}
.sidebar .sidemenu a{ text-decoration:none }
.sidemenu__item{position:relative}
.sidemenu__link{
position:relative;
border:1px solid var(--border);
background:linear-gradient(180deg,#fff, #f9fafb);
border-radius:12px;
box-shadow:0 1px 3px rgba(15,23,42,.05);
transition:background .2s, box-shadow .2s, transform .2s, border-color .2s;
}
.sidemenu__link:hover{
background:#fff;
box-shadow:0 8px 18px rgba(15,23,42,.10);
transform:translateY(-1px);
}
/* Accent rail on hover/active */
.sidemenu__link::before{
content:"";
position:absolute;
left:6px;
top:50%;
width:4px;
height:0;
transform:translateY(-50%);
border-radius:2px;
background:#004A1C;
opacity:.0;
transition:height .2s, opacity .2s;
}
.sidemenu__link:hover::before{height:60%; opacity:.9}
.is-active > .sidemenu__link{
background:#eff6ff;
color:#004A1C;
border-color:#004A1C;
box-shadow:0 0 0 1px #004A1C inset, 0 6px 14px rgba(15,23,42,.08);
}
.is-active > .sidemenu__link::before{height:60%; opacity:1}
/* Nicer sub levels */
.sidemenu--sub{margin:6px 0 8px 12px;padding-left:10px;border-left:1px dashed #e5e7eb}
.sidemenu--sub .sidemenu__link{border-radius:10px}
/* Ensure no underline on any widget anchor */
.widget a:hover{text-decoration:none}
/* ==== Header wrap width (reliable) ==== */
.container.header__wrap{max-width:1320px;margin:0 auto;padding:0 16px}
/* ==== Sidebar menu: flatter style (no gradient, minimal rounding) ==== */
.sidebar .sidemenu{padding:6px 2px}
.sidemenu__link{
border:1px solid var(--border);
background:#fff;
border-radius:6px; /* меньше скругления */
box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.sidemenu__link:hover{
background:#fff;
box-shadow:0 6px 14px rgba(15,23,42,.08);
transform:translateY(-1px);
}
/* Левая акцентная полоса вместо "капсулы" */
.sidemenu__link{position:relative;overflow:hidden}
.sidemenu__link::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:#004A1C; opacity:0; transition:opacity .2s;
}
.sidemenu__link:hover::before{opacity:1}
.is-active > .sidemenu__link{
color:#004A1C; border-color:#004A1C; box-shadow:0 0 0 1px #004A1C inset, 0 6px 14px rgba(15,23,42,.08)
}
.is-active > .sidemenu__link::before{opacity:1}
.sidemenu--sub{margin:6px 0 8px 12px; padding-left:10px; border-left:1px dashed #e5e7eb}
.sidebar .sidemenu a{text-decoration:none}
/* ===== Home-cats (beauty pass v53) ===== */
:root{
--tile-radius:14px;
}
.home-cats{margin-top:16px;margin-bottom:8px}
/* Default refined card style */
.home-cats .home-cat{
position:relative;
display:block;
background:#fff;
border:1px solid var(--border);
border-radius:var(--tile-radius);
box-shadow:0 2px 6px rgba(15,23,42,.06);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
}
.home-cats .home-cat:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.12)}
.home-cats .home-cat img{
display:block; width:100%; height:auto;
aspect-ratio:4/3; object-fit:cover;
}
.home-cats .home-cat span{
display:block; padding:10px 12px 12px;
color:#111827; font-weight:700; line-height:1.25;
}
.home-cats .home-cat:focus{outline:none}
.home-cats .home-cat:focus-visible{outline:2px solid #004A1C; outline-offset:2px; border-radius:var(--tile-radius)}
/* Optional badge support: add Новинка inside .home-cat */
.home-cats .home-cat small{
position:absolute; top:10px; left:10px;
background:#004A1C; color:#fff; font-size:12px; font-weight:700;
padding:4px 8px; border-radius:999px;
}
/* Variant: compact tiles — add .home-cats--compact to parent */
.home-cats--compact .home-cat img{aspect-ratio:5/4}
.home-cats--compact .home-cat span{padding:8px 10px 10px; font-weight:600}
/* Variant: outline (no shadow) — add .home-cats--outline to parent */
.home-cats--outline .home-cat{box-shadow:none}
.home-cats--outline .home-cat:hover{box-shadow:0 6px 16px rgba(15,23,42,.10)}
/* Variant: subtle lift on mobile only */
@media (max-width: 700px){
.home-cats .home-cat{box-shadow:0 1px 3px rgba(15,23,42,.06)}
.home-cats .home-cat:hover{transform:none; box-shadow:0 8px 18px rgba(15,23,42,.10)}
}
/* ===== News grid: 3 per row on desktop, 2 on tablet, 1 on mobile ===== */
@media (min-width: 1025px){
.news.float{width:calc(33.333% - 2%); float:left; margin:1%}
}
@media (max-width: 1024px) and (min-width: 721px){
.news.float{width:48%; float:left; margin:1%}
}
@media (max-width: 720px){
.news.float{width:100%; float:none; margin:0 0 12px}
}
/* Ensure rows clear after floats */
.listing:after, .content:after, .home-news__list:after{content:"";display:block;clear:both}
/* ===== Live theme v55: color accents, micro-interactions, soft depth ===== */
/* Palette & tokens */
:root{
--brand:#004A1C; /* голубой акцент */
--brand2:#22c55e; /* зелёный акцент */
--ink:#0f172a; /* глубокий текст */
--muted:#6b7280;
--border:#e5e7eb;
--bg:#f8fafc;
--grad: linear-gradient(90deg, var(--brand), var(--brand2));
--radius:12px;
--shadow-1: 0 2px 6px rgba(15,23,42,.06);
--shadow-2: 0 12px 28px rgba(15,23,42,.12);
--anim: 220ms;
--anim-fast: 140ms;
}
/* Soft background with corner vignettes */
body{
background:
radial-gradient(1200px 300px at -10% -10%, #004A1C, transparent 60%),
radial-gradient(1200px 300px at 110% 0%, rgba(34,197,94,.06), transparent 60%),
var(--bg);
}
/* Buttons */
.btn{transition:transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.12)}
.btn--primary{background:var(--brand);border-color:var(--brand)}
.btn--primary:hover{box-shadow:0 10px 26px #004A1C}
.btn--outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn--outline:hover{background:#004A1C}
/* Animated underline for links */
a{transition:color var(--anim-fast)}
a.uline, .content a:not(.btn){
text-decoration:none;
background-image: linear-gradient(currentColor,currentColor);
background-repeat:no-repeat;
background-size: 0 2px;
background-position: 0 100%;
transition: background-size var(--anim), color var(--anim-fast);
}
a.uline:hover, .content a:not(.btn):hover{background-size: 100% 2px}
/* Cards & widgets depth */
.card,.widget,.home-cat,.news.float{transition:box-shadow var(--anim), transform var(--anim)}
.card:hover,.widget:hover,.home-cat:hover,.news.float:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
/* Section titles accent (use .section .title or h2.section-title) */
.section .title, .section-title{
position:relative; padding-bottom:6px; margin-bottom:10px; color:var(--ink);
}
.section .title:after, .section-title:after{
content:""; display:block; width:56px; height:3px; border-radius:2px; margin-top:6px;
background:var(--grad);
}
/* Topnav pills (active helper class) */
.nav.topnav .nav-links a{border-radius:999px}
.nav.topnav .nav-links a.is-active, .nav.topnav .nav-links a[aria-current="page"]{
background:#004A1C;
box-shadow:0 2px 8px rgba(15,23,42,.06);
}
/* Sidebar menu — subtle polish */
.sidebar .widget{box-shadow:var(--shadow-1)}
.sidemenu__link{border-radius:6px; background:#fff; border:1px solid var(--border)}
.sidemenu__link:hover{box-shadow:0 8px 18px rgba(15,23,42,.10)}
.is-active > .sidemenu__link{background:#eff6ff;color:var(--brand);border-color:#004A1C}
/* Home categories: gentle zoom on image */
.home-cats .home-cat img{transition:transform .35s ease}
.home-cats .home-cat:hover img{transform:scale(1.03)}
/* News cards: make images pop a bit */
.news.float .dpad img{transition:transform .35s ease, box-shadow .2s ease}
.news.float:hover .dpad img{transform:scale(1.02); box-shadow:0 12px 26px rgba(15,23,42,.12)}
/* Focus styles */
:where(a,button,.btn,.sidemenu__link,.home-cat){outline: none}
:where(a,button,.btn,.sidemenu__link,.home-cat):focus-visible{
outline:2px solid var(--brand); outline-offset:2px; border-radius:8px;
}
/* Scrollbar (WebKit) */
@media (pointer: fine){
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#d1d5db}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*{animation:none!important; transition:none!important}
}
/* ===== Buttons: gradient hover & shine (v56) ===== */
:root{
--brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
}
.btn{position:relative; overflow:hidden}
/* subtle lift already exists; add more defined hover states */
.btn:hover{transform:translateY(-2px)}
/* Primary: solid -> gradient on hover */
.btn--primary{
background: var(--brand);
border-color: var(--brand);
color:#fff;
}
.btn--primary:hover{
background: var(--brand-grad);
border-color: transparent;
color:#fff;
box-shadow: 0 14px 30px #004A1C;
}
/* Outline: border to gradient fill on hover */
.btn--outline{
background:#fff;
border-color: var(--brand);
color: var(--brand);
}
.btn--outline:hover{
background: var(--brand-grad);
border-color: transparent;
color:#fff;
box-shadow: 0 12px 26px rgba(15,23,42,.18);
}
/* Ghost: text tint -> gradient pill on hover */
.btn--ghost{
background:transparent;
border-color: var(--border);
color:#111827;
}
.btn--ghost:hover{
background: linear-gradient(0deg, #004A1C, #004A1C);
border-color: #dbeafe;
color:#004A1C;
box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
/* Optional: always-gradient button (use class .btn--grad) */
.btn--grad{
background: var(--brand-grad);
border-color: transparent;
color:#fff;
}
.btn--grad:hover{
filter: brightness(1.05);
box-shadow: 0 16px 34px #004A1C;
}
/* Shine sweep on hover (no layout shift) */
.btn--primary::before,
.btn--grad::before,
.btn--outline::before{
content:"";
position:absolute;
top:0; bottom:0; left:-30%;
width:30%;
background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform:skewX(-20deg);
opacity:0;
pointer-events:none;
}
.btn--primary:hover::before,
.btn--grad:hover::before,
.btn--outline:hover::before{
animation:btnShine .9s ease forwards;
}
@keyframes btnShine{
0%{left:-30%;opacity:0}
40%{opacity:1}
100%{left:130%;opacity:0}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.btn:hover{transform:none}
.btn--primary:hover::before,
.btn--grad:hover::before,
.btn--outline:hover::before{animation:none}
}
/* ===== mlink → кнопка + выравнивание (v57) ===== */
.news.float .mlink,
.mlink{display:flex;justify-content:flex-end;margin-top:10px}
.news.float .mlink a,
.mlink a{
display:inline-block;
min-width:150px;
text-align:center;
padding:10px 14px;
border-radius:12px;
border:1px solid var(--brand);
background:var(--brand);
color:#fff;
font-weight:600;
text-decoration:none;
position:relative;
overflow:hidden;
box-shadow:0 2px 6px rgba(15,23,42,.06);
transition:transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast), color var(--anim-fast);
}
.news.float .mlink a:hover,
.mlink a:hover{
transform:translateY(-2px);
background:var(--brand-grad);
border-color:transparent;
box-shadow:0 14px 30px #004A1C;
}
/* shine-эффект (использует @keyframes btnShine из v56) */
.news.float .mlink a::before,
.mlink a::before{
content:"";
position:absolute;
top:0; bottom:0; left:-30%;
width:30%;
background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform:skewX(-20deg);
opacity:0; pointer-events:none;
}
.news.float .mlink a:hover::before,
.mlink a:hover::before{animation:btnShine .9s ease forwards}
/* Контурный вариант: добавь .mlink--outline на контейнер */
.mlink--outline a{
background:#fff !important;
color:var(--brand) !important;
border-color:var(--brand) !important;
}
.mlink--outline a:hover{
background:var(--brand-grad) !important;
color:#fff !important;
border-color:transparent !important;
box-shadow:0 12px 26px rgba(15,23,42,.18) !important;
}
/* Мобилки: тянем кнопку на всю ширину */
@media (max-width:720px){
.news.float .mlink a,
.mlink a{flex:1}
}
/* Уважение reduced motion */
@media (prefers-reduced-motion: reduce){
.mlink a:hover{transform:none}
.mlink a:hover::before{animation:none}
}
/* ===== Category chips for .argcat.small (v58) ===== */
.news.float .argcat.small{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
margin-bottom:2px;
align-items:center;
color:transparent; /* скрываем запятые-разделители из {link-category} */
}
.news.float .argcat.small a{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
font-size:13px;
line-height:1;
border:1px solid var(--border);
border-radius:999px;
background:#fff;
color:#004A1C; /* возвращаем цвет для ссылок */
text-decoration:none;
box-shadow:0 1px 3px rgba(15,23,42,.04);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.news.float .argcat.small a::before{
content:"🏷";
font-size:12px;
opacity:.7;
}
.news.float .argcat.small a:hover{
background:#eff6ff;
border-color:#004A1C;
color:#004A1C;
box-shadow:0 6px 14px rgba(15,23,42,.08);
transform:translateY(-1px);
}
@media (max-width:720px){
.news.float .argcat.small{gap:6px}
.news.float .argcat.small a{padding:6px 10px}
}
/* ===== Shortstory footerbar: categories left + button right (v59) ===== */
.news.float .base.shortstory{position:relative}
.news.float .base.shortstory .mlink{display:block; float:right; margin-top:10px}
.news.float .base.shortstory .argcat.small{display:flex; align-items:center; gap:6px; margin-top:10px; overflow:hidden}
/* Make sure chips don't hide behind the button */
.news.float .base.shortstory .argcat.small{padding-right:180px}
/* Mobile: stack, full-width button */
@media (max-width:720px){
.news.float .base.shortstory .mlink{float:none; display:flex; justify-content:stretch; margin-top:10px}
.news.float .base.shortstory .mlink a{flex:1}
.news.float .base.shortstory .argcat.small{padding-right:0}
}
/* ===== Shortstory footerbar (Grid layout) v60 ===== */
.news.float .base.shortstory{
display:grid;
grid-template-columns: 1fr minmax(170px, 220px);
grid-auto-rows: auto;
grid-row-gap: 10px;
align-items:start;
}
.news.float .base.shortstory > h3.btl,
.news.float .base.shortstory > .dpad{ grid-column: 1 / -1 }
/* footer: chips left, button right */
.news.float .base.shortstory .argcat.small{
grid-column:1;
display:flex;
align-items:center;
gap:8px;
margin-top:4px;
padding-right:0; /* no overlap */
}
.news.float .base.shortstory .mlink{
grid-column:2;
display:flex;
justify-content:flex-end;
align-self:center;
margin-top:4px;
float:none !important; /* override old rule */
}
.news.float .base.shortstory .mlink a{ min-width:170px }
/* Mobile: stack, full-width button */
@media (max-width:720px){
.news.float .base.shortstory{ grid-template-columns: 1fr }
.news.float .base.shortstory .mlink{ grid-column:1; justify-content:stretch }
.news.float .base.shortstory .mlink a{ width:100% }
}
/* ===== Shortstory: simple beautiful footer (v61) ===== */
.news.float .base.shortstory{display:block}
/* Centered button with a subtle divider */
.news.float .base.shortstory .mlink{
display:flex;
justify-content:center;
margin:12px 0 6px;
padding-top:10px;
border-top:1px solid var(--border);
float:none !important;
}
.news.float .base.shortstory .mlink a{min-width:180px; text-align:center}
/* Category chips below the button, centered */
.news.float .base.shortstory .argcat.small{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin:6px 0 0;
padding:0;
color:inherit !important; /* cancel old transparent trick */
}
.news.float .base.shortstory .argcat.small a{
display:inline-flex;
align-items:center;
padding:6px 12px;
font-size:13px;
line-height:1;
border-radius:999px;
background:#f9fafb;
border:1px solid #e5e7eb;
color:#004A1C;
text-decoration:none;
box-shadow:0 1px 3px rgba(15,23,42,.04);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.news.float .base.shortstory .argcat.small a:hover{
background:#eff6ff;
border-color:#004A1C;
color:#004A1C;
box-shadow:0 6px 14px rgba(15,23,42,.08);
transform:translateY(-1px);
}
/* Mobile: full-width button if needed */
@media (max-width:720px){
.news.float .base.shortstory .mlink a{width:100%}
}
/* ===== Card-click overlay for shortstory (v62) ===== */
.news.float .base.shortstory{position:relative; cursor:pointer}
.news.float .base.shortstory .card-link{
position:absolute; left:0; right:0; top:0; bottom:56px; /* оставляем место под чипы */
z-index:1; border-radius:12px;
}
.news.float .base.shortstory .card-link:focus-visible{
outline:2px solid var(--brand); outline-offset:4px; border-radius:12px;
}
.news.float .base.shortstory .btl a,
.news.float .base.shortstory .argcat.small{position:relative; z-index:2}
/* На всякий случай скрываем старую кнопку */
.news.float .base.shortstory .mlink{display:none !important}
/* ===== Fix: make the whole card clickable (image too) ===== */
.news.float .base.shortstory{position:relative}
.news.float .base.shortstory .card-link{
position:absolute; left:0; right:0; top:0; bottom:64px; /* keep space for categories */
z-index:30; display:block; pointer-events:auto; border-radius:12px;
}
/* Prevent the image block from stealing clicks */
.news.float .base.shortstory .dpad,
.news.float .base.shortstory .dpad *{pointer-events:none}
/* Keep categories and title above overlay if needed */
.news.float .base.shortstory .argcat.small,
.news.float .base.shortstory .btl{position:relative; z-index:40}
@media (max-width:720px){
.news.float .base.shortstory .card-link{bottom:80px} /* чуть больше места под перенос чипов */
}
/* ===== Custom related via {custom} (v65) ===== */
.custom-grid{display:grid; gap:12px; margin:16px 0}
.custom-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){ .custom-grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .custom-grid--3{grid-template-columns:1fr} }
.rel-card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 6px rgba(15,23,42,.06);overflow:hidden;transition:transform .2s, box-shadow .2s}
.rel-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.rel-card__link{display:block;color:inherit;text-decoration:none}
.rel-card__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.rel-card__title{display:block;padding:10px 12px;font-weight:700;line-height:1.25;color:#111827}
/* ===== Shortstory v63 overlay (reapplied) ===== */
.news.float .base.shortstory{position:relative; cursor:pointer}
.news.float .base.shortstory .card-link{
position:absolute; left:0; right:0; top:0; bottom:64px;
z-index:30; display:block; pointer-events:auto; border-radius:12px;
}
.news.float .base.shortstory .dpad,
.news.float .base.shortstory .dpad *{pointer-events:none}
.news.float .base.shortstory .argcat.small,
.news.float .base.shortstory .btl{position:relative; z-index:40}
@media (max-width:720px){
.news.float .base.shortstory .card-link{bottom:80px}
}
/* ===== Shortstory ss-card (v67) ===== */
.ss-card{
position:relative;
background:#fff;
border:1px solid var(--border, #e5e7eb);
border-radius:12px;
box-shadow:0 2px 6px rgba(15,23,42,.06);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ss-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.12) }
/* Clickable overlay (leaves room for meta) */
.ss-card .ss-card__link{
position:absolute; inset:0 0 64px 0; /* space for categories */
z-index:30; display:block; border-radius:12px;
}
@media (max-width:720px){ .ss-card .ss-card__link{ inset:0 0 78px 0 } }
.ss-card .ss-card__link:focus-visible{ outline:2px solid var(--brand, #004A1C); outline-offset:4px }
/* Image */
.ss-card__thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#f3f4f6 }
.ss-card__thumb img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .35s ease, filter .25s ease;
pointer-events:none; /* clicks pass to overlay */
}
.ss-card:hover .ss-card__thumb img{ transform:scale(1.03) }
.ss-card__thumb::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.05));
opacity:0; transition:opacity .25s ease;
}
.ss-card:hover .ss-card__thumb::after{ opacity:1 }
/* Body */
.ss-card__body{ padding:12px }
.ss-card .btl{ margin:0 0 8px; font-size:18px; line-height:1.3; position:relative; z-index:40 }
.ss-card .btl a{ color:#111827; text-decoration:none }
.ss-card .btl a:hover{ color:var(--brand, #004A1C) }
/* Category chips */
.ss-card__meta{
display:flex; flex-wrap:wrap; gap:8px; align-items:center;
position:relative; z-index:40; /* above overlay */
}
.ss-card__meta a, .ss-card__meta .chip{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; font-size:13px; line-height:1;
border-radius:999px; background:#f9fafb;
border:1px solid var(--border, #e5e7eb);
color:#004A1C; text-decoration:none;
box-shadow:0 1px 3px rgba(15,23,42,.04);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.ss-card__meta a::before{ content:"🏷"; font-size:12px; opacity:.75 }
.ss-card__meta a:hover, .ss-card__meta .chip:hover{
background:#eff6ff; border-color:#004A1C; color:var(--brand, #004A1C);
box-shadow:0 6px 14px rgba(15,23,42,.08); transform:translateY(-1px);
}
/* ===== Smooth hover polish (v68) ===== */
:root{
--ease-out: cubic-bezier(.22,.61,.36,1);
--t-fast: 160ms;
--t: 280ms;
--t-slow: 420ms;
}
/* Card hover — softer, longer easing */
.ss-card{
transition:
transform var(--t) var(--ease-out),
box-shadow var(--t) var(--ease-out),
border-color 220ms var(--ease-out);
}
.ss-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.14) }
/* Image zoom — smoother & a hair slower */
.ss-card__thumb img{
transition:
transform var(--t-slow) var(--ease-out),
filter var(--t) var(--ease-out);
}
.ss-card:hover .ss-card__thumb img{ transform:scale(1.03) }
.ss-card__thumb::after{ transition:opacity var(--t) var(--ease-out) }
/* Title link — gentle color fade */
.ss-card .btl a{ transition:color var(--t-fast) var(--ease-out) }
/* Chips — calmer hover without jump */
.ss-card__meta a, .ss-card__meta .chip{
transition:
background var(--t) var(--ease-out),
border-color var(--t) var(--ease-out),
color var(--t-fast) var(--ease-out),
box-shadow var(--t) var(--ease-out),
transform var(--t) var(--ease-out);
}
.ss-card__meta a:hover, .ss-card__meta .chip:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(15,23,42,.12);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.ss-card, .ss-card__thumb img, .ss-card__thumb::after,
.ss-card__meta a, .ss-card__meta .chip { transition:none !important }
.ss-card:hover, .ss-card__meta a:hover, .ss-card__meta .chip:hover{
transform:none; box-shadow:inherit;
}
}
/* ===== Vanilla Hero Slider ===== */
.hero__slider{ position:relative; border-radius:16px; border:1px solid var(--border,#e5e7eb); box-shadow:0 8px 20px rgba(15,23,42,.06); overflow:hidden; background:#fff }
.hero__slider .vtrack{ display:flex; transition:transform 520ms cubic-bezier(.22,.61,.36,1); will-change:transform }
.hero__slider .vslide{ flex:0 0 100%; position:relative; overflow:hidden }
.hero__slider .vslide__img img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
@media (max-width:860px){ .hero__slider .vslide__img img{ aspect-ratio:4/3 } }
.hero__slider .vslide__caption{
position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
background:linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.55) 100%);
color:#fff; font-weight:700; line-height:1.25;
text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero__slider .vslide__title{ display:inline-block; max-width:92% }
/* Nav & dots */
.hero__slider .vnav{ position:absolute; inset:auto 0 50% 0; transform:translateY(50%); display:flex; justify-content:space-between; padding:0 6px; pointer-events:none }
.hero__slider .vnav button{ pointer-events:auto; width:40px; height:40px; border-radius:999px; background:#fff; border:1px solid var(--border,#e5e7eb); box-shadow:0 6px 16px rgba(15,23,42,.12); cursor:pointer }
.hero__slider .vnav button:focus-visible{ outline:2px solid var(--brand,#004A1C); outline-offset:2px }
.hero__slider .vdots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center }
.hero__slider .vdots button{ width:12px; height:12px; border-radius:999px; border:0; background:#fff; opacity:.55; cursor:pointer }
.hero__slider .vdots button.active{ opacity:1; transform:scale(1.15) }
/* Pause on hover */
.hero__slider:hover .vtrack{ transition-duration: 600ms }
/* ===== Vanilla Slider robust v72 ===== */
/* Prevent stacking flash before init */
.hero__slider{ position:relative }
.hero__slider:not(.is-ready) > *{ display:none }
.hero__slider.is-ready > .vtrack{ display:flex }
/* ===== Vanilla slider nav icons (v73) ===== */
.hero__slider .vnav button{ position:relative }
.hero__slider .vnav .vprev::before,
.hero__slider .vnav .vnext::before{
content:""; position:absolute; inset:0; margin:auto;
width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:contain;
}
/* Left chevron */
.hero__slider .vnav .vprev::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* Right chevron */
.hero__slider .vnav .vnext::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* Hover polish */
.hero__slider .vnav button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.16) }
/* override: do not hide slides before JS ready */
.hero__slider:not(.is-ready) > *{ display:block !important }
.hero__slider.is-ready > .vtrack{ display:flex }
/* ===== v80: autoplay-only slider, hide controls */
.hero__slider .vnav, .hero__slider .vdots{ display:none !important; }
/* v80: calm down card hovers */
.ss-card:hover{ transform:none; box-shadow:0 2px 6px rgba(15,23,42,.06); }
.ss-card__thumb::after{ opacity:0 !important; }
.ss-card__thumb img{ transform:none !important; }
.ss-card__meta a:hover, .ss-card__meta .chip:hover{
transform:none; box-shadow:0 1px 3px rgba(15,23,42,.06);
}
/* ==== Clean content links: no weird gradient underline ==== */
.content a:not(.btn), a.uline{
background-image: none !important;
text-decoration: none;
color: inherit;
transition: color .2s ease;
}
.content a:not(.btn):hover, a.uline:hover{
color: var(--brand, #004A1C);
text-decoration: underline;
}
/* ==== Category chip over image (top-right) ==== */
.ss-card__thumb{ position: relative; }
.ss-card__meta--over a{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; font-size:13px; line-height:1;
border-radius:999px; background:rgba(255,255,255,.92);
border:1px solid var(--border, #e5e7eb);
color:#111827; text-decoration:none;
box-shadow:0 1px 3px rgba(15,23,42,.15);
backdrop-filter: blur(2px);
transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.ss-card__meta--over a:hover{
background:#fff; border-color:#004A1C; color:var(--brand, #004A1C);
box-shadow:0 4px 12px rgba(15,23,42,.2);
}
@media (max-width: 480px){
.ss-card__meta--over{ top:8px; right:8px }
}
/* === Turnkey v82 additions === */
.ss-card{ position:relative; }
.ss-card .ss-card__link{ position:absolute; inset:0; z-index:30; display:block; border-radius:12px; }
/* Thumb & chip overlay */
.ss-card__thumb{ position:relative; }
.ss-card__meta--over{
position:absolute;
top:10px;
right:10px;
display:flex;
gap:8px;
white-space:nowrap;
z-index:50;
pointer-events:auto;
background: #004a1c;
color: white;
padding: 0.3rem 0.5rem;
border-radius: 12px;
}
.ss-card__meta--over a{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; font-size:13px; line-height:1;
border-radius:999px; background:rgba(255,255,255,.92);
border:1px solid var(--border, #e5e7eb);
color:#111827; text-decoration:none;
box-shadow:0 1px 3px rgba(15,23,42,.15);
backdrop-filter:blur(2px);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ss-card__meta--over a:hover{
background:#fff; border-color:#004A1C; color:var(--brand, #004A1C);
box-shadow:0 4px 12px rgba(15,23,42,.2);
}
/* Hide any legacy meta under title */
.ss-card__body .ss-card__meta{ display:none !important; }
/* Clean content links */
.content a:not(.btn), a.uline{
background-image:none !important;
text-decoration:none;
color:inherit;
transition:color .2s ease;
}
.content a:not(.btn):hover, a.uline:hover{
color:var(--brand, #004A1C);
text-decoration:underline;
}
@media (max-width:480px){ .ss-card__meta--over{ top:8px; right:8px } }
/* === v83 Minimal Hero Slider CSS === */
.hero__slider{ position:relative; overflow:hidden; border-radius:16px; }
.hero__slider .vtrack{ display:flex; transition:transform 520ms cubic-bezier(.22,.61,.36,1); will-change:transform; }
.hero__slider .vslide{ flex:0 0 100%; position:relative; overflow:hidden; }
.hero__slider .vslide img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
@media (max-width:860px){ .hero__slider .vslide img{ aspect-ratio:4/3 } }
/* If any old rules hide children before ready — override */
.hero__slider:not(.is-ready) > *{ display:block !important; }
.hero__slider .vnav, .hero__slider .vdots{ display:none !important; }
/* v93 home-cats refined styles */
.home-cats__grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.home-cat{ display:flex; flex-direction:column; align-items:center; padding:14px; border:1px solid var(--border,#e5e7eb); border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.06); transition:transform .18s ease, box-shadow .18s ease; }
.home-cat:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.12); }
.home-cat__image{ display:block; }
.home-cat__img{ width:200px; height:150px; border-radius:10px; object-fit:cover; display:block; }
.home-cat__title{ margin-top:10px; font-weight:700; text-align:center; text-decoration:none; color:inherit; transition:color .18s ease; }
.home-cat__title:hover{ color:var(--brand,#004A1C); text-decoration:underline; }
.home-cat__sublink{ margin-top:6px; font-size:14px; color:var(--brand,#004A1C); text-decoration:none; }
.home-cat__sublink:hover{ text-decoration:underline; }
@media (max-width:480px){ .home-cats__grid{ grid-template-columns: repeat(2, 1fr); } }
/* ===== Sidebar Menu (categorymenu.tpl) ===== */
.side-menu{ background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:8px; box-shadow:0 8px 22px rgba(15,23,42,.06); overflow:hidden; }
.side-menu__list{ list-style:none; margin:0; padding:6px; }
.side-menu__item{ position:relative; margin:0; }
.side-menu__link{
display:block; padding:10px 12px; border-radius:6px;
text-decoration:none; color:#111827; transition:background .18s ease, color .18s ease;
}
.side-menu__link:hover{ background:#f8fafc; color:#004A1C; }
.side-menu__item.is-active > .side-menu__link{
background:linear-gradient(180deg,#f0f9ff, #fff); color:#004A1C; border-left:3px solid #004A1C;
padding-left:9px;
}
/* children */
.side-menu__item.has-children > .side-menu__link{ font-weight:600; }
.side-menu__sub{ list-style:none; margin:4px 0 6px 0; padding-left:12px; border-left:1px dashed var(--border,#e5e7eb); }
.side-menu__sub .side-menu__link{ padding:8px 10px; font-size:14px; border-radius:6px; }
/* compact on very small widths */
@media (max-width: 860px){
.side-menu{ border-radius:6px; }
.side-menu__link{ padding:9px 10px; }
.side-menu__sub .side-menu__link{ padding:7px 9px; }
}
/* ===== Header & content alignment tweaks ===== */
/* unify container max-widths to make top menu align with news block */
.container, .header__wrap{
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
/* In case header had a different inner wrapper */
.header .container, .nav.topnav .container{
max-width: 1240px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* ===== v95 Sidebar: no borders + left arrows ===== */
.side-menu{ border:none; /* keep soft shadow */ box-shadow:0 8px 22px rgba(15,23,42,.06); }
.side-menu__list{ padding:8px; }
.side-menu__link{
position:relative;
padding:10px 12px 10px 32px; /* room for icon */
text-decoration:none;
color:#111827;
}
/* Left chevron via mask, color inherits from link (currentColor) */
.side-menu__link::before{
content:"";
position:absolute; left:12px; top:50%;
width:14px; height:14px; transform:translateY(-50%);
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:14px 14px;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat:no-repeat; mask-position:center; mask-size:14px 14px;
opacity:.7; transition:opacity .18s ease, transform .18s ease;
}
.side-menu__link:hover{ color:var(--brand,#004A1C); background:#f8fafc; }
.side-menu__link:hover::before{ opacity:1; transform:translateY(-50%) translateX(2px); }
/* Active item styling without border-left */
.side-menu__item.is-active > .side-menu__link{
background:linear-gradient(180deg,#f0f9ff,#fff);
color:var(--brand,#004A1C);
/* no border-left */
}
/* Sublist: remove dashed border, keep neat indent */
.side-menu__sub{ margin:4px 0 6px 0; padding-left:14px; border:none; }
.side-menu__sub .side-menu__link{ padding:8px 10px 8px 30px; font-size:14px; border-radius:6px; }
@media (max-width: 860px){
.side-menu__link{ padding-left:30px; }
.side-menu__sub{ padding-left:12px; }
}
/* === v96 — мебельная тема: мягкие цвета, объём, акценты === */
:root{
--brand: #004A1C; /* фирменный голубой */
--brand-600: #004A1C;
--accent: #b7791f; /* тёплый деревянный акцент */
--bg: #f8fafc; /* общий фон страницы */
--muted: #f1f5f9; /* приглушённый фон блоков */
--card: #ffffff; /* фон карточек */
--border: #e5e7eb;
--shadow: 0 10px 30px rgba(15,23,42,.08);
}
/* Лёгкий фон страницы, чтобы не было «белого листа» */
html, body{ background: linear-gradient(180deg, var(--bg), #fff 320px) fixed; }
/* Шапка и топ-меню чуть отделены тенью */
.header, .nav.topnav{
background:#fff;
box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
/* Ссылки в топ-меню — спокойный hover-фон */
.nav.topnav .nav-links a{
padding: 10px 12px;
border-radius: 10px;
transition: background .18s ease, color .18s ease;
}
.nav.topnav .nav-links a:hover{
background: #004A1C;
color: var(--brand-600);
}
/* Герой-слайдер — «висячий» над фоном блок */
.hero{ background: linear-gradient(180deg,#eff6ff 0%, #fff 100%); }
.hero__slider{
border-radius: 16px;
box-shadow: var(--shadow);
overflow:hidden;
}
/* Категории на главной — светлая подложка */
.home-cats{
padding: 18px 18px 6px;
border-radius: 16px;
}
.home-cat{
background: var(--card);
box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.home-cat__title{ color:#0f172a; }
.home-cat__sublink{ color:var(--brand); }
/* Карточки новостей — объём + акцент */
.ss-card{
background: var(--card);
border: 1px solid rgba(229,231,235,.6);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15,23,42,.06);
transition: box-shadow .2s ease, transform .2s ease;
}
.ss-card:hover{
box-shadow: 0 14px 38px rgba(15,23,42,.12);
transform: translateY(-1px);
}
.ss-card .btl a:hover{ color: var(--brand-600); }
.ss-card__meta--over a{
background: rgba(255,255,255,.92);
border-color: #e7eef6;
}
/* Сайдбар-меню — без рамок, но не теряется на белом */
.side-menu{
background: #f9fafb;
box-shadow: var(--shadow);
}
.side-menu__item.is-active > .side-menu__link{
background: linear-gradient(180deg, #e6f4ff, #fff);
color: var(--brand);
}
.side-menu__link:hover{
background:#f1f5f9;
}
/* Кнопки — лёгкий градиент, заметный hover */
.btn{
background: linear-gradient(180deg, var(--brand), var(--brand-600));
color:#fff; border:none;
box-shadow: 0 8px 20px #004A1C;
transition: box-shadow .2s ease, filter .2s ease, transform .2s ease;
}
.btn:hover{
filter: brightness(1.05);
box-shadow: 0 12px 26px #004A1C;
transform: translateY(-1px);
}
/* Разделители для длинных страниц */
.section-divider{
height: 1px; margin: 28px 0;
background: linear-gradient(90deg, transparent, rgba(2,6,23,.08), transparent);
}
/* Футер темнее — чёткая граница страницы */
.footer{
background: #0b1220; color: #e5e7eb;
}
.footer a{ color:#e2e8f0; }
.footer a:hover{ color:#fff; text-decoration:underline; }
/* === v96.1 — Top menu without shadow + creative buttons === */
/* Header/topnav clean (no shadow), subtle divider line */
.header, .nav.topnav{
background:#fff;
box-shadow:none !important;
padding-bottom: 3px;
}
/* Minimal hover underline animation for top menu links */
.nav.topnav .nav-links a{
background: transparent !important;
color:#0f172a;
position:relative;
transition: color .18s ease;
padding: 10px 12px;
border-radius: 10px;
}
.nav.topnav .nav-links a::after{
content:"";
position:absolute;
left:10px; right:10px; bottom:6px;
height:2px; background: var(--brand);
transform: scaleX(0); transform-origin:left;
transition: transform .2s ease;
}
.nav.topnav .nav-links a:hover{
color: var(--brand-600);
}
.nav.topnav .nav-links a:hover::after{
transform: scaleX(1);
}
/* Buttons: flat base + creative variants */
.btn{
background: var(--brand);
color:#fff; border:none;
border-radius:12px; padding:.7rem 1rem;
box-shadow:none;
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px #004A1C; }
/* Outline */
.btn--outline{ background: transparent; color: var(--brand); border:1.5px solid var(--brand); }
.btn--outline:hover{ background: #004A1C; }
/* Ghost */
.btn--ghost{ background:transparent; color:#0f172a; border:1px solid rgba(15,23,42,.12); }
.btn--ghost:hover{ background:#f8fafc; }
/* Soft */
.btn--soft{ background: linear-gradient(180deg, #e8f6ff, #ffffff); color: var(--brand-600); border:1px solid #dbeafe; }
.btn--soft:hover{ filter:none; box-shadow:0 6px 18px #004A1C; }
/* Wood */
.btn--wood{ background: linear-gradient(180deg, #f7d6a0, #e7b565); color:#004A1C; border:1px solid rgba(215,145,40,.45); }
.btn--wood:hover{ box-shadow:0 8px 24px rgba(183,121,31,.25); }
/* Glass */
.btn--glass{ background: rgba(255,255,255,.45); color:#0f172a; border:1px solid rgba(255,255,255,.6); backdrop-filter: blur(6px); }
.btn--glass:hover{ background: rgba(255,255,255,.6); }
/* Sheen (shine on hover) */
.btn--sheen{ position:relative; overflow:hidden; }
.btn--sheen::after{
content:""; position:absolute; top:-150%; left:-30%;
width:40%; height:300%; transform: rotate(25deg) translateX(-120%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
transition: transform .45s ease;
}
.btn--sheen:hover::after{ transform: rotate(25deg) translateX(260%); }
/* Pill */
.btn--pill{ border-radius:999px; padding:.65rem 1.25rem; }
/* Ripple (CSS-only; JS adds coordinates) */
.btn--ripple{ position:relative; overflow:hidden; }
.btn--ripple:active::before{
content:""; position:absolute; inset:0;
background: radial-gradient(1000px circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%);
animation: ripple .5s ease;
}
@keyframes ripple{ from{ opacity:1; } to{ opacity:0; } }
/* === Популярное (widget-popular) — добавлено ChatGPT === */
.widget.widget-popular { margin-bottom: 16px; }
.widget-popular .popular-list {
list-style: none; margin: 0; padding: 8px 12px;
counter-reset: pop; display: grid; gap: 8px;
}
.widget-popular .popular-list li {
display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
min-height: 28px;
}
.widget-popular .popular-list li::before {
counter-increment: pop;
content: counter(pop);
width: 28px; height: 28px; border-radius: 8px;
border: 1px solid #e5e7eb; display:flex; align-items:center; justify-content:center;
font-weight: 600; color: #004A1C;
}
.widget-popular .popular-list a {
text-decoration: none; color: #004A1C; display: block; line-height: 1.35;
transition: color .2s ease;
}
.widget-popular .popular-list a:hover { color: #004A1C; }
.widget-popular .meta { font-size: 12px; color:#6b7280; margin-top:2px; display:flex; gap:10px; align-items:center; }
.widget-popular .meta .views::before { content: "👁 "; }
.widget-popular .meta .comms::before { content: "💬 "; }
@media (max-width: 600px) {
.widget-popular .popular-list { padding: 8px 10px; gap: 6px; }
.widget-popular .popular-list li { grid-template-columns: 26px 1fr; }
.widget-popular .popular-list li::before { width:26px; height:26px; border-radius:7px; }
}
/* === /Популярное === */
/* === Полная новость (fullstory) — добавлено ChatGPT === */
.article {
background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
}
.article__header { padding:16px; border-bottom:1px solid #e5e7eb; }
.article__title { font-size:24px; line-height:1.25; font-weight:700; margin:0; color:#111827; }
.article__meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:13px; color:#6b7280; }
.article__meta span { display:inline-flex; align-items:center; gap:6px; }
.article__cover { display:block; background:#f9fafb; }
.article__cover img { width:100%; height:auto; display:block; }
.article__body { padding:20px 16px; color:#111827; line-height:1.7; font-size:16px; }
.article__body h2, .article__body h3 { color:#0f172a; margin:1.2em 0 .5em; }
.article__body p { margin:.75em 0; }
.article__tags { padding:0 16px 16px; border-top:1px dashed #e5e7eb; color:#004A1C; }
.article__actions { padding:12px 16px; border-top:1px solid #e5e7eb; display:flex; gap:10px; flex-wrap:wrap; }
.article__action { border:1px solid #e5e7eb; border-radius:10px; padding:8px 12px; text-decoration:none; color:#004A1C; }
@media (max-width: 720px) {
.article__title { font-size:20px; }
.article__body { font-size:15px; }
}
/* === /Полная новость === */
/* === Популярное с миниатюрами (widget-popular) — добавлено ChatGPT === */
.widget.widget-popular { margin-bottom: 16px; }
.popular-list {
list-style: none;
margin: 0;
padding: 8px 12px;
display: grid;
gap: 10px;
}
.popular-item {
display: grid;
grid-template-columns: 84px 1fr;
gap: 12px;
align-items: center;
min-height: 64px;
}
.popular__thumb {
position: relative;
width: 84px;
height: 64px;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(180deg, #f5f7fb, #eef2f7);
display: block;
flex: 0 0 84px;
}
.popular__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Плейсхолдер, если изображения нет */
.popular__thumb:empty::after {
content: "Нет фото";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 12px;
color: #6b7280;
}
.popular__body { min-width: 0; }
.popular__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
color: #004A1C;
line-height: 1.35;
transition: color .2s ease;
}
.popular__title:hover { color: #004A1C; }
.popular__meta {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.popular__meta .views::before { content: ""; }
.popular__meta .comms::before { content: ""; }
.popular__meta .date::before { content: ""; }
@media (max-width: 600px) {
.popular-list { padding: 6px 10px; gap: 8px; }
.popular-item { grid-template-columns: 78px 1fr; }
.popular__thumb { width: 78px; height: 58px; border-radius: 8px; }
}
/* === /Популярное с миниатюрами === */
/* === FIX: Популярное — правка верстки (убраны счетчики, улучшен ряд) === */
.widget-popular .popular-list li::before { content: none !important; display: none !important; }
.popular-list {
list-style: none;
margin: 0;
padding: 10px 12px;
display: grid;
gap: 12px;
}
.popular-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 68px;
}
.popular__thumb {
width: 96px;
height: 72px;
border-radius: 12px;
border: 1px solid #e5e7eb;
overflow: hidden;
flex: 0 0 96px;
background: #f3f4f6;
}
.popular__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.popular__body { min-width: 0; }
.popular__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-decoration: none;
color: #111827;
font-weight: 600;
line-height: 1.3;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
.popular__meta {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.popular__thumb { width: 88px; height: 64px; border-radius: 10px; }
}
/* === /FIX === */
/* === FIX: Популярное только фото+название === */
.popular__meta { display: none !important; }
/* === Контакты (widget-contacts) — восстановлено === */
.widget.widget-contacts { margin-bottom: 16px; }
.widget-contacts .contacts { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 10px; }
.widget-contacts .contacts li { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.widget-contacts .contacts__icon { width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #004A1C; flex: 0 0 32px; }
.widget-contacts .contacts__text { color: #004A1C; line-height: 1.35; }
.widget-contacts .contacts__link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #004A1C; transition: color .2s ease, transform .1s ease; }
.widget-contacts .contacts__link:hover { color: #004A1C; }
.widget-contacts .contacts__link:active { transform: translateY(1px); }
.widget-contacts .contacts__address address { font-style: normal; color: #444; }
@media (max-width: 600px) {
.widget-contacts .contacts { padding: 12px; gap: 8px; }
.widget-contacts .contacts__icon { width: 28px; height: 28px; border-radius: 8px; }
}
/* === Популярное — safety rules (только фото+заголовок) === */
.popular__meta, .popular__price { display: none !important; } /* на случай сторонних tpl */
.popular-item { display:flex; align-items:center; gap:12px; min-height:68px; }
.popular__thumb { width: 96px; height: 72px; border-radius: 12px; border: 1px solid #e5e7eb; overflow:hidden; background:#f3f4f6; flex:0 0 96px; }
.popular__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.popular__body { min-width:0; }
.popular__title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-decoration:none; color:#111827; font-weight:600; line-height:1.3; }
.popular__title:hover { color:#004A1C; }
/* === Популярное (корпоративный стиль) === */
.popular-list {
list-style: none;
margin: 0;
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.popular-item {
display: flex;
align-items: center;
gap: 12px;
}
.popular__thumb {
width: 100px;
height: 100px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.popular__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.popular__body { min-width: 0; }
.popular__title {
font-size: 14px;
font-weight: 500;
color: #004A1C;
line-height: 1.4;
text-decoration: none;
transition: color .2s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popular__title:hover { color: #004A1C; }
/* === Контакты (корпоративный стиль) === */
.widget-contacts .contacts {
list-style: none;
margin: 0;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.widget-contacts .contacts li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #004A1C;
}
.widget-contacts .contacts__icon {
width: 22px;
text-align: center;
flex-shrink: 0;
}
.widget-contacts .contacts__link {
color: #004A1C;
text-decoration: none;
transition: color .2s ease;
}
.widget-contacts .contacts__link:hover { color: #004A1C; }
.widget-contacts .contacts__text { color: #004A1C; }
/* === Правки: Популярное + Контакты (жёсткие переопределения) === */
.widget.widget-popular .popular-list { list-style: none !important; margin: 0 !important; padding: 0 12px 12px !important; }
.widget.widget-popular .popular-item { display: flex !important; align-items: center !important; gap: 12px !important; }
.widget.widget-popular .popular__thumb { width: 100px; height: 100px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f9fafb; border: 1px solid #e5e7eb; }
.widget.widget-popular .popular__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.widget.widget-popular .popular__body { min-width: 0; }
.widget.widget-popular .popular__title { font-size: 14px; font-weight: 500; color: #004A1C; line-height: 1.4; text-decoration: none; transition: color .2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget.widget-popular .popular__title:hover { color: #004A1C; }
.widget.widget-popular .popular__meta, .widget.widget-popular .popular__price { display: none !important; }
.widget.widget-contacts .contacts { list-style: none !important; margin: 0 !important; padding: 12px 16px !important; display: flex; flex-direction: column; gap: 10px; }
.widget.widget-contacts .contacts li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #004A1C; }
.widget.widget-contacts .contacts__icon { width: 22px; text-align: center; flex-shrink: 0; }
.widget.widget-contacts .contacts__link { color: #004A1C; text-decoration: none; transition: color .2s ease; }
.widget.widget-contacts .contacts__link:hover { color: #004A1C; }
.widget.widget-contacts .contacts__text { color: #004A1C; }
/* === /Правки === */
/* === Похожие записи (related) сетка карточек === */
.related-grid {display:grid;grid-template-columns: repeat(3,1fr);gap:12px;padding: 12px 16px;}
.related-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.related-card__thumb { display:block; aspect-ratio: 4 / 3; background:#f3f4f6; }
.related-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.related-card__title { display:block; padding:8px 10px; font-size:13px; line-height:1.35; color:#004A1C; text-decoration:none; }
.related-card__title:hover { color:#004A1C; }
@media (max-width:600px){ .related-grid { grid-template-columns:1fr; } }
/* === /related === */
/* === Related (widget-related) strict grid fix v3 === */
.widget.widget-related .popular-list{ list-style:none; margin:0; padding:12px 16px; }
.widget.widget-related .popular-list.popular-list--grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
@media(max-width:1024px){ .widget.widget-related .popular-list.popular-list--grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .widget.widget-related .popular-list.popular-list--grid{ grid-template-columns:1fr } }
.widget.widget-related .popular-item{ display:block; margin:0; }
/* Reset sidebar-mini sizes inside related */
.widget.widget-related .popular__thumb{
width:100%; height:auto; aspect-ratio:4/3;
border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
background:#f3f4f6; flex: initial;
}
.widget.widget-related .popular__thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.widget.widget-related .popular__body{ margin-top:8px }
.widget.widget-related .popular__title{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
font-weight:600; line-height:1.35; color:#111827; text-decoration:none;
}
.widget.widget-related .popular__title:hover{ color:#004A1C }
/* === Fix: Sidebar menu arrow overlapping text === */
.sidebar .sidemenu .sidemenu__link{
padding-left: 38px !important; /* больше отступ под стрелку */
line-height: 1.35;
}
.sidebar .sidemenu .sidemenu__link::before{
left: 14px !important;
width: 14px; height: 14px;
opacity: .65;
transform: none !important; /* не заезжает на текст */
transition: opacity .18s ease;
}
.sidebar .sidemenu .sidemenu__link:hover::before{ opacity: .9 }
/* === Fullstory product: cleaner look === */
.product__grid{
background:#fff;
padding:16px;
gap:20px;
}
.product__cover{
position:relative;
border:1px solid #e5e7eb;
border-radius:12px;
overflow:hidden;
background:#f9fafb;
}
.product__cover img{
width:100%; height:auto; display:block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.product__thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.product__thumbs img{
width:88px; height:66px; object-fit:cover;
border:1px solid #e5e7eb; border-radius:8px;
cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.product__thumbs img:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.12) }
.product__title{ margin:0 0 8px 0 }
.product__desc{ color:#004A1C }
.specs li{ border-bottom:1px dashed #e5e7eb }
.specs li span{ color:#6b7280; width:120px }
/* === Color accents: widget titles (only related) === */
.widget.widget-related .widget__title{
position:relative;
padding:12px 16px;
border-bottom:1px solid #e5e7eb;
font-weight:700;
}
.widget.widget-related .widget__title::after{
content:""; position:absolute; left:16px; right:16px; bottom:8px;
height:2px; border-radius:2px;
background: linear-gradient(90deg, var(--brand,#004A1C), #004A1C);
}
/* Mobile tweaks */
@media (max-width: 900px){
.product__grid{ padding:12px }
.product__thumbs img{ width:78px; height:58px }
}
/* === Fullstory: build gallery from body images (safety states) === */
.product__grid--noimage{ grid-template-columns:1fr !important }
.product__grid--noimage .product__cover{ display:none }
.product__thumbs:empty{ display:none }
.product__thumbs{ margin-top:10px }
/* === Product specs cards (p-feats) === */
.p-feats{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px;
margin:10px 0 12px;
}
@media(max-width:720px){
.p-feats{ grid-template-columns:1fr }
}
.p-feat{
display:flex; align-items:flex-start; gap:10px;
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:12px;
padding:10px 12px;
}
.p-feat__icon{
width:28px; height:28px; flex:0 0 28px;
background:#004A1C; opacity:.85;
-webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
mask-repeat:no-repeat; mask-position:center; mask-size:contain;
border-radius:6px;
}
/* icons */
.i-factory{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:var(--mask) }
.i-materials{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:var(--mask) }
.i-size{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:var(--mask) }
.p-feat__label{ font-size:12px; color:#6b7280; line-height:1 }
.p-feat__value{ font-weight:700; color:#111827; margin-top:2px; word-break:break-word }
/* === fullstory redesign v3 (unique selectors) === */
.product__grid--fs{ gap:20px }
.product__panel{ position:sticky; top:16px; align-self:start }
.product__lead{ color:#004A1C; margin-bottom:10px }
.product__cta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
/* Safety states from gallery */
.product__grid--noimage{ grid-template-columns:1fr !important }
.product__grid--noimage .product__cover{ display:none }
.product__thumbs:empty{ display:none }
.product__thumbs{ margin-top:10px }
/* Better look for cover */
.product__cover{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#f9fafb }
.product__cover img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover }
.product__thumbs{ display:flex; gap:8px; flex-wrap:wrap }
.product__thumbs img{ width:88px; height:66px; object-fit:cover; border:1px solid #e5e7eb; border-radius:8px; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease }
.product__thumbs img:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.12) }
@media(max-width:900px){
.product__panel{ position:static }
.product__thumbs img{ width:78px; height:58px }
}
/* === fullstory: cover full-width (single column) === */
.product__grid--fs{ display:block; }
.product__panel{ position:static; }
.product__panel--under{
margin-top:12px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.product__lead{ margin:0; color:#004A1C; }
.product__cta{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
/* Safety: when no images — hide cover, keep panel visible */
.product__grid--noimage .product__cover{ display:none }
/* === fullstory: cover only (no right/below panel) === */
.product__grid--fs{ display:block; }
.product__grid--fs + .article__body{ margin-top:12px; }
/* === Sidebar chevron fix (no overlap) === */
.sidebar .sidemenu .sidemenu__link{
position: relative;
padding-left: 38px !important; /* reserve space for arrow */
line-height: 1.35;
}
.sidebar .sidemenu .sidemenu__link::before{
left: 14px !important;
width: 14px; height: 14px;
transform: none !important;
opacity: .7;
}
.sidebar .sidemenu .sidemenu__link:hover::before{
opacity: .95;
transform: none !important;
}
/* Support for .side-menu variant too */
.side-menu .side-menu__link{
position: relative;
padding-left: 32px !important;
line-height: 1.35;
}
.side-menu .side-menu__link::before{
left: 12px !important;
width: 14px; height: 14px;
transform: none !important;
opacity: .7;
}
.side-menu .side-menu__link:hover::before{
opacity: .95;
transform: none !important;
}
/* === Related / Popular hover cue === */
.widget.widget-related .popular-list .popular-item{
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 8px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
background: #fff;
}
.widget.widget-related .popular-list .popular-item:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15,23,42,.10);
border-color: #dbeafe;
background: #fff;
}
/* Image zoom on hover */
.widget.widget-related .popular__thumb{ overflow: hidden; border-radius: 10px; }
.widget.widget-related .popular__thumb img{ transition: transform .25s ease; }
.widget.widget-related .popular-list .popular-item:hover .popular__thumb img{ transform: scale(1.03); }
/* Title accent */
.widget.widget-related .popular-list .popular-item:hover .popular__title{
color: var(--brand, #004A1C);
text-decoration: underline;
}
/* Keyboard focus */
.widget.widget-related .popular-item a:focus-visible{
outline: 2px solid var(--brand, #004A1C);
outline-offset: 2px;
border-radius: 8px;
}
/* === Related section title (clean, corporate) === */
.widget.widget-related{ overflow:hidden; }
.widget.widget-related .widget__title{
margin:0;
padding:12px 16px;
font-weight:700;
font-size:18px;
line-height:1.3;
border-bottom:1px solid #e5e7eb;
color:#0f172a;
position:relative;
background:#fff;
}
.widget.widget-related .widget__title::after{
content:"";
position:absolute;
left:16px; right:16px; bottom:-1px;
height:2px;
background:linear-gradient(90deg, var(--brand,#004A1C), #004A1C);
opacity:.35;
}
/* === Sidebar chevron vertical-centering & spacing === */
.sidebar .sidemenu .sidemenu__link,
.side-menu .side-menu__link{
position:relative;
padding-left:38px !important; /* room for chevron */
line-height:1.4;
min-height:36px;
display:flex;
align-items:center; /* text vertically centered */
}
.sidebar .sidemenu .sidemenu__link::before,
.side-menu .side-menu__link::before{
left:14px !important;
top:50%;
width:14px; height:14px;
transform:translateY(-50%) !important; /* keep centered on hover too */
opacity:.75;
}
.sidebar .sidemenu .sidemenu__link:hover::before,
.side-menu .side-menu__link:hover::before{ opacity:1; }
/* === Related title readability fix === */
.widget.widget-related .popular__title{
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #111827 !important;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: auto;
}
.widget.widget-related .popular-item:hover .popular__title{
color: var(--brand,#004A1C) !important;
text-decoration: underline !important;
}
/* Keep grid items height consistent */
.widget.widget-related .popular-item{ align-items: stretch; }
.widget.widget-related .popular__body{ display:flex; align-items:flex-start; }
/* ===== Contacts — elegant corporate look (scoped) ===== */
.contact--pro .contact-grid.contact-grid--media{
grid-template-columns: 1.05fr .95fr;
gap: 24px;
align-items: stretch;
}
/* Фото слева: чистая «рамка», картинка заполняет блок */
.contact--pro .contact-media{
margin:0; padding:0;
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
background:#fff;
box-shadow:0 8px 22px rgba(15,23,42,.06);
aspect-ratio: 16/10;
}
.contact--pro .contact-media img{
width:100%; height:100%;
object-fit:cover; display:block;
filter:brightness(.98) saturate(.98);
}
/* Карточка контактов */
.contact--pro .contact-card{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:16px;
box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.contact--pro .section-title{ margin:0 0 10px; }
/* Строки контактов: ровная сетка + деликатный разделитель */
.contact--pro .contact-item{
display:grid;
grid-template-columns: 160px 1fr;
gap:12px;
padding:10px 0;
border-bottom:1px dashed #eef2f7;
}
.contact--pro .contact-item:last-child{ border-bottom:none; }
/* Лейблы с иконками через CSS-маски */
.contact--pro .ci-label{
color:#004A1C; font-weight:600;
position:relative; padding-left:26px;
}
.contact--pro .ci-label::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:16px; height:16px; background:#004A1C; opacity:.9;
-webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
.contact--pro .ci-label.is-phone::before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image: var(--mask);
}
.contact--pro .ci-label.is-mobile::before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image: var(--mask);
}
.contact--pro .ci-label.is-mail::before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image: var(--mask);
}
.contact--pro .ci-label.is-addr::before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image: var(--mask);
}
.contact--pro .ci-label.is-time::before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image: var(--mask);
}
/* Значения: контраст и чистые ссылки */
.contact--pro .ci-value{ color:#111827; }
.contact--pro .ci-value a{ color:#111827; font-weight:600; text-decoration:none; }
.contact--pro .ci-value a:hover{ color:#004A1C; text-decoration:underline; }
/* Кнопки */
.contact--pro .contact-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
.contact--pro .contact-actions .btn--primary{
background:#004A1C; border-color:#004A1C; color:#fff;
box-shadow:0 8px 18px #004A1C;
}
.contact--pro .contact-actions .btn--primary:hover{ filter:brightness(1.05); }
.contact--pro .contact-actions .btn--ghost{ background:#fff; border:1px solid var(--border); color:#0f172a }
.contact--pro .contact-actions .btn--ghost:hover{ background:#f8fafc }
/* Карта ниже — общий вид */
.map-section .map-wrap{
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 18px rgba(15,23,42,.06);
}
/* Адаптив */
@media (max-width: 900px){
.contact--pro .contact-grid.contact-grid--media{ grid-template-columns:1fr }
.contact--pro .contact-media{ aspect-ratio:4/3 }
.contact--pro .contact-item{ grid-template-columns: 130px 1fr }
}
/* === Contacts: equal height columns on desktop === */
.contact--pro .contact-grid.contact-grid--media{
align-items: stretch; /* одна высота строки грида */
}
/* делаем колонки флекс-контейнерами, чтобы содержимое растягивалось на 100% */
.contact--pro .media-col,
.contact--pro .contact-col{
display: flex;
}
/* на десктопе убираем фиксированное соотношение сторон и тянем по высоте */
@media (min-width: 901px){
.contact--pro .contact-media{
aspect-ratio: auto !important; /* отменяем прежний ratio */
height: 100%; /* растягиваем под высоту ряда */
}
.contact--pro .contact-media img{
width: 100%;
height: 100%;
object-fit: cover; /* заполняем, без искажений */
object-position: center; /* центр кадра */
display: block;
}
.contact--pro .contact-card{
height: 100%;
display: flex;
flex-direction: column; /* на всякий случай, если будут доп. элементы */
}
}
/* на мобилке оставляем красивый кадр по соотношению 4:3 */
@media (max-width: 900px){
.contact--pro .contact-media{
aspect-ratio: 4 / 3;
height: auto;
}
}
/* === FS gallery: wide by default (safe override) === */
.product__grid.product__grid--fs{display:block;margin:0 0 16px}
.product__grid.product__grid--fs .product__thumbs{justify-content:flex-start}
/* home-cats fullwidth override: на всю ширину экрана с боковыми отступами */
.home-cats.container,
.home-cats .container{
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
/* header polish */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.header.scrolled{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.header .phone-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #e5e7eb}
@media(max-width:960px){.header .phone-pill{display:none}}
/* topnav underline */
.topnav a{position:relative}
.topnav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--c-primary);transition:.25s}
.topnav a:hover::after{width:100%}
/* section-wide: во всю ширину окна с боковыми отступами как у каталога */
.section-wide{
width:100%;
max-width:none;
margin-left:auto;
margin-right:auto;
padding-left:var(--page-gutter);
padding-right:var(--page-gutter);
}
.section{ margin:16px auto; } /* базовый вертикальный отступ секций */
/* === CLEAN MINIMAL OVERRIDES (без фонов/теней/радиусов) === */
/* Features grid: только сетка и отступы */
.features{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
@media(max-width:992px){.features{grid-template-columns:repeat(2,1fr)}}
.feature{padding:16px;background:transparent;border:0;box-shadow:none;border-radius:0}
.feature__icon{width:40px;height:40px;display:grid;place-items:center;margin-bottom:10px}
.feature__title{font-weight:700;margin:0 0 6px}
.feature__text{color:var(--c-muted);font-size:14px;margin:0}
/* Home categories: не вмешиваемся в декор карточек, только лёгкие эффекты при желании */
.home-cat{background:transparent;border:0;box-shadow:none;border-radius:0}
.home-cat:hover img{transform:scale(1.02);transition:transform .25s ease}
/* Product card: только сетка/отступы, без визуального декора */
.product-card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:hidden}
.product-card__body{padding:14px}
.product-card__title{font-weight:700;margin:0 0 6px}
.product-card__meta{color:var(--c-muted);font-size:14px}