/* ==========================================================================
   CrazySneak — Cart Drawer + Cart Page (mobile-first)
   Design source: D:/crazysneak-site/design-system Cart/project/cart/*.jsx
   ========================================================================== */

/* ---------- Helpers (used across drawer + page) ---------- */
.cs-italic-accent { font-family: var(--cs-font-serif); font-style: italic; color: var(--accent); font-weight: 500; }
.cs-italic        { font-family: var(--cs-font-serif); font-style: italic; }

/* ---------- Section head primitive ---------- */
.cs-section-head { text-align: center; }
.cs-section-head__eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--accent); margin-bottom: 10px;
}
.cs-section-head__title {
	font-family: var(--cs-font-serif);
	font-size: 28px; line-height: 1.15;
	color: var(--fg); margin: 0; font-weight: 500;
	letter-spacing: -0.01em;
}

/* ---------- Buttons (cart-only primitive; doesn’t depend on info-shared.css) ---------- */
.cs-btn {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	border-radius: 100px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	letter-spacing: 0.01em;
	padding: 13px 22px;
	font-size: 13.5px;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: opacity 220ms, transform 140ms;
}
.cs-btn--dark   { background: var(--fg); color: #fff; border-color: var(--fg); }
.cs-btn--ghost  { background: transparent; color: var(--fg); border-color: var(--fg); }
body .cs-btn--dark:hover  { color: #fff !important; }
body .cs-btn--ghost:hover { color: var(--fg) !important; }

/* ==========================================================================
   Drawer
   ========================================================================== */
.cs-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	visibility: hidden;
}
.cs-cart-drawer[aria-hidden="false"] { visibility: visible; pointer-events: auto; }

.cs-cart-drawer__scrim {
	position: absolute; inset: 0;
	background: rgba(26, 20, 18, .45);
	opacity: 0;
	transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cs-cart-drawer[aria-hidden="false"] .cs-cart-drawer__scrim { opacity: 1; }

.cs-cart-drawer__panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	top: 36px;
	background: var(--bg);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -20px 50px rgba(26, 20, 18, .25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(24px);
	opacity: 0;
	transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cs-cart-drawer[aria-hidden="false"] .cs-cart-drawer__panel {
	transform: translateY(0);
	opacity: 1;
}

/* Ribbon (animated by JS via .is-on) */
.cs-cart-drawer__ribbon {
	position: absolute; top: 0; left: 0; right: 0;
	background: var(--accent);
	color: #fff;
	padding: 8px 16px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	z-index: 3;
	transform: translateY(-100%);
	transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cs-cart-drawer__ribbon.is-on { transform: translateY(0); }
.cs-cart-drawer__ribbon[hidden] { display: flex; }  /* JS toggles via .is-on */
.cs-cart-drawer__ribbon .cs-italic { font-size: 13.5px; }

.cs-cart-drawer__grabber {
	display: flex; justify-content: center;
	padding: 8px 0 4px;
	flex-shrink: 0;
}
.cs-cart-drawer__grabber span {
	width: 38px; height: 4px;
	border-radius: 100px;
	background: var(--line);
}

.cs-cart-drawer__body-frag {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.cs-cart-drawer__header {
	padding: 6px 18px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid transparent;
	transition: border-color 220ms;
	flex-shrink: 0;
}
.cs-cart-drawer__body-frag.is-scrolled .cs-cart-drawer__header { border-bottom-color: var(--line); }
.cs-cart-drawer__title-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cs-cart-drawer__title {
	font-family: var(--cs-font-serif);
	font-size: 22px; font-weight: 500;
	color: var(--fg);
	margin: 0; line-height: 1; letter-spacing: -0.01em;
}
.cs-cart-drawer__count {
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--muted);
	font-weight: 500;
}
.cs-cart-drawer__close {
	/* MIUI workaround */
	position: relative;
	width: 34px; height: 34px;
	background: transparent; border: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--fg); flex-shrink: 0; padding: 0;
}
.cs-cart-drawer__close::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; border: 1px solid var(--line); background: transparent; z-index: 0;
}
.cs-cart-drawer__close > * { position: relative; z-index: 1; }

.cs-cart-drawer__scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px 16px 16px;
	display: flex; flex-direction: column; gap: 12px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.cs-cart-drawer__scroll::-webkit-scrollbar { display: none; }

.cs-cart-drawer__view-full {
	text-align: center;
	padding: 4px 0 6px;
}
.cs-cart-drawer__view-full a {
	font-family: var(--cs-font-sans);
	font-size: 12px;
	color: var(--muted);
	text-decoration: underline;
}
body .cs-cart-drawer__view-full a:hover { color: var(--fg) !important; }

.cs-cart-drawer__footer {
	flex-shrink: 0;
	border-top: 1px solid var(--line);
	background: var(--card);
	padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
}

/* ==========================================================================
   Cart line item card
   ========================================================================== */
.cs-cart-line {
	background: var(--card);
	border-radius: 16px;
	border: 1px solid var(--line);
	padding: 16px 16px 18px;
	animation: csLineIn 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cs-cart-line.is-dense { padding: 14px; }
.cs-cart-line.is-just-added { animation: csLineIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1), csAddedPulse 1600ms ease-out 100ms; }

.cs-cart-line__top {
	display: flex;
	gap: 14px;
}
.cs-cart-line.is-dense .cs-cart-line__top { gap: 12px; }

.cs-cart-line__photo {
	/* MIUI Chrome workaround: round the img/fallback directly instead of clipping via parent overflow. */
	width: 92px; height: 92px;
	flex-shrink: 0;
	position: relative;
}
.cs-cart-line__photo img,
.cs-cart-line__photo .cs-cart-line__photo-fallback,
.cs-cart-line__img {
	border-radius: 12px;
}
.cs-cart-line__photo {
	background: var(--bg-alt);
	background-image: repeating-linear-gradient(135deg, rgba(26,20,18,.05) 0, rgba(26,20,18,.05) 1px, transparent 1px, transparent 14px);
	border-radius: 12px;
}
.cs-cart-line.is-dense .cs-cart-line__photo { width: 76px; height: 76px; }
.cs-cart-line__photo img,
.cs-cart-line__img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.cs-cart-line__photo-fallback {
	position: absolute; inset: 0;
	background: var(--bg-alt);
	background-image: repeating-linear-gradient(135deg, rgba(26,20,18,.05) 0, rgba(26,20,18,.05) 1px, transparent 1px, transparent 14px);
}

.cs-cart-line__main { flex: 1; min-width: 0; }
.cs-cart-line__head {
	display: flex; justify-content: space-between; gap: 8px;
	align-items: flex-start;
}
.cs-cart-line__title-block { min-width: 0; }
.cs-cart-line__name {
	font-family: var(--cs-font-serif);
	font-size: 18px; font-weight: 600;
	color: var(--fg); line-height: 1.15; letter-spacing: -0.01em;
	margin: 0;
}
.cs-cart-line.is-dense .cs-cart-line__name { font-size: 16px; }
.cs-cart-line__size {
	margin-top: 4px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	color: var(--muted); letter-spacing: 0.01em;
}
.cs-cart-line__price {
	font-family: var(--cs-font-sans);
	font-size: 15px; font-weight: 700;
	color: var(--fg); white-space: nowrap;
}
.cs-cart-line.is-dense .cs-cart-line__price { font-size: 14px; }
.cs-cart-line__price .woocommerce-Price-amount { font-weight: 700; }

.cs-cart-line__actions {
	margin-top: 12px;
	display: flex; align-items: center; justify-content: flex-end;
	gap: 8px;
}
.cs-cart-line.is-dense .cs-cart-line__actions { margin-top: 10px; }
.cs-cart-line__action-side {
	display: flex; align-items: center; gap: 14px;
}
.cs-cart-line__edit {
	font-family: var(--cs-font-sans);
	font-size: 11.5px; font-weight: 600;
	color: var(--accent);
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
}
body .cs-cart-line__edit:hover { color: var(--accent) !important; opacity: .85; }
.cs-cart-line__remove {
	background: none; border: none; cursor: pointer; padding: 0;
	color: var(--muted);
	display: inline-flex; align-items: center;
	text-decoration: none;
	transition: color 140ms;
}
body .cs-cart-line__remove:hover { color: var(--fg) !important; }


/* Personalization gold-quote */
.cs-personalization-summary {
	/* MIUI workaround */
	position: relative;
	padding: 14px 16px 16px 20px;
	margin-top: 14px;
}
.cs-personalization-summary::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 12px; background: var(--accent-soft); z-index: 0;
}
.cs-personalization-summary > * { position: relative; z-index: 1; }
.cs-personalization-summary.is-compact { padding: 12px 14px 12px 18px; margin-top: 12px; }
.cs-personalization-summary__quote {
	position: absolute;
	left: 8px; top: -6px;
	font-family: var(--cs-font-serif);
	font-style: italic;
	font-size: 48px;
	color: var(--accent);
	opacity: 0.55;
	line-height: 1;
	user-select: none;
	pointer-events: none;
}
.cs-personalization-summary.is-compact .cs-personalization-summary__quote { font-size: 38px; }
.cs-personalization-summary__eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--accent); margin-bottom: 4px;
	position: relative;
}
.cs-personalization-summary__headline {
	font-family: var(--cs-font-serif);
	font-size: 26px;
	font-style: italic; font-weight: 500;
	color: var(--fg);
	letter-spacing: -0.01em;
	line-height: 1.05;
	position: relative;
	word-break: break-word;
}
.cs-personalization-summary.is-compact .cs-personalization-summary__headline { font-size: 22px; }
.cs-personalization-summary__meta {
	margin-top: 8px;
	display: flex; flex-wrap: wrap; gap: 4px 14px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--muted);
	position: relative;
}
.cs-personalization-summary__chip {
	display: inline-flex; align-items: center; gap: 6px;
}
.cs-personalization-summary__chip .cs-italic-accent { font-size: 13.5px; }

