/*
Theme Name: GeneratePress — Suntop Shoes Child 2.1
Theme URI: https://suntopshoes.com
Description: Presentation layer for the Suntop Shoes B2B site. Do not edit the GeneratePress parent theme.
Author: ShipB2B
Template: generatepress
Version: 2.1.2
Requires at least: 6.5
Text Domain: gp-suntopshoes-child
*/

/* Self-hosted Roboto variable font, Latin + Latin Extended subsets.
   Carried over from the owner-approved AnyB2B child theme build 1.2.0
   (2026-08-15). Self-hosting keeps the render off a third-party origin. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTRAST RULES — measured, not asserted (design/DESIGN.md 2026-08-15)

     purple #572042 on cream #f8f9e2 .... 11.62:1   default text/action pairing
     orange #f64b10 on cream #f8f9e2 ....  3.31:1   NOT for normal-size text
     orange #f64b10 on white  #ffffff ....  3.54:1   NOT for normal-size text

   --st-accent is therefore an emphasis colour: icons, rules, large display
   type, badges, and filled controls that carry --st-accent-text on top.
   Meaning must never rest on colour alone.
   ───────────────────────────────────────────────────────────────────────── */


/* ── Child-theme safety net ────────────────────────────────────────────────
   The richer page system lives in wp-delivery/global.css. These rules keep
   WordPress chrome, archives, articles, forms and error routes coherent even
   before Additional CSS is deployed.

   COLOR AUTHORITY: this :root block is the only place brand HEX may be set
   after design seats the real palette. design-system/tokens.css, DESIGN.md,
   and brand-identity-source.json must mirror these values. Page craft must
   not invent a second --*-primary / brand wash.
   Gate: system/review/color_token_integrity_gate.py
   Contract: b2b-strategy-engine/knowledge/color-token-integrity-contract.json
   ───────────────────────────────────────────────────────────────────────── */
:root {
	/* ── Brand palette. Source: owner-approved design foundation carried from the
	   AnyB2B build (design/DESIGN.md, 2026-08-15), which documented the contrast
	   maths below. Seated here because this :root is the declared colour authority. */
	--st-primary: #572042;          /* headings, links, primary CTA, focus */
	--st-primary-hover: #40152f;
	/* The secondary role carries the brand accent taken from the logo. It was previously
	   a muted plum I mixed for dividers, which put a colour nobody chose into a named
	   brand role and left the confirmed logo accent unseated. The divider colour keeps
	   its own name below, where it is a surface value rather than a brand role. */
	--st-secondary: #f64b10;
	--st-divider-strong: #8f6b80;
	--st-accent: #f64b10;           /* decorative emphasis only — see contrast note */
	--st-accent-text: #111111;      /* the only text colour allowed on a filled accent */

	/* ── Surfaces. The cream is the brand's second surface, not a tint of white. */
	--st-surface: #ffffff;
	--st-surface-soft: #f8f9e2;
	--st-white: #ffffff;
	--st-white-2: #f8f9e2;
	--st-bg-soft: #f8f9e2;
	--st-bg-ink: #111827;
	/* Form error state. Seated here because the child theme :root is the only colour
	   authority: an unseated #be123c living in global.css is a second palette in the
	   brand's own hue, which is how a page ends up with two reds nobody chose. */
	--st-danger: #be123c;
	--st-danger-bg: #fff1f2;
	--st-danger-line: #fecdd3;
	--st-off-white: #f8f9e2;
	--st-off-white-2: #f2f3d6;

	/* ── Ink and rules */
	--st-text: #111827;
	--st-muted: #6b7280;
	--st-line: #e7dce2;
	--st-line-strong: #8f6b80;
	--st-black: #0a0b0d;
	--st-black-soft: #13161b;

	/* ── Type. Roboto is self-hosted above; Arial is the metric-compatible fallback. */
	--st-font-body: "Roboto", Arial, sans-serif;
	--st-font-ui: var(--st-font-body);

	/* ── Layout and depth */
	--st-wrap: 1200px;
	--st-container: min(1260px, calc(100% - 48px));  /* responsive; mirrors wp-delivery/global.css */
	--st-reading: 780px;
	--st-radius: 8px;
	--st-shadow: 0 16px 40px rgba(10, 11, 13, .10);
	--st-shadow-lg: 0 24px 64px rgba(87, 32, 66, .14);

	/* ── Stacking */
	--st-z-base: 1;
	--st-z-raised: 10;
	--st-z-sticky: 100;
	--st-z-overlay: 1000;
	--st-z-modal: 1100;
}

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

