/* ============================================
   LYRE WHOLESALE — CATALOGUE
   Scope: the lw_style archive (/catalogue/) and its components — grid, cards,
   filters, pagination. Editorial minimalism: generous whitespace, restrained
   colour, large headings against small metadata. Reuses the theme's brand tokens
   (--primary, --heading-font, the --space-* scale, etc.) from main.css.
   New catalogue components use BEM .lw-* class names.
   ============================================ */

/* ── PAGE WRAPPER ──────────────────────────── */
.lw-catalogue {
    max-width: var(--max-width); /* match the header/footer chrome rails (1280px) */
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm) var(--space-2xl);
}
@media (min-width: 1024px) {
    .lw-catalogue {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
        padding-top: var(--space-lg);
    }
}

.lw-catalogue__head {
    margin-bottom: var(--space-md);
}

/* Unresolved-QR-scan notice (archive-lw_style.php). Same visual language as the
   past-season notice on the style page. */
.lw-catalogue__scan-notice {
    /* Sits inside .lw-catalogue, which already supplies the max-width rail. */
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--body-font);
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 3px solid var(--accent);
    background: rgba(184, 149, 106, 0.10);
    color: var(--text);
}

.lw-catalogue__empty {
    font-family: var(--body-font);
    color: var(--secondary);
    padding: var(--space-lg) 0;
    text-align: center;
}

/* ── FILTER BAR ────────────────────────────── */
.lw-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.lw-filters__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lw-filters__label {
    font-family: var(--body-font);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.lw-filters__select {
    box-sizing: border-box;
    min-height: 44px;
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 6px 28px 6px 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Minimal chevron, drawn so we don't ship an asset. */
    background-image: linear-gradient(45deg, transparent 50%, var(--secondary) 50%),
        linear-gradient(135deg, var(--secondary) 50%, transparent 50%);
    background-position: right 8px center, right 3px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 0.25s;
}
.lw-filters__select:hover,
.lw-filters__select:focus {
    border-bottom-color: var(--primary);
    outline: none;
}

.lw-filters__submit {
    font-family: var(--body-font);
    font-size: 13px;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--background);
    border: 0;
    cursor: pointer;
}

.lw-filters__reset {
    margin-left: auto;
    align-self: center;
    font-family: var(--body-font);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.25s;
}
.lw-filters__reset:hover {
    color: var(--primary);
}

/* ── GRID ──────────────────────────────────── */
.lw-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm) var(--space-sm);
    margin-top: var(--space-md);
}
/* The grid receives programmatic focus after AJAX pagination (tabindex="-1" +
   .focus() in catalogue.js) to move keyboard focus into the new content. It's
   never keyboard-tabbed to, so suppressing its focus ring doesn't affect a11y. */
.lw-grid:focus {
    outline: none;
}
@media (min-width: 768px) {
    .lw-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg) var(--space-md);
    }
}
@media (min-width: 1024px) {
    .lw-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── STYLE CARD ────────────────────────────── */
.lw-card {
    display: block;
    color: var(--text);
    text-decoration: none;
}

.lw-card__image {
    overflow: hidden;
    background: var(--background);
    margin-bottom: var(--space-sm);
    aspect-ratio: 4 / 5;
}
.lw-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* preserve heads/faces when cropping is needed */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.lw-card:hover .lw-card__image img {
    transform: scale(1.04);
}

.lw-card__title {
    font-family: var(--heading-font);
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.lw-card__number {
    font-family: var(--body-font);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 4px 0 0;
}

.lw-card__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-xs);
}

.lw-card__swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.lw-card__swatch--more {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-family: var(--body-font);
    font-size: 11px;
    color: var(--muted);
}

/* ── PAGINATION ────────────────────────────── */
.lw-pagination {
    margin-top: var(--space-xl);
    text-align: center;
}
.lw-pagination .nav-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}
.lw-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--secondary);
    padding: 6px 12px;
    transition: color 0.2s;
}
.lw-pagination a.page-numbers:hover {
    color: var(--primary);
}
.lw-pagination .page-numbers.current {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 1px solid var(--primary);
}
.lw-pagination .page-numbers.dots {
    color: var(--muted);
}

/* ============================================
   STYLE DETAIL (single-lw_style)
   ============================================ */
