: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; /* hover/активные */
	  --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; /* hover */
    --accent-warm-700:#C44F00;
	
	--c-primary: var(--brand-800);
	  --c-accent:  var(--brand-600);
	  --orange:    var(--brand);     /* ВАЖНО: всё, что у тебя было на --orange, станет Tiffany */
	  --focus:     var(--brand-600);
	
	
	
	/* --c-accent: rgb(88, 214, 204); */
	/* --orange: var(--c-accent); */
	/* # ff6400 */
	--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: 24vw;

	--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);
	
}


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

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(--c-primary);
	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
}

@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
}



.hero {
	position:relative;
	width:100%;
	height:85svh;
	min-height:60rem;
	overflow:hidden;
	background:#000;
	--i:0;
	touch-action: pan-y;
}

.hero__track {
	position:absolute;
	inset:0;
	display:flex;
	transform:translate3d(calc(var(--i)*-100%),0,0);
	transition:transform .9s cubic-bezier(.2,.7,.2,1);
	will-change:transform;
}

.hero__track>figure {
	position:relative;
	flex:0 0 100%;
	margin:0;
	background:#000;
	--k:0;
}

.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 1.2s cubic-bezier(.2,.7,.2,1);
	will-change:transform;
}

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

/*
.hero-nav {
	position:absolute;
	right:7rem;
	bottom:3.5rem;
	display:flex;
	align-items:center;
	gap:1rem;
	z-index:2;
}

.hero-nav button {
	width:6rem;
	height:6rem;
	border-radius:50%;
	border:1px solid var(--orange);
	background:rgba(255,100,0,.9);
	color:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:1;
	transition:background .2s ease;
}
.hero-nav button:hover,
.hero-nav button:focus-visible {
	background:rgba(255,100,0,.6);
}

.hero-prev::before,
.hero-next::before {
	font-family:"Icon"; font-size:2.4rem;
}
.hero-prev::before {
	content:"";
}
.hero-next::before {
	content:"";
}
*/


.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(255,100,0,.9);*/
	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(255,100,0,.5);*/
	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:50%;
	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:600;
	font-size:5.5rem;
	line-height:1.1;
	letter-spacing:-0.3rem;
}

.hero-caption p {
	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:translateY(-75%);
	transition:opacity .25s ease, transform .25s ease;
}

.hero__track>figure.is-active .hero-caption {
	opacity:1;
	transform:translateY(-50%);
	transition-delay:.12s;
}

.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);
}

/* Основная: плотный fill, читаемый белый текст (контраст ок) */
.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; }

/* Тёплая «сигнальная» (бейджи, CTA второго плана) */
.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));
}






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: var(--orange);
	color:#fff;
	font-weight: 700;
	white-space:nowrap;
	z-index:11;
}
.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.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(120%) blur(2px);
	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: var(--brand-700) !important;
}
.nav-search .search-hint {
	position: absolute; left: 14rem; top: 55%;
	transform: translateY(-50%);
	pointer-events: none;
	color: 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: .6rem .8rem; border-radius: .6rem;
}

.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: 20px; right: 20px;
	padding: var(--header-pad-y-topbar) 5rem !important;
	background:rgba(255,255,255,.55);
	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.is-topbar-show header{
	transform:translateY(0);
}
body.is-topbar header .site-logo	{
	display: block;
}
body.is-topbar header .nav-search {
	color: #000;
	border-color: transparent;
	background: rgba(255,255,255,.9);
}
body.is-topbar header .nav-catalog {
	background: var(--orange);
	color: #fff;
}
body.is-topbar .site-actions {
	gap: 1rem;
	font-size: 2rem;
	color: #000;
}
body.is-topbar .site-nav > a {
	display: none;
}

@media (max-width: 720px) {
	header	{
	gap: .8rem; padding: .8rem 1rem;
}
	.site-nav	{
	gap: .8rem;
}
	.nav-search input	{
	width: 12rem;
}
}



body.is-catalog {
	overflow:hidden;
}

.catalog {
	position:fixed; inset:0; z-index:20;
	display:grid; grid-template-columns: 1fr 1fr;
	opacity:0; visibility:hidden; pointer-events:none;
	padding: var(--edge-y) var(--container-x);
	background: var(--c-primary); color:#fff;
	transition: opacity var(--t-med) ease;
}
body.is-catalog .catalog {
	opacity:1; visibility:visible; pointer-events:auto;
}

