/* Homepage — only enqueued on front-page.php */

.site-main--home { padding: 0; }

/* Common section head */
.home-section-head { padding-block: var(--s-7) var(--s-4); }
.home-section-head--centered { text-align: center; padding-block: var(--s-8) var(--s-4); }
.home-section-head__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: var(--s-2);
    font-weight: var(--fw-semibold);
}
.home-section-head__eyebrow--on-dark { color: #bbb; }
.home-section-head__title {
    font-size: var(--fs-4xl);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.home-section-head--on-dark .home-section-head__title,
.home-section-head--on-dark .home-section-head__eyebrow { color: var(--c-bg); }
.home-section-head__lead {
    margin: var(--s-3) auto 0;
    max-width: 62ch;
    color: var(--c-muted);
}

/* ============================================================
   HERO — scroll-hijacked split banner.
   Desktop UX:
     1. Video covers the viewport (central 100%, sides collapsed).
     2. First wheel/touch scroll-down at the top of the page: page scroll
        is frozen (body gets .is-scroll-locked), JS sets --split: 1, CSS
        transitions the split geometry to completion (~0.85s).
     3. Scroll unlocks; subsequent scrolling moves the page normally.
     4. Scroll-up from the top while split → reverse animation.
   Mobile / reduced-motion: stacked, fully visible, no animation.
   ============================================================ */

.home-hero-stage { position: relative; }

.home-hero {
    position: relative;
    background: #000;
    color: var(--c-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-hero__central,
.home-hero__side {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-bg);
}

/* Mobile layout - stacked (<900px) */
.home-hero__central {
    order: 1;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    background: #000;
}
.home-hero__side {
    width: 100%;
    height: 70vh;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    opacity: 1;
}
.home-hero__side--left  { order: 2; }
.home-hero__side--right { order: 3; }

.home-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

.home-hero__side-overlay,
.home-hero__central-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%);
    transition: background var(--t-base) var(--ease-out);
    z-index: 1;
}
.home-hero__central-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
}
.home-hero__side:hover .home-hero__side-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%);
}

.home-hero__side-inner,
.home-hero__central-inner {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    padding: var(--s-6) var(--s-5);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-3);
}
.home-hero__central-inner {
    justify-content: flex-end; /* caption + "see more" sit at the bottom, like the side banners */
    align-items: center;
    text-align: center;
    padding: var(--s-7);
}

.home-hero__side-label {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.05;
}
.home-hero__side-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
}

.home-hero__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 0.95;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
    text-wrap: balance;
}
.home-hero__central-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-md);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--c-bg);
    border: 1px solid var(--c-bg);
    padding: 14px 28px;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.home-hero__central-cta:hover {
    background: var(--c-bg);
    color: var(--c-fg);
    opacity: 1;
}

