/**
 * The cart PAGE.
 *
 * Every number here was measured off the design render rather than eyeballed, at a
 * 1440px viewport where the layout is at its full 1192px. Where a value looks odd
 * (15.5px, 14.5px, 1.47px of letter-spacing) it is odd in the design too — those come
 * from the export's own rounding and are reproduced rather than tidied, because
 * "tidied" is how a rebuild drifts a pixel at a time.
 *
 * SCOPING
 *
 * Everything is under `.optic-page`, and the theme's own cart markup is hidden rather
 * than removed (see class-optic-cart-page.php). Astra and Elementor both style
 * `.woocommerce` broadly, so component styles here set what they need explicitly
 * instead of inheriting and hoping.
 *
 * RESPONSIVE
 *
 * The design file has no breakpoints — it is a desktop render and stops being usable
 * below about 900px. Everything below the first media query is therefore a decision,
 * not a measurement, and is marked as such.
 */

.optic-page {
	--ocp-accent: #1569ff;
	--ocp-text: #181818;
	--ocp-muted: #6f7887;
	--ocp-faint: #9aa3ae;
	--ocp-border: #e6e8ec;
	--ocp-badge-bg: #eaf1ff;
	/* TWO greens, both deliberate and both on the page: the darker one is text,
	   the lighter one is only ever the progress-bar fill. Using the fill colour for
	   the label makes 'FREE' noticeably lighter than the design. */
	--ocp-success-text: #078a5b;
	--ocp-bar-fill: #0bc17f;
	--ocp-track: #f3f4f6;
	--ocp-card: #fff;

	--ocp-radius-card: 18px;
	--ocp-radius-bar: 16px;
	--ocp-radius-thumb: 14px;
	--ocp-radius-pill: 999px;

	--ocp-gap: 24px;
	--ocp-pad: 24px;

	box-sizing: border-box;
	width: 100%;
	/*
	 * No horizontal padding here.
	 *
	 * Astra's `.ast-container` already gives 1200px at x120 on this site, and adding
	 * 24px each side on top squeezed the content to 1152 — the theme's inset and ours
	 * stacking. With only a max-width, `margin: auto` centres 1192 inside 1200 and
	 * lands the content at x124, which is where the design puts it.
	 *
	 * The max-width stays so a theme with no container of its own does not go
	 * full-bleed.
	 */
	max-width: 1192px;
	margin: 0 auto;
	padding: 0;
	color: var( --ocp-text );
	font-size: 14px;
	/*
	 * `normal`, not a number.
	 *
	 * The design's line-box ratio runs between 1.18 and 1.24 depending on font size —
	 * it is Inter's own metrics, not a chosen value. Any single number drifts up to a
	 * pixel per line and compounds: at 1.45 the first item row landed 12px low, and
	 * even at 1.2 every summary row was still 1px out.
	 *
	 * This also means the font matters. Inter is what the design embeds; the stack
	 * below falls back to the system UI face, which is metrically close but not
	 * identical. If the theme loads Inter, this matches exactly.
	 */
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: normal;
}

.optic-page *,
.optic-page *::before,
.optic-page *::after {
	box-sizing: border-box;
}

/* The whole page is inert while a change is in flight — a second click on a
   quantity button before the first has landed is the easiest way to order two. */
.optic-page.is-busy {
	pointer-events: none;
}

