/* ==== root & variables ==== */

:root {
    --magenta: #EC1E79;
    --cyan: #00AEEF;
    --yellow: #FFD200;
    --orange: #F9A51A;
    --grey: #8A8F98;
    --line: #E2E5EA;
    --bg: #F7F8FA;
    --ok: #3DBE5B;
    --danger: #E23B3B;
    --ink-2: #20242B;
    --line-soft: #EDF0F3;
    --text-muted: #4B5563;
    --text-on-dark: #D8DBDF;
    --text-on-dark-muted: #A8ADB6;
    --ok-strong: #1E8A43;
    --ok-bg: #E7F8EC;
    --gold-dark: #B8860B;
    --text-placeholder: #9AA0A8;
    --text-on-yellow: #6B6100;
    --text-on-yellow-strong: #4A4200;
    --placeholder-bg: #E8EBF0;
    --border-on-dark: #3A4048;
    --badge-legacy: #FF6100;

    --color-white: #FFF;
    --color-black: #1A1A1A;
    --color-primary: var(--cyan);
    --color-secondary: var(--magenta);
    --color-blue-navy-dark: #022f74;
    --color-blue-medium: var(--cyan);
    --color-blue-sky: var(--cyan);
    --color-blue-bright: #0090C9;
    --color-blue-light: #CFEEFB;
    --color-dark-charcoal: var(--color-black);
    --color-dark-gray: #353535;
    --color-muted-gray: #575756;
    --color-gray: var(--grey);
    --color-mgray: #cccccc;
    --color-light-silver: #f2f2f2;
    --color-success: var(--ok);
    --color-orange: var(--orange);
    --color-error: var(--danger);
    --color-error-bg: #FDEBEB;
    --color-red: var(--danger);
    --color-lgray: #F2F4F7;
    --color-dgray: #3A3F47;
    --color-highlight: var(--yellow);

    --fs-9: 9px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-30: 30px;
    --fs-32: 32px;
    --fs-38: 38px;
    --fs-52: 52px;

    --fw-reg: 400;
    --fw-med: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --radius-btn: 12px;
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 22px;
    --radius-pill: 999px;
    --radius-circle: 50%;
    --header-h: 72px;

    --shadow: 0 15px 30px rgba(26, 26, 26, .12);
}

/* ==== base ==== */

textarea {
    border-radius: var(--radius-s);
    padding: 10px;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    font-family: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fs-16);
    line-height: 1.6;
    color: var(--color-black);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    padding-right: 0 !important;
}

img {
    max-width: 100%;
}

.border-highlight {
    background-color: transparent;
    border-style: solid;
    border-width: 3px; 
    border-top-color: var(--color-secondary);
    border-right-color: var(--color-black);
    border-bottom-color: var(--yellow);
    border-left-color: var(--cyan);
}

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.cursor-pointer {
    cursor: pointer;
}

.cmyk-stripe {
    height: 6px;
}

.cmyk-stripe i {
    flex: 1;
}

.cmyk-stripe i:nth-child(1) {
    background: var(--cyan);
}

.cmyk-stripe i:nth-child(2) {
    background: var(--color-secondary);
}

.cmyk-stripe i:nth-child(3) {
    background: var(--yellow);
}

.cmyk-stripe i:nth-child(4) {
    background: var(--color-black);
}

.wrap {
    max-width: 1560px;
    width: 100%;
    padding: 0 24px;
    margin: 0 auto;
}

.container {
    max-width: 1560px;
    padding-left: 24px;
    padding-right: 24px;
}

.hl-marker {
    background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 96%, transparent 96%);
    padding: 0 4px;
}

.min-w-0 {
    min-width: 0;
}

#city .modal-body,
#choose-region .modal-body {
    padding: 0 24px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#choose-region .modal-body {
    padding: 16px 24px 24px;
}

#choose-region .modal-body a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: var(--color-black);
    text-decoration: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

#choose-region .modal-body a i {
    color: var(--color-primary);
    transition: color 0.3s;
}

#choose-region .modal-body a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

#choose-region .modal-body a:hover i {
    color: var(--color-white);
}

#choose-region .modal-body a div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.user-form .modal-body {
    padding: 25px 30px;
}

.user-form .modal-body form > div {
    width: 100%;
    margin-bottom: 15px;
}

body.has-pagebar .fm-ctabar {
    display: none !important;
}

.hidden {
    display: none;
}

input[type="radio"]:not([role="switch"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    margin: 0;
    align-self: center;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--color-white);
    cursor: pointer;
}

input[type="radio"]:not([role="switch"]):checked {
    border-color: var(--color-primary);
    background-image: radial-gradient(circle at center, var(--color-primary) 0 4.5px, var(--color-white) 5.5px);
}

input[type="checkbox"]:not([role="switch"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0;
    align-self: center;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--color-white);
    cursor: pointer;
}

input[type="checkbox"]:not([role="switch"]):checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

#char-filter-body .cf-apply,
#char-filter-body .cf-reset {
    color: var(--color-black);
}

.required-marker {
    color: var(--bs-red);
}

/* ==== buttons ==== */

#choose-region .btn-close {
    padding: 0;
    margin: 0;
    opacity: 0.5;

    &:hover {
        opacity: 1;
    }
}

.user-form .modal-header .btn-close {
    position: absolute;
    right: 20px;
}

.btn-magenta,
.btn-cyan,
.btn-yellow,
.btn-outline,
.btn-black,
.main-big-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    font-size: var(--fs-16);
    border-radius: var(--radius-btn);
    cursor: pointer;
    padding: 13px 24px;
    border: 2px solid transparent;
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover,
    &:active {
        box-shadow: 0 15px 30px rgba(26, 26, 26, .12);
    }
}

.btn-magenta {
    background: var(--color-secondary);
    color: var(--color-white);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-border-color: transparent;
}

.btn-cyan {
    background: var(--cyan);
    color: var(--color-white);
    --bs-btn-hover-bg: var(--cyan);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-border-color: transparent;
}

.btn-yellow {
    background: var(--yellow);
    color: var(--color-black);
    --bs-btn-hover-bg: var(--yellow);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-border-color: transparent;
}

.btn-outline {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-white);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-border-color: var(--color-black);
}

.btn-black {
    --bs-btn-hover-bg: var(--color-black);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-border-color: var(--color-black);
}

.border-primary-color:hover {
    background-color: transparent;
    color: inherit;
}

.main-big-button {
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-border-color: transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        box-shadow: none;
        background-color: var(--bs-btn-hover-bg, var(--color-secondary));
        color: var(--bs-btn-hover-color, var(--color-white));
        border-color: var(--bs-btn-hover-border-color, transparent);
    }
}

.btn-link {
    color: var(--color-black);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.btn-magenta.btn-lg,
.btn-cyan.btn-lg,
.btn-yellow.btn-lg,
.btn-outline.btn-lg {
    font-size: var(--fs-16);
    padding: 16px 30px;
}

.fm-header-right .btn {
    font-size: var(--fs-14);
    padding: 11px 16px;
}

.calc .btn {
    font-size: var(--fs-16);
    padding: 15px 24px;
}

.samples .btn {
    margin-top: 4px;
    background: var(--color-black);
    color: var(--color-white);
}

.main-small-button {
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-s);
    padding: 2px 20px;
    margin-bottom: 0;
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        color: var(--color-white);
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }
}

.btn-char-filter {
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    font-weight: var(--fw-semi);
}

.product-buy,
.btn-add-to-cart {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: var(--fw-extrabold) !important;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: var(--color-white) !important;
    }
}

.product .request.show-request-form {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem !important;
    font-size: var(--fs-14) !important;
    border-radius: var(--radius-btn) !important;
}

.modification-card .request.show-request-form {
    width: 100% !important;
    display: flex !important;
    padding: 13px 24px !important;
    font-size: var(--fs-16) !important;
    border-radius: var(--radius-btn) !important;
}

.product .request.show-request-form:hover,
.product .request.show-request-form:active {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

.btn-go-to-cart {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-weight: var(--fw-bold) !important;
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }
}

.btn-go-to-cart.main-small-button {
    border-radius: var(--radius-pill) !important;
    font-size: var(--fs-11);
}

.product .btn-add-to-cart,
.product .btn-go-to-cart,
.product .one-click-look {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#calc_form .btn-group label.btn {
    min-height: 48px;
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
    padding: 10px 22px;
    display: inline-flex;
    align-items: center;
    background: var(--color-white);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

#calc_form .btn-check:checked + label.btn {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

#recalc .btn-geksagon {
    background: var(--cyan);
    color: var(--color-white);
    border-radius: var(--radius-btn);
    font-weight: var(--fw-extrabold);
    padding: 12px 20px;
}

.fm-modal .btn-primary {
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-btn);
    font-weight: var(--fw-extrabold);
    min-height: 52px;
}

.btn_hide_same {
    border-radius: var(--radius-btn);
    font-weight: var(--fw-bold);
}

/* ==== header & nav ==== */

.fm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    border-bottom: 1.5px solid var(--line);
}

.fm-header-in {
    gap: 16px;
    min-height: var(--header-h);
}

.fm-logo {
    flex: none;
}

.fm-logo img {
    height: 46px;
}

.fm-nav {
    display: flex;
    font-weight: var(--fw-semi);
    font-size: var(--fs-14);
}

.fm-nav a {
    white-space: nowrap;
    padding: 8px 9px;
    border-radius: var(--radius-s);
    transition: color 0.3s ease, background-color 0.3s ease;

    &:hover {
        color: var(--color-primary);
        background: var(--bg);
    }
}

.fm-nav a.hot {
    color: var(--orange);

    &:hover {
        color: var(--color-primary);
    }
}

.fm-nav a.active,
.fm-offcanvas-nav a.active {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.fm-phone {
    line-height: 1.25;
}

.fm-phone .header-phone-num {
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.fm-worktime {
    font-size: var(--fs-12);
    color: var(--grey);
    display: block;
}

.fm-tool {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
}

.fm-tool:hover {
    background: var(--bg);
}

.fm-icon {
    width: 24px;
    height: 24px;
    color: var(--color-black);
    transition: color 0.3s ease;
}

.fm-tool:hover .fm-icon,
.fm-offcanvas-login:hover .fm-icon,
.fm-offcanvas-city:hover .fm-icon,
.fm-icon:hover {
    color: var(--color-primary);
}

.fm-offcanvas-city,
.fm-offcanvas-login {
    color: var(--color-black);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.fm-tool span[id] {
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-11);
    font-weight: var(--fw-extrabold);
    display: flex;
    padding: 0 4px;
}

.fm-burger {
    display: none;
    border: 0;
    background: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    padding: 0;
}

.fm-offcanvas {
    max-width: 340px;
}

.fm-offcanvas {
    max-width: min(340px, 100vw);
}

.fm-offcanvas-nav a {
    padding: 13px 0;
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    border-bottom: 1px solid var(--line);
}

.fm-offcanvas-meta {
    font-weight: var(--fw-semi);
}

.fm-offcanvas-phone {
    font-weight: var(--fw-bold);
}

.fm-ctabar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--color-white);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(26, 26, 26, .12);
}

#pbx-main-container {
    background: var(--color-primary);
    transition: color 0.3s ease;
}

#pbx-phone-icon,
#pbx-email-icon {
    transition: background-color 0.3s ease;

    &:hover {
        background-color: var(--color-blue-navy-dark);
    }
}

#catalogue-mobile-sidebar .fm-drawer-head {
    display: none;
}

.catalogue-sidebar #main-panel-filter > .title {
    border: none !important;
    box-shadow: none !important;
}

#catalogue-mobile-sidebar.filter-overlay-open #main-panel-filter > .title {
    display: none !important;
}

.fm-filterchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.fm-chip {
    border: 1px solid var(--line);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    cursor: pointer;
    min-height: 36px;
    transition: color 0.3s ease, border-color 0.3s ease;

    &:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
}

.fm-modal .modal-content {
    border-radius: var(--radius-l);
    border: 0;
}

.fm-modal .modal-title {
    font-weight: var(--fw-black);
}

.fm-modal textarea.form-control {
    min-height: 0;
}

#fast-buy-form .one-click-buy-price .total-amount {
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
}

#fast-buy-form .one-click-buy-price .currency-icon, #modal-cart .currency-icon {
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: var(--fw-semi);
}

a.link {
    color: var(--color-black);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.back-to-main {
    color: var(--color-black);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.news-articles-main-block .sorting .sorted-arrow path, .all-sorted-items .sorting .sorted-arrow path {
    fill: var(--color-black) !important;
}

/* ==== breadcrumbs ==== */

/* Плитка раздела (metro): вся карточка — одна ссылка в рамке, снимок во всю её ширину
   сверху, текст под ним слева. Скругление то же, что у баннера страницы. Своих правил
   для .metro-row у флекса не было — гексагоновский styles/main.css сюда не подключается. */
.metro-row .fm-metro-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
    text-align: left;
    color: var(--color-black);
    text-decoration: none;
    transition: 0.3s;
}

.metro-row .fm-metro-card:hover {
    border-color: var(--cyan);
    box-shadow: var(--shadow);
}

.metro-row .fm-metro-card img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.metro-row .fm-metro-body {
    padding: 16px;
}

.metro-row .fm-metro-body h4 {
    margin: 0 0 8px;
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
}

.metro-row .fm-metro-desc {
    color: var(--grey);
}

/* Баннер раздела: текст слева по центру, фото справа, фиксированная высота.
   Отступ снизу = отступу сверху у .main-col.pt-4 (1.5rem), без лишнего padding крошек. */
.fm-page-banner {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0 28px;
    margin-bottom: 1.5rem;
    background: var(--bg);
    border-radius: var(--radius-m);
    overflow: hidden;
    height: 300px;
}

.fm-page-banner + .breadcrumb {
    padding-top: 0;
}

.fm-page-banner__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 20px 18px 0;
    position: relative;
    z-index: 2;
}

