@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@100..900&display=swap");

/* ===== CSS Custom Properties (Dark theme as default) ===== */
:root{
    /* Backgrounds & surfaces */
    --bg: #071022;
    --bg-page: #071022;
    --alt-bg: #071022;
    --ui-surface: #0b1220;
    --ui-surface-1: #192239;
    --ui-surface-2: #0f1726;
    --card-bg: #192239;
    --light-bg: #f1f5f9;
    --fast-filter-bg: #071022;

    /* Brand (accent) */
    --brand-400: #FF8904FF;
    --brand-500: #e9552f;
    --brand-600: #652414;

    /* Text (light on dark) */
    --fg: #E6EEF8;
    --text-primary: var(--fg);
    --text-default: var(--fg);
    --text-strong: #ffffff;
    --text-inverse: #0b1220;
    --text-muted: rgba(230,238,248,0.6);
    --text-muted-2: #bfc6cf;
    --text-muted-3: #9ea7b2;
    --text-weak: #97a2b0;
    --text-placeholder: #9aa6b5;
    --text-brand: var(--brand-500);
    --text-on-brand: #E6EEF8;
    --text-accent: var(--brand-400);

    /* Inputs & borders */
    --input-bg: #071127;
    --input-fg: var(--fg);
    --border-color: rgba(3, 11, 44, 0.16);
    --input-border: rgba(230,238,248,0.08);
    --ui-border: rgba(230,238,248,0.06);
    --ui-muted: rgba(230,238,248,0.58);

    /* Status colors */
    --text-success: #008000;
    --text-success-bg: rgba(22,133,82,0.12);
    --text-danger: #f3b2b7;
    --text-danger-bg: rgba(183,39,39,0.08);

    /* Misc */
    --radius: 1rem;
    --header-row-2-bg: #071127;
    --ico-bold: 1.4;

    /* Compatibility aliases (keep older names referenced in file) */
    --color-bg: var(--bg);
    --color-bg-page: var(--bg-page);
    --color-fg: var(--fg);
    --color-brand-400: var(--brand-400);
    --color-brand-400-rgb: 255, 137, 4;
    --color-brand-500: var(--brand-500);
    --color-brand-500-rgb: 233, 85, 47;
    --radius-xl: var(--radius);
    --ft: var(--text-inverse);
    --graybg: #0a0b0f;
}

/* ===== Base ===== */
html, body {
    background: var(--bg-page) !important;
    color: var(--text-inverse) !important;
}
body {
    font-family: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6, b {
    font-weight: 700 !important;
    color: var(--text-strong);
}
.iti__selected-dial-code{color:var(--text-primary)}
/* ===== Header wrapper ===== */
.header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 99;
    width: 100%;
    background: var(--ui-surface-1);
    transition: background-color .3s ease, box-shadow .3s ease;
    color: var(--text-default);
}

/* контейнер */
.header .header__container {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    padding-inline: 1.375rem;
    box-sizing: border-box;
}

/* ===== Row 1 ===== */
.header-top .header-top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 2.625rem;
    padding-block: .25rem;
}
.header__address {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.header__address img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}
.header__address p { margin: 0; }

.menu-secondary {
    display: inline-flex;
    align-items: center;
    gap: 1.75rem;
}
.menu-secondary a {
    position: relative;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--text-muted);
    text-underline-offset: .35rem;
    text-decoration-skip-ink: none;
    padding-bottom: .4375rem;
}
.menu-secondary a:hover::after,
.menu-secondary a.active::after,
.menu-secondary a[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--text-brand);
}
.menu-secondary a:hover,
.menu-secondary a.active,
.menu-secondary a[aria-current="page"] {
    color: var(--text-brand);
    text-decoration-color: var(--text-brand);
}

/* ===== Row 2 ===== */
.header-bottom {
    position: relative;
    background: var(--header-row-2-bg);
}
.header-bottom::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: .0625rem;
    background: var(--ui-border);
    pointer-events: none;
}
.header-bottom .header-bottom-wrapper {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 4rem;
    padding-block: .75rem;
    flex-wrap: nowrap;
}
.header-bottom svg {
    fill:none;
    inline-size: 1rem;
    block-size: 1rem;
    display: block;
    flex-shrink: 0;
}

