/* Project E — checkout page template.
 *
 * RTL-first: the Hebrew store is the primary case, so logical properties are
 * used throughout.
 *
 * Anything prefixed .woocommerce-, #payment or #place_order is stock markup we
 * deliberately did not override — styled here, never rewritten, because those
 * templates carry the consent box, the club opt-in and the points notice.
 *
 * Rewritten Sep 2026 against Ben's review of the live page. The four structural
 * changes, each fixing something that read as broken:
 *
 *   1. Labels sit ABOVE their field. They used to float inside it, keyed off
 *      :placeholder-shown — which put the label on top of the value on any
 *      field the browser autofilled, any field a theme gave its own padding to,
 *      and every select. "Two hints on top of each other" was that.
 *   2. Customer details are ONE column. WooCommerce's col2-set put the second
 *      address beside the first, so "משלוח לכתובת אחרת" appeared to the side of
 *      the fields it belongs under.
 *   3. [hidden] is honoured explicitly. The coupon body is display:flex, which
 *      beats the attribute, so the collapsed coupon box was never collapsed.
 *   4. Radios and steppers are drawn, not inherited. A theme's input styling on
 *      a payment radio is what made that list look like a form from 2009.
 */

/* ------------------------------------------------------------------ tokens */

.jw-co-page,
.jw-co-form {
	--jwco-ink: #1a1c1e;
	--jwco-ink-soft: #6b7177;
	--jwco-ink-faint: #9aa0a6;
	--jwco-line: #dcdfe3;
	--jwco-line-soft: #ebedf0;
	--jwco-surface: #f7f8f9;
	--jwco-field: #ffffff;
	--jwco-danger: #b3261e;
	--jwco-danger-bg: #fdecea;
	--jwco-ok: #0f7b3f;
	--jwco-shadow: 0 1px 2px rgba(26, 28, 30, .05), 0 8px 24px -16px rgba(26, 28, 30, .2);
}

.jw-co-page {
	margin: 0;
	background: #fff;
	color: var(--jwco-ink);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* The one rule that has to win everywhere: several of our panels are flex or
   grid containers, and `display` beats the [hidden] attribute. This is the bug
   that kept the collapsed coupon box permanently open. */
.jw-co-page [hidden],
.jw-co-form [hidden] { display: none !important; }

.jw-co-page *,
.jw-co-form * { box-sizing: border-box; }

/* ------------------------------------------------------------------ header */

.jw-co-header {
	border-block-end: 1px solid var(--jwco-line-soft);
	background: #fff;
}

.jw-co-header__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 20px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

/* A real, visible control — it is the only way back out of a page that has had
   the site's own navigation removed. */
.jw-co-back {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var(--jwco-line);
	border-radius: 999px;
	background: #fff;
	color: var(--jwco-ink) !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease;
}

.jw-co-back:hover,
.jw-co-back:focus {
	background: var(--jwco-surface);
	border-color: var(--jwco-ink-faint);
	color: var(--jwco-ink) !important;
	text-decoration: none !important;
}

/* The chevron points the way out: back-to-start, which is the inline-start
   edge in RTL and the other one in LTR. */
.jw-co-back svg { flex: none; transform: scaleX(-1); }
[dir="ltr"] .jw-co-back svg { transform: none; }

.jw-co-logo {
	justify-self: center;
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
	color: var(--jwco-ink) !important;
}

.jw-co-logo__img { display: block; max-height: 44px; width: auto; }
.jw-co-logo--text { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.jw-co-cart {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 999px;
	color: var(--jwco-ink) !important;
	text-decoration: none !important;
	transition: background .15s ease;
}

.jw-co-cart:hover { background: var(--jwco-surface); color: var(--jwco-ink) !important; }

/* The visual footer is gone by request (Ben, Sep 2026): on a page whose whole
   job is to be finished, a second set of links is somewhere else to go. The
   legal links live in the terms box above the submit button, where WooCommerce
   puts them and where they are actually read. wp_footer() is untouched — that
   is scripts, not chrome. */

/* -------------------------------------------------------------------- grid */

.jw-co-page__main {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 72px;
}

.jw-co-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 0 56px;
	align-items: start;
	padding-block-start: 32px;
}

.jw-co-main { min-width: 0; grid-column: 1; }

.jw-co-aside {
	min-width: 0;
	grid-column: 2;
	position: sticky;
	top: 24px;
}

/* A failed submit prepends its notice group to form.checkout, so it has to be
   able to span both columns rather than land inside one. */
.jw-co-form > .woocommerce-NoticeGroup,
.jw-co-notices { grid-column: 1 / -1; }
.jw-co-notices:empty { display: none; }

/* On a narrow header the label is the first thing to go: the chevron alone,
   next to the logo, is still unmistakably the way out. */
@media (max-width: 480px) {
	.jw-co-header__inner { padding: 12px 16px; gap: 8px; }
	.jw-co-back { padding: 8px; }
	.jw-co-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.jw-co-logo__img { max-height: 34px; }
	.jw-co-logo--text { font-size: 16px; }
}

@media (max-width: 900px) {
	.jw-co-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block-start: 20px;
	}
	/* Summary first on a phone: what am I paying, before how I pay it. */
	.jw-co-aside { grid-column: 1; grid-row: 1; position: static; }
	.jw-co-main { grid-column: 1; grid-row: 2; }
	.jw-co-page__main { padding: 0 16px 56px; }
}

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

