/* Cyber City · the cart, the checkout, the thank-you page and order tracking (theme 0.25.0, Rayan 8 Oct 2026).
   Brief 09-التصميم/pages/commerce/00-brief.md. WooCommerce's classic markup dressed in the identity: modules on the
   canvas, the dark summary panel beside the content (sticky, in its own box: .ecc-co__grid holds only the two), the
   bag drawer's line for each product, fields as white wells by day (the void at night), voxel checks and radios, the
   theme's buttons. Nothing of WooCommerce's own stylesheets is loaded (inc/commerce.php). Day and Night by tokens. */

.ecc-co { display: grid; gap: var(--ecc-gap); }
.ecc-co .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ecc-co .clear { clear: both; }

/* ---------------------------------------------------------------------------------------------------- the head */
.ecc-co__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ecc-s-4) var(--ecc-s-6); }
.ecc-co__headtext { display: grid; gap: var(--ecc-s-2); min-width: 0; }
.ecc-co__headtext .ecc-h1 { margin: 0; }
.ecc-co__lead { margin: 0; max-width: 40rem; color: var(--ecc-ink-2); }
.ecc-co__steps { display: flex; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ecc-co__stepdot { display: inline-flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-s-7); padding: 0 var(--ecc-s-3); border: 1px solid var(--ecc-line); border-radius: var(--ecc-r-sm); color: var(--ecc-ink-2); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); white-space: nowrap; }
.ecc-co__stepn { font-size: 11px; letter-spacing: .06em; }
.ecc-co__stepdot.is-now { border-color: var(--ecc-ink); color: var(--ecc-ink); }
.ecc-co__stepdot.is-now .ecc-co__stepn { color: var(--ecc-spark); }
.ecc-co__stepdot.is-done { color: var(--ecc-ink); background: var(--ecc-surface-2); border-color: transparent; }
.ecc-co__stepdot.is-done .ecc-co__stepn::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); vertical-align: 1px; }
:root[data-theme="night"] .ecc-co__stepdot.is-now .ecc-co__stepn { color: var(--ecc-lime); }

/* ------------------------------------------------------------------------------------------- the two columns */
.ecc-co__wc, .ecc-co__wc > .woocommerce { display: grid; gap: var(--ecc-gap); min-width: 0; }
.ecc-co__grid, .ecc-co--cart .ecc-co__wc > .woocommerce:has(> .woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); align-items: start; }
/* the cart's notices span both columns (cart.js needs the form to stay a child of .woocommerce, so it is the grid) */
.ecc-co--cart .woocommerce > :not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
.ecc-co__main { min-width: 0; }
@media (min-width: 1024px) {
  .ecc-co__grid, .ecc-co--cart .ecc-co__wc > .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
  .ecc-co__side { position: sticky; top: calc(var(--ecc-s-9) + var(--ecc-s-4)); }
}
/* on a phone the checkout shows the order first, so the visitor sees what they pay before the form */
@media (max-width: 1023px) {
  .ecc-co--checkout .ecc-co__side { order: -1; }
}

/* ------------------------------------------------------------------------------------------------- the lines */
.ecc-co__main.ecc-module { padding: var(--ecc-s-2) var(--ecc-s-5) var(--ecc-s-4); }
.ecc-co__lines { margin: 0; padding: 0; list-style: none; }
.ecc-co__line { position: relative; }
@media (min-width: 760px) {
  .ecc-co__line.ecc-cartline { grid-template-columns: 120px minmax(0, 1fr); gap: var(--ecc-s-5); padding: var(--ecc-s-5) 0; }
  .ecc-co__line .ecc-cartline__thumb { height: 120px; }
}
.ecc-co__line .ecc-cartline__thumb img { max-width: 80%; max-height: 80%; }
.ecc-co__line .ecc-cartline__name { font-size: var(--ecc-t-body); }
.ecc-co__line .ecc-cartline__meta dl.variation { display: flex; flex-wrap: wrap; gap: 0 var(--ecc-s-2); margin: 0; }
.ecc-co__line .ecc-cartline__meta dl.variation dt { margin: 0; font-weight: var(--ecc-fw-medium); }
.ecc-co__line .ecc-cartline__meta dl.variation dd { margin: 0 var(--ecc-s-2) 0 0; }
.ecc-co__line .ecc-cartline__meta dl.variation p { display: inline; margin: 0; }
.ecc-co__line .ecc-cartline__meta:empty { display: none; }
.ecc-co__line .backorder_notification { margin: var(--ecc-s-1) 0 0; color: var(--ecc-warning-fg); font-size: var(--ecc-t-small); }
.ecc-co__each { display: block; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-regular, 400); text-align: right; }
.ecc-co__line .ecc-cartline__price { text-align: right; font-size: var(--ecc-t-body); }
.ecc-co__line .ecc-cartline__price small { font-size: .78em; }
.ecc-co__line .product-remove { margin-top: var(--ecc-s-2); }

