/* PDP related products carousel — brand styling
   Plain CSS (not compiled from scss/). Loaded after style.css on single products.
   Brand colors: blue #06205c, green #8ea00f, gray #414042 */

/* The PLP paints its cards against .holder-filter-page's white-to-grey
   gradient. The PDP has the same gradient on .site-main, but this section sits
   at the bottom of it where it has already faded to white, so white cards had
   almost no contrast. Giving the section its own copy of the gradient restores
   the PLP's separation. */
.related-products-section {
    position: relative;
    z-index: 2;
    padding: 10px 0 50px;
    /* No background of its own — the section shows the PDP's own .site-main
       gradient, so it reads as part of the page rather than a separate band. */
}

.related-products-section .container {
    max-width: 100%;
}

.related-products-title {
    margin-bottom: 30px;
    text-align: center;
}

.related-products-title h2 {
    color: #06205c;
    font-family: 'Russo One', 'industry', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    margin: 0;
}

/* cards are rendered by content-product.php, which tags them with AOS.
   Slides parked outside the viewport never get animated in, so they would stay
   invisible when you page the carousel — opt these cards out of AOS. */
.related-products-slider [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Card internals are styled by rules scoped to the shop archive wrapper
   (.holder-filter-page .products .product …), which does not exist here, so the
   cards fall back to the theme's unscoped defaults — grey card, green button —
   or to WooCommerce's own grey a.button. Everything below mirrors the live PLP
   (verified on /footballs/pro/ufl) so the cards read identically.

   PLP card is white; the unscoped .product .holder-product default is #f4f4f4. */
/* The PDP's .site-main gradient has faded to near-white by the time it reaches
   this section, so a plain white card has no edge. The theme is flat (one
   box-shadow in the whole stylesheet), so the separation is carried by a
   hairline in the theme's own grey, with a very soft shadow for depth. */
.related-products-slider .product .holder-product {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(6, 32, 92, 0.015);
    transition: box-shadow 0.3s ease-in-out;
}

.related-products-slider .product:hover .holder-product {
    box-shadow: 0 2px 10px rgba(6, 32, 92, 0.035);
}

.related-products-slider .product .button {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: inherit;
    border-radius: 50px;
    font-weight: bold;
    background: transparent;
    padding: 15px;
    color: #06205c;
    text-decoration: none;
    letter-spacing: 0.7px;
    min-width: 158px;
    text-align: center;
    /* PLP overrides the theme's green border to blue with !important */
    border: 1px solid #3e87d7;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    /* WooCommerce's own a.button rule zeroes the theme's margin-left, so the
       gap between price and button has to be restated here */
    margin: 0 0 15px 50px;
}

.related-products-slider .product .button:hover,
.related-products-slider .product .button:focus {
    background-color: #3e87d7;
    border-color: #3e87d7;
    color: #fff;
}

/* Same reason as the button, but this one needs the extra .holder-bottom step:
   WooCommerce's `div.product span.price` rule scores 0,3,2 and would otherwise
   win and tint the price olive. PLP values: #414042, 16px, weight 300. */
.related-products-slider .product .holder-bottom .price,
.related-products-slider .product .holder-bottom .price .amount,
.related-products-slider .product .holder-bottom .price bdi {
    color: #414042;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.03px;
}

/* PLP image framing. The 20px image-holder padding comes from a rule scoped to
   `.products .product .wc-img-holder`, and these cards are not inside a
   .products wrapper, so they would keep the theme's much larger 70px padding
   and render a visibly smaller image than the shop. */
.related-products-slider .product .wc-img-holder {
    padding: 20px;
}

.related-products-slider .product .woocommerce-loop-product__link img {
    margin: 0 auto;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.related-products-slider .product .added_to_cart {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    font-weight: bold;
    color: #06205c;
}

/* before slick initialises, show the first cards side by side instead of a
   full-width stack, so there is no layout jump on load.
   The negative margin lives on .slick-list once slick takes over — leaving it
   on the slider itself makes the row 24px wider than the container and the
   page scrolls sideways. */
.related-products-slider {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    margin: 0 -12px;
}

.related-products-slider > .product {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 12px;
}

/* Side gutters hold the arrows, so they never sit on top of a card.
   The gallery slider can overlay its arrows because they land on a product
   photo; here they would cover titles and prices. */
.related-products-slider.slick-initialized {
    display: block;
    overflow: visible;
    margin: 0;
    /* arrow width + the 12px the slick-list bleeds into the gutter + 2px */
    padding: 0 46px;
}

.related-products-slider.slick-initialized > .product {
    max-width: none;
    padding: 0;
}

.related-products-slider .slick-list {
    overflow: hidden;
    margin: 0 -12px;
}

/* equal-height cards: flex track, and flex-shrink: 0 so the slides keep the
   pixel widths slick assigns them (a shrinking slide squeezes on resize).
   margin: 0 auto centres a short row — with fewer products than slots the
   track is narrower than the list, and would otherwise hug the left edge. */
.related-products-slider .slick-track {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
}

/* min-width: 0 is required: as flex items the slides default to min-width:auto,
   so a long product title makes a slide wider than the pixel width slick
   assigned it and the track overflows the page. flex-shrink: 0 keeps that
   width from collapsing on resize. */
.related-products-slider .slick-slide {
    float: none;
    height: auto;
    flex-shrink: 0;
    min-width: 0;
    padding: 0 12px;
}

.related-products-slider .slick-slide > div,
.related-products-slider .slick-slide .product,
.related-products-slider .slick-slide .holder-product {
    height: 100%;
}

/* arrows — same quiet treatment as the product gallery slider */
.related-products-slider .slick-arrow {
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(6, 32, 92, 0.12);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    transition: background-color 0.3s, border-color 0.3s;
}

.related-products-slider .slick-arrow:hover,
.related-products-slider .slick-arrow:focus {
    background-color: #06205c;
    border-color: #06205c;
    outline: none;
}

.related-products-slider .slick-arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #06205c;
    border-right: 1px solid #06205c;
    transition: border-color 0.3s;
}

.related-products-slider .slick-arrow:hover:after,
.related-products-slider .slick-arrow:focus:after {
    border-bottom-color: #fff;
    border-right-color: #fff;
}

/* Parked in the slider's side gutter, clear of the cards. */
.related-products-slider .slick-arrow.slick-prev {
    left: 0;
}

.related-products-slider .slick-arrow.slick-prev:after {
    transform: translate(-30%, -50%) rotate(135deg);
}

.related-products-slider .slick-arrow.slick-next {
    right: 0;
}

.related-products-slider .slick-arrow.slick-next:after {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.related-products-slider .slick-arrow.slick-disabled {
    opacity: 0.3;
    cursor: default;
}

/* dots — same bar treatment as the PDP gallery slider: grey bars, green when
   active, and slick's default round button chrome fully suppressed so only one
   set of markers shows */
.related-products-slider .slick-dots {
    display: flex;
    justify-content: center;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

/* display: block, not the default list-item: inside the content area the theme
   gives li a bullet plus font-size 30px / line-height 36px, so the markers
   render a full line below the 2px bars and read as a second row of dots. */
.related-products-slider .slick-dots li {
    display: block;
    list-style: none;
    font-size: 0;
    line-height: 0;
    width: 25px;
    height: 2px;
    margin: 0 6px;
    padding: 0;
    background-color: #c3c4c6;
    cursor: pointer;
    transition: background-color 0.3s;
}

.related-products-slider .slick-dots li:before {
    display: none;
    content: none;
}

.related-products-slider .slick-dots li:hover {
    background-color: #06205c;
}

.related-products-slider .slick-dots li.slick-active {
    background-color: #8ea00f;
}

.related-products-slider .slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: none;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

.related-products-slider .slick-dots li button:before,
.related-products-slider .slick-dots li button:after {
    display: none;
    content: none;
}

@media (max-width: 619px) {

    .related-products-slider > .product {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* On phones the gutter costs too much of a single-card row, so the arrows
       overlay the card instead — same treatment as the PDP gallery slider. */
    .related-products-slider.slick-initialized {
        padding: 0;
    }

    .related-products-slider .slick-arrow.slick-prev {
        left: 12px;
    }

    .related-products-slider .slick-arrow.slick-next {
        right: 12px;
    }
}

@media (min-width: 768px) {

    .related-products-section {
        padding: 20px 0 80px;
    }

    .related-products-title {
        margin-bottom: 40px;
    }

    .related-products-title h2 {
        font-size: 30px;
    }
}

/* same step as the gallery slider: 32 -> 36 at 900 -> 40 at 1100.
   The gutter grows with them so the arrows always clear the cards. */
@media (min-width: 900px) {

    .related-products-slider.slick-initialized {
        padding: 0 50px;
    }

    .related-products-slider .slick-arrow {
        width: 36px;
        height: 36px;
    }

    .related-products-slider .slick-arrow:after {
        width: 8px;
        height: 8px;
    }
}

@media (min-width: 1100px) {

    .related-products-slider.slick-initialized {
        padding: 0 54px;
    }

    .related-products-slider > .product {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }

    .related-products-slider .slick-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1400px) {

    .related-products-slider > .product {
        flex-basis: 25%;
        max-width: 25%;
    }
}