.catalog-left {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}
.catalog-tiles {
	position: relative;
	width: 100%;
	height: 40vh;
	--cols: 6; /* было 16 — крупнее ≈ в 3 раза */
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: var(--catalog-gap);
	align-content: stretch;
	justify-items: stretch;
}

#catalogTiles .tile {
	aspect-ratio: 1/1;
	width: 100%;
	transform: translateZ(0) scale(var(--s,1));
	transition: transform .45s cubic-bezier(.2,.7,.2,1),
			border-radius .45s cubic-bezier(.2,.7,.2,1);
	will-change: transform, border-radius;
}

#catalogTiles .tile.off {
	/* круг → радиус 0 */
	border-radius: 50% !important;
	transform: translateZ(0) scale(0);
}

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

.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;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s;
	letter-spacing: -0.15rem;
}
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;
}

.catalog-list a {
	transition: transform .28s ease, letter-spacing .28s ease, opacity .5s;
	will-change: transform;
}

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

@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;
}
}

header {
	z-index:100;
}

.catalog {
	z-index:50; padding-top:calc(var(--edge-y) + var(--header-h,0px));
}

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

.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;
}

/* «исчезновение» — не просто прозрачность: лёгкий масштаб + blur */
#catalogTiles .tile.off {
	opacity: 0;
	transform: translateZ(0) scale(.78) rotate(.4deg);
	filter: blur(2px);
}

/* формы для DOCE */
#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;
}

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



@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(255,100,0,.9);*/
		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}
}





.fab-call {
	position: fixed;
	right: var(--container-x);
	bottom: var(--edge-y);
	z-index: 90;
	width: var(--btn-diam); height: var(--btn-diam);
	border-radius: var(--r-pill);
	/*background: var(--orange);
	border:1px solid var(--orange);*/
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	/*box-shadow: 0 6px 18px rgba(255,100,0,.25);*/
	background: var(--orange);
	border:1px solid var(--orange);
	box-shadow: 0 6px 18px rgba(var(--brand-rgb), .25);
	transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
	cursor: pointer;
}
.fab-call:hover,
.fab-call:focus-visible {
	/*box-shadow: 0 10px 26px rgba(255,100,0,.32);*/
	box-shadow: 0 10px 26px rgba(var(--brand-rgb), .32);
}
.fab-call:active {
	transform: scale(.96);
}

.fab-call::before,
.fab-call::after {
	content:"";
	position:absolute;
	left:50%; top:50%;
	width:100%; height:100%;
	border-radius:50%;
	/*border: .22rem solid rgba(255,100,0,.55);*/
	border: .22rem solid rgba(var(--brand-rgb), .55);
	transform: translate(-50%,-50%) scale(1);
	opacity: .45;
	z-index: -1;
	pointer-events: none;
	animation: fabPulse 2.8s ease-out infinite;
}
.fab-call::after {
	animation-delay: 1.4s;
}

@keyframes fabPulse {
	0%	{
	transform: translate(-50%,-50%) scale(1);	 opacity: .45;
}
	70%	 {
	opacity: .08;
}
	100%	{
	transform: translate(-50%,-50%) scale(2.4); opacity: 0;
}
}

@media (max-width: 720px) {
	.fab-call {
	right: 1rem; bottom: 1rem;
}
}

.anticrs {
	cursor: auto !important;
}

.fab-call .icon-phone {
	display:inline-block;
	line-height:1;
	font-size: var(--icon-size);
	color:#fff;
	cursor: pointer;
}





/* HERO CTA — контур + полупрозрачный фон, белый текст, «оранжевый шарик» слева */
.hero .btn-cta {
	--btn-h: 5.2rem;
	--pad-x: 2.0rem;
	--dot: .9rem;

	position: relative;
	display: inline-flex;
	align-items: center;
	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,.95);
	background: rgba(0,0,0,.35);
	color:#fff;
	overflow:hidden;
	isolation:isolate; /* чтобы ::before был под текстом, но над фоном */
	backdrop-filter: saturate(120%) blur(1px);
	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; /* под текстом, над фоном */
}

/* Анимационные состояния (ставит JS) */
.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 800ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .btn-cta.is-out::before {
	animation: hero-cta-morph 800ms cubic-bezier(.2,.7,.2,1) reverse forwards;
}


