/*
 * Mega Bundle grids on the normal product pages (includes/mega-grid.php): a 50-seed pack's
 * stat strip + strains in rows of five, and the BOGO page's two sets with Swap Set buttons.
 * Same look as the offer landing page (offer-lp.css). Sizes follow the column's own width
 * (container query), so the grid fits the product page's left column at every viewport.
 */

.mvb-mg {
	--mg-ink: #1E1A16;
	--mg-line: #EADFCB;
	--mg-card: #FFFFFF;
	--mg-alt: #F4EFE4;
	--mg-tile: #F0E8DA;
	--mg-price-bg: #FFF3EC;
	--mg-price: #C0471C;
	--mg-good: #1F6B3A;
	--mg-orange: #B35A1B;
	--mg-orange-dk: #9E4F17;
	--mg-box: #F3EBDD;
	--mg-box-line: #D9C7A6;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--mg-ink);
}
@media (prefers-color-scheme: dark) {
	.mvb-mg {
		--mg-ink: #F0E8D8;
		--mg-line: #3A3A3A;
		--mg-card: #1E1E1E;
		--mg-alt: #2A2218;
		--mg-tile: #3A3A3A;
		--mg-price-bg: #2A2218;
		--mg-price: #E08A3C;
		--mg-good: #7DB26D;
		--mg-box: #2A2218;
		--mg-box-line: #4A3A28;
	}
}

