/* COOL Hero: витрина главной. Цвета берутся из COOL Skin (--cs-*), есть запасные значения. */
.cs-hero,.cs-cats {
    box-sizing: border-box;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    font-family: var(--cs-body,'Manrope',Arial,sans-serif);
    color: var(--cs-text,#16161C)
}

.cs-hero *,.cs-cats * {
    box-sizing: border-box;
}

.cs-hero a,.cs-cats a {
    text-decoration: none!important
}

/* ---------- главный блок ---------- */
.cs-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
    gap: 90px;
    align-items: stretch;
    margin: 32px 0px 56px;
    x
    }

.cs-hero__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    min-height: 480px;
    padding: 44px;
    background: var(--cs-surface,#fff);
    border: 0px solid var(--cs-line,#DCDCE3);
    border-radius: 32px;
}

.cs-hero__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cs-yellow-ink,#8F6E00)
}

html body .cs-hero__title {
    margin: 0!important;
    padding: 0!important;
    font-family: var(--cs-display,'Unbounded',Arial,sans-serif)!important;
    font-size: clamp(26px,3.1vw,42px)!important;
    font-weight: 700!important;
    line-height: 1.12!important;
    letter-spacing: -.01em;
    text-align: left!important;
    text-transform: none!important;
    color: var(--cs-text,#16161C)!important
}

html body .cs-hero__text {
    margin: 0!important;
    max-width: 480px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cs-muted,#5E5E6B)!important
}

.cs-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px
}

html body .cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease,border-color .15s ease
}

