/**
 * SMG Theme — frontend styles.
 *
 * Every colour, radius, font and column count comes from a CSS custom property
 * emitted by inc/enqueue.php, so this file is static and cacheable. No CSS
 * framework, no build step: what you read here is what ships.
 */

/* ═══════════════════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════════════════ */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

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

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

body {
	background: var(--smg-bg);
	color: var(--smg-text);
	font-family: var(--smg-font);
	font-size: var(--smg-fs);
	font-weight: var(--smg-fw-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
	color: var(--smg-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--smg-font-heading);
	font-weight: var(--smg-fw-heading);
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.smg-caps-headings h1,
.smg-caps-headings h2,
.smg-caps-headings h3,
.smg-caps-headings .smg-section__title {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

:focus-visible {
	outline: 2px solid var(--smg-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

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

.smg-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--smg-surface);
	color: var(--smg-text);
	padding: 10px 16px;
	border-radius: var(--smg-radius-sm);
	box-shadow: var(--smg-shadow-lg);
}
.smg-skip:focus { left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Layout primitives
   ═══════════════════════════════════════════════════════════════ */

.smg-shell {
	width: 100%;
	max-width: var(--smg-width);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.smg-main {
	flex: 1;
	padding-block: calc(28px * var(--smg-space)) calc(56px * var(--smg-space));
}

.smg-section { margin-block: calc(40px * var(--smg-space)); }
.smg-section:first-child { margin-top: 0; }

.smg-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: calc(18px * var(--smg-space));
	flex-wrap: wrap;
}

.smg-section__title {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin: 0;
}

.smg-more {
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.smg-more:hover { text-decoration: underline; }

.smg-page-head {
	margin-block: calc(8px * var(--smg-space)) calc(28px * var(--smg-space));
	max-width: 46rem;
}
.smg-page-head__eyebrow {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--smg-muted);
	margin-bottom: 8px;
}
.smg-page-head__eyebrow a { color: inherit; text-decoration: none; }
.smg-page-head__eyebrow a:hover { color: var(--smg-accent); }
.smg-page-head__title { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.smg-page-head__desc,
.smg-page-head__search { margin-top: 12px; color: var(--smg-text-soft); }

/* ═══════════════════════════════════════════════════════════════
   Page backgrounds

   Layered gradients on body itself, over the background colour. A
   pseudo-element with a negative z-index would be the usual approach, but
   whether it paints above or below the body background depends on whether
   body happens to form a stacking context — a layered background-image has
   no such ambiguity. Costs no image request, and all four textures derive
   from the accent colour so they stay in step with the palette.
   ═══════════════════════════════════════════════════════════════ */

.smg-bg-dots,
.smg-bg-grid,
.smg-bg-glow,
.smg-bg-rays {
	background-attachment: fixed;
	background-repeat: repeat;
}

.smg-bg-dots {
	background-image: radial-gradient(var(--smg-accent-soft) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}

.smg-bg-grid {
	background-image:
		linear-gradient(var(--smg-accent-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--smg-accent-soft) 1px, transparent 1px);
	background-size: 44px 44px;
}

.smg-bg-glow {
	background-image:
		radial-gradient(52rem 30rem at 12% -6%, var(--smg-accent-soft), transparent 65%),
		radial-gradient(46rem 28rem at 88% 4%, var(--smg-accent-soft), transparent 60%);
	background-repeat: no-repeat;
}

.smg-bg-rays {
	background-image: repeating-conic-gradient(
		from 0deg at 50% -25%,
		var(--smg-accent-soft) 0deg 3deg,
		transparent 3deg 11deg
	);
	background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════ */

.smg-header {
	background: var(--smg-surface);
	border-bottom: 1px solid var(--smg-border);
}

.smg-sticky-header .smg-header {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: saturate(160%) blur(8px);
}

.smg-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 64px;
	padding-block: 10px;
}

.smg-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.smg-brand__logo { width: auto; object-fit: contain; }
.smg-brand__name {
	font-family: var(--smg-font-heading);
	font-weight: var(--smg-fw-heading);
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}
.smg-brand .custom-logo { max-height: 44px; width: auto; }

.smg-nav { margin-inline-end: auto; }

.smg-header-center .smg-header__inner { flex-wrap: wrap; justify-content: center; }
.smg-header-center .smg-brand { margin-inline: auto; }
.smg-header-center .smg-nav { margin-inline: auto; }

.smg-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.smg-menu li { position: relative; }
.smg-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--smg-radius-sm);
	color: var(--smg-text-soft);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	transition: background .15s ease, color .15s ease;
}
.smg-menu a:hover,
.smg-menu .current-menu-item > a,
.smg-menu .current_page_item > a {
	background: var(--smg-accent-soft);
	color: var(--smg-accent);
}

/* Sub-menus: hover on pointer devices, tap-to-open handled by the script. */
.smg-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--smg-surface);
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius);
	box-shadow: var(--smg-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 30;
}
.smg-menu li:hover > .sub-menu,
.smg-menu li:focus-within > .sub-menu,
.smg-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.smg-header__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

.smg-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	background: none;
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius-sm);
}
.smg-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.smg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.smg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.smg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.smg-toggle {
	display: inline-grid;
	place-items: center;
	width: 38px; height: 38px;
	background: none;
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius-sm);
	color: var(--smg-text-soft);
	transition: border-color .15s ease, color .15s ease;
}
.smg-toggle:hover { color: var(--smg-accent); border-color: var(--smg-accent-line); }
.smg-toggle__moon { display: none; }
[data-smg-theme="dark"] .smg-toggle__sun { display: none; }
[data-smg-theme="dark"] .smg-toggle__moon { display: block; }