.optic-page.is-busy .optic-page__grid,
.optic-page.is-busy .optic-page__shipping {
	opacity: 0.6;
	transition: opacity 0.12s ease;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.optic-page__head {
	padding: 35px 0 0;
}

.optic-page__title {
	margin: 0;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var( --ocp-text );
}

.optic-page__continue {
	display: inline-block;
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 500;
	color: var( --ocp-accent );
	text-decoration: none;
}

.optic-page__continue:hover {
	text-decoration: underline;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.optic-page .optic-card {
	background: var( --ocp-card );
	border: 1px solid var( --ocp-border );
	border-radius: var( --ocp-radius-card );
}

/* ── Free-shipping bar ───────────────────────────────────────────────────── */

.optic-page__shipping {
	margin-top: 24px;
}

/*
 * The card is this element, not an inner wrapper.
 *
 * An earlier version styled `.optic-cart-shipping-inline`, a class that does not
 * exist: `get_shipping_bar_html()` returns a bare `<p class="optic-cart-shipping-text">`
 * and a track div with no container around them. The card never rendered, and the bar
 * floated on the page background — visible in the first live screenshot.
 */
.optic-page__shipping:not( :empty ) {
	background: var( --ocp-card );
	border: 1px solid var( --ocp-border );
	border-radius: var( --ocp-radius-bar );
	padding: 14px 24px 16px;
}

/*
 * The bar's markup is the drawer's, reused so the threshold wording and the
 * unlocked state never differ between the two views. Only the shape changes here:
 * in the drawer it is a strip inside a 400px panel, on the page it is a full-width
 * card. Hence the restyle rather than a second implementation.
 */
.optic-page .optic-cart-shipping-text {
	display: block;
	margin: 0 0 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var( --ocp-success-text );
}

.optic-page .optic-cart-shipping-track {
	height: 8px;
	border-radius: var( --ocp-radius-pill );
	background: var( --ocp-track );
	overflow: hidden;
}

.optic-page .optic-cart-shipping-fill {
	height: 100%;
	border-radius: var( --ocp-radius-pill );
	background: var( --ocp-bar-fill );
	transition: width 0.3s ease;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.optic-page__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var( --ocp-gap );
	align-items: start;
	margin: var( --ocp-gap ) 0 72px;
}

.optic-page__main {
	min-width: 0;
}

.optic-page__side {
	min-width: 0;
}

/* ── Items ───────────────────────────────────────────────────────────────── */

.optic-page__items {
	overflow: hidden;
}

.optic-items__head {
	display: grid;
	grid-template-columns: 1fr 94px 108px;
	align-items: center;
	gap: 12px;
	padding: 14px var( --ocp-pad );
	border-bottom: 1px solid var( --ocp-border );
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ocp-muted );
}

.optic-items__head span:nth-child( 2 ) {
	text-align: center;
}

.optic-items__head span:nth-child( 3 ) {
	text-align: right;
}

.optic-item {
	display: grid;
	grid-template-columns: 1fr 94px 108px;
	align-items: center;
	gap: 12px;
	padding: 20px var( --ocp-pad );
}

.optic-item + .optic-item {
	border-top: 1px solid var( --ocp-border );
}

.optic-item__product {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.optic-item__thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: var( --ocp-radius-thumb );
	background: linear-gradient( 180deg, #eef2f7 0%, #e7ecf3 100% );
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.optic-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.optic-item__text {
	min-width: 0;
}

.optic-item__name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ocp-text );
}

.optic-item__name a {
	color: inherit;
	text-decoration: none;
}

.optic-item__name a:hover {
	text-decoration: underline;
}

.optic-item__meta {
	margin-top: 4px;
	font-size: 12.5px;
	color: var( --ocp-muted );
}

/*
 * WooCommerce's own item-data markup is a <dl>. Flattened to a single line here so
 * variation attributes and subscription terms read as the design's "10 mg · Hero
 * Club monthly · Research Use Only" rather than a stacked definition list.
 */
.optic-item__meta dl,
.optic-item__meta dt,
.optic-item__meta dd,
.optic-item__meta p {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.optic-item__meta dt {
	font-weight: 400;
}

.optic-item__meta dt::after {
	content: ": ";
}

.optic-item__meta dd + dt::before {
	content: " · ";
}

.optic-item__badge {
	display: inline-block;
	margin-top: 8px;
	padding: 2px 10px;
	border-radius: var( --ocp-radius-pill );
	background: var( --ocp-badge-bg );
	color: var( --ocp-accent );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.optic-item__unit {
	margin-top: 6px;
	font-size: 13px;
	color: var( --ocp-muted );
}

.optic-item__was {
	margin-right: 4px;
	color: var( --ocp-faint );
	text-decoration: line-through;
}

.optic-item__each {
	color: var( --ocp-faint );
}

/* ── Quantity ────────────────────────────────────────────────────────────── */

.optic-item__qty {
	display: flex;
	justify-content: center;
}

.optic-qty {
	display: inline-flex;
	align-items: center;
	/* 28 + 10 + 18 + 10 + 28 = 94, exactly as the source declares it. */
	gap: 10px;
}

.optic-page .optic-qty__btn {
	width: 28px;
	height: 28px;
	padding: 0;
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --ocp-border );
	border-radius: 50%;
	background: #fff;
	color: var( --ocp-text );
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.optic-page .optic-qty__btn:hover {
	border-color: var( --ocp-accent );
	background: var( --ocp-badge-bg );
}

/*
 * A stepper button at its limit must LOOK spent. Without this the disabled
 * attribute is invisible and the button reads as broken rather than as finished.
 */
.optic-page .optic-qty__btn:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/*
 * A line whose quantity cannot move shows the number alone. Same decision as the
 * drawer's `.optic-cart-item-qty--fixed`, and the same reason: WooCommerce's own
 * templates render no control for such a line either.
 */
.optic-page .optic-qty--fixed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
}

.optic-page .optic-qty__input {
	width: 18px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var( --ocp-text );
	-moz-appearance: textfield;
	appearance: textfield;
}

.optic-page .optic-qty__input::-webkit-outer-spin-button,
.optic-page .optic-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Line total ──────────────────────────────────────────────────────────── */

.optic-item__total {
	text-align: right;
}

.optic-item__line {
	font-size: 15px;
	font-weight: 700;
	color: var( --ocp-text );
	white-space: nowrap;
}

.optic-page .optic-item__remove {
	margin-top: 5px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 11.5px;
	color: var( --ocp-faint );
	text-decoration: underline;
	cursor: pointer;
}

.optic-page .optic-item__remove:hover {
	color: var( --ocp-text );
}

/* ── Empty cart ──────────────────────────────────────────────────────────── */

/*
 * The empty state sits INSIDE the items card, where the list would be, so the page
 * keeps its shape: the free-shipping bar, the upsells and the summary all stay put
 * and stay usable. An empty cart is then one click from not being empty.
 */
.optic-page__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 48px var( --ocp-pad );
	text-align: center;
}

.optic-page__empty-text {
	margin: 0;
	font-size: 15.5px;
	color: var( --ocp-muted );
}

.optic-page .optic-page__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 12px 24px;
	border-radius: var( --ocp-radius-pill ) !important;
	background: var( --ocp-accent );
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	transition: filter 0.12s ease;
}

