/**
 * Deer Edge — Full-screen, Shopify-style two-panel checkout
 * ---------------------------------------------------------------------------
 * Scoped, checkout-only styles for the child-theme override of
 * woocommerce/checkout/form-checkout.php + review-order.php.
 *
 * LAYOUT MODEL (the real Shopify look)
 *   .de-checkout is an edge-to-edge FLEX ROW, min-height:100vh. Each panel's
 *   BACKGROUND runs to the viewport edge; the CONTENT sits in a centered
 *   max-width wrapper (.de-checkout__inner) that hugs the middle gutter:
 *     - .de-checkout__main  (LEFT, white)  justify-content:flex-end,
 *       inner max-width ~600px  → the form (#customer_details)
 *     - .de-checkout__aside (RIGHT, tint)  justify-content:flex-start,
 *       inner max-width ~440px  → the summary (#order_review) + payment
 *
 *   The brand logo (page-checkout.php) sits at the TOP of the LEFT panel,
 *   aligned to the form wrapper. A split-background bar mirrors the two panels
 *   above the fold so the tint reaches the top edge on the right.
 *
 * Loaded via functions.php on the classic checkout form only (handle
 * "de-checkout", depends on "mrtailor-parent"). Fonts are inherited from the
 * theme: Inter for body/UI, Georgia for headings/logo.
 */

/* --------------------------------------------------------------------------
 * Design tokens (reused from the live site)
 * ------------------------------------------------------------------------ */
:root {
	/* Forge & Ember (matches assets/brand.css so checkout is coherent). */
	--de-text:       #33312e;   /* body copy (warm ink)             */
	--de-heading:    #1c1b1a;   /* headings + logo (iron)           */
	--de-btn:        #1c1b1a;   /* primary button background (iron) */
	--de-btn-hover:  #000;      /* primary button hover             */
	--de-gold:       #a67c3d;   /* accent (brass)                   */
	--de-navy:       #c9541f;   /* field focus / links (ember)      */
	--de-border:     #ddd3c4;   /* hairline borders (warm)          */
	--de-paper:      #fdfbf7;   /* left panel / cards (near-bone)   */
	--de-tint:       #f4ede1;   /* right panel (parchment)          */
	--de-muted:      #6b6f76;   /* secondary text (steel)           */
	--de-radius-sm:  2px;       /* fields + primary button          */
	--de-radius-md:  6px;       /* media thumbs / cards             */

	/* Panel proportions. Content columns are centered inside each half. */
	--de-main-w:     600px;     /* left inner wrapper max-width      */
	--de-aside-w:    440px;     /* right inner wrapper max-width     */
	--de-gutter:     56px;      /* space from the centre seam        */
	--de-pad-y:      48px;      /* vertical breathing room in panels */
}

/* --------------------------------------------------------------------------
 * Page reset for the standalone checkout document
 * ------------------------------------------------------------------------ */
