/**
 * 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-on-accent` is also declared elsewhere, and for a sharper reason: it
 * is not a setting at all but DesignTokens' derivation (via Settings\ContrastInk)
 * of which structural ink is readable over whatever accent the rep configured. A
 * rep's gold accent gets dark text, a deep red gets white, with no CSS edit either
 * way. **This file must never declare it on `:root`** — only ever read it as
 * `var(--gradcom-on-accent, <fallback>)`. The cascade is why: the token block is
 * printed on `wp_head` at priority 10, after this stylesheet on school pages, but
 * on cart and checkout the sheet is enqueued mid-content by
 * CelebrationBannerPlacement / SchoolHeaderShortcode and therefore prints in the
 * FOOTER — after the head block. A `:root` declaration here would win the cascade
 * on exactly those two pages and silently undo the derivation, which is the kind
 * of bug that only shows up on the checkout. The fallback form has no such
 * ordering, so it is correct wherever the sheet lands.
 *
 * `--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;

	/* The celebration banner's foreground. Now derived rather than assumed: it reads
	   `--gradcom-on-accent`, which DesignTokens computes server-side from the luminance
	   of the accent the banner is actually painted with, so a gold accent gets dark copy
	   and a deep red gets white without anyone editing CSS. It stays a token of its own
	   so a theme that wants a different answer for this one strip can still force it in
	   one line, and it keeps `--gradcom-on-primary` as the last-resort fallback for an
	   install whose accent is unset or unreadable. */
	--gradcom-celebration-ink: var(--gradcom-on-accent, var(--gradcom-on-primary));
	--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-celebration-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);
}

/*
 * `min-width: 0` is load-bearing on a theme this plugin does not control.
 *
 * Avada's `.fusion-row` — the wrapper every page's content lands in — is
 * `display: flex`. That makes this element a **flex item**, and a flex item's
 * `min-width` defaults to `auto`, which means it refuses to shrink below its
 * own min-content width. On a phone the package page's min-content is ~523px
 * inside a 440px column, so the storefront overflowed to the right; `body` has
 * `overflow-x: hidden`, so instead of scrolling it was simply clipped — and the
 * theme's ordinary 30px page gutter was left stranded on the left, reading as a
 * one-sided padding bug.
 *
 * Only the package page showed it because only that page has content wide enough
 * to hit the floor (the tabular bundle list). Every other storefront page fits,
 * so `min-width: auto` never bound. That is exactly why this was invisible until
 * one page grew.
 *
 * Measured, not guessed: `.fusion-row` computes to `display: flex`, this element
 * to `min-width: auto` at 523px in a 440px parent, and forcing `min-width: 0`
 * drops it to 440px. Same family as the school selector's `align-self: stretch`
 * fix — this theme's flex containers keep catching block-layout assumptions.
 */
.gradcom-storefront,
.gradcom-harness-root {
	min-width: 0;
}

.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);
	/* Derived from the accent's own luminance rather than assumed. The dark fallback
	   is what this rule used to hardcode: right for the school golds it was written
	   for, wrong for the shipped default accent (a red), which is precisely why the
	   answer is now computed per install. */
	color: var(--gradcom-on-accent, 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-on-accent, 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)
 * ---------------------------------------------------------------------- */

/*
 * The 62ch reading measure lives on the **prose**, not on this container.
 *
 * It used to sit here, which capped every child — including the heading, which then
 * wrapped ("Choose Your Graduation / Package") on a viewport with hundreds of pixels
 * to spare. `ch` resolves against *this* element's font size, so 62ch is about 550px
 * of body text; a 2.375rem display heading needs far more than that for the same
 * number of characters, and there is no reason a heading should share a paragraph's
 * measure.
 *
 * `align-items: center` makes each child shrink to its own content instead of
 * stretching, so the heading takes the width it needs and still wraps naturally once
 * the section itself is narrower than the line.
 */
.gradcom-section-intro {
	text-align: center;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gradcom-space-2);
}

.gradcom-section-intro--left {
	text-align: start;
	align-items: flex-start;
	margin-inline: 0;
	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;
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gradcom-ink);
}

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

/*
 * The left variant (the shop page) never had the measure — it opted out with
 * `max-width: none` when the cap was on the container. Keeping it opted out means this
 * refactor is invisible on that page, which is the only other user of this block.
 */
