/* pm_advancedpack — redesign fiche produit pack (thème veronica) */

.ap5-pack-info-column {
	font-family: Lato, sans-serif;
}

/* pack-17.js/pack-17.css pin the buy block with position:fixed on scroll
   (.ap5-fixed) — that behaviour targeted the old, short buy widget. Our
   buy block now wraps the whole right column (price, accordion, options,
   CTA), so pinning it covers the image column. Neutralise it: !important
   in an author stylesheet outranks the inline top/width/marginLeft that
   pack-17.js sets via jQuery .css(). */
.ap5-buy-block.ap5-fixed {
	position: static !important;
	top: auto !important;
	width: auto !important;
	margin-left: 0 !important;
}

/* pack-17.css forces .product-quantity to display:block within
   .ap5-add-to-cart-container (rule scoped to .ap5-pack-page), which was
   meant for the old layout. It breaks the flex alignment the theme
   normally uses between the quantity selector and the add-to-cart button,
   causing the "add to cart" area to look different from standard product
   pages. Restore the theme's natural flex layout. */
.ap5-pack-page .ap5-add-to-cart-container .product-add-to-cart .product-quantity {
	display: flex !important;
}

/* --- Accordéon "Contenu du pack" --- */

.ap5-accordion {
	margin: 20px 0;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
}

.ap5-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 18px;
	background: #faf9fa;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
}

.ap5-accordion-toggle:hover,
.ap5-accordion-toggle:focus {
	background: #f2eef1;
}

.ap5-accordion-icon {
	flex: none;
	width: 10px;
	height: 10px;
	margin-left: 12px;
	border-right: 2px solid #612651;
	border-bottom: 2px solid #612651;
	transform: rotate(-135deg);
	transition: transform 0.2s ease;
}

.ap5-accordion-toggle[aria-expanded="false"] .ap5-accordion-icon {
	transform: rotate(45deg);
}

.ap5-accordion-body {
	padding: 6px 18px 12px;
}

.ap5-accordion-body[hidden] {
	display: none;
}

/* --- Lignes d'articles du pack --- */

.ap5-pack-content-list {
	display: flex;
	flex-direction: column;
}

.ap5-pack-content-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid #ededed;
}

.ap5-pack-content-row:last-child {
	border-bottom: 0;
}

.ap5-pack-content-row-thumb {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: #f5f5f5;
}

.ap5-pack-content-row-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap5-pack-content-row-name {
	flex: 1 1 auto;
	font-size: 14px;
	color: #222;
}

.ap5-pack-content-row-qty {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: #612651;
}

/* --- Bloc "Vos options" --- */

.ap5-options-box {
	background: rgba(97, 38, 81, 0.04);
	border: 2px solid #e9d5ff;
	border-radius: 8px;
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.ap5-options-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #612651;
}

.ap5-options-title i {
	font-size: 1.125rem;
	color: #612651;
}

.ap5-options-help {
	margin: 0.75rem 0 1rem;
	font-size: 0.95rem;
	color: #612651;
}

.ap5-options-help a {
	color: #612651;
	font-weight: 700;
	text-decoration: underline;
}

/* --- Onglet "Détails du produit" : composition du pack (description + caractéristiques par article) --- */

.ap5-pack-composition {
	margin-top: 1.5rem;
}

.ap5-pack-composition-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid #ededed;
}

.ap5-pack-composition-item:first-of-type {
	border-top: 0;
}

.ap5-pack-composition-item-thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	overflow: hidden;
	background: #f5f5f5;
}

.ap5-pack-composition-item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap5-pack-composition-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ap5-pack-composition-item-name {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #222;
}

.ap5-pack-composition-item-description {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.ap5-pack-composition-item-description p {
	margin: 0;
}

/* dl.data-sheet est le composant "fiche technique" du thème (product-details.tpl) ;
   on le réutilise pour hériter du bon style, mais en grille compacte 2 colonnes
   car il est répété une fois par article du pack. */
.ap5-pack-composition-item-features {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 12px;
	row-gap: 2px;
	margin: 0;
}

.ap5-pack-composition-item-features .name {
	font-size: 12px;
	font-weight: 600;
	color: #777;
}

.ap5-pack-composition-item-features .value {
	margin: 0;
	font-size: 12px;
	color: #333;
}

/* --- Responsive : le layout hérite déjà du grid Bootstrap col-md-6 du thème
   (empilement automatique sous 768px) --- */
@media (max-width: 767px) {
	.ap5-accordion-toggle {
		padding: 12px 14px;
	}

	.ap5-options-box {
		padding: 1rem;
	}

	.ap5-pack-composition-item-features {
		grid-template-columns: 1fr;
	}

	.ap5-pack-composition-item {
		gap: 10px;
	}

	.ap5-pack-composition-item-thumb {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 420px) {
	/* Écrans très étroits : l'image passe au-dessus du texte pour laisser
	   assez de largeur à la description et aux caractéristiques. */
	.ap5-pack-composition-item {
		flex-direction: column;
	}

	.ap5-pack-composition-item-thumb {
		width: 72px;
		height: 72px;
	}
}