/* 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.
   Adaptive (ADAPTIVE.md §4, 26.09) — same content, other packaging: see the block at the end of the file. */

.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, anchors, characteristics (left) + buy column (right, sticky over all three rows) ----------
   Source order is gallery · buy · anchors · characteristics (the phone reading order); the grid puts the buy column right. */
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: start; }
.pd-g, .pd-anchors, .pd-spec-sec { grid-column: 1; min-width: 0; }
.pd-g { grid-row: 1; }
.pd-anchors { grid-row: 2; }
.pd-spec-sec { grid-row: 3; }
.pd-buy { grid-column: 2; grid-row: 1 / 4; }

/* ---------- 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(--surface); 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: contain; }
.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: none; }   /* 08.10 (#12): the product is never cut */
.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(--accent); }
.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(--accent); }
.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); }
/* dots instead of arrows + line on the phone (the same position, other packaging) */
.pd-g__dots { display: none; }
/* touch (JS: hover none or below 1024): the track scrolls under the finger and snaps photo by photo, like the shared carousel */
.pd-g.is-touch .pd-g__track {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; transform: none !important; transition: none;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.pd-g.is-touch .pd-g__track::-webkit-scrollbar { display: none; }
.pd-g.is-touch .pd-g__slide { scroll-snap-align: start; }

/* 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(--accent); 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(--accent); 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(--accent); }

/* 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(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 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(--accent); 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(--accent); 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(--accent); 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: contain; background: var(--surface); 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; }
/* the size in the bar is a button: it opens the same chips as the buy column (no scrolling back up to choose) */
.pd-bar__size { white-space: nowrap; }
.pd-bar__pick {
  position: absolute; z-index: 2; right: var(--pad); top: calc(100% + 8px); width: max-content; max-width: calc(100vw - 2 * var(--pad));
  padding: 14px 16px 16px; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 1px #e6e6e6, 0 18px 40px rgb(60 70 90 / 0.16);
}
.pd-bar__pick .pd-sizes { margin-top: 10px; }

/* ---------- 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(--surface); }
.pd-spec__pic > div { position: absolute; inset: 0; }
.pd-spec__pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.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(--accent); 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(--accent); 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 (touch: tap) -> 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(--accent); 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(--accent); 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(--accent); 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(--surface); overflow: hidden; }
.kit-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s var(--ease-out), opacity 0.35s; }
.kit-card:hover .kit-card__media img { transform: none; }   /* 08.10 (#12) */
.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(--accent); 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(--accent); }
.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(--accent); }
.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(--accent); 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(--accent); 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(--accent); }
.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(--accent); }
.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(--accent); }
.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; }

/* kit and similar cards fly in from +90 px: they are clipped at the section edge. body's overflow-x: clip moves to the viewport
   and clips nothing inside the page, so on a phone the cards' start position widened the layout viewport (375 -> 451):
   the fixed header lost its cart and the tab bar went below the screen until the cards arrived */
.kit, .sim { overflow-x: clip; }

/* ---------- 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: contain; background: var(--surface); }
.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(--accent); 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); }
/* P8: the tick comes when the stand has answered ok (js/app.js sets .is-sent), not at the click */
.pd-form.is-sent .pd-form__ok { opacity: 1; transform: none; }
.pd-form .field.is-err input, .pd-form .field.is-err textarea { border-bottom-color: var(--accent); }
.pd-form .form-msg { margin-top: 2px; }

/* 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: contain; background: var(--surface); }
.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(--surface); 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(--accent); }
.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: contain; }
.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(--accent); 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(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(var(--accent-rgb), 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); } }

/* ================= adaptive — ADAPTIVE.md §1 · §4 (26.09): same content, other packaging =================
   xl ≥1600: the 1440 layout, photos bigger and whole · lg 1200–1599: the 1440 layout, untouched ·
   md 900–1199: one photo per view, the buy column beside it (fits without squeezing) · under 900: one column —
   photo + the edge of the next (touch: under the finger), buy, anchors, characteristics · sm ≤767: the phone, dots,
   bar at the bottom over the tab bar. JS keeps the same breakpoints (js/product.js MD / SM / TOUCH). */

