/**
 * GradCommerce storefront — design-token-driven styles.
 *
 * No brand color is ever hardcoded here. Every brand color, font, and radius
 * comes from the `--gradcom-*` custom properties GradCommerce\Settings\DesignTokens
 * (PKT-02) emits in wp_head from rep Branding settings — so changing the rep's
 * primary color changes this stylesheet's output with zero CSS edits (PKT-09
 * acceptance).
 *
 * `--gradcom-color-primary` / `--gradcom-color-secondary` / `--gradcom-color-accent` /
 * `--gradcom-font-heading` / `--gradcom-font-body` / `--gradcom-radius` are
 * consumed here but declared elsewhere (PKT-02's DesignTokens) — this file
 * never redefines them or supplies a color fallback for them.
 *
 * `--gradcom-school-primary` / `--gradcom-school-secondary` are the *school's*
 * own colors. They are per-request data, not site-wide tokens, so the school
 * header emits them as element-scoped custom properties (already validated to a
 * hex literal by StorefrontController::hex_color()). Every rule that reads one
 * falls back to the rep token, so a school with no colors set still renders in
 * the rep's brand rather than breaking.
 *
 * The disclosed exceptions: the neutrals below (`--gradcom-on-primary`,
 * `--gradcom-surface`, `--gradcom-surface-alt`, `--gradcom-ink`,
 * `--gradcom-ink-muted`, `--gradcom-border`, `--gradcom-hero-base`,
 * `--gradcom-hero-ink`, `--gradcom-shadow-tint`) are *structural* (contrast /
 * surface / rule) tokens, not brand tokens — they cover cases no rep Branding
 * setting currently expresses. Each is itself a custom property, overridable in
 * one line by a theme override or a future packet, never a rule baked with a
 * literal color value. Flagged in the PKT-09 report as a deliberate, minor
 * decision rather than something silently smuggled past "no hardcoded colors."
 *
 * `--gradcom-space-*` are template-system layout tokens (spacing/sizing), not
 * brand tokens — PRD §7's Branding settings do not include a spacing scale, so
 * these are this package's own sensible defaults, still expressed as
 * overridable custom properties per the "spacing as custom properties" build
 * note.
 */

:root {
	--gradcom-on-primary: #fff;
	--gradcom-surface: #fff;
	--gradcom-surface-alt: #f7f6f2;
	--gradcom-ink: #1c1c1c;
	--gradcom-ink-muted: #6b6b6b;
	--gradcom-border: #e2e0d8;
	--gradcom-hero-base: #1c1c1c;
	--gradcom-hero-ink: #fff;
	--gradcom-shadow-tint: rgb(0 0 0 / 12%);

	--gradcom-space-1: 0.25rem;
	--gradcom-space-2: 0.5rem;
	--gradcom-space-3: 1rem;
	--gradcom-space-4: 1.5rem;
	--gradcom-space-5: 2rem;
	--gradcom-space-6: 3rem;

	/* Distance from the top of the viewport that a sticky element parks at. Sized for
	   the theme's own sticky header, which this stylesheet cannot measure — override it
	   here (or from the theme) if that header's height changes. */
	--gradcom-sticky-offset: 6rem;

	--gradcom-max-width: 75rem;
	--gradcom-card-radius: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Base / utility
 * ---------------------------------------------------------------------- */

.gradcom-harness-root,
.gradcom-storefront,
.gradcom-school-header,
.gradcom-deadline-banner,
.gradcom-package-grid,
.gradcom-product-grid,
.gradcom-package-card,
.gradcom-product-card,
.gradcom-featured-package,
.gradcom-package-detail,
.gradcom-fit-add-to-cart,
.gradcom-fit-fields,
.gradcom-size-selector,
.gradcom-upsell-slate,
.gradcom-sticky-cart-bar,
.gradcom-price-installment {
	box-sizing: border-box;
	font-family: var(--gradcom-font-body);
}

.gradcom-harness-root *,
.gradcom-storefront *,
.gradcom-school-header *,
.gradcom-deadline-banner *,
.gradcom-package-grid *,
.gradcom-product-grid *,
.gradcom-size-selector *,
.gradcom-upsell-slate *,
.gradcom-sticky-cart-bar *,
.gradcom-price-installment * {
	box-sizing: inherit;
}

.gradcom-harness-root {
	max-width: var(--gradcom-max-width);
	margin-inline: auto;
	padding: var(--gradcom-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-5);
}

.gradcom-storefront {
	color: var(--gradcom-ink);
}

.gradcom-storefront__main {
	max-width: var(--gradcom-max-width);
	margin-inline: auto;
	padding: var(--gradcom-space-5) var(--gradcom-space-4) var(--gradcom-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-5);
}

.gradcom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gradcom-space-2);
	padding: var(--gradcom-space-3) var(--gradcom-space-4);
	border: 2px solid var(--gradcom-color-primary);
	border-radius: var(--gradcom-radius);
	background: var(--gradcom-color-primary);
	color: var(--gradcom-on-primary);
	font-family: var(--gradcom-font-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
}

