/**
 * Soukara — Checkout chrome.
 *
 * Restyles WooCommerce's NATIVE checkout (form-checkout / payment /
 * payment-method / review-order overrides) to the design handoff
 * (Soukara Store.dc.html, lines 474–522). Adds chrome only — WC's markup,
 * field validation, gateways, place-order and order-review AJAX are untouched.
 *
 * Also styles the Instant Chat Checkout plugin's surfaces, defensively:
 *   - its "WhatsApp Order" gateway row on the checkout (.soukara-pay-row--whatsapp);
 *   - its "Order on WhatsApp" PRODUCT-PAGE button (.waw-order-button +
 *     defensive fallbacks). Those product-page rules are loaded on is_product()
 *     too (see inc/enqueue.php) so the button is styled even though the rest of
 *     this sheet is checkout-only. Everything degrades gracefully when the
 *     plugin is absent (the selectors simply match nothing).
 *
 * Loaded on is_checkout() and is_product() (inc/enqueue.php). Depends on the
 * design tokens + .sx-* utilities from storefront.css.
 *
 * @package Soukara
 */

/* ==========================================================================
   Checkout shell + breadcrumb + heading
   ========================================================================== */

.soukara-checkout {
	max-width: 1100px;
	margin: 0 auto;
	padding: 34px 28px 90px;
}

.soukara-checkout__crumbs {
	font-size: 12px;
	color: var(--text-subtle);
	font-weight: 600;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.soukara-checkout__crumbs a {
	text-decoration: none;
}

.soukara-checkout__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0 0 28px;
}

/* ==========================================================================
   Two-column layout
   ========================================================================== */

.soukara-checkout__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: start;
}

/* ==========================================================================
   Customer details (left) — restyle WC's native fieldsets/fields
   ========================================================================== */

.soukara-checkout__details .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.soukara-checkout__details h3 {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	margin: 0 0 16px;
}

/* Lay WC's stacked rows into the two-up grid from the design (first/last on
   one row, the rest full-width). WC marks first/last with form-row-first /
   form-row-last; everything else is form-row-wide. */
.soukara-checkout__details .woocommerce-billing-fields__field-wrapper,
.soukara-checkout__details .woocommerce-shipping-fields__field-wrapper,
.soukara-checkout__details .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 30px;
}

@media (max-width: 480px) {
	.soukara-checkout__details .woocommerce-billing-fields__field-wrapper,
	.soukara-checkout__details .woocommerce-shipping-fields__field-wrapper,
	.soukara-checkout__details .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.soukara-checkout__details .form-row-first,
	.soukara-checkout__details .form-row-last,
	.soukara-checkout__details .form-row-wide,
	.soukara-checkout__details .form-row[class*="address_1"],
	.soukara-checkout__details .form-row[class*="address_2"],
	.soukara-checkout__details .notes {
		grid-column: 1 / 2;
	}
}

.soukara-checkout__details .form-row {
	margin: 0;
	padding: 0;
}

/* WC also sets float + width:47% on first/last (via `.woocommerce form
   .form-row-first`, which out-specifies a plain class selector), so the fields
   render at ~half their grid cell. Force them to fill the cell. */
