/*
 * Mighty Kids — Product Showcase block
 *
 * The card/ribbon/filter/value-bar visual treatment lives in mk-shop.css
 * (with .mk-showcase added as a scope). This file only holds what is
 * UNIQUE to the block: outer wrapper layout, heading typography, Swiper
 * carousel layout, navigation arrows, pagination dots, CTA, empty state.
 * Do NOT re-declare card/ribbon/filter styles here — that desyncs the
 * block from /shop/.
 */

/* ============================================================================
   WRAPPER
   ============================================================================ */
.mk-showcase {
	/* Outer bottom spacing only — horizontal padding/width comes from
	   ul.products and .mk-shop-value-bar rules so the inner layout
	   matches /shop/ pixel-for-pixel. */
	margin: 0 auto 48px;
	box-sizing: border-box;
}

/* ============================================================================
   OPTIONAL HEADER (heading + subheading) — only rendered when the editor
   fills these fields. Shop page doesn't use them, so they have no archive
   counterpart.
   ============================================================================ */
.mk-showcase__header {
	text-align: center;
	margin: 0 0 24px;
}

.mk-showcase__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 12px;
	color: #0f1e2e;
}

.mk-showcase__subtitle {
	font-size: 1rem;
	color: #5a6775;
	margin: 0 auto;
	max-width: 60ch;
	line-height: 1.5;
}

/* Hide filtered products / slides (used in both grid and carousel). */
.mk-showcase .mk-filter-hidden {
	display: none !important;
}

/* mk-wc-blocks.css (homepage product grid) globally forces
   `.wc-product-image { aspect-ratio: 1/1 !important }`. We want the 3:4
   shop aspect when the block is on the page, so override with higher
   specificity + important here. */
.mk-showcase ul.products li.product .wc-product-image {
	aspect-ratio: 3 / 4 !important;
	padding-bottom: 0 !important;
	height: auto !important;
}

/* Desktop (3-up carousel): the 3:4 image box otherwise caps at the thumbnail's
   400px natural height (mk-shop.css), which made the cards quite tall. Lower the
   cap so the cards are more compact; the bottle stays centered on the cream
   background via object-fit: contain. equalizeSlideHeights() in
   mk-product-showcase.js reflows the slide heights to match on load/resize. */
@media (min-width: 901px) {
	.mk-showcase--carousel ul.products li.product .wc-product-image {
		max-height: 320px !important;
	}
}

/* ============================================================================
   CAROUSEL (Swiper) — overrides and extras only. Card visuals come from
   mk-shop.css.
   ============================================================================ */

/* Swiper requires its wrapper to be flex. The shop CSS applies
   `display: grid !important` to .mk-showcase ul.products, so we override. */
.mk-showcase--carousel ul.products.swiper-wrapper {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	align-items: stretch !important;
}

/* Swiper sets slide widths via inline element.style.width. Inline styles
   beat any non-!important stylesheet rule, so WC layout's `width: 22.05%`
   cannot override them. We only need flex: 0 0 auto to suppress flex-grow.
   Margins: Swiper controls margin-right (spaceBetween); zero the rest so
   WooCommerce's default `margin: 0 0 2em` doesn't push slides out of view.

   The width/margin-right below only matter for the frames BEFORE Swiper
   initialises — once it does, its inline styles take over. They mirror
   Swiper's own sizing formula, fed by the --mk-spv-* / --mk-slide-gap custom
   properties that the renderer prints on the section, so the carousel paints
   at its final size instead of snapping when the JS lands. The breakpoints
   match the ones in the Swiper config (551 = tablet, 901 = desktop). */
.mk-showcase--carousel {
	--mk-spv: var(--mk-spv-mobile, 1.4);
}

@media (min-width: 551px) {
	.mk-showcase--carousel {
		--mk-spv: var(--mk-spv-tablet, 2);
	}
}

@media (min-width: 901px) {
	.mk-showcase--carousel {
		--mk-spv: var(--mk-spv-desktop, 3.7);
	}
}