.jw-co-form .woocommerce-error,
.jw-co-form .woocommerce-info,
.jw-co-form .woocommerce-message {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-surface);
	list-style: none;
	font-size: 14px;
}

.jw-co-form .woocommerce-error {
	border-color: #f3c9c5;
	background: var(--jwco-danger-bg);
	color: var(--jwco-danger);
}

.jw-co-form .woocommerce-error li { margin: 0; }

/* ---------------------------------------------------------------- sections */

.jw-co-section { margin: 0 0 40px; }
.jw-co-section:last-child { margin-block-end: 0; }

.jw-co-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px;
}

/* Section titles carry the page's rhythm — they are the only thing separating
   one block of fields from the next, so they are deliberately a step larger and
   heavier than the body copy rather than a slightly bolder paragraph. */
/* !important throughout: these are <h2>s rendering inside the theme's own page,
   and an Elementor kit's heading typography is specific enough to win — it was
   pulling the weight back to 300 while the size applied, which is exactly the
   half-styled look this is meant to fix. */
.jw-co-h {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.012em !important;
	color: var(--jwco-ink) !important;
	text-transform: none !important;
}

@media (min-width: 901px) {
	.jw-co-h { font-size: 22px !important; }
}

.jw-co-login { font-size: 14px; color: var(--jwco-accent, #2563eb); text-decoration: none; }
.jw-co-login:hover { text-decoration: underline; }

.jw-co-secure { margin: -6px 0 14px; font-size: 13px; color: var(--jwco-ink-soft); }

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

/* One column. WooCommerce's own col2-set would put the shipping address beside
   the billing one, which is how "משלוח לכתובת אחרת" ended up to the side of
   the fields it introduces. */
.jw-co-main .col2-set,
.jw-co-main #customer_details {
	display: block;
	width: 100%;
	margin: 0;
}

.jw-co-main .col2-set .col-1,
.jw-co-main .col2-set .col-2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.jw-co-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 14px;
}

.jw-co-fields .form-row,
.jw-co-grid .form-row {
	grid-column: span 2;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

.jw-co-grid .jw-w-half { grid-column: span 1; }

/* Name goes on one line. Ben asked for it directly, and it is the pairing every
   checkout makes — so it holds whatever width the field builder has saved for
   those two rows on a given store. */
.jw-co-grid #billing_first_name_field,
.jw-co-grid #billing_last_name_field,
.jw-co-grid #shipping_first_name_field,
.jw-co-grid #shipping_last_name_field { grid-column: span 1; }

@media (max-width: 560px) {
	.jw-co-grid { grid-template-columns: minmax(0, 1fr); }
	.jw-co-grid .jw-w-half { grid-column: span 1; }
	.jw-co-fields .form-row,
	.jw-co-grid .form-row { grid-column: span 1; }
}

/* A hidden field still posts a value — country drives the tax rate — so it is
   in the DOM, just never on screen. */
.jw-co-form .jw-field-hidden,
.jw-co-form .form-row.jw-field-hidden { display: none !important; }

/* Pickup mode: the address rows stay in the fieldset and stay wired up, so the
   toggle can put them back without a re-render. */
.jw-co-form.is-pickup .jw-co-addr { display: none !important; }

/* Labels ABOVE the field. The floating-label version keyed off
   :placeholder-shown, which broke on autofill, on selects, and on any theme
   that changed the input's padding — the label then sat on top of the value.
   A label in its own line cannot overlap anything. */
.jw-co-grid label,
.jw-co-fields .jw-co-grid label {
	position: static;
	display: block;
	inset: auto;
	transform: none;
	margin: 0 0 6px;
	padding: 0;
	max-width: none;
	overflow: visible;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--jwco-ink-soft);
	pointer-events: auto;
	white-space: normal;
	text-overflow: clip;
}

