/**
 * Digi Quick Order.
 *
 * Everything below the button styles is scoped to `.dqo-modal`, so the page behind the popup is
 * never touched. The checkout itself is styled from scratch on purpose: themes only enqueue
 * their checkout stylesheet on the real checkout page — Woodmart gates its on `is_checkout()` —
 * so nothing here can assume the theme has laid the form out for us.
 *
 * Layout note: `address-i18n.js` re-sorts every billing row into a single wrapper and rewrites
 * their `form-row-first/last/wide` classes whenever the country changes. So the compact field
 * pairing below is keyed on field IDs, which outrank those classes and survive the reshuffle.
 */

:root {
	--dqo-button-bg: #e6492d;
	--dqo-button-color: #fff;

	--dqo-accent: var(--dqo-button-bg);
	--dqo-accent-contrast: var(--dqo-button-color);

	/* Plain fallbacks; the @supports block below swaps in tints derived from the accent. */
	--dqo-accent-soft: #f6f6f8;
	--dqo-accent-ring: rgba(20, 20, 30, 0.12);
	--dqo-accent-shadow: rgba(20, 20, 30, 0.28);
	--dqo-accent-tint: #f2f3f7;
	--dqo-accent-line: #dfe1ea;
	--dqo-accent-lift: var(--dqo-accent);
	--dqo-accent-deep: var(--dqo-accent);

	--dqo-surface: #fff;
	--dqo-surface-sunken: #f6f7f9;
	--dqo-border: #e7e8ee;
	--dqo-border-strong: #d5d7e0;
	--dqo-text: #14151a;
	--dqo-text-soft: #4a4d5a;
	--dqo-text-muted: #71748a;
	--dqo-danger: #d63638;

	--dqo-radius-lg: 18px;
	--dqo-radius-md: 12px;
	--dqo-radius-sm: 10px;

	--dqo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Overshoots slightly before settling. Used where something appears rather than moves, so it
	   reads as a physical object arriving instead of a box fading in. */
	--dqo-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Nearly all of the movement happens in the first third, then a long glide to a stop. The
	   curve to reach for when something should feel unhurried rather than snappy. */
	--dqo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--dqo-accent-soft: color-mix(in srgb, var(--dqo-accent) 6%, #fff);
		--dqo-accent-ring: color-mix(in srgb, var(--dqo-accent) 22%, transparent);
		--dqo-accent-shadow: color-mix(in srgb, var(--dqo-accent) 42%, transparent);

		/* Two steps either side of the accent, for surfaces that should carry a wash of colour
		   and for the lit edge of a gradient. Kept in the @supports block with the rest, so a
		   browser without color-mix simply gets the flat fallbacks above and nothing breaks. */
		--dqo-accent-tint: color-mix(in srgb, var(--dqo-accent) 12%, #fff);
		--dqo-accent-line: color-mix(in srgb, var(--dqo-accent) 28%, #fff);
		--dqo-accent-lift: color-mix(in srgb, var(--dqo-accent) 82%, #fff);
		--dqo-accent-deep: color-mix(in srgb, var(--dqo-accent) 88%, #000);
	}
}

/* -------------------------------------------------------------------------
 * Order Now button
 * ---------------------------------------------------------------------- */

/* Geometry is copied from the theme's own Add to Cart button at runtime — see `matchButton()`
   in dqo-popup.js. What is left here is the shape of the content and the states, which no
   theme needs to have an opinion about. */
.dqo-order-now {
	position: relative;
	overflow: hidden;
	/* Without this the padding sits outside the flex basis, so an even 1:1 split still comes
	   out lopsided by exactly the padding. */
	box-sizing: border-box;
	background-color: var(--dqo-button-bg);
	color: var(--dqo-button-color);
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s var(--dqo-ease), box-shadow 0.2s ease;
}

/* `filter` rather than a second colour, so hover keeps working whatever the admin picks. */
.dqo-order-now:hover,
.dqo-order-now:focus {
	filter: brightness(0.93);
	box-shadow: 0 6px 16px -8px currentColor;
}

.dqo-order-now:active {
	transform: translateY(1px);
}

.dqo-order-now[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

/* A light sweep across the button on hover. Purely decorative, and clipped by the button's own
   radius, which the script copies from the theme. */
.dqo-order-now::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 35%;
	height: 100%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
	opacity: 0;
}

.dqo-order-now:hover::before {
	animation: dqo-sweep 0.65s var(--dqo-ease);
}

.dqo-order-now__icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1.15em;
}

.dqo-order-now__label {
	display: inline-block;
	min-width: 0;
}

/* On a listing the button shares a narrow row with Add to Cart, so it has to be able to give
   ground rather than push its label out of the card. */
.dqo-order-now--standalone {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.dqo-order-now--standalone .dqo-order-now__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dqo-order-now.dqo-loading::after {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: dqo-spin 0.7s linear infinite;
}

/* -------------------------------------------------------------------------
 * Floating cart button
 * ---------------------------------------------------------------------- */

/* Doubled class: themes set `position: relative` on `button` with enough specificity to beat a
   single class, which left this pinned inside the page flow instead of the viewport. */
.dqo-cart-toggle.dqo-cart-toggle {
	position: fixed;
	/* Overridden at runtime when something else already occupies this corner. */
	bottom: var(--dqo-cart-bottom, 24px);
	z-index: 999990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	min-width: 56px;
	height: 56px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dqo-button-bg);
	color: var(--dqo-button-color);
	box-shadow: 0 6px 20px -6px rgba(16, 18, 32, 0.45), 0 2px 6px rgba(16, 18, 32, 0.12);
	cursor: pointer;

	/*
	 * `translate` and `scale` are used throughout this block instead of `transform`, so that the
	 * lift and the swell can be timed apart: the rise is quick and decelerating while the swell
	 * is slower and overshoots, which is what stops the hover reading as one rigid jump. A
	 * single `transform` property can only carry one duration and one curve for both.
	 *
	 * It also keeps this out of the way of themes that set `transform` on `button:hover` — the
	 * two no longer compete for the same property. Browsers old enough to lack support drop
	 * these declarations and lose the motion, not the layout.
	 */
	translate: 0 0;
	scale: 1;

	transition: translate 0.3s var(--dqo-ease-out), scale 0.42s var(--dqo-ease-back),
		box-shadow 0.3s var(--dqo-ease-out), opacity 0.22s var(--dqo-ease-out),
		visibility 0s linear 0s;
}

/*
 * Two rings expand out of the button when the cart gains an item, the second a beat behind the
 * first — one ring alone reads as a flat circle growing, two read as an impact.
 *
 * Both start at the button's own edge and only ever travel outwards, so they never wash over the
 * face. The negative z-index keeps them under the icon and the count.
 */
.dqo-cart-toggle.dqo-cart-toggle::before,
.dqo-cart-toggle.dqo-cart-toggle::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border: 2px solid var(--dqo-button-bg);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

/* The cart's first item. The `is-empty` transition below cannot cover this: the fragment replaces
   the element outright, so the new one is simply inserted in its finished state with nothing to
   transition from. */
/*
 * No fill mode on any of these: every keyframe set starts and ends on the button's resting
 * values, so a `forwards` fill would gain nothing and would go on overriding `:hover` for as
 * long as the class stayed on the element.
 */
.dqo-cart-toggle.is-entering {
	animation: dqo-cart-in 0.62s;
}

.dqo-cart-toggle.is-bumping {
	animation: dqo-cart-bump 0.72s;
}

/* Promoted only while something is actually running. Left on permanently it would hold a
   compositing layer for the life of the page to no purpose. */
.dqo-cart-toggle.is-entering,
.dqo-cart-toggle.is-bumping {
	will-change: transform, opacity;
}

.dqo-cart-toggle.is-bumping::before {
	animation: dqo-cart-ring 0.72s var(--dqo-ease-out);
}

.dqo-cart-toggle.is-bumping::after {
	animation: dqo-cart-ring-wide 0.82s var(--dqo-ease-out) 0.1s;
}

/* Swings on its own axis and settles, the way something hanging would. */
.dqo-cart-toggle.is-bumping .dqo-cart-toggle__icon {
	animation: dqo-cart-swing 0.72s;
}

.dqo-cart-toggle.is-bumping .dqo-cart-toggle__count {
	animation: dqo-badge-pop 0.56s;
}

/* Held back until the button itself has arrived, so the two do not land at once. `backwards`
   holds the badge at its 0% frame through the delay — without it, it would sit there at full
   size for 180ms and then restart from nothing. */
.dqo-cart-toggle.is-entering .dqo-cart-toggle__count {
	animation: dqo-badge-pop 0.5s 0.18s backwards;
}

.dqo-cart-toggle.dqo-cart-toggle--right {
	right: 24px;
}

.dqo-cart-toggle.dqo-cart-toggle--left {
	left: 24px;
}

.dqo-cart-toggle:hover {
	translate: 0 -3px;
	scale: 1.06;
	box-shadow: 0 14px 30px -10px rgba(16, 18, 32, 0.52), 0 3px 8px rgba(16, 18, 32, 0.16);
}

/* Presses in, and fast — a slow response to a tap feels broken rather than smooth. */
.dqo-cart-toggle:active {
	translate: 0 -1px;
	scale: 0.94;
	transition-duration: 0.09s;
}

.dqo-cart-toggle:focus-visible {
	outline: 2px solid var(--dqo-button-bg);
	outline-offset: 3px;
}

/* An empty cart has nothing to open, so the button stays out of the way until something is
   added. It is kept in the DOM because the cart fragment replaces it in place. */
.dqo-cart-toggle.is-empty {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	scale: 0.72;
	translate: 0 6px;

	/* `visibility` is held back until the fade has finished, otherwise the button vanishes on
	   the first frame and there is nothing left to animate out. */
	transition: translate 0.24s var(--dqo-ease), scale 0.24s var(--dqo-ease),
		opacity 0.22s var(--dqo-ease), visibility 0s linear 0.22s;
}

.dqo-cart-toggle__icon {
	flex: 0 0 auto;
	pointer-events: none;
	/* Stated rather than assumed: the swing has to pivot on the middle of the icon, and SVG
	   roots are not consistent about defaulting there. */
	transform-origin: 50% 50%;
}

.dqo-cart-toggle__count {
	position: absolute;
	top: -3px;
	inset-inline-end: -3px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--dqo-text);
	color: #fff;
	box-shadow: 0 0 0 2px var(--dqo-surface);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	pointer-events: none;
}

/* The modal covers the page; a button floating over its backdrop would just be noise. */
html.dqo-modal-open .dqo-cart-toggle {
	opacity: 0;
	visibility: hidden;
}

/* -------------------------------------------------------------------------
 * Cart step
 * ---------------------------------------------------------------------- */

.dqo-modal__step--cart {
	animation: dqo-rise 0.3s var(--dqo-ease);
}

.dqo-cart__empty {
	margin: 12px 0 8px;
	text-align: center;
	color: var(--dqo-text-muted);
}

.dqo-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dqo-cart__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 16px 30px 16px 0;
	border-bottom: 1px solid var(--dqo-border);
	list-style: none;
}

.dqo-cart__item:first-child {
	padding-top: 0;
}

.dqo-cart__thumb {
	flex: 0 0 62px;
	line-height: 0;
}

.dqo-cart__thumb img {
	width: 62px;
	height: auto;
	border: 1px solid var(--dqo-border);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
}

.dqo-cart__info {
	flex: 1 1 auto;
	min-width: 0;
}

.dqo-modal__content .dqo-cart__name {
	display: block;
	margin: 0 0 4px;
	color: var(--dqo-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.dqo-modal__content .dqo-cart__name:hover {
	text-decoration: underline;
}

.dqo-cart__meta {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--dqo-text-muted);
}

.dqo-cart__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	margin-top: 8px;
}

.dqo-cart__price {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--dqo-text);
	white-space: nowrap;
}