.lw-style {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm) var(--space-2xl);
}
@media (min-width: 1024px) {
    .lw-style {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}

.lw-style__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 1024px) {
    .lw-style__columns {
        grid-template-columns: 58% 1fr;
        gap: var(--space-lg);
        align-items: start;
    }
}

/* Images — hero shows the full image uncropped (detail view). The opacity
   transition lives here (not set inline by JS) so the FIRST swap fades smoothly. */
.lw-style__hero img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease;
}

/* Thumbnail strip: horizontal scroll on mobile; a vertical column beside the hero
   on desktop (see the --has-thumbs grid below). Built/rebuilt by catalogue.js when
   colorways swap the gallery, so the markup is a <div> of <button>s, not a list. */
.lw-style__thumbs {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    overflow-x: auto;
    margin-top: var(--space-sm);
}
.lw-style__thumb {
    flex: 0 0 auto;
    width: 80px;
    height: 100px; /* 4:5 product ratio */
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
}
.lw-style__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.lw-style__thumb:hover {
    opacity: 0.85;
}
.lw-style__thumb--active {
    border-color: var(--text);
}

/* Desktop: thumbs become a fixed-width vertical column to the LEFT of the hero, so
   the buyer can switch images without scrolling away. Only applied when there are
   multiple images (the --has-thumbs modifier, toggled server-side and by JS). */
@media (min-width: 768px) {
    .lw-style__images--has-thumbs {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: var(--space-md);
        align-items: start;
    }
    .lw-style__images--has-thumbs .lw-style__hero {
        order: 2;
    }
    .lw-style__images--has-thumbs .lw-style__thumbs {
        order: 1;
        flex-direction: column;
        overflow-x: visible;
        overflow-y: auto;
        max-height: 680px;
        margin-top: 0;
    }
    .lw-style__images--has-thumbs .lw-style__thumb {
        width: 100%;
        height: 120px;
    }
}

/* Info column */
.lw-style__name {
    font-family: var(--heading-font);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 var(--space-sm);
}
.lw-style__number {
    font-family: var(--body-font);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--secondary);
    margin: 0 0 var(--space-xs);
}
.lw-style__collection {
    font-family: var(--body-font);
    font-size: 13px;
    margin: 0 0 var(--space-md);
}
.lw-style__collection a {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
}
.lw-style__collection a:hover {
    color: var(--primary);
}

/* ── View-only / past-season notice ─────────── */
.lw-style__notice {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--body-font);
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 3px solid var(--accent);
    background: rgba(184, 149, 106, 0.10);
    color: var(--text);
}
.lw-style__notice--unavailable {
    border-left-color: var(--muted, #888);
    background: rgba(136, 136, 136, 0.10);
    color: var(--secondary, var(--text));
}
/* On the collection page the same notice sits under the title. */
.lw-collection__season-note {
    margin-bottom: var(--space-md);
}
.lw-style__description {
    font-family: var(--body-font);
    color: var(--text);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.lw-style__section-label {
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--space-xs);
}
.lw-style__colorways,
.lw-style__sizes,
.lw-style__specs {
    margin-bottom: var(--space-md);
}

.lw-style__swatches {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* aligns the "All images" pill with the round swatches */
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
}

/* "All images" button — the default (main images) gallery. A pill of text, kept
   visually distinct from the round colour swatches; inverts when active. */
.lw-style__view-default {
    align-self: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--body-font);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
/* Hover only restyles the deselected pill. When active (black fill), hover/focus
   must NOT pull the text to --text, or it'd be black-on-black — this is the sticky
   touch-hover / lingering-focus bug. The :not() keeps the active rule's white text. */
.lw-style__view-default:not(.lw-style__view-default--active):hover {
    color: var(--text);
    border-color: var(--text);
}
.lw-style__view-default--active {
    background: var(--text);
    border-color: var(--text);
    color: var(--background);
}
.lw-style__swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}
.lw-style__swatch:hover {
    transform: scale(1.08);
}

