/**
 * Action Shop — front-end styles.
 *
 * THEMING
 * -------
 * Every colour resolves in two steps:
 *
 *     var( --e-global-color-accent, #394A98 )
 *          |                          |
 *          |                          fallback: the brand value, for when the
 *          |                          plugin runs outside this Elementor site
 *          Elementor Global Colour — the live value the site actually uses
 *
 * So the shop matches stopalzheimer.be out of the box *and* follows a rebrand
 * automatically. The kit names its globals unconventionally — `text` is the
 * brand yellow, `accent` is the indigo — so the mapping is stated once here
 * and never guessed at further down.
 *
 * Typography is inherited, never declared: the kit already sets Poppins on the
 * page and Inter on buttons, and `.elementor-kit-N button` outranks
 * `.ashop-button`, so the site wins on its own turf.
 */

.ashop {
	/* Brand ------------------------------------------------------------- */
	--ashop-ink: var( --e-global-color-primary, #000000 );
	--ashop-paper: var( --e-global-color-secondary, #ffffff );
	--ashop-brand: var( --e-global-color-accent, #394a98 );
	--ashop-highlight: var( --e-global-color-text, #ffdc00 );

	/* Call to action — the site's signature yellow pill turning indigo. */
	--ashop-cta-bg: var( --ashop-highlight );
	--ashop-cta-text: var( --ashop-ink );
	--ashop-cta-bg-hover: var( --ashop-brand );
	--ashop-cta-text-hover: var( --ashop-paper );

	/* Neutrals ---------------------------------------------------------- */
	--ashop-border: #dcdce1;
	--ashop-border-strong: #b4b4bd;
	--ashop-bg-subtle: #f7f7f8;
	--ashop-muted: #5c5c66;

	/* Semantic — deliberately not brand colours. A red error has to read as
	   an error even on a site whose brand colour is red. */
	--ashop-error: #b32d2e;
	--ashop-error-bg: #fdf3f3;
	--ashop-success: #146c2e;
	--ashop-success-bg: #f2fbf4;
	--ashop-warning: #8a5300;

	/* Shape */
	--ashop-radius: 10px;
	--ashop-radius-lg: 16px;
	--ashop-radius-pill: 100px;
	--ashop-gap: 1rem;

	line-height: 1.55;

	/* Lets the layout below respond to the width of this block rather than
	   the width of the window. See the note on .ashop-layout. */
	container: ashop / inline-size;
}

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

/* ================================================================ Layout */

/*
 * The image leads. On a charity shop the photograph is the pitch, so it takes
 * the larger column and the panel beside it stays narrow enough to read as a
 * single column of decisions rather than a form.
 */
.ashop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: start;
}

/*
 * Two columns based on the space this block actually has, not on the size of
 * the window.
 *
 * A viewport query gets this wrong in exactly the case that matters: a theme
 * with a narrow content column on a wide monitor would split a 645px slot into
 * two cramped halves because the *screen* is 1200px. The shortcode has no idea
 * what container it will be dropped into, so it has to measure itself.
 *
 * Browsers without container queries keep the single-column layout above,
 * which is the safe direction to fail in.
 */
@container ashop ( min-width: 820px ) {
	.ashop-layout {
		grid-template-columns: minmax( 0, 7fr ) minmax( 320px, 5fr );
	}
}

.ashop--no-image .ashop-layout {
	grid-template-columns: minmax( 0, 1fr );
	max-width: 34rem;
}

.ashop-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --ashop-radius-lg );
}

.ashop-title {
	margin: 0 0 0.15em;
	line-height: 1.15;
}

/*
 * The unit price is information, not the commitment — the total in the buy box
 * is the number that matters. But muting it to grey pushed it too far: on
 * mobile it read as metadata rather than as the price, which is the second
 * thing anyone looks for after the photo.
 */
.ashop-unit {
	margin: 0 0 1rem;
	font-size: 1.25em;
	font-weight: 700;
	color: var( --ashop-ink );
}

.ashop-desc {
	margin-bottom: 1.5rem;
	color: var( --ashop-muted );
}

.ashop-desc > :last-child {
	margin-bottom: 0;
}

/* =============================================================== Buy box */

/*
 * Options, running total and the button in one bordered block. This is the
 * whole point of the redesign: the three things a buying decision needs sit
 * together, above the fold, instead of being separated by a delivery form.
 */
.ashop-buybox {
	padding: clamp( 1.1rem, 3vw, 1.5rem );
	border: 1px solid var( --ashop-border );
	border-radius: var( --ashop-radius-lg );
	background: var( --ashop-paper );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 8px 24px -16px rgba( 0, 0, 0, 0.25 );
}

.ashop-choice {
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
}

.ashop-choice__label {
	display: block;
	padding: 0;
	margin-bottom: 0.5rem;
	font-size: 0.8125em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ashop-muted );
}

