/* ==========================================================================
   04-home.css  --  hero carousel, promo tile banks, home sections

   Homepage section order reproduced from the reference capture:
     hero carousel -> promo banner row -> category tiles -> product carousels
   ========================================================================== */

/* ---- hero carousel ------------------------------------------------------ */
.scs-hero { position: relative; background: var(--scs-surface-3); overflow: hidden; }
.scs-hero__track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.scs-hero__track::-webkit-scrollbar { display: none; }

.scs-hero__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 260px;
    display: grid;
    place-items: center;
}
@media (min-width: 900px) { .scs-hero__slide { min-height: 420px; } }

.scs-hero__media { position: absolute; inset: 0; }
.scs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.scs-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,17,29,.66) 0%, rgba(12,17,29,.18) 60%, transparent 100%); }

.scs-hero__content {
    position: relative;
    width: 100%;
    max-width: var(--scs-container);
    margin-inline: auto;
    padding: var(--scs-8) var(--scs-container-pad);
    color: #fff;
}
.scs-hero__inner { max-width: 30rem; }
.scs-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--scs-2);
    font-size: var(--scs-fs-xs);
    font-weight: var(--scs-fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
}
.scs-hero__title { color: #fff; font-size: var(--scs-fs-2xl); margin-bottom: var(--scs-3); letter-spacing: -.02em; }
.scs-hero__text { font-size: var(--scs-fs-md); margin-bottom: var(--scs-5); opacity: .92; }

.scs-hero__dots {
    position: absolute;
    left: 0; right: 0; bottom: var(--scs-4);
    display: flex; justify-content: center; gap: var(--scs-2);
}
.scs-hero__dot {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: background var(--scs-t), transform var(--scs-t);
}
.scs-hero__dot.is-active { background: #fff; transform: scale(1.25); }

.scs-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: none; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--scs-ink);
    cursor: pointer;
    box-shadow: var(--scs-shadow);
}
.scs-hero__arrow--prev { left: var(--scs-4); }
.scs-hero__arrow--next { right: var(--scs-4); }
@media (min-width: 900px) { .scs-hero__arrow { display: grid; } }

/* ---- promo banner row --------------------------------------------------- */
.scs-promos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--scs-4);
}
@media (min-width: 600px) { .scs-promos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .scs-promos { grid-template-columns: repeat(3, 1fr); } }

.scs-promo {
    position: relative;
    display: block;
    border-radius: var(--scs-radius-lg);
    overflow: hidden;
    background: var(--scs-surface-3);
    min-height: 160px;
    isolation: isolate;
}
.scs-promo img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; inset: 0; z-index: -1;
    transition: transform 400ms ease;
}
.scs-promo:hover img { transform: scale(1.04); }
.scs-promo__body {
    position: relative;
    padding: var(--scs-6);
    min-height: 160px;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(90deg, rgba(12,17,29,.62), rgba(12,17,29,.12));
    color: #fff;
}
.scs-promo__kicker { font-size: var(--scs-fs-xs); text-transform: uppercase; letter-spacing: .1em; opacity: .9; margin-bottom: var(--scs-1); }
.scs-promo__title { color: #fff; font-size: var(--scs-fs-lg); margin: 0 0 var(--scs-2); }
.scs-promo__cta { font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-bold); text-decoration: underline; text-underline-offset: 3px; }

/* ---- category tile bank ------------------------------------------------- */
.scs-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--scs-4);
}
@media (min-width: 600px) { .scs-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .scs-cats { grid-template-columns: repeat(6, 1fr); } }

.scs-cat {
    display: flex; flex-direction: column; align-items: center; gap: var(--scs-3);
    padding: var(--scs-4) var(--scs-2);
    border: 1px solid var(--scs-line);
    border-radius: var(--scs-radius);
    background: var(--scs-surface);
    text-align: center;
    transition: border-color var(--scs-t), box-shadow var(--scs-t), transform var(--scs-t-fast);
}
.scs-cat:hover { border-color: var(--scs-accent); box-shadow: var(--scs-shadow); transform: translateY(-2px); color: var(--scs-ink); }
.scs-cat__media {
    width: 84px; height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--scs-surface-3);
}
.scs-cat__media img { width: 100%; height: 100%; object-fit: cover; }
.scs-cat__name { font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-medium); }

/* ---- product carousel --------------------------------------------------- */
.scs-carousel { position: relative; }
.scs-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--scs-gutter)) / 2);
    gap: var(--scs-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--scs-2);
    scrollbar-width: none;
}
.scs-carousel__track::-webkit-scrollbar { display: none; }
.scs-carousel__track > * { scroll-snap-align: start; }

@media (min-width: 600px) { .scs-carousel__track { grid-auto-columns: calc((100% - 2 * var(--scs-gutter)) / 3); } }
@media (min-width: 900px) { .scs-carousel__track { grid-auto-columns: calc((100% - 3 * var(--scs-gutter)) / 4); } }
@media (min-width: 1280px){ .scs-carousel__track { grid-auto-columns: calc((100% - 4 * var(--scs-gutter)) / 5); } }

.scs-carousel__arrow {
    position: absolute; top: 38%;
    width: 38px; height: 38px;
    display: none; place-items: center;
    border: 1px solid var(--scs-line);
    border-radius: 50%;
    background: var(--scs-surface);
    box-shadow: var(--scs-shadow);
    cursor: pointer;
    z-index: 2;
}
.scs-carousel__arrow--prev { left: calc(var(--scs-6) * -1); }
.scs-carousel__arrow--next { right: calc(var(--scs-6) * -1); }
.scs-carousel__arrow[disabled] { opacity: .35; cursor: default; }
@media (min-width: 1024px) { .scs-carousel__arrow { display: grid; } }

/* ---- trust / value-prop strip ------------------------------------------ */
.scs-usps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--scs-4);
    padding: var(--scs-6) 0;
    border-block: 1px solid var(--scs-line);
}
@media (min-width: 900px) { .scs-usps { grid-template-columns: repeat(4, 1fr); } }
.scs-usp { display: flex; align-items: center; gap: var(--scs-3); }
.scs-usp__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--scs-accent); }
.scs-usp__title { font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-bold); }
.scs-usp__text { font-size: var(--scs-fs-xs); color: var(--scs-ink-3); }