/*
 * Shturko soft UI — sitewide "light & airy" layer (2026-10-22).
 *
 * Loaded on every front-end page, last in <head> (after Kadence and the
 * Customizer CSS stored in the database), so new pages get the same calm
 * look without extra work. Rules: docs/design/design-system.md §0.
 *
 *   - type: regular 400 everywhere, including headings and emphasis;
 *   - buttons: one pair per page — orange primary + white secondary (§8);
 *     the peach tint is only for counters and badges;
 *   - shapes: pill buttons, 16–32px corners, wide soft shadows;
 *   - no dark or neon full-width bands.
 */

/* Site font: Andika (SIL International), self-hosted in fonts/ (OFL licence next to the files).
 * One typeface for Bulgarian and English alike, made for beginning and struggling readers:
 * single-storey a and g, clearly different b/d/p/q and I/l/1, wide open shapes.
 * Why: docs/accessibility/accessibility-policy.md §2. The regular file covers weights
 * 100–599 and the bold file 600–900, so the site's weight 400 is always the regular cut. */
@font-face { font-family: "Andika"; src: url("fonts/andika-latin.woff2") format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Andika"; src: url("fonts/andika-latin-ext.woff2") format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; 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: "Andika"; src: url("fonts/andika-cyrillic.woff2") format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Andika"; src: url("fonts/andika-cyrillic-ext.woff2") format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Andika"; src: url("fonts/andika-symbols.woff2") format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; unicode-range: U+2190, U+2192, U+2194-219B, U+21A8, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F, U+2713, U+2717, U+274D, U+27C2, U+27E6-27E9; }
@font-face { font-family: "Andika"; src: url("fonts/andika-bold-latin.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Andika"; src: url("fonts/andika-bold-latin-ext.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; 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: "Andika"; src: url("fonts/andika-bold-cyrillic.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Andika"; src: url("fonts/andika-bold-cyrillic-ext.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Andika"; src: url("fonts/andika-bold-symbols.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+2190, U+2192, U+2194-219B, U+21A8, U+21B6-21B7, U+21BA-21BB, U+21D0-21D5, U+2202-2206, U+220F, U+2211, U+2213, U+2219-221A, U+221E, U+2221, U+2225-2228, U+222B, U+2234-2235, U+223C, U+2248, U+225F-2262, U+2264-2265, U+226E-226F, U+2282-2287, U+25C9-25CC, U+2610-2612, U+2639-263A, U+2640, U+2642, U+266D, U+266F, U+2713, U+2717, U+274D, U+27C2, U+27E6-27E9; }


/* Card font for every deck outside the Speaking pillar (Мисля, Кръгове на доверие, the card fan):
 * Nunito, self-hosted, variable weight. Speaking cards and the rest of the site use Andika. */
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-ext.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; 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: "Nunito"; src: url("fonts/nunito-cyrillic.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-cyrillic-ext.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
	--sh-ink: #1f4568;          /* headings — softer than the old #123b64 */
	--sh-text: #34506a;         /* body text, 8:1 on white */
	--sh-text-muted: #5a7088;
	--sh-accent: #f04d23;       /* Adventure Orange — primary buttons */
	--sh-accent-hover: #d93f1b;
	--sh-tint: #fbebe3;         /* peach tint — secondary buttons, badges */
	--sh-tint-hover: #f7dccf;
	--sh-tint-ink: #b83a14;     /* text on the tint, 4.9:1 */
	--sh-line: rgba(31, 69, 104, 0.12);
	--sh-radius-sm: 14px;
	--sh-radius: 22px;
	--sh-radius-lg: 32px;
	--sh-shadow: 0 8px 28px rgba(31, 69, 104, 0.07);
	--sh-shadow-hover: 0 12px 34px rgba(31, 69, 104, 0.11);
	--sh-weight-body: 400;
	--sh-weight-heading: 400;
	--sh-weight-strong: 400;

	/* Site tokens (assets/design-tokens.css) and Kadence palette slots. */
	--color-primary: var(--sh-accent);
	--color-primary-dark: var(--sh-accent-hover);
	--color-text: var(--sh-ink);
	--color-text-muted: var(--sh-text-muted);
	--global-palette1: #f04d23;
	--global-palette2: #d93f1b;
	--global-palette3: #1f4568;
	--global-palette4: #34506a;
	--global-palette5: #5a7088;
}

/* ---------- Typography: light, easy to read ---------- */
/* Important declarations in a layer outrank old unlayered component and
 * Customizer rules, including ID selectors and hover font shorthands. */
@layer shturko-regular-type {
	body, body *, body *::before, body *::after {
		font-weight: 400 !important;
	}
}

/* Site type rule (owner, 2026-10-29; docs/accessibility/accessibility-policy.md §2):
 * descriptive text — Nunito; headings, subheadings, menu, buttons and links — Andika.
 * A link inside a sentence keeps the text font (colour + underline mark it), so the line
 * does not change typeface mid-sentence. Speaking cards (.kd-deck) are Andika throughout;
 * the other decks (.td-deck, .ctd-deck, .shturko-deck-fan) are Nunito throughout.
 * These are the only font rules on the site: components and pages set no font-family
 * (not even "inherit"), and this file loads after Kadence, so a new page follows them
 * without overrides. */
body,
input,
textarea,
select,
option {
	font-family: "Nunito", sans-serif;
}
h1, h2, h3, h4, h5, h6, nav,
a, button, .button, [role="button"], [type="submit"], [type="button"], [type="reset"],
.wp-element-button, .wp-block-button__link,
:is([class*="__title"], [class*="-title"], [class*="heading"], [class*="kicker"], [class*="eyebrow"],
	[class*="menu"], [class*="navigation"], [class*="btn"]):not(html, body) {
	font-family: "Andika", sans-serif;
}
:is(p, dd, td, blockquote, figcaption, label, small) a:not([class*="btn"]):not(.button) {
	font-family: inherit;
}
:is(.td-deck, .ctd-deck, .shturko-deck-fan),
:is(.td-deck, .ctd-deck, .shturko-deck-fan) * {
	font-family: "Nunito", sans-serif;
}

/* ---------- Links in text (design-system.md §23.1) ----------
 * Orange, always underlined; #b83a14 keeps 5.8:1 contrast on white (WCAG AA for text).
 * Hover/focus: thicker underline. Buttons, menus and the components below have their own look. */
:is(p, dd, td, blockquote, figcaption, label, small, .entry-content li, .woocommerce-MyAccount-content li) a:not([class*="btn"]):not(.button):not([class*="sh-"]) {
	color: #b83a14;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:is(p, dd, td, blockquote, figcaption, label, small, .entry-content li, .woocommerce-MyAccount-content li) a:not([class*="btn"]):not(.button):not([class*="sh-"]):is(:hover, :focus-visible) {
	color: #b83a14;
	text-decoration-thickness: 2px;
}

/* ---------- Breadcrumbs (design-system.md §23.2) ----------
 * Two or more levels: .sh-crumbs — quiet text with ›, the current page in ink.
 *   <nav class="sh-crumbs" aria-label="…"><ol><li><a href>Начало</a></li><li><a href>Игри</a></li><li aria-current="page">Растения</li></ol></nav>
 * One level up only: .sh-back — „‹ Моят акаунт“.
 *   <a class="sh-back" href><span class="sh-back__ico" aria-hidden="true"><svg…/></span>Моят акаунт</a> */
.sh-crumbs {
	margin: 0 0 0.75rem;
	font-size: 14px;
	line-height: 1.4;
	color: #5a7088;
}
.sh-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sh-crumbs li + li::before {
	content: "›";
	margin-right: 0.35rem;
	color: #a0afbf;
}
.sh-crumbs a {
	color: #5a7088;
	text-decoration: none;
}
.sh-crumbs a:is(:hover, :focus-visible) {
	color: #1f4568;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sh-crumbs [aria-current] {
	color: #1f4568;
}
.sh-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	margin: 0 0 0.7rem;
	padding: 0.15rem 0;
	border: 0;
	background: none;
	color: #5a7088;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.sh-back__ico {
	display: inline-flex;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: #f04d23;
	transition: transform 160ms ease;
}
.sh-back__ico svg {
	display: block;
	width: 100%;
	height: 100%;
}
.sh-back:is(:hover, :focus-visible) {
	color: #1f4568;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}
.sh-back:is(:hover, :focus-visible) .sh-back__ico {
	color: #1f4568;
	transform: translateX(-3px);
}

/* ---------- Pop-up windows (design-system.md §23.3) ----------
 * One look for every dialog: computer — white card in the centre (24px corners, × top right);
 * phone (≤600px) — a sheet from the bottom with a grab handle. Markup:
 *   <div class="sh-dialog" role="dialog" aria-modal="true" aria-labelledby="…" hidden>
 *     <div class="sh-dialog__backdrop" data-close></div>
 *     <div class="sh-dialog__panel"><button class="sh-dialog__close" aria-label="Затвори">×</button>
 *       <h2 class="sh-dialog__title">…</h2> … <div class="sh-dialog__actions">buttons</div></div></div>
 * A native <dialog> (showModal) is the panel itself: <dialog class="sh-dialog__panel">; ::backdrop dims the page.
 * Wide content (campaign, enlarged gallery): add .sh-dialog__panel--wide. */
.sh-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.sh-dialog[hidden] {
	display: none;
}
.sh-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 69, 104, 0.35);
}
.sh-dialog__panel:not(dialog) {
	position: relative;
}
dialog.sh-dialog__panel {
	margin: auto;
	border: 0;
}
dialog.sh-dialog__panel::backdrop {
	background: rgba(31, 69, 104, 0.35);
}
.sh-dialog__panel {
	width: min(520px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 28px 28px 24px;
	border-radius: 24px;
	background: #fff;
	color: var(--sh-text);
	box-shadow: 0 24px 60px rgba(31, 51, 67, 0.22);
}
.sh-dialog__panel--wide {
	width: min(1080px, 100%);
}
.sh-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0 !important;
	border-radius: 999px !important;
	background: #f4f6f8 !important;
	color: #1f4568 !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}
.sh-dialog__close:is(:hover, :focus-visible) {
	background: #e8edf2 !important;
}
.sh-dialog__title {
	margin: 0 48px 12px 0;
	color: var(--sh-ink);
	font-size: 22px;
	line-height: 1.25;
}
.sh-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
@media (max-width: 600px) {
	.sh-dialog {
		align-items: flex-end;
		padding: 0;
	}
	.sh-dialog__panel {
		width: 100%;
		max-width: 100%;
		max-height: 88vh;
		padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
	}
	.sh-dialog__panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: #d3d9e0;
	}
	dialog.sh-dialog__panel {
		margin: auto 0 0;
	}
	.sh-dialog__actions > * {
		flex: 1 1 100%;
	}
}

body {
	font-weight: var(--sh-weight-body);
	color: var(--sh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6),
:is([class*="title"], [class*="heading"], [class*="kicker"], [class*="eyebrow"]):not(svg *):not(title) {
	font-weight: var(--sh-weight-heading) !important;
	letter-spacing: 0;
}

/* Older Customizer rules pin headings to 800 with an ID selector
 * (e.g. "#cart-drawer .side-cart-header"); this outranks them everywhere. */
html body :is(#wrapper, #masthead, #mobile-drawer, #cart-drawer, #main, #colophon) :is(h1, h2, h3, h4, h5, h6, [class*="title"], [class*="heading"]):not(svg *):not(title) {
	font-weight: var(--sh-weight-heading) !important;
}
html body #cart-drawer .side-cart-header {
	color: var(--sh-ink) !important;
}

h1, h2, h3, h4, h5,
.entry-content :is(h1, h2, h3, h4, h5) {
	color: var(--sh-ink);
	line-height: 1.25;
}

strong, b, th, dt, legend {
	font-weight: var(--sh-weight-strong) !important;
}

/* Header navigation, labels, chips and badges */
:is(#masthead, .site-header, .site-footer, nav) :is(a, button, span),
:is([class*="badge"], [class*="chip"], label) {
	font-weight: var(--sh-weight-heading) !important;
}
html body #masthead .header-navigation .header-menu-container li > a,
html body .site-footer a,
.shturko-footer-meta,
.homepage__step-num,
.homepage__cards-check,
.woocommerce-Price-amount,
.woocommerce-Price-amount *,
:is([class*="price"], [class*="amount"], [class*="ribbon"], [class*="__more"], [class*="__desc"], [class*="__label"], [class*="-label"], [class*="__num"], [class*="__count"], [class*="__name"], [class*="__lead"], [class*="__sub"]):not(svg *) {
	font-weight: var(--sh-weight-heading) !important;
}

/* ---------- Buttons: calm, round, one accent ---------- */
:is(
	button,
	.button,
	a.button,
	input[type="submit"],
	input[type="button"],
	.wp-block-button__link,
	.wp-element-button,
	[class*="__btn"],
	[class*="-btn"],
	[class*="__cta"]
):not(.mfp-close):not([class*="close"]):not([class*="slick"]) {
	font-weight: var(--sh-weight-heading) !important;
	letter-spacing: 0.01em;
	text-transform: none;
}

:is(
	.button,
	a.button,
	input[type="submit"],
	.wp-block-button__link,
	.wp-element-button,
	[class*="__btn"],
	[class*="-btn"]
):not([class*="close"]):not([class*="ico"]):not([class*="btns"]) {
	border-radius: 999px !important;
}

/* Buttons — docs/design/design-system.md §8. One source for every page:
 * new markup uses .sh-btn + .sh-btn--primary / .sh-btn--secondary; older
 * components are mapped onto the same two looks below.
 * Hover for every button: lift 2px + stronger shadow. The primary darkens to
 * #d93f1b; the white secondary never changes colour or border. */
.sh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 15px 28px;
	border: 0;
	border-radius: 999px;
	font-size: 16px;
	font-weight: var(--sh-weight-heading);
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

/* Primary — Adventure Orange, white label. One per page (with its secondary). */
.sh-btn--primary,
html body .button:not(.secondary):not(.shturko-header-login),
html body .wp-block-button:not(.is-style-outline) .wp-block-button__link,
html .woocommerce a.button:not(.secondary),
html .woocommerce button.button.alt,
html .woocommerce button.button,
html .woocommerce input.button,
html .homepage--v2 a.homepage__btn--primary,
html .homepage__btn--primary,
html body .shturko-about__cta--cards {
	background-color: #f04d23 !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 7px 16px rgba(177, 53, 24, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.sh-btn--primary:is(:hover, :focus-visible),
html body .button:not(.secondary):not(.shturko-header-login):is(:hover, :focus-visible),
html body .wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible),
html .woocommerce a.button:not(.secondary):is(:hover, :focus-visible),
html .woocommerce button.button:is(:hover, :focus-visible),
html .woocommerce input.button:is(:hover, :focus-visible),
html .homepage--v2 a.homepage__btn--primary:is(:hover, :focus-visible),
html .homepage__btn--primary:is(:hover, :focus-visible),
html body .shturko-about__cta--cards:is(:hover, :focus-visible) {
	background-color: #d93f1b !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 22px rgba(177, 53, 24, 0.26) !important;
}

/* Secondary — white pill, navy label, no border. */
.sh-btn--secondary,
html .homepage--v2 a.homepage__btn--secondary,
html .homepage__btn--secondary,
html .homepage__tips-cta,
html .homepage__tips-card .homepage__link-all,
html .homepage__link-all,
html .wp-block-button.is-style-outline .wp-block-button__link,
html .button.secondary,
html body .shturko-about__cta--parents,
html body .shturko-fan__more {
	background: rgba(255, 255, 255, 0.92) !important;
	color: #123b64 !important;
	border: 0 !important;
	box-shadow: 0 5px 14px rgba(31, 51, 67, 0.12) !important;
}
.sh-btn--secondary:is(:hover, :focus-visible),
html .homepage--v2 a.homepage__btn--secondary:is(:hover, :focus-visible),
html .homepage__btn--secondary:is(:hover, :focus-visible),
html .homepage__tips-cta:is(:hover, :focus-visible),
html .homepage__tips-card .homepage__link-all:is(:hover, :focus-visible),
html .homepage__link-all:is(:hover, :focus-visible),
html .wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible),
html .button.secondary:is(:hover, :focus-visible),
html body .shturko-about__cta--parents:is(:hover, :focus-visible),
html body .shturko-fan__card:is(:hover, :focus-visible) .shturko-fan__more {
	background: rgba(255, 255, 255, 0.92) !important;
	color: #123b64 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16) !important;
}
.sh-btn:active:not(:disabled) {
	transform: translateY(0) !important;
}
.sh-btn:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none !important;
}
/* The shared components set display; [hidden] must still hide them. */
:is(.sh-btn, .sh-chip, .sh-answer, .sh-back, .sh-crumbs)[hidden] {
	display: none !important;
}
/* Quiet — a text button for the minor choice next to a primary (Settings, Back, Not now):
 * no fill or shadow, navy label, underline on hover. */
