/**
 * Theme overrides.
 *
 * Deliberate, reviewed deviations from the approved static build. They live
 * here rather than in styles.css so that file stays byte-identical to the
 * original design hand-off — every intentional change to the design is visible
 * in this one place instead of being buried in a 92KB stylesheet.
 *
 * Loaded after `mrfresh` (styles.css), so plain source order wins; no
 * !important is needed anywhere below.
 */

/* -------------------------------------------------------------------------
 * Product card price row
 *
 * `.save-tag` inherits `margin-bottom:14px` from its first declaration
 * (styles.css L329), which the later refinement at L1431 never resets. Inside
 * `.price-nums` — a flex row with `align-items:center` — that bottom margin
 * enlarges the badge's margin box downward, so centring lifts the badge about
 * 7px above the price it sits beside. Zeroing it puts the price, the struck
 * price and the badge on one optical line.
 * ---------------------------------------------------------------------- */
.price-nums .save-tag {
	margin-bottom: 0;
}

/*
 * Keep the price and the struck-through price together on one line. Both are
 * short, and on the narrow breakpoint `.cat-card__foot` switches to a
 * full-width column, so there is room; only the badge could ever have wrapped.
 */
.price-nums {
	flex-wrap: nowrap;
}

/*
 * Struck-through price legibility.
 *
 * The card version was set in `--font-display` (DM Serif Display), which the
 * theme loads at a single weight — `ital@0;1`, i.e. 400 only. A serif at 400
 * and ~1rem with a line through it reads as thin and muddy, and asking for a
 * heavier weight would only trigger the browser's synthetic bold.
 *
 * The PDP's equivalent (`.price-was`) never set a family, so it already
 * inherits Inter and reads cleanly. Matching the card to it fixes the
 * legibility complaint and makes the two surfaces consistent, which is what
 * "the same across all product cards" requires. Inter has real 500, so the
 * extra weight is genuine rather than synthesised.
 */
.price-nums s,
.price-was {
	font-family: var(--font-body);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Add-to-cart loading state
 *
 * The button keeps its own size, colours and radius — the spinner is overlaid
 * rather than inserted, so the label does not reflow and the row never shifts
 * while a request is in flight. `currentColor` means it inherits whatever the
 * button's text colour is, so it works on both the primary and the small card
 * variant without per-button rules.
 * ---------------------------------------------------------------------- */
.btn.is-loading {
	position: relative;
	pointer-events: none;
}

.btn.is-loading > * {
	opacity: .35;
}

.btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mrfresh-spin .6s linear infinite;
}

/* The label is a bare text node, so dim the whole button and let the spinner
   sit on top at full strength. */
.btn.is-loading {
	color: color-mix(in srgb, currentColor 45%, transparent);
}

.btn.is-loading::after {
	border-color: #fff;
	border-right-color: transparent;
	opacity: 1;
}

.btn--ghost.is-loading::after,
.btn--sm.btn--ghost.is-loading::after {
	border-color: var(--green-700);
	border-right-color: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
	.btn.is-loading::after { animation-duration: 1.6s; }
}

/* -------------------------------------------------------------------------
 * Out-of-stock caption
 *
 * One modifier, applied to whichever caption element the surface already uses —
 * `.price-tax` on the PDP, `.price small` on a card — so both read the same
 * without either being restyled. The red is a dedicated stock-warning token
 * rather than --terracotta, which is the brand's warm accent (used for the
 * "Save" badge) and would not read as a warning next to it.
 * ---------------------------------------------------------------------- */
:root {
	--stock-out: #C62828;
}

.price-tax.is-out-of-stock,
.price small.is-out-of-stock,
.js-stock-label.is-out-of-stock {
	color: var(--stock-out);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Make the [hidden] attribute actually hide these controls
 *
 * `.btn` and `.qty` set `display:inline-flex`, which overrides the browser's
 * `[hidden] { display:none }` — so `el.hidden = true` left the element on
 * screen. That is why the "+ Add More" button stayed visible next to the
 * stepper. This restores hidden's meaning for exactly the elements the cart
 * code toggles, without a blanket rule that could affect anything else.
 * ---------------------------------------------------------------------- */
.btn[hidden],
.qty[hidden],
.cart-stepper[hidden],
.notify-me[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * In-cart quantity stepper
 *
 * Shown in place of the buy button once a product is in the cart. It reuses the
 * design's `.qty` pill (the same control the cart drawer uses), so it needs no
 * new visual language — these rules only size it to match the button it
 * replaces and add the loading state, so the row height never jumps.
 * ---------------------------------------------------------------------- */
.cart-stepper {
	position: relative;
}

/* Card scale: match the .btn--sm button it stands in for. */
.cart-stepper--sm {
	min-height: 44px;
	border-width: 1.5px;
}

.cart-stepper--sm button {
	width: 40px;
	height: 42px;
	font-size: 18px;
}

.cart-stepper--sm .cart-stepper__val {
	min-width: 30px;
	font-size: 15px;
}

/* PDP scale: fill the buy button's slot. */
.cart-stepper--full {
	display: flex;
	width: 100%;
	min-height: 52px;
	border-width: 1.5px;
	justify-content: space-between;
}

.cart-stepper--full button {
	width: 56px;
	height: 50px;
	font-size: 20px;
}

.cart-stepper--full .cart-stepper__val {
	flex: 1;
	font-size: 17px;
}

/* The + button greys out at the stock ceiling. */
.cart-stepper button:disabled {
	opacity: .4;
	cursor: default;
}

.cart-stepper button:disabled:hover {
	background: none;
}

/* Loading: dim the controls and spin a small overlay, matching the button. */
.cart-stepper.is-loading {
	pointer-events: none;
}

.cart-stepper.is-loading button,
.cart-stepper.is-loading .cart-stepper__val {
	opacity: .3;
}

.cart-stepper.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--green-700);
	border-right-color: transparent;
	border-radius: 50%;
	animation: mrfresh-spin .6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.cart-stepper.is-loading::after { animation-duration: 1.6s; }
}

/* -------------------------------------------------------------------------
 * Cart / stock message
 *
 * Injected under the buy row when an action is refused — hitting the stock
 * ceiling, chiefly. Uses the same red as the out-of-stock caption so the two
 * read as one system, and takes no space until there is something to say.
 * ---------------------------------------------------------------------- */
.cart-msg {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--stock-out);
}

.cat-card__foot + .cart-msg {
	margin-top: 8px;
	font-size: 12.5px;
}

/* Cart line remove control: a red trash icon in place of the "Remove" text. */
.cart-item__rm--icon {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	color: var(--stock-out);
	background: none;
	flex: none;
	transition: color .18s var(--ease), background .18s var(--ease);
}

.cart-item__rm--icon svg {
	width: 17px;
	height: 17px;
}

.cart-item__rm--icon:hover {
	color: #fff;
	background: var(--stock-out);
}

/* Per-line message inside the cart drawer. */
.cart-item__msg {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--stock-out);
}

/* Drawer line stepper loading state. */
.cart-item .qty.is-loading {
	position: relative;
	pointer-events: none;
}

.cart-item .qty.is-loading button,
.cart-item .qty.is-loading span {
	opacity: .3;
}

.cart-item .qty.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid var(--green-700);
	border-right-color: transparent;
	border-radius: 50%;
	animation: mrfresh-spin .6s linear infinite;
}

/* A disabled + on a drawer line. */
.cart-item .qty button:disabled {
	opacity: .4;
	cursor: default;
}

.cart-item .qty button:disabled:hover {
	background: none;
}

/* -------------------------------------------------------------------------
 * Notify Me button
 *
 * Red, to match the out-of-stock caption above it and to read differently from
 * the green buy buttons. `.btn.notify-me` is two classes, so it outranks
 * `.btn--primary` without !important.
 *
 * The bell is a masked pseudo-element rather than inline SVG. That matters
 * here: the card's button is converted between "Add to Cart" and "Notify Me"
 * in JavaScript, and notify.js rewrites the label text after subscribing — a
 * pseudo-element survives both, where an injected SVG child would have to be
 * added and removed by hand and would be wiped by any textContent write.
 * It inherits currentColor, so it needs no separate colour rules.
 * ---------------------------------------------------------------------- */
.btn.notify-me {
	background: var(--stock-out);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.btn.notify-me:hover {
	background: #A81E1E;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn.notify-me:disabled,
.btn.notify-me[disabled] {
	background: var(--stock-out);
	opacity: .6;
	transform: none;
	cursor: default;
}

.btn.notify-me::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn--sm.notify-me::before {
	width: 16px;
	height: 16px;
}

/*
 * Keep the label on one line.
 *
 * `.cat-card__foot` is a flex row and its buttons are shrinkable by default,
 * so on the three-across desktop grid the price block squeezed this button
 * until "Notify Me" wrapped to two lines. nowrap plus flex:none keeps the
 * button at its natural width; the slightly tighter padding and gap buy back
 * the space that costs, so the row still fits. Scoped to .notify-me so the
 * in-stock "Add to Cart" layout is untouched.
 */
.btn.notify-me {
	white-space: nowrap;
}

.cat-card__foot .btn.notify-me {
	flex: none;
	gap: 8px;
}

.cat-card__foot .btn--sm.notify-me {
	padding-inline: 16px;
}

/* Let the price side give up room rather than forcing the row to overflow. */
.cat-card__foot .price {
	min-width: 0;
}

/* The spinner overlay already dims the button; hide the bell so the two do
   not sit on top of one another. */
.btn.notify-me.is-loading::before {
	visibility: hidden;
}

/* -------------------------------------------------------------------------
 * Loyalty & first-order promotions
 * ---------------------------------------------------------------------- */

/* First-order banner (PDP + checkout). */
.pdp-promo,
.co-promo {
	margin: 14px 0;
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--green-900);
	background: #EAF6EA;
	border: 1px solid #CFE8CF;
	border-radius: 12px;
}

.co-promo { margin: 0 0 16px; }

.cart-promo {
	margin: 0 20px;
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--green-900);
	background: #EAF6EA;
	border: 1px solid #CFE8CF;
	border-radius: 12px;
}

