/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: transparent;
    padding: 0;
    padding: 40px 0px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
    padding-bottom: 28px;
}

.header .header-menu-links-light,
.header .header-menu-links {
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

.header.scrolled {
    background: var(--color-semi-gray);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header.scrolled-deep .header-menu-links-light,
.header.scrolled-deep .header-menu-links {
    max-height: 0;
    opacity: 0;
    margin: 0 auto;
    visibility: hidden;
}

.header .container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Logo */
.header-logo {
    flex: none;
}

/* Catalog button */
.header-catalog-btn {
    display: flex;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px;
    gap: 9px;
    width: 141px;
    height: 45px;
    background: var(--color-primary);
    border-radius: 1px;
    cursor: pointer;
    flex: none;
    z-index: 4;
}

.header-catalog-btn button.open-catalog-btn, button.close-catalog-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

button.close-catalog-btn{
    display: none;
}

.header-catalog-btn.opened>button.close-catalog-btn{
    display: inline;   
}

.header-catalog-btn.opened>button.open-catalog-btn{
    display: none;

}

.header-catalog-btn span {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-white);
}

/* Search */
.header-search {
    flex: none;
}

.header-search .search-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px;
    max-width: 390px;
    width: 390px;
    min-width: 100px;
    height: 45px;
    background: var(--color-bg-secondary);
    border-radius: 1px;
    box-sizing: border-box;
    max-width: 100%;
}

.header-search .search-input input {
    border: none;
    background: transparent;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;

    width: 100%;
}

.header-search .search-input input::placeholder {
    color: var(--color-gray);
}

.header-search .search-input .search-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: none;
}

/* Social links */
.header-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
    margin: auto;
}

.header-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.header-link a {
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
}

/* Action buttons */
.header-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 31px;
}

.header-btn-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: fit-content;
    height: 45px;
    justify-content: flex-end;
    position: relative;
}

.header-btn-vertical div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.header-btn-vertical a {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}

/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== ROOT VARIABLES ===== */
:root {
    --color-primary: #E5004E;
    --color-purple: #BD58E8;
    --color-white: #FFFFFF;
    --color-black: #2C2B30;
    --color-deep-gray: #818183;
    --color-gray: #E4E4E4; 

    --color-semi-gray: #FBFBFB;/*for bg*/

    --color-bg-secondary: #F5F6F8;


    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Golos Text', sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 24px;
    --fs-xl: 26px;
    --fs-2xl: 40px;

    --container-width: calc(1240px + 80px);/*1240, но 40px padding с двух сторон*/
    --container-wide-width: 1920px;
    --container-padding: 40px;

    --transition: 0.5s ease;
}

/* ===== BASE ===== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    background-color: var(--color-semi-gray);/*semi-gray bg*/
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); } 
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

p {
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary);
}

/* ===== MEDIA ELEMENTS ===== */
img, svg, video {
    display: block;
    max-width: 100%;
}

/* ===== FORMS ===== */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

/* ===== LISTS ===== */
ul, ol {
    list-style: none;
}

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.small-container{
    width: 100%;
    max-width: calc(1024px - (20px * 2));
    padding: 0 20px;
    margin: 0px auto;
}
.relative{
    position: relative;
}
.wide-container {
    width: 100%;
    max-width: var(--container-wide-width);
    margin: 0px auto;
    /*margin: 0px 10px;/*with calc*/*/
}

.wrap{
    flex-wrap: wrap;
}
.landing-section-1{
    height: 100vh;
    background-image: url("/assets/images/layer-landing-1sect-bg.svg");
    background-size: cover;
    max-height: 830px;
}
.mt-header{
    padding-top: 250px;
}
.mt-header-personal{
    padding-top: 310px;
    background-color: #FFE8F0;
    padding-bottom: 70px;
}
.mt-80{
    margin-top: 80px;
}
.mt-60{
    margin-top: 60px;
}
.mt-50{
    margin-top: 50px;
}
.mt-40{
    margin-top: 50px;
}
.mt-20{
    margin-top: 20px !important;
}
.mt-auto{
    margin-top: auto;
}
.mb-auto{
    margin-bottom: auto;
}
.header-menu-links-light{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    color: var(--color-deep-gray);
}

.header-menu-links{
    font-size: var(--fs-md);
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
.header-menu-links a{
    padding-bottom: 30.5px;
}
.header-menu-links a:hover{
    border-bottom: 1px solid var(--color-black);
}
.header-btn-vertical a img{
    margin: auto;
    margin-bottom: 4px;
}
.absolute-img-left{
    position: absolute;
    left: 0px;
    height: auto;
    max-height: calc(100vh - 250px); /*after header*/
    width: auto;
    max-width: 50%;
    bottom: 0px;
}
.landing-section-1{
    overflow: hidden;
}







/* Slider */
.first-section-slider {
    position: relative;
    width: 60%;
    height: 580px;
    max-height: calc(100vh - 250px);
    overflow: visible;
    margin-left: auto;
    padding-bottom: 40px; 
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.5s linear;
}

.slide.active {
    opacity: 1;
    pointer-events: all;
    z-index: 1;
}

.slide.leaving {
    opacity: 0;
    z-index: 2;
    transition: opacity 1.0s ease-in-out;
}

/* Image */

.slide__image {
    position: relative;
    top: 0;
    height: 500px;
    max-height: calc(100vh - 250px); /*after header*/
    max-width: 50%;
    bottom: 0px;
    margin: auto;
}

.slide__image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Content */
.slide__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 70px;
    width: 550px;
    margin: auto;
}

.slide__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slide__title {
    text-transform: uppercase;
}

.slide__description {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 3%;
}

/* Button */
.slide__btn, .btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 18px 49px 16px 11px;
    gap: 30px;
    width: 330px;
    height: 60px;
    background: var(--color-primary);
    border-radius: 1px;
    font-weight: 400;
    font-size: var(--fs-md);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-semi-gray);
    text-decoration: none;
    transition: opacity var(--transition);
}

.slide__btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
}
.slide__btn:hover img{
    filter: brightness(0) saturate(100%) invert(18%) sepia(88%) saturate(4334%) hue-rotate(321deg) brightness(95%) contrast(98%);
}

.slide__btn img {
    display: inline;
    width: 24px;
}

/* Dots */
.slider__dots {
    position: absolute;
    bottom: 0px;
    right: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    z-index: 1;
    bottom: 23px;
}

.slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C5C5C5;
    cursor: pointer;
    transition: background var(--transition);
}

.slider__dot.active {
    background: var(--color-black);
}

.landing-section-2 {
    margin-top: 50px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-decoration: none;
    color: var(--color-text);
    transition: opacity var(--transition);
    max-width: 180px;
}

.category-item:hover {
    opacity: 0.8;
    color: var(--color-text);
}

.category-item__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 1px;
    overflow: hidden;
    background: var(--color-semi-gray);
}

.category-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-item:hover .category-item__image img {
    transform: scale(1.04);
}

.category-item__title {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: 100%;
}

.product-main-sect-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-main-sect-header > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.product-main-sect-header h1 {
    text-transform: uppercase;
}

.btn-show-all {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    gap: 10px;
    height: 40px;
    background: var(--color-gray);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 1px;
    transition: background var(--transition);
}

.btn-show-all:hover {
    color: var(--color-text);
}

.right-arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.slider-block-prev,
.slider-block-next {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition);
    display: flex;
    align-items: center;
}

.slider-block-prev:hover,
.slider-block-next:hover {
    opacity: 1;
}

/* Slider wrap */
.product-slidering-block {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 60px;
}

.product-slider-track {
    display: flex;
    flex-direction: row;
    gap: 12px;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Card */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 286px;
    width: calc(25% - 11px);
    flex-shrink: 0;
    position: relative;
}
.product-card .product-count{
    position: absolute;
    right: 0;
    top: 0;
    background: #C5C5C5;
    color: var(--color-white);
    width: 40px;
    height: 40px;
    display: flex;
}
.product-card .product-count span{
    display: flex;
    margin: auto;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}
.product-card-title{
    font-size: 12px;
    text-align: center;
}

/* Image */
.product-card__image-wrap {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--color-semi-gray);
    border-radius: 1px;
    overflow: hidden;
}