.sh-btn--quiet {
	background: transparent !important;
	color: #1f4568 !important;
	box-shadow: none !important;
	padding-left: 12px;
	padding-right: 12px;
}
.sh-btn--quiet:is(:hover, :focus-visible) {
	background: transparent !important;
	color: #1f4568 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transform: none !important;
	box-shadow: none !important;
}
/* Danger — delete or discard (expert tools): white pill, red label, thin red edge. */
.sh-btn--danger {
	background: #fff !important;
	color: #b42318 !important;
	box-shadow: inset 0 0 0 1.5px rgba(180, 35, 24, 0.35), 0 5px 14px rgba(31, 51, 67, 0.08) !important;
}
.sh-btn--danger:is(:hover, :focus-visible) {
	background: #fff5f4 !important;
	color: #b42318 !important;
	transform: translateY(-2px) !important;
}
/* A primary/secondary button on its own line (games: Start, Again, Try again). */
.sh-btn--block {
	display: flex;
	width: fit-content;
	margin: 1rem 0 0;
}

/* Choice chips — levels, counts, answer options in games and filters.
 * Cream pill with a coloured edge; the component sets --sh-chip-accent (its own colour).
 * .is-active = the current choice (orange edge), .is-picked = selected answer,
 * .is-locked / :disabled = not yet available. .sh-chip--round = 48px circle (level numbers). */
