/* ==========================================================================
   PDP cross-sell rails — "Complete Your Setup" + "You May Also Like"
   ==========================================================================

   Loaded via @pushOnce('styles') from the two section partials, so the PDP picks
   it up only when at least one rail actually renders.

   SHARED, NOT PER-BRAND. Every colour comes from pages/pdp-tokens.css, whose
   brand-coloured roles delegate to --brand-* — one stylesheet, correct for EB
   (red links, pink accent) and for Music Man (gold). site_asset() resolves
   assets/{brand}/ first then falls back to assets/shared/, so do not reintroduce
   an assets/eb/ copy: it would win and silently shadow this file.

   LIGHT MODE ONLY. Dark mode is an explicit post-launch item — no
   prefers-color-scheme block, no theme toggle. See pdp-tokens.css rule 3.

   Vertical rhythm belongs to .pdp__section in pdp-tokens.css. Nothing here may
   declare a top/bottom margin on the section root.
   ========================================================================== */

.pdp-cross-sell {
    /* The rail is its own scroll container; nothing here may leak horizontal
       scroll onto the page body. */
    max-width: 100%;
}

/* --- Header row: heading + prev/next ------------------------------------
   The carousel controls sit beside the heading rather than floating over the
   first and last card. Two reasons, both about not changing the design: an
   overlay would cover card art at exactly the width where the cards are
   smallest, and it would need a light scrim to stay legible over the --pdp-stage
   tile, which is new furniture the mockup does not have. Up here they are
   legible at 375px, they never overlap a product, and — because they are not
   hidden by a media query at any width — they stay operable by keyboard on a
   narrow viewport instead of vanishing on the users most likely to need them.
   ----------------------------------------------------------------------- */

.pdp-cross-sell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pdp-gap);
    /* Inherited from .pdp-cross-sell__heading, which used to own this margin. */
    margin-bottom: var(--pdp-gap);
}

.pdp-cross-sell__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pdp-ink);
}

.pdp-cross-sell__eyebrow {
    color: var(--brand-link);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 0.3rem;
    text-transform: uppercase;
}

/* Revealed by pages/pdp-cross-sell.js only once a Swiper actually exists for
   this rail. The `hidden` attribute is the server default, so a rail that fits —
   or a visitor without JS — never sees a control that cannot do anything. */
.pdp-cross-sell__nav {
    display: flex;
    flex: 0 0 auto;
    gap: var(--pdp-gap-sm);
}

.pdp-cross-sell__nav[hidden] {
    display: none;
}

.pdp-cross-sell__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--pdp-line-2);
    border-radius: 999px;
    background: var(--pdp-card);
    color: var(--pdp-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pdp-cross-sell__btn:hover:not(:disabled) {
    background: var(--pdp-bg-alt);
    border-color: var(--pdp-ink-3);
}

.pdp-cross-sell__btn:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 2px;
}

/* Swiper's navigation module sets the native `disabled` property at the ends
   (it does that only for real <button> elements, which is why these are). The
   control stays visible and keeps its position — it is greyed, not removed, so
   the rail does not reflow as you page through it. */
.pdp-cross-sell__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pdp-cross-sell__btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-cross-sell__btn {
        transition: none;
    }
}

/* --- The rail -----------------------------------------------------------
   The approved mockup lays these cards out as a wrapping grid. It stays a
   horizontal scroller here on purpose: a rail can hold eight fallback siblings
   without pushing the rest of the page down, and .pdp__scroller (pdp-tokens.css)
   already contains the overflow so the body never scrolls sideways. The card
   treatment below is the mockup's; only the container differs.
   ----------------------------------------------------------------------- */

.pdp-cross-sell__rail {
    display: flex;
    gap: var(--pdp-gap);
    margin: 0;
    /* Bottom padding leaves room for the scrollbar and for the card shadow,
       which would otherwise be clipped by the scroll container. */
    padding: 0.25rem 0 1rem;
    list-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pdp-line-2) transparent;
}

