/*! mtf-bundle: common (cc707f5cbd) */

/* === style.css === */
/*Default styles*/
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
body {
    font-family: var(--font-body);
    font-weight: 600;
    margin: 0;
	padding: 0;
    color: #212529;
    background-color: #fff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number]{
    -moz-appearance: textfield;
}
ul {
    margin: 0;
}
a {
    color: black;
    text-decoration: none;
}

/*Default classes*/
section, .container_outer {
    max-width: 1440px;
    margin: 0 auto;
}
.w-100 {
	width: 100%;
}
.p_default {
    padding: 56px 152px;
}
.bg_color_F7F7F7 {
    background-color: #F7F7F7;
}
.bg_color_F15A29 {
    background-color: #F15A29;
}
.fs_16_lh_24 {
    font-size: 1rem;
    line-height: 1.5rem;
}
.d_flex_flex_d_column {
    display: flex;
    flex-direction: column;
}
.d_block {
    display: block !important;
}
.gap_16 {
    gap: 16px;
}
.gap_32 {
    gap: 32px;
}
.default_button {
    background-color: #F15A29;
    color: white;
    border: none;
}
.h_type_1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.5rem;
}
/* Static pages (Покупателям / Контакты / Оплата / Доставка / Гарантия) used to
   render their page heading as <div class="h_type_1">, so those pages shipped
   with no <h1> at all — the only headings in the DOM came from the promo popup.
   The tag is now a real <h1>; kill the browser's default h1 margin so the
   layout stays pixel-identical to the div it replaced. */
h1.h_type_1 {
    margin: 0;
}
.h_type_2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.5rem;
}
.h_type_3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}
.slider {
    display: none;
}
.mt_16 {
    margin-top: 16px !important;
}
.border_1px{
	border: 1px solid rgba(0, 0, 0, 0.15);
}
.image_second {
	display: none;
}
.item_card_plug {
	background-color: transparent !important;
	border: none !important;
}
.warn_button {
	color: black;
	border-color: red;
}
.horizontal-shake {
  animation: horizontal-shaking 0.35s 1;
}
@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

/*Header*/
#header {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    color: #666666;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03rem;
    /* Stack header (and its dropdowns) above everything else, including the
       single-product image zoom on .zoooom (which uses CSS transform:scale
       on hover and was eating mouse events through the dropdown menu). */
    /* Sticky (28.08.2026): search/cart stay reachable while scrolling the
       catalog on desktop — mobile already has the fixed mobbar. Opaque bg
       so content doesn't show through; the promo topbar above simply
       scrolls away first. */
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #efefef;
    z-index: 9999;
}
#header i{
    font-size: 2rem;
    color: black;
    cursor: pointer;
}
#header nav {
    width: auto;
    flex: 0 1 auto;
    height: 32px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    column-gap: clamp(6px, 1vw, 22px);
    align-items: center;
    padding: 0;
    min-width: 0;
}
#header nav a { white-space: nowrap; }
/* Все элементы шапки строго по вертикали центрируются, лого без baseline-сдвига. */
#header > * { align-self: center; }
#header > a img { display: block; }
#header nav a {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
#header nav .up_link {
    text-transform: uppercase;
    color: inherit;
    padding: 8px;
}
#header nav .up_link:hover {
    background-color: #F2F2F2;
    border-radius: 8px;
    color: black;
}
#header nav .parent_link {
    display: flex;
    gap: 7px;
    align-items: center;
    position: relative;
}
#header nav .parent_link i {
    font-size: 0.42rem;
    transition: all 0.2s ease-in-out;
}
#header nav .parent_link:hover i {
    transform: rotate(180deg);
}
#header nav .dropdown {
    position: relative;
}
#header nav .dropdown:hover .dropdown-menu,
#header nav .dropdown:focus-within .dropdown-menu {
    /* a11y: keyboard users can Tab into the dropdown trigger and have the
       menu reveal (focus-within); was hover-only, hiding the menu from
       keyboard nav entirely. */
    display: block;
}
#header nav .parent_link:focus-visible {
    outline: 2px solid #F15A29;
    outline-offset: 2px;
    border-radius: 4px;
}
#header nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* z-index 99999: sits above the product-page zoom overlay + filter
       drawer (z-index 10000). Must NOT exceed promo popup unless we want
       to obscure it (popup is z-index 9999, header sits +1 higher). */
    z-index: 99999;
    background-color: white;
    padding: 12px;
    border: 1px solid #F2F2F2;
    border-radius: 16px;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    width: 277px;
}
#header nav .dropdown-menu .wrapper {
    padding: 12px 0;
}
#header nav .dropdown-menu a {
    padding: 0 12px;
    color: #666666;
    display: block;
}
/* Divider between "Спортивная/Повседневная" and sub-categories — kept only
   for the "Обувь" dropdown where it separates the type-filter from the
   actual shoe categories. Other dropdowns (Одежда / Аксессуары / etc.) get
   the marker class only when explicitly tagged in header.php. */
#header nav .dropdown.dropdown--shoes .dropdown-menu .wrapper:nth-child(2) {
    border-bottom: 1px solid #666666;
}
#header nav .dropdown-menu a:hover {
    color: black;
}

/*XS Header*/
#xs_header {
    height: 56px;
    display: none;
    position: relative;
    /* Logo moved from background-image to real <a><img> for clickability
       (2026-05-18). Background CSS retained for legacy override below = none. */
}
.xs-header-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.xs-header-logo-link img { width: 32px; height: 32px; }
#xs_header .burger {
    cursor: pointer;
    margin-left: 16px;
}
#xs_header .burger .cake {
    width: 100%;
    height: 2px;
    background-color: black;
    border-radius: 10px;
}

/*Search*/
#search_container {
    display: none;
}
.plug-overlay-mobile {
    position: absolute;
    left: -500px;
    top: 0;
    bottom: 0;
    width: 0;
    background: #fff;
	transition: width .5s ease;
}
.plug-overlay-mobile * {
    box-sizing: border-box;
}
.plug-overlay-mobile-header {
    display: flex;
    height: 45px;
/*     width: 0; */
}
.plug-overlay-mobile-header .svg-container {
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
/* 	width: 0; */
}
.plug-overlay-mobile-header .svg-container svg {
    width: 17px;
    height: 17px;
    fill: black;
	width: 0;
}
.plug-overlay-mobile-header .label-container {
    padding: 20px;
    display: flex;
    align-items: center;
/* 	width: 0; */
}
.plug-overlay-mobile-header .label-container span {
    font-family: var(--font-body);
    font-size: 16px;
    color: gray;
    font-weight: 400;
/* 	width: 0; */
}

/*XS Menu*/
#xs_menu .cover_screen_items {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
	padding-bottom: 24px;
}
/* #xs_menu .menu_title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
} */
#xs_menu .menu_item {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
}
#xs_menu .menu_item .submenu_title {
	display: flex;
    justify-content: space-between;
    align-items: center;
}
#xs_menu .menu_item .submenu_title i {
	transition: all 0.5s ease-in-out;
}
#xs_menu .menu_item .submenu_items {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
	display: none;
}
#xs_menu .menu_item .submenu_items a {
    text-decoration: none;
    color: #666666;
    display: block;
    padding: 8px;
}
/* Mobile menu divider — only for "Обувь" (between Спортивная/Повседневная
   and the sub-categories like Беговые / Скоростные). Other menu items have
   no divider unless flagged with `menu_item--shoes`. */
#xs_menu .menu_item--shoes .submenu_items a:nth-child(2) {
    border-bottom: 1px solid rgb(204, 204, 204);
}
.menu_cover_screen {
    width: 0;
    position: absolute;
    top: 0;
	bottom: 0;
    left: 0;
    z-index: 15;
    background-color: white;
	overflow: auto;
	transition: all .5s ease;
}

/*Footer*/
#footer {
    background-color: black;
}
#footer .label {
	width: 100%; 
	text-align: center; 
	margin-top: 20px;
	text-transform: uppercase;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.3);
}
#footer .logo {
    display: flex;
    justify-content: center;
}
#footer .logo:first-child {
    padding-bottom: 32px;
}
#footer .logo:last-child {
    padding-top: 20px;
}
#footer nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding: 32px 0;
}
#footer nav a {
    color: #FFFFFF;
    opacity: 0.65;
    text-decoration: none;
}
#footer nav .nav_col {
    gap: 12px;
    line-height: 1.1875rem;
    letter-spacing: 0.04rem;
}
#footer .nav_col_title {
    font-weight: 600;
    text-transform: uppercase;
    color: white;
}
#footer .nav_col_links {
    gap: inherit;
    font-weight: 400;
}

/*Breadcrumb*/
.breadcrumb {
    display: flex;
    padding: 8px 152px 0;
    align-items: center;
}
.breadcrumb a {
    text-decoration: none;
    color: #999999;
    font-weight: 400;
    line-height: 1.5rem;
}
.breadcrumb a[data-flag="back"] {
    text-decoration: underline;
}
.breadcrumb .divider {
    height: 2px;
    width: 24px;
    background-color: #999999;
    margin: 0 16px;
}

/*Contact form*/
.section_contact_form {
    align-items: center;
}
.section_contact_form .form_description {
    line-height: 1.5rem;
    font-weight: 500;
    /* Fixed 469px overflowed 441-533px viewports (horizontal body scroll). */
    width: min(469px, 100%);
    text-align: center;
}
.section_contact_form form {
    width: min(410px, 100%);
    padding-top: 8px;
    gap: 16px;
}
.section_contact_form form .form_row label{
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    gap: 8px;
}
.section_contact_form form .form_row input,
.section_contact_form form textarea{
    border: 1px solid #E6E6E6;
    font-family: inherit;
}
.section_contact_form form input,
.section_contact_form form textarea,
.section_contact_form form button {
    padding: 16px 24px;
    border-radius: 16px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.section_contact_form form input,
.section_contact_form form textarea {
    font-weight: 400;
    line-height: 1.55rem;
}
.section_contact_form form textarea {
    height: 128px;
    resize: none;
}
/*Pagination — legacy block intentionally empty; modern styles below (~2598).*/

/*Accordion*/
.accordion-item {
    padding: 32px;
    border-radius: 32px;
    border: 1px solid #E6E6E6;
    background-color: white;
}
.accordion-button {
    border: none;
    background-color: white;
    cursor: pointer;
    width: 100%;
    padding: 0;
    display: flex;
	color: black;
    justify-content: space-between;
    font-size: 1.25rem;
    line-height: 2rem;
    align-items: center;
}
.accordion-button::after {
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-position: center;
    background-image: url(../img/arrow_top.svg);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.accordion-button i {
    font-size: 0.55rem;
}
.accordion-body {
    padding-top: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #666666;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}
.collapse:not(.show) {
    display: none;
}

/*Item card*/
.items_card {
    gap: 16px;
    align-items: center;
    padding-bottom: 24px;
	width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 32px;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
}
.items_card a {
    text-decoration: none;
    color: black;
	display: flex;
    flex-direction: column;
    height: 100%;
}
.items_card img {
    border-radius: 32px 32px 0 0;
    /* Обувь-фото — студийный шот на белом. cover резал носок/пятку по краям.
       contain + минимальный отступ = кроссовок целиком, вытянут почти во всю
       ширину/высоту карточки, белый фон едино со студийным (2026-08-26). */
    object-fit: contain;
    object-position: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-color: #fff;
    padding: 6px 10px 0;
    box-sizing: border-box;
    display: block;
}
/* Gadgets (Garmin / Oura / Whoop) and eyewear (Oakley) — product photos are
   square studio shots where the device is centred but tightly framed. cover
   crops them, so the watch/ring/glasses get cut off at the edges. Use
   `contain` + slight padding to show the whole device with breathing room. */
/* On apparel — full-body portrait model shots (~4:5). A 1:1 cover frame crops
   the model's head off the top. Use a taller 3:4 frame anchored to the TOP so
   the head is always visible; feet may crop instead (acceptable, on.com does
   the same). Neutral bg matches the studio backdrop. */
.items_card[data-kind="onwear"] img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    background-color: #f4f4f5;
}
/* onwear hover = data-second src-swap (theme JS), same as other cards. */
.items_card[data-kind="gadget"] img,
.items_card[data-kind="eyewear"] img {
    object-fit: contain;
    padding: 18px;
    box-sizing: border-box;
    background-color: #fff;
}
@media (max-width: 700px) {
    .items_card[data-kind="gadget"] img,
    .items_card[data-kind="eyewear"] img {
        padding: 10px;
    }
}
/* TF CLO product photos are studio shots with the model in the middle ~50%
   of the frame (white space on each side baked into the photo, not CSS).
   object-fit: cover does its job, but the photo content itself includes
   white margins. Zoom in slightly so the model fills more of the card. */
.items_card[data-brand-slug="tf-clo"] .image_wrapper {
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    display: block;
}
.items_card[data-brand-slug="tf-clo"] img {
    transform: scale(1.35);
    transform-origin: center 35%;
}
.items_card .items_card_description {
    padding: 12px 14px 14px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* Product title — PRIMARY element (product identity) */
.items_card .items_card_description > div:nth-child(1) {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Price — SECONDARY element with brand accent color */
.items_card .items_card_description > div:nth-child(2) {
    font-size: 18px;
    font-weight: 700;
    color: #F15A29;
    line-height: 1.2;
    margin-top: auto;
}
/* Split-payment badge (BNPL) — TERTIARY, muted so doesn't compete with price */
.items_card .card_split_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
    padding: 3px 9px;
    background: #f5f5f5;
    color: #888;
    border: 1px solid #e6e6e6;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.1px;
    white-space: nowrap;
    align-self: center;
}
.items_card .card_split_badge::before {
    content: "₽";
    display: inline-block;
    width: 13px;
    height: 13px;
    background: #aaa;
    color: #fff;
    border-radius: 50%;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .items_card .items_card_description {
        padding: 10px 10px 12px;
        gap: 4px;
    }
    .items_card .items_card_description > div:nth-child(1) {
        font-size: 15px;
        min-height: 2.4em;
    }
    .items_card .items_card_description > div:nth-child(2) {
        font-size: 17px;
    }
    .items_card .card_split_badge {
        font-size: 11px;
        padding: 3px 8px;
    }
    .items_card .card_split_badge::before {
        width: 13px;
        height: 13px;
        font-size: 9px;
        line-height: 13px;
    }
}
/* Reduce gap between cards on mobile (was 24px → tight on 375px viewport) */
@media (max-width: 541px) {
    .catalog_main .catalog_list .mobile_catalog_list_items .row {
        column-gap: 12px;
    }
    .sel-grid .row,
    .sel-grid .row .items_card {
        column-gap: 10px;
    }
}

/*Grid for section*/
.grid {
    gap: 24px;
}
.grid .grid_line{
    display: flex;
    justify-content: space-between;
}
.grid .grid_line .grid_line_item {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 500ms linear;
}

/*SECTIONS*/
/*Section logo (index page)*/
.section_logo {
    align-items: center;
    gap: 16px;
    line-height: 1.1875rem;
}
.section_logo img {
    height: 120px;
    width: 192px;
}
/* Visible H1 — replaces previous hidden+keyword-stuffed h1
   (Yandex risk for cloaking signal). Single semantic heading,
   visual size matches old <span> for layout parity. */
.section_logo .hero-title {
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}
@media (min-width:768px) {
    .section_logo .hero-title { font-size: 16px; }
}
/* Hero trust row + CTA (added to fill empty home hero with UTP/CTA).
   Inside .section_logo (flex column, align-items:center, gap:16px) so the
   row and button inherit centering and vertical rhythm automatically. */
.section_logo .hero-trust {
    list-style: none;
    margin: -4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #757575;
}
.section_logo .hero-trust li {
    position: relative;
    white-space: nowrap;
}
.section_logo .hero-trust li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: #c9c9c9;
}
.section_logo .hero-cta {
    display: inline-block;
    padding: 14px 36px;
    border-radius: var(--radius-md, 16px);
    background-color: #F15A29;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}
@media (min-width:768px) {
    .section_logo .hero-trust { font-size: 15px; }
}
/*Search page*/
.all_search .row {
	display: flex;
    flex-wrap: wrap;
	margin-top: 12px;
}
.all_search .row .col:first-child {
	margin-right: 20px;
}
.all_search .col {
	flex: 1 0 0%;
}
.all_search .item_card {
    border: 1px solid #e6e6e6;
    border-radius: 32px;
}
.all_search .item_card .col-md-auto {
    padding-left: 0 !important;
}
.all_search .item_image{
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 32px;
    display: flex;
    align-items: center;
	background-color: white;
}
.all_search .item_text {
    padding: 16px;
    font-weight: 500;
}
.all_search .pagination_container {
	margin-top: 2%;
}
/*Section choose (index page)*/
.section_choose {
    display: flex;
    justify-content: space-between;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
	padding-top: 0 !important;
}
.section_choose div {
    width: 556px;
    height: 383px;
    border-radius: 48px;
    padding: 0 16px 16px;
    justify-content: flex-end;
    background-size: 110%;
    transition: all 500ms ease-in-out;
}
.section_choose div:hover{
    background-size: 120%;
}
.section_choose a {
    color: black;
    text-decoration: none;
}
.section_choose span {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 72px;
    border-radius: 32px;
	transition: all .3s ease-in-out
}
.section_choose span:hover {
	color: white;
	background-color: #F15A29;
}
/*Section items_title_another (index page)*/
.items_title_another .title_another {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.items_title_another .title_another .see {
    padding: 16px 24px;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    border-radius: 16px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
}
.items_title_another .title_another .see i {
    font-size: 1.5rem;
}
.items_title_another .default_button.xs_show {
    margin: 0 4px;
    padding: 16px 24px;
    display: none;
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
}
.items_title_another .default_button.xs_show i {
    font-size: 1.5rem;
}
.items_title_another .items {
    display: flex;
    justify-content: space-between;
}

/*Section brands (index page)*/
.section_slider_brands .grid .grid_line .grid_line_item{
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center;
    width: 266px;
    height: 160px;
    border-radius: 2rem;
    background-color: #F2F2F2;
}
.section_slider_brands .grid .grid_line .grid_line_item:hover{
    background-size: 58% auto;
}
/* Per-brand logo sizing — On/Hoka/AJ have different aspect ratios from SVG-based logos */
/* On logo file is portrait (cropped 28.08.2026 — old canvas was 62% empty
   padding), so size it by tile height, not width. */
.section_slider_brands .grid .grid_line a[href*="/brand/on_running/"] .grid_line_item{
    background-size: auto 52%;
}
.section_slider_brands .grid .grid_line a[href*="/brand/on_running/"] .grid_line_item:hover{
    background-size: auto 60%;
}
.section_slider_brands .grid .grid_line a[href*="/brand/hoka/"] .grid_line_item{
    background-size: 60% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/hoka/"] .grid_line_item:hover{
    background-size: 68% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/air-jordan/"] .grid_line_item,
.section_slider_brands .grid .grid_line a[href*="/brand/puma/"] .grid_line_item{
    background-size: 38% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/new-balance/"] .grid_line_item,
.section_slider_brands .grid .grid_line a[href*="/brand/new_balance/"] .grid_line_item{
    background-size: 62% auto;
}
/* Featured TF CLO tile — own brand of apparel, separate row from footwear logos.
   Text-based tile (no SVG mark yet) with subtitle so visitors understand
   what TF CLO is at a glance. Wider, slightly taller, dark background to
   contrast with the grey footwear tiles above. */
.section_slider_brands .grid_line--featured {
    margin-top: 16px;
    justify-content: center;
}
.brand-tile-tfclo {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
}
.brand-tile-tfclo__inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    height: 160px !important;
    border-radius: 2rem !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%) !important;
    color: #fff;
    padding: 0 24px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.brand-tile-tfclo:hover .brand-tile-tfclo__inner {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.brand-tile-tfclo__mark {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}
.brand-tile-tfclo__dot {
    color: #F15A29;
    font-weight: 900;
}
.brand-tile-tfclo__sub {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .brand-tile-tfclo__inner { height: 110px !important; }
    .brand-tile-tfclo__mark { font-size: 28px; }
    .brand-tile-tfclo__sub { font-size: 11px; }
}
.section_slider_brands .grid .grid_line a[href*="/brand/adidas/"] .grid_line_item{
    background-size: 42% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/nike/"] .grid_line_item{
    background-size: 44% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/asics/"] .grid_line_item{
    background-size: 58% auto;
}

/*Section category (index page)*/
.section_category .grid .grid_line .grid_line_item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: 110%;
    width: 100%;
    height: 100%;
    border-radius: 48px;
    padding: 16px;
}
.section_category .grid .grid_line a {
	width: 362px;
    height: 240px;
}
.section_category .grid .grid_line .grid_line_item:hover{
    background-size: 120%;
}
.section_category .grid .grid_line .grid_line_item span {
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 24px 0;
    border-radius: 32px;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
	transition: all 0.3s ease-in-out;
}
.section_category .grid .grid_line .grid_line_item span:hover{
	background-color: #F15A29;
    color: white;
}
.section_category .mobile_grid {
    display: none;
}

/*Section order*/
/* z-index 20000 must beat catalog_cover_screen (10000) and any sticky header.
   Was 1000 — modal rendered BEHIND mobile filter drawer, blocking checkout. */
#order_screen {
    position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, .8);
}
#order_screen .order_screen_form {
    margin: 65px auto;
    width: 450px;
    background-color: white;
    border-radius: 32px;
    padding: 32px;
	position: relative;
}
#order_screen .order_screen_form .icon-cross {
    border-radius: 50%;
    background-color: #F2F2F2;
    width: 32px;
    display: flex;
    height: 32px;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
}
#order_screen .order_screen_form h1 {
    text-align: center;
    margin: 0 0 16px 0;
}
#order_screen .order_screen_form .sub_title {
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    padding: 0 32px;
}
#order_screen .order_screen_form .product_preview {
    background-color: #F7F7F7;
    border-radius: 16px;
    display: flex;
    column-gap: 8px;
    margin-top: 24px;
    padding: 8px;
}
#order_screen .order_screen_form .product_preview img {
    width: 72px;
    height: 72px;
    object-fit: contain;
	border-radius: 12px;
	background-color: white;
}
#order_screen .order_screen_form .product_preview .product_preview_description {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 24px;
}
#order_screen .order_screen_form form {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    margin-top: 24px;
}
#order_screen .order_screen_form form label {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
#order_screen .order_screen_form form input.element,
#order_screen .order_screen_form form select.element {
    border: 1px solid #E6E6E6;
    background-color: #F7F7F7;
    outline: none;
	font-weight: 400;
}
#order_screen .order_screen_form form select.element {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background: #F7F7F7 url('../img/arrow-bottom.svg') no-repeat 92% 50%;
}
#order_screen .order_screen_form form .form_delivery_element {
	font-weight: 400;
	display: flex;
	justify-content: space-between;
    align-items: center;
	font-size: 14px;
}
#order_screen .order_screen_form form .form_delivery_element input {
	padding: 0 !important;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
	background-color: white;
}
#order_screen .order_screen_form form .form_delivery_element input:checked {
	background-color: #F15A29;
}
#order_screen .order_screen_form form .form_delivery_element input:checked:after {
    content: '\2713';
    color: white;
}
.form_row .policy,
#order_screen .order_screen_form .policy {
	display: flex;
	align-items: center;
	column-gap: 10px;
	font-size: 0.8rem;
	font-weight: 400;
    color: gray;
}
.form_row .policy input,
#order_screen .order_screen_form .policy input {
	padding: 0 !important;
	min-width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.form_row .policy input:checked,
#order_screen .order_screen_form .policy input:checked {
	background-color: #F15A29
}
.form_row .policy input:checked:after,
#order_screen .order_screen_form .policy input:checked:after {
    content: '\2713';
    color: white;
}
.form_row .policy .policy-link,
#order_screen .order_screen_form .policy .policy-link {
	text-decoration: underline;
	position: static;
	color: gray;
}
select.element::-ms-expand {
    display: none;
}
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
	color: black;
}
#order_screen .order_screen_form .element {
    line-height: 1.5rem;
    padding: 16px 24px;
    border-radius: 16px;
    width: 100%;
	font-size: 1rem;
}
#order_screen .order_screen_form button {
	font-weight: 600;
	cursor: pointer;
	display: flex;
    align-items: center;
    justify-content: center;
}
.section_contact_form form button:disabled,
#order_screen .order_screen_form button:disabled {
	opacity: 0.5;
}
#order_screen .order_screen_form button .loader_container {
    background-color: transparent;
    height: 1.5rem;
    width: 105px;
    display: flex;
    position: relative;
	align-items: center;
}
#order_screen .order_screen_form button .loader_container .loader_circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    animation: move 500ms linear 0ms infinite;
    margin-right: 30px;
}
#order_screen .order_screen_form button .loader_container .loader_circle:first-child {
    position: absolute;
    top: 0.3rem;
    left: 0;
    animation: grow 500ms linear 0ms infinite;
}
#order_screen .order_screen_form button .loader_container .loader_circle:last-child {
    position: absolute;
    top: 0.3rem;
    right: 0;
    margin-right: 0;
    animation: grow 500ms linear 0s infinite
}
@keyframes grow {
    from {transform: scale(0,0); opacity: 0;}
    to {transform: scale(1,1); opacity: 1;}
}

