/**
 * AnnGhar Custom Mix Builder — frontend styles.
 *
 * Apple-inspired: soft neutral surfaces, generous whitespace, large
 * rounded corners, restrained color, subtle motion. Pure CSS, no
 * framework. All custom properties are scoped under `.annghar-amb-app`
 * so the plugin never leaks globals into the host theme.
 */

.annghar-amb-app {
	--amb-color-bg: #f5f5f7;
	--amb-color-surface: #ffffff;
	--amb-color-surface-alt: #fbfbfd;
	--amb-color-border: #e5e5ea;
	--amb-color-text: #1d1d1f;
	--amb-color-text-muted: #6e6e73;
	--amb-color-primary: #1b6e4c;
	--amb-color-primary-dark: #145439;
	--amb-color-primary-tint: #e6f3ec;
	--amb-color-accent: #c8963c;
	--amb-color-accent-tint: #faf3e4;
	--amb-color-error: #d6455a;
	--amb-color-error-tint: #fbebee;
	--amb-radius-sm: 10px;
	--amb-radius-md: 16px;
	--amb-radius-lg: 22px;
	--amb-radius-pill: 999px;
	--amb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
	--amb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--amb-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12);
	--amb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--amb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--amb-duration: 220ms;
	--amb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--amb-font);
	color: var(--amb-color-text);
	background: var(--amb-color-bg);
	border-radius: var(--amb-radius-lg);
	padding: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
	max-width: 100%;
}

.annghar-amb-app *,
.annghar-amb-app *::before,
.annghar-amb-app *::after {
	box-sizing: border-box;
}

.annghar-amb-app button {
	font-family: inherit;
}

/* ---------- Layout ---------- */

/* Two explicit rows in the content column (row 1: goal/packet/ingredients/
   upsells; row 2: Nutrition Dashboard, moved out of `.annghar-amb-main` so
   it can sit in its own row) with the sidebar spanning both — this is
   what lets Nutrition Dashboard sit BELOW the sidebar in DOM order (so it
   also renders below it on mobile, once the grid collapses to one
   column) while still appearing beside it, sticky, on desktop. */
.annghar-amb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-rows: auto auto;
	gap: 28px;
	align-items: start;
}

.annghar-amb-main {
	grid-column: 1;
	grid-row: 1;
}

.annghar-amb-sidebar {
	grid-column: 2;
	grid-row: 1 / 3;
}

.annghar-amb-step--nutrition {
	grid-column: 1;
	grid-row: 2;
}

@media (max-width: 900px) {
	.annghar-amb-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	/* Resets the explicit desktop placement above so these three items —
	   main content, sidebar (Step 4 / Review Cart), Nutrition Dashboard —
	   simply auto-place one per row in DOM order instead: exactly the
	   Goal → Packet → Ingredients → Review Cart → Nutrition sequence the
	   mobile layout needs, achieved purely by their DOM order (set in
	   builder-app.php) rather than any JS relocation. */
	.annghar-amb-main,
	.annghar-amb-sidebar,
	.annghar-amb-step--nutrition {
		grid-column: 1;
		grid-row: auto;
	}
}

.annghar-amb-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.annghar-amb-step {
	background: var(--amb-color-surface);
	border-radius: var(--amb-radius-lg);
	padding: clamp(18px, 3vw, 32px);
	box-shadow: var(--amb-shadow-sm);
}

/* Goal + Packet Size: 50/50 side by side on desktop, stacked full-width on mobile. */
.annghar-amb-goal-packet-row {
	display: flex;
	align-items: stretch;
	gap: 28px;
}

.annghar-amb-goal-packet-row > .annghar-amb-step {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 900px) {
	.annghar-amb-goal-packet-row {
		flex-direction: column;
	}
}

.annghar-amb-step__eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--amb-color-text-muted);
	margin: 0 0 6px;
}

.annghar-amb-step__title {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 650;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
}

.annghar-amb-step__subtitle {
	margin: 0 0 18px;
	color: var(--amb-color-text-muted);
	font-size: 14px;
}

/* ---------- Goals ---------- */

.annghar-amb-goals {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.annghar-amb-goal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--amb-radius-pill);
	border: 1px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	color: var(--amb-color-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--amb-duration) var(--amb-ease), border-color var(--amb-duration) var(--amb-ease), transform var(--amb-duration) var(--amb-ease);
}

.annghar-amb-goal:hover {
	transform: translateY(-1px);
	border-color: var(--amb-color-primary);
}

.annghar-amb-goal.is-selected {
	background: var(--amb-color-primary);
	border-color: var(--amb-color-primary);
	color: #fff;
}

.annghar-amb-goal--skip {
	background: transparent;
	border-style: dashed;
	color: var(--amb-color-text-muted);
}

