/* =========================================================
ДОЛЬЧЕ ВИТА · ST340 · VISUAL ONLY FINAL
ТОЛЬКО ВИЗУАЛЬНЫЙ ДИЗАЙН ВЕРХНЕЙ КАРТОЧКИ + ДОСТАВКА

НЕ МЕНЯЕТ:
— Tabs / Accordion
— «Вам может понравиться»
— корзину
— Product Variants
— ссылки
— структуру ST340
— рекомендации
— количество товаров
— логику цены

Вставлять:
Tilda → Настройки сайта → Пользовательские CSS-стили

ВАЖНО:
удалить предыдущие V1–V14 стили карточки товара.
Оставить только этот код.
========================================================= */

:root{
  --dv-green:#073a30;
  --dv-green-hover:#0a4a3e;
  --dv-white:#ffffff;
  --dv-milk:#f3eee5;
  --dv-cream:#fbf8f2;
  --dv-muted:rgba(7,58,48,.60);
  --dv-line:rgba(7,58,48,.13);
  --dv-line-strong:rgba(7,58,48,.28);
  --dv-shadow:0 20px 60px rgba(7,58,48,.08);
  --dv-font:Gilroy,"Avenir Next",Arial,Helvetica,sans-serif;
}

/* =========================================================
   1. ФОН DETAIL-СТРАНИЦЫ
   ========================================================= */

html body .t-store__product-snippet{
  background:var(--dv-white)!important;
  color:var(--dv-green)!important;
  font-family:var(--dv-font)!important;
}

/* =========================================================
   2. ОСНОВНАЯ ШИРИНА
   НЕ МЕНЯЕМ ТИП СЕТКИ TILDA — только делаем композицию
   более собранной и премиальной.
   ========================================================= */