/* "Earn N points" line. */
.pdp-earn,
.co-earn {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.pdp-earn svg,
.co-earn svg { width: 16px; height: 16px; color: var(--terracotta); flex: none; }
.pdp-earn__guest,
.co-earn__guest { flex-basis: 100%; font-size: 12px; color: var(--green-700); }

.co-earn { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Loyalty redemption box on the checkout. */
.co-loyalty {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.co-loyalty__head { margin-bottom: 8px; }
.co-loyalty__balance { font-size: 13px; font-weight: 600; color: var(--green-700); }
.co-loyalty__row { display: flex; gap: 8px; }
.co-loyalty__row input {
	flex: 1;
	min-height: 44px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fff;
}
.co-loyalty__row input:focus { outline: none; border-color: var(--green-700); }
.co-loyalty__msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 1em; }
.co-loyalty__msg.is-ok { color: var(--green-700); }
.co-loyalty__msg.is-error { color: var(--stock-out); }

/* Account benefits list (sign-in panel + claim card). */
.co-benefits {
	list-style: none;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed var(--line);
	display: grid;
	gap: 6px;
}
.co-benefits li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.co-benefits svg { width: 14px; height: 14px; color: var(--green-700); flex: none; }

/* Returning-guest unclaimed-points nudge. */
.co-unclaimed {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	background: #FFF7EC;
	border: 1px solid #F3E1C6;
	font-size: 13px;
	color: var(--ink);
}
.co-unclaimed b { color: var(--terracotta); }

/* Thank-you: claim-your-points account creation card. */
.co-claim {
	margin: 18px 0;
	padding: 22px 24px;
	border-radius: 18px;
	background: linear-gradient(120deg, #F7FBF7 0%, #FFF7EC 100%);
	border: 1px solid #E1F0E1;
}
.co-claim__head { display: flex; align-items: flex-start; gap: 14px; }
.co-claim__emoji { font-size: 1.8rem; flex: none; }
.co-claim__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.co-claim__sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.co-claim__form { margin: 16px 0 0; }
.co-claim__row { display: flex; gap: 8px; }
.co-claim__row input {
	flex: 1;
	min-height: 48px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fff;
}
.co-claim__row input:focus { outline: none; border-color: var(--green-700); }
.co-claim__row .btn { flex: none; min-height: 48px; }
.co-claim__msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 1em; }
.co-claim__msg.is-error { color: var(--stock-out); }
.co-claim__benefits {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.co-claim__benefits li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--green-900); }
.co-claim__benefits svg { width: 13px; height: 13px; color: var(--green-700); }
.co-claim__done { display: flex; align-items: center; gap: 12px; }
.co-claim__done .co-claim__emoji { font-size: 1.6rem; }
.co-claim__done p { margin: 0; font-size: 14px; font-weight: 600; color: var(--green-900); }
.co-claim__done a { color: var(--green-700); text-decoration: underline; }

/* Thank-you page loyalty note. */
.co-thankyou-loyalty {
	margin: 16px 0;
	padding: 14px 16px;
	background: #EAF6EA;
	border: 1px solid #CFE8CF;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--green-900);
}

.co-thankyou-loyalty p { margin: 0; }

/* -------------------------------------------------------------------------
 * One-page checkout
 *
 * Uses the theme's tokens and .btn/.qty classes so it belongs to the same
 * system. Mobile-first: single column that becomes two on wider screens, with
 * the summary sticky beside the form.
 * ---------------------------------------------------------------------- */
/* Compact top: the checkout content starts close to the header. */
.co { padding-block: clamp(16px, 2.4vw, 26px) clamp(32px, 4vw, 56px); }

/* Minimal checkout header/footer: centred logo, one trust line. */
.co-page main { padding-top: 0; }

/*
 * The page body is white, so a white header disappeared into it. A warm
 * off-white lifts the header off the content while staying clean and premium;
 * the hairline border and faint shadow give it a defined, elevated edge.
 */
.co-header {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	background: #F6F4EF;
	box-shadow: 0 1px 3px rgba(31, 31, 31, 0.04);
}

.co-header__inner { display: flex; justify-content: center; }

.co-header__logo img {
	height: 40px;
	width: auto;
}

.co-footer {
	border-top: 1px solid var(--line);
	padding: 22px 0 30px;
	background: #fff;
	margin-top: 40px;
}

.co-footer__inner { text-align: center; }

.co-footer__line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--green-700);
}

.co-footer__line svg { width: 16px; height: 16px; }
.co-footer__copy { margin: 0; font-size: 12px; color: var(--muted); }

/*
 * Checkout headings use the body font.
 *
 * h1–h4 are DM Serif Display globally; on the checkout that made the section
 * headings and the summary product names read as ornate serif. A checkout wants
 * plain, legible labels, so the display family is overridden here to Inter.
 */
.co .co-h,
.co-item__name {
	font-family: var(--font-body);
	letter-spacing: 0;
}

.co .co-h { font-weight: 700; }

.co-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

@media (min-width: 900px) {
	.co-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
	.co-summary { position: sticky; top: 100px; }
}

.co-block { margin-bottom: 26px; }
.co-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.co-block__head .co-h { margin-bottom: 0; }

/* Text link / button used for Sign in, Forgot password, Use different address. */
.co-link {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--green-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.co-link:hover { color: var(--green-900); }

.co-signed { font-size: 13px; color: var(--muted); }
.co-signed a { color: var(--green-700); text-decoration: underline; }

.co-signin {
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 16px;
	background: #F7FBF7;
}

.co-signin__actions { display: flex; align-items: center; gap: 16px; }
.co-signin__msg { margin: 8px 0 0; font-size: 12.5px; min-height: 1em; }
.co-signin__msg.is-error { color: var(--stock-out); }
.co-signin__note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* Saved-address book. */
.co-addr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.co-addr {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}

.co-addr input { margin-top: 3px; accent-color: var(--green-700); }
.co-addr:has(input:checked), .co-addr.is-selected, .co-addr.is-default { border-color: var(--green-700); background: #F7FBF7; }
.co-addr__body { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.co-addr__line { color: var(--ink); }
.co-addr__line em { color: var(--green-700); font-style: normal; font-size: 12px; margin-left: 6px; }

.co-h {
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--ink);
	margin: 0 0 16px;
}

/* Floating-label fields. */
.co-field { position: relative; margin-bottom: 14px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
	.co-row, .co-row--3 { grid-template-columns: 1fr; }
}

/* Country/Region select, styled to match the text fields. */
.co-field--select select {
	width: 100%;
	min-height: 56px;
	padding: 20px 40px 6px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	cursor: pointer;
}

.co-field--select select:focus { outline: none; border-color: var(--green-700); }
/* A select always shows a value, so its label stays floated. */
.co-field--select label { transform: translateY(-11px) scale(.8); color: var(--green-700); }

.co-field input,
.co-field textarea {
	width: 100%;
	min-height: 56px;
	padding: 20px 16px 6px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	transition: border-color .2s var(--ease);
}

.co-field textarea { min-height: 76px; padding-top: 22px; resize: vertical; }

.co-field input:focus,
.co-field textarea:focus { outline: none; border-color: var(--green-700); }

.co-field input.is-invalid { border-color: var(--stock-out); }
.co-field input[readonly] { background: var(--beige-soft); color: var(--muted); }

/* -------- Real-time validation states -------- */
.co-field input, .co-field textarea { transition: border-color .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }
.co-field.is-invalid input, .co-field.is-invalid textarea,
.co-field input.is-invalid { border-color: var(--stock-out); }
.co-field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12); }
.co-field.is-valid input { border-color: #7FB069; }
.co-field.is-valid input, .co-field.is-checking input { padding-right: 42px; }
/* animated success check */
.co-field.is-valid::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
	animation: co-check-pop .25s var(--ease, ease);
}
/* checking spinner */
.co-field.is-checking::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 18px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--line);
	border-top-color: var(--green-700);
	border-radius: 50%;
	animation: mrfresh-spin .6s linear infinite;
}
@keyframes co-check-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* inline message: fades + slides in, one per field */
.co-field__vmsg {
	margin: 5px 4px 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .2s var(--ease, ease), opacity .2s var(--ease, ease), margin .2s var(--ease, ease);
}
.co-field__vmsg.show { max-height: 44px; opacity: 1; }
.co-field__vmsg.is-error { color: var(--stock-out); }
.co-field__vmsg.is-ok { color: var(--green-700); }
/* Place Order gated until valid */
.co-place.is-disabled, .co-place:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* -------- NZ phone field: fixed +64 prefix + masked input -------- */
.nz-phone { position: relative; }
.nz-phone__cc {
	position: absolute;
	left: 16px;
	top: 23px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	pointer-events: none;
	z-index: 2;
}
/* -------------------------------------------------------------------------
 * PDP: Fresh Rewards badge (top of product info)
 * ---------------------------------------------------------------------- */