.product-card__image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Badges */
.product-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 4px 9px;
    font-weight: 400;
    font-size: 10px;
    color: var(--color-white);
    background: #ED6C71;
    border-radius: 1px;
    z-index: 2;
    min-width: 60px;
}

.product-card__badge--new {

}

.product-card__badge--hit {
    background: var(--color-black);
    color: var(--color-white);
}

/* Favorite */
.product-card__favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--transition);
    z-index: 2;
    height: 24px;
    width: 24px;
    background-image: url("/assets/images/heart.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.product-card__favorite:hover,.product-card__favorite.clicked {
    background-image: url("/assets/images/heart-clicked.svg");
}

/* Body */
.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Prices */
.product-card__prices {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.product-card__price {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 18px;
    color: var(--color-text);
}

.product-card__price-old {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    text-decoration: line-through;
    opacity: 0.3;
}

.product-card__discount {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    font-weight: 400;
    font-size: 10px;
    color: var(--color-white);
    background: #ED6C71;
    border-radius: 1px;
}

/* Info */
.product-card__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-card__name {
    font-weight: 600;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 38px;
}

.product-card__anot {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
}


/* Stock */
.product-card__stock {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
}

.product-card__stock-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.product-card__stock.in-stock {
    color: #21BA72; /*green*/
}

.product-card__stock.in-stock .product-card__stock-dot {
    background-image: url('/assets/images/in-stock.svg');
    background-position: 100%;
}

.product-card__stock.out-stock {
    color: var(--color-gray);
}

.product-card__stock.out-stock .product-card__stock-dot {
    background: #B4B4B4;
}

.landing-section-4>.container{
    height: 100%;
    display: flex;
}
.landing-section-4 .slide__content{
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0;
}

/* Button */
.product-card__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: var(--color-gray);
    border-radius: 1px;
    font-weight: 400;
    font-size: 18px;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition);
}

.product-card__btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.about-company-bg{
    background-image: url('/assets/images/about-company.png');
    height: 640px;
    background-position: 50% 0px;
}
.mt-100{
    margin-top: 100px;
}
.mt-32{
    margin-top: 32px;
} 
.ml-32{
    margin-left: 32px;
}
.ml-auto{
    margin-left: auto;
}
.flex-column-around{
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}
.landing-section-4 .slide__title{
    color: var(--color-white);
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
}
.landing-section-4 .slide__description{
    color: var(--color-black);
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
}



.section-title{
    text-transform: uppercase;
}

.brands-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: minmax(0, 710fr) minmax(0, 498fr);
}
.brand-item__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.brand-item__name {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.brand-item__desc {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin-top: 18px;
}
.col-2-first-small {
    display: flex;
}
.blog-slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
}

.blog-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    width: 50%;
}

.blog-slider-column{
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.one-post-column-link{
    margin-top: auto;
    padding: 30px;
    gap: 16px;
    display: flex;
    flex-direction: column;
}
.one-post-column{
    min-height: 860px;
    position: relative;
    display: flex;
}
.blog-useful-posts .blog-card__image-wrap{ 
    height: 270px;
}
.blog-card__image-wrap img{
    width: auto !important;
    height: 100% !important;
}
.blog-useful-posts .blog-card{
    grid-template-columns: minmax(210px, 1fr) minmax(100px, 2fr);
}

/* ====================== Карточка ====================== */
 
.blog-card { 
    display: grid; 
    grid-template-columns: minmax(100px, 180px) minmax(100px, 2fr);
    gap: 32px;
    text-decoration: none;
    color: var(--color-text);
    transition: opacity var(--transition);
    min-width: 286px;
}

.blog-card:hover {
    opacity: 0.85;
}

.blog-card__image-wrap {
    width: 100%;
    height: 200px;
    border-radius: 1px;
    overflow: hidden;
/*    background: #D9D9D9;*/
}

.blog-card__image-wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
    margin: auto;
} 

.blog-card:hover .blog-card__image-wrap img {
    transform: scale(1.03);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.blog-card__title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
}

.blog-card__anot {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-deep-gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
}

.blog-card__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--color-primary);
    padding-top: 8px;
}

.blog-card__date {
    font-size: 12px;
    color: var(--color-gray);
}

.blog-card__more {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pink-bg{
    background: rgba(255, 232, 240, 1);
}
.pink-bordered{
    border: 1px solid var(--color-primary);
    border-left: none;
    border-right: none;
    padding: 60px 0px;
}
.pink-bordered-full{
    border: 1px solid var(--color-primary);
    padding: 60px;
}

.row{
    display: flex;
    flex-direction: row;
}
.up-your-skills-block .row{
    gap: 32px;
}
.up-your-skills-block .slide__image{
    margin: auto 0;
    height: auto;
    max-height: 100%;
}

.make-bussines-block{
    background: #F06B70;
}
.make-bussines-block .wide-content-center{
    gap: 42px;
    justify-content: center;
    min-height: 640px;
    position: relative;
}
.text-uppercase{
    text-transform: uppercase;
}
.text-white{
    color: var(--color-white);
}
.wide-content-center .slide__content{
    margin-left: 0;
    max-width: 670px;
    width: 53%;
}
.wide-content-center .container{
    display: flex;
}
.make-bussines-block h4{
    font-weight: 400;
}
.make-bussines-block .slide__image{
    margin: auto 0;
    height: auto;
    max-height: 100%;
    max-width: 47%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
.two-columns{
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
    gap: 32px;
}
.landing-section-10 .product-main-sect-header{
    margin-bottom: 60px;
}
.one-post-column{
    background-size: cover;
    background-position: center;
}
.blog-useful-posts{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.bg-lightgray{
    background: var(--color-gray);
}
.subscription-block{
    min-height: 370px;
    padding: 60px;
}
.subscription-block {
    padding: 0;
}

.subscription-block .bg-lightgray {
    border-radius: 1px;
    padding: 60px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.top-subscription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1064px;
}

.top-subscription h2 {
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.subscription {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 34px;
    width: 100%;
}

.input-field {
    width: 333px;
    height: 60px;
    padding: 18px 20px 16px;
    background: var(--color-semi-gray);
    border: 1px solid var(--color-deep-gray);
    border-radius: 1px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--color-deep-gray);
    outline: none;
    transition: border-color var(--transition);
    flex-shrink: 0;
    color: var(--color-black);
}
.input-textarea{
    width: 333px;
    height: 138px;
    padding: 18px 20px 16px;
    background: var(--color-semi-gray);
    border: 1px solid var(--color-deep-gray);
    border-radius: 1px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--color-deep-gray);
    outline: none;
    transition: border-color var(--transition);
    flex-shrink: 0;
}

.input-field::placeholder,.input-textarea::placeholder {
    color: var(--color-deep-gray);
}

.input-field:focus,.input-textarea:focus {
    border-color: var(--color-primary);
}

.bottom-subsctiption p {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.03em;
    text-align: center;
}

.footer {
    background: var(--color-black);

    color: var(--color-white);
    padding: 70px 0;
}

.four-columns-first-wide {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 80px;
    margin-bottom: 40px;
}

.four-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 80px;
    margin-bottom: 40px;
}

/* Лого и контакты */
.footer-logo-contacts {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-contact>a {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition);
}

.footer-contact>a:hover {
    opacity: 0.7;
    color: var(--color-white);
}

.footer-contact .contact-info {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-white);
}

/* Колонки меню */
.col-catalog-menu,
.col-catalog-about,
.col-catalog-clients {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu-title {
    font-weight: 600;
    font-size: 20px;
    color: var(--color-white);
    text-decoration: none;
    margin-bottom: 4px;
    transition: opacity var(--transition);
}

.footer-menu-title:hover {
    opacity: 0.7;
    color: var(--color-white);
}

.footer-menu-links {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.footer-menu-links a {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0%;
    line-height: 32px;
    text-wrap: nowrap;
}

.footer-menu-links a:hover {
    opacity: 0.7;
    color: var(--color-white);
}

.footer-socials{
    display: flex;
    gap: 20px;
    margin-top: 50px;
}

.footer-socials img{
    filter: grayscale(100%);
}
/* Copyright */
.footer-copyright {
    border-top: 1px solid var(--color-deep-gray);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0;
}

.copyright p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-white);
}

