/**
 * Neopharm — Remedium checkout bridge.
 *
 * DESIGN POSITION
 * ---------------
 * The DC Neopharm theme already owns the site's identity. This stylesheet
 * inherits it rather than competing with it: every colour and face is a custom
 * property with a conservative fallback, so the theme (or a child theme) can
 * restyle the cart by redefining a handful of variables and nothing here needs
 * touching.
 *
 * Type is deliberately `inherit` — the cart should read as the same document,
 * not as an embedded widget in someone else's font.
 *
 * The one place with real visual weight is the delivery picker in the checkout,
 * because choosing a courier office is the genuinely unfamiliar step and it
 * deserves the clarity.
 */

.np-add,
.np-cart,
.np-checkout {
	--np-ink: var(--np-color-ink, #1b2733);
	--np-muted: var(--np-color-muted, #6a7885);
	--np-line: var(--np-color-line, #dfe5ea);
	--np-accent: var(--np-color-accent, #1f6bb5);
	--np-accent-ink: var(--np-color-accent-ink, #ffffff);
	--np-ok: var(--np-color-ok, #1a7f4b);
	--np-error: var(--np-color-error, #b32d2e);
	--np-surface: var(--np-color-surface, #f6f8fa);
	--np-radius: var(--np-radius-base, 6px);

	color: var(--np-ink);
	font: inherit;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.np-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--np-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.np-btn:disabled {
	opacity: .6;
	cursor: default;
}

.np-btn--primary {
	background: var(--np-accent);
	color: var(--np-accent-ink);
}

.np-btn--primary:hover:not(:disabled) {
	filter: brightness(.94);
}

.np-btn--ghost {
	background: transparent;
	border-color: var(--np-line);
	color: var(--np-ink);
}

.np-btn--wide {
	width: 100%;
	margin-top: 1.25rem;
}

.np-btn:focus-visible,
.np-qty__input:focus-visible,
.np-link:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Add to cart                                                         */
/* ------------------------------------------------------------------ */

.np-add {
	margin: 1.5rem 0;
}

.np-add__row {
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	flex-wrap: wrap;
}

.np-qty {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.np-qty__label {
	font-size: .8125rem;
	color: var(--np-muted);
}

/* One bordered pill holding − input +, so the three read as a single control
   rather than three loose widgets. Unscoped: the cart page reuses it, and the
   two should not drift apart. */
.np-qty__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	overflow: hidden;
	background: #fff;
	width: max-content;
}

/* Every declaration here is a theme override, not decoration.
   `.np-add .np-qty__input` (0,2,0) is deliberate: the theme styles inputs with
   compound selectors like `.wpbf-page input`, which out-specifies a single
   class and was stretching this field across half the row. */
.np-add .np-qty__input {
	width: 3.25rem;
	min-width: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: .6em .25em;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-align: center;
	line-height: 1.2;
}

/* The native spinner is hidden on purpose — the − / + buttons replace it, and
   leaving both would put two competing controls on one field. */
.np-add .np-qty__input {
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.np-add .np-qty__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--np-surface);
	color: var(--np-ink);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	/* 2.5rem square: a thumb target, unlike the native arrows. */
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease;
}

.np-add .np-qty__step:hover {
	background: var(--np-line);
}

.np-add .np-qty__step:disabled {
	opacity: .45;
	cursor: default;
}

.np-add .np-qty__step:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: -2px;
}

.np-add__msg {
	margin: .6rem 0 0;
	min-height: 1.2em;
	font-size: .9375rem;
}

.np-add__msg.is-ok { color: var(--np-ok); }
.np-add__msg.is-error { color: var(--np-error); }

/* Out of stock is not a failure the customer caused, so it doesn't get the
   error red. Neutral note, same weight as any other piece of product info. */
.np-add__msg.is-note {
	color: var(--np-muted);
}

.np-unavailable {
	margin: 1.5rem 0;
	padding: .8rem 1rem;
	background: var(--np-surface);
	border-radius: var(--np-radius);
	color: var(--np-muted);
	font-size: .9375rem;
}

.np-link {
	color: var(--np-accent);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Cart lines                                                          */
/* ------------------------------------------------------------------ */

.np-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--np-line);
}

.np-line {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .25rem 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--np-line);
}

/* Placement is spelled out rather than left to auto-flow: the line has five
   children across three rows and two columns, and auto-placement puts the
   remove button wherever the row total isn't. */
.np-line__name {
	grid-column: 1;
	grid-row: 1;
	font-weight: 600;
}

.np-line__meta {
	grid-column: 1;
	grid-row: 2;
	color: var(--np-muted);
	font-size: .9375rem;
}

/* Quantity sits under the name in column 1; the money stays on one
   right-aligned axis down the page in column 2. */
.np-qty__control--line {
	grid-column: 1;
	grid-row: 3;
	justify-self: start;
	margin-top: .5rem;
}

.np-qty__control--line .np-qty__step {
	width: 2.25rem;
	min-width: 2.25rem;
	border: 0;
	background: var(--np-surface);
	color: var(--np-ink);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.np-qty__control--line .np-qty__step:hover {
	background: var(--np-line);
}

.np-qty__control--line .np-qty__step:disabled {
	opacity: .45;
	cursor: default;
}

.np-line__qtyvalue {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: .45em .25em;
	font-variant-numeric: tabular-nums;
}

.np-line__sum {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Understated on purpose. Remove is destructive and shouldn't compete with
   the checkout button for attention, but it must not be a mystery icon
   either — hence a word, in the muted colour, underlined on hover. */
.np-line__remove {
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	align-self: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--np-muted);
	font: inherit;
	font-size: .875rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.np-line__remove:hover {
	color: var(--np-error);
	text-decoration: underline;
}

.np-line__remove:focus-visible,
.np-qty__control--line .np-qty__step:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 2px;
}

/* In flight. The whole cart dims, not just the control that was clicked: a
   quantity change moves the totals and the checkout button too. */
.np-cart.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Totals                                                              */
/* ------------------------------------------------------------------ */

.np-totals {
	margin-top: 1.25rem;
	padding: 1rem 1.15rem;
	background: var(--np-surface);
	border-radius: var(--np-radius);
}

.np-totals__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem 0;
	font-variant-numeric: tabular-nums;
}

.np-totals__row.is-grand {
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--np-line);
	font-weight: 700;
	font-size: 1.0625rem;
}

/* ------------------------------------------------------------------ */
/* Empty / error states                                                */
/* ------------------------------------------------------------------ */

.np-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--np-muted);
}

.np-empty p {
	margin: 0 0 1.25rem;
}

.np-error {
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--np-error);
	background: var(--np-surface);
	color: var(--np-error);
}

.np-cart__loading {
	padding: 2rem 0;
	color: var(--np-muted);
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.np-add__row {
		align-items: stretch;
	}
	.np-add__row .np-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-btn {
		transition: none;
	}
}

/* ==================================================================== */
/* Checkout                                                             */
/* ==================================================================== */

.np-sec {
	margin: 0 0 2rem;
	padding: 0 0 1.75rem;
	border-bottom: 1px solid var(--np-line);
}

.np-sec:last-of-type {
	border-bottom: 0;
}

/* A locked section is visible but not yet actionable. Dimming it (rather
   than hiding it) keeps the shape of the whole flow in view, so nobody
   wonders how many steps are left. */
.np-sec.is-locked {
	opacity: .45;
	pointer-events: none;
}

.np-sec__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.np-grid {
	display: grid;
	gap: .9rem;
}

@media (min-width: 560px) {
	.np-grid--2 { grid-template-columns: 1fr 1fr; }
	.np-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.np-field {
	display: block;
	margin-bottom: .9rem;
}

.np-field__label {
	display: block;
	margin-bottom: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--np-muted);
}

.np-field__hint {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	color: var(--np-muted);
}

.np-input {
	width: 100%;
	padding: .65em .8em;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	font: inherit;
	background: #fff;
}

.np-input:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 1px;
	border-color: var(--np-accent);
}

