@media (min-width: 45rem) {
	:root { --psmix-gutter: 2.5rem; }
}

/* Header — v23 breakpoints (menu hidden ≤1080, compact ≤720) */
@media (min-width: 1081px) {
	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		width: auto;
		z-index: auto;
		flex: 1 1 auto;
	}

	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

@media (max-width: 1080px) {
	:root {
		--psmix-anchor-offset: 9rem;
		/* Burger folded onto the search row; size + gap reserve space in the field. */
		--psmix-burger-size: 44px;
		--psmix-burger-gap: 12px;
		--psmix-search-row-height: 46px;
		/* Distance from the viewport top to the search row when the header is stuck. */
		--psmix-search-row-top: 80px;
	}

	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container-open {
		display: grid;
		width: 44px;
		height: 44px;
		box-sizing: border-box;
		place-items: center;
		border: 1px solid var(--ps-line);
		border-radius: var(--radius-nav-button);
		color: var(--ps-ink);
		background: var(--ps-white);
	}

	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container-open svg {
		width: 20px;
		height: 20px;
	}

	/* Search drops to its own full-width row; the menu trigger joins that row. */
	.psmix-site-header .psmix-nav {
		flex-wrap: wrap;
		row-gap: 8px;
		padding-block: 10px;
	}

	.psmix-site-header .psmix-nav__actions {
		order: 2;
		margin-left: auto;
	}

	.psmix-site-header .psmix-header-search {
		order: 3;
		flex: 1 1 100%;
		min-width: 0;
		padding-right: calc(var(--psmix-burger-size) + var(--psmix-burger-gap));
	}

	/*
	 * The menu row is folded onto the search row on smaller screens, so the
	 * header keeps its two-row shape with no third, menu-only strip. The navbar
	 * is lifted by the search row height plus the row's bottom padding and made
	 * sticky at the search row's offset, so the trigger stays put while the rest
	 * of the page scrolls. It stays click-through so the field underneath remains
	 * usable, and the trigger re-enables pointer events.
	 */
	.psmix-site-header .psmix-navbar {
		position: sticky;
		top: var(--psmix-search-row-top);
		z-index: 81;
		height: var(--psmix-search-row-height);
		min-height: 0;
		margin-top: calc(-1 * (var(--psmix-search-row-height) + 10px));
		padding-block: 0;
		justify-content: flex-end;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
		pointer-events: none;
	}

	.psmix-site-header .psmix-menu {
		flex: 0 0 auto;
		pointer-events: auto;
	}

	/*
	 * While the catalog drawer is modal its backdrop sits inside the header's
	 * stacking context, below the folded navbar. Hide the navbar so the trigger
	 * cannot paint above the drawer.
	 */
	body.psmix-drawer-open .psmix-site-header .psmix-navbar {
		visibility: hidden;
	}

	/* The menu row no longer paints the block, so the header carries the shape. */
	.psmix-site-header .psmix-header {
		border-radius: 0 0 var(--radius-card-mobile) var(--radius-card-mobile);
		box-shadow: 0 10px 30px rgb(21 21 21 / 0.06);
	}
}