.payment-systems-img {
    display: flex;
    gap: 25px;
    align-items: center;
}

.payment-systems-img img {
    opacity: 0.5;
    transition: opacity var(--transition);
}

.payment-systems-img img:hover {
    opacity: 1;
}

.header-menu-links-light a:hover{
    color: var(--color-black);
}

.header-btn-vertical a:hover{
    opacity: 0.5;
    color: var(--color-black);
    transition: var(--transition);
} 



/* Контейнер хлебных крошек */
.breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Элементы крошек (ссылки и текст) */
.breadcrumb-item, 
.breadcrumb-item a {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--color-black);
    text-decoration: none;

    max-width: 80vw;
    overflow: hidden;          /* обязательно */
    text-overflow: ellipsis;   /* рисует "..." */
    white-space: nowrap;       /* запрещает перенос внутри элемента */
    min-width: 0;              /* чтобы flex дал сжаться */
    display: block;            /* или inline-block, если это inline-элемент */
}

/* Ссылка при наведении */
.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Последний (активный) элемент */
.breadcrumb-item.active {
    opacity: 0.5;
    pointer-events: none; /* Отключаем кликабельность */
}

/* Разделитель (Vector из Figma) */
.breadcrumb-separator {
    display: inline;
}

.product-category-sect-header{
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}

/* Контейнер для вкладок */
.subcategories-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 36px;
    margin-bottom: 30px; /* Отступ снизу до товаров */
    overflow-x: auto;   /* Прокрутка на мобильных устройствах */
    white-space: nowrap;
}

/* Базовая кнопка-вкладка */
.tab-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 10px; /* Figma padding */
    height: 39px;
    box-sizing: border-box;
    
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--color-black);; /* Цвет текста по умолчанию */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Ховер эффект для неактивных вкладок */
/* Активная вкладка (из Figma: Frame 1984077976) */
.tab-item.active,.tab-item:hover {
    background: var(--color-black);
    color: #FFFFFF;
}

/* Контейнер для сетки товаров */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 44px 14px; /* Первое значение — отступ между рядами, второе — между карточками */
    margin-top: 30px;
    width: 100%;
}

/* На случай, если товаров нет */
.no-products {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    font-size: 16px;
    color: var(--color-black);
}

/* Кнопка-выбор количества (активируется в корзине) */
.product-card__counter-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 40px;
    background: var(--color-primary);
    border-radius: 1px;
    border: none;
    box-sizing: border-box;
}

/* Стили для плюса и минуса */
.product-card__counter-action {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: var(--color-white);
    width: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Стили для текста "X шт" */
.product-card__counter-val {
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: var(--color-white);
    flex-grow: 1;
}

.shop-category h1{
    text-transform: uppercase;
}

.product-detail-sect-header{
    display: grid;
    grid-template-columns: 1fr;
}

.product-detail-columns{
    display: grid;
    grid-template-columns: minmax(700px, 4fr) minmax(350px, 1fr);
    position: relative;
} 
.product-detail-main{
    margin-left: 100px;
}
.product-detail-main .product-card__image-wrap{
    width: 100%;
    max-height: 600px;
    height: auto;
    padding-right: 70px;
}
.product-detail-main .product-card__image-wrap img{
    height: auto;
}

.product-detail-advantages{
    font-family: var(--font-primary);
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 12px;
    
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr 1fr;
}
.advantage-elem{
    display: flex;
    gap: 10px;
}

/* ===== TABS ===== */
.tabs-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
    padding: 0;

    margin-bottom: 32px;
    border-bottom: 1px solid var(--color-gray);

    margin-left: 100px;
}

.tabs-nav__item {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 18px;
    text-transform: uppercase;

    color: var(--color-black);
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;

}

.tabs-nav__item.active, .tabs-nav__item:hover {
    border-bottom-color: var(--color-primary);
}

.tabs-content__panel {
    display: none;
    font-size: 14px;
}

.tabs-content__panel.active {
    display: block;
}
.product-detail-container{
    max-width: 600px;
}