.fm-page-banner__title {
    margin: 0 0 8px;
    font-size: var(--fs-26);
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

.fm-page-banner__desc {
    color: var(--text-muted);
    font-size: var(--fs-15);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.fm-page-banner__desc p:last-child {
    margin-bottom: 0;
}

.fm-page-banner__media {
    position: relative;
    flex: 0 0 48%;
    max-width: 460px;
}

.fm-page-banner__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        var(--bg) 0%,
        rgba(247, 248, 250, 0.55) 22%,
        transparent 48%
    );
}

.fm-page-banner__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

@media (max-width: 767px) {
    .fm-page-banner {
        flex-direction: column-reverse;
        padding: 0;
        height: auto;
    }

    .fm-page-banner__body {
        padding: 16px 18px;
    }

    .fm-page-banner__media {
        flex: none;
        max-width: none;
        width: 100%;
        height: 120px;
    }

    .fm-page-banner__media::before {
        background: linear-gradient(
            to top,
            var(--bg) 0%,
            rgba(247, 248, 250, 0.5) 40%,
            transparent 70%
        );
    }

    .fm-page-banner__title {
        font-size: var(--fs-22);
    }
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: none;
    font-size: var(--fs-14);
    color: var(--grey);
    margin: 0;
    padding: .75rem 0;
}

/* Высота строки как на гексагоне (breadcrumbs.css): у крошки и у пунктов её выпадающего списка одна */
.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 2;
    float: none;
}

/* Выпадающий список ложится точно поверх крошки, как на гексагоне: текст первого пункта там же, где текст
   крошки (отступ BS5 8px + стрелка 2 + 18 + 6 − отступ пункта 10). Со стандартным left: 28px текст при
   наведении прыгал на 4px вправо */
.breadcrumb .dropmenu-hide {
    left: 24px;
}

/* У пунктов списка при наведении меняется только фон, цвет текста тот же — как на гексагоне */
.breadcrumb .dropdown-item:hover {
    color: var(--grey);
}

/* Стрелка-разделитель: спрайт из breadcrumbs.css + float:left BS5 сидит выше текста */
.breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    width: 18px;
    height: 12px;
    margin: 0 6px 0 2px;
    padding: 0;
    vertical-align: middle;
    content: "";
    background: url("../../../images/icons2.png") 100% 96.9% no-repeat;
    background-size: 28px;
    position: relative;
    top: 0;
}

.breadcrumb a {
    color: var(--grey);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.notcart-header .breadcrumb a {
    color: var(--grey) !important;
}

.notcart-header .breadcrumb a:hover {
    color: var(--color-primary) !important;
}

ul.breadcrumb.inverted .dropmenu-hide {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
}

ul.breadcrumb.inverted .dropdown-item {
    color: var(--color-black) !important;
}

ul.breadcrumb.inverted .dropmenu .dropdown-item:hover {
    background-color: var(--color-lgray) !important;
    color: var(--color-primary) !important;
}

/* ==== home / hero ==== */

.sec-head {
    align-items: flex-end;
    margin-bottom: 36px;
}

.sec-head h2 {
    font-size: var(--fs-38);
    line-height: 1.1;
}

.sec-kicker {
    font-size: var(--fs-13);
    font-weight: var(--fw-extrabold);
    letter-spacing: .1em;
    margin-bottom: 12px;
}

.sec-kicker.c {
    color: var(--cyan);
}

.sec-kicker.m {
    color: var(--color-primary);
}

.sec-kicker.k {
    color: var(--color-black);
}

.sec-kicker::before {
    content: "";
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
}

.sec-link {
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.kicker {
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    color: var(--color-black);
    background: var(--color-white);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
}

.cmyk-dots i {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-circle);
}

.cmyk-dots i:nth-child(1) {
    background: var(--cyan);
}

.cmyk-dots i:nth-child(2) {
    background: var(--color-secondary);
}

.cmyk-dots i:nth-child(3) {
    background: var(--yellow);
}

.cmyk-dots i:nth-child(4) {
    background: var(--color-black);
}

.hero {
    position: relative;
    background:
        radial-gradient(700px 420px at 84% -10%, rgba(0, 174, 239, .10), transparent 60%),
        radial-gradient(640px 420px at -6% 110%, rgba(236, 30, 121, .08), transparent 60%),
        var(--color-white);
}

.hero-in {
    align-items: center;
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 78px;
}

.hero-left {
    flex: 1 1 auto;
    max-width: 700px;
    min-width: 0;
}

.hero h1 {
    font-size: var(--fs-52);
    font-weight: var(--fw-black);
    line-height: 1.08;
}

.hero p.sub {
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 640px;
    margin-bottom: 30px;
}

.hero-note {
    gap: 26px;
    margin-top: 34px;
    font-size: var(--fs-14);
    font-weight: var(--fw-semi);
    color: var(--color-dgray);
}

.tick {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-circle);
    flex: none;
    color: var(--color-white);
    font-size: var(--fs-11);
    font-weight: var(--fw-black);
}

.tick.c {
    background: var(--cyan);
}

.tick.m {
    background: var(--color-secondary);
}

.tick.y {
    background: var(--yellow);
    color: var(--color-black);
}

.calc {
    width: 400px;
    max-width: 100%;
    flex: none;
    background: var(--color-white);
    border-radius: var(--radius-l);
    padding: 28px;
    border: 1.5px solid var(--line-soft);
    box-shadow: 0 30px 60px rgba(26, 26, 26, .10), 0 8px 24px rgba(0, 174, 239, .12);
    position: relative;
}

.calc::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, var(--cyan) 0 25%, var(--color-secondary) 25% 50%, var(--yellow) 50% 75%, var(--color-black) 75%);
}

.calc h3 {
    font-size: var(--fs-20);
    font-weight: var(--fw-extrabold);
}

.calc .calc-sub {
    font-size: var(--fs-13);
    color: var(--grey);
    margin-bottom: 20px;
}

.calc-price {
    background: var(--bg);
    border-radius: var(--radius-m);
    padding: 16px 18px;
    margin: 18px 0;
}

.calc-price .lbl {
    font-size: var(--fs-13);
    color: var(--grey);
    font-weight: var(--fw-semi);
}

.calc-price .val {
    font-size: var(--fs-26);
    font-weight: var(--fw-black);
    color: var(--color-black);
}

.calc-price .val small {
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    color: var(--grey);
}

.calc-foot {
    font-size: var(--fs-12);
    color: var(--grey);
    margin-top: 12px;
}

.hero-roll.r1 {
    right: 436px;
    top: 36px;
    width: 150px;
    filter: drop-shadow(0 18px 30px rgba(236, 30, 121, .30));
    transform: rotate(-8deg);
}

.hero-roll.r2 {
    right: 352px;
    bottom: -38px;
    width: 118px;
    filter: drop-shadow(0 14px 26px rgba(0, 174, 239, .30));
    transform: rotate(10deg);
}

.hero-roll.r3 {
    left: -78px;
    bottom: -108px;
    width: 180px;
    filter: drop-shadow(0 18px 30px rgba(255, 210, 0, .35));
    transform: rotate(14deg);
    opacity: .9;
}

.reg-mark.a {
    right: 70px;
    top: 44px;
}

.reg-mark.b {
    left: 646px;
    top: 78px;
}

.trust {
    background: var(--bg);
    padding: 26px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.trust-item {
    flex: 1;
    background: var(--color-white);
    border-radius: var(--radius-m);
    padding: 20px 22px;
    border: 1px solid var(--line-soft);
}

.trust-ico {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-m);
    flex: none;
}

.trust-ico.c {
    background-color: rgba(0, 174, 239, .13);
    color: var(--cyan);
}

.trust-ico.m {
    background-color: rgba(236, 30, 121, .12);
    color: var(--color-primary);
}

.trust-ico.y {
    background-color: rgba(255, 210, 0, .22);
    color: var(--gold-dark);
}

.trust-ico.k {
    background-color: rgba(26, 26, 26, .08);
    color: var(--color-black);
}

.trust-item b {
    font-size: var(--fs-16);
    font-weight: var(--fw-extrabold);
    line-height: 1.2;
}

.trust-item span {
    font-size: var(--fs-13);
    color: var(--grey);
    line-height: 1.35;
    margin-top: 3px;
}

.cat:hover .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

.cat-ico {
    height: 64px;
}

.cat-arrow {
    position: absolute;
    right: 20px;
    top: 24px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: var(--yellow);
    opacity: 0;
    transform: translateX(-6px);
    transition: 0.3s;
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Карточка отрасли: снимок лежит подложкой на всю плитку, подпись — поверх него внизу.
   Высота у всех одна, иначе в сетке карточки разъедутся: текст в две-три строки
   отрастает вниз, а фон тянется за ним. Поэтому фиксированная высота и подпись,
   прижатая к низу через flex. */
.ind-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 198px;
    border-radius: var(--radius-m);
    border: 1.5px solid var(--line);
    background: var(--color-white);
    transition: 0.3s;
}

.ind-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--cyan);
}

.ind-ph {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(26, 26, 26, .035) 0 10px, transparent 10px 20px),
        linear-gradient(135deg, var(--color-lgray), var(--placeholder-bg));
}

.ind-ph svg {
    opacity: .32;
}

.ind-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение снизу вверх — чтобы белая подпись читалась на любом снимке: и на тёмной
   резине, и на светлых баночках косметики. Верх почти чистый, фото не глушим. */
.ind-card.has-photo .ind-ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(26, 26, 26, .88) 0%,
        rgba(26, 26, 26, .62) 26%,
        rgba(26, 26, 26, .18) 52%,
        rgba(26, 26, 26, 0) 74%);
}

/* Бейдж «фото · скоро» — только у карточек без снимка. */
.ind-card:not(.has-photo) .ind-ph::after {
    content: "фото · скоро";
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    color: var(--grey);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
}

.ind-name {
    position: relative;
    z-index: 1;
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    padding: 14px 16px;
}

.ind-card.has-photo .ind-name {
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(26, 26, 26, .45);
}

.ind-name i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex: none;
}

.ind-card.more {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
    min-height: 198px;
}

.ind-card.more:hover {
    box-shadow: 0 14px 30px rgba(26, 26, 26, .3);
}

/* Лайтбокс картинок в тексте страниц и статей (pages/article.html) — как у гексагона
   (.content-images-lightbox в styles.css): затемнение, снимок по центру, крестик. */
.indescription img.zoomable,
.indescription a.zoomable-link {
    cursor: zoom-in;
}

.content-images-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.65);
    cursor: zoom-out;
}

.content-images-lightbox.is-open {
    display: flex;
}

.content-images-lightbox img {
    max-width: min(900px, 92vw);
    max-height: 86vh;
    height: auto;
    object-fit: contain;
    background: var(--color-white);
    border-radius: var(--radius-s);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    cursor: default;
}

.content-images-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* Список «Статьи» на тех же карточках: бейджа «фото · скоро» нет — у статьи без снимка
   его и не будет. */
.art-grid .ind-card:not(.has-photo) .ind-ph::after {
    content: none;
}

.duo {
    gap: 24px;
    margin-top: 76px;
}

.hero-roll {
    display: block;
    background: center/contain no-repeat;
    aspect-ratio: 130/190;
}

.hero-roll.r1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 190'%3E%3Crect x='98' y='70' width='18' height='112' rx='4' fill='%23EC1E79'/%3E%3Crect x='101' y='80' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='112' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='144' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='60' cy='66' r='56' fill='%23EC1E79'/%3E%3Ccircle cx='60' cy='66' r='46' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='36' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='27' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='20' fill='%23fff'/%3E%3Ccircle cx='60' cy='66' r='12' fill='%23F0F1F4' stroke='%23D8DCE2' stroke-width='2'/%3E%3C/svg%3E");
}

.hero-roll.r2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 190'%3E%3Crect x='98' y='70' width='18' height='112' rx='4' fill='%2300AEEF'/%3E%3Crect x='101' y='80' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='112' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='144' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='60' cy='66' r='56' fill='%2300AEEF'/%3E%3Ccircle cx='60' cy='66' r='46' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='36' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='27' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='20' fill='%23fff'/%3E%3Ccircle cx='60' cy='66' r='12' fill='%23F0F1F4' stroke='%23D8DCE2' stroke-width='2'/%3E%3C/svg%3E");
}

.hero-roll.r3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 190'%3E%3Crect x='98' y='70' width='18' height='112' rx='4' fill='%23FFD200'/%3E%3Crect x='101' y='80' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='112' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='144' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='60' cy='66' r='56' fill='%23FFD200'/%3E%3Ccircle cx='60' cy='66' r='46' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='36' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='27' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='20' fill='%23fff'/%3E%3Ccircle cx='60' cy='66' r='12' fill='%23F0F1F4' stroke='%23D8DCE2' stroke-width='2'/%3E%3C/svg%3E");
}