.soukara-checkout__details .form-row-first,
.soukara-checkout__details .form-row-last,
.soukara-checkout__details .form-row-wide {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

.soukara-checkout__details .form-row-first {
	grid-column: 1 / 2;
}

.soukara-checkout__details .form-row-last {
	grid-column: 2 / 3;
}

.soukara-checkout__details .form-row-wide,
.soukara-checkout__details .form-row[class*="address_1"],
.soukara-checkout__details .form-row[class*="address_2"],
.soukara-checkout__details .notes {
	grid-column: 1 / 3;
}

/* WooCommerce floats .col-1 / .col-2 at width:47% for its two-column billing/
   shipping layout. We render a single full-width column, so neutralise the
   float + width — otherwise the whole field grid is squeezed to ~280px and the
   inputs/labels collapse. */
.soukara-checkout__details .col2-set > .col-1,
.soukara-checkout__details .col2-set > .col-2 {
	float: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

/* Country is locked to Ghana (the store sells to GH only), so hide the field —
   it would otherwise sit between Phone and Email and break their paired row.
   The value still posts as GH from the single-option control. */
.soukara-checkout__details #billing_country_field,
.soukara-checkout__details #shipping_country_field {
	/* !important beats the inline display WooCommerce's address-i18n JS sets. */
	display: none !important;
}

/* Pin the Ghana field order. WooCommerce's address-i18n JS re-sorts the billing
   DOM by its own country-locale priorities after load (ignoring the server order
   we set), so we enforce the visual order on the grid items with `order` — which
   that DOM shuffle can't touch: name → phone → email → town → address. */
.soukara-checkout__details #billing_first_name_field { order: 1; }
.soukara-checkout__details #billing_last_name_field  { order: 2; }
.soukara-checkout__details #billing_phone_field      { order: 3; }
.soukara-checkout__details #billing_email_field      { order: 4; }
.soukara-checkout__details #billing_city_field       { order: 5; }
.soukara-checkout__details #billing_address_1_field  { order: 6; }

.soukara-checkout__details label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 6px;
}

/* Input chrome — mirror the .sx-in treatment from the design (494px row). */
.soukara-checkout__details input.input-text,
.soukara-checkout__details textarea,
.soukara-checkout__details select,
.soukara-checkout__details .select2-container .select2-selection {
	width: 100%;
	border: 1px solid var(--color-border-strong);
	background: var(--white);
	border-radius: 8px;
	min-height: 50px;
	padding: 0 16px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-strong);
	box-sizing: border-box;
}

.soukara-checkout__details textarea {
	padding: 14px 16px;
	min-height: 90px;
	line-height: 1.5;
}

.soukara-checkout__details input.input-text:focus,
.soukara-checkout__details textarea:focus,
.soukara-checkout__details select:focus {
	outline: none;
	border-color: var(--color-focus, var(--slate-800));
	box-shadow: 0 0 0 3px var(--color-accent-soft, rgba(0, 0, 0, 0.06));
}

/* ==========================================================================
   Order review (right) — sticky "Your order" card
   ========================================================================== */

/* The "Your order" card. One consistent system: 28px card padding, a single
   1px divider colour used for the title rule, every line-item, and the total —
   all spanning the full content width — with an even 16px vertical rhythm. */
/* Right column is a transparent, sticky wrapper. The order summary and the
   payment area each render as their own standalone card (equal-width siblings)
   rather than the payment being nested inside the summary's padding. */
.soukara-checkout__review {
	position: sticky;
	top: 90px;
}

/* The "Your order" card. */
.soukara-checkout__summary-card {
	background: var(--white);
	border-radius: 12px;
	padding: 24px;
	/* Whitespace + a whisper of shadow define the card — no grey outline. */
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.soukara-checkout__review-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--text-strong);
	margin: 0 0 8px;
}

/* Strip WooCommerce's default .shop_table chrome (1px border, 5px radius,
   negative margin, separate borders) — it draws a box around the line items
   that fights the borderless card. Out-specifies `.woocommerce table.shop_table`. */
.woocommerce .soukara-review.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.woocommerce .soukara-review.shop_table td,
.woocommerce .soukara-review.shop_table th {
	border-top: 0;
}

.soukara-review thead {
	/* The native "Product / Subtotal" header is redundant with the design. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Reset every cell, then layer consistent values on top. */
.soukara-review th,
.soukara-review td {
	border: 0;
	padding: 0;
}

/* ── Line items: 16px top+bottom, a divider under each ───────────────────── */
.soukara-review tbody .cart_item td {
	padding: 16px 0;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.soukara-review td.product-name {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%; /* absorb slack so the price sits flush right */
}

.soukara-review td.product-total {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	padding-left: 16px;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums; /* digits align across all prices */
	font-size: 14px;
	font-weight: 600;
	color: var(--text-strong);
}

.soukara-review__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 58px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--slate-950, var(--slate-900));
	display: block;
}

