/**
 * E-POTION — Cart Page Styles
 *
 * Loaded only on cart page (enqueued conditionally via is_cart() in cart-page.php).
 * Uses design tokens from /assets/design-tokens.css (already loaded globally).
 *
 * Layout strategy:
 *   - Desktop: 2-column grid (items 1fr / sidebar 300px), sidebar sticky
 *   - Mobile (<768px): single column stack, sidebar unsticky, sticky bottom bar appears
 *   - Cart items area: ALWAYS reserves space for 3 products
 *       - 1-3 products: container fills naturally; remaining space stays empty
 *       - 4+ products: container is exact 3-product height with overflow-y: auto scroll
 *
 * Cache notes:
 *   - No browser-storage usage. Page-cache exclusion is handled by WC's
 *     WC_NOCACHE cookie automatically.
 *   - filemtime in enqueue busts CDN caches on every CSS change.
 *
 * @package Shoptimizer_Child
 * @version 1.0.0
 */

/* ==========================================================================
   0. Cart-page-wide neutralizers
   Override Shoptimizer / WC defaults that conflict with our layout.
   ========================================================================== */

.woocommerce-cart .entry-content {
	background: transparent;
}

.woocommerce-cart .woocommerce {
	max-width: var(--ep-container-max, 1200px);
	margin: 0 auto;
}

/* Hide default WC table-cart fallback (in case Shoptimizer renders it). */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper + .shop_table.cart,
.woocommerce-cart .woocommerce > .cart_totals {
	display: none;
}

