/* === Glassy popup для карточки товара в Tilda === */
/* Базовые цвета проекта */
:root{
  --bg:#3b4d3f;         /* тёмный зелёный фон */
  /*  --accent:#1b3430;    глубокий зелёный */
  --ink:#e9f4ee;        /* основной текст на тёмном */
  --muted:#c9ddd4;      /* вторичный текст */
  --glass:rgba(255,255,255,.06);
  --glass-stroke:rgba(255,255,255,.16);
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

/* Фон попапа с мягким градиентом и подсветкой */
.t-popup__container{
  background:
    radial-gradient(800px 500px at 85% -10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, var(--bg) 0%, var(--accent) 100%) !important;
  color:var(--ink);
}

/* Колонки карточки — стеклянные карточки */
.t-popup__container .t-store__prod-popup__col-right{
  background:var(--glass);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius);
  backdrop-filter:saturate(1.1) blur(16px);
  -webkit-backdrop-filter:saturate(1.1) blur(16px);
  box-shadow:var(--shadow);
  padding:22px;
}
.t-store__prod-popup__wrapper img { border:1px solid var(--glass-stroke);
  border-radius:var(--radius);}
/* Слайдер и изображение товара — округления и лёгкая рамка */
.t-popup__container .t-slds__container{
  background:transparent !important;
  border-radius:calc(var(--radius) - 6px);
  overflow:hidden;
  border:1px solid var(--glass-stroke);
}
.t-popup__container .t-slds__bgimg{
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35);
}

/* Заголовок и цены */
.t-popup__container .t-store__prod-popup__name{
  color:var(--ink);
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.t-popup__container .t-store__prod-popup__price-value{
  font-weight:800;
  font-size:clamp(24px, 2.2vw, 34px);
  background:linear-gradient(180deg, #f4fff8, #d3e8df);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.t-popup__container .t-store__prod-popup__price_old .t-store__prod-popup__price-value{
  -webkit-text-fill-color:initial;
  background:none;
  color:#9fb7ad !important;
  opacity:.9;
  text-decoration-thickness:2px;
}

/* Заголовки опций */
.t-popup__container .t-product__option-title{
  color:var(--muted) !important;
}

/* ⚡️ Акцент для «Дополнительные услуги» — НЕ чёрный */
.t-popup__container .js-product-multioption .js-product-option-name{
  color:#d8eee5 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--glass-stroke);
  border-radius:12px;
  padding:8px 12px;
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}

/* Радио (Продолжительность) — стеклянные пиптики */
.t-popup__container .t-product__option-item_buttons{
  gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-stroke);
  border-radius:12px;
  padding:8px 12px;
}
.t-popup__container .t-product__option-checkmark_buttons{
  width:18px;height:18px;border-radius:9px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.25);
}
.t-popup__container .t-product__option-input:checked + .t-product__option-checkmark_buttons{
  background:linear-gradient(180deg, rgba(27,52,48,.85), rgba(27,52,48,1));
  border-color:rgba(255,255,255,.8);
  box-shadow:0 0 0 3px rgba(27,52,48,.35), 0 10px 20px rgba(0,0,0,.45);
}
.t-popup__container .t-product__option-item_active .t-product__option-title_buttons,
.t-popup__container .t-product__option-input:checked ~ .t-product__option-title_buttons{
  color:var(--ink);
  font-weight:600;
}

/* Чекбоксы «Доп. услуги» — стеклянные квадратики */
.t-popup__container .t-checkbox__control{
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  transition:background .2s ease;
}
.t-popup__container .t-checkbox__control:hover{
  background:rgba(255,255,255,.04);
}
.t-popup__container .t-checkbox__indicator{
  width:18px;height:18px;border-radius:6px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.25);
}
.t-popup__container .t-checkbox:checked + .t-checkbox__indicator{
  background:linear-gradient(180deg, rgba(27,52,48,.95), rgba(27,52,48,1));
  border-color:rgba(255,255,255,.8);
  box-shadow:0 0 0 3px rgba(27,52,48,.35), 0 10px 22px rgba(0,0,0,.45);
}
.t-popup__container .t-checkbox__control span{ color:var(--ink); }

/* Текст описания */
.t-popup__container .t-store__prod-popup__text{
  color:var(--muted);
}

/* Нижняя панель с кнопкой — стеклянная и липкая */
.t-popup__container .t-store__prod-popup__btn-wrapper-fixed{
  background:transparent;
  -webkit-backdrop-filter:blur(12px);

}

