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

/* === 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;
    /* Stack header (and its dropdowns) above everything else, including the
       single-product image zoom on .zoooom (which uses CSS transform:scale
       on hover and was eating mouse events through the dropdown menu). */
    position: relative;
    z-index: 9999;
}
#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,
#header nav .dropdown:focus-within .dropdown-menu {
    /* a11y: keyboard users can Tab into the dropdown trigger and have the
       menu reveal (focus-within); was hover-only, hiding the menu from
       keyboard nav entirely. */
    display: block;
}
#header nav .parent_link:focus-visible {
    outline: 2px solid #F15A29;
    outline-offset: 2px;
    border-radius: 4px;
}
#header nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* z-index 99999: sits above the product-page zoom overlay + filter
       drawer (z-index 10000). Must NOT exceed promo popup unless we want
       to obscure it (popup is z-index 9999, header sits +1 higher). */
    z-index: 99999;
    background-color: white;
    padding: 12px;
    border: 1px solid #F2F2F2;
    border-radius: 16px;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    width: 277px;
}
#header nav .dropdown-menu .wrapper {
    padding: 12px 0;
}
#header nav .dropdown-menu a {
    padding: 0 12px;
    color: #666666;
    display: block;
}
/* Divider between "Спортивная/Повседневная" and sub-categories — kept only
   for the "Обувь" dropdown where it separates the type-filter from the
   actual shoe categories. Other dropdowns (Одежда / Аксессуары / etc.) get
   the marker class only when explicitly tagged in header.php. */
#header nav .dropdown.dropdown--shoes .dropdown-menu .wrapper:nth-child(2) {
    border-bottom: 1px solid #666666;
}
#header nav .dropdown-menu a:hover {
    color: black;
}

/*XS Header*/
#xs_header {
    height: 56px;
    display: none;
    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;
}
/* Mobile menu divider — only for "Обувь" (between Спортивная/Повседневная
   and the sub-categories like Беговые / Скоростные). Other menu items have
   no divider unless flagged with `menu_item--shoes`. */
#xs_menu .menu_item--shoes .submenu_items a:nth-child(2) {
    border-bottom: 1px solid rgb(204, 204, 204);
}
.menu_cover_screen {
    width: 0;
    position: absolute;
    top: 0;
	bottom: 0;
    left: 0;
    z-index: 15;
    background-color: white;
	overflow: auto;
	transition: all .5s ease;
}


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

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

/*Contact form*/
.section_contact_form {
    align-items: center;
}
.section_contact_form .form_description {
    line-height: 1.5rem;
    font-weight: 500;
    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 — legacy block intentionally empty; modern styles below (~2598).*/

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

/*Item card*/
.items_card {
    gap: 16px;
    align-items: center;
    padding-bottom: 24px;
	width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 32px;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
}
.items_card a {
    text-decoration: none;
    color: black;
	display: flex;
    flex-direction: column;
    height: 100%;
}
.items_card img {
    border-radius: 32px 32px 0 0;
    object-fit: cover;
    object-position: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-color: #fff;
    display: block;
}
/* Gadgets (Garmin / Oura / Whoop) and eyewear (Oakley) — product photos are
   square studio shots where the device is centred but tightly framed. cover
   crops them, so the watch/ring/glasses get cut off at the edges. Use
   `contain` + slight padding to show the whole device with breathing room. */
.items_card[data-kind="gadget"] img,
.items_card[data-kind="eyewear"] img {
    object-fit: contain;
    padding: 18px;
    box-sizing: border-box;
    background-color: #fff;
}
@media (max-width: 700px) {
    .items_card[data-kind="gadget"] img,
    .items_card[data-kind="eyewear"] img {
        padding: 10px;
    }
}
/* TF CLO product photos are studio shots with the model in the middle ~50%
   of the frame (white space on each side baked into the photo, not CSS).
   object-fit: cover does its job, but the photo content itself includes
   white margins. Zoom in slightly so the model fills more of the card. */
.items_card[data-brand-slug="tf-clo"] .image_wrapper {
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    display: block;
}
.items_card[data-brand-slug="tf-clo"] img {
    transform: scale(1.35);
    transform-origin: center 35%;
}
.items_card .items_card_description {
    padding: 12px 14px 14px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* Product title — PRIMARY element (product identity) */
.items_card .items_card_description > div:nth-child(1) {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Price — SECONDARY element with brand accent color */
.items_card .items_card_description > div:nth-child(2) {
    font-size: 18px;
    font-weight: 700;
    color: #F15A29;
    line-height: 1.2;
    margin-top: auto;
}
/* Split-payment badge (BNPL) — TERTIARY, muted so doesn't compete with price */
.items_card .card_split_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
    padding: 3px 9px;
    background: #f5f5f5;
    color: #888;
    border: 1px solid #e6e6e6;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.1px;
    white-space: nowrap;
    align-self: center;
}
.items_card .card_split_badge::before {
    content: "₽";
    display: inline-block;
    width: 13px;
    height: 13px;
    background: #aaa;
    color: #fff;
    border-radius: 50%;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .items_card .items_card_description {
        padding: 10px 10px 12px;
        gap: 4px;
    }
    .items_card .items_card_description > div:nth-child(1) {
        font-size: 15px;
        min-height: 2.4em;
    }
    .items_card .items_card_description > div:nth-child(2) {
        font-size: 17px;
    }
    .items_card .card_split_badge {
        font-size: 11px;
        padding: 3px 8px;
    }
    .items_card .card_split_badge::before {
        width: 13px;
        height: 13px;
        font-size: 9px;
        line-height: 13px;
    }
}
/* Reduce gap between cards on mobile (was 24px → tight on 375px viewport) */
@media (max-width: 541px) {
    .catalog_main .catalog_list .mobile_catalog_list_items .row {
        column-gap: 12px;
    }
    .sel-grid .row,
    .sel-grid .row .items_card {
        column-gap: 10px;
    }
}

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

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

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

/*Section product (product page)*/
.single_product section:last-child {
    padding-top: 24px;
}
.section_product {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6E6E6;
}
.XS_info {
    display: none;
}
.XS_info .title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}
.XS_info .price {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #F15A29;
    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: 19000;
	display: none;
    background-color: white;
	overflow-y: auto;          /* scroll the whole panel, not the inner table */
	-webkit-overflow-scrolling: touch;
}
#size_screen .wrapper {
	margin: 65px auto;
	max-width: 700px;
	width: calc(100% - 32px);  /* respect viewport width on mobile */
	position: relative;
	padding-bottom: 24px;
}
#size_screen .wrapper .icon-cross {
	position: absolute;
	right: 1rem;
	top: 0.35rem;
	cursor: pointer;
	/* WCAG 2.5.5: 44×44 hit area, icon glyph stays visually at 24px via font-size */
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
#size_screen h1{
	color: #fff;
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
	margin-bottom: 15px;
}
#size_screen table{
	width:100%;
	table-layout: fixed;
}
#size_screen .tbl-header{
	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;
    /* WCAG 2.5.5: 44×44 minimum touch target; icon kept 24px visually via font-size,
       padding bumps hit area without changing layout. */
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    cursor: pointer;
}
.menu_cover_screen .cover_screen_items,
.catalog_cover_screen .cover_screen_items {
    padding: 0 32px;
}
.menu_cover_screen .cover_screen_items .items_title,
.catalog_cover_screen .cover_screen_items .items_title {
    padding-top: 24px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
}
.catalog_cover_screen .cover_screen_items .filter {
    padding-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}
