/* ==========================================================================
   INSTICK Israel — стили страницы КАТАЛОГА НАБОРОВ (sets.html)
   Линейка «INSTICK SETS»: ярче и игривее каталога товаров, но в рамках
   премиум-стиля. Подключается ПОСЛЕ instick-home.css (токены оттуда).
   ========================================================================== */

/* ---------- Hero SETS: тёмный, с градиент-свечением и parallax --------------- */
.setshero {
  position: relative; overflow: hidden;
  margin-inline: .8rem; margin-block-start: 1rem;
  border-radius: var(--radius-lg);
  background: #120D14; color: #fff;
  min-height: clamp(360px, 52vw, 560px);
  display: grid; align-items: end;
}
/* Фоновое фото + тёплое коралловое свечение поверх */
.setshero__bg { position: absolute; inset: 0; }
.setshero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.12); will-change: transform; }
.setshero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(239,91,76,.4), transparent 60%),
    linear-gradient(0deg, rgba(10,6,12,.85), rgba(10,6,12,.25) 55%, transparent);
}
.setshero__content {
  position: relative; z-index: 1;
  padding: clamp(1.6rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
}
/* Строка суб-бренда: логотип + слово SETS с широким трекингом */
.setshero__brand { display: flex; align-items: center; gap: .6rem; }
.setshero__brand img { height: 30px; border-radius: 3px; }
.setshero__brand b {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: .38em; color: #FF9082; direction: ltr;
}
.setshero__title { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem); font-weight: 600; color: #fff; }
.setshero__title em { font-style: normal; color: #FF9082; }
.setshero__sub { color: rgba(255,255,255,.8); font-weight: 300; font-size: var(--step-1); max-width: 36ch; }
/* Плавающие бейджи-чипы (игривость) */
.setshero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .4rem; }
.setshero__chip {
  padding: .45rem .95rem; border-radius: var(--radius);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); font-weight: 500; font-size: var(--step--1);
  animation: chipfloat 5s ease-in-out infinite;
}
.setshero__chip:nth-child(2) { animation-delay: .8s; }
.setshero__chip:nth-child(3) { animation-delay: 1.6s; }
@keyframes chipfloat { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .setshero__chip { animation: none; } }

