/* ================================================
   RED POINT — Cart & Checkout
   ================================================
   There is NO design for these pages. The Figma file holds only Homepage (109:210),
   Category (109:795) and Product Details (109:1330) — no cart, checkout, account or legal
   page. This maps WooCommerce's markup onto the design's existing vocabulary:

     surface    --rp-panel / --rp-surface on --rp-bg
     type       Futurism headings, Google Sans body
     accent     #FF3B3B for the primary action and focus
     fields     the Newsletter's translucent field (109:751), at a 12px radius rather than
                its 32px pill — a pill reads well on one email input, but on a column of
                address fields it fights the eye and wastes the corners
     buttons    the pill from the VIVE / buy-box CTAs

   ── WHICH CHECKOUT ─────────────────────────────────────────────────────────
   These pages are built with Elementor's `woocommerce-checkout-page` /
   `woocommerce-cart` widgets, which render the CLASSIC WooCommerce form.

   They were previously WooCommerce BLOCK pages (`wp:woocommerce/checkout`), and an earlier
   version of this file targeted `wc-block-*` accordingly. That approach could not work: the
   block checkout is client-rendered React on a plain white page, so the styling could only
   ever reach the wrapper, never the form. Everything below targets classic markup. If the
   pages are ever switched back to blocks, this file stops applying — that is intentional,
   not a silent failure.

   Scoped to the two Elementor widget wrappers so it cannot leak onto any other page.
   ================================================ */

.elementor-widget-woocommerce-checkout-page,
.elementor-widget-woocommerce-cart,
.elementor-widget-woocommerce-my-account {
	font-family: 'Google Sans', sans-serif;
	color: #EDEDED;

	/* Breathing room above and below. Set here rather than on the container: the widget is
	   what has to clear the header, and this survives the page being re-saved in Elementor,
	   which would otherwise reset container padding. */
	padding-block: 60px 80px;

	/* ----------------------------------------------------------
	   ELEMENTOR'S THEMING VARIABLES — the correct way to style this widget.

	   Elementor paints the checkout from custom properties, e.g.

	       .…e-checkout__order_review { background: var(--sections-background-color, #fff) }
	       .…product-name            { color: var(--order-summary-items-color, #000) }

	   Overriding the resulting declarations with `!important` is fighting the widget; setting
	   the variables works WITH it, reaches every element the widget paints (including states
	   and elements that only appear later, like a chosen gateway), and survives Elementor
	   updates that reshuffle selectors.

	   This block is why the panels stayed near-black and the order-summary text stayed dim no
	   matter what `background-color` / `color` rules were written against the classes: the
	   widget was re-painting them from these variables afterwards. */
	--sections-background-color: #252525;
	--sections-border-color: rgba(255, 255, 255, 0.08);
	--sections-border-type: solid;
	--sections-border-radius: 16px;
	--sections-title-color: #FFFFFF;
	--sections-secondary-title-color: #FFFFFF;
	--sections-descriptions-color: #C9C9C9;
	--sections-messages-color: #EDEDED;
	--sections-checkboxes-color: #EDEDED;
	--sections-radio-buttons-color: #EDEDED;

	/* The order-summary table — its default is #000, which is what made it unreadable. */
	--order-summary-items-color: #EDEDED;
	--order-summary-totals-color: #FFFFFF;
	--order-summary-variations-color: #C9C9C9;

	--forms-labels-color: #C9C9C9;
	--forms-fields-normal-color: #FFFFFF;
	--forms-fields-focus-color: #FFFFFF;
	--forms-fields-border-radius: 12px;

	--links-normal-color: #FF3B3B;
	--links-hover-color: #FF3B3B;

	--purchase-button-normal-text-color: #FFFFFF;
	--purchase-button-hover-text-color: #FFFFFF;
}

/* ------------------------------------------------
   CART — its own variable set
   ------------------------------------------------
   The cart widget exposes a DIFFERENT set of properties from the checkout widget: product
   links, the quantity box, the remove icon and the totals each have their own, and most
   default to #000 or a light grey. Setting them is what turns the cart dark rather than
   chasing its selectors.

   Discover them the same way:
     curl …/elementor-pro/assets/css/widget-woocommerce-cart-rtl.min.css \
       | grep -oE "var\(--[a-z0-9-]+" | sort -u
   ------------------------------------------------ */
