@import 'whatsapp.css?v.4.3';


/* Global theme and variables */

:root{

	--c-cyan:		#00BCD4;
	--c-magenta:	#E91E63;
	--c-yellow:		#FFC107;
	--c-black:		#111111;
	--c-primary:	#49006e;
	
	--brand-50:	 	#E6FFFA;
	--brand-100:	#C7FFF4;
	--brand-200:	#99F4E9;
	--brand-300:	#63E7DB;
	--brand-400:	#2FD6C9;
	--brand-500:	#1ED4C6;
	--brand-600:	#00B3A6;
	--brand-700:	#009B90;
	--brand-800:	#007E75;
	--brand-900:	#005E59;
	--brand:		var(--brand-500);
	--brand-rgb:	0,199,183;
	
	--accent-warm-400:	#FF8A33;
	--accent-warm-500:	#FF6A00;
	--accent-warm-600:	#E85E00;
	--accent-warm-700:	#C44F00;
	
	--c-primary:	var(--brand-800);
	--c-accent:		var(--brand-600);
	--orange:		var(--brand);
	--focus:		var(--brand-600);
	
	--bg:			#ffffff;
	--fg:			#111111;
	--focus:		var(--brand-600);

	--container-x:	7rem;
	--edge-y:		3.5rem;
	--section-gap:	6rem;

	--header-pad-y:	3.5rem;
	--header-pad-y-topbar: 1rem;

	--control-h:	3.6rem;
	--search-w:		21rem;

	--btn-diam:		6rem;
	--icon-size:	2.4rem;
	--logo-h:		4.5rem;
	--hero-brand-w:	23vw;

	--gap-xxs:		.4rem;
	--gap-xs:		.6rem;
	--gap-s:		1rem;
	--gap-m:		1.6rem;
	--gap-l:		2.4rem;
	--gap-xl:		3.5rem;
	--gap-2xl:		7rem;

	--r-0:			0;
	--r-s:			.5rem;
	--r-m:			.8rem;
	--r-l:			1rem;
	--r-xl:			1.6rem;
	--r-pill:		999rem;

	--ease:			cubic-bezier(.2,.7,.2,1);
	--t-fast:		.18s;
	--t-med:		.35s;
	--t-slow:		.55s;
	--t-xl:			.9s;

	--shadow:		0 10px 30px rgba(0,0,0,.14);
	--shadow-accent:0 10px 30px rgba(var(--brand-rgb), .32);

	--catalog-gap:	clamp(8px,1vw,16px);
	--catalog-list-offset: 14rem;

	--section-pad-top-lg: 14rem;
	--section-pad-y-s: 2rem;
	
	--tip-bg:		#fff;
	--tip-fg:		#111;
	--tip-pad-y:	.5rem;
	--tip-pad-x:	.8rem;
	--tip-radius:	.6rem;
	--tip-gap:		.7rem;
	--tip-shadow:	0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	--tip-ease:		cubic-bezier(.2,.7,.2,1);
	
}


/* Basic Typography and Reset */

*,*::before,*::after {
	box-sizing:border-box
}

.ui-noselect :is(
	.site-logo,
	.site-nav a,
	.site-actions a,
	.nav-catalog,
	.nav-search button,
	.btn,
	.btn-cta,
	.hero-nav button,
	.fab-call
) {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.ui-noselect :is(img, svg) {
	-webkit-user-drag: none;
	user-select: none;
}

.u-no-select,
.u-no-select * {
	-webkit-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
}

html {
	font-size:62.5%;
	-ms-scroll-chaining:none;
	overscroll-behavior:none;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent
}

@media (prefers-reduced-motion:reduce) {
	*,:before,:after {
	animation:none!important;
	transition:none!important;
	scroll-behavior:auto!important
	}
}

body {
	margin:0;
	min-height:100%;
	line-height:1.5;
	background:var(--bg);
	color:var(--fg);
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-family:"Mont",system-ui,-apple-system,Arial;
	font-weight:400;
	font-size:1.6rem
}

h1,h2,h3,h4,h5,h6,p,figure,dl,dd {
	margin:0
}

ul,ol {
	margin:0;
	padding:0;
	list-style:none
}

img,svg,video,canvas,iframe {
	display:block;
	max-width:100%;
	height:auto
}

table {
	border-collapse:collapse;
	border-spacing:0
}

a {
	text-decoration:none;
	color:inherit;
	transition:color .5s ease;
}

a:hover,
a:focus-visible {
	color:var(--orange);
}

button,input,select,textarea {
	font:inherit;
	color:inherit;
	margin:0;
	background:none;
	border:0
}

button {
	cursor:pointer
}

:focus-visible {
	outline:0.2rem solid var(--orange);
	outline-offset:0.2rem
}

::selection {
	background:var(--orange);
	color:#fff
}

::-webkit-scrollbar {
	width:1.2rem;
	height:1.2rem;
}

::-webkit-scrollbar-track {
	background:transparent
}

::-webkit-scrollbar-thumb {
	background: var(--orange);
	border-radius:1rem;
	border:0.3rem solid transparent;
	background-clip:content-box
}

::-webkit-scrollbar-corner {
	background:transparent
}

:root {
	scrollbar-width:thin;
	scrollbar-color:var(--c-primary) transparent
}

h2 {
	font-size: 4rem;
	letter-spacing: -0.25rem;
}

@font-face{
	font-family:"Mont";
	src:url("font/Mont-Regular.woff2") format("woff2");
	font-weight:400;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-RegularItalic.woff2") format("woff2");
	font-weight:400;
	font-style:italic;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-SemiBold.woff2") format("woff2");
	font-weight:600;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-SemiBoldItalic.woff2") format("woff2");
	font-weight:600;
	font-style:italic;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-Bold.woff2") format("woff2");
	font-weight:700;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-BoldItalic.woff2") format("woff2");
	font-weight:700;
	font-style:italic;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-Heavy.woff2") format("woff2");
	font-weight:800;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Mont";
	src:url("font/Mont-Black.woff2") format("woff2");
	font-weight:900;
	font-style:normal;
	font-display:swap
}

@font-face {
	font-family:"Icon";
	src:url("font/icon.woff") format("woff");
	font-weight:400;
	font-style:normal;
	font-display:block
}

[class*=" icon-"],
[class^=icon-] {
	font-family:"icon"!important;
	speak:never;
	font-feature-settings:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:400;
	line-height:1;
	text-transform:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

strong,b {
	font-weight:600
}


/* Buttons and CTAs */

.sticky-whatsapp a {
	font-size: 2.5rem;
		right: 7rem;
		bottom: 3.5rem;
}


.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:1.7rem 2rem;
	border-radius:3rem;
	font-weight:600;
	line-height:1;
	width:15rem;
	transition:background .2s ease, transform .12s ease;
}

.btn-orange {
	background:var(--orange);
	color:#fff;
}

.btn-orange:hover,
.btn-orange:focus-visible {
	color:#fff;
	background: var(--brand-600) !important;
}

.btn-orange:active {
	transform:translateY(1px);
}

.btn-primary{
	--bg: var(--brand-500);
	--bg-hover: var(--brand-600);
	--bg-active: var(--brand-700);
	--ring: rgba(var(--brand-rgb), .45);

	display:inline-flex; align-items:center; justify-content:center;
	padding:1.6rem 2.2rem; border-radius:999rem;
	background:var(--bg); color:#fff; font-weight:700;
	box-shadow: 0 6px 18px var(--shadow-accent);
	transition: transform .08s ease, background .2s ease, box-shadow .25s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible{ background:var(--bg-hover); box-shadow:0 10px 26px var(--shadow-accent); }
.btn-primary:active{ background:var(--bg-active); transform: translateY(1px); }
.btn-primary:focus-visible{ outline: 2px solid var(--ring); outline-offset:2px; }

.btn-warm{
	--w: var(--accent-warm-500);
	--w-hover: var(--accent-warm-600);
	--w-active: var(--accent-warm-700);
	background: var(--w); color:#fff; border-radius:999rem;
	padding:1.6rem 2.2rem; font-weight:700;
	box-shadow: 0 8px 22px rgba(255,106,0,.28);
	transition: transform .08s ease, background .2s ease, box-shadow .25s ease;
}
.btn-warm:hover,
.btn-warm:focus-visible{ background: var(--w-hover); box-shadow:0 10px 26px rgba(255,106,0,.34); }
.btn-warm:active{ background: var(--w-active); transform: translateY(1px); }

.bg-brand-gradient{
	background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
}


/* HERO Slider (by Quor.Space) */

.hero {
	--slide-speed: 1s;
	--slide-ease: cubic-bezier(.2,.7,.2,1);
	--slide-dim: .25;
	--slide-shadow: 0 6rem 16rem rgba(0,0,0,.8);
	position:relative;
	width:100%;
	height:85svh;
	min-height:60rem;
	overflow:hidden;
	background:#000;
	--i:0;
	touch-action: pan-y;
}

.hero__track {
	isolation: isolate;
	position:absolute;
	inset:0;
	display:flex;
	transform:translate3d(calc(var(--i)*-100%),0,0);
	transition: transform var(--slide-speed) var(--slide-ease);
	will-change:transform;
}

.hero__track > figure {
	position:relative;
	flex:0 0 100%;
	margin:0;
	background:#000;
	--k:0;
	z-index: 1;
	transition:
		opacity			var(--slide-speed) var(--slide-ease),
		filter			 var(--slide-speed) var(--slide-ease),
		box-shadow	 var(--slide-speed) var(--slide-ease);
}

.hero .hero__track figure:not(.is-active) {
	opacity: var(--slide-dim);
	filter: brightness(.6);
	box-shadow: none;
	z-index: 1;
}

.hero .hero__track figure.is-active {
	opacity: 1;
	filter: brightness(1);
	box-shadow: var(--slide-shadow);
	z-index: 3;
}

.hero__track > figure > video {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	background:#000;
	transform:translate3d(calc((var(--k)-var(--i))*12%),0,0);
	transition: transform var(--slide-speed) var(--slide-ease);
	will-change:transform;
}

.hero__track>figure::before {
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.4);
	z-index:1;
}

.hero-brand {
	position:absolute;
	left: var(--container-x);
	bottom: var(--edge-y);
	width: var(--hero-brand-w);
	z-index:2;
}

.hero-brand img {
	width:100%;
	height:auto;
	display:block;
}


.hero-nav{
	position:absolute;
	right: var(--container-x);
	bottom: var(--edge-y);
	display:flex; align-items:center;
	gap: var(--gap-l);
	z-index:2;
}

.hero-nav button{
	width: var(--btn-diam);
	height: var(--btn-diam);
	border-radius: var(--r-pill);
	border:1px solid var(--orange);
	background: rgba(var(--brand-rgb), .90);
	transition: background .2s ease;
}

.hero-nav button:hover,
.hero-nav button:focus-visible {
	background: rgba(var(--brand-rgb), .60);
}

.hero-prev::before,
.hero-next::before {
	font-family:"Icon";
	font-size: var(--icon-size);
	font-weight: 700;
}

.hero-prev::before {
	content:"";
}
.hero-next::before {
	content:"";
}

.hero__track > figure > figcaption {
	position:absolute;
	font-size:1.6rem;
	top:54%;
	left:60%;
	right:var(--container-x);
	transform:translateY(-50%);
	z-index:2;
	color:#fff;
	display:flex;
	flex-direction:column;
	gap:1.6rem;
	text-align:left;
}

.hero-caption h2 {
	font-weight:700;
	font-size:5.5rem;
	line-height:1;
	letter-spacing:-0.2rem;
}

.hero-caption p {
	margin-bottom: 1.1rem;
	font-size:clamp(1.6rem,1vw + .6rem,2rem);
	opacity:.92;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	max-width:42rem;
}

.hero__track > figure .hero-caption {
		opacity: 0;
		transform: translate(3rem, -50%);
		transition: opacity .55s ease, transform .95s ease;
}

.hero[data-dir="prev"] .hero__track > figure .hero-caption {
		transform: translate(-3rem, -50%);
}

.hero__track > figure.is-active .hero-caption,
.hero[data-dir="prev"] .hero__track > figure.is-active .hero-caption,
.hero[data-dir="next"] .hero__track > figure.is-active .hero-caption {
		opacity: 1;
		transform: translate(0, -50%);
		transition-delay: .15s;
}

.hero .btn-cta {
	--btn-h: 4.8rem;
	--pad-x: 2.0rem;
	--dot: .9rem;
	--pulse-shift: 0.5rem;
	--pulse-speed: 1.4s;
	--blob-w: 1rem;
	--blob-h: 1.2rem;
	--blob-r: .6rem;
	position: relative;
	display: inline-flex;
	line-height: var(--btn-h);
	width: 20rem;
	height: var(--btn-h);
	padding: 0 calc(var(--pad-x) + 1.4rem) 0 calc(var(--pad-x) + var(--dot) + .8rem);
	border-radius: var(--r-pill);
	border: 1px solid rgba(255,255,255,.3);
	background: rgba(255,255,255,.08);
	color:#fff;
	overflow:hidden;
	isolation:isolate;
	backdrop-filter: saturate(123%) blur(5px);
	transition: transform .08s ease;
	cursor: pointer;
}
.hero .btn-cta:active {
	transform: translateY(1px);
}

.hero .btn-cta .label {
	position: relative;
	padding: 0 1.3rem;
	z-index: 2;
	white-space: nowrap;
	font-weight: 600;
	transition: transform .55s cubic-bezier(.2,.7,.2,1);
	cursor: pointer;
}

.hero .btn-cta::before {
	content:"";
	position:absolute;
	top:50%;
	left: calc(var(--pad-x) + .6rem);
	width: var(--dot);
	height: var(--dot);
	transform: translateY(-50%) scale(1);
	background: var(--orange);
	border-radius: 50%;
	z-index:1;
}

.hero .btn-cta.is-in .label {
	transform: translateX(-.6rem);
}
.hero .btn-cta.is-out .label {
	transform: translateX(0);
}

.hero .btn-cta.is-in::before {
	animation:
		hero-cta-morph 450ms cubic-bezier(.2,.7,.2,1) forwards;
}

.hero .btn-cta.is-out::before {
	animation:
		hero-cta-morph 450ms cubic-bezier(.2,.7,.2,1) reverse forwards;
}

.hero .btn-cta.is-in.is-pulse::before {
	animation:
		hero-cta-morph 450ms cubic-bezier(.2,.7,.2,1) forwards,
		ctaPulse var(--pulse-speed) ease-in-out infinite 450ms;
}

@keyframes ctaPulse {
	0% {
		width: var(--blob-w);
		height: var(--blob-h);
		border-radius: 0 var(--blob-r) var(--blob-r) 0;
		transform: translate(-100%,-50%) scale(1);
	}
	50% {
		width: var(--blob-w);
		height: var(--blob-h);
		border-radius: 0 var(--blob-r) var(--blob-r) 0;
		transform: translate(calc(-100% + var(--pulse-shift)),-50%) scale(1);
	}
	100% {
		width: var(--blob-w);
		height: var(--blob-h);
		border-radius: 0 var(--blob-r) var(--blob-r) 0;
		transform: translate(-100%,-50%) scale(1);
	}
}

@keyframes hero-cta-morph {
	0% {
		left: calc(var(--pad-x) + .6rem);
		width: var(--dot);
		height: var(--dot);
		border-radius: 50%;
		transform: translateY(-50%) scale(1);
	}
	35% {
		left: calc(var(--pad-x));
		border-radius: var(--r-pill);
		transform: translateY(-50%) scale(40);
	}
	75% {
		transform: translateY(-50%) scale(40);
	}
	100% {
		left: calc(100% - var(--pad-x) - var(--blob-w) - .2rem);
		width: var(--blob-w);
		height: var(--blob-h);
		transform: translate(-100%,-50%) scale(1);
		border-radius: 0 var(--blob-r) var(--blob-r) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero .btn-cta {
		transition: none;
	}
	.hero .btn-cta::before {
		display:none;
	}
	.hero .btn-cta:hover {
		background: var(--orange); color:#fff;
	}
}


/* Header / Search / Catalog Menu */

header{
	position:absolute;
	top:0; left:0; right:0;
	z-index:10;
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:1.2rem;
	padding: var(--header-pad-y) var(--container-x);
	color:#fff;
	transform:translateY(0);
	transition:
		transform .45s var(--ease),
		background .3s ease,
		color .2s ease;
}

.site-logo	{
	display: none;
}

.site-logo img {
	position:fixed;
	height: var(--logo-h);
	width:auto;
	top:8px; left:50%;
	margin-left:-60px;
}

.site-nav	{
	display: flex; align-items: center; gap: 1.6rem;
}

.nav-catalog{
	position:absolute;
	display:inline-flex;
	align-items:center;
	gap:.8rem;
	height:4rem;
	padding:0 1.7rem 0 1.4rem;
	border-radius:var(--r-pill);
	background:
		radial-gradient(
			120% 120% at 30% 20%,
			var(--brand-400) 0%,
			var(--brand-500) 48%,
			var(--brand-700) 78%
		),
		linear-gradient(
			180deg,
			var(--brand-500) 0%,
			var(--brand-700) 100%
		);
	color:#fff;
	font-weight:700;
	white-space:nowrap;
	z-index:11;
	line-height:1;
	box-shadow:
		0 14px 30px rgba(var(--brand-rgb), .32),
		0 4px 8px rgba(0,0,0,.15);
	transition:
		transform .18s ease,
		box-shadow .25s ease,
		background .2s ease,
		outline-color .2s ease;
	cursor:pointer;
	outline:3px solid transparent;
	outline-offset:2px;
}
.nav-catalog:hover,
.nav-catalog:focus-visible{
	box-shadow:
		0 20px 40px rgba(var(--brand-rgb), .42),
		0 6px 14px rgba(0,0,0,.18);
	background:
		radial-gradient(
			120% 120% at 30% 20%,
			var(--brand-300) 0%,
			var(--brand-400) 48%,
			var(--brand-700) 78%
		),
		linear-gradient(
			180deg,
			var(--brand-400) 0%,
			var(--brand-700) 100%
		);
	outline-color:rgba(var(--brand-rgb), .35);
}
.nav-catalog span {
	padding-top: .2rem;
	letter-spacing: -.05rem;
}
.nav-hamb {
	position:relative;
	width:1.6rem;
	height:1.2rem;
	display:inline-block;
	transition:transform .6s ease;
}
.nav-hamb i {
	position:absolute;
	left:0; right:0;
	height:.2rem;
	background:currentColor;
	border-radius:.2rem;
	transition:
	top .3s ease .6s,
	transform .3s ease .6s,
	opacity .3s ease .6s;
}
.nav-hamb i:first-child {
	top:.2rem;
}
.nav-hamb i:last-child {
	top:.8rem;
}
.nav-catalog:active{
	transform:scale(.96);
}
.nav-catalog.is-active{
	background:
		radial-gradient(
			120% 120% at 30% 20%,
			var(--brand-600) 0%,
			var(--brand-700) 48%,
			var(--brand-800) 78%
		),
		linear-gradient(
			180deg,
			var(--brand-700) 0%,
			var(--brand-800) 100%
		);
	box-shadow:
		0 10px 24px rgba(var(--brand-rgb), .4),
		0 2px 6px rgba(0,0,0,.4);
}

.nav-catalog.is-active .nav-hamb {
	transform:rotate(720deg);
}
.nav-catalog.is-active .nav-hamb i:first-child {
	top:.5rem; transform:rotate(45deg);
}
.nav-catalog.is-active .nav-hamb i:last-child {
	top:.5rem; transform:rotate(-45deg);
}
.nav-catalog.is-active .nav-hamb	{
	transform: rotate(720deg);
}
.nav-catalog.is-active .nav-hamb i:first-child	{
	top: .45rem;
}
.nav-catalog.is-active .nav-hamb i:last-child	 {
	top: .45rem;
}

.nav-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 4rem;
	border-radius: var(--r-pill);
	margin-left: 0;
	padding-left: 13rem;
	border: 1px solid rgba(255,255,255,.35);
	background: rgba(255,255,255,.10);
	backdrop-filter: saturate(123%) blur(5px);
	transition: background 1s ease;
}

.nav-search input {
	width: var(--search-w);
	height: 100%;
	border: 0; outline: none;
	background: transparent;
	color: inherit;
	padding: 0 3.2rem 0 1.2rem;
	transition: width .25s ease, opacity .25s ease;
}
.nav-search button {
	position: absolute;
	right: .8rem;
	top: .4rem;
	bottom: .4rem;
	width: 2.8rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.nav-search .search-hint {
	position: absolute; left: 14rem; top: 55%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #fff; /* var(--brand-700) !important */
	opacity: .9;
	font-size: 1.45rem;
	transition: transform .18s ease, opacity .18s ease;
}
.nav-search.is-open .search-hint,
.nav-search input:focus + button ~ .search-hint {
	transform: translateY(-1.4rem);
	opacity: 0;
}

.site-nav > a	{
	padding: 0 .8rem;
	border-radius: 0;
}

.site-nav > a svg {
	display: inline-block;
	position: relative;
	top: 5px;
	margin-right: 4px;
	width: 20px;
	height: 20px;
}

.site-actions	{
	display: flex; align-items: center; gap: 1.7rem; font-size: 2.5rem;
}
.site-actions a	{
	display: inline-flex; justify-content: center; align-items: center; width: 4rem; height: 4rem;
}

body.is-topbar header {
	position:fixed;
	top: 10px;
	left: 6rem;
	right: 6rem;
	padding: var(--header-pad-y-topbar) 1rem !important;
	background:rgba(255,255,255,.8);
	backdrop-filter:blur(10px) saturate(120%);
	transform:translateY(-120%);
	border-radius: 15px;
	box-shadow: 0 0 29px 5px rgba(0, 0, 0, .15);
}

body.is-topbar:not(.is-topbar-show):not(.is-topbar-armed) header{
	transform: translateY(-120%) !important;
	opacity: 0;
	pointer-events: none;
	transition: none !important;
}

body.is-topbar.is-topbar-show header{
	transform: translateY(0) !important;
	opacity: 1;
	pointer-events: auto;

	transition:
		transform .45s var(--ease),
		background .3s ease,
		color .2s ease,
		opacity .3s ease;
}
body.is-topbar.is-topbar-armed:not(.is-topbar-show) header{
	transform: translateY(-120%) !important;
	opacity: 0;
	pointer-events: none;

	transition:
		transform .45s var(--ease),
		background .3s ease,
		color .2s ease,
		opacity .3s ease;
}

body.is-topbar header .site-logo	{
	display: block;
}
body.is-topbar header .nav-search {
	color: #000;
	border-color: #fff;
	background: rgba(255,255,255,.8);
}
body.is-topbar header .nav-catalog {
	background: var(--orange);
	color: #fff;
}
body.is-topbar .site-actions {
	gap: 1rem;
	font-size: 2.4rem;
}
body.is-topbar .site-nav > a {
	display: none;
}

body.is-topbar .nav-search .search-hint,
body.is-topbar .nav-search button,
body.is-topbar .site-actions {
	color: var(--brand-700);
}


body.is-catalog {
	overflow: hidden;
}

header {
	z-index: 100;
}

.catalog {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: var(--edge-y) var(--container-x);
	padding-top: calc(var(--edge-y) + var(--header-h,0px));
	background: #000;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 50;
	transition: opacity var(--t-med) ease;
	overflow: hidden;
	--mx: 50%;
	--my: 50%;
}
.catalog::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at var(--mx) var(--my),
			rgba(var(--brand-rgb), .55) 0%,
			rgba(var(--brand-rgb), .15) 30%,
			rgba(0,0,0,0) 60%
		),
		radial-gradient(
			120% 120% at 20% 20%,
			rgba(var(--brand-rgb), .18) 0%,
			rgba(0,0,0,0) 70%
		),
		radial-gradient(
			120% 120% at 80% 80%,
			rgba(255,140,0,.12) 0%,
			rgba(0,0,0,0) 70%
		),
		radial-gradient(
			100% 100% at 50% 50%,
			rgba(0,0,0,.6) 0%,
			rgba(0,0,0,.9) 70%
		);
	filter: blur(60px);
	mix-blend-mode: screen;
	opacity: .6;
	pointer-events: none;
	transition: opacity .4s ease;
}