.mk-showcase--carousel ul.products li.product.swiper-slide {
	flex: 0 0 auto;
	width: calc((100% - var(--mk-slide-gap, 24px) * (var(--mk-spv) - 1)) / var(--mk-spv));
	margin-right: var(--mk-slide-gap, 24px);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
}

.mk-showcase__carousel {
	position: relative;
	/* Arrows live in the control row below, so the cards use the full
	   container width (no side gutters). */
	margin: 0;
}

.mk-showcase__swiper-clip {
	/* Clip slides that overflow left/right (Swiper peek). Vertical breathing room
	   for the cards' shadow + hover lift is added as padding on .mk-showcase__swiper
	   below, so the shadow stays inside this element's content box and is never
	   clipped top/bottom by the (overflow-x: clip → overflow-y: auto) behaviour. */
	overflow-x: clip;
	overflow-y: visible;
	/* Size the carousel from its container, never from its (Swiper-sized)
	   contents. Without this, dropping the block inside a flexbox container
	   (e.g. a GenerateBlocks flex row on the homepage) lets the slides' huge
	   inline widths blow the flex item out to tens of thousands of px, since
	   a flex item's default `min-width: auto` won't shrink below content.
	   Inline-size containment breaks that feedback loop while leaving vertical
	   overflow (ribbons/shadows) intact. */
	contain: inline-size;
}

.mk-showcase__swiper {
	/* swiper-bundle.min.css is enqueued AFTER this file (in wp_footer) and sets
	   `.swiper { overflow: hidden; padding: 0 }` at the same specificity, so it wins
	   the cascade. We need !important here to actually apply: overflow:visible (don't
	   clip the cards' shadow) and vertical padding (breathing room so the shadow +
	   hover lift render fully instead of being clipped top/bottom). */
	overflow: visible !important;
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}

/* Mobile: bleed the carousel out to the content edges using the fixed 16px
   .site-content gutter, then inset the slides back by 16px with padding on
   .mk-showcase__swiper so the first card lines up exactly with the filter pills:
       slideLeft = clipLeft + swiperPaddingLeft = (containerLeft − 16) + 16 = containerLeft = filtersLeft.
   The inset is padding — NOT slidesOffsetBefore/After — so Swiper's loop keeps the
   active slide pinned to the left edge. Any slide offset trips Swiper's
   "bothDirections" loop mode, which pushes the first product off-screen for
   filters that have just enough slides to loop.
   The previous `width: 100vw; margin-left: calc(50% - 50vw)` pulled the cards
   ~half a scrollbar-width left of the filters and added a few px of horizontal
   page scroll, because 100vw includes the scrollbar. Controls row below stays
   within the padded width. */
