/**
 * assets/css/main.css
 *
 * Main structural + component stylesheet for the SGCB theme.
 * BEM naming with the `sgcb-` prefix throughout, matching the classes
 * already output by header.php, footer.php, front-page.php, the
 * template-parts/ partials, and the woocommerce/ template overrides.
 *
 * Enqueued as the `sgcb-main` handle by functions.php's
 * sgcb_enqueue_assets(), depending on `sgcb-style` (style.css's resets).
 *
 * Mobile-first: base rules target small screens, @media (min-width: 960px)
 * blocks layer on the desktop layout. 960px matches assets/js/mega-menu.js's
 * and assets/js/filters.js's MOBILE_BREAKPOINT constant exactly.
 *
 * @package sgcb
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand colors — derived from the SGCB logo (deep royal blue). */
	--sgcb-color-primary: #1a2f8f;
	--sgcb-color-primary-dark: #101f66;
	--sgcb-color-primary-light: #e8ebfa;

	/* WhatsApp CTA uses WhatsApp's own brand green so the button reads
	   instantly as "this opens WhatsApp" — deliberately not the site's
	   primary blue. */
	--sgcb-color-whatsapp: #25d366;
	--sgcb-color-whatsapp-dark: #1da851;

	/* Badges */
	--sgcb-color-badge-bestseller: #e0762a;
	--sgcb-color-badge-new: #1a8f6b;
	--sgcb-color-badge-sale: var(--sgcb-color-primary);

	/* Neutrals */
	--sgcb-color-text: #1a1a1e;
	--sgcb-color-text-muted: #6b7280;
	--sgcb-color-border: #e3e5ea;
	--sgcb-color-bg: #ffffff;
	--sgcb-color-bg-alt: #f6f7fb;
	--sgcb-color-bg-dark: #0e1530;

	/* Typography — Unbounded (headings) is a bold, geometric display face
	   for a brutalist edge; Manrope (body/UI) is a clean, highly-legible
	   grotesque so long Cyrillic copy, specs, and buttons stay easy to
	   read. Both are loaded via sgcb_enqueue_assets() in functions.php
	   and support Cyrillic. Each stack falls back to the body stack, then
	   to the system font stack from style.css if webfonts fail to load. */
	--sgcb-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--sgcb-font-heading: "Unbounded", var(--sgcb-font-body);

	/* Layout */
	--sgcb-container-width: 1280px;
	--sgcb-container-pad: 16px;
	--sgcb-radius: 10px;
	--sgcb-radius-sm: 6px;
	--sgcb-header-height: 72px;
	--sgcb-shadow: 0 2px 10px rgba(20, 25, 60, 0.06);
	--sgcb-shadow-md: 0 8px 24px rgba(20, 25, 60, 0.12);
	--sgcb-transition: 0.2s ease;

	/* Motion — added for the Step "polish" pass (hover/scroll micro-
	   interactions). --sgcb-transition (above) is untouched/still used
	   as-is everywhere it already was; these are additive. */
	--sgcb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sgcb-transition-fast: 0.15s var(--sgcb-ease-out);
	--sgcb-transition-slow: 0.25s var(--sgcb-ease-out);
	--sgcb-reveal-distance: 18px;
}

/* Respect the OS-level "reduce motion" setting sitewide: every transition,
   animation, and smooth-scroll this theme defines collapses to an instant
   (or near-instant) state change. Individual rules below don't need their
   own reduced-motion overrides as a result — this one block covers all of
   them, including ones added by later sections of this file. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	.sgcb-home-hero__track {
		scroll-behavior: auto;
	}
}

@media (min-width: 960px) {
	:root {
		--sgcb-container-pad: 32px;
		--sgcb-header-height: 88px;
	}
}

/* ==========================================================================
   2. Layout shell & utilities
   ========================================================================== */

.sgcb-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.sgcb-site__content {
	flex: 1 0 auto;
}

.sgcb-site__main,
.sgcb-catalog,
.sgcb-page {
	max-width: var(--sgcb-container-width);
	margin: 0 auto;
	padding: 24px var(--sgcb-container-pad) 64px;
}

/* Section width helper reused by homepage sections. */
.sgcb-home-section {
	max-width: var(--sgcb-container-width);
	margin: 0 auto;
	padding: 40px var(--sgcb-container-pad);
}

.sgcb-u-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--sgcb-color-primary);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--sgcb-radius-sm) 0;
}

.sgcb-u-skip-link:focus {
	left: 0;
}

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

.sgcb-u-hidden {
	display: none !important;
}

.sgcb-u-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--sgcb-radius-sm);
	background: var(--sgcb-color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: background var(--sgcb-transition), transform var(--sgcb-transition);
	border: none;
}

.sgcb-u-button:hover {
	background: var(--sgcb-color-primary-dark);
}

.sgcb-u-button:active {
	transform: scale(0.97);
}

.sgcb-u-button--whatsapp {
	background: var(--sgcb-color-whatsapp);
}

.sgcb-u-button--whatsapp:hover {
	background: var(--sgcb-color-whatsapp-dark);
}

/* Loading state — toggled by JS on buttons mid-submit (e.g. a form
   elsewhere in the theme). Hides the label without removing it from the
   DOM (so screen readers waiting on the click aren't left with empty
   text) and shows a spinner instead. */
.sgcb-u-button.is-loading {
	color: transparent;
	pointer-events: none;
	position: relative;
}

.sgcb-u-button.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sgcb-spin 0.6s linear infinite;
}

@keyframes sgcb-spin {
	to {
		transform: rotate(360deg);
	}
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sgcb-color-text);
	font-family: var(--sgcb-font-heading);
	line-height: 1.15;
	font-weight: 700;
	/* Unbounded is a wide, geometric display face — a touch of negative
	   tracking keeps larger sizes (page titles, hero headline) from
	   feeling loose, without affecting small in-content h3/h4s where it
	   isn't needed. */
	letter-spacing: -0.01em;
	/* Cyrillic body copy runs ~10-15% longer than English; balanced
	   wrapping keeps 2-3 word headings from breaking 1-word-per-line.
	   Progressive enhancement only — unsupported browsers just keep the
	   normal wrap they already had. */
	text-wrap: balance;
}

body {
	color: var(--sgcb-color-text);
	background: var(--sgcb-color-bg);
	font-family: var(--sgcb-font-body);
}

/* Consistent keyboard-focus ring. Nothing in this theme removes the
   browser default outline (verified — no `outline: none` anywhere in
   these stylesheets), so this is a visual upgrade over the default ring,
   not a replacement for a stripped one. Uses :focus-visible so mouse/touch
   clicks don't show a ring, only keyboard/assistive-tech focus does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sgcb-color-primary);
	outline-offset: 2px;
	border-radius: var(--sgcb-radius-sm);
}

/* ==========================================================================
   3. Header & mega-menu
   ========================================================================== */

.sgcb-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--sgcb-color-border);
	transition: transform var(--sgcb-transition-slow), box-shadow var(--sgcb-transition-slow);
}

/* Toggled by assets/js/main.js on scroll direction — see initStickyHeader().
   translateY (not display/visibility) so the transition animates and
   `position: sticky` keeps working (transform doesn't affect sticky's own
   offset calculation, only the element's paint position). */
.sgcb-header--hidden {
	transform: translateY(-100%);
}

.sgcb-header--scrolled {
	box-shadow: var(--sgcb-shadow);
}

.sgcb-header__inner {
	max-width: var(--sgcb-container-width);
	margin: 0 auto;
	padding: 10px var(--sgcb-container-pad);
	min-height: var(--sgcb-header-height);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.sgcb-header__branding {
	order: 2;
	flex: 0 0 auto;
}

.sgcb-header__logo img {
	max-height: calc(var(--sgcb-header-height) - 24px);
	width: auto;
}

.sgcb-header__site-title {
	font-family: var(--sgcb-font-heading);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sgcb-color-primary);
}

/* --- Search --- */

.sgcb-header__search {
	order: 5;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	height: 42px;
	background: var(--sgcb-color-bg-alt);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 999px;
	padding: 0 6px 0 16px;
}

.sgcb-header__search-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--sgcb-color-text-muted);
	margin-right: 8px;
}

.sgcb-header__search-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sgcb-header__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: 14px;
	height: 100%;
	color: var(--sgcb-color-text);
}

.sgcb-header__search-input:focus {
	outline: none;
}

.sgcb-header__search-input::placeholder {
	color: var(--sgcb-color-text-muted);
}

.sgcb-header__search-submit {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sgcb-color-primary);
	color: #fff;
	transition: background var(--sgcb-transition);
}

.sgcb-header__search-submit svg {
	width: 16px;
	height: 16px;
}

.sgcb-header__search-submit:hover {
	background: var(--sgcb-color-primary-dark);
}

/* --- Account / cart actions --- */

.sgcb-header__actions {
	order: 3;
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.sgcb-header__action {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sgcb-color-text);
	white-space: nowrap;
}

.sgcb-header__action-icon {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.sgcb-header__action-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sgcb-header__cart-count {
	display: none;
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--sgcb-color-badge-bestseller);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	font-weight: 700;
	text-align: center;
}

.sgcb-header__cart-count.is-visible {
	display: block;
}

.sgcb-header__action-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sgcb-header__action-label {
	font-size: 13px;
	font-weight: 700;
}

.sgcb-header__action-sub {
	font-size: 12px;
	color: var(--sgcb-color-text-muted);
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 700px) {
	.sgcb-header__search {
		order: 3;
		flex: 1 1 auto;
		max-width: 480px;
		margin: 0 8px;
	}

	.sgcb-header__actions {
		order: 4;
	}
}

@media (max-width: 480px) {
	.sgcb-header__action-text {
		display: none;
	}

	.sgcb-header__actions {
		gap: 14px;
	}
}

/* Hamburger toggle (mobile only). */
.sgcb-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	z-index: 210;
}

.sgcb-nav-toggle__box {
	position: relative;
	width: 24px;
	height: 18px;
	display: block;
}

.sgcb-nav-toggle__bar,
.sgcb-nav-toggle__box::before,
.sgcb-nav-toggle__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--sgcb-color-text);
	transition: transform var(--sgcb-transition), opacity var(--sgcb-transition);
}

.sgcb-nav-toggle__bar {
	top: 8px;
}

.sgcb-nav-toggle__box::before {
	top: 0;
}

