/*
Theme Name: Mappes Child
Theme URI: https://mappes.local/
Description: Astra child theme for MÄ PEPS — Step 5 Shop Structure layer (product cards, grids, collection/complete packs, verify-batch CTA, and the collection filter bar). Complements the existing Elementor/JetEngine build via shortcodes.
Author: Mappes
Template: astra
Version: 1.5.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mappes-child
*/

/* ==========================================================================
   Design tokens — sourced from the active Elementor kit (#632)
   Main bg #0A0A0D · Dark Plum #1C0A21 · Cream #E8DDC8 · Bronze #9B5F3D
   ========================================================================== */
:root {
	--mappes-bg: #0a0a0d;
	--mappes-plum: #1c0a21;
	--mappes-cream: #e8ddc8;
	--mappes-accent: #9b5f3d;
	--mappes-text: #f4f4f4;
	--mappes-muted: #bfbeb5;
	--mappes-line: rgba(255, 255, 255, 0.11);
	--mappes-card: rgba(255, 255, 255, 0.035);
	--mappes-radius: 14px;
	--mappes-gap: 1.5rem;
	--mappes-maxw: 1140px;
}

/* ==========================================================================
   Shared button
   ========================================================================== */
.mappes-btn,
.mappes-btn:link,
.mappes-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.8rem;
	border-radius: 999px;
	background: var(--mappes-cream);
	color: #1a1014 !important;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: none;
	border: 1px solid var(--mappes-cream);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mappes-btn:hover,
.mappes-btn:focus {
	background: var(--mappes-accent);
	color: #fff !important;
	border-color: var(--mappes-accent);
	text-decoration: none !important;
	transform: translateY(-1px);
}

.mappes-btn.is-placeholder {
	opacity: 0.45;
	pointer-events: none;
}

/* ==========================================================================
   §5.6 Filter bar
   ========================================================================== */
.mappes-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0 0 2.5rem;
}

.mappes-filter-btn {
	appearance: none;
	cursor: pointer;
	padding: 0.5rem 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--mappes-line);
	background: transparent;
	color: var(--mappes-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: all 0.18s ease;
}

.mappes-filter-btn:hover {
	border-color: var(--mappes-cream);
	color: var(--mappes-cream);
}

.mappes-filter-btn.is-active {
	background: var(--mappes-cream);
	border-color: var(--mappes-cream);
	color: #1a1014;
}

/* ==========================================================================
   §5.4 / §5.5 Product grid + cards
   ========================================================================== */
.mappes-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--mappes-gap);
}

.mappes-product-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 1.5rem;
	border: 1px solid var(--mappes-line);
	border-radius: var(--mappes-radius);
	background: var(--mappes-card);
	color: var(--mappes-text);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mappes-product-card:hover {
	border-color: rgba(232, 221, 200, 0.5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

.mappes-product-card.is-hidden {
	display: none;
}

.mappes-product-card__media {
	display: block;
	width: 100%;
	margin-bottom: 0.5rem;
}

.mappes-product-card__img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
}

.mappes-product-card__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mappes-text);
}

.mappes-product-card__scientific {
	margin: 0;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--mappes-muted);
}

.mappes-product-card__strength {
	margin: 0.1rem 0 0.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mappes-cream);
}

.mappes-product-card__cta {
	margin-top: 0.6rem;
	width: 100%;
}

/* Verify Batch CTA (§5.4) */
.mappes-verify-batch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--mappes-cream);
	text-decoration: none;
}

.mappes-verify-batch:hover {
	color: #fff;
}

.mappes-verify-batch__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--mappes-accent);
	color: #fff;
	font-size: 0.62rem;
	line-height: 1;
}

/* ==========================================================================
   §5.2 / §5.3 Packs pages
   ========================================================================== */
/* Full-bleed dark section; content centered + constrained (fixes full-width). */
.mappes-packs-page {
	background: var(--mappes-bg);
	color: var(--mappes-text);
	padding: 4rem 0 5rem;
}

.mappes-packs-page .mappes-packs-page__header,
.mappes-packs-page .entry-content {
	max-width: var(--mappes-maxw);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.mappes-packs-page__header {
	text-align: center;
	margin-bottom: 3rem;
}

.mappes-packs-page__header .entry-title,
.mappes-packs-page__header h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mappes-text);
	margin: 0;
}

.mappes-pack-cards {
	display: grid;
	column-gap: var(--mappes-gap);
	row-gap: 0.75rem;
}

/* Fixed column counts so cards always fill the container (no stray empty slot). */
.mappes-packs--collection .mappes-pack-cards {
	grid-template-columns: repeat(3, 1fr);
}

.mappes-packs--complete .mappes-pack-cards {
	grid-template-columns: repeat(4, 1fr);
}

/* Peptide + Starter: 7 items → 4-col (row of 4 + row of 3). */
.mappes-packs--peptide .mappes-pack-cards,
.mappes-packs--starter .mappes-pack-cards {
	grid-template-columns: repeat(4, 1fr);
}

