/* ============================================================
   КЕРАМОН — keramon.ru
   Vanilla CSS, mobile-first, BEM. Светлая тема (color-scheme: light).
   Палитра из брендбука: оранжевый / кремовая полоса / трава / коричневый.
   Структура: 1. Tokens  2. Base  3. UI-kit  4. Header/Footer
              5. Home    6. Cards 7. Catalog 8. Collection/Product
              9. Cart    10. Content pages  11. Modals  12. Utilities
   ============================================================ */

/* ------------- 1. Design tokens ------------- */
:root {
    color-scheme: light;

    /* Brand */
    --c-orange:       #EF8F35;
    --c-orange-deep:  #DE7333;
    --c-rust:         #A55B2F;
    --c-brown:        #582F15;
    --c-ink:          #221B09;
    --c-cream:        #F5D77B;
    --c-sand:         #F7E9C9;
    --c-paper:        #FBF6EA;
    --c-grass:        #678B36;
    --c-grass-light:  #98A357;
    --c-moss:         #55662A;

    /* Surfaces */
    --c-bg:           #F6F0E4;
    --c-surface:      #FFFDF8;
    --c-surface-2:    #F1E7D3;
    --c-line:         #E3D5BB;

    /* Text */
    --c-text:         #221B09;
    --c-text-soft:    #3E3124;
    --c-muted:        #6E5A45;
    --c-on-dark:      #F7E9C9;
    --c-danger:       #C2412E;
    --c-success-bg:   #E7EFD9;

    /* Type */
    --ff-display: 'Unbounded', 'Arial Black', sans-serif;
    --ff-text:    'Golos Text', 'Segoe UI', Arial, sans-serif;

    --fs-h1: clamp(24px, 3.4vw, 38px);
    --fs-h2: clamp(20px, 2.6vw, 30px);
    --fs-h3: 16px;
    --fs-body: 15px;
    --fs-s: 13.5px;
    --fs-xs: 12.5px;

    /* Layout */
    --container-max: 1240px;
    --container-pad: 16px;
    --section-pad: 40px;
    --grid-gap: 14px;

    /* Shape */
    --r-s: 8px;
    --r:   14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --shadow: 0 10px 30px rgba(60, 35, 10, .10);
    --tr: .18s ease;

    /* Header offsets (используются sticky-элементами) */
    --header-h: 72px;
    --sticky-top: 130px;
}

/* ------------- 2. Base ------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-text);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 10px; }
h1, h2, h3, h4 { font-family: var(--ff-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 900; line-height: 1.1; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: 14px; font-weight: 700; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--c-grass-light); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: 24px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section__head p { margin: 6px 0 0; color: var(--c-muted); max-width: 60ch; }
.section__title { font-size: var(--fs-h2); }
.section__title--center { text-align: center; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-rust); font-weight: 600; display: block; margin-bottom: 6px; }
.muted { color: var(--c-muted); }
.link { color: var(--c-rust); font-weight: 600; border-bottom: 1.5px solid transparent; transition: border-color var(--tr); }
.link:hover { border-color: var(--c-rust); }
.ic { width: 20px; height: 20px; flex: none; }
.ic-chevron { width: 14px; height: 14px; }

/* ------------- 3. UI-kit ------------- */
/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--r-pill); border: 1.5px solid transparent;
    font-weight: 600; font-size: var(--fs-body); line-height: 1.3; text-align: center;
    transition: transform var(--tr), background-color var(--tr), border-color var(--tr), color var(--tr);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-loading { opacity: .6; pointer-events: none; }