/* ---------- Крупные карточки наборов ------------------------------------------ */
.bigsets { display: grid; gap: 1.4rem; grid-template-columns: 1fr; padding-block: 1rem 2rem; }
@media (min-width: 860px) { .bigsets { grid-template-columns: repeat(2, 1fr); } }
.bigset {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bigset:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* Большое фото с игривым зумом */
.bigset__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.bigset__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bigset:hover .bigset__media img { transform: scale(1.09) rotate(-1deg); }
/* Бейджи набора поверх фото */
.bigset__badges { position: absolute; z-index: 1; inset-block-start: .8rem; inset-inline-start: .8rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.bigset__badge {
  padding: .3rem .75rem; border-radius: var(--radius);
  background: rgba(255,255,255,.92); color: #161016;
  font-size: .78rem; font-weight: 600;
}
.bigset__badge--hot { background: var(--accent); color: #fff; }
.bigset__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.bigset__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #161016; }
:root[data-theme="dark"] .bigset__name { color: var(--ink); }
.bigset__desc { color: var(--ink-soft); font-weight: 300; }
/* Инфографика «что входит»: факты с разделителями + мини-чипы вкусов */
.bigset__facts { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.bigset__fact { display: flex; flex-direction: column; padding-inline-end: 1.1rem; border-inline-end: 1px solid var(--border); }
.bigset__fact:last-child { border-inline-end: 0; }
.bigset__fact b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #161016; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .bigset__fact b { color: var(--ink); }
.bigset__fact span { font-size: .76rem; color: var(--ink-soft); }
.bigset__inc { display: flex; flex-wrap: wrap; gap: .3rem; }
.bigset__chip {
  padding: .2rem .6rem; border-radius: var(--radius);
  border: 1px solid var(--border); font-size: .76rem; font-weight: 500;
}
/* Низ карточки: цена «החל מ־» + выгода + кнопки */
.bigset__foot { margin-block-start: auto; padding-block-start: .8rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.bigset__from { font-size: .8rem; color: var(--ink-soft); }
.bigset__price { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #161016; }
:root[data-theme="dark"] .bigset__price { color: var(--ink); }
.bigset__old { color: var(--ink-soft); text-decoration: line-through; }
.bigset__save {
  padding: .3rem .75rem; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .78rem; font-weight: 600;
}
/* Ряд действий: «собрать набор» — крупное главное действие, לפרטים — тихое */
.bigset__buy { display: flex; gap: .5rem; width: 100%; margin-block-start: .2rem; }
.bigset__more {    width: 100%;
    text-align: center;
    justify-content: center;
  padding: .8rem 1.1rem; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--border); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  display: inline-flex; align-items: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.bigset__more:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--cat-tea);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--cat-tea); }
/* Главная кнопка: коралловая, на всю оставшуюся ширину */
.bigset__build {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.3rem; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  box-shadow: 0 8px 20px -10px rgba(239,91,76,.55);
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bigset__build:hover { background: var(--cat-tea);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--cat-tea); transform: translateY(-2px); }
.bigset__build span { transition: transform .25s var(--ease); }
.bigset__build:hover span { transform: translateX(-4px); }

/* ---------- Конструктор «הרכב ערכה משלך» ---------------------------------------- */
.builder2 {
  border-radius: var(--radius-lg); overflow: hidden;
  background: #120D14; color: #fff; box-shadow: var(--shadow-lg);
  display: grid;
}
@media (min-width: 900px) { .builder2 { grid-template-columns: 1.15fr .85fr; } }
.builder2__body { padding: clamp(1.6rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; gap: 1rem; }
.builder2__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #fff; }
.builder2__sub { color: rgba(255,255,255,.7); font-weight: 300; }
.builder2 h6 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #FF9082;
}
/* Выбор размера набора */
.builder2__sizes { display: flex; gap: .5rem; }
.bsize {
  flex: 1; padding: .8rem; text-align: center; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.25);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.bsize:hover { background: rgba(255,255,255,.06); }
.bsize.is-active { border-color: #FF9082; background: rgba(239,91,76,.14); }
.bsize b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: #fff; }
.bsize span { font-size: .78rem; color: rgba(255,255,255,.6); }
/* Чипы вкусов (цвет категории точкой) */
.builder2__flavors { display: flex; flex-wrap: wrap; gap: .45rem; }
.bflavor {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.25); color: #fff;
  font-size: var(--step--1); font-weight: 500;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.bflavor i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); font-style: normal; }
.bflavor:hover { transform: translateY(-2px); }
.bflavor.is-on { border-color: #FF9082; background: rgba(239,91,76,.16); }
.bflavor.is-on::after { content: "✓"; color: #FF9082; font-weight: 700; }
/* Панель итога: живой пересчёт */
.builder2__sum {
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: rgba(255,255,255,.05);
  border-inline-start: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: .8rem; justify-content: center;
}
.builder2__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--step--1); color: rgba(255,255,255,.7); }
.builder2__row b { color: #fff; font-variant-numeric: tabular-nums; }
.builder2__total { display: flex; align-items: baseline; gap: .7rem; padding-block-start: .5rem; border-block-start: 1px solid rgba(255,255,255,.14); }
.builder2__total-old { color: rgba(255,255,255,.5); text-decoration: line-through; }
.builder2__total-now { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #FF9082; }
.builder2__savebadge {
  align-self: flex-start;
  padding: .3rem .8rem; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600;
}
.builder2__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95em 1.6em; border-radius: var(--radius);
  background: #157A44; color: #fff;
  font-family: var(--font-display); font-weight: 600;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.builder2__cta:hover { background: #0F6236; transform: translateY(-2px); }
.builder2__cta.is-added { background: #0C5C33; }
.builder2__hint { font-size: .78rem; color: rgba(255,255,255,.5); }

/* ---------- «ערכות מתנה» — нарядная подарочная секция ---------------------------- */
.gifts {
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--is-cream), #FBE3DC);
  border: 1px solid var(--border);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
:root[data-theme="dark"] .gifts { background: var(--surface); }
.gifts__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.3rem; }
.gifts__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #161016; }
:root[data-theme="dark"] .gifts__title { color: var(--ink); }
.gifts__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .gifts__grid { grid-template-columns: repeat(3, 1fr); } }
/* Подарочная карточка: пунктирная «лента» по периметру */
.gift {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: .8rem; border-radius: var(--radius-lg);
  background: var(--surface);
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -8px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gift:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: var(--shadow); }
.gift__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.gift__media img { width: 100%; height: 100%; object-fit: cover; }
.gift__ribbon {
  position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem;
  padding: .25rem .65rem; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .76rem; font-weight: 600;
}
.gift__name { font-family: var(--font-display); font-weight: 600; color: #161016; padding-inline: .3rem; }
:root[data-theme="dark"] .gift__name { color: var(--ink); }
.gift__meta { display: flex; justify-content: space-between; align-items: center; padding-inline: .3rem .3rem; padding-block-end: .3rem; }
.gift__price { font-family: var(--font-display); font-weight: 600; color: #161016; }
:root[data-theme="dark"] .gift__price { color: var(--ink); }
.gift__meta small { color: var(--ink-soft); }

/* ---------- Сравнение наборов ------------------------------------------------------ */
.setcmp-wrap { overflow-x: auto; }
.setcmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; }
.setcmp th, .setcmp td { padding: .9rem 1rem; text-align: start; border-block-end: 1px solid var(--border); vertical-align: top; }
.setcmp thead th {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase;
}
.setcmp__name { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: #161016; white-space: nowrap; }
:root[data-theme="dark"] .setcmp__name { color: var(--ink); }
.setcmp__name img { width: 44px; height: 54px; object-fit: cover; border-radius: var(--radius); }
.setcmp td { font-size: var(--step--1); color: #4A4048; }
:root[data-theme="dark"] .setcmp td { color: var(--ink-soft); }
.setcmp__price { font-family: var(--font-display); font-weight: 600; color: #161016 !important; white-space: nowrap; }
:root[data-theme="dark"] .setcmp__price { color: var(--ink) !important; }
.setcmp__for { color: color-mix(in srgb, var(--cat-natural) 80%, var(--ink)) !important; font-weight: 500; }

/* ---------- Промо-полоса «−10%» (в духе каталога) ------------------------------------ */
.setspromo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent), #D8402F);
  color: #fff; box-shadow: var(--shadow);
}
.setspromo b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.setspromo__code {
  padding: .55rem 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.16); border: 1.5px dashed rgba(255,255,255,.6);
  font-family: var(--font-display); font-weight: 600; letter-spacing: .1em; direction: ltr;
}

/* Секции страницы наборов — компактный ритм */
.ssection { padding-block: clamp(2.2rem, 4vw, 3.6rem); }
.ssection__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: #161016; margin-block-end: 1.3rem; }
:root[data-theme="dark"] .ssection__title { color: var(--ink); }

/* ==========================================================================
   v2 · Адаптив страницы наборов (планшет / мобила)
   ========================================================================== */
/* Планшет и меньше: конструктор в одну колонку, разделитель — сверху */
@media (max-width: 899px) {
  .builder2__sum {
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255,255,255,.12);
  }
  .builder2__cta { width: 100%; }
}

/* Мобила: читаемые размеры, кнопки на всю ширину, компактная инфографика */
@media (max-width: 640px) {
  .setshero { min-height: 340px; }
  .setshero__chips { gap: .4rem; }
  .setshero__chip { font-size: .76rem; padding: .35rem .75rem; }
  /* Инфографика фактов — плотнее */
  .bigset__facts { gap: .8rem; }
  .bigset__fact { padding-inline-end: .8rem; }
  .bigset__fact b { font-size: 1.05rem; }
  /* Действия карточки — колонкой, обе кнопки во всю ширину */
  .bigset__buy { flex-direction: column; }
  .bigset__more { justify-content: center; }
  /* Размеры набора в конструкторе — колонкой */
  .builder2__sizes { flex-direction: column; }
  .setspromo { text-align: center; justify-content: center; }
}

/* Таблица сравнения: на мобиле превращается в стопку карточек
   (данные строк дублируются подписями через data-label) */
@media (max-width: 700px) {
  .setcmp { min-width: 0; }
  .setcmp thead { display: none; }                   /* шапка не нужна — есть подписи */
  .setcmp, .setcmp tbody, .setcmp tr, .setcmp td { display: block; width: 100%; }
  .setcmp tr {
    margin-block-end: .9rem; padding: .9rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-soft);
  }
  .setcmp td { border: 0; padding: .3rem 0; }
  /* Подпись поля слева (в RTL — справа), значение напротив */
  .setcmp td[data-label] {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  }
  .setcmp td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-soft); font-size: .78rem; font-weight: 500; flex: 0 0 auto;
  }
}


.vegan-icon {
position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: block;
    width: 36px;
    height: 36px;
    background: #fff url(/assets/img/vegan-icon.png) center / 36px 36px no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

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

.bigset__stock {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;

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

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

    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
}

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

    flex: 0 0 24px;
    width: 24px;
    height: 24px;

    border-radius: 50%;

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

.bigset__stock-icon svg {
    width: 14px;
    height: 14px;
}

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


/* Кнопка "Подробнее" у отсутствующего товара */

.bigset__more--unavailable {
    width: 100%;
}


/* Dark */

:root[data-theme="dark"] .bigset__stock {
    border-color: rgba(225, 125, 120, .22);
    background: rgba(225, 125, 120, .08);
    color: #e3a09c;
}

:root[data-theme="dark"] .bigset__stock-icon {
    background: rgba(225, 125, 120, .12);
    color: #e3a09c;
}


/* Mobile */

@media (max-width: 640px) {

    .bigset__stock {
        gap: 6px;
        padding: 9px 10px;
        font-size: .76rem;
    }

    .bigset__stock-icon {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }

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