/* Signature Duos: 3 items → 3-col (one clean row). */
.mappes-packs--signature-duos .mappes-pack-cards {
	grid-template-columns: repeat(3, 1fr);
}

/* Systems: 9 items → 3-col (three clean rows). */
.mappes-packs--systems .mappes-pack-cards {
	grid-template-columns: repeat(3, 1fr);
}

/* Hub: 4 pack families → 4-col. */
.mappes-packs--hub .mappes-pack-cards {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.mappes-packs--collection .mappes-pack-cards,
	.mappes-packs--complete .mappes-pack-cards,
	.mappes-packs--peptide .mappes-pack-cards,
	.mappes-packs--starter .mappes-pack-cards,
	.mappes-packs--signature-duos .mappes-pack-cards,
	.mappes-packs--systems .mappes-pack-cards,
	.mappes-packs--hub .mappes-pack-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.mappes-packs-page {
		padding: 2.5rem 0 3rem;
	}

	.mappes-packs-page__header {
		margin-bottom: 2rem;
	}

	.mappes-packs-page__header .entry-title,
	.mappes-packs-page__header h1 {
		font-size: clamp(1.35rem, 5vw, 1.8rem);
	}

	.mappes-pack-cards {
		column-gap: 0.75rem;
		row-gap: 0.4rem;
	}

	.mappes-pack-card {
		border-radius: 10px;
	}

	.mappes-pack-card__body {
		padding: 0.35rem 0.4rem 0.4rem;
	}
	.mappes-pack-card__body .mappes-pack-card__title {
		margin-bottom: 0.15rem;
	}

	.mappes-packs-page .mappes-pack-card .mappes-pack-card__title {
		font-size: 0.65rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.mappes-pack-card__price {
		font-size: 0.75rem;
	}

	.mappes-pack-card__from {
		font-size: 0.45rem;
	}

	.mappes-pack-card__cta {
		margin-top: auto;
		padding: 0.3rem 0.65rem;
		font-size: 0.55rem;
	}
}

/* Hub family card: small uppercase count badge above the title. */
.mappes-pack-card__count {
	display: inline-block;
	margin-bottom: 0.15rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mappes-accent);
}

.mappes-pack-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mappes-line);
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(28, 10, 33, 0.6), rgba(255, 255, 255, 0.02));
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mappes-pack-card:hover {
	border-color: rgba(232, 221, 200, 0.5);
	transform: translateY(-3px);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.mappes-pack-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid var(--mappes-line);
	overflow: hidden;
}

/* !important defeats theme/WooCommerce `img { height: auto !important }` rules
   that otherwise collapse the cover image. */
.mappes-pack-card__media .mappes-pack-card__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 0.4s ease;
}

.mappes-pack-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(232,221,200,0.08) 0%, rgba(155,95,61,0.12) 100%);
}

.mappes-pack-card:hover .mappes-pack-card__img {
	transform: scale(1.04);
}

.mappes-pack-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0.3rem 0.4rem 0.4rem;
	text-align: center;
}

.mappes-pack-card__body .mappes-pack-card__title {
	margin-bottom: 0.25rem;
}

/* High specificity so the theme/Elementor global h2 styles don't blow up the size. */
.mappes-packs-page .mappes-pack-card .mappes-pack-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mappes-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mappes-pack-card__price {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--mappes-cream);
	line-height: 1.2;
}

.mappes-pack-card__from {
	display: inline-block;
	margin-right: 0.15rem;
	font-size: 0.55rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mappes-muted);
}

.mappes-pack-card__cta {
	margin-top: auto;
	align-self: center;
	border-radius: 5px !important;
}

.mappes-pack-card__cta--select {
	padding: 0.35rem 0.85rem !important;
	font-size: 0.65rem !important;
	border-radius: 5px !important;
}

.mappes-pack-card__cta--add {
	padding: 0.35rem 0.85rem !important;
	font-size: 0.65rem !important;
	border-radius: 5px !important;
	cursor: pointer;
}

@media (max-width: 540px) {
	.mappes-pack-card__cta--select,
	.mappes-pack-card__cta--add {
		padding: 0.3rem 0.65rem !important;
		font-size: 0.55rem !important;
		border-radius: 4px !important;
	}
}

/* ==========================================================================
   Width containment for the bundle (pack) product pages
   The fallback Astra template renders these full-width; constrain + center.
   ========================================================================== */
.mappes-bundle-product #content .ast-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
	.mappes-product-grid,
	.mappes-pack-cards {
		grid-template-columns: 1fr 1fr;
	}

	.mappes-filter-btn {
		font-size: 0.68rem;
		padding: 0.45rem 0.85rem;
	}
}

