/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* PPB 2026-09-07: show the header purchase action from 1200px only. */
@media (max-width: 1199.98px) {
	#site-header.site-header .ppb-buy-container {
		display: none !important;
	}

	/* Keep the menu toggle on the right when the purchase action is hidden. */
	#site-header.site-header .site-logo {
		margin-right: auto !important;
	}
}

@media (min-width: 1200px) {
	#site-header.site-header .ppb-buy-container {
		display: flex !important;
	}
}

/* Reserve space for the 96px logo and 200px button on smaller desktops. */
@media (min-width: 1200px) and (max-width: 1599px) {
	#site-header #ppb-main-menu {
		left: 160px !important;
		right: 256px !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
	}

	#site-header #ppb-main-menu > .e-con-inner {
		width: 100% !important;
		column-gap: clamp(16px, 2vw, 32px) !important;
		justify-content: space-between !important;
	}
}
/* /PPB 2026-09-07: header purchase breakpoint and navigation spacing. */

/* PPB 2026-09-07: place the smaller mobile footer logo beside the address.
 * Flatten only the contact layout wrapper so both share the first grid row.
 */
@media (max-width: 767px) {
	#footer.site-footer .footer-inner {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			"logo address"
			"phone phone"
			"email email"
			"rights rights"
			"buttons buttons"
			"legal legal";
		gap: 16px;
		padding: 32px 0 !important;
	}

	#footer.site-footer .footer-contacts {
		display: contents !important;
	}

	#footer.site-footer .footer-logo,
	#footer.site-footer .footer-logo .elementor-widget-container,
	#footer.site-footer .footer-logo img {
		width: 64px;
		height: 64px;
	}

	#footer.site-footer .footer-logo {
		align-self: center;
	}

	#footer.site-footer .footer-contact--address { grid-area: address; }
	#footer.site-footer .footer-contact--phone { grid-area: phone; }
	#footer.site-footer .footer-contact--email { grid-area: email; }
	#footer.site-footer .footer-rights { grid-area: rights; }

	#footer.site-footer .footer-buttons,
	#footer.site-footer .footer-legal {
		margin-top: 16px;
	}
}
/* /PPB 2026-09-07: compact mobile footer. */

/* PPB 2026-09-07: align the mobile logo and keep header actions 10px apart.
 * A block link removes the inline baseline space below the logo image.
 */
@media (max-width: 768px) {
	#site-header.site-header {
		column-gap: 10px !important;
	}

	#site-header.site-header > .elementor-element.elementor-element-ppb15001 {
		margin-left: 0 !important;
	}

	#site-header .site-logo a {
		display: block;
	}
}
/* /PPB 2026-09-07: mobile header alignment. */

/* PPB 2026-09-07: alternate solid product backgrounds on phones.
 * The section class overrides the Customizer's ID-based background images.
 * Beige repeats the mobile hero; pale blue follows the site's blue palette.
 */
@media (max-width: 767px) {
	#product-presentation-classic.product-presentation,
	#product-presentation-fresh-grass.product-presentation {
		background: #f7eee5 !important;
	}

	#product-presentation-pure-cotton.product-presentation,
	#product-presentation-magic-white.product-presentation {
		background: #eaf4fc !important;
	}
}
/* /PPB 2026-09-07: mobile product backgrounds. */

/* PPB 2026-09-07: give the Ecoproduct video a full-size containing block.
 * Elementor's HTML widget otherwise has zero height on mobile/tablet.
 * Keep the poster visible until the existing playback script marks it ready.
 */
#natural-values .natural-values-media .elementor-element-ppb29203,
#natural-values .elementor-element-ppb29203 > .elementor-widget-container {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2;
}

#natural-values .natural-values-media .natural-values-video {
	opacity: 0 !important;
}

#natural-values .natural-values-media .natural-values-video.is-ready {
	opacity: 1 !important;
}
/* /PPB 2026-09-07: responsive Ecoproduct video. */

/* PPB 2026-09-07: calm, solid hero background on phones (Elementor mobile).
 * Remove the cat photo, video and whitening overlay below 768px.
 */
@media (max-width: 767px) {
	#hero.site-hero,
	#hero .hero-background {
		background: #f7eee5 !important;
	}

	#hero .hero-background::after,
	#hero .hero-bg-video {
		display: none !important;
	}
}
/* /PPB 2026-09-07: mobile hero background. */

/* PPB 2026-09-07: reduce Ozon by 25% to balance the retailer logos.
 * Scale around the centre, retaining the card layout and responsive sizing.
 */
#where-to-buy .where-to-buy-logo--1 img {
	transform: scale(.75);
	transform-origin: center;
}
/* /PPB 2026-09-07: Ozon logo size. */

/* PPB 2026-09-07: Figma product badges at every responsive breakpoint.
 * Existing section CSS provides spacing and responsive badge dimensions.
 * The extra class limits these overrides to the restored label markup.
 */
.product-presentation .product-presentation-eyebrow span.ppb-product-badge {
	background: #0b3d87 !important;
	color: #fff !important;
	text-transform: none !important;
	white-space: nowrap;
}

