/*
 * Re-skins WooCommerce (shop, single product, cart, checkout, my account) to
 * the site's own tokens instead of WooCommerce's defaults. Only loaded on
 * WooCommerce pages (see memorink_woocommerce_assets() in functions.php) -
 * the landing page never pays for this. Reads the same custom properties as
 * main.css (--ink, --accent, --grad-cta, --blue-100, ...), which is enqueued
 * first, so this file only ever overrides, never redefines, a token.
 *
 * Covers both the block-based Cart/Checkout (`.wc-block-*`) and the classic,
 * shortcode-rendered templates still used by Shop, Single Product and My
 * Account (`.woocommerce *`) - this theme has no woocommerce/ template
 * overrides, so both rendering paths are live on the site at once.
 */

/* .memorink-page's inline padding-bottom: 112px clears the landing page's fixed
   .sticky-cta, and no store screen has one - front-page.php is the only template
   that prints it. Left alone it is 112px of dead white under the last row of a
   cart or a checkout. !important because it is an inline style; safe unscoped
   because this stylesheet only loads on WooCommerce's own screens (see
   memorink_woocommerce_assets()). legal.css does exactly this for prose pages. */
.memorink-page {
	padding-bottom: 0 !important;
}

/* page.php's <main> carries no horizontal padding of its own (that's left to
   whatever it wraps, the way /try's .mrp supplies its own) - WooCommerce's
   .alignwide is a no-op without theme.json layout support, so without this
   the cart/checkout/shop/account content runs edge-to-edge with nothing
   inside it padded either. 24px matches every other section's gutter. */
main.memorink-page-body > .wp-block-woocommerce-cart,
main.memorink-page-body > .wp-block-woocommerce-checkout,
main.memorink-page-body > .woocommerce {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-account {
	font-family: 'Noto Sans', sans-serif;
	color: var(--ink-soft);
}

.woocommerce input,
.woocommerce button,
.woocommerce select,
.woocommerce textarea,
.wp-block-woocommerce-cart input,
.wp-block-woocommerce-cart button,
.wp-block-woocommerce-cart select,
.wp-block-woocommerce-checkout input,
.wp-block-woocommerce-checkout button,
.wp-block-woocommerce-checkout select {
	font-family: inherit;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wc-block-components-checkout-step__title,
.wc-block-components-panel__button,
.wc-block-components-order-summary__button-text,
.woocommerce-MyAccount-navigation-link a {
	color: var(--ink);
	font-weight: 600;
}

.woocommerce a,
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a {
	color: var(--accent);
}
.woocommerce a:hover,
.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover {
	color: var(--accent-strong);
}

/* ============ Buttons ============
   One primary style everywhere an order actually moves forward (add to cart,
   proceed to checkout, place order, pay) - the same gradient as the site's
   other in-form action, the Contact form's submit button, at the same 12px
   radius. Quieter actions (remove item, apply coupon, edit address) stay
   text-weight rather than competing with it. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-button.button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wp-block-woocommerce-checkout .wp-block-button__link,
.wp-block-woocommerce-cart .wp-block-button__link {
	font-family: 'Noto Sans', sans-serif;
	font-size: 16.5px;
	font-weight: 600;
	color: #ffffff;
	background: var(--grad-cta);
	border: none;
	border-radius: 12px;
	padding: 14px 22px;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(29, 78, 147, 0.22);
	transition: background 0.15s ease;
	cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wp-block-button__link:hover {
	background: var(--grad-cta-hover);
	color: #ffffff;
}
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.wc-block-components-button:disabled {
	opacity: 0.5;
	box-shadow: none;
}

/* Secondary / outline buttons (e.g. "Select a different payment method",
   "Change address") - a WooCommerce Blocks modifier class, kept quiet on
   purpose so the one gradient action per screen still reads as the choice. */
.wc-block-components-button.is-style-outline,
.wc-block-components-button.wc-block-components-checkout-return-to-cart-button,
.woocommerce a.button.wc-forward,
.woocommerce-MyAccount-navigation-link--customer-logout a {
	background: transparent;
	color: var(--accent);
	box-shadow: none;
	border: 1px solid var(--blue-100);
}
.wc-block-components-button.is-style-outline:hover,
.woocommerce a.button.wc-forward:hover {
	background: var(--field);
	color: var(--accent-strong);
}

/* Quantity stepper and small icon-only controls (remove item, panel toggles)
   - never the gradient, which is reserved for the one action that advances
   the order. */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button {
	border-color: var(--blue-100);
	color: var(--ink-soft);
}
.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata,
.remove_from_cart_button {
	color: var(--muted) !important;
}

/* ============ Fields ============
   Same well as the Contact form's inputs: --field background, --blue-100
   border, 12px radius, 15px padding - so a checkout field and a contact
   field are visibly the same control. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.shop_table td select,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-cart select {
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px;
	padding: 13px 14px;
	border-radius: 12px;
	border: 1px solid var(--blue-100);
	background: var(--field);
	color: var(--ink-soft);
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.woocommerce form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-textarea label {
	color: var(--muted);
	font-size: 14.5px;
}
::placeholder { color: var(--muted-2); }

/* Select2 (country/state dropdowns) ships its own fixed-height chrome that
   the rules above can't reach through descendant selectors alone. */
.select2-container--default .select2-selection--single {
	border: 1px solid var(--blue-100);
	background: var(--field);
	border-radius: 12px;
	height: 46px;
	padding: 6px 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ink-soft);
	line-height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}
.select2-dropdown {
	border-color: var(--blue-100);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--accent);
}