.soukara-review__thumb-img {
	width: 48px;
	height: 58px;
	object-fit: cover;
	display: block;
}

.soukara-review__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	background: var(--slate-800);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 19px;
	height: 19px;
	padding: 0 4px;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	box-sizing: border-box;
}

.soukara-review__meta {
	flex: 1;
	min-width: 0;
}

.soukara-review__name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-strong);
	line-height: 1.3;
}

/* Hide the duplicated "× N" WC appends — the badge already shows quantity. */
.soukara-review__name .product-quantity {
	display: none;
}

.soukara-review .variation,
.soukara-review .product-name dl {
	font-size: 14px;
	color: var(--text-muted);
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.3;
	margin: 3px 0 0;
}

/* ── Totals ──────────────────────────────────────────────────────────────── */
.soukara-review tfoot tr th,
.soukara-review tfoot tr td {
	padding: 16px 0;
	font-size: 16px;
}

.soukara-review tfoot tr th {
	text-align: left;
	color: var(--text-muted);
	font-weight: 500;
}

.soukara-review tfoot tr td {
	text-align: right;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--text-strong);
	font-weight: 600;
}

/* Subtle divider under the subtotal. */
.soukara-review tfoot .cart-subtotal th,
.soukara-review tfoot .cart-subtotal td {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.soukara-review .cart-discount th,
.soukara-review .cart-discount td {
	color: var(--clay-600);
	font-weight: 600;
}

/* Delivery notice — secondary helper info, not a pricing row. */
.soukara-review tfoot tr.soukara-review__delivery-note td {
	text-align: left;
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--sage-600);
	font-size: 14px;
	line-height: 1.3;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Total — the visual anchor: a tall row, big amount, vertically centred. */
.soukara-review .order-total th,
.soukara-review .order-total td {
	font-family: var(--font-display);
	color: var(--text-strong);
	padding-top: 20px;
	vertical-align: middle;
}

.soukara-review .order-total th { font-size: 18px; font-weight: 600; }
.soukara-review .order-total td { font-size: 32px; font-weight: 700; }

/* WooCommerce's `.shop_table td` rule out-specifies our cell rules and slips a
   ~12px right-pad onto the tfoot amounts, so Subtotal/Total sat 12px left of the
   item prices. Zero it so every amount shares one right edge. */
.woocommerce .soukara-review.shop_table tfoot td {
	padding-right: 0;
}

/* Coupons are entered on the cart page; hide the checkout coupon toggle. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

/* ==========================================================================
   Payment area — gateway rows as radio cards (design 492–502)
   ========================================================================== */

/* Borderless white card defined by whitespace + a whisper of shadow. The
   `!important` on background beats WooCommerce core's `#payment { background:
   #ebe9eb }` lavender. */
#payment.soukara-payment {
	margin-top: 24px;
	background: var(--white) !important;
	border: 0;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Match the "Your order" card title so the two card headings are consistent. */
.soukara-payment__heading {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-strong);
	margin: 0 0 20px;
}

.soukara-payment__methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Drop WooCommerce's default border-bottom on the payment-methods <ul>
   (WC's `#payment ul.payment_methods` wins on ID specificity). */
#payment.soukara-payment ul.payment_methods {
	border: 0;
}

.soukara-pay-row {
	/* Light, even border on both options; the selected state leans on the green
	   tint rather than a heavy outline. */
	border: 1px solid #E7E7E7;
	background: var(--white);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hide the native radio input — the custom .soukara-pay-row__radio renders it. */
.soukara-pay-row > input.input-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Three-column grid: radio | content | status icon, vertically centred. */
.soukara-pay-row__label {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	cursor: pointer;
	margin: 0;
}

.soukara-pay-row__radio {
	width: 20px;
	height: 20px;
	border-radius: 99px;
	border: 2px solid var(--color-border-strong);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease;
}

.soukara-pay-row__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 99px;
	background: transparent;
	transition: background-color 0.2s ease;
}