html { scroll-behavior: smooth; }

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

body.st-scroll-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	color: var(--st-black);
	font-family: var(--st-font-ui);
	font-weight: 750;
	line-height: 1.18;
}

a { color: var(--st-primary); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
img, video, svg { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; }

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

.st-wrap,
.st-cat__wrap,
.st-404__wrap {
	width: min(100% - 40px, var(--st-wrap));
	margin-inline: auto;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--st-radius);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.st-btn:hover { text-decoration: none; transform: translateY(-1px); }

.st-btn--primary {
	background: var(--st-primary);
	border-color: var(--st-primary);
	color: #fff;
}

.st-btn--primary:hover,
.st-btn--primary:focus { background: var(--st-black); border-color: var(--st-black); color: #fff; }

.st-btn--outline {
	background: transparent;
	border-color: var(--st-black);
	color: var(--st-black);
}

.st-btn--outline:hover { background: var(--st-black); color: #fff; }

.st-btn--ghost { color: var(--st-text); }

/* ── Header and navigation ──────────────────────────────────────────────── */
.st-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--st-line);
	backdrop-filter: blur(12px);
}

.admin-bar .st-site-header { top: 32px; }

.st-site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 72px;
}

.st-site-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--st-black);
	text-decoration: none;
}

/* The only logo the owner supplied is a cream wordmark drawn for a dark ground,
   and this header is rgba(255,255,255,.96): on the live home page the mark was
   effectively invisible. Rather than recolour a brand asset, which is the owner's
   decision and not ours, the mark sits on a plaque in the brand's own dark colour
   so it is read on the background it was drawn for. Replace this with a plain img
   the day a dark-on-light variant arrives. */
.st-site-header__logo {
	padding: 6px 14px;
	border-radius: 10px;
	background: var(--st-primary);
}

.st-site-header__logo img { display: block; width: auto; max-height: 32px; }
.st-site-header__logo-text { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.st-site-nav { margin-left: auto; }

.st-site-nav__list {
	display: flex;
	align-items: stretch;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-site-nav__item { position: static; }
.st-site-nav__item--has-dropdown:not(.st-site-nav__item--mega) { position: relative; }

.st-site-nav__control {
	display: flex;
	align-items: stretch;
}

.st-site-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 71px;
	border-bottom: 2px solid transparent;
	color: var(--st-black);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.st-site-nav__submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--st-black);
	cursor: pointer;
}

.st-site-nav__submenu-toggle:hover,
.st-site-nav__submenu-toggle:focus-visible { color: var(--st-primary); }

.st-site-nav__link:hover,
.st-site-nav__link[aria-current="page"] {
	border-bottom-color: var(--st-primary);
	color: var(--st-primary);
	text-decoration: none;
}

.st-site-nav__chevron { transition: transform .16s ease; }
.st-site-nav__item.is-open .st-site-nav__chevron { transform: rotate(180deg); }