.btn--primary   { background: var(--c-ink); color: var(--c-cream); }
.btn--primary:hover { background: #000; }
.btn--orange    { background: var(--c-orange); color: var(--c-ink); }
.btn--orange:hover { background: var(--c-orange-deep); }
.btn--green     { background: var(--c-grass); color: #fff; }
.btn--green:hover { background: var(--c-moss); }
.btn--light     { background: var(--c-surface); color: var(--c-text); border-color: var(--c-line); }
.btn--light:hover { border-color: var(--c-orange); }
.btn--ghost     { background: transparent; color: var(--c-text); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); }
.btn--outline-light { background: transparent; color: var(--c-cream); border-color: rgba(247,233,201,.4); }
.btn--outline-light:hover { border-color: var(--c-cream); }
.btn--sm { padding: 8px 14px; font-size: 13.5px; }
.btn--lg { padding: 14px 24px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.btn--icon .ic { width: 22px; height: 22px; }

/* Badges & tags */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); line-height: 1.4; }
.badge--green  { background: var(--c-grass); color: #fff; }
.badge--orange { background: var(--c-orange); color: var(--c-ink); }
.badge--soft   { background: var(--c-surface-2); color: var(--c-muted); }
.badge--ink    { background: var(--c-ink); color: var(--c-cream); }
.badge--cream  { background: var(--c-cream); color: var(--c-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13.5px; font-weight: 500; transition: border-color var(--tr); }
.chip:hover { border-color: var(--c-orange); }
.chip.is-active { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.chip__count { color: var(--c-muted); font-size: 12px; }
.chip.is-active .chip__count { color: inherit; opacity: .8; }
.chip--remove::after { content: "×"; color: var(--c-rust); font-weight: 700; margin-left: 2px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip--more { border-style: dashed; color: var(--c-rust); cursor: pointer; background: none; font-family: inherit; }
.chip--more:hover { border-color: var(--c-rust); }
.categories-more { align-items: center; row-gap: 8px; }
.categories-more__label { color: var(--c-muted); font-size: 13.5px; margin-right: 4px; }
.categories-more .chip { padding: 6px 12px; font-size: 13px; }

/* Stock status */
.stock { font-size: 12.5px; font-weight: 600; color: var(--c-grass); display: inline-flex; align-items: center; gap: 6px; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stock--transit { color: var(--c-rust); }
.stock--order { color: var(--c-muted); }
.stock--none { color: var(--c-danger); }

/* Forms */
.form-control, input[type=text], input[type=number], input[type=search], input[type=tel], input[type=email], select, textarea {
    border: 1.5px solid var(--c-line); border-radius: 10px; padding: 10px 12px; background: var(--c-surface);
    color: var(--c-text); font: inherit; font-size: 14px; width: 100%; transition: border-color var(--tr);
}
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--c-orange); outline: none; }
.form-control.is-invalid { border-color: var(--c-danger); }
textarea { min-height: 96px; resize: vertical; }
.form-field { display: grid; gap: 5px; }
.form-field__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.form-field__hint { font-size: 12.5px; color: var(--c-muted); display: flex; gap: 6px; align-items: center; }
.form-field__error { font-size: 12.5px; color: var(--c-danger); }
.form-row { display: grid; gap: 12px; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-status { font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.form-status--error { background: #FBE9E5; color: var(--c-danger); }
.form-status--ok { background: var(--c-success-bg); color: var(--c-moss); }
.form-status--loading { background: var(--c-surface-2); color: var(--c-muted); }

/* Checkbox / radio */
.checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--c-line); border-radius: 6px; background: var(--c-surface); display: grid; place-items: center; color: #fff; margin-top: 1px; transition: background-color var(--tr), border-color var(--tr); }
.checkbox__box svg { width: 12px; height: 12px; opacity: 0; }
.checkbox__input:checked + .checkbox__box { background: var(--c-grass); border-color: var(--c-grass); }
.checkbox__input:checked + .checkbox__box svg { opacity: 1; }
.checkbox__input:focus-visible + .checkbox__box { outline: 3px solid var(--c-grass-light); }
.checkbox__label a { color: var(--c-rust); text-decoration: underline; }

/* Option card (доставка / оплата) */
.option-list { display: grid; gap: 8px; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1.5px solid var(--c-line); border-radius: 12px; padding: 10px 12px; font-size: 14px; cursor: pointer; background: var(--c-surface); transition: border-color var(--tr); }
.option:has(input:checked) { border-color: var(--c-orange); background: var(--c-paper); }
.option input { accent-color: var(--c-grass); width: 18px; height: 18px; }
.option__title { font-weight: 600; }
.option__desc { display: block; color: var(--c-muted); font-size: 12.5px; }
.option__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.option.is-disabled { opacity: .5; pointer-events: none; }

/* Toggle switch */
.toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { width: 42px; height: 24px; border-radius: 999px; background: var(--c-line); position: relative; flex: none; transition: background-color var(--tr); margin-top: 2px; }
.toggle__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--tr); }
.toggle__input:checked + .toggle__track { background: var(--c-grass); }
.toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(18px); }
.toggle__title { font-weight: 600; display: block; }
.toggle__desc { color: var(--c-muted); font-size: 12.5px; }

/* Tabs */
.tabs { display: inline-flex; background: var(--c-surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs__btn { background: transparent; border: 0; border-radius: var(--r-pill); padding: 7px 14px; font-weight: 600; font-size: 13.5px; color: var(--c-muted); white-space: nowrap; transition: background-color var(--tr), color var(--tr); }
.tabs__btn:hover { color: var(--c-text); }
.tabs__btn.is-active { background: var(--c-ink); color: var(--c-cream); }
.tabs__btn small { font-weight: 400; opacity: .8; margin-left: 4px; }
.tabs--line { background: none; padding: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; gap: 0; }
.tabs--line .tabs__btn { border-radius: 0; padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs--line .tabs__btn.is-active { background: none; color: var(--c-text); border-color: var(--c-orange); }
.tab-panel[hidden] { display: none; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; background: var(--c-surface); }
.qty__btn { background: transparent; border: 0; width: 36px; height: 36px; font-weight: 700; display: grid; place-items: center; }
.qty__btn svg { width: 14px; height: 14px; }
.qty__btn:hover { background: var(--c-surface-2); }
.qty__input { width: 56px; border: 0; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; padding: 0; background: transparent; -moz-appearance: textfield; }
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Accordion (FAQ) */
.accordion { display: grid; gap: 8px; }
.accordion__details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0 16px; }
.accordion__summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; color: var(--c-rust); font-weight: 700; flex: none; }
.accordion__details[open] .accordion__summary::after { content: "–"; }
.accordion__content { padding-bottom: 14px; color: var(--c-muted); font-size: 14px; }
.accordion__content p:last-child { margin: 0; }

/* Card */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 18px; }
.card--sand { background: var(--c-sand); border-color: transparent; }
.card--ink { background: var(--c-ink); color: var(--c-on-dark); border-color: transparent; }
.card--ink h2, .card--ink h3 { color: var(--c-cream); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); }
.table { font-size: 14px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table th { background: var(--c-surface-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.table tr:last-child td { border: 0; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .is-best { background: var(--c-success-bg); font-weight: 600; }

/* Hint / callout */
.hint { background: var(--c-sand); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; display: flex; gap: 10px; }
.hint::before { content: "💡"; }
.hint--ok { background: var(--c-success-bg); }
.hint--ok::before { content: "✓"; color: var(--c-grass); font-weight: 700; }
.callout { background: var(--c-sand); border-left: 5px solid var(--c-orange); border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: 15px; }

/* Grids */
.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Color swatch & size chip (коллекции) */
.color-chip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px var(--c-line); }
.color-chip--lg { width: 24px; height: 24px; }
.size-chip { background: var(--c-surface-2); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 600; display: inline-block; }
.size-chip--more { background: transparent; color: var(--c-muted); }

/* Placeholder texture (пока нет фото) */
.ph { background: var(--c-surface-2); position: relative; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ------------- 4. Header ------------- */
.topbar { background: var(--c-ink); color: var(--c-sand); font-size: 13px; }
.topbar__container { display: flex; align-items: center; gap: 20px; min-height: 36px; flex-wrap: wrap; }
.topbar__grow { flex: 1; }
.topbar b { color: var(--c-cream); font-weight: 600; }
.topbar__geo b { border-bottom: 1px dashed var(--c-cream); }
.topbar__link:hover { color: var(--c-cream); }

.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.site-header__container { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; min-height: var(--header-h); position: relative; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__name { font-family: var(--ff-display); font-weight: 900; font-size: 17px; line-height: 1; display: block; }
.logo__tag { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin-top: 3px; font-weight: 600; }
.logo--inverse .logo__name { color: var(--c-cream); }
.logo--inverse .logo__tag { color: var(--c-sand); }

.catalog-btn { background: var(--c-orange); color: var(--c-ink); border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; transition: background-color var(--tr); }
.catalog-btn__burger { width: 18px; display: grid; gap: 3px; }
.catalog-btn__burger i { height: 2px; background: currentColor; display: block; border-radius: 2px; }
.catalog-btn[aria-expanded="true"] { background: var(--c-ink); color: var(--c-cream); }

.site-search { display: flex; align-items: center; background: var(--c-surface-2); border: 1.5px solid var(--c-line); border-radius: 12px; padding: 0 6px 0 14px; height: 46px; gap: 10px; position: relative; }
.site-search:focus-within { border-color: var(--c-orange); }
.site-search__input { flex: 1; background: transparent; border: 0; font: inherit; color: var(--c-text); min-width: 0; padding: 0; }
.site-search__input:focus { outline: none; }
.site-search__submit { background: var(--c-ink); color: var(--c-cream); border: 0; border-radius: 9px; padding: 8px 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.site-search__submit .ic { width: 16px; height: 16px; }
.site-search__photo { background: transparent; border: 0; color: var(--c-muted); display: inline-flex; padding: 6px; border-radius: 8px; }
.site-search__photo:hover { color: var(--c-rust); background: var(--c-surface); }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none; z-index: 50; }
.search-suggest.is-open { display: grid; gap: 2px; }
.search-suggest__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); padding: 6px 10px 2px; font-weight: 600; }
.search-suggest__item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; align-items: center; }
.search-suggest__item:hover { background: var(--c-surface-2); }
.search-suggest__item small { color: var(--c-muted); }
.search-suggest__thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; }
.search-suggest__all { display: block; text-align: center; padding: 8px; font-weight: 600; color: var(--c-rust); }

.header-actions { display: flex; gap: 6px; }
.header-actions__btn { display: grid; justify-items: center; gap: 3px; font-size: 11px; color: var(--c-muted); padding: 6px 10px; border-radius: 10px; position: relative; background: none; border: 0; }
.header-actions__btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.header-actions__btn .ic { width: 22px; height: 22px; }
.header-actions__count { position: absolute; top: 2px; right: 6px; background: var(--c-orange); color: var(--c-ink); font-size: 10px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 5px; min-width: 16px; text-align: center; }
.header-actions__count:empty, .header-actions__count[data-zero="true"] { display: none; }

.main-nav { border-top: 1px solid var(--c-line); background: var(--c-surface); }
.main-nav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-height: 44px; align-items: center; }
.main-nav__list::-webkit-scrollbar { display: none; }
.main-nav__item { position: relative; }
.main-nav__link { white-space: nowrap; padding: 8px 11px; border-radius: 8px; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; }
.main-nav__link:hover { background: var(--c-surface-2); }
.main-nav__link--hot { color: var(--c-rust); font-weight: 700; }
.main-nav__link--green { color: var(--c-grass); font-weight: 700; }
.main-nav__item--dd .main-nav__link::after { content: "▾"; font-size: 11px; opacity: .6; }
.dropdown { display: none; position: absolute; left: 0; top: 100%; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; min-width: 250px; z-index: 45; }
.main-nav__item--dd:hover .dropdown, .main-nav__item--dd:focus-within .dropdown, .dropdown.is-open { display: grid; gap: 2px; }
.dropdown__link { padding: 8px 10px; border-radius: 8px; white-space: nowrap; display: block; }
.dropdown__link:hover { background: var(--c-surface-2); }
.dropdown__link small { display: block; font-size: 12px; color: var(--c-muted); font-weight: 400; white-space: normal; }

/* Mega menu (каталог) */
.mega { display: none; position: absolute; left: var(--container-pad); right: var(--container-pad); top: 100%; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow); z-index: 50; padding: 22px 24px 24px; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 26px; max-height: calc(100vh - var(--sticky-top, 120px) - 16px); overflow: auto; }
.mega__col--cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
.mega__col--cats > .mega__head { grid-column: 1 / -1; }
.mega__list--cats { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.mega__head--sub { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); color: var(--c-muted); }
.mega__list--compact { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 4px; font-size: 13.5px; }
.mega__list--compact a { display: block; padding: 3px 0; color: var(--c-text); }
.mega.is-open { display: grid; }
.mega__close { display: none; }
.mega__head { font-family: var(--ff-display); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; color: var(--c-rust); }
.mega__list { display: grid; gap: 6px; font-size: 14px; }
.mega__list a:hover { color: var(--c-rust); }
.mega__block + .mega__block { margin-top: 18px; }
.mega__cat { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.mega__cat:hover { background: var(--c-surface-2); color: var(--c-text); }
.mega__cat-thumb { width: 34px; height: 34px; border-radius: 8px; flex: none; object-fit: cover; background: var(--c-surface-2); }
.mega__cat b { font-weight: 600; display: block; }
.mega__cat small { color: var(--c-muted); font-size: 12px; }
.mega__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.mega__sizes a { background: var(--c-surface-2); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-weight: 600; }
.mega__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mega__swatches a { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--c-line); display: block; }
.mega__promo { background: var(--c-orange); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: relative; overflow: hidden; min-height: 150px; color: var(--c-ink); margin-top: 18px; }
.mega__promo::before { content: "%"; position: absolute; right: -6px; top: -24px; font-family: var(--ff-display); font-size: 110px; font-weight: 900; opacity: .18; }
.mega__promo b { font-family: var(--ff-display); font-size: 16px; position: relative; }
.mega__promo p { position: relative; font-size: 13.5px; }
.mega__promo .btn { align-self: flex-start; position: relative; }
.mega__mobile { display: none; }