/* Themes colour prices with their link colour; in here they follow the panel's hierarchy. */
.dqo-modal__step--cart .woocommerce-Price-amount,
.dqo-modal__step--cart del,
.dqo-modal__step--cart ins {
	color: inherit;
	background: none;
	text-decoration: inherit;
}

/* --- Quantity stepper (cart step) -------------------------------------- */

.dqo-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--dqo-border-strong);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
	overflow: hidden;
}

.dqo-modal .dqo-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	min-width: 32px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--dqo-surface);
	box-shadow: none;
	color: var(--dqo-text-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dqo-modal .dqo-qty__btn:hover {
	background: var(--dqo-surface-sunken);
	color: var(--dqo-text);
}

.dqo-modal__content .dqo-qty__input {
	box-sizing: border-box;
	width: 42px;
	min-width: 42px;
	min-height: 38px;
	padding: 4px;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	-moz-appearance: textfield;
}

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

.dqo-modal__content .dqo-qty__input:focus {
	box-shadow: none;
	border-color: transparent;
}

/* --- Cart footer -------------------------------------------------------- */

.dqo-cart__footer {
	margin-top: 20px;
}

.dqo-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 16px 18px;
	border-radius: var(--dqo-radius-md);
	background: var(--dqo-surface-sunken);
	font-size: 14px;
	color: var(--dqo-text-muted);
}

.dqo-cart__subtotal strong {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--dqo-text);
}

.dqo-modal .dqo-cart__checkout {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-accent);
	color: var(--dqo-accent-contrast);
	box-shadow: none;
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s var(--dqo-ease), box-shadow 0.15s ease;
}

.dqo-modal .dqo-cart__checkout:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px var(--dqo-accent-shadow);
}

/* -------------------------------------------------------------------------
 * Modal shell
 * ---------------------------------------------------------------------- */

.dqo-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.dqo-modal--open {
	display: flex;
}

html.dqo-modal-open,
html.dqo-modal-open body {
	overflow: hidden;
}

.dqo-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 13, 20, 0.58);
	cursor: pointer;
	animation: dqo-overlay-in 0.25s ease;
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.dqo-modal__overlay {
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
}

.dqo-modal__dialog {
	position: relative;
	background: var(--dqo-surface);
	color: var(--dqo-text);
	width: 100%;
	max-width: 1120px;
	max-height: 88vh;
	border-radius: var(--dqo-radius-lg);
	box-shadow: 0 2px 8px rgba(16, 18, 32, 0.06), 0 32px 80px -16px rgba(16, 18, 32, 0.45);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: dqo-dialog-in 0.28s var(--dqo-ease);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* An indeterminate accent bar across the top of the dialog while anything is in flight, so a
   slow cart or totals refresh reads as progress rather than a frozen popup. */
.dqo-modal__dialog::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 6;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--dqo-accent) 40%,
		var(--dqo-accent) 60%,
		transparent 100%
	);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.dqo-modal--loading .dqo-modal__dialog::before {
	opacity: 1;
	animation: dqo-progress 1.1s ease-in-out infinite;
}

