/* ==========================================================================
   INSTICK Israel — стили СТРАНИЦЫ ТОВАРА (product.html)
   Подключается ПОСЛЕ instick-home.css и переиспользует все токены:
   палитру, радиусы 3–5px, тени, шрифты. Здесь — только PDP-блоки.
   ========================================================================== */

/* ---------- Хлебные крошки -------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding-block: 1.1rem .4rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { opacity: .5; }
.crumbs__here { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Верхний экран товара: галерея | инфо (RTL: галерея справа)
   ========================================================================== */
.pdp { display: grid; gap: clamp(1.4rem, 2.5vw, 2.4rem); padding-block: 1.6rem 3rem; align-items: start; }
/* 3 колонки как у Joy Rush (RTL: факты справа → галерея → инфо слева) */
@media (min-width: 1000px) { 
    .pdp { grid-template-columns: 128px minmax(0, 1.15fr) minmax(0, .95fr); } 
    .pdp.accessories {grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);}

}

/* ---------- Колонка фактов + вертикальные миниатюры ------------------------- */
.pcol { display: flex; flex-direction: column; gap: .55rem; }
/* Факт — тихая строка «иконка в тонком круге · цифра · подпись»,
   разделённые волосяными линиями. Сдержанно: не спорит с фото и покупкой */
.pcol { gap: 0; }
.pcf {
  display: flex; align-items: center; gap: .8rem;
  padding-block: .95rem;
  border-block-end: 1px solid var(--border);
  background: none; border-inline: 0; border-block-start: 0; border-radius: 0;
}
.pcf:last-of-type { border-block-end: 0; }
/* Тонкая премиум-иконка в круге-обводке */
.pcf__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink-soft);
}
.pcf__icon svg { width: 17px; height: 17px; }
.pcf__num {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; line-height: 1.1; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.pcf__num small { font-size: .68em; color: var(--ink-soft); font-weight: 400; }
.pcf__label { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 300; }
/* На мобиле лента фактов — горизонтальная, без линий */
@media (max-width: 999px) {
  .pcf { flex: 1 1 150px; border-block-end: 0; padding-block: .4rem; }
}
/* На мобиле колонка фактов раскладывается в ряд */
@media (max-width: 999px) {
  .pcol { flex-direction: row; flex-wrap: wrap; }
  .pcf { flex: 1 1 100px; }
}

/* ---------- Галерея ---------------------------------------------------------- */
.gal { display: flex; flex-direction: column; gap: .7rem; }
/* Главное фото: вертикальное 4:5, но ограничено высотой вьюпорта —
   помещается ЦЕЛИКОМ в первый экран вместе с миниатюрами под ним */
.gal__main {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  /* Крупный основной кадр: миниатюры лежат ОВЕРЛЕЕМ у его нижнего края,
     поэтому вся высота колонки — под фото */
  max-height: min(78svh, 760px);
  width: auto; margin-inline: auto; max-width: 100%;
  border-radius: var(--radius-lg);
  background: var(--ground-2); box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}
.gal__main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
/*.gal__main:hover img { transform: scale(1.6); }    origin задаёт JS по курсору */
.gal__main.is-fading img { opacity: 0; }          /* фейд при смене кадра */
/* Значок play, если выбран видео-кадр */
.gal__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
/* display:grid выше перебил бы атрибут hidden — возвращаем скрытие явно */
.gal__play[hidden] { display: none; }
.gal__play span {
  width: 68px; height: 68px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--is-dark);
  font-size: 1.4rem; padding-inline-start: 4px;
  box-shadow: var(--shadow);
}
/* Полоса миниатюр — ОВЕРЛЕЕМ, прижата к НИЖНЕМУ краю главного фото:
   position:absolute; inset-block-end:0 + полупрозрачный градиент-подложка */
.gal__nav {
  position: absolute; z-index: 2;
  inset-block-end: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 1.4rem .7rem .7rem;
  background: linear-gradient(0deg, rgba(10,6,12,.58), rgba(10,6,12,.25) 60%, transparent);
}
.gal__thumbs { display: flex; gap: .4rem; padding: 2px 0; min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.gal__thumbs::-webkit-scrollbar { display: none; }
/* Миниатюры чуть меньше, с белой рамкой — читаются на любом фото */
.gal__thumb {
  position: relative; flex: 0 0 auto;
  width: 48px; aspect-ratio: 4 / 5; border-radius: var(--radius);
  overflow: hidden; padding: 0;
  border: 1px solid #fff;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb:hover { transform: translateY(-2px); }
.gal__thumb.is-active { border-color: var(--accent); }
/* Мини-значок play на видео-миниатюре */
.gal__thumb--video::after {
  content: "▶"; position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(20,10,22,.4); color: #fff; font-size: .8rem;
  padding-inline-start: 2px;
}
/* Маленькие чёрные ненавязчивые стрелки по краям ряда миниатюр */
.gal__arrow {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(12,8,14,.72); color: #fff; font-size: .8rem;
  transition: background-color .2s var(--ease);
}
.gal__arrow:hover { background: var(--is-coral); }
[dir="ltr"] .gal__arrow {transform: rotate(180deg);}

/* ---------- Инфо-колонка ------------------------------------------------------ */
.pinfo { display: flex; flex-direction: column; gap: 1rem; }
/* Категория над названием убрана (v14); название компактнее —
   длинные имена товаров не ломают колонку */
.pinfo__name { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; }
/* Рейтинг: звёзды + число отзывов (ссылка к блоку отзывов) */
.pinfo__rating { display: flex; align-items: center; gap: .6rem; font-size: var(--step--1); }
.pinfo__rating a { color: var(--ink-soft); text-decoration: underline; }
.pinfo__desc { color: var(--ink-soft); font-weight: 300; max-width: 48ch; }
/* Бейджи свойств */
.pinfo__badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.pbadge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: var(--radius);
  background: var(--ground-2); border: 1px solid var(--border);
  font-size: var(--step--1); font-weight: 500;
}
/* Единые тонкие моно-иконки — крупные, хорошо читаются */
.pbadge svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Цена */
.pinfo__priceline { display: flex; align-items: baseline; gap: .7rem; }
.pinfo__price { font-family: var(--font-display); font-weight: var(--w-strong); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.pinfo__old { color: var(--ink-soft); text-decoration: line-through; font-size: var(--step-1); }
.pinfo__save {
  padding: .3rem .7rem; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .78rem; font-weight: var(--w-strong);
}
/* Селектор упаковки: 4/12/24 стика */
.packs { display: flex; flex-wrap: wrap; gap: .5rem; }
.pack {
  flex: 1 1 110px; padding: .7rem .9rem; text-align: center;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pack:hover { background: var(--ground-2); }
.pack.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.pack__n { display: block; font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-1); }
.pack__hint { display: block; font-size: .74rem; color: var(--ink-soft); }
.pack.is-active .pack__hint { color: var(--accent); font-weight: 600; }
/* Опции покупки: разовая / подписка −10% (компактные строки-радио) */
.opts { display: flex; flex-direction: column; gap: .45rem; }
.opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 500;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt:hover { background: var(--ground-2); }
.opt.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
/* Псевдо-радио */
.opt::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border); flex: 0 0 auto;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt.is-active::before { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--accent); }
.opt__save {
  padding: .15rem .5rem; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: var(--w-strong);
}
.opt__price { margin-inline-start: auto; font-family: var(--font-display); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }

