/**
 * Edes Woo Checkout Design — front end.
 *
 * The plugin renders nothing. WooCommerce prints its own cart, checkout and
 * confirmation pages exactly as always, and this stylesheet dresses them. The
 * account pages are deliberately left untouched — see Frontend for why. Two
 * consequences shape every selector below:
 *
 * 1. **The scope class is on `<body>`.** `.edes-wc` and the layout classes are
 *    added by a `body_class` filter, which is the one hook that changes nothing
 *    structural. The custom properties therefore land on the body and inherit
 *    downwards.
 *
 * 2. **No rule may reach anything that is not WooCommerce's.** Because the
 *    scope is the whole document, an unqualified `.edes-wc input[type="text"]`
 *    would restyle the header's search field.
 *
 *    Rules on *generic* elements — inputs, buttons, headings, `.form-row` —
 *    are therefore qualified with `.woocommerce`, the wrapper WooCommerce puts
 *    around its own output.
 *
 *    Rules on elements whose own class already proves whose they are —
 *    `.shop_table`, `.cart_totals`, `.cart-collaterals`, `ul#shipping_method`,
 *    `.woo-bg-*` and the rest — are not. That is not a shortcut: a theme is
 *    free to render the cart totals *outside* `div.woocommerce`, and requiring
 *    that ancestor meant the whole summary block silently kept the theme's own
 *    styling while the products table above it was styled — which is exactly
 *    what happened on the live cart. A class named `cart_totals` cannot belong
 *    to anything else, so it needs no chaperone.
 *
 *    The test suite enforces this split, with the second list spelled out, so
 *    a rule on a generic element without `.woocommerce` fails the build.
 *
 * Every value the settings screen can change is read from a custom property
 * with a fallback baked in here, so the stylesheet is complete on its own and
 * the saved settings only override what was actually changed.
 *
 * A note on !important, which appears in two blocks. Divi styles WooCommerce
 * buttons and form fields through selectors containing an ID —
 * `body #page-container .et_pb_section a.button` — which is specificity (1,3,1).
 * No amount of class stacking beats that, so for the handful of properties Divi
 * insists on, !important is the only mechanism that works. It is confined to
 * those blocks and the values still come from the custom properties, so the
 * settings screen keeps control.
 */

body.edes-wc {
	--edes-wc-radius-sm: calc(var(--edes-wc-radius, 8px) * 0.6);
}

/*
 * `width: 100%` is not decoration here.
 *
 * The auto margins exist to centre this block when the shop sets a maximum
 * width. As soon as the same element becomes a *grid item* — which it does in
 * the two-column cart, where the totals live outside it — auto margins stop
 * meaning "centre me" and start meaning "size me to my contents". Its contents
 * are the cart form, which declares a container query and therefore takes its
 * width from its parent rather than giving one. Parent asks child, child asks
 * parent, and the column collapses to zero.
 *
 * An explicit width breaks that circle: 100% of the grid track when it is a
 * grid item, 100% of the available width when it is an ordinary block, with
 * the max-width and the auto margins still centring it in both cases.
 */
.edes-wc .woocommerce {
	box-sizing: border-box;
	color: var(--edes-wc-text, #333);
	font-size: var(--edes-wc-font-size, 15px);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--edes-wc-max-width, none);
	width: 100%;
}

.edes-wc .woocommerce *,
.edes-wc .woocommerce *::before,
.edes-wc .woocommerce *::after {
	box-sizing: border-box;
}

