/* ==========================================================================
   6ixmerchandise — cart page (classic)
   Geometry: saved Horizon sections/s6m-cart-page.liquid and captured cart.html.
   Woo totals, coupons, notes and payment controls remain unchanged.
   ========================================================================== */

.s6m-bag {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 18px 90px;
	min-height: 60vh;
	font-family: var(--6m-sans);
	font-size: 14px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.s6m-bag {
		padding: 36px 48px 100px;
	}
}

/* `.s6m-btn` itself belongs to base.css (FE-1). Only the sizes the bag needs
   and the one tone shift are declared here.
   The `a.s6m-btn` qualifier is load-bearing: the cart renders inside the
   generic page shell, whose `.sixm-rte a` link colour otherwise paints the
   CHECKOUT label dark-on-black. */

.s6m-bag a.s6m-btn,
.s6m-bag button.s6m-btn {
	color: #fff;
	text-decoration: none;
}

.s6m-bag a.s6m-btn--ghost,
.s6m-bag button.s6m-btn--ghost {
	color: var(--6m-ink);
}

.s6m-bag .s6m-btn--lg {
	padding: 18px 24px;
	font-size: 14px;
}

.s6m-bag .s6m-btn--sm {
	min-height: 0;
	padding: 10px 14px;
	font-size: 11px;
}

.s6m-bag .s6m-btn--ghost {
	border-color: var(--6m-line);
	background: #fff;
	color: var(--6m-ink);
}

.s6m-bag .s6m-btn--ghost:hover {
	border-color: var(--6m-ink);
	background: var(--6m-bg-2);
	color: var(--6m-ink);
}

/* Head ------------------------------------------------------------------- */

.s6m-bag__head {
	margin-bottom: 18px;
}

.s6m-bag .s6m-bag__eyebrow {
	margin: 0;
	color: var(--6m-muted);
	font-family: var(--6m-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.s6m-bag .s6m-bag__title {
	margin: 4px 0 0;
	color: var(--6m-ink);
	font-family: var(--6m-display);
	font-size: clamp(40px, 11vw, 72px);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* Free-gift progress -----------------------------------------------------
 * Geometry is `.s6m-cartp__progress` + `.s6m-progress` from the saved theme,
 * to the pixel: 12px/14px panel, 24px below it, a 12px row 6px above a 4px
 * --6m-bg-3 track that is INSET by the panel padding and sits in the flow.
 * The port had a 14px/16px panel, a 13px row and a 2px full-bleed hairline
 * pinned to the panel's bottom edge.
 *
 * The drawer's bar is a different object with different numbers
 * (`.s6m-cart-progress`, cart-drawer.css). Both are as they shipped.
 */

.s6m-bag-gift {
	margin-bottom: 24px;
	padding: 12px 14px;
	background: var(--6m-bg-2);
}

.s6m-bag-gift__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 12px;
}

.s6m-bag-gift__ico {
	flex: 0 0 16px;
	color: var(--6m-signal);
}

.s6m-bag-gift__ico svg {
	width: 16px;
	height: 16px;
}

/* Shopify kept the tags inside the copy span with `margin-right: 6px`; here
   they are a flex sibling, so the row gap is cancelled back down to 6px. */
.s6m-bag-gift__tags {
	flex: 0 0 auto;
	margin-right: -2px;
	filter: grayscale(1);
	opacity: 0.45;
	font-size: 12px;
	letter-spacing: -2px;
}

.s6m-bag-gift.is-unlocked .s6m-bag-gift__tags {
	filter: none;
	opacity: 1;
}

.s6m-bag-gift__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.s6m-bag-gift__pct {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--6m-muted);
	font-family: var(--6m-mono);
	font-size: 10px;
}

.s6m-bag-gift__track {
	position: relative;
	height: 4px;
	overflow: hidden;
	background: var(--6m-bg-3);
}

.s6m-bag-gift__fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	display: block;
	background: var(--6m-signal);
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.s6m-bag-gift__fill {
		transition: none;
	}
}

