/*!
Theme Name: Mnogofutbolok
Author: ultra
Description: Кастомная WooCommerce-тема для магазина одежды «Много футболок»: карточки и быстрое добавление товаров, галерея с лайтбоксом, корзина и оформление заказа на блоках WooCommerce, вкладка «Таблица размеров», адаптивная шапка с гамбургер-меню и поиском, личный кабинет покупателя.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theme-slug
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mnogofutbolok is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

--------------------------------------------------------------------------
Supported / integrated plugins
--------------------------------------------------------------------------
The theme is built for WooCommerce and actively styles/hooks into it —
without it, the shop-specific templates and inc/woocommerce.php simply
have nothing to do. Beyond WooCommerce itself, this theme has dedicated
support (custom styling and, where noted, template overrides or PHP hooks
— not just "doesn't break with it active") for:

- WooCommerce — product loop, single product (gallery, variations,
  reviews, related/upsell products), cart, checkout, my account, mini-cart.
- WooCommerce Payments — guest order email-verification notice on the
  account page.
- Advanced Woo Search — header and sidebar search widgets.
- WPC Badge Management — product badges, sized responsively per card.
- Product Size Charts (woo-advanced-product-size-chart) — its popup is
  re-rendered as its own "Таблица размеров" product tab instead of a
  click-to-open popup (see inc/woocommerce.php).
- Yoast SEO (wordpress-seo) — no theme-specific styling needed, listed as
  the SEO plugin this theme is verified against.
- Contact Form 7 — form field/button styling.
- Jetpack — core theme support declared (inc/jetpack.php).
- LiteSpeed Cache — page/asset caching; no theme-specific integration, but
  active on the live site, so cache purges matter when editing CSS/JS here.
- Redirection, Wordfence, Google Site Kit — active on the live site with
  no theme-specific styling/hooks required.

This list reflects what's actually been built and verified against, not a
generic compatibility claim — if a plugin isn't listed here, assume it
hasn't been specifically tested with this theme.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

:root {
	--brand-cream: #fff7eb;
	--brand-warm: #c97a3e;
	--brand-accent: #ffb970;
	--brand-dark: #180d08;
	--brand-muted: #6c4a36;
	--glass: rgba(255, 255, 255, 0.18);
	--glass-strong: rgba(255, 255, 255, 0.28);
	--shadow-soft: 0 18px 40px rgba(24, 13, 8, 0.18);
}

/*
 * NOTE: overflow-x: hidden was briefly also added to `html` here to close
 * a horizontal-scroll gap, but that's what broke `position: sticky` on the
 * header right after — once both `html` and `body` carry their own
 * explicit overflow, `body` stops being just "the page" and becomes its
 * own separate scroll container, so sticky descendants (the header) stick
 * relative to body instead of to the viewport, which in practice reads as
 * "stopped sticking". The cart-overflow bug that motivated it is already
 * fixed at its source (the header grid restructure), so body's overflow-x
 * below is enough on its own — don't re-add it to `html`.
 */