@keyframes move {
    from {transform: translateX(0px)}
    to {transform: translateX(45px)}
}

/*Section product (product page)*/
.single_product section:last-child {
    padding-top: 24px;
}
.section_product {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6E6E6;
}
.XS_info {
    display: none;
}
.XS_info .title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}
.XS_info .price {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #F15A29;
    /* 07.09.2026: было 6px — название модели в две строки почти упиралось
       в цену, блок читался как один абзац. */
    margin-top: 12px;
}
.XS_info .articul,
.XS_info .color {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}
.XS_info .articul {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    color: #666666;
}
.XS_info .color {
    margin-bottom: 16px;
}
.section_product .product_images {
    gap: 24px;
    max-width: 556px;
}
.section_product .product_images img{
    border-radius: 32px;
	background-color: white;
}
/* Reserve a square box for the main image so swapping src on thumbnail
   click doesn't collapse the layout while the new image loads. Without
   aspect-ratio the surrounding info card jumps every time a thumbnail is
   tapped. */
.section_product .product_images #main_img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: opacity 0.18s ease-out;
}
/* On apparel: photos are 4:5 portrait — a square `contain` frame leaves ugly
   white side bars. Use a portrait frame that fills edge-to-edge (On-style). */
.mtf-onwear-product .section_product .product_images #main_img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    background: #f4f4f5;
    border-radius: 20px;
}
.mtf-onwear-product .section_product .product_images .gallery img {
    object-fit: cover;
    aspect-ratio: 3 / 4;
    height: auto;
    width: 46px;
}
/* On-apparel RU/INT unit label — was hitting the legacy orange style. Make it a
   quiet neutral badge (it's informational, not a real toggle for apparel).
   Full path + mtf-onwear-product prefix to beat the legacy .active rule. */
.mtf-onwear-product .section_product .product_info .size .size_label .toggle_sizes button,
.mtf-onwear-product .section_product .product_info .size .size_label .toggle_sizes .active:not(.size_button) {
    background: #f3f3f3;
    color: #666;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: default;
}
/* ── On-style accordions (Size chart / Shipping) — animated open/close ── */
.mtf-accgroup { margin: 20px 0 4px; border-top: 1px solid #ececec; }
.mtf-acc { border-bottom: 1px solid #ececec; }
.mtf-acc__head {
    width: 100%; display: flex; align-items: center; gap: 11px;
    background: none; border: 0; cursor: pointer; text-align: left;
    padding: 17px 2px; font-size: 15px; font-weight: 600; color: #111;
    font-family: inherit;
}
.mtf-acc__head:hover { color: #000; }
.mtf-acc__label { flex: 1; }
.mtf-acc__ico { width: 19px; height: 19px; flex: 0 0 auto; background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='2'/%3E%3Cpath d='M6 7v4M10 7v6M14 7v4M18 7v6'/%3E%3C/svg%3E"); }
.mtf-acc__ico--ship { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='18.5' cy='18.5' r='2'/%3E%3C/svg%3E"); }
.mtf-acc__plus { width: 15px; height: 15px; position: relative; flex: 0 0 auto; }
.mtf-acc__plus::before, .mtf-acc__plus::after { content: ''; position: absolute; background: #F15A29; }
.mtf-acc__plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.mtf-acc__plus::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); transition: transform .3s ease; }
.mtf-acc.is-open .mtf-acc__plus::after { transform: translateX(-50%) scaleY(0); }
.mtf-acc__body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.mtf-acc__inner { padding: 0 2px 20px; font-size: 14px; color: #444; line-height: 1.6; }
.mtf-acc__inner p { margin: 0 0 10px; }
.mtf-onsize__scroll { overflow-x: auto; margin-bottom: 4px; }
.mtf-onsize__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 340px; }
.mtf-onsize__table th, .mtf-onsize__table td { border: 1px solid #ececec; padding: 8px 10px; text-align: center; }
.mtf-onsize__table thead th { background: #0a0a0a; color: #fff; font-weight: 600; }
.mtf-onsize__table tbody th { background: #f6f6f6; font-weight: 700; }
.mtf-onsize__table tbody tr:nth-child(even) td { background: #fafafa; }
.mtf-onsize__how { margin: 15px 0 6px; font-size: 13.5px; color: #222; }
.mtf-onsize__how-list { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: #555; line-height: 1.55; }
.mtf-onsize__note { font-size: 12.5px; color: #888; line-height: 1.45; }
/* Description accordion — larger, readable body */
.mtf-desc-acc { margin-top: 8px; }
.mtf-desc-acc .mtf-accgroup { border-top: 0; }
.mtf-acc__inner--desc { font-size: 14.5px; color: #333; }
.mtf-acc__inner--desc ul { margin: 8px 0; padding-left: 18px; }
.mtf-acc__inner--desc li { margin: 3px 0; }
.mtf-acc__inner--desc p { margin: 0 0 10px; }

/* ── On-style gallery: vertical thumbnail rail left of the main image (desktop) ── */
@media (min-width: 993px) {
    .mtf-onwear-product .section_product .product_images {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        grid-template-areas: "thumbs main" "cats cats" "color color" "outfit outfit";
        column-gap: 14px;
        row-gap: 14px;
        align-items: start;
    }
    .mtf-onwear-product .section_product .product_images .mtf-outfit { grid-area: outfit; }
    .mtf-onwear-product .section_product .product_images #main_img { grid-area: main; margin: 0; }
    .mtf-onwear-product .section_product .product_images .gallery {
        grid-area: thumbs;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 66px;
        overflow: visible;
        padding: 0;
    }
    .mtf-onwear-product .section_product .product_images .gallery img {
        width: 66px;
        aspect-ratio: 3 / 4;
        border-radius: 10px;
        border: 1px solid #eee;
    }
    .mtf-onwear-product .section_product .product_images .gallery img:hover {
        border-color: #111;
    }
    .mtf-onwear-product .section_product .product_images .cats { grid-area: cats; }
    .mtf-onwear-product .section_product .product_images .color-swatches { grid-area: color; }
}
/* «Собери образ» — complete-the-look block */
.mtf-outfit { margin-top: 24px; }
.mtf-outfit__title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 16px; color: #0a0a0a; }
.mtf-outfit__block { margin-bottom: 20px; }
.mtf-outfit__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: #111; margin: 0 0 11px; }
.mtf-outfit__head svg { color: #F15A29; flex: 0 0 auto; }
.mtf-outfit__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mtf-outfit__card { text-decoration: none; color: inherit; display: block; }
.mtf-outfit__imgwrap { position: relative; aspect-ratio: 3 / 4; background: #f4f4f5; border-radius: 12px; overflow: hidden; }
.mtf-outfit__imgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .45s ease; }
.mtf-outfit__card:hover .mtf-outfit__imgwrap img { transform: scale(1.05); }
.mtf-outfit__tag { position: absolute; left: 7px; top: 7px; background: rgba(10,10,10,.85); color: #fff;
    font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; letter-spacing: .02em; }
.mtf-outfit__name { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin: 9px 0 3px; color: #1a1a1a; }
.mtf-outfit__price { font-size: 13px; font-weight: 800; color: #0a0a0a; }
@media (max-width: 600px) { .mtf-outfit__row { gap: 9px; } .mtf-outfit__name { font-size: 12px; } }
.section_product .product_images #main_img.is-swapping {
    opacity: 0.55;
}
.section_product .product_images .gallery img {
    width: 56px;
    height: 56px;
    object-fit: contain;
	border-radius: 12px;
	cursor: pointer;
	background-color: white;
}
.section_product .product_images .cats {
	font-weight: 500;
}
.section_product .product_images .cats a {
	text-decoration: underline;
	transition: all .3s ease-in-out;
}
.section_product .product_images .cats a:hover {
	color: #F15A29;
}
.section_product .product_info {
    width: 460px;
}
.section_product .product_info .info:first-child {
    padding-bottom: 16px;
    padding-top: 0;
    border: none;
}
.section_product .product_info .info:nth-child(2) {
    border-bottom: 1px solid #E6E6E6;
}
.section_product .product_info .info {
    padding: 16px 0;
    border-top: 1px solid #E6E6E6;
}
.section_product .product_info .general .title,
.section_product .product_info .general .price {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}
.section_product .product_info .general .price {
    color: #F15A29;
    line-height: 1.2;
    margin-bottom: 0;
}
/* Воздух между названием и ценой: на десктопе они шли встык, заголовок в две
   строки сливался с ценой. */
.section_product .product_info .general .title { margin-bottom: 10px; }
/* Bottom spacing moved off the orange price onto the price block, so the
   gray strike-through hugs the orange instead of floating 16px below. */
.section_product .product_info .general .price_row { margin-bottom: 16px; }
.section_product .product_info .general .price_row:has(+ .price_old) { margin-bottom: 0; }
.section_product .product_info .general .price_old {
    margin-top: 2px;
    margin-bottom: 16px;
}
.section_product .product_info .general .articul,
.section_product .product_info .general .color {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}
.section_product .product_info .general .articul {
    color: #666666;
}
/* a11y: skip-to-main link. Hidden visually until keyboard-focused, then
   slides down from the top with a high-contrast pill so a Tab-only user
   sees it immediately on every page (header has 8+ Tab stops before
   first content otherwise). */
/* Cm-first tip — lives only inside the size-table modal now (was on
   the product page directly, but that overloaded the card). Same warm
   cream + accent-orange treatment. */
#size_screen .size-cm-tip {
    background: #fff7f1;
    border: 1px solid #f5d6c2;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #4a3a2c;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
#size_screen .size-cm-tip__icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.2;
}
#size_screen .size-cm-tip strong {
    color: #F15A29;
    font-weight: 700;
}

/* Split-pay card — replaces the old pill toggle. A full-width card
   that reads as a value-add ("4 платежа · 0%") with a tappable
   switch on the right. When :checked, .split-pay-card flips to its
   "active" state (orange-tinted background, white switch fully right)
   and JS swaps .price + CTA text to the per-instalment label.
   Three contexts: desktop (.product_info .general), mobile-top
   (.XS_info), mobile-cta (rendered just above the order button). */
.split-pay-card {
    --spc-bg: #fff7f1;
    --spc-bg-2: #ffeadc;
    --spc-border: #f5d6c2;
    --spc-text: #2a2622;
    --spc-sub: #6b5e54;
    --spc-accent: #F15A29;
    --spc-accent-deep: #BE3F18; /* = --mtf-orange-hover */
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 6px 0 16px;
    background: linear-gradient(135deg, var(--spc-bg) 0%, var(--spc-bg-2) 100%);
    border: 1px solid var(--spc-border);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    color: var(--spc-text);
    font-size: 13px;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(241, 90, 41, 0.04);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.split-pay-card:hover {
    border-color: var(--spc-accent);
    box-shadow: 0 4px 14px rgba(241, 90, 41, 0.12);
    transform: translateY(-1px);
}
.split-pay-card:active { transform: translateY(0); }

/* Hidden native checkbox — keep keyboard-focusable. */
.split-pay-card .split-toggle__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

/* Icon column — 4 mini bars representing 4 payments. Left bar fills
   with brand color while OFF (current payment); the rest stay grey
   until toggle is checked, when they cascade-fill. */
.split-pay-card__icon {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    padding: 0 2px;
}
.split-pay-card__bar {
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: #e0d6cc;
    transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1),
                height 220ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.split-pay-card__bar:nth-child(1) { height: 10px; background: var(--spc-accent); }
.split-pay-card__bar:nth-child(2) { height: 14px; }
.split-pay-card__bar:nth-child(3) { height: 18px; }
.split-pay-card__bar:nth-child(4) { height: 22px; }

/* Text block. Title + chip ("0%") on first row, sub-line below. */
.split-pay-card__text { min-width: 0; }
.split-pay-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--spc-text);
    letter-spacing: 0.005em;
}
.split-pay-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--spc-accent);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    box-shadow: 0 0 0 0 rgba(241, 90, 41, 0.5);
    /* 3 pulses on load, then rest. An infinite pulse next to the CTA kept the
       whole buy column "shouting" (design audit 28.08). */
    animation: spc-chip-pulse 2.4s ease-out 3;
}
.split-pay-card__sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--spc-sub);
}
.split-pay-card__sub strong {
    color: var(--spc-text);
    font-weight: 700;
}

/* The switch (visually identical to old .split-toggle__track) — pure
   visual; the real input is the absolutely-positioned native checkbox. */
.split-pay-card__switch {
    position: relative;
    width: 44px;
    height: 26px;
    background: #d4cfca;
    border-radius: 100px;
    flex-shrink: 0;
    transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.split-pay-card__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    transition: left 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.split-pay-card .split-toggle__input:focus-visible ~ .split-pay-card__switch {
    outline: 2px solid var(--spc-accent);
    outline-offset: 3px;
}

/* Active (checked) state — visible feedback that toggle is ON. */
.split-pay-card .split-toggle__input:checked ~ .split-pay-card__switch {
    background: var(--spc-accent);
}
.split-pay-card .split-toggle__input:checked ~ .split-pay-card__switch .split-pay-card__thumb {
    left: 21px;
}
/* Active state — :has() handles modern browsers; .is-active is set by JS
   as a fallback for older WebKit (pre-Safari 15.4) so no user is left
   without visual feedback. */
.split-pay-card:has(.split-toggle__input:checked),
.split-pay-card.is-active {
    background: linear-gradient(135deg, #fff 0%, #fff7f1 100%);
    border-color: var(--spc-accent);
    box-shadow: 0 4px 16px rgba(241, 90, 41, 0.18);
}
.split-pay-card:has(.split-toggle__input:checked) .split-pay-card__bar,
.split-pay-card.is-active .split-pay-card__bar {
    background: var(--spc-accent);
    transform: translateY(-1px);
}
.split-pay-card:has(.split-toggle__input:checked) .split-pay-card__chip,
.split-pay-card.is-active .split-pay-card__chip {
    animation: none;
    box-shadow: 0 0 0 4px rgba(241, 90, 41, 0.18);
}
.split-pay-card:has(.split-toggle__input:checked) .split-pay-card__sub,
.split-pay-card.is-active .split-pay-card__sub {
    color: var(--spc-accent-deep);
}
.split-pay-card:has(.split-toggle__input:checked) .split-pay-card__sub strong,
.split-pay-card.is-active .split-pay-card__sub strong {
    color: var(--spc-accent-deep);
}

/* Subtle attention pulse on the "0%" chip when toggle is OFF — wakes
   the eye without being aggressive (4s cycle, 30% strength). */
@keyframes spc-chip-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(241, 90, 41, 0.55); }
    60%  { box-shadow: 0 0 0 8px rgba(241, 90, 41, 0); }
    100% { box-shadow: 0 0 0 0   rgba(241, 90, 41, 0); }
}

/* Smooth price-flip animation — JS adds .is-flipping briefly while
   swapping textContent so the user sees a quick fade-scale instead of
   an abrupt label change. */
.price.is-flipping {
    animation: spc-price-flip 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes spc-price-flip {
    0%   { transform: translateY(0)    scale(1);    opacity: 1; }
    45%  { transform: translateY(-4px) scale(0.96); opacity: 0; }
    55%  { transform: translateY(4px)  scale(0.96); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.price.price--split { color: var(--spc-accent); }

/* Mobile-CTA copy — same card, but tighter and only visible on the
   mobile breakpoint (≤541px), where the desktop card is hidden by
   .xs_remove. Sits directly above the "Оформить" button so it's
   reachable by thumb. */
.split-pay-card--cta { display: none; }

@media (max-width: 541px) {
    .split-pay-card--cta {
        display: grid;
        margin: 14px 0 8px;
    }
    .split-pay-card { padding: 11px 12px; gap: 10px; }
    .split-pay-card__title { font-size: 13.5px; }
    .split-pay-card__sub { font-size: 12px; }
    .split-pay-card__icon { height: 24px; }
    .split-pay-card__bar:nth-child(4) { height: 18px; }
    .split-pay-card__bar:nth-child(3) { height: 15px; }
    .split-pay-card__bar:nth-child(2) { height: 12px; }
    .split-pay-card__bar:nth-child(1) { height: 9px; }
    .split-pay-card__switch { width: 40px; height: 24px; }
    .split-pay-card__thumb  { width: 18px; height: 18px; }
    .split-pay-card .split-toggle__input:checked ~ .split-pay-card__switch .split-pay-card__thumb {
        left: 19px;
    }
}

/* Honor reduced-motion — kill the chip pulse and price flip. */
@media (prefers-reduced-motion: reduce) {
    .split-pay-card__chip { animation: none; }
    .price.is-flipping    { animation: none; }
    .split-pay-card,
    .split-pay-card__switch,
    .split-pay-card__thumb,
    .split-pay-card__bar { transition: none; }
}

/* a11y: hamburger / mobile-search / close-menu buttons used to be <div>+<i>.
   Reset native button chrome so the visual appearance is identical to the
   old icon-only divs, but keep keyboard focusability and add a visible
   focus ring (audit P0 — outline:none was global). */
button#open_menu.burger,
button#close_menu.cover_screen_close,
button#open_search_mobile.icon-search-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button#open_menu.burger:focus-visible,
button#close_menu.cover_screen_close:focus-visible,
button#open_search_mobile.icon-search-btn:focus-visible {
    outline: 2px solid #F15A29;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Inline warning shown when user clicks "Оформить" without picking a size.
   Hidden by default (the [hidden] attribute), revealed by single-product.php
   guard script. Sits between the CTA and the gift-hint button. */
.register-size-warning {
    margin: 6px 0 12px;
    padding: 10px 14px;
    background: #fff4ef;
    border: 1px solid #f5b69a;
    border-radius: 10px;
    color: #F15A29;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
/* Briefly outline the size grid when the guard is triggered. */
#sizes.sizes--needs-pick {
    outline: 2px dashed #F15A29;
    outline-offset: 4px;
    border-radius: 10px;
    animation: mtf-size-shake 240ms ease-in-out 2;
}
@keyframes mtf-size-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.section_product .product_info .register {
    margin: 16px 0;
    border-radius: var(--radius-md, 16px); /* one button radius site-wide */
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    width: 100%;
    min-height: 56px;
    padding: 18px 24px;
    /* Flat button: the inset "gloss" + heavy glow read as 2015 next to the
       flat premium cards (design audit 28.08). */
    box-shadow: 0 4px 14px rgba(241, 90, 41, 0.16);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.section_product .product_info .register:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(241, 90, 41, 0.20);
}
.section_product .product_info .register:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(241, 90, 41, 0.18);
}
/* (Removed .price-split — replaced by the split-pay toggle below.) */
.section_product .product_info .size {
    gap: 16px;
}
.section_product .product_info .size .title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
}
.section_product .product_info .size .size_label {
    display: flex;
	justify-content: space-between;
}
.section_product .product_info .size .size_label .toggle_sizes{
	display: flex;
    gap: 16px;
}
#size_screen {
	position: fixed;
    top: 0;
    left: 0;
	bottom: 0;
	right: 0;
    width: 100%;
    z-index: 19000;
	display: none;
    background-color: white;
	overflow-y: auto;          /* scroll the whole panel, not the inner table */
	-webkit-overflow-scrolling: touch;
}
#size_screen .wrapper {
	margin: 65px auto;
	max-width: 700px;
	width: calc(100% - 32px);  /* respect viewport width on mobile */
	position: relative;
	padding-bottom: 24px;
}
#size_screen .wrapper .icon-cross {
	position: absolute;
	right: 1rem;
	top: 0.35rem;
	cursor: pointer;
	/* WCAG 2.5.5: 44×44 hit area, icon glyph stays visually at 24px via font-size */
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
#size_screen h1{
	color: #fff;
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
	margin-bottom: 15px;
}
#size_screen table{
	width:100%;
	table-layout: fixed;
}
#size_screen .tbl-header{
	/* Opaque: rows scrolling under the old 30%-black sticky header showed
	   through and text contrast drifted. Panel is white, th text inherits
	   dark — keep the header light. */
	background-color: #ececec;
	position: sticky;            /* sticky header stays visible while scrolling */
	top: 0;
	z-index: 2;
}
/* Inner-scroll only on wide screens. On mobile the panel itself scrolls,
   so the table must lay out at full natural height — otherwise the inner
   scroll fights the page scroll and product images underneath jump. */
#size_screen .tbl-content{
	height:300px;
	overflow:auto;
	border: 1px solid rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
	#size_screen {
		padding: 16px 12px 32px;
		box-sizing: border-box;
	}
	#size_screen .wrapper {
		margin: 0 auto;
		width: 100%;
		max-width: 100%;
	}
	#size_screen .wrapper h2 {
		font-size: 1.25rem;
		margin: 8px 0 16px;
		padding-right: 36px;     /* leave room for close button */
	}
	#size_screen .wrapper .icon-cross {
		right: 0;
		top: 6px;
	}
	#size_screen .tbl-header,
	#size_screen .tbl-content {
		width: 100%;
	}
	#size_screen .tbl-content {
		height: auto;
		max-height: none;
		overflow: visible;
		border-radius: 8px;
	}
	#size_screen th {
		padding: 12px 4px;
		font-size: 0.85rem;
	}
	#size_screen td {
		padding: 12px 4px;
		font-size: 0.95rem;
		text-align: center;
	}
	#size_screen table {
		table-layout: fixed;
		width: 100%;
	}
}
#size_screen th{
	padding: 20px 15px;
	text-align: left;
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
}
#size_screen td{
	padding: 15px;
	text-align: left;
	vertical-align:middle;
	font-weight: 300;
	font-size: 1rem;
	border-bottom: solid 1px rgba(0,0,0,0.1);
}
/* "Таблица размеров" link — minor secondary action, stays small + restrained. */
.section_product .product_info .size .size_label #open_size_table {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-transform: none;
    line-height: 1.4;
}
.section_product .product_info .size .size_label #open_size_table:hover {
    color: #F15A29;
}
/* Unit-system tabs become pill chips — clearer "switch state" than underlines. */
.section_product .product_info .size .size_label .toggle_sizes {
    gap: 6px;
}
.section_product .product_info .size .size_label .size_button {
    padding: 6px 14px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #f3f3f3;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #555;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.section_product .product_info .size .size_label .size_button:hover {
    background-color: #ececec;
    color: #1a1a1a;
}
.section_product .product_info .size .size_label .size_button.active {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}
/* Legacy fallback for non-button .active state (shoes without size_table). */
.section_product .product_info .size .size_label .active:not(.size_button) {
    color: #F15A29;
}
/* Inline conversion hint shown after a size is picked. */
.size-summary {
    margin-top: 14px;
    padding: 10px 14px;
    background: #faf9f7;
    border: 1px solid #ececec;
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.size-summary[hidden] {
    display: none;
}
.size-summary__label {
    color: #777;
    font-weight: 500;
    font-size: 13px;
}
.size-summary__value {
    color: #1a1a1a;
    font-weight: 600;
    letter-spacing: 0.01em;
}
@media (max-width: 510px) {
    .size-summary {
        font-size: 13px;
        padding: 9px 12px;
        margin-top: 12px;
    }
    .size-summary__label { font-size: 12px; }
}
.section_product .product_info .size .size_value {
    display: flex;
	flex-wrap: wrap;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
	padding-bottom: 10px;
	overflow-x: auto;
}

#sizes::-webkit-scrollbar,
#size_screen::-webkit-scrollbar {
   -webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
}

#sizes::-webkit-scrollbar:vertical,
#size_screen .tbl-content::-webkit-scrollbar:vertical {
   width: 5px;
}

#sizes::-webkit-scrollbar:horizontal,
#size_screen .tbl-content::-webkit-scrollbar:horizontal {
   height: 5px;
}

#sizes::-webkit-scrollbar-thumb,
#size_screen .tbl-content::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 10px;
} 

#sizes::-webkit-scrollbar-track,
#size_screen .tbl-content::-webkit-scrollbar-track { 
   background-color: transparent; 
} 