/* Details expand */
.cs-cart-line__details { margin-top: 10px; }
.cs-cart-line__details-toggle {
	background: none; border: none; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--cs-font-sans);
	font-size: 11px; font-weight: 600;
	color: var(--muted); letter-spacing: 0.02em;
}
.cs-cart-line__details-toggle .cs-when-expanded { display: none; }
.cs-cart-line__details-toggle[aria-expanded="true"] .cs-when-collapsed { display: none; }
.cs-cart-line__details-toggle[aria-expanded="true"] .cs-when-expanded { display: inline; }
.cs-cart-line__details-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cs-cart-line__details-toggle svg { transition: transform 200ms; }
.cs-cart-line__details-list {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: var(--bg-alt);
	border-radius: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px;
}
.cs-cart-line__details-row dt {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--muted); margin-bottom: 2px;
}
.cs-cart-line__details-row dd {
	margin: 0;
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	color: var(--fg); line-height: 1.35;
	word-break: break-word;
}

/* Per-line addon */
.cs-cart-line__addon {
	margin-top: 12px;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px dashed var(--line);
	background: transparent;
}
.cs-cart-line__addon-thumb {
	width: 34px; height: 34px;
	border-radius: 8px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--bg-alt);
	background-image: repeating-linear-gradient(135deg, rgba(26,20,18,.05) 0, rgba(26,20,18,.05) 1px, transparent 1px, transparent 8px);
}
.cs-cart-line__addon-thumb img,
.cs-cart-line__addon-img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.cs-cart-line__addon-thumb-fallback { display: block; width: 100%; height: 100%; }
.cs-cart-line__addon-meta { flex: 1; min-width: 0; }
.cs-cart-line__addon-name {
	font-family: var(--cs-font-sans);
	font-size: 11.5px; font-weight: 600;
	color: var(--fg); line-height: 1.2;
}
.cs-cart-line__addon-name .cs-italic-accent { font-size: 13px; }
.cs-cart-line__addon-sub {
	font-family: var(--cs-font-sans);
	font-size: 10.5px; color: var(--muted); margin-top: 1px;
}
.cs-cart-line__addon-add {
	background: transparent;
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: 100px;
	padding: 6px 12px;
	font-family: var(--cs-font-sans);
	font-size: 11px; font-weight: 600;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 5px;
	white-space: nowrap;
	transition: background 140ms, color 140ms, border-color 140ms;
}
.cs-cart-line__addon-add .cs-when-added { display: none; }
.cs-cart-line__addon-add.is-added { background: var(--accent); color: #fff; border-color: var(--accent); }
.cs-cart-line__addon-add.is-added .cs-when-idle  { display: none; }
.cs-cart-line__addon-add.is-added .cs-when-added { display: inline-flex; align-items: center; gap: 4px; }
.cs-cart-line__addon-add.is-pending { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Mini delivery (drawer)
   ========================================================================== */
.cs-mini-delivery {
	display: flex; gap: 12px; align-items: center;
	padding: 10px 14px;
	background: var(--bg-alt);
	border-radius: 12px;
}
.cs-mini-delivery__icon {
	/* MIUI workaround */
	position: relative;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.cs-mini-delivery__icon::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--card); border: 1px solid var(--line); z-index: 0;
}
.cs-mini-delivery__icon > * { position: relative; z-index: 1; }
.cs-mini-delivery__copy { flex: 1; min-width: 0; }
.cs-mini-delivery__head {
	font-family: var(--cs-font-serif);
	font-size: 15px; font-weight: 500;
	color: var(--fg);
	line-height: 1.2; letter-spacing: -0.01em;
}
.cs-mini-delivery__sub {
	font-family: var(--cs-font-sans);
	font-size: 10.5px; color: var(--muted);
	margin-top: 2px;
}

/* ==========================================================================
   Delivery timeline (page)
   ========================================================================== */
.cs-cart-timeline { padding: 32px 16px 36px; }
.cs-cart-timeline__card {
	margin-top: 22px;
	background: var(--card);
	border-radius: 16px;
	padding: 20px 12px 18px;
	border: 1px solid var(--line);
	position: relative;
}
.cs-cart-timeline__rail {
	position: absolute;
	top: 42px; left: 14%; right: 14%;
	height: 1px;
	background: var(--line);
}
.cs-cart-timeline__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	position: relative;
}
.cs-cart-timeline__step { text-align: center; }
.cs-cart-timeline__dot {
	/* MIUI workaround */
	position: relative;
	width: 40px; height: 40px;
	margin: 0 auto 10px;
	display: flex; align-items: center; justify-content: center;
}
.cs-cart-timeline__dot::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); z-index: 0;
}
.cs-cart-timeline__dot > * { position: relative; z-index: 1; }
.cs-cart-timeline__step.is-active .cs-cart-timeline__dot::before {
	background: var(--accent); border-color: var(--accent);
}
.cs-cart-timeline__title {
	font-family: var(--cs-font-serif);
	font-size: 13px; font-weight: 600;
	color: var(--fg); line-height: 1.15;
}
.cs-cart-timeline__sub {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; color: var(--muted);
	margin-top: 3px; letter-spacing: 0.02em;
}
.cs-cart-timeline__dates {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--line);
	display: flex; justify-content: space-between; gap: 10px;
}
.cs-cart-timeline__date-block { min-width: 0; }
.cs-cart-timeline__date-block--accent { text-align: right; }
.cs-cart-timeline__date-label {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--muted);
}
.cs-cart-timeline__date-label--accent { color: var(--accent); }
.cs-cart-timeline__date-value {
	font-family: var(--cs-font-serif);
	font-size: 16px; font-weight: 600;
	color: var(--fg);
	margin-top: 2px;
}
.cs-cart-timeline__rush {
	margin-top: 12px;
	padding: 12px 14px;
	background: rgba(210, 59, 59, .06);
	border: 1px solid rgba(210, 59, 59, .25);
	border-radius: 12px;
	display: flex; gap: 10px; align-items: flex-start;
	font-family: var(--cs-font-sans);
	font-size: 12.5px; color: var(--fg); line-height: 1.5;
}
.cs-cart-timeline__rush svg { margin-top: 2px; flex-shrink: 0; }
body .cs-cart-timeline__rush a { color: var(--cs-urgent) !important; font-weight: 600; }