/* --- selectable rows (delivery method, office, shipping, payment) ---- */

.np-method,
.np-office,
.np-ship,
.np-pay,
.np-check-row {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .75rem .9rem;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	margin-bottom: .5rem;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.np-method:hover,
.np-office:hover,
.np-ship:hover,
.np-pay:hover {
	border-color: var(--np-accent);
}

/* Payment instructions from Remedium, shown under the method they belong to.
 *
 * `pre-line` because the text arrives raw with real newlines in it and is
 * inserted as text, not HTML — collapsing those would run their paragraphs
 * together. Pulled up under the option it belongs to, and indented, so it
 * reads as part of that choice rather than as a new one. */
.np-pay__note {
	margin: -.25rem 0 .75rem;
	padding: 0 .9rem 0 2.6rem;
	color: var(--np-muted);
	font-size: .875rem;
	line-height: 1.5;
	white-space: pre-line;
}

.np-method:has(.np-radio:checked),
.np-office:has(.np-radio:checked),
.np-ship:has(.np-radio:checked),
.np-pay:has(.np-radio:checked) {
	border-color: var(--np-accent);
	background: color-mix(in srgb, var(--np-accent) 6%, transparent);
}

.np-radio,
.np-check {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--np-accent);
}

.np-ship__name,
.np-office__name { flex: 1 1 auto; }

