/*
 * YG Checkout — the brand skin for the five pages WordPress still renders:
 * cart, checkout, order-received, order-pay, my-account.
 *
 * SCOPE. yg-checkout-tweaks.php enqueues this file on those five pages and
 * nowhere else, so the selectors here are deliberately unscoped. Body-class
 * scoping was tried first and is the wrong tool: `.woocommerce-checkout`
 * covers the checkout but not order-received, `.woocommerce-account` covers
 * my-account but not order-pay, and every rule had to be written four times
 * with one of the four silently missing. The enqueue is the scope.
 *
 * TOKENS. These are the storefront's own values, copied from
 * src/app/globals.css. An earlier version of this file referenced
 * `var(--wp--preset--color--gold)` and friends, which belong to the
 * `yg-checkout` block theme — NOT the active theme (Hello Elementor child) —
 * so every one resolved to nothing and `background-color: var(--undefined)`
 * left the place-order button with no background at all. Literals only; do
 * not reintroduce a `--wp--preset--*` reference until this install runs a
 * theme that defines them.
 *
 * RTL. Logical properties only (inline-start/end, block-start/end) — the
 * site is RTL via WordPress's own dir="rtl", not via a direction toggle here.
 *
 * PAYMENT GATEWAY. PayPlus runs in samePageIframe mode (height 800,
 * auto-height off), so its card form is a document this stylesheet has no
 * business inside. Nothing here names `iframe`, `.payplus-*`, `#payplus*`,
 * `.wc_payment_method` or `.wc-block-components-payment-method-content`, and
 * no rule anywhere in this file sets `overflow`, `transform`, `filter`,
 * `zoom`, `contain` or `max-height` on anything that could be an ancestor of
 * that iframe. The two rules that do reach WooCommerce's own radio-option
 * chrome (below) change colour and nothing else, by design.
 */

:root {
	/* Ground and paper */
	--yg-canvas: #fdfaf3;
	--yg-ivory: #fffae9;
	--yg-ivory-deep: #f7efd9;
	--yg-surface: #fffdf8;

	/* Ink */
	--yg-ink: #14110f;
	--yg-ink-soft: #5f564c;

	/* Metal */
	--yg-gold: #b28f59;
	--yg-gold-light: #e6c76a;
	--yg-gold-deep: #a0764d;
	--yg-bronze: #7e5c30;
	--yg-bronze-deep: #6a4d28;

	/* Hairlines */
	--yg-line: #ece0c4;
	--yg-line-strong: #d9c79f;

	/* Geometry — --yg-radius-media is the storefront's one media corner. */
	--yg-radius-media: 1.15rem;
	--yg-radius: 0.75rem;
	--yg-radius-sm: 0.5rem;
	--yg-shell: 1120px;

	/* Type. Google Sans is the storefront's face — body AND display, per
	   src/app/layout.tsx and the --font-display token in globals.css. It
	   carries a full Hebrew subset (U+0590–05FF) on the Google Fonts API, so
	   the checkout can be set in the same face as the shop rather than in an
	   approximation of it. Heebo is the loaded fallback; Arial Hebrew is the
	   system one. */
	--yg-font: "Google Sans", "Heebo", "Arial Hebrew", Arial, sans-serif;

	/* WooCommerce's blocks read these directly. Setting them is how the form
	   chrome changes at the source instead of being fought rule by rule: the
	   default border here was rgba(32,7,7,.8), a near-black hairline that is
	   the single biggest reason the page read as "a WooCommerce form" rather
	   than as this shop. */
	--wc-form-border-color: #ece0c4;
	--wc-form-border-width: 1px;
	--wc-form-border-radius: 0.5rem;
	--wc-form-color-text: #14110f;
	--wc-form-color-dark-text: #14110f;
}

/* ── Ground ──────────────────────────────────────────────────────────── */