.annghar-amb-goal-tip {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--amb-color-primary-tint);
	border-radius: var(--amb-radius-md);
	font-size: 13.5px;
	color: var(--amb-color-primary-dark);
}

/* ---------- Packet sizes ---------- */

.annghar-amb-packet-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Same component family as .annghar-amb-goal: identical padding, radius,
   border weight, transition and hover lift — only the selected/hover
   colour treatment stays packet-specific (tint fill, not solid fill). */
.annghar-amb-packet-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: var(--amb-radius-pill);
	border: 1px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	cursor: pointer;
	transition: background var(--amb-duration) var(--amb-ease), border-color var(--amb-duration) var(--amb-ease), transform var(--amb-duration) var(--amb-ease);
}

.annghar-amb-packet-size:hover {
	transform: translateY(-1px);
	border-color: var(--amb-color-primary);
}

.annghar-amb-packet-size.is-selected {
	border-color: var(--amb-color-primary);
	background: var(--amb-color-primary-tint);
}

.annghar-amb-packet-size__label {
	font-size: 14px;
	font-weight: 500;
}

.annghar-amb-custom-weight {
	margin-top: 16px;
}

.annghar-amb-custom-weight label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-custom-weight__field {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 200px;
}

.annghar-amb-custom-weight__field input[type="number"] {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: var(--amb-radius-md);
	border: 1.5px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	font-size: 15px;
	font-weight: 600;
	color: var(--amb-color-text);
}

.annghar-amb-custom-weight__field input[type="number"]:focus {
	outline: none;
	border-color: var(--amb-color-primary);
}

.annghar-amb-custom-weight__unit {
	font-weight: 600;
	color: var(--amb-color-text-muted);
}

/* Compact nutrition preview nested inside the Packet Size card — fills
   the empty space below the packet pills, keeps both Step cards the
   same visual height without any fixed/forced height. */
.annghar-amb-nutrition-snapshot {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--amb-color-border);
}

.annghar-amb-nutrition-snapshot__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 650;
	color: var(--amb-color-text);
}

/* ---------- Categories & search ---------- */

.annghar-amb-categories {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 16px;
	scrollbar-width: thin;
}

.annghar-amb-category-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--amb-radius-pill);
	border: 1px solid transparent;
	background: var(--amb-color-surface-alt);
	color: var(--amb-color-text-muted);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--amb-duration) var(--amb-ease);
}

.annghar-amb-category-tab.is-active {
	background: var(--amb-color-text);
	color: #fff;
}

.annghar-amb-toolbar-frontend {
	margin-bottom: 18px;
}

.annghar-amb-ingredient-search {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--amb-radius-md);
	border: 1px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	font-size: 14px;
}

.annghar-amb-ingredient-search:focus {
	outline: none;
	border-color: var(--amb-color-primary);
	background: var(--amb-color-surface);
}

/* ---------- Ingredient grid & cards ---------- */

.annghar-amb-ingredients {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.annghar-amb-ingredients__empty,
.annghar-amb-ingredients__loading {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--amb-color-text-muted);
	padding: 32px 0;
}

.annghar-amb-ingredient-card {
	background: var(--amb-color-surface-alt);
	border: 1px solid var(--amb-color-border);
	border-radius: var(--amb-radius-md);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: box-shadow var(--amb-duration) var(--amb-ease), border-color var(--amb-duration) var(--amb-ease), transform var(--amb-duration) var(--amb-ease);
}

.annghar-amb-ingredient-card:hover {
	box-shadow: var(--amb-shadow-md);
	transform: translateY(-2px);
}

.annghar-amb-ingredient-card.is-active {
	border-color: var(--amb-color-primary);
	background: var(--amb-color-surface);
}

.annghar-amb-ingredient-card.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.annghar-amb-ingredient-card__image {
	width: 100%;
	aspect-ratio: 1.4 / 1;
	border-radius: var(--amb-radius-sm);
	object-fit: cover;
	background: var(--amb-color-border);
}

.annghar-amb-ingredient-card__name {
	font-weight: 600;
	font-size: 15px;
	margin: 0;
}

.annghar-amb-ingredient-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-ingredient-card__price {
	font-weight: 600;
	color: var(--amb-color-primary-dark);
	font-size: 14px;
}

.annghar-amb-ingredient-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.annghar-amb-tag {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-accent-tint);
	color: var(--amb-color-accent);
}

.annghar-amb-stock-note {
	font-size: 11.5px;
	color: var(--amb-color-error);
	font-weight: 600;
}

.annghar-amb-ingredient-card__add {
	margin-top: auto;
	padding: 9px 12px;
	border-radius: var(--amb-radius-pill);
	border: none;
	background: var(--amb-color-text);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background var(--amb-duration) var(--amb-ease), transform var(--amb-duration) var(--amb-ease);
}