.gradcom-section-intro--left .gradcom-section-intro__lead,
.gradcom-section-intro--left .gradcom-section-intro__note {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * 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);
}

/* -------------------------------------------------------------------------
 * Celebration banner
 *
 * A full-bleed strip that sits directly beneath the SCHOOL header, with its copy held to the
 * same measure as the rest of the page. Both are full-bleed, so the hero and the strip read
 * as one block of school furniture rather than as an interruption above it. On cart and
 * checkout the same order holds, because the school header is pasted into the page content
 * ahead of WooCommerce's shortcode and the banner hooks inside it.
 *
 * The full-bleed trick (`100vw` plus a negative margin of half the overflow) is here because
 * the banner renders INSIDE the theme's content column — it is hooked onto
 * `woocommerce_before_cart` / `woocommerce_before_checkout_form` and included after the school
 * header in the plugin's own page templates, neither of which can escape that column in
 * markup. Doing it in CSS keeps invariant 8 intact: no theme edit, no theme-specific selector.
 *
 * `100vw` includes the scrollbar's width on the desktop engines that still reserve one, which
 * is why `overflow-x: hidden` guards the horizontal jiggle it would otherwise cause.
 * ---------------------------------------------------------------------- */

.gradcom-celebration-banner {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow-x: hidden;
	padding: var(--gradcom-space-3) var(--gradcom-space-4);
	/* `--gradcom-color-accent` comes from Settings → Branding via DesignTokens' `wp_head`
	   block, so on an install where the rep has not set an accent colour the property is
	   simply *undefined* — and a bare `var(--gradcom-color-accent)` would then resolve to
	   nothing, leaving white text on a transparent strip. That is the default state of a
	   fresh install, not an edge case. The fallback is the structural dark already used for
	   hero treatments: always defined, always readable, and the rep's accent wins the moment
	   it is set. */
	background: var(--gradcom-color-accent, var(--gradcom-hero-base));
	color: var(--gradcom-celebration-ink);
	text-align: center;
}

.gradcom-celebration-banner__inner {
	max-width: var(--gradcom-max-width);
	margin: 0 auto;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gradcom-celebration-banner strong {
	font-weight: 800;
}

@media (max-width: 600px) {
	.gradcom-celebration-banner {
		padding: var(--gradcom-space-2) var(--gradcom-space-3);
	}

	.gradcom-celebration-banner__inner {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------------------------------
 * 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);
}

/* The supporting line, and the asterisk that qualifies it — one declaration, so
   the marker cannot drift out of step with the text it sits beside. It was set
   separately once and immediately read as out of place: larger than the total it
   followed, and lifted to the big figure's top edge. */
.gradcom-price-installment__secondary,
.gradcom-price-installment__marker {
	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;
}

/*
 * Visually hidden, still announced.
 *
 * **Not `.screen-reader-text`.** That class is core's and every theme defines it,
 * but a GradCommerce route does not go through the theme's WooCommerce templates,
 * so whether it is defined here is not something this plugin can assume — the one
 * existing declaration is scoped to `.gradcom-package-detail__add` precisely
 * because that was the only place it was needed. Borrowing it for a package *card*
 * would print the hidden sentence in full on every card in the grid. Owning the
 * class is the difference between an accessible name and visible boilerplate.
 */
.gradcom-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The "some options cost more" asterisk — spacing only; its type comes from the
 * rule it shares with `__secondary` above.
 *
 * It is a pointer to the footnote, not a warning badge. **No `align-self` here.**
 * It inherits `__figures`' `align-items: baseline`, so it sits on the same
 * baseline as the total it qualifies rather than on the headline figure's top
 * edge — an asterisk already rides high in its own em box, and lifting it as well
 * put it level with the top of a 2.125rem number beside 0.8125rem text.
 *
 * The negative margin closes most of the flex `gap` so the marker reads as
 * attached to the total, not as a third item in the row.
 */
.gradcom-price-installment__marker {
	margin-inline-start: calc(var(--gradcom-space-2) * -0.6);
}

/*
 * The footnote the asterisk points at. One per page — under the package grid, and
 * once on a package detail page — never once per card.
 */
.gradcom-price-note {
	margin-block-start: var(--gradcom-space-3);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--gradcom-ink-muted);
}

