/*
 * licensure.css
 * Standalone recreation of Figma node 97:2961 ("Licensure Series").
 * Styles ONLY this page's main content via .lic-* classes. The shared
 * header/footer chrome keeps its own storefront styling.
 *
 * Figma tokens:
 *   Blue_Main #2DA7FA · Blue_Subtle #EDF7FF · Blue_Shape #C7E5FA
 *   Text #333536 · Muted #737A82 · Line #E7E7E7
 *   BG/Default #F6F6F6 · BG/Background #F7F7F9
 *   Title/Display 36/44 · Title/Title 24/30 · Body/Lead 16/22 · Body-sm 12
 */

.lic-main {
	--lic-blue: #2da7fa;
	--lic-blue-subtle: #edf7ff;
	--lic-blue-shape: #c7e5fa;
	--lic-text: #333536;
	--lic-muted: #737a82;
	--lic-line: #e7e7e7;
	--lic-card: #f6f6f6;
	/* Match the homepage's main content width (.ft-split = 1340) so the side
	 * margins line up between pages; also matches Figma (content x=300 / 1320). */
	--lic-shell: min(1320px, 100% - 80px);
	color: var(--lic-text);
	font-family: "Montserrat", sans-serif;
}

.lic-main *,
.lic-main *::before,
.lic-main *::after {
	box-sizing: border-box;
}

.lic-shell {
	width: var(--lic-shell);
	margin-inline: auto;
}

/* Hero sits on a wider 18.75% gutter than the sections (Figma: hero copy x=360,
 * sections x=300), like the homepage hero. Applied from 991px up; below that it
 * stacks.
 *
 * A flat 62.5% collapses the media column on smaller desktops: at ~1000px it is
 * 625px (copy 480 + gap 48 + media ≈ 97px), shrinking the dental models to a
 * sliver. Instead hold a 1200px content block (the 1920 design: copy 480 + gap
 * 48 + media 672) down to where the viewport can't afford it (then full width
 * minus a small gutter), and only keep the 18.75% inset once 62.5% is wider than
 * that block (>=1920). Mirrors the homepage hero (.ft-section--hero .ft-shell)
 * so the image stays a consistent size across desktop widths and at 4K. */
@media (min-width: 991px) {
	.lic-section--hero .lic-shell {
		width: min(100% - 48px, max(1200px, 62.5%));
		max-width: none;
	}
}

/* ---- Sections ---- */
.lic-section {
	padding: 80px 0;
	scroll-margin-top: calc(var(--shop-header-height, 96px) + 12px);
}

.lic-section--hero {
	background: #f6f6f6;
	padding: 72px 0;
	/* Clip the blob's overhang flush to the hero edges (it peeks below/left of the
	 * models), mirroring the charlie/homepage hero. */
	overflow: hidden;
}

.lic-section--adex {
	background: #fdfdfd;
}

.lic-section--crdts {
	background: #f7f7f9;
}

/* ---- Shared type ---- */
.lic-accent {
	color: var(--lic-blue);
}

.lic-heading {
	display: grid;
	gap: 8px;
}

.lic-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--lic-text);
}

.lic-title {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--lic-text);
}

/* ---- Buttons ---- */
.lic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	padding: 12px 32px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}

.lic-btn i {
	font-size: 16px;
}

.lic-btn--primary {
	background: var(--lic-blue);
	color: #f6f6f6;
}

.lic-btn--outline {
	background: transparent;
	color: var(--lic-blue);
	border-color: var(--lic-blue);
}

.lic-btn--sm {
	padding: 8px 16px;
	font-size: 14px;
	gap: 8px;
}

.lic-btn--sm i {
	font-size: 14px;
}

/* ---- Hero ---- */
.lic-hero {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	/* Roomier copy↔media gap so the models (and the blob's left overhang) keep
	 * clear of the copy on smaller desktops where the media column is squeezed. */
	gap: 72px;
	align-items: center;
}

.lic-hero__copy {
	display: grid;
	gap: 24px;
	max-width: 480px;
}

.lic-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 8px 14px;
	background: #fff;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(39, 55, 75, 0.08);
	font-size: 14px;
	font-weight: 600;
	color: var(--lic-text);
}

