/* ==========================================================================
   Kidoclassic Mall, custom /cart page
   --------------------------------------------------------------------------
   A high-intent page: she has already decided she wants something, so the job
   is to stay out of her way. Clean, editorial, white. Magenta only on actions
   and the total. The "Proceed to checkout" button is the visual anchor of the
   right column; everything else is quiet around it.

   Self-contained: the design tokens below are copied from the theme's
   global.css :root so this module never imports the theme file yet every colour
   and font matches the store exactly. Everything is scoped under .kc-cart so
   nothing here can bleed onto another page.

   Mobile first: base rules are the phone layout (a single column, items then
   summary); the media queries near the bottom widen it to two columns and pin
   the summary on desktop.
   ========================================================================== */

.kc-cart {
	/* Brand palette (from global.css :root) */
	--kido-magenta: #C4186C;
	--kido-magenta-deep: #A8125B;
	--kido-magenta-deeper: #7E1450;
	--kido-magenta-wash: #FBE2EE;
	--kido-magenta-tint: #FDF1F6;

	--kido-ink: #2B1A20;
	--kido-ink-2: #5A464E;
	--kido-muted: #8C7B83;
	--kido-border: #F0E2E9;
	--kido-border-strong: #E2CFD8;
	--kido-blush: #F7DCE8;

	--kido-surface: #FFFFFF;
	--kido-surface-2: #F8EEF3;

	--kido-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--kido-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--kido-r-sm: 10px;
	--kido-r-md: 16px;
	--kido-r-lg: 24px;
	--kido-r-pill: 999px;

	--kido-shadow-xs: 0 1px 2px rgba(43, 26, 32, 0.06);
	--kido-shadow-sm: 0 2px 10px rgba(43, 26, 32, 0.08);
	--kido-shadow-md: 0 10px 28px rgba(43, 26, 32, 0.10);

	--kido-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kido-t-fast: 0.16s var(--kido-ease);
	--kido-t: 0.26s var(--kido-ease);

	--kido-gutter: 18px;
	--kc-measure: 1180px;

	background: var(--kido-surface);
	padding-bottom: 88px;
}

.kc-cart__shell {
	max-width: var(--kc-measure);
	margin: 0 auto;
	padding: 28px var(--kido-gutter) 0;
}

/* Header ------------------------------------------------------------------ */

.kc-cart__head {
	margin-bottom: 24px;
}
.kc-cart__title {
	font-family: var(--kido-display);
	font-weight: 700;
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.1;
	margin: 0;
	color: var(--kido-ink);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.kc-cart[data-state="filled"] .kc-cart__empty { display: none; }
.kc-cart[data-state="empty"] .kc-cart__layout { display: none; }

.kc-cart__empty {
	text-align: center;
	max-width: 30rem;
	margin: 0 auto;
	padding: 56px 0 72px;
}
.kc-cart__empty-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: var(--kido-r-pill);
	background: var(--kido-magenta-tint);
	color: var(--kido-magenta);
	margin-bottom: 22px;
}
.kc-cart__empty-line {
	font-family: var(--kido-display);
	font-weight: 700;
	font-size: clamp(22px, 4.4vw, 28px);
	margin: 0 0 8px;
	color: var(--kido-ink);
}
.kc-cart__empty-sub {
	color: var(--kido-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 26px;
	max-width: 26ch;
}
.kc-cart__empty-cta {
	padding-left: 30px;
	padding-right: 30px;
}

/* ==========================================================================
   Filled layout: single column on mobile, two columns on desktop
   ========================================================================== */

.kc-cart__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

/* Column labels are a desktop affordance; hidden on mobile where each cell
   carries its own data-title. */
.kc-cart__cols { display: none; }

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

.kc-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-citem {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"product product"
		"price   qty"
		"total   total";
	gap: 6px 12px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--kido-border);
}
.kc-citem:first-child { padding-top: 6px; }

