/* ============================================================
 * WooCommerce bridge styles for the JunglePet Store theme.
 * These adapt the verbatim demo design (css/demo.css) to real
 * WooCommerce product data: real <img> media instead of giant
 * emoji, the pre-rendered multi-panel carousel, the fly-image
 * clone, and a few WC chrome hide-outs. Loaded AFTER demo.css.
 * ========================================================== */

/* ---- Product card media: real image instead of the demo's big emoji ---- */
.card .media {
	text-decoration: none;
	overflow: hidden;
}
.card .media img,
.card .media .media-img {
	width: 78%;
	height: 78%;
	object-fit: contain;
	transition: transform .3s;
	filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18));
}
.card:hover .media img,
.card:hover .media .media-img {
	transform: scale(1.08) rotate(-3deg);
}
/* product title link inherits the demo h3 look */
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--primary); }

/* WooCommerce price markup inside the demo .price box.
   WC outputs <span class="woocommerce-Price-amount">…</span> and, on sale,
   <del>…</del><ins>…</ins>. Map those onto the demo's price typography. */
.price .woocommerce-Price-amount,
.price ins .woocommerce-Price-amount {
	font-family: "Suez One", serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--text);
	text-decoration: none;
}
.price ins { text-decoration: none; }
.price del,
.price del .woocommerce-Price-amount {
	font-family: "Rubik", sans-serif;
	font-size: .9rem;
	font-weight: 500;
	color: var(--muted);
}
.price .woocommerce-Price-currencySymbol { margin-inline-start: 1px; }

/* ---- Multi-panel carousel: one .car-track per tab, only active shown ---- */
.car-viewport { position: relative; }
.car-track[hidden] { display: none !important; }
.car-track.is-active { display: flex; }

/* ---- Fly-to-cart: support an image clone, not just an emoji ---- */
.fly.fly-img {
	font-size: 0;
	border-radius: 14px;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .25));
}

/* ---- Hide WooCommerce's auto "View cart" link after AJAX add ----
   After an AJAX add-to-cart, WooCommerce appends a second
   <a class="added_to_cart wc-forward">מעבר לסל הקניות</a> directly under the
   add button. On our homepage carousel/.card markup this was already hidden;
   on the standard shop/category archive (li.product) and single-product
   up-sell/related loops it stayed visible and clashed with the green CTA.
   Hide it everywhere a loop add button appears — feedback is the live header
   cart count + the fly-to-cart animation. display:none removes it from flow,
   so the card never reserves empty space or shifts after adding. */
.card .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product a.added_to_cart,
.woocommerce li.product a.added_to_cart,
.products a.added_to_cart.wc-forward {
	display: none !important;
}
/* WC adds .added / .loading state classes on the button; keep it on-brand */
.btn.add.loading { opacity: .75; pointer-events: none; }
.btn.add.added::after { content: ""; }

/* ---- Empty-panel note inside a carousel ---- */
.car-track .empty {
	flex: 1 1 100%;
	text-align: center;
	color: var(--muted);
	padding: 2.4rem 0;
}

/* ============================================================
 * PRODUCT-CARD MEDIA — clean white-photo presentation.
 * Real product photos have white backgrounds; the demo's light-green
 * gradient .media made them look like boxy white tiles. Use a clean,
 * very-light neutral so white-bg photos blend seamlessly, while keeping
 * object-fit:contain and the hover zoom. A soft inner ring + the photo's
 * own drop-shadow keep it from looking flat.
 * ========================================================== */
.card .media {
	background: linear-gradient(180deg, #ffffff 0%, var(--surface-2) 100%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent);
}
.card .media img,
.card .media .media-img {
	width: 86%;
	height: 86%;
	filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .12));
}
/* On the night (dark) theme, keep photos on a near-white plate so white
   product backgrounds don't glow against the dark card. */
[data-theme="night"] .card .media {
	background: linear-gradient(180deg, #f4f6f2 0%, #e9ede6 100%);
}

/* ============================================================
 * WC PAGE CONTAINER — give the cart/checkout/shop main content the
 * demo's .wrap treatment (the parent theme's <main> is edge-to-edge).
 * ========================================================== */
.jps-store.woocommerce-cart main.site-main,
.jps-store.woocommerce-checkout main.site-main,
.jps-store.woocommerce-page main.site-main {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 40px);
	padding-bottom: clamp(40px, 7vw, 90px);
}
/* Safety net: if the parent title still renders on a WC flow page, hide it. */
.jps-store.woocommerce-cart .page-header .entry-title,
.jps-store.woocommerce-checkout .page-header .entry-title { display: none; }

/* ============================================================
 * CART PAGE — demo .shop-layout / .cart-row / .summary mapping
 * ========================================================== */

/* Real product photo inside the demo's .cart-row .thumb (was emoji-sized). */
.cart-row .thumb { overflow: hidden; padding: 6px; }
.cart-row .thumb a { display: grid; place-items: center; width: 100%; height: 100%; }
.cart-row .thumb img,
.cart-row .thumb .cart-row-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

/* The native WC qty input is kept for no-JS + AJAX, but visually we show
   the demo's clean number between the +/- buttons. Hide the raw input. */
