/* ==========================================================================
   GOSHOPCARA — CHECKOUT, CART, ORDER CONFIRMATION
   Loaded after shop.css. Styles WooCommerce's own markup, so it works with
   whatever gateway is active.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT — form left, sticky summary right
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(var(--sp-5), 3vw, var(--sp-8));
	align-items: start;
}

.woocommerce-checkout form.checkout > .col2-set,
.woocommerce-checkout #customer_details {
	grid-column: 1;
	width: 100%;
	float: none;
	display: block;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-checkout #customer_details .col-2 { margin-top: var(--sp-6); }

.woocommerce-checkout h3,
.woocommerce-checkout h3#order_review_heading {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   FORM FIELDS
   -------------------------------------------------------------------------- */

.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 var(--sp-4);
	display: block;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 7px;
}

.woocommerce form .form-row label .required {
	color: var(--burgundy-700);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
	width: 100%;
	height: 46px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--bg);
	color: var(--text);
	font-size: 14.5px;
	font-family: inherit;
	line-height: 46px;
	box-shadow: none;
	transition: border-color var(--m-base) var(--m-out),
	            box-shadow var(--m-base) var(--m-out);
}

.woocommerce form .form-row textarea {
	height: auto;
	min-height: 92px;
	padding: var(--sp-3) var(--sp-4);
	line-height: 1.6;
	resize: vertical;
}

.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(--burgundy-700);
	box-shadow: 0 0 0 3px rgba(122, 16, 37, .12);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #B3261E;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: rgba(14, 107, 69, .5);
}

/* Two-up rows on wider screens. */
@media (min-width: 620px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - var(--sp-2));
		float: left;
		margin-right: 0;
	}

	.woocommerce form .form-row-last { float: right; }

	.woocommerce form .form-row-wide { clear: both; }
}

/* Select2 (country / state) matched to the plain inputs. */
.select2-container--default .select2-selection--single {
	height: 46px;
	border-radius: var(--r-md);
	border-color: var(--border);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: var(--sp-4);
	color: var(--text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: var(--sp-3);
}

.select2-dropdown {
	border-color: var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--burgundy-700);
}

/* --------------------------------------------------------------------------
   SECONDARY BUTTONS — Update cart, Apply coupon, Continue shopping

   The inherited stylesheet paints every .button with --c-ink, which now maps
   to the near-black text colour: a solid black slab next to the burgundy
   checkout button. These are supporting actions, so they read as outlines
   and fill with burgundy only on hover.
   -------------------------------------------------------------------------- */

.woocommerce a.button:not(.alt):not(.checkout-button),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"],
.woocommerce .return-to-shop .button {
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text);
	border-radius: var(--r-md);
	padding: 12px var(--sp-5);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: none;
	height: 44px;
	transition: background var(--m-base) var(--m-out),
	            border-color var(--m-base) var(--m-out),
	            color var(--m-base) var(--m-out);
}

.woocommerce a.button:not(.alt):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover,
.woocommerce-cart button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce .return-to-shop .button:hover {
	background: var(--burgundy-700);
	border-color: var(--burgundy-700);
	color: #fff;
}

/* WooCommerce disables Update cart until a quantity changes — say so. */
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled] {
	opacity: .4;
	cursor: default;
	background: transparent;
	border-color: var(--border);
	color: var(--muted);
}

/* The coupon row: field and button on one line. */
.woocommerce-cart .coupon {
	display: flex;
	gap: var(--sp-2);
	align-items: stretch;
	flex-wrap: wrap;
}

.woocommerce-cart .coupon #coupon_code {
	flex: 1 1 180px;
	min-width: 0;
	height: 44px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--bg);
	color: var(--text);
	font-size: 14px;
}

.woocommerce-cart .coupon #coupon_code:focus {
	outline: none;
	border-color: var(--burgundy-700);
}

/* --------------------------------------------------------------------------
   PAGE HEADING — gives the form a title band like the rest of the shop
   -------------------------------------------------------------------------- */

.woocommerce-checkout .gsc-woo__head,
.woocommerce-cart .gsc-woo__head {
	margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-8));
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   ORDER SUMMARY — sticky column
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
	z-index: 1;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	padding: var(--sp-5);
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--border);
	padding: var(--sp-3) 0;
	background: none;
	font-size: 14px;
	vertical-align: top;
}

