/*
Theme Name: Street Tyres Blog
Theme URI: https://blog.streettyresredhill.co.uk
Author: Street Tyres Redhill
Description: Custom classic theme for the Street Tyres Redhill tyre advice blog. Category-grouped homepage, template-driven offer banners, mobile-first conversion paths, no webfonts.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: street-tyres
Tags: blog, one-column, custom-logo, custom-menu, featured-images, accessibility-ready
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */

:root {
	/* Sampled from the logo and shopfront fascia, not supplier creative. */
	--st-orange: #fc6c0c;        /* logo orange, exact */
	--st-orange-deep: #c25207;   /* passes AA as text on white */
	--st-amber: #fca854;         /* fascia orange, for accents on dark */
	--st-carbon: #232a36;        /* fascia charcoal */
	--st-carbon-2: #2a3846;
	--st-green: #5cb85c;         /* main-site action green, dark label only */
	--st-green-light: #7ccc7c;

	--st-ink: #1b1f26;
	--st-body: #3a3f47;
	--st-muted: #5f5f5f;
	--st-grey: #787878;          /* logo wordmark grey */
	--st-line: #e2e4e8;
	--st-line-soft: #f1f2f5;
	--st-paper: #ffffff;
	--st-paper-alt: #f7f8fa;

	--st-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--st-wrap: 1140px;
	--st-read: 42rem;
	--st-radius: 6px;

	--st-gradient: linear-gradient(135deg, #232a36 0%, #2a3846 100%);
}

/* ---------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--st-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--st-body);
	background: var(--st-paper);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--st-orange-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--st-carbon); }

h1, h2, h3, h4 {
	font-family: var(--st-font);
	color: var(--st-ink);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; letter-spacing: 0; }

p { margin: 0 0 1.25em; }

:focus-visible {
	outline: 3px solid var(--st-orange);
	outline-offset: 2px;
}

.st-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--st-carbon); color: #fff;
	padding: 12px 20px; z-index: 999; text-decoration: none;
}
.st-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.st-wrap {
	width: 100%;
	max-width: var(--st-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Signature device: the diagonal cut from the logo bolt. */
.st-bolt-rule {
	display: block;
	width: 54px;
	height: 4px;
	background: var(--st-orange);
	transform: skewX(-28deg);
	margin: 0 0 18px;
	border: 0;
}

/* ---------------------------------------------------------------
   3. Header
   --------------------------------------------------------------- */

.st-header {
	border-bottom: 1px solid var(--st-line);
	background: var(--st-paper);
	position: relative;
	z-index: 20;
}

.st-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 78px;
}

.st-brand img { max-height: 46px; width: auto; }
.st-brand__text {
	font-weight: 700; font-size: 1.15rem;
	color: var(--st-ink); text-decoration: none;
	letter-spacing: -0.02em;
}

.st-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 26px;
}
.st-nav a {
	color: var(--st-body);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 6px 0;
	position: relative;
}
.st-nav a:hover { color: var(--st-ink); }
.st-nav .current-menu-item > a::after,
.st-nav a:hover::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px; background: var(--st-orange);
	transform: skewX(-28deg);
}

.st-header__cta {
	background: var(--st-orange);
	color: var(--st-carbon) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 11px 18px;
	border-radius: var(--st-radius);
	white-space: nowrap;
}
.st-header__cta:hover { background: var(--st-amber); color: var(--st-carbon) !important; }

.st-burger {
	display: none;
	background: none; border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	padding: 9px 12px; cursor: pointer;
	font-size: 0.9rem; font-weight: 700; color: var(--st-ink);
	font-family: var(--st-font);
}

@media (max-width: 860px) {
	.st-burger { display: block; }
	.st-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--st-paper);
		border-bottom: 1px solid var(--st-line);
		box-shadow: 0 12px 24px rgba(35, 42, 54, 0.08);
		padding: 8px 20px 20px;
	}
	.st-nav.is-open { display: block; }
	.st-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.st-nav li { border-bottom: 1px solid var(--st-line-soft); }
	.st-nav a { display: block; padding: 14px 0; }
	.st-nav a:hover::after { display: none; }
	.st-header__cta { display: none; }
}

/* ---------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------- */

.st-hero { padding: 56px 0 44px; }

.st-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}