.section_product .product_info .size .size_value input[type="radio"] {
	display: none;
}
.section_product .product_info .size .size_value input[type="radio"]:checked + label {
    background-color: #F15A29;
    border-color: #F15A29;
    color: #fff;
    box-shadow: 0 0 0 2px #F15A29 inset, 0 2px 8px rgba(241, 90, 41, 0.25);
}
.section_product .product_info .size .size_value label {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 70px;
    height: 48px;
    cursor: pointer;
    padding: 16px;
    border-radius: 16px;
    background-color: #fff;
    /* Visible idle border so users can tell available sizes from background. */
    border: 1.5px solid #e0e0e0;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.section_product .product_info .size .size_value label:hover {
    border-color: #b8b8b8;
}
.section_product .product_info .size .size_value .active {
    background-color: #F15A29;
    border-color: #F15A29;
    color: #fff;
}
.section_product .product_info .size .size_value .unavailable {
    background-color: #efefef;
    border-color: transparent;
    color: #bababa;
    text-decoration: line-through;
    text-decoration-color: #c5c5c5;
    position: relative;
    cursor: not-allowed;
}
.section_product .product_info .size .size_value .unavailable:hover {
    border-color: transparent;
}
/* Mobile: adapt size selector to small viewports */
@media (max-width: 510px) {
    .section_product .product_info .size .size_value {
        gap: 6px;
        overflow-x: hidden;
    }
    .section_product .product_info .size .size_value label {
        min-width: 52px;
        height: 44px;
        padding: 10px 8px;
        font-size: 14px;
        border-radius: 12px;
    }
}
@media (max-width: 360px) {
    /* WCAG AA target size: never below 44×44px on mobile.
       Smaller font instead of smaller box on cramped screens. */
    .section_product .product_info .size .size_value label {
        min-width: 46px;
        height: 44px;
        padding: 10px 6px;
        font-size: 12px;
    }
}
/* P0: Filter overlay z-index MUST be above promo popup (which is z-index 9999) */
.catalog_cover_screen {
    z-index: 10000 !important;
}

/* ============================================================
   PHASE 1: Color swatches (same-model colorways) + Sticky mini-bar
   On-Running-inspired, brand-aligned (#F15A29 accent)
   ============================================================ */
.color-swatches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 4px;
}
.color-swatches-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.color-swatches-count {
    color: #1a1a1a;
    font-weight: 700;
    margin-left: 4px;
}
.color-swatches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.color-swatch {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    border: 2px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.color-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.color-swatch:hover {
    transform: translateY(-2px);
    border-color: #ffd4c1;
}
.color-swatch.is-active {
    border-color: #F15A29;
    pointer-events: none;
    position: relative;
}
.color-swatch.is-active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F15A29;
}
/* Desktop: swatches only in product_info right column */
.color-swatches--mobile { display: none; }
.color-swatches--desktop { display: flex; }
@media (max-width: 768px) {
    .color-swatches--mobile { display: flex; }
    .color-swatches--desktop { display: none; }
    .color-swatch { width: 42px; height: 42px; border-radius: 8px; }
}

/* ============================================================
   PHASE 2: Catalog card colorway swatches (2026-05-25)
   Shown on PC (3-up grid) and mobile (2-up grid) below the image+price.
   Rollback: define('MTF_CARD_SWATCHES_ENABLED', false) in wp-config.php.
   Mobile UX: 28px visual size, 44×44 tap target via ::before pseudo.
   ============================================================ */
/* Layout fix: .items_card already has `height: 100%` and .items_card a has
   `height: 100%; display: flex`, so the <a class="image_wrapper"> consumes
   the entire card. Switching .items_card to flex-column makes the swatches
   sibling sit naturally below; the <a> uses flex:1 so cards without swatches
   keep their original full-height behaviour. */
.items_card {
    display: flex;
    flex-direction: column;
}
.items_card > a.image_wrapper {
    flex: 1 1 auto;
    min-height: 0;
}
.card-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 4px;
    margin-top: -4px;
    flex-wrap: nowrap;
    /* Scroll, never clip. `overflow: hidden` cut the "+N расцветок" chip in
       half whenever the swatches plus the chip were wider than the card —
       visible on Oakley Sutro, which has 30 colourways. The count is the most
       useful element in the strip, so it must never be the one that is lost.
       Scrollbar hidden: the strip is short and the chip signals there is more. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    /* Constrain to card width — without this, flex children can extend the
       container past the parent card when overflow-x: auto is set on mobile. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Specificity .items_card .card-swatch beats existing `.items_card a` rule
   (height:100%, display:flex column) that would otherwise stretch swatches.
   Rounded squares + scaled-up image so the shoe fills the swatch — studio
   photos have 20-25% whitespace top/bottom around the shoe. transform: scale
   zooms in past that whitespace; overflow:hidden clips the edges cleanly. */
.items_card .card-swatch {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e6;
    flex-shrink: 0;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
/* Expand tap target to 44×44 without affecting layout (mobile UX). */
.card-swatch::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 1;
}
/* !important is needed: a 4-class prefix rule
   `.catalog_main .catalog_list .mobile_catalog_list_items .items_card img`
   wins on specificity (0,4,1 vs our 0,2,1) and forces object-fit:cover +
   min-height:160px — that's what stretches swatch thumbs to 42×160 so users
   see only the centre slice of each shoe. !important is the cleanest
   override that doesn't require touching the catalog-wide rule. */
.items_card .card-swatch img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: #fff !important;
    border-radius: 0 !important;
    /* Импорт нормализует кадр под 82% ширины холста, то есть по 9% пустого
       поля с каждой стороны. В свотчe 54px это съедало ~10px и кроссовок
       читался как точка. Зум 1/0.82 доводит обувь до краёв плитки; overflow
       на .card-swatch срезает лишнее. Комментарий выше обещал этот зум с
       самого начала, но самого transform в правиле не было. */
    transform: scale(1.22);
}
/* Eyewear: sunglasses are wide+thin on a 95%-white square, so a 40px swatch
   reads as blank. Render the colorway as a centre-cropped zoomed background
   (the glasses bbox sits at x12-86% / y34-65%, centred) so the lens/frame
   colour fills the swatch. The <img> stays for lazy-load + alt but is hidden. */
.card-swatches--eyewear .card-swatch {
    background-size: 250%;
    background-position: center 48%;
    background-repeat: no-repeat;
}
.card-swatches--eyewear .card-swatch img {
    opacity: 0 !important;
}
.items_card .card-swatch:hover {
    transform: translateY(-1px);
    border-color: #F15A29;
    box-shadow: 0 2px 8px rgba(241,90,41,.22);
    text-decoration: none;
}
.items_card .card-swatch:active {
    transform: scale(0.94);
}
.card-swatches::-webkit-scrollbar { display: none; }
/* Pin the counter to the right edge so it stays readable while the swatches
   scroll under it, and sits flush right when they all fit. */
.items_card .card-swatch--more {
    background: #f7f7f7;
    color: #666;
    border-color: #fff;
    position: sticky;
    right: 0;
    margin-left: auto;
    z-index: 1;
    box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .10);
}
.items_card .card-swatch--more:hover {
    color: #F15A29;
    text-decoration: none;
}
/* Mobile: swatches are a horizontally-swipeable strip — show ALL colorways
   instead of a "+N" badge. Card-width acts as the viewport; overflow-x:auto
   clips at the card edge so swatches never bleed past the rounded corner. */
@media (max-width: 853px) {
    .card-swatches.card-swatches--scroll {
        gap: 6px;
        padding: 8px 12px 12px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* subtle right-edge fade hints there's more to scroll. */
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    }
    .card-swatches.card-swatches--scroll::-webkit-scrollbar {
        display: none;
    }
    .items_card .card-swatch {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 12px;
        scroll-snap-align: start;
    }
    .items_card .card-swatch::before {
        inset: -2px;
    }
}
/* Very small phones — slightly smaller swatches to fit more per swipe. */
@media (max-width: 375px) {
    .card-swatches.card-swatches--scroll { gap: 5px; padding: 6px 10px 10px; }
    .items_card .card-swatch { width: 46px; height: 46px; border-radius: 12px; }
}

/* Solo-colorway chip — fills the swatch ribbon slot on cards with no
   siblings so card heights stay aligned across the row. Centered + wraps
   to 2 lines on narrow cards so "Эксклюзивная расцветка" always fits. */
.card-swatches--solo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px 12px;
    min-height: 48px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.card-solo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #fff5ee 0%, #ffe8d8 100%);
    border: 1px solid #ffd4b8;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #c84812;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
}
.card-solo-chip__icon {
    font-size: 12px;
    color: #F15A29;
    line-height: 1;
    flex-shrink: 0;
}
@media (max-width: 853px) {
    .card-swatches--solo {
        padding: 8px 12px 12px;
        min-height: 56px;
    }
    .card-solo-chip {
        font-size: 11px;
        padding: 7px 12px;
        border-radius: 12px;
    }
}
@media (max-width: 375px) {
    .card-swatches--solo { padding: 6px 10px 10px; min-height: 52px; }
    .card-solo-chip { font-size: 10px; padding: 6px 10px; border-radius: 10px; }
}

/* Sticky mini-bar (mobile only — shows when main CTA scrolls out) */
.mtf-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    padding: 10px 14px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 9998;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.68, 0, 1.15);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mtf-sticky-bar.is-visible {
    display: flex;
    transform: translateY(0);
}
.mtf-sticky-bar__img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
}
.mtf-sticky-bar__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mtf-sticky-bar__title {
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mtf-sticky-bar__price {
    font-size: 14px;
    font-weight: 700;
    color: #F15A29;
    line-height: 1.2;
}
.mtf-sticky-bar__cta {
    background: #F15A29;
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-md, 16px);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mtf-sticky-bar__cta:hover {
    background: var(--mtf-orange-hover, #BE3F18);
    color: #fff;
    text-decoration: none;
}
/* Show sticky bar only on mobile — desktop has side panel always visible */
@media (min-width: 769px) {
    .mtf-sticky-bar { display: none !important; }
}
.section_product .product_info .title_text .title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    margin-bottom: 8px;
}
.section_product .product_info .title_text .text {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #666666;
}

/*Section same products (product page)*/
.same_products .h_type_3 {
    margin-bottom: 24px;
}
.same_products .items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    justify-content: initial !important;
}
.same_products .items .items_card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
}
.same_products .items .items_card img {
    width: 100% !important;
    height: 269px !important;
    object-fit: contain !important;
}
@media (max-width: 1024px) {
    .same_products .items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .same_products .items .items_card:nth-child(n+7) {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .same_products .items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .same_products .items .items_card:nth-child(n+5) {
        display: none !important;
    }
    .same_products .items .items_card img {
        height: 180px !important;
    }
    /* Hide the duplicate slick carousel — single-product.php renders the
       same 8 related products twice (once as .items grid, once as .slider).
       The grid + 4-card cap is the canonical mobile experience; the slider
       below it caused a "second list" of the same products that scrolled
       horizontally and confused users. */
    .same_products .slider {
        display: none !important;
    }
}

/*Sort pop up (catalog page)*/
#sort_pop_up {
	position: absolute;
	top: 35px;
	left: 0;
	background-color: #ffff;
	width: 100%;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	display: none;
}
#sort_pop_up .items {
	padding: 0 24px 16px 24px;
}
#sort_pop_up .items label {
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-top: 12px;
}
#sort_pop_up .items label input{
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #CCCCCC;
}
#sort_pop_up .items label input:checked {
	border: 6px solid #F15A29;
}
/*Cover screen (catalog page)*/
.catalog_cover_screen {
    width: 100%;
    position: absolute;
    top: 0;
	bottom: 0;
    left: 0;
    z-index: 15;
    background-color: white;
    display: none;
	overflow: auto;
}

.menu_cover_screen .cover_screen_header,
.catalog_cover_screen .cover_screen_header {
    display: flex;
    align-items: center;
    padding-left: 16px;
    width: 100%;
    height: 56px;
    background-image: url(../img/cover_screen_logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    border-bottom: 1px solid rgb(230, 230, 230);
}
.menu_cover_screen .cover_screen_header i,
.catalog_cover_screen .cover_screen_header i {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5: 44×44 minimum touch target; icon kept 24px visually via font-size,
       padding bumps hit area without changing layout. */
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    cursor: pointer;
}
.menu_cover_screen .cover_screen_items,
.catalog_cover_screen .cover_screen_items {
    padding: 0 32px;
}
.menu_cover_screen .cover_screen_items .items_title,
.catalog_cover_screen .cover_screen_items .items_title {
    padding-top: 24px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
}
.catalog_cover_screen .cover_screen_items .filter {
    padding-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}
.catalog_cover_screen .cover_screen_items .filter .values_places{
    font-weight: 500;
	max-height: 180px;
	overflow-y: clip;
}
.catalog_cover_screen .cover_screen_items .continuous {
    margin-top: 16px;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places {
    margin-top: 8px;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places input['type=number'] {
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 8px 12px 8px 12px;
    color: rgb(179, 179, 179);
    background-color: #F7F7F7;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    width: 100%;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places span {
    background-color: #E6E6E6;
    display: block;
    width: 8px;
    height: 1px;
}
.catalog_cover_screen .cover_screen_items .discrete {
    padding-top: 16px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    border-top: 1px solid #E6E6E6;
}
.catalog_cover_screen .cover_screen_items .discrete button {
    text-decoration: underline;
    color: #F23737;
    text-align: start;
    background-color: white;
    border: none;
    width: fit-content;
	font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
	padding: 0;
}
.catalog_cover_screen .cover_screen_buttons {
    padding: 8px 16px 24px 16px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    column-gap: 8px;
    background-color: #F7F7F7;
    /* Keep "Применить"/"Сбросить" reachable while scrolling a long
       filter list — the cover screen itself is the scroll container. */
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.catalog_cover_screen .cover_screen_buttons button {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    border: none;
    width: 100%;
    border-radius: 16px;
    padding: 12px 24px;
}
.catalog_cover_screen .cover_screen_buttons button.reset {
    background-color: white;

}
.catalog_cover_screen .cover_screen_items .values_places label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-top: 12px;
}
.catalog_cover_screen .cover_screen_items .values_places label input{
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #CCCCCC;
}
.catalog_cover_screen .cover_screen_items .values_places label input:checked {
    border: 6px solid #F15A29;
}
/* #sort_screen .wrapper{
    height: 1024px;
    position: relative;
}
#sort_screen .cover_screen_buttons {
    width: 100%;
    position: absolute;
    bottom: 0;
} */

/*Section catalog (catalog page)*/
.catalog .h_type_1 {
    color: black;
    display: flex;
    gap: 16px;
}
.catalog .h_type_1 span:last-child {
    color: #999999;
}
.catalog .section_catalog {
    gap: 56px;
	padding-top: 32px !important;
}
.catalog_main {
    display: flex;
    gap: 54px;
}
.catalog_main .catalog_filters {
    width: 310px;
    height: fit-content;
    padding: 24px;
    gap: 16px;
    background-color: white;
    border: 1px solid #F2F2F2;
    border-radius: 32px;
}
.catalog_main .catalog_filters .filters_title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
}
.catalog_main .catalog_filters .filter {
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E6E6;
}
.catalog_main .catalog_filters .filter:first-child {
    padding-top: 16px;
}
.catalog_main .catalog_filters .filter .title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}
.catalog_main .catalog_filters .continuous {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    gap: 8px;
}
input[type='range'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	outline: none;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: transparent;
	pointer-events: none;
}
input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 5px;
}
input[type="range"]::-moz-range-track{
    -moz-appearance: none;
    height: 5px;
}
input[type="range"]::-ms-track{
    appearance: none;
    height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.5em;
    width: 1.5em;
    background-color: #ffff;
    cursor: pointer;
    margin-top: -9px;
    border-radius: 50%;
	border: 2px solid #E6E6E6;
	pointer-events: auto;
}
input[type="range"]::-moz-range-thumb{
    -webkit-appearance: none;
    height: 1.5em;
    width: 1.5em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #ffff;
	border: 2px solid #E6E6E6;
	pointer-events: auto;
}
input[type="range"]::-ms-thumb{
    appearance: none;
    height: 1.5em;
    width: 1.5em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #ffff;
	border: 2px solid #E6E6E6;
	pointer-events: auto;
}
.continuous .values_places .two_side_inputs {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}
.continuous .values_places .two_side_inputs .range_inputs {
	position: relative;
	min-height: 1.5rem;
}
.continuous .values_places .two_side_inputs .range_inputs .range_track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	margin: auto;
	width: 90%;
	background-color: #F15A29;
	height: 2px;
}
.continuous .values_places .two_side_inputs .number_inputs {
	display: flex;
	gap: 3px;
	align-items: center;
	width: 100%;
    justify-content: space-between;
}
.continuous .values_places .two_side_inputs .number_inputs div {
	height: 1px;
    width: 8px;
    background-color: #E6E6E6;
}
.continuous .values_places .two_side_inputs input[type=number] {
	width: 78px;
	padding: 4px 8px;
    border-radius: 16px;
    background-color: #F7F7F7;
    border: 1px solid #E6E6E6;
	font-size: 1rem;
	width: 100%;
}
.catalog_main .catalog_filters .discrete .title{
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin-bottom: 12px;
}
.catalog_main .catalog_filters .discrete .values_places {
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5rem;
	max-height: 175px;
	overflow-y: clip;
	font-size: 1rem;
}
.catalog_main .catalog_filters .discrete .values_places input {
    min-width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.catalog_main .catalog_filters .discrete .values_places input:checked {
	background-color: #F15A29;
}
.catalog_main .catalog_filters .discrete .values_places input:checked:after {
	content: '\2713';
	color:white;
}
.catalog_main .catalog_filters .discrete .values_places label {
    display: flex;
    gap: 8px;
    align-items: center;
}
.discrete .tile_values_places {
	display: flex;
    flex-wrap: wrap;
    gap: 8px;
	overflow: hidden;
	padding: 4px;
}
.discrete .tile_values_places input {
	display: none;
}
.discrete .tile_values_places label {
	width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
	border: 2px solid #C9C9C9;
}
.catalog_main .catalog_filters .discrete .tile_values_places label:has(input:checked) {
	outline-offset: 2px;
	outline: 2px solid black;
}
.catalog_main .catalog_filters .discrete button {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin-top: 12px;
    background-color: white;
    color: rgb(242, 55, 55);
    text-decoration: underline;
    padding: 0;
    border: none;
    cursor: pointer;
}
.catalog_main .catalog_filters .manage_button {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    padding: 12px 24px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
	transition: all .3s ease-in-out;
}
.catalog_main .catalog_filters .manage_button:hover {
	background-color: #be451e;
}
.catalog_main .catalog_filters .reset:hover {
	background-color: #f7f3f3;
}
.catalog_main .catalog_filters .reset {
    background-color: white;
}
.catalog_main .catalog_list {
    gap: 24px;
    width: 100%;
}
.catalog_main .catalog_list .catalog_list_sort {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    justify-content: flex-end;
}
.catalog_main .catalog_list .catalog_list_sort #open_sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background-color: white;
    border-radius: 16px;
    cursor: pointer;
    width: 183px;
	position: relative;
	font-size: 0.9rem;
}
.catalog_main .catalog_list .catalog_list_sort .filter_button {
    display: none;
}
.catalog_main .catalog_list .catalog_list_items {
    gap: 24px;
}
.catalog_main .catalog_list .mobile_catalog_list_items {
    display: none;
}
.catalog_main .catalog_list .catalog_list_items .row {
    display: flex;
    justify-content: flex-start;
	column-gap: 24px;
}
/* Сетка каталога тянется по ширине, а не делится всегда на три.
   Строки собирает PHP по три карточки, и когда около 1000px прячется колонка
   фильтров, те же три растягивались на всю ширину: карточка 282×504 вместо
   246×468 — «слишком большие». display:contents убирает строки из раскладки,
   карточки становятся ячейками одной сетки и сами переходят на 4–5 в ряд.
   Пустые добивки строк (.item_card_plug) в сетке не нужны. */
@media (min-width: 769px) {
    .catalog_main .catalog_list .catalog_list_items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        column-gap: 24px;
        row-gap: 24px;
        align-items: stretch;
    }
    .catalog_main .catalog_list .catalog_list_items .row { display: contents; }
    .catalog_main .catalog_list .catalog_list_items .item_card_plug { display: none; }
    /* Ширину карточки задаёт колонка сетки. Отдельное правило .items_card
       {width:272px} на экранах от 1440px осталось от прежней раскладки на
       flex — в сетке оно вылезало за колонку и карточки налезали друг на друга. */
    .catalog_main .catalog_list .catalog_list_items .items_card {
        width: 100%;
        max-width: none;
    }
}


/*Pagination (catalog page) — pill bar with per-cell hover, brand-orange current.*/
.pagination_container {
    display: flex;
    justify-content: center;
    margin: 32px 0 8px;
}
.pagination_container .pagination_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pagination_container .page_link,
.pagination_container .wp_page_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font: 500 14px/1 inherit;
    color: #222;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.pagination_container a.page_link:hover,
.pagination_container a.wp_page_link:hover {
    background: #F7F4EF;
    color: #111;
    text-decoration: none;
}
.pagination_container .current {
    background: #F15A29;
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination_container .ellipsis {
    color: #999;
    min-width: 20px;
    padding: 0 4px;
    cursor: default;
}
.pagination_container .arrow {
    color: #666;
    font-size: 16px;
}
.pagination_container .arrow.disabled {
    color: #C8C8C8;
    cursor: not-allowed;
}
#Mobile-paged {
    display: none;
}
@media (max-width: 768px) {
    #PC-paged { display: none; }
    #Mobile-paged { display: flex; }
    .pagination_container .page_link,
    .pagination_container .wp_page_link {
        min-width: 44px;
        height: 44px;
        padding: 0 10px;
    }
}

/*Category SEO text (catalog page footer — page 1 only).*/
.category_seo_text {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
}
.category_seo_text .category_description {
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 20px;
}
.category_seo_text .category_description__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
}
.category_seo_text .category_description p {
    margin: 0 0 10px;
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}
.category_seo_text .category_description p:last-child { margin-bottom: 0; }
.category_seo_text .category_description a {
    color: #F15A29;
    text-decoration: none;
}
.category_seo_text .category_description a:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .category_seo_text .category_description {
        padding: 22px 18px;
        border-radius: 16px;
    }
    .category_seo_text .category_description__title { font-size: 16px; }
}

/*Section social (contacts page) — redesigned cards (Telegram / Instagram / Email).*/
.section_social {
    padding-top: 32px !important;
}
.section_social .contacts_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.section_social .contact_card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 20px;
    color: #1A1A1A;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.section_social .contact_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    border-color: #DEDEDE;
    text-decoration: none;
    color: #1A1A1A;
}
.section_social .contact_card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}
.section_social .contact_card__icon svg {
    width: 26px;
    height: 26px;
}
.section_social .contact_card__icon--tg {
    background: #E8F2FB;
    color: #2AABEE;
}
.section_social .contact_card__icon--ig {
    background: linear-gradient(135deg, #FFE6F0 0%, #FFE4D1 60%, #FFEFCF 100%);
    color: #C13584;
}
.section_social .contact_card__icon--mail {
    background: #FCEBE2;
    color: #F15A29;
}
.section_social .contact_card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.section_social .contact_card__label {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.section_social .contact_card__value {
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.2;
    word-break: break-word;
}
.section_social .contact_card__hint {
    font-size: 13px;
    color: #666;
    line-height: 1.35;
    margin-top: 2px;
}
.section_social .contact_card__arrow {
    color: #F15A29;
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.section_social .contact_card:hover .contact_card__arrow {
    opacity: 1;
    transform: translateX(2px);
}
.section_social .contacts_meta {
    margin-top: 24px;
    padding: 20px 24px;
    background: #F7F7F7;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.section_social .contacts_meta__row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.section_social .contacts_meta__label {
    min-width: 110px;
    color: #888;
    font-weight: 500;
}
.section_social .contacts_meta__value {
    color: #1A1A1A;
}
.section_social .contacts_meta__value a {
    color: #F15A29;
    text-decoration: none;
}
.section_social .contacts_meta__value a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .section_social .contacts_grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .section_social .contact_card__arrow { opacity: 1; }
    .section_social .contacts_meta__row { flex-direction: column; gap: 2px; }
    .section_social .contacts_meta__label { min-width: 0; }
}

/*Section FAQ (for customers page)*/
.section_FAQ {
	padding-top: 32px !important;
}
.section_FAQ .accordion {
    margin-top: 56px;
}
/*Section FAQ (privacy page)*/
.section_privacy {
	color: #595959;
    font-weight: 500;
	line-height: 24px;
}
.section_privacy ul{
	list-style-type: none;
}
/* /offer/ and /privacy/ opened with an <h2> and therefore had no <h1> at all.
   The tag is now an <h1>; pin the size so the page looks the same as before
   instead of jumping to the browser's 2em default. */
.section_privacy h1 {
	font-size: 1.5em;
	margin: 0 0 16px;
}

/* Order process hint + trust badges — scoped under .product_info for specificity */
.product_info .order_process_info {
    margin: 14px 0 18px;
    padding: 12px 16px;
    background: #f5f9f5;
    border-left: 3px solid #4caf50;
    border-radius: 6px;
}
.product_info .order_process_hint {
    margin: 0;
    font-size: 14px;
    color: #2d5d33;
    line-height: 1.5;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.product_info .order_process_hint svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.product_info .trust_badges {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 18px 0;
    padding: 14px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.product_info .trust_badge--split {
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease;
}
.product_info .trust_badge--split:hover strong {
    color: #F15A29;
}
.product_info .trust_badge--split:hover svg {
    color: #F15A29;
}
.product_info .trust_badge--guarantee {
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease;
}
.product_info .trust_badge--guarantee strong {
    color: #F15A29;
}
.product_info .trust_badge--guarantee:hover span,
.product_info .trust_badge--guarantee:hover svg {
    color: #F15A29;
}
@media (min-width: 769px) {
    .product_info .trust_badge {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }
}
.product_info .trust_badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 1;
    color: #333;
}
.product_info .trust_badge svg {
    flex-shrink: 0;
    color: #1a1a1a;
    display: block;
}
.product_info .trust_badge > div {
    display: flex;
    flex-direction: column;
}
.product_info .trust_badge strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}
.product_info .trust_badge span {
    display: block;
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    margin-top: 2px;
}

/* Gift hint button — scoped for specificity */
/* Quiet text action (28.08.2026): the buy column had four button-shaped
   actions competing; gift-hint is the least important, so it drops to a
   ghost link instead of a fourth full-width bordered button. */
.product_info .gift-hint-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 2px !important;
    background: transparent !important;
    color: #6B6B6B !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: color 150ms ease !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
.product_info .gift-hint-btn:hover {
    color: #1a1a1a !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    .product_info .trust_badges {
        flex-wrap: wrap;
        gap: 10px;
    }
    .product_info .trust_badge {
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
    }
}

/* Header actions: search + Telegram + Wishlist */
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.header-tg,
.header-wishlist {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}
.header-tg:hover {
    color: #0088cc;
}
.header-wishlist:hover {
    color: #e74c3c;
}
.header-wishlist-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}

