/* ============================================================
   Цветомания — Hero Slider
   Тема: тёмно-красный фон #A11826
   ============================================================ */
.tsv-hero {
    --clr-brand:       #A11826;
    --clr-brand-light: #C42030;
    --clr-bg:          #A11826;
    --clr-text:        #FFFFFF;
    --clr-subtitle:    rgba(255,255,255,0.75);
    --clr-card-bg:     #FFFFFF;
    --clr-card-text:   #1A1A1A;
    --clr-old-price:   #AAAAAA;
    --clr-dot-idle:    rgba(255,255,255,0.35);
    --clr-dot-active:  #FFFFFF;

    --radius-card:  16px;
    --shadow-card:  0 6px 24px rgba(0,0,0,.18);
    --section-px:   48px;
    --section-py:   44px;
}

/* ── Секция ──────────────────────────────────────────────── */
.tsv-hero {
    position:      relative;
    background:    var(--clr-bg);
    border-radius: 24px;
    overflow:      hidden;
    margin-bottom: 32px;
}

/* ── Трек ────────────────────────────────────────────────── */
.tsv-hero__track { position:relative; width:100%; min-height:380px; }

.tsv-hero__slide {
    display:    none;
    position:   relative;
    padding:    var(--section-py) var(--section-px);
    min-height: 380px;
}
.tsv-hero__slide.is-active {
    display:        flex;
    flex-direction: column;
    animation:      tsvFadeIn .45s ease;
}
@keyframes tsvFadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Контент ─────────────────────────────────────────────── */
.tsv-hero__content {
    position:   relative;
    z-index:    2;
    max-width:  52%;
    flex-shrink: 0;
}

.tsv-hero__title {
    font-size:      clamp(28px, 4vw, 52px);
    font-weight:    800;
    line-height:    1.1;
    color:          #FFFFFF;
    margin:         0 0 14px;
    letter-spacing: -0.02em;
    text-shadow:    0 2px 12px rgba(0,0,0,.15);
}

.tsv-hero__subtitle {
    font-size:   clamp(13px, 1.4vw, 16px);
    color:       var(--clr-subtitle);
    margin:      0 0 28px;
    line-height: 1.55;
}

.tsv-hero__btn {
    display:         inline-block;
    background:      #FFFFFF;
    color:           var(--clr-brand);
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    padding:         12px 30px;
    border-radius:   100px;
    transition:      background .2s, transform .15s, box-shadow .2s;
    box-shadow:      0 4px 16px rgba(0,0,0,.15);
    position:        relative;
    z-index:         3;
}
.tsv-hero__btn:hover {
    background:  rgba(255,255,255,.9);
    transform:   translateY(-2px);
    box-shadow:  0 8px 24px rgba(0,0,0,.2);
    color:       var(--clr-brand);
}

/* ── Круг (десктоп) ──────────────────────────────────────── */
.tsv-hero__visual {
    position:        absolute;
    right: 0; top: 0; bottom: 0;
    width:           52%;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    pointer-events:  none;
    z-index:         5; /* поверх карточек */
}

.tsv-hero__circle {
    width:         clamp(280px, 44vw, 560px);
    height:        clamp(280px, 44vw, 560px);
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    transform:     translateX(20%);
    /* лёгкое свечение чтобы круг не сливался с фоном */
    box-shadow:    0 0 0 6px rgba(255,255,255,.08),
                   0 0 0 12px rgba(255,255,255,.04);
}

.tsv-hero__circle-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block; pointer-events: none;
}

/* ── Полоса товаров ──────────────────────────────────────── */
.tsv-hero__products-wrap {
    position:   relative;
    z-index:    4;
    margin-top: auto;
    padding-top: 28px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ограничиваем шириной левой колонки — до кружка */
    max-width:  76%;
}
.tsv-hero__products-wrap::-webkit-scrollbar { display:none; }

.tsv-hero__products { display:flex; gap:12px; width:max-content; }

