/*
 * Cart/Checkout page CSS.
 *
 * assets/css/default.css is Tailwind JIT output scoped to the originally-
 * mirrored pages, so it doesn't contain every utility class this real
 * WooCommerce cart page markup needs. This file covers two kinds of gaps:
 *
 * 1. A handful of plain Tailwind utility classes (named and shaped exactly
 *    like Tailwind's own output) used directly in
 *    woocommerce/cart/cart.php that default.css doesn't happen to include.
 * 2. Plain CSS rules targeting WooCommerce's own default classes for the
 *    sub-templates cart.php pulls in via hooks that this task intentionally
 *    does NOT override (cart/cart-totals.php, cart/cross-sells.php,
 *    cart/cart-empty.php, cart/cart-item-data.php, cart/shipping-
 *    calculator.php, notices/*.php) — since their markup isn't ours to add
 *    Tailwind classes to, we restyle them the same way WooCommerce's own
 *    theme integrations do: CSS rules against their stable class names.
 *    Color values below are copied from default.css's compiled output for
 *    the matching Tailwind color utility (e.g. .bg-nib-green-light) so the
 *    two stay visually identical.
 *
 * Reusable by Task 2 (checkout) per the brief.
 */

/* ==========================================================================
 * Checkout page (woocommerce/checkout/form-checkout.php)
 *
 * form-checkout.php is overridden directly (Tailwind classes applied
 * there), but per the brief it does NOT override the sub-templates it
 * pulls in via do_action() — checkout/form-billing.php,
 * checkout/form-shipping.php, checkout/review-order.php,
 * checkout/payment.php, checkout/payment-method.php, checkout/terms.php.
 * Everything those print (.form-row/.input-text/label markup from
 * woocommerce_form_field(), the order-review table, the payment method
 * list, the place-order button, the terms checkbox) is restyled here via
 * plain CSS against their own stable default classes, scoped under the
 * #customer_details / #order_review ids form-checkout.php keeps, so these
 * rules reliably beat WooCommerce's own bundled woocommerce.css /
 * woocommerce-layout.css specificity (e.g. its
 * ".woocommerce form .form-row .input-text" rule) without !important —
 * same ID-anchored technique Task 1 used for #coupon_code.
 * ========================================================================== */

/* --- #customer_details layout: form-checkout.php lays this out with a
   Tailwind CSS Grid (grid grid-cols-1 md:grid-cols-2 gap-6) instead of
   WooCommerce's default float-based .col2-set/.col-1/.col-2. The class
   names are kept (nothing depends on removing them), but their float/
   width/clearfix rules are neutralized so the two layout systems don't
   fight — including WC's ::before/::after clearfix pseudo-elements, which
   would otherwise become extra (empty) grid items and scramble column
   order. --- */
#customer_details.col2-set::before,
#customer_details.col2-set::after {
	content: none;
}
#customer_details .col-1,
#customer_details .col-2 {
	float: none;
	width: auto;
}

/* --- Section headings printed by form-billing.php/form-shipping.php
   ("Billing details", "Ship to a different address?", "Additional
   information") --- */
#customer_details h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: rgb(43 78 39);
	margin: 0 0 1rem;
}
#customer_details .woocommerce-shipping-fields h3#ship-to-different-address {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}
#customer_details .woocommerce-additional-fields {
	margin-top: 1.5rem;
}

/* --- Field rows printed by woocommerce_form_field() (billing/shipping/
   order-note/account fields) --- */
#customer_details .form-row {
	margin: 0 0 1rem;
	padding: 0;
}
#customer_details .form-row label:not(.checkbox) {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(43 78 39);
	margin-bottom: 0.25rem;
	line-height: 1.4;
}
#customer_details .form-row .optional {
	text-transform: none;
	font-weight: 400;
	color: rgb(107 114 128);
}
#customer_details .form-row input.input-text,
#customer_details .form-row select,
#customer_details .form-row textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: rgb(43 78 39);
	background-color: #fff;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
}
#customer_details .form-row input.input-text:focus,
#customer_details .form-row select:focus,
#customer_details .form-row textarea:focus {
	border-color: rgb(43 78 39);
	outline: none;
}
#customer_details .form-row.woocommerce-invalid input.input-text,
#customer_details .form-row.woocommerce-invalid select {
	border-color: rgb(185 28 28);
}
#customer_details .form-row.woocommerce-invalid label:not(.checkbox) {
	color: rgb(185 28 28);
}
#customer_details .select2-container {
	width: 100% !important;
}
#customer_details .select2-container .select2-selection--single {
	height: 2.625rem;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
}
#customer_details .select2-container .select2-selection__rendered {
	line-height: 2.625rem;
	padding-left: 0.75rem;
	color: rgb(43 78 39);
}
#customer_details .select2-container .select2-selection__arrow {
	height: 2.625rem;
}