/* Radios and checkboxes (shipping method, payment method, T&Cs) - the ring
   colour is the one place these controls borrow the accent directly, same
   as the finish swatches on the pricing card. */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.wc-block-components-radio-control__input,
.wc-block-components-checkbox input {
	accent-color: var(--accent);
}
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: 12px;
	border-color: var(--blue-100) !important;
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked {
	border-color: var(--accent) !important;
	background: var(--field);
}

/* ============ Cards ============
   Cart items, the order summary panel, and each checkout step read as the
   same white/blue-100/shadow-soft card as the pricing card and the cart's
   quick-buy panel - not WooCommerce's default hard-ruled table. */
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-components-checkout-step,
.woocommerce table.shop_table,
.woocommerce-MyAccount-content,
.woocommerce-order-details,
.woocommerce-customer-details {
	background: #ffffff;
	border: 1px solid var(--blue-100);
	border-radius: 20px;
	box-shadow: 0 10px 30px -18px var(--shadow-soft);
}
.wc-block-cart-items { padding: 4px 18px; }
.wc-block-components-checkout-step { padding: 18px; margin-bottom: 16px; }
.woocommerce table.shop_table { border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--blue-100);
	padding: 12px 14px;
}
.woocommerce-MyAccount-content,
.woocommerce-order-details,
.woocommerce-customer-details {
	padding: 20px;
}

.wc-block-cart-items__header,
.wc-block-cart-items__row {
	border-color: var(--blue-100) !important;
}
.wc-block-components-product-name {
	color: var(--ink);
	font-weight: 600;
}
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.woocommerce-Price-amount {
	color: var(--ink);
	font-weight: 600;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	color: var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	color: var(--accent-strong);
	font-size: 18px;
	font-weight: 700;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__description {
	color: var(--muted);
}
.wc-block-components-totals-item,
.wc-block-cart__totals-title {
	border-color: var(--blue-100) !important;
}

/* ============ Order summary reservation note ============
   One line inside the order summary card itself - a core/paragraph block
   added as a sibling among the summary's own inner blocks
   (checkout-order-summary-block, see wordpress/push-page-content.sh's
   sibling for pages; this one is pushed the same way, straight into the
   Checkout page's post_content). Static content sitting alongside the
   block's dynamic children, not spliced into the React checkout - so none
   of the removeChild risk that keeps the trust panel appended after the
   block instead of inside it. */
.memorink-order-summary-note {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--blue-100);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--blue-100);
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
}
.woocommerce-MyAccount-navigation-link {
	border-bottom: 1px solid var(--blue-100);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--accent-strong);
}

/* ============ Express checkout ============
   Stripe's "Or" rule between the express-pay buttons (Apple Pay/Google Pay/
   Link) and the totals below - it renders even when no express method ends
   up available, leaving a stray "OR" with nothing above it. Hide the rule
   itself only; the buttons stay untouched for visitors who do get one. */