/* ===== Burger ===== */
.header__collapse {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: .75rem;
    background: var(--brand-500);
    cursor: pointer;
    transition: all 280ms ease-in-out;
    color: var(--header-row-2-bg);
}
.header__collapse span {
    position: relative;
    display: block;
    inline-size: 1.5rem;
    block-size: .125rem;
    background: currentColor;
    transition: all 280ms ease-in-out;
}
.header__collapse span::before,
.header__collapse span::after {
    content: "";
    position: absolute;
    left: 0;
    inline-size: 1.5rem;
    block-size: .125rem;
    background: currentColor;
    transition: all 280ms ease-in-out;
}
.header__collapse span::before { inset-block-start: -.4rem; }
.header__collapse span::after  { inset-block-start: .4rem; }
.header.open .header__collapse span { background: transparent; }
.header.open .header__collapse span::before { transform: rotate(-45deg); inset-block-start: 0; }
.header.open .header__collapse span::after  { transform: rotate(45deg); inset-block-start: 0; }

/* ===== Logo ===== */
.header__logo img { block-size: 3rem; inline-size: auto; display: block; }
.header__logo .logo {
    display: block;
    inline-size: 12rem;
    max-width: 12rem;
    block-size: 3rem;
    background-color: var(--color-brand-500);
    -webkit-mask: url("/img/logo.svg") no-repeat center / contain;
    mask: url("/img/logo.svg") no-repeat center / contain;
}

/* ===== Mobile menu (sidebar) ===== */
/* Основне меню */
.menu-mobile {
    position: fixed;
    top: 4.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 4.5rem);
    background: var(--ui-surface, #fff);
    box-shadow: 2px 0 2rem rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding-inline: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    overflow-y: auto;
}
/* Відкриття меню */
.header.open .menu-mobile {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
/* Навігація */
.menu-mobile__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.menu-mobile__nav li {
    position: relative;
}
.menu-mobile__nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background: #ddd;
}
.menu-mobile__nav a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: var(--text-default, #333);
    font-weight: 500;
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.2s, color 0.2s;
}
.menu-mobile__nav a:hover {
    background: var(--ft, #f0f0f0);
}
.menu-mobile__nav a.active {
    color: var(--text-brand, #E9552FFF);
    font-weight: 600;
}

/* Каталог */
/* Кнопка каталогу */
.menu-mobile__toggle {
    margin-top: 2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.75rem;
    padding-inline: 1rem;
    border-radius: .75rem;
    color: var(--text-on-brand);
    background: var(--text-brand);
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    width: 100%;
}
.menu-mobile__toggle svg:first-child {
    width: 1.125rem;
    height: 1.125rem;
}
.menu-mobile__toggle .right {
    margin-left: auto;
    width: .875rem;
    height: .875rem;
    transition: transform .2s ease;
}
.menu-mobile__catalog.open .menu-mobile__toggle .right {
    transform: rotate(180deg);
}
/* Список категорій (плитки) */
.menu-mobile__catalog-list {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: max-height .4s ease, opacity .3s ease, transform .3s ease;
}
.menu-mobile__catalog.open .menu-mobile__catalog-list {
    max-height: 200vh;
    opacity: 1;
    transform: translateY(0);
}

/* плитка */
.menu-mobile__catalog-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-decoration: none;
    color: var(--text-default, #333);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: var(--card-bg);
}
.menu-mobile__catalog-list a:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}
.menu-mobile__catalog-list picture,
.menu-mobile__catalog-list img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: .5rem;
}
.menu-mobile__catalog-list span {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
}
.menu-mobile__catalog-list .more {
    grid-column: 1 / -1;
    text-align: center;
    padding: .75rem;
    font-weight: 600;
    color: var(--text-brand);
    text-decoration: underline;
}

