/* ============================================================
   ART-GSM 2026 — PRODUCT CARD
   ============================================================ */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: var(--s-16) 0; font-size: 13px; color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--ink-2); }

.pdp { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: var(--s-40); align-items: start; }

/* Gallery */
.gallery { position: sticky; top: 92px; }
.gallery-main { position: relative; aspect-ratio: 1/1; background: var(--photo-bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-main img { position: absolute; inset: var(--s-32); width: calc(100% - 64px); height: calc(100% - 64px); object-fit: contain; mix-blend-mode: multiply; cursor: zoom-in; }
.gallery-main .g-tags { z-index: 2; }
.gallery-main .g-zoom { z-index: 2; }
.gallery-main .g-tags { position: absolute; top: var(--s-16); left: var(--s-16); display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-main .g-zoom { position: absolute; bottom: var(--s-16); right: var(--s-16); width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--ink-2); cursor: zoom-in; border: none; transition: color .15s, box-shadow .15s; }
.gallery-main .g-zoom:hover { color: var(--accent); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.gallery-main .g-zoom svg { width: 19px; height: 19px; }
.gallery-thumbs { display: flex; gap: var(--s-10); margin-top: var(--s-12); }
.gallery-thumbs .th { width: 76px; height: 76px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--photo-bg); padding: 8px; cursor: pointer; transition: border-color .15s; flex: none; }
.gallery-thumbs .th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-thumbs .th.active { border-color: var(--accent); }

/* Info column */
.pinfo > * + * { margin-top: var(--s-16); }
.pinfo .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pinfo h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pinfo .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16); font-size: 13px; color: var(--ink-3); }
.pinfo .meta .sku { font-family: var(--mono); }
.pinfo .specs { display: flex; flex-wrap: wrap; gap: 7px; }
.pinfo .compat { font-size: 14px; color: var(--ink-2); }
.pinfo .compat b { color: var(--ink); font-weight: 700; }
.pinfo .compat a { color: var(--accent); font-weight: 600; }

/* Quality variants */
.qvariants { display: grid; gap: var(--s-8); }
.qvariants .qv-h { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.qvariants .qv { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-14); border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface); }
.qvariants .qv:hover { border-color: var(--accent); }
.qvariants .qv.sel { border-color: var(--accent); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.qvariants .qv .qv-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; position: relative; transition: border-color .15s; }
.qvariants .qv.sel .qv-radio { border-color: var(--accent); }
.qvariants .qv.sel .qv-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.qvariants .qv .qv-name { font-weight: 700; font-size: 14px; }
.qvariants .qv .qv-note { font-size: 12px; color: var(--ink-3); }
.qvariants .qv .qv-price { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 15px; white-space: nowrap; flex: none; }
.qvariants .qv > div:not(.qv-price) { min-width: 0; }

/* Buy box */
.buybox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s-20); }
.buybox .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); }
.buybox .price-block { padding: var(--s-12) var(--s-14); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.buybox .price-block.is-primary { border-color: var(--accent); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.buybox .price-label { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.buybox .price-block.is-primary .price-label { color: var(--accent); }
.buybox .price-retail-val { font-family: var(--mono); font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--ink); }
.buybox .price-retail-val .cur { font-size: 16px; color: var(--ink-2); }
.buybox .price-now { font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink-2); }
.buybox .price-now .cur { font-size: 15px; color: var(--ink-3); }
.buybox .price-note { font-size: 11px; color: var(--ink-3); }
.buybox .price-grid--request { grid-template-columns: 1fr; }
.buybox .price-request-val { font-family: var(--mono); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.qvariants .qv-price-req { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.buybox .av-line { margin: var(--s-14) 0; display: flex; align-items: center; gap: var(--s-12); }
.buybox .av-line .stock { font-size: 13px; color: var(--ink-2); }
.buybox .av-line .stock b { font-family: var(--mono); color: var(--ink); }
.buybox .buy-actions { display: flex; gap: var(--s-10); margin-top: var(--s-14); }
.buybox .buy-actions .btn { flex: 1; }
.buybox .find-cheaper { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-12); font-size: 13px; color: var(--accent); font-weight: 600; }
.buybox .find-cheaper svg { width: 15px; height: 15px; }

/* Delivery + warranty block */
.dwgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); margin-top: var(--s-14); }
.dw { display: flex; gap: 10px; padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.dw .dwi { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); display: grid; place-items: center; color: var(--accent); flex: none; box-shadow: var(--shadow-sm); }
.dw .dwi svg { width: 18px; height: 18px; }
.dw .dwt { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.dw .dwd { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Tabs / sections below */
.pdp-section { margin-top: var(--s-40); }
.pdp-section > h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--s-16); }