.optic-page .optic-page__empty-cta:hover {
	filter: brightness( 1.06 );
}

/*
 * Disabled checkout: visibly unavailable rather than gone.
 *
 * `pointer-events: none` alone would leave it looking live to anyone who does not
 * try it, so the colour carries the state too.
 */
.optic-page .optic-summary__checkout.is-disabled {
	background: #c9ced6;
	color: #fff !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Upsells ─────────────────────────────────────────────────────────────── */

.optic-page__upsell:not( :empty ) {
	margin-top: 16px;
}

.optic-page .optic-upsells {
	padding: 20px var( --ocp-pad );
}

.optic-page .optic-upsells__heading {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ocp-muted );
}

/*
 * The drawer renders upsells as a one-at-a-time slider, because 400px only fits one.
 * The page has room for the list, so the carousel chrome is dropped and the track is
 * unwound into a column. The markup is untouched — only its layout changes.
 */
.optic-page .optic-cart-upsells-arrow,
.optic-page .optic-cart-upsells-label {
	display: none;
}

.optic-page .optic-cart-upsells-viewport,
.optic-page .optic-cart-upsells-track-wrap {
	overflow: visible;
}

.optic-page .optic-cart-upsells-track {
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: none !important;
}

.optic-page .optic-cart-upsell-item {
	width: 100%;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: var( --ocp-radius-thumb );
	background: linear-gradient( 180deg, #eef4ff 0%, #e8f0ff 100% );
}

.optic-page .optic-cart-upsell-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.optic-page .optic-cart-upsell-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.optic-page .optic-cart-upsell-info {
	flex: 1 1 auto;
	min-width: 0;
}

.optic-page .optic-cart-upsell-title {
	font-size: 14px;
	font-weight: 600;
	color: var( --ocp-text );
}

.optic-page .optic-cart-upsell-desc {
	margin-top: 1px;
	font-size: 12px;
	color: var( --ocp-muted );
}

.optic-page .optic-cart-upsell-btn {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: var( --ocp-radius-pill );
	background: var( --ocp-accent );
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.optic-page .optic-cart-upsell-btn:hover {
	filter: brightness( 1.06 );
}

/* ── Order summary ───────────────────────────────────────────────────────── */

.optic-page .optic-summary {
	padding: var( --ocp-pad );
	position: sticky;
	top: 24px;
}

.optic-page .optic-summary__heading {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var( --ocp-text );
}

.optic-summary__coupon {
	display: flex;
	gap: 8px;
}

.optic-page .optic-summary__code {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 10px 16px;
	border: 1px solid var( --ocp-border );
	border-radius: var( --ocp-radius-pill );
	background: #fff;
	font-size: 13px;
	color: var( --ocp-text );
}

.optic-page .optic-summary__code::placeholder {
	color: var( --ocp-faint );
}

.optic-page .optic-summary__code:focus {
	outline: none;
	border-color: var( --ocp-accent );
}

.optic-page .optic-summary__apply {
	flex: 0 0 auto;
	height: 38px;
	padding: 10px 18px;
	border: 1px solid var( --ocp-border );
	border-radius: var( --ocp-radius-pill );
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --ocp-text );
	cursor: pointer;
}

.optic-page .optic-summary__apply:hover {
	border-color: var( --ocp-accent );
	color: var( --ocp-accent );
}

.optic-summary__codes:not( :empty ) {
	margin-top: 10px;
}

.optic-summary__msg:not( :empty ) {
	margin-top: 8px;
	font-size: 12.5px;
	color: #c0392b;
}

.optic-summary__lines {
	margin: 14px 0 0;
	padding: 0;
}

.optic-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var( --ocp-border );
	font-size: 13.5px;
}