.annghar-amb-ingredient-card__add:hover {
	background: var(--amb-color-primary);
	transform: scale(1.02);
}

.annghar-amb-ingredient-card.is-active .annghar-amb-ingredient-card__add {
	background: var(--amb-color-error);
}

.annghar-amb-substitute-suggestion {
	font-size: 11.5px;
	color: var(--amb-color-primary-dark);
	background: var(--amb-color-primary-tint);
	border-radius: var(--amb-radius-sm);
	padding: 6px 8px;
}

/* Slider panel shown once an ingredient is added */

.annghar-amb-slider-panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--amb-color-border);
}

.annghar-amb-slider-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}

.annghar-amb-slider-panel__value {
	font-weight: 700;
	color: var(--amb-color-primary-dark);
}

.annghar-amb-slider {
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: var(--amb-radius-pill);
	background: linear-gradient(to right, var(--amb-color-primary) var(--amb-slider-fill, 0%), var(--amb-color-border) var(--amb-slider-fill, 0%));
	outline: none;
}

.annghar-amb-slider::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--amb-color-primary);
	box-shadow: var(--amb-shadow-sm);
	cursor: grab;
	transition: transform var(--amb-duration) var(--amb-ease);
}

.annghar-amb-slider::-webkit-slider-thumb:active {
	transform: scale(1.15);
	cursor: grabbing;
}

.annghar-amb-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--amb-color-primary);
	box-shadow: var(--amb-shadow-sm);
	cursor: grab;
}

/* ---------- Nutrition dashboard ---------- */

.annghar-amb-nutrition-dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}

.annghar-amb-nutrient-row {
	background: var(--amb-color-surface-alt);
	border-radius: var(--amb-radius-md);
	padding: 12px 14px;
}

.annghar-amb-nutrient-row__top {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 8px;
}

.annghar-amb-nutrient-row__label {
	font-weight: 600;
}

.annghar-amb-nutrient-row__dv {
	color: var(--amb-color-text-muted);
}

.annghar-amb-nutrient-row__bar {
	height: 6px;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-border);
	overflow: hidden;
}

.annghar-amb-nutrient-row__bar-fill {
	height: 100%;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-primary);
	transition: width 320ms var(--amb-ease);
}

.annghar-amb-nutrient-row.is-over .annghar-amb-nutrient-row__bar-fill {
	background: var(--amb-color-accent);
}

/* ---------- Score ---------- */

.annghar-amb-score {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 18px;
	background: var(--amb-color-surface-alt);
	border-radius: var(--amb-radius-md);
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.annghar-amb-score__ring {
	--amb-score-percent: 0%;
	--amb-score-ring-color: var(--amb-color-primary);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: conic-gradient(var(--amb-score-ring-color) var(--amb-score-percent), var(--amb-color-border) 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 320ms var(--amb-ease);
}

/* Colour tier applied only once the count-up animation finishes. */
.annghar-amb-score__ring--low {
	--amb-score-ring-color: var(--amb-color-error);
}

.annghar-amb-score__ring--medium {
	--amb-score-ring-color: var(--amb-color-accent);
}

.annghar-amb-score__ring--high {
	--amb-score-ring-color: var(--amb-color-primary);
}

.annghar-amb-score__ring-inner {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--amb-color-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.annghar-amb-score__value {
	font-size: 20px;
	font-weight: 700;
}

.annghar-amb-score__max {
	font-size: 11px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-score__subs {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	flex: 1;
	min-width: 200px;
}

.annghar-amb-score__sub {
	font-size: 12.5px;
}

.annghar-amb-score__sub-label {
	color: var(--amb-color-text-muted);
	display: block;
}

.annghar-amb-score__sub-value {
	font-weight: 700;
}

.annghar-amb-nutrition-scroll-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--amb-color-primary);
	text-decoration: none;
}

.annghar-amb-nutrition-scroll-link:hover {
	text-decoration: underline;
}

/* ---------- Badges & warnings ---------- */

.annghar-amb-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.annghar-amb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-primary-tint);
	color: var(--amb-color-primary-dark);
	font-size: 12.5px;
	font-weight: 600;
}

.annghar-amb-warnings {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.annghar-amb-warning {
	background: var(--amb-color-accent-tint);
	color: #7a5a1e;
	border-radius: var(--amb-radius-md);
	padding: 12px 16px;
	font-size: 13px;
}

/* ---------- Upsell suggestions ---------- */

.annghar-amb-upsells {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.annghar-amb-upsell-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--amb-radius-md);
	background: var(--amb-color-accent-tint);
	border: 1px solid transparent;
}

.annghar-amb-upsell-card__text {
	font-size: 13.5px;
	color: #7a5a1e;
}