.pdp-cross-sell__rail:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 4px;
    border-radius: var(--pdp-radius-sm);
}

.pdp-cross-sell__rail::-webkit-scrollbar {
    height: 6px;
}

.pdp-cross-sell__rail::-webkit-scrollbar-track {
    background: var(--pdp-bg-alt);
    border-radius: 3px;
}

.pdp-cross-sell__rail::-webkit-scrollbar-thumb {
    background: var(--pdp-line-2);
    border-radius: 3px;
}

/* THE CARD WIDTHS ARE THE CAROUSEL'S CONFIGURATION. pages/pdp-cross-sell.js runs
   Swiper with slidesPerView:'auto', so it measures these two numbers instead of
   dividing the container — which is what keeps the cards the size the mockup
   drew at every viewport, and what makes "slides per view" fall out of the
   design (two 168px cards at 375px, six 190px cards at the 1180px --pdp-maxw)
   rather than out of a breakpoints block with a third copy of these numbers in
   it. Change a width here and the carousel follows on its own.

   Deliberately over-specific. Swiper's stylesheet sets `.swiper-slide { width:
   100% }` at the same specificity as a bare `.pdp-cross-sell__item`, and it is
   fetched from the CDN — on a PJAX arrival the JS injects it into the head,
   which puts it AFTER this file and would win a tie. The extra class makes the
   outcome independent of load order. */
.pdp-cross-sell .pdp-cross-sell__item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 168px;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .pdp-cross-sell .pdp-cross-sell__item {
        width: 190px;
    }
}

/* --- Once Swiper owns the rail ------------------------------------------
   These rules apply only when pages/pdp-cross-sell.js has added the Swiper
   classes. The look does not change: the same cards at the same widths with the
   same spacing, moved by transform instead of by a scrollbar.
   ----------------------------------------------------------------------- */

/* The scroll container moves out to .swiper (the viewport), so the rail must
   stop being one. `gap` goes with it: Swiper positions slides arithmetically
   from its `spaceBetween` and applies that as a margin, so a surviving CSS gap
   would be counted twice and every snap would land short. The JS reads the
   resolved --pdp-gap off this element before adding the class and passes it in
   as spaceBetween, so the spacing is unchanged and still has one source. */
.pdp-cross-sell__rail.swiper-wrapper {
    gap: 0;
    padding: 0;
    scroll-snap-type: none;
}

/* The scrollbar allowance is gone, but the card shadow still needs room or the
   .swiper overflow clips it. Same total as the padding the scroller carried.

   CONTAINMENT IS OURS, NOT THE CDN'S. `overflow` and `position` are repeated
   from swiper-bundle.min.css deliberately. The module removes .pdp__scroller
   from the list the instant it hands the rail over, so from that moment the
   ONLY thing clipping the cards is `.swiper`. That class comes from a separate
   CDN request to cdn.jsdelivr.net which is not awaited — the load promise
   resolves on the SCRIPT's onload — so on a cold cache the stylesheet can land
   after the handoff and the rail spills out of its column until it does. A
   refresh "fixes" it because the CSS is then cached, which is exactly how the
   bug hides. Declaring containment locally means a slow, blocked or failed CDN
   stylesheet costs the animation, never the layout. */
.pdp-cross-sell__viewport.swiper {
    position: relative;
    overflow: hidden;
    padding: 0.25rem 0 1rem;
}

/* Swiper's `.swiper-slide { height: 100% }` would resolve against an
   auto-height wrapper; `auto` lets the flex row stretch every card to the
   tallest instead, which is what .catalog-card's own height:100% expects. */
.pdp-cross-sell .pdp-cross-sell__item.swiper-slide {
    height: auto;
    scroll-snap-align: none;
}

