/* ==========================================================================
   lux-pdp-v2.css — страница товара, переработка (fix_verstka/12-tovar)
   Подключается ПОСЛЕ lux-shop.css. Переменные берутся из .lx.

   Существующие классы .lx-pdp / .lx-buy / .lx-gallery / .lx-specs / .lx-tabs
   не заменяются: часть правится точечно, остальное — новые классы .lx-pdp2.
   Откат — отключить файл (и вернуть разметку item_lx.php, но она безопасна
   и без него: .lx-pdp2-* просто останутся не стилизованы).
   ========================================================================== */

/* ---------- одна сетка вместо двух ---------- */
/* Было: сетка галереи с блоком покупки, ниже отдельная сетка вкладок с теми
   же колонками. Из-за этого правая колонка кончалась вместе с первой сеткой,
   и липкому блоку было некуда ехать. Теперь описание живёт в левой колонке
   той же сетки. */
.lx-pdp__left{min-width:0;display:flex;flex-direction:column;gap:56px}

/* Растяжка на всю высоту строки — без неё грид-элемент сжимается по
   содержимому, и sticky отлипает на четверти прокрутки. Это ровно та
   ошибка, из-за которой блок сейчас уезжает. */
.lx-pdp__right{align-self:stretch;display:flex;flex-direction:column;gap:24px}

/* ---------- липкая часть ---------- */
/* Липким остаётся только то, что должно быть перед глазами всегда:
   заголовок, цена, набор. Факты, чипы и характеристики уезжают — вместе
   они делают блок выше окна, и он начинает срезаться сверху. */
.lx-buy--stick{position:sticky;top:132px;z-index:2;background:#fff;
  padding-bottom:16px;display:flex;flex-direction:column;gap:16px}
/* Фон и z-index обязательны: без них уезжающий текст просвечивает сквозь
   заголовок и цену. */

/* Заголовок влево: он был единственным текстом по центру на странице. */
.lx-buy__title{text-align:left}