/*Пошук*/
.menu-mobile__search {
    margin: 1rem 0;
    padding: 0.5rem;
    background: var(--ui-surface, #fff);
    border-radius: .5rem;
}
.menu-mobile__search .search-box {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    overflow: hidden;
    border: .0625rem solid var(--input-border);
    border-radius: .75rem;
    background: var(--input-bg);
}
.menu-mobile__search .search-box label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-inline: 1rem;
    background: transparent;
}
.menu-mobile__search .mobile_search-input {
    flex: 1 1 auto;
    min-width: 10rem;
    inline-size: 100%;
    block-size: 2.75rem;
    padding-inline: 0;
    color: var(--text-default);
    background: transparent;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    font-size: 1.125rem;
    font-weight: 300;
}
.menu-mobile__search .search-box .mobile_search-input::placeholder {
    color: var(--text-placeholder);
}
.menu-mobile__search .mobile_search-button {
    flex: 0 0 2.75rem;
    display: grid;
    place-items: center;
    margin-inline-start: 0;
    border: 0;
    border-inline-start: .0625rem solid var(--input-border);
    background: var(--text-brand);
    color: var(--text-on-brand);
    border-radius: 0 .75rem .75rem 0;
    transition: transform .2s ease;
}
.menu-mobile__search .mobile_search-button svg {
    width: 1rem;
    height: 1rem;
    fill: var(--text-on-brand);
}
.menu-mobile__search .search-result{margin-top: 2rem}
.menu-mobile__search .search-result .catalog_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.375rem, auto));
    justify-content: start;
    gap: 0.4rem;
    place-content: center;
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}


.menu-mobile__search .search-result .catalog_grid > .products-item {
    display: flex;
    height: 100%;
    min-height: 0;
}


/* lang */
.menu-mobile__lang {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0;
    padding: .25rem;
    background: var(--ui-surface);
    border-radius: .75rem;
}
.menu-mobile__lang-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-default);
    transition: background .2s ease, color .2s ease;
    flex: 1;
    text-align: center;
}
.menu-mobile__lang-item:hover { background: var(--ui-surface-2); }
.menu-mobile__lang-item.active { background: var(--brand-500); color: var(--text-on-brand); }

.menu-mobile__address {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding-block: .75rem;
    border-top: 1px solid var(--ui-border);
}
.menu-mobile__address .addres_svg { fill: var(--color-brand-500); width: 1.5rem; height: 1.5rem; }
.menu-mobile__address::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ui-border);
}

/* ===== Header catalog & search (desktop) ===== */
.header__catalog { position: relative; }
.header__catalog .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    block-size: 2.75rem;
    padding-inline: 1rem;
    border-radius: .75rem;
    color: var(--text-on-brand);
    background: var(--text-brand);
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}
.header__catalog .menu-toggle svg:first-child { inline-size: 1.125rem; block-size: 1.125rem; }
.header__catalog .menu-toggle .right { margin-inline-start: .25rem; inline-size: .875rem; block-size: .875rem; transition: transform .2s ease; }
.header__catalog .menu-toggle span { color: var(--text-on-brand); }

.header__catalog .menu-dropdown {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline-start: 0;
    min-inline-size: 22rem;
    padding: .5rem;
    background: var(--ui-surface);
    border: .0625rem solid var(--ui-border);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,0.6);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease;
}
.header__catalog.open .menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.header__catalog .menu-dropdown a {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
}
.header__catalog .menu-dropdown a:hover { background: var(--ui-surface-2); }
.header__catalog .menu-dropdown a img { width: 3rem; height: 3rem; object-fit: contain; }
.header__catalog .menu-dropdown a span { flex: 1; color: var(--text-strong); text-transform: uppercase; font-size: 1rem; }
.header__catalog .menu-dropdown .more { display: block; text-align: center; font-weight: 600; color: var(--text-brand); padding: .5rem; text-decoration: underline; }
.header__catalog.open .menu-toggle .right { transform: rotate(180deg); }

