/* web/css/design-system.css */

/* 1) Токены темы */
:root{
    --bg:#F5F1E5;
    --surface:#FFFFFF;
    --subtle:#F0E5D0;

    --text:#161713;
    --text-muted:#727667;
    --border:#ebcfc2;

    --accent:#185C3A;
    --cta:#F0B93A;
    --cta-hover:#D39F25;

    --success:#2E8B57;
    --warning:#E18A1E;
    --danger:#D4534C;
    --info:#2767C5;

    --font-sans:ui-sans-serif,system-ui,-apple-system,"Inter","Manrope","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

    --font-size-xs:12px;
    --font-size-sm:14px;
    --font-size-md:16px;
    --font-size-lg:18px;
    --font-size-xl:22px;
    --font-size-2xl:28px;
    --font-size-3xl:34px;

    --line-tight:1.15;
    --line-normal:1.45;

    --radius-sm:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;

    --shadow-sm:0 1px 3px rgba(0,0,0,.10);
    --shadow-md:0 10px 28px rgba(0,0,0,.12);
    --shadow-lg:0 22px 48px rgba(0,0,0,.16);

    --transition:200ms cubic-bezier(.22,.8,.2,1);

    --container:1200px;
    --gap:24px;

    --shadow-xs:0 1px 1px rgba(0,0,0,.08);
}