/*
 * The modifiers deliberately double up the class (`.gradcom-button` +
 * modifier) to buy specificity, rather than relying on source order.
 *
 * A single-class modifier loses to any theme rule of the shape
 * `body .gradcom-button { … }` — which is exactly what the SECS Avada child
 * theme ships, and it silently repainted every accent button in the rep's
 * primary color. The plugin has to be able to state its own design intent on a
 * theme it does not control (same reasoning as the school header's explicit
 * `color`, and the PKT-09 theme-compatibility matrix). `!important` is not
 * used: a theme that genuinely wants to restyle these can still do so by
 * matching this specificity, which is a deliberate opt-in rather than an
 * accident of ordering.
 */
/*
 * Each modifier restates the full `border` shorthand, never just
 * `border-color`. The same child theme sets `border: none` at a specificity
 * these modifiers do not beat on the shorthand's other longhands, so a
 * modifier that only recolored the border produced a *transparent, borderless*
 * button — an invisible control, not a restyled one.
 */
.gradcom-button.gradcom-button--secondary {
	border: 2px solid var(--gradcom-color-primary);
	background: transparent;
	color: var(--gradcom-color-primary);
}

.gradcom-button.gradcom-button--accent {
	border: 2px solid var(--gradcom-color-accent);
	background: var(--gradcom-color-accent);
	color: var(--gradcom-ink);
}

.gradcom-button--large {
	width: 100%;
	padding-block: var(--gradcom-space-3);
	font-size: 1.0625rem;
	min-height: 56px;
}

.gradcom-button:hover,
.gradcom-button:focus-visible {
	background: var(--gradcom-color-secondary);
	border-color: var(--gradcom-color-secondary);
	color: var(--gradcom-on-primary);
}

.gradcom-button.gradcom-button--secondary:hover,
.gradcom-button.gradcom-button--secondary:focus-visible {
	border: 2px solid var(--gradcom-color-primary);
	background: var(--gradcom-color-primary);
	color: var(--gradcom-on-primary);
}

.gradcom-button.gradcom-button--accent:hover,
.gradcom-button.gradcom-button--accent:focus-visible {
	border: 2px solid var(--gradcom-color-accent);
	background: var(--gradcom-color-accent);
	color: var(--gradcom-ink);
	filter: brightness(1.06);
}

/*
 * Available to assistive technology, invisible on screen. Used where the visible
 * design already conveys a control's purpose but the accessible name must still
 * exist (the school selector's label, whose `<select>` reads "Find your school…"
 * as its first option).
 */
.gradcom-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * School selector (PRD §7.1)
 *
 * This renders on the rep's own home page, which PageDetector does not treat
 * as a GradCommerce page — SchoolSelector enqueues this stylesheet itself so
 * these rules are present there.
 * ---------------------------------------------------------------------- */

.gradcom-school-selector {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-2);
	font-family: var(--gradcom-font-body);
}