/* Mobile bottom bar */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--c-surface); border-top: 1px solid var(--c-line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mobile-bar__btn { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; color: var(--c-muted); font-weight: 600; background: none; border: 0; position: relative; }
.mobile-bar__btn .ic { width: 22px; height: 22px; }
.mobile-bar__btn.is-active { color: var(--c-rust); }
.mobile-bar__btn .header-actions__count { top: -4px; right: 14px; }

@media (max-width: 900px) {
    .site-header__container { grid-template-columns: auto 1fr auto; }
    .catalog-btn > span:not(.catalog-btn__burger) { display: none; }
    .catalog-btn { padding: 12px; }
    .site-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 10px; }
    .header-actions__btn span { display: none; }
    .header-actions__btn--desktop { display: none; }
    .mega { grid-template-columns: 1fr 1fr; left: 0; right: 0; border-radius: 0; max-height: 75vh; overflow: auto; padding: 16px; }
    .mega__col--cats { grid-column: 1 / -1; }
    .mega__list--cats { grid-template-columns: 1fr 1fr; }
    .mega__promo { grid-column: 1 / -1; min-height: 120px; }
    .mega__mobile { display: grid; gap: 4px; grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: 12px; }
    .mega__mobile a { padding: 8px; font-weight: 600; }
    .mobile-bar { display: grid; }
    body { padding-bottom: 76px; }
    .topbar__hide-m { display: none; }
    .topbar__container { justify-content: space-between; gap: 8px; }
    .topbar__grow { display: none; }
    .topbar__geo b { display: none; }
    .topbar__geo::after { content: "41 км МКАД"; color: var(--c-cream); font-weight: 600; }
}
@media (max-width: 600px) { .mega { grid-template-columns: 1fr; } .mega__list--cats { grid-template-columns: 1fr; } }

