/* =============================================================================
   WOOCOMMERCE — notices, forms, quantity stepper, cart, checkout, order
   received, my account. WooCommerce's own CSS is disabled (inc/woocommerce/setup.php).
   Buttons (<button>, input[type=submit]) and inputs are styled by the Elementor
   kit (Theme Style → Buttons / Form Fields); this file adds layout and the
   pieces the kit doesn't reach (a.button links, select2, stepper, notices).

   Prescribery (Pre-Woo) hooks into the standard checkout + thank-you page —
   style containers here, never replace those templates.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page shell (cart / checkout / account are plain WP pages, not Elementor)
   ----------------------------------------------------------------------------- */

/* Readability floor: a brand's small presets (12px and under) suit marketing copy, not forms and
   order summaries. Cart, checkout and account never go below 14px (labels, rows) / 16px (fields, text). */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) {
	--text-sm: max(var(--e-global-typography-body-sm-font-size, 14px), 14px);
	--text-base: max(var(--e-global-typography-text-font-size, 16px), 16px);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) .site-main {
	width: min(100% - 2 * var(--space-5), var(--container-width, 1280px));
	max-width: none;
	margin: 0 auto;
	padding: var(--space-7) 0 var(--space-8);
	font-size: var(--text-base);
}

.woocommerce :is(h2, h3):not([class*="nova-"]) {
	margin: 0 0 var(--space-5);
	font-size: var(--text-h5);
}

/* Link-style buttons: the kit only styles real <button>/<input> elements. */
.woocommerce a.button,
.woocommerce a.checkout-button,
.woocommerce .wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--button-padding, 14px 28px);
	border-radius: var(--radius-button, 6px);
	background: var(--color-primary);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transition);
}

.woocommerce a.button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .wc-forward:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-dark);
}

/* -----------------------------------------------------------------------------
   Notices
   ----------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-input, 6px);
	background: var(--color-surface-alt);
	color: var(--color-heading);
	font-size: var(--text-sm);
	list-style: none;
}

.woocommerce-message {
	border-left-color: var(--color-success);
}

.woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	border-left-color: var(--color-error);
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a.button, .wc-forward) {
	order: 2;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.woocommerce-info a:not(.button) {
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Form rows (checkout, account, coupon)
   ----------------------------------------------------------------------------- */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-heading);
}

.woocommerce form .form-row .required {
	color: var(--color-error);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	font-weight: 400;
	color: var(--color-muted);
}

.woocommerce form .form-row :is(input.input-text, select, textarea) {
	width: 100%;
}

/* The kit sizes fields with the Body preset; keep them on the floor above (16px also stops iOS zooming in). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .site-main :is(input.input-text, select, textarea),
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container .select2-selection__rendered {
	font-size: var(--text-base);
}

/* Native selects aren't covered by the kit's form-field style. */
.woocommerce form .form-row select {
	min-height: 48px;
	padding: 12px 40px 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
	background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 16px center no-repeat;
	color: var(--color-text);
	font: inherit;
	appearance: none;
}

.woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select) {
	border-color: var(--color-error);
}

/* Field wrappers span the row (not every span: select2's arrow/selection are spans too). */
.woocommerce form .form-row :is(.woocommerce-input-wrapper, .password-input, .select2-container) {
	width: 100%;
}

/* Show-password toggle (WooCommerce wraps password fields in .password-input and adds the button):
   an icon inside the field, never a CTA — My Account and the checkout login form. */
:is(.woocommerce-account, .woocommerce-checkout) .password-input {
	position: relative;
	display: block;
	width: 100%;
}

body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce form .password-input input {
	padding-right: 48px;
}

body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce .show-password-input,
body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce .show-password-input:hover,
body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce .show-password-input:focus {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--account-radius-sm, min(var(--radius-card, 16px), 12px));
	background: transparent;
	color: var(--color-muted);
	box-shadow: none;
	transform: translateY(-50%);
	cursor: pointer;
}

body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce .show-password-input:hover {
	color: var(--color-heading);
}

body:is(.woocommerce-account, .woocommerce-checkout) .woocommerce .show-password-input:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

:is(.woocommerce-account, .woocommerce-checkout) .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--account-eye) center / contain no-repeat;
	mask: var(--account-eye) center / contain no-repeat;
	--account-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

:is(.woocommerce-account, .woocommerce-checkout) .show-password-input.display-password::before {
	--account-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.8 8.4 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 500;
	cursor: pointer;
}

/* Native checkbox/radio — beats the kit's text-field rule (input:not([type=button])…). */
.woocommerce form input[type="checkbox"][name],
.woocommerce form input[type="radio"][name] {
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	accent-color: var(--color-primary);
	appearance: auto;
}