/* ═══════════════════════════════════════════════════════════════
   Search
   ═══════════════════════════════════════════════════════════════ */

.smg-search {
	position: relative;
	display: flex;
	align-items: center;
}
.smg-search__icon {
	position: absolute;
	left: 12px;
	color: var(--smg-muted);
	pointer-events: none;
}
.smg-search__input {
	width: 100%;
	min-width: 0;
	padding: 9px 12px 9px 34px;
	background: var(--smg-bg);
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius-pill);
	color: var(--smg-text);
	font-size: .92rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.smg-search__input:focus {
	outline: none;
	border-color: var(--smg-accent);
	box-shadow: 0 0 0 3px var(--smg-accent-soft);
}
.smg-search__submit {
	position: absolute;
	right: -9999px;
	opacity: 0;
}
.smg-header__search .smg-search__input { width: 200px; }

/* ═══════════════════════════════════════════════════════════════
   Ticker
   ═══════════════════════════════════════════════════════════════ */

.smg-ticker {
	background: var(--smg-ticker-bg, var(--smg-accent));
	color: var(--smg-ticker-fg, #fff);
	overflow: hidden;
	font-size: .88rem;
}
.smg-ticker__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: var(--smg-width);
	margin-inline: auto;
	padding: 8px clamp(16px, 4vw, 32px);
	min-width: 0;
}
.smg-ticker__label {
	flex-shrink: 0;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--smg-radius-pill);
	background: rgba(255, 255, 255, .18);
}
.smg-ticker__viewport {
	flex: 1;
	overflow: hidden;
	min-width: 0;
	/* Fade the edges so items enter and leave instead of snapping. */
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.smg-ticker__track {
	display: inline-flex;
	white-space: nowrap;
	animation: smg-ticker-scroll var(--smg-ticker-duration, 20s) linear infinite;
}
.smg-ticker:hover .smg-ticker__track { animation-play-state: paused; }
.smg-ticker__set {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding-right: 34px;
	flex-shrink: 0;
}
.smg-ticker__item { color: inherit; text-decoration: none; }
a.smg-ticker__item:hover { text-decoration: underline; }

@keyframes smg-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.smg-ticker__track { animation: none; }
	.smg-ticker__viewport { overflow-x: auto; }
	.smg-ticker__set:nth-child(2) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════ */

.smg-hero {
	background:
		radial-gradient(80rem 22rem at 50% -8rem, var(--smg-accent-soft), transparent 70%),
		var(--smg-bg);
	padding-block: calc(44px * var(--smg-space)) calc(36px * var(--smg-space));
	text-align: center;
	border-bottom: 1px solid var(--smg-border);
}
.smg-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.smg-hero__avatar {
	width: 88px; height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--smg-surface);
	box-shadow: var(--smg-shadow-lg);
}
.smg-hero__title { font-size: clamp(1.9rem, 5vw, 3rem); }
.smg-hero__text {
	max-width: 46ch;
	color: var(--smg-text-soft);
	font-size: 1.05rem;
}
.smg-hero__cta { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Banners
   ═══════════════════════════════════════════════════════════════ */

.smg-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	margin-block: calc(24px * var(--smg-space));
}