.stepper .quantity,
.stepper input.qty,
.stepper .jps-qty {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.stepper { position: relative; }
.stepper .qty-display {
	min-width: 30px; text-align: center; font-weight: 600;
}
.stepper .qty-inc,
.stepper .qty-dec {
	width: 30px; height: 30px; border: none; border-radius: 50%;
	background: var(--surface); cursor: pointer; font-size: 1.1rem;
	color: var(--text); display: grid; place-items: center;
	transition: background .15s, color .15s; line-height: 1; padding: 0;
}
.stepper .qty-inc:hover,
.stepper .qty-dec:hover { background: var(--accent); color: var(--accent-ink); }

/* WC price markup inside the cart-row unit price + line total. */
.cart-row .info small .woocommerce-Price-amount { font-weight: 600; color: var(--text); }
.cart-row .line .woocommerce-Price-amount {
	font-family: "Suez One", serif; font-weight: 800; color: var(--text);
}
.cart-row .line del { display: none; } /* line total: show the actual charge only */
.cart-row .line ins { text-decoration: none; }

/* Cart actions row (update + continue) under the items. The coupon now lives
 * inside the summary card (like the demo), so this row is just the two links. */
.cart-actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
	margin-top: 1.1rem;
}
.cart-actions .continue-shopping {
	color: var(--primary); font-weight: 600; font-size: .9rem; margin-inline-start: auto;
}
.cart-actions .continue-shopping:hover { text-decoration: underline; }
/* Native WC "update cart" disabled state shouldn't grey out our ghost btn copy. */
.cart-actions .jps-update-cart[disabled] { opacity: 1; }

/* Coupon INSIDE the summary card — mirror the demo's .coupon (input + dark
 * attached "החל" button as one rounded pill). The demo's generic .coupon /
 * .coupon .field rules in demo.css handle most of it; these lines just make
 * our <form> behave like the demo's <div> and override any WC button styling
 * that tries to win on the submit button. */
.summary form.coupon { margin: .9rem 0 .25rem; }
.summary .coupon .jps-apply-coupon {
	border: none; border-radius: 0; background: var(--text); color: var(--surface);
	padding: 0 1.15rem; font-family: "Rubik", sans-serif; font-weight: 600; font-size: .9rem;
	cursor: pointer; transition: background .2s, color .2s; white-space: nowrap;
}
.summary .coupon .jps-apply-coupon:hover { background: var(--primary); color: var(--primary-ink); }
.summary .coupon-msg.jps-coupon-active { color: var(--primary); }

/* WC price markup inside the summary rows + highlighted total. */
.summary .row b .woocommerce-Price-amount { color: inherit; font-weight: 600; }
.summary .total b .woocommerce-Price-amount {
	font-family: "Suez One", serif; font-size: 1.4rem; color: var(--primary); font-weight: 800;
}
.summary .row.shipping b { color: var(--text); }
/* The proceed button uses the demo .btn-primary; keep it full-width in the box. */
.summary .wc-proceed-to-checkout { margin-top: 1rem; }
.summary .wc-proceed-to-checkout .btn-primary,
.summary .checkout-button { display: block; width: 100%; text-align: center; }

/* ============================================================
 * CHECKOUT PAGE — fields in .form-card, order review as .summary
 *
 * Goal: the two columns read as TWO MATCHING CARDS (like the demo's
 * checkout.html) — a white, rounded, padded, shadowed "פרטי משלוח 🚚"
 * card on the wide side and the "ההזמנה שלך" .summary card beside it,
 * both with the same surface + shadow language. Inputs/labels match the
 * demo's .field / .lbl-f. The country select reads as a clean fixed field.
 * ========================================================== */

/* Clean balanced 2-column checkout: customer-details column (form ~1.35fr) +
   order-review .summary (~1fr). The form-checkout.php override already wraps
   #customer_details in the .shop-layout grid column; this sizes it so the form
   is the wider of the two and both columns top-align (no giant void). */
.jps-checkout .shop-layout {
	grid-template-columns: 1.35fr 1fr;
	align-items: start;
	gap: 2rem;
}

/* Kill WooCommerce's base float/width split on #customer_details. Its
   woocommerce.css floats .col-1 left / .col-2 right at ~48% each, which —
   combined with the .summary column — created the cramped 3-column layout.
   We render everything in a single .col-1.form-card, so force it full width
   and clear any residual float on the sub-columns. */
.jps-checkout #customer_details.col2-set,
.jps-checkout #customer_details .col-1,
.jps-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	max-width: none;
}
.jps-checkout #customer_details { display: block; }

/* --- The customer-details panel reads as a real card matching the summary ---
   The demo's .form-card uses a very soft shadow (it gets away with it because
   it stacks TWO such cards with big section headers). Our single WC details
   card sat cream-on-cream and visually vanished. Give it the SAME strong,
   visible shadow + 1px ring the .summary uses, so the two columns balance as
   cohesive cards — exactly what the demo reads as. */
.jps-checkout .jps-details-card.form-card {
	margin-bottom: 0;
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
	padding: 1.6rem 1.7rem;
}

/* Our demo card title ("🚚 פרטי משלוח"). The WC core billing/shipping/notes
   templates each emit their own <h3> ("פרטי חיוב" / "משלוח לכתובת אחרת?" /
   notes) — hide the billing one (replaced by our title) but keep the
   ship-to-different + notes ones since they're meaningful sub-sections. */
.jps-checkout .jps-card-title {
	font-family: "Suez One", serif; font-size: 1.3rem;
	margin: 0 0 1.3rem; display: flex; align-items: center; gap: .5rem;
	color: var(--text);
}
.jps-checkout .woocommerce-billing-fields > h3 { display: none; }
.jps-checkout .woocommerce-additional-fields > h3 {
	font-family: "Suez One", serif; font-size: 1.05rem;
	margin: 0 0 .9rem; color: var(--text);
}

