/**
 * Dakhli — cart, checkout and order confirmation.
 *
 * Loaded only on those three pages (inc/assets.php), after shop.css. Scoped
 * under .dk-commerce so the generic WooCommerce rules in shop.css — which the
 * account pages still rely on — are overridden here rather than deleted there.
 *
 * WooCommerce swaps several of these blocks over AJAX (cart form, totals,
 * review table, payment). Anything that must survive a swap is styled by class,
 * never set inline by script.
 */

/* Button variants .dk-btn--ink and .dk-btn--ghost-ink live in ui.css — they
   are used on the homepage and confirmation page too. */

/* ===============================================================
 * Page frame and step bar
 * ============================================================= */

.dk-commerce { background: var(--dk-paper); }

.dk-commerce__head {
	background: var(--dk-white);
	border-bottom: var(--dk-border);
}
.dk-commerce__headin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dk-s5) var(--dk-s7);
	flex-wrap: wrap;
	padding-block: var(--dk-s5);
}
.dk-commerce__title {
	margin: 0;
	font-size: var(--dk-d-lg);
	line-height: 1;
}
.dk-commerce__body { padding-block: var(--dk-s6) var(--dk-s10); }

/* Progress: three dots on a rail. The yellow fill is a pseudo-element scaled
   by --dk-progress (0, 0.5, 1) set inline from PHP, and animates in on load. */
.dk-steps { flex: 1 1 420px; max-width: 560px; }
.dk-steps__list {
	position: relative;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-steps__list::before,
.dk-steps__list::after {
	content: '';
	position: absolute;
	top: 17px;
	left: 18px;
	right: 18px;
	height: 3px;
	border-radius: 3px;
}
.dk-steps__list::before { background: var(--dk-line); }
.dk-steps__list::after {
	background: var(--dk-yellow);
	transform-origin: left;
	transform: scaleX(var(--dk-progress, 0));
	animation: dk-steps-fill 0.9s 0.15s var(--dk-ease) backwards;
}
@keyframes dk-steps-fill { from { transform: scaleX(0); } }

.dk-steps__item { position: relative; z-index: 1; }
.dk-steps__item:first-child .dk-steps__link { align-items: flex-start; }
.dk-steps__item:last-child .dk-steps__link { align-items: flex-end; }
.dk-steps__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.dk-steps__dot {
	display: grid;
	place-items: center;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--dk-white);
	border: 2px solid var(--dk-line-strong);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-sm);
	font-weight: 600;
	color: var(--dk-ink-400);
	transition: transform var(--dk-dur-slow) var(--dk-ease);
}
.dk-steps__label {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dk-ink-400);
	white-space: nowrap;
}
.is-done .dk-steps__dot { background: var(--dk-ink); border-color: var(--dk-ink); color: var(--dk-yellow); }
.is-done .dk-steps__label { color: var(--dk-ink-600); }
a.dk-steps__link:hover .dk-steps__dot { transform: scale(1.08); }
a.dk-steps__link:hover .dk-steps__label { color: var(--dk-ink); }
.is-current .dk-steps__dot {
	background: var(--dk-yellow);
	border-color: var(--dk-yellow);
	color: var(--dk-ink);
	box-shadow: 0 0 0 5px rgba(255, 198, 39, 0.25);
	animation: dk-step-pulse 2.4s 1s var(--dk-ease) infinite;
}
.is-current .dk-steps__label { color: var(--dk-ink); font-weight: 600; }
@keyframes dk-step-pulse {
	0%, 100% { box-shadow: 0 0 0 5px rgba(255, 198, 39, 0.25); }
	50%      { box-shadow: 0 0 0 9px rgba(255, 198, 39, 0.08); }
}

/* ===============================================================
 * Shared entrance
 * ============================================================= */

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

/* ===============================================================
 * Notices inside the commerce pages
 * ============================================================= */

.dk-commerce .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--dk-s5); }
.dk-commerce .woocommerce-message,
.dk-commerce .woocommerce-info,
.dk-commerce .woocommerce-error {
	border-radius: 12px;
	margin-bottom: var(--dk-s3);
	animation: dk-in 0.4s var(--dk-ease) backwards;
}

/* ===============================================================
 * CART
 * ============================================================= */

.dk-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
	gap: var(--dk-s6);
	align-items: start;
}
.dk-cart__main { min-width: 0; }

.dk-cart__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dk-s4);
	flex-wrap: wrap;
	margin-bottom: var(--dk-s4);
}
.dk-cart__heading {
	display: flex;
	align-items: baseline;
	gap: var(--dk-s3);
	margin: 0;
	font-size: var(--dk-d-sm);
}
.dk-cart__count {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--dk-ink-500);
	background: var(--dk-paper-2);
	padding: 3px 9px;
	border-radius: var(--dk-radius-pill, 99px);
}
.dk-cart__continue,
.dk-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--dk-t-sm);
	font-weight: 600;
	color: var(--dk-ink-600);
	text-decoration: none;
}
.dk-cart__continue:hover,
.dk-checkout__back:hover { color: var(--dk-ink); }
.dk-cart__continue svg,
.dk-checkout__back svg { transition: transform var(--dk-dur-slow) var(--dk-ease); }
.dk-cart__continue:hover svg,
.dk-checkout__back:hover svg { transform: translateX(-3px); }