body.de-co-body {
	margin: 0;
	/* Page is white; ONLY the right order-summary panel is tinted. This is what
	   makes the checkout read as one page (a white page with a summary panel)
	   rather than two tinted screens split down the middle. */
	background: var(--de-paper);
	color: var(--de-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.de-co-body *,
.de-co-body *::before,
.de-co-body *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Brand bar — ONE full-width header spanning the whole page, capping the two
 * columns below so the checkout reads as a single page (not two split screens).
 * Logo far left, "Secure checkout" far right, single background + bottom rule.
 * (The old design split this bar white|tint to mirror the columns, which made
 * the centre seam run from the very top edge — the "two screens" effect.)
 * ------------------------------------------------------------------------ */
.de-co-brand {
	display: flex;
	align-items: center;
	background: var(--de-paper);
	border-bottom: 1px solid var(--de-border);
}

/* Full-width band; __in holds logo + secure across the whole header. */
.de-co-brand__main {
	flex: 1 1 100%;
	background: transparent;
	display: flex;
	justify-content: center;
	padding: 22px var(--de-gutter);
}

/* The tint right-half of the header is gone — the header is one band now. */
.de-co-brand__aside { display: none; }

.de-co-brand__in {
	width: 100%;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.de-co-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}

.de-co-logo--text span {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: var(--de-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.de-co-logo:hover,
.de-co-logo:focus { text-decoration: none; }

.de-co-logo--image img,
.de-co-logo--image .custom-logo {
	display: block;
	max-height: 40px;
	width: auto;
	height: auto;
}
/* Inline brand SVG logo (the animated stag mark). currentColor -> iron. */
.de-co-logo--image svg,
.de-co-logo--image .de-logo {
	display: block;
	height: 38px;
	width: auto;
	color: var(--de-heading);
}

/* Secure lock — quiet, sits at the top-right of the LEFT panel (at the seam). */
.de-co-secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--de-muted);
	white-space: nowrap;
}

.de-co-secure__lock { color: var(--de-gold); flex: none; }

/* --------------------------------------------------------------------------
 * Two-panel shell
 * ------------------------------------------------------------------------ */
.de-co-main {
	color: var(--de-text);
}

.de-checkout {
	display: flex;
	align-items: stretch;
	min-height: calc( 100vh - 94px ); /* fill viewport under the brand bar */
	width: 100%;
}

/* LEFT — white, content hugs the seam (flex-end). */
.de-checkout__main {
	flex: 1 1 50%;
	background: var(--de-paper);
	display: flex;
	justify-content: flex-end;
	padding: var(--de-pad-y) var(--de-gutter) 72px;
}

/* RIGHT — tint + 1px left border, content hugs the seam (flex-start). */
.de-checkout__aside {
	flex: 1 1 50%;
	background: var(--de-tint);
	border-left: 1px solid var(--de-border);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--de-pad-y) var(--de-gutter) 72px;
}

/* Centered content wrappers hugging the middle gutter. */
.de-checkout__main .de-checkout__inner {
	width: 100%;
	max-width: var(--de-main-w);
}

.de-checkout__aside .de-checkout__inner {
	width: 100%;
	max-width: var(--de-aside-w);
	/* Sticky summary as the form scrolls (fine per spec). */
	position: sticky;
	top: var(--de-pad-y);
}

/* --------------------------------------------------------------------------
 * Headings + type
 * ------------------------------------------------------------------------ */
.de-checkout h1,
.de-checkout h2,
.de-checkout h3 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--de-heading);
	font-weight: 600;
}

.de-checkout__main h3 {
	font-size: 19px;
	line-height: 1.25;
	margin: 0 0 18px;
	letter-spacing: 0.01em;
}

/* Space the billing / shipping blocks generously. */
.de-checkout__main .col2-set .col-1 { margin: 0 0 40px; }
.de-checkout__main .col2-set .col-2 { margin: 0; }

.de-checkout__main .col2-set .col-1,
.de-checkout__main .col2-set .col-2 {
	width: 100%;
	float: none;
	padding: 0;
}

#order_review_heading {
	margin: 0 0 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	line-height: 1.2;
	color: var(--de-heading);
}

.de-checkout a { color: var(--de-navy); }
.de-checkout a:hover { color: var(--de-btn-hover); }

/* --------------------------------------------------------------------------
 * Shopify-style summary line items (.de-sum-list, from review-order.php)
 * ------------------------------------------------------------------------ */
.de-sum-list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.de-sum-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 14px 0;
	border-bottom: 1px solid var(--de-border);
}

.de-sum-item:first-child { padding-top: 0; }

.de-sum-item__media {
	position: relative;
	flex: none;
	width: 58px;
	height: 58px;
}

.de-sum-item__img,
.de-sum-item__media img {
	display: block;
	width: 58px;
	height: 58px;
	object-fit: cover;
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-md);
	background: var(--de-paper);
}

/* Quantity badge — small rounded pill at the top-right of the thumbnail. */
.de-sum-item__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--de-muted);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--de-tint);
}

.de-sum-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

.de-sum-item__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--de-heading);
}

.de-sum-item__meta,
.de-sum-item__meta p {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--de-muted);
}
.de-sum-item__meta dl { margin: 3px 0 0; font-size: 12.5px; color: var(--de-muted); }
.de-sum-item__meta dt { font-weight: 600; display: inline; margin: 0; }
.de-sum-item__meta dd { display: inline; margin: 0 0 0 4px; }