.edes-wc .woocommerce h1,
.edes-wc .woocommerce h2,
.edes-wc .woocommerce h3,
.edes-wc .woocommerce h4 {
	color: var(--edes-wc-heading, #1f1f1f);
	font-size: var(--edes-wc-heading-size, 20px);
	font-weight: var(--edes-wc-heading-weight, 700);
	line-height: 1.25;
	margin: 0 0 calc(var(--edes-wc-block-gap, 28px) * 0.5);
	padding: 0;
}

/* ------------------------------------------------------------------ notices */

/*
 * The notices — including "Продуктът е добавен в количката", which is the one
 * a customer sees most often.
 *
 * Each notice takes its accent from `--edes-wc-notice-accent`, set per type on
 * the next rules. Everything after that reads that one property, so the three
 * visual styles below need no per-type duplication.
 */
.edes-wc .woocommerce-message,
.edes-wc .woocommerce-info,
.edes-wc .woocommerce-error {
	--edes-wc-notice-accent: var(--edes-wc-notice-info, #2271b1);

	align-items: center;
	background: var(--edes-wc-notice-bg, #fbfbfb);
	border: 1px solid var(--edes-wc-border, #e5e5e5);
	border-left: var(--edes-wc-notice-border-width, 4px) solid var(--edes-wc-notice-accent);
	border-radius: var(--edes-wc-notice-radius, 8px);
	color: var(--edes-wc-notice-text, #1f1f1f);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--edes-wc-notice-size, 15px);
	font-weight: var(--edes-wc-notice-weight, 500);
	/* Not space-between: these notices are a sentence followed by its own link
	   ("Имате промо код? Натиснете тук"), and pushing the two to opposite ends
	   of a full-width bar reads as two unrelated things. */
	gap: 6px 12px;
	justify-content: flex-start;
	list-style: none;
	margin: 0 0 var(--edes-wc-block-gap, 28px);
	padding: var(--edes-wc-notice-padding, 14px) calc(var(--edes-wc-notice-padding, 14px) * 1.3);
}

.edes-wc .woocommerce-message {
	--edes-wc-notice-accent: var(--edes-wc-notice-success, #1e8e3e);
}

.edes-wc .woocommerce-error {
	--edes-wc-notice-accent: var(--edes-wc-notice-error, #c0392b);

	align-items: flex-start;
	flex-direction: column;
}

.edes-wc .woocommerce-error li {
	list-style: none;
}

/* The button WooCommerce puts in the "added to cart" notice goes to the far
   end, where it reads as the action rather than as part of the sentence. */
.edes-wc .woocommerce-message .button,
.edes-wc .woocommerce-info .button {
	margin-left: auto;
}

/*
 * On a narrow screen there is no far end to go to: the button takes the first
 * line and the sentence explaining it wraps underneath, which reads backwards.
 * `order` puts it after the text instead — the markup is untouched, only the
 * visual order changes, and the two are adjacent either way so nothing is lost
 * for a screen reader.
 */
@media (max-width: 560px) {
	.edes-wc .woocommerce-message .button,
	.edes-wc .woocommerce-info .button {
		margin-left: 0;
		order: 2;
		width: 100%;
	}
}

/* --- the three notice styles ------------------------------------------- */

.edes-wc--notice-stripe .woocommerce-message,
.edes-wc--notice-stripe .woocommerce-info,
.edes-wc--notice-stripe .woocommerce-error {
	border-left-width: var(--edes-wc-notice-border-width, 4px);
}

/*
 * Solid: the accent colour, lightened. `color-mix` keeps this to one control
 * instead of asking for a background colour per notice type — and where it is
 * unsupported the notice keeps the plain background set above, which is a
 * legible fallback rather than an unreadable one.
 */
.edes-wc--notice-solid .woocommerce-message,
.edes-wc--notice-solid .woocommerce-info,
.edes-wc--notice-solid .woocommerce-error {
	background: color-mix(in srgb, var(--edes-wc-notice-accent) 12%, #fff);
	border-color: color-mix(in srgb, var(--edes-wc-notice-accent) 30%, #fff);
	border-left-color: var(--edes-wc-notice-accent);
}

.edes-wc--notice-outline .woocommerce-message,
.edes-wc--notice-outline .woocommerce-info,
.edes-wc--notice-outline .woocommerce-error {
	background: transparent;
	border: var(--edes-wc-notice-border-width, 4px) solid var(--edes-wc-notice-accent);
}

/* --- the optional icon --------------------------------------------------- */

/*
 * WooCommerce's own leading icon is a pseudo-element in its icon font, which
 * most themes then fight over. It is replaced rather than restyled: a plain
 * character in the page's own font cannot go missing when a font fails to
 * load, and it inherits the notice's accent for free.
 */
.edes-wc .woocommerce-message::before,
.edes-wc .woocommerce-info::before,
.edes-wc .woocommerce-error::before {
	content: none;
}

.edes-wc--notice-icon .woocommerce-message::before,
.edes-wc--notice-icon .woocommerce-info::before,
.edes-wc--notice-icon .woocommerce-error::before {
	align-items: center;
	background: var(--edes-wc-notice-accent);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-family: inherit;
	font-size: calc(var(--edes-wc-notice-size, 15px) * 0.8);
	font-weight: 700;
	height: calc(var(--edes-wc-notice-size, 15px) * 1.5);
	justify-content: center;
	left: auto;
	line-height: 1;
	margin: 0;
	position: static;
	top: auto;
	width: calc(var(--edes-wc-notice-size, 15px) * 1.5);
}

.edes-wc--notice-icon .woocommerce-message::before {
	content: "\2713";
}

.edes-wc--notice-icon .woocommerce-info::before {
	content: "i";
}

.edes-wc--notice-icon .woocommerce-error::before {
	content: "!";
}

/* ------------------------------------------------------------------- tables */

.edes-wc .shop_table {
	background: var(--edes-wc-table-row-bg, #fff);
	border: 1px solid var(--edes-wc-border, #e5e5e5);
	border-collapse: separate;
	border-radius: var(--edes-wc-radius, 8px);
	border-spacing: 0;
	margin: 0 0 var(--edes-wc-block-gap, 28px);
	/* Divi fixes the layout of this table, which splits the width evenly
	   between six columns regardless of what is in them — a product name gets
	   the same room as a two-character quantity. Automatic layout is what lets
	   the columns size themselves to their content.
	   !important because Divi's rule carries an ID; see the file header. */
	table-layout: auto !important;
	width: 100%;
}

.edes-wc .shop_table th,
.edes-wc .shop_table td {
	border: 0;
	border-bottom: 1px solid var(--edes-wc-border, #e5e5e5);
	padding: var(--edes-wc-table-cell-padding, 14px);
	text-align: left;
	vertical-align: middle;
}

.edes-wc .shop_table thead th {
	background: var(--edes-wc-table-head-bg, #fafafa);
	color: var(--edes-wc-table-head-color, #1f1f1f);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.85);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.edes-wc .shop_table tbody tr:last-child td,
.edes-wc .shop_table tfoot tr:last-child td,
.edes-wc .shop_table tfoot tr:last-child th {
	border-bottom: 0;
}

.edes-wc .shop_table .product-remove {
	padding-right: 0;
	width: 42px;
}

.edes-wc .shop_table .product-thumbnail {
	width: calc(var(--edes-wc-thumb-size, 64px) + var(--edes-wc-table-cell-padding, 14px) * 2);
}

.edes-wc .shop_table .product-thumbnail img {
	border-radius: var(--edes-wc-thumb-radius, 6px);
	display: block;
	height: auto;
	width: var(--edes-wc-thumb-size, 64px);
}

.edes-wc .shop_table .product-name a {
	font-weight: 600;
	text-decoration: none;
}

/*
 * Column widths are left to the browser, with one instruction: the numeric
 * columns may not wrap. Under an automatic table layout that is enough — each
 * takes exactly the width of its content and the product name inherits the
 * rest.
 *
 * There is deliberately no `width: 100%` on the name and no `width: 1%` on the
 * others. That is the classic trick for this, it works under an automatic
 * layout, and it is a disaster under a fixed one: the numbers are then taken
 * literally, so the name takes 97% and the other three columns collapse to
 * eight pixels each with their text overflowing across one another. Divi fixes
 * the layout of `.shop_table`, so that is exactly what happened on the live
 * cart — a table this plugin had made *worse* than it found it.
 */
.edes-wc .shop_table .product-price,
.edes-wc .shop_table .product-subtotal,
.edes-wc .shop_table .product-total,
.edes-wc .shop_table .product-quantity {
	white-space: nowrap;
}

/* Variation data and third-party item meta — the branding lines from the
   print-options plugin land here too. */
.edes-wc .shop_table .variation,
.edes-wc .shop_table .wc-item-meta,
.edes-wc .shop_table .product-name dl {
	color: var(--edes-wc-muted, #767676);
	font-size: var(--edes-wc-meta-size, 13px);
	margin: 6px 0 0;
}

/*
 * WooCommerce marks item meta up as a definition list, which browsers indent
 * and stack — so "Позиция на принта:" and its value end up on separate lines
 * at different depths. A two-track grid puts each label beside its value and
 * keeps long values wrapping under themselves rather than under the label.
 */
.edes-wc .shop_table .variation {
	display: grid;
	gap: 0 6px;
	grid-template-columns: auto minmax(0, 1fr);
}

.edes-wc .shop_table .variation dt,
.edes-wc .shop_table .wc-item-meta li strong {
	font-weight: 600;
	margin: 0;
}

.edes-wc .shop_table .variation dd {
	margin: 0;
}

.edes-wc .shop_table .variation p,
.edes-wc .shop_table .wc-item-meta p {
	margin: 0;
}

.edes-wc .shop_table .wc-item-meta {
	list-style: none;
	padding: 0;
}

.edes-wc .shop_table a.remove {
	align-items: center;
	border-radius: 50%;
	color: var(--edes-wc-remove-color, #c0392b) !important;
	display: inline-flex;
	font-size: 20px;
	height: 26px;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease;
	width: 26px;
}

.edes-wc .shop_table a.remove:hover {
	background: rgba(192, 57, 43, 0.1);
	color: var(--edes-wc-remove-color, #c0392b) !important;
}

.edes-wc .quantity input.qty {
	max-width: 90px;
	text-align: center;
}

/* -------------------------------------------------------------- form fields */

/*
 * WooCommerce lays its address fields out with floats — `.form-row-first` and
 * `.form-row-last` are 47% wide and floated left and right. That survives a
 * full-width form and falls apart in a narrow column: the pairs stop lining up,
 * labels of different lengths push their fields out of step, and a row with one
 * field leaves a hole. Replacing the whole thing with a grid fixes it at every
 * width at once, and needs no breakpoints — the columns simply stop fitting.
 *
 * The float declarations carry !important because Divi sets these widths
 * through a selector containing an ID, which no amount of class stacking beats.
 */
.edes-wc .woocommerce .woocommerce-billing-fields__field-wrapper,
.edes-wc .woocommerce-shipping-fields__field-wrapper,
.edes-wc .woocommerce .woocommerce-additional-fields__field-wrapper,
.edes-wc .woocommerce .woocommerce-address-fields__field-wrapper {
	display: grid;
	column-gap: var(--edes-wc-gap, 40px);
	/* Exactly two, not auto-fit: WooCommerce pairs its fields (first/last), and
	   a track count the browser chooses would put a pair into two of three
	   columns and leave a hole beside every pair. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edes-wc .woocommerce .form-row-first,
.edes-wc .woocommerce .form-row-last,
.edes-wc .woocommerce .form-row-wide,
.edes-wc .woocommerce .form-row.form-row-first,
.edes-wc .woocommerce .form-row.form-row-last {
	float: none !important;
	margin-right: 0 !important;
	width: auto !important;
}

.edes-wc .woocommerce .form-row-wide,
.edes-wc .woocommerce .form-row.notes,
.edes-wc .woocommerce .form-row.woocommerce-validated.form-row-wide {
	grid-column: 1 / -1;
}

.edes-wc .woocommerce .form-row {
	display: block;
	margin: 0 0 var(--edes-wc-field-gap, 14px);
	min-width: 0;
	padding: 0;
}

.edes-wc .woocommerce .form-row label {
	color: var(--edes-wc-heading, #1f1f1f);
	display: block;
	font-size: var(--edes-wc-label-size, 13px);
	font-weight: var(--edes-wc-label-weight, 600);
	margin-bottom: 5px;
}

.edes-wc .woocommerce .required {
	color: var(--edes-wc-required-color, #c0392b);
	text-decoration: none;
}

/* The first !important block — see the file header. */
.edes-wc .woocommerce input[type="text"],
.edes-wc .woocommerce input[type="email"],
.edes-wc .woocommerce input[type="tel"],
.edes-wc .woocommerce input[type="number"],
.edes-wc .woocommerce input[type="password"],
.edes-wc .woocommerce textarea,
.edes-wc .woocommerce select {
	background-color: var(--edes-wc-input-bg, #fff) !important;
	border: 1px solid var(--edes-wc-input-border, #d9d9d9) !important;
	border-radius: var(--edes-wc-input-radius, 8px) !important;
	color: var(--edes-wc-input-text, #1f1f1f) !important;
	font-size: var(--edes-wc-font-size, 15px) !important;
	line-height: 1.4 !important;
	min-height: var(--edes-wc-input-height, 46px);
	padding: 8px 14px !important;
	width: 100%;
}

.edes-wc .woocommerce textarea {
	min-height: calc(var(--edes-wc-input-height, 46px) * 2);
	padding-top: 12px !important;
}

.edes-wc .woocommerce input:focus,
.edes-wc .woocommerce textarea:focus,
.edes-wc .woocommerce select:focus {
	border-color: var(--edes-wc-input-focus, #f5ce1d) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edes-wc-input-focus, #f5ce1d) 30%, transparent);
	outline: none;
}

/* Country and state use select2, which builds its own markup and inherits
   nothing from the rules above. It renders its dropdown at the end of <body>,
   which is why that one selector is not scoped to .woocommerce. */
.edes-wc .woocommerce .select2-container .select2-selection--single {
	background: var(--edes-wc-input-bg, #fff);
	border: 1px solid var(--edes-wc-input-border, #d9d9d9);
	border-radius: var(--edes-wc-input-radius, 8px);
	height: var(--edes-wc-input-height, 46px);
}

.edes-wc .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--edes-wc-input-text, #1f1f1f);
	line-height: var(--edes-wc-input-height, 46px);
	padding-left: 14px;
}

.edes-wc .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: var(--edes-wc-input-height, 46px);
}

body.edes-wc .select2-dropdown {
	border-color: var(--edes-wc-input-border, #d9d9d9);
	border-radius: var(--edes-wc-input-radius, 8px);
	overflow: hidden;
}

body.edes-wc .select2-results__option--highlighted {
	background: var(--edes-wc-ms-option-hover, #fff6cc) !important;
	color: var(--edes-wc-ms-option-text, #1f1f1f) !important;
}

/* ----------------------------------------------------------------- buttons */

/* The second !important block, and for the same reason: Divi appends an arrow
   to anything it considers a button and paints it through an ID selector. */
.edes-wc .woocommerce .button,
.edes-wc .woocommerce button.button,
.edes-wc .woocommerce input.button,
.edes-wc .woocommerce a.button,
.edes-wc .woocommerce .checkout-button,
.edes-wc .woocommerce #place_order {
	background-color: var(--edes-wc-btn-alt-bg, #f2f2f2) !important;
	border: 0 !important;
	border-radius: var(--edes-wc-btn-radius, 8px) !important;
	color: var(--edes-wc-btn-alt-text, #1f1f1f) !important;
	cursor: pointer;
	display: inline-block;
	font-size: var(--edes-wc-btn-size, 16px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: var(--edes-wc-btn-padding-y, 16px) 28px !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background-color 0.15s ease, filter 0.15s ease;
}

.edes-wc .woocommerce .button::after,
.edes-wc .woocommerce button.button::after,
.edes-wc .woocommerce a.button::after,
.edes-wc .woocommerce #place_order::after {
	display: none !important;
}

.edes-wc .woocommerce .checkout-button,
.edes-wc .woocommerce #place_order,
.edes-wc .woocommerce .woocommerce-form-login .button,
.edes-wc .woocommerce button[name="woocommerce_checkout_place_order"] {
	background-color: var(--edes-wc-btn-bg, #f5ce1d) !important;
	color: var(--edes-wc-btn-text, #1f1f1f) !important;
}

.edes-wc .woocommerce .checkout-button:hover,
.edes-wc .woocommerce #place_order:hover,
.edes-wc .woocommerce button[name="woocommerce_checkout_place_order"]:hover {
	background-color: var(--edes-wc-btn-hover-bg, #e6c015) !important;
}

.edes-wc .woocommerce .button:hover {
	filter: brightness(0.96);
}

.edes-wc--btn-block .woocommerce .checkout-button,
.edes-wc--btn-block .woocommerce #place_order,
.edes-wc--btn-block .wc-proceed-to-checkout .button {
	display: block;
	width: 100%;
}

/* --- the button inside a notice ------------------------------------------ */

/*
 * Placed after the general button rules on purpose. These are overrides of
 * those rules, and an override that sits above what it overrides only wins
 * while its specificity happens to be higher — which stops being true the
 * moment somebody adds an element selector to the block above. Later in the
 * file it wins on both counts.
 *
 * The element selectors are spelled out for the same reason: the general block
 * lists `a.button`, `button.button` and `input.button`, so these have to match
 * that shape rather than rely on the bare class alone.
 */
.edes-wc--notice-btn-primary .woocommerce-message .button,
.edes-wc--notice-btn-primary .woocommerce-message a.button,
.edes-wc--notice-btn-primary .woocommerce-info .button,
.edes-wc--notice-btn-primary .woocommerce-info a.button {
	background-color: var(--edes-wc-btn-bg, #f5ce1d) !important;
	color: var(--edes-wc-btn-text, #1f1f1f) !important;
}

.edes-wc--notice-btn-link .woocommerce-message .button,
.edes-wc--notice-btn-link .woocommerce-message a.button,
.edes-wc--notice-btn-link .woocommerce-info .button,
.edes-wc--notice-btn-link .woocommerce-info a.button {
	background-color: transparent !important;
	color: var(--edes-wc-notice-accent) !important;
	padding: 0 !important;
	text-decoration: underline !important;
}


/* ---------------------------------------------------------- cart specifics */

.edes-wc--cart .woocommerce {
	display: grid;
	gap: var(--edes-wc-gap, 40px);
	grid-template-columns: minmax(0, 1fr);
}

.edes-wc--cart .woocommerce .woocommerce-notices-wrapper,
.edes-wc--cart .woocommerce .woocommerce-form-coupon-toggle,
.edes-wc--cart .woocommerce .cart-empty,
.edes-wc--cart .woocommerce .return-to-shop {
	grid-column: 1 / -1;
}

/*
 * The two-column cart, addressed by structure rather than by name.
 *
 * The question this asks is "which element are the totals a child of, and does
 * the cart form live somewhere inside it too" — because that element, whatever
 * it is called, is the one that has to become the grid.
 *
 * Two earlier attempts got this wrong, each in an instructive way:
 *
 * - A grid on `.woocommerce` assumed the form and the totals were its
 *   children. Divi's cart template wraps them a level deeper, so the grid
 *   landed on an element with one child and did nothing.
 * - Asking for an element with *both* as direct children fixed that and still
 *   missed this shop, where the totals sit outside `div.woocommerce`
 *   altogether: no single element has both as children, so again nothing
 *   matched and the totals stayed below the table.
 *
 * So: the totals must be a direct child, and the form need only be somewhere
 * inside. `body` is excluded — on the vanishing chance the markup is that flat,
 * turning the whole document into a grid would take the header with it.
 *
 * Placement is explicit rather than automatic. The totals are pinned to the
 * top of the second column and everything else goes in the first, so any other
 * child the container happens to have — a page title, a notice — stacks above
 * the table instead of being dealt into a grid cell of its own.
 *
 * Where `:has()` is unsupported the cart keeps the theme's own layout:
 * untouched, not broken.
 */
@media (min-width: 1024px) {
	.edes-wc--cart-two-col *:not(body):has(> .cart-collaterals):has(.woocommerce-cart-form) {
		align-items: start;
		column-gap: var(--edes-wc-gap, 40px);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, var(--edes-wc-cart-summary-width, 360px));
		row-gap: calc(var(--edes-wc-gap, 40px) * 0.5);
	}

	.edes-wc--cart-two-col *:not(body):has(> .cart-collaterals):has(.woocommerce-cart-form) > .cart-collaterals {
		align-self: start;
		grid-column: 2;
		/*
		 * Spanning rows, not sitting in one.
		 *
		 * Pinned to row 1 alone, the totals made row 1 as tall as themselves,
		 * and the cart table — which lands in row 2, after the notices — was
		 * pushed down past the whole summary. Spanning lets their height be
		 * distributed across the rows the first column actually uses, so the
		 * two columns start level.
		 *
		 * A generous but finite span: each row it names but does not need is an
		 * empty implicit row of zero height, whereas an earlier `span 9999` was
		 * genuinely nine thousand of them.
		 */
		grid-row: 1 / span 30;
	}

	.edes-wc--cart-two-col *:not(body):has(> .cart-collaterals):has(.woocommerce-cart-form) > *:not(.cart-collaterals) {
		grid-column: 1;
		/* Auto margins on a grid item mean "shrink to fit", not "centre" — see
		   the note on .woocommerce above for what that costs here. */
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}
}

/*
 * Themes — Divi among them — give these two a percentage width and a float, so
 * that the classic cart lays out in two columns on its own. Inside a grid the
 * float is ignored but the width is not, and the result is two columns each
 * sized to a fraction of a fraction. Resetting both is what makes the grid the
 * only thing deciding the widths.
 *
 * !important because Divi's rule carries an ID; see the file header.
 */
.edes-wc .woocommerce-cart-form,
.edes-wc .cart-collaterals {
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
	width: 100% !important;
}

.edes-wc .woocommerce-cart-form {
	margin: 0;
}

.edes-wc .cart_totals {
	background: var(--edes-wc-summary-bg, #fafafa);
	border: 1px solid var(--edes-wc-summary-border, #e5e5e5);
	border-radius: var(--edes-wc-summary-radius, 12px);
	padding: var(--edes-wc-summary-padding, 24px);
}

.edes-wc .cart_totals > h2 {
	font-size: var(--edes-wc-summary-heading-size, 20px);
}

/*
 * The totals box asks about its own width too, for the same reason the cart
 * table does: it is narrow on a phone *and* narrow in the second column of a
 * two-column cart, and a label column taking 38% of 360px leaves the courier
 * options wrapping three words to a line either way.
 */
.edes-wc .cart_totals {
	container-name: edeswctotals;
	container-type: inline-size;
}

@container edeswctotals (max-width: 420px) {
	.edes-wc .cart_totals .shop_table tr,
	.edes-wc .cart_totals .shop_table th,
	.edes-wc .cart_totals .shop_table td {
		display: block;
		width: auto;
	}

	.edes-wc .cart_totals .shop_table th {
		border-bottom: 0;
		padding-bottom: 2px;
	}

	.edes-wc .cart_totals .shop_table td {
		padding-top: 0;
	}

	/* The final total is the one row that still reads better on one line. The
	   `tr` is spelled out because the rule above it — `.shop_table tr` — carries
	   an element selector and would otherwise win on specificity. */
	.edes-wc .cart_totals .shop_table tr.order-total {
		align-items: baseline;
		display: flex;
		gap: 10px;
		justify-content: space-between;
	}

	.edes-wc .cart_totals .shop_table tr.order-total th,
	.edes-wc .cart_totals .shop_table tr.order-total td {
		padding-bottom: 0;
		padding-top: calc(var(--edes-wc-summary-row-padding, 10px) * 1.4);
	}
}

.edes-wc .cart_totals .shop_table {
	background: none;
	border: 0;
	margin-bottom: 16px;
}

.edes-wc .cart_totals .shop_table th,
.edes-wc .cart_totals .shop_table td,
.edes-wc #order_review .shop_table tfoot th,
.edes-wc #order_review .shop_table tfoot td {
	border-bottom: 1px solid var(--edes-wc-summary-row-border, #ececec);
	padding: var(--edes-wc-summary-row-padding, 10px) 0;
}

/*
 * The label column. A width here rather than on the value column because the
 * labels are the predictable half — "Общо", "Доставка" — while the value can
 * be anything from a price to a four-line list of couriers.
 */
.edes-wc .cart_totals .shop_table th,
.edes-wc #order_review .shop_table tfoot th {
	color: var(--edes-wc-summary-label-color, #1f1f1f);
	font-weight: 600;
	vertical-align: top;
	width: var(--edes-wc-summary-label-width, 38%);
}

.edes-wc .cart_totals .shop_table tr:last-child th,
.edes-wc .cart_totals .shop_table tr:last-child td {
	border-bottom: 0;
}

.edes-wc .cart_totals .order-total th,
.edes-wc .cart_totals .order-total td {
	border-bottom: 0;
	color: var(--edes-wc-total-color, #1f1f1f);
	font-size: var(--edes-wc-total-size, 22px);
	font-weight: 700;
	padding-top: calc(var(--edes-wc-summary-row-padding, 10px) * 1.4);
}

/* --- the shipping block inside the totals -------------------------------- */

/*
 * WooCommerce puts the shipping label in the row's own `th` and the methods in
 * its `td`. Bulgarisation's cart-shipping template does it differently: a
 * full-width title row, then a full-width row of methods. Which of the two a
 * shop gets depends on whether their template override is in play on that
 * page, so both shapes are styled — and the plugin never assumes it knows
 * which one it is looking at.
 */
.edes-wc .woocommerce-shipping-totals th,
.edes-wc .woo-bg--shipping-title th {
	font-size: var(--edes-wc-shipping-title-size, 15px);
}

.edes-wc .woocommerce-shipping-totals td ul#shipping_method,
.edes-wc .woo-bg--shipping-methods td ul#shipping_method {
	margin-bottom: 8px;
}

.edes-wc .woocommerce-shipping-destination {
	color: var(--edes-wc-destination-color, #767676);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.9);
	line-height: 1.5;
	margin: 8px 0 0;
}

.edes-wc .woocommerce-shipping-destination strong {
	color: var(--edes-wc-text, #333);
}

.edes-wc .shipping-calculator-button {
	color: var(--edes-wc-calculator-color, #2271b1);
	display: inline-block;
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.9);
	margin-top: 4px;
}

.edes-wc .shipping-calculator-form {
	margin-top: 12px;
}

.edes-wc .woocommerce-shipping-contents {
	color: var(--edes-wc-muted, #767676);
	margin: 6px 0 0;
}

/*
 * The row under the cart table: the coupon field and "Обновяване на количката".
 *
 * Note what this does *not* do: give the cell `display: flex`. That looks like
 * the obvious way to lay out its two children, and it quietly destroys the
 * table — changing a `td`'s display takes it out of the table formatting
 * context, the browser wraps it in an anonymous cell, and the cell stops
 * spanning the row. Measured: 182px inside a 960px table. So the cell stays a
 * cell, and only its children are arranged.
 */
.edes-wc td.actions {
	background: var(--edes-wc-table-head-bg, #fafafa);
	text-align: left;
}

/* WooCommerce disables this button until a quantity actually changes, and a
   disabled control that looks identical to an enabled one is a small lie. */
.edes-wc td.actions button[name="update_cart"]:disabled,
.edes-wc td.actions input[name="update_cart"]:disabled {
	cursor: default;
	opacity: 0.5;
}

/* The same setting that makes the checkout button full width. The update
   button is the cart's equivalent, and leaving it inline while its counterpart
   on the next page stretched was the visible inconsistency. */
.edes-wc--btn-block td.actions button[name="update_cart"],
.edes-wc--btn-block td.actions input[name="update_cart"] {
	display: block;
	width: 100%;
}

.edes-wc td.actions .coupon {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.edes-wc td.actions .coupon input#coupon_code {
	max-width: 240px;
	width: auto;
}

.edes-wc td.actions .coupon label {
	display: none;
}

/* The coupon field, hidden behind a link this plugin inserts next to it. The
   link is added, never wrapped around anything — see the script for why that
   distinction is load-bearing here. */
.edes-wc--coupon-accordion td.actions .coupon {
	display: none;
}

.edes-wc--coupon-accordion td.actions .coupon.is-open {
	display: flex;
}

.edes-wc .edes-wc-coupon-toggle {
	background: none;
	border: 0;
	color: var(--edes-wc-text, #333);
	cursor: pointer;
	font: inherit;
	margin-bottom: 10px;
	padding: 0;
	text-decoration: underline;
}

/* ------------------------------------------------------ checkout specifics */

/*
 * 1100px, not 901px. The right-hand column has to hold a courier office picker
 * with its own address fields, so anything under about 340px is unusable — and
 * at 901px, minus the gap and the theme's own padding, that is what it gets.
 * The number is the width at which the layout is genuinely better, not the
 * width at which it technically fits.
 */
@media (min-width: 1100px) {
	.edes-wc--checkout-two-col form.checkout {
		align-items: start;
		column-gap: var(--edes-wc-gap, 40px);
		display: grid;
		grid-template-areas:
			"customer heading"
			"customer review";
		grid-template-columns: var(--edes-wc-checkout-left, 58%) minmax(340px, 1fr);
	}

	.edes-wc--checkout-two-col #customer_details {
		grid-area: customer;
		min-width: 0;
	}

	.edes-wc--checkout-two-col #order_review_heading {
		grid-area: heading;
		min-width: 0;
	}

	.edes-wc--checkout-two-col #order_review {
		grid-area: review;
		min-width: 0;
	}

	/* Sticky needs the item not to be stretched to the row height, which is
	   what align-self does here. */
	.edes-wc--checkout-two-col.edes-wc--sticky-summary #order_review {
		align-self: start;
		position: sticky;
		top: var(--edes-wc-sticky-offset, 110px);
	}

}

@media (min-width: 1024px) {
	.edes-wc--cart-two-col.edes-wc--sticky-summary .cart-collaterals {
		align-self: start;
		position: sticky;
		top: var(--edes-wc-sticky-offset, 110px);
	}
}

/*
 * Billing and shipping side by side is WooCommerce's default, and the setting
 * chooses between that and stacking them.
 *
 * !important on both declarations: WooCommerce floats these at 47% and Divi
 * re-states the width through a selector carrying an ID, so without it the
 * setting appeared to do nothing on the live checkout — the two columns stayed
 * side by side inside an already narrow column.
 */
.edes-wc--address-stack .col2-set .col-1,
.edes-wc--address-stack .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
}

.edes-wc--address-stack .col2-set .col-2 {
	margin-top: var(--edes-wc-block-gap, 28px);
}

/*
 * Even when the shop asked for them side by side, two sub-columns inside the
 * left half of a two-column checkout is one division too many below a
 * comfortable width. The setting still holds on a wide screen; this only takes
 * over where honouring it would produce four columns of about 200px.
 */
@media (max-width: 1400px) {
	.edes-wc--checkout-two-col .col2-set .col-1,
	.edes-wc--checkout-two-col .col2-set .col-2 {
		float: none !important;
		width: 100% !important;
	}

	.edes-wc--checkout-two-col .col2-set .col-2:not(:empty) {
		margin-top: var(--edes-wc-block-gap, 28px);
	}
}

.edes-wc #order_review {
	background: var(--edes-wc-summary-bg, #fafafa);
	border: 1px solid var(--edes-wc-summary-border, #e5e5e5);
	border-radius: var(--edes-wc-summary-radius, 12px);
	padding: var(--edes-wc-summary-padding, 24px);
}

.edes-wc #order_review .shop_table {
	background: none;
	border: 0;
	margin-bottom: 0;
}

.edes-wc #order_review .shop_table th,
.edes-wc #order_review .shop_table td {
	padding: 10px 0;
}

.edes-wc #order_review .shop_table thead th {
	background: none;
	border-bottom: 1px solid var(--edes-wc-border, #e5e5e5);
	padding-bottom: 12px;
}

.edes-wc #order_review .order-total th,
.edes-wc #order_review .order-total td {
	color: var(--edes-wc-total-color, #1f1f1f);
	font-size: var(--edes-wc-total-size, 22px);
	font-weight: 700;
}

.edes-wc #order_review_heading {
	margin-top: 0;
}

/* ------------------------------------------- shipping and payment methods */

.edes-wc ul#shipping_method,
.edes-wc .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.edes-wc ul#shipping_method li,
.edes-wc .woocommerce ul.wc_payment_methods li.wc_payment_method {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.edes-wc ul#shipping_method li label,
.edes-wc .woocommerce ul.wc_payment_methods li.wc_payment_method label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-weight: 500;
	gap: 10px;
	margin: 0;
}

.edes-wc--method-cards ul#shipping_method li,
.edes-wc--method-cards .woocommerce ul.wc_payment_methods li.wc_payment_method {
	background: var(--edes-wc-method-bg, #fff);
	border: 1px solid var(--edes-wc-method-border, #e5e5e5);
	border-radius: var(--edes-wc-radius, 8px);
	padding: var(--edes-wc-method-padding, 14px);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.edes-wc--method-cards ul#shipping_method li:has(input:checked),
.edes-wc--method-cards .woocommerce ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	background: var(--edes-wc-method-active-bg, #fffdf2);
	border-color: var(--edes-wc-method-active, #f5ce1d);
}

.edes-wc--method-cards ul#shipping_method li label,
.edes-wc--method-cards .woocommerce ul.wc_payment_methods li.wc_payment_method label {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.edes-wc .woocommerce ul.wc_payment_methods li.wc_payment_method img {
	height: var(--edes-wc-gateway-icon, 28px);
	margin: 0 0 0 auto;
	max-width: none;
	width: auto;
}

.edes-wc .payment_box {
	background: var(--edes-wc-notice-bg, #fbfbfb);
	border-radius: var(--edes-wc-radius-sm, 5px);
	color: var(--edes-wc-muted, #767676);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.92);
	margin: 10px 0 0;
	padding: 12px 14px;
}

.edes-wc .payment_box::before {
	display: none;
}

.edes-wc .woocommerce-privacy-policy-text,
.edes-wc .woocommerce-terms-and-conditions-wrapper {
	color: var(--edes-wc-muted, #767676);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.9);
}

/* ------------------------------------ Bulgarisation: Еконт, Спиди and co. */

/*
 * Everything below exists only when Bulgarisation for WooCommerce is active,
 * which is why it is gated behind the class the body_class filter adds only
 * then. The courier pickers are a Vue app mounted into an empty container, so
 * this styles what their component renders — it never assumes a structure of
 * its own, and nothing here moves anything.
 */
.edes-wc--woobg .woo-bg-additional-fields {
	display: block;
	margin-top: 12px;
}

.edes-wc--woobg .woo-bg--group-title {
	color: var(--edes-wc-group-title, #1f1f1f);
	display: block;
	font-size: var(--edes-wc-label-size, 13px);
	font-weight: 700;
	margin: 14px 0 6px;
}

.edes-wc--woobg .woo-bg--group-description {
	color: var(--edes-wc-muted, #767676);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.88);
	margin-bottom: 8px;
}

.edes-wc--woobg .woo-bg--office-error,
.edes-wc--woobg .woo-bg--locker-error,
.edes-wc--woobg .woo-bg--apm-error {
	color: var(--edes-wc-courier-error, #c0392b);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.9);
	margin-top: 6px;
}

.edes-wc--woobg .woo-bg--shipping-title th {
	background: none;
	border-bottom: 0;
	padding-bottom: 4px;
}

.edes-wc--woobg .woo-bg--shipping-methods td {
	padding-top: 0;
}

/*
 * The address detail fields the couriers add: a street picker followed by
 * number, block, entrance, floor and flat.
 *
 * The last five are two or three characters wide in practice, so they get a
 * small minimum and share a row. The street picker gets the whole row — it is
 * a searchable dropdown showing a full address, and squeezed into a sixth of
 * the column it becomes unusable. That was the visible break on the live
 * checkout: everything shared one 140px minimum inside a 280px column.
 *
 * `:has()` is used because the picker is mounted by Bulgarisation's Vue app
 * into a wrapper this plugin cannot name; where it is unsupported the fields
 * simply share the row as before, which is untidy rather than broken.
 */
.edes-wc--woobg .woo-bg-econt-address-details,
.edes-wc--woobg .woo-bg-speedy-address-details {
	display: grid;
	gap: calc(var(--edes-wc-field-gap, 14px) * 0.6);
	grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
}

.edes-wc--woobg .woo-bg-econt-address-details > *:has(.multiselect),
.edes-wc--woobg .woo-bg-speedy-address-details > *:has(.multiselect),
.edes-wc--woobg .woo-bg-econt-address-details > .multiselect,
.edes-wc--woobg .woo-bg-speedy-address-details > .multiselect,
.edes-wc--woobg .woo-bg-econt-address-details--quarter {
	grid-column: 1 / -1;
}

/* Inside these cramped fields the placeholder is the only label there is, so it
   must stay legible rather than being clipped mid-word. */
.edes-wc--woobg .woo-bg-econt-address-details input,
.edes-wc--woobg .woo-bg-speedy-address-details input {
	min-width: 0;
	padding-left: 10px !important;
	padding-right: 10px !important;
	text-align: center;
}

/* --- vue-multiselect, the office/city picker ----------------------------- */

.edes-wc--woobg .multiselect {
	color: var(--edes-wc-input-text, #1f1f1f);
	font-size: var(--edes-wc-font-size, 15px);
	min-height: var(--edes-wc-ms-height, 46px);
}

.edes-wc--woobg .multiselect__tags {
	align-items: center;
	background: var(--edes-wc-input-bg, #fff);
	border: 1px solid var(--edes-wc-ms-border, #d9d9d9);
	border-radius: var(--edes-wc-ms-radius, 8px);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--edes-wc-font-size, 15px);
	min-height: var(--edes-wc-ms-height, 46px);
	padding: 0 40px 0 14px;
}

.edes-wc--woobg .multiselect--active .multiselect__tags {
	border-color: var(--edes-wc-ms-focus, #f5ce1d);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edes-wc-ms-focus, #f5ce1d) 30%, transparent);
}

.edes-wc--woobg .multiselect--disabled .multiselect__tags {
	background: #f5f5f5;
	opacity: 0.7;
}

.edes-wc--woobg .multiselect__input,
.edes-wc--woobg .multiselect__single,
.edes-wc--woobg .multiselect__placeholder {
	background: transparent;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit;
	font-size: var(--edes-wc-font-size, 15px) !important;
	line-height: 1.4;
	margin: 0;
	min-height: 0;
	padding: 0 !important;
}

.edes-wc--woobg .multiselect__placeholder {
	color: var(--edes-wc-muted, #767676);
}

.edes-wc--woobg .multiselect__select {
	height: var(--edes-wc-ms-height, 46px);
	line-height: var(--edes-wc-ms-height, 46px);
}

.edes-wc--woobg .multiselect__content-wrapper {
	background: var(--edes-wc-input-bg, #fff);
	border: 1px solid var(--edes-wc-ms-border, #d9d9d9);
	border-radius: var(--edes-wc-ms-radius, 8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	margin-top: 4px;
	max-height: var(--edes-wc-ms-menu-height, 260px) !important;
	overflow-y: auto;
	z-index: 60;
}

.edes-wc--woobg .multiselect__content {
	margin: 0;
	padding: 4px;
}

.edes-wc--woobg .multiselect__element {
	list-style: none;
	margin: 0;
}

.edes-wc--woobg .multiselect__option {
	border-radius: var(--edes-wc-radius-sm, 5px);
	color: var(--edes-wc-text, #333);
	line-height: 1.35;
	min-height: 0;
	padding: 10px 12px;
	white-space: normal;
}

.edes-wc--woobg .multiselect__option--highlight {
	background: var(--edes-wc-ms-option-hover, #fff6cc);
	color: var(--edes-wc-ms-option-text, #1f1f1f);
}

.edes-wc--woobg .multiselect__option--highlight::after {
	background: transparent;
	color: var(--edes-wc-muted, #767676);
}

.edes-wc--woobg .multiselect__option--selected {
	background: var(--edes-wc-ms-selected-bg, #f5ce1d);
	color: var(--edes-wc-accent-text, #1f1f1f);
	font-weight: 600;
}

.edes-wc--woobg .multiselect__option--group {
	background: var(--edes-wc-table-head-bg, #fafafa) !important;
	color: var(--edes-wc-muted, #767676) !important;
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.85);
	font-weight: 700;
	text-transform: uppercase;
}

.edes-wc--woobg .multiselect__spinner {
	background: var(--edes-wc-input-bg, #fff);
	height: calc(var(--edes-wc-ms-height, 46px) - 4px);
}

.edes-wc--woobg .multiselect__spinner::before,
.edes-wc--woobg .multiselect__spinner::after {
	border-top-color: var(--edes-wc-accent, #f5ce1d);
}

/* ------------------------------------------------- confirmation (thank you) */

.edes-wc--thankyou .woocommerce-order-overview {
	background: var(--edes-wc-summary-bg, #fafafa);
	border: 1px solid var(--edes-wc-summary-border, #e5e5e5);
	border-radius: var(--edes-wc-summary-radius, 12px);
	display: grid;
	gap: 4px 20px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none;
	margin: 0 0 var(--edes-wc-block-gap, 28px);
	padding: var(--edes-wc-summary-padding, 24px);
}

.edes-wc--thankyou .woocommerce-order-overview li {
	border: 0 !important;
	color: var(--edes-wc-muted, #767676);
	font-size: calc(var(--edes-wc-font-size, 15px) * 0.85);
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.edes-wc--thankyou .woocommerce-order-overview li strong {
	color: var(--edes-wc-heading, #1f1f1f);
	display: block;
	font-size: var(--edes-wc-font-size, 15px);
	margin-top: 4px;
	text-transform: none;
}

.edes-wc--thankyou .woocommerce-columns--addresses {
	display: grid;
	gap: var(--edes-wc-gap, 40px);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.edes-wc .col2-set .col-1,
	.edes-wc .col2-set .col-2 {
		float: none !important;
		width: 100% !important;
	}

	.edes-wc .col2-set .col-2 {
		margin-top: var(--edes-wc-block-gap, 28px);
	}

	/* One column of fields below this width, whatever the pair would have been:
	   two 200px fields plus a gap no longer fit on a phone. */
	.edes-wc .woocommerce .woocommerce-billing-fields__field-wrapper,
	.edes-wc .woocommerce-shipping-fields__field-wrapper,
	.edes-wc .woocommerce .woocommerce-address-fields__field-wrapper {
		column-gap: 0;
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * The compact cart row.
 *
 * Driven by the width of the *table*, not of the screen. A six-column cart
 * table needs about 700px whoever is looking at it, and it can be starved of
 * that width in two quite different situations: a phone, and a desktop where
 * the shop chose the two-column cart and gave the table only the left half.
 * A viewport media query answers the first and is blind to the second — which
 * is why the products table turned to jumbled text the moment the two-column
 * option was switched on.
 *
 * A container query asks the question that actually matters. The cart form
 * declares itself a container above, and everything below applies whenever
 * that container is too narrow for a table, wherever the narrowness came from.
 *
 * Everything the row needs is restated here rather than inherited from
 * WooCommerce's own mobile CSS: hiding the head, the data-title labels, the
 * cell resets. A layout that only looks right while another stylesheet happens
 * to be loaded is not a layout — and that CSS can be dequeued by an
 * optimisation plugin on any given day.
 *
 * Browsers without container queries keep WooCommerce's own responsive table,
 * which is the layout a shop without this plugin gets.
 */
.edes-wc .woocommerce-cart-form {
	container-name: edeswccart;
	container-type: inline-size;
}

/* compact:start — the two blocks below must stay identical; the harness fails
   the build if they drift. There is no way to share a rule set between a media
   query and a container query in CSS, and this layout genuinely needs both. */

/*
 * By screen width. This is the one that has to hold on a phone, whatever the
 * markup around the table looks like and whether or not the browser supports
 * container queries. Relying on the container query alone left the real cart
 * with WooCommerce's own mobile layout on top of this plugin's table rules —
 * and a row wider than the screen.
 */
@media (max-width: 768px) {
	.edes-wc--compact-mobile .shop_table_responsive thead {
		display: none;
	}

	.edes-wc--compact-mobile .shop_table_responsive tbody tr {
		border-bottom: 1px solid var(--edes-wc-border, #e5e5e5);
		column-gap: 14px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		padding: var(--edes-wc-table-cell-padding, 14px);
		position: relative;
	}

	.edes-wc--compact-mobile .shop_table_responsive td {
		border: 0;
		display: block;
		padding: 2px 0;
		text-align: left !important;
		width: auto !important;
	}

	/* The label WooCommerce puts in every cell's data-title. Left-aligned and
	   inline rather than floated right, which is what makes the row read as a
	   list instead of a table pretending to be one. */
	.edes-wc--compact-mobile .shop_table_responsive tbody td::before {
		color: var(--edes-wc-muted, #767676);
		content: attr(data-title) ": ";
		float: none;
		font-size: calc(var(--edes-wc-font-size, 15px) * 0.85);
		font-weight: 600;
		margin-right: 6px;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-name::before,
	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail::before,
	.edes-wc--compact-mobile .shop_table_responsive td.product-remove::before,
	.edes-wc--compact-mobile .shop_table_responsive td.actions::before {
		content: none;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail {
		grid-row: span 4;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail img {
		width: calc(var(--edes-wc-thumb-size, 64px) * 1.1);
	}

	/* The remove control sits over the row's top corner: at this width it is
	   the only cell whose position matters more than its order. */
	.edes-wc--compact-mobile .shop_table_responsive td.product-remove {
		position: absolute;
		right: 6px;
		top: 6px;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-name {
		font-weight: 600;
		margin-bottom: 4px;
	}

	.edes-wc--compact-mobile .shop_table_responsive tbody tr:has(> td.actions),
	.edes-wc--compact-mobile .shop_table_responsive td.actions {
		display: block;
		grid-column: 1 / -1;
	}

	.edes-wc td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.edes-wc td.actions .button {
		width: 100%;
	}

	.edes-wc td.actions .coupon input#coupon_code {
		max-width: none;
		width: 100%;
	}

	.edes-wc .quantity input.qty {
		max-width: 80px;
	}

	/*
	 * The nowrap the base table rules put on the numeric columns is what turns
	 * a narrow screen into a horizontally scrolling one. It is right for a real
	 * table and wrong the moment the row stops being one, and its selector is
	 * more specific than the plain `td` rule above — so it has to be undone by
	 * name rather than by hoping.
	 */
	.edes-wc--compact-mobile .shop_table_responsive td.product-price,
	.edes-wc--compact-mobile .shop_table_responsive td.product-quantity,
	.edes-wc--compact-mobile .shop_table_responsive td.product-subtotal,
	.edes-wc--compact-mobile .shop_table_responsive td.product-total {
		white-space: normal;
	}

	/* A product name with no spaces — an SKU, a long slug — would otherwise set
	   the row's minimum width on its own. */
	.edes-wc--compact-mobile .shop_table_responsive td.product-name {
		overflow-wrap: anywhere;
	}
}

/*
 * By table width. This is the one the screen cannot answer: a desktop where
 * the shop chose the two-column cart and gave the table only the left half is
 * just as short of room as a phone, at any viewport size.
 */
@container edeswccart (max-width: 700px) {
	.edes-wc--compact-mobile .shop_table_responsive thead {
		display: none;
	}

	.edes-wc--compact-mobile .shop_table_responsive tbody tr {
		border-bottom: 1px solid var(--edes-wc-border, #e5e5e5);
		column-gap: 14px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		padding: var(--edes-wc-table-cell-padding, 14px);
		position: relative;
	}

	.edes-wc--compact-mobile .shop_table_responsive td {
		border: 0;
		display: block;
		padding: 2px 0;
		text-align: left !important;
		width: auto !important;
	}

	/* The label WooCommerce puts in every cell's data-title. Left-aligned and
	   inline rather than floated right, which is what makes the row read as a
	   list instead of a table pretending to be one. */
	.edes-wc--compact-mobile .shop_table_responsive tbody td::before {
		color: var(--edes-wc-muted, #767676);
		content: attr(data-title) ": ";
		float: none;
		font-size: calc(var(--edes-wc-font-size, 15px) * 0.85);
		font-weight: 600;
		margin-right: 6px;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-name::before,
	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail::before,
	.edes-wc--compact-mobile .shop_table_responsive td.product-remove::before,
	.edes-wc--compact-mobile .shop_table_responsive td.actions::before {
		content: none;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail {
		grid-row: span 4;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-thumbnail img {
		width: calc(var(--edes-wc-thumb-size, 64px) * 1.1);
	}

	/* The remove control sits over the row's top corner: at this width it is
	   the only cell whose position matters more than its order. */
	.edes-wc--compact-mobile .shop_table_responsive td.product-remove {
		position: absolute;
		right: 6px;
		top: 6px;
	}

	.edes-wc--compact-mobile .shop_table_responsive td.product-name {
		font-weight: 600;
		margin-bottom: 4px;
	}

	.edes-wc--compact-mobile .shop_table_responsive tbody tr:has(> td.actions),
	.edes-wc--compact-mobile .shop_table_responsive td.actions {
		display: block;
		grid-column: 1 / -1;
	}

	.edes-wc td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.edes-wc td.actions .button {
		width: 100%;
	}

	.edes-wc td.actions .coupon input#coupon_code {
		max-width: none;
		width: 100%;
	}

	.edes-wc .quantity input.qty {
		max-width: 80px;
	}

	/*
	 * The nowrap the base table rules put on the numeric columns is what turns
	 * a narrow screen into a horizontally scrolling one. It is right for a real
	 * table and wrong the moment the row stops being one, and its selector is
	 * more specific than the plain `td` rule above — so it has to be undone by
	 * name rather than by hoping.
	 */
	.edes-wc--compact-mobile .shop_table_responsive td.product-price,
	.edes-wc--compact-mobile .shop_table_responsive td.product-quantity,
	.edes-wc--compact-mobile .shop_table_responsive td.product-subtotal,
	.edes-wc--compact-mobile .shop_table_responsive td.product-total {
		white-space: normal;
	}

	/* A product name with no spaces — an SKU, a long slug — would otherwise set
	   the row's minimum width on its own. */
	.edes-wc--compact-mobile .shop_table_responsive td.product-name {
		overflow-wrap: anywhere;
	}
}

/* compact:end */