.lic-hero__badge i {
	font-size: 15px;
	color: var(--lic-blue);
}

.lic-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	color: var(--lic-text);
}

.lic-hero__desc {
	margin: 0;
	/* Figma hero copy frame is 480px wide → description wraps to 3 lines. */
	max-width: 480px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--lic-muted);
}

.lic-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

/* Models + blob locked together via .lic-hero__figure (sized to the models), so
 * the blob keeps its position/size relative to the models at every width — the
 * same approach as the homepage hero (.ft-hero__media-stack) and charlie
 * (.ch-hero__figure). The figure fills the media column and caps its width so the
 * models stay a consistent size; 4K scales the cap up via its own override.
 * (Replaces the old .lic-hero__media::before blob, which was a % of the media
 * CELL — wider than the capped image — so it drifted/squished on resize.) */
.lic-hero__figure {
	position: relative;
	width: 100%;
	max-width: 560px; /* Figma models box ≈ 500px; matches the prior image cap */
}

.lic-hero__models {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	object-fit: contain;
}

/* Soft blue blob (hero_blob.svg, 578×310) behind the lower-left of the models,
 * peeking out below. Offsets/size are % of the figure (= the models box), from
 * the Figma 1080p layout, so the blob↔models relationship holds at any width. */
.lic-hero__blob {
	position: absolute;
	z-index: 0;
	left: -12%;
	top: 42%;
	width: 104%;
	height: auto;
	pointer-events: none;
}

/* ---- Exam series (tabbed) ---- */
.lic-exam__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.lic-tabs {
	display: flex;
	align-items: flex-end;
	gap: 32px;
}

