/* pratapgarh-pure — WooCommerce screens. */

/* Tables: cart, order review. */
.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--paper);
	overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--sp-3) var(--sp-4);
	border-color: var(--line);
	font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table th {
	font: 600 var(--step--1)/1.4 var(--body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--green);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	font-weight: 600;
}

/* Buttons: all shapes. */
/* Explicit shapes; (0,2,1) wins. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
	padding: .85rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--green);
	color: var(--paper);
	font: 600 var(--step-0)/1 var(--body);
	text-decoration: none;
	cursor: pointer;
}
/* Use background shorthand; 4.19:1. */
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--green);
	color: var(--paper);
	/* Shade overlay; after shorthand. */
	background-image: linear-gradient(var(--shade), var(--shade));
}
.woocommerce .button:disabled,
.woocommerce button.button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Form fields. */
.woocommerce form .form-row {
	margin-bottom: var(--sp-4);
}
.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--sp-1);
	font: 600 var(--step--1)/1.4 var(--body);
	color: var(--ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	padding: .7rem .8rem;
	/* --line 1.30:1; use --field-line. */
	border: 1px solid var(--field-line);
	border-radius: var(--radius);
	background: var(--paper);
	font: inherit;
	color: var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--magenta);
}
.woocommerce form .form-row .required {
	/* Required ink; magenta 3.82:1. */
	color: var(--ink);
	text-decoration: none;
}

/* Notices. */
/* .cart-empty also carries .woocommerce-info, but it is an empty state, not
   a notice; excluded here so it never takes chrome it would have to undo. */
.woocommerce-message,
.woocommerce-info:not(.cart-empty),
.woocommerce-error {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-left: 3px solid var(--green);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	list-style: none;
}
.woocommerce-error {
	border-left-color: var(--magenta);
}
.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	padding: .5rem 1rem;
	font-size: var(--step--1);
}
/* Woo parks this glyph at left:1.5em, absolute — a position sized for its own
   3.5em left padding. These notices pay --sp-4 (16px) instead, so the glyph box
   measured 124-136px while the text started at 119px: the check was painted on
   top of the first two characters. Flow it rather than guess an offset, and
   take the colour of the border it belongs to — Woo's #8fae1b, #1e85be and
   #b81c23 are all off-system. */
.woocommerce-message::before,
.woocommerce-info:not(.cart-empty)::before,
.woocommerce-error::before {
	position: static;
	margin-right: var(--sp-2);
	color: var(--green);
}
.woocommerce-error::before {
	color: var(--magenta);
}

/* Keep toggle; gold 1.83:1. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .woocommerce-form-coupon-toggle {
	border-left-color: var(--green);
}
.woocommerce form.checkout_coupon {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}
.woocommerce form.checkout_coupon p {
	margin: 0 0 var(--sp-3);
}

/* Cart and checkout are tables and forms, not prose, so they take the full
   container instead of the .pp-entry reading measure.
   One declaration, not three: main.css caps the container, its children AND
   every paragraph via var(--measure), so redefining the token on the article
   removes all of them at once and cannot drift when main.css changes. All
   seven uses are max-width, so `none` is valid for each. The empty-cart 46ch
   rules in this file are literals and stay narrow. */
.woocommerce-cart .pp-entry,
.woocommerce-checkout .pp-entry {
	--measure: none;
}
/* The lede sizes whichever paragraph is first, and on these pages that is a
   form field -- Woo's order-notes row -- not an intro. */
.woocommerce-cart .pp-entry__body p:first-of-type,
.woocommerce-checkout .pp-entry__body p:first-of-type {
	font-size: inherit;
}

/* Cart line thumbnail: a small square, not the 600px catalog image Woo would
   otherwise let fill the cell (it only sets min-width: 32px on the cell).
   functions.php serves the 100px size; this caps the box it renders in.
   !important is load-bearing: main.css forces every .pp-entry__body img to
   width:100%!important for the legacy Gutenberg inline widths, and the cart
   is inside .pp-entry__body. Without it the thumb renders 117x64, stretched. */
.woocommerce table.shop_table.cart .product-thumbnail img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Cart specifics. */
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-size: var(--step-2);
}
.woocommerce-cart .cart-collaterals .cart_totals table {
	background: var(--paper);
}
.woocommerce a.remove {
	/* Remove link: ink, 3.82:1. */
	color: var(--ink) !important;
	text-decoration: none;
}
.woocommerce .quantity input.qty {
	width: 4.5rem;
	padding: .55rem .6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-variant-numeric: tabular-nums;
}

/* Empty cart: a designed state (spec 16.5), same geometry as .pp-state in
   main.css. Woo's template is kept; only its output is restyled.
   /checkout/ with an empty cart renders this same markup, so both are covered.

   The reset is not belt-and-braces: Woo's own woocommerce.css styles
   .woocommerce-info at (0,1,0) with padding, a #f6f5f8 background, a blue
   border-top and an \e028 ::before glyph, and it loads before this file. */
.woocommerce .wc-empty-cart-message,
.woocommerce .return-to-shop {
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
}
.woocommerce .cart-empty {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--step-1);
	color: var(--muted);
}
.woocommerce .cart-empty::before {
	display: none;
}
.woocommerce .return-to-shop {
	margin-top: var(--sp-6);
}

/* Checkout specifics. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	margin-bottom: var(--sp-8);
}
.woocommerce-checkout #order_review {
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--sp-4);
	font-size: var(--step--1);
}
.woocommerce ul.wc_payment_methods {
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
}
.woocommerce ul.wc_payment_methods li {
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--line);
}
/* Native radios: custom fails. */
.woocommerce ul.wc_payment_methods li input.input-radio {
	margin-right: var(--sp-2);
}
/* Gateway icons: cap anything a plugin injects. WooCommerce does not size
   these, so a plugin shipping a wide banner renders it at natural size and it
   swallows the payment list — CCAvenue's images/logo.png did exactly that. */
.woocommerce ul.wc_payment_methods li img {
	max-height: 28px;
	width: auto;
}
/* CCAvenue's is a two-line "100% Secure Payment" banner, so capping it only
   makes an illegible smudge. The method title already names the payment types;
   hide it and keep the row calm. */
.woocommerce ul.wc_payment_methods li.payment_method_ccavenue img {
	display: none;
}

/* Screen-reader text, matches utility. */
.woocommerce .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}