.wc-block-components-express-payment-continue-rule {
	display: none;
}

/* Hiding that rule took its 24px of vertical margin with it - a hidden element
   contributes no spacing - which left the Apple Pay / Google Pay buttons sitting
   flush against Proceed to Checkout with a 0px gap between them (measured on
   production in the cart: express block bottom 358, button top 358). Three
   stacked full-width buttons touching each other read as one control, and the
   one that isn't an express method is the one most people want.
   So the separation the rule used to carry is put back here, on the container
   rather than on the buttons: the same 24px, and only when an express method
   actually rendered. That :has() guard is the point - the block itself is always
   in the DOM, so an unguarded margin would open a 24px hole under the totals for
   every visitor who gets no express method at all, which is most of them on
   desktop. The gap *between* the express buttons stays WooCommerce's own 12px;
   what was missing is the break before the ordinary button, and the wider gap is
   what groups the express pair as a pair. */
.wc-block-cart__payment-options:has( .wc-block-components-express-payment__event-buttons li ) {
	padding-bottom: 24px;
}

/* Printed by memorink_checkout_express_payment_label() (inc/checkout.php),
   directly above the express-payment block. Small and muted - this is a
   processor credit, not a trust claim, so it stays quieter than .trust-row's
   "Secure SSL checkout" line. Centered to match the express-pay buttons
   WooCommerce stacks below it, which are full-width. */
.express-payment-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 24px 10px;
	font-family: 'Noto Sans', sans-serif;
	font-size: 12px;
	color: var(--muted-2);
}
.express-payment-label .trust-stripe {
	/* .trust-stripe's own margin-top: 3px (main.css) assumes it sits beside a
	   text baseline, not a flex-centered row - cancel it here or the mark
	   reads low against "Powered by". */
	margin-top: 0;
	height: 14px;
}

/* ============ Notices ============
   Same 12px radius and Noto Sans as everything else; the semantic colour
   (error red / success green / info blue) stays, since that meaning matters
   more here than the palette. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
	font-family: 'Noto Sans', sans-serif;
	border-radius: 12px;
	box-shadow: none;
}
.woocommerce-message {
	border-top-color: var(--accent);
}
.woocommerce-message::before {
	color: var(--accent);
}

/* ============ Shop archive & single product (classic templates) ============ */
.woocommerce ul.products li.product {
	font-family: 'Noto Sans', sans-serif;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--ink);
	font-weight: 600;
	font-size: 17px;
}
.woocommerce ul.products li.product .price {
	color: var(--accent-strong);
	font-weight: 600;
}
.woocommerce ul.products li.product .button {
	margin-top: 10px;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-result-count,
.woocommerce-ordering select {
	font-family: 'Noto Sans', sans-serif;
	color: var(--muted);
}
.woocommerce-ordering select {
	border: 1px solid var(--blue-100);
	border-radius: 10px;
	background: var(--field);
	padding: 8px 10px;
}

.single-product .product .price {
	color: var(--accent-strong);
	font-size: 22px;
	font-weight: 600;
}
.single-product .product .product_title {
	color: var(--ink);
}
.single-product .quantity input.qty {
	border: 1px solid var(--blue-100);
	border-radius: 10px;
	background: var(--field);
	padding: 10px;
	color: var(--ink-soft);
}

/* ============ The security notice under the checkout ============
   Printed by memorink_checkout_trust_panel() (inc/checkout.php); the row's own
   type and the Stripe wordmark come from .trust-* in main.css, which this
   stylesheet already depends on. Everything below is just the box.

   It borrows the site's card language rather than inventing a badge: --tint-sky
   ground, a hairline in --accent-quiet, 16px radius. No shadow, no seal, no
   green - a payment notice that shouts is a payment notice you distrust.

   Capped at the checkout column's own width and aligned to its left edge, not
   centred: the Checkout block is two columns on desktop, so a centred box sits
   under the gap between the form and the order summary rather than under the
   Place Order button it is reassuring you about. The 24px is the block's own
   horizontal padding (.wp-block-woocommerce-checkout), which is what puts the
   form's left edge where it is - matching it lines the panel up with the button
   at every width. If WooCommerce ever changes that padding the panel is merely
   offset, not broken. */
.trust-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 620px;
	margin: 20px 24px 0;
	padding: 14px 16px;
	border: 1px solid var(--accent-quiet);
	border-radius: 16px;
	background: var(--tint-sky);
	font-family: 'Noto Sans', sans-serif;
	box-sizing: border-box;
}
.trust-panel-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--accent);
}
/* The text column is the flexible one; the icon and the mark keep their size. */
.trust-panel-body {
	flex: 1 1 220px;
	min-width: 0;
}
.trust-panel-title,
.trust-panel-text {
	display: block;
}
.trust-panel-title {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 2px;
}
.trust-panel-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: pretty;
}
/* Right-aligned beside the text on a wide column, and it drops to its own line
   under 480px - which is why the label and the mark travel together. */
