/* ==========================================================
   JUNO — ЯДРО ДИЗАЙН-СИСТЕМЫ
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Как:  вставить ВЫШЕ существующего блока «JUNO — корзина ST100».
         Тот блок не трогаем, он остаётся как есть.

   Правило проекта: ни одного глобального селектора.
   Всё живёт внутри .j-b (корень каждого T123-блока) либо имеет префикс .j-
   Единственное исключение — html.j-lock (см. блок «блокировка прокрутки»).
   ========================================================== */

/* Шрифты объявлены в панели Тильды без font-display, поэтому подмена
   происходит в середине загрузки и блоки разом меняют высоту, утягивая
   якоря. Перекрываем те же @font-face с font-display:optional. */
@font-face{font-family:'AeonikPro';
  src:url('https://static.tildacdn.net/tild3230-3665-4937-a438-333230616365/AeonikPro-Light.woff') format('woff');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'AeonikPro';
  src:url('https://static.tildacdn.net/tild6366-6232-4935-a665-303961353932/AeonikPro-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'AeonikPro';
  src:url('https://static.tildacdn.net/tild3134-3937-4134-a162-643333363061/AeonikPro-Medium.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'AcresSans';
  src:url('https://static.tildacdn.net/tild3231-3163-4863-a432-366533383733/The-Acres-Sans.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}

/* ---------- 1. ТОКЕНЫ ---------------------------------------------------- */
/* :root ничего не стилизует, только объявляет переменные — Tilda не ломает  */

:root{
  /* поверхности */
  --j-ink:#0B0507;          /* фон страницы */
  --j-surface:#120709;      /* карточки, панели, заглушки */
  --j-bean:#270C10;         /* «философия», «контакты» */

  /* текст и акцент */
  --j-linen:#F5ECE3;        /* весь текст */
  --j-beaver:#AC896A;       /* цены, подписи, hover, энсо */
  --j-wine:#810827;         /* ТОЛЬКО действие: «добавить», линия под кадром */
  --j-wine-hi:#9A0C2F;      /* hover бордового */

  /* производные от linen */
  --j-line:rgba(245,236,227,.12);
  --j-line-soft:rgba(245,236,227,.06);
  --j-dim:rgba(245,236,227,.52);
  --j-dim-2:rgba(245,236,227,.34);

  /* метрика */
  --j-pad:clamp(20px,5vw,80px);      /* боковое поле страницы */
  --j-gap:clamp(12px,1.6vw,24px);
  --j-hdr:72px;                      /* высота шапки в залипшем состоянии */
  --j-ease:cubic-bezier(.22,.61,.36,1);
}


/* ---------- 2. КОРЕНЬ БЛОКА --------------------------------------------- */
/* Каждый T123-блок начинается с  …                   */
/* В настройках блока: контейнер 100%, отступы сверху/снизу 0                */

.j-b{
  position:relative;
  background:var(--j-ink);
  color:var(--j-linen);
  font-family:'AeonikPro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.j-b *,.j-b *::before,.j-b *::after{box-sizing:border-box}

/* Сброс завёрнут в :where() — его вес равен нулю, поэтому любой класс блока
   (.j-hero__ttl и т.п.) свободно переопределяет отступы и цвет.
   Без :where() селектор «.j-b h1» оказывался сильнее класса и съедал margin. */
:where(.j-b) :where(h1,h2,h3,h4,p,ul,ol,figure){margin:0;padding:0}
:where(.j-b) :where(ul,ol){list-style:none}
:where(.j-b) :where(img){display:block;max-width:100%;border:0}
.j-b :where(a:not(.j-btn)){color:inherit;text-decoration:none}
:where(.j-b) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.j-b) :where(input,textarea){font:inherit;color:inherit}
.j-b :focus-visible{outline:1px solid var(--j-beaver);outline-offset:3px}
.j-b ::selection{background:var(--j-wine);color:var(--j-linen)}
.j-b [hidden]{display:none !important}

/* горизонтальное поле — там, где секция не задаёт его сама */
.j-pad{padding-left:var(--j-pad);padding-right:var(--j-pad)}

/* ---------- 3. ТИПОГРАФИКА ---------------------------------------------- */
/* AcresSans — ТОЛЬКО латиница. В .j-display и .j-eyebrow кириллицу не ставим */

.j-display{
  font-family:'AcresSans','AeonikPro',sans-serif;
  font-weight:400;letter-spacing:.14em;text-transform:uppercase;
}
.j-eyebrow{
  display:block;
  font-family:'AcresSans',sans-serif;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--j-beaver);
}
/* надзаголовок на кириллице — тем же ритмом, но основным шрифтом */
.j-eyebrow--ru{font-family:'AeonikPro',sans-serif;letter-spacing:.24em;font-weight:400}

.j-h1{font-size:clamp(32px,4.4vw,64px);line-height:1.05;letter-spacing:-.022em;font-weight:300}
.j-h2{font-size:clamp(28px,4.4vw,54px);line-height:1.04;letter-spacing:-.015em;font-weight:300}
.j-h3{font-size:clamp(22px,3vw,38px);line-height:1.08;letter-spacing:-.015em;font-weight:300}
.j-lead{font-size:clamp(14px,1.4vw,17px);color:var(--j-dim);max-width:46ch;font-weight:300}
.j-note{font-size:11px;line-height:1.5;color:var(--j-dim-2)}
.j-price{color:var(--j-beaver);letter-spacing:.02em}


/* ---------- 4. КНОПКИ ---------------------------------------------------- */

.j-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 30px;border-radius:2px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  border:1px solid transparent;white-space:nowrap;
  transition:background .38s var(--j-ease),color .38s var(--j-ease),border-color .38s;
}
.j-btn--fill{background:var(--j-linen);color:var(--j-bean)}
.j-btn--fill:hover{background:var(--j-beaver);color:var(--j-ink)}
.j-btn--ghost{border-color:var(--j-line);color:var(--j-linen)}
.j-btn--ghost:hover{border-color:var(--j-beaver);background:rgba(172,137,106,.09)}
.j-btn--wine{background:var(--j-wine);color:var(--j-linen)}
.j-btn--wine:hover{background:var(--j-wine-hi)}
.j-btn--sm{height:46px;padding:0 26px;font-size:10px}
.j-btn--full{width:100%}
.j-btn[disabled]{opacity:.45;pointer-events:none}

/* круглая иконка-кнопка: стрелки слайдеров, «+», «закрыть» */
.j-ico{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--j-line);
  transition:border-color .35s,background .35s,transform .35s;
}
.j-ico svg{width:14px;height:14px;stroke:var(--j-linen);fill:none;stroke-width:1.3;transition:stroke .35s}
.j-ico:hover{border-color:var(--j-beaver);background:var(--j-beaver)}
.j-ico:hover svg{stroke:var(--j-ink)}

.j-x{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
  transition:background .3s;
}
.j-x:hover{background:rgba(245,236,227,.07)}
.j-x svg{width:15px;height:15px;stroke:var(--j-linen);fill:none;stroke-width:1.2}


/* ---------- 5. СЕКЦИИ ---------------------------------------------------- */

.j-sec{padding:clamp(70px,9vw,130px) 0;position:relative}
.j-sec--tight{padding-top:0}
.j-sec--bean{background:var(--j-bean)}

.j-sec__hd{padding:0 var(--j-pad);margin-bottom:clamp(32px,4vw,56px)}
.j-sec__hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.j-sec__hd .j-h2{margin-top:14px}

/* бордовая линия под кадром — общий приём карточек */
.j-lid{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--j-wine);transition:height .55s var(--j-ease);z-index:2}
.j-lid--on{height:4px}

/* заглушка «фото скоро» */
.j-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--j-surface)}
.j-empty img{width:52px;opacity:.12}
.j-empty span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--j-dim-2)}


/* ---------- 6. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ------------------------------------ */
/* включается через JUNO.observe() — анимации Tilda на T123 не работают      */

.j-rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--j-ease),transform .9s var(--j-ease)}
.j-rv.is-in{opacity:1;transform:none}


/* ---------- 7. БЛОКИРОВКА ПРОКРУТКИ ------------------------------------- */
/* Место под полосу прокрутки резервируем всегда. Иначе, когда Тильда
   открывает корзину и блокирует прокрутку, страница становится шире
   на ширину полосы — и вся вёрстка дёргается вбок.                          */

html.j-lock,html.j-lock body{overflow:hidden}

/* ---------- 8. ЛАЙТБОКС И ТОСТ ------------------------------------------ */
/* DOM создаёт JUNO-скрипт из HEAD, по одному экземпляру на страницу         */

.j-lb{
  position:fixed;inset:0;z-index:11000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,2,2,.95);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.j-lb.is-on{opacity:1;visibility:visible}
.j-lb img{max-width:100%;max-height:100%;object-fit:contain}
.j-lb__x{position:absolute;top:20px;right:20px}

.j-toast{
  position:fixed;left:0;right:0;bottom:26px;z-index:1000001;
  display:flex;justify-content:center;
  padding:0 26px;
  pointer-events:none;
}
.j-toast__in{
  display:inline-block;
  max-width:min(420px,calc(100vw - 52px));
  background:var(--j-linen);color:var(--j-bean);
  padding:13px 24px;border-radius:2px;
  font-family:'AeonikPro',sans-serif;font-size:12px;line-height:1.45;letter-spacing:.06em;
  transform:translateY(calc(100% + 60px));
  opacity:0;visibility:hidden;
  transition:transform .5s var(--j-ease),opacity .35s var(--j-ease),visibility .35s;
  white-space:nowrap;
  max-width:none;
}
.j-toast.is-on .j-toast__in{transform:translateY(0);opacity:1;visibility:visible}