.pdp-earn--top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #FFF7EC;
	border: 1px solid #F3E1C6;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-900);
}
.pdp-earn--top { position: relative; }
.pdp-earn--top .pdp-earn__star { font-size: 1rem; line-height: 1; }

/* (i) info trigger on the earn badge. */
.pdp-earn__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: -2px -4px -2px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--terracotta);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s var(--ease), background .15s var(--ease);
}
.pdp-earn__info:hover, .pdp-earn__info[aria-expanded="true"] { opacity: 1; background: rgba(198, 106, 60, 0.14); }
.pdp-earn__info svg { width: 15px; height: 15px; }

/* Explainer popup anchored to the badge. */
.pdp-earn__pop {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	width: min(320px, calc(100vw - 40px));
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(31, 58, 46, 0.18);
	font-weight: 400;
	text-align: left;
	cursor: default;
	animation: acPopIn .18s var(--ease);
}
.pdp-earn__pop[hidden] { display: none; }
.pdp-earn__pop::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 16px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}
.pdp-earn__pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pdp-earn__pop-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pdp-earn__pop-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 6px; }
.pdp-earn__pop-close:hover { color: var(--ink); }
.pdp-earn__pop-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pdp-earn__pop-list li { position: relative; padding-left: 20px; font-size: 12.8px; line-height: 1.5; font-weight: 500; color: var(--muted); }
.pdp-earn__pop-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-700); font-weight: 800; }
.pdp-earn__pop-list li b { color: var(--ink); font-weight: 700; }
.pdp-earn__pop-cta { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--green-700); text-decoration: none; }
.pdp-earn__pop-cta:hover { color: var(--green-900); }
@media (max-width: 480px) { .pdp-earn__pop { left: 50%; transform: translateX(-50%); } .pdp-earn__pop::before { left: 50%; margin-left: -6px; } }

/* -------------------------------------------------------------------------
 * Customer reviews
 * ---------------------------------------------------------------------- */
.rv { padding-block: clamp(36px, 5vw, 64px); }
.rv-head { max-width: 720px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.rv-head__eyebrow { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); }
.rv-summary { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; text-align: left; }
@media (min-width: 620px) { .rv-summary { grid-template-columns: auto 1fr; gap: 34px; } }
.rv-summary__score { text-align: center; }
.rv-summary__num { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--ink); }
.rv-summary__count { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.rv-summary__bars { display: flex; flex-direction: column; gap: 6px; }
.rv-bar { display: grid; grid-template-columns: 34px 1fr 38px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.rv-bar__label { white-space: nowrap; color: var(--ink); font-weight: 600; }
.rv-bar__track { height: 8px; border-radius: 999px; background: var(--beige-soft, #F1EBE0); overflow: hidden; }
.rv-bar__track span { display: block; height: 100%; background: #F5A623; border-radius: 999px; transition: width .5s var(--ease, ease); }
.rv-bar__pct { text-align: right; font-variant-numeric: tabular-nums; }
.rv-ai { margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: #EAF6EA; color: var(--green-900); font-size: 13.5px; line-height: 1.55; text-align: left; }
.rv-ai__badge { font-weight: 700; margin-right: 4px; }

/* Star display (width overlay) */
.rv-stars { display: inline-block; position: relative; font-size: 14px; line-height: 1; color: #E2D9CB; letter-spacing: 2px; }
.rv-stars::before { content: "★★★★★"; }
.rv-stars > span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A623; }
.rv-stars > span::before { content: "★★★★★"; }
.rv-stars--lg { font-size: 20px; display: block; width: max-content; margin: 6px auto 0; }

.rv-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.rv-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rv-sort select { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); cursor: pointer; }

/* Carousel */
.rv-carousel { position: relative; }
.rv-carousel.is-loading { opacity: .5; pointer-events: none; }
.rv-viewport { overflow: hidden; }
.rv-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 auto; width: calc(50% - 9px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04)); }
@media (min-width: 900px) { .rv-card { width: calc(33.333% - 12px); } }
@media (max-width: 620px) { .rv-card { width: 86%; } }
.rv-card.is-featured { border-color: #F3E1C6; background: #FFFCF6; }
.rv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green-700); }
.rv-verified svg { width: 13px; height: 13px; }
.rv-card__title { margin: 0; font-weight: 700; font-size: 14.5px; color: var(--ink); overflow-wrap: break-word; word-break: break-word; }
.rv-card__body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); flex: 1; overflow-wrap: break-word; word-break: break-word; white-space: pre-line; }
.rv-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.rv-card__name { display: block; font-weight: 700; font-size: 13px; color: var(--ink); }
.rv-card__loc { display: block; font-size: 12px; color: var(--muted); }
.rv-helpful { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: border-color .18s var(--ease, ease), color .18s var(--ease, ease); }
.rv-helpful svg { width: 14px; height: 14px; }
.rv-helpful:hover { border-color: var(--green-700); color: var(--green-700); }
.rv-helpful.is-voted { border-color: var(--green-700); color: var(--green-700); background: #EAF6EA; cursor: default; }
.rv-nav { position: absolute; top: 42%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.1)); transition: transform .18s var(--ease, ease); }
.rv-nav svg { width: 20px; height: 20px; }
.rv-nav:hover { transform: scale(1.08); }
.rv-nav--prev { left: -8px; }
.rv-nav--next { right: -8px; }
@media (max-width: 720px) { .rv-nav { display: none; } }

.rv-empty { text-align: center; color: var(--muted); padding: 24px; }

