/* Squarespell's global marketplace type and chrome refinement layer. */
:root {
	--sq-market-font: var(--sq-font-sans);
	/* Re-pointed at the canonical roles in typography.css. These names are kept only
	   because ~40 call sites still use them; new code should use --sq-t-*. The old
	   definitions referenced --wp--preset--font-size--h1, which WordPress never emits
	   (it kebab-cases the slug to --h-1), so every one of them silently fell through
	   to a hardcoded clamp. */
	--sq-type-h1: var(--sq-t-h1);
	--sq-type-h2: var(--sq-t-h2);
	--sq-type-h3: var(--sq-t-h3);
	--sq-type-h4: var(--sq-t-h4);
	--sq-type-p1: var(--sq-t-p1);
	--sq-type-p2: var(--sq-t-p2);
	--sq-type-p3: var(--sq-t-p3);
	--sq-type-p4: var(--sq-t-p3);
}

.sq-type-h1 { font-size: var(--sq-type-h1) !important; line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
.sq-type-h2 { font-size: var(--sq-type-h2) !important; line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h2); }
.sq-type-h3 { font-size: var(--sq-type-h3) !important; line-height: var(--sq-lh-h2); letter-spacing: var(--sq-ls-h3); }
.sq-type-h4 { font-size: var(--sq-type-h4) !important; line-height: var(--sq-lh-h3); letter-spacing: var(--sq-ls-h4); }
.sq-type-p1 { font-size: var(--sq-type-p1) !important; line-height: var(--sq-lh-body); }
.sq-type-p2 { font-size: var(--sq-type-p2) !important; line-height: var(--sq-lh-body); }
.sq-type-p3 { font-size: var(--sq-type-p3) !important; line-height: var(--sq-lh-supporting); }
.sq-type-p4 { font-size: var(--sq-type-p4) !important; line-height: var(--sq-lh-eyebrow); }

html body:not(.wp-admin),
html body:not(.wp-admin) :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, span, strong, small, em, b, summary, figcaption, blockquote) {
	font-family: var(--sq-font-sans) !important;
}

html body:not(.wp-admin) :is(code, pre, kbd, samp, .sq-mono) {
	font-family: var(--sq-font-mono) !important;
}

html body:not(.wp-admin) :is(h1, h2, h3, h4, h5, h6) {
	font-variation-settings: "wdth" 100;
	text-wrap: balance;
}

/* Homepage role mapping: headings follow H1–H4; readable copy never falls below P4. */
/* The hero H1 keeps its slot in the map but reads the hero's own display size first;
   --h5-hero-h1 is set on .sqh5-hero__copy in home-marketplace.css. Without this the
   !important here pinned it to 60.8px and it wrapped to four lines. */
.sqh5-home .sqh5-hero__copy h1 { font-size: var(--h5-hero-h1, var(--sq-type-h1)) !important; }
.sqh5-home :is(.sqh5-heading h2, .sqh5-commercial__head h2) { font-size: var(--sq-type-h2) !important; }
.sqh5-home :is(.sqh5-hero-card h2, .sqh5-deal-note h3, .sqh5-seller h2, .sqh5-newsletter h2, .sqh5-method h2) { font-size: var(--sq-type-h3) !important; }
.sqh5-home .sqh5-stack-grid strong { font-size: var(--sq-type-h4) !important; }

.sqh5-home :is(.sqh5-hero__copy > p:last-child, .sqh5-heading p) { font-size: var(--sq-type-p1) !important; }
.sqh5-home :is(.sqh5-originals__head > div > p:last-child, .sqh5-hero-card li strong, .sqh5-guide__body strong) { font-size: var(--sq-type-p2) !important; }
.sqh5-home :is(.sqh5-promo > div, .sqh5-lab__intro, .sqh5-deal-note small) { font-size: var(--sq-type-p3) !important; }
.sqh5-home :is(.sqh5-hero-card li small, .sqh5-stack__meta small, .sqh5-commercial__head > p, .sqh5-subhead a, .sqh5-subhead span) { font-size: var(--sq-type-p4) !important; }

.sqh5-home .sq-pc__title { font-size: var(--sq-type-p2) !important; }
.sqh5-home :is(.sq-pc__meta, .sq-pc__price, .sq-pc__price--deferred .sq-pc__price-now) { font-size: var(--sq-type-p4) !important; }
/* The canonical product card is exempt. This map was shrinking its price to P4 on the home
   page only, so the same product showed a 14px price here and a 16px price on /browse/ — the
   card looked like a different component depending on which page you were standing on. The
   card sets its own price size; this restores it, and only inside `.sq-tc`. */
.sqh5-home .sq-tc .sq-pc__price { font-size: var(--sq-type-p2) !important; }

/* Header actions share one optical box, including the always-visible theme control. */
.sgn-actions { align-self: center; min-block-size: 42px; }
.sgn-action,
.sgn-search-open,
.sgn-sell { block-size: 40px; min-block-size: 40px; }
/* :not(.sgn-burger) — the burger toggle owns its own display rule in nav-header.css (hidden
   above 1040px, shown as the mobile menu trigger below it). This rule and that one have equal
   specificity, so without the exclusion, this file loading after nav-header.css made the
   burger visible on desktop regardless of viewport. */
.sgn-action:not(.sgn-burger) { display: inline-grid; place-items: center; line-height: var(--sq-lh-h1); }
.sgn-action > svg { display: block; margin: 0; }
.sgn-theme-action:focus:not(:focus-visible) { outline: 0; }

/* The real block-template footer, aligned to the same 1440px marketplace shell. */
.sq-footer {
	padding: 0 max(24px, calc((100vw - 1440px) / 2)) !important;
	background: var(--wp--preset--color--dark-canvas) !important;
}

.home .sq-footer__links,
.sq-footer__links {
	display: grid !important;
	grid-template-columns: minmax(260px, 1.45fr) repeat(5, minmax(120px, .7fr)) !important;
	gap: clamp(28px, 3.2vw, 58px) !important;
	padding: clamp(48px, 5vw, 72px) 0 !important;
}

.sq-footer .sq-logo { gap: 10px !important; font-size: var(--sq-t-h3) !important; }
.sq-footer .sq-logo svg { inline-size: 30px; block-size: 30px; }
.sq-footer__brand p {
	max-inline-size: 410px !important;
	margin-block-start: 18px !important;
	font-size: var(--sq-t-p3) !important;
	line-height: var(--sq-lh-body) !important;
}

.sq-footer__links h3 {
	margin: 2px 0 17px !important;
	font-size: var(--sq-t-p3) !important;
	font-weight: var(--sq-w-bold) !important;
	letter-spacing: var(--sq-ls-eyebrow) !important;
}

.sq-footer__links > div:not(:first-child) { gap: 11px !important; }
.home .sq-footer__links > div:not(:first-child) a,
.sq-footer__links > div:not(:first-child) a { font-size: var(--sq-t-p3) !important; line-height: var(--sq-lh-eyebrow); }
.sq-footer__links a:hover { color: var(--wp--preset--color--canvas) !important; }
.home .sq-footer__bottom,
.sq-footer__bottom {
	gap: 24px;
	padding: 23px 0 26px !important;
	font-size: var(--sq-t-p3) !important;
	line-height: var(--sq-lh-eyebrow);
}

@media (max-width: 1120px) {
	.home .sq-footer__links,
	.sq-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.sq-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
	.home .sq-footer__links,
	.sq-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 22px !important; }
	.sq-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
	.home .sq-footer__links,
	.sq-footer__links { grid-template-columns: minmax(0, 1fr) !important; }
}