/* ---------- 9. КОРЗИНА ST100: прячем родную иконку ---------------------- */
/* Своя кнопка в шапке видна всегда, а родную иконку кликает JS.
   Именно уводим за экран, а не display:none — скрытый элемент
   может не реагировать на программный click().                             */

#rec3331722203 .t706__carticon{
  position:fixed !important;
  left:-9999px !important;
  top:0 !important;
  opacity:0 !important;
}

/* блок ST100 не должен перехватывать клики по странице */
#rec3331722203 .t706{pointer-events:none}
#rec3331722203 .t706__cartwin{pointer-events:auto}

/* «Корзина пуста» — Тильда рисует своим TildaSans 600,
   приводим к общему тексту */
#rec3331722203 .t706__cartpage-products_empty{
  font-family:'AeonikPro',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400}

/* ---------- 10. БРЕЙКПОИНТЫ --------------------------------------------- */
/* Основная шкала на clamp(), здесь только то, что clamp не решает           */

@media(max-width:1200px){
  :root{--j-hdr:68px}
}
@media(max-width:960px){
  .j-sec__hd-row{align-items:flex-start;flex-direction:column;gap:18px}
}
@media(max-width:760px){
  :root{--j-hdr:60px}
  .j-b{font-size:15px}
  .j-btn{height:48px;padding:0 24px}
  .j-btn--sm{height:44px}
}
@media(max-width:480px){
  .j-toast{bottom:18px;padding:0 18px}
  .j-toast__in{font-size:11.5px;padding:12px 18px;white-space:normal;max-width:calc(100vw - 52px)}
}

@media(prefers-reduced-motion:reduce){
  .j-b *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .j-rv{opacity:1;transform:none}
}


/* ===== JUNO — корзина ST100 ===== */

#rec3331722203 .t706__carticon-counter{ background:#810827; color:#F5ECE3; font-weight:400; }
#rec3331722203 .t706__carticon-imgwrap svg *{ stroke:#F5ECE3; }

#rec3331722203 .t706__cartwin-content{
  background:#120709; color:#F5ECE3;
  border:1px solid rgba(245,236,227,.08); border-radius:0;
}
#rec3331722203 .t706__cartwin-heading{
  color:#F5ECE3; font-weight:400;
  font-size:14px; letter-spacing:.24em; text-transform:uppercase;
}
#rec3331722203 .t706__cartwin-close-wrapper svg *,
#rec3331722203 .t706__close-button svg *{ stroke:#F5ECE3; }

/* пустая корзина и любой служебный текст */
#rec3331722203 .t706__cartwin-products,
#rec3331722203 .t706__cartwin-products *,
#rec3331722203 .t706__cartwin-content > div{
  color:#F5ECE3;
}
#rec3331722203 .t706__cartwin-products{
  border-top:1px solid rgba(245,236,227,.08);
  padding-top:18px;
}

#rec3331722203 .t706__product{ border-bottom:1px solid rgba(245,236,227,.07); }
#rec3331722203 .t706__product-title,
#rec3331722203 .t706__product-amount,
#rec3331722203 .t706__product-quantity{ color:#F5ECE3; }
#rec3331722203 .t706__product-plus svg *,
#rec3331722203 .t706__product-minus svg *,
#rec3331722203 .t706__product-del svg *{ stroke:#F5ECE3; }

#rec3331722203 .t706__cartwin-prodamount-wrap,
#rec3331722203 .t706__cartwin-prodamount-label,
#rec3331722203 .t706__cartwin-prodamount,
#rec3331722203 .t706__cartwin-prodamount-price,
#rec3331722203 .t706__cartwin-prodamount-currency{ color:rgba(245,236,227,.55); }
#rec3331722203 .t706__cartwin-totalamount-wrap,
#rec3331722203 .t706__cartwin-totalamount-label,
#rec3331722203 .t706__cartwin-totalamount,
#rec3331722203 .t706__cartwin-totalamount-info{ color:#F5ECE3; }
#rec3331722203 .t706__cartwin-bottom{ border-top:1px solid rgba(245,236,227,.08); }

/* поля */
#rec3331722203 .t-input-title{
  color:rgba(245,236,227,.5) !important;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
#rec3331722203 .t-input{
  background:transparent !important;
  border:1px solid rgba(245,236,227,.14) !important;
  color:#F5ECE3 !important; border-radius:2px; height:52px;
}
#rec3331722203 .t-input::placeholder{ color:rgba(245,236,227,.3); }
#rec3331722203 .t-input:focus{ border-color:#AC896A !important; }

/* телефон — убираем выбор страны, оставляем +998 */
#rec3331722203 .t-input-phonemask__wrap{
  border:1px solid rgba(245,236,227,.14) !important;
  background:transparent !important;
  border-radius:2px; height:52px; display:flex; align-items:center;
}
#rec3331722203 .t-input-phonemask__wrap:focus-within{ border-color:#AC896A !important; }
#rec3331722203 .t-input-phonemask__select{
  pointer-events:none; border:0 !important; background:transparent !important;
  padding-left:14px;
}
#rec3331722203 .t-input-phonemask__select-flag,
#rec3331722203 .t-input-phonemask__select-triangle{ display:none !important; }
#rec3331722203 .t-input-phonemask__select-code{
  color:#F5ECE3 !important; font-size:15px; padding:0 4px 0 0;
}
#rec3331722203 .t-input-phonemask{
  border:0 !important; background:transparent !important;
  color:#F5ECE3 !important; height:50px; padding-left:6px;
}

/* кнопка */
#rec3331722203 .t-submit{
  background:#810827 !important; color:#F5ECE3 !important;
  border:0; border-radius:2px; height:54px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  transition:background .35s ease;
}
#rec3331722203 .t-submit:hover{ background:#9a0c2f !important; }

/* ошибки */
#rec3331722203 .t-form__errorbox-middle,
#rec3331722203 .t-form__errorbox-wrapper{
  background:#810827 !important; border-radius:2px;
}
#rec3331722203 .t-form__errorbox-middle *{ color:#F5ECE3 !important; }
#rec3331722203 .t-input-error{ color:#AC896A !important; font-size:12px; }

/* «Итого» дублируется дважды — прячем верхнее, оставляем то, что у кнопки */
#rec3331722203 .t706__cartwin-prodamount-wrap{display:none !important}
#rec3331722203 .t-input-phonemask__wrap{padding-left:0 !important}
#rec3331722203 .t-input-phonemask__select{
  padding-left:0 !important;
  text-align:left !important;
  width:auto !important;
}

#rec3331722203 .t-input-subtitle{
  color:var(--j-dim-2) !important;
  opacity:1 !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:10px !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  margin-bottom:7px !important;
}

/* успешная отправка */
#rec3331722203 .t-form__successbox,
#rec3331722203 .t-form__success-popup,
#rec3331722203 [class*=successbox]{
  background:#270C10 !important;
  color:#F5ECE3 !important;
  border:1px solid rgba(172,137,106,.4) !important;
  border-radius:2px;
}
#rec3331722203 [class*=successbox] *{ color:#F5ECE3 !important; }

/* фон страницы */
.t-body{background:#0B0507}


/* ==========================================================
   JUNO — КАРТОЧКИ КАТАЛОГА И ОКНО ТОВАРА
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили,
         в конец, ниже блока корзины ST100

   Работает на всех семи страницах категорий сразу: селекторы привязаны
   к классам Tilda (.t-store, .t-popup), а не к номеру блока — номер
   у каждой страницы свой.
   ========================================================== */


/* ---------- 1. СЕТКА И КАРТОЧКА ---------------------------------------- */

.t-store__card{background:transparent}

.t-store__card__imgwrapper{
  position:relative;
  overflow:hidden;
  background:var(--j-surface);
}

/* бордовая линия под кадром — тот же приём, что на главной */
.t-store__card__imgwrapper::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:0;background:var(--j-wine);
  transition:height .55s var(--j-ease);
  z-index:2;
}
.t-store__card:hover .t-store__card__imgwrapper::after{height:4px}

.t-store__card__bgimg{transition:transform 1s var(--j-ease)}
.t-store__card:hover .t-store__card__bgimg{transform:scale(1.05)}


/* ---------- 2. ТЕКСТ КАРТОЧКИ ------------------------------------------ */

.t-store__card__textwrapper{padding-top:15px}

.t-store__card__title{
  color:var(--j-linen) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
  transition:color .35s;
}
.t-store__card:hover .t-store__card__title{color:var(--j-beaver) !important}

/* артикул покупателю не нужен */
.t-store__card__sku{display:none !important}

.t-store__card__descr{
  color:var(--j-dim-2) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  margin-top:6px !important;
}

.t-store__card__price-wrapper{margin-top:12px}
.t-store__card__price,
.t-store__card__price-value,
.t-store__card__price-currency{
  color:var(--j-dim) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:14px !important;
  font-weight:300 !important;
}