/* --- Checkbox rows ("Create an account?", "Ship to a different
   address?") --- */
#customer_details label.checkbox,
#customer_details h3#ship-to-different-address label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: none;
	color: rgb(43 78 39);
	cursor: pointer;
}
#customer_details input.input-checkbox {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* --- Order review table (checkout/review-order.php,
   .woocommerce-checkout-review-order-table — one of the two AJAX
   fragment-replace targets, so its class is never touched by a template
   override; only styled by class here) --- */
#order_review table.shop_table {
	width: 100%;
	font-size: 0.875rem;
	border: none;
	border-collapse: collapse;
	margin: 0 0 1rem;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: 0.625rem 0;
	color: rgb(43 78 39);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid rgb(225 227 211);
}
#order_review table.shop_table thead th {
	border-top: none;
	border-bottom: 2px solid rgb(225 227 211);
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 700;
}
#order_review table.shop_table th.product-total,
#order_review table.shop_table td.product-total {
	text-align: right;
}
#order_review table.shop_table tr.order-total th,
#order_review table.shop_table tr.order-total td {
	font-weight: 700;
	font-size: 1rem;
	border-top: 2px solid rgb(225 227 211);
}
#order_review table.shop_table .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
#order_review table.shop_table .woocommerce-shipping-methods li {
	margin: 0 0 0.25rem;
}
#order_review table.shop_table .woocommerce-shipping-destination {
	font-size: 0.75rem;
	margin: 0;
	color: rgb(107 114 128);
}
#order_review table.shop_table .woocommerce-Price-amount {
	font-weight: inherit;
}

/* --- Payment section (checkout/payment.php, #payment.woocommerce-checkout-
   payment — the other AJAX fragment-replace target; its id/class are
   never touched by a template override, only styled by id/class here) --- */
#order_review #payment {
	background-color: rgb(242 243 238);
	border-radius: 0.125rem;
	margin-top: 1rem;
}
#order_review #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 1rem;
	border-bottom: 1px solid rgb(225 227 211);
}
#order_review #payment ul.payment_methods li {
	font-size: 0.875rem;
	color: rgb(43 78 39);
	padding: 0.375rem 0;
}
#order_review #payment ul.payment_methods li input.input-radio {
	margin: 0 0.5rem 0 0;
	vertical-align: middle;
}
#order_review #payment ul.payment_methods li label {
	display: inline;
	cursor: pointer;
}
#order_review #payment div.payment_box {
	background-color: #fff;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
	padding: 1rem;
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgb(43 78 39);
}
#order_review #payment div.payment_box::before {
	display: none;
}
#order_review #payment .form-row {
	padding: 1rem;
	margin: 0;
}

/* --- Terms checkbox + place-order button (checkout/terms.php, printed
   inside payment.php's .form-row.place-order wrapper) --- */
#order_review .place-order {
	padding: 1rem;
	border-top: 1px solid rgb(225 227 211);
}
#order_review .woocommerce-terms-and-conditions-wrapper .form-row {
	padding: 0 0 1rem;
	margin: 0;
}
#order_review .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgb(43 78 39);
	cursor: pointer;
}
#order_review .woocommerce-terms-and-conditions-wrapper input.input-checkbox {
	margin-top: 0.1875rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