.kc-citem__product {
	grid-area: product;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.kc-citem__media {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: var(--kido-r-sm);
	overflow: hidden;
	background: var(--kido-surface-2);
}
.kc-citem__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kc-citem__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.kc-citem__name {
	font-family: var(--kido-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--kido-ink);
}
a.kc-citem__name:hover { color: var(--kido-magenta); }
.kc-citem__meta {
	font-size: 13px;
	color: var(--kido-muted);
	line-height: 1.5;
}
.kc-citem__meta p { margin: 0; }
.kc-citem__remove {
	align-self: flex-start;
	margin-top: 4px;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--kido-body);
	font-size: 13px;
	color: var(--kido-muted);
	cursor: pointer;
	transition: color var(--kido-t-fast);
}
.kc-citem__remove:hover { color: var(--kido-magenta); }

.kc-citem__price,
.kc-citem__total {
	font-size: 15px;
}
.kc-citem__price {
	grid-area: price;
	color: var(--kido-muted);
}
.kc-citem__total {
	grid-area: total;
	color: var(--kido-ink);
	font-weight: 500;
}
.kc-citem__qty { grid-area: qty; justify-self: end; }

/* Cells that carry a data-title get a small inline label on mobile. */
.kc-citem__price::before,
.kc-citem__total::before {
	content: attr(data-title) ": ";
	color: var(--kido-muted);
	font-weight: 400;
	margin-right: 4px;
}

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

.kc-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--kido-border-strong);
	border-radius: var(--kido-r-pill);
	background: var(--kido-surface);
	/* Round the ends without clipping the buttons out of existence. */
	overflow: visible;
}
.kc-qty__btn {
	/* Center the +/- symbol inside the button. */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Explicit, generous tap target; flex-shrink guarded so it never
	   collapses to 0 on narrow mobile rows. */
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	background: var(--kido-surface);
	/* Visible outline so each button reads as a tappable control. */
	border: 1px solid var(--kido-border-strong);
	color: var(--kido-ink);
	/* Legible, well-sized glyph. */
	font-family: var(--kido-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--kido-t-fast), color var(--kido-t-fast), background var(--kido-t-fast);
}
/* Keep the pill's rounded ends: first button rounds its left, last its right. */
.kc-qty__btn:first-child {
	border-top-left-radius: var(--kido-r-pill);
	border-bottom-left-radius: var(--kido-r-pill);
}
.kc-qty__btn:last-child {
	border-top-right-radius: var(--kido-r-pill);
	border-bottom-right-radius: var(--kido-r-pill);
}
/* The markup ships an inline SVG that was rendering as an empty circle.
   Hide it and draw the +/- as real text glyphs so the symbol is always
   visible, centered, and inherits the button colour. */
.kc-qty__btn svg,
.kc-qty__btn img {
	display: none;
}
.kc-qty__btn::before {
	line-height: 1;
	color: inherit;
}
.kc-qty__btn[data-kc-dec]::before { content: "\2212"; } /* minus */
.kc-qty__btn[data-kc-inc]::before { content: "\002B"; } /* plus */
.kc-qty__btn:hover:not(:disabled) {
	border-color: var(--kido-magenta);
	color: var(--kido-magenta);
	background: var(--kido-magenta-tint);
}
.kc-qty__btn:disabled { opacity: 0.4; cursor: default; }
.kc-qty__input {
	width: 44px;
	height: 40px;
	flex: 0 0 auto;
	border: none;
	border-left: 1px solid var(--kido-border);
	border-right: 1px solid var(--kido-border);
	background: none;
	text-align: center;
	font-family: var(--kido-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--kido-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.kc-qty__input::-webkit-outer-spin-button,
.kc-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.kc-qty__input:focus { outline: none; }

/* A row mid-update: dim it and block further clicks until the reply lands. */
.kc-citem.is-busy { opacity: 0.55; pointer-events: none; }
.kc-citem.is-removing {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity var(--kido-t), transform var(--kido-t);
}

/* Coupon ------------------------------------------------------------------ */

.kc-coupon {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--kido-border);
}
.kc-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--kido-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--kido-ink);
	cursor: pointer;
}
.kc-coupon__toggle:hover { color: var(--kido-magenta); }
.kc-coupon__chevron { transition: transform var(--kido-t-fast); }
.kc-coupon__toggle[aria-expanded="true"] .kc-coupon__chevron { transform: rotate(180deg); }