.sgcb-nav-toggle__box::after {
	top: 16px;
}

.sgcb-nav-toggle[aria-expanded="true"] .sgcb-nav-toggle__bar {
	opacity: 0;
}

.sgcb-nav-toggle[aria-expanded="true"] .sgcb-nav-toggle__box::before {
	transform: translateY(8px) rotate(45deg);
}

.sgcb-nav-toggle[aria-expanded="true"] .sgcb-nav-toggle__box::after {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mega-menu — mobile: off-canvas panel sliding in from the left. */
.sgcb-mega-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 86vw);
	background: #fff;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--sgcb-transition);
	z-index: 205;
	padding: calc(var(--sgcb-header-height) + 68px) 0 32px;
	box-shadow: var(--sgcb-shadow-md);
}

@media (min-width: 700px) {
	.sgcb-mega-menu {
		/* Search no longer wraps to its own row from 700px up, so the
		   utility row goes back to its single-line height. */
		padding-top: calc(var(--sgcb-header-height) + 12px);
	}
}

.sgcb-mega-menu.is-open {
	transform: translateX(0);
}

.sgcb-mega-menu__empty {
	padding: 0 20px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-mega-menu__list {
	display: flex;
	flex-direction: column;
}

.sgcb-mega-menu__item {
	position: relative;
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-mega-menu__link {
	display: block;
	padding: 14px 20px;
	font-weight: 600;
}

.sgcb-mega-menu__toggle {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 40px;
	height: 40px;
}

.sgcb-mega-menu__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--sgcb-color-text-muted);
	border-bottom: 2px solid var(--sgcb-color-text-muted);
	transform: rotate(45deg);
	transition: transform var(--sgcb-transition);
}

.sgcb-mega-menu__item--has-panel.is-open .sgcb-mega-menu__toggle::after {
	transform: rotate(-135deg);
}

.sgcb-mega-menu__panel {
	display: none;
	background: var(--sgcb-color-bg-alt);
	padding: 4px 0 8px;
}

.sgcb-mega-menu__panel.is-open {
	display: block;
}

.sgcb-mega-menu__panel-item {
	position: relative;
}

.sgcb-mega-menu__panel-link {
	display: block;
	padding: 10px 20px 10px 32px;
	font-size: 14px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-mega-menu__panel-item--has-flyout .sgcb-mega-menu__panel-link {
	padding-right: 44px;
}

.sgcb-mega-menu__panel-link:hover {
	color: var(--sgcb-color-primary);
}

.sgcb-mega-menu__flyout-toggle {
	position: absolute;
	right: 4px;
	top: 2px;
	width: 36px;
	height: 36px;
}

.sgcb-mega-menu__flyout-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--sgcb-color-text-muted);
	border-bottom: 2px solid var(--sgcb-color-text-muted);
	transform: rotate(45deg);
	transition: transform var(--sgcb-transition);
}

.sgcb-mega-menu__panel-item--has-flyout.is-open .sgcb-mega-menu__flyout-toggle::after {
	transform: rotate(-135deg);
}

.sgcb-mega-menu__flyout {
	display: none;
	padding: 0 0 4px;
}

.sgcb-mega-menu__flyout.is-open {
	display: block;
}

.sgcb-mega-menu__flyout-link {
	display: block;
	padding: 8px 20px 8px 44px;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-mega-menu__flyout-link:hover {
	color: var(--sgcb-color-primary);
}

.sgcb-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 35, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sgcb-transition);
	/* Must stay BELOW .sgcb-header's z-index (200): .sgcb-mega-menu lives
	   inside <header>, so header's stacking context — not the mega-menu's
	   own z-index: 205 — decides where it paints relative to this overlay.
	   With this above 200, the overlay used to render on top of the open
	   mobile menu and intercept every tap meant for its links/toggles. */
	z-index: 190;
}

.sgcb-nav-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

body.sgcb-nav-open {
	overflow: hidden;
}

@media (min-width: 960px) {
	.sgcb-nav-toggle {
		display: none;
	}

	.sgcb-mega-menu {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		box-shadow: none;
		overflow: visible;
		padding: 0;
		background: none;
	}

	.sgcb-mega-menu__list {
		flex-direction: row;
		justify-content: center;
		gap: 4px;
	}

	.sgcb-mega-menu__item {
		border-bottom: none;
	}

	.sgcb-mega-menu__link {
		padding: 10px 14px;
		border-radius: var(--sgcb-radius-sm);
	}

	.sgcb-mega-menu__item:hover .sgcb-mega-menu__link,
	.sgcb-mega-menu__item:focus-within .sgcb-mega-menu__link {
		background: var(--sgcb-color-primary-light);
		color: var(--sgcb-color-primary);
	}

	.sgcb-mega-menu__toggle {
		display: none;
	}

	.sgcb-mega-menu__panel {
		display: block;
		position: absolute;
		left: 0;
		right: auto;
		top: 100%;
		width: max-content;
		min-width: 220px;
		max-width: min(320px, calc(100vw - 2 * var(--sgcb-container-pad)));
		background: #fff;
		box-shadow: var(--sgcb-shadow-md);
		border-radius: 0 0 var(--sgcb-radius) var(--sgcb-radius);
		padding: 8px 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--sgcb-transition), transform var(--sgcb-transition);
		z-index: 206;
	}

	.sgcb-mega-menu__item:hover .sgcb-mega-menu__panel,
	.sgcb-mega-menu__item:focus-within .sgcb-mega-menu__panel {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	.sgcb-mega-menu__panel-link {
		padding: 8px 24px;
		text-align: left;
	}

	.sgcb-mega-menu__panel-link:hover {
		background: var(--sgcb-color-bg-alt);
	}

	.sgcb-mega-menu__panel-item--has-flyout .sgcb-mega-menu__panel-link {
		padding-right: 16px;
	}

	.sgcb-mega-menu__panel-item--has-flyout > .sgcb-mega-menu__panel-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.sgcb-mega-menu__panel-item--has-flyout > .sgcb-mega-menu__panel-link::after {
		content: "";
		flex: 0 0 auto;
		width: 6px;
		height: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		opacity: 0.55;
		transform: rotate(-45deg);
	}

	.sgcb-mega-menu__flyout-toggle {
		display: none;
	}

	/* Side flyout: a 3rd-level submenu (e.g. Продукты → Экстерьер → Мойка)
	   that opens beside its panel item rather than stacking below it. */
	.sgcb-mega-menu__flyout {
		display: block;
		position: absolute;
		left: 100%;
		top: -8px;
		min-width: 220px;
		max-width: 280px;
		background: #fff;
		box-shadow: var(--sgcb-shadow-md);
		border-radius: var(--sgcb-radius-sm);
		padding: 8px 0;
		visibility: hidden;
		opacity: 0;
		transform: translateX(4px);
		transition: opacity var(--sgcb-transition), transform var(--sgcb-transition);
		z-index: 207;
	}

	.sgcb-mega-menu__panel-item--has-flyout:hover .sgcb-mega-menu__flyout,
	.sgcb-mega-menu__panel-item--has-flyout:focus-within .sgcb-mega-menu__flyout {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}

	.sgcb-mega-menu__flyout-link {
		padding: 7px 18px;
		break-inside: avoid;
		white-space: nowrap;
	}

	.sgcb-nav-overlay {
		display: none;
	}
}

/* Nav row — wraps the mega-menu <nav> below the utility row. On mobile the
   nav itself is the existing off-canvas panel (position: fixed, see above),
   so this wrapper has no visible bar of its own there — but it must NOT be
   display: none, since that would hide the fixed-position mega-menu nested
   inside it too (a display: none ancestor hides fixed-position descendants
   regardless of their own position/transform). Left as a normal, contentless
   block on mobile so the off-canvas panel can still show through. */
.sgcb-header__nav-row {
	display: block;
}

@media (min-width: 960px) {
	.sgcb-header__nav-row {
		background: var(--sgcb-color-bg-alt);
		border-top: 1px solid var(--sgcb-color-border);
	}

	.sgcb-header__nav-row .sgcb-mega-menu {
		max-width: var(--sgcb-container-width);
		margin: 0 auto;
		padding: 0 var(--sgcb-container-pad);
	}
}

/* ==========================================================================
   4. Floating WhatsApp button
   ========================================================================== */

.sgcb-whatsapp-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sgcb-color-whatsapp);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sgcb-shadow-md);
	z-index: 150;
	transition: transform var(--sgcb-transition);
}

.sgcb-whatsapp-float:hover {
	transform: scale(1.06);
}

@media (max-width: 767px) {
	.sgcb-whatsapp-float {
		right: 12px;
		bottom: 12px;
		width: 48px;
		height: 48px;
	}

	.sgcb-whatsapp-float__icon svg {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   5. Homepage sections
   ========================================================================== */

.sgcb-home-section__heading {
	font-size: 22px;
	margin-bottom: 20px;
}

.sgcb-home-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.sgcb-home-section__header .sgcb-home-section__heading {
	margin-bottom: 0;
}

/* --- Hero carousel (pure-CSS scroll-snap) --- */

.sgcb-home-intro-heading {
	max-width: var(--sgcb-container-width);
	margin: 12px auto 0;
	padding: 0 var(--sgcb-container-pad);
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: var(--sgcb-color-text);
}

@media (min-width: 960px) {
	.sgcb-home-intro-heading {
		font-size: 34px;
	}
}

.sgcb-home-hero {
	position: relative;
	padding-top: 24px;
}

/* .sgcb-home-hero--has-dots is added by assets/js/main.js's initHeroDots()
   only when there are 2+ banners (a single banner needs no orientation UI).
   Extra bottom padding keeps the dot row from crowding the button, since
   both sit at the bottom edge (.sgcb-home-hero__content is absolutely
   positioned against the slide's bottom edge). */
.sgcb-home-hero--has-dots .sgcb-home-hero__content {
	padding-bottom: 36px;
}

.sgcb-home-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	border-radius: var(--sgcb-radius);
	scrollbar-width: none;
}

.sgcb-home-hero__track::-webkit-scrollbar {
	display: none;
}

.sgcb-home-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	border-radius: var(--sgcb-radius);
	overflow: hidden;
	background: var(--sgcb-color-bg-dark);
}

.sgcb-home-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

.sgcb-home-hero__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 10, 30, 0.75) 0%, rgba(6, 10, 30, 0.1) 60%);
}

.sgcb-home-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	color: #fff;
	padding: 24px;
	max-width: 560px;
}