#order_review #place_order,
#order_review button[name='woocommerce_checkout_update_totals'] {
	display: block;
	width: 100%;
	padding: 0.875rem 1rem;
	border-radius: 0.125rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #fff;
	background-color: rgb(133 180 49);
	border: none;
	text-align: center;
	cursor: pointer;
}
#order_review #place_order:hover,
#order_review button[name='woocommerce_checkout_update_totals']:hover {
	background-color: rgb(115 158 38);
}
#order_review #place_order:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- Checkout-page error notices (WC_Checkout::process_checkout() prints
   .woocommerce-NoticeGroup-checkout via wc_print_notices(), hooked to
   woocommerce_before_checkout_form — reuses the .woocommerce-error rule
   already defined above for the cart page). --- */
.woocommerce-NoticeGroup-checkout {
	margin-bottom: 1rem;
}

/* --- Checkout coupon form (checkout/form-coupon.php, printed by
   woocommerce_checkout_coupon_form() on the woocommerce_before_checkout_form
   hook). It sits OUTSIDE both #customer_details and #order_review, so none
   of the ID-scoped checkout rules above reach it, and without this section
   it rendered entirely in WooCommerce's own defaults: a #cfc8d8 5px-radius
   box with two 47%-wide floated .form-row-first/.form-row-last halves and a
   gray, non-uppercase #e9e6ed "Apply coupon" button — visually inconsistent
   with the green uppercase APPLY COUPON button one step earlier in the same
   funnel on the cart page.

   Its input carries id="coupon_code", the same id the cart's own coupon
   input uses. That collision used to half-style this form by accident (the
   cart's #coupon_code rule reached it; its button did not), which is why
   that rule is now scoped to .woocommerce-cart-form further down and this
   form is styled deliberately here instead.

   Selectors are anchored on form.checkout_coupon and go one class deeper
   than WooCommerce's own (its ".woocommerce form .form-row input.input-text"
   is 0,3,2 and ".woocommerce button.button" is 0,2,1), so they win without
   !important — same technique as #customer_details/#order_review above. --- */
.woocommerce form.checkout_coupon {
	background-color: #fff;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
	padding: 1rem;
	margin: 0 0 1rem;
}
/* WooCommerce floats these two halves at 47% each; this form is a single
   input + button row here, so the floats are neutralized the same way
   #customer_details.col2-set's were and the rows sit inline instead. */
.woocommerce form.checkout_coupon .form-row-first,
.woocommerce form.checkout_coupon .form-row-last {
	float: none;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.5rem 0 0;
	padding: 0;
}
.woocommerce form.checkout_coupon .form-row input.input-text {
	box-sizing: border-box;
	height: 2.5rem;
	width: 10rem;
	padding: 0 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: rgb(43 78 39);
	background-color: #fff;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
	outline: none;
}
.woocommerce form.checkout_coupon .form-row input.input-text:focus {
	border-color: rgb(43 78 39);
}
.woocommerce form.checkout_coupon .form-row input.input-text.has-error {
	border-color: rgb(185 28 28);
}
/* Same CTA look as the cart page's own APPLY COUPON button
   (bg-nib-green-light / hover:bg-nib-green-dark / uppercase / white /
   rounded-sm) — see cart.php's coupon markup. */
.woocommerce form.checkout_coupon .form-row button.button {
	height: 2.5rem;
	padding: 0 1rem;
	border-radius: 0.125rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #fff;
	background-color: rgb(133 180 49);
	border: none;
	cursor: pointer;
}
.woocommerce form.checkout_coupon .form-row button.button:hover {
	background-color: rgb(115 158 38);
}

/* --- Missing Tailwind utilities used directly in cart.php --- */
.overflow-x-auto {
	overflow-x: auto;
}
.whitespace-nowrap {
	white-space: nowrap;
}
.flex-shrink-0 {
	flex-shrink: 0;
}
.hover\:bg-nib-gray-light:hover {
	background-color: rgb(225 227 211);
}
.hover\:text-red-700:hover {
	color: rgb(185 28 28);
}
@media (min-width: 768px) {
	.md\:justify-between {
		justify-content: space-between;
	}
	.md\:w-48 {
		width: 12rem;
	}
}

/* --- Standard WP/WooCommerce visually-hidden helper (used by the table's
   icon-only header cells) --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --- Cart item variation meta (Size: 1kg, etc.), printed by
   cart/cart-item-data.php --- */