/* WooCommerce's quantity field inside the theme's stepper: one less, the number, one more */
.ecc-co-stepper { display: inline-grid; grid-template-columns: var(--ecc-hit) var(--ecc-s-8) var(--ecc-hit); height: var(--ecc-hit); }
.ecc-co-stepper .quantity { display: block; height: 100%; }
.ecc-co-stepper .qty, .ecc-co-stepper .ecc-stepper__input { width: 100%; height: 100%; padding: 0; border: 0; border-inline: 1px solid var(--ecc-line); background: none; color: var(--ecc-ink); font-family: var(--ecc-f-text); font-weight: var(--ecc-fw-strong); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; }
.ecc-co-stepper .qty::-webkit-inner-spin-button, .ecc-co-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ecc-co-stepper .qty:focus-visible { outline: var(--ecc-focus-ring); outline-offset: -2px; }
/* WooCommerce gives its quantity the class input-text: the stepper's number is not a field well */
.ecc-co .ecc-co-stepper input.qty { min-height: 0; padding: 0; border: 0; border-inline: 1px solid var(--ecc-line); border-radius: 0; background: none; box-shadow: none; font-size: var(--ecc-t-body); }

/* the actions under the lines: a code (folded), and Update bag (hidden once the script updates by itself) */
.ecc-co__actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ecc-s-3); padding-top: var(--ecc-s-4); border-top: 1px solid var(--ecc-line); }
.ecc-co__code summary { display: inline-flex; align-items: center; min-height: var(--ecc-hit); color: var(--ecc-ink); font-weight: var(--ecc-fw-medium); text-decoration: underline; text-decoration-color: var(--ecc-line-strong); text-underline-offset: 4px; cursor: pointer; list-style: none; }
.ecc-co__code summary::-webkit-details-marker { display: none; }
.ecc-co__code .coupon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ecc-s-2); margin-top: var(--ecc-s-2); }
.ecc-co__code .coupon label { width: 100%; font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); }
.ecc-co__code .coupon input { flex: 1 1 10rem; }
html.ecc-js .ecc-co__update { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ecc-co__update:focus-visible { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; }

/* ------------------------------------------------------------------------------------------- the summary panel */
.ecc-co__sum { display: grid; gap: var(--ecc-s-4); padding: var(--ecc-s-5); }
.ecc-co__sumlabel { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-co__rows { display: grid; gap: 0; margin: 0; }
.ecc-co__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ecc-s-3); padding: var(--ecc-s-3) 0; border-bottom: 1px solid var(--ecc-line); }
.ecc-co__row dt { margin: 0; color: var(--ecc-ink-2); }
.ecc-co__row dd { margin: 0; font-weight: var(--ecc-fw-strong); font-variant-numeric: tabular-nums; text-align: right; }
.ecc-co__incl { color: var(--ecc-lime); font-weight: var(--ecc-fw-strong); }
.ecc-co__small { margin: 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.5; }
.ecc-co__small a { color: var(--ecc-ink); }
.ecc-co__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin: 0; }
.ecc-co__acts .ecc-btn { flex: 1 1 12rem; justify-content: center; }
.ecc-co__go { width: 100%; justify-content: center; }
.ecc-co__soon { display: grid; gap: var(--ecc-s-1); padding: var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: rgba(162, 234, 10, .08); box-shadow: inset 0 0 0 1px rgba(162, 234, 10, .35); }
.ecc-co__soon p { margin: 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
.ecc-co__soon .ecc-co__soontitle { color: var(--ecc-ink); font-size: var(--ecc-t-body); font-weight: var(--ecc-fw-strong); }

/* WooCommerce's totals and review tables, as rows */
.ecc-co__sum table { width: 100%; border-collapse: collapse; }
.ecc-co__sum th, .ecc-co__sum td { padding: var(--ecc-s-3) 0; border-bottom: 1px solid var(--ecc-line); text-align: left; vertical-align: top; font-weight: var(--ecc-fw-regular, 400); }
.ecc-co__sum td { text-align: right; font-variant-numeric: tabular-nums; }
.ecc-co__sum th { color: var(--ecc-ink-2); font-weight: var(--ecc-fw-medium); padding-right: var(--ecc-s-3); }
.ecc-co__sum .order-total th, .ecc-co__sum .order-total td { padding-top: var(--ecc-s-4); border-bottom: 0; color: var(--ecc-ink); }
.ecc-co__sum .order-total td { font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); }
.ecc-co__sum .order-total th { font-size: var(--ecc-t-body); font-weight: var(--ecc-fw-strong); }
.ecc-co__sum .includes_tax { display: block; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); font-weight: 400; }
.ecc-co__sum .woocommerce-remove-coupon { margin-left: var(--ecc-s-2); color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
/* the review's lines: name × quantity, then the price */
.ecc-co__review .cart_item td.product-name { text-align: left; color: var(--ecc-ink); font-weight: var(--ecc-fw-medium); }
.ecc-co__review .product-quantity { color: var(--ecc-ink-2); font-weight: 400; }
.ecc-co__review .cart_item dl.variation { display: flex; flex-wrap: wrap; gap: 0 var(--ecc-s-2); margin: 2px 0 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); font-weight: 400; }
.ecc-co__review .cart_item dl.variation dd, .ecc-co__review .cart_item dl.variation p { margin: 0; }
.ecc-co__review thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* shipping choices: store pickup first, as rows the visitor can pick */
.ecc-co__sum .woocommerce-shipping-totals th { vertical-align: top; }
.ecc-co__sum .woocommerce-shipping-totals td { text-align: left; }
.ecc-co__sum #shipping_method { display: grid; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-co__sum #shipping_method li { position: relative; display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); }
.ecc-co__sum #shipping_method label { flex: 1; cursor: pointer; line-height: 1.35; }
.ecc-co__sum .woocommerce-shipping-destination, .ecc-co__sum .woocommerce-shipping-contents { margin: var(--ecc-s-2) 0 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
.ecc-co__sum .shipping-calculator-button { display: inline-block; padding-block: 14px; margin-block: -14px; color: var(--ecc-ink); font-size: var(--ecc-t-small); } /* 44 px tall to press (it was 15), the row keeps its height (function audit m6) */
.ecc-co__sum .shipping-calculator-form { display: grid; gap: var(--ecc-s-2); margin-top: var(--ecc-s-2); }
.ecc-co__sum .wc-proceed-to-checkout { padding-top: var(--ecc-s-1); }

/* ---------------------------------------------------------------------------------------- fields (WooCommerce) */
.ecc-co .form-row { display: grid; gap: var(--ecc-s-1); margin: 0; min-width: 0; }
.ecc-co .form-row label { color: var(--ecc-ink); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); line-height: 1.4; }
.ecc-co .form-row .required { color: var(--ecc-danger-fg); text-decoration: none; border: 0; }
.ecc-co .form-row .optional { color: var(--ecc-ink-2); font-weight: 400; }
.ecc-co .form-row .description, .ecc-co__hint { margin: 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-co .woocommerce-input-wrapper { display: grid; gap: var(--ecc-s-1); }
.ecc-co input.input-text, .ecc-co select, .ecc-co textarea, .ecc-co .coupon input, .ecc-co__track input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); background: var(--ecc-field-bg); color: var(--ecc-ink);
  font: inherit; font-size: var(--ecc-t-body); line-height: 1.4; transition: border-color var(--ecc-d-fast) var(--ecc-ease-out), box-shadow var(--ecc-d-fast) var(--ecc-ease-out);
}
.ecc-co textarea { min-height: 112px; resize: vertical; }
.ecc-co select { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--ecc-ink) 50%), linear-gradient(135deg, var(--ecc-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ecc-co input.input-text:hover, .ecc-co select:hover, .ecc-co textarea:hover { border-color: var(--ecc-ink); } }
.ecc-co input.input-text:focus-visible, .ecc-co select:focus-visible, .ecc-co textarea:focus-visible, .ecc-co__track input:focus-visible { outline: var(--ecc-focus-ring); outline-offset: -1px; border-color: var(--ecc-focus); box-shadow: var(--ecc-focus-halo); }
.ecc-co .woocommerce-invalid input.input-text, .ecc-co .woocommerce-invalid select { border-color: var(--ecc-danger-line); box-shadow: inset 0 0 0 1px var(--ecc-danger-line); }
.ecc-co .woocommerce-invalid label { color: var(--ecc-danger-fg); }
.ecc-co .checkout-inline-error-message { margin: 0; color: var(--ecc-danger-fg); font-size: var(--ecc-t-small); }

/* the fields of a step: two columns where WooCommerce says first/last */
.ecc-co__fields, .ecc-co .woocommerce-billing-fields__field-wrapper, .ecc-co .woocommerce-shipping-fields__field-wrapper, .ecc-co .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-4); }
@media (min-width: 600px) {
  .ecc-co .woocommerce-billing-fields__field-wrapper, .ecc-co .woocommerce-shipping-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-co .woocommerce-billing-fields__field-wrapper .form-row-wide, .ecc-co .woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
  .ecc-co__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ecc-co .woocommerce-billing-fields, .ecc-co .woocommerce-shipping-fields, .ecc-co .woocommerce-additional-fields, .ecc-co .woocommerce-account-fields { display: grid; gap: var(--ecc-s-4); margin-top: var(--ecc-s-4); }
.ecc-co .woocommerce-billing-fields { margin-top: 0; }
.ecc-co .woocommerce-additional-fields > h3, .ecc-co .woocommerce-shipping-fields > h3 { margin: 0; font-size: var(--ecc-t-body); font-weight: var(--ecc-fw-strong); }

/* WooCommerce's checkboxes and radios, drawn as the identity's voxel checks */
.ecc-co input[type="checkbox"], .ecc-co input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 var(--ecc-s-2) 0 0;
  border-radius: 4px; background: var(--ecc-field-bg); box-shadow: inset 0 0 0 1.5px var(--ecc-control-line); vertical-align: -5px; cursor: pointer;
  transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), box-shadow var(--ecc-d-fast) var(--ecc-ease-out);
}
.ecc-co input[type="radio"] { border-radius: 50%; }
.ecc-co input[type="checkbox"]:checked, .ecc-co input[type="radio"]:checked { background: var(--ecc-btn-bg); box-shadow: none; }
.ecc-co input[type="checkbox"]::after { content: ""; width: 3px; height: 3px; transform: translate(-6px, -4px); color: var(--ecc-btn-pip); box-shadow: 12px 0, 9px 3px, 0 6px, 6px 6px, 3px 9px; opacity: 0; }
.ecc-co input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-btn-pip); opacity: 0; }
.ecc-co input[type="checkbox"]:checked::after, .ecc-co input[type="radio"]:checked::after { opacity: 1; }
.ecc-co input[type="checkbox"]:focus-visible, .ecc-co input[type="radio"]:focus-visible { outline: var(--ecc-focus-ring); outline-offset: 2px; }
.ecc-co label.checkbox, .ecc-co .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: 0; min-height: var(--ecc-hit); padding-top: 11px; font-weight: var(--ecc-fw-medium); cursor: pointer; }
/* in the dark panel the well is the panel's own */
.ecc-ctx-panel input[type="radio"]:not(:checked), .ecc-ctx-panel input[type="checkbox"]:not(:checked) { background: transparent; }