/* Touch devices: grow the TAP target to the 44px minimum without changing how big
   the swatch looks. A 28px target is a mistap risk on a phone, and these sit right
   above the separate add-to-cart colour radios — picking the wrong control is easy.
   (They stay separate controls: a swatch swaps the gallery, a radio picks the
   colourway being ordered.)

   Scoped to `pointer: coarse` rather than a width breakpoint so it tracks actual
   touch input — a phone held in landscape is still touch — and so the desktop
   mouse layout is left exactly as designed.

   The colourway hex is an inline background-color on the button itself, so padding
   alone can't do this: the padding would be painted too, giving a 44px blob. Hence
   box-sizing:content-box + background-clip:content-box — the layout box becomes
   44px (which also lets flexbox space them so the hit areas never overlap) while
   the paint stays confined to the 28px content box. The hairline ring that keeps
   pale swatches visible against a pale page moves to ::after, sized to hug it. */
@media (pointer: coarse) {
    .lw-style__swatch {
        position: relative;
        box-sizing: content-box;
        width: 28px;
        height: 28px;
        padding: 8px;
        border: 0;
        /* Half the 44px border box. The background's inner corner radius resolves to
           22px - 8px padding = 14px on a 28px box — i.e. a circle. */
        border-radius: 22px;
        background-clip: content-box;
    }
    .lw-style__swatch::after {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid var(--border);
        border-radius: 50%;
        pointer-events: none;
    }
    /* Keep the "All images" pill on the same 44px rhythm so the row stays aligned. */
    .lw-style__view-default {
        min-height: 44px;
    }
}

.lw-style__sizes-list {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--text);
    margin: 0;
}

.lw-style__spec {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--secondary);
    margin: 0 0 4px;
}

/* Wholesale CTA — set apart with a top rule, links clearly actionable. */
.lw-wholesale-cta {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}
.lw-wholesale-cta__heading {
    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 var(--space-xs);
}
.lw-wholesale-cta p {
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--secondary);
    margin: 0 0 var(--space-xs);
}
.lw-wholesale-cta__login,
.lw-wholesale-cta__apply {
    color: var(--primary);
    border-bottom: 1px solid currentColor;
}
.lw-wholesale-cta__login:hover,
.lw-wholesale-cta__apply:hover {
    color: var(--accent);
}

/* ============================================
   COLLECTION DETAIL (single-lw_collection)
   ============================================ */
.lw-collection {
    padding-bottom: var(--space-2xl);
}