.smg-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--smg-radius);
	text-decoration: none;
	color: inherit;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease;
}
a.smg-banner:hover { transform: translateY(-2px); box-shadow: var(--smg-shadow-lg); }

.smg-banner--accent {
	background: linear-gradient(120deg, var(--smg-accent), var(--smg-accent-2));
	color: #fff;
}
.smg-banner--soft {
	background: var(--smg-accent-soft);
	color: var(--smg-text);
	border-color: var(--smg-accent-line);
}
.smg-banner--outline {
	background: var(--smg-surface);
	border-color: var(--smg-border-2);
}
.smg-banner--image {
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: 120px;
}

.smg-banner__icon {
	width: 44px; height: 44px;
	border-radius: var(--smg-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	background: #fff;
}
.smg-banner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smg-banner__title { font-weight: 700; font-family: var(--smg-font-heading); }
.smg-banner__text { font-size: .88rem; opacity: .85; }
.smg-banner__cta {
	margin-left: auto;
	flex-shrink: 0;
	font-size: .82rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: var(--smg-radius-pill);
	background: rgba(255, 255, 255, .2);
	border: 1px solid currentColor;
}
.smg-banner--soft .smg-banner__cta,
.smg-banner--outline .smg-banner__cta { background: var(--smg-accent); color: #fff; border-color: transparent; }
.smg-banner__chev { margin-left: auto; opacity: .7; }

/* ═══════════════════════════════════════════════════════════════
   Category chips
   ═══════════════════════════════════════════════════════════════ */

.smg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: calc(20px * var(--smg-space));
}
.smg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--smg-radius-pill);
	background: var(--smg-surface);
	border: 1px solid var(--smg-border);
	color: var(--smg-text-soft);
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.smg-chip:hover { border-color: var(--smg-accent-line); color: var(--smg-accent); }
.smg-chip.is-active {
	background: var(--smg-accent);
	border-color: var(--smg-accent);
	color: #fff;
}
.smg-chip__count { font-size: .76rem; opacity: .65; }

/* ═══════════════════════════════════════════════════════════════
   Grids
   ═══════════════════════════════════════════════════════════════ */

.smg-grid-items,
.smg-grid-posts {
	display: grid;
	gap: calc(18px * var(--smg-space));
	grid-template-columns: repeat(var(--smg-cols-mobile), minmax(0, 1fr));
}
.smg-grid-posts { --smg-cols-mobile: 1; }

@media (min-width: 600px) {
	.smg-grid-items { grid-template-columns: repeat(var(--smg-cols-tablet), minmax(0, 1fr)); }
	.smg-grid-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.smg-grid-items { grid-template-columns: repeat(var(--smg-cols), minmax(0, 1fr)); }
	.smg-grid-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   Cards — recommendation
   ═══════════════════════════════════════════════════════════════ */

.smg-card-item,
.smg-card-post {
	display: flex;
	flex-direction: column;
	background: var(--smg-surface);
	border-radius: var(--smg-radius);
	overflow: hidden;
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.smg-card-elevated .smg-card-item,
.smg-card-elevated .smg-card-post {
	box-shadow: var(--smg-shadow);
	border: 1px solid var(--smg-border);
}
.smg-card-elevated .smg-card-item:hover,
.smg-card-elevated .smg-card-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--smg-shadow-lg);
}

.smg-card-outline .smg-card-item,
.smg-card-outline .smg-card-post {
	border: 1px solid var(--smg-border-2);
	box-shadow: none;
}
.smg-card-outline .smg-card-item:hover,
.smg-card-outline .smg-card-post:hover { border-color: var(--smg-accent); }

.smg-card-flat .smg-card-item,
.smg-card-flat .smg-card-post {
	background: transparent;
	border: none;
	box-shadow: none;
}
.smg-card-flat .smg-card-item:hover .smg-card-item__img { transform: scale(1.03); }

.smg-card-soft .smg-card-item,
.smg-card-soft .smg-card-post {
	background: var(--smg-surface-2);
	border: 1px solid transparent;
	box-shadow: none;
}
.smg-card-soft .smg-card-item:hover,
.smg-card-soft .smg-card-post:hover { border-color: var(--smg-accent-line); }

.smg-card-item.is-featured { outline: 2px solid var(--smg-accent-line); outline-offset: -2px; }

