/*
 * db-styled-carousel.css v1.1.6
 *
 * Styles the native mmx-product-carousel web component to match
 * the Delicious Boutique site theme using CSS ::part() selectors.
 *
 * The .featured-products heading and .frill are rendered in the Light DOM
 * and styled by the existing global styles.css — no overrides needed here.
 */

/* ── Outer wrapper — clip overflowing carousel nav arrows ── */
.db-styled-carousel {
	width: 100%;
	clear: both;
	overflow: hidden;
}

/* ── Push carousel below the frill, prevent overlap ──
   margin-left:16px compensates for Splide's internal 16px track offset
   which shifts all slides 16px to the left at tablet and desktop.
   At mobile (< 40em, 1 slide per page) Splide does not apply the track
   offset, so margin-left must be 0 to avoid the image shifting right.
   margin-right:-16px + overflow:hidden on outer wrapper clips the right side.
   ── */
.db-styled-carousel .db-styled-carousel__carousel {
	display: block;
	margin-top: 20px !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media screen and (min-width: 40em) {
	.db-styled-carousel .db-styled-carousel__carousel {
		margin-left: 16px !important;
		margin-right: -16px !important;
	}
}

/* ── Product name ── */
mmx-product-carousel.db-styled-carousel__carousel::part(product-name) {
	font-family: Lato, sans-serif !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	color: #b93832 !important;
	text-align: center !important;
	margin: 20px 0 15px 0 !important;
}

/* ── Product prices container — controls alignment of price span ── */
mmx-product-carousel.db-styled-carousel__carousel::part(product-prices) {
	text-align: center !important;
	margin: 0 0 10px 0 !important;
}

/* ── Product price span — slightly smaller than name for visual hierarchy ── */
mmx-product-carousel.db-styled-carousel__carousel::part(product-price) {
	font-family: Lato, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #b93832 !important;
}

/* ── Button host — responsive width, never wider than card ── */
mmx-product-carousel.db-styled-carousel__carousel::part(button) {
	display: block !important;
	width: 90% !important;
	max-width: 300px !important;
	margin: 0 auto 20px auto !important;
	height: 33px !important;
}

/* ── Button inner anchor ─────────────────────────────────────────────────────
   exportparts="button: button__inner" on mmx-button makes this reachable.
   Absolute URL required — relative paths break from Miva's compiled CSS path.
   ──────────────────────────────────────────────────────────────────────────── */
mmx-product-carousel.db-styled-carousel__carousel::part(button__inner) {
	background-image: url('https://www.deliciousboutique.com/mm5/graphics/store-button-background.jpg') !important;
	background-color: transparent !important;
	background-size: cover !important;
	color: #ffffff !important;
	font-family: Lato, sans-serif !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	height: 33px !important;
	min-height: unset !important;
	padding: 0 15px !important;
	border-radius: 0 !important;
	letter-spacing: normal !important;
	border: none !important;
	box-sizing: border-box !important;
	line-height: 33px !important;
}

/* ── Wrapper — transparent bg ── */
mmx-product-carousel.db-styled-carousel__carousel::part(wrapper) {
	background: transparent !important;
	padding: 0 !important;
}

/* ── Divider lines between product cards ─────────────────────────────────
   MMX applies padding-left:16px to each slide by default, which offsets
   all card content 16px to the right. Setting padding-left:0 removes this
   and lets content fill the full card width correctly.
   border-left draws at the left edge of each slide. The first card's
   border-left is at position -16 (off screen), clipped by the outer
   overflow:hidden wrapper — so only dividers between cards are visible.
   ────────────────────────────────────────────────────────────────────────── */
mmx-product-carousel.db-styled-carousel__carousel::part(hero_slide) {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
	box-shadow: none !important;
	border-right: none !important;
	border-left: 1px solid #000000 !important;
	overflow: hidden !important;
}

/* ── Slider — no padding ── */
mmx-product-carousel.db-styled-carousel__carousel::part(slider) {
	padding: 0 !important;
}