.st-site-nav__dropdown {
	position: absolute;
	top: calc(100% - 1px);
	left: -14px;
	z-index: 20;
	min-width: 250px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: #fff;
	box-shadow: var(--st-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(7px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.st-site-nav__item.is-open .st-site-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.st-site-nav__dropdown-link {
	display: block;
	padding: 10px 12px;
	border-radius: calc(var(--st-radius) - 2px);
	color: var(--st-text);
	font-size: 14px;
	text-decoration: none;
}

.st-site-nav__dropdown-link:hover { background: var(--st-off-white); color: var(--st-primary); text-decoration: none; }

.st-site-nav__mega {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	z-index: 30;
	padding: 26px 0 30px;
	border-top: 1px solid var(--st-line);
	border-bottom: 1px solid var(--st-line);
	background: #fff;
	box-shadow: 0 24px 52px rgba(10, 11, 13, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.st-site-nav__item.is-open .st-site-nav__mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.st-site-nav__mega-inner {
	display: grid;
	grid-template-columns: minmax(150px, .65fr) minmax(0, 3fr);
	gap: 34px;
}

.st-site-nav__mega-inner:has(.st-site-nav__mega-feature) {
	grid-template-columns: minmax(140px, .6fr) minmax(0, 2.4fr) minmax(220px, .9fr);
}

.st-site-nav__mega-overview {
	padding-right: 24px;
	border-right: 1px solid var(--st-line);
}

.st-site-nav__mega-overview p {
	margin: 0 0 14px;
	color: var(--st-black);
	font-size: 18px;
	font-weight: 780;
}

.st-site-nav__mega-overview a,
.st-site-nav__mega-group a { color: var(--st-text); text-decoration: none; }
.st-site-nav__mega-overview a:hover,
.st-site-nav__mega-group a:hover { color: var(--st-primary); }

.st-site-nav__mega-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.st-site-nav__mega--taxonomy_matrix .st-site-nav__mega-groups,
.st-site-nav__mega--compact_directory .st-site-nav__mega-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.st-site-nav__mega-group h2 {
	margin: 0 0 10px;
	color: var(--st-muted);
	font-size: 11px;
	font-weight: 780;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.st-site-nav__mega-group ul { margin: 0; padding: 0; list-style: none; }
.st-site-nav__mega-group li + li { margin-top: 4px; }
.st-site-nav__mega-group a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
}
.st-site-nav__mega-group a span { opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
.st-site-nav__mega-group a:hover span { opacity: 1; transform: translateX(0); }

.st-site-nav__mega-feature {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border-radius: var(--st-radius);
	background: var(--st-off-white);
	color: var(--st-text);
	text-decoration: none;
}
.st-site-nav__mega-feature img { width: 100%; aspect-ratio: 7 / 4; border-radius: calc(var(--st-radius) - 3px); object-fit: cover; }
.st-site-nav__mega-feature small { color: var(--st-primary); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.st-site-nav__mega-feature strong { color: var(--st-black); }
.st-site-nav__mega-feature span { color: var(--st-muted); font-size: 13px; }

.st-language-switcher { position: relative; flex: 0 0 auto; }
.st-language-switcher summary {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 4px;
	color: var(--st-black);
	font-size: 12px;
	font-weight: 760;
	cursor: pointer;
	list-style: none;
}
.st-language-switcher summary::-webkit-details-marker { display: none; }
.st-language-switcher__chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; }
.st-language-switcher[open] .st-language-switcher__chevron { transform: rotate(225deg) translate(-1px, -1px); }
.st-language-switcher ul {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 40;
	min-width: 150px;
	margin: 0;
	padding: 7px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: #fff;
	box-shadow: var(--st-shadow);
	list-style: none;
}
.st-language-switcher a { display: block; padding: 8px 10px; border-radius: calc(var(--st-radius) - 3px); color: var(--st-text); font-size: 13px; text-decoration: none; }
.st-language-switcher a:hover,
.st-language-switcher a[aria-current="true"] { background: var(--st-off-white); color: var(--st-primary); }
.st-site-header__cta { flex: 0 0 auto; }

.st-site-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: #fff;
	cursor: pointer;
}

.st-site-header__burger span {
	display: block;
	width: 100%;
	height: 2px;
	margin: 4px 0;
	background: var(--st-black);
}

/* ── Mobile navigation ──────────────────────────────────────────────────── */
.st-mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 310;
	display: flex;
	flex-direction: column;
	width: min(380px, 90vw);
	background: #fff;
	box-shadow: var(--st-shadow);
	overflow-y: auto;
	transform: translateX(105%);
	transition: transform .2s ease;
}

.st-mobile-nav.is-open { transform: translateX(0); }

.st-mobile-nav__overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(10, 11, 13, .58);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.st-mobile-nav__overlay.is-open { opacity: 1; visibility: visible; }

.st-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--st-line);
}

.st-mobile-nav__header img { display: block; width: auto; max-height: 38px; }
.st-mobile-nav__header a { color: var(--st-black); font-weight: 800; text-decoration: none; }

.st-mobile-nav__close {
	display: grid;
	align-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
	color: var(--st-black);
	cursor: pointer;
}

.st-mobile-nav__close span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.st-mobile-nav__list { flex: 1; margin: 0; padding: 8px 0; list-style: none; }
.st-mobile-nav__item--group { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--st-line); }

.st-mobile-nav__link,
.st-mobile-nav__sub a {
	display: block;
	padding: 13px 22px;
	color: var(--st-black);
	font-weight: 650;
	text-decoration: none;
}

.st-mobile-nav__link:hover,
.st-mobile-nav__sub a:hover { background: var(--st-off-white); color: var(--st-primary); }

.st-mobile-nav__toggle {
	display: grid;
	place-items: center;
	width: 52px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.st-mobile-nav__toggle svg { width: 14px; height: 9px; fill: none; transition: transform .16s ease; }
.st-mobile-nav__toggle path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-mobile-nav__item.is-open > .st-mobile-nav__toggle svg { transform: rotate(180deg); }

.st-mobile-nav__sub {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0 0 8px;
	background: var(--st-off-white);
	list-style: none;
}

.st-mobile-nav--accordion-ready .st-mobile-nav__sub { display: none; }
.st-mobile-nav--accordion-ready .st-mobile-nav__item.is-open > .st-mobile-nav__sub { display: block; }
.st-mobile-nav__sub a { padding-left: 38px; font-size: 14px; font-weight: 500; }
.st-mobile-nav__footer { padding: 20px 22px; border-top: 1px solid var(--st-line); }
.st-mobile-nav__footer .st-btn { width: 100%; }
.st-mobile-nav__languages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.st-mobile-nav__languages a { padding: 7px 10px; border: 1px solid var(--st-line); border-radius: 999px; color: var(--st-text); font-size: 12px; text-decoration: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.st-footer {
	/* No margin-top. Every page on this site closes on an ink CTA band with 96px of
	   its own bottom padding, and the footer opens with 64px of its own. The 80px
	   that used to sit between them rendered as a white strip between two dark
	   blocks, which is what it looked like: a gap, not breathing room. */
	padding: 64px 0 28px;
	background: var(--st-black-soft);
	color: rgba(255, 255, 255, .72);
}

.st-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.st-footer a:hover { color: #fff; text-decoration: underline; }

.st-footer__grid {
	display: grid;
	grid-template-columns: minmax(230px, 1.5fr) repeat(5, minmax(120px, 1fr));
	gap: 38px;
}

.st-footer__brand-name { margin: 0 0 10px; color: #fff; font-size: 19px; font-weight: 800; }
.st-footer__brand-copy { max-width: 310px; margin: 0 0 18px; font-size: 14px; }
.st-footer__contact,
.st-footer__social,
.st-footer__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.st-footer__contact { font-size: 13px; }
.st-footer__social { display: flex; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }

.st-footer__col-title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.st-footer__list { font-size: 13px; }
.st-footer__list a.is-rfq { color: var(--st-primary); font-weight: 750; }

.st-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 42px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .10);
}

.st-footer__bottom p { margin: 0; color: rgba(255, 255, 255, .48); font-size: 12px; }

/* ── Archive, search and author listings ───────────────────────────────── */
.st-cat,
.st-post,
.st-404 { padding: 48px 0 24px; }

.st-cat__crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
	color: var(--st-muted);
	font-size: 13px;
}

.st-cat__crumb a { color: var(--st-text); }
.st-cat__hero { max-width: 820px; margin-bottom: 42px; }
.st-cat__tag { margin: 0 0 10px; color: var(--st-primary); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.st-cat__title,
.st-post__title,
.st-404__title { margin: 0; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.035em; }
.st-cat__desc,
.st-post__standfirst,
.st-404__dek { margin: 16px 0 0; color: var(--st-muted); font-size: clamp(17px, 2vw, 20px); }

.st-cat__layout,
.st-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 54px; align-items: start; }
.st-cat__count { margin: 0 0 18px; color: var(--st-muted); font-size: 13px; }
.st-cat__intro { margin-bottom: 28px; }

.st-cat__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.st-post__related .st-cat__grid { grid-template-columns: 1fr; }

.st-cat__card {
	overflow: hidden;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: #fff;
	box-shadow: 0 6px 24px rgba(10, 11, 13, .04);
}

.st-cat__card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--st-off-white); }
.st-cat__card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.st-cat__card:hover .st-cat__card-thumb img { transform: scale(1.025); }
.st-cat__card-body { padding: 22px; }
.st-cat__card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; color: var(--st-muted); font-size: 12px; }
.st-cat__card-cat { font-weight: 750; }
.st-cat__card-title { margin: 0; font-size: 20px; }
.st-cat__card-title a { color: var(--st-black); text-decoration: none; }
.st-cat__card-title a:hover { color: var(--st-primary); }
.st-cat__card-excerpt { margin: 12px 0 0; color: var(--st-muted); font-size: 14px; }