.gradcom-price-note__marker {
	font-weight: 700;
}

/* On a detail page the note follows the buy form, so it needs a little more air
   above it than it does tucked under a grid. */
.gradcom-package-detail__body .gradcom-price-note {
	margin-block-start: var(--gradcom-space-4);
}

/* 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;
}

/*
 * What the school's cap & gown unit contains. Since the per-card line was retired this
 * is the only place that claim is made (PRD §7.2), so it is a banded highlight rather
 * than another line of lead copy.
 *
 * A shared component, not a grid element, because two pages render it from one template
 * part: above the package grid on the landing page, and between the contents box and the
 * buy box on the package detail page. It was `.gradcom-package-grid__includes` while the
 * grid was its only home — renamed when the detail page took the same band, since a BEM
 * block name that lies about where an element lives is worse than none.
 *
 * On the landing page it is a child of the **grid**, not of `.gradcom-section-intro`, and
 * that is deliberate: the intro caps its content at a 62ch reading measure, which is right
 * for a paragraph and wrong here. The sentence grows with the school's name and its item
 * list, so inside the intro it wrapped mid-phrase with room to spare on either side.
 *
 * Width is decided by context rather than a modifier, immediately below.
 *
 * The tint follows the card title band's pattern: alpha on `opacity` over a solid
 * colour on a pseudo-element, because the accent arrives as a hex literal from a
 * custom property and there is no way to add an alpha channel to it without
 * `color-mix` taking the whole declaration — and therefore the band — with it on a
 * browser that does not support it. The check glyph is `::after` with `order: -1`,
 * since `::before` is spent on the tint.
 */
.gradcom-cap-gown-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	max-width: 100%;
	align-items: baseline;
	gap: var(--gradcom-space-2);
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-radius: 0.5rem;
	border-inline-start: 3px solid var(--gradcom-color-accent);
	font-size: 1rem;
	line-height: 1.35;
	text-align: start;
	color: var(--gradcom-color-primary);

	/*
	 * The **body** face at a real semi-bold, deliberately not `--gradcom-font-heading`.
	 *
	 * This banner sat in the heading face at weight 800 and read as loud as the H2 above
	 * it. Lowering the number alone does nothing: SECS resolves the heading token to
	 * "Archivo Black", a single-weight display family, so every `font-weight` against it
	 * renders the same black cut — 800 and 600 are pixel-identical, and 800 only invites
	 * the browser to synthesise a faux-bold on top of a face that is already black.
	 *
	 * Stepping down in weight therefore means stepping out of the family. In the body
	 * face (Inter here) 600 is a genuine semi-bold: emphasised, but no longer competing
	 * with the heading. The check keeps a little more weight than the text so the glyph
	 * still reads at this size.
	 *
	 * The same trap applies anywhere else this stylesheet pairs a weight with
	 * `--gradcom-font-heading` — the number is decoration unless the rep's chosen family
	 * actually ships that weight.
	 */
	font-weight: 600;
}

.gradcom-cap-gown-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradcom-color-accent);
	opacity: 0.16;
}

.gradcom-cap-gown-banner::after {
	content: "\2713";
	order: -1;
	flex: none;
	font-weight: 700;
	color: var(--gradcom-color-primary);
}

/*
 * Width by context, so the part itself takes no layout argument.
 *
 * In the landing page's flex column the band shrinks to its own content and centres
 * under the heading — `align-self: center` rather than the default stretch, with
 * `max-width: 100%` above as the only ceiling. A school with a very long name gets a
 * full-width band, which is preferred over a forced break mid-sentence.
 *
 * On the two detail pages — the package and the cap & gown itself — it stays stretched:
 * it sits in a narrow body column directly under the contents box or the product title,
 * and a shrink-wrapped band there would read as a stray pill rather than a continuation
 * of what it sits under. Both columns are flex with the default `stretch`, so this needs
 * no rule of its own.
 */
.gradcom-package-grid > .gradcom-cap-gown-banner {
	align-self: center;
}

.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-on-accent, 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);
}