/* WooCommerce's own "(optional)" span is hidden because the word is already
   written into the label in Hebrew — printing both is the duplicate hint. */
.jw-co-grid .optional,
.jw-co-grid label .optional,
.jw-co-grid .woocommerce-input-wrapper .optional { display: none !important; }

/* Required marker: one asterisk, ours, after the text. */
.jw-co-grid .required { color: var(--jwco-danger); text-decoration: none; border: 0; }

.jw-co-grid .woocommerce-input-wrapper { display: block; width: 100%; }

.jw-co-grid input[type="text"],
.jw-co-grid input[type="email"],
.jw-co-grid input[type="tel"],
.jw-co-grid input[type="number"],
.jw-co-grid input[type="password"],
.jw-co-grid select,
.jw-co-grid textarea {
	display: block;
	inline-size: 100%;
	min-block-size: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-field);
	color: var(--jwco-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.jw-co-grid textarea { min-block-size: 92px; resize: vertical; }

/* The select needs its own arrow once appearance is stripped. Drawn as a
   background image so it follows the writing direction. */
.jw-co-grid select {
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7177' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 12px center !important;
	background-size: 18px 18px !important;
}

[dir="ltr"] .jw-co-grid select { background-position: right 12px center !important; }

.jw-co-grid input:focus,
.jw-co-grid select:focus,
.jw-co-grid textarea:focus {
	outline: none;
	border-color: var(--jwco-ink);
	box-shadow: 0 0 0 3px rgba(26, 28, 30, .08);
}

.jw-co-grid input::placeholder,
.jw-co-grid textarea::placeholder { color: var(--jwco-ink-faint); opacity: 1; }

/* Validation. WooCommerce adds these classes on the row; the field is what
   should look wrong, not the label. */
.jw-co-grid .form-row.woocommerce-invalid input,
.jw-co-grid .form-row.woocommerce-invalid select,
.jw-co-grid .form-row.woocommerce-invalid textarea { border-color: var(--jwco-danger); }

.jw-co-grid .form-row.woocommerce-validated input,
.jw-co-grid .form-row.woocommerce-validated select { border-color: var(--jwco-line); }

/* "Remember my details" and the club/consent boxes. */
.jw-co-save { margin: 14px 0 0; font-size: 14px; }
.jw-co-save__forget {
	margin-inline-start: 8px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--jwco-ink-soft);
	text-decoration: underline;
	cursor: pointer;
}

.jw-co-form .woocommerce-form__label-for-checkbox,
.jw-co-form .jw-join-club {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--jwco-ink);
	cursor: pointer;
}

/* One drawn checkbox for the whole page. A theme's version of this control is
   the single most common thing to arrive 28px tall and bright blue. */
.jw-co-form input[type="checkbox"] {
	flex: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	position: static !important;
	float: none !important;
	inline-size: 18px !important;
	block-size: 18px !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	border: 1px solid var(--jwco-line) !important;
	border-radius: 5px !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer !important;
	transition: background-color .12s ease, border-color .12s ease !important;
}

/* Every background longhand is !important here, because the base rule above
   uses the `background` SHORTHAND with !important — which resets
   background-image at the same priority and would otherwise erase this tick. */
.jw-co-form input[type="checkbox"]:checked {
	border-color: var(--jwco-ink) !important;
	background-color: var(--jwco-ink) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 13px 13px !important;
}

.jw-co-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--jwco-ink);
	outline-offset: 2px;
}