/*
 * `align-self: stretch` + `width: 100%` rather than a flex basis.
 *
 * The form above is a flex *column*, so `flex-basis` there sizes height, not
 * width — width comes from the cross-axis alignment. The SECS child theme sets
 * `align-items: flex-end` on the form (it was written for the older plugin's
 * side-by-side select + button), which collapsed this row to its content width
 * and parked it against the right edge of the card. Stretching explicitly fixes
 * it without depending on what the parent's `align-items` happens to be, and
 * `width: 100%` keeps it full-width if a theme makes the form a flex row
 * instead. Diagnosed from computed styles in the browser, not from reading the
 * CSS — the rule looked correct on paper.
 */
.gradcom-school-selector__controls {
	display: flex;
	align-self: stretch;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gradcom-space-2);
}

.gradcom-school-selector__field {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 52px;
	padding: 0 var(--gradcom-space-3);
	border: 1.5px solid var(--gradcom-border);
	border-radius: var(--gradcom-radius);
	background: var(--gradcom-surface);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gradcom-ink);
}

/*
 * The submit button disappears only once the enhancement script confirms that
 * choosing an option navigates on its own (it adds `gradcom-is-enhanced`). With
 * JavaScript off the class never lands, the button stays, and the form is still
 * submittable — the no-JS baseline PKT-11 was built around is preserved rather
 * than traded away for the tidier look.
 */
.gradcom-school-selector.gradcom-is-enhanced .gradcom-school-selector__submit {
	display: none;
}

/* Never remove a focus indicator; only reinforce it (WCAG 2.2 AA). */
.gradcom-harness-root a:focus-visible,
.gradcom-harness-root button:focus-visible,
.gradcom-harness-root input:focus-visible,
.gradcom-harness-root select:focus-visible,
.gradcom-harness-root [tabindex]:focus-visible,
.gradcom-storefront a:focus-visible,
.gradcom-storefront button:focus-visible,
.gradcom-storefront input:focus-visible,
.gradcom-storefront select:focus-visible,
.gradcom-storefront [tabindex]:focus-visible {
	outline: 3px solid var(--gradcom-color-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Section intro (eyebrow / heading / lead)
 * ---------------------------------------------------------------------- */

.gradcom-section-intro {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-2);
}

.gradcom-section-intro--left {
	text-align: start;
	margin-inline: 0;
	max-width: none;
	gap: var(--gradcom-space-1);
}

.gradcom-section-intro__eyebrow {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gradcom-color-accent);
}

.gradcom-section-intro__heading {
	font-family: var(--gradcom-font-heading);
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--gradcom-color-primary);
	margin: 0;
}

.gradcom-section-intro--left .gradcom-section-intro__heading {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.gradcom-section-intro__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gradcom-ink);
}

.gradcom-section-intro__note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--gradcom-ink-muted);
}

/* -------------------------------------------------------------------------
 * School header (PRD §7.2)
 * ---------------------------------------------------------------------- */

/*
 * Full-bleed out of whatever container the theme wraps the content in.
 *
 * The negative inline margins alone are enough: a block box with `width: auto`
 * stretches to its containing block *plus* the margins it gives back, which is
 * exactly 100vw. Deliberately NOT `width: 100vw` — `vw` includes the classic
 * scrollbar's width, so that version overshoots by ~15px on Windows and adds a
 * horizontal scrollbar. And deliberately no `overflow: clip` on the ancestor:
 * that clips this bleed right back to the theme's container (found by rendering
 * it — the header lost its bleed and the school name was cut off at the left).
 */
.gradcom-school-header {
	position: relative;
	isolation: isolate;
	/* Contains the blur layer's deliberate outward bleed (see ::before). */
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	min-height: 15.5rem;
	display: flex;
	align-items: center;
	background-color: var(--gradcom-hero-base);
	background-size: cover;
	background-position: center;
	color: var(--gradcom-hero-ink);
}