.reg-mark {
    display: block;
    background: center/contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='%239AA0A8' stroke-width='2'/%3E%3Cline x1='20' y1='2' x2='20' y2='38' stroke='%239AA0A8' stroke-width='2'/%3E%3Cline x1='2' y1='20' x2='38' y2='20' stroke='%239AA0A8' stroke-width='2'/%3E%3C/svg%3E");
}

.reg-mark.a {
    width: 34px;
    height: 34px;
}

.reg-mark.b {
    width: 26px;
    height: 26px;
}

.trust-ico {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

.trust-ico.i-boxes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='4' y='14' width='9' height='9' rx='1.6' fill='none' stroke='%2300AEEF' stroke-width='2.4'/%3E%3Crect x='15' y='14' width='9' height='9' rx='1.6' fill='none' stroke='%2300AEEF' stroke-width='2.4'/%3E%3Crect x='9.5' y='4' width='9' height='9' rx='1.6' fill='none' stroke='%2300AEEF' stroke-width='2.4'/%3E%3C/svg%3E");
}

.trust-ico.i-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23EC1E79' stroke-width='2.6'/%3E%3Cpath d='M14 8v6.5l4.5 2.6' fill='none' stroke='%23EC1E79' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.trust-ico.i-pen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M5 23l1.4-5L19 5.4a2.3 2.3 0 0 1 3.3 0l.3.3a2.3 2.3 0 0 1 0 3.3L10 21.6 5 23z' fill='none' stroke='%23B8860B' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cline x1='16.5' y1='8' x2='20' y2='11.5' stroke='%23B8860B' stroke-width='2.4'/%3E%3C/svg%3E");
}

.trust-ico.i-one {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='4' y='6' width='20' height='16' rx='4' fill='none' stroke='%231A1A1A' stroke-width='2.4'/%3E%3Ctext x='14' y='19' text-anchor='middle' font-family='Arial' font-size='12' font-weight='800' fill='%231A1A1A'%3E1%3C/text%3E%3C/svg%3E");
}

.cat-ico {
    background: left bottom/contain no-repeat;
}

.cat-ico.i-roll-cyan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 190'%3E%3Crect x='98' y='70' width='18' height='112' rx='4' fill='%2300AEEF'/%3E%3Crect x='101' y='80' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='112' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='144' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='60' cy='66' r='56' fill='%2300AEEF'/%3E%3Ccircle cx='60' cy='66' r='46' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='36' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='27' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='20' fill='%23fff'/%3E%3Ccircle cx='60' cy='66' r='12' fill='%23F0F1F4' stroke='%23D8DCE2' stroke-width='2'/%3E%3C/svg%3E");
}

.cat-ico.i-roll-magenta {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 190'%3E%3Crect x='98' y='70' width='18' height='112' rx='4' fill='%23EC1E79'/%3E%3Crect x='101' y='80' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='112' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Crect x='101' y='144' width='12' height='26' rx='4' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='60' cy='66' r='56' fill='%23EC1E79'/%3E%3Ccircle cx='60' cy='66' r='46' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='36' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='27' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='60' cy='66' r='20' fill='%23fff'/%3E%3Ccircle cx='60' cy='66' r='12' fill='%23F0F1F4' stroke='%23D8DCE2' stroke-width='2'/%3E%3C/svg%3E");
}

.cat-ico.i-stack {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='34' width='44' height='18' rx='6' fill='%23FFD200'/%3E%3Crect x='10' y='22' width='44' height='18' rx='6' fill='%2300AEEF'/%3E%3Crect x='14' y='10' width='44' height='18' rx='6' fill='%23EC1E79'/%3E%3Ccircle cx='22' cy='19' r='3.4' fill='%23fff'/%3E%3C/svg%3E");
}

.cat-ico.i-tag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 14a6 6 0 0 1 6-6h18l24 24a6 6 0 0 1 0 8.5L41.5 55a6 6 0 0 1-8.5 0L8 30V14z' fill='%23FFB000'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23fff'/%3E%3C/svg%3E");
}

.cat-ico.i-textile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Crect x='6' y='12' width='52' height='36' rx='6' fill='%23EC1E79'/%3E%3Cline x1='14' y1='12' x2='14' y2='48' stroke='%23fff' stroke-width='2.4' stroke-dasharray='3 4'/%3E%3Cline x1='50' y1='12' x2='50' y2='48' stroke='%23fff' stroke-width='2.4' stroke-dasharray='3 4'/%3E%3Cline x1='22' y1='24' x2='42' y2='24' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='22' y1='32' x2='38' y2='32' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3Cline x1='22' y1='40' x2='34' y2='40' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.cat-ico.i-ribbon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Ccircle cx='26' cy='30' r='24' fill='%231A1A1A'/%3E%3Ccircle cx='26' cy='30' r='17' fill='none' stroke='%234A4F57' stroke-width='2'/%3E%3Ccircle cx='26' cy='30' r='8' fill='%23fff'/%3E%3Ccircle cx='26' cy='30' r='4.5' fill='%23E5E8EC'/%3E%3Crect x='48' y='8' width='10' height='44' rx='3' fill='%231A1A1A'/%3E%3Crect x='50.5' y='12' width='5' height='36' rx='2.5' fill='%233A4048'/%3E%3C/svg%3E");
}

.cat-ico.i-printer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='22' width='48' height='24' rx='6' fill='%2300AEEF'/%3E%3Crect x='16' y='10' width='32' height='12' rx='3' fill='%2300AEEF' opacity='.55'/%3E%3Crect x='16' y='40' width='32' height='16' rx='3' fill='%23fff' stroke='%2300AEEF' stroke-width='3'/%3E%3Cline x1='21' y1='46' x2='43' y2='46' stroke='%2300AEEF' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='51' x2='37' y2='51' stroke='%2300AEEF' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='49' cy='29' r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.cat-arrow {
    color: var(--color-black);
}

.fm-calcbanner {
    background: linear-gradient(120deg, var(--color-blue-bright), var(--color-secondary));
    color: var(--color-white);
    border-radius: var(--radius-m);
    padding: 22px 26px;
}

.fm-calcbanner span {
    font-size: var(--fs-18);
    font-weight: var(--fw-extrabold);
}

.fm-calcsticker {
    background: var(--yellow);
    border-radius: var(--radius-m);
    padding: 14px 18px;
    font-size: var(--fs-14);
    color: var(--color-black);
    transform: rotate(-1deg);
    transition: transform 0.3s;
}

.fm-calcsticker:hover {
    transform: rotate(0);
    color: var(--color-black);
}

.fm-calcsticker b {
    font-weight: var(--fw-extrabold);
}

.calc-step {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.calc-step-head {
    font-size: var(--fs-18);
    font-weight: var(--fw-black);
}

.calc-step-head i {
    font-style: normal;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-14);
}

#calc_form .calc-subtitle {
    font-weight: var(--fw-semi);
}

.calc-result-card {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    background: var(--color-white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    padding: 22px;
    box-shadow: var(--shadow);
}

#cost_div .row.g-0 {
    border-radius: 0.5rem;
    overflow: hidden;
}

#cost_div > .row {
    --bs-gutter-x: 0.5rem;
}

#calc_form #id_printing_quantity {
    font-size: var(--fs-20) !important;
}

#calc_form textarea.form-control {
    min-height: 66px;
}

#calc_form .form-check-input {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1.5px solid var(--line);
    border-radius: 7px;
    margin-top: 0;
}

#calc_form .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Галочка и подпись в одну строку. Глобальное .form-check { padding-left: 0 } ниже
   убирает место под квадратик BS5 (float и отрицательный отступ), и без этого блока
   квадратик лип к тексту и стоял выше строки. Квадратик ровняется по первой строке
   подписи: (line-height 25.6 − 18) / 2 ≈ 4px — так и у подписи с пояснением под ней. */
#calc_form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#calc_form .form-check .form-check-input {
    float: none;
    margin: 4px 0 0;
    align-self: flex-start;
}

#calc_form .form-check-label {
    cursor: pointer;
}

#calc_form .has-error .form-select,
#calc_form .has-error .form-control {
    border-color: var(--danger);
}

#calc_form .row.has-error > .col-12:last-child span {
    color: var(--danger);
    font-weight: var(--fw-semi);
}

.form-check {
    padding-left: 0 !important;
}

.brands-left-side-swiper .swiper-slide img, .mobile-brands-left-side-swiper .swiper-slide img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.brands-left-side-swiper .swiper-slide img.active, .mobile-brands-left-side-swiper .swiper-slide img.active {
    filter: grayscale(0%);
    opacity: 1;
}

.brands-left-side-button-prev, .brands-left-side-button-next {
    cursor: pointer;
    display: inline-block;
}

.brands-left-side-button-prev.swiper-button-disabled, .brands-left-side-button-next.swiper-button-disabled {
    opacity: 0.3;
}

/* ==== catalogue & filter ==== */

.catalog-header-block {
    color: var(--color-white);
    background: var(--color-primary);
}

.catalogue-description {
    p {
        margin: 0;
    }
}

.toggle.active svg path {
    fill: var(--color-primary);
    transition: fill 0.3s ease;
}

.all-sorted-items .item-banner {
    background-color: var(--color-lgray);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, calc(100% - 20px) center;
    background-size: 100% 100%, 35% auto;
    min-height: 200px;
    background-blend-mode: normal, multiply;
}

.all-sorted-items svg path {
    fill: var(--color-mgray);
    transition: fill 0.3s ease;
}

.all-sorted-items .sorted-view .sorted-title {
    color: var(--color-mgray);
    font-size: var(--fs-16);
    font-weight: var(--fw-med);
}

.all-sorted-items .sorted-view .sorted-title-choice {
    color: var(--color-black);
    font-size: var(--fs-16);
    font-weight: var(--fw-med);
}

.all-sorted-items .grand-childs-title {
    font-size: var(--fs-24);
    font-weight: var(--fw-semi);
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 10px;
}

.all-sorted-items .grand-childs-description {
    font-size: var(--fs-13);
    margin: 0;
}

.all-sorted-items .item-price {
    color: var(--color-primary);
    font-size: var(--fs-18);
    font-weight: var(--fw-semi);
}

.all-sorted-items .item-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-med);
}

#catalogue-page .items .grid-view-content,
#catalogue-page .items .list-view-content {
    background: var(--color-white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: none;
    transition: 0.3s;
}

#catalogue-page .items .grid-view-content:hover,
#catalogue-page .items .list-view-content:hover {
    box-shadow: var(--shadow);
}

#catalogue-page .items .grid-view-content {
    position: relative;
}

#catalogue-page .items .grid-view-content:hover .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

#catalogue-page .item-title {
    font-weight: var(--fw-semi);
    font-size: var(--fs-16);
    line-height: 1.35;
}

#catalogue-page .grid-view-content .item-title > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#catalogue-page .item-price {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

#catalogue-page .fm-badge {
    margin-bottom: 12px;
    align-self: flex-start;
}

.sorted-view .sorting {
    position: relative;
}

.sorted-view .sorting-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    display: none;
    background: var(--color-white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow);
    min-width: 200px;
    margin-top: 6px;
}

.sorted-view .sorting.open .sorting-dropdown {
    display: block;
}

.sorted-view .sorting-dropdown .select-options {
    display: block;
    padding: 8px 0;
}

.sorted-view .sorting-dropdown .badge {
    display: block;
    padding: 8px 16px;
    color: var(--color-black);
    font-size: var(--fs-14);
    white-space: nowrap;
}

.sorted-view .sorting-dropdown .badge:hover,
.sorted-view .sorting-dropdown .badge.active {
    color: var(--color-primary);
}

.sorted-view .sorting.open .sorted-arrow {
    transform: rotate(180deg);
}

.catalogue-title {
    font-size: var(--fs-32);
    font-weight: var(--fw-black);
    line-height: 1.15;
}

.sorted-view .sorting-dropdown .badge {
    margin: 2px 8px;
    padding: 8px 14px;
    font-weight: var(--fw-bold);
    background: var(--bg);
    color: var(--color-black);
}

.sorted-view .sorting-dropdown .badge:hover {
    background: var(--line);
    color: var(--color-black);
}

.sorted-view .sorting-dropdown .badge.active {
    background: var(--color-black);
    color: var(--color-white);
}

.pagination-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding-left: 0;
    margin: 0;
    gap: 10px;
}

.pagination-block .page-item .page-link,
.pagination-block .page-item a.page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
    border: 1.5px solid var(--line);
    background: var(--color-white);
    color: var(--color-black);
    font-weight: var(--fw-bold);
    padding: 8px 14px;
    font-size: var(--fs-16);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.pagination-block .page-item a.page-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination-block .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.pagination-block-results {
    color: var(--color-gray);
    font-size: var(--fs-16);
    font-weight: var(--fw-reg);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

#main-panel-filter .collapse-button {
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
}

#main-panel-filter .collapse-block label {
    font-size: var(--fs-14);
}

.filter-block {
    border: 0;

    span {
        font-size: var(--fs-16);
        font-weight: var(--fw-med);
    }
}

