/* ---------------------------------------------------------------------------
   WooCommerce adapter.

   The design styles its own form markup (.field > label + input) and buttons.
   WooCommerce emits its own (p.form-row > label + input.input-text, #place_order,
   .woocommerce-message …) and there is no way to make Woo emit the design's
   markup without reimplementing checkout — which would mean losing Woo's
   validation, gateway handling and nonces.

   So this file maps Woo's markup onto the design's existing look. It introduces
   no new visual language: every rule below points at a value already defined in
   main.css.

   Layer order: main.css → bridge.css → enhancements.css → woocommerce.css → child.
   --------------------------------------------------------------------------- */

/* ---------- Form rows: match .field ---------- */
.woocommerce form .form-row {
	margin-bottom: 14px;
	padding: 0;
	display: block;
}

.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-account-fields label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	/* The design's .field label carries no line-height and so inherits the body's
	   1.6 (20.8px). Woo's stylesheet sets its own, which made every label 5.2px
	   taller and pushed each row out with it. */
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 5px;
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: var(--body);
	font-size: 14.5px;
	background: #fff;
	color: var(--text);
	height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--violet);
}

/* Woo's two-up rows (first/last name) follow the design's .f2 grid. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 561px) {
	.woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 12px;
	}

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

.woocommerce .required {
	color: var(--red);
	text-decoration: none;
}

/* ---------- Buttons: match .btn ---------- */
.woocommerce #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 11px;
	font-family: var(--body);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	padding: 12px 22px;
	border: 0;
	background: var(--violet);
	color: #fff;
	text-decoration: none;
	transition: transform .12s, box-shadow .12s;
}

.woocommerce #place_order:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--violet-dark);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

.woocommerce #place_order {
	width: 100%;
	margin-top: 14px;
}

/* ---------- Payment methods ---------- */
.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--paper);
	border-radius: 10px;
	margin: 10px 0 0;
	padding: 12px 14px;
	font-size: 13.5px;
	color: var(--muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 12px;
}

/* ---------- Notices ---------- */
/* Several Woo hooks print notices from outside any design container: on the
   cart that is woocommerce_before_cart, which fires above .cart-page. Left
   alone the notice box then runs the full width of the viewport while the
   content below it sits in a 900px column. Only top-level wrappers are
   constrained, so a notice nested inside a container is not padded twice. */
main > .woocommerce > .woocommerce-notices-wrapper,
main > .woocommerce > .wc-empty-cart-message,
main > .woocommerce-notices-wrapper {
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
	padding: 24px 24px 0;
}

/* These hooks fire directly under the sticky header with nothing else above
   them, so a notice sat flush against it with zero breathing room -- worst on
   mobile, where the header, notice border and page content all read as one
   unbroken block. The padding-top above gives the notice itself room; this
   covers the case where nothing renders inside the wrapper (no notice on this
   load) so an empty wrapper doesn't still reserve that space. */
main > .woocommerce > .woocommerce-notices-wrapper:empty,
main > .woocommerce-notices-wrapper:empty {
	padding-top: 0;
}

/* The cart and checkout columns are narrower than the site container. */
.woocommerce-cart main > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart main > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart main > .woocommerce-notices-wrapper {
	max-width: 900px;
}

/* .woocommerce-notices-wrapper .woocommerce-message was in this list and is
   redundant here -- .woocommerce-message already matches. Its extra specificity
   (0,2,0) beat the .woocommerce-message variant rule below (0,1,0), so success
   notices inside the wrapper kept the neutral white treatment instead of the
   green one. Removed so source order decides, as intended. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 16px;
	font-size: 14px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--text);
}

.woocommerce-message {
	border-color: var(--pass);
	background: var(--pass-soft);
	color: var(--ink);
}

.woocommerce-error {
	border-color: var(--red);
	background: var(--violet-soft);
	color: var(--ink);
}

/* Woo draws a WooCommerce icon-font glyph absolutely at left:1.5em on every
   notice and reserves room for it with padding-left:3.5em. The design's notice
   has no icon, and the padding is overridden above, so the glyph was landing on
   top of the first word ("Your cart is currently empty.", "...removed. Undo?").
   Dropping the content removes the glyph; the ::after clearfix that clears the
   floated button is untouched. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before {
	content: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--ink);
	font-size: 13px;
	padding: 8px 14px;
	float: right;
}

/* Woo's stock loading overlay tints the whole block; keep it subtle. */
.blockUI.blockOverlay {
	background: #fff !important;
	opacity: .5 !important;
}