/* ==========================================================================
   Wedding date acknowledgment (soft / dark)
   ========================================================================== */
.cs-wd-ack {
	/* MIUI workaround */
	position: relative;
	padding: 14px 16px;
	color: var(--fg);
	overflow: hidden; /* keep — ::sheen child uses absolute and must clip */
}
.cs-wd-ack::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 14px;
	background: var(--card);
	background-image: repeating-linear-gradient(135deg, rgba(181,139,91,.06) 0, rgba(181,139,91,.06) 1px, transparent 1px, transparent 14px);
	border: 1px solid var(--line); z-index: 0;
}
.cs-wd-ack > * { position: relative; z-index: 1; }
.cs-wd-ack--dark { color: #F6F1EA; }
.cs-wd-ack--dark::before {
	background: #1A1412;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 14px);
	border-color: rgba(255,255,255,.08);
}
.cs-wd-ack__sheen {
	position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	animation: csSheen 4200ms ease-in-out 600ms infinite;
	pointer-events: none;
}
.cs-wd-ack--dark .cs-wd-ack__sheen { background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); }
.cs-wd-ack__inner { position: relative; display: flex; align-items: center; gap: 12px; }
.cs-wd-ack__icon {
	/* MIUI workaround */
	position: relative;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cs-wd-ack__icon::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--accent-soft); z-index: 0;
}
.cs-wd-ack__icon > * { position: relative; z-index: 1; }
.cs-wd-ack--dark .cs-wd-ack__icon::before { background: rgba(255,255,255,.06); }
.cs-wd-ack__copy { flex: 1; min-width: 0; }
.cs-wd-ack__eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--accent); margin-bottom: 2px;
}
.cs-wd-ack__date {
	font-family: var(--cs-font-serif);
	font-size: 19px; font-weight: 500; line-height: 1.1;
	letter-spacing: -0.01em;
}
.cs-wd-ack__sub {
	margin-top: 4px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	color: var(--muted);
}
.cs-wd-ack--dark .cs-wd-ack__sub { color: rgba(246,241,234,.7); }
.cs-wd-ack__readyby { color: var(--fg); font-weight: 600; }
.cs-wd-ack--dark .cs-wd-ack__readyby { color: #fff; }
.cs-wd-ack__est { opacity: .55; }

/* Drawer-specific date-ack slot follows the design's tone='soft' on a darker surface */
.cs-cart-drawer__date-ack { display: contents; }

/* ==========================================================================
   Trust grid (page)
   ========================================================================== */
.cs-cart-trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 18px;
}
.cs-cart-trust-card {
	/* MIUI workaround */
	position: relative;
	padding: 14px;
}
.cs-cart-trust-card::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 14px; background: var(--card); border: 1px solid var(--line); z-index: 0;
}
.cs-cart-trust-card > * { position: relative; z-index: 1; }
.cs-cart-trust-card__icon {
	/* MIUI workaround */
	position: relative;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 10px;
}
.cs-cart-trust-card__icon::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--accent-soft); z-index: 0;
}
.cs-cart-trust-card__icon > * { position: relative; z-index: 1; }
.cs-cart-trust-card__eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--accent); margin-bottom: 4px;
}
.cs-cart-trust-card__title {
	font-family: var(--cs-font-serif);
	font-size: 16px; font-weight: 600; color: var(--fg);
	line-height: 1.2; letter-spacing: -0.01em;
	margin: 0;
}
.cs-cart-trust-card__body {
	margin: 6px 0 0;
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	color: var(--muted); line-height: 1.45;
}

/* ==========================================================================
   Page addon
   ========================================================================== */