/* ------------------------------------------- ship to a different address --

   A checkbox with a heading's markup. It introduces the block below it, so it
   reads as a row of its own above those fields — not as a heading beside them,
   which is what the two-column layout turned it into. */

.jw-co-form .woocommerce-shipping-fields { margin: 0 0 32px; }

.jw-co-form .woocommerce-shipping-fields h3,
.jw-co-form #ship-to-different-address {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-surface);
	font-size: 15px;
	font-weight: 500;
}

.jw-co-form .woocommerce-shipping-fields h3 label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--jwco-ink);
	cursor: pointer;
}

.jw-co-form .woocommerce-shipping-fields__field-wrapper { margin-block-start: 16px; }

.jw-co-form .woocommerce-additional-fields { margin: 0 0 28px; }
.jw-co-form .woocommerce-additional-fields h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }

/* -------------------------------------------------- delivery mode toggle --

   Two mutually exclusive choices, so: one segmented control, not two buttons
   that happen to sit next to each other. */

.jw-co-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 18px;
}

/* Armoured, because the theme was painting both states the same colour — so
   clicking appeared to do nothing (Ben, Sep 2026). The JS toggles .is-active
   correctly; it just could not be seen. The two states now differ in border
   weight, ink and weight of type, all of which survive a repaint. */
.jw-co-mode,
.jw-co-mode:hover,
.jw-co-mode:focus,
.jw-co-mode:active {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	inline-size: 100% !important;
	min-block-size: 52px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--jwco-line) !important;
	border-radius: var(--jwco-radius, 12px) !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	color: var(--jwco-ink-soft) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer !important;
	transform: none !important;
	transition: border-color .15s ease, color .15s ease !important;
}

.jw-co-mode svg { flex: none !important; opacity: .55; }
.jw-co-mode:hover { border-color: var(--jwco-ink-faint) !important; color: var(--jwco-ink) !important; }

.jw-co-mode.is-active,
.jw-co-mode.is-active:hover,
.jw-co-mode.is-active:focus {
	border: 2px solid var(--jwco-ink) !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--jwco-ink) !important;
	font-weight: 700 !important;
}

.jw-co-mode.is-active svg { opacity: 1; }
.jw-co-mode:focus-visible { outline: 2px solid var(--jwco-ink) !important; outline-offset: 2px !important; }

/* ---------------------------------------------------------- shipping rates

   One selectable row per rate: radio, label, price. The row is the click
   target, and a carrier add-on (HFD's branch picker) drops in below the label
   on its own line instead of being squeezed into the price column. */

.jw-co-rates { margin: 0 0 40px; }
.jw-co-rates:empty { display: none; }
.jw-co-rates .jw-co-h { margin: 0 0 18px !important; }

.jw-co-rate {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-field);
	transition: border-color .15s ease, box-shadow .15s ease;
	cursor: pointer;
}

.jw-co-rate:hover { border-color: var(--jwco-ink-faint); }

.jw-co-rate.is-active,
.jw-co-rate:has(input:checked) {
	border-color: var(--jwco-ink);
	box-shadow: inset 0 0 0 1px var(--jwco-ink);
}

/* Whatever a carrier plugin appends goes full width on its own row. */
.jw-co-rate > *:nth-child(n+4) {
	grid-column: 1 / -1;
	margin-block-start: 10px;
	font-size: 14px;
}

.jw-co-rate input[type="text"],
.jw-co-rate select {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 10px 13px;
	border: 1px solid var(--jwco-line);
	border-radius: 10px;
	background: var(--jwco-field);
	font-family: inherit;
	font-size: 14px;
}

.jw-co-rate__body {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--jwco-ink);
	cursor: pointer;
}

.jw-co-rate__title { display: block; }
.jw-co-rate__cost { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jw-co-rate__free { color: var(--jwco-ok); font-weight: 600; }

.jw-co-rates__empty {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #f3c9c5;
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-danger-bg);
	color: var(--jwco-danger);
	font-size: 14px;
}

/* --------------------------------------------------------- drawn radios ---

   Every radio on this page: shipping rates and payment methods. Stripping
   appearance and drawing the dot is what stops a theme rendering these as
   lime-green 22px circles, which is what the payment list looked like. */