html,body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--font-size-md);line-height:var(--line-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

h1,.h1{font-size:var(--font-size-3xl);line-height:var(--line-tight);font-weight:650;letter-spacing:-.01em;}
h2,.h2{font-size:var(--font-size-2xl);line-height:var(--line-tight);font-weight:640;letter-spacing:-.01em;}
h3,.h3{font-size:var(--font-size-xl); line-height:var(--line-tight);font-weight:640;}
h4,.h4{font-size:var(--font-size-lg); line-height:var(--line-tight);font-weight:620;}
p{margin:0 0 .75em;color:var(--text);}
.muted{color:var(--text-muted);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
hr{border:0;height:1px;background:var(--border);}
ul{padding-left:1.1em;}

.container{max-width:var(--container);margin-inline:auto;padding-inline:20px;}
.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.surface--subtle{background:linear-gradient(135deg,var(--subtle),rgba(255,255,255,.6));border:1px solid var(--border);border-radius:var(--radius-xl);}
.separator{border-top:1px solid var(--border);}
.tag{display:inline-block;padding:6px 10px;font-size:var(--font-size-xs);color:var(--text-muted);border:1px solid var(--border);border-radius:999px;background:rgba(31,58,36,.04);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-weight:600;border-radius:var(--radius-lg);transition:transform var(--transition),background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);border:1px solid transparent;cursor:pointer;}
.btn:active{transform:translateY(.5px);}
.btn--primary{background:var(--cta);color:#0A0A0A;border-color:var(--cta);box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);}
.btn--outline{background:#a8aba445;color:var(--text);border-color:var(--border);}
.btn--outline:hover{background:rgba(31,58,36,.05);}
.btn--ghost{background:transparent;color:var(--text-muted);border-color:transparent;}
.btn--ghost:hover{background:rgba(31,58,36,.06);color:var(--text);}
.btn--sm{padding:8px 14px;font-size:var(--font-size-sm);border-radius:var(--radius-md);}
.btn--lg{padding:14px 22px;font-size:var(--font-size-lg);}

.input,.select,.textarea{width:100%;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition);}
.input::placeholder{color:var(--text-muted);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);}

.label{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:6px;display:inline-block;}
.help{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:6px;}

.card{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.card__media{height:180px;display:grid;place-items:center;border-radius:var(--radius-md);background:linear-gradient(120deg,var(--subtle),rgba(255,255,255,.6));border:1px solid var(--border);}
.card__title{font-size:var(--font-size-lg);font-weight:620;}
.card__muted{color:var(--text-muted);font-size:var(--font-size-sm);}
.card__price{font-size:var(--font-size-xl);font-weight:650;}

.is-success{border-color:color-mix(in srgb,var(--success),white 70%);background:color-mix(in srgb,var(--success),white 92%);}
.is-warning{border-color:color-mix(in srgb,var(--warning),white 70%);background:color-mix(in srgb,var(--warning),white 92%);}
.is-danger{border-color:color-mix(in srgb,var(--danger),white 70%);background:color-mix(in srgb,var(--danger),white 92%);}
[disabled],.is-disabled{opacity:.55;pointer-events:none;}

/* Навигация/хедер — легкая интеграция с Bootstrap */
.site-header-fixed .navbar{background:var(--surface);border-bottom:1px solid var(--border);}
.site-header-fixed .navbar-brand .name{color:var(--text);}
.site-header-fixed .nav-link{color:var(--text);border-radius:10px;padding:.5rem .75rem;}
.site-header-fixed .nav-link:hover{background:rgba(31,58,36,.06);text-decoration:none;}

/* === Header (Ivory & Racing Green) ======================================= */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.header-top { background: linear-gradient(180deg, rgba(31,58,36,.03), rgba(255,255,255,.6)); border-bottom: 1px solid var(--border); font-size: var(--font-size-sm); }
.header-top__phones a { color: var(--text); text-decoration: none; margin-right: 14px; }
.header-top__phones a:hover { text-decoration: underline; text-underline-offset: 3px; }
.header-top__social a { color: var(--text-muted); margin-left: 12px; text-decoration: none; }
.header-top__social a:hover { color: var(--accent); }

.header-nav .navbar { background: var(--surface); }
.header-nav .navbar-brand { display: flex; align-items: center; gap: 12px; }
.header-nav .navbar-brand .brand-name { font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.header-nav .navbar-brand img { height: 40px; width: auto; }

.header-nav .nav-link { color: var(--text); border-radius: 10px; padding: .5rem .75rem; font-weight: 520; }
.header-nav .nav-link:hover { background: rgba(31,58,36,.06); color: var(--text); text-decoration: none; }
.header-nav .nav-link.active { background: rgba(31,58,36,.1); }

.header-nav .navbar-toggler { border: 1px solid var(--border); border-radius: 10px; padding: .35rem .6rem; }
.header-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.header-nav .navbar-toggler-icon{
    /* тёмный «гамбургер» под светлую тему */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23121311' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.header-contacts-mobile { border-top: 1px solid var(--border); }
.header-contacts-mobile .contact-link { color: var(--text); text-decoration: none; }
.header-contacts-mobile .contact-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.header-contacts-mobile .social a { color: var(--text); opacity: .8; }
.header-contacts-mobile .social a:hover { opacity: 1; color: var(--accent); }

/* адаптив: верхняя контактная полоса скрывается в мобилке — контакты внутри меню */
@media (max-width: 991.98px){
    .header-top__phones, .header-top__social { display: none; }
}

/* override accordion active bg */
.accordion-button:focus{
    border-color: #c4a24e;
    box-shadow: 0 0 0 .25rem rgba(85, 62, 2, 0.32) !important;
}
.accordion-button:not(.collapsed){
    background-color: #dfd2b1 !important;
}

/* Mobile typography tweaks */
@media (max-width: 575.98px){ /* Bootstrap xs breakpoint */
    :root{
        --font-size-3xl: 24px;
    }
}

/* === Footer ============================================================= */
.site-footer{ margin-top: 48px; background: var(--surface); border-top: 1px solid var(--border); }
.footer__top{ padding: 36px 0; }
.footer__bottom{ padding: 14px 0; border-top: 1px solid var(--border); font-size: var(--font-size-sm); color: var(--text-muted); }

.footer-grid{ display: grid; grid-template-columns: 2fr 1.2fr 1.2fr; gap: var(--gap); }
@media (max-width: 991.98px){ .footer-grid{ grid-template-columns: 1fr; } }

.footer__brand{ display:flex; align-items:flex-start; gap:14px; }
.footer__logo{ width:80px; height:80px; border-radius: 12px; border:1px solid var(--border); background: linear-gradient(135deg,var(--subtle),rgba(255,255,255,.6)); display:grid; place-items:center; overflow:hidden; padding: 3px}
.footer__logo img{ width:100%; height:100%; object-fit:contain; }
.footer__name{ font-weight:650; letter-spacing:-.01em; color:var(--text); margin:0; }
.footer__desc{ color:var(--text-muted); margin-top:6px; }

.footer__title{ font-weight:640; font-size: var(--font-size-lg); margin-bottom:10px; }
.footer__list{ margin:0; padding:0; list-style:none; }
.footer__list li{ margin:6px 0; }
.footer__link{ color: var(--text); text-decoration:none; }
.footer__link:hover{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.footer__contact{ color: var(--text); }
.footer__contact a{ color: var(--text); text-decoration:none; }
.footer__contact a:hover{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; }

.footer__badge{ display:inline-block; padding:6px 10px; background: rgba(31,58,36,.06); border:1px solid var(--border); border-radius: 999px; font-size: var(--font-size-xs); color: var(--text-muted); }

.footer__social a{ color: var(--text); opacity:.85; margin-right:12px; }
.footer__social a:hover{ color: var(--accent); opacity:1; }

.footer__meta{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__meta .meta{ padding:6px 10px; border:1px solid var(--border); border-radius: 10px; background: rgba(31,58,36,.04); font-size: var(--font-size-sm); color: var(--text-muted); }


/* === Catalog grid (category tiles) ====================================== */
.cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap: var(--gap);
}
.cat-tile{
    display:flex;
    flex-direction:column;
    gap:12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    text-decoration:none;
    color: var(--text);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
    align-items: stretch;
}
.cat-tile:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration:none;
}
.cat-tile:focus{
    outline:none;
    border-color: color-mix(in oklch, var(--accent) 30%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

.cat-tile__media{
    position:relative;
    aspect-ratio: 1 / 1; /* квадрат под квадратную картинку */
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--subtle), rgba(255,255,255,.6));
    border:1px solid var(--border);
    overflow: hidden;
    display:grid;
    place-items:center;
    flex: 0 0 auto;
}

.cat-tile__media img{
    width:100%;
    height:100%;
    object-fit:contain; /* показываем всю картинку целиком */
    display:block;
}

.cat-tile__media--fallback{
    font-size: 32px; color: var(--text-muted);
}

.cat-tile__title{
    font-weight: 640; font-size: var(--font-size-lg);
    letter-spacing: -.01em;
    padding: 0 6px 6px 6px;
}


/* === Catalog: Category view (series pills + product cards) ============== */

/* Серии (пилюли) */
.series-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.series-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    transition:
            background-color var(--transition),
            border-color var(--transition),
            color var(--transition),
            transform var(--transition),
            box-shadow var(--transition);
}
.series-pill:hover {
    background: rgba(31,58,36,.06);
    text-decoration: none;
}
.series-pill.is-active {
    background: rgba(31,58,36,.08);
    border-color: color-mix(in oklch, var(--accent) 18%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}

/* Сетка «коротких» карточек товаров */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
}
.prod-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
    transition:
            transform var(--transition),
            box-shadow var(--transition),
            border-color var(--transition),
            background-color var(--transition);
}
.prod-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.prod-card__media {
    position: relative;
    /*aspect-ratio: 4 / 3;*/
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--subtle), rgba(255,255,255,.6));
    display: grid;
    place-items: center;
}
.prod-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.prod-card__title {
    font-size: var(--font-size-lg);
    font-weight: 640;
    letter-spacing: -.01em;
}
.prod-card__excerpt {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    min-height: 2.2em; /* 2 строки при обычной длине */
}