@media (max-width: 720px) {
	:root {
		--psmix-burger-size: 40px;
		--psmix-search-row-height: 42px;
		--psmix-search-row-top: 73px;
	}
	body {
		--psmix-section-space: var(--wp--preset--spacing--8);
		--psmix-card-padding: var(--wp--preset--spacing--4);
	}

	.psmix-header { width: min(100% - 24px, var(--container)); }
	.psmix-header.is-stuck { border-radius: 0 0 var(--radius-card-mobile) var(--radius-card-mobile); }
	.psmix-navbar { width: min(100% - 24px, var(--container)); padding-inline: 12px; border-radius: 0 0 var(--radius-card-mobile) var(--radius-card-mobile); }
	.psmix-site-header .psmix-nav { min-height: 68px; gap: 12px; padding-inline: 12px; }
	.psmix-site-header .psmix-logo { width: 85px; }

	.psmix-site-header .psmix-icon-btn,
	.psmix-site-header .psmix-contact-icon,
	.psmix-site-header .psmix-cart .wc-block-mini-cart__button,
	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
		min-height: 40px;
		flex-basis: 40px;
	}

	.psmix-site-header .psmix-catalog-trigger {
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.psmix-site-header .psmix-header-search__form { height: 42px; }
	.psmix-site-header .psmix-header-search__input { padding: 0 12px; font-size: 1rem; }
	.psmix-site-header .psmix-header-search__submit { padding: 0 16px; }

	.psmix-site-header .psmix-catalog-trigger__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (max-width: 460px) {
	:root {
		--psmix-burger-size: 36px;
		--psmix-search-row-top: 61px;
	}

	.psmix-site-header .psmix-logo { width: 70px; }
	.psmix-site-header .psmix-nav { gap: 8px; }
	.psmix-site-header .psmix-nav__actions { gap: 6px; }
	.psmix-site-header .psmix-contact-icons { gap: 6px; }

	.psmix-site-header .psmix-icon-btn,
	.psmix-site-header .psmix-contact-icon,
	.psmix-site-header .psmix-cart .wc-block-mini-cart__button,
	.psmix-site-header .psmix-menu .wp-block-navigation__responsive-container-open,
	.psmix-site-header .psmix-catalog-trigger {
		width: 36px;
		height: 36px;
		min-height: 36px;
		flex-basis: 36px;
	}
}

/* Narrow phones keep the contact icons on the logo row by trimming them further. */
@media (max-width: 360px) {
	.psmix-site-header .psmix-contact-icons { gap: 4px; }
	.psmix-site-header .psmix-contact-icon {
		width: 32px;
		height: 32px;
		min-height: 32px;
		flex-basis: 32px;
	}
	.psmix-site-header .psmix-contact-icon svg {
		width: 16px;
		height: 16px;
	}
}

/* Product grid — v23: 1 column, then 2 from 360px, then 4 centred from 1081px. */
.wc-block-product-template__responsive { grid-template-columns: 1fr !important; }

@media (min-width: 22.5rem) {
	.wc-block-product-template__responsive { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 67.5625rem) {
	.wc-block-product-template__responsive {
		grid-template-columns: repeat(4, minmax(0, 292px)) !important;
		justify-content: center;
	}
}

@media (min-width: 48rem) {
	.psmix-drawer__header { padding: 1.5rem; }
	.psmix-drawer__body { padding: 1.5rem; }
	.psmix-drawer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.psmix-info-panel { scroll-margin-top: 9rem; }
}

@media (min-width: 80rem) {
	.wc-block-product-template .psmix-card__purchase { align-items: flex-end; flex-direction: row; }
	.wc-block-product-template .wc-block-components-product-button__button { width: auto; }
}

@media (min-width: 120rem) {
	.psmix-section { max-width: var(--psmix-wide); }
}

@media (max-width: 22.5rem) {
	.psmix-section-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.psmix-catalog-drawer,
	.psmix-drawer-backdrop { transition: none; }
}

/* Task and product-type sections — homepage reference v23 breakpoints */
.psmix-task-grid {
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: var(--psmix-content-gap);
}

.psmix-task-card {
	min-height: 0;
	padding: 16px 52px 16px 16px;
}

.psmix-task-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-block);
}

.psmix-task-icon svg {
	width: 25px;
	height: 25px;
}

.psmix-task-name {
	margin-top: 12px;
	font-size: 20px;
}

.psmix-task-desc {
	font-size: 14px;
}

.psmix-task-go {
	top: 18px;
	right: 16px;
	width: 34px;
	height: 34px;
}

.psmix-type-grid {
	grid-template-columns: 1fr;
}

.psmix-type-card {
	min-height: 0;
	padding: 16px;
	border-radius: var(--radius-card-mobile);
}

.psmix-type-card h3 {
	font-size: 17px;
}

@media (min-width: 521px) {
	.psmix-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.psmix-type-card { min-height: 168px; }
}

@media (min-width: 681px) {
	.psmix-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: var(--psmix-content-gap); }

	.psmix-task-card {
		min-height: 225px;
		padding: 24px 58px 24px 24px;
	}

	.psmix-task-icon {
		width: 52px;
		height: 52px;
		border-radius: var(--radius-icon);
	}

	.psmix-task-icon svg {
		width: 29px;
		height: 29px;
	}

	.psmix-task-name {
		margin-top: 24px;
		font-size: 24px;
	}

	.psmix-task-desc {
		font-size: 14px;
	}

	.psmix-task-go {
		top: 24px;
		right: 22px;
		width: 38px;
		height: 38px;
	}
}

@media (min-width: 721px) {
	.psmix-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.psmix-type-card { min-height: 176px; padding: 20px; border-radius: var(--radius-card); }
	.psmix-type-card h3 { font-size: 18px; }
}

@media (min-width: 981px) {
	.psmix-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.psmix-type-card { min-height: 168px; }
}

@media (min-width: 1025px) {
	.psmix-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.psmix-task-card { min-height: 250px; }
}