/* Echoes the chosen value beside the axis name, so the selection stays
   readable once the eye has moved down the page. */
.ashop-choice__value {
	margin-left: 0.4em;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var( --ashop-ink );
}

/* --------------------------------------------------------------- Pills */

.ashop-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The radio itself is removed from view but stays focusable, so the visible
   pill can be styled while keyboard and screen-reader behaviour is the plain
   native radio group the markup describes. */
.ashop-pill__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.ashop-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Comfortable target; this audience is not all young. */
	padding: 0.5rem 1.1rem;
	border: 1.5px solid var( --ashop-border-strong );
	border-radius: var( --ashop-radius-pill );
	background: var( --ashop-paper );
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.ashop-pill:hover {
	border-color: var( --ashop-brand );
}

.ashop-pill__input:checked + .ashop-pill {
	border-color: var( --ashop-brand );
	background: var( --ashop-brand );
	color: var( --ashop-paper );
}

.ashop-pill__input:focus-visible + .ashop-pill {
	outline: 2px solid var( --ashop-brand );
	outline-offset: 2px;
}

/*
 * Unavailable combinations are struck through rather than hidden. Removing an
 * option makes the customer wonder whether they misread the page; showing it
 * crossed out answers "do you have my size" without a click.
 */
/*
 * 4.71:1 rather than the usual muted grey. Disabled controls are exempt from
 * WCAG 1.4.3, but this one answers "do you have my size?" — if the customer
 * cannot read which options are struck through, the feature does nothing.
 */
.ashop-pill__input:disabled + .ashop-pill {
	border-color: var( --ashop-border );
	color: #6e6e78;
	background: var( --ashop-bg-subtle );
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ashop-select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid var( --ashop-border-strong );
	border-radius: var( --ashop-radius );
	background: var( --ashop-paper );
	color: inherit;
	font: inherit;
	font-size: max( 1rem, 1em );
}

.ashop-select:focus-visible {
	outline: 2px solid var( --ashop-brand );
	outline-offset: 1px;
}

/* ------------------------------------------------------------ Quantity */

.ashop-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var( --ashop-border-strong );
	border-radius: var( --ashop-radius-pill );
	overflow: hidden;
	background: var( --ashop-paper );
}