@media (max-width: 768px) {
	.mk-showcase__swiper-clip {
		margin-left: -16px;
		margin-right: -16px;
	}
	.mk-showcase__swiper {
		/* Inset the slides by the 16px gutter (replaces slidesOffsetBefore/After).
		   !important to beat swiper-bundle.css's `.swiper { padding: 0 }`, which is
		   enqueued after this file. */
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Desktop/tablet: let the carousel bleed past the content container into the side
   gutters so the prev/next cards peek instead of being hard-cut at the container
   edge. The horizontal padding equals the side gutter, so the swiper inside stays
   at the content width and the cards stay aligned with the heading + filters above.
   The base overflow-x: clip then clips the peek at the viewport edge instead of the
   container edge.

   The bleed is the viewport MINUS the scrollbar, never a bare 100vw. 100vw includes
   a classic scrollbar, so on Safari for macOS (which draws one, unlike Chrome and
   Firefox with their overlay scrollbars) a bare 100vw is ~17px wider than the
   content area. .gb-container-b455d84f on the homepage is a flex item with the
   default min-width: auto, so it cannot shrink below that oversized child and the
   whole section gets dragged past the right edge of the window.

   --mk-sbw is measured in an inline head script (functions.php). It cannot be
   derived in CSS: calc(100vw - 100%) needs to resolve its percentage against the
   root, but an unregistered custom property re-resolves it against whatever element
   consumes it, and @property with syntax "<length>" rejects percentages outright
   and silently falls back to its initial value. The 0px fallback below reproduces
   the old behaviour if the script has not run yet. */
@media (min-width: 769px) {
	.mk-showcase__swiper-clip {
		box-sizing: border-box;
		--mk-bleed: calc(100vw - var(--mk-sbw, 0px));
		width: var(--mk-bleed);
		margin-left: calc(50% - var(--mk-bleed) / 2);
		padding-left: calc(var(--mk-bleed) / 2 - 50%);
		padding-right: calc(var(--mk-bleed) / 2 - 50%);
	}
}

/* Any GB container holding the showcase must be allowed to shrink below the
   viewport-wide clip. When such a container is a flex item, its min-width: auto
   minimum is built from the clip's min-content contribution, and Safari computes
   that contribution WITHOUT the unresolvable percentage-calc negative margins:
   the clip's full definite width propagates up and drags the flex item past the
   window edge (the homepage hero section at 1572px in a 1120px slot). Chromium
   and Firefox resolve the margin's percentage as 0 during intrinsic sizing, so
   the contribution stays small and the bug never shows there. min-width: 0
   removes the automatic minimum; flex-shrink then fits the item to its slot and
   the clip still bleeds via its own negative margins. Harmless on non-flex-item
   ancestors. */
.gb-container:has(.mk-showcase__swiper-clip) {
	min-width: 0;
}

/* Carousel slides: gentle hover lift with a downward, horizontally-tight shadow.
   The negative horizontal spread keeps the shadow inside the card's box width so
   the clip wrapper's overflow-x: clip can't slice it, while the downward blur
   renders fully thanks to overflow-y: visible. */
.mk-showcase--carousel ul.products li.product.swiper-slide:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.2) !important;
}
.mk-showcase--carousel ul.products li.product.swiper-slide:hover .wc-product-image img {
	transform: none !important;
}

/* GeneratePress/Woo inject an inline `transition: all 0.2s ease-in` on
   `.woocommerce ul.products li.product`. On filter change we swap the
   slide DOM and Swiper assigns a fresh inline `width`; the `all`
   transition animates that width change, making cards "grow" into place
   over ~250ms and shoving content below up and down. We don't want any
   size transition inside the carousel — only hover transform/shadow. */
.mk-showcase--carousel ul.products li.product.swiper-slide {
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Control row: arrows + dots grouped below the carousel. */
.mk-showcase__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.mk-showcase__pagination {
	/* Override Swiper's default position:absolute + width:100% so the dots sit
	   inline in the control row and the flex item hugs its bullets (keeping the
	   arrows grouped beside them rather than pushed to the row edges). */
	position: static !important;
	width: auto !important;
	margin: 0;
	text-align: center;
}

.mk-showcase__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	opacity: 0.3;
	background: #2c3e50;
	transition: opacity 0.2s, transform 0.2s;
}

.mk-showcase__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.2);
	background: #c98e1f;
}

.mk-showcase__nav {
	flex: 0 0 auto;
	z-index: 5;
	background: #fff;
	border: 1px solid #ddd;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	color: #2c3e50;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mk-showcase__nav:hover {
	background: #2c3e50;
	border-color: #2c3e50;
	color: #fff;
}

.mk-showcase__nav[aria-disabled="true"],
.mk-showcase__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ============================================================================
   CTA
   ============================================================================ */
.mk-showcase__cta {
	text-align: center;
	margin-top: 32px;
}

.mk-showcase__cta-btn {
	display: inline-block;
	background: #c98e1f;
	color: #fff;
	padding: 14px 32px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.mk-showcase__cta-btn:hover {
	background: #a37214;
	color: #fff;
	transform: translateY(-1px);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.mk-showcase__empty {
	text-align: center;
	padding: 48px 16px;
	color: #5a6775;
	font-style: italic;
}