@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);
	}
	45% {
	left: calc(var(--pad-x));
	border-radius: var(--r-pill);
	transform: translateY(-50%) scale(40); /* заливка всей кнопки */
	}
	60% {
	transform: translateY(-50%) scale(40);
	}
	100% {
	left: calc(100% - var(--pad-x) - 1.2rem);
	width: 1rem;
	height: 1.2rem; /*calc(var(--btn-h) * .66);*/
	transform: translate(-100%,-50%) scale(1);
	/* «D» (полукруг вправо) */
	border-radius: 0 var(--r-pill) var(--r-pill) 0 / 0 var(--r-pill) var(--r-pill) 0;
	}
}

/* Аккуратное поведение при reduce-motion */
@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;
}
}



.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;
}



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




.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:hover{
	transform: translateY(-2px);
	border-radius: var(--r-xl);
}
.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), .00) 100%
	);
	transition: opacity .35s var(--ease);
}

.m-item img{
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.m-item:hover img{ transform: scale(1.05); }

.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-item:hover .m-caption{ transform: translate(-50%,-12px); }
.m-item:hover .m-caption,
.m-item:focus-visible .m-caption{ row-gap: .35rem; }

.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);
}

.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::after,
.m-item:focus-visible::after{
	opacity:1;
}

.m-item:hover .m-sub,
.m-item:focus-visible .m-sub{
	opacity:1;
	transform: translateY(0);
	max-height: 6.4rem;
}

@media (max-width: 920px){
	.mosaic{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
	.mosaic{ grid-template-columns: 1fr; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce){
	.m-item::after{ transition:none }
	.m-sub{ transition:none }
}





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);
}





/* Productos — limpio y coherente con токены locales */
.prod{
	--pad-x: 7rem;
	--gap: 2.8rem;
	--pill-h: 5.2rem;
	--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;
}
@media (max-width:720px){ .prod{ --pad-x:1rem; } }

/* Pills */
.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) 2rem;
}
.pill{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	height: var(--pill-h);
	padding: 0 var(--pill-pad-x);
	min-width: var(--pill-min);
	border-radius: 999rem;
	background:#fff;
	color: var(--fg);
	border:1px solid rgba(0,0,0,.08);
	font-weight:600; letter-spacing:-.01em; line-height:1;
	transition:
		transform var(--dur-fast) ease,
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}
.pill:hover,
.pill:focus-visible{ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.pill:active{ transform: translateY(1px); }
.pill.is-active,
.pill[aria-selected="true"]{ border-color: var(--orange); }

/* Carril de tarjetas */
.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); /* ← сюда перенесли 7rem */
}
@media (max-width:720px){
	.prod-row{
		--per:2;
		overflow-x:auto;					 /* мобайл тянем пальцем */
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
	}
}
@media (hover:hover) and (pointer:fine){
	.prod-row{ overflow: hidden; } /* десктоп — скроллим кодом/драгом */
}

.prod-row[hidden]{ display:none; }
.prod-row .prod-card{ scroll-snap-align: start; }
@media (max-width:720px){ .prod-row{ --per:2; } }

/* Tarjeta (stub) */
.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:2;
	color:var(--orange); font-weight:600; font-size:1.3rem;
	z-index: 3;
}

.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{
	width:100%; height:100%;
	object-fit:contain; object-position:center;
	transform:scale(1); transition:transform .35s var(--ease);
}
.p-card:hover .p-img img{ transform:scale(1.03); }

.p-img img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	opacity:0; transform:scale(1); transition:opacity .35s var(--ease), transform .45s var(--ease);
	pointer-events:none; /* чтобы не мешали drag по ряду */
}
.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 */
}
.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.35 * 3);
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.p-title a{ color:inherit }
.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-colors::after{
	content:""; position:absolute; top:0; right:0; bottom:0; width:36px;
	background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 100%);
	pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.p-colors::after{ opacity:1; }

