/* ==========================================================================
   Product Sections (New & Featured / Bestsellers)
   Figma: 1920 × 1084px
   Title at top 130px, slider at top 223px (gap 55px below title)
   ========================================================================== */
/* Figma: section 1084px tall, title at y=130px, slider at y=223px, bottom gap ~126px */
.product-section {
    padding: 130px 0 131px;
}

#bestsellers {
    padding-top: 112px;
    padding-bottom: 137px;
}

/* Figma: 38px Bold #272727, letter-spacing 1.9px, centered */
.product-section .section-title {
    font-size: 38px;
    letter-spacing: 1.9px;
    margin-bottom: 55px;
}

/* ==========================================================================
   Product Card
   Figma card layout (vertical, measured from image top):
   - Image: 0 → 437.829px (374.067px wide)
   - Name: 462.12px (24.3px gap below image)
   - Price: 533.76px (71.64px below name top)
   - ATC button: 597.52px (63.76px below price top)
   - Fav icon: top 16.74px, right 31.459px from card edge
   ========================================================================== */

.product-card__image {
    aspect-ratio: 374.067 / 437.829;
}

/* Image + name link to the product page; inherit the card's appearance. */
.product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.product-card__name-link {
    color: inherit;
    text-decoration: none;
}
.product-card__name-link:hover {
    color: var(--secondary);
}


/* Figma: 34.648px circle, top 16.74px, right 31.459px */
.product-card__fav {
    top: 16.74px;
    right: 31.459px;
    width: 34.648px;
    height: 34.648px;
    background: var(--white);
    color: #707070;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: color 0.2s;
}

.product-card__fav:hover {
    color: var(--secondary);
}

/* Figma: 24.3px gap below image, no background — gray section shows through */
.product-card__info {
    flex: 1;
    padding: 24.3px 5px 0;
}

/* Figma: 19px Medium #707070, left-aligned, 71.64px from name top to price top */
.product-card__name {
    font-size: 19px;
    color: #707070;
    line-height: 1.3;
    min-height: 50px;
}

/* Figma: 23.152px Medium, left-aligned */
.product-card__pricing {
    margin-top: 20px;
    margin-bottom: 14px;
}

/* Figma: 23.152px Medium #333, tracking 0.8103px */
.product-card__price {
    font-size: 23.152px;
    letter-spacing: 0.8103px;
    line-height: 1;
}


/* Figma: strikethrough on its own line, 16.537px Light #7e7e7e */
.product-card__price--was {
    font-size: 16.537px;
    text-decoration: line-through;
    letter-spacing: 0.8269px;
    line-height: 1;
    margin-top: 1px;
}

/* Figma: 220.774 × 43.824px, bg #d31346, radius 28.114px, 18.703px Medium white
   63.76px below price top ≈ ~20px below price bottom */
.product-card__atc {
    width: 220.774px;
    height: 43.824px;
    font-size: 18.703px;
    transition: background-color 0.2s;
}

.product-card__atc:hover {
    background-color: #a8102f;
}

/* ==========================================================================
   Swiper — edge-to-edge, offset via JS slidesOffsetBefore/After
   ========================================================================== */

.product-swiper .swiper-slide {
    width: 374.067px;
    height: auto;
}

/* Figma: scrollbar left 141px (7.344%), width 1633.994px
   Right edge = 1775px → right margin = 145px (7.552%)
   Positioned at very bottom of 735px slider (top 730px)
   Content ends at ~641px → gap ~89px above scrollbar */
.product-swiper .product-swiper__scrollbar.swiper-scrollbar {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    width: auto;
    margin-left: 7.344%;
    margin-right: 7.552%;
    margin-top: 60px;
    height: 6.8px;
    background: var(--gray-200);
    border-radius: 3.4px;
}

.product-swiper__scrollbar .swiper-scrollbar-drag {
    background: var(--gray-500);
    border-radius: 3.4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439px) {
    .product-section {
        padding: 90px 0 70px;
    }
    .product-section .section-title {
        margin-bottom: 40px;
    }
    .product-swiper .swiper-slide {
        width: 300px;
    }
    .product-card__atc {
        width: 100%;
    }
    .product-swiper .product-swiper__scrollbar.swiper-scrollbar {
        margin-top: 40px;
    }
}

@media (max-width: 1199px) {
    .product-swiper .swiper-slide {
        width: 260px;
    }
    .product-section .section-title {
        font-size: 30px;
    }
}

@media (max-width: 991px) {
    .product-section {
        padding: 60px 0 60px;
    }
    .product-swiper .swiper-slide {
        width: 240px;
    }
    .product-section .section-title {
        margin-bottom: 30px;
    }
    .product-swiper .product-swiper__scrollbar.swiper-scrollbar {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .product-section {
        padding: 50px 0;
    }
    .product-swiper .swiper-slide {
        width: 270px;
    }
    .product-section .section-title {
        margin-bottom: 19px;
        font-size: 25px;
    }
    .product-card__image {
        aspect-ratio: 269 / 254;
    }
    .product-card__name {
        font-size: 16px;
        min-height: 42px;
    }
    .product-card__price {
        font-size: 18px;
        letter-spacing: 0.63px;
    }
    .product-card__price--was {
        font-size: 13px;
        letter-spacing: 0.455px;
    }
    .product-card__atc {
        width: 178px;
        height: 35px;
        font-size: 16px;
        letter-spacing: 0.8px;
        border-radius: 34px;
    }
    .product-card__fav {
        width: 28px;
        height: 28px;
        top: 10px;
        right: 10px;
    }
    .product-card__info {
        padding: 13px 4px 0;
    }
    .product-swiper .product-swiper__scrollbar.swiper-scrollbar {
        margin-top: 20px;
        margin-left: 16px;
        margin-right: 14px;
    }
    #bestsellers {
        padding-top: 47px;
        padding-bottom: 94px;
    }
    #bestsellers .section-title {
        margin-bottom: 22px;
    }
}