/* Drawn from scratch and armoured. WooCommerce, the theme and several gateways
   all have opinions about these — one of them was floating the payment radio
   away from its row and off-centre (Ben, Sep 2026). `float:none` and
   `position:static` are the two that put it back. */
.jw-co-rate input[type="radio"],
.jw-co-form #payment input[type="radio"],
.jw-co-form #payment li.wc_payment_method > input[type="radio"] {
	flex: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	position: static !important;
	float: none !important;
	inset: auto !important;
	inline-size: 20px !important;
	block-size: 20px !important;
	min-inline-size: 20px !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--jwco-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	vertical-align: middle !important;
	cursor: pointer !important;
	transition: border-color .12s ease, border-width .12s ease !important;
}

.jw-co-rate input[type="radio"]:checked,
.jw-co-form #payment input[type="radio"]:checked,
.jw-co-form #payment li.wc_payment_method > input[type="radio"]:checked {
	border: 6px solid var(--jwco-ink) !important;
	background: #fff !important;
	background-color: #fff !important;
}

.jw-co-rate input[type="radio"]:focus-visible,
.jw-co-form #payment input[type="radio"]:focus-visible {
	outline: 2px solid var(--jwco-ink) !important;
	outline-offset: 2px !important;
}

/* Some gateways wrap the radio in a <span>, others print a ::before pip of
   their own. Neither belongs on a drawn control. */
.jw-co-form #payment li.wc_payment_method > label::before,
.jw-co-form #payment li.wc_payment_method > label::after { content: none !important; }

/* ----------------------------------------------------------------- payment */

.jw-co-section--payment #order_review { margin: 0; }

.jw-co-form #payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.jw-co-form #payment ul.wc_payment_methods {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none outside;
}

/* WooCommerce prints the radio as a SIBLING of the label, not inside it, so the
   row has to be laid out on the <li>. Styling the label as the flex row left
   the radio stranded on a line of its own above the gateway's name. */
.jw-co-form #payment li.wc_payment_method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	margin: 0 0 8px;
	padding: 15px 16px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-field);
	list-style: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.jw-co-form #payment li.wc_payment_method:hover { border-color: var(--jwco-ink-faint); }

.jw-co-form #payment li.wc_payment_method:has(input:checked) {
	border-color: var(--jwco-ink);
	box-shadow: inset 0 0 0 1px var(--jwco-ink);
}

/* The gateway's own label: its name, then whatever card art it prints, pushed
   to the far edge of the row. */
.jw-co-form #payment li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--jwco-ink);
	cursor: pointer;
}

.jw-co-form #payment li.wc_payment_method > label img {
	margin: 0 0 0 auto;
	max-block-size: 24px;
	inline-size: auto;
	border-radius: 3px;
}

[dir="ltr"] .jw-co-form #payment li.wc_payment_method > label img { margin: 0 auto 0 0; }

/* A gateway that prints several logos wraps them in a span; keep them in a row
   and off the name. */
.jw-co-form #payment li.wc_payment_method > label > span:last-child { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; }

/* The gateway's description drops onto its own full-width row under both. */
.jw-co-form #payment div.payment_box {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--jwco-ink-soft);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Anything else a gateway injects (a card-number iframe, a saved-cards list)
   gets the same full-width treatment rather than being squeezed beside the
   radio. */
.jw-co-form #payment li.wc_payment_method > *:not(input):not(label) { grid-column: 1 / -1; }

/* WooCommerce's little speech-bubble arrow, which does not belong on a flat
   card. */
.jw-co-form #payment div.payment_box::before { display: none; }
.jw-co-form #payment div.payment_box p:last-child { margin-block-end: 0; }

.jw-co-form #payment .place-order { margin: 0; padding: 0; }

.jw-co-form .woocommerce-terms-and-conditions-wrapper { margin: 0 0 18px; }

.jw-co-form .woocommerce-privacy-policy-text p,
.jw-co-form .woocommerce-terms-and-conditions-wrapper p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--jwco-ink-soft);
}

.jw-co-form #place_order {
	display: block;
	inline-size: 100%;
	min-block-size: 54px;
	margin: 0;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-primary, #111827);
	color: var(--jwco-on-primary, #fff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: opacity .15s ease, transform .1s ease;
}