.kc-coupon__body {
	display: none;
	gap: 10px;
	margin-top: 14px;
}
.kc-coupon.is-open .kc-coupon__body { display: flex; }
.kc-coupon__input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--kido-border-strong);
	border-radius: var(--kido-r-pill);
	background: var(--kido-surface);
	font-family: var(--kido-body);
	font-size: 14px;
	color: var(--kido-ink);
	transition: border-color var(--kido-t-fast), box-shadow var(--kido-t-fast);
}
.kc-coupon__input:focus {
	outline: none;
	border-color: var(--kido-magenta);
	box-shadow: 0 0 0 3px var(--kido-magenta-wash);
}
.kc-coupon__apply {
	flex: 0 0 auto;
	padding: 0 22px;
	height: 46px;
}
.kc-coupon__msg {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
}
.kc-coupon__msg[data-tone="error"] { color: var(--kido-magenta-deeper); }
.kc-coupon__msg[data-tone="success"] { color: #1F7A4D; }

/* ==========================================================================
   Order summary
   ========================================================================== */

.kc-summary {
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-md);
	padding: 24px 22px;
	box-shadow: var(--kido-shadow-xs);
}
.kc-summary__label {
	font-family: var(--kido-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kido-muted);
	margin: 0 0 18px;
}
.kc-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.kc-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 15px;
}
.kc-summary__key { color: var(--kido-ink-2); }
.kc-summary__val { color: var(--kido-ink); font-weight: 500; text-align: right; }
.kc-summary__val--muted {
	color: var(--kido-muted);
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
}
.kc-summary__val--discount { color: var(--kido-magenta); }

.kc-summary__row--discount .kc-summary__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kido-magenta-deeper);
	font-weight: 500;
}
.kc-summary__coupon-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: var(--kido-r-pill);
	background: var(--kido-magenta-wash);
	color: var(--kido-magenta-deeper);
	cursor: pointer;
	transition: background var(--kido-t-fast), color var(--kido-t-fast);
}
.kc-summary__coupon-remove:hover { background: var(--kido-magenta); color: #fff; }

.kc-summary__divider {
	height: 1px;
	background: var(--kido-border);
	margin: 18px 0;
}

.kc-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.kc-summary__total-key {
	font-family: var(--kido-display);
	font-weight: 500;
	font-size: 18px;
	color: var(--kido-ink);
}
.kc-summary__total-val {
	font-family: var(--kido-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	color: var(--kido-ink);
}

/* The anchor of the whole column, and the last element in the card. */
.kc-summary__checkout {
	font-size: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 720px) {
	.kc-cart { --kido-gutter: 24px; }
	.kc-cart__shell { padding-top: 40px; }

	/* Item rows become a four-column grid aligned to the header labels. */
	.kc-cart__cols {
		display: grid;
		grid-template-columns: 1fr 120px 150px 120px;
		gap: 16px;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--kido-border-strong);
	}
	.kc-cart__col {
		font-family: var(--kido-body);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--kido-muted);
	}
	.kc-cart__col:nth-child(2),
	.kc-cart__col:nth-child(3),
	.kc-cart__col:nth-child(4) { text-align: center; }
	.kc-cart__col:nth-child(4) { text-align: right; }

	.kc-citem {
		grid-template-columns: 1fr 120px 150px 120px;
		grid-template-areas: "product price qty total";
		gap: 16px;
		align-items: center;
		padding: 24px 0;
	}
	.kc-citem:first-child { padding-top: 24px; }

	.kc-citem__media { width: 88px; height: 88px; }

	.kc-citem__price { text-align: center; }
	.kc-citem__qty { justify-self: center; }
	.kc-citem__total { text-align: right; font-size: 15px; }

	/* Drop the inline "Price:/Total:" labels once the columns are aligned. */
	.kc-citem__price::before,
	.kc-citem__total::before { content: none; }
}

/* ==========================================================================
   Desktop: two columns, sticky summary
   ========================================================================== */

@media (min-width: 960px) {
	.kc-cart__shell { padding-top: 48px; }

	.kc-cart__layout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 48px;
	}

	.kc-cart__aside {
		position: sticky;
		top: 120px;
	}
}