.annghar-amb-upsell-card__price {
	font-weight: 700;
	color: var(--amb-color-accent);
	white-space: nowrap;
}

.annghar-amb-upsell-card__add {
	flex: 0 0 auto;
	border: none;
	border-radius: var(--amb-radius-pill);
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	background: var(--amb-color-accent);
	color: #fff;
	cursor: pointer;
}

/* ---------- Sidebar ---------- */

/* Sticky-footer-in-a-flex-column: the aside's own height is capped
   (`max-height`) but it no longer scrolls itself — `.annghar-amb-sidebar__scroll`
   is the only flexible/shrinkable child (`flex: 1 1 auto` + `min-height: 0`,
   the standard trick that lets a flex item actually shrink below its
   content's natural height instead of forcing the container taller), so
   IT absorbs any overflow and gets its own scrollbar, while
   `.annghar-amb-sidebar__purchase` (`flex: 0 0 auto`) always renders at
   its full natural height and can never be pushed off-screen. */
.annghar-amb-sidebar {
	position: sticky;
	top: 20px;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid var(--amb-color-border);
	border-radius: var(--amb-radius-lg);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-shadow: var(--amb-shadow-lg);
	max-height: calc(100vh - 40px);
}

@media (max-width: 900px) {
	.annghar-amb-sidebar {
		position: static;
		max-height: none;
	}
}

.annghar-amb-sidebar__step-header {
	flex-shrink: 0;
}

/* Section 1 — Review Summary: the sidebar's only scrollable region. */
.annghar-amb-sidebar__scroll {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Section 2 — Purchase: pinned at the bottom, always fully visible. The
   top border reads as a clear boundary once content above it scrolls
   underneath. */
.annghar-amb-sidebar__purchase {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 0 0 auto;
	padding-top: 16px;
	border-top: 1px solid var(--amb-color-border);
}

/* The Step 4 heading reuses the exact same `.annghar-amb-step__*`
   typography as Steps 1-3 verbatim — this wrapper exists only so the
   trio counts as ONE flex item inside the sidebar's own `gap: 18px`
   (without it, that gap would add on top of each element's own margin,
   spacing them out much looser than Steps 1-3 ever are). The subtitle's
   own margin-bottom is zeroed here so the wrapper contributes exactly
   one 18px gap before the packet-fill bar below it, not two stacked
   gaps. */
.annghar-amb-sidebar__step-header .annghar-amb-step__subtitle {
	margin-bottom: 0;
}

.annghar-amb-packet-fill__track {
	height: 14px;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-border);
	overflow: hidden;
}

.annghar-amb-packet-fill__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--amb-color-primary), var(--amb-color-primary-dark));
	border-radius: var(--amb-radius-pill);
	transition: width 320ms var(--amb-ease);
}

.annghar-amb-packet-fill__bar.is-over {
	background: linear-gradient(90deg, var(--amb-color-error), #a52d3d);
}

.annghar-amb-packet-fill__label {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--amb-color-text-muted);
	text-align: center;
}

.annghar-amb-summary {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.annghar-amb-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 14px;
}

.annghar-amb-summary__row dt {
	color: var(--amb-color-text-muted);
}

.annghar-amb-summary__row dd {
	margin: 0;
	font-weight: 700;
}

.annghar-amb-summary__strikethrough {
	text-decoration: line-through;
	color: var(--amb-color-text-muted);
	font-weight: 500 !important;
}

/* "You Save" row reads as a savings highlight, not just another figure. */
.annghar-amb-summary [data-summary-savings-row] dt,
.annghar-amb-summary [data-summary-savings-row] dd {
	color: var(--amb-color-primary);
}

/* Collapsed-by-default "Show/Hide Selected Ingredients" toggle. Reuses
   the exact same grid-template-rows (0fr -> 1fr) technique as the dock's
   own expand panel (see `.annghar-amb-sticky-bar__panel` below) — proven
   not to jump/flicker, so a second, independent animation approach isn't
   introduced just for this. `.annghar-amb-selected-items` itself is
   completely unchanged; it's simply this collapse wrapper's one child,
   whose natural content height is what the "1fr" track resolves to. */
.annghar-amb-selected-items-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 6px 2px;
	border: none;
	background: transparent;
	color: var(--amb-color-primary-dark);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}

.annghar-amb-selected-items-toggle__chevron {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 260ms var(--amb-ease);
}

.annghar-amb-selected-items-toggle[aria-expanded="true"] .annghar-amb-selected-items-toggle__chevron {
	transform: rotate(135deg);
}

/* `overflow: hidden` lives on the WRAPPER, not on `.annghar-amb-selected-items`
   itself — that element keeps its own pre-existing `max-height: 220px` +
   `overflow-y: auto` completely untouched (its own internal scrollbar for
   a very long list still works exactly as before, once expanded). The
   wrapper only needs to clip the animation's in-between states, where
   its own height is briefly smaller than the (unclipped) child. */
