/**
 * BurnOut Italy — splide slider styles
 *
 * Loaded on pages that render a carousel (home, PDP, category, cart,
 * brand, search) via the boi_slider_assets update handle in the
 * burnout layout. PDP AutoRelated vertical (stacked column, no splide)
 * is styled at the bottom.
 */

/* Neutralize the global category-grid layout when the list wears the
   `products-grid` class inside a splide track. default.css sets
   `.products-grid { display: grid; grid-template-columns: repeat(N, 1fr) }`
   for PLP; splide assigns its own per-slide widths instead. The two
   fight unless we reset the grid properties here.                     */
.itemslider.products-grid,
.splide__list.products-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
}

/* Force every slide in a splide row to the same height, regardless of
   content variance — flex-grow:auto on the inner .item (see below)
   pushes the price to the bottom inside each card.                    */
.itemslider .splide__list { align-items: stretch; }

/* ─── product card frame + hover swap image ───────────────────────── */

.itemslider .product-image {
    position: relative;
    display: block;
    overflow: hidden;
}
.itemslider .product-image .alt-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.itemslider .product-image:hover .alt-img { opacity: 1; }

/* 1:1 thumbnail frame — every card is the same height regardless of
   source-image aspect ratio. object-fit: contain shows the full product
   silhouette; the white background fills the gap when aspect ratios
   don't match. The primary <img> inherits the absolute fill from the
   .product-image ancestor above.                                      */