/* Selected state — subtle green (WC adds no class, so drive it off :checked). */
.soukara-pay-row > input.input-radio:checked ~ .soukara-pay-row__label .soukara-pay-row__radio {
	border-color: #22c55e;
}

.soukara-pay-row > input.input-radio:checked ~ .soukara-pay-row__label .soukara-pay-row__radio::after {
	background: #22c55e;
}

.soukara-pay-row:has(> input.input-radio:checked) {
	border-color: #22c55e;
	background: #f5fcf7;
}

.soukara-pay-row > input.input-radio:focus-visible ~ .soukara-pay-row__label .soukara-pay-row__radio {
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.soukara-pay-row__title {
	flex: 1; /* take the slack so the title fits one line + pushes the icon right */
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--text-strong);
}

.soukara-pay-row__logo {
	height: 22px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
	background: var(--white);
	border-radius: 5px;
	display: block;
}

/* Fixed-width status/icon column so both rows align on the same right grid. */
.soukara-pay-row__icon {
	flex: 0 0 auto;
	min-width: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
}

.soukara-pay-row__icon img {
	height: 22px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
}

/* The gateway description box WC shows under the chosen method — sits tight
   under the title, indented to align past the radio, max three lines. */
.soukara-pay-row .payment_box {
	padding: 0 16px 16px 52px;
	margin-top: -4px;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.45;
	/* Kill WooCommerce's default lavender (#dfdcde) box + its triangle pointer
	   (WC's #payment … .payment_box rule wins on ID specificity, so !important). */
	background: transparent !important;
}

.soukara-pay-row .payment_box::before {
	display: none !important;
}

.soukara-pay-row .payment_box p {
	margin: 0;
	max-width: 42ch;
}

/* Secure-payment block — a divider, then a titled reassurance (stronger
   hierarchy than the old single line). */
.soukara-payment__secure {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e7e7e7;
}

.soukara-payment__secure-icon {
	flex: 0 0 auto;
	color: var(--text-muted);
	margin-top: 1px;
}

.soukara-payment__secure-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.soukara-payment__secure-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-strong);
}

.soukara-payment__secure-desc {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.5;
	max-width: 44ch;
}

/* Place-order area: privacy text (constrained width) then the CTA. */
.soukara-payment .place-order {
	margin-top: 24px;
	padding: 0;
}

.soukara-payment .woocommerce-terms-and-conditions-wrapper {
	max-width: 60ch;
	margin: 0 0 32px;
	font-size: 12.5px;
	color: var(--text-muted);
}

/* The strongest element on the page — slate CTA with a soft hover lift. */
.soukara-payment #place_order {
	width: 100%;
	border: 0;
	background: var(--slate-800);
	color: var(--cream);
	border-radius: 12px;
	min-height: 56px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.soukara-payment #place_order:hover {
	background: var(--slate-900);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

/* ==========================================================================
   Instant Chat Checkout — "WhatsApp Order" gateway row (checkout)
   Styled with the brand green when the plugin is active; inert otherwise.
   ========================================================================== */

/* #25d366 is the deliberate WhatsApp brand green from the design handoff
   (Soukara Store.dc.html, lines 374–375). It intentionally overrides the
   Instant Chat Checkout plugin's own gradient on the gateway row icon. */
.soukara-pay-row--whatsapp .soukara-pay-row__icon--whatsapp {
	color: #25d366;
}

.soukara-pay-row--whatsapp:has(> input.input-radio:checked) {
	border-color: #25d366;
	background: rgba(37, 211, 102, 0.08);
}

.soukara-pay-row--whatsapp > input.input-radio:checked ~ .soukara-pay-row__label .soukara-pay-row__radio {
	border-color: #25d366;
}

.soukara-pay-row--whatsapp > input.input-radio:checked ~ .soukara-pay-row__label .soukara-pay-row__radio::after {
	background: #25d366;
}