/* ---------- xl: the same two photos, bigger; the box is wider than the photo there (screen height caps it), so the photo is
   shown whole on its own edge-colour backdrop, as a one-photo product already is (no cut heads or boots); the buy column keeps its 400 px text ---------- */
@media (min-width: 1600px) {
  .pd-top { grid-template-columns: minmax(0, 1fr) calc(440px + var(--pad)); }
  .pd-g__pic img {
    left: 0; right: 0; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain;
    -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%);
  }
}

/* ---------- md + sm ---------- */
@media (max-width: 1199px) {
  .pd-spec__body { padding: 32px 96px 32px 36px; }
  .pd-spec__track { border-radius: 0 150px 150px 0; }
  .pd-spec__wipe { right: 0; }   /* the card reaches the screen edge here: 2 px past it widened the phone's layout viewport */
  .pd-spec__row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 12px; }
  .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: 260px minmax(0, 1fr); }
  .rev__num { font-size: 160px; }
  .rev__quote { font-size: 24px; }
  .sim .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-bar__nav { display: none; }
  .pd-lb__stage { left: 76px; right: 76px; }
  .pd-lb__arr--l { left: 16px; }
  .pd-lb__arr--r { right: 16px; }
}

/* md 900–1199: gallery + anchors on the left, the buy column beside them; characteristics take the whole width below.
   One photo per view, whole, on its edge-colour backdrop (the screen height caps the box, a cover crop would cut the model) */