body {
	background:
		radial-gradient(circle at top left, rgba(255, 185, 112, 0.26), transparent 28%),
		linear-gradient(135deg, #fff7eb 0%, #f8ead6 45%, #efe2d0 100%);
	color: var(--brand-dark);
	position: relative;
	overflow-x: hidden;
	min-height: 100vh;
	/*
	 * Belt-and-suspenders with .site-header's own overflow-anchor: none.
	 * Opting the header out only stops the browser from anchoring TO the
	 * header itself; it can still pick a different anchor node further
	 * down the page whose position also shifts when the header's height
	 * changes, and compensate scrollY for THAT instead — same feedback
	 * loop, just via a different node. Disabling anchoring document-wide
	 * closes that gap.
	 */
	overflow-anchor: none;
}

a {
	color: var(--brand-warm);
	text-decoration: none;
	overflow: visible;
}

a:visited {
	color: var(--brand-warm);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
	outline: none !important;
	box-shadow: none;
}

.site-branding a:focus,
.site-branding a:hover {
	outline: none !important;
	box-shadow: none;
}

.main-navigation a:focus,
.main-navigation a:hover {
	outline: none !important;
	box-shadow: none;
}

.main-navigation a,
.main-navigation a:visited,
.site-header-cart a,
.site-header-cart a:visited {
	color: #fff8ef;
}

body::before,
body::after {
	content: "";
	position: fixed;
	width: 34rem;
	height: 34rem;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.28;
	animation: floatOrb 12s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

body::before {
	top: -8rem;
	left: -8rem;
	background: rgba(201, 122, 62, 0.35);
}

body::after {
	bottom: -10rem;
	right: -10rem;
	background: rgba(255, 185, 112, 0.25);
	animation-delay: -4s;
}

#page,
.site-footer,
.site-content,
.site-header {
	position: relative;
	z-index: 1;
}

@keyframes floatOrb {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(1.2rem, 1.8rem, 0) scale(1.06);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.site-header {
	padding: 1.1rem 0;
	position: sticky;
	top: 0;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	background: rgba(17, 12, 10, 0.72);
	box-shadow: 0 10px 35px rgba(17, 12, 10, 0.2);
	z-index: 999;
	transition: top 0.2s ease;
	/*
	 * The browser's CSS scroll-anchoring feature watches for layout shifts
	 * near the top of the viewport and nudges scrollY to compensate, so
	 * the page doesn't visually "jump" — normally a good thing, but here
	 * it's actively harmful: is-compact collapsing/expanding the logo row
	 * changes this element's own height, which is exactly the kind of
	 * shift scroll anchoring reacts to, and its compensating scroll is
	 * typically as large as the height change itself (60-80px) — well
	 * past header-scroll.js's own 24px hysteresis threshold — so it
	 * re-triggers the opposite is-compact state on its own, with no
	 * further input from the visitor, forever. Opting this element out of
	 * anchoring removes the trigger.
	 */
	overflow-anchor: none;
}

/*
 * WordPress pins the admin bar with `position: fixed; top: 0`. Our own
 * sticky header also targets `top: 0`, so as soon as the page scrolls even
 * slightly the two overlap (the admin bar's fixed position no longer lines
 * up with where the sticky header docks). Offsetting the header's sticky
 * offset by the admin bar's own height keeps it docked just below the bar
 * instead.
 *
 * --admin-bar-height defaults to WP's own standard bar heights (32px
 * desktop, 46px at the same 782px breakpoint WP itself uses) so this is
 * correct on first paint, before any JS runs. header-scroll.js also
 * measures the real #wpadminbar height on load/resize and overwrites this
 * variable — belt-and-suspenders in case a caching/optimization plugin
 * ever interferes with WordPress's own `html { margin-top }` bump, which
 * is what's supposed to reserve this same space in the page flow.
 */
:root {
	--admin-bar-height: 0px;
}

body.admin-bar {
	--admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}

body.admin-bar .site-header {
	top: var(--admin-bar-height);
}

.header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.3rem;
	animation: fadeUp 0.8s ease both;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	order: 1;
}

.site-branding-inner {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	min-height: 0;
}

.custom-logo-link img {
	max-height: 56px;
	width: auto;
	max-width: 100%;
}

.site-title a,
.site-description {
	color: #fff8ef;
	text-decoration: none;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-description {
	margin: 0.2rem 0 0;
	font-size: 0.9rem;
	opacity: 0.85;
}

.main-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 auto;
	margin-left: auto;
	gap: 1.1rem;
	order: 2;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: nowrap;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	color: #fff8ef;
	text-decoration: none;
	padding: 0.6rem 0.85rem;
	border-radius: 999px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation li:hover > a {
	background: rgba(255, 185, 112, 0.16);
	color: var(--brand-accent);
	transform: translateY(-1px);
	text-decoration: none;
}

.main-navigation .menu-item-has-children > a::after {
	content: "▾";
	font-size: 0.8rem;
	opacity: 0.8;
}

.main-navigation .sub-menu {
	position: absolute;
	top: calc(100% + 0.2rem);
	left: 0;
	min-width: 14rem;
	background: var(--brand-dark);
	box-shadow: var(--shadow-soft);
	border-radius: 1rem;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	z-index: 20;
}

.main-navigation .sub-menu li {
	position: relative;
	width: 100%;
}

.main-navigation .sub-menu a {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.9rem;
	border-radius: 0.6rem;
	line-height: 1.3;
	white-space: normal;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu .sub-menu {
	left: calc(100% + 0.3rem);
	top: -0.5rem;
	margin-left: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	margin-left: 0.8rem;
	order: 3;
}

.header-actions .site-header-cart {
	display: flex;
	align-items: center;
}

.site-header-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header-cart a {
	color: #fff8ef;
	text-decoration: none;
	padding: 0.55rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	white-space: nowrap;
	display: inline-block;
	min-width: fit-content;
}

/* Mobile-only header pieces: irrelevant on desktop, where the full pill
   menu is always visible and there's room for an inline search widget in
   the sidebar instead. */
.header-search-row {
	display: none;
}

.submenu-toggle {
	display: none;
}

.site-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 2rem 4rem;
}

.site-main {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.page-title {
	text-align: center;
	margin-bottom: 1.5rem;
}

/*
 * Side padding is fluid, not fixed: it scales linearly with viewport width
 * between the 1240px breakpoint below (where it settles at 2rem, matching
 * that breakpoint's own value exactly, so there's no visible jump) and
 * 1600px (where it reaches the full 200px). Below 1240px the media query
 * takes over with its own fixed value. Without this, 200px stayed constant
 * all the way down to the breakpoint, so shrinking the window ate *only*
 * into the grid's card columns (percentage-width) — cards got squeezed
 * while the gutters sat still. Now the gutters absorb their share of the
 * shrinkage too, so cards scale down more gently across that range.
 */
.content-area {
	padding: 30px clamp(2rem, 47vw - 550px, 200px);
	display: grid;
	grid-template-columns: minmax(0, 2fr) 320px;
	gap: 1.5rem;
	align-items: start;
}

.post {
	background: rgba(255, 255, 255, 0.56);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 1.35rem;
	padding: 1.3rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(24, 13, 8, 0.15);
}

.post .wp-post-image {
	border-radius: 1rem;
	margin-bottom: 1rem;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.widget-area {
	background: rgba(255, 247, 235, 0.55);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.38);
	box-shadow: var(--shadow-soft);
	border-radius: 1.3rem;
	padding: 1.3rem;
	margin-left: 0.7rem;
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--brand-muted);
	margin-bottom: 0.8rem;
}

.aws-search-widget input[type="search"] {
	width: 100%;
	border-radius: 999px;
	border: 1px solid rgba(24, 13, 8, 0.12);
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.78);
}

.social-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.social-links-list a {
	color: var(--brand-dark);
	text-decoration: none;
	font-weight: 600;
}

.site-footer {
	padding: 1.5rem 1.3rem 2.25rem;
	margin-top: 2rem;
}

.footer-shell {
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(24, 13, 8, 0.8);
	color: #fff8ef;
	border-radius: 1.4rem;
	padding: 1.2rem 1.3rem;
	backdrop-filter: blur(16px);
	box-shadow: var(--shadow-soft);
}

.footer-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0;
	margin: 0 0 0.8rem;
}

.footer-links a,
.site-info a {
	color: #fff8ef;
	text-decoration: none;
}

.woocommerce ul.products {
	display: flex;
	justify-content: flex-start;
	/* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
	gap: 1.35rem;
}

.woocommerce ul.products li.product {
	position: relative;
	background: rgba(255, 255, 255, 0.56);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 1.35rem;
	padding: 1rem;
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	animation: fadeUp 0.8s ease both;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	background: rgba(255, 245, 231, 0.86);
	box-shadow: 0 24px 48px rgba(24, 13, 8, 0.2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--brand-dark);
	font-size: 1rem;
	margin-top: 0.8rem;
	min-height: 2.6rem;
}

.woocommerce ul.products li.product .price {
	color: var(--brand-warm);
	font-weight: 700;
	font-size: 1.05rem;
}

.woocommerce ul.products li.product .button {
	background: linear-gradient(135deg, var(--brand-warm), var(--brand-accent));
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.7rem 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(201, 122, 62, 0.24);
}

.product-glow-badge {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	background: linear-gradient(135deg, rgba(24, 13, 8, 0.92), rgba(201, 122, 62, 0.95));
	color: #fff;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 8px 16px rgba(24, 13, 8, 0.2);
}

.woocommerce .onsale {
	background: var(--brand-warm);
	border-radius: 999px;
	padding: 0.4rem 0.7rem;
}

/* --------------------------------------------------------------
   Compact header + layout (tablets and phones)

   One breakpoint, not two: tablets (601-1240px) get the exact same
   grid-template-areas header, hamburger menu and single-column
   content-area/sidebar-below-products stacking as phones — the only
   thing that's still different at tablet width is the product grid's
   column count (4 instead of phones' 2), handled separately in
   additional-styles.css since it doesn't need any of the header
   machinery below. 1240px (not the original 900px) because a 4-column
   product grid plus the 320px widget sidebar left too little room per
   card between ~900-1240px — text and images got cramped and hard to
   read there, so that whole range now gets the wider tablet layout
   instead of trying to force a desktop grid into it.
   -------------------------------------------------------------- */
@media (max-width: 1240px) {
	.site-header {
		padding: 0.7rem 0;
	}

	.header-shell,
	.site-content,
	.site-footer {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	/*
	 * Two explicit rows via grid-template-areas (not flex + order): the
	 * logo sits alone on its own full-width row so it can collapse away
	 * on scroll without disturbing anything else, while the hamburger,
	 * search field and cart share the row below and always stay put —
	 * they're primary nav/search/checkout access and scrolling shouldn't
	 * hide any of them, so that row's height never touches is-compact.
	 *
	 * min-width: 0 on the grid items below matters, not just for looks:
	 * grid items (like flex items) default to min-width: auto, which
	 * floors them at their content's natural, unwrapped width. Without it,
	 * the logo/title on row 1 and the hamburger+search+cart trio on row 2
	 * can each individually force this row wider than the viewport, and
	 * since nothing wraps, the excess pushes the cart button past the
	 * header's right edge instead of shrinking to fit.
	 *
	 * No `overflow: hidden` here on purpose: the open nav dropdown
	 * (.primary-menu-wrap) is a DOM descendant of this element too (it's
	 * nested inside #site-navigation), and while it's *positioned*
	 * relative to #masthead (top: 100%), it still gets clipped by any
	 * overflow:hidden ancestor it's nested under along the way — which
	 * made the dropdown invisible/unopenable when this was hidden here.
	 * The logo row's own collapse-clipping is handled by .site-branding's
	 * own overflow: hidden below instead, which doesn't have that problem.
	 */
	.header-shell {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"logo logo logo"
			"hamburger search cart";
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 0.6rem;
		row-gap: 0.5rem;
		transition: grid-template-rows 0.35s ease, row-gap 0.35s ease;
	}

	.site-header.is-compact .header-shell {
		grid-template-rows: 0fr auto;
		row-gap: 0;
	}

	#site-navigation.main-navigation {
		grid-area: hamburger;
		min-width: 0;
	}

	.site-branding {
		grid-area: logo;
		justify-self: center;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		opacity: 1;
		transition: opacity 0.25s ease;
	}

	.site-branding-inner {
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	/*
	 * min-width: 0 fixes the same class of bug the site-title ellipsis
	 * rule below already handles, but for the *image* logo instead of the
	 * text one: .custom-logo-link is a flex item of .site-branding-inner,
	 * and flex items default to min-width: auto — floored at their
	 * content's natural width, which for a link wrapping an <img> is
	 * whatever width the image renders at. A logo image sized via
	 * `max-height: 56px; width: auto` (style.css, base rules) computes
	 * that width from its own aspect ratio only, with zero regard for how
	 * much horizontal room is actually available here — so a wide (e.g.
	 * two-line) logo graphic can force this whole row, and the header
	 * along with it, wider than the viewport. min-width: 0 here plus
	 * max-width: 100% on the image itself (style.css, base rules) lets it
	 * shrink to fit instead.
	 */
	.site-branding-inner .custom-logo-link {
		min-width: 0;
		flex-shrink: 1;
	}

	.site-branding-inner .site-title {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Logo/title fades away while scrolling down; row 2 (hamburger, search,
	   cart) is untouched. Scrolling back up (or being near the top)
	   restores it. */
	.site-header.is-compact .site-branding {
		opacity: 0;
		pointer-events: none;
	}

	.header-actions {
		grid-area: cart;
		min-width: 0;
		margin-left: 0;
	}

	/* Hamburger toggle, restyled as an icon-only pill matching the cart
	   button instead of the plain bordered text button it used to be. */
	.menu-toggle {
		position: relative;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 999px;
		background: rgba(201, 122, 62, 0.15);
		color: #fff8ef;
		cursor: pointer;
		flex-shrink: 0;
	}

	.menu-toggle:hover,
	.menu-toggle:focus-visible {
		border-color: var(--brand-accent);
		outline: none;
	}

	.menu-toggle-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 13px;
		transform: translate(-50%, -50%);
	}

	.menu-toggle-icon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
	}

	.menu-toggle-icon span:nth-child(1) {
		top: 0;
	}

	.menu-toggle-icon span:nth-child(2) {
		top: 5.5px;
	}

	.menu-toggle-icon span:nth-child(3) {
		top: 11px;
	}

	/* 3 stripes -> cross when the panel is open. */
	#site-navigation.toggled .menu-toggle-icon span:nth-child(1) {
		top: 5.5px;
		transform: rotate(45deg);
	}

	#site-navigation.toggled .menu-toggle-icon span:nth-child(2) {
		opacity: 0;
	}

	#site-navigation.toggled .menu-toggle-icon span:nth-child(3) {
		top: 5.5px;
		transform: rotate(-45deg);
	}

	/* Dropdown menu panel: absolutely positioned against #masthead (the
	   nearest positioned ancestor, thanks to its position:sticky) so it
	   always starts right at the header's own bottom edge, whether the
	   logo row is expanded or collapsed. */
	.main-navigation .primary-menu-wrap {
		display: none;
	}

	#site-navigation.toggled .primary-menu-wrap {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background: var(--brand-dark);
		padding: 0.6rem 0.9rem 1rem;
		box-shadow: var(--shadow-soft);
		z-index: 998;
	}

	#site-navigation.toggled .primary-menu-wrap ul#primary-menu {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	/*
	 * !important below is deliberate, not laziness: this element is also
	 * targeted by an unconditional (non-media-scoped) desktop rule that
	 * sets `display: flex` plus a `li:hover > .sub-menu, li:focus-within >
	 * .sub-menu { opacity: 1; visibility: visible }` rule with HIGHER
	 * specificity than a plain `.main-navigation .sub-menu` selector can
	 * reach. That second rule matters here specifically because tapping
	 * the toggle <button> focuses it, and the button lives inside the same
	 * <li> as the .sub-menu — so `:focus-within` on the <li> goes true the
	 * moment the toggle is tapped, at which point that desktop rule would
	 * force the submenu visible on its own, independent of the
	 * .submenu-open class this file's JS is toggling. !important removes
	 * any ambiguity about which of those rules wins.
	 */
	.main-navigation .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.06);
		margin: 0.2rem 0 0.3rem;
		width: 100%;
		display: none !important;
	}

	.main-navigation .menu-item-has-children.submenu-open > .sub-menu {
		display: flex !important;
	}

	/* Split "has children" items into a link (navigates) and a toggle
	   (expands) instead of the link swallowing the first tap. */
	.main-navigation .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-navigation .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.main-navigation .menu-item-has-children > a::after {
		display: none !important;
	}

	.main-navigation .menu-item-has-children > .sub-menu {
		flex: 1 1 100%;
		width: 100%;
	}

	.submenu-toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		margin: 0 0.2rem 0 0.2rem;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 999px;
		color: #fff8ef;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.submenu-toggle:hover,
	.submenu-toggle:focus-visible {
		background: rgba(255, 255, 255, 0.1);
		outline: none;
	}

	.submenu-toggle-icon {
		display: block;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.menu-item-has-children.submenu-open > .submenu-toggle .submenu-toggle-icon {
		transform: rotate(180deg);
	}

	/* Search field: shares row 2 with the hamburger and the cart, and
	   (per row 2 above) stays visible regardless of scroll position or
	   whether the nav dropdown is open. */
	.header-search-row {
		grid-area: search;
		display: block;
		min-width: 0;
		padding: 0;
	}

	.header-search {
		min-width: 0;
		width: 100%;
	}

	.content-area {
		grid-template-columns: 1fr;
		padding: 1.25rem 0.9rem;
		gap: 1rem;
	}

	.widget-area {
		margin-left: 0;
	}

	.site-content {
		padding: 1.5rem 0.9rem 2rem;
	}

	/* Product grid column count / card padding for phones lives in
	   additional-styles.css, which loads after this file and after
	   woocommerce.css and would otherwise silently win any tie here. */

	.post .wp-post-image {
		height: 200px;
	}

	.post {
		padding: 1rem;
	}
}

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
/* button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
} */

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
/* [type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
} */

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-right: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