/* The narrow variant, used for choosing options and for errors — anything that is not the full
   checkout. `width: auto` lets it shrink to whatever the options actually need instead of
   fixing a width and hoping; the bounds keep a two-option product from looking like a tooltip
   and a long product name from stretching it out. */
.dqo-modal--compact .dqo-modal__dialog {
	width: auto;
	min-width: 320px;
	max-width: 400px;
}

/* The order confirmation: wider than the options step because it carries an order table, but
   nowhere near the width the two-column checkout needs. */
.dqo-modal--medium .dqo-modal__dialog {
	max-width: 640px;
}

.dqo-modal--compact .dqo-modal__header {
	padding: 18px 22px;
}

.dqo-modal--compact .dqo-modal__title {
	font-size: 17px;
}

.dqo-modal--compact .dqo-modal__body {
	padding: 22px 22px 24px;
}

.dqo-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 26px;
	border-bottom: 1px solid var(--dqo-accent-ring);
	/* The one place the brand colour can be spent freely: it frames the whole popup without
	   sitting behind anything the customer has to read. */
	background:
		radial-gradient(120% 180% at 0% 0%, var(--dqo-accent-tint) 0%, transparent 62%),
		var(--dqo-surface);
	flex: 0 0 auto;
}

.dqo-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--dqo-text);
	display: flex;
	align-items: center;
	gap: 11px;
}

/* A short bar of the brand colour, so the title reads as part of the shop rather than a
   browser dialog. */
.dqo-modal__title::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 20px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--dqo-accent-lift), var(--dqo-accent));
}

/* Themes set their own width/height/radius on `button`; the extra `.dqo-modal` outranks them
   without resorting to !important. */
.dqo-modal .dqo-modal__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	background: var(--dqo-surface-sunken);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--dqo-text-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dqo-modal .dqo-modal__close:hover,
.dqo-modal .dqo-modal__close:focus-visible {
	background: #e9eaf0;
	color: var(--dqo-text);
	outline: none;
}

.dqo-modal__body {
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 28px 26px 32px;
	flex: 1 1 auto;
	min-height: 180px;
	scrollbar-width: thin;
	scrollbar-color: #cbcdd8 transparent;
}

.dqo-modal__body::-webkit-scrollbar {
	width: 10px;
}

.dqo-modal__body::-webkit-scrollbar-thumb {
	background-color: #cbcdd8;
	border: 3px solid var(--dqo-surface);
	border-radius: 10px;
}

/* -------------------------------------------------------------------------
 * Loading and error states
 * ---------------------------------------------------------------------- */

.dqo-modal__loader {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(255, 255, 255, 0.86);
	z-index: 5;
}

.dqo-modal--loading .dqo-modal__loader {
	display: flex;
}

.dqo-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--dqo-border-strong);
	border-top-color: var(--dqo-accent);
	border-radius: 50%;
	animation: dqo-spin 0.8s linear infinite;
}

.dqo-modal__loader-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--dqo-text-muted);
}

.dqo-error {
	padding: 20px;
	border: 1px solid #f0cfcf;
	background: #fdf6f6;
	color: #9f3a38;
	border-radius: var(--dqo-radius-md);
	font-size: 14.5px;
}

.dqo-error__link {
	display: inline-block;
	margin-top: 12px;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Steps
 * ---------------------------------------------------------------------- */

.dqo-modal__step[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Options step
 * ---------------------------------------------------------------------- */

/* The compact dialog already sets the measure, so the step fills it. */
.dqo-modal__step--options {
	max-width: 100%;
	margin: 0;
}

.dqo-modal__step--options .variations {
	width: 100%;
	margin: 0;
	border: 0;
}

.dqo-modal__step--options .variations th,
.dqo-modal__step--options .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.dqo-modal__step--options .variations th.label {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dqo-text-muted);
}

/* Woo renders the label as "Colors:"; the colon is noise above a row of pills. */
.dqo-modal__step--options .variations th.label label::after {
	content: none;
}

.dqo-modal__step--options .variations td.value {
	margin-bottom: 0;
}

.dqo-modal__step--options .variations tr + tr th.label {
	margin-top: 16px;
}

.dqo-modal__step--options .variations select {
	width: 100%;
	max-width: 100%;
}

/* --- Swatches -----------------------------------------------------------
 * Rendered from the attribute dropdown by `buildSwatches()`. The select stays in the DOM and
 * still resolves the variation — these only drive it — so it is hidden rather than removed.
 * ---------------------------------------------------------------------- */

.dqo-modal__step--options .dqo-has-swatches select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

.dqo-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.dqo-modal .dqo-swatch {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 38px;
	margin: 0;
	padding: 6px 13px;
	border: 1.5px solid var(--dqo-border-strong);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
	box-shadow: none;
	color: var(--dqo-text);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.18s var(--dqo-ease), background-color 0.18s var(--dqo-ease),
		color 0.18s var(--dqo-ease), transform 0.18s var(--dqo-ease);
}

.dqo-modal .dqo-swatch:hover:not(:disabled) {
	border-color: var(--dqo-accent);
	transform: translateY(-1px);
}

.dqo-modal .dqo-swatch.is-selected {
	border-color: var(--dqo-accent);
	background: var(--dqo-accent-soft);
	color: var(--dqo-text);
	box-shadow: 0 0 0 1px var(--dqo-accent);
}

.dqo-modal .dqo-swatch:disabled {
	border-style: dashed;
	background: var(--dqo-surface-sunken);
	color: var(--dqo-text-muted);
	cursor: not-allowed;
	opacity: 0.65;
}

.dqo-modal__step--options .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--dqo-text-muted);
}

.dqo-modal__step--options .woocommerce-variation {
	margin: 0;
}

.dqo-modal__step--options .woocommerce-variation-price {
	margin: 0 0 14px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--dqo-text);
	animation: dqo-rise 0.28s var(--dqo-ease);
}

.dqo-modal__step--options .woocommerce-variation-price .amount {
	color: inherit;
}

.dqo-modal__step--options .woocommerce-variation-availability {
	margin: -8px 0 16px;
	font-size: 13px;
	color: var(--dqo-text-muted);
}

/* The price and the buttons sit on a shelf separated from the choices above them. */
.dqo-modal__step--options .single_variation_wrap {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--dqo-border);
}

/* Quantity and the call to action share one row; the button takes whatever is left over so it
   stays the biggest target in the dialog at any width. */
.dqo-modal__step--options .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.dqo-modal__step--options .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}

/* A long title should not be what decides how wide the dialog is. */
.dqo-modal--compact .dqo-modal__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dqo-modal__step--options .single_add_to_cart_button {
	flex: 1 1 180px;
	min-height: 52px;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--dqo-radius-sm);
	background-color: var(--dqo-accent);
	color: var(--dqo-accent-contrast);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s var(--dqo-ease);
}

.dqo-modal__step--options .single_add_to_cart_button:hover {
	filter: brightness(0.94);
}

.dqo-modal__step--options .single_add_to_cart_button:active {
	transform: translateY(1px);
}