.jw-co-form #place_order,
.jw-co-form #place_order:hover,
.jw-co-form #place_order:focus {
	background: var(--jwco-primary, #111827) !important;
	background-color: var(--jwco-primary, #111827) !important;
	color: var(--jwco-on-primary, #fff) !important;
	border: 0 !important;
	border-radius: var(--jwco-radius, 12px) !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.jw-co-form #place_order:hover { opacity: .9; }
.jw-co-form #place_order:active { transform: translateY(1px); }
.jw-co-form #place_order:disabled { opacity: .5; cursor: default; transform: none; }
.jw-co-form #place_order:focus-visible { outline: 2px solid var(--jwco-ink); outline-offset: 3px; }

/* ----------------------------------------------------------------- summary */

.jw-co-summary {
	display: block;
	margin: 0;
	padding: 22px;
	border: 1px solid var(--jwco-line-soft);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-surface);
	box-shadow: none;
}

/* On a phone the summary collapses behind its own bar. On a desktop the same
   element is the section heading: the chevron and the duplicated total come
   off, and it stops being clickable, because there is nothing to collapse. */
/* A heading that happens to be a <button> so it can collapse on a phone. It is
   not a button to look at: transparent, black text (Ben, Sep 2026). Armoured
   for the same reason as the rest. */
.jw-co-summary__bar,
.jw-co-summary__bar:hover,
.jw-co-summary__bar:focus,
.jw-co-summary__bar:active {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	inline-size: 100% !important;
	min-block-size: 0 !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.012em !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--jwco-ink) !important;
	text-align: start !important;
	cursor: default !important;
	pointer-events: none;
	transform: none !important;
}

@media (min-width: 901px) {
	/* Matches .jw-co-h — on desktop this bar is a heading, not a control. */
	.jw-co-summary__bar { font-size: 22px !important; }
}

.jw-co-summary__bar-label { display: inline-flex; align-items: center; gap: 6px; }
.jw-co-summary__chev { display: none; }
.jw-co-summary__bar-total { display: none; }

.jw-co-summary__body { display: block; }

@media (max-width: 900px) {
	.jw-co-summary { padding: 16px; }
	/* The coupon / login toggles sit directly above this on mobile and were
	   crowding the first heading. */
	.jw-co-section--contact { margin-block-start: 30px; }
	.jw-co-summary__bar {
		margin: 0 !important;
		font-size: 17px !important;
		cursor: pointer !important;
		pointer-events: auto;
		/* 20px of text is not a tap target. Below ~44px a thumb regularly lands
		   a pixel outside, and a mousedown/mouseup that straddle the edge fire
		   `click` on the PARENT rather than the button. */
		padding-block: 12px !important;
		min-block-size: 44px !important;
	}
	.jw-co-summary__chev { display: inline-block; transition: transform .2s ease; }
	.jw-co-summary__bar-total { display: inline; font-variant-numeric: tabular-nums; font-weight: 600; }
	.jw-co-summary__bar[aria-expanded="true"] .jw-co-summary__chev { transform: rotate(180deg); }
	.jw-co-summary__body { display: none; padding-block-start: 16px; }
	.jw-co-summary.is-open .jw-co-summary__body { display: block; }
}

.jw-co-items { margin: 0 0 18px; padding: 0; list-style: none; }

.jw-co-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
}

.jw-co-item:last-child { margin-block-end: 0; }

.jw-co-item__media { position: relative; inline-size: 56px; }

.jw-co-item__media img {
	display: block;
	inline-size: 56px;
	block-size: 56px;
	border: 1px solid var(--jwco-line-soft);
	border-radius: 10px;
	object-fit: cover;
	background: #fff;
}

.jw-co-item__qty {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -6px;
	min-inline-size: 20px;
	block-size: 20px;
	padding: 0 5px;
	border-radius: 999px;
	border: 2px solid var(--jwco-surface);
	background: var(--jwco-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.jw-co-item__info { min-width: 0; }

.jw-co-item__name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--jwco-ink);
}