/* ---------- 3. ОКНО ТОВАРА --------------------------------------------- */
.t-popup__container,
.t-store__prod-popup__close-wrapper{background-color:var(--j-ink) !important}
.t-popup__container{background-image:none !important}

.t-store__prod-popup__container{
  background:var(--j-ink) !important;
  border:1px solid var(--j-line-soft);
}
.t-store__prod-popup__title,
.t-store__prod-popup__name{
  color:var(--j-linen) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-weight:300 !important;
  letter-spacing:-.015em !important;
}
.t-store__prod-popup__sku,
.t-store__prod-popup__brand{
  color:var(--j-dim-2) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
.t-store__prod-popup__price,
.t-store__prod-popup__price-value,
.t-store__prod-popup__price-currency{
  color:var(--j-beaver) !important;
  font-family:'AeonikPro',sans-serif !important;
  font-weight:400 !important;
}
.t-store__prod-popup__text,
.t-store__prod-popup__info .t-descr{
  color:var(--j-dim) !important;
  font-family:'AeonikPro',sans-serif !important;
}
.t-store__prod-popup__slider{background:#000}
.t-slds__arrow-withbg{background:rgba(11,5,7,.42) !important;border:1px solid var(--j-line)}
.t-slds__arrow-withbg:hover{border-color:var(--j-beaver)}
.t-slds__arrow_body{stroke:var(--j-linen)}
.t-slds__bullet_active .t-slds__bullet_body{background:var(--j-beaver) !important}
.t-store__prod-popup__close-txt,
.t-store__prod-popup__close-txt *{color:var(--j-linen) !important}

/* ---------- 4. КНОПКА В ОКНЕ ТОВАРА ---------------------------------- */
.t-store__prod-popup__btn-wrapper .t-submit{
  background:var(--j-wine) !important;
  color:var(--j-linen) !important;
  border:0 !important;
  border-radius:2px !important;
  font-family:'AeonikPro',sans-serif !important;
  font-size:11px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
  height:52px !important;
  transition:background .38s var(--j-ease) !important;
}
.t-store__prod-popup__btn-wrapper .t-submit:hover{background:var(--j-wine-hi) !important}

/* ---------- 5. КАРТОЧКА: ТЕКСТ И КНОПКИ ------------------------------ */
/* весь текст карточки завёрнут в  — убираем стиль ссылки */
.t-store__card__wrap_txt-and-btns a{text-decoration:none !important}
.t-store__card__title{color:var(--j-linen) !important}
.t-store__card__descr{color:var(--j-dim-2) !important}
.t-store__card__price-value,
.t-store__card__price-currency{color:var(--j-dim) !important}

.t-store__card__btns-wrapper{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:16px !important;
}

.t-store__card__btns-wrapper{justify-content:space-between !important}
.t-store__card__btns-wrapper .t-store__card__price-wrapper{margin:0 !important}

.t-store__card__btn{
  font-family:'AeonikPro',sans-serif !important;
  font-weight:400 !important;
  min-width:0 !important;
}

.j-qty{color:var(--j-dim) !important;font-weight:300 !important}

/* «+» — круг */
.js-store-prod-btn{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  flex:0 0 auto !important;
  font-size:17px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}

.js-store-prod-btn{
  transition:transform .4s var(--j-ease),
             background-color .35s var(--j-ease),
             color .35s var(--j-ease),
             border-color .35s var(--j-ease) !important;
}
.js-store-prod-btn:hover{transform:rotate(90deg) !important}

/* плюс рисуем сами: две линии вместо глифа шрифта */
.js-store-prod-btn{position:relative !important}
.js-store-prod-btn .t-btnflex__text{font-size:0 !important}
.js-store-prod-btn::before,
.js-store-prod-btn::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:1px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.js-store-prod-btn::after{transform:translate(-50%,-50%) rotate(90deg)}

/* «Подробнее» */
.js-store-prod-btn2{
  height:38px !important;
  padding:0 20px !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

.t-store__card__imgwrapper{cursor:zoom-in}
.j-zoom{
  position:absolute;right:16px;top:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(245,236,227,.28);
  background:rgba(11,5,7,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .4s var(--j-ease),border-color .3s;
  pointer-events:none;
}
.t-store__card:hover .j-zoom{opacity:1}
.j-zoom svg{width:15px;height:15px;stroke:var(--j-linen);fill:none;stroke-width:1.3}


.t-store ::selection{background:var(--j-wine);color:var(--j-linen)}
.t-store ::-moz-selection{background:var(--j-wine);color:var(--j-linen)}

.store__card__wrap_txt-and-opts > a,
.store__card__wrap_txt-and-opts > a *{cursor:text !important}


.js-store-prod-btn2{order:1}
.js-store-prod-btn{order:2}

/* заглушка для позиций без фото */
.t-store__card > a[href="#order"]:first-child{
  display:block;
  position:relative;
  aspect-ratio:390/429;
  background-color:var(--j-surface);
  margin-bottom:15px;
}
.t-store__card > a[href="#order"]:first-child::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:96px;
  height:96px;
  background-image:url('https://static.tildacdn.one/tild3364-3766-4339-b264-326565316135/Juno_Circle_Creame.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.14;
}
.t-store__card > a[href="#order"]:first-child::after{
  content:'ФОТО СКОРО';
  position:absolute;
  left:0;right:0;
  bottom:20px;
  text-align:center;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--j-dim-2);
}

.t-store__card:not(:has(.t-store__card__imgwrapper)) .t-store__card__textwrapper{
  padding-top:15px !important;
}

/* ---------- 5. ЗАГОЛОВОК СТРАНИЦЫ И ФИЛЬТРЫ ---------------------------- */

.t-store__filter__item-title,
.t-store__sort-wrapper,
.t-store__filter__opts{
  color:var(--j-dim) !important;
  font-family:'AeonikPro',sans-serif !important;
}

/* «Назад к товарам» в окне */
.t-popup__close-icon,
.t-store__prod-popup__close-txt{color:var(--j-linen) !important}
.t-popup__close-icon path{stroke:var(--j-linen) !important}

/* ---------- 6. ОКНО ТОВАРА ------------------------------------------- */

/* две колонки: кадр слева, текст справа */
.t-store__prod-popup__container .js-store-product > div{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:clamp(24px,3vw,48px) !important;
  align-items:start !important;
}
/* min-width:0 обязателен: без него слайдер меряет себя по своему
   содержимому и раздувает колонку — на мобильном кадр уезжал за экран */
.t-store__prod-popup__slider,
.t-store__prod-popup__info{
  width:auto !important;
  float:none !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* заголовок, цена, кнопка */
.t-store__prod-popup__name{font-size:clamp(28px,3vw,40px) !important;line-height:1.05 !important}
.t-store__prod-popup__price-wrapper{margin-top:16px !important}
.t-store__prod-popup__sku{display:none !important}
.t-store__prod-popup__btn-wrapper{margin-top:34px !important}
.t-store__prod-popup__btn{
  background-color:var(--j-wine) !important;
  border-color:var(--j-wine) !important;
  border-radius:2px !important;
  color:var(--j-linen) !important;
  height:52px !important;
  padding:0 34px !important;
  font-size:11px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
}

/* описание под ценой */
.js-store-prod-all-text{
  color:var(--j-dim-2) !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

/* состав: название слева, количество справа */
.js-store-prod-all-charcs{margin-top:26px !important}
.js-store-prod-charcs{
  display:flex !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 !important;
  padding:11px 0 !important;
  border-bottom:1px solid var(--j-line-soft) !important;
  color:var(--j-dim) !important;
  font-size:14px !important;
}
.js-store-prod-charcs b{color:var(--j-linen) !important;font-weight:400 !important;white-space:nowrap}
.js-store-prod-dimensions,
.js-store-prod-weight{display:none !important}

/* верхняя полоса: фон, надпись, стрелка и крестик */
.t-popup,
.t-popup__close{background-color:var(--j-ink) !important}
.t-store__prod-popup__close-txt-wr .js-store-close-text{color:var(--j-linen) !important}
.t-popup__close-icon_arrow path,
.t-popup__close-icon_cross g,
.t-popup__close-icon_cross rect{fill:var(--j-linen) !important}

@media(max-width:960px){
  .t-store__prod-popup__container .js-store-product > div{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:760px){
  .t-store__card__textwrapper{padding-top:12px !important}
  .t-store__card__descr:empty{display:none !important}
  .t-store__card__price-wrapper{margin-top:10px !important}
  .js-store-prod-btn{margin-right:10px !important}
  .js-store-prod-btn2{flex:1 1 auto !important;max-width:none !important;padding:0 18px !important}
  
  .js-store-prod-btn{width:44px !important;height:44px !important}
  .js-store-prod-btn2{height:44px !important;font-size:10px !important}
  .t-store__card__price-value,
  .t-store__card__price-currency{font-size:15px !important}

  .t-store__card__btns-wrapper{
    margin-top:4px !important;
    flex-wrap:wrap !important;
  }
  .t-store__card__descr{font-size:13.5px !important;line-height:1.5 !important}
  
  .t-store__card__price-value,
  .t-store__card__price-currency{white-space:nowrap !important}
  
  .js-store-prod-btn2{order:0}
  .js-store-prod-btn{order:0}
}

/* карта доставки — приглушаем под тёмный сайт */
#rec3427863503 .t-map,
#rec3427863503 ymaps{
  filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(.92);
}
#rec3427863503 ymaps [class*="placemark"]{
  filter:invert(1) hue-rotate(180deg);
}

/* ---------- ЛЕНТА «НОВИНКИ» — только этот блок ---------- */

/* поле страницы */
#rec3429151003 .t-section__container{
  box-sizing:border-box !important;
  padding-left:var(--j-pad) !important;
  padding-right:var(--j-pad) !important;
  max-width:100% !important;
}

/* шапка: заголовок слева, описание справа — как в «Сеты» и «Устрицы» */
#rec3429151003 .t-section__container .t-col_12{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:30px !important;
  flex-wrap:wrap !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
}

#rec3429151003 .t-section__title,
#rec3429151003 .t-section__title *{
  font-family:'AeonikPro',sans-serif !important;
  font-size:clamp(28px,4.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.015em !important;
  font-weight:300 !important;
  color:var(--j-linen) !important;
  text-align:left !important;
}
#rec3429151003 .t-section__title{margin:0 !important}

/* надзаголовок рисуем сами — в блоке нет поля под него */
#rec3429151003 .t-section__title::before{
  content:'NEW';
  display:block;
  margin-bottom:14px;
  font-family:'AcresSans',sans-serif;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:400;
  line-height:1;
  color:var(--j-beaver);
}

#rec3429151003 .t-section__descr,
#rec3429151003 .t-section__descr *{
  font-family:'AeonikPro',sans-serif !important;
  font-size:clamp(14px,1.4vw,17px) !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  font-weight:300 !important;
  color:var(--j-dim) !important;
  text-align:left !important;
}
#rec3429151003 .t-section__descr{
  margin:0 !important;
  max-width:42ch !important;
}