/* === Breadcrumbs (горизонтальное «подменю») ============================ */
.breadcrumb.rm-bc{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:0;
    margin:0 0 12px 0;
    list-style:none;               /* убираем буллиты */
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.breadcrumb.rm-bc > li{
    display:inline-flex;
    align-items:center;
    line-height:1.2;
}
.breadcrumb.rm-bc > li + li::before{
    content:"/";                   /* разделитель */
    margin:0 6px;
    color: var(--text-muted);
    opacity:.7;
}
.breadcrumb.rm-bc a{
    color: var(--text);
    text-decoration:none;
    border-radius:10px;
    padding:4px 6px;
    transition: background-color var(--transition), color var(--transition);
}
.breadcrumb.rm-bc a:hover{
    background: rgba(31,58,36,.06);/* мягкий hover в нашей палитре */
    color: var(--text);
    text-decoration:none;
}
.breadcrumb.rm-bc .active{
    color: var(--text);            /* текущая – темнее */
    font-weight:600;
}

/* Product modal image: don't upscale beyond natural size, fit viewport */
.product-modal-img{
    width: auto;           /* натуральная ширина */
    max-width: 100%;       /* но не шире модального контента */
    height: auto;          /* сохраняем пропорции */
    max-height: calc(100vh - 200px); /* влезает по высоте, с учётом header/padding */
    border-radius: 12px;
    display: block;
    object-fit: contain;   /* на всякий случай для разных кейсов */
}

/* Двухколоночный блок для Спецификаций и Допусков */
.details-duo {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Допуски справа */
    gap: 1rem;
}

@media (max-width: 576px) {
    .details-duo {
        grid-template-columns: 1fr; /* Стек на мобилках */
    }
}

/* Карточки разделов */
.details-card {
    background: #faf8f2;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Заголовок и список внутри карточек */
.details-title { line-height: 1.2; }
.details-list li { margin-bottom: 6px; }
.details-list li:first-child { list-style: none; }

/* Тонкий разделитель перед таблицей ТХ */
.ds-sep {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
}

.prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); transition: .15s ease; cursor: pointer; }
.prod-card__link { text-decoration: none; color: inherit; }