/* Wishlist button on product cards. Desktop 36×36 (visual), mobile 44×44
   (WCAG AA target size). Invisible ::before extends desktop hit area too,
   but on mobile the visible button itself meets the standard. */
.wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    width: 36px !important;
    height: 36px !important;
    -webkit-tap-highlight-color: transparent;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    color: #999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
}
@media (max-width: 768px) {
    .wishlist-btn {
        width: 44px !important;
        height: 44px !important;
    }
}
.wishlist-btn:hover {
    background: #fff !important;
    color: #e74c3c !important;
    transform: scale(1.05) !important;
}
/* Invisible touch hit area — extends desktop button to 44x44.
   On mobile the button is already 44×44 so the extension is redundant
   but harmless (does no overlap-stealing because z-index:-1). */
.wishlist-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
}
.wishlist-btn.active {
    color: #e74c3c !important;
}
.wishlist-btn.active svg {
    fill: #e74c3c !important;
}
.items_card {
    position: relative;
}
@media (max-width: 768px) {
    .header-actions {
        gap: 14px;
    }
    .search-label {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Шапка на узких десктопах (04.08.2026, после добавления корзины).
   Навигация и правый блок сходились вплотную: «УМНЫЙ ПОИСК» вставал
   впритык к «ПОДБОРКИ» и читался как ещё один пункт меню.
   Прежнее правило скрывало подпись поиска только под 768px, где
   десктопная шапка уже заменена на #xs_header, то есть не работало.
   --------------------------------------------------------------- */
#header nav {
    min-width: 0;              /* позволяем меню сжиматься, а не толкать соседа */
}
.header-actions {
    margin-left: 24px;         /* гарантированный зазор от последнего пункта меню */
    flex: 0 0 auto;            /* иконки не сжимаются в кашу */
}

@media (max-width: 1400px) {
    /* Ниже этой ширины подпись съедает место, нужное меню. Лупа остаётся. */
    .search-label {
        display: none;
    }
    .header-actions {
        gap: 14px;
        margin-left: 18px;
    }
}

@media (max-width: 1200px) {
    .header-actions {
        gap: 10px;
        margin-left: 14px;
    }
    .header-tg,
    .header-wishlist {
        width: 32px;
        height: 32px;
    }
}

/* Корзина — оранжевая, избранное — красное: две иконки рядом не должны
   выглядеть одинаково, иначе счётчики путаются местами. */
.header-cart:hover {
    color: #F15A29;
}
.header-cart .header-wishlist-badge {
    background: #F15A29;
}

/* =====================================================
   Mobile audit fixes (C-1, C-2, C-3, H-2, H-4, M-1)
   ===================================================== */

/* Mobile header actions (Telegram + Wishlist) */
#xs_header {
    justify-content: space-between !important;
    align-items: center;
}
#xs_header .burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: 8px !important;
    cursor: pointer;
}
#xs_header .xs-header-actions {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
#xs_header .xs-header-actions #open_search_mobile,
#xs_header .xs-header-actions .xs-header-tg,
#xs_header .xs-header-actions .xs-header-wishlist {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    color: #1a1a1a;
    text-decoration: none;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.4rem;
}
#xs_header .xs-header-actions .xs-header-tg:hover {
    color: #0088cc;
}
#xs_header .xs-header-actions .xs-header-wishlist:hover {
    color: #e74c3c;
}
.xs-wishlist-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}

/* C-3: Fix filter overlay — lists were non-scrollable (overflow:clip) */
.catalog_cover_screen .cover_screen_items .filter .values_places {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* M-4: Burger menu fullscreen coverage */
.menu_cover_screen {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh;
    z-index: 1000 !important;
}

/* H-2: Trust badges stack on very narrow viewports */
@media (max-width: 375px) {
    .product_info .trust_badge {
        flex: 0 0 100% !important;
    }
}

/* C-2: Prevent #header overflow at 511px-630px */
@media (max-width: 768px) {
    #header nav {
        max-width: calc(100vw - 200px) !important;
    }
}

/* ───────── Premium polish (CSS-only, 0KB bundle) ───────── */

/* Product card subtle lift on hover (desktop only — touch devices skip) */
@media (hover: hover) and (pointer: fine) {
  .items_card {
    transition:
      transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),  /* gentle spring */
      box-shadow 0.32s ease-out,
      border-color 0.32s ease-out;
    will-change: transform;
  }
  .items_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12),
                0 4px 8px -4px rgba(0, 0, 0, 0.06);
    border-color: #d0d0d0;
  }
  .items_card:hover img {
    transform: scale(1.03);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .items_card img {
    transition: transform 0.32s ease-out;
  }
}

/* Honor reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .items_card,
  .items_card img,
  .items_card:hover,
  .items_card:hover img {
    transition: none !important;
    transform: none !important;
  }
}

/* Smooth scroll-snap-like page transitions via View Transitions API
   (Chrome/Edge 111+, Safari 18+ — graceful fallback for others) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* Subtle CTA shimmer for "primary" buttons (uses existing class names) */
.default_button {
  position: relative;
  overflow: hidden;
}
.default_button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease-in-out;
  pointer-events: none;
}
@media (hover: hover) {
  .default_button:hover::after {
    left: 150%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TF CLO brand landing (theme/taxonomy-pa_brand_wear.php)
   Hero → trust row → grouped product collection → brand story → FAQ.
   Self-contained block — every selector .tfclo-* prefixed.
   ════════════════════════════════════════════════════════════════════════ */
.tfclo-brand {
    background: #fafafa;
    color: #1a1a1a;
    --tfclo-accent: #F15A29;
}

/* Hero */
.tfclo-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%);
    color: #fff;
    padding: clamp(56px, 9vw, 120px) 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tfclo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(241, 90, 41, 0.08), transparent 60%),
        radial-gradient(600px 300px at 90% 100%, rgba(241, 90, 41, 0.05), transparent 60%);
    pointer-events: none;
}
.tfclo-hero__inner {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}
.tfclo-hero__topline {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tfclo-hero__sep {
    color: rgba(255, 255, 255, 0.3);
}
.tfclo-hero__mark {
    font-size: clamp(64px, 12vw, 160px);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 0.9;
    margin: 0 0 24px;
    color: #fff;
}
.tfclo-hero__dot {
    color: var(--tfclo-accent);
    margin: 0 0.05em;
}
.tfclo-hero__tagline {
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}
.tfclo-hero__lede {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
    margin: 0 auto 36px;
}
.tfclo-hero__cta {
    display: inline-block;
    padding: 16px 36px;
    background: var(--tfclo-accent);
    color: #fff;
    border-radius: var(--radius-md, 16px);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(241, 90, 41, 0.16);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.tfclo-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(241, 90, 41, 0.20);
}

/* Trust row */
.tfclo-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: -36px auto 0;
    padding: 28px 24px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}
.tfclo-trust__item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tfclo-trust__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff4ef;
    color: var(--tfclo-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tfclo-trust__icon svg {
    width: 22px;
    height: 22px;
}
.tfclo-trust__item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}
.tfclo-trust__item span {
    display: block;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-top: 2px;
}
@media (max-width: 900px) {
    .tfclo-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 510px) {
    .tfclo-trust { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
}

/* Collection */
.tfclo-collection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 24px;
}
.tfclo-collection__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 16px;
}
.tfclo-collection__head h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
}
.tfclo-collection__head span {
    font-size: 13px;
    color: #777;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tfclo-cat {
    margin-bottom: 56px;
}
.tfclo-cat__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.tfclo-cat__count {
    font-size: 12px;
    font-weight: 500;
    color: #999;
    background: #efefef;
    border-radius: 100px;
    padding: 2px 10px;
}
.tfclo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .tfclo-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 510px) {
    .tfclo-grid { grid-template-columns: 1fr; }
}

/* Card */
.tfclo-card {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ececec;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    display: flex;
    flex-direction: column;
}
.tfclo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}
.tfclo-card__img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}
.tfclo-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.35);
    transition: transform 350ms ease;
    display: block;
}
.tfclo-card:hover .tfclo-card__img img {
    transform: scale(1.4);
}
.tfclo-card__body {
    padding: 16px 18px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tfclo-card__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    min-height: 2.6em;
}
.tfclo-card__price {
    margin-top: auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--tfclo-accent);
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.tfclo-card__split {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.01em;
}

/* Brand story (term description) */
.tfclo-story {
    background: #fff;
    border-top: 1px solid #ececec;
    padding: 64px 24px;
}
.tfclo-story__inner {
    max-width: 760px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}
.tfclo-story__inner h2 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.tfclo-story__inner h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 32px 0 12px;
}
.tfclo-story__inner ul {
    padding-left: 22px;
    margin: 12px 0;
}
.tfclo-story__inner li {
    margin: 6px 0;
}
.tfclo-story__inner p {
    margin: 12px 0;
}