.dqo-modal__step--options .single_add_to_cart_button.disabled,
.dqo-modal__step--options .single_add_to_cart_button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* The theme's own Buy Now button rides the same hook as the add-to-cart button; inside the
   modal it would be a second, conflicting submit. */
.dqo-modal__step--options .wd-buy-now-btn,
.dqo-modal__step--options .dqo-order-now {
	display: none;
}

/* -------------------------------------------------------------------------
 * Order confirmation
 * ---------------------------------------------------------------------- */

.dqo-modal__step--thankyou {
	animation: dqo-rise 0.34s var(--dqo-ease);
}

/* A tick in the accent colour above the confirmation, so the outcome reads at a glance. */
.dqo-modal__step--thankyou::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 4px auto 18px;
	border-radius: 50%;
	background: var(--dqo-accent-tint) var(--dqo-tick) center / 24px 24px no-repeat;
	box-shadow: inset 0 0 0 1.5px var(--dqo-accent), 0 12px 26px -14px var(--dqo-accent-shadow);
	animation: dqo-pop 0.4s var(--dqo-ease) 0.1s backwards;
}

:root {
	--dqo-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

.dqo-modal__step--thankyou .woocommerce-notice,
.dqo-modal__step--thankyou .woocommerce-thankyou-order-received {
	margin: 0 0 20px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-align: center;
	color: var(--dqo-text);
}

.dqo-modal__step--thankyou ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 10px;
	margin: 0 0 24px;
	padding: 18px 16px;
	border: 1px solid var(--dqo-border);
	border-radius: var(--dqo-radius-md);
	background: var(--dqo-surface-sunken);
	list-style: none;
}

.dqo-modal__step--thankyou ul.order_details li {
	flex: 1 1 130px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dqo-text-muted);
}

.dqo-modal__step--thankyou ul.order_details li strong {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dqo-text);
}

.dqo-modal__step--thankyou h2,
.dqo-modal__step--thankyou h3 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dqo-text-muted);
}

.dqo-modal__step--thankyou table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: collapse;
	font-size: 14px;
}

.dqo-modal__step--thankyou table th,
.dqo-modal__step--thankyou table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--dqo-border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.dqo-modal__step--thankyou table th + td,
.dqo-modal__step--thankyou table td + td {
	text-align: right;
	white-space: nowrap;
}

.dqo-modal__step--thankyou table tfoot tr:last-child th,
.dqo-modal__step--thankyou table tfoot tr:last-child td {
	border-bottom: 0;
	padding-top: 14px;
	font-size: 17px;
	font-weight: 800;
	color: var(--dqo-text);
}

.dqo-modal__step--thankyou address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dqo-text-soft);
}

.dqo-modal .dqo-keep-shopping {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 4px 0 0;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-accent);
	color: var(--dqo-accent-contrast);
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s var(--dqo-ease);
}

.dqo-modal .dqo-keep-shopping:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
 * Checkout: shared
 * ---------------------------------------------------------------------- */

.dqo-modal__content .woocommerce {
	max-width: none;
}

/* Attribution inputs are hidden plumbing. Controls inside a display:none container are still
   submitted, so this only takes them out of the layout. */
.dqo-modal__content wc-order-attribution-inputs {
	display: none;
}

.dqo-modal__content img {
	max-width: 100%;
	height: auto;
}

/* WooCommerce's own `.screen-reader-text` rule ships in a stylesheet that is not loaded here,
   so without this the "quantity" labels take up space and break the steppers onto their own
   lines. Same technique core uses. */
.dqo-modal__content .screen-reader-text {
	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;
}

/* --- Notices -----------------------------------------------------------
 * checkout.js prepends its notices straight into `form.checkout` (checkout.js:811 after an
 * order review update, and :1067 after any failed submit). That form is our two-column flex
 * container, so left alone a notice becomes a third column and squeezes the form and summary
 * into slivers. These have to span the row and sit above both columns.
 * ---------------------------------------------------------------------- */

.dqo-modal__content form.checkout > .woocommerce-NoticeGroup,
.dqo-modal__content form.checkout > .woocommerce-notices-wrapper,
.dqo-modal__content form.checkout > .woocommerce-error,
.dqo-modal__content form.checkout > .woocommerce-message,
.dqo-modal__content form.checkout > .woocommerce-info {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	order: -1;
}

.dqo-modal .dqo-modal__content .woocommerce-error,
.dqo-modal .dqo-modal__content .woocommerce-message,
.dqo-modal .dqo-modal__content .woocommerce-info {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid var(--dqo-border);
	border-left: 3px solid var(--dqo-accent);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-accent-soft);
	color: var(--dqo-text-soft);
	font-size: 13.5px;
	line-height: 1.5;
	list-style: none;
}

.dqo-modal__content .woocommerce-error {
	border-color: #f0c9c9;
	border-left-color: var(--dqo-danger);
	background: #fdf4f4;
	color: #8f2f2f;
}

.dqo-modal__content .woocommerce-info,
.dqo-modal__content .woocommerce-message {
	border-color: #d9dfec;
	border-left-color: #3a6ea8;
	background: #f4f7fc;
	color: #2f4f78;
}

.dqo-modal__content .woocommerce-error li,
.dqo-modal__content .woocommerce-message li,
.dqo-modal__content .woocommerce-info li {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.dqo-modal__content .woocommerce-error li:last-child,
.dqo-modal__content .woocommerce-message li:last-child,
.dqo-modal__content .woocommerce-info li:last-child {
	margin-bottom: 0;
}

/* Woo drops a "return to cart" style button into some notices; it has no place in the popup. */
.dqo-modal__content .woocommerce-error .button,
.dqo-modal__content .woocommerce-message .button,
.dqo-modal__content .woocommerce-info .button {
	display: none;
}

.dqo-modal__content .woocommerce-notices-wrapper:empty {
	display: none;
}

/* --- Section headings -------------------------------------------------- */

.dqo-modal__content h3,
.dqo-modal__content #order_review_heading,
.dqo-modal__content .dqo-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--dqo-text-soft);
}

.dqo-modal__content h3::before,
.dqo-modal__content #order_review_heading::before,
.dqo-modal__content .dqo-section-title::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 3px;
	border-radius: 999px;
	background: var(--dqo-accent);
}

.dqo-modal__content h3::after,
.dqo-modal__content #order_review_heading::after,
.dqo-modal__content .dqo-section-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--dqo-border);
}

/* --- Quantity stepper (order summary and options step alike) ----------- */

.dqo-modal__content .quantity {
	display: inline-flex;
	align-items: stretch;
	width: auto;
	margin: 0;
	border: 1px solid var(--dqo-border-strong);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
	overflow: hidden;
}

.dqo-modal__content .quantity .qty {
	width: 40px;
	min-width: 40px;
	min-height: 38px;
	padding: 4px;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	-moz-appearance: textfield;
}

.dqo-modal__content .quantity .qty::-webkit-outer-spin-button,
.dqo-modal__content .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dqo-modal__content .quantity .qty:focus {
	box-shadow: none;
}

.dqo-modal .dqo-modal__content .quantity .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--dqo-surface);
	color: var(--dqo-text-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dqo-modal .dqo-modal__content .quantity .btn:hover {
	background: var(--dqo-surface-sunken);
	color: var(--dqo-text);
}

/* -------------------------------------------------------------------------
 * Checkout: fields
 * ---------------------------------------------------------------------- */

.dqo-modal__content .woocommerce-billing-fields__field-wrapper,
.dqo-modal__content .woocommerce-shipping-fields__field-wrapper,
.dqo-modal__content .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}