.smg-card-item__media,
.smg-card-post__media {
	display: block;
	position: relative;
	aspect-ratio: var(--smg-ratio);
	background: var(--smg-img-bg);
	overflow: hidden;
}
.smg-card-item__img,
.smg-card-post__img {
	width: 100%;
	height: 100%;
	object-fit: var(--smg-fit);
	transition: transform .3s ease;
}
.smg-card-item__media:hover .smg-card-item__img { transform: scale(1.04); }

.smg-card-item__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--smg-muted);
	background: var(--smg-surface-2);
}
.smg-card-item__placeholder svg { width: 34%; max-width: 64px; opacity: .5; }

.smg-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: var(--smg-radius-pill);
	background: var(--smg-accent);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.smg-card-item__body,
.smg-card-post__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px;
	flex: 1;
}

.smg-card-item__cat {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--smg-muted);
	text-decoration: none;
}
.smg-card-item__cat:hover { color: var(--smg-accent); }

.smg-card-item__title,
.smg-card-post__title {
	font-size: .98rem;
	line-height: 1.35;
	margin: 0;
}
.smg-card-item__title a,
.smg-card-post__title a {
	color: var(--smg-text);
	text-decoration: none;
}
.smg-card-item__title a:hover,
.smg-card-post__title a:hover { color: var(--smg-accent); }

.smg-card-item__excerpt,
.smg-card-post__excerpt {
	font-size: .86rem;
	color: var(--smg-text-soft);
	margin: 0;
}

.smg-card-item__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 4px;
}
.smg-card-item__price {
	font-weight: 700;
	font-size: 1rem;
	color: var(--smg-text);
}
.smg-card-item__store {
	font-size: .72rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--smg-radius-pill);
	background: var(--smg-accent-soft);
	color: var(--smg-accent);
}
.smg-card-item__cta { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */

.smg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--smg-btn-bg);
	color: var(--smg-btn-text);
	border: 1px solid transparent;
	border-radius: var(--smg-radius-sm);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.smg-button:hover { background: var(--smg-btn-bg-hover); color: var(--smg-btn-text); }
.smg-button:active { transform: translateY(1px); }

.smg-button--sm { padding: 7px 14px; font-size: .84rem; }
.smg-button--lg { padding: 13px 26px; font-size: 1rem; }

.smg-button--quiet {
	background: transparent;
	color: var(--smg-text-soft);
	border-color: var(--smg-border-2);
}
.smg-button--quiet:hover {
	background: var(--smg-accent-soft);
	color: var(--smg-accent);
	border-color: var(--smg-accent-line);
}

.smg-btn-outline .smg-button:not(.smg-button--quiet) {
	background: transparent;
	color: var(--smg-btn-bg);
	border-color: var(--smg-btn-bg);
}
.smg-btn-outline .smg-button:not(.smg-button--quiet):hover {
	background: var(--smg-btn-bg);
	color: var(--smg-btn-text);
}

.smg-btn-pill .smg-button { border-radius: var(--smg-radius-pill); }

