@charset "UTF-8";
/* ==========================================================================
   YeShe — Homepage
   1 Hero · 2 Product showcase · 3 Video row · 4 Statement · 5 Video hero ·
   6 Latest collections · 7 Why buy from us

   NOTE ON THE CAROUSEL
   --------------------
   The track below is a FLEX scroller with `flex: 0 0 <width>`. Never use
   `display: grid` + `grid-auto-columns: <percentage>` for it: the grid's
   track-sizing step distributes free space equally between the tracks, so the
   columns simply shrink to fit the container — `scrollWidth` ends up equal to
   `clientWidth`, nothing ever overflows and every arrow stays disabled.
   ========================================================================== */

/* ---------- Section heading ---------- */
.ys-sechead--center { text-align: center; justify-content: center; }
.ys-sechead__title {
    font-family: var(--ys-font-display);
    font-size: clamp(22px, 2.6vw, 38px);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ys-ink);
    line-height: 1.15;
    margin: 0;
}
.ys-sechead__sub {
    margin: 14px auto 0;
    max-width: 54ch;
    font-size: clamp(14px, 1.08vw, 16.5px);
    line-height: 1.6;
    color: var(--ys-body);
}

/* ==========================================================================
   1. HERO — copy sits in the upper third, fully fluid
   ========================================================================== */
.ys-hero {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    isolation: isolate;
    background: #eeece7;
    min-height: clamp(320px, 42vw, 620px);
}
.ys-hero__bg {
    position: absolute;
    inset: -4% 0;
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    will-change: transform;
}
/* The photo's own top edge is near-white, so an opaque white veil over the
   upper band reads as part of the image — and keeps the copy legible. */
.ys-hero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .99) 0%,
        rgba(255, 255, 255, .97) 30%,
        rgba(255, 255, 255, .88) 46%,
        rgba(255, 255, 255, .55) 60%,
        rgba(255, 255, 255, .18) 74%,
        rgba(255, 255, 255, 0) 88%);
}
.ys-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ys-max);
    margin: 0 auto;
    padding: clamp(28px, 4.4vw, 68px) var(--ys-gutter) clamp(38px, 6vw, 96px);
    text-align: center;
    color: #17171c;
}
.ys-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(10px, 1.2vw, 16px);
    font-size: clamp(10px, .78vw, 11.5px);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #6b6975;
}
.ys-hero__eyebrow::before,
.ys-hero__eyebrow::after {
    content: "";
    width: clamp(16px, 3vw, 44px);
    height: 1px;
    background: currentColor;
    opacity: .42;
}
.ys-hero__heading {
    margin: 0 0 clamp(10px, 1.4vw, 18px);
    font-family: var(--ys-font-display);
    font-size: clamp(28px, 4.6vw, 58px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #141419;
}
.ys-hero__lead {
    max-width: 58ch;
    margin: 0 auto clamp(20px, 2.2vw, 30px);
    font-size: clamp(14px, 1.12vw, 17px);
    line-height: 1.62;
    color: rgba(18, 18, 24, .70);
}
.ys-hero__actions {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
}
.ys-hero .ys-btn--light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 32px;
    /* Translucent rather than fully transparent: keeps the pill readable even
       where the photo behind it is busy. */
    background: rgba(255, 255, 255, .92);
    color: #17171c;
    border: 1.5px solid rgba(18, 18, 24, .50);
    border-radius: 999px;
    font-family: var(--ys-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s var(--ys-ease), color .3s var(--ys-ease),
                border-color .3s var(--ys-ease), transform .3s var(--ys-ease);
}
.ys-hero .ys-btn--light:hover {
    background: #141419;
    border-color: #141419;
    color: #fff;
    transform: translateY(-1px);
}

/* On a phone the copy block is a far larger share of the hero, and the photo
   can no longer be cropped vertically — so extend the veil further down. */
@media (max-width: 640px) {
    .ys-hero { min-height: 380px; }
    .ys-hero__bg { background-position: center 26%; }
    .ys-hero__scrim {
        background: linear-gradient(180deg,
            #ffffff 0%,
            #ffffff 40%,
            rgba(255, 255, 255, .96) 56%,
            rgba(255, 255, 255, .68) 72%,
            rgba(255, 255, 255, .26) 86%,
            rgba(255, 255, 255, 0) 100%);
    }
    .ys-hero__inner { padding: 20px 20px 30px; }
    .ys-hero__eyebrow { letter-spacing: .18em; gap: 8px; }
    .ys-hero__eyebrow::before,
    .ys-hero__eyebrow::after { width: 14px; }
    .ys-hero__heading { letter-spacing: -.01em; }
    .ys-hero__lead { margin-bottom: 18px; }
    .ys-hero .ys-btn--light { min-height: 44px; padding: 0 26px; }
}

/* ==========================================================================
   2. PRODUCT SHOWCASE
   ========================================================================== */
.ys-showcase {
    /* Card palette — change these two lines to re-skin the whole section */
    --ys-card-accent: #5b4be0;
    --ys-card-accent-dark: #4a3ad4;
    --ys-card-accent-soft: #efecfe;
    padding: clamp(44px, 5.5vw, 78px) 0 clamp(14px, 1.8vw, 26px);
    background: #fff;
}
.ys-showcase .ys-sechead { margin-bottom: clamp(22px, 3vw, 42px); }

.ys-showcase .ys-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eceaf3;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .38s var(--ys-ease), box-shadow .38s var(--ys-ease),
                border-color .38s var(--ys-ease);
}
.ys-showcase .ys-card:hover {
    transform: translateY(-6px);
    border-color: #dcd9ec;
    box-shadow: 0 20px 44px -20px rgba(26, 18, 78, .34);
}

