/* Copyright (C) 2026 ceASAP LTD. All Rights Reserved. Proprietary.
 *
 * The CE package storefront — the page that replaces /your-path/.
 *
 * ⚠ SAME PALETTE AS THE WIZARD AND THE COURSE PAGE. A buyer crosses all three in one sitting: choose
 * a package here, fill it in the wizard, sit the course. Blue #1c6fb5, navy #0e2747, muted #54637a,
 * card border #e6ebf2 — see session-panel.css, which is where they come from.
 */

.ce-store {
	--ce-store-blue: #1c6fb5;
	--ce-store-blue-dark: #15568c;
	--ce-store-navy: #0e2747;
	--ce-store-muted: #54637a;
	--ce-store-line: #e6ebf2;
	--ce-store-tint: #e7eef8;
	--ce-store-red: #e8192c;
	/* ⚠ THE SAME MEASURE AS THE HERO, AND AS THE CALENDAR. Scott, 28 Oct 2026: the packages content
	   "is not in line" with the calendar's. Measured at 1800px before this change: both heroes ran
	   324→1476, because both come from .ce-brand-hero__inner — but the body below sat at 360→1440,
	   indented 36px each side and 72px narrower. The page was carrying TWO measures: the hero's
	   1200/24 from the design system, and 1160/40 here. The calendar has one, which is why it looked
	   right. These numbers now match ce-brand.css exactly; change them there, not here.

	   ⚠ THE PAGE'S OWN GUTTER, BECAUSE THE THEME GIVES NONE. `.ast-container` has padding 0 and
	   max-width 100% on this template, so without this every element sat flush to the browser edge.
	   24px is the hero's gutter too, and above the 16px floor a phone needs. */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 48px;
	box-sizing: border-box;
	color: var(--ce-store-navy);
}

/* ── the hero ────────────────────────────────────────────────────────────────────────────────
 * ⚠ THE PAGE OPENS WITH THE OFFER, NOT WITH A FORM. The first version led with the license
 * questions on a white card, which asks a buyer for their credentials before showing them anything
 * — Scott, 21 Sept 2026: "not a good page design". The headline, the four price points and the
 * photograph are the shape his own page had, and they earn the question that follows.
 */
/* ⚠ THE HOUSE HERO, AT FULL SIZE. The same two-layer background as
   `.ce-dash__hero` in assets/course/runtime.css and the same 16px radius — the
   section banners below are the thin version of this, so the page opens with an
   object it then repeats at a smaller scale. */
.ce-store .ce-store__hero {
	/* ⚠ THE BAND IS ce-brand.css's NOW. Scott, 28 Oct 2026: match the calendar. What was a rounded
	   blue card with a drop shadow is the same full-bleed header the calendar carries, so the two
	   pages a buyer crosses in one sitting stop looking like two different websites. Only the
	   margin below it belongs to this page.

	   ⚠ margin-bottom, NOT THE `margin` SHORTHAND — and this cost an hour. The shared file breaks the
	   band out of its container with `margin-left/right: calc(50% - 50vw)`; this file loads after it,
	   so a shorthand here reset those to 0 and the band sat inside the page's 60px gutter, 1,100px
	   wide but pushed 60px right, overhanging the document instead of reaching the edges. A shorthand
	   never just sets the side it mentions.

	   ⚠ AND NO GAP BENEATH IT, because the panel below is pulled UP into the band by 64px. A margin
	   here would be subtracted from that overlap and the two would fight over the same pixels. */
	margin-bottom: 0;
}
.ce-store .ce-store__hero-head {
	/* ⚠ LEFT, FOR CONSISTENCY. Scott, 28 Oct 2026: "Keep it left aligned for consistency, match
	   everything else." The calendar's title is left-aligned and this one was centred; one of the
	   two had to give, and the page being matched is the one that was already right. */
	text-align: left;
	text-wrap: balance;
}
/* The one place the brand red is used — as it is on the page this replaces. */
.ce-store .ce-store__hero-head em {
	font-style: normal;
	color: var(--ce-store-red);
}
/* ⚠ TWO COLUMNS, FILLED ACROSS. Four packages in one column made a tall, narrow
   list down the left of a wide banner with nothing beside it; in two they read
   as a set and the banner loses a third of its height. Row flow, not column, so
   the visual order matches the source order a screen reader announces.

   ⚠ auto-fit, NOT A HARD 2. The lines are derived and deduplicated from the
   published packages — four today because four distinct prices exist. A fixed
   two-column rule would leave a hole the day a fifth appears or a price is
   shared; this collapses to one column when there is only room for one. */
.ce-store .ce-store__hero-points {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	/* ⚠ TWO COLUMNS, STATED. auto-fit across the full banner width makes three or four columns of
	   short lines; the list is four items and reads as two pairs. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 13px 44px;
	text-align: left;
}
.ce-store .ce-store__hero-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: clamp( 16px, 1.6vw, 19px );
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}
.ce-store .ce-store__hero-points li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	/* ⚠ INVERTED FOR THE BLUE GROUND. Brand red on dark blue is a vibrating pair at
	   this size, so the disc goes white and the check takes the brand blue. */
	background: #fff url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23046bd2' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E" ) center / 15px 15px no-repeat;
}
.ce-store .ce-store__hero-sub {
	margin: 20px 0 0;
	text-align: left;
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba( 255, 255, 255, .88 );
	text-wrap: pretty;
}
.ce-store .ce-store__hero-art img,
.ce-store .ce-store__hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba( 16, 39, 71, .16 );
}

/* ── the three questions ─────────────────────────────────────────────────────────────────── */

/* ── Your license, your CE package ───────────────────────────────────────────────────────────
   ⚠ ONE BLOCK, NOT TWO. The summary bar and the account panel beneath it both stated the licence,
   so a signed-in licensee read their own details twice before reaching a package. The name, the
   licence, the question about whether it is right and the button that fixes it are one thing. */
