/**
 * Carousel theming tokens and card/container styles.
 *
 * Theme-able values are declared as CSS custom properties on the
 * .cwc-carousel container at normal specificity (D6), so a theme or a later
 * slice can override them (via wp_add_inline_style) without re-compiling
 * assets (FA-3, CR-3). Swiper's 16px spaceBetween mirrors --cwc-gap.
 */

/**
 * Title tokens live at :root (not on .cwc-carousel) because the title <h2>
 * renders as a SIBLING of the carousel container — container-scoped custom
 * properties never resolve there, which silently drops the title's margin,
 * font-size and color.
 */
:root {
	--cwc-color-title: #1a1a1a;
	--cwc-title-font-size: 1.5rem;
	--cwc-title-gap: 24px; /* Breathing room below the section title. */
}

/**
 * Theme compatibility overrides.
 *
 * Astra (and similar block-enabled themes) apply max-width and auto-margins
 * to direct children of .entry-content[data-ast-blocks-layout], which
 * constrains the carousel to the content width and breaks the slide layout.
 * We reset those inherited constraints so the carousel fills the available
 * width inside its parent container.
 */
[data-ast-blocks-layout] > .cwc-carousel,
[data-ast-blocks-layout] > .cwc-carousel-shell {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.cwc-carousel {
	/* Colors. */
	--cwc-color-text: #1a1a1a;
	--cwc-color-border: #e5e5e5;
	--cwc-color-background: #ffffff;
	--cwc-color-accent: #96588a; /* WooCommerce default primary. */

	/* Borders. */
	--cwc-border-radius: 4px;
	--cwc-border-width: 1px;

	/* Gap (mirrors Swiper spaceBetween: 16). */
	--cwc-gap: 16px;

	/* Cover mode (FA-6): single overlay opacity, theme-overridable. */
	--cwc-cover-overlay-opacity: 0.45;

	/* Typography. */
	--cwc-font-family: inherit;
	--cwc-font-size: 1rem;

	margin: 0 0 calc( var( --cwc-gap ) * 2 );
	font-family: var( --cwc-font-family );
	font-size: var( --cwc-font-size );
	color: var( --cwc-color-text );
}

.cwc-carousel__title {
	margin: 0 0 var( --cwc-title-gap );
	color: var( --cwc-color-title );
}

.cwc-carousel__title--center {
	text-align: center;
}

.cwc-carousel__title--right {
	text-align: right;
}

.cwc-card {
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	border: var( --cwc-border-width ) solid var( --cwc-color-border );
	border-radius: var( --cwc-border-radius );
	background-color: var( --cwc-color-background );
}

.cwc-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cwc-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.cwc-card__image--placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var( --cwc-color-border );
}

.cwc-card__title {
	margin: 0;
	padding: calc( var( --cwc-gap ) * 0.75 ) calc( var( --cwc-gap ) * 0.75 ) 0;
	font-size: var( --cwc-font-size );
	line-height: 1.4;
	color: var( --cwc-color-text );
}

.cwc-card__price {
	padding: calc( var( --cwc-gap ) * 0.5 ) calc( var( --cwc-gap ) * 0.75 )
		calc( var( --cwc-gap ) * 0.75 );
	color: var( --cwc-color-text );
}

.cwc-card__category-line {
	margin: 0;
	padding: 0 calc( var( --cwc-gap ) * 0.75 );
	font-size: 0.85em;
	color: var( --cwc-color-title );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cwc-card__buy {
	display: inline-block;
	margin: 0 calc( var( --cwc-gap ) * 0.75 ) calc( var( --cwc-gap ) * 0.75 );
	padding: calc( var( --cwc-gap ) * 0.375 ) calc( var( --cwc-gap ) * 0.75 );
	border-radius: var( --cwc-border-radius );
	background-color: var( --cwc-color-accent );
	color: var( --cwc-color-background );
	text-decoration: none;
}

.cwc-category-card {
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	border: var( --cwc-border-width ) solid var( --cwc-color-border );
	border-radius: var( --cwc-border-radius );
	background-color: var( --cwc-color-background );
}

.cwc-category-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cwc-category-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.cwc-category-card__image--placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var( --cwc-color-border );
}