.ashop-qty__step {
	width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.ashop-qty__step:hover:not( [disabled] ) {
	background: var( --ashop-bg-subtle );
	color: var( --ashop-brand );
}

.ashop-qty__step[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.ashop-qty__input {
	width: 3.5rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: max( 1rem, 1em );
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

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

.ashop-qty__input:focus-visible {
	outline: 2px solid var( --ashop-brand );
	outline-offset: -2px;
}

/* -------------------------------------------------------- Availability */

.ashop-availability {
	margin: 0 0 0.9rem;
	font-size: 0.875em;
	font-weight: 600;
	color: var( --ashop-muted );
}

.ashop-availability:empty {
	display: none; /* Don't reserve a gap for a line that is usually absent. */
}

.ashop-availability--low {
	color: var( --ashop-warning );
}

.ashop-availability--out {
	color: var( --ashop-error );
}

.ashop-availability--ok {
	color: var( --ashop-success );
}

/* --------------------------------------------------------- Order lines */

.ashop-lines {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --ashop-border );
}

.ashop-lines[hidden] {
	display: none;
}

.ashop-lines__title {
	margin: 0 0 0.6rem;
	font-size: 0.8125em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ashop-muted );
}

.ashop-lines__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ashop-line {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var( --ashop-border );
	font-size: 0.9375em;
}

.ashop-line:last-child {
	border-bottom: 0;
}

.ashop-line__label {
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ashop-line__qty {
	color: var( --ashop-muted );
	font-variant-numeric: tabular-nums;
}

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

/* 44px: this sits between two lines of text and gets tapped with a thumb. */
.ashop-line__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --ashop-muted );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.ashop-line__remove:hover {
	background: var( --ashop-error-bg );
	color: var( --ashop-error );
}

.ashop-line__remove:focus-visible {
	outline: 2px solid var( --ashop-brand );
	outline-offset: 1px;
}

/* The secondary action: present, but never competing with the pay button. */
.ashop-button--add {
	background: transparent;
	border-color: var( --ashop-brand );
	color: var( --ashop-brand );
	font-weight: 600;
}

.ashop-button--add:hover:not( [disabled] ),
.ashop-button--add:focus-visible {
	background: var( --ashop-brand );
	color: var( --ashop-paper );
}

.ashop-button--add[disabled] {
	background: transparent;
	border-color: var( --ashop-border );
	color: #6b6b76;
}

.ashop-button--add[disabled]:hover {
	background: transparent;
	color: #6b6b76;
}

.ashop-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ------------------------------------------------------------- Summary */

.ashop-summary {
	margin: 0 0 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --ashop-border );
}

.ashop-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var( --ashop-gap );
	margin: 0 0 0.45rem;
	font-size: 0.9375em;
	color: var( --ashop-muted );
}

.ashop-summary__row:last-child {
	margin-bottom: 0;
}

.ashop-summary__row--grand {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --ashop-border );
	color: var( --ashop-ink );
	font-weight: 700;
}

/* The one number that matters. Everything else on the page is smaller. */
.ashop-grand {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

/* -------------------------------------------------------------- Impact */

/*
 * What the money does, at the moment of deciding. On a charity shop this is
 * the reason the price is acceptable, so it sits with the button rather than
 * in the description far above it.
 */
.ashop-impact {
	display: flex;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0.75rem 0.9rem;
	border-left: 4px solid var( --ashop-highlight );
	border-radius: 0 var( --ashop-radius ) var( --ashop-radius ) 0;
	background: var( --ashop-bg-subtle );
	font-size: 0.9375em;
	color: var( --ashop-ink );
}

.ashop-impact::before {
	content: "\2665";
	color: var( --ashop-brand );
	flex: 0 0 auto;
}

/* ======================================================= Delivery step */

.ashop-details {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --ashop-border );
}

/* Collapsed by the script once it loads. Without JavaScript the section is
   simply visible and the page works as one longer form. */
.ashop-details[hidden] {
	display: none;
}

.ashop-details__title {
	margin: 0 0 1.1rem;
	font-size: 1.05em;
}

/* --------------------------------------------------------- Address grid */

/*
 * Explicit proportions, not `auto-fit`. A postcode field the same width as a
 * street field looks broken, and letting the browser decide the column count
 * means the layout changes shape for reasons nobody chose.
 */
.ashop-address {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
}

@media ( min-width: 560px ) {
	.ashop-address {
		grid-template-columns: repeat( 6, 1fr );
	}

	.ashop-field--first-name,
	.ashop-field--last-name {
		grid-column: span 3;
	}

	.ashop-field--email {
		grid-column: span 4;
	}

	.ashop-field--phone {
		grid-column: span 2;
	}

	.ashop-field--address {
		grid-column: 1 / -1;
	}

	.ashop-field--postcode {
		grid-column: span 2;
	}

	.ashop-field--city {
		grid-column: span 4;
	}

	.ashop-field--country,
	.ashop-field--note {
		grid-column: 1 / -1;
	}
}

.ashop-field {
	margin: 0;
	min-width: 0;
}

.ashop-label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8125em;
	font-weight: 600;
	color: var( --ashop-muted );
}

.ashop-required {
	color: var( --ashop-error );
}