/* ⚠ THE PANEL IS THE SHARED SHELL NOW. Scott, 28 Oct 2026: *"the section below the hero area needs
   to be overlapping into it. When you do this, remove the left blue side band. Match the shadow
   effect behind the calendar."* The box, the radius, the overlap and the shadow all come from
   .ce-brand-shell in ce-brand.css; this rule adds only the inner padding the panel's own content
   wants and the space below it.

   ⚠ THE LEFT BAND GOES WITH THE OVERLAP, NOT AS A SEPARATE TASTE CALL. A 5px blue bar down the
   left of a panel that is itself lifted out of a blue band reads as a fragment of the band that
   failed to clear — the two devices were saying the same thing twice. */
.ce-store .ce-store__ask {
	padding: 24px 28px;
	/* ⚠ margin-bottom, NEVER THE SHORTHAND — the second time this exact mistake was made in one
	   afternoon. .ce-brand-shell lifts the panel with `margin-top: -64px`; `margin: 0 0 26px` here
	   reset that to 0 and the overlap silently did not happen. Any rule in this file that touches
	   the margin of an element carrying a .ce-brand-* class must name the side it means. */
	margin-bottom: 26px;
	min-width: 0;
}
.ce-store .ce-store__ask-head {
	margin: 0 0 6px;
	font-size: clamp( 20px, 2.3vw, 25px );
	font-weight: 700;
	line-height: 1.2;
	color: var(--ce-store-navy);
}
/* The licence itself, on its own line beneath the name. */
.ce-store .ce-store__ask-said {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ce-store-navy);
	min-width: 0;
	overflow-wrap: anywhere;
}
.ce-store .ce-store__ask-said--ask { font-weight: 400; color: var(--ce-store-muted); }
.ce-store .ce-store__ask-acct {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--ce-store-muted);
	max-width: 62ch;
}
.ce-store .ce-store__acct-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: var(--ce-store-blue);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 24px;
	min-height: 44px;
	cursor: pointer;
	transition: background .15s ease;
}
.ce-store .ce-store__acct-btn:hover { background: var(--ce-store-blue-dark); color: #fff; }

/* The three questions themselves, folded away once answered. */
.ce-store .ce-store__form-wrap { margin: 14px 0 0; border-top: 1px solid var(--ce-store-line); padding-top: 12px; }
.ce-store .ce-store__form-toggle {
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--ce-store-blue);
	text-decoration: underline;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}
.ce-store .ce-store__form-toggle::-webkit-details-marker { display: none; }
.ce-store .ce-store__form-toggle::marker { content: ''; }
.ce-store .ce-store__form-toggle:focus-visible { outline: 3px solid var(--ce-store-blue); outline-offset: 2px; }
.ce-store .ce-store__form { padding: 14px 0 0; }
.ce-store .ce-store__acct-invite { margin: -16px 0 22px; font-size: 15px; color: var(--ce-store-muted); }

/* ⚠ NO RULE BESIDE THE STEP. Scott, 28 Oct 2026: *"Remove the thin blue line next to each
   step."* It was never drawn on purpose — this is a <fieldset> with a top border, and a browser
   notches that border around the <legend>, so what is left of it surfaces as a line running off to
   the right of the question. The numbered disc already separates one step from the next.
   ⚠ AND TIGHTER, NOT CROWDED: *"tighten the card just a bit without crowding."* The 18px that used
   to clear the border goes entirely, and the gap between steps comes down from 20px to 16px. */
.ce-store .ce-store__q { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.ce-store .ce-store__q:last-of-type { margin-bottom: 8px; }
.ce-store .ce-store__q-ask {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ce-store-navy);
	text-wrap: balance;
}
/* ⚠ NUMBERED BECAUSE IT IS GENUINELY A SEQUENCE: the permit question only means something once the
   licence is known, and the reduced requirement applies on top of both. */
.ce-store .ce-store__q-n {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--ce-store-blue);
	color: #fff;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ce-store .ce-store__hint { margin: 8px 0 0; font-size: 13px; color: var(--ce-store-muted); }

/* ⚠ EQUAL COLUMNS, NOT CONTENT WIDTH. Scott, 28 Oct 2026: *"the radio button boxes are not sizing
   correctly."* They were flex items at `flex: 0 1 auto`, so each box was exactly as wide as the
   words inside it — "Salesperson" came out half the width of "Broker or Broker-Salesperson" and the
   two permit boxes disagreed with both. A grid gives every option in a question the same box, which
   is what makes them read as a set of choices rather than as labels that happen to have borders. */
.ce-store .ce-store__tiles {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 10px;
	min-width: 0;
}
/* ⚠ THE WHOLE TILE IS THE TARGET, not a 17px circle — which is what makes this work with a thumb.
   The input is real and still inside the label, so keyboard and screen readers are unaffected. */