@media (min-width: 900px) {
	.st-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

.st-hero h1 {
	font-size: clamp(2rem, 4.6vw, 3rem);
	margin-bottom: 18px;
}

.st-hero__lede {
	font-size: 1.1rem;
	color: var(--st-body);
	max-width: 34rem;
	margin-bottom: 22px;
}

.st-hero__trust {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px 16px;
	font-size: 0.9rem; font-weight: 700;
	color: var(--st-carbon);
	margin-bottom: 26px;
	text-decoration: none;
}
a.st-hero__trust:hover { color: var(--st-orange-deep); }
.st-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.st-hero__dot { color: var(--st-orange); }

.st-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.st-btn {
	display: inline-block;
	font-family: var(--st-font);
	font-weight: 700;
	font-size: 1rem;
	padding: 14px 24px;
	border-radius: var(--st-radius);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
}
.st-btn--primary { background: var(--st-orange); color: var(--st-carbon); }
.st-btn--primary:hover { background: var(--st-amber); color: var(--st-carbon); }
.st-btn--ghost {
	background: transparent; color: var(--st-carbon);
	border-color: var(--st-line);
}
.st-btn--ghost:hover { border-color: var(--st-carbon); color: var(--st-carbon); }
.st-btn--light { background: var(--st-orange); color: var(--st-carbon); }
.st-btn--light:hover { background: var(--st-amber); color: var(--st-carbon); }
.st-btn--outline-light {
	background: transparent; color: #fff; border-color: rgba(255,255,255,0.45);
}
.st-btn--outline-light:hover { border-color: #fff; color: #fff; }

/* Hero media: reserved space, no layout shift. */
.st-hero__media {
	aspect-ratio: 4 / 3;
	background: var(--st-paper-alt);
	border-radius: 10px;
	overflow: hidden;
}
.st-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.st-hero__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
}
.st-hero__collage figure { margin: 0; overflow: hidden; border-radius: 4px; background: var(--st-paper-alt); }
.st-hero__collage img { width: 100%; height: 100%; object-fit: cover; }
.st-hero__collage--3 { grid-template-columns: 1fr 1fr; }
.st-hero__collage--3 figure:first-child { grid-row: span 2; }
.st-hero__collage--2 { grid-template-rows: 1fr; }
.st-hero__collage--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

/* ---------------------------------------------------------------
   5. Finance strip
   --------------------------------------------------------------- */

.st-strip { padding: 0 0 8px; }
.st-strip a, .st-strip__inner { display: block; border-radius: 10px; overflow: hidden; }
.st-strip img { width: 100%; height: auto; }

.st-strip--text {
	background: var(--st-paper-alt);
	border: 1px solid var(--st-line);
	border-radius: 10px;
	padding: 18px 22px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
	font-size: 0.98rem;
}
.st-strip--text strong { color: var(--st-ink); }

/* ---------------------------------------------------------------
   6. Sections and cards
   --------------------------------------------------------------- */

.st-section { padding: 44px 0; border-top: 1px solid var(--st-line-soft); }
.st-section:first-of-type { border-top: 0; }

.st-section__head {
	display: flex; flex-wrap: wrap;
	align-items: baseline; justify-content: space-between;
	gap: 8px 20px; margin-bottom: 6px;
}
.st-section__head h2 { margin: 0; }
.st-section__head h2 a { color: inherit; text-decoration: none; }
.st-section__head h2 a:hover { color: var(--st-orange-deep); }

.st-section__more {
	font-size: 0.92rem; font-weight: 700;
	color: var(--st-orange-deep); text-decoration: none;
	white-space: nowrap;
}
.st-section__more:hover { text-decoration: underline; }

.st-section__intro {
	color: var(--st-muted);
	max-width: 46rem;
	margin: 0 0 24px;
	font-size: 1rem;
}

.st-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}
@media (min-width: 620px) { .st-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .st-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .st-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.st-card { display: flex; flex-direction: column; }
.st-card__media {
	aspect-ratio: 16 / 10;
	background: var(--st-paper-alt);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 14px;
}
.st-card__media img { width: 100%; height: 100%; object-fit: cover; }
.st-card__media--empty {
	background: var(--st-gradient);
	position: relative;
}
.st-card__media--empty::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 46px; height: 5px; margin: -2px 0 0 -23px;
	background: var(--st-orange); transform: skewX(-28deg);
}
.st-card h3 { font-size: 1.12rem; margin: 0 0 8px; }
.st-card h3 a { color: var(--st-ink); text-decoration: none; }
.st-card h3 a:hover { color: var(--st-orange-deep); }
.st-card__excerpt { font-size: 0.95rem; color: var(--st-muted); margin: 0; }
.st-card__meta {
	font-size: 0.8rem; color: var(--st-muted);
	margin: 10px 0 0; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Wide card used when a category holds only one or two posts. */
.st-card--wide { flex-direction: row; gap: 22px; align-items: flex-start; }
.st-card--wide .st-card__media {
	flex: 0 0 38%; max-width: 320px; margin-bottom: 0;
}
.st-card--wide h3 { font-size: 1.3rem; }
@media (max-width: 620px) {
	.st-card--wide { flex-direction: column; }
	.st-card--wide .st-card__media { flex: none; max-width: none; width: 100%; margin-bottom: 14px; }
}

/* ---------------------------------------------------------------
   7. Offer squares
   --------------------------------------------------------------- */

.st-offers { padding: 34px 0; border-top: 1px solid var(--st-line-soft); }
.st-offers__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 620px) { .st-offers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .st-offers__grid { grid-template-columns: repeat(3, 1fr); } }

