/*
 * MariGold Subscription Builder: component styles (structure, behavior, and default look).
 *
 * HOW THIS FILE IS ORGANIZED
 * - Structural and functional rules are literal values: layout, hidden and disabled states, the visually hidden
 *   native add-to-cart form, focus outlines, the mobile sticky bar's positioning, container-query breakpoints.
 * - Every VISUAL value (colors, fonts, sizes, spacing, borders, radii, shadows) is read from a CSS custom property
 *   with a built-in default, for example: border-radius: var(--mgsb-box-radius, 20px).
 *   This file never DEFINES those properties, so any stylesheet can set them, in any load order, without raising
 *   selector specificity. The site's central stylesheet does this: docs/design/landing-page-customizations.css.
 *
 * Scope: every selector starts with .mgsb, .mgsb-sticky, .mgsb-announcement or .mgsb-gallery (roots rendered by the
 * shortcodes), so nothing here can reach normal WooCommerce product pages or other pages.
 * Roots also carry a profile class (.mgsb--shake, .mgsb--coffee) for per-product-line styling.
 *
 * Default values come from the design Artifacts in docs/original-spec/artifact-boards.
 */

/* ---------- Base (structure) ---------- */

.mgsb,
.mgsb-sticky,
.mgsb-announcement {
	font-family: var(--mgsb-font-body, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--mgsb-ink, #2b1d14);
	line-height: var(--mgsb-line-height, 1.4);
}

.mgsb *,
.mgsb *::before,
.mgsb *::after,
.mgsb-sticky *,
.mgsb-sticky *::before,
.mgsb-sticky *::after {
	box-sizing: border-box;
}

/* Reset theme button/select styling inside the component only. */
.mgsb button,
.mgsb-sticky button {
	appearance: none;
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	line-height: 1.3;
	cursor: pointer;
	color: var(--mgsb-ink, #2b1d14);
}

.mgsb button:focus-visible,
.mgsb select:focus-visible,
.mgsb-sticky button:focus-visible {
	outline: 3px solid var(--mgsb-green, #2f6b3a);
	outline-offset: 2px;
}

.mgsb button:disabled {
	cursor: not-allowed;
}

/* The real WooCommerce add-to-cart form: present in the page, visually hidden. !important is deliberate here:
   themes often force form elements visible, and this form must never show. */
.mgsb .mgsb__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.mgsb__noscript,
.mgsb-admin-message {
	font-size: 14px;
	color: var(--mgsb-warn, #8a3b12);
}

/* ---------- Layout (structure) ---------- */

.mgsb.mgsb--has-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mgsb-layout-gap, 48px);
	align-items: flex-start;
}

.mgsb .mgsb__gallery {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-gallery-gap, 10px);
}

.mgsb .mgsb__main {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-main-gap, 18px);
	container-type: inline-size;
	container-name: mgsb;
}

/* ---------- Gallery ---------- */

/* Root of [marigold_gallery]: a vertical stack of the main image container and the thumbnail row.
   The vertical space between them is --mgsb-gallery-gap (default 10px). */
.mgsb-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-gallery-gap, 10px);
}