.annghar-amb-selected-items-collapse {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	min-height: 0;
	transition: grid-template-rows 280ms ease-in-out;
}

.annghar-amb-selected-items-collapse.is-expanded {
	grid-template-rows: 1fr;
}

.annghar-amb-selected-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.annghar-amb-selected-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px solid var(--amb-color-border);
}

.annghar-amb-selected-item__remove {
	border: none;
	background: none;
	color: var(--amb-color-error);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 2px 6px;
}

.annghar-amb-mix-name label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--amb-color-text-muted);
	margin-bottom: 6px;
}

.annghar-amb-mix-name input {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--amb-radius-md);
	border: 1px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	font-size: 14px;
}

.annghar-amb-mix-name input:focus {
	outline: none;
	border-color: var(--amb-color-primary);
}

/* Goal Mode: name is auto-generated from the goal and locked — greyed out
   so it reads as "auto-generated", not as a disabled/broken field. */
.annghar-amb-mix-name input:disabled {
	background: var(--amb-color-border);
	color: var(--amb-color-text-muted);
	cursor: not-allowed;
}

.annghar-amb-delivery-preference__title {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--amb-color-text-muted);
	margin: 0 0 6px;
}

.annghar-amb-delivery-preference__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}

.annghar-amb-delivery-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--amb-radius-md);
	border: 1px solid var(--amb-color-border);
	background: var(--amb-color-surface-alt);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.annghar-amb-delivery-option input[type="radio"] {
	accent-color: var(--amb-color-primary);
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

.annghar-amb-delivery-option:focus-within {
	border-color: var(--amb-color-primary);
}

.annghar-amb-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.annghar-amb-button {
	border: none;
	border-radius: var(--amb-radius-pill);
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 650;
	cursor: pointer;
	transition: transform var(--amb-duration) var(--amb-ease), box-shadow var(--amb-duration) var(--amb-ease), opacity var(--amb-duration) var(--amb-ease);
}

.annghar-amb-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.annghar-amb-button--primary {
	background: var(--amb-color-primary);
	color: #fff;
}

.annghar-amb-button--primary:hover:not(:disabled) {
	background: var(--amb-color-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--amb-shadow-md);
}

.annghar-amb-button--secondary {
	background: var(--amb-color-surface-alt);
	border: 1px solid var(--amb-color-border);
	color: var(--amb-color-text);
}

.annghar-amb-button--text {
	background: transparent;
	color: var(--amb-color-primary-dark);
	padding: 6px 4px;
}

.annghar-amb-message {
	margin: 0;
	font-size: 13px;
	text-align: center;
	min-height: 1em;
}

.annghar-amb-message--error {
	color: var(--amb-color-error);
}

.annghar-amb-message--success {
	color: var(--amb-color-primary-dark);
}

/* ---------- Mobile sticky action bar ---------- */

@media (max-width: 640px) {
	.annghar-amb-app {
		padding: 14px;
	}

	.annghar-amb-ingredients {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* ---------- Mobile floating purchase dock (iOS-dock-inspired) ---------- */
/* Every value inside is a mirror written by paintPacketFill()/
   renderSummary()/renderSelectedItems()/renderScore() alongside the
   desktop sidebar — see builder.js. Fully inert above the 900px
   breakpoint (the same one the layout already collapses to a single
   column at), regardless of the is-visible/is-expanded classes JS may
   toggle. Floating (not edge-attached): a bottom gap + centred, capped
   width stand in for the old edge-to-edge bar. */

.annghar-amb-sticky-bar {
	display: none;
}

@media (max-width: 900px) {
	.annghar-amb-sticky-bar {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 50%;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		z-index: 1000;
		width: min(94vw, 440px);
		transform: translateX(-50%) translateY(140%);
		transition: transform 320ms var(--amb-ease-spring);
		will-change: transform;
	}

	.annghar-amb-sticky-bar.is-visible {
		transform: translateX(-50%) translateY(0);
	}

	/* While the summary panel is open, this must outrank every other
	   floating surface on the page (a floating cart-icon button and its
	   own drawer/toast/confetti overlays all sit between z-index 100000
	   and 100011) — but stay well under any true modal. */
	.annghar-amb-sticky-bar.is-expanded {
		z-index: 100050;
	}
}

/* The capsule — floating pill, frosted-glass surface. Large radius (34px,
   inside the 30-40px ask), semi-transparent background, subtle border,
   soft shadow. The expanded panel below shares this exact same recipe. */
.annghar-amb-sticky-bar__capsule {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px 10px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(24px);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 34px;
	box-shadow: var(--amb-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Expand/collapse handle — a small tab fused to the top of whatever is
   currently the dock's topmost surface (the capsule when collapsed, the
   expanded panel when open — both share the identical background/blur/
   border recipe, so the tab reads correctly against either). `bottom:
   100%` locks its bottom edge exactly to the wrapper's own top edge
   (its `position:fixed` containing block), with a 2px downward overlap
   to visually paint over that surface's border-top directly beneath it
   — the same background/blur/border as the capsule, and no border on
   the touching edge, is what makes the seam disappear: one continuous
   shape instead of two stacked floating pieces. Reuses the exact same
   is-expanded state/click handler as before; only the shape and
   position changed. An oversized invisible ::before extends the tap
   target to the accessible 44px minimum without affecting the visible
   size. */
.annghar-amb-sticky-bar__expand-trigger {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(2px);
	width: 56px;
	height: 24px;
	padding-top: 3px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: none;
	border-radius: 18px 18px 0 0;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(24px);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	cursor: pointer;
	color: var(--amb-color-primary);
	z-index: 1;
}

.annghar-amb-sticky-bar__expand-trigger::before {
	content: "";
	position: absolute;
	inset: -10px -4px -2px;
}

.annghar-amb-sticky-bar__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 260ms var(--amb-ease-spring);
}

.annghar-amb-sticky-bar.is-expanded .annghar-amb-sticky-bar__chevron {
	transform: rotate(-135deg) translate(-1px, -1px);
}

.annghar-amb-sticky-bar__progress {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.annghar-amb-sticky-bar__track {
	height: 4px;
	border-radius: var(--amb-radius-pill);
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.annghar-amb-sticky-bar__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--amb-color-primary), var(--amb-color-primary-dark));
	border-radius: var(--amb-radius-pill);
	transition: width 320ms var(--amb-ease);
}

.annghar-amb-sticky-bar__bar.is-over {
	background: var(--amb-color-error);
}

.annghar-amb-sticky-bar__fill-label {
	margin: 0;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--amb-color-text-muted);
}

/* Price (left) + delivery select (middle) + CTA (right) share one
   compact row — this, plus the thin progress track above, is the whole
   collapsed capsule. */
.annghar-amb-sticky-bar__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 5px;
}