/* контейнеры на всю ширину — иначе лента зажата */
#rec3429151003 .t776,
#rec3429151003 .t-store,
#rec3429151003 .t-store__grid-cont{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* лента вместо сетки */
#rec3429151003 .t-store__card-list{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  overflow-x:auto !important;
  gap:clamp(14px,1.8vw,28px) !important;
  margin:0 !important;
  padding:0 var(--j-pad) 6px !important;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--j-pad);
  scrollbar-width:none;
}
#rec3429151003 .t-store__card-list::-webkit-scrollbar{display:none}
#rec3429151003 .t-store__card-list > *:not(.t-store__card){display:none !important}

#rec3429151003 .t-store__card{
  flex:0 0 clamp(260px,26vw,380px) !important;
  max-width:none !important;
  min-width:0 !important;
  scroll-snap-align:start;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* карточки одной высоты: цена и «+» прижаты к низу */
#rec3429151003 .t-store__card__wrap_txt-and-btns,
#rec3429151003 .store__card__wrap_txt-and-opts,
#rec3429151003 .t-store__card__textwrapper{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
#rec3429151003 .t-store__card__btns-wrapper{margin-top:auto !important}

/* внутренние отступы карточки */
#rec3429151003 .t-store__card__textwrapper{padding-top:14px !important}
#rec3429151003 .t-store__card__price-wrapper{margin-top:10px !important}

/* отступ от шапки до ленты — как в остальных блоках */
#rec3429151003 .t-section__container{
  margin-bottom:clamp(32px,4vw,56px) !important;
}

@media(max-width:960px){
  #rec3429151003 .t-section__container .t-col_12{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
  }
}


/* --- 1. убираем внутренние отступы колонок Tilda --- */
#rec3429151003 .t-store__card{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* --- 2. заголовок и описание — как в остальных блоках --- */
#rec3429151003 .t-section__title,
#rec3429151003 .t-section__title *{
  font-family:'AeonikPro',sans-serif !important;
  font-size:clamp(28px,4.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.015em !important;
  font-weight:300 !important;
}
#rec3429151003 .t-section__descr,
#rec3429151003 .t-section__descr *{
  font-family:'AeonikPro',sans-serif !important;
  font-size:clamp(14px,1.4vw,17px) !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  font-weight:300 !important;
}
#rec3429151003 .t-section__descr{
  max-width:46ch !important;
  margin-top:18px !important;
}

/* --- 3. карточки одной высоты, цена и «+» прижаты к низу --- */
#rec3429151003 .t-store__card-list{align-items:stretch !important}
#rec3429151003 .t-store__card{display:flex !important;flex-direction:column !important}
#rec3429151003 .t-store__card__wrap_txt-and-btns,
#rec3429151003 .store__card__wrap_txt-and-opts,
#rec3429151003 .t-store__card__textwrapper{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
#rec3429151003 .t-store__card__btns-wrapper{margin-top:auto !important}


/* мост и «Меню» — единая связка, лишний воздух между ними не нужен */
#rec3315238103 .j-b.j-sec{padding-top:clamp(24px,3vw,44px) !important}

/* кадр 4:5 — как в макете и на страницах категорий */
#rec3429151003 .t-store__card__imgwrapper{
  padding-bottom:125% !important;
  height:auto !important;
}



/* ============================================================
   JUNO — ВИТРИНА УСТРИЦ поверх ST305N
   Блок: #rec3505343703, раздел каталога «Устрицы»

   Структура карточки сверена по DOM 1 сентября:
   .t-store__card > .t-store__card__imgwrapper
                  > .t-store__card__wrap_txt-and-btns
                      > .store__card__wrap_txt-and-opts > .t-store__card__textwrapper
                      > .t-store__card__btns-wrapper

   Парный файл: juno-oysters-store.head.html
   ============================================================ */

/* ---------- ШАПКА БЛОКА: заголовок слева, описание справа ---------- */
#rec3505343703 .js-block-header{
  display:grid!important;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);align-items:end}
#rec3505343703 .js-block-header .t-col_12{display:contents!important}
#rec3505343703 .t-section__title{grid-column:1!important}
#rec3505343703 .t-section__descr{grid-column:2!important}
#rec3505343703 .t-section__title{
  margin:0!important;text-align:left!important;
  font-size:clamp(28px,4.4vw,54px);line-height:1.04;
  font-weight:300;letter-spacing:-.015em;color:var(--j-linen)!important}
#rec3505343703 .t-section__title::before{
  content:'Oysters';display:block;margin-bottom:14px;
  font-family:'AcresSans',sans-serif;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--j-beaver)}
#rec3505343703 .t-section__descr{
  margin:0 0 0 auto!important;max-width:46ch;width:100%;text-align:left!important;
  font-size:clamp(14px,1.4vw,17px);line-height:1.55;color:var(--j-dim)!important}
  
#rec3505343703 .js-block-header{padding-left:20px!important;padding-right:20px!important}

@media(max-width:960px){
  #rec3505343703 .js-block-header{grid-template-columns:1fr;gap:18px;align-items:start}
}



/* ---------- СЕТКА: одна колонка, видна только активная позиция ---------- */
#rec3505343703 .t-store__card-list{display:block}
#rec3505343703 .t-store__card{
  display:none!important;width:100%!important;max-width:none!important;
  float:none!important;margin:0!important;padding:0!important}
#rec3505343703 .t-store__card.j-oy-on{
  display:grid!important;
  grid-template-columns:minmax(0,calc(min(66vh,600px) * 0.8)) minmax(0,1fr);
  gap:clamp(24px,3.6vw,64px);align-items:center}

/* ---------- КАДР 4:5 ---------- */
#rec3505343703 .j-oy-on .t-store__card__imgwrapper{
  position:relative;min-width:0;height:auto!important;
  padding-bottom:0!important;padding-top:0!important;
  aspect-ratio:4/5;overflow:hidden;background:var(--j-surface)}
#rec3505343703 .j-oy-on .t-store__card__imgwrapper::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--j-wine);z-index:3}
#rec3505343703 .j-oy-on .t-store__card__bgimg{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;
  background-size:cover;background-position:center;
  opacity:0!important;transition:opacity .6s var(--j-ease)}
#rec3505343703 .j-oy-on .t-store__card__bgimg.j-oy-show{opacity:1!important}

/* номер позиции */
#rec3505343703 .j-oy__num{position:absolute;left:20px;top:18px;z-index:4;
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.24em;color:var(--j-linen);
  text-shadow:0 1px 12px rgba(0,0,0,.7)}
#rec3505343703 .j-oy__num i{display:block;width:30px;height:1px;background:var(--j-beaver)}

/* точки: зона нажатия 36px, сама точка 8px */
#rec3505343703 .j-oy__dots{position:absolute;right:8px;bottom:8px;z-index:5;display:flex;gap:0}
#rec3505343703 .j-oy__dots button{
  width:20px;height:36px;padding:0;border:0;border-radius:0;
  background:none;cursor:pointer;position:relative}
#rec3505343703 .j-oy__dots button::after{
  content:'';position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-radius:50%;
  background:rgba(245,236,227,.35);
  transform:translate(-50%,-50%);
  transition:background .3s,transform .3s}
#rec3505343703 .j-oy__dots button:hover::after{background:rgba(245,236,227,.6)}
#rec3505343703 .j-oy__dots button.is-on::after{
  background:var(--j-beaver);transform:translate(-50%,-50%) scale(1.25)}