.sgcb-home-hero__headline {
	font-size: 24px;
	color: #fff;
	margin-bottom: 8px;
}

.sgcb-home-hero__subtext {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 16px;
}

/* .sgcb-home-hero__subtext renders a <p> for banner slides (plain text
   field) but a wpautop()'d <div> for promotion slides (post_content can
   have multiple paragraphs) — see hero-banners.php. Reset spacing on the
   inner <p> tags for the promo case so it matches the banner case's single
   margin-bottom. */
.sgcb-home-hero__subtext p {
	margin: 0 0 8px;
}

.sgcb-home-hero__subtext p:last-child {
	margin-bottom: 0;
}

/* Promotion badge (e.g. "-20%") on merged `promotion`-CPT slides — only
   rendered when promotion_badge_text is set (see hero-banners.php), same
   orange used by the catalog's "Хит продаж" badge so it still reads as a
   promo/discount callout at a glance. */
.sgcb-home-hero__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 6px 12px;
	border-radius: var(--sgcb-radius-sm);
	color: #fff;
	background: var(--sgcb-color-badge-bestseller);
}

@media (min-width: 960px) {
	.sgcb-home-hero__headline {
		font-size: 34px;
	}
}

/* Slide orientation dots — elements are created by main.js's initHeroDots()
   (only for 2+ banners; a single banner gets none), appended to
   .sgcb-home-hero itself so they overlay every slide identically. The dots
   only *indicate* position: clicking one scrolls the existing scroll-snap
   track via scrollIntoView() rather than introducing a second, JS-driven
   sliding mechanism alongside it. */
.sgcb-home-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
}

.sgcb-home-hero__dot {
	/* 24x24 is the real (invisible) tap target — sized for touch
	   accessibility. The visible dot itself is the smaller ::after below,
	   centered inside it. (Previously relied on background-clip: content-box
	   to shrink the visible paint area within a padded box, but that clip
	   doesn't render reliably across browsers — it was painting the full
	   24px box instead of just the intended 8px dot.) */
	width: 24px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
}

.sgcb-home-hero__dot::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transition: width var(--sgcb-transition-fast), border-radius var(--sgcb-transition-fast), background var(--sgcb-transition-fast);
}

.sgcb-home-hero__dot.is-active::after {
	width: 22px;
	border-radius: 4px;
	background: #fff;
}

/* --- Hero row: banner carousel (left) + "Товар дня" widget (right) ---
   Stacked full-width on mobile, side by side from 960px up. Grid instead of
   flex here on purpose: with flex, the banner column kept losing its grow
   space back to the deal widget somewhere in the nested
   carousel > viewport > track > slide > image chain (an image's intrinsic
   size can win out over flex-grow in stacked flex containers). Grid's
   explicit column tracks (1fr for the banner, a hard 300px for the widget)
   aren't negotiable the same way, so this is the more robust fix. If
   deal-of-day.php renders nothing (no product flagged), the carousel
   column is the row's only child and CSS Grid still gives it the full
   row width. */
.sgcb-home-hero__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sgcb-home-hero__carousel {
	min-width: 0; /* lets the flex child shrink instead of overflowing the row */
	width: 100%;
}

@media (min-width: 960px) {
	.sgcb-home-hero__row {
		display: grid;
		grid-template-columns: 1fr 300px;
		align-items: stretch;
		gap: 20px;
	}

	.sgcb-home-hero__row:has(> .sgcb-home-hero__carousel:only-child) {
		grid-template-columns: 1fr;
	}

	.sgcb-home-hero__carousel {
		min-width: 0;
	}

	.sgcb-deal {
		width: 100%;
		min-width: 0;
	}
}

.sgcb-home-hero__viewport {
	position: relative;
	width: 100%;
}

/* Without an explicit width the flex chain above can still collapse to the
   banner image's intrinsic size instead of stretching — min-width:0 alone
   doesn't fully solve shrink-to-fit across nested flex/scroll containers. */
.sgcb-home-hero__track {
	width: 100%;
}

.sgcb-home-hero__slide {
	width: 100%;
}

/* Prev/next arrows for the banner track — click scrolls the existing
   scroll-snap track by one slide width, same "no second slider" approach
   the dots (above) already use. Only rendered in PHP when there are 2+
   banners (see hero-banners.php). */
.sgcb-home-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--sgcb-color-text);
	border: none;
	box-shadow: var(--sgcb-shadow);
	cursor: pointer;
	transition: background var(--sgcb-transition-fast), transform var(--sgcb-transition-fast);
}

.sgcb-home-hero__arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.sgcb-home-hero__arrow svg {
	width: 20px;
	height: 20px;
}

.sgcb-home-hero__arrow--prev {
	left: 12px;
}

.sgcb-home-hero__arrow--next {
	right: 12px;
}

@media (min-width: 960px) {
	.sgcb-home-hero__arrow {
		width: 44px;
		height: 44px;
	}
}

/* --- "Товар дня" widget (template-parts/homepage/deal-of-day.php) ---
   A card matching the hero banner's height rhythm, with its own small
   scroll-snap track (one product per "page") auto-advanced every 4s by
   assets/js/main.js's initDealOfDay() and swipeable/scrollable manually,
   same pure-CSS-track approach as the hero banner and product rows. */
.sgcb-deal {
	display: flex;
	flex-direction: column;
	background: var(--sgcb-color-bg);
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
	box-shadow: var(--sgcb-shadow);
	padding: 16px;
}

.sgcb-deal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.sgcb-deal__title {
	font-size: 16px;
	margin: 0;
}

/* Counts down to local midnight (visitor's own clock, recalculated by JS)
   — a "today's pick" indicator, not a per-product deadline. */
.sgcb-deal__countdown {
	display: inline-flex;
	align-items: center;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
	padding: 4px 9px;
	border-radius: var(--sgcb-radius-sm);
	white-space: nowrap;
}

.sgcb-deal__viewport {
	position: relative;
	flex: 1;
	display: flex;
}

.sgcb-deal__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	width: 100%;
}

.sgcb-deal__track::-webkit-scrollbar {
	display: none;
}

.sgcb-deal__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 4px 32px; /* clears the overlaid arrows */
}

.sgcb-deal__image {
	position: relative;
	display: block;
	width: 100%;
	max-width: 170px;
}

.sgcb-deal__thumb {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sgcb-radius-sm);
}

.sgcb-deal__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--sgcb-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sgcb-deal__price {
	font-size: 17px;
	font-weight: 700;
	color: var(--sgcb-color-primary);
}

.sgcb-deal__price--on-request {
	font-size: 13px;
	font-weight: 600;
	color: var(--sgcb-color-text-muted);
}

.sgcb-deal__cart-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 180px;
	padding: 10px 12px;
	border-radius: var(--sgcb-radius-sm);
	background: var(--sgcb-color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background var(--sgcb-transition-fast), transform var(--sgcb-transition-fast);
}

.sgcb-deal__cart-btn:hover {
	background: var(--sgcb-color-primary-dark);
}

.sgcb-deal__cart-btn:active {
	transform: scale(0.98);
}

.sgcb-deal__cart-btn.is-added {
	background: var(--sgcb-color-whatsapp);
}

.sgcb-deal__cart-btn-label--added {
	display: none;
}

.sgcb-deal__cart-btn.is-added .sgcb-deal__cart-btn-label--default {
	display: none;
}

.sgcb-deal__cart-btn.is-added .sgcb-deal__cart-btn-label--added {
	display: inline;
}

.sgcb-deal__out-of-stock {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-deal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sgcb-color-bg-alt);
	color: var(--sgcb-color-text);
	border: none;
	cursor: pointer;
	transition: background var(--sgcb-transition-fast);
}

.sgcb-deal__arrow:hover {
	background: var(--sgcb-color-primary-light);
	color: var(--sgcb-color-primary-dark);
}

.sgcb-deal__arrow svg {
	width: 16px;
	height: 16px;
}

.sgcb-deal__arrow--prev {
	left: -2px;
}

.sgcb-deal__arrow--next {
	right: -2px;
}

/* --- Mobile-only compaction: hero banner + "Товар дня" widget ---
   Client request: shrink the hero row's footprint on phones, make the
   "Подробнее"/"В Корзину" buttons and the promo headline ("Акция") text a
   little smaller, and let the banner carousel run edge-to-edge with no
   side gutter. Scoped to <960px only — desktop/tablet layout (the
   1fr/300px grid a bit further up) is untouched. */
@media (max-width: 959px) {
	.sgcb-home-hero {
		padding-top: 16px;
		padding-left: 0;
		padding-right: 0;
	}

	.sgcb-home-hero__row {
		gap: 12px;
	}

	/* Deal widget keeps the page's normal side margin (it's a bordered
	   card, not a full-bleed banner); the carousel below gets none. */
	.sgcb-deal {
		margin-left: var(--sgcb-container-pad);
		margin-right: var(--sgcb-container-pad);
		padding: 12px;
	}

	/* Cap the banner image's height so the slide takes up less vertical
	   space instead of following the source image's own (tall) ratio. */
	.sgcb-home-hero__image img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.sgcb-home-hero__content {
		padding: 16px;
	}

	/* Promo/banner headline (e.g. "Акция") — was 24px. */
	.sgcb-home-hero__headline {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.sgcb-home-hero__subtext {
		font-size: 13px;
		margin-bottom: 10px;
	}

	.sgcb-home-hero__badge {
		font-size: 11px;
		padding: 4px 9px;
		top: 12px;
		left: 12px;
	}

	/* "Подробнее" button on the banner slide — smaller than the shared
	   .sgcb-u-button default, mobile only. */
	.sgcb-home-hero__button {
		padding: 8px 16px;
		font-size: 13px;
	}

	.sgcb-deal__header {
		margin-bottom: 8px;
	}

	.sgcb-deal__title {
		font-size: 14px;
	}

	.sgcb-deal__countdown {
		font-size: 12px;
		padding: 3px 8px;
	}

	.sgcb-deal__slide {
		gap: 6px;
		padding: 4px 26px;
	}

	.sgcb-deal__image {
		max-width: 120px;
	}

	.sgcb-deal__name {
		font-size: 13px;
	}

	.sgcb-deal__price {
		font-size: 15px;
	}

	/* "В Корзину" button — smaller than the shared .sgcb-u-button-style
	   default, mobile only. */
	.sgcb-deal__cart-btn {
		padding: 8px 10px;
		font-size: 12px;
		max-width: 150px;
	}
}

/* --- Category shortcuts --- */

.sgcb-home-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.sgcb-home-categories__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding: 16px 8px;
	border-radius: var(--sgcb-radius);
	background: var(--sgcb-color-bg-alt);
	transition: background var(--sgcb-transition-fast), transform var(--sgcb-transition-fast), box-shadow var(--sgcb-transition-fast);
}