/* --- item list --- */

.dk-cartlist {
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 16px;
	overflow: hidden;
}

/* One column template for the header and every row, so they always align. */
.dk-cartlist__head,
.dk-line {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 110px 132px 118px 40px;
	align-items: center;
	gap: 0 var(--dk-s4);
	padding-inline: var(--dk-s5);
}
.dk-cartlist__head {
	padding-block: var(--dk-s3);
	background: var(--dk-paper-2);
	border-bottom: var(--dk-border);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dk-ink-500);
}
.dk-cartlist__head span:first-child { grid-column: 1 / 3; }
.dk-cartlist__head span:last-child { grid-column: 5; text-align: right; }

.dk-line {
	padding-block: var(--dk-s4);
	border-bottom: var(--dk-border);
	transition: background var(--dk-dur) var(--dk-ease);
	animation: dk-in 0.5s var(--dk-ease) backwards;
	animation-delay: calc(var(--dk-i, 0) * 70ms + 120ms);
}
.dk-line:hover { background: #fffdf7; }

.dk-line__media a,
.dk-line__media img { display: block; }
.dk-line__media img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: var(--dk-border);
	background: var(--dk-paper-2);
	transition: transform var(--dk-dur-slow) var(--dk-ease);
}
.dk-line:hover .dk-line__media img { transform: scale(1.04); }

.dk-line__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-line__rayon {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dk-yellow-700);
}
.dk-line__name { font-weight: 600; font-size: var(--dk-t-md); line-height: 1.3; }
.dk-line__name a { color: var(--dk-ink); text-decoration: none; }
.dk-line__name a:hover { text-decoration: underline; text-decoration-color: var(--dk-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dk-line__sku {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	color: var(--dk-text-faint);
}

.dk-line__price,
.dk-line__total {
	font-family: var(--dk-font-mono);
	font-weight: 500;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.dk-line__price { color: var(--dk-ink-500); font-size: var(--dk-t-sm); }
.dk-line__total { text-align: right; font-weight: 600; color: var(--dk-ink); }
.dk-line__price del { opacity: 0.55; margin-right: 4px; }
.dk-line__price ins { text-decoration: none; color: var(--dk-red); }

.dk-line__qty .dk-qty { border-radius: 10px; }
.dk-line__qty .dk-qty button { width: 36px; }
.dk-line__qty .dk-qty input { width: 44px; padding: 0.55em 0; }

/* Remove: quiet until hovered, then unmistakably destructive. */
.dk-commerce a.remove {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	color: var(--dk-ink-400);
	background: transparent;
	text-decoration: none;
	transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
}
.dk-commerce a.remove:hover,
.dk-commerce a.remove:focus-visible { background: var(--dk-red-tint); color: var(--dk-red); }

/* Set by app.js on click, before WooCommerce's request returns: the row folds
   away so the removal is felt immediately rather than after a round trip. */
.dk-line.is-removing {
	animation: dk-line-out 0.36s var(--dk-ease) forwards;
	pointer-events: none;
}
@keyframes dk-line-out {
	to { opacity: 0; transform: translateX(28px); }
}

/* --- coupon + manual update --- */

.dk-cartlist__actions {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dk-s4);
	flex-wrap: wrap;
	padding: var(--dk-s4) var(--dk-s5);
	background: var(--dk-paper);
}
.dk-coupon { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; max-width: 440px; }
.dk-coupon__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dk-ink-600);
}
.dk-coupon__field { display: flex; gap: var(--dk-s2); }
.dk-coupon__field input { flex: 1; min-width: 0; border-radius: 10px; }
.dk-coupon__field .dk-btn { border-radius: 10px; }

/* Quantities update on their own once the script is running, so the manual
   button is only shown to visitors without JavaScript. */
.dk-js .dk-cart__update {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ===============================================================
 * Summary card (cart totals and checkout review share it)
 * ============================================================= */

.dk-cart__side,
.dk-checkout__side {
	position: sticky;
	top: calc(var(--dk-header-h, 80px) + var(--dk-s4));
	animation: dk-in 0.55s 0.2s var(--dk-ease) backwards;
}

.dk-summary {
	position: relative;
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 16px;
	padding: var(--dk-s5);
	box-shadow: 0 24px 50px -32px rgba(18, 20, 26, 0.35);
	overflow: hidden;
}
.dk-summary::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--dk-yellow);
}
.dk-commerce .cart_totals {
	max-width: none;
	margin: 0;
	width: auto;
}
.dk-summary__title {
	margin: 0 0 var(--dk-s4);
	font-size: var(--dk-d-sm);
}

.dk-commerce .dk-summary table {
	width: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	margin: 0 0 var(--dk-s4);
	border-collapse: collapse;
}
.dk-commerce .dk-summary th,
.dk-commerce .dk-summary td {
	padding: var(--dk-s3) 0;
	border: 0;
	border-bottom: 1px dashed var(--dk-line);
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-base);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dk-ink-600);
	vertical-align: top;
}
.dk-commerce .dk-summary th { font-weight: 500; text-align: left; }
.dk-commerce .dk-summary td {
	text-align: right;
	font-family: var(--dk-font-mono);
	font-weight: 500;
	color: var(--dk-ink);
	font-variant-numeric: tabular-nums;
}