/* --- Honest availability line -------------------------------------------
   Rendered as a pill under the card rather than inside it, because the shared
   product card has no slot for it. Ink-2 on a bordered ground — quiet, but never
   a whisper.

   NOT REACHED BY EITHER RAIL TODAY. Both rails now require a purchasable variant
   (PDP review #15: "no reason to push someone to buy something they can't"), and
   a page that has one never produces this copy — see the statusLabel() docblock
   on App\Models\ProductPageRelation. The rule is kept here, and in the partials,
   for the next rail that legitimately shows off-sale product; a rail that shows
   it must not have to reinvent how it looks.
   ----------------------------------------------------------------------- */

.pdp-cross-sell__status {
    align-self: flex-start;
    margin: var(--pdp-gap-sm) 0 0;
    padding: 0.25rem 0.5625rem;
    border: 1px solid var(--pdp-line-2);
    border-radius: 999px;
    background: var(--pdp-bg-alt);
    color: var(--pdp-ink-2);
    font-size: 12px; /* was 0.65625rem; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* --- Shared product card ------------------------------------------------
   public/assets/eb/css/pages/catalog.css owns `.catalog-card`, but it is only
   loaded on catalog listing pages — the PDP loads product-detail.css. These
   rules are the card's essentials restated in PDP tokens, scoped to the rail so
   they can never fight catalog.css if the two ever land on one page together.
   Keep them in step with the `.catalog-card` block in catalog.css.
   ----------------------------------------------------------------------- */

.pdp-cross-sell .catalog-card,
.pdp-cross-sell .pdp-cross-sell__card-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--pdp-card);
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius);
    box-shadow: var(--pdp-shadow);
    color: var(--pdp-ink);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pdp-cross-sell .catalog-card:hover,
.pdp-cross-sell .pdp-cross-sell__card-frame:hover {
    transform: translateY(-3px);
    border-color: var(--pdp-line-2);
}

@media (prefers-reduced-motion: reduce) {
    .pdp-cross-sell .catalog-card,
    .pdp-cross-sell .pdp-cross-sell__card-frame {
        transition: none;
    }

    .pdp-cross-sell .catalog-card:hover,
    .pdp-cross-sell .pdp-cross-sell__card-frame:hover {
        transform: none;
    }
}

/* A basket recommendation needs a footer action that the catalog/PDP card does
   not. The wrapper becomes the frame while the included shared card keeps its
   content structure, so the button is inside the same surface without copying
   the product-card markup. */
.pdp-cross-sell .pdp-cross-sell__card-frame > .catalog-card {
    flex: 1;
    height: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

.pdp-cross-sell .pdp-cross-sell__card-frame > .catalog-card:hover {
    transform: none;
}

.pdp-cross-sell .catalog-card__link {
    display: block;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.pdp-cross-sell .catalog-card__link:hover,
.pdp-cross-sell .catalog-card__link:focus {
    color: inherit;
    text-decoration: none;
}

.pdp-cross-sell .catalog-card__link:focus-visible {
    outline: 3px solid var(--pdp-focus);
    outline-offset: 2px;
    border-radius: var(--pdp-radius-sm);
}

/* Product art is served from the CDN and a fair amount of it is not ported to
   the dev bucket yet, so a 404 is the normal case there. The tile keeps its
   square footprint and the --pdp-stage gradient either way, and the img carries
   alt="" so a failed load degrades to an empty stage rather than broken-image
   chrome or a collapsed card. */
.pdp-cross-sell .catalog-card__image {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0.75rem;
    background: var(--pdp-stage);
    border-bottom: 1px solid var(--pdp-line);
    overflow: hidden;
}

/* ECOM-083: rails load this shared stylesheet instead of catalog.css, so the
   shared card's flags need their small, scoped presentation here as well. This
   keeps PDP and basket rails brand-safe without importing the catalog page's
   unrelated hero, breadcrumb, grid, and responsive rules. */
.pdp-cross-sell .catalog-card__flags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdp-cross-sell .catalog-card__flag {
    position: relative;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--brand-primary-fill);
    color: var(--brand-on-primary);
    font-size: 12px; /* was 10px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.pdp-cross-sell .catalog-card__flag--popular {
    background: #242424;
    color: #fff;
}

.pdp-cross-sell .catalog-card__flag:focus-visible {
    outline: 2px solid var(--brand-on-primary);
    outline-offset: 2px;
}

.pdp-cross-sell .catalog-card__flag-info {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 3;
    display: none;
    min-width: 180px;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.pdp-cross-sell .catalog-card__flag:hover .catalog-card__flag-info,
.pdp-cross-sell .catalog-card__flag:focus-within .catalog-card__flag-info {
    display: block;
}

.pdp-cross-sell .catalog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

.pdp-cross-sell .catalog-card:hover .catalog-card__image img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .pdp-cross-sell .catalog-card__image img,
    .pdp-cross-sell .catalog-card:hover .catalog-card__image img {
        transition: none;
        transform: none;
    }
}

/* No featured SKU at all: the same stage fill, so the tile is quietly empty
   rather than a grey slab that reads as a failure. */
.pdp-cross-sell .catalog-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--pdp-stage);
}