/* Write a review */
.rv-write { max-width: 620px; margin: clamp(30px, 4vw, 48px) auto 0; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.rv-write__title { margin: 0 0 18px; font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.rv-field { position: relative; margin-bottom: 14px; }
.rv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .rv-row2 { grid-template-columns: 1fr; } }
.rv-field input, .rv-field textarea { width: 100%; min-height: 52px; padding: 18px 16px 6px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; background: #fff; color: var(--ink); transition: border-color .18s var(--ease, ease); }
.rv-field textarea { min-height: 100px; padding-top: 22px; resize: vertical; }
.rv-field input:focus, .rv-field textarea:focus { outline: none; border-color: var(--green-700); }
.rv-field label { position: absolute; left: 16px; top: 16px; color: var(--muted); font-size: 15px; pointer-events: none; transition: all .15s var(--ease, ease); }
.rv-field input:focus + label, .rv-field input:not(:placeholder-shown) + label, .rv-field textarea:focus + label, .rv-field textarea:not(:placeholder-shown) + label { top: 7px; font-size: 11px; font-weight: 600; color: var(--green-700); }
.rv-field--rate { margin-bottom: 18px; }
.rv-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.rv-rate { display: inline-flex; gap: 4px; }
.rv-rate__star { border: 0; background: none; font-size: 30px; line-height: 1; color: #E2D9CB; cursor: pointer; transition: color .12s var(--ease, ease), transform .12s var(--ease, ease); padding: 0 2px; }
.rv-rate__star.is-on { color: #F5A623; }
.rv-rate__star:hover { transform: scale(1.12); }
.rv-submit { width: 100%; margin-top: 4px; }
.rv-submit.is-loading { position: relative; color: transparent; pointer-events: none; }
.rv-submit.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mf-toast-spin .6s linear infinite; }
.rv-msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; min-height: 1em; }
.rv-msg.is-error { color: var(--stock-out); }
.rv-msg.is-ok { color: var(--green-700); }

/* Room for the +64 prefix (specific enough to beat each field's padding shorthand). */
.co-field.nz-phone input, .ac-field.nz-phone input { padding-left: 50px; }
/* The prefix occupies the input line, so the label floats up permanently. */
.co-field.nz-phone label,
.ac-field.nz-phone label { top: 8px; font-size: 11px; font-weight: 600; color: var(--green-700); }
.nz-phone input::placeholder { color: var(--muted); opacity: 1; }
.co-field.nz-phone.is-valid input, .co-field.nz-phone.is-checking input { padding-right: 42px; }

.co-field label {
	position: absolute;
	left: 16px;
	top: 17px;
	font-size: 15px;
	color: var(--muted);
	pointer-events: none;
	transition: transform .16s var(--ease), font-size .16s var(--ease), color .16s var(--ease);
	transform-origin: left top;
}

.co-field input:focus + label,
.co-field input.has-value + label,
.co-field input:not(:placeholder-shown) + label,
.co-field textarea:focus + label,
.co-field textarea.has-value + label,
.co-field textarea:not(:placeholder-shown) + label,
.co-field label.is-filled {
	transform: translateY(-11px) scale(.8);
	color: var(--green-700);
}

.co-field__msg { margin: 5px 2px 0; font-size: 12.5px; min-height: 1em; }
.co-field__msg.is-ok { color: var(--green-700); }
.co-field__msg.is-error { color: var(--stock-out); }

/* Payment options. */
.co-pay { display: flex; flex-direction: column; gap: 10px; }

.co-pay__opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 16px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}

.co-pay__opt.is-active { border-color: var(--green-700); background: #F7FBF7; }
.co-pay__opt input { margin-top: 3px; accent-color: var(--green-700); }
.co-pay__body { display: flex; flex-direction: column; gap: 2px; }
.co-pay__title { font-weight: 600; color: var(--ink); font-size: 15px; }
.co-pay__desc { font-size: 12.5px; color: var(--muted); }

/* Summary card. */
.co-summary {
	background: var(--surface, #fff);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 24px;
}

.co-ship-bar { margin-bottom: 18px; }
.co-ship-bar__msg { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--terracotta); }
.co-ship-bar__msg.is-free { color: var(--green-700); }
.co-ship-bar__track { height: 6px; border-radius: 999px; background: var(--beige-soft); overflow: hidden; }
.co-ship-bar__track span { display: block; height: 100%; width: 0; background: var(--green-700); border-radius: 999px; transition: width .35s var(--ease); }

.co-items { border-top: 1px solid var(--line); }

.co-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.co-item__media img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.co-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.co-item__name { font-size: 14px; font-weight: 600; color: var(--green-900); margin: 0; line-height: 1.3; }

/* Remove control — the red trash icon, matching the cart drawer. */
.co-item__rm {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--stock-out);
	cursor: pointer;
	transition: color .18s var(--ease), background .18s var(--ease);
}

.co-item__rm svg { width: 15px; height: 15px; }
.co-item__rm:hover { color: #fff; background: var(--stock-out); }
.co-item__variant { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.co-item__qty { }
.co-item__price { font-family: var(--font-display); font-size: 1rem; color: var(--green-900); white-space: nowrap; }
.co-item__msg { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--stock-out); }

.co-coupon { padding: 16px 0; border-bottom: 1px solid var(--line); }
.co-coupon__row { display: flex; gap: 8px; }
.co-coupon__row input {
	flex: 1;
	min-height: 44px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fff;
}
.co-coupon__row input:focus { outline: none; border-color: var(--green-700); }
.co-coupon__msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 1em; }
.co-coupon__msg.is-ok { color: var(--green-700); }
.co-coupon__msg.is-error { color: var(--stock-out); }

.co-totals { margin: 16px 0; padding: 0; }
.co-totals__row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
/* A `display` rule on the row overrides the browser's [hidden]{display:none};
   restore it so JS-hidden discount rows (Discount, First order, Fresh Rewards)
   actually disappear instead of showing a bare "−". */
.co-totals__row[hidden] { display: none; }
.co-totals__row dt { color: var(--muted); font-size: 14px; margin: 0; }
.co-totals__row dd { margin: 0; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-totals__row--discount dd { color: var(--green-700); }
.co-totals__row--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.co-totals__row--total dt { font-weight: 700; color: var(--ink); font-size: 16px; }
.co-totals__row--total dd { font-family: var(--font-display); font-size: 1.5rem; color: var(--green-900); }

.co-place { width: 100%; margin-top: 8px; }
.co-error { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--stock-out); min-height: 1em; }
.co-fine { margin: 12px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

.co-empty { text-align: center; padding: 60px 20px; }
.co-empty .btn { margin-top: 18px; }

/* Premium empty-cart page. */
.cart-empty-page { padding-block: clamp(48px, 8vw, 110px); }
.cart-empty-hero {
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
}
.cart-empty-hero__ic {
	width: 96px;
	height: 96px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #FFF7EC;
	border: 1px solid #F3E1C6;
	color: var(--terracotta);
}
.cart-empty-hero__ic svg { width: 46px; height: 46px; }
.cart-empty-hero__title { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); }
.cart-empty-hero__text { margin: 0 auto 28px; max-width: 400px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cart-empty-hero__cta { min-width: 220px; }

/*
 * Toast: a small, non-blocking status pill used for the "cart is empty,
 * redirecting…" message on the checkout. Fixed, centred near the top, with an
 * optional spinner. Theme-agnostic so it can be reused elsewhere later.
 */
.mf-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 9999; /* Above the fixed site header. */
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
	transform: translate(-50%, 18px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--ease, ease), transform .28s var(--ease, ease);
}
.mf-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mf-toast__spin {
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: mf-toast-spin .7s linear infinite;
}
@keyframes mf-toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-toast__spin { animation-duration: 1.6s; } }

/* Undo action toast, used for cart-page removals. */
.mf-toast--action { padding-right: 8px; }
.mf-toast__action {
	flex: none;
	margin-left: 4px;
	padding: 6px 15px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s var(--ease, ease);
}
.mf-toast__action:hover { background: rgba(255, 255, 255, 0.32); }

/* -------------------------------------------------------------------------
 * Cart page — mirrors the checkout summary, with richer line-item cards.
 * ---------------------------------------------------------------------- */
.cart-page__title { margin: 0 0 clamp(16px, 3vw, 26px); font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--ink); }
.cart-full-list { display: flex; flex-direction: column; gap: 14px; }