/* Delivery line comes from WooCommerce's shipping template: a <ul> of methods
   plus a destination note. With one flat rate it reads as a single figure. */
.dk-commerce .dk-summary #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-commerce .dk-summary #shipping_method li { margin: 0; }
.dk-commerce .dk-summary #shipping_method label { font-family: var(--dk-font-mono); font-weight: 500; }
.dk-commerce .dk-summary #shipping_method input[type='radio'] { display: none; }
.dk-commerce .dk-summary .woocommerce-shipping-destination,
.dk-commerce .dk-summary .woocommerce-shipping-contents {
	margin: 4px 0 0;
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-xs);
	font-weight: 400;
	color: var(--dk-text-faint);
}

.dk-commerce .dk-summary .order-total th,
.dk-commerce .dk-summary .order-total td {
	border-bottom: 0;
	padding-top: var(--dk-s4);
	vertical-align: baseline;
}
.dk-commerce .dk-summary .order-total th {
	font-family: var(--dk-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--dk-ink);
}
.dk-commerce .dk-summary .order-total td {
	font-family: var(--dk-font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--dk-ink);
}
.dk-commerce .dk-summary .order-total td strong { font-weight: 700; }
.dk-commerce .dk-summary .cart-discount td { color: var(--dk-green); }

/* Set by app.js after an AJAX refresh: draws the eye to the figure that moved. */
.dk-flash { animation: dk-flash 1.1s var(--dk-ease); }
@keyframes dk-flash {
	0%   { background: rgba(255, 198, 39, 0.55); box-shadow: 0 0 0 6px rgba(255, 198, 39, 0.55); }
	100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

.dk-summary__cod {
	display: flex;
	gap: var(--dk-s3);
	align-items: flex-start;
	padding: var(--dk-s3) var(--dk-s4);
	margin-bottom: var(--dk-s4);
	background: var(--dk-ink);
	color: var(--dk-ink-300);
	border-radius: 12px;
	font-size: var(--dk-t-sm);
	line-height: 1.45;
}
.dk-summary__cod strong { display: block; color: var(--dk-white); font-size: var(--dk-t-base); margin-bottom: 2px; }
.dk-summary__codicon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 198, 39, 0.14);
	color: var(--dk-yellow);
}

.dk-commerce .wc-proceed-to-checkout { margin: 0 0 var(--dk-s4); padding: 0; }
.dk-commerce .wc-proceed-to-checkout .checkout-button {
	border-radius: 12px;
	font-size: 1.1875rem;
	padding-block: 1em;
	box-shadow: 0 12px 26px -14px rgba(232, 162, 0, 0.9);
}

.dk-summary__trust {
	list-style: none;
	margin: 0;
	padding: var(--dk-s4) 0 0;
	border-top: var(--dk-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--dk-t-sm);
	color: var(--dk-ink-500);
}
.dk-summary__trust li { display: flex; align-items: center; gap: 8px; }
.dk-summary__trust svg { color: var(--dk-yellow-700); flex: none; }

/* WooCommerce blocks the totals with an overlay during AJAX: make it a soft
   veil with a sweeping sheen instead of a flat grey slab. */
.dk-commerce .blockUI.blockOverlay {
	background: rgba(250, 248, 243, 0.62) !important;
	opacity: 1 !important;
	border-radius: 16px;
	overflow: hidden;
}
.dk-commerce .blockUI.blockOverlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
	animation: dk-sheen 1s linear infinite;
}
@keyframes dk-sheen {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* --- cross-sells under the cart --- */

.dk-commerce .cross-sells { margin-top: var(--dk-s9); }
.dk-commerce .cross-sells > h2 { font-size: var(--dk-d-md); margin-bottom: var(--dk-s5); }

/* ===============================================================
 * Empty cart
 * ============================================================= */

.dk-empty {
	max-width: 640px;
	margin: var(--dk-s6) auto 0;
	padding: var(--dk-s8) var(--dk-s6);
	text-align: center;
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 20px;
	animation: dk-in 0.55s var(--dk-ease) backwards;
}
.dk-empty__icon {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	margin: 0 auto var(--dk-s5);
	background: var(--dk-yellow);
	color: var(--dk-ink);
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
	animation: dk-empty-bob 3.2s var(--dk-ease) infinite;
}
@keyframes dk-empty-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(-6px) rotate(-3deg); }
}
.dk-empty__title { font-size: var(--dk-d-md); margin: 0 0 var(--dk-s2); }
.dk-empty__text { color: var(--dk-ink-500); margin: 0 auto var(--dk-s5); max-width: 44ch; }
.dk-empty__rayons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: var(--dk-s6) 0 0;
	padding: var(--dk-s5) 0 0;
	border-top: var(--dk-border);
}
.dk-empty__rayons a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: var(--dk-border);
	border-radius: 99px;
	font-size: var(--dk-t-sm);
	font-weight: 600;
	color: var(--dk-ink);
	text-decoration: none;
	transition: background var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease);
}
.dk-empty__rayons a:hover { background: var(--dk-yellow-050); border-color: var(--dk-yellow); }
.dk-empty__rayons svg { color: var(--dk-yellow-700); }

