/* ==========================================
   RELATED PRODUCTS
========================================== */

/* Normal top padding so the section (and its ghost watermark) sits clear of the
   product banner above. related-products.css loads only on the product-detail
   page, so this stays scoped to the PDP. */
.related-products-section {
    padding-top: 40px;
}
@media (max-width: 991px) { .related-products-section { padding-top: 28px; } }
@media (max-width: 575px) { .related-products-section { padding-top: 20px; } }

.related-products-section .container {
    position: relative;
}

/* Slider Wrapper */
.related-slider-wrapper {
    position: relative;
    padding: 0 44px;
    overflow: visible;
}

/* Slider */
.related-slider {
    padding-bottom: 32px;
}

.related-slider .slick-list {
     overflow: hidden;;
}

.related-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.related-slider .slick-slide {
    height: inherit;
}

.related-slider .slick-slide > div {
    height: 100%;
}

.related-slider .product-item {
    padding: 0 8px;
    display: flex;
    height: auto;
}

.related-slider .product {
    width: 100%;
    height: 100%;
}

.related-slider .product {
    height: 100%;
}

/* CARD titles — uniform height in the slider. Scoped to .product so it does NOT
   squash the section <h2> heading (which must keep the big ghost-watermark style). */
.related-slider .product .title {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* SECTION heading — mirror the redesigned sections: centre the ghost watermark
   (the base rule pins it left:0/right:0 so it spills right of a short title) +
   capitalize, so "Related Products" / ghost "Related" reads clean and centred. */
.related-products-section .section-header { margin-bottom: 40px; }
.related-products-section .title-center .title { text-transform: capitalize; }
.related-products-section .title-center .title::before {
    left: 50%;
    right: auto;
    width: max-content;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Button */
.related-slider .product-btn {
    padding: 12px;
    margin-top: auto;
}

.related-slider .product-btn .btn {
    width: 100%;
    border-radius: 11px;        /* match the redesigned card CTA (style.css) */
}

/* Loads after style.css on the detail page, so align the related-slider CTA
   hover with the unified near-black fill instead of the old amber. */
.related-slider .product:hover .product-btn .btn {
    background:#E89A0E;
     
}

/* Slider Navigation */
.related-slider .slider-nav-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 10;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #fff;
    color: #374151;
    font-size: 15px;
    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.related-slider .slider-nav-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.related-slider .nav-left {
    left: 4px;
}

.related-slider .nav-right {
    right: 4px;
}

/* Slider Dots */
.related-slider .slick-dots {
    bottom: 0;
}

.related-slider .slick-dots li button:before {
    font-size: 8px;
    color: #d1d5db;
    opacity: 1;
}

.related-slider .slick-dots li.slick-active button:before {
    color: #374151;
}

/* Responsive */
@media (max-width: 1024px) {
    .related-slider-wrapper {
        padding: 0;
    }

    .related-slider .slider-nav-btn {
        display: none !important;
    }
}