/*!
Package: cart styles
Purpose: The Petland cart-page layout. Extracted 2026-04 from a 346-line
inline <style> block in /woocommerce/cart/cart.php so cart styles can be
browser-cached and maintained as a first-class stylesheet. Enqueued only
on the cart page by /add-ons/utils/cart-badge.php (which also handles the
header-badge fragments).

Scope prefix: .petland-cart (all rules are nested under this class so they
only affect the custom cart markup, not other WC pages).
*/
	.petland-cart {
		--pc-ink:          #0f172a;
		--pc-ink-soft:     #475569;
		--pc-ink-faint:    #94a3b8;
		--pc-surface:      #ffffff;
		--pc-sunken:       #f8fafc;
		--pc-muted:        #f1f5f9;
		--pc-border:       #e2e8f0;
		--pc-border-strong:#cbd5e1;
		--pc-primary:      var( --bs-primary, #dc3545 );
		--pc-primary-soft: rgba( 220, 53, 69, .08 );
		--pc-radius:       14px;
		--pc-radius-sm:    8px;
		--pc-shadow-sm:    0 1px 2px rgba( 15, 23, 42, .06 ), 0 1px 3px rgba( 15, 23, 42, .08 );
	}

	/* Hide the stock WC table — we render our own card layout below. */
	.petland-cart .woocommerce-cart-form__contents { display: none; }

	.petland-cart { color: var( --pc-ink ); }

	.petland-cart-title {
		font-size: 1.75rem;
		font-weight: 700;
		letter-spacing: -.01em;
		margin: 0 0 1.5rem;
	}

	/* ---------- Item rows ---------- */

	.petland-cart-items {
		display: flex;
		flex-direction: column;
		gap: .75rem;
		margin-bottom: 1.5rem;
	}

	.petland-cart-item {
		display: grid;
		grid-template-columns: 96px 1fr auto;
		gap: 1rem;
		align-items: center;
		padding: 1rem;
		background: var( --pc-surface );
		border: 1px solid var( --pc-border );
		border-radius: var( --pc-radius );
		box-shadow: var( --pc-shadow-sm );
	}

	.petland-cart-item-img {
		width: 96px;
		height: 96px;
		border-radius: var( --pc-radius-sm );
		object-fit: cover;
		background: var( --pc-muted );
	}

	.petland-cart-item-body { min-width: 0; }

	.petland-cart-item-name {
		font-size: 1rem;
		font-weight: 600;
		color: var( --pc-ink );
		margin: 0 0 .2rem;
		text-decoration: none;
	}

	.petland-cart-item-name:hover { color: var( --pc-primary ); }

	.petland-cart-item-meta {
		font-size: .82rem;
		color: var( --pc-ink-faint );
		margin: .1rem 0;
	}

	.petland-cart-item-desc {
		font-size: .85rem;
		line-height: 1.45;
		color: var( --pc-ink-soft );
		margin: .35rem 0 .15rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.petland-cart-item-desc p { margin: 0; }

	.petland-cart-item-price {
		font-size: .95rem;
		color: var( --pc-ink-soft );
		margin-top: .4rem;
		font-weight: 500;
	}

	.petland-cart-item-qty {
		display: flex;
		align-items: center;
		gap: .5rem;
		margin-top: .4rem;
	}

	.petland-cart-item-qty .quantity { margin: 0; }

	.petland-cart-item-qty input.qty {
		width: 56px;
		height: 36px;
		padding: 0 .4rem;
		text-align: center;
		border: 1.5px solid var( --pc-border );
		border-radius: var( --pc-radius-sm );
		font-weight: 600;
	}

	.petland-cart-item-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: .5rem;
		min-width: 120px;
	}

	.petland-cart-item-subtotal {
		font-size: 1.05rem;
		font-weight: 700;
		color: var( --pc-primary );
	}

	.petland-cart-item-remove {
		display: inline-flex;
		align-items: center;
		gap: .3rem;
		padding: .35rem .65rem;
		font-size: .78rem;
		color: var( --pc-ink-faint );
		background: transparent;
		border: 1px solid var( --pc-border );
		border-radius: 999px;
		text-decoration: none;
		transition: all 200ms ease;
		font-weight: 500;
	}

	.petland-cart-item-remove:hover {
		color: var( --pc-primary );
		border-color: var( --pc-primary );
		background: var( --pc-primary-soft );
	}

	.petland-cart-item-remove::before {
		content: '×';
		font-size: 1.1rem;
		line-height: 1;
	}

	/* Badge for required/included items */
	.petland-cart-item-required {
		display: inline-block;
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		padding: 2px 8px;
		border-radius: 999px;
		background: var( --pc-primary );
		color: #fff;
		margin-left: .4rem;
	}

	/* ---------- Coupon + actions row ---------- */

	.petland-cart-actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .75rem;
		padding: 1rem 1.25rem;
		background: var( --pc-sunken );
		border: 1px solid var( --pc-border );
		border-radius: var( --pc-radius );
		margin-bottom: 1.5rem;
	}

	.petland-cart-coupon {
		display: flex;
		gap: .5rem;
		flex: 1;
		max-width: 380px;
	}

	.petland-cart-coupon input.input-text {
		flex: 1;
		height: 40px;
		padding: 0 .85rem;
		border: 1.5px solid var( --pc-border );
		border-radius: 999px;
		outline: none;
	}

	.petland-cart-coupon input.input-text:focus {
		border-color: var( --pc-primary );
	}

	.petland-cart .button,
	.petland-cart .btn-pc {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: .55rem 1.1rem;
		border-radius: 999px;
		font-weight: 600;
		font-size: .88rem;
		border: 1.5px solid var( --pc-border );
		background: var( --pc-surface );
		color: var( --pc-ink );
		cursor: pointer;
		transition: all 200ms ease;
		font-family: inherit;
	}

	.petland-cart .button[name="update_cart"] {
		border-color: var( --pc-border-strong );
	}

	.petland-cart .button[name="update_cart"]:hover {
		background: var( --pc-sunken );
	}

	.petland-cart .button[name="apply_coupon"] {
		background: var( --pc-ink );
		color: #fff;
		border-color: var( --pc-ink );
	}

	/* ---------- Totals column ---------- */

	.petland-cart-totals {
		background: var( --pc-surface );
		border: 1px solid var( --pc-border );
		border-radius: var( --pc-radius );
		padding: 1.5rem;
		box-shadow: var( --pc-shadow-sm );
		position: sticky;
		top: 1rem;
	}

	/* WC wraps the totals table in a .cart_totals div with no padding by default;
	   give it a hair of side breathing room so labels don't kiss the box edge. */
	.petland-cart-totals .cart_totals,
	.petland-cart-totals > * { min-width: 0; }

	/* Heading — matches the .tp-section__header design language used
	   site-wide on the pet single page (icon on left + bold slate title +
	   dashed-line separator). The icon comes from Bootstrap Icons via the
	   already-loaded bootstrap-icons font — no extra asset. */
	.petland-cart-totals h2 {
		display: flex !important;
		align-items: center;
		gap: .55rem;
		font-size: 1.05rem !important;
		font-weight: 700 !important;
		color: var( --pc-ink ) !important;
		letter-spacing: -.01em;
		margin: 0 0 1rem !important;
		padding: 0 0 .85rem !important;
		border-bottom: 1px dashed var( --pc-border ) !important;
		text-transform: none !important;
	}

	.petland-cart-totals h2::before {
		content: '\F23A'; /* bi-cart-check */
		font-family: 'bootstrap-icons';
		font-size: 1.1rem;
		color: var( --pc-primary );
		flex-shrink: 0;
		line-height: 1;
	}

	/* Table — flat layout, every row is a flexbox row with generous side
	   padding so labels never sit flush against the box edge regardless of
	   how WC wraps the table internally. */
	.petland-cart-totals .shop_table,
	.petland-cart-totals table {
		width: 100% !important;
		margin: 0 !important;
		border-collapse: separate !important;
		border-spacing: 0 !important;
		background: transparent !important;
	}

	.petland-cart-totals .shop_table tr,
	.petland-cart-totals table tr {
		display: flex !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		gap: 1rem !important;
		padding: 0 .9rem !important;
		background: transparent !important;
	}

	.petland-cart-totals .shop_table th,
	.petland-cart-totals .shop_table td,
	.petland-cart-totals table th,
	.petland-cart-totals table td {
		padding: .7rem 0 !important;
		border: 0 !important;
		font-size: .92rem !important;
		vertical-align: baseline !important;
		line-height: 1.4 !important;
		background: transparent !important;
	}

	.petland-cart-totals .shop_table tr:not( :last-child ),
	.petland-cart-totals table tr:not( :last-child ) {
		border-bottom: 1px dashed var( --pc-border ) !important;
	}

	.petland-cart-totals .shop_table th,
	.petland-cart-totals table th {
		color: var( --pc-ink-soft ) !important;
		font-weight: 500 !important;
		text-align: left !important;
	}

	.petland-cart-totals .shop_table td,
	.petland-cart-totals table td {
		color: var( --pc-ink ) !important;
		text-align: right !important;
		font-weight: 600 !important;
		white-space: nowrap !important;
	}

	/* Order total — soft brand-tinted band, bigger type, brand-red amount. */
	.petland-cart-totals tr.order-total {
		margin-top: .65rem !important;
		padding: 0 1rem !important;
		background: var( --pc-primary-soft ) !important;
		border-radius: var( --pc-radius-sm ) !important;
		border-bottom: 0 !important;
		border-top: 0 !important;
	}

	.petland-cart-totals tr.order-total th,
	.petland-cart-totals tr.order-total td {
		padding: .9rem 0 !important;
		font-size: 1.15rem !important;
		font-weight: 800 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	.petland-cart-totals tr.order-total th {
		color: var( --pc-ink ) !important;
	}

	.petland-cart-totals tr.order-total td {
		color: var( --pc-primary ) !important;
	}

	/* Inline price markup — let nested WC price spans inherit, including
	   the strong tag WC wraps the order total in. */
	.petland-cart-totals .woocommerce-Price-amount,
	.petland-cart-totals .woocommerce-Price-currencySymbol,
	.petland-cart-totals tr.order-total strong,
	.petland-cart-totals tr.order-total bdi {
		color: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
	}

	/* Tiny WC-rendered hints (tax suffixes, includes_tax) */
	.petland-cart-totals small,
	.petland-cart-totals .tax-rate,
	.petland-cart-totals .includes_tax {
		font-size: .72rem;
		font-weight: 400;
		color: var( --pc-ink-faint );
		display: block;
		margin-top: .15rem;
	}

	.petland-cart-totals .wc-proceed-to-checkout {
		margin-top: 1.25rem;
		padding: 0;
	}

	.petland-cart-totals .checkout-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		width: 100%;
		padding: .95rem 1.25rem;
		font-size: 1rem;
		font-weight: 700;
		border-radius: 999px;
		background: linear-gradient( 135deg, var( --pc-primary ) 0%, #b91c2e 100%);
		color: #fff;
		text-decoration: none;
		border: 0;
		cursor: pointer;
		box-shadow: 0 4px 14px rgba( 220, 53, 69, .3 );
		transition: transform 180ms ease, box-shadow 180ms ease;
	}
	.petland-cart-totals .checkout-button:hover {
		transform: translateY( -1px );
		box-shadow: 0 6px 20px rgba( 220, 53, 69, .42 );
		color: #fff;
	}

	/* Empty cart illustration */
	.petland-cart-empty {
		text-align: center;
		padding: 3rem 1.5rem;
		background: var( --pc-sunken );
		border: 1px dashed var( --pc-border );
		border-radius: var( --pc-radius );
		color: var( --pc-ink-soft );
	}

	/* ---------- Mobile ---------- */

	@media (max-width: 768px) {
		.petland-cart-item {
			grid-template-columns: 72px 1fr;
			gap: .75rem;
			padding: .85rem;
		}
		.petland-cart-item-img { width: 72px; height: 72px; }
		.petland-cart-item-right {
			grid-column: 1 / -1;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: .5rem;
			border-top: 1px dashed var( --pc-border );
			margin-top: .25rem;
		}
		.petland-cart-totals {
			position: static;
			margin-top: 1.5rem;
		}
	}

/* =====================================================================
 * Cart page header — polish the "Cart" title emitted by
 * partials/content-woo.php. Scoped to body.woocommerce-cart so no other
 * page template is affected.
 *
 * Prior regression: commit c0bb190 extracted inline cart styles to this
 * file but the page-level <h1 class="page-title">Cart</h1> lives
 * *outside* the .petland-cart wrapper, so it had no padding-top above it
 * and was kissing the fixed header. Rules below give it proper editorial
 * treatment (orange accent rule, 800 weight, clamp sizing) matching the
 * blog masthead and page-hero fallback from /css/blog.css + /css/pages.css.
 * =================================================================== */
body.woocommerce-cart main#content,
body.woocommerce-cart main.site-main,
body.woocommerce-cart > #content {
	padding-top: 1.5rem;
}

body.woocommerce-cart .container > .page-title {
	position: relative;
	padding-top: 1.25rem;
	padding-bottom: 0.25rem;
	margin: 0 0 1.5rem !important;
	font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #111 !important;
	line-height: 1.15;
	display: inline-block;
	max-width: 100%;
}

body.woocommerce-cart .container > .page-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, #F26322 0%, #d14d16 100%);
	border-radius: 2px;
}

@media (max-width: 767.98px) {
	body.woocommerce-cart main#content,
	body.woocommerce-cart main.site-main,
	body.woocommerce-cart > #content {
		padding-top: 1rem;
	}

	body.woocommerce-cart .container > .page-title {
		font-size: 1.5rem !important;
	}
}