/* FAQ */
.tfclo-faq {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}
.tfclo-faq__title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
.tfclo-faq__item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 0 20px;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tfclo-faq__item[open] {
    border-color: #d8d8d8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.tfclo-faq__item summary {
    cursor: pointer;
    padding: 18px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    list-style: none;
    position: relative;
    padding-right: 32px;
}
.tfclo-faq__item summary::-webkit-details-marker { display: none; }
.tfclo-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #999;
    line-height: 1;
    transition: transform 150ms ease;
}
.tfclo-faq__item[open] summary::after {
    content: '−';
}
.tfclo-faq__item p {
    padding: 0 0 18px;
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}
.tfclo-faq__item a {
    color: var(--tfclo-accent);
    text-decoration: none;
}
.tfclo-faq__item a:hover {
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   Catalog empty-state (P0) — shown by template-parts/archive-{full_size,
   mobile}.php when a filter combination matches zero products. Without it
   the catalog renders a blank white zone with no exit.
   ════════════════════════════════════════════════════════════════════════ */
.catalog-empty {
    width: 100%;
    text-align: center;
    padding: 48px 16px;
    box-sizing: border-box;
}
.catalog-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.catalog-empty__text {
    font-size: 15px;
    line-height: 1.5;
    color: #757575;
    margin: 0 0 24px;
}
.catalog-empty__reset {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 8px;
    background-color: #F15A29;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

/* Brand H1: count moved out of <h1> for clean SEO heading; keep visual via wrapper */
.catalog .h_type_1 > h1 { font: inherit; margin: 0; padding: 0; }

/* ── Sale / discount UI (temporary site-wide discount, 2026-06-22) ───────── */
/* Price + SALE chip share one centered row; old price drops below. */
.price_row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card_price { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

.sale_badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    animation: mtf-sale-pulse 1.3s ease-in-out infinite;
}
@keyframes mtf-sale-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 59, 48, .45); }
    50%      { transform: scale(1.07); box-shadow: 0 0 0 5px rgba(255, 59, 48, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sale_badge { animation: none; }
}

.price_old {
    display: block;
    margin-top: 1px;
    color: #9a9a9a;
    text-decoration: line-through;
    font-weight: 400;
    font-size: .9em;
    white-space: nowrap;
}
/* Пояснение к «От» — тихая строка под ценой, не конкурирует с ней. */
.price_depends {
    display: block;
    margin-top: 4px;
    max-width: 42ch;
    color: var(--mtf-text-muted, #6B6B6B);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

/* Mobile single-product: price block on the left, share button opposite on
   the right (XS_info is mobile-only, so no media query needed). */
.xs-price-share {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.xs-price-share .xs-price-col { min-width: 0; }
.xs-price-share .mtf-share-btn { flex: none; margin-top: 4px; }
/* Tighten the gap between orange (new) and gray (old) price. */
.XS_info .price { line-height: 1.15; }
.XS_info .price_old { margin-top: 1px; }

/* Подсказка под полем email в модалке заказа (12.08.2026).
   Поле необязательное: телефон уже есть, лишнее required режет конверсию.
   Подпись снимает опасение «сейчас завалят спамом». */
.order_screen_form .order_email_hint {
    margin: -6px 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #8a8a8a;
}

/* Единый набор иконок Tabler (замена разнобоя emoji). stroke=currentColor. */
.ti{ display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.18em; stroke:currentColor; fill:none; flex:0 0 auto; }
.ti--accent{ color:#F15A29; }

/* =====================================================================
   Дизайн-система, шаг 1 — каталог подтянут к главной (09.09.2026).
   Тёплая основа вместо чистого белого + едва различимая точечная сетка,
   как на главной. Карточки остаются белыми и поэтому наконец отделяются
   от фона: раньше белое на белом сливалось в кашу.
   ===================================================================== */
.catalog_main {
    background-color: #faf7f4;
    background-image: radial-gradient(rgba(20, 19, 14, .055) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Имя модели и расцветка разными строками. Правила ниже идут после
   nth-child-правил и с такой же специфичностью, поэтому перекрывают их:
   добавление строки расцветки сдвинуло порядок детей. */
.items_card .items_card_description > div.card_model {
    font-size: 14px;
    font-weight: 700;
    color: #14130e;
    line-height: 1.25;
    /* без резерва на две строки: расцветка теперь отдельной строкой, а цена
       и так прижата к низу через margin-top: auto — карточки не разъедутся */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.items_card .items_card_description > div.card_colorway {
    margin-top: -2px;
    font-size: 12px;
    font-weight: 500;
    color: #8d877c;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.items_card .items_card_description > div.card_price {
    font-size: 18px;
    font-weight: 700;
    color: #F15A29;
    line-height: 1.2;
    margin-top: auto;
}

/* Появление карточек — на CSS, без скрипта. Базовое состояние видимое:
   если браузер не умеет view(), сетка просто отрисуется целиком. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .catalog_list .items_card {
            animation: mtf-card-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 26%;
        }
    }
}
@keyframes mtf-card-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* =====================================================================
   Дизайн-система, шаг 2 — каталог: карточка, фильтры, фон, движение.
   Правила идут последними и перекрывают базовые при равной специфичности.
   ===================================================================== */

/* ── Фон всего сайта: тёплая основа + точечная сетка. Раньше жил только
   на каталоге, из-за чего страницы отличались друг от друга. ────────── */
body {
    background-color: #faf7f4;
    background-image: radial-gradient(rgba(20, 19, 14, .06) 1px, transparent 1px);
    background-size: 22px 22px;
}
/* Каталогу дополнительно фирменный засвет сверху, как в первом экране главной. */
.catalog_main {
    position: relative;
    background-color: transparent;
    background-image: radial-gradient(52% 26% at 78% -2%, rgba(241, 90, 41, .13), transparent 70%);
    background-repeat: no-repeat;
}

/* ── Карточка: фото крупнее, текст влево, плотнее ───────────────────── */
.catalog_main .items_card,
.items_card {
    gap: 10px;
    padding-bottom: 16px;
    border: 1px solid #ece9e4;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 19, 14, .03);
    transition: box-shadow 320ms cubic-bezier(.25, 0, .3, 1),
                transform 320ms cubic-bezier(.25, 0, .3, 1),
                border-color 200ms ease;
}
/* Студийные шоты каталога имеют собственные белые поля — карточка выглядела
   пустой. Подрезаем поля масштабом внутри скрытого переполнения. */
.items_card .card_photo { display: block; overflow: hidden; border-radius: 24px 24px 0 0; }
.items_card img {
    border-radius: 24px 24px 0 0;
    padding: 0;
    /* 12.09.2026: 1.14 → 1.06. Контейнер обрезает по краям, и у фото, которое
       ночной нормализатор ещё не выровнял, срезался носок — владелец: «фото не
       вмещается». 6 % дают тот же эффект «кроссовок крупнее», но режут только
       поле вокруг. Вернуть 1.14 можно, когда нормализатор пройдёт весь каталог. */
    transform: scale(1.06);
    transition: transform 520ms cubic-bezier(.2, .7, .2, 1);
}
.items_card .items_card_description {
    padding: 4px 16px 0;
    text-align: left;
    align-items: stretch;
    gap: 4px;
}
.items_card .items_card_description > div.card_model  { font-size: 15px; }
.items_card .items_card_description > div.card_price  { margin-top: 8px; font-size: 19px; }
.items_card .card_split_badge { align-self: flex-start; margin-top: 4px; }

@media (hover: hover) {
    .items_card:hover {
        transform: translateY(-4px);
        border-color: #ded9d1;
        box-shadow: 0 18px 34px -22px rgba(60, 45, 35, .45);
    }
    .items_card:hover img { transform: scale(1.2); }
}

/* ── Панель фильтров под стиль главной ──────────────────────────────── */
.catalog_main .catalog_filters {
    padding: 20px;
    border: 1px solid #ece9e4;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 19, 14, .03);
}
.catalog_main .catalog_filters .filters_title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8d877c;
    line-height: 1.2;
}
.catalog_main .catalog_filters .filter { padding-bottom: 14px; border-bottom: 1px solid #ece9e4; }
.catalog_main .catalog_filters .filter .title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #14130e;
}
.catalog_main .catalog_filters .discrete .values_places label {
    padding: 5px 8px;
    margin-left: -8px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #14130e;
    transition: background-color 160ms ease;
}
@media (hover: hover) {
    .catalog_main .catalog_filters .discrete .values_places label:hover { background: #faf7f4; }
}
.catalog_main .catalog_filters .discrete .values_places input {
    border: 1.5px solid #ded9d1;
    border-radius: 6px;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.catalog_main .catalog_filters .discrete .values_places input:checked {
    background: #F15A29;
    border-color: #F15A29;
}
.catalog_main .catalog_filters .number_inputs input {
    border: 1px solid #ece9e4;
    border-radius: 10px;
    background: #faf7f4;
    font-weight: 600;
}

/* ── Появление карточек заметнее и волной по колонкам ───────────────── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .catalog_list .items_card {
            animation-range: entry 0% entry 34%;
        }
    }
}
@keyframes mtf-card-rise {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── Карточка: имя и расцветка по центру, оплата долями графикой ────── */
.items_card .items_card_description {
    text-align: center;
    align-items: center;
    padding: 6px 14px 0;
}
.items_card .items_card_description > div.card_model,
.items_card .items_card_description > div.card_colorway { width: 100%; }

/* Четыре доли платежа: первая закрашена — видно, что платишь четверть. */
.items_card .card_split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}
.items_card .card_split__bars { display: flex; gap: 3px; }
.items_card .card_split__bars i {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #e7e5e0;
}
.items_card .card_split__bars i.is-on { background: #F15A29; }
.items_card .card_split__text {
    font-size: 12px;
    font-weight: 600;
    color: #8d877c;
    letter-spacing: -.005em;
}

/* ── Чипы категорий сверху ──────────────────────────────────────────── */
@media (max-width: 853px) {
    .mtf-filter-chips {
        padding: 12px 16px !important;
        background: rgba(250, 247, 244, .92) !important;
        backdrop-filter: saturate(140%) blur(8px);
        border-bottom: 1px solid #ece9e4 !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
        mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
    }
    .mtf-chip {
        padding: 9px 15px !important;
        background: #fff !important;
        border: 1px solid #ece9e4 !important;
        color: #14130e !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .02em;
        text-transform: uppercase;
        transition: background-color 180ms ease, border-color 180ms ease,
                    color 180ms ease, transform 180ms cubic-bezier(.25,0,.3,1) !important;
    }
    .mtf-chip:active { transform: scale(.96); }
    .mtf-chip.is-active {
        background: #F15A29 !important;
        border-color: #F15A29 !important;
        color: #fff !important;
    }
}

/* ── Открытие панели фильтров и сортировки — выездом снизу ──────────── */
.catalog_cover_screen {
    background-color: #faf7f4;
}
@media (prefers-reduced-motion: no-preference) {
    .catalog_cover_screen[style*="flex"],
    .catalog_cover_screen[style*="block"] {
        animation: mtf-sheet-up 340ms cubic-bezier(.2, .7, .2, 1) both;
    }
}
@keyframes mtf-sheet-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.catalog_cover_screen .cover_screen_header {
    border-bottom: 1px solid #ece9e4;
    background: #faf7f4;
    position: sticky;
    top: 0;
    z-index: 2;
}
.catalog_cover_screen .cover_screen_items .filter { border-bottom: 1px solid #ece9e4; }
.catalog_cover_screen .cover_screen_items .items_title,
.catalog_cover_screen .cover_screen_items .filter .title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #14130e;
}
.catalog_cover_screen label {
    padding: 7px 10px;
    margin-left: -10px;
    border-radius: 10px;
    transition: background-color 160ms ease;
}
.catalog_cover_screen label:active { background: #f1ede8; }
.catalog_cover_screen input[type="checkbox"]:checked { background: #F15A29; border-color: #F15A29; }

/* ── Мобильная версия каталога: плотнее и крупнее товар ─────────────── */
@media (max-width: 853px) {
    .catalog_main { padding-left: 12px; padding-right: 12px; }
    .catalog_main .items_card { border-radius: 18px; padding-bottom: 12px; gap: 6px; }
    .items_card .card_photo { border-radius: 18px 18px 0 0; }
    .items_card img { border-radius: 18px 18px 0 0; transform: scale(1.16); }
    .items_card .items_card_description { padding: 4px 10px 0; }
    .items_card .items_card_description > div.card_model { font-size: 14px; }
    .items_card .items_card_description > div.card_colorway { font-size: 11px; }
    .items_card .items_card_description > div.card_price { margin-top: 6px; font-size: 17px; }
    .items_card .card_split { margin-top: 7px; gap: 4px; }
    .items_card .card_split__bars i { width: 13px; height: 3px; }
    .items_card .card_split__text { font-size: 11px; }
    .items_card .wishlist-btn { width: 34px; height: 34px; }
}

/* =====================================================================
   Дизайн-система, шаг 3 — правки после ревью (09.09.2026)
   ===================================================================== */

/* Сплошная серая заливка <main> закрашивала тёплый фон и точечную сетку
   с body — из-за неё фон читался просто белым. Основу даёт body. */
main.bg_color_F7F7F7 { background-color: transparent; }

/* Выпадашка сортировки уходила ПОД карточки: у карточек своя анимация
   появления, а она создаёт слой. Поднимаем строку сортировки над сеткой. */
.catalog_main .catalog_list_sort { position: relative; z-index: 40; }
.catalog_main #open_sort { position: relative; z-index: 41; }
.catalog_main #sort_pop_up {
    z-index: 42;
    border: 1px solid #ece9e4;
    border-radius: 16px;
    box-shadow: 0 18px 40px -20px rgba(60, 45, 35, .35);
    background: #fff;
    overflow: hidden;
}

/* Расцветки: ряд растянут во всю ширину карточки, «+N» прижат к правому
   краю. Раньше миниатюры были фиксированной ширины и справа зияла дыра. */
.items_card .card-swatches {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.items_card .card-swatch {
    flex: 1 1 0;
    min-width: 0;
    /* потолок нужен для карточек с одной-двумя расцветками: без него
       единственная миниатюра растягивалась на всю ширину карточки */
    max-width: 78px;
    width: auto;
    height: 48px;
    border-radius: 12px;
}
.items_card .card-swatch img { width: 100%; height: 100%; object-fit: contain; }
.items_card .card-swatch--more {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
}
@media (max-width: 853px) {
    .items_card .card-swatches { gap: 5px; }
    .items_card .card-swatch { height: 42px; border-radius: 10px; }
    .items_card .card-swatch--more { min-width: 42px; padding: 0 8px; font-size: 11px; }
}

/* ── Фильтры: счётчики, аккордеон, липкая панель, цвет кружками ──────
   Приёмы фасетных панелей vercel/commerce, algolia/react-instantsearch,
   shadcn-ui/ui (все MIT): количество рядом со значением, сворачиваемые
   секции, собственная прокрутка панели, цвет отдельным элементом. */
.catalog_main .catalog_filters {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.catalog_main .catalog_filters::-webkit-scrollbar { width: 6px; }
.catalog_main .catalog_filters::-webkit-scrollbar-thumb { background: #e2ddd6; border-radius: 3px; }

.catalog_main .catalog_filters .filter .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
}
.catalog_main .catalog_filters .filter .title::after {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid #8d877c;
    border-bottom: 2px solid #8d877c;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 280ms cubic-bezier(.25, 0, .3, 1);
}
.catalog_main .catalog_filters .filter.is-open .title::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}
.catalog_main .catalog_filters .filter .title:focus-visible {
    outline: 2px solid #F15A29;
    outline-offset: 3px;
    border-radius: 8px;
}
.catalog_main .catalog_filters .filter_body { will-change: height; }

/* Количество рядом со значением */
.catalog_main .catalog_filters label { display: flex; align-items: center; gap: 10px; }
.catalog_main .catalog_filters .f_count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #b3aca2;
}
.catalog_main .catalog_filters label:has(input:checked) .f_count { color: #F15A29; }

/* Цвет — кружками, а не плитками с текстом */
.catalog_main .catalog_filters .tile_values_places { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog_main .catalog_filters .tile_values_places label {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #ded9d1;
    font-size: 0;
    box-shadow: inset 0 0 0 2px #fff;
    transition: transform 200ms cubic-bezier(.25, 0, .3, 1), box-shadow 200ms ease;
}
.catalog_main .catalog_filters .tile_values_places label:hover { transform: scale(1.08); }
.catalog_main .catalog_filters .tile_values_places label:has(input:checked) {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #F15A29;
}
.catalog_main .catalog_filters .tile_values_places label input { opacity: 0; width: 100%; height: 100%; margin: 0; }

/* «Показать все» и «Сбросить» */
.catalog_main .catalog_filters .open_all {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: #F15A29;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.catalog_main .catalog_filters .reset {
    margin-top: 4px;
    border-radius: 999px;
    height: 44px;
    font-weight: 700;
}

/* ── Плотность панели фильтров ───────────────────────────────────────
   Было: секции через 30px, строка значения 48px (12px зазор + 36px сама).
   Стало: секции через 20px, строка 32px. Список читается одним взглядом,
   панель стала на треть короче. */
.catalog_main .catalog_filters { gap: 10px; padding: 18px; }
.catalog_main .catalog_filters .filter { padding-bottom: 10px; }
.catalog_main .catalog_filters .filter:first-child { padding-top: 6px; }
.catalog_main .catalog_filters .filter .title { padding: 7px 0; font-size: 14px; }
.catalog_main .catalog_filters .discrete .values_places { gap: 2px; }
.catalog_main .catalog_filters .discrete .values_places label {
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.3;
}
.catalog_main .catalog_filters .filters_title { margin-bottom: 2px; }
.catalog_main .catalog_filters .tile_values_places { gap: 7px; }
.catalog_main .catalog_filters .open_all { margin-top: 4px; font-size: 13px; }
.catalog_main .catalog_filters .reset { height: 40px; margin-top: 2px; }
.catalog_main .catalog_filters .continuous .number_inputs input { height: 38px; }
/* Чекбокс нёс собственные поля 3px — строка не ужималась ниже 38px. */
.catalog_main .catalog_filters .discrete .values_places input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
}
.catalog_main .catalog_filters .discrete .values_places label {
    padding: 4px 8px;
    gap: 9px;
}

/* ── Чипы активных фильтров над сеткой ──────────────────────────────
   Приём фасетных панелей algolia/react-instantsearch и vercel/commerce:
   видно, что применено, и каждый фильтр снимается по одному. */
.mtf-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.mtf-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #ded9d1;
    border-radius: 999px;
    background: #fff;
    color: #14130e;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mtf-active-chip svg { color: #b3aca2; transition: color 160ms ease; }
.mtf-active-chip:hover {
    background: #fff1eb;
    border-color: #F15A29;
    color: #14130e;
    text-decoration: none;
}
.mtf-active-chip:hover svg { color: #F15A29; }
.mtf-active-clear {
    margin-left: 2px;
    color: #8d877c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mtf-active-clear:hover { color: #F15A29; }
@media (max-width: 853px) {
    .mtf-active-filters { padding: 0 4px; margin-bottom: 10px; }
    .mtf-active-chip { height: 32px; font-size: 12px; }
}

/* ── Шапка каталога под систему главной ─────────────────────────────
   Было: «Каталог кроссовок 17211 товаров» одной строкой, счётчик тем же
   кеглем серым — читался как часть заголовка. */
.catalog h1.h_type_1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    letter-spacing: -.03em;
}
.catalog h1.h_type_1 > span:first-child {
    position: relative;
    padding-bottom: 12px;
    font-weight: 800;
    line-height: 1.02;
}
/* Оранжевый росчерк под заголовком — та же деталь, что на главной. */
.catalog h1.h_type_1 > span:first-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 88px;
    height: 4px;
    border-radius: 2px;
    background: #F15A29;
}
.catalog h1.h_type_1 > span:nth-child(2) {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8d877c;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 853px) {
    .catalog h1.h_type_1 { gap: 8px; }
    .catalog h1.h_type_1 > span:first-child { padding-bottom: 10px; }
    .catalog h1.h_type_1 > span:first-child::after { width: 64px; height: 3px; }
    .catalog h1.h_type_1 > span:nth-child(2) { font-size: 12px; }
}

/* ── Расцветки: защита от сплющивания ───────────────────────────────
   flex: 1 1 0 без минимума превращал 12 миниатюр в вертикальные полоски.
   Минимум 38px держит форму, лишние уходят в «+N». */
.items_card .card-swatch { min-width: 38px; }
@media (max-width: 853px) {
    /* Карточки шире: поля каталога и зазор сетки уменьшены. */
    .catalog_main { padding-left: 10px; padding-right: 10px; }
    .items_card .card-swatch { min-width: 34px; height: 40px; }
    .items_card .card-swatch--more { min-width: 40px; }
}

/* ── Карточка товара под дизайн-систему ─────────────────────────────
   Заголовок был одной строкой с расцветкой в кавычках и занимал два
   ряда: «Nike Pegasus 42 'White Lapis Total Orange Metallic Silver'
   Мужские». Разделяем, как в каталоге. */
h1.title.h1-style {
    display: flex;
    flex-direction: column;
    gap: 8px;
    letter-spacing: -.028em;
}
h1.title.h1-style .pdp-title__model {
    position: relative;
    padding-bottom: 12px;
    font-weight: 800;
    line-height: 1.04;
}
h1.title.h1-style .pdp-title__model::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: #F15A29;
}
h1.title.h1-style .pdp-title__cw {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: #8d877c;
}
@media (max-width: 853px) {
    h1.title.h1-style { gap: 6px; }
    h1.title.h1-style .pdp-title__model { padding-bottom: 10px; }
    h1.title.h1-style .pdp-title__model::after { width: 56px; height: 3px; }
    h1.title.h1-style .pdp-title__cw { font-size: 14px; }
}

/* ── Мобильная сетка: карточки шире, расцветки крупнее ──────────────
   Было: поля каталога 10px + зазор строки 24px → карточка 172px, под
   расцветки оставалось 144px на четыре элемента, по 32px каждый. */
@media (max-width: 853px) {
    .catalog_main { padding-left: 8px; padding-right: 8px; }
    .catalog_list .row { gap: 10px !important; }
    .items_card .card-swatches { padding: 8px 10px 4px; gap: 6px; }
    .items_card .card-swatch { height: 48px; min-width: 40px; border-radius: 12px; }
    .items_card .card-swatch--more { min-width: 46px; font-size: 12px; }
}

/* Слайдер похожих товаров: картинка лежит рядом с описанием без обёртки,
   поэтому масштаб 1.14 наезжал на название — обрезаем контейнером. */
.slider .content { overflow: hidden; border-radius: 24px; }
.slider .content img { border-radius: 24px 24px 0 0; }

/* =====================================================================
   Карточка товара под дизайн-систему (10.09.2026)
   ===================================================================== */

/* Зелёная плашка про менеджера была четвёртым цветом на экране рядом с
   оранжевым акцентом, красным «последний размер» и синим Telegram.
   Переводим в тёплую палитру: акцентная полоса и иконка, текст ink. */
.product_info .order_process_info {
    border-left: 3px solid #F15A29 !important;
    background: #fff7f3 !important;
    border-radius: 14px !important;
}
.product_info .order_process_hint { color: #4a453d !important; }
.product_info .order_process_hint svg { color: #F15A29; }

/* Иерархия действий: одно основное, одно вторичное, третье — тихое.
   Раньше три кнопки конкурировали, каждая своего цвета. */
.product_info .default_button.register {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.product_info button[data-cart-url] {
    border-radius: 999px;
    border: 1.5px solid #14130e;
    font-weight: 700;
}

@media (max-width: 853px) {
    /* Галерея занимала 586px при экране 716 — название и цена не попадали
       в первый экран. Ограничиваем, чтобы над сгибом было главное. */
    /* 50vh на само фото + компактная лента миниатюр: при 62vh блок галереи
       выходил 586px и заголовок с ценой начинались ровно на сгибе (711px
       при экране 716). Теперь галерея ~470px и цена видна без скролла. */
    .single_product .product_images > img,
    .single_product .gallery > img { max-height: 50vh; object-fit: contain; }
    .single_product .product_images .gallery img,
    .single_product .gallery .gallery img { max-height: 62px; }

    /* Второй экземпляр блока «Оплата частями» (у кнопки) на телефоне идёт
       в том же скролле, что первый у цены, и читается дублем. */
    .split-pay-card--cta { display: none; }
}

/* ── Переход в каталог в конце гайда ────────────────────────────────
   В 17 из 20 гайдов не было ни одной ссылки в каталог. */
.guide-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 32px 0 8px;
    padding: 20px 22px;
    border-radius: 20px;
    background: #14130e;
    color: #fff;
}
.guide-cta__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-cta__text b { font-size: 19px; font-weight: 800; letter-spacing: -.016em; }
.guide-cta__text span { font-size: 15px; font-weight: 500; color: #c3bdb2; }
.guide-cta__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: #F15A29;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 180ms ease, transform 320ms cubic-bezier(.25,0,.3,1);
}
.guide-cta__btn:hover { background: #d94b1e; color: #fff; text-decoration: none; }
.guide-cta__btn svg { transition: transform 320ms cubic-bezier(.25,0,.3,1); }
.guide-cta__btn:hover svg { transform: translateX(3px); }
@media (max-width: 853px) {
    .guide-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; border-radius: 18px; }
    .guide-cta__text b { font-size: 17px; }
    .guide-cta__text span { font-size: 14px; }
    .guide-cta__btn { justify-content: center; width: 100%; }
}

/* Причина в «Похожих товарах». Блок был восемью карточками без объяснения,
   зачем смотреть их вместо открытой пары: метка отвечает «почему здесь»,
   разница в цене — «чем лучше». */
.same_products .card_why {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.same_products .card_why__tag,
.same_products .card_why__delta {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.same_products .card_why__tag { background: #f2ede7; color: #6f675a; }
/* Оранжевый — только когда пара ДЕШЕВЛЕ открытой: это аргумент. «Дороже»
   тем же цветом читалось как поощрение, поэтому он нейтральный. */
.same_products .card_why__delta { background: #f2ede7; color: #6f675a; }
.same_products .card_why__delta--down { background: #fff2eb; color: #b8410f; }
@media (max-width: 600px) {
    .same_products .card_why { gap: 5px; margin-top: 5px; }
    .same_products .card_why__tag,
    .same_products .card_why__delta { font-size: 10.5px; padding: 3px 8px; }
}
.same_products .h_type_3__why {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f2ede7;
    color: #6f675a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    vertical-align: middle;
}
@media (max-width: 600px) {
    .same_products .h_type_3__why { margin-left: 8px; font-size: 11px; padding: 3px 9px; }
}

/* ── Единый заголовок раздела ─────────────────────────────────────────────
   На главной и в каталоге заголовок стоит слева и подчёркнут короткой
   оранжевой чертой. Остальные разделы жили каждый по-своему: блог и
   размерные сетки центрировали заголовок, подборки давали свой кегль.
   Здесь они приводятся к одному виду — это и есть «равнять на главную». */
.blog-hero__title,
.sel-archive-title,
.sel-title,
.mtf-page__title,
.size-guide-h1,
.instock-hero__title {
    text-align: left;
    color: #14130e;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.blog-hero__title::after,
.sel-archive-title::after,
.mtf-page__title::after,
.size-guide-h1::after,
.instock-hero__title::after,
.catalog h1.h_type_1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: #F15A29;
}
/* Вводный абзац раздела: слева, а не по центру колонки. */
.sg-hub-intro,
.sel-archive-intro,
.blog-hero__subtitle {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
/* Хабы разделов (размерные сетки, подборки) — карточки как на главной:
   белые на тёплом фоне, тёплая рамка, чёрный текст, оранжевая стрелка. */
.sg-hub-card,
.sel-hub-card {
    background: #fff;
    border: 1px solid #ece5dc;
    border-radius: 16px;
    box-shadow: none;
    color: #14130e;
    transition: border-color 180ms ease, transform 320ms cubic-bezier(.25,0,.3,1);
}
.sg-hub-card:hover,
.sel-hub-card:hover {
    border-color: #F15A29;
    color: #14130e;
    transform: translateY(-2px);
    box-shadow: none;
}
.sg-hub-card__name { color: #14130e; }
.sg-hub-card__arrow,
.sel-hub-card__arrow { color: #F15A29; }
.sel-hub-card__count { color: #8d8578; font-weight: 600; }
@media (max-width: 640px) {
    .blog-hero__title::after,
    .sel-archive-title::after,
    .mtf-page__title::after,
    .size-guide-h1::after,
    .instock-hero__title::after { width: 52px; height: 3px; margin-top: 10px; }
}
/* Блог. Страница выводится шаблоном home.php (список записей), а стили жили
   в page-blog.php — правка там не применялась. Держим здесь: белый герой и
   серая лента ниже давали три разных фона на одной странице, теперь работает
   общая тёплая подложка. Заголовок ставим в ту же колонку, что и карточки. */
.blog-hero {
    background: transparent;
    border-bottom: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 24px;
    text-align: left;
}
.blog-section { background: transparent; }
.blog-hero__subtitle { max-width: 640px; margin: 0; text-align: left; }
@media (max-width: 640px) {
    .blog-hero { padding: 28px 16px 18px; }
}

/* ── Каталог: заголовок, ритм и число карточек в ряду ─────────────────────
   1. Оранжевая черта под заголовком попадала в flex-контейнер .catalog
      .h_type_1 и вставала ТРЕТЬЕЙ КОЛОНКОЙ — на странице категории висела
      отдельная полоска под счётчиком товаров. Заголовок делаем блочным,
      счётчик — строкой под ним, черта возвращается на своё место.
   2. Между шапкой раздела и сеткой было 88px пустоты (padding 32 + gap 56).
   3. Карточек в ряду — три, а не четыре (решение владельца 12.09). Ширину
      колонки ограничиваем, иначе на широком экране карточка снова раздувается
      до 280px+, как было до правки сетки. */
.catalog h1.h_type_1 {
    display: block;
}
.catalog h1.h_type_1 span:last-child {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.catalog .section_catalog {
    gap: 28px;
    padding-top: 16px !important;
}
@media (min-width: 769px) {
    .catalog_main .catalog_list .catalog_list_items {
        /* 3 колонки: четвёртой не хватит места (4 × 190 + 3 × 24 = 832). */
        max-width: 828px;
    }
}

/* Полоса расцветок: ровно четыре равные ячейки (три расцветки + счётчик),
   без горизонтальной прокрутки. Раньше полоса скроллилась, и на краю карточки
   всегда торчала обрезанная половина картинки. */
.items_card .card-swatches {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: hidden;
}

/* =====================================================================
   Карточка каталога: товар целиком внутри карточки (12.09.2026)
   ---------------------------------------------------------------------
   Было: снимок увеличивали масштабом (1.06 в сетке, 1.16 на мобильном,
   1.2 при наведении, 1.22 в свотчах) и прятали лишнее в overflow: hidden.
   Приём рассчитан на то, что нормализатор импорта оставляет обувь на 82 %
   ширины кадра, то есть режется только белое поле.

   Замер каталога 12.09.2026 (36 карточек подряд на /products/footwear/):
   у 25 из 36 обувь занимает 97.3–97.7 % ширины кадра, у остальных 74–79 %.
   То есть нормализатор прошёл меньше трети снимков, а зум 1.06 показывает
   лишь 94.3 % кадра — у полнокадровых фото срезало носок и пятку.
   Общий зум не может обслуживать обе популяции, поэтому его больше нет:
   окно фиксированной высоты, снимок вписывается целиком.

   Одинаковый видимый размер обуви в карточках даст только нормализация
   исходников — CSS не может уравнять 97.7 % и 74.6 %.
   ===================================================================== */
.items_card .card_photo {
    aspect-ratio: 1 / 1;
    background: #fff;
}
.items_card .card_photo img {
    width: 100%;
    height: 100%;
    padding: 6px;
    box-sizing: border-box;
    object-fit: contain;
    transform: none;
}
/* Наведение поднимает саму карточку (.items_card:hover выше по файлу).
   Зум снимка убран: на полнокадровых фото он снова срезал бы обувь. */
@media (hover: hover) {
    .items_card:hover .card_photo img { transform: none; }
}
@media (max-width: 853px) {
    .items_card .card_photo img { padding: 5px; transform: none; }
}
/* Свотчи расцветок — та же причина: в плитке 54 px снимок растягивался до
   62 px и обувь обрезалась с боков. */
.items_card .card-swatch img {
    padding: 3px !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* ── Тулбар каталога: чипы фильтров и сортировка в одном ряду ──────────
   Было два ряда: .mtf-active-filters во всю ширину с чипами слева и
   .catalog_list_sort ниже с justify-content: flex-end. Между ними всегда
   оставался пустой прямоугольник около 900×110px, при любом числе
   фильтров (владелец 12.09.2026: «пустота справа на странице категории»). */
.mtf-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mtf-catalog-toolbar .mtf-active-filters {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.mtf-catalog-toolbar .catalog_list_sort {
    flex: 0 0 auto;
    margin-left: auto;
}
@media (max-width: 853px) {
    /* На узком экране сортировка переносится на вторую строку. Без этого
       margin-left: auto прижимал её вправо и она наезжала на кнопку
       «Фильтр»: обе живут внутри .catalog_list_sort. Отдаём второй строке
       всю ширину — «Фильтр» слева, сортировка справа. */
    .mtf-catalog-toolbar { gap: 10px; margin-bottom: 10px; }
    .mtf-catalog-toolbar .mtf-active-filters { flex: 1 1 100%; }
    .mtf-catalog-toolbar .catalog_list_sort {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}

/* ── Заголовок каталога: черта больше не лежит поперёк счётчика ────────
   span заголовка был display: inline при position: relative, поэтому его
   ::after (88×4px) отсчитывал top: 59px от инлайн-бокса, а не от видимой
   высоты строки, и падал ровно на текст «8180 товаров». Второй ::after
   висел на самом h1 и рисовал ещё одну черту. Оставляем одну, под
   названием раздела. */
.h_type_1 > span:first-child { display: inline-block; }
/* Черт было две: росчерк каталога 88px под названием
   (.catalog h1.h_type_1 > span:first-child::after) и общий подчерк разделов
   64px, добавленный при унификации 09.09.2026 — он рисовался под всем блоком,
   то есть под счётчиком. Оставляем росчерк под названием, общий для каталога
   гасим. Специфичность повторяет исходное правило, иначе не перебьёт. */
.catalog h1.h_type_1::after { display: none; }

/* ── Служебные страницы под систему главной (12.09.2026) ──────────────
   Оплата, доставка, гарантия, «Покупателям» и контакты жили на жёстко
   заданной серой заливке bg_color_F7F7F7: она закрашивала тёплый фон
   сайта и точечную сетку, из-за чего разделы читались как чужой сайт.
   Класс снят с обёрток в шаблонах (на полях форм серый оставлен).
   Здесь — общий вид раздела: заголовок с оранжевым росчерком и блок
   перелинковки, который раньше отсутствовал: каждая служебная страница
   была тупиком. */
.section_FAQ > h1.mtf-page__title,
.section_social > h1.mtf-page__title {
    text-align: left;
    font-size: clamp(26px, 4vw, 38px);
    margin: 0 0 22px;
}

.mtf-help-nav {
    max-width: 960px;
    margin: 48px auto 8px;
    padding: 0 16px;
}
.mtf-help-nav__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #14130e;
    margin: 0 0 16px;
}
.mtf-help-nav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 12px;
}
.mtf-help-nav__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 44px 18px 20px;
    background: #fff;
    border: 1px solid #ece9e4;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 19, 14, .03);
    transition: border-color 200ms ease, box-shadow 320ms cubic-bezier(.25, 0, .3, 1),
                transform 320ms cubic-bezier(.25, 0, .3, 1);
}
.mtf-help-nav__name { font-size: 16px; font-weight: 700; color: #14130e; }
.mtf-help-nav__desc { font-size: 13px; line-height: 1.4; color: #8d877c; }
.mtf-help-nav__arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: #F15A29;
    font-size: 18px;
    transition: transform 320ms cubic-bezier(.25, 0, .3, 1);
}
@media (hover: hover) {
    .mtf-help-nav__card:hover {
        border-color: #ded9d1;
        transform: translateY(-3px);
        box-shadow: 0 18px 34px -22px rgba(60, 45, 35, .45);
    }
    .mtf-help-nav__card:hover .mtf-help-nav__arrow { transform: translateY(-50%) translateX(4px); }
}
@media (max-width: 853px) {
    .mtf-help-nav { margin-top: 36px; padding: 0 12px; }
    .mtf-help-nav__grid { grid-template-columns: 1fr; }
}

/* ── Избранное под общую систему (12.09.2026) ─────────────────────────
   Росчерк под заголовком жил в правиле, привязанном к .catalog, и сюда
   не доставал — страница выглядела «недоделанной» рядом с блогом и
   подборками. Плюс пустое состояние получило выходы вместо тупика. */
.section_catalog .wishlist-header h1.h_type_1 > span:first-child {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}
.section_catalog .wishlist-header h1.h_type_1 > span:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: #F15A29;
}
.wl-empty-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 32px auto 0;
    text-align: left;
}
.wl-empty-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ece9e4;
    border-radius: 20px;
    text-decoration: none;
    transition: border-color 200ms ease, transform 320ms cubic-bezier(.25, 0, .3, 1);
}
.wl-empty-link__name { font-size: 15px; font-weight: 700; color: #14130e; }
.wl-empty-link__desc { font-size: 13px; line-height: 1.4; color: #8d877c; }
@media (hover: hover) {
    .wl-empty-link:hover { border-color: #F15A29; transform: translateY(-3px); }
}
@media (max-width: 853px) {
    .wl-empty-links { grid-template-columns: 1fr; margin-top: 24px; }
}

/* ── Товары на странице размерной сетки (13.09.2026) ──────────────────
   Метрика: /razmery/{brand}/ дают 1618 визитов из поиска в месяц — второй
   результат после карточек товара, — но конверсия 3.8 % против 14.9 % у
   карточек и 41.3 % у бренд-страниц. На странице было 38 ссылок в каталог
   и 34 на бренды, но ни одной карточки: текстовая ссылка не продаёт.
   Блок ставится под таблицей размеров, когда человек уже знает свой размер. */
.sg-picks {
    max-width: 1200px;
    margin: 48px auto 8px;
    padding: 0 24px;
}
.sg-picks__title {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #14130e;
    margin: 0 0 6px;
}
.sg-picks__lead {
    font-size: 14px;
    color: #8d877c;
    margin: 0 0 18px;
}
.sg-picks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}
.sg-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 14px;
    background: #fff;
    border: 1px solid #ece9e4;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 19, 14, .03);
    transition: border-color 200ms ease, transform 320ms cubic-bezier(.25, 0, .3, 1),
                box-shadow 320ms cubic-bezier(.25, 0, .3, 1);
}
.sg-pick__ph {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.sg-pick__ph img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.sg-pick__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #14130e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}
.sg-pick__price { font-size: 15px; font-weight: 700; color: #F15A29; }
.sg-picks__all {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 700;
    color: #F15A29;
    text-decoration: none;
}
.sg-picks__all:hover { text-decoration: underline; }
@media (hover: hover) {
    .sg-pick:hover {
        border-color: #ded9d1;
        transform: translateY(-3px);
        box-shadow: 0 18px 34px -22px rgba(60, 45, 35, .45);
    }
}
@media (max-width: 853px) {
    .sg-picks { margin-top: 32px; padding: 0 12px; }
    .sg-picks__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* === media.css === */
@media(min-width: 1440px) {
	.items_card {
        width: 272px;
    }
}
@media(max-width: 1440px) {
    /*Item card*/
    .items_card {
        height: 100%;
    }
    .items_card img {
        height: auto;
    }

    /*Grid for section*/
    .grid .grid_line{
        display: flex;
        gap: 24px;
        justify-content: center;
    }

    /*SECTIONS*/
    /*Section choose (index page)*/
    .section_choose {
        justify-content: center;
        gap: 23px;
    }
    .section_choose div,
    .section_choose div:hover {
        background-size: cover;
    }

    /*Section items_title_another (index page)*/
    .items_title_another .items {
        justify-content: center;
        gap: 17px;
    }

    /*Section category (index page)*/
/*     .section_category .grid .grid_line .grid_line_item,
    .section_category .grid .grid_line .grid_line_item:hover {
        background-size: cover;
    } */
}
@media(max-width: 1200px) {
    /*SECTIONS*/
    /*Section category (index page)*/
    .section_category .grid .grid_line .grid_line_item span {
        padding: 20px 10px;
        text-align: center;
        height: 88px;
        align-items: center;
    }
	.items_card {
		width:100%;
	}

}
@media(max-width: 1140px) {
    /* (#header nav width rules removed 2026-08-28 — dead code: the desktop
       header is display:none at ≤1200px, see the 05.08.2026 block below.) */
    /*SECTIONS*/
    /*Section choose (index page)*/
    .section_choose div {
        height: 360px;
    }

    /*Section brands (index page)*/
    .section_slider_brands .grid .grid_line .grid_line_item{
        background-size: 82%;
        height: 130px;
    }
    .section_slider_brands .grid .grid_line .grid_line_item:hover{
        background-size: 92%;
    }
}
@media(max-width: 853px) {
	#sort_pop_up {
		display: none !important;
	}
}
@media(max-width: 940px) {
    /*Default classes*/
    .h_type_2 {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 2rem;
    }
    /*Footer*/
    #footer {
        padding-right: 110px;
        padding-left: 110px;
    }

    /*Section brands (index page)*/
    .section_slider_brands .grid .grid_line .grid_line_item{
        background-size: contain;
        height: 100px;
    }
    .section_slider_brands .grid .grid_line .grid_line_item:hover{
        background-size: contain;
    }

    /*Section category (index page)*/
    .section_category .grid .grid_line .grid_line_item {
        height: 210px;
    }
    .section_category .grid .grid_line .grid_line_item span {
        padding: 10px 5px;
        text-align: center;
        height: 68px;
        align-items: center;
    }
}
@media (min-width: 853px) and (max-width: 1024px) {
    .items_card .items_card_description {
		font-size: 0.8rem;
	}
}
@media (min-width: 542px) and (max-width: 1024px) {
    .continuous .values_places .two_side_inputs .range_inputs .range_track {
		left: 20px;
		width: 97%;
	}
}

@media(max-width: 1024px) {
    /*Default classes*/
    .p_default {
        padding: 56px 32px;
    }
    .section_slider {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    .section_slider_brands {
        padding-left: 20px !important;
        padding-right: 0 !important;
    }
    .slider_replace {
        display: none !important;
    }
    .mobile_replace {
        display: none !important;
    }
	
    /*Mobile grid*/
    .mobile_grid .grid_line {
        display: flex;
        height: 239px;
        column-gap: 24px;
    }
	.mobile_grid .grid_line a {
		width: 340px;
        height: 100%;
	}
    .mobile_grid .grid_line .grid_line_item {
        width: 100%;
        height: 100%;
        border-radius: 48px;
        padding: 0 16px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
		background-position: center;
    }
    .mobile_grid .grid_line .grid_line_item span {
        background-color: white;
        border-radius: 32px;
        padding: 24px;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5rem;
        letter-spacing: 0.02rem;
        text-align: center;
    }

    /*Breadcrumb*/
    .breadcrumb {
        display: none;
    }

    /*Contact form*/
    .section_contact_form .form_description {
        line-height: 2rem;
    }
    .section_contact_form form {
        width: min(480px, 100%);
    }

    /* Slider (index page)*/
    .slider {
        display: block;
        overflow-x: hidden;
    }
    .slick-track {
        display: flex;
    }
    .slick-slide {
        display: block;
    }
    /* Pre-init guard: before slick.js wraps slides with .slick-slide,
       the bare .slider > div > .wrapper structure has no width or height,
       and brand background-images render at their natural (huge) size.
       Constrain the brand-slider items so the layout is sane in that
       in-between frame and on browsers where slick fails to init. */
    .section_slider_brands .slider > div {
        max-width: 326px;
        flex-shrink: 0;
    }
    .section_slider_brands .slider .grid_line_item {
        height: 160px;
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #F2F2F2;
        border-radius: 32px;
    }
    .slick-dots {
        padding: 0;
        column-gap: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slick-dots li {
        list-style: none;
        background-color: transparent;
    }
    .slick-dots li button {
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        height: 8px;
        width: 8px;
        font-size: 0;
        padding: 0;
    }
    .slick-dots li.slick-active button {
        background: rgba(0, 0, 0, 1);
    }

    /* Slider section_slider (index page)*/
    .section_slider .slick-slide .wrapper {
        padding: 0 12px;
        height: 100%;
    }
    .section_slider .slick-slide .wrapper .content {
        display: flex;
        flex-direction: column;
        height: inherit;
        gap: 16px;
        align-items: center;
        background-color: white;
        border: 1px solid #e6e6e6;
        border-radius: 32px;
        line-height: 1.5rem;
        letter-spacing: 0.02rem;
        padding-bottom: 24px;
		height: 100%;
    }
    .section_slider .slick-slide .wrapper .content img {
        border-radius: 32px;
        /* Product cutouts — show the whole shoe, don't crop it. Белый фон,
           крупнее (2026-08-26). */
        object-fit: contain;
        background: #fff;
        padding: 8px 10px 0;
        box-sizing: border-box;
        height: 260px;
        width: 100%;
    }
    .section_slider .slick-slide .wrapper .content .items_card_description {
        padding: 0 16px;
        text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
    }

    /* Slider section_slider_brands (index page)*/
    .section_slider_brands .slick-slide .wrapper {
        padding: 0 12px 0 12px;
    }
    .section_slider_brands .slick-slide .wrapper .content .grid_line_item{
        height: 160px;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #F2F2F2;
        border-radius: 32px;
    }
    .section_slider_brands .slick-track .slick-slide {
        width: 326px;
    }

    /*Footer*/
    #footer {
        padding: 24px 20px !important;
        font-size: 14px;
    }
    #footer nav {
        justify-content: flex-start;
        gap: 28px;
        flex-wrap: wrap;
        padding: 24px 0;
    }
    #footer nav .nav_col {
        width: calc(50% - 14px);
        min-width: 140px;
        font-size: 13px;
    }
    #footer .nav_col_title {
        font-size: 12px;
        letter-spacing: 0.06em;
    }
    #footer .nav_col_links a {
        font-size: 13px;
        line-height: 1.5;
    }
    #footer .label {
        font-size: 11px;
    }
    #footer .logo img {
        max-width: 140px;
        height: auto;
    }
@media (max-width: 420px) {
    #footer nav {
        gap: 20px;
    }
    #footer nav .nav_col {
        width: 100%;
    }
}

    /*SECTIONS*/
    /*Section choose (index page)*/
    .section_choose div {
        width: 100%;
    }

    /*Section items_title_another (index page)*/
    .items_title_another .title_another {
        padding-left: 12px;
        padding-right: 12px;
    }

    /*Section brands (index page)*/
    .section_slider_brands .h_type_2 {
        padding-left: 12px;
        padding-right: 32px;
    }

    /*Section category (index page)*/
    .section_category .mobile_grid {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }

    /*Section catalog (catalog page)*/
    .catalog_main .catalog_list {
        gap: 32px;
    }
    .catalog_main .catalog_filters {
        display: none !important;
    }
    .catalog_main .catalog_list .catalog_list_sort {
        justify-content: space-between;
    }
    .catalog_main .catalog_list .catalog_list_sort div {
        column-gap: 10px;
        justify-content: flex-start;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        cursor: pointer;
        width: auto;
    }
    .catalog_main .catalog_list .catalog_list_sort .filter_button {
        display: flex;
		align-items: center;
    }
    
    
	#filter_screen, #sort_screen {
        overflow-y: auto;
    }
	.section_product {
		justify-content: flex-start;
		column-gap: 24px;
	}
	.section_product .product_images {
		width: 430px;
	}
	.section_product .product_info {
		width: 100%;
	}
    /*Section same products (product page)*/
    .items .mobile_remove{
        display: none;
    }
    .same_products .items .items_card:not(.mobile_remove) {
        width: 340px;
        height: 405px;
    }
    .same_products .items .items_card:not(.mobile_remove) img{
        height: 269px;
        object-fit: cover;
        border-radius: 32px;
    }
}
@media(max-width: 853px) {
	.catalog_main .catalog_list .catalog_list_items {
        display: none;
    }
	.catalog_main .catalog_list .mobile_catalog_list_items {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }
    .catalog_main .catalog_list .mobile_catalog_list_items .row {
        display: flex;
        justify-content: space-between;
		column-gap: 24px;
    }
    .catalog_main .catalog_list .mobile_catalog_list_items .items_card {
        height: auto;
        flex: 1 1 0;
        min-width: 0;
    }
    /* The image wrapper anchor wraps BOTH the img and the description div,
       so we cannot use absolute positioning on it. Instead force an
       explicit aspect-ratio + min-height on just the img — this reserves
       the box on first paint, even on iOS Safari which does not always
       honour HTML width/height attrs alongside `loading="lazy"`. */
    .catalog_main .catalog_list .mobile_catalog_list_items .image_wrapper {
        display: block;
        width: 100%;
    }
    .catalog_main .catalog_list .mobile_catalog_list_items .items_card img {
        /* Card itself is --radius-card (14px, premium.css). A 32px all-corner
           radius out-rounded the card and left white wedges above the copy —
           round only the top, same as the desktop card. */
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        object-fit: cover;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: 160px;       /* fallback for browsers ignoring aspect-ratio */
        background-color: #f7f7f7;
        display: block;
    }
	#Mobile-paged {
		display: flex;
	}
	.all_search .pagination_wrapper, 
	#Mobile-paged .pagination_wrapper {
		padding: 0;
		border-radius: 12px;
		display: flex;
	}
	.all_search .wp_page_link,
	#Mobile-paged  .page_link {
		padding: 8px;
		font-size: 0.8rem;
		display: flex;
		align-items: center;
	}
	.all_search .wp_page_link:first-child,
	#Mobile-paged  .page_link:first-child {
		border-bottom-left-radius: 12px;
		border-top-left-radius: 12px;
		padding-left: 8px;
	}
	.all_search .wp_page_link:last-child,
	#Mobile-paged  .page_link:last-child {
		border-bottom-right-radius: 12px;
		border-top-right-radius: 12px;
		padding-right: 8px;
	}
	.all_search .pagination_container .arrow,
	#Mobile-paged .arrow {
		display: flex;
		align-items: center;
	}
	#PC-paged {
		display: none;
	}
	/*Section product (product page)*/
    .section_product .product_images {
        width: 340px;
    }
}
@media(max-width: 800px) {
    /*Footer*/
    #footer {
        padding-right: 70px;
        padding-left: 70px;
    }

    /*SECTIONS*/
    /*Section choose (index page)*/
    .section_choose div {
        height: 250px;
    }
}
@media (min-width: 440px) and (max-width: 541px) {
    .all_search .item_card .col-md-auto {
		width: 100%;
	}
	.all_search .item_image {
		max-width: unset;
		max-height: 200px;
		width: 100%;
	}
}
@media(max-width: 541px) {
	.continuous .values_places .two_side_inputs .range_inputs .range_track {
		width: 95%;
	}
	.XS_info {
        display: block;
    }
	.xs_remove {
        display: none !important;
    }
	/*Section product (product page)*/
	.section_product {
        flex-direction: column;
    }
    .section_product .product_images {
        width: 100%;
        padding-bottom: 32px;
    }
    /* ── ФОТО ПЕРВЫМ НА МОБИЛЬНОМ (03.09.2026) ─────────────────────────
       Было: название → цена → рассрочка → артикул → цвет → и только
       четвёртым блоком фотография (405px от верха). Полэкрана текста
       перед тем, ради чего человек зашёл. Замеры витрин: Lamoda ставит
       фото на 56px, on.com на 70, Top4Running на 100 — все открывают
       карточку продуктом.
       Меняется ТОЛЬКО визуальный порядок через flex-order: разметка и
       порядок в DOM прежние, поэтому H1 для поисковика и скринридера
       по-прежнему идёт первым. Цена уезжает на ~664px, но она всегда
       видна в липкой панели снизу вместе с кнопкой.
       ОТКАТ: удалить этот блок из трёх строк — больше ничего не трогалось.
       ─────────────────────────────────────────────────────────────── */
    .section_product .product_images {
        order: -1;
        padding-bottom: 20px;
    }
    .section_product .product_info {
        width: 100%;
    }
    .section_product .product_info .title_text .text {
        padding-inline-start: 20px;
    }
	/*Section slider*/
    .section_slider .items_title_another {
        row-gap: 16px !important;
    }
    .section_slider .slick-slide .wrapper {
        padding: 0 4px;
    }
    .section_slider .slick-slide .wrapper .content {
        border-radius: 16px;
        gap: 12px;
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0;
        align-items: center;
        font-weight: 500;
        padding-bottom: 12px;
    }
    /* Product shots are cutouts on white — `contain` shows the whole shoe
       instead of the wide letterbox crop `cover` produced (image read as a
       huge stubby band on the single-slide mobile carousel). Cap the height
       and centre so the card stays balanced against the title + price. */
    .section_slider .slick-slide .wrapper .content img {
        border-radius: 16px;
        /* Белый фон + крупный кроссовок почти во всю ширину/высоту карточки:
           квадрат 1:1 вместо низкой полоски 170px, contain, минимальный отступ,
           белый под студийный шот (2026-08-26, по просьбе владельца). */
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: contain;
        padding: 6px 8px 0;
        box-sizing: border-box;
        background: #fff;
    }
    .section_slider .slick-slide .wrapper .content .items_card_description {
        text-align: start;
        padding: 0 12px;
        width: 100%;
    }
    /* Title — keep readable, clamp to 2 lines so price never gets pushed off. */
    .section_slider .slick-slide .wrapper .content .items_card_description > div:nth-child(1) {
        font-size: 0.8125rem;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-text, #1a1a1a);
        line-height: 1.3;
    }
    /* Price — PRIMARY signal: bigger, bolder, brand accent so it stops getting
       lost. (The carousel markup has no .items_card wrapper, so the polished
       grid price rule in style.css never reached it.) */
    .section_slider .slick-slide .wrapper .content .items_card_description > div:last-child {
        font-size: 1.0625rem;
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-primary, #F15A29);
        line-height: 1.2;
        margin-top: 4px;
    }
	/*Section choose (index page)*/
    .section_choose {
        flex-direction: column;
    }
	 /*Mobile grid*/
	 .section_category .mobile_grid {
        row-gap: 0;
	}
    .mobile_grid .grid_line {
        flex-wrap: wrap;
        height: auto;
    }
    .mobile_grid .grid_line {
        gap: 12px;
        margin-bottom: 12px;
    }
    .mobile_grid .grid_line .grid_line_item {
        width: 100%;
        /* Было 84px + span-pill во всю плитку → фото категории невидимо.
           Выше плитка + компактный pill снизу = фото видно (2026-08-26). */
        height: 132px;
        border-radius: 20px;
        padding: 10px;
        justify-content: flex-end;
        background-size: cover;
        background-position: center;
    }
	.mobile_grid .grid_line a {
		width: 100%;
	}
    .mobile_grid .grid_line .grid_line_item span {
        width: 100%;
        border-radius: 12px;
        padding: 9px 14px;
        font-weight: 600;
    }
}

@media(max-width: 510px) {
	/*Header*/
    #header {
        display: none;
    }
    #xs_header {
        display: flex;
        align-items: center;
		justify-content: space-between;
    }
	#xs_header #open_search_mobile {
		font-size: 1.4rem;
        margin-right: 16px;
        padding-bottom: 3px;
	}
	#order_screen {
		background-color: white;
	}
    #order_screen .order_screen_form {
        margin: 0;
        width: 100%;
        border-radius: 0;
    }
	.section_contact_form form {
        width: 100%;
    }
}
@media(max-width: 440px) {
    body {
        padding: 0;
    }
    /*Default classes*/
    .p_default {
        padding: 32px 16px;
    }
    .h_type_2 {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 2rem;
    }
    .h_type_1 {
        font-size: 1.8rem;
        line-height: 2rem;
    }
    .xs_show {
        display: flex;
    }
	/*Section slider*/
    .section_slider {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
    .section_slider_brands {
        padding-left: 8px !important;
        padding-right: 0 !important;
    }

	#order_screen .order_screen_form {
        padding: 16px;
        position: relative;
    }
	#order_screen .order_screen_form a{
        position: absolute;
		bottom: 16px;
		left: 16px;
		right: 16px;
    }
	.section_slider .slick-slide .wrapper .content {
        font-size: 0.625rem;
    }
    /*Accordion*/
    .accordion-item {
        padding: 16px;
        border-radius: 0;
    }
    .accordion-button {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .accordion-body {
        padding-top: 12px;
        font-size: 0.75rem;
        line-height: 1.25rem;
    }
    .accordion-body ul {
        padding-left: 16px;
    }
    .accordion-button::after {
        background-size: 1rem;
    }

    /*Contact form*/
	.section_contact_form .h_type_2 {
		width: 100%;
		text-align: start;
	}
    .section_contact_form .form_description {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
        width: 100%;
        text-align: start;
    }

    /*SECTIONS*/
    /*Section items_title_another (index page)*/
    .items_title_another .title_another {
        padding-left: 4px;
        padding-right: 4px;
    }

    /*Section category (index page)*/
    .section_category {
        row-gap: 16px !important;
    }
	
    /* Slider section_slider_brands (index page)*/
    .section_slider_brands .h_type_2,
    .section_slider_brands .slick-slide .wrapper {
        padding: 0 8px;
    }
    .section_slider_brands .slick-track .slick-slide {
        width: 266px;
    }

    /*Section catalog (catalog page)*/
    .catalog .h_type_1 {
        display: flex;
        gap: 8px;
        align-items: center;
		text-align: center;
		flex-direction: column;
    }
    .catalog .section_catalog {
        gap: 32px;
    }
    .catalog_main .catalog_list .catalog_list_sort {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5rem;
        letter-spacing: 0;
    }
    .catalog_main .catalog_list {
        gap: 16px;
    }
    .catalog_main .catalog_list .mobile_catalog_list_items .items_card {
        border-radius: 16px;
        padding-bottom: 12px;
    }
    .catalog_main .catalog_list .mobile_catalog_list_items .items_card img {
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        object-fit: cover;
    }
	.items_card .items_card_description,
    .items_card_description {
        padding: 0 12px;
        text-align: start;
        /* 0.625rem is 10px — under the 12px floor mobile audits flag, and
           this is product copy that is read, not a badge that is glanced at. */
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1rem;
    }
	/* Price row. Was div:last-child from when the price closed the card —
	   the split badge is the last child now and was inheriting 600 weight. */
	.items_card .items_card_description .card_price,
    .items_card_description .card_price {
		font-size: 0.75rem;
        font-weight: 600;
        margin-top: 4px;
    }
    .catalog_cover_screen .cover_screen_items {
        padding: 0 16px;
    }
	.continuous .values_places .two_side_inputs .number_inputs div {
		height: 2px;
		width: 25px;
	}
	.continuous .values_places .two_side_inputs input[type=number] {
		font-size: 1rem;
		padding: 8px;
	}

    /*Section social (contacts page)*/
    .section_social {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .section_social .h_type_1 {
        text-align: center;
    }
    .section_social .social_links {
        padding: 32px 16px;
        margin-top: 32px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .section_social .social_links .text br{
        display: none;
    }

    /*Section FAQ (for customers page)*/
    .section_FAQ {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .section_FAQ .h_type_1 {
        text-align: center;
    }
    .section_FAQ .accordion {
        margin-top: 32px;
    }
	/*Mobile grid*/
    .mobile_grid .grid_line .grid_line_item {
        height: 122px;
    }
}
@media (max-width: 431px) {
	.all_search .row .col:first-child {
		margin-right: 0;
	}
	#footer .label {
		display: flex;
		flex-direction: column;
		font-size: 0.8rem;
	}
}

@media (max-width: 415px) {
    .catalog_main .catalog_list .mobile_catalog_list_items .items_card {
        width: auto;
        height: auto;
    }
	.all_search h2 {
		font-size: 21px;
	}
	.all_search .item_text {
		font-size: 0.9rem;
	}
}
@media (max-width: 395px) {
	.catalog_main .catalog_list .mobile_catalog_list_items .items_card {
		width: auto;
	}
	.catalog_main .catalog_list .catalog_list_sort .filter_button {
       font-size: 0.7rem;
    }
	.catalog_main .catalog_list .catalog_list_sort #open_sort {
		padding: 6px 12px;
		width: 130px;
		font-size: 0.7rem;
	}
	.section_product .product_info .size .size_value label {
		min-width: 65px;
		padding: 0px;
	}
}
@media (max-width: 376px) {
	.catalog_main .catalog_list .mobile_catalog_list_items .items_card {
		width: auto;
	}
	#order_screen .order_screen_form h1 {
		font-size: 1.75rem;
	}
	#order_screen .order_screen_form .icon-cross {
		width: 28px;
		height: 28px;
	}
	.all_search .item_image {
		max-width: unset;
		width: 100%;
	}
	.all_search .col {
		flex: unset;
	}
	.all_search .item_card .col-md-auto {
		width: 100%;
	}
	.all_search .item_text {
        font-size: 1rem;
		text-align: center;
		width: 100%;
    }
}
@media (max-width: 361px) {
	.catalog_main .catalog_list .mobile_catalog_list_items .items_card {
		width: auto;
	}
}
@media (max-width: 345px) {
	.catalog_main .catalog_list .mobile_catalog_list_items .items_card {
		width: auto;
	}
}