/* Breadcrumb pills без ссылок */
.rm-bc { display:flex; gap:8px; align-items:center; padding:0; margin:0; list-style:none; }
.rm-bc li { display:flex; align-items:center; gap:8px; }
.rm-bc li + li::before { content:"/"; color: var(--text-muted); opacity:.7; }

.rm-bc__item{
    display:inline-block;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rm-bc__item:hover,
.rm-bc__item:focus{
    background: rgba(0,0,0,.02);
    box-shadow: var(--shadow-sm);
    outline: none;
    cursor: default; /* важно: не рука */
}
.rm-bc__item.is-current{
    font-weight: 600;
    background: var(--surface);
}

/* ==== About page components ==== */

/* Тени — мелкая, если ещё не добавляли */
:root { --shadow-xs: var(--shadow-xs, 0 1px 1px rgba(0,0,0,.06)); }

/* Размер миниатюр галереи как переменная — меняй тут.
   Мобильный: 220px, десктоп: 300px (или своё). */
:root { --gallery-thumb-h: 220px; }
@media (min-width: 992px) {
    :root { --gallery-thumb-h: 300px; } /* <- меняй ЭТУ цифру, чтобы сделать крупнее/мельче на десктопе */
}

/* Утилиты отступов (если используете) */
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.p-18  { padding: 18px; }
.mt-14 { margin-top: 14px; }
.mb-10 { margin-bottom: 10px; }
.mb-3  { margin-bottom: 12px; } /* под вашу вертикальную сетку */

/* Галерея сканов A4 */
.rm-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap: var(--gap);
}
.rm-gallery__item{
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
}
.rm-gallery__item:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.rm-gallery__item img{
    width:100%;
    height: var(--gallery-thumb-h);
    object-fit: cover;
    display:block;
}

/* Блок преимуществ 2×2 (1×4 на мобиле) */
.rm-benefits{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--gap);
}
@media (max-width: 767.98px){
    .rm-benefits{ grid-template-columns: 1fr; }
}

/* Простая модалка для полноразмерного просмотра сканов */
.rm-modal{
    position:fixed; inset:0; display:none;
    background: rgba(0,0,0,.6);
    z-index: 1050;
}
.rm-modal.is-open{ display:flex; align-items:center; justify-content:center; padding:24px; }
.rm-modal__inner{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: min(1000px, 96vw);
    max-height: 90vh;
    padding: 12px;
}
.rm-modal__img{
    width:100%; height:auto; max-height:82vh; object-fit:contain; display:block; border-radius: 10px;
}
.rm-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* ==== News grid (list) ==== */
.news-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
}

/* карточка новости (список) */
.news-grid .news-card{
    display: flex;
    flex-direction: column;
}

/* обложка */
.news-grid .news-card .news-card__cover{
    display: block;
    height: 180px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--subtle), rgba(255,255,255,.6));
    box-shadow: var(--shadow-sm);
}