.product-presentation .product-presentation-eyebrow span.ppb-product-badge--size {
	background: #fff !important;
	color: #071d2f !important;
}
/* /PPB 2026-09-07: product badges. */

/* Keep the tablet navigation visually balanced: every item occupies one
 * equal column and its label is centred within that column. */
@media (min-width: 769px) and (max-width: 1024px) {
	#ppb-main-menu > .e-con-inner {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: center;
		width: 100%;
	}

	#ppb-main-menu .ppb-menu-link,
	#ppb-main-menu .elementor-heading-title {
		width: 100% !important;
		text-align: center;
	}
}

/* Use the compact navigation pattern at 768 px and below. */
@media (max-width: 768px) {
	#ppb-main-menu {
		display: none !important;
	}

	#site-header.is-menu-open #ppb-main-menu {
		display: flex !important;
	}

	#ppb-main-menu > .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100%;
		gap: 18px;
	}

	#ppb-main-menu .ppb-menu-link,
	#ppb-main-menu .elementor-heading-title {
		width: 100% !important;
		text-align: left;
	}
}

/*
 * Pi-Pi Bent: regular pages and posts
 *
 * The homepage is an Elementor Canvas document and never receives the
 * .ppb-internal-page class, so these rules cannot alter its approved layout.
 */
@font-face {
	font-family: 'PPB Inter';
	src: url('assets/fonts/inter-cyrillic-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.ppb-internal-page {
	--ppb-blue: #0b3d87;
	--ppb-ink: #071d2f;
	--ppb-soft-blue: #ddeefe;
	background: #f8fbff;
	color: var(--ppb-ink);
	font-family: 'PPB Inter', Inter, Arial, sans-serif;
}

.ppb-page-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid rgba(7, 29, 47, .12);
	box-shadow: 0 4px 18px rgba(7, 29, 47, .06);
}

.ppb-page-header__inner,
.ppb-page-footer__inner {
	width: min(1504px, calc(100% - 64px));
	margin: 0 auto;
}

.ppb-page-header__inner {
	min-height: 104px;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
}

.ppb-page-header__brand img {
	display: block;
	width: 96px;
	height: 71px;
	object-fit: contain;
}

.ppb-page-header__nav {
	display: flex;
	justify-content: center;
	gap: 28px;
}

.ppb-page-header a,
.ppb-page-footer a {
	color: inherit;
	text-decoration: none;
}

.ppb-page-header__nav a {
	position: relative;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
}

.ppb-page-header__nav a::after {
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	height: 2px;
	background: #50a2dc;
	content: '';
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .2s ease;
}

.ppb-page-header__nav a:hover,
.ppb-page-header__nav a:focus-visible { color: var(--ppb-blue); }
.ppb-page-header__nav a:hover::after,
.ppb-page-header__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.ppb-page-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--ppb-blue);
	color: #fff !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .04em;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ppb-page-header__cta:hover,
.ppb-page-header__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 61, 135, .28); }
.ppb-page-header__mobile-menu { display: none; }

.ppb-content-main { padding: 72px 0 112px; }
.ppb-content-article { width: min(960px, calc(100% - 40px)); margin: 0 auto; }