/* Hide the visible "Update cart" submit button — kept in DOM for no-JS fallback. */
.ep-cart-update-hidden {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   1. Page wrapper + header
   ========================================================================== */

.ep-cart-page {
	font-family: var(--ep-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	color: var(--ep-text-primary);
	max-width: var(--ep-container-max, 1200px);
	margin: 0 auto;
	padding: 0 var(--ep-space-md, 16px);
}

.ep-cart-page__header {
	margin-bottom: 22px;
}

.ep-cart-page__breadcrumbs {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--ep-text-muted);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ep-cart-page__step-divider {
	color: var(--ep-text-disabled);
	margin: 0 6px;
}

.ep-cart-page__step--active {
	color: var(--ep-text-primary);
}

.ep-cart-page__title-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.ep-cart-page__title {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.4px;
	margin: 0;
	line-height: 1.15;
	color: var(--ep-text-primary);
}

.ep-cart-page__count {
	font-size: 14px;
	color: var(--ep-text-muted);
	font-weight: 500;
}

/* ==========================================================================
   2. Outer grouped block (cart items + order bump | summary)
      + Side row below (voucher | points horizontal)
   ========================================================================== */

.ep-cart-outer-block {
	max-width: 1050px;
	margin: 0 auto 10px;
}

.ep-cart-outer-block__grid {
	display: grid;
	grid-template-columns: 580px 460px;
	gap: 10px;
	align-items: stretch;
}

.ep-cart-page__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ep-cart-page__sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Side row holding voucher + points horizontally below the outer block. */
.ep-cart-side-row {
	display: grid;
	grid-template-columns: 580px 460px;
	gap: 10px;
	max-width: 1050px;
	margin: 0 auto 10px;
}

/* Legacy alias — anything that still references .ep-cart-page__grid keeps working. */
.ep-cart-page__grid {
	display: contents;
}

/* ==========================================================================
   3. Free shipping bar (top of cart)
   ========================================================================== */

.ep-shipping-bar {
	background: var(--ep-accent-soft);
	border: 1px solid #ffe2cf;
	border-radius: 10px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	color: var(--ep-accent-dark);
}

.ep-shipping-bar--achieved {
	background: var(--ep-success-soft);
	border-color: rgba(16, 185, 129, 0.2);
	color: var(--ep-success-dark);
}

.ep-shipping-bar__icon {
	display: flex;
	flex-shrink: 0;
}

.ep-shipping-bar__icon svg {
	width: 22px;
	height: 22px;
}

.ep-shipping-bar__content {
	flex: 1;
	min-width: 0;
}

.ep-shipping-bar__text {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.ep-shipping-bar__amount {
	font-weight: 700;
}

.ep-shipping-bar__track {
	height: 5px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	margin-top: 6px;
	overflow: hidden;
}

.ep-shipping-bar__fill {
	height: 100%;
	background: var(--ep-accent);
	border-radius: 3px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-shipping-bar__percent {
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	min-width: 32px;
	text-align: right;
}

/* ==========================================================================
   4. Cart items — FIXED HEIGHT FOR 3 PRODUCTS, scroll for 4+
   ========================================================================== */

.ep-cart-items {
	/*
	 * Per-item height tokens (computed empirically from the 78px item layout):
	 *   - thumb 56px + 16px top + 16px bottom padding ≈ 88px
	 *   - dividers: 1px between items
	 * Container padding: 4px top + 4px bottom inside .ep-cart-items__inner
	 *
	 * Reserved height = (item × 3) + dividers (2 × 1px) + inner padding (8px)
	 *                 = 88 × 3 + 2 + 8 = 274px
	 *
	 * Adjust --ep-cart-item-h to tune.
	 */
	--ep-cart-item-h: 92px;
	--ep-cart-items-visible: 3;
	--ep-cart-items-inner-pad: 8px;
	--ep-cart-items-reserved-h: calc(
		(var(--ep-cart-item-h) * var(--ep-cart-items-visible))
		+ var(--ep-cart-items-inner-pad)
	);

	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-subtle);
	border-radius: 12px;
	padding: 0 18px;
	position: relative;

	/* Always at least 3 products tall — even with 1 product. */
	min-height: var(--ep-cart-items-reserved-h);
}

/* When item count > visible threshold → enable scrolling inside the same area. */
.ep-cart-items--scroll .ep-cart-items__inner {
	max-height: var(--ep-cart-items-reserved-h);
	overflow-y: auto;
	overflow-x: hidden;

	/* Custom scrollbar (Firefox) */
	scrollbar-width: thin;
	scrollbar-color: var(--ep-border-default) transparent;
}

/* Custom scrollbar (WebKit) */
.ep-cart-items--scroll .ep-cart-items__inner::-webkit-scrollbar {
	width: 6px;
}

.ep-cart-items--scroll .ep-cart-items__inner::-webkit-scrollbar-track {
	background: transparent;
}

.ep-cart-items--scroll .ep-cart-items__inner::-webkit-scrollbar-thumb {
	background: var(--ep-border-default);
	border-radius: 3px;
}

.ep-cart-items--scroll .ep-cart-items__inner::-webkit-scrollbar-thumb:hover {
	background: var(--ep-text-muted);
}

/* Bottom gradient fade hint — shows there's more content below when scroll active. */
.ep-cart-items--scroll::after {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 19px;
	right: 19px;
	height: 28px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--ep-bg-page) 90%);
	pointer-events: none;
	border-radius: 0 0 11px 11px;
}

/* When user has scrolled to the bottom, hide the fade (JS adds this class). */
.ep-cart-items--scrolled-bottom::after {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Individual cart item row */
.ep-cart-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ep-border-subtle);
	align-items: center;
}

.ep-cart-item:last-child {
	border-bottom: 0;
}

.ep-cart-item__thumb {
	width: 56px;
	height: 56px;
	background: var(--ep-bg-muted);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}

.ep-cart-item__thumb a,
.ep-cart-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
}

.ep-cart-item__thumb img {
	object-fit: cover;
}

.ep-cart-item__sale-badge {
	position: absolute;
	top: -6px;
	left: -6px;
	background: var(--ep-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 4px;
	line-height: 1;
	letter-spacing: 0.4px;
	z-index: 2;
}

.ep-cart-item__info {
	min-width: 0;
}

.ep-cart-item__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ep-text-primary);
	line-height: 1.35;
	margin: 0 0 6px;
}

.ep-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.ep-cart-item__name a:hover {
	color: var(--ep-accent-dark);
}

.ep-cart-item__qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Override WC's quantity input wrapper to match design */
.ep-cart-item__qty .quantity,
.ep-cart-item__qty .qib-container {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ep-border-default);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	height: 28px;
}

.ep-cart-item__qty input[type='number'],
.ep-cart-item__qty input.qty {
	border: 0;
	background: transparent;
	width: 38px;
	min-width: 38px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ep-text-primary);
	-moz-appearance: textfield;
	height: 100%;
	padding: 0;
}