/* ---------- ПРАВАЯ КОЛОНКА ---------- */
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;padding:0!important;text-align:left}
#rec3505343703 .j-oy-on .store__card__wrap_txt-and-opts,
#rec3505343703 .j-oy-on .t-store__card__textwrapper{
  width:100%;padding:0!important;margin:0!important}

/* название позиции */
#rec3505343703 .j-oy-on .t-store__card__title{margin:0;
  font-size:clamp(26px,3.4vw,44px);font-weight:300;line-height:1.06;
  letter-spacing:-.015em;color:var(--j-linen)!important}
#rec3505343703 .j-oy-on .t-store__card__title a{color:var(--j-linen)!important}

#rec3505343703 .j-oy-on .t-store__card__sku{display:none}

/* строка «3 шт   260 000 сум» — количество переносит скрипт */
#rec3505343703 .j-oy-on .t-store__card__price-wrapper{
  display:flex;align-items:baseline;gap:20px;margin:18px 0 0}
#rec3505343703 .j-oy-on .j-oy__pcs{display:inline;margin:0;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--j-dim-2)}

/* оригинал остаётся в названии ради корзины, но в витрине не виден */
#rec3505343703 .j-oy-on .t-store__card__title .j-qty{display:none!important}
#rec3505343703 .j-oy-on .t-store__card__price,
#rec3505343703 .j-oy-on .t-store__card__price-value,
#rec3505343703 .j-oy-on .t-store__card__price-currency{
  font-size:clamp(19px,2vw,26px);color:var(--j-beaver)!important}

#rec3505343703 .j-oy-on .t-store__card__descr{margin:18px 0 0;
  max-width:38ch;font-size:15px;line-height:1.5;color:var(--j-dim)}

/* ---------- СТРОКА КНОПОК ---------- */
#rec3505343703 .j-oy-on .js-product-controls-wrapper,
#rec3505343703 .j-oy-on .t-store__card__btns-wrapper{
  display:flex!important;justify-content:flex-start!important;
  align-items:center;gap:12px;margin-top:30px;
  width:auto!important;max-width:none!important;
  min-width:max-content!important;flex:0 0 auto!important}

/* «Добавить +» — форма вино-кнопки (цвет панель пишет инлайном) */
#rec3505343703 .j-oy-on .t-store__card__btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:auto!important;min-width:max-content!important;
  height:52px!important;padding:0 30px!important;
  white-space:nowrap;overflow:visible;border-radius:2px!important}
/* Tilda обнуляет font-size у текста внутри кнопки — задаём его здесь */
#rec3505343703 .j-oy-on .t-store__card__btn-text,
#rec3505343703 .j-oy-on .t-btnflex__text{
  font-size:11px!important;line-height:1!important;
  letter-spacing:.2em!important;text-transform:uppercase;
  white-space:nowrap;overflow:visible;text-overflow:clip;
  max-width:none!important;flex:0 0 auto}
/* в витрине кнопка текстовая — рисованный «+» и его поворот убираем */
#rec3505343703 .j-oy-on .t-store__card__btn::before,
#rec3505343703 .j-oy-on .t-store__card__btn::after{
  content:none!important;display:none!important}
#rec3505343703 .j-oy-on .t-store__card__btn,
#rec3505343703 .j-oy-on .t-store__card__btn:hover{transform:none!important}

/* «Все устрицы» — призрачная кнопка рядом; переносит скрипт */
#rec3505343703 .j-oy__all{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:52px;padding:0 30px;margin:0;
  border:1px solid var(--j-line);border-radius:2px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--j-linen);white-space:nowrap;
  transition:border-color .38s,background .38s}
#rec3505343703 .j-oy__all:hover{
  border-color:var(--j-beaver);background:rgba(172,137,106,.09);color:var(--j-linen)}

/* ---------- МИНИАТЮРЫ: смена позиции ---------- */
#rec3505343703 .j-oy__thumbs{display:flex;gap:10px;
  width:100%;max-width:340px;margin-top:clamp(26px,3.4vw,44px)}
#rec3505343703 .j-oy__th{flex:1;position:relative;aspect-ratio:4/5;
  padding:0;border:0;cursor:pointer;overflow:hidden;background:var(--j-surface);
  opacity:.4;transition:opacity .45s var(--j-ease)}
#rec3505343703 .j-oy__th i{position:absolute;inset:0;
  background-size:cover;background-position:center}
#rec3505343703 .j-oy__th::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:0;background:var(--j-beaver);transition:height .4s var(--j-ease)}
#rec3505343703 .j-oy__th:hover{opacity:.75}
#rec3505343703 .j-oy__th.is-on{opacity:1}
#rec3505343703 .j-oy__th.is-on::after{height:3px}

/* ---------- АДАПТИВ ---------- */
@media(max-width:960px){
  #rec3505343703 .t-store__title{grid-template-columns:1fr;gap:18px;align-items:start}
  #rec3505343703 .t-store__card.j-oy-on{grid-template-columns:1fr;gap:26px}
  #rec3505343703 .j-oy__thumbs{max-width:none}
}
@media(max-width:480px){
  #rec3505343703 .j-oy-on .js-product-controls-wrapper,
  #rec3505343703 .j-oy-on .t-store__card__btns-wrapper{
    flex-direction:column;align-items:stretch;width:100%!important}
  #rec3505343703 .j-oy-on .t-store__card__btn,
  #rec3505343703 .j-oy__all{
    display:inline-flex!important;align-items:center;justify-content:center;
    width:100%!important;height:52px!important}
}
@media(prefers-reduced-motion:reduce){
  #rec3505343703 .j-oy-on .t-store__card__bgimg{transition:none}
}


/* порядок в правой колонке: название → цена → описание */
#rec3505343703 .j-oy-on .t-store__card__textwrapper{
  display:flex;flex-direction:column;align-items:flex-start}
#rec3505343703 .j-oy-on .t-store__card__title{order:1}
#rec3505343703 .j-oy-on .t-store__card__price-wrapper{order:2}
#rec3505343703 .j-oy-on .t-store__card__descr{order:3;margin:22px 0 0}

/* название крупное — Tilda задаёт свой размер через t-name_md */
#rec3505343703 .j-oy-on .t-store__card__title,
#rec3505343703 .j-oy-on .t-store__card__title a,
#rec3505343703 .j-oy-on .js-store-prod-name{
  font-size:clamp(26px,3.4vw,44px)!important;line-height:1.06!important;
  font-weight:300!important;letter-spacing:-.015em!important}

/* вино-кнопка первая, «Все устрицы» второй */
#rec3505343703 .j-oy-on .t-store__card__btn{order:1}
#rec3505343703 .j-oy__all{order:2}

#rec3505343703 .t-store__card.j-oy-on{align-items:start!important}
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  align-self:stretch;height:100%}
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  justify-content:flex-start}
#rec3505343703 .j-oy__thumbs{margin-top:0!important}


#rec3505343703 .j-oy__num{
  padding:6px 12px;background:rgba(11,5,7,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  margin-top:0!important}
  
/* контейнер тянется вместе с окном — как в «Новинках» */
#rec3505343703 .t-container,
#rec3505343703 .t-section__container{
  max-width:100%!important;width:100%!important;
  padding-left:clamp(20px,5vw,80px)!important;
  padding-right:clamp(20px,5vw,80px)!important;
  box-sizing:border-box!important}  
  
#rec3505343703 .j-oy-on .t-store__card__price,
#rec3505343703 .j-oy-on .t-store__card__price-value,
#rec3505343703 .j-oy-on .t-store__card__price-currency{
  font-size:clamp(24px,2.8vw,40px)!important;line-height:1}
  
  
/* воздух между названием, ценой и описанием */
#rec3505343703 .j-oy-on .t-store__card__price-wrapper{
  gap:14px!important;margin:26px 0 0!important}
#rec3505343703 .j-oy-on .t-store__card__descr{margin:26px 0 0!important}

/* миниатюры прижаты к нижней линии кадра */
#rec3505343703 .j-oy__thumbs{margin-bottom:0!important}
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  padding-bottom:4px!important}
  
#rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
  padding-top:0!important}  

#rec3505343703 .j-oy-on .js-product-controls-wrapper,
#rec3505343703 .j-oy-on .t-store__card__btns-wrapper{margin-top:34px!important}
#rec3505343703 .j-oy__thumbs{margin-top:34px!important;margin-bottom:0!important}


#rec3505343703 .j-oy-on .js-product-controls-wrapper,
#rec3505343703 .j-oy-on .t-store__card__btns-wrapper{
  align-items:stretch!important}
#rec3505343703 .j-oy-on .t-store__card__btn,
#rec3505343703 .j-oy__all{
  height:52px!important;min-height:52px!important;
  padding-top:0!important;padding-bottom:0!important;
  margin:0!important;box-sizing:border-box!important;align-self:auto!important}
  
/* зум по наведению отключён: карточка = вся витрина, курсор справа не должен двигать кадр */
#rec3505343703 .j-oy-on .t-store__card__bgimg,
#rec3505343703 .j-oy-on:hover .t-store__card__bgimg,
#rec3505343703 .j-oy-on .t-store__card__imgwrapper:hover .t-store__card__bgimg{
  transform:none!important;scale:none!important;
  transition:opacity .6s var(--j-ease)!important}  
  