.sh-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem 1rem;
	border: 2px solid var(--sh-chip-accent, #f4a62a) !important;
	border-radius: 999px !important;
	background: #fffdf8 !important;
	color: #123b64 !important;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.sh-chip:is(:hover, :focus-visible):not(:disabled):not(.is-locked) {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16);
}
.sh-chip:active:not(:disabled) {
	transform: translateY(0);
}
.sh-chip:is(.is-active, .is-current) {
	border-color: #f04d23 !important;
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16);
}
.sh-chip.is-picked {
	background: #e1f0f6 !important;
}
.sh-chip.is-locked,
.sh-chip:disabled {
	border-color: rgba(47, 33, 20, 0.22) !important;
	color: #a08060 !important;
	cursor: default;
}
.sh-chip--round {
	width: 48px;
	height: 48px;
	padding: 0;
}

/* Answer options in games (design-system.md §8 „Game answer chips“): white pill, no border,
 * secondary shadow, lift on hover. After the answer: .is-correct green, .is-wrong orange. */
.sh-answer {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0.65rem 1.1rem;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #123b64 !important;
	font-size: 16px;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 5px 14px rgba(31, 51, 67, 0.12);
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.sh-answer:is(:hover, :focus-visible):not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(31, 51, 67, 0.16);
}
.sh-answer:disabled {
	cursor: default;
}
.sh-answer.is-correct {
	background: #607b3a !important;
	color: #fffdf8 !important;
}
.sh-answer.is-wrong {
	background: #f04d23 !important;
	color: #fffdf8 !important;
}