.woocommerce-cart-form dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0.375rem;
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: rgb(43 78 39);
}
.woocommerce-cart-form dl.variation dt {
	font-weight: 600;
}
.woocommerce-cart-form dl.variation dd,
.woocommerce-cart-form dl.variation dd p {
	margin: 0;
}

/* --- Notices (wc_print_notice output via notices/success.php,
   notices/error.php, notices/notice.php — printed by
   woocommerce_output_all_notices(), hooked to woocommerce_before_cart).
   WooCommerce's own plugin CSS (woocommerce.css, auto-enqueued since this
   theme calls add_theme_support('woocommerce') without disabling default
   styles) already positions an icon glyph via ::before at
   `left:1.5em; top:1em`, so left-padding here is kept wide enough (3rem)
   to clear it rather than fighting/hiding it. --- */
.woocommerce-message,
.woocommerce-info {
	background-color: rgb(240 253 244);
	border: 1px solid rgb(134 239 172);
	color: rgb(43 78 39);
	border-radius: 0.125rem;
	padding: 0.875rem 1.25rem 0.875rem 3rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	list-style: none;
}
/*
 * WooCommerce colors its own notice glyphs from its default palette —
 * ".woocommerce-info::before{color:#1e85be}" (a blue that appears nowhere
 * else in this theme) and ".woocommerce-message::before{color:#8fae1b}".
 * The notice box itself is already restyled green above, so the icon is
 * repainted with the theme's own nib-green-light (the same value
 * .text-nib-green-light compiles to in default.css) rather than left as the
 * one off-palette color on the cart/checkout pages. Equal specificity to
 * WooCommerce's rule (0,1,1) is enough because this stylesheet is enqueued
 * after woocommerce.css — the same ordering the .woocommerce-info rule
 * above already relies on.
 */
.woocommerce-info::before,
.woocommerce-message::before {
	color: rgb(133 180 49);
}
.woocommerce-info.cart-empty {
	text-align: center;
	font-size: 1rem;
	padding: 2rem 1.25rem 2rem 3rem;
}
.woocommerce-error {
	background-color: rgb(254 242 242);
	border: 1px solid rgb(252 165 165);
	color: rgb(185 28 28);
	border-radius: 0.125rem;
	padding: 0.875rem 1.25rem 0.875rem 3rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	list-style: none;
}
.woocommerce-error li {
	margin: 0;
}
.coupon-error-notice {
	display: block;
	color: rgb(185 28 28);
	font-size: 0.75rem;
	margin-top: 0.375rem;
}
/*
 * WooCommerce's own plugin CSS defines
 * `.woocommerce-cart table.cart td.actions .coupon .input-text{border:1px
 * solid #cfc8d8;padding:6px 6px 5px;...}` (5 classes + 2 elements —
 * specificity 0,5,2), which beats every single-class Tailwind utility
 * (0,1,0) applied inline on #coupon_code in cart.php for the overlapping
 * border/padding properties. An ID selector (1,0,0) is the simplest way to
 * win outright without resorting to !important.
 *
 * Anchored under .woocommerce-cart-form because checkout/form-coupon.php's
 * input reuses the very same id="coupon_code" — a bare #coupon_code selector
 * leaked this cart-specific sizing onto the checkout page's coupon form
 * while its button kept WooCommerce's default gray, producing a half-styled
 * result nobody intended. The extra class still leaves this at (1,1,0), so
 * it keeps beating WooCommerce's 0,5,2 rule outright.
 */
.woocommerce-cart-form #coupon_code {
	border: 1px solid rgb(225 227 211);
	padding: 0 0.75rem;
	height: 2.5rem;
	width: 10rem;
}
@media (min-width: 768px) {
	/* Matches cart.php's own w-40 md:w-48 classes, which this fixed-width
	   rule otherwise beats outright at every viewport (md:w-48 has no
	   compiled rule of its own in default.css). */
	.woocommerce-cart-form #coupon_code {
		width: 12rem;
	}
}
.woocommerce-cart-form #coupon_code:focus {
	border-color: rgb(43 78 39);
}
.woocommerce-cart-form #coupon_code.has-error {
	border-color: rgb(185 28 28);
}