.smg-btn-block .smg-card-item__cta { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Single recommendation
   ═══════════════════════════════════════════════════════════════ */

.smg-item-layout {
	display: grid;
	gap: clamp(20px, 4vw, 44px);
	grid-template-columns: 1fr;
	margin-block: calc(20px * var(--smg-space)) calc(32px * var(--smg-space));
}
@media (min-width: 860px) {
	.smg-item-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

.smg-item-media {
	position: relative;
	background: var(--smg-img-bg);
	border-radius: var(--smg-radius-lg);
	overflow: hidden;
	border: 1px solid var(--smg-border);
}
.smg-item-media__img { width: 100%; object-fit: contain; }

.smg-item-detail { display: flex; flex-direction: column; gap: 14px; }
.smg-item-detail__cats { display: flex; gap: 8px; flex-wrap: wrap; }
.smg-item-detail__cats a {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--smg-muted);
	text-decoration: none;
}
.smg-item-detail__cats a:hover { color: var(--smg-accent); }
.smg-item-detail__title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.smg-item-detail__lead { font-size: 1.05rem; color: var(--smg-text-soft); }
.smg-item-detail__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.smg-item-detail__price { font-size: 1.6rem; font-weight: 800; font-family: var(--smg-font-heading); }
.smg-item-detail__note,
.smg-item-detail__disclosure {
	font-size: .8rem;
	color: var(--smg-muted);
}
.smg-item-detail__disclosure {
	padding: 10px 14px;
	background: var(--smg-surface-2);
	border-radius: var(--smg-radius-sm);
	border: 1px solid var(--smg-border);
}
.smg-item-detail .smg-button { align-self: flex-start; }
.smg-btn-block .smg-item-detail .smg-button { align-self: stretch; }

/* ═══════════════════════════════════════════════════════════════
   Single post / page / prose
   ═══════════════════════════════════════════════════════════════ */

.smg-single__head { margin-block: calc(16px * var(--smg-space)) calc(20px * var(--smg-space)); max-width: 46rem; }
.smg-single__title { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.smg-single__media { margin-bottom: calc(28px * var(--smg-space)); }
.smg-single__media img { width: 100%; border-radius: var(--smg-radius-lg); }

.smg-post-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: .84rem;
	color: var(--smg-muted);
	margin-top: 10px;
}
.smg-post-meta a { color: inherit; text-decoration: none; }
.smg-post-meta a:hover { color: var(--smg-accent); }

.smg-prose {
	max-width: 44rem;
	font-size: 1.03rem;
	line-height: 1.75;
}
.smg-single--wide .smg-prose,
.smg-single--wide.smg-single .smg-shell { max-width: var(--smg-width); }

.smg-prose > * + * { margin-top: 1.1em; }
.smg-prose h2 { font-size: 1.55rem; margin-top: 1.9em; }
.smg-prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.smg-prose ul, .smg-prose ol { padding-left: 1.4em; }
.smg-prose li + li { margin-top: .4em; }
.smg-prose img,
.smg-prose figure img { border-radius: var(--smg-radius); }
.smg-prose figcaption { font-size: .85rem; color: var(--smg-muted); margin-top: .5em; text-align: center; }
.smg-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--smg-accent);
	color: var(--smg-text-soft);
	font-style: italic;
}
.smg-prose code {
	background: var(--smg-surface-2);
	padding: .15em .4em;
	border-radius: 4px;
	font-size: .9em;
}
.smg-prose pre {
	background: var(--smg-surface-2);
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius);
	padding: 16px;
	overflow-x: auto;
}
.smg-prose pre code { background: none; padding: 0; }
.smg-prose table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}
.smg-prose th, .smg-prose td {
	border: 1px solid var(--smg-border);
	padding: 10px 12px;
	text-align: left;
}
.smg-prose th { background: var(--smg-surface-2); font-weight: 700; }

.alignwide { width: min(100%, calc(var(--smg-width) - 4rem)); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { margin-inline: auto; }

.smg-single__tags { margin-top: calc(28px * var(--smg-space)); max-width: 44rem; }
.smg-single__tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 11px;
	font-size: .8rem;
	background: var(--smg-surface-2);
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius-pill);
	color: var(--smg-text-soft);
	text-decoration: none;
}
.smg-single__tags a:hover { color: var(--smg-accent); border-color: var(--smg-accent-line); }

.smg-postnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: calc(36px * var(--smg-space));
	padding-top: 20px;
	border-top: 1px solid var(--smg-border);
	font-size: .92rem;
	max-width: 44rem;
}
.smg-postnav a { text-decoration: none; font-weight: 600; }
.smg-postnav__next { margin-left: auto; text-align: right; }

.smg-pagelinks { margin-top: 2em; font-weight: 600; }
.smg-pagelinks a { padding: 0 4px; }

/* ═══════════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════════ */

.smg-pagination { margin-top: calc(36px * var(--smg-space)); }
.smg-pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}
.smg-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: var(--smg-radius-sm);
	background: var(--smg-surface);
	border: 1px solid var(--smg-border);
	color: var(--smg-text-soft);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
}
.smg-pagination .page-numbers:hover { border-color: var(--smg-accent-line); color: var(--smg-accent); }
.smg-pagination .page-numbers.current {
	background: var(--smg-accent);
	border-color: var(--smg-accent);
	color: #fff;
}
.smg-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ═══════════════════════════════════════════════════════════════
   Social icons
   ═══════════════════════════════════════════════════════════════ */