@media (min-width: 1280px) {
	.psmix-type-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.psmix-type-card { min-height: 192px; }
}

@media (max-width: 720px) {
	.psmix-tasks,
	.psmix-types { padding: var(--psmix-section-space) 0; }

	.psmix-products { padding-top: var(--psmix-section-space); }

	.psmix-tasks-container,
	.psmix-types-container { width: min(100% - 24px, var(--container)); }

	.psmix-types .psmix-section-heading { display: block; }
	.psmix-types .psmix-heading-link { margin-top: 20px; }
	.psmix-types .psmix-text-link { font-size: 0.875rem; }

	/* Title and action sizes adapt independently of the shared technical-chip scale. */
	.wc-block-product-template .wp-block-post-title { margin-bottom: 8px; font-size: var(--pc-card-name-font-size); }
	.wc-block-product-template .wc-block-components-product-price { font-size: 0.9375rem; }
	.wc-block-product-template .psmix-availability { gap: 5px; margin-top: 4px; font-size: 0.625rem; }
	.wc-block-product-template .psmix-availability__dot { width: 6px; height: 6px; }
	.wc-block-product-template .psmix-card__purchase { gap: 7px; padding-top: 8px; padding-bottom: 10px; }
	.wc-block-product-template .wc-block-components-product-button__button {
		min-height: 2.5rem;
		padding-inline: 8px;
		text-align: center;
		font-size: 0.875rem;
		white-space: normal;
	}
	.wc-block-product-template .psmix-card-cart { --ps-qty-height: 40px; }
	/* Keep the field at 16px to avoid the iOS input zoom; trim the weight instead. */
	.wc-block-product-template .psmix-card-cart .qty { font-size: 1rem; font-weight: 700; }
}

/* Two-column phone cards keep the full delivery promise on one line. */
@media (min-width: 22.5rem) and (max-width: 45rem) {
	.wc-block-product-template .psmix-product-delivery-badge {
		min-height: 24px;
		gap: 3px;
		margin-inline: 4px;
		padding-inline: 4px;
		font-size: clamp(0.5rem, 2.1vw, var(--pc-card-chip-font-size));
		white-space: nowrap;
	}
	.wc-block-product-template .psmix-product-delivery-badge__icon svg {
		width: 10px;
		height: 10px;
	}
}

/* Hero slider + trust strip — homepage reference v23 breakpoints */
@media (max-width: 1080px) {
	.psmix-hero-slider { height: auto; }
	.psmix-hero-track,
	.psmix-hero-slide { height: auto; }
	.psmix-hero-slide { grid-template-columns: 1fr; }
	.psmix-hero-copy { padding: 44px 48px 42px; }
	.psmix-hero-visual,
	.psmix-brand-stage { min-height: 390px; }
	.psmix-hero-slide--pay .psmix-hero-copy,
	.psmix-hero-slide--delivery .psmix-hero-copy { padding: 38px 44px 42px; }
	.psmix-hero-slide--pay .psmix-hero-visual,
	.psmix-hero-slide--delivery .psmix-hero-visual { min-height: 320px; }
	.psmix-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.psmix-hero { padding-top: 8px; }
	.psmix-hero-container,
	.psmix-trust-container { width: min(100% - 24px, var(--container)); }
	.psmix-hero-slider {
		--psmix-hero-art-height: clamp(6rem, 30vw, 7rem);
		height: auto;
		border-radius: var(--radius-hero-mobile);
	}
	.psmix-hero-track { height: auto; }

	/* All slides share the tallest content row; zoomed text can grow naturally. */
	.psmix-hero-slide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		height: auto;
		min-height: 22.5rem;
		padding-bottom: 3rem;
	}

	.psmix-hero-slide .psmix-hero-copy {
		min-width: 0;
		justify-content: flex-start;
		padding: 1rem 1rem 0.5rem;
		overflow-wrap: anywhere;
	}

	.psmix-hero-copy > .psmix-hero-mobile-copy { display: block; }
	.psmix-hero-copy > .psmix-hero-desktop-copy,
	.psmix-hero-benefits,
	.psmix-hero-ozon-logo,
	.psmix-hero-slide--brand .psmix-hero-button--white { display: none; }

	.psmix-hero-slide .psmix-hero-kicker {
		margin-bottom: 0.625rem;
		font-size: 0.75rem;
		letter-spacing: 0.05em;
	}

	.psmix-hero-slide .psmix-hero-title {
		font-size: clamp(1.75rem, 7.4vw, 2rem);
		letter-spacing: -0.03em;
		line-height: 1.1;
	}

	.psmix-hero-slide .psmix-hero-copy > p:not(.psmix-hero-kicker) {
		margin-top: 0.75rem;
		font-size: var(--psmix-body-size);
		line-height: 1.5;
	}

	.psmix-hero-slide .psmix-hero-actions { margin-top: 1rem; }
	.psmix-hero-slide .psmix-hero-actions .wp-block-button__link {
		min-height: 2.75rem;
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	.psmix-hero-slide .psmix-hero-visual,
	.psmix-brand-stage {
		height: var(--psmix-hero-art-height);
		min-height: 0;
	}

	.psmix-hero-slide .psmix-hero-visual-image img {
		width: auto;
		max-width: 85%;
		height: auto;
		max-height: calc(var(--psmix-hero-art-height) - 0.5rem);
	}

	.psmix-brand-logo { width: min(48%, 12rem); }
	.psmix-mini-product { width: 3.5rem; border-width: 0.1875rem; }
	.psmix-mini-product--1 { left: 7%; top: 14%; }
	.psmix-mini-product--2 { right: 7%; top: 14%; }
	.psmix-mini-product--3,
	.psmix-mini-product--4 { display: none; }
	.psmix-hero-arrow { display: none; }
	.psmix-hero-dots { bottom: 0.25rem; gap: 0; }
	.psmix-hero-dot { width: 2.75rem; height: 2.75rem; }
	.psmix-trust { padding: 16px 0 24px; }
	.psmix-trust-grid { grid-template-columns: 1fr; gap: 8px; }
	.psmix-trust-item { padding: 12px; gap: 12px; }
	.psmix-trust-icon { width: 40px; height: 40px; flex-basis: 40px; }
}