.ce-store .ce-store__tile {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	min-height: 56px;
	padding: 12px 16px;
	border: 1.5px solid var(--ce-store-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ce-store-navy);
	transition: border-color .12s ease, background .12s ease;
}
.ce-store .ce-store__tile:hover { border-color: var(--ce-store-blue); }
.ce-store .ce-store__tile input { flex: none; margin: 2px 0 0; width: 19px; height: 19px; accent-color: var(--ce-store-blue); }
.ce-store .ce-store__tile-text { min-width: 0; overflow-wrap: anywhere; }
/* Selected state carried by the tile, not only by the control inside it. */
.ce-store .ce-store__tile:has(input:checked) {
	border-color: var(--ce-store-blue);
	background: var(--ce-store-tint, #eaf2fc);
	font-weight: 600;
}
.ce-store .ce-store__tile:focus-within { outline: 3px solid var(--ce-store-blue); outline-offset: 2px; }

/* ⚠ A BUTTON, NOT A LOZENGE. Scott, 28 Oct 2026: *"'show my package button is not sized
   correctly'."* A 999px radius on a 48px-tall control makes a stadium shape whose ends are pure
   padding; every other primary control on the redesigned pages — Add to cart, the card foot — is a
   12px rectangle, and this was the one survivor of the older round treatment. */
.ce-store .ce-store__go {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 12px;
	background: var(--ce-store-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 0 28px;
	min-height: 48px;
	cursor: pointer;
	transition: background .15s ease;
}
.ce-store .ce-store__go:hover { background: var(--ce-store-blue-dark); }

@media (max-width: 560px) {
	.ce-store .ce-store__ask-sum { padding: 16px 16px 16px 11px; }
	.ce-store .ce-store__form { padding: 0 16px 20px 11px; }
	/* One tile per row below this width: two 48px tiles side by side leave no room for the words. */
	.ce-store .ce-store__tiles { flex-direction: column; }
	.ce-store .ce-store__tile { flex: 1 1 auto; width: 100%; }
	.ce-store .ce-store__go { width: 100%; }
}

/* ── the packages ────────────────────────────────────────────────────────────────────────── */

/* ⚠ THE HOUSE HERO BANNER, THIN. Copied from `.ce-dash__hero` in
   assets/course/runtime.css — the same two-layer background (a white sheen from
   the top-left over the 135deg brand gradient), the same 16px radius and the
   same coloured shadow, so this reads as the same object as the dashboard
   banner and the cohort product hero rather than a lookalike.

   ⚠ #046bd2 IS THE BRAND BLUE, not the storefront's #1c6fb5. It is the value
   Scott gave for the certificate accent bars and the one the calendar, product
   and dashboard heroes already share. Three files define this gradient
   identically; a fourth spelling of it would be the one that drifts.

   The only thing changed is the scale: the hero pads 2.25rem for a page title,
   this pads 12px for a section heading. */
.ce-store .ce-store__list-head {
	display: block;
	/* ⚠ IT WAS TOUCHING THE BLOCK ABOVE. The licence panel ends with its own shadow and this banner
	   began immediately beneath it, so the two read as one shape with a seam. */
	margin: 34px 0 16px;
	padding: 16px 28px 18px;
	border-radius: 16px;
	overflow: hidden;
	background:
		radial-gradient( 120% 130% at 0% 0%, rgba( 255, 255, 255, .16 ) 0%, rgba( 255, 255, 255, 0 ) 46% ),
		linear-gradient( 135deg, #046bd2 0%, #02356f 100% );
	box-shadow: 0 10px 26px rgba( 2, 53, 111, .22 );
	color: #fff;
	font-size: clamp( 18px, 1.9vw, 22px );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.005em;
}

.ce-store .ce-store__list + .ce-store__list {
	margin-top: 46px;
}
/* The title inside the banner, now that the banner holds more than a title. */
.ce-store .ce-store__list-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
/* ⚠ THE NOTE LIVES IN THE BANNER, IN WHITE. It used to be a grey paragraph under a solid blue bar,
   which left the bar reading as a bare label with an orphaned sentence beneath it — and its line
   broke early against a 62ch cap that made no sense once it was inside a full-width banner. */
.ce-store .ce-store__list-note {
	margin: 6px 0 0;
	/* ⚠ NO READING MEASURE HERE. Scott, 28 Oct 2026: the line was breaking early and dropping "to
	   it." onto a line of its own with two thirds of the banner empty beside it. 78ch is a sensible
	   cap for a paragraph somebody reads; this is one sentence inside a wide piece of signage. */
	max-width: none;
	padding-right: 12px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
	color: rgba( 255, 255, 255, .92 );
	text-wrap: pretty;
	/* ⚠ NO INSET OF ITS OWN. The 28px here aligned it with the banner back when it sat BELOW one;
	   now that it is inside, the banner's own padding does that job and this double-indented the
	   sentence against its own title. */
	padding-left: 0;
}
.ce-store .ce-store__none {
	border: 1px solid #f3cfa4;
	border-left: 4px solid #b45309;
	border-radius: 12px;
	background: #fdf6ec;
	padding: 16px 20px;
	margin: 0 0 24px;
}
.ce-store .ce-store__none p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: #7c3d00;
	text-wrap: pretty;
}

.ce-store .ce-store__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 310px, 1fr ) );
	gap: 20px;
	margin: 0 0 8px;
}
.ce-store .ce-store__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ce-store-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 22px rgba( 16, 39, 71, .06 );
	padding: 0 24px 20px;
	overflow: hidden;
}
/* ⚠ FULL BLEED TO THE CARD'S EDGES. The artwork is 500×350; letting it sit inside the padding
   leaves a white margin that reads as a mistake against a rounded card. */
.ce-store .ce-store__art {
	margin: 0 -24px 18px;
	background: var(--ce-store-tint);
}
.ce-store .ce-store__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 350;
	object-fit: cover;
}
.ce-store .ce-store__name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ce-store-navy);
	text-wrap: balance;
}
.ce-store .ce-store__blurb {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ce-store-muted);
	text-wrap: pretty;
}

/* The headline numbers: what the regulation asks for, not what the shop decided. */
.ce-store .ce-store__spec {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
}
.ce-store .ce-store__spec li {
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--ce-store-tint);
	color: var(--ce-store-blue);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* ⚠ THE TOTAL IS THE HEADLINE, THE REST ARE ITS TERMS. The first pill is the
   hours the package sells; the two beside it qualify how those hours may be
   taken. Filling the first one makes that hierarchy visible at a glance instead
   of three identical tints the eye has to read in order.

   Uses the palette's existing dark blue rather than a new value — #15568c
   against white is a little over 7:1, so it stays legible for everyone. */
.ce-store .ce-store__spec li:first-child {
	background: var(--ce-store-blue-dark);
	color: #fff;
}

.ce-store .ce-store__spec strong {
	font-size: 15px;
	font-weight: 700;
}

.ce-store .ce-store__subjects {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ce-store-line);
}
.ce-store .ce-store__subjects li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #33415c;
}
/* ⚠ ADDITIONS, NOT REQUIREMENTS. These answer the same question as the subject
   rows — what hours does this licensee owe — so they sit in the same panel. But
   they are conditional on a permit the buyer may not hold, so the rule above
   them and the lighter weight say "and, if this applies to you".

   A nested box was tried and reverted: two tints stacked read as two competing
   panels rather than one panel with a footnote.

   ⚠ SELECTORS INCLUDE `.ce-store__subjects li`, AND THAT IS NOT DECORATION.
   These rows ARE subjects list items, so `.ce-store .ce-store__subjects li`
   (two classes and an element) beats a two-class rule and silently repaints the
   heading in the row colour. Measured: the title computed to #33415c with the
   shorter selector. Matching the specificity is the fix; !important would only
   hide the collision from the next person. */