.lic-tab {
	margin: 0;
	padding: 0 2px 8px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 18px; /* Figma Title/H4 (SemiBold 18) */
	font-weight: 600;
	line-height: 1.2;
	color: var(--lic-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.lic-tab:hover {
	color: var(--lic-text);
}

.lic-tab.is-active {
	color: var(--lic-text);
	border-bottom-color: var(--lic-blue);
}

/* ---- Panels ---- */
.lic-panel {
	display: block;
}

.lic-panel[hidden] {
	display: none;
}

/* ---- Product cards ---- */
.lic-cards {
	display: grid;
	gap: 16px;
	margin-top: 32px;
}

.lic-cards--wide {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lic-cards--wide.lic-cards--count-1 {
	grid-template-columns: minmax(0, 652px);
	justify-content: center;
}

.lic-cards--tall.lic-cards--count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Keep tall cards at the same width as the 3-up Dental tab (Figma 429px each)
 * when a tab only has 2 products — don't stretch them across the full row. */
.lic-cards--tall.lic-cards--count-2 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lic-pcard {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

.lic-pcard h3 {
	margin: 0;
	font-size: 14px; /* Figma Title/H3 (SemiBold 14) */
	font-weight: 600;
	line-height: normal; /* Figma text uses Auto line height (leading-normal) */
	color: var(--lic-text);
	/* Break long unbroken titles (e.g. "Endodontics/Prosthodontics") so they wrap
	 * inside narrow cards. `anywhere` (not `break-word`) is required so the long
	 * token also stops inflating the grid column's min-content, which otherwise
	 * forces the card content wider than the card and clips it (overflow:hidden). */
	overflow-wrap: anywhere;
}

.lic-pcard p {
	margin: 0;
	font-size: 12px; /* Figma Body/Body-sm (Medium 12) */
	line-height: normal; /* Figma text uses Auto line height (leading-normal) */
	font-weight: 500;
	color: var(--lic-muted);
}

/* Let the info column shrink below its content's intrinsic width so the card
 * text wraps inside narrow (2-column / 1-column) cards on mobile. */
.lic-pcard__info {
	min-width: 0;
}

.lic-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	color: var(--lic-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lic-cart i {
	font-size: 14px;
}

/* Wide card (ADEX): text left, image right, blue background.
 * Figma biases the copy toward the bottom (text block sits below centre), so
 * the card bottom-aligns the info column instead of centring it. */
.lic-pcard--wide {
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	background: var(--lic-blue-subtle);
}

/* Text column sized so the copy wraps to Figma's line counts (text frame is
 * ~248–257px wide; e.g. "Restorative and Periodontal" desc = 4 lines). Left
 * inset 32px matches Figma; small right inset keeps a gap before the image. */
.lic-pcard--wide .lic-pcard__info {
	display: grid;
	gap: 8px;
	flex: 0 0 45%;
	max-width: 45%;
	padding: 32px 8px 40px 32px;
}

/* Figma spaces the Add-to-Cart link 16px below the description (8px elsewhere). */
.lic-pcard--wide .lic-cart {
	margin-top: 8px;
}

.lic-pcard--wide .lic-pcard__media {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-height: 240px;
	overflow: hidden;
}

/* No side padding: the model artwork is a wide image, so padding would
 * letterbox it small. Let it span the media width and anchor right (Figma:
 * models sit large against the right edge, vertically centred). */
.lic-pcard--wide .lic-pcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 16px 0 0;
	object-fit: contain;
	object-position: center right;
}

/* Dental Hygiene model: the source asset faces the opposite way to the Figma, so
 * it's mirrored. Otherwise it uses the SAME contained, right-anchored placement as
 * every other wide-card image (inherited above) — contained so the full model
 * stays visible at every width. (The previous version bled the model off the right
 * edge, which clipped it even at 1080p.) */
.lic-pcard--wide .lic-pcard__media--flip img {
	transform: scaleX(-1);
}

/* Restorative & Periodontal — Figma places two clipped views of ONE combined
 * photo (articulator model + occlusal arch) tight together, the arch slightly
 * overlapping the model. Each piece is a background-image crop with UNIFORM
 * background-size (keeps aspect), so it never distorts at any card width — unlike
 * the old object-fit:fill crops, which only held their aspect at the exact design
 * card ratio and squished everywhere else.
 *
 * Crop math derived from the Figma node against the 1115×550 combined source:
 *   bg-size width % = source_w / region_w;  box aspect-ratio = region_w / region_h;
 *   bg-position-x %  = region_x / (source_w − region_w);  (same for y)
 * Pieces are sized by media WIDTH (Figma model 197/359 = 55%, arch 155/359 = 43.3%)
 * with the height following each piece's aspect-ratio, so the pair always fits the
 * media width (no clipping) and never depends on the card height — then it's
 * vertically centred. */
.lic-pcard--wide .lic-pcard__media--composite {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lic-pcard--wide .lic-pcard__media--composite .lic-comp {
	flex: 0 0 auto;
	background-image: url(/images/new/licensure/adex_restorative_combined.png);
	background-repeat: no-repeat;
}

/* Articulator model — Figma "Licensure-Restorative 3" (region 41,87 · 513×346) */
.lic-pcard--wide .lic-pcard__media--composite .lic-comp--model {
	width: 55%;
	aspect-ratio: 513 / 346;
	background-size: 217.3% auto;
	background-position: 6.8% 42.6%;
}

/* Occlusal arch — Figma "Licensure-Restorative 2" (region 657,107 · 394×317),
 * drawn in front, overlapping the model's right edge a touch. */
.lic-pcard--wide .lic-pcard__media--composite .lic-comp--arch {
	width: 43.3%;
	aspect-ratio: 394 / 317;
	background-size: 283.3% auto;
	background-position: 91% 45.9%;
	margin-left: -7%;
	z-index: 1;
}

/* Tall card (CRDTS): text top, image bottom, grey background */
.lic-pcard--tall {
	display: flex;
	flex-direction: column;
	min-height: 340px;
	background: var(--lic-card);
}

.lic-pcard--tall .lic-pcard__info {
	display: grid;
	gap: 8px;
	padding: 32px 32px 16px;
}

.lic-pcard--tall .lic-pcard__media {
	flex: 1 1 auto;
	min-height: 170px;
	margin-top: auto;
	padding: 8px 16px 16px;
}

.lic-pcard--tall .lic-pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 210px;
	object-fit: contain;
	object-position: center bottom;
}

/* ---- Divider ---- */
.lic-divider {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--lic-line);
}

/* ---- Resources ---- */
.lic-resources__title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--lic-text);
}

.lic-resources__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.lic-rcard {
	display: flex;
	flex-direction: column;
	background: var(--lic-card);
	border-radius: 16px;
	text-decoration: none;
}

.lic-rcard--video {
	width: 286px;
	padding: 12px;
	gap: 12px;
}

.lic-rcard__thumb {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.lic-rcard__thumb img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.lic-rcard__caption {
	margin: 0 4px 4px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lic-text);
}

.lic-rcard--info {
	width: 216px;
	align-items: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
}

.lic-rcard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

.lic-rcard__logo img {
	max-width: 160px;
	max-height: 44px;
	object-fit: contain;
}

.lic-rcard--info h4 {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--lic-text);
}

