/**
 * Shop by Category — Luxury pack.
 * All three variants live in this file so the browser caches one stylesheet
 * regardless of which variant a page uses.
 *
 * The grid mechanics, card box and media crop live in pack-widgets-base.css
 * under .wl-sbc-*. Only this pack's colours, type and spacing belong here.
 *
 * Each variant was designed by a different designer with its own palette, so
 * each redeclares the --wl-pack-* colour tokens on its own root where it
 * differs. v1 matches the pack defaults and needs no override.
 *
 * v1 and v3 are carousels. Slick turns .wl-sbc-grid into its own track, so the
 * column rules in the base sheet stop applying there — card width comes from
 * slidesToShow instead, and only the gap is set here.
 *
 * Font families are deliberately NOT overridden — type comes from the theme and
 * the Style tab's typography controls.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Shared — carousel chrome (v1 and v3)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-wl-pack="luxury"] .wl-sbc-slider-outer {
    position: relative;
}

/* Slick measures the track, so the grid rules have to be off before it inits. */
[data-wl-pack="luxury"] .wl-sbc-grid[data-wl-slider="true"] {
    display: block;
}

/* `gap` does nothing here — Slick sizes each slide with an inline pixel width
   inside its own track, so the space between cards has to come from padding,
   pulled back at both ends by a negative margin on the list. Padding rather than
   a margin so Slick's measurement stays correct, and border-box so the inline
   width it writes still holds.

   That padding goes on .wl-sbc-slide, never on the card. Slick promotes the
   grid's direct children to slides as they are — it adds no wrapper of its own —
   so without the shell in the template the padding would sit on the <a> itself
   and the Card > Background control would paint straight across the gap. The
   shell is spacing only; background, border and radius stay on the card.

   Both rules wait for .slick-initialized. Until Slick runs, the element is still
   a plain CSS grid and its own `gap` is doing the spacing — applying the padding
   too would double it for that first frame. */
[data-wl-pack="luxury"] .wl-sbc-grid.slick-initialized .slick-list {
    overflow: hidden;
    margin: 0 calc(var(--wl-sbc-slide-gap, 12px) / -2);
}

[data-wl-pack="luxury"] .wl-sbc-grid[data-wl-slider="true"] .slick-track {
    display: flex;
}

[data-wl-pack="luxury"] .wl-sbc-grid.slick-initialized .wl-sbc-slide {
    height: auto;
    box-sizing: border-box;
    padding: 0 calc(var(--wl-sbc-slide-gap, 12px) / 2);
}

/* Cards fill their shell so a shorter one still lines up with its neighbours. */
[data-wl-pack="luxury"] .wl-sbc-slide .wl-sbc-card {
    height: 100%;
}

[data-wl-pack="luxury"] .wl-sbc-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

[data-wl-pack="luxury"] .wl-sbc-progress {
    display: block;
    flex: 0 0 auto;
    width: 140px;
    max-width: 40%;
    height: 2px;
    border-radius: 2px;
    background: rgba(23, 23, 23, 0.12);
    overflow: hidden;
}

[data-wl-pack="luxury"] .wl-sbc-progress-fill {
    display: block;
    width: 10%;
    height: 100%;
    border-radius: 2px;
    background: var(--wl-pack-secondary);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-wl-pack="luxury"] .wl-sbc-nav {
    display: flex;
    gap: 8px;
}

/* The arrows are moved in here by the handler, so they leave the base sheet's
   centred-overlay positioning behind. */
[data-wl-pack="luxury"] .wl-sbc-nav .wl-pack-nav {
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-wl-pack="luxury"] .wl-sbc-nav .wl-pack-nav:hover {
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: v1 — Portrait card carousel under a centred header
   ═══════════════════════════════════════════════════════════════════════════ */

/* Declared on the root, not on .wl-sbc-grid — the grid inherits it, which leaves
   the Style tab's Gap control free to overwrite it on the grid itself without
   the two declarations tying on specificity. v1 needs no palette override; the
   luxury pack defaults already are its colours. */
.wl-sbc-luxury-v1 {
    --wl-sbc-slide-gap: 12px;
}

.wl-sbc-luxury-v1 .wl-sbc-head {
    margin-bottom: 48px;
    text-align: center;
}

/* The gold rule leading the eyebrow is a pseudo-element so the control still
   holds plain text. */
.wl-sbc-luxury-v1 .wl-sbc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--wl-pack-font-body);
    font-size: var(--wl-pack-text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wl-pack-primary);
}

.wl-sbc-luxury-v1 .wl-sbc-eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: currentColor;
}