body.is-catalog .catalog::before {
	opacity: .8;
}

body.is-catalog .catalog {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.is-catalog header {
	color: #fff;
	background: transparent;
	backdrop-filter: none;
}

.catalog-left {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

.catalog-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.catalog-list {
	width: 100%;
	max-width: 520px;
	margin-left: var(--catalog-list-offset);
}

.catalog-list li {
	overflow: hidden;
	font-size: clamp(2.2rem, 2.6vw, 4rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.45;
}

.catalog-list li + li {
	margin-top: clamp(10px, 1.2vh, 18px);
}

.catalog-list a {
	display: inline-block;
	transform: translateY(100%);
	opacity: 0;
	letter-spacing: -0.15rem;
	transition:
		transform .5s cubic-bezier(.2,.7,.2,1),
		opacity .5s,
		letter-spacing .28s ease;
	will-change: transform;
}

body.is-catalog .catalog-list li:nth-child(1) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .05s;
}
body.is-catalog .catalog-list li:nth-child(2) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .10s;
}
body.is-catalog .catalog-list li:nth-child(3) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .15s;
}
body.is-catalog .catalog-list li:nth-child(4) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .20s;
}
body.is-catalog .catalog-list li:nth-child(5) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .25s;
}
body.is-catalog .catalog-list li:nth-child(6) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .30s;
}
body.is-catalog .catalog-list li:nth-child(7) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .35s;
}
body.is-catalog .catalog-list li:nth-child(8) a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .40s;
}

body.is-catalog .catalog-list a:hover,
body.is-catalog .catalog-list a:focus-visible {
	transform: translate(.5rem, 0) !important;
	letter-spacing: -.1rem;
	color: var(--brand-200);
}

.catalog-list a sup {
	opacity: .6;
	font-weight: 400;
	font-size: .35em;
}

#catalogTiles {
	--cols: 7;
	--rows: 4;
	--gap: .5rem;
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	grid-template-rows: repeat(var(--rows), 1fr);
	gap: var(--gap);
	width: 100%;
	height: calc(100% * var(--rows) / var(--cols));
	max-height: 70vh;
	margin: 0;
}

#catalogTiles .tile {
	aspect-ratio: 1 / 1;
	width: 100%;
	background: var(--orange);
	transform: translateZ(0) scale(1);
	transition:
		transform .55s cubic-bezier(.2,.7,.2,1),
		opacity .55s cubic-bezier(.2,.7,.2,1),
		filter .55s ease;
	will-change: transform, opacity, filter;
}

#catalogTiles .tile.off {
	opacity: 0;
	transform: translateZ(0) scale(.78) rotate(.4deg);
	filter: blur(2px);
}

#catalogTiles .tile.circle {
	border-radius: 50%;
}
#catalogTiles .tile.square {
	border-radius: 0;
}
#catalogTiles .tile.semi-l {
	border-radius: 50% 0 0 50% / 50% 0 0 50%;
}
#catalogTiles .tile.semi-r {
	border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}




/* Header - internal pages */

body:not(.home) header{
	gap: 2.5rem;
	grid-template-columns: auto 1fr auto;
}

body:not(.home) header .nav-search .search-hint,
body:not(.home) header [class^="icon-"],
body:not(.home) header [class*=" icon-"],
body:not(.home) header a {
	color: var(--brand-700);
}

body:not(.home) header > :nth-child(1){ /* .site-nav */
	grid-column: 2;
}
body:not(.home) header > :nth-child(2){ /* обёртка с .site-logo */
	grid-column: 1;
	display: flex;
	align-items: center;
}
body:not(.home) header > :nth-child(3){ /* .site-actions */
	grid-column: 3;
}

/* показываем логотип и возвращаем ему нормальный флоу */
body:not(.home) header .site-logo{
	display: inline-flex !important;
	align-items: center;
	min-width: 0;
}
body:not(.home) header .site-logo img{
	position: static !important;
	top: auto; left: auto; margin: 0;
	height: var(--logo-h);
	width: auto;
}

body:not(.home) header .site-nav{
	display: flex;
	align-items: center;
	gap: 1.6rem;
}
body:not(.home) header .site-nav > a{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
}
body:not(.home) header .site-nav > a svg{
	width: 20px;
	height: 20px;
	position: relative;
	top: -1px;
}
body:not(.home) header .nav-search{
	margin-left: 0;
}

@media (max-width:1000px) {
	.catalog {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.catalog-left {
		height: 40vh;
	}
	.catalog-right {
		align-items: flex-start;
	}
	.catalog-list {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#catalogTiles .tile {
		transition: none;
	}
}


/* Product cards and showcases */

.prod-viewport{
	padding: 0;
	overflow: hidden;
}
.prod-row{
	--per: 4;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per));
	gap: var(--gap);
	padding: 2.5rem var(--pad-x);
}
@media (hover:hover) and (pointer:fine){
	.prod-row{ overflow: hidden; }
}

.prod-row[hidden]{ display: none; }
.prod-row .prod-card{
	scroll-snap-align: start;
}

.prod-card{ min-width: 0; }
.p-card{
	--pad: 1.4rem;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 2rem;
	padding: var(--pad);
	transition: box-shadow .25s ease;
}
.p-card:hover{ box-shadow: 0 0 29px 5px rgba(0,0,0,.15); }
.p-badge{
	position: absolute;
	top: 2.1rem;
	left: 1.4rem;
	z-index: 3;
	color: var(--orange);
	font-weight: 600;
	font-size: 1.3rem;
}
.p-img{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	background: #fff;
	border-radius: 1.5rem 1.5rem 0 0;
	overflow: hidden;
}
.p-img img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transform: scale(1);
	transition:
		opacity .35s var(--ease),
		transform .45s var(--ease);
	pointer-events: none;
}
.p-card:hover .p-img img{ transform: scale(1.03); }
.p-card:hover .p-badge{display:none;}
.p-img img:first-child{ opacity: 1; z-index: 2; }
.p-img img.is-active{ opacity: 1; z-index: 2; }
.p-img:hover img.is-active{ transform: scale(1.035); }

.p-img.has-multi{ --n: 1; }
.p-img.has-multi .p-zones{
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(var(--n), 1fr);
	z-index: 4;
	pointer-events: none;
}
.p-img.has-multi .p-zones > span{ min-width: 0; min-height: 0; }

.p-title{
	margin: 4rem .8rem .8rem;
	font-weight: 600;
	font-size: 1.48rem;
	line-height: 1.48;
	min-height: calc(1em * 1.48 * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.p-title a{
	display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	  line-clamp: 3;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: normal;
	  color: inherit;
	  text-decoration: none;
	  position: relative;
	  z-index: 2;
	  pointer-events: auto;
}
.p-title a:hover{ color: var(--brand-700); }
.p-meta{
	margin: .8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.p-colors{
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: 50%;
	/* overflow: hidden; */
}
.p-col{
	position: relative;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 0;
	background: var(--c, #000);
	flex: 0 0 auto;
	--sw-gap: 2px;
	--sw-stroke: 1px;
	--sw-bg: var(--page-bg, #fff);
	--sw-stroke-color: color-mix(in srgb, var(--brand-700) 22%, transparent);
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.08),
		inset 0 2px 3px rgba(0,0,0,.22),
		0 0 0 var(--sw-gap) var(--sw-bg),
		0 0 0 calc(var(--sw-gap) + var(--sw-stroke)) var(--sw-stroke-color); /* 1px обводка */
	transition:
		transform .08s ease,
		box-shadow .18s ease,
		border-color .18s ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
@supports not (color: color-mix(in srgb, white, black)){
	.p-col{ --sw-stroke-color: rgba(0,0,0,.22); }
}
.p-col:is(:hover,:focus-visible){
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.10),
		inset 0 3px 4px rgba(0,0,0,.25),
		0 0 0 var(--sw-gap) var(--sw-bg),
		0 0 0 calc(var(--sw-gap) + var(--sw-stroke)) color-mix(in srgb, var(--brand-700) 32%, transparent);
}
.p-col.is-active{
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.10),
		inset 0 3px 5px rgba(0,0,0,.28),
		0 0 0 var(--sw-gap) var(--sw-bg),
		0 0 0 calc(var(--sw-gap) + var(--sw-stroke)) var(--orange);
}
.p-buy{
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}
.p-price{
	display: flex;
	align-items: center;
	gap: .8rem;
	white-space: nowrap;
	font-size: 1.8rem;
}
.pr-price .now i,
.p-price i {
	font-style: normal;
	font-weight: 300;
}
.p-old{ color: #e54545; text-decoration: line-through; font-weight: 500; opacity: .8; }
.p-now{ font-weight: 700; color: var(--fg); }
.p-cart{
	display: inline-flex;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--orange);
	line-height: 3.15rem;
	font-size: 2rem;
	color: var(--brand-700);
	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease,
		transform .08s ease;
	right: -5px;
}
.p-cart:hover,
.p-cart:focus-visible{
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}
.p-cart:active{ transform: scale(.96); }
.prod-dots{
	--dot-size: var(--dot);
	--slot: calc(var(--dot-size) + var(--dot-gap));

	width: calc(var(--slot) * var(--dots-visible) - var(--dot-gap));
	margin: 0 auto;
	position: relative;
	height: var(--dot-size);
}

.p-coming{
	display:inline-flex;
	justify-content:center;
	width:100%;
	height:3.6rem;
	line-height: 3.6rem;
	border:1px solid var(--orange);
	border-radius:999rem;
	background:transparent;
	color:var(--brand-700);
	font-weight:700;
	font-size:1.28rem;
	letter-spacing:-.01em;
	white-space:nowrap;
	user-select:none;
}

.prod-dots__track{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dot-gap);
	transform: translateX(var(--shift-px, 0px));
	transition: transform var(--dur-slow) var(--ease);
}

.prod-dot{
	padding: 0;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 50%;
	background: #c4c4c4;
	transform: scale(var(--s, 1));
	transition:
		transform var(--dur) var(--ease),
		background-color .2s ease,
		opacity .2s ease;
}

.prod-dot[data-size="sm"]{ --s: .333; }
.prod-dot[data-size="md"]{ --s: .8; }
.prod-dot[data-size="lg"]{ --s: 1.22; }

.prod-dot[aria-current="true"]{ background: var(--orange); }
.prod-dot[hidden]{ opacity: 0; pointer-events: none; }

.prod-row::-webkit-scrollbar{ display: none; }
.prod-row{ scrollbar-width: none; }

.p-card{
	position: relative;
}

.p-img,
.p-title a{
	position: relative;
	z-index: 2;
}

.p-img img{
	pointer-events: none;
}

.prod{
	--pad-x: 7rem;
	--gap: 2.8rem;
	--pill-h: 4.7rem;
	--pill-pad-x: 2rem;
	--pill-min: 14rem;
	--pill-gap: 1.2rem;
	--card-h: 22rem;
	--r-card: .8rem;
	--dot: 10px;
	--dot-gap: 12px;
	--dots-visible: 5;
	--ease: cubic-bezier(.2,.7,.2,1);
	--dur-fast: .18s;
	--dur: .28s;
	--dur-slow: .35s;
}

.prod-head {
	display: flex;
	justify-content: center;
	padding: 0 var(--pad-x);
}

.prod-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pill-gap);
	margin: 0 var(--pad-x) .9rem;
}