/* ---------------- Desktop: 100vh row layout + scroll-hijack split ---------------- */
@media (min-width: 900px) {
    .home-hero {
        flex-direction: row;
        align-items: stretch;
        height: 100vh;
    }

    /* Easings (matched across central/sides for visual coherence). */
    .home-hero { --hero-ease: cubic-bezier(.76, 0, .24, 1); --hero-ease-out: cubic-bezier(.22, .61, .36, 1); }

    /* Central: starts 100% (--split:0), shrinks to 33.333% (--split:1). */
    .home-hero__central {
        order: 2;
        height: 100%;
        min-height: 0;
        width: calc(100% - var(--split, 0) * 66.666%);
        transition: width 1.3s var(--hero-ease);
    }

    /*
       Side banners: three layered animations
         - width grows in sync with the central shrink (ease-in-out, 1.3s)
         - clip-path reveal starts at +0.25s (eases the panel open top-to-bottom)
         - opacity fades in at +0.3s (content arrives just as the mask opens)
       Right banner staggers ~0.1s after left for a subtle wave.
     */
    .home-hero__side {
        height: 100%;
        min-height: 0;
        width: calc(var(--split, 0) * 33.333%);
        opacity: var(--split, 0);
        clip-path: inset(calc((1 - var(--split, 0)) * 100%) 0 0 0);
        transition:
            width       1.3s var(--hero-ease),
            opacity     0.8s var(--hero-ease-out) 0.3s,
            clip-path   1.1s var(--hero-ease)     0.25s;
    }
    .home-hero__side--left  { order: 1; }
    .home-hero__side--right {
        order: 3;
        transition:
            width       1.3s var(--hero-ease)     0.1s,
            opacity     0.8s var(--hero-ease-out) 0.4s,
            clip-path   1.1s var(--hero-ease)     0.35s;
    }

    /* Side-banner copy fades in last, once the mask has started opening */
    .home-hero__side-inner {
        opacity: calc(var(--split, 0) * 1.6 - 0.4);
        transition: opacity 0.6s var(--hero-ease-out) 0.7s;
    }
    .home-hero__side--right .home-hero__side-inner {
        transition: opacity 0.6s var(--hero-ease-out) 0.8s;
    }

    /* Gentle scale on the central media: 1.0 at split:0 → 1.04 at split:1 */
    .home-hero__video {
        transform: scale(calc(1 + var(--split, 0) * 0.04));
        transform-origin: center center;
        transition: transform 1.3s var(--hero-ease);
    }

    /*
       Shrink the central copy in lockstep with the column width so the
       headline stops getting clipped when the central column reaches 1/3.
         split:0 → up to 6vw, capped at 84px (full cinematic size)
         split:1 → up to 2.8vw, capped at 48px (fits the narrow column)
       Padding also tightens to give the text a bit more breathing room.
     */
    .home-hero__central-inner {
        padding:
            calc(var(--s-7) - var(--split, 0) * var(--s-4))
            calc(var(--s-5) - var(--split, 0) * var(--s-3));
        transition: padding 1.3s var(--hero-ease);
    }
    .home-hero__title {
        font-size: clamp(
            28px,
            calc(6vw - var(--split, 0) * 3.2vw),
            calc(84px - var(--split, 0) * 36px)
        );
        transition: font-size 1.3s var(--hero-ease);
    }
    .home-hero__central-cta {
        padding:
            calc(14px - var(--split, 0) * 4px)
            calc(28px - var(--split, 0) * 10px);
        font-size: calc(var(--fs-md) - var(--split, 0) * 2px);
        transition: padding 1.3s var(--hero-ease), font-size 1.3s var(--hero-ease);
    }
}

/* Scroll-lock used while the animation is playing */
html.is-scroll-locked,
body.is-scroll-locked {
    overflow: hidden !important;
    touch-action: none;
}

/* Reduced motion — jump straight to split state, no transitions */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
    .home-hero__central { width: 33.333%; transition: none; }
    .home-hero__side    { width: 33.333%; opacity: 1; clip-path: none; transition: none; }
    .home-hero__side-inner { opacity: 1; transition: none; }
}

/* ============================================================
   BRANDS 3-COL (BOGNER MAN / WOMAN / SHOES below hero)
   ============================================================ */
.home-brands {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--c-fg);
}
@media (min-width: 900px) {
    .home-brands { grid-template-columns: repeat(3, 1fr); }
}

.home-brands__heading {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--s-6) var(--s-4) var(--s-5);
    background: var(--c-bg);
    color: var(--c-fg);
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.home-brands__item {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: var(--c-bg);
    text-decoration: none;
}
@media (min-width: 900px) { .home-brands__item { aspect-ratio: 3/4; min-height: 420px; } }

.home-brands__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.0) 45%, rgba(0,0,0,.65) 100%);
    transition: background var(--t-base) var(--ease-out);
}
.home-brands__item:hover .home-brands__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.75) 100%);
}

.home-brands__inner {
    position: absolute;
    inset: auto var(--s-5) var(--s-5) var(--s-5);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.home-brands__label {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.home-brands__cta {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
}

/* ============================================================
   FEATURED SCROLLER
   ============================================================ */
.home-featured {
    background: var(--c-surface-2);
    padding-block: var(--s-4) var(--s-8);
}
.home-featured__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    padding: var(--s-5) var(--container-pad);
    scrollbar-width: thin;
}
@media (min-width: 640px)  { .home-featured__scroller { grid-auto-columns: 42%; } }
@media (min-width: 900px)  { .home-featured__scroller { grid-auto-columns: 28%; } }
@media (min-width: 1280px) { .home-featured__scroller { grid-auto-columns: 22%; } }

.home-featured__card { scroll-snap-align: start; }
.home-featured__link { display: block; }
.home-featured__img {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--c-surface);
    background-size: cover;
    background-position: center;
    margin-bottom: var(--s-2);
}
.home-featured__sale {
    position: absolute;
    top: var(--s-2); right: var(--s-2);
    background: var(--c-fg); color: var(--c-bg);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    font-weight: var(--fw-semibold);
}
.home-featured__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.home-featured__price {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-top: 2px;
}
.home-featured__price del { opacity: 0.5; margin-right: var(--s-2); }
.home-featured__price ins { text-decoration: none; }