body {
	/* Belt-and-braces against a UA margin; it is not what caused the 398px
	   scrollWidth seen at 390 on the cart. That was Chromium's left-side RTL
	   scrollbar gutter: html and body both measure zero margins, the widest
	   non-fixed element is exactly clientWidth, and scrollLeft pins at -8 in
	   both directions — the page cannot be scrolled sideways at all. Worth
	   stating because the obvious "fix" for that number is `overflow-x:
	   hidden` on an ancestor, which is the one thing this file must never do
	   above the PayPlus iframe. */
	margin: 0;
	background: var(--yg-canvas);
	color: var(--yg-ink);
	font-family: var(--yg-font);
	font-size: 16px;
	line-height: 1.6;
	accent-color: var(--yg-bronze);
}

/* ── Type, applied where WordPress and Elementor take it away ────────────
   Measured on the live page rather than guessed: the block components
   already inherit from <body>, but the Elementor kit sets
   `a { font-family: "Lia Diplomat" }` globally, and form controls do not
   inherit a face from their ancestor by default in any browser. Those two
   are the whole list, so this stays an enumeration rather than a wildcard —
   a `[class*="wc-block"]` sweep would have reached into the payment step
   for no benefit. */

.yg-slim-header,
.yg-slim-footer,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-order,
.woocommerce-account .woocommerce {
	font-family: var(--yg-font);
}

.yg-slim-header a,
.yg-slim-footer a,
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-cart h3,
.wp-block-woocommerce-cart button,
.wp-block-woocommerce-cart input,
.wp-block-woocommerce-cart select,
.wp-block-woocommerce-cart textarea,
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.wp-block-woocommerce-checkout button,
.wp-block-woocommerce-checkout input,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout textarea,
.woocommerce-order a,
.woocommerce-order h1,
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order button,
.woocommerce-order input,
.woocommerce-account .woocommerce a,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce button,
.woocommerce-account .woocommerce input {
	font-family: inherit !important;
}

/* ── The retired site's chrome ───────────────────────────────────────────
   The Elementor header is the old WordPress site's header — search, the
   mega-menu, an old cart icon, and on a phone a sticky bar that re-rendered
   over the middle of the address form. All of it is a door out of the
   payment flow. `.elementor-sticky__spacer` is the placeholder Elementor
   leaves behind when it lifts a header out of the flow; without it the page
   keeps an 88px hole where the header used to be. */

.elementor-location-header,
.elementor-location-footer,
.elementor-sticky__spacer,
.ehf-header,
.ehf-footer,
header.site-header,
#site-header,
.woocommerce-breadcrumb {
	display: none !important;
}

/* The promotional popup and the floating consult button — same family as the
   header above, and the same objection. On /my-account/ the "20% הנחה"
   lightbox opened over the login form and its own backdrop greyed out the
   email and password fields; the floating "לייעוץ אישי עם יוליה" bubble sits
   in the corner of a page where the only thing a person should be doing is
   paying. Both are Elementor templates (data-elementor-type="popup" and
   "floating-buttons"), and both are hidden on these five pages ONLY — they
   keep running everywhere else on this host. Delete this block if the offer
   should interrupt the checkout after all. */
.elementor-location-popup,
[data-elementor-type="popup"],
[data-elementor-type="floating-buttons"],
.elementor-popup-modal,
.e-floating-buttons {
	display: none !important;
}

/* And the half of it that `display: none` does not stop. Popup 8778 is set
   to prevent_scroll, so when its page-load trigger fires (5s) Elementor puts
   `dialog-prevent-scroll` on <body> and locks the page — hiding the dialog
   does not stop the JS from running. Measured on /my-account/ after the fix
   above: body overflow hidden, a 1064px document in a 950px window, and
   window.scrollTo doing nothing. An invisible dialog holding the page still
   is worse than a visible one. Unlocking here is also the safe direction —
   it removes an overflow constraint rather than adding one.

   The checkout itself is out of the popup's reach either way: its conditions
   are include/general with exclude/singular/page/24 and /25, i.e. the cart
   and checkout pages are excluded, and the order-received and order-pay
   endpoints live on page 25. Verified in the browser — no popup in the DOM
   there ten seconds in, body overflow visible, payment-block ancestors
   clean. */
body.dialog-prevent-scroll {
	overflow: visible !important;
}

.woocommerce-page .widget-area,
.woocommerce-page aside.sidebar {
	display: none;
}

/* ── The slim header ─────────────────────────────────────────────────── */

.yg-slim-header {
	background: var(--yg-surface);
	border-block-end: 1px solid var(--yg-line);
}