.pill{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35em;
	height: var(--pill-h);
	padding: 0 var(--pill-pad-x) 0 1rem;
	min-width: var(--pill-min);
	border-radius: 999rem;
	background: #fff;
	color: var(--brand-700);
	border: 1px solid rgba(0,0,0,.08);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: var(--pill-h);
	transition:
		transform var(--dur-fast) ease,
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;

	--pill-ring-gap: 1px;
	--pill-ring-size: 3px;
	--pill-gap-color: var(--page-bg, #fff);
	--pill-ring-color: color-mix(in srgb, var(--orange) 35%, transparent); /* нежный */
}

.pill:hover,
.pill:focus-visible{
	transform: translateY(-1px);
	box-shadow:
		0 4px 14px rgba(0,0,0,.08),
		0 0 0 var(--pill-ring-gap) var(--pill-gap-color),
		0 0 0 calc(var(--pill-ring-gap) + var(--pill-ring-size)) var(--pill-ring-color);
}

.pill:active{ transform: translateY(1px); }

.pill.is-active,
.pill[aria-selected="true"]{
	border-color: var(--brand-200);
	box-shadow:
		0 0 0 var(--pill-ring-gap) var(--pill-gap-color),
		0 0 0 calc(var(--pill-ring-gap) + var(--pill-ring-size)) var(--pill-ring-color);
}

.pill > svg{
	position: relative;
	top: -1px;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: inline-block;
	fill: currentColor;
}

.pill:focus-visible{
	outline: none;
}

@supports not (color: color-mix(in srgb, white, black)){
	.pill{ --pill-ring-color: rgba(255, 140, 0, .28); }
}


/* Category tiles / Promo blocks */

.mosaic{
	--gap: 2.4rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	padding: var(--section-pad-y-s) var(--container-x);
}
.m-col{
	display: grid;
	gap: var(--gap);
	align-content: start;
}
.m-item{
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	background: #e6e7ea;
	border-radius: var(--r-xl);
	transition:
		transform .25s ease,
		border-radius .35s cubic-bezier(.2,.7,.2,1);
}
.m-item::before{
	content: "";
	display: block;
}
.m-item::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to top,
		rgba(var(--brand-rgb), .88) 0%,
		rgba(var(--brand-rgb), .62) 28%,
		rgba(var(--brand-rgb), .28) 58%,
		rgba(var(--brand-rgb), 0) 100%
	);
	transition: opacity .35s var(--ease);
}
.m-item img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	will-change: transform;
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.m-caption{
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 0);
	width: calc(100% - 40px);
	text-align: center;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0;
	align-items: center;
	justify-items: center;
	pointer-events: none;
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
	will-change: transform;
	z-index: 2;
	backdrop-filter: saturate(120%) blur(1.2px);
}
.m-title{
	color: #fff;
	font-weight: 400;
	font-size: 2.6rem;
	text-shadow:
		0 2px 10px rgba(0,0,0,.35),
		0 1px 2px rgba(0,0,0,.25);
	background: rgba(88, 88, 88, .7);
	padding: .4rem 1.5rem .1rem;
	border-radius: 1rem;
}
.m-sub{
	color: #fff;
	font-weight: 500;
	font-size: clamp(12px, 1.4vw, var(--r-xl));
	opacity: 0;
	transform: translateY(8px);
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
	text-shadow: 0 2px 8px rgba(0,0,0,.35);
	max-height: 0;
	overflow: hidden;
	transition:
		max-height .28s var(--ease),
		opacity .28s var(--ease),
		transform .28s var(--ease);
}
.m-item.sq::before{ aspect-ratio: 1 / 1; }
.m-item.tall::before{ aspect-ratio: 2 / 3; }
.m-item:hover,
.m-item:focus-visible{
	transform: translateY(-2px);
}
.m-item:hover::after,
.m-item:focus-visible::after{
	opacity: 1;
}
.m-item:hover img,
.m-item:focus-visible img{
	transform: scale(1.05);
}
.m-item:hover .m-caption,
.m-item:focus-visible .m-caption{
	transform: translate(-50%, -12px);
	row-gap: .35rem;
}
.m-item:hover .m-title,
.m-item:focus-visible .m-title{
	background: none;
}
.m-item:hover .m-sub,
.m-item:focus-visible .m-sub{
	opacity: 1;
	transform: translateY(0);
	max-height: 6.4rem;
}
@media (prefers-reduced-motion: reduce){
	.m-item::after{ transition: none; }
	.m-caption{ transition: none; }
	.m-item img{ transition: none; }
	.m-item{ transition: none; }
}


/* Blog / Magazine */

.mag{
	padding: var(--section-pad-y-s) var(--container-x) 7rem;
}
.mag h2{
	text-align: center;
}
.mag-grid{
	--gap: 2.4rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--gap);
}
@media (max-width:1024px){
	.mag-grid{ grid-template-columns: repeat(2,1fr); }
}

.mag-card{
	background:#fff;
	border-radius:var(--r-xl);
	box-shadow:0 1px 2px rgba(0,0,0,.04);
	overflow:hidden;
	transition:transform .28s var(--ease, cubic-bezier(.2,.7,.2,1)), box-shadow .35s var(--ease, cubic-bezier(.2,.7,.2,1));
	will-change:transform, box-shadow;
}
.mag-card:hover{
	box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.mag-link{ display:block; color:inherit; }

.mag-media{
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
	background:var(--orange);
}
.mag-media>img,
.mag-media>video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1);
	transition:transform .5s var(--ease, cubic-bezier(.2,.7,.2,1));
	backface-visibility:hidden;
	will-change:transform;
	display:block;
}