.dqo-modal__content .form-row {
	grid-column: 1 / -1;
	margin: 0 0 14px;
	padding: 0;
	min-width: 0;
}

.dqo-modal__content .form-row-first {
	grid-column: 1;
}

.dqo-modal__content .form-row-last {
	grid-column: 2;
}

.dqo-modal__content .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.4;
	color: var(--dqo-text-soft);
}

.dqo-modal__content .form-row label .required {
	color: var(--dqo-danger);
	text-decoration: none;
	border: 0;
}

.dqo-modal__content .form-row .optional {
	color: var(--dqo-text-muted);
	font-weight: 400;
}

.dqo-modal__content .input-text,
.dqo-modal__content select,
.dqo-modal__content textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--dqo-border);
	border-radius: var(--dqo-radius-sm);
	/* Tinted at rest and white once focused, which makes the field being typed into the
	   brightest thing on the panel. */
	background-color: var(--dqo-surface-sunken);
	color: var(--dqo-text);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dqo-modal__content textarea {
	min-height: 84px;
	resize: vertical;
}

.dqo-modal__content .input-text::placeholder,
.dqo-modal__content textarea::placeholder {
	color: #9a9db0;
}

.dqo-modal__content .input-text:hover,
.dqo-modal__content select:hover,
.dqo-modal__content textarea:hover {
	border-color: #bcbfcd;
}

.dqo-modal__content .input-text:focus,
.dqo-modal__content select:focus,
.dqo-modal__content textarea:focus {
	outline: none;
	border-color: var(--dqo-accent);
	background-color: var(--dqo-surface);
	box-shadow: 0 0 0 3px var(--dqo-accent-ring);
}

/* WooCommerce, and Astra on top of it, paint a filled-in field green the moment it validates.
   Against an orange accent that reads as a third colour carrying a meaning of its own, when all
   it means is that the customer typed something. The doubled `.dqo-modal` is what it takes to
   outrank `.woocommerce-js form .form-row.woocommerce-validated input.input-text` — four
   classes and two elements — without reaching for !important. */
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated input.input-text,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated select,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated textarea,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated .select2-container,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated .select2-selection--single {
	border-color: var(--dqo-border);
}

.dqo-modal .dqo-modal__content .form-row.woocommerce-validated input.input-text:focus,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated select:focus,
.dqo-modal .dqo-modal__content .form-row.woocommerce-validated textarea:focus {
	border-color: var(--dqo-accent);
}

.dqo-modal__content .woocommerce-invalid .input-text,
.dqo-modal__content .woocommerce-invalid select {
	border-color: var(--dqo-danger);
}

.dqo-modal__content .select2-container {
	width: 100% !important;
}

.dqo-modal__content .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid var(--dqo-border);
	border-radius: var(--dqo-radius-sm);
	background-color: var(--dqo-surface-sunken);
}

.dqo-modal__content .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 14px;
	font-size: 14.5px;
	color: var(--dqo-text);
}

.dqo-modal__content .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

/*
 * The open dropdown is the one part of a select2 field that is NOT inside the modal: it is
 * appended to `<body>` so it can escape any overflow it sits in. That puts it in the page's
 * own stacking context, well below the modal, where the list is drawn behind the popup — the
 * field looks dead, because the districts are painted underneath the thing you are looking at.
 * Only lifted while the popup is open, so nothing else on the page is affected.
 *
 * The search box gets the same treatment the fields do; it is rendered by select2 rather than
 * WooCommerce, so the rules above do not reach it.
 */
html.dqo-modal-open .select2-container--open {
	z-index: 1000001;
}

html.dqo-modal-open .select2-container--open .select2-search__field {
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--dqo-border-strong);
	border-radius: var(--dqo-radius-sm);
	font-size: 14px;
}

.dqo-modal__content .woocommerce-form__label-for-checkbox,
.dqo-modal__content .form-row-wide.create-account {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
}

.dqo-modal__content .woocommerce-form__label-for-checkbox input {
	flex: 0 0 auto;
	width: auto;
	min-height: 0;
	margin: 3px 0 0;
	accent-color: var(--dqo-accent);
}

/* "Ship to a different address?" is an h3 wrapping a checkbox — a toggle, not a section
   heading, so it opts out of the heading treatment above. */
.dqo-modal__content #ship-to-different-address {
	display: block;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--dqo-border);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface-sunken);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dqo-text-soft);
}

.dqo-modal__content #ship-to-different-address::after {
	display: none;
}

.dqo-modal__content .woocommerce-shipping-fields,
.dqo-modal__content .woocommerce-additional-fields {
	margin-top: 22px;
}

.dqo-modal__content .shipping_address {
	padding-top: 20px;
}

/* --- Compact pairing ---------------------------------------------------
 * Widths come from the settings screen, which puts one of these classes on every row. They
 * outrank the `form-row-first/last` WooCommerce assigns, and survive the locale class rewrite
 * in address-i18n.js, which only ever strips its own three. Half-width rows are placed by the
 * grid rather than pinned to a column, so a pair stays a pair no matter which fields around it
 * are switched off. Halving the form's height is the single biggest thing standing between the
 * customer and the button.
 * ---------------------------------------------------------------------- */

/* The grid decides how wide a row is, so the row itself has to stop deciding: WooCommerce's own
   layout sheet gives `form-row-first`/`form-row-last` a floated 47%, which would otherwise leave
   a full-width field sitting at half the width of the cell it was given. Outside the media query
   because that 47% applies on phones too, where every row is meant to span the one column. */
.dqo-modal__content .form-row.dqo-col-half,
.dqo-modal__content .form-row.dqo-col-full {
	float: none;
	width: 100%;
}

@media (min-width: 769px) {
	.dqo-modal__content .form-row.dqo-col-half {
		grid-column: span 1;
	}

	.dqo-modal__content .form-row.dqo-col-full {
		grid-column: 1 / -1;
	}
}

/* Switched off, but still in the form: WooCommerce needs the value, the customer does not need
   the field. `!important` earns its place here — address-i18n.js calls jQuery's .show() on every
   field the address locale keeps, which writes `display` inline, and an inline style beats any
   selector we could write. Kept out of the media query so it holds at every width. */
.dqo-modal__content .form-row.dqo-field-hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Checkout: order summary and payment panel
 * ---------------------------------------------------------------------- */

/* The extra `.dqo-modal` is there for the border alone: themes zero out `#order_review`'s
   border with an ID in the selector, which no amount of classes would otherwise outrank. */
.dqo-modal .dqo-modal__content .dqo-checkout__aside #order_review,
.dqo-modal .dqo-modal__content .dqo-checkout__aside .checkout-order-review {
	padding: 22px 20px;
	border: 1px solid var(--dqo-accent-ring);
	border-radius: var(--dqo-radius-md);
	background: var(--dqo-accent-soft);
	box-shadow: 0 1px 2px rgba(16, 18, 32, 0.04), 0 18px 36px -28px rgba(16, 18, 32, 0.5);
}

.dqo-modal__content .dqo-checkout__aside .checkout-order-review #order_review {
	padding: 0;
	border: 0;
	background: none;
}