/* ------------- Footer ------------- */
.site-footer { background: var(--c-ink); color: var(--c-sand); padding-block: 40px 30px; margin-top: 20px; }
.site-footer__stripe { height: 6px; background: linear-gradient(90deg, var(--c-grass) 0 33%, var(--c-orange) 33% 85%, var(--c-cream) 85%); border-radius: var(--r-pill); margin-bottom: 28px; }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-col__title { font-family: var(--ff-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-cream); margin: 0 0 12px; }
.footer-col__list { display: grid; gap: 8px; font-size: 14px; }
.footer-col__list a:hover { color: var(--c-cream); }
.footer-contact__phone { display: block; font-size: 20px; font-family: var(--ff-display); font-weight: 700; color: var(--c-cream); }
.footer-contact p { margin: 6px 0; font-size: 14px; opacity: .9; }
.footer-contact__msg { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.footer-contact__msg a { background: rgba(247,233,201,.12); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12.5px; }
.footer-contact__msg a:hover { background: rgba(247,233,201,.22); }
.site-footer__bottom { border-top: 1px solid rgba(247,233,201,.15); margin-top: 28px; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; opacity: .7; }
.site-footer__bottom p { margin: 0; }
.site-footer__disclaimer { width: 100%; }
@media (max-width: 820px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__cols { grid-template-columns: 1fr; } }

/* ------------- Breadcrumbs & pagination ------------- */
.breadcrumbs { font-size: 13px; color: var(--c-muted); padding: 14px 0 6px; }
.breadcrumbs__list { display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumbs__item::after { content: "/"; margin-left: 6px; opacity: .5; }
.breadcrumbs__item:last-child::after { content: ""; }
.breadcrumbs__link:hover { color: var(--c-rust); }
.breadcrumbs__current { color: var(--c-text); }

.pagination { display: flex; justify-content: center; gap: 6px; margin: 22px 0; flex-wrap: wrap; }
.pagination__btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-line); font-weight: 600; font-size: 14px; }
.pagination__btn:hover { border-color: var(--c-orange); }
.pagination__btn--active { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.pagination__btn--more { width: auto; padding: 0 16px; }
.pagination__btn--gap { border: 0; background: none; }
.pagination__btn svg { width: 14px; height: 14px; }

/* ------------- 5. Home ------------- */
.hero { padding-block: 24px 36px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: stretch; }
.hero-main { background: var(--c-orange); color: var(--c-ink); border-radius: var(--r-lg); padding: 40px 40px 36px; position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-main__stripe { position: absolute; left: -10%; right: -10%; height: 54px; background: var(--c-cream); transform: rotate(-7deg); top: 26%; opacity: .95; }
.hero-main__stripe--rail { height: 10px; background: var(--c-brown); top: calc(26% + 64px); opacity: 1; }
.hero-main__grass { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to top, var(--c-moss), var(--c-grass) 55%, var(--c-grass-light)); clip-path: polygon(0 30%,10% 0,20% 35%,30% 5%,40% 40%,50% 10%,60% 38%,70% 4%,80% 36%,90% 8%,100% 30%,100% 100%,0 100%); }
.hero-main__title { position: relative; font-size: clamp(28px, 4.2vw, 50px); line-height: 1.02; max-width: 14ch; padding-right: 120px; }
.hero-main__lead { position: relative; font-size: clamp(15px, 1.4vw, 18px); max-width: 44ch; margin: 16px 0 22px; font-weight: 500; }
.hero-main__cta { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-main__pct { position: absolute; right: 34px; top: 30px; width: 88px; height: 88px; border-radius: 50%; background: var(--c-ink); color: var(--c-cream); display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; font-size: 42px; line-height: 1; }
.hero-main__pct small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-top: -6px; }
.hero-main__chips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.hero-main__chips span { background: rgba(34,27,9,.12); border: 1px solid rgba(34,27,9,.25); padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.hero-card { border-radius: var(--r-lg); padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; }
.hero-card__title { font-size: 18px; position: relative; }
.hero-card p { margin: 6px 0 12px; font-size: 14px; position: relative; max-width: 36ch; }
.hero-card .btn { align-self: flex-start; position: relative; }
.hero-card--3d { background: var(--c-ink); color: var(--c-sand); }
.hero-card--3d .hero-card__title { color: var(--c-cream); }
.hero-card__grid3d { position: absolute; right: -20px; top: -20px; width: 200px; height: 200px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; transform: rotate(-12deg) skewX(-8deg); opacity: .55; }
.hero-card__grid3d i { display: block; border-radius: 3px; background: var(--c-rust); }
.hero-card__grid3d i:nth-child(3n) { background: var(--c-orange); }
.hero-card__grid3d i:nth-child(7n) { background: var(--c-grass); }
.hero-card__grid3d i:nth-child(5n) { background: var(--c-cream); }
.hero-card--stock { background: var(--c-surface); border: 1.5px solid var(--c-line); }
.hero-card__big { font-family: var(--ff-display); font-size: 34px; font-weight: 700; color: var(--c-grass); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-card__big small { font-size: 13px; color: var(--c-muted); font-family: var(--ff-text); font-weight: 500; margin-left: 6px; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__side { grid-template-rows: auto; grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hero__side { grid-template-columns: 1fr; } .hero-main { padding: 110px 22px 28px; min-height: 380px; } .hero-main__pct { width: 64px; height: 64px; font-size: 30px; right: 18px; top: 18px; } .hero-main__title { max-width: 100%; padding-right: 0; } }

.usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.usp__item { display: flex; gap: 12px; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; }
.usp__item svg { width: 26px; height: 26px; flex: none; color: var(--c-grass); }
.usp__title { display: block; font-weight: 700; font-size: 14.5px; font-family: var(--ff-text); }
.usp__text { font-size: 13px; color: var(--c-muted); }
@media (max-width: 900px) { .usp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .usp { grid-template-columns: 1fr; } }

.categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 14px; }
.categories > li { display: contents; } /* элементом сетки становится сама карточка: работают span 2 и высота строки */
.category-card { border-radius: var(--r); padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; border: 1px solid var(--c-line); transition: transform var(--tr); background: var(--c-surface-2); }
.category-card:hover { transform: translateY(-3px); }
.category-card--wide { grid-column: span 2; }
.category-card__media { position: absolute; inset: 0; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,4,.72), rgba(20,12,4,.05) 60%); }
.category-card__title { font-family: var(--ff-display); font-size: 15px; position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.category-card__count { font-size: 12.5px; opacity: .9; position: relative; z-index: 1; }
@media (max-width: 900px) { .categories { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }

.purpose { display: flex; gap: 10px; flex-wrap: wrap; }
.purpose__link { display: inline-flex; align-items: center; gap: 10px; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-pill); padding: 10px 18px 10px 12px; font-weight: 600; font-size: 14px; transition: border-color var(--tr); }
.purpose__link:hover { border-color: var(--c-orange); }
.purpose__icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-sand); color: var(--c-rust); font-style: normal; font-size: 13px; }
.purpose__icon svg { width: 15px; height: 15px; }

.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.service-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; display: grid; gap: 6px; align-content: start; transition: transform var(--tr), border-color var(--tr); }
.service-card:hover { transform: translateY(-3px); border-color: var(--c-orange); }
.service-card__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--c-sand); color: var(--c-rust); display: grid; place-items: center; font-style: normal; font-size: 18px; }
.service-card__icon svg { width: 20px; height: 20px; }
.service-card__title { font-size: 14.5px; font-family: var(--ff-text); font-weight: 700; }
.service-card__text { font-size: 12.5px; color: var(--c-muted); }
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } }

/* Калькулятор */
.calc { background: var(--c-ink); color: var(--c-sand); border-radius: var(--r-lg); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; position: relative; overflow: hidden; }
.calc::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; border-radius: 50%; background: var(--c-orange); opacity: .18; }
.calc__title { color: var(--c-cream); }
.calc p { color: var(--c-sand); opacity: .85; max-width: 44ch; }
.calc__form { display: grid; gap: 12px; position: relative; }
.calc__form .form-field__label { color: var(--c-cream); }
.calc__form input, .calc__form select { background: rgba(255,255,255,.08); border-color: rgba(247,233,201,.3); color: var(--c-sand); }
.calc__form select option { color: var(--c-ink); }
.calc__result { background: var(--c-surface); color: var(--c-text); border-radius: var(--r); padding: 20px; display: grid; gap: 10px; align-content: start; position: relative; }
.calc__row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--c-line); padding-block: 8px; font-variant-numeric: tabular-nums; }
.calc__row b { font-size: 18px; }
.calc__row--total b { font-size: 26px; color: var(--c-rust); font-family: var(--ff-display); }
.calc__note { font-size: 12.5px; color: var(--c-muted); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; padding: 24px; } }