/* лупа появляется только над кадром */
#rec3505343703 .j-oy-on .j-zoom{opacity:0;transition:opacity .35s}
#rec3505343703 .j-oy-on .t-store__card__imgwrapper:hover .j-zoom{opacity:1}  

@media(max-width:760px){
  /* шапка: описание под заголовком, во всю ширину */
  #rec3505343703 .js-block-header{grid-template-columns:1fr!important;gap:26px!important}
  #rec3505343703 .t-section__title{grid-column:1!important}
  #rec3505343703 .t-section__descr{
    grid-column:1!important;max-width:none!important;margin:0!important}

  /* кадр не больше половины экрана */
  #rec3505343703 .j-oy-on .t-store__card__imgwrapper{
    height:min(46vh,380px)!important;
    overflow:hidden!important;position:relative!important}

#rec3505343703 .j-oy-on a[href="#order"]:has(.t-store__card__imgwrapper){
    display:block!important;width:100%!important;
    height:min(46vh,380px)!important;
    line-height:0!important;font-size:0!important;overflow:hidden!important}

  /* лишние карточки остаются скрытыми */
  #rec3505343703 .t-store__card:not(.j-oy-on){display:none!important}

  /* кнопки во всю ширину */
  #rec3505343703 .j-oy-on .t-store__card__btn,
  #rec3505343703 .j-oy__all{
    display:inline-flex!important;align-items:center;justify-content:center;
    width:100%!important;height:52px!important}

  #rec3505343703 .j-oy-on .js-product-controls-wrapper,
  #rec3505343703 .j-oy-on .t-store__card__btns-wrapper{margin-top:28px!important}
  #rec3505343703 .j-oy__thumbs{margin-top:28px!important}
}

/* «фото скоро» — заглушка для карточек без фото, в витрине не нужна */
#rec3505343703 .j-oy-on a[href="#order"]:has(.t-store__card__imgwrapper)::after{
  content:none!important;display:none!important}
  


/* ============================================================
   JUNO — ФИРМЕННЫЕ СЕТЫ поверх ST305N
   Блок: #rec3680326803, раздел каталога «Сеты»

   Повторяет вайб-блок juno-sets.html (вариант 02, бесконечная
   карусель), но карточки отдаёт Каталог — значит новый сет,
   добавленный клиентом, появляется и на главной.

   Структура карточки (сверена по DOM на витрине устриц):
   .t-store__card > a[href="#order"] > .t-store__card__imgwrapper
                  > .t-store__card__wrap_txt-and-btns
                      > .store__card__wrap_txt-and-opts
                          > .t-store__card__textwrapper
                      > .t-store__card__btns-wrapper

   Парный файл: juno-sets-store.head.html
   ============================================================ */


/* ---------- КОНТЕЙНЕР ВО ВСЮ ШИРИНУ ---------- */
/* карусель во всю ширину, поле только у шапки */
#rec3680326803 .t-container,
#rec3680326803 .t-section__container{
  max-width:100%!important;width:100%!important;
  padding-left:0!important;padding-right:0!important;
  box-sizing:border-box!important}
#rec3680326803 .js-block-header{
  padding-left:var(--j-pad)!important;
  padding-right:var(--j-pad)!important;
  box-sizing:border-box!important}

/* ---------- ШАПКА: заголовок слева, описание справа ---------- */
/* t-col_12 держит заголовок и описание в одной колонке —
   display:contents вынимает их в грид, иначе порядок переворачивается */
#rec3680326803 .js-block-header{
  display:grid!important;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);align-items:end}
#rec3680326803 .js-block-header .t-col_12{display:contents!important}
#rec3680326803 .t-section__title{grid-column:1!important}
#rec3680326803 .t-section__descr{grid-column:2!important}

#rec3680326803 .t-section__title{
  margin:0!important;text-align:left!important;
  font-family:'AeonikPro',sans-serif!important;
  font-size:clamp(28px,4.4vw,54px)!important;line-height:1.04!important;
  font-weight:300!important;letter-spacing:-.015em!important;
  color:var(--j-linen)!important}

/* надзаголовок рисуем сами — поля под него в блоке нет */
#rec3680326803 .t-section__title::before{
  content:'Signature Sets';display:block;margin-bottom:14px;
  font-family:'AcresSans',sans-serif;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--j-beaver)}

#rec3680326803 .t-section__descr{
  margin:0 0 0 auto!important;max-width:46ch;width:100%;
  text-align:left!important;
  font-family:'AeonikPro',sans-serif!important;
  font-size:clamp(14px,1.4vw,17px)!important;line-height:1.55!important;
  color:var(--j-dim)!important}


/* ---------- КАРУСЕЛЬ: сетку заменяем абсолютной раскладкой ---------- */
#rec3680326803 .t-store__card-list{
  display:block!important;position:relative;
  overflow:hidden;touch-action:pan-y;
  margin:0!important;padding:0!important}

#rec3680326803 .t-store__card{
  position:absolute;top:0;left:50%;
  width:min(480px,38vw)!important;max-width:none!important;
  margin:0!important;padding:0!important;float:none!important;
  will-change:transform,opacity;user-select:none}

/* мгновенная перестановка — при первой раскладке и после ресайза */
#rec3680326803 .t-store__card.j-st-jump{transition:none}


/* ---------- КАДР 4:5 ---------- */
#rec3680326803 .t-store__card > a[href="#order"]{
  display:block;position:relative;margin:0!important}

/* заглушка «ФОТО СКОРО» задаёт ссылке своё соотношение — здесь она мешает */
#rec3680326803 .t-store__card > a[href="#order"]:first-child{
  aspect-ratio:auto!important;background-color:transparent!important;
  margin-bottom:0!important}
#rec3680326803 .t-store__card > a[href="#order"]:first-child::before,
#rec3680326803 .t-store__card > a[href="#order"]:first-child::after{
  content:none!important;display:none!important}

#rec3680326803 .t-store__card__imgwrapper{
  position:relative;height:auto!important;
  padding-top:0!important;padding-bottom:0!important;
  aspect-ratio:4/5;overflow:hidden;background:#000}

#rec3680326803 .t-store__card__bgimg{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;
  background-size:cover;background-position:center;
  transition:transform 1.2s var(--j-ease)}

/* бордовая линия — только под активным кадром, без ховера */
#rec3680326803 .t-store__card__imgwrapper::after{height:0!important}
#rec3680326803 .t-store__card.j-st-on .t-store__card__imgwrapper::after{
  height:4px!important}

/* приближение по наведению — тоже только на активном кадре */
#rec3680326803 .t-store__card:hover .t-store__card__bgimg{transform:none!important}
#rec3680326803 .t-store__card.j-st-on .t-store__card__imgwrapper:hover .t-store__card__bgimg{
  transform:scale(1.03)!important}


/* ---------- НАДПИСИ НА КАДРЕ ---------- */
#rec3680326803 .j-st__num{
  position:absolute;left:22px;top:20px;z-index:4;
  display:flex;align-items:center;gap:12px;
  font-family:'AeonikPro',sans-serif;
  font-size:11px;letter-spacing:.24em;color:var(--j-linen);
  text-shadow:0 1px 12px rgba(0,0,0,.7)}
#rec3680326803 .j-st__num i{
  display:block;width:32px;height:1px;background:var(--j-beaver)}

/* «24 шт» — скрипт переносит сюда из названия */
#rec3680326803 .j-st__pcs{
  position:absolute;left:22px;bottom:20px;z-index:4;
  display:block;padding:7px 14px;margin:0;
  background:rgba(11,5,7,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:'AeonikPro',sans-serif;
  font-size:10px!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--j-linen)!important;font-weight:300!important}

/* лупа: в каталоге появляется по ховеру карточки, здесь — на активной */
#rec3680326803 .j-zoom{right:20px;top:18px;opacity:0}
#rec3680326803 .t-store__card:hover .j-zoom{opacity:0}
#rec3680326803 .t-store__card.j-st-on .j-zoom{opacity:1}


/* ---------- ПОДПИСЬ ПОД КАДРОМ ---------- */
/* Текст лежит внутри карточки, а карточка ездит. Но видим мы его только
   у активной карточки, а у неё смещение равно нулю — значит достаточно
   отцентровать по самой карточке, встречный сдвиг не нужен. */
#rec3680326803 .t-store__card__wrap_txt-and-btns{
  position:absolute;top:100%;left:50%;
  width:min(720px,88vw);
  padding:clamp(28px,3.6vw,52px) 0 0!important;
  margin:0!important;
  text-align:center;
  display:none!important}
#rec3680326803 .t-store__card.j-st-on .t-store__card__wrap_txt-and-btns{
  display:block!important;
  transform:translateX(-50%)!important}

#rec3680326803 .store__card__wrap_txt-and-opts,
#rec3680326803 .t-store__card__textwrapper{
  width:100%;padding:0!important;margin:0!important;text-align:center}

/* название: AcresSans, латиница — в названиях сетов кириллицы нет */
#rec3680326803 .t-store__card__title,
#rec3680326803 .t-store__card__title a,
#rec3680326803 .js-store-prod-name{
  font-family:'AcresSans','AeonikPro',sans-serif!important;
  font-size:clamp(30px,4.6vw,58px)!important;
  font-weight:400!important;line-height:1!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  color:var(--j-linen)!important;margin:0!important}