.st-cat__side { position: sticky; top: 100px; display: grid; gap: 22px; }
.st-cat__side-cta,
.st-cat__side-cats { padding: 24px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-off-white); }
.st-cat__side h2 { margin: 0 0 10px; font-size: 18px; }
.st-cat__side p { font-size: 14px; }
.st-cat__side-actions { display: grid; gap: 9px; }
.st-cat__side-cats ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.st-cat__side-cats a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--st-text); text-decoration: none; }
.st-cat__side-cats .active a,
.st-cat__side-cats a:hover { color: var(--st-primary); }
.st-cat__side-count { color: var(--st-muted); font-size: 12px; }

.st-cat__pagination { margin-top: 34px; }
.st-cat__pagination-links { display: flex; flex-wrap: wrap; gap: 8px; }
.st-cat__pagination .page-numbers { min-width: 40px; padding: 8px 12px; border: 1px solid var(--st-line); border-radius: 6px; color: var(--st-text); text-align: center; text-decoration: none; }
.st-cat__pagination .page-numbers.current { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.st-cat__pagination-status { margin: 10px 0 0; color: var(--st-muted); font-size: 13px; }

/* ── Article ────────────────────────────────────────────────────────────── */
.st-post__header { margin-bottom: 30px; }
.st-post__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; color: var(--st-muted); font-size: 13px; }
.st-post__media { margin: 0 0 34px; overflow: hidden; border-radius: var(--st-radius); }
.st-post__media img { display: block; width: 100%; }
.st-post__content { max-width: var(--st-reading); }
.st-post__content > * + * { margin-top: 1.25em; }
.st-post__content h2 { margin-top: 2.1em; font-size: clamp(25px, 3vw, 34px); }
.st-post__content h3 { margin-top: 1.7em; }
.st-post__content blockquote { margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--st-primary); background: var(--st-off-white); }
.st-post__content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-post__content th,
.st-post__content td { padding: 10px 12px; border: 1px solid var(--st-line); text-align: left; vertical-align: top; }
.st-post__content th { background: var(--st-off-white); color: var(--st-black); }
.st-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.st-post__cta { margin-top: 48px; padding: 28px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-off-white); }
.st-post__cta h2 { margin-top: 0; font-size: 23px; }
.st-post__related { margin-top: 48px; }
.st-post__related > h2 { font-size: 23px; }
.st-post__nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--st-line); font-size: 14px; }
.st-post__nav-next { margin-left: auto; text-align: right; }