/* Two-column header: portrait hero (left, 2fr) + collection info (right, 3fr). */
.lw-collection__header {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-lg);
    align-items: start;
    max-width: var(--max-width);
    margin-inline: auto;
    margin-bottom: var(--space-xl);
    /* Mirror .lw-collection__styles' inset (max-width + this padding) so the hero's
       left edge lines up with the styles grid's cards below. */
    padding: 0 var(--space-sm);
}
@media (max-width: 768px) {
    .lw-collection__header {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1024px) {
    .lw-collection__header {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}

/* Hero: portrait crop, capped height (no longer full-bleed/uncropped). */
.lw-collection__hero {
    width: 100%;
}
.lw-collection__hero img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.lw-collection__info {
    margin: 0 0 var(--space-xl);
    padding: var(--space-lg) var(--space-sm) 0;
}
@media (min-width: 1024px) {
    .lw-collection__info {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}
.lw-collection__name {
    font-family: var(--heading-font);
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 var(--space-sm);
}
.lw-collection__delivery {
    font-family: var(--body-font);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 var(--space-md);
}
.lw-collection__description {
    font-family: var(--body-font);
    color: var(--text);
    line-height: 1.7;
    max-width: 60ch;
    margin: 0;
    text-align: left;
}

.lw-collection__styles {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
}
@media (min-width: 1024px) {
    .lw-collection__styles {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}
.lw-collection__styles-heading {
    font-family: var(--heading-font);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 500;
    text-align: center;
    margin: 0 0 var(--space-lg);
}

/* ============================================
   COLLECTION ARCHIVE (archive-lw_collection)
   ============================================ */
.lw-collections-archive {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm) var(--space-2xl);
}
@media (min-width: 1024px) {
    .lw-collections-archive {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}

.lw-collection-entry {
    margin-bottom: var(--space-2xl);
}
.lw-collection-entry:last-child {
    margin-bottom: 0;
}
.lw-collection-entry__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.lw-collection-entry__hero {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--space-md);
    background: var(--background);
}
.lw-collection-entry__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}
.lw-collection-entry__link:hover .lw-collection-entry__hero img {
    transform: scale(1.02);
}

.lw-collection-entry__name {
    font-family: var(--heading-font);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 var(--space-xs);
}
.lw-collection-entry__delivery {
    font-family: var(--body-font);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 var(--space-xs);
}
.lw-collection-entry__description {
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--secondary);
    max-width: 60ch;
    margin: 0;
}
.lw-collections-archive__empty {
    font-family: var(--body-font);
    color: var(--secondary);
    text-align: center;
    padding: var(--space-lg) 0;
}

/* ============================================
   TAXONOMY ARCHIVE (taxonomy.php — gender / country)
   ============================================ */
.lw-taxonomy-archive {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm) var(--space-2xl);
}
@media (min-width: 1024px) {
    .lw-taxonomy-archive {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}

.lw-taxonomy-archive__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
    .lw-taxonomy-archive__head {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
}
.lw-taxonomy-archive__title {
    font-family: var(--heading-font);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0;
}
.lw-taxonomy-archive__back {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}
.lw-taxonomy-archive__back:hover {
    color: var(--primary);
}
.lw-taxonomy-archive__empty {
    font-family: var(--body-font);
    color: var(--secondary);
    text-align: center;
    padding: var(--space-lg) 0;
}

/* ============================================
   JS ENHANCEMENT STATES (catalogue.js)
   ============================================ */
/* Filter AJAX swap: fade the grid while a new page loads (toggled inline by JS). */
.lw-grid {
    transition: opacity 0.2s ease;
}

/* Empty result inside the grid container (JS injects this on a 0-result filter). */
.lw-grid-empty {
    grid-column: 1 / -1;
    padding: var(--space-2xl) 0;
    text-align: center;
    color: var(--muted);
    font-family: var(--body-font);
}

/* (Hero swap fade is defined on .lw-style__hero img in the detail section above.) */

/* Active swatch — marks the colorway currently shown in the hero. */
.lw-style__swatch--active {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* Thumb strip is always in the DOM (so JS can repopulate it for a colorway with
   more images than the default gallery); force [hidden] to win over display:flex. */
.lw-style__thumbs[hidden] {
    display: none;
}

/* Hex-only colorway: rendered dimmed to signal "informational, no photos yet". */
.lw-style__swatch--no-images {
    opacity: 0.65;
}

/* Inline "no photos for this colorway" inquiry message. */
.lw-style__swatch-message {
    margin-top: var(--space-sm);
    font-family: var(--body-font);
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}
.lw-style__swatch-message[hidden] {
    display: none;
}

/* ============================================
   WHOLESALE PRICING (sub-phase 4c-2)
   Pricing on catalogue cards + style detail, and the public sign-in banner.
   Retailer-only pricing is rendered server-side; these are display rules only.
   ============================================ */

/* ── Public sign-in banner ─────────────────── */
.lw-catalogue-banner {
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
}
.lw-catalogue-banner__text {
    margin: 0;
    font-family: var(--body-font);
    font-size: 0.9rem;
    color: var(--muted);
}
.lw-catalogue-banner__text a {
    color: var(--text);
    text-decoration: underline;
}

/* ── Card pricing ──────────────────────────── */
.lw-card__pricing {
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lw-card__wholesale-price {
    font-family: var(--body-font);
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
}
.lw-card__retail-price,
.lw-card__moq {
    font-family: var(--body-font);
    color: var(--muted);
}
.lw-card__retail-price {
    font-size: 0.85rem;
}
.lw-card__moq {
    font-size: 0.8rem;
}

/* ── Style-detail pricing ──────────────────── */
.lw-style__pricing {
    margin: var(--space-sm) 0;
}
.lw-style__wholesale-price {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 var(--space-xs);
    color: var(--text);
}
.lw-style__per-unit {
    font-family: var(--body-font);
    font-size: 1rem;
    color: var(--muted);
    margin-left: var(--space-xs);
}
.lw-style__retail-price,
.lw-style__moq,
.lw-style__ordered-before {
    font-family: var(--body-font);
    font-size: 0.95rem;
    color: var(--muted);
    margin: var(--space-xs) 0;
}