.elementor-widget-woocommerce-cart {
	--sections-background-color: #252525;
	--sections-border-color: rgba(255, 255, 255, 0.08);
	--sections-title-color: #FFFFFF;
	--sections-descriptions-color: #C9C9C9;

	/* Product names read as links, so without this they inherit the accent and the whole
	   column comes out red. Accent belongs on hover, not at rest. */
	--product-link-normal-color: #FFFFFF;
	--product-link-hover-color: #FF3B3B;

	--order-summary-color: #EDEDED;
	--order-summary-title-color: #FFFFFF;
	--order-summary-variations-color: #C9C9C9;
	--order-summary-items-divider-color: rgba(255, 255, 255, 0.12);
	--order-summary-quantity-border-color: rgba(255, 255, 255, 0.16);
	--order-summary-remove-icon-normal-color: #9A9A9A;
	--order-summary-remove-icon-hover-color: #FF3B3B;

	--totals-color: #EDEDED;
	--totals-divider-color: rgba(255, 255, 255, 0.12);

	--forms-fields-normal-color: #FFFFFF;
	--forms-fields-focus-color: #FFFFFF;
	--forms-fields-focus-border-color: #FF3B3B;
	--forms-fields-border-radius: 12px;

	/* "עדכן עגלה" / "החל קופון" — secondary actions. */
	--forms-buttons-normal-text-color: #FFFFFF;
	--forms-buttons-hover-text-color: #FFFFFF;
	--forms-buttons-hover-background-color: #E02F2F;
	--forms-buttons-border-color: rgba(255, 255, 255, 0.16);
	--forms-buttons-border-radius: 100px;

	/* "התקדם לצ׳ק אאוט" — the primary action. */
	--checkout-button-normal-text-color: #FFFFFF;
	--checkout-button-hover-text-color: #FFFFFF;
	--checkout-button-border-radius: 100px;

	--links-normal-color: #FF3B3B;
	--links-hover-color: #FF3B3B;
}

/* ------------------------------------------------
   ORDER RECEIVED / THANK YOU
   ------------------------------------------------
   This is NOT a separate page or template. Elementor Pro has no thank-you document type and
   no matching condition — the order-received view is an ENDPOINT on /checkout/, rendered by
   the same `woocommerce-checkout-page` widget. So it inherits the checkout's band, its
   variables and its spacing, and only WooCommerce's own confirmation markup needs styling.

   Reachable at /checkout/order-received/{id}/ once an order exists. With no payment gateway
   enabled none can, so this is written from WooCommerce's markup rather than verified on a
   real order — worth a look the first time one goes through.
   ------------------------------------------------ */

/* Vertically centre the confirmation.

   The checkout container carries `min-height: 60vh`, which is right when the form fills it
   but leaves the thank-you stranded against the top of a tall empty band — most visibly when
   WooCommerce has no order to show and prints only its generic message, which is a single
   line. Centring makes the short case look deliberate, and the long case (overview + items
   table + addresses, taller than 60vh) simply flows normally and is unaffected. */
body.woocommerce-order-received .elementor-widget-woocommerce-checkout-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 46vh;
}

/* With no order there is one line of text, so it reads better centred and held to a
   comfortable measure rather than stretched across 1320px. */
