/* ==========================================================================
   OptimaSciences · Cart and checkout polish
   --------------------------------------------------------------------------
   PASTE INTO: Appearance -> Customize -> Additional CSS -> Publish

   Why there and not a snippet: Additional CSS is core WordPress, applies
   instantly, and deleting it reverts everything. No PHP, no risk.

   SCOPE
     Every rule is scoped to .woocommerce-cart or .woocommerce-checkout, so
     nothing leaks onto product pages, the shop or the homepage.

   DELIBERATELY NOT TOUCHED
     The inside of #payment. Once your card gateway is live that box will
     contain its own markup and possibly an iframe. Styling around it is
     safe, styling into it is not.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · THE CLIPPED FIELD BUG
   Measured: selects are 40px tall with 16px padding top and bottom, leaving
   8px of room for 14px text. That is why "Canada" renders cut in half.
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .select2-selection--single {
	height: auto;
	min-height: 48px;
	padding: 13px 14px;
	line-height: 1.4;
	font-size: 15px;
	border-radius: 8px;
}

.woocommerce-checkout form.checkout .form-row textarea {
	min-height: 90px;
}

/* Select2 renders its own inner text node, which needs the same room. */
.woocommerce-checkout form.checkout .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
}
.woocommerce-checkout form.checkout .select2-selection--single .select2-selection__arrow {
	height: 46px;
}


/* --------------------------------------------------------------------------
   2 · LABEL AND VALUE HIERARCHY
   Measured: labels and entered values are both rgb(105,114,125). A filled
   field looks identical to an empty one, so the form reads as untouched.
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #6B7480;
	margin-bottom: 6px;
}

.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .select2-selection__rendered {
	color: #161515;
	font-weight: 500;
}

/* Placeholders stay grey so empty and filled are visibly different. */
.woocommerce-checkout form.checkout .form-row input.input-text::placeholder,
.woocommerce-checkout form.checkout .form-row textarea::placeholder {
	color: #A3AAB4;
	font-weight: 400;
}

/* A clear focus state. Right now there is almost none. */
.woocommerce-checkout form.checkout .form-row input.input-text:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus {
	outline: 0;
	background: #fff;
	box-shadow: 0 0 0 2px #161515;
}

/* The required asterisk is currently loud red on every single field. */
.woocommerce-checkout form.checkout .required {
	color: #B0B7C0;
	text-decoration: none;
	border: 0;
}


/* --------------------------------------------------------------------------
   3 · THE SHIPPING CHOICE
   Measured: 208px wide, right aligned, 15px. A real decision rendered as a
   footnote, with labels wrapping mid-sentence.
   -------------------------------------------------------------------------- */

.woocommerce-checkout #shipping_method,
.woocommerce-cart #shipping_method {
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	padding: 11px 13px;
	border: 1px solid #E4E8ED;
	border-radius: 10px;
	transition: border-color .15s ease, background .15s ease;
}

.woocommerce-checkout #shipping_method li:last-child,
.woocommerce-cart #shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #shipping_method li:hover,
.woocommerce-cart #shipping_method li:hover {
	border-color: #C7CFD8;
	background: #FAFBFC;
}

/* The chosen one should be obvious. */
.woocommerce-checkout #shipping_method li:has(input:checked),
.woocommerce-cart #shipping_method li:has(input:checked) {
	border-color: #161515;
	background: #fff;
}

.woocommerce-checkout #shipping_method li input,
.woocommerce-cart #shipping_method li input {
	margin: 3px 0 0;
	flex: 0 0 auto;
}

.woocommerce-checkout #shipping_method li label,
.woocommerce-cart #shipping_method li label {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
	color: #161515;
	cursor: pointer;
}

/* The arrival date line added by the shipping snippet. */
.woocommerce-checkout #shipping_method .os-eta,
.woocommerce-cart #shipping_method .os-eta {
	color: #6B7480;
}