.lic-rcard--info p {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--lic-muted);
}

.lic-rcard--info .lic-btn {
	margin-top: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.lic-section {
		padding: 56px 0;
	}

	.lic-section--hero {
		padding: 48px 0;
	}

	.lic-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.lic-hero__copy {
		max-width: none;
		justify-items: center;
		text-align: center;
	}

	.lic-hero__desc {
		margin-inline: auto;
	}

	/* Copy first, image below — matching the modupro / charlie mobile heroes.
	 * Natural DOM order (copy → media) gives this, so no order override. */
	.lic-hero__media {
		min-height: 0;
	}

	.lic-hero__figure {
		max-width: 420px;
	}

	/* Heading on top, tabs scroll horizontally below it */
	.lic-exam__top {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.lic-tabs {
		gap: 24px;
		width: 100%;
		/* min-width:0 lets the nowrap tab row scroll inside the shell instead of
		 * stretching the section wider than the viewport (horizontal page scroll). */
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.lic-tabs::-webkit-scrollbar {
		display: none;
	}

	/* ADEX wide cards → one per row (full width). They're text-heavy horizontal
	 * banners, so stacking reads better than a cramped 2-up (same call as the
	 * Charlie Titan cards). */
	.lic-cards--wide,
	.lic-cards--wide.lic-cards--count-1 {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	/* CRDTS tall cards → uniform 2-column grid (the modupro / charlie mobile
	 * convention); they collapse to one column below 450px. */
	.lic-cards--tall.lic-cards--count-2,
	.lic-cards--tall.lic-cards--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}

	.lic-pcard--wide .lic-pcard__info {
		flex-basis: 50%;
		max-width: 50%;
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.lic-hero__title {
		font-size: 30px;
		line-height: 38px;
	}

	/* Stack the wide card into a column (text over image) on phones */
	.lic-pcard--wide {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.lic-pcard--wide .lic-pcard__info {
		flex-basis: auto;
		max-width: none;
		padding: 24px 24px 8px;
	}

	.lic-pcard--wide .lic-pcard__media {
		position: relative;
		min-height: 180px;
		height: 200px;
	}

	.lic-pcard--wide .lic-pcard__media img {
		position: relative;
		object-position: center;
	}

	.lic-rcard--video,
	.lic-rcard--info {
		width: 100%;
	}
}

/* ============================================================
   Narrow phones (<=449px) — the CRDTS tall-card grid collapses to a SINGLE
   column (ADEX wide cards are already one per row from <=900). Min target width
   is 325px, so also reclaim side padding here so cards stay roomy.
   ============================================================ */
@media (max-width: 449px) {
	.lic-cards--tall.lic-cards--count-2,
	.lic-cards--tall.lic-cards--count-3 {
		grid-template-columns: 1fr;
	}

	.lic-main {
		--lic-shell: min(1320px, 100% - 32px);
	}
}

/* ---- 4K / ultra-wide: scale the design up ~2.24x to match the desktop look ----
 * Mirrors new/charlie.css / new/homepage.css 4K strategy: widen the shell to
 * line up with the shared header (which scales on wide screens) and scale
 * type/spacing by the same factor so the page reads as the desktop layout
 * zoomed in (1380 -> ~3100 ≈ 2.24x). */
@media (min-width: 3000px) {
	.lic-main {
		/* 2640px block → 600px (15.625%) gutter at 3840, matching the homepage's
		 * 4K split sections (.ft-split max-width: 2640). The hero overrides this
		 * with the 18.75% %-based rule above. */
		--lic-shell: min(2640px, 100% - 180px);
	}

	.lic-section {
		padding: 180px 0;
	}

	.lic-section--hero {
		padding: 160px 0;
	}

	/* Shared type (2× the 1920 base, matching the homepage 4K scale) */
	.lic-heading {
		gap: 16px;
	}

	.lic-eyebrow {
		font-size: 30px;
	}

	.lic-title {
		font-size: 52px;
		line-height: 64px;
	}

	/* Buttons */
	.lic-btn {
		gap: 27px;
		padding: 27px 72px;
		border-radius: 18px;
		font-size: 36px;
	}

	.lic-btn i {
		font-size: 36px;
	}

	.lic-btn--sm {
		padding: 18px 36px;
		font-size: 31px;
		gap: 18px;
	}

	.lic-btn--sm i {
		font-size: 31px;
	}

	/* Hero (mirrors the homepage 4K hero: copy 960 = 480×2, gutter 18.75% via the
	 * %-based rule above) */
	.lic-hero {
		grid-template-columns: minmax(0, 960px) minmax(0, 1fr);
		gap: 96px;
	}

	.lic-hero__copy {
		max-width: 960px;
		gap: 53px;
	}

	.lic-hero__badge {
		gap: 18px;
		padding: 18px 31px;
		border-radius: 90px;
		font-size: 31px;
	}

	.lic-hero__badge i {
		font-size: 34px;
	}

	.lic-hero__title {
		font-size: 78px;
		line-height: 96px;
	}

	.lic-hero__desc {
		/* True 2× of the 16/22 base so the copy keeps Figma's 3-line wrap within
		 * the 960px (480×2) copy column at 4K. */
		max-width: 960px;
		font-size: 32px;
		line-height: 44px;
	}

	.lic-hero__media {
		min-height: 720px;
	}

	.lic-hero__figure {
		max-width: 1120px; /* 560 × 2 */
	}

	/* Exam series tabs (2× the base) */
	.lic-exam__top {
		gap: 64px;
	}

	.lic-tabs {
		gap: 64px;
	}

	.lic-tab {
		padding: 0 4px 16px;
		font-size: 36px; /* 18 × 2 */
		border-bottom-width: 4px;
	}

	/* Product cards (2× the 1920 Figma base) */
	.lic-cards {
		gap: 32px;
		margin-top: 64px;
	}

	.lic-cards--wide.lic-cards--count-1 {
		grid-template-columns: minmax(0, 1304px); /* 652 × 2 */
	}

	.lic-pcard {
		border-radius: 32px;
	}

	.lic-pcard h3 {
		font-size: 28px; /* 14 × 2 */
	}

	.lic-pcard p {
		font-size: 24px; /* 12 × 2 */
		/* line-height stays `normal` (Figma leading-normal) — inherited from base. */
	}

	.lic-cart {
		gap: 12px;
		font-size: 28px;
	}

	.lic-cart i {
		font-size: 28px;
	}

	.lic-pcard--wide {
		min-height: 480px;
	}

	.lic-pcard--wide .lic-pcard__info {
		gap: 16px;
		padding: 64px 16px 80px 64px;
	}

	.lic-pcard--wide .lic-cart {
		margin-top: 16px;
	}

	.lic-pcard--wide .lic-pcard__media {
		min-height: 480px;
	}

	.lic-pcard--wide .lic-pcard__media img {
		padding: 0 32px 0 0;
	}

	.lic-pcard--tall {
		min-height: 680px;
	}

	.lic-pcard--tall .lic-pcard__info {
		gap: 16px;
		padding: 64px 64px 32px;
	}

	.lic-pcard--tall .lic-pcard__media {
		min-height: 340px;
		padding: 16px 32px 32px;
	}

	.lic-pcard--tall .lic-pcard__media img {
		max-height: 420px;
	}

	/* Divider */
	.lic-divider {
		margin: 64px 0;
		border-top-width: 2px;
	}

	/* Resources (2× the base) */
	.lic-resources__title {
		margin: 0 0 32px;
		font-size: 32px;
	}

	.lic-resources__list {
		gap: 32px;
	}

	.lic-rcard {
		border-radius: 32px;
	}

	.lic-rcard--video {
		width: 572px; /* 286 × 2 */
		padding: 24px;
		gap: 24px;
	}

	.lic-rcard__thumb {
		border-radius: 16px;
	}

	.lic-rcard__thumb img {
		height: 280px;
	}

	.lic-rcard__caption {
		margin: 0 8px 8px;
		font-size: 28px;
	}

	.lic-rcard--info {
		width: 432px; /* 216 × 2 */
		gap: 16px;
		padding: 32px;
	}

	.lic-rcard__logo {
		height: 96px;
	}

	.lic-rcard__logo img {
		max-width: 320px;
		max-height: 88px;
	}

	.lic-rcard--info h4 {
		margin: 8px 0 0;
		font-size: 28px;
	}

	.lic-rcard--info p {
		font-size: 24px;
	}

	.lic-rcard--info .lic-btn {
		margin-top: 8px;
	}
}

/* ===========================================================================
 * Shared footer overrides (page-scoped to body.lic-page) — mirrors the
 * equivalent blocks in new/homepage.css / new/charlie.css so the footer matches
 * the redesigned homepage on desktop, mobile, and 4K.
 * ======================================================================== */
@media (min-width: 991px) {
	body.lic-page .shop-footer__grid {
		grid-template-columns: 1fr repeat(4, minmax(0, max-content));
		gap: 100px;
		align-items: start;
	}
	body.lic-page .shop-footer__brand { max-width: 370px; }
}
@media (max-width: 680px) {
	body.lic-page .shop-footer__main { padding: 48px 0; }
	body.lic-page .shop-footer__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 16px;
		align-items: start;
	}
	body.lic-page .shop-footer__brand { grid-column: 1 / -1; margin-bottom: 4px; }
	body.lic-page .shop-footer__column h3 { font-size: 16px; }
	body.lic-page .shop-footer__column a,
	body.lic-page .shop-footer__brand p { font-size: 15px; line-height: 1.9; }
	body.lic-page .shop-footer__bar-inner { gap: 12px; }
	body.lic-page .shop-footer__policies {
		flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px;
	}
	body.lic-page .shop-footer__policies a { font-size: 10px; white-space: nowrap; }
	body.lic-page .shop-footer__youtube img { height: 22px; }
}
@media (max-width: 380px) {
	body.lic-page .shop-footer__bar-inner { flex-wrap: wrap; gap: 10px; }
	body.lic-page .shop-footer__policies { flex-wrap: wrap; gap: 8px 12px; }
}

/* 4K shared header + footer (mirrors new/homepage.css / new/charlie.css) */
@media (min-width: 3000px) {
	body.lic-page { --shop-header-height: 210px; }
	body.lic-page .shop-header__brand img { width: 388px; }
	body.lic-page .shop-nav__link { gap: 18px; padding: 20px 26px; font-size: 33px; }
	body.lic-page .shop-nav__caret { font-size: 31px; }
	body.lic-page .shop-header__actions { gap: 31px; }
	body.lic-page .shop-header__actions a,
	body.lic-page .shop-header__icon-btn,
	body.lic-page .shop-header__search-trigger { width: 88px; height: 88px; font-size: 44px; }
	body.lic-page .shop-desktop-search { width: 88px; height: 106px; }
	body.lic-page .shop-desktop-search input { font-size: 40px; }
	body.lic-page .shop-footer__main { padding: 158px 0; }
	body.lic-page .shop-footer__grid { gap: 220px; }
	body.lic-page .shop-footer__brand { max-width: 810px; }
	body.lic-page .shop-footer__brand img { width: 360px; margin-bottom: 35px; }
	body.lic-page .shop-footer__brand p,
	body.lic-page .shop-footer__column a { font-size: 35px; }
	body.lic-page .shop-footer__column h3 { margin-bottom: 26px; font-size: 40px; }
	body.lic-page .shop-footer__bar-inner { gap: 53px; padding: 62px 0; }
	body.lic-page .shop-footer__policies { gap: 106px; }
	body.lic-page .shop-footer__policies a { font-size: 35px; }
	body.lic-page .shop-footer__youtube img { height: 62px; }
}