.de-sum-item__price {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--de-heading);
	white-space: nowrap;
	padding-left: 8px;
}

/* Editable summary (one-step checkout): qty stepper + remove per line. */
.de-sum-item__edit {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 9px;
}
.de-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-md);
	background: var(--de-paper);
	overflow: hidden;
}
.de-qty__btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	width: 30px;
	height: 30px;
	font-size: 16px;
	line-height: 1;
	color: var(--de-heading);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.de-qty__btn:hover:not(:disabled) { background: var(--de-tint); color: var(--de-ember, #c9541f); }
.de-qty__btn:disabled { opacity: .4; cursor: default; }
.de-qty__n {
	min-width: 32px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--de-heading);
	font-variant-numeric: tabular-nums;
}
.de-sum-item__remove {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	font-size: 12.5px;
	color: var(--de-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease;
}
.de-sum-item__remove:hover { color: var(--de-ember, #c9541f); }

/* Dim + lock the summary while the cart mutates and the checkout re-renders. */
.woocommerce-checkout-review-order.de-updating {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* --------------------------------------------------------------------------
 * Totals table — reused core markup. Hide the redundant product thead/tbody
 * (the .de-sum-list now shows line items) and style the tfoot totals rows.
 * ------------------------------------------------------------------------ */
.de-checkout__aside .woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	border-collapse: collapse;
}

.de-checkout__aside .woocommerce-checkout-review-order-table thead,
.de-checkout__aside .woocommerce-checkout-review-order-table tbody {
	display: none; /* line items are rendered by .de-sum-list above */
}

.de-checkout__aside .woocommerce-checkout-review-order-table tfoot { display: table; width: 100%; }
.de-checkout__aside .woocommerce-checkout-review-order-table tfoot tr { display: table-row; }

.de-checkout__aside .woocommerce-checkout-review-order-table tfoot th,
.de-checkout__aside .woocommerce-checkout-review-order-table tfoot td {
	border: 0;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--de-text);
	background: transparent;
	text-align: left;
}

.de-checkout__aside .woocommerce-checkout-review-order-table tfoot td { text-align: right; }

.de-checkout__aside .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.de-checkout__aside .woocommerce-checkout-review-order-table tfoot tr:first-child td {
	padding-top: 4px;
}

.de-checkout__aside .cart-discount th,
.de-checkout__aside .cart-discount td { color: var(--de-gold); }

/* Order total — heavier, ruled off above. */
.de-checkout__aside .order-total th,
.de-checkout__aside .order-total td {
	border-top: 1px solid var(--de-border);
	padding-top: 16px;
	margin-top: 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--de-heading);
}

.de-checkout__aside .order-total .amount { color: var(--de-heading); }

/* Shipping rows read comfortably. */
.de-checkout__aside .woocommerce-shipping-totals th { font-weight: 400; }
.de-checkout__aside #shipping_method { margin: 4px 0 0; padding: 0; list-style: none; }
.de-checkout__aside #shipping_method li { margin: 0 0 6px; font-size: 13.5px; }

/* --------------------------------------------------------------------------
 * Form fields — full width, hairline border, subtle focus
 * ------------------------------------------------------------------------ */
.de-checkout .input-text,
.de-checkout input[type="text"],
.de-checkout input[type="email"],
.de-checkout input[type="tel"],
.de-checkout input[type="password"],
.de-checkout input[type="number"],
.de-checkout textarea,
.de-checkout select,
.de-checkout .select2-container .select2-selection {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-sm);
	padding: 14px 15px;
	background: var(--de-paper);
	color: var(--de-text);
	font-size: 16px;            /* bigger, and stops iOS zoom-on-focus */
	line-height: 1.35;
	min-height: 50px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.de-checkout .input-text::placeholder,
.de-checkout input::placeholder,
.de-checkout textarea::placeholder { color: #aeb2b8; }

.de-checkout .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

.de-checkout .input-text:focus,
.de-checkout input:focus,
.de-checkout textarea:focus,
.de-checkout select:focus,
.de-checkout .select2-container--focus .select2-selection {
	border-color: var(--de-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba( 201, 84, 31, 0.14 );
}

.de-checkout .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.de-checkout .form-row label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--de-text);
}

.de-checkout .form-row-first,
.de-checkout .form-row-last {
	width: 100%;
	float: none;
}

.de-checkout .required {
	color: var(--de-gold);
	border: 0;
	text-decoration: none;
}

/* Coupon / login toggles read as quiet secondary UI. */
.de-checkout .woocommerce-form-coupon-toggle,
.de-checkout .woocommerce-form-login-toggle {
	font-size: 13px;
}

/* "+ Add a company" / "+ Add apartment…" optional-field toggles (markup owned
   by functions.php). Default to a dark button slab; render them as quiet inline
   text links instead so they read as Shopify-style "reveal" affordances. */
.de-checkout .de-optional-toggle {
	display: block;                 /* own line each — two inline toggles were mashing together */
	width: fit-content;
	margin: -2px 0 14px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--de-navy);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
}
.de-checkout .de-optional-toggle:hover,
.de-checkout .de-optional-toggle:focus {
	background: none;
	color: var(--de-btn-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Payment block (emitted, untouched, by woocommerce_checkout_order_review)
 * ------------------------------------------------------------------------ */
.de-checkout__aside #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--de-border);
}

.de-checkout__aside #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 8px;
	list-style: none;
}

.de-checkout__aside #payment ul.payment_methods li {
	padding: 4px 0;
	list-style: none;
}

