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

.cart-page {
	padding-top:    50px;
	padding-bottom: 100px;
}

.cart-page__heading {
	margin-bottom: 32px;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.cart-page__empty-msg {
	color: var(--color-text-secondary);
}

/* =============================================================================
   LAYOUT: lines + summary side by side
   ============================================================================= */

.cart-page__layout {
	display:        flex;
	align-items:    flex-start;
	gap:            25px;
}

.cart-page__lines-card {
	flex:             1;
	min-width:        0;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	overflow:         hidden;
}

.cart-page__summary {
	width:            300px;
	flex-shrink:      0;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	padding:          32px;
	position:         sticky;
	top:              calc(110px + 24px);
}

.admin-bar .cart-page__summary {
	top: 135px;
}

/* =============================================================================
   LINES HEADER ROW (column labels)
   ============================================================================= */

.cart-page__lines-header {
	display:          flex;
	align-items:      center;
	gap:              25px;
	padding:          12px 15px 10px 15px;
	background-color: var(--color-bg-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.cart-page__col-label {
	font-size:      14px;
	font-weight:    var(--weight-bold);
	letter-spacing: 1px;
	color:          var(--color-text-primary);
}

.cart-page__col-product  { flex: 1; min-width: 0; }
.cart-page__col-price    { width: 100px;  text-align: right; }
.cart-page__col-qty      { width: 120px; text-align: center; }
.cart-page__col-subtotal { width: 90px;  text-align: right; }
.cart-page__col-remove   { width: 32px; }

/* =============================================================================
   CART LINE ROW
   ============================================================================= */

.cart-line {
	display:       flex;
	align-items:   center;
	gap:           25px;
	padding:       15px;
	border-bottom: 1px solid var(--color-border-subtle);
	transition:    opacity 200ms ease;
}

.cart-line:last-child {
	border-bottom: none;
}

.cart-line--loading {
	opacity:        0.5;
	pointer-events: none;
}

/* -- Image ------------------------------------------------------------------ */

.cart-line__image {
	flex-shrink: 0;
}

.cart-line__img {
	display:       block;
	width:         auto;
	height:        72px;
	border-radius: 5px;
	border:        1px solid var(--color-border-subtle);
}

.cart-line__img-placeholder {
	width:            72px;
	height:           72px;
	border-radius:    5px;
	background-color: var(--color-bg-subtle);
	border:           1px solid var(--color-border-subtle);
}

/* -- Product info ----------------------------------------------------------- */

.cart-line__info {
	flex:      1;
	min-width: 0;
}

.cart-line__title {
	display:        block;
	font-weight:    var(--weight-bold);
	color:          var(--color-text-primary);
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	margin-bottom: 3px;
}

.cart-line__title:hover {
	color:           var(--color-accent);
	text-decoration: none;
}

.cart-line__meta {
	display:        flex;
	flex-direction: column;
	line-height: 1.3;
}

.cart-line__sku,
.cart-line__attrs {
	font-size: 14px;
	color:     var(--color-text-secondary);
}

/* -- Unit price ------------------------------------------------------------- */

.cart-line__price {
	width:       100px;
	text-align:  right;
	font-size:   14px;
	color:       var(--color-text-secondary);
	flex-shrink: 0;
}

/* -- Quantity control ------------------------------------------------------- */

.cart-line__qty {
	width:       120px;
	flex-shrink: 0;
}

.cart-line__qty-control {
	display: flex;
}

.cart-line__qty-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            34px;
	height:           30px;
	border:           1px solid var(--color-border-subtle);
	background-color: var(--color-bg-subtle);
	cursor:           pointer;
	flex-shrink:      0;
	transition:       background-color 150ms ease;
	color:            var(--color-text-secondary);
}

.cart-line__qty-minus { border-radius: 6px 0 0 6px; }
.cart-line__qty-plus  { border-radius: 0 6px 6px 0; }

.cart-line__qty-btn:hover {
	background-color: var(--color-border-subtle);
}

.cart-line__qty-input {
	width:            52px;
	height:           30px;
	border:           1px solid var(--color-border-subtle);
	border-left:      none;
	border-right:     none;
	text-align:       center;
	font-size:        14px;
	background-color: var(--color-bg-primary);
	-moz-appearance:  textfield;
	appearance:       textfield;
}

.cart-line__qty-input::-webkit-outer-spin-button,
.cart-line__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:             0;
}

.cart-line__qty-input:focus {
	outline:      none;
	border-color: var(--color-accent);
}

/* -- Line subtotal ---------------------------------------------------------- */

.cart-line__subtotal {
	width:       90px;
	text-align:  right;
	flex-shrink: 0;
}

.cart-line__subtotal-amount {
	font-weight: var(--weight-bold);
	color:       var(--color-text-primary);
}

/* -- Remove button ---------------------------------------------------------- */

.cart-line__actions {
	width:       32px;
	flex-shrink: 0;
	display:     flex;
	justify-content: center;
}

.cart-line__remove {
	display:     flex;
	align-items: center;
	background:  none;
	border:      none;
	padding:     4px;
	cursor:      pointer;
	color:       var(--color-text-secondary);
	transition:  color 150ms ease;
}

.cart-line__remove:hover {
	color: var(--color-accent);
}

/* =============================================================================
   CART SUMMARY
   ============================================================================= */

.cart-summary__row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-bottom:   12px;
}

.cart-summary__label {
	font-size:   14px;
	color:       var(--color-text-secondary);
}

.cart-summary__amount {
	font-weight: var(--weight-bold);
}

.cart-summary__shipping-note {
	font-size: 14px;
	color:     var(--color-text-secondary);
}

.cart-summary__divider {
	border:     none;
	border-top: 1px solid var(--color-border-subtle);
	margin:     20px 0;
}

.cart-summary__checkout {
	display: flex;
	width:   100%;
	min-width: 0;
}

/* =============================================================================
   RESPONSIVE -- 900px
   ============================================================================= */

@media (max-width: 900px) {

	.cart-page__layout {
		flex-direction: column;
	}

	.cart-page__summary {
		width:    100%;
		position: static;
	}

	.cart-page__lines-header {
		display: none;
	}

	.cart-line {
		flex-wrap:  wrap;
		gap:        12px;
	}

	.cart-line__image {
		order: 0;
	}

	.cart-line__info {
		order: 1;
		flex:  1;
	}

	.cart-line__price {
		order:  2;
		width:  auto;
		flex:   1;
		text-align: left;
	}

	.cart-line__qty {
		order: 3;
		width: auto;
	}

	.cart-line__subtotal {
		order:      4;
		width:      auto;
		flex:       1;
		text-align: right;
	}

	.cart-line__actions {
		order: 5;
	}

}