/* --- Summary rows -------------------------------------------------------
 * The review table is laid out with flex rather than as a table. Woodmart renders an entire
 * line item inside one cell, and in table layout that cell is stuck in column one — sized by
 * the totals underneath it, which squeezed a 348px panel down to a 237px item. Escaping via
 * `display: block` does not help while an ancestor is still a table: the block box just gets
 * wrapped in an anonymous cell in the same column. Dropping table layout altogether is the
 * only thing that gives the row the full width, and it lays out core's two-cell rows just as
 * well — label left, amount right.
 * ---------------------------------------------------------------------- */

.dqo-modal .dqo-modal__content table.shop_table,
.dqo-modal .dqo-modal__content table.shop_table tbody,
.dqo-modal .dqo-modal__content table.shop_table tfoot,
.dqo-modal .dqo-modal__content table.shop_table tr,
.dqo-modal .dqo-modal__content table.shop_table th,
.dqo-modal .dqo-modal__content table.shop_table td {
	display: block;
	width: auto;
	/* Themes rule their tables cell by cell. Left in place those borders stop wherever the cell
	   does, which in a flex row reads as a handful of stray lines rather than one divider. */
	border: 0;
}

.dqo-modal__content .shop_table {
	width: 100%;
	margin: 0 0 4px;
	border-collapse: collapse;
	font-size: 14px;
}

.dqo-modal__content .wd-table-wrapper {
	max-width: 100%;
}

/* The column headings restate what the layout already says. */
.dqo-modal__content .shop_table thead {
	display: none;
}

/* Matched to the reach of the reset above — that block sets every row back to `display: block`,
   and anything meant to override it has to be at least as specific. */
.dqo-modal .dqo-modal__content table.shop_table tbody tr,
.dqo-modal .dqo-modal__content table.shop_table tfoot tr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--dqo-accent-ring);
}

.dqo-modal__content .shop_table tbody tr:last-child {
	border-bottom-width: 2px;
}

.dqo-modal__content .shop_table tbody tr {
	animation: dqo-rise 0.34s var(--dqo-ease) backwards;
}

.dqo-modal__content .shop_table tbody tr:nth-child(2) {
	animation-delay: 0.05s;
}

.dqo-modal__content .shop_table tbody tr:nth-child(3) {
	animation-delay: 0.1s;
}

.dqo-modal__content .shop_table tbody tr:nth-child(n + 4) {
	animation-delay: 0.14s;
}

.dqo-modal__content .shop_table tbody tr > *,
.dqo-modal__content .shop_table tfoot tr > * {
	min-width: 0;
	padding: 0;
	text-align: left;
}

/* Product names run long with no natural break point. Confined to the item rows: applied to
   the totals it chops short labels like "Shipment" into "Shi / pm / ent" as soon as the value
   beside them is a long sentence. */
.dqo-modal__content .shop_table tbody tr > * {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* A row that holds the whole line item takes the full width; a name/amount pair splits.
   Scoped to tbody: the totals rows have their own sizing further down, and a blanket
   `:last-child` rule here would outrank it and stop a long shipping message from shrinking. */
.dqo-modal__content .shop_table tr > *:only-child {
	flex: 1 1 100%;
}

.dqo-modal__content .shop_table tbody tr > *:first-child:not(:only-child) {
	flex: 1 1 auto;
}

.dqo-modal__content .shop_table tbody tr > *:last-child:not(:only-child) {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.dqo-modal__content .woocommerce-Price-amount {
	white-space: nowrap;
}

.dqo-modal__content .shop_table tbody td {
	color: var(--dqo-text);
	font-size: 13.5px;
	line-height: 1.45;
}

.dqo-modal__content .shop_table tbody tr:first-child {
	padding-top: 0;
}

/* --- Line items --------------------------------------------------------
 * Thumbnail, then the name, then the quantity; anything else the item carries — a variation's
 * attributes, a subscription's terms — wraps onto its own line, indented past the picture so
 * the column of names stays a column.
 * ---------------------------------------------------------------------- */

.dqo-modal__content .shop_table tbody td.product-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 11px;
}

.dqo-modal__content .shop_table .dqo-item__thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.dqo-modal__content .shop_table .dqo-item__name {
	flex: 1 1 0;
	min-width: 0;
	font-weight: 600;
	color: var(--dqo-text);
}

.dqo-modal__content .shop_table td.product-name .product-quantity {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dqo-surface);
	box-shadow: inset 0 0 0 1px var(--dqo-accent-ring);
	color: var(--dqo-text-soft);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.dqo-modal__content .shop_table td.product-name > dl.variation,
.dqo-modal__content .shop_table td.product-name > .wc-item-meta {
	flex: 1 1 100%;
	margin: 2px 0 0 63px;
	font-size: 12.5px;
	color: var(--dqo-text-muted);
}

/* Themes that put a thumbnail in the review row size it from a stylesheet that never loads
   here. Left alone, a 600px product image bursts out of the column. */
.dqo-modal__content .shop_table img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border: 1px solid var(--dqo-accent-ring);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
}

.dqo-modal__content .shop_table a {
	color: var(--dqo-text);
	font-weight: 600;
	text-decoration: none;
}

.dqo-modal__content .shop_table a:hover {
	text-decoration: underline;
}

.dqo-modal__content .shop_table .quantity {
	margin: 10px 0 0;
}

.dqo-modal__content .shop_table .product-total,
.dqo-modal__content .shop_table .wd-checkout-prod-total {
	font-weight: 700;
	color: var(--dqo-text);
}

/* --- Line item ---------------------------------------------------------
 * Woodmart renders the whole row inside one cell as a stack of blocks, which reads as
 * thumbnail, then a four-line title, then the stepper, then the price. Laid out as a row it
 * becomes a scannable line item: image, then name over stepper, then price.
 * ---------------------------------------------------------------------- */

/* Outranks the blanket `display: block` on cells above, which would otherwise flatten this
   back into a stack and drop the thumbnail onto its own line. */
.dqo-modal .dqo-modal__content .shop_table tbody td.wd-checkout-prod {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0;
}

.dqo-modal__content .wd-checkout-prod-img {
	flex: 0 0 54px;
	line-height: 0;
}

/* `display: contents` lifts the title wrapper's children up here, which is the only way to get
   the stepper and the price onto one row when the markup nests them separately. Flex wrapping
   rather than fixed grid columns, so a narrow panel drops the price to its own line instead of
   letting the two collide. Browsers without `display: contents` fall back to the stacked
   reading, which is still legible. */
.dqo-modal__content .wd-checkout-prod-cont {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

.dqo-modal__content .wd-checkout-prod-title {
	display: contents;
}

.dqo-modal__content .wd-checkout-prod-title > a {
	flex: 1 1 100%;
}

.dqo-modal__content .wd-checkout-prod-title > .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.dqo-modal__content .wd-checkout-prod-total {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
}

/* The theme's own remove link points at the cart page, which would drop the customer out of
   the checkout. The plugin renders its own control instead — see DQO_Ajax::add_remove_button. */
.dqo-modal__content .shop_table a.remove,
.dqo-modal__content .wd-checkout-remove-btn-wrapp {
	display: none;
}

.dqo-modal .dqo-modal__content .dqo-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 22px;
	min-width: 22px;
	height: 22px;
	min-height: 22px;
	margin: 0 0 0 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--dqo-text-muted);
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dqo-modal .dqo-modal__content .dqo-remove:hover,
.dqo-modal .dqo-modal__content .dqo-remove:focus-visible {
	background: #f2d9d9;
	color: var(--dqo-danger);
	outline: none;
}