.cart-full-item {
	display: flex;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
}
.cart-full-item__media { flex: none; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; background: var(--beige-soft, #F6F2EA); }
.cart-full-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-full-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cart-full-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cart-full-item__id { min-width: 0; }
.cart-full-item__name { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.cart-full-item__name a { color: inherit; text-decoration: none; }
.cart-full-item__name a:hover { color: var(--green-700); }
.cart-full-item__meta { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.cart-full-item__stock { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.cart-full-item__stock.is-in { color: var(--green-700); }
.cart-full-item__stock.is-low { color: var(--terracotta); }
.cart-full-item__stock.is-out { color: var(--stock-out); }
.cart-full-item__rm {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color .18s var(--ease, ease), background .18s var(--ease, ease);
}
.cart-full-item__rm svg { width: 18px; height: 18px; }
.cart-full-item__rm:hover { color: #fff; background: var(--stock-out); }
.cart-full-item__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; }
.cart-full-item__pricing { text-align: right; }
.cart-full-item__price { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cart-full-item__sale { margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cart-full-item__was { font-size: 13px; color: var(--muted); }
.cart-full-item__save { font-size: 11.5px; font-weight: 700; color: var(--green-700); background: #EAF6EA; border-radius: 999px; padding: 2px 8px; }
.cart-full-item__unit { margin-top: 3px; font-size: 12px; color: var(--muted); }
/* Stock-limit message, injected by the shared drawerMessage() in cart-sync.js. */
.cart-full-item__body .cart-item__msg { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--stock-out); }

.cart-page__checkout { width: 100%; margin-top: 4px; }
.cart-page__continue { display: inline-block; margin-top: 14px; text-decoration: none; font-size: 13px; }

@media (max-width: 560px) {
	.cart-full-item { gap: 14px; padding: 14px; }
	.cart-full-item__media { width: 84px; height: 84px; }
	.cart-full-item__bottom { flex-wrap: wrap; row-gap: 10px; }
}

/* -------------------------------------------------------------------------
 * Checkout CRO layer — hero, trust, premium summary
 * ---------------------------------------------------------------------- */

/* Compact Fresh Rewards bar, full width directly above the checkout form. */
.co-hero-wrap { margin-bottom: 22px; }

.co-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 18px;
	background: linear-gradient(120deg, var(--green-700) 0%, var(--green-900) 100%);
	color: #fff;
	box-shadow: 0 16px 34px -18px rgba(46, 125, 50, .6);
}

.co-hero__emoji { font-size: 2rem; flex: none; }
.co-hero__welcome { margin: 0; font-size: 13px; font-weight: 600; opacity: .9; }
.co-hero__deal { margin: 2px 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.co-hero__note { margin: 0; font-size: 12px; opacity: .85; }

/* Membership variant: benefits + CTA. */
.co-hero--member { display: block; }
.co-hero--member .co-hero__welcome { font-size: 1.05rem; font-weight: 700; opacity: 1; }
.co-hero__sub { margin: 4px 0 10px; font-size: 12.5px; opacity: .9; }
.co-hero__benefits { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.co-hero__benefits li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.co-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.co-hero__cta { background: #fff; color: var(--green-900); }
.co-hero__cta:hover { background: #fff; color: var(--green-700); }
.co-hero__signin { font-size: 12.5px; opacity: .92; }
.co-link--light { color: #fff; text-decoration: underline; }
.co-link--light:hover { color: #EAF6EA; }

@media (max-width: 520px) { .co-hero__benefits { grid-template-columns: 1fr; } }

/* Inline create-account panel at checkout. */
.co-create {
	margin: -12px 0 24px;
	padding: 20px 22px;
	border-radius: 16px;
	border: 1.5px solid var(--green-700);
	background: #F7FBF7;
}
.co-create__title { margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.co-create__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.co-create__row input {
	min-height: 48px; padding: 0 16px; font-family: inherit; font-size: 15px;
	border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
}
.co-create__row input:focus { outline: none; border-color: var(--green-700); }
.co-create__msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 1em; }
.co-create__msg.is-error { color: var(--stock-out); }
@media (max-width: 520px) { .co-create__row { grid-template-columns: 1fr; } }

/* Email-driven info line (great news / welcome back / unclaimed). */
.co-email-info {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.45;
}
.co-email-info.is-good { background: #EAF6EA; border: 1px solid #CFE8CF; color: var(--green-900); }
.co-email-info.is-welcome { background: #FFF7EC; border: 1px solid #F3E1C6; color: var(--ink); }
.co-email-info.is-reward { background: #FFF7EC; border: 1px solid #F3E1C6; color: var(--ink); }
.co-email-info b { color: var(--green-900); }
.co-email-info .co-link { font-size: 13px; }

/*
 * Compact, horizontal Fresh Rewards bar: icon + copy on the left, CTAs on the
 * right, vertically centred. Sized ~70px so it reads as a supporting membership
 * benefit rather than a promotional banner. Stacks to full-width on mobile.
 */
.co-loyalty-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 18px;
	border-radius: 14px;
	background: #FFF7EC;
	border: 1px solid #F3E1C6;
}

/* -------------------------------------------------------------------------
 * Reusable "How Fresh Rewards work" info popup (.rw-info trigger + .rw-pop).
 * Shared by the checkout rewards card; mirrors the account + PDP explainers.
 * ---------------------------------------------------------------------- */
.rw-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--terracotta);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s var(--ease), background .15s var(--ease);
}
.rw-info:hover, .rw-info[aria-expanded="true"] { opacity: 1; background: rgba(198, 106, 60, 0.14); }
.rw-info svg { width: 16px; height: 16px; }

.rw-pop {
	position: absolute;
	top: calc(100% + 10px);
	left: 18px;
	z-index: 30;
	width: min(320px, calc(100vw - 40px));
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(31, 58, 46, 0.18);
	text-align: left;
	animation: acPopIn .18s var(--ease);
}
.rw-pop[hidden] { display: none; }
.rw-pop::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}
.rw-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rw-pop__title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.rw-pop__close { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 6px; }
.rw-pop__close:hover { color: var(--ink); }
.rw-pop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rw-pop__list li { position: relative; padding-left: 20px; font-size: 12.8px; line-height: 1.5; font-weight: 500; color: var(--muted); }
.rw-pop__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-700); font-weight: 800; }
.rw-pop__list li b { color: var(--ink); font-weight: 700; }

/* -------------------------------------------------------------------------
 * Guest cart-save: exit-intent modal + drawer field
 * ---------------------------------------------------------------------- */
.cs-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cs-modal[hidden] { display: none; }
.cs-modal__overlay { position: absolute; inset: 0; background: rgba(20, 34, 26, 0.55); backdrop-filter: blur(2px); animation: csFade .2s var(--ease); }
@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
.cs-modal__box {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 20px;
	padding: 30px 28px 24px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(20, 34, 26, 0.3);
	animation: csRise .24s var(--ease);
}
@keyframes csRise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cs-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.cs-modal__close:hover { color: var(--ink); background: #f2f2f2; }
.cs-modal__emoji { font-size: 2.4rem; line-height: 1; }
.cs-modal__title { margin: 10px 0 6px; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.cs-modal__text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cs-modal__form { display: flex; flex-direction: column; gap: 10px; }
.cs-modal__form[hidden] { display: none; }
.cs-modal__form input {
	width: 100%; height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px;
	font-family: inherit; font-size: 15px; text-align: center; background: #fff;
}
.cs-modal__form input:focus { outline: none; border-color: var(--green-700); }
.cs-modal__form .btn { width: 100%; height: 48px; }
.cs-modal__msg { min-height: 1em; margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.cs-modal__msg.is-ok { color: var(--green-700); }
.cs-modal__msg.is-error { color: var(--stock-out); }
.cs-modal__dismiss { margin-top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.cs-modal__dismiss:hover { color: var(--ink); }
.cs-modal__fine { margin: 14px 0 0; font-size: 11px; color: #9aa39c; line-height: 1.5; }

/* Passive "email me my cart" field in the drawer. */
.cart-save { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #F7FBF7; border: 1px solid #E1F0E1; }
.cart-save__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--green-900); margin-bottom: 8px; }
.cart-save__row { display: flex; gap: 8px; }
.cart-save__row[hidden] { display: none; }
.cart-save__row input {
	flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
	font-family: inherit; font-size: 13.5px; background: #fff;
}
.cart-save__row input:focus { outline: none; border-color: var(--green-700); }
.cart-save__row .btn { flex: none; }
.cart-save__msg { margin: 8px 0 0; font-size: 12px; font-weight: 600; min-height: 0; }
.cart-save__msg:empty { margin: 0; }
.cart-save__msg.is-ok { color: var(--green-700); }
.cart-save__msg.is-error { color: var(--stock-out); }

.co-loyalty-card__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-loyalty-card__star { font-size: 1.5rem; flex: none; line-height: 1; }
.co-loyalty-card__text { min-width: 0; }
.co-loyalty-card__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
.co-loyalty-card__title b { color: var(--terracotta); }
.co-loyalty-card__sub { margin: 1px 0 0; font-size: 12px; color: var(--muted); line-height: 1.35; }
.co-loyalty-card__msg { margin: 5px 0 0; font-size: 12px; font-weight: 600; }
.co-loyalty-card__msg:empty { display: none; }
.co-loyalty-card__msg.is-ok { color: var(--green-700); }
.co-loyalty-card__msg.is-error { color: var(--stock-out); }

/* Fresh Rewards redemption card inside the order summary (mirrors the top card).
   Warm gradient panel, oversized reward amount and a green Apply CTA. */
.co-rewards {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 16px;
	margin-bottom: 10px;
	border-radius: 16px;
	background: linear-gradient(135deg, #FFF7EC 0%, #FDEFD8 100%);
	border: 1px solid #F1DDBE;
	box-shadow: 0 1px 2px rgba(151, 106, 47, 0.06);
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.co-rewards.is-applied { background: linear-gradient(135deg, #EFF9EF 0%, #E4F3E4 100%); border-color: #CFE8CF; }
.co-rewards__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-rewards__star { font-size: 1.6rem; flex: none; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
.co-rewards__meta { min-width: 0; }
.co-rewards__title { margin: 0; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--terracotta); }
.co-rewards__amount { margin: 1px 0 0; font-family: var(--font-head, inherit); font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
.co-rewards__amount .amount { font-weight: 800; }
.co-rewards__sub { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 480px) { .co-rewards { flex-wrap: wrap; } .co-rewards .co-apply-rewards { width: 100%; } }

/* Green "Apply Rewards" CTA — shared by the top card + summary card. */
.co-apply-rewards {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: none;
	white-space: nowrap;
	min-height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, var(--green-700) 0%, var(--green-900) 100%);
	box-shadow: 0 4px 12px rgba(37, 110, 51, 0.28);
	transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s var(--ease);
}
.co-apply-rewards:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(37, 110, 51, 0.34); }
.co-apply-rewards:active { transform: translateY(0); }
.co-apply-rewards__ic { display: inline-flex; width: 17px; height: 17px; }
.co-apply-rewards__ic svg { width: 100%; height: 100%; }
/* Applied = confirmed success state. */
.co-apply-rewards.is-applied { background: #fff; color: var(--green-900); box-shadow: inset 0 0 0 1.5px #BFE3BF; }
.co-apply-rewards.is-applied:hover { box-shadow: inset 0 0 0 1.5px #A6D6A6; transform: translateY(-1px); }
/* Loading: hide contents, show a spinner. */
.co-apply-rewards.is-loading { color: transparent; pointer-events: none; position: relative; }
.co-apply-rewards.is-loading .co-apply-rewards__ic { visibility: hidden; }
.co-apply-rewards.is-loading::after {
	content: ""; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin: -8px 0 0 -8px;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mfSpin .7s linear infinite;
}
.co-apply-rewards.is-applied.is-loading::after { border-color: rgba(37,110,51,.3); border-top-color: var(--green-900); }
@keyframes mfSpin { to { transform: rotate(360deg); } }
/* The top-card button drops its default .btn skin in favour of the pill above. */
#coApplyRewards.co-apply-rewards { background: linear-gradient(135deg, var(--green-700) 0%, var(--green-900) 100%); }
#coApplyRewards.co-apply-rewards.is-applied { background: #fff; }

.co-loyalty-card__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.co-loyalty-card__actions .btn { min-height: 38px; padding: 0 16px; font-size: 13px; white-space: nowrap; }

@media (max-width: 560px) {
	.co-loyalty-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
	.co-loyalty-card__actions { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
	.co-loyalty-card__actions .btn { width: 100%; }
}

/* Premium product row in the summary. */
.co-item { grid-template-columns: 72px 1fr; gap: 14px; }
.co-item__media img { width: 72px; height: 72px; border-radius: 14px; }
.co-item__name { font-size: 15px; }
.co-item__variant { display: flex; align-items: center; gap: 8px; }
.co-item__stock {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--green-700);
	background: #EAF6EA;
	padding: 2px 7px;
	border-radius: 999px;
}
.co-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.co-item__foot .co-item__price { font-size: 1.05rem; }

/* Shipping progress bar — rewarding. */
.co-ship-bar { padding: 14px 16px; border-radius: 14px; background: #F7FBF7; border: 1px solid #E1F0E1; margin-bottom: 18px; }
.co-ship-bar.is-free { background: #EAF6EA; border-color: #CFE8CF; }
.co-ship-bar__msg { font-size: 13px; font-weight: 600; color: var(--ink); }
.co-ship-bar__msg b { color: var(--green-900); }
.co-ship-bar__msg.is-free { color: var(--green-700); }
.co-ship-bar__hint { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--terracotta); text-align: right; }

/* Collapsible coupon toggle — still used on the cart page. */
.co-coupon__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 2px 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--green-700);
	cursor: pointer;
}
.co-coupon__toggle svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease); }
.co-coupon__toggle.is-open svg { transform: rotate(180deg); }
.co-coupon:not(.co-coupon--card) .co-coupon__panel { margin-top: 12px; }

/* Promo code — an always-visible warm card (no collapse). */
.co-coupon--card {
	padding: 14px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #FCFBF7;
	border-bottom: 1px solid var(--line);
}
.co-coupon__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.co-coupon__ic { font-size: 1.05rem; line-height: 1; }
.co-coupon__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.co-coupon--card .co-coupon__panel { margin-top: 0; }
.co-coupon__banner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	background: #EAF6EA;
	border: 1px solid #CFE8CF;
	color: var(--green-900);
	animation: mfBannerIn .28s var(--ease);
}
@keyframes mfBannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.co-coupon__banner[hidden] { display: none; }
.co-coupon__banner-ic {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%; background: var(--green-700); color: #fff; font-size: 11px; font-weight: 800;
}
.co-coupon__banner-txt { flex: 1; }
.co-coupon__banner-txt b { font-weight: 800; }
.co-coupon__remove {
	flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent;
	color: var(--green-900); font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; transition: opacity .15s var(--ease), background .15s var(--ease);
}
.co-coupon__remove:hover { opacity: 1; background: rgba(37,110,51,.1); }
/* Dark "Apply" button on the promo card. */
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-1px); }

/* Delivery estimate + savings badge. */
.co-deliver { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.co-deliver svg { width: 17px; height: 17px; color: var(--green-700); flex: none; }
.co-deliver b { color: var(--ink); }

/* Dynamic savings summary — green success card with a per-source breakdown. */
.co-savings {
	margin-top: 14px;
	padding: 13px 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, #EDF8ED 0%, #E1F3E1 100%);
	border: 1px solid #CDE8CD;
}
.co-savings.is-hidden { display: none; }
.co-savings__head { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--green-900); }
.co-savings__emoji { font-size: 1.15rem; }
.co-savings__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--green-900); }
.co-savings__line[hidden] { display: none; }
.co-savings__line span { font-weight: 600; opacity: .85; }
.co-savings__line b { font-weight: 700; }
.co-savings__line--total { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #BADCBA; font-size: 14px; }
.co-savings__line--total span { opacity: 1; font-weight: 800; }
.co-savings__line--total b { font-weight: 800; font-size: 1.05rem; }

.co-totals__row--ship dd.is-free-badge {
	color: var(--green-700);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
}

/* Payment as premium cards. */
.co-pay__opt { position: relative; padding-right: 42px; }
.co-pay__ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--beige-soft); color: var(--green-900); }
.co-pay__ic svg { width: 22px; height: 22px; }
.co-pay__check {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%) scale(.4);
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--green-700);
	color: #fff;
	opacity: 0;
	transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.co-pay__check svg { width: 13px; height: 13px; }
.co-pay__opt.is-active .co-pay__check { opacity: 1; transform: translateY(-50%) scale(1); }

/* Social proof + trust + CTA. */
.co-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: #F7FBF7;
	border: 1px solid #E1F0E1;
}
.co-social__stars { color: #E8A93B; font-size: 15px; letter-spacing: 2px; flex: none; }
.co-social__text { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.co-social__text b { color: var(--ink); }

.co-place { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; min-height: 58px; }
.co-place svg { width: 18px; height: 18px; }

.co-trust {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
}
.co-trust li { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.co-trust svg { width: 14px; height: 14px; color: var(--green-700); }

/* Checkout footer trust row. */
.co-footer__trust {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
}
.co-footer__trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--green-700); }
.co-footer__trust svg { width: 16px; height: 16px; }

/* Loading spinner for the coupon/place buttons and line steppers. */
.btn.is-loading .co-place,
/* Quantity stepper loading spinner — shared by the checkout and cart page. */
.co-item__qty.is-loading,
.cart-full-item__qty.is-loading { position: relative; pointer-events: none; }
.co-item__qty.is-loading button, .co-item__qty.is-loading span,
.cart-full-item__qty.is-loading button, .cart-full-item__qty.is-loading span { opacity: .3; }
.co-item__qty.is-loading::after,
.cart-full-item__qty.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 14px; height: 14px; margin: -7px 0 0 -7px;
	border: 2px solid var(--green-700); border-right-color: transparent;
	border-radius: 50%; animation: mrfresh-spin .6s linear infinite;
}

/* -------------------------------------------------------------------------
 * "Notify me when back in stock" dialog
 *
 * The static build has no modal, so this is new — but it borrows the cart
 * drawer's overlay treatment and the theme's own tokens and .btn classes, so it
 * reads as part of the existing system rather than a second design language.
 * Nothing here touches an existing selector.
 * ---------------------------------------------------------------------- */
.notify-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: 20px;
}

.notify-modal[hidden] { display: none; }

.notify-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 21, .45);
	opacity: 0;
	transition: opacity .25s var(--ease);
}

.notify-modal.open .notify-modal__overlay { opacity: 1; }

.notify-modal__panel {
	position: relative;
	width: 100%;
	max-width: 430px;
	background: var(--surface, #fff);
	border: 1px solid var(--line);
	border-radius: var(--r-card, 20px);
	padding: 30px 26px 24px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .3);
	opacity: 0;
	transform: translateY(10px) scale(.985);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.notify-modal.open .notify-modal__panel {
	opacity: 1;
	transform: none;
}

.notify-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--muted);
	cursor: pointer;
	border-radius: 50%;
}

.notify-modal__close:hover { background: var(--beige-soft); color: var(--ink); }
.notify-modal__close svg { width: 18px; height: 18px; }

.notify-modal__title {
	font-family: var(--font-display);
	font-size: 1.45rem;
	color: var(--ink);
	margin: 0 0 6px;
	padding-right: 28px;
}

.notify-modal__text {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 18px;
}

.notify-modal__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.notify-modal__form input {
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	transition: border-color .2s var(--ease);
}

.notify-modal__form input:focus {
	outline: none;
	border-color: var(--green-700);
}

.notify-modal__form .btn { min-height: 52px; }

.notify-modal__note {
	margin: 12px 0 0;
	font-size: 13.5px;
	min-height: 1em;
}

.notify-modal__note.is-ok { color: var(--green-700); }
.notify-modal__note.is-error { color: var(--terracotta); }

.notify-modal__fine {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--muted);
}

body.notify-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.notify-modal__overlay,
	.notify-modal__panel { transition: none; }
}

/* -------------------------------------------------------------------------
 * Order confirmation (thank-you) page. Reuses the checkout tokens, cards,
 * .co-totals and buttons so it reads as one system.
 * ---------------------------------------------------------------------- */
.ty__inner { max-width: 1000px; }

/* 1. Success hero */
.ty-hero { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ty-hero__check { width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%; background: #EAF6EA; display: grid; place-items: center; }
.ty-hero__check svg { width: 60px; height: 60px; }
.ty-hero__check-ring { stroke: var(--green-700); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ty-ring .55s var(--ease, ease) forwards; }
.ty-hero__check-tick { stroke: var(--green-700); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: ty-tick .4s .5s var(--ease, ease) forwards; }
@keyframes ty-ring { to { stroke-dashoffset: 0; } }
@keyframes ty-tick { to { stroke-dashoffset: 0; } }
.ty-hero__title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.5rem); color: var(--ink); }
.ty-hero__sub { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.ty-hero__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.ty-hero__order { font-weight: 700; color: var(--ink); background: var(--beige-soft, #F6F2EA); border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.ty-hero__deliver { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--green-700); }
.ty-hero__deliver svg { width: 18px; height: 18px; }

/* 2. Timeline */
.ty-timeline { display: flex; justify-content: space-between; gap: 8px; margin: 0 auto clamp(28px, 4vw, 44px); max-width: 720px; position: relative; }
.ty-step { flex: 1; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ty-step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ty-step:first-child::before { display: none; }
.ty-step__dot { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #fff; border: 2px solid var(--line); filter: grayscale(1); opacity: .55; transition: all .2s var(--ease, ease); }
.ty-step__label { font-size: 12px; font-weight: 600; color: var(--muted); max-width: 12ch; line-height: 1.3; }
.ty-step.is-done .ty-step__dot, .ty-step.is-current .ty-step__dot { filter: none; opacity: 1; border-color: var(--green-700); background: #EAF6EA; }
.ty-step.is-done::before, .ty-step.is-current::before { background: var(--green-700); }
.ty-step.is-current .ty-step__dot { box-shadow: 0 0 0 5px rgba(46, 125, 50, 0.14); }
.ty-step.is-done .ty-step__label, .ty-step.is-current .ty-step__label { color: var(--ink); }

/* Layout */
.ty-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .ty-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } .ty-col--summary { position: sticky; top: 24px; } }
.ty-col { display: flex; flex-direction: column; gap: 20px; }

/* Cards */
.ty-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.5vw, 24px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04)); }
.ty-card__title { margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); }

/* 3. Rewards */
.ty-rewards { background: #FFF7EC; border-color: #F3E1C6; }
.ty-rewards__head, .ty-rewards__member { display: flex; align-items: flex-start; gap: 14px; }
.ty-rewards__badge { font-size: 1.7rem; flex: none; line-height: 1.1; }
.ty-rewards__title { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.35; }
.ty-rewards__title b { color: var(--terracotta); }
.ty-rewards__sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ty-rewards__sub b { color: var(--green-700); }
.ty-rewards__benefits { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ty-rewards__benefits li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--green-900); }
.ty-rewards__benefits svg { width: 14px; height: 14px; color: var(--green-700); flex: none; }
.ty-rewards__claim .co-claim__form { margin-top: 14px; }
.ty-rewards__claim .co-claim__row { display: flex; gap: 8px; }
.ty-rewards__claim .co-claim__row input { flex: 1; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; }
.ty-rewards__claim .co-claim__row input:focus { outline: none; border-color: var(--green-700); }
.ty-rewards__claim .co-claim__row .btn { flex: none; white-space: nowrap; }
.ty-rewards__claim .co-claim__msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 1em; }
.ty-rewards__claim .co-claim__msg.is-error { color: var(--stock-out); }