.yg-slim-header__inner {
	max-width: var(--yg-shell);
	margin-inline: auto;
	padding: 0.9rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
}

.yg-slim-header__logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

/* `object-fit: contain` is the insurance policy: the lockup is ~5:1, and if a
   320px viewport ever squeezes the flex item below that width the mark shrinks
   inside its box instead of being stretched into a different logo. */
.yg-slim-header__logo img {
	display: block;
	height: 30px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: right center;
}

.yg-slim-header__links {
	display: flex;
	align-items: center;
	gap: 0.25rem 0.9rem;
	flex: 0 0 auto;
	font-size: 0.9rem;
}

.yg-slim-header__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--yg-bronze);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.yg-slim-header__back {
	text-decoration: underline;
	text-decoration-color: var(--yg-line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.yg-slim-header__links a:hover {
	color: var(--yg-ink);
	text-decoration: underline;
	text-decoration-color: var(--yg-gold);
	text-underline-offset: 0.3em;
}

.yg-slim-header__phone {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.yg-slim-header__logo img {
		height: 42px;
	}
	.yg-slim-header__links {
		font-size: 1rem;
		gap: 0.25rem 1.5rem;
	}
}

/* ── One shell for all five pages ────────────────────────────────────────
   `margin-inline: auto` alone lost this fight and the checkout sat flush to
   the inline-start edge: measured x=260 in a 1440 viewport with computed
   margins of 0/0, i.e. a 1180px block pinned to the right with the whole
   left third of the screen empty. The element carries both
   `.wp-block-woocommerce-checkout` and `.wc-block-checkout`, and
   WooCommerce's own stylesheet sets the physical margins on the latter —
   same properties, later in the cascade. Hence `!important` on the two
   margin declarations, and nowhere else in this block. */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-order,
.woocommerce-account .woocommerce,
.woocommerce-order-pay .woocommerce {
	box-sizing: border-box;
	max-width: var(--yg-shell);
	margin-inline: auto !important;
	padding: 1.75rem 1rem 3.5rem;
}

.woocommerce-order {
	max-width: 860px;
}

@media (min-width: 900px) {
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	.woocommerce-order,
	.woocommerce-account .woocommerce {
		padding-block-start: 2.75rem;
		padding-inline: 1.5rem;
	}
}

/* Two balanced columns: form 58%, summary 38%, 4% between them. The blocks
   default put the form at 62% and let it own the gap as inline padding,
   which read as a wide form leaning against a narrow panel. */
@media (min-width: 900px) {
	.wc-block-checkout,
	.wc-block-cart {
		gap: 4%;
	}
	/* Doubled class names, not decoration: WooCommerce writes this padding
	   from `.wc-block-components-sidebar-layout .wc-block-components-main`,
	   which is two classes deep. A single-class rule here lost, and the form
	   column kept a 48px inline-end padding on top of the 4% gap — the
	   columns measured 58/38 but read as a narrow form beside a wide gutter. */
	.wc-block-checkout.wc-block-checkout .wc-block-checkout__main,
	.wc-block-cart.wc-block-cart .wc-block-cart__main {
		flex: 0 1 58%;
		max-width: 58%;
		padding-inline: 0;
	}
	.wc-block-checkout__sidebar,
	.wc-block-cart__sidebar {
		flex: 0 1 38%;
		max-width: 38%;
		padding-inline: 0;
		/* The summary follows the reader down a long form. `align-self` is
		   required: a stretched flex item is full-height and has nothing to
		   stick within. */
		position: sticky;
		top: 1.5rem;
		align-self: flex-start;
	}
}

/* ── Headings ────────────────────────────────────────────────────────────
   The storefront sets its display type in the same face at weight 500 with
   -0.015em tracking and 1.16 leading — Hebrew takes far less negative
   tracking than Latin before the final tsadi collides with the letter above.
   The gold hairline under each heading is the storefront's own section
   marker, rendered here as a 40px rule so a step title reads as a section
   rather than as bold body text. */

.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2,
.woocommerce-order h1,
.woocommerce-order h2,
.woocommerce-account .woocommerce h1,
.woocommerce-account .woocommerce h2,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: var(--yg-ink) !important;
	font-weight: 500 !important;
	font-size: 1.2rem !important;
	letter-spacing: -0.015em !important;
	line-height: 1.16 !important;
	text-transform: none !important;
	margin-block: 0 0.9rem;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title,
.woocommerce-order h2 {
	display: block;
}

/* In flow, not absolutely positioned. The absolute version anchored to
   `inset-inline-start: 0` landed ~80px in from the right on a right-aligned
   Hebrew heading and read as a stray underline struck through the words. A
   block-level ::after needs no anchoring at all: with zero inline margins it
   sits at the inline-start edge, which is the right one in RTL, by the
   ordinary rules of flow. */
.wc-block-components-checkout-step__title::after,
.wc-block-components-title::after,
.woocommerce-order h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-block-start: 0.55rem;
	background: linear-gradient(to left, var(--yg-gold-light), var(--yg-gold-deep));
	border-radius: 2px;
}

.wc-block-components-checkout-step__description,
.wc-block-components-address-card,
.wc-block-components-totals-item__label {
	color: var(--yg-ink-soft);
}

/* Product names in the cart table and in the order summary. Elementor's
   global kit turned a two-line Hebrew product name into a 28px display
   heading inside a 340px column. */
.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: var(--yg-ink) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none;
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	font-size: 0.8rem;
	color: var(--yg-ink-soft);
}

