/**
 * Zoeymom Customisations — frontend questions on single product page.
 * Reads --zm-* tokens from the avada-child theme's :root.
 * Visual language: "The Organic Curator" (sage green + Noto Serif).
 */

.zm-customisations {
	margin: var(--zm-space-6, 1.5rem) 0;
	padding: var(--zm-space-6, 1.5rem);
	background-color: var(--zm-surface-container-low, #F5F4EF);
	border-radius: var(--zm-radius-lg, 1rem);
	border: 1px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 30%, transparent);
}

.zm-customisations__heading {
	margin: 0 0 1.25rem !important;
	font-family: var(--zm-font-headline, 'Noto Serif', Georgia, serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--zm-primary, #849678);
	letter-spacing: -0.01em;
}

.zm-customisations__field {
	border: none;
	padding: 0;
	margin: 0 0 1.25rem;
}
.zm-customisations__field:last-of-type { margin-bottom: 0; }

.zm-customisations__label {
	display: block;
	margin-bottom: 0.625rem;
	font-family: var(--zm-font-body, 'Noto Serif', Georgia, serif);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--zm-on-surface, #4A4A4A);
}

/* ------------------------------------------------------------------
   Zip — pill toggle (radio inputs styled as choice pills)
   ------------------------------------------------------------------ */

.zm-customisations__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.zm-customisations__pill {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem;
	background-color: var(--zm-background, #F9F8F4);
	border: 1px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 50%, transparent);
	border-radius: var(--zm-radius-full, 9999px);
	font-family: var(--zm-font-body);
	font-size: 0.875rem;
	color: var(--zm-on-surface, #4A4A4A);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	user-select: none;
}
.zm-customisations__pill input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.zm-customisations__pill:hover {
	border-color: var(--zm-primary, #849678);
	color: var(--zm-primary, #849678);
}
.zm-customisations__pill:has(input[type="radio"]:checked) {
	background-color: color-mix(in srgb, var(--zm-primary, #849678) 18%, var(--zm-background, #F9F8F4));
	border-color: var(--zm-primary, #849678);
	color: var(--zm-primary-dim, #6D7D62);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Length / Sleeves — single checkbox row (Stitch design)
   ------------------------------------------------------------------ */

.zm-customisations__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	padding: 0.25rem 0;
	font-family: var(--zm-font-body);
}
.zm-customisations__checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.zm-customisations__check-box {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 70%, transparent);
	border-radius: 0.25rem;
	background: var(--zm-background, #F9F8F4);
	color: transparent;
	margin-top: 0.125rem;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.zm-customisations__check-box svg {
	width: 0.875rem;
	height: 0.875rem;
	display: block;
}

.zm-customisations__checkbox:hover .zm-customisations__check-box {
	border-color: var(--zm-primary, #849678);
}
.zm-customisations__checkbox:has(input[type="checkbox"]:checked) .zm-customisations__check-box {
	background: var(--zm-primary, #849678);
	border-color: var(--zm-primary, #849678);
	color: var(--zm-on-primary, #FFFFFF);
}

.zm-customisations__check-label {
	font-size: 0.9375rem;
	color: var(--zm-on-surface, #4A4A4A);
	line-height: 1.4;
}

.zm-customisations__price {
	font-size: 0.8125rem;
	color: var(--zm-primary, #849678);
	font-weight: 600;
	margin-left: 0.375rem;
	letter-spacing: 0;
}

.zm-customisations__note {
	margin: 0.5rem 0 0 1.875rem;
	font-family: var(--zm-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--zm-tertiary, #8E8D8A);
	font-style: italic;
}

/* ------------------------------------------------------------------
   Length reduction — "reduce by N cm" field, revealed when the length
   checkbox is ticked (CSS-only via :has()).
   ------------------------------------------------------------------ */

.zm-customisations__detail {
	display: none;
	margin: 0.75rem 0 0 1.875rem;
}
.zm-customisations__field[data-question="length"]:has( input[type="checkbox"]:checked ) .zm-customisations__detail {
	display: block;
}

.zm-customisations__detail-label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--zm-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--zm-on-surface, #4A4A4A);
}

.zm-customisations__detail-input {
	width: 8rem;
	max-width: 100%;
	padding: 0.5rem 0.875rem;
	font-family: var(--zm-font-body);
	font-size: 0.9375rem;
	color: var(--zm-on-surface, #4A4A4A);
	background: var(--zm-background, #F9F8F4);
	border: 1px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 70%, transparent);
	border-radius: var(--zm-radius-md, 0.5rem);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zm-customisations__detail-input:focus {
	outline: none;
	border-color: var(--zm-primary, #849678);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zm-primary, #849678) 20%, transparent);
}

/* Cart line item meta — visual tightening */
.woocommerce-cart-form .product-name dl.variation,
.woocommerce-checkout-review-order-table .product-name dl.variation {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--zm-on-surface-variant, #6B6B6B);
}
.woocommerce-cart-form .product-name dl.variation dt { font-weight: 600; }

/* ------------------------------------------------------------------
   Size chart — the link under the size dropdown, and the popup it
   opens.
   ------------------------------------------------------------------ */

.zm-size-chart__link {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--zm-font-label, var(--zm-font-body));
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: inherit;
	color: var(--zm-primary, #849678);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}
.zm-size-chart__link:hover,
.zm-size-chart__link:focus-visible {
	color: var(--zm-on-surface, #4A4A4A);
	background: none;
}
.zm-size-chart__link:focus-visible {
	outline: 2px solid var(--zm-primary, #849678);
	outline-offset: 3px;
	border-radius: 2px;
}

/* The link's own line. The variations table already carries 24px below the
   dropdown, so pull back into it rather than stacking two gaps. */
.zm-size-chart__standalone {
	margin: -0.5rem 0 0;
}

/* ---- popup ---- */

.zm-size-chart__dialog {
	width: min(680px, calc(100vw - 2rem));
	max-width: none;
	max-height: 90vh;
	padding: 0;
	background: var(--zm-background, #F9F8F4);
	border: 1px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 45%, transparent);
	border-radius: var(--zm-radius-lg, 1rem);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	color: var(--zm-on-surface, #4A4A4A);
	overflow: hidden;
}

.zm-size-chart__dialog::backdrop {
	background: rgba(31, 31, 28, 0.55);
}

/* No native <dialog>: show it as a centred fixed panel instead. */
.zm-size-chart__dialog--fallback {
	display: block;
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.zm-size-chart__inner {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

.zm-size-chart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant, #D1D1D1) 35%, transparent);
	background: var(--zm-surface-container-low, #F5F4EF);
}

.zm-size-chart__title {
	margin: 0 !important;
	font-family: var(--zm-font-headline, 'Noto Serif', Georgia, serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--zm-primary, #849678);
}

.zm-size-chart__close {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--zm-radius-full, 9999px);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--zm-on-surface-variant, #6B6B6B);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.zm-size-chart__close:hover,
.zm-size-chart__close:focus-visible {
	background: color-mix(in srgb, var(--zm-primary, #849678) 12%, transparent);
	color: var(--zm-on-surface, #4A4A4A);
}

.zm-size-chart__body {
	padding: 1.25rem 1.5rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.zm-size-chart__figure {
	margin: 0 0 1.5rem;
}
.zm-size-chart__figure:last-child {
	margin-bottom: 0;
}

.zm-size-chart__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zm-radius-md, 0.5rem);
	background: #fff;
}

.zm-size-chart__caption {
	margin-top: 0.5rem;
	font-family: var(--zm-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--zm-on-surface-variant, #6B6B6B);
	text-align: center;
}

@media (max-width: 575px) {
	.zm-size-chart__dialog {
		width: calc(100vw - 1.5rem);
	}
	.zm-size-chart__header {
		padding: 1rem 1.125rem;
	}
	.zm-size-chart__body {
		padding: 1rem 1.125rem 1.25rem;
	}
}

/* ------------------------------------------------------------------
   Per-line GST row in the cart table and checkout order review.

   WooCommerce renders woocommerce_get_item_data output as a <dl class="variation">
   with each entry's key run through sanitize_html_class — so "GST included"
   becomes .variation-GSTincluded. This quiets the row relative to the
   customisation selections printed above it.
   ------------------------------------------------------------------ */
.woocommerce-cart dt.variation-GSTincluded,
.woocommerce-cart dd.variation-GSTincluded,
.woocommerce-checkout dt.variation-GSTincluded,
.woocommerce-checkout dd.variation-GSTincluded {
	color: var(--zm-tertiary);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------------
   Header cart count badge
   ------------------------------------------------------------------ */
.zm-hdr-icon {
	position: relative;
	display: inline-flex;
}

.zm-cart-count {
	position: absolute;
	top: -0.35rem;
	right: -0.45rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	border-radius: var(--zm-radius-full);
	background: var(--zm-primary);
	color: var(--zm-on-primary);
	font-family: var(--zm-font-label);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.15rem;
	text-align: center;
	box-shadow: 0 0 0 2px var(--zm-background);
}

.zm-cart-count.is-empty {
	display: none;
}

/* ------------------------------------------------------------------
   Add-to-cart confirmation — shared button pair, plus the ajax modal
   ------------------------------------------------------------------ */
.zm-atc-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--zm-space-3);
	margin-left: var(--zm-space-4);
}

.zm-atc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.4rem !important;
	border-radius: var(--zm-radius-full) !important;
	font-family: var(--zm-font-label);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.zm-atc-btn--primary {
	background: var(--zm-primary) !important;
	color: var(--zm-on-primary) !important;
	border: 1px solid var(--zm-primary) !important;
}

.zm-atc-btn--primary:hover {
	background: var(--zm-primary-dim) !important;
	border-color: var(--zm-primary-dim) !important;
}

.zm-atc-btn--ghost {
	background: transparent !important;
	color: var(--zm-primary) !important;
	border: 1px solid var(--zm-outline-variant) !important;
}

.zm-atc-btn--ghost:hover {
	background: var(--zm-surface-container) !important;
}

.zm-atc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zm-atc-modal[hidden] {
	display: none;
}

.zm-atc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 27, 23, 0.45);
}

.zm-atc-modal__panel {
	position: relative;
	max-width: 26rem;
	width: calc(100% - 2rem);
	padding: var(--zm-space-8);
	border-radius: var(--zm-radius-lg);
	background: var(--zm-surface);
	box-shadow: 0 24px 60px rgba(31, 27, 23, 0.22);
	text-align: center;
}

.zm-atc-modal__title {
	margin: 0 0 var(--zm-space-6);
	font-family: var(--zm-font-headline);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--zm-on-surface);
}

/* In the modal the pair always stacks full-width: at 26rem the two labels do
   not reliably fit side by side, and a half-wrapped row reads as a mistake. */
.zm-atc-modal__actions .zm-atc-actions {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-left: 0;
}

.zm-atc-modal__actions .zm-atc-btn {
	width: 100%;
}

.zm-atc-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--zm-on-surface-variant);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
}

.zm-atc-modal__close::before {
	content: "\00d7";
}

.zm-atc-modal__close:hover {
	background: var(--zm-surface-container);
}

@media (max-width: 480px) {
	.zm-atc-actions {
		width: 100%;
		margin-left: 0;
		margin-top: var(--zm-space-3);
	}
	.zm-atc-btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------
   Shipping dispatch / carrier delay clause
   ------------------------------------------------------------------ */
.zm-shipping-clause td {
	padding-top: 0 !important;
	border-top: none !important;
}

.zm-shipping-clause__text {
	margin: 0;
	font-family: var(--zm-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--zm-tertiary);
}

/* ------------------------------------------------------------------
   Cart / checkout quantity control

   The child theme's generic "Form inputs" rule pads every number input by
   0.875rem 1.25rem !important. On the cart's narrow .qty box — ~42px wide with
   box-sizing: border-box — that 40px of horizontal padding leaves about 2px of
   content width, and the digit is clipped away entirely: the field looks empty
   even though it holds the right value.

   The single-product form already carries its own override (.zm-product-form
   .quantity .qty in style.css); the cart had no equivalent because it rendered
   as a Blocks cart until the classic shortcode switch. This is that override,
   shaped to match the product page's pill.
   ------------------------------------------------------------------ */
.woocommerce-cart .quantity,
.woocommerce-checkout .quantity {
	display: inline-flex !important;
	align-items: center;
	gap: 0.15rem;
	padding: 0.2rem 0.3rem;
	border: 1px solid color-mix(in srgb, var(--zm-outline-variant) 60%, transparent);
	border-radius: var(--zm-radius-full);
	background: var(--zm-background);
}

.woocommerce-cart .quantity .qty,
.woocommerce-cart .quantity input[type="number"],
.woocommerce-checkout .quantity .qty,
.woocommerce-checkout .quantity input[type="number"] {
	width: 2.5rem !important;
	min-width: 2.5rem !important;
	height: auto !important;
	padding: 0.35rem 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-family: var(--zm-font-body) !important;
	font-size: 0.9375rem !important;
	line-height: 1.2 !important;
	color: var(--zm-on-surface) !important;
	-moz-appearance: textfield;
}

.woocommerce-cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce-checkout .quantity .qty::-webkit-outer-spin-button,
.woocommerce-checkout .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Avada renders the steppers as <input type="button" class="minus|plus">. */
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus,
.woocommerce-checkout .quantity .minus,
.woocommerce-checkout .quantity .plus {
	width: 1.6rem !important;
	height: 1.6rem !important;
	min-width: 1.6rem !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--zm-on-surface-variant) !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	text-align: center;
	cursor: pointer;
}

.woocommerce-cart .quantity .minus:hover,
.woocommerce-cart .quantity .plus:hover,
.woocommerce-checkout .quantity .minus:hover,
.woocommerce-checkout .quantity .plus:hover {
	background: var(--zm-surface-container) !important;
	color: var(--zm-primary) !important;
}

/* ------------------------------------------------------------------
   Cart two-column grid — notices wrapper

   style.css lays the cart out as `.woocommerce-cart .woocommerce { display:
   grid; grid-template-columns: 2fr 1fr }`, written when the only children were
   the form and the totals. The classic cart also renders a
   .woocommerce-notices-wrapper as the FIRST child, so it claimed the 2fr
   column, squeezed the cart table into the 1fr one, and pushed the totals onto
   a second row. Span it across both tracks so the form and totals land where
   the grid intends.
   ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Belt and braces: name the two real children explicitly, so another stray
   wrapper cannot re-order the layout the same way. Only above the 768px
   breakpoint where style.css keeps two tracks — naming column 2 in the
   single-column mobile grid would conjure an implicit second column. */
@media (min-width: 769px) {
	.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
	}

	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
	}
}

/* ------------------------------------------------------------------
   Cart sidebar (.cart-collaterals)

   Avada lays this out as a wrapping flex row, which was fine at full page
   width but not inside the 1fr sidebar track: the shipping calculator settles
   at ~310px while the totals table takes the full ~647px, so the boxes wrap at
   different widths and the coupon button clips. Stack them instead, each
   filling the column.
   ------------------------------------------------------------------ */
.woocommerce-cart .cart-collaterals {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: var(--zm-space-6);
}

.woocommerce-cart .cart-collaterals > * {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Shipping calculator: one field per line rather than Avada's floated pairs,
   which overlap once the column is this narrow. */
.woocommerce-cart .shipping-calculator-form p,
.woocommerce-cart .shipping-calculator-form .form-row {
	width: 100% !important;
	float: none !important;
	margin: 0 0 var(--zm-space-3) !important;
}

.woocommerce-cart .shipping-calculator-form input,
.woocommerce-cart .shipping-calculator-form select,
.woocommerce-cart .shipping-calculator-form .select2-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* Coupon row: let the field flex and the button keep its own width, so the
   button is never pushed out of the box. */
.woocommerce-cart .coupon {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--zm-space-2);
	width: 100%;
}

.woocommerce-cart .coupon .input-text {
	flex: 1 1 8rem;
	width: auto !important;
	min-width: 0;
}

.woocommerce-cart .coupon .button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Checkout two-column grid

   style.css lays the checkout form out as `display: grid;
   grid-template-columns: 1.5fr 1fr`, written for a plain shortcode checkout
   with the billing fields left and the order summary right. Two things break
   that here:

   1. Avada injects .avada-woocommerce-error as the form's FIRST child, so it
      claimed the 1.5fr track and pushed #customer_details into the narrow one.
   2. Avada's multistep checkout shows one section at a time — its own rule is
      `body:not(.avada-woo-one-page-checkout) ... #order_review { display:none }`
      — so the second column is empty and the visible section is squeezed into
      a fraction of the page.

   Notices span both tracks; the grid collapses to one column in multistep, and
   keeps the intended two-column split when Avada is set to one-page checkout.
   ------------------------------------------------------------------ */
.woocommerce-checkout form.checkout > .avada-woocommerce-error,
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body:not(.avada-woo-one-page-checkout) .woocommerce-checkout form.checkout {
	grid-template-columns: 1fr !important;
}

/* Same breakpoint guard as the cart: style.css drops to a single track at
   768px, and naming column 2 there would create an implicit one. */
@media (min-width: 769px) {
	body.avada-woo-one-page-checkout .woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
	}

	body.avada-woo-one-page-checkout .woocommerce-checkout form.checkout > #order_review_heading,
	body.avada-woo-one-page-checkout .woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
	}
}