.ep-cart-item__qty input[type='number']::-webkit-inner-spin-button,
.ep-cart-item__qty input[type='number']::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Quantity +/- buttons — injected by cart-page.js around the WC qty input.
   The .qib-container wrapper already has display:flex + align-items:stretch
   so buttons naturally fill the container height. Flex on the button itself
   centres the symbol vertically and horizontally within that stretched height. */
.ep-cart-item__qty .qib-button {
	background: transparent;
	border: 0;
	width: 28px;
	color: var(--ep-text-muted);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color 0.15s ease, background 0.15s ease;
}

.ep-cart-item__qty .qib-button:hover {
	color: var(--ep-text-primary);
	background: var(--ep-bg-muted);
}

.ep-cart-item__qty .qib-button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

@media (max-width: 767px) {
	.ep-cart-item__qty .quantity,
	.ep-cart-item__qty .qib-container {
		height: 38px;
	}
	.ep-cart-item__qty .qib-button {
		width: 36px;
		font-size: 18px;
	}
}

.ep-cart-item__remove {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ep-text-disabled);
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}

.ep-cart-item__remove:hover {
	color: var(--ep-danger, #ef4444);
}

.ep-cart-item__totals {
	text-align: right;
	min-width: 80px;
}

.ep-cart-item__line-total {
	font-size: 14px;
	font-weight: 700;
	color: var(--ep-text-primary);
	white-space: nowrap;
}

.ep-cart-item__line-total .woocommerce-Price-amount {
	font-weight: 700;
}

.ep-cart-item__unit-price {
	font-size: 11px;
	color: var(--ep-text-disabled);
	margin-top: 2px;
	white-space: nowrap;
}

/* ==========================================================================
   5. Order bump wrapper (CommerceKit shortcode)
   ========================================================================== */

.ep-orderbump {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-subtle);
	border-radius: 12px;
	padding: 14px 18px;
}

.ep-orderbump > * {
	margin: 0;
}

/* CommerceKit's own headings — neutralize to match design */
.ep-orderbump h2,
.ep-orderbump h3,
.ep-orderbump .commercekit-orderbump-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ep-text-primary);
	margin: 0 0 10px;
	letter-spacing: -0.1px;
}

/* ==========================================================================
   6. Voucher form
   ========================================================================== */

.ep-voucher {
	background: var(--ep-bg-surface);
	border: 1px solid var(--ep-border-subtle);
	border-radius: 12px;
	padding: 14px 18px;
}

.ep-voucher__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.ep-voucher__header svg {
	width: 20px;
	height: 20px;
	color: var(--ep-text-primary);
	flex-shrink: 0;
}

.ep-voucher__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ep-text-primary);
	line-height: 1.2;
}

.ep-voucher__hint {
	font-size: 11px;
	color: var(--ep-text-muted);
	margin-top: 2px;
	line-height: 1.3;
}

.ep-voucher__form {
	display: flex;
	gap: 8px;
}

.ep-voucher__input {
	flex: 1;
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	color: var(--ep-text-primary);
	outline: none;
	min-width: 0;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.ep-voucher__input:focus {
	border-color: var(--ep-text-primary);
}

.ep-voucher__button {
	background: var(--ep-bg-dark);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	padding: 0 18px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.ep-voucher__button:hover {
	background: #1c1f25;
}

/* ==========================================================================
   7. Points box (logged-in)
   ========================================================================== */

.ep-points {
	background: var(--ep-accent-soft);
	border: 1px solid #ffe2cf;
	border-radius: 12px;
	padding: 14px 18px;
	position: relative;
}

.ep-points__badge {
	position: absolute;
	top: -9px;
	right: 14px;
	background: var(--ep-bg-page);
	border: 1px solid #ffe2cf;
	color: var(--ep-accent-dark);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
	letter-spacing: 0.4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ep-points__badge svg {
	width: 11px;
	height: 11px;
}

.ep-points__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ep-points__left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ep-points__left > svg {
	width: 20px;
	height: 20px;
	color: var(--ep-accent-dark);
	flex-shrink: 0;
}

.ep-points__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ep-accent-dark);
	line-height: 1.2;
}

.ep-points__hint {
	font-size: 11px;
	color: var(--ep-text-secondary);
	margin-top: 2px;
	line-height: 1.3;
}

.ep-points__balance {
	text-align: right;
	flex-shrink: 0;
}

.ep-points__balance-label {
	font-size: 10px;
	color: var(--ep-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.ep-points__balance-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--ep-accent-dark);
	line-height: 1.1;
	margin-top: 1px;
}

/* Wrapper for the embedded WooRewards [wr_points_on_cart] shortcode.
   The plugin renders its own balance + redemption UI inside this div.
   We add separation and constrain its width to the card so it fits cleanly
   regardless of the plugin's default styling. */
.ep-points__woorewards {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ep-border-subtle);
	font-size: 13px;
	color: var(--ep-text-primary);
}