#rec3680326803 .t-store__card:hover .t-store__card__title,
#rec3680326803 .t-store__card:hover .t-store__card__title a{
  color:var(--j-linen)!important}

#rec3680326803 .t-store__card__price-wrapper{
  display:flex!important;justify-content:center!important;
  margin:16px 0 0!important}
#rec3680326803 .t-store__card__price,
#rec3680326803 .t-store__card__price-value,
#rec3680326803 .t-store__card__price-currency{
  font-family:'AeonikPro',sans-serif!important;
  font-size:clamp(17px,1.8vw,23px)!important;
  font-weight:300!important;letter-spacing:.02em!important;
  color:var(--j-beaver)!important}

/* описание в карусели не показываем — состав живёт в окне «Подробнее» */
#rec3680326803 .t-store__card__descr{display:none!important}
#rec3680326803 .t-store__card__sku{display:none!important}


/* ---------- КНОПКИ ---------- */
#rec3680326803 .t-store__card__btns-wrapper{
  display:flex!important;justify-content:center!important;align-items:center;
  gap:12px!important;margin-top:26px!important;
  width:auto!important;max-width:none!important;flex-wrap:wrap}

#rec3680326803 .js-store-prod-btn2{order:1}
#rec3680326803 .js-store-prod-btn{order:2}

/* «Добавить +» — в каталоге это круглый «+», здесь возвращаем текстовую форму */
#rec3680326803 .js-store-prod-btn{
  width:auto!important;height:46px!important;
  padding:0 26px!important;border-radius:2px!important;
  flex:0 0 auto!important;font-size:10px!important}
#rec3680326803 .js-store-prod-btn::before,
#rec3680326803 .js-store-prod-btn::after{
  content:none!important;display:none!important}
#rec3680326803 .js-store-prod-btn,
#rec3680326803 .js-store-prod-btn:hover{transform:none!important}

/* Tilda обнуляет font-size у текста внутри кнопки — задаём его тексту */
#rec3680326803 .t-store__card__btn-text,
#rec3680326803 .t-btnflex__text{
  font-size:10px!important;line-height:1!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  white-space:nowrap;overflow:visible;text-overflow:clip;
  max-width:none!important;flex:0 0 auto}

#rec3680326803 .js-store-prod-btn2{
  height:46px!important;padding:0 26px!important;
  border-radius:2px!important;
  font-size:10px!important;letter-spacing:.2em!important;
  text-transform:uppercase!important}


/* ---------- СТРЕЛКИ ---------- */
/* --j-st-arw задаёт скрипт: половина высоты кадра */
#rec3680326803 .j-st__arw{
  position:absolute;top:var(--j-st-arw,40%);transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;padding:0;
  border:1px solid rgba(245,236,227,.45);
  background:rgba(11,5,7,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:20;cursor:pointer;
  transition:border-color .35s var(--j-ease),background .35s var(--j-ease)}
#rec3680326803 .j-st__arw:hover{
  border-color:var(--j-beaver);background:var(--j-beaver)}
#rec3680326803 .j-st__arw svg{
  width:16px;height:16px;stroke:var(--j-linen);fill:none;stroke-width:1.2;
  transition:stroke .35s}
#rec3680326803 .j-st__arw:hover svg{stroke:var(--j-ink)}
#rec3680326803 .j-st__arw--p{left:clamp(10px,2.2vw,34px)}
#rec3680326803 .j-st__arw--n{right:clamp(10px,2.2vw,34px)}


/* ---------- СЧЁТЧИК И ПОЛОСА ---------- */
#rec3680326803 .j-st__ft{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:0 var(--j-pad);
  font-family:'AeonikPro',sans-serif}
#rec3680326803 .j-st__cnt{
  font-size:12px;letter-spacing:.2em;color:var(--j-dim-2)}
#rec3680326803 .j-st__cnt b{color:var(--j-linen);font-weight:400}
#rec3680326803 .j-st__bar{
  width:min(300px,34vw);height:1px;background:var(--j-line-soft);position:relative}
#rec3680326803 .j-st__bar i{
  position:absolute;left:0;top:0;height:100%;
  background:var(--j-beaver);transition:width .8s var(--j-ease)}
#rec3680326803 .j-st__swipe{
  display:none;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--j-dim-2)}
#rec3680326803 .j-st__swipe i{
  display:block;width:34px;height:1px;background:rgba(245,236,227,.18);
  position:relative;overflow:hidden}
#rec3680326803 .j-st__swipe i::after{
  content:'';position:absolute;inset:0;background:var(--j-beaver);
  animation:jStLine 2.6s var(--j-ease) infinite}
@keyframes jStLine{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}}


/* ---------- АДАПТИВ ---------- */
@media(max-width:1000px){
  #rec3680326803 .js-block-header{
    grid-template-columns:1fr!important;gap:18px!important;align-items:start}
  #rec3680326803 .t-section__title{grid-column:1!important}
  #rec3680326803 .t-section__descr{
    grid-column:1!important;max-width:none!important;margin:0!important}
  #rec3680326803 .t-store__card{width:70vw!important}
}

@media(max-width:760px){
  #rec3680326803 .j-st__arw{width:42px;height:42px}
  #rec3680326803 .t-store__card__btns-wrapper{
    flex-direction:column;align-items:stretch;width:100%!important}
  #rec3680326803 .js-store-prod-btn,
  #rec3680326803 .js-store-prod-btn2{
    display:inline-flex!important;align-items:center;justify-content:center;
    width:100%!important;height:46px!important}
  #rec3680326803 .j-st__bar{display:none}
  #rec3680326803 .j-st__swipe{display:flex}
}

@media(prefers-reduced-motion:reduce){
  #rec3680326803 .t-store__card{transition:none!important}
}

#rec3680326803 .t-store__card__title .j-qty{display:none!important}

/* ---------- ОКНО «ПОДРОБНЕЕ» ---------- */
/* размеры сняты с вайб-блока juno-sets.html (.j-md__*) */

#rec3680326803 .t-store__prod-popup__container{
  max-width:min(920px,94vw)!important;width:100%!important;
  margin:0 auto!important;padding:0!important;
  border:1px solid var(--j-line-soft)!important;
  background:var(--j-surface)!important}

/* две колонки без зазора, обе одной высоты */
#rec3680326803 .t-store__prod-popup__container .js-store-product > div{
  gap:0!important;align-items:stretch!important}

/* воздух только в текстовой колонке */
#rec3680326803 .t-store__prod-popup__info{
  padding:clamp(26px,3.2vw,44px)!important;
  display:flex!important;flex-direction:column!important}

/* название */
#rec3680326803 .t-store__prod-popup__name{
  font-family:'AcresSans','AeonikPro',sans-serif!important;
  font-size:clamp(24px,3vw,36px)!important;
  font-weight:400!important;line-height:1!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--j-linen)!important;margin:0!important}
#rec3680326803 .t-store__prod-popup__name::before{
  content:'Signature set';display:block;margin-bottom:12px;
  font-family:'AcresSans',sans-serif;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--j-beaver)}

/* «24 шт» и цена — одна строка; количество переносит скрипт */
#rec3680326803 .t-store__prod-popup__price-wrapper{
  display:flex!important;align-items:baseline!important;gap:20px!important;
  margin:14px 0 24px!important}
#rec3680326803 .t-store__prod-popup__price-wrapper .j-qty{
  font-family:'AeonikPro',sans-serif!important;
  font-size:14px!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--j-dim)!important}
#rec3680326803 .t-store__prod-popup__price,
#rec3680326803 .t-store__prod-popup__price-value,
#rec3680326803 .t-store__prod-popup__price-currency{
  font-size:18px!important;font-weight:400!important;
  color:var(--j-beaver)!important}

/* состав */
#rec3680326803 .js-store-prod-all-charcs{margin:0 0 28px!important}
#rec3680326803 .js-store-prod-charcs{padding:11px 0!important;font-size:14px!important}
#rec3680326803 .js-store-prod-all-text{margin:0!important}


/* кнопка кремовая. Панель пишет свою пару правил в  внутри
   кнопки, и у её :hover есть !important — перебиваем весом */
#rec3680326803 .t-store__prod-popup__btn.t-btnflex.t-btnflex_type_button{
  background-color:var(--j-linen)!important;
  color:var(--j-bean)!important;
  border:0!important;border-radius:2px!important;
  width:100%!important;height:52px!important}
#rec3680326803 .t-store__prod-popup__btn.t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):hover,
#rec3680326803 .t-store__prod-popup__btn.t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):focus-visible{
  background-color:var(--j-beaver)!important;
  color:var(--j-ink)!important}
  
/* ---------- ОКНО «ПОДРОБНЕЕ»: КАДР ---------- */
/* Внутреннюю раскладку слайдера Tilda не отдаёт: .t-slds__item держит
   свою высоту, а под ним вылезает серая заглушка. Поэтому кадр ставим
   фоном самому слайдеру, а его внутренности прячем. */
#rec3680326803 .t-store__prod-popup__slider{
  position:relative;
  align-self:stretch!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  margin:0!important;padding:0!important;
  background-color:#000!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  min-height:min(62vh,560px)!important}

#rec3680326803 .t-store__prod-popup__slider.j-st-ph > *{display:none!important}

#rec3680326803 .t-store__prod-popup__slider.j-st-ph::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--j-wine);z-index:5}