.de-checkout__aside #payment div.payment_box {
	background: var(--de-paper);
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-md);
	color: var(--de-text);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 8px 0 4px;
	padding: 14px 16px;
	box-shadow: none;
}

.de-checkout__aside #payment div.payment_box::before {
	border-bottom-color: var(--de-paper);
}

/* --------------------------------------------------------------------------
 * Place-order button — dark, full width. Label text is left to WooCommerce /
 * the Etsy Router plugin; only styled here.
 * ------------------------------------------------------------------------ */
.de-checkout #place_order,
.de-checkout__aside #payment #place_order {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 17px;
	background: var(--de-btn);
	color: #fff;
	border: 2px solid var(--de-btn);
	border-radius: var(--de-radius-sm);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.de-checkout #place_order:hover,
.de-checkout #place_order:focus,
.de-checkout__aside #payment #place_order:hover,
.de-checkout__aside #payment #place_order:focus {
	background: var(--de-btn-hover);
	border-color: var(--de-btn-hover);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Notices — soft, on-brand (not loud slabs).
 * Scoped to .de-co-main (the standalone page wrapper) so this ALSO catches the
 * coupon toggle + notices WooCommerce renders OUTSIDE the form via
 * woocommerce_before_checkout_form — the default of those is a full-width black
 * slab. The centered wrapper keeps them aligned with the two panels.
 * ------------------------------------------------------------------------ */
.de-co-main .woocommerce-info,
.de-co-main .woocommerce-form-coupon-toggle .woocommerce-info {
	max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 );
	margin: 20px auto;
	background: var(--de-tint);
	color: #3a3d43;
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-sm);
	box-shadow: none;
	font-size: 13px;
	padding: 13px 18px;
}
.de-co-main .woocommerce-info::before { color: var(--de-gold); }
.de-co-main .checkout_coupon { max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 ); margin: 0 auto 20px; }
.de-co-main .checkout_coupon .button { width: auto; }

/* The coupon-toggle wrapper spans full-bleed and (in this stack) carries the
   same diagonal-line data-SVG, leaving grey fragments beside the centered
   notice. Strip it and lay the notice out as a clean single row. */
.de-co-main .woocommerce-form-coupon-toggle {
	background-image: none !important;
	background: transparent;
}
.de-co-main .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.de-co-main .woocommerce-form-coupon-toggle .woocommerce-info .showcoupon {
	flex: 0 0 auto;
	white-space: nowrap;
	text-transform: none;
	font-weight: 500;
}

/* Inside the summary column, keep info notices tight (no centering). */
.de-checkout__aside .woocommerce-info {
	max-width: none;
	margin: 0 0 16px;
	background: var(--de-paper);
}