/* Select2 (country / state) — match native inputs. */
.select2-container .select2-selection--single {
	height: auto;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
	background: var(--color-card);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--color-text);
}

.select2-container .select2-selection--single .select2-selection__arrow {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
	border-color: var(--color-primary);
}

.select2-dropdown {
	border-color: var(--color-border);
	border-radius: var(--radius-input, 6px);
	overflow: hidden;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[data-selected] {
	background: var(--color-primary);
	color: var(--color-on-dark);
}

/* -----------------------------------------------------------------------------
   Quantity stepper (woocommerce/global/quantity-input.php) — cart + product
   ----------------------------------------------------------------------------- */

.woocommerce .quantity,
.nova-sp-info .quantity {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-card);
}

body .quantity button.nova-qty-btn,
body .quantity button.nova-qty-btn:hover,
body .quantity button.nova-qty-btn:focus {
	width: 40px;
	height: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-heading);
	font-size: 18px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

body .quantity button.nova-qty-btn:hover {
	color: var(--color-primary);
}

.quantity input.input-text.qty[name] {
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-heading);
	font-weight: 600;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
}

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

/* Fixed-supply products lock qty to 1 (inc/woocommerce/fixed-supply-qty.php). */
.nova-fixed-supply-qty-wrap {
	pointer-events: none;
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Order summary card — shared by cart sidebar and checkout sidebar
   ----------------------------------------------------------------------------- */

.nova-checkout-order {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card, 12px);
	background: var(--color-card);
}

.nova-checkout-order > h3,
.woocommerce h3.nova-cart-order-heading,
.woocommerce h3.nova-cart-heading,
.woocommerce-checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3 {
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-h5);
}

/* Review table as rows (thead hidden, each tr a two-column grid). */
.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout-review-order-table :is(tbody, tfoot) {
	display: block;
}

.woocommerce-checkout-review-order-table tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-4);
	align-items: baseline;
	padding: var(--space-2) 0;
}

.woocommerce .woocommerce-checkout-review-order-table tr > :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
}

.woocommerce .woocommerce-checkout-review-order-table tr > td:last-child {
	text-align: right;
}

.woocommerce-checkout-review-order-table tbody tr.cart_item {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-checkout-review-order-table tfoot {
	padding-top: var(--space-4);
}

.woocommerce-checkout-review-order-table tr.order-total {
	margin-top: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.woocommerce .woocommerce-checkout-review-order-table tr.order-total > :is(th, td) {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-heading);
}

.woocommerce-checkout-review-order-table .includes_tax {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--color-muted);
}

.nova-checkout-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.nova-checkout-item__name {
	font-weight: 600;
	color: var(--color-heading);
	overflow-wrap: anywhere;
}

body .nova-checkout-item__name a {
	color: inherit;
	text-decoration: none;
}

.nova-checkout-item__qty,
.nova-checkout-item__meta,
.nova-checkout-item dl.variation {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.nova-checkout-item dl.variation :is(dt, dd, p) {
	display: inline;
	margin: 0;
}

.nova-checkout-item__price {
	font-weight: 600;
	color: var(--color-heading);
	white-space: nowrap;
}

/* Prescribery split totals ("Due today" / "Total order cost") print their own inline CSS with
   !important: on the cart it turns the rows back into table rows (they shrink to their text, so the
   divider lines stop short) and it draws the lines on the cells (the column gap cuts them in two).
   Rows stay full-width grids and carry the line themselves — the only place we override it. */
body.prewoo-dual-cart-totals.woocommerce-cart .cart_totals table.shop_table.woocommerce-checkout-review-order-table tfoot tr,
body.prewoo-dual-cart-totals .woocommerce-checkout-review-order-table tfoot tr {
	display: grid;
	margin: 0;
	padding: var(--space-3) 0;
	border-top: 0;
	border-bottom: 1px solid var(--color-border);
}

body.prewoo-dual-cart-totals.woocommerce-cart .cart_totals table.shop_table.woocommerce-checkout-review-order-table tfoot tr > :is(th, td),
body.prewoo-dual-cart-totals .woocommerce-checkout-review-order-table tfoot tr > :is(th, td) {
	padding: 0;
	border: 0 !important;
}

body.prewoo-dual-cart-totals .woocommerce-checkout-review-order-table tfoot {
	padding-top: 0;
}

body.prewoo-dual-cart-totals .woocommerce-checkout-review-order-table tfoot tr.prewoo-total-order-cost {
	border-bottom: 0;
}

body.prewoo-dual-cart-totals .woocommerce-checkout-review-order-table tfoot tr:is(.prewoo-total-due-today, .prewoo-total-order-cost) > :is(th, td) {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-heading);
}

