.swiper-slide {
    height: auto;
}

.tpproduct {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Fixed-ratio image box (square). Change to 4/3 if you prefer. */
.tpproduct__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* use 4 / 3 if needed */
    overflow: hidden;
    border-radius: 12px; /* match your theme */
    backface-visibility: hidden; /* anti-flicker */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* anti-flicker */
}

    /* Anchor fills the thumb box */
    .tpproduct__thumb > a.tpproduct__img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Fill the box and crop nicely */
    .tpproduct__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .25s ease; /* subtle zoom on hover (optional) */
        will-change: transform;
    }

.tpproduct:hover .tpproduct__thumb img {
    transform: scale(1.03);
}

/* Ensure hover overlays etc. inside thumb don’t affect layout height */
/* (we removed .tpproduct__thumb-img entirely) */
.tpproduct__thumb .tpproduct__info,
.tpproduct__thumb .tpproduct__shopping {
    position: absolute;
    z-index: 2;
}

/* Content area with consistent height; price stays aligned at the bottom */
.tpproduct__content {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 12px 10px;
    min-height: 120px; /* tune if your titles are longer */
}

/* Brand (weight) line */
.tpproduct__content-weight a {
    font-size: .95rem;
    color: #666;
    text-decoration: none;
}

/* Title: clamp to 2 lines to keep rows even */
.tpproduct__title {
    margin: 0;
    line-height: 1.25;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2); /* reserves space for 2 lines */
}

/* Price row sits at the bottom of the card */
.tpproduct__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

    .tpproduct__price > span {
        font-weight: 700;
    }

    .tpproduct__price del {
        color: #999;
        font-size: .9em;
    }


.tpproduct-btn__prv {
    left: -36px;
}

.tpproduct-btn__nxt {
    right: -36px;
}

@media (max-width: 576px) {
    .tpproduct-btn__prv {
        left: 8px;
    }

    .tpproduct-btn__nxt {
        right: 8px;
    }
}
.tpproduct__arrow .swiper-button-next,
.tpproduct__arrow .swiper-button-prev {
    display: none !important;
}
/* Keep card layout stable */
.weekly-product-area .swiper-slide {
    height: auto;
}

.weekly-product-area .tpproduct {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Center slides automatically when Swiper is "locked" (few items) — cross-version class names */
.swiper.swiper-lock .swiper-wrapper,
.swiper-container.swiper-container-lock .swiper-wrapper,
.swiper-container.swiper-container-locked .swiper-wrapper {
    justify-content: center;
}

/* Default wrapper alignment */
.weekly-product-area .tpproduct__arrow .swiper-wrapper {
    align-items: stretch;
    justify-content: flex-start;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
    /* Let content breathe at edges */
    .weekly-product-area .tpproduct__arrow .swiper-container {
        padding: 0 10px;
    }

    /* Smaller radii & padding for compact cards */
    .weekly-product-area .tpproduct__thumb {
        border-radius: 10px;
    }

    .weekly-product-area .tpproduct__content {
        padding: 10px 8px;
        gap: 4px;
        min-height: auto; /* let it flow on small screens */
    }

    /* Tighter typography */
    .weekly-product-area .tpproduct__title {
        font-size: .95rem;
        -webkit-line-clamp: 2;
    }

    .weekly-product-area .tpproduct__price {
        gap: .35rem;
    }

    /* Buttons fill width for easy tapping */
    .weekly-product-area .tpproduct__hover-btn .tp-btn-2 {
        width: 100%;
    }

    /* Hide desktop arrows on phones; show pagination dots instead */
    .weekly-product-area .tpproduct-btn {
        display: none !important;
    }

    .weekly-product-area .swiper-pagination {
        display: block;
        position: relative;
        margin-top: 10px;
    }
}

/* Hide mobile pagination above XS */
@media (min-width: 576px) {
    .weekly-product-area .swiper-pagination {
        display: none !important;
    }
}

/* Make nav arrows hug edges on small tablets if you decide to show them */
@media (min-width: 576px) and (max-width: 991.98px) {
    .weekly-product-area .tpproduct-btn__prv {
        left: 8px;
    }

    .weekly-product-area .tpproduct-btn__nxt {
        right: 8px;
    }
}