/* длинные названия не должны переноситься: KAWASAKI — самое длинное сейчас */
#rec3680326803 .t-store__prod-popup__name{
  white-space:nowrap!important;
  letter-spacing:.1em!important;
  font-size:clamp(22px,2.6vw,32px)!important}
  
  
/* воздух между надзаголовком и названием */
#rec3680326803 .t-store__prod-popup__name::before{margin-bottom:18px!important}

/* поле колонки задаётся только на самой колонке */
#rec3680326803 .t-store__prod-popup__info{
  padding:clamp(26px,3.2vw,44px)!important}

/* внутренние элементы — без собственных боковых отступов,
   чтобы всё встало на одну левую линию внутри поля колонки */
#rec3680326803 .t-store__prod-popup__info > *,
#rec3680326803 .js-store-prod-all-charcs{
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
  text-align:left!important}

/* пустое описание между ценой и составом занимает место — убираем */
#rec3680326803 .js-store-prod-all-text{display:none!important}

/* название → цена: 14px, как в макете */
#rec3680326803 .t-store__prod-popup__price-wrapper{
  margin:14px 0 0!important;padding:0!important}

/* цена → состав: 24px, состав → кнопка: 28px */
#rec3680326803 .js-store-prod-all-charcs{margin:24px 0 28px!important}

/* строки состава сдвинуты внутрь на 20px — вместе с линией под ними,
   поэтому margin, а не padding */
#rec3680326803 .js-store-prod-charcs{
  padding:11px 0!important;
  margin-left:20px!important;margin-right:0!important;
  text-align:left!important;
  font-size:14px!important;line-height:1.4!important}
  
/* высоту окна задаёт текст, кадр подстраивается — как в макете */
#rec3680326803 .t-store__prod-popup__slider{
  min-height:0!important;
  align-self:stretch!important}

/* ---------- ОКНО: вертикальный ритм ---------- */
#rec3680326803 .t-store__prod-popup__info{
  padding:clamp(34px,4vw,52px) clamp(26px,3.2vw,44px)!important;
  display:flex!important;flex-direction:column!important;
  justify-content:flex-start!important}

#rec3680326803 .js-store-prod-all-charcs{margin:24px 0 28px!important}

#rec3680326803 .t-store__prod-popup__btn-wrapper{
  margin:0!important;padding:0!important}
  
/* ---------- ОКНО: точные отступы из макета ---------- */
/* надзаголовок → название: 12px */
#rec3680326803 .t-store__prod-popup__name::before{
  margin-bottom:12px!important;line-height:1.2!important}

/* название → цена: 14px */
#rec3680326803 .t-store__prod-popup__price-wrapper{
  margin:14px 0 0!important;padding:0!important}

/* цена → состав: 24px. Между ними лежит блок описания —
   он пустой, но занимает место, поэтому гасим и его отступы */
#rec3680326803 .js-store-prod-all-charcs{margin:24px 0 28px!important}  

/* ---------- ОКНО: точные отступы (по замеру DOM) ---------- */
/* 18px снизу даёт обёртка заголовка, а не сам заголовок */
#rec3680326803 .t-store__prod-popup__title-wrapper{margin-bottom:0!important}
#rec3680326803 .js-store-price-wrapper,
#rec3680326803 .t-store__prod-popup__price-wrapper{margin:14px 0 0!important}

/* состав лежит внутри js-store-prod-text — гасить его нельзя,
   убираем только его собственный отступ сверху */
#rec3680326803 .js-store-prod-text{margin-top:24px!important}
#rec3680326803 .js-store-prod-all-charcs{margin:0 0 28px!important}

/* надзаголовок: своя высота строки, иначе жмётся к названию */
#rec3680326803 .t-store__prod-popup__name::before{
  line-height:1!important;margin-bottom:14px!important}
#rec3680326803 .t-store__prod-popup__name::before{margin-bottom:22px!important}

@media(max-width:960px){
  #rec3680326803 .t-store__prod-popup__slider{
    aspect-ratio:4/3!important;
    height:auto!important;min-height:0!important;
    align-self:auto!important;
    width:100%!important}
}

#rec3680326803 .t-store__prod-popup__slider.j-st-ph{cursor:zoom-in}


/* в карусели зум-курсор только на активном кадре:
   по соседним клик листает, а не открывает фото */
#rec3680326803 .t-store__card .t-store__card__imgwrapper{cursor:pointer}
#rec3680326803 .t-store__card.j-st-on .t-store__card__imgwrapper{cursor:zoom-in}


#rec3680326803 .t-store__card__title,
#rec3680326803 .t-store__card__title a{white-space:nowrap!important}

/* лайтбокс поверх окна товара Tilda */
.j-lb{z-index:2147483000!important}

/* анимацию несёт кадр, а не карточка: подпись остаётся на месте */
#rec3680326803 .t-store__card{transition:none!important}
#rec3680326803 .t-store__card > a[href="#order"]{
  display:block;position:relative;
  transition:transform .78s var(--j-ease), opacity .78s var(--j-ease)}
#rec3680326803 .t-store__card.j-st-jump > a[href="#order"]{transition:none}


/* шрифт для элементов, которые ставит скрипт (браузер иначе даёт Times) */
#rec3505343703 .j-oy__all,
#rec3505343703 .j-oy-on .j-oy__pcs,
#rec3505343703 .j-oy-on .j-qty{
  font-family:'AeonikPro',-apple-system,BlinkMacSystemFont,sans-serif}
  
/* ---------- ЭКРАН «ЗАКАЗ ПРИНЯТ» ---------- */
/* корзина тёмная, поэтому подтверждение делаем цвета Beaver: теплее
   кремового и не спорит с общей палитрой. Блок лежит в разметке всегда,
   Tilda показывает его после отправки — display даём только с классом успеха. */
#rec3331722203 .t-form__successbox{
  flex-direction:column;align-items:center;gap:20px;
  background:var(--j-beaver)!important;
  color:var(--j-ink)!important;
  border:0!important;border-radius:2px!important;
  padding:clamp(34px,5vw,52px) clamp(24px,4vw,40px)!important;
  margin:0!important;
  font-family:'AeonikPro',sans-serif!important;
  font-size:16px!important;line-height:1.6!important;
  font-weight:400!important;
  text-align:center!important}

#rec3331722203 .js-send-form-success .t-form__successbox{
  display:flex!important}

#rec3331722203 .js-send-form-success .t-form__successbox *{
  color:var(--j-ink)!important;background:transparent!important}

/* галочка — рисуем, файл не нужен */
#rec3331722203 .js-send-form-success .t-form__successbox::before{
  content:'';display:block;flex:0 0 auto;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(11,5,7,.22);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0507' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/24px no-repeat}
  
  
/* количество остаётся в разметке ради корзины, но в окне не видно */
#rec3680326803 .t-store__prod-popup__name .j-qty-src{display:none!important}  
  
  
/* ---------- HERO: вертикальный кадр на мобильном ---------- */
/* горизонтальное фото на узком экране обрезает ролл, поэтому
   ниже 760px подставляем вертикальный вариант того же кадра */
@media(max-width:760px){
  #rec3295928503 .j-hero__ph img{
    content:url("https://static.tildacdn.com/tild6534-6338-4735-b963-663031363433/AB1_8438.jpg")!important;
    object-position:center!important}
}  

/* мобильный hero: надзаголовок в одну строку, затемнение под текстом */
@media(max-width:760px){
  #rec3295928503 .j-eyebrow{letter-spacing:.24em!important}
  #rec3295928503 .j-hero__ph::after{
    background:linear-gradient(to bottom,
      rgba(11,5,7,.55) 0%,
      rgba(11,5,7,.15) 26%,
      rgba(11,5,7,.72) 62%,
      rgba(11,5,7,.96) 100%)!important}
}

/* До сборки скриптом список карточек прячем, чтобы не мелькал сырой список.
   Высоту держим только у сетов — они выше якоря #menu — и только до сборки,
   дальше её задаёт сам скрипт. Устрицам высота не нужна: они ниже якоря. */
#rec3680326803 .t-store__card-list:not(.j-ready),
#rec3505343703 .t-store__card-list:not(.j-ready){visibility:hidden}
#rec3680326803 .t-store__card-list:not(.j-ready){height:94vh;overflow:hidden}
@media(max-width:760px){
  #rec3680326803 .t-store__card-list:not(.j-ready){height:104vh}
}


/* Витрина устриц, десктоп: текст и кнопки — одной группой сверху,
   миниатюры прижаты к низу кадра. Высота колонки привязана к высоте
   кадра — min(66vh,600px), — а не к строке сетки: строка чуть выше кадра. */
@media(min-width:761px){
    #rec3505343703 .j-oy-on .t-store__card__wrap_txt-and-btns{
    display:flex!important;flex-direction:column!important;
    align-self:start!important;height:auto!important;
    min-height:min(66vh,600px)!important}
  #rec3505343703 .j-oy-on .store__card__wrap_txt-and-opts{
    flex-grow:0!important}
  #rec3505343703 .j-oy-on .js-product-controls-wrapper{
    margin-top:0!important}
  #rec3505343703 .j-oy-on .t-store__card__btns-wrapper{
    margin-top:36px!important}
  #rec3505343703 .j-oy-on .j-oy__thumbs{
    margin-top:auto!important}
}