.filter-tooltip-btn {
    display: block;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-s);
    font-size: var(--fs-14);
    font-weight: var(--fw-med);
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-border-color: transparent;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
    
    &:hover,
    &:active {
        background-color: var(--bs-btn-hover-bg);
        color: var(--bs-btn-hover-color);
        border-color: var(--bs-btn-hover-border-color);
    }
}

#main-panel-filter .filter-changes-apply {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: var(--fw-extrabold) !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: var(--color-white) !important;
    }
}

#main-panel-filter .filter-reset {
    color: var(--grey) !important;
    font-weight: var(--fw-bold);
    border-radius: var(--radius-btn) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    &:hover,
    &:active {
        background-color: var(--bg) !important;
        color: var(--color-black) !important;
        border-color: var(--color-black) !important;
    }
}

.catalogue-menu-card {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.catalogue-menu-block a:hover .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

.catalogue-menu-block a:hover .catalogue-menu-card {
    box-shadow: var(--shadow);
    border-color: var(--cyan);
}

.catalogue-menu-card-title {
    color: var(--color-black);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
}

.catalogue-menu-card-description {
    color: var(--grey);
    font-size: var(--fs-14);
}

.catalogue-menu-card-description p {
    margin: 0;
}

.catalogue-menu-block .catalogue-menu-card .catalogue-menu-card-title {
    color: var(--color-black);
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
    transition: color 0.3s ease;
}

.catalogue-menu-block .catalogue-menu-card .catalogue-menu-card-description {
    color: var(--color-black);
    font-size: var(--fs-13);
    transition: color 0.3s ease;
}

.catalogue-menu-block a:hover .catalogue-menu-card {
    border: 1px solid var(--color-primary);
}

.block-list-nap {
    border: 1px solid var(--color-gray);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.block-list-nap .header {
    color: var(--color-black);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
}

.block-list-nap .header a{
    transition: color 0.3s ease;
    
    &:hover {
        color: var(--color-primary);
    }
}

.category-scroll::-webkit-scrollbar {
    width: 5px;
}

.category-scroll::-webkit-scrollbar-track {
    background: var(--color-mgray);
    border-radius: 5px;
}

.category-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}

.category-toggle {
    display: none;
}

.category-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semi);
    color: var(--color-black);
    cursor: pointer;
    display: block;
}

.category-title .category-title-count {
    color: var(--color-gray);
}

.subcategory-list {
    list-style: none;
    margin: 10px 0 0;
    padding-left: 10px;
    display: none;
}

.category-toggle:checked + label + .subcategory-list {
    display: block;
}

.subcategory-item {
    padding: 5px 0;
    cursor: pointer;
}

.subcategory-item.active {
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

.product .sorting {
    position: relative;
    cursor: pointer;
    font-weight: var(--fw-bold);
}

.product .sorting .sorted-arrow {
    transition: transform 0.3s;
}

.product .sorting.open .sorted-arrow {
    transform: rotate(180deg);
}

.product .sorting .sorting-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    display: none;
    background: var(--color-white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow);
    min-width: 220px;
    margin-top: 6px;
}

.product .sorting.open .sorting-dropdown {
    display: block;
}

.product .sorting .select-options {
    display: block;
    padding: 8px 0;
}

.product .sorting .sorting-dropdown .badge {
    display: block;
    margin: 2px 8px;
    padding: 8px 14px;
    font-weight: var(--fw-bold);
    background: var(--bg);
    color: var(--color-black);
    font-size: var(--fs-14);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.product .sorting .sorting-dropdown .badge:hover {
    background: var(--line);
}

.product .sorting .sorting-dropdown .badge.active {
    background: var(--color-black);
    color: var(--color-white);
}

.list-view-content .badgewrap.copy-link {
    left: 50px;
}

.grid-view-content .badgewrap {
    right: 50px;
}

.grid-view-content .badgewrap.copy-link {
    right: 15px;
}

#main-panel-filter {
    margin-bottom: 0;
}

/* ==== product ==== */

.product .makequare {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.comparison-main-block .compare-price {
    color: var(--color-primary);
    font-size: var(--fs-14);
}

.comparison-main-block .compare-price-item {
    flex-direction: column;
    align-items: flex-start !important;
}

.comparison-main-block .compare-price-item .add-to-cart-buttons-block,
.comparison-main-block .compare-price-item .compare-request {
    width: 100%;
}

.property_list .compare-list .compare-head {
    background-color: transparent;
}

.chz {
    flex: 1.35;
    background: linear-gradient(120deg, var(--ink-2) 0%, var(--color-black) 70%);
    color: var(--color-white);
    border-radius: var(--radius-l);
    padding: 46px 48px;
    position: relative;
}

.chz::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 300px;
    height: 300px;
    border-radius: var(--radius-circle);
    background: radial-gradient(circle, rgba(0, 174, 239, .28), transparent 65%);
}

.chz-in {
    gap: 38px;
    align-items: center;
}

.chz-txt h2 {
    font-size: var(--fs-30);
    font-weight: var(--fw-extrabold);
    line-height: 1.15;
}

.chz-txt h2 i {
    font-style: normal;
    color: var(--yellow);
}

.chz-txt p {
    font-size: var(--fs-16);
    line-height: 1.6;
    color: var(--text-on-dark);
    margin-bottom: 24px;
}

.chz-badge {
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-pill);
    padding: 6px 13px;
    color: var(--line-soft);
}

.dm-wrap {
    flex: none;
    background: var(--color-white);
    border-radius: var(--radius-m);
    padding: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
    transform: rotate(3deg);
}

.dm-cap {
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    margin-top: 8px;
    letter-spacing: .06em;
}

.row_property_icons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    will-change: transform;
}

.row_property_icons .catalog_property_icon {
    flex-basis: 30px;
    transition: 0.3s;
}

.row_property_icons .catalog_property_icon:hover {
    flex-basis: 60px;
    transition: 0.3s;
}

.dm-code {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    background: var(--color-white) center/contain no-repeat;
    image-rendering: pixelated;
    /* Настоящий GS1 DataMatrix в формате «Честного знака»: учебный пример оператора (markirovka.ru, «Как
       собирается код DataMatrix») — (01) 12345678901231, (21) 5w9EJp, GS, (93) abc1. Код не принадлежит
       реальному товару, но читается сканером. Сгенерирован bwip-js (gs1datamatrix), 20×20 модулей */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' shape-rendering='crispEdges'%3E%3Cpath fill='%231A1A1A' fill-rule='evenodd' d='M0 40L40 40L40 38L38 38L38 36L36 36L36 38L34 38L34 36L32 36L32 32L34 32L34 30L28 30L28 28L24 28L24 30L22 30L22 28L20 28L20 24L18 24L18 22L16 22L16 20L14 20L14 24L16 24L16 28L18 28L18 30L16 30L16 28L10 28L10 30L12 30L12 32L18 32L18 34L20 34L20 36L22 36L22 32L26 32L26 34L28 34L28 32L30 32L30 34L28 34L28 36L26 36L26 38L18 38L18 34L16 34L16 38L10 38L10 36L12 36L12 32L8 32L8 34L6 34L6 38L2 38L2 36L4 36L4 30L2 30L2 26L4 26L4 24L2 24L2 22L4 22L4 18L2 18L2 16L8 16L8 14L4 14L4 12L2 12L2 10L6 10L6 12L8 12L8 8L10 8L10 10L12 10L12 8L14 8L14 0L12 0L12 6L10 6L10 0L8 0L8 2L6 2L6 4L8 4L8 6L4 6L4 8L2 8L2 4L4 4L4 2L2 2L2 0L0 0ZM24 36L26 36L26 34L24 34ZM34 36L36 36L36 32L34 32ZM38 36L40 36L40 34L38 34ZM38 32L40 32L40 30L38 30ZM4 30L6 30L6 26L4 26ZM32 28L40 28L40 26L32 26ZM6 26L8 26L8 24L10 24L10 22L6 22ZM10 26L14 26L14 24L10 24ZM22 26L26 26L26 18L24 18L24 22L22 22L22 18L24 18L24 14L20 14L20 12L16 12L16 14L18 14L18 16L14 16L14 18L18 18L18 22L20 22L20 24L22 24ZM28 26L32 26L32 24L30 24L30 22L32 22L32 20L30 20L30 18L32 18L32 16L28 16L28 14L26 14L26 18L28 18ZM32 24L40 24L40 22L32 22ZM10 22L12 22L12 20L14 20L14 18L10 18L10 16L8 16L8 18L6 18L6 20L10 20ZM32 20L36 20L36 16L34 16L34 18L32 18ZM38 20L40 20L40 18L38 18ZM10 16L14 16L14 12L10 12ZM38 16L40 16L40 14L38 14ZM28 14L32 14L32 10L34 10L34 12L36 12L36 10L38 10L38 8L34 8L34 6L36 6L36 4L40 4L40 2L38 2L38 0L36 0L36 2L34 2L34 0L32 0L32 4L30 4L30 6L32 6L32 8L28 8ZM36 14L38 14L38 12L36 12ZM20 12L22 12L22 10L24 10L24 8L22 8L22 6L24 6L24 4L26 4L26 0L24 0L24 2L22 2L22 4L18 4L18 6L20 6L20 8L18 8L18 6L16 6L16 8L14 8L14 10L20 10ZM24 12L26 12L26 10L24 10ZM38 12L40 12L40 10L38 10ZM24 8L28 8L28 4L26 4L26 6L24 6ZM38 8L40 8L40 6L38 6ZM4 2L6 2L6 0L4 0ZM16 2L18 2L18 0L16 0ZM20 2L22 2L22 0L20 0ZM28 2L30 2L30 0L28 0Z'/%3E%3C/svg%3E");
}

.swiper-slide,
.swiper-title,
[class*="swiper-"][class*="-button-prev"],
[class*="swiper-"][class*="-button-next"] {
    user-select: none;
}

.swiper-title {
    font-size: var(--fs-30);
    font-weight: var(--fw-semi);
    transition: 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.swiper-collection-button-prev,
.swiper-collection-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}

.swiper-collection-button-next {
    right: 15px;
}

.swiper-collection-button-prev {
    right: 80px;
}

.swiper-collection-button-prev.swiper-button-disabled,
.swiper-collection-button-next.swiper-button-disabled {
    opacity: 0.3;
}

.product .information-block ul:not(.characters-list):not(.compare-list) {
    padding-left: 1.25rem;

    & li {
        padding: 5px 0;
        margin-bottom: 0;
        line-height: 1.5;
        list-style: disc;
    }
}

.product-price-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 10px 0;
}

.product-price-block .product-price {
    font-size: var(--fs-30);
    font-weight: var(--fw-semi);
    color: var(--color-primary);
}

.modifications-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-lgray);
    gap: 8px;
}

.comparison.added .icon-compare svg path {
    fill: var(--color-primary) !important;
}

.comparison.added .text-compare {
    color: var(--color-primary);
}

.comparison .text-compare {
    font-size: var(--fs-14);
    color: var(--color-dgray);
}

.col-xl-3.d-xl-flex > .border-gray-color,
#mobileFiltersCollapse > .border-gray-color,
#mobileCategoriesCollapse > .border-gray-color,
#modifications-sidebar > .border-gray-color {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

#product-mobile-sidebar > .border-gray-color {
    border: none !important;
}

.property_list .user-price {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    font-size: var(--fs-14);
}

.property_list .characters-headers li {
    justify-content: flex-start;
    padding-left: 12px;
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-align: left;
}

.product .information-block .folder-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.product .product-price {
    font-size: var(--fs-32);
    font-weight: var(--fw-black);
    line-height: 1.15;
}

.product .product-price-rrp {
    color: var(--grey);
    font-size: var(--fs-14);
    font-weight: var(--fw-semi);
}

.compare-request .balance-block .request.show-request-form {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--fs-11) !important;
    white-space: normal !important;
    transition: 0.3s ease !important;
}

.product.device-list-wrap {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    padding: 14px;
    margin-bottom: 16px;
    margin-top: 16px;
}

.product_total {
    color: var(--color-primary);
    font-weight: var(--fw-black);
}

.product_total .price {
    font-size: var(--fs-18);
    color: var(--color-primary);
    font-weight: var(--fw-black);
}

.product-form.pick .row.p-1 {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.product-form.pick .row.p-1 > div:first-child {
    flex: 0 0 40%;
    max-width: 40%;
}

.product-form.pick .row.p-1 > div:last-child {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
}

.product .add-to-cart-block input[type=number]::-webkit-inner-spin-button,
.product .add-to-cart-block input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product .add-to-cart-block input[type=number] {
    -moz-appearance: textfield;
}

.product .add-to-cart-block .stepper-wrapper {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    overflow: hidden;
    background: var(--color-white);
    min-height: 48px;
}

.product .add-to-cart-block .stepper-btn {
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    border: 0;
    background: var(--bg);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product .add-to-cart-block .stepper-btn:hover {
    background: var(--line);
}

.product .add-to-cart-block .stepper-minus {
    left: 0;
}

.product .add-to-cart-block .stepper-plus {
    right: 0;
}

.product .add-to-cart-block .stepper-input {
    width: 100%;
    height: 100%;
    min-height: 45px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    padding: 0 48px;
}

.product .tab-button {
    border-radius: var(--radius-btn);
    padding: 12px 20px;
    font-weight: var(--fw-extrabold);
    background: var(--bg);
    transition: background 0.3s, color 0.3s;
}

.product .tab-button:hover {
    background: var(--line);
}

.product .tab-button.active {
    background: var(--color-black);
    color: var(--color-white);
}

.product .characters-list,
.product .characters-headers {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.product .characters-list li,
.product .characters-headers li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--fs-14);
    border-bottom: 1px solid var(--line);
}

.product .thumbnail-wrapper {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--color-white);
    transition: border-color 0.3s;
}