/* --------------------------------------------------------------------------------------------- the checkout */
.ecc-co__steps-col { display: grid; gap: var(--ecc-gap); }
.ecc-co__step { display: grid; gap: var(--ecc-s-4); }
.ecc-co__steph { display: flex; align-items: baseline; gap: var(--ecc-s-3); margin: 0; font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); line-height: 1.2; }
.ecc-co__stepnum { color: var(--ecc-spark); font-size: 12px; letter-spacing: .08em; }
:root[data-theme="night"] .ecc-co__stepnum { color: var(--ecc-lime); }
.ecc-co #ship-to-different-address { margin: 0; font-size: var(--ecc-t-body); }
.ecc-co #ship-to-different-address label { display: inline-flex; align-items: center; min-height: var(--ecc-hit); cursor: pointer; }
.ecc-co .shipping_address { display: grid; gap: var(--ecc-s-4); }

/* the payment: the methods as rows, the chosen one open; the payment plugin's own field sits inside */
.ecc-co #payment { display: grid; gap: var(--ecc-s-4); }
.ecc-co .wc_payment_methods { display: grid; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-co .wc_payment_method { padding: var(--ecc-s-3) var(--ecc-s-4); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r-sm); background: var(--ecc-field-bg); }
.ecc-co .wc_payment_method:has(> input:checked) { border-color: var(--ecc-ink); box-shadow: inset 0 0 0 1px var(--ecc-ink); }
.ecc-co .wc_payment_method > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); font-weight: var(--ecc-fw-strong); cursor: pointer; }
.ecc-co .wc_payment_method > label img { max-height: 24px; width: auto; }
.ecc-co .wc_payment_methods:has(> li:only-child) .wc_payment_method > input[type="radio"] { display: none; }
.ecc-co .payment_box { margin-top: var(--ecc-s-2); color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
.ecc-co .payment_box p { margin: 0 0 var(--ecc-s-2); }
.ecc-co .payment_box fieldset { margin: 0; padding: 0; border: 0; }
.ecc-co .place-order { display: grid; gap: var(--ecc-s-3); margin: 0; }
.ecc-co .woocommerce-terms-and-conditions-wrapper, .ecc-co .woocommerce-privacy-policy-text { color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.5; }
.ecc-co .woocommerce-privacy-policy-text p { margin: 0; }
.ecc-co #place_order, .ecc-co__track button[type="submit"], .ecc-co .button.pay {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ecc-s-2); width: 100%; min-height: 56px; padding: 0 var(--ecc-s-5);
  border: 0; border-radius: var(--ecc-r-sm); background: var(--ecc-btn-bg); color: var(--ecc-btn-fg); font: inherit; font-size: var(--ecc-t-body); font-weight: var(--ecc-fw-strong);
  text-decoration: none; cursor: pointer; transition: background-color var(--ecc-d-fast) var(--ecc-ease-out);
}
.ecc-co #place_order::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-btn-pip); }
@media (hover: hover) and (pointer: fine) { .ecc-co #place_order:hover { background: var(--ecc-btn-hover); } }
.ecc-co #place_order:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
.ecc-co__track button[type="submit"] { width: auto; min-height: 52px; }

/* the checkout's coupon and sign-in prompts (WooCommerce's toggles), and their small forms */
.ecc-co .woocommerce-form-coupon-toggle, .ecc-co .woocommerce-form-login-toggle { margin: 0; }
.ecc-co form.checkout_coupon, .ecc-co form.woocommerce-form-login { display: grid; gap: var(--ecc-s-3); padding: var(--ecc-s-5); border-radius: var(--ecc-r); background: var(--ecc-surface); }
.ecc-co form.checkout_coupon .form-row-first, .ecc-co form.checkout_coupon .form-row-last { display: inline-grid; }

/* ------------------------------------------------------------------------------------------------- notices */
.ecc-co .woocommerce-notices-wrapper:empty { display: none; }
.ecc-co .woocommerce-message, .ecc-co .woocommerce-info, .ecc-co .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2) var(--ecc-s-4); margin: 0; padding: var(--ecc-s-4) var(--ecc-s-5);
  border-radius: var(--ecc-r-sm); background: var(--ecc-surface); color: var(--ecc-ink); list-style: none;
  /* the identity's dotted frame: lime squares (never a blue box) */
  background-image: radial-gradient(circle, var(--ecc-spark) 1.2px, transparent 1.6px); background-size: 8px 8px; background-repeat: repeat-x; background-position: 0 0;
  box-shadow: inset 0 0 0 1px var(--ecc-line);
}
.ecc-co .woocommerce-message { box-shadow: inset 0 0 0 1px var(--ecc-success-line); }
.ecc-co .woocommerce-error { display: grid; gap: var(--ecc-s-1); background-image: none; background: var(--ecc-danger-bg); box-shadow: inset 0 0 0 1px var(--ecc-danger-line); color: var(--ecc-danger-fg); }
.ecc-co .woocommerce-error li { margin: 0; }
.ecc-co .woocommerce-error a, .ecc-co .woocommerce-message a, .ecc-co .woocommerce-info a { color: inherit; font-weight: var(--ecc-fw-strong); }
.ecc-co .woocommerce-message .button, .ecc-co .woocommerce-info .button { order: 2; }