/*
 * Matches the compact-header breakpoint above (the hamburger toggle needs
 * to stay visible through tablet widths now that tablets use the same
 * hamburger-driven header as phones) — px here rather than em specifically
 * so a browser font-size override can't drift it out of sync with that
 * other (px-based) breakpoint. This used to be the underscores-default
 * 37.5em (600px); if the compact-header breakpoint above ever moves again,
 * this needs to move with it.
 */
@media screen and (min-width: 1240px) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
        justify-content: flex-end;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
/*
 * The old duplicated max-width:768px/480px blocks that used to live here
 * have been folded into the single mobile block above (search for
 * "Mobile header + layout (phones)"), which now also owns the 2-column
 * product grid and header/nav layout for phones.
 */
@media (max-width: 480px) {
.site-title {
font-size: 1rem;
}
}

/*
 * Сортировка отзывов на странице товара (сначала новые/старые, по
 * оценке) — тот же выпадающий список, что и сортировка каталога
 * (.woocommerce-ordering select.orderby в additional-styles.css), поэтому
 * своих стилей для самого <select> не нужно, только сброс float у
 * обёртки: в тулбаре каталога .woocommerce-ordering плавает вправо рядом
 * со счётчиком товаров, а тут он один в блоке отзывов.
 * Разметка — woocommerce/single-product-reviews.php, логика ?review_sort=
 * в inc/woocommerce.php (theme_slug_review_sort_query_args()).
 */
.theme-slug-review-sort.woocommerce-ordering {
	float: none;
	margin: 0 0 20px;
}