/* --- Empty cart (cart/cart-empty.php is overridden directly, with Tailwind
   classes on its Return to Shop button, so no CSS is needed for it here —
   this rule only covers spacing for the <p> wrapper). --- */
.return-to-shop {
	text-align: center;
	margin-top: 1rem;
}

/* --- Shared button look for the templates below that print their own
   class="button" markup this task doesn't override (Proceed to checkout,
   shipping calculator's Update button) — matches the bg-nib-green-light/
   hover:bg-nib-green-dark/rounded-sm/uppercase CTA pattern used everywhere
   else in the theme (content-product.php, header.php,
   template-parts/product-buybox.php). --- */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .woocommerce-shipping-calculator .button {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	border-radius: 0.125rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #fff;
	background-color: rgb(133 180 49);
	border: none;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .woocommerce-shipping-calculator .button:hover {
	background-color: rgb(115 158 38);
}
.woocommerce .wc-proceed-to-checkout {
	margin-top: 1rem;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
}

/* --- Cart collaterals column layout. cart.php lays the cart out as a
   Tailwind flex row — item table at `lg:w-2/3`, this wrapper at
   `w-full lg:w-1/3` — but WooCommerce's own bundled woocommerce-layout.css
   still assumes its float-era layout for the very same element:

     .woocommerce .cart-collaterals{width:100%}
     .woocommerce .cart-collaterals .cart_totals{float:right;width:48%}
     .woocommerce .cart-collaterals .cross-sells{width:48%;float:left}

   `.woocommerce .cart-collaterals` (0,2,0) outranks the `.lg\:w-1\/3`
   utility (0,1,0) regardless of stylesheet order, so the flex row actually
   rendered ~40/58 instead of 66/33, with `.cart_totals` floated at 48%
   inside that already-too-wide parent leaving a ~343px dead gap between
   the item table and the totals card (measured live at a 1280px viewport).

   Same class of collision — and same fix — as #customer_details.col2-set
   above: neutralize WooCommerce's float/clearfix rules, and re-assert the
   theme's own widths by anchoring the *existing* utility classes under the
   .woocommerce wrapper so they outrank WooCommerce's (rather than
   restating the widths in a rule of their own, which would leave the
   classes in cart.php silently doing nothing). The 1060px breakpoint is
   this theme's Tailwind `lg`, copied from default.css's own output. Every
   selector here is anchored under .cart-collaterals, which only cart.php
   prints — nothing outside the cart page is affected. --- */
.woocommerce div.cart-collaterals.w-full {
	width: 100%;
}
@media (min-width: 1060px) {
	.woocommerce div.cart-collaterals.lg\:w-1\/3 {
		width: 33.333333%;
	}
}
.woocommerce div.cart-collaterals::before,
.woocommerce div.cart-collaterals::after {
	content: none;
}
.woocommerce div.cart-collaterals .cart_totals,
.woocommerce div.cart-collaterals .cross-sells {
	float: none;
	width: auto;
}

/* --- Cart totals sidebar (cart/cart-totals.php, printed inside cart.php's
   own .cart-collaterals wrapper) --- */
.woocommerce .cart_totals {
	background-color: #fff;
	border-radius: 0.125rem;
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.woocommerce .cart_totals h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: rgb(43 78 39);
	margin: 0 0 1rem;
}
.woocommerce .cart_totals table {
	width: 100%;
	font-size: 0.875rem;
	border-collapse: collapse;
}
.woocommerce .cart_totals table tr {
	border-bottom: 1px solid rgb(225 227 211);
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
	padding: 0.625rem 0;
	color: rgb(43 78 39);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}
.woocommerce .cart_totals table td {
	text-align: right;
}
.woocommerce .cart_totals table tr.order-total th,
.woocommerce .cart_totals table tr.order-total td {
	font-weight: 700;
	font-size: 1rem;
}
.woocommerce .cart_totals table .woocommerce-shipping-methods {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	text-align: right;
}
.woocommerce .cart_totals table .woocommerce-shipping-destination {
	font-size: 0.75rem;
	margin: 0;
}
.woocommerce .cart_totals table .woocommerce-remove-coupon {
	margin-left: 0.5rem;
	font-size: 0.75rem;
	color: rgb(185 28 28);
	text-decoration: underline;
}

/* --- Shipping calculator (cart/shipping-calculator.php, printed inside a
   cart-totals.php <td>) --- */
.woocommerce .shipping-calculator-button {
	display: inline-block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: rgb(43 78 39);
	text-decoration: underline;
}
.woocommerce .shipping-calculator-form {
	margin-top: 0.75rem;
	padding: 1rem;
	background-color: rgb(242 243 238);
	border-radius: 0.125rem;
	text-align: left;
}
.woocommerce .shipping-calculator-form .form-row-wide {
	margin: 0 0 0.75rem;
}
.woocommerce .shipping-calculator-form label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(43 78 39);
	margin-bottom: 0.25rem;
}
.woocommerce .shipping-calculator-form select,
.woocommerce .shipping-calculator-form input[type='text'] {
	width: 100%;
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
	color: rgb(43 78 39);
	background-color: #fff;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
}