body.woocommerce-order-received .woocommerce-notice--success {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

/* "ההזמנה התקבלה" — the success banner. Green edge rather than accent: this is the one
   moment on the storefront that should read as confirmation, not as an alert. */
.elementor-widget-woocommerce-checkout-page .woocommerce-notice--success,
.elementor-widget-woocommerce-checkout-page .woocommerce-thankyou-order-received {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-inline-start: 3px solid var(--rp-cat-green, #36E07A);
	border-radius: 16px;
	background-color: #252525;
	font-family: 'Futurism', sans-serif;
	font-size: 24px;
	color: #FFFFFF;
}

/* The summary strip — order number, date, total, payment method. */
.elementor-widget-woocommerce-checkout-page ul.woocommerce-order-overview,
.elementor-widget-woocommerce-checkout-page ul.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: #252525;
	list-style: none;
}

.elementor-widget-woocommerce-checkout-page ul.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	color: var(--rp-muted, #818181);
	list-style: none;
}

.elementor-widget-woocommerce-checkout-page ul.woocommerce-order-overview li strong {
	font-size: 17px;
	font-weight: 500;
	color: #FFFFFF;
}

/* Order details + customer address tables. */
.elementor-widget-woocommerce-checkout-page .woocommerce-order-details,
.elementor-widget-woocommerce-checkout-page .woocommerce-customer-details {
	padding: 24px;
	margin-bottom: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: #252525;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-order-details__title,
.elementor-widget-woocommerce-checkout-page .woocommerce-column__title {
	font-family: 'Futurism', sans-serif;
	font-size: 22px;
	color: #FFFFFF;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details,
.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details th,
.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details td,
.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details * {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #EDEDED !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details tfoot tr:last-child th,
.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details tfoot tr:last-child td,
.elementor-widget-woocommerce-checkout-page .woocommerce-table--order-details tfoot tr:last-child * {
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	font-style: normal;
	color: #EDEDED;
}

/* ------------------------------------------------
   MY ACCOUNT — its own variable set again
   ------------------------------------------------
   A third widget with a third set of properties. Notably this one DOES expose a field
   background (`--forms-fields-normal-background-color`), which cart and checkout do not —
   so the login/address forms need no hand-written override at all.

   The account area is tabbed (dashboard / orders / addresses / details), so the `--tabs-*`
   and `--tables-*` groups matter as much as the sections here.
   ------------------------------------------------ */
.elementor-widget-woocommerce-my-account {
	--sections-background-color: #252525;
	--sections-border-color: rgba(255, 255, 255, 0.08);
	--sections-border-type: solid;
	--sections-border-radius: 16px;

	--general-text-color: #EDEDED;
	--typography-section-titles-color: #FFFFFF;
	--login-messages-color: #EDEDED;
	--variations-color: #C9C9C9;
	--checkboxes-color: #EDEDED;
	--payment-methods-radio-buttons-color: #EDEDED;

	/* Fields — this widget gives us a background variable, unlike the other two. */
	--forms-fields-normal-background-color: rgba(255, 255, 255, 0.06);
	--forms-fields-normal-color: #FFFFFF;
	--forms-fields-focus-background-color: rgba(255, 255, 255, 0.1);
	--forms-fields-focus-color: #FFFFFF;
	--forms-fields-border-radius: 12px;
	--forms-labels-color: #C9C9C9;

	--forms-buttons-normal-text-color: #FFFFFF;
	--forms-buttons-hover-text-color: #FFFFFF;
	--forms-buttons-border-radius: 100px;

	/* The account navigation. */
	--tabs-normal-color: #C9C9C9;
	--tabs-hover-color: #FFFFFF;
	--tabs-active-color: #FFFFFF;
	--tabs-border-color: rgba(255, 255, 255, 0.12);
	--tabs-hover-border-color: rgba(255, 255, 255, 0.24);
	--tabs-active-border-color: #FF3B3B;
	--tabs-divider-color: rgba(255, 255, 255, 0.12);
	--tabs-border-radius: 12px;

	/* Orders / downloads tables. */
	--tables-title-color: #FFFFFF;
	--tables-items-color: #EDEDED;
	--tables-links-normal-color: #FF3B3B;
	--tables-links-hover-color: #FF3B3B;
	--tables-divider-border-color: rgba(255, 255, 255, 0.12);

	--links-normal-color: #FF3B3B;
	--links-hover-color: #FF3B3B;
}

/* Headings inside the account area come from the theme, not a variable. */
.elementor-widget-woocommerce-my-account h2,
.elementor-widget-woocommerce-my-account h3,
.elementor-widget-woocommerce-my-account legend {
	font-family: 'Futurism', sans-serif;
	color: #FFFFFF !important;
}

/* ------------------------------------------------
   ACCOUNT NAVIGATION — hardcoded, no variable
   ------------------------------------------------
   The `--tabs-*` group covers text and borders but NOT the tab background. Elementor writes
   those literally:

       .…MyAccount-navigation ul li a           { background:#f9fafa }
       .…MyAccount-navigation ul li.is-active a { background:#f1f2f3 }

   which is why the nav rendered as white pills on the dark page while every other variable
   took effect. Selectors below mirror Elementor's own so specificity matches. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px;
	color: #C9C9C9 !important;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

/* The open tab: filled a shade up, with the accent marking it rather than a colour wash. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
	background: #252525 !important;
	border-color: var(--rp-accent, #FF3B3B) !important;
	color: #FFFFFF !important;
}

/* The dashboard/content column beside the nav. */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content {
	color: #EDEDED;
}

/* Orders / addresses tables — WooCommerce draws these light. */
.elementor-widget-woocommerce-my-account table,
.elementor-widget-woocommerce-my-account table th,
.elementor-widget-woocommerce-my-account table td {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #EDEDED !important;
}

/* ------------------------------------------------
   ACCOUNT FORM FIELDS — hardcoded, no variable
   ------------------------------------------------
   `--forms-fields-normal-background-color` sounds like it covers the forms, but it only
   reaches the SELECT2 containers. The real inputs are written literally:

       .…e-my-account-tab:not(…) .woocommerce .form-row .input-text { background:#f9fafa }
       .…e-my-account-tab:not(…) .woocommerce .form-row select      { background:#f9fafa }

   which is why the account-details form came out as a column of white boxes while every
   other variable on this widget took effect. Type selectors are listed as well as
   `.input-text`, because the password fields on this screen do not all carry that class. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .form-row .input-text,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .form-row select,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input[type="text"],
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input[type="email"],
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input[type="password"],
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input[type="tel"],
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce textarea {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 12px !important;
	color: #FFFFFF !important;
	min-height: 48px;
	padding: 12px 16px;
	box-sizing: border-box;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input:focus,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce select:focus,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce textarea:focus {
	border-color: var(--rp-accent, #FF3B3B) !important;
	outline: none;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce input::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

/* The show/hide-password eye sits INSIDE the field and is invisible against the new field
   colour.

   It is NOT a font glyph and NOT on `::after`. WooCommerce draws it as an inline SVG
   data-URI `background-image` on **`::before`**, with the stroke colour baked into the URI:

       .show-password-input::before { background-image: url('data:image/svg+xml,<svg …') }

   So `color` cannot touch it at any specificity — the only ways to recolour it are to
   replace the data URI or to filter it. `brightness(0) invert(1)` forces any source colour
   to black and then to white, so it does not matter what shade WooCommerce ships or what it
   changes to in a future release.

   `.display-password` swaps in a second SVG for the "shown" state; it needs the same
   treatment or the eye turns dark again the moment it is clicked. */
.elementor-widget-woocommerce-my-account .show-password-input::before,
.elementor-widget-woocommerce-my-account .show-password-input.display-password::before {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* Field hints — "השם שיופיע במקטע החשבון ובביקורות" — and the fieldset legends. */
.elementor-widget-woocommerce-my-account .woocommerce-form__label-for-checkbox span,
.elementor-widget-woocommerce-my-account em,
.elementor-widget-woocommerce-my-account small,
.elementor-widget-woocommerce-my-account .description {
	color: #9A9A9A !important;
	font-style: normal;
}

/* ------------------------------------------------
   NOTICES BACK IN FLOW ON THESE PAGES
   ------------------------------------------------
   redpoint.css makes `.woocommerce-notices-wrapper` `position: fixed`, which is right on the
   HOME and PRODUCT pages: the header there is transparent and the next section pulls up
   underneath it, so a notice in flow lands in the header's own zone and wrecks the overlap.

   Cart, checkout and account have no overlapping hero — they open with a plain band — so
   there is nothing to protect, and the fixed toast just floats over the header instead.
   Here it goes back into the document, inside the content column where it belongs.

   The wrapper sits inside `.woocommerce`, so in flow it lands above the form rather than
   over the masthead. */
body.woocommerce-account .woocommerce-notices-wrapper,
body.woocommerce-cart .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-notices-wrapper {
	position: static;
	transform: none;
	width: auto;
	max-width: none;
	margin: 0 0 24px;
	pointer-events: auto;
}

body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
	box-shadow: none;
}

/* WooCommerce prints the error as a <ul> of <li>, so the marker and the browser's default
   list indent have to go or it reads as a bulleted list rather than a notice. */
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-message,
.woocommerce-notices-wrapper ul.woocommerce-info {
	list-style: none;
	padding-inline-start: 22px;
}

.woocommerce-notices-wrapper ul.woocommerce-error li,
.woocommerce-notices-wrapper ul.woocommerce-message li,
.woocommerce-notices-wrapper ul.woocommerce-info li {
	list-style: none;
	margin: 0;
	color: inherit;
}

.woocommerce-notices-wrapper ul.woocommerce-error li::marker {
	content: none;
}

/* "שגיאה:" — the bold lead-in. */
.woocommerce-notices-wrapper .woocommerce-error strong {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   ACCOUNT BUTTONS — hardcoded cyan
   ------------------------------------------------
   `--forms-buttons-*` covers text, border and radius but NOT the background. Elementor
   writes that literally as `background:#5bc0de` across six selectors:

       .login .button          .register .button
       .woocommerce-ResetPassword .button
       .woocommerce-EditAccountForm .button
       .woocommerce-address-fields .button
       #add_payment_method #place_order

   The earlier rule only caught buttons inside `.woocommerce-MyAccount-content`, which does
   not exist when logged out — so the LOGIN button stayed cyan while the account-details one
   went red. All six are listed here. */
.elementor-widget-woocommerce-my-account .login .button,
.elementor-widget-woocommerce-my-account .register .button,
.elementor-widget-woocommerce-my-account .woocommerce-ResetPassword .button,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .button,
.elementor-widget-woocommerce-my-account .woocommerce-address-fields .button,
.elementor-widget-woocommerce-my-account #add_payment_method #place_order,
.elementor-widget-woocommerce-my-account .woocommerce button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	border: 0 !important;
	border-radius: var(--rp-pill, 100px) !important;
	background: var(--rp-accent, #FF3B3B) !important;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-my-account .login .button:hover,
.elementor-widget-woocommerce-my-account .register .button:hover,
.elementor-widget-woocommerce-my-account .woocommerce button[type="submit"]:hover {
	background: #E02F2F !important;
	color: #FFFFFF !important;
}

/* "זכור אותי" and the other native checkboxes — `accent-color` recolours the browser's own
   control, which needs no markup change and keeps the native focus ring. */
.elementor-widget-woocommerce-my-account input[type="checkbox"],
.elementor-widget-woocommerce-my-account input[type="radio"] {
	accent-color: var(--rp-accent, #FF3B3B);
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* ------------------------------------------------
   ACCOUNT NOTICES
   ------------------------------------------------
   The empty states — "אף הזמנה לא נעשתה עדיין", "אין הורדות זמינות" — are WooCommerce
   notices, not Elementor's, so no variable reaches them. They ship with a light background
   and a blue accent bar, which is what the white slab on the Orders tab was.

   The earlier notice rules were scoped to the cart/checkout widgets, so they never applied
   here. */
.elementor-widget-woocommerce-my-account .woocommerce-message,
.elementor-widget-woocommerce-my-account .woocommerce-info,
.elementor-widget-woocommerce-my-account .woocommerce-error,
.elementor-widget-woocommerce-my-account .woocommerce-Message {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 24px;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 16px;
	background-color: #252525 !important;
	color: #EDEDED !important;
	list-style: none;
}

/* WooCommerce's own ::before glyph is positioned for its light box. */
.elementor-widget-woocommerce-my-account .woocommerce-message::before,
.elementor-widget-woocommerce-my-account .woocommerce-info::before,
.elementor-widget-woocommerce-my-account .woocommerce-error::before {
	display: none;
}

/* An error keeps the accent edge so it still reads as a problem. */
.elementor-widget-woocommerce-my-account .woocommerce-error {
	border-inline-start: 3px solid var(--rp-accent, #FF3B3B) !important;
}

/* The CTA inside a notice — "לעיין במוצרים". `margin-inline-start:auto` pushes it to the far
   side of the row instead of sitting against the text. */
.elementor-widget-woocommerce-my-account .woocommerce-message .button,
.elementor-widget-woocommerce-my-account .woocommerce-info .button,
.elementor-widget-woocommerce-my-account .woocommerce-Button,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button {
	margin-inline-start: auto;
	min-height: 44px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B) !important;
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-Button:hover,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button:hover {
	background-color: #E02F2F !important;
	color: #FFFFFF !important;
}

/* ------------------------------------------------
   CART — the bits with no variable
   ------------------------------------------------ */

/* The totals panel is already a card; the wrapper around it must not be a second one. */
.elementor-widget-woocommerce-cart .cart-collaterals,
.elementor-widget-woocommerce-cart .cart_totals > h2 {
	background: transparent !important;
	border: 0 !important;
}

/* Quantity box and the coupon field — Elementor hardcodes these light. */
.elementor-widget-woocommerce-cart .quantity input.qty,
.elementor-widget-woocommerce-cart input#coupon_code,
.elementor-widget-woocommerce-cart .coupon .input-text {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 12px !important;
	color: #FFFFFF !important;
	min-height: 44px;
}

.elementor-widget-woocommerce-cart input#coupon_code::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

/* Secondary buttons sit on the panel, so they read as outlined rather than solid — only the
   checkout CTA should carry the accent fill. */
.elementor-widget-woocommerce-cart button[name="update_cart"],
.elementor-widget-woocommerce-cart .button[name="update_cart"] {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #EDEDED !important;
}

.elementor-widget-woocommerce-cart button[name="update_cart"]:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #FFFFFF !important;
}

/* ------------------------------------------------
   ELEMENTOR'S OWN CHECKOUT SURFACES
   ------------------------------------------------
   The widget wraps each section in its own card and paints them WHITE. On the dark band
   those read as three bright slabs, which is the single biggest thing making this page look
   unfinished.

   Turning them into --rp-panel cards is what makes the page look like the rest of the site.
   `!important` is needed on the background: Elementor prints these colours as inline custom
   properties from the widget's own style controls, which outrank any stylesheet rule.

   The two columns are NOT structured the same way, which is the trap here: only the
   order-review column has a `__column-inner` wrapper. The billing column paints its white
   card on `.woocommerce-billing-fields` directly, so styling the inner wrapper alone turns
   one side dark and leaves the other white. Both paths are listed below. */
.e-checkout__order_review,
.e-checkout__order_review-2,
.e-checkout-payment,
.e-coupon-box,
.elementor-widget-woocommerce-checkout-page .woocommerce-billing-fields,
.elementor-widget-woocommerce-checkout-page .woocommerce-shipping-fields,
.elementor-widget-woocommerce-checkout-page .woocommerce-additional-fields,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order {
	background-color: #252525 !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	color: #EDEDED;
}

/* ------------------------------------------------
   FIELDS — hard override
   ------------------------------------------------
   Elementor's checkout CSS styles the controls with rules more specific than a plain
   `.elementor-widget-… .input-text`, so the fields stayed pale on the dark card. Matching on
   the element inside `.e-checkout` and forcing the three properties that matter is the only
   thing that reliably wins, and it covers every field type at once — including the ones
   WooCommerce adds later (shipping, account, coupon). */
.elementor-widget-woocommerce-checkout-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.elementor-widget-woocommerce-checkout-page select,
.elementor-widget-woocommerce-checkout-page textarea,
.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 12px !important;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-checkout-page input::placeholder,
.elementor-widget-woocommerce-checkout-page textarea::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

/* Labels and the surrounding prose — WooCommerce and Elementor both set these near-black. */
.elementor-widget-woocommerce-checkout-page label,
.elementor-widget-woocommerce-checkout-page .form-row label,
.elementor-widget-woocommerce-checkout-page p,
.elementor-widget-woocommerce-checkout-page th,
.elementor-widget-woocommerce-checkout-page td,
.elementor-widget-woocommerce-checkout-page .woocommerce-privacy-policy-text,
.elementor-widget-woocommerce-checkout-page .woocommerce-privacy-policy-text p {
	color: var(--rp-body, #E6E6E6) !important;
}

.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #FFFFFF !important;
}

/* The order-review panel is now the card itself, so its inner table must not draw a second
   one — otherwise it renders as a box inside a box. */
.elementor-widget-woocommerce-checkout-page #order_review {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* ------------------------------------------------
   WRAPPERS MUST NOT BE CARDS
   ------------------------------------------------
   Elementor already makes each SECTION its own card — order review, coupon box and payment
   each get `margin: 0 0 24px` and `padding: 16px 30px` from `--sections-*`.

   `.e-checkout__column-inner` is the wrapper holding all three. Styling it as a card too put
   a large panel BEHIND the cards, so the coupon strip appeared to run the wrapper's full
   width while the review card looked inset — a card on a card. The wrapper stays
   transparent; the sections carry the background, inside their own margins. */
.e-checkout__container,
.e-checkout__column,
.e-checkout__column-inner,
.e-checkout {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* ------------------------------------------------
   COUPON NUDGE
   ------------------------------------------------
   `.e-woocommerce-coupon-nudge` is the <p> INSIDE `.e-coupon-box`:

       <div class="e-coupon-box">
         <p class="e-woocommerce-coupon-nudge e-checkout-secondary-title">יש לך קופון? …</p>

   It was in the card list above, so it drew a second panel inside the first — a card on a
   card. The box is the card; the paragraph is just text on it. */
.e-woocommerce-coupon-nudge,
.e-coupon-anchor,
.e-coupon-anchor-description {
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.e-coupon-anchor-description {
	display: block;
	margin-bottom: 10px;
	color: #C9C9C9 !important;
}

.e-checkout-secondary-title,
.e-checkout-review-order-table thead th {
	font-family: 'Futurism', sans-serif;
	color: #FFFFFF !important;
}

/* ------------------------------------------------
   ORDER REVIEW TABLE — readability
   ------------------------------------------------
   Elementor renders this table in a dim grey that is close to unreadable on --rp-panel. The
   whole table is lifted to --rp-body, with the column headers and the final total pushed to
   white so the eye has somewhere to land.

   `!important` here is belt-and-braces: the stylesheet is now enqueued AFTER Elementor's
   (see redpoint_checkout_style_deps), so plain rules should already win — but the widget's
   own style controls can still emit element-scoped colours, and this is the one table the
   customer actually has to read.

   Colours are LITERAL here, not `var(--rp-body)`. If the token ever fails to resolve on this
   page the variable falls back silently and the text goes dim again — which is precisely the
   symptom being chased. A hex cannot fail.

   The `*` is deliberate: WooCommerce wraps every price in `<bdi>` inside a `<span>`, and the
   product name in its own element. Colouring only the cell leaves those children inheriting
   whatever Elementor set. This is the one table the customer must be able to read.

   THE CLASS IS `woocommerce-checkout-review-order-table`, not `e-checkout-…`. Elementor's
   STYLESHEET is named `e-checkout-review-order-table`, and scraping class-like strings out of
   the page picked that up — but no element carries it. Several rounds of colour changes did
   nothing because every selector missed. Read the element, not the asset names. */
#order_review_heading {
	font-family: 'Futurism', sans-serif;
	font-size: 28px;
	color: #FFFFFF !important;
	margin-bottom: 20px;
}

.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table * {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #EDEDED !important;
	font-family: 'Google Sans', sans-serif;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	font-size: 15px;
	padding: 12px 0;
}

/* Column headers — מוצר / סכום ביניים. */
.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout-review-order-table thead th * {
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: 500;
}

/* Subtotal row. */
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .cart-subtotal * {
	color: #EDEDED !important;
}

/* סה"כ — the line the customer is looking for. */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total * {
	color: #FFFFFF !important;
	font-size: 22px;
	font-weight: 700;
}

/* The "× 2" — should recede rather than compete with the product name. */
.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-checkout-review-order-table .product-quantity * {
	color: #9A9A9A !important;
	font-weight: 400;
}

/* Column headers — מוצר / סכום ביניים. Listed after the blanket rule above so they win. */
.e-checkout-review-order-table thead th,
.e-checkout-review-order-table thead th * {
	color: #FFFFFF !important;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.02em;
}

/* The line the customer is actually looking for. */
.e-checkout-review-order-table .order-total th,
.e-checkout-review-order-table .order-total td,
.e-checkout-review-order-table .order-total * {
	color: #FFFFFF !important;
	font-size: 22px;
	font-weight: 700;
}

/* The "× 2" quantity WooCommerce appends after the product name — should recede, not compete. */
.e-checkout-review-order-table .product-quantity,
.e-checkout-review-order-table .product-quantity * {
	color: #9A9A9A !important;
}

/* ------------------------------------------------
   HEADINGS */
.elementor-widget-woocommerce-checkout-page h3,
.elementor-widget-woocommerce-checkout-page .woocommerce-billing-fields > h3,
.elementor-widget-woocommerce-checkout-page #order_review_heading,
.elementor-widget-woocommerce-cart h2 {
	font-family: 'Futurism', sans-serif;
	font-size: 28px;
	line-height: 1.1;
	color: #FFFFFF;
	margin-bottom: 20px;
}

/* ------------------------------------------------
   FIELDS */
.elementor-widget-woocommerce-checkout-page .form-row label,
.elementor-widget-woocommerce-cart label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--rp-muted, #818181);
}

.elementor-widget-woocommerce-checkout-page .input-text,
.elementor-widget-woocommerce-checkout-page select,
.elementor-widget-woocommerce-checkout-page textarea,
.elementor-widget-woocommerce-cart .input-text,
.elementor-widget-woocommerce-cart select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.06);
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	box-sizing: border-box;
}

.elementor-widget-woocommerce-checkout-page textarea {
	min-height: 110px;
}

.elementor-widget-woocommerce-checkout-page .input-text:focus,
.elementor-widget-woocommerce-checkout-page select:focus,
.elementor-widget-woocommerce-checkout-page textarea:focus {
	border-color: var(--rp-accent, #FF3B3B);
	outline: none;
	box-shadow: none;
}

.elementor-widget-woocommerce-checkout-page ::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

/* WooCommerce swaps country/state for Select2, which renders its own box that ignores the
   rules above — it needs its own selectors or those two fields stay white. */
.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single {
	height: 48px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.06);
}

.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 34px;
	color: #FFFFFF;
}

.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

/* The dropdown panel is portalled to <body>, so it sits OUTSIDE the widget wrapper and can
   only be reached globally. */
.select2-dropdown {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: #252525;
	color: var(--rp-body, #E6E6E6);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--rp-accent, #FF3B3B);
	color: #FFFFFF;
}

.select2-search--dropdown .select2-search__field {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

/* ------------------------------------------------
   ORDER REVIEW / TOTALS PANEL
   ------------------------------------------------
   `#order_review` sits INSIDE `.e-checkout__order_review`, which is already the #252525 card.
   Giving it a background of its own produced the near-black slab inside a card — it must stay
   transparent. The cart's `.cart_totals` has no such parent, so it becomes the card itself. */
.elementor-widget-woocommerce-checkout-page #order_review {
	padding: 0;
	border: 0;
	background: transparent !important;
	box-sizing: border-box;
}

.elementor-widget-woocommerce-cart .cart_totals {
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: #252525 !important;
	box-sizing: border-box;
}

.elementor-widget-woocommerce-checkout-page .shop_table,
.elementor-widget-woocommerce-cart .shop_table {
	border: 0;
	background: transparent;
	color: var(--rp-body, #E6E6E6);
}

.elementor-widget-woocommerce-checkout-page .shop_table th,
.elementor-widget-woocommerce-checkout-page .shop_table td,
.elementor-widget-woocommerce-cart .shop_table th,
.elementor-widget-woocommerce-cart .shop_table td {
	padding: 14px 0;
	border-color: rgba(255, 255, 255, 0.1);
	color: inherit;
}

.elementor-widget-woocommerce-checkout-page .order-total th,
.elementor-widget-woocommerce-checkout-page .order-total td,
.elementor-widget-woocommerce-cart .order-total th,
.elementor-widget-woocommerce-cart .order-total td {
	font-size: 22px;
	font-weight: 700;
	color: #FFFFFF;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-Price-amount,
.elementor-widget-woocommerce-cart .woocommerce-Price-amount {
	color: inherit;
}

/* ------------------------------------------------
   PAYMENT BOX
   ------------------------------------------------
   Selectors are anchored on `#payment`, the id WooCommerce gives this block. An id beats
   anything Elementor emits by class, so these cannot quietly lose the way the class-based
   rules did. Literal hex for the same reason the review table uses them. */
#payment.woocommerce-checkout-payment,
#payment {
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: #252525 !important;
}

/* The <ul> wrapper draws its own background and a rule under the list. */
#payment ul.payment_methods,
#payment ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	list-style: none;
}

/* The notice sitting inside the box — currently "no payment methods available". Sunk a shade
   BELOW the panel so it reads as inset rather than as another card stacked on top. */
#payment .woocommerce-info,
#payment .woocommerce-error,
#payment .woocommerce-message {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background-color: #1A1A1A !important;
	color: #EDEDED !important;
}

#payment .woocommerce-info::before,
#payment .woocommerce-error::before {
	display: none;
}

#payment .woocommerce-no-available-payment-methods-message {
	color: #EDEDED !important;
}

/* A chosen gateway's description panel. */
#payment div.payment_box {
	border-radius: 12px;
	background-color: #1A1A1A !important;
	color: #EDEDED !important;
}

/* WooCommerce draws a triangle above that panel in its own colour. */
#payment div.payment_box::before {
	border-bottom-color: #1A1A1A !important;
}

/* Privacy / terms text under the button. */
#payment .woocommerce-privacy-policy-text,
#payment .woocommerce-privacy-policy-text p,
#payment .woocommerce-terms-and-conditions-wrapper {
	color: #C9C9C9 !important;
	font-size: 14px;
	line-height: 1.6;
}