/* B2B */
.b2b { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.b2b-card { border-radius: var(--r-lg); padding: 30px; position: relative; overflow: hidden; }
.b2b-card--designer { background: var(--c-grass); color: #fff; }
.b2b-card--pro { background: var(--c-surface); border: 1.5px solid var(--c-line); }
.b2b-card__title { font-size: 22px; margin-bottom: 8px; }
.b2b-card__list { margin: 14px 0 20px; display: grid; gap: 8px; }
.b2b-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.b2b-card__list li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: currentColor; opacity: .2; margin-top: 2px; }
.b2b-card__pct { position: absolute; right: 20px; top: 14px; font-family: var(--ff-display); font-size: 72px; font-weight: 900; opacity: .18; line-height: 1; }
@media (max-width: 820px) { .b2b { grid-template-columns: 1fr; } }

/* Shoppable gallery */
.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 12px; }
.gallery-item { border-radius: var(--r); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 14px; color: #fff; background: var(--c-surface-2); }
.gallery-item:first-child { grid-row: span 2; }
.gallery-item__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,4,.7), transparent 55%); }
.gallery-item__cap { position: relative; z-index: 1; display: grid; gap: 2px; }
.gallery-item__cap b { font-family: var(--ff-display); font-size: 14px; }
.gallery-item__cap span { font-size: 12.5px; opacity: .9; }
.gallery-item__price { position: absolute; right: 12px; top: 12px; z-index: 1; background: var(--c-surface); color: var(--c-text); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .gallery-item:first-child { grid-column: span 2; } }

/* Brands */
.brands-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.brand-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 10px; text-align: center; display: grid; gap: 6px; justify-items: center; transition: border-color var(--tr); }
.brand-card:hover { border-color: var(--c-orange); }
.brand-card__logo { height: 36px; width: auto; object-fit: contain; max-width: 100%; }
.brand-card__name { font-family: var(--ff-display); font-weight: 700; font-size: 13px; color: var(--c-text); }
.brand-card__country { font-size: 11px; color: var(--c-muted); }
@media (max-width: 760px) { .brands-grid { grid-template-columns: repeat(3, 1fr); } }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 20px; display: grid; gap: 10px; align-content: start; }
.review-card__stars { color: var(--c-orange); letter-spacing: 2px; font-size: 14px; }
.review-card__text { margin: 0; font-size: 14.5px; }
.review-card__who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-muted); }
.review-card__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-sand); color: var(--c-rust); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.review-card__src { margin-left: auto; font-size: 11.5px; background: var(--c-surface-2); padding: 3px 8px; border-radius: var(--r-pill); }
.review-card__photos { display: flex; gap: 6px; }
.review-card__photos img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.reviews__summary { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: var(--c-muted); }
.reviews__summary b { font-family: var(--ff-display); font-size: 22px; color: var(--c-text); }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

/* Video */
.videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.video-card { border-radius: var(--r); aspect-ratio: 9 / 12; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; color: #fff; background: var(--c-surface-2); }
.video-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,4,.75), transparent 50%); }
.video-card__play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,253,248,.9); color: var(--c-ink); display: grid; place-items: center; font-size: 18px; z-index: 2; }
.video-card__title { position: relative; z-index: 1; font-size: 13.5px; font-weight: 700; }
.video-card__meta { position: relative; z-index: 1; font-size: 12px; opacity: .9; display: block; }
@media (max-width: 760px) { .videos { grid-template-columns: repeat(2, 1fr); } }

/* SEO + FAQ */
.seo-block { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
.seo-block__text { color: var(--c-muted); font-size: 14.5px; max-width: 68ch; }
.seo-block__text h2 { color: var(--c-text); font-size: 22px; margin-bottom: 10px; }
.seo-block__text h3 { font-family: var(--ff-text); color: var(--c-text); font-size: 15.5px; margin: 12px 0 4px; }
.seo-block__text ul { list-style: disc; padding-left: 20px; margin-bottom: 10px; }
@media (max-width: 820px) { .seo-block { grid-template-columns: 1fr; } }

/* Promo cards (акции) */
.promo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promo-card { border-radius: var(--r-lg); padding: 22px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; color: var(--c-ink); }
.promo-card__big { position: absolute; right: 10px; top: -10px; font-family: var(--ff-display); font-size: 96px; font-weight: 900; opacity: .2; line-height: 1; }
.promo-card__title { font-size: 20px; position: relative; }
.promo-card p { position: relative; font-size: 14px; margin: 6px 0 10px; }
.promo-card .btn { align-self: flex-start; position: relative; }
.promo-card--orange { background: var(--c-orange); }
.promo-card--cream { background: var(--c-cream); }
.promo-card--green { background: var(--c-grass); color: #fff; }
@media (max-width: 800px) { .promo-cards { grid-template-columns: 1fr; } }

/* ------------- 6. Cards (product / collection) ------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.product-grid > li, .items > li, .grid > * { min-width: 0; }
.product-card__title, .product-card__brand, .product-card__spec, .collection-card__title { overflow-wrap: anywhere; }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--tr), transform var(--tr); }
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card > article { display: flex; flex-direction: column; flex: 1; }
.product-card__media { aspect-ratio: 1; position: relative; display: block; background: var(--c-surface-2); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-card__fav { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,253,248,.9); border: 0; display: grid; place-items: center; color: var(--c-rust); }
.product-card__fav svg { width: 16px; height: 16px; }
.product-card__fav.is-active { background: var(--c-orange); color: var(--c-ink); }
.product-card__body { padding: 12px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; flex: 1; align-content: start; }
.product-card__brand { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin: 0; }
.product-card__brand a:hover { color: var(--c-rust); }
.product-card__title { font-weight: 600; line-height: 1.3; font-size: 14.5px; margin: 0; }
.product-card__spec { font-size: 12.5px; color: var(--c-muted); margin: 0; }
.product-card__price { display: flex; align-items: baseline; gap: 8px; margin: 3px 0 0; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.product-card__price-now { font-size: 19px; font-weight: 700; }
.product-card__price-old { color: var(--c-muted); font-size: 13px; }
.product-card__price-unit { font-size: 12px; color: var(--c-muted); }
.product-card__pack { font-size: 12px; color: var(--c-muted); margin: 0; }
.product-card__actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.product-card__actions .btn { padding: 9px 10px; font-size: 13px; flex: 1; min-width: 0; }

.collection-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--tr), transform var(--tr); display: flex; flex-direction: column; }
.collection-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.collection-card__media { aspect-ratio: 4 / 3; position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; background: var(--c-line); }
.collection-card__media > * { position: relative; overflow: hidden; background: var(--c-surface-2); }
.collection-card__media > *:first-child { grid-row: span 2; }
.collection-card__media img { width: 100%; height: 100%; object-fit: cover; }
.collection-card__badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 2; }
.collection-card__body { padding: 12px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; flex: 1; align-content: start; }
.collection-card__brand { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin: 0; }
.collection-card__title { font-family: var(--ff-display); font-weight: 700; font-size: 15px; margin: 0; }
.collection-card__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-muted); }
.collection-card__meta span::before { content: "·"; margin-right: 6px; }
.collection-card__meta span:first-child::before { content: ""; }
.collection-card__colors { display: flex; gap: 5px; flex-wrap: wrap; }
.collection-card__from { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-variant-numeric: tabular-nums; gap: 8px; flex-wrap: wrap; }
.collection-card__from b { font-size: 17px; }
.collection-card__from small { color: var(--c-muted); font-size: 12px; }
@media (max-width: 1000px) { .product-grid, .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .product-grid, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .product-card__actions { flex-wrap: wrap; } .product-card__actions .btn { padding: 9px 8px; font-size: 12.5px; flex: 1 1 100%; } .product-card__body { padding: 10px 10px 12px; } .product-card__price-now { font-size: 17px; } }

/* Compact item (товар внутри коллекции) */
.items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.item-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; font-size: 12.5px; display: grid; }
.item-card__media { aspect-ratio: 1; background: var(--c-surface-2); }
.item-card__media img { width: 100%; height: 100%; object-fit: cover; }
.item-card__body { padding: 8px 10px; display: grid; gap: 2px; }
.item-card__price { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 700; }
.item-card__select { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); }
.item-card__select input { accent-color: var(--c-grass); }
@media (max-width: 900px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------- 7. Catalog ------------- */
.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 6px 14px; }
.catalog-head__count { color: var(--c-muted); font-size: 14px; margin-left: 10px; font-family: var(--ff-text); font-weight: 500; }
.catalog-head p { margin: 6px 0 0; color: var(--c-muted); max-width: 62ch; }
.catalog-tags { margin-bottom: 18px; }
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }

