/* =========================================================================
   The site's chrome: header, phone menu, footer, cookie banner.

   Drawn from «Настройки сайта» (partials/header.twig, footer.twig,
   cookie-banner.twig). Written against theme.css's tokens and the design
   system's (/design.css), so a preset or a dark scheme restyles all of it.

   Phones get their own header below 60rem: the main row only, with the
   elements chosen for the phone bar and the menu button; the top and bottom
   rows fold into the menu panel.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Header: frame and rows
   ------------------------------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 60;
    background-color: var(--c-bg);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
}

/* The top bar scrolls away, the main row stays: site.js measures the top
   bar into --hdr-top-h; without it the whole header sticks. */
.site-header--sticky {
    position: sticky;
    top: calc(var(--hdr-top-h, 0px) * -1);
    transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.site-header--sticky.is-scrolled {
    box-shadow: 0 12px 32px -26px rgba(18, 21, 28, 0.55);
}

.hdr-row__inner {
    display: flex;
    align-items: center;
    gap: var(--s-2) var(--s-5);
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hdr-zone {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--s-2) var(--s-4);
}

.hdr-zone--left { justify-content: flex-start; }
.hdr-zone--center { flex: 1 0 auto; justify-content: center; }
.hdr-zone--right { justify-content: flex-end; margin-inline-start: auto; }

/* A zone holding the menu takes the free width and gives it back when the
   others need it: the menu fits itself in (site.js moves what does not fit
   under «Ещё»). The top bar's texts shorten with an ellipsis. */
.hdr-zone:has(> .hdr-nav) { flex: 1 1 0; min-width: 0; }
.hdr-row--top .hdr-zone { flex-shrink: 1; min-width: 0; }
.hdr-zone--center:has(> .hdr-nav) + .hdr-zone--right { margin-inline-start: 0; }

/* The logo and the phone number never shrink. */
.hdr-el--logo,
.hdr-el--phone,
.hdr-el--button,
.hdr-el--module { flex: none; }

.hdr-row--top {
    border-bottom: 1px solid var(--c-border);
    background-color: var(--c-surface-sunk);
    color: var(--c-text-muted);
    font-size: var(--t-xs);
}

.hdr-row--top .hdr-row__inner { min-height: 2.5rem; }

.hdr-row--main .hdr-row__inner {
    min-height: 4.75rem;
    padding-block: var(--s-2);
}

.hdr-row--bottom {
    border-top: 1px solid var(--c-border);
}

.hdr-row--bottom .hdr-row__inner { min-height: 3.25rem; }

.hdr-row--main + .hdr-row--bottom .hdr-zone--left { margin-inline-start: calc(var(--s-3) * -1); }

/* Module elements with a phone-bar setting of their own; their scripts. */
.hdr-actions {
    display: contents;
}

.hdr-actions:empty { display: none; }

/* -------------------------------------------------------------------------
   Elements
   ------------------------------------------------------------------------- */

.hdr-el { display: flex; align-items: center; min-width: 0; }

/* Logo */
.hdr-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    color: var(--c-text-strong);
    text-decoration: none;
}

.hdr-logo__image { display: contents; }

.hdr-logo img {
    display: block;
    width: auto;
    height: var(--logo-h, 40px);
    max-width: min(16rem, 45vw);
    object-fit: contain;
}

.hdr-logo__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.hdr-logo__name {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-logo__tagline {
    margin-block-start: 2px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--c-text-muted);
}

a.hdr-logo:hover .hdr-logo__name { color: var(--c-accent); }

.hdr-mobile-brand { display: none; }

/* Menu */
.hdr-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `safe`: a menu wider than its zone overflows to the end, where site.js
   finds it, instead of spilling over the logo. */
.hdr-zone--center .hdr-nav,
.hdr-zone--center .hdr-nav__list { justify-content: safe center; }
.hdr-zone--right .hdr-nav,
.hdr-zone--right .hdr-nav__list { justify-content: safe flex-end; }