.home-featured__cta {
    text-align: center;
    padding-top: var(--s-4);
}

/* ============================================================
   SHOP THE LOOK
   ============================================================ */
.home-look {
    background: var(--c-fg);
    color: var(--c-bg);
    padding-block: var(--s-8);
}
.home-look__grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 900px) { .home-look__grid { grid-template-columns: 1fr 1fr; } }

.home-look__card { display: block; color: var(--c-bg); }
.home-look__img {
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    margin-bottom: var(--s-3);
    transition: transform var(--t-slow) var(--ease-out);
}
.home-look__card:hover .home-look__img { transform: translateY(-3px); opacity: 1; }
.home-look__cta {
    display: inline-block;
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
}

/* ============================================================
   GOLF 2026 3-COL PROMO — full-bleed, full-viewport-height on desktop.
   Center text panel uses the legacy dark-blue #1a1f28 background.
   ============================================================ */
.home-promo { margin-top: 30px; }
.home-promo__grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 420px;
}
@media (min-width: 900px) {
    .home-promo__grid {
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 100vh;
    }
}
.home-promo__side {
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: block;
    position: relative;
    transition: opacity var(--t-base) var(--ease-out);
}
.home-promo__side:hover { opacity: 0.9; }

.home-promo__center {
    background: #1a1f28;
    color: var(--c-bg);
    padding: var(--s-7) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
}
.home-promo__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #bbb;
}
.home-promo__title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.home-promo__accent { display: block; width: 100%; max-width: 200px; height: auto; }
.home-promo__lead { max-width: 36ch; color: rgba(255,255,255,.85); }

/* ============================================================
   LUXURY SALE 2-COL — full-bleed, full-viewport-height on desktop.
   ============================================================ */
.home-sale {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--c-fg);
}
@media (min-width: 900px) {
    .home-sale { grid-template-columns: 1fr 1fr; min-height: 100vh; }
}

.home-sale__item {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    color: var(--c-bg);
    overflow: hidden;
    text-decoration: none;
}
@media (min-width: 900px) {
    .home-sale__item {
        aspect-ratio: auto;
        min-height: 100vh;
        height: 100vh;
    }
}
@media (max-width: 899px) {
    .home-sale__item {
        position: relative;
        display: block;
        aspect-ratio: 4 / 5;
        background-size: cover;
        background-position: center;
        color: var(--c-bg);
        overflow: hidden;
        text-decoration: none;
    }
}

.home-sale__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%);
    transition: background var(--t-base) var(--ease-out);
}
.home-sale__item:hover .home-sale__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.75) 100%);
}
.home-sale__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-2);
}
.home-sale__kicker {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    font-weight: var(--fw-semibold);
}
.home-sale__label {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}
.home-sale__cta {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
    margin-top: var(--s-2);
}

/* ============================================================
   LOCATIONS
   ============================================================ */
.home-locs { padding-bottom: var(--s-8); }
.home-locs__list {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 640px)  { .home-locs__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-locs__list { grid-template-columns: repeat(3, 1fr); } }

.home-locs__item {
    border: 1px solid var(--c-border);
    padding: var(--s-5);
}
.home-locs__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.home-locs__addr,
.home-locs__hours,
.home-locs__phone {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    line-height: 1.6;
}
.home-locs__phone a { color: var(--c-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   BLOG
   ============================================================ */
.home-blog { padding-bottom: var(--s-8); }
.home-blog__grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 640px)  { .home-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-blog__grid { grid-template-columns: repeat(3, 1fr); } }

.home-blog__thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--c-surface);
    margin-bottom: var(--s-3);
}
.home-blog__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.home-blog__card:hover .home-blog__thumb img { transform: scale(1.03); }

.home-blog__date {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: var(--s-2);
}
.home-blog__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    margin-bottom: var(--s-2);
    line-height: var(--lh-snug);
}
.home-blog__excerpt {
    color: var(--c-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.home-news {
    background: var(--c-fg);
    color: var(--c-bg);
    padding-block: var(--s-8);
}
.home-news__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
}
@media (min-width: 900px) {
    .home-news__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.home-news__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-top: var(--s-2);
}
.home-news__lead { color: rgba(255,255,255,.75); margin-top: var(--s-3); max-width: 44ch; }

.home-news__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    max-width: 480px;
    width: 100%;
}
.home-news__form input[type="email"] {
    background: transparent;
    color: var(--c-bg);
    border: 1px solid rgba(255,255,255,.45);
}
.home-news__form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.home-news__form input[type="email"]:focus { border-color: var(--c-bg); }
.home-news__form .btn {
    background: var(--c-bg); color: var(--c-fg); border-color: var(--c-bg);
}
.home-news__form .btn:hover {
    background: transparent; color: var(--c-bg); border-color: var(--c-bg);
}