.itemslider .product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    border-radius: var(--r-sm);
}
.itemslider .product-image-wrapper .product-image,
.itemslider .product-image-wrapper .product-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.itemslider .product-image-wrapper .product-image > img {
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* ─── card chrome ─────────────────────────────────────────────────── */

/* min-width: 0 is critical. Without it, every card inherits the
   flex/grid default `min-width: auto`, meaning it cannot shrink
   below its own min-content width (the longest word in the product
   name). A card with "SHARK RACE-R PRO CARBON CARBON SKIN HELMET"
   thus refuses to be narrower than ~180px, ignoring the width Splide
   tries to set, and steals space from the neighbouring cards → the
   irregular-width bug. Forcing min-width: 0 lets every slide respect
   the width Splide assigns (or the grid's 1fr slot).

   max-width caps the card so CMS blocks that declare a tiny `per-row`
   count (e.g. breakpoints="[0, 1], [320, 2], [480, 3]" inside a half-
   width column) don't produce oversized cards. Every slider converges
   on roughly the same max card width regardless of its own perPage. */
.itemslider .item.splide__slide,
.splide__list.products-grid .item {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;                  /* allow shrinking below content min-width */
    max-width: 240px;              /* upper ceiling — uniform across sliders */
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
/* Inner text blocks must also opt out of min-content sizing, otherwise
   a long unbreakable word inside .product-name would push the min-
   content width of the card back up. */
.itemslider .item .product-name,
.itemslider .item .product-name a { min-width: 0; }
.itemslider .item.splide__slide:hover,
.splide__list.products-grid .item:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* ─── locked zones inside the card ────────────────────────────────── */
/* Reserve identical vertical space for every sub-block so variation in
   name length / swatch count / sale presence doesn't change card
   height. Anything exceeding the lock is clipped with overflow:hidden. */

.itemslider .item .product-name {
    margin: 10px 0 4px;
    padding: 0 4px;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    height: 2.6em;              /* exactly two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.itemslider .item .configurable-swatch-list {
    margin: 4px 0;
    padding: 0 4px;
    height: 34px;               /* exactly one row (20px swatch + margins) */
    flex-wrap: nowrap;
    overflow: hidden;
}
.itemslider .item .configurable-swatch-list li { margin: 2px; }
/* The configurableswatches template renders inline style="height:32px;min-width:32px"
   on .swatch-link plus inline height/line-height on .swatch-label — that 32px swatch
   bleeds past the 34px row container and gets clipped at the bottom. Force the
   slider-specific compact 20×20 sizing past the inline styles. */
.itemslider .item .configurable-swatch-list .swatch-link {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-bottom: 0;
}
.itemslider .item .configurable-swatch-list .swatch-label {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
}
.itemslider .item .configurable-swatch-list .swatch-link.has-image img {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.itemslider .item .price-box {
    margin-top: auto;           /* pushed to the card bottom */
    padding: 0 4px 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    height: 2.2em;              /* exactly one row, special + old side-by-side */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
.itemslider .item .price-box .special-price,
.itemslider .item .price-box .regular-price    { order: 1; margin: 0; }
.itemslider .item .price-box .old-price        { order: 2; margin: 0; }
.itemslider .item .price-box .special-price .price,
.itemslider .item .price-box .regular-price    { font-size: var(--fs-md); }
.itemslider .item .price-box .old-price .price { font-size: var(--fs-xs); }
.itemslider .item .price-box .price-label      { display: none; }

/* ─── itemslider inside megamenu dropdown ─────────────────────────── */
/* splide-init.js forces perPage: 5 for sliders inside .nav-panel--dropdown,
   but the slides still span whatever the dropdown width is (typically
   full viewport, ~1700px). Cap the card visuals — image, name, price,
   swatches — so each card stays compact and feels proportional to the
   adjacent category grid rather than dominating the panel. */
.nav-panel--dropdown .itemslider:not(.megamenu-featured-slider) .product-image,
.nav-panel--dropdown .itemslider:not(.megamenu-featured-slider) .product-image-wrapper {
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
}
.nav-panel--dropdown .itemslider:not(.megamenu-featured-slider) .product-image img {
    max-height: 120px;
    object-fit: contain;
}
.nav-panel--dropdown .itemslider .product-name {
    font-size: var(--fs-xs);
    padding: 0 6px;
    margin: 6px 0 3px;
    line-height: 1.25;
}
.nav-panel--dropdown .itemslider .price-box { font-size: var(--fs-xs); padding: 0 6px; }
.nav-panel--dropdown .itemslider .price-box .special-price .price,
.nav-panel--dropdown .itemslider .price-box .regular-price    { font-size: var(--fs-sm); }
.nav-panel--dropdown .itemslider .price-box .old-price .price { font-size: 10px; }
.nav-panel--dropdown .itemslider .configurable-swatch-list { padding: 0 6px; display: none; }
.nav-panel--dropdown .itemslider .ribbon-corner { transform: scale(0.7); transform-origin: top right; }

/* ─── itemslider vertical (no splide) ─────────────────────────────── */
/* Used by the AutoRelated right-column slot (product view page).
   Stacks normal product cards in a vertical column.                */

.itemslider-wrapper--vertical {
    padding: 20px 0 0;
    border-top: 1px solid var(--c-border);
    margin-top: 20px;
}

.aw-arp-block-title {
    margin-bottom: 15px;
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-align: center;           /* Center title relative to cards */
}

.itemslider--vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.itemslider--vertical .item {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 4px;                 /* Even more compact padding */
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: 0;
    max-width: 150px;              /* Further reduced width */
    margin: 0 auto;                /* Center in sidebar */
    width: 100%;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.itemslider--vertical .item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.itemslider--vertical .item .product-image-wrapper {
    width: 100%;
    max-width: 90px;              /* Smaller image = less height */
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.itemslider--vertical .item .product-name {
    margin: 4px 0 2px;
    height: auto;
    font-size: 10px;               /* Smaller font */
    line-height: 1.2;
    -webkit-line-clamp: 2;
}

.itemslider--vertical .item .price-box {
    margin-top: 4px;
    font-size: 10px;
}

.itemslider--vertical .item .configurable-swatch-list {
    display: flex;
    transform: scale(0.85);        /* Shrink swatches */
    transform-origin: left center;
    height: 28px;
}