.product-detail-right{
    margin-top: 50px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.exclusive-btn{
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 11.5px 8px; 
    background: var(--color-primary);
    color: var(--color-white);
    text-transform: uppercase;
    justify-content: start;
    vertical-align: middle;
    font-size: 12px;
    font-weight: var(--fw-medium);
}
.exclusive-btn .icon{
    display: flex;
    margin: auto 0;
}

.product-detail-right .article{
    color: var(--color-deep-gray);
}
.add-cart-and-favorite-btn{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    flex-direction: row;
    width: auto !important;
    gap: 0;
}

.add-cart-and-favorite-btn .product-card__action-slot{
    flex:auto;
    margin-right: 30px;
}

.prod-detail-auth-btn{
    text-decoration: underline;
}
.product-detail-right .product-card__stock{
    margin-top: 16px;
}

.share-btn{
    display: flex;
    justify-content: center;
    border: 1px solid var(--color-primary);
    gap: 10px;
    padding: 9px;
    font-size: 18px;
    font-weight: var(--fw-regular);
}

.product-detail-right .product-card__price{
    font-weight: var(--fw-semibold);
    font-size: 32px;
}

.product-detail-right .product-card__prices{
    margin-top: 10px;
}
.favorite-btn-in-card{
    position: relative;
    padding: 10px 17px;
    width: 60px;
    height: 40px;
    background-color: var(--color-gray);
    border-radius: 1px; 
}

.favorite-btn-in-card .product-card__favorite{
    top: 0;
    left: 0;
    right: 0;
    position: relative;
}

.product-detail-columns.advantages{
    margin-top: 40px;
    margin-bottom: 60px;
}
.product-detail-columns.advantages .product-detail-right{
    margin-top: 0;
}

.product-detail-right .share-btn,.product-detail-right .product-card__btn{
    max-width: 260px; 
}

.product-detail-right .support-card{
    margin-top: 45px;
}

.brand-card .brand-title{
    color: var(--color-deep-gray);
    font-weight: 600;
}
.brand-card .brand-name{
    color: var(--color-black);
}
.brand-card{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.support-card{
    display: flex;
    gap: 20px;
}

.support-card .support-text{
    display: flex;
    flex-direction: column;
    margin: auto 0;
}

.support-card .support-gray-text{
    font-weight: var(--fw-semibold);
    font-style: Semi Bold;
    font-size: 12px;
    color: var(--color-deep-gray);
}
.support-card .support-black-text{
    font-weight: var(--fw-semibold);
    font-style: Semi Bold;
    font-size: 16px;
}

.shop-product{
    border-bottom: 1px solid var(--color-gray);
    padding-bottom: 40px;
}
.modal{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;

    z-index: 3; /* Убедитесь, что индекс выше остальных элементов */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;

}

/* Состояние, когда модальное окно открыто */
.modal.active {
    opacity: 1;
    visibility: hidden; /* Переопределяется ниже, если нужно, или просто visible */
    visibility: visible;
/*    display: flex;*/
}

.modal-backdrop{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);

}

.modal-body {
    position: relative;
    z-index: 1001;
    background: var(--color-white);
    max-width: 1440px;
    max-height: 90vh;
    margin: 50px auto;
    
    width: auto;
    height: 800px;

    border-radius: 1px;
    
    /* Вертикальное выравнивание через transform */
    top: 50%;
    transform: translateY(-100%); /*сналча скрываем вверх, чтоб оттуда плавно выехало*/
  
    transition: transform 0.4s ease;

    overflow: auto;
}

.modal.active .modal-body {
    transform: translateY(-60%);
}

.modal-body .column{
    overflow: auto;
}

.grid-two-columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-three-columns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-three-columns.catalog-modal{
    gap: 33px;
    height: 100%;
}

.modal-brands-title{
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 20px;
    text-transform: uppercase;
} 

.modal-brands-links{
    margin-top: 20px; 
    gap: 30px;
    display: grid;
}

.catalog-modal .column{
    padding-top: 60px;
}
.catalog-modal .column.menu-links-modal{
    background-color: var(--color-gray);
    padding-left: 100px;
    display: grid;
    gap: 40px;
    overflow: auto;
} 

.catalog-modal .first-level-menu-link{
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 20px;
    text-transform: uppercase;

}
.menu-item{
    display: grid;
    gap: 12px;
}
.second-level-menu{
    display: grid;
    gap: 8px;
    padding: 0px 20px;
}
.catalog-modal .second-level-menu-link{
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
}

.catalog-modal .right-column{
    display: grid;
    justify-content: end;
    padding-right: 100px;
}

.grid-three-columns.catalog-modal{
    grid-template-columns: minmax(492px, 1fr) 1fr minmax(0.25fr, 286px);
}

.label-text{
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 18px;
    text-transform: uppercase;
    padding-top: 8px;
}

.catalog-modal .banner{
    max-width: 285px;
}

.catalog-modal .banner .banner-body{
    margin-top: 60px;
    background: #FFE8F0;
    padding-top: 40px;
    padding-left: 33px;
}
.banner .banner-body{
    font-family: var(--font-primary);
    font-weight: 600;
    font-style: Semi Bold;
    text-transform: uppercase;
    padding-bottom: 20px;
} 
.banner .banner-first-text{
    margin-top: 15px;
    font-size: 24px;
}

.banner .banner-second-text{
    font-size: 16px;
}

.banner .banner-third-text{
    font-size: 26px;
}

.banner .span-bold{
    font-size: 47px;
}
.banner .btn{
    max-width: 100%;
}
.banner .btn:hover{
    background-color: var(--color-white);
}

.blog-rubrics-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Важно: запрещаем перенос элементов */
    overflow-x: auto;  /* Включаем горизонтальный скролл */
    overflow-y: hidden; /* Прячем вертикальный скролл на всякий случай */
    gap: 38px;
    width: 100%;       /* Занимаем всю ширину контейнера */
    padding-bottom: 4px; 
}
.blog-rubrics-tabs .tab-item, .blog-post-metadata .tab-item {
    flex-shrink: 0;
    white-space: nowrap; /* Текст внутри вкладки не должен переноситься */
}
.blog-rubrics-tabs .tab-item, .blog-post-metadata .tab-item{
    background-color: var(--color-gray);
} 
.blog-rubrics-tabs .tab-item:hover, .blog-rubrics-tabs .tab-item.active, .blog-post-metadata .tab-item:hover{
    /*color: var(--color-primary);*/
    background-color: transparent;
    color: var(--color-black);
}
.first-product-blog{
    border: 1px solid var(--color-primary);
    background-color: #FFE8F0;
    overflow: hidden; /* скрывает выпирающие части */
    max-width: 100%; /* блок не шире экрана */
}
.first-product-blog .blog-card__footer{
    border-top: 0px;
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
}
.first-product-blog .blog-card__date, .posts-grid .blog-card__date{
    color: var(--color-black);
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    display: flex;
    margin: auto 0;
}
.first-product-blog .blog-card__more{
    gap: 20px;
    border-radius: 1px;
    padding: 0;
    width: 240px;
    height: 40px;
}
.first-product-blog .blog-card__more:hover, .blog-card-useful .blog-card__more{
    color: var(--color-white);
}
.first-product-blog .blog-card__text{
    max-width: 530px;
    width: auto;
    margin-top: 30px;
}
.first-product-blog .blog-card__body{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 65px;
}
.blog-card__rubrika{
    color: var(--color-purple);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.first-product-blog .blog-card__title{
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 40px;
    margin-top: 8px;
}
.first-product-blog .blog-card__anot{
    font-size: 16px;
    color: var(--color-black);
}
.blog-card-useful .blog-card__footer{
    border: none;
    gap: 0;
    padding-top: 16px;
}
.blog-card-useful .blog-card__more{
    width: 220px;
    height: 40px;
    opacity: 1;
    gap: 20px;
    padding: 0;
}
.blog-card-useful .blog-card__date{
    margin-bottom: 16px;
}
.blog-card-image{
    max-height: 290px;
    overflow: hidden; 
}
.blog-card-image a{
    display: flex;
}
.blog-card-image a>img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.blog-card-useful .blog-card__body{
    margin: auto 0;
}
.about-company-banner{
    background-color: #ED6C71;
    background-image: url('/assets/images/about-banner.jpg');
    height: 640px;
    background-position: 10% 0px;
    background-size: contain;
    background-repeat: no-repeat; 
}
.about-company-banner .slide__content{
    color: var(--color-white);
    width: 605px;
    height: 100%;
}
.about-company-banner>.container{
    height: 100%;
}
.about-company-banner .slide__text{
    margin: auto;
}
.about-company-banner .slide__title{
    font-weight: 600;
}
.about-company-banner .slide__description{
    font-size: 24px;
}
.advantage-item{
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 32px;
}
.advantage-item .advantage-body{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: column;
}
.advantage-item .advantage-title{
    font-weight: 400;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--color-primary);
}
.advantage-item .advantage-text{
    font-size: 14px;
}
.about-leader-banner{
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 70px;
    gap: 70px;
    border: 1px solid var(--color-primary);
    border-radius: 1px;
}
.about-leader-banner .icon{
    margin: auto 0;
}
.about-leader-banner .banner-text-bold{
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 3%;
    color: var(--color-black);
    line-height: 1.2;
}
.about-leader-banner .banner-body .btn{
    margin-top: 40px;
}
.about-leader-banner .banner-text-regular{
    font-weight: 400;
    font-style: Regular;
    font-size: 26px;
    letter-spacing: 3%;
    margin-top: 15px;
}

.certificate-image{
    height: auto;
}
.certificate-item{
    min-height: 200px;
    min-width: unset;
    width: calc(25% - 50px);
}
.certificates-track{
    gap: 60px;
}
.up-your-skills-block .slide__image{
    margin: auto 0px;
} 

.about-tiles-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}
.tile-block{
    padding-top: 60px;
    padding-left: 75px;
    padding-bottom: 70px;
    padding-right: 45px;
}
.tile-block .tile-text-bold{
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 3%;
    text-transform: uppercase;
    line-height: 1.2;
}
.tile-block .tile-text{
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
}
.tile-block .tile-text-small{
    font-size: 10px;
}
.tile-block.bg-img{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.brand-item__image img{
    height: 100%;
    width: 100%;
}
.partners-banner{
    padding-top: 60px;
    padding-bottom: 80px;
}
.partner-banner-img{
    position: absolute;
    right: -200px;
    bottom: -80px;/*padding compensate*/
    height: 775px;
    width: auto;
    z-index: 0;
    pointer-events: none;
}
.partners-banner{
    height: 660px;
    border: 1px solid var(--color-primary);
}
.partners-banner .container{
    position: relative;
    height: 100%;
}
.partner-banner-content{
    max-width: 1024px;
}
.partner-banner-bold{
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 3%;
    text-transform: uppercase;
    margin-top: 25px;
}
.partners-banner-text{
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 3%;
    margin-top: 40px;
}
h1.partner-banner-title{
    margin-top: 40px;
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 3%;
    text-transform: uppercase;
    color: var(--color-primary);
}
.banner-partner-form{
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(210px, 1fr) minmax(300px, 1fr);
    gap: 32px;
}
.banner-partner-form .input-field,.banner-partner-form .btn{
    width: auto;
}
.partner-banner-text{
    position: relative;
    z-index: 2;
}
.btn-black{
    color: var(--color-white);
    background: var(--color-black);
}
.banner-partner-form .btn{
    padding: 20px;
}
.connect-novel-title{
    font-family: Inter;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 3%;
}
.connect-novel .slide__description {
    max-width: 500px;
}
.pink-border-round{
    border: 1px solid var(--color-primary); 
}
.who-partner-grid{
    display: grid;
    gap: 32px;
}
.who-partner-item{
    gap: 16px;
}
.text-big{
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 2%;
}
.fw-normal{
    font-weight: 300;
}
.who-partner-item .text-text{
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 3%;
}
.partners-perspective-item{
    grid-template-columns: minmax(100px, 500px) minmax(100px, 500px);
}
.partners-perspective-item .icon{
    overflow: hidden;
    max-height: 370px;
}
.partners-perspective-item .connect-novel-title{
    text-transform: uppercase;
}

.partners-perspective-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*object-position: center bottom;*/
  display: block;
} 

.partner-previlegies .two-columns{
    gap: 120px;
}