.ce-store .ce-store__subjects li.ce-store__extras-head {
	margin: 12px 0 6px;
	padding-top: 10px;
	border-top: 1px solid rgba( 28, 111, 181, .22 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #046bd2;
}
.ce-store .ce-store__subjects li.ce-store__extra {
	color: var(--ce-store-muted);
}
.ce-store .ce-store__subjects li.ce-store__extra span:last-child {
	color: #046bd2;
}

.ce-store .ce-store__subjects li span:last-child {
	flex: none;
	font-weight: 700;
	color: var(--ce-store-navy);
	font-variant-numeric: tabular-nums;
}

.ce-store .ce-store__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
}
.ce-store .ce-store__price {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--ce-store-navy);
}
.ce-store .ce-store__price .woocommerce-Price-amount,
.ce-store .ce-store__price bdi {
	font-size: 28px;
	font-weight: 700;
	color: var(--ce-store-navy);
}
.ce-store .ce-store__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--ce-store-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 13px 24px;
	/* ⚠ NOT SMALLER THAN THE SECONDARY CONTROL. "See details" computes to 44px from its 1.5px
	   border; this had no border and came out 41px, so the primary action was the smaller of the
	   two. 44px is also the touch floor. */
	min-height: 44px;
	text-decoration: none;
	transition: background .15s ease;
}
.ce-store .ce-store__buy:hover,
.ce-store .ce-store__buy:focus {
	background: var(--ce-store-blue-dark);
	color: #fff;
}
.ce-store .ce-store__soon {
	font-size: 14px;
	font-weight: 600;
	color: var(--ce-store-muted);
}

@media ( max-width: 640px ) {
	.ce-store .ce-store__ask {
		padding: 18px 17px;
	}
	/* ⚠ 44px IS THE TOUCH TARGET, AND PADDING ALONE MISSED IT BY THREE PIXELS. Measured on a
	   375px viewport, 25 Oct 2026: "Add to cart" came out 41px and "Show my package" 43px, both
	   from vertical padding on a 15px line. A min-height states the floor instead of leaving it to
	   whatever the font metrics add up to, and it changes nothing on a desktop. */
	.ce-store .ce-store__buy,
	.ce-store .ce-store__more,
	.ce-store .ce-store__go {
		min-height: 44px;
	}
	.ce-store .ce-store__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ce-store .ce-store__go,
	.ce-store .ce-store__buy {
		transition: none;
	}
}

/* ⚠ THE TOP-UP CAVEAT IS PART OF THE PRODUCT, NOT SMALL PRINT. Eighteen hours of self-paced CE does
   not renew a Nevada license, and a card that only showed "18 hours · $50" beside cards that DO
   cover a renewal would read as the cheap option rather than a different thing. */