/*
 * The package card's title band, above the image.
 *
 * Translucent rather than a flat fill: the brand colour is laid over the card
 * surface at low alpha by the pseudo-element below, so the band tints whatever
 * the card sits on instead of introducing a second opaque surface colour.
 *
 * The alpha lives on `opacity` over a solid colour rather than in the colour
 * value itself, because the colour arrives as a hex literal from a custom
 * property and there is no way to add an alpha channel to it in CSS without
 * `color-mix`, which would take the whole declaration — and therefore the
 * band — with it on any browser that does not support it.
 *
 * In practice this resolves to the *rep's* primary. `--gradcom-school-primary`
 * is named first only so the band follows the school automatically if that
 * property is ever scoped above the header: today `school-header.php` sets it
 * as an inline style on the header element itself, and a package card is the
 * header's sibling, not its descendant — so it inherits nothing and the
 * fallback is what applies. Named rather than quietly relied upon, because a
 * fallback that is always taken looks like a bug to the next reader.
 */
.gradcom-package-card__header {
	position: relative;
	isolation: isolate;
	padding: var(--gradcom-space-3);
	border-radius: calc(var(--gradcom-card-radius) - 1px) calc(var(--gradcom-card-radius) - 1px) 0 0;
	border-bottom: 1px solid var(--gradcom-border);
	overflow: hidden;
}

.gradcom-package-card__header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradcom-school-primary, var(--gradcom-color-primary));
	opacity: 0.08;
}

.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);
}

/* The title band now owns the card's top corners, so the image squares off. */
.gradcom-package-card__header + .gradcom-package-card__media {
	border-radius: 0;
}

.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;
}

/* In the title band the name is the card's identity, not a caption under an
   image, so it takes the brand colour and a little more size. */
.gradcom-package-card__header .gradcom-package-card__name {
	font-size: 1.125rem;
}

.gradcom-package-card__header .gradcom-package-card__name a {
	color: var(--gradcom-color-primary);
}

.gradcom-package-card__header .gradcom-package-card__tagline {
	margin-block-start: var(--gradcom-space-1);
}

.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;
}

/*
 * `__cap-gown-note` (the per-card "includes your cap & gown" band) was retired in
 * 0.9.0. It said the same sentence under all seven cards in a grid, which read as
 * noise rather than reassurance. The claim now renders once per page, from the
 * school's own configured unit contents — see `.gradcom-cap-gown-banner` above.
 */

.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);
}

/*
 * A badge with its own icon drops the inherited checkmark and lays its icon out instead.
 *
 * The `\2713` glyph is a shared `::before` rule (see "Assurances and callouts" above) that also
 * draws the bullets in three package-contents lists, so it cannot simply be deleted — this scopes
 * the opt-out to badges that brought their own. A badge configured with "— No icon —" keeps the
 * checkmark, which is why the modifier is on the item rather than the list.
 */
.gradcom-assurances__item--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding-inline-start: 0;
}

.gradcom-assurances__item--icon::before {
	content: none;
}

.gradcom-trust-badges__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--gradcom-color-accent);
}

.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)
 * ---------------------------------------------------------------------- */

/*
 * `width: 100%` is load-bearing, not defensive.
 *
 * On the plugin's own pages this sits in a block-width panel and stretches anyway.
 * On WooCommerce's product page it renders inside `form.cart`, which is not laid out
 * that way — the row collapsed to shrink-to-fit and the height control came out
 * ~145px wide, truncating its own placeholder to "Select y…". Found by screenshotting
 * the live page.
 */
.gradcom-fit-fields {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--gradcom-space-3);
}

/* 10rem, not 8: "Select your height" is the widest placeholder either field carries,
   and a basis that cannot hold it makes the control look broken before it is used. */
.gradcom-fit-fields__field {
	flex: 1 1 10rem;
	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);
}

/*
 * The panel the capture renders in on WooCommerce's own product form, so that page
 * matches `/{school}/cap-gown/` rather than floating the fields bare between the
 * price and the button. Same tokens as `.gradcom-fit-add-to-cart__form`.
 */
.gradcom-fit-panel {
	margin-block: var(--gradcom-space-3);
	padding: var(--gradcom-space-3);
	border-radius: 0.75rem;
	background: var(--gradcom-surface-alt);
}

.gradcom-fit-panel__heading {
	font-family: var(--gradcom-font-heading);
	margin: 0 0 var(--gradcom-space-3);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gradcom-color-primary);
}