/* ---------- My Account layout ----------
   Woo's stylesheet floats the account navigation at width:30% and the content
   at 68%. Inside the design's 250px/1fr grid that made the rail 30% of 250px,
   i.e. ~75px wide. The grid owns the layout, so the floats are neutralised. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	/* Matches Woo's own two-class specificity, which a single-class selector
	   loses to. */
	width: auto;
	float: none;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Woo's account tables use the design's .tbl look. */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	padding: 12px 16px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td {
	padding: 13px 16px;
	font-size: 14px;
	border-bottom: 1px solid var(--line);
}

/* ---------- Logged-out account screens (login / register / lost password) ----------
   my-account.php (the sticky-rail dashboard shell) only ever runs for a
   logged-in visitor. Woo's own shortcode renders myaccount/form-login.php (and
   form-lost-password.php) directly when logged out instead, with no dashboard
   shell for it to sit inside -- so every anonymous visit to /my-account/ was
   Woo's bare default markup: no card, no centering, unstyled beyond the global
   h2/button rules. Scoped to a direct child of #app so it only ever matches
   that bare case -- the logged-in dashboard's own .wrap.store-layout is never
   a direct child of #app and so never matches. */
.woocommerce-account main#app > .woocommerce {
	max-width: 860px;
	margin: 56px auto;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 32px;
}

/* Lost password has no #customer_login wrapper (only ever a login form), so it
   stays the single-column width the .woocommerce card would otherwise give it. */
.woocommerce-account main#app > .woocommerce:not(:has(#customer_login)) {
	max-width: 440px;
}

.woocommerce-account main#app > .woocommerce h2 {
	font-size: 22px;
	margin: 0 0 20px;
}

/* Woo's own col2-set floats each column at 48%/48% with a 4% gutter, in a
   layout with no gap property -- fine at the plugin's default page width, but
   this card's 32px padding left too little room and wrapped "Register" onto
   its own line at odd widths. A flex row with an explicit gap and a divider
   between the two forms reads as one deliberate panel instead of two floats
   that happen to sit side by side. */
.woocommerce-account main#app > .woocommerce .u-columns.col2-set {
	display: flex;
	gap: 40px;
	margin: 0;
}

.woocommerce-account main#app > .woocommerce .u-columns.col2-set .u-column1,
.woocommerce-account main#app > .woocommerce .u-columns.col2-set .u-column2 {
	width: auto;
	flex: 1 1 0;
	float: none;
}

.woocommerce-account main#app > .woocommerce .u-columns.col2-set .u-column2 {
	padding-left: 40px;
	border-left: 1px solid var(--line);
}

.woocommerce-account main#app > .woocommerce .woocommerce-form-login__rememberme {
	margin: 0;
}

.woocommerce-account main#app > .woocommerce p.form-row:last-of-type {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.woocommerce-account main#app > .woocommerce .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 14px;
}

.woocommerce-account main#app > .woocommerce .woocommerce-privacy-policy-text {
	font-size: 12px;
	color: var(--muted);
	margin: 4px 0 16px;
}

@media (max-width: 680px) {
	.woocommerce-account main#app > .woocommerce .u-columns.col2-set {
		flex-direction: column;
		gap: 28px;
	}

	.woocommerce-account main#app > .woocommerce .u-columns.col2-set .u-column2 {
		padding-left: 0;
		padding-top: 28px;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}