/*
 * Styles for the Cart and Checkout pages (templates/cart.html, templates/checkout.html
 * in the theme). Both templates just render the WooCommerce Cart/Checkout blocks that
 * already live in the Cart/Checkout pages' own content (via wp:post-content, same as any
 * regular Page) inside the shared .enacoding-page layout (see assets/page-head.css for the
 * breadcrumb/title band and page-level spacing) — this file only re-skins the WooCommerce
 * block markup itself to match the rest of the site.
 */

/* Store notices (e.g. coupon applied/removed, validation errors) — same treatment as the
   single-product page's "added to cart" notice (assets/single-product.css). */
.enacoding-page .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: #f8f9fa;
	border: 1px solid rgba( 0, 128, 128, 0.2 );
	border-radius: 1rem;
	color: #333;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.enacoding-page .wc-block-components-notice-banner.is-error {
	background: #fef2f2;
	border-color: rgba( 220, 38, 38, 0.2 );
}

.enacoding-page .wc-block-components-notice-banner > svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.125rem;
	fill: #008080;
}

.enacoding-page .wc-block-components-notice-banner.is-error > svg {
	fill: #dc2626;
}

.enacoding-page .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
}

/* Cart / Checkout two-column layout: main content left, order summary sidebar right. */
.enacoding-page .wp-block-woocommerce-cart,
.enacoding-page .wp-block-woocommerce-checkout {
	margin-top: 0.5rem;
}

.enacoding-page .wc-block-cart__main,
.enacoding-page .wc-block-checkout__main {
	min-width: 0;
}

.enacoding-page .wc-block-cart__sidebar,
.enacoding-page .wc-block-checkout__sidebar {
	min-width: 0;
}

/* Section titles used throughout both blocks ("Cart totals", "Order summary",
   "Contact information", checkout step titles…) — same bold + teal underline accent as
   the rest of the site's card titles (Catalog filter cards, single-product related). */
.enacoding-page .wc-block-components-title,
.enacoding-page .wc-block-components-checkout-step__title {
	color: #333;
	font-weight: 800;
}

/* ---------------------------------------------------------------------------------
 * Cart / order summary line items
 * ------------------------------------------------------------------------------- */

.enacoding-page .wc-block-cart-items {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 1rem;
	padding: 0.5rem 1.5rem;
}

.enacoding-page .wc-block-cart-items__header {
	color: #666;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.enacoding-page .wc-block-cart-items__row {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.enacoding-page .wc-block-cart-items__row:last-child {
	border-bottom: none;
}

.enacoding-page .wc-block-cart-item__image img {
	border-radius: 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	background: #f8f9fa;
}

.enacoding-page .wc-block-cart-item__product a,
.enacoding-page .wc-block-components-order-summary-item__description a {
	color: #333;
	font-weight: 700;
	text-decoration: none;
}

.enacoding-page .wc-block-cart-item__product a:hover,
.enacoding-page .wc-block-components-order-summary-item__description a:hover {
	color: #008080;
	text-decoration: underline;
}

/* WooCommerce shows the product's short description under its name in both the Cart
   line items and the Checkout order summary — too much text for a line-item row here,
   so it's hidden on this page (the product's own page still shows it normally). */
.enacoding-page .wc-block-components-product-metadata__description {
	display: none;
}

.enacoding-page .wc-block-cart-item__prices,
.enacoding-page .wc-block-cart-item__total,
.enacoding-page .wc-block-components-order-summary-item__total-price {
	color: #f97316;
	font-weight: 700;
}

.enacoding-page .wc-block-cart-item__remove-link {
	color: #666;
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: underline;
}

.enacoding-page .wc-block-cart-item__remove-link:hover {
	color: #dc2626;
}

.enacoding-page .wc-block-cart-item__save-for-later-link {
	color: #008080;
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: underline;
}

/* Quantity stepper — same rounded pill as the single-product add-to-cart form. */
.enacoding-page .wc-block-components-quantity-selector {
	border-radius: 0.5rem;
	border-color: rgba( 0, 0, 0, 0.15 );
}

/* Order summary card (Cart totals / Checkout order summary) — a white card matching the
   Product Details card on the single-product page, sticking to the top of the sidebar
   column so it stays visible while scrolling a long cart/checkout form. */
.enacoding-page .wp-block-woocommerce-cart-order-summary-block,
.enacoding-page .wp-block-woocommerce-checkout-order-summary-block {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 1rem;
	padding: 1.5rem;
	position: sticky;
	top: 1.5rem;
}

.enacoding-page .wc-block-components-totals-item {
	color: #333;
	font-size: 0.9375rem;
}

.enacoding-page .wc-block-components-totals-item__label {
	color: #666;
}

.enacoding-page .wc-block-components-totals-item__value {
	font-weight: 700;
}

.enacoding-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.enacoding-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #333;
	font-weight: 800;
	font-size: 1.125rem;
}

.enacoding-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #f97316;
}

/* Coupon form toggle/input/button. */
.enacoding-page .wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
	color: #008080;
	font-weight: 700;
}

.enacoding-page .wc-block-components-totals-coupon__content .wc-block-components-text-input input,
.enacoding-page .wc-block-components-totals-coupon__input input {
	border-radius: 0.5rem;
}

.enacoding-page .wc-block-components-totals-coupon__content .wc-block-components-button {
	border-radius: 9999px;
	background: #008080;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.enacoding-page .wc-block-components-totals-coupon__content .wc-block-components-button:hover {
	background: #006666;
}

/* Order summary line items inside the Checkout sidebar (thumbnails + qty badge). */
.enacoding-page .wc-block-components-order-summary-item__image img {
	border-radius: 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	background: #f8f9fa;
}