@media (min-width: 900px) and (max-width: 1199px) {
  .pd-g__slide { flex-basis: 100%; }
  .pd-g__pic img {
    left: 0; right: 0; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain;
    -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-top { grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr auto; }
  /* not sticky here: a sticky grid item is held by the whole grid, not by its rows, and would ride over the characteristics
     below; the column is as tall as the photo anyway, the bar takes over when it has gone */
  .pd-buy { grid-row: 1 / 3; padding-left: 32px; position: static; }
  .pd-spec-sec { grid-column: 1 / -1; }
}

/* under 900: one column in source order — photos, buy, anchors, characteristics */
@media (max-width: 899px) {
  .pd-top { display: block; }
  .pd-g__slide { flex-basis: min(calc(100% - 36px), 49vh); flex-basis: min(calc(100% - 36px), 49svh); max-height: none; min-height: 0; }
  .pd-buy { position: static; padding: 28px var(--pad) 26px; transition: none; }
  .pd-anchors { border-top: 1px solid #e3e3e3; }
  .rev { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rev__side { gap: 26px; }
  /* similar: the four cards scroll under the finger, 3 + edge (sm: 2 + edge) — the carousel logic of ADAPTIVE §3 */
  .sim .grid4 {
    display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding: 0 var(--pad);
  }
  .sim .grid4::-webkit-scrollbar { display: none; }
  .sim .grid4 > * { flex: 0 0 calc((100% - 2 * var(--gap)) / 3.25); scroll-snap-align: start; }
}

/* stacked tablet 768–899: the buy block keeps two columns — choice and button left, delivery and shops right */
@media (min-width: 768px) and (max-width: 899px) {
  .pd-buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: 40px; align-items: start; }
  .pd-buy > * { grid-column: 1; }
  .pd-buy > .pd-buy__aside { grid-column: 2; grid-row: 1 / 7; }
  .pd-buy__aside .pd-info { margin-top: 4px; }
}

/* ---------- sm: phone ---------- */
@media (max-width: 767px) {
  .pd-crumbs { height: 48px; }

  /* gallery: photo on the whole width, the next one peeks; dots instead of arrows + line */
  .pd-g__bar { display: none; }
  .pd-g__cap { left: 16px; top: 14px; }
  .pd-g--one .pd-g__slide { flex-basis: 100%; aspect-ratio: 4 / 5; }
  .pd-g__dots { display: flex; position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 8px; pointer-events: none; }
  .pd-g__dots i { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); }
  .pd-g__dots i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform var(--tr); }
  .pd-g__dots i.is-on::after { transform: scale(1); }

  /* buy under the photos */
  .pd-buy { padding: 22px var(--pad) 24px; }
  .pd-sizes { gap: 8px; }
  .pd-size { min-width: 56px; height: 44px; }
  .pd-sizes--sm .pd-size { min-width: 50px; height: 40px; }
  .pd-shop__route { padding: 4px 0; }

  /* anchors scroll sideways */
  .pd-anchors { justify-content: flex-start; gap: 18px; height: 56px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pd-anchors::-webkit-scrollbar { display: none; }
  .pd-anchors .tab { flex: 0 0 auto; white-space: nowrap; }

  /* characteristics: photo on top, rows below; the ski-track frame keeps its round end, smaller */
  .pd-spec-sec { padding: 44px 0 50px; }
  .pd-spec-sec > h2 { margin-bottom: 22px; }
  .pd-spec { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pd-spec__pic { aspect-ratio: 4 / 5; }
  .pd-spec__body { padding: 26px 46px 26px var(--pad); }
  .pd-spec__track { border-radius: 0 56px 56px 0; }
  .pd-spec__head { gap: 6px 16px; padding-bottom: 18px; }
  .pd-spec__row { grid-template-columns: 138px minmax(0, 1fr); min-height: 50px; column-gap: 10px; padding: 6px 0; }
  .pd-spec__row dt { font-size: 11px; letter-spacing: 0.03em; }
  .pd-spec__plus { width: 17px; }
  .pd-spec__row dd a { font-size: 14px; }

  /* kit: the outfit photo on the whole width, cropped on the skier (numbers stay on the items), cards 2 × N, the sum closes the grid */
  .kit { padding-top: 44px; padding-bottom: 44px; }
  .kit__head { margin-bottom: 22px; }
  .kit__photo { min-height: 0; aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--pad)); }
  .kit__photo > img { object-position: 72% 50%; }
  .kit__grid, .kit__body--flat .kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gap); }
  .kit-sum__num { font-size: 36px; }

  /* reviews: one column */
  .rev { padding-top: 44px; padding-bottom: 50px; }
  .rev__num { font-size: 130px; }
  .rev__quote { font-size: 20px; line-height: 1.35; }
  .rev__foot { gap: 14px 26px; }

  .sim .grid4 > * { flex-basis: calc((100% - var(--gap)) / 2.15); }

  /* the product bar sits at the bottom, over the tab bar: price · size · outlined button, not the whole width (Baymard #791) */
  .pd-bar {
    top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); height: 64px; gap: 10px;
    border-bottom: 0; border-top: 1px solid #e3e3e3; box-shadow: 0 -12px 28px rgb(150 150 150 / 0.14);
    transform: translateY(calc(100% + 64px + env(safe-area-inset-bottom)));
  }
  .pd-bar.is-on, .pd-bar.is-on.is-under { transform: none; }
  .pd-bar__prod { gap: 10px; }
  .pd-bar__name { display: none; }
  .pd-bar__price { font-size: 16px; }
  .pd-bar__buy { gap: 8px; }
  .pd-bar__size {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 1px solid #cfcfcf; border-radius: 10px;
    color: var(--ink); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  }
  .pd-bar__size::after { content: ""; width: 6px; height: 6px; margin-top: 4px; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--tr); }
  .pd-bar__size[aria-expanded="true"]::after { margin-top: -4px; transform: rotate(225deg); }
  .pd-bar__size.has-size .pd-bar__size-l { display: none; }
  .pd-bar .btn--min { min-width: 0; min-height: 44px; padding: 11px 18px; }
  .pd-bar__line { top: -1px; bottom: auto; }
  .pd-bar__pick { top: auto; bottom: calc(100% + 8px); left: var(--pad); right: var(--pad); width: auto; max-width: none; }
  .pd-bar.is-on ~ .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }

  /* fullscreen view: the photo takes the width, arrows over it, a smaller counter */
  .pd-lb__stage { left: 0; right: 0; top: 58px; bottom: 104px; }
  .pd-lb__top { top: 14px; }
  .pd-lb__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .pd-lb__title::before { display: inline-block; margin-right: 8px; vertical-align: 1px; }
  .pd-lb__arr { width: 36px; height: 36px; margin-top: -18px; background: rgba(255, 255, 255, 0.85); }
  .pd-lb__arr--l { left: 10px; }
  .pd-lb__arr--r { right: 10px; }
  .pd-lb__foot { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .pd-lb__count { font-size: 42px; min-width: 0; }
  .pd-lb__thumbs button { width: 38px; height: 54px; }
  .pd-lb__hint { display: none; }

  .pd-form__fields { grid-template-columns: minmax(0, 1fr); }
}

