/* ==========================================================================
   HAPPYPIP — Cart Page
   Items grouped by tier, compact but comfortable rows, sticky sidebar.
   ========================================================================== */

/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */

.hp-cart {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-3xl);
}

.hp-cart__title {
	text-align: center;
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--green-dark);
	margin: 0 0 var(--space-lg);
}

.hp-cart__count {
	font-weight: 400;
	color: var(--text-muted);
}

/* ==========================================================================
   TWO-COLUMN LAYOUT
   ========================================================================== */

.hp-cart__layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--space-xl);
	align-items: start;
}

/* ==========================================================================
   TIER GROUP HEADERS
   ========================================================================== */

.hp-cart__group {
	margin-bottom: var(--space-lg);
}

.hp-cart__group:last-child {
	margin-bottom: 0;
}

.hp-cart__group-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-xs);
	border-bottom: 1px solid var(--border-default);
}

.hp-cart__group-bar {
	width: 4px;
	height: 20px;
	border-radius: 2px;
	flex-shrink: 0;
}

.hp-cart__group-label {
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hp-cart__group-count {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--text-muted);
	margin-left: auto;
}

/* ==========================================================================
   ITEM ROWS — Desktop comfortable, mobile compact
   ========================================================================== */

.hp-cart__items {
	min-width: 0;
}

.hp-cart__row {
	display: grid;
	grid-template-columns: 64px 1fr auto auto 32px;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--border-default);
	min-height: 76px;
	transition: opacity 0.2s ease;
}

.hp-cart__group .hp-cart__row:last-child {
	border-bottom: none;
}

/* ── Thumbnail ── */
.hp-cart__thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--bg-img-placeholder);
	display: block;
}

.hp-cart__thumb a {
	display: block;
	line-height: 0;
}

/* ── Product Info ── */
.hp-cart__info {
	min-width: 0;
}

.hp-cart__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--green-dark);
	text-decoration: none;
	display: block;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-cart__name:hover {
	color: var(--sunset-text);
}

.hp-cart__meta {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--text-muted);
	display: block;
	line-height: 1.4;
	margin-top: 2px;
}

/* Unit price (visible on mobile only) */
.hp-cart__price {
	display: none;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--text-secondary);
	margin-top: 2px;
}

/* ── Savings Badge ── */
.hp-cart__savings {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--text-badge);
	font-weight: 700;
	color: var(--color-success);
	background: #E8F5E9;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	margin-top: 2px;
	letter-spacing: 0.3px;
}

/* ── Quantity Selector (matches quick-shop pill style) ── */
.hp-cart__qty {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--border-default);
	border-radius: var(--radius-full);
	overflow: hidden;
	flex-shrink: 0;
}

.hp-cart__qty-btn,
button.hp-cart__qty-btn,
button.hp-cart__qty-btn:hover,
button.hp-cart__qty-btn:focus,
button.hp-cart__qty-btn:active,
button.hp-cart__qty-btn:visited {
	width: 38px !important;
	height: 42px !important;
	border: none !important;
	background: transparent !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--green-dark) !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease !important;
	user-select: none;
	font-family: inherit;
	padding: 0 !important;
	box-shadow: none !important;
}

button.hp-cart__qty-btn:hover {
	background: var(--bg-page) !important;
	color: var(--green-dark) !important;
}

.hp-cart__qty-val {
	width: 28px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	font-weight: 700;
	color: var(--green-dark) !important;
	padding: 0 !important;
	-moz-appearance: textfield;
}

.hp-cart__qty-val::-webkit-outer-spin-button,
.hp-cart__qty-val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Line Total ── */
.hp-cart__line-total {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--green-dark);
	white-space: nowrap;
	min-width: 70px;
	text-align: right;
}

/* ── Remove Button — sizing + color via hp-close-btn --sm --danger ── */

/* ── Row States ── */
.hp-cart__row--updating {
	opacity: 0.5;
	pointer-events: none;
}

.hp-cart__row--removing {
	animation: hp-cart-row-out 0.3s ease forwards;
}

@keyframes hp-cart-row-out {
	to {
		opacity: 0;
		max-height: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
		border-color: transparent;
	}
}

/* ==========================================================================
   ORDER SUMMARY (Sticky Sidebar)
   ========================================================================== */

.hp-cart__summary {
	align-self: start;
	position: sticky;
	top: var(--space-lg);
}

.hp-cart__summary-inner {
	background: var(--bg-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.hp-cart__summary-title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--green-dark);
	margin: 0 0 var(--space-md);
}

/* ── Free Shipping Bar ── */
.hp-cart__ship-bar {
	background: var(--bg-page);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

.hp-cart__ship-bar .hp-free-ship-bar {
	margin: 0;
}

.hp-cart__ship-bar .hp-free-ship-bar p {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--green-dark);
	text-align: center;
	margin: 0 0 var(--space-xs);
}