/* ---- Shop the look · hotspots ---- */
.home-look__card--shoppable { display: block; }
.home-look__card--shoppable .home-look__img { position: relative; }
.home-look__card--shoppable:hover .home-look__img { transform: none; }
.home-look__card--shoppable .home-look__cta { margin-top: var(--s-3); }

.home-look__hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.home-look__dot {
    width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid #fff; background: rgba(0,0,0,.45);
    display: grid; place-items: center;
    animation: ice-hs-pulse 2.6s ease-out infinite;
}
.home-look__dot span { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; transition: transform var(--t-fast) var(--ease-out); }
.home-look__hotspot.is-open .home-look__dot { background: #fff; animation: none; }
.home-look__hotspot.is-open .home-look__dot span { background: var(--c-fg); transform: scale(1.3); }
@keyframes ice-hs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.home-look__pop {
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 230px; display: flex; gap: var(--s-3); padding: var(--s-3);
    background: var(--c-bg); color: var(--c-fg); text-decoration: none;
    box-shadow: var(--shadow-2); z-index: 3;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.home-look__hotspot.is-open .home-look__pop,
.home-look__hotspot:hover .home-look__pop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.home-look__pop::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--c-bg);
}
.home-look__pop-img { flex: 0 0 64px; height: 82px; background: var(--c-surface) center/cover no-repeat; }
.home-look__pop-meta { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.home-look__pop-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.25; }
.home-look__pop-price { font-size: var(--fs-sm); color: var(--c-muted); }
.home-look__pop-price del { opacity: .6; margin-right: 4px; }

/* ---- Style slider (legacy [iceland_home_slider] port) ------------------- */
/* A plain 4-up image carousel: no names, no prices. Full-bleed track with
   circular hover-in arrows, per-page dots and a zoom + "+" hover overlay,
   mirroring the old Owl-based block. Item widths track the JS breakpoints
   (desktop 4 / tablet 3 / mobile 1) so paging aligns to item boundaries. */
.home-styleslider { margin: 40px 0; }
.home-styleslider .home-section-head { margin-bottom: 22px; }

.ice-styleslider { position: relative; }
.ice-styleslider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ice-styleslider__viewport::-webkit-scrollbar { display: none; }
.ice-styleslider__track { display: flex; gap: 1px; }
.ice-styleslider__item {
    position: relative;
    flex: 0 0 calc((100% - 3px) / 4);   /* 4 across, 1px gaps */
    scroll-snap-align: start;
    display: block;
    overflow: hidden;
    background: #f5f5f5;
}
.ice-styleslider__figure { position: relative; margin: 0; overflow: hidden; }
.ice-styleslider__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .4s ease;
}
.ice-styleslider__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    transition: opacity .4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ice-styleslider__plus {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    transform: scale(.8);
    transition: transform .4s ease;
}
.ice-styleslider__plus::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.ice-styleslider__item:hover .ice-styleslider__img { transform: scale(1.1); }
.ice-styleslider__item:hover .ice-styleslider__overlay { opacity: 1; }
.ice-styleslider__item:hover .ice-styleslider__plus { transform: scale(1); }

.ice-styleslider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity .3s ease, background .3s ease, transform .3s ease;
}
.ice-styleslider:hover .ice-styleslider__nav { opacity: 1; }
.ice-styleslider__nav:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.ice-styleslider__nav svg { width: 24px; height: 24px; fill: #333; }
.ice-styleslider__nav--prev { left: 10px; }
.ice-styleslider__nav--next { right: 10px; }

.ice-styleslider__dots { text-align: center; margin-top: 20px; }
.ice-styleslider__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all .3s ease;
}
.ice-styleslider__dot.is-active,
.ice-styleslider__dot:hover { background: #333; transform: scale(1.2); }

@media (max-width: 1024px) {
    .ice-styleslider__item { flex-basis: calc((100% - 2px) / 3); }   /* 3 across */
}
@media (max-width: 768px) {
    .ice-styleslider__item { flex-basis: 100%; }                     /* 1 across */
    .ice-styleslider__nav { width: 34px; height: 34px; opacity: 1; }
    .ice-styleslider__nav svg { width: 20px; height: 20px; }
}