/* Billing block, then ship-to-different + notes, stacked with rhythm. */
.jps-checkout .col-1 .woocommerce-shipping-fields { margin-top: 1.3rem; }
.jps-checkout .col-1 .woocommerce-additional-fields {
	margin-top: 1.3rem; padding-top: 1.3rem;
	border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* The "ship to a different address" toggle is an <h3> with a checkbox label;
   keep it readable and full-width inside the flow (not a floated heading). */
.jps-checkout #ship-to-different-address {
	margin: 0; font-size: 1rem;
}
.jps-checkout #ship-to-different-address label {
	display: flex; align-items: center; gap: .5rem;
	font-weight: 600; cursor: pointer; color: var(--text);
}
.jps-checkout #ship-to-different-address-checkbox { width: auto; min-height: 0; margin: 0; }
.jps-checkout .woocommerce-shipping-fields .shipping_address { margin-top: 1rem; }

/* --- Inputs + labels mapped onto the demo's .field / .lbl-f look ---
   The selectors are prefixed with `.woocommerce` so they out-specify
   WooCommerce core's `.woocommerce form .form-row .input-text` (3 classes),
   which otherwise forces a plain white fill + 4px radius over the demo's
   soft green-tint .field look. */
.jps-checkout .form-row { margin: 0 0 .9rem; }
.jps-checkout .form-row label {
	display: block; font-size: .85rem; font-weight: 500;
	margin-bottom: .35rem; color: var(--muted);
}
.jps-checkout .form-row .required { color: var(--primary); border: 0; text-decoration: none; }
.jps-checkout .form-row .optional { color: var(--muted); }
.woocommerce .jps-checkout .form-row input.input-text,
.woocommerce .jps-checkout .form-row textarea,
.woocommerce .jps-checkout .form-row select,
.jps-checkout .select2-container .select2-selection {
	width: 100%; padding: .75rem 1rem; border-radius: 13px;
	border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
	background: var(--surface-2); color: var(--text);
	font-family: "Rubik", sans-serif; font-size: .95rem;
	transition: border .2s, box-shadow .2s; min-height: 48px;
	box-sizing: border-box;
}
.woocommerce .jps-checkout .form-row textarea { min-height: 88px; line-height: 1.5; }
.woocommerce .jps-checkout .form-row input.input-text::placeholder,
.woocommerce .jps-checkout .form-row textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.woocommerce .jps-checkout .form-row input.input-text:focus,
.woocommerce .jps-checkout .form-row textarea:focus,
.woocommerce .jps-checkout .form-row select:focus,
.jps-checkout .select2-container--focus .select2-selection {
	outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring);
}
.jps-checkout .select2-container .select2-selection { display: flex; align-items: center; }
.jps-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
/* WC inline field validation marks: keep tidy, no jarring red boxes. */
.jps-checkout .woocommerce-invalid input.input-text,
.jps-checkout .woocommerce-invalid select {
	border-color: color-mix(in srgb, #d6457f 60%, var(--text) 12%);
}
.jps-checkout .woocommerce-validated input.input-text { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }

/* Single-country (Israel) store: the country field is forced to IL and
   rendered as a hidden input via the woocommerce_checkout_fields filter, so it
   never shows in the layout (and never consumes a grid cell). */
.jps-checkout .jps-hidden-field,
.jps-checkout #billing_country_field { display: none !important; }

/* Numeric / contact fields read LTR like the demo. */
.jps-checkout input[type="tel"],
.jps-checkout input[type="email"],
.jps-checkout input[id*="postcode"],
.jps-checkout input[id*="phone"] { direction: ltr; text-align: start; }

/* Two-up rows: שם מלא + טלפון and עיר + מיקוד share a row like the demo;
   the wide fields (אימייל, כתובת, הערות) span full width. The billing
   field-wrapper is a 2-column grid; .form-row-first / .form-row-last fall into
   the two cells, .form-row-wide spans both. */
@media (min-width: 560px) {
	.jps-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem;
	}
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
	.jps-checkout #billing_address_1_field,
	.jps-checkout #billing_email_field { grid-column: 1 / -1; }
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-first { grid-column: 1; }
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-last { grid-column: 2; }
	/* WooCommerce core still applies float + width:47% to the .form-row-first/
	   .form-row-last <p> boxes (woocommerce.css). On a grid item the float is
	   ignored, but the explicit 47% width is NOT — so each cell shrank to ~128px
	   and the two fields rendered unequal/ragged, not aligned to the row edges.
	   Force each two-up row to fill its 1fr cell and clear the leftover float so
	   both columns are pixel-equal and flush with the full-width fields above. */
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
		float: none; width: 100%; margin: 0 0 .9rem; padding: 0;
	}
	/* Inputs/selects already use border-box width:100%, but pin it here too so the
	   control always spans the full cell (WC can emit a size attr on some fields). */
	.woocommerce .jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-first .input-text,
	.woocommerce .jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-first select,
	.woocommerce .jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-last .input-text,
	.woocommerce .jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-last select {
		width: 100%; box-sizing: border-box;
	}
}

/* Narrow screens (phones): stack every row to a single full-width column.
   Below 560px the grid above is off, so WooCommerce's float:47% would otherwise
   keep שם מלא/טלפון and עיר/מיקוד cramped side-by-side at ~133px. Clear the float
   and force full width so the form reads as one clean column on mobile. */
@media (max-width: 559.98px) {
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
	.jps-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
		float: none; width: 100%; margin: 0 0 .9rem; padding: 0;
	}
}

/* Order-review table styled as the demo's .summary rows + .order-line:
   small product thumb + name/qty on one side, line total on the other.
   Each .cart_item is laid out as flex so long product names wrap cleanly
   under the name (never colliding with the price or overflowing the box). */