.hp-cart__ship-bar .hp-ship-qualified {
	color: var(--color-success) !important;
}

.hp-cart__ship-bar .hp-ship-track {
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: var(--border-default);
	overflow: hidden;
}

.hp-cart__ship-bar .hp-ship-fill {
	height: 100%;
	border-radius: 3px;
	background: var(--gradient-sunset);
	transition: width 0.4s ease;
}

/* ── Summary Rows ── */
.hp-cart__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-sm) 0;
	font-family: var(--font-body);
	font-size: var(--text-sub);
	color: var(--text-secondary);
}

/* Points earning message */
/* Points discount row in summary */
.hp-cart__summary-row--points {
	color: var(--color-success);
}

.hp-cart__rewards-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 700;
	color: var(--green-dark);
	letter-spacing: 0.5px;
}

.hp-cart__rewards-logo {
	height: 16px;
	width: auto;
}

.hp-cart__points-discount {
	font-weight: 700;
	color: var(--color-success);
}

.hp-cart__points-earn {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background: rgba(88, 173, 114, 0.08);
	border-radius: var(--radius-sm);
	margin-top: var(--space-sm);
}

.hp-cart__points-earn .hp-ico {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hp-cart__points-earn span {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--green-mid);
}

.hp-cart__points-earn strong {
	color: var(--green-dark);
}

.hp-cart__summary-row--total {
	border-top: 2px solid var(--border-default);
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--green-dark);
}

/* ── Total Savings ── */
.hp-cart__total-savings {
	text-align: left;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-success);
	margin-top: var(--space-xs);
}

/* ── Coupon ── */
.hp-cart__coupon {
	padding: var(--space-md) 0;
	border-top: 1px solid var(--border-default);
}

.hp-cart__coupon-note {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	color: var(--text-muted);
}
.hp-cart__coupon-note .hp-ico {
	width: 16px;
	height: 16px;
}

.hp-cart__coupon-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	font-weight: 600;
	color: var(--sunset-text);
	cursor: pointer;
	transition: color 0.2s ease;
}

.hp-cart__coupon-toggle:hover {
	color: var(--sunset-deep);
}

.hp-cart__coupon-toggle .hp-ico {
	width: 16px;
	height: 16px;
}

.hp-cart__coupon-form {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.hp-cart__coupon-input {
	flex: 1;
	padding: 10px 14px !important;
	background: var(--bg-input) !important;
	border: 1.5px solid var(--border-input) !important;
	border-radius: var(--radius-full) !important;
	font-family: var(--font-heading) !important;
	font-size: var(--text-sub) !important;
	color: var(--green-dark) !important;
}

.hp-cart__coupon-input:focus {
	border-color: var(--sunset-mid) !important;
	box-shadow: 0 0 0 3px rgba(236, 169, 110, 0.12) !important;
	outline: none !important;
}

.hp-cart__coupon-apply {
	padding: 10px 20px !important;
	font-size: var(--text-sub) !important;
	white-space: nowrap;
}

.hp-cart__coupon-error {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: #CC4B4B;
	margin-top: var(--space-xs);
}

.hp-cart__coupons-applied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
}

.hp-cart__coupon-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--bg-input);
	border-radius: var(--radius-full);
	padding: 4px 12px;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--green-dark);
}

.hp-cart__coupon-discount {
	color: var(--color-success);
	font-weight: 700;
}

.hp-cart__coupon-remove {
	width: 18px;
	height: 18px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--radius-full);
	transition: color 0.2s ease;
}

.hp-cart__coupon-remove:hover {
	color: #CC4B4B;
}

/* ── Checkout Button ── */
.hp-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: 100%;
	padding: 16px;
	background: var(--gradient-sunset);
	border-radius: var(--radius-full);
	border: none;
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-button);
	transition: all 0.3s ease;
	margin-top: var(--space-md);
}

.hp-cart__checkout:hover {
	background: var(--gradient-sunset-hover);
	box-shadow: var(--shadow-button-hover);
	transform: translateY(-1px);
	color: #fff;
}

.hp-cart__checkout .hp-ico {
	width: 18px;
	height: 18px;
	filter: brightness(0) invert(1);
}

/* ── Hide MyRewards widget from cart (points applied at checkout only) ── */
.hp-cart__points .lws-wr-pointsoncart { display: none !important; }

/* ── Trust Signals ── */
.hp-cart__trust {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-default);
}

.hp-cart__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--text-secondary);
}

.hp-cart__trust-item .hp-ico {
	width: 16px;
	height: 16px;
	opacity: 0.7;
}

/* ==========================================================================
   STAFF PICKS — Impulse Purchase Section
   ========================================================================== */

.hp-cart__picks {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--border-default);
}