.product .thumbnail-wrapper:hover {
    border-color: var(--grey);
}

.product .thumbnail-wrapper.active {
    border-color: var(--color-primary);
}

.product .images-vertical-swiper .swiper-slide img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.product .images-horizontal-swiper .swiper-slide img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

.product .modification-card .card-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.product .modification-card .sku-label {
    color: var(--color-dgray);
    font-size: var(--fs-13);
    font-weight: var(--fw-semi);
}

.product .modification-card .sku-value {
    font-size: var(--fs-13);
}

.product .modification-card .card-price {
    color: var(--color-primary);
    font-size: var(--fs-24);
    font-weight: var(--fw-semi);
}

.product .modifications-mini-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 16px 0 12px;
}

.product .modifications-mini-nav::before,
.product .modifications-mini-nav::after {
    content: '';
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: var(--line);
}

.product .modifications-mini-prev {
    order: 0;
}

.product .modifications-mini-nav::before {
    order: 1;
}

.product .modifications-mini-all {
    order: 2;
    flex-shrink: 0;
}

.product .modifications-mini-nav::after {
    order: 3;
}

.product .modifications-mini-next {
    order: 4;
}

.product .modifications-mini-prev,
.product .modifications-mini-next {
    background: none;
    border: 0;
    font-size: var(--fs-22);
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1;
}

.product .modifications-mini-prev.swiper-button-disabled,
.product .modifications-mini-next.swiper-button-disabled {
    display: none;
}

.product .modifications-mini-all a {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-14);
}

.compare-list,
.characters-list {
    font-size: var(--fs-14);
}

.property_list .compare-list.selected-sku-highlight li {
    background-color: var(--color-blue-light);
}

.property_list:has(.compare-list.selected-sku-highlight) .compare-list.rest-sku li {
    opacity: 0.5;
}

.property_list .compare-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    height: auto;
    margin-bottom: 5px;
    background-color: var(--color-lgray);
    padding: 10px;
    font-size: var(--fs-11);
}

.property_list .characters-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    font-size: var(--fs-12);
    text-align: center;
    background-color: var(--color-lgray);
    padding: 10px;
}

.property_list .characters-headers li {
    justify-content: flex-start;
    padding-left: 12px;
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-align: left;
}

.product .characters-list li, .product .characters-headers li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--fs-14);
    border-bottom: none;
}

.product .alert-warning img {
    mix-blend-mode: multiply;
}

.product .alert-warning {
    --bs-alert-border-color: none !important;
    border-radius: 0 !important;
}

.swiper-vertical-prev.swiper-button-lock,
.swiper-vertical-next.swiper-button-lock,
.swiper-horizontal-prev.swiper-button-lock,
.swiper-horizontal-next.swiper-button-lock {
    display: none !important;
}

.swiper-vertical-prev.swiper-button-disabled,
.swiper-vertical-next.swiper-button-disabled,
.swiper-horizontal-prev.swiper-button-disabled,
.swiper-horizontal-next.swiper-button-disabled {
    opacity: .2;
    pointer-events: none;
}

#char-swiper-col {
    position: relative;
}

#characteristicsPrevArrow,
#characteristicsNextArrow {
    position: absolute;
    top: 5px;
    z-index: 1;
    width: 3em;
    height: 3em;
    cursor: pointer;
    opacity: .5;
    color: var(--color-primary);
    transition: opacity 0.3s ease;
}

#characteristicsPrevArrow {
    left: 0;
}

#characteristicsNextArrow {
    right: 0;
}

#characteristicsPrevArrow:hover,
#characteristicsNextArrow:hover {
    opacity: 1;
}

#characteristicsPrevArrow.swiper-button-disabled,
#characteristicsNextArrow.swiper-button-disabled {
    display: none !important;
}

#comparePrevArrow,
#compareNextArrow {
    color: var(--color-primary);
    cursor: pointer;
}

.fm-postheader {
    margin: 8px 0 4px;
    padding: 12px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.swiper-postheader-button-prev,
.swiper-postheader-button-next {
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--cyan);
    background: var(--color-white);
    border: 1px solid var(--line);
    border-radius: var(--radius-circle);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.swiper-postheader-button-prev:hover,
.swiper-postheader-button-next:hover {
    color: var(--color-white);
    background: var(--cyan);
    border-color: var(--cyan);
}

.swiper-postheader-button-prev i,
.swiper-postheader-button-next i {
    font-size: var(--fs-18);
    line-height: 1;
}

/* На краю ленты стрелка неактивна, но колонку оставляем — с другой стороны ещё листают. */
.swiper-postheader-button-prev.swiper-button-disabled,
.swiper-postheader-button-next.swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none;
}

/* Все карточки влезают: Swiper вешает lock — прячем и кнопку, и col-auto под неё. */
.swiper-postheader-button-prev.swiper-button-lock,
.swiper-postheader-button-next.swiper-button-lock {
    display: none !important;
}

.fm-postheader .col-auto:has(> .swiper-button-lock) {
    display: none !important;
}

.postheader-swiper .swiper-slide {
    height: auto;
}

.fm-postheader__card {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 64px;
    padding: 8px 12px 8px 8px;
    text-decoration: none;
    color: var(--ink-2);
    background: var(--color-white);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.fm-postheader__card:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    text-decoration: none;
}

.fm-postheader__card.is-current {
    color: var(--ink-2);
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px var(--cyan);
    background: var(--color-blue-light);
}

.fm-postheader__thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg);
}

.fm-postheader__thumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fm-postheader__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-13);
    font-weight: var(--fw-semi);
    line-height: 1.3;
    color: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 575px) {
    .fm-postheader {
        padding: 10px 6px;
    }

    .fm-postheader__card {
        padding: 6px 10px 6px 6px;
        min-height: 56px;
    }

    .fm-postheader__thumb {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

/* ==== cart, order & profile ==== */

.empty-cart {
    color: var(--color-primary);
    font-size: var(--fs-22);
    font-weight: var(--fw-semi);
}

.one-click-look {
    border-radius: var(--radius-btn);
    font-weight: var(--fw-extrabold);
}

.orders .total-price {
    color: var(--color-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.result {
    margin-top: 20px;
    margin-bottom: -1px;
    padding: 10px;
    border: 1px solid var(--color-mgray) !important;
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
}

.result:has(+ .collapse:not(.show)) {
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
}

.orders .multi-collapse {
    border: 1px solid var(--color-mgray);
    border-top: 0;
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
    overflow: hidden;
}

.orders .multi-collapse .table {
    margin-bottom: 0;
}

.orders .multi-collapse .table > :not(caption) > * > *:first-child {
    border-left: 0;
}

.orders .multi-collapse .table > :not(caption) > * > *:last-child {
    border-right: 0;
}

.orders .multi-collapse .table > :not(caption) > *:last-child > * {
    border-bottom: 0;
}

.profile-icon {
    color: var(--color-primary);
    opacity: 0.75;
    cursor: pointer;
}

.cart_total {
    font-size: var(--fs-18);
    color: var(--color-primary);
    font-weight: var(--fw-black);
}

.cart_total .price {
    font-size: var(--fs-26);
    color: var(--color-primary);
    font-weight: var(--fw-black);
}

.notcart-header {
    color: var(--color-black);
    background-color: var(--color-lgray);
    padding: 15px 15px;
    border-radius: var(--radius-m);
}

.inner-header a {
    color: var(--color-black);
}

.icon-ok, .icon.toggle, .dash.toggle, .icon.icon-active.icon-active-accent {
    background-color: var(--color-primary);
    opacity: 1;
    transition: 0.3s;
}

.icon-active {
    background-color: var(--color-primary);
    opacity: 0.5;
}

.one-click-look {
    border: 1.5px solid var(--ok) !important;
    color: var(--ok) !important;
    background-color: var(--color-white);
    border-radius: var(--radius-btn) !important;
    min-height: 48px;
}

.one-click-look.hover-green-fill:hover,
.one-click-look.hover-green-fill:active {
    background: var(--ok) !important;
    color: var(--color-white) !important;
}

.balance-block .availability {
    color: var(--ok);
    font-weight: var(--fw-extrabold);
}

.balance-block .availability {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

/* ==== projects & news ==== */

.side-news-articles > .row {
    flex-direction: column;
}

.side-news-articles > .row > h4 {
    margin-bottom: 12px;
}

.side-news-articles .sidebar-carousel-project {
    height: 460px;
    width: 100%;
}

.side-news-articles .project-link {
    display: flex;
    align-items: flex-end;
    height: 100%;
    border-radius: var(--radius-m);
    overflow: hidden;
    text-decoration: none;
}

.side-news-articles .proj-head {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    color: var(--color-white);
    background: rgba(0, 0, 0, .5);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.side-news-articles .sliderArrow {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    color: var(--color-primary);
    cursor: pointer;
}

/* Общее оформление дат: в боковом списке новостей (.news-date) и под заголовком
   страницы (.page-date). Цвет и насыщенность держим в одном месте. */
.news-date,
.page-date {
    color: var(--magenta);
    font-weight: var(--fw-bold);
}

/* Размер переопределён только у даты в списке — та, что под заголовком,
   наследует размер от контейнера. */
.news-date {
    font-size: var(--fs-13);
}

/* ==== footer ==== */

.fm-footer {
    background: var(--color-black);
    color: var(--text-on-dark);
    margin-top: 76px;
    padding: 46px 0 40px;
}

.fm-footer a {
    color: var(--text-on-dark);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }

    &.active {
        color: var(--yellow);
    }
}

.fm-footer-in {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
}

.fm-foot-logo {
    background: var(--color-white);
    border-radius: var(--radius-btn);
    padding: 10px 16px;
}

.fm-foot-brand p {
    font-size: var(--fs-14);
    line-height: 1.6;
    color: var(--text-on-dark-muted);
    margin-top: 16px;
}

.fm-foot-col b {
    font-size: var(--fs-13);
    font-weight: var(--fw-extrabold);
    letter-spacing: .08em;
    color: var(--grey);
    margin-bottom: 16px;
}

.fm-foot-col li {
    margin-bottom: 10px;
    list-style: none;
}

.fm-foot-contacts .footer-phone {
    font-size: var(--fs-20);
    font-weight: var(--fw-extrabold);
    color: var(--color-white);
    padding-left: 0 !important;
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.fm-foot-mail {
    color: var(--cyan) !important;
    font-weight: var(--fw-bold);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary) !important;
    }
}

.fm-foot-copy {
    color: var(--grey);
    margin-top: 14px;
}

/* ==== misc ==== */

form .info-message.alert-pbx {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-radius: var(--radius-m);
}

.alert-success {
    background: color-mix(in srgb, var(--color-success) 20%, transparent);
    margin-top: 15px;
}

.country-title {
    font-size: var(--fs-26);
    font-weight: var(--fw-med);
}

h1,
h2,
h3 {
    letter-spacing: -.02em;
}

section.block {
    padding: 76px 0 0;
}

.block h2 {
    font-size: var(--fs-32);
    font-weight: var(--fw-black);
}

.block h3 {
    font-size: var(--fs-20);
    font-weight: var(--fw-extrabold);
}

/* Ссылки в текстах страниц, статей и описаний — фирменным голубым: белые на белом фоне
   были не видны (буквы глоссария, ссылки в статьях). Кнопки красятся своими классами. */
.indescription a:not(.btn) {
    color: var(--cyan);
    text-decoration: underline;

    &:hover {
        color: var(--color-black);
    };
}

/* Таблицы из редактора. Pure (styles/tables-min.css) подключён, но вся его стилизация висит
   на классе .pure-table, а CKEditor пишет голое <table border="1" cellpadding="1"> без
   классов и без thead — поэтому таблицы шли дефолтом браузера: без внутренних границ и
   отбивок. Правила ниже цепляются к любой таблице в контенте, редактору помнить ничего не
   нужно. Ширину не трогаем: её CKEditor ставит инлайном (width:100%). */
.indescription table {
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: var(--fs-14);
}

/* Широкая таблица скроллится внутри себя, а не распирает вёрстку. Обёртку навешивает
   скрипт в pages/article.html — в разметке из редактора её нет. Имя класса то же, что
   у гексагона в styles.css, там под него уже написаны правила. */
.indescription .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.indescription table td,
.indescription table th {
    padding: 6px 10px;
    border: 1px solid var(--line);
    vertical-align: middle;
}

.indescription table th,
.indescription table thead td {
    background: var(--color-lgray);
    font-weight: var(--fw-bold);
    text-align: left;
}

/* Шапку CKEditor обычно делает не через thead, а первой строкой с colspan — красим её так же. */
.indescription table tr:first-child td[colspan] {
    background: var(--color-lgray);
    font-weight: var(--fw-bold);
}

.indescription table tbody tr:nth-child(2n) td {
    background: rgba(242, 244, 247, .45);
}

/* Абзац в ячейке не раздувает строку отступом снизу */
.indescription td > p:last-child,
.indescription th > p:last-child {
    margin-bottom: 0;
}

/* Таблица с картинками — раскладка (так верстали старый flexmark.ru: фото в ячейках), а не данные: без рамок и
   заливки, текст обычного размера */
.indescription table:has(img) {
    font-size: inherit;
}

.indescription table:has(img) td,
.indescription table:has(img) th,
.indescription table:has(img) tbody tr:nth-child(2n) td {
    border: 0;
    background: none;
}

/* Картинки в тексте не шире колонки; у старых страниц размеры в атрибутах — пропорции держит height: auto */
.indescription img {
    max-width: 100%;
    height: auto;
}

/* Ленты фото и логотипов в тексте («О компании») — горизонтальный Swiper, как бренды на гексагоне: карточки
   на всю ширину колонки, стрелки фирменным голубым */
.indescription .fm-photos-swiper .swiper-slide,
.indescription .fm-brands-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--color-white);
}

.indescription .fm-photos-swiper .swiper-slide {
    height: 220px;
}

/* У фото старого сайта рамка и тень «вшиты» в картинку — чуть увеличиваем, чтобы края ушли за карточку */
.indescription .fm-photos-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}

.indescription .fm-brands-swiper .swiper-slide {
    height: 110px;
    padding: 18px;
}

/* Логотипы старого сайта высотой 40 px — крупнее, но без заметного размытия. !important — против
   .indescription img { height: auto !important } из portals/flexmarkru/catalogue.css */
.indescription .fm-brands-swiper .swiper-slide img {
    width: auto;
    height: 56px !important;
    max-width: 100%;
    object-fit: contain;
}

.indescription .swiper {
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: var(--cyan);
}

/* Списки в тексте — обычными точками, как в описаниях товаров */
.indescription ul {
    padding-left: 1.25rem;
}

.indescription ul > li {
    list-style: disc;
}

.indescription ol > li {
    list-style: decimal;
}

/* Заголовки в тексте — ступенью ниже заголовка страницы, как подзаголовки блоков flexmark */
.indescription h2 {
    margin: 1.5rem 0 .75rem;
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
}

.indescription h3 {
    margin: 1.25rem 0 .5rem;
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
}

/* Форма обратной связи — как на гексагоне (styles.css, «PBX & FEEDBACK FORMS») */
#pbx-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    height: auto;
    min-height: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background-color: var(--color-white);
    z-index: 1998;
    padding: 15px;
    max-height: 85vh;
    max-width: 700px;
    width: calc(100% - 32px);
    display: none;
    border-radius: 10px;
}