.sgcb-home-categories__link:hover {
	background: var(--sgcb-color-primary-light);
	transform: translateY(-2px);
	box-shadow: var(--sgcb-shadow);
}

.sgcb-home-categories__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	transition: transform var(--sgcb-transition-fast);
}

.sgcb-home-categories__link:hover .sgcb-home-categories__icon {
	transform: scale(1.05);
}

.sgcb-home-categories__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgcb-home-categories__label {
	font-size: 13px;
	font-weight: 600;
}

@media (min-width: 600px) {
	.sgcb-home-categories__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.sgcb-home-categories__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* --- Bestsellers / new-arrivals rows & featured category rows share the
       same product-grid pattern; grid item styling itself lives in
       woocommerce.css since it targets WooCommerce's own `.products`/
       `li.product` (or, once built, .sgcb-product-card). --- */

.sgcb-home-badge-row,
.sgcb-home-category-row {
	margin-bottom: 40px;
}

/* The section itself (.sgcb-home-section) already contributes 40px of
   bottom padding — without this, the last row's own margin stacked on top
   of that, doubling the gap before the next section vs. every other
   section-to-section transition on the page. */
.sgcb-home-badge-row:last-child,
.sgcb-home-category-row:last-child {
	margin-bottom: 0;
}

.sgcb-home-badge-row__heading {
	font-size: 20px;
	margin-bottom: 16px;
}

.sgcb-home-category-row__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.sgcb-home-category-row__heading {
	font-size: 20px;
}

.sgcb-home-category-row__all-link {
	font-weight: 600;
	color: var(--sgcb-color-primary);
	white-space: nowrap;
}

/* Dot pagination for the horizontally-scrolling rows above — elements are
   built by main.js's initRowCarousels() (only when a row overflows its
   own width into 2+ screens), inserted right after the .products track it
   controls. Same "active dot stretches into a pill" language as the hero
   banner's dots (.sgcb-home-hero__dot), recolored for a white background. */
.sgcb-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
}

.sgcb-carousel-dots__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sgcb-color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width var(--sgcb-transition-fast), border-radius var(--sgcb-transition-fast), background var(--sgcb-transition-fast);
}

.sgcb-carousel-dots__dot:hover {
	background: var(--sgcb-color-primary-light);
}

.sgcb-carousel-dots__dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: var(--sgcb-color-primary);
}

/* --- Trust block --- */

.sgcb-home-trust {
	background: var(--sgcb-color-bg-alt);
	border-radius: var(--sgcb-radius);
}

.sgcb-home-trust__intro {
	max-width: 720px;
	margin-bottom: 28px;
}

.sgcb-home-trust__text {
	color: var(--sgcb-color-text-muted);
	margin-top: 12px;
}

.sgcb-home-trust__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.sgcb-home-trust__stat {
	text-align: center;
}

.sgcb-home-trust__stat-value {
	display: block;
	font-size: 32px;
	font-weight: 800;
	color: var(--sgcb-color-primary);
	/* Fixed-width digits so the count-up animation (main.js
	   initTrustCountUp()) doesn't jitter/reflow as digit widths change. */
	font-variant-numeric: tabular-nums;
}

.sgcb-home-trust__stat-label {
	display: block;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
	margin-top: 4px;
}

/* --- Homepage "Где нас найти" (template-parts/homepage/location-map.php) ---
   Reuses the Контакты page's .sgcb-contact-info__map / .sgcb-map /
   .sgcb-contact-info__map-link* rules as-is (same map, same custom pin);
   this is only the section-level wrapper + address caption. */

.sgcb-home-map__address {
	color: var(--sgcb-color-text-muted);
	margin: 0 0 20px;
}

@media (min-width: 960px) {
	.sgcb-home-trust__stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- News teaser --- */

.sgcb-home-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sgcb-home-news__all-link {
	font-weight: 600;
	color: var(--sgcb-color-primary);
	white-space: nowrap;
}

.sgcb-home-news__card-link {
	display: block;
}

.sgcb-home-news__card-image {
	border-radius: var(--sgcb-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-bottom: 12px;
}

.sgcb-home-news__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sgcb-transition-fast);
}

/* Matches the product-card image zoom (woocommerce.css) — same scale,
   same easing, so hovering any card on the homepage feels consistent. */
.sgcb-home-news__card-link:hover .sgcb-home-news__card-image img {
	transform: scale(1.05);
}

.sgcb-home-news__card-date {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-home-news__card-title {
	font-size: 17px;
	margin: 6px 0;
}

.sgcb-home-news__card-excerpt {
	font-size: 14px;
	color: var(--sgcb-color-text-muted);
}

@media (min-width: 700px) {
	.sgcb-home-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.sgcb-home-news__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.sgcb-footer {
	background: var(--sgcb-color-bg-dark);
	color: rgba(255, 255, 255, 0.82);
	margin-top: 48px;
}

.sgcb-footer__inner {
	max-width: var(--sgcb-container-width);
	margin: 0 auto;
	padding: 48px var(--sgcb-container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.sgcb-footer__logo img {
	max-height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}

.sgcb-footer__site-title {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.sgcb-footer__about {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

.sgcb-footer__heading {
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 16px;
}

.sgcb-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sgcb-footer__menu-link {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--sgcb-transition);
}

.sgcb-footer__menu-link:hover {
	color: #fff;
}

.sgcb-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sgcb-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}

.sgcb-footer__contact-icon {
	flex: 0 0 auto;
}

.sgcb-footer__whatsapp-link:hover,
.sgcb-footer__email-link:hover,
.sgcb-footer__phone-link:hover {
	color: #fff;
}

.sgcb-footer__social {
	display: flex;
	gap: 12px;
}

.sgcb-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--sgcb-radius-sm);
	background: rgba(255, 255, 255, 0.08);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	transition: background var(--sgcb-transition);
}

.sgcb-footer__social-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sgcb-footer__social-link:hover {
	background: rgba(255, 255, 255, 0.18);
}

.sgcb-footer__social-link--whatsapp {
	background: rgba(37, 211, 102, 0.18);
}

.sgcb-footer__social-link--whatsapp:hover {
	background: rgba(37, 211, 102, 0.3);
}

.sgcb-footer__social-link--instagram:hover .sgcb-footer__social-icon {
	color: #e1306c;
}

.sgcb-footer__social-link--whatsapp .sgcb-footer__social-icon {
	color: var(--sgcb-color-whatsapp);
}

.sgcb-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px var(--sgcb-container-pad);
}

.sgcb-footer__copyright {
	max-width: var(--sgcb-container-width);
	margin: 0 auto;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 700px) {
	.sgcb-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* ==========================================================================
   7. Breadcrumbs
   ========================================================================== */

.sgcb-breadcrumbs {
	margin-bottom: 20px;
}

.sgcb-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-breadcrumbs__item {
	/* Flex items default to min-width: auto, which lets a long unbroken
	   crumb (the current-page span especially — see .sgcb-breadcrumbs__current
	   below, which has no length limit since it's a full product title)
	   refuse to wrap and instead stretch the whole row, and the page,
	   wider than the mobile viewport. */
	min-width: 0;
}

.sgcb-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: var(--sgcb-color-border);
}

.sgcb-breadcrumbs__link:hover {
	color: var(--sgcb-color-primary);
}

.sgcb-breadcrumbs__current {
	color: var(--sgcb-color-text);
	font-weight: 600;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   8. Catalog archive (category/shop grid + filters)
   ========================================================================== */

/* The shared .sgcb-site__main/.sgcb-page container caps out at
   --sgcb-container-width (1280px) — good for text-heavy pages, but on
   wide screens it left a noticeable band of empty space on both sides
   of the product grid instead of giving the cards more room. Widened
   here for the catalog specifically rather than raising the shared
   variable, so About/Contact/FAQ etc. keep their narrower, more
   readable measure. */
@media (min-width: 1340px) {
	.sgcb-catalog {
		max-width: 1600px;
	}
}

.sgcb-catalog__header {
	margin-bottom: 16px;
}

.sgcb-catalog__title {
	font-size: 26px;
}

.sgcb-catalog__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	font-weight: 600;
	margin-bottom: 16px;
}

.sgcb-catalog__layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sgcb-catalog__filters {
	position: fixed;
	inset: 0 12% 0 0;
	background: #fff;
	z-index: 220;
	padding: 24px 20px 40px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--sgcb-transition);
}

.sgcb-catalog__filters.is-open {
	transform: translateX(0);
}

.sgcb-catalog__filter-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 35, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sgcb-transition);
	z-index: 215;
}

.sgcb-catalog__filter-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.sgcb-catalog__filter-group {
	border: none;
	padding: 0;
	margin: 0 0 24px;
}

/*
 * Nested category tree — sidebar navigation rendered by
 * woocommerce/archive-product.php's sgcb_render_category_tree(). Redesigned
 * from the original flat text-on-background list into a self-contained
 * card: a soft border + shadow lifts it off the product grid, an accent
 * underline anchors the heading, each row gets a rounded hover fill and a
 * pill-shaped count instead of plain muted text, the active category is
 * highlighted with a tinted background + left accent bar, and the +/−
 * toggle becomes a small circular button that rotates into an "×" when a
 * branch is expanded. Structure (markup, class names, expand/collapse
 * logic in filters.js) is unchanged — this is a styling-only pass.
 */
.sgcb-catalog__tree {
	margin-bottom: 28px;
	padding: 20px;
	background: var(--sgcb-color-bg);
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
	box-shadow: var(--sgcb-shadow);
}

.sgcb-catalog__filter-heading {
	position: relative;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sgcb-color-text);
	margin: 0 0 18px;
	padding-bottom: 10px;
}

.sgcb-catalog__filter-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--sgcb-color-primary);
}

.sgcb-catalog__tree-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sgcb-catalog__tree-item--has-children > .sgcb-catalog__tree-children {
	display: none;
}