.ce-store .ce-store__caveat {
	margin: 14px 0 0;
	padding: 10px 13px;
	border-radius: 10px;
	background: #fdf6ec;
	border: 1px solid #f3cfa4;
	color: #7c3d00;
	font-size: 13.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* Stronger than the caveat: the caveat says what a top-up IS, this says what it would do for YOU. */
.ce-store .ce-store__warn {
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid #f0b8b8;
	border-left: 4px solid #b32d2e;
	background: #fdf1f1;
	color: #7a1f20;
	font-size: 13.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

@media ( max-width: 860px ) {
	/* ⚠ THE PHOTOGRAPH GOES BELOW THE WORDS, NOT BESIDE THEM. Side by side at this width leaves the
	   headline in a column four words wide. */
	.ce-store .ce-store__hero {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
		padding-bottom: 26px;
	}
	.ce-store .ce-store__hero-art {
		order: -1;
	}
}

/* ---------------------------------------------------------------------------
   Horizontal package cards.

   ⚠ A LAYOUT CHANGE ONLY — THE MARKUP IS IDENTICAL. The card's children are a
   flat list (art, name, blurb, spec pills, subject rows, footer), so the card
   itself becomes the grid and two of those children are pulled into side
   columns. Nothing in PHP knows about this, which is what keeps the narrow
   layout working from the same HTML.

   ⚠ THE EXPLICIT ROWS ARE LOAD-BEARING, NOT PADDING. `grid-row: 1 / -1` spans
   only the EXPLICIT grid — with rows left implicit, -1 resolves back to line 1
   and a column meant to run the card's full height silently collapses to a
   single row. That is exactly what happened on the first attempt: the art and
   the subject list shrank to one row each and the middle column's children took
   a row apiece. Declaring the rows is what makes the span real. Eight is more
   than any card uses; the surplus are min-content and collapse to nothing.

   ⚠ AND ONLY ON A WIDE VIEWPORT. Three columns in 375px would be unreadable, so
   below 900px the cards stay exactly as they were — stacked, art on top.
   --------------------------------------------------------------------------- */
@media ( min-width: 900px ) {

	.ce-store .ce-store__grid--row {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ce-store .ce-store__grid--row .ce-store__card {
		display: grid;
		grid-template-columns: 260px minmax( 0, 1fr ) minmax( 0, 280px );
		grid-template-rows: repeat( 8, min-content );
		column-gap: 28px;
		padding: 0 28px 0 0;
	}

	/* Everything lands in the middle column unless it is claimed below. */
	.ce-store .ce-store__grid--row .ce-store__card > * {
		grid-column: 2;
	}

	/* ⚠ THE IMAGE IS TAKEN OUT OF FLOW, AND THAT IS THE WHOLE TRICK. A row-spanning
	   grid item whose child is `height: 100%` is circular: the rows size to the
	   image, the image sizes to the rows. Measured on the first attempt — every
	   card came out 1502px tall with four empty 321px rows carrying nothing but
	   the photograph. Positioned absolutely the image contributes no height at
	   all, so the rows are sized by the text and the subject list, and the photo
	   then fills whatever that turns out to be. */
	.ce-store .ce-store__grid--row .ce-store__art {
		grid-column: 1;
		grid-row: 1 / -1;
		margin: 0;
		position: relative;
		min-height: 100%;
	}
	.ce-store .ce-store__grid--row .ce-store__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* ⚠ A PANEL, NOT A LIST WITH A LINE ABOVE IT. Stacked, the hairline border-top
	   separates the breakdown from the card's body and reads correctly. Standing
	   in its own column it separates nothing — it floats. Giving the column a
	   tinted ground defines it as a distinct thing, which is what it is: the
	   subjects and hours this package covers, as against the sales copy beside
	   it. The tint is the one the pills already use, so it is a colour the card
	   has rather than a new one. */
	.ce-store .ce-store__grid--row .ce-store__subjects {
		grid-column: 3;
		grid-row: 1 / -1;
		align-self: center;
		margin: 22px 0;
		padding: 14px 18px;
		border-top: 0;
		border-radius: 12px;
		background: var(--ce-store-tint);
	}

	.ce-store .ce-store__grid--row .ce-store__name {
		margin-top: 24px;
	}

	/* The price and button sit at the foot of the middle column. The last row is
	   the flexible one, so the footer is pushed to the bottom of the card. */
	.ce-store .ce-store__grid--row .ce-store__foot {
		grid-row: 8;
		align-self: end;
		padding-bottom: 22px;
	}
}

/* ── cards and the package page (25 Oct 2026) ────────────────────────────────
   ⚠ THE LIST WAS TOO LONG TO READ. Scott, 25 Oct 2026. Each card printed the whole subject
   breakdown — eight rows on a broker package — so seven packages ran to several screens. The card
   now carries artwork, a one-line summary and two actions; the breakdown lives on the package's
   own page, which is what that page is for. */

.ce-store .ce-store__grid {
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	align-items: stretch;
}
.ce-store .ce-store__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* ⚠ A FIXED RATIO, SO SEVEN DIFFERENT IMAGES STILL LINE UP. The artwork is not all one shape, and
   letting each card take its image's height makes a grid that looks broken rather than varied. */
.ce-store .ce-store__art {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eef2f7;
}
.ce-store .ce-store__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ce-store .ce-store__art-none {
	display: block;
	width: 100%;
	height: 100%;
}
.ce-store .ce-store__body {
	flex: 1 1 auto;
	min-width: 0;
}
.ce-store .ce-store__name a {
	color: inherit;
	text-decoration: none;
}
.ce-store .ce-store__name a:hover,
.ce-store .ce-store__name a:focus { text-decoration: underline; }

.ce-store .ce-store__sum {
	margin: 2px 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var( --ce-store-muted );
}
.ce-store .ce-store__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 16px;
	border: 1.5px solid #b6c2d3;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}
.ce-store .ce-store__more:hover,
.ce-store .ce-store__more:focus { border-color: #54637a; }

/* ⚠ THE THEME UNDERLINES EVERY LINK IN THE CONTENT, AND OUR CONTROLS ARE LINKS. Astra ships an
   inline rule — `.ast-single-post .entry-content a, .ast-comment-content a:not(…)` — that sets
   text-decoration: underline and outranks `.ce-store .ce-store__buy`. Measured on production: the
   Add to cart control was a correct blue pill wearing an underline, which made the button that
   takes the money look weaker than the outlined "See details" beside it.
   ⚠ ONE RULE FOR ALL OF THEM rather than a patch per element — `__more` had already been fixed
   this way and `__buy` had not, which is how they drifted apart in the first place.
   ⚠ AND IT IS NOT SELF-MAINTAINING, WHATEVER THIS COMMENT USED TO CLAIM. It said "any control we
   add later is covered without anybody having to remember this", which is simply untrue of a list
   of class names — and it cost exactly what it promised to prevent: `__showall`, added on 28 Oct
   2026, shipped as a blue button with a theme underline straight through it. The list cannot be
   widened to `a[class*="ce-store__"]` either, because the genuine text links in this page — the
   log-in invitation, "See what's included" — should keep their underline. **Add every new
   link-styled control to this list by hand.** */
.ce-store a.ce-store__buy,
.ce-store a.ce-store__more,
.ce-store a.ce-store__acct-btn,
.ce-store a.ce-store__showall,
.ce-store a.ce-store__picker-go {
	text-decoration: none !important;
}

/* the package's own page */
.ce-store--single .ce-store__back { margin: 0 0 14px; }
.ce-store .ce-store__single {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 20px;
}
.ce-store .ce-store__single-art img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}
.ce-store .ce-store__single-name { margin: 0 0 4px; }
.ce-store .ce-store__sub-head { margin: 18px 0 8px; font-size: 17px; }


@media ( min-width: 760px ) {
	.ce-store .ce-store__single {
		grid-template-columns: minmax( 0, 320px ) minmax( 0, 1fr );
		align-items: start;
	}
}

@media ( max-width: 640px ) {
	.ce-store .ce-store__hero-points { grid-template-columns: minmax( 0, 1fr ); }
	.ce-store .ce-store__grid { grid-template-columns: minmax( 0, 1fr ); }
	/* ⚠ THE CARD'S PHONE LAYOUT MOVED. It used to be a 104px thumbnail beside the title, laid out
	   with grid-template-areas; the card carries no artwork at phone width any more, so those rules
	   named areas that no longer exist and fought the ones that replaced them. The whole of it now
	   lives in the rebuilt-card section at the foot of this file. */
}


/* ── Your account, under the three questions ────────────────────────────────────────────────────
   ⚠ THREE DIFFERENT STATES, NOT ONE. Signed out gets an invitation; a licensee we recognise gets
   their details stated and a way to correct them; a licensee with no record (or an out-of-state
   one) gets told that plainly. Scott, 27 Oct 2026, asked for the "does this look correct?" line —
   it only appears where we actually used something, because asking it of someone with no licence
   on file sends them hunting for a record that does not exist. */
.ce-store .ce-store__acct {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ce-store-soft, #f7f8fa);
	border: 1px solid var(--ce-store-line, #e3e6ea);
	font-size: 14px;
	line-height: 1.45;
	min-width: 0;
	overflow-wrap: anywhere;
}
.ce-store .ce-store__acct.is-known { border-left: 3px solid var(--ce-store-accent, #046bd2); }
.ce-store .ce-store__acct-said { margin: 0 0 6px; }
.ce-store .ce-store__acct-ask  { margin: 0 0 10px; font-weight: 600; }

/* The licence wizard, iframed — the same shape Course_Gate uses. */
.ce-store .ce-store__licwiz { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ce-store .ce-store__licwiz[hidden] { display: none; }
.ce-store .ce-store__licwiz-bd { position: absolute; inset: 0; background: rgba(2, 53, 111, .45); }
.ce-store .ce-store__licwiz-in {
	position: relative;
	background: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 520px;
	/* ⚠ SAFE-AREA AWARE. On a phone this sits under the status bar otherwise. */
	max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ce-store .ce-store__licwiz-x {
	position: absolute; top: 6px; right: 10px; z-index: 1;
	appearance: none; border: 0; background: transparent;
	font-size: 28px; line-height: 1; cursor: pointer; color: #5a6b80;
	min-width: 44px; min-height: 44px;
}
.ce-store .ce-store__licwiz-frame { border: 0; width: 100%; height: 70vh; flex: 1 1 auto; }

@media (max-width: 480px) {
	.ce-store .ce-store__licwiz { padding: 0; }
	.ce-store .ce-store__licwiz-in { max-width: none; border-radius: 0; max-height: 100%; height: 100%; }
	.ce-store .ce-store__licwiz-frame { height: auto; }
}

/* ── Choosing your courses before paying ────────────────────────────────────────────────────────
   ⚠ A PLAIN FORM, STYLED TO BE TAPPABLE. Scott, 27 Oct 2026: the "Choose Any Six" package is
   picked at time of purchase, so this is the last thing between a student and their money — it
   has to be readable on a phone and obvious how many are still needed. */
.ce-store .ce-store__picker {
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--ce-store-line, #e3e6ea);
	border-radius: 12px;
	background: var(--ce-store-soft, #f7f8fa);
	min-width: 0;
}
.ce-store .ce-store__picker-head { margin: 0 0 4px; font-size: 18px; }
.ce-store .ce-store__picker-note { margin: 0 0 10px; font-size: 14px; opacity: .8; }
.ce-store .ce-store__picker-count {
	margin: 0 0 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ce-store-accent, #046bd2);
}
.ce-store .ce-store__picker-group { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.ce-store .ce-store__picker-group legend {
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}
.ce-store .ce-store__picker-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* ⚠ 44px ROW, not a 13px checkbox. These get tapped with a thumb. */
	min-height: 44px;
	padding: 6px 0;
	font-size: 15px;
	line-height: 1.35;
	cursor: pointer;
	min-width: 0;
}
.ce-store .ce-store__picker-opt input { width: 20px; height: 20px; flex: 0 0 auto; margin: 3px 0 0; }
.ce-store .ce-store__picker-opt span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* A chosen row reads as chosen without relying on the checkbox alone. */
.ce-store .ce-store__picker-opt:has(input:checked) { font-weight: 600; }
.ce-store .ce-store__picker-go {
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: var(--ce-store-accent, #046bd2);
	color: #fff;
	font: inherit;
	font-weight: 600;
	padding: 12px 22px;
	min-height: 44px;
	cursor: pointer;
}
/* ⚠ HIDDEN ONLY WHERE THE SCRIPT RUNS. Without JavaScript this button is how the choice is
   submitted, so it must never be hidden by CSS alone. */
.ce-store.is-live .ce-store__picker-go { display: none; }

@media (max-width: 480px) {
	.ce-store .ce-store__picker { padding: 12px; }
	.ce-store .ce-store__picker-opt { font-size: 14px; }
}


/* ── the card, rebuilt (28 Oct 2026) ─────────────────────────────────────────────────────────
   ⚠ "The cards need to be the same height and they need a much better and clean design." Scott,
   28 Oct 2026, choosing Option B from three renderings. They already stretched — a grid sees to
   that — but nothing INSIDE them lined up: titles ran one to three lines, the chip row was one
   line or two, and the "Your permits add" box existed on some cards and not others, so every row
   below the artwork sat at a different height.

   Three things changed. The price moved onto the artwork, which frees the whole foot for one wide
   button and stops the loudest element on the page from being a number that is $119 on seven of
   the eight licence packages. The licence became a tag on the image instead of a pill in the body.
   And the card became a grid of fixed rows whose optional slots keep their height when empty. */

.ce-store .ce-store__card {
	display: grid;
	grid-template-rows: auto minmax( 0, 1fr ) auto;
	padding: 0;
	border-radius: 18px;
	box-shadow: 0 8px 26px rgba( 16, 39, 71, .07 );
}

/* ── the artwork, and what sits on it ─────────────────────────────────────────────── */
.ce-store .ce-store__card .ce-store__art {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ce-store-tint);
}
.ce-store .ce-store__card .ce-store__art-link { display: block; height: 100%; }
.ce-store .ce-store__card .ce-store__art img,
.ce-store .ce-store__card .ce-store__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: auto;
}
/* ⚠ THE TINT, NOT THE PHOTOGRAPH, DARKENS. The tag and the price sit at the bottom of the image
   and four of the eleven photographs are pale there; a gradient that only touches the lower half
   keeps them legible without flattening the artwork. */
.ce-store .ce-store__card .ce-store__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 2, 53, 111, 0 ) 44%, rgba( 2, 53, 111, .6 ) 100% );
	pointer-events: none;
}
/* ⚠ TOP-LEFT, BECAUSE THE ARTWORK ALREADY OWNS THE BOTTOM-LEFT. Every one of the eleven images
   carries the round "ce" mark in its lower-left corner; a pill placed there sat on top of it and
   left a blue crescent poking out from behind the words. The price keeps the lower right, which
   is clear on all of them. */
.ce-store .ce-store__tag {
	position: absolute;
	left: 13px;
	top: 12px;
	z-index: 2;
	background: rgba( 255, 255, 255, .95 );
	color: var(--ce-store-navy);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.35;
	padding: 5px 10px;
	border-radius: 999px;
	/* ⚠ "Broker / Broker-Salesperson" is the longest of them; it wraps inside the pill rather than
	   running under the price badge. */
	/* Nothing shares the top row, so it may run most of the width before it wraps. */
	max-width: calc( 100% - 26px );
	box-shadow: 0 2px 8px rgba( 2, 53, 111, .25 );
}
.ce-store .ce-store__cost {
	position: absolute;
	right: 13px;
	bottom: 12px;
	z-index: 2;
	background: var(--ce-store-accent, #046bd2);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	padding: 6px 13px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba( 2, 53, 111, .4 );
	font-variant-numeric: tabular-nums;
}
.ce-store .ce-store__cost .woocommerce-Price-amount,
.ce-store .ce-store__cost bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ── the body ─────────────────────────────────────────────────────────────────────── */
.ce-store .ce-store__card .ce-store__body {
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	min-width: 0;
}
/* ⚠ THREE LINES RESERVED, AND THE SAME THREE ALLOWED. Clamping at two truncated the longest names
   mid-word — "36-Hour Broker or Broker-Salesperson with Business…" hides the one word that tells
   that card from its neighbour. Reserving the three a long title needs costs about 23px of white
   space on a short card and buys the thing the redesign is for: the summary and the ticked lines
   start on the same baseline in every card, not just the same box. */
.ce-store .ce-store__card .ce-store__name {
	margin: 15px 0 0;
	font-size: 17.5px;
	line-height: 1.3;
	/* ⚠ TWO RESERVED, THREE ALLOWED. Reserving three put an empty line under every short title —
	   "36-Hour Salesperson CE Package" is one line and was paying for three — which is most of the
	   white space Scott flagged on 28 Oct 2026. A long title still takes its third line; the row it
	   is in grows with it, and the rows either side are unaffected. */
	min-height: calc( 2 * 1.3em );
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ce-store .ce-store__card .ce-store__sum {
	margin: 9px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ce-store-muted);
}
/* ⚠ THIS IS THE RULE THAT MAKES FOUR CARDS END LEVEL. The slot is printed whether or not the buyer
   holds a permit, and it keeps a floor of one line either way. Without it a card with nothing to
   add closes up where its neighbour has two lines. */
/* ⚠ PROPORTIONAL TO THE CARD, NOT TO A FOOTNOTE. Scott, 28 Oct 2026: *"the bullet points text is
   small and not proportional to the rest of the card. There seems to be a lot of white space."*
   12.5px against a 17.5px title and a 17px total read as small print; these lines ARE the offer.
   Raising them to 14.5px also fills the card honestly rather than leaving a gap under the title. */
.ce-store .ce-store__facts {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ce-store-muted);
	min-height: calc( 3 * 1.45em + 14px );
}
.ce-store .ce-store__facts > span {
	display: flex;
	gap: 5px;
	align-items: baseline;
	min-width: 0;
}
.ce-store .ce-store__tick {
	flex: 0 0 auto;
	color: #1f9254;
	font-weight: 800;
	font-style: normal;
}

/* ── the foot: one button leads ───────────────────────────────────────────────────── */
.ce-store .ce-store__card .ce-store__foot {
	display: block;
	margin-top: 14px;
	padding: 0 20px 18px;
	border: 0;
}
.ce-store .ce-store__card .ce-store__price { display: none; }
.ce-store .ce-store__card .ce-store__buy,
.ce-store .ce-store__card .ce-store__soon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	padding: 0 14px;
	text-align: center;
}
.ce-store .ce-store__card .ce-store__soon {
	background: #f1f4f8;
	color: var(--ce-store-muted);
	border: 1px dashed #c9d4e2;
}
.ce-store .ce-store__card .ce-store__more {
	display: block;
	width: 100%;
	text-align: center;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	min-height: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ce-store-blue);
}

@media ( max-width: 640px ) {
	/* ⚠ NO ARTWORK ON A PHONE AT ALL. Scott, 28 Oct 2026: "for mobile devices, we don't need the
	   package image." It was the single biggest thing on the card — a 16/10 image across a 375px
	   screen is 186px of it — and the photographs are decoration, not information: the title, the
	   hours and the price are what a buyer reads. Dropping it takes roughly 40% off the height of
	   every card, which is the same complaint that started this ("the entire packages list is too
	   long") answered at the source rather than by shrinking the picture. */
	.ce-store .ce-store__card {
		grid-template-rows: minmax( 0, 1fr ) auto;
		grid-template-columns: minmax( 0, 1fr );
		padding: 16px;
		gap: 0;
	}
	.ce-store .ce-store__card .ce-store__art { display: none; }
	.ce-store .ce-store__card .ce-store__body { padding: 0; }
	/* ⚠ NO RESERVED LINE, AND NOTHING TRUNCATED. The third line exists on a desktop to keep a row
	   of cards aligned; at phone width there is only ever one card in a row, so the title takes the
	   lines it needs and no card pays for a name it does not have. Clamped at three only so a
	   pathological title cannot run away with the card. */
	.ce-store .ce-store__card .ce-store__name {
		margin: 0;
		font-size: 17px;
		min-height: 0;
		-webkit-line-clamp: 3;
	}
	.ce-store .ce-store__facts { min-height: 0; margin-top: 8px; }
	.ce-store .ce-store__facts:empty { display: none; }
	.ce-store .ce-store__card .ce-store__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		margin-top: 14px;
		padding: 0;
	}
	/* The price has no artwork to sit on now, so it leads the foot. */
	.ce-store .ce-store__card .ce-store__price {
		display: block;
		flex: 0 0 auto;
		font-size: 22px;
		font-weight: 800;
		line-height: 1;
		color: var(--ce-store-navy);
	}
	.ce-store .ce-store__card .ce-store__buy,
	.ce-store .ce-store__card .ce-store__soon { flex: 1 1 140px; width: auto; }
	.ce-store .ce-store__card .ce-store__more { flex: 1 1 100%; margin: 0; }
}


/* ── the license panel, rebuilt (28 Oct 2026) ────────────────────────────────────────────────
   ⚠ "This is ugly ... it needs a lot of design work." Scott, 28 Oct 2026, choosing Option 1 from
   two renderings. The panel's hierarchy was upside down: a large filled blue button for a
   correction most visitors never need, sitting above a small underlined link that was the thing
   they came to do, with the log-in shortcut printed outside the panel entirely.

   The header now holds everything that states a fact about the visitor — the panel's name, their
   licence as chips, and a quiet outlined control to correct it. The body holds the one thing the
   page wants. The log-in invitation sits on its own footer rule INSIDE the panel, after the thing
   it is an alternative to. */

.ce-store .ce-store__ask-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.ce-store .ce-store__ask-id { flex: 1 1 320px; min-width: 0; }
.ce-store .ce-store__ask-head {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ce-store-navy);
}
.ce-store .ce-store__ask-said {
	margin: 5px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ce-store-muted);
	text-wrap: pretty;
}
.ce-store .ce-store__ask-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	min-width: 0;
}
.ce-store .ce-store__ask-chip {
	background: var(--ce-store-tint);
	color: var(--ce-store-blue);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	max-width: 100%;
	overflow-wrap: anywhere;
}
/* The licence itself leads; what it adds follows. */
.ce-store .ce-store__ask-chip:first-child {
	background: var(--ce-store-blue);
	color: #fff;
}
/* ⚠ OUTLINED AND SMALL, BECAUSE IT IS THE SECOND ACTION. This rule replaces a filled blue pill;
   see the note on the button in Storefront::licence_wizard_markup(). */
