/*
 * Price-per-unit breakdown on variable product pages.
 *
 * Tokens mirror calculator.css so the two CRO surfaces stay in step; the values
 * are the same functional placeholders carried over from cro.css (#1d1d1f ink,
 * #0066cc accent, #1d7a4f green), NOT a brand decision. Swap all four token
 * blocks at once when Amino's palette is defined.
 *
 * Every rule is namespaced under .amino-ppu / .amino-ppu-selected. The rows are
 * real <button> elements sitting inside WooCommerce's add-to-cart <form>, so the
 * button reset below is load-bearing: Astra and WooCommerce both style bare
 * `button` inside .woocommerce forms, and without the reset these would inherit
 * the "Add to cart" button's fill.
 */

.amino-ppu {
	--ppu-accent: #0066cc;
	--ppu-good: #1d7a4f;
	--ppu-ink: #1d1d1f;
	--ppu-muted: #6e6e73;
	--ppu-line: #e8e8ed;
	--ppu-surface: #f5f5f7;
	font-family: inherit;
	color: var(--ppu-ink);
	margin: 14px 0 18px;
	box-sizing: border-box;
}
.amino-ppu *,
.amino-ppu *::before,
.amino-ppu *::after { box-sizing: border-box; }

/* ── Header ── */
.amino-ppu__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
	margin-bottom: 8px;
}
.amino-ppu__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ppu-muted);
}
.amino-ppu__hint {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ppu-muted);
}

/* ── Rows ── */
.amino-ppu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.amino-ppu__item { margin: 0; padding: 0; }
.amino-ppu__item::marker { content: ''; }

/*
 * SPECIFICITY, not decoration. Astra and WooCommerce both style
 * `.woocommerce button.button` (0,2,1), which was beating the plain
 * `.amino-ppu__row` (0,1,0) class and repainting every row with the Add to Cart
 * fill — four solid blue bars louder than the button they sat above. Qualifying
 * with the parent class and the element name gives (0,3,1), which wins without
 * resorting to !important.
 */
.amino-ppu .amino-ppu__list button.amino-ppu__row {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 2px;
	width: 100%;
	margin: 0;
	padding: 10px 13px;
	background: #fff;
	border: 1px solid var(--ppu-line);
	border-radius: 10px;
	box-shadow: none;
	color: var(--ppu-ink);
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.amino-ppu .amino-ppu__list button.amino-ppu__row:hover {
	background: var(--ppu-surface);
	border-color: var(--ppu-accent);
	color: var(--ppu-ink);
}
.amino-ppu .amino-ppu__list button.amino-ppu__row:focus-visible {
	outline: none;
	border-color: var(--ppu-accent);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
.amino-ppu .amino-ppu__list button.amino-ppu__row.is-selected {
	background: #f0f7ff;
	border-color: var(--ppu-accent);
	box-shadow: inset 0 0 0 1px var(--ppu-accent);
}

.amino-ppu__size {
	grid-column: 1;
	grid-row: 1;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.amino-ppu__price {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.85rem;
	color: var(--ppu-muted);
}
.amino-ppu__rate {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ppu-accent);
	white-space: nowrap;
}
.amino-ppu__per {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--ppu-muted);
}
.amino-ppu__tags {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
}
.amino-ppu__tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 100px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.amino-ppu__tag--best {
	background: var(--ppu-good);
	color: #fff;
	text-transform: uppercase;
}
.amino-ppu__tag--save {
	background: rgba(29, 122, 79, 0.1);
	color: var(--ppu-good);
}

/* ── Per-unit line beside the selected variation's price ── */
/* Lives inside .single_variation_wrap, which WooCommerce slides shut when no
   variation is chosen — so this hides with it, as intended. */
.amino-ppu-selected {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 2px 0 12px;
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.3;
}
.amino-ppu-selected[hidden] { display: none; }
.amino-ppu-selected__rate {
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0066cc;
}
.amino-ppu-selected__save {
	padding: 2px 8px;
	border-radius: 100px;
	background: rgba(29, 122, 79, 0.1);
	color: #1d7a4f;
	font-size: 0.78rem;
	font-weight: 700;
}
.amino-ppu-selected__save[hidden] { display: none; }

/* ── Narrow screens ──
   Below ~360px the two-column row can squeeze the size label, so let the rate
   drop under it rather than truncating a size the buyer is choosing between. */
@media (max-width: 380px) {
	.amino-ppu__row {
		grid-template-columns: minmax(0, 1fr);
	}
	.amino-ppu__size  { grid-column: 1; grid-row: 1; }
	.amino-ppu__rate  { grid-column: 1; grid-row: 2; justify-self: start; }
	.amino-ppu__price { grid-column: 1; grid-row: 3; }
	.amino-ppu__tags  { grid-column: 1; grid-row: 4; justify-self: start; justify-content: flex-start; }
}


/* ──────────────────────────────────────────────────────────────────────────
 * When this selector owns variation choice, hide WooCommerce's own size table.
 *
 * The class is added by price-per-unit.js ONLY after it has confirmed a usable
 * <select> and wired the rows to it. If the product was suppressed (mixed units,
 * capsules beside vials, >30 variations) the class is never added and the native
 * dropdown remains visible — there must never be zero size controls.
 *
 * The table is hidden, not removed: WooCommerce's variation script reads and
 * writes that <select>, and reset_data/show_variation still fire against it.
 * clip-path keeps it operable by assistive tech that follows the label, while
 * our radiogroup is the visible control.
 * ────────────────────────────────────────────────────────────────────────── */
form.variations_form.amino-ppu-owns-selection table.variations {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The per-mg block is the size chooser now, so it leads rather than trails. */
form.variations_form.amino-ppu-owns-selection .amino-ppu {
	margin-top: 4px;
}