.mag-body{
	padding:1.6rem 2rem 2.4rem;
	display:grid;
	gap:.8rem;
	justify-items:center;
	text-align:center;
}
.mag-title{
	margin:1rem 0 0;
	font-weight:700;
	font-size:1.7rem;
	line-height:1.3;
	display:-webkit-box;
	min-height: 7rem;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	letter-spacing:-.01em;
	color:var(--fg);
	transition:color .28s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.mag-desc{
	color:var(--muted,#4b5563);
	opacity:.95;
	font-size:1.35rem;
	line-height:1.5;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	max-width:46ch;
}

.mag-card:hover .mag-media>img,
.mag-card:hover .mag-media>video{ transform:scale(1.25); }

.mag-card:hover .mag-title{ color:var(--brand-700); }


/* Footer */

footer{
	--ft-bg:#0e0e0e;
	--ft-fg:#f3f3f3;
	--ft-muted:#b6b6b6;
	--ft-line:#262626;
	--ft-card:#151515;
	--ft-radius:.75rem;
	--ft-gap:2.25rem;
	--ft-gap-xl:clamp(3rem,8vw,15rem);
	--ft-pad-y:var(--section-pad-y-s,4rem);
	--mx:50%;
	--my:50%;
	position:fixed;
	inset:0;
	background:var(--ft-bg);
	color:var(--ft-fg);
	transform:translateY(var(--ft-ty,20%));
	will-change:transform,background;
}

footer::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at var(--mx) var(--my), rgba(var(--brand-rgb), .55) 0%, rgba(var(--brand-rgb), .15) 30%, rgba(0,0,0,0) 60%),
		radial-gradient(120% 120% at 20% 20%, rgba(var(--brand-rgb), .18) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(120% 120% at 80% 80%, rgba(255,140,0,.12) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(100% 100% at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 70%);
	filter:blur(60px);
	mix-blend-mode:screen;
	opacity:.6;
	pointer-events:none;
	transition:opacity .4s ease;
}

footer .container{
	height:100%;
	margin:0 auto;
	padding:7rem var(--container-x) 3.5rem;
	display:grid;
	grid-template-rows:auto auto auto;
	gap:var(--ft-gap);
}

footer .top{
	display:grid;
	grid-template-columns:1fr 0.55fr;
	gap:var(--ft-gap-xl);
	align-items:start;
}

footer h3{
	font-weight:400;
	letter-spacing:-.02em;
	font-size:3.5rem;
	line-height:1.4;
	margin:0;
	max-width:31ch;
}

footer .ft-subscribe{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1rem;
	max-width:min(100%,44rem);
}

footer .ft-field{
	position:relative;
	display:inline-flex;
	align-items:center;
	height:4rem;
	border-radius:var(--r-pill,999rem);
	border:1px solid rgba(255,255,255,.35);
	background:rgba(255,255,255,.10);
	backdrop-filter:saturate(123%) blur(5px);
	color:#fff;
	font-size:1.45rem;
	line-height:1.2;
	padding:0 1.2rem;
	flex:1 1 22rem;
	min-width:16rem;
}

footer .ft-hint{
	position:absolute;
	left:1.2rem;
	top:55%;
	transform:translateY(-50%);
	pointer-events:none;
	color:#fff;
	opacity:.9;
	font-size:1.45rem;
	white-space:nowrap;
	transition:transform .18s ease, opacity .18s ease;
}

footer .ft-field input{
	width:100%;
	height:100%;
	border:0;
	outline:0;
	background:transparent;
	color:#fff;
	font-size:1.45rem;
	line-height:1.2;
	padding:0;
}

footer .ft-field input:focus ~ .ft-hint,
footer .ft-field input:not(:placeholder-shown) ~ .ft-hint{
	transform:translateY(-1.4rem);
	opacity:0;
}

footer .ft-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.8rem;
	height:4rem;
	padding:0 1.7rem 0 1.4rem;
	border-radius:var(--r-pill,999rem);
	border:0;
	cursor:pointer;
	white-space:nowrap;
	line-height:1;
	font-weight:700;
	color:#fff;
	outline:3px solid transparent;
	outline-offset:2px;
	transition:transform .18s ease, box-shadow .25s ease, background .2s ease, outline-color .2s ease;
	background:
		radial-gradient(120% 120% at 30% 20%, var(--brand-400) 0%, var(--brand-500) 48%, var(--brand-700) 78%),
		linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
	box-shadow:0 14px 30px rgba(var(--brand-rgb), .32), 0 4px 8px rgba(0,0,0,.15);
}

footer .ft-submit:hover,
footer .ft-submit:focus-visible{
	box-shadow:0 20px 40px rgba(var(--brand-rgb), .42), 0 6px 14px rgba(0,0,0,.18);
	background:
		radial-gradient(120% 120% at 30% 20%, var(--brand-300) 0%, var(--brand-400) 48%, var(--brand-700) 78%),
		linear-gradient(180deg, var(--brand-400) 0%, var(--brand-700) 100%);
	outline-color:rgba(var(--brand-rgb), .35);
}

footer .ft-submit:active{
	transform:scale(.96);
}

footer .ft-field input:focus-visible{
	outline:2px solid var(--focus, var(--orange));
	outline-offset:2px;
	border-radius:var(--r-pill,999rem);
}

footer .top p{
	margin:.9rem 0 .4rem;
	color:var(--ft-muted);
	font-weight:600;
}

footer .social{
	display:flex;
	gap:.75rem;
	margin-top:.9rem;
}

footer .social a{
	width:4.5rem;
	height:4.5rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:.8rem;
	background:transparent;
	box-shadow:inset 0 0 0 1px var(--ft-line);
	color:var(--ft-fg);
	cursor:pointer;
	transition: background .2s ease, transform .08s ease, color .2s ease;
}

footer .social a:hover{
	color: var(--orange);
	background:#1a1a1a;
}

footer .social svg{
	width: 2.2rem;
	height: auto;
	transition: transform .15s ease;
}

footer .social a:hover svg{
	transform: scale(1.12);
}

footer hr{
	height:1px;
	border:0;
	background:var(--ft-line);
	margin:0;
}

footer nav{
	display:grid;
	gap:2.25rem 3rem;
	grid-template-columns:repeat(4, minmax(12rem,1fr));
	align-content:start;
	padding:1.25rem 0;
	line-height:2.2rem;
}

footer nav section h3{
	margin:0 0 1rem;
	font-weight:700;
	letter-spacing:-.01em;
	font-size:1.8rem;
}

footer nav a{
	display:block;
	padding:.2rem 0;
	color:var(--ft-muted);
	text-decoration:none;
	font-size:1.3rem;
}

footer nav a:hover{
	color:var(--orange);
}

footer nav a > svg {
	position: relative;
	top: 1px;
	display: inline-block;
	width: 1.45rem;
	height: 1.45rem;
	margin-inline-start: .4rem;
	margin-left: .6rem;
	vertical-align: text-bottom;
}

footer .bottom{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1.5rem;
	color:var(--ft-muted);
	font-size:1.2rem;
	padding-top:1rem;
}

footer .bottom .links{
	display:flex;
	flex-wrap:wrap;
	gap:1.5rem;
}

footer .bottom a{
	color:#9aa0a6;
	text-decoration:none;
}

footer .bottom a:hover{
	color:var(--ft-fg);
}


@media (min-width: 721px){
  body:not(.home) header{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: column;
    align-items: center;
  }
  body:not(.home) header > *{
    grid-row: 1 !important;
  }
  body:not(.home) header > :nth-child(2){
    grid-column: 1 !important;
    display: flex;
    align-items: center;
  }
  body:not(.home) header > :nth-child(1){
    grid-column: 2 !important;
  }
  body:not(.home) header > :nth-child(3){
    grid-column: 3 !important;
  }

  body:not(.home) header .site-logo{
    display: inline-flex !important;
    align-items: center;
    min-width: 0;
  }
  body:not(.home) header .site-logo img{
    position: static !important;
    top: auto; left: auto; margin: 0;
    height: var(--logo-h);
    width: auto;
  }

  body:not(.home) header .site-nav{
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  body:not(.home) header .site-nav > a{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
  }
  body:not(.home) header .site-nav > a svg{
    width: 20px; height: 20px;
  }
  body:not(.home) header .nav-search{ margin-left: 0; }
}


/* Mobile version */

@media (max-width:720px) {
	.doce-cats {
		display: none;
	}
	header {
		position:absolute;
		top:0;
		left:0;
		right:0;
		z-index:10;
		display:grid;
		grid-template-columns:auto 1fr;
		grid-template-rows:auto auto;
		column-gap:1rem;
		row-gap:.8rem;
		align-items:center;
		padding: 1.5rem 2.5rem 1rem;
		background:transparent;
		color:#fff;
		transform:none;
		transition:none;
	}
	.header-brand {
		grid-column:1 / 2;
		grid-row:1 / 2;
		display:flex;
		align-items:center;
		min-width:0;
	}
	.header-brand img {
		display:block;
		height:4.2rem;
		width:auto;
		max-width:100%;
	}
	.site-logo,
	.site-nav > a {
		display:none !important;
	}
	.site-actions {
		grid-column:2 / 3;
		grid-row:1 / 2;
		justify-self:end;
		display:flex;
		align-items:center;
		gap:1rem;
		font-size:2rem;
		color:#fff;
	}
	.site-actions a {
		width:3.2rem;
		height:3.2rem;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		line-height:1;
	}
	.site-nav {
		display:contents;
	}
	.nav-catalog {
		grid-column:1 / 2;
		grid-row:2 / 3;
		position:relative;
		height:3.6rem;
		min-height:3.6rem;
		padding:0 1.2rem;
		gap:.6rem;
		display:inline-flex;
		line-height:3.6rem;
		font-size:1.4rem;
		border-radius:var(--r-pill);
		box-shadow:
			0 10px 20px rgba(var(--brand-rgb), .32),
			0 3px 6px rgba(0,0,0,.3);
	}
	.nav-hamb {
		width:1.4rem;
		height:1.1rem;
	}
	.nav-hamb i {
		height:.1rem;
	}
	.nav-catalog span {
		padding-top:.2rem;
		letter-spacing:-.04rem;
	}
	.nav-search {
		grid-column:2 / 3;
		grid-row:2 / 3;
		position:relative;
		display:flex;
		align-items:center;
		width:100%;
		height:3.6rem;
		margin-left:0;
		padding-left:1rem;
		border-radius:var(--r-pill);
		border:1px solid rgba(255,255,255,.35);
		background:rgba(255,255,255,.10);
		backdrop-filter:saturate(123%) blur(5px);
		color:#fff;
		transition:background .2s ease;
	}
	.nav-search input {
		width:100%;
		height:100%;
		border:0;
		outline:0;
		background:transparent;
		color:inherit;
		font-size:1.4rem;
		line-height:3.6rem;
		padding:0 3.2rem 0 .7rem;
	}
	.nav-search button {
		position:absolute;
		right:.5rem;
		top:.9rem;
		bottom:.8rem;
		width:2.2rem;
		border-radius:50%;
		font-size:1.2rem;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		color:#fff;
		line-height:1;
		opacity:.6;
	}
	.nav-search .search-hint {
		position:absolute;
		left:1.5rem;
		right:3.2rem;
		top:50%;
		transform:translateY(-46%);
		pointer-events:none;
		color:#fff;
		opacity:.7;
		font-size:1.4rem;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		transition:transform .18s ease, opacity .18s ease;
	}
	.nav-search.is-open .search-hint,
	.nav-search input:focus + button ~ .search-hint {
		transform:translateY(-1.4rem);
		opacity:0;
	}


	.hero {
		--slide-speed: .33s;
		--slide-dim: .5;
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
	.hero__track > figure > figcaption {
		position: absolute;
		left: 2.5rem;
		right: 2.5rem;
		bottom: 2.5rem;
		top: auto;
		transform: none;
		z-index: 2;
		color:#fff;
		display:flex;
		flex-direction:column;
		gap:1.2rem;
		text-align:left;
		font-size:1.4rem;
		max-width: 100%;
	}
	.hero-caption h2 {
		font-weight:700;
		font-size:3.3rem;
		line-height:1.1;
		letter-spacing:-0.1rem;
		word-break: break-word;
	}
	.hero-caption p {
		margin-bottom: 0.5rem;
		font-size:1.6rem;
		line-height:1.35;
		opacity:.9;
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		overflow:hidden;
		max-width:32rem;
	}
	.hero__track > figure .hero-caption {
		opacity: 0;
		transform: translate(2rem, 0);
		transition: opacity .55s ease, transform .95s ease;
	}
	.hero[data-dir="prev"] .hero__track > figure .hero-caption {
		transform: translate(-2rem, 0);
	}
	.hero__track > figure.is-active .hero-caption,
	.hero[data-dir="prev"] .hero__track > figure.is-active .hero-caption,
	.hero[data-dir="next"] .hero__track > figure.is-active .hero-caption {
		opacity: 1;
		transform: translate(0, 0);
		transition-delay: .15s;
	}
	.hero .btn-cta {
		--btn-h: 3.8rem;
		--pad-x: 1.5rem;
		padding: 0 1rem 0 1.2rem;
		line-height: 4rem;
		width: 13rem;
	}
	.hero .btn-cta::before {
		left: 1rem !important;
		animation: none !important;
		transition: none !important;
	}
	.hero .btn-cta .label {
		transform: none !important;
		transition: none !important;
	}
	.hero .btn-cta.is-in .label,
	.hero .btn-cta.is-out .label {
		transform: none !important;
	}
	.hero .btn-cta.is-in::before,
	.hero .btn-cta.is-out::before,
	.hero .btn-cta.is-in.is-pulse::before {
		animation: none !important;
		transform: translateY(-50%) scale(1) !important;
		width:.9rem !important;
		height:.9rem !important;
		border-radius:50% !important;
	}
	.hero-brand {
		display:none;
	}


	.catalog {
		display: flex;
		flex-direction: column;
		height: 100svh;
		padding: 0;
		padding-top: calc(var(--header-h,0px) + 1.5rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.catalog-left {
		margin: 0;
		height: auto;
		flex: 0 0 auto;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		padding: 0;
		overflow: visible;
		margin-bottom: 2rem;
	}
	#catalogTiles {
		transform: scale(.65) translateZ(0);
		transform-origin: top center;
	}
	.catalog-right {
		position: relative;
		margin: 0;
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 0 2rem 4rem;
		text-align: center;
	}
	.catalog-list {
		max-width: 32rem;
		margin: 0 auto;
		text-align: center;
		will-change: transform;
	}
	.catalog-list li {
		font-size: 2.9rem;
		line-height: 1.3;
		letter-spacing: -.03em;
	}
	.catalog-list li + li {
		margin-top: 1.2rem;
	}
	.catalog-list a {
		letter-spacing: -.12rem;
		text-align: center;
	}
	body.is-catalog .catalog-list li:nth-child(1) a { transition-delay:.35s; }
	body.is-catalog .catalog-list li:nth-child(2) a { transition-delay:.40s; }
	body.is-catalog .catalog-list li:nth-child(3) a { transition-delay:.55s; }
	body.is-catalog .catalog-list li:nth-child(4) a { transition-delay:.60s; }
	body.is-catalog .catalog-list li:nth-child(5) a { transition-delay:.75s; }
	body.is-catalog .catalog-list li:nth-child(6) a { transition-delay:.80s; }
	body.is-catalog .catalog-list li:nth-child(7) a { transition-delay:.95s; }
	body.is-catalog .catalog-list li:nth-child(8) a { transition-delay:1.0s; }
	.catalog::before {
		filter: blur(80px);
		opacity: .7;
		background:
			radial-gradient(
				circle at 50% 20%,
				rgba(var(--brand-rgb), .55) 0%,
				rgba(var(--brand-rgb), .15) 30%,
				rgba(0,0,0,0) 60%
			),
			radial-gradient(
				120% 120% at 20% 20%,
				rgba(var(--brand-rgb), .18) 0%,
				rgba(0,0,0,0) 70%
			),
			radial-gradient(
				120% 120% at 80% 80%,
				rgba(255,140,0,.12) 0%,
				rgba(0,0,0,0) 70%
			),
			radial-gradient(
				100% 100% at 50% 60%,
				rgba(0,0,0,.6) 0%,
				rgba(0,0,0,.9) 70%
			);
		left: 0;
		top: 0;
	}
	
	body.is-catalog header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: transparent;
		backdrop-filter: none;
		color: #fff;
		pointer-events: auto;
	}
	body.is-catalog .catalog {
		padding-top: calc(var(--header-h,0px) + 1.5rem);
		z-index: 500;
	}
	body.is-catalog .catalog-left {
		margin-top: 5rem;
	}


	body.is-topbar-mb header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: rgba(0,0,0,.3);
		backdrop-filter: blur(10px) saturate(120%);
		color: #fff;

		display: grid;
		grid-template-columns: auto auto 1fr auto;
		grid-template-rows: auto;
		align-items: center;
		column-gap: 1rem;
		row-gap: 0;

		padding: 1rem 1.5rem;
		border-radius: 0;
		box-shadow: 0 0 29px 5px rgba(0,0,0,.15);

		transform: translateY(-120%);
		opacity: 0;
		pointer-events: none;

		transition:
			transform .45s var(--ease),
			opacity	 .3s var(--ease),
			background .3s ease,
			color .2s ease;
	}
	body.is-topbar-mb.is-topbar-mb-show header {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	body.is-topbar-mb.is-topbar-mb-armed:not(.is-topbar-mb-show) header {
		transform: translateY(-120%);
		opacity: 0;
		pointer-events: none;
	}
	body.is-topbar-mb header .nav-catalog {
		grid-column: 1 / 2;
		grid-row: 1 / 2;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 3.6rem;
		min-width: 3.6rem;
		height: 3.6rem;
		min-height: 3.6rem;
		padding: 0;

		border-radius: 50%;
		border: 0;

		background:
			radial-gradient(
				120% 120% at 30% 20%,
				var(--brand-400) 0%,
				var(--brand-500) 48%,
				var(--brand-700) 78%
			),
			linear-gradient(
				180deg,
				var(--brand-500) 0%,
				var(--brand-700) 100%
			);

		color:#fff;
		line-height: 1;
		font-size: 0;
	}
	body.is-topbar-mb header .nav-catalog > span:not(.nav-hamb) {
		display: none;
	}
	body.is-topbar-mb header .nav-hamb {
		position: relative;
		display: inline-block;
		width: 1.6rem;
		height: 1.2rem;
		color: currentColor;
	}
	body.is-topbar-mb header .nav-hamb i {
		position: absolute;
		left: 0;
		right: 0;
		height: .2rem;
		border-radius: .2rem;
		background: currentColor;
		transition: none;
	}
	body.is-topbar-mb header .nav-hamb i:first-child {
		top: .3rem;
	}
	body.is-topbar-mb header .nav-hamb i:last-child {
		top: .9rem;
	}
	body.is-topbar-mb header .header-brand {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		display: flex;
		align-items: center;
		min-width: 0;
		margin: 0;
	}
	body.is-topbar-mb header .header-brand img {
		height: 4.2rem;
		width: auto;
		max-width: 100%;
		filter: none;
	}
	body.is-topbar-mb header .nav-search {
		display: none !important;
	}
	body.is-topbar-mb header .site-actions {
		grid-column: 4 / 5;
		grid-row: 1 / 2;

		display:flex;
		align-items:center;
		justify-self:end;

		gap:1rem;
		font-size:2.3rem;
		color:#fff;
	}
	body.is-topbar-mb header .site-actions a {
		width:3.2rem;
		height:3.2rem;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		line-height:1;
		color:inherit;
	}
	body.is-topbar-mb header,
	body.is-topbar-mb header .site-actions,
	body.is-topbar-mb header .site-actions a {
		color:#fff;
	}


	.prod-head {
		padding: 0;
	}

	.prod-pills {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		overflow: hidden;
		margin: 0 0 .4rem;
		gap: 0;
	}
	.pill {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: auto;
		height: 3.2rem;
		line-height: 1;
		padding: 0;
		gap: .25em;
		margin: 0 .8rem;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: #444;
		font-size: 1.5rem;
		font-weight: 600;
		letter-spacing: -.03rem;
		text-align: center;
		white-space: nowrap;
		border-bottom: .2rem solid transparent;
		transition:
			color .18s ease,
			border-color .18s ease;
		box-shadow: none !important;
		outline: none;
	}
	.pill:hover,
	.pill:focus-visible {
		color: var(--orange);
		border-bottom-color: rgba(var(--brand-rgb), .4);
		transform: none;
		box-shadow: none;
	}
	.pill:active {
		transform: none;
	}
	.pill.is-active,
	.pill[aria-selected="true"] {
		color: var(--orange);
		border: none;
	}
	.pill > svg:first-of-type{
		top:-2px;
	}
	
	
	.prod{
		--pad-x: 1rem;
		--gap: 1.2rem;
		--dot: 8px;
		--dot-gap: 10px;
		--pill-h: 4.4rem;
		--pill-pad-x: 1.4rem;
		--pill-min: 11rem;
	}
	.prod-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap);
		padding: 1.2rem var(--pad-x) 2.2rem;
	}
	.prod-row{
		--per: 2;
		padding-top: 1rem;
		padding-bottom: 2rem;
		padding-left:  calc(var(--pad-x) + env(safe-area-inset-left));
		padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
		scroll-padding-left:  calc(var(--pad-x) + env(safe-area-inset-left));
		scroll-padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
	}
	.prod-row .prod-card:last-child{
		margin-right: .5rem;
	}
	.p-card{
		border-radius: 1.4rem;
		padding: 1.1rem;
	}
	.p-badge{
		top: 1rem;
		left: 1rem;
		font-size: 1.2rem;
	}
	.p-img{
		border-radius: 1.2rem 1.2rem 0 0;
	}
	.p-title{
		margin: 1.2rem .5rem .6rem;
		font-size: 1.35rem;
		-webkit-line-clamp: 2;
		min-height: calc(1em * 1.35 * 2);
	}
	.p-meta{
		margin: .5rem;
		gap: .8rem;
	}
	.p-colors{
		max-width: 62%;
		gap: .5rem;
	}
	.p-col{
		width: 16px;
		height: 16px;
	}
	.p-price{ font-size: 1.6rem; }
	.p-cart{
		width: 34px;
		height: 34px;
		line-height: 3rem;
	}
	.prod-dots{
		--dot-size: calc(var(--dot) * .9);
	}
	
	
	.mosaic-wrap{
		position: relative;
		--mo-pad: 1rem;
		--mo-gap: 1.2rem;
		--mo-card-w: 67vw;
	}
	.mosaic{
		position: relative;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--mo-card-w);
		gap: var(--mo-gap);
		padding: 0 var(--mo-pad) !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--mo-pad);
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mosaic::-webkit-scrollbar{ display: none; }
	.m-col{ display: contents !important; }
	.m-item{
		position: relative;
		border-radius: .5rem;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		transition: transform .2s ease, border-radius .3s cubic-bezier(.2,.7,.2,1);
	}
	.m-item::before{ content:""; display:block; aspect-ratio: 2 / 3; }
	.m-item::after{ display:none !important; }
	.m-item:hover{ transform:none; }
	.m-item img{
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		transform: none; transition: none;
	}
	.m-caption{
		left: 3rem;
		right: 3rem;
		bottom: 5rem;
		transform: none;
		row-gap: .35rem;
		text-align: center;
		justify-items: center;
		backdrop-filter: none;
		pointer-events: none;
	}
	.m-title,
	.m-sub{
		color: #fff;
		font-weight: 700;
		font-size: 1.25rem;
		line-height: 1.3;
		text-shadow: 0 2px 8px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
		background: none;
		padding: 0;
		border-radius: 0;
		max-height: none;
		opacity: 1;
		transform: none;
		text-align: center;
	}	
	.m-progress{
		position: absolute;
		display: block;
		left: calc(var(--mo-pad) + 1rem);
		bottom: .5rem;
		width: calc(var(--mo-card-w) - 2rem);
		height: 3px;
		z-index: 5;
		pointer-events: none;
	}
	.m-progress__track{
		width: 100%; height: 100%;
		background: rgba(255,255,255,.5);
		border-radius: 2px; overflow: hidden;
	}
	.m-progress__bar{
		height: 100%; width: 0%;
		background: var(--orange);
		transition: width .15s linear;
	}
	
	
	.mag{
		padding: var(--section-pad-y-s) 0 4rem;
	}
	.mag-grid{
		--mag-pad: 1rem;
		--mag-gap: 1.2rem;
		--mag-card-w: 64vw;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--mag-card-w);
		gap: var(--mag-gap);
		padding: 0 var(--mag-pad);
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--mag-pad);
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mag-grid::-webkit-scrollbar{ display: none; }
	.mag-card{
		scroll-snap-align: start;
		scroll-snap-stop: always;
		border-radius: var(--r-xl);
	}
	.mag-media{
		aspect-ratio: 2 / 1;
	}
	.mag-body{
		padding: 1.2rem 1.2rem 1.6rem;
		gap: .5rem;
		justify-items: center;
		text-align: center;
	}
	.mag-title{
		font-weight: 700;
		font-size: 1.5rem;
		line-height: 1.3;
		-webkit-line-clamp: 2;
		max-width: 24ch;
	}
	.mag-desc{
		font-weight: 600;
		font-size: 1.2rem;
		line-height: 1.4;
		-webkit-line-clamp: 3;
		max-width: 30ch;
		opacity: .92;
	}
	.mag-card:hover .mag-media img{ transform: none; }
	.mag h2 {
		margin:1rem 0 1.5rem;
		font-size:3rem;
	}
	
	
	footer{
		position:static;
		transform:none;
	}
	footer::before{ display:none; }

	footer .container{
		padding:2.4rem 1rem 2rem;
		gap:1.6rem;
	}
	footer .top{ display:block; }
	footer h3{
		margin-top:5rem;
		padding-right:5%;
		font-size:clamp(1.6rem,4.6vw,2.2rem);
		line-height:1.45;
		max-width:none;
	}
	footer .hidemob{ display:block; }
	footer .ft-subscribe{ display:none !important; }

	footer .top p{ margin:1.2rem 0 .6rem; color:var(--ft-muted); font-weight:600; }
	footer .social{ gap:.6rem; }
	footer .social a{
		width:3.6rem; height:3.6rem; border-radius:.6rem;
	}
	footer .social svg{ width:1.8rem; height:auto; }
	footer hr{ margin:.6rem 0; opacity:.9; }
	footer nav{
		grid-template-columns:1fr;
		gap:0;
		padding:0;
	}
	footer nav section{
		border-top:1px solid var(--ft-line);
		max-height:calc(var(--h3,3.4rem) + 0px);
		overflow:hidden;
		transition:max-height .25s ease;
	}
	footer nav section.is-open{
		max-height:var(--open-h,520px);
	}
	footer nav section h3{
		margin:0;
		padding:1.1rem 0;
		font-size:1.5rem;
		display:flex;
		align-items:center;
		justify-content:space-between;
		cursor:pointer;
	}
	footer nav section h3::after{
		content:"";
		width:.9rem; height:.9rem;
		border-right:2px solid var(--ft-muted);
		border-bottom:2px solid var(--ft-muted);
		transform:rotate(45deg);
		transition:transform .2s ease;
	}
	footer nav section.is-open h3::after{ transform:rotate(-135deg); }
	footer nav a{
		display:block;
		padding:.35rem 0;
		font-size:1.25rem;
		color:var(--ft-muted);
	}
	footer nav a:hover{ color:var(--orange); }
	footer .bottom{
		flex-direction:column;
		align-items:flex-start;
		gap:.6rem;
		font-size:1.15rem;
		padding-top:.6rem;
	}
	footer hr {
		background: none;
	}


	.feat-right {
		display: none !important;
	}


	body:not(.home) header{
		display:grid;
		grid-template-columns:auto 1fr auto;
		grid-template-rows:1fr;
		align-items:center;
		column-gap:1rem;
		row-gap:0;
		padding:1.2rem 1.5rem;
	}
	body:not(.home) header > .site-nav{
		grid-column:2/3; grid-row:1;
		display:flex;
		align-items:center;
		gap:.8rem;
	}
	body:not(.home) header .nav-search{ display:none !important; }
	body:not(.home) header .site-nav > a[href="/blog"]{ display:none !important; }
	body:not(.home) header > div:nth-child(2){
		grid-column:1/2; grid-row:1;
		display:block;
	}
	body:not(.home) header .site-logo{ display:block !important; }
	body:not(.home) header .site-logo img{
		height:3.8rem; width:auto; display:block;
	}
	body:not(.home) header .site-actions{
		grid-column:3/4; grid-row:1;
		display:flex; align-items:center; justify-content:flex-end;
		gap:1rem; font-size:2.2rem;
	}
	body:not(.home) header .site-actions a:nth-child(3){ display:none !important; }
	body:not(.home) header .nav-catalog{
		height:3.6rem; min-height:3.6rem;
		padding:0 1.2rem;
		font-size:1.4rem; line-height:3.6rem;
		border-radius:999rem;
	}
}