/* touch: the callout plate opens by a tap and its name leads to the item */
@media (hover: none) {
  .kit-pin.is-hot .kit-pin__tip { pointer-events: auto; }
  .kit-pin__num { cursor: pointer; }
}

/* ================= P8 · the summer card (MailSport) — the same system, the season repaints it =================
   logic/NEW_MAP_SEASON.md §4 · refs/summer L04 (light frame of the bike, price), L05 (callouts on the bike), L12 (key features).
   Colours only through the season tokens: --accent (sky), --accent-rgb, --surface (sand), --lime (the pulse of the dots). */

/* gallery: the client's one photo on the sand, whole, with air around it; data-blend (css/base.css) multiplies its white
   into the sand — the sand sits on the picture box itself, so the blend survives the box's own transform (intro scale) */
html[data-season="summer"] .pd-g__pic { background: var(--surface); }
html[data-season="summer"] .pd-g__pic img {
  inset: 8% 6%; width: 88%; height: 84%; max-width: none; margin: 0; object-fit: contain;
  -webkit-mask-image: none; mask-image: none;
}
/* no photo at the client: the stand's words on the sand, nothing drawn in its place */
.pd-g__none { display: grid; place-items: center; align-content: center; gap: 12px; color: var(--gray); }
.pd-g--none .pd-g__slide { cursor: default; }

/* buy column */
.pd-buy__desc { margin-top: 8px; }
.pd-buy__guide { font-size: 11px; color: var(--gray); }
.pd-buy__guide:hover, .pd-buy__guide:focus-visible { color: var(--ink); }
/* the three summer arguments at the button: the season's icons, the client's words in caps */
.pd-info--leto { gap: 12px; }
.pd-info--leto li { grid-template-columns: 20px 1fr; align-items: center; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.03em; }
.pd-info--leto svg { width: 20px; height: 20px; color: var(--accent); }
.pd-info__go { position: relative; }
.pd-info__go::after { content: "\2197"; display: inline-block; margin-left: 6px; color: var(--accent); transition: transform 0.35s var(--ease-out); }
.pd-info__go:hover { color: var(--accent); }
.pd-info__go:hover::after { transform: translate(2px, -2px); }
.pd-shop.is-many .pd-shop__stock { padding: 0 8px; }
/* landscape bikes in the small thumbnails: whole, on the sand */
html[data-season="summer"] .pd-bar__prod img { width: 46px; height: 34px; object-fit: contain; }
html[data-season="summer"] .pd-side__prod { grid-template-columns: 96px 1fr; }
html[data-season="summer"] .pd-side__prod img { width: 96px; height: 68px; object-fit: contain; }

/* anchors: a product with fewer than two blocks has no anchor row — only its line stays */
.pd-anchors.is-min { height: 0; overflow: hidden; border-bottom: 0; }