/* ===============================================================
 * CHECKOUT
 * ============================================================= */

/* Login and coupon toggles sit above the form as one slim row. */
.dk-commerce .woocommerce-form-login-toggle,
.dk-commerce .woocommerce-form-coupon-toggle { display: inline-block; margin-right: var(--dk-s3); }
.dk-commerce .woocommerce-form-login-toggle .woocommerce-info,
.dk-commerce .woocommerce-form-coupon-toggle .woocommerce-info {
	display: inline-flex;
	gap: 6px;
	padding: 10px 16px;
	margin: 0 0 var(--dk-s4);
	border: var(--dk-border);
	border-radius: 99px;
	background: var(--dk-white);
	font-size: var(--dk-t-sm);
}
.dk-commerce .woocommerce-form-login-toggle .woocommerce-info::before,
.dk-commerce .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.dk-commerce form.login,
.dk-commerce form.checkout_coupon {
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 16px;
	padding: var(--dk-s5);
	margin-bottom: var(--dk-s5);
}

.dk-commerce form.dk-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	gap: var(--dk-s6);
	align-items: start;
}
.dk-checkout__main { min-width: 0; }
.dk-checkout__details { display: flex; flex-direction: column; gap: var(--dk-s4); }
.dk-checkout__details > div { display: flex; flex-direction: column; gap: var(--dk-s4); }

/* Numbered sections. */
.dk-fstep {
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 16px;
	padding: var(--dk-s5) var(--dk-s5) var(--dk-s2);
	transition: border-color var(--dk-dur-slow) var(--dk-ease), box-shadow var(--dk-dur-slow) var(--dk-ease);
	animation: dk-in 0.55s var(--dk-ease) backwards;
	animation-delay: calc(var(--dk-i, 0) * 110ms + 100ms);
}
/* The section being filled in lifts slightly and its number lights up. */
.dk-fstep:focus-within {
	border-color: var(--dk-ink-300);
	box-shadow: 0 18px 40px -28px rgba(18, 20, 26, 0.45);
}
.dk-fstep__head {
	display: flex;
	gap: var(--dk-s3);
	align-items: flex-start;
	margin-bottom: var(--dk-s5);
}
.dk-fstep__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dk-paper-2);
	color: var(--dk-ink);
	font-family: var(--dk-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	transition: background var(--dk-dur-slow) var(--dk-ease), transform var(--dk-dur-slow) var(--dk-ease);
}
.dk-fstep:focus-within .dk-fstep__num { background: var(--dk-yellow); transform: scale(1.08); }
.dk-fstep__title { margin: 4px 0 2px; font-size: 1.375rem; line-height: 1.1; }
.dk-fstep__opt {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dk-text-faint);
	vertical-align: middle;
	margin-left: 6px;
}
.dk-fstep__hint { margin: 0; font-size: var(--dk-t-sm); color: var(--dk-ink-500); }

/* Two-column field grid. Replaces the float layout in shop.css, which could
   not keep Prénom and Nom level once a description line appeared under one. */
.dk-commerce .dk-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--dk-s4);
}
.dk-commerce .dk-fields::after { display: none; }
.dk-commerce .dk-fields .form-row {
	float: none;
	width: auto;
	grid-column: 1 / -1;
	margin: 0 0 var(--dk-s4);
}
.dk-commerce .dk-fields .form-row-first { grid-column: 1; }
.dk-commerce .dk-fields .form-row-last { grid-column: 2; }
.dk-commerce .dk-hidden-field { display: none !important; }

.dk-commerce .form-row .input-text,
.dk-commerce .form-row select,
.dk-commerce .form-row textarea {
	width: 100%;
	border-radius: 10px;
	background: var(--dk-paper);
	transition: border-color var(--dk-dur) var(--dk-ease), background var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
}
.dk-commerce .form-row .input-text:hover,
.dk-commerce .form-row textarea:hover { border-color: var(--dk-ink-400); }
.dk-commerce .form-row .input-text:focus,
.dk-commerce .form-row textarea:focus {
	background: var(--dk-white);
	border-color: var(--dk-ink);
	box-shadow: 0 0 0 4px rgba(255, 198, 39, 0.35);
	outline: none;
}
.dk-commerce .form-row textarea { min-height: 110px; resize: vertical; }
.dk-commerce .form-row label .optional { text-transform: none; letter-spacing: 0; color: var(--dk-text-faint); }