/* ── 50-seed pack title on phones (offer page style) ──────────────────── */
.mvb-mg-head { display: none; }
@media (max-width: 768px) {
	.pdp-identity .mvb-mg-pname { display: none; }
	.mvb-mg-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 6px; text-align: center; color: var(--pdp-ink, #211C17); }
	.mvb-mg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; }
	.mvb-mg-headline { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }

	/* No more than 3-4px between the page's blocks (client), title down to the reward bar. */
	.mvb-mg-head { gap: 1px; padding-bottom: 3px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-identity .pdp-rrow { margin-bottom: 4px; }
	.mvb-mg { gap: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-buy-col { padding-top: 4px; row-gap: 0; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-pricerow { row-gap: 2px; }
	/* Price line no taller than its digits, so the free-seeds box sits above the fold (client). */
	.pdp-hero:not(.pdp-hero-bundle) .pdp-pricerow .pdp-price { line-height: 1; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-instock { margin-bottom: 0 !important; } /* pdp-responsive.css sets 8px !important */
	.pdp-hero:not(.pdp-hero-bundle) .pdp-bogo19-mobile { margin-top: 4px; margin-bottom: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-qrow { margin-bottom: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-pay-row { margin-bottom: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-tbullets { margin-top: 0; margin-bottom: 4px; gap: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-guar { margin-bottom: 4px; }
	.pdp-hero:not(.pdp-hero-bundle) .pdp-reward { margin-bottom: 4px; }
}
@media (max-width: 768px) and (prefers-color-scheme: dark) {
	.mvb-mg-head { color: #F0E8D8; }
}

/* ── Stat strip: the price cell a bit wider ───────────────────────────── */
/* Numbers as big as the offer page's and every cell the same size, with little padding (client). */
.mvb-mg-stats {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, 1.3fr);
	grid-auto-columns: minmax(0, 1fr);
	background: var(--mg-card);
	border: 1.5px solid var(--mg-ink);
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
}
.mvb-mg-stat {
	padding: 4px 2px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	border-left: 1px solid var(--mg-line);
}
.mvb-mg-stat:first-child { border-left: 0; }
.mvb-mg-stat b { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--mg-ink); }
.mvb-mg-stat span { font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--mg-ink); }
.mvb-mg-stat.is-price { background: var(--mg-price-bg); }
.mvb-mg-stat.is-price b { color: var(--mg-price); }
.mvb-mg-stat.is-small b { font-size: 22px; }
.mvb-mg-stat.is-small span { font-size: 12.5px; }
.mvb-mg-stat.is-good b,
.mvb-mg-stat.is-good span { color: var(--mg-good); }

/* ── 50-seed pack: strains in rows of five ────────────────────────────── */
/* A shade darker than the page and a firmer border, so it reads as one box (client). */
.mvb-mg-grid {
	list-style: none;
	margin: 0;
	padding: 7px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 7px 5px;
	background: var(--mg-box);
	border: 1.5px solid var(--mg-box-line);
	border-radius: 12px;
}
.mvb-mg-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 0; }
.mvb-mg-media { position: relative; }
.mvb-mg .mvb-mg-img { display: block; overflow: hidden; color: transparent; width: 100%; max-width: none; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: var(--mg-tile); }
.mvb-mg-type { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 999px; background: rgba(30, 26, 22, 0.78); color: #FFFFFF; font-size: 9px; font-weight: 700; line-height: normal; }
/* Tiles are ~55–65px wide on phones: a long word sits in its own box, so it moves to the next
   line whole and breaks at its soft hyphen only when wider than the tile (mvb_olp_tile_name_html). */
.mvb-mg-name { font-size: clamp(10px, 2.9vw, 11.5px); font-weight: 700; line-height: 1.1; text-align: center; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; color: var(--mg-ink); }
.mvb-mg-qty { font-weight: 800; }
.mvb-mg .olp-word { display: inline-block; max-width: 100%; }

/* ── BOGO page: two sets of ten, each with a Swap Set button ───────────── */
.mvb-mg-sets { display: flex; flex-direction: column; gap: 4px; }
.mvb-mg-set { border: 2px solid var(--mg-ink); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 4px; background: var(--mg-card); }
.mvb-mg-set.is-alt { background: var(--mg-alt); }
.mvb-mg-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 2px 0 6px; }
.mvb-mg .mvb-mg-set-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.1; color: var(--mg-ink); overflow-wrap: break-word; }
.mvb-mg-set-name.is-lg { font-size: 23px; }
.mvb-mg-set-name.is-md { font-size: 20px; }
.mvb-mg-set-name.is-sm { font-size: 17px; }
.mvb-mg .mvb-mg-swap { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin: 0; padding: 0 12px; border: 1.5px solid #1E1A16; border-radius: 8px; background: var(--mg-orange); color: #FFFFFF; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; }
.mvb-mg .mvb-mg-swap:hover { background: var(--mg-orange-dk); }
.mvb-mg .mvb-mg-swap:active { transform: scale(.97); }
.mvb-mg .mvb-mg-swap:focus-visible { outline: 3px solid var(--mg-ink); outline-offset: 2px; }
.mvb-mg-swap svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mvb-mg-set-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.mvb-mg-stile { position: relative; height: 78px; min-width: 0; box-sizing: border-box; border: 1.5px solid #1E1A16; border-radius: 6px; overflow: hidden; background: var(--mg-tile); }
.mvb-mg .mvb-mg-stile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
/* "5×" right before the name, in a light orange so it stands apart from it (client). */
.mvb-mg-stile .mvb-mg-qty { color: #FFC79E; }
.mvb-mg-stile-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 1px 3px; background: rgba(15, 12, 9, 0.58); color: #FFFFFF; font-size: clamp(8.5px, 2.55vw, 11px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.08; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
/* Up to 3 lines: "5×" before the name pushes a long one onto a third on phones. */
.mvb-mg-stile-name > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Wider column (tablet / desktop) ───────────────────────────────────── */
@container (min-width: 560px) {
	.mvb-mg-stats { border-radius: 12px; }
	.mvb-mg-stat { padding: 7px 2px; gap: 3px; }
	.mvb-mg-stat b,
	.mvb-mg-stat.is-small b { font-size: 34px; }
	.mvb-mg-stat span,
	.mvb-mg-stat.is-small span { font-size: 15px; }

	.mvb-mg-grid { padding: 12px; gap: 12px 10px; }
	.mvb-mg .mvb-mg-img { border-radius: 9px; }
	.mvb-mg-type { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 11px; }
	.mvb-mg-name { font-size: 14px; }

	.mvb-mg-sets { gap: 10px; }
	.mvb-mg-set { border-radius: 12px; padding: 10px; gap: 8px; }
	.mvb-mg-set-head { gap: 12px; padding: 0 4px; }
	.mvb-mg-set-name.is-lg { font-size: 28px; }
	.mvb-mg-set-name.is-md { font-size: 26px; }
	.mvb-mg-set-name.is-sm { font-size: 23px; }
	.mvb-mg .mvb-mg-swap { min-height: 40px; padding: 0 18px; font-size: 17px; }
	.mvb-mg-set-tiles { gap: 6px; }
	.mvb-mg-stile { height: 104px; border-radius: 7px; }
	.mvb-mg-stile-name { padding: 3px 4px 4px; font-size: 13px; }
}