/*
 * The blurred photographic layer. It inherits the element's own
 * `background-image` (set inline from the school's header image), so the
 * template still emits exactly one URL and this file never names an asset.
 * Bled outwards by 2rem so the blur's soft edge never shows as a light band.
 */
.gradcom-school-header::before {
	content: "";
	position: absolute;
	inset: -2rem;
	z-index: -2;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(4px);
}

/*
 * Tinted, not blacked out. The gradient fades to transparent rather than to a
 * second solid colour so the right-hand side of the photo stays readable —
 * a flat 82%-opacity two-stop gradient buried the image entirely (found by
 * rendering it against the real Hiram header photo).
 */
.gradcom-school-header__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			90deg,
			var(--gradcom-school-primary, var(--gradcom-color-primary)) 0%,
			transparent 100%
		),
		linear-gradient(0deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 25%));
	opacity: 0.88;
}

/*
 * The single row inside the hero: identity on one side, school logo on the
 * other, both vertically centred against the hero's own height. There is no
 * utility row — the site navigation owns the cart control, so a second one
 * here was duplicate chrome (and it was what pushed the logo off centre).
 */
.gradcom-school-header__inner {
	position: relative;
	width: 100%;
	max-width: var(--gradcom-max-width);
	margin-inline: auto;
	padding: var(--gradcom-space-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--gradcom-space-3);
}

.gradcom-school-header__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gradcom-space-1);
	min-width: 0;
}

.gradcom-school-header__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gradcom-space-1) var(--gradcom-space-3);
	margin: var(--gradcom-space-1) 0 0;
}

/* Doubled class for the same reason as the school name above: theme link rules. */
.gradcom-school-header .gradcom-school-header__switch,
.gradcom-school-header .gradcom-school-header__back {
	color: var(--gradcom-hero-ink);
	text-decoration: underline;
	font-size: 0.8125rem;
	font-weight: 700;
	opacity: 0.85;
}

.gradcom-school-header .gradcom-school-header__switch:hover,
.gradcom-school-header .gradcom-school-header__switch:focus-visible,
.gradcom-school-header .gradcom-school-header__back:hover,
.gradcom-school-header .gradcom-school-header__back:focus-visible {
	color: var(--gradcom-hero-ink);
	opacity: 1;
}

/*
 * Explicit `color`, not inherited from `.gradcom-school-header`: a theme's own
 * global heading rule (e.g. `h1 { color: ... }`) targets this element
 * directly and an inherited value never wins against any rule that directly
 * matches the element, regardless of specificity — found via the
 * theme-compatibility matrix against Astra (a heading color rule collapsed
 * contrast to 1.18:1 against the primary-color background before this fix;
 * see the PKT-09 report).
 *
 * The doubled class is the second half of that fix. A single-class selector is
 * (0,1,0) and loses to any theme rule of the shape `.something h1` — which is
 * what Avada applies on its WooCommerce pages: once this header started
 * rendering on `/cart/` via `[gradcom_school_header]`, the school name computed
 * to grey (107,107,107) on the dark hero while the sibling `<p>` elements stayed
 * white. Contrast on the school's own name is not something to leave to whichever
 * theme is installed.
 */
.gradcom-school-header .gradcom-school-header__name {
	font-family: var(--gradcom-font-heading);
	color: var(--gradcom-hero-ink);
	margin: 0;
	font-size: clamp(1.5rem, 3.6vw, 2.125rem);
	font-weight: 900;
	line-height: 1.05;
}

