/* ================================================================
   CART PAGE — /boutique/panier/
   Desktop: 2-col grid (table + totals sidebar).
   Mobile (<=600px): single column, table rows stack.
   ================================================================ */


/* -- Page layout -- */

.pa-cart {
	background: var(--color-primary-1);
	min-height: 100vh;
}


/* -- Header -- */

.pa-cart__header {
	padding: 64px 52px 48px;
	text-align: center;
	border-bottom: 0.5px solid rgba(var(--color-accent-rgb), 0.1);
}

.pa-cart__breadcrumb {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.pa-cart__breadcrumb a {
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-base);
}

.pa-cart__breadcrumb a:hover {
	color: var(--color-accent);
}

.pa-cart__breadcrumb-sep {
	color: var(--color-muted);
	opacity: 0.4;
}

.pa-cart__title {
	font-family: var(--font-display);
	font-size: clamp(44px, 5.5vw, 72px);
	font-weight: 300;
	line-height: 0.95;
	color: var(--color-neutral);
	margin: 0;
}

.pa-cart__subtitle {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-accent);
	opacity: 0.7;
	margin: 28px 0 0;
}


/* -- Body: table + totals grid -- */

.pa-cart__body {
	display: grid;
	/* The rail floor and the gutters scale with the viewport. Fixed at
	   320px + 64px gap + 104px padding they consumed 488px, so at 1024px the
	   table track got 511px for content that needs 668px and the row rendered
	   underneath the rail. Measured 2026-08-18. */
	/* 0.85fr, not 1fr: at 1fr the rail took enough of a 1024px screen that the
	   product name was left 67px and broke across four lines. This gives the
	   name ~116px there. The rail narrows by roughly 40px at 1280, which is the
	   deliberate trade. */
	grid-template-columns: minmax(0, 1.55fr) minmax(clamp(248px, 24vw, 320px), 0.85fr);
	gap: clamp(28px, 4vw, 64px);
	padding: 48px clamp(28px, 4vw, 52px) 72px;
	align-items: start;
}


/* -- Table -- */

/* Column track list, shared by the head and the rows so the two cannot drift.
   Fluid rather than fixed: the five fixed columns summed to 480px, which left
   the article column 31px at 1024px and forced a 157px overflow. The article
   track is minmax(0, …) so it can shrink past its min-content instead of
   pushing the row wider than its grid area. */
.pa-cart__table-head,
.pa-cart__row {
	/* One source of truth for the thumb size: the row sizes the image from it and
	   the head indents the "Article" label past it, so the two cannot fall out of
	   alignment the way a hardcoded 92px did once the thumb became fluid. */
	--pa-cart-thumb: clamp(56px, 6vw, 88px);
	--pa-cart-cols:
		minmax(0, 1.8fr)
		clamp(96px, 8vw, 100px)
		clamp(96px, 9vw, 120px)
		clamp(64px, 7vw, 100px)
		clamp(64px, 7vw, 100px)
		clamp(40px, 4vw, 60px);
}

.pa-cart__table-head {
	display: grid;
	grid-template-columns: var(--pa-cart-cols);
	align-items: center;
	padding: 0 8px 18px;
	border-bottom: 0.5px solid rgba(var(--color-accent-rgb), 0.18);
}

.pa-cart__th {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 500;
	/* 3.5px over the ten letters of "CONTENANCE" added 35px of pure tracking,
	   which needed 101px in a 72px column. Tracking now eases off as the
	   viewport narrows. */
	letter-spacing: clamp(1.2px, 0.25vw, 3.5px);
	text-transform: uppercase;
	color: var(--color-accent);
	opacity: 0.7;
	text-align: center;
	/* Deliberately NOT nowrap/ellipsis: "PRIX UNITAIRE" is designed to wrap onto
	   two lines, and forcing one line truncated it to "PRIX UNITAIR…". The
	   single-word labels are instead given columns wide enough to hold them,
	   which is why the contenance track has a 96px floor. */
}

.pa-cart__th:first-child {
	text-align: left;
	/* Thumb + the row's 18px article gap, so the label sits over the name. Capped
	   so the indent can never consume the label itself: at 962px the article
	   track is 113px and a flat 75.7px indent left "ARTICLE" 37px of a 55px
	   word. The cap only engages on narrow desktops; wide viewports keep the
	   full indent. */
	padding-left: min(calc(var(--pa-cart-thumb) + 18px), calc(100% - 64px));
}


/* -- Row -- */

.pa-cart__row {
	display: grid;
	grid-template-columns: var(--pa-cart-cols);
	align-items: center;
	padding: 22px 8px;
	border-bottom: 0.5px solid rgba(var(--color-accent-rgb), 0.08);
}

.pa-cart__row-article {
	display: flex;
	align-items: center;
	gap: 18px;
	/* Lets the flex row shrink inside its now-shrinkable track. Without it the
	   thumb plus the product name set a min-content floor the track cannot go
	   under, which is the same bug class the debt ledger records for 1fr
	   tracks holding flex rows. */
	min-width: 0;
}

.pa-cart__row-thumb {
	flex: 0 0 var(--pa-cart-thumb);
	width: var(--pa-cart-thumb);
	height: var(--pa-cart-thumb);
	background: var(--color-primary-3);
	border: 0.5px solid rgba(var(--color-accent-rgb), 0.12);
	overflow: hidden;
	display: block;
}

.pa-cart__row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-cart__row-name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-neutral);
	margin: 0;
	line-height: 1.3;
	min-width: 0;
	/* break-word, not anywhere: "anywhere" also breaks words that would have fit
	   on their own line, which rendered "DIAMANT" as "DIAMAN/T" at 1024px.
	   Wrapping beats ellipsis here because the customer needs to read what is in
	   their cart. */
	overflow-wrap: break-word;
}