/* Компактная строка покупки: степпер + ОДНА кнопка с ценой внутри */
.buyrow { display: flex; align-items: stretch; gap: .55rem; }
.qty {
  display: flex; align-items: center; flex: 0 0 auto;
  border: 1.5px solid var(--border); border-radius: var(--radius);
}
.qty button { width: 38px; min-height: 46px; font-size: 1.1rem; transition: background-color .2s var(--ease); }

html[lang="he"] .qty {
      direction: ltr;
}

.qty button:hover { background: var(--ground-2); }
.qty output { min-width: 2em; text-align: center; font-family: var(--font-display); font-weight: var(--w-strong); }
.qty input {     min-width: 2em;
    text-align: center;
    font-family: var(--font-display);
    font-weight: var(--w-strong);
    width: 40px;
    border: none;
    text-align: center;
    font-size: 20px; }
.buycta {
  flex: 1 1 auto; justify-content: space-between !important;
  font-size: var(--step-0) !important; padding-block: .8em !important;
}
.buycta b { font-variant-numeric: tabular-nums; font-weight: var(--w-strong); }
/* Сводка доставки под кнопкой */
.shipinfo { display: flex; flex-direction: column; gap: .4rem; padding-block-start: .4rem; border-block-start: 1px solid var(--border); }
.shipinfo__row { display: flex; align-items: center; gap: .55rem; font-size: var(--step--1); color: var(--ink-soft); }

a.shipinfo__row {
        text-decoration: underline;
}

a.shipinfo__row:hover {
        color: var(--cat-energy);
}

