/* ==========================================================================
   WooCommerce pages — cart, checkout, order received, account shell.
   Loaded only on Woo pages. Base-level Woo corrections live in base.css
   (they must apply sitewide, since the shared card renders on the PDP related
   row and in cart cross-sells).
   ========================================================================== */

.wbs-woo { padding: clamp(28px, 4vw, 56px) 0; }

.wbs-woo__title {
	font-family: var(--wbs-font-heading);
	font-weight: 800;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.1;
	color: var(--wbs-ink-deep);
	margin: 0 0 24px;
}

/* --- notices -------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--wbs-teal);
	border-radius: var(--wbs-radius);
	background: var(--wbs-mist);
	color: var(--wbs-ink);
	font-size: 14.5px;
	padding: 14px 18px;
}
.woocommerce-error { border-left-color: var(--wbs-rust); background: rgba(167, 101, 53, .08); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* --- forms ---------------------------------------------------------------- */
.woocommerce form .form-row label { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.woocommerce form .form-row .required { color: var(--wbs-rust); text-decoration: none; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce-form-coupon-toggle .woocommerce-info {
	border-radius: var(--wbs-radius);
	border: 1px solid var(--wbs-sage-cool);
	background: var(--wbs-white);
}

.woocommerce .col2-set { display: grid; gap: 28px; grid-template-columns: 1fr; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: auto; float: none; }

/* --- checkout layout ------------------------------------------------------
   Grid the form Woo ACTUALLY outputs, rather than a wrapper we would have to
   inject: form.checkout holds #customer_details, then #order_review_heading,
   then #order_review as siblings. Two columns, with the heading and the review
   stacked in the right-hand one. */
.woocommerce-checkout form.checkout {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas:
		"details heading"
		"details review";
	align-items: start;
}
.woocommerce-checkout form.checkout #customer_details { grid-area: details; }
.woocommerce-checkout form.checkout #order_review_heading { grid-area: heading; align-self: end; }
.woocommerce-checkout form.checkout #order_review { grid-area: review; }

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		grid-template-areas: "details" "heading" "review";
	}
}

#order_review_heading {
	font-family: var(--wbs-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0 0 12px;
}

.woocommerce-checkout #order_review,
.woocommerce .cart_totals {
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius-lg);
	padding: 20px;
}

/* --- tables ---------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--wbs-line-soft);
	padding: 12px 8px;
	font-size: 14.5px;
	vertical-align: top;
}
.woocommerce table.shop_table thead th {
	font-family: var(--wbs-font-heading);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wbs-muted);
}
/* Woo's `table.shop_table tfoot td` is (0,3,2) — beat it explicitly. */
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	border-bottom: 0;
	padding-top: 14px;
	font-weight: 700;
}
.woocommerce table.shop_table tfoot tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th {
	border-top: 2px solid var(--wbs-ink);
	font-size: 17px;
}

/* Wide tables must scroll inside themselves, never widen the page. */
.woocommerce .shop_table_responsive_wrap { overflow-x: auto; }

/* --- payment box ----------------------------------------------------------- */
/* `.woocommerce #payment` is (0,1,1); a bare #payment would lose. */
.woocommerce #payment,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 18px;
}
.woocommerce #payment ul.payment_methods {
	border-bottom: 0;
	padding: 0;
	margin: 0 0 12px;
	list-style: none;
}
.woocommerce #payment ul.payment_methods li { margin: 0; }
.woocommerce #payment div.payment_box {
	background: var(--wbs-paper);
	border-radius: var(--wbs-radius);
	margin: 10px 0 0;
	padding: 16px;
	color: var(--wbs-ink);
	font-size: 14.5px;
}
.woocommerce #payment div.payment_box::before { display: none; }

.woocommerce #payment .place-order { padding: 0; margin-top: 16px; }
.woocommerce #place_order {
	width: 100%;
	padding: 16px 22px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: var(--wbs-radius-pill);
	background: var(--wbs-teal);
	color: #fff;
}
.woocommerce #place_order:hover { background: var(--wbs-teal-deep); }