.jw-co-item__meta { display: block; margin-block-start: 2px; font-size: 12.5px; color: var(--jwco-ink-soft); }
.jw-co-item__meta p { margin: 0; font-size: inherit; }
.jw-co-item__meta dl, .jw-co-item__meta dt, .jw-co-item__meta dd { display: inline; margin: 0; font-size: inherit; }
.jw-co-item__meta dt { font-weight: 600; }
.jw-co-item__meta dt::after { content: " "; }
.jw-co-item__meta dd::after { content: ", "; }
.jw-co-item__meta dd:last-child::after { content: ""; }

.jw-co-item__price {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: end;
}

.jw-co-item__price del { display: block; color: var(--jwco-ink-faint); font-weight: 500; font-size: 12.5px; text-decoration: line-through; }
.jw-co-item__price ins { text-decoration: none; background: none; color: var(--jwco-ink); }

/* ------------------------------------------------------------ qty stepper -

   One control, not three: a single bordered pill with the count between two
   buttons. Three separate round buttons with their own borders is what looked
   wrong in the summary. */

.jw-co-qty {
	display: inline-flex;
	align-items: center;
	margin-block-start: 8px;
	border: 1px solid var(--jwco-line);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

/* White, with a black glyph. These were coming out as solid black squares:
   bare <button>, repainted by the theme (Ben, Sep 2026). */
.jw-co-qty__btn,
.jw-co-qty__btn:hover,
.jw-co-qty__btn:focus,
.jw-co-qty__btn:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	inline-size: 32px !important;
	block-size: 32px !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	color: var(--jwco-ink) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer !important;
	transform: none !important;
	transition: background-color .12s ease !important;
}

.jw-co-qty__btn:hover { background-color: var(--jwco-line-soft) !important; }
.jw-co-qty__btn:disabled { color: var(--jwco-ink-faint) !important; cursor: default !important; background-color: #fff !important; }
.jw-co-qty__btn:focus-visible { outline: 2px solid var(--jwco-ink) !important; outline-offset: -2px !important; }

.jw-co-qty__val {
	min-inline-size: 30px;
	padding: 0 2px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ------------------------------------------------------------------ coupon -

   Ben: black text with an underline, no background. The panel below it is
   display:flex, which is why it needs the [hidden] rule at the top of this
   file to stay collapsed. */

.jw-co-coupon { margin: 0 0 18px; }

/* A link, not a button. It is a bare <button> element, which is exactly what a
   theme's `button{background:#000;color:#fff}` repaints — so every property a
   theme would touch is armoured (Ben, Sep 2026). */
.jw-co-coupon__toggle,
.jw-co-coupon__toggle:hover,
.jw-co-coupon__toggle:focus,
.jw-co-coupon__toggle:active {
	display: inline-block !important;
	inline-size: auto !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--jwco-ink) !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	cursor: pointer !important;
	transform: none !important;
}

/* WooCommerce's OWN coupon and login toggles.
   Our template unhooks them, but Elementor's Checkout widget renders its own
   copies, so the removal never reaches them and they arrive in the theme's link
   colour. Matched to .jw-co-coupon__toggle so the page has one link style. */
.jw-co-page .woocommerce-form-coupon-toggle,
.jw-co-page .woocommerce-form-login-toggle {
	margin: 0 0 18px !important;
}

.jw-co-page .woocommerce-form-coupon-toggle .woocommerce-info,
.jw-co-page .woocommerce-form-login-toggle .woocommerce-info {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--jwco-ink) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

.jw-co-page .woocommerce-form-coupon-toggle .woocommerce-info::before,
.jw-co-page .woocommerce-form-login-toggle .woocommerce-info::before {
	display: none !important;
}

/* --- "משלוח לכתובת אחרת" --------------------------------------------------
   WooCommerce renders this as an <h3>, so the theme kit sized it like a section
   title; it is a checkbox label and should read like one.
   The block is also hidden declaratively rather than by script: WooCommerce's
   checkout.js only slideToggles on CHANGE, so on first paint the second address
   was fully expanded under an unticked box. :has() tracks the checkbox itself,
   and the inline display slideToggle writes still wins while toggling. */
.jw-co-page #ship-to-different-address {
	margin: 18px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	color: var(--jwco-ink) !important;
}

.jw-co-page #ship-to-different-address label {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	cursor: pointer;
}

.jw-co-page #ship-to-different-address input[type="checkbox"] {
	inline-size: 17px;
	block-size: 17px;
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--jwco-accent, #2563eb);
}