/* search box (desktop) */
.header__search {
    flex: 1 1 auto;
    min-inline-size: 14rem;
    max-width: 40vw;
    width: 100%;
    position: relative;
}
.header__search .search-box {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    overflow: hidden;
    border: .0625rem solid var(--input-border);
    border-radius: .75rem;
    background: var(--input-bg);
}
.header__search .search-box label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-inline: 1rem; background: transparent; }
.header__search .search-box input {
    flex: 1 1 auto;
    min-width: 0;
    inline-size: 100%;
    block-size: 2.75rem;
    padding-inline: 0;
    color: var(--input-fg);
    background: transparent;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    font-size: 1.125rem;
    font-weight: 300;
}
.header__search .search-box input::placeholder { color: var(--text-placeholder); }
.header__search .search-box button {
    flex: 0 0 2.75rem;
    display: grid;
    place-items: center;
    margin-inline-start: 0;
    border: 0;
    border-inline-start: .0625rem solid var(--input-border);
    background: var(--text-brand);
    color: var(--text-on-brand);
    border-radius: 0 .75rem .75rem 0;
    transition: transform .2s ease;
}
.header__search .search-box button:hover { filter: brightness(1.05); }
.header__search .search-result { display: none; }
.header__search .search-result .result-title { margin-bottom: 1.25rem; }
.header__search .search-result .result-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    overflow: auto;
    scrollbar-width: 0.25rem;
}
.header__search .search-result .result-list .item {
    padding: .75rem .5625rem;
    border-radius: .5rem;
    background: var(--ui-surface);
    border: .0625rem solid rgba(230,238,248,0.04);
}
.header__search .search-result .result-list .item-wrapper { display: flex; align-items: center; gap: .625rem; overflow: hidden; }
.header__search .search-result .result-list .item-img { width: 7.5rem; height: 5rem; }
.header__search .search-result .result-list .item-img img { width: 100%; height: 100%; object-fit: contain; }
.header__search .search-result .result-list .item-info { flex: 1; display: flex; flex-direction: column; gap: .625rem; }
.header__search .search-result .result-list .item__tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.header__search .search-result .result-list .item__tags li { color: var(--text-muted-2); font-size: 14px; font-weight: 600; text-decoration: underline; }
.header__search .search-result .result-list .item__title { font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--text-strong); }
.header__search .search-result .result-list .item_row { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.header__search .search-result .result-list .item__article { color: var(--text-muted-3); font-size: 14px; font-weight: 500; }
.header__search .search-result .result-list .item__article span { color: var(--text-brand); }
.header__search .search-result .result-list .item__price { color: var(--text-brand); font-size: calc(12px + 4 * (100vw - 320px) / 1600); font-weight: 500; line-height: 130%; }
.header__search .search-result .result-list .item__price span { color: var(--text-brand); font-size: 1.25rem; }

/* phone */
.header__phone { position: relative; }
.header__phone .phone-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    block-size: 2.5rem;
    padding-inline: .25rem;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    color: inherit;
    cursor: pointer;
}
.header__phone .phone-toggle:hover { background: var(--ui-surface-2); }
.header__phone .ico {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 auto;
    color: var(--text-brand) !important;
}
.header__phone .phone-toggle .num { font-weight: 400; font-size: 1rem; letter-spacing: .01em; min-width: 10rem; color: var(--text-default); }
.header__phone .phone-toggle .chevron { inline-size: 1rem; block-size: 1rem; margin-inline-start: .5rem; color: var(--text-muted); transition: transform .2s ease; }
.header__phone.open .phone-toggle .chevron { transform: rotate(180deg); }

.header__phone .phone-dropdown {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline-end: 0;
    width: max-content;
    max-inline-size: calc(100vw - 2rem);
    padding: .5rem 0;
    background: var(--ui-surface);
    border: .0625rem solid var(--ui-border);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,0.6);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.25rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.header__phone.open .phone-dropdown,
.header__phone .phone-toggle[aria-expanded="true"] + .phone-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.phone-dropdown li { list-style: none; }
.phone-dropdown li a {
    display: block;
    padding: .625rem 1rem;
    white-space: nowrap;
    color: var(--text-default);
    text-decoration: none;
    border-radius: .5rem;
}
.header__phone .phone-dropdown li a:hover,
.header__phone .phone-dropdown li a:focus {
    color: var(--text-brand);
    background: var(--ui-surface-2);
}

/* lang */
.header__lang { position: relative; }
.header__lang .lang-current {
    font-weight: 400;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    height: 2.5rem;
    padding: 0 .75rem;
    background-color: var(--header-row-2-bg);
    line-height: 1;
    border: 0;
    border-radius: .75rem;
    cursor: pointer;
    color: var(--text-default);
}
.header__lang .lang-current:hover { background: var(--ui-surface-2); }
.header__lang .lang-current svg { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; display: block; color: var(--text-muted); transition: transform .2s ease; }
.header__lang.open .lang-current svg { transform: rotate(180deg); }