.gradcom-school-header .gradcom-school-header__tagline {
	color: var(--gradcom-hero-ink);
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.gradcom-school-header__logo {
	height: 7rem;
	width: auto;
	max-width: 60vw;
	object-fit: contain;
	flex: none;
	/* Above the school name on a phone, beside it from tablet up. */
	order: -1;
	filter: drop-shadow(0 4px 16px rgb(0 0 0 / 45%));
}

@media (min-width: 48rem) {
	.gradcom-school-header__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: start;
	}

	.gradcom-school-header__identity {
		align-items: flex-start;
	}

	.gradcom-school-header__links {
		justify-content: flex-start;
	}

	.gradcom-school-header__logo {
		order: 1;
		height: 10rem;
	}
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

/*
 * WooCommerce ships its own notice styles and most themes restyle them; this
 * only guarantees the block occupies its own row and never collapses to zero
 * height when a notice is queued.
 */
.gradcom-notices:not(:empty) {
	margin-block-end: var(--gradcom-space-3);
}

.gradcom-notices ul {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Deadline banner (PRD §7.2 / §7.11)
 * ---------------------------------------------------------------------- */

.gradcom-deadline-banner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gradcom-space-2);
	align-items: baseline;
	justify-content: center;
	padding: var(--gradcom-space-3);
	background: var(--gradcom-color-primary);
	color: var(--gradcom-on-primary);
	font-size: 0.875rem;
	font-weight: 700;
}

.gradcom-deadline-banner__label {
	font-weight: 700;
}

.gradcom-deadline-banner__value {
	color: var(--gradcom-on-primary);
}

/* -------------------------------------------------------------------------
 * Price / installment display (PRD §7.9)
 * ---------------------------------------------------------------------- */

.gradcom-price-installment {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-1);
	margin-block: var(--gradcom-space-2);
}

.gradcom-price-installment__caption {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gradcom-ink-muted);
}

/* The headline figure and its supporting line share a baseline, so the small
   text sits on the big number's baseline rather than its box. */
.gradcom-price-installment__figures {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gradcom-space-2);
}

.gradcom-price-installment__price {
	font-family: var(--gradcom-font-heading);
	font-size: 2.125rem;
	font-weight: 900;
	line-height: 1.05;
	color: var(--gradcom-color-primary);
}

.gradcom-price-installment__secondary {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gradcom-ink-muted);
}

/* A card is a denser surface than a detail page; the same part serves both. */
.gradcom-package-card .gradcom-price-installment__price,
.gradcom-product-card .gradcom-price-installment__price {
	font-size: 1.75rem;
}

/* Empty until PKT-15 mounts the provider's own component; zero intrinsic
   size so its absence never shifts layout (PRD §7.9 MUST). */
.gradcom-price-installment__bnpl-slot:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * Package / product grids and cards (PRD §7.2 / §7.4)
 * ---------------------------------------------------------------------- */

.gradcom-package-grid,
.gradcom-product-grid {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-4);
}

.gradcom-product-grid__heading {
	font-family: var(--gradcom-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--gradcom-color-primary);
	margin: 0;
}

.gradcom-package-grid__items,
.gradcom-product-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: var(--gradcom-space-5) var(--gradcom-space-3);
	align-items: stretch;
}

.gradcom-package-card,
.gradcom-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gradcom-surface);
	border: 1px solid var(--gradcom-border);
	border-radius: var(--gradcom-card-radius);
}

.gradcom-package-card--featured {
	border: 2px solid var(--gradcom-color-accent);
	box-shadow: 0 12px 30px var(--gradcom-shadow-tint);
}

.gradcom-package-card__badge {
	position: absolute;
	top: -0.8rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	white-space: nowrap;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: var(--gradcom-color-accent);
	color: var(--gradcom-ink);
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 3px 10px var(--gradcom-shadow-tint);
}

.gradcom-package-card__media,
.gradcom-product-card__media {
	display: block;
	border-radius: calc(var(--gradcom-card-radius) - 1px) calc(var(--gradcom-card-radius) - 1px) 0 0;
	overflow: hidden;
	background: var(--gradcom-surface-alt);
}

.gradcom-package-card__media img,
.gradcom-product-card__media img {
	width: 100%;
	height: auto;
	display: block;
}

.gradcom-product-card__media img {
	aspect-ratio: 1;
	object-fit: cover;
}

.gradcom-package-card__body,
.gradcom-product-card__body {
	padding: var(--gradcom-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-2);
	flex: 1;
}

.gradcom-package-card__name,
.gradcom-product-card__name {
	font-family: var(--gradcom-font-heading);
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.25;
}