/* Inline validation states that WooCommerce toggles on each field. */
.dk-commerce .form-row.woocommerce-invalid .input-text,
.dk-commerce .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--dk-red) !important;
	background: #fff8f7;
	animation: dk-shake 0.36s var(--dk-ease);
}
.dk-commerce .form-row.woocommerce-invalid label { color: var(--dk-red); }
.dk-commerce .form-row.woocommerce-validated .input-text {
	border-color: var(--dk-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e7f3c' stroke-width='2.4'%3E%3Cpath d='m4.4 12.4 5 5 10.2-10.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 38px;
}
@keyframes dk-shake {
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

/* Gouvernorat — WooCommerce enhances it with selectWoo (Select2). */
.dk-commerce .select2-container { width: 100% !important; }
.dk-commerce .select2-container .select2-selection--single {
	height: auto;
	min-height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid var(--dk-line-strong);
	border-radius: 10px;
	background: var(--dk-paper);
	transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
}
.dk-commerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	line-height: 1.4;
	font-size: var(--dk-t-base);
	color: var(--dk-ink);
}
.dk-commerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	height: 20px;
	width: 20px;
	transform: translateY(-50%);
}
.dk-commerce .select2-container--open .select2-selection--single,
.dk-commerce .select2-container--focus .select2-selection--single {
	border-color: var(--dk-ink);
	background: var(--dk-white);
	box-shadow: 0 0 0 4px rgba(255, 198, 39, 0.35);
}
/* The dropdown is appended to <body>, outside .dk-commerce. */
.select2-dropdown {
	border: 1px solid var(--dk-ink) !important;
	border-radius: 10px !important;
	overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(18, 20, 26, 0.4);
	animation: dk-in 0.18s var(--dk-ease);
}
.select2-search--dropdown .select2-search__field {
	border: 1px solid var(--dk-line-strong) !important;
	border-radius: 8px;
	padding: 8px 10px !important;
}
.select2-results__option { padding: 9px 14px !important; font-size: var(--dk-t-base); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--dk-yellow) !important;
	color: var(--dk-ink) !important;
}

/* Checkboxes (create account). */
.dk-check {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: var(--dk-font-sans) !important;
	font-size: var(--dk-t-base) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--dk-ink) !important;
	cursor: pointer;
}
.dk-check input { width: 20px; height: 20px; accent-color: var(--dk-ink); margin: 0; }
.dk-account-opt {
	padding: var(--dk-s4) var(--dk-s5);
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 16px;
}
.dk-account-opt .form-row { margin: 0; }

/* --- order review (checkout summary) --- */

.dk-commerce #order_review_heading { margin: 0 0 var(--dk-s4); font-size: var(--dk-d-sm); }

/* Undo shop.css: that sheet made the review its own sticky card; the card is
   now .dk-summary around it, and stickiness lives on the column. */
.dk-commerce .woocommerce-checkout-review-order {
	position: static;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.dk-commerce .dk-review tbody td { border-bottom: 1px solid var(--dk-line); padding-block: var(--dk-s3); vertical-align: middle; }
.dk-commerce .dk-review tbody td.product-name { text-align: left; font-family: var(--dk-font-sans); }
.dk-review__item { display: flex; gap: var(--dk-s3); align-items: center; }
.dk-review__thumb { position: relative; flex: none; }
.dk-review__thumb img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: var(--dk-border);
	background: var(--dk-paper-2);
}
.dk-review__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--dk-ink);
	color: var(--dk-yellow);
	font-family: var(--dk-font-mono);
	font-size: 11px;
	font-weight: 600;
	box-shadow: 0 0 0 2px var(--dk-white);
}
.dk-review__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-review__name { font-weight: 600; color: var(--dk-ink); line-height: 1.3; font-size: var(--dk-t-sm); }
.dk-review__unit { font-family: var(--dk-font-mono); font-size: var(--dk-t-2xs); color: var(--dk-text-faint); }

/* --- payment --- */

.dk-commerce #payment { background: none; border-radius: 0; }
.dk-commerce #payment ul.payment_methods {
	border: 0;
	margin: 0 0 var(--dk-s4);
	display: flex;
	flex-direction: column;
	gap: var(--dk-s2);
}
.dk-commerce #payment ul.payment_methods li {
	position: relative;
	padding: var(--dk-s3) var(--dk-s4);
	border: 1.5px solid var(--dk-line-strong);
	border-radius: 12px;
	background: var(--dk-white);
	transition: border-color var(--dk-dur) var(--dk-ease), background var(--dk-dur) var(--dk-ease);
}
/* A method that is chosen (the only one, here) reads as selected. */
.dk-commerce #payment ul.payment_methods li:has(input:checked),
.dk-commerce #payment ul.payment_methods li:only-child {
	border-color: var(--dk-ink);
	background: var(--dk-yellow-050);
}
.dk-commerce #payment ul.payment_methods li > input[type='radio'] {
	accent-color: var(--dk-ink);
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	vertical-align: middle;
}
.dk-commerce #payment ul.payment_methods li:only-child > input[type='radio'] { display: none; }
.dk-commerce #payment ul.payment_methods li label {
	font-size: 1.0625rem;
}
.dk-commerce #payment ul.payment_methods li:only-child label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 4px;
	border-radius: 50%;
	background: var(--dk-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffc627' stroke-width='3.4'%3E%3Cpath d='m4.4 12.4 5 5 10.2-10.4'/%3E%3C/svg%3E") center / 12px no-repeat;
	vertical-align: -3px;
}
.dk-commerce #payment .payment_box {
	background: transparent;
	border: 0;
	padding: 4px 0 0;
	margin: 0;
	font-size: var(--dk-t-sm);
	color: var(--dk-ink-600);
}
.dk-commerce #payment .payment_box::before { display: none; }
.dk-commerce #payment .place-order { padding: 0; margin: 0; }
.dk-commerce .woocommerce-privacy-policy-text p {
	font-size: var(--dk-t-xs);
	line-height: 1.5;
	color: var(--dk-text-faint);
	margin: 0 0 var(--dk-s4);
}
.dk-commerce .woocommerce-privacy-policy-text a { color: var(--dk-ink-600); }

