/* =====================================================================
   СУНДУК — product page styles (product.html + product-form.html)
   ===================================================================== */
.product-top {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-bottom: 18px;
}
.product-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.product-cover {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #0e0e10;
}
.product-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* thumbnail carousel under the main cover */
.thumb-strip { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.thumb {
  width: 86px; height: 86px; border-radius: 12px; overflow: hidden; padding: 0; flex-shrink: 0;
  background: #0e0e10; border: 0; cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.62); transition: filter .15s; }
.thumb:hover img { filter: grayscale(.4) brightness(.85); }
/* выбранное превью выделяется цветом (без обводки) */
.thumb.active img,
.thumb.active:hover img { filter: none; }

/* wishlist / share — top-right corner of the cover, stacked column */
.pi-actions { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.pi-icon-btn {
  width: 46px; height: 46px; border-radius: 13px; border: 0; outline: none;
  /* то же стекло, что у кнопок шапки и корзины. Прежний светлый градиент
     поверх яркой обложки давал не стекло, а цветную заливку */
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: none;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.pi-icon-btn:hover { background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10)), rgba(0,0,0,.6); }
.pi-icon-btn:focus, .pi-icon-btn:focus-visible { outline: none; }
.pi-icon-btn svg { width: 22px; height: 21px; }
/* избранное: по умолчанию только контур сердца, при активации — заливка (без смены цвета) */
#wishBtn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#wishBtn.active svg { fill: currentColor; }

.product-info { min-width: 0; }
.pi-title { font: 800 30px/1.18 'Montserrat', sans-serif; color: #fff; margin-bottom: 14px; }
.pi-price { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; }
.pi-price .now { font: 400 44px 'Anton', 'Montserrat', sans-serif; color: #fff; line-height: 1; letter-spacing: .5px; white-space: nowrap; }
.pi-price .old { font: 400 24px 'Anton', 'Montserrat', sans-serif; color: rgba(255,255,255,.4); text-decoration: line-through; letter-spacing: .5px; white-space: nowrap; }
.pi-price .disc { background: var(--danger); color: #fff; font: 700 13px 'Montserrat', sans-serif; padding: 4px 10px; border-radius: 50px; }

.opt-group { margin-bottom: 24px; }
.opt-head { display: flex; align-items: center; gap: 9px; font: 800 16px 'Montserrat', sans-serif; letter-spacing: .4px; text-transform: uppercase; color: #fff; margin-bottom: 14px; }

/* (i) tooltip — исходная плоская иконка; «жидкое стекло без обводки» на самом окне */
.info-tip { position: relative; display: inline-flex; align-items: center; }
.info-tip .ii { width: 19px; height: 19px; color: #fff; cursor: help; display: inline-flex; }
.info-tip .ii svg { width: 19px; height: 19px; }
.info-tip-pop {
  position: absolute; left: 0; bottom: 150%; transform: translateY(6px); width: 270px; max-width: 70vw;
  background: rgba(20,20,24,.6); -webkit-backdrop-filter: blur(24px) saturate(105%); backdrop-filter: blur(24px) saturate(105%);
  border: 0; border-radius: 14px; padding: 12px 14px; color: var(--text-dim);
  font: 500 13px/1.55 'Montserrat', sans-serif; text-transform: none; letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 40;
  box-shadow: none;   /* без тени и свечения — чистое «жидкое стекло» */
}
.info-tip:hover .info-tip-pop { opacity: 1; transform: translateY(0); }

/* «товар на сумму»: калькулятор «заплачу ₽ ↔ получу N единиц» */
.unit-calc .unit-row { display: flex; align-items: flex-end; gap: 14px; }
.unit-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.unit-field label { font: 600 12.5px 'Montserrat', sans-serif; text-transform: none; letter-spacing: .2px; color: var(--text-mute); }
.unit-field input, .unit-field select {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 14px 16px; color: #fff; font: 700 18px 'Montserrat', sans-serif; outline: none; transition: border-color .15s;
}
.unit-field input:focus, .unit-field select:focus { border-color: #fff; }
.unit-field select { cursor: pointer; -webkit-appearance: none; appearance: none; }
.unit-field select option { background: #1f2024; color: #fff; }
.unit-eq { align-self: flex-end; padding-bottom: 14px; color: var(--text-mute); font: 400 22px 'Anton', 'Montserrat', sans-serif; }
.unit-hint { margin-top: 10px; font: 500 12.5px 'Montserrat', sans-serif; color: var(--text-mute); text-transform: none; letter-spacing: 0; }
/* тултип с порогами цен (спрятанная табличка скидок) */
.tier-pop { width: 240px; }
.tier-pop .tier-title { font: 700 11.5px 'Montserrat', sans-serif; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.tier-pop table { width: 100%; border-collapse: collapse; }
.tier-pop td { padding: 5px 0; font: 500 13px 'Montserrat', sans-serif; color: var(--text-dim); }
.tier-pop td:last-child { text-align: right; color: #fff; font-weight: 700; white-space: nowrap; }
.tier-pop tr + tr td { border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 560px) {
  .unit-calc .unit-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .unit-eq { display: none; }
}

.opt-list { display: flex; flex-direction: column; gap: 2px; }
.opt {
  display: flex; align-items: center; gap: 12px; padding: 6px 0; border-radius: 10px;
  background: transparent; border: 0; cursor: pointer; transition: color .15s;
  font: 500 14.5px 'Montserrat', sans-serif; color: #fff;
}
.opt:hover { color: #fff; }
/* Белая рамка видна всегда и не заливается — отличие выбранного варианта
   только в залитом квадрате внутри, с зазором от рамки. Галочки нет. */
.opt .box {
  width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid #fff;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.opt input { display: none; }
.opt.sel { color: #fff; }
.opt.sel .box::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #fff; }
/* radio — та же логика, но всё круглое */
.opt-list[data-type="radio"] .box { border-radius: 50%; }
.opt-list[data-type="radio"] .opt.sel .box::after { border-radius: 50%; }
.opt .opt-price { margin-left: auto; font-family: 'Anton', 'Montserrat', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .5px; color: #fff; }

/* select-параметр */
.opt-select {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff;
  border-radius: 12px; padding: 14px 16px; font: 600 14.5px 'Montserrat', sans-serif; cursor: pointer; outline: none;
}
.opt-select:focus { border-color: #fff; }
.opt-select option { background: #1f2024; color: #fff; }
.pi-form textarea {
  width: 100%; min-height: 90px; resize: vertical; background: transparent; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 14px 18px; color: #fff; font: 500 15px 'Montserrat', sans-serif; outline: none; transition: border-color .15s;
}
.pi-form textarea:focus { border-color: #fff; }
.pi-form textarea::placeholder { color: var(--text-mute); }

/* region — transparent buttons */
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg button {
  background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--text-dim);
  border-radius: 100px; padding: 11px 22px; font: 600 14px 'Montserrat', sans-serif; cursor: pointer; transition: all .15s; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seg button:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.seg button.sel { background: #fff; color: #241815; border-color: #fff; font-weight: 700; }
.seg button.long { color: var(--text-mute); }

/* form-fill state (product-form) */
.opt-error {
  display: inline-flex; align-items: center; background: rgba(242,30,30,.14); color: #ff6b6b;
  font: 600 12px 'Montserrat', sans-serif; text-transform: none; letter-spacing: 0;
  padding: 5px 12px; border-radius: 10px; white-space: nowrap;
}
/* скрытое состояние не убираем из потока — резервируем место, чтобы при
   появлении ошибки соседние элементы не «прыгали» */
.opt-error.hide { visibility: hidden; }
.pi-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.pi-form input {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 15px 18px; color: #fff; font: 500 15px 'Montserrat', sans-serif; outline: none; transition: border-color .15s;
}
.pi-form input:focus { border-color: #fff; }
.pi-form input::placeholder { color: var(--text-mute); }

.pi-cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.btn-buy, .btn-cart {
  height: 58px; border: 0; border-radius: 100px; cursor: pointer; flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 700 16px 'Montserrat', sans-serif; transition: transform .15s, filter .15s;
}
.btn-buy { background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #17181B; }
.btn-cart { background: #fff; color: #17181B; }
.btn-buy:hover, .btn-cart:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-buy svg, .btn-cart svg { width: 22px; height: 22px; }
.btn-cart img { width: 22px; height: 22px; filter: brightness(0); }
/* подтверждение добавления — тот же зелёный градиент и галочка, что у кнопки
   на карточке товара (.hover-circle.added в shared.css) */
.btn-cart.added { background: linear-gradient(135deg, #12FF05 0%, #56D57C 100%); }
.btn-cart.added img { display: none; }
.btn-cart.added::before {
  content: ""; width: 9px; height: 16px; border: solid #17181B; border-width: 0 3px 3px 0;
  transform: translateY(-3px) rotate(45deg); flex-shrink: 0;
}
.btn-buy img { width: 22px; height: 22px; filter: brightness(0); }
/* тёмно-фиолетовый градиент английской версии требует светлой подписи;
   instabuy.svg нарисован белым — просто снимаем зачернение */
html[lang="en"] .btn-buy { color: #fff; }
html[lang="en"] .btn-buy img { filter: none; }

/* description — на всю ширину под двумя колонками */
.product-desc { margin: 0; }
/* описание: в левой колонке отступ задаёт flex-gap, на всю ширину — свой */
.product-desc-full { margin: 0; }
#descFull > .product-desc-full { margin: 28px 0 0; }
.pd-title { font: 800 18px 'Montserrat', sans-serif; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pd-body { color: #fff; font: 400 15px/1.6 'Montserrat', sans-serif; white-space: pre-line; }
.pd-body.collapsed {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-list { display: flex; flex-direction: column; gap: 14px; overflow: hidden; transition: max-height .3s ease; }
.pd-item { color: #fff; font: 400 15px/1.6 'Montserrat', sans-serif; }
.pd-item b { color: #fff; font-weight: 700; }
.pd-toggle { margin: 16px auto 0; background: #fff; border: 0; color: #17181B; border-radius: 100px; padding: 12px 24px; font: 700 14px 'Montserrat', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: filter .15s; }
.pd-toggle:hover { filter: brightness(.94); }
.pd-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.pd-toggle.open svg { transform: rotate(180deg); }

/* reviews */
.reviews { margin: 44px 0; }
.rev-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.rev-list { display: flex; flex-direction: column; gap: 24px; max-width: 860px; }
.rev { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.rev-av { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #17181B; }
.rev-av svg { width: 24px; height: 24px; }
.rev-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rev-name { font: 600 14px 'Montserrat', sans-serif; color: #fff; }
.rev-date { font: 500 13px 'Montserrat', sans-serif; color: var(--text-mute); }
.rev-dot { color: var(--text-mute); opacity: .8; }
.rev-stars { display: flex; align-items: center; gap: 3px; margin-bottom: 9px; }
/* full_star.svg / empty_star.svg — обе уже белые, перекрашивать не нужно.
   Размер задан жёстко: у пустой звезды поле 16×16 против 15×15 у заполненной
   (запас под обводку), иначе в одном ряду они были бы разной высоты. */
.rev-stars img { width: 15px; height: 15px; display: block; }
.rev-text { color: #fff; font: 400 14.5px/1.55 'Montserrat', sans-serif; }
.rev-pager { display: flex; justify-content: flex-end; gap: 1px; align-items: center; margin-top: 26px; }
.rev-pager button { min-width: 30px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text-mute); font: 600 15px 'Montserrat', sans-serif; cursor: pointer; transition: color .15s; display: inline-flex; align-items: center; justify-content: center; }
.rev-pager button svg { width: 16px; height: 16px; }
.rev-pager button.active { color: #fff; font-weight: 800; }
.rev-pager button:hover { color: #fff; }
.rev-pager button[disabled] { opacity: .35; cursor: default; }
.rev-pager button[disabled]:hover { color: var(--text-mute); }
.rev-ellipsis { min-width: 22px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-mute); font: 600 15px 'Montserrat', sans-serif; user-select: none; }

/* Широкие карточки (.sp-* / .wcard*) живут в shared.css: карусель строит
   S.renderWide() из shared.js, и её используют и главная, и эта страница.
   Здесь остаются только отступы самой секции. */
.special-pick { margin: 64px 0 0; }

@media (max-width: 820px) {
  /* отступ от шапки задают хлебные крошки над карточкой (см. shared.css) */
  .product-top { grid-template-columns: 1fr; gap: 22px; }
  .product-left { gap: 18px; }
  .pi-title { font-size: 22px; }
  .pi-price .now { font-size: 32px; }
  .pi-price .old { font-size: 18px; }
  .opt-head { font-size: 15px; flex-wrap: wrap; }
  /* кнопки покупки прижаты к нижнему меню вплотную.
     --tabbar-h — фактическая высота таббара, её замеряет shared.js */
  /* Панель тянется до самого низа экрана и своим фоном подстилает нижнее меню.
     Одна стеклянная поверхность на оба блока — стык исчезает, прозрачность живёт.
     Меню рисуется поверх (z-index 60 против .wrap с z-index 1), но уже без фона. */
  .pi-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin: 0;
    padding: 12px 12px calc(var(--tabbar-h, 74px) + 10px);
    border-radius: 30px 30px 0 0;
    background: rgba(0,0,0,.8);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  }
  /* «Купить» — на ширину трёх вкладок меню, «В корзину» — на оставшуюся одну */
  .btn-buy { flex: 3 1 0; width: auto; min-width: 0; }
  .btn-cart { flex: 1 1 0; width: auto; min-width: 0; }
  .btn-buy, .btn-cart { height: 52px; }
  /* в четверти ширины подпись не помещается — остаётся только иконка */
  .btn-cart span { display: none; }
  .btn-cart { gap: 0; }
  .info-tip-pop { width: 230px; }
  .pi-icon-btn { width: 42px; height: 42px; }
  /* на узком экране обложка ниже — столбик кнопок занимал бы её половину */
  .pi-actions { flex-direction: row; }

  .special-pick { margin-top: 44px; }
}