.cs-cart-page-addon {
	/* MIUI workaround */
	position: relative;
	padding: 14px;
	display: flex; gap: 12px; align-items: center;
}
.cs-cart-page-addon::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 16px; background: var(--card); border: 1px solid var(--line); z-index: 0;
}
.cs-cart-page-addon > * { position: relative; z-index: 1; }
.cs-cart-page-addon__thumb {
	/* MIUI workaround: img clips itself */
	width: 56px; height: 56px;
	flex-shrink: 0;
	position: relative;
	border-radius: 12px;
	background: var(--bg-alt);
	background-image: repeating-linear-gradient(135deg, rgba(26,20,18,.05) 0, rgba(26,20,18,.05) 1px, transparent 1px, transparent 14px);
}
.cs-cart-page-addon__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	border-radius: 12px;
}
.cs-cart-page-addon__thumb-fallback { display: block; width: 100%; height: 100%; }
.cs-cart-page-addon__meta { flex: 1; min-width: 0; }
.cs-cart-page-addon__eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 9.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--accent); margin-bottom: 3px;
}
.cs-cart-page-addon__name {
	font-family: var(--cs-font-serif);
	font-size: 17px; font-weight: 600; color: var(--fg);
	letter-spacing: -0.01em; line-height: 1.15;
	margin: 0;
}
.cs-cart-page-addon__caption {
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.cs-cart-page-addon__add {
	background: transparent;
	color: var(--fg);
	border: 1px solid var(--fg);
	border-radius: 100px;
	padding: 9px 14px;
	font-family: var(--cs-font-sans);
	font-size: 12px; font-weight: 600;
	cursor: pointer; white-space: nowrap;
	transition: background 140ms, color 140ms, border-color 140ms;
}
.cs-cart-page-addon__add .cs-when-added { display: none; }
.cs-cart-page-addon__add.is-added { background: var(--accent); color: #fff; border-color: var(--accent); }
.cs-cart-page-addon__add.is-added .cs-when-idle  { display: none; }
.cs-cart-page-addon__add.is-added .cs-when-added { display: inline-flex; align-items: center; gap: 4px; }
.cs-cart-page-addon__add.is-pending { opacity: 0.6; pointer-events: none; }

/* On mobile, the inline layout (thumb + meta + button on one row) crushes the
   meta column to ~40px because the button has white-space:nowrap and the
   thumb is fixed-width. The caption then renders one character per line.
   Wrap the button onto its own row and give the text the full remaining width. */
@media (max-width: 767px) {
	.cs-cart-page-addon          { flex-wrap: wrap; row-gap: 10px; }
	.cs-cart-page-addon__add     {
		flex-basis: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.cs-cart-empty {
	text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-cart-empty--drawer { padding: 28px 22px 26px; flex: 1; }
.cs-cart-empty--page   { padding: 40px 24px 48px; }
.cs-cart-empty__bauble {
	/* MIUI workaround */
	position: relative;
	width: 110px; height: 110px;
	display: flex; align-items: center; justify-content: center;
	animation: csFloat 4s ease-in-out infinite;
	margin-bottom: 20px;
}
.cs-cart-empty__bauble::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%;
	background: var(--accent-soft);
	background-image: repeating-linear-gradient(135deg, rgba(181,139,91,.07) 0, rgba(181,139,91,.07) 1px, transparent 1px, transparent 12px);
	z-index: 0;
}
.cs-cart-empty__bauble > * { position: relative; z-index: 1; }
.cs-cart-empty__pearls { display: flex; gap: 8px; }
.cs-cart-empty__pearl {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0%, #f4e9d7 60%, #d8c197 100%);
	box-shadow: inset 0 -2px 3px rgba(0,0,0,.08);
}
.cs-cart-empty__ribbon {
	position: absolute; bottom: 22px;
	font-family: var(--cs-font-serif);
	font-style: italic; font-size: 11px;
	color: var(--accent); letter-spacing: 0.02em;
}
.cs-cart-empty__head {
	font-family: var(--cs-font-serif);
	font-weight: 500;
	color: var(--fg); margin: 0; line-height: 1.05;
	letter-spacing: -0.012em;
}
.cs-cart-empty--drawer .cs-cart-empty__head { font-size: 24px; }
.cs-cart-empty--page   .cs-cart-empty__head { font-size: 30px; }
.cs-cart-empty__sub {
	margin: 10px auto 22px;
	max-width: 320px;
	font-family: var(--cs-font-sans);
	color: var(--muted); line-height: 1.55;
}
.cs-cart-empty--drawer .cs-cart-empty__sub { font-size: 12.5px; }
.cs-cart-empty--page   .cs-cart-empty__sub { font-size: 13.5px; }
.cs-cart-empty__ctas {
	display: flex; flex-direction: column; gap: 8px;
	width: 100%; max-width: 280px;
}
.cs-cart-empty__date-pill {
	margin-top: 22px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	border-radius: 100px;
	background: var(--accent-soft);
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--fg);
}
.cs-cart-empty__date-pill .cs-italic-accent { font-size: 13px; }

/* ==========================================================================
   Order summary
   ========================================================================== */
.cs-cart-summary--drawer { padding: 14px 16px 16px; background: transparent; border-radius: 0; border: none; }
.cs-cart-summary--page   { padding: 20px 18px 22px; background: var(--card); border-radius: 16px; border: 1px solid var(--line); }
.cs-cart-summary__rows { display: flex; flex-direction: column; gap: 8px; }
.cs-cart-summary__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-family: var(--cs-font-sans);
	font-size: 13px; color: var(--fg);
}
.cs-cart-summary__row > span:last-child { font-weight: 600; }
.cs-cart-summary__row-mute   { color: var(--muted); }
.cs-cart-summary__row-accent { color: var(--accent); }
.cs-cart-summary__hr {
	height: 1px; background: var(--line); margin: 12px 0;
}
.cs-cart-summary__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.cs-cart-summary__total-label {
	font-family: var(--cs-font-serif);
	font-size: 20px; font-weight: 500;
	color: var(--fg); letter-spacing: -0.01em;
}
.cs-cart-summary__total-value {
	font-family: var(--cs-font-sans);
	font-size: 22px; font-weight: 700;
	color: var(--fg);
}
.cs-cart-summary__total-value .woocommerce-Price-amount { font-weight: 700; }
.cs-cart-summary__trust {
	margin-top: 10px;
	display: flex;
	align-items: flex-start; /* anchor shield to first line on multi-line wrap */
	justify-content: center;
	gap: 8px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--muted);
	line-height: 1.45;
	text-align: center;
}
.cs-cart-summary__trust > svg { flex-shrink: 0; margin-top: 2px; }
.cs-cart-summary__cta {
	margin-top: 14px;
	width: 100%;
	padding: 15px 20px;
	background: var(--fg); color: #fff;
	border: none; border-radius: 100px;
	font-family: var(--cs-font-sans);
	font-size: 14.5px; font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	box-shadow: 0 8px 22px -10px rgba(42,36,32,.4);
	text-decoration: none;
}
body .cs-cart-summary__cta:hover { color: #fff !important; }
.cs-cart-summary__payments {
	margin-top: 10px;
	text-align: center;
	font-family: var(--cs-font-sans);
	font-size: 10.5px;
	color: var(--muted);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Cart count badge
   ========================================================================== */
.cs-cart-count {
	display: none;
	position: absolute;
	top: -5px; right: -7px;
	background: var(--accent);
	color: #fff;
	font-family: var(--cs-font-sans);
	font-size: 9px; font-weight: 700;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 100px;
	align-items: center; justify-content: center;
	line-height: 1;
}
.cs-cart-count.is-on { display: inline-flex; }

/* ==========================================================================
   Cart page wrapper (.csn-cart) and chrome reset (csn-cart-page)
   ========================================================================== */
.csn-cart {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--cs-font-sans);
	display: block;
}
.csn-cart * { box-sizing: border-box; }

.csn-cart__hero {
	padding: 28px 22px 22px;
	text-align: center;
	position: relative;
}
.csn-cart__hero-eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 10.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--accent); margin-bottom: 10px;
}
.csn-cart__hero-title {
	font-family: var(--cs-font-serif);
	font-size: 36px; line-height: 1.02; letter-spacing: -0.012em;
	color: var(--fg); margin: 0; font-weight: 500;
}
.csn-cart__hero-sub {
	font-family: var(--cs-font-serif);
	font-style: italic;
	font-size: 15.5px;
	color: var(--muted);
	margin: 12px auto 0;
	max-width: 320px;
	line-height: 1.45;
}