.checkout-summary .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.checkout-summary .woocommerce-checkout-review-order-table thead { display: none; }
.checkout-summary .woocommerce-checkout-review-order-table .cart_item td {
	padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
	font-size: .9rem; vertical-align: middle;
}
/* product-name cell: thumb + (name + qty) aligned like .order-line. */
.checkout-summary .woocommerce-checkout-review-order-table .product-name {
	display: flex; align-items: center; gap: .7rem; font-weight: 500;
}
.checkout-summary .jps-review-thumb-wrap {
	width: 44px; height: 44px; flex: none; border-radius: 12px;
	background: var(--surface-2); display: grid; place-items: center;
	position: relative; overflow: visible;
}
.checkout-summary .jps-review-thumb-wrap img.jps-review-thumb {
	width: 100%; height: 100%; object-fit: contain; display: block;
	border-radius: 12px;
}
/* Green qty badge in the thumb's top inline-start corner — the demo's
   .order-line .q (white number on the brand green, pill-shaped). */
.checkout-summary .jps-review-qty-badge {
	position: absolute; top: -7px; inset-inline-start: -7px;
	background: var(--primary); color: var(--primary-ink);
	min-width: 21px; height: 21px; padding: 0 4px; border-radius: 999px;
	font-family: "Rubik", sans-serif; font-size: .7rem; font-weight: 700;
	display: grid; place-items: center; line-height: 1;
	box-shadow: 0 2px 6px -1px var(--ring);
}
.checkout-summary .jps-review-name {
	flex: 1; min-width: 0; line-height: 1.3;
	overflow-wrap: anywhere; word-break: break-word;
}
.checkout-summary .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--primary); font-weight: 700; white-space: nowrap;
}
.checkout-summary .woocommerce-checkout-review-order-table .product-total {
	text-align: left; white-space: nowrap; font-weight: 600;
	width: 90px; direction: ltr; unicode-bidi: isolate;
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot th,
.checkout-summary .woocommerce-checkout-review-order-table tfoot td {
	padding: .42rem 0; color: var(--muted); font-size: .95rem; font-weight: 400; text-align: start;
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot td { text-align: left; }
.checkout-summary .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; }
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total th {
	font-family: "Suez One", serif; color: var(--text);
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-family: "Suez One", serif; font-size: 1.3rem; color: var(--primary); font-weight: 800;
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total {
	background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total th,
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
	padding-block: .7rem;
}
/* Keep the grand-total amount LTR-isolated so ₪ never mangles in RTL. */
.checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-amount {
	direction: ltr; unicode-bidi: isolate; display: inline-block;
}

/* --- "פרטי תשלום 💳" card (right column, under the shipping card) ---
   form-checkout.php renders the native payment block inside its own .form-card
   with a .jps-card-title and the demo's payment icons. Inside that card the
   payment methods read as a clean radio list, then the demo card fields; the
   place-order button is relocated into the summary by checkout-layout.js. */
.jps-checkout .jps-payment-card.form-card {
	margin-bottom: 0;
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
	padding: 1.6rem 1.7rem;
}
.jps-checkout .jps-payment-card .pay-icons {
	margin-inline-start: auto; font-size: 1.2rem; letter-spacing: .08em;
}
.jps-checkout #payment {
	background: color-mix(in srgb, var(--primary) 4%, var(--surface-2));
	border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
	border-radius: 16px; padding: .9rem 1rem; margin: 0;
}
.jps-checkout #payment ul.payment_methods {
	list-style: none; margin: 0; padding: 0; border: none;
}
.jps-checkout #payment ul.payment_methods li {
	display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
	padding: .2rem 0; margin: 0;
}
.jps-checkout #payment ul.payment_methods li input[type="radio"] {
	width: auto; min-height: 0; margin: 0; accent-color: var(--primary);
	width: 18px; height: 18px; flex: none;
}
.jps-checkout #payment ul.payment_methods li label {
	font-weight: 600; color: var(--text); font-size: .98rem;
	margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.jps-checkout #payment ul.payment_methods li img { display: none; }
/* COD/gateway description box: small muted helper text, tucked under the radio.
   The `div.payment_box` selector (element + class) is needed to out-specify
   WooCommerce core's `.woocommerce-checkout #payment div.payment_box`, which
   otherwise paints a grey/lavender background and a callout triangle. */
.jps-checkout #payment div.payment_box {
	flex: 1 1 100%; background: transparent; border: none; box-shadow: none;
	margin: .1rem 0 0; padding: .2rem 0 0 1.6rem;
	color: var(--muted); font-size: .82rem; line-height: 1.5;
}
.jps-checkout #payment div.payment_box::before { display: none; }
.jps-checkout #payment div.payment_box p { margin: 0; }

/* --- DEMO credit-card fields (jps_demo_card gateway) ---
   When "כרטיס אשראי" is selected, WooCommerce reveals this gateway's
   .payment_box, which contains our styled card fields. The generic
   .payment_box rule above strips its chrome and indents it; here we give the
   card grid back a real 2-column layout (number + name full-width; תוקף / CVV
   share a row), matching the demo's checkout card. We scope to the card block
   so it overrides the muted .payment_box typography. */