/* Phones get the landscape crop emitted as --mtf-bg-mob by section-category.php.
   !important is required: the tile's background-image is an inline style, and a
   stylesheet cannot beat that without it. Falls back to the original when no
   crop exists, because the custom property is set to the same URL then. */
@media(max-width: 853px) {
    .section_category .grid .grid_line .grid_line_item[style*="--mtf-bg-mob"] {
        background-image: var(--mtf-bg-mob) !important;
    }
}

/* =====================================================================
   Шапка: ширина меню (05.08.2026)

   Правила выше задают #header nav фиксированную ширину (550/540/506px),
   а восемь пунктов меню занимают ~715px плюс промежутки. Меню выезжало
   за свой блок и наползало на иконки справа; добавленная корзина сделала
   это очевидным, но сломано было и до неё.

   1200-1440px — отпускаем ширину и ужимаем промежутки, всё помещается.
   До 1200px — восьми пунктам места нет ни при каких отступах, поэтому
   отдаём мобильную шапку с бургером (раньше она включалась только с 510px,
   и весь диапазон планшетов жил со сломанным меню).
   ===================================================================== */
@media (max-width: 1440px) and (min-width: 1201px) {
    #header nav {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        gap: 22px;
        justify-content: flex-start;
    }
    #header nav > ul {
        gap: 22px;
    }
}

@media (max-width: 1200px) {
    #header {
        display: none;
    }
    #xs_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------
   Мобильная шапка на узких экранах (05.08.2026).

   Логотип центрировался абсолютно (left:50%), а справа стоят четыре иконки
   по 44px — это намеренный размер тач-таргета из мобильного аудита, ужимать
   его нельзя. На 390px иконки занимают 182px и начинаются раньше, чем
   заканчивается логотип: «tf» и лупа наезжали друг на друга.

   Поэтому на узких экранах убираем абсолютное центрирование и ставим логотип
   в поток: он центрируется в промежутке между бургером и иконками. Оптически
   это ровно, а перекрытие невозможно по построению.
   --------------------------------------------------------------------- */
/* 09.09.2026: логотип возвращён в абсолютный центр экрана. Раньше он стоял
   в потоке и на 390px уезжал влево примерно на 48px — центр промежутка между
   бургером и иконками не совпадает с центром экрана.
   Наезда больше нет: из шапки убран Telegram, иконки занимают 140px и
   начинаются на ~242px, логотип же кончается на ~217px. */
@media (max-width: 480px) {
    #xs_header .xs-header-actions {
        gap: 2px;
        flex: 0 0 auto;
    }
}

/* Корзина в мобильной шапке — оранжевый счётчик, как на десктопе. */
#xs_header .xs-header-cart .xs-wishlist-badge {
    background: #F15A29;
}