html body .cs-btn--primary {
    background: var(--cs-yellow,#F5C400);
    color: #111!important;
    border: 1px solid var(--cs-yellow,#F5C400)
}

html body .cs-btn--ghost {
    background: transparent;
    color: var(--cs-text,#16161C)!important;
    border: 1px solid var(--cs-line,#DCDCE3)
}

html body .cs-btn:hover {
    transform: translateY(-2px)
}

html body .cs-btn--ghost:hover {
    border-color: var(--cs-text,#16161C)
}

/* ---------- плитки: тонкая рамка, картинка в приоритете ---------- */
.cs-hero__tiles {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: 12px;
    min-height: 520px;
}

.cs-hero__tiles--1 {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr)
}

.cs-hero__tiles--2 {
    grid-template-rows: minmax(0,1fr)
}

.cs-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 19px;
    min-height: 0px;
    padding: 24px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--cs-surface2,#ECECF0);
    color: var(--cs-text,#16161C)!important;
    transition: transform .2s ease,box-shadow .2s ease
}

.cs-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--cs-shadow,0 10px 28px rgba(20,20,40,.10))
}

.cs-tile--has-img {
    padding: 0px;
}

.cs-tile--big {
    grid-row: span 2;
    background: var(--cs-yellow,#F5C400);
    color: #111!important;
}

.cs-hero__tiles--2 .cs-tile--big {
    grid-row: auto
}

.cs-tile__label {
    position: absolute;
    top: 392px;
    left: 22px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1
}

.cs-tile:not(.cs-tile--has-img) .cs-tile__label {
    top: 24px;
    left: 24px
}

/* картинка заполняет всё свободное место плитки */
.cs-tile__img {
    position: relative;
    flex: 1 1 0;
    min-height: 0px;
    overflow: hidden;
    border-radius: 0px;
    x
    }

.cs-tile__img img {
    position: absolute;
    top: -7px;
    left: 0px;
    width: 100%;
    /* height: 110%; */
    display: block;
    max-width: none
}

.cs-tile--cover .cs-tile__img img {
    object-fit: cover;
    object-position: center;
}

.cs-tile--contain .cs-tile__img img {
    object-fit: contain;
    object-position: center
}

/* подпись */
.cs-tile__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto
}

.cs-tile__body b {
    font-family: var(--cs-display,'Unbounded',Arial,sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2
}

.cs-tile__body small {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    opacity: 0.72;
}

.cs-tile--big .cs-tile__body {
    margin-top: 0;
    padding: 4px 14px 8px;
}

.cs-tile--big .cs-tile__body b {
    font-size: 24px
}

.cs-tile:not(.cs-tile--has-img).cs-tile--big .cs-tile__body {
    padding: 0
}

/* у малых плиток с картинкой подпись лежит на картинке, чтобы не отнимать место */
.cs-tile--small.cs-tile--has-img .cs-tile__body {
    position: absolute;
    left: -8px;
    bottom: 0px;
    z-index: 2;
    max-width: calc(100% - 44px);
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f5c400;
    color: var(--cs-text,#16161C);
    box-shadow: var(--cs-shadow,0 10px 28px rgba(20,20,40,.10))
}

.cs-tile--small.cs-tile--has-img .cs-tile__body b {
    font-size: 16px
}

/* ---------- популярные категории ---------- */
.cs-cats {
    margin: 0 0 56px
}

html body .cs-cats__title {
    display: flex!important;
    align-items: center;
    margin: 0 0 20px!important;
    padding: 0!important;
    font-family: var(--cs-display,'Unbounded',Arial,sans-serif)!important;
    font-size: 26px!important;
    font-weight: 700!important;
    line-height: 1.2!important;
    text-align: left!important;
    text-transform: none!important;
    color: var(--cs-text,#16161C)!important
}

.cs-cats__title::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 10px;
    height: 26px;
    margin-right: 14px;
    border-radius: 5px;
    background: var(--cs-yellow,#F5C400)
}

.cs-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
    gap: 16px
}

.cs-cat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 130px;
    padding: 22px;
    background: var(--cs-surface,#fff);
    border: 1px solid var(--cs-line,#DCDCE3);
    border-radius: 10px;
    color: var(--cs-text,#16161C)!important;
    transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease
}

.cs-cat:hover {
    transform: translateY(-3px);
    border-color: var(--cs-yellow,#F5C400);
    box-shadow: var(--cs-shadow,0 10px 28px rgba(20,20,40,.10))
}

.cs-cat__img {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: auto;
    object-fit: cover;
    border-radius: 14px
}

.cs-cat__title {
    font-family: var(--cs-display,'Unbounded',Arial,sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25
}

.cs-cat__sub {
    font-size: 14px;
    color: var(--cs-muted,#5E5E6B)
}

/* ---------- планшет и телефон ---------- */
@media (max-width: 991px) {
    .cs-hero {
        grid-template-columns:minmax(0,1fr)
    }

    .cs-hero__main {
        min-height: 0;
        padding: 32px
    }

    .cs-hero__tiles {
        min-height: 0;
        grid-template-rows: none;
        grid-auto-rows: 340px
    }

    .cs-tile--big {
        grid-row: span 2
    }
}

@media (max-width: 575px) {
    .cs-hero__main {
        padding:26px;
        border-radius: 24px
    }

    .cs-hero__tiles {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 3px;
        grid-auto-rows: 198px;
    }

    .cs-tile {
        border-radius: 22px
    }

    .cs-tile--big {
        grid-column: span 2;
        grid-row: auto;
        height: 380px
    }

    .cs-tile--small.cs-tile--has-img .cs-tile__body {
        left: 16px;
        bottom: 6px;
        max-width: calc(100% - 22px);
        padding: 8px 10px;
    }

    .cs-tile--small.cs-tile--has-img .cs-tile__body b {
        font-size: 14px
    }

    .cs-cats__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }

    .cs-cat {
        padding: 18px;
        min-height: 110px
    }
}

@media (prefers-reduced-motion:reduce) {
    .cs-tile,.cs-cat,.cs-btn {
        transition: none
    }
}

/* на телефоне большую жёлтую плитку не показываем */
@media (max-width: 767px) {
    .cs-tile--big {
        display:none!important
    }
}