/* DB Race – Widget Cards Detail (prodotto/collezione) */

.dbrace-cards-detail-wrapper {
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.dbrace-cards-detail {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

.dbrace-card-detail {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	max-height: 685px;
}

.dbrace-card-detail--half .dbrace-card-detail__media--bg {
	flex: 0 0 431px;
	height: 431px;
	min-height: 431px;
	max-height: 431px;
}

/*  Altezza card Half | Full  */
.dbrace-card-detail--half-height {
	max-height: 340px;
	height: fit-content;
}

.dbrace-card-detail--full-height {
	min-height: 680px;
}

/* .dbrace-card-detail--half-height .dbrace-card-detail__title {
	font-size: 24px;
} */

.dbrace-card-detail--half-height .dbrace-card-detail__description {
	font-size: 14px;
}

.dbrace-card-detail--half-height .dbrace-card-detail__content {
	gap: 6px !important;
	height: auto !important;
}

.dbrace-card-detail--full-height .dbrace-card-detail__media--bg,
.dbrace-card-detail--full-height .dbrace-card-detail__content,
.dbrace-card-detail--full-height .dbrace-card-detail__body {
	flex-grow: 1;
}

/* Width: dal campo ACF "width" */
.dbrace-card-detail--full {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}

/* Full width: due div dedicati — testo a sinistra, immagine grande a destra */
.dbrace-card-detail--full .dbrace-card-detail__content {
	box-sizing: border-box;
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 80px 80px 80px;
	gap: 24px;
}

/* Immagine come background center / no-repeat / cover (card full e half) */
.dbrace-card-detail__media--bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dbrace-card-detail--full .dbrace-card-detail__media--bg {
	flex: 1 1 50%;
	min-height: 320px;
	width: 629;
}

/*  Posizione immagine: SOLO card full (layout orizzontale)  */

.dbrace-card-detail--full.dbrace-card-detail--image-right .dbrace-card-detail__content,
.dbrace-card-detail--full.dbrace-card-detail--image-right .dbrace-card-detail__body,
.dbrace-card-detail--full.dbrace-card-detail--image-left .dbrace-card-detail__content,
.dbrace-card-detail--full.dbrace-card-detail--image-left .dbrace-card-detail__body {
	order: 1;
}

/* Immagine a destra */
.dbrace-card-detail--full.dbrace-card-detail--image-right .dbrace-card-detail__media {
	order: 2;
}

/* Immagine a sinistra */
.dbrace-card-detail--full.dbrace-card-detail--image-left .dbrace-card-detail__media {
	order: 0;
}

/*  Posizione immagine nel carousel  */
.dbrace-carousel__row--image-right .dbrace-carousel__media {
	order: 2;
}

/* Trattino rosso tra titolo e descrizione (tutte le card) */
.dbrace-card-detail__divider {
	display: block;
	flex: 0 0 auto;
	width: 80px;
	height: 2px;
	margin: 12px 0;
	background: #8b2218;
}

/* Background: dal campo ACF "background_cards" */
.dbrace-card-detail--dark {
	background: #1a1816;
	color: #fff;
}

.dbrace-card-detail--dark .dbrace-card-detail__title {
	color: #fff;
}

.dbrace-card-detail--dark .dbrace-card-detail__description {
	color: rgba(255, 255, 255, 0.75);
}

.dbrace-card-detail--light {
	background: #f2f2f2;
	color: #1a1816;
}

.dbrace-card-detail--white {
	background: #fff;
	color: #1a1816;
}

.dbrace-card-detail__media {
	width: 100%;
	overflow: hidden;
}

.dbrace-card-detail__body {
	display: flex;
	flex-direction: column;
	padding: 32px 80px 48px 80px;
	gap: 16px;
}

.dbrace-card-detail__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.dbrace-card-detail__title+.dbrace-card-detail__divider {
	margin-top: 8px;
}

.dbrace-card-detail__description {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.dbrace-cards-detail-placeholder {
	padding: 20px;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

/* Carosello dal ripetitore ACF "carousel" */
.dbrace-carousel {
	width: 100%;
	margin-top: 16px;
	box-sizing: border-box;
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	padding-right: 0px;
	background: #f2f2f2;
	border-radius: 8px;

}

.dbrace-carousel__viewport {
	width: 100%;
	overflow: hidden;
}

.dbrace-carousel__track {
	display: flex;
	gap: 16px;
	transition: transform 0.3s ease;
}

.dbrace-carousel__slide {
	box-sizing: border-box;
	/* Striscia continua: la slide successiva resta adiacente visibile */
	flex: 0 0 calc(100% - 160px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background: #f2f2f2;
	border-radius: 8px;
	/* Fuori focus: tutto il contenuto al 50% finché non si naviga */
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.dbrace-carousel__slide.is-active {
	opacity: 1;
}

.dbrace-carousel__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1a1816;
}

.dbrace-carousel__divider {
	display: block;
	flex: 0 0 auto;
	width: 80px;
	height: 2px;
	background: #8b2218;
}

.dbrace-carousel__row {
	display: flex;
	align-items: center;
	gap: 24px;
}

.dbrace-carousel__media {
	flex: 0 0 40%;
	height: 360px;
	width: 360px;
	min-width: 0;
}

.dbrace-carousel__row {
	display: flex;
	height: 100%;
}

/* Senza descrizione: l'immagine occupa tutto lo spazio */
.dbrace-carousel__row--no-desc .dbrace-carousel__media {
	width: 100%;
	flex: 1 1 100%;
	height: 100%;
}

/* Immagine carosello come background center / no-repeat / cover */
.dbrace-carousel__media--bg {
	height: 360px;
	width: 360px;
	border-radius: 8px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dbrace-carousel__desc {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #1a1816;
}

.dbrace-carousel__nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	padding: 0px 32px 0px 32px;
}

.dbrace-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: transparent;
	border: 0;
	color: #000;
	cursor: pointer;
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
	color: #000;
}

.dbrace-carousel__arrow:hover {
	background: transparent;
	color: #000;
}

.dbrace-carousel__arrow svg {
	display: block;
	width: 32px;
	height: 24px;
}

.dbrace-carousel__arrow:disabled {
	opacity: 0.5;
	cursor: default;
}

.dbrace-cards-detail--padding-20p {
	gap: 20px;
}

.dbrace-cards-detail--padding-30p {
	gap: 30px;
}
.dbrace-cards-detail--padding-40px {
	gap: 40px;
}

@media (max-width: 767px) {
	.dbrace-cards-detail {
		grid-template-columns: 1fr;
	}

	.dbrace-card-detail--half .dbrace-card-detail__media--bg {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: 1 / 1;
	}

	.dbrace-card-detail__body {
		padding: 24px 16px 32px;
		gap: 12px;
	}

	.dbrace-card-detail__title,
	.dbrace-carousel__title {
		font-size: 28px;
		line-height: 1.15;
	}

	.dbrace-card-detail__description,
	.dbrace-carousel__desc {
		font-size: 16px;
		line-height: 1.5;
	}

	.dbrace-card-detail--half-height {
		max-height: none;
		height: auto;
	}

	.dbrace-card-detail--full-height {
		min-height: 0;
	}

	.dbrace-card-detail--full {
		flex-direction: column;
	}

	.dbrace-card-detail--full .dbrace-card-detail__content {
		flex-basis: auto;
		padding: 32px 16px 40px;
		gap: 16px;
	}

	.dbrace-card-detail--full .dbrace-card-detail__media--bg {
		min-height: 200px;
	}

	.dbrace-carousel__slide {
		flex-basis: calc(100% - 100px);
		gap: 16px;
		padding: 0;
	}

	.dbrace-carousel {
		gap: 16px;
		padding: 16px 0 16px 16px;
	}

	.dbrace-carousel__row {
		gap: 16px;
		flex-direction: column;
		align-items: start;
	}

	.dbrace-carousel__media,
	.dbrace-carousel__media--bg {
		flex: 0 0 136px;
		width: 136px;
		height: 136px;
	}

	.dbrace-card-detail--full .dbrace-card-detail__media {
		order: 0;
	}

	.dbrace-card-detail--full .dbrace-card-detail__content,
	.dbrace-card-detail--full .dbrace-card-detail__body {
		order: 1;
	}

	.dbrace-carousel__row--image-right .dbrace-carousel__media {
		order: 0;
	}

	.dbrace-carousel__nav {
		padding: 0 16px 0 0;
	}
}