.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: var(--sp-3);
}

/* The name column must be allowed to take the width it needs. Left to the
   browser's automatic table layout it collapsed to one word per line beside
   a price column that never shrinks. */
.woocommerce-checkout #order_review table.shop_table {
	table-layout: fixed;
}

.woocommerce-checkout #order_review .product-name {
	color: var(--text);
	line-height: 1.45;
	padding-right: var(--sp-3);
	width: 68%;
	word-break: normal;
	overflow-wrap: anywhere;
	hyphens: none;
}

.woocommerce-checkout #order_review .product-total {
	width: 32%;
}

/* WooCommerce prints the quantity as a bare "× 3" span inside the name. */
.woocommerce-checkout #order_review .product-quantity {
	display: inline;
	white-space: nowrap;
	margin-left: 4px;
}

.woocommerce-checkout #order_review .product-total,
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
	border-bottom: 0;
	padding-top: var(--sp-4);
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
}

.woocommerce-checkout #order_review tr.order-total td { text-align: right; }

.woocommerce-checkout #order_review tr.order-total .amount {
	font-size: 20px;
	color: var(--burgundy-700);
}

/* Shipping choices inside the summary. */
.woocommerce-checkout #order_review #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-checkout #order_review #shipping_method li {
	margin: 0 0 var(--sp-2);
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
}

.woocommerce-checkout #order_review #shipping_method label {
	font-size: 13.5px;
	color: var(--text);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   PAYMENT METHODS
   Gateway-agnostic: this styles WooCommerce's own wrapper, so any active
   gateway inherits it without the theme knowing which one it is.
   -------------------------------------------------------------------------- */

.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
	padding: var(--sp-5) 0 0;
	margin-top: var(--sp-5);
	border-top: 1px solid var(--border);
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 var(--sp-4);
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--bg);
	padding: 0;
	margin: 0;
	transition: border-color var(--m-base) var(--m-out),
	            background var(--m-base) var(--m-out);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: var(--burgundy-300);
}

/* The chosen method reads as chosen. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--burgundy-700);
	background: rgba(122, 16, 37, .03);
}

.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	margin: 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--border-strong);
	border-radius: 50%;
	flex: none;
	position: relative;
	cursor: pointer;
	transition: border-color var(--m-base) var(--m-out);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked {
	border-color: var(--burgundy-700);
	border-width: 5px;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:focus-visible {
	outline: 2px solid var(--burgundy-700);
	outline-offset: 2px;
}

/* Gateway logos sit at the end of the row, not floated away. */
.woocommerce-checkout #payment ul.payment_methods li label img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 auto;
	float: none;
	display: inline-block;
}

.woocommerce-checkout #payment ul.payment_methods li .mecom-paypal-payment-icon,
.woocommerce-checkout #payment ul.payment_methods li .payment_method_icons {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* The description / card form that opens under the chosen method. */
.woocommerce-checkout #payment div.payment_box {
	background: var(--surface-2);
	border-radius: 0 0 var(--r-md) var(--r-md);
	margin: 0;
	padding: var(--sp-4);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
	border-top: 1px solid var(--border);
}

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

.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

/* A gateway that renders only hidden inputs and a script tag leaves a box
   with nothing in it — an empty bordered strip under the method. Collapse it
   unless it holds something the customer can actually see. */
.woocommerce-checkout #payment div.payment_box:not(:has(p, iframe, img, button, label, select, fieldset, .paypal-buttons, [class*="card"])) {
	display: none !important;
	padding: 0;
	border: 0;
}

/* The gateway also drops two permanently spinning placeholder blocks straight into the
   list item, outside the payment box. They never resolve to anything the
   customer acts on, so they only add an empty strip under the method name. */
.woocommerce-checkout #payment #cs-pp-loader,
.woocommerce-checkout #payment #cs-pp-loader-credit,
.woocommerce-checkout #payment .cs-pp-spinner,
.woocommerce-checkout #payment .cs-pp-spinnerWithLockIcon {
	display: none !important;
}