/* ⚠ FILLED, NOT OUTLINED. Scott, 28 Oct 2026: *"Update license button should be blue."* The
   outlined version was my answer to it having been the loudest thing on the panel; moving it into
   the header already fixed that, and once it is small and off to the side it can carry the brand
   colour without competing with "Show my package". */
.ce-store .ce-store__acct-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ce-store-blue);
	color: #fff;
	border: 1.5px solid var(--ce-store-blue);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	padding: 0 16px;
	min-height: 40px;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.ce-store .ce-store__acct-btn:hover,
.ce-store .ce-store__acct-btn:focus {
	background: var(--ce-store-blue-dark);
	border-color: var(--ce-store-blue-dark);
	color: #fff;
}
.ce-store .ce-store__ask-acct {
	margin: 14px 0 0;
	padding: 11px 14px;
	background: #f7fafd;
	border: 1px solid var(--ce-store-line);
	border-radius: 11px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ce-store-muted);
	text-wrap: pretty;
}
.ce-store .ce-store__ask-foot {
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ce-store-line);
}
.ce-store .ce-store__ask-foot .ce-store__acct-invite { margin: 0; font-size: 13.5px; }

/* ── the hours, on the card ──────────────────────────────────────────────────────────────────
   ⚠ THE TOTAL IS A FACT; THE TWO BELOW IT ARE PROMISES. See the note in Storefront::card(). */