/* Themes colour prices with their link colour; inside the panel they should follow the
   hierarchy set here instead. */
.dqo-modal__content .shop_table .woocommerce-Price-amount {
	color: inherit;
}

.dqo-modal__content .shop_table tfoot tr {
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 0;
}

/* The label keeps its own width; the value takes what is left and wraps, because a shipping
   message can be a whole sentence rather than an amount. */
.dqo-modal__content .shop_table tfoot th {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dqo-text-muted);
}

.dqo-modal__content .shop_table tfoot td {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: auto;
	text-align: right;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dqo-text);
}

.dqo-modal__content .shop_table tfoot tr:first-child {
	padding-top: 16px;
}

/* The shipping choices come as a list, which otherwise shows its bullet next to the label. */
.dqo-modal__content #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dqo-modal__content #shipping_method li {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
}

.dqo-modal__content #shipping_method li:last-child {
	margin-bottom: 0;
}

.dqo-modal__content #shipping_method li input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--dqo-accent);
}

.dqo-modal__content #shipping_method label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dqo-text);
	cursor: pointer;
}

.dqo-modal__content .shop_table tfoot .order-total {
	margin-top: 5px;
	padding-top: 14px;
	padding-bottom: 0;
	border-top: 2px solid var(--dqo-accent-line);
}

.dqo-modal__content .shop_table tfoot .order-total th,
.dqo-modal__content .shop_table tfoot .order-total td {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--dqo-text);
}

.dqo-modal__content .shop_table tfoot .order-total td .amount {
	color: var(--dqo-accent);
}

/* --- Payment ----------------------------------------------------------- */

.dqo-modal__content .dqo-section-title {
	margin: 24px 0 14px;
}

.dqo-modal__content #payment {
	border: 0;
	border-radius: 0;
	background: none;
}

.dqo-modal__content #payment ul.payment_methods {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border: 0;
}

/* The radio, its label and the description box are siblings; making the row itself the flex
   container keeps the radio beside the label and drops the description onto its own line. */
/* Top-aligned, not centred: a gateway with a two-line name and a badge would otherwise leave
   its radio floating halfway down the card instead of beside the name. */
.dqo-modal__content #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px 10px;
	margin: 0 0 8px;
	padding: 13px 15px;
	list-style: none;
	border: 1px solid var(--dqo-border-strong);
	border-radius: var(--dqo-radius-sm);
	background: var(--dqo-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dqo-modal__content #payment ul.payment_methods li:hover {
	border-color: #b6b9c8;
}

/* An accent rail that grows out of the left edge when a method is picked. The rail is always
   present so it can animate its scale, rather than popping into existence. */
.dqo-modal__content #payment ul.payment_methods li {
	position: relative;
	overflow: hidden;
}

.dqo-modal__content #payment ul.payment_methods li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--dqo-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.25s var(--dqo-ease);
}

/* Progressive enhancement: browsers without :has() simply keep the resting style. */
.dqo-modal__content #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--dqo-accent);
	background: var(--dqo-accent-soft);
	box-shadow: 0 0 0 1px var(--dqo-accent);
}

.dqo-modal__content #payment ul.payment_methods li:has(input:checked)::before {
	transform: scaleY(1);
}

.dqo-modal__content #payment ul.payment_methods li > input[type="radio"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	/* Nudged so it reads as centred on the first line of the label rather than its box. */
	margin: 1px 0 0;
	accent-color: var(--dqo-accent);
}

.dqo-modal__content #payment ul.payment_methods label {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dqo-text);
	cursor: pointer;
}

/* Gateway badges come at whatever size the gateway ships; the checkout stylesheet that would
   normally cap them is not loaded here. */
.dqo-modal__content #payment ul.payment_methods label img {
	max-height: 20px;
	width: auto;
	margin: 0;
	float: none;
	vertical-align: middle;
}

/* Indented to line up under the gateway name rather than under its radio. */
.dqo-modal__content #payment ul.payment_methods li > .payment_box {
	flex: 1 1 100%;
	margin: 4px 0 0;
	padding: 0 0 0 27px;
	background: none;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--dqo-text-muted);
}

.dqo-modal__content #payment ul.payment_methods li > .payment_box::before {
	display: none;
}

.dqo-modal__content #payment ul.payment_methods li > .payment_box p:last-child {
	margin-bottom: 0;
}

.dqo-modal__content #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	font-size: 12.5px;
	line-height: 1.5;
}

/* --- Call to action ---------------------------------------------------- */

.dqo-modal__content #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	float: none;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--dqo-radius-sm);
	background-color: var(--dqo-accent);
	background-image: linear-gradient(135deg, var(--dqo-accent-lift) 0%, var(--dqo-accent) 55%, var(--dqo-accent-deep) 100%);
	color: var(--dqo-accent-contrast);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1.2;
	cursor: pointer;
	/* A shadow in the button's own colour rather than grey — it lifts off the panel instead of
	   looking smudged, and it is the last thing between the customer and the order. */
	box-shadow: 0 10px 22px -12px var(--dqo-accent-shadow);
	transition: filter 0.15s ease, transform 0.15s var(--dqo-ease), box-shadow 0.15s ease;
}

.dqo-modal__content #place_order:hover {
	filter: brightness(1.04) saturate(1.05);
	box-shadow: 0 16px 30px -12px var(--dqo-accent-shadow);
	transform: translateY(-1px);
}

.dqo-modal__content #place_order:active {
	transform: translateY(0);
	box-shadow: none;
}

.dqo-cta__total {
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dqo-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--dqo-text-muted);
	text-align: center;
}

.dqo-trust__icon {
	flex: 0 0 auto;
	width: 13px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--dqo-lock) center / contain no-repeat;
	mask: var(--dqo-lock) center / contain no-repeat;
}

:root {
	--dqo-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V4.5a4 4 0 1 1 8 0V7h.5A1.5 1.5 0 0 1 13 8.5v6A1.5 1.5 0 0 1 11.5 16h-9A1.5 1.5 0 0 1 1 14.5v-6A1.5 1.5 0 0 1 2.5 7H3Zm2 0h4V4.5a2 2 0 1 0-4 0V7Z'/%3E%3C/svg%3E");
}