/* ---------- строка «бренд · страна · объём» ---------- */
.lx-pdp2-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px}
.lx-pdp2-meta a{font-weight:600;border-bottom:1px solid var(--line3)}
.lx-pdp2-meta span{color:var(--mute)}
.lx-pdp2-meta i{font-style:normal;color:#c4bfb9}

/* ---------- галерея ---------- */
/* Кадр 560 вместо 800: у флакона на снимке половина — белые поля.
   Миниатюры столбиком слева не добавляют высоты. DOM-порядок оставлен
   «кадр, потом миниатюры» (так проще для крестика удаления и вставки
   нового фото первым в редактуре) — слева их ставит order. */
.lx-gallery{flex-direction:row;gap:20px;align-items:flex-start}
.lx-thumbs{order:-1;flex:none;flex-direction:column;flex-wrap:nowrap;gap:10px}
.lx-thumb{width:78px;height:78px}
.lx-gallery__main{flex:1;min-width:0;max-width:560px}
/* Одна фотография — столбика нет вовсе. Ряд из одной миниатюры обещает,
   что есть ещё, и человек жмёт впустую. */
.lx-thumbs:has(.lx-thumb:only-child){display:none}

/* ---------- сумма в кнопке ---------- */
.lx-btn.addCart{display:flex;align-items:center;justify-content:center;gap:8px}
.lx-buy__go-sep{font-style:normal;opacity:.6}

/* ---------- бонус · наличие · доставка одной строкой ---------- */
.lx-buy__line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.lx-buy__line i{font-style:normal;color:#c4bfb9}

/* ---------- набор ---------- */
/* Сразу под ценой: сравнивают цифры в одну секунду, и обе должны быть
   на глазах. Одна строка с миниатюрами 42px — чтобы липкий блок не
   перерос высоту окна. */
.lx-set{display:flex;flex-direction:column;gap:12px;padding:16px;
  border:1px solid #ddd6f7;background:#f6f3ff}
.lx-set__top{display:flex;align-items:center;gap:12px}
.lx-set__ph{flex:none;display:flex;gap:5px}
.lx-set__ph span{width:42px;height:42px;background:#fff;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lx-set__ph img{width:100%;height:100%;object-fit:cover}
.lx-set__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lx-set__txt b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.lx-set__txt span{font-size:12px;color:var(--ink2)}
.lx-set__price{display:flex;align-items:baseline;gap:9px}
.lx-set__price b{font-size:19px;font-weight:700}
.lx-set__price .lx-old{font-size:12.5px}
.lx-set__save{margin-left:auto;display:flex;align-items:center;height:21px;
  padding:0 7px;background:var(--violet-fg);color:#fff;font-size:10.5px;font-weight:800}
.lx-set__compare{font-size:11.5px;color:var(--mute)}
.lx-set__go{display:flex;align-items:center;justify-content:center;height:44px;
  border:1px solid var(--violet-fg);color:var(--violet-fg);font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.lx-set__go:hover{background:var(--violet-fg);color:#fff}
/* «.lx a:hover{color:var(--violet)}» (lux-shop.css) весомее и перекрашивало
   надпись в цвет фона на наведении — тот же случай, что и с .lx-btn там же. */
.lx a.lx-set__go:hover{color:#fff}
/* Набор неразбираем — сказать об этом нужно до покупки, не в правилах
   возврата (см. отчёт применения). */
.lx-set__return{font-size:11.5px;color:var(--mute);text-align:center}
/* Набора нет — блока нет. Пустая рамка «наборов пока нет» вредит: она
   занимает лучшее место на странице и ничего не даёт. */

/* ---------- три факта ---------- */
.lx-pdp2-facts{display:flex;flex-direction:column;gap:9px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lx-pdp2-facts span{display:flex;gap:11px;font-size:13.5px;line-height:1.45}
.lx-pdp2-facts i{flex:none;width:5px;height:5px;margin-top:7px;border-radius:50%;background:#8f7ce8}

/* ---------- вопросы к консультанту ---------- */
/* Готовые вопросы вместо приглашения «спросите» — печатать не нужно,
   нажал — открылся чат с вписанным вопросом. */
.lx-pdp2-ask{display:flex;flex-direction:column;gap:9px}
.lx-pdp2-ask > b{font-size:14px;font-weight:700}
.lx-pdp2-ask__row{display:flex;flex-wrap:wrap;gap:7px}
.lx-pdp2-ask__row button{display:flex;align-items:center;min-height:34px;padding:6px 13px;
  border:1px solid #ddd6f7;border-radius:17px;background:#f6f3ff;
  font-size:12.5px;font-weight:600;color:var(--violet-fg);text-align:left}
.lx-pdp2-ask__row button:hover{background:var(--violet-bg)}
.lx-pdp2-ask em{font-style:normal;font-size:11.5px;color:var(--mute)}

/* ---------- описание ---------- */
/* Левая выключка: по формату русский текст даёт «реки» на любой ширине.
   !important — единственный способ перебить inline text-align:justify,
   который иногда приходит вставкой из Word/от поставщика прямо в тексте
   описания (это контент, а не наша вёрстка, но красить строку он не
   должен). */
.lx-prose,.lx-prose p{text-align:left!important}
.lx-pdp2-cut{display:flex;flex-direction:column;gap:26px}
/* Свёрнутое состояние: высота — примерно два абзаца. Открывается и
   закрывается кликом по .lx-pdp2-more (см. lux-shop.js). Кнопку саму
   показывает JS — только если текст реально не поместился. */
.lx-pdp2-cut{max-height:172px;overflow:hidden;position:relative}
.lx-pdp2-cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.lx-pdp2-cut.is-open{max-height:none}
.lx-pdp2-cut.is-open::after{display:none}
.lx-pdp2-more{align-self:flex-start;display:flex;align-items:center;gap:9px;
  min-height:44px;font-size:13.5px;font-weight:600;color:var(--violet)}
.lx-pdp2-more:hover{color:var(--violet-fg)}
.lx-pdp2-more i{font-style:normal;font-size:11px;transition:transform .15s ease}
.lx-pdp2-more.is-open i{transform:rotate(180deg)}

/* Характеристики не прячем: по ним сравнивают товары, и клик за ними
   стоит дороже занятого места. */
.lx-pdp2-specs{display:flex;flex-direction:column;gap:12px;padding-top:14px;
  border-top:1px solid var(--line)}
.lx-pdp2-specs > b{font-size:14px;font-weight:700}

/* Состав по веществам, если он есть структурой (см. отчёт применения —
   у этого набора товаров пока нет): «Мелатонин обладает…» — это список
   «вещество — действие», а не проза. */
.lx-pdp2-ing{display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:12px 22px;font-size:14px;line-height:1.55}
.lx-pdp2-ing dt{color:var(--ink);font-weight:600}
.lx-pdp2-ing dd{color:var(--ink2);text-wrap:pretty}

/* ---------- крошки в один регистр ---------- */
/* Было три разных регистра в одной строке: «главная» — как задано в коде,
   категория и бренд — как лежат в базе. Один регистр для всей строки. */
.lx-crumbs{text-transform:lowercase}

/* ---------- слайдер рекомендаций ---------- */
.lx-slider__head{display:flex;align-items:center;gap:16px}
.lx-slider__nav{margin-left:auto;display:flex;gap:10px}
.lx-slider__nav button{width:40px;height:40px;border:1px solid var(--line2);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px}
.lx-slider__nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.lx-slider__nav button[disabled]{opacity:.35;pointer-events:none}
.lx-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 78px) / 4);
  gap:26px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.lx-slider__track::-webkit-scrollbar{display:none}
/* Меньше карточек, чем видно за раз — трек не растягивает их: сжимает
   ширину до содержимого, лишнее пустое место справа не появляется. */
.lx-slider__track:not(.is-full){grid-auto-columns:minmax(0,280px)}

/* ---------- 1180 ---------- */
@media (max-width:1180px){
  .lx-gallery__main{max-width:none}
  .lx-thumb{width:66px;height:66px}
  .lx-slider__track{grid-auto-columns:calc((100% - 52px) / 3)}
}

/* ---------- 900: одна колонка ---------- */
@media (max-width:900px){
  /* Порядок: кадр → миниатюры → покупка → факты → консультант → вкладки.
     Обе колонки становятся display:contents — их дети превращаются в
     самостоятельные элементы той же flex-сетки .lx-pdp (см. lux-shop.css,
     оттуда же order для .lx-gallery__main/.lx-thumbs/.lx-buy/.lx-tabs/
     [data-lx-panel="pdp"]/.lx-ask-item — те правила не трогаем, тут только
     то, чего в них не было: новые блоки .lx-pdp2-*). Липкость снимается —
     на телефоне её заменяет .lc-stickybar внизу экрана. */
  .lx-pdp__left,.lx-pdp__right{display:contents}
  .lx-pdp__left{gap:32px}
  .lx-buy--stick{position:static;padding-bottom:0}
  /* order:2 повторяет lux-shop.css: там задан порядок для мобильного показа
     (кадр, потом миниатюры), а order:-1 у нас в базовых стилях (без медиа-
     запроса, для стола) без этой строки перебил бы его на любой ширине. */
  .lx-thumbs{order:2;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .lx-thumbs::-webkit-scrollbar{display:none}
  .lx-pdp2-facts{order:4}
  .lx-pdp2-ask{order:5}
  .lx-tabs{order:6}
  .lx-pdp [data-lx-panel="pdp"]{order:7}
  .lx-pdp2-ing{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .lx-pdp2-ing dt{margin-top:10px}
  .lx-slider__track{grid-auto-columns:calc((100% - 26px) / 2)}
}

/* ---------- 600: телефон ---------- */
@media (max-width:600px){
  /* Серый бокс убран: 48px внутренних отступов в дефиците высоты, и он
     отделяет цену от названия, хотя это одна мысль. */
  .lx-buy__box{padding:0;background:none}
  .lx-set{padding:14px}
  .lx-slider__track{grid-auto-columns:calc((100% - 14px) / 2);gap:14px}
  .lx-slider__nav{display:none}
}