/* Coupon toggle + form are relocated by checkout.js (moveCoupon) into the
   order-notes area (left column). Hide it at its default top position until the
   move happens so it doesn't flash there; then drop the full-width centering so
   it fits the column and sits under the notes. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }
body.de-coupon-relocated .woocommerce-form-coupon-toggle { display: block; }
.de-checkout__main .woocommerce-additional-fields .woocommerce-form-coupon-toggle {
	margin-top: 18px;
}
.de-checkout__main .woocommerce-form-coupon-toggle .woocommerce-info,
.de-checkout__main .woocommerce-additional-fields .checkout_coupon {
	max-width: none;
	margin: 0;
}
.de-checkout__main .woocommerce-additional-fields .checkout_coupon {
	margin-top: 14px;
}

.de-co-main .woocommerce-message {
	max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 );
	margin: 20px auto;
	background: #f2f6f0;
	color: #2f4f2f;
	border: 1px solid #d7e6d0;
	box-shadow: none;
	border-radius: var(--de-radius-sm);
}
.de-co-main .woocommerce-message::before { color: #2f7a3f; }

.de-co-main .woocommerce-error {
	max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 );
	margin: 20px auto;
	border-radius: var(--de-radius-sm);
	box-shadow: none;
}

/* Robust catch-all: the "added to cart" message + notices can render OUTSIDE
   .de-co-main as a full-width bright-green/blue band (theme + WC defaults). Skin
   them to the brand wherever they print, centered to the panel width. */
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout ul.woocommerce-error {
	max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 ) !important;
	margin: 22px auto !important;
	background: var(--de-paper) !important;
	color: var(--de-text) !important;
	border: 1px solid var(--de-border) !important;
	border-top: 3px solid var(--de-navy) !important;   /* --de-navy is ember here */
	border-left: 1px solid var(--de-border) !important;
	border-radius: var(--de-radius-sm) !important;
	box-shadow: 0 10px 26px -18px rgba( 28, 27, 26, 0.4 ) !important;
	font-family: "Inter", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	padding: 16px 20px !important;
	list-style: none !important;
}
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before { color: var(--de-navy) !important; }
body.woocommerce-checkout ul.woocommerce-error { border-top-color: #b3402f !important; }
body.woocommerce-checkout ul.woocommerce-error::before { color: #b3402f !important; }
/* VIEW CART / secondary link inside a notice -> clean ghost button */
body.woocommerce-checkout .woocommerce-message .button {
	background: transparent !important;
	color: var(--de-heading) !important;
	border: 2px solid var(--de-heading) !important;
	border-radius: var(--de-radius-sm) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.03em;
	padding: 9px 16px !important;
	box-shadow: none !important;
}
body.woocommerce-checkout .woocommerce-message .button:hover {
	background: var(--de-heading) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
 * WooCommerce AJAX "updating" state — during a totals refresh WooCommerce's
 * blockUI paints a tiled diagonal-line pattern (a data-URI SVG) BOTH as a
 * .blockUI.blockOverlay AND, in this stack, as a background-image on
 * #order_review itself. Both look like a big grey "X" over the summary. Kill
 * the pattern and replace the overlay with a clean, subtle veil so the summary
 * stays legible while it updates.
 * ------------------------------------------------------------------------ */
.de-checkout .blockUI.blockOverlay {
	background-color: var(--de-tint) !important;
	background-image: none !important;
	opacity: 0.6 !important;
}

/* Defeat the diagonal-line background painted on the review container. */
.de-checkout__aside #order_review,
.de-checkout__aside .woocommerce-checkout-review-order {
	background-image: none !important;
}

/* --------------------------------------------------------------------------
 * Mobile-only summary toggle bar (hidden on desktop)
 * Scoped under .de-checkout__aside so this (0,2,0) beats the parent theme's
 * `input[type="checkbox"] + label { display: inline }` rule (0,1,1), which
 * would otherwise reveal the toggle on desktop.
 * ------------------------------------------------------------------------ */
.de-checkout__aside .de-sum-toggle { display: none; }

/* --------------------------------------------------------------------------
 * Responsive — single column, summary collapses to a bar ABOVE the form.
 * ------------------------------------------------------------------------ */
@media (max-width: 820px) {
	:root { --de-gutter: 20px; --de-pad-y: 28px; }

	/* Brand bar collapses to a single solid-white row, logo pinned left. */
	.de-co-brand { display: block; background: var(--de-paper); }
	.de-co-brand__main {
		flex: none;
		width: 100%;
		justify-content: flex-start;
		padding: 16px 20px;
	}
	.de-co-brand__aside { display: none; }
	.de-co-brand__in { max-width: none; }

	.de-checkout {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.de-checkout__main,
	.de-checkout__aside {
		flex: 1 1 auto;
		width: 100%;
		justify-content: stretch;
		padding: 24px 20px 40px;
	}

	.de-checkout__main .de-checkout__inner,
	.de-checkout__aside .de-checkout__inner {
		max-width: none;
	}

	/* Summary first, form second. */
	.de-checkout__aside {
		order: 1;
		padding: 0;
		background: var(--de-tint);
		border-left: 0;
		border-bottom: 1px solid var(--de-border);
	}
	.de-checkout__main { order: 2; }

	/* The toggle bar. Scoped to out-specify the parent theme's checkbox+label
	   rule (0,1,1) so it reliably shows on mobile. */
	.de-checkout__aside .de-sum-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 16px 20px;
		cursor: pointer;
		background: var(--de-tint);
		color: var(--de-navy);
		-webkit-user-select: none;
		user-select: none;
	}

	.de-sum-toggle__label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		color: var(--de-navy);
	}
	.de-sum-toggle__cart { color: var(--de-navy); flex: none; }
	.de-sum-toggle__chev {
		flex: none;
		transition: transform 0.2s ease;
	}
	.de-sum-toggle__total {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 17px;
		font-weight: 600;
		color: var(--de-heading);
	}
	.de-sum-toggle__total .amount { color: var(--de-heading); }

	/* Collapsed by default: hide the inner summary wrapper. */
	.de-checkout__aside .de-checkout__inner {
		position: static;
		overflow: hidden;
		max-height: 0;
		padding: 0 20px;
		transition: max-height 0.25s ease, padding 0.25s ease;
	}

	/* Expanded state via the hidden checkbox. Scoped under .de-checkout__aside so
	   this rule (0,4,0) unambiguously out-specifies the collapsed rule (0,2,0),
	   regardless of source order. */
	.de-checkout__aside .de-sum-collapse:checked ~ .de-checkout__inner {
		max-height: 2000px;
		padding: 4px 20px 24px;
		border-top: 1px solid var(--de-border);
	}
	.de-checkout__aside .de-sum-collapse:checked ~ .de-sum-toggle .de-sum-toggle__chev {
		transform: rotate(180deg);
	}

	/* Focus affordance for keyboard users toggling via the label. */
	.de-checkout__aside .de-sum-collapse:focus-visible ~ .de-sum-toggle {
		outline: 2px solid var(--de-navy);
		outline-offset: -2px;
	}

	/* On mobile the aside heading is redundant with the toggle bar text. */
	#order_review_heading { margin-top: 4px; }
}

/* Reduced-motion: no chevron/height animation. */
@media (prefers-reduced-motion: reduce) {
	.de-sum-toggle__chev,
	.de-checkout__aside .de-checkout__inner { transition: none; }
}

/* Progressive disclosure: checkout.js hides the optional fields (company,
   apartment, order notes) with the [hidden] attribute, but the parent theme's
   form CSS re-shows .form-row. Enforce the hide; the opt-in toggles remove
   [hidden] to reveal the field. */
.de-co-body [hidden],
.de-co-body .form-row[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
 * Coupon form — it rendered left-aligned (margin:0, so the input ran off the
 * far left while the panels stay centered) with a lone black button. Center it
 * to the panel width and lay it out as one clean, contained row.
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout form.checkout_coupon {
	max-width: calc( var(--de-main-w) * 2 + var(--de-gutter) * 2 ) !important;
	margin: 0 auto 22px !important;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	background: var(--de-paper);
	border: 1px solid var(--de-border);
	border-radius: var(--de-radius-sm);
	padding: 16px 20px;
}
body.woocommerce-checkout form.checkout_coupon .input-text {
	flex: 1 1 220px;
	max-width: 380px;
	margin: 0;
	min-height: 48px;
}
body.woocommerce-checkout form.checkout_coupon .button {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	min-height: 48px;
}