@media (hover: none) {
	.psmix-hero-arrow { display: none; }
}

@media (max-height: 720px) and (min-width: 1081px) {
	.psmix-hero-slider { height: clamp(430px, -154px + 100svh, 535px); }
	.psmix-hero-copy { padding-top: 30px; padding-bottom: 38px; }
	.psmix-hero-slide--pay .psmix-hero-copy,
	.psmix-hero-slide--delivery .psmix-hero-copy { padding: 26px 44px 36px; }
	.psmix-hero-slide--pay .psmix-hero-title,
	.psmix-hero-slide--delivery .psmix-hero-title { font-size: clamp(32px, 3.55vw, 49px); }
	.psmix-hero-slide--pay .psmix-hero-copy > p:not(.psmix-hero-kicker),
	.psmix-hero-slide--delivery .psmix-hero-copy > p:not(.psmix-hero-kicker) { font-size: 14.5px; line-height: 1.4; }
	.psmix-hero-slide--pay .psmix-hero-benefits,
	.psmix-hero-slide--delivery .psmix-hero-benefits { margin-top: 11px; }
}

/* Ozon / How / Benefits / FAQ / CTA — homepage reference v23 breakpoints */
@media (max-width: 1080px) {
	.psmix-ozon-grid { grid-template-columns: 1fr; }
	.psmix-ozon-card { min-height: 590px; }
	.psmix-steps,
	.psmix-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.psmix-faq-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
	.psmix-ozon-section,
	.psmix-how,
	.psmix-benefits,
	.psmix-faq-section { padding: var(--psmix-section-space) 0; }

	.psmix-ozon-container,
	.psmix-how-container,
	.psmix-benefits-container,
	.psmix-faq-grid,
	.psmix-cta-container { width: min(100% - 24px, var(--container)); }

	.psmix-ozon-heading { display: block; }
	.psmix-ozon-card { min-height: 0; padding: 20px; isolation: isolate; }
	.psmix-ozon-card > :not(.psmix-ozon-art):not(.psmix-delivery-picture) {
		position: relative;
		z-index: 1;
	}
	.psmix-ozon-card h3 { max-width: none; }
	.psmix-ozon-card--pay > p { color: var(--ps-white); }
	.psmix-ozon-card--delivery > p { color: var(--ps-ink); }
	.psmix-ozon-card--pay .psmix-ozon-chip { background: var(--ozon-blue); }
	.psmix-service-badge { margin-bottom: 12px; }
	.psmix-ozon-icons { margin-top: 16px; gap: 0.5rem; }
	.psmix-ozon-card .psmix-ozon-chip {
		padding-inline: 0.5rem;
		gap: 0.375rem;
	}
	.psmix-ozon-card .psmix-ozon-chip::before {
		width: 1.125rem;
		height: 1.125rem;
	}
	.psmix-ozon-chip-label--full { display: none; }
	.psmix-ozon-chip-label--short { display: inline; }
	/* Faded artwork sits below the copy and no longer adds a separate mobile row. */
	.psmix-ozon-art,
	.psmix-delivery-picture--mobile {
		position: absolute;
		left: auto;
		right: -1.5rem;
		bottom: 1rem;
		z-index: 0;
		margin: 0;
		opacity: 0.24;
		pointer-events: none;
		mask-image: linear-gradient(90deg, transparent, #000 75%);
	}
	.psmix-ozon-art {
		width: min(75%, 18rem);
		height: 12rem;
	}
	.psmix-ozon-art img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: right bottom;
	}
	.psmix-delivery-picture--desktop { display: none; }
	.psmix-delivery-picture--mobile {
		display: block;
		right: -1rem;
		bottom: 2.25rem;
		width: min(65%, 15rem);
		aspect-ratio: 2;
		mask-image: radial-gradient(ellipse at 65% 55%, #000 22%, transparent 72%);
	}
	/* The lower half of the square banner contains the van, without printed text. */
	.psmix-delivery-picture--mobile img {
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center bottom;
	}

	.psmix-steps,
	.psmix-benefit-grid { grid-template-columns: 1fr; }
	.psmix-benefit { min-height: 0; }
	.psmix-benefit-icon { width: 40px; height: 40px; }
	.psmix-benefit h3,
	.psmix-step h3 { margin-top: 12px; font-size: 18px; line-height: 1.2; }

	.psmix-cta { padding: 16px 0 var(--psmix-section-space); }
	.psmix-cta-box { grid-template-columns: 1fr; padding: 24px 20px; border-radius: var(--radius-cta-mobile); }
	.psmix-cta-box .wp-block-buttons,
	.psmix-cta-button,
	.psmix-cta-button .wp-block-button__link { width: 100%; }
}

/*
 * Very narrow phones cannot fit the three service chips at their normal size,
 * so the Ozon cards keep one row by tightening only the chip chrome.
 */
@media (max-width: 360px) {
	.psmix-ozon-icons { gap: 0.25rem; }
	.psmix-ozon-card .psmix-ozon-chip {
		padding-inline: 0.25rem;
		gap: 0.25rem;
	}
	.psmix-ozon-card .psmix-ozon-chip::before {
		width: 0.875rem;
		height: 0.875rem;
	}
}

/* Footer and contact block — homepage reference v23 breakpoints */
@media (max-width: 1080px) {
	.psmix-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.psmix-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.psmix-site-footer { width: min(100% - 24px, var(--container)); padding-top: 20px; border-radius: var(--radius-hero-mobile) var(--radius-hero-mobile) 0 0; }
	.psmix-footer-container { padding-inline: 12px; }
	.psmix-footer-utility-actions { align-items: stretch; flex-direction: column; gap: 14px; }
	.psmix-footer-grid { grid-template-columns: 1fr; gap: 12px 16px; }
	/*
	 * The full sitemap already lives in the header drawer on phones, so the
	 * footer drops the link columns and the standalone brand block; a small
	 * inline logo in the copyright line carries the brand instead.
	 */
	.psmix-footer-grid { display: none; }
	.psmix-footer-copyright__logo {
		display: inline-block;
		width: 48px;
		height: auto;
		margin-right: 8px;
		vertical-align: middle;
	}
	.psmix-footer-grid a,
	.psmix-footer-grid .psmix-footer-pending-link { overflow-wrap: anywhere; }
	.psmix-footer-utility { grid-template-columns: 1fr; gap: 14px; margin-bottom: 8px; padding-bottom: 7px; }
	.psmix-contact-open { width: 100%; }
	.psmix-contact-dialog { width: min(calc(100% - 24px), 680px); max-height: calc(100dvh - 24px); border-radius: var(--radius-block); }
	.psmix-contact-dialog__surface { padding: 26px 20px 20px; }
	.psmix-contact-dialog__close { top: 14px; right: 14px; }
	.psmix-contact-dialog__heading { padding-right: 42px; }
	.psmix-contact-form { grid-template-columns: 1fr; }
	.psmix-contact-field--full,
	.psmix-contact-form__bottom { grid-column: auto; }
	.psmix-contact-form__bottom { align-items: stretch; flex-direction: column; }
	.psmix-contact-submit { width: 100%; }
	/* Override the core flex layout so the legal bar centres on phones. */
	.psmix-footer-bottom.is-layout-flex { display: block; text-align: center; }
	.psmix-footer-bottom p + p { margin-top: 8px; }
}