.seven-previlegies-block{
    border: 1px solid var(--color-primary);
    padding: 30px;
    width: 100%;
    aspect-ratio: 1 / 1; /* 1:1 - это квадрат */

    max-height: 580px;
    margin-top: auto;
    margin-bottom: auto;
}
.seven-previlegies-block .seven-previlegies-inner{
    background: var(--color-primary);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.seven-previlegies-block .seven-previlegies-inner span{
    font-weight: 600;
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    color: var(--color-white);
}
.previlegies-list{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.previlegie-item .previlegie-title{
    font-weight: 600;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--color-primary);
    position: relative;
/*    padding-left: 40px;*/
}
.previlegie-item .previlegie-text{
    font-weight: 400;
    font-size: 26px;
}

.previlegie-item .previlegie-title::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 1px;
    left: -40px; /* сдвигаем влево на размер отступа */
    top: 50%; /* центрируем по вертикали */
    transform: translateY(-50%); /* точное выравнивание по центру */
    opacity: 1;
}

.delivery-steps,.work-steps{
    padding-top: 60px;
    padding-bottom: 100px;
}

.work-steps{
    background: #ED6C71;
}

.work-steps .section-title{
    color: var(--color-white);
}
.work-steps-items,.delivery-steps-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
}
.work-step-item .work-step-title{
    margin-top: 40px;
    font-weight: 600;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--color-white);
}
.work-step-item .work-step-text,.delivery-steps-items .delivery-step-text{
    margin-top: 20px;
    font-weight: 400;
    font-size: 18px;
    color: var(--color-white);
}

.delivery-steps-items .delivery-step-text{
    color: var(--color-black);
}

.work-step-icon,.delivery-step-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.work-step-icon img,.delivery-step-icon img{
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    z-index: 1;
}

.work-step-item:not(:last-child) .work-step-icon::after,.delivery-step-item:not(:last-child) .delivery-step-icon::after{
    content: '';
    position: absolute;
    left: 50px;
    right: 10px;
    height: 2px;
    background: var(--color-white);
    top: 50%;
    transform: translateY(-50%);
}
 
.work-step-item:not(:last-child) .work-step-icon::before,.delivery-step-item:not(:last-child) .delivery-step-icon::before {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--color-white);
}
.delivery-step-icon::before{
    border-left-color: var(--color-primary) !important;
}
.delivery-step-icon::after{
    background: var(--color-primary) !important;
}

.partners-banner.bottom-block{
    height: auto;
    margin-top: 130px;
}
.partners-banner.bottom-block .partner-banner-text{
    text-align: center;
}
.partners-banner.bottom-block .partner-banner-bold{
    font-size: 26px;
    margin-top: 40px;
}
.partners-banner.bottom-block .partner-banner-text img{
    margin-left: auto;
    margin-right: auto;
}
.partners-banner.bottom-block .partner-banner-content{
    max-width: 100%;
}
.contacts-contact-form{
    background: #ED6C71;
    padding: 80px 70px 100px 100px ;
    color: var(--color-white);
}
.text-uppercase{
    text-transform: uppercase;
}
.contact-form-wide .header-link{
    display: grid;
    gap: 45px;
    grid-template-columns: 1fr 1fr;
}
.contact-form-wide .header-link a, .contact-form-wide .header-link img{
    width: 60px;
    height: 60px;
}
.bold-title{
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 3%;
}
.border-white{
    border-color: var(--color-white);
}
.contact-form{
    margin-left: auto;
    max-width: 425px; 
    border: 1px solid #FFFFFF;
    padding: 35px 40px;
}

.contact-form form{
    display: grid;
    gap: 35px;
}

.btn.text-center{
    padding: 20px;
    text-align: center;
}
/* Auth modal (login/register) */
.auth-modal-body-outer{
    position: absolute;
    width: 950px;
    max-width: 100%;
    right: 0;
    top: 0;
    height: 100vh;
    background: var(--color-white);
    padding-left: 100px;
}
.auth-modal-body {
    width: 500px; 
    max-width: 100%;
    height: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    margin-left: 0;
}

.modal.active .auth-modal-body {
    transform: translateX(0);
    top: 0;
}

.close-auth-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.auth-modal-title {
    font-weight: var(--fw-bold);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 6%;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
}

.auth-email-input {
    width: 400px;
    max-width: 100%;
}

.auth-submit-btn {
    width: 400px;
    max-width: 100%;
    padding: 18px 24px;
    text-align: center;
    text-transform: unset;
}

.auth-register-link {
    margin-top: 20px;
    text-decoration: underline;
}

.auth-modal-consent {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2%;
    color: var(--color-deep-gray);
    max-width: 400px;
}
#open-auth-modal{
    z-index: 5;
}
.max-width-500-auth{
    width: 500px;
    max-width: 100%;
    position: relative;
    height: 100px;
}
.auth-modal-content{
    display: grid;
    gap: 32px;
}
.auth-modal-content .input-field{
    width: 400px;
}

.cart-table{
    border: 1px solid #ED6C71;
}

.cart-table td, .cart-table th {
    padding: 16px 8px;
    vertical-align: middle;
}

.cart-table .product-name {
    font-weight: 600;
    line-height: 1.3;
}
.cart-table .product-anot, .cart-table .product-wt {
    font-size: 14px;
    color: var(--color-black);
}
.cart-table .product-anot {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.remove-item {
    background: none;
    border: none;
    color: #999;
    font-size: 22px;
    cursor: pointer;
}
.remove-item:hover { color: var(--color-primary); }

.order-form-column input, .order-form-column .input-field {
    margin-bottom: 12px;
}
.two-columns-first-wide{
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 32px;
}
.two-columns-first-2fr{
    display: grid;
    grid-template-columns: calc(66.6% - 16px) calc(33.3% - 16px);
    gap: 32px;
}
.sticky{
    position: sticky;
    top: 150px;
}
.order__total-block{
    border: 1px solid var(--color-primary);
    padding: 40px 18px;
}
.order__total-block .btn{
    width: auto;
}
.order-form__block .input-field{
    width: auto;
    min-width: 100px;
}
.gap-20{
    gap: 20px;
}
.w-100,.w-100.input-field{
    width: 100%;
}
/* ===== Delivery & Payment options ===== */
.delivery__block,
.payment {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr 1fr;
}

.delivery__label,
.payment__label {
    display: block;
    cursor: pointer;
}

.delivery__label input,
.payment__label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.delivery__item,
.payment__item {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: auto 0px;
    padding-left: 20px;
    background: transparent;
    border: 1px solid var(--color-deep-gray);
    border-radius: 1px;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: var(--color-deep-gray);
    height: 170px;
}
.delivery__item>div,
.payment__item>div{
    margin: auto 0;
}

.delivery__label:hover .delivery__item,
.payment__label:hover .payment__item,
input:checked + .delivery__item,
input:checked + .payment__item,
.delivery__label input:checked + .delivery__item,
.payment__label input:checked + .payment__item {
    border: 2px solid #ED6C71;
    color: var(--color-black);
}

.delivery__icon,
.payment__icon {
    display: flex;
    flex-shrink: 0;
    width: auto;
    height: 32px;
    border-radius: 1px;
    transition: background 0.2s ease, color 0.2s ease;
}


.delivery__name {
    font-weight: 600;
    font-size: 20px;
}

.delivery__text {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-deep-gray);
}

.payment__text {
    font-weight: 600;
    font-size: 20px;
}
.cart-items-preview{
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-deep-gray);
    margin-top: 20px;
}
.cart-items-preview .product-slidering-block{
    margin-top: 40px;
}

/* Custom radio dot on the right */
.delivery__radio-custom {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gray);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease;
    display: none;/*for debug*/
}

.delivery__radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

/* Checked state */
.delivery__item .delivery__icon,.payment__item .payment__icon{
    opacity: 0.2;
    margin-bottom: 16px;
}

input:checked + .delivery__item .delivery__icon,
input:checked + .payment__item .payment__icon {
    opacity: 1;
}

input:checked + .delivery__item .delivery__radio-custom,
input:checked + .payment__item .delivery__radio-custom {
    border-color: var(--color-primary);
}

