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

/* ===== CSS Custom Properties ===== */
:root {
    --bg: #ffffff;
    --bg-page: #f8fafc;
    --alt-bg: #1A1B20;
    --fast-filter-bg:#ffffff;
    --fg: #0f172a;
    --ft: #ffffff;
    --graybg: #1A1B20;
    --brand-400: #FF8904FF;
    --brand-500: #e9552f;
    --brand-600: #652414;
    --ui-surface: #ffffff;
    --ui-surface-2: #f1f5f9;
    --ui-border: rgba(2, 6, 23, .12);
    --ui-muted: rgba(2, 6, 23, .62);
    --border-color: rgba(2, 6, 23, .16);
    --input-bg: #ffffff;
    --card-bg: #ffffff;
    --input-fg: #0f172a;
    --input-border: rgba(2, 6, 23, .16);
    --radius: 1rem;
    --header-row-2-bg: #ffffff;
    --ico-bold: 1.4;
    /* Aliases */
    --color-bg: var(--bg);
    --color-bg-page: var(--bg-page);
    --color-fg: var(--fg);
    --color-brand-400: #FF8904FF;
    --color-brand-400-rgb: 255, 137, 4;
    --color-brand-500: var(--brand-500);
    --color-brand-500-rgb: 233, 85, 47;
    --radius-xl: var(--radius);
    --light-bg: #f1f5f9;

    /* ===== New text-only variables ===== */
    --text-primary: var(--fg);
    --text-default: var(--fg);
    --text-strong: #191919;
    --text-inverse: var(--ft);
    --text-muted: var(--ui-muted);
    --text-muted-2: #6D6D6D;
    --text-muted-3: #7A7A7A;
    --text-weak: #999;
    --text-placeholder: #474747;
    --text-brand: var(--color-brand-500);
    --text-on-brand: var(--ft);
    --text-accent: var(--color-brand-400);
    --text-success: #155724;
    --text-success-bg: #d4edda;
    --text-danger: #721c24;
    --text-danger-bg: #f8d7da;
}

/* ===== Base ===== */
html,
body {
    background: var(--bg-page) !important;
    color: var(--text-default) !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);
    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 {
    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: .0625rem solid var(--ui-border);*/
    border-radius: .75rem;
    background: var(--brand-500);
    cursor: pointer;
    transition: all 280ms ease-in-out;
    color: var(--text-on-brand)
}
.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: #fff;
}
.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, #f8f8f8);
    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, #333);
    transition: background .2s ease, color .2s ease;
    flex: 1;
    text-align: center;
}
.menu-mobile__lang-item:hover {
    background: var(--ui-surface-2, #eaeaea);
}
.menu-mobile__lang-item.active {
    background: var(--color-brand-500, #007bff);
    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, #ddd);
}
.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, #ddd);
}

/* ===== Header  ===== */
/* catalog */

.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(--bg);
    border: .0625rem solid var(--ui-border);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
    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 */
.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(--text-default);
    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 {
    background: #f97316;
}
.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 #DFDFDF;
}
.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;
}
.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(15, 23, 42, .12);
    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(--ui-surface);
    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(15, 23, 42, .12);
    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: #0b1220;
    color: var(--text-inverse);
}
.footer::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
            radial-gradient(
                    1600px 900px at 28% 60%,
                    color-mix(in oklab, #b32014 40%, transparent 60%),
                    transparent 80%
            ),
            radial-gradient(
                    1800px 1000px at 78% 20%,
                    color-mix(in oklab, #0a2bcc 40%, transparent 60%),
                    transparent 85%
            ),
            #0b1220;
    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-inverse);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    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-inverse);
}
.footer__text p {
    margin: 0;
    color: var(--text-inverse) !important;
}
/* socials */
.footer__social span {
    display: block;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--text-inverse);
}

.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,.1);
    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,.15);
}

.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-inverse);
    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-inverse);
}
/* 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-inverse);
}
.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 ====== */
/* 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 ≤ 50rem (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;
    }

}
/* Medium ≤ 700px */
@media (max-width: 43.75rem) {

}
/* Small ≤ 540px */
@media (max-width: 33.75rem) {
    .header__logo .logo {
        max-width: 10rem;
        margin-left: 1rem;
    }

}
/* 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;
    }

}
 /*Extra small ≤ 444px */
@media (max-width: 27.75rem) {
    .menu-mobile__search .mobile-item__add.btn span {
        display: flex;
    }
}