/* Cart. Every class is namespaced `ct-` on purpose: the notifications plugin
   ships a `.brandagy-panel` rule that is position:absolute/visibility:hidden,
   so a shared panel class here renders the whole cart invisible.

   White ground, hairline rules, one ink and one lime. No card per block and no
   shadow anywhere — the money is stated plainly, every component of the price
   is a visible line. Horizontal offsets are logical properties, so Arabic RTL
   and English LTR mirror without a second stylesheet. */

.ct {
	max-width: 1120px;
	margin: 0 auto;
	padding-block: 22px 90px;
	padding-inline: 20px;
	background: var(--color-white);
}

@media (min-width: 860px) {
	.ct { padding-inline: 40px; }
}

/* ------------------------------------------------------------ back link */

/* The arrow points backwards for the current script and sits on the side the
   eye leaves from: trailing in RTL, leading in LTR. */

.ct__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-direction: row-reverse;
	padding: 6px 2px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 22px;
	color: var(--text-muted);
	text-decoration: none;
}

.ct__back svg { flex: 0 0 auto; transform: scaleX(-1); }

[dir="rtl"] .ct__back { flex-direction: row; }

[dir="rtl"] .ct__back svg { transform: none; }

.ct__back:hover { color: var(--ink); }

/* ---------------------------------------------------------------- title */

.ct__title {
	margin: 8px 0 8px;
	font-size: clamp(30px, 4.4vw, 44px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.ct__count {
	margin: 0 0 26px;
	font-size: 15.5px;
	line-height: 24px;
	color: var(--text-muted);
}

/* ---------------------------------------------------------------- shell */

.ct__shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	padding-block: 8px 0;
	align-items: start;
}

.ct__main { min-width: 0; }

.ct__aside { position: static; min-width: 0; }

@media (min-width: 860px) {
	.ct__shell {
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: 48px;
	}

	/* Clear of the 68px sticky header plus air. */
	.ct__aside {
		position: sticky;
		inset-block-start: 92px;
	}
}

/* ----------------------------------------------------------------- item */

/* The item answers to its own column, not the viewport. This is load-bearing:
   the shell splits at 860px, so at a 924px window the content column is only
   424px wide and a viewport-keyed three-column rule would strand the text. */

.ct__items {
	container-type: inline-size;
	container-name: ctitem;
	border-block-start: 1px solid var(--line);
	padding-block-start: 26px;
}

.ct-item + .ct-item {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}

.ct-item__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

/* Mark */

.ct-mark {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	height: 132px;
	padding-inline: 16px;
	border-radius: 18px;
	background: var(--lime);
	color: var(--ink);
	overflow: hidden;
}

/* The dark forest ground means the premium tier — never decoration. */
.ct-mark.is-premium {
	background: var(--ink);
	color: var(--lime);
}

.ct-mark img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px;
}

.ct-mark__word {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
}

.ct-mark.is-filled .ct-mark__word { display: none; }

/* Text block */

.ct-item__text { min-width: 0; }

.ct-item__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ct-item__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: -0.01em;
	color: var(--ink);
}

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

.ct-item__name a:hover { text-decoration: underline; }

.ct-item__tier {
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--lime);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 18px;
	color: var(--ink);
}

.ct-item__domain {
	margin-top: 2px;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: var(--text-muted);
	text-align: start;
}

.ct-item__desc {
	margin: 10px 0 0;
	max-width: 54ch;
	font-size: 15.5px;
	line-height: 24px;
	color: var(--text-muted);
	text-wrap: pretty;
}

.ct-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.ct-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding-inline: 12px;
	border-radius: 999px;
	background: var(--tint);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.ct-chip svg {
	flex: 0 0 auto;
	color: var(--ink);
}

/* Scarcity + remove */

.ct-item__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
}

.ct-item__once {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-muted);
}

.ct-item__once svg { flex: 0 0 auto; }

/* Quiet, not a box: an underline that darkens on hover. */

.ct-item__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-muted);
	text-decoration: none;
	transition: color 180ms var(--ease);
}

.ct-item__remove span { border-bottom: 1px solid var(--rule-quiet); }

.ct-item__remove:hover { color: var(--ink); }

.ct-item__remove:hover span { border-bottom-color: var(--ink); }

/* Price */

.ct-item__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	min-width: 0;
}