/* The "Shipment" heading sat in a narrow left cell fighting the list. */
.woocommerce-checkout .woocommerce-shipping-totals th,
.woocommerce-cart .woocommerce-shipping-totals th {
	display: block;
	width: 100%;
	padding-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #6B7480;
}
.woocommerce-checkout .woocommerce-shipping-totals td,
.woocommerce-cart .woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	padding-top: 0;
}


/* --------------------------------------------------------------------------
   4 · THE ORDER SUMMARY
   Make the total the loudest number, and keep the summary on screen while
   the customer works down a long form.
   -------------------------------------------------------------------------- */

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	position: sticky;
	top: 24px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 19px;
	font-weight: 700;
	color: #161515;
	padding-top: 16px;
	border-top: 1px solid #E4E8ED;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-cart .cart_totals .cart-subtotal th {
	font-weight: 500;
	color: #6B7480;
}

/* Product names in the summary are long and were wrapping to four lines. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	font-size: 13.5px;
	line-height: 1.4;
	color: #4C555E;
}


/* --------------------------------------------------------------------------
   5 · QUIETING THE OPTIONAL THINGS
   The coupon prompt and the order notes box were competing with the payment
   step for attention. Neither deserves it.
   -------------------------------------------------------------------------- */

.woocommerce-checkout .coupon-wrapper,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	font-size: 13.5px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 1px dashed #D9DEE4;
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 18px;
	color: #6B7480;
}

.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 14px;
	font-weight: 600;
	color: #6B7480;
	margin-bottom: 8px;
}

.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 74px;
}


/* --------------------------------------------------------------------------
   6 · SPACING AND RHYTHM
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row {
	margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout #order_review_heading {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #161515;
}

/* The terms line sat tight against the Place order button. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 18px;
	font-size: 13.5px;
	line-height: 1.5;
}


/* --------------------------------------------------------------------------
   7 · MOBILE
   The summary must not stick on a small screen, it would eat the viewport.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {

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

	.woocommerce-checkout form.checkout .form-row input.input-text,
	.woocommerce-checkout form.checkout .form-row select,
	.woocommerce-checkout form.checkout .form-row textarea {
		font-size: 16px; /* under 16px iOS zooms the page on focus */
		min-height: 50px;
	}

	.woocommerce-checkout #shipping_method li,
	.woocommerce-cart #shipping_method li {
		padding: 13px;
	}
}
/* ===== CHECKOUT BANNER ================================================== */

.woocommerce-checkout #masthead.site-header {
	background: #161515;
	border: 0;
	box-shadow: none;
}

.woocommerce-checkout #masthead .main-header {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* The logo is a dark wordmark, so it is inverted to white for the black bar.
   If your mark is multi-coloured this will flatten it: upload a white version
   instead and delete the filter line. */
.woocommerce-checkout #masthead .site-branding img,
.woocommerce-checkout #masthead .custom-logo-link img {
	filter: brightness(0) invert(1);
	height: 34px;
	width: auto;
	display: block;
}

/* Text fallback, in case the logo ever fails to load. */
.woocommerce-checkout #masthead .site-title a {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
}

/* The hamburger is pointless on a distraction-free checkout. */
.woocommerce-checkout #masthead .menu-toggle {
	display: none !important;
}

.woocommerce-checkout #masthead .main-header h1 {
	margin: 0 0 0 auto;
	padding: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1.2;
	text-align: right;
	color: #fff;
}

/* Shoptimizer leaves a scroll sentinel in the bar. */
.woocommerce-checkout #masthead .s-observer {
	display: none;
}

@media (max-width: 782px) {

	.woocommerce-checkout #masthead .main-header {
		min-height: 62px;
		padding: 0 18px;
		gap: 12px;
	}

	.woocommerce-checkout #masthead .site-branding img,
	.woocommerce-checkout #masthead .custom-logo-link img {
		height: 28px;
	}

	.woocommerce-checkout #masthead .main-header h1 {
		font-size: 14px;
	}
}

/* ======================================================================== */