.gradcom-package-card__name a,
.gradcom-product-card__name a {
	color: var(--gradcom-ink);
	text-decoration: none;
}

.gradcom-package-card__tagline,
.gradcom-product-card__tagline,
.gradcom-featured-package__tagline {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--gradcom-ink-muted);
}

.gradcom-package-card__included,
.gradcom-featured-package__included,
.gradcom-package-detail__included {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.gradcom-package-card__included li,
.gradcom-featured-package__included li,
.gradcom-package-detail__included li {
	position: relative;
	padding: 0.3125rem 0 0.3125rem 1.25rem;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--gradcom-ink);
	border-top: 1px solid var(--gradcom-surface-alt);
}

.gradcom-package-card__included li:first-child,
.gradcom-featured-package__included li:first-child,
.gradcom-package-detail__included li:first-child {
	border-top: 0;
}

.gradcom-package-card__included li::before,
.gradcom-featured-package__included li::before,
.gradcom-package-detail__included li::before,
.gradcom-assurances__item::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--gradcom-color-accent);
	font-weight: 900;
}

.gradcom-package-card__cap-gown-note,
.gradcom-package-detail__cap-gown-note {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gradcom-color-primary);
}

.gradcom-package-card__cta,
.gradcom-product-card__cta {
	margin-block-start: auto;
	width: 100%;
}

.gradcom-product-card__add {
	margin: 0;
	margin-block-start: auto;
}

/* -------------------------------------------------------------------------
 * Featured package hero (shop page)
 * ---------------------------------------------------------------------- */

.gradcom-featured-package {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gradcom-space-4);
	align-items: center;
	padding: var(--gradcom-space-4);
	background: var(--gradcom-surface-alt);
	border-radius: var(--gradcom-card-radius);
}

.gradcom-featured-package__media {
	display: block;
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--gradcom-surface);
}

.gradcom-featured-package__media img {
	width: 100%;
	height: auto;
	display: block;
}

.gradcom-featured-package__body {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-2);
}

.gradcom-featured-package__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gradcom-color-accent);
}

.gradcom-featured-package__name {
	font-family: var(--gradcom-font-heading);
	margin: 0;
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	font-weight: 900;
	line-height: 1.1;
}

.gradcom-featured-package__name a {
	color: var(--gradcom-color-primary);
	text-decoration: none;
}

.gradcom-featured-package__cta {
	align-self: flex-start;
}

@media (min-width: 48rem) {
	.gradcom-featured-package {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--gradcom-space-5);
		padding: var(--gradcom-space-5);
	}
}

/* -------------------------------------------------------------------------
 * Package detail (PRD §7.3)
 * ---------------------------------------------------------------------- */

.gradcom-package-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gradcom-space-4);
	align-items: start;
}

.gradcom-package-detail__media img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--gradcom-border);
	border-radius: var(--gradcom-card-radius);
	background: var(--gradcom-surface);
}

.gradcom-package-detail__body {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-3);
}

.gradcom-package-detail__name {
	font-family: var(--gradcom-font-heading);
	margin: 0;
	font-size: clamp(1.625rem, 3.6vw, 2.25rem);
	font-weight: 900;
	line-height: 1.08;
	color: var(--gradcom-color-primary);
}

.gradcom-package-detail__tagline {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--gradcom-ink-muted);
}

.gradcom-package-detail__contents {
	padding: var(--gradcom-space-3);
	border: 1.5px solid var(--gradcom-color-accent);
	border-radius: 0.75rem;
	background: var(--gradcom-surface);
}

.gradcom-package-detail__contents-heading,
.gradcom-package-detail__size-heading,
.gradcom-fit-add-to-cart__size-heading {
	font-family: var(--gradcom-font-heading);
	margin: 0 0 var(--gradcom-space-2);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gradcom-color-primary);
}

.gradcom-package-detail__size {
	padding: var(--gradcom-space-3);
	border-radius: 0.75rem;
	background: var(--gradcom-surface-alt);
	margin-block-end: var(--gradcom-space-3);
}

