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

/* === style.css === */
/*Default styles*/
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
    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;
}
.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;
}
#header i{
    font-size: 2rem;
    color: black;
    cursor: pointer;
}
#header nav {
    width: 626px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
#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{
    display: block;
}
#header nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    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;
}
#header nav .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;
    background-image: url(../img/xs_main_logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 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: Roboto, sans-serif;
    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;
}
#xs_menu .menu_item .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;
    width: 469px;
    text-align: center;
}
.section_contact_form form {
    width: 410px;
    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*/
.pagination_container {
	display: flex;
	justify-content: center;
	column-gap: 10px;
}
.pagination_container .dots {
	cursor: default;
}

/*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;
    object-fit: cover;
    object-position: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-color: #fff;
    display: block;
}
/* 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;
}
/*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 */
.section_slider_brands .grid .grid_line a[href*="/brand/on_running/"] .grid_line_item{
    background-size: 34% auto;
}
.section_slider_brands .grid .grid_line a[href*="/brand/on_running/"] .grid_line_item:hover{
    background-size: 40% auto;
}
.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*/
#order_screen {
    position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    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;
    margin-top: 6px;
}
.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;
}
.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;
    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: #b94a17;
    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: #d8451d;
    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);
    animation: spc-chip-pulse 2.4s ease-out infinite;
}
.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: #b94a17;
    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: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    width: 100%;
    min-height: 56px;
    padding: 18px 24px;
    box-shadow: 0 4px 14px rgba(241, 90, 41, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
    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.42), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.section_product .product_info .register:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(241, 90, 41, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
/* (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: 1000;
	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;
	width: 24px;
	height: 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{
	background-color: rgba(0,0,0,0.3);
	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);
}
.section_product .product_info .size .size_label #open_size_table{
	font-size: 0.7rem;
    font-weight: 600;
}
.section_product .product_info .size .size_label button {
    padding: 0;
	text-transform: uppercase;
    text-decoration: underline;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
	color: black;
}
.section_product .product_info .size .size_label .active {
    color: #F15A29;
}
.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; }
}

/* 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: 100px;
    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: #d94a1f;
    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;
    width: 24px;
    height: 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;
}
.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;
}

/*Pagination (catalog page)*/
.pagination_container {
    display: flex;
    justify-content: center;
}
.pagination_container .pagination_wrapper {
    padding: 8px 0;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background-color: white;
}
.pagination_container .wp_page_link,
.pagination_container .page_link {
    font-weight: 500;
    padding: 8px;
}
.pagination_container .wp_page_link:first-child,
.pagination_container .page_link:first-child {
    border-bottom-left-radius: 16px;
    border-top-left-radius: 16px;
    padding-left: 16px;
}
.pagination_container .wp_page_link:last-child,
.pagination_container .page_link:last-child {
    border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;
    padding-right: 16px;
}
.pagination_container .current {
    padding-right: 8px;
    padding-left: 8px;
}
.pagination_container .arrow {
    cursor: pointer;
    transition: all 0.4s ease-in;
}
.pagination_container .arrow:hover {
	color: white;
    background-color: #F15A29;
}
#Mobile-paged {
	display: none;
}

/*Section social (contacts page)*/
.section_social {
	padding-top: 32px !important;
}
.section_social .social_links {
    padding: 32px;
    margin-top: 56px;
    background-color: white;
    border-radius: 32px;
    border: 1px solid #E6E6E6;
}
.section_social .social_links .text {
    text-align: center;
    font-weight: 500;
}
.section_social .social_links .links {
    display: flex;
    justify-content: center;
    gap: 22px
}

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

/* 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;
}
@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 */
.product_info .gift-hint-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 20px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1.5px solid #c8c8c8 !important;
    border-radius: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
    text-decoration: none !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
.product_info .gift-hint-btn:hover {
    border-color: #1a1a1a !important;
    background: #f5f5f5 !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;
    }
}

/* =====================================================
   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: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(241, 90, 41, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    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.42), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

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

/* === 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*/
    #header nav {
        width: 550px;
    }
    /*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;
    }
    /*Header*/
    #header nav {
        width: 540px;
    }
    /*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: 480px;
    }

    /* 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;
        object-fit: cover;
        height: 269px;
        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;
    }

    /*Header*/
    #header nav {
        width: 506px;
        gap: 40px;
        justify-content: center;
    }

    /*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 {
        border-radius: 32px;
        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) {
    /*Header*/
    #header nav {
        width: 530px;
    }

    /*Footer*/
    #footer {
        padding-right: 70px;
        padding-left: 70px;
    }

    /*SECTIONS*/
    /*Section choose (index page)*/
    .section_choose div {
        height: 250px;
    }
}
@media(max-width: 630px) {
	/*Header*/
    #header nav {
        gap: 20px;
		font-size: 0.6rem
    }
}
@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;
    }
    .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;
    }
    .section_slider .slick-slide .wrapper .content img {
        border-radius: 16px;
        height: 140px;
    }
    .section_slider .slick-slide .wrapper .content .items_card_description {
        text-align: start;
        padding: 0 12px;
        width: 100%;
    }
	/*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 .grid_line_item {
        width: 100%;
        height: 84px;
        border-radius: 24px;
        padding: 8px;
        justify-content: center;
    }
	.mobile_grid .grid_line a {
		width: 100%;
	}
    .mobile_grid .grid_line .grid_line_item:first-child {
        margin-bottom: 10px;
    }
    .mobile_grid .grid_line .grid_line_item span {
        width: 100%;
        border-radius: 16px;
        padding: 16px 24px;
    }
}

@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: 16px;
        object-fit: cover;
    }
	.items_card .items_card_description,
    .items_card_description {
        padding: 0 12px;
        text-align: start;
        font-size: 0.625rem;
        font-weight: 500;
        line-height: 1rem;
    }
	.items_card .items_card_description div:last-child,
    .items_card_description div:last-child {
		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: 72px;
    }
}
@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;
	}
}

/* === 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;
  --color-primary-hover: #d94e20;
  --color-primary-active: #c2441b;
  --color-primary-light: rgba(241, 90, 41, 0.08);
  --color-text: #212529;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --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: '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);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 2px 8px rgba(241, 90, 41, 0.25);
  --shadow-button-hover: 0 4px 16px rgba(241, 90, 41, 0.35);

  /* Transitions */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 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;
}

/* --- 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-weight: var(--font-weight-regular);
  letter-spacing: -0.01em;
}
.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);
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 50ms;
}

/* --- 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;
}
.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);
}
.items_card .items_card_description div:last-child {
  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 --- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
  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) --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* === 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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.search-empty__text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: #D35400;
  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: #D35400;
  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: #D35400;
  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(211, 84, 0, 0.35); }
  50%  { box-shadow: 0 0 0 6px rgba(211, 84, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 84, 0, 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: #D35400;
  box-shadow: 0 4px 24px rgba(211, 84, 0, 0.12);
}

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

.search-overlay__center-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #212529;
  background: transparent;
  caret-color: #D35400;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: #D35400;
}

.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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  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: #D35400;
  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: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  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;
}


/* ---- 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%, #ff8c5e 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%, #ff8c5e 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;
  }
}