/* Hunting Holsters: related / upsell product slider on the dark product page. */
.hh-pdp-related {
    --hr-card: var(--color-surface);
    --hr-line: var(--color-line);
    --hr-text: var(--color-fg);
    --hr-muted: var(--color-fg-secondary);
    --hr-accent: var(--color-primary, #ffc000);
    position: relative;
    background: radial-gradient(50rem 20rem at 85% 0%, rgba(255, 192, 0, .06), transparent 70%),
        var(--color-surface) !important;
    color: var(--hr-text) !important;
    border-top: 1px solid var(--color-line);
}

/* Reuse the homepage drag behavior while touch keeps native scrolling. */
.hh-pdp-related .snap-track {
    cursor: grab;
}

.hh-pdp-related .snap-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.hh-pdp-related .snap-track.is-dragging * {
    cursor: grabbing;
}

/* Section heading */
.hh-pdp-related .product-slider h2 {
    position: relative;
    padding-top: 1.6rem;
    color: var(--color-fg);
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: uppercase;
}

.hh-pdp-related .product-slider h2::before {
    content: "You may also like";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--hr-accent);
    font-family: var(--font-sans, "Barlow", sans-serif);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .18em;
}

html[lang="es"] .hh-pdp-related .product-slider h2::before {
    content: "También te puede interesar";
}

/* Prev / next */
.hh-pdp-related .product-slider [data-prev],
.hh-pdp-related .product-slider [data-next] {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: transparent;
    color: var(--color-fg);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.hh-pdp-related .product-slider [data-prev]:not(:disabled):hover,
.hh-pdp-related .product-slider [data-next]:not(:disabled):hover {
    border-color: var(--hr-accent);
    background: var(--hr-accent);
    color: var(--color-fg);
}

.hh-pdp-related .product-slider [data-prev]:disabled,
.hh-pdp-related .product-slider [data-next]:disabled {
    opacity: .35;
}

.hh-pdp-related .product-slider [data-prev] svg,
.hh-pdp-related .product-slider [data-next] svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Cards */
.hh-pdp-related .hh-product {
    border-color: var(--hr-line) !important;
    background: var(--hr-card) !important;
    color: var(--hr-text) !important;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.hh-pdp-related .hh-product:hover {
    border-color: rgba(255, 192, 0, .5) !important;
    box-shadow: none;
    transform: translateY(-3px);
}

.hh-pdp-related .hh-product .product-item-link {
    color: var(--color-fg);
}

.hh-pdp-related .hh-product:hover .product-item-link {
    color: var(--hr-accent);
}

.hh-pdp-related .hh-product .border-line {
    border-color: var(--color-line) !important;
}

.hh-pdp-related .hh-product .text-ink-muted {
    color: var(--hr-muted) !important;
}

.hh-pdp-related .hh-product .price {
    color: var(--color-fg);
}

.hh-pdp-related .hh-product .old-price .price {
    color: var(--color-fg-secondary);
    font-size: 1.125rem;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.hh-pdp-related .hh-product .old-price {
    display: block;
    margin-top: .1rem;
    line-height: 1;
}

/* Let price and action wrap within narrow slider cards. */
.hh-pdp-related .hh-product-purchase {
    flex-wrap: wrap;
    min-width: 0;
}

.hh-pdp-related .hh-product-purchase .hh-btn {
    max-width: 100%;
}

@media (max-width: 639px) {
    .hh-pdp-related .hh-product-purchase .hh-btn {
        flex-grow: 1;
    }
}

/* Customise button: outlined on dark, fills amber on hover */
.hh-pdp-related .hh-product .hh-btn-dark {
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-fg);
}

.hh-pdp-related .hh-product:hover .hh-btn-dark {
    border-color: var(--hr-accent);
}

/* Compact pagination: a single row, with full-height interactive markers. */
.hh-pdp-related .snap-pager {
    flex-wrap: nowrap;
    gap: 0;
}

.hh-pdp-related .snap-pager .snap-marker {
    display: inline-grid;
    place-items: center;
    inline-size: calc(var(--spacing) * 3);
    block-size: calc(var(--spacing) * 11);
    border: 0;
    background: transparent;
    transition: none;
    will-change: auto;
}

.hh-pdp-related .snap-marker::before {
    content: "";
    inline-size: calc(var(--spacing) * 2);
    block-size: calc(var(--spacing) * 2);
    border-radius: calc(var(--spacing) * 2);
    background: var(--hr-muted);
}

.hh-pdp-related .snap-pager .snap-marker[aria-current="true"] {
    inline-size: calc(var(--spacing) * 5);
}

.hh-pdp-related .snap-marker[aria-current="true"]::before {
    inline-size: calc(var(--spacing) * 4);
    background: var(--hr-accent);
}

.hh-pdp-related .snap-marker:hover::before,
.hh-pdp-related .snap-marker:focus-visible::before {
    background: var(--hr-accent);
}

.hh-pdp-related .snap-marker:focus-visible {
    outline: calc(var(--spacing) / 2) solid var(--hr-accent);
    outline-offset: calc(var(--spacing));
}

@media (prefers-reduced-motion: reduce) {
    .hh-pdp-related .hh-product {
        transition: none;
    }

    .hh-pdp-related .hh-product:hover {
        transform: none;
    }
}