/*
 * `--gradcom-select-field-h` is the enhanced-select trigger's height (52px). The
 * weight box was pinned at 46px, so once the height control became a styled listbox
 * the two sat 6px apart — visible as soon as they were side by side on the product
 * page. Reading the widget's own token keeps them locked together if it ever changes,
 * with the literal as the fallback for a page where that stylesheet is absent.
 */
.gradcom-fit-fields__field select,
.gradcom-fit-fields__field input {
	width: 100%;
	min-height: var(--gradcom-select-field-h, 52px);
	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);
}

/* -------------------------------------------------------------------------
 * Enhanced select — layout glue
 *
 * The widget itself lives in `assets/css/gradcom-select.css` and is fully
 * self-contained. What it cannot know is how each host container expects its
 * field to size, because `assets/js/gradcom-select.js` inserts a `.gradcom-select`
 * wrapper *between* that container and the `<select>` it was sizing. Anything a
 * layout rule said about the `<select>` now has to be said about the wrapper.
 * ---------------------------------------------------------------------- */

/* The school selector's controls row sizes its field with `flex: 1 1 14rem`
   (see the rule above). Without this the wrapper would size to its content
   and the field would collapse to the width of the longest school name. */
.gradcom-school-selector__controls > .gradcom-select {
	flex: 1 1 14rem;
	min-width: 0;
}

/*
 * Product Bundles renders its size choosers inside `table.variations`, one per
 * bundled item, and the tabular package layout nests those inside a second
 * table. An open popup is absolutely positioned and therefore paints in the
 * cell's stacking context — without lifting the containing cell it slides
 * *behind* the rows below it. `.gradcom-select` raises itself, but a table cell
 * with no `position` gives it nothing to be raised within.
 */
.gradcom-package-detail__add td.value:has(.gradcom-select[data-open="true"]),
.gradcom-package-detail__add td.bundled_item_details_col:has(.gradcom-select[data-open="true"]) {
	position: relative;
	z-index: 5;
}

/* -------------------------------------------------------------------------
 * Product Bundles add-to-cart form (package detail)
 *
 * Everything in this section styles markup rendered by WooCommerce and Product
 * Bundles, not by this plugin — {@see GradCommerce\Storefront\BundleAddToCartForm}
 * deliberately delegates the form to the extension that owns the POST format.
 * That is the right call and it has one consequence: the form arrives with the
 * *theme's* idea of what a product form looks like, and on a GradCommerce route
 * the theme's own WooCommerce styling is only partly in play. The add-to-cart
 * button in particular rendered as a bare browser button.
 *
 * So these rules are scoped to `.gradcom-package-detail__add` — the plugin's own
 * wrapper — and never to a Bundles class on its own. Nothing here leaks onto a
 * normal product page, and if Bundles renames a class the worst case is that a
 * rule stops matching and the theme's default returns.
 * ---------------------------------------------------------------------- */

.gradcom-package-detail__add table.bundled_products {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.gradcom-package-detail__add table.bundled_products th {
	padding: 0 0 var(--gradcom-space-2);
	border-bottom: 1px solid var(--gradcom-border);
	font-family: var(--gradcom-font-body);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: start;
	color: var(--gradcom-ink-muted);
}

.gradcom-package-detail__add tr.bundled_product > td {
	padding: var(--gradcom-space-3) var(--gradcom-space-2) var(--gradcom-space-3) 0;
	border-bottom: 1px solid var(--gradcom-surface-alt);
	vertical-align: top;
}

.gradcom-package-detail__add td.bundled_item_images_col {
	width: 4.5rem;
}

.gradcom-package-detail__add .bundled_product_image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.5rem;
	background: var(--gradcom-surface-alt);
}

/*
 * Regular bold, not the heading font's Black weight.
 *
 * These are line items in a contents list, not page headings. At 900 in Archivo
 * Black every garment name shouted louder than the package's own `<h1>`, which
 * inverted the page's heading hierarchy on screen even though the document
 * outline was correct. The body font is deliberate for the same reason.
 */
.gradcom-package-detail__add .bundled_product_title,
.gradcom-package-detail__add .bundled_product_title_inner {
	font-family: var(--gradcom-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--gradcom-ink);
	margin: 0 0 var(--gradcom-space-2);
}