.hp-cart__picks-header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.hp-cart__picks-glyph {
	display: block;
	font-size: 18px;
	color: var(--sunset-mid);
	margin-bottom: var(--space-xs);
}

.hp-cart__picks-header h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--green-dark);
	margin: 0 0 var(--space-xs);
}

.hp-cart__picks-header p {
	font-family: var(--font-body);
	font-size: var(--text-sub);
	color: var(--text-muted);
	margin: 0;
}

.hp-cart__picks-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

/* ==========================================================================
   EMPTY CART
   ========================================================================== */

.hp-cart--empty {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hp-cart--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-2xl) var(--space-lg);
}

.hp-cart__empty {
	text-align: center;
	max-width: 500px;
}

.hp-cart__empty .hp-ico {
	width: 48px;
	height: 48px;
	opacity: 0.4;
	margin-bottom: var(--space-md);
}

.hp-cart__empty h2 {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	color: var(--green-dark);
	margin: 0 0 var(--space-sm);
}

.hp-cart__empty p {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-muted);
	margin: 0 0 var(--space-lg);
}

.hp-cart__empty-btns {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.hp-cart__empty-quiz {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border-default);
}

.hp-cart__empty-quiz a {
	font-family: var(--font-heading);
	font-size: var(--text-sub);
	font-weight: 600;
	color: var(--sunset-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hp-cart__empty-quiz a:hover {
	color: var(--sunset-deep);
}

/* Recently Viewed — Empty Cart */
.hp-cart__empty-recent {
	max-width: 600px;
	margin: var(--space-2xl) auto 0;
	text-align: center;
}

.hp-cart__empty-recent h3 {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--green-dark);
	margin: 0 0 var(--space-lg);
}

.hp-cart__empty-recent-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.hp-cart__empty-recent-item {
	text-decoration: none;
	text-align: center;
	transition: transform 0.2s ease;
}

.hp-cart__empty-recent-item:hover {
	transform: translateY(-2px);
}

.hp-cart__empty-recent-img {
	aspect-ratio: 1;
	background: var(--bg-img-placeholder);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-sm);
}

.hp-cart__empty-recent-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-cart__empty-recent-name {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-cart__empty-recent-price {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: 700;
	color: var(--price-color);
}

@media (max-width: 540px) {
	.hp-cart__empty-btns {
		flex-direction: column;
		align-items: center;
	}

	.hp-cart__empty-recent-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   ASTRA + WOOCOMMERCE OVERRIDES
   ========================================================================== */

/* Hide Astra page title */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.woocommerce-cart .entry-header {
	display: none !important;
}

/* Hide default WC cart table and collaterals */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper + form > table.shop_table,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .woocommerce-cart-form > .shop_table {
	display: none !important;
}

/* Full width container */
.woocommerce-cart .site-content .ast-container {
	max-width: 100% !important;
}

/* ==========================================================================
   RESPONSIVE — Tablet
   ========================================================================== */

@media (max-width: 900px) {
	.hp-cart__layout {
		grid-template-columns: 1fr 300px;
		gap: var(--space-md);
	}

	.hp-cart__picks-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   RESPONSIVE — Mobile
   ========================================================================== */

@media (max-width: 768px) {

	.hp-cart {
		padding: var(--space-lg) var(--space-sm) var(--space-2xl);
	}

	.hp-cart__title {
		margin-bottom: var(--space-md);
	}

	.hp-cart__layout {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.hp-cart__summary {
		position: static;
	}

	/* Compact mobile rows */
	.hp-cart__row {
		grid-template-columns: 48px 1fr auto 28px;
		gap: var(--space-xs) var(--space-sm);
		padding: var(--space-sm) 0;
		min-height: 56px;
	}

	.hp-cart__thumb img {
		width: 48px;
		height: 48px;
	}

	/* Show unit price, hide line total on mobile */
	.hp-cart__price {
		display: block;
	}

	.hp-cart__line-total {
		display: none;
	}

	.hp-cart__qty {
		justify-self: end;
	}

	.hp-cart__qty-btn {
		width: 34px;
		height: 38px;
		font-size: 15px;
	}

	.hp-cart__qty-val {
		width: 24px;
		font-size: var(--text-small);
	}

	.hp-cart__name {
		font-size: var(--text-sub);
	}

	/* .hp-cart__remove — sizing handled by hp-close-btn --sm */

	/* Tier group headers */
	.hp-cart__group-label {
		font-size: var(--text-small);
	}

	/* Staff picks 2-col on mobile */
	.hp-cart__picks-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	/* Trust signals horizontal on mobile */
	.hp-cart__trust {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-sm) var(--space-md);
	}
}

@media (max-width: 400px) {
	.hp-cart__row {
		grid-template-columns: 40px 1fr auto 24px;
	}

	.hp-cart__thumb img {
		width: 40px;
		height: 40px;
	}
}