.ppb-content-hero {
	padding: 56px clamp(28px, 6vw, 88px);
	border-radius: 40px;
	background: linear-gradient(135deg, #e9f4ff 0%, #d9ecfe 56%, #f7fbff 100%);
	box-shadow: 0 18px 44px rgba(7, 29, 47, .08);
}

.ppb-content-hero__eyebrow,
.ppb-content-hero__meta {
	margin: 0;
	color: #4c7197;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}

.ppb-content-hero__eyebrow { display: flex; flex-wrap: wrap; gap: 9px; }
.ppb-content-hero__eyebrow a { color: var(--ppb-blue); text-decoration: none; }
.ppb-content-hero .entry-title {
	max-width: 760px;
	margin: 18px 0 0;
	color: var(--ppb-blue);
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.035em;
}
.ppb-content-hero__meta { margin-top: 20px; }

.ppb-content-body {
	margin: 48px auto 0;
	max-width: 736px;
	font-size: 18px;
	line-height: 1.65;
}

.ppb-content-body > :first-child { margin-top: 0; }
.ppb-content-body p,
.ppb-content-body ul,
.ppb-content-body ol { margin: 0 0 24px; }
.ppb-content-body h2,
.ppb-content-body h3 { margin: 56px 0 20px; color: var(--ppb-blue); font-weight: 900; line-height: 1.15; }
.ppb-content-body h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; }
.ppb-content-body h3 { font-size: clamp(24px, 3vw, 30px); }
.ppb-content-body li + li { margin-top: 10px; }
.ppb-content-body a { color: var(--ppb-blue); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ppb-content-body blockquote { margin: 36px 0; padding: 24px 28px; border-left: 5px solid #76b6e5; border-radius: 0 24px 24px 0; background: #edf7ff; color: var(--ppb-blue); font-size: 20px; font-weight: 700; }
.ppb-content-body .wp-block-button { margin: 32px 0; }
.ppb-content-body .wp-block-button__link { border-radius: 999px; background: var(--ppb-blue); color: #fff; padding: 16px 26px; text-decoration: none; }
.ppb-content-body figure { margin: 36px 0; }
.ppb-content-body img { height: auto; border-radius: 24px; }
.ppb-content-tags { max-width: 736px; margin: 40px auto 0; color: #4c7197; font-size: 14px; }

.ppb-page-footer { background: var(--ppb-blue); color: #fff; }
.ppb-page-footer__inner { display: grid; grid-template-columns: 96px 1.55fr 1fr; gap: 32px; padding: 48px 0 36px; align-items: start; }
.ppb-page-footer__brand img { display: block; width: 96px; height: 96px; object-fit: contain; }
.ppb-page-footer p { margin: 0; font-size: 14px; line-height: 1.55; }
.ppb-page-footer__contacts { display: grid; grid-template-columns: 1.5fr .85fr 1fr; gap: 24px; }
.ppb-page-footer strong { color: rgba(255, 255, 255, .72); font-size: 12px; letter-spacing: .03em; }
.ppb-page-footer a:hover,
.ppb-page-footer a:focus-visible { color: #a9d9ff; text-decoration: underline; text-underline-offset: 3px; }
.ppb-page-footer__legal { text-align: right; }
.ppb-page-footer__legal-links { display: grid; justify-content: end; gap: 4px; margin-top: 20px; font-size: 13px; }
.ppb-page-footer__actions { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: 16px; }
.ppb-page-footer__button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 12px; padding: 0 32px; border-radius: 40px; font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.ppb-page-footer__button:hover,
.ppb-page-footer__button:focus-visible { color: inherit; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.ppb-page-footer__button img { display: block; object-fit: contain; }
.ppb-page-footer__button--site { background: #fff; color: var(--ppb-ink) !important; }
.ppb-page-footer__button--telegram { background: #37aee2; color: #fff !important; }
.ppb-page-footer__button--vk { background: #0077ff; color: #fff !important; }
.ppb-page-footer__bottom { width: min(1504px, calc(100% - 64px)); margin: 0 auto; padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .72); font-size: 12px; }

@media (max-width: 1100px) {
	.ppb-page-header__inner { grid-template-columns: 96px 1fr auto; gap: 24px; }
	.ppb-page-header__nav { gap: 16px; }
	.ppb-page-header__nav a { font-size: 10px; }
	.ppb-page-footer__inner { grid-template-columns: 96px 1fr; }
	.ppb-page-footer__legal { text-align: left; grid-column: 2; }
	.ppb-page-footer__legal-links { justify-content: start; }
	.ppb-page-footer__actions { grid-column: 2; }
}

@media (max-width: 768px) {
	.ppb-page-header__inner,
	.ppb-page-footer__inner,
	.ppb-page-footer__bottom { width: min(100% - 40px, 540px); }
	.ppb-page-header__inner { min-height: 72px; grid-template-columns: 62px 1fr auto; gap: 12px; }
	.ppb-page-header__brand img { width: 62px; height: 46px; }
	.ppb-page-header__nav { display: none; }
	.ppb-page-header__cta { min-height: 42px; padding: 0 16px; font-size: 11px; }
	.ppb-page-header__mobile-menu { display: block; position: relative; }
	.ppb-page-header__mobile-menu summary { display: grid; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--ppb-blue); cursor: pointer; list-style: none; place-content: center; gap: 4px; }
	.ppb-page-header__mobile-menu summary::-webkit-details-marker { display: none; }
	.ppb-page-header__mobile-menu summary span { display: block; width: 18px; height: 2px; background: #fff; }
	.ppb-page-header__mobile-menu nav { position: absolute; top: calc(100% + 13px); right: 0; width: min(280px, calc(100vw - 40px)); padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 16px 36px rgba(7, 29, 47, .18); }
	.ppb-page-header__mobile-menu nav a { display: block; padding: 12px 6px; color: var(--ppb-ink); font-size: 14px; font-weight: 800; text-decoration: none; }
	.ppb-content-main { padding: 36px 0 64px; }
	.ppb-content-article { width: min(100% - 40px, 640px); }
	.ppb-content-hero { padding: 34px 24px; border-radius: 28px; }
	.ppb-content-body { margin-top: 32px; font-size: 17px; }
	.ppb-content-body h2 { margin-top: 42px; }
	.ppb-page-footer__inner { grid-template-columns: 1fr; padding: 40px 0 28px; }
	.ppb-page-footer__brand { justify-self: start; }
	.ppb-page-footer__contacts { grid-template-columns: 1fr; gap: 16px; }
	.ppb-page-footer__legal { grid-column: auto; text-align: left; }
	.ppb-page-footer__legal-links { justify-content: start; }
	.ppb-page-footer__actions { grid-column: auto; display: grid; grid-template-columns: 1fr; gap: 12px; }
	.ppb-page-footer__button { width: 100%; }
	.ppb-page-footer__bottom { padding: 16px 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.ppb-page-header__nav a::after,
	.ppb-page-header__cta { transition: none; }
}