.ct-item__figure {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.ct-item__with {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 20px;
	color: var(--text-muted);
}

/* Container bands. The price only aligns to the end in the three-column state:
   applied unconditionally it strands the figure far from the name it prices. */

@container ctitem (min-width: 520px) {
	.ct-item__grid {
		grid-template-columns: 168px minmax(0, 1fr);
		gap: 20px;
	}

	.ct-mark { grid-column: 1; grid-row: 1 / span 2; }

	.ct-item__text { grid-column: 2; grid-row: 1; }

	.ct-item__price { grid-column: 2; grid-row: 2; }
}

@container ctitem (min-width: 760px) {
	.ct-item__grid {
		grid-template-columns: 180px minmax(0, 1fr) auto;
		gap: 24px;
	}

	.ct-mark { grid-column: 1; grid-row: 1; }

	.ct-item__text { grid-column: 2; grid-row: 1; }

	.ct-item__price {
		display: block;
		grid-column: 3;
		grid-row: 1;
		text-align: end;
	}
}

/* Add-ons */

.ct-addons { margin-top: 26px; }

.ct-addons__label {
	margin: 0 0 12px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 22px;
	color: var(--text-muted);
	text-wrap: pretty;
}

/* The single-column default belongs here, not in an inline style: an inline
   default beats the container rule and makes the two-up layout dead code. */

.ct-adds {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

@container ctitem (min-width: 520px) {
	.ct-adds { grid-template-columns: 1fr 1fr; }
}

.ct-addon {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding-inline: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--color-white);
	cursor: pointer;
	transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.ct-addon:hover { border-color: var(--rule-quiet); }

.ct-addon:has(input:checked) {
	border-color: var(--ink);
	background: var(--lime-tint);
}

.ct-addon input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ct-addon__box {
	position: relative;
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	border: 1.6px solid var(--field-line);
	border-radius: 6px;
	background: var(--color-white);
	transition: all 160ms var(--ease);
}

.ct-addon__box::after {
	content: "";
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 7px;
	width: 5px;
	height: 9px;
	border: solid var(--lime);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 160ms var(--ease);
}

.ct-addon input:checked + .ct-addon__box {
	background: var(--ink);
	border-color: var(--ink);
}

.ct-addon input:checked + .ct-addon__box::after { opacity: 1; }

.ct-addon input:focus-visible + .ct-addon__box { box-shadow: var(--focus-ring); }

.ct-addon__name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 22px;
	color: var(--ink);
	min-width: 0;
}

.ct-addon__spacer {
	flex: 1 1 auto;
	min-width: 12px;
}

.ct-addon__price {
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
	color: var(--ink);
	white-space: nowrap;
}

/* -------------------------------------------------------------- summary */

.ct-summary {
	background: var(--color-white);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 26px 24px;
}

.ct-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-soft);
}

.ct-summary__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ink);
}

.ct-summary__updated-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: var(--commerce-success-bg);
	color: var(--commerce-success);
	border: 1px solid var(--color-green-soft);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	animation: ctBadgeFadeIn 0.3s ease-out;
}

.ct-summary__updated-badge svg {
	color: var(--commerce-success);
	flex-shrink: 0;
}

@keyframes ctBadgeFadeIn {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Every component of the price is its own line. */

.ct-summary__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-top: 15px;
}

.ct-summary__row + .ct-summary__row { padding-top: 11px; }

.ct-summary__row span {
	font-size: 15.5px;
	line-height: 23px;
	color: var(--text-muted);
}

.ct-summary__row strong {
	margin-inline-start: auto;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.ct-summary__row--discount span,
.ct-summary__row--discount strong { color: var(--commerce-success); }

/* Coupon */

.ct-coupon { padding-top: 16px; }

.ct-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	transition: color 180ms var(--ease);
}

.ct-coupon__toggle span { border-bottom: 1px solid var(--rule-quiet); }

.ct-coupon__toggle:hover { color: var(--ink); }

.ct-coupon__toggle:hover span { border-bottom-color: var(--ink); }

/* cart.js hides the toggle once the field is open; the class must not beat it. */
.ct-coupon__toggle[hidden] { display: none; }

.ct-coupon__form {
	display: flex;
	gap: 8px;
}

.ct-coupon__form[hidden] { display: none; }

.ct-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding-inline: 14px;
	border: 1.5px solid var(--field-line);
	border-radius: 12px;
	background: var(--color-white);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	text-align: start;
}

.ct-coupon__input::placeholder { color: var(--text-soft); }

.ct-coupon__input:focus {
	outline: none;
	border-color: var(--ink);
	border-width: 2px;
}

.ct-coupon__apply {
	flex: 0 0 auto;
	min-height: 48px;
	padding-inline: 18px;
	border: 1.5px solid var(--field-line);
	border-radius: 12px;
	background: var(--color-white);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 180ms var(--ease);
}

.ct-coupon__apply:hover { border-color: var(--ink); }

/* Grand total */

.ct-summary__total {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.ct-summary__total-label {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 22px;
	color: var(--ink);
}

.ct-summary__total-note {
	display: block;
	font-size: 13px;
	line-height: 19px;
	color: var(--text-muted);
}

.ct-summary__total-value {
	margin-inline-start: auto;
	font-size: 30px;
	font-weight: 700;
	line-height: 34px;
	letter-spacing: -0.03em;
	color: var(--ink);
	white-space: nowrap;
}

.ct-summary__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	min-height: 54px;
	padding-inline: 24px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--lime);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background 180ms var(--ease);
}

.ct-summary__cta:hover {
	background: var(--ink-hover);
	color: var(--lime);
}

.ct-summary__cta svg { flex: 0 0 auto; }

[dir="rtl"] .ct-summary__cta svg { transform: scaleX(-1); }

/* Trust lines */

.ct-trust {
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--line-soft);
	list-style: none;
}

.ct-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 21px;
	color: var(--text-muted);
	text-wrap: pretty;
}

.ct-trust li + li { margin-top: 12px; }

.ct-trust svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--ink);
}

/* ---------------------------------------------------------------- empty */

.ct-empty {
	padding: 80px 0 120px;
	text-align: center;
}

.ct-empty h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4.4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.ct-empty p {
	margin: 0 auto 28px;
	max-width: 46ch;
	font-size: 16.5px;
	line-height: 26px;
	color: var(--text-muted);
	text-wrap: pretty;
}

.ct-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding-inline: 28px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--lime);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.ct-empty__cta:hover {
	background: var(--ink-hover);
	color: var(--lime);
}

/* Update button only matters without JS; the add-on rows submit on change. */

.ct__update {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* iOS zooms any input under 16px on focus. */

@media (max-width: 619px) {
	.ct input { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ct * { transition: none !important; animation-duration: .001ms !important; }
}