.ce-store .ce-store__total {
	/* ⚠ WEIGHT 700 AND ALL BLUE. Scott, 28 Oct 2026, choosing from seven weights: *"the CE hours are
	   a bit too bold"*, then *"Option 1 in all blue."* At 800 in navy it was competing with the
	   title directly above it; one step down, carried in the brand blue the status dots and the
	   price badge already use, keeps it findable through colour rather than heft and ties it to the
	   three lines it introduces. */
	margin: 12px 0 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--ce-brand, #046bd2);
}
/* The dot is the shared one from ce-brand.css; it needs a little lift to sit on a text baseline. */
.ce-store .ce-store__facts > span > .ce-brand-dot {
	position: relative;
	top: -1px;
	margin-right: 1px;
}
/* ⚠ THE RING NEEDS ROOM TO GROW INTO. It is drawn as a box-shadow spreading 10px out of the badge;
   with the artwork clipping at its own edge the ring was sliced off on two sides. */
.ce-store .ce-store__card .ce-store__art { overflow: visible; }
.ce-store .ce-store__card .ce-store__art-link {
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 18px 18px 0 0;
}


/* ── the card responds to a pointer (28 Oct 2026) ────────────────────────────────────────────
   ⚠ "the cards need a hover effect" — then, having seen it: *"On the box hover, only have the
   shadow element and no other movement. shadow on hover only."* Scott, 28 Oct 2026. The lift and
   the image zoom are gone; the shadow deepens and nothing shifts. A grid of eleven cards is a lot
   of things to have move under a cursor, and the shadow alone is enough to say the card is live.
   ⚠ :focus-within TOO, so the same acknowledgement reaches a keyboard. */