.np-ship__price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* --- autocomplete ---------------------------------------------------- */

.np-ac { position: relative; }

.np-ac__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 16rem;
	overflow-y: auto;
	margin: 0;
	padding: .25rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	box-shadow: 0 6px 24px rgba(20, 35, 50, .12);
}

.np-ac__item {
	padding: .5rem .6rem;
	border-radius: 4px;
	cursor: pointer;
}

.np-ac__item:hover,
.np-ac__item:focus {
	background: var(--np-surface);
	outline: none;
}

/* --- office picker --------------------------------------------------- */
/* The one step that earns extra weight: a list of near-identical Cyrillic
   addresses is where people abandon a pharmacy checkout. */

.np-offices__filter { margin-bottom: .6rem; }

.np-offices__status {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	color: var(--np-muted);
}

.np-offices__list {
	max-height: 20rem;
	overflow-y: auto;
	padding-right: .25rem;
}

.np-office { margin-bottom: .35rem; }

/* --- misc ------------------------------------------------------------ */

.np-invoice { margin-top: .9rem; }

.np-muted {
	color: var(--np-muted);
	font-size: .9375rem;
}

.np-done {
	padding: 2.5rem 1rem;
	text-align: center;
}

.np-done h2 { margin: 0 0 .6rem; }

.np-totalsbox { margin-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.np-method, .np-office, .np-ship, .np-pay { transition: none; }
}

/* ==================================================================== */
/* Theme integration                                                    */
/* ==================================================================== */

/* Placement A: the add-to-cart has replaced the hero CTA. It stands alone
   as the page's single buy action, so it needs no container decoration —
   just the button's own weight and room to breathe. */
.np-autobuy--hero {
	position: relative;
	/* Above its own siblings inside the slider layer. */
	z-index: 2;
	margin: 1.5rem 0 0;
}

/* Applied by np.js to the Revolution Slider layer the control ends up inside.
 *
 * Slider layers are absolutely positioned boxes whose hit area is their
 * bounding box, not their visible content — so a neighbouring layer with a
 * higher z-index (the product shot, the bullet list) sits invisibly on top of
 * ours and swallows the clicks. That's why only the part of the button
 * sticking out past that box responded, and why it varied per product: each
 * slide lays its layers out differently.
 *
 * !important is load-bearing here, not laziness: the slider writes its own
 * inline z-index on every layout pass, and an inline style beats a plain class.
 */
.np-hero-layer {
	z-index: 60 !important;
	pointer-events: auto !important;
}

.np-hero-layer * {
	pointer-events: auto;
}

.np-autobuy--hero .np-add {
	margin: 0;
}

.np-autobuy--hero .np-btn--primary {
	padding: .95em 2em;
	font-size: 1.0625rem;
	border-radius: 999px;
}

/* Placement B: sitting above the partner-pharmacy list. Here it does need a
   surface, so "buy from us" reads as distinct from "or buy from these". */