/* The "שמור את …" saving badge — WooCommerce ships it in its own green/grey. */
.wc-block-components-sale-badge {
	background: var(--yg-ivory) !important;
	color: var(--yg-bronze) !important;
	border: 1px solid var(--yg-line) !important;
	border-radius: 999px;
	font-weight: 500;
}

/* ── Images ──────────────────────────────────────────────────────────── */

.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img,
.woocommerce-order img {
	max-width: 100%;
	height: auto;
	border-radius: var(--yg-radius);
}

.wc-block-components-order-summary-item__image {
	max-width: 56px;
}

.wc-block-cart-item__image {
	max-width: 88px;
}

/* ── Panels ──────────────────────────────────────────────────────────── */

.wc-block-checkout__sidebar,
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--yg-surface);
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-media);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-totals-item {
	color: var(--yg-ink);
}

.wc-block-components-totals-footer-item {
	font-weight: 700;
	color: var(--yg-ink);
}

.wc-block-components-totals-wrapper::after,
.wc-block-cart-items tr:not(:last-child) td,
.wc-block-components-order-summary-item:not(:last-child) {
	border-color: var(--yg-line) !important;
}

/* ── Form fields ─────────────────────────────────────────────────────────
   Every selector below is anchored to a NAMED field block — contact
   information, shipping address, billing address, order note, and the
   coupon row. None of them can reach the payment step. That is deliberate
   and load-bearing: PayPlus's whole card form is an iframe, and a
   min-height or a border applied in there is a failed order. Do not widen
   these selectors. */

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block select,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block select,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block textarea,
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce .woocommerce-Input,
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea {
	min-height: 44px;
	font-size: 1rem;
	color: var(--yg-ink);
	background: #fff;
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-sm);
}

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block input:focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block input:focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block input:focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block select:focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block select:focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block textarea:focus {
	border-color: var(--yg-bronze) !important;
}

/* The coupon field is the one input the shell-prefixed rule above could not
   win: measured at rest (panel open, focus moved away) it kept a 1px
   oklab(0.5006 0.0235 0.0712) border at a 4px radius while every address
   field beside it was #ece0c4 at 8px. WooCommerce computes that colour from
   a colour function in a rule this file cannot outrank on specificity alone.
   It lives in the order-summary sidebar — nowhere near the payment step.

   Three class-based attempts lost it, at 0,1,1 then 0,2,1 then 0,3,1 and
   with !important throughout, which means the winning declaration is itself
   !important at equal-or-higher weight and later in the cascade — WooCommerce
   prints per-block styles inline in the footer, after this file's <link>.
   The input carries a stable id, so an id selector ends the argument at
   1,0,0. This is the one place in this file that uses one, and it is worth
   the exception: the alternative is a single field that reads as focused
   when it is not, sitting beside eight that don't. */