/* Place order — yellow, with a spinner while WooCommerce processes. */
.dk-commerce #place_order {
	--btn-bg: var(--dk-yellow);
	--btn-fg: var(--dk-ink);
	--btn-bd: var(--dk-yellow);
	position: relative;
	width: 100%;
	border-radius: 12px;
	padding-block: 1em;
	font-size: 1.1875rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border-color: var(--btn-bd);
	box-shadow: 0 12px 26px -14px rgba(232, 162, 0, 0.9);
}
.dk-commerce #place_order:hover { --btn-bg: #ffd45c; --btn-bd: #ffd45c; }
.dk-commerce form.checkout.processing #place_order { color: transparent; pointer-events: none; }
.dk-commerce form.checkout.processing #place_order svg { opacity: 0; }
.dk-commerce form.checkout.processing #place_order::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(18, 20, 26, 0.25);
	border-top-color: var(--dk-ink);
	border-radius: 50%;
	animation: dk-spin 0.62s linear infinite;
}

.dk-checkout__back { margin-top: var(--dk-s4); }

/* ===============================================================
 * Responsive
 * ============================================================= */

@media (max-width: 1080px) {
	.dk-cart,
	.dk-commerce form.dk-checkout { grid-template-columns: 1fr; }
	.dk-cart__side,
	.dk-checkout__side { position: static; }
	.dk-cart__side { max-width: 560px; width: 100%; margin-left: auto; }
}

@media (max-width: 760px) {
	.dk-commerce__headin { flex-direction: column; align-items: stretch; }
	.dk-steps { max-width: none; flex-basis: auto; }
	.dk-steps__label { font-size: 10px; letter-spacing: 0.06em; }

	.dk-cartlist__actions { padding: var(--dk-s4); }
	.dk-coupon { max-width: none; }

	.dk-fstep { padding: var(--dk-s4) var(--dk-s4) var(--dk-s1); }
	.dk-commerce .dk-fields { grid-template-columns: 1fr; }
	.dk-commerce .dk-fields .form-row-first,
	.dk-commerce .dk-fields .form-row-last { grid-column: 1; }
}

/* ===============================================================
 * Reduced motion
 * ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.dk-steps__list::after,
	.is-current .dk-steps__dot,
	.dk-line,
	.dk-cart__side,
	.dk-checkout__side,
	.dk-fstep,
	.dk-empty,
	.dk-empty__icon,
	.dk-commerce .woocommerce-message,
	.dk-commerce .woocommerce-info,
	.dk-commerce .woocommerce-error,
	.dk-flash,
	.select2-dropdown,
	.dk-commerce .form-row.woocommerce-invalid .input-text,
	.dk-commerce .blockUI.blockOverlay::after { animation: none !important; }
	.dk-line.is-removing { animation: none; opacity: 0.3; }
	.dk-line:hover .dk-line__media img,
	.dk-fstep:focus-within .dk-fstep__num,
	a.dk-steps__link:hover .dk-steps__dot { transform: none; }
}

/* Rows re-inserted by an AJAX update appear in place, without the entrance. */
.dk-settled .dk-line { animation: none; }

/* ===============================================================
 * Fixes after first render
 * ============================================================= */

/* Delivery line: figure, then a small explanation beneath it. */
.dk-ship { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dk-ship__price { font-family: var(--dk-font-mono); font-weight: 600; color: var(--dk-ink); }
.dk-ship__note {
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-xs);
	font-weight: 400;
	color: var(--dk-text-faint);
	white-space: nowrap;
}

/* On the cart the destination is WooCommerce's default guess, not the
   customer's address yet — it would read as a promise. Shown at checkout,
   where it follows the gouvernorat the customer picks. */
.dk-cart .woocommerce-shipping-destination { display: none; }

/* Review table: the product cell takes the room, the amount column hugs its
   figures, so names no longer wrap word by word. */
.dk-commerce .dk-review td.product-name { width: 100%; }
.dk-commerce .dk-review td.product-total,
.dk-commerce .dk-review tfoot td { white-space: nowrap; padding-left: var(--dk-s3); }

/* Terms checkbox: a sentence, not a field label. */
.dk-commerce .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 0 var(--dk-s4); }
.dk-commerce .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dk-ink-600);
	line-height: 1.45;
	cursor: pointer;
}
.dk-commerce .woocommerce-terms-and-conditions-wrapper input[type='checkbox'] {
	flex: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--dk-ink);
}
.dk-commerce .woocommerce-terms-and-conditions-wrapper a { color: var(--dk-ink); font-weight: 600; }

/* ===============================================================
 * ORDER CONFIRMATION
 * ============================================================= */

.dk-thanks__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	gap: var(--dk-s6);
	align-items: start;
}
.dk-thanks__main { display: flex; flex-direction: column; gap: var(--dk-s5); min-width: 0; }

/* --- success card --- */