.sgcb-catalog__tree-item--has-children.is-expanded > .sgcb-catalog__tree-children {
	display: block;
}

.sgcb-catalog__tree-children {
	margin: 2px 0 6px 10px;
	padding-left: 16px;
	border-left: 2px solid var(--sgcb-color-border);
}

.sgcb-catalog__tree-row {
	display: grid;
	/* minmax(0, 1fr), not plain 1fr: a grid item's default min-width is
	   "auto", which means it won't shrink below its content's own minimum
	   size. For a long, wrappable category name that minimum can still be
	   wider than the track 1fr would otherwise assign, so the row quietly
	   grows past the sidebar's width and the fixed 26px toggle column gets
	   pushed along with it — this is exactly why the "+" for long names
	   ("Оборудование для детейлинга", "Оснащение мастерской") drifted out
	   of line with every other row's toggle instead of sitting in one
	   straight column. minmax(0, 1fr) caps that minimum at 0 so the track
	   always sizes to the available width, full stop. */
	grid-template-columns: minmax(0, 1fr) 26px;
	align-items: center;
	column-gap: 4px;
	padding-right: 6px;
	border-radius: var(--sgcb-radius-sm);
	transition: background var(--sgcb-transition);
}

.sgcb-catalog__tree-row:hover {
	background: var(--sgcb-color-bg-alt);
}

.sgcb-catalog__tree-link {
	position: relative;
	display: flex;
	grid-column: 1;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--sgcb-color-text);
	border-radius: var(--sgcb-radius-sm);
	transition: background var(--sgcb-transition), color var(--sgcb-transition);
	/* Belt-and-braces alongside the row's minmax(0, 1fr) above: this flex
	   child also defaults to min-width: auto, so without this it can still
	   refuse to shrink below the category name's un-wrapped width. Setting
	   it to 0 and letting long words wrap (instead of overflowing) keeps
	   this link — and therefore the toggle button after it — inside the
	   row's real width no matter how long the name is. */
	min-width: 0;
	overflow-wrap: break-word;
}

.sgcb-catalog__tree-link:hover,
.sgcb-catalog__tree-link:focus {
	color: var(--sgcb-color-primary);
}

/* is-current now lives on the ROW (sgcb-catalog__tree-row, set directly in
   archive-product.php's sgcb_render_category_tree()), not just the link.
   The old version only tinted .tree-link, which stopped BEFORE the toggle
   column, so the "+" sat in plain white space next to the highlighted
   pill instead of reading as part of the same row. Keying off the row
   itself covers the toggle/spacer column too. */
.sgcb-catalog__tree-row.is-current {
	background: var(--sgcb-color-primary-light);
	box-shadow: inset 3px 0 0 var(--sgcb-color-primary);
	border-radius: var(--sgcb-radius-sm);
}

.sgcb-catalog__tree-link.is-current {
	color: var(--sgcb-color-primary);
	font-weight: 600;
}

.sgcb-catalog__tree-count {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sgcb-color-bg-alt);
	color: var(--sgcb-color-text-muted);
	font-size: 11px;
	font-weight: 600;
	transition: background var(--sgcb-transition), color var(--sgcb-transition);
}

.sgcb-catalog__tree-link:hover .sgcb-catalog__tree-count,
.sgcb-catalog__tree-link.is-current .sgcb-catalog__tree-count {
	background: var(--sgcb-color-bg);
	color: var(--sgcb-color-primary);
}

/* Toggle button AND its empty-row spacer (archive-product.php renders one
   or the other, never both) share this fixed grid column, sized and
   positioned identically either way — this is what keeps every "+" in one
   straight vertical line regardless of category name length or whether
   that particular row has subcategories at all. */
.sgcb-catalog__tree-toggle,
.sgcb-catalog__tree-toggle-spacer {
	grid-column: 2;
	position: relative;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: var(--sgcb-color-bg-alt);
	cursor: pointer;
	transition: background var(--sgcb-transition), transform var(--sgcb-transition);
}

.sgcb-catalog__tree-toggle-spacer {
	background: transparent;
	cursor: default;
}

.sgcb-catalog__tree-toggle::before,
.sgcb-catalog__tree-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--sgcb-color-text-muted);
	transform: translate(-50%, -50%);
	transition: background var(--sgcb-transition);
}

.sgcb-catalog__tree-toggle::before {
	width: 10px;
	height: 1.5px;
}

.sgcb-catalog__tree-toggle::after {
	width: 1.5px;
	height: 10px;
}

/* Expanded state: rotate the whole button 45° so the "+" reads as an "×"
   (replaces the old approach of hiding the vertical stroke to fake a "−"). */
.sgcb-catalog__tree-item.is-expanded > .sgcb-catalog__tree-row .sgcb-catalog__tree-toggle {
	transform: rotate(45deg);
	background: var(--sgcb-color-primary-light);
}

.sgcb-catalog__tree-item.is-expanded > .sgcb-catalog__tree-row .sgcb-catalog__tree-toggle::before,
.sgcb-catalog__tree-item.is-expanded > .sgcb-catalog__tree-row .sgcb-catalog__tree-toggle::after {
	background: var(--sgcb-color-primary);
}

.sgcb-catalog__tree-toggle:hover {
	background: var(--sgcb-color-primary-light);
}

.sgcb-catalog__tree-toggle:hover::before,
.sgcb-catalog__tree-toggle:hover::after {
	background: var(--sgcb-color-primary);
}

.sgcb-catalog__results {
	flex: 1;
	min-width: 0;
}

/* --- Toolbar: result count + per-page/sort selects + grid/list toggle ---
   Renders via sgcb_catalog_toolbar() in inc/woocommerce-hooks.php, replacing
   WooCommerce's own (English, unstyled) result-count + ordering dropdown. */
.sgcb-catalog__toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-catalog__count {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-catalog__toolbar-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.sgcb-catalog__select-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sgcb-catalog__select,
.woocommerce .sgcb-catalog__select,
.woocommerce-page .sgcb-catalog__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-flex;
	align-items: center;
	height: 38px;
	line-height: 1;
	max-width: 100%;
	margin: 0;
	padding: 0 30px 0 12px !important;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	background-color: var(--sgcb-color-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 7px;
	font-size: 13px;
	color: var(--sgcb-color-text);
	cursor: pointer;
	transition: border-color var(--sgcb-transition);
}

.sgcb-catalog__select:hover,
.sgcb-catalog__select:focus {
	border-color: var(--sgcb-color-primary);
}

.sgcb-catalog__select option {
	padding: 8px 12px;
	color: var(--sgcb-color-text);
	background-color: var(--sgcb-color-bg);
}

.sgcb-catalog__select option:checked {
	color: var(--sgcb-color-primary);
	background-color: var(--sgcb-color-primary-light);
}

/* --- Styled dropdown for the sort select (initCustomSelect(), filters.js) ---
   Layered on top of the native <select> above rather than replacing it: the
   select stays the real form control (still submits the same way via
   data-sgcb-autosubmit), this is purely a stand-in for its open dropdown
   list, which no browser lets CSS style. .sgcb-js-ready gates which one is
   visible — see the no-JS fallback rule at the bottom of this block. */
.sgcb-select {
	position: relative;
}

.sgcb-js-ready .sgcb-select__native {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.sgcb-select__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 38px;
	/* Stops the button resizing every time a shorter/longer option is
	   picked — sized to comfortably fit the longest option label
	   ("Сортировка по умолчанию") without ellipsis. */
	min-width: 210px;
	max-width: 100%;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	background: var(--sgcb-color-bg);
	font: inherit;
	font-size: 13px;
	color: var(--sgcb-color-text);
	cursor: pointer;
	transition: border-color var(--sgcb-transition);
}

.sgcb-js-ready .sgcb-select__toggle {
	display: inline-flex;
}

.sgcb-select__toggle:hover,
.sgcb-select.is-open .sgcb-select__toggle {
	border-color: var(--sgcb-color-primary);
}

.sgcb-select__toggle-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sgcb-select__chevron {
	flex-shrink: 0;
	width: 10px;
	height: 7px;
	color: var(--sgcb-color-text-muted);
	transition: transform var(--sgcb-transition-fast);
}

.sgcb-select.is-open .sgcb-select__chevron {
	transform: rotate(180deg);
}

.sgcb-select__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 100%;
	width: max-content;
	max-width: min(280px, calc(100vw - 32px));
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--sgcb-color-bg);
	border-radius: var(--sgcb-radius);
	box-shadow: 0 12px 32px rgba(14, 21, 48, 0.18);
	padding: 6px;
}

/* Without this, the panel was permanently visible regardless of its
   `hidden` attribute: `.sgcb-select__panel { display: flex }` above and
   the browser's own built-in `[hidden] { display: none }` rule have the
   exact same CSS specificity, and this stylesheet loads after the
   browser's, so `display: flex` always won — the dropdown never actually
   closed, it just always looked "open". This selector (class + attribute)
   is more specific than either, so it wins regardless of source order. */
.sgcb-select__panel[hidden] {
	display: none;
}

.sgcb-select__option {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border: none;
	border-radius: var(--sgcb-radius-sm);
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--sgcb-color-text);
	cursor: pointer;
	transition: background var(--sgcb-transition-fast), color var(--sgcb-transition-fast);
}

.sgcb-select__option:hover,
.sgcb-select__option:focus-visible {
	background: var(--sgcb-color-bg-alt);
}

.sgcb-select__option.is-selected {
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
	font-weight: 600;
}

.sgcb-catalog__view-toggle {
	display: flex;
	gap: 4px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	padding: 3px;
	flex-shrink: 0;
}

.sgcb-catalog__view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	border-radius: var(--sgcb-radius-sm);
	color: var(--sgcb-color-text-muted);
	cursor: pointer;
	transition: background var(--sgcb-transition-fast), color var(--sgcb-transition-fast);
}

.sgcb-catalog__view-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.sgcb-catalog__view-btn:hover {
	color: var(--sgcb-color-primary);
}

.sgcb-catalog__view-btn.is-active {
	background: var(--sgcb-color-primary-light);
	color: var(--sgcb-color-primary);
}