.jps-checkout #payment .payment_box .jps-cc-fields {
	padding-inline-start: 0;
	margin-top: .4rem;
	color: var(--text);
	font-size: .95rem;
}
.jps-checkout #payment .payment_box .jps-cc-desc {
	color: var(--muted); font-size: .85rem; margin: 0 0 .7rem;
}
.jps-checkout #payment .payment_box .jps-cc-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .8rem;
}
.jps-checkout #payment .payment_box .jps-cc-grid .jps-cc-full {
	grid-column: 1 / -1;
}
.jps-checkout #payment .payment_box .jps-cc-fields .lbl-f {
	display: block; font-size: .82rem; font-weight: 500;
	margin-bottom: .3rem; color: var(--muted);
}
.jps-checkout #payment .payment_box .jps-cc-input {
	width: 100%; padding: .7rem .9rem; border-radius: 12px;
	border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
	background: var(--surface); color: var(--text);
	font-family: "Rubik", sans-serif; font-size: .95rem;
	transition: border .2s, box-shadow .2s; min-height: 46px;
	box-sizing: border-box; letter-spacing: .02em;
}
.jps-checkout #payment .payment_box .jps-cc-input:focus {
	outline: none; border-color: var(--primary);
	box-shadow: 0 0 0 4px var(--ring);
}
.jps-checkout #payment .payment_box .jps-cc-input::placeholder {
	color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.jps-checkout #payment .payment_box .jps-cc-note {
	grid-column: 1 / -1;
	margin: .9rem 0 .1rem; font-size: .78rem; color: var(--muted);
	line-height: 1.5;
}
/* On narrow screens the תוקף / CVV pair stacks too, like the demo. */
@media (max-width: 480px) {
	.jps-checkout #payment .payment_box .jps-cc-grid { grid-template-columns: 1fr; }
}

/* The privacy / terms text WC prints under the methods: small + muted. */
.jps-checkout .woocommerce-privacy-policy-text,
.jps-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: .78rem; color: var(--muted); line-height: 1.55; margin-top: .8rem;
}
.jps-checkout .woocommerce-privacy-policy-text p { margin: 0; }

/* Place-order button. checkout-layout.js relocates the .place-order container
   into the .summary (demo layout), so style it for BOTH spots: inside the
   payment card (pre-JS / no-JS fallback) and inside the summary. */
.jps-checkout .place-order { padding: 0; margin: 0; }
.jps-checkout .checkout-summary .jps-summary-place-order { margin-top: 1.1rem; }
.jps-checkout #place_order {
	display: block; width: 100%; margin-top: 1.1rem;
	background: var(--primary); color: var(--primary-ink);
	border: none; border-radius: 999px; cursor: pointer;
	font-family: "Rubik", sans-serif; font-weight: 600; font-size: 1rem;
	padding: .85em 1.4em; box-shadow: 0 12px 24px -10px var(--ring);
	transition: background .2s, transform .15s, box-shadow .2s;
}
.jps-checkout .checkout-summary .jps-summary-place-order #place_order { margin-top: 0; }
.jps-checkout #place_order:hover {
	background: var(--primary-2); transform: translateY(-2px);
	box-shadow: 0 18px 30px -10px var(--ring);
}

/* Order-review tfoot rows read like the demo .summary rows: label start,
   amount end, the amount LTR-isolated so ₪ never flips in RTL. */
.checkout-summary .woocommerce-checkout-review-order-table tfoot th,
.checkout-summary .woocommerce-checkout-review-order-table tfoot td {
	width: auto;
}
.checkout-summary .woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-amount {
	direction: ltr; unicode-bidi: isolate; display: inline-block;
}

/* Responsive: stack the checkout into one tidy column on narrow screens,
   matching the demo's .shop-layout collapse. Our 2-col override is more
   specific than the demo's mobile rule, so restate the single-column here. */
@media (max-width: 860px) {
	.jps-checkout .shop-layout { grid-template-columns: 1fr; }
	.jps-checkout .checkout-summary { position: static; }
}

/* ============================================================
 * PRODUCT ARCHIVE (shop / category) — full demo .card grid.
 *
 * content-product.php now renders jps_render_product_card() (the same demo
 * .card the homepage uses) and the woocommerce_product_loop_start/_end filters
 * emit <div class="prods jps-archive-grid"> instead of WooCommerce's
 * <ul class="products">. The generic .card / .prods rules in demo.css supply
 * the look; the lines below adapt the archive context (container width, the
 * hero banner scene, and clearing WooCommerce's list-grid base styles).
 * ========================================================== */

/* Give the archive <main> the demo .wrap padding + bottom rhythm (the bridge's
   generic main.site-main rule already sets the 1180px max-width). */
.jps-archive-page main.site-main {
	padding-top: clamp(14px, 2.5vw, 28px);
}

/* The archive grid is the demo .prods grid. WooCommerce's columns-N class would
   otherwise impose its own float/flex grid on a <div>; reset to the demo grid. */
.jps-archive-grid.prods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
.jps-archive-grid.prods::before,
.jps-archive-grid.prods::after { content: none; }
/* Each card already styled by demo.css .card; ensure no WC li/float leaks in. */
.jps-archive-grid.prods > .card {
	width: auto; float: none; margin: 0; clear: none;
}

/* Archive cards animate in with the same gentle stagger as the homepage. */
.jps-archive-grid .card {
	animation: jpsCardIn .5s ease both;
	animation-delay: var(--rd, 0s);
}
@keyframes jpsCardIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.jps-archive-grid .card { animation: none; }
}

/* --- Category hero banner (loop/header.php) --- the demo .cat-banner gradient
   is supplied by demo.css; here we lay out the emoji scene props inside it. */