html body .t-store__product-snippet > .t-container{
  width:min(calc(100vw - 64px),1180px)!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   3. ФОТО
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__slider{
  overflow:hidden!important;

  border-radius:22px!important;

  background:var(--dv-milk)!important;

  box-shadow:var(--dv-shadow)!important;
}

html body .t-store__product-snippet .t-store__prod-popup__slider img,
html body .t-store__product-snippet .t-store__prod-popup__slider .t-img,
html body .t-store__product-snippet .t-store__prod-popup__slider .t-bgimg,
html body .t-store__product-snippet .t-store__prod-popup__slider .t-slds__img{
  object-fit:contain!important;
  object-position:center!important;
}

/* =========================================================
   4. ПРАВАЯ ИНФОРМАЦИОННАЯ КОЛОНКА
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__info{
  padding-top:8px!important;

  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
}

/* =========================================================
   5. НАЗВАНИЕ
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__name,
html body .t-store__product-snippet .js-store-prod-name,
html body .t-store__product-snippet .js-product-name{
  margin:0!important;

  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-size:clamp(28px,2.35vw,38px)!important;
  font-weight:600!important;
  line-height:1.04!important;

  letter-spacing:-.035em!important;
}

/* =========================================================
   6. ЦЕНА
   ========================================================= */

html body .t-store__product-snippet .js-store-price-wrapper,
html body .t-store__product-snippet .t-store__prod-popup__price-wrapper{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;

  gap:7px!important;

  width:100%!important;

  margin-top:18px!important;

  font-family:var(--dv-font)!important;
}

/* Все реальные элементы цены остаются первыми */
html body .t-store__product-snippet .js-store-price-wrapper > *,
html body .t-store__product-snippet .t-store__prod-popup__price-wrapper > *{
  order:1;
}

html body .t-store__product-snippet .t-store__prod-popup__price,
html body .t-store__product-snippet .t-store__prod-popup__price-value,
html body .t-store__product-snippet .js-product-price,
html body .t-store__product-snippet .js-store-prod-price-val{
  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-size:28px!important;
  font-weight:700!important;
  line-height:1!important;

  letter-spacing:-.025em!important;
}

/* =========================================================
   7. БАННЕР ДОСТАВКИ
   ТОЛЬКО ИНФОРМАЦИЯ.
   Логику расчёта доставки продолжает выполнять корзина Tilda.
   ========================================================= */

/* Верх баннера */
html body .t-store__product-snippet .js-store-price-wrapper::before,
html body .t-store__product-snippet .t-store__prod-popup__price-wrapper::before{
  content:"БЕСПЛАТНАЯ ДОСТАВКА";

  order:20!important;

  display:block!important;
  flex:0 0 100%!important;

  width:100%!important;

  margin-top:18px!important;
  padding:12px 15px 10px!important;

  border-radius:14px 14px 0 0!important;

  background:var(--dv-green)!important;
  color:var(--dv-white)!important;

  font-family:var(--dv-font)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.2!important;

  letter-spacing:.14em!important;
  text-transform:uppercase!important;

  box-sizing:border-box!important;
}

/* Условия */
html body .t-store__product-snippet .js-store-price-wrapper::after,
html body .t-store__product-snippet .t-store__prod-popup__price-wrapper::after{
  content:"Центральный — от 5 000 ₽\A Хостинский и Дагомыс — от 10 000 ₽\A Адлер и Лоо — от 15 000 ₽\A Красная Поляна — от 25 000 ₽\A\A Заказы на доставку: 08:00–23:00 · доставляем круглосуточно по заранее согласованному времени";

  order:21!important;

  display:block!important;
  flex:0 0 100%!important;

  width:100%!important;

  padding:12px 15px 14px!important;

  border:1px solid rgba(7,58,48,.10)!important;
  border-top:0!important;
  border-radius:0 0 14px 14px!important;

  background:var(--dv-milk)!important;
  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.48!important;

  white-space:pre-line!important;

  box-sizing:border-box!important;
}

/* =========================================================
   8. НАЗВАНИЕ ПАРАМЕТРА
   ========================================================= */

html body .t-store__product-snippet .t-product__option-title,
html body .t-store__product-snippet .js-product-option-name,
html body .t-store__product-snippet .js-product-edition-option-name{
  margin-bottom:9px!important;

  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* =========================================================
   9. УЖЕ СУЩЕСТВУЮЩИЕ NATIVE BUTTONS TILDA
   НИЧЕГО НЕ СОЗДАЁМ — только внешний вид.
   ========================================================= */

html body .t-store__product-snippet .t-product__option-item_buttons,
html body .t-store__product-snippet .t-product__option-variants_buttons .t-product__option-item{
  min-height:44px!important;

  padding:0 13px!important;

  border:1px solid var(--dv-line)!important;
  border-radius:10px!important;

  background:var(--dv-white)!important;
  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-size:10px!important;
  font-weight:600!important;

  box-shadow:none!important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease!important;
}

html body .t-store__product-snippet .t-product__option-item_active,
html body .t-store__product-snippet .t-product__option-item.t-active{
  border-color:var(--dv-green)!important;

  background:var(--dv-green)!important;
  color:var(--dv-white)!important;
}

/* =========================================================
   10. РОЗОВУЮ ССЫЛКУ / ХАРАКТЕРИСТИКУ
   ПРИВОДИМ К ФИРМЕННОМУ ЗЕЛЁНОМУ.
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__info a:not(.t-btn){
  color:var(--dv-green)!important;

  font-family:var(--dv-font)!important;
  font-weight:600!important;

  text-decoration:none!important;
}

/* =========================================================
   11. КНОПКА «ОФОРМИТЬ ЗАКАЗ»
   ФУНКЦИОНАЛ НЕ МЕНЯЕМ.
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__btn,
html body .t-store__product-snippet .js-store-prod-popup-buy-btn{
  min-width:210px!important;
  min-height:62px!important;

  padding:0 28px!important;

  border:1px solid var(--dv-green)!important;
  border-radius:13px!important;

  background:var(--dv-green)!important;
  color:var(--dv-white)!important;

  box-shadow:none!important;

  font-family:var(--dv-font)!important;
  font-size:14px!important;
  font-weight:700!important;

  text-transform:none!important;

  transition:
    background-color .18s ease,
    transform .18s ease!important;
}

@media(hover:hover) and (pointer:fine){
  html body .t-store__product-snippet .t-store__prod-popup__btn:hover,
  html body .t-store__product-snippet .js-store-prod-popup-buy-btn:hover{
    background:var(--dv-green-hover)!important;
    transform:translateY(-1px)!important;
  }
}

/* =========================================================
   12. ОПИСАНИЕ
   ========================================================= */

html body .t-store__product-snippet .t-store__prod-popup__descr,
html body .t-store__product-snippet .js-store-prod-descr{
  margin-top:20px!important;

  color:var(--dv-muted)!important;

  font-family:var(--dv-font)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.58!important;
}

/* =========================================================
   13. НАМЕРЕННО НЕ ТРОГАЕМ
   ========================================================= */

/*
НЕ СТИЛИЗУЕМ:
.t-store__tabs
.t-store__relevants__container
.t-store__relevants-grid-cont
.t-store__card
.t-store__card__*
.t-slds inside See also

Они остаются полностью штатными ST340.
*/

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px) and (min-width:769px){

  html body .t-store__product-snippet > .t-container{
    width:calc(100vw - 40px)!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__name,
  html body .t-store__product-snippet .js-store-prod-name{
    font-size:30px!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__btn,
  html body .t-store__product-snippet .js-store-prod-popup-buy-btn{
    min-height:58px!important;
  }
}

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

@media(max-width:768px){

  html body .t-store__product-snippet > .t-container{
    width:100%!important;
    max-width:none!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__slider{
    width:calc(100% - 24px)!important;

    margin-left:12px!important;
    margin-right:12px!important;

    border-radius:18px!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__info{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__name,
  html body .t-store__product-snippet .js-store-prod-name{
    font-size:29px!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__price,
  html body .t-store__product-snippet .js-product-price{
    font-size:26px!important;
  }

  html body .t-store__product-snippet .t-store__prod-popup__btn,
  html body .t-store__product-snippet .js-store-prod-popup-buy-btn{
    width:100%!important;

    min-height:64px!important;

    border-radius:13px!important;

    font-size:14px!important;
  }

  html body .t-store__product-snippet .js-store-price-wrapper::before,
  html body .t-store__product-snippet .t-store__prod-popup__price-wrapper::before{
    padding:11px 13px 9px!important;
  }

  html body .t-store__product-snippet .js-store-price-wrapper::after,
  html body .t-store__product-snippet .t-store__prod-popup__price-wrapper::after{
    padding:11px 13px 13px!important;

    font-size:9px!important;
  }
}