/**
 * BFR-1938 — related category links under a category PLP.
 *
 * Styled to the Figma "SEO-bottom-links" (Dekel, 2026-10-26): a rule across
 * the listing, a "Shop More" title in the storefront's Playfair Display, then a
 * left-aligned row of compact grey cards, each an uppercase category name with
 * an arrow at its top right. On a phone the row swipes, the next card peeking
 * in at the edge. Sizes are taken from the 1440px and 375px frames.
 */

.BfPlpRelated {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 20px 48px;
    position: relative;
    width: 100%;
}

/* The rule across the listing; inside the padding, so it lines up with the grid. */
.BfPlpRelated::before {
    background: #d9d9d9;
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 28px;
}

.BfPlpRelated__title {
    color: #010101;
    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 14px;
    text-transform: none;
}

/*
 * The track. A native scroller with scroll-snap, so it swipes, scrolls on a
 * trackpad and moves with the keyboard without any script; the arrows are an
 * addition, not the mechanism.
 */
.BfPlpRelated__list {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 2px;
    scroll-behavior: smooth;
    /* Matches the padding, or the snap lands 2px in and "previous" shows at rest. */
    scroll-padding: 0 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.BfPlpRelated__list::-webkit-scrollbar {
    display: none;
}

/* Cards from the left at the Figma's width, giving a little so the desktop
   cap of eight fits the listing without the slider; only a row that still
   does not fit at 120px becomes one. */
.BfPlpRelated__item {
    flex: 0 1 147px;
    margin: 0;
    min-width: 120px;
    scroll-snap-align: start;
}

.BfPlpRelated__link {
    align-items: flex-start;
    background: #ececec;
    border-radius: 0;
    box-sizing: border-box;
    color: #010101;
    display: flex;
    flex-direction: row;
    /* The product grid's and the footer's face, not the body's Raleway. */
    font-family: Poppins, sans-serif;
    gap: 8px;
    height: 100%;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 10px 10px 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.BfPlpRelated__name {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.BfPlpRelated__go {
    flex: none;
    height: 16px;
    transition: transform 0.2s ease;
    width: 16px;
}

.BfPlpRelated__link:hover,
.BfPlpRelated__link:focus-visible {
    background: #dcdcdc;
    color: #010101;
    text-decoration: none;
}

.BfPlpRelated__link:hover .BfPlpRelated__go,
.BfPlpRelated__link:focus-visible .BfPlpRelated__go {
    transform: translateX(4px);
}

.BfPlpRelated__link:focus-visible {
    outline: 2px solid #010101;
    outline-offset: 3px;
}

/*
 * The arrows.
 *
 * Every rule is written as `.BfPlpRelated button.BfPlpRelated__arrow` for a
 * reason: Elementor's global kit styles every button on the site — border,
 * 20px radius, colour, and its own :hover and :focus — from an inline
 * `.elementor-kit-N button` selector. One class loses to it, and its :hover
 * (0,2,1) would beat a two-class rule too, so each property it touches is
 * reset here at a weight it cannot reach.
 */
.BfPlpRelated button.BfPlpRelated__arrow {
    align-items: center;
    background: #fff;
    border: 1px solid #e3dfdb;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(1, 1, 1, 0.12);
    box-sizing: border-box;
    color: #010101;
    cursor: pointer;
    display: flex;
    font-size: 0;
    height: 44px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-height: 0;
    padding: 0;
    position: absolute;
    text-transform: none;
    top: calc(1px + 28px + 30px + 14px + 4px + 30px);
    transform: translateY(-50%);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    width: 44px;
    z-index: 2;
}

.BfPlpRelated button.BfPlpRelated__arrow.__prev {
    left: 4px;
}

.BfPlpRelated button.BfPlpRelated__arrow.__next {
    right: 4px;
}

.BfPlpRelated button.BfPlpRelated__arrow.__prev .BfPlpRelated__arrowIcon {
    transform: rotate(180deg);
}

.BfPlpRelated button.BfPlpRelated__arrow:hover,
.BfPlpRelated button.BfPlpRelated__arrow:focus,
.BfPlpRelated button.BfPlpRelated__arrow:active {
    background: #010101;
    border-color: #010101;
    box-shadow: 0 2px 10px rgba(1, 1, 1, 0.12);
    color: #fff;
}

.BfPlpRelated button.BfPlpRelated__arrow:focus {
    outline: none;
}

.BfPlpRelated button.BfPlpRelated__arrow:focus-visible {
    outline: 2px solid #010101;
    outline-offset: 3px;
}

/* `hidden` must win over the display: flex above. */
.BfPlpRelated button.BfPlpRelated__arrow[hidden] {
    display: none;
}

/*
 * The mobile cap.
 *
 * Every link the desktop cap allows is in the HTML, and the phone hides the
 * overflow. That is not a shortcut — this page is cached at the edge, where a
 * single response serves both devices, so a server-side choice between four
 * links and eight would be made by whoever happened to warm the cache. CSS is
 * the only place the decision can be made per device.
 *
 * The breakpoint is the header's, so the block changes at the same width as
 * the navigation it belongs to. On a phone the cards are a swipe, with the
 * next one peeking in to say so; the arrows would only cover them.
 */
@media (max-width: 782px) {
    .BfPlpRelated {
        padding: 0 0 36px;
    }

    .BfPlpRelated::before {
        margin: 0 16px 24px;
    }

    .BfPlpRelated__title {
        font-size: 21px;
        margin: 0 16px 12px;
    }

    .BfPlpRelated__list {
        gap: 10px;
        padding: 4px 16px;
        scroll-padding: 0 16px;
    }

    .BfPlpRelated__item {
        flex: 0 0 132px;
    }

    .BfPlpRelated__item.__beyondPhone {
        display: none;
    }

    .BfPlpRelated__link {
        min-height: 51px;
        padding: 8px 8px 8px 10px;
    }

    .BfPlpRelated button.BfPlpRelated__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .BfPlpRelated__list {
        scroll-behavior: auto;
    }

    .BfPlpRelated__link,
    .BfPlpRelated__go,
    .BfPlpRelated button.BfPlpRelated__arrow {
        transition: none;
    }
}