.optic-summary__row dt {
	margin: 0;
	color: var( --ocp-muted );
	font-weight: 400;
}

.optic-summary__row dd {
	margin: 0;
	color: var( --ocp-text );
	font-weight: 600;
	white-space: nowrap;
}

/* Discounts read as money coming off, so they are green rather than another
   black figure the eye has to work out the sign of. */
.optic-page .optic-summary__discount {
	color: var( --ocp-success-text );
	font-weight: 600;
}

.optic-page .optic-summary__drop {
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 11.5px;
	color: var( --ocp-faint );
	text-decoration: underline !important;
	cursor: pointer;
}

.optic-page .optic-summary__drop:hover {
	color: var( --ocp-text );
}

.optic-page .optic-summary__free {
	color: var( --ocp-success-text );
	font-weight: 700;
	letter-spacing: 0.3px;
}

.optic-page .optic-summary__pending {
	color: var( --ocp-muted );
	font-weight: 400;
	font-size: 12.5px;
}

.optic-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0 14px;
	font-size: 15px;
	font-weight: 600;
}

.optic-summary__amount {
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}

.optic-page .optic-summary__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 45px;
	padding: 14px 24px;
	border-radius: var( --ocp-radius-pill );
	background: var( --ocp-accent );
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.12s ease;
}

.optic-page .optic-summary__checkout:hover {
	filter: brightness( 1.06 );
	color: #fff;
}

.optic-summary__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 10.5px;
	color: var( --ocp-faint );
}

.optic-summary__trust li + li::before {
	content: "·";
	margin-right: 14px;
	color: var( --ocp-border );
}

.optic-page__disclaimer {
	margin: 16px 0 0;
	padding: 16px 18px;
	border-radius: var( --ocp-radius-thumb );
	background: #eef4ff;
	font-size: 12px;
	line-height: 1.5;
	color: var( --ocp-muted );
}

