/* product.css — карточка товара по скелету S01 R01 (sketch 3.B1–B8): thumbs 76 · photo · gap 78 · buy column 460 (× --px). */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) calc(460 * var(--px)); gap: calc(78 * var(--px)); padding-top: calc(26 * var(--px)); align-items: start; }
.pd__gal { display: grid; grid-template-columns: calc(76 * var(--px)) minmax(0, 1fr); gap: calc(10 * var(--px)); align-items: start;
  position: sticky; top: calc(var(--hdr) + 18px); }
.pd__gal:not(:has(.pd__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.pd__thumbs { display: grid; gap: calc(10 * var(--px)); }
.pd__th { display: block; aspect-ratio: 1; border-radius: calc(6 * var(--px)); overflow: hidden; background: var(--powder); box-shadow: inset 0 0 0 1px transparent;
  opacity: .72; transition: opacity .2s; }
.pd__th img { width: 100%; height: 100%; object-fit: cover; }
.pd__th:hover { opacity: 1; }
.pd__th.on { opacity: 1; box-shadow: 0 0 0 2px var(--violet); }
.pd__main { aspect-ratio: 1; max-height: calc(100svh - var(--hdr) - 60px); border-radius: var(--r); width: 100%; justify-self: start; }
.pd__main img { transition: opacity .25s var(--ease); }
.pd__main .card__labels { left: calc(16 * var(--px)); top: calc(16 * var(--px)); }
.pd__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pd__title h1 { font-size: calc(32 * var(--px)); line-height: 1.12; }
.pd__fav { flex: none; width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; background: var(--white); box-shadow: 0 2px 10px rgba(42, 30, 51, .12);
  display: grid; place-items: center; transition: transform .2s; }
.pd__fav svg { width: 52%; height: 52%; fill: none; stroke: var(--ink); stroke-width: 1.6;  }
.pd__fav[aria-pressed="true"] svg { fill: var(--magenta); stroke: var(--magenta); }
.pd__fav:hover { transform: scale(1.06); }
.pd__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: calc(22 * var(--px)) 0 calc(14 * var(--px)); }
.qty { display: inline-flex; align-items: center; height: calc(46 * var(--px)); border-radius: 999px; background: var(--pill); padding: 0 6px; }
.qty button { width: calc(36 * var(--px)); height: calc(36 * var(--px)); border-radius: 50%; display: grid; place-items: center;  }
.qty button:hover { background: var(--white); }
.qty .ico { width: 16px; height: 16px; }
.qty span { min-width: calc(30 * var(--px)); text-align: center; font-weight: 600; }
.pd__price { justify-content: flex-end; }
.pd__price b { font-size: calc(24 * var(--px)); }
.pd__pick { display: flex; align-items: center; gap: 10px; font-size: calc(13.5 * var(--px)); color: var(--ink-2); margin-bottom: calc(16 * var(--px)); }
.pd__pick .lbl { box-shadow: inset 0 0 0 1px var(--lilac); }
.pd__one { margin-top: calc(8 * var(--px)); }
.pd__na { padding: 12px 0; font-weight: 600; color: var(--ink-2); }
.pd__lead { display: flex; align-items: center; gap: 8px; margin-top: calc(14 * var(--px)); font-size: calc(14 * var(--px)); color: var(--ink-2); }
.pd__lead .mask-ico { width: 16px; height: 16px; color: var(--magenta); }
.pd__desc { margin-top: calc(28 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.5; color: var(--ink-2); display: grid; gap: 8px; }
.pd__h { font: 600 calc(16 * var(--px))/1.2 var(--f-text); color: var(--ink); }
.pd__warn { font-size: calc(13.5 * var(--px)); }
.pd__checks { margin-top: calc(22 * var(--px)); display: grid; gap: calc(10 * var(--px)); font-size: calc(15 * var(--px)); }
.pd__checks li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.ring { width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lilac); display: grid; place-items: center; }
.ring .ico { width: 70%; height: 70%; stroke-width: 2; color: var(--violet); }
.tip { position: relative; color: #a49cab; display: grid; place-items: center; }
.tip .ico { width: 18px; height: 18px; }
.tip__b { position: absolute; right: -6px; bottom: calc(100% + 10px); width: calc(260 * var(--px)); padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: calc(13 * var(--px)); line-height: 1.45; text-align: left; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; }
.tip:hover .tip__b, .tip:focus .tip__b { opacity: 1; transform: none; }
.pd__accs { margin-top: calc(24 * var(--px)); border-top: 1px solid var(--line); }
.acc--sm summary { display: flex; align-items: center; justify-content: space-between; padding: calc(15 * var(--px)) 0; font-size: calc(16 * var(--px)); cursor: pointer; list-style: none; }
.acc--sm summary::-webkit-details-marker { display: none; }
.acc--sm .chev { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.acc--sm[open] .chev { transform: rotate(180deg); }
.acc--sm .acc__a { padding: 0 0 calc(16 * var(--px)); font-size: calc(14.5 * var(--px)); }
.acc--sm { border-bottom: 1px solid var(--line); }
.acc--sm:first-child { border-top: 0; }
.addons__row { display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: calc(20 * var(--px)); }
.addon { display: grid; grid-template-columns: calc(96 * var(--px)) 1fr; gap: 14px; align-items: center; padding: calc(14 * var(--px)); border: 1px solid var(--line); border-radius: var(--r); }
.addon .card__ph { aspect-ratio: 1; border-radius: 6px; }
.addon__n { display: block; font-size: calc(14 * var(--px)); line-height: 1.3; }
.addon .price { margin: 6px 0 10px; }
.addon .price b { font-size: calc(16 * var(--px)); }
.addon .price s { font-size: calc(13 * var(--px)); }
.addon .btn { height: calc(36 * var(--px)); padding: 0 calc(16 * var(--px)); font-size: calc(11.5 * var(--px)); }
.addon--card { grid-template-columns: 1fr; gap: 10px; background: var(--powder); border-color: var(--powder); align-items: start; }
.addon--card textarea { min-height: calc(76 * var(--px)); background: var(--white); }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.offers .offer { min-height: calc(400 * var(--px)); }