.csn-cart__items {
	padding: 0 16px 14px;
	display: flex; flex-direction: column; gap: 12px;
}
.csn-cart > .cs-wd-ack { margin: 6px 16px 18px; }

.csn-cart__timeline-wrap {
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-top: 8px;
}
.csn-cart__trust { padding: 32px 16px 12px; }
.csn-cart__summary-wrap { padding: 20px 16px 12px; }
.csn-cart__addon-wrap { padding: 6px 16px 24px; }
.csn-cart__questions { padding: 16px 20px 28px; text-align: center; }
.csn-cart__questions-pill {
	font-family: var(--cs-font-sans);
	font-size: 11.5px; color: var(--muted);
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 100px;
	background: var(--bg-alt);
}
.csn-cart__questions-pill a { color: var(--accent); text-decoration: none; font-weight: 600; }
body .csn-cart__questions-pill a:hover { color: var(--accent) !important; opacity: .85; }

/* Cart page chrome reset — hide Astra defaults that would pollute the layout */
body.csn-cart-page .ast-breadcrumbs-wrapper,
body.csn-cart-page .entry-header,
body.csn-cart-page .post-thumbnail,
body.csn-cart-page .entry-title,
body.csn-cart-page .woocommerce-cart-form,
body.csn-cart-page .cart-collaterals,
body.csn-cart-page .woocommerce-additional-fields,
body.csn-cart-page .woocommerce-form-coupon-toggle,
body.csn-cart-page .woocommerce-info,
body.csn-cart-page .return-to-shop,
body.csn-cart-page .woocommerce-message,
body.csn-cart-page .woocommerce-error,
body.csn-cart-page .woocommerce-notices-wrapper,
body.csn-cart-page .woocommerce-cart-form__contents { display: none !important; }
body.csn-cart-page .woocommerce-cart-form[hidden] { display: none !important; }
body.csn-cart-page #content,
body.csn-cart-page #primary,
body.csn-cart-page .site-content,
body.csn-cart-page .ast-container,
body.csn-cart-page .entry-content,
body.csn-cart-page .woocommerce {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
	background: var(--bg);
}
body.csn-cart-page { background: var(--bg); }

/* Lock body scroll while drawer open */
body.cs-cart-drawer-open { overflow: hidden; touch-action: none; }

/* Block mobile elastic horizontal scroll on the cart page.
   On iOS Safari and some Chromium-mobile builds (notably MIUI / Redmi Chrome)
   body { overflow-x: hidden } still permits touch-driven elastic horizontal
   bounce — the user sees a ~5–10px horizontal wobble even though no real
   content is wider than the viewport. The position:fixed cart drawer with
   inset:0 anchors to the initial containing block (not the visual viewport)
   on those engines, briefly extending the document scroll width. overflow-x:
   clip blocks the bounce entirely; hidden remains as a fallback for older
   browsers that don't support clip yet. */
body.csn-cart-page              { overflow-x: hidden; overflow-x: clip; }
body.csn-cart-page .csn-cart-shell        { overflow-x: clip; }
body.csn-cart-page .csn-cart-shell__main  { overflow-x: clip; }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes csLineIn {
	0%   { transform: translateY(10px); opacity: 0; }
	100% { transform: translateY(0);    opacity: 1; }
}
@keyframes csAddedPulse {
	0%   { box-shadow: 0 0 0 0 rgba(181,139,91,0), 0 0 0 0 rgba(181,139,91,0); }
	25%  { box-shadow: 0 0 0 8px rgba(181,139,91,.14), 0 12px 28px -10px rgba(181,139,91,.4); }
	100% { box-shadow: 0 0 0 0 rgba(181,139,91,0), 0 0 0 0 rgba(181,139,91,0); }
}
@keyframes csFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@keyframes csSheen {
	0%   { transform: translateX(-30%); opacity: 0; }
	50%  { opacity: 1; }
	100% { transform: translateX(120%); opacity: 0; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	.cs-cart-drawer__panel,
	.cs-cart-drawer__scrim,
	.cs-cart-drawer__ribbon { transition: none !important; }
	.cs-cart-line,
	.cs-cart-empty__bauble,
	.cs-wd-ack__sheen { animation: none !important; }
}

/* ==========================================================================
   Astra leak protection — Astra parent theme paints anchors and buttons via
   `var(--ast-global-color-0)` (blue) on hover/focus with specificity that
   beats unscoped child rules, and may inject default button chrome on
   .button / [type=button] / .wp-block-button-style elements. Pin every
   interactive element of the cart drawer + cart line + page summary on
   every state so Astra cannot win the cascade. Same pattern as info-shared.css.
   ========================================================================== */

/* Drawer close button */
body .cs-cart-drawer__close,
body .cs-cart-drawer__close:link,
body .cs-cart-drawer__close:visited,
body .cs-cart-drawer__close:hover,
body .cs-cart-drawer__close:focus,
body .cs-cart-drawer__close:active {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--fg) !important;
	border: 1px solid var(--line) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: 0;
}
body .cs-cart-drawer__close:focus-visible {
	outline: 2px solid var(--accent) !important;
	outline-offset: 2px !important;
}
body .cs-cart-drawer__close::before,
body .cs-cart-drawer__close::after { content: none !important; }
body .cs-cart-drawer__close svg {
	stroke: currentColor !important;
	fill: none !important;
	display: inline-block !important;
	visibility: visible !important;
	width: 14px !important;
	height: 14px !important;
}