.trust-panel-mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	padding-top: 3px;
	font-size: 12.5px;
	color: var(--muted-2);
	white-space: nowrap;
}

/* ============ The order-received notice ============
   "Your payment has not gone through yet" - inc/thankyou.php. It is the first
   thing on the page, above WooCommerce's own thank-you line, because it is
   correcting that line rather than adding to it.

   The tinted ground and the accent rule down the left are lifted from the
   reservation email's own pending-payment box (inc/emails.php), on purpose:
   the two arrive minutes apart and saying the same thing in the same shape is
   what makes the second one read as confirmation rather than as news.

   No horizontal margin - both wrappers the order-received page can render
   inside (.woocommerce classically, .wp-block-woocommerce-checkout when the
   block's own render callback serves it) already carry the 24px gutter this
   stylesheet gives them at the top of the file. The cap is a measure, not a
   layout: on a wide monitor the order table below runs to 1280px and a
   paragraph that did the same would be unreadable. */
.order-pending {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 720px;
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--accent-quiet);
	border-left: 3px solid var(--accent);
	border-radius: 16px;
	background: var(--tint-sky);
	font-family: 'Noto Sans', sans-serif;
	box-sizing: border-box;
}
.order-pending-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--accent);
}
/* The text column is the flexible one; the icon keeps its size. */
.order-pending-body {
	flex: 1 1 auto;
	min-width: 0;
}
.order-pending-title,
.order-pending-text {
	display: block;
}
.order-pending-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 3px;
}
.order-pending-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: pretty;
}

/* ============ Desktop ============
   Cart and Checkout are WooCommerce Blocks, which carry their own responsive
   two-column layout - nothing to add there. The classic, shortcode-rendered
   screens (My Account's Login/Register/Lost Password) have no such layout:
   below 900px the theme's own .memorink-page cap (430px) keeps a bare
   <form> looking like everything else on the site, by accident - there's
   nothing to cap. Above 900px that cap lifts entirely (the column is the
   viewport now) and the same form stretches its inputs edge to edge, which
   reads as unstyled rather than as a design choice. Capped and centred here,
   at the same width the trust panel already uses for "one readable card" on this
   page. Only the guest-facing screens: My Account's own dashboard/orders/
   addresses already sit inside WooCommerce's nav+content grid, which bounds
   them on its own. */