/* Стрелки слайдера (если показываются) под наш стиль */
.t-popup__container .t-slds__arrow{
  background:rgba(255,255,255,.12) !important;
  border:1px solid var(--glass-stroke) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.t-popup__container .t-slds__arrow svg polyline{ stroke:#e9f4ee !important; }

/* Мелочи: скругления списков и плавность */
.t-popup__container .t-product__option-variants_buttons,
.t-popup__container .t-product__checkbox-wrap{
  border-radius:12px;
}
.t-popup__container *{ transition:color .2s ease, background-color .2s ease, box-shadow .25s ease, border-color .2s ease; }
    /* === Фикс раскладки: инфо-колонка справа на десктопе === */
@media (min-width: 980px){
  /* Делаем гибкую строку для двух колонок */
  .t-popup__container .t-store__prod-popup__container{
    display:flex;
    align-items:flex-start;
    gap:28px;          
        padding: 37px 61px;/* расстояние между колонками */
  }

  /* Обе колонки занимают по 50%, с учётом padding/border */
  .t-popup__container .t-store__prod-popup__col-left,
  .t-popup__container .t-store__prod-popup__col-right{
    box-sizing:border-box;    /* чтобы padding/бордер не ломали ширину */
    width:calc(50% - 14px);   /* половина минус половина gap */
    margin:0;
    float:none;               /* на всякий случай отключим флоаты Tilda */
  }

  /* Левый блок (фото) слева, инфо-блок — справа */
  .t-popup__container .t-store__prod-popup__col-left{ order:1; }
  .t-popup__container .t-store__prod-popup__col-right{ order:2; }
}

/* На мобилках — одна колонка */
@media (max-width: 979px){
  .t-popup__container .t-store__prod-popup__container{ display:block; }
  .t-popup__container .t-store__prod-popup__col-left,
  .t-popup__container .t-store__prod-popup__col-right{
    width:100%;
  }
}
/* === FIX: вернуть инфо-колонку справа и нормальные размеры слайдера === */

/* ДЕСКТОП: используем родную сетку Tilda (float + 50%) */
@media (min-width: 980px){
  /* контейнер снова блоковый — без flex/grid */
  .t-popup__container .t-store__prod-popup__container{
    display:block !important;
  }

  /* колонки по 50%, не вываливаются из-за padding/border */
  .t-popup__container .t-store__prod-popup__col-left,
  .t-popup__container .t-store__prod-popup__col-right{
    float:left !important;
    width:50% !important;             /* как у t-col_6 */
    box-sizing:border-box !important;  /* чтобы наши паддинги/бордеры не раздвигали ширину */
    margin:0 !important;
  }

  /* небольшой зазор между колонками через внутренний отступ */
  .t-popup__container .t-store__prod-popup__col-left{  padding-right:18px; }
  .t-popup__container .t-store__prod-popup__col-right{ padding-left:18px;  }

  /* опционально: сделать правую колонку «липкой» у верхнего края */
  /* .t-popup__container .t-store__prod-popup__col-right{ position:sticky; top:24px; } */
}

/* МОБИЛКА: одна колонка — как и было */
@media (max-width: 979px){
  .t-popup__container .t-store__prod-popup__col-left,
  .t-popup__container .t-store__prod-popup__col-right{
    float:none !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:14px !important;
  }
}

#rec1438314241 .t-popup__close {

    background: transparent;
}

/* ============= MOBILE ≤980px — стеклянная шапка + центр. логотип ============= */
@media screen and (max-width: 980px){
  /* базовые цвета */
  #rec1431960491{ --h: 96px; --glass: rgba(255,255,255,.06); --stroke: rgba(255,255,255,.16); }

  /* шапка: стекло */
  #rec1431960491 .tmenu-mobile{
    background: linear-gradient(180deg, rgba(59,77,63,.88), rgba(27,52,48,.78)) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    border-bottom: 1px solid var(--stroke) !important;
    box-shadow: 0 6px 18px -10px rgba(0,0,0,.35) !important;
  }

  /* контейнер делаем grid: [лево] [центр=логотип] [право=бургер] */
  #rec1431960491 .tmenu-mobile__container{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--h) !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  /* логотип по центру и в 3 раза больше */
  #rec1431960491 .tmenu-mobile__burgerlogo{
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important; align-items: center !important;
  }
  #rec1431960491 .tmenu-mobile__imglogo{
    min-width: 0 !important;           /* перебиваем inline min-width:150px */
    max-height: 78px !important;        /* ~3× от прежних ~26px */
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 1px rgba(255,255,255,.25)) !important;
  }

  /* бургер справа */
  #rec1431960491 .t-menuburger{
    grid-column: 3 !important;
    justify-self: end !important;
    width: 28px !important; height: 20px !important;
  }
  #rec1431960491 .t-menuburger span{
    height: 3px !important; border-radius: 2px !important;
    background-color: #fbf4da !important;
  }

  /* прячем правую колонку (телефон + кнопка) в шапке, чтобы не раздувала высоту */
  #rec1431960491 .t228__rightside{ display: none !important; }
}

/* ============= Выдвигающееся меню в том же стиле (когда открыто) ============= */
@media screen and (max-width: 980px){
  /* контейнер меню (data-menu="yes" — как в скрипте тильды) */
  #rec1431960491 [data-menu="yes"]{
    position: fixed !important;
    top: var(--h, 96px) !important; left: 0 !important; right: 0 !important;
    height: calc(100vh - var(--h, 96px)) !important;
    overflow: auto !important;
    padding: 14px 14px 22px !important;
    background:
      linear-gradient(180deg, rgba(59,77,63,.78), rgba(27,52,48,.72)) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.45) inset !important;
    z-index: 989 !important;
  }

  /* список ссылок — карточки-«чипсы» */
  #rec1431960491 .t-menu__list{
    display: grid !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
  }
  #rec1431960491 .t228__list_item{ padding: 0 !important; }

  #rec1431960491 .t-menu__link-item{
    display: block !important;
    padding: 14px 16px !important;
    background: var(--glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    color: #e9f4ee !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    transition: transform .15s ease, background .2s ease, border-color .2s ease !important;
  }
  #rec1431960491 .t-menu__link-item:hover{
    transform: translateY(-1px) !important;
    background: rgba(59,77,63,.18) !important;
    border-color: #3b4d3f !important;
  }
  #rec1431960491 .t-menu__link-item.t-active{
    border-color: #fbf4da !important;
    box-shadow: 0 10px 26px -16px rgba(0,0,0,.5) !important;
    background: linear-gradient(135deg, rgba(59,77,63,.26), rgba(27,52,48,.26)) !important;
  }

  /* предотвратить горизонтальный скролл */
  body.t-body{ overflow-x: hidden !important; }
}