.gradcom-package-detail__add .bundled_product_title a {
	color: var(--gradcom-color-primary);
}

/*
 * Per-item prices are suppressed, and this is the fix for the duplicate the
 * owner reported rather than a cosmetic preference.
 *
 * A sized item printed its price **twice**: Avada injects the chosen variation's
 * price html into its own `.avada-variation` row inside `table.variations`, and
 * Product Bundles then renders the same variation html again in its
 * `.woocommerce-variation` block below the table. Two identical figures, one
 * above "Clear selection" and one below it.
 *
 * Hiding only one of them would have left a per-item price list that contradicts
 * how these packages are sold: package pricing is per-item and additive
 * (ADR-008), and a school `price_override` can make the sum of the visible item
 * prices differ from what the customer is actually charged. A list of component
 * prices that does not add up to the total is worse than no list. The package's
 * own price renders once, above, from `gradcom-price-installment`.
 *
 * Kept visible: `.bundle_price` — Bundles' live total, further down. See its rule.
 */
.gradcom-package-detail__add .bundled_products .price,
.gradcom-package-detail__add .bundled_products .woocommerce-variation-price,
.gradcom-package-detail__add .bundled_products .avada-variation {
	display: none;
}

/*
 * The same suppression again, at higher specificity, because Product Bundles
 * out-specifies the rule above.
 *
 * `single-product.css` (Bundles 8.5.6) ships:
 *
 *     .bundled_product_summary .bundled_item_wrap span.price { display: block }
 *
 * which is (0,3,1) against this file's (0,3,0) — and Bundles' stylesheet is
 * enqueued at priority 101 by BundleAddToCartForm, so it also loads last. The
 * rule above therefore hid the Avada duplicate (nothing competes for that one)
 * while every *simple* bundled item kept printing its price, which is exactly
 * the half-fixed state the owner saw on the live page.
 *
 * Beaten on specificity rather than with `!important`: this restates Bundles'
 * own selector with the plugin's wrapper in front, (0,4,1) vs (0,3,1). Bundles'
 * other variant is prefixed `.single-product`, a body class this route does not
 * carry (verified on the rendered page), so there is no tie to lose on source
 * order. Keeping `!important` out means a theme can still override this
 * deliberately, which is the convention the rest of this file follows.
 *
 * It also covers the *chosen variation's* price, which Bundles renders into the
 * same `.bundled_item_wrap` once a size is picked.
 */
.gradcom-package-detail__add .bundled_product_summary .bundled_item_wrap span.price,
.gradcom-package-detail__add .bundled_product_summary .bundled_item_cart_details span.price {
	display: none;
}

.gradcom-package-detail__add table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.gradcom-package-detail__add table.variations td {
	padding: 0 0 var(--gradcom-space-1);
	border: 0;
	vertical-align: top;
}

.gradcom-package-detail__add table.variations td.label label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gradcom-ink-muted);
}

/* Woo's own "Clear selection" — real, but secondary to choosing a size. */
.gradcom-package-detail__add a.reset_variations {
	display: inline-block;
	margin-block-start: var(--gradcom-space-1);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--gradcom-ink-muted);
}

/*
 * A stray "Name Your Price" input, one per sized item.
 *
 * Found while styling this form, not reported: the Name Your Price extension
 * renders its `.nyp` block for every bundled item, and on a GradCommerce route
 * neither its stylesheet nor its script is enqueued — Product Bundles' handles
 * are re-enqueued late by BundleAddToCartForm, NYP's are not. Nothing hides it,
 * so an empty, unlabelled text field renders in the middle of the buy form, five
 * of them on the Gold package. Verified against the rendered production page.
 *
 * Safe to hide here: the bundle's own form data reports `is_nyp: "no"` for every
 * item, so the field is dead markup — it collects nothing and controls nothing.
 * Scoped to this wrapper so a genuinely price-your-own product elsewhere on the
 * site is untouched. If a rep ever puts a real NYP product *inside* a package,
 * this rule has to go and the missing enqueue is the actual fix.
 */
.gradcom-package-detail__add .nyp {
	display: none;
}

/* The cap & gown fit capture sits inside this form (one form, one submit).
   Panelled so it reads as its own step rather than as another bundled row. */
