/* Карточка товара: слева галерея, справа блок покупки. */

.prod-page { padding-top: 24px; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--hl); }

.prod-top { display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px; align-items: start; }

.prod-shot {
  border-radius: var(--r-xl); background: var(--tile); aspect-ratio: 1;
  display: grid; place-items: center; overflow: hidden;
}
.prod-shot img {
  width: 100%; height: 100%; object-fit: contain; padding: 7%;
  animation: shotIn .3s ease;
}
@keyframes shotIn { from { opacity: .4; } to { opacity: 1; } }
.prod-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb {
  width: 68px; height: 68px; border-radius: var(--r-md); background: var(--tile);
  overflow: hidden; border: 1.5px solid transparent; padding: 4px;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.is-on { border-color: var(--ink); }

.prod-buy { position: sticky; top: calc(var(--head-h) + 20px); }
.prod-buy h1 { font-size: clamp(26px, 3.2vw, 36px); }
.prod-sub { margin-top: 8px; font-size: 15px; }

.prod-price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 8px; flex-wrap: wrap; }
.price-now { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.price-note { color: var(--muted); }

.prod-opt { margin-top: 22px; }
.opt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.opt-head h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
}
.opt-val { font-size: 13.5px; font-weight: 600; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-colors { gap: 10px; }
.opt-color {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: inset 0 0 0 2px #fff; transition: box-shadow .15s, transform .15s;
}
.opt-color:hover { transform: scale(1.07); }
.opt-color.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); }
.opt-color.is-out { opacity: .45; }
.opt-color.is-out::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
}

.prod-stock { margin-top: 20px; font-size: 14.5px; }
.prod-actions { display: flex; gap: 10px; margin-top: 18px; }
.prod-actions .btn-wide { flex: 1; }
#prodSku { margin-top: 10px; }

.prod-perks {
  list-style: none; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; gap: 14px;
}
.prod-perks b { display: block; font-size: 14.5px; }
.prod-perks span { font-size: 13px; color: var(--muted); }

.prod-info {
  margin-top: 64px; display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px;
  align-items: start;
}
.prod-desc { font-size: 16px; line-height: 1.65; color: var(--ink); }
.prod-desc p + p { margin-top: 14px; }
.prod-desc ul { margin: 14px 0 0 18px; display: grid; gap: 8px; font-size: 15px; }
.prod-specs { background: var(--surface); border-radius: var(--r-lg); padding: 24px; }
.prod-specs h3 { font-size: 17px; margin-bottom: 14px; }
.prod-specs dl { display: grid; gap: 12px; font-size: 14px; }
.prod-specs dt { font-weight: 600; }
.prod-specs dd { color: var(--muted); margin-top: 2px; }

.prod-404 { padding: 90px 22px; text-align: center; display: grid; gap: 14px; justify-items: center; }

@media (max-width: 900px) {
  .prod-top, .prod-info { grid-template-columns: 1fr; gap: 26px; }
  .prod-buy { position: static; }
  .prod-info { margin-top: 44px; }
}