/* HotSki — product card (template 3), product.html?id=<id>, default 73282.
   Blocks in the order of logic/NEW_MAP_2.md §3 on the coolzone product skeleton (refs/coolzone/pages/product.md):
   B1 crumbs · B2 gallery 2 × 490×700 · B3 buy column (sticky) · B4 anchors (+ product bar) · B5 characteristics (R04 card) ·
   B6 kit (R37 lines on the outfit photo, R32, coolzone toggles) · B7 reviews · B8 similar · B9 parts adv + footer.
   Colour — client red + white; lines 1 px ink; radii: button 10, circles 50 %, photos 0. Motion: transform/opacity only. */

.pd { padding-top: var(--hdr); }

/* ---------- B1 crumbs ---------- */
.pd-crumbs { height: 66px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.pd-crumbs .last { overflow: hidden; text-overflow: ellipsis; }

/* ---------- top: gallery (left) + buy column (right, sticky) ---------- */
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: start; }
.pd-left { min-width: 0; }

/* ---------- B2 gallery (coolzone: two photos 490×700, round arrows 28, progress line; R22 · R33 angles) ---------- */
.pd-g { position: relative; }
.pd-g__view { overflow: hidden; }
.pd-g__track { display: flex; transition: transform 0.85s var(--ease-out); will-change: transform; }
.pd-g__slide {
  position: relative; flex: 0 0 50%; margin: 0; aspect-ratio: 490 / 700; max-height: calc(100vh - 150px); min-height: 440px;
  overflow: hidden; background: var(--snow); cursor: zoom-in; outline: none;
}
.pd-g.has-cur .pd-g__slide { cursor: none; }
.pd-g__pic { position: absolute; inset: 0; }
.pd-g__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-g__img { transition: transform 1.4s var(--ease-out); }
.pd-g__slide:hover .pd-g__img, .pd-g__slide:focus-visible .pd-g__img { transform: scale(1.035); }
.pd-g__blur { filter: blur(22px) saturate(1.15); transform: scale(1.1); opacity: 0; pointer-events: none; }
.pd-g__slide::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0); transition: box-shadow 0.3s; pointer-events: none; }
.pd-g__slide:focus-visible::after { box-shadow: inset 0 0 0 1px var(--red); }
.pd-g__cap { position: absolute; z-index: 2; left: 20px; top: 18px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.pd-g__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.pd-g__idx { position: absolute; z-index: 2; right: 20px; top: 18px; color: var(--gray); }
.pd-g--one .pd-g__slide { flex-basis: 100%; aspect-ratio: 980 / 700; }
.pd-g--one .pd-g__pic img { left: 0; right: 0; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.pd-g--one .pd-g__pic img, .pd-lb__img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.pd-g__bar { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 20px; pointer-events: none; }
.pd-g__bar[hidden] { display: none; }
.pd-g__bar .arr { pointer-events: auto; }
.pd-g__progress { flex: 1; height: 1px; background: rgba(21, 21, 21, 0.3); position: relative; }
.pd-g__progress i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0.667); transition: transform 0.85s var(--ease-out); }

/* cursor over the photos: the brand dot grows into an ice circle */
.pd-cur {
  position: fixed; z-index: 80; left: 0; top: 0; width: 88px; height: 88px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; align-content: center; gap: 7px; opacity: 0; will-change: transform;
}
.pd-cur .dot { width: 9px; height: 9px; }

