/* =====================================================================
   Пробный дизайн по скиллу design-taste (DESIGN_VARIANCE 8, MOTION 6, DENSITY 4).
   Подключается только при ?taste=1 (класс .taste на <body>), основной дизайн не трогает.
   Принципы: один акцент (изумруд) на нейтральной базе, гротеск вместо засечек,
   асимметричная бенто-сетка продуктов, меньше карточек (строки с линиями),
   движение только transform и opacity, всё живое отключается при «уменьшить движение».
   ===================================================================== */

.taste{
  --serif:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --paper:#FAFAF9;
  --mist:#F2F3F1;
  --line:#E3E5E1;
  --ink:#181C1A;
  --muted:#5D6460;
  --brass:#0E5240;              /* латунь убрана: остаётся один акцент */
  --ease-taste:cubic-bezier(.16,1,.3,1);
  /* пастельная палитра главной сводится к нейтральной и изумрудному оттенку */
  --p-mint:#EDF3EF;--p-blush:#F3F4F2;--p-lav:#F3F4F2;--p-sand:#F3F4F2;--p-sky:#EDF3EF;
}

/* ---------- типографика: плотный гротеск, иерархия весом, а не размером ---------- */
.taste h1,.taste h2,.taste h3,.taste .card h3,.taste .item h3,.taste .doc h3,.taste .contacts h3,
.taste .step h3,.taste footer.site h3,.taste .video-text h3{font-weight:600;letter-spacing:-.03em}
.taste h1{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.03;letter-spacing:-.045em}
.taste h2{line-height:1.06;letter-spacing:-.035em}
.taste .logo{font-weight:600;letter-spacing:-.02em}
.taste .lede{color:var(--muted)}
.taste .head{max-width:52rem}
.taste .head::before{width:28px;height:2px;border-radius:2px}
.taste .proof .wrap > div b,.taste .card .cost,.taste .item .cost,.taste .product .cost,.taste .status b{font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.taste blockquote p{font-weight:500;letter-spacing:-.01em}

/* ---------- кнопки: мягкие углы и физическое «нажатие» ---------- */
.taste .btn{border-radius:14px;transition:transform 300ms var(--ease-taste),background-color var(--t-hover) ease,border-color var(--t-hover) ease,color var(--t-hover) ease}
.taste .btn:active{transform:scale(.98)}
.taste .top{background:rgba(250,250,249,.86)}

/* ---------- первый экран: асимметрия, фото сдвинуто вниз и «парит» ---------- */
.taste.home .hero{background:radial-gradient(1100px 520px at 88% 6%,#E3EDE8 0%,rgba(227,237,232,0) 62%),var(--paper);padding-block:clamp(2.4rem,6vw,4.6rem) clamp(3.6rem,8vw,6.5rem)}
.taste.home .hero h1{max-width:11em}
.taste.home .hero .lede{max-width:34rem}
.taste.home .hero-figure::before{background:linear-gradient(145deg,#D9E7E0,#F0F3F1);inset:-18px 22px 22px -18px;border-radius:32px}
.taste.home .hero-figure img{border-radius:26px;filter:none;box-shadow:0 34px 64px -34px rgba(14,82,64,.5)}
@media (min-width:901px){
  .taste.home .hero .cols{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem 4.5rem;min-height:min(70dvh,660px)}
  .taste.home .hero-figure{transform:translateY(2.2rem)}
}
@media (prefers-reduced-motion:no-preference){
  .taste.home .hero-figure img{animation:taste-float 7s ease-in-out infinite}
}
@keyframes taste-float{50%{transform:translateY(-8px)}}

/* статус «принимаем заказы» (ставит taste.js по владивостокскому времени) */
.taste-status{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;padding:.45rem .95rem .45rem .75rem;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:.85rem;line-height:1.2;color:var(--muted)}
.taste-status i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#9AA59F}
.taste-status.is-open i{background:#2E8B67}
.taste-status.is-open i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #2E8B67;animation:taste-pulse 2.4s var(--ease-taste) infinite}
@keyframes taste-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* ---------- цифры: без плашек, тонкие разделители ---------- */
.taste.home .proof{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.taste.home .proof .wrap{gap:0}
.taste.home .proof .wrap > div{background:transparent;border:0;border-radius:0;border-left:1px solid var(--line);padding:.4rem 1.6rem}
.taste.home .proof .wrap > div:first-child{border-left:0;padding-left:0}
.taste .proof .wrap > div b{font-size:2.15rem}
@media (max-width:860px){
  .taste.home .proof .wrap{row-gap:1.2rem}
  .taste.home .proof .wrap > div{border-left:0;padding:0 1rem 0 0}
}

/* бегущая лента фактов (вставляет taste.js) */
.taste-marquee{overflow:hidden;border-block:1px solid var(--line);background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.taste-marquee .track{display:flex;width:max-content;animation:taste-marquee 46s linear infinite}
.taste-marquee span{white-space:nowrap;padding:1rem 1.7rem;font-size:.95rem;font-weight:500;color:var(--ink)}
.taste-marquee span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:1rem;border-radius:50%;background:var(--emerald);vertical-align:middle;transform:translateY(-1px)}
@keyframes taste-marquee{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.taste-marquee:hover .track{animation-play-state:paused}}

/* ---------- продукты: асимметричная бенто-сетка ---------- */
.taste.home .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.taste.home .card,.taste.catalog-page .item{position:relative;isolation:isolate;background:#fff;border:1px solid rgba(24,28,26,.07);box-shadow:0 20px 40px -26px rgba(14,82,64,.22)}
.taste.home .card{border-radius:28px;padding:12px 12px 1.4rem;min-width:0}
.taste.home .card .shot,.taste.catalog-page .item .shot{background:#F1F3F1 !important;filter:none;border-radius:20px}
.taste.home .card .maker-of,.taste.catalog-page .item .maker-of{color:var(--emerald);font-weight:500;letter-spacing:.02em}
@media (min-width:1101px){
  .taste.home .card:nth-child(1){grid-column:span 2;grid-row:span 2}
  .taste.home .card:nth-child(1) .shot{flex:1 1 auto;aspect-ratio:auto;min-height:420px}
  .taste.home .card:nth-child(1) .short{flex:none}
  .taste.home .card:nth-child(1) h3{font-size:2rem;line-height:1.05}
  .taste.home .card:nth-child(1) .short{font-size:1rem;max-width:30rem}
  .taste.home .card:nth-child(6),.taste.home .card:nth-child(7){grid-column:span 2}
}
@media (min-width:700px){
  .taste.home .card:nth-child(6),.taste.home .card:nth-child(7){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:1.2rem;align-content:start}
  .taste.home .card:nth-child(6) .shot,.taste.home .card:nth-child(7) .shot{grid-row:1 / span 6;margin:0}
  .taste.home .card:nth-child(6) > :not(.shot),.taste.home .card:nth-child(7) > :not(.shot){grid-column:2}
  .taste.home .card:nth-child(6) .maker-of,.taste.home .card:nth-child(7) .maker-of{padding-top:.9rem}
}
@media (max-width:1100px){
  .taste.home .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .taste.home .card:nth-child(1),.taste.home .card:nth-child(6),.taste.home .card:nth-child(7){grid-column:span 2}
}
@media (max-width:699px){
  .taste.home .cards{grid-template-columns:minmax(0,1fr)}
  .taste.home .card:nth-child(n){grid-column:auto;grid-row:auto}
}

/* подсветка рамки под курсором (координаты ставит taste.js), только мышь */
.taste.home .card::before,.taste.catalog-page .item::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(14,82,64,.55),rgba(14,82,64,0) 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity 300ms var(--ease-taste)}
@media (hover:hover) and (pointer:fine){
  .taste.home .card:hover::before,.taste.catalog-page .item:hover::before{opacity:1}
  .taste.home .card:hover{transform:translateY(-3px)}
}
.taste.home .card{transition:transform 300ms var(--ease-taste)}

/* ---------- «Почему доверять»: строки вместо плашек ---------- */
.taste .trust{grid-template-columns:minmax(0,1fr);gap:0}
.taste .trust article{background:transparent !important;border-radius:0;border-top:1px solid var(--line);padding:1.8rem 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.6rem 3rem;align-items:start}
.taste .trust article:last-child{border-bottom:1px solid var(--line)}
.taste .trust h3{font-size:1.3rem;margin:0}
.taste .trust article > :not(h3){grid-column:2}
.taste .trust p{color:var(--muted)}
@media (max-width:760px){
  .taste .trust article{grid-template-columns:minmax(0,1fr)}
  .taste .trust article > :not(h3){grid-column:1}
}

/* ---------- «Как заказать»: нумерованные строки вместо трёх одинаковых колонок ---------- */
.taste .steps{grid-template-columns:minmax(0,1fr);gap:0}
.taste .steps div{background:transparent !important;border-radius:0;border-top:1px solid var(--line);padding:1.6rem 0;display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:1.6rem;align-items:baseline}
.taste .steps div:last-child{border-bottom:1px solid var(--line)}
.taste .steps div::before{grid-row:1 / span 2;display:block;width:auto;height:auto;margin:0;padding:0;border:0;background:none;font-size:3rem;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--emerald)}
.taste .steps h3{font-size:1.2rem}
.taste .steps p{grid-column:2;margin-top:.2rem}
@media (max-width:520px){.taste .steps div{grid-template-columns:3.6rem minmax(0,1fr);column-gap:1rem}.taste .steps div::before{font-size:2.2rem}}

/* ---------- производители и отзывы: белые панели, тонкая рамка ---------- */
.taste .maker{background:#fff !important;border:1px solid rgba(24,28,26,.07) !important;box-shadow:0 20px 40px -30px rgba(14,82,64,.2)}
.taste .maker .mark{background:var(--mist)}
.taste blockquote{background:#fff !important;border:1px solid rgba(24,28,26,.07)}
.taste .cta{background:var(--emerald-deep)}

/* ---------- каталог ---------- */
.taste.catalog-page .pagehead{background:radial-gradient(900px 380px at 85% 0%,#E3EDE8 0%,rgba(227,237,232,0) 62%),var(--paper)}
.taste.catalog-page .item{border-radius:26px}
.taste.catalog-page .mist .item{background:#fff}

/* ярлык пробного режима */

/* =====================================================================
   Шаг 2: плотнее (DENSITY 7), смелее (VARIANCE 10), больше движения на картинках и тексте (MOTION 8)
   ===================================================================== */

/* ---------- плотнее ---------- */
.taste main{overflow-x:clip}
.taste section{padding-block:clamp(2.2rem,4.6vw,3.6rem)}
.taste .head{margin-bottom:clamp(1.3rem,2.4vw,2rem)}
.taste.home .cards{gap:10px}
.taste.home .card{padding:8px 8px 1.1rem;border-radius:22px;gap:.4rem}
.taste.home .card .shot{border-radius:16px}
.taste.home .card h3{font-size:1.12rem;line-height:1.2}
.taste.home .card .short{font-size:.86rem;line-height:1.45}
.taste.home .card .cost{font-size:1.2rem}
.taste .trust article{padding:1.15rem 0}
.taste .steps div{padding:1.05rem 0}
.taste .maker{padding:1.2rem 1.4rem !important;margin-top:10px !important}
.taste.catalog-page .catalog{gap:10px}
.taste.catalog-page .item{padding:8px;gap:1rem 1.8rem}

/* ---------- смелее: нумерация разделов, крупные заголовки ---------- */
.taste main{counter-reset:tsec}
.taste .head::before{display:none}
.taste .head h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:.98;letter-spacing:-.05em}
.taste .head h2::before{counter-increment:tsec;content:counter(tsec,decimal-leading-zero) " —";display:block;margin-bottom:.9rem;font-size:.82rem;font-weight:600;letter-spacing:.12em;color:var(--emerald)}

/* фото первого экрана выходит в правый край окна */
@media (min-width:901px){
  .taste.home .hero .cols{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .taste.home .hero-figure{margin-right:calc((min(1180px,100vw) - 100vw) / 2 - 20px)}
  .taste.home .hero-figure img{aspect-ratio:16/11;border-radius:28px 0 0 28px}
  .taste.home .hero-figure::before{inset:-18px 0 22px -18px;border-radius:34px 0 0 34px}
}

/* «Почему доверять» и «Как заказать»: заголовок слева прилипает, строки едут справа */
@media (min-width:961px){
  .taste #trust .wrap,.taste #how .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem 5rem;align-items:start}
  .taste #trust .head,.taste #how .head{position:sticky;top:110px;margin-bottom:0}
  .taste #trust .trust article{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .taste #trust .trust article > :not(h3){grid-column:1}
  .taste #how .acts{grid-column:2;margin-top:1.4rem !important}
}

/* отзывы: горизонтальная лента с прокруткой */
.taste .quotes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,40%);grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.8rem;scrollbar-width:thin}
.taste blockquote{scroll-snap-align:start}
@media (max-width:760px){.taste .quotes{grid-auto-columns:86%}}

/* ---------- движение: картинки ---------- */
/* «шторка» открывает фото при появлении (классы ставит taste.js) */
.taste .t-mask{position:relative;overflow:hidden}
.taste .t-mask::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#D9E7E0;transform-origin:right center;transition:transform 900ms var(--ease-taste)}
.taste .t-mask.t-in::after{transform:scaleX(0)}
.taste .t-mask img{transition:transform 1300ms var(--ease-taste),opacity 700ms ease}
.taste .t-mask:not(.t-in) img{transform:scale(calc(var(--z,1) * 1.16));opacity:0}
/* фото первого экрана выезжает справа */
.taste .t-pop{transition:transform 1100ms var(--ease-taste),opacity 800ms ease}
.taste .t-pop:not(.t-in){transform:translateX(48px) scale(1.04);opacity:0}

/* параллакс картинок при прокрутке (где браузер умеет анимации от прокрутки) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .taste.home .card .shot img,.taste.catalog-page .item .shot img{animation:t-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes t-par{from{translate:0 6%}to{translate:0 -6%}}

/* ---------- движение: текст ---------- */
/* заголовки поднимаются по словам */
.taste .t-words .t-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.taste .t-words .t-w > span{display:inline-block;transform:translateY(108%);transition:transform 900ms var(--ease-taste);transition-delay:calc(var(--i,0) * 55ms)}
.taste .t-words.t-in .t-w > span{transform:none}
/* содержимое карточек и строк выезжает по очереди */
.taste .t-info > *:not(.shot):not(.t-skip){opacity:0;transform:translateY(14px);transition:opacity 500ms ease,transform 700ms var(--ease-taste);transition-delay:calc(var(--d,0) * 70ms + 200ms)}
.taste .t-info.t-in > *:not(.shot):not(.t-skip){opacity:1;transform:none}
/* в пробном режиме своя анимация появления: общий .reveal не нужен */
.taste .reveal{opacity:1 !important;transform:none !important}

/* строка отличий продуктов под первым экраном: белые плитки с тонкой рамкой */
.taste.home .edge{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.taste.home .edge .wrap{gap:10px}
.taste.home .edge-item{background:#fff !important;border:1px solid rgba(24,28,26,.07);border-radius:20px;box-shadow:0 18px 36px -28px rgba(14,82,64,.25)}
.taste .edge-pic{background:#F1F3F1 !important}
.taste .edge-txt b{letter-spacing:-.02em}
.taste .h1-rot .h1-lead{color:var(--ink)}
.taste.home .hero h1.h1-rot{max-width:13em}
.taste .eyebrow{color:var(--emerald);letter-spacing:.16em}
.taste .pillars svg{background:#EDF3EF;border-radius:12px}
.taste .pillars b{letter-spacing:-.01em}

/* карточки наклоняются за мышью (наклон ставит taste.js) */
.taste.home .card{transform-style:preserve-3d;will-change:transform}

/* ---------- меньше движения: всё «живое» выключается ---------- */
@media (prefers-reduced-motion:reduce){
  .taste-marquee .track,.taste-status.is-open i::after,.taste.home .hero-figure img{animation:none}
  .taste.home .card:hover{transform:none}
  .taste .btn:active,.taste-badge:active{transform:none}
  .taste .t-mask::after{display:none}
  .taste .t-mask img,.taste .t-pop,.taste .t-words .t-w > span,.taste .t-info > *:not(.shot):not(.t-skip){transition:none;opacity:1;transform:none}
}

/* Дорожки на главной в пробном дизайне: без пастели, тонкая рамка */
.taste .path{background:#F4F6F5;border:1px solid var(--line);border-radius:20px}
.taste .path > svg{background:#EDF3EF}
.taste .path-k{color:var(--emerald)}
.taste .path-t{letter-spacing:-.02em;font-weight:600}

/* Резкие фото продукта (поле photo) в карточках посадочных страниц: квадратный кадр вместо вытянутого на две строки
   и без параллакса (сдвиг на 6% открыл бы полосы по краям фото) */
.taste.home .card .shot.has-scene,.taste.home .card:nth-child(1) .shot.has-scene{flex:none;aspect-ratio:1;min-height:0}
.taste.home .card .shot img.scene{animation:none}
/* на ширинах 700–1100 первая карточка во всю ширину: квадрат был бы огромным, делаем широкий кадр */
@media (min-width:700px) and (max-width:1100px){.taste.home .card:nth-child(1) .shot.has-scene{aspect-ratio:16/9}}
@media (min-width:700px) and (max-width:1100px){
  .taste.home .card:nth-child(1):has(.shot.has-scene){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:1.2rem;align-content:start}
  .taste.home .card:nth-child(1):has(.shot.has-scene) .shot{grid-row:1 / span 6;margin:0;aspect-ratio:1}
  .taste.home .card:nth-child(1):has(.shot.has-scene) > :not(.shot){grid-column:2}
  .taste.home .card:nth-child(1):has(.shot.has-scene) .maker-of{padding-top:.9rem}
}