/* Cart-line remove icon (anchor) */
body .cs-cart-line__remove,
body .cs-cart-line__remove:link,
body .cs-cart-line__remove:visited,
body .cs-cart-line__remove:active {
	color: var(--muted) !important;
	background: transparent !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: none !important;
}
body .cs-cart-line__remove:hover,
body .cs-cart-line__remove:focus { color: var(--fg) !important; }
body .cs-cart-line__remove::before,
body .cs-cart-line__remove::after { content: none !important; }
body .cs-cart-line__remove svg {
	stroke: currentColor !important;
	fill: none !important;
	display: inline-block !important;
	visibility: visible !important;
}

/* Cart-line edit anchor */
body .cs-cart-line__edit,
body .cs-cart-line__edit:link,
body .cs-cart-line__edit:visited,
body .cs-cart-line__edit:active {
	color: var(--accent) !important;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
body .cs-cart-line__edit:hover,
body .cs-cart-line__edit:focus { color: var(--accent) !important; opacity: 0.85 !important; }
body .cs-cart-line__edit svg { stroke: currentColor !important; fill: none !important; }


/* Per-line addon "+ Add" button */
body .cs-cart-line__addon-add,
body .cs-cart-line__addon-add:link,
body .cs-cart-line__addon-add:visited,
body .cs-cart-line__addon-add:hover,
body .cs-cart-line__addon-add:focus,
body .cs-cart-line__addon-add:active {
	background: transparent !important;
	color: var(--fg) !important;
	border: 1px solid var(--line) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
body .cs-cart-line__addon-add.is-added,
body .cs-cart-line__addon-add.is-added:hover,
body .cs-cart-line__addon-add.is-added:focus {
	background: var(--accent) !important;
	color: #fff !important;
	border-color: var(--accent) !important;
}
body .cs-cart-line__addon-add svg { stroke: currentColor !important; fill: none !important; }

/* Page addon button */
body .cs-cart-page-addon__add,
body .cs-cart-page-addon__add:link,
body .cs-cart-page-addon__add:visited,
body .cs-cart-page-addon__add:hover,
body .cs-cart-page-addon__add:focus,
body .cs-cart-page-addon__add:active {
	background: transparent !important;
	color: var(--fg) !important;
	border: 1px solid var(--fg) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
body .cs-cart-page-addon__add.is-added,
body .cs-cart-page-addon__add.is-added:hover,
body .cs-cart-page-addon__add.is-added:focus {
	background: var(--accent) !important;
	color: #fff !important;
	border-color: var(--accent) !important;
}

/* Checkout CTA — the dark pill */
body .cs-cart-summary__cta,
body .cs-cart-summary__cta:link,
body .cs-cart-summary__cta:visited,
body .cs-cart-summary__cta:hover,
body .cs-cart-summary__cta:focus,
body .cs-cart-summary__cta:active {
	background: var(--fg) !important;
	color: #fff !important;
	text-decoration: none !important;
	border: none !important;
}
body .cs-cart-summary__cta svg { stroke: currentColor !important; fill: none !important; }

/* "View full bag" link inside drawer */
body .cs-cart-drawer__view-full a,
body .cs-cart-drawer__view-full a:link,
body .cs-cart-drawer__view-full a:visited,
body .cs-cart-drawer__view-full a:active {
	color: var(--muted) !important;
	text-decoration: underline !important;
	background: transparent !important;
	box-shadow: none !important;
}
body .cs-cart-drawer__view-full a:hover,
body .cs-cart-drawer__view-full a:focus { color: var(--fg) !important; }

/* Empty-state CTA buttons (the .cs-btn primitives inside the cart-empty) */
body .cs-cart-empty .cs-btn,
body .cs-cart-empty .cs-btn:link,
body .cs-cart-empty .cs-btn:visited,
body .cs-cart-empty .cs-btn:hover,
body .cs-cart-empty .cs-btn:focus,
body .cs-cart-empty .cs-btn:active { text-decoration: none !important; box-shadow: none !important; }
body .cs-cart-empty .cs-btn--dark,
body .cs-cart-empty .cs-btn--dark:hover,
body .cs-cart-empty .cs-btn--dark:focus { background: var(--fg) !important; color: #fff !important; border-color: var(--fg) !important; }
body .cs-cart-empty .cs-btn--ghost,
body .cs-cart-empty .cs-btn--ghost:hover,
body .cs-cart-empty .cs-btn--ghost:focus { background: transparent !important; color: var(--fg) !important; border-color: var(--fg) !important; }
body .cs-cart-empty .cs-btn svg { stroke: currentColor !important; fill: none !important; }

/* SVG fill locks — outline icons MUST stay fill:none. Attribute selector
   targets only SVGs whose presentation attribute already says fill="none",
   so this beats Astra's `svg { fill: var(--ast-global-color-0) }` while
   leaving filled icons (heart with fill="var(--accent)") alone. */
body .csn-cart svg[fill="none"],
body .cs-cart-drawer svg[fill="none"] { fill: none !important; }

/* Filled hearts (WeddingDateAck, empty-state pill) — lock the inline gold fill
   against any cascade override. Attribute selector is exact-match. */
body .csn-cart svg[fill="var(--accent)"],
body .cs-cart-drawer svg[fill="var(--accent)"] { fill: var(--accent) !important; }

/* Belt + braces: kill Astra's anchor-color rule from leaking into drawer + cart line links */
body .cs-cart-drawer a,
body .cs-cart-line a { box-shadow: none !important; }

/* ==========================================================================
   Cart count pill on Astra HFB cart link — injected via JS (cs-has-count).
   Anchors the absolutely-positioned .cs-cart-count to its host link.
   ========================================================================== */
.cs-has-count {
	position: relative !important;
	overflow: visible !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cs-has-count .cs-cart-count {
	/* default top:-5px right:-7px from earlier rule still applies */
	pointer-events: none;
}

/* ==========================================================================
   Visual-parity round 4 — [hidden] override, mini footer, Astra locks for
   the cart page, kill pseudo-content leaks across cart UI.
   ========================================================================== */

/* HTML5 [hidden] would normally render display:none from the UA stylesheet
   but our author rules (display:grid, display:flex, etc.) override it. Restore
   correct semantics inside cart UI so View-details defaults closed. */
.cs-cart-line__details-list[hidden],
[data-cs-cart-drawer][aria-hidden="true"][hidden],
.cs-cart-drawer__date-ack [data-cs-wd-ack][hidden],
[data-cs-wd-ack][hidden],
[data-cs-wd-chip][hidden],
[data-cs-wd-empty][hidden],
[data-cs-wd-dates][hidden],
[data-cs-wd-rush][hidden] { display: none !important; }

/* ==========================================================================
   Cart page mini footer — design line 156-165
   Dark #1A1412 bg, F6F1EA text, padding 28px 20px 24px, serif logo
   ========================================================================== */
.csn-cart__footer {
	background: #1A1412;
	color: #F6F1EA;
	padding: 28px 20px 24px;
}
.csn-cart__footer-logo {
	font-family: var(--cs-font-serif);
	font-size: 22px;
	margin-bottom: 10px;
	font-weight: 500;
	text-transform: lowercase;
	letter-spacing: -0.01em;
}
.csn-cart__footer-logo em { font-style: italic; font-weight: 400; }
.csn-cart__footer-meta {
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	color: rgba(246, 241, 234, .6);
	line-height: 1.6;
}

/* Hide Astra default footer + scroll-top + WC notices on cart page */
body.csn-cart-page #colophon,
body.csn-cart-page #ast-scroll-top,
body.csn-cart-page .ast-scroll-top-wrap,
body.csn-cart-page .ast-page-header-section,
body.csn-cart-page .page-header,
body.csn-cart-page .woocommerce-breadcrumb,
body.csn-cart-page .woocommerce-store-notice,
body.csn-cart-page .ast-store-notice,
body.csn-cart-page .ast-mobile-header-bar-wrap-2 { display: none !important; }

/* ==========================================================================
   Astra leak protection — cart-page-only interactive elements that the
   round-3 lock block missed. Same pattern: pin every state, kill pseudo.
   ========================================================================== */

/* View details toggle */
body .cs-cart-line__details-toggle,
body .cs-cart-line__details-toggle:link,
body .cs-cart-line__details-toggle:visited,
body .cs-cart-line__details-toggle:hover,
body .cs-cart-line__details-toggle:focus,
body .cs-cart-line__details-toggle:active {
	background: transparent !important;
	color: var(--muted) !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: 0;
}
body .cs-cart-line__details-toggle:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
body .cs-cart-line__details-toggle::before,
body .cs-cart-line__details-toggle::after { content: none !important; }
body .cs-cart-line__details-toggle svg { stroke: currentColor !important; fill: none !important; }

/* Questions pill anchor */
body .csn-cart__questions-pill a,
body .csn-cart__questions-pill a:link,
body .csn-cart__questions-pill a:visited,
body .csn-cart__questions-pill a:hover,
body .csn-cart__questions-pill a:focus,
body .csn-cart__questions-pill a:active {
	color: var(--accent) !important;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 600 !important;
}
body .csn-cart__questions-pill a:hover { opacity: .85 !important; }

/* Rush warning anchor (red) */
body .cs-cart-timeline__rush a,
body .cs-cart-timeline__rush a:link,
body .cs-cart-timeline__rush a:visited,
body .cs-cart-timeline__rush a:hover,
body .cs-cart-timeline__rush a:focus,
body .cs-cart-timeline__rush a:active {
	color: var(--cs-urgent) !important;
	text-decoration: none !important;
	background: transparent !important;
	font-weight: 600 !important;
}

/* Variable-upsell "Choose" anchor (uses .cs-cart-line__addon-add already, but anchor variant needs link/visited locks too) */
body a.cs-cart-line__addon-add,
body a.cs-cart-line__addon-add:link,
body a.cs-cart-line__addon-add:visited,
body a.cs-cart-line__addon-add:hover,
body a.cs-cart-line__addon-add:focus,
body a.cs-cart-line__addon-add:active {
	color: var(--fg) !important;
	background: transparent !important;
	border: 1px solid var(--line) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
body a.cs-cart-page-addon__add,
body a.cs-cart-page-addon__add:link,
body a.cs-cart-page-addon__add:visited,
body a.cs-cart-page-addon__add:hover,
body a.cs-cart-page-addon__add:focus,
body a.cs-cart-page-addon__add:active {
	color: var(--fg) !important;
	background: transparent !important;
	border: 1px solid var(--fg) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Generic anchor inside cart UI (catches anything not covered above) */
body .csn-cart a,
body .csn-cart a:link,
body .csn-cart a:visited { box-shadow: none !important; }
body .csn-cart a:hover,
body .csn-cart a:focus { box-shadow: none !important; }

/* ==========================================================================
   Kill Astra pseudo-content on every cart UI button + anchor.
   Astra's a/button rules can inject ::before/::after icon font glyphs that
   stack on top of our SVGs and look like "doubled" icons. Wipe them.
   ========================================================================== */
body .csn-cart button::before, body .csn-cart button::after,
body .csn-cart a::before, body .csn-cart a::after,
body .cs-cart-drawer button::before, body .cs-cart-drawer button::after,
body .cs-cart-drawer a::before, body .cs-cart-drawer a::after,
body .cs-cart-line button::before, body .cs-cart-line button::after,
body .cs-cart-line a::before, body .cs-cart-line a::after,
body .cs-cart-summary button::before, body .cs-cart-summary button::after,
body .cs-cart-summary a::before, body .cs-cart-summary a::after,
body .cs-cart-page-addon button::before, body .cs-cart-page-addon button::after,
body .cs-cart-page-addon a::before, body .cs-cart-page-addon a::after,
body .cs-cart-empty button::before, body .cs-cart-empty button::after,
body .cs-cart-empty a::before, body .cs-cart-empty a::after { content: none !important; }

/* Lock SVG rendering everywhere in the cart UI — stroke = currentColor, fill
   honored from inline attr (so filled hearts work) but NOT replaced. */
body .csn-cart svg,
body .cs-cart-drawer svg {
	display: inline-block !important;
	visibility: visible !important;
}

/* ==========================================================================
   Desktop styles (>= 768px)
   Mobile-first base above is untouched. Everything desktop lives in
   media queries below. Three breakpoints:
     - 768px:  drawer becomes right-anchored side panel; cart page hero +
               line items + sections get desktop-scale typography & padding,
               but layout stays single-column (avoids cramped 2-col at narrow widths).
     - 1024px: cart page switches to two-column (items + sticky summary rail).
     - 1024px: trust grid becomes 4-up.
   ========================================================================== */

@media (min-width: 768px) {

	/* ----- Cart page — single column, larger typography, more breathing room ----- */
	.csn-cart {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 32px;
	}

	.csn-cart__hero          { padding: 56px 0 28px; }
	.csn-cart__hero-eyebrow  { font-size: 11.5px; margin-bottom: 14px; }
	.csn-cart__hero-title    { font-size: 56px; line-height: 1.05; }
	.csn-cart__hero-sub      { font-size: 17px; max-width: 480px; margin-top: 16px; }

	.csn-cart__items         { padding: 0 0 16px; display: flex; flex-direction: column; gap: 16px; }
	.cs-cart-line            { padding: 20px; }
	.cs-cart-line__photo     { width: 110px; height: 110px; }
	.cs-cart-line__top       { gap: 18px; }
	.cs-cart-line__name      { font-size: 19px; }
	.cs-cart-line__price     { font-size: 17px; }

	.csn-cart > .cs-wd-ack   { margin: 8px 0 16px; }
	.cs-wd-ack               { padding: 16px 20px; }
	.cs-wd-ack__date         { font-size: 22px; }

	/* Timeline + trust + addon escape the 720px wrapper to feel less cramped */
	.csn-cart__timeline-wrap {
		margin: 24px calc(50% - 50vw) 0;
		padding: 0 calc(50vw - 50%);
	}
	.csn-cart__trust         { padding: 56px 0 16px; }
	.csn-cart__addon-wrap    { padding: 8px 0 32px; }
	.csn-cart__summary-wrap  { padding: 24px 0 12px; }
	.csn-cart__questions     { padding: 24px 0 32px; }

	.cs-section-head__title  { font-size: 32px; }

	.cs-cart-timeline        { max-width: 720px; margin: 0 auto; padding: 56px 32px 60px; }
	.cs-cart-timeline__card  { padding: 28px 24px 22px; }
	.cs-cart-timeline__rail  { top: 50px; left: 12%; right: 12%; }
	.cs-cart-timeline__dot   { width: 48px; height: 48px; }
	.cs-cart-timeline__title { font-size: 14.5px; }
	.cs-cart-timeline__sub   { font-size: 11px; }

	.cs-cart-trust-grid      { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
	.cs-cart-trust-card      { padding: 18px 18px 20px; }
	.cs-cart-trust-card__title { font-size: 17px; }
	.cs-cart-trust-card__body  { font-size: 12px; }

	.cs-cart-page-addon      { padding: 16px 18px; }
	.cs-cart-page-addon__name { font-size: 19px; }

	.cs-cart-summary--page   { padding: 24px 22px 26px; }

	/* Footer escapes the 720px wrapper to be full-bleed dark */
	.csn-cart__footer        {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		padding: 32px calc(50vw - 50%);
		text-align: center;
	}

	/* Empty state */
	.cs-cart-empty--page     { padding: 56px 32px 96px; }
	.cs-cart-empty--page .cs-cart-empty__head { font-size: 38px; }

	/* ----- Cart drawer — right-anchored side panel, slides in from right ----- */
	.cs-cart-drawer__panel   {
		top: 0;
		left: auto;
		right: 0;
		bottom: 0;
		width: 440px;
		max-width: 90vw;
		border-radius: 0;
		box-shadow: -20px 0 50px rgba(26, 20, 18, .25);
		transform: translateX(100%);
		transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
		opacity: 0;
	}
	.cs-cart-drawer[aria-hidden="false"] .cs-cart-drawer__panel {
		transform: translateX(0);
		opacity: 1;
	}

	.cs-cart-drawer__grabber { display: none; }
	.cs-cart-drawer__header  { padding: 22px 24px 16px; }
	.cs-cart-drawer__title   { font-size: 24px; }
	.cs-cart-drawer__close   { width: 36px; height: 36px; }
	.cs-cart-drawer__scroll  { padding: 16px 22px 18px; gap: 14px; }
	.cs-cart-drawer__footer  { padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); }
	.cs-cart-summary--drawer { padding: 16px 22px 18px; }

	.cs-cart-line.is-dense                   { padding: 16px; }
	.cs-cart-line.is-dense .cs-cart-line__photo { width: 84px; height: 84px; }

	.cs-cart-empty--drawer                   { padding: 40px 28px 36px; }
	.cs-cart-empty--drawer .cs-cart-empty__head { font-size: 26px; }

	/* Allow trackpad scrolling on background pages with drawer open */
	body.cs-cart-drawer-open                 { overflow: hidden; touch-action: auto; }

}

@media (min-width: 1024px) {

	/* Cart page becomes a two-column layout: items left, sticky summary right.
	   Hero, ack, timeline, trust, addon, questions, footer remain full-width rows. */
	.csn-cart {
		max-width: 1100px;
		padding: 0 40px;
		display: grid;
		grid-template-columns: 1fr 380px;
		column-gap: 48px;
		align-items: start;
	}

	.csn-cart__hero          { grid-column: 1 / -1; grid-row: 1; padding: 64px 0 28px; }
	.csn-cart__items         { grid-column: 1;       grid-row: 2; }
	.csn-cart__summary-wrap  {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		padding: 0;
	}
	.csn-cart > .cs-wd-ack   { grid-column: 1 / -1; grid-row: 3; }
	.csn-cart__timeline-wrap {
		grid-column: 1 / -1;
		grid-row: 4;
		margin: 24px calc(50% - 50vw) 0;
		padding: 0 calc(50vw - 50%);
	}
	.csn-cart__trust         { grid-column: 1 / -1; grid-row: 5; padding: 56px 0 16px; }
	.csn-cart__addon-wrap    { grid-column: 1 / -1; grid-row: 6; max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }
	.csn-cart__questions     { grid-column: 1 / -1; grid-row: 7; }
	.csn-cart__footer        {
		grid-column: 1 / -1;
		grid-row: 8;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
	}

	/* Trust grid switches to 4-up at this width */
	.cs-cart-trust-grid      {
		grid-template-columns: repeat(4, 1fr);
		max-width: 1040px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Cart timeline rail extents — keep dots evenly spaced */
	.cs-cart-timeline__rail  { left: 14%; right: 14%; }
	.cs-cart-timeline        { max-width: 880px; }

}

/* ============================================================
   Empty cart — disable 2-col grid (no items, no summary) so the
   centered empty-state content uses full container width and centers.
   ============================================================ */
@media (min-width: 1024px) {
	.csn-cart.csn-cart--empty {
		display: block;
	}
	.csn-cart.csn-cart--empty .cs-cart-empty--page {
		margin-left: auto;
		margin-right: auto;
	}
}


/* iOS fix: cart links must be position:relative so the count badge anchors correctly */
/* Without this, .cs-cart-count (position:absolute top:-5px right:-7px) escapes to the
   nearest positioned ancestor (.csn-cyo-header or viewport on iOS Safari) and floats
   into the top-right corner of the screen instead of sitting on the cart icon. */
.csn-cyo-header__cart,
.csn-site-nav__cart,
.csn-site-nav__icon {
	position: relative;
	overflow: visible;
}