/* ---------- Вкусы серии (свотчи) ------------------------------------------------ */
.flavors-row h6 {
  margin: 0 0 .6rem; font-family: var(--font-display); font-weight: var(--w-strong);
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch {
  display: flex; align-items: center; gap: .2rem;
      padding: .1rem;  padding-inline-end: .7rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 500;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.swatch img {     width: 50px;
    height: 46px; object-fit: cover; border-radius: var(--radius-sm); }
.swatch:hover { background: var(--ground-2); }
.swatch.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* ==========================================================================
   Плитки-факты (в духе Joy Rush 0g / 10mg / 42cal)
   ========================================================================== */
.pfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 760px) { .pfacts { grid-template-columns: repeat(4, 1fr); } }
.pfact {
  padding: 1.3rem 1rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.pfact__num { font-family: var(--font-display); font-weight: var(--w-title); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
.pfact__label { margin-block-start: .25rem; font-size: var(--step--1); color: var(--ink-soft); font-weight: 300; }

/* ==========================================================================
   Табы: תיאור / מרכיבים / ערכים תזונתיים / משלוח
   ========================================================================== */
.ptabs { display: flex; flex-wrap: wrap; gap: .4rem; border-block-end: 1.5px solid var(--border); }
.ptab {
  padding: .8rem 1.2rem; margin-block-end: -1.5px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-0);
  border-block-end: 2px solid transparent; color: var(--ink-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ptab:hover { color: var(--ink); }
.ptab[aria-selected="true"] { color: var(--accent); border-block-end-color: var(--accent); }
.ptabpanel { padding-block: 1.6rem; max-width: 68ch; color: var(--ink-soft); font-weight: 300; }
.ptabpanel[hidden] { display: none; }
.ptabpanel b, .ptabpanel strong { color: var(--ink); font-weight: var(--w-strong); }
/* Мини-таблица пищевой ценности */
.nutri { width: 100%; max-width: 460px; border-collapse: collapse; font-size: var(--step--1); }
.nutri th, .nutri td { padding: .6rem .4rem; border-block-end: 1px solid var(--border); text-align: start; }
.nutri th { font-weight: var(--w-strong); color: var(--ink); }
.nutri td:last-child { text-align: end; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ==========================================================================
   «עם מה שותים» — иконки сочетаний (данные конкретного товара)
   ========================================================================== */
/* Крупные плитки-сочетания: тонкая иконка в круге-обводке на кремовой
   подложке, воздух, мягкий подъём на hover — лакшери, без эмодзи */
.mixes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (min-width: 700px) { .mixes { grid-template-columns: repeat(6, 1fr); } }
.mix {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: 1.5rem .8rem 1.2rem; text-align: center;
  background: var(--is-cream); border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
:root[data-theme="dark"] .mix { background: var(--surface); }
.mix:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--border); }
/* Иконка в тонком круге-обводке */
.mix__icon {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--surface);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.mix:hover .mix__icon { border-color: var(--accent); color: var(--accent); }
.mix__icon svg { width: 26px; height: 26px; }
.mix__label { font-size: var(--step--1); font-weight: 500; letter-spacing: .02em; }

/* ==========================================================================
   «איך שותים» — 3 шага + калорийность порции
   ========================================================================== */
.psteps { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .psteps { grid-template-columns: repeat(3, 1fr); } }
.pstep {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.pstep__num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: var(--w-strong);
}
.pstep__title { font-weight: var(--w-strong); }
.pstep__text { font-size: var(--step--1); color: var(--ink-soft); font-weight: 300; }
.pcal {
  margin-block-start: .9rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--cat-natural) 12%, transparent);
  color: color-mix(in srgb, var(--cat-natural) 75%, var(--ink));
  font-weight: 500; font-size: var(--step--1);
}

/* ==========================================================================
   Сравнительная таблица: INSTICK vs газировка
   ========================================================================== */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; table-layout: fixed; }
/* Ширины: названия (справа в RTL) → сразу INSTICK → газировка дальше слева */
.cmp th:nth-child(1), .cmp td:nth-child(1) { width: 27%; }
.cmp th:nth-child(2), .cmp td:nth-child(2) { width: 38%; }
.cmp th, .cmp td { padding: .95rem 1rem; text-align: start; border-block-end: 1px solid var(--border); }
/* Название строки прижато К КОЛОНКЕ INSTICK (text-align:end в RTL = влево) */
.cmp td.cmp__crit { text-align: end; padding-inline-end: 1.1rem; }
.cmp thead th { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-0); vertical-align: bottom; }
/* Фото товара в шапке колонки сравнения */
.cmp__head { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.cmp__photo {
  width: 64px; height: 78px; border-radius: var(--radius);
  object-fit: cover; box-shadow: var(--shadow-soft);
}
/* «Силуэт» газировки: серый прямоугольник с SVG-бутылкой */
.cmp__soda {
  width: 64px; height: 78px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--ground-2); color: var(--ink-soft);
}
.cmp__soda svg { width: 30px; height: 44px; }
/* Колонка INSTICK выделена мягкой зелёной подложкой */
.cmp .is-us { background: color-mix(in srgb, var(--cat-natural) 8%, var(--surface)); }
.cmp thead .is-us { border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.cmp tbody tr:last-child .is-us { border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.cmp__crit { color: #2B242B; font-weight: 600; font-size: var(--step-0); }
/* Галочки/минусы */
.cmp__yes { color: #3E7D26; font-weight: var(--w-strong); }
.cmp__yes::before { content: "✓ "; }
.cmp__no { color: #B3352A; font-weight: 500; }
.cmp__no::before { content: "✗ "; }
/* Пояснения в ячейках — крупнее и темнее, чтобы читались */
.cmp__note { display: block; font-size: .92rem; color: #4A4048; font-weight: 400; margin-block-start: .15rem; }
:root[data-theme="dark"] .cmp__note, :root[data-theme="dark"] .cmp__crit { color: var(--ink-soft); }

/* ---------- Прочее ------------------------------------------------------------- */
/* Секции PDP компактнее, чем на главной */
.psection { padding-block: clamp(2.4rem, 4vw, 4rem); }
.psection__title { font-size: var(--step-2); margin-block-end: 1.4rem; }


/* ==========================================================================
   v13 · Контраст: ключевые надписи чернее и чуть жирнее
   ========================================================================== */
.pinfo__name { font-weight: 600; color: #161016; }
.pinfo__desc { color: #4A4048; }
.pcf__num { font-weight: 600; color: #161016; }
.pcf__label { color: #5A5058; }
.psection__title { font-weight: 600; color: #161016; }
.pinfo__price { color: #161016; }
.mix__label { color: #161016; }
.pbadge { color: #2B242B; font-weight: 600; }
:root[data-theme="dark"] .pinfo__name,
:root[data-theme="dark"] .pcf__num,
:root[data-theme="dark"] .psection__title,
:root[data-theme="dark"] .pinfo__price,
:root[data-theme="dark"] .mix__label { color: var(--ink); }

/* ==========================================================================
   v13 · Зелёная премиальная кнопка «הוסף לסל»
   ========================================================================== */
.buycta {
  background: #157A44 !important;                    /* глубокий премиум-зелёный */
  box-shadow: 0 8px 22px -10px rgba(21, 122, 68, .55) !important;
}
.buycta:hover { background: #0F6236 !important; }
.buycta svg { width: 18px; height: 18px; }
.buycta.is-added { background: #0C5C33 !important; }

/* ==========================================================================
   v13 · Оформление акции: старая цена + бейдж скидки
   ========================================================================== */
.pinfo__priceline { gap: .6rem; flex-wrap: wrap; }
.pinfo__old { font-size: var(--step-1); text-decoration-thickness: 1.5px; }
.pinfo__save {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; padding: .32rem .75rem;
  align-self: center;
}

/* =========================================================
   INSTICK TASTE PROFILE
   Новые стили + недостающие правила из старой версии
   При конфликте приоритет у новых стилей
   ========================================================= */


/* =========================================================
   ОСНОВНОЙ БЛОК
   Добавлено из старых стилей
   ========================================================= */

.taste {
    padding: 1rem 1.1rem;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface);

    display: flex;
    flex-direction: column;
    gap: .65rem;
}


/* Базовый заголовок — из старых */

.taste h6 {
    margin: 0;

    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step--1);

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #161016;
}


/* =========================================================
   ОСНОВНАЯ ШКАЛА
   Добавлено из старых стилей
   ========================================================= */

.taste__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: .8rem;
}

.taste__label {
    font-size: .8rem;
    color: var(--ink-soft);
    font-weight: 500;
}

.taste__bar {
    display: flex;
    gap: 4px;

    /* базовое направление, RTL ниже его переопределяет */
    direction: ltr;
}

.taste__seg {
    flex: 1;

    height: 6px;

    border-radius: 2px;

    background: var(--ground-2);
}

.taste__seg.is-on {
    background: #161016;
}


/* =========================================================
   TRAITS
   Добавлено из старых стилей
   ========================================================= */

.taste__traits {
    display: flex;
    flex-wrap: wrap;

    gap: .35rem;

    padding-block-start: .2rem;
}

.taste__trait {
    padding: .28rem .7rem;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    color: #2B242B;

    font-size: .74rem;
    font-weight: 500;
}


/* =========================================================
   DARK MODE
   Добавлено из старых стилей
   ========================================================= */

:root[data-theme="dark"] .taste__seg.is-on {
    background: var(--ink);
}

:root[data-theme="dark"] .taste h6 {
    color: var(--ink);
}

:root[data-theme="dark"] .taste__trait {
    color: var(--ink);
}


/* =========================================================
   RTL
   ========================================================= */

.taste[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.taste[dir="rtl"] .taste__row,
.taste[dir="rtl"] .taste__label {
    direction: rtl;
    text-align: right;
}


/* =========================================================
   Заголовок
   ========================================================= */

.taste__heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    margin-bottom: 18px;
}

.taste__heading h6 {
    margin: 0;
}


/* =========================================================
   INFO BUTTON
   ========================================================= */

.taste-info-button {
    appearance: none;
    -webkit-appearance: none;

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

    width: 22px;
    height: 22px;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.taste-info-button__circle {
    box-sizing: border-box;

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

    width: 19px;
    height: 19px;

    border: 1.5px solid #777;
    border-radius: 50%;

    color: #666;
    background: #fff;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

    animation: tasteInfoPulse 2.2s ease-in-out 3;
}

.taste-info-button:hover .taste-info-button__circle {
    color: #fff;
    background: #2f6b59;
    border-color: #2f6b59;

    transform: scale(1.08);
}


/* мягко привлекаем внимание только несколько раз */

@keyframes tasteInfoPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(47,107,89,0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(47,107,89,.10);
    }
}


/* =========================================================
   АНИМАЦИЯ ПОЛОСОК
   ========================================================= */

.taste__seg.is-on {
    transform-origin: right center;
    animation: tasteSegmentFill .45s ease-out both;
}

[dir="ltr"] .taste__seg.is-on {
    transform-origin: left center;
}

.taste__bar .taste__seg:nth-child(1) {
    animation-delay: .05s;
}

.taste__bar .taste__seg:nth-child(2) {
    animation-delay: .10s;
}

.taste__bar .taste__seg:nth-child(3) {
    animation-delay: .15s;
}

.taste__bar .taste__seg:nth-child(4) {
    animation-delay: .20s;
}

.taste__bar .taste__seg:nth-child(5) {
    animation-delay: .25s;
}

@keyframes tasteSegmentFill {

    from {
        opacity: 0;
        transform: scaleX(.15);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


/* =========================================================
   MODAL
   ========================================================= */

.taste-modal {
    width: min(540px, calc(100vw - 32px));
    max-width: 540px;

    padding: 0;
    margin: auto;

    border: 0;
    border-radius: 18px;

    background: transparent;

    overflow: visible;
}

.taste-modal[open] {
    animation: tasteModalIn .25s cubic-bezier(.2,.8,.2,1) both;
}

.taste-modal::backdrop {
    background: rgba(20, 18, 22, .50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    animation: tasteBackdropIn .2s ease both;
}


/* ---------- внутреннее окно ---------- */

.taste-modal__content {
    position: relative;

    padding: 30px;

    background: #fff;
    border: 1px solid #eceae8;
    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        0 4px 18px rgba(0,0,0,.07);

    text-align: start;
}


/* RTL */

.taste-modal[dir="rtl"],
.taste-modal[dir="rtl"] .taste-modal__content {
    direction: rtl;
    text-align: right;
}


/* ---------- закрыть ---------- */

.taste-modal__close {
    position: absolute;

    top: 15px;
    inset-inline-end: 15px;

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

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f5f4f2;
    color: #555;

    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.taste-modal__close:hover {
    color: #111;
    background: #eceae7;
    transform: rotate(5deg);
}


/* ---------- большая info icon ---------- */

.taste-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 16px;

    border-radius: 50%;

    background: rgba(47,107,89,.09);
}

.taste-modal__icon span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border: 1.5px solid #2f6b59;
    border-radius: 50%;

    color: #2f6b59;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}


/* ---------- title ---------- */

.taste-modal__title {
    padding-inline-end: 40px;
    margin-bottom: 24px;

    color: #201b21;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}


/* ---------- sections ---------- */

.taste-modal__section {
    margin-bottom: 25px;
}

.taste-modal__subtitle {
    margin-bottom: 10px;

    color: #333;

    font-size: 13px;
    font-weight: 700;
}


/* ---------- шкала 1-5 ---------- */

.taste-modal__scale {
    display: grid;
    gap: 5px;

    padding: 14px 16px;

    border-radius: 12px;

    background: #f7f7f5;

    color: #666;

    font-size: 12px;
    line-height: 1.55;
}


/* ---------- определения ---------- */

.taste-modal__definitions {
    display: grid;
    gap: 0;

    border-top: 1px solid #eee;
}

.taste-modal__definition {
    display: grid;
    gap: 4px;

    padding: 13px 0;

    border-bottom: 1px solid #eee;
}

.taste-modal__definition strong {
    color: #262226;

    font-size: 13px;
    font-weight: 700;
}

.taste-modal__definition span {
    color: #777;

    font-size: 12px;
    line-height: 1.55;
}


/* ---------- animations ---------- */

@keyframes tasteModalIn {

    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tasteBackdropIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .taste-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .taste-modal__content {
        max-height: calc(100vh - 24px);

        padding: 24px 20px;

        border-radius: 15px;

        overflow-y: auto;
    }

    .taste-modal__title {
        font-size: 18px;
    }

    .taste-modal__close {
        top: 12px;
        inset-inline-end: 12px;
    }

}


/* =========================================================
   Taste profile — финальные RTL правки
   ========================================================= */

/* Отступ после блока перед следующим заголовком */

.taste.taste--wide {
    margin-block-end: 56px;
}


/* Иврит: активные сегменты начинаются СПРАВА */

.taste.taste--wide[dir="rtl"] .taste__bar {
    direction: rtl !important;
    flex-direction: row !important;
}


/* Для анимации на иврите тоже раскрываем сегмент от правого края */

.taste.taste--wide[dir="rtl"] .taste__seg.is-on {
    transform-origin: right center;
}


/* RU / EN остаются слева направо */

.taste.taste--wide[dir="ltr"] .taste__bar {
    direction: ltr !important;
    flex-direction: row !important;
}

.taste.taste--wide[dir="ltr"] .taste__seg.is-on {
    transform-origin: left center;
}

/* ==========================================================================
   v15 · Профиль вкуса как отдельная секция (после «עם מה שותים»)
   ========================================================================== */
.taste--wide { max-width: 620px; padding: 1.3rem 1.4rem; gap: .75rem; }

/* ==========================================================================
   v15 · Сториз в стиле Instagram: лента кружков + полноэкранный вьюер
   ========================================================================== */
.stories { display: flex; gap: 1.1rem; overflow-x: auto; padding-block: .3rem; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0; }
/* Кружок с фирменной градиентной обводкой (как ring в Instagram) */
.story__ring {
  width: 76px; height: 76px; border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 30deg, var(--accent), #F6A609, var(--accent));
  transition: transform .25s var(--ease);
}
.story:hover .story__ring { transform: scale(1.06); }
.story__ring img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 2.5px solid var(--ground);
}
.story__name { font-size: .74rem; font-weight: 500; color: #2B242B; }
:root[data-theme="dark"] .story__name { color: var(--ink); }

/* Полноэкранный вьюер сториз */
.storyv {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center;
  background: rgba(10, 6, 12, .94);
  visibility: hidden; opacity: 0;
  transition: opacity .25s var(--ease), visibility .25s;
}
.storyv.is-open { visibility: visible; opacity: 1; }
.storyv__frame {
  position: relative; width: min(430px, 94vw); height: min(86svh, 760px);
  border-radius: var(--radius-lg); overflow: hidden; background: #000;
}
.storyv__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Прогресс-бары сверху (по сегменту на сториз) */
.storyv__progress {
  position: absolute; inset-inline: .6rem; inset-block-start: .6rem; z-index: 2;
  display: flex; gap: 4px; direction: ltr;          /* заполняются слева направо */
}
.storyv__seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.storyv__seg i {
  display: block; height: 100%; width: 0; background: #fff;
}
.storyv__seg.is-done i { width: 100%; }
.storyv__seg.is-active i { width: 100%; transition: width var(--story-dur, 5s) linear; }
/* Подпись и кнопки */
.storyv__caption {
  position: absolute; inset-inline: 1rem; inset-block-end: 1.1rem; z-index: 2;
  color: #fff; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.storyv__close {
  position: absolute; inset-block-start: 1.3rem; inset-inline-end: 1.3rem; z-index: 3;
  width: 40px; height: 40px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
}
.storyv__close:hover { background: rgba(255,255,255,.3); }
.storyv__arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff;
}
.storyv__arrow:hover { background: rgba(255,255,255,.3); }
.storyv__arrow--prev { inset-inline-start: max(1rem, calc(50% - 300px)); }
.storyv__arrow--next { inset-inline-end: max(1rem, calc(50% - 300px)); }

/* ==========================================================================
   v15 · Стена фото-отзывов #INSTICK (визуальный UGC, masonry)
   ========================================================================== */
.ugcwall { columns: 2; column-gap: .9rem; }
@media (min-width: 720px) { .ugcwall { columns: 4; } }
.ugcwall__item {
  display: block; width: 100%; margin-block-end: .9rem;
  break-inside: avoid; border-radius: var(--radius);
  overflow: hidden; padding: 0; position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ugcwall__item img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.ugcwall__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ugcwall__item:hover img { transform: scale(1.05); }
/* Подпись-хэштег в углу плитки */
.ugcwall__tag {
  position: absolute; inset-inline-start: .55rem; inset-block-end: .55rem;
  padding: .2rem .55rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.9); color: #161016;
  font-size: .7rem; font-weight: 600;
}

/* ==========================================================================
   v15 · Лента Instagram @instick_il
   ========================================================================== */
.igfeed { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (min-width: 760px) { .igfeed { grid-template-columns: repeat(6, 1fr); } }
.igfeed__item { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.igfeed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.igfeed__item:hover img { transform: scale(1.08); }
/* Тёмная плёнка с логотипом IG на hover */
.igfeed__item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,10,22,.35); opacity: 0; transition: opacity .3s var(--ease);
}
.igfeed__item:hover::after { opacity: 1; }
.igfeed__item svg {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 26px; height: 26px; color: #fff;
  opacity: 0; transition: opacity .3s var(--ease);
}
.igfeed__item:hover svg { opacity: 1; }

/* ==========================================================================
   v15 · «נקנה יחד» — часто покупают вместе
   ========================================================================== */
.fbt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.fbt__items { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; flex: 1 1 380px; }
.fbt__item { display: flex; align-items: center; gap: .6rem; }
.fbt__item img { width: 56px; height: 68px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.fbt__name { display: block; font-size: .82rem; font-weight: 600; color: #161016; }
.fbt__price { display: block; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fbt__plus { color: var(--ink-soft); font-size: 1.1rem; font-weight: 300; }
.fbt__total { display: flex; flex-direction: column; gap: .1rem; }
.fbt__total small { color: var(--ink-soft); font-size: .74rem; }
.fbt__sum { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: #161016; }
/* Зелёная кнопка «добавить всё» — в тон основной CTA */
.fbt__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8em 1.4em; border-radius: var(--radius);
  background: #157A44; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.fbt__btn:hover { background: #0F6236; transform: translateY(-2px); }
.fbt__btn.is-added { background: #0C5C33; }

/* ==========================================================================
   v16 · Текст по странице чуть крупнее
   ========================================================================== */
body { font-size: 108%; }                            /* product.css грузится только на PDP */
.pcf__label { font-size: .8rem; }
.taste__label { font-size: .88rem; }
.taste__trait { font-size: .8rem; }
.shipinfo__row { font-size: var(--step-0); }
.ptabpanel { font-size: var(--step-0); }
.mix__label { font-size: var(--step-0); }
.story__name { font-size: .82rem; }
.pinfo__desc { font-size: var(--step-0); }

/* ==========================================================================
   v16 · «עוד טעמים בסדרה»: первые 10 вкусов + раскрытие остальных
   ========================================================================== */
/* В свёрнутом состоянии всегда показываем ровно первые 10 элементов. */
.swatches.is-collapsed .swatch:nth-child(n + 11) {
  display: none;
}

.swatches-toggle {
  margin-block-start: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}

.swatches-toggle:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.swatches-toggle[hidden] {
  display: none !important;
}

/* ==========================================================================
   v16 · «נקנה יחד»: явные цены и размер выгоды
   ========================================================================== */
.fbt__price { font-size: .92rem; font-weight: 600; color: #161016; }
.fbt__total { gap: .2rem; }
.fbt__was { color: var(--ink-soft); text-decoration: line-through; font-size: .92rem; }
.fbt__sum { color: #157A44; }                        /* итог со скидкой — зелёный */
.fbt__savebadge {
  align-self: flex-start;
  padding: .28rem .7rem; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 600;
}

/* ==========================================================================
   v17 · Блок рецептов — «вкусные» карточки с фото/видео
   ========================================================================== */
.recipes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .recipes { grid-template-columns: repeat(4, 1fr); } }
.recipe { display: flex; flex-direction: column; gap: .7rem; padding: 0; text-align: start; }
.recipe__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: var(--ground-2); box-shadow: var(--shadow-soft);
}
.recipe__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
/* «Аппетитный» hover: лёгкий зум с наклоном + тёплый градиент снизу */
.recipe:hover .recipe__media img { transform: scale(1.12) rotate(-1.5deg); }
.recipe__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,10,22,.45), transparent 55%);
  opacity: .8; transition: opacity .4s var(--ease);
}
.recipe:hover .recipe__media::after { opacity: 1; }
/* Чипы времени/сложности поверх фото */
.recipe__tags {
  position: absolute; z-index: 1; inset-inline-start: .6rem; inset-block-start: .6rem;
  display: flex; gap: .3rem;
}
.recipe__tag {
  padding: .22rem .6rem; border-radius: var(--radius);
  background: rgba(255,255,255,.92); color: #161016;
  font-size: .74rem; font-weight: 600;
}
/* Кнопка play для видео-рецептов (пульсирует при hover) */
.recipe__play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
}
.recipe__play span {
  width: 54px; height: 54px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--is-dark);
  font-size: 1.1rem; padding-inline-start: 3px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.recipe:hover .recipe__play span { transform: scale(1.14); background: var(--accent); color: #fff; }
.recipe__title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: #161016; padding-inline: .2rem;
  display: flex; align-items: center; gap: .4rem;
}
/* Стрелка выезжает при hover */
.recipe__title i {
  font-style: normal; opacity: 0; transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  color: var(--accent);
}
.recipe:hover .recipe__title i { opacity: 1; transform: translateX(0); }
:root[data-theme="dark"] .recipe__title { color: var(--ink); }

/* ==========================================================================
   v17 · Блог — асимметричная композиция: ведущая статья + мелкие
   ========================================================================== */
.blog { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .blog { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
}
/* Ведущая статья: крупное фото с текстом поверх */
.blog__lead {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 380px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.blog__lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.blog__lead:hover img { transform: scale(1.07); }
.blog__lead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12,8,14,.78), rgba(12,8,14,.2) 55%, transparent);
}
.blog__lead-body { position: relative; z-index: 1; padding: clamp(1.2rem, 3vw, 2rem); color: #fff; display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.blog__lead-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #fff;     line-height: 1.1;}
.blog__lead-x { color: rgba(255,255,255,.75); font-size: var(--step--1); }
/* Столбец мелких статей: горизонтальные карточки */
.blog__list { display: flex; flex-direction: column; gap: 1rem; }
.blog__item {
  flex: 1; display: flex; gap: .9rem; align-items: center;
  padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.blog__item img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius); flex: 0 0 auto; }
.blog__item-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: #161016; }
:root[data-theme="dark"] .blog__item-title { color: var(--ink); }
.blog__meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--ink-soft); }
.blog__tag {
  padding: .16rem .55rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--is-dark));
  font-weight: 600;
}

/* =========================================================
   KASHRUT — плитка в галерее
   ========================================================= */

.gal__thumb--kashrut {
    background: #fff;
    cursor: pointer;
}

.gal__thumb--kashrut img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
    background: #fff;
}


/* =========================================================
   KASHRUT — большая плашка поверх главного фото
   ========================================================= */

.gal__kashrut {
    position: absolute;
    z-index: 5;

    top: 8px;
    left: 18px;
    width: 90px;
    height: 90px;

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

    padding: 0px;

    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .12),
        0 2px 6px rgba(0, 0, 0, .06);

    cursor: zoom-in;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.gal__kashrut img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}

.gal__kashrut:hover {
    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .16),
        0 3px 8px rgba(0, 0, 0, .08);
}


/* =========================================================
   KASHRUT — FULLSCREEN VIEWER
   ========================================================= */

.kashrut-viewer {
    position: fixed;
    z-index: 99999;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

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

    padding: 30px;

    background: rgba(0, 0, 0, .88);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.kashrut-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Белая карточка с сертификатом */

.kashrut-viewer__content {
    position: relative;

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

    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 92vh;

    padding: 25px;

    background: #fff;
    border-radius: 14px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .35),
        0 5px 25px rgba(0, 0, 0, .18);

    transform: translateY(10px) scale(.96);

    transition: transform .25s ease;
}

.kashrut-viewer.is-open .kashrut-viewer__content {
    transform: translateY(0) scale(1);
}


/* Сам сертификат */

.kashrut-viewer__content img {
    display: block;

    width: auto;
    height: auto;

    max-width: calc(92vw - 50px);
    max-height: calc(92vh - 50px);

    object-fit: contain;
}


/* =========================================================
   CLOSE
   ========================================================= */

.kashrut-viewer__close {
    position: absolute;
    z-index: 10;

    top: 20px;
    right: 20px;

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

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #111;

    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, .2);

    transition:
        transform .2s ease,
        background-color .2s ease;
}

.kashrut-viewer__close:hover {
    background: #f1f1f1;
    transform: scale(1.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    /* плашка на фото */

    .gal__kashrut {
        top: 12px;
        left: 12px;

        width: 82px;
        height: 82px;

        padding: 8px;

        border-radius: 8px;
    }


    /* fullscreen */

    .kashrut-viewer {
        padding: 12px;
    }

    .kashrut-viewer__content {
        max-width: 96vw;
        max-height: 92vh;

        padding: 15px;

        border-radius: 10px;
    }

    .kashrut-viewer__content img {
        max-width: calc(96vw - 30px);
        max-height: calc(92vh - 30px);
    }

    .kashrut-viewer__close {
        top: 12px;
        right: 12px;

        width: 44px;
        height: 44px;

        font-size: 28px;
    }
}
/* ==========================================================================
   v18 · RESPONSIVE PDP POLISH
   Mobile order: gallery -> product info -> facts (pcol)
   HE = RTL, RU/EN = LTR. No HTML changes required.
   ========================================================================== */

/* Prevent long translated strings from widening the PDP. */
.pdp,
.pdp > *,
.pinfo,
.gal,
.pcol,
.buyrow,
.flavors-row,
.swatches,
.ptabs,
.pstep,
.fbt,
.fbt__items,
.blog,
.blog__item {
  min-width: 0;
}

.pinfo__name,
.pinfo__desc,
.pbadge,
.shipinfo__row,
.swatch,
.pstep__text,
.mix__label,
.fbt__name,
.blog__item-title {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 999px) {
  /* One clean flow on tablet/mobile. Photo is always first in HE/RU/EN. */
  .pdp,
  .pdp.accessories {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1rem 2.2rem;
  }

  .pdp > .gal {
    order: 1;
  }

  .pdp > .pinfo {
    order: 2;
  }

  .pdp > .pcol {
    order: 3;
  }

  /* Main gallery gets the full content width instead of a narrow auto width. */
  .gal {
    width: 100%;
  }

  .gal__main {
    width: min(100%, 640px);
    max-width: 100%;
    max-height: none;
    margin-inline: auto;
  }

  /* Facts are no longer a loose row: they become a compact premium grid below purchase info. */
  .pcol {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding-block-start: .2rem;
  }

  .pcf {
    min-width: 0;
    min-height: 86px;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    align-items: center;
  }

  .pcf:last-of-type {
    border: 1px solid var(--border);
  }

  .pcf__icon {
    width: 34px;
    height: 34px;
  }

  .pcf__num {
    font-size: 1rem;
  }

  .pcf__label {
    line-height: 1.35;
  }

  /* Product information reads better when it starts at the logical edge. */
  .pinfo {
    width: min(100%, 680px);
    margin-inline: auto;
    gap: .85rem;
  }

  .pinfo__desc {
    max-width: none;
  }

  .pinfo__badges {
    gap: .4rem;
  }

  .pbadge {
    max-width: 100%;
  }

  .pinfo__priceline {
    row-gap: .35rem;
  }

  .buyrow,
  .buycta {
    min-width: 0;
  }

  .buycta {
    gap: .75rem;
  }

  .buycta > * {
    min-width: 0;
  }

  /* Swatches stay inside the viewport with long RU/EN names. */
  .swatch {
    min-width: 0;
    line-height: 1.25;
  }

  .swatch img {
    flex: 0 0 50px;
  }

  /* Tabs wrap instead of forcing a horizontal page overflow. */
  .ptabs {
    width: 100%;
    gap: .3rem;
  }

  .ptab {
    min-width: 0;
    text-align: center;
    line-height: 1.3;
  }

  /* Full-width sections and tables must never widen the page. */
  .cmp-wrap {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .pdp,
  .pdp.accessories {
    gap: 1rem;
    padding-block-start: .65rem;
  }

  .gal__main {
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .gal__nav {
    gap: .3rem;
    padding: 1.15rem .45rem .5rem;
  }

  .gal__thumbs {
    gap: .3rem;
    justify-content: flex-start;
    scroll-padding-inline: .2rem;
  }

  .gal__thumb {
    width: 44px;
  }

  .gal__arrow {
    width: 30px;
    height: 30px;
  }

  .pinfo {
    width: 100%;
    gap: .75rem;
  }

  .pinfo__name {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    line-height: 1.18;
  }

  .pinfo__rating {
    flex-wrap: wrap;
    row-gap: .25rem;
  }

  .pinfo__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pbadge {
    width: 100%;
    padding: .55rem .65rem;
    line-height: 1.25;
  }

  .pbadge svg {
    width: 18px;
    height: 18px;
  }

  .pinfo__priceline {
    align-items: center;
  }

  .pinfo__price {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  .packs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack {
    min-width: 0;
  }

  .opt {
    min-width: 0;
    line-height: 1.3;
  }

  .opt__price {
    white-space: nowrap;
  }

  .shipinfo__row {
    align-items: flex-start;
    line-height: 1.45;
  }

  /* Facts: two balanced cards per row on phones. */
  .pcol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .pcf {
    min-height: 80px;
    gap: .6rem;
    padding: .7rem;
  }

  /* Flavor buttons become a real responsive grid. */
  .swatches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }

  .swatch {
    width: 100%;
    padding: .15rem;
    padding-inline-end: .5rem;
  }

  .swatch img {
    width: 44px;
    height: 42px;
    flex-basis: 44px;
  }

  .swatches-toggle {
    margin-block-start: .7rem;
  }

  /* Tabs: two columns, no horizontal scrolling. */
  .ptabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block-end: 0;
  }

  .ptab {
    width: 100%;
    margin: 0;
    padding: .7rem .55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .ptab[aria-selected="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  }

  .ptabpanel {
    max-width: none;
    padding-block: 1.15rem;
  }

  .mixes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }

  .mix {
    min-width: 0;
    padding: 1rem .45rem .85rem;
    gap: .55rem;
  }

  .mix__icon {
    width: 50px;
    height: 50px;
  }

  .mix__label {
    line-height: 1.3;
  }

  .psteps {
    gap: .6rem;
  }

  .pstep {
    min-width: 0;
    padding: .9rem;
    align-items: flex-start;
  }

  .taste--wide {
    max-width: none;
    padding: 1rem;
  }

  .taste__row {
    grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
    gap: .6rem;
  }

  .fbt__items {
    flex-basis: 100%;
  }

  .blog__item {
    min-width: 0;
  }
}

@media (max-width: 479px) {
  /* Very small phones: keep controls readable rather than cramped. */
  .pinfo__badges,
  .packs,
  .swatches,
  .ptabs {
    grid-template-columns: 1fr;
  }

  .buyrow {
    flex-direction: column;
    gap: .5rem;
  }

  .qty {
    width: 100%;
    justify-content: space-between;
  }

  .qty button {
    flex: 0 0 46px;
  }

  .qty input,
  .qty output {
    flex: 1 1 auto;
  }

  .buycta {
    width: 100%;
    min-height: 48px;
  }

  .pcol {
    grid-template-columns: 1fr;
  }

  .pcf {
    min-height: 0;
  }

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

  .taste__row {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .taste__label {
    text-align: start;
  }

  .recipes {
    grid-template-columns: 1fr;
  }

  .blog__item {
    align-items: flex-start;
  }

  .blog__item img {
    width: 78px;
    height: 78px;
  }
}


/* =========================================================
   MOBILE — badges / swatches по содержимому
   ========================================================= */

@media (max-width: 767px) {

    /* Бейджи */
    .pinfo__badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
    }

    .pbadge {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }


    /* Другие вкусы */
    .swatches {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .45rem;
    }

    .swatch {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

}


/* =========================================================
   INSTICK — PRODUCT / нет в наличии
   ========================================================= */

.product-unavailable {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    padding: 15px 17px;

    border: 1px solid rgba(170, 60, 55, .18);
    border-radius: var(--radius);

    background: rgba(170, 60, 55, .055);
}

.product-unavailable__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(170, 60, 55, .09);
    color: #a53f3a;
}

.product-unavailable__icon svg {
    width: 21px;
    height: 21px;
}

.product-unavailable__content {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;
}

.product-unavailable__content strong {
    color: #702f2c;

    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.3;
}

.product-unavailable__content small {
    color: var(--ink-soft);

    font-size: .8rem;
    font-weight: 400;
    line-height: 1.4;
}


/* ---------- Dark mode ---------- */

:root[data-theme="dark"] .product-unavailable {
    border-color: rgba(220, 110, 105, .22);
    background: rgba(220, 110, 105, .08);
}

:root[data-theme="dark"] .product-unavailable__content strong {
    color: #e3a09c;
}


/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .product-unavailable {
        padding: 13px 14px;
        gap: 11px;
    }

    .product-unavailable__icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .product-unavailable__icon svg {
        width: 19px;
        height: 19px;
    }
}

.product__stock {
    display: flex;
    align-items: center;
    gap: 7px;

    width: 100%;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 9px 12px;

    border: 1px solid rgba(170, 60, 55, .18);
    border-radius: var(--radius, 5px);

    background: rgba(170, 60, 55, .055);
    color: #8f3d38;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;

    box-sizing: border-box;
}

.product__stock-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;
    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: rgba(170, 60, 55, .1);
    color: #a53f3a;
}

.product__stock-icon svg {
    width: 13px;
    height: 13px;
}

.product__stock-text {
    min-width: 0;
}

@media (max-width: 760px) {

    .product__stock {
        gap: 5px;
        margin-bottom: 8px;
        padding: 7px 8px;
        font-size: 11px;
    }

    .product__stock-icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
    }

    .product__stock-icon svg {
        width: 12px;
        height: 12px;
    }
}

/* =========================================================
   HOWTO — autoplay videos
   HTML менять не нужно
   ========================================================= */

.howto__media {
    position: relative;
    overflow: hidden;
}

.howto__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease;
}

.howto__media .howto__video {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.howto__media.is-video-ready .howto__video {
    opacity: 1;
}

.howto__media.is-video-ready > img {
    opacity: 0;
}

/* Play-иконка в HTML может остаться — визуально она скрыта. */
.howto__media .howto__play {
    display: none !important;
}