.pdp-cross-sell .catalog-card__info {
    padding: 0.6875rem 0.75rem 0;
    text-align: left;
}

.pdp-cross-sell .catalog-card__name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pdp-ink);
}

.pdp-cross-sell .catalog-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--pdp-ink-3);
}

.pdp-cross-sell .catalog-card__commerce {
    padding: 0.1875rem 0.75rem 0.6875rem;
    text-align: left;
}

.pdp-cross-sell .catalog-card__price {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pdp-ink-2);
}

.pdp-cross-sell .catalog-card__price--original {
    margin-right: 0.35rem;
    font-weight: 400;
    color: var(--pdp-ink-3);
    text-decoration: line-through;
}

/* Sale price uses the brand's TEXT role (EB red, MM gold-brown), not the fill
   role — this is coloured type on white and has to clear AA on its own. */
.pdp-cross-sell .catalog-card__price--sale {
    color: var(--pdp-accent-ink);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .pdp-cross-sell__head {
        margin-bottom: var(--pdp-gap-sm);
    }

    .pdp-cross-sell__heading {
        font-size: 1.125rem;
    }

    /* The controls are the affordance at this width — there is no visible
       scrollbar and no room for one — so they shrink rather than disappear. */
    .pdp-cross-sell__btn {
        width: 32px;
        height: 32px;
    }

    .pdp-cross-sell__btn svg {
        width: 16px;
        height: 16px;
    }
}


/* -----------------------------------------------------------------------
   Similar products (Jesse, 2026-09-09): the same rail, compact, in the right
   column under the description. Narrower cards so three fit the column; the
   module still turns it into a Swiper when the cards overflow.
   ----------------------------------------------------------------------- */
.pdp-cross-sell--similar .pdp-cross-sell__heading {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pdp-ink-3);
}

.pdp-cross-sell--similar .pdp-cross-sell__head {
    margin-bottom: 10px;
}

.pdp-cross-sell--similar .pdp-cross-sell__item,
.pdp-cross-sell--similar .pdp-cross-sell__item.swiper-slide {
    width: 132px;
}

@media (min-width: 768px) {
    .pdp-cross-sell--similar .pdp-cross-sell__item,
    .pdp-cross-sell--similar .pdp-cross-sell__item.swiper-slide {
        width: 132px;
    }
}

.pdp-cross-sell--similar .catalog-card__name {
    font-size: 12px; /* was 11px; 12px floor — WAVE "very small text" (2026-09-22) */
    line-height: 1.3;
}

.pdp-cross-sell--similar .catalog-card__price {
    font-size: 12px;
    margin-bottom: 0.35rem;
}

.pdp-cross-sell--similar .catalog-card__description {
    display: none;
}

.pdp-cross-sell--similar .catalog-card__flag {
    font-size: 12px; /* was 9px; 12px floor — WAVE "very small text" (2026-09-22) */
    padding: 3px 6px;
}