.smg-social {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.smg-social__link {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: var(--smg-radius-pill);
	background: var(--smg-surface-2);
	border: 1px solid var(--smg-border);
	color: var(--smg-text-soft);
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.smg-social__link:hover { transform: translateY(-2px); }
.smg-social-brand .smg-social__link:hover { color: var(--smg-brand); border-color: var(--smg-brand); }
.smg-social-accent .smg-social__link { color: var(--smg-accent); }
.smg-social-accent .smg-social__link:hover { border-color: var(--smg-accent); }
.smg-social-mono .smg-social__link { color: var(--smg-text-soft); }
.smg-social-mono .smg-social__link:hover { color: var(--smg-text); border-color: var(--smg-text); }
.smg-social--sm .smg-social__link { width: 32px; height: 32px; }
.smg-social--hero { justify-content: center; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════ */

.smg-footer {
	background: var(--smg-surface);
	border-top: 1px solid var(--smg-border);
	padding-block: calc(40px * var(--smg-space)) calc(26px * var(--smg-space));
	margin-top: auto;
	font-size: .92rem;
}

.smg-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--smg-border);
}
.smg-widget__title { font-size: 1rem; margin-bottom: 10px; }
.smg-widget ul { list-style: none; margin: 0; padding: 0; }
.smg-widget li + li { margin-top: 6px; }
.smg-widget a { color: var(--smg-text-soft); text-decoration: none; }
.smg-widget a:hover { color: var(--smg-accent); }

.smg-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: flex-start;
}
.smg-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 32rem;
}
.smg-footer__about { color: var(--smg-text-soft); }

.smg-footer__nav { display: flex; gap: 40px; flex-wrap: wrap; }
.smg-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.smg-footer__menu a { color: var(--smg-text-soft); text-decoration: none; }
.smg-footer__menu a:hover { color: var(--smg-accent); }

.smg-footer__bottom {
	margin-top: calc(30px * var(--smg-space));
	padding-top: 20px;
	border-top: 1px solid var(--smg-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: .84rem;
	color: var(--smg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Empty states
   ═══════════════════════════════════════════════════════════════ */

.smg-none {
	text-align: center;
	max-width: 34rem;
	margin-inline: auto;
	padding-block: calc(50px * var(--smg-space));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.smg-none__code {
	font-family: var(--smg-font-heading);
	font-size: clamp(4rem, 16vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--smg-accent-soft);
	-webkit-text-stroke: 1px var(--smg-accent-line);
}
.smg-none__title { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.smg-none p { color: var(--smg-text-soft); }
.smg-none .smg-search { width: min(100%, 22rem); }

/* ═══════════════════════════════════════════════════════════════
   Comments
   ═══════════════════════════════════════════════════════════════ */

.smg-comments { max-width: 44rem; margin-top: calc(40px * var(--smg-space)); }
.smg-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.smg-comments .comment-list li { margin-bottom: 20px; }
.smg-comments .children { list-style: none; padding-left: 22px; margin-top: 20px; }
.smg-comments .comment-body {
	background: var(--smg-surface);
	border: 1px solid var(--smg-border);
	border-radius: var(--smg-radius);
	padding: 16px;
}
.smg-comments .comment-meta { font-size: .84rem; color: var(--smg-muted); margin-bottom: 8px; }
.smg-comments input[type="text"],
.smg-comments input[type="email"],
.smg-comments input[type="url"],
.smg-comments textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--smg-bg);
	border: 1px solid var(--smg-border-2);
	border-radius: var(--smg-radius-sm);
	color: var(--smg-text);
}
.smg-comments .submit {
	padding: 10px 20px;
	background: var(--smg-btn-bg);
	color: var(--smg-btn-text);
	border: none;
	border-radius: var(--smg-radius-sm);
	font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
	.smg-burger { display: flex; }
	.smg-header__search { display: none; }

	.smg-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--smg-surface);
		border-bottom: 1px solid var(--smg-border);
		box-shadow: var(--smg-shadow-lg);
		padding: 10px clamp(16px, 4vw, 32px) 16px;
		display: none;
	}
	.smg-header { position: relative; }
	.smg-nav.is-open { display: block; }
	.smg-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.smg-menu a { padding: 11px 12px; }
	.smg-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-left: 2px solid var(--smg-border);
		border-radius: 0;
		padding: 0 0 0 12px;
		margin: 2px 0 6px 12px;
		display: none;
	}
	.smg-menu li.is-open > .sub-menu { display: block; }

	.smg-footer__top { flex-direction: column; gap: 24px; }
	.smg-footer__nav { gap: 28px; }
}

@media (max-width: 480px) {
	.smg-banner { padding: 12px 14px; }
	.smg-banner__cta { display: none; }
	.smg-card-item__body { padding: 12px; }
}

/* Print: drop the chrome, keep the content. */
@media print {
	.smg-header, .smg-footer, .smg-ticker, .smg-banners, .smg-chips, .smg-skip { display: none !important; }
	body { background: #fff; color: #000; }
	.smg-prose { max-width: none; }
}