/* картинка: целиком, без обрезки */
.news-grid .news-card .news-card__cover > img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* fallback той же высоты, что и cover */
.news-grid .news-card .news-card__cover--fallback{
    display: grid;
    place-items: center;
    width: 100%;
    height: 180px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
}

/* типографика */
.news-grid .news-card .news-card__meta{
    margin-top: 8px;
    font-size: .9rem;
}

.news-grid .news-card .news-card__title{
    display: block;
    margin-top: 6px;
    font-weight: 640;
    text-decoration: none;
}
.news-grid .news-card .news-card__title:hover{
    text-decoration: underline;
}

.news-grid .news-card .news-card__excerpt{
    margin-top: 6px;
}

/* крупнее на десктопе */
@media (min-width: 992px){
    .news-grid .news-card .news-card__cover{ height: 220px; }
    .news-grid .news-card .news-card__cover--fallback{ height: 220px; }
}


/* ==== Pagination (LinkPager) ==== */
.rm-pagination {
    display:flex;
    gap: 6px;
    align-items:center;
    list-style:none;
    padding:0;
    margin: 0;
}
.rm-pagination .rm-page { display:inline-block; }
.rm-pagination .rm-page__link {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(0,0,0,.06));
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.rm-pagination .rm-page__link:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.rm-pagination .is-active .rm-page__link { background: var(--surface); font-weight: 600; }
.rm-pagination .is-disabled .rm-page__link { opacity: .5; pointer-events: none; }

/* ===== News view (детальная) — объединённая статья с горизонтальным hero ===== */
.news-article { overflow:hidden; }

/* горизонтальный герой */
.news-article__hero{
    display:flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 16px 0;
}

/* левая колонка — обложка */
.news-article__media{
    margin:0; padding:0;
    flex: 0 0 auto;
    max-width: min(420px, 45%); /* ← хочешь шире/уже — крути это значение */
}

/* не апскейлим обложку */
.news-article__cover{
    display:block;
    width: auto;        /* не растягиваем сверх фактической ширины */
    max-width: 100%;    /* но не шире своей колонки */
    height: auto;       /* сохраняем пропорции */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* правая колонка — дата/заголовок/анонс */
.news-article__header{
    flex: 1 1 0;
    padding: 0;
}
.news-excerpt { margin: 8px 0 0; color: var(--text-muted); }

/* мобильная адаптация — стакаем блоки */
@media (max-width: 767.98px){
    .news-article__hero{ flex-direction: column; }
    .news-article__media{ max-width: 100%; }
    .news-article__cover{ margin: 0 auto; }
}

/* контент статьи */
.news-article__content {
    padding: 0 16px 16px;
    line-height: 1.65;
}
.news-article__content img,
.news-article__content video,
.news-article__content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(0,0,0,.06));
}
.news-article__content h2,
.news-article__content h3 { margin-top: 1.2em; margin-bottom: .5em; }
.news-article__content p { margin: .6em 0; }