.jw-co-page .woocommerce-shipping-fields:not(:has(#ship-to-different-address-checkbox:checked)) .shipping_address {
	display: none;
}

/* No :has() — fall back to hiding only once the script has had its say, so the
   fields are never permanently unreachable. */
@supports not selector(:has(*)) {
	.jw-co-page .woocommerce-shipping-fields .shipping_address { display: block; }
}

/* WooCommerce's own coupon form, as rendered by Elementor's Checkout widget.
   Ships as stacked <p class="form-row form-row-first/last"> that FLOAT at 47%
   width, so the button drops under the field. Re-laid out as one row: the
   description spans the top, then field + button side by side. */
.jw-co-page form.checkout_coupon {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: stretch;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

.jw-co-page form.checkout_coupon > p:not(.form-row) {
	grid-column: 1 / -1;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--jwco-ink) !important;
}

.jw-co-page form.checkout_coupon .form-row {
	inline-size: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.jw-co-page form.checkout_coupon .input-text {
	inline-size: 100% !important;
	box-sizing: border-box !important;
	min-block-size: 46px !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	border: 1px solid var(--jwco-line) !important;
	border-radius: var(--jwco-radius, 12px) !important;
	background: var(--jwco-field) !important;
	color: var(--jwco-ink) !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
}

.jw-co-page form.checkout_coupon button {
	min-block-size: 46px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: var(--jwco-radius, 12px) !important;
	background: var(--jwco-primary, #111827) !important;
	color: var(--jwco-on-primary, #fff) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

/* The float clearer has nothing left to clear and only adds a blank grid cell. */
.jw-co-page form.checkout_coupon .clear { display: none !important; }

.jw-co-page a.showcoupon,
.jw-co-page a.showlogin,
.jw-co-page .woocommerce-form-coupon-toggle a,
.jw-co-page .woocommerce-form-login-toggle a {
	color: var(--jwco-ink) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.jw-co-coupon__toggle:hover { text-decoration-thickness: 2px !important; }
.jw-co-coupon__toggle:focus-visible { outline: 2px solid var(--jwco-ink) !important; outline-offset: 2px !important; }

.jw-co-coupon__body { display: flex; gap: 8px; margin-block-start: 12px; }
.jw-co-coupon:not(.is-collapsed) .jw-co-coupon__body { margin-block-start: 0; }

.jw-co-coupon__body input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--jwco-line);
	border-radius: var(--jwco-radius, 12px);
	background: var(--jwco-field);
	color: var(--jwco-ink);
	font-family: inherit;
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
}

.jw-co-coupon__body input:focus {
	outline: none;
	border-color: var(--jwco-ink);
	box-shadow: 0 0 0 3px rgba(26, 28, 30, .08);
}

.jw-co-coupon__apply,
.jw-co-coupon__apply:hover,
.jw-co-coupon__apply:focus {
	flex: none !important;
	min-block-size: 46px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border: 1px solid var(--jwco-line) !important;
	border-radius: var(--jwco-radius, 12px) !important;
	background: var(--jwco-field) !important;
	background-color: var(--jwco-field) !important;
	box-shadow: none !important;
	color: var(--jwco-ink) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer !important;
}

.jw-co-coupon__apply:hover { border-color: var(--jwco-ink) !important; }
.jw-co-coupon__apply:disabled { opacity: .5 !important; cursor: default !important; }

/* ------------------------------------------------------------------ totals */

.jw-co-totals { margin: 0; padding-block-start: 16px; border-block-start: 1px solid var(--jwco-line); }

.jw-co-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.jw-co-total--coupon { color: var(--jwco-ok); }
.jw-co-total--coupon a { color: var(--jwco-ink-soft); font-size: 12px; }

.jw-co-total--grand {
	margin: 16px 0 0;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--jwco-line);
	font-size: 17px;
	font-weight: 700;
}

.jw-co-total--grand .woocommerce-Price-amount { font-size: 19px; }

.jw-co-vat { margin: 6px 0 0; font-size: 12.5px; color: var(--jwco-ink-soft); text-align: end; }

/* The points redeem form, relocated into the summary. */
.jw-co-summary .jw-points-box { margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
	.jw-co-page *,
	.jw-co-form * { transition-duration: .01ms !important; }
}