.filters { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; position: sticky; top: var(--sticky-top); display: grid; gap: 4px; }
.filters__topbar { display: none; }
.filter-block { border-bottom: 1px solid var(--c-line); padding: 6px 0; }
.filter-block:last-of-type { border: 0; }
.filter-block__summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; list-style: none; display: flex; justify-content: space-between; }
.filter-block__summary::-webkit-details-marker { display: none; }
.filter-block__summary::after { content: "+"; color: var(--c-rust); }
.filter-block[open] .filter-block__summary::after { content: "–"; }
.filter-option { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; cursor: pointer; }
.filter-option__count { margin-left: auto; color: var(--c-muted); font-size: 12px; }
.filter-option input[type=checkbox] { accent-color: var(--c-grass); width: 16px; height: 16px; }
.filter-option.is-empty { opacity: .45; }
.filter-search { position: relative; margin: 4px 0 6px; }
.filter-search input { padding: 7px 10px; font-size: 13px; }
.filter-sizes { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.filter-sizes label { background: var(--c-surface-2); border: 1.5px solid transparent; border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.filter-sizes label:has(input:checked) { border-color: var(--c-orange); background: var(--c-surface); }
.filter-sizes input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-colors { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0; }
.filter-colors label { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); display: block; cursor: pointer; }
.filter-colors label:has(input:checked) { box-shadow: 0 0 0 2px var(--c-orange); }
.filter-colors input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-colors label.filter-colors__text { width: auto; height: auto; border-radius: 8px; box-shadow: none; border: 1.5px solid transparent; background: var(--c-surface-2); padding: 4px 9px; font-size: 12.5px; font-weight: 600; }
.filter-colors label.filter-colors__text:has(input:checked) { border-color: var(--c-orange); background: var(--c-surface); box-shadow: none; }
.filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 0; }
.filter-range input { padding: 7px 10px; font-size: 13px; }
.filter-pro { background: var(--c-sand); border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
.filters__apply { margin-top: 8px; width: 100%; }
.filters__reset { background: none; border: 0; color: var(--c-rust); font-size: 13px; font-weight: 600; margin-top: 6px; }
.filters__more { background: none; border: 0; color: var(--c-rust); font-size: 12.5px; font-weight: 600; padding: 6px 0 2px; cursor: pointer; }
.filters__more::before { content: "+ "; }

.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; }
.catalog-toolbar__sort select { width: auto; padding: 8px 10px; font-size: 13.5px; }
.catalog-toolbar__mfilter { display: none; }
.view-switch { display: inline-flex; background: var(--c-surface-2); border-radius: var(--r-pill); padding: 3px; }
.view-switch__btn { background: transparent; border: 0; border-radius: var(--r-pill); padding: 7px 14px; font-weight: 600; font-size: 13.5px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 4px; }
.view-switch__btn.is-active { background: var(--c-ink); color: var(--c-cream); }
.view-switch__btn small { font-weight: 400; opacity: .8; }
.catalog-seo { margin-top: 32px; }
@media (max-width: 860px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .filters { position: fixed; inset: 0; z-index: 60; border-radius: 0; overflow: auto; display: none; }
    .filters.is-open { display: grid; align-content: start; }
    .filters__topbar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
    .filters__close { background: none; border: 0; font-size: 22px; }
    .catalog-toolbar__mfilter { display: inline-flex; }
}