/* --- Cross-sells (cart/cross-sells.php). Individual product cards reuse
   content-product.php's own styled markup already — this only lays them
   out in a grid, since functions.php's woocommerce_product_loop_start/end
   filter (used to drop WooCommerce's default <ul>/<li> wrapper on the
   category archive) also empties this loop's wrapper. --- */
.woocommerce .cross-sells {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.woocommerce .cross-sells h2 {
	grid-column: 1 / -1;
	font-size: 1.125rem;
	font-weight: 700;
	color: rgb(43 78 39);
	margin: 0 0 0.5rem;
}

/* ==========================================================================
 * Order confirmation ("thank you") page (woocommerce/checkout/thankyou.php)
 *
 * thankyou.php is overridden directly (Tailwind classes applied there,
 * matching the single full-width white-card pattern), but per the brief it
 * does NOT override the sub-templates the woocommerce_thankyou hook pulls
 * in — order/order-details.php, order/order-details-item.php,
 * order/order-details-customer.php (the itemized line-items table and
 * billing/shipping addresses). Everything those print is restyled here via
 * plain CSS against their own stable default classes, the same pattern
 * Tasks 1-2 used for cart-totals.php/cross-sells.php and
 * review-order.php/payment.php.
 * ========================================================================== */

/* --- Order-overview summary list (order number/date/email/total/payment
   method), printed directly by thankyou.php itself.

   thankyou.php keeps WooCommerce's own `order_details` class on this <ul>
   (nothing depends on removing it) while laying it out with a Tailwind CSS
   Grid, so the same float-era collision the cart page and #customer_details
   hit applies here too:

     .woocommerce ul.order_details::after,
     .woocommerce ul.order_details::before{content:" ";display:table}
     .woocommerce ul.order_details{margin:0 0 3em;list-style:none}
     .woocommerce ul.order_details li{float:left;margin-right:2em;
       font-size:.715em;line-height:1;border-right:1px dashed #cfc8d8;
       padding-right:2em;...}
     .woocommerce ul.order_details li strong{font-size:1.4em;...}

   In a grid container those clearfix pseudo-elements become real (empty)
   grid items: the overview rendered with a blank first cell, "Order number"
   pushed into column 2 and the last item wrapping into an unintended extra
   row (measured live: first real <li> at x=391 in a container starting at
   x=134). And `.woocommerce ul.order_details li` (0,2,2) outranks the
   `.woocommerce-order-overview li` rule below (0,1,1), so the items also
   rendered at WooCommerce's own smaller font size with its dashed right
   border and 2em gutters instead of the theme's.

   Both are neutralized the same way #customer_details.col2-set was — the
   selectors below add the element's own `.woocommerce-order-overview` class
   on top of WooCommerce's own selector shape, which wins outright by
   specificity (0,3,x vs 0,2,x) without !important and without touching any
   other list. The `mt-4`/`mb-2` utilities thankyou.php applies lose to
   WooCommerce's `margin:0 0 3em` for the same reason, so they are re-won
   here by name rather than left in the markup doing nothing. --- */
.woocommerce ul.woocommerce-order-overview.order_details::before,
.woocommerce ul.woocommerce-order-overview.order_details::after {
	content: none;
}
.woocommerce ul.woocommerce-order-overview.order_details.mt-4 {
	margin-top: 1rem;
}
.woocommerce ul.woocommerce-order-overview.order_details.mb-2 {
	margin-bottom: 0.5rem;
}
.woocommerce ul.woocommerce-order-overview.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border-right: none;
	font-size: 0.75rem;
	line-height: 1.4;
}
.woocommerce ul.woocommerce-order-overview.order_details li strong {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-order-overview {
	border-top: 1px solid rgb(225 227 211);
	padding-top: 1rem;
}
.woocommerce-order-overview li {
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 700;
	color: rgb(107 114 128);
}
.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	text-transform: none;
	font-weight: 700;
	color: rgb(43 78 39);
}