.st-offers .widget { margin: 0; }
.st-offers .widget img {
	width: 100%; height: auto;
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-width: 460px;
	margin: 0 auto;
}
.st-offers .widget-title {
	font-size: 0.82rem; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--st-muted);
	margin: 0 0 10px;
}

/* ---------------------------------------------------------------
   8. Conversion band
   --------------------------------------------------------------- */

.st-band {
	background: var(--st-gradient);
	color: #fff;
	padding: 44px 0;
	margin-top: 8px;
}
.st-band h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 12px; }
.st-band p { color: rgba(255,255,255,0.86); max-width: 40rem; margin-bottom: 22px; }
.st-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.st-band .st-bolt-rule { background: var(--st-amber); }

/* ---------------------------------------------------------------
   9. Single post
   --------------------------------------------------------------- */

.st-post { padding: 40px 0 20px; }

/* The article is one centred column. Every child shares the same axis so
   the featured image cannot sit wider than the text and throw the page
   off balance. */
.st-post__head,
.st-content,
.st-endcap,
.st-breadcrumb,
.st-inline-banner {
	max-width: var(--st-read);
	margin-left: auto;
	margin-right: auto;
}

.st-post__hero {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}

.st-breadcrumb {
	font-size: 0.85rem; color: var(--st-muted);
	margin-bottom: 18px;
}
.st-breadcrumb a { color: var(--st-muted); text-decoration: none; }
.st-breadcrumb a:hover { color: var(--st-orange-deep); text-decoration: underline; }
.st-breadcrumb span[aria-hidden] { margin: 0 7px; color: var(--st-line); }

.st-post__eyebrow {
	display: inline-block;
	font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.09em;
	color: var(--st-orange-deep); text-decoration: none;
	margin-bottom: 12px;
}
.st-post h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: 14px; }
.st-post__meta { font-size: 0.88rem; color: var(--st-muted); margin-bottom: 26px; }

.st-post__hero {
	margin-bottom: 32px;
	aspect-ratio: 16 / 9;
	border-radius: 10px; overflow: hidden;
	background: var(--st-paper-alt);
}
.st-post__hero img { width: 100%; height: 100%; object-fit: cover; }

.st-content { font-size: 1.08rem; line-height: 1.75; }
.st-content h2 { font-size: 1.55rem; margin: 1.9em 0 0.5em; }
.st-content h3 { font-size: 1.22rem; margin: 1.6em 0 0.45em; }
.st-content ul, .st-content ol { padding-left: 1.3em; margin: 0 0 1.35em; }
.st-content li { margin-bottom: 0.5em; }
.st-content img { border-radius: 8px; margin: 1.6em 0; }
.st-content blockquote {
	margin: 1.8em 0; padding: 4px 0 4px 22px;
	border-left: 4px solid var(--st-orange);
	color: var(--st-ink); font-size: 1.1rem;
}
.st-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.96rem; }
.st-content th, .st-content td { border: 1px solid var(--st-line); padding: 10px 12px; text-align: left; }
.st-content th { background: var(--st-paper-alt); color: var(--st-ink); }

/* Inline banner injected by the content filter. */
.st-inline-banner { margin: 2.4em auto; }
.st-inline-banner a { display: block; border-radius: 10px; overflow: hidden; }
.st-inline-banner img { width: 100%; height: auto; }

.st-inline-banner--text {
	background: var(--st-paper-alt);
	border: 1px solid var(--st-line);
	border-left: 5px solid var(--st-orange);
	border-radius: 0 8px 8px 0;
	padding: 20px 22px;
}
.st-inline-banner--text p { margin: 0 0 14px; font-size: 1rem; }
.st-inline-banner--text p:last-child { margin: 0; }