/* Header cart counter: a quiet dot, not a red alarm. */
html .header-cart-total,
html .header-cart-button .header-cart-total {
	background: var(--sh-tint) !important;
	color: var(--sh-tint-ink) !important;
	font-weight: var(--sh-weight-strong) !important;
}

/* ---------- Shapes: round, soft, no hard edges ---------- */
.entry-content :is(.wp-block-image img, figure img),
.wp-block-cover,
.wp-block-group.has-background,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product div.images img {
	border-radius: var(--sh-radius) !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	box-shadow: var(--sh-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--sh-shadow-hover);
	transform: translateY(-2px);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
	border-radius: var(--sh-radius-sm) !important;
	border-color: var(--sh-line) !important;
}

/* ---------- Homepage v2 tokens (CSS lives in the Customizer) ---------- */
.homepage--v2 {
	--color-primary: var(--sh-ink);
	--color-text: var(--sh-ink);
	--color-text-body: var(--sh-text);
	--color-text-muted: var(--sh-text-muted);
	--color-accent: var(--sh-accent);
	--color-accent-hover: var(--sh-accent-hover);
	--font-weight-regular: 400;
	--font-weight-semibold: 400;
	--font-weight-bold: 400;
	--font-weight-extrabold: 400;
	--radius-sm: 16px;
	--radius-md: 24px;
	--radius-lg: 32px;
	--shadow-sm: 0 6px 20px rgba(31, 69, 104, 0.06);
	--shadow-md: 0 10px 32px rgba(31, 69, 104, 0.08);
	--shadow-button: 0 6px 18px rgba(240, 77, 35, 0.18);
	font-weight: 400;
}
.homepage--v2 .homepage__btn {
	font-weight: var(--sh-weight-heading) !important;
}