@media (max-width:1024px){
	.prod-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}



@media (hover:hover) and (pointer:fine){
	.ccursor{cursor:none}
	.ccursor .anticrs,
	.ccursor [data-pointer]{cursor:pointer}
	.ccursor-cursor{
		position:fixed;
		left:0;top:0;
		width:var(--btn-diam);
		height:var(--btn-diam);
		border-radius:var(--r-pill);
		border:1px solid var(--orange);
		background: rgba(var(--brand-rgb), .90);
		color:#fff;
		display:grid;place-items:center;
		font-size:var(--icon-size);
		line-height:1;
		opacity:0;
		pointer-events:none;
		z-index:11;
		transform:translate(-50%,-50%) scale(0);
		box-shadow:none;
		transition:
			left .12s var(--ease),
			top .12s var(--ease),
			transform var(--t-fast) var(--ease),
			opacity var(--t-med) var(--ease)
	}
	.ccursor-cursor::before{
		font-family:"Icon";
		content:"";
		font-weight:700
	}
	.ccursor-cursor[data-dir="prev"]::before{content:""}
	.ccursor-cursor.is-on{
		opacity:1;
		transform:translate(-50%,-50%) scale(1)
	}
	.ccursor-cursor.is-hiding{
		transition:
			left .12s var(--ease),
			top .12s var(--ease),
			transform var(--t-fast) var(--ease),
			opacity var(--t-med) var(--ease) .08s
	}
	.ccursor-cursor.is-tap{animation:ccTap .22s cubic-bezier(.2,.7,.2,1)}
	.ccursor-cursor.is-swap-out{transform:translate(-50%,-50%) scale(.0001)}
	.ccursor-cursor.is-swap-in{transform:translate(-50%,-50%) scale(1)}
	@keyframes ccTap{
		0%{transform:translate(-50%,-50%) scale(1)}
		50%{transform:translate(-50%,-50%) scale(.64)}
		100%{transform:translate(-50%,-50%) scale(1)}
	}
}
@media (prefers-reduced-motion:reduce){
	.ccursor-cursor{transition:none;animation:none}
}


/* Catalog / Filters / Sorting */

.page-catalog .catalog-controls{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.8rem 1.2rem;
	padding:1rem var(--container-x) 0;
	margin-bottom:3rem;
}

.page-catalog .cat-bubbles{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1rem;
	flex:1 1 auto;
	min-width:320px;
}

.page-catalog .cat-item{
	position:relative;
}

.page-catalog .cat-item > .pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.35em;
	height:var(--pill-h,4.2rem);
	padding:0 var(--pill-pad-x,1.6rem) 0 1rem;
	min-width:var(--pill-min,auto);
	border-radius:999rem;
	background:#fff;
	color:var(--brand-700);
	border:1px solid rgba(0,0,0,.08);
	font-weight:600;
	letter-spacing:-.01em;
	line-height:var(--pill-h,4.2rem);
	transition:transform var(--dur-fast,.12s) ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-catalog .cat-item > .pill:hover,
.page-catalog .cat-item > .pill:focus-visible{
	transform:translateY(-1px);
	box-shadow:0 4px 14px rgba(0,0,0,.08), 0 0 0 1px var(--page-bg,#fff), 0 0 0 4px color-mix(in srgb, var(--orange) 35%, transparent);
}

.page-catalog .cat-item.is-active > .pill{
	border-color:var(--brand-200);
	box-shadow:0 0 0 1px var(--page-bg,#fff), 0 0 0 4px color-mix(in srgb, var(--orange) 35%, transparent);
}

.page-catalog .cat-item > .pill > svg{
	position:relative;
	top:-1px;
	width:1em;
	height:1em;
	flex:0 0 auto;
	display:inline-block;
	fill:currentColor;
}

.page-catalog .cat-submenu{
	position:absolute;
	top:calc(100% + .6rem);
	left:0;
	min-width:clamp(22rem,24vw,28rem);
	max-height:60vh;
	padding:.4rem;
	border-radius:.8rem;
	background:#fff;
	box-shadow:0 16px 34px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
	white-space:nowrap;
	z-index:6;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateY(6px) scale(.98);
	transform-origin:top left;
	overflow:auto;
	transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1)), transform .2s var(--ease,cubic-bezier(.2,.7,.2,1)), visibility 0s linear .2s;
}

.page-catalog .cat-item:hover > .cat-submenu,
.page-catalog .cat-item:focus-within > .cat-submenu,
.page-catalog .cat-item[aria-expanded="true"] > .cat-submenu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateY(0) scale(1);
	transition-delay:0s;
}

.page-catalog .cat-submenu a{
	display:flex;
	align-items:center;
	gap:.7rem;
	padding:.7rem 1rem;
	font-size:1.25rem;
	line-height:1.15;
	border-radius:.1rem;
	color:#111;
	font-weight:600;
	transition:background .18s ease, color .18s ease;
}

.page-catalog .cat-submenu a > svg{
	position: relative;
	top: -2px;
	width:1.3em;
	height:1.3em;
	flex:0 0 auto;
	display:inline-block;
	fill:currentColor;
	opacity:.95;
}

.page-catalog .cat-submenu a:hover,
.page-catalog .cat-submenu a:focus-visible{
	background:#f2f3f5;
	color:var(--brand-700);
}

.page-catalog .cat-submenu a.is-active{
	background:#eef1f4;
	color:var(--brand-700);
}

.page-catalog .prod-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--gap,1.6rem);
	padding:2.5rem var(--pad-x);
}

@media (max-width:1024px){
	.page-catalog .prod-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

@media (max-width:720px){
	.page-catalog .prod-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}



.catalog-controls{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.8rem 1.2rem;
	padding:1rem var(--container-x) 0;
}

.cat-bubbles{
	display:flex;
	flex-wrap:wrap;
	gap:var(--pill-gap,1rem);
	flex:1 1 auto;
	min-width:32rem;
	text-transform:uppercase;
}

.cat-bubbles a{
	position:relative;
	display:inline-flex;
	justify-content:center;
	gap:.35em;
	height:4.2rem;
	padding:0 var(--pill-pad-x,1.8rem) 0 1.2rem;
	min-width:var(--pill-min,8.8rem);
	border-radius:999rem;
	background:#fff;
	font-size:1.4rem;
	color:var(--brand-700);
	font-weight:600;
	letter-spacing:-.01em;
	line-height:4.2rem;
	transition:transform var(--dur-fast,.12s) ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
	--pill-ring-gap:1px;
	--pill-ring-size:3px;
	--pill-gap-color:var(--page-bg,#fff);
	--pill-ring-color:color-mix(in srgb, var(--orange) 35%, transparent);
}
.cat-bubbles a:hover,
.cat-bubbles a:focus-visible{
	transform:translateY(-.1rem);
	box-shadow:0 4px 14px rgba(0,0,0,.08), 0 0 0 var(--pill-ring-gap) var(--pill-gap-color), 0 0 0 calc(var(--pill-ring-gap) + var(--pill-ring-size)) var(--pill-ring-color);
}
.cat-bubbles a:active{ transform:translateY(.1rem) }
.cat-bubbles a.is-active,
.cat-bubbles a[aria-current="page"]{
	border-color:var(--brand-200);
	box-shadow:0 0 0 var(--pill-ring-gap) var(--pill-gap-color), 0 0 0 calc(var(--pill-ring-gap) + var(--pill-ring-size)) var(--pill-ring-color);
}

.cat-bubbles a>svg{
	position:relative;
	top:0px;
	width:1.95rem;
	height:1.95rem;
	flex:0 0 auto;
	display:inline-block;
	fill:currentColor;
	opacity: .53;
}

.cat-more{ position:relative }

.cat-more__btn{
	width:4.2rem;
	height:4.2rem;
	border-radius:999rem;
	border:1px solid rgba(0,0,0,.08);
	background:#fff;
	color:var(--brand-700);
	font-weight:700;
	line-height:4.2rem;
	display:inline-grid;
	place-items:center;
	transition:transform var(--dur-fast,.12s) ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
	--pill-ring-gap:1px;
	--pill-ring-size:3px;
	--pill-gap-color:var(--page-bg,#fff);
	--pill-ring-color:color-mix(in srgb, var(--orange) 35%, transparent);
}
.cat-more__btn:hover,
.cat-more:focus-within .cat-more__btn{
	transform:translateY(-.1rem);
	box-shadow:0 4px 14px rgba(0,0,0,.08), 0 0 0 var(--pill-ring-gap) var(--pill-gap-color), 0 0 0 calc(var(--pill-ring-gap) + var(--pill-ring-size)) var(--pill-ring-color);
}
.cat-more__btn:active{ transform:translateY(.1rem) }

.cat-more__menu{
	position:absolute;
	top:calc(100% + .5rem);
	right:0;
	left:auto;
	display:block;
	min-width:22rem;
	max-height:60vh;
	padding:.4rem;
	border-radius:.8rem;
	background:#fff;
	box-shadow:0 16px 34px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
	z-index:5;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translate(-.8rem,.8rem) scale(.98);
	transform-origin:top right;
	overflow:auto;
	transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1)), transform .2s var(--ease,cubic-bezier(.2,.7,.2,1)), visibility 0s linear .2s;
}

.cat-more__menu a{
	display:flex;
	gap:.6rem;
	padding:.2rem 1rem;
	font-size:1.25rem;
	line-height:3rem !important;
	border:none !important;
	border-bottom:1px solid #aaa;
	border-radius:none !important;
	color:#111;
	font-weight:600;
	text-align:left;
	height:3rem;
	white-space:nowrap;
	text-align:left;
	transition:background .18s ease, color .18s ease;
}

.cat-bubbles .cat-more__menu a>svg{
	position: relative;
	top:5px;
	width:1.5rem;
	height:1.5rem;
}

.cat-more__menu a:hover,
.cat-more__menu a:focus-visible{
	background:#f2f3f5;
	box-shadow:none;
	border-radius:none;
}

.cat-more__menu a.is-active{
	background:#eef1f4;
	color:var(--brand-700);
	box-shadow:none;
	border-radius:none;
}

.cat-more__menu a>svg{
	width:1.1em;
	height:1.1em;
	flex:0 0 auto;
	display:inline-block;
	fill:currentColor;
	transform:translateY(-.06em);
	opacity:.95;
}

.cat-more:hover .cat-more__menu,
.cat-more:focus-within .cat-more__menu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translate(0,0) scale(1);
	transition-delay:0s;
}

@supports not (color: color-mix(in srgb, white, black)){
	.cat-bubbles a,
	.cat-more__btn{ --pill-ring-color:rgba(255,140,0,.28) }
}

/* Правый блок — сортировка */
.sort{
	position:relative;
	flex:0 0 auto;
	margin-left:auto;
	align-self:flex-start;
	margin-top:1rem;
}

.sort-btn{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	padding:.4rem .2rem;
	background:transparent;
	color:#9aa0a6;
	font-weight:600;
	line-height:1;
	transition:color .18s ease;
}
.sort-btn:hover,
.sort:focus-within .sort-btn{ color:#111 }
.sort-btn i{
	display:inline-block;
	transform:translateY(1px);
	opacity:.8;
	font-style:normal;
	transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.sort[aria-expanded="true"] .sort-btn i{
	transform:rotate(180deg);
	opacity:1;
}

.sort-menu{
	position:absolute;
	top:calc(100% + .5rem);
	right:0;
	min-width:clamp(18rem,22vw,26rem);
	padding:.25rem;
	border-radius:.6rem;
	background:#fff;
	box-shadow:0 16px 34px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
	white-space:nowrap;
	z-index:6;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateY(6px) scale(.98);
	transform-origin:top right;
	transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.sort[aria-expanded="true"] .sort-menu,
.sort:hover .sort-menu,
.sort:focus-within .sort-menu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateY(0) scale(1);
	transition-delay:0s;
}

.sort-menu button{
	display:block;
	width:100%;
	text-align:left;
	padding:.45rem .8rem;
	font-size:1.25rem;
	line-height:1.15;
	border-radius:.4rem;
	transition:background .18s ease;
}
.sort-menu button:hover,
.sort-menu button:focus-visible{ background:#f2f3f5 }
.sort-menu button[aria-current="true"]{
	background:#eef1f4;
	font-weight:600;
}


.cat-bubbles .cat-item{
	position:relative;
}

.cat-bubbles .cat-submenu{
	position:absolute;
	top:calc(100% + .5rem);
	left:0;
	right:auto;
	display:block;
	min-width:22rem;
	max-height:60vh;
	padding:.4rem;
	border-radius:.8rem;
	background:#fff;
	box-shadow:0 16px 34px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
	z-index:6;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translate(.0rem,.8rem) scale(.98);
	transform-origin:top left;
	overflow:auto;
	transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1)), transform .2s var(--ease,cubic-bezier(.2,.7,.2,1)), visibility 0s linear .2s;
}

.cat-bubbles .cat-submenu a{
	display:flex;
	gap:0;
	padding:.2rem 1rem;
	font-size:1.25rem;
	line-height:3rem !important;
	border:none !important;
	border-bottom:1px solid #aaa;
	border-radius:none !important;
	color:#111;
	font-weight:600;
	text-align:left;
	height:3rem;
	white-space:nowrap;
	transition:background .18s ease, color .18s ease;
}

.cat-bubbles .cat-submenu a>svg{
	top:7px;
	width:1.5rem;
	height:1.5rem;
}

.cat-bubbles .cat-submenu a:hover,
.cat-bubbles .cat-submenu a:focus-visible{
	background:#f2f3f5;
	box-shadow:none;
	border-radius:none;
}

.cat-bubbles .cat-submenu a.is-active{
	background:#eef1f4;
	color:var(--brand-700);
	box-shadow:none;
	border-radius:none;
}

.cat-bubbles .cat-item:hover > .cat-submenu,
.cat-bubbles .cat-item:focus-within > .cat-submenu,
.cat-bubbles .cat-item[aria-expanded="true"] > .cat-submenu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translate(0,0) scale(1);
	transition-delay:0s;
}

.cat-bubbles .cat-item{position:relative}
.cat-bubbles .cat-item::before{
	content:"";
	position:absolute;
	left:-.6rem;
	right:-.6rem;
	top:100%;
	height:1.2rem
}
.cat-bubbles .cat-submenu{
	top:100%;
	margin-top:.4rem
}
.cat-bubbles .cat-item.is-open>.cat-submenu,
.cat-bubbles .cat-item[aria-expanded="true"]>.cat-submenu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translate(0,0) scale(1);
	transition-delay:0s
}


.anticrs {
	cursor: auto !important;
}


.cat-desc-wrap{
	padding:5rem var(--pad-x) 7rem;
	margin:3rem 7rem;
}
.cat-desc{
	background:#fff;
	border:1px solid #eee;
	border-radius:.3rem;
	padding:3rem;
}
.cat-desc h2{
	margin:0 0 1rem;
	font-weight:700;
	font-size:1.4rem;
	line-height:1.35;
	letter-spacing: 0rem;
	color:var(--fg);
	text-align:left;
}
.cat-desc p{
	margin:1rem 0 0;
	font-size:1.4rem;
	line-height:1.6;
	color:var(--fg);
}


/* НЕОБРАБОТАННЫЙ КОД - СТАРОЕ, НО РАБОЧЕЕ */















main {
	position: relative;
	background: #eeeff3;
	z-index: 1;
	
		min-height: 110vh;
		margin-bottom: 100vh;
		border-radius: 0 0 2.5rem 2.5rem;
		box-shadow: var(--shadow);
}

main > section {
	margin-bottom: 3.5rem;
}

main > section > h1,
main > section > h2,
main > section > h3 {
	margin-bottom: 3.5rem;
}

main > section > h1 a,
main > section > h2 a,
main > section > h3 a {
	border-bottom: 1px solid rgba(0,0,0,.3);
}











/* Тултип по aria-label */

.has-tip{
	position:relative;
}

.has-tip[aria-label]::before{
	content: attr(aria-label);
	position:absolute;
	left:50%;
	bottom: calc(100% + var(--tip-gap));
	transform: translate(-50%, 6px) scale(.98);
	opacity:0; pointer-events:none;
	font-family: Mont;
	background: var(--tip-bg);
	color: var(--tip-fg);
	padding: var(--tip-pad-y) var(--tip-pad-x);
	border-radius: var(--tip-radius);
	box-shadow: var(--tip-shadow);
	font-size: 1.2rem;
	line-height: 1.2;
	white-space: nowrap;
	max-width: 26rem;
	text-overflow: ellipsis;
	overflow: hidden;
	z-index: 30;
	transition: opacity .18s ease, transform .22s var(--tip-ease);
}