/* 5. Delivery + payment info — full-width row of two cards. */
.ty-info { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 640px) { .ty-info { grid-template-columns: 1fr 1fr; } }
.ty-info__card { display: flex; flex-direction: column; }
.ty-info__name { margin: 0 0 6px; font-weight: 700; font-size: 1rem; color: var(--ink); }
.ty-info__addr { font-style: normal; font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.ty-info__rows { display: flex; flex-direction: column; gap: 9px; }
.ty-info__body .ty-info__rows { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ty-info__line { margin: 0; font-size: 13.5px; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ty-info__line span { color: var(--muted); flex: none; }
.ty-info__line b { font-weight: 600; text-align: right; word-break: break-word; }
.ty-info__line em { color: var(--muted); font-weight: 500; }

/* 6. Actions */
.ty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ty-actions .btn { flex: 1 1 auto; min-width: 150px; }

/* Single horizontal row, equal spacing, icon + label. */
.ty-actions--row { margin-top: 20px; gap: 12px; flex-wrap: nowrap; }
.ty-actions--row .ty-action {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 14px;
	white-space: nowrap;
}
.ty-actions--row .ty-action svg { width: 18px; height: 18px; flex: none; }
.ty-actions--row .ty-action span { overflow: hidden; text-overflow: ellipsis; }
/* Below tablet, wrap to a 2-column grid; on phones, a single column. */
@media (max-width: 720px) {
	.ty-actions--row { flex-wrap: wrap; }
	.ty-actions--row .ty-action { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 440px) {
	.ty-actions--row .ty-action { flex: 1 1 100%; }
}

/* 8. Email */
.ty-email { text-align: center; padding: 8px 0; margin-top: 12px; }
.ty-email__msg { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--ink); }
.ty-email__msg svg { width: 18px; height: 18px; color: var(--green-700); }
.ty-email__resend { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ty-email__status { margin-left: 6px; font-weight: 600; }
.ty-email__status.is-ok { color: var(--green-700); }
.ty-email__status.is-error { color: var(--stock-out); }

/* 4. Order summary */
.ty-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ty-item { display: flex; align-items: center; gap: 12px; }
.ty-item__media { position: relative; flex: none; }
.ty-item__media img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; display: block; }
.ty-item__qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--green-700); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ty-item__body { flex: 1; min-width: 0; }
.ty-item__name { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }
.ty-item__meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ty-item__unit { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ty-item__price { text-align: right; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.ty-item__save { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--green-700); }
.ty-totals { margin-top: 14px; }
.ty-totals__pay { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.ty-totals__pay dt { color: var(--muted); }
.ty-totals__pay dd { font-weight: 600; }

/* 7. Trust */
.ty-trust { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(18px, 3vw, 26px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; background: var(--beige-soft, #F6F2EA); border-radius: 18px; }
@media (min-width: 720px) { .ty-trust { grid-template-columns: repeat(4, 1fr); } }
.ty-trust li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ty-trust__ic { font-size: 1.3rem; flex: none; }

/* Mobile: full-width actions, tighter timeline */
@media (max-width: 560px) {
	.ty-actions:not(.ty-actions--row) .btn { flex: 1 1 100%; }
	.ty-step__dot { width: 40px; height: 40px; font-size: 17px; }
	.ty-step::before { top: 19px; }
	.ty-step__label { font-size: 11px; }
}

/* -------------------------------------------------------------------------
 * Account + authentication. Reuses the site tokens, cards and buttons.
 * ---------------------------------------------------------------------- */
.ac__inner { max-width: 920px; }
.ac-banner { padding: 14px 18px; border-radius: 14px; margin: 0 auto 20px; max-width: 480px; font-size: 14px; font-weight: 600; text-align: center; }
.ac-banner.is-ok { background: #EAF6EA; color: var(--green-900); border: 1px solid #CFE8CF; }
.ac-banner.is-error { background: #FDECEC; color: var(--stock-out); border: 1px solid #F6CFCF; }

/* Auth card / tabs */
.ac-auth, .ac-card { max-width: 480px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05)); }
.ac-card--narrow { max-width: 440px; padding: clamp(24px, 4vw, 34px); }
.ac-auth { overflow: hidden; }
.ac-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ac-tab { flex: 1; padding: 16px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; position: relative; transition: color .18s var(--ease, ease); }
.ac-tab.is-active { color: var(--green-700); }
.ac-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green-700); }
.ac-panel { padding: clamp(24px, 4vw, 34px); }
.ac-card__title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.75rem); color: var(--ink); }
.ac-card__lead { margin: 0 0 20px; font-size: 14px; color: var(--muted); }

/* Floating-label fields */
.ac-field { position: relative; margin-bottom: 14px; }
.ac-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-field input { width: 100%; min-height: 54px; padding: 20px 16px 6px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; background: #fff; color: var(--ink); transition: border-color .18s var(--ease, ease); }
.ac-field input:focus { outline: none; border-color: var(--green-700); }
.ac-field input.is-invalid { border-color: var(--stock-out); }
.ac-field label { position: absolute; left: 16px; top: 17px; color: var(--muted); font-size: 15px; pointer-events: none; transition: all .15s var(--ease, ease); }
.ac-field input:focus + label, .ac-field input:not(:placeholder-shown) + label { top: 8px; font-size: 11px; font-weight: 600; color: var(--green-700); }
.ac-field--pass input { padding-right: 48px; }
.ac-eye { position: absolute; right: 8px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; cursor: pointer; }
.ac-eye.is-on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.7 10.7 0 0 1 12 19C5 19 1 12 1 12a19 19 0 0 1 5.1-6M9.9 4.2A10.9 10.9 0 0 1 12 4c7 0 11 8 11 8a19 19 0 0 1-2.2 3.2M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E"); }

/* Strength meter */
.ac-strength { height: 5px; border-radius: 999px; background: var(--line); margin: -6px 0 14px; overflow: hidden; }
.ac-strength span { display: none; }
.ac-strength::after { content: ""; display: block; height: 100%; width: 33%; border-radius: 999px; transition: width .2s var(--ease, ease), background .2s var(--ease, ease); }
.ac-strength.lvl-0::after { width: 15%; background: var(--stock-out); }
.ac-strength.lvl-1::after { width: 45%; background: #E0A93B; }
.ac-strength.lvl-2::after { width: 72%; background: #7FB069; }
.ac-strength.lvl-3::after { width: 100%; background: var(--green-700); }

.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; font-size: 13.5px; }
.ac-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; }
.ac-check input { width: 16px; height: 16px; accent-color: var(--green-700); flex: none; }
.ac-check--terms { align-items: flex-start; font-size: 13px; color: var(--muted); margin: 4px 0 18px; line-height: 1.5; }
.ac-check--terms a { color: var(--green-700); text-decoration: underline; }
.ac-submit { width: 100%; }
.ac-msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; min-height: 1em; }
.ac-msg.is-error { color: var(--stock-out); }
.ac-msg.is-ok { color: var(--green-700); }
.ac-resend { margin: 8px 0 0; text-align: center; font-size: 13px; }
.ac-alt { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.ac-guest { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.ac-guest .btn { min-width: 200px; }

/* Verify-email screen */
.ac-verify { text-align: center; }
.ac-verify__ic { font-size: 2.6rem; margin-bottom: 10px; }

/* is-loading spinner on buttons (reuses .btn) */
.ac-submit.is-loading { position: relative; color: transparent; }
.ac-submit.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mf-toast-spin .6s linear infinite; }

/* -------------------- Dashboard -------------------- */
.ac-dash { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 840px) { .ac-dash { grid-template-columns: 264px 1fr; align-items: start; } }
.ac-side { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 840px) { .ac-side { position: sticky; top: 92px; } }

/* Premium identity + rewards card at the top of the rail. */
.ac-side__card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05)); }
.ac-side__user { display: flex; align-items: center; gap: 12px; }
.ac-side__avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; box-shadow: 0 3px 10px rgba(37,110,51,.28); }
.ac-side__id { min-width: 0; }
.ac-side__hi { margin: 0; font-weight: 800; color: var(--ink); font-size: 15px; line-height: 1.2; }
.ac-side__since { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

.ac-side__rewards { margin-top: 16px; padding: 13px 14px; border-radius: 14px; background: linear-gradient(135deg, #FFF7EC 0%, #FDEFD8 100%); border: 1px solid #F1DDBE; }
.ac-side__rewards-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ac-side__rewards-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--terracotta); }
.ac-side__rewards-val { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.ac-side__bar { position: relative; height: 7px; margin: 10px 0 7px; border-radius: 999px; background: #F0DFC4; overflow: hidden; }
.ac-side__bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-700), var(--green-900)); transition: width .5s var(--ease, ease); }
.ac-side__milestone { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); }