@media (min-width: 700px) {
	.sgcb-catalog__toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* "Скачать каталог" button + dropdown (inc/catalog-downloads.php). Two
   instances can exist on one page — the catalog toolbar and the footer
   (see the __toolbar / __footer modifiers below) — so this lives in
   main.css rather than woocommerce.css: the footer instance needs to work
   on every page, not just WooCommerce ones. */
.sgcb-catalog-downloads {
	position: relative;
	display: inline-flex;
}

.sgcb-catalog-downloads__toggle {
	padding: 10px 18px;
	font-size: 14px;
}

.sgcb-catalog-downloads__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sgcb-catalog-downloads__chevron {
	width: 10px;
	height: 7px;
	flex-shrink: 0;
	transition: transform var(--sgcb-transition-fast);
}

.sgcb-catalog-downloads.is-open .sgcb-catalog-downloads__chevron {
	transform: rotate(180deg);
}

.sgcb-catalog-downloads__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	width: max-content;
	min-width: 240px;
	max-width: min(300px, calc(100vw - 32px));
	/* Up to 15 catalogs can be configured now (was a fixed 4), so the panel
	   caps its height and scrolls instead of growing tall enough to run
	   off-screen. */
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: var(--sgcb-color-bg);
	border-radius: var(--sgcb-radius);
	box-shadow: 0 12px 32px rgba(14, 21, 48, 0.18);
	padding: 8px;
}

.sgcb-catalog-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sgcb-catalog-downloads__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--sgcb-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--sgcb-color-text);
	transition: background var(--sgcb-transition-fast), color var(--sgcb-transition-fast);
}

.sgcb-catalog-downloads__link:hover,
.sgcb-catalog-downloads__link:focus-visible {
	background: var(--sgcb-color-primary-light);
	color: var(--sgcb-color-primary);
}

.sgcb-catalog-downloads__file-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--sgcb-color-primary);
}

/* Footer instance sits at the very bottom of the page, so its panel opens
   upward instead of down — opening down would run the dropdown off-screen
   / force a page scrollbar to reach it. The footer column also stretches
   full-width, so the button itself doesn't grow to match — it stays a
   normal inline button rather than spanning the column. */
.sgcb-footer__downloads {
	margin-top: 16px;
}

.sgcb-catalog-downloads--footer .sgcb-catalog-downloads__panel {
	top: auto;
	bottom: calc(100% + 8px);
}

@media (min-width: 960px) {
	.sgcb-catalog__filter-toggle {
		display: none;
	}

	.sgcb-catalog__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
	}

	.sgcb-catalog__filters {
		position: static;
		inset: auto;
		transform: none;
		z-index: auto;
		width: 260px;
		flex: 0 0 260px;
		padding: 0;
		overflow: visible;
	}

	.sgcb-catalog__filter-overlay {
		display: none;
	}
}

/* ==========================================================================
   9. Pages (about / wholesale-retail / service / contact / faq)
   ========================================================================== */

.sgcb-page__header {
	max-width: 760px;
	margin-bottom: 32px;
}

.sgcb-page__title {
	font-size: 30px;
	margin-bottom: 8px;
}

.sgcb-page__subtitle {
	color: var(--sgcb-color-text-muted);
	font-size: 16px;
}

.sgcb-page__intro {
	max-width: 760px;
	margin-bottom: 32px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
}

.sgcb-page__section-heading {
	font-size: 22px;
	margin: 40px 0 20px;
}

.sgcb-page__cta {
	margin-top: 32px;
}

.sgcb-page__cta-hint {
	margin-top: 10px;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

/* --- About stats --- */

.sgcb-about-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 24px;
}

.sgcb-about-stats__stat {
	background: var(--sgcb-color-bg-alt);
	border-radius: var(--sgcb-radius);
	padding: 20px;
	text-align: center;
}

.sgcb-about-stats__stat-value {
	display: block;
	font-size: 28px;
	font-weight: 800;
	color: var(--sgcb-color-primary);
}

.sgcb-about-stats__stat-label {
	display: block;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
	margin-top: 6px;
}

@media (min-width: 960px) {
	.sgcb-about-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Wholesale / retail terms --- */

.sgcb-terms__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.sgcb-terms__column {
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
	padding: 24px;
}

.sgcb-terms__column--wholesale {
	border-color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
}

.sgcb-terms__heading {
	font-size: 19px;
	margin-bottom: 16px;
}

.sgcb-terms__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sgcb-terms__list-item {
	padding-left: 20px;
	position: relative;
	line-height: 1.6;
}

.sgcb-terms__list-item::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sgcb-color-primary);
	font-weight: 700;
}

@media (min-width: 760px) {
	.sgcb-terms__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Official distribution / anti-counterfeit notice (wholesale-retail page) --- */

.sgcb-notice {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
	padding: 24px;
	background: #fdecea;
	border: 1px solid rgba(192, 57, 43, 0.25);
	border-left: 4px solid #c0392b;
	border-radius: var(--sgcb-radius);
}

.sgcb-notice__icon {
	font-size: 26px;
	line-height: 1;
	color: #c0392b;
}

.sgcb-notice__body {
	min-width: 0;
}

.sgcb-notice__heading {
	font-size: 19px;
	margin-bottom: 14px;
}

.sgcb-notice__lead {
	line-height: 1.7;
	margin-bottom: 16px;
}

.sgcb-notice__warning-heading {
	font-weight: 700;
	color: #c0392b;
	margin-bottom: 8px;
	font-size: 15px;
}

.sgcb-notice__warning-intro {
	line-height: 1.6;
	margin-bottom: 10px;
}

.sgcb-notice__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 22px;
	margin-bottom: 16px;
	line-height: 1.6;
}

.sgcb-notice__closing {
	font-weight: 600;
	line-height: 1.6;
}

.sgcb-notice__translation {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(192, 57, 43, 0.25);
}

.sgcb-notice__translation summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--sgcb-color-primary);
}

.sgcb-notice__translation summary:hover {
	color: var(--sgcb-color-primary-dark);
}

.sgcb-notice__translation[open] summary {
	margin-bottom: 16px;
}

.sgcb-notice__translation .sgcb-notice__lead:last-child,
.sgcb-notice__translation .sgcb-notice__closing:last-child {
	margin-bottom: 0;
}

@media (min-width: 760px) {
	.sgcb-notice {
		flex-direction: row;
		padding: 28px 32px;
	}

	.sgcb-notice__icon {
		font-size: 30px;
	}
}

/* --- Service (plotter cutting) page --- */

.sgcb-service__intro {
	max-width: 760px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
}

.sgcb-service__steps-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 16px;
}

.sgcb-service__step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.sgcb-service__step-number {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sgcb-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.sgcb-service__step-title {
	font-size: 16px;
	margin-bottom: 4px;
}

.sgcb-service__step-text {
	color: var(--sgcb-color-text-muted);
	font-size: 14px;
}

.sgcb-service__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 20px;
}

.sgcb-service__gallery-item img {
	border-radius: var(--sgcb-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.sgcb-service__gallery-placeholder {
	border: 1px dashed var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sgcb-color-text-muted);
	font-size: 13px;
	text-align: center;
	padding: 12px;
}

@media (min-width: 700px) {
	.sgcb-service__gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Contact page --- */

.sgcb-contact-info__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.sgcb-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sgcb-contact-info__label {
	font-weight: 600;
	white-space: nowrap;
}

.sgcb-contact-info__map {
	border-radius: var(--sgcb-radius);
	overflow: hidden;
	margin-bottom: 12px;
	height: 360px;
	position: relative;
	background: var(--sgcb-color-bg-alt);
	/* Leaflet's own CSS gives its internal panes/controls z-index values up
	   to 1000 (.leaflet-top/.leaflet-bottom, the zoom control) and 700 (the
	   popup pane) — plain `position: relative` above does NOT contain those,
	   since containment only kicks in once an element establishes its own
	   stacking context. Without this, those panes compete directly in the
	   page's root stacking context and paint over the sticky header
	   (z-index: 200) and its mobile off-canvas menu/overlay (205/210/190)
	   whenever the map sits further down the page than the header — exactly
	   what happened with the mobile menu open. `isolation: isolate` forces
	   this element to start a fresh stacking context so every Leaflet
	   z-index, however high, is capped at this element's own paint order. */
	isolation: isolate;
}

.sgcb-contact-info__map iframe,
.sgcb-contact-info__map .sgcb-map {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.sgcb-contact-info__map-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 0 0 32px;
}

.sgcb-contact-info__map-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sgcb-color-primary);
	text-decoration: none;
}

.sgcb-contact-info__map-link:hover {
	color: var(--sgcb-color-primary-dark);
	text-decoration: underline;
}

/* Leaflet container chrome — match the theme's font/radius/shadow tokens
   instead of Leaflet's plain defaults. assets/js/map.js builds the map
   itself; these rules only theme it. Leaflet + OpenStreetMap tiles need
   no Maps API key, same constraint the old iframe embed was built for. */
.sgcb-contact-info__map .leaflet-container {
	font-family: var(--sgcb-font-body);
	background: var(--sgcb-color-bg-alt);
}

/* Leaflet gives every divIcon a white box + border by default (its base
   .leaflet-div-icon rule) — reset that so only our own .sgcb-map-pin
   markup (below) renders, with nothing showing through behind it. */
.sgcb-contact-info__map .leaflet-div-icon {
	background: transparent;
	border: 0;
}

/* A light grade on the OSM tiles so their default multicolor styling sits
   closer to the site's mostly blue/white/grey palette instead of clashing
   with it — subtle enough that the map stays easy to read. */
.sgcb-contact-info__map .leaflet-tile-pane {
	filter: grayscale(25%) saturate(1.1) brightness(1.02);
}

/* Leaflet's own attribution control ships a small flag icon before the
   word "Leaflet" — not something this theme added, and not tied to the
   shop's own country, so it's hidden here. The text attribution itself
   ("Leaflet | © OpenStreetMap contributors") stays — that's required by
   both projects' license terms, only the icon graphic is removed. */
.sgcb-contact-info__map .leaflet-attribution-flag {
	display: none !important;
}

.sgcb-contact-info__map .leaflet-popup-content-wrapper {
	border-radius: var(--sgcb-radius-sm);
	box-shadow: var(--sgcb-shadow-md);
}

.sgcb-contact-info__map .leaflet-popup-content {
	margin: 14px 16px;
	line-height: 1.4;
}

.sgcb-contact-info__map .leaflet-popup-tip {
	box-shadow: var(--sgcb-shadow);
}

.sgcb-map-popup__title {
	font-family: var(--sgcb-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--sgcb-color-primary);
	margin: 0 0 4px;
}