.gradcom-package-detail__add .gradcom-fit-fields {
	margin-block-start: var(--gradcom-space-4);
	padding: var(--gradcom-space-3);
	border-radius: 0.75rem;
	background: var(--gradcom-surface-alt);
}

.gradcom-package-detail__add .gradcom-fit-fields__help {
	margin-block-end: var(--gradcom-space-4);
}

/*
 * Bundles' live running total. Deliberately NOT hidden even though the package
 * price already renders above: this figure is the one that moves, and a customer
 * who is never shown the total they are about to be charged is exactly the silent
 * substitution invariant 3 forbids. To drop it, add `display: none` here.
 *
 * **"Today the two agree" — struck 2026-08-11, it was never true on production.**
 * That claim was measured against a catalog in which every package was flat. The
 * real one ranges hard: Silver +$21.50, Mascot and Diamond +$146.50, Platinum
 * +$421.50 between cheapest and dearest configuration. The headline above is the
 * *cheapest* configuration and now says so, via the rep's configured
 * starting-price wording (`price_range_prefix`); this figure is the one that
 * resolves to what they will actually pay.
 *
 * It is also why `gradcom-package-price.js` exists. Bundles counts an unresolved
 * child as nothing, so this element opened *below* the headline — an unfinished
 * sum presented as a price. That script clamps what renders here to the package's
 * cheapest configuration. It never computes or formats money; it chooses between
 * Bundles' own figure and a floor string formatted in PHP.
 */
.gradcom-package-detail__add .bundle_price {
	margin-block: var(--gradcom-space-3) var(--gradcom-space-2);
	font-family: var(--gradcom-font-heading);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.1;
	color: var(--gradcom-color-primary);
}

.gradcom-package-detail__add .bundle_price:empty {
	display: none;
}

.gradcom-package-detail__add .bundle_button {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--gradcom-space-2);
	margin-block-start: var(--gradcom-space-3);
}

.gradcom-package-detail__add .bundle_button .quantity {
	flex: 0 0 auto;
}

/*
 * WooCommerce labels the quantity field with `.screen-reader-text`, a class core
 * and every theme define — but this route does not go through the theme's
 * WooCommerce templates, so whether that definition is present is not something
 * this plugin can assume. Restating it costs nothing and is the difference
 * between an invisible accessible name and the words "Gold Package quantity"
 * printed next to the buy button. Identical to core's own declaration.
 */
.gradcom-package-detail__add .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gradcom-package-detail__add .bundle_button .quantity input.qty {
	width: 4.5rem;
	min-height: 56px;
	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: 700;
	text-align: center;
	color: var(--gradcom-ink);
}

/*
 * The buy button.
 *
 * It is WooCommerce's `<button class="single_add_to_cart_button button alt">`,
 * and on a GradCommerce route it was rendering as a bare browser button — the
 * theme styles `.button` through its own WooCommerce templates, which this route
 * does not go through. The plugin has to be able to state its own design intent
 * without depending on the active theme (the same reasoning as `.gradcom-button`
 * and the school header's explicit colour).
 *
 * The declarations mirror `.gradcom-button` + `--large` rather than reusing the
 * class, because the class cannot be added: the markup belongs to Bundles, not
 * to a template this plugin owns. `border` is restated in full on hover for the
 * reason recorded on `.gradcom-button`'s modifiers — a theme's `border: none`
 * zeroes the width, and recolouring alone produces an invisible control.
 */
.gradcom-package-detail__add .single_add_to_cart_button {
	flex: 1 1 14rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	min-height: 56px;
}

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

/* Bundles disables the button until every required option is chosen. */
.gradcom-package-detail__add .single_add_to_cart_button.disabled,
.gradcom-package-detail__add .single_add_to_cart_button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.gradcom-package-detail__add .bundle_error {
	margin-block-start: var(--gradcom-space-3);
	font-size: 0.875rem;
}

/*
 * On a phone the tabular bundle list stacks.
 *
 * Three columns — thumbnail, details (with a size dropdown), quantity — have a
 * combined min-content width of ~475px, and a table cannot be laid out narrower
 * than that however small its container. It is what made the storefront's
 * min-content exceed the column in the first place (see `min-width: 0` above),
 * and even with that fixed the table would still overflow its own container.
 *
 * `table-layout: fixed` was the smaller change and is the wrong one here: it
 * would squeeze the details column to ~160px, and the size chooser — the single
 * control the customer must operate to buy — is what lives in it. Stacking gives
 * that column the full width and costs only a column header nobody reads on a
 * phone.
 *
 * The header row goes rather than being visually hidden: with the cells stacked
 * it labels nothing, and "Image / Product / Quantity" announced before every item
 * is noise, not orientation.
 */