#wc-block-components-totals-coupon__input-coupon {
	min-height: 44px;
	border: 1px solid var(--yg-line) !important;
	border-radius: var(--yg-radius-sm) !important;
}

#wc-block-components-totals-coupon__input-coupon:focus {
	border-color: var(--yg-bronze) !important;
}

.wp-block-woocommerce-checkout-contact-information-block label,
.wp-block-woocommerce-checkout-shipping-address-block label,
.wp-block-woocommerce-checkout-billing-address-block label,
.wp-block-woocommerce-checkout-order-note-block label {
	color: var(--yg-ink-soft);
}

/* my-account's classic inputs. WooCommerce writes these from
   `.woocommerce form .form-row input.input-text`, which ties with the rule
   above at 0,3,1 and wins on load order — measured #333 borders after the
   first attempt. Matching its shape and saying so explicitly settles it. */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row .woocommerce-Input,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row textarea {
	min-height: 44px;
	background: #fff;
	border: 1px solid var(--yg-line) !important;
	border-radius: var(--yg-radius-sm) !important;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row .woocommerce-Input:focus {
	border-color: var(--yg-bronze) !important;
}

.wc-block-components-checkout-step {
	padding-block-end: 1.75rem;
}

/* Company. The PHP filter in yg-checkout-tweaks.php removes it through the
   IL locale; this is the belt to that pair of braces, for the case where
   woo-checkout-field-editor-pro wins a round after an update. */
.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__company,
.wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__company,
.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-text-input:has(> input[id$="-company"]),
.wp-block-woocommerce-checkout-billing-address-block .wc-block-components-text-input:has(> input[id$="-company"]) {
	display: none !important;
}

/* ── Radio options ───────────────────────────────────────────────────────
   COLOUR ONLY. WooCommerce marks the chosen option with an inset box-shadow
   in near-black; on this palette that reads as a browser default sitting in
   the middle of a warm page. These two rules change the shadow colour and
   the fill and nothing else — no overflow, no transform, no max-height, no
   padding, no display. That matters because one of the options WooCommerce
   draws this chrome around is the card-payment row, and the PayPlus iframe
   renders beneath it: a colour cannot clip a document, but a layout property
   could. Verified after every deploy by walking the payment block's
   ancestors for exactly those properties. */

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--yg-radius-sm);
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	background-color: var(--yg-ivory-deep) !important;
	box-shadow: inset 0 0 0 1.5px var(--yg-bronze) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Primary: bronze on ivory, ~7.4:1 — comfortably AAA for the largest,
   most-clicked control on the site. Secondary/outline: bronze outline on
   ivory, filling bronze on hover. WooCommerce ships its outline buttons in
   #cc3366 (measured on the live coupon "החל" button: colour AND border) —
   a pink that appears nowhere else in this brand. `!important` is not
   decoration: Hello Elementor resets button backgrounds to transparent and
   the blocks' own button styles land at a higher specificity than a class
   list. */

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-container .wc-block-components-button,
.woocommerce-checkout #place_order,
.yg-button,
.woocommerce-order .woocommerce-button.button,
.woocommerce-account .woocommerce .woocommerce-Button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 54px;
	padding: 0.8rem 1.6rem;
	background-color: var(--yg-bronze) !important;
	color: var(--yg-ivory) !important;
	border: 1px solid var(--yg-bronze) !important;
	border-radius: var(--yg-radius) !important;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -18px rgba(20, 17, 15, 0.55);
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-container .wc-block-components-button {
	width: 100%;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.woocommerce-checkout #place_order:hover,
.yg-button:hover,
.woocommerce-order .woocommerce-button.button:hover,
.woocommerce-account .woocommerce .woocommerce-Button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover {
	background-color: var(--yg-bronze-deep) !important;
	color: var(--yg-ivory) !important;
	box-shadow: 0 14px 28px -16px rgba(20, 17, 15, 0.5);
}

.wc-block-components-checkout-place-order-button * {
	color: inherit;
}

/* Secondary / outline — the coupon "החל" button and its relatives. */
.wc-block-components-totals-coupon__button,
.wc-block-components-button.outlined,
.wc-block-components-button.wc-block-components-button--outline,
.woocommerce-order .button.wc-forward {
	background-color: var(--yg-ivory) !important;
	color: var(--yg-bronze) !important;
	border: 1px solid var(--yg-bronze) !important;
	border-radius: var(--yg-radius-sm) !important;
	font-weight: 500;
	min-height: 44px;
	box-shadow: none;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-button.outlined:hover,
.wc-block-components-button.wc-block-components-button--outline:hover,
.woocommerce-order .button.wc-forward:hover {
	background-color: var(--yg-bronze) !important;
	color: var(--yg-ivory) !important;
}

/* Every remaining link on these pages. WooCommerce and the WP element styles
   default to admin blue; the Elementor kit defaults to its own pink. */
.wp-block-woocommerce-cart a:not(.yg-button):not([class*="button"]),
.wp-block-woocommerce-checkout a:not(.yg-button):not([class*="button"]),
.woocommerce-order a:not(.yg-button):not([class*="button"]),
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
	color: var(--yg-bronze);
	text-underline-offset: 0.3em;
}

/* ── The thank-you page ──────────────────────────────────────────────────
   PayPlus prints its own document/invoice link into this page via
   `woocommerce_thankyou`; nothing here hides or repositions it. */

.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-notice--success {
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.16;
	color: var(--yg-ink);
	background: var(--yg-ivory);
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-media);
	padding: 1.5rem;
	margin-block-end: 1.75rem;
}