.ys-showcase .ys-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(155deg, #fbfaff 0%, #f5f3fc 58%, #eeecf8 100%);
}
.ys-showcase .ys-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ys-ease);
}
/* Illustration / placeholder art keeps its whole silhouette */
.ys-showcase .ys-card__media--art img { object-fit: contain; padding: 5%; }
.ys-showcase .ys-card:hover .ys-card__media img { transform: scale(1.06); }

.ys-showcase .ys-card__tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.ys-showcase .ys-card__tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    background: #141419;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ys-showcase .ys-card__tag--sale { background: var(--ys-sale); }
.ys-showcase .ys-card__tag--new { background: var(--ys-card-accent); }

.ys-showcase .ys-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: 18px 18px 18px;
}
/* The product name is the primary label of the card — it gets the biggest
   type and the darkest ink so it reads first, before the price. */
.ys-showcase .ys-card__name {
    display: block;
    font-family: var(--ys-font-display);
    font-size: clamp(19px, 1.55vw, 24px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--ys-ink);
    text-decoration: none;
    transition: color .25s var(--ys-ease);
}
.ys-showcase .ys-card__name:hover { color: var(--ys-card-accent); }

.ys-showcase .ys-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
/* Neutral ink rather than the accent: a coloured price competes with the
   product name and reads "discount store". The sale chip carries the colour. */
.ys-showcase .ys-price__now {
    font-family: var(--ys-font-display);
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 700;
    letter-spacing: -.008em;
    color: #3a3a42;                 /* softer than the name — secondary tier */
}
.ys-showcase .ys-price__was {
    font-size: 13px;
    color: #a5a3af;
    text-decoration: line-through;
    text-decoration-thickness: 1px;   /* hairline strike reads quieter than the default */
}
.ys-showcase .ys-price__save {
    align-self: center;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ys-sale);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ys-showcase .ys-card__actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}
.ys-showcase .ys-card__actions a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--ys-font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s var(--ys-ease), color .25s var(--ys-ease),
                border-color .25s var(--ys-ease), transform .25s var(--ys-ease);
}
/* Learn — secondary: hairline outline, quiet until hovered. */
.ys-showcase .ys-card__actions a:first-child {
    background: transparent;
    border: 1.5px solid #e3e3e9;
    color: var(--ys-ink);
}
.ys-showcase .ys-card__actions a:first-child:hover {
    background: #f6f6f8;
    border-color: var(--ys-ink);
    color: var(--ys-ink);
    transform: translateY(-1px);
}
/* Buy — the primary action, in ink rather than a saturated hue. */
.ys-showcase .ys-card__actions a:last-child {
    background: var(--ys-ink);
    border: 1.5px solid var(--ys-ink);
    color: #fff;
}
.ys-showcase .ys-card__actions a:last-child:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(10, 10, 10, .5);
    transform: translateY(-1px);
}