.jps-archive-header { margin: 1.2rem 0 0; }
.jps-cat-banner .jps-banner-scene {
	position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.jps-cat-banner .jps-banner-scene .prop {
	position: absolute; opacity: .9;
}
.jps-cat-banner .jps-banner-scene .prop.big {
	font-size: clamp(2.6rem, 8vw, 5rem);
	inset-inline-start: 4%; bottom: 8%;
	filter: drop-shadow(0 12px 16px rgba(0,0,0,.28));
	animation: bob 4.5s ease-in-out infinite;
}
.jps-cat-banner .jps-banner-scene .prop.jps-prop-2 {
	font-size: 1.6rem; top: 20%; inset-inline-start: 24%;
	animation: floatY 3.4s ease-in-out infinite;
}
.jps-cat-banner .jps-banner-scene .prop.jps-prop-3 {
	font-size: 1.3rem; bottom: 26%; inset-inline-start: 34%;
	animation: floatY 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.jps-cat-banner .jps-banner-scene .prop { animation: none; }
}
/* Banner H1 inherits the demo .cat-banner h1; drop the WC page-title chrome. */
.jps-cat-banner h1.page-title {
	margin: 0; padding: 0; border: 0; color: inherit;
}
/* The SEO intro paragraph under the banner. */
.jps-archive-header .jps-cat-intro {
	margin: 1.3rem auto 0; max-width: 80ch;
	color: var(--muted); font-size: 1rem; line-height: 1.7;
}
.jps-archive-header .jps-cat-intro p { margin: 0 0 .7rem; }

/* Breadcrumbs above the banner on archives read like the demo .breadcrumb. */
.jps-archive-page .jps-breadcrumbs {
	font-size: .9rem; color: var(--muted); padding-top: 1.2rem;
}
.jps-archive-page .jps-breadcrumbs a:hover { color: var(--primary); }

/* "No products found" empty state, on-brand. */
.jps-archive-page .woocommerce-info,
.jps-archive-page .woocommerce-no-products-found {
	margin-top: 1.4rem;
}

/* Responsive grid: 2-up on tablet, 1-up on phones (demo breakpoints). */
@media (max-width: 980px) {
	.jps-archive-grid.prods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.jps-archive-grid.prods { grid-template-columns: 1fr; }
	.jps-cat-banner { flex-direction: column; text-align: center; }
	.jps-cat-banner .bn-text p { margin-inline: auto; }
}

/* ============================================================
 * SINGLE PRODUCT PAGE — demo-styled product detail (Task 3).
 * Layout, media plate, summary, qty stepper, green CTA, tabs and the
 * related-products .card grid. The structure is produced by the
 * single-product.php / content-single-product.php overrides.
 * ========================================================== */

/* Outer wrap + breadcrumb (single-product.php opens .wrap.jps-single). */
.jps-single-page main.site-main { padding-top: clamp(14px, 2.5vw, 28px); }
.jps-single .jps-breadcrumbs {
	font-size: .9rem; color: var(--muted); padding-top: 1.2rem; margin-bottom: .4rem;
}
.jps-single .jps-breadcrumbs a:hover { color: var(--primary); }

/* Two-column product layout: media | summary, like a polished PDP. */
.jps-single div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.4rem, 4vw, 3rem);
	align-items: start;
	margin-top: 1rem;
}

