/*----------------------------------------*/
/*  HOME — LATEST PRODUCTS                 */
/*  Figma: Frame 588 477-11222             */
/*  Full-width row of white product tiles, */
/*  arrows left and progress pills right.  */
/*----------------------------------------*/

.product-featured {
    position: relative;
    padding: clamp(90px, 8.3vw, 160px) 0;
    background-color: var(--rd-surface);
}

.product-featured,
.product-featured * {
    font-family: var(--rd-ff);
}


/*--------------------*/
/* - LAYOUT           */
/*--------------------*/
/* the block runs the full width of the page, inset by the gutter only */
.product-featured .container {
    --bs-gutter-x: 0;
    max-width: none;
    width: 100%;
    padding: 0 var(--rd-gutter);
}

.product-featured .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: block;
    margin: 0;
}

.product-featured .col-custom,
.product-featured [class*="col-"] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.product-featured .block-title,
.product-featured-swiper {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/*--------------------*/
/* - HEADLINE         */
/*--------------------*/
.product-featured .block-title {
    margin-bottom: 40px;
    text-align: left;
}

.product-featured .block-title > *:not(:last-child) {
    margin-bottom: 12px;
}

.product-featured .block-title .title {
    margin: 0;
    font-size: clamp(36px, 2.7vw, 52px);
    line-height: 1;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    text-align: left;
    text-transform: none;
}

/* the design carries no standfirst; it stays available for the editor */
.product-featured .block-title .text {
    max-width: 678px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--rd-txt-on-light-muted);
    text-align: left;
}


/*--------------------*/
/* - PRODUCT CARD     */
/*--------------------*/
.product-featured-swiper .swiper-slide {
    height: 300px;
}

/* The listing card is built for a taller bordered tile — min-height 310px,
   a padding-bottom aspect hack on .preview and an absolutely placed cover
   image. All of it has to come off, or the image inflates the box and
   pushes the caption out of the card. */
.product-featured .product-entry .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding: 16px;
    border: 0;
    border-radius: var(--rd-radius);
    background-color: var(--rd-white);
}

.product-featured .product-entry .preview {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

.product-featured .product-entry .preview img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* the design gives the caption a fixed 44px slot, two lines then ellipsis */
.product-featured .product-entry .title-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
}

.product-featured .product-entry .title-wrapper > *:not(:last-child) {
    margin-bottom: 0;
}

.product-featured .product-entry .title-wrapper .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    text-align: center;
    text-transform: none;
}

/* Not part of the design's card. The subtitle also carries the `caption`
   class, and style.css has `.product-entry .title-wrapper .caption
   {display:block}` at the same specificity — and loads later — so this
   needs one class more to win. */
.product-featured .product-entry .title-wrapper .subtitle,
.product-featured .product-entry .title-wrapper .caption {
    display: none;
}

/* Kept from the old block: the quote/configure actions the design does not
   draw, because they only surface on hover. */
.product-featured .product-entry .animation {
    gap: 10px;
    border-radius: var(--rd-radius);
    background-color: rgba(32, 32, 32, .82);
}

.product-featured .product-entry .animation > *:not(:first-child) {
    display: block;
}

.product-featured .product-entry .animation .btn {
    min-width: 0;
    height: 42px;
    /* the link inside fills the whole button, so all of it is clickable */
    padding: 0;
    border: 1px solid var(--rd-accent);
    border-radius: var(--rd-radius);
    background-color: var(--rd-accent);
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

.product-featured .product-entry .animation .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 18px;
    white-space: nowrap;
    color: inherit;
}

@media (min-width: 1200px) {
    .product-featured .product-entry .animation .btn:hover {
        border-color: var(--rd-white);
        background-color: var(--rd-white);
        color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - CONTROLS         */
/*--------------------*/
.product-featured-swiper .swiper-controls-wrapp {
    margin: 40px 0 0;
}

.product-featured .swiper-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.product-featured .swiper-controls > *:not(:last-child) {
    margin-right: 0;
}

.product-featured .swiper-button-prev,
.product-featured .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 54px;
    height: 54px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--rd-radius);
    transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

.product-featured .swiper-button-prev {
    order: 1;
    border-color: rgba(0, 0, 0, .06);
    background-color: transparent;
    transform: rotate(180deg);
}

.product-featured .swiper-button-next {
    order: 2;
    background-color: var(--rd-white);
    transform: none;
}

.product-featured .swiper-button-prev i,
.product-featured .swiper-button-next i {
    position: absolute;
    inset: 0;
    /* style.css centres this icon with translate(-50%,-50%); with inset:0
       that would shove it half a button up and to the left */
    transform: none;
    width: auto;
    height: auto;
}

.product-featured .swiper-button-prev i {
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / 20px 20px;
}

.product-featured .swiper-button-next i {
    background: url("../../img/redesign/icons/arrow-cta-accent.svg") no-repeat center / 20px 20px;
}

.product-featured .swiper-button-prev i::before,
.product-featured .swiper-button-next i::before,
.product-featured .swiper-button-prev i::after,
.product-featured .swiper-button-next i::after {
    content: none;
}

@media (min-width: 1200px) {
    .product-featured .swiper-button-prev:hover {
        border-color: var(--rd-border-on-light);
    }

    .product-featured .swiper-button-next:hover {
        background-color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - PAGINATION       */
/*--------------------*/
/* style.css gives `.swiper-pagination-relative` a 50px top margin at this
   same specificity, which drops the pills below the arrows' centre line */
.product-featured .swiper-controls .swiper-pagination {
    position: static;
    order: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: auto;
    margin: 0 0 0 auto;
    transform: none;
}

/* style.css pins the bullet margin with !important and draws a 2px dark
   ring around every bullet — both have to come off for the pills. */
.product-featured .swiper-pagination-bullet {
    width: 64px;
    height: 4px;
    margin: 0 !important;
    border: 0;
    border-radius: 12px;
    background: var(--rd-line-on-light);
    opacity: 1;
    transition: width var(--rd-transition), background-color var(--rd-transition);
}

.product-featured .swiper-pagination-bullet:hover {
    background: var(--rd-border-on-light);
}

.product-featured .swiper-pagination-bullet-active,
.product-featured .swiper-pagination-bullet-active-main,
.product-featured .swiper-pagination-bullet-active:hover {
    width: 120px;
    background: var(--rd-accent);
}

/* the block uses dynamic bullets, which scale the neighbours down —
   the design keeps every pill the same size */
.product-featured .swiper-pagination-bullet-active-prev,
.product-featured .swiper-pagination-bullet-active-prev-prev,
.product-featured .swiper-pagination-bullet-active-next,
.product-featured .swiper-pagination-bullet-active-next-next {
    transform: scale(1);
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    .product-featured {
        padding: 80px 0;
    }

    .product-featured .block-title {
        margin-bottom: 32px;
    }

    .product-featured-swiper .swiper-slide {
        height: 260px;
    }

    .product-featured-swiper .swiper-controls-wrapp {
        margin-top: 32px;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    .product-featured {
        padding: 60px 0;
    }

    .product-featured-swiper .swiper-slide {
        height: 240px;
    }

    .product-featured .swiper-button-prev,
    .product-featured .swiper-button-next {
        width: 46px;
        height: 46px;
    }

    /* the pills don't fit beside the arrows at this width, and the arrows
       already say where you are — phones get the arrows only */
    .product-featured .swiper-controls .swiper-pagination {
        display: none;
    }
}