.ac-side__nav { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05)); }
.ac-nav-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .16s var(--ease, ease), color .16s var(--ease, ease), transform .16s var(--ease, ease); }
.ac-nav-link svg { width: 19px; height: 19px; flex: none; color: var(--muted); transition: color .16s var(--ease, ease); }
.ac-nav-link:hover { background: var(--beige-soft, #F6F2EA); transform: translateX(3px); }
.ac-nav-link.is-active { background: #EAF6EA; color: var(--green-900); }
.ac-nav-link.is-active svg { color: var(--green-700); }
.ac-nav-link--logout { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; color: var(--stock-out); }
.ac-nav-link--logout svg { color: var(--stock-out); }
.ac-nav-link--logout:hover { background: #FCECEC; }

.ac-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ac-welcome__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); }
.ac-welcome__sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.ac-stats { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .ac-stats { grid-template-columns: repeat(3, 1fr); } }
.ac-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04)); }
.ac-stat__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-stat__value { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.ac-stat__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.ac-stat--rewards { background: #FFF7EC; border-color: #F3E1C6; position: relative; }
.ac-stat--rewards .ac-stat__value { color: var(--terracotta); }

/* Dashboard action tiles. */
.ac-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ac-grid { grid-template-columns: 1fr 1fr; } }
.ac-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
	transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
.ac-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,58,46,.1); }
.ac-tile--rewards { background: linear-gradient(135deg, #FFF7EC 0%, #FDEFD8 100%); border-color: #F1DDBE; }
.ac-tile__head { display: flex; align-items: center; gap: 9px; }
.ac-tile__ic { font-size: 1.2rem; line-height: 1; }
.ac-tile__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ac-tile__big { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--terracotta); }
.ac-tile__line { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.ac-tile__sub { margin: 2px 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ac-tile__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ac-tile .btn { margin-top: auto; }
.ac-tile__actions .btn { margin-top: 0; }

/* (i) info button on the rewards stat, top-right. */
.ac-info {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--terracotta);
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s var(--ease), background .15s var(--ease);
}
.ac-info:hover, .ac-info[aria-expanded="true"] { opacity: 1; background: rgba(198, 106, 60, 0.12); }
.ac-info svg { width: 18px; height: 18px; }

/* Explainer popup anchored to the rewards stat. */
.ac-pop {
	position: absolute;
	top: 44px;
	right: 12px;
	z-index: 20;
	width: min(300px, calc(100vw - 48px));
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(31, 58, 46, 0.16);
	text-align: left;
	animation: acPopIn .18s var(--ease);
}
.ac-pop[hidden] { display: none; }
@keyframes acPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Little pointer to the (i) icon. */
.ac-pop::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 16px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}
.ac-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ac-pop__title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.ac-pop__close { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 6px; }
.ac-pop__close:hover { color: var(--ink); }
.ac-pop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-pop__list li { position: relative; padding-left: 20px; font-size: 12.8px; line-height: 1.5; color: var(--muted); }
.ac-pop__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-700); font-weight: 800; }
.ac-pop__list li b { color: var(--ink); font-weight: 700; }