.hdr-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.hdr-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 560;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.hdr-nav__link > span {
    background-image: linear-gradient(var(--c-accent), var(--c-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    padding-block: 3px;
    transition: background-size var(--dur) var(--ease);
}

.hdr-nav__link:hover,
.hdr-nav__item:hover > .hdr-nav__link {
    color: var(--c-text-strong);
}

.hdr-nav__link:hover > span,
.hdr-nav__link:focus-visible > span,
.hdr-nav__link.is-active > span {
    background-size: 100% 2px;
}

.hdr-nav__link.is-active { color: var(--c-text-strong); }

.hdr-nav__link:focus-visible,
.hdr-nav__toggle:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
}

.hdr-nav__item--parent > .hdr-nav__link:not(.hdr-nav__heading) { padding-inline-end: var(--s-1); }

.hdr-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 36px;
    margin-inline-start: -2px;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: none;
    color: var(--c-text-muted);
    cursor: pointer;
}

.hdr-nav__toggle:hover { color: var(--c-text-strong); }

.hdr-chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--dur) var(--ease);
}

.hdr-nav__item.is-open .hdr-chevron,
.hdr-nav__item:hover .hdr-chevron {
    transform: rotate(180deg);
}

/* site.js keeps the menu on one line: what does not fit goes under «Ещё». */
.hdr-nav.is-fitted .hdr-nav__list { flex-wrap: nowrap; }
.hdr-nav { min-width: 0; }
.hdr-nav__list > [hidden] { display: none; }

/* A highlighted item («Акции») reads as a quiet button. */
.hdr-nav__item--highlight > .hdr-nav__link {
    color: var(--c-accent);
    font-weight: 650;
}

/* Drop-downs: on hover, on focus inside, or opened with the toggle. */
.hdr-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    display: none;
    min-width: 15rem;
    padding-top: 6px;
    text-align: start;
    /* site.js pulls a drop-down back in when it would leave the screen. */
    transform: translateX(var(--sub-shift, 0px));
}

.hdr-nav__item:hover > .hdr-sub,
.hdr-nav__item:focus-within:not(.is-closed) > .hdr-sub,
.hdr-nav__item.is-open > .hdr-sub {
    display: block;
}

.hdr-sub__list {
    margin: 0;
    padding: var(--s-2);
    list-style: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-lift);
}

.hdr-sub--wide {
    left: calc(var(--s-3) * -1);
    width: max-content;
    max-width: min(56rem, calc(100vw - 2 * var(--gutter)));
}

.hdr-sub--wide .hdr-sub__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: var(--s-2) var(--s-5);
    min-width: min(40rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--s-4) var(--s-5);
}

.hdr-sub__link,
.hdr-sub__heading {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.55rem var(--s-3);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: var(--t-sm);
    font-weight: 520;
    text-decoration: none;
}

.hdr-sub__link:hover,
.hdr-sub__link:focus-visible {
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
}

.hdr-sub__link.is-active { color: var(--c-accent); }
.hdr-sub__link.is-highlight { color: var(--c-accent); font-weight: 650; }

.hdr-sub__item--group > .hdr-sub__link,
.hdr-sub__heading {
    font-weight: 650;
    color: var(--c-text-strong);
}

.hdr-sub__nested {
    margin: 0 0 var(--s-2);
    padding: 0 0 0 var(--s-3);
    list-style: none;
}

.hdr-sub__leaf {
    display: block;
    padding: 0.35rem var(--s-3);
    border-radius: var(--r-sm);
    color: var(--c-text-muted);
    font-size: var(--t-sm);
    text-decoration: none;
}

a.hdr-sub__leaf:hover { color: var(--c-accent); }
.hdr-sub__leaf.is-active { color: var(--c-accent); }

/* Phone */
.hdr-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.2;
    text-align: end;
}

.hdr-zone--left .hdr-phone { align-items: flex-start; text-align: start; }
.hdr-zone--center .hdr-phone { align-items: center; text-align: center; }

.hdr-phone__number {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.hdr-phone__number:hover { color: var(--c-accent); }

.hdr-row--top .hdr-phone__number { font-size: var(--t-sm); }

.hdr-phone__caption {
    font-size: var(--t-xs);
    color: var(--c-text-muted);
    white-space: nowrap;
}

.hdr-phone__callback {
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-link);
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hdr-phone__callback:hover { color: var(--c-link-hover); }

/* The shop's «Обратный звонок» under the number: its text, not its round button. */
.hdr-phone__callback-mod .shop-hlink {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: var(--c-link);
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
}

.hdr-phone__callback-mod .shop-hlink .cms-icon { display: none; }

.hdr-phone__callback-mod .shop-hlink__text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
}