.sgcb-map-popup__address {
	font-size: 13px;
	color: var(--sgcb-color-text);
	margin: 0 0 10px;
}

.sgcb-map-popup__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sgcb-color-primary);
	text-decoration: none;
}

.sgcb-map-popup__link:hover {
	color: var(--sgcb-color-primary-dark);
	text-decoration: underline;
}

/* Custom SGCB-branded map pin — a rounded "drop" (Material-style teardrop:
   three rounded corners + one square corner, rotated -45deg) in the brand
   blue gradient, with a two-stroke "S" swoosh echoing the logo's leading
   letterform, a soft ground shadow, and a pulsing halo so the location
   reads instantly against the map tiles. Built with assets/js/map.js's
   L.divIcon so it's real DOM (styleable/animatable here) rather than a
   flat marker image. */
.sgcb-map-pin {
	display: block;
	position: relative;
	width: 44px;
	height: 50px;
}

.sgcb-map-pin__pulse {
	position: absolute;
	top: 18px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	border-radius: 50%;
	background: var(--sgcb-color-primary);
	opacity: 0.35;
	animation: sgcb-pin-pulse 2.2s var(--sgcb-ease-out) infinite;
	pointer-events: none;
}

.sgcb-map-pin__drop {
	position: absolute;
	top: 0;
	left: 2px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sgcb-color-primary) 0%, var(--sgcb-color-primary-dark) 100%);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: var(--sgcb-shadow-md);
	transition: transform var(--sgcb-transition-fast);
}

.sgcb-map-pin:hover .sgcb-map-pin__drop {
	transform: rotate(-45deg) scale(1.08);
}

.sgcb-map-pin__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(45deg);
	font-family: var(--sgcb-font-heading);
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
	color: #fff;
}

.sgcb-map-pin__shadow {
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 18px;
	height: 6px;
	margin-left: -9px;
	border-radius: 50%;
	background: rgba(20, 25, 60, 0.28);
	filter: blur(1px);
}

@keyframes sgcb-pin-pulse {
	0% {
		transform: scale(0.5);
		opacity: 0.45;
	}
	70%,
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

.sgcb-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
}

.sgcb-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sgcb-contact-form__label {
	font-size: 14px;
	font-weight: 600;
}

.sgcb-contact-form__input,
.sgcb-contact-form__textarea {
	padding: 12px 14px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	font-size: 15px;
}

.sgcb-contact-form__textarea {
	min-height: 120px;
	resize: vertical;
}

.sgcb-contact-form__submit {
	align-self: flex-start;
}

.sgcb-contact-form__success {
	color: var(--sgcb-color-whatsapp-dark);
	font-weight: 600;
}

.sgcb-contact-form__error {
	color: #c0392b;
	font-size: 13px;
}

@media (min-width: 960px) {
	.sgcb-page--contact .sgcb-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}
}

/* --- FAQ page --- */

.sgcb-faq__item {
	border-bottom: 1px solid var(--sgcb-color-border);
	padding: 16px 0;
}

.sgcb-faq__question {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sgcb-faq__question::-webkit-details-marker {
	display: none;
}

.sgcb-faq__question::after {
	content: "+";
	float: right;
	color: var(--sgcb-color-primary);
	font-size: 20px;
}

details[open] > .sgcb-faq__question::after {
	content: "–";
}

.sgcb-faq__answer {
	margin-top: 10px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
}

/* --- Blog post (single.php) --- */

.sgcb-post__header {
	max-width: 760px;
	margin-bottom: 20px;
}

.sgcb-post__title {
	font-size: 28px;
	margin-bottom: 10px;
}

.sgcb-post__meta {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-post__meta-sep {
	margin: 0 6px;
}

.sgcb-post__featured-image {
	max-width: 900px;
	margin-bottom: 24px;
	border-radius: var(--sgcb-radius);
	overflow: hidden;
}

.sgcb-post__featured-image img {
	width: 100%;
}

.sgcb-post__content {
	line-height: 1.75;
	max-width: 760px;
}

.sgcb-post__content > * + * {
	margin-top: 1em;
}

.sgcb-page__page-links {
	margin-top: 24px;
	font-weight: 600;
}

.sgcb-page__featured-image {
	max-width: 900px;
	margin-bottom: 24px;
	border-radius: var(--sgcb-radius);
	overflow: hidden;
}

.sgcb-page__featured-image img {
	width: 100%;
}

/* Prev/next post navigation. */
.sgcb-post-nav {
	max-width: 760px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--sgcb-color-border);
}

.sgcb-post-nav__link {
	padding: 14px 16px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	transition: border-color var(--sgcb-transition);
}

.sgcb-post-nav__link:hover {
	border-color: var(--sgcb-color-primary);
}

.sgcb-post-nav__label {
	display: block;
	font-size: 12px;
	color: var(--sgcb-color-text-muted);
	margin-bottom: 4px;
}

.sgcb-post-nav__title {
	display: block;
	font-weight: 600;
	font-size: 14px;
}

.sgcb-post-nav__link--next {
	text-align: right;
}

@media (min-width: 700px) {
	.sgcb-post-nav {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   10. Blog archive / search results grid (archive.php, search.php)
   ========================================================================== */

.sgcb-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 24px 0 40px;
}

.sgcb-blog-card__image,
.sgcb-home-news__card-image {
	border-radius: var(--sgcb-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-bottom: 12px;
}

.sgcb-blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgcb-blog-card__type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sgcb-color-primary);
	margin-bottom: 6px;
}

.sgcb-blog-card__date {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-blog-card__title {
	font-size: 17px;
	margin: 6px 0;
}

.sgcb-blog-card__excerpt {
	font-size: 14px;
	color: var(--sgcb-color-text-muted);
}

@media (min-width: 700px) {
	.sgcb-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.sgcb-blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Two different pagination markups share the `.page-numbers` class:
   - WordPress' the_posts_pagination() (blog/search) — flat <span>/<a>
     siblings inside `.navigation.pagination`.
   - WooCommerce's woocommerce_pagination() (catalog) — <a>/<span> wrapped
     in <li> inside a <ul class="page-numbers"> inside `.woocommerce-pagination`.
   The rule below only targets the actual number/arrow elements (`a.page-numbers`,
   `span.page-numbers`) so the WooCommerce <ul> — which also carries the
   `page-numbers` class — doesn't pick up the same bordered box as its own
   items and swallow them into one edge-to-edge pill. */
.pagination,
.navigation.pagination,
.woocommerce-pagination {
	display: flex;
	justify-content: center;
	margin: 32px 0 40px;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none !important;
	background: none !important;
}

/* WooCommerce's own stylesheet also puts a border directly on each <li>
   (its source of the connected-cells "grid line" look) — neutralize that
   too, since our spacing/pill treatment lives on the <a>/<span> instead. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li {
	display: contents;
}

a.page-numbers,
span.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px !important;
	margin: 0;
	border-radius: 999px;
	border: 1px solid var(--sgcb-color-border);
	background: var(--sgcb-color-bg);
	color: var(--sgcb-color-text);
	font-size: 14px;
	font-weight: 600;
	transition: background var(--sgcb-transition-fast), border-color var(--sgcb-transition-fast), color var(--sgcb-transition-fast), transform var(--sgcb-transition-fast);
}

span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--sgcb-color-text-muted);
	font-weight: 700;
}

.page-numbers.current {
	background: var(--sgcb-color-primary);
	border-color: var(--sgcb-color-primary);
	color: #fff;
	box-shadow: 0 4px 12px -2px rgba(26, 47, 143, 0.35);
}

a.page-numbers:hover {
	border-color: var(--sgcb-color-primary);
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
	transform: translateY(-1px);
}

a.page-numbers:active {
	transform: translateY(0);
}

/* Prev/next arrows get a slightly muted look so the numbers stay the
   visual focus — matched by aria-label/class WooCommerce and WordPress
   both already output (`next`/`prev`). */
a.page-numbers.next,
a.page-numbers.prev {
	color: var(--sgcb-color-text-muted);
	font-weight: 700;
}

/* ==========================================================================
   11. Search form (search.php, 404.php)
   ========================================================================== */

.sgcb-search-form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin-bottom: 8px;
}

.sgcb-search-form__input {
	flex: 1 1 auto;
	padding: 12px 14px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	font-size: 15px;
}

.sgcb-search-form__no-results {
	color: var(--sgcb-color-text-muted);
	margin-top: 20px;
}

.sgcb-page__title-query {
	color: var(--sgcb-color-primary);
}

/* ==========================================================================
   12. 404 page
   ========================================================================== */

.sgcb-404 {
	max-width: 560px;
	margin: 40px auto;
	text-align: center;
}

.sgcb-404__code {
	font-size: 72px;
	font-weight: 800;
	color: var(--sgcb-color-primary-light);
	margin-bottom: 0;
	line-height: 1;
}

.sgcb-404__title {
	font-size: 26px;
	margin-bottom: 12px;
}

.sgcb-404__text {
	color: var(--sgcb-color-text-muted);
	margin-bottom: 28px;
	line-height: 1.6;
}

.sgcb-404__search {
	margin: 0 auto 24px;
}

.sgcb-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

/* ==========================================================================
   13. Scroll-reveal (homepage sections + catalog header/results)
   ========================================================================== */

/* .sgcb-reveal starts hidden/offset; assets/js/main.js's initScrollReveal()
   adds this class via IntersectionObserver only when JS has run and the
   visitor hasn't requested reduced motion (checked in JS before the class
   is ever added), so content is never hidden for no-JS visitors — without
   JS, elements simply never get .sgcb-reveal and render normally. */
.sgcb-reveal {
	opacity: 0;
	transform: translateY(var(--sgcb-reveal-distance));
	transition: opacity var(--sgcb-transition-slow), transform var(--sgcb-transition-slow);
}

.sgcb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   14. Cart & Account pages (page-cart.php / page-account.php)
   ========================================================================== */

/* --- Cart page --- */

.sgcb-cart-empty {
	text-align: center;
	padding: 48px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	color: var(--sgcb-color-text-muted);
}

/* .sgcb-cart-empty's own `display: flex` above has higher specificity than
   the [hidden] attribute's UA-stylesheet `display: none`, so it was
   winning and showing the empty state even while items existed in the
   cart. Same risk applies to .sgcb-cart-filled if it ever gets a `display`
   declaration of its own. */
.sgcb-cart-empty[hidden],
.sgcb-cart-filled[hidden] {
	display: none;
}

.sgcb-cart-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
	margin-bottom: 24px;
}

.sgcb-cart-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.sgcb-cart-table thead th {
	text-align: left;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
	font-weight: 600;
	padding: 12px 16px;
	background: var(--sgcb-color-bg-alt);
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-cart-table__row + .sgcb-cart-table__row {
	border-top: 1px solid var(--sgcb-color-border);
}

.sgcb-cart-table__cell {
	padding: 12px 16px;
	vertical-align: middle;
	font-size: 14px;
}

.sgcb-cart-table__product {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sgcb-color-text);
	font-weight: 600;
}

.sgcb-cart-table__thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--sgcb-radius-sm);
	object-fit: cover;
	flex: 0 0 auto;
}