/* Hero: the sunny colour grade is baked into assets/images/home/hero-reel.mp4,
 * so nothing filters the page. The copy panel is see-through: the video stays
 * visible under it, with only a light blur so the text keeps its contrast. */
.homepage__scene .homepage__hero-copy {
	background: rgba(255, 253, 248, 0.42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 10px 28px rgba(18, 40, 70, 0.1);
}

/* «Нашите карти» panel: title, count, text and list sit close together. */
html .homepage__cards-panel-title { margin: 0 0 6px; }
html .homepage__cards-panel-count { margin: 0 0 14px; }
html .homepage__cards-panel-desc { margin: 0 0 16px; }
html .homepage__cards-includes-label { margin: 0 0 8px; }
html .homepage__cards-includes { margin: 0 0 22px; padding-left: 0; }

/* ---------- About / For parents (page CSS lives in the Customizer) ---------- */
.shturko-about,
.shturko-parents {
	font-weight: 400;
}

/* «За Щурко» hero lines up with «За родители»: same 1240px column, the last
 * line of copy and the bottom of the picture share one baseline. */
html body .shturko-about__hero-blob { display: none !important; }
@media (min-width: 860px) {
	html body .shturko-about__hero {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 40px;
		align-items: end;
		padding: 0; /* .shturko-about clears the fixed header (class-i18n.php) */
	}
	html body .shturko-about__hero-copy {
		align-self: end;
		padding-bottom: 0;
	}
	html body .shturko-about__hero-visual {
		margin-top: 0;
		min-height: 0;
		align-self: end;
	}
}
/* Philosophy cards start at the same left edge as the copy above them:
 * Kadence's .single-content ul padding (2em) pushed them in on phones. */
html body .shturko-about__pillars {
	padding: 0;
}
html body .shturko-about__lead {
	max-width: none;
	font-size: 1.12rem;
	line-height: 1.6;
	color: #2f4a63;
}
html body .shturko-about__lead:first-of-type {
	font-size: 1.25rem;
	color: var(--sh-ink);
}

/* Size of the About pair; colours and hover come from the button block above. */
html body .shturko-about__cta {
	font-weight: var(--sh-weight-heading) !important;
	font-size: 16px;
	min-height: 52px;
	padding: 15px 28px;
}

/* Quiet field and close-control states share the existing navy/paper palette.
 * Keep the opt-in high-contrast and thick-focus modes in control. */
@layer shturko-quiet-controls {
	body:not(.a11y-high-contrast):not(.a11y-focus-thick)
	:is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select):focus {
		border-color: var(--sh-ink, #1f4568) !important;
		box-shadow: 0 0 0 3px rgba(31, 69, 104, 0.08) !important;
		outline: 1px solid var(--sh-ink, #1f4568) !important;
		outline-offset: 2px !important;
	}

	body:not(.a11y-high-contrast)
	:is(button[class*="close"], a[class*="close"], [role="button"][class*="close"], .mfp-close, .modal-close, .drawer-close, .menu-toggle-close, .woocommerce a.remove) {
		color: var(--sh-ink, #1f4568) !important;
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		transition: background-color 160ms ease !important;
	}

	body:not(.a11y-high-contrast)
	:is(button[class*="close"], a[class*="close"], [role="button"][class*="close"], .mfp-close, .modal-close, .drawer-close, .menu-toggle-close, .woocommerce a.remove):is(:hover, :focus-visible) {
		background: rgba(31, 69, 104, 0.07) !important;
	}
}


/* ---------- My account: orders list and notices ----------
   Calm blue instead of the orange; buttons are small soft-grey pills like the
   header's Жестове / Логопед, so they don't shout. */
html .woocommerce-account {
	--sh-acc-blue: #3d7ccc;
	--sh-acc-blue-tint: #eef4fb;
}
html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) {
	background: var(--sh-acc-blue-tint) !important;
	color: var(--sh-ink) !important;
	border: 0 !important;
	border-left: 4px solid var(--sh-acc-blue) !important;
	border-radius: var(--sh-radius-sm) !important;
}
html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice)::before {
	color: var(--sh-acc-blue) !important;
}
html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) :is(a.button, .button),
html .woocommerce-account .woocommerce-orders-table a.button,
html .woocommerce-account .woocommerce-MyAccount-content table a.button {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 0 !important;
	padding: 8px 18px !important;
	border: 1px solid rgba(31, 69, 104, 0.14) !important;
	border-radius: 999px !important;
	background: #eef1f4 !important;
	background-image: none !important;
	color: var(--sh-ink) !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transform: none !important;
}
html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) :is(a.button, .button):is(:hover, :focus-visible),
html .woocommerce-account .woocommerce-orders-table a.button:is(:hover, :focus-visible),
html .woocommerce-account .woocommerce-MyAccount-content table a.button:is(:hover, :focus-visible) {
	background: #e2e7ec !important;
	color: var(--sh-ink) !important;
	transform: none !important;
	box-shadow: none !important;
}
html .woocommerce-account .woocommerce-orders-table :is(th, td) {
	padding-top: 0.7rem !important;
	padding-bottom: 0.7rem !important;
	vertical-align: middle !important;
}