/* =========================================================================
   THEME OVERRIDES
   Astra and Elementor style links, inputs and buttons site-wide, and they win on
   specificity against a single class. Each rule below is here because the live
   page was measured and something else was winning — not defensively.
   ========================================================================= */

/*
 * The page background.
 *
 * The design's #F3F4F6 is the page itself, not a wrapper: every ancestor between
 * `.optic-page` and <body> is transparent, and body is what paints white. The class
 * is added by PHP only on the cart, so no other page changes colour.
 */
body.optic-cart-page {
	background-color: #f3f4f6;
}

/*
 * The container width, reclaimed from the theme.
 *
 * Astra applies `.entry-content[data-ast-blocks-layout] > *` at specificity (0,2,0)
 * with its own content-width variable, which resolves to 1200px here and beat the
 * plain `.optic-page` rule at (0,1,0). Scoping through the body class this component
 * already adds gives (0,2,1) — enough to win on merit, so no !important is needed for
 * a layout property.
 *
 * 1192 inside Astra's 1200 centres to x124, which is where the design puts it.
 */
body.optic-cart-page .optic-page {
	max-width: 1192px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Nothing in this layout is underlined.
 *
 * `!important`, and deliberately so. Measured on the live page with CDP, the winner
 * is `.ast-single-post .entry-content a` at specificity (0,2,1) — Astra targets the
 * content area more specifically than a plugin can target its own component, and
 * WooCommerce does the same to inputs. Escalating class-by-class is a race a plugin
 * loses under the next theme, so the small set of purely visual resets below is
 * forced instead.
 *
 * Scoped to `.optic-page`, so nothing outside this component is affected.
 */
.optic-page a,
.optic-page a:hover,
.optic-page a:focus,
.optic-page button {
	text-decoration: none !important;
	box-shadow: none !important;
}

.optic-page .optic-page__continue:hover,
.optic-page .optic-item__name a:hover,
.optic-page .optic-item__remove {
	text-decoration: underline !important;
}

/*
 * Form controls.
 *
 * Astra sets `border-radius: 2px` and `4px` on every input, and WooCommerce adds
 * `border-radius: 0` on top for `.woocommerce input[type="text"]`. All three were
 * beating the pill on the live page.
 */
.optic-page input[type="text"],
.optic-page input[type="number"],
.optic-page button {
	font-family: inherit;
	line-height: normal;
}

.optic-page .optic-summary__code,
.optic-page .optic-summary__code:focus {
	border: 1px solid var( --ocp-border ) !important;
	border-radius: var( --ocp-radius-pill ) !important;
	background-color: #fff !important;
	box-shadow: none !important;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 10px 16px;
}

.optic-page .optic-summary__code:focus {
	border-color: var( --ocp-accent ) !important;
}

.optic-page .optic-summary__apply,
.optic-page .optic-cart-upsell-btn,
.optic-page .optic-qty__btn {
	min-height: 0;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
}

.optic-page .optic-qty__btn {
	border-radius: 50% !important;
}

.optic-page .optic-summary__apply,
.optic-page .optic-cart-upsell-btn,
.optic-page .optic-summary__checkout {
	border-radius: var( --ocp-radius-pill ) !important;
}

.optic-page .optic-summary__checkout,
.optic-page .optic-summary__checkout:hover,
.optic-page .optic-summary__checkout:focus {
	color: #fff !important;
	background-color: var( --ocp-accent );
}

/* Astra gives headings a bottom margin; ours are spaced by their containers. */
.optic-page h1,
.optic-page h2 {
	margin-bottom: 0;
}

/* =========================================================================
   RESPONSIVE — a decision, not a measurement.
   The design file is a desktop render with no breakpoints; below roughly 900px
   its columns simply overflow. Everything here is therefore new work, built to
   the same tokens.
   ========================================================================= */

/*
 * TOUCH TARGETS — keyed on the input device, not on the width.
 *
 * Every size above this line is measured off the design, which is a 1440px desktop
 * render made for a mouse. A cursor hits a 28px circle exactly; a fingertip covers
 * about 9mm, which is ~34 CSS px, so the quantity stepper — the most-tapped control
 * on the page — was smaller than the finger pressing it. The failure mode is not a
 * miss, it is hitting `−` when `+` was meant, one screen from checkout.
 *
 * These first went in the 720px block, alongside the layout changes. Measuring the
 * live page showed why that was wrong: an iPad in portrait is 768px, so the one
 * device category this exists for — a screen operated by a finger — sat in the gap
 * between 720 and the desktop rules and kept the 28px buttons.
 *
 * `pointer: coarse` asks the question the sizes are actually answering. The width
 * clause stays beside it so that a phone misreporting its pointer is still covered.
 *
 * The comma is an OR, so a narrow desktop window gets the larger controls as well.
 * That is a knowing trade, not an oversight: a 44px control under a mouse is merely
 * roomy, while a 28px control under a thumb is a mis-tap on a destructive action, and
 * only one of those two mistakes costs anything. (An earlier version of this comment
 * claimed the opposite — that a narrow desktop window "correctly does not" get them.
 * It does. The comment was describing an `and` that the code never contained.)
 *
 * This block sits BEFORE the layout breakpoints on purpose: 720 and 560 need to be
 * able to override it, and in CSS that is decided by source order, not by which media
 * query is narrower.
 *
 * Sizes are the recommended floor for touch (Apple 44, Material 48). The stepper stays
 * at 36: the two buttons must read as a pair with the quantity between them, and 44
 * apiece makes the group wider than the product name beside it.
 */
@media ( pointer: coarse ), ( max-width: 860px ) {
	.optic-page .optic-qty__btn {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
		font-size: 17px;
	}

	/*
	 * The track has to grow with the control standing in it.
	 *
	 * 94px is not a round number, it is the stepper's own arithmetic: the comment on
	 * `.optic-qty` spells it out as 28 + 10 + 18 + 10 + 28. Enlarging the buttons to
	 * 36 makes that group 110px, and the first cut of this block did exactly that
	 * while leaving the track at 94 — a 110px control in a 94px cell for every width
	 * from 721 to 860, and, because `pointer: coarse` carries no upper bound, on an
	 * iPad in landscape and a touchscreen laptop at full desktop width too. The 12px
	 * gutters either side collapsed to 4 and the stepper crowded the product name and
	 * the price.
	 *
	 * Deliberately (0,1,0) — matching the base rules rather than out-specifying them.
	 * `.optic-page .optic-item` would be (0,2,0) and would then beat the 720px block's
	 * `.optic-item { grid-template-columns: 1fr auto }`, which is what turns this into
	 * the two-row layout on phones. Winning here by source order keeps that override
	 * working; winning by specificity would break it.
	 */
	.optic-item,
	.optic-items__head {
		grid-template-columns: 1fr 110px 108px;
	}

	/*
	 * Remove keeps its 11.5px type and its position — only the hit area grows. The
	 * padding is cancelled by equal negative margins, so the box the eye sees is
	 * unchanged at 14px while the box the finger hits is 32px. Sizing the text up
	 * instead would have given a destructive action more visual weight than the
	 * quantity beside it.
	 *
	 * Vertical only. Padding the sides too would be a bigger target, but at the
	 * narrow breakpoint this sits in a flex row with a 14px gap, and a negative side
	 * margin cancelling that padding also pulls the button 6px toward the price.
	 *
	 * DOWNWARD only, at this breakpoint. Above 720px the total cell is a stacked
	 * block with the price directly above, so growing the hit area symmetrically put
	 * 9px of Remove's tap target on top of the price's text box — a finger aiming at
	 * an amount could land on a destructive control. Below it, the 720px block makes
	 * the cell a centred flex row where the neighbour is horizontal, so there the
	 * growth is symmetric and safe.
	 *
	 * The base `margin-top: 5px` is left alone, so the 5px gap under the price is
	 * unchanged and the whole 18px of new target sits below the word.
	 */
	.optic-page .optic-item__remove {
		padding: 0 0 18px;
		margin-bottom: -18px;
	}

	/*
	 * `:focus` is listed deliberately, and it is not redundant.
	 *
	 * The isolation block above declares `height: 38px` across the selector list
	 * `.optic-summary__code, .optic-summary__code:focus`. Matching only the base
	 * selector here gives (0,2,0), which wins while the field is idle and LOSES to
	 * that block's (0,3,0) the moment the field is focused. Measured on the live page:
	 * the input stood at 44px and snapped to 38 the instant it was tapped — the one
	 * moment the extra height exists for.
	 */
	.optic-page .optic-summary__code,
	.optic-page .optic-summary__code:focus,
	.optic-page .optic-summary__apply {
		height: 44px;
	}

	.optic-page .optic-cart-upsell-btn {
		min-height: 40px;
	}
}

/*
 * One column below 1000px.
 *
 * The summary goes BELOW the items rather than above: on a narrow screen the first
 * thing someone wants is to check what they are buying, and a summary pinned above
 * the list pushes the list off-screen. Checkout stays reachable because the summary
 * stops being sticky here — a sticky card in a single column would cover the items
 * it is summarising.
 */
@media ( max-width: 1000px ) {
	.optic-page__grid {
		grid-template-columns: 1fr;
	}

	.optic-page .optic-summary {
		position: static;
	}
}

/*
 * Below 720px the three-column row stops working: 132px of stepper and 108px of
 * total leave the product name about 200px, which wraps a peptide name to four
 * lines. The row becomes two rows instead — product across the top, then quantity
 * and total on one line beneath it, which keeps the two numbers a shopper compares
 * side by side rather than stacked.
 */
@media ( max-width: 720px ) {
	.optic-page {
		--ocp-pad: 16px;
	}

	.optic-page__title {
		font-size: 24px;
	}

	.optic-items__head {
		display: none;
	}

	.optic-item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"product product"
			"qty total";
		row-gap: 14px;
		padding: 18px var( --ocp-pad );
	}

	.optic-item__product {
		grid-area: product;
	}

	.optic-item__qty {
		grid-area: qty;
		justify-content: flex-start;
	}

	.optic-item__total {
		grid-area: total;
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.optic-item__thumb {
		flex-basis: 68px;
		width: 68px;
		height: 68px;
	}

	.optic-summary__amount {
		font-size: 20px;
	}

	/*
	 * Here the row is centred rather than stacked, so Remove wants no top gap at all —
	 * this replaces the 5px the touch block preserves. Same hit area, different offset.
	 */
	.optic-page .optic-item__remove {
		margin: -9px 0;
		padding: 9px 0;
	}
}

/*
 * Upsell rows on the narrowest phones.
 *
 * (This block once carried a comment describing a sticky checkout bar. There is no
 * sticky checkout bar — the only `position: sticky` in this file is the summary card
 * on desktop, and it is switched off at 1000px. The comment described a design that
 * was considered and not built.)
 */
@media ( max-width: 560px ) {
	/*
	 * Only the BUTTON drops to its own line.
	 *
	 * Plain `flex-wrap: wrap` also wrapped the text block, leaving the thumbnail
	 * alone on the first line with the name beneath it — three stacked rows for what
	 * is one product. Forcing the button to a full-width basis makes it the only
	 * item that can wrap, so the thumbnail and name stay together as they read.
	 */
	.optic-page .optic-cart-upsell-item {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.optic-page .optic-cart-upsell-info {
		flex: 1 1 0;
	}

	.optic-page .optic-cart-upsell-btn {
		flex: 1 0 100%;
		width: 100%;
	}

	.optic-page__grid {
		margin-bottom: 24px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.optic-page *,
	.optic-page *::before,
	.optic-page *::after {
		transition: none !important;
	}
}

/* "You saved $X" — see the drawer's `.optic-cart-saved`. Deliberately not a
   `.optic-summary__row`: it is not part of the arithmetic above it. */
.optic-summary__saved {
	margin: 10px 0 0;
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: #157347;
}