@media (max-width: 47.99rem) {

	.gradcom-package-detail__add table.bundled_products,
	.gradcom-package-detail__add table.bundled_products tbody,
	.gradcom-package-detail__add table.bundled_products tr.bundled_product,
	.gradcom-package-detail__add table.bundled_products tr.bundled_product > td {
		display: block;
		width: 100%;
	}

	.gradcom-package-detail__add table.bundled_products thead {
		display: none;
	}

	.gradcom-package-detail__add tr.bundled_product {
		padding-block: var(--gradcom-space-3);
		border-bottom: 1px solid var(--gradcom-surface-alt);
	}

	.gradcom-package-detail__add tr.bundled_product > td {
		padding: 0 0 var(--gradcom-space-2);
		border-bottom: 0;
	}

	/* The thumbnail keeps its own size instead of stretching to the full row. */
	.gradcom-package-detail__add td.bundled_item_images_col {
		width: 4.5rem;
		max-width: 4.5rem;
	}

	/* Quantity is a hidden input plus a bare "1" — inline, under the name. */
	.gradcom-package-detail__add td.bundled_item_qty_col {
		font-size: 0.8125rem;
		color: var(--gradcom-ink-muted);
	}
}

/* ==========================================================================
   School gate — the school selector as a blocking dialog on WooCommerce pages
   (templates/storefront/components/school-gate.php, assets/js/gradcom-school-gate.js).

   Mobile first: below the tablet breakpoint the dialog is a full-screen sheet
   that scrolls internally, sized with dvh so iOS Safari's collapsing toolbar
   cannot hide the control, padded by the safe-area insets. Above it, a centred
   panel over a dimmed page. The panel keeps `overflow: visible` there so the
   enhanced-select listbox is not clipped; on phones the script leaves the
   <select> native, so nothing needs to escape the sheet.
   ========================================================================== */

.gradcom-school-gate {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the theme's sticky header and WooCommerce notices; the enhanced select's own popover is scoped inside the panel */
	display: flex;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
	height: 100vh;
	height: 100dvh;
	padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
	background: rgba(28, 28, 28, 0.6);
}

/* The class rule above would beat the UA `[hidden]` rule; the attribute must still win. */
.gradcom-school-gate[hidden] {
	display: none !important;
}

.gradcom-school-gate__panel {
	box-sizing: border-box;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: var(--gradcom-space-5) var(--gradcom-space-3) var(--gradcom-space-6);
	background: var(--gradcom-surface);
	color: var(--gradcom-ink);
}

.gradcom-school-gate__title {
	margin: 0 0 var(--gradcom-space-2);
	font-size: 1.375rem;
	line-height: 1.25;
}

.gradcom-school-gate__title:focus {
	outline: none;
}

.gradcom-school-gate__copy {
	margin: 0 0 var(--gradcom-space-4);
	color: var(--gradcom-ink-muted);
}

/* At least 16px on the field so iOS Safari does not zoom the page on focus; 44px targets. */
.gradcom-school-gate .gradcom-school-selector__field {
	font-size: max(1rem, 16px);
	min-height: 44px;
}

.gradcom-school-gate .gradcom-school-selector__submit {
	min-height: 44px;
}

/* Scroll lock that holds on iOS: the script pins the body at its current offset
   (inline `top`) and restores it when the gate closes. */
body.gradcom-school-gate-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

@media (min-width: 48rem) {

	.gradcom-school-gate {
		align-items: center;
		padding: var(--gradcom-space-4);
	}

	.gradcom-school-gate__panel {
		width: min(100%, 28rem);
		max-height: none;
		overflow: visible;
		padding: var(--gradcom-space-5);
		border-radius: var(--gradcom-radius, 12px);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
	}
}

@media (prefers-reduced-motion: no-preference) {

	.gradcom-school-gate__panel {
		animation: gradcom-school-gate-in 160ms ease-out;
	}

	@keyframes gradcom-school-gate-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}