.annghar-amb-sticky-bar__price {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.annghar-amb-sticky-bar__regular {
	font-size: 11.5px;
	color: var(--amb-color-text-muted);
	text-decoration: line-through;
	white-space: nowrap;
}

.annghar-amb-sticky-bar__sale {
	font-size: 19px;
	font-weight: 750;
	color: var(--amb-color-text);
	white-space: nowrap;
	display: inline-block;
	transition: transform 180ms var(--amb-ease-spring), color 180ms var(--amb-ease);
}

/* Brief scale+colour pulse whenever the displayed price actually
   changes — toggled by builder.js's flashUpdate() helper. The "animated
   counter" feel without re-implementing money formatting as a numeric
   tween. */
.annghar-amb-sticky-bar__sale.is-updated {
	transform: scale(1.1);
	color: var(--amb-color-primary);
}

.annghar-amb-sticky-bar__delivery {
	flex: 0 0 auto;
	max-width: 38%;
}

.annghar-amb-sticky-bar__delivery-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 1px solid var(--amb-color-border);
	background-color: rgba(255, 255, 255, 0.6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border-radius: var(--amb-radius-pill);
	padding: 8px 22px 8px 12px;
	font-size: 11px;
	font-weight: 600;
	color: var(--amb-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.annghar-amb-sticky-bar__delivery-select:focus {
	outline: 2px solid var(--amb-color-primary);
	outline-offset: 1px;
}

/* Primary CTA — green, pill, slightly larger than the delivery select
   next to it. The visible box stays compact (keeps the whole capsule
   short); an invisible ::before pseudo-element enlarges the actual tap
   target to the accessible 44x44px minimum without affecting layout. */
.annghar-amb-sticky-bar__cta {
	position: relative;
	flex: 0 0 auto;
	padding: 11px 20px;
	border: none;
	border-radius: var(--amb-radius-pill);
	background: var(--amb-color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transform: scale(1);
	transition: transform 140ms ease, box-shadow 220ms var(--amb-ease), background 220ms var(--amb-ease);
	will-change: transform;
}

.annghar-amb-sticky-bar__cta::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.annghar-amb-sticky-bar__cta:hover:not(:disabled) {
	background: var(--amb-color-primary-dark);
	box-shadow: var(--amb-shadow-md);
}

.annghar-amb-sticky-bar__cta:active:not(:disabled) {
	transform: scale(0.94);
}

/* Disabled because the mix isn't ready yet (packet incomplete/invalid —
   `calc.can_checkout` false, the exact same condition the desktop
   button already disables on) — greyed out and unclickable, never a
   spinner: this must read as "not ready", not "processing". */
.annghar-amb-sticky-bar__cta:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

/* Disabled because a real Add to Cart request is in flight (`is-loading`,
   toggled only inside addToCart()) overrides the dimmed look above —
   this is "processing", not "not ready", so it stays fully coloured
   with just the spinner replacing the label. */
.annghar-amb-sticky-bar__cta.is-loading:disabled {
	opacity: 1;
	cursor: wait;
}

.annghar-amb-sticky-bar__cta-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 160ms var(--amb-ease);
}

.annghar-amb-sticky-bar__cta.is-loading .annghar-amb-sticky-bar__cta-spinner {
	opacity: 1;
	animation: annghar-amb-spin 700ms linear infinite;
}

.annghar-amb-sticky-bar__cta.is-loading .annghar-amb-sticky-bar__cta-label {
	opacity: 0;
}

.annghar-amb-sticky-bar__cta.is-success {
	background: var(--amb-color-primary-dark);
}

@keyframes annghar-amb-spin {
	to {
		transform: rotate(360deg);
	}
}

.annghar-amb-sticky-bar__message {
	margin: 4px 0 0;
}

.annghar-amb-sticky-bar__message:empty {
	display: none;
}

/* Expand/collapse via grid-template-rows (0fr -> 1fr) rather than height
   or the `hidden` attribute, so it animates smoothly on the compositor
   instead of jumping — the panel stays rendered (never display:none) at
   all times, just visually collapsed to zero height. `order: -1` plus
   the wrapper's column layout puts the panel ABOVE the capsule, so
   expanding always grows the whole dock upward, never downward — the
   capsule's own bottom position never moves. */
.annghar-amb-sticky-bar__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms var(--amb-ease-spring);
	order: -1;
}

.annghar-amb-sticky-bar.is-expanded .annghar-amb-sticky-bar__panel {
	grid-template-rows: 1fr;
}

.annghar-amb-sticky-bar__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.annghar-amb-sticky-bar.is-expanded .annghar-amb-sticky-bar__panel-inner {
	margin-bottom: 10px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: saturate(180%) blur(24px);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 26px;
	box-shadow: var(--amb-shadow-lg);
	max-height: min(60vh, 480px);
	overflow-y: auto;
}

.annghar-amb-sticky-bar__panel-summary {
	margin-bottom: 12px;
}

.annghar-amb-sticky-bar__panel-items {
	max-height: 180px;
}

/* ---------- Floating toast (replaces the inline "Mix Saved" message) ---------- */

.annghar-amb-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(12px);
	max-width: calc(100vw - 32px);
	background: var(--amb-color-text);
	color: #fff;
	padding: 12px 22px;
	border-radius: var(--amb-radius-pill);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	box-shadow: var(--amb-shadow-lg);
	z-index: 100060;
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms var(--amb-ease), transform 260ms var(--amb-ease);
}

.annghar-amb-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
	.annghar-amb-toast {
		/* Clears the floating purchase dock instead of sitting behind it
		   (dock's own bottom gap + its collapsed capsule height). */
		bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 96px);
	}
}

