/*
 * Минимальный набор CSS-правил, не выражаемых через Tailwind utility-классы.
 * Цветовая схема (primary/accent/background/surface) задаётся переменными
 * и динамически переопределяется ThemeSwitcher'ом (см. assets/js/main.js).
 */

/*
 * Цветовые переменные хранятся как RGB-каналы (а не hex). Это нужно, чтобы
 * Tailwind мог использовать утилиты с прозрачностью вида text-primary/60,
 * bg-accent/10, border-primary/5 и т.д. через формат
 *   rgb(var(--color-primary) / <alpha-value>)
 * (см. inc/enqueue.php → tailwind.config.theme.colors).
 *
 * ThemeSwitcher переписывает эти же переменные в JS (assets/js/main.js).
 */

:root {
	--color-primary:     11 27 59;       /* #0b1b3b */
	--color-accent:      8 103 242;      /* #0867f2 */
	--color-background:  248 250 253;    /* #f8fafd */
	--color-surface:     255 255 255;    /* #ffffff */
	--yn-blue:           #0867f2;
	--yn-navy:           #0b1833;
	--yn-muted:          #68758b;
	--yn-line:           #e4eaf3;
	--yn-content:        1280px;
	--yn-radius:         16px;
	--yn-shadow:         0 16px 42px -32px rgba(11, 27, 59, .32);
}

/* Base typography is controlled by Tailwind utilities in templates. */
html, body {
	font-family: Onest, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background-color: rgb(var(--color-background));
	color: rgb(var(--color-primary));
}

::selection {
	background-color: rgb(var(--color-accent));
	color: #ffffff;
}

/* Brand asset: one proportional logo in header, drawer and footer. */
.ynout-brand-link { line-height: 0; }
.ynout-brand-logo {
	display: block;
	width: 132px;
	height: auto;
	max-width: none;
	object-fit: contain;
	object-position: left center;
}
.ynout-brand-logo--mobile { width: 118px; height: auto; }
.ynout-brand-logo--footer {
	width: 124px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: .98;
}
@media (max-width: 479px) {
	.ynout-brand-logo { width: 112px; height: auto; }
}

/*
 * x-cloak: до инициализации Alpine скрываем элементы с x-show/x-cloak,
 * иначе все слайды/таб-гриды/модалки на старте видны одновременно.
 */
[x-cloak] { display: none !important; }

/* Прозрачные «стеклянные» панели. */
.glass-panel {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Скрытие скроллбара. */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Тонкий кастом-скролл (для модалок и сайдбаров). */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.3); }

/* Анимации — продублированы локально, чтобы работало без Tailwind JIT при CDN-задержке. */
@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }

@keyframes float {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-10px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

.ynout-hero {
	height: clamp(360px, 26vw, 440px);
	touch-action: pan-y;
	background: #0B1120;
}
.ynout-breadcrumbs {
	display: flex;
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.product-page .ynout-breadcrumbs {
	display: flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	margin-bottom: .75rem;
}
.product-page .ynout-breadcrumbs ol {
	gap: .375rem;
	font-size: 12px;
	line-height: 1.2;
}
.product-page .ynout-breadcrumb-link,
.product-page .ynout-breadcrumb-current {
	font-size: 12px;
	line-height: 1.2;
}
.product-page .ynout-breadcrumb-link {
	color: rgb(var(--color-primary) / .58);
	font-weight: 700;
}
.product-page .ynout-breadcrumb-current {
	color: rgb(var(--color-primary));
	font-weight: 800;
}
.product-page #condition,
.product-page #description,
.product-page #delivery,
.product-page #reviews,
.product-page #faq,
.product-page #full-specs {
	scroll-margin-top: 7rem;
}
.catalog-page .ynout-breadcrumbs {
	display: flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	margin-bottom: 0;
}
/* Catalog layout uses Tailwind utilities plus the scoped state rules below. */
.ynout-breadcrumb-link,
.ynout-breadcrumb-current {
	font-weight: 700;
	color: rgb(var(--color-primary) / .55);
	overflow: hidden;
	max-width: min(42vw, 420px);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ynout-breadcrumb-link:hover {
	color: rgb(var(--color-accent));
}
.ynout-breadcrumb-current {
	color: rgb(var(--color-primary));
}
.ynout-news-media {
	background: rgb(var(--color-surface));
	border: 1px solid rgb(var(--color-primary) / .05);
	border-radius: 1.75rem;
	overflow: hidden;
}
.ynout-news-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 1rem;
}
.ynout-category-image {
	padding: .35rem;
	border-radius: 1rem;
	background: rgb(var(--color-primary) / 0.03);
}


.ynout-categories-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.ynout-categories-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1280px) {
	.ynout-categories-grid {
		grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
	}
}

