/* ALQASR — bridges WooCommerce's native markup (add-to-cart form, cart table,
   checkout, my-account) onto the original design system's existing classes/tokens,
   instead of introducing a second visual language. */

.woocommerce form.cart { display: flex; flex-direction: column; gap: .8rem; }
.woocommerce form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	width: 100%; padding: 1.05em 2.1em; font-family: var(--font-body);
	font-size: var(--fs-small); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	background: var(--c-walnut); color: var(--c-ivory); border: 1px solid var(--c-walnut);
	border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-lux), color var(--dur-fast) var(--ease-lux);
}
.woocommerce div.product form.cart .button:hover,
.single_add_to_cart_button:hover { background: transparent; color: var(--c-walnut); }
.woocommerce div.product form.cart .button.disabled { opacity: .5; cursor: not-allowed; }

.woocommerce .stock { font-size: var(--fs-small); }
.woocommerce .stock.out-of-stock { color: #b23b3b; }

/* Cart + checkout tables reuse the original .cart-table / .summary-card look. */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.woocommerce table.shop_table th { text-align: left; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-micro); padding: 1em .6em; border-bottom: 1px solid var(--line); }
.woocommerce table.shop_table td { padding: 1.2em .6em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 90px; object-fit: cover; }
.woocommerce table.shop_table td.product-remove a { color: var(--ink-soft); text-decoration: underline; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-page .woocommerce-cart-form + .cart-collaterals { background: var(--bg); border: 1px solid var(--line); padding: var(--sp-sm); }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: .6em; }
.woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th { border: none; padding: .6em 0; }
.woocommerce .cart_totals table.shop_table tr:last-child td, .woocommerce .cart_totals table.shop_table tr:last-child th { border-top: 1px solid var(--line); font-weight: 600; }

/* Same minimal underline input style as the rest of the site's forms (.field input/select/textarea
   in components.css) — not a separate boxed style, so checkout doesn't look like a different theme. */
.woocommerce form .form-row label { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .6em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent;
	padding: .75em .1em; font-family: var(--font-body); font-size: 1rem; border-radius: 0;
	transition: border-color var(--dur-fast) ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--c-charcoal); outline: none; }

/* h3/.h3 in main.css already sets the right font-family/size (--fs-h3) — only the spacing needed
   a bridge rule here. Was accidentally shrunk to --fs-h4 (a smaller heading size) before. */
.woocommerce-billing-fields h3,
#order_review_heading,
.woocommerce-checkout h3 { margin: 0 0 var(--sp-md); }
.woocommerce-billing-fields__field-wrapper { margin-top: var(--sp-sm); }

.woocommerce-checkout .col2-set, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; gap: 1.4rem 1rem; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { display: inline-block; width: 48%; }
.woocommerce-checkout .form-row-last { float: right; }
.woocommerce-form-coupon-toggle { margin-bottom: var(--sp-md); }

/* Select2 (country/state search dropdowns) replaces the native <select> with its own unstyled
   widget — reskin it to the same underline look instead of leaving WooCommerce/Select2's defaults. */
.select2-container--default .select2-selection--single {
	border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
	height: auto; padding: .75em .1em;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0; line-height: 1.4; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: .2em; }
.select2-container--open .select2-selection--single { border-color: var(--c-charcoal); }
.select2-dropdown { border: 1px solid var(--line); border-radius: 0; font-family: var(--font-body); }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--line); border-radius: 0; padding: .5em .7em; font-family: var(--font-body); }
.select2-results__option { padding: .6em .9em; font-size: var(--fs-small); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-walnut); color: var(--c-ivory); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--c-sand); color: var(--ink); }

.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 1em 0; padding: 0; display: flex; flex-direction: column; gap: .6em; }
.woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--line); padding: 1em; border-radius: var(--radius-sm); }
.woocommerce-checkout #place_order { width: 100%; margin-top: 1em; }

/* .account-shell/.account-nav/.order-card/.order-row/.status-pill/.dash-stats/.dash-empty are all
   already fully styled in the original components.css — only the button->a swap needs a bridge rule,
   since real page navigation between account endpoints needs real links, not JS-tab buttons. */
.account-nav a { display: flex; align-items: center; gap: .8em; text-align: left; padding: .85em .7em; font-size: var(--fs-small); letter-spacing: .06em; color: var(--ink-soft); border-left: 2px solid transparent; white-space: nowrap; }
.account-nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
.account-nav a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--c-gold); background: rgba(183,154,106,0.09); }
a.order-row { color: inherit; text-decoration: none; }
/* .account-shell switches to a horizontal-scrolling nav row under 900px (see original components.css);
   grid/flex children need an explicit min-width:0 or their content's intrinsic width pushes the whole
   page wider instead of scrolling within the row — a technical fix only, no visual change. */
.account-shell, .account-nav { min-width: 0; }

.woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; padding: 1em 1.4em; margin: 0 0 1.5em; border: 1px solid var(--line); font-size: var(--fs-small); }
.woocommerce-error { border-color: #b23b3b; color: #b23b3b; }

@media (max-width: 768px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr { display: block; padding: 1em 0; border-bottom: 1px solid var(--line); }
	.woocommerce table.shop_table td { display: block; border: none; padding: .3em 0; }
	.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100%; float: none; }
}