/* ---------- characteristics: callouts on the bicycle diagram + the same table ---------- */
.bk { padding-top: 70px; padding-bottom: 72px; border-top: 1px solid var(--ink); scroll-margin-top: 60px; }
.bk__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.bk__name { max-width: 460px; text-align: right; }
.bk__stage { position: relative; overflow: hidden; background: var(--surface); }
/* the drawing: lines only, ink on sand, stroke widths in the 1000×620 box (they scale with the drawing) */
.bk__svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.bk-tire { stroke-width: 4.2; }
.bk-tread { stroke-width: 2.2; opacity: 0.5; }
.bk-rim { stroke-width: 2; }
.bk-rim--in { stroke-width: 1.2; }
.bk-spk { stroke-width: 1; opacity: 0.45; }
.bk-disc { stroke-width: 1.6; }
.bk-hub { stroke-width: 2; fill: var(--surface); }
.bk-axle { fill: var(--ink); stroke: none; }
.bk-t { stroke-width: 4; }
.bk-t--s { stroke-width: 3; }
.bk-t--h { stroke-width: 7; }
.bk-t--l { stroke-width: 7.5; }
.bk-t--r { stroke-width: 5; }   /* a rigid fork: one blade */
.bk-t--b { stroke-width: 3; }   /* a rim brake's arm */
.bk-g--pad { stroke-width: 5; }
.bk-p { stroke-width: 2.4; fill: var(--surface); }
.bk-g { stroke-width: 8; }
.bk-d { stroke-width: 2; }
.bk-ring { stroke-width: 4; stroke-dasharray: 3 2.6; }
.bk-chain { stroke-width: 2.4; stroke-dasharray: 5 3; opacity: 0.8; }
.bk-gnd { stroke-width: 1.4; stroke-dasharray: 2 7; opacity: 0.45; }

/* a dot on the part (the winter callout dot: white, the season's centre), a lime ring breathes around it */
.bk-dot {
  position: absolute; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); cursor: pointer;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 4px 14px rgba(40, 50, 70, 0.22);
}
.bk-dot::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }   /* a finger-sized target */
.bk-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: transform 0.3s var(--ease-out); }
.bk-dot.is-hot::after { transform: scale(1.4); }
.bk-dot:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.bk-dot__ring { position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; pointer-events: none; }
.bk-dot__n { display: none; }
/* the line from the dot to its plate: a 1 px ink segment that grows by scaleX (DESIGN.md §5), the season's colour when lit */
.bk-lead { position: absolute; z-index: 2; height: 1px; margin-top: -0.5px; transform-origin: 0 50%; color: var(--ink); pointer-events: none; }
.bk-lead b { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; }
.bk-lead.is-hot { color: var(--accent); }
/* the plate «name · value»: white on the sand, a dot where the line meets it */
.bk-plate { position: absolute; z-index: 4; display: grid; gap: 5px; padding: 11px 14px 12px; background: var(--white); box-shadow: 0 12px 30px rgba(70, 60, 40, 0.08); }
.bk-plate::before { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink); }
.bk-plate.is-l::before { right: -3.5px; }
.bk-plate.is-r::before { left: -3.5px; }
.bk-plate.is-hot { box-shadow: 0 0 0 1px var(--accent), 0 12px 30px rgba(70, 60, 40, 0.1); }
.bk-plate.is-hot::before { background: var(--accent); }
.bk-plate__n { font-size: 10px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); }
.bk-plate__num { display: none; margin-right: 6px; font-weight: 400; color: var(--accent); }
.bk-plate__v { font-size: 14px; line-height: 1.3; }

/* narrow (the plates do not fit beside the bike): numbered dots, a tap opens one plate over its dot; the table repeats the numbers */
.bk.is-narrow .bk-lead { display: none; }
.bk.is-narrow .bk-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.bk.is-narrow .bk-dot::after { display: none; }
.bk.is-narrow .bk-dot__n { display: block; font-size: 10px; line-height: 1; letter-spacing: 0.02em; color: var(--ink); }
.bk.is-narrow .bk-dot.is-hot { background: var(--accent); }
.bk.is-narrow .bk-dot.is-hot .bk-dot__n { color: var(--white); }
.bk.is-narrow .bk-plate {
  opacity: 0; visibility: hidden; transform: translateY(6px); box-shadow: 0 14px 34px rgba(40, 50, 70, 0.18);
  transition: opacity 0.25s, transform 0.35s var(--ease-out), visibility 0s 0.35s;
}
.bk.is-narrow .bk-plate.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s var(--ease-out), visibility 0s; }
.bk.is-narrow .bk-plate::before { display: none; }
.bk.is-narrow .bk-plate__num { display: inline; }