.spectable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.spectable .sr { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-16); padding: var(--s-14) var(--s-20); border-bottom: 1px solid var(--line); font-size: 14px; }
.spectable .sr:last-child { border-bottom: none; }
.spectable .sr:nth-child(odd) { background: var(--surface-2); }
.spectable .sr .k { color: var(--ink-3); font-weight: 600; }
.spectable .sr .v { font-weight: 600; color: var(--ink); }
.spectable .sr .v.mono { font-family: var(--mono); font-weight: 600; }

.pdesc { max-width: 72ch; }
.pdesc p { color: var(--ink-2); font-size: 15px; line-height: 1.65; margin-bottom: var(--s-12); }
.pdesc strong { color: var(--ink); }

/* Reviews */
.reviews-head { display: flex; flex-wrap: wrap; gap: var(--s-28); align-items: center; padding: var(--s-24); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--s-16); }
.reviews-score { text-align: center; flex: none; }
.reviews-score .big { font-family: var(--mono); font-weight: 700; font-size: 48px; letter-spacing: -.02em; line-height: 1; }
.reviews-score .cnt { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.reviews-bars { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.rbar { display: grid; grid-template-columns: 40px 1fr 36px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.rbar .track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rbar .fill { height: 100%; background: #f59e0b; border-radius: 4px; }
.review { padding: var(--s-16) 0; border-top: 1px solid var(--line); }
.review .rh { display: flex; align-items: center; gap: var(--s-12); margin-bottom: 8px; }
.review .av-circle { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.review .rn { font-weight: 700; font-size: 14px; }
.review .rd { font-size: 12px; color: var(--ink-3); }
.review p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* FAQ */
.faq { display: grid; gap: var(--s-10); }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-16) var(--s-20); font-weight: 700; font-size: 15px; text-align: left; }
.faq-q svg { width: 20px; height: 20px; color: var(--accent); flex: none; transition: transform .25s; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { margin: 0; padding: 0 var(--s-20) var(--s-16); color: var(--ink-2); font-size: 14px; line-height: 1.6; } /* ag hba-08: убираем унаследованный margin-bottom p (Aspro) → нет пустоты под ответом */

/* Sticky mobile CTA */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta {
    display: flex; position: fixed; bottom: calc(60px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 55;
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-float);
    padding: var(--s-12) var(--s-16); align-items: center; gap: var(--s-12);
  }
  .sticky-cta .sp { flex: none; }
  .sticky-cta .sp .sc-main { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--ink); }
  .sticky-cta .sp .sc-main .sc-cur { font-size: 14px; color: var(--ink-2); }
  .sticky-cta .sp .sc-sub { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; }
  .sticky-cta .btn { flex: 1; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1023px) {
  .pdp { grid-template-columns: 1fr; gap: var(--s-24); }
  .gallery { position: static; }
}
@media (max-width: 768px) {
  .spectable .sr { grid-template-columns: 1fr; gap: 2px; padding: var(--s-12) var(--s-16); }
  .dwgrid { grid-template-columns: 1fr; }
  .gallery-main img { inset: var(--s-20); width: calc(100% - 40px); height: calc(100% - 40px); }
  .pdp-section { margin-top: var(--s-28); }
}

/* ============ GALLERY LIGHTBOX (полноэкранный просмотр фото) ============ */
.ag-lb { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 48px; background: rgba(15,18,28,.88); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ag-lb-in .15s ease; cursor: zoom-out; }
@keyframes ag-lb-in { from { opacity: 0; } to { opacity: 1; } }
.ag-lb-img { max-width: min(92vw, 920px); max-height: 88vh; object-fit: contain; background: #fff; border-radius: var(--r-md); box-shadow: 0 24px 70px rgba(0,0,0,.55); cursor: default; user-select: none; }
.ag-lb-close, .ag-lb-prev, .ag-lb-next { position: absolute; border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 50%; line-height: 1; transition: background .15s; }
.ag-lb-close:hover, .ag-lb-prev:hover, .ag-lb-next:hover { background: rgba(255,255,255,.30); }
.ag-lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 30px; }
.ag-lb-prev, .ag-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; padding-bottom: 4px; }
.ag-lb-prev { left: 24px; }
.ag-lb-next { right: 24px; }
@media (max-width: 640px) {
  .ag-lb { padding: 16px; }
  .ag-lb-prev, .ag-lb-next { width: 40px; height: 40px; font-size: 26px; }
  .ag-lb-prev { left: 8px; }
  .ag-lb-next { right: 8px; }
  .ag-lb-close { top: 10px; right: 10px; }
}