/* ---------- My Mixes (My Account) ---------- */

.annghar-amb-my-mixes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.annghar-amb-my-mix-card {
	background: var(--amb-color-surface, #fff);
	border: 1px solid var(--amb-color-border, #e5e5ea);
	border-radius: var(--amb-radius-md, 16px);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.annghar-amb-my-mix-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.annghar-amb-my-mix-card__name {
	margin: 0;
	font-size: 16px;
}

.annghar-amb-my-mix-card__date {
	font-size: 11.5px;
	color: var(--amb-color-text-muted, #6e6e73);
	white-space: nowrap;
}

.annghar-amb-my-mix-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: var(--amb-color-text-muted, #6e6e73);
}

.annghar-amb-my-mix-card__rename {
	display: flex;
	gap: 8px;
}

.annghar-amb-my-mix-card__rename input {
	flex: 1;
	padding: 8px 10px;
	border-radius: var(--amb-radius-sm, 10px);
	border: 1px solid var(--amb-color-border, #e5e5ea);
}

.annghar-amb-my-mix-card__subscribe {
	display: flex;
	gap: 8px;
}

.annghar-amb-my-mix-card__subscribe select {
	flex: 1;
	padding: 8px;
	border-radius: var(--amb-radius-sm, 10px);
	border: 1px solid var(--amb-color-border, #e5e5ea);
}

.annghar-amb-my-mix-card__share input {
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--amb-radius-sm, 10px);
	border: 1px solid var(--amb-color-border, #e5e5ea);
	font-size: 12px;
	background: var(--amb-color-surface-alt, #fbfbfd);
}

.annghar-amb-compare-checkbox {
	margin-right: 4px;
}

.annghar-amb-compare-panel {
	margin-bottom: 20px;
	overflow-x: auto;
}

.annghar-amb-my-mix-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: auto;
}

/* ---------- Gamification badges (My Account) ---------- */

.annghar-amb-badge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.annghar-amb-badge-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 8px;
	border-radius: var(--amb-radius-md, 16px);
	background: var(--amb-color-surface-alt, #fbfbfd);
	border: 1px solid var(--amb-color-border, #e5e5ea);
	color: #c2c2c7;
	opacity: 0.55;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
}

.annghar-amb-badge-tile .dashicons {
	width: 28px;
	height: 28px;
	font-size: 28px;
}

.annghar-amb-badge-tile.is-earned {
	color: var(--amb-color-primary-dark, #145439);
	opacity: 1;
	border-color: var(--amb-color-primary, #1b6e4c);
	background: var(--amb-color-primary-tint, #e6f3ec);
}

/* ---------- Community Mix Gallery ---------- */

.annghar-amb-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.annghar-amb-gallery-card {
	background: var(--amb-color-surface);
	border: 1px solid var(--amb-color-border);
	border-radius: var(--amb-radius-md);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.annghar-amb-gallery-card__name {
	margin: 0;
	font-size: 16px;
}

.annghar-amb-gallery-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-gallery-card__stats {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-gallery-card__like {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--amb-color-text-muted);
}

.annghar-amb-gallery-card__like.is-liked {
	color: var(--amb-color-error);
	font-weight: 700;
}

.annghar-amb-gallery-card__comments {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.annghar-amb-gallery-card__comments textarea {
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--amb-radius-sm);
	border: 1px solid var(--amb-color-border);
	font-family: inherit;
	font-size: 13px;
}

.annghar-amb-gallery-comment {
	font-size: 12.5px;
	padding: 6px 0;
	border-bottom: 1px solid var(--amb-color-border);
}

.annghar-amb-gallery-comment p {
	margin: 2px 0 0;
}

/* ---------- Subscriptions (My Subscriptions + AnnGhar Mixes) ---------- */

.annghar-amb-subscription-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}

.annghar-amb-subscription-card {
	background: var(--amb-color-surface, #fff);
	border: 1px solid var(--amb-color-border, #e5e5ea);
	border-radius: var(--amb-radius-md, 16px);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.annghar-amb-subscription-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.annghar-amb-subscription-card__header h3 {
	margin: 0;
	font-size: 16px;
}

.annghar-amb-subscription-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px 16px;
	margin: 0;
	font-size: 13px;
}

.annghar-amb-subscription-card__meta dt {
	color: var(--amb-color-text-muted, #6e6e73);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
}

.annghar-amb-subscription-card__meta dd {
	margin: 2px 0 0;
	font-weight: 500;
}

.annghar-amb-subscription-card__ingredients {
	font-size: 12.5px;
	color: var(--amb-color-text-muted, #6e6e73);
	margin: 0;
}

.annghar-amb-subscription-card__frequency-form {
	display: flex;
	gap: 8px;
}

.annghar-amb-subscription-card__frequency-form select {
	flex: 1;
	padding: 8px;
	border-radius: var(--amb-radius-sm, 10px);
	border: 1px solid var(--amb-color-border, #e5e5ea);
}

.annghar-amb-subscription-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}

/* Native <details>/<summary> — collapsible with zero JS required for the
   expand/collapse mechanic itself; the shared script only lazy-loads the
   row data the first time a panel is opened. */
.annghar-amb-subscription-card__history summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 0;
}

.annghar-amb-history-table-wrap {
	overflow-x: auto;
}

.annghar-amb-history-loading,
.annghar-amb-history-error {
	font-size: 12.5px;
	color: var(--amb-color-text-muted, #6e6e73);
}

/* Large, unambiguous touch targets on mobile — every subscription action
   button/link becomes a full-width, generously padded row instead of a
   dense inline button cluster. */
@media (max-width: 640px) {
	.annghar-amb-subscription-grid {
		grid-template-columns: 1fr;
	}

	.annghar-amb-subscription-card__meta {
		grid-template-columns: 1fr 1fr;
	}

	.annghar-amb-subscription-card__actions {
		flex-direction: column;
	}

	.annghar-amb-subscription-card__actions .annghar-amb-button {
		width: 100%;
		min-height: 44px;
		text-align: center;
	}

	.annghar-amb-subscription-card__frequency-form {
		flex-direction: column;
	}

	.annghar-amb-subscription-card__frequency-form select,
	.annghar-amb-subscription-card__frequency-form .annghar-amb-button {
		width: 100%;
		min-height: 44px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.annghar-amb-app * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}