#pbx-form-container .pbx-form-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semi);
}

#pbx-form-container .close-btn {
    position: absolute;
    top: 17px;
    right: 25px;
    cursor: pointer;
    font-size: var(--fs-18);
    color: var(--color-gray);
    transition: color 0.15s;
    z-index: 10;

    &:hover {
        color: var(--color-black);
    }
}

#pbx-form-container .info-pbx-message {
    position: static;
    width: auto;
    height: auto;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: var(--fs-16);
    text-align: center;
}

#pbx-form-container .info-pbx-message.success-pbx {
    color: var(--color-success);
    background-color: color-mix(in srgb, var(--color-success) 20%, var(--color-white));
}

#pbx-form-container .info-pbx-message.alert-pbx {
    color: var(--color-red);
    background-color: color-mix(in srgb, var(--color-red) 20%, var(--color-white));
}

#pbx-form-container button {
    height: auto;
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    margin: 0;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 400;
    transition: 0.3s ease;
    outline: none;
}

#pbx-form-container button:hover,
#pbx-form-container button:active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary);
    box-shadow: none;
}

#pbx-form-container .pbx-form-input-fields {
    margin-top: 10px;
}

#pbx-form-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

#pbx-form-container input:focus {
    outline: none;
    border-color: var(--color-primary);
}

#pbx-form-container .input-group-prepend.w-100 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

#pbx-form-container .input-group-prepend.w-100 > div {
    margin-bottom: 0 !important;
}

#pbx-form-container .input-group-prepend.w-100 .captcha {
    height: 35px;
}

#pbx-form-container .input-group-prepend.w-100 .captcha-refresh {
    height: 20px;
    margin-left: 5px !important;
}

#pbx-form-container .input-group-prepend.w-100 .captcha-input {
    flex: 1;
    width: auto !important;
}

#pbx-form-container .input-group-prepend.w-100 .captcha-input input {
    height: 35px !important;
}

#pbx-form-container .svg-success {
    display: none;
    height: 100px;
    width: 100px;
    margin: 0 auto;
}

/* галочка согласия рядом с подписью: общее .form-check { padding-left: 0 } портала роняет её на свою строку */
#pbx-form-container .form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#pbx-form-container .form-check input[type="checkbox"] {
    float: none;
    align-self: flex-start;
    margin: 3px 0 0;
}

/* на телефоне перебиваем мобильное правило старой формы из common-main.css (ширина 280px, сдвиг вправо) */
@media (max-width: 576px) {
    #pbx-form-container {
        width: calc(100% - 32px) !important;
        margin-left: 0 !important;
    }

    #pbx-form-container .info-pbx-message {
        position: static !important;
        width: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

#city .modal-dialog,
#choose-region .modal-dialog {
    max-width: 400px;
    margin: 80px auto 0;
}

#city .modal-content,
#choose-region .modal-content {
    border: none;
    border-radius: var(--radius-s);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#city .modal-header,
#choose-region .modal-header {
    border-bottom: none;
    padding: 24px 24px 16px;
    justify-content: center;
}

.ask {
    font-size: var(--fs-16);
    font-weight: var(--fw-med);
    color: var(--color-black);
}

.ask i {
    color: var(--color-primary);
}

.correct {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    margin: 16px auto 8px;
    font-weight: var(--fw-med);
    color: var(--color-primary);
    text-align: center;
    text-transform: uppercase;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;

    &:hover {
        color: var(--color-white);
        background-color: var(--color-primary);
    }
}

.other-region {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    color: var(--color-dgray);
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
}

.other-region:hover {
    color: var(--color-primary);
}

#choose-region .modal-header {
    border-bottom: 1px solid var(--color-lgray);
    justify-content: space-between;
}

#choose-region .modal-header .ask {
    flex: 1;
}

.user-form .modal-content {
    border-radius: var(--radius-m);
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.user-form .modal-header {
    border-bottom: 1px solid var(--color-lgray);
    padding: 20px;
    justify-content: center;
}

.user-form .modal-header h4 {
    font-size: var(--fs-20);
    font-weight: var(--fw-semi);
    color: var(--color-black);
    margin: 0;
    text-align: center;
}

.user-form .modal-header h4 i {
    margin-right: 10px;
    color: var(--color-primary);
}

.user-form form > div:not([class*="col-"]) {
    width: 100%;
    margin-bottom: 15px;
}

.user-form form label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--fs-14);
    font-weight: var(--fw-med);
    color: var(--color-dgray);
}

.user-form .modal-footer {
    border-top: 1px solid var(--color-lgray);
    padding: 15px 30px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.user-form .modal-footer p {
    font-size: var(--fs-14);
    color: var(--color-dgray);
    margin: 0;
}

.user-form .modal-footer > div {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.user-form .alert {
    border-radius: var(--radius-s);
    font-size: var(--fs-14);
}

.field label {
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    color: var(--color-dgray);
    margin-bottom: 6px;
    letter-spacing: .02em;
}

.cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cat {
    background: var(--color-white);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-m);
    transition: box-shadow 0.3s, border-color 0.3s;
    min-height: 196px;
}

.cat:hover {
    border-color: transparent;
    box-shadow: 0 20px 44px rgba(26, 26, 26, .10);
}

.cat b {
    font-size: var(--fs-18);
    font-weight: var(--fw-extrabold);
    line-height: 1.25;
    margin-bottom: 7px;
}

.cat span {
    font-size: var(--fs-14);
    color: var(--grey);
    line-height: 1.45;
}

.cat.wide {
    grid-column: span 1;
    background: linear-gradient(135deg, var(--ink-2), var(--color-black));
    color: var(--color-white);
    border-color: var(--color-black);
}

.cat.wide span {
    color: var(--text-on-dark-muted);
}

.cat.wide:hover {
    box-shadow: 0 20px 44px rgba(26, 26, 26, .35);
}

.steps-wrap {
    background: var(--bg);
    border-radius: var(--radius-l);
    padding: 52px 56px;
    margin-top: 0;
}

.steps {
    gap: 0;
    align-items: stretch;
}

.step {
    flex: 1;
    position: relative;
    padding-right: 56px;
}

.step:last-child {
    padding-right: 0;
}

.step-num {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-m);
    font-size: var(--fs-24);
    font-weight: var(--fw-black);
    color: var(--color-white);
}

.step:nth-child(1) .step-num {
    background: var(--cyan);
    box-shadow: 0 10px 22px rgba(0, 174, 239, .35);
}

.step:nth-child(2) .step-num {
    background: var(--color-secondary);
    box-shadow: 0 10px 22px rgba(236, 30, 121, .35);
}

.step:nth-child(3) .step-num {
    background: var(--yellow);
    color: var(--color-black);
    box-shadow: 0 10px 22px rgba(255, 210, 0, .4);
}

.step b {
    font-size: var(--fs-20);
    font-weight: var(--fw-extrabold);
    line-height: 1.3;
}

.step p {
    font-size: var(--fs-14);
    color: var(--text-muted);
    line-height: 1.55;
}

.step::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 22px;
    width: 14px;
    height: 14px;
    border-top: 3.5px solid var(--color-mgray);
    border-right: 3.5px solid var(--color-mgray);
    transform: rotate(45deg);
}

.step:last-child::after {
    display: none;
}

.samples {
    flex: 1;
    background: var(--yellow);
    border-radius: var(--radius-l);
    padding: 46px 44px;
    position: relative;
}

.samples::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -46px;
    width: 190px;
    height: 190px;
    border-radius: var(--radius-circle);
    border: 26px solid rgba(255, 255, 255, .45);
}

.samples h2 {
    font-size: var(--fs-28);
    font-weight: var(--fw-extrabold);
    line-height: 1.15;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.samples p {
    font-size: var(--fs-16);
    line-height: 1.55;
    color: var(--text-on-yellow-strong);
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    max-width: 88%;
}

.samples form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.samples input {
    border: none;
    border-radius: var(--radius-btn);
    padding: 15px 18px;
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
    font-family: inherit;
    background: var(--color-white);
    color: var(--color-black);
    outline: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.samples input::placeholder {
    color: var(--text-placeholder);
}

.samples small {
    font-size: var(--fs-12);
    color: var(--text-on-yellow);
    margin-top: 12px;
    line-height: 1.4;
}

a.small {
    color: var(--color-black);
    transition: color 0.3s ease;

    &:hover {
        color: var(--color-primary);
    }
}

.border-green-color {
    border: 1.5px solid var(--ok) !important;
}

.hover-green-fill:hover,
.hover-green-fill:active {
    background: var(--ok);
    color: var(--color-white);
}

.fm-badge {
    font-size: var(--fs-12);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}

.fm-badge-ok {
    background: var(--ok-bg);
    color: var(--ok-strong);
}

.item-banner {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    padding: 26px;
    background-size: cover;
    background-position: center;
}

.border-primary-color {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-s);
}

.badgewrap.copy-link svg path {
    fill: var(--color-black);
}

.badgewrap.copy-link {
    cursor: pointer;
}

.comparison {
    cursor: pointer;
}

.border-gray-color {
    border: 1px solid var(--line);
}

.tooltip-inner {
    background-color: transparent !important;
}

input, .reset-pass input, .signup input {
    width: 100%;
    height: 38px;
    display: block;
    padding: 2px 10px;
}

.price-for-one-item,
.description-for-one-item {
    color: var(--color-primary);
}

.box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.border-radius-15 {
    border-radius: var(--radius-m);
}

.badgewrap {
    top: 0;
    width: 30px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*background: linear-gradient(to bottom, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 80%, black));*/
    background: linear-gradient(to bottom, var(--color-lgray), var(--color-mgray));
    border-radius: 0 0 5px 5px;
    z-index: 1;
}

.badgewrap.copy-link svg {
    fill: var(--grey);
}

.fm-pagebar {
    z-index: 900;
    background: var(--color-white);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(26, 26, 26, .12);
    transform: translateY(110%);
    transition: transform 0.3s;
}

.fm-pagebar.shown {
    transform: none;
}

.fm-pagebar-price {
    font-size: var(--fs-20);
    font-weight: var(--fw-black);
}

.fm-pagebar-buy {
    flex: 1;
    min-width: 0;
}

.fm-pagebar-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#submit-button {
    width: 100%;
    background: var(--cyan);
    color: var(--color-white) !important;
    border: 0;
    border-radius: var(--radius-btn);
    scroll-margin-top: calc(var(--header-h) + 16px);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-16);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover,
    &:active {
        box-shadow: 0 10px 24px var(--btn-shadow-color);
    }
}