/**
 * Cover mode (FA-6): 7/12 cards with a full-bleed image, a single-opacity
 * overlay and a centered white title. Scoped to .cwc-carousel--cover so
 * non-cover category carousels and product cards keep today's layout.
 */
.cwc-carousel--cover .cwc-category-card {
	position: relative;
	aspect-ratio: 7 / 12;
}

.cwc-carousel--cover .cwc-category-card__link {
	position: absolute;
	inset: 0;
}

.cwc-carousel--cover .cwc-category-card__image,
.cwc-carousel--cover .cwc-category-card__image--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cwc-carousel--cover .cwc-category-card__overlay {
	position: absolute;
	inset: 0;
	background-color: #000000;
	opacity: var( --cwc-cover-overlay-opacity );
}

.cwc-carousel--cover .cwc-category-card__cover-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: calc( var( --cwc-gap ) * 0.75 );
	font-size: var( --cwc-font-size );
	line-height: 1.4;
	color: #ffffff;
	text-align: center;
}

/**
 * Nav-arrow positioning and theming (CR-11, FA-9).
 *
 * Bottom-right is the DEFAULT corner: it targets the unclassed container (D6),
 * so legacy markup keeps its class-less wrapper. The three modifier classes
 * restyle the same buttons for the other corners. Color tokens wire through
 * the --cwc-nav-color-* variables the renderer emits per non-empty key
 * (CR-11), with fallbacks to the theme tokens (FA-3): the arrow glyph keeps
 * the accent color and the background/border stay transparent when unset, so
 * today's look survives for legacy carousels.
 */
.cwc-carousel .swiper-button-prev,
.cwc-carousel .swiper-button-next {
	box-sizing: border-box;
	top: auto;
	bottom: 16px;
	margin-top: 0;
	width: 40px;
	height: 40px;
	background-color: var( --cwc-nav-color-bg, transparent );
	border: 1px solid var( --cwc-nav-color-border, transparent );
	border-radius: var( --cwc-border-radius );
	color: var( --cwc-nav-color-arrow, var( --cwc-color-accent ) );
}

.cwc-carousel .swiper-button-prev {
	left: auto;
	right: 64px;
}

.cwc-carousel .swiper-button-next {
	right: 16px;
}

.cwc-carousel .swiper-button-prev:hover,
.cwc-carousel .swiper-button-next:hover {
	background-color: var( --cwc-nav-color-bg-hover, var( --cwc-nav-color-bg, transparent ) );
	border-color: var( --cwc-nav-color-border-hover, var( --cwc-nav-color-border, transparent ) );
	color: var( --cwc-nav-color-arrow-hover, var( --cwc-nav-color-arrow, var( --cwc-color-accent ) ) );
}

.cwc-carousel--nav-bottom-left .swiper-button-prev {
	left: 16px;
	right: auto;
}

.cwc-carousel--nav-bottom-left .swiper-button-next {
	left: 64px;
	right: auto;
}

.cwc-carousel--nav-top-right .swiper-button-prev,
.cwc-carousel--nav-top-right .swiper-button-next {
	top: 16px;
	bottom: auto;
}

.cwc-carousel--nav-top-right .swiper-button-prev {
	left: auto;
	right: 64px;
}

.cwc-carousel--nav-top-right .swiper-button-next {
	right: 16px;
}

.cwc-carousel--nav-top-left .swiper-button-prev,
.cwc-carousel--nav-top-left .swiper-button-next {
	top: 16px;
	bottom: auto;
}

.cwc-carousel--nav-top-left .swiper-button-prev {
	left: 16px;
	right: auto;
}