.dk-thanks__hero {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--dk-s4) var(--dk-s5);
	padding: var(--dk-s6);
	background: var(--dk-ink);
	color: var(--dk-ink-300);
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	animation: dk-in 0.55s var(--dk-ease) backwards;
}
/* Warm light behind the tick, echoing the homepage hero. */
.dk-thanks__hero::before {
	content: '';
	position: absolute;
	top: -60%;
	left: -20%;
	width: 70%;
	height: 200%;
	background: radial-gradient(ellipse at center, rgba(255, 198, 39, 0.2), transparent 62%);
	z-index: -1;
}

/* Tick drawn in: the ring closes, then the check strokes on. */
.dk-thanks__check { width: 76px; height: 76px; flex: none; }
.dk-thanks__ring {
	fill: none;
	stroke: var(--dk-yellow);
	stroke-width: 3;
	stroke-dasharray: 183;
	stroke-dashoffset: 183;
	transform: rotate(-90deg);
	transform-origin: center;
	animation: dk-draw 0.7s 0.25s var(--dk-ease) forwards;
}
.dk-thanks__tick {
	fill: none;
	stroke: var(--dk-yellow);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 44;
	stroke-dashoffset: 44;
	animation: dk-draw 0.45s 0.85s var(--dk-ease) forwards;
}
@keyframes dk-draw { to { stroke-dashoffset: 0; } }

.dk-thanks__eyebrow {
	margin: 0 0 6px;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dk-yellow);
}
.dk-thanks__title {
	margin: 0 0 var(--dk-s2);
	font-size: var(--dk-d-lg);
	line-height: 1;
	color: var(--dk-white);
}
.dk-thanks__lead { margin: 0; max-width: 52ch; font-size: var(--dk-t-md); line-height: 1.55; }
.dk-thanks__lead strong { color: var(--dk-white); white-space: nowrap; }

.dk-commerce .dk-thanks__facts {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: var(--dk-s2) 0 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	overflow: hidden;
}
.dk-commerce .dk-thanks__facts li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--dk-s3) var(--dk-s4);
	margin: 0;
	border: 0;
	background: var(--dk-ink);
	font-size: inherit;
	text-transform: none;
}
.dk-thanks__facts span {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dk-ink-400);
}
.dk-thanks__facts strong {
	font-family: var(--dk-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--dk-white);
}
.dk-thanks__facts .total strong { color: var(--dk-yellow); }

/* --- what happens next --- */

.dk-thanks__next {
	padding: var(--dk-s5) var(--dk-s6);
	background: var(--dk-white);
	border: var(--dk-border);
	border-radius: 20px;
	animation: dk-in 0.55s 0.15s var(--dk-ease) backwards;
}
.dk-thanks__subtitle { margin: 0 0 var(--dk-s5); font-size: var(--dk-d-sm); }

.dk-timeline { list-style: none; margin: 0; padding: 0; }
.dk-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--dk-s4);
	padding-bottom: var(--dk-s5);
	animation: dk-in 0.5s var(--dk-ease) backwards;
	animation-delay: calc(var(--dk-i, 0) * 140ms + 450ms);
}
.dk-timeline__item:last-child { padding-bottom: 0; }
/* Dotted rail connecting the icons. */
.dk-timeline__item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 21px;
	top: 46px;
	bottom: 4px;
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--dk-line-strong) 0 5px, transparent 5px 10px);
}
.dk-timeline__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dk-paper-2);
	color: var(--dk-ink-500);
	border: 2px solid var(--dk-line);
}
.dk-timeline__item.is-active .dk-timeline__icon {
	background: var(--dk-yellow);
	border-color: var(--dk-yellow);
	color: var(--dk-ink);
	animation: dk-step-pulse 2.4s 1.4s var(--dk-ease) infinite;
}
.dk-timeline__item strong { display: block; margin: 9px 0 4px; font-size: var(--dk-t-md); color: var(--dk-ink); }
.dk-timeline__item p { margin: 0; font-size: var(--dk-t-sm); color: var(--dk-ink-500); line-height: 1.5; }
.dk-timeline__item p strong { display: inline; margin: 0; font-size: inherit; font-family: var(--dk-font-mono); }

.dk-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dk-s3);
	animation: dk-in 0.5s 1s var(--dk-ease) backwards;
}

/* --- order details card (WooCommerce's order-details templates) --- */

