/**
 * Course Purchasing front-end styles.
 * Ported from the Claude Design source (Courses.dc.html), converted from inline styles to
 * classes. Palette: greens #36613e / #2b4f33 / #8ab592, cream #f5f2ea, ink #443c3c.
 */

.cp-root {
	--cp-cream: #f5f2ea;
	--cp-card: #ffffff;
	--cp-ink: #443c3c;
	--cp-body: #4a4441;
	--cp-green: #36613e;
	--cp-green-dk: #2b4f33;
	--cp-green-md: #63876a;
	--cp-green-lt: #8ab592;
	--cp-green-pale: #e6f0e8;
	--cp-line: #ece5d8;
	--cp-muted: #8a807a;

	font-family: 'Open Sans', sans-serif;
	color: var(--cp-body);
	background: var(--cp-cream);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 90px;
}
.cp-root *,
.cp-root *::before,
.cp-root *::after { box-sizing: border-box; }

/* ---------- sticky selector ---------- */
.cp-selector {
	position: sticky;
	top: var(--cp-nav-offset, 0px);
	z-index: 40;
	background: rgba(245, 242, 234, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #e4ddd0;
	border-right: 1px solid #e4ddd0;
	border-left: 1px solid #e4ddd0;
	max-width: 1080px;
	margin: auto;
}
.cp-selector-inner { max-width: 1080px; margin: 0 auto; padding: 16px 28px 18px; }
.cp-selector-prompt { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; color: var(--cp-ink); margin-bottom: 12px; }
.cp-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* 2x2 up to this point, then all four tiers in a single row — no intermediate 3-then-1 wrap. */
@media (min-width: 900px) {
	.cp-tiers { grid-template-columns: repeat(4, 1fr); }
}

.cp-tier {
	text-align: left;
	cursor: pointer;
	border-radius: 10px;
	padding: 10px 13px;
	transition: all .15s ease;
	font-family: 'Source Sans 3', sans-serif;
	background: #fff;
	color: var(--cp-ink);
	border: 1px solid var(--cp-line);
}
/* Hover/focus/active states are locked to the same 1px border + no transform across all
   states so the theme's global button:hover cannot reflow (bounce) the layout below. The
   .cp-root prefix raises specificity above the theme's `button:hover` rule. */
.cp-root .cp-tier:hover,
.cp-root .cp-tier:focus,
.cp-root .cp-tier:active {
	background: #fff;
	color: var(--cp-ink);
	border: 1px solid var(--cp-green-md);
	padding: 10px 13px;
	box-shadow: none;
	transform: none;
	border-width: 1px;
}
.cp-root .cp-tier.is-active,
.cp-root .cp-tier.is-active:hover,
.cp-root .cp-tier.is-active:focus,
.cp-root .cp-tier.is-active:active {
	background: var(--cp-green);
	color: #fff;
	border: 1px solid var(--cp-green);
	padding: 10px 13px;
	box-shadow: 0 6px 16px -8px rgba(43, 79, 51, 0.7);
	transform: none;
}
.cp-tier-label { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.cp-tier-sub { display: block; font-size: 11px; margin-top: 3px; opacity: .82; }
.cp-tier-blurb { display: block; font-size: 10.5px; margin-top: 6px; line-height: 1.4; opacity: .75; }

.cp-tier-blurb-display { display: none; }
.cp-tier-select { display: none; }

/* ---------- learner-path selector ---------- */
.cp-learner-path-inner { max-width: 1080px; margin: 0 auto; padding: 26px 28px; background: #efe9dd; border-right: 1px solid #e4ddd0; border-left: 1px solid #e4ddd0; border-bottom: 1px solid #e4ddd0; }
.cp-learner-path-heading { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 19px; color: var(--cp-ink); margin: 0 0 4px; }
.cp-learner-path-desc { font-size: 13.5px; color: #6a615c; margin: 0 0 16px; }
.cp-learner-path-choices { display: flex; flex-wrap: wrap; gap: 12px; }

.cp-lp-choice {
	flex: 1 1 280px;
	text-align: left;
	cursor: pointer;
	border-radius: 13px;
	padding: 18px 20px;
	font-family: 'Open Sans', sans-serif;
	transition: all .15s ease;
	background: #fff;
	color: var(--cp-ink);
	border: 1px solid var(--cp-line);
	box-shadow: 0 4px 14px -10px rgba(68, 60, 60, .4);
}
.cp-root .cp-lp-choice:hover,
.cp-root .cp-lp-choice:focus,
.cp-root .cp-lp-choice:active {
	background: #fff;
	color: var(--cp-ink);
	border: 1px solid var(--cp-green-md);
	padding: 18px 20px;
	box-shadow: 0 4px 14px -10px rgba(68, 60, 60, .4);
	transform: none;
}
.cp-root .cp-lp-choice.is-active,
.cp-root .cp-lp-choice.is-active:hover,
.cp-root .cp-lp-choice.is-active:focus,
.cp-root .cp-lp-choice.is-active:active {
	background: var(--cp-green);
	color: #fff;
	border: 1px solid var(--cp-green);
	padding: 18px 20px;
	box-shadow: 0 10px 26px -12px rgba(43, 79, 51, .7);
	transform: none;
}
.cp-lp-choice-title { display: block; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16.5px; }
.cp-lp-choice-sub { display: block; font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; color: #6a615c; }
.cp-lp-choice.is-active .cp-lp-choice-sub { color: #dce8dd; }

.cp-lp-clear { background: none; border: none; cursor: pointer; font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 12.5px; color: #7c6e6e; margin-top: 12px; padding: 2px; }
.cp-root .cp-lp-clear:hover,
.cp-root .cp-lp-clear:focus,
.cp-root .cp-lp-clear:active { background: none; border: none; box-shadow: none; transform: none; text-decoration: underline; padding: 2px; }

/* ---------- main ---------- */
.cp-main { max-width: 1080px; margin: 0 auto; padding: 36px 28px 0; }
.cp-faqs { margin-bottom: 30px; }
.cp-faq { background: #fff; border: 1px solid var(--cp-line); border-radius: 12px; padding: 4px 6px; margin-bottom: 15px; }
.cp-faq:last-child { margin-bottom: 0; }
.cp-faq-head { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; cursor: pointer; padding: 12px 14px; text-align: left; }
/* Override the theme's global button:hover (the FAQ toggle must stay transparent). */
.cp-root .cp-faq-head:hover,
.cp-root .cp-faq-head:focus,
.cp-root .cp-faq-head:active {
	background: transparent;
	border: none;
	padding: 12px 14px;
	box-shadow: none;
	transform: none;
	color: inherit;
}
.cp-faq-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cp-green); flex: 0 0 auto; }
.cp-faq-title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; color: var(--cp-ink); }
.cp-faq-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 13px; color: var(--cp-green); min-width: max-content; }
/* Same arrow glyph in both states — just rotate it when the dropdown is open. */
.cp-faq-arrow { display: inline-block; transition: transform .15s ease; }
.cp-faq-head[aria-expanded="true"] .cp-faq-arrow { transform: rotate(180deg); }
.cp-faq-body { padding: 0 16px 14px; font-size: 14px; line-height: 1.65; color: #5b524e; max-width: 760px; }

.cp-faq p { font-size: 15px; margin-bottom: 15px; }

.cp-section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.cp-section-head--archived { margin-top: 40px; margin-bottom: 10px; }
.cp-section-head h2 { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 22px; color: var(--cp-ink); margin: 0; }
.cp-section-head span { font-size: 13px; color: var(--cp-muted); }

.cp-archived-note { font-size: 13.5px; line-height: 1.6; color: #6a615c; margin: 0 0 18px; max-width: 760px; background: #efe9dd; border: 1px solid #e4dccb; border-radius: 10px; padding: 12px 15px; }

.cp-cards { display: flex; flex-direction: column; gap: 18px; }

/* ---------- card ---------- */
.cp-card {
	background: var(--cp-card);
	border-radius: 14px;
	padding: 22px 24px;
	border: 1px solid var(--cp-line);
	box-shadow: 0 6px 18px -16px rgba(68, 60, 60, 0.4);
}
.cp-card--open { border-left: 4px solid var(--cp-green); box-shadow: 0 12px 30px -20px rgba(43, 79, 51, 0.5); }
/* "I just want the knowledge" path: the open-practice-group highlight is a live-practice
   cue, so suppress it once that mode hides the practice-group content. Border kept at the
   same width (transparent) to avoid a layout shift. */
.cp-root.cp-mode-knowledge .cp-card--open { border-left-color: transparent; box-shadow: none; }

/* Card columns — mobile-first. Default (narrowest): everything stacked, full width, in DOM
   order (content, then practice-group, then purchase options). Two min-width steps progressively
   introduce columns; see the breakpoints below for how the practice-group column folds. */
.cp-card-inner { display: flex; flex-direction: column; gap: 18px; }
.cp-card-content { min-width: 0; }
.cp-card-pg-wrap { min-width: 0; }
.cp-card-options { min-width: 0; display: flex; flex-direction: column; gap: 9px; }

/* Medium: course info + purchase options sit side by side; the practice-group column folds
   under the course info specifically (same column, so it ends up the same width as the
   description text) instead of wrapping under everything. */
@media (min-width: 800px) and (max-width: 999px) {
	.cp-card-inner {
		display: grid;
		grid-template-columns: minmax(260px, 1fr) minmax(230px, 300px);
		grid-template-areas:
			"content options"
			"pg      options";
		gap: 18px 22px;
		align-items: stretch;
	}
	.cp-card-content { grid-area: content; }
	.cp-card-pg-wrap { grid-area: pg; align-self: start; }
	.cp-card-options { grid-area: options; gap: 9px; }
}

/* Wide: all three columns side by side in one row. The pg column is sized the same as the
   options column (col 1 gives up width to accommodate) so neither purchase-options column is
   narrower than the other. */
@media (min-width: 1000px) {
	.cp-card-inner {
		display: grid;
		grid-template-columns: minmax(220px, 1fr) minmax(230px, 300px) minmax(230px, 300px);
		grid-template-areas: "content pg options";
		gap: 22px;
		align-items: stretch;
	}
	.cp-card-content { grid-area: content; }
	.cp-card-pg-wrap { grid-area: pg; align-self: start; }
	.cp-card-options { grid-area: options; gap: 9px; }
}

.cp-badge { display: inline-block; font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 4px 10px; margin-right: 10px; }
.cp-badge--open { color: #fff; background: var(--cp-green); }
.cp-badge--upcoming { color: #7c6e6e; background: #efe9dd; border: 1px solid #e2d8c6; }
.cp-badge--archived { color: #7c6e6e; background: #efe9dd; border: 1px solid #e2d8c6; }

.cp-card-title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--cp-ink); margin: 10px 0 8px; scroll-margin-top: calc(var(--cp-scroll-offset, 0px) + 16px); }
.cp-card-hook { font-size: 14.5px; line-height: 1.62; color: #574f4b; margin: 0 0 14px; max-width: 46ch; }
.cp-card-about { display: inline-block; font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--cp-green); text-decoration: none; border-bottom: 1.5px solid #a9c6af; padding-bottom: 2px; }
.cp-card-about:hover { border-color: var(--cp-green); }

.cp-card-prereq { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cp-line); font-size: 13px; line-height: 1.55; color: #6a615c; }
.cp-card-prereq-label { display: block; font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cp-muted); margin-bottom: 3px; }
.cp-card-prereq-body a { color: var(--cp-green); text-decoration: underline; }

.cp-pl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding: 10px 13px; border-radius: 9px; font-size: 13px; line-height: 1.5; color: #6a615c; border: 1px dashed #ddd4c5; }
.cp-pl--open { color: #2b4f33; background: var(--cp-green-pale); border: 1px solid var(--cp-green-lt); }
.cp-pl--archived { background: #f8f5ef; border: 1px solid var(--cp-line); }
.cp-pl-cal { flex: 0 0 auto; opacity: .75; position: relative; }
.cp-pl-link { color: var(--cp-green); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid #c7d9ca; white-space: nowrap; }
.cp-pl-link:hover { border-color: var(--cp-green); }

/* ---------- practice-group column ---------- */
/* The bordered "own column" box — same tokens as the old .cp-pl callout: dashed/neutral by
   default (upcoming), pale-green fill + solid green border when the group is open. */
.cp-card-pg {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 14px 16px;
	border-radius: 11px;
	border: 1px dashed #ddd4c5;
	color: #6a615c;
	font-size: 13px;
}
.cp-card-pg--open { background: var(--cp-green-pale); border: 1px solid var(--cp-green-lt); color: #2b4f33; }
.cp-pg-badge .cp-badge { margin-right: 0; }
.cp-pg-date { display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 1.4; }
.cp-pg-seats { font-size: 12.5px; opacity: .85; }
.cp-pg-waitlist { display: inline-block; width: fit-content; }
.cp-pg-options { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
/* Unavailable practice/bundle options are hidden outright here (rather than grayed out like the
   regular options column) so the dashed/pale-green box stays snug around what's actually orderable. */
.cp-pg-options .cp-opt--disabled { display: none; }

/* ---------- option rows ---------- */
/* Three stacked rows (radio+label / price+tag / hint text) rather than a 3-column layout — the
   options column is narrower now that it shares a card with the practice-group column. */
.cp-opt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 11px;
	transition: all .15s ease;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--cp-line);
}
.cp-opt:hover:not(.cp-opt--disabled) { border-color: var(--cp-green-md); }
.cp-opt.is-selected { background: var(--cp-green-pale); border: 1.5px solid var(--cp-green); }
.cp-opt--disabled { cursor: default; background: #faf8f3; opacity: .62; }

/* Radio — fix: dot perfectly centered. Absolute centering with an even 8px dot avoids the
   sub-pixel drift of fitting a 9px dot inside an 18px circle's 14px content box. */
.cp-radio {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: 0 0 auto;
	border: 2px solid var(--cp-green-md);
	background: #fff;
}
.cp-opt--disabled .cp-radio { border-color: #cfc7bd; }
.cp-opt.is-selected .cp-radio { border-color: var(--cp-green); }
.cp-radio-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cp-green);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.6);
	transition: opacity .12s ease, transform .12s ease;
}
.cp-opt.is-selected .cp-radio-dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cp-opt-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-opt-label { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 14px; color: var(--cp-ink); line-height: 1.25; }
.cp-opt-recommend { flex: 0 0 auto; font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--cp-green); border-radius: 6px; padding: 3px 8px; }
.cp-opt-mid { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cp-opt-price { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; color: var(--cp-ink); }
.cp-opt.is-selected .cp-opt-price { color: var(--cp-green); }
.cp-opt--disabled .cp-opt-price { color: #a59b94; }
.cp-opt-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #a08f73; text-transform: uppercase; letter-spacing: .04em; }
.cp-opt-sub { font-size: 11.5px; color: var(--cp-muted); }

/* ---------- group picker (pills) ---------- */
.cp-groups { margin-top: 7px; padding-top: 11px; border-top: 1px dashed var(--cp-line); }
.cp-groups-label { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cp-muted); margin-bottom: 8px; }
.cp-groups-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.cp-group-pill {
	display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
	flex: 1 1 auto; min-width: 128px;
	cursor: pointer; text-align: left;
	background: #fff; color: var(--cp-ink);
	border: 1px solid var(--cp-line); border-radius: 9px;
	padding: 8px 12px;
	font-family: 'Source Sans 3', sans-serif;
	transition: border-color .15s ease, background .15s ease;
}
/* Lock hover/focus/active to a stable border so the theme's global button:hover can't reflow. */
.cp-root .cp-group-pill:hover:not(.is-disabled),
.cp-root .cp-group-pill:focus:not(.is-disabled),
.cp-root .cp-group-pill:active:not(.is-disabled) {
	background: #fff; color: var(--cp-ink);
	border: 1px solid var(--cp-green-md);
	padding: 8px 12px; box-shadow: none; transform: none;
}
.cp-root .cp-group-pill.is-active,
.cp-root .cp-group-pill.is-active:hover,
.cp-root .cp-group-pill.is-active:focus,
.cp-root .cp-group-pill.is-active:active {
	background: var(--cp-green-pale); color: var(--cp-ink);
	border: 1.5px solid var(--cp-green); padding: 7.5px 11.5px;
	box-shadow: none; transform: none;
}
.cp-group-pill.is-disabled { cursor: default; opacity: .55; background: #faf8f3; }
.cp-group-pill-label { font-weight: 700; font-size: 13px; line-height: 1.25; }
.cp-group-pill-time { font-size: 11px; color: var(--cp-muted); line-height: 1.3; }
.cp-group-pill.is-active .cp-group-pill-time { color: var(--cp-ink); }
.cp-group-pill-full { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #a08f73; margin-top: 2px; }

.cp-groups-compare {
	display: inline-block; margin-top: 9px; padding: 0;
	background: none; border: none; cursor: pointer;
	font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 12.5px;
	color: var(--cp-green); text-decoration: underline; text-underline-offset: 2px;
}
.cp-root .cp-groups-compare:hover,
.cp-root .cp-groups-compare:focus,
.cp-root .cp-groups-compare:active { background: none; border: none; box-shadow: none; transform: none; color: var(--cp-green-dk); padding: 0; }

/* Group-difference disclosure extras (reuses .cp-faq). */
.cp-group-times { margin: 12px 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: #5b524e; }
.cp-group-times strong { color: var(--cp-ink); }
.cp-group-blurb { display: block; font-size: 12.5px; color: var(--cp-muted); line-height: 1.5; margin: 1px 0 6px; }
.cp-faq-image { margin-top: 12px; }
.cp-faq-image .cp-group-map { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--cp-line); display: block; }

/* ---------- compare lightbox ---------- */
.cp-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* HTML [hidden] would otherwise be overridden by display:flex above — keep it closable. */
.cp-lightbox[hidden] { display: none; }
.cp-lightbox-backdrop { position: absolute; inset: 0; background: rgba(38, 34, 32, 0.72); }
.cp-lightbox-body { position: relative; display: flex; flex-direction: column; align-items: center; background: white; max-width: min(940px, 96vw); max-height: 92vh; overflow: auto; padding: 20px; border-radius: 10px; }
.cp-lightbox-img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.cp-lightbox-cap { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 14px; width: 100%; font-size: 13.5px; color: var(--cp-ink); }
.cp-lightbox-cap-item { flex: 1 1 240px; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.cp-lightbox-cap-head strong { color: var(--cp-ink); }
.cp-lightbox-cap-blurb { color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; }

/* Clean circle sitting above the image, right-aligned. Fully locked against the theme's global
   button styles (which were making it an oval with a green border). */
.cp-root .cp-lightbox-close,
.cp-root .cp-lightbox-close:hover,
.cp-root .cp-lightbox-close:focus,
.cp-root .cp-lightbox-close:active {
	align-self: flex-end;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 34px; height: 34px; min-width: 0;
	margin: 0 0 10px; padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--cp-line);
	box-shadow: none; transform: none;
	color: var(--cp-ink);
	font-size: 20px; line-height: 1;
	cursor: pointer;
}
.cp-root .cp-lightbox-close:hover,
.cp-root .cp-lightbox-close:focus { background: var(--cp-cream); }

.cp-footnote { text-align: center; color: var(--cp-muted); font-size: 12.5px; padding: 34px 0 10px; }
.cp-footnote strong { color: #6a615c; }

/* ---------- floating cart ---------- */
.cp-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; }
.cp-cart-inner { max-width: 1080px; margin: 0 auto; padding: 0 28px 22px; display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; }
.cp-cart-inner > * { pointer-events: auto; }

/* Box wraps the panel + toggle so both are always exactly the same width (sized by content). */
.cp-cart-box { display: flex; flex-direction: column; gap: 10px; max-width: min(420px, 100%); min-width: min(220px, 100%); }
.cp-cart-box > * { width: 100%; }

.cp-cart-panel { background: #fff; border: 1px solid #e4ddd0; border-radius: 14px; box-shadow: 0 18px 50px -18px rgba(68, 60, 60, 0.55); padding: 16px 16px 14px; animation: cpCartIn .18s ease; }
@keyframes cpCartIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cp-cart-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; color: var(--cp-ink); }
.cp-cart-panel-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cp-cart-tier { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; color: var(--cp-muted); }
.cp-cart-hide { background: none; border: none; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 11px; color: var(--cp-muted); padding: 0; line-height: 1; text-decoration: underline; text-underline-offset: 2px; }
.cp-root .cp-cart-hide:hover,
.cp-root .cp-cart-hide:focus,
.cp-root .cp-cart-hide:active { background: none; border: none; box-shadow: none; transform: none; color: var(--cp-ink); padding: 0; }
.cp-cart-items { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.cp-cart-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; background: #f8f5ef; border-radius: 9px; }
.cp-cart-item-main { flex: 1; min-width: 0; }
.cp-cart-item-title { font-size: 13px; font-weight: 700; color: var(--cp-ink); line-height: 1.3; }
.cp-cart-item-opt { font-size: 11.5px; color: var(--cp-muted); margin-top: 1px; }
.cp-cart-item-price { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--cp-green); white-space: nowrap; }
.cp-cart-item-remove { background: none; border: none; cursor: pointer; color: #b3a89f; font-size: 16px; line-height: 1; padding: 0 0 0 2px; }
.cp-cart-item-remove:hover { color: #7c6e6e; background-color: transparent; }
.cp-cart-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--cp-line); }
.cp-cart-total-row > span:first-child { font-size: 13px; color: #5b524e; }
.cp-cart-total { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 20px; color: var(--cp-ink); }
.cp-checkout-btn { width: 100%; margin-top: 12px; background: var(--cp-green); color: #fff; border: none; border-radius: 9px; padding: 12px; font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.cp-checkout-btn:hover:not(:disabled) { background: var(--cp-green-dk); }
.cp-checkout-btn:disabled { opacity: .7; cursor: default; }
.cp-cart-error { color: #b32d2e; font-size: 12px; margin-top: 8px; text-align: center; }

.cp-cart-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--cp-green); color: #fff; border: none; border-radius: 13px; box-shadow: 0 14px 38px -14px rgba(43, 79, 51, 0.85); padding: 15px 20px; cursor: pointer; font-family: 'Source Sans 3', sans-serif; }
.cp-cart-toggle:hover { background: var(--cp-green-dk); }
.cp-cart-toggle-left { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; }
.cp-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: var(--cp-green-lt); color: #23341f; border-radius: 12px; font-weight: 700; font-size: 13px; padding: 0 7px; }
.cp-cart-toggle-total { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 17px; }

@media (max-width: 640px) {
	.cp-main { padding: 24px 16px 0; }
	.cp-selector-inner { padding: 14px 16px; }
	.cp-cart-inner { padding: 0 16px 16px; }
	.cp-cart-box { width: 100%; }
	.cp-tiers { display: none; }
	.cp-tier-select {
		display: block;
		width: 100%;
		padding: 10px 12px;
		border-radius: 10px;
		border: 1px solid var(--cp-line);
		background: #fff;
		font-family: 'Source Sans 3', sans-serif;
		font-size: 14px;
		color: var(--cp-ink);
		appearance: auto;
	}
	.cp-tier-blurb-display {
		display: block;
		font-size: 15px;
		line-height: 1.5;
		color: black;
		font-weight: bold;
		margin-top: 10px;
		padding: 0 2px;
	}
}