/* Order view → "Допълнителна информация" (checkout opt-ins): one compact row per
   question, answer on the right, in a card like the address box above it. */
html .woocommerce-account .wc-block-order-confirmation-additional-fields-wrapper {
	margin-top: 2.5rem !important;
}
html .woocommerce-account .wc-block-order-confirmation-additional-fields-wrapper h2 {
	margin: 0 0 0.85rem !important;
}
html .woocommerce-account .wc-block-components-additional-fields-list {
	display: grid !important;
	grid-template-columns: 1fr auto;
	margin: 0 !important;
	padding: 0.35rem 1.1rem !important;
	border: 1px solid var(--sh-line) !important;
	border-radius: var(--sh-radius-sm) !important;
	background: #fff;
}
html .woocommerce-account .wc-block-components-additional-fields-list :is(dt, dd) {
	margin: 0 !important;
	padding: 0.6rem 0 !important;
	border-bottom: 1px solid var(--sh-line);
	line-height: 1.4;
}
html .woocommerce-account .wc-block-components-additional-fields-list dt {
	padding-right: 1rem !important;
	color: var(--sh-text);
}
html .woocommerce-account .wc-block-components-additional-fields-list dd {
	color: var(--sh-ink);
	text-align: right;
}
html .woocommerce-account .wc-block-components-additional-fields-list :is(dt:nth-last-of-type(1), dd:last-of-type) {
	border-bottom: 0;
}
@media (max-width: 560px) {
	html .woocommerce-account .wc-block-components-additional-fields-list dt {
		padding-right: 0.6rem !important;
		font-size: 0.95rem;
	}
}