/* Brands index */
.brands-alpha { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 24px; }
.brands-alpha__link { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--c-surface); border: 1px solid var(--c-line); font-weight: 600; font-size: 13px; }
.brands-alpha__link:hover { border-color: var(--c-orange); }
.brands-letter { margin-bottom: 24px; }
.brands-letter__char { font-family: var(--ff-display); font-size: 22px; color: var(--c-rust); margin-bottom: 10px; }
.brand-hero { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.brand-hero__logo { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 20px; display: grid; place-items: center; min-height: 140px; }
.brand-hero__text { color: var(--c-muted); font-size: 14.5px; max-width: 70ch; }
@media (max-width: 700px) { .brand-hero { grid-template-columns: 1fr; } }

/* ------------- 8. Collection & product ------------- */
.collection-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items: stretch; margin-top: 8px; }
.collection-hero__pic { border-radius: var(--r-lg); min-height: 380px; position: relative; overflow: hidden; background: var(--c-surface-2); }
.collection-hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-hero__tabs { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; z-index: 3; }
.collection-hero__tabs button { background: rgba(255,253,248,.92); border: 0; border-radius: var(--r-pill); padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
.collection-hero__tabs button.is-active { background: var(--c-ink); color: var(--c-cream); }
.collection-hero__info { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 12px; align-content: start; }
.collection-hero__title { font-size: clamp(22px, 2.6vw, 30px); }
.collection-hero__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.variants { display: grid; gap: 6px; }
.variants__row { display: flex; gap: 8px; flex-wrap: wrap; }
.variants__btn { display: flex; align-items: center; gap: 8px; background: var(--c-surface-2); border: 1.5px solid transparent; border-radius: var(--r-pill); padding: 5px 12px 5px 5px; font-size: 13px; font-weight: 600; }
.variants__btn.is-active { border-color: var(--c-orange); background: var(--c-surface); }
.variants__btn i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.price-from { font-variant-numeric: tabular-nums; }
.price-from b { font-family: var(--ff-display); font-size: 26px; }
.price-from small { color: var(--c-muted); margin-left: 8px; }
@media (max-width: 860px) { .collection-hero { grid-template-columns: 1fr; } .collection-hero__pic { min-height: 260px; } }
.formats-table td .btn { padding: 6px 12px; font-size: 12.5px; }
.kit { background: var(--c-sand); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.kit__title { font-family: var(--ff-display); font-size: 18px; }
.kit__sum { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .kit { grid-template-columns: 1fr; } }
.docs { display: flex; gap: 8px; flex-wrap: wrap; }
.docs__link { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; font-weight: 500; }
.docs__link::before { content: "⬇"; color: var(--c-rust); margin-right: 8px; }
.docs__link small { color: var(--c-muted); margin-left: 6px; }

.product-layout { display: grid; grid-template-columns: 1.25fr .85fr; gap: 26px; align-items: start; padding-top: 8px; }
.gallery { display: grid; gap: 10px; }
.gallery__main { aspect-ratio: 4 / 3; border-radius: var(--r-lg); position: relative; overflow: hidden; background: var(--c-surface-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; z-index: 2; }
.gallery__tools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.gallery__tools button { background: rgba(255,253,248,.92); border: 0; border-radius: var(--r-pill); padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
.gallery__tools button.is-active { background: var(--c-ink); color: var(--c-cream); }
.gallery__layout { position: absolute; inset: 0; display: none; pointer-events: none; }
.gallery__layout--grid { display: block; background-image: linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px); background-size: 50% 50%; }
.gallery__layout--herring { display: block; background: repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,.55) 40px 42px), repeating-linear-gradient(-45deg, transparent 0 40px, rgba(255,255,255,.55) 40px 42px); }
.gallery__room { position: absolute; right: 12px; bottom: 12px; background: var(--c-orange); color: var(--c-ink); border: 0; border-radius: var(--r-pill); padding: 9px 14px; font-weight: 700; font-size: 13px; z-index: 2; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gallery__thumb { aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; background: var(--c-surface-2); padding: 0; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--c-orange); }
.gallery__thumb span { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; background: rgba(255,253,248,.9); padding: 2px 6px; border-radius: var(--r-pill); font-weight: 600; }

.buy-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; position: sticky; top: var(--sticky-top); display: grid; gap: 12px; }
.buy-box__title { font-size: clamp(18px, 2vw, 23px); font-weight: 700; line-height: 1.2; }
.buy-box__meta { font-size: 12.5px; color: var(--c-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.buy-box__meta a:hover { color: var(--c-rust); }
.buy-box__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy-box__price { background: var(--c-surface-2); border-radius: 12px; padding: 10px 12px; font-variant-numeric: tabular-nums; }
.buy-box__price small { display: block; font-size: 11.5px; color: var(--c-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.buy-box__price b { font-size: 22px; font-family: var(--ff-display); }
.buy-box__price s { font-size: 13px; color: var(--c-muted); margin-left: 6px; }
.pcalc { border: 1.5px dashed var(--c-line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.pcalc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcalc__out { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--c-muted); flex-wrap: wrap; gap: 6px; }
.pcalc__out b { font-size: 20px; color: var(--c-text); font-family: var(--ff-display); }
.buy-box__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy-box__cta .btn--primary { grid-column: 1 / -1; padding: 14px; }
.buy-box__cta .btn { font-size: 14px; }
.buy-box__mini { display: flex; gap: 14px; font-size: 12.5px; color: var(--c-muted); flex-wrap: wrap; }
.buy-box__mini a { border-bottom: 1px dashed var(--c-muted); }
.buy-box__promise { display: grid; gap: 6px; font-size: 13px; border-top: 1px solid var(--c-line); padding-top: 10px; }
.buy-box__promise div { display: flex; gap: 8px; }
.buy-box__promise div::before { content: "✓"; color: var(--c-grass); font-weight: 700; }
.product-section { margin-top: 36px; }
.product-section__title { font-size: 20px; margin-bottom: 12px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.specs__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); font-size: 14px; margin: 0; }
.specs__row dt { color: var(--c-muted); }
.specs__row dd { font-weight: 600; text-align: right; margin: 0; }
.specs__row dd a { border-bottom: 1px dashed currentColor; }
.matrix { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.matrix__item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 8px; text-align: center; font-size: 12.5px; display: grid; gap: 4px; justify-items: center; }
.matrix__mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; background: var(--c-grass); }
.matrix__mark--no { background: var(--c-line); color: var(--c-muted); }
.product-desc { max-width: 72ch; color: var(--c-text-soft); }
.product-desc p { font-size: 15px; line-height: 1.65; }
.mobile-buy { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--c-surface); border-top: 1px solid var(--c-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mobile-buy b { font-family: var(--ff-display); font-size: 17px; }
.mobile-buy small { display: block; font-size: 11px; color: var(--c-muted); }
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } .buy-box { position: static; } .specs { grid-template-columns: 1fr; } .matrix { grid-template-columns: repeat(3, 1fr); } .mobile-buy { display: grid; } .mobile-bar--hidden-on-product { display: none; } }


/* ------------- 9. Cart / checkout ------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-line); align-items: center; }
.cart-item__media { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--c-surface-2); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title { font-weight: 600; display: block; }
.cart-item__sub { font-size: 12.5px; color: var(--c-muted); }
.cart-item__controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cart-item__remove { background: none; border: 0; color: var(--c-muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.cart-item__remove:hover { color: var(--c-danger); }
.cart-item__sum { font-family: var(--ff-display); font-weight: 700; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.cart-item__sum small { display: block; font-family: var(--ff-text); font-weight: 400; color: var(--c-muted); font-size: 12px; }
.cart-item__hint { grid-column: 2 / -1; }
.cart-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13.5px; }
.cart-actions button { background: none; border: 0; color: var(--c-muted); display: inline-flex; gap: 6px; align-items: center; }
.cart-actions button:hover { color: var(--c-rust); }
.cart-summary { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 10px; position: sticky; top: var(--sticky-top); }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 14px; font-variant-numeric: tabular-nums; margin: 0; }
.cart-summary__row dd { margin: 0; }
.cart-summary__row--total { font-family: var(--ff-display); font-size: 20px; font-weight: 700; border-top: 1px solid var(--c-line); padding-top: 10px; }
.cart-summary__promo { display: flex; gap: 6px; }
.cart-summary__promo input { flex: 1; }
.cart-empty { text-align: center; padding: 60px 16px; display: grid; gap: 12px; justify-items: center; }
.steps { display: flex; gap: 6px; margin: 14px 0 20px; flex-wrap: wrap; }
.steps__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--c-muted); padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-surface-2); }
.steps__item.is-active { background: var(--c-ink); color: var(--c-cream); }
.steps__item i { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.12); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.checkout-form { display: grid; gap: 14px; }
.checkout-panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 14px; }
.checkout-panel__title { font-size: 18px; }
@media (max-width: 700px) { .form-row--2 { grid-template-columns: 1fr; } .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } .cart-item { grid-template-columns: 64px 1fr; } .cart-item__media { width: 64px; height: 64px; } .cart-item__sum { grid-column: 2; text-align: left; } }

/* ------------- 10. Content pages ------------- */
.page-hero { background: var(--c-ink); color: var(--c-sand); border-radius: var(--r-lg); padding: 36px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; margin-top: 12px; position: relative; overflow: hidden; }
.page-hero__title { color: var(--c-cream); font-size: clamp(24px, 3vw, 36px); position: relative; }
.page-hero p { font-size: 16px; opacity: .9; max-width: 50ch; position: relative; }
.page-hero__stripe { position: absolute; left: -10%; right: -10%; height: 34px; background: var(--c-cream); opacity: .12; transform: rotate(-7deg); top: 60%; }
.page-hero__aside { position: relative; }
.page-hero--orange { background: var(--c-orange); color: var(--c-ink); }
.page-hero--orange .page-hero__title { color: var(--c-ink); }
.page-hero--green { background: var(--c-grass); color: #fff; }
.page-hero--green .page-hero__title { color: #fff; }
.page-hero .btn { position: relative; }
@media (max-width: 800px) { .page-hero { grid-template-columns: 1fr; padding: 24px; } }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stepper__item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; display: grid; gap: 6px; align-content: start; }
.stepper__num { font-style: normal; font-family: var(--ff-display); font-weight: 700; color: var(--c-orange); font-size: 22px; }
.stepper__title { font-size: 14.5px; font-family: var(--ff-text); font-weight: 700; }
.stepper__text { font-size: 13px; color: var(--c-muted); }
@media (max-width: 800px) { .stepper { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .stepper { grid-template-columns: 1fr; } }
.dropzone { border: 2px dashed var(--c-line); border-radius: var(--r-lg); padding: 36px; text-align: center; background: var(--c-surface); display: grid; gap: 8px; justify-items: center; cursor: pointer; }
.dropzone.is-over { border-color: var(--c-orange); background: var(--c-paper); }
.dropzone__title { font-family: var(--ff-display); font-size: 16px; }
.dropzone__text { font-size: 13.5px; color: var(--c-muted); }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; position: relative; background: var(--c-line); }
.before-after > div { background: var(--c-surface-2); position: relative; }
.before-after img { width: 100%; height: 100%; object-fit: cover; }
.before-after__label { position: absolute; bottom: 10px; left: 10px; background: rgba(255,253,248,.92); border-radius: var(--r-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; z-index: 2; }
.roles { margin-bottom: 16px; }
.role-panel[hidden] { display: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats__item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; }
.stats__num { display: block; font-family: var(--ff-display); font-size: 26px; color: var(--c-rust); font-variant-numeric: tabular-nums; }
.stats__label { font-size: 13px; color: var(--c-muted); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.map { border-radius: var(--r-lg); min-height: 320px; position: relative; overflow: hidden; background: var(--c-surface-2); }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.team__item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 16px; display: grid; gap: 4px; justify-items: start; }
.team__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--c-sand); color: var(--c-rust); display: grid; place-items: center; font-style: normal; font-family: var(--ff-display); font-weight: 700; font-size: 20px; margin-bottom: 6px; overflow: hidden; }
.team__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team__name { font-size: 14.5px; font-weight: 700; }
.team__role { font-size: 12.5px; color: var(--c-muted); }
@media (max-width: 700px) { .team { grid-template-columns: 1fr 1fr; } }
.tg-bot { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: center; }
.chat { background: var(--c-surface-2); border-radius: 14px; padding: 12px; display: grid; gap: 8px; font-size: 13px; }
.chat__msg { background: var(--c-surface); border-radius: 10px; padding: 8px 10px; max-width: 90%; }
.chat__msg--me { background: var(--c-ink); color: var(--c-cream); justify-self: end; }
@media (max-width: 700px) { .tg-bot { grid-template-columns: 1fr; } }
.content { max-width: 72ch; color: var(--c-text-soft); }
.content h2 { font-size: 22px; margin: 24px 0 10px; color: var(--c-text); }
.content h3 { font-family: var(--ff-text); font-size: 17px; margin: 18px 0 6px; color: var(--c-text); }
.content p { font-size: 16px; line-height: 1.65; }
.content ul, .content ol { padding-left: 22px; margin-bottom: 12px; font-size: 15.5px; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li { margin-bottom: 4px; }
.content__lead { font-size: 18px; color: var(--c-muted); }
.content img { border-radius: var(--r); margin: 16px 0; }
.content a { color: var(--c-rust); text-decoration: underline; }
.content table { font-size: 14px; margin: 12px 0; }
.content th, .content td { border: 1px solid var(--c-line); padding: 8px 10px; text-align: left; }
.content th { background: var(--c-surface-2); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.blog-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--tr), transform var(--tr); }
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-card__media { aspect-ratio: 16 / 9; display: block; background: var(--c-surface-2); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 14px 16px 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.blog-card__title { font-size: 16px; font-family: var(--ff-text); font-weight: 700; line-height: 1.3; }
.blog-card__text { font-size: 13.5px; color: var(--c-muted); margin: 0; }
.blog-card__meta { font-size: 12px; color: var(--c-muted); display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.article { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.article__toc { position: sticky; top: var(--sticky-top); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px; font-size: 13.5px; display: grid; gap: 6px; }
.article__toc b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.article__toc a:hover { color: var(--c-rust); }
.article__cover { aspect-ratio: 21 / 9; border-radius: var(--r-lg); margin-bottom: 20px; overflow: hidden; background: var(--c-surface-2); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__meta { font-size: 13px; color: var(--c-muted); display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 800px) { .article { grid-template-columns: 1fr; } .article__toc { position: static; } }

/* Contacts */
.contact-list { display: grid; gap: 14px; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; }
.contact-item__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--c-sand); color: var(--c-rust); display: grid; place-items: center; flex: none; }
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item__title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; font-family: var(--ff-text); }
.contact-item__text { margin: 2px 0 0; font-size: 15px; }
.contact-item__text a:hover { color: var(--c-rust); }

/* Error */
.error-page { text-align: center; padding: 40px 0; display: grid; gap: 14px; justify-items: center; }
.error-page__code { font-family: var(--ff-display); font-size: clamp(72px, 14vw, 140px); font-weight: 900; color: var(--c-orange); line-height: 1; }

/* Projects (сохранённые подборки) */
.project-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 800px) { .project-layout { grid-template-columns: 1fr; } }

/* ------------- 11. Modals ------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(34,27,9,.55); }
.modal__panel { position: relative; background: var(--c-surface); border-radius: var(--r-lg); padding: 28px; width: min(100%, 460px); max-height: 92vh; overflow: auto; box-shadow: var(--shadow); display: grid; gap: 14px; }
.modal__panel--wide { width: min(100%, 640px); }
.modal__close { position: absolute; right: 12px; top: 12px; background: var(--c-surface-2); border: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.modal__close svg { width: 16px; height: 16px; }
.modal__title { font-size: 22px; padding-right: 36px; }
.modal__lead { color: var(--c-muted); font-size: 14px; margin: 0; }
.modal__form { display: grid; gap: 12px; }
.modal__form--grid { grid-template-columns: 1fr 1fr; }
.modal__form--grid > .form-field--full, .modal__form--grid > .checkbox, .modal__form--grid > .btn, .modal__form--grid > .form-status, .modal__form--grid > .smart-captcha { grid-column: 1 / -1; }
.smart-captcha { min-height: 100px; }
.modal__product { display: flex; gap: 12px; align-items: center; background: var(--c-surface-2); border-radius: 12px; padding: 10px; font-size: 13.5px; }
.modal__product img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
@media (max-width: 600px) { .modal__form--grid { grid-template-columns: 1fr; } .modal__panel { padding: 20px; } }
body.is-modal-open { overflow: hidden; }

/* ------------- 12. Utilities ------------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-center { text-align: center; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex--between { justify-content: space-between; }
.num { font-variant-numeric: tabular-nums; }
.w-100 { width: 100%; }
.is-hidden { display: none !important; }
@media (max-width: 600px) { .hide-m { display: none !important; } }
@media (min-width: 601px) { .only-m { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto; } }
@media print { .site-header, .site-footer, .mobile-bar, .topbar, .mobile-buy, .modal { display: none !important; } body { background: #fff; padding: 0; } }