.wl-sbc-luxury-v1 .wl-sbc-headline {
    margin: 0;
    font-family: var(--wl-pack-font-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v1 .wl-sbc-headline em {
    font-style: normal;
    color: var(--wl-pack-primary);
}

.wl-sbc-luxury-v1 .wl-sbc-slider-outer {
    padding: 28px 28px 24px;
    border-radius: 20px;
}

.wl-sbc-luxury-v1 .wl-sbc-grid {
    --wl-sbc-cols: 6;
    gap: 12px;
}

.wl-sbc-luxury-v1 .wl-sbc-card {
    background: var(--wl-pack-bg);
    border-radius: 14px;
    transition: transform 0.28s ease;
}

.wl-sbc-luxury-v1 .wl-sbc-card:hover {
    transform: translateY(-2px);
}

.wl-sbc-luxury-v1 .wl-sbc-media {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    background: #EBEBEB;
}

.wl-sbc-luxury-v1 .wl-sbc-media img {
    transition: transform 0.6s ease;
}

.wl-sbc-luxury-v1 .wl-sbc-card:hover .wl-sbc-media img {
    transform: scale(1.04);
}

.wl-sbc-luxury-v1 .wl-sbc-label {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 10px 6px 12px;
}

.wl-sbc-luxury-v1 .wl-sbc-name {
    font-family: var(--wl-pack-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v1 .wl-sbc-count {
    font-family: var(--wl-pack-font-body);
    font-size: var(--wl-pack-text-xs);
    font-weight: 400;
    color: #9A9AAA;
}

@media (max-width: 767px) {
    .wl-sbc-luxury-v1 .wl-sbc-headline {
        font-size: 30px;
    }

    .wl-sbc-luxury-v1 .wl-sbc-slider-outer {
        padding: 0;
        overflow: hidden;
    }

    /* The panel padding is what absorbs the track's half-gap pull on desktop. With it gone the
       track hung off the right edge, so the pull is dropped too and the slides' own padding
       insets the row evenly — the same thing v3 does at every width. */
    .wl-sbc-luxury-v1 .wl-sbc-grid.slick-initialized .slick-list {
        margin: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: v2 — Oversized name rows with hover-revealed thumb and link
   ═══════════════════════════════════════════════════════════════════════════ */

/* Deep olive on a pale olive ground — this variant's own palette. */
.wl-sbc-luxury-v2 {
    --wl-pack-primary: #30382C;
    --wl-pack-accent: #6B705E;
    --wl-pack-bg: #EAEBE1;
    --wl-pack-bg-alt: #FCFCF8;
    --wl-pack-text: #2A3024;
    --wl-pack-text-muted: #5E6353;
    --wl-pack-border: rgba(48, 56, 44, 0.14);
}

.wl-sbc-luxury-v2 .wl-sbc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(36px, 4vw, 60px);
    text-align: center;
}

.wl-sbc-luxury-v2 .wl-sbc-eyebrow {
    font-family: var(--wl-pack-font-body);
    font-size: var(--wl-pack-text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wl-pack-accent);
}

.wl-sbc-luxury-v2 .wl-sbc-headline {
    margin: 0;
    font-family: var(--wl-pack-font-heading);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v2 .wl-sbc-headline em {
    font-style: italic;
    color: var(--wl-pack-accent);
}

.wl-sbc-luxury-v2 .wl-sbc-grid {
    --wl-sbc-cols: 1;
    gap: 0;
    max-width: 1120px;
    margin: 0 auto;
}

.wl-sbc-luxury-v2 .wl-sbc-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: clamp(14px, 2vw, 28px) 8px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    overflow: visible;
    transition: border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover {
    border-top-color: rgba(48, 56, 44, 0.24);
    border-bottom-color: rgba(48, 56, 44, 0.24);
    background: linear-gradient(90deg, transparent 0%, rgba(48, 56, 44, 0.04) 50%, transparent 100%);
}

.wl-sbc-luxury-v2 .wl-sbc-thumbs {
    grid-column: 1;
    justify-self: start;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateX(-16px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover .wl-sbc-thumbs {
    opacity: 1;
    transform: none;
}

.wl-sbc-luxury-v2 .wl-sbc-thumbs .wl-sbc-media {
    width: clamp(40px, 4vw, 58px);
    height: clamp(40px, 4vw, 58px);
    aspect-ratio: auto;
    background: var(--wl-pack-bg-alt);
    border: 1px solid var(--wl-pack-border);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover .wl-sbc-thumbs .wl-sbc-media {
    transform: rotate(-5deg) translateY(-2px);
}

/* The name is the resting state — muted until the row is hovered, then it
   darkens and opens up its tracking. */
.wl-sbc-luxury-v2 .wl-sbc-name {
    grid-column: 2;
    text-align: center;
    white-space: nowrap;
    font-family: var(--wl-pack-font-heading);
    font-size: clamp(30px, 5.4vw, 72px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #858A76;
    transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover .wl-sbc-name {
    color: var(--wl-pack-text);
    letter-spacing: 1.6px;
}

.wl-sbc-luxury-v2 .wl-sbc-count {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--wl-pack-font-heading);
    font-style: italic;
    font-size: 0.3em;
    letter-spacing: 0;
    color: var(--wl-pack-accent);
    transform: translateY(-0.7em);
}

.wl-sbc-luxury-v2 .wl-sbc-btn {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-family: var(--wl-pack-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--wl-pack-text);
    opacity: 0;
    transform: translateX(16px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover .wl-sbc-btn {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wl-sbc-luxury-v2 .wl-sbc-btn svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-sbc-luxury-v2 .wl-sbc-card:hover .wl-sbc-btn svg {
    transform: translateX(4px);
}

/* One column on narrow screens, and no hover to reveal anything — the thumb is
   dropped and the link is shown outright. */
@media (max-width: 820px) {
    .wl-sbc-luxury-v2 .wl-sbc-card {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 8px;
        text-align: center;
        border-top-color: var(--wl-pack-border);
    }

    .wl-sbc-luxury-v2 .wl-sbc-thumbs {
        display: none;
    }

    .wl-sbc-luxury-v2 .wl-sbc-name {
        grid-column: 1;
        font-size: clamp(28px, 8vw, 42px);
    }

    .wl-sbc-luxury-v2 .wl-sbc-btn {
        grid-column: 1;
        justify-self: center;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: v3 — Square card carousel under a left-aligned header
   ═══════════════════════════════════════════════════════════════════════════ */

/* Warm gold on ivory with a charcoal ink — this variant's own palette. */
.wl-sbc-luxury-v3 {
    --wl-sbc-slide-gap: 16px;
    --wl-pack-primary: #C6A972;
    --wl-pack-secondary: #2C2A28;
    --wl-pack-bg: #FFFFFF;
    --wl-pack-text: #2C2A28;
    --wl-pack-text-muted: #6E5B4B;
}

/* The shared .slick-list rule pulls the track out by half a slide gap so a card's edge lines up
   with the header. v1 absorbs that inside its panel padding; v3 has no panel, so the track ran
   past the section on the right — and Slick rounds each slide width up, which pushed the last
   card another few pixels out on top of that. The track is left flush here instead: the slides'
   own padding then insets the row by half a gap on both sides, which is symmetrical and cannot
   clip a card whatever width Slick lands on. overflow guards the rounding. */
.wl-sbc-luxury-v3 .wl-sbc-slider-outer {
    overflow: hidden;
}

.wl-sbc-luxury-v3 .wl-sbc-grid.slick-initialized .slick-list {
    margin: 0;
}

.wl-sbc-luxury-v3 .wl-sbc-head {
    margin-bottom: 40px;
}

.wl-sbc-luxury-v3 .wl-sbc-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--wl-pack-font-body);
    font-size: var(--wl-pack-text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wl-pack-primary);
}

.wl-sbc-luxury-v3 .wl-sbc-headline {
    margin: 0;
    font-family: var(--wl-pack-font-heading);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v3 .wl-sbc-headline em {
    font-style: normal;
    color: var(--wl-pack-primary);
}

.wl-sbc-luxury-v3 .wl-sbc-grid {
    --wl-sbc-cols: 5;
    gap: 16px;
}

.wl-sbc-luxury-v3 .wl-sbc-card {
    gap: 14px;
}

.wl-sbc-luxury-v3 .wl-sbc-media {
    border-radius: 12px;
    background: #E7E7E7;
}

.wl-sbc-luxury-v3 .wl-sbc-media img {
    transition: transform 0.5s ease;
}

.wl-sbc-luxury-v3 .wl-sbc-card:hover .wl-sbc-media img {
    transform: scale(1.05);
}

.wl-sbc-luxury-v3 .wl-sbc-label {
    display: block;
    font-family: var(--wl-pack-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v3 .wl-sbc-count {
    font-weight: 400;
    color: var(--wl-pack-text-muted);
}

.wl-sbc-luxury-v3 .wl-sbc-nav .wl-pack-nav {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1.5px solid rgba(44, 42, 40, 0.25);
    box-shadow: none;
    color: var(--wl-pack-text);
}

.wl-sbc-luxury-v3 .wl-sbc-nav .wl-pack-nav:hover {
    background: var(--wl-pack-secondary);
    border-color: var(--wl-pack-secondary);
    color: #fff;
}

.wl-sbc-luxury-v3 .wl-sbc-progress {
    max-width: 180px;
}

@media (max-width: 767px) {
    .wl-sbc-luxury-v3 .wl-sbc-headline {
        font-size: 28px;
    }
}