/* the same table, whole: two columns read top to bottom (rows count from js), the winter row of characteristics */
.bk-tab { margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; column-gap: 56px; border-top: 1px solid var(--ink); }
.bk__stage + .bk-tab { margin-top: 36px; }
.bk__head + .bk-tab { margin-top: 0; }
.bk-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; column-gap: 16px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid #e3e3e3; }
.bk-row dt { display: flex; align-items: baseline; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); }
.bk-row dd { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.bk-row__plus { flex: 0 0 auto; display: inline-block; width: 24px; font-style: normal; font-size: 18px; font-weight: 300; line-height: 1; color: var(--accent); vertical-align: -2px; }
.bk-row__n { display: none; }
.bk-row.is-hot { background: rgba(var(--accent-rgb), 0.06); }
.bk.is-narrow .bk-row__n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--ink); font-size: 9px; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.bk.is-narrow .bk-row.has-n .bk-row__plus { display: none; }   /* the number takes the plus's place */
.bk.is-narrow .bk-row:not(.has-n) dt { padding-left: 30px; }
.bk.is-narrow .bk-row:not(.has-n) .bk-row__plus { display: none; }
.bk.is-narrow .bk-row.is-hot .bk-row__n { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ---------- the frame-size table: a column per frame, the size in Alumni, the height under it ---------- */
.fr { padding-top: 64px; padding-bottom: 72px; border-top: 1px solid var(--ink); scroll-margin-top: 60px; }
.fr__head { margin-bottom: 30px; }
.fr__grid { display: grid; grid-template-columns: 200px; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
.fr__lab { display: flex; align-items: center; padding: 18px 16px 18px 0; border-bottom: 1px solid #e3e3e3; color: var(--gray); }
.fr__lab:first-child { align-items: flex-end; }
.fr__size, .fr__h { position: relative; display: flex; align-items: center; padding: 18px 16px; border-bottom: 1px solid #e3e3e3; text-align: left; }
.fr__size { min-height: 96px; align-items: flex-end; }
.fr__size::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.fr__num { font-size: 64px; line-height: 0.8; }
.fr__h { font-size: 15px; line-height: 1.35; }
.fr__size.is-avail, .fr__h.is-avail { cursor: pointer; }
.fr__size[disabled] { cursor: default; }
.fr__size.is-avail::after { content: ""; position: absolute; left: 16px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fr__size.is-out .fr__num, .fr__h.is-out { color: #b9b9b9; }
.fr__size.is-hover, .fr__h.is-hover { background: rgba(var(--accent-rgb), 0.05); }
.fr__size.is-on, .fr__h.is-on { background: rgba(var(--accent-rgb), 0.09); }
.fr__size.is-on::before { transform: scaleX(1); }
.fr__size.is-on .fr__num { color: var(--accent); }
.fr__size:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

/* ---------- the «Хочу дешевле!» window: the shared modal, wider for the client's texts, scrolls when the screen is short ---------- */
.pd-cheap { overflow-y: auto; overscroll-behavior: contain; align-items: start; }
.pd-cheap .modal__box { width: min(640px, 100%); margin: auto 0; gap: 0; padding: 30px 34px 30px; background: var(--white); }
.pd-cheap__prod { margin-bottom: 20px; padding-right: 40px; padding-bottom: 18px; }
.pd-cheap__title { margin-bottom: 16px; }
.pd-cheap__block { display: grid; gap: 12px; justify-items: start; padding: 20px 0 22px; border-top: 1px solid #e3e3e3; }
.pd-cheap__block:last-child { padding-bottom: 0; }
.pd-cheap__block h4 { font-size: 15px; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.pd-cheap__block p { max-width: 560px; }
.pd-cheap .pd-form__send { margin-top: 6px; }
.pd-cheap .form-msg:empty { min-height: 0; }

/* ---------- summer · adaptive (ADAPTIVE.md §4): the same blocks, other packaging ---------- */
@media (max-width: 1199px) {
  .bk-tab { column-gap: 32px; }
  .fr__grid { grid-template-columns: 160px; }
  .fr__num { font-size: 52px; }
}
@media (max-width: 899px) {
  .bk-tab { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 767px) {
  /* a landscape bike in a 5:4 box: whole, no tall empty sand above and under it */
  html[data-season="summer"] .pd-g--one .pd-g__slide { aspect-ratio: 5 / 4; }
  html[data-season="summer"] .pd-g__pic img { inset: 7% 4%; width: 92%; height: 86%; }
  .bk, .fr { padding-top: 44px; padding-bottom: 46px; }
  .bk__head { margin-bottom: 20px; }
  .bk__name { display: none; }
  .bk__stage { margin: 0 calc(-1 * var(--pad)); }
  .bk-tab { margin-top: 22px; }
  .bk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 10px; min-height: 50px; padding: 7px 0; }
  .bk-row dt { font-size: 11px; letter-spacing: 0.03em; }
  .bk-row dd { font-size: 14px; }
  .bk-row__plus { width: 17px; }
  .fr__head { margin-bottom: 20px; }
  /* the frame table reads as rows on the phone: size · height */
  .fr__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; }
  .fr__lab { padding: 14px 10px 14px 0; }
  .fr__size, .fr__h { padding: 14px 12px; }
  .fr__size { min-height: 64px; align-items: center; }
  .fr__size.is-avail::after { left: auto; right: 12px; top: 50%; margin-top: -3.5px; }
  .fr__size::before { display: none; }   /* a row is chosen by its tint; a line under half of the row would read as a mistake */
  .fr__num { font-size: 42px; }
  .pd-cheap { padding: 12px; }
  .pd-cheap .modal__box { padding: 26px 18px 24px; }
  html[data-season="summer"] .pd-side__prod { grid-template-columns: 76px 1fr; }
  html[data-season="summer"] .pd-side__prod img { width: 76px; height: 54px; }
}

/* 08.10 (#10): no glow band behind the photo, the product smaller with even margins — white field, photo inset 9 %, no edge mask */
.pd-g .pd-g__slide { background: #fff; }
.pd-g .pd-g__pic { inset: 9%; }
.pd-g--one .pd-g__pic img { -webkit-mask-image: none; mask-image: none; }

/* 12.10 (row 37 again, the Operator on look «a» cutting heads and boots: «весь периметр просто взять и уменьшить, чтобы
   фотографии вмещались»): every panel takes its photo's own proportion (--ar, set by js/product.js from the loaded photo),
   so the photo fills it edge to edge — nothing cut, no panel colour, no frame. The row is as tall as the screen allows
   (--g-h); a panel is as wide as its photo at that height, never wider than the row; the row may end in part of the next photo */
.pd-g { --g-h: max(440px, min(700px, calc(100vh - 150px))); }
.pd-g .pd-g__slide, .pd-g--one .pd-g__slide {
  flex: 0 0 auto; width: min(100%, calc(var(--g-h) * var(--ar, 0.6667))); height: auto; aspect-ratio: var(--ar, 0.6667);
  max-height: none; min-height: 0; background: transparent;
}
.pd-g .pd-g__pic { inset: 0; }
.pd-g .pd-g__pic img {
  inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover;
  -webkit-mask-image: none; mask-image: none;
}
.pd-g--none .pd-g__slide { width: 100%; aspect-ratio: 980 / 700; }
@media (max-width: 899px) {
  /* phone and small tablet: a portrait photo leaves room to see the next one peek; the height keeps the price in reach */
  .pd-g { --g-h: min(calc((100vw - 36px) * 1.5), 73svh); }
  .pd-g .pd-g__slide { width: min(calc(100% - 36px), calc(var(--g-h) * var(--ar, 0.6667))); }
  .pd-g--one .pd-g__slide { width: min(100%, calc(var(--g-h) * var(--ar, 0.6667))); }
  .pd-g--none .pd-g__slide { width: 100%; aspect-ratio: 4 / 5; }
}

/* row 42: the page of a product not for sale now */
.pd-none { padding: 150px var(--pad) 120px; display: grid; gap: 22px; justify-items: start; max-width: 900px; }
@media (max-width: 767px) { .pd-none { padding-top: 110px; } }