input:checked + .delivery__item .delivery__radio-custom::after,
input:checked + .payment__item .delivery__radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Keyboard focus accessibility */
.delivery__label input:focus-visible + .delivery__item,
.payment__label input:focus-visible + .payment__item {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.personal-name{
    font-family: Inter;
    font-weight: 600;
    font-size: 42px;
    letter-spacing: 3%;
}
.personal-hr{
    border-bottom: 1px solid var(--color-black);
}
.personal-links{
    font-family: Inter;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 3%;
    display: flex;
    flex-direction: column;
}
.personal-grid{
    gap: 100px;
    grid-template-columns: 340px 1fr;
}
.product-detail-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.slider-thumbs-track-wrap {
    width: 100px;
    height: 380px; /* 3 * 100px + 2 * 40px gap */
    overflow: hidden;
}

.slider-thumbs-track {
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: transform 0.4s ease;
    will-change: transform;
}

.slider-thumb {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 1px;
    background: var(--color-semi-gray);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition);
}

.slider-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1px; 
}

.slider-thumb:hover,
.slider-thumb.active {
    border-color: var(--color-primary);
}

.slider-thumbs-arrow {
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.slider-thumbs-arrow:hover {
    opacity: 1;
}

.slider-thumbs-arrow--down svg {
    transform: rotate(180deg);
}
.auth-page .auth-modal-body{
    margin: 20px auto;
    transform: translateX(0%);
}
.auth-page .auth-phone-input, .auth-page .auth-submit-btn,.auth-page .auth-modal-content .input-field{
    width: 100%;
}

.auth-page .login-email-href,.auth-page .auth-modal-consent{
    width: 100%;
    max-width: 100%;
}

.auth-page .auth-modal-consent{
    margin-top: 20px;
}

.user-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 50%;
    margin-top: 60px;
}
.user-pagination__more{
    width: 100%;
}
.btn-load-more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 260px;
    height: 50px;
    padding: 0 40px;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 1px;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: 100%;
}

.btn-load-more:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-load-more:disabled {
    opacity: 0.5;
    cursor: default;
}

.user-pagination__pages {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

.user-pagination__pages .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 1px;
    border: 1px solid var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-primary);
    text-decoration: none;
}

.user-pagination__pages .page-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.user-pagination__pages .page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.user-pagination__pages .page-link--next {
    border: none;
    width: auto;
    font-size: 20px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    height: 60px;
    width: 60px;
}

.user-pagination__pages .page-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.flex-container-pages{
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.btn-gray{
    background: var(--color-gray);
    color: var(--color-black);
    text-transform: unset;
}
.text-underline{
    text-decoration: underline;
}
.login-email-href{
    text-align: center;
    max-width: 400px;
}
.email-login,.phone-login{
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 2%;
    text-decoration: underline;
}
.auth-waiting-text{
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 6%;
    text-transform: uppercase;
}
.text-gray{
    color: var(--color-gray);
}
.text-deep-gray{
    color: var(--color-deep-gray);
}

.auth-link{
    text-align: left;
}

.rounded-person-image {
    display: flex;
    justify-content: center;  /* центрирование по горизонтали */
    align-items: center;      /* центрирование по вертикали */

    width: 100%;
    aspect-ratio: 1 / 1;  /* ширина : высота = 1:1 */
    border-radius: 50%;
    margin: auto 0px;
    background-color: var(--color-white);
}

.change-avatar-row{
    display: flex;
    justify-content: space-between;

    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-deep-gray);
}

.change-avatar-row .prev-avatar,.change-avatar-row .next-avatar{
    display: flex;
    margin: auto 0px;
    cursor: pointer;
}
.change-avatar-row .change-avatar-btn{
    cursor: pointer;
}

.order-info-row{
    display: flex;
    justify-content: space-between;
}

.order-meta-info{
    display: flex;
    gap: 20px;
}
.order-meta-info .order-id{
    padding: 10px 20px;
    background-color: var(--color-gray);
}
.order-meta-info>div{
    margin: auto 0;
}
.order-info-row .order-btn,.order-info-row .order-status{
    margin: auto 0;
}

.order-action-btn{
    text-align: center;
    padding: 10px 40px;
    border: none;
    color: var(--color-white);
    background-color: #ED6C71;
}
.order-status{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
}

.order-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.order-status.order-status-success {
    color: #21BA72; /*green*/
}

.order-status.order-status-success .order-status-dot {
    background-image: url('/assets/images/in-stock.svg');
    background-position: 100%;
}

.order-status.order-status-error {
    color: #ED6C71;
}

.order-status.order-status-error .order-status-dot {
    background-image: url('/assets/images/out-stock.svg');
    background-position: 100%;
}

.header-btn-cart{
    position: relative;
}

.cart-count-cont,.favorites-count-cont{
    position: absolute;
    top: -15px;
    right: 2px;
    display: flex;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 1px;
    background: var(--color-primary);
    color: var(--color-white);
}
.cart-count-cont span,.favorites-count-cont span{
    display: flex;
    margin: auto;
    text-align: center;
    font-size: 12px !important; 
}
.mobile-header-bottom .cart-count-cont, .mobile-header-bottom .favorites-count-cont{
    top: -5px;
    right: 2px;
}
.cart-products-cnt{ 
    padding-left: 20px;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 2%;
    text-transform: none;
} 
.cart-table{
    padding: 40px 18px;
}
.cart-table .cart-row{
    display: grid;
    gap: 15px;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) minmax(110px, 1fr) 2fr 40px; 
    border-bottom: 1px solid var(--color-deep-gray);
    padding-bottom: 40px;
    position: relative;
}
.cart-table .cart-row:last-child{
    border-bottom: 1px solid var(--color-gray);
}
.cart-table .product-card__counter-btn{ 
    padding: 0;
    background: transparent;
    height: auto;
}
.cart-table .product-card__counter-val{
    color: var(--color-black);
}
.cart-table .product-card__counter-action{
    color: var(--color-deep-gray);
    width: 21px;
}
#cart-items-body{
    display: grid;
    gap: 40px;
}
.cart-item-img{
    width: 100%;
    height: 200px;
}
.cart-item-img{
    width: 100%;
    height: 200px;
    margin: auto;
}
.cart-table .remove-item{
    font-size: 16px;
}
.cart-total-discount{
    margin-left: auto;
    gap: 12px;
}
.cart-total-discount .subtotal{
    color: var(--color-black);

    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0%;
    text-align: right;
}
.cart-total-discount .disc-and-old-price{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.disc-and-old-price .old-price{
    font-weight: 500;
    font-size: 14px;
    text-decoration: line-through;
    opacity: 0.2;
}

.disc-and-old-price .discount{
    padding: 3px 8px;

    font-weight: 400;
    font-size: 10px;
    background: #ED6C71;
    color: var(--color-white);
}

.cart-item-meta{
    display: grid;
    gap: 16px;
}

.right-block{
    position: relative;
}
.free-shipping-progress{
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
    height: 35px;
    background: var(--color-gray);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.free-shipping-progress__fill{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: #FFE8F0;
    transition: width 0.4s ease;
}
.free-shipping-progress__text{
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
}
.order__total-block{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order__total-block .total-row, .total{
    padding-left: 18px;
    padding-right: 26px;
}
.total-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-gray);
    padding-top: 40px;
}
.promo-block{
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.promo-input{
    flex: 1;
}
.promo-block .input-field, .promo-block .btn{
    width: auto;
    min-width: 0px;
}
.promo-block .btn{
    padding: 20px;
}
.total-row-title{
    font-size: 14px;
}
#cart-discount-row{
    padding-bottom: 40px;
}
.total__price{
    font-size: 16px;
    font-weight: 600;
}
.total-row .disc-and-old-price{
    display: flex;
    gap: 12px;
    color: #ED6C71;
}
#cart-discount-row .total-row-title{
    border-bottom: 1px solid var(--color-black);
}
.order__total-block .slide__btn{
    padding: 20px;
    text-align: center;
}
/**===Оформление заказа==**/
.recipient-row{
    display: flex;
    justify-content: space-between;
}
.recipient-row__text{
    font-weight: 500;
    font-size: 18px;
}
.recipient-row__edit{
    background: var(--color-gray);
    color: var(--color-black);
    font-size: 18px;
    cursor: pointer;
    padding: 20px 25px;
    width: 250px;
    letter-spacing: 2%;
}
.recipient-edit{
    margin-top: 16px;
}