/* Layout ----------------------------------------------------------------- */

.s6m-bag__layout {
	display: grid;
	gap: 24px;
	align-items: start;
}

@media (min-width: 768px) {
	.s6m-bag__layout {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 40px;
	}
}

/* Items ------------------------------------------------------------------ */

.s6m-bag .s6m-bag__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.s6m-bag .s6m-bag__row {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--6m-line);
	margin: 0;
}

.s6m-bag__media {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	aspect-ratio: 1;
	background: var(--6m-bg-2);
	overflow: hidden;
}

.s6m-bag__media a {
	display: block;
	height: 100%;
}

.s6m-bag .s6m-bag__media img {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--6m-bg-2);
	object-fit: cover;
}

.s6m-bag__details {
	flex: 1;
	min-width: 0;
}

.s6m-bag .s6m-bag__vendor {
	margin: 0;
	color: var(--6m-signal);
	font-family: var(--6m-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.s6m-bag .s6m-bag__name {
	margin: 2px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: inherit;
}

.s6m-bag__name a {
	color: var(--6m-ink);
	text-decoration: none;
}

.s6m-bag__meta {
	color: var(--6m-muted);
	font-size: 12px;
	margin-bottom: 8px;
}

.s6m-bag__meta p,
.s6m-bag__meta dl,
.s6m-bag__meta dt,
.s6m-bag__meta dd {
	display: inline;
	margin: 0;
	font-size: inherit;
}

.s6m-bag__qty-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.s6m-bag__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--6m-line);
	background: #fff;
}

.s6m-bag__qty button {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--6m-ink);
	font-size: 16px;
	font-weight: 600;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.s6m-bag__qty input {
	width: 36px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--6m-mono);
	font-size: 12px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

/* Kadence clears the shared keyboard outline on form controls and adds its
   generic button/input shadow. Keep the cart's compact controls neutral while
   restoring one consistent, visible focus ring. */
.s6m-bag .s6m-bag__qty :is(button, input):focus,
.s6m-bag .s6m-bag__remove:focus,
.s6m-bag .s6m-bag__note:focus,
.s6m-bag .s6m-bag__checkout:focus,
.s6m-bag .s6m-bag__update:focus,
.s6m-bag .s6m-bag__coupon :is(input, button):focus {
	box-shadow: none;
}

.s6m-bag .s6m-bag__qty :is(button, input):focus-visible,
.s6m-bag .s6m-bag__remove:focus-visible,
.s6m-bag .s6m-bag__note:focus-visible,
.s6m-bag .s6m-bag__checkout:focus-visible,
.s6m-bag .s6m-bag__update:focus-visible,
.s6m-bag .s6m-bag__coupon :is(input, button):focus-visible {
	outline: 2px solid var(--6m-ink);
	outline-offset: 2px;
}

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