/* ------------------------------------------------------------------------------------- the empty bag, tracking */
.ecc-co__empty { display: grid; justify-items: center; gap: var(--ecc-s-5); text-align: center; }
.ecc-co__empty .ecc-empty { max-width: 32rem; }
.ecc-co__depts { width: 100%; max-width: 40rem; }
.ecc-co__trackbox { max-width: 44rem; }
.ecc-co__track { display: grid; gap: var(--ecc-s-4); }
@media (min-width: 600px) { .ecc-co__track { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .ecc-co__track > .form-row:last-of-type { grid-column: 1 / -1; } }
.ecc-co--track .woocommerce-order-details, .ecc-co--track .woocommerce-customer-details { margin-top: var(--ecc-s-5); }
.ecc-co--track mark { padding: 0 4px; border-radius: var(--ecc-r-voxel); background: rgba(162, 234, 10, .25); color: inherit; }

/* ------------------------------------------------------------------------------------------- the thank-you */
.ecc-co__done { display: grid; gap: var(--ecc-gap); }
.ecc-co__donegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); align-items: stretch; }
@media (min-width: 900px) { .ecc-co__donegrid { grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); } }
.ecc-co__receipt { display: grid; align-content: start; gap: var(--ecc-s-3); padding: var(--ecc-s-5); }
.ecc-co__ordernum { margin: 0; color: var(--ecc-lime); font-family: var(--ecc-f-dot); font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ecc-co__next { display: grid; align-content: start; gap: var(--ecc-s-4); }
.ecc-co__next .ecc-h3 { margin: 0; }
.ecc-co__nextlist { display: grid; gap: var(--ecc-s-3); margin: 0; padding: 0; list-style: none; }
.ecc-co__nextlist li { display: grid; grid-template-columns: var(--ecc-s-7) minmax(0, 1fr); align-items: baseline; gap: var(--ecc-s-2); line-height: 1.5; }
.ecc-co__failed { display: grid; gap: var(--ecc-s-4); }
/* a payment method's own words after the order (its "thank you" instructions) */
.ecc-co__done > p, .ecc-co__done > .woocommerce-bacs-bank-details { margin: 0; padding: var(--ecc-s-4) var(--ecc-s-5); border-radius: var(--ecc-r); background: var(--ecc-surface); color: var(--ecc-ink-2); }
/* WooCommerce's order details under it (and on the tracking page): plain tables in a module */
.ecc-co .woocommerce-order-details, .ecc-co .woocommerce-customer-details { padding: var(--ecc-s-5); border-radius: var(--ecc-r); background: var(--ecc-surface); }
.ecc-co .woocommerce-order-details__title, .ecc-co .woocommerce-column__title { margin: 0 0 var(--ecc-s-3); font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); }
.ecc-co .woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.ecc-co .woocommerce-table--order-details th, .ecc-co .woocommerce-table--order-details td { padding: var(--ecc-s-3) 0; border-bottom: 1px solid var(--ecc-line); text-align: left; vertical-align: top; }
.ecc-co .woocommerce-table--order-details td:last-child, .ecc-co .woocommerce-table--order-details th:last-child { text-align: right; }
.ecc-co .woocommerce-table--order-details tfoot th { color: var(--ecc-ink-2); font-weight: var(--ecc-fw-medium); }
.ecc-co .woocommerce-table--order-details tfoot tr:last-child th, .ecc-co .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; font-weight: var(--ecc-fw-strong); color: var(--ecc-ink); }
.ecc-co .woocommerce-customer-details address { font-style: normal; line-height: 1.6; color: var(--ecc-ink-2); }
.ecc-co .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ecc-gap); }

/* WooCommerce's "processing" overlay while it asks the server (blockUI): the canvas, softly */
.ecc-co .blockUI.blockOverlay { background: var(--ecc-canvas) !important; opacity: .5 !important; }

@media (prefers-reduced-motion: reduce) { .ecc-co * { transition: none !important; } }
@media (forced-colors: active) { .ecc-co input[type="checkbox"], .ecc-co input[type="radio"] { -webkit-appearance: auto; appearance: auto; } }
/* the bag page while orders are closed is drawn by the script from the visitor's own bag: until then it keeps a
   screen's worth of room, so the footer never shows first and jumps away (theme 0.29.1: a 0.47 layout shift on a phone) */
.ecc-js .ecc-co__wc[data-ecc-localbag]:not(.is-drawn) { min-height: 80vh; }