/* ==========================================================================
   CAROUSEL — shared by the showcase and the collections row
   ========================================================================== */
.ys-carousel { position: relative; }
.ys-carousel__viewport { overflow: visible; }

.ys-carousel__track {
    --ys-gap: 26px;
    --ys-slide-w: calc((100% - 2 * var(--ys-gap)) / 3);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--ys-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.ys-carousel__track::-webkit-scrollbar { display: none; }
.ys-carousel__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}
/* Stop Chrome/Safari opening a native image drag, which would cancel the
   pointer gesture and freeze the carousel mid-swipe. */
.ys-carousel__track img,
.ys-carousel__track a { -webkit-user-drag: none; user-drag: none; }
.ys-carousel__track:focus-visible { outline: 2px solid var(--ys-ink); outline-offset: 4px; }

.ys-carousel__slide {
    flex: 0 0 var(--ys-slide-w);
    min-width: 0;
    list-style: none;
    padding: 8px 0 26px;            /* room for the hover lift + shadow */
    scroll-snap-align: start;
}
.ys-carousel__slide > * { height: 100%; }

/* ---- showcase: 3 full cards + a peek of the next one ---- */
.ys-carousel--showcase .ys-carousel__track {
    --ys-gap: 26px;
    --ys-slide-w: calc((100% - 3 * var(--ys-gap)) / 3.35);
}
/* 3 items or fewer: lay them out evenly instead of leaving a gap */
.ys-carousel--fit .ys-carousel__track {
    --ys-slide-w: calc((100% - 2 * var(--ys-gap)) / 3);
}
/* Centering an *overflowing* flex scroller pushes the leading edge out of the
   scrollable area, so it can never be reached. JS only adds this when the
   track genuinely fits. */
.ys-carousel__track.is-static { justify-content: center; }

/* ---- controls: ‹ ──── ● ──── › ---- */
.ys-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 26px);
    margin-top: clamp(6px, 1vw, 14px);
}
.ys-carousel__controls[hidden] { display: none; }

.ys-carousel__progress {
    position: relative;
    flex: 0 1 220px;
    width: 220px;
    max-width: 46vw;
    height: 3px;
    border-radius: 999px;
    background: #e8e6f1;
    overflow: hidden;
}
.ys-carousel__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    border-radius: 999px;
    background: var(--ys-card-accent, var(--ys-ink));
    transition: left .3s var(--ys-ease), width .3s var(--ys-ease);
}