#payment .woocommerce-privacy-policy-link {
	color: var(--rp-accent, #FF3B3B) !important;
}

/* ------------------------------------------------
   BUTTONS */
/* `!important` and the id: Elementor's checkout widget ships its own purchase-button colour
   (it renders cyan out of the box) as an inline custom property from its style controls,
   which beats any plain rule here. */
.elementor-widget-woocommerce-checkout-page #place_order,
.elementor-widget-woocommerce-checkout-page #place_order,
.elementor-widget-woocommerce-cart .checkout-button,
.elementor-widget-woocommerce-cart .button {
	width: 100%;
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B) !important;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-checkout-page #place_order:hover,
.elementor-widget-woocommerce-checkout-page #place_order:hover,
.elementor-widget-woocommerce-cart .checkout-button:hover,
.elementor-widget-woocommerce-cart .button:hover {
	background-color: #E02F2F !important;
	color: #FFFFFF !important;
}

.elementor-widget-woocommerce-checkout-page a,
.elementor-widget-woocommerce-cart a {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   CART QUANTITY */
.elementor-widget-woocommerce-cart .quantity input.qty {
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	text-align: center;
}

.elementor-widget-woocommerce-cart .product-remove a.remove {
	color: var(--rp-muted, #818181) !important;
}

.elementor-widget-woocommerce-cart .product-remove a.remove:hover {
	background: none !important;
	color: var(--rp-accent, #FF3B3B) !important;
}

/* ------------------------------------------------
   NOTICES INSIDE THE FORM
   ------------------------------------------------
   The floating toast in redpoint.css handles notices printed above the content. These are
   the ones WooCommerce prints INSIDE the checkout — coupon prompts, login prompts, the
   "no payment methods" warning — which stay in flow. */
.elementor-widget-woocommerce-checkout-page .woocommerce-info,
.elementor-widget-woocommerce-checkout-page .woocommerce-message,
.elementor-widget-woocommerce-checkout-page .woocommerce-error,
.elementor-widget-woocommerce-cart .woocommerce-info,
.elementor-widget-woocommerce-cart .woocommerce-message {
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background-color: #252525;
	color: var(--rp-body, #E6E6E6);
	list-style: none;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-error,
.elementor-widget-woocommerce-cart .woocommerce-error {
	border-inline-start: 3px solid var(--rp-accent, #FF3B3B);
}

.elementor-widget-woocommerce-checkout-page .woocommerce-info::before,
.elementor-widget-woocommerce-checkout-page .woocommerce-message::before,
.elementor-widget-woocommerce-checkout-page .woocommerce-error::before {
	display: none;
}

/* Inline field validation. */
.elementor-widget-woocommerce-checkout-page .woocommerce-invalid input.input-text,
.elementor-widget-woocommerce-checkout-page .woocommerce-invalid select {
	border-color: var(--rp-accent, #FF3B3B);
}

.elementor-widget-woocommerce-checkout-page .required {
	color: var(--rp-accent, #FF3B3B);
	text-decoration: none;
}

/* ------------------------------------------------
   EMPTY CART */
.elementor-widget-woocommerce-cart .cart-empty {
	font-family: 'Futurism', sans-serif;
	font-size: 28px;
	color: #FFFFFF;
}

/* ================================================
   PHONES
   ================================================
   This file had no media queries at all — the cart and checkout were only ever styled for a
   desktop column.

   THE GUTTER IS ELEMENTOR'S, NOT OURS, and it is the whole problem. Both pages are Elementor
   containers carrying 60px of left/right padding, chosen for desktop and applied at every
   width. Measured on the live cart at a 500px viewport:

     div.elementor-element-xxxxxx   w=604  padding 60px/60px    <- 120px gone
     div.e-con-inner                w=484

   A fifth of a phone screen is spent on margin before a single field is drawn, and it is worse
   on a real 390px handset. Elementor writes that padding into the page's own generated CSS as
   `.elementor-7 .elementor-element.elementor-element-xxxxxx{...}` — specificity (0,3,0), no
   media query — so !important is the only thing that reaches it. The element id is unique to
   the page, and would change if the container were ever rebuilt, so the selector hangs off the
   BODY CLASS WooCommerce sets instead. That survives an editor rebuild; an id would not.
   ================================================ */
@media (max-width: 767px) {

	body.woocommerce-cart .e-con,
	body.woocommerce-checkout .e-con,
	body.woocommerce-account .e-con {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* With the outer gutter down to 16px these panels can give their 24px back to the fields.
	   They sit INSIDE the container, so the two were compounding: 60 + 24 left a form field
	   about 330px wide on a 500px screen. */
	.elementor-widget-woocommerce-cart .cart_totals,
	.elementor-widget-woocommerce-checkout-page .woocommerce-order-details,
	.elementor-widget-woocommerce-checkout-page .woocommerce-customer-details,
	.elementor-widget-woocommerce-checkout-page ul.woocommerce-order-overview,
	.elementor-widget-woocommerce-checkout-page ul.woocommerce-thankyou-order-details,
	#payment.woocommerce-checkout-payment,
	#payment {
		padding: 16px;
	}

	/* The overview strip is a row of label/value pairs with a 40px column gap — at phone width
	   it has no room for columns and reads better stacked. */
	.elementor-widget-woocommerce-checkout-page ul.woocommerce-order-overview,
	.elementor-widget-woocommerce-checkout-page ul.woocommerce-thankyou-order-details {
		gap: 12px;
	}
}