.gradcom-package-detail__add {
	margin: 0;
}

.gradcom-package-detail__closed {
	margin: 0;
	padding: var(--gradcom-space-3);
	border: 1.5px solid var(--gradcom-color-secondary);
	border-radius: 0.75rem;
	font-weight: 700;
}

@media (min-width: 48rem) {
	.gradcom-package-detail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gradcom-space-6);
	}

	/*
	 * The package image parks under the sticky header while the bundle's options scroll
	 * past it. A package with ten sized children makes a very long right-hand column, and
	 * without this the reader loses sight of what they are buying and stares at an empty
	 * left column instead.
	 *
	 * Two-column only: in the stacked layout the image sits *above* the options, so
	 * sticking it would pin it over them.
	 *
	 * `align-items: start` on the grid is what makes this work at all — a stretched grid
	 * item fills the row and has no slack to scroll within. It is set on
	 * `.gradcom-package-detail` above; do not change it to `stretch`.
	 *
	 * If this ever stops sticking, look for `overflow` on an ancestor — a theme wrapper
	 * with `overflow: hidden` silently disables `position: sticky` with no error.
	 */
	.gradcom-package-detail__media {
		position: sticky;
		top: var(--gradcom-sticky-offset);
		align-self: start;
	}

	/* Keep a tall image inside the viewport, or the "sticky" image scrolls away anyway. */
	.gradcom-package-detail__media img {
		max-height: calc(100vh - var(--gradcom-sticky-offset) - var(--gradcom-space-5));
		object-fit: contain;
	}
}

/* -------------------------------------------------------------------------
 * Assurances and callouts
 * ---------------------------------------------------------------------- */

.gradcom-assurances {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gradcom-space-2) var(--gradcom-space-4);
	margin: 0;
	padding: 0;
}

.gradcom-assurances--inline {
	justify-content: flex-start;
}

.gradcom-assurances__item {
	position: relative;
	padding-inline-start: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gradcom-ink-muted);
}

.gradcom-callout {
	text-align: center;
	padding: var(--gradcom-space-4);
	border-radius: var(--gradcom-card-radius);
	background: var(--gradcom-surface-alt);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gradcom-space-2);
}

.gradcom-callout--compact {
	padding: var(--gradcom-space-3);
	text-align: start;
	align-items: flex-start;
	border: 1.5px solid var(--gradcom-color-accent);
	background: var(--gradcom-surface);
}

.gradcom-callout--wide {
	padding: var(--gradcom-space-5) var(--gradcom-space-4);
}

.gradcom-callout__heading {
	font-family: var(--gradcom-font-heading);
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--gradcom-color-primary);
}

.gradcom-callout__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--gradcom-ink-muted);
	max-width: 56ch;
}

.gradcom-callout__aside {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Fit fields (height + weight capture, ADR-002)
 * ---------------------------------------------------------------------- */

.gradcom-fit-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gradcom-space-3);
}

.gradcom-fit-fields__field {
	flex: 1 1 8rem;
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-1);
	min-width: 0;
}

.gradcom-fit-fields__field label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gradcom-ink-muted);
}

.gradcom-fit-fields__field select,
.gradcom-fit-fields__field input {
	width: 100%;
	min-height: 46px;
	padding: var(--gradcom-space-2);
	border: 1.5px solid var(--gradcom-border);
	border-radius: var(--gradcom-radius);
	background: var(--gradcom-surface);
	font-family: var(--gradcom-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gradcom-ink);
}

.gradcom-fit-fields__help {
	margin: var(--gradcom-space-2) 0 0;
	font-size: 0.78rem;
	color: var(--gradcom-ink-muted);
}

/* -------------------------------------------------------------------------
 * Cap & gown (fit) add-to-cart (PRD §7.5)
 * ---------------------------------------------------------------------- */

.gradcom-fit-add-to-cart {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gradcom-space-4);
	align-items: start;
}