/* ==========================================================================
   Instant Chat Checkout — "Order on WhatsApp" PRODUCT-PAGE button
   Loaded on is_product() too (inc/enqueue.php). Defensive selectors: the
   plugin's own classes (.waw-order-button / .waw-product-button-wrap) plus a
   generic fallback for any WhatsApp button injected into the add-to-cart area.
   When the plugin is absent these match nothing.
   ========================================================================== */

.waw-product-button-wrap {
	margin-top: 14px;
}

/* #25d366 is the deliberate WhatsApp brand green from the design handoff
   (Soukara Store.dc.html, lines 374–375). It intentionally overrides the
   Instant Chat Checkout plugin's own gradient on the product-page button. */
.waw-order-button,
.single-product form.cart [class*="whatsapp"] a,
.single-product form.cart a[class*="whatsapp"],
.single-product form.cart button[class*="whatsapp"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	text-decoration: none;
	border: 0;
	background: #25d366 !important;
	color: #0b2e18 !important;
	border-radius: 8px;
	min-height: 54px;
	padding: 0 22px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.waw-order-button:hover,
.single-product form.cart [class*="whatsapp"] a:hover,
.single-product form.cart a[class*="whatsapp"]:hover,
.single-product form.cart button[class*="whatsapp"]:hover {
	background: #1fb955 !important;
}

.waw-order-button .icchat-whatsapp-icon,
.waw-order-button svg {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.waw-order-button .icchat-whatsapp-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Full-width size variant the plugin emits. */
.waw-product-button-wrap.waw-size-full .waw-order-button {
	width: 100%;
}

/* ==========================================================================
   WooCommerce notices — branded banners (coupon toggle, errors, messages).
   WC ships these as grey boxes with a left bar + font-icon; restyle to soft
   brand banners. Scoped by this stylesheet's load context (checkout + PDP).
   ========================================================================== */
.woocommerce-info,
.woocommerce-error,
.woocommerce-message {
	margin: 0 0 22px;
	padding: 13px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.5;
	box-shadow: none;
}
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::before {
	display: none; /* drop WC's font-icon + coloured left bar */
}
.woocommerce-info > li,
.woocommerce-error > li,
.woocommerce-message > li {
	list-style: none;
	margin: 0;
}
.woocommerce-info {
	background: var(--clay-50);
	border-color: var(--clay-200);
	color: var(--clay-800);
}
.woocommerce-message {
	background: var(--sage-100);
	border-color: #cdd9bf;
	color: var(--sage-600);
}
.woocommerce-error {
	background: #fbeae8;
	border-color: #eec6bf;
	color: #9b2c1a;
}
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-message a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "Have a coupon?" toggle — keep it inline + tidy at the top of the form. */
.checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* The expanded coupon form. */
.checkout_coupon.woocommerce-form-coupon {
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--white);
}
.checkout_coupon .form-row { margin-bottom: 0; }
.checkout_coupon .input-text {
	width: 100%;
	border: 1px solid var(--color-border-strong);
	border-radius: 8px;
	min-height: 48px;
	padding: 0 14px;
	font-family: var(--font-sans);
	font-size: 14px;
	box-sizing: border-box;
}
.checkout_coupon .button {
	background: var(--slate-800) !important;
	color: var(--cream) !important;
	border: 0 !important;
	border-radius: 8px;
	min-height: 48px;
	padding: 0 22px;
	font-weight: 700;
	cursor: pointer;
}

/* ---- Inline field validation ---- */
.soukara-checkout__details .form-row.woocommerce-invalid input.input-text,
.soukara-checkout__details .form-row.woocommerce-invalid textarea,
.soukara-checkout__details .form-row.woocommerce-invalid select {
	border-color: #d98b7d;
	box-shadow: 0 0 0 3px rgba(217, 139, 125, 0.14);
}
.soukara-checkout__details .form-row.woocommerce-validated input.input-text {
	border-color: var(--sage-500);
}

/* Stack the checkout to a single column below the desktop layout so the order
   panel is full-width (instead of overflowing the viewport) and unstick it. */
@media (max-width: 880px) {
	.soukara-checkout__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.soukara-checkout__review {
		position: static;
		top: auto;
	}
}