.mgsb .mgsb__hero {
	position: relative;
	overflow: hidden;
	padding: var(--mgsb-hero-padding, 0);
	background: var(--mgsb-hero-bg, var(--mgsb-white, #fff));
	border: var(--mgsb-hero-border-width, 1px) solid var(--mgsb-hero-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-hero-radius, 24px);
}

.mgsb .mgsb__hero img {
	display: block;
	width: 100%;
	aspect-ratio: var(--mgsb-hero-ratio, 1 / 1);
	object-fit: var(--mgsb-hero-fit, contain);
}

.mgsb .mgsb__herobadge {
	position: absolute;
	top: var(--mgsb-badge-top, 18px);
	left: var(--mgsb-badge-left, 18px);
	padding: var(--mgsb-badge-padding, 8px 14px);
	border-radius: var(--mgsb-badge-radius, 999px);
	background: var(--mgsb-badge-bg, var(--mgsb-gold, #f2c21b));
	color: var(--mgsb-badge-color, inherit);
	font-size: var(--mgsb-badge-size, 13px);
	font-weight: var(--mgsb-badge-weight, 700);
}

/* Thumbnail row */
.mgsb .mgsb__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--mgsb-thumbs-columns, 4), minmax(0, 1fr));
	gap: var(--mgsb-thumbs-gap, 12px);
}

.mgsb .mgsb__thumb {
	padding: var(--mgsb-thumb-padding, 0);
	overflow: hidden;
	background: var(--mgsb-thumb-bg, var(--mgsb-white, #fff));
	border: var(--mgsb-thumb-border-width, 2px) solid var(--mgsb-thumb-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-thumb-radius, 14px);
}

.mgsb .mgsb__thumb.is-on {
	border-color: var(--mgsb-thumb-border-color-active, var(--mgsb-ink, #2b1d14));
}

.mgsb .mgsb__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: var(--mgsb-thumb-ratio, 1 / 1);
	object-fit: var(--mgsb-thumb-fit, contain);
}

/* Thumbnail slider ([marigold_gallery]): one row, --mgsb-thumbs-visible thumbnails at a time, arrows when there are more. */
.mgsb .mgsb__slider {
	display: flex;
	align-items: center;
	gap: var(--mgsb-nav-gap, 6px);
}

.mgsb .mgsb__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.mgsb .mgsb__thumbs--slider {
	display: flex;
	gap: var(--mgsb-thumbs-gap, 10px);
}

.mgsb .mgsb__thumbs--slider .mgsb__thumb {
	flex: 0 0 calc((100% - (var(--mgsb-thumbs-visible, 5) - 1) * var(--mgsb-thumbs-gap, 10px)) / var(--mgsb-thumbs-visible, 5));
	min-width: 0;
	border-radius: var(--mgsb-thumb-radius, 10px);
	cursor: pointer;
}

.mgsb .mgsb__nav {
	display: none;
	flex: 0 0 auto;
	width: var(--mgsb-nav-size, 30px);
	height: var(--mgsb-nav-size, 30px);
	padding: 0;
	border: 1px solid var(--mgsb-nav-border, var(--mgsb-line, #e6d9c2));
	border-radius: 50%;
	background: var(--mgsb-nav-bg, var(--mgsb-white, #fff));
	color: var(--mgsb-nav-color, var(--mgsb-ink, #2b1d14));
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mgsb .mgsb__slider.has-nav .mgsb__nav {
	display: block;
}

.mgsb .mgsb__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Phone: main image uses a fixed height, as in the mobile design. */
@media (max-width: 767px) {
	.mgsb-gallery .mgsb__hero img {
		aspect-ratio: auto;
		height: var(--mgsb-hero-mobile-height, 330px);
	}
}

/* Tablet: keep the gallery a sensible width when the hero stacks. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mgsb-gallery {
		max-width: var(--mgsb-gallery-tablet-max, 560px);
		margin-right: auto;
		margin-left: auto;
	}
}

/* ---------- Flavor picker ---------- */

.mgsb .mgsb__flavors {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mgsb .mgsb__label {
	font-size: var(--mgsb-label-size, 14px);
	font-weight: var(--mgsb-label-weight, 700);
}

.mgsb .mgsb__label span {
	font-weight: 500;
}

.mgsb .mgsb__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mgsb-pill-gap, 8px);
}

.mgsb .mgsb__pill {
	min-height: var(--mgsb-pill-min-height, 44px);
	padding: var(--mgsb-pill-padding, 10px 16px);
	border: var(--mgsb-pill-border-width, 2px) solid var(--mgsb-pill-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-pill-radius, 999px);
	background: var(--mgsb-pill-bg, var(--mgsb-white, #fff));
	color: var(--mgsb-pill-color, var(--mgsb-ink, #2b1d14));
	font-size: var(--mgsb-pill-size, 14px);
	font-weight: var(--mgsb-pill-weight, 600);
}

.mgsb .mgsb__pill.is-on {
	border-color: var(--mgsb-pill-border-color-active, var(--mgsb-ink, #2b1d14));
	background: var(--mgsb-pill-bg-active, var(--mgsb-gold, #f2c21b));
}

/* Coming-soon flavors: shown, can be looked at, cannot be added. */
.mgsb .mgsb__pill .mgsb__soon {
	display: inline-block;
	margin-left: 6px;
	font-size: var(--mgsb-soon-size, 12px);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mgsb-soon-color, var(--mgsb-green-dark, #24532d));
}

.mgsb .mgsb__pill.is-soon {
	border-style: dashed;
}

/* Elementor "Choose <flavor>" buttons for a coming-soon flavor: the label is set by the buy box script. */
[class*="mgsb-choose--"].is-coming-soon .elementor-button-text::after {
	content: var(--mgsb-soon-label, "");
}

/* ---------- Buy box ---------- */

.mgsb .mgsb__box {
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-box-gap, 14px);
	padding: var(--mgsb-box-padding, 18px);
	background: var(--mgsb-box-bg, var(--mgsb-white, #fff));
	border: var(--mgsb-box-border-width, 1px) solid var(--mgsb-box-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-box-radius, 20px);
}

.mgsb .mgsb__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mgsb .mgsb__sub {
	font-size: var(--mgsb-label-size, 14px);
	font-weight: var(--mgsb-label-weight, 700);
}

/* ---------- Quantity tier cards ---------- */

.mgsb .mgsb__tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mgsb-tiers-gap, 8px);
}

.mgsb .mgsb__tier {
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-tier-gap, 3px);
	padding: var(--mgsb-tier-padding, 12px 10px 10px);
	border: var(--mgsb-tier-border-width, 2px) solid var(--mgsb-tier-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-tier-radius, 12px);
	background: var(--mgsb-tier-bg, var(--mgsb-white, #fff));
	text-align: left;
}

.mgsb .mgsb__tier.is-on {
	border-color: var(--mgsb-tier-border-color-active, var(--mgsb-ink, #2b1d14));
	background: var(--mgsb-tier-bg-active, var(--mgsb-select-bg, #fff7d6));
}

.mgsb .mgsb__tier.is-disabled {
	opacity: var(--mgsb-tier-disabled-opacity, 0.55);
	background: var(--mgsb-tier-bg-disabled, #f4efe4);
}

.mgsb .mgsb__tier-l,
.mgsb .mgsb__tier-r {
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-tier-gap, 3px);
}

.mgsb .mgsb__tier-tag {
	min-height: 14px;
	color: var(--mgsb-tier-tag-color, var(--mgsb-green, #2f6b3a));
	font-size: var(--mgsb-tier-tag-size, 11px);
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mgsb .mgsb__tier-tag.is-off {
	color: var(--mgsb-tier-tag-color-off, var(--mgsb-warn, #8a3b12));
}

.mgsb .mgsb__tier-bags {
	font-size: var(--mgsb-tier-bags-size, 15px);
	font-weight: 700;
}

.mgsb .mgsb__tier-use,
.mgsb .mgsb__tier-once {
	font-size: var(--mgsb-tier-small-size, 12px);
	color: var(--mgsb-muted, #6b5444);
}

.mgsb .mgsb__tier-price {
	margin-top: 4px;
	font-size: var(--mgsb-tier-price-size, 17px);
	font-weight: var(--mgsb-tier-price-weight, 800);
	color: var(--mgsb-tier-price-color, inherit);
}

.mgsb .mgsb__tier-per {
	font-size: var(--mgsb-tier-small-size, 12px);
	font-weight: 600;
}

/* ---------- Flavor counters (Build your box) ---------- */

.mgsb .mgsb__build {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mgsb .mgsb__buildhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.mgsb .mgsb__mixlabel {
	font-size: var(--mgsb-mixlabel-size, 13px);
	font-weight: 600;
	color: var(--mgsb-mixlabel-color, var(--mgsb-warn, #8a3b12));
}

.mgsb .mgsb__mixlabel.is-done {
	color: var(--mgsb-mixlabel-color-done, var(--mgsb-green-dark, #24532d));
}

.mgsb .mgsb__mix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mgsb-mix-gap, 8px);
}

.mgsb .mgsb__mixitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: var(--mgsb-mixitem-padding, 6px 6px 6px 10px);
	border: var(--mgsb-mixitem-border-width, 1.5px) solid var(--mgsb-mixitem-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-mixitem-radius, 10px);
	background: var(--mgsb-mixitem-bg, var(--mgsb-white, #fff));
}

.mgsb .mgsb__mixitem.is-on {
	border-color: var(--mgsb-mixitem-border-color-active, var(--mgsb-ink, #2b1d14));
	background: var(--mgsb-mixitem-bg-active, var(--mgsb-select-bg, #fff7d6));
}

.mgsb .mgsb__mixitem.is-disabled {
	opacity: var(--mgsb-mixitem-disabled-opacity, 0.5);
}

.mgsb .mgsb__mixitem.is-soon .mgsb__mixname em {
	color: var(--mgsb-soon-color, var(--mgsb-green-dark, #24532d));
	font-weight: 700;
	text-transform: uppercase;
}

.mgsb .mgsb__mixitem.is-soon {
	opacity: 1;
}

.mgsb .mgsb__mixitem.is-soon .mgsb__mixname {
	opacity: var(--mgsb-mixitem-disabled-opacity, 0.5);
}

.mgsb .mgsb__mixname {
	min-width: 0;
	font-size: var(--mgsb-mixname-size, 13px);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mgsb .mgsb__mixname em {
	display: block;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	color: var(--mgsb-muted, #6b5444);
}

.mgsb .mgsb__stepper {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

.mgsb .mgsb__step {
	width: var(--mgsb-step-size, 32px);
	height: var(--mgsb-step-size, 32px);
	padding: 0;
	border: 1px solid var(--mgsb-step-border-color, var(--mgsb-control, #cdbb9c));
	border-radius: var(--mgsb-step-radius, 8px);
	background: var(--mgsb-step-bg, var(--mgsb-white, #fff));
	font-weight: 700;
}

.mgsb .mgsb__step--plus {
	border-color: var(--mgsb-step-plus-bg, var(--mgsb-ink, #2b1d14));
	background: var(--mgsb-step-plus-bg, var(--mgsb-ink, #2b1d14));
	color: var(--mgsb-step-plus-color, var(--mgsb-cream, #fbf6ec));
}

.mgsb .mgsb__step:disabled {
	opacity: 0.45;
}

.mgsb .mgsb__count {
	min-width: 18px;
	text-align: center;
	font-weight: var(--mgsb-count-weight, 800);
}

.mgsb .mgsb__note {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--mgsb-note-bg, var(--mgsb-green-bg, #eaf3e6));
	color: var(--mgsb-note-color, var(--mgsb-green-dark, #24532d));
	font-size: 13px;
	font-weight: 600;
}

/* ---------- CTA, pricing and savings, trust line ---------- */

.mgsb .mgsb__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mgsb-cta-min-height, 58px);
	padding: var(--mgsb-cta-padding, 0 16px);
	border: 0;
	border-radius: var(--mgsb-cta-radius, 14px);
	background: var(--mgsb-cta-bg, var(--mgsb-gold, #f2c21b));
	color: var(--mgsb-cta-color, var(--mgsb-ink, #2b1d14));
	font-size: var(--mgsb-cta-size, 18px);
	font-weight: var(--mgsb-cta-weight, 800);
}

.mgsb .mgsb__cta:hover:not(:disabled) {
	background: var(--mgsb-cta-bg-hover, #e6b70f);
	color: var(--mgsb-cta-color-hover, var(--mgsb-cta-color, var(--mgsb-ink, #2b1d14)));
}

.mgsb .mgsb__cta.is-off,
.mgsb .mgsb__cta:disabled {
	background: var(--mgsb-cta-bg-disabled, var(--mgsb-line, #e6d9c2));
	color: var(--mgsb-cta-color-disabled, var(--mgsb-muted, #6b5444));
}

.mgsb .mgsb__savings {
	min-height: 18px;
	color: var(--mgsb-savings-color, var(--mgsb-body, #4a3426));
	font-size: var(--mgsb-savings-size, 13px);
	font-weight: var(--mgsb-savings-weight, 400);
	text-align: center;
}

.mgsb .mgsb__added {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--mgsb-added-bg, var(--mgsb-green-bg, #eaf3e6));
	color: var(--mgsb-added-color, var(--mgsb-green-dark, #24532d));
	font-size: var(--mgsb-added-size, 13px);
	font-weight: 600;
	text-align: center;
}

.mgsb .mgsb__added a {
	color: inherit;
	text-decoration: underline;
}

/* WooCommerce notices printed by the server (non-AJAX add to cart, or errors). Hidden when empty. */
.mgsb .mgsb__notices {
	flex: 0 0 100%;
}

.mgsb .mgsb__notices:empty {
	display: none;
}

.mgsb .mgsb__error {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--mgsb-error-bg, #fdf0e8);
	color: var(--mgsb-error-color, var(--mgsb-warn, #8a3b12));
	font-size: 13px;
	font-weight: 600;
}

.mgsb .mgsb__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mgsb-trust-gap, 18px);
	color: var(--mgsb-trust-color, var(--mgsb-muted, #6b5444));
	font-size: var(--mgsb-trust-size, 13px);
}

.mgsb .mgsb__preview {
	margin: 0;
	padding: 10px 12px;
	border: 1px dashed var(--mgsb-control, #cdbb9c);
	border-radius: 10px;
	background: var(--mgsb-select-bg, #fff7d6);
	color: var(--mgsb-muted, #6b5444);
	font-size: 12px;
}

.mgsb .mgsb__debug {
	max-height: 320px;
	margin: 0;
	padding: 10px;
	overflow: auto;
	border-radius: 8px;
	background: #1c1c1c;
	color: #d6f5d6;
	font-size: 11px;
	line-height: 1.4;
	white-space: pre-wrap;
}

/* ---------- Narrow containers (phones, narrow Elementor columns) ----------
   The container query is structure; the --mgsb-m-* values are the mobile look. */

@container mgsb (max-width: 520px) {
	.mgsb .mgsb__box {
		padding: var(--mgsb-m-box-padding, 14px);
		gap: var(--mgsb-m-box-gap, 12px);
	}

	.mgsb .mgsb__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--mgsb-m-pill-gap, 6px);
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.mgsb .mgsb__pill {
		flex: none;
		padding: var(--mgsb-m-pill-padding, 0 14px);
		font-size: var(--mgsb-m-pill-size, 13px);
	}

	/* Coffee: four long flavor names. Wrap onto a second line instead of a sideways scroll, so every flavor is visible. */
	.mgsb.mgsb--coffee .mgsb__pills {
		flex-wrap: wrap;
		overflow-x: visible;
		padding-bottom: 0;
	}

	.mgsb.mgsb--coffee .mgsb__pill {
		min-height: var(--mgsb-m-pill-min-height, 36px);
		padding: var(--mgsb-m-pill-padding, 0 12px);
		font-size: var(--mgsb-m-pill-size, 12.5px);
	}

	.mgsb .mgsb__tiers {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.mgsb .mgsb__tier {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: var(--mgsb-m-tier-padding, 10px 12px);
	}

	.mgsb .mgsb__tier-r {
		align-items: flex-end;
		text-align: right;
	}

	.mgsb .mgsb__tier-price {
		margin-top: 0;
		font-size: var(--mgsb-m-tier-price-size, 16px);
	}

	.mgsb .mgsb__tier-bags {
		font-size: var(--mgsb-m-tier-bags-size, 14px);
	}

	.mgsb .mgsb__mix {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--mgsb-m-mix-gap, 6px);
	}

	.mgsb .mgsb__mixitem {
		padding: var(--mgsb-m-mixitem-padding, 4px 4px 4px 8px);
	}

	.mgsb .mgsb__mixname {
		font-size: var(--mgsb-m-mixname-size, 12px);
	}

	.mgsb .mgsb__step {
		width: var(--mgsb-m-step-size, 28px);
		height: var(--mgsb-m-step-size, 28px);
	}

	.mgsb .mgsb__cta {
		min-height: var(--mgsb-m-cta-min-height, 54px);
		font-size: var(--mgsb-m-cta-size, 17px);
	}

	.mgsb .mgsb__trust {
		gap: var(--mgsb-m-trust-gap, 12px);
	}
}

/* ---------- Mobile sticky bar (moved to <body> by the script) ----------
   Position, stacking and show/hide are structure. Everything else is variable-driven. */

.mgsb-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: var(--mgsb-sticky-gap, 12px);
	padding: var(--mgsb-sticky-padding, 10px 16px 18px);
	background: var(--mgsb-sticky-bg, #fff);
	border-top: 1px solid var(--mgsb-sticky-border-color, var(--mgsb-line, #e6d9c2));
	box-shadow: var(--mgsb-sticky-shadow, 0 -6px 20px rgba(43, 29, 20, 0.12));
}

.mgsb-sticky[hidden] {
	display: none;
}

.mgsb-sticky img {
	flex: none;
	width: var(--mgsb-sticky-img-size, 48px);
	height: var(--mgsb-sticky-img-size, 48px);
	object-fit: contain;
	border-radius: var(--mgsb-sticky-img-radius, 8px);
	background: var(--mgsb-cream, #fbf6ec);
}

.mgsb-sticky__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.mgsb-sticky__text strong {
	font-size: var(--mgsb-sticky-title-size, 14px);
	font-weight: 700;
}

.mgsb-sticky__text span {
	color: var(--mgsb-sticky-sub-color, var(--mgsb-green, #2f6b3a));
	font-size: var(--mgsb-sticky-sub-size, 12px);
	font-weight: 600;
}

.mgsb-sticky .mgsb-sticky__btn {
	padding: var(--mgsb-sticky-btn-padding, 14px 16px);
	border: 0;
	border-radius: var(--mgsb-sticky-btn-radius, 12px);
	background: var(--mgsb-sticky-btn-bg, var(--mgsb-gold, #f2c21b));
	color: var(--mgsb-sticky-btn-color, var(--mgsb-ink, #2b1d14));
	font-size: var(--mgsb-sticky-btn-size, 15px);
	font-weight: 800;
	white-space: nowrap;
}

/* The sticky bar is a phone feature. */
@media (min-width: 768px) {
	.mgsb-sticky {
		display: none !important;
	}
}

/* ---------- Bundle price cards ([marigold_bundle_prices]) ---------- */

.mgsb-prices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mgsb-prices-gap, 18px);
	font-family: var(--mgsb-font-body, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--mgsb-ink, #2b1d14);
}

.mgsb-prices *,
.mgsb-prices *::before,
.mgsb-prices *::after {
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.mgsb-prices {
		grid-template-columns: 1fr;
	}
}

.mgsb-prices .mgsb-prices__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: var(--mgsb-prices-padding, 22px);
	background: var(--mgsb-prices-bg, var(--mgsb-white, #fff));
	border: 1px solid var(--mgsb-prices-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-prices-radius, 18px);
	text-align: center;
}

.mgsb-prices .mgsb-prices__bags {
	font-size: var(--mgsb-prices-bags-size, 20px);
	font-weight: 700;
}

.mgsb-prices .mgsb-prices__price {
	font-family: var(--mgsb-font-heading, "Bricolage Grotesque", Georgia, serif);
	font-size: var(--mgsb-prices-price-size, 30px);
	font-weight: 800;
	line-height: 1.1;
}

.mgsb-prices .mgsb-prices__full,
.mgsb-prices .mgsb-prices__per {
	color: var(--mgsb-muted, #6b5444);
	font-size: 14px;
}

.mgsb-prices .mgsb-prices__save {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--mgsb-prices-save-bg, var(--mgsb-green, #2f6b3a));
	color: var(--mgsb-prices-save-color, #fff);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

/* ---------- Announcement bar ---------- */

.mgsb-announcement {
	padding: var(--mgsb-announcement-padding, 10px 16px);
	background: var(--mgsb-announcement-bg, var(--mgsb-ink, #2b1d14));
	color: var(--mgsb-announcement-color, var(--mgsb-cream, #fbf6ec));
	font-size: var(--mgsb-announcement-size, 14px);
	font-weight: var(--mgsb-announcement-weight, 500);
	text-align: center;
}

.mgsb-announcement b {
	color: var(--mgsb-announcement-accent, var(--mgsb-gold, #f2c21b));
}

@media (max-width: 767px) {
	.mgsb-announcement {
		padding: var(--mgsb-m-announcement-padding, 8px 16px);
		font-size: var(--mgsb-m-announcement-size, 12px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mgsb .mgsb__cta,
	.mgsb .mgsb__tier,
	.mgsb .mgsb__pill {
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}
}

/* The buy box shows its own "Added to your cart" message; hide WooCommerce's extra "View cart" link under the button. */
.mgsb a.added_to_cart,
.mgsb-sticky a.added_to_cart {
	display: none !important;
}

/* One-time / subscribe radio cards (layout of the approved desktop and mobile boards). Only drawn when the profile has
   subscriptions on. Subscribe & Save card on top, One-time card below; the selected card holds the controls. */
.mgsb .mgsb__choices {
	display: flex;
	flex-direction: column;
	gap: var(--mgsb-choices-gap, 14px);
}

.mgsb .mgsb__choice {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--mgsb-choice-padding, 16px);
	border: var(--mgsb-choice-border-width, 2px) solid var(--mgsb-choice-border-color, var(--mgsb-line, #e6d9c2));
	border-radius: var(--mgsb-choice-radius, 14px);
	background: var(--mgsb-choice-bg, #fff);
}

.mgsb .mgsb__choice.is-on {
	border-color: var(--mgsb-choice-border-color-active, var(--mgsb-ink, #2b1d14));
	background: var(--mgsb-choice-bg-active, #fffcf2);
}

.mgsb .mgsb__choice-head {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
}

.mgsb .mgsb__choice-head:focus-visible {
	outline: 2px solid var(--mgsb-ink, #2b1d14);
	outline-offset: 4px;
}

.mgsb .mgsb__choice-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--mgsb-choice-title-size, 17px);
	font-weight: 700;
	color: var(--mgsb-ink, #2b1d14);
}

.mgsb .mgsb__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--mgsb-ink, #2b1d14);
	border-radius: 50%;
}

.mgsb .mgsb__dot.is-on::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mgsb-ink, #2b1d14);
}

.mgsb .mgsb__pill-badge {
	padding: 5px 10px;
	font-size: var(--mgsb-choice-badge-size, 12px);
	font-weight: 700;
	color: #fff;
	background: var(--mgsb-choice-badge-bg, var(--mgsb-green, #2f6b3a));
	border-radius: 999px;
}

.mgsb .mgsb__choice-price {
	font-size: 14px;
	color: var(--mgsb-muted, #6b5444);
}

.mgsb .mgsb__choice-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mgsb .mgsb__qtys {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.mgsb .mgsb__qty {
	min-height: 44px;
	font: inherit;
	font-weight: 700;
	/* Own padding and no wrapping: the theme gives every button 40px of side padding, which squeezed "2 bags" to a few pixels on phones. */
	padding: 8px 4px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--mgsb-ink, #2b1d14);
	cursor: pointer;
	background: #fff;
	border: 2px solid var(--mgsb-line, #e6d9c2);
	border-radius: 10px;
}

.mgsb .mgsb__qty.is-on {
	border-color: var(--mgsb-ink, #2b1d14);
	background: var(--mgsb-select-bg, #fff7d6);
}

.mgsb .mgsb__nudge {
	font-size: 13px;
	font-weight: 600;
	color: var(--mgsb-warn, #8a3b12);
}

.mgsb .mgsb__deliver {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
}

.mgsb .mgsb__deliver select {
	min-height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 15px;
	color: var(--mgsb-ink, #2b1d14);
	background: #fff;
	border: 1.5px solid var(--mgsb-input-border, #cdbb9c);
	border-radius: 10px;
}

.mgsb .mgsb__unlocked {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	font-size: 14px;
	background: var(--mgsb-unlocked-bg, #eaf3e6);
	border: 1px dashed var(--mgsb-green, #2f6b3a);
	border-radius: 12px;
}

.mgsb .mgsb__unlocked-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	color: var(--mgsb-green-dark, #24532d);
}

.mgsb .mgsb__unlocked-l {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: var(--mgsb-green-dark, #24532d);
}

.mgsb .mgsb__perk.is-no {
	color: var(--mgsb-warn, #8a3b12);
}

.mgsb .mgsb__tier-ship {
	display: block;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.8;
}

.mgsb .mgsb__tier-ship.is-free {
	color: var(--mgsb-mixlabel-color-done, var(--mgsb-green-dark, #24532d));
	opacity: 1;
}

/* ---------- Flavor product page: the page's flavor cannot be bought (coming soon / out of stock) ---------- */

.mgsb .mgsb__unavail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px 18px;
	border-radius: var(--mgsb-card-radius, 14px);
	background: var(--mgsb-note-bg, var(--mgsb-green-bg, #eaf3e6));
}

.mgsb .mgsb__unavail-tag {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mgsb-soon-color, var(--mgsb-green-dark, #24532d));
}

.mgsb .mgsb__unavail-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mgsb-ink, #2b1d14);
}

.mgsb .mgsb__unavail-price {
	margin: 0;
	font-size: 14px;
	color: var(--mgsb-muted, #6b5d52);
}

/* ---------- Enlarge button on the main picture, and the picture viewer (lightbox) ---------- */

.mgsb .mgsb__hero img[data-gallery-zoom],
.mgsb-lp .mgsb-flavor-img[data-mgsb-zoom] {
	cursor: zoom-in;
}

.mgsb .mgsb__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--mgsb-line, #e6d9c2);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mgsb-ink, #2b1d14);
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.mgsb .mgsb__zoom:hover,
.mgsb .mgsb__zoom:focus-visible {
	background: #fff;
	outline: 2px solid var(--mgsb-green, #2f6b3a);
	outline-offset: 2px;
}

html.mgsb-lb-open {
	overflow: hidden;
}

.mgsb-lb {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483000;
	background: rgba(20, 14, 8, 0.97);
	color: #fff;
	font-family: inherit;
}

.mgsb-lb__stage {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 56px 12px 48px;
	box-sizing: border-box;
}

.mgsb-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	background: #fff;
	cursor: zoom-in;
}

/* Zoomed: the picture grows to 3x the screen width (never beyond its real size) and the stage scrolls to pan. */
.mgsb-lb.is-zoomed .mgsb-lb__img {
	max-width: none;
	max-height: none;
	width: max(100%, min(300%, var(--mgsb-lb-nat, 300%)));
	height: auto;
	flex: none;
	cursor: zoom-out;
}

.mgsb-lb__close,
.mgsb-lb__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.mgsb-lb__close:hover,
.mgsb-lb__nav:hover,
.mgsb-lb__close:focus-visible,
.mgsb-lb__nav:focus-visible {
	background: rgba(255, 255, 255, 0.32);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mgsb-lb__close {
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	font-size: 32px;
}

.mgsb-lb__nav {
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	font-size: 34px;
}

.mgsb-lb__nav--prev { left: 8px; }
.mgsb-lb__nav--next { right: 8px; }

.mgsb-lb__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	pointer-events: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mgsb-lb__hint {
	opacity: 0.8;
}

.mgsb-lb.is-zoomed .mgsb-lb__hint {
	display: none;
}