#submit-button:hover {
    --btn-shadow-color: color-mix(in srgb, var(--color-black) 35%, transparent);
}

.comparison-main-title {
    font-weight: var(--fw-black);
}

.nextpreview-newsarticle-block {
    color: var(--color-dark-gray);
    text-decoration: none;
    border: 3px solid transparent;

    &:hover {
        background-color: transparent;
        border-style: solid;
        border-width: 3px;
        border-radius: var(--radius-m);
        border-top-color: var(--color-secondary);
        border-right-color: var(--color-black);
        border-bottom-color: var(--yellow);
        border-left-color: var(--cyan);
    }
}

/* ==== media queries (desktop -> mobile) ==== */

@media (min-width: 1200px) {
    .product .add-to-cart-block .stepper-input {
        height: 49px;
    }
}

@media (max-width:1599px) {
    .fm-cta-samples {
        display: none;
    }
}

@media (min-width:1440px) and (max-width:1599px) {
    .fm-worktime {
        display: none;
    }
}

@media (max-width:1439px) {
    .fm-nav {
        display: none;
    }

    .fm-burger {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width:1199px) {
    .calc-result-card {
        position: static;
    }
}

@media (max-width:1024px) {
    #catalogue-page .items.col-sm-6 {
        width: 50%;
    }
}

@media (max-width:1023px) {
    .fm-footer-in {
        grid-template-columns: 1fr 1fr;
    }

    .hero-in {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-roll,
    .reg-mark {
        display: none;
    }

    .calc {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .trust-in {
        flex-wrap: wrap;
    }

    .trust-item {
        flex: 1 1 calc(50% - 10px);
    }

    .cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ind-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .duo {
        flex-direction: column;
    }
}

@media (max-width:929px) {
    .fm-cta-quote {
        display: none;
    }
}

@media (max-width:991.98px) {
    #modifications-content .list-view-content {
        display: none !important;
    }

    #modifications-content .grid-view-content {
        display: flex !important;
    }

    #modifications-content .items {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width:768px) {
    .fm-ctabar {
        display: none;
    }
}

@media (max-width:767.98px) {
    #catalogue-mobile-sidebar.filter-overlay-open {
        background: rgba(26, 26, 26, .45);
        padding: 0 !important;
        overflow: hidden;
    }

    #catalogue-mobile-sidebar.filter-overlay-open > .border-gray-color {
        width: min(320px, 88vw);
        height: 100%;
        background: var(--color-white);
        overflow-y: auto;
        border: none;
        border-radius: 0 !important;
        padding: 16px !important;
        box-shadow: 12px 0 40px rgba(26, 26, 26, .25);
        animation: fm-drawer-in .25s ease;
    }

    @keyframes fm-drawer-in {
        from {
            transform: translateX(-105%);
        }

        to {
            transform: translateX(0);
        }
    }

    #catalogue-mobile-sidebar.filter-overlay-open .fm-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: var(--fs-18);
        font-weight: var(--fw-extrabold);
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1.5px solid var(--line);
    }

    .fm-drawer-close {
        border: 0;
        background: none;
        font-size: var(--fs-28);
        line-height: 1;
        padding: 0 6px;
        color: var(--color-black);
    }
}

@media (max-width:767px) {
    :root {
        --header-h: 60px;
    }

    #grid,
    #list {
        display: none;
    }

    .all-sorted-items .list-view-content {
        display: none !important;
    }

    .all-sorted-items .grid-view-content {
        display: flex !important;
    }

    #modifications-content .items {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .swiper-collection-button-prev,
    .swiper-collection-button-next {
        display: none;
    }

    .fm-header .wrap {
        padding: 0 16px;
    }

    .fm-logo img {
        height: 32px;
    }

    .fm-phone,
    .fm-cta-quote {
        display: none;
    }

    .fm-tool {
        width: 36px;
        height: 36px;
    }

    .fm-tool.city-wrap,
    .fm-tool.login-wrap {
        display: none;
    }

    .fm-burger {
        width: 36px;
        height: 36px;
        position: relative;
    }

    .fm-burger::before,
    .fm-tool::before {
        content: "";
        position: absolute;
        inset: -4px;
    }

    .cmyk-stripe {
        height: 2px;
    }

    main {
        padding-bottom: 0;
    }

    .fm-footer {
        padding-bottom: calc(116px + env(safe-area-inset-bottom));
    }

    #pbx-main-container,
    #pbx-main-container-shadow {
        bottom: 150px;
    }

    .hero h1 {
        font-size: var(--fs-30);
    }

    .hero-in {
        padding-top: 40px;
        padding-bottom: 48px;
        gap: 32px;
    }

    .hero p.sub {
        font-size: var(--fs-16);
    }

    .hero-cta {
        flex-wrap: wrap;
    }

    .hero-note {
        flex-wrap: wrap;
        gap: 12px 20px;
        margin-top: 24px;
    }

    section.block {
        padding: 48px 0 0;
    }

    .block h2,
    .sec-head h2 {
        font-size: var(--fs-24);
    }

    .sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
    }

    .cats,
    .ind-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps {
        flex-direction: column;
        gap: 26px;
    }

    .step {
        padding-right: 0;
    }

    .step::after {
        display: none;
    }

    .steps-wrap {
        padding: 32px 24px;
    }

    .duo {
        margin-top: 48px;
        gap: 16px;
    }

    .chz {
        padding: 32px 24px;
    }

    .chz-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }

    .chz-txt h2 {
        font-size: var(--fs-24);
    }

    .samples {
        padding: 32px 24px;
    }

    .samples h2 {
        font-size: var(--fs-22);
    }

    .samples p {
        max-width: 100%;
    }

    .subcategory-title {
        font-size: var(--fs-24);
    }

    .item-banner {
        padding: 18px;
    }

    .fm-calcbanner {
        padding: 18px;
    }

    .fm-modal {
        margin: 0;
        max-width: none;
        height: 100%;
        align-items: stretch;
    }

    .fm-modal .modal-content {
        height: 100%;
        border-radius: 0;
        overflow-y: auto;
    }
}

@media (min-width: 576px) {
    .fa-sm-4x {
        font-size: 4em;
    }
}

@media (min-width: 320px) and (max-width: 575.98px) {
    .product .product-price-block {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width:575.98px) {
    .product .single-mod-row {
        flex-wrap: wrap;
    }

    .product .single-mod-row > * {
        flex: 1 1 100%;
    }

    .product .single-mod-row .stepper-wrapper {
        max-width: 170px;
        margin: 0 auto;
    }

    #pbx-form-container {
        margin-left: 0 !important;
    }

    #pbx-form-container .form-fields {
        position: relative !important;
        padding-left: 0 !important;
        margin: 0 !important;
        top: auto !important;
        width: auto !important;
    }
}

@media (max-width:479px) {
    .cats {
        grid-template-columns: 1fr;
    }

    .fm-footer-in {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fm-footer {
        margin-top: 44px;
    }

    .trust-item {
        flex: 1 1 100%;
    }

    .ind-name {
        font-size: var(--fs-14);
    }

    .ind-card.more {
        grid-column: 1 / -1;
        min-height: 56px;
    }
}

@media (max-width:399px) {
    .cats {
        grid-template-columns: 1fr;
    }

    #catalogue-page .items.col-sm-6 {
        width: 100%;
    }
}

@media (max-width:374px) {
    .fm-header-in {
        gap: 10px;
    }

    .fm-logo img {
        height: 28px;
    }

    .fm-tool.compare-a {
        display: none;
    }
}

@media (min-width: 320px) {
    .fa-xs-3x {
        font-size: 3em;
    }
}

.cart .border-radius-10,
.cart-popup .border-radius-10,
.cart-mobile .border-radius-10 {
    border-radius: var(--radius-s);
}

/* ==== cart mobile bar ==== */

#cart-popup-content-mobile .cart-popup {
    display: none !important;
}
#cart-popup-content-mobile .cart-popup-mobile {
    display: block !important;
}

.cart-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

.cart-mobile-bar {
    background-color: var(--color-primary);
    padding: 10px 0;
    cursor: pointer;
}

.cart-mobile-order-title {
    color: var(--color-white);
    font-size: var(--fs-13);
    font-weight: var(--fw-semi);
}

#cart-mobile-bar-total {
    color: var(--color-white);
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
}

.cart-mobile .cart-counter {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-pill);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.cart-mobile-popup-dropup {
    display: none;
    position: fixed;
    bottom: 46px;
    left: 0;
    right: calc(100% * 2 / 12);
    z-index: 1040;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.cart-mobile-popup-dropup > div > a {
    color: var(--color-white);
    text-decoration: none;
}

.cart-mobile-popup-dropup .cart-popup-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.cart-mobile-popup-dropup .btn-close {
    filter: invert(1);
    opacity: 1;
}

.cart-mobile-popup-dropup .empty-cart {
    color: var(--color-white);
    font-size: var(--fs-14);
}

.cart-mobile-popup-dropup .border-mgray-color {
    border-color: var(--color-white) !important;
}

.cart-popup-mobile .in-stock-needs_clarification-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
    color: var(--color-white);
}

.cart-popup-mobile .border-mgray-color {
    border-color: var(--color-white) !important;
}

.cart-popup-mobile .desktop-item-card .border-mgray-color {
    border-color: var(--color-mgray) !important;
}

.cart-popup-mobile .desktop-item-card {
    background-color: var(--color-white) !important;
    color: var(--color-black);
    padding: 0.75rem !important;
    border-radius: var(--radius-s);
}

.cart-popup-mobile .desktop-item-card a {
    color: var(--color-black);
    text-decoration: none;
}

.cart-popup-mobile .desktop-item-card .cart-item-title {
    color: var(--color-black);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
}

.cart-popup-mobile .desktop-item-card .cart-item-title a {
    color: inherit;
}

.cart-popup-mobile .desktop-item-card .title-sku {
    color: var(--color-black) !important;
    font-size: var(--fs-13);
    font-weight: var(--fw-med);
    word-break: break-all;
}

.cart-popup-mobile .desktop-item-card .description,
.cart-popup-mobile .desktop-item-card .balance {
    color: var(--color-black) !important;
    font-size: var(--fs-11);
    word-break: break-all;
}

.cart-popup-mobile .desktop-item-card .balance .balance-block .dev-balance {
    color: var(--color-gray);
    font-size: var(--fs-11);
    word-break: break-all;
}