.woocommerce-order ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 1.4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.1rem;
	background: var(--yg-surface);
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-media);
}

.woocommerce-order ul.woocommerce-order-overview li {
	border: 0;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	font-size: 0.8rem;
	line-height: 1.4;
	text-transform: none;
	color: var(--yg-ink-soft);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-block-start: 0.35rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--yg-ink);
}

.woocommerce-order table {
	width: 100%;
	margin-block-end: 2.25rem;
	border-collapse: collapse;
	background: var(--yg-surface);
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-media);
	font-size: 0.95rem;
}

.woocommerce-order table th,
.woocommerce-order table td {
	padding: 0.9rem 1.1rem;
	border-block-end: 1px solid var(--yg-line);
	text-align: start;
	vertical-align: top;
	word-break: break-word;
}

.woocommerce-order table thead th {
	background: var(--yg-ivory);
	font-weight: 500;
	color: var(--yg-ink);
}

.woocommerce-order table tfoot td,
.woocommerce-order table tfoot th {
	font-weight: 500;
}

.woocommerce-order .woocommerce-customer-details address {
	background: var(--yg-surface);
	border: 1px solid var(--yg-line);
	border-radius: var(--yg-radius-media);
	padding: 1.1rem 1.3rem;
	font-style: normal;
	line-height: 1.7;
}

.yg-thankyou-actions {
	margin-block: 2.25rem 0;
	text-align: center;
}

.yg-thankyou-actions .yg-button {
	width: 100%;
	max-width: 340px;
}

/* ── Notices ─────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border-radius: var(--yg-radius);
}

/* ── Accessibility: focus-visible ring ───────────────────────────────── */
/* Unscoped within these pages by design: a page that takes payment details
   by keyboard needs the ring everywhere on it, including the way out.
   Zero-specificity (no #id, no !important) so WooCommerce's and PayPlus's
   own focus styles can still override it where they exist. */

:focus-visible {
	outline: 2px solid var(--yg-gold);
	outline-offset: 2px;
}

/* ── The slim footer ─────────────────────────────────────────────────── */

.yg-slim-footer {
	border-block-start: 1px solid var(--yg-line);
	background: var(--yg-canvas);
	color: var(--yg-ink-soft);
	font-size: 0.9rem;
	padding: 1.75rem 1rem 2.25rem;
	text-align: center;
	line-height: 1.8;
}

.yg-slim-footer a {
	color: var(--yg-bronze);
	text-decoration: underline;
	text-decoration-color: var(--yg-line-strong);
	text-underline-offset: 0.3em;
	margin-inline: 0.6rem;
	display: inline-block;
}

.yg-slim-footer a:hover {
	text-decoration-color: var(--yg-gold);
}

.yg-slim-footer a:focus-visible {
	outline: 2px solid var(--yg-gold);
	outline-offset: 2px;
}