.p-col{
	position: relative;
	appearance:none;
	border: 1px solid #7a7a7a;
	width:22px;
	height:22px;
	border-radius:50%;
	background:var(--c,#000);
	flex:0 0 auto;
	transition:transform .08s ease, box-shadow .18s ease, border-color .18s ease;

	-webkit-user-select: none;
	    -moz-user-select: none;
	    user-select: none;
}
/*
.p-col::after{
	border: 1px solid #7a7a7a;
	    border-radius: 50%;
	    bottom: -4px;
	    content: "";
	    left: -4px;
	    position: absolute;
	    right: -4px;
	    top: -4px;
	    transition: all .3s ease;
}
*/
.p-col:is(:hover,:focus-visible){ box-shadow:0 0 0 3px #fff inset, 0 0 0 0px #000; }
.p-col.is-active{
	/* box-shadow:0 0 0 3px #fff inset, 0 0 0 0px #000; */
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25);
}

.p-buy{ display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.p-price{
	display:flex;
	align-items:center;
	gap:.8rem;
	white-space:nowrap;
	font-size: 1.8rem;
}
.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;
	/*align-items:center;*/
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid var(--brand-100);
	line-height: 3.2rem;
	font-size:2rem; 
	color: var(--brand-700);
	transition:background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}
.p-cart:hover, .p-cart:focus-visible{
	background: var(--orange);
	border-color: var(--orange);
	color:#fff;
}
.p-cart:active{ transform:scale(.96); }

/* Dots inteligentes */
.prod-dots{
	--slot: calc(var(--dot) + var(--dot-gap));
	width: calc(var(--slot) * var(--dots-visible) - var(--dot-gap));
	margin: 0 auto;
	position: relative;
	height: var(--dot);
}
.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); height: var(--dot);
	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; }

@media (hover:hover) and (pointer:fine){ .prod-row{overflow:hidden} }
@media (max-width:720px){ .prod-row{overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth} }
.prod-row::-webkit-scrollbar{display:none}
.prod-row{scrollbar-width:none}





/* Тултип по 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);
}






/* ===== Revista Print Maestro ===== */
.mag{ padding: var(--section-pad-y-s) var(--container-x) 7rem; }
.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); } }
@media (max-width:560px){	.mag-grid{ grid-template-columns:1fr; } }

.mag h2 {
	text-align: center;
}

.mag-card{
	padding-bottom: 3.5rem;
	background:#fff;
	border-radius: var(--r-xl);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	overflow:hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.mag-card:hover{
	transform: translateY(-2px);
	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;
}
.mag-media img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
	transform: scale(1);
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.mag-card:hover .mag-media img{ transform: scale(1.04); }

.mag-body{
	padding: 1.6rem 2rem 2rem;
	display:grid; gap:.6rem;
}
.mag-title{
	margin: 1.5rem 0 .5rem;
	font-weight:400;
	font-size: 2.2rem;
	line-height:1.2;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.mag-desc{
	color:#000;
	opacity:.9;
	font-size: 1.2rem;
	line-height:1.45;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}


/* ===== Footer (adaptado a los tokens actuales) ========================= */
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);

	position: fixed;
	top: 0; right: 0; left: 0; bottom: 0;
	background:var(--ft-bg);
	color:var(--ft-fg);
	
	transform: translateY(var(--ft-ty,20%));
	will-change: transform;
}

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 form{ display:flex; gap:.8rem; align-items:center; }
footer input[type="email"]{
	flex:1 1 24rem; min-width:16rem;
	height: 4rem; padding:0 1.5rem;
	border-radius: var(--ft-radius);
	border:1px solid var(--ft-line);
	background: var(--ft-card);
	color: var(--ft-fg);
	outline: none;
}
footer input::placeholder{ color:#9b9b9b; }
footer button{
	height:4rem; padding:0 1.5rem;
	border-radius: var(--ft-radius);
	border:1px solid var(--ft-line);
	background:#fff; color:#111; font-weight:600; cursor:pointer;
}
footer button:focus-visible,
footer input:focus-visible{
	outline:2px solid var(--focus, var(--orange)); outline-offset:2px;
}

/* соцсети */
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);
	transition: background .2s ease, transform .08s ease;
}
footer .social svg {
	width: 1.8rem;
}
footer .social a:hover{ background:#1a1a1a; }

/* разделители */
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(--ft-fg); }

/* низ */
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 (max-width: 64rem){
	footer .top{ grid-template-columns: 1fr; gap:1.25rem; }
}
@media (max-width: 48rem){
	footer nav{ grid-template-columns: 1fr 1fr; }
}
.showmob{ display:none !important; }
@media (max-width: 30rem){
	footer .bottom{ flex-direction:column; align-items:flex-start; gap:1rem; }
	footer h1{ font-size:2.1rem; max-width:26ch; }
	.hidemob{ display:none !important; }
	.showmob{ display:block !important; }
}