.has-tip[aria-label]::after{
	content:"";
	position:absolute;
	left:50%;
	bottom: calc(100% + 1px);
	transform: translateX(-50%) translateY(6px);
	width:0; height:0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid var(--tip-bg);
	filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
	opacity:0; pointer-events:none;
	z-index:31;
	transition: opacity .18s ease, transform .22s var(--tip-ease);
}

.has-tip:hover::before,
.has-tip:focus-visible::before,
.has-tip:hover::after,
.has-tip:focus-visible::after{
	opacity:1;
	transform: translateX(-50%) translateY(0);
}

.has-tip.bottom[aria-label]::before{
	top: calc(100% + var(--tip-gap));
	bottom:auto;
}

.has-tip.bottom[aria-label]::after{
	top: calc(100% + var(--tip-gap) - 6px);
	bottom:auto;
	transform: translate(-50%) rotate(180deg);
}

.has-tip.orange::before {
	color: #fff;
	background: var(--orange);
}
.has-tip.orange::after {
	border-top-color: var(--orange);
}



















body:not(.home) main { padding-top:9rem; }
body:not(.home) header form { background: #fff; }








/* Breadcrumbs */

.breadcrumbs{
	padding: 1.8rem 7.5rem;
	font-size: 1.3rem;
}
.breadcrumbs ol{
	display:flex;
	flex-wrap:wrap;
	gap:.8rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: rgb(154, 160, 166);
}
.breadcrumbs li{list-style:none}
.breadcrumbs li+li::before{content:"/";opacity:.6;margin-right: .8rem;font-weight:400;}
.breadcrumbs a{color:inherit}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs .is-current{ }
.breadcrumbs .bc-ico{
	width:1.6rem;height:1.6rem;vertical-align:-3px;display:inline-block;
	/* filter: grayscale(1) saturate(.8) contrast(1.05); */
	transition: filter .25s ease;
}
.breadcrumbs a:hover .bc-ico,
.breadcrumbs a:focus-visible .bc-ico{
	filter: none;
}









.product-view{
	--right-w: min(50%, 38vw);
	display:grid;
	grid-template-columns: 1fr var(--right-w);
	gap: 1rem;
	margin: 2.5rem 7rem 3rem;
	min-height: 100svh;
}


.product-left{
	position: relative;
	margin: 0;
}

.pv-stick{ position: sticky; top: 0; height: 100svh; }
.pv-scroll{ height: 100%; overflow:auto; overscroll-behavior: contain; }
.pv-panel{ height: 100%; overflow:auto; }

.pv-stage{
	position: relative;
	width: 100%;
	height: calc(100% - var(--gap));
	margin: var(--gap);
	background:#efefef;
	display:none;
}
.pv-stage.is-on{ display:block; }

.pv-frame{
	position:absolute; inset:0; overflow:hidden;
}
.pv-frame img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit: contain; object-position:center;
	opacity:0; transform: translate3d(var(--tx,0),0,0) scale(1);
	transition: opacity .45s cubic-bezier(.2,.7,.2,1),
						 transform .55s cubic-bezier(.2,.7,.2,1);
}
.pv-frame img.is-current{ opacity:1; transform: translate3d(0,0,0) scale(1); }

.pv-frame[data-anim="in-left"]	.is-current{ --tx: -4%; }
.pv-frame[data-anim="in-right"] .is-current{ --tx:	4%; }

.pv-hit{ position:absolute; top:0; bottom:0; width:50%; z-index:3; }
.pv-hit.cleft { left:0;	}
.pv-hit.cright{ right:0; }
.pv-hit.ccursor{ background: transparent; }

.pv-close{
	position:absolute; top:1rem; right:1rem; z-index:4;
	width:36px; height:36px; border-radius:50%;
	display:inline-flex; justify-content:center;
	background:rgba(255,255,255,.9);
	border:1px solid var(--orange);
	font-size: 1.7rem;
			line-height: 3.6rem;
	transition: transform .08s ease;
	color: var(--orange);
}
.pv-close:hover{ transform: translateY(-1px); }

.product-right{
	margin: 0;
	padding: 0;
	
}
.pr-body{
	padding: 3.5rem 5rem 5rem;
	border-radius: 1rem;
	background: #fff;
}
.pr-in{
	padding: 0;
}

/* хлебные крошки с «стрелкой назад» */
.pr-breadcrumb{
	display:flex; align-items:center; gap:.6rem;
	color:#6b7280; font-weight:600; font-size:1.4rem; margin-bottom: 2rem;
}
.pr-breadcrumb i{ font-style:normal; opacity:.75; }

/* заголовок */
.pr-eyebrow{
	color:#6b7280; font-weight:700; font-size:1.6rem; margin-bottom:.6rem;
}
.pr-title{
	font-weight:700;
	font-size: 3.2rem;
	line-height:1.2;
	letter-spacing: -.03em;
	margin-bottom: 1.2rem;
}

/* статусы */
.pr-stock{ color:#2f9a4a; font-weight:700; margin-bottom:.4rem; font-size: 1.4rem; }
.pr-ship { color:#9aa0a6; font-weight:600; margin-bottom:2.0rem; font-size: 1.4rem; }

/* текст */
.pr-desc{
	color:#111; opacity:.95;
	font-size:1.4rem; line-height:1.7;
	max-width: 52ch;
	margin: 2.2rem 0px 3.2rem;
}

@media (max-width: 1024px){
	.product-view{
		grid-template-columns: 1fr minmax(34rem, 40%);
	}
}
@media (max-width: 840px){
	.product-view{
		grid-template-columns: 1fr;
		padding-right: 0;
		height:auto; /* обычный поток */
	}
	.product-left{ margin-left: 0; }
	.pv-stick, .pr-body, .pv-panel{ position:static; height:auto; overflow:visible; }
	.pv-stage{ height:auto; }
}

.pr-cta{
	margin: 0 0 0.5rem 0;
	padding: 3rem;
	border: 1px solid #eeeff3;
	border-radius: 1.2rem;
	background: #fefefe;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	display: grid;
	gap: 1.2rem;
	max-width: 46rem;
}

.pr-price{
	display:flex; align-items:baseline; gap:1rem;
}
.pr-price .now{
	font-size: 2.4rem; font-weight: 700; color: var(--fg);
}
.pr-price .old{
	color:#e54545; text-decoration: line-through; font-weight:600;
}

.pr-controls {
	display: flex;
			gap: 1rem;
			/* align-items: center; */
			line-height: 3.7rem;
}
.pr-qty{
	--diam: 2.87rem;
	--stroke: 1px;
	--gap: .5rem;
	display: inline-flex;
	margin-left: .5rem;
	align-items: center;
	gap: var(--gap);
	height: auto;
	border: 0;
	background: transparent;
}

.pr-qty button{
	width: var(--diam);
	height: var(--diam);
	border-radius: 50%;
	border: 1px solid var(--orange);
	background: #fff;
	color: var(--orange);
	display: inline-flex;
	/*align-items: center;*/
	justify-content: center;
	font-weight: 500;
			font-size: 2rem;
			line-height: 2.7rem;
	transition: background .18s ease, box-shadow .18s ease, transform .08s ease;
}
.pr-qty button:hover,
.pr-qty button:focus-visible{
	background: rgba(var(--brand-rgb), .04);
	box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
	outline: none;
}
.pr-qty button:active{ transform: translateY(1px); }

.pr-qty input{
	height: calc(var(--diam) + 0.8rem);
	min-width: 4rem;
	max-width: 8rem;
	padding: 0 1.2rem;
	text-align: center;
	font-weight: 700;
	color: #111;
	background: #edeff3;
	border: none;
	border-radius: 999rem;
	outline: none;
}
.pr-qty input:focus-visible{
	box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

.pr-qty input::-webkit-outer-spin-button,
.pr-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.pr-qty input[type="number"]{ -moz-appearance: textfield; }


.pr-actions{
	display:flex;
	gap:1rem;
	
}
.pr-actions .btn{
	flex:1 1 auto;
	height: 4.2rem; padding: 0 1.6rem;
	border-radius: 999rem; font-weight:700;
	width: 100%;
	align-items: unset;
	line-height: 4.4rem;
}
.pr-actions .btn-orange{ background: var(--orange); color:#fff; }
.pr-actions .btn-orange:hover{ background: rgba(255,100,0,.85); color:#fff; }

.pr-perks{
	display:grid; gap:.5rem;
	margin-top: 2rem;
	color:#6b7280; font-weight:600; font-size:1.3rem;
}
.pr-perks li{ display:flex; align-items:center; gap:.6rem; }
.pr-perks li::before{
	content:"•"; font-weight:700; opacity:.5;
}

/* кнопки в колонку */
.pr-actions{ display:flex; flex-direction:column; gap:.8rem; }

/* чёрная обводка, без заливки */
.btn-outline{
	background: transparent;
	color: #111;
	border: 1px solid #111;
}
.btn-outline:hover,
.btn-outline:focus-visible{
	background: rgba(0,0,0,.06);
	color:#111;
}



/* ===== Specs — Desktop tidy */
.specs{
	padding: 7rem var(--container-x);
	background:#fff;
	box-shadow: 0 0 29px 5px rgba(0,0,0,.15);
}

.specs h2,
h2.ppp,
.specs-desc h3{
	font-weight:500;
	letter-spacing:.02em;
	text-transform:uppercase;
	font-size:2rem;
	margin-bottom:2.4rem;
}

h2.ppp{ padding-left:7rem; }

.specs-grid{
	--cols: var(--spec-cols,5);
	display:grid;
	grid-template-columns: repeat(var(--cols), minmax(20rem,1fr));
	gap:5rem;
}

.specs-group{}

.specs-group h3{
	margin:0 0 1rem;
	font-weight:500;
	font-size:1.6rem;
	color:#6b7280;
}

.specs-group .rule{
	height:1px;
	background:#e5e7eb;
	margin:.2rem 0 1.2rem;
}

.specs-list{
	--term-w:18ch;
	--spec-gap:.8rem;
	font-size:1.3rem;
}

.specs-item{
	display:grid;
	grid-template-columns:minmax(12ch,1fr) auto;
	align-items:baseline;
	column-gap:var(--spec-gap);
	margin:1.35rem 0;
	line-height:1.35;
}

.spec-term{
	color:#6b7280;
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.spec-def{
	color:#111;
	justify-self:end;
	text-align:right;
	word-break:break-word;
}

.spec-def:empty{ display:none; }
.spec-def:empty + *{ display:none; }

/* ===== Specs — Description block (desktop) */
.specs-desc{
	--right-w:min(42rem,38vw);
	--gap:var(--gap-xl,3.5rem);
	display:grid;
	grid-template-columns:1fr 63rem;
	gap:var(--gap);
	padding:7rem var(--container-x) 6rem;
}

.specs-desc .content{
	grid-column:2 / 3;
	max-width:60ch;
}

.specs-desc p{
	margin:0 0 1rem;
	font-size:1.4rem;
	line-height:1.7;
	color:#111;
	opacity:.95;
}

/* ===== Responsive (tablet first) */
@media (max-width:1200px){
	.specs-grid{ --cols: min(4, var(--spec-cols,5)); }
}

@media (max-width:880px){
	.specs-grid{ --cols: min(3, var(--spec-cols,5)); }
	.specs-grid{
			grid-template-columns: repeat(2, minmax(0,1fr)) !important;
			gap: 2rem 1.6rem;
		}
	.specs{ padding: 5rem var(--container-x); }
	.specs-grid{ gap:3.5rem; }
}

/* ===== Mobile: две колонки групп + компактная типографика */
@media (max-width:720px){
	.specs{
		padding:3.5rem 1rem;
		box-shadow:none;
	}
	.specs h2,
	h2.ppp{ padding-left:0; text-align:center; }
	.specs-grid{
		--cols: 2;
		grid-template-columns:repeat(var(--cols), minmax(0,1fr));
		gap:1.8rem;
	}
	.specs-group h3{
		font-size:1.4rem;
		margin-bottom:.6rem;
	}
	.specs-group .rule{ margin:.2rem 0 .8rem; }
	.specs-list{ font-size:1.25rem; }
	.specs-item{
		grid-template-columns:1fr;
		margin:1rem 0;
	}
	.spec-term{
		white-space:normal;
		text-overflow:clip;
	}
	.spec-def{
		justify-self:start;
		text-align:left;
		margin-top:.15rem;
	}

	.specs-desc{
		grid-template-columns:1fr;
		gap:2rem;
		padding:2.5rem 1rem 3rem;
	}
	.specs-desc .content{ grid-column:auto; }
}



.pv-grid{
	padding: var(--pv-gap);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.pv-grid.is-clamped{
	position: relative;
	overflow: hidden;
	max-height: var(--pv-clamp-h);
}

.pv-grid.is-clamped::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	height: var(--pv-fade-h, 8rem);
	pointer-events:none;
	background: linear-gradient(to top, rgba(238,239,243,1) 0%, rgba(238,239,243,0) 100%);
}

.pv-grid.is-clamped::before{
		content:"mas fotos";
		position:absolute; left:50%; right:0; bottom:2rem;
	margin-left:-3rem;
	z-index:3;
	pointer-events:none;
	background:#fff;
	width: 6rem;
	height:6rem;
		border-radius: 5rem;
		font-size: 1.3rem;
		line-height: 1;
		text-align: center;
		display: flex;
		align-items: center;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 29px 5px;
}

.pv-stage.is-square{
	height: var(--pv-stage-size);
	border-radius: 1rem;
			overflow: hidden;
}


.pv-tile{
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #ddd;
	cursor: zoom-in;
	border-radius: 1rem;
	aspect-ratio: 1 / 1;
}
.pv-tile::before{ content:""; display:block; aspect-ratio: 3 / 2; }
.pv-tile img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit: cover; object-position:center;
	transform: scale(1.01);
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.pv-tile:hover img{ transform: scale(1.06); }

/* 5) сцена: отступы и высота от того же --pv-gap, вычитаем две стороны */
.pv-stage{
	position: relative;
	width: 100%;
	height: calc(100% - (var(--pv-gap) * 2));
	margin: var(--pv-gap);
	background:#efefef;
	display: none;
}
.pv-stage.is-on{ display:block; }
 

h1.head {
	margin: 1.3rem 7rem 2.5rem;
	text-align: center;
	font-size: 6rem;
	letter-spacing: -.3rem;
}






.header-account-basket .icon-bag:after {
		content: "";
		font-family: icon;
		font-weight: 400;
		left: 0;
		line-height: 1;
		opacity: 0;
		position: absolute;
		top: 0;
		transition: opacity .3s ease;
}


#cartToast{
	position:fixed;
	z-index:9999;
	top:1.6rem; right:1.6rem;
	background: var(--brand-50);
	color: var(--brand-900);
	border:1px solid var(--brand-300);
	box-shadow: 0 12px 34px rgba(0,0,0,.14);
	padding:.9rem 1.2rem;
	border-radius:.9rem;
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:.9rem;
	transform:translateY(-10px);
	opacity:0;
	pointer-events:none;
	transition:transform .25s ease, opacity .25s ease;
}
#cartToast.show{ transform:translateY(0); opacity:1; pointer-events:auto; }

#cartToast::before{
	content:"✓";
	width:1.9rem; height:1.9rem;
	border-radius:50%;
	display:grid; place-items:center;
	background: var(--brand-500);
	color:#fff;
	font-weight:800;
	box-shadow:0 6px 16px rgba(var(--brand-rgb), .30);
}

#cartToast .txt{
	font-weight:800;
	line-height:1.1;
	white-space:nowrap;
}

#cartToast .sub{
	display:block;
	margin-top:.1rem;
	font-weight:600;
	opacity:.9;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width: clamp(12rem, 26vw, 36rem);
}

#cartToast a{
	color: var(--brand-700);
	text-decoration:none;
	font-weight:700;
	padding:.4rem .8rem;
	border-radius:.6rem;
	background:#fff;
	border:1px solid rgba(var(--brand-rgb), .25);
}
#cartToast a:hover,
#cartToast a:focus-visible{
	background: var(--brand-50);
	border-color: var(--brand-400);
}


#pvGrid.is-clamped{position:relative;max-height:var(--pv-clamp-h);overflow:hidden}
#pvGrid.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8rem;background:linear-gradient(to top, rgba(238,239,243,1) 0%, rgba(238,239,243,0) 100%);pointer-events:none}
#pvStage.is-square{height:var(--pv-stage-size,auto)}