.ys-carousel__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #ddd9ec;
    border-radius: 50%;
    background: #fff;
    color: var(--ys-ink);
    cursor: pointer;
    transition: background .25s var(--ys-ease), color .25s var(--ys-ease),
                border-color .25s var(--ys-ease), transform .25s var(--ys-ease);
}
.ys-carousel__arrow:hover {
    background: var(--ys-card-accent, #141419);
    border-color: var(--ys-card-accent, #141419);
    color: #fff;
    transform: translateY(-1px);
}
.ys-carousel__arrow.is-disabled { opacity: .32; pointer-events: none; }

@media (max-width: 1280px) {
    .ys-carousel--showcase .ys-carousel__track { --ys-slide-w: calc((100% - 2 * var(--ys-gap)) / 2.45); }
}
@media (max-width: 1024px) {
    .ys-carousel__track { --ys-gap: 22px; }
    .ys-carousel--showcase .ys-carousel__track { --ys-slide-w: calc((100% - 2 * var(--ys-gap)) / 2.15); }
}
@media (max-width: 900px) {
    .ys-carousel__track { --ys-slide-w: calc((100% - var(--ys-gap)) / 2); }
    .ys-carousel--showcase .ys-carousel__track { --ys-slide-w: calc((100% - var(--ys-gap)) / 1.85); }
    .ys-carousel--fit .ys-carousel__track { --ys-slide-w: calc((100% - var(--ys-gap)) / 2); }
}
@media (max-width: 640px) {
    .ys-carousel__track { --ys-gap: 18px; }
    .ys-carousel--showcase .ys-carousel__track { --ys-slide-w: calc((100% - var(--ys-gap)) / 1.28); }
    .ys-carousel__slide { padding: 6px 0 20px; }
    .ys-carousel__arrow { width: 42px; height: 42px; }
    .ys-carousel__controls { gap: 14px; }
}
@media (max-width: 420px) {
    .ys-carousel--showcase .ys-carousel__track { --ys-slide-w: calc((100% - var(--ys-gap)) / 1.12); }
    .ys-carousel__arrow { width: 40px; height: 40px; }
}

/* ==========================================================================
   3. Single full-width video (black)
   ========================================================================== */
.ys-videorow { background: #000; padding: 0; }
.ys-videorow__item { overflow: hidden; }
.ys-videorow__item video {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    background: #141416;
}
@media (max-width: 820px) { .ys-videorow__item video { aspect-ratio: 16 / 9; } }

/* ==========================================================================
   4. Brand statement (#2e2c2d strip, centered)
   ========================================================================== */
.ys-statement {
    background: #2e2c2d;
    padding: clamp(44px, 5vw, 72px) 20px;
    text-align: center;
}
.ys-statement p {
    font-family: var(--ys-font-display);
    font-size: clamp(16px, 2.2vw, 26px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
    color: #fff;
    max-width: 720px;
    margin: 0 auto;
}

/* ==========================================================================
   5. Full-width video hero (white)
   ========================================================================== */
.ys-videohero { background: #fff; padding: 0; }
.ys-videohero video {
    display: block;
    width: 100%;
    height: clamp(320px, 52vw, 780px);
    object-fit: cover;
    background: #101012;
}

/* ==========================================================================
   6. Latest collections
   ========================================================================== */
.ys-collections { padding: clamp(44px, 5.5vw, 78px) 0 clamp(14px, 1.8vw, 26px); }
.ys-collections .ys-sechead { margin-bottom: clamp(22px, 3vw, 42px); }

.ys-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--ys-surface);
    transition: transform .35s var(--ys-ease), box-shadow .35s var(--ys-ease);
}
.ys-tile:hover { transform: translateY(-4px); box-shadow: var(--ys-shadow-md); }
.ys-tile__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ys-surface-alt);
}
.ys-tile__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ys-ease);
}
.ys-tile:hover .ys-tile__media img { transform: scale(1.05); }
.ys-tile__body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 22px 26px;
    flex: 1;
}
.ys-tile__title {
    font-family: var(--ys-font-display);
    font-size: 19px; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ys-ink);
}
.ys-tile__copy { font-size: 14px; color: var(--ys-body); line-height: 1.6; }
.ys-tile__meta { font-size: 12px; color: var(--ys-faint); letter-spacing: .04em; text-transform: uppercase; }
.ys-tile .ys-link { margin-top: 6px; align-self: flex-start; }

/* ==========================================================================
   7. Why buy from us (#f1f1f2)
   ========================================================================== */
.ys-benefits {
    background: #f1f1f2;
    padding: clamp(46px, 5.5vw, 74px) 0 clamp(52px, 6vw, 78px);
    margin-top: 34px;
}
.ys-benefits .ys-sechead { margin-bottom: clamp(30px, 4vw, 46px); }
.ys-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    max-width: 1220px;
    margin: 0 auto;
}
.ys-benefit { text-align: center; padding: 8px 12px; list-style: none; }
.ys-benefit__icon {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    object-fit: contain;
}
.ys-benefit__title {
    font-family: var(--ys-font-display);
    font-size: 17px; font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}
.ys-benefit__copy { font-size: 14px; color: var(--ys-body); line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
    .ys-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 620px) {
    .ys-benefits__grid { grid-template-columns: 1fr; }
    .ys-benefits { padding: 46px 0 54px; }
}