.ep-points__woorewards > *:first-child {
	margin-top: 0;
}

.ep-points__woorewards > *:last-child {
	margin-bottom: 0;
}

/* Some WooRewards templates wrap themselves in tables or list-style elements
   with their own padding; flatten conflicts. */
.ep-points__woorewards table,
.ep-points__woorewards ul,
.ep-points__woorewards form {
	width: 100%;
	margin: 0;
}

/* Guest login prompt */
.ep-points-prompt {
	background: var(--ep-accent-soft);
	border: 1px dashed #ffd4b3;
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 11px;
}

.ep-points-prompt svg {
	width: 20px;
	height: 20px;
	color: var(--ep-accent-dark);
	flex-shrink: 0;
}

.ep-points-prompt__content {
	flex: 1;
	min-width: 0;
}

.ep-points-prompt__title {
	font-size: 12px;
	font-weight: 600;
	color: var(--ep-accent-dark);
	line-height: 1.3;
}

.ep-points-prompt__hint {
	font-size: 11px;
	color: var(--ep-text-secondary);
	margin-top: 2px;
	line-height: 1.3;
}

.ep-points-prompt__button {
	background: transparent;
	border: 1.5px solid var(--ep-accent-dark);
	color: var(--ep-accent-dark);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ep-points-prompt__button:hover {
	background: var(--ep-accent-dark);
	color: #fff;
}

/* ==========================================================================
   8. Summary card (right sidebar)
   ========================================================================== */

/* Force WC's .cart-collaterals wrapper to fill our grid column AND flex-stretch
   to match the left column's height. Shoptimizer applies width:30% + float by
   default which would collapse the card; the flex declarations make the summary
   card vertically fill the row so the left and right columns are symmetric. */
.ep-cart-page__sidebar .cart-collaterals,
.ep-cart-page__sidebar .cart_totals {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

/* MIRROR RESET for the left column form. Shoptimizer applies
   width:65% + float:left to .woocommerce-cart-form by default,
   which would collapse our 580px items column to ~377px.
   This forces the form to fill its full 580px grid track. */
.ep-cart-outer-block__grid > .woocommerce-cart-form,
.ep-cart-page__main.woocommerce-cart-form {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ep-cart-page__sidebar .ep-summary {
	width: 100%;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* "Sumar produse" overline at top of cart items card */
.ep-cart-items__label {
	font-size: 10px;
	font-weight: 600;
	color: var(--ep-text-disabled);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 10px 0 6px;
	margin: 0;
}

/* Empty-space hint inside cart items card when fewer than 3 products.
   The 3-product reserved area keeps layout stable; this placeholder fills
   the remaining vertical space with a soft visual cue. */
.ep-cart-items__placeholder {
	flex: 1;
	border-top: 1px dashed var(--ep-border-subtle);
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ep-text-disabled);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-align: center;
	padding: 0 12px;
}

/* The inner items wrapper needs flex-column so the placeholder can push to fill */
.ep-cart-items__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Tighten cart items card padding (was 0 18px) to fit overline + items + placeholder */
.ep-cart-items {
	padding: 4px 18px 8px;
}

/* Push payment icons row to the bottom of the summary card via auto top margin
   in the summary flex container. Combined with .ep-summary having flex:1 this
   means the payment row always sticks to the bottom regardless of summary height. */
.ep-summary__payments {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--ep-border-subtle);
}

.ep-summary__payments-label {
	font-size: 10px;
	color: var(--ep-text-disabled);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 8px;
	text-align: center;
}

.ep-summary__payments-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
}

/* Payment icons — VISA / Mastercard / Apple Pay / Google Pay. Built with CSS
   + inline SVG. Sized to read clearly at ~40×22. */
.ep-pay-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 22px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	flex-shrink: 0;
}