.dk-thanks__side {
	position: sticky;
	top: calc(var(--dk-header-h, 80px) + var(--dk-s4));
	animation: dk-in 0.55s 0.3s var(--dk-ease) backwards;
}
/* Cash-on-delivery instructions printed by the gateway. */
.dk-summary--order > p:first-child {
	margin: 0 0 var(--dk-s4);
	padding: var(--dk-s3) var(--dk-s4);
	background: var(--dk-yellow-050);
	border: 1px solid var(--dk-yellow);
	border-radius: 10px;
	font-size: var(--dk-t-sm);
	color: var(--dk-ink-700);
}
.dk-summary--order .woocommerce-order-details,
.dk-summary--order .woocommerce-customer-details { margin: 0; }
.dk-summary--order h2 {
	margin: 0 0 var(--dk-s3);
	font-size: var(--dk-d-xs);
}
.dk-commerce .dk-summary--order table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	background: none;
	margin: 0 0 var(--dk-s5);
}
.dk-commerce .dk-summary--order table.shop_table thead { display: none; }
.dk-commerce .dk-summary--order table.shop_table th,
.dk-commerce .dk-summary--order table.shop_table td {
	padding: var(--dk-s2) 0;
	border: 0;
	border-bottom: 1px dashed var(--dk-line);
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dk-ink-600);
	vertical-align: top;
}
.dk-commerce .dk-summary--order table.shop_table td:last-child {
	text-align: right;
	font-family: var(--dk-font-mono);
	color: var(--dk-ink);
	white-space: nowrap;
	padding-left: var(--dk-s3);
}
.dk-commerce .dk-summary--order td.product-name a { color: var(--dk-ink); font-weight: 600; text-decoration: none; }
.dk-commerce .dk-summary--order .product-quantity { font-weight: 600; color: var(--dk-ink-500); }
/* The order total is the second-to-last footer row, above the payment method. */
.dk-commerce .dk-summary--order tfoot tr:nth-last-child(2) th,
.dk-commerce .dk-summary--order tfoot tr:nth-last-child(2) td {
	font-family: var(--dk-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--dk-ink);
	text-transform: uppercase;
	border-bottom: 1px solid var(--dk-line);
}
.dk-commerce .dk-summary--order tfoot small { font-family: var(--dk-font-sans); color: var(--dk-text-faint); }
.dk-summary--order .woocommerce-customer-details address {
	margin: 0;
	padding: var(--dk-s3) var(--dk-s4);
	background: var(--dk-paper);
	border: var(--dk-border);
	border-radius: 10px;
	font-style: normal;
	line-height: 1.6;
	color: var(--dk-ink-700);
}
.dk-summary--order .woocommerce-customer-details--phone,
.dk-summary--order .woocommerce-customer-details--email {
	margin: var(--dk-s2) 0 0;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-sm);
}

@media (max-width: 1080px) {
	.dk-thanks__grid { grid-template-columns: 1fr; }
	.dk-thanks__side { position: static; }
}
@media (max-width: 640px) {
	.dk-thanks__hero { grid-template-columns: 1fr; padding: var(--dk-s5); }
	.dk-thanks__check { width: 60px; height: 60px; }
	.dk-commerce .dk-thanks__facts { grid-template-columns: 1fr; }
	.dk-thanks__next { padding: var(--dk-s5) var(--dk-s4); }
	.dk-thanks__actions .dk-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.dk-thanks__hero,
	.dk-thanks__next,
	.dk-thanks__side,
	.dk-thanks__actions,
	.dk-timeline__item,
	.dk-timeline__item.is-active .dk-timeline__icon { animation: none; }
	.dk-thanks__ring,
	.dk-thanks__tick { animation: none; stroke-dashoffset: 0; }
}

/* shop.css caps .woocommerce-order at 760px for the old single-column
   confirmation; the two-column layout needs the full container. */
.dk-commerce .woocommerce-order.dk-thanks { max-width: none; }

/* shop.css styles `ul.woocommerce-order-overview li strong` in ink, which is
   more specific than .dk-thanks__facts strong and made the order number and date
   invisible on the dark card. Re-state them at a higher specificity. */
.dk-commerce ul.dk-thanks__facts li strong {
	display: block;
	margin: 0;
	font-family: var(--dk-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--dk-white);
}
.dk-commerce ul.dk-thanks__facts li.total strong { color: var(--dk-yellow); }
.dk-commerce ul.dk-thanks__facts li strong * { font: inherit; color: inherit; }

/* Order card: product names read left to right, quantity inline. */
.dk-commerce .dk-summary--order td.product-name { text-align: left; }
.dk-commerce .dk-summary--order td.product-name .product-quantity { white-space: nowrap; }

/* On a phone the login / coupon prompts wrap onto two lines; a fully rounded
   pill then turns into a lopsided blob. Full-width cards instead. */
@media (max-width: 760px) {
	.dk-commerce .woocommerce-form-login-toggle,
	.dk-commerce .woocommerce-form-coupon-toggle { display: block; margin-right: 0; }
	.dk-commerce .woocommerce-form-login-toggle .woocommerce-info,
	.dk-commerce .woocommerce-form-coupon-toggle .woocommerce-info {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 6px;
		width: 100%;
		border-radius: 12px;
		margin-bottom: var(--dk-s2);
	}
}

/* Cart items as cards up to tablet width. At 761–900px (tablet portrait) the
   six-column desktop row squeezed product names to four lines. The bin column
   is 44px to fit the enlarged touch target from mobile.css. */
@media (max-width: 900px) {
	.dk-cartlist__head { display: none; }
	/* Card per item: picture | details | bin, then quantity and total beneath. */
	.dk-line {
		grid-template-columns: 72px minmax(0, 1fr) 44px;
		grid-template-areas:
			'media info remove'
			'media qty  total';
		gap: var(--dk-s2) var(--dk-s3);
		padding: var(--dk-s4);
	}
	.dk-line__media { grid-area: media; align-self: start; }
	.dk-line__media img { width: 72px; height: 72px; }
	.dk-line__info { grid-area: info; }
	.dk-line__price { display: none; }
	.dk-line__qty { grid-area: qty; }
	.dk-line__total { grid-area: total; grid-column: 2 / 4; justify-self: end; align-self: center; }
	.dk-line__remove { grid-area: remove; align-self: start; }

}