/* Cart: no item rows above the totals, so the first row sits right under the "Your order" heading. */
.cart_totals h3.nova-cart-order-heading {
	margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------------------
   Cart (woocommerce/cart/cart.php, cart-totals.php)
   ----------------------------------------------------------------------------- */

.nova-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	gap: var(--space-7);
	align-items: start;
}

.nova-cart-main {
	min-width: 0;
}

.nova-cart-table tbody tr.cart_item {
	align-items: start;
}

.nova-cart-item {
	display: flex;
	gap: var(--space-4);
	min-width: 0;
}

/* Product picture: a square tile of its own size with the whole picture centered in it. It keeps
   that size next to a tall item (name + notes + quantity) instead of stretching to the row's height
   with the picture stuck at the top; the radius is capped so pill-shaped inputs don't round it into
   an oval. */
.nova-cart-item__thumb {
	flex: 0 0 104px;
	align-self: flex-start;
	width: 104px;
	height: 104px;
	overflow: hidden;
	border-radius: min(var(--radius-input, 6px), 12px);
	background: var(--color-surface-alt);
}

.nova-cart-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nova-cart-item__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.nova-cart-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

body a.nova-cart-item__remove {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body a.nova-cart-item__remove:hover {
	color: var(--color-error);
}

.nova-cart-order {
	position: sticky;
	top: var(--space-5);
}

.nova-cart-order .cart_totals {
	width: 100%;
}

.nova-cart-coupon {
	margin-top: var(--space-5);
}

.nova-cart-coupon__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-heading);
}

.nova-cart-coupon__fields {
	display: flex;
	gap: var(--space-2);
}

.nova-cart-coupon__fields input.input-text {
	flex: 1;
	min-width: 0;
}

.wc-proceed-to-checkout {
	margin-top: var(--space-5);
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	min-height: 52px;
}

.cart-empty.woocommerce-info {
	justify-content: center;
}

.return-to-shop {
	text-align: center;
}

/* -----------------------------------------------------------------------------
   Checkout (woocommerce/checkout/form-checkout.php, review-order.php)
   ----------------------------------------------------------------------------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
	justify-content: flex-start;
}

form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card, 12px);
}

form.checkout_coupon p:first-child {
	flex-basis: 100%;
	margin: 0;
}

form.checkout_coupon .form-row {
	margin: 0;
}

form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: var(--space-5) var(--space-7);
	align-items: start;
}

.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}

.woocommerce-checkout #customer_details :is(.col-1, .col-2) {
	width: 100%;
	float: none;
}

.woocommerce-checkout .nova-checkout-order {
	position: sticky;
	top: var(--space-5);
	grid-column: 2;
	grid-row: 1 / span 2;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-4);
}

:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout #ship-to-different-address {
	margin: 0;
	font-size: var(--text-base);
}

/* Payment */
.woocommerce-checkout #payment {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: var(--space-3);
	font-size: var(--text-sm);
}

.woocommerce-checkout #payment .payment_box {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
}

.woocommerce-checkout #payment .payment_box :is(input, select) {
	width: 100%;
}

.woocommerce-privacy-policy-text {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.woocommerce-privacy-policy-text a {
	color: var(--color-primary);
}

body .woocommerce-checkout #place_order {
	width: 100%;
	min-height: 52px;
	margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------------
   Order received (Prescribery questionnaire link is injected here)
   ----------------------------------------------------------------------------- */

.woocommerce-order {
	max-width: 760px;
	margin: 0 auto;
}

.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--font-heading);
	font-size: var(--text-h4);
	font-weight: var(--weight-heading);
	color: var(--color-heading);
}

.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-4);
	margin: var(--space-5) 0 var(--space-7);
	padding: var(--space-5);
	border-radius: var(--radius-card, 12px);
	background: var(--color-surface-alt);
	list-style: none;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.woocommerce-order-overview strong {
	display: block;
	color: var(--color-heading);
}

.woocommerce-order-details table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-order-details table.shop_table :is(th, td) {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* My account: assets/css/account.css (loaded on account pages only). */

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.nova-cart-layout,
	form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .nova-checkout-order {
		position: static;
		grid-column: auto;
		grid-row: auto;
	}

	.nova-cart-order {
		position: static;
	}
}

@media (max-width: 767px) {
	:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) .site-main {
		width: min(100% - 2 * var(--space-4), var(--container-width, 1280px));
		padding-top: var(--space-5);
	}

	.nova-checkout-order {
		padding: var(--space-5);
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.nova-cart-item__thumb {
		flex-basis: 72px;
		width: 72px;
		height: 72px;
	}
}

/* Small phones: the picture gives way so the quantity stepper and "Remove" stay on one line. */
@media (max-width: 389px) {
	.nova-cart-item__thumb {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}
}