/* ---------- B3 buy column (coolzone B3 · R01 card top right · R09) ---------- */
.pd-buy { position: sticky; top: 96px; padding: 0 var(--pad) 36px 40px; transition: transform 0.45s var(--ease-out); }
.pd-buy.is-pushed { transform: translateY(40px); }
.pd-buy__brand { display: flex; align-items: center; gap: 10px; }
.pd-buy__brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.pd-buy__name { margin-top: 12px; font-size: 20px; line-height: 1.2; font-weight: 400; text-transform: uppercase; text-wrap: balance; }
.pd-buy__name .w { overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pd-buy__art { margin-top: 10px; font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-buy__pricerow { margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pd-buy__price { font-size: 18px; line-height: 1.15; font-weight: 400; }
.pd-buy__size { margin-top: 20px; }
.pd-buy__size[hidden] { display: none; }
.pd-buy__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pd-buy__cta { margin-top: 18px; }

/* size chips: available — outlined; chosen — heavier border + red dot; absent — pale, crossed, not clickable */
.pd-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-size {
  position: relative; min-width: 52px; height: 37px; padding: 0 12px; border: 1px solid #cfcfcf; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 13px; letter-spacing: 0.02em; color: var(--ink);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.pd-size:hover { border-color: var(--ink); }
.pd-size.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
.pd-size.is-on::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--white); animation: pdPop 0.45s var(--ease-out); }
@keyframes pdPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pd-size[disabled] {
  color: #b9b9b9; border-color: #ececec; cursor: not-allowed;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), #e2e2e2 calc(50% - 0.5px), #e2e2e2 calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.pd-sizes--sm .pd-size { min-width: 44px; height: 32px; font-size: 12px; }

/* delivery and payment under the button */
.pd-info { margin-top: 18px; display: grid; gap: 11px; }
.pd-info li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 12px; line-height: 1.45; }
.pd-info svg { width: 17px; height: 17px; margin-top: 0; color: var(--ink); }
.pd-info li:first-child svg { color: var(--red); }

/* where to try it on — the client's stock by shop (73282 only) */
.pd-shops { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e3e3e3; }
.pd-shops__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pd-shop { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px 10px; align-items: start; padding: 10px 0 11px; border-bottom: 1px solid #efefef; }
.pd-shop:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-shop__dot { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--ink); }
.pd-shop.is-yes .pd-shop__dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px rgba(226, 17, 25, 0.14); }
.pd-shop.is-no .pd-shop__dot { border-color: #b9b9b9; }
.pd-shop__addr { font-size: 12px; line-height: 1.4; }
.pd-shop__stock { font-weight: 400; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray); white-space: nowrap; }
.pd-shop.is-yes .pd-shop__stock { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: var(--white); font-size: 11px; line-height: 1; }
.pd-shop__route { grid-column: 2 / 4; justify-self: start; font-size: 11px; }
.pd-shops.is-na .pd-shop__stock, .pd-shops.is-na [data-stock-note] { display: none; }
.pd-shops.is-na .pd-shop__dot { background: transparent; border-color: var(--ink); box-shadow: none; }

/* ---------- B4 anchors under the gallery (coolzone B4) ---------- */
.pd-anchors { display: flex; justify-content: center; align-items: center; gap: 22px; height: 72px; border-bottom: 1px solid #e3e3e3; }
.pd-anchors__sep, .pd-bar__nav i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }

/* the product bar: slides down when the buy column has scrolled away; sits under the header when it shows */
.pd-bar {
  position: fixed; z-index: 45; left: 0; right: 0; top: 0; height: 58px; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  background: var(--white); box-shadow: 0 10px 30px rgb(150 150 150 / 0.15); border-bottom: 1px solid #ececec;
  transform: translateY(-110%); visibility: hidden;
  transition: transform 0.45s var(--ease-out), visibility 0s 0.45s;
}
.pd-bar.is-on { transform: translateY(0); visibility: visible; transition: transform 0.45s var(--ease-out), visibility 0s; }
.pd-bar.is-on.is-under { transform: translateY(var(--hdr)); }
.pd-bar__prod, .pd-bar__buy { opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.pd-bar.is-full .pd-bar__prod, .pd-bar.is-full .pd-bar__buy { opacity: 1; pointer-events: auto; }
.pd-bar__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); }
.pd-bar__prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-bar__prod img { width: 28px; height: 40px; object-fit: cover; background: var(--snow); flex: 0 0 auto; }
.pd-bar__name { font-size: 11px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-bar__price { font-size: 13px; white-space: nowrap; }
.pd-bar__nav { display: flex; align-items: center; gap: 18px; }
.pd-bar__buy { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }

/* ---------- B5 characteristics — R04 card with its description, the frame is a ski-track line ---------- */
.pd-spec-sec { padding: 64px 0 80px; scroll-margin-top: 70px; }
.pd-spec-sec > h2 { padding-left: var(--pad); margin-bottom: 30px; }
.pd-spec { display: grid; grid-template-columns: 34% minmax(0, 1fr); min-height: 450px; }
.pd-spec__pic { position: relative; margin: 0; overflow: hidden; background: var(--snow); }
.pd-spec__pic > div { position: absolute; inset: 0; }
.pd-spec__pic img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.pd-spec__body { position: relative; padding: 34px 128px 34px 44px; display: flex; flex-direction: column; justify-content: center; }
.pd-spec__track { position: absolute; inset: 0; border: 1px solid var(--ink); border-left: 0; border-radius: 0 190px 190px 0; pointer-events: none; }
.pd-spec__wipe { position: absolute; top: -2px; bottom: -2px; left: 0; right: -2px; background: var(--white); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }
.pd-spec__head, .pd-spec__list { position: relative; z-index: 1; }
.pd-spec__head { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: end; padding-bottom: 22px; }
.pd-spec__head .t10 { grid-column: 1 / -1; }
.pd-spec__head .t18 { white-space: nowrap; }
.pd-spec__list { margin: 0; border-top: 1px solid var(--ink); }
.pd-spec__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; min-height: 52px; border-bottom: 1px solid #e3e3e3; }
.pd-spec__plus { font-style: normal; font-size: 18px; font-weight: 300; line-height: 1; color: var(--red); display: inline-block; width: 24px; vertical-align: -2px; }
.pd-spec__row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); }
.pd-spec__row dd { margin: 0; }
.pd-spec__row dd a { position: relative; display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; }
.pd-spec__row dd a > span { position: relative; }
.pd-spec__row dd a > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--tr); }
.pd-spec__row dd a::after { content: "\2197"; color: var(--red); font-size: 13px; opacity: 0; transform: translate(-6px, 4px); transition: opacity 0.2s, transform 0.35s var(--ease-out); }
.pd-spec__row dd a:hover > span::after { transform: scaleX(1); }
.pd-spec__row dd a:hover::after { opacity: 1; transform: none; }