.s6m-bag .s6m-bag__remove {
	display: inline-block;
	margin-top: 8px;
	color: var(--6m-muted);
	font-family: var(--6m-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-decoration: none;
}

.s6m-bag__remove:hover {
	color: var(--6m-signal);
}

.s6m-bag__price {
	color: var(--6m-ink);
	font-family: var(--6m-mono);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

/* Summary ---------------------------------------------------------------- */

/*
 * `cart-collaterals` stays on the aside because plugins hook
 * `woocommerce_cart_collaterals` and expect to land inside it — but Kadence's
 * `.kadence-woo-cart-form-wrap .cart-collaterals { float:left; width:30% }`
 * then squeezes it to 30% of its own grid track. Float is inert on a grid
 * item; the width is not.
 */
.s6m-bag .s6m-bag__summary.cart-collaterals {
	float: none;
	width: auto;
	min-width: 0;
	position: sticky;
	top: 90px;
}

.s6m-bag__card {
	padding: 18px;
	background: var(--6m-bg-2);
}

.s6m-bag__totals {
	display: grid;
	/*
	 * The value column is content-sized, the label column takes the rest.
	 * With two equal 1fr columns the value column was 167px inside the 385px
	 * summary and "Calculated at checkout" — 13px mono, 172px — wrapped onto
	 * two lines. The live page kept it on one (`.s6m-cartp__row` was a plain
	 * space-between flex, so the value took the width it needed).
	 * Labels stay in the flexible column so a long discount label still wraps
	 * there rather than squeezing the figure.
	 */
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px 16px;
	margin: 0 0 16px;
	font-size: 14px;
}

.s6m-bag__totals dt {
	margin: 0;
}

.s6m-bag__totals dd {
	margin: 0;
	text-align: right;
}

.s6m-bag__shipping,
.s6m-bag__totals dd {
	font-family: var(--6m-mono);
	font-size: 13px;
}

.s6m-bag__shipping {
	color: var(--6m-muted);
	white-space: nowrap;
}

/*
 * The explicit Total row (REVIEW_2 H-2). It sits last in the list and carries
 * the same figure as the CHECKOUT button, so the rule above it is the visual
 * "everything above adds up to this".
 */
.s6m-bag__total-label,
.s6m-bag__total-value {
	padding-top: 10px;
	border-top: 1px solid var(--6m-line);
	font-weight: 700;
}

.s6m-bag__totals dd.s6m-bag__total-value {
	font-size: 15px;
}

.s6m-bag__coupon-value {
	color: var(--6m-signal);
}

.s6m-bag__tax {
	margin: -8px 0 16px;
	font-family: var(--6m-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--6m-muted);
}

.s6m-bag__note {
	width: 100%;
	min-height: 72px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid var(--6m-line);
	border-radius: 0;
	background: #fff;
	color: var(--6m-ink);
	font-family: var(--6m-sans);
	font-size: 13px;
	resize: vertical;
}

.s6m-bag__checkout {
	margin-bottom: 10px;
}

.s6m-bag__checkout-label {
	white-space: nowrap;
}

.s6m-bag__update {
	margin-bottom: 14px;
}

.s6m-bag__coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.s6m-bag__coupon input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--6m-line);
	border-radius: var(--style-border-radius-inputs, 4px);
	background: #fff;
	font-family: var(--6m-mono);
	font-size: 12px;
}

.s6m-bag__pay {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--6m-line);
	color: var(--6m-muted);
	font-family: var(--6m-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
}

.s6m-bag__pay span + span::before {
	content: '· ';
	margin-right: 6px;
}

/* Empty ------------------------------------------------------------------ */

.s6m-bag__empty {
	padding: 60px 0 80px;
	text-align: center;
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.s6m-bag .s6m-bag__title--empty {
	margin: 8px 0 18px;
}

.s6m-bag__signal {
	color: var(--6m-signal);
}

.s6m-bag .s6m-bag__empty-body {
	max-width: 360px;
	margin: 0 auto 20px;
	color: var(--6m-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* WooCommerce notices on the cart ---------------------------------------- */

.s6m-bag .woocommerce-message,
.s6m-bag .woocommerce-error,
.s6m-bag .woocommerce-info {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--6m-signal);
	background: var(--6m-bg-2);
	font-size: 13px;
	list-style: none;
}

/* Kadence prints its own cart heading; we render the eyebrow + H1 instead. */
.s6m-bag .cart-summary {
	display: none;
}

/*
 * /cart is an ordinary WordPress page, so the generic page template gives it a
 * "Cart" header above our own. One bag headline is enough.
 */
.s6m-bag-page .sixm-page__header,
.s6m-bag-page .sixm-bc,
.s6m-bag-page .entry-hero,
.s6m-bag-page .page-title {
	display: none;
}

/*
 * The generic page template constrains its article to a 672px reading measure.
 * That is right for a policy page and wrong for a two-column bag, so the cart
 * opts out of it.
 */
.s6m-bag-page .sixm-page__article,
.s6m-bag-page .entry-content-wrap {
	max-width: none;
	padding: 0;
}

.s6m-bag-page .sixm-page {
	padding: 0;
}