.ep-pay-icon--visa {
	background: #1a1f71;
	color: #fff;
}

.ep-pay-icon--mc {
	background: #fff;
	border: 1px solid var(--ep-border-default);
	gap: 0;
}

.ep-pay-icon__mc-red {
	width: 11px;
	height: 11px;
	background: #eb001b;
	border-radius: 50%;
	display: inline-block;
	margin-right: -3px;
}

.ep-pay-icon__mc-yellow {
	width: 11px;
	height: 11px;
	background: #f79e1b;
	border-radius: 50%;
	display: inline-block;
	opacity: 0.85;
}

/* Apple Pay: black pill with white logo + "Pay" label.
   Logo bumped from 9px → 11px and a 1px subtle border added so it
   reads cleanly against the white summary card background. */
.ep-pay-icon--apple {
	background: #000;
	color: #fff;
	border: 1px solid #000;
	gap: 2px;
	padding: 0 3px;
}

.ep-pay-icon--apple svg {
	width: 11px;
	height: 11px;
	display: block;
}

.ep-pay-icon--apple span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}

/* Google Pay: white pill with multicolor G + "Pay" label.
   Matches the Google Pay merchant brand guidelines. */
.ep-pay-icon--gpay {
	background: #fff;
	border: 1px solid var(--ep-border-default);
	color: #3c4043;
	gap: 2px;
	padding: 0 3px;
}

.ep-pay-icon--gpay svg {
	width: 12px;
	height: 12px;
	display: block;
}

.ep-pay-icon--gpay span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	color: #3c4043;
}

.ep-summary {
	background: var(--ep-bg-page);
	border: 1.5px solid var(--ep-border-strong);
	border-radius: 12px;
	padding: 18px;
}

.ep-summary__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--ep-text-muted);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.ep-summary__address {
	background: var(--ep-bg-surface);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 14px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.ep-summary__address > svg {
	width: 14px;
	height: 14px;
	color: var(--ep-text-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.ep-summary__address-text {
	flex: 1;
	min-width: 0;
}

.ep-summary__address-label {
	font-size: 10px;
	color: var(--ep-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.ep-summary__address-value {
	font-size: 13px;
	color: var(--ep-text-primary);
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1px;
}

.ep-summary__address-edit {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ep-text-primary);
	text-decoration: underline;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	align-self: center;
}

.ep-summary__address-edit:hover {
	color: var(--ep-accent-dark);
}

.ep-summary__lines {
	margin: 0 0 8px;
}

.ep-summary__line {
	font-size: 13px;
	color: var(--ep-text-secondary);
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	align-items: flex-start;
	line-height: 1.4;
}

.ep-summary__line > span:last-child {
	color: var(--ep-text-primary);
	font-weight: 600;
	text-align: right;
}

.ep-summary__line--coupon > span:last-child {
	color: var(--ep-success-dark);
}

.ep-summary__shipping-tbd {
	color: var(--ep-text-disabled);
	font-style: normal;
	font-size: 12px;
	font-weight: 500;
}

/* WC's shipping calculator inside our summary — neutralize default styling */
.ep-summary .shipping-calculator-button {
	color: var(--ep-text-primary);
	font-size: 11px;
	font-weight: 600;
	text-decoration: underline;
}

.ep-summary .shipping-calculator-form {
	margin-top: 8px;
	padding: 10px;
	background: var(--ep-bg-surface);
	border-radius: 8px;
}

.ep-summary .shipping-calculator-form .button {
	background: var(--ep-bg-dark);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
}

.ep-summary__savings {
	background: var(--ep-success-soft);
	border-radius: 8px;
	padding: 8px 11px;
	margin: 10px 0;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--ep-success-dark);
	font-weight: 600;
	line-height: 1.3;
}

.ep-summary__savings svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.ep-summary__divider {
	border-top: 1px solid var(--ep-border-subtle);
	margin: 10px 0;
}

.ep-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
}

.ep-summary__total-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ep-text-primary);
}