/* --- Success/failure notices printed by order-received.php. WooCommerce's
   own bundled woocommerce.css does not style the .woocommerce-notice /
   .woocommerce-notice--success / .woocommerce-notice--error classes it
   uses (confirmed by grep — that naming is a WC Blocks convention, not
   part of the classic-template CSS this theme relies on), so without this
   they'd render as bare unstyled text. Reuses the same green/red look as
   .woocommerce-message / .woocommerce-error above. --- */
.woocommerce-notice {
	border-radius: 0.125rem;
	padding: 0.875rem 1.25rem;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
}
.woocommerce-notice--success {
	background-color: rgb(240 253 244);
	border: 1px solid rgb(134 239 172);
	color: rgb(43 78 39);
}
.woocommerce-notice--error {
	background-color: rgb(254 242 242);
	border: 1px solid rgb(252 165 165);
	color: rgb(185 28 28);
}

/* --- Order details card (order/order-details.php — itemized line items —
   and order/order-details-customer.php — billing/shipping addresses),
   printed outside thankyou.php's own white card via the woocommerce_thankyou
   hook, so each gets its own card treatment here. --- */
.woocommerce-order-details,
.woocommerce-customer-details {
	background-color: #fff;
	border-radius: 0.125rem;
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	margin-top: 1.5rem;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: rgb(43 78 39);
	margin: 0 0 1rem;
}
.woocommerce-order-details table.shop_table {
	width: 100%;
	font-size: 0.875rem;
	color: rgb(43 78 39);
	border-color: rgb(225 227 211);
}
.woocommerce-order-details table.shop_table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: rgb(43 78 39);
	background-color: rgb(242 243 238);
}
.woocommerce-order-details table.shop_table td,
.woocommerce-order-details table.shop_table th {
	border-color: rgb(225 227 211);
}
.woocommerce-order-details table.shop_table tfoot th,
.woocommerce-order-details table.shop_table tfoot td {
	border-color: rgb(225 227 211);
}
.woocommerce-order-details table.shop_table a {
	color: rgb(43 78 39);
}
.woocommerce-order-details table.shop_table a:hover {
	color: rgb(85 138 34);
}
/*
 * order/order-details.php prints these action links with WooCommerce's own
 * 'button' class still attached ("woocommerce-button button pay
 * order-actions-button"), which is a sub-template this task doesn't
 * override. WooCommerce's own bundled woocommerce.css has
 * ".woocommerce a.button{...background-color:#e9e6ed...}" at specificity
 * 0,2,1, which beats a 2-class selector here (0,2,0) — same collision
 * class as the cart-empty.php "Return to shop" button and #coupon_code
 * fixes in Tasks 1-2. Anchored under the real .woocommerce wrapper
 * WC_Shortcodes::shortcode_wrapper() provides (confirmed present in the
 * rendered page) to reach 0,3,0, which beats 0,2,1 outright without
 * !important.
 */
.woocommerce .woocommerce-order-details .order-actions-button {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 0.125rem;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
	background-color: rgb(133 180 49);
	text-decoration: none;
}
.woocommerce .woocommerce-order-details .order-actions-button:hover {
	background-color: rgb(115 158 38);
}

/* --- Billing/shipping address columns (order/order-details-customer.php) --- */
.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
	}
}
.woocommerce-customer-details address {
	font-size: 0.875rem;
	color: rgb(43 78 39);
	border-color: rgb(225 227 211);
	background-color: rgb(242 243 238);
}