.date-slider,
.time-slider{
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    margin-top: 40px;
    flex-wrap: wrap;
}
.date-item input,
.time-item input{
    display: none;
}
.date-item__body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--color-deep-gray);
    border-radius: 1px;
    padding: 15px 20px;
    min-width: 60px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: var(--color-deep-gray);
}
.date-item__num{
    font-weight: 600;
    font-size: 20px;
}
.date-item__month,
.date-item__weekday{
    font-size: 18px;
    
}
.date-item input:checked + .date-item__body{
    border: 2px solid var(--Red, #ED6C71);
    color: var(--color-black);
}

.time-item__body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--color-deep-gray);
    border-radius: 1px;
    padding: 15px 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: var(--color-deep-gray);
}
.time-item__time{
    font-weight: 600;
    font-size: 20px;
}
.time-item__price{
    font-size: 18px;
}
.time-item input:checked + .time-item__body{
    border: 2px solid var(--Red, #ED6C71);
    color: var(--color-black);
}

.delivery__price{
    margin-top: 6px;
    font-size: 18px;
}

.pay-btn__method{
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
    text-transform: none;
}

.right-block .order__total-block{
    display: flex;
    flex-direction: column;
}
.right-block .total-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.right-block .total{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
.time-item__price.is-free,
.delivery__price.is-free{
    text-decoration: line-through;
    opacity: 0.5;
}
.client-avatar-row{
    display: flex;
    gap: 17px;
}
.client-avatar-row>div{
    margin: auto 0;
}
.cart-checkout-page h2{
    text-transform: uppercase;
}
.cart-checkout-page .bordered-block{
    border: 1px solid #ED6C71;
    padding: 40px 20px;
}
.cart-checkout-page .product-card__image-wrap{
    height: auto;
}
.cart-checkout-page .product-card{
    min-width: 100px;
}
#address-row input{
    width: calc(100% - 250px);
}
/**===Оформление заказа END==**/
/* Прелоадер расчёта доставки */
.delivery-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.delivery-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.delivery-loading .delivery-loader {
    display: flex;
}

.delivery-loader__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-gray);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: delivery-spin 0.7s linear infinite;
}

@keyframes delivery-spin {
    to { transform: rotate(360deg); }
}


/* ===== Delivery modals (адрес / пункты выдачи) — изолированные стили ===== */
.delivery-modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.delivery-modal.active {
    opacity: 1;
    visibility: visible;
}

.delivery-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 43, 48, 0.6);
}

.delivery-modal-body {
    position: relative;
    z-index: 1001;
    display: grid;
    grid-template-columns: 22.03% 43.7% 34.27%;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 100vh;
    margin: 0px auto;
    top: 0%;
    transition: transform 0.4s ease;
    overflow: hidden;
    border-radius: 1px;
}

.delivery-modal-map {
    position: relative;
    padding: 0;
    background: var(--color-white);
}
.delivery-modal-map .leaflet-map{
    height: 100%;
    width: 100%;
}

.delivery-modal-panel {
    background: #FFFCFC;
    padding: 60px 40px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Крест закрытия */ 
.delivery-modal-close {
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-left: auto;
}

.delivery-modal-close::before,
.delivery-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--color-black);
}

.delivery-modal-close::before { transform: rotate(45deg); }
.delivery-modal-close::after { transform: rotate(-45deg); }

.delivery-modal-title {
    text-transform: uppercase;
}

/* Поля адреса внутри модалки */
.delivery-modal-panel .input-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.delivery-modal-panel .input-field-wrap .input-field{
    height: 22px;
    max-width: 100%;
}

.delivery-modal-panel .input-field-wrap label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-deep-gray);
}

.delivery-modal-panel .char-counter {
    margin-left: auto;
    color: var(--color-deep-gray);
    font-size: 10px;
}

.address-modal-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    z-index: 10;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.address-modal-suggestions.active { display: block; }

.address-modal-suggestion-item {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
}

.address-modal-suggestion-item:hover { background: var(--color-bg-secondary); }

.map-center-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 5;
    pointer-events: none;
}

/* ===== Список пунктов выдачи ===== */
.pickup-points-list {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    overflow-y: auto;
    gap: 60px;
}
.pickup-point-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    cursor: pointer;
}

.pickup-point-row:first-child {
    padding-top: 0;
}

.pickup-point-row input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    accent-color: var(--color-primary);
}

.pickup-point-row__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.pickup-point-row__line1 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pickup-point-row__service {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-deep-gray);
    font-weight: 600;
}

.pickup-point-row__address {
    font-weight: 500;
    font-size: 16px;
}

.pickup-point-row__line2 {
    font-size: 10px;
    color: var(--color-deep-gray);
}

.pickup-point-row__badge {
    display: block;
    font-size: 12px;
    color: var(--color-black);
}
.pickup-point-row__badge>span{
    padding: 4px 10px;
    background: var(--color-bg-secondary);
    border-radius: 1px;
}

.pickup-point-row__line4 {
    font-weight: 600;
    font-size: 10px;
}

/* активная точка на карте */
.pickup-map-label.active {
    border-left-color: var(--color-black);
}

.selected-pvz-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--color-gray);
}

.selected-pvz-card .btn-link {
    text-decoration: underline;
    cursor: pointer;
}

/* Убираем стандартные border-инпуты внутри delivery-модалок, оставляем только border-bottom */
.delivery-modal-panel .input-field,
.delivery-modal-panel .input-textarea {
    border: none;
    border-bottom: 1px solid var(--color-gray);
    border-radius: 0;
    padding: 0px;
    background: transparent;
    font-size: 14px;
}
.delivery-modal-panel .input-textarea{
    background: var(--color-white);
    padding: 8px;
}

.delivery-modal-panel .input-field:focus,
.delivery-modal-panel .input-textarea:focus {
    border-bottom-color: var(--color-primary);
}

/* Внутренний контейнер фиксированной ширины 290px внутри панели 658px */
.delivery-modal-panel-inner {
    width: 100%;
    max-width: 290px;
    display: flex;
    flex-direction: column;
}
.delivery-modal-panel-inner .buttons-row{
    display: flex;
    margin-bottom: 60px;
    position: relative;
    justify-content: space-between;
}

#pickup-search-input {
    border: none;
    background: transparent;
}

/* Маркер-выноска пункта выдачи (комментарий с хвостиком) */
.pickup-map-label {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--color-primary);
    border-radius: 1px;
    padding: 8px 10px;
    font-family: var(--font-primary);
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* хвостик-галочка снизу, направлен точно в координату */
.pickup-map-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--color-primary);
}

.pickup-map-label::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #FFFFFF;
    z-index: 1;
}

.pickup-map-label__service {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--color-deep-gray);
}

.pickup-map-label__price {
    font-weight: 600;
    color: var(--color-black);
}

.pickup-map-label__time {
    color: var(--color-deep-gray);
}

/* Кластер — круглый бейдж с числом точек */
.pickup-map-cluster {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #ED6C71;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 1px solid var(--color-white);
}
/* Пункт 1: поле поиска ПВЗ — как search, с рамкой и иконкой */
.pickup-search-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 286px;
    max-width: 100%;
    height: 45px;
    padding: 12px 20px;
    background: var(--color-bg-secondary);
    border-radius: 1px;
    box-sizing: border-box;
}

.pickup-search-wrap input {
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    width: 100%;
}

.pickup-search-wrap img {
    flex-shrink: 0;
    margin-left: 10px;
}

/* Пункт 4: зачёркнутая цена доставки при бесплатной доставке */
.delivery-price-old {
    text-decoration: line-through;
    opacity: 0.5;
    margin-right: 6px;
}

/* Пункт 5: недоступный вариант доставки (например, Почта России без индекса) */
.delivery__label input:disabled + .delivery__item {
    opacity: 0.4;
    pointer-events: none;
}
.pickup-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pickup-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-black);
    flex-shrink: 0;
}

.pickup-point-row__address--selected {
    color: var(--color-primary);
}

.pickup-point-row--selected {
    border-bottom: none;
    background: var(--color-bg-secondary);
    padding: 20px;
    margin: 0 -20px;
}

.pickup-point-row--selected .pickup-point-row__address {
    color: var(--color-primary);
} 