.ashop-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.8rem;
	border: 1px solid var( --ashop-border-strong );
	border-radius: var( --ashop-radius );
	background: var( --ashop-paper );
	color: inherit;
	font: inherit;
	/* Never below 16px, or iOS zooms the page on focus — but honour a larger
	   inherited size (this site runs 17px) rather than shrinking to match. */
	font-size: max( 1rem, 1em );
}

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

.ashop-input:user-invalid {
	border-color: var( --ashop-error );
}

textarea.ashop-input {
	min-height: 0;
	resize: vertical;
}

/* ------------------------------------------------------------ Donation */

.ashop-donation {
	margin-top: 1.25rem;
	padding: 1rem;
	border: 1px dashed var( --ashop-border-strong );
	border-radius: var( --ashop-radius );
	background: var( --ashop-bg-subtle );
}

.ashop-input-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ashop-input-prefix {
	font-weight: 700;
	color: var( --ashop-muted );
}

.ashop-input--amount {
	max-width: 8rem;
}

/* --------------------------------------------------------------- Terms */

.ashop-terms {
	margin: 1.25rem 0 0;
}

.ashop-checkbox {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.9375em;
	cursor: pointer;
}

/*
 * Sized in rem, not em.
 *
 * A checkbox's `em` resolves against the control's *own* font-size, which
 * browsers default to about 13px regardless of the page — so `1.15em` rendered
 * a 15px box, well under the 24px WCAG 2.5.8 asks for. This is the one control
 * the customer is legally required to tick, on a page aimed partly at older
 * donors, so it gets a real target.
 */
.ashop-checkbox input {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.05rem;
	flex: 0 0 auto;
	accent-color: var( --ashop-brand );
}

.ashop-checkbox a {
	color: var( --ashop-brand );
}

/* Honeypot: out of sight for people, still in the DOM for bots. */
.ashop-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ Pay block */

.ashop-pay {
	margin-top: 1.5rem;
	padding: 1.1rem;
	border: 1px solid var( --ashop-border );
	border-radius: var( --ashop-radius-lg );
	background: var( --ashop-bg-subtle );
}

.ashop-pay__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var( --ashop-gap );
	margin: 0 0 0.9rem;
	font-weight: 700;
}

/* ================================================================ Button */

.ashop-button {
	display: inline-block;
	max-width: 100%;
	padding: 0.9rem 2rem;
	border: 2px solid transparent;
	border-radius: var( --ashop-radius-pill );
	background: var( --ashop-cta-bg );
	color: var( --ashop-cta-text );
	/*
	 * Inherited on purpose: the Elementor kit already styles bare <button>
	 * elements with the site's button face, and `.elementor-kit-N button`
	 * outranks `.ashop-button`, so the site wins on its own turf.
	 */
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Full width, but only inside the buy box and the pay block where the button
 * is the single next action. A 100px radius stretched across a wide page reads
 * as a mistake rather than a brand cue, so it never leaves those containers.
 */
.ashop-buybox .ashop-button,
.ashop-pay .ashop-button {
	display: block;
	width: 100%;
}

.ashop-button:hover,
.ashop-button:focus-visible {
	background: var( --ashop-cta-bg-hover );
	color: var( --ashop-cta-text-hover );
	text-decoration: none;
}

.ashop-button:focus-visible {
	outline: 2px solid var( --ashop-brand );
	outline-offset: 2px;
}

/*
 * Disabled is a flat grey rather than a faded yellow. Reducing the opacity of
 * a bright brand colour produces a washed-out swatch that still looks
 * clickable and drops well below any sensible contrast ratio.
 *
 * The pairing below is 6.09:1. Disabled controls are exempt from WCAG 1.4.3,
 * but this button is carrying a message — "choose your options", "sold out" —
 * so the label has to stay readable rather than merely look switched off.
 */
.ashop-button--disabled,
.ashop-button[disabled] {
	background: #e4e4e7;
	color: #52525b;
	cursor: not-allowed;
}

.ashop-button--disabled:hover,
.ashop-button[disabled]:hover {
	background: #e4e4e7;
	color: #52525b;
}

.ashop-button--busy {
	cursor: progress;
}

.ashop-button--secondary {
	width: auto;
	background: transparent;
	border-color: currentColor;
	color: var( --ashop-brand );
}

.ashop-button--secondary:hover,
.ashop-button--secondary:focus-visible {
	background: var( --ashop-brand );
	color: var( --ashop-paper );
}

.ashop-reassure {
	margin: 0.75rem 0 0;
	font-size: 0.8125em;
	color: var( --ashop-muted );
	text-align: center;
}

/* =============================================================== Notices */

.ashop-notice {
	margin: 0 0 var( --ashop-gap );
	padding: 0.9rem 1rem;
	border: 1px solid var( --ashop-border );
	border-left: 4px solid var( --ashop-brand );
	border-radius: var( --ashop-radius );
	background: var( --ashop-bg-subtle );
}

.ashop-notice > :last-child {
	margin-bottom: 0;
}

.ashop-notice--error {
	border-color: var( --ashop-error );
	background: var( --ashop-error-bg );
	color: var( --ashop-error );
}

/* ========================================================== Confirmation */

/*
 * A focused, single-purpose page: the card is narrow and centred in whatever
 * column it lands in. Centring is declared here rather than left to the theme
 * so the page looks the same wherever the shortcode is dropped.
 */
.ashop-confirmation {
	max-width: 34rem;
	margin-inline: auto;
}

/*
 * The same card as the buy box — border, radius and lift are shared on
 * purpose. The customer has just come back from an external payment page, and
 * landing on something that clearly belongs to the shop they left is most of
 * the reassurance this page has to provide.
 */
.ashop-result {
	padding: clamp( 1.25rem, 4vw, 1.75rem );
	border: 1px solid var( --ashop-border );
	border-top: 4px solid var( --ashop-brand );
	border-radius: var( --ashop-radius-lg );
	background: var( --ashop-paper );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 8px 24px -16px rgba( 0, 0, 0, 0.25 );
}

.ashop-result--paid {
	border-top-color: var( --ashop-success );
}

.ashop-result--pending {
	border-top-color: var( --ashop-warning );
}

.ashop-result--failed {
	border-top-color: var( --ashop-error );
}

.ashop-result__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 1rem;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
}