.pa-cart__row-name a {
	color: inherit;
	text-decoration: none;
}

.pa-cart__row-name a:hover {
	color: var(--color-accent);
}

.pa-cart__row-contenance,
.pa-cart__row-unit-price,
.pa-cart__row-total {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-neutral);
	text-align: center;
}

.pa-cart__row-contenance {
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-muted);
}


/* -- Qty controls (reused pattern from drawer) -- */

.pa-cart__qty-controls {
	display: inline-flex;
	align-items: center;
	border: 0.5px solid rgba(var(--color-accent-rgb), 0.15);
	border-radius: 2px;
	width: fit-content;
	margin: 0 auto;
}

.pa-cart__qty-controls button {
	background: transparent;
	border: none;
	color: var(--color-muted);
	font-size: 14px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pa-cart__qty-controls button:hover:not([disabled]) {
	color: var(--color-accent);
}

.pa-cart__qty-controls button[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

.pa-cart__qty-controls span {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--color-neutral);
	min-width: 28px;
	text-align: center;
}


/* -- Remove button -- */

.pa-cart__row-remove button {
	background: transparent;
	border: none;
	color: var(--color-muted);
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s ease;
}

.pa-cart__row-remove button:hover {
	color: var(--color-red);
}


/* -- Totals sidebar -- */

.pa-cart__totals {
	position: sticky;
	top: 120px;
	padding: 32px;
	border: 0.5px solid rgba(var(--color-accent-rgb), 0.12);
}

.pa-cart__totals-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	gap: 12px 16px;
	margin: 0;
}

.pa-cart__totals-list dt {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-muted);
}

.pa-cart__totals-list dd {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-neutral);
	text-align: right;
	margin: 0;
}

.pa-cart__totals-total-label {
	font-weight: 500;
	color: var(--color-neutral);
	padding-top: 16px;
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.12);
	margin-top: 8px;
}

.pa-cart__totals-total-value {
	font-size: 18px;
	font-weight: 500;
	color: var(--color-accent);
	padding-top: 16px;
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.12);
	margin-top: 8px;
}

.pa-cart__checkout-btn {
	display: block;
	width: 100%;
	margin-top: 28px;
	padding: 14px 24px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--color-primary-1);
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	transition: background 0.2s ease, color 0.2s ease;
}

.pa-cart__checkout-btn:hover {
	background: transparent;
	color: var(--color-accent);
}


/* -- Empty state -- */

.pa-cart__empty {
	padding: 96px 52px;
	text-align: center;
}

.pa-cart__empty-msg {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	color: var(--color-muted);
	margin: 0 0 28px;
}

.pa-cart__empty-cta {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-accent);
	border-bottom: 0.5px solid var(--color-accent);
	padding-bottom: 2px;
	transition: opacity 0.2s ease;
}

.pa-cart__empty-cta:hover {
	opacity: 0.7;
}


/* -- Responsive: tablet -- */

/* The mobile treatment begins at max-width 960px. This card layout
   used to start at 600px, so every width from 601px to roughly 1279px rendered
   the six-column table in a track too narrow to hold it. Measured 2026-08-18 at
   768px: the row needed 583px, had 329px, and ran 214px underneath the totals
   rail; at 1024px it still overflowed by 157px. Keep the stack point at 960. */
@media (max-width: 960px) {
	.pa-cart__header {
		padding: 48px 32px 36px;
	}

	.pa-cart__body {
		display: flex;
		flex-direction: column;
		/* Overrides align-items: start from the grid layout above. Left as start,
		   flex items size to their content instead of filling the column: the recap
		   box measured 331px inside a 320px container at 360px, spilling past the
		   padding box, and sat left-aligned rather than full width on tablet. */
		align-items: stretch;
		padding: 36px 32px 56px;
		gap: 32px;
	}

	.pa-cart__table-head {
		display: none;
	}

	.pa-cart__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		padding: 20px 0;
		position: relative;
	}

	.pa-cart__row-article {
		width: 100%;
	}

	.pa-cart__row-thumb {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
	}

	.pa-cart__row-contenance,
	.pa-cart__row-unit-price,
	.pa-cart__row-total {
		text-align: left;
	}

	.pa-cart__row-contenance::before,
	.pa-cart__row-unit-price::before,
	.pa-cart__row-total::before {
		content: attr(data-label) ": ";
		font-size: 9px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--color-muted);
		margin-right: 4px;
	}

	.pa-cart__row-qty {
		margin-left: auto;
	}

	.pa-cart__row-remove {
		position: absolute;
		top: 20px;
		right: 0;
	}

	.pa-cart__qty-controls {
		margin: 0;
	}

	.pa-cart__totals {
		position: static;
	}
}


/* -- Responsive: mobile -- */

/* Small-screen tuning only. The structural card layout now lives in the 960px
   block above; this block must stay typography and spacing, or the two will
   drift apart again. */
@media (max-width: 600px) {
	.pa-cart__header {
		padding: 36px 20px 28px;
	}

	.pa-cart__title {
		font-size: 36px;
	}

	.pa-cart__body {
		padding: 24px 20px 48px;
	}

	.pa-cart__empty {
		padding: 64px 20px;
	}
}


/* -- Upsell section (S-6B.2) -- */

.pa-cart__upsells {
	padding: 48px 52px 72px;
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.1);
}

.pa-cart__upsells-heading {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 300;
	color: var(--color-neutral);
	text-align: center;
	margin: 0 0 36px;
}

.pa-cart__upsells-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 960px) {
	.pa-cart__upsells {
		padding: 36px 32px 56px;
	}

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

@media (max-width: 600px) {
	.pa-cart__upsells {
		padding: 28px 20px 48px;
	}

	.pa-cart__upsells-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}