/* Hidden inputs must not reserve space either. */
.woocommerce-checkout #payment div.payment_box > input[style*="display:none"],
.woocommerce-checkout #payment div.payment_box > script {
	display: none;
}

/* Hosted card fields. Only the plain inputs are styled: an iframe belongs to
   the gateway and sizes itself from the inside, so giving it a fixed height
   or a border produces a scrollbar around content that was already the right
   size. Same for the gateway's own buttons below. */
.woocommerce-checkout #payment div.payment_box input[type="text"],
.woocommerce-checkout #payment div.payment_box input[type="tel"] {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--bg);
	padding: 0 var(--sp-3);
	font-size: 14.5px;
	color: var(--text);
}

.woocommerce-checkout #payment div.payment_box iframe {
	width: 100%;
	border: 0;
	display: block;
}

/* The gateway's button gets full width and nothing else. Constraining its
   height forced its own content to scroll inside a box the theme had made
   too short. */
.woocommerce-checkout #payment .paypal-buttons,
.woocommerce-checkout #payment [id*="paypal-button"] {
	width: 100%;
	max-width: none;
	margin: 0;
	overflow: visible;
}

/* --------------------------------------------------------------------------
   TERMS + PLACE ORDER
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 var(--sp-4);
	font-size: 13px;
	color: var(--muted);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--burgundy-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-checkout #payment .form-row.place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	height: 54px;
	border-radius: var(--r-md);
	background: var(--burgundy-700);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background var(--m-base) var(--m-out);
}

.woocommerce-checkout #payment #place_order:hover {
	background: var(--burgundy-600);
}

.woocommerce-checkout #payment #place_order:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Reassurance under the button, drawn from the same figures as the rest. */
.gsc-checkout-trust {
	display: grid;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--border);
}

.gsc-checkout-trust__row {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

.gsc-checkout-trust__row svg {
	width: 14px;
	height: 14px;
	flex: none;
	margin-top: 1px;
	stroke: var(--burgundy-700);
	fill: none;
	stroke-width: 1.7;
}

/* --------------------------------------------------------------------------
   COUPON / LOGIN NOTICES
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
	margin-bottom: var(--sp-5);
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	background: var(--surface);
	border-top: 2px solid var(--burgundy-700);
	border-radius: var(--r-md);
	color: var(--text);
	font-size: 13.5px;
	padding: var(--sp-4) var(--sp-5);
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before { display: none; }

.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a { color: var(--burgundy-700); }

.woocommerce form.checkout_coupon,
.woocommerce form.woocommerce-form-login {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	background: var(--surface);
	margin: 0 0 var(--sp-5);
}

.woocommerce .woocommerce-error {
	background: rgba(179, 38, 30, .05);
	border-top: 2px solid #B3261E;
	border-radius: var(--r-md);
	color: var(--text);
	padding: var(--sp-4) var(--sp-5);
	font-size: 13.5px;
}

.woocommerce .woocommerce-error::before { display: none; }

/* --------------------------------------------------------------------------
   ORDER RECEIVED — thank-you page
   -------------------------------------------------------------------------- */

.woocommerce-order {
	max-width: 760px;
}

.woocommerce-order .woocommerce-notice--success {
	background: var(--surface);
	border: 1px solid var(--burgundy-700);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 600;
	color: var(--text);
	margin: 0 0 var(--sp-6);
	text-align: center;
}

.woocommerce-order .woocommerce-notice--success::before { display: none; }

.woocommerce ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sp-4);
}

.woocommerce ul.woocommerce-order-overview li {
	border: 0;
	float: none;
	margin: 0;
	padding: 0;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 7px;
	font-size: 15px;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--text);
	font-weight: 700;
}

.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	margin-bottom: var(--sp-6);
}

.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border);
}

.woocommerce table.woocommerce-table--order-details {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
	border: 0;
	border-bottom: 1px solid var(--border);
	padding: var(--sp-3) var(--sp-4);
	font-size: 14px;
}

.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 700;
	font-size: 16px;
}

.woocommerce .woocommerce-customer-details address {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text);
	background: var(--surface);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

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

	.woocommerce-checkout .woocommerce-checkout-review-order {
		position: static;
	}
}

@media (max-width: 620px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}
}