.catalog_cover_screen .cover_screen_items .filter .values_places{
    font-weight: 500;
	max-height: 180px;
	overflow-y: clip;
}
.catalog_cover_screen .cover_screen_items .continuous {
    margin-top: 16px;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places {
    margin-top: 8px;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places input['type=number'] {
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 8px 12px 8px 12px;
    color: rgb(179, 179, 179);
    background-color: #F7F7F7;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    width: 100%;
}
.catalog_cover_screen .cover_screen_items .continuous .values_places span {
    background-color: #E6E6E6;
    display: block;
    width: 8px;
    height: 1px;
}
.catalog_cover_screen .cover_screen_items .discrete {
    padding-top: 16px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    border-top: 1px solid #E6E6E6;
}
.catalog_cover_screen .cover_screen_items .discrete button {
    text-decoration: underline;
    color: #F23737;
    text-align: start;
    background-color: white;
    border: none;
    width: fit-content;
	font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
	padding: 0;
}
.catalog_cover_screen .cover_screen_buttons {
    padding: 8px 16px 24px 16px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    column-gap: 8px;
    background-color: #F7F7F7;
}
.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) — pill bar with per-cell hover, brand-orange current.*/
.pagination_container {
    display: flex;
    justify-content: center;
    margin: 32px 0 8px;
}
.pagination_container .pagination_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pagination_container .page_link,
.pagination_container .wp_page_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font: 500 14px/1 inherit;
    color: #222;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.pagination_container a.page_link:hover,
.pagination_container a.wp_page_link:hover {
    background: #F7F4EF;
    color: #111;
    text-decoration: none;
}
.pagination_container .current {
    background: #F15A29;
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination_container .ellipsis {
    color: #999;
    min-width: 20px;
    padding: 0 4px;
    cursor: default;
}
.pagination_container .arrow {
    color: #666;
    font-size: 16px;
}
.pagination_container .arrow.disabled {
    color: #C8C8C8;
    cursor: not-allowed;
}
#Mobile-paged {
    display: none;
}
@media (max-width: 768px) {
    #PC-paged { display: none; }
    #Mobile-paged { display: flex; }
    .pagination_container .page_link,
    .pagination_container .wp_page_link {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
    }
}

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

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

/*Section FAQ (for customers page)*/
.section_FAQ {
	padding-top: 32px !important;
}
.section_FAQ .accordion {
    margin-top: 56px;
}
/*Section FAQ (privacy page)*/
.section_privacy {
	color: #595959;
    font-weight: 500;
	line-height: 24px;
}
.section_privacy ul{
	list-style-type: none;
}

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

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

/* --- Scroll-triggered reveal (JS companion) --- */
.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;
  }
}