/* End of article conversion block. */
.st-endcap {
	background: var(--st-gradient);
	color: #fff;
	border-radius: 12px;
	padding: 32px 30px;
	margin: 44px auto 0;
}
.st-endcap h2 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.st-endcap p { color: rgba(255,255,255,0.86); margin-bottom: 20px; }
.st-endcap__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.st-endcap .st-bolt-rule { background: var(--st-amber); }

.st-related { padding: 44px 0; border-top: 1px solid var(--st-line-soft); margin-top: 44px; }

/* ---------------------------------------------------------------
   10. Sticky call bar (mobile only)
   --------------------------------------------------------------- */

.st-callbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	display: none;
	background: var(--st-carbon);
	border-top: 3px solid var(--st-orange);
	padding: 9px 14px;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 -4px 14px rgba(35, 42, 54, 0.16);
}
.st-callbar__label {
	color: #fff; font-size: 0.86rem; font-weight: 700;
	line-height: 1.3;
}
.st-callbar__label small { display: block; font-weight: 400; color: rgba(255,255,255,0.7); font-size: 0.76rem; }
.st-callbar__btn {
	background: var(--st-orange); color: var(--st-carbon);
	font-weight: 700; font-size: 0.95rem;
	padding: 11px 18px; border-radius: var(--st-radius);
	text-decoration: none; white-space: nowrap;
}
.st-callbar__btn:hover { background: var(--st-amber); color: var(--st-carbon); }

@media (max-width: 860px) {
	.st-callbar { display: flex; }
	body.has-callbar { padding-bottom: 74px; }
}

/* ---------------------------------------------------------------
   11. Archive, search, pagination, 404
   --------------------------------------------------------------- */

.st-archive-head { padding: 40px 0 8px; }
.st-archive-head h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.st-archive-head p { max-width: 46rem; color: var(--st-muted); font-size: 1.05rem; }