/* --- Media: clean white plate matching the cards, with the paw-print feel. --- */
.jps-single div.product .woocommerce-product-gallery {
	width: 100% !important; margin: 0; float: none;
	position: relative; border-radius: 28px; overflow: hidden;
	background:
		radial-gradient(120% 120% at 70% 18%, color-mix(in srgb, var(--accent) 30%, var(--surface)), var(--surface-2));
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.jps-single div.product .woocommerce-product-gallery__wrapper {
	margin: 0; display: grid; place-items: center; padding: clamp(1.2rem, 4vw, 2.4rem);
}
.jps-single div.product .woocommerce-product-gallery__image,
.jps-single div.product .woocommerce-product-gallery__image a {
	display: block; width: 100%;
}
.jps-single div.product .woocommerce-product-gallery__image img {
	border-radius: 18px;
	filter: drop-shadow(0 18px 26px rgba(0,0,0,.16));
}
/* Sale flash → the demo "מבצע" badge, top inline-start of the media plate. */
.jps-single div.product span.onsale {
	position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2;
	min-height: 0; min-width: 0; margin: 0; padding: .35rem .85rem;
	background: var(--primary); color: var(--primary-ink);
	border-radius: 999px; font-family: "Secular One", sans-serif;
	font-size: .8rem; font-weight: 700; line-height: 1.2;
}

/* --- Summary column --- a deliberate clean white panel.
   NOTE: WooCommerce's product summary carries class ".summary", which would
   otherwise inherit the demo's CART totals card (demo.css .summary: white card,
   shadow AND position:sticky;top:90px). We keep the white-card look on purpose
   here but explicitly drop the sticky + cart sizing so the PDP summary behaves
   as a normal column, not a sticky cart box. */
.jps-single div.product .summary.entry-summary {
	margin: 0; width: 100%; float: none; position: static; top: auto;
	display: flex; flex-direction: column; gap: .85rem;
	background: var(--surface);
	border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
	border-radius: 24px; padding: clamp(1.4rem, 3.5vw, 2rem);
	box-shadow: var(--shadow);
}
.jps-single div.product .summary .jps-cat-tag {
	font-size: .8rem; color: var(--primary); font-weight: 600;
}
.jps-single div.product .summary .product_title {
	font-family: "Suez One", serif; font-weight: 400;
	font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.1; margin: 0;
}
/* Rating row (stars + count) on the demo amber. */
.jps-single div.product .woocommerce-product-rating {
	margin: 0; display: flex; align-items: center; gap: .5rem;
}
.jps-single div.product .woocommerce-product-rating .star-rating { color: #f5a623; font-size: .95rem; }
.jps-single div.product .woocommerce-product-rating .woocommerce-review-link { color: var(--muted); font-size: .88rem; }
/* Price — big Suez One, sale strikethrough muted, like the card price. */
.jps-single div.product .summary p.price,
.jps-single div.product .summary .price {
	margin: .2rem 0 .2rem; display: flex; align-items: baseline; gap: .6rem;
	color: var(--text);
}
.jps-single div.product .summary .price .woocommerce-Price-amount,
.jps-single div.product .summary .price ins .woocommerce-Price-amount {
	font-family: "Suez One", serif; font-size: 1.9rem; font-weight: 800;
	color: var(--text); text-decoration: none;
}
.jps-single div.product .summary .price ins { text-decoration: none; }
.jps-single div.product .summary .price del,
.jps-single div.product .summary .price del .woocommerce-Price-amount {
	font-family: "Rubik", sans-serif; font-size: 1.1rem; font-weight: 500;
	color: var(--muted);
}
/* Short description. */
.jps-single div.product .summary .woocommerce-product-details__short-description {
	color: var(--text); line-height: 1.7; font-size: 1rem;
}
.jps-single div.product .summary .woocommerce-product-details__short-description p { margin: 0 0 .6rem; }

/* --- Add-to-cart row: qty stepper + green CTA on one line (demo feel) --- */
.jps-single div.product form.cart {
	display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
	margin: .6rem 0 .2rem;
}
.jps-single div.product form.cart .quantity {
	display: inline-flex; align-items: center; gap: .15rem;
	background: var(--surface-2); border-radius: 999px; padding: .25rem;
	position: relative;
}
.jps-single div.product form.cart .quantity .jps-qty-btn {
	width: 38px; height: 38px; border: none; border-radius: 50%;
	background: var(--surface); cursor: pointer; font-size: 1.25rem; line-height: 1;
	color: var(--text); display: grid; place-items: center; padding: 0;
	transition: background .15s, color .15s;
}
.jps-single div.product form.cart .quantity .jps-qty-btn:hover { background: var(--accent); color: var(--accent-ink); }
.jps-single div.product form.cart .quantity input.qty {
	width: 46px; height: 38px; border: none; background: transparent;
	text-align: center; font-family: "Rubik", sans-serif; font-weight: 600;
	font-size: 1rem; color: var(--text);
	-moz-appearance: textfield;
}
.jps-single div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.jps-single div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.jps-single div.product form.cart .single_add_to_cart_button,
.jps-single div.product form.cart .button {
	background: var(--primary); color: var(--primary-ink);
	border: none; border-radius: 999px;
	font-family: "Rubik", sans-serif; font-weight: 600; font-size: 1rem;
	padding: .8em 1.7em; cursor: pointer; flex: 1 1 auto; min-width: 180px;
	box-shadow: 0 12px 24px -10px var(--ring);
	transition: background .2s, transform .15s, box-shadow .2s;
}
.jps-single div.product form.cart .single_add_to_cart_button:hover,
.jps-single div.product form.cart .button:hover {
	background: var(--primary-2); transform: translateY(-2px);
	box-shadow: 0 18px 30px -10px var(--ring);
}

/* Product meta (SKU / category) under the CTA, muted + tidy. */
.jps-single div.product .product_meta {
	font-size: .85rem; color: var(--muted); margin-top: .4rem;
	padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.jps-single div.product .product_meta > span { display: block; margin-bottom: .3rem; }
.jps-single div.product .product_meta a { color: var(--primary); font-weight: 600; }

/* --- Long description / tabs --- a clean card panel below the two columns. */
.jps-single div.product .woocommerce-tabs {
	grid-column: 1 / -1; margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.jps-single div.product .woocommerce-tabs ul.tabs {
	list-style: none; margin: 0 0 -1px; padding: 0;
	display: flex; gap: .4rem; flex-wrap: wrap; border: 0;
}
.jps-single div.product .woocommerce-tabs ul.tabs::before,
.jps-single div.product .woocommerce-tabs ul.tabs::after { content: none; }
.jps-single div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; background: transparent; border: 0; border-radius: 14px 14px 0 0;
}
.jps-single div.product .woocommerce-tabs ul.tabs li::before,
.jps-single div.product .woocommerce-tabs ul.tabs li::after { content: none; border: 0; }
.jps-single div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: .7rem 1.2rem; color: var(--muted);
	font-family: "Rubik", sans-serif; font-weight: 600; font-size: .95rem;
}
.jps-single div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--surface);
	border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
	border-bottom-color: var(--surface);
}
.jps-single div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); }
.jps-single div.product .woocommerce-Tabs-panel {
	background: var(--surface);
	border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
	border-radius: 0 18px 18px 18px; padding: 1.6rem 1.7rem;
	box-shadow: 0 18px 40px -34px var(--ring);
	color: var(--text); line-height: 1.75;
}
.jps-single div.product .woocommerce-Tabs-panel h2 {
	font-family: "Suez One", serif; font-size: 1.3rem; margin: 0 0 .8rem;
}
.jps-single div.product .woocommerce-Tabs-panel p { margin: 0 0 .9rem; }
.jps-single div.product .woocommerce-Tabs-panel ul { margin: 0 1.2rem 1rem; display: flex; flex-direction: column; gap: .4rem; }

/* --- Related products: the demo .card grid under the product --- */
.jps-single .related.products,
.jps-single .up-sells.upsells.products {
	grid-column: 1 / -1; margin-top: clamp(1.8rem, 5vw, 3rem);
}
.jps-single .related.products > h2,
.jps-single .up-sells.products > h2 {
	font-family: "Suez One", serif; font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 1.2rem;
}
.jps-single .related.products .prods,
.jps-single .related.products ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
	list-style: none; margin: 0; padding: 0;
}
.jps-single .related.products ul.products::before,
.jps-single .related.products ul.products::after { content: none; }