/* Core's own two-column set is redundant next to the flex columns below. */
.dqo-modal__content .col2-set,
.dqo-modal__content .col2-set .col-1,
.dqo-modal__content .col2-set .col-2 {
	float: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Checkout: columns
 * ---------------------------------------------------------------------- */

@media (min-width: 900px) {
	.dqo-modal__content form.checkout {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0 40px;
	}

	/* 60 / 40, with the gap taken off each side so the pair still adds up to the full row. */
	.dqo-checkout__main {
		flex: 0 0 calc(60% - 20px);
		max-width: calc(60% - 20px);
		min-width: 0;
	}

	.dqo-checkout__aside {
		flex: 0 0 calc(40% - 20px);
		max-width: calc(40% - 20px);
		min-width: 0;
		position: sticky;
		top: 0;
	}

	/* The two columns arrive a beat apart, which reads as the checkout assembling itself
	   rather than snapping in. */
	.dqo-checkout__main,
	.dqo-checkout__aside {
		animation: dqo-rise 0.42s var(--dqo-ease) backwards;
	}

	.dqo-checkout__aside {
		animation-delay: 0.09s;
	}
}

@media (max-width: 899px) {
	.dqo-checkout__aside {
		margin-top: 30px;
	}
}

/* -------------------------------------------------------------------------
 * Tablet
 * ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.dqo-modal {
		padding: 18px;
	}

	.dqo-modal__dialog {
		max-height: 92vh;
	}
}

/* -------------------------------------------------------------------------
 * Mobile: bottom sheet
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.dqo-modal {
		padding: 0;
		align-items: flex-end;
	}

	.dqo-modal__dialog,
	.dqo-modal--compact .dqo-modal__dialog {
		max-width: none;
		max-height: 94vh;
		border-radius: 20px 20px 0 0;
		animation: dqo-sheet-in 0.3s var(--dqo-ease);
	}

	/* The compact dialog is only tall enough for its content, so on a phone it sits as a small
	   sheet at the foot of the screen rather than a near-empty full-height panel. */
	.dqo-modal--compact .dqo-modal__body {
		padding: 20px 18px 24px;
	}

	/* Grab handle, so the sheet reads as one. */
	.dqo-modal__header::before {
		content: "";
		position: absolute;
		top: 9px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		border-radius: 4px;
		background: #dcdde5;
	}

	.dqo-modal__header {
		position: relative;
		padding: 22px 18px 16px;
	}

	.dqo-modal__title {
		font-size: 17px;
	}

	.dqo-modal__body {
		padding: 22px 18px 24px;
	}

	.dqo-modal__content .woocommerce-billing-fields__field-wrapper,
	.dqo-modal__content .woocommerce-shipping-fields__field-wrapper,
	.dqo-modal__content .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.dqo-modal__content .form-row-first,
	.dqo-modal__content .form-row-last {
		grid-column: 1;
	}

	.dqo-modal__content .dqo-checkout__aside #order_review,
	.dqo-modal__content .dqo-checkout__aside .checkout-order-review {
		padding: 20px 16px;
	}

	/* iOS zooms the page in on any field under 16px. */
	.dqo-modal__content .input-text,
	.dqo-modal__content select,
	.dqo-modal__content textarea {
		font-size: 16px;
	}

	/* The call to action rides along at the foot of the sheet rather than sitting at the end
	   of a long scroll. */
	.dqo-cart-toggle {
		bottom: 18px;
		width: 52px;
		min-width: 52px;
		height: 52px;
		min-height: 52px;
	}

	.dqo-cart-toggle--right {
		right: 16px;
	}

	.dqo-cart-toggle--left {
		left: 16px;
	}

	.dqo-cart__item {
		padding-right: 26px;
	}

	.dqo-cart__thumb,
	.dqo-cart__thumb img {
		flex-basis: 54px;
		width: 54px;
	}

	.dqo-modal__content .place-order {
		position: sticky;
		bottom: -24px;
		z-index: 4;
		margin: 0 -16px -20px;
		padding: 14px 16px 20px;
		background: var(--dqo-surface-sunken);
		box-shadow: 0 -12px 22px -14px rgba(16, 18, 32, 0.4);
	}

	.dqo-trust {
		margin-top: 16px;
		padding-bottom: 4px;
	}
}

@media (max-width: 400px) {
	.dqo-modal__body {
		padding: 18px 14px 20px;
	}

	.dqo-modal__content #place_order {
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

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

@keyframes dqo-overlay-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dqo-dialog-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dqo-sheet-in {
	from {
		transform: translateY(100%);
	}
	to {
		transform: none;
	}
}

@keyframes dqo-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dqo-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * The cart has just gained an item. The count changes by a single digit in a small badge, in a
 * corner the customer is usually not looking at, so something has to move for the change to
 * register at all.
 *
 * Every keyframe below carries its own timing function. A spring does not travel at one rate —
 * it accelerates into each reversal and decelerates out of it — and a single curve stretched
 * over the whole animation is what makes a bounce read as mechanical. The amplitudes decay
 * (0.86 → 1.15 → 0.95 → 1.04 → 0.99) so it comes to rest instead of stopping dead.
 */
@keyframes dqo-cart-bump {
	0% {
		scale: 1;
		translate: 0 0;
		animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
	}
	16% {
		scale: 0.86;
		translate: 0 3px;
		animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
	}
	40% {
		scale: 1.15;
		translate: 0 -7px;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	60% {
		scale: 0.95;
		translate: 0 1px;
		animation-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1);
	}
	78% {
		scale: 1.04;
		translate: 0 -2px;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	92% {
		scale: 0.99;
		translate: 0 0;
	}
	100% {
		scale: 1;
		translate: 0 0;
	}
}

/* Rises into place and settles, on the same decaying spring as the bump. */
@keyframes dqo-cart-in {
	0% {
		opacity: 0;
		scale: 0.2;
		translate: 0 20px;
		animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
	}
	50% {
		opacity: 1;
		scale: 1.14;
		translate: 0 -6px;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	70% {
		scale: 0.95;
		translate: 0 2px;
		animation-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1);
	}
	86% {
		scale: 1.03;
		translate: 0 -1px;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	100% {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}
}

@keyframes dqo-cart-ring {
	0% {
		opacity: 0.6;
		scale: 1;
	}
	100% {
		opacity: 0;
		scale: 1.85;
	}
}

/* Fainter, wider and a beat behind, so the pair reads as depth rather than a thicker ring. */
@keyframes dqo-cart-ring-wide {
	0% {
		opacity: 0.32;
		scale: 1;
	}
	100% {
		opacity: 0;
		scale: 2.5;
	}
}

@keyframes dqo-cart-swing {
	0% {
		rotate: 0deg;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	18% {
		rotate: -16deg;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	42% {
		rotate: 11deg;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	62% {
		rotate: -6deg;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	80% {
		rotate: 3deg;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	92% {
		rotate: -1deg;
	}
	100% {
		rotate: 0deg;
	}
}

@keyframes dqo-badge-pop {
	0% {
		opacity: 0;
		scale: 0.2;
		animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
	}
	40% {
		opacity: 1;
		scale: 1.3;
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	62% {
		scale: 0.9;
		animation-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1);
	}
	80% {
		scale: 1.06;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes dqo-progress {
	0% {
		background-position: -45% 0;
	}
	100% {
		background-position: 145% 0;
	}
}

@keyframes dqo-sweep {
	0% {
		opacity: 1;
		transform: translateX(0) skewX(-18deg);
	}
	100% {
		opacity: 1;
		transform: translateX(420%) skewX(-18deg);
	}
}

/* Every decorative motion added above is opt-out. Functional transitions that only convey
   state — focus rings, hover colours — are cheap enough to keep. */
@media (prefers-reduced-motion: reduce) {
	.dqo-modal__overlay,
	.dqo-modal__dialog,
	.dqo-modal__dialog::before,
	.dqo-order-now,
	.dqo-order-now::before,
	.dqo-checkout__main,
	.dqo-checkout__aside,
	.dqo-modal__content .shop_table tbody tr,
	.dqo-modal__content #payment ul.payment_methods li::before,
	.dqo-modal__content #place_order,
	.dqo-modal__step--options .single_add_to_cart_button,
	.dqo-cart-toggle,
	.dqo-cart-toggle::before,
	.dqo-cart-toggle::after,
	.dqo-cart-toggle__icon,
	.dqo-cart-toggle__count {
		animation: none !important;
		transition: none;
	}
}