.ynout-badge {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: .35rem;
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: 999px;
	padding: .34rem .58rem;
	font-size: .66rem;
	font-weight: 750;
	line-height: 1;
	letter-spacing: 0;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.ynout-badge-green { color: #047857; border-color: rgba(4, 120, 87, .18); }
.ynout-badge-blue  { color: #1d4ed8; border-color: rgba(29, 78, 216, .18); }
.ynout-badge-sky   { color: #0369a1; border-color: rgba(3, 105, 161, .18); }
.ynout-badge-amber { color: #a16207; border-color: rgba(161, 98, 7, .2); }
.ynout-badge-slate { color: #475569; border-color: rgba(71, 85, 105, .18); }
.ynout-badge-rose  { color: #be123c; border-color: rgba(190, 18, 60, .18); }

.ynout-sort-form {
	position: relative;
}
.ynout-sort-select,
#ynout-sort-form select[name="orderby"] {
	appearance: none;
	-webkit-appearance: none;
	min-width: 11.5rem;
	border: 0;
	border-radius: .9rem;
	background: transparent;
	color: rgb(var(--color-primary));
	padding: .25rem 1.8rem .25rem .1rem;
	font-weight: 800;
	font-size: .875rem;
	line-height: 1.25rem;
	outline: none;
	cursor: pointer;
}
.ynout-sort-form::after {
	content: "";
	position: absolute;
	right: .95rem;
	top: 50%;
	width: .45rem;
	height: .45rem;
	border-right: 2px solid rgb(var(--color-primary) / .45);
	border-bottom: 2px solid rgb(var(--color-primary) / .45);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
	transition: border-color .18s ease;
}
.ynout-sort-form:hover::after,
.ynout-sort-form:focus-within::after {
	border-color: rgb(var(--color-accent));
}
.ynout-sort-form::after {
	display: none;
}
.ynout-sort-button {
	display: inline-flex;
	min-width: 12.5rem;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	border: 0;
	border-radius: .9rem;
	background: #fff;
	color: rgb(var(--color-primary));
	padding: .55rem .75rem .55rem .9rem;
	font-size: .875rem;
	font-weight: 800;
	line-height: 1.25rem;
	box-shadow: inset 0 0 0 1px rgb(var(--color-primary) / .08);
	transition: box-shadow .18s ease, color .18s ease;
}
.ynout-sort-button:hover,
.ynout-sort-button:focus {
	color: rgb(var(--color-accent));
	box-shadow: inset 0 0 0 1px rgb(var(--color-accent) / .25);
	outline: none;
}
.ynout-sort-panel {
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	z-index: 70;
	width: 15rem;
	border: 1px solid rgb(var(--color-primary) / .08);
	border-radius: 1rem;
	background: #fff;
	padding: .35rem;
	box-shadow: 0 18px 45px -18px rgba(15, 23, 42, .28);
}
.ynout-sort-option {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	border-radius: .75rem;
	padding: .7rem .8rem;
	color: rgb(var(--color-primary) / .68);
	font-size: .875rem;
	font-weight: 750;
	text-align: left;
	transition: background .16s ease, color .16s ease;
}
.ynout-sort-option:hover,
.ynout-sort-option.is-active {
	background: rgb(var(--color-accent) / .08);
	color: rgb(var(--color-accent));
}
.ynout-compare-page.is-diff-only [data-compare-same="1"] { display: none !important; }
.ynout-compare-page.is-diff-only .ynout-compare-diff-track { background: rgb(var(--color-accent)) !important; }
.ynout-compare-page.is-diff-only .ynout-compare-diff-knob { transform: translateX(1rem); }

.ynout-cookie-banner {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 56rem;
	margin: 0 auto;
	padding: 1rem;
	border: 1px solid rgb(var(--color-primary) / .08);
	border-radius: 1.25rem;
	background: rgba(255,255,255,.96);
	box-shadow: 0 24px 70px -30px rgba(15, 23, 42, .38);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: rgb(var(--color-primary) / .68);
	font-size: .875rem;
}
.ynout-cookie-banner[hidden] { display: none !important; }
.ynout-cookie-banner strong { display: block; color: rgb(var(--color-primary)); font-weight: 900; }
.ynout-cookie-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.ynout-cookie-actions a { color: rgb(var(--color-accent)); font-weight: 800; }
.ynout-cookie-actions button {
	border-radius: .9rem;
	background: rgb(var(--color-accent));
	color: #fff;
	padding: .7rem 1rem;
	font-weight: 850;
}

@media (max-width: 767px) {
	.ynout-hero {
		height: 380px;
	}
	.ynout-cookie-banner {
		align-items: stretch;
		flex-direction: column;
	}
	.ynout-cookie-actions {
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

/* Color utilities are generated by assets/css/tailwind.css. */

/* WooCommerce-нативные сообщения. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: rgb(var(--color-surface));
	border-left: 4px solid rgb(var(--color-accent));
	padding: 1rem 1.25rem;
	border-radius: 0 1rem 1rem 0;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.woocommerce-error { border-left-color: #ef4444; }

/* Скрываем дефолтные WooCommerce-табы (у нас свой layout single-product). */
body.single-product .woocommerce-tabs.wc-tabs-wrapper { display: none; }

/* range slider accent */
input[type="range"] { accent-color: rgb(var(--color-accent)); }

.woocommerce-cart-form .quantity input.qty,
.ynout-qty-wrap input.qty {
	width: 4rem;
	height: 2.25rem;
	border: 0;
	border-radius: .625rem;
	background: #fff;
	color: rgb(var(--color-primary));
	font-weight: 800;
	text-align: center;
	outline: none;
}
.woocommerce-cart-form .quantity input.qty:focus,
.ynout-qty-wrap input.qty:focus {
	box-shadow: 0 0 0 2px rgb(var(--color-accent) / .25);
}
.ynout-myaccount-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 1rem;
}
.ynout-myaccount-content table th,
.ynout-myaccount-content table td {
	padding: .9rem 1rem;
	border-bottom: 1px solid rgb(var(--color-primary) / .06);
	text-align: left;
}
.ynout-myaccount-content table th {
	background: rgb(var(--color-primary) / .04);
	color: rgb(var(--color-primary) / .62);
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
}
.ynout-myaccount-content table td {
	color: rgb(var(--color-primary) / .78);
	font-size: .9rem;
}
.ynout-myaccount-content table tr:last-child td { border-bottom: 0; }
.ynout-myaccount-content input.input-text,
.ynout-myaccount-content input[type="text"],
.ynout-myaccount-content input[type="email"],
.ynout-myaccount-content input[type="tel"],
.ynout-myaccount-content input[type="password"],
.ynout-myaccount-content textarea,
.ynout-myaccount-content select {
	width: 100%;
	border: 1px solid rgb(var(--color-primary) / .07);
	border-radius: 1rem;
	background: rgb(var(--color-background));
	padding: .85rem 1rem;
	color: rgb(var(--color-primary));
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ynout-myaccount-content input:focus,
.ynout-myaccount-content textarea:focus,
.ynout-myaccount-content select:focus {
	border-color: rgb(var(--color-accent));
	background: #fff;
	box-shadow: 0 0 0 3px rgb(var(--color-accent) / .12);
}
.ynout-myaccount-content .button,
.ynout-myaccount-content button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: .9rem;
	background: rgb(var(--color-accent));
	color: #fff;
	padding: .75rem 1rem;
	font-weight: 800;
	transition: transform .18s ease, background .18s ease;
}
.ynout-myaccount-content .button:hover,
.ynout-myaccount-content button.button:hover {
	background: rgb(var(--color-primary));
	transform: translateY(-1px);
}
.woocommerce form.login,
.woocommerce form.register {
	border: 0;
	padding: 0;
	margin: 0;
}
.wp-block-woocommerce-empty-cart-block {
	max-width: 48rem;
	margin: 0 auto;
	padding: 4rem 1rem 5rem;
	text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2:first-child {
	color: rgb(var(--color-primary));
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
	display: none !important;
}
.wp-block-woocommerce-empty-cart-block hr,
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-cart-cross-sells-block,
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(:first-child),
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: none !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-components-button {
	border-radius: 1rem;
	background: rgb(var(--color-accent));
	color: #fff;
	padding: 1rem 1.5rem;
	font-weight: 800;
	text-decoration: none;
}

@media (max-width: 767px) {
	.woocommerce-cart-form .flex.items-center.gap-3.md\:gap-6 {
		width: 100%;
		justify-content: space-between;
	}
	.ynout-myaccount-content table,
	.ynout-myaccount-content thead,
	.ynout-myaccount-content tbody,
	.ynout-myaccount-content tr,
	.ynout-myaccount-content th,
	.ynout-myaccount-content td {
		display: block;
	}
	.ynout-myaccount-content thead { display: none; }
	.ynout-myaccount-content tr {
		border: 1px solid rgb(var(--color-primary) / .06);
		border-radius: 1rem;
		margin-bottom: .75rem;
		overflow: hidden;
	}
}

/* ============================================================
 * Wishlist / Compare active state — прокрашиваем кнопки и заливаем
 * SVG-иконку (fill) когда товар уже в списке. Классы .is-active
 * добавляются серверным рендером ИЛИ клиентским JS после AJAX.
 * ============================================================ */
.ynout-wishlist-btn.is-active {
	background-color: rgb(239 68 68);
	color: #ffffff;
	box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.4);
}
.ynout-wishlist-btn.is-active svg { fill: currentColor; }

.ynout-compare-btn.is-active {
	background-color: rgb(var(--color-accent));
	color: #ffffff;
	box-shadow: 0 10px 20px -5px rgb(var(--color-accent) / 0.4);
}

.ynout-pdp-buybox .ynout-compare-btn,
.ynout-pdp-buybox .ynout-wishlist-btn {
	border: 2px solid #cbd8eb;
}

/* ============================================================
 * Toast-уведомления (контейнер рендерится один раз в body через JS).
 * ============================================================ */
#ynout-toasts {
	position: fixed;
	z-index: 9999;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
	max-width: calc(100vw - 40px);
}
.ynout-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 280px;
	max-width: 420px;
	padding: 16px 18px;
	background: #ffffff;
	color: rgb(var(--color-primary));
	border-radius: 18px;
	box-shadow: 0 22px 60px -24px rgba(15, 23, 42, 0.36);
	border: 1px solid rgb(var(--color-primary) / 0.08);
	pointer-events: auto;
	transform: translateY(-10px) scale(.98);
	opacity: 0;
	transition: transform .24s cubic-bezier(.16,1,.3,1), opacity .24s ease;
	font-size: 14px;
	line-height: 1.45;
}
.ynout-product-card .ynout-wishlist-btn,
.ynout-product-card .ynout-compare-btn {
	border: 2px solid #d8e3f2;
	background: #fff;
	box-shadow: 0 3px 10px rgba(15,35,70,.04);
}
.ynout-product-card .ynout-wishlist-btn:hover { border-color: #f28b96; }
.ynout-product-card .ynout-compare-btn:hover { border-color: rgb(var(--color-accent) / .65); }
.ynout-product-card .ynout-wishlist-btn.is-active { background: rgb(239 68 68); color: #fff; }
.ynout-product-card .ynout-compare-btn.is-active { background: rgb(var(--color-accent)); color: #fff; }
.ynout-product-card .ynout-wishlist-btn:disabled,
.ynout-product-card .ynout-compare-btn:disabled { opacity: 1; }
.ynout-product-card .ynout-wishlist-btn svg,
.ynout-product-card .ynout-compare-btn svg { visibility: visible !important; opacity: 1; }
.ynout-toast.is-visible {
	transform: translateY(0) scale(1);
	opacity: 1;
}
.ynout-toast-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
}
.ynout-toast.ynout-toast-success { border-left: 4px solid #10b981; }
.ynout-toast.ynout-toast-error   { border-left: 4px solid #ef4444; }
.ynout-toast.ynout-toast-info    { border-left: 4px solid rgb(var(--color-accent)); }
.ynout-toast.ynout-toast-success .ynout-toast-icon { background: #ecfdf5; color: #047857; }
.ynout-toast.ynout-toast-error   .ynout-toast-icon { background: #fef2f2; color: #dc2626; }
.ynout-toast.ynout-toast-info    .ynout-toast-icon { background: rgb(var(--color-accent) / .1); color: rgb(var(--color-accent)); }
.ynout-toast-title { font-weight: 800; color: rgb(var(--color-primary)); }
.ynout-toast-msg   { color: rgb(var(--color-primary) / 0.65); margin-top: 2px; }
.ynout-toast-close {
	background: none; border: 0; cursor: pointer;
	color: rgb(var(--color-primary) / 0.4);
	padding: 4px; margin: -4px -6px -4px auto;
	line-height: 1;
}
.ynout-toast-close:hover { color: rgb(var(--color-primary)); }

@media (max-width: 640px) {
	#ynout-toasts { top: auto; bottom: 90px; right: 10px; left: 10px; }
	.ynout-toast { min-width: 0; width: 100%; }
}

.ynout-variation-form .variations {
	width: 100%;
	margin-bottom: 12px;
}
.ynout-variation-form .variations th,
.ynout-variation-form .variations td {
	padding: 4px 0;
	text-align: left;
}
.ynout-variation-form select {
	width: 100%;
	min-height: 40px;
	border: 1px solid #dfe6f0;
	border-radius: 10px;
	background: #fff;
	padding: 0 10px;
}
.ynout-variation-form .quantity { display: none; }
.ynout-variation-form .single_add_to_cart_button {
	width: 100%;
	min-height: 44px;
	border-radius: 12px;
	background: rgb(var(--color-accent));
	color: #fff;
	font-weight: 800;
}
/* Product media: fill the media frame without artificial inner shrink. */
.ynout-card-media {
	isolation: isolate;
	background: #f8fafc;
}
.ynout-card-media > a {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}
.ynout-card-media .ynout-card-image,
.ynout-card-media img.woocommerce-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
}

/* Safety net for WooCommerce widgets and third-party product loops. */
.woocommerce ul.products li.product img,
.woocommerce-product-gallery img,
img.ynout-product-image {
	object-fit: contain;
	object-position: center;
}

/* Catalog: Tailwind owns typography, spacing and surfaces; CSS is limited to state/geometry. */
.catalog-page {
	--yn-catalog-blue: rgb(var(--color-accent));
	--yn-catalog-line: rgb(var(--color-primary) / .1);
}
.yn-catalog-hero {
	min-height: 220px;
	background: linear-gradient(100deg, #fff 0%, #f8fbff 58%, #e7f0ff 100%);
}
.yn-hero-content { min-height: 220px; }
.yn-hero-copy { max-width: 55%; }
.yn-hero-art-shell {
	position: absolute;
	top: 50%;
	right: max(2.5%, calc((100vw - 1280px) / 2));
	width: min(42vw, 520px);
	height: 92%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.yn-hero-art-halo {
	position: absolute;
	width: min(24vw, 300px);
	aspect-ratio: 1;
	border-radius: 999px;
	background: radial-gradient(circle at 40% 35%, #fff 0%, #edf4ff 56%, #d9e8ff 100%);
	box-shadow: inset 0 0 0 1px rgba(37,99,235,.06), 0 18px 45px rgba(29,57,105,.08);
}
.yn-hero-art {
	position: relative;
	z-index: 1;
	width: 88%;
	height: 92%;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 18px 26px rgba(29,57,105,.14));
}
.yn-chip.is-reset { border-style: dashed; }
.yn-sidebar { width: 252px; flex: 0 0 252px; }
.yn-filter-heading { margin-bottom: .625rem; }
.yn-filter-heading.mt-2 { margin-top: .5rem; margin-bottom: 0; }
.yn-filter-options { display: grid; gap: 2px; }
.yn-category-link > span:last-child,
.yn-check-row > span:last-child { margin-left: auto; color: rgb(var(--color-primary) / .45); }
.yn-category-link.is-active { background: rgb(var(--color-accent) / .09); color: rgb(var(--color-accent)); }
.yn-check-row { position: relative; }
.yn-check {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgb(var(--color-primary) / .24);
	border-radius: 4px;
	background: #fff;
}
.yn-check-row input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.yn-check-row input[type="checkbox"]:checked + .yn-check {
	border-color: var(--yn-catalog-blue, rgb(var(--color-accent)));
	background: var(--yn-catalog-blue, rgb(var(--color-accent)));
	color: #fff;
}
.yn-check-row input[type="checkbox"]:focus-visible + .yn-check { outline: 2px solid rgb(var(--color-accent) / .22); outline-offset: 1px; }
.yn-price-caption {
	color: rgb(var(--color-primary) / .42);
	font-size: 11px;
	font-weight: 700;
}
.yn-price-inputs label { position: relative; display: block; }
.yn-price-inputs label > span {
	position: absolute;
	top: 50%;
	left: 11px;
	z-index: 1;
	transform: translateY(-50%);
	color: rgb(var(--color-primary) / .42);
	font-size: 11px;
	font-weight: 700;
	pointer-events: none;
}
.yn-price-inputs input {
	width: 100%;
	height: 40px;
	padding: 0 10px 0 32px;
	border: 1px solid rgb(var(--color-primary) / .10);
	border-radius: 10px;
	background: #fbfcfe;
	color: rgb(var(--color-primary));
	font-size: 13px;
	font-weight: 700;
	outline: none;
}
.yn-price-inputs input:focus {
	border-color: rgb(var(--color-accent));
	box-shadow: 0 0 0 3px rgb(var(--color-accent) / .10);
	background: #fff;
}
.yn-price-range { position: relative; height: 34px; margin: 12px 4px 0; }
.yn-price-range::before,
.yn-price-range::after {
	position: absolute;
	top: 14px;
	height: 5px;
	border-radius: 999px;
	content: "";
	pointer-events: none;
}
.yn-price-range::before { right: 0; left: 0; background: #dbe4f1; }
.yn-price-range::after {
	left: var(--yn-price-min, 0%);
	right: calc(100% - var(--yn-price-max, 100%));
	background: linear-gradient(90deg, rgb(var(--color-accent)), #3182f6);
	box-shadow: 0 2px 8px rgb(var(--color-accent) / .18);
}
.yn-price-range input {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0;
	appearance: none;
	background: transparent;
	pointer-events: none;
}
.yn-price-range input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.yn-price-range input::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -6.5px;
	appearance: none;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--yn-catalog-blue);
	box-shadow: 0 2px 8px rgba(15,37,75,.28), 0 0 0 1px rgb(var(--color-accent) / .18);
	pointer-events: auto;
	cursor: grab;
}
.yn-price-range input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.06); }
.yn-price-range input::-moz-range-track { height: 6px; border: 0; background: transparent; }
.yn-price-range input::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--yn-catalog-blue);
	box-shadow: 0 2px 8px rgba(15,37,75,.28), 0 0 0 1px rgb(var(--color-accent) / .18);
	pointer-events: auto;
	cursor: grab;
}
.yn-price-scale {
	display: flex;
	justify-content: space-between;
	margin-top: -2px;
	color: rgb(var(--color-primary) / .38);
	font-size: 10px;
	font-weight: 650;
}
.yn-view-button.is-active { background: var(--yn-catalog-blue); color: #fff; }
.yn-mobile-filter,
.yn-mobile-filter-close { display: none; }
@media (max-width: 1023px) {
	.yn-hero-copy { max-width: 62%; }
	.yn-hero-art-shell { right: 1%; width: 46vw; }
	.yn-hero-art-halo { width: min(27vw, 260px); }
	.yn-mobile-filter { display: inline-flex; }
	.yn-sidebar.is-mobile-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
		width: auto;
		overflow: auto;
		background: #fff;
		padding: 20px 18px 32px;
	}
	.yn-mobile-filter-close {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}
	.yn-mobile-filter-close button {
		display: inline-flex;
		width: 36px;
		height: 36px;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: rgb(var(--color-primary) / .05);
	}
}
@media (max-width: 767px) {
	.yn-catalog-hero,
	.yn-hero-content { min-height: 200px; }
	.yn-hero-copy { max-width: 72%; }
	.yn-hero-art-shell { right: -8%; width: 54vw; opacity: .78; }
	.yn-hero-art-halo { width: 31vw; }
}
@media (max-width: 479px) {
	.yn-hero-copy { max-width: 84%; }
	.yn-hero-art-shell { right: -18%; width: 66vw; opacity: .52; }
	.yn-hero-art-halo { width: 38vw; }
}

/* One product-card component on every storefront surface. */
.ynout-product-chip {
	display: inline-flex;
	min-height: 20px;
	align-items: center;
	gap: 4px;
	border: 1px solid #dce5f2;
	border-radius: 999px;
	background: rgba(255,255,255,.96);
	padding: 3px 8px;
	box-shadow: 0 7px 18px -15px rgba(15,23,42,.55);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
.ynout-product-chip.is-rating,
.ynout-product-chip.is-new,
.ynout-product-chip.is-sale { color: #2465e8; }
.ynout-product-chip.is-hit { color: #e23a46; border-color: #f1d8dc; }
.ynout-product-chip.is-stock { color: #23844b; border-color: #d7ecdE; }
.ynout-product-chip.is-condition { color: #7256c8; border-color: #e2dcf5; }

.yn-products-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.yn-products-grid.is-list .ynout-product-card {
	display: grid;
	grid-template-columns: 176px minmax(0, 1fr);
	column-gap: 18px;
	min-height: 154px;
	padding: 10px;
	border-radius: 18px;
}
.yn-products-grid.is-list .ynout-product-card__media {
	width: 176px;
	height: 132px;
	min-height: 132px;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 14px;
}
.yn-products-grid.is-list .ynout-product-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	grid-template-rows: auto auto 1fr;
	column-gap: 24px;
	row-gap: 6px;
	padding: 8px 8px 8px 0;
}
.yn-products-grid.is-list .ynout-product-card__title { grid-column: 1; grid-row: 1; min-height: 0; margin: 0; align-self: start; }
.yn-products-grid.is-list .ynout-product-card__title h3 { font-size: 16px; line-height: 1.35; }
.yn-products-grid.is-list .ynout-product-card__spec { grid-column: 1; grid-row: 2; margin: 0; white-space: normal; }
.yn-products-grid.is-list .ynout-product-card__price {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-content: flex-end;
	margin: 0;
	text-align: right;
}
.yn-products-grid.is-list .ynout-product-card__actions {
	grid-column: 2;
	grid-row: 2 / 4;
	display: grid;
	grid-template-columns: minmax(118px, 1fr) 40px 40px;
	align-self: end;
	gap: 8px;
	width: 100%;
	max-width: none;
}
.yn-products-grid.is-list .ynout-product-card__actions > a {
	width: 100%;
	height: 40px;
}
.yn-products-grid.is-list .ynout-product-card__actions > button { width: 40px; height: 40px; }
@media (max-width: 767px) {
	.ynout-product-card { border-radius: 1.15rem; padding: 9px; }
	.ynout-product-card__actions { gap: 6px; }
	.ynout-product-card__actions button { width: 36px; }
	.yn-products-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.yn-products-grid.is-list .ynout-product-card { display: flex; min-height: 0; padding: 9px; }
	.yn-products-grid.is-list .ynout-product-card__media { width: 100%; height: auto; min-height: 0; margin-bottom: 12px; aspect-ratio: 4 / 3; }
	.yn-products-grid.is-list .ynout-product-card__body { display: flex; padding: 0 2px 2px; }
	.yn-products-grid.is-list .ynout-product-card__actions { display: flex; max-width: none; }
	.yn-products-grid.is-list .ynout-product-card__actions > a { width: auto; height: 40px; }
}

/* ============================================================
 * Reference-aligned page system.
 * One set of spacing, radius, borders and typography for every inner page.
 * ============================================================ */
.yn-page {
	padding: 26px 0 58px;
	background: linear-gradient(180deg, #fbfcff 0%, #f8fafd 100%);
}
.yn-page .ynout-breadcrumbs {
	margin: 0 0 24px;
}
.yn-page-heading {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	width: min(100%, 980px);
	align-items: start;
	gap: 18px;
	margin: 0 0 28px;
}
.yn-page-heading > div:last-child { min-width: 0; padding-top: 1px; }
.yn-page-heading__icon {
	display: inline-flex;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid #dbe6f5;
	border-radius: 15px;
	background: #fff;
	color: var(--yn-blue);
	box-shadow: var(--yn-shadow);
}
.yn-page-eyebrow {
	margin: 0 0 7px;
	color: var(--yn-blue);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.yn-page-heading h1 {
	max-width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--yn-navy);
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -.04em;
}
.yn-page-lead {
	max-width: 790px;
	margin: 12px 0 0;
	color: #627087;
	font-size: 15px;
	line-height: 1.7;
}
.yn-surface-card {
	border: 1px solid var(--yn-line);
	border-radius: var(--yn-radius);
	background: #fff;
	box-shadow: var(--yn-shadow);
}
.yn-primary-button,
.yn-outline-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 11px;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.yn-primary-button {
	background: var(--yn-blue);
	color: #fff;
	box-shadow: 0 12px 24px -16px rgba(8,103,242,.75);
}
.yn-primary-button:hover { transform: translateY(-1px); background: #075ee0; color: #fff; }
.yn-outline-button { border: 1px solid #cbd9ed; background: #fff; color: var(--yn-blue); }
.yn-outline-button:hover { transform: translateY(-1px); border-color: #91b6ee; background: #f7faff; }
.yn-secondary-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--yn-blue);
	font-size: 13px;
	font-weight: 800;
}

/* Information pages. */
.yn-info-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 306px;
	align-items: start;
	gap: 20px;
}
.yn-info-content { padding: 28px; }
.yn-info-special-media { margin: 0 0 24px; overflow: hidden; border-radius: 18px; background: #f4f7fb; }
.yn-info-special-media img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.yn-info-special-media.is-contain img { height: 320px; object-fit: contain; padding: 18px; }
.yn-info-promo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr) 210px;
	min-height: 300px;
	margin: 0 0 24px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(135deg,#0b1b39 0%,#12366f 58%,#1267e8 100%);
	color: #fff;
}
.yn-info-promo__copy { position: relative; z-index: 2; padding: 32px; }
.yn-info-promo__kicker { margin: 0 0 9px; color: #9dc4ff; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.yn-info-promo h2 { max-width: 620px; margin: 0; color: #fff; font-size: clamp(25px,3vw,38px); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; }
.yn-info-promo__text { max-width: 610px; margin: 14px 0 0; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.6; }
.yn-info-promo__items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.yn-info-promo__items span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.09); padding: 7px 11px; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 750; }
.yn-info-promo__items svg { color: #8fe3b1; }
.yn-info-promo__button { width: max-content; margin-top: 22px; background: #fff; color: #0d4fae; box-shadow: none; }
.yn-info-promo__button:hover { background: #f4f8ff; color: #0a459d; }
.yn-info-promo__visual { position: relative; min-height: 100%; }
.yn-info-promo__icon { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; width: 112px; height: 112px; align-items: center; justify-content: center; transform: translate(-50%,-50%) rotate(-4deg); border: 1px solid rgba(255,255,255,.22); border-radius: 30px; background: rgba(255,255,255,.13); color: #fff; box-shadow: 0 22px 60px rgba(1,14,38,.28); backdrop-filter: blur(7px); }
.yn-info-promo__orb { position: absolute; display: block; border-radius: 999px; background: rgba(255,255,255,.08); }
.yn-info-promo__orb--one { top: 22px; right: -45px; width: 185px; height: 185px; }
.yn-info-promo__orb--two { right: 76px; bottom: -58px; width: 148px; height: 148px; background: rgba(95,209,255,.13); }
.yn-info-content > .ynout-prose:first-child > :first-child { margin-top: 0; }
.yn-info-content > .ynout-prose:first-child > :last-child { margin-bottom: 0; }
.yn-info-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid #e8edf4;
}
.yn-info-points section {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	gap: 11px;
	border: 1px solid #e5ebf3;
	border-radius: 13px;
	background: #fbfcff;
	padding: 15px;
}
.yn-info-points section > span {
	display: flex;
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #edf4ff;
	color: var(--yn-blue);
}
.yn-info-points h2,
.yn-info-editor-grid h2 {
	margin: 0 0 5px;
	color: var(--yn-navy);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.35;
}
.yn-info-points p {
	margin: 0;
	color: #6a778c;
	font-size: 13px;
	line-height: 1.55;
}
.yn-info-side { display: grid; gap: 12px; }
.yn-info-help { padding: 22px; }
.yn-info-help__icon {
	display: flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	border-radius: 12px;
	background: #edf4ff;
	color: var(--yn-blue);
}
.yn-info-help h2 { margin: 0 0 8px; color: var(--yn-navy); font-size: 20px; font-weight: 850; line-height: 1.2; }
.yn-info-help p { margin: 0 0 18px; color: #67758a; font-size: 14px; line-height: 1.65; }
.yn-info-help .yn-primary-button { width: 100%; }
.yn-info-help .yn-secondary-link { margin-top: 15px; }
.yn-info-note {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	border: 1px solid #cdebd9;
	border-radius: 14px;
	background: #effbf4;
	padding: 15px;
	color: #159050;
}
.yn-info-note p { display: grid; gap: 3px; margin: 0; }
.yn-info-note strong { color: #167744; font-size: 13px; }
.yn-info-note span { color: #57906d; font-size: 12px; line-height: 1.5; }
.yn-info-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.yn-info-editor-grid section { border: 1px solid #e5ebf3; border-radius: 13px; background: #fbfcff; padding: 17px; }
.yn-info-editor-grid ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.yn-info-editor-grid li { display: flex; align-items: flex-start; gap: 7px; color: #657389; font-size: 14px; line-height: 1.55; }
.yn-info-editor-grid li svg { margin-top: 3px; flex: 0 0 auto; color: var(--yn-blue); }

@media (max-width: 760px) {
	.yn-info-promo { grid-template-columns: 1fr; min-height: 0; }
	.yn-info-promo__copy { padding: 24px 22px; }
	.yn-info-promo__visual { position: absolute; right: -28px; bottom: -30px; width: 155px; height: 155px; opacity: .42; pointer-events: none; }
	.yn-info-promo__icon { width: 92px; height: 92px; border-radius: 25px; }
	.yn-info-promo__items { max-width: calc(100% - 42px); }
}

/* Contacts. */
.yn-contact-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.yn-contact-card {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid var(--yn-line);
	border-radius: 15px;
	background: #fff;
	padding: 17px;
	box-shadow: var(--yn-shadow);
}
.yn-contact-card > span {
	display: flex;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #edf4ff;
	color: var(--yn-blue);
}
.yn-contact-card small { display: block; margin: 0 0 5px; color: #8994a6; font-size: 12px; font-weight: 700; }
.yn-contact-card h2 { margin: 0; color: var(--yn-navy); font-size: 14px; font-weight: 850; line-height: 1.45; overflow-wrap: anywhere; }
.yn-contact-card p { margin: 4px 0 0; color: #708097; font-size: 13px; line-height: 1.5; }
.yn-contact-card a:hover { color: var(--yn-blue); }
.yn-map-section {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	min-height: 480px;
	overflow: hidden;
	border: 1px solid var(--yn-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--yn-shadow);
}
.yn-map-copy { display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.yn-map-copy h2 { margin: 0 0 12px; color: var(--yn-navy); font-size: 28px; font-weight: 900; letter-spacing: -.025em; }
.yn-map-copy > p:not(.yn-page-eyebrow) { margin: 0; color: #66758b; font-size: 14px; line-height: 1.7; }
.yn-map-actions { display: grid; gap: 9px; margin-top: 22px; }
.yn-map-actions > * { width: 100%; }
.yn-contact-tip { display: flex; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e7edf5; color: #159050; }
.yn-contact-tip span { display: grid; gap: 3px; color: #6f7d91; font-size: 12px; line-height: 1.5; }
.yn-contact-tip strong { color: #246f49; font-size: 13px; }
.yn-yandex-map { min-height: 480px; background: #eef3fa; }
.yn-yandex-map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; }
.yn-contact-content { margin-top: 20px; padding: 28px; }

/* News detail. */
.yn-news-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 22px;
}
.yn-news-toolbar a,
.yn-news-toolbar button {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	gap: 7px;
	border: 1px solid #e1e7f0;
	border-radius: 10px;
	background: #fff;
	padding: 0 13px;
	color: #637187;
	font-size: 12px;
	font-weight: 750;
}
.yn-news-toolbar a:hover,
.yn-news-toolbar button:hover { border-color: #bcd0ed; color: var(--yn-blue); }
.yn-news-article { max-width: 1120px; margin: 0 auto; }
.yn-news-header { max-width: 930px; margin: 0 0 24px; }
.yn-news-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px; }
.yn-news-meta span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce6f4; border-radius: 999px; background: #fff; padding: 6px 10px; color: #63748c; font-size: 12px; font-weight: 800; }
.yn-news-meta span:first-child { color: var(--yn-blue); }
.yn-news-header h1 { margin: 0; color: var(--yn-navy); font-size: clamp(36px, 5vw, 54px); font-weight: 900; line-height: 1.06; letter-spacing: -.045em; }
.yn-news-header > p { max-width: 820px; margin: 14px 0 0; color: #65748b; font-size: 16px; line-height: 1.7; }
.yn-news-cover {
	display: flex;
	height: clamp(340px, 44vw, 520px);
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0 0 20px;
	border: 1px solid var(--yn-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--yn-shadow);
}
.yn-news-cover img { display: block; width: auto; height: auto; max-width: 94%; max-height: 94%; object-fit: contain; }
.yn-news-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 284px; align-items: start; gap: 20px; }
.yn-news-content { min-width: 0; padding: 30px; }
.yn-news-content > :first-child { margin-top: 0; }
.yn-news-content > :last-child { margin-bottom: 0; }
.yn-news-aside { display: grid; gap: 12px; }
.yn-news-author { display: flex; align-items: center; gap: 11px; border: 1px solid var(--yn-line); border-radius: 14px; background: #fff; padding: 14px; }
.yn-news-author > span { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: var(--yn-navy); color: #fff; }
.yn-news-author div { display: grid; gap: 3px; }
.yn-news-author strong { color: var(--yn-navy); font-size: 12px; }
.yn-news-author small { color: #8994a5; font-size: 12px; }
.yn-news-aside-card { border: 1px solid #dce8f8; border-radius: 15px; background: linear-gradient(145deg,#f1f6ff,#fff); padding: 20px; color: var(--yn-blue); }
.yn-news-aside-card h2 { margin: 14px 0 7px; color: var(--yn-navy); font-size: 18px; font-weight: 850; line-height: 1.25; }
.yn-news-aside-card p { margin: 0 0 16px; color: #68778d; font-size: 12px; line-height: 1.6; }
.yn-news-aside-card .yn-primary-button { width: 100%; padding: 0 12px; }
.yn-related-news { max-width: 1120px; margin: 34px auto 0; padding-top: 27px; border-top: 1px solid #e2e8f1; }
.yn-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.yn-section-title h2 { margin: 0; color: var(--yn-navy); font-size: 25px; font-weight: 900; letter-spacing: -.025em; }
.yn-section-title a { display: inline-flex; align-items: center; gap: 6px; color: var(--yn-blue); font-size: 12px; font-weight: 800; }
.yn-related-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Calm readable typography shared by news and information content. */
.ynout-prose { color: #5e6c82; font-size: 15px; line-height: 1.75; }
.ynout-prose p { margin: 0 0 1.15em; color: inherit; font-size: inherit; line-height: inherit; }
.ynout-prose h2 { margin: 1.55em 0 .55em; color: var(--yn-navy); font-size: 23px; font-weight: 900; line-height: 1.25; letter-spacing: -.02em; }
.ynout-prose h3 { margin: 1.4em 0 .45em; color: var(--yn-navy); font-size: 18px; font-weight: 850; line-height: 1.3; }
.ynout-prose ul,
.ynout-prose ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.ynout-prose li { margin-bottom: .55em; color: inherit; }
.ynout-prose a { color: var(--yn-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ynout-prose blockquote { margin: 1.4em 0; border-left: 3px solid var(--yn-blue); border-radius: 0 10px 10px 0; background: #f4f8ff; padding: 15px 18px; color: #3d4c63; font-weight: 650; }
.ynout-prose img { max-width: 100%; height: auto; border-radius: 13px; }

@media (max-width: 1023px) {
	.yn-info-layout,
	.yn-news-body-grid { grid-template-columns: minmax(0, 1fr); }
	.yn-info-side { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.yn-contact-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.yn-map-section { grid-template-columns: 300px minmax(0,1fr); }
	.yn-news-aside { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
	.yn-page { padding: 18px 0 42px; }
	.yn-page .ynout-breadcrumbs { margin-bottom: 18px; }
	.yn-page-heading { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; margin-bottom: 21px; }
	.yn-page-heading__icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
	.yn-page-heading h1 { font-size: 33px; }
	.yn-page-lead { margin-top: 9px; font-size: 13px; line-height: 1.6; }
	.yn-info-content,
	.yn-news-content,
	.yn-contact-content { padding: 20px; }
	.yn-info-points,
	.yn-info-editor-grid,
	.yn-info-side,
	.yn-contact-cards,
	.yn-news-aside,
	.yn-related-news-grid { grid-template-columns: minmax(0,1fr); }
	.yn-info-points { margin-top: 20px; padding-top: 20px; }
	.yn-map-section { grid-template-columns: minmax(0,1fr); }
	.yn-map-copy { padding: 23px 20px; }
	.yn-yandex-map,
	.yn-yandex-map iframe { min-height: 360px; }
	.yn-news-toolbar { margin-bottom: 18px; }
	.yn-news-toolbar a,
	.yn-news-toolbar button { min-height: 36px; padding: 0 10px; }
	.yn-news-header h1 { font-size: 35px; }
	.yn-news-header > p { font-size: 14px; }
	.yn-news-cover { height: 290px; border-radius: 15px; }
	.yn-section-title { align-items: center; }
}

/* Storefront geometry now lives in Tailwind templates and scoped component rules below. */

/* Merged from final.css: one storefront stylesheet. */
/* OKNOUT final UI layer. Loaded after Tailwind and legacy theme styles. */
:root {
	--yn-final-ink: #0b1b3b;
	--yn-final-blue: #0867f2;
	--yn-final-muted: #68758b;
	--yn-final-line: #e4eaf3;
	--yn-final-bg: #f8fafd;
	--yn-final-shadow: 0 14px 40px rgba(18, 40, 76, .07);
}

/* Product detail: scoped geometry. Typography stays in Tailwind utilities. */
.product-page .ynout-pdp-main {
	grid-template-columns: minmax(0, 1.28fr) minmax(270px, .82fr) minmax(300px, .76fr);
	align-items: start;
	gap: 24px;
}
.product-page .ynout-pdp-gallery {
	height: clamp(390px, 34vw, 470px);
	min-height: 0;
	max-width: 100%;
	align-items: stretch;
	overflow: hidden;
}
.product-page .ynout-pdp-thumbs {
	display: flex;
	width: 76px;
	height: 100%;
	min-height: 0;
	flex: 0 0 76px;
	flex-direction: column;
	gap: 7px;
}
.product-page .ynout-pdp-thumbs__track {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 2px;
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
}
.product-page .ynout-pdp-thumbs__nav {
	display: flex;
	height: 30px;
	flex: 0 0 30px;
	align-items: center;
	justify-content: center;
	border: 1px solid #e3e9f2;
	border-radius: 10px;
	background: #f8fafc;
	color: rgba(11,27,59,.58);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.product-page .ynout-pdp-thumbs__nav:hover {
	border-color: rgba(8,103,242,.28);
	background: #f2f6ff;
	color: rgb(var(--color-accent));
}
.product-page .ynout-gallery-thumb {
	display: flex;
	width: 72px;
	height: 72px;
	min-height: 72px;
	flex: 0 0 72px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid #e7edf4;
	border-radius: 12px;
	background: #fff;
	padding: 3px;
	scroll-snap-align: start;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.product-page .ynout-gallery-thumb:hover { border-color: rgba(8,103,242,.38); }
.product-page .ynout-gallery-thumb.is-active {
	border-color: rgb(var(--color-accent));
	box-shadow: 0 0 0 2px rgba(8,103,242,.08);
}
.product-page .ynout-gallery-thumb img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}
.product-page .ynout-pdp-stage {
	height: 100%;
	min-height: 0;
	max-width: 100%;
	touch-action: pan-y;
	cursor: zoom-in;
}
.product-page .ynout-pdp-stage__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 14px;
	object-fit: contain;
	object-position: center;
	transition: transform .25s ease;
}
.product-page .ynout-pdp-stage:hover .ynout-pdp-stage__image { transform: scale(1.012); }
.product-page .ynout-pdp-stage-nav,
.product-page .ynout-pdp-zoom {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e8f0;
	background: rgba(255,255,255,.94);
	color: rgba(11,27,59,.68);
	box-shadow: 0 8px 25px rgba(11,27,59,.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: opacity .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.product-page .ynout-pdp-stage-nav {
	top: 50%;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(-50%);
}
.product-page .ynout-pdp-stage:hover .ynout-pdp-stage-nav,
.product-page .ynout-pdp-stage:focus-within .ynout-pdp-stage-nav { opacity: 1; }
.product-page .ynout-pdp-stage-nav.is-prev { left: 12px; }
.product-page .ynout-pdp-stage-nav.is-next { right: 12px; }
.product-page .ynout-pdp-stage-nav:hover,
.product-page .ynout-pdp-zoom:hover { border-color: rgba(8,103,242,.35); color: rgb(var(--color-accent)); }
.product-page .ynout-pdp-zoom {
	right: 12px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
}
.product-page .ynout-pdp-gallery-counter {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 4;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	padding: 6px 10px;
	box-shadow: 0 8px 25px rgba(11,27,59,.06);
	color: rgba(11,27,59,.62);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
.product-page .ynout-pdp-options { padding-top: 22px; }
.product-page .ynout-pdp-buybox { position: relative; }
.product-page .ynout-pdp-tabs {
	display: flex;
	min-height: 56px;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	padding: 7px 0;
	overflow-x: auto;
	border-top: 1px solid var(--yn-final-line);
	border-bottom: 1px solid var(--yn-final-line);
	font-size: 14px;
	font-weight: 750;
	scrollbar-width: none;
}
.product-page .ynout-pdp-tabs::-webkit-scrollbar { display: none; }
.product-page .ynout-pdp-tab {
	display: inline-flex;
	height: 40px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 0 14px;
	color: #66738a;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.product-page .ynout-pdp-tab:hover { color: var(--yn-final-ink); background: #f7f9fc; }
.product-page .ynout-pdp-tab.is-active {
	border-color: #dce8ff;
	background: #f0f5ff;
	color: var(--yn-final-blue);
}
.product-page .ynout-pdp-tab-panel {
	min-height: 238px;
	padding-top: 24px;
	padding-bottom: 26px;
	scroll-margin-top: 110px;
}
.product-page [x-show="zoomOpen"] {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1023px) {
	.product-page .ynout-pdp-main {
		grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
	}
	.product-page .ynout-pdp-buybox { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.product-page .ynout-pdp-main { display: block; }
	.product-page .ynout-pdp-options,
	.product-page .ynout-pdp-buybox { margin-top: 24px; padding-top: 0; }
	.product-page .ynout-pdp-gallery { height: 350px; min-height: 0; gap: 10px; }
	.product-page .ynout-pdp-thumbs { width: 64px; flex-basis: 64px; }
	.product-page .ynout-gallery-thumb { width: 60px; height: 60px; min-height: 60px; flex-basis: 60px; }
	.product-page .ynout-pdp-stage__image { padding: 8px; }
	.product-page .ynout-pdp-stage-nav { width: 36px; height: 36px; opacity: 1; }
	.product-page .ynout-pdp-stage-nav.is-prev { left: 8px; }
	.product-page .ynout-pdp-stage-nav.is-next { right: 8px; }
	.product-page .ynout-pdp-zoom { right: 8px; bottom: 8px; }
	.product-page .ynout-pdp-gallery-counter { left: 8px; bottom: 8px; }
	.product-page .ynout-pdp-tabs { margin-top: 22px; font-size: 13px; }
}

/* Product lightbox: viewport-safe, keyboard and swipe friendly. */
html { scrollbar-gutter: stable; }
html.ynout-lightbox-open,
body.ynout-lightbox-open { overflow: visible; }
body.ynout-lightbox-open { overscroll-behavior: none; }
.product-page .ynout-pdp-lightbox {
	padding: 72px 72px 56px;
	overflow: hidden;
	touch-action: pan-y;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.product-page .ynout-pdp-lightbox__top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 104;
	display: flex;
	min-height: 64px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px 10px 20px;
	background: linear-gradient(180deg, rgba(0,0,0,.72), transparent);
}
.product-page .ynout-pdp-lightbox__close {
	display: flex;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	background: rgba(0,0,0,.5);
	color: rgba(255,255,255,.9);
	transition: background-color .15s ease, color .15s ease;
}
.product-page .ynout-pdp-lightbox__close:hover { background: #fff; color: #0b1b3b; }
.product-page .ynout-pdp-lightbox__stage {
	position: relative;
	width: min(1180px, calc(100vw - 144px));
	height: calc(100vh - 128px);
	max-height: 900px;
}
.product-page .ynout-pdp-lightbox__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}
.product-page .ynout-pdp-lightbox__nav {
	position: fixed;
	top: 50%;
	z-index: 103;
	display: flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	background: rgba(0,0,0,.35);
	color: rgba(255,255,255,.82);
	transform: translateY(-50%);
	transition: background-color .15s ease, color .15s ease;
}
.product-page .ynout-pdp-lightbox__nav:hover { background: rgba(255,255,255,.12); color: #fff; }
.product-page .ynout-pdp-lightbox__nav.is-prev { left: 16px; }
.product-page .ynout-pdp-lightbox__nav.is-next { right: 16px; }
.product-page .ynout-pdp-lightbox__dots {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 103;
	display: flex;
	align-items: center;
	gap: 6px;
	transform: translateX(-50%);
}
.product-page .ynout-pdp-lightbox__dots span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.34);
	transition: width .15s ease, background-color .15s ease;
}
.product-page .ynout-pdp-lightbox__dots span.is-active { width: 18px; background: #fff; }
@media (max-width: 767px) {
	.product-page .ynout-pdp-lightbox { padding: 64px 12px 46px; }
	.product-page .ynout-pdp-lightbox__stage { width: calc(100vw - 24px); height: calc(100vh - 116px); }
	.product-page .ynout-pdp-lightbox__nav { top: auto; bottom: 54px; width: 42px; height: 42px; transform: none; }
	.product-page .ynout-pdp-lightbox__nav.is-prev { left: 12px; }
	.product-page .ynout-pdp-lightbox__nav.is-next { right: 12px; }
	.product-page .ynout-pdp-lightbox__dots { bottom: 24px; }
}

/* Account geometry is intentionally scoped to WooCommerce account pages. */
.ynout-myaccount-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
.ynout-account-page-shell { width: 100%; padding: 0; }
.ynout-myaccount-shell { width: 92%; max-width: 88.5rem; margin: 0 auto; padding: 28px 0 52px; }
@media (max-width: 1023px) { .ynout-myaccount-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 767px) { .ynout-myaccount-shell { width: calc(100% - 32px); padding: 22px 0 40px; } }

/* Cart. */
.yn-cart-page { max-width: 1320px !important; }
.yn-cart-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}
.yn-cart-heading p { margin: 0 0 7px; color: var(--yn-final-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.yn-cart-heading h1 { margin: 0; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.yn-cart-heading > span { display: inline-flex; min-height: 35px; align-items: center; border: 1px solid #dce7f7; border-radius: 999px; background: #f4f8ff; padding: 0 14px; color: #52637b; font-size: 13px; font-weight: 750; }
.yn-cart-items,
.yn-cart-summary { border: 1px solid var(--yn-final-line) !important; border-radius: 20px !important; box-shadow: var(--yn-final-shadow) !important; }
.yn-cart-items { padding: 24px !important; }
.yn-cart-items__title { display: flex; justify-content: space-between; padding: 0 0 16px; border-bottom: 1px solid #edf1f6; color: #758298; font-size: 12px; font-weight: 750; }
.yn-cart-item { min-height: 132px; padding: 20px 0; border-bottom: 1px solid #edf1f6; }
.yn-cart-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.yn-cart-item > div:first-child { width: 108px !important; height: 108px !important; border-radius: 15px !important; }
.yn-cart-item > div:nth-child(2) > a { font-size: 15px; line-height: 1.4; }
.yn-cart-summary { padding: 26px !important; }
.yn-cart-summary h3 { font-size: 21px !important; }
.ynout-qty-wrap .quantity input { width: 64px !important; min-height: 38px; border: 0; background: transparent; text-align: center; font-weight: 800; }

/* Cart 1.8 — stable two-column checkout layout. */
.yn-cart-page { padding-top: 38px !important; padding-bottom: 64px !important; }
.yn-cart-form { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yn-cart-list { display: block; }
.yn-cart-item { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 22px !important; align-items: center !important; }
.yn-cart-item__info > a { display: block; max-width: 520px; color: var(--yn-final-ink); font-size: 16px !important; font-weight: 800; }
.yn-cart-item__actions { min-width: 330px; justify-content: flex-end; }
.ynout-qty-wrap { display: inline-flex; height: 42px; align-items: center; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 11px; background: #f8fafc; }
.ynout-qty-wrap .quantity { display: flex; height: 100%; align-items: center; }
.ynout-qty-wrap .quantity input { width: 48px !important; min-height: 40px !important; padding: 0; color: var(--yn-final-ink); font-size: 14px; appearance: textfield; }
.ynout-qty-wrap .quantity input::-webkit-inner-spin-button,
.ynout-qty-wrap .quantity input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.yn-cart-qty-button { display: flex; width: 38px; height: 40px; align-items: center; justify-content: center; border: 0; background: transparent; color: #52627a; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s,color .15s; }
.yn-cart-qty-button:hover { background: #eaf2ff; color: var(--yn-final-blue); }
.yn-cart-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--yn-final-line); border-radius: 16px; background: #fff; padding: 8px; }
.yn-cart-coupon { display: flex; min-width: 0; flex: 1; gap: 8px; }
.yn-cart-coupon input { width: min(260px,100%); min-height: 40px; border: 1px solid #dfe6ef; border-radius: 10px; background: #f8fafc; padding: 0 13px; color: var(--yn-final-ink); outline: none; }
.yn-cart-coupon input:focus { border-color: var(--yn-final-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.yn-cart-coupon button,
.yn-cart-toolbar__actions button { min-height: 40px; border: 0; border-radius: 10px; padding: 0 16px !important; background: #eef4ff; color: var(--yn-final-blue) !important; font-size: 13px !important; font-weight: 800 !important; cursor: pointer; }
.yn-cart-toolbar__actions { display: flex; align-items: center; }
.yn-cart-summary { background: #fff; }
.yn-cart-summary h3 { margin-bottom: 22px !important; }
.yn-cart-summary .woocommerce-Price-amount { white-space: nowrap; }
.yn-cart-checkout { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; background: linear-gradient(135deg,#0875f5,#0a61e8); color: #fff !important; font-size: 15px; font-weight: 850; box-shadow: 0 12px 24px -14px rgba(8,105,238,.75); transition: transform .15s,box-shadow .15s; }
.yn-cart-checkout:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(8,105,238,.8); }
.yn-cart-checkout-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 22px; color: #718096; font-size: 12px; line-height: 1.4; text-align: center; }
.yn-cart-callback { margin-top: 0; background: #f6f9fd !important; padding: 19px !important; }
.yn-cart-callback input,
.yn-cart-callback textarea { border-color: #dfe7f1 !important; background: #fff; }
.yn-cart-callback button[type="submit"] { min-height: 48px; font-size: 14px !important; }
.woocommerce-notices-wrapper:not(:empty) { max-width: 1320px; margin: 18px auto 0; padding: 0 16px; }

/* WooCommerce Cart Block receives the same visual hierarchy. */
.wc-block-cart__main { min-width: 0; }
.wc-block-cart .wc-block-cart-items { overflow: hidden; background: #fff; }
.wc-block-cart .wc-block-cart-item__image img { width: 104px; height: 104px; object-fit: contain; }
.wc-block-cart .wc-block-components-quantity-selector { border-color: #dfe6ef !important; border-radius: 10px !important; background: #f8fafc; }
.wc-block-cart .wc-block-components-totals-wrapper { border-color: #edf1f6 !important; }
.wc-block-cart .wc-block-components-totals-coupon__button { border-radius: 10px; color: var(--yn-final-blue); font-weight: 800; }
.wc-block-cart .wc-block-components-button:not(.is-link) { border-radius: 12px !important; }

/* Checkout */
.yn-checkout-page { max-width: 1320px !important; padding-top: 36px !important; padding-bottom: 64px !important; }
.yn-checkout-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.yn-checkout-heading > a { display: flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; border: 1px solid var(--yn-final-line); border-radius: 13px; background: #fff; color: #64748b; box-shadow: 0 8px 22px rgba(17,35,67,.05); }
.yn-checkout-heading p { margin: 0 0 5px; color: var(--yn-final-blue); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.yn-checkout-heading h1 { margin: 0; color: var(--yn-final-ink); font-size: 42px; font-weight: 900; line-height: 1.05; letter-spacing: -.04em; }
.yn-checkout-heading span { display: block; margin-top: 9px; color: #6b7890; font-size: 14px; }
.yn-checkout-grid { display: grid !important; grid-template-columns: minmax(0,1fr) 420px; gap: 28px; align-items: start; }
.yn-checkout-main { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.yn-checkout-card,
.yn-checkout-review { border: 1px solid var(--yn-final-line); border-radius: 20px; background: #fff; box-shadow: var(--yn-final-shadow); }
.yn-checkout-card { padding: 26px 28px; }
.yn-checkout-card > h2 { margin-bottom: 22px !important; font-size: 19px !important; }
.yn-checkout-card > h2 > span { width: 31px !important; height: 31px !important; border-radius: 9px !important; }
.yn-checkout-review { position: sticky; top: 96px; padding: 26px; }
.yn-checkout-review > h3 { margin-bottom: 20px !important; font-size: 21px !important; }
.ynout-checkout-fields .form-row { margin: 0 0 15px !important; }
.ynout-checkout-fields label,
.woocommerce-checkout label { display: block; margin: 0 0 7px; color: #34445c; font-size: 12px; font-weight: 750; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection { width: 100%; min-height: 46px; border: 1px solid #dce4ee !important; border-radius: 11px !important; background: #f8fafc !important; padding: 0 13px; color: var(--yn-final-ink); font-size: 14px; outline: none; }
.woocommerce-checkout textarea { min-height: 105px; padding-top: 12px; resize: vertical; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout .select2-container--open .select2-selection { border-color: var(--yn-final-blue) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 12px 0 !important; border-bottom: 1px solid #edf1f6 !important; font-size: 13px; text-align: left; }
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { padding-top: 17px !important; border: 0 !important; color: var(--yn-final-ink); font-size: 18px !important; font-weight: 900; }
.woocommerce-checkout-payment { margin-top: 18px; border-radius: 14px !important; background: #f5f8fc !important; }
.woocommerce-checkout-payment ul.payment_methods { padding: 17px !important; border-bottom-color: #e5ebf3 !important; }
.woocommerce-checkout-payment .payment_box { border-radius: 10px; background: #fff; color: #64748b !important; font-size: 12px !important; }
.woocommerce-checkout-payment .place-order { padding: 17px !important; }
#place_order { width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#0875f5,#0a61e8); color: #fff; font-size: 15px; font-weight: 850; box-shadow: 0 12px 24px -14px rgba(8,105,238,.75); }
.yn-checkout-trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 22px; border: 1px solid var(--yn-final-line); border-radius: 16px; background: #fff; padding: 17px 22px; }
.yn-checkout-trust span { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--yn-final-blue); }
.yn-checkout-trust strong { color: #40506a; font-size: 12px; }

/* Checkout Block fallback. */
.wc-block-checkout { max-width: 1320px !important; margin: 34px auto 64px !important; padding: 0 16px; }
.wc-block-checkout__main .wc-block-components-checkout-step,
.wc-block-checkout__sidebar { border: 1px solid var(--yn-final-line); border-radius: 18px; background: #fff; padding: 22px !important; box-shadow: var(--yn-final-shadow); }
.wc-block-checkout__main .wc-block-components-checkout-step { margin-bottom: 16px !important; }
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox-control input { border-color: #dce4ee !important; border-radius: 11px !important; background: #f8fafc !important; }
.wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 52px; border-radius: 12px; background: var(--yn-final-blue); color: #fff; font-weight: 850; }

/* Editable information-page blocks. */
.yn-contact-blocks { display: grid; gap: 20px; margin-top: 24px; }
.yn-info-image-text { display: grid; grid-template-columns: minmax(240px,.85fr) minmax(0,1.15fr); gap: 28px; align-items: center; overflow: hidden; padding: 24px; }
.yn-info-image-text.is-image-right img { order: 2; }
.yn-info-image-text img { width: 100%; max-height: 330px; border-radius: 15px; object-fit: cover; }
.yn-info-image-text h2,
.yn-info-steps > h2,
.yn-info-faq > h2 { margin: 0 0 14px; color: var(--yn-final-ink); font-size: 22px; }
.yn-info-steps { padding: 26px; }
.yn-info-steps > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.yn-info-steps article { display: flex; gap: 12px; border: 1px solid #e7edf5; border-radius: 14px; background: #f8fafd; padding: 17px; }
.yn-info-steps article > span { display: flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border-radius: 9px; background: #eaf2ff; color: var(--yn-final-blue); font-weight: 850; }
.yn-info-steps h3 { margin: 2px 0 6px; font-size: 14px; }
.yn-info-steps p { margin: 0; color: #66758b; font-size: 13px; line-height: 1.55; }
.yn-info-faq { padding: 26px; }
.yn-info-faq details { border-top: 1px solid #e8edf4; }
.yn-info-faq summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; color: var(--yn-final-ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.yn-info-faq details p { margin: -2px 0 17px; color: #66758b; font-size: 13px; line-height: 1.65; }
.yn-info-callout { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 18px; background: linear-gradient(135deg,#0b1b39,#12366f); padding: 28px; color: #fff; }
.yn-info-callout h2 { margin: 0 0 6px; font-size: 22px; }
.yn-info-callout p { margin: 0; color: rgba(255,255,255,.67); font-size: 14px; }

/* Woo Blocks cart fallback, when the cart page uses the block instead of shortcode. */
.wc-block-cart {
	max-width: 1320px;
	margin: 32px auto 56px !important;
	gap: 24px !important;
}
.wc-block-cart .wc-block-cart-items,
.wc-block-cart .wc-block-components-sidebar {
	border: 1px solid var(--yn-final-line) !important;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--yn-final-shadow);
}
.wc-block-cart .wc-block-cart-items { padding: 8px 22px !important; }
.wc-block-cart .wc-block-cart-items__row { border-bottom: 1px solid #edf1f6 !important; }
.wc-block-cart .wc-block-components-product-name { color: var(--yn-final-ink); font-size: 15px; font-weight: 800; line-height: 1.4; }
.wc-block-cart .wc-block-components-product-price { font-size: 16px; font-weight: 850; }
.wc-block-cart .wc-block-components-sidebar { padding: 24px !important; }
.wc-block-cart .wc-block-cart__submit-button { min-height: 50px; border-radius: 12px; background: var(--yn-final-blue); color: #fff; font-weight: 800; }

@media (min-width: 1280px) {
}

@media (max-width: 767px) {
	.yn-cart-heading h1 { font-size: 35px; }
	.yn-cart-heading > span { font-size: 12px; }
	.yn-cart-items { padding: 16px !important; }
	.yn-cart-items__title { display: none; }
	.yn-cart-item { min-height: 0; align-items: flex-start !important; padding: 16px 0; }
	.yn-cart-item > div:first-child { width: 82px !important; height: 82px !important; }
	.yn-cart-item > div:last-child { flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
	.yn-cart-summary { padding: 20px !important; }
	.yn-cart-page { padding-top: 24px !important; padding-bottom: 42px !important; }
	.yn-cart-heading { align-items: flex-start; margin-bottom: 20px; }
	.yn-cart-item { grid-template-columns: 82px minmax(0,1fr) !important; gap: 13px !important; }
	.yn-cart-item__actions { grid-column: 1 / -1; width: 100%; min-width: 0; justify-content: space-between !important; padding-left: 95px; }
	.yn-cart-item__actions > .hidden { display: block !important; width: auto; font-size: 16px !important; }
	.yn-cart-item__info .md\\:hidden { display: none !important; }
	.yn-cart-toolbar { align-items: stretch; flex-direction: column; padding: 10px; }
	.yn-cart-coupon { width: 100%; }
	.yn-cart-coupon input { min-width: 0; flex: 1; }
	.yn-cart-toolbar__actions button { width: 100%; justify-content: center; }
	.wc-block-cart { margin-top: 22px !important; padding: 0 14px; }
	.yn-checkout-page { padding-top: 22px !important; padding-bottom: 42px !important; }
	.yn-checkout-heading h1 { font-size: 32px; }
	.yn-checkout-heading span { font-size: 13px; line-height: 1.5; }
	.yn-checkout-grid { grid-template-columns: 1fr; gap: 18px; }
	.yn-checkout-card,
	.yn-checkout-review { padding: 19px; border-radius: 16px; }
	.yn-checkout-review { position: static; }
	.yn-checkout-trust { grid-template-columns: 1fr; align-items: flex-start; }
	.yn-checkout-trust span { justify-content: flex-start; }
	.yn-info-image-text { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
	.yn-info-image-text.is-image-right img { order: 0; }
	.yn-info-steps > div { grid-template-columns: 1fr; }
	.yn-info-callout { align-items: flex-start; flex-direction: column; }
}

/* Shared header search: one component, no global input/button overrides. */
.ynout-live-search { position: relative; }
.ynout-live-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	overflow: hidden;
	border: 1px solid #dfe7f2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(15,35,70,.14);
}
.ynout-live-search__item { display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 11px; color:#0b1b3b; }
.ynout-live-search__item:hover,
.ynout-live-search__item.is-active { background:#f0f5ff; }
.ynout-live-search__item img { width:48px; height:48px; flex:0 0 48px; object-fit:contain; border-radius:9px; background:#f7f9fc; }
.ynout-live-search__item span { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ynout-live-search__item strong { overflow:hidden; font-size:14px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.ynout-live-search__item small { color:#2563eb; font-size:13px; font-weight:800; }
.ynout-live-search__state { padding:14px; color:#718096; font-size:13px; text-align:center; }


/* Catalog sidebar visual polish — no filter logic changes. */
@media (min-width: 1024px) {
	.yn-sidebar {
		width: 276px;
		flex: 0 0 276px;
		position: sticky;
		top: 92px;
		align-self: flex-start;
	}
}
.yn-filter-form {
	gap: .75rem;
}
.yn-filter-card {
	border-color: rgb(var(--color-primary) / .09);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px -20px rgba(15, 37, 75, .28);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.yn-filter-card:hover {
	border-color: rgb(var(--color-primary) / .13);
	box-shadow: 0 11px 26px -22px rgba(15, 37, 75, .34);
}
.yn-filter-heading {
	min-height: 24px;
	margin-bottom: .7rem;
	font-weight: 800;
	letter-spacing: -.01em;
}
button.yn-filter-heading svg {
	flex: 0 0 auto;
	color: rgb(var(--color-primary) / .46);
	transition: transform .2s ease, color .2s ease;
}
button.yn-filter-heading[aria-expanded="false"] svg {
	transform: rotate(180deg);
}
button.yn-filter-heading:hover svg {
	color: rgb(var(--color-accent));
}
.yn-filter-heading.mt-2 {
	margin-top: .375rem;
	margin-bottom: 0;
}
.yn-filter-section-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem .25rem .05rem;
	color: rgb(var(--color-primary) / .72);
	font-size: .75rem;
	line-height: 1rem;
	letter-spacing: .055em;
	text-transform: uppercase;
}
.yn-filter-section-label > span {
	display: inline-flex;
	color: rgb(var(--color-accent));
}
.yn-filter-options {
	display: grid;
	gap: 4px;
}
.yn-category-link,
.yn-check-row {
	border-radius: 9px;
}
.yn-category-link {
	min-height: 34px;
	padding-inline: .55rem;
	line-height: 1.25rem;
}
.yn-category-link > span:nth-child(2),
.yn-check-row > span:nth-last-child(2) {
	min-width: 0;
}
.yn-category-link > span:last-child,
.yn-check-row > span:last-child {
	min-width: 24px;
	margin-left: auto;
	padding: 1px 5px;
	border-radius: 999px;
	background: rgb(var(--color-primary) / .045);
	color: rgb(var(--color-primary) / .45);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.yn-category-link:hover {
	background: rgb(var(--color-primary) / .04);
	color: rgb(var(--color-primary) / .82);
}
.yn-category-link.is-active {
	background: rgb(var(--color-accent) / .09);
	color: rgb(var(--color-accent));
}
.yn-category-link.is-active > span:last-child {
	background: rgb(var(--color-accent) / .10);
	color: rgb(var(--color-accent));
}
.yn-check-row {
	min-height: 34px;
	padding: .3rem .35rem;
	line-height: 1.2rem;
}
.yn-check-row:hover {
	background: rgb(var(--color-primary) / .035);
	color: rgb(var(--color-primary) / .82);
}
.yn-check {
	position: relative;
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgb(var(--color-primary) / .22);
	border-radius: 5px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.yn-check::after {
	width: 7px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	content: "";
	opacity: 0;
	transform: translateY(-1px) rotate(-45deg) scale(.7);
	transition: opacity .12s ease, transform .12s ease;
}
.yn-check-row input[type="checkbox"]:checked + .yn-check {
	border-color: var(--yn-catalog-blue);
	background: var(--yn-catalog-blue);
	box-shadow: 0 3px 8px rgb(var(--color-accent) / .22);
}
.yn-check-row input[type="checkbox"]:checked + .yn-check::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.yn-check-row input[type="checkbox"]:focus-visible + .yn-check { box-shadow: 0 0 0 3px rgb(var(--color-accent) / .14); }
.yn-check-row:active .yn-check { transform: scale(.94); }
.yn-search-brand,
.yn-price-inputs input,
.yn-sort {
	border-color: rgb(var(--color-primary) / .10);
	background: #fbfcfe;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.yn-search-brand:hover,
.yn-price-inputs input:hover,
.yn-sort:hover {
	border-color: rgb(var(--color-primary) / .16);
}
.yn-filter-card--price { background: linear-gradient(180deg, #fff, #fbfdff); }
.yn-filter-card--price .yn-filter-heading { margin-bottom: .5rem; }
.yn-show-more {
	padding: .15rem .2rem;
	border-radius: 6px;
}
.yn-show-more:hover {
	background: rgb(var(--color-accent) / .06);
}
.yn-filter-submit,
.yn-filter-reset {
	border-radius: 12px;
}
.yn-filter-submit {
	box-shadow: 0 8px 18px -12px rgb(var(--color-accent) / .65);
}
.yn-filter-reset {
	border-color: rgb(var(--color-primary) / .10);
}
@media (max-width: 1023px) {
	.yn-sidebar.is-mobile-open {
		background: #f7f9fc;
	}
	.yn-sidebar.is-mobile-open .yn-filter-form {
		max-width: 560px;
		margin: 0 auto;
	}
	.yn-mobile-filter-close {
		position: sticky;
		top: -20px;
		z-index: 4;
		margin-inline: -18px;
		padding: 14px 18px 12px;
		border-bottom: 1px solid rgb(var(--color-primary) / .08);
		background: rgba(255,255,255,.94);
		backdrop-filter: blur(10px);
	}
}


/* 2.3.6 component fixes: category tiles and header action badges. */
.ynout-header-action-icon {
	position: relative;
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
}
.ynout-header-count {
	position: absolute;
	top: -5px;
	right: -7px;
	display: flex;
	min-width: 19px;
	height: 19px;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 2px 7px rgba(15,35,70,.14);
}
.yn-home-categories-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 768px) { .yn-home-categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .yn-home-categories-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.yn-home-category-card {
	display: flex;
	min-width: 0;
	min-height: 154px;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 1px solid rgb(var(--color-primary) / .06);
	border-radius: 18px;
	background: #fff;
	padding: 10px 9px 12px;
	text-align: center;
	box-shadow: 0 10px 30px -25px rgba(15,35,70,.26);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.yn-home-category-card:hover {
	transform: translateY(-2px);
	border-color: rgb(var(--color-accent) / .20);
	box-shadow: 0 16px 34px -25px rgba(37,99,235,.24);
}
.yn-home-category-card__media {
	position: relative;
	display: flex;
	width: 100%;
	height: 102px;
	flex: 0 0 102px;
	align-items: center;
	justify-content: center;
}
.yn-home-category-card__circle {
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: linear-gradient(145deg, #f1f5ff, #e8f0ff);
	box-shadow: inset 0 0 0 1px rgb(var(--color-accent) / .05);
}
.yn-home-category-card__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 96px;
	height: 86px;
	max-width: calc(100% - 6px);
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 8px 12px rgba(15,35,70,.10));
	transition: transform .25s ease;
}
.yn-home-category-card:hover .yn-home-category-card__image { transform: scale(1.045); }
.yn-home-category-card__fallback {
	position: relative;
	z-index: 1;
	display: inline-flex;
	width: 82px;
	height: 82px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(15,35,70,.08);
}
.yn-home-category-card__copy { min-width: 0; margin-top: auto; }
.yn-home-category-card__title { display: block; color: rgb(var(--color-primary)); font-size: 14px; font-weight: 800; line-height: 1.25; transition: color .18s ease; }
.yn-home-category-card:hover .yn-home-category-card__title { color: rgb(var(--color-accent)); }
.yn-home-category-card__count { display: block; margin-top: 4px; color: rgb(var(--color-primary) / .44); font-size: 11px; line-height: 1.25; }
@media (min-width: 768px) {
	.yn-home-category-card { min-height: 162px; padding-top: 11px; }
	.yn-home-category-card__media { height: 106px; flex-basis: 106px; }
	.yn-home-category-card__circle { width: 76px; height: 76px; }
	.yn-home-category-card__image { width: 102px; height: 90px; }
	.yn-home-category-card__title { font-size: 15px; }
}

/* ============================================================
 * 2.3.7 — stable header, automatic categories, hero builder,
 * page-heading geometry and bounded catalog art.
 * ============================================================ */
.yn-main-header {
	border-bottom: 1px solid rgb(var(--color-primary) / .06);
	background: rgba(255,255,255,.96);
	box-shadow: 0 8px 28px -26px rgba(15,35,70,.36);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	transition: box-shadow .2s ease, background-color .2s ease;
}
.yn-main-header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(15,35,70,.30); }
.yn-main-header__inner { display:flex; min-height:74px; align-items:center; gap:14px; }
.yn-main-header__brand { margin-right:2px; }
.yn-main-header__brand .ynout-brand-logo { width:138px; }
.yn-main-header__menu { display:none; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; border:1px solid rgb(var(--color-primary) / .07); border-radius:12px; background:#fff; color:rgb(var(--color-primary) / .72); }
.yn-main-header__catalog { display:inline-flex; min-height:46px; flex:0 0 auto; align-items:center; gap:9px; border-radius:13px; background:rgb(var(--color-accent)); padding:0 17px; color:#fff; font-size:14px; font-weight:800; box-shadow:0 10px 22px -15px rgb(var(--color-accent) / .7); transition:transform .18s ease, box-shadow .18s ease; }
.yn-main-header__catalog:hover { transform:translateY(-1px); box-shadow:0 14px 24px -15px rgb(var(--color-accent) / .8); }
.yn-main-header__search { min-width:180px; flex:1 1 auto; }
.yn-main-header__search-shell { position:relative; }
.yn-main-header__search-shell > input[type="search"] { width:100%; height:46px; border:1px solid #dfe7f2; border-radius:14px; background:#f8faff; padding:0 48px 0 43px; color:rgb(var(--color-primary)); font-size:14px; font-weight:550; outline:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.yn-main-header__search-shell > input[type="search"]:focus { border-color:rgb(var(--color-accent) / .55); background:#fff; box-shadow:0 0 0 4px rgb(var(--color-accent) / .08), 0 10px 25px -22px rgba(15,35,70,.45); }
.yn-main-header__search-prefix { position:absolute; left:15px; top:50%; z-index:2; transform:translateY(-50%); color:rgb(var(--color-primary) / .42); pointer-events:none; }
.yn-main-header__search-submit { position:absolute; right:6px; top:50%; display:inline-flex; width:34px; height:34px; transform:translateY(-50%); align-items:center; justify-content:center; border-radius:10px; background:#fff; color:rgb(var(--color-primary) / .62); box-shadow:0 2px 8px rgba(15,35,70,.05); transition:background .18s ease,color .18s ease; }
.yn-main-header__search-submit:hover { background:rgb(var(--color-accent)); color:#fff; }
.yn-main-header__actions { display:flex; flex:0 0 auto; align-items:center; gap:2px; }
.yn-main-header__action { display:flex; min-width:68px; min-height:54px; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:12px; padding:5px 7px; color:rgb(var(--color-primary) / .64); transition:background .18s ease,color .18s ease; }
.yn-main-header__action:hover { background:rgb(var(--color-accent) / .055); color:rgb(var(--color-accent)); }
.yn-main-header__action.is-wishlist:hover { background:rgba(239,68,68,.055); color:#ef4444; }
.yn-main-header__action-icon { position:relative; display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; }
.yn-main-header__action-label { font-size:11px; font-weight:750; line-height:1; white-space:nowrap; }
.yn-main-header__online { position:absolute; right:0; bottom:0; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#22c55e; }
.ynout-header-count { top:-4px; right:-8px; min-width:20px; height:20px; padding:0 5px; border-width:2px; font-size:10px; }
.ynout-header-count.is-compare { background:rgb(var(--color-accent)); }
.ynout-header-count.is-wishlist { background:#ef4444; }
@media (max-width:1023px) {
	.yn-main-header__inner { min-height:66px; gap:10px; }
	.yn-main-header__menu { display:inline-flex; }
	.yn-main-header__catalog { display:none; }
	.yn-main-header__action { min-width:48px; min-height:48px; padding:4px; }
	.yn-main-header__action-label { display:none; }
	.yn-main-header__brand .ynout-brand-logo { width:124px; }
}
@media (max-width:767px) {
	.yn-main-header__search { display:none; }
	.yn-main-header__actions { margin-left:auto; }
	.yn-main-header__brand .ynout-brand-logo { width:116px; }
}
@media (max-width:479px) {
	.yn-main-header__inner { gap:6px; }
	.yn-main-header__brand .ynout-brand-logo { width:106px; }
	.yn-main-header__action { min-width:43px; }
}

/* Categories: number of columns is calculated by available width and tile count. */
.yn-home-categories-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%, 142px),1fr));
	gap:12px;
}
.yn-home-category-card { min-height:166px; }
.yn-home-category-card__media { height:108px; flex-basis:108px; }
.yn-home-category-card__circle { width:76px; height:76px; }
.yn-home-category-card__image { width:108px; height:96px; }
@media (max-width:639px) {
	.yn-home-categories-grid { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
	.yn-home-category-card { min-height:154px; }
	.yn-home-category-card__media { height:98px; flex-basis:98px; }
	.yn-home-category-card__image { width:98px; height:88px; }
}

/* Page heading: fixed icon + fluid copy. No max-width/grid side effects. */
.yn-page-heading {
	position:relative;
	top:auto;
	z-index:auto;
	display:flex;
	width:100%;
	max-width:1080px;
	align-items:flex-start;
	gap:20px;
	margin:0 0 30px;
	background:transparent;
	box-shadow:none;
}
.yn-page-heading__icon { width:54px; height:54px; flex:0 0 54px; margin-top:2px; border-radius:16px; }
.yn-page-heading__copy { min-width:0; flex:1 1 auto; padding-top:0; }
.yn-page-heading h1 { max-width:none; overflow-wrap:normal; word-break:normal; font-size:clamp(36px,4vw,50px); line-height:1.02; letter-spacing:-.04em; }
.yn-page-lead { max-width:900px; margin-top:11px; font-size:15px; line-height:1.65; }
@media (max-width:767px) {
	.yn-page-heading { gap:13px; margin-bottom:22px; }
	.yn-page-heading__icon { width:44px; height:44px; flex-basis:44px; margin-top:1px; border-radius:13px; }
	.yn-page-heading h1 { font-size:clamp(31px,9vw,38px); line-height:1.06; }
	.yn-page-eyebrow { margin-bottom:5px; font-size:10px; }
	.yn-page-lead { margin-top:8px; font-size:14px; line-height:1.6; }
}

/* Catalog hero visual is always contained inside the hero box. */
.yn-catalog-hero { position:relative; isolation:isolate; overflow:hidden; min-height:228px; }
.yn-hero-content { min-height:228px; }
.yn-hero-copy { max-width:min(60%,700px); }
.yn-hero-art-shell {
	position:absolute;
	top:0;
	right:clamp(18px,4vw,64px);
	bottom:0;
	width:min(40%,500px);
	height:auto;
	transform:none;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	pointer-events:none;
}
.yn-hero-art-halo { width:min(70%,300px); max-height:90%; }
.yn-hero-art { position:relative; z-index:2; width:92%; height:88%; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(29,57,105,.13)); }
.yn-hero-art-shell.is-composite { overflow:hidden; padding:8px; }
.yn-hero-art-shell.is-composite .yn-hero-art { position:absolute; width:58%; height:64%; padding:8px; border:1px solid rgba(255,255,255,.8); border-radius:20px; background:rgba(255,255,255,.75); box-shadow:0 18px 34px -25px rgba(11,27,59,.38); backdrop-filter:blur(8px); }
.yn-hero-art-shell.is-composite .yn-hero-art--main { right:3%; top:16%; z-index:3; width:66%; height:70%; }
.yn-hero-art-shell.is-composite .yn-hero-art--secondary { left:2%; top:7%; z-index:1; width:47%; height:48%; transform:rotate(-5deg); opacity:.92; }
.yn-hero-art-shell.is-composite .yn-hero-art--tertiary { left:8%; bottom:5%; z-index:2; width:46%; height:45%; transform:rotate(5deg); opacity:.96; }
@media (max-width:1023px) {
	.yn-hero-copy { max-width:63%; }
	.yn-hero-art-shell { right:14px; width:38%; }
}
@media (max-width:767px) {
	.yn-catalog-hero,.yn-hero-content { min-height:198px; }
	.yn-hero-copy { max-width:70%; }
	.yn-hero-art-shell { right:10px; width:32%; opacity:.78; }
	.yn-hero-art-shell.is-composite .yn-hero-art--secondary,.yn-hero-art-shell.is-composite .yn-hero-art--tertiary { display:none; }
	.yn-hero-art-shell.is-composite .yn-hero-art--main { position:relative; inset:auto; width:100%; height:80%; }
}
@media (max-width:479px) {
	.yn-hero-copy { max-width:76%; }
	.yn-hero-art-shell { right:8px; width:25%; opacity:.52; }
}

/* Home hero / banner constructor. */
.yn-home-hero { position:relative; min-height:var(--yn-home-hero-height,360px); overflow:hidden; border-radius:24px; background:#08172f; box-shadow:0 24px 54px -42px rgba(5,18,42,.65); }
.yn-home-hero__slide { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr); align-items:center; gap:20px; overflow:hidden; background:linear-gradient(var(--hero-angle,108deg),var(--hero-from,#07162f),var(--hero-to,#1d4ed8)); color:var(--hero-text,#fff); }
.yn-home-hero__slide.is-image-left .yn-home-hero__copy { order:2; }
.yn-home-hero__slide.is-image-left .yn-home-hero__visual { order:1; }
.yn-home-hero__glow { position:absolute; inset:-30%; background:radial-gradient(circle at 68% 50%,rgba(255,255,255,.16),transparent 34%); pointer-events:none; }
.yn-home-hero__copy { position:relative; z-index:3; max-width:650px; padding:44px 0 54px 48px; }
.yn-home-hero__badge { display:inline-flex; min-height:28px; align-items:center; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.11); padding:0 11px; color:inherit; font-size:11px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; backdrop-filter:blur(10px); }
.yn-home-hero__copy h2 { max-width:620px; margin:14px 0 0; color:inherit; font-size:clamp(30px,3.6vw,48px); font-weight:900; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.yn-home-hero__copy p { max-width:520px; margin:14px 0 0; color:color-mix(in srgb,var(--hero-text,#fff) 72%,transparent); font-size:14px; line-height:1.6; }
.yn-home-hero__button { display:inline-flex; min-height:44px; align-items:center; gap:8px; margin-top:24px; border-radius:12px; background:var(--hero-accent,#0867f2); padding:0 17px; color:#fff; font-size:13px; font-weight:850; box-shadow:0 12px 24px -16px rgba(0,0,0,.55); transition:transform .18s ease,filter .18s ease; }
.yn-home-hero__button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.yn-home-hero__visual { position:relative; z-index:2; height:100%; min-width:0; overflow:hidden; }
.yn-home-hero__visual img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:right center; transform:scale(1.035); }
.yn-home-hero__slide.is-image-left .yn-home-hero__visual img { object-position:left center; }
.yn-home-hero__controls { position:absolute; left:44px; bottom:18px; z-index:20; display:flex; align-items:center; gap:10px; }
.yn-home-hero__arrow { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.17); border-radius:10px; background:rgba(3,10,25,.22); color:#fff; backdrop-filter:blur(10px); }
.yn-home-hero__dots { display:flex; align-items:center; gap:6px; }
.yn-home-hero__dots button { width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.35); transition:width .2s ease,background .2s ease; }
.yn-home-hero__dots button.is-active { width:24px; background:#fff; }
@media (max-width:1023px) {
	.yn-home-hero { min-height:330px; }
	.yn-home-hero__slide { grid-template-columns:minmax(0,1fr) minmax(260px,.9fr); }
	.yn-home-hero__copy { padding:36px 0 48px 34px; }
	.yn-home-hero__controls { left:32px; }
}
@media (max-width:767px) {
	.yn-home-hero { min-height:390px; border-radius:20px; }
	.yn-home-hero__slide,.yn-home-hero__slide.is-image-left { grid-template-columns:1fr; grid-template-rows:1fr; }
	.yn-home-hero__visual,.yn-home-hero__slide.is-image-left .yn-home-hero__visual { position:absolute; inset:0; order:initial; opacity:.46; }
	.yn-home-hero__visual:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--hero-from,#07162f) 5%,color-mix(in srgb,var(--hero-from,#07162f) 82%,transparent) 48%,transparent 100%); }
	.yn-home-hero__visual img,.yn-home-hero__slide.is-image-left .yn-home-hero__visual img { object-position:center; }
	.yn-home-hero__copy,.yn-home-hero__slide.is-image-left .yn-home-hero__copy { order:initial; align-self:center; max-width:88%; padding:34px 24px 68px; }
	.yn-home-hero__copy h2 { font-size:clamp(29px,9vw,40px); }
	.yn-home-hero__copy p { font-size:13px; }
	.yn-home-hero__controls { left:22px; bottom:17px; }
}

/* ============================================================
 * 2.3.9 — Secondary promo banners (separate from primary hero)
 * ============================================================ */
.yn-promo-section { min-width:0; }
.yn-promo-section__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; }
.yn-promo-section__head h2 { margin:0; color:#07152f; font-size:clamp(22px,2.1vw,28px); font-weight:900; line-height:1.12; letter-spacing:-.035em; }
.yn-promo-slider { position:relative; min-width:0; }
.yn-promo-slider__viewport { position:relative; min-height:310px; overflow:hidden; border-radius:22px; }
.yn-promo-slider__slide { position:absolute; inset:0; min-width:0; }
.yn-promo-card { --yn-promo-from:#07162f; --yn-promo-to:#1d4ed8; --yn-promo-angle:108deg; --yn-promo-accent:#0867f2; --yn-promo-text:#fff; position:relative; isolation:isolate; display:grid; min-width:0; overflow:hidden; border-radius:22px; background:linear-gradient(var(--yn-promo-angle),var(--yn-promo-from),var(--yn-promo-to)); color:var(--yn-promo-text); text-decoration:none; box-shadow:0 22px 48px -38px rgba(5,18,42,.58); }
.yn-promo-card.is-slide { width:100%; height:310px; grid-template-columns:minmax(0,.96fr) minmax(300px,1.04fr); align-items:center; }
.yn-promo-card.is-tile { min-height:250px; grid-template-columns:minmax(0,1fr) minmax(150px,.78fr); align-items:center; }
.yn-promo-card__glow { position:absolute; inset:-30%; z-index:-1; pointer-events:none; background:radial-gradient(circle at 72% 48%,rgba(255,255,255,.18),transparent 31%); }
.yn-promo-card__copy { position:relative; z-index:2; display:flex; min-width:0; flex-direction:column; align-items:flex-start; justify-content:center; padding:36px 18px 36px 42px; }
.yn-promo-card.is-tile .yn-promo-card__copy { padding:28px 8px 28px 28px; }
.yn-promo-card__badge { display:inline-flex; min-height:25px; align-items:center; margin-bottom:11px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.12); padding:0 10px; color:inherit; font-size:10px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(8px); }
.yn-promo-card__title { display:block; max-width:620px; color:inherit; font-size:clamp(26px,3vw,40px); font-weight:900; line-height:1.03; letter-spacing:-.045em; text-wrap:balance; }
.yn-promo-card.is-tile .yn-promo-card__title { font-size:clamp(20px,2vw,28px); }
.yn-promo-card__subtitle { display:block; max-width:510px; margin-top:11px; color:color-mix(in srgb,var(--yn-promo-text) 72%,transparent); font-size:13px; line-height:1.55; }
.yn-promo-card.is-tile .yn-promo-card__subtitle { font-size:12px; line-height:1.48; }
.yn-promo-card__cta { display:inline-flex; min-height:40px; align-items:center; gap:7px; margin-top:19px; border-radius:11px; background:var(--yn-promo-accent); padding:0 15px; color:#fff; font-size:12px; font-weight:850; box-shadow:0 12px 26px -18px rgba(0,0,0,.6); transition:transform .18s ease,filter .18s ease; }
.yn-promo-card:hover .yn-promo-card__cta { transform:translateY(-1px); filter:brightness(1.08); }
.yn-promo-card__visual { position:relative; z-index:1; display:flex; min-width:0; height:100%; align-items:center; justify-content:center; overflow:hidden; padding:22px 28px 18px 12px; }
.yn-promo-card__visual img { display:block; width:100%; height:100%; max-width:560px; max-height:275px; object-fit:contain; filter:drop-shadow(0 17px 26px rgba(0,0,0,.3)); transition:transform .35s ease; }
.yn-promo-card:hover .yn-promo-card__visual img { transform:translateY(-2px) scale(1.015); }
.yn-promo-card.is-tile .yn-promo-card__visual { padding:22px 20px 18px 0; }
.yn-promo-card.is-tile .yn-promo-card__visual img { max-height:205px; }
.yn-promo-card.is-image-left .yn-promo-card__copy { order:2; padding-right:42px; padding-left:18px; }
.yn-promo-card.is-image-left .yn-promo-card__visual { order:1; padding-right:12px; padding-left:28px; }
.yn-promo-card.is-tile.is-image-left .yn-promo-card__copy { padding-right:28px; padding-left:8px; }
.yn-promo-card.is-tile.is-image-left .yn-promo-card__visual { padding-right:0; padding-left:20px; }
.yn-promo-slider__controls { position:absolute; right:16px; bottom:15px; z-index:15; display:flex; align-items:center; gap:8px; }
.yn-promo-slider__arrow { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(3,10,25,.25); color:#fff; backdrop-filter:blur(10px); transition:background .18s ease,transform .18s ease; }
.yn-promo-slider__arrow:hover { background:rgba(255,255,255,.16); }
.yn-promo-slider__arrow:active { transform:scale(.95); }
.yn-promo-slider__dots { display:flex; min-height:34px; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(3,10,25,.22); padding:0 10px; backdrop-filter:blur(10px); }
.yn-promo-slider__dots button { width:7px; height:7px; border:0; border-radius:999px; background:rgba(255,255,255,.42); padding:0; transition:width .2s ease,background .2s ease; }
.yn-promo-slider__dots button.is-active { width:22px; background:#fff; }
.yn-promo-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); gap:14px; min-width:0; }

@media (max-width: 900px) {
	.yn-promo-slider__viewport { min-height:290px; }
	.yn-promo-card.is-slide { height:290px; grid-template-columns:minmax(0,1fr) minmax(220px,.82fr); }
	.yn-promo-card__copy { padding-left:30px; }
	.yn-promo-card__title { font-size:clamp(24px,4vw,34px); }
}
@media (max-width: 640px) {
	.yn-promo-section__head { margin-bottom:11px; }
	.yn-promo-section__head h2 { font-size:21px; }
	.yn-promo-slider__viewport { min-height:300px; border-radius:18px; }
	.yn-promo-card,.yn-promo-card.is-slide,.yn-promo-card.is-tile,.yn-promo-card.is-image-left { grid-template-columns:1fr; grid-template-rows:1fr; min-height:300px; border-radius:18px; }
	.yn-promo-card__visual,.yn-promo-card.is-image-left .yn-promo-card__visual,.yn-promo-card.is-tile .yn-promo-card__visual,.yn-promo-card.is-tile.is-image-left .yn-promo-card__visual { position:absolute; inset:0; order:initial; height:100%; padding:22px 4px 8px 43%; opacity:.5; }
	.yn-promo-card__visual:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--yn-promo-from) 0%,color-mix(in srgb,var(--yn-promo-from) 82%,transparent) 54%,transparent 100%); }
	.yn-promo-card__visual img,.yn-promo-card.is-tile .yn-promo-card__visual img { max-width:none; max-height:245px; }
	.yn-promo-card__copy,.yn-promo-card.is-image-left .yn-promo-card__copy,.yn-promo-card.is-tile .yn-promo-card__copy,.yn-promo-card.is-tile.is-image-left .yn-promo-card__copy { order:initial; align-self:center; max-width:90%; padding:26px 22px 64px; }
	.yn-promo-card__title,.yn-promo-card.is-tile .yn-promo-card__title { font-size:clamp(25px,7.8vw,32px); }
	.yn-promo-card__subtitle,.yn-promo-card.is-tile .yn-promo-card__subtitle { max-width:82%; font-size:12px; }
	.yn-promo-card__cta { min-height:38px; margin-top:16px; padding:0 13px; }
	.yn-promo-slider__controls { right:12px; bottom:11px; }
	.yn-promo-slider__arrow { display:none; }
	.yn-promo-tiles { grid-template-columns:1fr; gap:11px; }
	.yn-promo-tiles .yn-promo-card { min-height:270px; }
}

/* ============================================================
 * 2.3.10 — Flexible promo tile row builder
 * Patterns such as 2+3, 1+4, 3+2 and custom row sequences.
 * ============================================================ */
.yn-promo-tiles {
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:14px;
}
.yn-promo-tiles__row {
	display:grid;
	min-width:0;
	grid-template-columns:repeat(var(--yn-promo-row-count, 2), minmax(0, 1fr));
	gap:14px;
}
.yn-promo-tiles__row > .yn-promo-card { min-width:0; }

/* One banner in a row behaves as a wide promotional hero. */
.yn-promo-card.is-tile.is-row-1 {
	min-height:300px;
	grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);
}
.yn-promo-card.is-tile.is-row-1 .yn-promo-card__copy { padding:34px 22px 34px 38px; }
.yn-promo-card.is-tile.is-row-1 .yn-promo-card__title { font-size:clamp(28px,3vw,38px); }
.yn-promo-card.is-tile.is-row-1 .yn-promo-card__subtitle { max-width:560px; font-size:13px; }
.yn-promo-card.is-tile.is-row-1 .yn-promo-card__visual img { max-height:265px; }

/* Two-up row keeps the standard balanced tile composition. */
.yn-promo-card.is-tile.is-row-2 { min-height:250px; }

/* Three-up row becomes slightly denser but keeps the artwork visible. */
.yn-promo-card.is-tile.is-row-3 {
	min-height:232px;
	grid-template-columns:minmax(0,1.08fr) minmax(112px,.68fr);
}
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__copy { padding:24px 6px 24px 24px; }
.yn-promo-card.is-tile.is-row-3.is-image-left .yn-promo-card__copy { padding:24px 24px 24px 6px; }
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__title { font-size:clamp(19px,1.7vw,24px); }
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__subtitle {
	margin-top:8px;
	font-size:11.5px;
	line-height:1.42;
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__cta { min-height:36px; margin-top:14px; padding:0 12px; font-size:11px; }
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__visual { padding:18px 15px 15px 0; }
.yn-promo-card.is-tile.is-row-3.is-image-left .yn-promo-card__visual { padding:18px 0 15px 15px; }
.yn-promo-card.is-tile.is-row-3 .yn-promo-card__visual img { max-height:180px; }

/* Four-up row uses a compact overlay composition so text never gets crushed. */
.yn-promo-card.is-tile.is-row-4,
.yn-promo-card.is-tile.is-row-4.is-image-left {
	min-height:224px;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
}
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__visual,
.yn-promo-card.is-tile.is-row-4.is-image-left .yn-promo-card__visual {
	position:absolute;
	inset:0;
	order:initial;
	height:100%;
	padding:16px 2px 10px 44%;
	opacity:.62;
}
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__visual::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,var(--yn-promo-from) 0%,color-mix(in srgb,var(--yn-promo-from) 88%,transparent) 48%,transparent 100%);
}
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__visual img { max-width:none; max-height:190px; }
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__copy,
.yn-promo-card.is-tile.is-row-4.is-image-left .yn-promo-card__copy {
	order:initial;
	align-self:center;
	max-width:92%;
	padding:20px 15px 20px 20px;
}
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__badge { min-height:22px; margin-bottom:8px; padding:0 8px; font-size:9px; }
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__title { font-size:clamp(17px,1.45vw,21px); line-height:1.08; }
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__subtitle {
	max-width:86%;
	margin-top:7px;
	font-size:10.5px;
	line-height:1.4;
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.yn-promo-card.is-tile.is-row-4 .yn-promo-card__cta { min-height:34px; margin-top:12px; padding:0 10px; font-size:10.5px; }

/* Tablet: complex rows collapse to two columns without changing the chosen order. */
@media (max-width: 1040px) {
	.yn-promo-tiles__row.is-count-3,
	.yn-promo-tiles__row.is-count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.yn-promo-card.is-tile.is-row-1 { min-height:285px; grid-template-columns:minmax(0,1fr) minmax(240px,.88fr); }
	.yn-promo-card.is-tile.is-row-3,
	.yn-promo-card.is-tile.is-row-4 { min-height:240px; }
}

/* Phones: every tile becomes a full-width card; row pattern stays as ordering only. */
@media (max-width: 640px) {
	.yn-promo-tiles { gap:11px; }
	.yn-promo-tiles__row,
	.yn-promo-tiles__row.is-count-2,
	.yn-promo-tiles__row.is-count-3,
	.yn-promo-tiles__row.is-count-4 { grid-template-columns:1fr; gap:11px; }
	.yn-promo-card.is-tile.is-row-1,
	.yn-promo-card.is-tile.is-row-2,
	.yn-promo-card.is-tile.is-row-3,
	.yn-promo-card.is-tile.is-row-4 { min-height:270px; }
	.yn-promo-card.is-tile.is-row-3 .yn-promo-card__copy,
	.yn-promo-card.is-tile.is-row-3.is-image-left .yn-promo-card__copy,
	.yn-promo-card.is-tile.is-row-4 .yn-promo-card__copy,
	.yn-promo-card.is-tile.is-row-4.is-image-left .yn-promo-card__copy { max-width:90%; padding:26px 22px 58px; }
	.yn-promo-card.is-tile.is-row-3 .yn-promo-card__title,
	.yn-promo-card.is-tile.is-row-4 .yn-promo-card__title { font-size:clamp(24px,7.5vw,31px); }
	.yn-promo-card.is-tile.is-row-3 .yn-promo-card__subtitle,
	.yn-promo-card.is-tile.is-row-4 .yn-promo-card__subtitle { max-width:82%; font-size:12px; -webkit-line-clamp:3; }
	.yn-promo-card.is-tile.is-row-3 .yn-promo-card__cta,
	.yn-promo-card.is-tile.is-row-4 .yn-promo-card__cta { min-height:38px; margin-top:16px; padding:0 13px; font-size:12px; }
}

/* ============================================================
 * 2.3.11 — catalog containment, filters and configurable home hero
 * ============================================================ */

/* Catalog artwork is now positioned against the same .container as the copy,
 * not against the viewport. This prevents the illustration from drifting past
 * the right edge on wide/odd viewports. */
.yn-catalog-hero > .container {
	min-height:228px;
	overflow:hidden;
}
.yn-catalog-hero .yn-hero-content {
	min-height:228px;
}
.yn-catalog-hero .yn-hero-copy {
	position:relative;
	z-index:4;
	max-width:min(62%,700px);
}
.yn-catalog-hero .yn-hero-art-shell {
	top:0;
	right:18px;
	bottom:0;
	left:auto;
	width:min(40%,480px);
	max-width:calc(100% - 36px);
	transform:none;
	overflow:hidden;
	contain:paint;
}
.yn-catalog-hero .yn-hero-art-shell .yn-hero-art {
	max-width:100%;
	max-height:100%;
}
@media (max-width:1023px) {
	.yn-catalog-hero .yn-hero-copy { max-width:65%; }
	.yn-catalog-hero .yn-hero-art-shell { right:14px; width:36%; }
}
@media (max-width:767px) {
	.yn-catalog-hero > .container,.yn-catalog-hero .yn-hero-content { min-height:200px; }
	.yn-catalog-hero .yn-hero-copy { max-width:72%; }
	.yn-catalog-hero .yn-hero-art-shell { right:10px; width:31%; opacity:.72; }
}
@media (max-width:479px) {
	.yn-catalog-hero .yn-hero-copy { max-width:78%; }
	.yn-catalog-hero .yn-hero-art-shell { right:8px; width:24%; opacity:.48; }
}

/* Filter cards: the clickable title stays compact when closed; all secondary
 * controls including "Показать ещё" live inside .yn-filter-body. */
.yn-filter-card--spec {
	overflow:hidden;
	padding:0 !important;
	border-color:rgb(var(--color-primary) / .075) !important;
	box-shadow:0 7px 22px -20px rgb(var(--color-primary) / .4) !important;
}
.yn-filter-card--spec > .yn-filter-heading {
	min-height:46px;
	padding:0 14px;
	transition:background-color .18s ease,color .18s ease;
}
.yn-filter-card--spec > .yn-filter-heading:hover { background:rgb(var(--color-primary) / .025); }
.yn-filter-card--spec > .yn-filter-heading svg { transition:transform .2s ease; }
.yn-filter-card--spec > .yn-filter-heading[aria-expanded="true"] svg { transform:rotate(180deg); }
.yn-filter-card--spec .yn-filter-body {
	border-top:1px solid rgb(var(--color-primary) / .055);
	padding:8px 10px 12px;
	background:linear-gradient(180deg,rgb(var(--color-background) / .45),#fff 24px);
}
.yn-filter-card--spec .yn-filter-options { margin-top:0; padding-top:0; }
.yn-filter-body .yn-show-more {
	min-height:30px;
	margin:5px 2px 0;
	padding:0 5px;
	border-radius:8px;
}
.yn-filter-body .yn-show-more:hover { background:rgb(var(--color-accent) / .07); }

/* The real checkbox remains a full 18x18 interactive target over the custom
 * control. The visual sibling therefore updates reliably on mouse/touch/keyboard. */
.yn-check-row { position:relative; min-width:0; }
.yn-check-row input[type="checkbox"] {
	position:absolute !important;
	left:4px !important;
	top:50% !important;
	z-index:3 !important;
	width:20px !important;
	height:20px !important;
	margin:0 !important;
	transform:translateY(-50%) !important;
	opacity:0 !important;
	cursor:pointer !important;
	pointer-events:auto !important;
}
.yn-check-row .yn-check {
	flex:0 0 18px;
	width:18px;
	height:18px;
	border:1.5px solid rgb(var(--color-primary) / .18);
	border-radius:5px;
	background:#fff;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
	transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .12s ease;
}
.yn-check-row input[type="checkbox"]:checked + .yn-check {
	border-color:rgb(var(--color-accent));
	background:rgb(var(--color-accent));
	box-shadow:0 4px 10px -7px rgb(var(--color-accent) / .8);
}
.yn-check-row input[type="checkbox"]:checked + .yn-check::after {
	content:"";
	display:block;
	width:9px;
	height:5px;
	margin:4px 0 0 4px;
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(-45deg);
}
.yn-check-row input[type="checkbox"]:focus-visible + .yn-check {
	box-shadow:0 0 0 3px rgb(var(--color-accent) / .15);
}

/* Main homepage Hero constructor. Foreground art is a real transparent image
 * layer by default; it is never baked into the card background. */
.yn-home-hero {
	position:relative;
	min-height:var(--yn-home-hero-height,390px);
	overflow:hidden;
	border-radius:24px;
	background:#08172f;
	box-shadow:0 24px 54px -42px rgba(5,18,42,.65);
}
.yn-home-hero__slide {
	position:absolute;
	inset:0;
	display:grid;
	grid-template-columns:minmax(0,.94fr) minmax(320px,1.06fr);
	align-items:center;
	gap:18px;
	overflow:hidden;
	color:var(--hero-text,#fff);
	background:transparent;
}
.yn-home-hero__base,
.yn-home-hero__background,
.yn-home-hero__overlay,
.yn-home-hero__glow { position:absolute; inset:0; pointer-events:none; }
.yn-home-hero__base { z-index:0; background:linear-gradient(var(--hero-angle,108deg),var(--hero-from,#07162f),var(--hero-to,#1d4ed8)); }
.yn-home-hero__slide.is-bg-solid .yn-home-hero__base { background:var(--hero-from,#07162f); }
.yn-home-hero__slide.is-bg-image .yn-home-hero__base { background:var(--hero-from,#07162f); }
.yn-home-hero__background { z-index:1; background-position:center; background-size:cover; background-repeat:no-repeat; }
.yn-home-hero__overlay { z-index:2; background:rgba(3,11,28,var(--hero-overlay,.38)); }
.yn-home-hero__glow { z-index:2; inset:-35%; background:radial-gradient(circle at 73% 46%,rgba(255,255,255,.16),transparent 31%); }
.yn-home-hero__copy {
	position:relative;
	z-index:5;
	grid-column:1;
	max-width:650px;
	padding:42px 8px 56px 48px;
	align-self:center;
}
.yn-home-hero__slide.is-content-top .yn-home-hero__copy { align-self:start; padding-top:40px; }
.yn-home-hero__slide.is-content-bottom .yn-home-hero__copy { align-self:end; padding-bottom:50px; }
.yn-home-hero__slide.is-image-left .yn-home-hero__copy { grid-column:2; padding-right:48px; padding-left:18px; }
.yn-home-hero__badge {
	display:inline-flex;
	min-height:28px;
	align-items:center;
	border:1px solid rgba(255,255,255,.18);
	border-radius:999px;
	background:rgba(255,255,255,.11);
	padding:0 11px;
	color:inherit;
	font-size:11px;
	font-weight:850;
	letter-spacing:.05em;
	text-transform:uppercase;
	backdrop-filter:blur(10px);
}
.yn-home-hero__copy h2 { max-width:620px; margin:14px 0 0; color:inherit; font-size:clamp(30px,3.6vw,48px); font-weight:900; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.yn-home-hero__copy p { max-width:520px; margin:14px 0 0; color:color-mix(in srgb,var(--hero-text,#fff) 74%,transparent); font-size:14px; line-height:1.6; }
.yn-home-hero__meta { display:flex; align-items:center; gap:16px; margin-top:23px; flex-wrap:wrap; }
.yn-home-hero__button { display:inline-flex; min-height:44px; align-items:center; gap:8px; margin:0; border-radius:12px; background:var(--hero-accent,#0867f2); padding:0 17px; color:#fff; font-size:13px; font-weight:850; box-shadow:0 12px 24px -16px rgba(0,0,0,.55); transition:transform .18s ease,filter .18s ease; }
.yn-home-hero__button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.yn-home-hero__price { display:flex; flex-direction:column; gap:2px; line-height:1; }
.yn-home-hero__price del { color:color-mix(in srgb,var(--hero-text,#fff) 44%,transparent); font-size:11px; font-weight:700; }
.yn-home-hero__price strong { color:inherit; font-size:clamp(18px,2vw,25px); font-weight:900; }
.yn-home-hero__secondary { display:inline-flex; align-items:center; gap:7px; margin-top:14px; color:color-mix(in srgb,var(--hero-text,#fff) 82%,transparent); font-size:12px; font-weight:750; transition:color .18s ease; }
.yn-home-hero__secondary:hover { color:var(--hero-text,#fff); }
.yn-home-hero__visual {
	position:relative;
	z-index:4;
	grid-column:2;
	display:flex;
	min-width:0;
	height:100%;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	padding:28px 34px 28px 18px;
}
.yn-home-hero__slide.is-image-left .yn-home-hero__visual { grid-column:1; grid-row:1; padding-right:18px; padding-left:34px; }
.yn-home-hero__visual img {
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	object-fit:var(--hero-image-fit,contain);
	object-position:var(--hero-image-x,50%) var(--hero-image-y,50%);
	transform:scale(var(--hero-image-scale,.92));
	transform-origin:var(--hero-image-x,50%) var(--hero-image-y,50%);
	filter:drop-shadow(0 22px 28px rgba(0,0,0,.28));
}
.yn-home-hero__slide.is-image-background { grid-template-columns:1fr; }
.yn-home-hero__slide.is-image-background .yn-home-hero__copy { grid-column:1; grid-row:1; max-width:min(66%,720px); }
.yn-home-hero__slide.is-image-background .yn-home-hero__visual {
	position:absolute;
	inset:0;
	z-index:3;
	grid-column:auto;
	height:100%;
	padding:22px 3% 22px 42%;
	opacity:.72;
}
.yn-home-hero__slide.is-image-background .yn-home-hero__visual::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,var(--hero-from,#07162f) 5%,color-mix(in srgb,var(--hero-from,#07162f) 70%,transparent) 48%,transparent 82%);
	pointer-events:none;
}
.yn-home-hero__slide.is-image-background .yn-home-hero__visual img { position:relative; z-index:0; }
.yn-home-hero__controls { position:absolute; left:44px; bottom:18px; z-index:20; display:flex; align-items:center; gap:10px; }
.yn-home-hero__arrow { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.17); border-radius:10px; background:rgba(3,10,25,.22); color:#fff; backdrop-filter:blur(10px); }
.yn-home-hero__dots { display:flex; min-height:34px; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(3,10,25,.16); padding:0 10px; backdrop-filter:blur(8px); }
.yn-home-hero__dots button { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.38); transition:width .2s ease,background .2s ease; }
.yn-home-hero__dots button.is-active { width:23px; background:#fff; }
@media (max-width:1023px) {
	.yn-home-hero__slide { grid-template-columns:minmax(0,1fr) minmax(250px,.86fr); }
	.yn-home-hero__copy { padding-left:34px; }
	.yn-home-hero__slide.is-image-left .yn-home-hero__copy { padding-right:34px; }
	.yn-home-hero__controls { left:32px; }
}
@media (max-width:767px) {
	.yn-home-hero { min-height:max(390px,var(--yn-home-hero-height,390px)); border-radius:20px; }
	.yn-home-hero__slide,
	.yn-home-hero__slide.is-image-left,
	.yn-home-hero__slide.is-image-background { grid-template-columns:1fr; grid-template-rows:1fr; }
	.yn-home-hero__copy,
	.yn-home-hero__slide.is-image-left .yn-home-hero__copy,
	.yn-home-hero__slide.is-image-background .yn-home-hero__copy { grid-column:1; grid-row:1; order:initial; align-self:center; max-width:90%; padding:32px 22px 70px; }
	.yn-home-hero__slide.is-content-top .yn-home-hero__copy { align-self:start; padding-top:30px; }
	.yn-home-hero__slide.is-content-bottom .yn-home-hero__copy { align-self:end; padding-bottom:66px; }
	.yn-home-hero__visual,
	.yn-home-hero__slide.is-image-left .yn-home-hero__visual,
	.yn-home-hero__slide.is-image-background .yn-home-hero__visual { position:absolute; inset:0; z-index:3; grid-column:auto; height:100%; padding:28px 0 18px 38%; opacity:.48; }
	.yn-home-hero__visual::after,
	.yn-home-hero__slide.is-image-left .yn-home-hero__visual::after,
	.yn-home-hero__slide.is-image-background .yn-home-hero__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--hero-from,#07162f) 2%,color-mix(in srgb,var(--hero-from,#07162f) 84%,transparent) 52%,transparent 100%); }
	.yn-home-hero__visual img { max-height:88%; object-fit:contain; }
	.yn-home-hero__copy h2 { font-size:clamp(28px,8.8vw,40px); }
	.yn-home-hero__copy p { max-width:86%; font-size:13px; }
	.yn-home-hero__controls { left:20px; bottom:16px; }
	.yn-home-hero__arrow { display:none; }
}

/* Built-in secondary promo art is transparent and must remain object artwork,
 * not look like a rectangular background image. */
.yn-promo-card__visual { background:transparent; }
.yn-promo-card__visual img { object-fit:contain !important; background:transparent !important; }

/* Extra per-slide composition controls for the main Hero. */
@media (min-width:768px) {
	.yn-home-hero__slide { grid-template-columns:minmax(0,var(--hero-content-width,56%)) minmax(0,1fr); }
	.yn-home-hero__slide.is-image-left { grid-template-columns:minmax(0,calc(100% - var(--hero-content-width,56%))) minmax(0,var(--hero-content-width,56%)); }
}
.yn-home-hero__slide.is-align-center .yn-home-hero__copy { text-align:center; }
.yn-home-hero__slide.is-align-center .yn-home-hero__badge,
.yn-home-hero__slide.is-align-center .yn-home-hero__secondary { margin-left:auto; margin-right:auto; }
.yn-home-hero__slide.is-align-center .yn-home-hero__meta { justify-content:center; }
.yn-home-hero__slide.is-align-right .yn-home-hero__copy { text-align:right; }
.yn-home-hero__slide.is-align-right .yn-home-hero__badge,
.yn-home-hero__slide.is-align-right .yn-home-hero__secondary { margin-left:auto; }
.yn-home-hero__slide.is-align-right .yn-home-hero__meta { justify-content:flex-end; }
.yn-home-hero__slide.is-buttons-column .yn-home-hero__meta { flex-direction:column; align-items:flex-start; }
.yn-home-hero__slide.is-buttons-column.is-align-center .yn-home-hero__meta { align-items:center; }
.yn-home-hero__slide.is-buttons-column.is-align-right .yn-home-hero__meta { align-items:flex-end; }

/* ============================================================
 * OKNOUT 2.3.12 storefront polish layer.
 * Scoped component refinements only; Tailwind remains the base utility layer.
 * ============================================================ */

/* Header: slightly stronger hierarchy without making the topbar bulky. */
.yn-main-header__inner { min-height: 76px; gap: 15px; }
.yn-main-header__brand .ynout-brand-logo { width: 148px; height: auto; }
.yn-main-header__search-shell > input[type="search"] {
	border-color: #d7e1ef;
	background: #fff;
	box-shadow: 0 7px 22px -20px rgba(15,35,70,.45), inset 0 1px 0 rgba(255,255,255,.95);
	font-weight: 600;
}
.yn-main-header__search-shell > input[type="search"]::placeholder { color: #8b98ab; opacity: 1; }
.yn-main-header__action { min-width: 70px; }
.yn-main-header__action-icon { width: 32px; height: 32px; }
.yn-main-header__action-icon > svg { width: 26px; height: 26px; }
.yn-main-header__action-label { color: rgb(var(--color-primary) / .67); font-size: 11.5px; font-weight: 700; }
@media (max-width: 1279px) {
	.yn-main-header__brand .ynout-brand-logo { width: 136px; }
	.yn-main-header__inner { min-height: 70px; gap: 11px; }
}
@media (max-width: 767px) {
	.yn-main-header__brand .ynout-brand-logo { width: 112px; }
	.yn-main-header__inner { min-height: 64px; }
}

/* Typography: keep display headlines bold, but reduce visual shouting in cards. */
.ynout-product-card__title h3,
.yn-filter-heading,
.yn-info-points h2,
.yn-info-help h2,
.yn-contact-card h2,
.yn-promo-section__head h2,
.ynout-news-card h3 { font-weight: 800; }
.ynout-product-card__spec,
.yn-page-lead,
.yn-info-points p,
.yn-info-help p,
.yn-contact-card p,
.ynout-news-card p { color: #5f6e84; }
.ynout-product-card__spec { opacity: 1; }

/* Homepage categories: automatic grid + one visual language for all art. */
.yn-home-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
	gap: 12px;
}
.yn-home-category-card {
	min-height: 172px;
	border: 1px solid #e4eaf3;
	border-radius: 18px;
	background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
	padding: 12px 10px 14px;
	box-shadow: 0 14px 34px -31px rgba(15,35,70,.5);
}
.yn-home-category-card__media { height: 112px; flex-basis: 112px; }
.yn-home-category-card__circle {
	width: 82px;
	height: 82px;
	background: radial-gradient(circle at 38% 32%, #fff 0%, #f0f5ff 54%, #e3edff 100%);
	box-shadow: inset 0 0 0 1px rgba(8,103,242,.055);
}
.yn-home-category-card__image {
	width: 116px;
	height: 102px;
	max-width: 94%;
	object-fit: contain;
	filter: drop-shadow(0 12px 15px rgba(23,45,79,.16));
	transform: scale(1);
}
.yn-home-category-card:hover .yn-home-category-card__image { transform: translateY(-2px) scale(1.045); }
.yn-home-category-card__title { font-weight: 750; }
.yn-home-category-card__count { color: #718096; }
@media (max-width: 767px) {
	.yn-home-categories-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
	.yn-home-category-card { min-height: 160px; }
	.yn-home-category-card__media { height: 102px; flex-basis: 102px; }
	.yn-home-category-card__image { width: 104px; height: 92px; }
}

/* Primary hero remains premium; secondary promos become the more commercial layer. */
.yn-home-hero { box-shadow: 0 30px 62px -46px rgba(5,18,42,.8); }
.yn-home-hero__copy h2 { font-weight: 850; }
.yn-promo-section { padding-top: 2px; }
.yn-promo-section__head h2 { font-weight: 800; }
.yn-promo-card { border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 38px -34px rgba(5,18,42,.65); }
.yn-promo-card__title { font-weight: 800; }
.yn-promo-card__subtitle { color: color-mix(in srgb,var(--yn-promo-text) 78%,transparent); }

/* Catalog hero: single clear object, clipped inside the content container. */
.yn-catalog-hero {
	min-height: 216px;
	background:
		radial-gradient(circle at 88% 42%, rgba(83,142,255,.20), transparent 22%),
		linear-gradient(100deg, #fff 0%, #f8fbff 58%, #e8f1ff 100%);
}
.yn-catalog-hero > .container { position: relative; overflow: hidden; }
.yn-hero-content { min-height: 216px; }
.yn-hero-copy { max-width: min(58%, 690px); }
.yn-hero-art-shell {
	top: 0;
	right: 18px;
	bottom: 0;
	width: min(36%, 430px);
	height: 100%;
	max-width: 430px;
	transform: none;
	overflow: hidden;
}
.yn-hero-art-halo { width: min(78%, 300px); opacity: .9; }
.yn-hero-art {
	width: 90%;
	height: 86%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 19px 24px rgba(29,57,105,.17));
}
.yn-hero-art-shell.is-composite .yn-hero-art--secondary,
.yn-hero-art-shell.is-composite .yn-hero-art--tertiary { display: none; }
.yn-hero-art-shell.is-composite .yn-hero-art--main { position: relative; inset: auto; width: 90%; height: 86%; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: none; }
@media (max-width: 1023px) {
	.yn-hero-copy { max-width: 64%; }
	.yn-hero-art-shell { right: 10px; width: 34%; }
}
@media (max-width: 767px) {
	.yn-catalog-hero,.yn-hero-content { min-height: 186px; }
	.yn-hero-copy { max-width: 72%; }
	.yn-hero-art-shell { right: 4px; width: 30%; opacity: .72; }
}
@media (max-width: 479px) {
	.yn-hero-copy { max-width: 78%; }
	.yn-hero-art-shell { right: 0; width: 25%; opacity: .46; }
}

/* Catalog sidebar: primary filters stay visible, long-tail filters feel lighter. */
.yn-sidebar { width: 264px; flex-basis: 264px; }
.yn-filter-form { gap: 10px; }
.yn-filter-card {
	border-color: #e5ebf3;
	border-radius: 14px;
	padding: 13px 14px;
	box-shadow: 0 10px 26px -26px rgba(15,35,70,.55);
}
.yn-filter-card:hover { border-color: #d8e2ef; box-shadow: 0 12px 28px -28px rgba(15,35,70,.5); }
.yn-filter-heading { min-height: 26px; margin: 0; font-size: 13px; letter-spacing: -.01em; }
.yn-filter-body { padding-top: 9px; }
.yn-filter-section-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 5px 3px 0;
	padding: 8px 4px 2px;
	color: #7b889b;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.yn-filter-chevron { display: inline-flex; color: #93a0b1; transition: transform .18s ease, color .18s ease; }
.yn-filter-chevron.is-open { transform: rotate(180deg); color: rgb(var(--color-accent)); }
.yn-filter-options { gap: 3px; }
.yn-check-row {
	min-height: 34px;
	border-radius: 9px;
	padding: 4px 5px;
	color: #58677d;
	font-size: 13px;
}
.yn-check-row:hover { background: #f5f8fc; color: #243650; }
.yn-check-row input[type="checkbox"] {
	position: absolute;
	left: 5px;
	top: 50%;
	z-index: 2;
	width: 22px;
	height: 22px;
	margin: 0;
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: auto;
	cursor: pointer;
}
.yn-check {
	width: 18px;
	height: 18px;
	flex-basis: 18px;
	border: 1.5px solid #b9c5d6;
	border-radius: 5px;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.yn-check-row input[type="checkbox"]:checked + .yn-check { border-color: rgb(var(--color-accent)); background: rgb(var(--color-accent)); box-shadow: 0 4px 12px -8px rgb(var(--color-accent)); }
.yn-check-row input[type="checkbox"]:checked + .yn-check::after { width: 9px; height: 5px; margin: 3px 0 0 3px; }
.yn-check-row input[type="checkbox"]:focus-visible + .yn-check { outline: 0; box-shadow: 0 0 0 3px rgb(var(--color-accent) / .16); }
.yn-category-link { min-height: 34px; }
.yn-search-brand { border-color: #dfe7f1; background: #fbfcfe; }
.yn-show-more { margin-left: 1px; }
.yn-filter-card--price { background: linear-gradient(180deg,#fff,#fbfdff); }
.yn-price-inputs input { border-color: #dfe6f0; background: #fff; }
.yn-price-range { height: 38px; margin-top: 10px; }
.yn-price-range::before,.yn-price-range::after { top: 16px; height: 4px; }
.yn-price-range input { height: 38px; }
.yn-price-range input::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -7.5px; border-width: 4px; }
.yn-price-range input::-moz-range-thumb { width: 11px; height: 11px; border-width: 4px; }
.yn-filter-submit { box-shadow: 0 10px 22px -16px rgb(var(--color-accent) / .7); }

/* List view: compact product row, not a stretched grid card. */
.yn-products-grid.is-list .ynout-product-card {
	grid-template-columns: 164px minmax(0, 1fr);
	column-gap: 16px;
	min-height: 146px;
	padding: 9px;
	border-radius: 17px;
}
.yn-products-grid.is-list .ynout-product-card__media { width: 164px; height: 126px; min-height: 126px; border-radius: 13px; }
.yn-products-grid.is-list .ynout-product-card__body {
	grid-template-columns: minmax(0, 1fr) 218px;
	grid-template-rows: auto auto 1fr;
	column-gap: 20px;
	padding: 7px 7px 7px 0;
}
.yn-products-grid.is-list .ynout-product-card__title h3 { font-size: 15px; font-weight: 800; }
.yn-products-grid.is-list .ynout-product-card__spec { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yn-products-grid.is-list .ynout-product-card__price { align-self: center; }
@media (max-width: 767px) {
	.yn-products-grid.is-list .ynout-product-card { display: flex; }
	.yn-products-grid.is-list .ynout-product-card__media { width: 100%; height: auto; aspect-ratio: 4/3; }
}

/* Information pages: add useful depth instead of a large empty area before footer. */
.yn-info-followup { margin-top: 24px; }
.yn-info-followup__head { max-width: 760px; margin-bottom: 15px; }
.yn-info-followup__head h2 { margin: 0; color: var(--yn-navy); font-size: clamp(24px, 3vw, 32px); font-weight: 850; line-height: 1.15; letter-spacing: -.03em; }
.yn-info-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.yn-info-process article {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0,1fr);
	gap: 12px;
	min-height: 150px;
	border: 1px solid #e3eaf3;
	border-radius: 16px;
	background: #fff;
	padding: 18px;
	box-shadow: 0 13px 30px -30px rgba(15,35,70,.55);
}
.yn-info-process__index { position: absolute; right: 14px; top: 12px; color: #d9e3f1; font-size: 26px; font-weight: 900; line-height: 1; }
.yn-info-process__icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 11px; background: #eef5ff; color: var(--yn-blue); }
.yn-info-process article h3 { margin: 2px 24px 7px 0; color: var(--yn-navy); font-size: 15px; font-weight: 800; line-height: 1.35; }
.yn-info-process article p { margin: 0; color: #637188; font-size: 13px; line-height: 1.6; }
.yn-info-followup__bottom { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 14px; margin-top: 14px; }
.yn-info-faq-card,.yn-info-cta-card { border: 1px solid #e3eaf3; border-radius: 16px; background: #fff; padding: 21px; box-shadow: 0 13px 30px -30px rgba(15,35,70,.55); }
.yn-info-faq-card > h2,.yn-info-cta-card > h2 { margin: 0 0 12px; color: var(--yn-navy); font-size: 18px; font-weight: 800; }
.yn-info-faq-card details { border-top: 1px solid #e9eef5; }
.yn-info-faq-card details:first-of-type { border-top: 0; }
.yn-info-faq-card summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; color: #263853; font-size: 13px; font-weight: 750; }
.yn-info-faq-card summary::-webkit-details-marker { display: none; }
.yn-info-faq-card details[open] summary svg { transform: rotate(180deg); }
.yn-info-faq-card summary svg { color: #8a98aa; transition: transform .18s ease; }
.yn-info-faq-card details p { margin: -2px 0 14px; padding-right: 28px; color: #637188; font-size: 13px; line-height: 1.65; }
.yn-info-cta-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg,#f4f8ff,#fff); }
.yn-info-cta-card > span { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 12px; background: #eaf3ff; color: var(--yn-blue); }
.yn-info-cta-card p { margin: 0 0 16px; color: #637188; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) { .yn-info-followup__bottom { grid-template-columns: 1fr; } }

/* News cards never show a dead empty rectangle. */
.ynout-news-card__media {
	position: relative;
	display: flex;
	aspect-ratio: 16/9;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #f7faff;
	padding: 16px;
}
.ynout-news-card__date {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e1e9f4;
	border-radius: 10px;
	background: rgba(255,255,255,.95);
	padding: 6px 9px;
	color: #263853;
	font-size: 11px;
	font-weight: 800;
	box-shadow: 0 8px 18px -16px rgba(15,35,70,.5);
}
.ynout-news-card__image { max-width: 92%; max-height: 92%; object-fit: contain; transition: transform .4s ease; }
.ynout-news-card:hover .ynout-news-card__image { transform: scale(1.025); }
.ynout-news-card__media.is-fallback {
	justify-content: flex-start;
	background:
		radial-gradient(circle at 78% 42%, rgba(66,132,255,.30), transparent 28%),
		linear-gradient(120deg,#07162f 0%,#123f96 100%);
	padding: 64px 42% 20px 20px;
}
.ynout-news-card__fallback-copy { position: relative; z-index: 2; display: grid; gap: 6px; color: #fff; }
.ynout-news-card__fallback-copy small { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ynout-news-card__fallback-copy strong { font-size: 17px; font-weight: 800; line-height: 1.18; }
.ynout-news-card__fallback-art { position: absolute; right: -2%; bottom: -8%; width: 48%; height: 92%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); opacity: .92; }

/* News detail: slightly smaller media, more editorial proportions. */
.yn-news-article { max-width: 1040px; }
.yn-news-header { max-width: 860px; }
.yn-news-header h1 { font-size: clamp(34px,4.5vw,50px); font-weight: 850; }
.yn-news-cover { height: clamp(300px,38vw,440px); }
.yn-news-cover img { max-width: 90%; max-height: 90%; }
.yn-news-cover__fallback { position: relative; display: flex; width: 100%; height: 100%; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 44%,rgba(75,139,255,.32),transparent 28%), linear-gradient(115deg,#07162f,#174da8); }
.yn-news-cover__fallback > div { position: relative; z-index: 2; display: grid; gap: 10px; max-width: 58%; padding: 42px; color: #fff; }
.yn-news-cover__fallback span { color: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.yn-news-cover__fallback strong { font-size: clamp(28px,4vw,44px); font-weight: 850; line-height: 1.08; letter-spacing: -.035em; }
.yn-news-cover__fallback img { position: absolute; right: 2%; bottom: -4%; width: 43%; height: 94%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0,0,0,.28)); }
.yn-news-content { padding: 28px; }
.ynout-prose { color: #56667d; }
.ynout-prose h2 { font-weight: 850; }
.ynout-prose h3 { font-weight: 800; }
@media (max-width: 767px) {
	.yn-news-cover { height: 260px; }
	.yn-news-cover__fallback > div { max-width: 72%; padding: 24px; }
	.yn-news-cover__fallback img { right: -8%; width: 48%; opacity: .65; }
}

/* PDP: remove forced empty tab height and keep top blocks visually connected. */
.product-page .ynout-pdp-main { gap: 20px; }
.product-page .ynout-pdp-gallery { height: clamp(370px,31vw,440px); }
.product-page .ynout-pdp-options { padding-top: 18px; }
.product-page .ynout-pdp-tabs { margin-top: 22px; }
.product-page .ynout-pdp-tab-panel { min-height: 0; padding-top: 20px; padding-bottom: 20px; }
.product-page #description.ynout-pdp-tab-panel { grid-template-columns: minmax(0,1fr); }
.product-page #description .ynout-prose { max-width: 860px; }
.product-page #full-specs { margin-top: 18px; margin-bottom: 18px; }
.product-page .ynout-pdp-buybox > div { box-shadow: 0 16px 38px -28px rgba(15,35,70,.45); }

/* Compare: sticky product header + sticky label column; table remains scrollable. */
.ynout-compare-shell { isolation: isolate; }
.ynout-compare-head th { box-shadow: 0 1px 0 #e5e7eb; }
.ynout-compare-product { box-shadow: inset 1px 0 0 #f1f3f6; }
.ynout-compare-corner { box-shadow: 2px 0 10px -8px rgba(15,35,70,.3); }
.ynout-compare-table tbody td:first-child { box-shadow: 2px 0 10px -9px rgba(15,35,70,.28); }

/* Page system spacing: inner pages should feel intentionally complete, not stretched. */
.yn-page { min-height: 0; padding-bottom: 46px; }
.yn-info-page .container > .yn-info-layout:last-child { margin-bottom: 0; }

/* 2.3.12 QA correction: a remembered list view must also stay inside a narrow
 * mobile viewport. The desktop row explicitly collapses back to the standard
 * vertical product card instead of inheriting row geometry from list mode. */
@media (max-width: 767px) {
	.yn-products-grid.is-list .ynout-product-card {
		width: 100%;
		min-width: 0;
		flex-direction: column;
	}
	.yn-products-grid.is-list .ynout-product-card__body {
		width: 100%;
		min-width: 0;
		flex-direction: column;
	}
	.yn-products-grid.is-list .ynout-product-card__price { width: auto; }
	.yn-products-grid.is-list .ynout-product-card__actions { width: 100%; }
}

/* ============================================================
 * OKNOUT 2.3.16 final visual polish.
 * Small, component-scoped refinements after the 2.3.12 system pass.
 * ============================================================ */

/* Header: tighter optical alignment and steadier badges. */
.yn-main-header__inner { min-height: 74px; }
.yn-main-header__brand { display:flex; align-items:center; min-width:0; }
.yn-main-header__brand .ynout-brand-logo { width: 152px; max-height: 42px; object-fit: contain; object-position: left center; }
.yn-main-header__search-shell { min-width:0; }
.yn-main-header__search-shell > input[type="search"] { min-height:46px; border-radius:13px; }
.yn-main-header__action { min-width:74px; gap:2px; }
.yn-main-header__action-icon { width:34px; height:34px; }
.yn-main-header__action-icon > svg { width:25px; height:25px; }
.ynout-header-count { top:-3px; right:-7px; min-width:20px; height:20px; padding:0 5px; font-size:10px; border-width:2px; }

/* Category cards: let the product art be the hero, not the decorative circle. */
.yn-home-category-card { min-height:176px; padding:11px 10px 14px; }
.yn-home-category-card__media { height:116px; flex-basis:116px; }
.yn-home-category-card__circle { width:78px; height:78px; opacity:.82; }
.yn-home-category-card__image { width:122px; height:108px; max-width:96%; filter:drop-shadow(0 12px 16px rgba(23,45,79,.14)); }
.yn-home-category-card__title { margin-top:1px; line-height:1.25; }

/* Catalog: calmer hero and filter rail. */
.yn-catalog-hero { min-height:208px; }
.yn-catalog-hero > .container { overflow:hidden; }
.yn-catalog-hero .yn-hero-art-shell { right:10px; width:min(34%,390px); }
.yn-catalog-hero .yn-hero-art { width:88%; height:82%; }
.yn-sidebar { width:270px; flex-basis:270px; }
.yn-filter-card { padding:12px 13px; border-radius:13px; }
.yn-filter-heading { font-size:12.5px; font-weight:800; }
.yn-filter-card--spec > .yn-filter-heading[aria-expanded="false"] { color:#31425d; }
.yn-filter-card--spec > .yn-filter-heading[aria-expanded="true"] { color:rgb(var(--color-accent)); }
.yn-filter-card--spec > .yn-filter-heading[aria-expanded="false"] + .yn-filter-body .yn-show-more,
.yn-filter-card--spec > .yn-filter-heading[aria-expanded="false"] ~ .yn-show-more { display:none !important; }
.yn-check-row > span:last-child { margin-left:auto; color:#8a98aa; font-size:11px; font-variant-numeric:tabular-nums; }
.yn-price-range { margin-bottom:2px; }

/* Product cards: consistent media footprint and less internal visual noise. */
.ynout-product-card { overflow:hidden; }
.ynout-product-card__media.ynout-card-media { background:#f7f9fc; }
.ynout-product-card__media.ynout-card-media > a { display:block; width:100%; height:100%; }
.ynout-product-card__media.ynout-card-media .ynout-card-image { transform:scale(1.018); transition:transform .28s ease; }
.ynout-product-card:hover .ynout-card-image { transform:scale(1.045); }
.ynout-product-card__body { min-width:0; }
.ynout-product-card__title h3 { letter-spacing:-.015em; }
.ynout-product-card__price { font-variant-numeric:tabular-nums; }

/* List mode: explicit commerce row with a fixed action rail. */
.yn-products-grid.is-list .ynout-product-card { grid-template-columns:176px minmax(0,1fr); min-height:154px; padding:10px; }
.yn-products-grid.is-list .ynout-product-card__media { width:176px; height:134px; min-height:134px; }
.yn-products-grid.is-list .ynout-product-card__body { grid-template-columns:minmax(0,1fr) 232px; gap:8px 22px; padding:7px 8px 7px 2px; }
.yn-products-grid.is-list .ynout-product-card__actions { align-self:end; justify-self:end; }

/* Info pages: keep the final section visually connected to the footer. */
.yn-info-page .yn-info-followup { margin-top:20px; }
.yn-info-page .yn-info-process article { min-height:142px; }
.yn-info-page .yn-info-followup__bottom { margin-top:12px; }

/* News: stronger card rhythm and compact fallback art. */
.ynout-news-card { overflow:hidden; }
.ynout-news-card__media { min-height:210px; }
.ynout-news-card__media.is-fallback { padding-left:22px; }
.ynout-news-card__fallback-copy strong { max-width:210px; }
.yn-news-content { line-height:1.75; }

/* PDP: keep the purchase block visually tied to the gallery/specs. */
.product-page .ynout-pdp-main { align-items:start; gap:18px; }
.product-page .ynout-pdp-gallery { border-radius:0; }
.product-page .ynout-pdp-buybox > div { border-radius:16px; }
.product-page .ynout-pdp-tabs { margin-top:18px; }

/* Compare: readable product header and less empty-looking rows. */
.ynout-compare-table th,
.ynout-compare-table td { padding-top:13px; padding-bottom:13px; }
.ynout-compare-table tbody tr:nth-child(even) td { background:#fbfcfe; }
.ynout-compare-table tbody td:first-child { color:#53647a; font-weight:700; }

@media (max-width:1023px) {
  .yn-main-header__brand .ynout-brand-logo { width:138px; }
  .yn-sidebar { width:244px; flex-basis:244px; }
  .yn-products-grid.is-list .ynout-product-card { grid-template-columns:150px minmax(0,1fr); }
  .yn-products-grid.is-list .ynout-product-card__media { width:150px; height:120px; min-height:120px; }
  .yn-products-grid.is-list .ynout-product-card__body { grid-template-columns:minmax(0,1fr) 190px; }
}
@media (max-width:767px) {
  .yn-main-header__brand .ynout-brand-logo { width:116px; }
  .yn-home-category-card { min-height:160px; }
  .yn-home-category-card__media { height:102px; flex-basis:102px; }
  .yn-home-category-card__image { width:108px; height:94px; }
  .yn-catalog-hero .yn-hero-art-shell { width:28%; opacity:.62; }
  .yn-products-grid.is-list .ynout-product-card { display:flex; width:100%; min-width:0; flex-direction:column; }
  .yn-products-grid.is-list .ynout-product-card__media { width:100%; height:auto; min-height:0; aspect-ratio:4/3; }
  .yn-products-grid.is-list .ynout-product-card__body { display:flex; width:100%; min-width:0; flex-direction:column; }
}

/* ============================================================
 * OKNOUT 2.3.18 — Homepage visual redesign.
 * One scoped layer for the storefront home only. No global element resets.
 * ============================================================ */
.yn-home-page {
	position: relative;
	overflow: clip;
	padding-bottom: 34px;
	background:
		radial-gradient(circle at 8% 17%, rgba(8,103,242,.045), transparent 22rem),
		radial-gradient(circle at 94% 54%, rgba(69,129,255,.035), transparent 26rem),
		#f8fafc;
}
.yn-home-page > .home-hero-section { padding-top: 22px; }
.yn-home-section { margin-top: 42px; }
.yn-home-section--categories { margin-top: 34px; }
.yn-home-section--benefits { margin-top: 24px; }
.yn-home-section--brands { margin-top: 38px; padding-bottom: 6px; }

.yn-home-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 20px;
}
.yn-home-section-head__copy { min-width: 0; max-width: 720px; }
.yn-home-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 7px;
	color: #0867f2;
	font-size: 10px;
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.yn-home-eyebrow::before {
	content: "";
	width: 17px;
	height: 2px;
	border-radius: 99px;
	background: linear-gradient(90deg,#0867f2,#63a4ff);
}
.yn-home-section-head h2 {
	margin: 0;
	color: #08172f;
	font-size: clamp(24px,2.6vw,34px);
	font-weight: 850;
	line-height: 1.08;
	letter-spacing: -.038em;
	text-wrap: balance;
}
.yn-home-section-head p {
	max-width: 650px;
	margin: 8px 0 0;
	color: #68788f;
	font-size: 13px;
	line-height: 1.6;
}
.yn-home-section-link {
	display: inline-flex;
	min-height: 38px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #dce6f3;
	border-radius: 11px;
	background: rgba(255,255,255,.82);
	padding: 0 12px;
	color: #0867f2;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 10px 24px -22px rgba(15,35,70,.55);
	transition: border-color .18s ease,background .18s ease,transform .18s ease;
}
.yn-home-section-link:hover { border-color: #bfd3f2; background: #fff; transform: translateY(-1px); }
.yn-home-section-head--compact { margin-bottom: 14px; }

/* Main hero — cleaner premium shell, stronger content hierarchy. */
.yn-home-page .yn-home-hero {
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 26px;
	box-shadow: 0 30px 64px -42px rgba(4,16,39,.72), inset 0 1px 0 rgba(255,255,255,.08);
}
.yn-home-page .yn-home-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(90deg,rgba(2,11,29,.18),transparent 48%);
}
.yn-home-page .yn-home-hero__copy { z-index: 6; padding-left: 52px; }
.yn-home-page .yn-home-hero__badge {
	min-height: 26px;
	border-color: rgba(255,255,255,.16);
	background: rgba(255,255,255,.09);
	font-size: 10px;
}
.yn-home-page .yn-home-hero__copy h2 { max-width: 590px; font-size: clamp(32px,3.8vw,50px); font-weight: 850; line-height: 1.01; }
.yn-home-page .yn-home-hero__copy p { max-width: 500px; color: color-mix(in srgb,var(--hero-text,#fff) 78%,transparent); font-size: 13px; }
.yn-home-page .yn-home-hero__button { min-height: 43px; border-radius: 11px; padding: 0 16px; box-shadow: 0 13px 24px -15px rgba(0,0,0,.5); }
.yn-home-page .yn-home-hero__visual { z-index: 5; padding: 24px 40px 24px 18px; }
.yn-home-page .yn-home-hero__visual img { max-width: 96%; max-height: 94%; filter: drop-shadow(0 26px 32px rgba(0,0,0,.27)); }
.yn-home-page .yn-home-hero__controls { bottom: 19px; }

/* Categories — automatic grid, product artwork visually larger than its halo. */
.yn-home-page .yn-home-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(100%,154px),1fr));
	gap: 12px;
}
.yn-home-page .yn-home-category-card {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 184px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	border: 1px solid #e2e9f3;
	border-radius: 19px;
	background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
	padding: 12px 12px 15px;
	box-shadow: 0 15px 30px -31px rgba(15,35,70,.6);
	transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.yn-home-page .yn-home-category-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 54%;
	pointer-events: none;
	background: linear-gradient(180deg,rgba(239,245,255,.82),rgba(255,255,255,0));
}
.yn-home-page .yn-home-category-card:hover { transform: translateY(-3px); border-color: #cbdcf4; box-shadow: 0 22px 40px -30px rgba(20,52,100,.34); }
.yn-home-page .yn-home-category-card__media { position: relative; z-index: 1; display: flex; width: 100%; height: 118px; flex-basis: 118px; align-items: center; justify-content: center; }
.yn-home-page .yn-home-category-card__circle { position: absolute; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 36% 30%,#fff,#eef4ff 62%,#e1ebfb); opacity: .84; box-shadow: inset 0 0 0 1px rgba(8,103,242,.045); }
.yn-home-page .yn-home-category-card__image { position: relative; z-index: 2; width: 124px; height: 108px; max-width: 98%; object-fit: contain; filter: drop-shadow(0 13px 15px rgba(23,45,79,.15)); transition: transform .24s ease; }
.yn-home-page .yn-home-category-card:hover .yn-home-category-card__image { transform: translateY(-3px) scale(1.035); }
.yn-home-page .yn-home-category-card__copy { position: relative; z-index: 2; width: 100%; min-width: 0; padding-right: 22px; text-align: left; }
.yn-home-page .yn-home-category-card__title { display: block; color: #0b1b36; font-size: 14px; font-weight: 800; line-height: 1.25; }
.yn-home-page .yn-home-category-card__count { display: block; margin-top: 5px; color: #8390a2; font-size: 11px; font-weight: 600; }
.yn-home-category-card__arrow { position: absolute; right: 12px; bottom: 17px; z-index: 3; display: flex; width: 23px; height: 23px; align-items: center; justify-content: center; border-radius: 8px; background: #eef5ff; color: #0867f2; opacity: .72; transition: opacity .18s ease,transform .18s ease; }
.yn-home-category-card:hover .yn-home-category-card__arrow { opacity: 1; transform: translateX(2px); }

/* Trust rail — individual cells instead of one heavy blue slab. */
.yn-home-benefits-grid {
	display: grid;
	grid-template-columns: repeat(5,minmax(0,1fr));
	overflow: hidden;
	border: 1px solid #dfe8f4;
	border-radius: 18px;
	background: rgba(255,255,255,.88);
	box-shadow: 0 16px 32px -31px rgba(15,35,70,.55);
}
.yn-home-benefit {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 76px;
	align-items: center;
	gap: 11px;
	padding: 14px 15px;
}
.yn-home-benefit + .yn-home-benefit::before { content:""; position:absolute; left:0; top:17px; bottom:17px; width:1px; background:#e7edf5; }
.yn-home-benefit__icon { display:flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center; border-radius:11px; background:linear-gradient(145deg,#eef5ff,#f8fbff); color:#0867f2; box-shadow: inset 0 0 0 1px rgba(8,103,242,.06); }
.yn-home-benefit__copy { display:grid; min-width:0; gap:4px; }
.yn-home-benefit__copy strong { color:#243650; font-size:12px; font-weight:800; line-height:1.25; }
.yn-home-benefit__copy span { color:#7b899b; font-size:10.5px; font-weight:600; line-height:1.25; }

/* Promo banners: commercial, but subordinate to the main Hero. */
.yn-home-page .yn-promo-section { margin-top: 44px; }
.yn-home-page .yn-promo-section__head { margin-bottom: 18px; }
.yn-home-page .yn-promo-card { border-radius: 20px; box-shadow: 0 20px 44px -36px rgba(5,18,42,.58); }
.yn-home-page .yn-promo-card.is-tile { min-height: 232px; }
.yn-home-page .yn-promo-card.is-tile .yn-promo-card__title { font-size: clamp(19px,1.7vw,26px); font-weight: 820; }
.yn-home-page .yn-promo-card.is-tile .yn-promo-card__subtitle { max-width: 390px; color: color-mix(in srgb,var(--yn-promo-text) 74%,transparent); }
.yn-home-page .yn-promo-card.is-tile .yn-promo-card__visual img { max-height: 190px; }
.yn-home-page .yn-promo-card__cta { min-height: 38px; }

/* Product showcase: a single visual module, not floating tabs + cards. */
.yn-home-products-panel {
	border: 1px solid #dfe8f4;
	border-radius: 26px;
	background: linear-gradient(180deg,#f3f7fd 0%,#f8fbff 34%,#fff 100%);
	padding: 26px;
	box-shadow: 0 22px 50px -46px rgba(15,35,70,.52);
}
.yn-home-section-head--products { margin-bottom: 16px; }
.yn-home-product-tabs { display:flex; gap:7px; margin:0 0 18px; overflow-x:auto; padding:3px; }
.yn-home-product-tab { min-height:36px; flex:0 0 auto; border:1px solid #dbe5f1; border-radius:10px; background:#fff; padding:0 14px; color:#66768c; font-size:12px; font-weight:800; transition:all .18s ease; }
.yn-home-product-tab:hover { border-color:#c9d8ec; color:#223752; }
.yn-home-product-tab.is-active { border-color:#0867f2; background:#0867f2; color:#fff; box-shadow:0 10px 20px -15px rgba(8,103,242,.72); }
.yn-home-products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.yn-home-page .home-products .ynout-product-card { border-radius:19px; border-color:#e1e8f2; box-shadow:0 13px 28px -29px rgba(15,35,70,.65); }
.yn-home-page .home-products .ynout-product-card:hover { border-color:#c8d8ee; box-shadow:0 20px 36px -28px rgba(15,35,70,.30); }
.yn-home-page .home-products .ynout-product-card__media.ynout-card-media { border-radius:15px; background:linear-gradient(180deg,#fafbfd,#f4f7fb); }
.yn-home-page .home-products .ynout-product-card__title h3 { font-weight:800; }

/* Editorial area. */
.yn-home-news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.yn-home-page .home-news .ynout-news-card { border-radius:20px; border-color:#e1e8f2; box-shadow:0 14px 32px -32px rgba(15,35,70,.58); }
.yn-home-page .home-news .ynout-news-card:hover { box-shadow:0 24px 44px -34px rgba(15,35,70,.32); }
.yn-home-page .home-news .ynout-news-card__media { min-height:220px; background:#f4f7fb; }
.yn-home-page .home-news .ynout-news-card:first-child .ynout-news-card__media { min-height:236px; }
.yn-home-page .home-news .ynout-news-card h3 { font-weight:800; }
.yn-home-page .home-news .ynout-news-card p { color:#6f7e91; }

/* Brands — quiet closing strip before footer. */
.yn-home-brands-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; }
.yn-home-brand-card { display:flex; min-width:0; min-height:64px; align-items:center; justify-content:center; border:1px solid #e2e9f2; border-radius:14px; background:rgba(255,255,255,.9); padding:12px; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.yn-home-brand-card:hover { transform:translateY(-2px); border-color:#cad8ea; box-shadow:0 14px 26px -25px rgba(15,35,70,.52); }
.yn-home-brand-card img { display:block; width:auto; height:24px; max-width:94px; object-fit:contain; }
.yn-home-brand-card span { color:#172942; font-size:12px; font-weight:850; letter-spacing:.035em; text-transform:uppercase; }

@media (max-width: 1199px) {
	.yn-home-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.yn-home-brands-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
	.yn-home-benefits-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.yn-home-benefit:nth-child(4)::before { display:none; }
}
@media (max-width: 767px) {
	.yn-home-page { padding-bottom: 22px; }
	.yn-home-page > .home-hero-section { padding-top: 14px; }
	.yn-home-section,.yn-home-page .yn-promo-section { margin-top: 32px; }
	.yn-home-section--categories { margin-top: 28px; }
	.yn-home-section--benefits { margin-top: 18px; }
	.yn-home-section-head { align-items:flex-start; gap:14px; margin-bottom:15px; }
	.yn-home-section-head__copy { max-width:100%; }
	.yn-home-section-head h2 { font-size:25px; }
	.yn-home-section-head p { display:none; }
	.yn-home-section-link { min-height:34px; padding:0 9px; font-size:11px; }
	.yn-home-eyebrow { margin-bottom:5px; }
	.yn-home-page .yn-home-hero { border-radius:20px; }
	.yn-home-page .yn-home-hero__copy { max-width:92%; padding-left:24px; padding-right:20px; }
	.yn-home-page .yn-home-hero__copy h2 { font-size:clamp(29px,8.7vw,39px); }
	.yn-home-page .yn-home-categories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
	.yn-home-page .yn-home-category-card { min-height:161px; border-radius:16px; padding:9px 9px 12px; }
	.yn-home-page .yn-home-category-card__media { height:101px; flex-basis:101px; }
	.yn-home-page .yn-home-category-card__circle { width:68px; height:68px; }
	.yn-home-page .yn-home-category-card__image { width:106px; height:94px; }
	.yn-home-page .yn-home-category-card__copy { padding-right:18px; }
	.yn-home-page .yn-home-category-card__title { font-size:13px; }
	.yn-home-benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:15px; }
	.yn-home-benefit { min-height:70px; padding:12px; }
	.yn-home-benefit:nth-child(odd)::before { display:none; }
	.yn-home-benefit:nth-child(5) { grid-column:1/-1; }
	.yn-home-benefit:nth-child(5)::before { display:none; }
	.yn-home-products-panel { border-radius:20px; padding:16px; }
	.yn-home-products-grid { grid-template-columns:1fr; gap:12px; }
	.yn-home-news-grid { grid-template-columns:1fr; gap:12px; }
	.yn-home-page .home-news .ynout-news-card__media,.yn-home-page .home-news .ynout-news-card:first-child .ynout-news-card__media { min-height:210px; }
	.yn-home-brands-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
	.yn-home-brand-card { min-height:56px; padding:9px; }
	.yn-home-brand-card img { height:21px; max-width:78px; }
}
@media (max-width: 430px) {
	.yn-home-section-head { flex-direction:column; }
	.yn-home-section-link { align-self:flex-start; }
	.yn-home-brands-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
 * OKNOUT 2.3.20 — Home refinement + clearer visual hierarchy.
 * Scoped to the storefront home to avoid collateral regressions.
 * ============================================================ */
.yn-home-page {
	--home-ink:#071831;
	--home-muted:#6e7e93;
	--home-line:#dfe7f2;
	--home-blue:#0867f2;
	background:
		radial-gradient(circle at 10% 9%,rgba(8,103,242,.055),transparent 25rem),
		radial-gradient(circle at 91% 43%,rgba(30,102,235,.04),transparent 29rem),
		linear-gradient(180deg,#f8fbff 0,#f7f9fc 45%,#fff 100%);
}
.yn-home-page > .home-hero-section { padding-top:26px; }
.yn-home-page .yn-home-hero {
	border-radius:28px;
	box-shadow:0 34px 75px -48px rgba(4,20,50,.75),0 1px 0 rgba(255,255,255,.12) inset;
}
.yn-home-page .yn-home-hero__copy { padding-left:clamp(30px,4vw,60px); }
.yn-home-page .yn-home-hero__copy h2 { letter-spacing:-.045em; text-wrap:balance; }
.yn-home-page .yn-home-hero__visual { padding-right:clamp(24px,4vw,58px); }

/* Categories: still automatic, but cards do not become tiny just because more terms exist. */
.yn-home-page .yn-home-categories-grid {
	grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));
	gap:14px;
}
.yn-home-page .yn-home-category-card {
	min-height:196px;
	border-color:#dfe7f1;
	border-radius:21px;
	padding:13px 14px 16px;
	background:linear-gradient(180deg,#fff 0%,#fbfdff 72%,#f7faff 100%);
	box-shadow:0 18px 42px -36px rgba(14,39,80,.55);
}
.yn-home-page .yn-home-category-card__media { height:126px; flex-basis:126px; }
.yn-home-page .yn-home-category-card__circle { width:80px; height:80px; }
.yn-home-page .yn-home-category-card__image { width:136px; height:116px; }
.yn-home-page .yn-home-category-card__title { font-size:14.5px; }
.yn-home-page .yn-home-category-card:hover { transform:translateY(-4px); box-shadow:0 28px 54px -38px rgba(14,48,101,.42); }

/* Product block is intentionally the first large commerce section. */
.yn-home-section--products { margin-top:34px; }
.yn-home-products-panel {
	position:relative;
	overflow:hidden;
	border-color:#dbe5f1;
	background:
		radial-gradient(circle at 100% 0,rgba(8,103,242,.075),transparent 23rem),
		linear-gradient(180deg,#f2f7ff 0%,#f8fbff 31%,#fff 100%);
	box-shadow:0 28px 64px -52px rgba(8,35,77,.62);
}
.yn-home-products-panel::before {
	content:"";
	position:absolute;
	left:26px;right:26px;top:0;height:1px;
	background:linear-gradient(90deg,transparent,rgba(8,103,242,.24),transparent);
}
.yn-home-products-grid { gap:16px; }
.yn-home-page .home-products .ynout-product-card { background:#fff; }
.yn-home-page .home-products .ynout-product-card__media { background:linear-gradient(180deg,#f7f9fc,#fff); }

/* Promo is a supporting layer now, so there is more space around it and less visual collision. */
.yn-home-page .yn-promo-section { margin-top:42px; }
.yn-home-page .yn-promo-tiles { gap:14px; }
.yn-home-page .yn-promo-card { border:1px solid rgba(255,255,255,.11); box-shadow:0 23px 52px -42px rgba(2,15,38,.67); }

/* Brand proof / service story. */
.yn-home-section--proof { margin-top:42px; }
.yn-home-proof {
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,.88fr) minmax(0,1.35fr);
	gap:28px;
	overflow:hidden;
	border:1px solid #dbe6f4;
	border-radius:26px;
	background:linear-gradient(135deg,#071a38 0%,#0b2d66 45%,#0e5bd6 100%);
	padding:30px;
	box-shadow:0 28px 64px -50px rgba(4,21,52,.72);
}
.yn-home-proof::after {
	content:"";position:absolute;right:-90px;top:-110px;width:310px;height:310px;border-radius:50%;
	background:radial-gradient(circle,rgba(104,175,255,.28),rgba(104,175,255,0) 67%);pointer-events:none;
}
.yn-home-proof__intro { position:relative;z-index:2;align-self:center; }
.yn-home-proof .yn-home-eyebrow { color:#8ec0ff; }
.yn-home-proof .yn-home-eyebrow::before { background:#78b3ff; }
.yn-home-proof__intro h2 { margin:0;color:#fff;font-size:clamp(27px,3vw,38px);font-weight:850;line-height:1.04;letter-spacing:-.042em;text-wrap:balance; }
.yn-home-proof__intro > p { max-width:570px;margin:12px 0 0;color:rgba(232,242,255,.76);font-size:13px;line-height:1.65; }
.yn-home-proof__actions { display:flex;flex-wrap:wrap;gap:9px;margin-top:20px; }
.yn-home-proof__primary,.yn-home-proof__secondary { display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:7px;border-radius:11px;padding:0 15px;font-size:12px;font-weight:800; }
.yn-home-proof__primary { background:#fff;color:#0b55c4;box-shadow:0 14px 28px -20px rgba(0,0,0,.6); }
.yn-home-proof__secondary { border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff; }
.yn-home-proof__cards { position:relative;z-index:2;display:grid;gap:10px; }
.yn-home-proof-card { display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(255,255,255,.075);padding:14px 15px;backdrop-filter:blur(10px); }
.yn-home-proof-card__icon { display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.11);color:#9dccff; }
.yn-home-proof-card h3 { margin:1px 0 4px;color:#fff;font-size:13px;font-weight:800;line-height:1.3; }
.yn-home-proof-card p { margin:0;color:rgba(225,238,255,.7);font-size:11.5px;line-height:1.5; }
.yn-home-proof__contact { position:relative;z-index:2;grid-column:2;justify-self:end;color:#c8e0ff;font-size:11.5px;font-weight:750; }

/* Editorial cards feel lighter than commerce cards. */
.yn-home-section--news { margin-top:46px; }
.yn-home-news-grid { gap:16px; }
.yn-home-page .home-news .yn-news-card { border-color:#e1e8f2;box-shadow:0 18px 38px -37px rgba(12,36,76,.48); }

/* Brand strip closes the page without another heavy panel. */
.yn-home-section--brands { margin-top:44px; }
.yn-home-brands-grid { gap:10px; }
.yn-home-brand-card { min-height:62px;border-color:#e2e8f1;background:rgba(255,255,255,.82); }

@media (max-width:1023px) {
	.yn-home-proof { grid-template-columns:1fr;gap:20px;padding:24px; }
	.yn-home-proof__contact { grid-column:1;justify-self:start; }
	.yn-home-proof__cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.yn-home-proof-card { grid-template-columns:1fr; }
}
@media (max-width:767px) {
	.yn-home-page > .home-hero-section { padding-top:14px; }
	.yn-home-page .yn-home-hero { border-radius:20px; }
	.yn-home-page .yn-home-categories-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
	.yn-home-page .yn-home-category-card { min-height:174px;border-radius:17px;padding:10px 10px 13px; }
	.yn-home-page .yn-home-category-card__media { height:108px;flex-basis:108px; }
	.yn-home-page .yn-home-category-card__image { width:116px;height:100px; }
	.yn-home-page .yn-home-category-card__copy { padding-right:0;text-align:center; }
	.yn-home-page .yn-home-category-card__arrow { display:none; }
	.yn-home-products-panel { padding:15px;border-radius:20px; }
	.yn-home-products-grid { grid-template-columns:1fr;gap:12px; }
	.yn-home-proof { border-radius:20px;padding:20px; }
	.yn-home-proof__cards { grid-template-columns:1fr; }
	.yn-home-proof-card { grid-template-columns:40px minmax(0,1fr); }
	.yn-home-proof__intro h2 { font-size:28px; }
}

/* ============================================================
 * OKNOUT 2.3.21 — Homepage editorial news refinement.
 * One lead story + two compact stories; visually distinct from product cards.
 * ============================================================ */
.yn-home-section--news { margin-top:48px; }
.yn-home-section-head--news { margin-bottom:18px; }
.yn-home-news-layout {
	display:grid;
	grid-template-columns:minmax(0,1.35fr) minmax(330px,.82fr);
	gap:16px;
	align-items:stretch;
}
.yn-home-news-featured,
.yn-home-news-stack { min-width:0; }
.yn-home-news-stack { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; }
.yn-home-page .home-news .ynout-news-card {
	border:1px solid #dfe7f2;
	border-radius:22px;
	background:rgba(255,255,255,.96);
	box-shadow:0 18px 42px -38px rgba(11,31,65,.44);
}
.yn-home-page .home-news .ynout-news-card:hover {
	transform:translateY(-2px);
	border-color:#cbd9eb;
	box-shadow:0 24px 50px -38px rgba(11,31,65,.34);
}
.yn-home-page .home-news .ynout-news-card--featured .ynout-news-card__media {
	min-height:318px;
	aspect-ratio:16/8.65;
	background:linear-gradient(180deg,#f7faff,#f0f5fb);
}
.yn-home-page .home-news .ynout-news-card--featured .ynout-news-card__image {
	max-width:88%;
	max-height:88%;
}
.yn-home-page .home-news .ynout-news-card--featured > div { padding:22px 24px 23px; }
.yn-home-page .home-news .ynout-news-card--featured h3 {
	max-width:680px;
	font-size:clamp(20px,1.8vw,26px);
	font-weight:820;
	line-height:1.15;
	letter-spacing:-.022em;
}
.yn-home-page .home-news .ynout-news-card--featured p { max-width:720px; font-size:13px; line-height:1.65; }

.yn-home-page .home-news .ynout-news-card--compact {
	display:grid;
	grid-template-columns:188px minmax(0,1fr);
	min-height:0;
}
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media {
	min-height:100%;
	aspect-ratio:auto;
	border-right:1px solid #e8eef6;
	background:linear-gradient(180deg,#f8fbff,#f2f6fb);
	padding:12px;
}
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__date {
	left:10px;
	top:10px;
	padding:5px 7px;
	font-size:9.5px;
}
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__image { max-width:96%; max-height:82%; }
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media.is-fallback {
	align-items:flex-end;
	padding:46px 10px 13px;
}
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__fallback-copy { display:none; }
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__fallback-art {
	right:0;
	bottom:-2%;
	width:88%;
	height:88%;
	op:auto;
	opacity:.95;
}
.yn-home-page .home-news .ynout-news-card--compact > div {
	min-width:0;
	justify-content:center;
	padding:18px 18px 16px;
}
.yn-home-page .home-news .ynout-news-card--compact h3 {
	margin-bottom:7px;
	font-size:15px;
	font-weight:800;
	line-height:1.25;
	-webkit-line-clamp:3;
}
.yn-home-page .home-news .ynout-news-card--compact p {
	font-size:11.5px;
	line-height:1.55;
	-webkit-line-clamp:2;
}
.yn-home-page .home-news .ynout-news-card--compact > div > a:last-child {
	margin-top:10px;
	font-size:11.5px;
}

@media (max-width:1023px) {
	.yn-home-news-layout { grid-template-columns:1fr; }
	.yn-home-news-stack { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
	.yn-home-page .home-news .ynout-news-card--featured .ynout-news-card__media { min-height:280px; }
	.yn-home-page .home-news .ynout-news-card--compact { grid-template-columns:1fr; }
	.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media { min-height:180px; aspect-ratio:16/8; border-right:0; border-bottom:1px solid #e8eef6; }
}
@media (max-width:767px) {
	.yn-home-section--news { margin-top:36px; }
	.yn-home-news-stack { grid-template-columns:1fr; gap:12px; }
	.yn-home-page .home-news .ynout-news-card--featured .ynout-news-card__media { min-height:220px; aspect-ratio:16/9; }
	.yn-home-page .home-news .ynout-news-card--featured > div { padding:17px; }
	.yn-home-page .home-news .ynout-news-card--featured h3 { font-size:19px; }
	.yn-home-page .home-news .ynout-news-card--compact { grid-template-columns:124px minmax(0,1fr); min-height:142px; }
	.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media { min-height:142px; height:100%; aspect-ratio:auto; border-right:1px solid #e8eef6; border-bottom:0; }
	.yn-home-page .home-news .ynout-news-card--compact > div { padding:14px; }
	.yn-home-page .home-news .ynout-news-card--compact h3 { font-size:13px; -webkit-line-clamp:3; }
	.yn-home-page .home-news .ynout-news-card--compact p { display:none; }
	.yn-home-page .home-news .ynout-news-card--compact > div > a:last-child { margin-top:7px; }
}
@media (max-width:430px) {
	.yn-home-page .home-news .ynout-news-card--compact { grid-template-columns:108px minmax(0,1fr); }
}

/* ============================================================
 * OKNOUT 2.3.22 — Homepage visual polish.
 * Clearer hierarchy, quieter surfaces, richer editorial/review areas.
 * ============================================================ */
.yn-home-page {
	background:
		radial-gradient(circle at 50% 0, rgba(8,103,242,.045), transparent 420px),
		#f7f9fc;
}

/* Give the first navigation layers their own refined white surface. */
.yn-home-section--categories { margin-top:32px; }
.yn-home-categories-panel {
	position:relative;
	overflow:hidden;
	border:1px solid #dfe7f2;
	border-radius:26px;
	background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,253,255,.96));
	padding:24px;
	box-shadow:0 24px 54px -48px rgba(11,35,73,.48);
}
.yn-home-categories-panel::before {
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(8,103,242,.18),transparent);
}
.yn-home-categories-panel .yn-home-section-head { margin-bottom:18px; }
.yn-home-page .yn-home-categories-grid {
	grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
	gap:10px;
}
.yn-home-page .yn-home-category-card {
	min-height:172px;
	border-color:#e6ecf4;
	border-radius:17px;
	background:#fff;
	padding:10px 11px 13px;
	box-shadow:none;
}
.yn-home-page .yn-home-category-card::before { height:58%; background:linear-gradient(180deg,#f5f8fd,rgba(255,255,255,0)); }
.yn-home-page .yn-home-category-card__media { height:110px; flex-basis:110px; }
.yn-home-page .yn-home-category-card__circle { width:72px; height:72px; opacity:.72; }
.yn-home-page .yn-home-category-card__image { width:128px; height:106px; }
.yn-home-page .yn-home-category-card:hover {
	transform:translateY(-3px);
	border-color:#cddcf0;
	box-shadow:0 18px 34px -30px rgba(9,37,83,.34);
}

/* Trust row sits closer to categories and feels like service metadata. */
.yn-home-section--benefits { margin-top:14px; }
.yn-home-benefits-grid {
	border-radius:16px;
	background:rgba(255,255,255,.78);
	box-shadow:none;
}
.yn-home-benefit { min-height:68px; padding:11px 14px; }
.yn-home-benefit__icon { width:36px; height:36px; flex-basis:36px; border-radius:10px; }
.yn-home-benefit__copy strong { font-size:11.5px; }
.yn-home-benefit__copy span { font-size:10px; }

/* A full-width assortment band gives the commercial part of the page a clear stage. */
.yn-home-commerce-zone {
	position:relative;
	margin-top:42px;
	padding:48px 0 54px;
	border-top:1px solid #e5ebf4;
	border-bottom:1px solid #e5ebf4;
	background:
		radial-gradient(circle at 86% 12%,rgba(8,103,242,.055),transparent 330px),
		linear-gradient(180deg,#f2f6fb 0%,#f8fbff 52%,#f4f8fd 100%);
}
.yn-home-commerce-zone::before {
	content:"";
	position:absolute;
	left:50%;top:0;
	width:min(760px,70vw);height:1px;
	transform:translateX(-50%);
	background:linear-gradient(90deg,transparent,rgba(8,103,242,.32),transparent);
}
.yn-home-commerce-zone .yn-home-section--products { margin-top:0; }
.yn-home-commerce-zone .yn-promo-section { margin-top:38px; }
.yn-home-products-panel {
	border-color:#dce6f2;
	border-radius:28px;
	background:rgba(255,255,255,.86);
	padding:27px;
	box-shadow:0 30px 68px -58px rgba(7,28,66,.52);
	backdrop-filter:blur(8px);
}
.yn-home-products-panel::before { left:28px; right:28px; }
.yn-home-product-tabs { margin-bottom:16px; }
.yn-home-product-tab { min-height:35px; background:#f8fafc; }
.yn-home-product-tab.is-active { background:#0867f2; }
.yn-home-page .home-products .ynout-product-card { border-color:#e3eaf3; }
.yn-home-page .home-products .ynout-product-card__media.ynout-card-media { background:linear-gradient(180deg,#f5f8fc 0%,#fff 100%); }

/* Promo cards stay colourful, but the surrounding rhythm is calmer. */
.yn-home-page .yn-promo-section__head { margin-bottom:16px; }
.yn-home-page .yn-promo-tiles { gap:12px; }
.yn-home-page .yn-promo-card { border-radius:18px; }
.yn-home-page .yn-promo-card.is-tile { min-height:218px; }

/* Brand proof now works as the strong narrative break between commerce and editorial. */
.yn-home-section--proof { margin-top:46px; }
.yn-home-proof {
	border-radius:28px;
	padding:32px;
	box-shadow:0 32px 70px -54px rgba(4,21,52,.66);
}
.yn-home-proof-card { background:rgba(255,255,255,.065); }

/* Editorial/reviews area is a single light magazine band. */
.yn-home-editorial-zone {
	margin-top:48px;
	padding:48px 0 52px;
	border-top:1px solid #e7edf5;
	border-bottom:1px solid #e7edf5;
	background:rgba(255,255,255,.82);
}
.yn-home-editorial-zone .yn-home-section--news { margin-top:0; }
.yn-home-editorial-zone .yn-home-section--reviews { margin-top:46px; }
.yn-home-news-layout { grid-template-columns:minmax(0,1.42fr) minmax(320px,.78fr); gap:14px; }
.yn-home-news-stack { grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px; }
.yn-home-page .home-news .ynout-news-card--featured .ynout-news-card__media { min-height:304px; }
.yn-home-page .home-news .ynout-news-card--featured > div { padding:21px 23px 22px; }
.yn-home-page .home-news .ynout-news-card--compact {
	grid-template-columns:142px minmax(0,1fr);
	min-height:128px;
	border-radius:18px;
}
.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media { padding:10px; }
.yn-home-page .home-news .ynout-news-card--compact > div { padding:14px 15px 13px; }
.yn-home-page .home-news .ynout-news-card--compact h3 { font-size:13.5px; line-height:1.28; -webkit-line-clamp:2; }
.yn-home-page .home-news .ynout-news-card--compact p { font-size:11px; -webkit-line-clamp:2; }

/* Reviews adopt the same section language and no longer look like a foreign Tailwind block. */
.yn-home-section-head--reviews { margin-bottom:18px; }
.yn-home-section-head--reviews > .flex { align-self:flex-end; }
.yn-home-reviews-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
}
.yn-home-review-card {
	display:flex;
	min-width:0;
	min-height:205px;
	flex-direction:column;
	border:1px solid #e3eaf3;
	border-radius:19px;
	background:#fff;
	padding:17px;
	box-shadow:0 16px 36px -34px rgba(11,31,65,.34);
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.yn-home-review-card:hover { transform:translateY(-2px); border-color:#cedaec; box-shadow:0 22px 44px -35px rgba(11,31,65,.28); }

/* Brands finish the page quietly instead of competing with the footer. */
.yn-home-section--brands { margin-top:40px; margin-bottom:10px; }
.yn-home-section--brands .yn-home-section-head { margin-bottom:13px; }
.yn-home-brands-grid { gap:8px; }
.yn-home-brand-card { min-height:58px; border-radius:13px; background:#fff; }
.yn-home-brand-card img { height:22px; opacity:.78; transition:opacity .18s ease,transform .18s ease; }
.yn-home-brand-card:hover img { opacity:1; transform:scale(1.03); }

@media (max-width:1199px) {
	.yn-home-reviews-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.yn-home-news-layout { grid-template-columns:1fr; }
	.yn-home-news-stack { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; }
	.yn-home-page .home-news .ynout-news-card--compact { grid-template-columns:1fr; }
	.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media { min-height:150px; border-right:0; border-bottom:1px solid #e8eef6; }
}
@media (max-width:767px) {
	.yn-home-categories-panel { border-radius:20px; padding:16px; }
	.yn-home-page .yn-home-categories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
	.yn-home-page .yn-home-category-card { min-height:160px; padding:8px 9px 11px; }
	.yn-home-page .yn-home-category-card__media { height:100px; flex-basis:100px; }
	.yn-home-page .yn-home-category-card__image { width:112px; height:94px; }
	.yn-home-commerce-zone { margin-top:30px; padding:32px 0 36px; }
	.yn-home-products-panel { padding:14px; border-radius:20px; }
	.yn-home-commerce-zone .yn-promo-section { margin-top:30px; }
	.yn-home-proof { padding:20px; border-radius:21px; }
	.yn-home-editorial-zone { margin-top:34px; padding:34px 0 36px; }
	.yn-home-editorial-zone .yn-home-section--reviews { margin-top:34px; }
	.yn-home-news-stack { grid-template-columns:1fr; gap:10px; }
	.yn-home-page .home-news .ynout-news-card--compact { grid-template-columns:108px minmax(0,1fr); min-height:126px; }
	.yn-home-page .home-news .ynout-news-card--compact .ynout-news-card__media { min-height:126px; height:100%; border-right:1px solid #e8eef6; border-bottom:0; }
	.yn-home-page .home-news .ynout-news-card--compact p { display:none; }
	.yn-home-reviews-grid { grid-template-columns:1fr; }
	.yn-home-review-card { min-height:0; }
	.yn-home-section--brands { margin-top:32px; }
}
@media (max-width:1023px) and (min-width:768px) {
	.yn-home-news-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.yn-home-news-stack .ynout-news-card--compact:last-child { grid-column:1/-1; }
}

/* ============================================================
 * OKNOUT 2.3.23 — Catalog + product detail visual polish.
 * Deliberately scoped. Tailwind still owns the utility layer.
 * ============================================================ */

/* ---------- Catalog shell ---------- */
.catalog-page {
  background: #f8fafc;
}
.catalog-page .yn-catalog-hero {
  min-height: 205px;
  border-bottom: 1px solid #e7edf5;
  background:
    radial-gradient(circle at 84% 42%, rgba(8,103,242,.13), transparent 24%),
    linear-gradient(105deg, #ffffff 0%, #f7faff 57%, #eef5ff 100%);
}
.catalog-page .yn-catalog-hero > .container,
.catalog-page .yn-catalog-hero .yn-hero-content {
  min-height: 205px;
}
.catalog-page .yn-catalog-hero .yn-hero-copy {
  max-width: 62%;
}
.catalog-page .yn-catalog-hero .yn-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(2.15rem, 4vw, 3.45rem);
  letter-spacing: -.045em;
}
.catalog-page .yn-catalog-hero .yn-hero-count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 12px;
  border: 1px solid rgba(8,103,242,.12);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255,255,255,.78);
  color: #40516c;
  font-size: 12px;
  box-shadow: 0 7px 24px rgba(20,48,88,.05);
  backdrop-filter: blur(8px);
}
.catalog-page .yn-catalog-hero .yn-hero-description {
  max-width: 610px;
  margin-top: 10px;
  color: #68778e;
}
.catalog-page .yn-catalog-hero .yn-hero-art-shell {
  right: 18px;
  width: min(34%, 390px);
  height: 84%;
  overflow: hidden;
  border-radius: 28px;
}
.catalog-page .yn-catalog-hero .yn-hero-art-halo {
  width: min(22vw, 250px);
  background: radial-gradient(circle at 42% 38%, #fff 0%, #f1f6ff 58%, #deebff 100%);
  opacity: .95;
}
.catalog-page .yn-catalog-hero .yn-hero-art {
  width: 82%;
  height: 86%;
  filter: drop-shadow(0 22px 28px rgba(27,54,96,.14));
}
.catalog-page .yn-catalog-hero .yn-hero-art-shell.is-composite .yn-hero-art--secondary,
.catalog-page .yn-catalog-hero .yn-hero-art-shell.is-composite .yn-hero-art--tertiary {
  display: none;
}
.catalog-page .yn-catalog-hero .yn-hero-art-shell.is-composite .yn-hero-art--main {
  position: relative;
  inset: auto;
  width: 86%;
  height: 88%;
  transform: none;
}

.catalog-page .yn-chips {
  min-height: 18px;
  padding-top: 18px;
  padding-bottom: 14px;
}
.catalog-page .yn-chip {
  height: 34px;
  border-color: #d8e6fb;
  background: #fff;
  box-shadow: 0 5px 16px rgba(28,55,95,.035);
  font-size: 12px;
}
.catalog-page .yn-chip:hover { background: #f2f7ff; }

.catalog-page .yn-catalog-layout { gap: 22px; }
.catalog-page .yn-sidebar {
  width: 266px;
  flex-basis: 266px;
}
.catalog-page .yn-filter-form {
  position: sticky;
  top: 92px;
  gap: 10px;
}
.catalog-page .yn-filter-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 3px 5px;
}
.catalog-page .yn-filter-intro div { min-width: 0; }
.catalog-page .yn-filter-intro span {
  display: block;
  margin-bottom: 2px;
  color: #8a96a8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.catalog-page .yn-filter-intro strong {
  color: #0b1b3b;
  font-size: 18px;
  line-height: 1.15;
}
.catalog-page .yn-filter-intro a {
  color: #0867f2;
  font-size: 11px;
  font-weight: 800;
}
.catalog-page .yn-filter-card {
  border: 1px solid #e4ebf4;
  border-radius: 15px;
  background: rgba(255,255,255,.98);
  padding: 13px 14px;
  box-shadow: 0 9px 28px -26px rgba(18,39,73,.7);
}
.catalog-page .yn-filter-card:has(.yn-check-row input:checked) {
  border-color: #d4e3fb;
  background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.catalog-page .yn-filter-heading {
  min-height: 24px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
}
.catalog-page button.yn-filter-heading svg { transition: transform .18s ease; }
.catalog-page button.yn-filter-heading[aria-expanded="false"] svg { transform: rotate(180deg); }
.catalog-page .yn-filter-options { gap: 1px; }
.catalog-page .yn-category-link,
.catalog-page .yn-check-row {
  min-height: 32px;
  border-radius: 9px;
  padding: 5px 7px;
  font-size: 12px;
}
.catalog-page .yn-category-link:hover,
.catalog-page .yn-check-row:hover { background: #f5f8fc; }
.catalog-page .yn-category-link.is-active {
  background: #eef5ff;
  color: #0867f2;
}
.catalog-page .yn-category-link > span:last-child,
.catalog-page .yn-check-row > span:last-child {
  display: inline-flex;
  min-width: 23px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f2f5f9;
  padding: 0 6px;
  color: #778399;
  font-size: 10px;
  font-weight: 800;
}
.catalog-page .yn-check {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
  border-color: #c8d2e1;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.catalog-page .yn-check-row input[type="checkbox"]:checked + .yn-check::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.catalog-page .yn-show-more {
  margin-top: 7px;
  padding-left: 6px;
  font-size: 11px;
}
.catalog-page .yn-search-brand {
  height: 38px;
  border-color: #e2e9f2;
  background: #f8fafc;
}
.catalog-page .yn-price-inputs input { height: 39px; background: #fff; }
.catalog-page .yn-price-range { margin-top: 8px; margin-bottom: -2px; }
.catalog-page .yn-price-range::before,
.catalog-page .yn-price-range::after { top: 15px; height: 4px; }
.catalog-page .yn-price-range input::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6.5px;
  border-width: 3px;
}
.catalog-page .yn-price-scale { color: #8a95a7; font-size: 10px; }
.catalog-page .yn-filter-submit,
.catalog-page .yn-filter-reset { height: 42px; border-radius: 12px; }
.catalog-page .yn-filter-submit {
  box-shadow: 0 10px 20px -12px rgba(8,103,242,.65);
}

/* ---------- Catalog toolbar + products ---------- */
.catalog-page .yn-catalog-main { padding-bottom: 4px; }
.catalog-page .yn-toolbar {
  min-height: 52px;
  margin-bottom: 14px;
  border: 1px solid #e5ebf3;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  padding: 6px 8px 6px 14px;
  box-shadow: 0 10px 28px -27px rgba(18,39,73,.7);
}
.catalog-page .yn-result-count { font-size: 13px; font-weight: 800; }
.catalog-page .yn-view-switcher,
.catalog-page .yn-sort { border-color: #e1e8f1; background: #f9fbfd; }
.catalog-page .yn-sort { min-width: 190px; padding-right: 34px; }
.catalog-page .yn-view-button { width: 34px; height: 34px; }
.catalog-page .yn-view-button.is-active { box-shadow: 0 5px 14px rgba(8,103,242,.18); }
.catalog-page .yn-products-grid { gap: 17px; }
.catalog-page .ynout-product-card {
  border-color: #e2e9f2;
  border-radius: 18px;
  padding: 9px;
  box-shadow: 0 12px 30px -28px rgba(14,37,75,.72);
}
.catalog-page .ynout-product-card:hover {
  transform: translateY(-3px);
  border-color: #c7d7eb;
  box-shadow: 0 22px 40px -29px rgba(14,37,75,.34);
}
.catalog-page .ynout-product-card__media.ynout-card-media {
  margin-bottom: 11px;
  border: 1px solid #edf1f6;
  border-radius: 14px;
  background: #f5f7fa;
}
.catalog-page .ynout-card-media > a { overflow: hidden; }
.catalog-page .ynout-card-media .ynout-card-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;
}
.catalog-page .ynout-product-card__body { padding: 0 3px 3px; }
.catalog-page .ynout-product-card__title { min-height: 42px; margin-bottom: 3px; }
.catalog-page .ynout-product-card__title h3 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.012em;
}
.catalog-page .ynout-product-card__spec {
  min-height: 20px;
  margin-bottom: 8px;
  color: #718096;
  font-size: 11px;
}
.catalog-page .ynout-product-card__price { margin-bottom: 11px; }
.catalog-page .ynout-product-card__price > span:first-child { font-size: 20px; }
.catalog-page .ynout-product-card__actions { gap: 7px; }
.catalog-page .ynout-product-card__actions > a { height: 41px; border-radius: 11px; font-size: 12px; }
.catalog-page .ynout-product-card__actions > button { width: 41px; height: 41px; border-radius: 11px; }
.catalog-page .ynout-product-chip { box-shadow: 0 4px 12px rgba(20,40,70,.06); }
.catalog-page .woocommerce-pagination { margin: 28px 0 8px; }
.catalog-page .yn-empty { border-color: #e4ebf4; background: linear-gradient(180deg,#fff,#fbfdff); }
.catalog-page .yn-empty__icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #eef5ff;
  color: #0867f2;
}

/* List view: a real compact product row, not a stretched grid card. */
.catalog-page .yn-products-grid.is-list { grid-template-columns: 1fr; }
.catalog-page .yn-products-grid.is-list .ynout-product-card {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  min-height: 158px;
  gap: 14px;
  padding: 10px;
}
.catalog-page .yn-products-grid.is-list .ynout-product-card__media {
  width: 190px;
  height: 138px;
  min-height: 138px;
  margin: 0;
  align-self: center;
}
.catalog-page .yn-products-grid.is-list .ynout-product-card__body {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(215px, .42fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 24px;
  row-gap: 6px;
  align-content: center;
  padding: 6px 8px 6px 0;
}
.catalog-page .yn-products-grid.is-list .ynout-product-card__title {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
}
.catalog-page .yn-products-grid.is-list .ynout-product-card__title h3 { font-size: 16px; line-height: 1.32; }
.catalog-page .yn-products-grid.is-list .ynout-product-card__spec { grid-column: 1; grid-row: 2; white-space: normal; }
.catalog-page .yn-products-grid.is-list .ynout-product-card__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  margin: 0;
  padding-top: 2px;
}
.catalog-page .yn-products-grid.is-list .ynout-product-card__actions {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  width: min(100%, 300px);
}

/* ---------- Catalog lower content ---------- */
.catalog-page .yn-seo-block,
.catalog-page .yn-benefits,
.catalog-page .yn-guide-card {
  border-color: #e5ebf3;
  box-shadow: 0 12px 32px -31px rgba(18,39,73,.65);
}
.catalog-page .yn-seo-block { background: linear-gradient(135deg,#f8fbff,#f4f7fb); }
.catalog-page .yn-benefits { background: #fff; }
.catalog-page .yn-guide-card { background: #fff; }

/* ---------- Product detail: top area ---------- */
.product-page {
  background: linear-gradient(180deg,#fff 0,#fff 48%,#fbfcfe 100%);
}
.product-page > .container:first-child { padding-top: 20px; }
.product-page .ynout-pdp-main {
  grid-template-columns: minmax(0, 1.42fr) minmax(270px, .72fr) minmax(304px, .74fr);
  gap: 20px;
  padding-top: 4px;
}
.product-page .ynout-pdp-summary { min-width: 0; }
.product-page .ynout-pdp-badges { margin-bottom: 10px; }
.product-page .ynout-pdp-badges > span {
  min-height: 29px;
  border-radius: 999px;
  padding: 0 10px;
  box-shadow: 0 5px 15px rgba(20,44,82,.035);
}
.product-page .ynout-pdp-title {
  max-width: 790px;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.product-page .ynout-pdp-gallery {
  height: clamp(430px, 37vw, 520px);
  margin-top: 18px;
  gap: 12px;
}
.product-page .ynout-pdp-thumbs {
  width: 70px;
  flex-basis: 70px;
  gap: 6px;
}
.product-page .ynout-gallery-thumb {
  width: 66px;
  height: 66px;
  min-height: 66px;
  flex-basis: 66px;
  border-width: 1px;
  border-radius: 11px;
  padding: 2px;
}
.product-page .ynout-gallery-thumb.is-active {
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(8,103,242,.07);
}
.product-page .ynout-pdp-thumbs__nav {
  height: 28px;
  flex-basis: 28px;
  border-radius: 9px;
}
.product-page .ynout-pdp-stage {
  border-color: #e4eaf2;
  border-radius: 18px;
  background: linear-gradient(180deg,#fafbfc 0%,#f6f8fb 100%);
  box-shadow: 0 15px 38px -34px rgba(13,34,69,.78);
}
.product-page .ynout-pdp-stage__image { padding: 8px; }
.product-page .ynout-pdp-stage-nav,
.product-page .ynout-pdp-zoom,
.product-page .ynout-pdp-gallery-counter { box-shadow: 0 8px 22px rgba(13,34,69,.09); }

.product-page .ynout-pdp-options {
  margin-top: 34px;
  border: 1px solid #e5ebf3;
  border-radius: 17px;
  background: linear-gradient(180deg,#fff,#fbfdff);
  padding: 16px;
  box-shadow: 0 15px 35px -34px rgba(14,38,78,.7);
}
.product-page .ynout-pdp-options > h2:first-child,
.product-page .ynout-pdp-options > div:first-child { margin-top: 0; }
.product-page .ynout-pdp-options .overflow-hidden.rounded-xl { border-color: #e6ecf3; }
.product-page .ynout-pdp-options .overflow-hidden.rounded-xl > div {
  min-height: 42px;
  padding-left: 11px;
  padding-right: 11px;
}
.product-page .ynout-pdp-buybox { padding-top: 34px; }
.product-page .ynout-pdp-buybox-card {
  border-color: #dfe7f1;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 19px 42px -27px rgba(15,37,74,.28);
}
.product-page .ynout-pdp-buybox-card > div:first-child strong.text-3xl { font-size: 29px; }
.product-page .ynout-pdp-buybox-card button.bg-accent {
  height: 46px;
  border-radius: 12px;
  box-shadow: 0 12px 24px -14px rgba(8,103,242,.72);
}
.product-page .ynout-pdp-buybox-card a[href^="tel:"] { height: 44px; border-radius: 12px; }
.product-page .ynout-pdp-buybox-card .bg-\[\#effbf3\] {
  border: 1px solid #d7f1e0;
  background: #f2fbf5;
}

/* ---------- Product detail: condition/tabs/content ---------- */
.product-page .ynout-pdp-condition-strip {
  margin-top: 20px;
  border-color: #e3eaf3;
  background: linear-gradient(90deg,#fff 0%,#fbfdff 70%,#f4f8ff 100%);
  box-shadow: 0 12px 32px -31px rgba(18,39,73,.62);
}
.product-page .ynout-pdp-tabs {
  position: relative;
  min-height: 60px;
  margin-top: 18px;
  gap: 4px;
  border: 1px solid #e4ebf3;
  border-radius: 15px;
  background: #fff;
  padding: 7px;
  box-shadow: 0 12px 32px -31px rgba(18,39,73,.72);
}
.product-page .ynout-pdp-tab {
  height: 42px;
  border-radius: 10px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 800;
}
.product-page .ynout-pdp-tab.is-active {
  border-color: transparent;
  background: #0867f2;
  color: #fff;
  box-shadow: 0 8px 16px -10px rgba(8,103,242,.68);
}
.product-page .ynout-pdp-tab-panel { min-height: 0; padding-top: 18px; padding-bottom: 18px; }
.product-page .ynout-pdp-description > div:first-child {
  border: 1px solid #e5ebf3;
  border-radius: 17px;
  background: #fff;
  padding: 20px 22px;
  box-shadow: 0 14px 34px -33px rgba(18,39,73,.68);
}
.product-page .ynout-prose { max-width: 860px; color: #5f6e84; }
.product-page #condition-details > div,
.product-page #delivery > div,
.product-page #full-specs,
.product-page #faq {
  border-color: #e4ebf3;
  border-radius: 17px;
  box-shadow: 0 14px 34px -33px rgba(18,39,73,.7);
}
.product-page #full-specs .mt-4.grid { gap: 0 24px; }
.product-page #full-specs .mt-4.grid > div {
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}
.product-page #full-specs .mt-4.grid > div strong { max-width: 58%; text-align: right; }
.product-page #faq details { border-color: #e5ebf3; background: #fbfcfe; }
.product-page .ynout-pdp-related {
  margin-top: 6px;
  border-top-color: #e3eaf3;
  padding-top: 24px;
  padding-bottom: 20px;
}
.product-page .product-related-grid { gap: 15px; }
.product-page .product-related-grid .ynout-product-card {
  border-radius: 17px;
  border-color: #e3eaf3;
  padding: 9px;
  box-shadow: 0 13px 30px -29px rgba(14,37,75,.65);
}
.product-page .product-related-grid .ynout-card-media .ynout-card-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .catalog-page .yn-sidebar { width: 244px; flex-basis: 244px; }
  .catalog-page .yn-catalog-hero .yn-hero-art-shell { width: 30%; opacity: .82; }
  .product-page .ynout-pdp-main { grid-template-columns: minmax(0, 1.2fr) minmax(265px,.8fr); }
  .product-page .ynout-pdp-buybox { grid-column: 1 / -1; padding-top: 0; }
  .product-page .ynout-pdp-buybox-card { position: static; display: grid; grid-template-columns: minmax(250px,.7fr) minmax(0,1fr); gap: 10px 24px; }
  .product-page .ynout-pdp-buybox-card > * { min-width: 0; }
}
@media (max-width: 1023px) {
  .catalog-page .yn-catalog-hero .yn-hero-copy { max-width: 70%; }
  .catalog-page .yn-catalog-hero .yn-hero-art-shell { right: 8px; width: 28%; opacity: .68; }
  .catalog-page .yn-toolbar { padding-left: 8px; }
  .catalog-page .yn-sort { min-width: 160px; }
  .catalog-page .yn-products-grid.is-list .ynout-product-card { grid-template-columns: 165px minmax(0,1fr); }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__media { width: 165px; height: 128px; min-height: 128px; }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__body { grid-template-columns: minmax(0,1fr) 190px; column-gap: 18px; }
  .product-page .ynout-pdp-options { margin-top: 28px; }
}
@media (max-width: 767px) {
  .catalog-page .yn-catalog-hero,
  .catalog-page .yn-catalog-hero > .container,
  .catalog-page .yn-catalog-hero .yn-hero-content { min-height: 178px; }
  .catalog-page .yn-catalog-hero .yn-hero-copy { max-width: 100%; padding-right: 72px; }
  .catalog-page .yn-catalog-hero .yn-hero-copy h1 { font-size: 2rem; }
  .catalog-page .yn-catalog-hero .yn-hero-description { display: none; }
  .catalog-page .yn-catalog-hero .yn-hero-art-shell { right: -16px; width: 118px; height: 70%; opacity: .46; border-radius: 20px; }
  .catalog-page .yn-chips { padding-top: 12px; padding-bottom: 10px; }
  .catalog-page .yn-toolbar { min-height: 50px; margin-bottom: 12px; border-radius: 13px; }
  .catalog-page .yn-result-count { font-size: 12px; }
  .catalog-page .yn-toolbar-right { gap: 6px; }
  .catalog-page .yn-sort { width: 150px; min-width: 0; font-size: 11px; }
  .catalog-page .yn-products-grid { gap: 12px; }
  .catalog-page .ynout-product-card { border-radius: 16px; padding: 8px; }
  .catalog-page .ynout-product-card__media.ynout-card-media { border-radius: 12px; }
  .catalog-page .ynout-product-card__title h3 { font-size: 13px; }
  .catalog-page .ynout-product-card__actions > a { height: 40px; }
  .catalog-page .yn-products-grid.is-list .ynout-product-card {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 0;
  }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4/3;
    margin-bottom: 10px;
  }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__body { display: flex; width: 100%; padding: 0 2px 2px; }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__price { margin-bottom: 10px; }
  .catalog-page .yn-products-grid.is-list .ynout-product-card__actions { width: 100%; }

  .product-page .ynout-pdp-main { display: block; }
  .product-page .ynout-pdp-title { font-size: 1.75rem; line-height: 1.1; }
  .product-page .ynout-pdp-gallery { height: 330px; margin-top: 14px; gap: 8px; }
  .product-page .ynout-pdp-thumbs { width: 58px; flex-basis: 58px; }
  .product-page .ynout-gallery-thumb { width: 54px; height: 54px; min-height: 54px; flex-basis: 54px; }
  .product-page .ynout-pdp-options,
  .product-page .ynout-pdp-buybox { margin-top: 16px; }
  .product-page .ynout-pdp-options { padding: 14px; border-radius: 15px; }
  .product-page .ynout-pdp-buybox-card { display: block; padding: 16px; border-radius: 16px; }
  .product-page .ynout-pdp-tabs { margin-top: 16px; border-radius: 13px; padding: 5px; }
  .product-page .ynout-pdp-tab { height: 38px; padding: 0 12px; font-size: 12px; }
  .product-page .ynout-pdp-condition-strip { border-radius: 15px; }
  .product-page .ynout-pdp-description > div:first-child { padding: 17px; border-radius: 15px; }
  .product-page #full-specs .mt-4.grid > div { min-height: 44px; }
  .product-page .product-related-grid { gap: 10px; }
}

/* ============================================================
 * OKNOUT 2.3.24 — Homepage cleanup, catalog sorting and consent UI.
 * ============================================================ */

/* Home hero: copy and slider controls share one deliberate content gutter. */
.yn-home-page .yn-home-hero {
  --yn-home-hero-gutter: clamp(34px, 4.1vw, 60px);
}
.yn-home-page .yn-home-hero__copy {
  padding-left: var(--yn-home-hero-gutter);
}
.yn-home-page .yn-home-hero__controls {
  left: var(--yn-home-hero-gutter);
}

/* Categories: remove the unnecessary outer panel while keeping the cards. */
.yn-home-page .yn-home-categories-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.yn-home-page .yn-home-categories-panel::before { display: none; }
.yn-home-page .yn-home-categories-panel .yn-home-section-head { margin-bottom: 17px; }

/* Product selection: no large tinted shell around the section. */
.yn-home-page .yn-home-commerce-zone {
  margin-top: 38px;
  padding: 0;
  border: 0;
  background: transparent;
}
.yn-home-page .yn-home-commerce-zone::before { display: none; }
.yn-home-page .yn-home-products-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.yn-home-page .yn-home-products-panel::before { display: none; }
.yn-home-page .yn-home-commerce-zone .yn-promo-section { margin-top: 40px; }

/* Keep the brand logos in code and on the page, but hide the requested copy. */
.yn-home-page .yn-home-section--brands .yn-home-section-head { display: none; }
.yn-home-page .yn-home-section--brands { margin-top: 30px; }

/* Homepage news — light editorial layout.
 * Keep the requested copy hidden, but avoid the heavy dark container. The lead
 * story is a split magazine card and the remaining stories form a calm list. */
.yn-home-page .yn-home-section--news .yn-home-eyebrow,
.yn-home-page .yn-home-section--news .yn-home-section-head__copy > p { display: none; }
.yn-home-page .yn-home-section--news { margin-top: 46px; }
.yn-home-page .yn-home-news-panel {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.yn-home-page .yn-home-news-panel::before { display: none; }
.yn-home-page .yn-home-news-panel > * { position: relative; z-index: 1; }
.yn-home-page .yn-home-news-panel .yn-home-section-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8edf5;
}
.yn-home-page .yn-home-news-panel .yn-home-section-head h2 {
  color: #0b1b3b;
  font-size: clamp(25px,2.2vw,32px);
  letter-spacing: -.035em;
}
.yn-home-page .yn-home-news-panel .yn-home-section-link {
  min-height: 38px;
  border: 1px solid #dce6f3;
  border-radius: 11px;
  background: #fff;
  padding: 0 13px;
  color: #0867f2;
  box-shadow: 0 8px 24px -22px rgba(12,48,96,.5);
  backdrop-filter: none;
}
.yn-home-page .yn-home-news-panel .yn-home-section-link:hover {
  border-color: #bfd3f0;
  background: #f7faff;
  color: #075bd4;
}
.yn-home-page .yn-home-news-layout {
  display: grid;
  grid-template-columns: minmax(0,1.32fr) minmax(330px,.68fr);
  align-items: stretch;
  gap: 16px;
}
.yn-home-page .yn-home-news-featured,
.yn-home-page .yn-home-news-stack { min-width: 0; }
.yn-home-page .yn-home-news-stack {
  display: grid;
  grid-template-rows: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card {
  border: 1px solid #e1e8f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px -38px rgba(12,36,76,.55);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.yn-home-page .yn-home-news-panel .ynout-news-card:hover {
  transform: translateY(-2px);
  border-color: #cad8ea;
  box-shadow: 0 26px 52px -40px rgba(12,36,76,.5);
}

/* Lead story: one self-contained magazine card instead of a generic tall tile. */
.yn-home-page .yn-home-news-panel .ynout-news-card--featured {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(280px,.88fr);
  min-height: 356px;
  overflow: hidden;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__media {
  min-height: 356px;
  height: 100%;
  aspect-ratio: auto;
  border-right: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 72% 18%, rgba(8,103,242,.14), transparent 42%),
    linear-gradient(145deg,#f8fbff 0%,#eef5ff 100%);
  padding: 28px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__image {
  width: 100%;
  height: 100%;
  max-width: 96%;
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(16,43,82,.10));
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__date {
  top: 17px;
  left: 17px;
  border-color: rgba(196,211,231,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px -18px rgba(13,43,84,.4);
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured > div {
  justify-content: center;
  padding: 30px 29px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured h3 {
  margin-bottom: 11px;
  font-size: clamp(22px,2vw,28px);
  line-height: 1.08;
  letter-spacing: -.035em;
  -webkit-line-clamp: 3;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured p {
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.68;
  color: #66758a;
  -webkit-line-clamp: 4;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured > div > a:last-child {
  width: fit-content;
  min-height: 38px;
  margin-top: 19px;
  border-radius: 11px;
  background: #0867f2;
  padding: 0 14px;
  color: #fff;
  box-shadow: 0 12px 26px -19px rgba(8,103,242,.72);
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured > div > a:last-child:hover {
  background: #075bd4;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__media.is-fallback {
  align-items: flex-end;
  background: linear-gradient(145deg,#edf5ff,#dceaff);
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__fallback-copy {
  display: none;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__fallback-art {
  right: 5%;
  bottom: 2%;
  width: 74%;
  height: 84%;
  opacity: .96;
  filter: drop-shadow(0 20px 28px rgba(18,50,98,.15));
}

/* Side stories: compact editorial rows with a real thumbnail, not mini product cards. */
.yn-home-page .yn-home-news-panel .ynout-news-card--compact {
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  min-height: 108px;
  overflow: hidden;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__media {
  min-height: 108px;
  height: 100%;
  aspect-ratio: auto;
  border-right: 1px solid #e8eef6;
  border-bottom: 0;
  background: linear-gradient(145deg,#f8fbff,#eef4fb);
  padding: 11px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__date {
  top: 9px;
  left: 9px;
  gap: 3px;
  padding: 4px 6px;
  font-size: 9px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__image {
  width: 100%;
  height: 100%;
  max-width: 95%;
  max-height: 86%;
  object-fit: contain;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__media.is-fallback {
  padding: 8px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__fallback-copy { display: none; }
.yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__fallback-art {
  right: 4%;
  bottom: 2%;
  width: 88%;
  height: 84%;
  opacity: .9;
  filter: drop-shadow(0 10px 14px rgba(16,43,82,.12));
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact > div {
  justify-content: center;
  padding: 13px 14px;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact h3 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.27;
  letter-spacing: -.012em;
  -webkit-line-clamp: 3;
}
.yn-home-page .yn-home-news-panel .ynout-news-card--compact p { display: none; }
.yn-home-page .yn-home-news-panel .ynout-news-card--compact > div > a:last-child {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 800;
}

@media (max-width: 1099px) {
  .yn-home-page .yn-home-news-layout { grid-template-columns: 1fr; }
  .yn-home-page .yn-home-news-stack {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: auto;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured {
    grid-template-columns: minmax(0,1.08fr) minmax(260px,.92fr);
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__media {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid #e8eef6;
  }
}
@media (max-width: 767px) {
  .yn-home-page .yn-home-section--news { margin-top: 36px; }
  .yn-home-page .yn-home-news-panel .yn-home-section-head {
    align-items: center;
    gap: 10px;
  }
  .yn-home-page .yn-home-news-panel .yn-home-section-head h2 { font-size: 24px; }
  .yn-home-page .yn-home-news-panel .yn-home-section-link {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured {
    display: flex;
    min-height: 0;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__media {
    min-height: 220px;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #e8eef6;
    padding: 20px;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured > div { padding: 18px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured h3 { font-size: 20px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured p { font-size: 13px; -webkit-line-clamp: 3; }
  .yn-home-page .yn-home-news-stack { grid-template-columns: 1fr; gap: 10px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact {
    grid-template-columns: 108px minmax(0,1fr);
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__media {
    min-height: 118px;
    height: 100%;
    border-right: 1px solid #e8eef6;
    border-bottom: 0;
  }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact > div { padding: 12px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact h3 { font-size: 13px; -webkit-line-clamp: 3; }
}
@media (max-width: 430px) {
  .yn-home-page .yn-home-news-panel .yn-home-section-head { align-items: flex-end; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__media { min-height: 195px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact { grid-template-columns: 96px minmax(0,1fr); }
  .yn-home-page .yn-home-news-panel .ynout-news-card--compact .ynout-news-card__media { min-height: 108px; }
}

/* Catalog filters: requested breathing space above each heading. */
.catalog-page .yn-filter-heading { margin-top: 8px; }
.catalog-page .yn-filter-card > .yn-filter-heading:first-child { margin-top: 8px; }

/* Catalog sorting: consistent custom dropdown instead of browser-native select. */
.catalog-page .ynout-sort-form { position: relative; flex: 0 0 auto; }
.catalog-page .ynout-sort-button {
  width: auto;
  min-width: 230px;
  min-height: 44px;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #f9fbfd;
  padding: 6px 11px;
  box-shadow: none;
}
.catalog-page .ynout-sort-button:hover,
.catalog-page .ynout-sort-button:focus-visible {
  border-color: #bfd2ed;
  background: #fff;
  color: #10243f;
  box-shadow: 0 8px 20px -18px rgba(16,47,92,.45);
}
.catalog-page .ynout-sort-button__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #edf4ff;
  color: #0867f2;
}
.catalog-page .ynout-sort-button__copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 1px;
  text-align: left;
}
.catalog-page .ynout-sort-button__copy small {
  color: #8a96a8;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.catalog-page .ynout-sort-button__copy strong {
  overflow: hidden;
  color: #213550;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-page .ynout-sort-button__chevron { display: inline-flex; color: #78869a; transition: transform .18s ease; }
.catalog-page .ynout-sort-button[aria-expanded="true"] .ynout-sort-button__chevron { transform: rotate(180deg); }
.catalog-page .ynout-sort-panel {
  top: calc(100% + 7px);
  width: 260px;
  border-color: #dfe7f1;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 22px 48px -24px rgba(12,34,68,.3);
}
.catalog-page .ynout-sort-option {
  min-height: 39px;
  border-radius: 10px;
  padding: 8px 10px;
  color: #53647a;
  font-size: 12px;
  font-weight: 750;
}
.catalog-page .ynout-sort-option:hover,
.catalog-page .ynout-sort-option.is-active { background: #edf5ff; color: #0867f2; }

/* Cookie consent UI. It intentionally does not lock body scroll, so opening
 * preferences never changes the page width or makes the layout jump. */
.ynout-cookie-banner {
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(1080px, calc(100vw - 36px));
  max-width: 1080px;
  gap: 18px;
  border: 1px solid #dce5f0;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  padding: 16px 17px;
  box-shadow: 0 28px 70px -32px rgba(6,25,55,.42);
  color: #65758a;
  font-size: 13px;
}
.ynout-cookie-banner__copy { display: grid; max-width: 520px; gap: 3px; }
.ynout-cookie-banner strong { color: #0b1d36; font-size: 14px; font-weight: 850; }
.ynout-cookie-banner__copy span { line-height: 1.5; }
.ynout-cookie-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.ynout-cookie-actions a { margin-right: 2px; color: #0867f2; font-size: 12px; font-weight: 800; }
.ynout-cookie-actions button,
.ynout-cookie-button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  transition: border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.ynout-cookie-actions button { background: transparent; color: #23364f; }
.ynout-cookie-button--primary,
.ynout-cookie-actions .ynout-cookie-button--primary { border-color: #0867f2; background: #0867f2; color: #fff; }
.ynout-cookie-button--primary:hover { background: #075edc; transform: translateY(-1px); }
.ynout-cookie-button--ghost,
.ynout-cookie-actions .ynout-cookie-button--ghost { border-color: #dce5ef; background: #fff; color: #334860; }
.ynout-cookie-button--ghost:hover { border-color: #c8d7e9; background: #f7faff; }
.ynout-cookie-modal[hidden], .ynout-cookie-banner[hidden] { display: none !important; }
.ynout-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
}
.ynout-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(3,13,31,.55); backdrop-filter: blur(4px); }
.ynout-cookie-dialog {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid #dde6f0;
  border-radius: 22px;
  background: #fff;
  padding: 25px;
  box-shadow: 0 34px 90px -34px rgba(0,0,0,.48);
}
.ynout-cookie-dialog__close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e9f2;
  border-radius: 10px;
  background: #f9fbfd;
  color: #53647a;
}
.ynout-cookie-dialog__eyebrow { margin: 0 44px 5px 0; color: #0867f2; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ynout-cookie-dialog h2 { margin: 0 44px 0 0; color: #091b34; font-size: 24px; font-weight: 850; line-height: 1.1; letter-spacing: -.025em; }
.ynout-cookie-dialog__lead { max-width: 510px; margin: 9px 0 19px; color: #6a798e; font-size: 12.5px; line-height: 1.55; }
.ynout-cookie-pref {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 15px;
  margin-top: 9px;
  border: 1px solid #e2e9f2;
  border-radius: 14px;
  background: #fbfcfe;
  padding: 14px;
  cursor: pointer;
}
.ynout-cookie-pref.is-required { cursor: default; }
.ynout-cookie-pref > div { display: grid; gap: 4px; }
.ynout-cookie-pref strong { color: #1a2e48; font-size: 13px; font-weight: 850; }
.ynout-cookie-pref span { color: #76859a; font-size: 11px; line-height: 1.45; }
.ynout-cookie-required { display: inline-flex; min-height: 26px; align-items: center; border-radius: 999px; background: #edf8f2; padding: 0 9px; color: #278454 !important; font-size: 9.5px !important; font-weight: 800; white-space: nowrap; }
.ynout-cookie-pref input { position: absolute; right: 14px; width: 42px; height: 24px; opacity: 0; cursor: pointer; }
.ynout-cookie-switch { position: relative; display: block; width: 42px; height: 24px; border-radius: 999px; background: #ccd5e1; transition: background .16s ease; }
.ynout-cookie-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(19,42,75,.18); transition: transform .16s ease; }
.ynout-cookie-pref input:checked + .ynout-cookie-switch { background: #0867f2; }
.ynout-cookie-pref input:checked + .ynout-cookie-switch::after { transform: translateX(18px); }
.ynout-cookie-pref input:focus-visible + .ynout-cookie-switch { outline: 3px solid rgba(8,103,242,.18); outline-offset: 2px; }
.ynout-cookie-dialog__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.ynout-cookie-dialog__links a { color: #0867f2; font-size: 11px; font-weight: 800; }
.ynout-cookie-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7edf4; }

/* Legal pages generated by the theme. */
.yn-legal-document { color: #55677e; }
.yn-legal-intro { margin-bottom: 25px !important; color: #30445e; font-size: 15px; line-height: 1.7; }
.yn-legal-section { padding: 20px 0; border-top: 1px solid #e7edf4; }
.yn-legal-section:first-of-type { border-top: 0; padding-top: 0; }
.yn-legal-section h2 { margin: 0 0 10px !important; color: #0c203b; font-size: 19px !important; font-weight: 850 !important; line-height: 1.25; }
.yn-legal-section p { margin: 8px 0 !important; font-size: 13.5px; line-height: 1.72; }
.yn-legal-updated { margin-top: 22px !important; color: #8a97a8; font-size: 11px !important; }

@media (max-width: 767px) {
  .yn-home-page .yn-home-hero { --yn-home-hero-gutter: 22px; }
  .yn-home-page .yn-home-hero__copy { padding-left: var(--yn-home-hero-gutter); padding-right: 20px; }
  .yn-home-page .yn-home-hero__controls { left: var(--yn-home-hero-gutter); }
  .yn-home-page .yn-home-categories-panel { padding: 0; }
  .yn-home-page .yn-home-commerce-zone { margin-top: 32px; padding: 0; }
  .yn-home-page .yn-home-products-panel { padding: 0; }
  .yn-home-page .yn-home-news-panel { border-radius: 21px; padding: 16px; }
  .yn-home-page .yn-home-news-panel .yn-home-section-head { flex-direction: row; align-items: center; }
  .yn-home-page .yn-home-news-panel .yn-home-section-head h2 { font-size: 24px; }
  .yn-home-page .yn-home-news-panel .ynout-news-card--featured .ynout-news-card__media { min-height: 220px; }
  .catalog-page .ynout-sort-button { min-width: 174px; min-height: 42px; }
  .catalog-page .ynout-sort-button__copy small { display: none; }
  .catalog-page .ynout-sort-button__copy strong { max-width: 112px; font-size: 11px; }
  .catalog-page .ynout-sort-panel { width: min(260px, calc(100vw - 32px)); }
  .ynout-cookie-banner { align-items: stretch; width: calc(100vw - 24px); left: 12px; right: 12px; bottom: 12px; padding: 14px; }
  .ynout-cookie-actions { justify-content: flex-start; }
  .ynout-cookie-actions a { width: 100%; margin-bottom: 2px; }
  .ynout-cookie-actions .ynout-cookie-button--primary { flex: 1 1 100%; }
  .ynout-cookie-dialog { padding: 20px 16px 17px; border-radius: 18px; }
  .ynout-cookie-dialog h2 { font-size: 21px; }
  .ynout-cookie-pref { padding: 13px 12px; }
  .ynout-cookie-dialog__actions { flex-direction: column-reverse; }
  .ynout-cookie-dialog__actions .ynout-cookie-button { width: 100%; }
}


/* ============================================================
 * 2.3.27 responsive polish: compact header actions, safe catalog
 * toolbar wrapping, and readable product-card CTA in narrow cards.
 * ============================================================ */
.yn-main-header__actions { gap: 0; }
.yn-main-header__action {
  width: 58px;
  min-width: 58px;
  min-height: 50px;
  gap: 3px;
  padding: 4px 3px;
}
.yn-main-header__action-icon { width: 28px; height: 28px; }
.yn-main-header__action-icon > svg { width: 24px; height: 24px; }
.yn-main-header__action-label { font-size: 9.5px; font-weight: 750; }

@media (max-width: 1199px) and (min-width: 1024px) {
  .yn-main-header__inner { gap: 9px; }
  .yn-main-header__action { width: 46px; min-width: 46px; min-height: 48px; padding: 3px; }
  .yn-main-header__action-label { display: none; }
}

/* Let the catalog controls wrap instead of colliding at tablet/mobile widths. */
@media (max-width: 767px) {
  .catalog-page .yn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 7px;
    padding: 7px;
  }
  .catalog-page .yn-toolbar > div:first-child {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .catalog-page .yn-result-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog-page .yn-toolbar-right {
    display: flex;
    width: 100%;
    min-width: 0;
  }
  .catalog-page .ynout-sort-form {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .catalog-page .ynout-sort-button {
    width: 100%;
    min-width: 0;
  }
  .catalog-page .ynout-sort-button__copy strong {
    max-width: none;
  }
}
@media (max-width: 379px) {
  .catalog-page .yn-mobile-filter { padding-inline: 10px; font-size: 12px; }
  .catalog-page .yn-result-count { font-size: 11px; }
  .catalog-page .ynout-sort-button { padding-inline: 9px; }
}

/* Product cards may be two-across on phones (home/related sections). Use the
 * actual card width, not viewport width: under 210px the primary CTA gets its
 * own row so “Подробнее” can never be crushed by the two icon buttons. */
.ynout-product-card { container-type: inline-size; }
@container (max-width: 210px) {
  .ynout-product-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ynout-product-card__actions > a {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11.5px;
  }
  .ynout-product-card__actions > a svg { display: none; }
  .ynout-product-card__actions > button {
    width: 100% !important;
    min-width: 0;
    height: 36px;
  }
}

/* ============================================================
 * 2.3.29 auth UX: one Account action in the header; login and
 * registration are offered as two clear tabs inside the same popup.
 * ============================================================ */
.ynout-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: -8px 0 22px;
  padding: 4px;
  border: 1px solid rgb(var(--color-primary) / .06);
  border-radius: 14px;
  background: rgb(var(--color-background));
}
.ynout-auth-tab {
  min-height: 42px;
  border-radius: 11px;
  padding: 8px 12px;
  color: rgb(var(--color-primary) / .55);
  font-size: 14px;
  font-weight: 800;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ynout-auth-tab:hover { color: rgb(var(--color-accent)); }
.ynout-auth-tab.is-active {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-accent));
  box-shadow: 0 3px 12px rgba(11, 27, 59, .08);
}

/* Guest header is now Account + Compare + Wishlist, so no extra registration
 * icon needs to be squeezed into the phone header. */
@media (max-width: 767px) {
  .yn-main-header__inner { gap: 5px; }
  .yn-main-header__menu { width: 38px; height: 38px; flex-basis: 38px; }
  .yn-main-header__brand .ynout-brand-logo { width: 98px; }
  .yn-main-header__actions { gap: 0; }
  .yn-main-header__action { width: 38px; min-width: 38px; min-height: 44px; padding: 3px 1px; }
  .yn-main-header__action-icon { width: 26px; height: 26px; }
  .yn-main-header__action-icon > svg { width: 22px; height: 22px; }
}
@media (max-width: 359px) {
  .yn-main-header__brand .ynout-brand-logo { width: 92px; }
  .yn-main-header__action { width: 36px; min-width: 36px; }
}


/* ============================================================
 * 2.3.31 auth + mobile comparison UX / free horizontal compare scroll.
 * ============================================================ */
.ynout-auth-switch-button {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  border: 1px solid rgb(var(--color-accent) / .18);
  border-radius: 14px;
  background: rgb(var(--color-accent) / .055);
  color: rgb(var(--color-primary) / .62);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.ynout-auth-switch-button strong { color: rgb(var(--color-accent)); font-weight: 900; }
.ynout-auth-switch-button:hover {
  border-color: rgb(var(--color-accent) / .38);
  background: rgb(var(--color-accent) / .09);
  color: rgb(var(--color-primary));
}
.ynout-auth-switch-button svg { flex: 0 0 auto; color: rgb(var(--color-accent)); }

.ynout-compare-controls { min-width: 0; }
.ynout-compare-category-filter {
  display: grid;
  min-width: 210px;
  gap: 5px;
}
.ynout-compare-category-filter > span {
  padding-left: 2px;
  color: rgb(var(--color-primary) / .52);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.ynout-compare-category-filter select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgb(var(--color-primary) / .12);
  border-radius: 12px;
  background: #fff;
  padding: 0 36px 0 12px;
  color: rgb(var(--color-primary));
  font-size: 13px;
  font-weight: 800;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ynout-compare-category-filter select:focus {
  border-color: rgb(var(--color-accent) / .55);
  box-shadow: 0 0 0 3px rgb(var(--color-accent) / .10);
}
.ynout-compare-table [hidden] { display: none !important; }
.ynout-compare-mobile-hint { display: none; }
.ynout-compare-scroll {
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* Never let Account / Compare / Wishlist push the header outside 320px. */
  .yn-main-header__inner { min-width: 0; }
  .yn-main-header__brand { flex: 1 1 auto; min-width: 72px; overflow: hidden; }
  .yn-main-header__brand .ynout-brand-logo { max-width: 100%; }
  .yn-main-header__actions { flex: 0 0 auto; min-width: 0; }

  .ynout-compare-page { padding-left: 12px; padding-right: 12px; }
  .ynout-compare-page > .mb-6 { margin-bottom: 12px; }
  .ynout-compare-controls { width: 100%; }
  .ynout-compare-category-filter { width: 100%; min-width: 0; }
  .ynout-compare-category-filter select { min-height: 46px; font-size: 14px; }
  .ynout-compare-diff-button { width: 100%; min-height: 46px; justify-content: space-between; }
  .ynout-compare-mobile-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 9px;
    color: rgb(var(--color-primary) / .52);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
  }
  .ynout-compare-mobile-hint svg { flex: 0 0 auto; color: rgb(var(--color-accent)); }
  .ynout-compare-shell { border-radius: 14px; }
  .ynout-compare-scroll {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    /* Free finger scrolling: do not snap back to the nearest product column. */
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ynout-compare-table {
    width: max-content !important;
    min-width: 100%;
    table-layout: fixed;
  }
  .ynout-compare-corner {
    left: 0;
    top: auto !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding: 10px 8px !important;
    white-space: normal;
  }
  .ynout-compare-product {
    position: static !important;
    top: auto !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    padding: 10px !important;
    scroll-snap-align: none;
  }
  .ynout-compare-product .mb-3.flex.h-24 { height: 78px; margin-bottom: 8px; }
  .ynout-compare-product h2 { min-height: 36px; margin-bottom: 6px; font-size: 11px; line-height: 1.18; }
  .ynout-compare-product .absolute.-right-1.-top-1 { right: 0; top: 0; width: 32px; height: 32px; }
  .ynout-compare-table tbody td:first-child {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding: 10px 8px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    background: rgba(255,255,255,.98);
  }
  .ynout-compare-table tbody td:not(:first-child) {
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    padding: 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
  .ynout-compare-table tbody tr:nth-child(even) td:first-child { background: #fbfcfe; }
  .ynout-compare-table th,
  .ynout-compare-table td { font-size: 11px; }
}

@media (max-width: 359px) {
  .yn-main-header__menu { width: 36px; height: 36px; flex-basis: 36px; }
  .yn-main-header__action { width: 35px; min-width: 35px; }
  .yn-main-header__brand .ynout-brand-logo { width: 88px; }
  .ynout-compare-corner,
  .ynout-compare-table tbody td:first-child {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }
  .ynout-compare-product,
  .ynout-compare-table tbody td:not(:first-child) {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
  }
}


/* 2.3.37 — page colour identity is limited strictly to the promo sections. */
.yn-info-promo--buyback { background:linear-gradient(135deg,#082d27 0%,#0b6c4b 54%,#13a66c 100%); box-shadow:0 22px 55px -38px rgba(8,118,78,.75); }
.yn-info-promo--buyback .yn-info-promo__kicker { color:#a9f3cf; }
.yn-info-promo--buyback .yn-info-promo__items svg { color:#b9f6d7; }
.yn-info-promo--buyback .yn-info-promo__button { color:#08764e; }
.yn-info-promo--buyback .yn-info-promo__button:hover { background:#effdf7; color:#075f40; }
.yn-info-promo--buyback .yn-info-promo__orb--two { background:rgba(135,255,197,.13); }

.yn-info-promo--trade-in { background:linear-gradient(135deg,#17143d 0%,#4730a6 50%,#7755ee 100%); box-shadow:0 22px 55px -38px rgba(82,49,207,.78); }
.yn-info-promo--trade-in .yn-info-promo__kicker { color:#d7ceff; }
.yn-info-promo--trade-in .yn-info-promo__items svg { color:#d8d0ff; }
.yn-info-promo--trade-in .yn-info-promo__button { color:#5231cf; }
.yn-info-promo--trade-in .yn-info-promo__button:hover { background:#f6f3ff; color:#4326b7; }
.yn-info-promo--trade-in .yn-info-promo__orb--two { background:rgba(145,180,255,.18); }