/* === premium.css === */
/* ============================================
   PREMIUM DESIGN LAYER — market-tf.ru
   Design tokens, animations, focus states,
   micro-interactions, premium hover effects
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Colors */
  --color-primary: #F15A29;
  /* Hover canon = --mtf-orange-hover (design-fixes.css). Six different
     hover-oranges lived across the theme before 28.08.2026. */
  --color-primary-hover: #BE3F18;
  --color-primary-active: #A63512;
  --color-primary-light: rgba(241, 90, 41, 0.08);
  --color-text: #212529;
  --color-text-secondary: #555555;
  --color-text-muted: #6B6B6B; /* = --mtf-text-muted; #888 was 2.8:1 on white */
  --color-border: #E6E6E6;
  --color-border-hover: #CCCCCC;
  --color-bg-light: #F7F7F7;
  --color-bg-subtle: #F2F2F2;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-error: #E53935;
  --color-success: #2E7D32;
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-body: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-full: 50%;

  /* Shadows — layered for depth */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  /* Resting card shadow — cards get subtle depth even before hover.
     Nothing in the real world floats with zero shadow. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-button: 0 2px 8px rgba(241, 90, 41, 0.25);
  --shadow-button-hover: 0 4px 16px rgba(241, 90, 41, 0.35);

  /* Card radius — softer than the old 32px maximalism (design uplift U1). */
  --radius-card: 14px;

  /* Transitions — stronger custom curves (built-in CSS easings lack punch). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* --- Self-hosted Onest (neo-grotesk, latin + cyrillic) ------------------- */
/* Previously the site declared 'Inter' with no @font-face, so it silently fell
   back to the system sans. Onest is self-hosted (woff2, ~80KB total) and now
   the real brand typeface across the whole site. */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/onest-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/onest-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/onest-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/onest-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/onest-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/onest-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/onest-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* --- Smooth Scrolling --- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Body Font Weight Fix (600 -> 400 for body, keep 600 for headings) --- */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.01em;
}
/* Form controls don't inherit font-family by default — opt them in so the
   whole UI (buttons, inputs, selects) speaks Onest, not the UA default. */
button, input, select, textarea, optgroup {
  font-family: var(--font-body);
}
.h_type_1, .h_type_2, .h_type_3,
h1, h2, h3 {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}
.h_type_1, h1 {
  font-weight: var(--font-weight-bold);
}

/* --- Selection Color --- */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --- Focus States (Accessibility) --- */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

/* --- Link Transitions --- */
a {
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

/* --- Button Premium Styling --- */
.default_button {
  position: relative;
  font-weight: var(--font-weight-semibold);
  padding: 16px 32px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-button);
}
.default_button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.default_button:active {
  background-color: var(--color-primary-active);
  /* Press feedback: scale down instantly so the button feels physically
     pressed (Apple: respond on pointer-down; Emil: scale 0.95-0.98). */
  transform: scale(0.97);
  box-shadow: none;
  transition-duration: 60ms;
}

/* --- Product Card Hover Effects --- */
.items_card {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  overflow: hidden;
  /* Softer radius + subtle resting depth (design uplift U1). Overrides the
     old 32px maximalism in style.css. */
  border-radius: var(--radius-card);
  border-color: #ececec;
  box-shadow: var(--shadow-card);
}
.items_card img,
.items_card[data-brand-slug="tf-clo"] .image_wrapper {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.items_card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-hover);
}
.items_card img {
  transition: transform var(--duration-slow) var(--ease-out);
}
.items_card:hover img {
  transform: scale(1.04);
}
.items_card .items_card_description {
  font-weight: var(--font-weight-medium);
}
/* Price row (was div:last-child — the split badge sits last in the card now). */
.items_card .items_card_description .card_price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* --- Brand Grid Items --- */
.section_slider_brands .grid .grid_line .grid_line_item {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background-size var(--duration-slow) var(--ease-out);
}
.section_slider_brands .grid .grid_line .grid_line_item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* --- Category Cards --- */
.section_category .grid .grid_line .grid_line_item {
  transition: background-size var(--duration-slow) var(--ease-out);
}
.section_category .grid .grid_line .grid_line_item span {
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.section_category .grid .grid_line .grid_line_item span:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* --- Choose Section (Спортивная / Повседневная) --- */
.section_choose div {
  transition: background-size var(--duration-slow) var(--ease-out);
  overflow: hidden;
}
.section_choose span {
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
  font-weight: var(--font-weight-semibold);
}
.section_choose span:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Product Page Image Zoom --- */
.section_product .product_images .zoooom {
  cursor: zoom-in;
  transition: transform var(--duration-slow) var(--ease-out);
}
.section_product .product_images .zoooom:hover {
  transform: scale(1.02);
}

/* --- Gallery Thumbnails --- */
.section_product .product_images .gallery img {
  transition: border-color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  opacity: 0.7;
  cursor: pointer;
}
.section_product .product_images .gallery img:hover,
.section_product .product_images .gallery img.border_1px {
  opacity: 1;
}

/* --- Size Buttons Premium --- */
.size_value label {
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
  cursor: pointer;
}
.size_value label:not(.unavailable):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.size_value input:checked + label {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  transform: scale(1.02);
  box-shadow: var(--shadow-button);
}

/* --- Toggle Size Buttons (EU/US/UK) --- */
.toggle_sizes button {
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* --- Order Button --- */
button.register {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* --- Accordion Premium --- */
.accordion-item {
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.accordion-item:hover {
  border-color: var(--color-border-hover);
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-hover);
}
.accordion-button {
  font-weight: var(--font-weight-semibold);
}

/* --- Footer Links --- */
#footer nav a {
  transition: opacity var(--duration-fast) var(--ease-out);
}
#footer nav a:hover {
  opacity: 1;
}

/* --- Header Nav Premium --- */
#header nav a {
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
#header nav .dropdown-menu {
  animation: dropdown-appear var(--duration-base) var(--ease-out);
  transform-origin: top center;
}
@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Order Modal --- */
#order_screen {
  animation: modal-backdrop var(--duration-base) var(--ease-out);
}
#order_screen .order_screen_form {
  animation: modal-slide-up var(--duration-slow) var(--ease-spring);
}
@keyframes modal-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Close Button Hover --- */
#order_screen .order_screen_form .icon-cross {
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
#order_screen .order_screen_form .icon-cross:hover {
  background-color: var(--color-border);
  transform: rotate(90deg);
}

/* --- Form Inputs Focus --- */
#order_screen .order_screen_form form input.element:focus,
#order_screen .order_screen_form form select.element:focus,
.section_contact_form form input:focus,
.section_contact_form form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

/* --- Pagination --- */
.pagination_container a,
.pagination_container span {
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.pagination_container a:hover {
  transform: translateY(-1px);
}

/* --- Page Load Animations --- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section_logo,
.section_choose,
.items_title_another,
.section_slider_brands,
.section_category,
.section_contact_form {
  animation: fade-up 0.6s var(--ease-out) both;
}
.section_logo        { animation-delay: 0s; }
.section_choose      { animation-delay: 0.1s; }
.items_title_another { animation-delay: 0.15s; }
.section_slider_brands { animation-delay: 0.2s; }
.section_category    { animation-delay: 0.25s; }
.section_contact_form { animation-delay: 0.3s; }

/* Product page sections */
.section_product {
  animation: fade-up 0.5s var(--ease-out) both;
}
.same_products {
  animation: fade-up 0.5s var(--ease-out) 0.15s both;
}

/* --- Image Lazy Load Fade-In ---
   Self-contained CSS animation: no JS hook needed. The image starts
   transparent and animates to opaque immediately on render.
   Previously this required an external .loaded class that nothing set,
   leaving cards permanently blank on mobile (see Новинки regression 2026-05-17). */
img[loading="lazy"] {
  animation: img-lazy-fade-in 0.4s var(--ease-out) both;
}
@keyframes img-lazy-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Breadcrumb subtle animation --- */
.breadcrumb a {
  transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb a:hover {
  color: var(--color-text);
}

/* --- Scroll-triggered reveal (JS companion) --- */
/* Fail-open (2026-08-26): по умолчанию контент ВИДЕН. Скрытие-до-анимации
   включается только когда JS жив и повесил html.js-reveal. Раньше .reveal был
   opacity:0 без надёжного JS-компаньона → секции «Бренды»/«Категории» на мобилке
   навсегда оставались невидимыми (пустые провалы). */
.reveal {
  opacity: 1;
  transform: none;
}
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}
html.js-reveal .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Smooth image swap on product cards --- */
.items_card .image_second {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  object-fit: contain;
  border-radius: var(--radius-xl);
}
.items_card:hover .image_second {
  opacity: 1;
}

/* --- Logo Section Premium --- */
.section_logo span {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* --- Price Highlight --- */
.product_info .price,
.XS_info .price {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* --- Subtle divider lines --- */
.section_product {
  border-bottom-color: var(--color-border);
}

/* --- Checkbox / Radio Premium --- */
.form_row .policy input,
#order_screen .order_screen_form .policy input,
#order_screen .order_screen_form form .form_delivery_element input {
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.form_row .policy input:hover,
#order_screen .order_screen_form .policy input:hover,
#order_screen .order_screen_form form .form_delivery_element input:hover {
  border-color: var(--color-primary);
}
.form_row .policy input:checked,
#order_screen .order_screen_form .policy input:checked,
#order_screen .order_screen_form form .form_delivery_element input:checked {
  transform: scale(1.1);
}

/* --- Disabled Button State --- */
.section_contact_form form button:disabled,
#order_screen .order_screen_form button:disabled {
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Size Table Modal Premium --- */
#size_table_container {
  animation: modal-backdrop var(--duration-base) var(--ease-out);
}
#size_table_container .table_container {
  animation: modal-slide-up var(--duration-slow) var(--ease-spring);
}

/* --- Mobile Menu Smooth --- */
.menu_cover_screen {
  transition: width var(--duration-slow) var(--ease-in-out);
}

/* --- Prefers Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT U1 — Catalog card polish (apple-design + emil-design-eng)
   CSS-only overrides. Rollback: bash deploy/rollback-u1.sh
   Principle (design_system_uplift_plan.md): orange = accent for PRICE only,
   everything else mono-hierarchy + air. Reduce orange overload on hovers/chips.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Title — SECONDARY to price: medium weight, tight tracking, ink (not bold). */
.items_card .items_card_description > div:first-child {
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* Price — the ONE loud accent on the card. Orange, bold, explicit so it never
   depends on fragile :nth-child ordering. */
.items_card .card_price {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

/* Swatch hover — was orange border + orange glow on EVERY swatch (orange
   overload). Neutralize to an ink border + soft neutral shadow; keep the
   1px lift + press-scale (emil: physical feedback without shouting colour). */
.items_card .card-swatch:hover {
  border-color: #bdbdbd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.items_card .card-swatch--more:hover {
  color: #1a1a1a;
  border-color: #bdbdbd;
}

/* Solo "exclusive colorway" chip — drop the orange gradient to a calm neutral
   pill; keep only the ✦ icon in brand orange as the single accent. */
.card-solo-chip {
  background: #f6f6f6;
  border-color: #ececec;
  color: #555;
  font-weight: var(--font-weight-medium);
}

/* Card image stage — gadgets (Garmin/Oura/Whoop) and eyewear use object-fit:
   contain on a white img background, so the device floats on flat white. A soft
   grey ground gives it depth/product-shot feel (apple §12 material). Footwear
   uses cover (fills the frame) so it's intentionally left untouched. */
.items_card[data-kind="gadget"] img,
.items_card[data-kind="eyewear"] img {
  background-color: #f6f6f6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT U2 — Product page polish (apple-design + emil-design-eng)
   CSS-only. Rollback: bash deploy/rollback-u2.sh
   Does NOT touch #register_button logic, data-price-*, or size data-* attrs.
   Principle: orange = PRICE + "Оформить" only; everything else mono-hierarchy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* H1 — large display type reads too loose at size; tighten tracking (apple §15). */
.single_product .title.h1-style {
  letter-spacing: -0.02em;
}

/* Size picker — the selected chip was orange-filled, competing with the orange
   "Оформить" CTA for the eye. Reserve orange for price + CTA and make the chosen
   size INK: it reads as "locked in" while the CTA stays the single loud call.
   Lift + press-scale add physical feedback (apple §1 respond-on-press, emil). */
.section_product .product_info .size .size_value input[type="radio"]:checked + label {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.section_product .product_info .size .size_value label {
  transition: border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out),
              transform 120ms var(--ease-out),
              background-color 120ms var(--ease-out);
}
.section_product .product_info .size .size_value label:active {
  transform: scale(0.96);
}

/* Trust badges — soften the icons to muted ink so the block reads as quiet
   reassurance, not three competing accents (the split-badge keeps its orange
   hover intent). */
.product_info .trust_badge svg {
  color: #6b6b6b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT U3 — Mobile menu + bottom bar (apple-design + emil-design-eng)
   CSS-only. Rollback: bash deploy/rollback-u3.sh
   Does NOT touch header.php / footer.php / script.js — pure overrides.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* --- Mobile fullscreen menu --- */

  /* Slide easing: replace the janky `transition: all .5s` with a dedicated
     drawer curve on width only (iOS-like). The width→100% mechanism in
     script.js is left intact; only the feel is refined. */
  .menu_cover_screen {
    transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Breathing room in the item column. */
  #xs_menu .cover_screen_items {
    row-gap: 4px;
    padding-bottom: 32px;
  }

  /* Top-level rows — bigger Onest type, generous tap target (≥52px), thin
     dividers between rows so the list reads as structured, not stacked. */
  #xs_menu .menu_item {
    font-size: 1.0625rem;
  }
  #xs_menu .menu_item + .menu_item {
    border-top: 1px solid #f0f0f0;
    padding-top: 4px;
  }
  #xs_menu .menu_item .submenu_title {
    min-height: 52px;
    padding: 6px 2px;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    color: #1a1a1a;
  }
  /* Accordion chevron — calmer, quicker rotation with the shared ease-out. */
  #xs_menu .menu_item .submenu_title i {
    transition: transform 0.25s var(--ease-out);
    color: #9a9a9a;
  }

  /* Sub-links — larger tap targets + more legible ink. */
  #xs_menu .menu_item .submenu_items a {
    padding: 11px 8px;
    color: #444;
    font-size: 0.9375rem;
  }

  /* --- Bottom bar (footer .mtf-mobbar; inline <style> beaten via nav.* specificity) --- */

  /* Translucent chrome: content scrolls under a blurred bar instead of a flat
     opaque strip (apple §12 material). nav.mtf-mobbar (0,1,1) outranks the
     inline .mtf-mobbar (0,1,0) regardless of source order. */
  nav.mtf-mobbar {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* Tighter, calmer labels. */
  nav.mtf-mobbar .mtf-mobbar__item span {
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
  }
  /* Slightly larger filled glyphs read as confident app-nav icons, not thin
     line-art. (Icons themselves are premium filled SVGs in footer.php.) */
  nav.mtf-mobbar .mtf-mobbar__item {
    position: relative;
  }
  nav.mtf-mobbar .mtf-mobbar__item svg {
    width: 25px;
    height: 25px;
    transition: transform 0.12s var(--ease-out);
  }
  /* Press feedback on the icon (apple §1 respond-on-press). */
  nav.mtf-mobbar .mtf-mobbar__item:active svg {
    transform: scale(0.9);
  }
  /* Active tab — orange fill + a short top indicator bar (tactile, not just
     colour). Active state now set server-side in footer.php. */
  nav.mtf-mobbar .mtf-mobbar__item.is-active {
    color: var(--color-primary);
  }
  nav.mtf-mobbar .mtf-mobbar__item.is-active::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--color-primary);
  }

  /* Keep the bar solid/legible when the user opts out of transparency. */
}
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  nav.mtf-mobbar {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH HOVER GUARD — on touch devices :hover fires on tap and STICKS until the
   next tap elsewhere, so lift/scale hovers leave a card/button frozen mid-hover
   (emil: gate hover behind hover-capable pointers). We can't easily rewrap the
   existing :hover rules, so on non-hover pointers we neutralize the moving parts
   back to their resting state. Press feedback (:active) is untouched — that's
   the correct touch signal.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .items_card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
    border-color: #ececec;
  }
  .items_card:hover img {
    transform: none;
  }
  .default_button:hover {
    transform: none;
    box-shadow: var(--shadow-button);
  }
  .items_card .card-swatch:hover {
    transform: none;
    box-shadow: none;
    border-color: #e6e6e6;
  }
  .section_slider_brands .grid .grid_line .grid_line_item:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ─── «В наличии»: пункт меню и метки на карточке товара ──────────────────
   Витрина склада в Москве (mu-plugins/mtf-instock.php). Пункт подсвечен
   зелёной точкой — единственный раздел с отправкой сегодня-завтра. */
.up_link--instock{color:var(--color-primary);font-weight:var(--font-weight-semibold);display:inline-flex;align-items:center;gap:7px}
.up_link--instock:hover{color:var(--color-primary-hover)}
.up_link__dot{width:7px;height:7px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 3px rgba(46,125,50,.2);flex:0 0 auto}
.menu_item--instock{display:flex;align-items:center;gap:8px;color:var(--color-primary);font-weight:var(--font-weight-semibold)}

/* Плашка на карточке товара, который лежит на складе */
.mtf-instock-note{display:flex;flex-direction:column;gap:6px;background:rgba(46,125,50,.07);border:1px solid rgba(46,125,50,.28);border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0}
.mtf-instock-note__head{display:flex;align-items:center;gap:8px;font-weight:var(--font-weight-bold);color:#1f6323}
.mtf-instock-note__text{font-size:.88rem;color:var(--color-text-secondary);line-height:1.45;margin:0}
.mtf-instock-note__text strong{color:var(--color-text)}

/* Кросс-ссылка с обычной карточки «под заказ» на пару со склада */
.mtf-instock-cross{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--color-white);border:1px solid rgba(46,125,50,.35);border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0}
.mtf-instock-cross__text{font-size:.9rem;line-height:1.45;color:var(--color-text-secondary);margin:0}
.mtf-instock-cross__text strong{color:var(--color-text)}
.mtf-instock-cross__cta{white-space:nowrap;font-weight:var(--font-weight-semibold);color:var(--color-primary);text-decoration:none;border-bottom:1px solid currentColor}
.mtf-instock-cross__cta:hover{color:var(--color-primary-hover)}

/* === search.css === */
/* ============================================
   PREMIUM SEARCH OVERLAY — market-tf.ru
   Fullscreen animated search panel
   ============================================ */

/* --- Overlay wrapper --- */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.33, 1, 0.68, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#search-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* --- Top bar: input + close --- */
.search-overlay__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  border-bottom: 2px solid #E6E6E6;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 88px;
  flex-shrink: 0;
}

.search-overlay__icon {
  color: #888888;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.search-overlay__icon svg {
  width: 24px;
  height: 24px;
}

.search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  color: #212529;
  background: transparent;
  caret-color: #F15A29;
  letter-spacing: -0.01em;
}

.search-overlay__input::placeholder {
  color: #AAAAAA;
  font-weight: 400;
}

.search-overlay__clear {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #888888;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background-color 150ms ease, color 150ms ease;
  line-height: 0;
}

.search-overlay__clear:hover {
  background-color: #F2F2F2;
  color: #212529;
}

.search-overlay__clear svg {
  width: 16px;
  height: 16px;
}

.search-overlay__clear.is-visible {
  display: flex;
  align-items: center;
}

.search-overlay__close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #212529;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 6px;
  transition: background-color 150ms ease;
  white-space: nowrap;
  line-height: 1;
}

.search-overlay__close:hover {
  background-color: #F2F2F2;
}

/* --- Body: quick filters + results --- */
.search-overlay__body {
  flex: 1;
  padding: 24px 24px 40px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* --- Quick filter tags --- */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.search-filters__tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #E6E6E6;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #555555;
  background: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.search-filters__tag:hover,
.search-filters__tag.is-active {
  border-color: #F15A29;
  color: #F15A29;
  background: rgba(241, 90, 41, 0.05);
}

/* --- Section title --- */
.search-section__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #AAAAAA;
  margin: 0 0 12px;
}

/* --- Popular queries --- */
.search-popular {
  margin-bottom: 32px;
}

.search-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-popular__item {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.search-popular__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.search-popular__item button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: #212529;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #F2F2F2;
  transition: color 150ms ease;
}

.search-popular__item button:hover {
  color: #F15A29;
}

.search-popular__item button svg {
  width: 16px;
  height: 16px;
  color: #CCCCCC;
  flex-shrink: 0;
}

/* --- Results container --- */
#search-results {
  display: none;
}

#search-results.is-visible {
  display: block;
}

/* --- Sections row: categories + brands (side by side on desktop) --- */
.search-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 540px) {
  .search-meta-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --- Category chips --- */
.search-categories__list,
.search-brands__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-categories__item,
.search-brands__item {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.search-categories__item.is-visible,
.search-brands__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.search-categories__link,
.search-brands__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #F7F7F7;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #555555;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  letter-spacing: -0.01em;
}

.search-categories__link:hover,
.search-brands__link:hover {
  background-color: rgba(241, 90, 41, 0.08);
  color: #F15A29;
}

/* --- Product results grid --- */
.search-products {
  margin-bottom: 32px;
}

.search-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .search-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .search-products__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Product card (compact) --- */
.search-product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E6E6E6;
  background: #ffffff;
  transition: border-color 200ms ease, transform 200ms ease;
  opacity: 0;
  transform: translateY(8px);
}

.search-product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.search-product-card:hover {
  border-color: #CCCCCC;
  transform: translateY(-2px);
}

.search-product-card__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F7F7F7;
  overflow: hidden;
  border-radius: 8px;
}

.search-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform 300ms ease;
}

.search-product-card:hover .search-product-card__img {
  transform: scale(1.04);
}

.search-product-card__info {
  padding: 10px 12px 12px;
}

.search-product-card__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #212529;
  line-height: 1.4;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.search-product-card__price {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #F15A29;
  letter-spacing: -0.01em;
}

/* --- View all results link --- */
.search-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #F15A29;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 10px 0;
  transition: gap 200ms ease;
}

.search-all-link:hover {
  gap: 10px;
}

.search-all-link svg {
  width: 16px;
  height: 16px;
}

/* --- Loading skeleton --- */
.search-skeleton {
  display: none;
}

.search-skeleton.is-visible {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .search-skeleton.is-visible {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.search-skeleton__card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E6E6E6;
}

.search-skeleton__img {
  aspect-ratio: 1 / 1;
  background: #F2F2F2;
}

.search-skeleton__line {
  height: 12px;
  border-radius: 6px;
  background: #F2F2F2;
  margin: 10px 12px 8px;
}

.search-skeleton__line--short {
  width: 50%;
  height: 12px;
  border-radius: 6px;
  background: #F2F2F2;
  margin: 0 12px 12px;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.search-skeleton__img,
.search-skeleton__line,
.search-skeleton__line--short {
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* --- No results state --- */
.search-empty {
  display: none;
  padding: 48px 0 32px;
  text-align: center;
}

.search-empty.is-visible {
  display: block;
}

.search-empty__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.search-empty__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #888888;
  line-height: 1.5;
}

/* --- Responsive tweaks --- */
@media (max-width: 480px) {
  .search-overlay__bar {
    padding: 0 16px;
    height: 60px;
    gap: 12px;
  }

  .search-overlay__input {
    font-size: 15px;
  }

  .search-overlay__body {
    padding: 20px 16px 40px;
  }

  .search-filters {
    margin-bottom: 24px;
  }
}

/* --- Stagger animation delays for product cards --- */
.search-product-card:nth-child(1) { transition-delay: 0ms; }
.search-product-card:nth-child(2) { transition-delay: 50ms; }
.search-product-card:nth-child(3) { transition-delay: 100ms; }
.search-product-card:nth-child(4) { transition-delay: 150ms; }
.search-product-card:nth-child(5) { transition-delay: 200ms; }
.search-product-card:nth-child(6) { transition-delay: 250ms; }

/* Stagger for popular queries */
.search-popular__item:nth-child(1) { transition-delay: 0ms; }
.search-popular__item:nth-child(2) { transition-delay: 40ms; }
.search-popular__item:nth-child(3) { transition-delay: 80ms; }
.search-popular__item:nth-child(4) { transition-delay: 120ms; }
.search-popular__item:nth-child(5) { transition-delay: 160ms; }
.search-popular__item:nth-child(6) { transition-delay: 200ms; }

/* Stagger for category/brand chips */
.search-categories__item:nth-child(1),
.search-brands__item:nth-child(1) { transition-delay: 0ms; }
.search-categories__item:nth-child(2),
.search-brands__item:nth-child(2) { transition-delay: 40ms; }
.search-categories__item:nth-child(3),
.search-brands__item:nth-child(3) { transition-delay: 80ms; }
.search-categories__item:nth-child(4),
.search-brands__item:nth-child(4) { transition-delay: 120ms; }
.search-categories__item:nth-child(5),
.search-brands__item:nth-child(5) { transition-delay: 160ms; }

/* --- Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  #search-overlay,
  .search-product-card,
  .search-popular__item,
  .search-categories__item,
  .search-brands__item {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   HEADER SEARCH — clean rewrite
   ============================================ */

/* Desktop wrapper: text label + icon */
#open_search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s ease-in-out;
}

#open_search:hover {
  background-color: #F2F2F2;
  border-radius: 8px;
}