.header__lang .lang-dropdown {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline-end: 0;
    display: none;
    width: max-content;
    min-inline-size: unset;
    max-inline-size: calc(100vw - 2rem);
    padding: .25rem;
    background: var(--ui-surface);
    border: .0625rem solid var(--ui-border);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,0.6);
    white-space: nowrap;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.25rem);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
}
.header__lang.open .lang-dropdown { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.header__lang:not(.open):hover .lang-dropdown,
.header__lang:not(.open):focus-within .lang-dropdown {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-.25rem) !important;
}
.header__lang .lang-dropdown li { list-style: none; }
.header__lang .lang-dropdown a { display: block; padding: .375rem .625rem; border-radius: .5rem; color: inherit; text-decoration: none; }
.header__lang .lang-dropdown a:hover { background: var(--ui-surface-2); }
.header__lang .lang-dropdown a.active { color: var(--text-brand); }

/* Panel icons */
.header__panel { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.panel-link__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--text-brand);
}
.panel-link__icon svg { inline-size: 2rem; block-size: 2rem; }
.panel-link__icon use { fill: none; vector-effect: non-scaling-stroke; }
.panel-link__icon > span {
    position: absolute;
    inset-block-start: -.20rem;
    inset-inline-end: -.5rem;
    padding: .100rem .3rem;
    color: var(--text-on-brand);
    background: var(--text-brand);
    font-size: 12px;
    border-radius: 9999px;
}

/* === Footer === */
.footer {
    position: relative;
    overflow: hidden;
    background: #050910; /* fallback */
    color: var(--text-inverse);
}

/* === ГРАДІЄНТ В ОКРЕМОМУ ШАРІ === */
.footer::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
            radial-gradient(
                    1000px 600px at 28% 60%,
                    color-mix(in oklab, #b32014 25%, transparent 75%),
                    transparent 90%
            ),
            radial-gradient(
                    1200px 700px at 78% 20%,
                    color-mix(in oklab, #0a2bcc 25%, transparent 75%),
                    transparent 90%
            ),
            linear-gradient(
                    to bottom,
                    #071022 0%,
                    #050910 100%
            );
    z-index: 0;
    transform: translateZ(0);
}
/* === КОНТЕНТ ПОВЕРХ ФОНУ === */
.footer > * {
    position: relative;
    z-index: 1;
}


.footer__container { width: 100%; max-width: 100rem; margin-inline: auto; padding-inline: 1.375rem; box-sizing: border-box; }
.footer-wrapper { padding-block: 3rem 2rem; }
.footer__logo img { inline-size: auto; block-size: 3.25rem; display: block; }
.footer-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-block-start: 2rem;
}
.footer-left, .footer-center, .footer-right { display: flex; flex-direction: column; gap: 1.25rem; }

/* menu */
.footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.footer__menu a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.18);
    text-underline-offset: .25rem;
}
.footer__menu a:hover { color: var(--text-brand); text-decoration-color: var(--text-brand); }
.footer__menu a.active { color: var(--text-brand); text-decoration-color: var(--text-brand); pointer-events: none; }

/* address & schedule */
.footer__text span {
    display: block;
    font-weight: 700;
    letter-spacing: .01em;
    margin-block-end: .25rem;
    color: var(--text-primary);
}
.footer__text p { margin: 0; color: var(--text-primary) !important; }

/* socials */
.footer__social span { display: block; font-weight: 700; margin-bottom: .75rem; color: var(--text-primary); }
.footer__social ul { display: flex; gap: 0.75rem; align-items: center; padding: 0; margin: 0; list-style: none; }
.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.footer__social a:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.7); }
.footer__social svg { width: 100%; height: 100%; display: block; }
.footer__social use { pointer-events: none; transform: scale(0.85); }