/* ── 404 and search form ───────────────────────────────────────────────── */
.st-404__hero { max-width: 820px; margin-inline: auto; text-align: center; }
.st-404__code { margin: 0 0 12px; color: var(--st-primary); font-size: 16px; font-weight: 850; letter-spacing: .16em; }
.st-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.st-404__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 650px; margin: 32px auto 0; text-align: left; }
.st-404__search-label { grid-column: 1 / -1; font-weight: 700; }
.st-404__search-input { min-height: 46px; padding: 10px 13px; border: 1px solid var(--st-line); border-radius: var(--st-radius); }
.st-404__routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.st-404__route { padding: 24px; border: 1px solid var(--st-line); border-radius: var(--st-radius); }
.st-404__route h2 { margin-top: 0; font-size: 19px; }
.st-404__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-404__list a { display: flex; justify-content: space-between; gap: 12px; color: var(--st-text); }

/* ── Modal, forms and quick actions ────────────────────────────────────── */
.st-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.st-modal.is-open { display: flex; }
.st-modal__overlay { position: absolute; inset: 0; background: rgba(10, 11, 13, .68); }
.st-modal__box { position: relative; width: min(560px, 100%); max-height: 90vh; padding: 38px; overflow-y: auto; border-radius: var(--st-radius); background: #fff; box-shadow: var(--st-shadow); }
.st-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--st-muted); font-size: 28px; cursor: pointer; }
.st-modal__tag { margin: 0 0 8px; color: var(--st-primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.st-modal__title { margin: 0; font-size: 27px; }
.st-modal__sub { margin: 10px 0 22px; color: var(--st-muted); }

.fluentform .ff-el-input--label label { color: var(--st-black); font-weight: 700; }
.fluentform .ff-el-form-control { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 6px; background: #fff; color: var(--st-text); }
.fluentform .ff-el-form-control:focus { border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 20%, transparent); outline: none; }
.fluentform .ff-btn-submit { min-height: 46px; padding: 11px 22px; border: 1px solid var(--st-primary); border-radius: var(--st-radius); background: var(--st-primary); color: #fff; font-weight: 700; cursor: pointer; }

.st-floating-actions { position: fixed; right: 20px; bottom: 20px; z-index: 220; display: flex; flex-direction: column; gap: 9px; }
.st-floating-actions__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; color: var(--st-black); box-shadow: 0 8px 24px rgba(10, 11, 13, .16); cursor: pointer; }
.st-floating-actions__btn--whatsapp { border-color: #25d366; background: #25d366; color: #fff; }
.st-floating-actions__btn--top { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.st-floating-actions__btn--top.is-visible { opacity: 1; visibility: visible; }
.st-floating-actions__btn svg { width: 24px; height: 24px; }

/* ── Responsive and resilient states ───────────────────────────────────── */
@media (max-width: 1120px) {
	.st-site-nav__list { gap: 15px; }
	.st-site-nav__link { font-size: 13px; }
	.st-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.admin-bar .st-site-header { top: 46px; }
	.st-site-nav,
	.st-language-switcher,
	.st-site-header__cta { display: none; }
	.st-site-header__burger { display: block; margin-left: auto; }
	.st-site-header__inner { min-height: 64px; }
	.st-cat__layout,
	.st-post__layout { grid-template-columns: 1fr; }
	.st-cat__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-404__routes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.st-wrap,
	.st-cat__wrap,
	.st-404__wrap { width: min(100% - 28px, var(--st-wrap)); }
	.st-cat,
	.st-post,
	.st-404 { padding-top: 32px; }
	.st-cat__grid,
	.st-cat__side,
	.st-404__routes,
	.st-footer__grid { grid-template-columns: 1fr; }
	.st-footer { padding-top: 46px; }
	.st-footer__bottom { flex-direction: column; }
	.st-404__search { grid-template-columns: 1fr; }
	.st-404__search-go { width: 100%; }
	.st-modal__box { padding: 30px 20px; }
	.st-post__nav { flex-direction: column; }
	.st-post__nav-next { margin-left: 0; text-align: left; }
}

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

@media print {
	.st-site-header,
	.st-footer,
	.st-cat__side,
	.st-post__cta,
	.st-floating-actions { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Shared footer logo remains a full touch target on every route. */
.st-footer__logo { min-height: 44px; display: inline-flex; align-items: center; }