/* ── Карточка ────────────────────────────────────────────── */
.tsv-product-card {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--clr-card-bg);
    border-radius: var(--radius-card);
    box-shadow:    var(--shadow-card);
    padding:       12px;
    width:         260px;
    flex-shrink:   0;
    cursor:        pointer;
    text-decoration: none;
    color:         var(--clr-card-text);
    transition:    box-shadow .2s, transform .2s;
    outline:       none;
}
.tsv-product-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,.22);
    transform:  translateY(-3px);
    color:      var(--clr-card-text);
}
.tsv-product-card:focus-visible { outline: 2px solid #fff; outline-offset:2px; }

.tsv-product-card__img-wrap {
    flex-shrink:   0;
    width:         80px;
    height:        80px;
    border-radius: 10px;
    overflow:      hidden;
}
.tsv-product-card__img {
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .3s; pointer-events:none;
}
.tsv-product-card:hover .tsv-product-card__img { transform:scale(1.06); }
.tsv-product-card__img--placeholder { background:#F0EBE8; width:100%; height:100%; }

.tsv-product-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }

.tsv-product-card__name {
    font-size:   13px;
    font-weight: 500;
    line-height: 1.35;
    color:       var(--clr-card-text);
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.tsv-product-card__footer {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.tsv-product-card__prices {
    display:     flex;
    align-items: baseline;
    gap:         4px;
    flex-wrap:   wrap;
}
.tsv-product-card__price-old {
    font-size:       11px;
    color:           var(--clr-old-price);
    text-decoration: line-through;
    white-space:     nowrap;
}
.tsv-product-card__price {
    font-size:   16px;
    font-weight: 700;
    color:       var(--clr-card-text);
    white-space: nowrap;
}

/* Кнопка корзины */
.tsv-product-card__cart {
    flex-shrink:  0;
    width:        36px;
    height:       36px;
    border-radius: 50%;
    border:       none;
    background:   #FFF0F2;
    color:        var(--clr-brand);
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    padding:      0;
    transition:   background .2s, color .2s, transform .15s;
    position:     relative;
    z-index:      2;
}
.tsv-product-card__cart:hover {
    background: var(--clr-brand);
    color:      #fff;
    transform:  scale(1.12);
}
.tsv-product-card__cart:active { transform:scale(.95); }

/* ── Точки ───────────────────────────────────────────────── */
.tsv-hero__dots {
    position:    relative;
    z-index:     10;
    display:     flex;
    gap:         8px;
    align-items: center;
    padding:     16px 0 0;
}
.tsv-hero__dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    border:       none;
    background:   var(--clr-dot-idle);
    cursor:       pointer;
    padding:      0;
    transition:   background .25s, width .25s, border-radius .25s;
}
.tsv-hero__dot.is-active {
    background:    var(--clr-dot-active);
    width:         24px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   АДАПТИВ 900px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .tsv-hero { --section-px:24px; --section-py:28px; }
    .tsv-hero__content { max-width:60%; }
    .tsv-hero__circle  { transform:translateX(25%); }
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ ≤ 640px — макет как на десктопе: текст слева, круг справа
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .tsv-hero {
        --section-px: 16px;
        --section-py: 20px;
        border-radius: 16px;
    }

    .tsv-hero__slide {
        min-height: 0;
        padding-bottom: 0;
    }

    /* ── Текст: левая половина ──────────────────────────────── */
    .tsv-hero__content {
        max-width:    55%;
        padding-right: 8px;
        z-index:      2;
    }

    .tsv-hero__title {
        font-size:   35px;
        margin-bottom: 10px;
    }
    .tsv-hero__subtitle {
        font-size:    15px;
        margin-bottom: 16px;
        line-height:   1.45;
        /* показываем на мобиле */
        display:      block;
    }
    .tsv-hero__btn {
        display:   inline-block;
        font-size: 12px;
        padding:   9px 18px;
    }

    /* ── Круг: правая половина, absolute как на десктопе ────── */
    .tsv-hero__visual {
        position:        absolute;
        right:           0;
        top:             0;
        bottom:          0;
        width:           50%;
        height:          auto;
        display:         flex;
        align-items:     center;
        justify-content: flex-end;
        pointer-events:  none;
        z-index:         1;
    }

    .tsv-hero__circle {
        /* Круг немного выступает за правый край — как на десктопе */
        width:         clamp(160px, 54vw, 240px);
        height:        clamp(160px, 54vw, 240px);
        border-radius: 50%;
        transform:     translateX(15%) translateY(-12%);
        box-shadow:    0 0 0 5px rgba(255,255,255,.1);
        flex-shrink:   0;
    }

    .tsv-hero__circle-img {
        width:           100%;
        height:          100%;
        object-fit:      cover;
        object-position: center 20%;
    }

    /* ── Карточки: снизу, горизонтальный скролл ─────────────── */
    .tsv-hero__products-wrap { max-width: 100%; }
    .tsv-hero__products-wrap {
        margin-top:          auto;
        padding-top:         14px;
        scroll-snap-type:    x mandatory;
        scroll-padding-left: var(--section-px);
        touch-action:        pan-x;
        /* карточки поверх круга */
        position:            relative;
        z-index:             4;
    }
    .tsv-hero__products {
        gap:           10px;
        padding-right: var(--section-px);
    }

    .tsv-product-card {
        width:             calc(65vw - var(--section-px));
        min-width:         180px;
        max-width:         260px;
        scroll-snap-align: start;
        gap:               10px;
        padding:           10px;
    }
    .tsv-product-card__img-wrap { width:72px; height:72px; }
    .tsv-product-card__name     { font-size:12px; }
    .tsv-product-card__price    { font-size:15px; }
    .tsv-product-card__cart     { width:30px; height:30px; }

    /* ── Точки ───────────────────────────────────────────────── */
    .tsv-hero__dots {
        padding: 10px 0 6px;
        position: relative;
        z-index:  5;
    }
}