/* phones & email */
.footer__phones ul { list-style: none; padding: 0; margin: 0 0 .5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.footer__phones a { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.footer__phones > a { margin-block-start: .5rem; color: var(--text-brand); text-decoration: underline; }
.footer__email {
    display: inline-block;
    margin-block-start: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* copy */
.footer__copy {
    margin-block-start: 2.25rem;
    padding-block-start: 1.25rem;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-primary);
}
.footer__copy p { margin: 0; }
.footer__copy ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; }
.footer__copy a { color: inherit; text-decoration: underline; text-underline-offset: .25rem; }

/* ====== Breakpoints (unchanged structure) ====== */
/* Desktop ≤ 86.875rem (1390px)*/
@media (max-width: 86.875rem) {
    .header-bottom-wrapper { gap: 0.75rem; }
    .header__search { max-width: 40vw; }
}
/* Desktop ≤ 85rem (1330px)*/
@media (max-width: 85rem) {
    .header-bottom-wrapper { gap: 0.75rem; }
    .header__phone .phone-toggle .num { display: none !important; }
    .header__phone .phone-toggle { gap: .1rem; padding-inline: 0.3rem; }
}
/* Desktop ≤ 80rem (1280px)*/
@media (max-width: 80rem) {
    .header-top .header-top-wrapper { flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; row-gap: .5rem; min-height: auto; padding-block: .375rem; }
    .header-top .header-top-wrapper > * { width: 100%; display: flex; justify-content: center; text-align: center; }
    .header__address { white-space: normal; gap: .625rem; }
    .menu-secondary { flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
    .menu-secondary a { padding-bottom: .4375rem; }
}
/* Tablet ≤ 75rem (1200px) */
@media (max-width: 75rem) {
    .header-bottom .header-bottom-wrapper { gap: .75rem; }
    .header__logo .logo { max-width: 8rem; }
    .header__catalog .menu-toggle { block-size: 2.5rem; padding-inline: .75rem; font-size: .9375rem; }
    .header__search { block-size: 2.5rem; }
    .footer-row { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .footer-right { align-items: flex-start; }
}
/* Mobile ≤ 52rem (820px) */
@media (max-width: 52rem) {
    .panel-link__icon { inline-size: 2rem; block-size: 2rem; }
    .header-bottom .header-bottom-wrapper { gap: .5rem; }
}
/* Mobile ≤ 48rem (792px) */
@media (max-width: 48em) {
    .header-top { display: none; }
    .header__collapse { display: inline-flex; align-items: center; justify-content: center; }
    .header__search { display: none; }
    .header__lang { display: none; }
    .header__phone { display: none; }
    .header__catalog { display: none; }
    .footer-wrapper { padding-block: 2.25rem 1.5rem; }
    .header__logo .logo { max-width: 12rem; }
    .footer-row { grid-template-columns: 1fr; gap: 2rem; }
    .footer__copy { flex-direction: column; gap: .75rem; }
    .menu-mobile__search .mobile-item__add.btn span { display: none; }
}
/* Medium ≤ 700px */
@media (max-width: 43.75rem) {
    .menu-mobile__search .search-result { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
    .menu-mobile__search .mobile-item__add.btn span { display: flex; }
}
/* Small ≤ 540px */
@media (max-width: 33.75rem) {
    .header__logo .logo { max-width: 10rem; margin-left: 1rem; }
    .menu-mobile__search .mobile-item__add.btn span { display: none; }
}
/* Extra small ≤ 485px */
@media (max-width: 30rem) {
    [class*=__container] { padding: 0 0.625rem; }
    .header-bottom .header__container { padding-inline: 0.7rem 0.7rem; }
    .header-bottom .header-bottom-wrapper { gap: .15rem; }
    .menu-mobile { width: 100vw; }
    .header__logo .logo { margin-left: 0.2rem; }
    .header__search .search-result .result-list .item-wrapper { flex-direction: column; }
    .header__search .search-result .result-list .item-img { width: 100%; height: auto; aspect-ratio: 16/9; }
    .header-bottom-wrapper > :not(.header__logo):not(.header__collapse):not(.header__panel) { display: none; }
    .menu-mobile__search .search-result { grid-template-columns: repeat(1, minmax(150px, 1fr)); }
}
@media (max-width: 27.75rem) {
    .menu-mobile__search .mobile-item__add.btn span { display: flex; }
}

/* End of file */