.ep-summary__total-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--ep-text-primary);
	letter-spacing: -0.5px;
}

.ep-summary__checkout {
	width: 100%;
	background: var(--ep-bg-dark);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	padding: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
	text-decoration: none;
	box-sizing: border-box;
	transition: background 0.15s ease;
}

.ep-summary__checkout:hover,
.ep-summary__checkout:focus {
	background: #1c1f25;
	color: #fff;
}

.ep-summary__checkout svg {
	width: 16px;
	height: 16px;
}

.ep-summary__secure {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--ep-text-muted);
	justify-content: center;
	font-weight: 500;
}

.ep-summary__secure svg {
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   9. Google reviews trust block
   ========================================================================== */

.ep-trust-block {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 18px;
}

.ep-trust-block__grid {
	display: grid;
	grid-template-columns: 220px 1px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

.ep-trust-block__stats {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ep-trust-block__logo {
	width: 60px;
	height: 60px;
	display: block;
}

.ep-trust-block__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.1px;
	color: var(--ep-text-primary);
}

.ep-trust-block__rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ep-trust-block__score {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1;
	color: var(--ep-text-primary);
}

.ep-trust-block__stars {
	display: inline-flex;
	gap: 1px;
}

.ep-trust-block__stars svg {
	display: block;
}

.ep-trust-block__count {
	font-size: 13px;
	color: var(--ep-text-muted);
	font-weight: 500;
}

.ep-trust-block__divider {
	width: 1px;
	background: var(--ep-border-subtle);
	align-self: stretch;
	min-height: 100%;
}

.ep-trust-block__reviews {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ep-review {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid var(--ep-border-subtle);
}

.ep-review:first-child {
	padding-top: 0;
}

.ep-review:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ep-review__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

.ep-review__avatar--amber { background: #fde68a; color: #92400e; }
.ep-review__avatar--coral { background: #fed7aa; color: #9a3412; }
.ep-review__avatar--blue  { background: #dbeafe; color: #1e40af; }
.ep-review__avatar--green { background: #d1fae5; color: #065f46; }
.ep-review__avatar--purple { background: #e9d5ff; color: #6b21a8; }

.ep-review__body {
	flex: 1;
	min-width: 0;
}

.ep-review__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 3px;
}

.ep-review__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ep-text-primary);
}

.ep-review__date {
	font-size: 11px;
	color: var(--ep-text-muted);
	font-weight: 500;
	flex-shrink: 0;
}

.ep-review__stars {
	display: flex;
	gap: 1px;
	margin-bottom: 5px;
}

.ep-review__stars svg {
	display: block;
}

.ep-review__text {
	font-size: 13px;
	color: var(--ep-text-primary);
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   10. Trust strip (4 icons)
   ========================================================================== */

.ep-trust-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--ep-border-subtle);
	margin-bottom: 32px;
}

.ep-trust-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

.ep-trust-strip__item svg {
	width: 22px;
	height: 22px;
	color: var(--ep-text-primary);
}

.ep-trust-strip__title {
	font-size: 11px;
	font-weight: 700;
	color: var(--ep-text-primary);
	line-height: 1.3;
}

.ep-trust-strip__subtitle {
	font-size: 11px;
	color: var(--ep-text-muted);
	line-height: 1.3;
}

/* ==========================================================================
   11. Sticky bottom checkout bar (MOBILE ONLY)
   ========================================================================== */

.ep-sticky-cart-bar {
	display: none; /* hidden on desktop, shown via media query below */
}

/* ==========================================================================
   12. Empty cart state
   ========================================================================== */

.ep-cart-empty {
	max-width: 480px;
	margin: 0 auto;
	padding: 60px 20px;
	text-align: center;
	font-family: var(--ep-font-sans);
}

.ep-cart-empty__icon {
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--ep-text-disabled);
}

.ep-cart-empty__icon svg {
	width: 64px;
	height: 64px;
}

.ep-cart-empty__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--ep-text-primary);
	margin: 0 0 8px;
	letter-spacing: -0.3px;
}

.ep-cart-empty__hint {
	font-size: 14px;
	color: var(--ep-text-muted);
	line-height: 1.5;
	margin: 0 0 24px;
}

.ep-cart-empty__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ep-cart-empty__primary,
.ep-cart-empty__secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ep-cart-empty__primary {
	background: var(--ep-bg-dark);
	color: #fff;
}

.ep-cart-empty__primary:hover { background: #1c1f25; color: #fff; }

.ep-cart-empty__primary svg {
	width: 16px;
	height: 16px;
}

.ep-cart-empty__secondary {
	background: transparent;
	color: var(--ep-text-primary);
	border: 1.5px solid var(--ep-border-default);
}

.ep-cart-empty__secondary:hover {
	border-color: var(--ep-text-primary);
	color: var(--ep-text-primary);
}

/* ==========================================================================
   13. Mobile responsive (<768px)
   ========================================================================== */

@media (max-width: 767.98px) {

	.ep-cart-page {
		padding: 0 12px;
	}

	/* Header smaller */
	.ep-cart-page__title {
		font-size: 24px;
	}

	/* Collapse outer block grid + side row to single column on mobile */
	.ep-cart-outer-block {
		padding: 10px;
		border-radius: 12px;
	}

	.ep-cart-outer-block__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ep-cart-side-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Legacy stack rule kept for any callers still using __grid directly */
	.ep-cart-page__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ep-cart-page__sidebar {
		position: static; /* unstick on mobile — sticky bottom bar takes over */
	}

	/* Cart items: keep the same 3-product reserved height rule on mobile too.
	 * The user explicitly asked for consistent sizing across viewports.
	 * Item height shrinks slightly to fit narrower viewport.
	 */
	.ep-cart-items {
		--ep-cart-item-h: 78px;
		padding: 0 14px;
	}

	.ep-cart-item {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		gap: 11px;
		padding: 12px 0;
	}

	.ep-cart-item__thumb {
		width: 48px;
		height: 48px;
	}

	.ep-cart-item__name {
		font-size: 13px;
		margin-bottom: 4px;
	}

	.ep-cart-item__totals {
		min-width: 70px;
	}

	.ep-cart-item__line-total {
		font-size: 13px;
	}

	/* Smaller shipping bar */
	.ep-shipping-bar {
		padding: 10px 14px;
		gap: 10px;
		margin-bottom: 14px;
	}

	.ep-shipping-bar__icon svg {
		width: 18px;
		height: 18px;
	}

	.ep-shipping-bar__text {
		font-size: 12px;
	}

	/* Voucher / points: tighter padding */
	.ep-orderbump,
	.ep-voucher,
	.ep-points,
	.ep-points-prompt {
		padding: 12px 14px;
	}

	/* Summary card: tighter */
	.ep-summary {
		padding: 16px;
	}

	.ep-summary__total-value {
		font-size: 22px;
	}

	/* Trust block: stack stats vertical centered, then reviews */
	.ep-trust-block {
		padding: 18px 14px;
	}

	.ep-trust-block__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ep-trust-block__stats {
		align-items: center;
		text-align: center;
		gap: 10px;
	}

	.ep-trust-block__logo {
		width: 48px;
		height: 48px;
	}

	.ep-trust-block__title {
		font-size: 13px;
	}

	.ep-trust-block__score {
		font-size: 32px;
	}

	.ep-trust-block__count {
		font-size: 12px;
	}

	.ep-trust-block__divider {
		width: 100%;
		height: 1px;
		min-height: 0;
	}

	.ep-review {
		gap: 11px;
		padding: 12px 0;
	}

	.ep-review__avatar {
		width: 34px;
		height: 34px;
		font-size: 12px;
	}

	.ep-review__name {
		font-size: 12px;
	}

	.ep-review__text {
		font-size: 12px;
	}

	/* Trust strip: 2×2 grid */
	.ep-trust-strip {
		grid-template-columns: 1fr 1fr;
		gap: 14px 10px;
		padding: 16px 0 20px;
	}

	.ep-trust-strip__item svg {
		width: 20px;
		height: 20px;
	}

	/* Sticky bottom bar: VISIBLE on mobile */
	.ep-sticky-cart-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: var(--ep-bg-page);
		border-top: 1px solid var(--ep-border-default);
		padding: 11px 14px;
		align-items: center;
		gap: 12px;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
	}

	.ep-sticky-cart-bar__totals {
		flex: 1;
		min-width: 0;
	}

	.ep-sticky-cart-bar__label {
		font-size: 10px;
		color: var(--ep-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-weight: 600;
		line-height: 1.2;
	}

	.ep-sticky-cart-bar__amount {
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.3px;
		line-height: 1.2;
		margin-top: 1px;
		color: var(--ep-text-primary);
	}

	.ep-sticky-cart-bar__button {
		background: var(--ep-bg-dark);
		color: #fff;
		border: 0;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 600;
		padding: 11px 18px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
		text-decoration: none;
	}

	.ep-sticky-cart-bar__button svg {
		width: 15px;
		height: 15px;
	}

	/* Add bottom padding so last content isn't hidden behind sticky bar */
	.ep-cart-page-active.woocommerce-cart .site-content,
	.ep-cart-page-active.woocommerce-cart #content {
		padding-bottom: 76px;
	}

	/* Hide redundant Continue button in summary on mobile — sticky bar takes over.
	 * Keep visible for users with sticky bar collapsed by other plugins. */
	/* .ep-cart-page-active .ep-summary__checkout { display: none; } */
}

/* ==========================================================================
   14. Tablet/narrow desktop (768–1023px) — slim sidebar
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {

	.ep-cart-page__grid {
		grid-template-columns: minmax(0, 1fr) 270px;
		gap: 18px;
	}

	.ep-trust-block__grid {
		grid-template-columns: 180px 1px minmax(0, 1fr);
		gap: 18px;
	}

	.ep-trust-block__score {
		font-size: 34px;
	}
}

/* ==========================================================================
   15. Reduce motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ep-shipping-bar__fill,
	.ep-summary__checkout,
	.ep-points-prompt__button,
	.ep-cart-empty__primary,
	.ep-cart-empty__secondary {
		transition: none;
	}
}
/* ==========================================================================
   16. WooCommerce cart notices (undo-remove message, etc.)

   Override WC / Shoptimizer's default green-bar notice styling on the cart
   page to match e-Potion's design system.

   The "Ai scos X din coș [Anulează?]" notice is a .woocommerce-message
   rendered by WC in the .woocommerce-notices-wrapper at the top of the
   cart content. We restyle it as a compact single-line toast that aligns
   with the ep-* component family.

   Structure WC renders:
     .woocommerce-notices-wrapper
       ul.woocommerce-message / div.woocommerce-message
         li / direct text + a[undo link]
   ========================================================================== */

/* Reset WC's default notice styles in the cart context */
.woocommerce-cart .woocommerce-notices-wrapper {
	margin-bottom: 12px;
}

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-message {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-left: 3px solid #16a34a;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ep-text-primary);
	list-style: none;
	/* Single line — truncate long product names gracefully */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* li inside the ul variant */
.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-message li {
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Anulează?" undo link — styled as an accent text link */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a {
	color: var(--ep-accent-dark, #c94200);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
	padding-left: 10px;
	transition: color 0.15s;
}

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a:hover,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a:focus {
	color: var(--ep-accent, #ff6b1a);
	text-decoration: underline;
}

/* Info notices */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
	background: #eff6ff;
	border-color: #bfdbfe;
	border-left-color: #3b82f6;
	border-radius: 8px;
	font-size: 13px;
	padding: 10px 14px;
}

/* Error notices */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-error {
	background: #fff1f2;
	border-color: #fecdd3;
	border-left: 3px solid #e11d48;
	border-radius: 8px;
	font-size: 13px;
	padding: 10px 14px;
	list-style: none;
}

.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-error li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   17. Minimum order inline notice (.ep-min-order-notice)

   Rendered inside .ep-summary (inside .cart-collaterals) by cart-totals.php.
   Hidden by default via the HTML `hidden` attribute. Shown/hidden exclusively
   by cart-page.js. Never duplicated — single DOM element, updated in place.

   Position: directly above the "Continuă" button in the summary card.
   ========================================================================== */

.ep-min-order-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-left: 3px solid var(--ep-accent-dark, #c94200);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ep-text-primary);
}

/* Hide when HTML hidden attribute is present */
.ep-min-order-notice[hidden] {
	display: none !important;
}

.ep-min-order-notice svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--ep-accent-dark, #c94200);
}

.ep-min-order-notice__text strong {
	font-weight: 700;
}