.features{position:relative;z-index:5;background:#fff;padding:7rem var(--container-x);z-index:1;}
.features::after{
	content:"";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 21rem;
	background: rgb(238, 239, 243);
	z-index: 0;
	pointer-events: none;
}
.features h2{
	position: relative;
			font-size: 3rem;
			margin: 0;
			padding: 0;
			top: -3rem;
			font-weight: 400;
			letter-spacing: -0.1rem;
		color: rgb(107, 114, 128);
}
.feat-grid{display:grid;grid-template-columns:1fr 1fr .5fr;gap:7rem;align-items:start}
@media(max-width:1024px){.feat-grid{grid-template-columns:1fr;gap:2.4rem}}
.feat-fig{position:relative;width:100%;aspect-ratio:1/1;background:#eeeff3;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden}
.feat-fig--sm{aspect-ratio:1/1}
.feat-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(12%);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.feat-fig img.is-show{opacity:1;transform:translateX(0);z-index:2}
.feat-fig img.is-hide{opacity:0;transform:translateX(-8%);z-index:1}
.feat-center{display:grid;grid-template-rows:auto 1fr auto;gap:2.2rem;height:100%;}
.feat-top{display:flex;align-items:flex-end;gap:1.2rem;height:9.2rem}
.feat-num{position:relative;height:8.2rem;overflow:hidden;min-width:9ch}
.feat-num .num{position:absolute;left:0;right:0;font-weight:800;font-size:8rem;line-height:.9;letter-spacing:-.08em;opacity:1;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.feat-num .num.out{transform:translateY(-45%);opacity:0}
.feat-num .num.in{transform:translateY(0);opacity:1}
.feat-slash{color:var(--brand);font-weight:700;font-size:2rem;transform:translateY(-.6rem)}
.feat-total{color:#6b7280;font-size:2rem;transform:translateY(-.6rem)}
.feat-body{display:grid;align-content:center;gap:1rem;min-height:16rem;margin-right:7rem;}
.feat-title,.feat-text{position:relative;min-height:2.8rem}
.feat-title{font-size:2.6rem;font-weight:700;line-height:1.2}
.feat-text{font-size:1.6rem;line-height:1.7;color:#111;opacity:.95}
.feat-title .swap,.feat-text .swap{position:absolute;left:0;right:0;opacity:1;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.feat-title .swap.out{transform:translateY(40%);opacity:0}
.feat-title .swap.in{transform:translateY(0);opacity:1}
.feat-title .swap{letter-spacing: -.1rem;}
.feat-text .swap.out{transform:translateY(-40%);opacity:0}
.feat-text .swap.in{transform:translateY(0);opacity:1}
.feat-bottom{display:flex;align-items:center;gap:1rem}
.feat-nav{width:5.6rem;height:5.6rem;border-radius:50%;border:1px solid #111;background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;font-size:2rem;transition:background .18s ease,box-shadow .18s ease,transform .08s ease}
.feat-nav:hover,.feat-nav:focus-visible{background:rgba(var(--brand-rgb),.04);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12);outline:none}
.feat-nav:active{transform:translateY(1px)}
.feat-nav::before{font-family:"Icon";font-weight:600;}
.feat-prev::before{content:""}
.feat-next::before{content:""}
.feat-line{height:2px;width:45.5%;background:#e5e7eb;margin-left:5rem}
.feat-right{display:grid;align-content:start;gap:3rem;z-index:1}
.feat-side{display:grid;gap:3rem;color:inherit}
.feat-side-title{font-weight:700;font-size:1.6rem;line-height:1.6}
.feat-side:hover .feat-side-title{color:var(--brand-700)}
.feat-side-title .swap{position:absolute;left:0;right:0;opacity:1;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.feat-side-title{position:relative;min-height:2.2rem}
.feat-side-title{opacity:1;transform:translateY(0);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.feat-side-title.is-gone{opacity:0;transform:translateY(8px);transition:none}

.specs-desc{--gap:var(--gap-xl,3.5rem);display:grid;grid-template-columns:1fr 63rem;gap:var(--gap);padding:7rem var(--container-x) 6rem}
.specs-desc .media{grid-column:1/2;align-self:start;position:relative;border-radius:1rem;box-shadow:var(--shadow);background:#fff;overflow:hidden;aspect-ratio:16/9;margin: 6rem 4rem 0 0}
.specs-desc .media .ytlite{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.02)}
.specs-desc .media .ytlite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 40%);pointer-events:none}
.specs-desc .media .yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6rem;height:6rem;border-radius:999rem;border:1px solid var(--orange);background:rgba(var(--brand-rgb),.9);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.specs-desc .media .yt-play:before{content:"";display:block;border-left:1.6rem solid #fff;border-top:1rem solid transparent;border-bottom:1rem solid transparent;margin-left:.2rem}
.specs-desc .media .yt-play:active{transform:translate(-50%,-50%) scale(.98)}
.specs-desc .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:1rem}
.specs-desc .content{grid-column:2/3;max-width:60ch}
.specs-desc:not([data-has-video="1"]){grid-template-columns:1fr}
.specs-desc:not([data-has-video="1"]) .content{grid-column:auto;margin:0 auto}
@media (max-width:840px){
	.specs-desc{grid-template-columns:1fr;gap:2rem;padding:1rem var(--container-x) 4rem}
	.specs-desc .content{grid-column:auto;max-width:60ch}
}

.also{margin:0 7rem;padding:3.5rem 0 7rem}
.also-title{
	margin:0 0 3rem;
	position: relative;
			font-size: 3rem;
			font-weight: 400;
			letter-spacing: -0.1rem;
			color: rgb(107, 114, 128);
}
.also .prod-row {
	padding: 0;
}


.also .prod-grid{padding-top:0}

.icon-cart{position:relative; display:inline-flex; align-items:center; justify-content:center}
.icon-cart .cart-badge{
	position: absolute;
			top: 1.6rem;
			right: 1.25rem;
			font-family: 'Mont';
			min-width: 1.6rem;
			height: 1.6rem;
			padding: 0 .4rem;
			border-radius: 999rem;
			color: #fff;
			font-weight: 700;
			font-size: 1.2rem;
			line-height: 1.6rem;
			text-align: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.site-actions .icon-cart:after{display:none}

.cart-h1{margin:0 0 0; padding:4rem 0 0; text-align:center; font-size:6rem; letter-spacing:-.3rem}
.cart-wrap{display:grid; grid-template-columns: 1fr .55fr; gap:3.5rem; padding:7rem var(--container-x)}
@media(max-width:1000px){ .cart-wrap{grid-template-columns:1fr; padding:3.5rem var(--container-x)} }

.cart-items{display:grid; gap:1.2rem}
.ci-row{display:grid; grid-template-columns: 12rem 1fr auto 18rem; gap:2rem; background:#fff; border-radius:2rem; padding:2rem; align-items:start; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ci-media{width:12rem; height:12rem; border-radius:1rem; background:#edeff3; overflow:hidden; margin:0}
.ci-media img{width:100%; height:100%; object-fit:contain}
.ci-id{color:#6b7280; font-weight:600; font-size:1.3rem}
.ci-title{display:inline-block; margin:.3rem 0 .7rem; font-weight:700}
.ci-price{font-weight:700; margin-top:.7rem}
.ci-ctrl{display:flex; gap:1.2rem; align-items:flex-start}
.ci-color{width:1.6rem; height:1.6rem; border-radius:50%; border:1px solid #bbb; background:#111; margin-top:.4rem}
.qty-mini{--diam:2.8rem; display:inline-flex; align-items:center; gap:.6rem}
.qty-mini .q-dec,.qty-mini .q-inc{width:var(--diam); height:var(--diam); border-radius:50%; border:1px solid var(--brand-600); background:#fff; color:var(--brand-600); font-size:1.8rem; line-height:1}
.qty-mini .q-dec:hover,.qty-mini .q-inc:hover{background:rgba(var(--brand-rgb),.06)}
.qty-mini .q-val{min-width:3.8rem; height:calc(var(--diam) + .6rem); padding:0 1.2rem; display:grid; place-items:center; border-radius:999rem; background:#edeff3; font-weight:700}
.ci-side{display:flex; flex-direction:column; align-items:flex-end; gap:2rem}
.ci-remove{background:transparent; color:#6b7280; font-weight:600}
.ci-sum .lbl{color:#6b7280; font-weight:600; font-size:1.3rem; text-align:right}
.ci-sum .val{font-weight:800; font-size:2rem}

.cart-reco{padding:3.5rem 0}
.cart-reco h2{text-align:left; font-size:2.6rem; margin:0 0 1.2rem}

.cart-form{background:#fff; border-radius:2rem; padding:3.5rem; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-top:3.5rem}
.cart-form h2{text-align:center; margin:0 0 2rem}
.cart-form fieldset{border:0; padding:0; margin:1.6rem 0}
.cart-form legend{font-weight:700; margin-bottom:1rem}
.f-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem}
.f-item{display:grid; gap:.4rem}
.f-item span{font-size:1.3rem; color:#6b7280; font-weight:600}
.f-item input{height:4.2rem; border-radius:1rem; background:#edeff3; border:1px solid #eeeff3; padding:0 1.2rem}
.f-item.full{grid-column:1/-1}
.f-check{display:flex; align-items:center; gap:.8rem; margin-top:.4rem}
.f-check i{width:1.6rem; height:1.6rem; border:1px solid #bbb; border-radius:.4rem; display:inline-block; position:relative}
.f-check input{position:absolute; opacity:0}
.f-check input:checked + i{border-color:var(--brand); background:linear-gradient(135deg,var(--brand-600),var(--brand-400))}
.f-check.big i{width:1.8rem; height:1.8rem}
.choices{display:grid; gap:1rem}
.choices.x4{grid-template-columns:repeat(4,minmax(0,1fr))}
.choices.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices button{height:4rem; border-radius:1rem; border:1px solid #eeeff3; background:#f8f9fb; font-weight:700}
.choices button.is-on{border-color:var(--brand-600); box-shadow:0 0 0 2px rgba(var(--brand-rgb),.12)}
.form-actions{margin-top:1.4rem}
.form-actions .btn-primary[disabled]{opacity:.5; pointer-events:none}

.cart-right{position:relative}
.cs-card{position:sticky; top:calc(var(--header-h,0px) + 1.2rem); border:1px solid #e5e7eb; border-radius:2rem; padding:2rem; background:#fff}
.cs-card h3{margin:0 0 1rem}
.cs-line{display:flex; justify-content:space-between; align-items:center; padding:.4rem 0}
.cs-note{color:#6b7280; font-size:1.3rem; margin:1rem 0}
.cs-total{display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:2rem; margin:.6rem 0 1.2rem}
.cs-total b{color:var(--brand-800)}
.cs-check{display:inline-flex; align-items:center; justify-content:center; width:100%; height:4.2rem; border-radius:999rem; border:1px solid var(--brand-600)}
.cs-links{display:grid; gap:.7rem; margin-top:1.2rem}
.cs-links a{color:#9aa0a6; font-size:1.3rem}
.cart-empty{background:#fff; border-radius:2rem; padding:2rem; text-align:center}











@media (max-width: 720px){
	:root{
		--container-x:1rem;
		--edge-y:1.2rem;
		--section-gap:3.5rem;
		--header-pad-y:.8rem;
		--btn-diam:4.4rem;
		--icon-size:2rem;
		--logo-h:3.6rem;
		--search-w:12rem;
		--gap-xl:2.4rem;
	}

	body:not(.home) main{padding-top:6.8rem}
	main{border-radius:1.4rem 1.4rem 0 0;min-height:auto;margin-bottom:0}
	main>section{margin-bottom:2rem}
	h1.head,.cart-h1{margin:0 1rem 2rem;font-size:clamp(3rem,8vw,4.2rem);letter-spacing:-.12rem}
	
	.breadcrumbs{padding:.6rem var(--container-x) 0}

	.product-view{grid-template-columns:1fr;gap:1rem;margin:1rem var(--container-x) 2rem;min-height:auto}
	.pv-stick,.pv-panel{position:static;height:auto}
	.pv-stage{margin:.8rem 0;border-radius:1rem}
	.pv-grid{grid-template-columns:1fr 1fr;gap:.8rem;padding:0}

	.pr-body{padding:2rem;border-radius:1rem}
	.pr-title{font-size:2.4rem}
	.pr-desc{margin:1.4rem 0 2rem}
	.pr-cta{padding:1.6rem;gap:.9rem;max-width:none}
	.pr-price .now{font-size:2rem}
	.pr-qty{--diam:2.6rem}
	.pr-actions .btn{height:4rem;line-height:4rem}

	.features{padding:3rem var(--container-x)}
	.features::after{width:0}
	.feat-grid{grid-template-columns:1fr;gap:2rem}
	.features h2{top:0;margin-bottom:.5rem;font-size:2.2rem}
	.feat-top{height:6.8rem}
	.feat-num{height:6rem;min-width:7ch}
	.feat-num .num{font-size:5.2rem}
	.feat-slash,.feat-total{font-size:1.6rem;transform:translateY(-.4rem)}
	.feat-body{min-height:12rem;margin-right:0}
	.feat-title{font-size:2rem}
	.feat-text{font-size:1.5rem}
	.feat-bottom{gap:.8rem}
	.feat-nav{width:4.4rem;height:4.4rem;font-size:1.8rem}
	.feat-line{width:40%;margin-left:2rem}
	.feat-right{gap:1.2rem}
	.feat-fig{aspect-ratio:1/1}

	.specs{padding:3rem var(--container-x)}
	.specs h2,h2.ppp,.specs-desc h3{font-size:1.7rem;margin-bottom:1.2rem}
	.specs-grid{gap:2rem;grid-template-columns:1fr}
	.specs-list{font-size:1.35rem}
	.specs-desc{grid-template-columns:1fr;gap:1.6rem;padding:2rem var(--container-x) 3rem}
	.specs-desc .media{margin:0;border-radius:1rem}
	.also{margin:0 var(--container-x);padding:2rem 0 3rem}

	#cartToast{left:1rem;right:1rem;top:auto;bottom:1rem;grid-template-columns:auto 1fr auto}
	.icon-cart .cart-badge{top:.2rem;right:.2rem}

	.cart-wrap{grid-template-columns:1fr;gap:2rem;padding:2rem var(--container-x) 3rem}
	.cart-right{order:-1}
	.cs-card{position:static;border-radius:1.4rem;padding:1.6rem}
	.cs-total{font-size:1.8rem}
	.cs-check{height:4rem}

	.ci-row{grid-template-columns:7.2rem 1fr auto;gap:1.2rem;padding:1.2rem;border-radius:1.4rem}
	.ci-media{width:7.2rem;height:7.2rem;border-radius:.8rem}
	.ci-title{margin:.2rem 0 .4rem;font-size:1.4rem}
	.ci-price{margin-top:.2rem}
	.ci-ctrl{gap:.8rem}
	.qty-mini{--diam:2.6rem;gap:.5rem}
	.qty-mini .q-val{min-width:3.6rem}
	.ci-side{gap:.8rem}
	.ci-sum .val{font-size:1.7rem}

	.cart-form{padding:2rem;border-radius:1.4rem}
	.f-grid{grid-template-columns:1fr}
	.choices.x4,.choices.x3{grid-template-columns:1fr 1fr}
}





section.content{
	margin-inline:12.5rem;
	padding:3rem var(--pad-x, 2rem) 4rem;
	font-size:1.25rem;
	line-height:1.6;
}

section.content .meta{
	color:#4f5662;
	margin:0 0 2rem;
}

section.content section>div{
	background:#fff;
	border-radius:var(--radius, .75rem);
	padding:2.2rem clamp(1.25rem, 3vw, 3rem) 2.6rem;
	margin-bottom:2rem;
}

section.content h2{
	font-size:2.35rem;
	margin:1rem 0 1.5rem;
	letter-spacing:0;
}

section.content p{
	margin:.75rem 0;
}

section.content ul{
	margin:.5rem 0 .75rem 1.25rem;
}

section.content a{
	color:#0f172a;
	text-underline-offset:.15em;
}

section.content a:hover{
	text-decoration:none;
}

section.content .callout{
	background:#e8f5ef;
	border-left:.25rem solid #0b3d2c;
	border-radius:.5rem;
	padding:.75rem 1rem;
	font-size:1.1rem;
	margin:1rem 0;
	color:#0c2b1e;
}

section.content .small{
	font-size:1.1rem;
	color:#4f5662;
}

section.content .closing{
	border-top:1px dashed var(--line, #d7dbe2);
	margin-top:2rem;
	padding-top:1rem;
}

section.content .note{
	background:#f7fafc;
	border:1px dashed #e5e7eb;
	border-radius:.5rem;
	padding:.75rem .9rem;
	color:#374151;
	font-size:1.1rem;
}

section.content .note p{
	margin:.25rem 0;
}

section.content hr.soft{
	border:0;
	height:1px;
	background:var(--line, #e5e7eb);
	margin:1.5rem 0;
}

section.content .mt-s{
	margin-top:.75rem;
}

section.content .grid{
	display:grid;
}

section.content .gap{
	gap:var(--gap, 1rem);
}

section.content .cols-3{
	grid-template-columns:repeat(3, minmax(0,1fr));
}

section.content .cols-2{
	grid-template-columns:repeat(2, minmax(0,1fr));
}

section.content .span-2{
	grid-column:span 2;
}

section.content .span-3{
	grid-column:1 / -1;
}

section.content form label{
	display:flex;
	flex-direction:column;
	gap:.4rem;
	font-weight:500;
	color:var(--ink, #111827);
	font-size:1.1rem;
}

section.content form .block{
	margin:1rem 0;
}

section.content .req{
	color:#ef4444;
}

section.content :is(input,select,textarea){
	font:inherit;
	color:var(--ink, #111827);
	background:#fff;
	border:1px solid #888;
	border-radius:var(--radius, .5rem);
	padding:.7rem .8rem;
	outline:none;
	box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
	display:block;
	width:100%;
	box-sizing:border-box;
}

section.content textarea{
	resize:vertical;
}

section.content ::placeholder{
	color:#9ca3af;
}

section.content :is(input,select,textarea):focus{
	border-color:var(--focus, #3b82f6);
	box-shadow:0 0 0 .15rem color-mix(in srgb, var(--focus, #3b82f6) 15%, transparent);
}

section.content :is(input,select,textarea)[aria-invalid="true"]{
	border-color:#ef4444;
}

section.content :is(input,select,textarea)[aria-invalid="true"]:focus{
	box-shadow:0 0 0 .15rem rgba(239,68,68,.15);
}

section.content fieldset{
	border:0;
	padding:0;
	margin:0;
}

section.content fieldset.inline{
	display:flex;
	align-items:center;
	gap:1rem;
	flex-wrap:wrap;
}

section.content fieldset.inline legend{
	font-weight:600;
	margin-right:.5rem;
	font-size:1.1rem;
	color:var(--ink, #111827);
}

section.content label.radio{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	font-weight:500;
	color:var(--ink, #111827);
	font-size:1.1rem;
	line-height:1.2;
}

section.content input[type="radio"]{
	width:1.1rem;
	height:1.1rem;
	accent-color:var(--focus, #3b82f6);
	cursor:pointer;
}

section.content .fld{
	position:relative;
	display:block;
	min-inline-size:0;
}

section.content .fld>.flabel{
	position:absolute;
	left:.9rem;
	top:.9rem;
	font-size:1.1rem;
	color:var(--muted, #6b7280);
	line-height:1.2;
	pointer-events:none;
	transition:transform .16s ease, color .16s ease, top .16s ease, font-size .16s ease, background-color .16s ease;
	background:#fff;
	padding:0 .3rem;
	border-radius:.25rem;
}

section.content .fld :is(input,select,textarea){
	padding:1.2rem .9rem .9rem;
}

section.content .fld select{
	appearance:none;
	background-image:linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%);
	background-position:calc(100% - 18px) 1.35rem, calc(100% - 12px) 1.35rem;
	background-size:6px 6px, 6px 6px;
	background-repeat:no-repeat;
}

section.content .fld:focus-within>.flabel{
	color:var(--focus, #3b82f6);
}

section.content .fld:focus-within :is(input,select,textarea){
	border-color:var(--focus, #3b82f6);
	box-shadow:0 0 0 .15rem color-mix(in srgb, var(--focus, #3b82f6) 15%, transparent);
}

section.content .fld :is(input,textarea)::placeholder{
	color:transparent;
}

section.content .fld :is(input,textarea):not(:placeholder-shown)~.flabel,
section.content .fld:has(select) .flabel,
section.content .fld.has-value .flabel,
section.content .fld:focus-within .flabel{
	top:-.72rem;
	font-size:1.1rem;
	transform:translateY(0);
}

section.content .fld .hint{
	display:block;
	margin-top:.35rem;
	color:#6b7280;
	font-size:1.1rem;
}

section.content .fld .err{
	display:block;
	margin-top:.35rem;
	color:#ef4444;
	font-weight:600;
	font-size:1.1rem;
}

section.content .counter{
	margin-top:.35rem;
	color:#6b7280;
	font-size:1.1rem;
	text-align:right;
}

section.content button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.85rem 1.25rem;
	border-radius:.6rem;
	border:1px solid transparent;
	background:#3b82f6;
	color:#fff;
	font-weight:700;
	letter-spacing:.02em;
	cursor:pointer;
	box-shadow:0 6px 20px rgba(59,130,246,.25);
}

section.content button:hover{
	filter:brightness(.98);
}

section.content button:focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
	box-shadow:0 0 0 .15rem rgba(59,130,246,.35);
}

section.content .form-actions{
	display:flex;
	align-items:center;
	gap:1rem;
	margin-top:1rem;
}

section.content #reclamo-submit{
	position:relative;
	padding-right:2.5rem;
}

section.content .btn-spinner{
	position:absolute;
	right:.9rem;
	top:50%;
	transform:translateY(-50%);
	width:1.1rem;
	height:1.1rem;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.5);
	border-top-color:#fff;
	display:none;
	animation:spin .8s linear infinite;
}

@keyframes spin{
	to{ transform:translateY(-50%) rotate(360deg); }
}

section.content .is-loading .btn-spinner{
	display:inline-block;
}

section.content .form-status{
	min-height:1.2rem;
	font-size:1.1rem;
}

section.content .term-box{
	border:1px solid #f0b7ab;
	border-radius:1rem;
	padding:1rem 1.25rem;
	min-height:12rem;
	background:#fff;
}

section.content .term-title{
	font-weight:800;
	margin-bottom:.75rem;
}

section.content .term-box ul{
	margin:.5rem 0 0 1rem;
}

section.content .h4{
	font-weight:800;
	margin:.25rem 0 .5rem;
}

section.content .city .city-body h4{
	margin:.25rem 0 .25rem;
}

section.content .info .h4{
	margin-bottom:.25rem;
}

section.content .contact-split{
	margin-top:1rem;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	background:#fff;
	border:1px solid var(--line, #e5e7eb);
	border-radius:.9rem;
	padding:1rem 1.25rem;
}

section.content .contact-split ul{
	margin:.25rem 0;
}

section.content .accordion{
	--acc-ink:var(--ink, #111827);
	--acc-muted:#6b7280;
	--acc-line:var(--line, #e5e7eb);
	--acc-panel:#fff;
	--acc-accent:#ef4d2d;
	--acc-blue:#3b82f6;
	--acc-radius:1rem;
	margin:1.25rem auto 2rem;
	max-width:75rem;
	font-size:1.25rem;
	line-height:1.8;
}

section.content .accordion details{
	background:transparent;
	border:0;
	border-radius:var(--acc-radius);
	margin:1rem 0;
}

section.content .accordion summary{
	list-style:none;
	cursor:pointer;
	user-select:none;
	background:#fff;
	border:1px solid var(--acc-line);
	border-radius:var(--acc-radius);
	padding:1.1rem 1.5rem;
	font-weight:700;
	font-size:1.7rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-shadow:0 1rem 2rem rgba(17,24,39,.04);
}

section.content .accordion summary::-webkit-details-marker{
	display:none;
}

section.content .accordion summary i{
	width:2.6rem;
	height:2.6rem;
	border:1px solid #e5e7eb;
	border-radius:50%;
	position:relative;
	flex:0 0 auto;
}

section.content .accordion summary i:before,
section.content .accordion summary i:after{
	content:"";
	position:absolute;
	background:#6b7280;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
}

section.content .accordion summary i:before{
	width:1.25rem;
	height:.1rem;
}

section.content .accordion summary i:after{
	width:.1rem;
	height:1rem;
	transition:.2s;
}

section.content .accordion details[open] summary i:after{
	height:0;
}

section.content .accordion .panel{
	margin-top:.75rem;
	background:var(--acc-panel);
	border:1px solid var(--acc-line);
	border-radius:var(--acc-radius);
	padding:1.25rem 1.25rem 1.5rem;
	box-shadow:0 .5rem 1.25rem rgba(17,24,39,.06);
}

section.content .accordion .row{
	display:flex;
	gap:.75rem;
	margin-top:.5rem;
}

section.content .accordion .row input{
	flex:1 1 auto;
	min-width:12rem;
	padding:1.1rem 1.1rem;
	border:1px solid var(--acc-line);
	border-radius:999px;
	outline:none;
	background:#f5f6f8;
}

section.content .accordion .row button{
	padding:1.1rem 1.4rem;
	border-radius:999px;
	border:0;
	background:var(--acc-accent);
	color:#fff;
	font-weight:700;
	cursor:pointer;
}

section.content .accordion .grid{
	display:grid;
}

section.content .accordion .g-2{
	gap:1rem;
	grid-template-columns:1fr 1fr;
	margin:1rem 0;
}

section.content .accordion .card{
	background:#fff;
	border:1px solid var(--acc-line);
	border-radius:.9rem;
	padding:1rem 1.25rem;
}

section.content .accordion .card h3{
	margin:0 0 .75rem;
	font-size:1.55rem;
}

section.content .accordion .steps ol{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1rem;
	margin:1rem 0;
	padding:0;
	list-style:none;
}

section.content .accordion .steps li{
	display:flex;
	gap:.75rem;
	align-items:flex-start;
}

section.content .accordion .steps .num{
	padding: 0 1rem;
	width:2.8rem;
	height:2.8rem;
	border:2px solid var(--acc-accent);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-size:1.15rem;
	line-height:1;
}

section.content .accordion .steps p{
	margin:.15rem 0 0;
}

section.content .accordion .note,
section.content .accordion .muted,
section.content .accordion .bullets,
section.content .accordion .contacts{
	font-size:1.25rem;
}

@media (max-width:64rem){
	section.content .cols-3{ grid-template-columns:1fr 1fr; }
}

@media (max-width:56rem){
	section.content .accordion .g-2{ grid-template-columns:1fr; }
	section.content .accordion .steps ol{ grid-template-columns:1fr; }
}

@media (max-width:40rem){
	section.content .cols-3,
	section.content .cols-2{ grid-template-columns:1fr; }
	section.content .span-2,
	section.content .span-3{ grid-column:auto; }
	section.content .fld>.flabel{ left:.8rem; }
}





/* =========================
   WHOLESALE: LAYOUT & BASE
   ========================= */

.wh-wrap {
  position: relative;
  margin: 1.5rem 7rem;
  padding: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.wh-title a,
.wh-qty input {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.wh-table {
  background: #fff;
  border-radius: 18px;
  padding: 20px 0 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  margin-top: 18px;
  margin-bottom: 60px;
}

.wh-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.wh-table tbody tr:nth-child(odd) {
  background: #fbfbfb;
}
.wh-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.wh-table tbody tr.wh-row {
  transition: background .18s ease;
}

.wh-table tbody tr.wh-row.is-active {
  background: rgba(209, 250, 245, .33);
}

.wh-table tbody tr.wh-row.has-qty {}


/* =========================
   HEADERS & CELLS
   ========================= */

.wh-table th {
  width: 13rem;
  text-align: center;
  font-weight: 600;
  padding: 10px;
  white-space: nowrap;
  font-size: 1.3rem;
  color: var(--focus);
}
.wh-table th b {
  padding: 0 1rem;
}
.wh-table th:first-of-type {
  width: 8rem;
}
.wh-table th.wdth {
  width: auto;
  text-align: left;
  line-height: 2.0rem;
}
.wh-table th.rgt {
  text-align: right;
}

.wh-table td {
  padding: 10px;
  vertical-align: middle;
  line-height: 1.9rem;
}
.wh-table td > a {
  font-size: 1.4rem;
}

.wh-table td > span {
  position: relative;
  display: block;
  padding: 0 1rem;
  text-align: right;
}

.wh-table td i {
  position: absolute;
  left: 0;
  font-style: normal;
}


/* =========================
   IMAGE & TITLE
   ========================= */

.wh-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  text-align: center;
  border: 1px solid #f2f2f2;
}

.wh-title a {
  font-weight: 600;
  color: #111;
  text-decoration: none;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}

.wh-sub .box {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 20px;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 15px;
  background: rgb(209, 250, 245);
  color: #009B90;
  padding: 1px 8px 0 4px;
}

.wh-sub .box .ico-box {
  position: relative;
  top: 0px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--focus);
}

.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: var(--c);
}

.wh-sub .color-dot {
  position: relative;
  top: -3px;
  width: 9px;
  height: 9px;
}


/* =========================
   STOCK
   ========================= */

.wh-stock {
  font-weight: 600;
  font-size: 8px;
  color: #009B90;
  text-align: center;
}


/* =========================
   QTY INPUTS
   ========================= */

.wh-qty .qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wh-qty input {
  width: 63px;
  height: 35px;
  padding: 0;
  text-align: center;
  border-radius: 25px;
  background: #eeeff3;
}

.wh-qty input[type="number"]::-webkit-inner-spin-button,
.wh-qty input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wh-qty input[type="number"] {
  -moz-appearance: textfield;
}

.wh-qty button {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  border: 0;
  background: #dddeee;
  cursor: pointer;
  color: #888;
  font-weight: 700;
}

.wh-table tbody tr:nth-child(odd) input,
.wh-table tbody tr:nth-child(odd) button {
  background: #fff;
}

.wh-table tbody tr .wh-qty button:hover {
  background: var(--orange);
  color: #fff;
}


/* =========================
   PRICES & TOTAL
   ========================= */

.wh-table td.wh-unit-price,
.wh-table td.wh-box-price,
.wh-table td.wh-wh-price {
  text-align: right;
  white-space: nowrap;
  color: #aaa;
}

.wh-unit-price,
.wh-box-price,
.wh-wh-price {
  transition: background .18s ease, color .18s ease;
}

.wh-table .wh-unit-price.is-active,
.wh-table .wh-box-price.is-active,
.wh-table .wh-wh-price.is-active {
  background: rgb(209, 250, 245);
  color: #000;
}

/* и сам префикс S/ внутри активной цены */
.wh-table td.is-active i {
  color: #009B90;
}

/* Total в строке: аккуратное выравнивание и иконка валюты */
.wh-total span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fbfbfb;              /* по умолчанию сливаем с серым фоном */
  transition: color .18s ease;
}

.wh-table tbody tr:nth-child(even) .wh-total span {
  color: #ffffff;
}

.wh-table tbody tr.wh-row.has-qty .wh-total span {
  color: #111;
}


/* =========================
   SUMMARY / WHATSAPP
   ========================= */

.wh-summary {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.wh-wa-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: #25D366;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.wh-wa-btn:hover {
  background: #1ebe57;
}


/* =========================
   BUMP ANIMATION
   ========================= */

.is-bump {
  animation: wh-bump .22s ease-out;
}

@keyframes wh-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}


/* =========================
   FLOATING SUMMARY (FAB)
   ========================= */

.wh-fab-wrap {
  position: fixed;
  left: 2.4rem;
  bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

/* показываем блок, когда есть заказ */
.wh-fab-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* эллипс с корзиной и суммой */
.wh-fab-summary {
  min-width: 230px;
  max-width: 380px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 20%, var(--brand-400) 0%, var(--brand-500) 48%, var(--brand-700) 78%), linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  font-size: 13px;
}

/* круглая кнопка с иконкой корзины */
.wh-fab-buy {
  border: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.88);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease, transform .12s ease;
}
.wh-fab-buy:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-1px);
}
.wh-fab-buy:active {
  transform: translateY(1px) scale(.97);
}

.wh-fab-ico {
  width: 22px;
  height: 22px;
}

/* текстовая часть в эллипсе */
.wh-fab-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
}
.wh-fab-summary-main strong {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 800;
}
.wh-fab-summary-meta {
  font-size: 12px;
  opacity: .9;
}
.wh-fab-qty {
  font-weight: 600;
}
.wh-fab-total {
  font-weight: 700;
  white-space: nowrap;
}

.wh-fab-tooltip {
  position: absolute;
  left: 0.4rem;
  bottom: 5rem;
  max-width: 260px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wh-fab-tooltip::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: -6px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}
.wh-fab-tooltip.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
  .wh-wrap {
    margin: 1rem;
    padding: 16px 10px;
  }

  .wh-fab-wrap {
    left: 1rem;
    bottom: 1rem;
  }

  .wh-fab-summary {
    max-width: 100%;
    padding-right: 12px;
  }
}





/* ===== MODAL: Pedido mayorista ===== */

.wh-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.wh-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wh-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}

.wh-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 40px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(.98);
  transition: transform .22s ease;
}

.wh-modal.is-open .wh-modal__dialog {
  transform: translateY(0) scale(1);
}

.wh-modal__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.wh-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.wh-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wh-modal__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.wh-modal__fieldset + .wh-modal__fieldset {
  margin-top: 4px;
}

.wh-modal__fieldset legend {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.wh-modal__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  font-size: 14px;
}

.wh-modal__delivery-extra {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.wh-modal__delivery-extra input,
.wh-modal__delivery-extra select,
.wh-modal__form select[name="payment_method"],
.wh-modal__form textarea[name="customer_notes"] {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  font-size: 14px;
}

.wh-modal__form textarea[name="customer_notes"] {
  resize: vertical;
  min-height: 70px;
}

.wh-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.wh-modal__cancel,
.wh-modal__submit {
  border-radius: 999px;
  border: 0;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
}

.wh-modal__cancel {
  background: #f3f4f6;
  color: #111827;
}

.wh-modal__cancel:hover {
  background: #e5e7eb;
}

.wh-modal__submit {
  color: #fff;
  background:
    radial-gradient(120% 150% at 20% 0%, var(--brand-400) 0%, var(--brand-500) 40%, var(--brand-700) 100%);
}

.wh-modal__submit:hover {
  filter: brightness(1.03);
}

/* Блокируем скролл страницы, когда модалка открыта */

.wh-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .wh-modal__dialog {
    width: calc(100% - 16px);
    max-height: calc(100% - 20px);
    padding: 16px 14px 14px;
  }
}










/* бейдж в карточке */
.p-status--preventa {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: #1e88e5;   /* синий */
  color: #fff;
}

/* статус на странице товара */
.pr-stock--preventa {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  background: #1e88e5;
  color: #fff;
}

.p-preventa-label {
    display: inline-flex;
    justify-content: center;
    margin-left: 0.6rem;
    padding: 0 0.8rem;
    min-height: 2.4rem;
	line-height: 2.4rem;
    border-radius: 999rem;
    border: 1px solid #1e88e5; /* синий контур */

    background: transparent;
    color: #1e88e5;

    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    user-select: none;
}





body:not(.home) header .nav-search input {
	color: #444;
}