@media (max-width: 400px) {
	.mappes-product-grid {
		grid-template-columns: 1fr;
	}

	.mappes-pack-cards {
		column-gap: 0.5rem;
		row-gap: 0.35rem;
	}

	.mappes-pack-card {
		border-radius: 7px;
	}

	.mappes-pack-card__body {
		padding: 0.25rem 0.3rem 0.3rem;
	}
	.mappes-pack-card__body .mappes-pack-card__title {
		margin-bottom: 0.12rem;
	}

	.mappes-packs-page .mappes-pack-card .mappes-pack-card__title {
		font-size: 0.55rem;
	}

	.mappes-pack-card__price {
		font-size: 0.65rem;
	}

	.mappes-pack-card__cta {
		margin-top: auto;
	}

	.mappes-pack-card__cta--select,
	.mappes-pack-card__cta--add {
		padding: 0.25rem 0.5rem !important;
		font-size: 0.45rem !important;
		border-radius: 3px !important;
	}
}

/* ==========================================================================
   Single pack product page: product-image follows scroll through the summary
   and stops before the tabs.  JavaScript (bundle-template-fix.php) manages
   the position: fixed|absolute lifecycle; this CSS provides the relative
   positioning anchor for position:absolute and keeps the gallery clear of
   tabs overflow.  The default WooCommerce float layout is preserved because
   flexbox conflicted with the existing WBB configurator layout.

   WooCommerce default:
     .woocommerce div.product div.images { float:left;  width:48% }
     .woocommerce div.product div.summary { float:right; width:48% }
   ========================================================================== */
.mappes-bundle-product .ast-woocommerce-container > .product {
	position: relative;
	overflow: visible;
}

.mappes-bundle-product .ast-woocommerce-container > .product .woocommerce-product-gallery {
	position: relative;
}

.mappes-bundle-product .ast-woocommerce-container > .product .summary.entry-summary {
	position: static;
}

/* ==========================================================================
   Hide any default WooCommerce cart form on bundle pages so users never
   click the wrong add-to-cart (which would add the base product alone).
   ========================================================================== */
.mappes-bundle-product form.cart:not(.wbb-bundle-form) {
	display: none !important;
}

/* ==========================================================================
   Bundle (pack) configurator — dark-theme overrides for Woo Bundle Builder
   The plugin's frontend.css targets light backgrounds; re-color via its own
   CSS vars + explicit fixes, accent in brand cream.
   ========================================================================== */
.wbb-bundle-form {
	--wbb-accent: var(--mappes-cream);
	--wbb-text-muted: var(--mappes-muted);
	color: var(--mappes-text);
}

.wbb-bundle-form .wbb-section-title {
	color: var(--mappes-text);
	border-bottom-color: var(--mappes-line);
}

.wbb-bundle-form .wbb-included-item {
	background: rgba(255, 255, 255, 0.06);
}

.wbb-bundle-form .wbb-included-item .wbb-item-name {
	color: var(--mappes-text);
}

.wbb-bundle-form .wbb-included-item .wbb-item-thumb img {
	width: 44px !important;
	height: 44px !important;
}

.wbb-bundle-form .wbb-included-item .wbb-item-check {
	color: var(--mappes-cream);
}

/* Compact name + price list (no thumbnails) — practical for a long catalogue. */
.wbb-bundle-form .wbb-optional-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.5em;
}

@media (max-width: 540px) {
	.wbb-bundle-form .wbb-optional-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 0.4em;
	}
}

.wbb-bundle-form .wbb-optional-card {
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	text-align: left;
	padding: 0.7em 2.4em 0.7em 1em;
	background: var(--mappes-card);
	border-color: var(--mappes-line);
	color: var(--mappes-text);
}

.wbb-bundle-form .wbb-optional-card:hover {
	border-color: rgba(232, 221, 200, 0.5);
	background: rgba(255, 255, 255, 0.06);
}

.wbb-bundle-form .wbb-optional-card:has(.wbb-optional-input:checked) {
	border-color: var(--mappes-cream);
	box-shadow: 0 0 0 1px var(--mappes-cream);
	background: rgba(232, 221, 200, 0.12);
}

/* Hide thumbnails — name + price only keeps the list short and scannable. */
.wbb-bundle-form .wbb-optional-card .wbb-item-thumb {
	display: none;
}

.wbb-bundle-form .wbb-optional-card .wbb-item-name {
	flex: 1;
	color: var(--mappes-text);
	font-size: 0.92em;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.wbb-bundle-form .wbb-optional-card .wbb-item-price {
	color: var(--mappes-cream);
	font-weight: 700;
	white-space: nowrap;
}

/* Checkbox/radio at the right edge, vertically centered. */
.wbb-bundle-form .wbb-optional-input {
	top: 50%;
	left: auto;
	right: 0.85em;
	transform: translateY(-50%);
	accent-color: var(--mappes-accent);
	width: 17px;
	height: 17px;
}

.wbb-bundle-form .wbb-price-section {
	border-top-color: var(--mappes-line);
}

.wbb-bundle-form .wbb-price-amount {
	color: var(--mappes-cream);
}

.wbb-bundle-form .wbb-add-to-cart-button {
	background: var(--mappes-cream);
	border-color: var(--mappes-cream);
	color: #1a1014;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.wbb-bundle-form .wbb-add-to-cart-button:hover {
	background: var(--mappes-accent);
	border-color: var(--mappes-accent);
	color: #fff;
}