.ashop-result--paid .ashop-result__mark {
	background: var( --ashop-success-bg );
	color: var( --ashop-success );
}

.ashop-result--pending .ashop-result__mark {
	background: var( --ashop-bg-subtle );
	color: var( --ashop-warning );
}

.ashop-result--failed .ashop-result__mark {
	background: var( --ashop-error-bg );
	color: var( --ashop-error );
}

.ashop-result__title {
	margin: 0 0 0.4rem;
	font-size: 1.3em;
	line-height: 1.25;
}

.ashop-result__lead {
	margin: 0;
	color: var( --ashop-muted );
}

.ashop-result__actions {
	margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------- Receipt */

.ashop-receipt {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --ashop-border );
}

.ashop-receipt__number {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var( --ashop-gap );
	margin: 0 0 0.75rem;
}

.ashop-receipt__number strong {
	color: var( --ashop-ink );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The uppercase micro-label used throughout the buy box, as its own class so
   the receipt does not have to borrow an axis-specific selector. */
.ashop-microlabel {
	font-size: 0.8125em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ashop-muted );
}

/* A receipt line is the buy-box line without the remove button. */
.ashop-line--static {
	grid-template-columns: 1fr auto auto;
}

.ashop-summary__row--vat {
	margin-top: 0.35rem;
	font-size: 0.8125em;
}

.ashop-shipto {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var( --ashop-border );
}

.ashop-shipto__body {
	margin: 0.4rem 0 0;
	color: var( --ashop-muted );
	font-size: 0.9375em;
}

/* ================================================================ Motion */

@media ( prefers-reduced-motion: reduce ) {
	.ashop-button,
	.ashop-pill {
		transition: none;
	}

	.ashop * {
		scroll-behavior: auto !important;
	}
}

/*
 * No prefers-color-scheme block on purpose.
 *
 * stopalzheimer.be is a light-only site. A shop that flipped itself to a dark
 * palette on a visitor's dark-mode device would sit as a black rectangle in
 * the middle of a white page — worse than not supporting dark mode at all.
 * A dark site can retheme the whole block by redefining the custom properties
 * at the top of this file on .ashop.
 */