.gradcom-fit-add-to-cart__media img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--gradcom-border);
	border-radius: var(--gradcom-card-radius);
	background: var(--gradcom-surface);
}

.gradcom-fit-add-to-cart__body {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-3);
}

.gradcom-fit-add-to-cart__name {
	font-family: var(--gradcom-font-heading);
	margin: 0;
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--gradcom-color-primary);
}

.gradcom-fit-add-to-cart__form {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-3);
	padding: var(--gradcom-space-3);
	border-radius: 0.75rem;
	background: var(--gradcom-surface-alt);
}

.gradcom-fit-add-to-cart__error,
.gradcom-size-selector__error {
	margin: 0;
	font-weight: 700;
	color: var(--gradcom-color-accent);
}

.gradcom-fit-add-to-cart__needs-review,
.gradcom-size-selector__needs-review {
	margin: 0;
	font-style: italic;
}

.gradcom-fit-add-to-cart__derived {
	margin: 0;
	font-weight: 700;
}

.gradcom-fit-add-to-cart__closed {
	margin: 0;
	padding: var(--gradcom-space-3);
	border: 1.5px solid var(--gradcom-color-secondary);
	border-radius: 0.75rem;
	font-weight: 700;
}

@media (min-width: 48rem) {
	.gradcom-fit-add-to-cart {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gradcom-space-6);
	}
}

/* -------------------------------------------------------------------------
 * Size selector (PRD §7.3/§7.5, ADR-002)
 * ---------------------------------------------------------------------- */

.gradcom-size-selector {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-3);
	max-width: 28rem;
}

.gradcom-size-selector__field {
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-1);
}

.gradcom-size-selector__field label {
	font-weight: 600;
}

.gradcom-size-selector__field input {
	min-height: 44px;
	padding: var(--gradcom-space-2);
	border: 1px solid var(--gradcom-border);
	border-radius: var(--gradcom-radius);
	font-size: 1rem;
}

.gradcom-size-selector__derived {
	display: flex;
	gap: var(--gradcom-space-3);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Upsell slate (PRD §7.6)
 * ---------------------------------------------------------------------- */

.gradcom-upsell-slate__heading {
	font-family: var(--gradcom-font-heading);
	font-size: 1.25rem;
}

.gradcom-upsell-slate__offers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--gradcom-space-3);
}

.gradcom-upsell-slate__offer {
	border: 1px solid var(--gradcom-border);
	border-radius: var(--gradcom-card-radius);
	padding: var(--gradcom-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--gradcom-space-2);
}

.gradcom-upsell-slate__offer img {
	width: 100%;
	height: auto;
}

.gradcom-upsell-slate__decline {
	margin-block-start: var(--gradcom-space-4);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Sticky cart bar (PRD §7.4)
 *
 * No storefront page renders this any more — the cart control moved into the
 * school header, where it stays visible without covering the buy button on a
 * phone. The part and its view remain a PKT-09 contract (and are still
 * covered by tests), so its styles stay here rather than being deleted out
 * from under them.
 * ---------------------------------------------------------------------- */

.gradcom-sticky-cart-bar {
	display: flex;
	align-items: center;
	gap: var(--gradcom-space-3);
	padding: var(--gradcom-space-3);
	border-top: 1px solid var(--gradcom-border);
	background: var(--gradcom-surface);
}

/* Progressive-enhancement hook: assets/js/gradcom-sticky-cart.js adds this
   class to fix the bar to the viewport bottom once JS confirms it can manage
   the behavior (scroll listeners, safe-area insets). Without it the bar is a
   normal, fully functional in-flow element. */
.gradcom-sticky-cart-bar.gradcom-is-fixed {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 100;
	box-shadow: 0 -2px 8px var(--gradcom-shadow-tint);
}

.gradcom-sticky-cart-bar__count,
.gradcom-sticky-cart-bar__subtotal {
	font-weight: 600;
}

.gradcom-sticky-cart-bar__cart-link {
	margin-inline-start: auto;
	color: var(--gradcom-color-primary);
}