.hdr-el--phone .hdr-phone__icon { display: none; }

/* Round icon buttons, the same size and outline as the shop's. */
.hdr-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-strong);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hdr-icon-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.hdr-icon-btn .cms-icon { width: 1.15rem; height: 1.15rem; }

/* Contacts, text, links in a row (mostly the top bar) */
.hdr-contact,
.hdr-text {
    gap: var(--s-2);
    white-space: nowrap;
}

.hdr-contact .cms-icon,
.hdr-text .cms-icon {
    width: 1rem;
    height: 1rem;
    color: var(--c-text-faint);
}

.hdr-contact a {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-contact a:hover { color: var(--c-accent); }

.hdr-contact span,
.hdr-text span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-links {
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr-links a {
    color: inherit;
    font-size: var(--t-sm);
    white-space: nowrap;
    text-decoration: none;
}

.hdr-row--top .hdr-links a { font-size: var(--t-xs); }
.hdr-links a:hover { color: var(--c-accent); }

.hdr-button .cms-btn,
.hdr-el--button .cms-btn {
    min-height: 44px;
    padding: 0.6rem 1.15rem;
    white-space: nowrap;
}

.hdr-row--top .hdr-el--button .cms-btn { min-height: 30px; padding: 0.25rem 0.8rem; font-size: var(--t-xs); }

.hdr-mod { gap: var(--s-3); }

/* -------------------------------------------------------------------------
   Social marks (header, phone menu, footer)
   ------------------------------------------------------------------------- */

.site-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-socials__link {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.site-socials__link .cms-icon { width: 1.1rem; height: 1.1rem; }

.site-socials--sm .site-socials__link {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--c-text-muted);
}

.site-socials--sm .site-socials__link .cms-icon { width: 1rem; height: 1rem; }

.site-socials__link:hover { color: #fff; background: var(--brand, var(--c-accent)); }
.site-socials__link--telegram { --brand: #26a5e4; }
.site-socials__link--whatsapp { --brand: #25d366; }
.site-socials__link--max { --brand: #7a5cff; }
.site-socials__link--viber { --brand: #7360f2; }
.site-socials__link--vk { --brand: #0077ff; }
.site-socials__link--ok { --brand: #ee8208; }
.site-socials__link--youtube { --brand: #ff0000; }
.site-socials__link--rutube { --brand: #100943; }
.site-socials__link--dzen { --brand: #000000; }
.site-socials__link--tiktok { --brand: #000000; }
.site-socials__link--instagram { --brand: #e4405f; }
.site-socials__link--facebook { --brand: #0866ff; }
.site-socials__link--pinterest { --brand: #bd081c; }
.site-socials__link--behance { --brand: #1769ff; }
.site-socials__link--dribbble { --brand: #ea4c89; }
.site-socials__link--github { --brand: #181717; }

@media (prefers-reduced-motion: no-preference) {
    .site-socials__link:hover { transform: translateY(-1px); }
}

/* -------------------------------------------------------------------------
   Header over the first screen («прозрачная на первом экране»)
   ------------------------------------------------------------------------- */

.site-header--overlay {
    margin-bottom: calc(var(--hdr-h, 5rem) * -1);
    border-bottom-color: transparent;
    background-color: transparent;
    --c-text: #fff;
    --c-text-strong: #fff;
    --c-text-muted: rgb(255 255 255 / 0.78);
    --c-text-faint: rgb(255 255 255 / 0.6);
    --c-border: rgb(255 255 255 / 0.28);
    --c-surface-sunk: rgb(255 255 255 / 0.12);
    color: #fff;
}

.site-header--overlay .hdr-row--top { background: transparent; }

.site-header--overlay .hdr-sub {
    /* Drop-downs keep the page's own colours. */
    --c-text: var(--ink-900);
    --c-text-strong: var(--ink-950);
    --c-text-muted: var(--ink-500);
    --c-surface-sunk: var(--ink-50);
    --c-border: var(--ink-200);
}

.site-header--overlay.is-scrolled {
    background-color: var(--c-slab);
    border-bottom-color: transparent;
}

/* -------------------------------------------------------------------------
   Phones: one bar, the rest in the menu panel
   ------------------------------------------------------------------------- */

.hdr-burger {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-strong);
    cursor: pointer;
}

.hdr-burger:hover { border-color: var(--c-accent); color: var(--c-accent); }

.hdr-burger__bars,
.hdr-burger__bars::before,
.hdr-burger__bars::after,
.hdr-burger__bars > span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.hdr-burger__bars { position: relative; background: none; }
.hdr-burger__bars > span { position: absolute; top: 0; }
.hdr-burger__bars::before,
.hdr-burger__bars::after { content: ''; position: absolute; left: 0; }
.hdr-burger__bars::before { top: -6px; }
.hdr-burger__bars::after { top: 6px; }

@media (max-width: 59.99rem) {
    .hdr-row--top,
    .hdr-row--bottom { display: none; }

    .hdr-row--main .hdr-row__inner {
        display: flex;
        min-height: 4rem;
        gap: var(--s-2);
    }

    .hdr-row--main .hdr-zone { display: contents; }
    .hdr-row--main .hdr-el:not(.hdr-el--mobile) { display: none; }

    .hdr-mobile-brand,
    .hdr-row--main .hdr-el--logo {
        display: flex;
        margin-inline-end: auto;
        min-width: 0;
    }

    .hdr-row--main .hdr-el--logo { order: -1; }
    .hdr-mobile-brand { order: -2; }

    .hdr-logo img { height: min(var(--logo-h, 40px), 36px); }
    .hdr-logo__tagline { display: none; }

    .hdr-row--main .hdr-el--phone .hdr-phone { display: none; }
    .hdr-row--main .hdr-el--phone .hdr-phone__icon { display: inline-grid; }
    .hdr-row--main .hdr-el--socials .site-socials--sm .site-socials__link { width: 40px; height: 40px; }

    .hdr-row--main .hdr-el--socials .site-socials { flex-wrap: nowrap; }

    .hdr-row--main .hdr-el--button .cms-btn { min-height: 40px; padding: 0.4rem 0.8rem; }

    .hdr-burger { display: inline-grid; order: 10; }

    .hdr-row--main .shop-hlink,
    .hdr-row--main .hdr-icon-btn { width: 40px; height: 40px; }

    /* A search field chosen for phones gets a line of its own under the bar. */
    .hdr-row--main .hdr-row__inner { flex-wrap: wrap; }
    .hdr-row--main .hdr-el--mobile:has(.shop-hsearch-wrap) { order: 20; flex: 1 0 100%; padding-bottom: var(--s-2); }
    .hdr-row--main .hdr-el--mobile .shop-hsearch-wrap,
    .hdr-row--main .hdr-el--mobile .shop-hsearch { width: 100%; }
}

/* The panel: a native popover (Escape, a tap outside, the close button). */
.hdr-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(24rem, 100vw);
    color-scheme: inherit;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-inline-start: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: -24px 0 60px -30px rgba(18, 21, 28, 0.5);
}

.hdr-drawer::backdrop { background: rgb(12 14 20 / 0.45); }

@media (prefers-reduced-motion: no-preference) {
    .hdr-drawer:popover-open { animation: hdr-drawer-in 180ms var(--ease); }
}

@media (max-width: 29.99rem) {
    .hdr-drawer { width: 100vw; border-inline-start: 0; }
}

@keyframes hdr-drawer-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.hdr-drawer__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 4rem;
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
}

.hdr-drawer__head .hdr-logo img { height: min(var(--logo-h, 40px), 34px); }

.hdr-drawer__close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    color: var(--c-text-strong);
    cursor: pointer;
}

.hdr-drawer__close .cms-icon { width: 1.2rem; height: 1.2rem; }

.hdr-drawer__nav { padding: var(--s-3) var(--s-3) var(--s-2); }

.hdr-dmenu { margin: 0; padding: 0; list-style: none; }
.hdr-dmenu--l2,
.hdr-dmenu--l3 { padding-inline-start: var(--s-4); }

.hdr-dmenu__row { display: flex; align-items: center; }

.hdr-dmenu__link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 0 var(--s-3);
    border-radius: var(--r-sm);
    color: var(--c-text-strong);
    font-size: var(--t-base);
    font-weight: 600;
    text-decoration: none;
}

.hdr-dmenu--l2 .hdr-dmenu__link,
.hdr-dmenu--l3 .hdr-dmenu__link {
    min-height: 42px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-text);
}

a.hdr-dmenu__link:hover { background: var(--c-surface-sunk); }
.hdr-dmenu__link.is-active { color: var(--c-accent); }
.hdr-dmenu__item.is-highlight > .hdr-dmenu__row .hdr-dmenu__link { color: var(--c-accent); }

.hdr-dmenu__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--c-text-muted);
    cursor: pointer;
}

.hdr-dmenu__toggle[aria-expanded='true'] .hdr-chevron { transform: rotate(180deg); }
.hdr-dmenu__sub[hidden] { display: none; }

.hdr-drawer__contacts {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-2) var(--s-5) var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-border);
    font-size: var(--t-sm);
}

.hdr-drawer__phone,
.hdr-drawer__line {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin: 0;
    color: var(--c-text);
    text-decoration: none;
}

.hdr-drawer__phone { font-size: var(--t-md); font-weight: 700; color: var(--c-text-strong); }
.hdr-drawer__phone small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--c-text-muted); }
.hdr-drawer__phone .cms-icon,
.hdr-drawer__line .cms-icon { width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--c-text-faint); }
.hdr-drawer__socials { margin-top: var(--s-2); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
    margin-block-start: var(--s-10);
    border-top: 1px solid var(--c-border);
    background-color: var(--c-bg);
    color: var(--c-text);
    font-size: var(--t-sm);
}

/* The slab: dark in both schemes, as the hero's and the CTA's. The design
   system's .cms-tone-* classes (added in the markup) refine these. */
.site-footer--dark {
    --c-bg: var(--c-slab);
    --c-surface: #1a1f29;
    --c-surface-sunk: rgb(255 255 255 / 0.07);
    --c-text: var(--c-slab-text);
    --c-text-strong: #fff;
    --c-text-muted: var(--c-slab-muted);
    --c-text-faint: #7d8696;
    --c-border: rgb(255 255 255 / 0.12);
    --c-border-strong: rgb(255 255 255 / 0.22);
    --c-link: #a9bcff;
    --c-link-hover: #fff;
    border-top: 0;
    color-scheme: dark;
}

.site-footer--muted { background-color: var(--c-surface-sunk); }

.site-footer--accent {
    border-top: 0;
    background-color: var(--c-accent);
    --c-bg: var(--c-accent);
    --c-text: var(--c-accent-contrast);
    --c-text-strong: var(--c-accent-contrast);
    --c-text-muted: color-mix(in srgb, var(--c-accent-contrast) 78%, transparent);
    --c-text-faint: color-mix(in srgb, var(--c-accent-contrast) 60%, transparent);
    --c-border: color-mix(in srgb, var(--c-accent-contrast) 22%, transparent);
    --c-surface-sunk: color-mix(in srgb, var(--c-accent-contrast) 12%, transparent);
    --c-link: var(--c-accent-contrast);
    --c-link-hover: var(--c-accent-contrast);
}

.site-footer--dark,
.site-footer--accent,
.site-footer--muted { background-color: var(--section-bg, var(--c-bg)); }

/* Landings — and block-built pages, which are landings in all but name —
   end with a section of their own spacing: no gap of paper colour between it
   and the footer. */
.page--landing .site-footer,
.page--page .site-footer { margin-block-start: 0; }

.site-footer__inner {
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--s-8) var(--gutter) var(--s-5);
}

.ftr-cols {
    display: grid;
    grid-template-columns: repeat(var(--ftr-cols, 3), minmax(0, 1fr));
    gap: var(--s-7) var(--s-6);
    padding-bottom: var(--s-7);
}

/* «О компании» gets a little more room when it opens the row. */
.ftr-cols:has(> .ftr-col--about:first-child) {
    grid-template-columns: minmax(0, 1.35fr) repeat(calc(var(--ftr-cols, 3) - 1), minmax(0, 1fr));
}

@media (max-width: 63.99rem) {
    .ftr-cols,
    .ftr-cols:has(> .ftr-col--about:first-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftr-col--about { grid-column: 1 / -1; }
}

@media (max-width: 35.99rem) {
    .ftr-cols,
    .ftr-cols:has(> .ftr-col--about:first-child) { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.ftr-col { min-width: 0; }

.ftr-col__title {
    margin: 0 0 var(--s-4);
    color: var(--c-text-strong);
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ftr-brand { margin-bottom: var(--s-4); }

.ftr-brand__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--c-text-strong);
    text-decoration: none;
}

.ftr-brand__logo {
    display: block;
    width: auto;
    height: var(--logo-h, 40px);
    max-width: 14rem;
    object-fit: contain;
}

.ftr-brand__name {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
}

.ftr-about,
.ftr-text {
    max-width: 30rem;
    margin: 0 0 var(--s-5);
    color: var(--c-text-muted);
    line-height: 1.6;
}

.ftr-socials .site-socials__link { background: var(--c-surface-sunk); color: var(--c-text-strong); }
.ftr-socials .site-socials__link:hover { background: var(--brand, var(--c-accent)); color: #fff; }

.ftr-menu,
.ftr-menu__sub,
.ftr-social-list,
.ftr-payments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ftr-menu { display: grid; gap: var(--s-2); }
.ftr-menu__sub { display: grid; gap: var(--s-1); margin: var(--s-2) 0 var(--s-1) var(--s-3); }

.ftr-menu__link,
.ftr-social-list__link,
.ftr-contacts a,
.ftr-bottom a {
    color: var(--c-text);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.ftr-menu__link:hover,
.ftr-social-list__link:hover,
.ftr-contacts a:hover,
.ftr-bottom a:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ftr-menu__link--sub { color: var(--c-text-muted); }
.ftr-menu__link.is-highlight { color: var(--c-link); font-weight: 600; }
.ftr-menu__heading { font-weight: 600; color: var(--c-text-strong); }

.ftr-social-list { display: grid; gap: var(--s-3); }
.ftr-social-list__link { display: inline-flex; align-items: center; gap: var(--s-3); }
.ftr-social-list__link .cms-icon { width: 1.1rem; height: 1.1rem; color: var(--c-text-muted); }

.ftr-contacts { display: grid; gap: var(--s-3); font-style: normal; }
.ftr-contacts p { margin: 0; }

.ftr-contacts__phone a {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
}

.ftr-contacts__phone span {
    display: block;
    margin-top: 2px;
    color: var(--c-text-muted);
    font-size: var(--t-xs);
}

.ftr-contacts__line {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    color: var(--c-text-muted);
    line-height: 1.5;
}

.ftr-contacts__line .cms-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    color: var(--c-text-faint);
}

.ftr-payments { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.ftr-pay {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-strong);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ftr-pay--visa { font-style: italic; letter-spacing: 0.04em; }

.ftr-subscribe .cms-form { gap: var(--s-3); }

.ftr-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--t-xs);
}

.ftr-bottom p { margin: 0; }

.ftr-bottom__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ftr-bottom__links a { color: var(--c-text-muted); }
.ftr-bottom__company { flex-basis: 100%; color: var(--c-text-faint); }
.site-footer__slot { margin-inline-start: auto; }
.site-footer__slot:empty { display: none; }

/* No columns at all: the bottom bar is the footer. */
.site-footer__inner:not(:has(.ftr-cols)) { padding-top: var(--s-6); }
.site-footer__inner:not(:has(.ftr-cols)) .ftr-bottom { padding-top: 0; border-top: 0; }

/* -------------------------------------------------------------------------
   Cookie banner
   ------------------------------------------------------------------------- */

.cookie-banner {
    position: fixed;
    inset-inline: var(--s-4);
    bottom: var(--s-4);
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--shadow-lift);
    font-size: var(--t-sm);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__text {
    flex: 1 1 20rem;
    margin: 0;
    line-height: 1.5;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.cookie-banner .cms-btn { min-height: 40px; padding: 0.5rem 1rem; }

@media (max-width: 35.99rem) {
    .cookie-banner__actions,
    .cookie-banner .cms-btn { flex: 1 1 100%; }
}