.enacoding-page .wc-block-components-order-summary-item__quantity {
	background: #008080;
	color: #fff;
}

/* Primary call-to-action buttons: "Proceed to Checkout" and "Place order" — same teal
   pill as the single-product add-to-cart button. */
.enacoding-page .wc-block-cart__submit-button.wc-block-cart__submit-button,
.enacoding-page .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button {
	background: #008080;
	border: none;
	border-radius: 9999px;
	padding: 0.875rem 2rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.enacoding-page .wc-block-cart__submit-button.wc-block-cart__submit-button:hover,
.enacoding-page .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button:hover {
	background: #006666;
}

/* ---------------------------------------------------------------------------------
 * Checkout form: contact/shipping/billing/payment steps
 * ------------------------------------------------------------------------------- */

.enacoding-page .wc-block-components-checkout-step {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.enacoding-page .wc-block-components-checkout-step:last-child {
	border-bottom: none;
}

/* Step numbers ("1", "2", "3"…) — teal circle badges instead of WooCommerce's plain
   grey numerals. */
.enacoding-page .wc-block-components-checkout-step__heading-content .wc-block-components-checkout-step__title::before {
	color: #fff;
	background: #008080;
	border-radius: 9999px;
}

.enacoding-page .wc-block-components-text-input input,
.enacoding-page .wc-block-components-address-form input,
.enacoding-page .wc-block-components-address-form select,
.enacoding-page .wc-block-components-combobox-control input {
	border-radius: 0.5rem;
	border-color: rgba( 0, 0, 0, 0.15 );
}

.enacoding-page .wc-block-components-text-input.is-active input,
.enacoding-page .wc-block-components-text-input input:focus {
	border-color: #008080;
	box-shadow: 0 0 0 1px #008080;
}

.enacoding-page .wc-block-components-text-input label {
	color: #666;
}

/* Shipping/payment method options — selectable cards, teal border + light teal tint on
   the currently checked option. Left padding stays at WooCommerce's own 48px (not 1rem
   all round): the radio circle itself is positioned absolutely at left:16px by WC's own
   stylesheet, and needs that reserved gutter — a uniform 1rem padding here left no room
   for it, so the circle rendered on top of the label text instead of beside it. */
.enacoding-page .wc-block-components-radio-control__option {
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 1rem 1rem 1rem 3rem;
	transition: border-color 0.2s ease;
}

.enacoding-page .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
	border-color: #008080;
	background: rgba( 0, 128, 128, 0.05 );
}

.enacoding-page .wc-block-components-radio-control__input:checked {
	border-color: #008080;
	background-color: #008080;
	color: #008080;
}

.enacoding-page .wc-block-components-radio-control__label {
	color: #333;
	font-weight: 700;
}

.enacoding-page .wc-block-components-radio-control__secondary-label {
	color: #f97316;
	font-weight: 700;
}

/* Checkboxes ("Save this information for next time", terms & conditions…). */
.enacoding-page .wc-block-components-checkbox__mark {
	fill: #fff;
}

.enacoding-page .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
	background: #008080;
}

.enacoding-page .wc-block-components-checkbox__input:checked ~ svg {
	fill: #008080;
}

/* ---------------------------------------------------------------------------------
 * Empty cart state
 * ------------------------------------------------------------------------------- */

.enacoding-page .wc-block-cart__empty-cart__title {
	color: #333;
	font-weight: 800;
	margin-bottom: 1rem;
}

/* The empty-cart bag icon is a currentColor-masked ::before — recoloring just the
   pseudo-element (not the heading text itself) tints the icon teal without touching
   the "Your cart is currently empty!" text color. */
.enacoding-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	color: #008080;
}

.enacoding-page .wp-block-woocommerce-empty-cart-block hr.wp-block-separator {
	border-color: rgba( 0, 128, 128, 0.25 );
	color: rgba( 0, 128, 128, 0.25 );
}

.enacoding-page .wp-block-woocommerce-empty-cart-block .wp-block-heading {
	color: #333;
	font-weight: 800;
}

.enacoding-page .wp-block-woocommerce-empty-cart-block a.wp-element-button,
.enacoding-page .wp-block-woocommerce-empty-cart-block p > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background: #008080;
	border-radius: 9999px;
	padding: 0.75rem 1.75rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.enacoding-page .wp-block-woocommerce-empty-cart-block a.wp-element-button:hover,
.enacoding-page .wp-block-woocommerce-empty-cart-block p > .wp-block-button__link:hover {
	background: #006666;
}

/* Cross-sell "New in store" grid on the empty cart — light card treatment matching the
   Catalog page's product cards, without pulling in the whole catalog.css file. This
   classic grid block centers its title/price/button by default; the site's own card
   language (Catalog, single-product related products) is always left-aligned, so that
   default is overridden here. */
.enacoding-page .wc-block-grid__product {
	text-align: left;
}

.enacoding-page .wc-block-grid__product-image,
.enacoding-page .wc-block-grid__product-link {
	display: block;
}

.enacoding-page .wc-block-grid__product-image img {
	width: 100%;
	border-radius: 1rem;
	background: #f8f9fa;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
}

.enacoding-page .wc-block-grid__product-title {
	color: #333;
	font-weight: 700;
	font-size: 0.9375rem;
}

.enacoding-page .wc-block-grid__product-price {
	color: #f97316;
	font-weight: 700;
	text-align: left;
}

.enacoding-page .wc-block-grid__product-add-to-cart {
	text-align: left;
}

.enacoding-page .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	margin: 0;
	border-radius: 9999px;
	background: #333;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.enacoding-page .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: #1a1a1a;
}