/* ===== Личные данные / Мои адреса — модалки ===== */
/* ===== Личные данные / Мои адреса — модалки (перекрывает базовый .modal-body) ===== */
.modal-body.personal-modal{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 800px;
    max-width: calc(100% - 40px);
    height: auto;
    max-height: 90vh;
    margin: 0 auto;
    padding: 100px 60px 60px;
    box-sizing: border-box;
}

.modal.active .modal-body.personal-modal{
    transform: translateY(-50%);
}

/* крестик закрытия — абсолютно в правом верхнем углу окна, не зависит от padding контента */
.personal-modal .close-personal-modal-btn{
    position: absolute;
    top: 40px;
    right: 40px;
    width: 18px;
    height: 18px;
    margin-left: 0;
}

.personal-modal-title{
    text-transform: uppercase;
}

.personal-modal-block{
    margin-top: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--color-deep-gray);
}

.personal-modal-block + .personal-modal-block{
    margin-top: 60px;
}

.personal-modal-block:last-of-type{
    border-bottom: none;
    padding-bottom: 0;
}

.personal-modal-label{
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-deep-gray);
}

.personal-modal-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.personal-modal-value{
    font-weight: 500;
    font-size: 18px;
}

.personal-modal-action{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #ED6C71;
    font-size: 16px;
}
.personal-modal-action--gray{
    color: var(--color-deep-gray);
}

.personal-modal-edit-row{
    margin-top: 20px;
    max-width: 400px;
}

/* ===== Мои адреса ===== */
.personal-modal-address-item{
    margin-top: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-gray);
}
.personal-modal-address-item:first-child{
    margin-top: 0;
}

.personal-modal-address-text{
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
}

.personal-modal-address-actions{
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

/* разделитель между списком адресов и кнопкой "Добавить адрес" */
.personal-modal-address-list{
    padding-bottom: 40px;
}

.js-add-address{
    width: 283px;
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
}
.personal-modal-block--danger{
    border-bottom: none;
    padding-bottom: 0;
}

.policy-block{
    font-size: 26px;
}
.text-bold{
    font-weight: 600;
}
.guarantees-first-block .blog-card__title{
    margin-top: 0;
}
.guarantees-first-block .blog-card__title{
    display: block;
}
.guarantees-first-block .blog-card__anot{
    height: auto;
    font-size: 18px;
    display: block;
}
.guarantees-text-block ul,.offer-agreement-block ul,.delivery-block ul{
    list-style: disc;
    padding-left: 20px;
}
.guarantees-first-block .blog-card__text{
    margin-top: 0;
}
.guarantees-text-block{
    font-size: 18px;
}
.guarantees-first-block .blog-card__body{
    margin: auto 0;
}
.offer-agreement-block,.delivery-block{
    font-size: 18px;
    overflow-wrap: break-word;
}
.offer-agreement-block ul li a{
    color: var(--color-primary);
}
.offer-agreement-first{
    padding: 60px 32px;
}
.offer-agreement-first h2{
    font-weight: 400;
}
.first-blog-image img{
    height: 100%;
}
.grid{
    display: grid;
}
.brand-item__image{
    overflow: hidden;
    height: 530px;
}
.brand-item__image:last-child{
    height: 464px;
}

/* Основной контейнер навигации */
.blog-navigation {
    box-sizing: border-box;
    border: 1px solid var(--color-deep-gray);
    border-radius: 2px;
    padding: 32px;
    padding-bottom: 64px;
    position: sticky;
    top: 150px;
    height: fit-content;
}

/* Заголовок "содержание" */
.navigation-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 34px;
}

/* Список навигации */
.navigation-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* Каждый пункт навигации */
.nav-item {
    width: 100%;
    padding-left: 32px;
    align-self: stretch;
    flex: none;
    order: 0;
    flex-grow: 0;
    border-left: 4px solid var(--color-deep-gray);
}

/* Ссылки в навигации */
.nav-link {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--color-deep-gray);
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Разделительные линии между пунктами */
.nav-item:not(:first-child) .nav-link{
     border-top: 1px solid var(--color-gray);
}
/* Активный пункт (где находимся) */
.nav-item.active{
    border-left-color: var(--color-primary);
}   
.nav-item.active .nav-link {
    color: var(--color-primary); /* ваш primary цвет */
}

/* Hover эффект */
.nav-link:hover {
    color: var(--color-primary);
}

.blog-detail-content{
    display: grid;
    grid-template-columns: 1fr 395px;
    gap: 32px;
}
.blog-post-metadata{
    display: grid;
    grid-template-columns: 200px 1fr;
}
.meta-rubric{
    display: flex;
    gap: 17px;
}
.meta-rubric .meta-rubric-title{
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2%;
    text-transform: uppercase;
    margin: auto 0px;
    padding: 10px;
}
.blog-post-metadata .meta-data{
    margin: auto 0;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 2%;
    text-transform: uppercase;

}
.blog-divider{
    padding-bottom: 50px;
    border-bottom: 1px solid var(--color-primary);
}

.share-btn .icon svg{
    padding: 1px;
}

.order-row{
    position: relative;
}
.order-row .order-products .right-arrows{
    top: 15px;
    position: absolute;
    right: 0px;
} 
.partners-banner-container{
    padding-top: 110px;
    overflow: hidden;
}
[data-auth-phone]{
    text-wrap: nowrap;
    word-wrap: nowrap;
}
@media (max-width: 1024px) {
    .delivery-modal-body {
        grid-template-columns: 1fr;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
    }
    .delivery-modal-empty { display: none; }
}


.yookassa-error {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 560px;
  margin: 16px auto;
  padding: 16px 18px;
  background: #fff8f0;
  border: 1px solid #ffd9a8;
  border-left: 4px solid #ff9b2f;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #4a3520;
  animation: yk-fade-in .25s ease-out;
  position: fixed;
  right: 10px;
  bottom: 10px; 
  z-index: 1;
}

.yookassa-error[hidden] { display: none; }

.yookassa-error__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.yookassa-error__title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: #2f2413;
}

.yookassa-error__text {
  font-size: 14px;
  line-height: 1.45;
}

.yookassa-error__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.yookassa-error__btn {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #e0c8a8;
  background: #fff;
  color: #4a3520;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.yookassa-error__btn:hover {
  background: #fdf1e1;
}

.yookassa-error__btn--primary {
  background: #ff9b2f;
  border-color: #ff9b2f;
  color: #fff;
  font-weight: 500;
}

.yookassa-error__btn--primary:hover {
  background: #f08c1f;
  border-color: #f08c1f;
}

@keyframes yk-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .yookassa-error {
    margin: 12px;
    padding: 14px;
    bottom: 100px;
  }
  .yookassa-error__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .yookassa-error__btn { width: 100%; }
}

/* ---------- Уведомления ---------- */
.notify {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    z-index: 99999;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.notify--visible {
    opacity: 1;
}

.notify--error {
    background: var(--color-primary); /* или var(--color-error), если есть */
}

@media (max-width: 480px) {
    .notify {
        top: 100px;
        bottom: auto;
        font-size: 13px;
        padding: 9px 14px;
        left: 16px;
        right: 16px;
        transform: none;
        max-width: none;
    }
}

/* Убираем стандартный маркер и делаем отступ под свой */
.blog-content ul {
    list-style: none;          /* отключаем родной маркер */
    padding-left: 24px;        /* место под маркер */
    margin: 0 0 16px 0;
}

.blog-content ul > li {
    position: relative;        /* чтобы ::before позиционировался относительно li */
    padding-left: 0;
    margin-bottom: 8px;        /* отступ между пунктами */
}

/* Сам маркер */
.blog-content ul > li::before {
    content: "";
    position: absolute;

    /* Размеры из вашего макета */
    width: 8px;
    height: 8px;

    /* Позиция: слева по вертикали по центру первой строки */
    left: -20px;               /* выносим маркер в padding контейнера */
    top: 0.5em;                /* примерно по центру строки */
    transform: translateY(-50%); /* точное центрирование */

    /* Внешний вид */
    background: var(--color-primary);
    opacity: 1;
    border-radius: 0;          /* квадрат; если нужны скругления — поставьте 2px */

    /* angle: 0deg — поворот не нужен, по умолчанию 0 */
}
a.active{
    color: var(--color-primary);
}