/* ---------- B6 kit — outfit photo with lines to the items (R37 · R12 f_018) + coolzone toggles (B8) ---------- */
.kit { padding-top: 70px; padding-bottom: 64px; scroll-margin-top: 60px; }
.kit__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.kit__body { display: grid; grid-template-columns: calc(50% - 8px) minmax(0, 1fr); gap: 16px; }
.kit__body--flat { grid-template-columns: minmax(0, 1fr); }
.kit__photo { position: relative; overflow: hidden; min-height: 560px; background: #2f6fd0; }
.kit__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 96% 50%; }
.kit__photo > img.kit__blur { filter: blur(22px) saturate(1.2); transform: scale(1.08); opacity: 0; }
.kit__pins { position: absolute; inset: 0; }
.kit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; align-content: start; }
.kit__body--flat .kit__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* callout on the photo: dot on the item -> elbow line -> numbered circle; hover -> glass tip with name and price */
.kit-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity 0.35s; }
.kit-pin.is-off { opacity: 0.32; }
.kit-pin__seg { position: absolute; left: 0; top: 0; height: 1.5px; background: rgba(255, 255, 255, 0.95); transform-origin: 0 50%; box-shadow: 0 0 6px rgba(0, 0, 0, 0.14); }
.kit-pin__seg b { position: absolute; inset: 0; background: var(--red); opacity: 0; transition: opacity 0.3s; }
.kit-pin.is-hot .kit-pin__seg b { opacity: 1; }
.kit-pin__dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.26), 0 4px 16px rgba(0, 0, 0, 0.25); display: grid; place-items: center; cursor: pointer;
}
.kit-pin__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); transition: transform 0.3s var(--ease-out); }
.kit-pin__dot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.8); animation: kitPulse 2.8s ease-out infinite; }
.kit-pin.is-hot .kit-pin__dot::after { transform: scale(1.35); }
.kit-pin.is-hot .kit-pin__dot::before { animation-play-state: paused; opacity: 0; }
@keyframes kitPulse { 0% { transform: scale(0.6); opacity: 0.9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.kit-pin__num {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink); background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 18px rgba(20, 40, 80, 0.2); cursor: default;
}
.kit-pin.is-hot .kit-pin__num { background: var(--red); color: var(--white); }
.kit-pin__tip {
  position: absolute; display: grid; gap: 3px; width: 212px; padding: 10px 14px 11px; border-radius: 14px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.35s var(--ease-out); transform: translateY(6px);
}
.kit-pin__tip b { font-weight: 400; font-size: 11px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.kit-pin__tip span { font-size: 14px; }
.kit-pin.is-hot .kit-pin__tip { opacity: 1; transform: none; }

/* small kit card: photo, toggle circle top right (coolzone), number that ties it to the photo */
.kit-card { position: relative; min-width: 0; }
.kit-card__media { display: block; position: relative; aspect-ratio: 338 / 479; background: var(--snow); overflow: hidden; }
.kit-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity 0.35s; }
.kit-card:hover .kit-card__media img { transform: scale(1.045); }
.kit-card__num { position: absolute; z-index: 2; left: 9px; top: 9px; font-size: 10px; letter-spacing: 0.06em; color: var(--ink); }
.kit-card__tog { position: absolute; z-index: 3; right: 9px; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); transition: box-shadow 0.25s; }
.kit-card__tog::before { content: ""; position: absolute; inset: -11px; }
.kit-card__tog::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); transition: transform 0.35s var(--ease-out); }
.kit-card__tog:hover { box-shadow: 0 0 0 1px var(--ink), 0 2px 10px rgba(0, 0, 0, 0.14); }
.kit-card.is-off .kit-card__tog { box-shadow: inset 0 0 0 1px var(--ink); }
.kit-card.is-off .kit-card__tog::after { transform: scale(0); }
.kit-card.is-off .kit-card__media img, .kit-card.is-off .kit-card__body { opacity: 0.36; }
.kit-card.is-hot .kit-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--red); }
.kit-card__body { padding-top: 10px; display: grid; gap: 5px; transition: opacity 0.35s; }
.kit-card__name { font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.kit-card__name:hover { color: var(--red); }
.kit-card__price { font-size: 14px; font-weight: 400; }

/* the sum: red tile = "photo + red panel" of the site, white text on top, bracket link at the bottom */
.kit-sum {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 100%;
  padding: 14px 14px 16px; background: var(--red); color: var(--white); text-align: left; overflow: hidden;
}
.kit-sum__sel b { font-weight: 400; }
.kit-sum__total { display: grid; gap: 6px; }
.kit-sum__num { font-size: 42px; line-height: 0.9; white-space: nowrap; }
.kit-sum__num .ch { display: inline-block; }
.kit-sum__cta { display: block; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.02em; transition: transform 0.35s var(--ease-out); }
.kit-sum:hover .kit-sum__cta, .kit-sum:focus-visible .kit-sum__cta { transform: translateX(4px); }
.kit-sum::after { content: ""; position: absolute; right: 14px; bottom: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--white); transition: transform 0.5s var(--ease-out); pointer-events: none; }
.kit-sum:hover::after { transform: scale(1.6); }
.kit-sum__cta { padding-right: 16px; }