@media (min-width: 900px) {
	.woocommerce-form-login,
	.woocommerce-form-register,
	.woocommerce-ResetPassword {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	/* .memorink-page used to cap at 1280px on desktop and now spans the whole
	   viewport (see main.css), which is a decision about the landing page - the
	   store was only ever bounded by that cap, by accident. Keep the store where
	   it was: 1280px, centred, so a cart or a checkout on a wide monitor is still
	   one readable column of blocks rather than a form stretched across a metre
	   of glass. The landing page is deliberately NOT capped here. */
	main.memorink-page-body > .wp-block-woocommerce-cart,
	main.memorink-page-body > .wp-block-woocommerce-checkout,
	main.memorink-page-body > .woocommerce {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

}

/* ============ The frame's product page ============
   Added 2026-08-24 with woocommerce/content-single-product.php, when the main
   CTA stopped opening /try and started landing here.

   This is /try's finish screen, deliberately: the same proportions, the same
   swatch-and-label pattern, the same single full-width button. The values
   below are taken from preview.css rather than re-invented - .mrp-mockup's
   88% width, the halo ring geometry on the swatches, the 34px price - because
   the two screens have to read as the same object at two moments, and a
   product page that looks like a different site is a product page people
   hesitate on.

   The column is capped at the same 430px as the rest of the site, and that is
   the whole of the mobile design. **Desktop is a different layout, not this one
   stretched** - see the min-width: 900px block at the foot of this file, added
   2026-08-24. The two-column arrangement there was resisted at first on the
   grounds that it would turn the page back into a catalogue entry; what settled
   it is that the catalogue entry was WooCommerce's gallery-plus-tabs furniture,
   not the number of columns. One photograph and one buy panel side by side is
   still one object being looked at - it is just being looked at on a screen
   three times the width of a phone, where a 430px ribbon down the middle reads
   as an unfinished page rather than as restraint. */
.memorink-frame .mfp {
	max-width: 430px;
	margin: 0 auto;
	padding: 8px 24px 48px;
	box-sizing: border-box;
	font-family: 'Noto Sans', sans-serif;
}

/* All three finishes stacked in one box and cross-faded on opacity. They stay
   in the layout (opacity, not display) so the box never reflows and the fade
   has something to fade to - and so entering the page fetches all three, which
   is what makes the first swatch press instant. */
.memorink-frame .mfp-media {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 88%;
	margin: 0 auto;
}
.memorink-frame .mfp-shot {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.memorink-frame .mfp-shot.is-active {
	opacity: 1;
}
.memorink-frame .mfp-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Ink at low alpha, never --halo-sky: that token is a saturated blue meant
	   to sit behind a tinted feature frame, and on this white ground it would
	   ring the product in colour. Same call preview.css makes. */
	filter: drop-shadow(0 14px 26px rgba(16, 35, 63, 0.16));
}

.memorink-frame .mfp-title {
	font-size: 27px;
	font-weight: 600;
	color: var(--ink);
	text-align: center;
	margin: 16px 0 8px;
	line-height: 1.3;
	text-wrap: balance;
}
.memorink-frame .mfp-desc {
	font-size: 16.5px;
	color: var(--muted);
	text-align: center;
	margin: 0 0 20px;
	line-height: 1.5;
	text-wrap: pretty;
}
/* The short description is a WooCommerce field, so it can arrive as a
   paragraph rather than a bare string. Don't let it add a second gap. */
.memorink-frame .mfp-desc > p:first-child { margin-top: 0; }
.memorink-frame .mfp-desc > p:last-child { margin-bottom: 0; }

/* Finish picker. The swatch carries the finish's own colour, which is the one
   place on this page where a non-blue fill is deliberate - it is a sample of
   the product, not UI. Per the palette's rule (a) that makes the fill graphic
   rather than informational, so "which one is selected" is carried by the
   --accent ring, the aria-checked state and the label below, never by the
   colour alone. */
.memorink-frame .mfp-swatches {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 0 0 10px;
}
/* 48px, matching the landing card rather than /try's 38px: comfortably over
   the 44px touch minimum, and big enough that the finish reads as a sample
   rather than a dot - which matters more here than anywhere, since this is
   where the colour is actually being committed to. */
.memorink-frame .mfp-swatch {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.memorink-frame .mfp-swatch span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* The inset hairline is what keeps soft cream visible against white. */
	box-shadow: inset 0 0 0 1px rgba(11, 26, 46, 0.18);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.memorink-frame .mfp-swatch:hover span { transform: scale(1.06); }
/* The white layer first is what makes the ring read as a gap around the
   swatch rather than a thick blue outline touching it. */
.memorink-frame .mfp-swatch.is-on span {
	box-shadow: inset 0 0 0 1px rgba(11, 26, 46, 0.18), 0 0 0 3px #ffffff, 0 0 0 5px var(--accent);
}
.memorink-frame .mfp-finish {
	font-size: 15.5px;
	color: var(--muted);
	text-align: center;
	margin: 0 0 14px;
}

.memorink-frame .mfp-price {
	text-align: center;
	margin: 0;
	font-size: 34px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
/* wc_price() wraps the figure in WooCommerce's own markup, which its
   stylesheet sizes and colours. The figure is this page's largest number and
   it answers to the rule above, not to WooCommerce's. */
.memorink-frame .mfp-price .woocommerce-Price-amount,
.memorink-frame .mfp-price bdi,
.memorink-frame .mfp-price .woocommerce-Price-currencySymbol {
	font: inherit;
	color: inherit;
}

.memorink-frame .mfp-shipping-row { text-align: center; margin: 8px 0 0; }
.memorink-frame .mfp-shipping {
	display: inline-block;
	padding: 4px 11px;
	background: var(--tint-sky);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--accent-strong);
	line-height: 1.4;
}

.memorink-frame .mfp-buy { margin: 0; }
/* The page's one gradient and its one action. Its lightest stop is 5.14:1 on
   white, so white text on it passes at any size - keep any new stop inside
   that range. */
.memorink-frame .mfp-btn {
	display: block;
	width: 100%;
	margin-top: 18px;
	/* A <button> centres its own label; an <a> does not. Anything else that
	   ever wears this class may be a link, so the centring is stated rather
	   than inherited from the UA sheet. */
	text-align: center;
	border: 0;
	border-radius: 999px;
	padding: 16px 20px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	background: var(--grad-cta);
	box-shadow: 0 8px 20px rgba(16, 35, 63, 0.18);
	cursor: pointer;
	transition: background 0.2s ease;
}
.memorink-frame .mfp-btn:hover { background: var(--grad-cta-hover); }

/* What actually happens to the card, in the quietest type on the screen -
   there to be found by someone hesitating, not read first. It replaced the
   deposit block this screen inherited from /try. */
.memorink-frame .mfp-terms {
	text-align: center;
	margin: 12px auto 0;
	max-width: 330px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--muted);
}
.memorink-frame .mfp-terms strong { color: var(--ink); font-weight: 700; }

.memorink-frame .mfp-specs {
	list-style: none;
	margin: 26px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--blue-100);
	display: grid;
	grid-template-columns: 1fr;
	gap: 13px;
}
.memorink-frame .mfp-spec {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 16.5px;
	color: var(--ink-soft);
	line-height: 1.4;
}
/* The icon keeps its own line-height-independent box, so a spec that wraps to
   two lines still hangs its text off one left edge. */
.memorink-frame .mfp-spec svg { flex: 0 0 auto; margin-top: 2px; }

.memorink-frame .trust-row { margin-top: 24px; }

.memorink-frame .mfp-btn:focus-visible,
.memorink-frame .mfp-swatch:focus-visible {
	outline: 3px solid var(--accent-mid);
	outline-offset: 2px;
}

/* ============ The frame's product page, on desktop ============
   Added 2026-08-24. Below 1024px nothing here applies and the page is the
   single 430px column described above, unchanged.

   **The threshold is 1024px, not the site's own 900px, and that is deliberate.**
   Everywhere else one breakpoint serves the whole page, because everywhere else
   the desktop layout is the mobile one given more room. This one is a different
   arrangement, and it has a floor: the buy panel has to stay at least as wide as
   it is on a phone, or the desktop version is objectively worse than the thing
   it replaces. Measured at 900px the panel came out at ~334px against the
   phone's 382 - the description broke to four lines, the trust row wrapped, and
   the photograph beside it was smaller than the one a phone shows. At 1024 the
   panel lands at ~390px and none of that happens. A 960px-wide window therefore
   gets the single column, which is a finished design rather than a squeezed one.

   The photograph and the buy panel sit side by side, which is the one change:
   everything keeps its own type sizes, its swatch geometry and its single
   gradient button. Three things are worth knowing before editing it.

   1. **The grid needs .mfp-info to exist.** The template was a flat list of
      siblings under .mfp - a photograph followed by nine things that are not
      the photograph - and a flat list cannot be split into two columns without
      either a wrapper or grid-row arithmetic that breaks the moment a line of
      copy is added. So the wrapper is in the markup, and it is deliberately
      styled NOWHERE outside this block: on a phone it is an inert div and the
      column reads exactly as it did before it existed.

   2. **The copy goes left-aligned, and it has to go left-aligned everywhere at
      once.** Centred type is right for a 430px column being held in a hand and
      wrong for a 430px panel beside a 560px photograph - the eye has a left
      edge here and every line must hang off it, including the swatch row, the
      shipping badge, the terms and the trust line. Miss one and it reads as a
      mistake rather than as a variant.

   3. **The cap is 1080px, not the store's 1280px.** The buy panel stops being
      readable long before it stops being wide, so the extra width would all go
      to the photograph and to the gap. Widen the panel's own max-width if the
      copy should follow the viewport - not the container. */
@media (min-width: 1024px) {
	.memorink-frame .mfp {
		max-width: 1080px;
		padding: 24px 24px 80px;
		display: grid;
		/* The photograph takes the larger share: it is the product, and the
		   panel beside it is bounded by its own measure anyway. */
		grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
		/* Narrows before the columns do, so the gap gives way first on a
		   1024px laptop and the panel keeps its measure. */
		column-gap: clamp(40px, 4.5vw, 64px);
		/* Both columns hang from the top: the title and the photograph are the
		   two things being compared and they start on the same line. Centring
		   them instead left the frame floating in the middle of a column whose
		   top third was empty, which read as a loading state. */
		align-items: start;
	}

	/* 88% was a phone's breathing room inside a full-bleed column. Here the
	   grid track is the breathing room. */
	.memorink-frame .mfp-media {
		width: 100%;
		margin: 0;
		/* Hangs from the top of its row, level with the title beside it.

		   **Not sticky, and that was tried.** The panel is roughly twice the
		   photograph's height, so keeping the frame on screen while someone
		   reads the specs is a real idea - but `position: sticky` with any top
		   offset large enough to clear the site's sticky header also clamps the
		   element at rest, because its natural resting position is already
		   above that offset. Measured: `top: 76px` put the photograph's box at
		   76px on first paint against the title's 32px, a visible 44px step
		   between two things whose whole job is to start on the same line. A
		   smaller offset removes the step and slides the frame under the header
		   instead. The misalignment is paid on every page load and the benefit
		   is paid only while scrolling a page that is barely a viewport and a
		   half tall, so it is not worth it. If it is ever revisited, the fix is
		   a wrapper that is sticky while .mfp-media is not - not a smaller
		   number here. */
		align-self: start;
	}

	.memorink-frame .mfp-info {
		max-width: 430px;
		text-align: left;
	}

	.memorink-frame .mfp-title {
		font-size: 34px;
		text-align: left;
		margin: 0 0 10px;
		/* text-wrap: balance evens the ragged edge of a centred heading; on a
		   left-aligned one it only makes the measure narrower than the column. */
		text-wrap: pretty;
	}
	.memorink-frame .mfp-desc {
		font-size: 17px;
		text-align: left;
		margin: 0 0 24px;
	}

	.memorink-frame .mfp-swatches {
		justify-content: flex-start;
		gap: 16px;
		margin-bottom: 12px;
	}
	.memorink-frame .mfp-finish {
		text-align: left;
		margin-bottom: 16px;
	}

	.memorink-frame .mfp-price {
		text-align: left;
		font-size: 40px;
	}
	.memorink-frame .mfp-shipping-row {
		text-align: left;
		margin-top: 10px;
	}

	/* Still the full width of the panel - it is the page's one action, and a
	   short button floating in a wide column is a smaller target and a quieter
	   one for no gain.

	   Scoped to the button inside the buy form rather than to .mfp-btn, so a
	   second, quieter control added under it later cannot be silently grown
	   into a rival primary button by this rule. */
	.memorink-frame .mfp-buy .mfp-btn {
		margin-top: 22px;
		padding: 17px 20px;
		font-size: 17.5px;
	}
	.memorink-frame .mfp-terms {
		text-align: left;
		max-width: none;
		margin: 14px 0 0;
	}

	/* One column still. Two fit at this width on paper and leave ~200px a
	   cell, which wraps four of the six - the same measurement the landing
	   card's specs are held to. */
	.memorink-frame .mfp-specs {
		margin-top: 30px;
		padding-top: 22px;
		gap: 14px;
	}

	/* The trust row is centred on mobile like everything else in this panel,
	   so it needs the same left edge as the rest of it here. */
	.memorink-frame .trust-row {
		justify-content: flex-start;
		margin-top: 26px;
	}
}