.cwc-carousel--nav-top-left .swiper-button-next {
	left: 64px;
	right: auto;
}

/**
 * Side modes (CR-11 amendment, PR 6).
 *
 * sides-inside: the container keeps the modifier class and the arrows stay
 * inside `.swiper`; Swiper positions them absolutely, so the rules here only
 * re-center them at the vertical middle of the track and push them to the
 * edges (bottom: auto / top: 50% + translateY so the 40px button is exactly
 * centered, not its top edge). These selectors share the corner rules'
 * specificity (0,2,0), so they MUST come after them in the stylesheet to
 * win the cascade; they do not touch the corner modifiers.
 *
 * sides-outside: the renderer wraps the carousel in a
 * `.cwc-carousel-shell` flex wrapper with the buttons as flanking SIBLINGS
 * of `.swiper` (D6 amendment), so the base `.cwc-carousel .swiper-button-*`
 * rules never reach them. The shell rules give the buttons the same 40px
 * themed look, strip Swiper's absolute positioning (position: static, the
 * buttons become ordinary flex items), and lay the track out as
 * [prev] [slider] [next] with the slider taking the free space. The shell
 * carries the --cwc-nav-color-* variables and inherits the theme tokens
 * (FA-3), so the color wiring matches the corner modes.
 */
.cwc-carousel--nav-sides-inside .swiper-button-prev,
.cwc-carousel--nav-sides-inside .swiper-button-next {
	top: 50%;
	bottom: auto;
	margin-top: 0;
	transform: translateY( -50% );
}

.cwc-carousel--nav-sides-inside .swiper-button-prev {
	left: 16px;
	right: auto;
}

.cwc-carousel--nav-sides-inside .swiper-button-next {
	left: auto;
	right: 16px;
}

.cwc-carousel-shell {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --cwc-gap );
	margin: 0 0 calc( var( --cwc-gap ) * 2 );
}

/* The slider takes the free space; the buttons keep their own size. */
.cwc-carousel-shell .cwc-carousel {
	flex: 1 1 0%;
	min-width: 0;
	margin-bottom: 0;
}

.cwc-carousel-shell .swiper-button-prev,
.cwc-carousel-shell .swiper-button-next {
	box-sizing: border-box;
	position: static;
	top: auto;
	margin-top: 0;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background-color: var( --cwc-nav-color-bg, transparent );
	border: 1px solid var( --cwc-nav-color-border, transparent );
	border-radius: var( --cwc-border-radius );
	color: var( --cwc-nav-color-arrow, var( --cwc-color-accent ) );
}

.cwc-carousel-shell .swiper-button-prev:hover,
.cwc-carousel-shell .swiper-button-next:hover {
	background-color: var( --cwc-nav-color-bg-hover, var( --cwc-nav-color-bg, transparent ) );
	border-color: var( --cwc-nav-color-border-hover, var( --cwc-nav-color-border, transparent ) );
	color: var( --cwc-nav-color-arrow-hover, var( --cwc-nav-color-arrow, var( --cwc-color-accent ) ) );
}

.cwc-carousel .swiper-pagination-bullet-active {
	background-color: var( --cwc-color-accent );
}


/**
 * Mobile: nav arrows on the sides, vertically centered (cwc-mobile-side-nav).
 * Overrides the default bottom-right corner on small screens only; desktop
 * keeps its configured position. Same (0,2,0) specificity as the base rules,
 * placed last so the media query wins when it matches.
 */
@media (max-width: 600px) {
	.cwc-carousel .swiper-button-prev,
	.cwc-carousel .swiper-button-next {
		top: 50%;
		bottom: auto;
		margin-top: 0;
		transform: translateY( -50% );
	}

	.cwc-carousel .swiper-button-prev {
		left: 8px;
		right: auto;
	}

	.cwc-carousel .swiper-button-next {
		left: auto;
		right: 8px;
	}
}