.ce-store .ce-store__card {
	transition: box-shadow .18s ease;
}
.ce-store .ce-store__card:hover,
.ce-store .ce-store__card:focus-within {
	box-shadow: 0 18px 40px rgba( 16, 39, 71, .18 );
}
@media ( prefers-reduced-motion: reduce ) {
	.ce-store .ce-store__card { transition: none; }
}


/* ⚠ border-box ON THE DESCENDANTS, NOT JUST ON THE ROOT (28 Oct 2026) ───────────────────────
   Scott, twice: *"the radio button boxes are not sizing correctly"* — and after a first fix that
   made them equal in WIDTH, *"You did not fix the box size issues."* He was right, and it was never
   about width. `.ce-store` sets `box-sizing: border-box` on ITSELF and nothing inherits it, so every
   rule in this file that pairs a `min-height` with padding has been quietly wrong: the option tile
   asks for 56px, adds 12px of padding top and bottom and a 1.5px border, and renders at 83px. Every
   measurement in here was written expecting border-box; this makes that true. Scoped to .ce-store,
   and 26 of the page's 334 elements were affected. */
.ce-store,
.ce-store *,
.ce-store *::before,
.ce-store *::after {
	box-sizing: border-box;
}


/* ── "Show all packages" (28 Oct 2026) ───────────────────────────────────────────────────────
   ⚠ A BUTTON, BECAUSE IT NAVIGATES. Scott, 28 Oct 2026: once the licensee has their package, the
   old "Change my answers" disclosure link becomes a blue button that clears the answers and brings
   back the full list. It is drawn like the other primary controls on these pages — 12px rectangle,
   46px tall — rather than like the text link it replaced, because it now does something rather
   than merely revealing something. */
.ce-store .ce-store__ask-act {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ce-store-line);
}
.ce-store .ce-store__showall {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ce-store-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 0 24px;
	min-height: 46px;
	border-radius: 12px;
	text-decoration: none;
	transition: background .15s ease;
}
.ce-store .ce-store__showall:hover,
.ce-store .ce-store__showall:focus {
	background: var(--ce-store-blue-dark);
	color: #fff;
	text-decoration: none;
}