html .woocommerce-account .shturko-order-subs {
	margin: 1rem 0 0 !important;
}
html .woocommerce-account .shturko-order-subs a.button {
	display: inline-flex !important;
	min-height: 0 !important;
	padding: 8px 18px !important;
	border: 1px solid rgba(31, 69, 104, 0.14) !important;
	border-radius: 999px !important;
	background: #eef1f4 !important;
	color: var(--sh-ink) !important;
	font-size: 15px !important;
	box-shadow: none !important;
}
html .woocommerce-account .shturko-order-subs a.button:is(:hover, :focus-visible) {
	background: #e2e7ec !important;
	transform: none !important;
	box-shadow: none !important;
}
/* Phones: notice text, then its button below with air; order-table and order-view buttons left-aligned. */
@media (max-width: 768px) {
	html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) {
		display: flex !important;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 0.9rem;
	}
	html .woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) :is(a.button, .button) {
		float: none !important;
		margin: 0 !important;
	}
	html .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		text-align: left !important;
		padding-top: 0.4rem !important;
		padding-bottom: 1rem !important;
	}
	html .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
		display: block !important;
		float: none !important;
		margin-bottom: 0.5rem;
	}
	html .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button {
		margin: 0 0.5rem 0.5rem 0 !important;
	}
	html .woocommerce-account .shturko-order-subs {
		margin-top: 1.25rem !important;
		text-align: left;
	}
}

/* Logout confirmation (Shturko_Account::enqueue_logout_confirm). */
dialog.sh-logout {
	width: min(22rem, 100%);
	text-align: center;
}
.sh-logout__q {
	margin: 0 0 1.2rem;
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--sh-ink);
}
.sh-logout__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.sh-logout__actions .sh-btn {
	min-height: 46px;
	padding: 12px 24px;
}

/* Mobile steps: keep the complete scene in its own row below the copy. */
@media (max-width: 700px) {
	html .homepage__steps {
		height: auto;
		min-height: 0;
		max-height: none;
		padding-bottom: 0;
	}
	html .homepage__steps-list {
		flex: 0 0 auto;
	}
	html .homepage__steps-scene {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		height: auto;
		margin: 1.5rem 0 0;
	}
	html .homepage__steps-scene-img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* Homepage: use the same icon and text alignment for all four mobile about cards. */
@media (max-width: 640px) {
	html .homepage__about-col .homepage__about-card {
		margin-left: 0;
		margin-right: auto;
		flex-direction: row;
		text-align: left;
	}
	html .homepage__about-col .homepage__about-title,
	html .homepage__about-col .homepage__about-text {
		text-align: left;
	}
}