.ac-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ac-card__head .ac-card__title { margin: 0; }
.ac-main .ac-card { max-width: none; margin: 0; padding: clamp(18px, 2.5vw, 24px); }
.ac-orders { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ac-orders { grid-template-columns: 1fr 1fr; } }
.ac-order { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ac-order__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-order__no { font-weight: 700; color: var(--ink); }
.ac-order__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--beige-soft, #F6F2EA); color: var(--muted); }
.ac-order__status--processing, .ac-order__status--completed { background: #EAF6EA; color: var(--green-900); }
.ac-order__meta { margin: 8px 0 12px; font-size: 12.5px; color: var(--muted); }
.ac-order__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-order__total { font-weight: 700; color: var(--ink); }
.ac-empty { text-align: center; padding: 30px 16px; }
.ac-empty__ic { font-size: 2.6rem; line-height: 1; }
.ac-empty__title { margin: 12px 0 4px; font-weight: 700; font-size: 15px; color: var(--ink); }
.ac-empty__sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.ac-empty p { margin: 0 0 14px; color: var(--muted); }
.ac-soon { text-align: center; padding: 40px 20px; }
.ac-soon__ic { font-size: 2.8rem; margin-bottom: 6px; }
.ac-soon__tag { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--green-700); background: #EAF6EA; border: 1px solid #CFE8CF; border-radius: 999px; padding: 4px 12px; }
.ac-soon .ac-card__lead { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------------
 * Bridged WooCommerce sections (Orders, Addresses, Account Details) restyled
 * to match the premium account shell until their bespoke UIs land.
 * ---------------------------------------------------------------------- */
.ac-wc { color: var(--ink); }
.ac-wc h1, .ac-wc h2, .ac-wc h3, .ac-wc legend { font-family: var(--font-display); color: var(--ink); font-weight: 400; }
.ac-wc h1, .ac-wc h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 14px; }
.ac-wc h3 { font-size: 1.2rem; margin: 0 0 10px; }
.ac-wc > p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.ac-wc em, .ac-wc .description, .ac-wc span > em { color: var(--muted); font-size: 12.5px; }

/* Forms. */
.ac-wc form { max-width: 540px; }
.ac-wc .woocommerce-address-fields, .ac-wc .woocommerce-EditAccountForm { max-width: 540px; }
.ac-wc label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ac-wc .required { color: var(--stock-out); border: 0; }
.ac-wc .form-row, .ac-wc .woocommerce-form-row, .ac-wc p.form-row { margin: 0 0 16px; }
.ac-wc input[type="text"], .ac-wc input[type="email"], .ac-wc input[type="tel"],
.ac-wc input[type="password"], .ac-wc input[type="number"], .ac-wc input[type="search"],
.ac-wc select, .ac-wc textarea, .ac-wc .select2-selection {
	width: 100%; min-height: 46px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line);
	border-radius: 12px; font-family: inherit; font-size: 14.5px; color: var(--ink); background: #fff;
	box-sizing: border-box; transition: border-color .16s var(--ease, ease);
}
.ac-wc textarea { height: auto; min-height: 96px; padding: 12px 14px; }
.ac-wc select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px;
}
.ac-wc input:focus, .ac-wc select:focus, .ac-wc textarea:focus { outline: none; border-color: var(--green-700); }
.ac-wc fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 20px 0; }
.ac-wc fieldset legend { font-size: 1.05rem; padding: 0 6px; margin-bottom: 4px; }

/* Buttons + edit links → premium pills. */
.ac-wc .button, .ac-wc button[type="submit"], .ac-wc .woocommerce-Button, .ac-wc input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
	color: #fff; background: linear-gradient(135deg, var(--green-700), var(--green-900));
	box-shadow: 0 4px 12px rgba(37, 110, 51, 0.24);
	transition: transform .16s var(--ease, ease), box-shadow .16s var(--ease, ease);
}
.ac-wc .button:hover, .ac-wc button[type="submit"]:hover, .ac-wc .woocommerce-Button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(37, 110, 51, 0.3); color: #fff; }
.ac-wc .woocommerce-orders-table .button { min-height: 36px; padding: 0 16px; font-size: 12.5px; }

/* Notices. */
.ac-wc .woocommerce-info, .ac-wc .woocommerce-message, .ac-wc .woocommerce-error, .ac-wc .woocommerce-notice {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	list-style: none; margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; border: 1px solid;
	font-size: 13.5px; line-height: 1.5;
}
.ac-wc .woocommerce-info { background: #F1F6FB; border-color: #D3E2F1; color: #2b4a63; }
.ac-wc .woocommerce-message { background: #EAF6EA; border-color: #CFE8CF; color: var(--green-900); }
.ac-wc .woocommerce-error { background: #FCECEC; border-color: #F3C9C9; color: var(--stock-out); }
.ac-wc .woocommerce-info .button { margin-left: auto; }

/* Orders table. */
.ac-wc .woocommerce-orders-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ac-wc .woocommerce-orders-table th {
	text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line);
}
.ac-wc .woocommerce-orders-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); vertical-align: middle; }
.ac-wc .woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.ac-wc .woocommerce-orders-table__cell-order-number a { color: var(--green-900); font-weight: 700; text-decoration: none; }

/* Address cards. */
.ac-wc .woocommerce-Addresses { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
@media (min-width: 620px) { .ac-wc .woocommerce-Addresses.u-columns { grid-template-columns: 1fr 1fr; } }
.ac-wc .woocommerce-Address, .ac-wc .woocommerce-Addresses .u-column1, .ac-wc .woocommerce-Addresses .u-column2 {
	float: none; width: auto; margin: 0;
	border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: #fff;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}
.ac-wc .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.ac-wc .woocommerce-Address-title h3 { margin: 0; font-size: 1.05rem; white-space: nowrap; }
.ac-wc .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.65; color: var(--muted); }
.ac-wc .woocommerce-Address .edit, .ac-wc a.edit {
	font-size: 13px; font-weight: 700; color: var(--green-700); text-decoration: none; white-space: nowrap;
	padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; transition: background .15s var(--ease, ease);
}
.ac-wc .woocommerce-Address .edit:hover, .ac-wc a.edit:hover { background: #EAF6EA; border-color: #CFE8CF; }
.ac-wc .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

@media (max-width: 560px) {
	.ac-row2 { grid-template-columns: 1fr; }
	.ac-tab { font-size: 14px; padding: 14px; }
}