.np-autobuy--inline {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem 1.25rem;
	background: var(--np-color-surface, #f6f8fa);
	border-radius: var(--np-radius-base, 6px);
	border-bottom: 1px solid var(--np-color-line, #dfe5ea);
}

.np-autobuy--inline .np-add {
	margin: 0;
}

/* --- header cart link ------------------------------------------------ */

/* `a.` rather than a bare class: the theme colours links with compound
   selectors like `.wpbf-page a`, which would otherwise out-specify us and
   paint the icon in the brand orange only on pages the theme happens to
   reach. Matching specificity keeps the header cart identical everywhere. */
a.np-cartlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	/* Fixed box so the link sits on the same optical line as the theme's own
	   header icons instead of being baseline-aligned against text. */
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	flex: 0 0 auto;
}

/* Zero-size marker np.js leaves in the desktop nav slot, so it can tell
   whether that slot is on screen after moving the link out of it. Must stay
   visible-but-empty: display:none would make the test always read "hidden". */
.np-cartlink-anchor {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Themes frequently set a `display` value on span, which overrides the plain
   `hidden` attribute — leaving an empty coloured dot next to the icon until
   the first item is added. Force it off. */
.np-cartlink__count[hidden] {
	display: none !important;
}

/* Mobile: the desktop nav this link lives in is hidden below the breakpoint,
   so np.js relocates it into the mobile header. If it finds no home there,
   this floating fallback keeps the cart reachable rather than invisible. */
a.np-cartlink--float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 999;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(20, 35, 50, .22);
}

a.np-cartlink--mobile {
	margin-right: .25rem;
}

.np-cartlink__icon {
	display: block;
}

.np-cartlink__count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .28rem;
	border-radius: 999px;
	background: var(--np-color-accent, #1f6bb5);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

a.np-cartlink:focus-visible {
	outline: 2px solid var(--np-color-accent, #1f6bb5);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- checkout: inline field error ------------------------------------ */

.np-field__error {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	color: var(--np-color-error, #b32d2e);
}

.np-input.is-invalid {
	border-color: var(--np-color-error, #b32d2e);
}

.np-input.is-invalid:focus-visible {
	outline-color: var(--np-color-error, #b32d2e);
}

/* --- checkout: order confirmation ------------------------------------ */

.np-done {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.np-done__check {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--np-color-ok, #1a7f4b);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
}

.np-done h2 {
	margin: 0 0 .75rem;
}

.np-done__num {
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0 0 1rem;
}

.np-done p {
	color: var(--np-muted);
	margin: 0 0 1.5rem;
}

/* --- checkout: order attributes (Remedium's extra questions) ---------- */

.np-attrs:empty { display: none; }

.np-attr {
	margin: 1rem 0 1.25rem;
}

.np-attr__label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--np-muted);
}

.np-attr__opt {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .7rem .9rem;
	margin-bottom: .4rem;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
	cursor: pointer;
	line-height: 1.4;
}

.np-attr__opt:hover { border-color: var(--np-accent); }

.np-attr__opt:has(input:checked) {
	border-color: var(--np-accent);
	background: color-mix(in srgb, var(--np-accent) 6%, transparent);
}

/* Informational notice from Remedium (courier delays etc). Distinct from a
   question — it needs attention but isn't an error, so it reads as a note. */
.np-notice {
	margin: 1rem 0;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--np-accent);
	background: var(--np-surface);
	border-radius: 0 var(--np-radius) var(--np-radius) 0;
	font-size: .9375rem;
}

.np-notice strong { display: block; margin-bottom: .3rem; }
.np-notice p { margin: .25rem 0; }

/* --- payment failed --------------------------------------------------- */

.np-done--fail .np-done__cross {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--np-color-error, #b32d2e);
	color: #fff;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
}

/* A required question left unanswered, flagged after a submit attempt.
   Reads as "needs attention" rather than "error" — the customer hasn't done
   anything wrong yet, they just haven't finished. */
.np-attr--missing {
	padding: .75rem .9rem;
	border-left: 3px solid var(--np-color-error, #b32d2e);
	background: color-mix(in srgb, var(--np-color-error, #b32d2e) 4%, transparent);
	border-radius: 0 var(--np-radius-base, 6px) var(--np-radius-base, 6px) 0;
}


/* ==================================================================== */
/* Suggested products (cart)                                            */
/* ==================================================================== */

/* Two columns, but only once there is something to put in the second one —
   `has-aside` is added by the script after suggestions come back. Laying the
   grid out unconditionally would leave a permanent empty gutter on the many
   carts that have nothing to suggest. */
.np-cart.has-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 2.5rem;
	align-items: start;
}

/* Beside the cart: no separator, the column edge already does that job. */
.np-cart.has-aside .np-suggest {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Stacked — either because there is no aside column, or below the breakpoint
   where the grid collapses — it needs the rule back, or it runs straight into
   the checkout button. */
.np-suggest {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--np-line);
}

/* One column below 900px: 260px of tiles beside a cart line leaves neither
   enough room. */
@media (max-width: 900px) {
	.np-cart.has-aside {
		display: block;
	}

	.np-cart.has-aside .np-suggest {
		margin-top: 2.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--np-line);
	}
}

/* The theme's h2 is a condensed display face, which looked like a different
   block bolted on. Matching the body font keeps it part of the cart. */
.np-suggest .np-suggest__title {
	margin: 0 0 1rem;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* auto-FILL, not auto-fit.
   auto-fit collapses the empty tracks and lets a single tile stretch the full
   width of the cart, which is what made one suggestion look like a mistake.
   auto-fill keeps the empty columns, so one tile stays tile-sized and two sit
   side by side rather than each taking half the page. */
.np-suggest__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
	gap: 1rem;
}

/* In the side column the width is already constrained, so tiles stack and fill
   it rather than being pinned to 240px inside a 260px column. */
.np-cart.has-aside .np-suggest__grid {
	grid-template-columns: 1fr;
}

.np-suggest__tile {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius);
}

/* Below the breakpoint the fixed max width leaves an awkward gutter, so tiles
   go full width and stack — one product per row, thumb-sized targets. */
@media (max-width: 600px) {
	.np-suggest__grid {
		grid-template-columns: 1fr;
	}

	.np-suggest__tile {
		flex-direction: row;
		align-items: flex-start;
		gap: .9rem;
	}

	/* Image beside the text rather than above it: stacked, three suggestions
	   would push the whole block off the screen. */
	.np-suggest__tile .np-suggest__link {
		flex: 0 0 84px;
	}

	.np-suggest__img {
		height: 84px;
	}

	.np-suggest__body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

a.np-suggest__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.np-suggest__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 auto;
}

a.np-suggest__name {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
}

a.np-suggest__name:hover {
	text-decoration: underline;
}

.np-suggest__img {
	width: 100%;
	/* Was 130px, which left a portrait packshot floating in a large grey box.
	   Sized to the tile instead, with padding doing the breathing room. */
	height: 150px;
	padding: .5rem;
	/* contain, not cover: these are packshots, and cropping a medicine box
	   loses the strength and pack size a customer is checking for. */
	object-fit: contain;
	background: var(--np-surface);
	border-radius: var(--np-radius);
}


.np-suggest__price {
	font-variant-numeric: tabular-nums;
}

/* The tile carries the whole add-to-cart control, so it inherits the
   out-of-stock and error handling. It just needs to stop looking like the
   product page's hero version. */
.np-add--compact {
	margin-top: auto;
}

.np-add--compact .np-add__row {
	gap: 0;
}

.np-add--compact .np-btn {
	width: 100%;
	padding: .6em 1em;
	font-size: .9375rem;
}

.np-add--compact .np-add__msg {
	margin: .5rem 0 0;
	font-size: .8125rem;
}

/* The message element is always in the DOM so it can hold a status later, but
   while empty it was still claiming its margin and line box — which is the
   dead space under the button. Collapsed until it actually says something.
   Not `visibility: hidden`: that reserves the space, which is the problem. */
.np-add--compact .np-add__msg:empty {
	display: none;
}


/* Retry status on the failed-payment screen. Sits between the explanation and
   the buttons, so it reads as feedback on the click rather than a new claim
   about the order. */
.np-done__status {
	margin: .75rem 0 0;
	min-height: 1.2em;
	font-size: .9375rem;
	color: var(--np-muted);
}

.np-done__status.np-error {
	color: var(--np-error);
}

.np-done--fail .np-btn {
	margin: .5rem .35rem 0;
}