.cart-popup-mobile .desktop-item-card .desktop-price-value {
    color: var(--color-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.cart-popup-mobile .warning-announce {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    font-size: var(--fs-12);
    border-radius: var(--radius-s);
}

.cart-popup-mobile .cart-total-title {
    color: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.cart-popup-mobile .cart-intermediate-title {
    color: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.cart-popup-mobile .form-control {
    background-color: var(--color-white) !important;
}

.cart-popup-mobile .stepper-wrapper {
    position: relative;
}

.cart-popup-mobile .stepper-wrapper .stepper-input {
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    padding-left: 40px;
    padding-right: 40px;
    -moz-appearance: textfield;
    appearance: textfield;
    background-color: var(--color-white) !important;
}

.cart-popup-mobile .stepper-wrapper .stepper-input::-webkit-outer-spin-button,
.cart-popup-mobile .stepper-wrapper .stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-popup-mobile .stepper-wrapper .stepper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    z-index: 2;
}

.cart-popup-mobile .stepper-wrapper .stepper-minus {
    left: 4px;
}

.cart-popup-mobile .stepper-wrapper .stepper-plus {
    right: 4px;
}

.cart-popup-mobile .desktop-checkout-btn {
    border: 1px solid var(--color-white);
    border-radius: var(--radius-btn);
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    display: block;
    text-align: center;
    padding: 10px 16px;
    font-weight: var(--fw-semi);
    text-decoration: none;
}

.cart-popup-mobile .all-delete-block {
    background-color: var(--color-white);
    color: var(--color-black);
}

.cart-popup-mobile .select-all-title {
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
}

.cart-popup-mobile .delete-all-items {
    color: var(--color-red) !important;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

@supports selector(:has(*)) {
    body:has(#cart-mobile-wrapper:not([style*="display:none"]):not([style*="display: none"])) .fm-pagebar.shown {
        bottom: 46px !important;
    }
}

body:has(#cart-mobile-wrapper:not([style*="display:none"]):not([style*="display: none"])) .fm-ctabar {
    bottom: 46px;
}

@media (max-width: 767px) {
    body:has(#cart-mobile-wrapper:not([style*="display:none"]):not([style*="display: none"])) .fm-footer {
        padding-bottom: calc(116px + 46px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    body:has(#cart-mobile-wrapper:not([style*="display:none"]):not([style*="display: none"])) .fm-header-cart {
        display: none !important;
    }
}

.cart .border-mgray-color,
.cart-popup .border-mgray-color,
.cart-mobile .border-mgray-color {
    border: 1px solid var(--line);
}

.cart .order-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semi);
}

.cart .order-manager-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.cart .order-manager-main-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.cart .order-phone-title,
.cart .order-phone-title a {
    color: var(--color-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.cart .cart-status-title {
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 1rem 1rem 30px;
    border-radius: var(--radius-s);
}

.cart .cart-clarification-title {
    position: relative;
    z-index: 1;
    margin-top: -30px;
    font-size: var(--fs-24);
    font-weight: var(--fw-semi);
    background-color: var(--color-white);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.cart .cart-block .select-all-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.cart .cart-block .cart-header {
    font-weight: var(--fw-semi);
}

.cart .cart-block .delete-all-items-title {
    color: var(--color-red);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.cart .cart-block .cart-product-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semi);
}

.cart .cart-block .cart-sku-one-item-title {
    font-weight: var(--fw-semi);
}

.cart .cart-block .cart-sku-quantity-title {
    font-weight: var(--fw-semi);
}

.cart .cart-block .cart-sku-price {
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

.cart .cart-block .cart-sku-total-price {
    color: var(--color-primary);
    font-weight: var(--fw-semi);
    white-space: nowrap;
}

.cart .cart-block svg {
    fill: var(--color-white);
    stroke: var(--color-white);
}

.cart .cart-block .main-big-button.border-mgray-color,
.cart .cart-block .main-big-button.border-mgray-color:hover,
.cart .cart-block .main-big-button.border-mgray-color:active {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary);
    box-shadow: none;
}

.cart .cart-block .cart-sku {
    color: var(--color-dgray);
}

.cart .cart-promocode-title {
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

.cart .cart-intermediate-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semi);
}

.cart .cart-delivery-title {
    font-weight: var(--fw-semi);
}

.cart .cart-total-title {
    color: var(--color-primary);
    font-size: var(--fs-18);
    font-weight: var(--fw-semi);
}

.cart .price {
    color: var(--color-primary);
    font-size: var(--fs-26);
    font-weight: var(--fw-black);
}

.cart .cart-totals-block .price.big-price {
    font-size: var(--fs-26);
    font-weight: var(--fw-bold);
}

.cart .checkout.main-big-button {
    color: var(--color-white);
    background-color: var(--color-primary);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-btn);
}

.cart .checkout.main-big-button:hover,
.cart .checkout.main-big-button:active {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.cart .cart-sidebar .order-look {
    color: var(--color-white);
    background-color: var(--color-primary);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-btn);
}

.cart .cart-sidebar .order-look:hover,
.cart .cart-sidebar .order-look:active {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.cart .keep-shopping {
    color: var(--color-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.cart .cart-block .stepper-wrapper {
    position: relative;
}

.cart .cart-block .stepper-wrapper .stepper-input {
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    padding-left: 40px;
    padding-right: 40px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart .cart-block .stepper-wrapper .stepper-input::-webkit-outer-spin-button,
.cart .cart-block .stepper-wrapper .stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart .cart-block .stepper-wrapper .stepper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px 20px;
    cursor: pointer;
    z-index: 2;
}

.cart .cart-block .stepper-wrapper .stepper-minus {
    left: 12px;
}

.cart .cart-block .stepper-wrapper .stepper-plus {
    right: 12px;
}

.cart .cart-sidebar {
    position: sticky;
    top: 20px;
}

.cart .cart-sidebar .right-title {
    font-size: var(--fs-12);
}

.cart .cart-item-image {
    width: 120px;
    min-width: 120px;
    flex-shrink: 0;
}

.cart .cart-item-image img {
    max-width: 100%;
    height: auto;
}

.cart .sidebar-cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-mgray);
}

.cart .sidebar-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.3;
}

.cart .sidebar-cart-item-qty {
    flex-shrink: 0;
    font-weight: var(--fw-semi);
    color: var(--color-primary);
    min-width: 28px;
}

.cart .sidebar-cart-item-title {
    flex: 1;
    color: var(--color-black);
    word-break: break-word;
}

.cart .sidebar-cart-item-price {
    flex-shrink: 0;
    font-weight: var(--fw-semi);
    color: var(--color-black);
    text-align: right;
    white-space: nowrap;
}

.cart .sidebar-gdpr {
    margin-top: 8px;
}

.cart .sidebar-gdpr-label {
    line-height: 1.4;
    color: var(--color-black);
    cursor: pointer;
}

.cart .sidebar-gdpr-label a {
    color: var(--color-primary);
}

.cart .balance-block .request {
    color: var(--color-white);
    background-color: var(--color-primary);
    display: inline-flex;
    border-radius: var(--radius-btn);
}

.cart-section-title {
    font-size: var(--fs-14);
    font-weight: var(--fw-semi);
    color: var(--color-black);
}

#cart-order-form .label {
    font-size: var(--fs-18);
    font-weight: var(--fw-semi);
}

/* --- 320px–575px (mobile) --- */
@media (min-width: 320px) and (max-width: 575.98px) {

    .cart .cart-block .select-all-title,
    .cart .cart-block .delete-all-items-title {
        font-size: var(--fs-14);
    }

    .cart .balance-block .availability,
    .cart .balance-block .request {
        font-size: var(--fs-11);
    }

    .cart .cart-clarification-title {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-product-title {
        font-size: var(--fs-14);
    }

    .cart .cart-block .cart-sku {
        font-size: var(--fs-12);
    }

    .cart .cart-block .item-card {
        padding: 12px !important;
    }

    .cart .cart-item-image {
        width: 80px;
        min-width: 80px;
    }

    .cart .cart-item-image img {
        max-width: 100%;
        height: auto;
    }

    .cart .cart-block .stepper-wrapper .stepper-input {
        font-size: var(--fs-14);
        padding-left: 25px;
        padding-right: 25px;
        min-width: 70px;
    }

    .cart .cart-block .stepper-wrapper .stepper-minus {
        left: 5px;
    }

    .cart .cart-block .stepper-wrapper .stepper-plus {
        right: 5px;
    }

    .cart .cart-block .stepper-wrapper .stepper-btn svg {
        width: 12px;
        height: auto;
    }

    .cart .cart-block .item-card .row.justify-content-between {
        flex-wrap: nowrap;
    }

    .cart .cart-block .delete-btn .border-mgray-color {
        padding: 6px !important;
    }

    .cart .cart-block .delete-btn svg {
        width: 12px;
        height: 12px;
    }

    .cart .cart-sidebar {
        position: static;
    }

    .cart .checkout {
        font-size: var(--fs-14);
        padding: 12px;
    }

    .cart .cart-intermediate-title {
        font-size: var(--fs-16);
    }

    .cart .sidebar-cart-item {
        font-size: var(--fs-12);
        gap: 6px;
    }

    .cart .sidebar-cart-item-qty {
        min-width: 24px;
    }

    .cart .sidebar-cart-item-price {
        font-size: var(--fs-12);
    }

    .cart .sidebar-cart-items-list {
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .cart .cart-total-title {
        color: var(--color-primary);
        font-size: var(--fs-14);
        font-weight: var(--fw-semi);
    }

    .cart .price {
        font-size: var(--fs-18) !important;
    }

    .cart .keep-shopping {
        font-size: var(--fs-14);
    }

    .cart .cart-block .row > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .cart .cart-block .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 > a,
    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 > div {
        width: 100% !important;
    }

    .cart .cart-block .main-big-button {
        font-size: var(--fs-14);
        padding: 12px;
        justify-content: center;
    }

    .cart .cart-block .cart-totals-block .cart-total-title {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .price.big-price {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .d-flex {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- max-width 767px (all phones + small tablets) --- */
@media (max-width: 767.98px) {

    .cart .cart-block .row.align-items-center.gap-2 {
        gap: 0.25rem !important;
    }

    .cart .cart-block .cart-sku-one-item-title {
        font-size: var(--fs-12);
        white-space: nowrap;
    }

    .cart .cart-block .cart-sku-price {
        font-size: var(--fs-12);
        white-space: nowrap;
    }

    .cart .cart-block .cart-sku-quantity-title {
        font-size: var(--fs-12);
        white-space: nowrap;
    }

    .cart .cart-block .cart-sku-total-price {
        font-size: var(--fs-12);
        white-space: nowrap;
    }
}

/* --- 576px–767px (small tablets / large phones landscape) --- */
@media (min-width: 576px) and (max-width: 767.98px) {

    .cart .cart-block .cart-product-title {
        font-size: var(--fs-16);
    }

    .cart .cart-item-image {
        width: 100px;
        min-width: 100px;
    }

    .cart .cart-sidebar {
        position: static;
    }

    .cart .sidebar-cart-item {
        font-size: var(--fs-13);
    }

    .cart .sidebar-cart-items-list {
        gap: 6px;
    }

    .cart .cart-block .stepper-wrapper .stepper-input {
        min-width: 110px;
    }

    .cart .cart-block .row > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .cart .cart-block .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 > a,
    .cart .cart-block .col-8 .d-flex.align-items-center.gap-2 > div {
        width: 100% !important;
    }

    .cart .cart-block .main-big-button {
        font-size: var(--fs-14);
        padding: 12px;
        justify-content: center;
    }

    .cart .cart-block .cart-totals-block .cart-total-title {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .price.big-price {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .d-flex {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- 768px–991px (tablets) --- */
@media (min-width: 768px) and (max-width: 991.98px) {

    .cart .cart-block .cart-product-title {
        font-size: var(--fs-18);
    }

    .cart .cart-item-image {
        width: 110px;
        min-width: 110px;
    }

    .cart .cart-sidebar {
        position: static;
    }

    .cart .cart-block .row > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .cart .cart-block .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cart .cart-block .main-big-button {
        font-size: var(--fs-14);
        padding: 12px;
    }

    .cart .cart-block .cart-totals-block .cart-total-title {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .price {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .price.big-price {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .d-flex {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- 992px–1199px (small desktop / large tablet landscape) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .cart .cart-block .stepper-wrapper .stepper-input {
        font-size: var(--fs-18);
    }

    .cart .cart-block .main-big-button {
        font-size: var(--fs-13);
        padding: 10px;
    }

    .cart .cart-block .cart-totals-block .cart-total-title {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .price.big-price {
        font-size: var(--fs-18);
    }

    .cart .cart-block .cart-totals-block .d-flex {
        flex-wrap: wrap;
        gap: 4px;
    }
}

.fm-cart-popup-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    width: 510px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--color-white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

.fm-cart-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 2;
}

.fm-cart-popup-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    text-decoration: none;
}

.fm-cart-popup-title:hover {
    color: var(--color-primary);
}

.fm-cart-popup-close {
    background: none;
    border: none;
    font-size: var(--fs-20);
    line-height: 1;
    cursor: pointer;
    color: var(--color-gray);
    padding: 2px 6px;
    border-radius: var(--radius-s);
    transition: color 0.2s ease;
}

.fm-cart-popup-close:hover {
    color: var(--color-black);
}

.fm-cart-popup-content {
    padding: 10px 12px;
}

.fm-cart-popup-dropdown .cart-popup .in-stock-needs_clarification-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.fm-cart-popup-dropdown .cart-popup .select-all-title {
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
}

.fm-cart-popup-dropdown .cart-popup .delete-all-items {
    color: var(--color-red) !important;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    cursor: pointer;
    text-decoration: none;
}

.fm-cart-popup-dropdown .cart-popup .delete-all-items:hover {
    text-decoration: underline;
}

.fm-cart-popup-dropdown {
    --color-lgray: #F1F1F1;
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.06);
    padding: 8px;
    margin-bottom: 8px;
    background-color: var(--color-white);
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .cart-item-title {
    color: var(--color-black);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .cart-item-title a {
    color: inherit;
    text-decoration: none;
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .cart-item-title a:hover {
    color: var(--color-primary);
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .title-sku {
    font-size: var(--fs-13);
    font-weight: var(--fw-med);
    word-break: break-all;
    color: var(--color-gray);
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .description,
.fm-cart-popup-dropdown .cart-popup .desktop-item-card .balance {
    font-size: var(--fs-11);
    word-break: break-all;
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .balance .balance-block {
    padding-top: 4px;
}

.fm-cart-popup-dropdown .cart-popup .desktop-item-card .desktop-price-value {
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
}

.fm-cart-popup-dropdown .cart-popup .warning-announce {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-12);
    border-radius: var(--radius-s);
    padding: 8px 12px;
}

.fm-cart-popup-dropdown .cart-popup .cart-intermediate-title {
    color: var(--color-black);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}

.fm-cart-popup-dropdown .cart-popup .cart-total-title {
    color: var(--color-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-semi);
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper {
    position: relative;
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-input {
    color: var(--color-primary);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    padding-left: 40px;
    padding-right: 40px;
    -moz-appearance: textfield;
    appearance: textfield;
    background-color: var(--color-white) !important;
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-input::-webkit-outer-spin-button,
.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    z-index: 2;
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-minus {
    left: 4px;
}

.fm-cart-popup-dropdown .cart-popup .stepper-wrapper .stepper-plus {
    right: 4px;
}

.fm-cart-popup-dropdown .cart-popup .form-control {
    background-color: var(--color-white) !important;
}

.fm-cart-popup-dropdown .cart-popup .balance-block .availability {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.fm-cart-popup-dropdown .cart-popup .balance-block .request {
    color: var(--color-white);
    background-color: var(--color-primary);
    display: inline-flex;
    border-radius: var(--radius-btn);
}

.fm-cart-popup-dropdown .cart-popup .header {
    font-size: var(--fs-14);
    font-weight: var(--fw-reg);
}

@media (max-width: 480px) {
    .fm-cart-popup-dropdown {
        position: fixed;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--header-h) + 8px);
        width: calc(100vw - 24px);
        max-width: 380px;
    }
}