/* Home page product sections: Featured Products, Flash Sale, Mega Sale
   (include/home-sections.php). Admin → Home Sections sets the values:
   --home-section-gap is the space between two sections (half above, half
   below each one; the first and last get the full gap on their outer side),
   --home-section-title-gap the space between a title and its cards. */
.mcdodo-featured-section.home-prod-section {
    padding: calc(var(--home-section-gap) / 2) 0;
}

.mcdodo-featured-section.home-prod-section--first {
    padding-top: var(--home-section-gap);
}

.mcdodo-featured-section.home-prod-section--last {
    padding-bottom: var(--home-section-gap);
}

/* The header spans the card row (card-carousel.css: max-width 1600px), and its
   side padding equals the row's padding + arrow column + gap + track padding,
   so a left or right title lines up with the edge of the first or last card.
   A flex box: as a text line it would grow to the page's line height around a
   small title and add a few pixels to the title gap. */
.mcdodo-featured-section.home-prod-section .section-header {
    display: flex;
    max-width: 1600px;
    margin: 0 auto var(--home-section-title-gap);
    padding: 0 80px;
    box-sizing: border-box;
}

/* min-width + overflow-wrap: a word wider than the screen (a big phone size
   in Admin → Home Sections) wraps inside the title instead of running off it */
.mcdodo-featured-section.home-prod-section .section-title {
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Title position: auto margins move the title, text-align its wrapped lines */
.mcdodo-featured-section.home-prod-section--align-left .section-title {
    margin-right: auto;
    text-align: left;
}

.mcdodo-featured-section.home-prod-section--align-center .section-title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mcdodo-featured-section.home-prod-section--align-right .section-title {
    margin-left: auto;
    text-align: right;
}

/* Fewer cards than one row: they sit under the title (left, centre or right).
   Auto margins collapse to 0 once the row is wider than the screen. */
.home-prod-section--align-center .mcdodo-products-slider > .mcdodo-product-card:first-child,
.home-prod-section--align-right .mcdodo-products-slider > .mcdodo-product-card:first-child {
    margin-left: auto;
}

.home-prod-section--align-center .mcdodo-products-slider > .mcdodo-product-card:last-child {
    margin-right: auto;
}

@media (max-width: 991px) {
    .mcdodo-featured-section.home-prod-section .section-header {
        padding: 0 64px;
    }
}

@media (max-width: 767px) {
    .mcdodo-featured-section.home-prod-section .section-header {
        padding: 0 46px;
    }
}