/* ---------- B7 reviews — the shop's review instead of "0 reviews" ---------- */
.rev { display: grid; grid-template-columns: 338px minmax(0, 1fr); gap: 16px 16px; padding-top: 70px; padding-bottom: 76px; border-top: 1px solid var(--ink); scroll-margin-top: 60px; }
.rev__side { display: grid; align-content: start; gap: 40px; }
.rev__rate { display: grid; gap: 14px; justify-items: start; }
.rev__num { font-size: 190px; line-height: 0.78; color: var(--ink); }
.rev__num .ch { display: inline-block; }
.rev__dots { display: inline-flex; gap: 7px; }
.rev__dots i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--red); overflow: hidden; }
.rev__dots i.is-part { background: #f1c9cb; }
.rev__dots i.is-part::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--red); }
.rev__main { margin: 0; display: grid; gap: 28px; align-content: start; position: relative; }
.rev__cap { display: flex; align-items: center; gap: 8px; }
.rev__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.rev__quote { margin: 0; max-width: 1000px; font-size: 28px; line-height: 1.3; font-weight: 300; letter-spacing: -0.005em; text-wrap: pretty; }
.rev__quote mark { background: none; color: var(--red); }
.rev__foot { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.rev__who { display: flex; align-items: center; gap: 12px; }
.rev__who::before { content: ""; width: 34px; height: 1px; background: var(--ink); }

/* ---------- B8 similar ---------- */
.sim { border-top: 1px solid var(--ink); }
.sim .shead { align-items: flex-end; }

/* ---------- panels: want it cheaper · kit sizes · review (right half, like the search) ---------- */
.pd-side { display: flex; flex-direction: column; }
.pd-side__prod { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid #e3e3e3; }
.pd-side__prod img { width: 56px; height: 80px; object-fit: cover; background: var(--snow); }
.pd-side__prod p { display: grid; gap: 6px; }
.pd-side__title { margin-bottom: 30px; max-width: 560px; }
.pd-side__block { display: grid; gap: 14px; justify-items: start; padding: 24px 0 28px; border-top: 1px solid #e3e3e3; }
.pd-side__block:first-of-type { border-top: 0; padding-top: 0; }
.pd-side__block h4 { font-size: 16px; font-weight: 400; text-transform: uppercase; line-height: 1.2; }
.pd-side__block p { max-width: 580px; }
.pd-form { width: 100%; }
.pd-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; width: 100%; margin-top: 6px; }
.pd-form__fields .field--wide { grid-column: 1 / -1; }
.pd-form .field textarea { resize: vertical; min-height: 96px; }
.pd-form__send { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.pd-form__ok { width: 22px; height: 22px; border-radius: 50%; background: var(--red); display: grid; place-items: center; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.pd-form__ok svg { width: 12px; height: 12px; color: var(--white); }
.pd-form.is-done .pd-form__ok { opacity: 1; transform: none; }
.pd-form .field.is-err input, .pd-form .field.is-err textarea { border-bottom-color: var(--red); }
.pd-form.is-done input, .pd-form.is-done textarea { color: var(--gray); }

/* kit sizes panel */
.pd-kitp { display: grid; }
.pd-kitp__row { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid #e3e3e3; }
.pd-kitp__row:first-child { padding-top: 0; }
.pd-kitp__row img { width: 64px; height: 91px; object-fit: cover; background: var(--snow); }
.pd-kitp__row > div { display: grid; gap: 6px; align-content: start; }
.pd-kitp__name { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.pd-kitp__row .pd-sizes { margin-top: 6px; }
.pd-kitp__foot { margin-top: auto; padding-top: 22px; display: grid; gap: 14px; position: sticky; bottom: -40px; background: var(--white); padding-bottom: 6px; }
.pd-kitp__foot .t13 { display: flex; justify-content: space-between; align-items: baseline; }
.pd-kitp__foot b { font-weight: 400; font-size: 18px; text-transform: none; }

/* ---------- fullscreen photo view ---------- */
.pd-lb { position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; }
.pd-lb.is-open { visibility: visible; pointer-events: auto; }
.pd-lb__bg { position: absolute; inset: 0; background: var(--snow); opacity: 0; }
.pd-lb__stage { position: absolute; left: 90px; right: 90px; top: 64px; bottom: 112px; overflow: hidden; }
.pd-lb__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.pd-lb.is-zoomed .pd-lb__zoom { cursor: zoom-out; }
.pd-lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.pd-lb__top { position: absolute; left: var(--pad); right: var(--pad); top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pd-lb__title { display: flex; align-items: center; gap: 10px; }
.pd-lb__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pd-lb__x { background: var(--white); border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); }
.pd-lb__arr { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; }
.pd-lb__arr svg { width: 12px; height: 12px; }
.pd-lb__arr--l { left: 26px; }
.pd-lb__arr--r { right: 26px; }
.pd-lb__foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pd-lb__count { font-size: 64px; line-height: 0.8; min-width: 120px; }
.pd-lb__count small { font-size: 0.42em; color: var(--gray); margin-left: 4px; }
.pd-lb__thumbs { display: flex; gap: 10px; }
.pd-lb__thumbs button { position: relative; width: 46px; height: 66px; background: var(--white); opacity: 0.55; transition: opacity 0.25s; }
.pd-lb__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.pd-lb__thumbs button.is-on { opacity: 1; }
.pd-lb__thumbs button::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform 0.3s var(--ease-out); }
.pd-lb__thumbs button.is-on::after { transform: scale(1); }
.pd-lb__hint { min-width: 120px; text-align: right; }

/* the dot that flies to the cart */
.pd-fly { position: fixed; z-index: 130; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(226, 17, 25, 0.35); pointer-events: none; }
.pd-shake { animation: pdShake 0.5s ease; }
@keyframes pdShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ---------- narrower screens: stack, no sticky ---------- */
@media (max-width: 1100px) {
  .pd-top { grid-template-columns: minmax(0, 1fr); }
  .pd-buy { position: static; padding: 30px var(--pad) 10px; }
  .pd-spec { grid-template-columns: 40% minmax(0, 1fr); }
  .kit__body { grid-template-columns: minmax(0, 1fr); }
  .kit__body--flat .kit__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rev { grid-template-columns: minmax(0, 1fr); }
  .rev__quote, .rev__foot { padding-left: 0; }
  .rev__mark { display: none; }
  .pd-bar__nav { display: none; }
  .pd-bar { grid-template-columns: 1fr auto; }
}
@media (max-width: 720px) {
  .pd-g__slide { flex-basis: 100%; }
  .pd-spec { grid-template-columns: minmax(0, 1fr); }
  .pd-spec__pic { aspect-ratio: 3 / 4; }
  .pd-spec__body { padding: 28px 40px 28px 20px; }
  .kit__grid, .kit__body--flat .kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rev__num { font-size: 130px; }
  .rev__quote { font-size: 20px; }
  .pd-form__fields { grid-template-columns: minmax(0, 1fr); }
  .side { width: 100vw; }
}