/* --- order received / thank-you ---------------------------------------------- */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--wbs-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--wbs-ink-deep);
	margin-bottom: 18px;
}
.woocommerce ul.woocommerce-order-overview {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius);
	background: var(--wbs-white);
	padding: 16px;
	margin: 0 0 24px;
	list-style: none;
}
.woocommerce ul.woocommerce-order-overview li {
	border: 0;
	float: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wbs-muted);
}
.woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wbs-ink);
}

/* The crypto panel is inline-styled for email parity — just give it room and
   stop the long address blowing out the layout at 390px. */
.woocommerce-order code,
.woocommerce-order .wbs-crypto-addr { word-break: break-all; }

/* --- cart -------------------------------------------------------------------- */
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals { width: 100%; }
/* Cart: the form and the totals are siblings inside the page content. */
.woocommerce-cart .woocommerce {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce form.woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .woocommerce .cart-collaterals { grid-column: 2; }

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .woocommerce form.woocommerce-cart-form,
	.woocommerce-cart .woocommerce .cart-collaterals { grid-column: 1; }
}

.woocommerce a.remove {
	color: var(--wbs-rust);
	font-weight: 400;
}
.woocommerce a.remove:hover { background: var(--wbs-rust); color: #fff; }

.woocommerce .quantity .qty {
	width: 74px;
	padding: 9px 8px;
	border: 1px solid var(--wbs-sage-cool);
	border-radius: 8px;
	background: var(--wbs-white);
	color: var(--wbs-ink);
}

/* --- minimum-order shortfall notice -------------------------------------------- */
.wbs-min-order {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--wbs-rust);
	border-radius: var(--wbs-radius);
	background: rgba(167, 101, 53, .08);
	font-size: 14px;
	color: var(--wbs-ink);
}
.wbs-min-order strong { color: var(--wbs-rust); }

/* ==========================================================================
   My Account (LOCKED #1 — Dashboard · Orders · Addresses · Account details ·
   Logout). Net-new: no local project had a myaccount/ override to fork.
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: 232px minmax(0, 1fr);
	align-items: start;
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
@media (max-width: 800px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

/* Woo ships width:30% + float on these; the float is ignored in grid but the
   percentage is not, which collapses the sidebar to ~78px. */
.woocommerce-account .wbs-acct__nav { width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

.wbs-acct__nav ul { list-style: none; margin: 0; padding: 0; }
.wbs-acct__nav li { margin: 0 0 4px; }
.wbs-acct__nav a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--wbs-ink);
	font-size: 14.5px;
	font-weight: 600;
}
.wbs-acct__nav a:hover { background: var(--wbs-mist); color: var(--wbs-ink); }
.wbs-acct__nav li.is-active > a,
.wbs-acct__nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
	background: var(--wbs-teal);
	color: #fff;
}

.wbs-acct__intro { margin-bottom: 20px; }
.wbs-acct__note {
	padding: 12px 14px;
	border-left: 3px solid var(--wbs-teal);
	background: var(--wbs-mist);
	border-radius: var(--wbs-radius);
	font-size: 14px;
	color: var(--wbs-ink);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wbs-font-heading);
	font-weight: 800;
	color: var(--wbs-ink-deep);
}

/* --- contact page ------------------------------------------------------- */
.wbs-contactpage__grid {
	display: grid; gap: clamp(20px, 3vw, 40px);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 800px) { .wbs-contactpage__grid { grid-template-columns: 1fr; } }

.wbs-contact__row { display: grid; gap: 5px; margin-bottom: 14px; }
.wbs-contact__row label { font-size: 13.5px; font-weight: 600; }
.wbs-contact input[type="text"],
.wbs-contact input[type="email"],
.wbs-contact textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wbs-sage-cool);
	border-radius: 10px;
	background: var(--wbs-white);
	font-family: var(--wbs-font-body);
	font-size: 15px;
	color: var(--wbs-ink);
}
/* Honeypot: hidden from people, still reachable by bots that ignore CSS. */
.wbs-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wbs-contactpage__aside .wbs-filter__title { margin-top: 18px; }
.wbs-contactpage__note { font-size: 14px; color: var(--wbs-muted); }