/* Prev/Next внутри статьи */
.news-nav {
    display:flex; justify-content:space-between; gap:12px;
    padding: 0 16px 16px;
}
.news-nav__link {
    display:inline-block; padding:10px 12px;
    border:1px solid var(--border); border-radius: 10px; background:#fff;
    text-decoration:none; color:var(--text);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.news-nav__link:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.news-nav__link.is-disabled { opacity:.5; pointer-events:none; }

/* Крошки (подстраховка) */
.rm-bc { display:flex; gap:8px; align-items:center; padding:0; margin:0; list-style:none; }
.rm-bc li { display:flex; align-items:center; gap:8px; }
.rm-bc li + li::before { content:"/"; color: var(--text-muted); opacity:.7; }
.rm-bc__item{
    display:inline-block; padding:6px 10px; border:1px solid var(--border);
    border-radius:999px; background:#fff; color: var(--text);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(0,0,0,.06));
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rm-bc__item:hover, .rm-bc__item:focus{
    background: rgba(0,0,0,.02);
    box-shadow: var(--shadow-sm);
    outline: none;
    cursor: default;
}
.rm-bc__item.is-current{ font-weight:600; background: var(--surface); }

/* удаляем старые hero-правила на всякий случай */
.news-hero,
.news-hero__media,
.news-hero__body,
.news-body { all: unset; }

/* Видео блока новости */
.news-article__video {
    padding: 0 16px 16px;
    text-align: center;         /* чтобы маленькое видео выглядело аккуратно по центру */
}

/* НЕ апскейлим видео */
.news-video {
    width: auto;                /* используем фактическую ширину видео */
    max-width: 100%;            /* но не шире контейнера (уменьшим при необходимости) */
    height: auto;               /* сохраняем пропорции */
    display: inline-block;      /* центрируется через text-align контейнера */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(0,0,0,.06));
}

/* --- Modal: containment для больших картинок без апскейла --- */
.rm-modal__inner{
    display:flex;
    flex-direction: column;
    max-width: min(1200px, 96vw);
    max-height: 90vh;     /* общий предел модалки */
    overflow: hidden;     /* чтобы внутри ничего не вываливалось */
}

/* Картинка: не апскейлим, но ужимаем, чтобы целиком помещалась */
.rm-modal__img{
    align-self: center;
    width: auto;          /* не растягиваем ширину больше фактической */
    height: auto;         /* сохраняем пропорции */
    max-width: 100%;      /* не шире модалки */
    /* оставляем место под подпись и кнопки; при необходимости подстрой цифры */
    max-height: calc(90vh - 120px);
    object-fit: contain;  /* страхуемся от странных кейсов */
    display: block;
}

/* Подпись можно ограничить по высоте, чтобы не съедала всю модалку */
.rm-modal__caption{
    margin-top: 8px;
    color: var(--text);
    text-align: center;
    white-space: pre-line;
    max-height: 18vh;     /* не даём подписи «вытолкнуть» картинку */
    overflow: auto;       /* скролл при длинной подписи */
}

.rm-modal__actions{
    margin-top: 8px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex: 0 0 auto;
}

/* Контейнер карты: адаптивная высота на мобилках */
.rm-map { width: 100%; }
@media (max-width: 767.98px){
    .rm-map iframe, .rm-map > div { height: 360px !important; } /* Я.Карты вставляют iframe/div */
}

/* Honeypot — невидимое для людей, заметное для ботов */
.rm-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ==== Presentations list ================================================ */

.presentation-list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.presentation-item{
    /* просто для зазора между элементами на мобилке */
}

.presentation-link{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
    transition:
            transform var(--transition),
            box-shadow var(--transition),
            border-color var(--transition),
            background-color var(--transition);
}

.presentation-link:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    background: color-mix(in oklch, var(--subtle) 40%, #fff);
}

.presentation-thumb{
    flex: 0 0 140px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--subtle), rgba(255,255,255,.6));
    overflow: hidden;
}

.presentation-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presentation-title{
    font-size: var(--font-size-lg);
    font-weight: 620;
}


/* ==== Catalog: поиск по товарам на главной каталога ===================== */
.catalog-search{
    margin-bottom: 20px;
}

.catalog-search__form{
    margin: 0;
}

.catalog-search__row{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
}

.catalog-search__field{
    flex: 1 1 auto;
    margin: 0;
}

.catalog-search__input{
    height: 100%;
}

.catalog-search__btn{
    flex: 0 0 auto;
    white-space: nowrap;
    height: 100%;
    padding-inline: 18px;
}

.catalog-search__hint{
    margin-top: 6px;
    font-size: var(--font-size-sm);
}

/* Блок результатов поиска */
.catalog-search-results{
    margin-bottom: 24px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}

.catalog-search-results__header{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.catalog-search-results__title{
    margin: 0;
}

.catalog-search-results__meta{
    font-size: var(--font-size-sm);
}

.catalog-search-results__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.catalog-search-results__item{
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition:
            background-color var(--transition),
            border-color var(--transition),
            transform var(--transition),
            box-shadow var(--transition);
}

.catalog-search-results__link{
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--text);
}

.catalog-search-results__product-title{
    font-weight: 580;
}

.catalog-search-results__item:hover{
    background: rgba(31,58,36,.02);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}

.catalog-search-results__empty{
    font-size: var(--font-size-sm);
}

/* адаптив для узких экранов */
@media (max-width: 575.98px){
    .catalog-search__row{
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-search__btn{
        width: 100%;
    }
}