/* Text label — real <span>, inherits #header font perfectly */
#open_search .search-label {
  color: #F15A29;
  text-transform: uppercase;
  white-space: nowrap;
  /* Everything else inherited from #header: Inter, 0.75rem, 600, 0.03rem spacing */
}

/* Icon: orange + pulse glow ring */
#open_search .icon-search {
  color: #F15A29;
  border-radius: 50%;
  padding: 3px;
  animation: search-icon-pulse 2.4s ease-out infinite;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#open_search:hover .icon-search {
  transform: scale(1.2) rotate(-12deg);
  animation: none;
}

/* Mobile: just the icon, no label */
#open_search_mobile {
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s ease;
}

#open_search_mobile .icon-search {
  color: #F15A29;
  border-radius: 50%;
  padding: 3px;
  animation: search-icon-pulse 2.4s ease-out infinite;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#open_search_mobile:hover .icon-search {
  transform: scale(1.2) rotate(-12deg);
  animation: none;
}

/* Pulse keyframe */
@keyframes search-icon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(241, 90, 41, 0.35); }
  50%  { box-shadow: 0 0 0 6px rgba(241, 90, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(241, 90, 41, 0); }
}

/* ============================================
   OVERLAY — centered input layout
   State: .is-idle  (default, centered)
          .is-typing (input active, bar moves to top)
   ============================================ */

/* Default (idle): hide the sticky bar, show centered stage */
#search-overlay .search-overlay__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  border-bottom: 2px solid #E6E6E6;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 88px;
  flex-shrink: 0;
  /* Transition for moving from center stage to top bar */
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* Center-stage wrapper */
.search-overlay__center-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  padding-top: 15vh;
  transition: padding-top 400ms cubic-bezier(0.33, 1, 0.68, 1);
  min-height: 100vh;
}

/* When results are showing, move input up smoothly */
.search-overlay__center-stage.has-results {
  padding-top: 5vh;
}

/* Always hide the sticky bar — search stays centered */
#search-overlay .search-overlay__bar {
  display: none !important;
}

/* Center stage always visible when overlay is open */
#search-overlay.is-idle .search-overlay__center-stage,
#search-overlay.is-typing .search-overlay__center-stage {
  display: flex;
}

/* Results appear BELOW center stage, not in separate body */
#search-overlay.is-idle .search-overlay__body,
#search-overlay.is-typing .search-overlay__body {
  display: none;
}

/* Center-stage input box */
.search-overlay__center-input-wrap {
  width: 100%;
  max-width: 640px;
  border: 2px solid #E6E6E6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 72px;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.search-overlay__center-input-wrap:focus-within {
  border-color: #F15A29;
  box-shadow: 0 4px 24px rgba(241, 90, 41, 0.12);
}

.search-overlay__center-input-wrap .search-overlay__icon {
  color: #F15A29;
}

.search-overlay__center-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  color: #212529;
  background: transparent;
  caret-color: #F15A29;
  letter-spacing: -0.01em;
}

.search-overlay__center-input::placeholder {
  color: #AAAAAA;
}

/* Category tags ABOVE center input */
.search-overlay__center-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 640px;
  width: 100%;
  margin-bottom: 20px;
}

/* Popular queries BELOW center input */
.search-overlay__center-popular {
  margin-top: 28px;
  max-width: 640px;
  width: 100%;
}

.search-overlay__center-popular-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #AAAAAA;
  margin: 0 0 12px;
}

.search-overlay__center-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-overlay__center-popular-list li button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: #212529;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #F2F2F2;
  transition: color 150ms ease;
}

.search-overlay__center-popular-list li button:hover {
  color: #F15A29;
}

.search-overlay__center-popular-list li button svg {
  width: 16px;
  height: 16px;
  color: #CCCCCC;
  flex-shrink: 0;
}

/* Center-stage close button */
.search-overlay__center-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #888888;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 150ms ease, color 150ms ease;
}

.search-overlay__center-close:hover {
  background-color: #F2F2F2;
  color: #212529;
}

/* Center-stage inline results — fade in */
.search-overlay__center-results {
  margin-top: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 350ms ease, transform 350ms ease;
}

.search-overlay__center-results.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.search-overlay__center-results .search-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.search-overlay__center-results .search-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #F15A29;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms;
}

.search-overlay__center-results .search-all-link:hover {
  opacity: 0.8;
}

/* Stagger animation for product cards inside center results */
@keyframes card-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-overlay__center-results .search-product-card {
  opacity: 0;
  animation: card-fade-up 300ms ease forwards;
}
.search-overlay__center-results .search-product-card:nth-child(1) { animation-delay: 0ms; }
.search-overlay__center-results .search-product-card:nth-child(2) { animation-delay: 60ms; }
.search-overlay__center-results .search-product-card:nth-child(3) { animation-delay: 120ms; }
.search-overlay__center-results .search-product-card:nth-child(4) { animation-delay: 180ms; }
.search-overlay__center-results .search-product-card:nth-child(5) { animation-delay: 240ms; }
.search-overlay__center-results .search-product-card:nth-child(6) { animation-delay: 300ms; }
.search-overlay__center-results .search-product-card:nth-child(7) { animation-delay: 360ms; }
.search-overlay__center-results .search-product-card:nth-child(8) { animation-delay: 420ms; }

/* Responsive: mobile center stage */
@media (max-width: 480px) {
  .search-overlay__center-input-wrap {
    height: 58px;
    padding: 0 14px;
    gap: 10px;
  }

  .search-overlay__center-input {
    font-size: 16px;
  }

  .search-overlay__center-filters {
    gap: 6px;
  }

  .search-overlay__center-close {
    top: 14px;
    right: 14px;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #open_search .icon-search,
  #open_search_mobile .icon-search {
    animation: none !important;
  }
  .search-overlay__bar {
    transition-duration: 0.01ms !important;
  }
}

/* ───────── Highlight matched query tokens in product titles ───────── */
.search-product-card__name mark.search-hl {
  background: rgba(255, 222, 100, 0.4);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 600;
}

/* ───────── Keyboard navigation: active card ───────── */
.search-product-card.is-active {
  outline: 2px solid #2d8cf0;
  outline-offset: 1px;
  background: rgba(45, 140, 240, 0.04);
  box-shadow: 0 4px 12px rgba(45, 140, 240, 0.15);
  transition: outline 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* === promo-banner.css === */
/* ============================================
   PROMO BANNER + POPUP — market-tf.ru
   Welcome discount: 1000₽ first order
   ============================================ */

/* ---- Mini-banner (above/below header) ---- */
.promo-topbar {
  position: relative;
  width: 100%;
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 10px 48px 10px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  letter-spacing: 0.01em;
  z-index: 100;
}
.promo-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.promo-topbar__text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promo-topbar__icon {
  font-style: normal;
  font-size: 15px;
  flex-shrink: 0;
}
.promo-topbar__cta {
  display: inline-block;
  background: var(--color-primary, #F15A29);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease),
              transform var(--duration-fast, 150ms) var(--ease-out, ease);
  text-decoration: none;
}
.promo-topbar__cta:hover {
  background: var(--color-primary-hover, #d94e20);
  transform: translateY(-1px);
  color: #fff;
}
.promo-topbar__cta:active {
  transform: translateY(0);
}
.promo-topbar__close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  /* 44x44 hit area for comfortable mobile tapping (WCAG 2.5.8). */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  transition: color var(--duration-fast, 150ms) ease,
              background-color var(--duration-fast, 150ms) ease;
}
.promo-topbar__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

/* Hidden state */
.promo-topbar[hidden],
.promo-topbar.is-hidden {
  display: none;
}

/* Топбар отключён (25.08): JS снимал [hidden] и показывал его сломанно
   (position top:-72 → тёмная полоса-артефакт вверху справа). Промо ловит
   поп-ап «Скидка 1000₽». Вернуть рабочий топбар — убрать это правило. */
#promo-topbar { display: none !important; }


/* ---- Popup Overlay ---- */
.promo-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: promo-backdrop-in var(--duration-base, 250ms) var(--ease-out, ease) both;
}
.promo-popup-overlay[hidden],
.promo-popup-overlay.is-hidden {
  display: none;
}
@keyframes promo-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Popup Card ---- */
.promo-popup {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  padding: 48px 40px 36px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  animation: promo-card-in var(--duration-slow, 400ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
  overflow: hidden;
}
@keyframes promo-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Decorative accent bar at top */
.promo-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary, #F15A29) 0%, #ff8a4c 100%);
  border-radius: 16px 16px 0 0;
}

/* Close button */
.promo-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  font-size: 20px;
  line-height: 1;
  border-radius: 6px;
  transition: background-color var(--duration-fast, 150ms) ease,
              color var(--duration-fast, 150ms) ease,
              transform var(--duration-fast, 150ms) ease;
}
.promo-popup__close:hover {
  background: #f2f2f2;
  color: #1a1a1a;
  transform: rotate(90deg);
}

/* Badge / eyebrow label */
.promo-popup__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(241, 90, 41, 0.1);
  color: var(--color-primary, #F15A29);
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}

/* Headline */
.promo-popup__headline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 32px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.promo-popup__headline em {
  font-style: normal;
  color: var(--color-primary, #F15A29);
}

/* Subtext */
.promo-popup__subtext {
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  color: #555;
  line-height: 1.55;
  margin: 0 0 28px;
}

/* Form */
.promo-popup__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Email input */
.promo-popup__input-wrap {
  position: relative;
}
.promo-popup__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  color: #1a1a1a;
  background: #fafafa;
  transition: border-color var(--duration-fast, 150ms) ease,
              box-shadow var(--duration-fast, 150ms) ease,
              background var(--duration-fast, 150ms) ease;
  outline: none;
}
.promo-popup__input::placeholder {
  color: #aaa;
  font-weight: var(--font-weight-regular, 400);
}
.promo-popup__input:focus {
  border-color: var(--color-primary, #F15A29);
  box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.1);
  background: #fff;
  outline: none;
}
.promo-popup__input.is-error {
  border-color: var(--color-error, #E53935);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.08);
}
.promo-popup__input-error {
  font-size: 12px;
  color: var(--color-error, #E53935);
  margin-top: -4px;
  display: none;
}
.promo-popup__input-error.is-visible {
  display: block;
}

/* Consent checkbox */
.promo-popup__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}
.promo-popup__consent-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color var(--duration-fast, 150ms) ease,
              background-color var(--duration-fast, 150ms) ease;
}
.promo-popup__consent-checkbox:hover {
  border-color: var(--color-primary, #F15A29);
}
.promo-popup__consent-checkbox:checked {
  background: var(--color-primary, #F15A29);
  border-color: var(--color-primary, #F15A29);
}
.promo-popup__consent-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.promo-popup__consent-checkbox.is-error {
  border-color: var(--color-error, #E53935);
}
.promo-popup__consent-text {
  font-size: 12px;
  font-weight: var(--font-weight-regular, 400);
  color: #666;
  line-height: 1.5;
}
.promo-popup__consent-text a {
  color: var(--color-primary, #F15A29);
  text-decoration: underline;
  text-decoration-color: rgba(241, 90, 41, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-fast, 150ms) ease;
}
.promo-popup__consent-text a:hover {
  text-decoration-color: var(--color-primary, #F15A29);
}
.promo-popup__consent-error {
  font-size: 12px;
  color: var(--color-error, #E53935);
  margin-top: -4px;
  display: none;
}
.promo-popup__consent-error.is-visible {
  display: block;
}

/* Submit button */
.promo-popup__submit {
  width: 100%;
  height: 52px;
  background: var(--color-primary, #F15A29);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease),
              transform var(--duration-fast, 150ms) var(--ease-spring, ease),
              box-shadow var(--duration-base, 250ms) var(--ease-out, ease);
  box-shadow: 0 2px 8px rgba(241, 90, 41, 0.25);
  position: relative;
  overflow: hidden;
}
.promo-popup__submit:hover:not(:disabled) {
  background: var(--color-primary-hover, #d94e20);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(241, 90, 41, 0.35);
}
.promo-popup__submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 50ms;
}
.promo-popup__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
/* Loader spinner inside button */
.promo-popup__submit .btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: promo-spin 0.7s linear infinite;
  margin: 0 auto;
}
.promo-popup__submit.is-loading .btn-text {
  display: none;
}
.promo-popup__submit.is-loading .btn-spinner {
  display: block;
}
@keyframes promo-spin {
  to { transform: rotate(360deg); }
}

/* Fine print */
.promo-popup__fine-print {
  font-size: 11px;
  color: #aaa;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  text-align: center;
  margin-top: 4px;
}


/* ---- Success State ---- */
.promo-popup__success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 16px;
}
.promo-popup__success.is-visible {
  display: flex;
}
.promo-popup__form.is-hidden {
  display: none;
}

/* Success icon */
.promo-popup__success-icon {
  width: 64px;
  height: 64px;
  background: rgba(46, 125, 50, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success, #2e7d32);
  font-size: 28px;
}
.promo-popup__success-title {
  font-size: 22px;
  font-weight: var(--font-weight-bold, 700);
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin: 0;
}
.promo-popup__success-text {
  font-size: 14px;
  color: #555;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.55;
  margin: 0;
}
.promo-popup__success-close {
  margin-top: 8px;
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  height: 48px;
  padding: 0 32px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-fast, 150ms) ease,
              transform var(--duration-fast, 150ms) ease;
}
.promo-popup__success-close:hover {
  background: #333;
  transform: translateY(-1px);
}


/* ---- Mobile ---- */
@media (max-width: 480px) {
  .promo-popup {
    padding: 40px 24px 28px;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
    align-self: flex-end;
  }
  .promo-popup-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .promo-popup__headline {
    font-size: 26px;
  }
  .promo-topbar {
    font-size: 12px;
    padding: 9px 40px 9px 12px;
  }
  .promo-topbar__inner {
    gap: 8px;
  }
  .promo-topbar__cta {
    font-size: 10px;
    padding: 4px 10px;
  }
}

@media (max-width: 360px) {
  .promo-popup__headline {
    font-size: 22px;
  }
  .promo-popup {
    padding: 36px 18px 24px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .promo-popup-overlay,
  .promo-popup,
  .promo-popup__submit .btn-spinner {
    animation: none;
  }
}


/* ============================================
   GIFT HINT MODAL — market-tf.ru
   "Намекнуть о подарке" on single-product page
   ============================================ */

/* ---- Trigger button (secondary / outlined) ---- */
.gift-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: transparent;
  color: #1a1a1a;
  border: 1.5px solid #c8c8c8;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 150ms ease,
              background-color 150ms ease,
              color 150ms ease,
              transform 150ms ease;
  text-decoration: none;
  margin-top: 10px;
}
.gift-hint-btn:hover {
  border-color: #1a1a1a;
  background: #f5f5f5;
  transform: translateY(-1px);
}
.gift-hint-btn:active {
  transform: translateY(0);
}
.gift-hint-btn__icon {
  font-style: normal;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- Overlay ---- */
.gift-hint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: gift-hint-backdrop-in 250ms ease both;
}
.gift-hint-overlay[hidden],
.gift-hint-overlay.is-hidden {
  display: none;
}
@keyframes gift-hint-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Popup card ---- */
.gift-hint-popup {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  padding: 48px 40px 36px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  animation: gift-hint-card-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes gift-hint-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Decorative accent bar */
.gift-hint-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F15A29 0%, #ff8a4c 100%);
  border-radius: 16px 16px 0 0;
}

/* ---- Close button ---- */
.gift-hint__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  border-radius: 6px;
  transition: background-color 150ms ease,
              color 150ms ease,
              transform 150ms ease;
}
.gift-hint__close:hover {
  background: #f2f2f2;
  color: #1a1a1a;
  transform: rotate(90deg);
}

/* ---- Badge ---- */
.gift-hint__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(241, 90, 41, 0.1);
  color: #F15A29;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}

/* ---- Headline ---- */
.gift-hint__headline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 8px;
}

/* ---- Subtext ---- */
.gift-hint__subtext {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin: 0 0 24px;
}

/* ---- Form ---- */
.gift-hint__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Field group */
.gift-hint__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label */
.gift-hint__label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}
.gift-hint__label span[aria-hidden] {
  color: #F15A29;
}
.gift-hint__label-optional {
  font-weight: 400;
  color: #999;
}

/* Text inputs */
.gift-hint__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: #1a1a1a;
  background: #fafafa;
  transition: border-color 150ms ease,
              box-shadow 150ms ease,
              background 150ms ease;
  outline: none;
  box-sizing: border-box;
}
.gift-hint__input::placeholder {
  color: #aaa;
}
.gift-hint__input:focus {
  border-color: #F15A29;
  box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.1);
  background: #fff;
}
.gift-hint__input.is-error {
  border-color: #E53935;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.08);
}

/* Textarea */
.gift-hint__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: #1a1a1a;
  background: #fafafa;
  resize: vertical;
  min-height: 80px;
  transition: border-color 150ms ease,
              box-shadow 150ms ease,
              background 150ms ease;
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
}
.gift-hint__textarea::placeholder {
  color: #aaa;
}
.gift-hint__textarea:focus {
  border-color: #F15A29;
  box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.1);
  background: #fff;
}

/* Character counter */
.gift-hint__char-counter {
  font-size: 11px;
  color: #bbb;
  text-align: right;
  margin-top: -2px;
}

/* Input error message */
.gift-hint__input-error {
  font-size: 12px;
  color: #E53935;
  display: none;
  margin-top: -2px;
}
.gift-hint__input-error.is-visible {
  display: block;
}

/* ---- Consent ---- */
.gift-hint__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  margin-top: -4px;
}
.gift-hint__consent-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 150ms ease,
              background-color 150ms ease;
}
.gift-hint__consent-checkbox:hover {
  border-color: #F15A29;
}
.gift-hint__consent-checkbox:checked {
  background: #F15A29;
  border-color: #F15A29;
}
.gift-hint__consent-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.gift-hint__consent-checkbox.is-error {
  border-color: #E53935;
}
.gift-hint__consent-text {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}
.gift-hint__consent-error {
  font-size: 12px;
  color: #E53935;
  margin-top: -8px;
  display: none;
}
.gift-hint__consent-error.is-visible {
  display: block;
}

/* ---- Submit button ---- */
.gift-hint__submit {
  width: 100%;
  height: 52px;
  background: #F15A29;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease,
              transform 150ms ease,
              box-shadow 250ms ease;
  box-shadow: 0 2px 8px rgba(241, 90, 41, 0.25);
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}
.gift-hint__submit:hover:not(:disabled) {
  background: #d94e20;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(241, 90, 41, 0.35);
}
.gift-hint__submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 50ms;
}
.gift-hint__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
/* Spinner inside submit */
.gift-hint__submit .btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gift-hint-spin 0.7s linear infinite;
  margin: 0 auto;
}
.gift-hint__submit.is-loading .btn-text  { display: none; }
.gift-hint__submit.is-loading .btn-spinner { display: block; }
@keyframes gift-hint-spin {
  to { transform: rotate(360deg); }
}

/* ---- Form hidden state ---- */
.gift-hint__form.is-hidden {
  display: none;
}

/* ---- Success state ---- */
.gift-hint__success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 16px;
}
.gift-hint__success.is-visible {
  display: flex;
}
.gift-hint__success-icon {
  width: 64px;
  height: 64px;
  background: rgba(46, 125, 50, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2e7d32;
}
.gift-hint__success-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin: 0;
}
.gift-hint__success-text {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin: 0;
}
.gift-hint__success-close {
  margin-top: 8px;
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  height: 48px;
  padding: 0 32px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease,
              transform 150ms ease;
}
.gift-hint__success-close:hover {
  background: #333;
  transform: translateY(-1px);
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .gift-hint-popup {
    padding: 40px 24px 28px;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
    align-self: flex-end;
    max-height: 92vh;
  }
  .gift-hint-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .gift-hint__headline {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .gift-hint-popup {
    padding: 36px 18px 24px;
  }
  .gift-hint__headline {
    font-size: 20px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .gift-hint-overlay,
  .gift-hint-popup,
  .gift-hint__submit .btn-spinner {
    animation: none;
  }
}

/* === scroll-fx.css === */
/**
 * scroll-fx.css — Scroll-driven reveal animations (CSS-only, no JS).
 *
 * Uses native CSS animation-timeline: view() (Chrome/Edge 115+, Safari 18+).
 * Graceful degradation on Firefox: content visible without animation.
 * Backward-compat: .on-fade / .is-visible IntersectionObserver pattern
 * still works in parallel — CSS scroll animations are additive, not conflicting.
 *
 * Brand color: #F15A29
 */

/* ─── Base utility classes (always visible — animation enhances, doesn't hide) ─── */
.scroll-fade-up,
.scroll-zoom-in,
.scroll-slide-left,
.scroll-slide-right,
.scroll-parallax {
    /* No opacity:0 here — content visible by default as fallback */
}

/* ─── Scroll-driven animations (progressive enhancement) ─── */
@supports (animation-timeline: view()) {

    .scroll-fade-up {
        animation: scroll-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
    @keyframes scroll-fade-up {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .scroll-zoom-in {
        animation: scroll-zoom-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
    @keyframes scroll-zoom-in {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
    }

    .scroll-slide-left {
        animation: scroll-slide-left linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    @keyframes scroll-slide-left {
        from { opacity: 0; transform: translateX(-60px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .scroll-slide-right {
        animation: scroll-slide-right linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    @keyframes scroll-slide-right {
        from { opacity: 0; transform: translateX(60px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Parallax-style on elements during scroll — subtle depth */
    .scroll-parallax {
        animation: scroll-parallax linear;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
    @keyframes scroll-parallax {
        from { transform: translateY(0px); }
        to   { transform: translateY(-40px); }
    }

    /* Staggered children — for grids/lists */
    .scroll-stagger > *:nth-child(1) { animation-delay: 0ms; }
    .scroll-stagger > *:nth-child(2) { animation-delay: 80ms; }
    .scroll-stagger > *:nth-child(3) { animation-delay: 160ms; }
    .scroll-stagger > *:nth-child(4) { animation-delay: 240ms; }
}

/* ─── Reduced-motion: strip ALL animations ─── */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade-up,
    .scroll-zoom-in,
    .scroll-slide-left,
    .scroll-slide-right,
    .scroll-parallax {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* === design-fixes.css === */
/* =====================================================================
   Design fixes — по аудиту 13.08.2026 (docs/design_audit_2026-08.md)
   Отдельным файлом, а не правкой 99 хардкод-мест: легко откатить (убрать
   один enqueue), и переопределения собраны в одном месте.

   ВАЖНО: подключать ПОСЛЕ основного бандла, иначе специфичности не хватит.
   Деплой — только с немедленной проверкой скриншотом десктоп+мобайл.
   Менять бренд-цвет вслепую нельзя.
   ===================================================================== */

:root {
  /* Один бренд-оранжевый вместо двух (#f15a29 + #ff4d00).
     #F15A29 на белом с белым текстом даёт ~4.5:1 — проходит WCAG AA
     для мелкого текста; на крупном/жирном (цены, кнопки) с запасом. */
  --mtf-orange:        #F15A29;
  --mtf-orange-hover:  #BE3F18;
  --mtf-orange-soft:   #FFF1EB;  /* фон плашек — оставляем светлым */
  /* Серый подписей: было #999 (2.8:1) → #6B6B6B (4.6:1 на белом). */
  --mtf-text-muted:    #6B6B6B;
}

/* P1 — контраст кнопок/акцентов. Второй оттенок #ff4d00 (3.3:1) убираем
   в пользу единого бренд-цвета. Крупные CTA — здесь оранжевый как фон,
   белый текст поверх проходит на новом оттенке. */
.tf-btn,
.default_button,
.register,
#place_order,
.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--mtf-orange) !important;
}
.tf-btn:hover,
.default_button:hover,
.woocommerce button.button.alt:hover,
#place_order:hover {
  background: var(--mtf-orange-hover) !important;
}

/* P1 — серые подписи под товарами, хинты, мета. #999 → читаемый. */
.tf-hint,
.product-card__meta,
.catalog_item .price_from small,
.woocommerce .cart-collaterals small,
.order_email_hint {
  color: var(--mtf-text-muted) !important;
}

/* P3 — карточки: снять двойной «тонкая рамка + широкая тень».
   Оставляем мягкую тень, убираем 1px-границу. */
#header nav .dropdown-menu {
  /* было 1px border + 32px shadow — детектор слопа. Оставляем только мягкую
     тень, границу убираем: меню читается «дороже», без ИИ-подписи. */
  border: none !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
}

/* Примечание: цена "От N ₽" оранжевым — крупная и жирная (≥18px bold),
   для неё порог WCAG 3:1, старый #F15A29 (3.4:1) уже проходит. Трогаем
   цвет цены только если визуально не сойдётся с новым брендом. */