.st-pagination { padding: 12px 0 48px; }
.st-pagination .page-numbers {
	display: inline-block; padding: 9px 14px;
	border: 1px solid var(--st-line); border-radius: var(--st-radius);
	margin: 0 4px 6px 0; text-decoration: none; color: var(--st-body);
	font-size: 0.94rem;
}
.st-pagination .page-numbers.current { background: var(--st-carbon); border-color: var(--st-carbon); color: #fff; }
.st-pagination a.page-numbers:hover { border-color: var(--st-carbon); color: var(--st-carbon); }

.st-searchform { display: flex; gap: 8px; max-width: 420px; }
.st-searchform input[type="search"] {
	flex: 1; padding: 11px 13px; font-size: 1rem;
	font-family: var(--st-font);
	border: 1px solid var(--st-line); border-radius: var(--st-radius);
	color: var(--st-ink); background: #fff;
}
.st-searchform input[type="search"]:focus { border-color: var(--st-orange-deep); }
.st-searchform button {
	background: var(--st-carbon); color: #fff; border: 0;
	padding: 11px 18px; border-radius: var(--st-radius);
	font-weight: 700; font-size: 0.95rem; cursor: pointer;
	font-family: var(--st-font);
}

.st-notice { padding: 60px 0 70px; max-width: var(--st-read); margin: 0 auto; }

/* ---------------------------------------------------------------
   12. Footer
   --------------------------------------------------------------- */

.st-footer {
	background: var(--st-carbon);
	color: rgba(255,255,255,0.78);
	padding: 48px 0 26px;
	font-size: 0.94rem;
	margin-top: 40px;
}
.st-footer a { color: rgba(255,255,255,0.86); }
.st-footer a:hover { color: #fff; }

.st-footer__grid {
	display: grid; grid-template-columns: 1fr; gap: 30px;
	padding-bottom: 30px;
}
@media (min-width: 720px) { .st-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.st-footer h2 {
	color: #fff; font-size: 0.82rem;
	text-transform: uppercase; letter-spacing: 0.1em;
	margin-bottom: 14px;
}
.st-footer__brand img { max-height: 44px; width: auto; margin-bottom: 16px; }
.st-footer address { font-style: normal; line-height: 1.7; }

.st-hours { width: 100%; border-collapse: collapse; }
.st-hours th, .st-hours td {
	text-align: left; padding: 3px 0; font-weight: 400;
	border: 0; font-size: 0.92rem;
}
.st-hours td { text-align: right; color: #fff; }

.st-footer__base {
	border-top: 1px solid rgba(255,255,255,0.16);
	padding-top: 20px;
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	justify-content: space-between;
	font-size: 0.86rem;
}
.st-footer__base ul { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }

/* ---------------------------------------------------------------
   13. CTA blocks (shortcodes)

   Previously raw HTML in post content with CSS in WPCode. Moved here
   because the Classic Editor strips div wrappers, and because the old
   rules used the supplier palette rather than the brand one.
   --------------------------------------------------------------- */

.st-cta, .st-cta * { box-sizing: border-box; }
.st-cta { max-width: var(--st-read); margin-left: auto; margin-right: auto; }

/* Block A: inline phone prompt */
.st-call {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 14px;
	margin: 32px auto;
	padding: 16px 18px;
	background: #fff6ef;
	border-left: 4px solid var(--st-orange);
	border-radius: 0 6px 6px 0;
}
.st-call__text {
	flex: 1 1 240px; margin: 0;
	font-size: 1rem; color: var(--st-body); line-height: 1.5;
}
.st-call__num {
	display: inline-block; flex: 0 0 auto;
	font-size: 1.22rem; font-weight: 700;
	color: var(--st-orange-deep); text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid rgba(194, 82, 7, 0.3);
	transition: color .15s ease, border-color .15s ease;
}
.st-call__num:hover, .st-call__num:focus-visible {
	color: var(--st-carbon); border-color: var(--st-carbon);
}

/* Block B: registration plate prompt */
.st-reg {
	margin: 36px auto;
	padding: 26px 22px 24px;
	border-radius: 12px;
	background: var(--st-gradient);
	text-align: center; color: #fff;
}
.st-reg__kicker {
	margin: 0 0 4px;
	font-size: 0.7rem; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--st-amber);
}
.st-reg__title {
	margin: 0 0 18px;
	font-size: clamp(1.15rem, 3.4vw, 1.42rem);
	font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: #fff;
}
.st-plate {
	display: inline-flex; align-items: stretch;
	border-radius: 6px; overflow: hidden; text-decoration: none;
	border: 2px solid #101010; max-width: 100%;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
	transition: transform .15s ease, box-shadow .15s ease;
}
.st-plate:hover, .st-plate:focus-visible {
	transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
}
.st-plate__band {
	background: #0a3b9e; color: #fff;
	padding: 12px 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
}
.st-plate__field {
	background: #f4d800; color: #101010;
	padding: 12px 22px;
	font-size: clamp(1.15rem, 4.4vw, 1.6rem); font-weight: 700;
	letter-spacing: 0.14em; white-space: nowrap;
	display: flex; align-items: center;
}
.st-reg__sub {
	margin: 16px 0 0;
	font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); line-height: 1.5;
}
.st-reg__sub a { color: var(--st-amber); }

/* Block C: closing block */
.st-close {
	margin: 44px auto 20px;
	border-radius: 12px; overflow: hidden;
	border: 1px solid var(--st-line); background: #fff;
}
.st-close__head { background: var(--st-gradient); padding: 22px 24px; }
.st-close__title {
	margin: 0; color: #fff;
	font-size: clamp(1.1rem, 3.2vw, 1.32rem);
	font-weight: 700; letter-spacing: -0.015em; line-height: 1.35;
}
.st-close__body { padding: 22px 24px 24px; }
.st-close__body p { margin: 0 0 18px; color: var(--st-body); font-size: 0.97rem; line-height: 1.62; }
.st-close__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* Scoped so this cannot collide with the theme's own .st-btn. */
.st-close__btn {
	display: inline-block;
	padding: 13px 22px; border-radius: 7px;
	font-size: 1rem; font-weight: 700;
	text-decoration: none; text-align: center;
	flex: 1 1 190px;
	transition: background .15s ease, transform .15s ease;
}
.st-close__btn--call { background: var(--st-orange); color: var(--st-carbon); }
.st-close__btn--call:hover, .st-close__btn--call:focus-visible {
	background: var(--st-amber); color: var(--st-carbon); transform: translateY(-1px);
}
.st-close__btn--shop { background: var(--st-green); color: var(--st-carbon); }
.st-close__btn--shop:hover, .st-close__btn--shop:focus-visible {
	background: var(--st-green-light); color: var(--st-carbon); transform: translateY(-1px);
}
.st-close__meta {
	border-top: 1px solid var(--st-line-soft); padding-top: 16px;
	font-size: 0.88rem; color: var(--st-muted); line-height: 1.65;
}
.st-close__meta strong { color: var(--st-ink); }

.st-cta a:focus-visible { outline: 3px solid var(--st-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.st-cta * { transition: none !important; }
	.st-plate:hover, .st-close__btn:hover { transform: none; }
}