@media (max-width: 860px) {
	.jps-single div.product { grid-template-columns: 1fr; }
	.jps-single .related.products .prods,
	.jps-single .related.products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.jps-single div.product form.cart .single_add_to_cart_button { flex-basis: 100%; }
	.jps-single .related.products .prods,
	.jps-single .related.products ul.products { grid-template-columns: 1fr; }
}

/* WooCommerce notices on the demo surface (cart/checkout). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-radius: 14px; border-top: none;
	border-inline-start: 4px solid var(--primary);
	background: var(--surface-2); color: var(--text);
	font-family: "Rubik", sans-serif;
}
.woocommerce-error { border-inline-start-color: #d6457f; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--primary); }

/* ============================================================
 * CART TOTAL — RTL fix for the grand-total amount.
 * The bold .total b LTR-isolates the ₪ number so it never mangles in RTL.
 * (Taxes are off store-wide, so WC appends no "(includes VAT)" suffix.)
 * ========================================================== */
.summary .total { flex-wrap: wrap; }
.summary .total b { direction: rtl; unicode-bidi: isolate; text-align: start; }
.summary .total b .woocommerce-Price-amount { direction: ltr; unicode-bidi: isolate; }

/* Proceed-to-checkout button — defensive: keep it the demo's green pill even
 * if WooCommerce's generic a.button / theme button styles try to win after an
 * AJAX cart re-render. (.btn-primary already supplies the green; this guards
 * specificity so it can never render dark.) */
.summary .wc-proceed-to-checkout a.checkout-button,
.summary a.checkout-button.btn.btn-primary {
	background: var(--primary) !important;
	color: var(--primary-ink) !important;
	border: none !important;
	border-radius: 999px !important;
}
.summary .wc-proceed-to-checkout a.checkout-button:hover,
.summary a.checkout-button.btn.btn-primary:hover {
	background: var(--primary-2) !important;
}

/* ============================================================
 * MOBILE NAV DRAWER — opened by the header burger (js/app.js).
 * Off-canvas panel from the inline-start side, theme-token styled so it
 * follows the active colour scheme; scrim dims the page behind it.
 * ========================================================== */
.m-drawer { position: fixed; inset: 0; z-index: 1200; }
.m-drawer[hidden] { display: none; }
.m-drawer .m-scrim {
	position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45);
	opacity: 0; transition: opacity .25s ease;
}
.m-drawer.open .m-scrim { opacity: 1; }
.m-drawer .m-panel {
	position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2;
	width: min(82vw, 320px); background: var(--surface); color: var(--text);
	box-shadow: 0 0 40px rgba(0,0,0,.25);
	padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 1rem;
	transform: translateX(-105%); transition: transform .26s ease;
	overflow-y: auto;
}
[dir="rtl"] .m-drawer .m-panel { transform: translateX(105%); }
.m-drawer.open .m-panel { transform: translateX(0); }
.m-drawer .m-close {
	align-self: flex-end; border: none; background: var(--surface-2);
	width: 38px; height: 38px; border-radius: 50%; font-size: 1.1rem;
	cursor: pointer; color: var(--text); line-height: 1;
}
.m-drawer .m-logo {
	font-family: "Suez One", serif; font-size: 1.4rem; color: var(--text);
	text-decoration: none; display: flex; align-items: center; gap: .3rem;
}
.m-drawer .m-logo b { color: var(--primary); }
.m-drawer .m-logo .paw { font-family: initial; }
.m-drawer .m-links { display: flex; flex-direction: column; gap: .2rem; margin-top: .4rem; }
.m-drawer .m-links a {
	display: block; padding: .85rem .6rem; border-radius: 12px;
	color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem;
	transition: background .15s, color .15s;
}
.m-drawer .m-links a:hover,
.m-drawer .m-links a:focus-visible { background: var(--surface-2); color: var(--primary); }
body.m-open { overflow: hidden; }

/* The burger is hidden on desktop in the demo; ensure the drawer never shows
 * unless explicitly opened, even on wide screens. */
@media (min-width: 861px) { .m-drawer:not(.open) { pointer-events: none; } }

/* ============================================================
 * LOGO bidi fix — the brand is the Latin wordmark "JunglePet".
 * In the RTL document the flex .logo reordered its runs to "Pet Jungle".
 * Force LTR on the wordmark so it always reads correctly, while the paw
 * stays first (margin handled by the existing flex gap).
 * ========================================================== */
header.nav .logo,
.m-drawer .m-logo { direction: ltr; }

/* ============================================================
 * SIGNUP / CLUB FORM (.jps-signup-form)
 * Used by the club page ("אני רוצה להצטרף 🎁") and any other
 * admin-ajax signup form rendered from page content. Unlike the
 * homepage ".news form", this markup ships with stray <br> tags and
 * no layout rule of its own, so the submit button floated at auto
 * width with the default .btn-primary drop-shadow — against the white
 * .card-box that read as a misaligned dark block behind the pill.
 *
 * Give it the same clean, centered treatment as ".news form": a
 * narrow centered column, the field full-width, and the submit a
 * single clean full-width pill. The <br> tags become no-ops in a
 * flex column, so no DB/content edit is needed.
 * ========================================================== */
.jps-signup-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .7rem;
	max-width: 440px;
	margin-inline: auto;
}
/* Neutralise the inline <br> separators inside the flex column. */
.jps-signup-form br { display: none; }
.jps-signup-form .field {
	width: 100%;
	text-align: start;
}
.jps-signup-form .btn {
	width: 100%;
	justify-content: center;
}