body:not(.home) main { padding-top:9rem; }
body:not(.home) header { color: #000; }
body:not(.home) header a { color: #000; }
body:not(.home) header [class^="icon-"],
body:not(.home) header [class*=" icon-"] { color: #000; }
body:not(.home) header form { background: #fff; }
body:not(.home) header .site-nav > a { display: none; }
/* body:not(.home) header .site-logo { display: block; }
body:not(.home) header .site-logo img { top: 2.5rem; height: 6rem; } */

/* ===== Catalog controls: layout */
.catalog-controls{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.8rem 1.2rem;
	padding:1rem var(--container-x) 0; /* 7rem слева/справа */
}

/* левая часть — «баблы», тянется; правая — сорт, прижимается */
.cat-bubbles{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	flex:1 1 auto;
	min-width:320px;
	text-transform: uppercase;
}

.cat-bubbles a{
	display:inline-flex;
	align-items:center;
	gap:.6rem;
	height:3.2rem;
	padding:0 1.5rem;
	border-radius:999rem;
	border:1px solid #fff;
	background:#fff; color:#111;
	font-weight:400; font-size:1.3rem; line-height:1;
	white-space:nowrap;
	transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-bubbles a:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.cat-bubbles a.is-active{
	border-color:var(--orange); background:#fff;
	box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .15) inset;
	color: var(--brand-700);
	font-weight: 600;
}

/* «...» — как бабл, но кружок */
.cat-more{ position:relative; }
.cat-more__btn{
	width:3.2rem; height:3.2rem; border-radius:999rem;
	border:1px solid rgba(0,0,0,.12);
	background:#fff; color:#111; font-weight:700; line-height:1;
}
.cat-more__btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px); }

/* меню «прочих» — шире, без переносов */
.cat-more__menu{
	position:absolute; left:0; top:calc(100% + .4rem);
	min-width:clamp(22rem, 28vw, 32rem);
	max-height:60vh; overflow:auto; white-space:nowrap;
	background:#fff; border-radius:.6rem;
	box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	padding:.4rem; display:none; z-index:5;
}
.cat-more__menu a{
	display:block; padding:.7rem 1rem; border-radius:.4rem;
	color:#111; font-weight:600; font-size:1.3rem;
}
.cat-more__menu a:hover,
.cat-more__menu a:focus-visible{ background:#f2f3f5; }
.cat-more__menu a.is-active{ background:#f2f3f5; }

/* открытие подменю по hover/focus */
.cat-more:hover .cat-more__menu,
.cat-more:focus-within .cat-more__menu{ display:block; }

/* ===== Sort (справа) */
.sort{
	position:relative;
	flex:0 0 auto;
	margin-left:auto;
	align-self:flex-start;
	margin-top: .6rem;
}

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

/* меню сортировки — шире, без переносов */
.sort-menu{
	position:absolute; right:0; top:calc(100% + .4rem);
	min-width:clamp(22rem, 26vw, 30rem);
	background:#fff; border-radius:.6rem;
	box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	padding:.4rem; display:none; z-index:6; white-space:nowrap;
}
.sort[aria-expanded="true"] .sort-menu,
.sort:hover .sort-menu,
.sort:focus-within .sort-menu{ display:block; }
.sort-menu button{
	display:block; width:100%; text-align:left;
	padding:.7rem 1rem; border-radius:.4rem;
}
.sort-menu button:hover,
.sort-menu button:focus-visible{ background:#f2f3f5; }
.sort-menu button[aria-current="true"]{ background:#f2f3f5; font-weight:600; }

/* ===== Grid (без изменений, только мобила) */
.prod-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap,1.6rem); padding:1.5rem var(--pad-x) 2.5rem; }
@media (max-width:1024px){ .prod-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){
	.catalog-controls{ flex-direction:column; align-items:stretch; }
	.prod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}




.doce-cats {
	background: var(--c-primary);
	color:#fff;
	padding: var(--section-pad-top-lg) var(--container-x) 3rem;
}
@media (max-width:960px) {
	.doce-cats {padding-left:1rem;padding-right:1rem;}
}

.doce-grid {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap: var(--gap-2xl);
	text-align:center;
}
@media (max-width:1024px) {
	.doce-grid {grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px) {
	.doce-grid {grid-template-columns:1fr;}
}

.doce-item {
	--fill:transparent;
	display:grid;
	grid-template-rows:auto auto;
	align-items:start;
	row-gap:3rem;
}
.doce-item.is-c {--fill:var(--c-cyan);}
.doce-item.is-m {--fill:var(--c-magenta);}
.doce-item.is-y {--fill:var(--c-yellow);}
.doce-item.is-k {--fill:var(--c-black);}

.doce-fig {
	display:block;
	width:100%;
	aspect-ratio:1/1;
	position:relative;
	overflow:hidden;
	background:rgba(255,255,255,.06);
	transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.doce-fig:hover {transform:translateY(-2px);}
.doce-fig>video {
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	transform:scale(1.02);
	transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;
	opacity:.98;
}

.doce-fig.circle {border-radius:50%;}
.doce-fig.square {border-radius:0%;}
.doce-fig.semi-l {border-radius:50% 0 0 50%/50% 0 0 50%;}
.doce-fig.semi-r {border-radius:0 50% 50% 0/0 50% 50% 0;}

.doce-fig .ink {
	position:absolute;inset:0;
	background:var(--fill);
	opacity:0;
	pointer-events:none;
	transition:opacity .45s cubic-bezier(.2,.7,.2,1);
}
.doce-item:hover .doce-fig .ink,
.doce-item:focus-within .doce-fig .ink {opacity:1;}
.doce-item:hover .doce-fig>video,
.doce-item:focus-within .doce-fig>video {opacity:0;transform:scale(1.02);}

.doce-meta {display:block;}
.doce-title {
	display:inline-block;
	font-weight:600;
	letter-spacing:-.01em;
	font-size:clamp(2.2rem,2.2vw,3.2rem);
	line-height:1.15;
	transition:transform .35s cubic-bezier(.2,.7,.2,1),text-shadow .35s,color .35s;
}
.doce-item:hover .doce-title,
.doce-item:focus-within .doce-title {
	transform:translateY(-6px);
	color:#fff;
	text-shadow:0 1px 0 rgba(0,0,0,.15),0 0 18px rgba(255,255,255,.2);
}

.doce-links {
	margin-top:.6rem;
	display:grid;
	gap:.4rem;
}
.doce-links li {
	opacity:0;
	transform:translateY(8px);
	transition:opacity .35s,transform .35s;
}
.doce-item:hover .doce-links li,
.doce-item:focus-within .doce-links li {
	opacity:1;transform:translateY(0);
}
.doce-item:hover .doce-links li:nth-child(1),
.doce-item:focus-within .doce-links li:nth-child(1) {transition-delay:.05s;}
.doce-item:hover .doce-links li:nth-child(2),
.doce-item:focus-within .doce-links li:nth-child(2) {transition-delay:.10s;}
.doce-item:hover .doce-links li:nth-child(3),
.doce-item:focus-within .doce-links li:nth-child(3) {transition-delay:.15s;}
.doce-item:hover .doce-links li:nth-child(4),
.doce-item:focus-within .doce-links li:nth-child(4) {transition-delay:.20s;}
.doce-item:hover .doce-links li:nth-child(5),
.doce-item:focus-within .doce-links li:nth-child(5) {transition-delay:.25s;}
.doce-item:hover .doce-links li:nth-child(6),
.doce-item:focus-within .doce-links li:nth-child(6) {transition-delay:.30s;}

.doce-links a {
	display:inline-block;
	padding:.2rem .4rem;
	border-radius:.5rem;
	background:rgba(255,255,255,.06);
	transition:background .25s ease,transform .2s ease;
}
.doce-links a:hover,
.doce-links a:focus-visible {
	background:rgba(255,100,0,.18);
	transform:translateX(2px);
}
.doce-links sup {opacity:.7;font-size:.7em;margin-left:.15em;}



.breadcrumbs{padding:1.4rem 8.4rem 0;font-size:1.3rem}
.breadcrumbs ol{
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
	color:#949494;
	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: .4rem;font-weight:400;}
.breadcrumbs a{color:inherit}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs .is-current{color:#949494}
.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;
}



 

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