.sgcb-cart-table__cell--price,
.sgcb-cart-table__cell--subtotal {
	color: var(--sgcb-color-primary);
	font-weight: 700;
	white-space: nowrap;
}

.sgcb-cart-table__remove {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--sgcb-color-text-muted);
	font-size: 20px;
	line-height: 1;
	transition: background var(--sgcb-transition-fast), color var(--sgcb-transition-fast);
}

.sgcb-cart-table__remove:hover {
	background: var(--sgcb-color-bg-alt);
	color: #c0392b;
}

.sgcb-cart-summary {
	max-width: 360px;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: right;
}

.sgcb-cart-summary__row--total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 18px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-cart-summary__row--total strong {
	color: var(--sgcb-color-primary);
	font-size: 22px;
}

.sgcb-cart-summary__hint {
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

.sgcb-cart-summary__send {
	width: 100%;
}

.sgcb-cart-summary__send.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.sgcb-cart-summary__note {
	font-size: 12px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.5;
}

@media (max-width: 600px) {
	.sgcb-cart-summary {
		max-width: none;
		text-align: left;
	}

	.sgcb-cart-summary__row--total {
		text-align: left;
	}

	/* --- Cart table -> stacked cards ---
	   The table above keeps a 560px min-width so its columns stay readable,
	   which is exactly what forced the horizontal scrollbar on phones (the
	   screenshot this was reported from). Below 600px there isn't a table
	   layout that fits without either scrolling or crushing the product
	   name — so each row becomes its own bordered card instead: product
	   (image + name) on top, then price/qty/subtotal as a labeled row
	   underneath, remove (×) pinned to the card's top-right corner. */
	.sgcb-cart-table-wrap {
		overflow-x: visible;
		border: none;
		margin-bottom: 20px;
	}

	.sgcb-cart-table {
		display: block;
		min-width: 0;
	}

	.sgcb-cart-table thead {
		display: none;
	}

	.sgcb-cart-table tbody {
		display: block;
	}

	.sgcb-cart-table__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(40px, auto);
		grid-template-areas:
			"product product remove"
			"price qty subtotal";
		column-gap: 12px;
		row-gap: 12px;
		align-items: center;
		padding: 14px;
		border: 1px solid var(--sgcb-color-border);
		border-radius: var(--sgcb-radius);
	}

	/* Each card already has its own full border above — cancel the
	   table's row-divider border so mobile doesn't get a stray extra line
	   sitting inside/above the next card, and space the cards apart
	   instead. */
	.sgcb-cart-table__row + .sgcb-cart-table__row {
		border-top: none;
		margin-top: 12px;
	}

	.sgcb-cart-table__cell {
		display: block;
		padding: 0;
	}

	.sgcb-cart-table__cell--product {
		grid-area: product;
	}

	.sgcb-cart-table__cell--remove {
		grid-area: remove;
		justify-self: end;
		align-self: start;
	}

	.sgcb-cart-table__cell--price {
		grid-area: price;
	}

	.sgcb-cart-table__cell--qty {
		grid-area: qty;
	}

	.sgcb-cart-table__cell--subtotal {
		grid-area: subtotal;
		text-align: right;
	}

	/* Small muted labels above price/qty/subtotal since the table header
	   (which normally explains these columns) is hidden on mobile. */
	.sgcb-cart-table__cell--price::before,
	.sgcb-cart-table__cell--qty::before,
	.sgcb-cart-table__cell--subtotal::before {
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--sgcb-color-text-muted);
		margin-bottom: 4px;
	}

	.sgcb-cart-table__cell--price::before {
		content: "Цена";
	}

	.sgcb-cart-table__cell--qty::before {
		content: "Кол-во";
	}

	.sgcb-cart-table__cell--subtotal::before {
		content: "Сумма";
	}

	/* Slightly larger tap target than the 32px desktop button. */
	.sgcb-cart-table__remove {
		width: 36px;
		height: 36px;
	}
}

/* --- Account page --- */

.sgcb-account-panel,
.sgcb-account-tabs {
	max-width: 420px;
}

.sgcb-account-panel__greeting {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
}

.sgcb-account-panel__logout {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	color: var(--sgcb-color-text-muted);
	text-decoration: underline;
}

.sgcb-account-panel__logout:hover {
	color: var(--sgcb-color-primary);
}

.sgcb-account-tabs__nav {
	display: flex;
	border-bottom: 1px solid var(--sgcb-color-border);
	margin-bottom: 24px;
}

.sgcb-account-tabs__btn {
	flex: 1 1 0;
	padding: 12px 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--sgcb-color-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--sgcb-transition-fast), border-color var(--sgcb-transition-fast);
}

.sgcb-account-tabs__btn.is-active {
	color: var(--sgcb-color-primary);
	border-bottom-color: var(--sgcb-color-primary);
}

/* No-JS fallback: both forms are meaningful without initAccountTabs()
   (assets/js/main.js) running, so both stay visible (with a heading each)
   until .sgcb-js-ready confirms the tab switcher is actually active —
   only then does clicking a tab hide the other panel. */
.sgcb-account-tabs__panel + .sgcb-account-tabs__panel {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--sgcb-color-border);
}

.sgcb-js-ready .sgcb-account-tabs__panel {
	display: none;
}

.sgcb-js-ready .sgcb-account-tabs__panel.is-active {
	display: block;
}

.sgcb-account-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sgcb-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sgcb-color-text);
}

.sgcb-form-field input {
	font-weight: 400;
	font-size: 15px;
	padding: 11px 14px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	color: var(--sgcb-color-text);
	background: #fff;
}

.sgcb-form-field input:focus {
	outline: none;
	border-color: var(--sgcb-color-primary);
}

.sgcb-form-field input:disabled {
	background: var(--sgcb-color-bg-alt);
	color: var(--sgcb-color-text-muted);
}

.sgcb-account-form .sgcb-u-button {
	align-self: flex-start;
}

.sgcb-form-notice {
	padding: 10px 14px;
	border-radius: var(--sgcb-radius-sm);
	font-size: 13px;
	margin-bottom: 16px;
}

.sgcb-form-notice--error {
	background: #fdecea;
	color: #c0392b;
}

.sgcb-form-notice--success {
	background: var(--sgcb-color-primary-light);
	color: var(--sgcb-color-primary);
}

/* ==========================================================================
   15. Акции (page-promotion.php — self-service promotion cards grid)
   ========================================================================== */

/* One large banner-style card per row, alternating image side on desktop —
   same visual language as the product-page "Особенности" blocks
   (woocommerce.css's Features block). Previously a small 1-3 column card
   grid, which left a lot of empty page next to a single active promo; now
   every promo gets full page width and reads as a proper banner instead of
   a blog-post-style teaser. */
.sgcb-promotions {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
	margin-top: 8px;
	list-style: none;
	padding: 0;
}

.sgcb-promotions__empty {
	color: var(--sgcb-color-text-muted);
	padding: 40px 0;
}

.sgcb-promo-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(20, 25, 60, 0.08);
	transition: transform var(--sgcb-transition-slow), box-shadow var(--sgcb-transition-slow), border-color var(--sgcb-transition-slow);
}

.sgcb-promo-card:hover {
	transform: translateY(-2px);
	border-color: rgba(26, 47, 143, 0.18);
	box-shadow: 0 18px 36px rgba(20, 25, 60, 0.12);
}

.sgcb-promo-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sgcb-color-bg-alt);
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-promo-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgcb-promo-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: var(--sgcb-radius-sm);
	color: #fff;
	background: var(--sgcb-color-badge-bestseller);
	box-shadow: 0 6px 16px rgba(20, 25, 60, 0.18);
}

.sgcb-promo-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(20px, 3vw, 32px);
}

.sgcb-promo-card__title {
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	margin: 0;
}

.sgcb-promo-card__desc {
	color: var(--sgcb-color-text-muted);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.65;
	max-width: 62ch;
}

.sgcb-promo-card__desc p {
	margin: 0 0 10px;
}

.sgcb-promo-card__desc p:last-child {
	margin-bottom: 0;
}

.sgcb-promo-card__button {
	align-self: flex-start;
	margin-top: 4px;
	padding: 14px 32px;
	font-size: 16px;
}

.sgcb-promo-card--no-media .sgcb-promo-card__body {
	border-left: 3px solid var(--sgcb-color-primary);
}

@media (min-width: 768px) {
	.sgcb-promo-card {
		grid-template-columns: minmax(320px, 1.05fr) minmax(0, 0.95fr);
		align-items: stretch;
	}

	.sgcb-promo-card--reverse {
		grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
	}

	.sgcb-promo-card--reverse .sgcb-promo-card__media {
		order: 2;
		border-bottom: none;
		border-left: 1px solid var(--sgcb-color-border);
	}

	.sgcb-promo-card--reverse .sgcb-promo-card__body {
		order: 1;
	}

	.sgcb-promo-card__media {
		aspect-ratio: auto;
		min-height: 100%;
		border-bottom: none;
		border-right: 1px solid var(--sgcb-color-border);
	}

	.sgcb-promo-card__body {
		justify-content: center;
	}

	.sgcb-promo-card--no-media {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.sgcb-promo-card__badge {
		top: 12px;
		left: 12px;
		padding: 6px 12px;
		font-size: 15px;
	}

	.sgcb-promo-card__body {
		gap: 10px;
	}

	.sgcb-promo-card__button {
		width: 100%;
		text-align: center;
	}
}

/* --- Homepage teaser (template-parts/homepage/promotions-teaser.php) --- */

.sgcb-home-promotions__all-link {
	font-weight: 600;
	color: var(--sgcb-color-primary);
	white-space: nowrap;
}