/* GlorySmile — product page (body[data-page='product']): product.html?id=… and the <slug>.html pages. "V34 Night".
   Bands: gallery + sticky buy box on the violet base, product story and facts in the night room,
   the steps (or, for the Glory Kit, what is inside) on the alternate band, "Комбинирай" back on the base.
   LED (product.dark) moves the top, story and steps into the dark room via .is-night (blue light, not violet). */

/* ---------- Top: gallery + buy box ---------- */
.pdp-top { position: relative; isolation: isolate; padding-top: clamp(1rem, 3vw, 3rem); padding-bottom: clamp(4rem, 9vw, 8rem); }
/* the light source: an ultraviolet bloom behind the gallery (inside the band, so it never widens the page) */
.pdp-top::before {
  content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: min(100%, 72rem); pointer-events: none;
  background: radial-gradient(48% 46% at 40% 38%, rgba(108, 59, 255, 0.36), rgba(108, 59, 255, 0) 72%);
}
.pdp-top__in { display: grid; gap: clamp(1.75rem, 5vw, 3rem); }
@media (min-width: 900px) {
  .pdp-top__in {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5.5vw, 6.5rem); align-items: start;
  }
  .pdp-buy { position: sticky; top: calc(var(--sticky-top) + 2rem); transition: top 0.35s var(--ease); }
}

/* Gallery */
.pdp-gallery { display: grid; gap: 1rem; min-width: 0; }
.pdp-gallery__track { position: relative; display: grid; }
.pdp-slide { margin: 0; aspect-ratio: 1; }
.pdp-slide > img { object-fit: cover; }
/* a hairline of light defines the frame on the violet base (inset: never clipped by the swipe row) */
.pdp-slide::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(169, 139, 255, 0.18);
}

@media (min-width: 900px) {
  /* Stacked slides, one visible: thumbnails swap the main image */
  .pdp-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
  .pdp-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
  .pdp-gallery__track { border-radius: var(--r-soft); box-shadow: 0 50px 110px -50px rgba(108, 59, 255, 0.9); }
}
@media (max-width: 899px) {
  /* Swipeable full-bleed row with a peek of the next image */
  .pdp-gallery { margin-inline: calc(var(--gutter) * -1); }
  .pdp-gallery__track {
    display: flex; gap: 0.625rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .pdp-gallery__track::-webkit-scrollbar { display: none; }
  .pdp-slide { flex: 0 0 min(86%, 34rem); scroll-snap-align: start; }
  .pdp-gallery__thumbs { padding-inline: var(--gutter); }
}

/* Thumbnails carry the shape language: soft = packshot, arch = world, circle = macro */
.pdp-gallery__thumbs { display: flex; align-items: flex-end; gap: 0.75rem; padding-block: 5px; }
.pdp-thumb {
  --t: 84px;
  flex: none; height: var(--t); width: var(--t); padding: 0;
  opacity: 0.55; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.22);
  transition: opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pdp-thumb--soft { border-radius: 18px; }
.pdp-thumb--arch { width: calc(var(--t) * 0.75); border-radius: 999px 999px 14px 14px; }
.pdp-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb[aria-pressed='true'] { opacity: 1; box-shadow: 0 0 0 3px var(--base), 0 0 0 4.5px var(--violet-hi), 0 0 22px 2px rgba(169, 139, 255, 0.45); }
@media (max-width: 899px) { .pdp-thumb { --t: 60px; } .pdp-thumb--soft { border-radius: 14px; } }

/* Buy box */
/* container-type lets the h1 scale to the column: the longest single word ("Моментален")
   is ~7.8em wide in Unbounded, so 12.5cqi always fits without breaking mid-word */
.pdp-buy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; container-type: inline-size; }
.pdp-buy__title { font-size: min(var(--t-2xl), 12.5cqi); overflow-wrap: normal; }
.pdp-buy__tagline { margin-top: 1rem; }
.pdp-buy__highlights { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.pdp-buy__highlights li { display: flex; align-items: center; gap: 0.65rem; font-size: var(--t-s); }
.pdp-buy__highlights svg { width: 18px; height: 18px; flex: none; color: var(--lilac); }

/* Price + what is in the box on one baseline, split by a hairline */
.pdp-buy__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pdp-buy__price { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1; }
.pdp-buy__size {
  padding-left: 1.25rem; border-left: 1px solid rgba(169, 139, 255, 0.4);
  font-size: var(--t-m); font-weight: 500; line-height: 1.2; color: var(--text-2);
}
/* Glory Kit: GS.kitPriceHTML() (the price + the honest sum of the separate prices) */
.pdp-buy__kitprice .kitprice { gap: 0.6rem; }
.pdp-buy__kitprice .kitprice__now { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
.pdp-buy__kitprice .kitprice__sep { font-size: var(--t-m); }
.pdp-buy__ship { margin-top: 0.75rem; font-size: var(--t-s); color: var(--text-2); }

.pdp-buy__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.pdp-qty { min-height: 56px; padding-inline: 4px; }
.pdp-qty button { width: 48px; height: 48px; }
.pdp-qty output { font-size: var(--t-l); min-width: 2.2ch; }
.pdp-buy__add { flex: 1 1 12rem; padding-inline: 1.25rem; box-shadow: 0 18px 46px -16px rgba(108, 59, 255, 0.95); }
@media (max-width: 479px) {
  /* qty + button share one row on 360px+ phones; they stack only below that */
  .pdp-buy__actions { gap: 0.5rem; }
  .pdp-qty { padding-inline: 2px; }
  .pdp-qty button { width: 44px; height: 44px; }
  .pdp-buy__add { padding-inline: 1rem; }
}

.pdp-perks { list-style: none; padding: 0; margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 0.35rem; }
.pdp-perks li { display: flex; align-items: center; gap: 0.85rem; min-height: 40px; font-size: var(--t-s); color: var(--text-2); }
.pdp-perks svg { width: 26px; height: 26px; flex: none; color: var(--violet-hi); }

.pdp-acc { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- Product story: the photographed room beside facts and practical benefits ---------- */
.pdp-proof { padding-block: var(--section); background: var(--night); color: var(--text); }
.pdp-proof__in { display: grid; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.pdp-proof__media { margin: 0; width: 100%; max-width: 32rem; justify-self: center; border-radius: 50% 50% 24px 24px; overflow: hidden; }
.pdp-proof__media img { display: block; width: 100%; height: auto; }
.pdp-proof__body { min-width: 0; }
.pdp-proof__title { font-size: var(--t-2xl); max-width: 15ch; }
.pdp-proof__story { margin-top: 1.25rem; color: var(--text-2); max-width: 48ch; }
.pdp-proof__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; padding-block: 1.5rem; border-block: 1px solid rgba(169, 139, 255, 0.25); }
.pdp-proof__fact { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.pdp-proof__fact dt { order: 1; font-size: var(--t-xs); line-height: 1.4; color: var(--text-2); }
.pdp-proof__fact dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -0.04em; white-space: nowrap; }
.pdp-proof__note { margin-top: 0.75rem; font-size: var(--t-xs); color: var(--text-2); }
.pdp-proof__features { list-style: none; padding: 0; display: grid; gap: 1.5rem; margin-top: 2rem; }
.pdp-proof__features h3 { font-family: var(--f-text); font-size: var(--t-m); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.pdp-proof__features p { max-width: 52ch; margin-top: 0.45rem; font-size: var(--t-s); color: var(--text-2); }
@media (min-width: 900px) {
  .pdp-proof__in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
@media (max-width: 899px) {
  .pdp-proof__body { order: -1; }
  .pdp-proof__title { max-width: 16ch; }
  .pdp-proof__media { max-width: 24rem; }
}
@media (max-width: 479px) {
  .pdp-proof__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-proof__fact:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .pdp-proof__media { max-width: 18rem; }
}

/* ---------- Steps: a real numbered sequence, each number in its own lit ring ---------- */
.pdp-steps { --mark: clamp(88px, 11vw, 168px); padding-block: var(--section); background: var(--base-2); }
.pdp-steps__title { font-size: var(--t-2xl); }
.pdp-steps__list { list-style: none; padding: 0; display: grid; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 5.5rem); }
.pdp-step { position: relative; display: grid; align-items: center; grid-template-columns: var(--mark) 1fr; gap: 1.5rem; }
.pdp-step__mark {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--mark); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(169, 139, 255, 0.7);
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.42), rgba(108, 59, 255, 0.06)), var(--base-2);
  box-shadow: 0 0 44px -8px rgba(108, 59, 255, 0.85), inset 0 0 26px rgba(169, 139, 255, 0.16);
  font-family: var(--f-display); font-weight: 200; font-size: calc(var(--mark) * 0.42); letter-spacing: -0.04em; line-height: 1;
}
.pdp-step__text { font-size: var(--t-l); font-weight: 500; line-height: 1.3; max-width: 18ch; }
.pdp-step__detail { margin-top: 0.75rem; max-width: 34ch; font-size: var(--t-s); color: var(--text-2); }
.pdp-steps__note { margin-top: 2.5rem; font-size: var(--t-xs); color: var(--text-2); }
/* Connector: vertical on phones, horizontal through the circle centres on desktop */
.pdp-step:not(:last-child)::before {
  content: ''; position: absolute; z-index: 0; background: rgba(169, 139, 255, 0.34);
  left: calc(var(--mark) / 2); top: 50%; width: 1.5px; height: calc(100% + 2rem);
}
@media (min-width: 900px) {
  .pdp-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
  .pdp-step { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .pdp-step:not(:last-child)::before {
    left: var(--mark); top: calc(var(--mark) / 2); height: 1.5px;
    width: calc(100% - var(--mark) + clamp(1.5rem, 3vw, 3rem));
  }
}

/* ---------- Glory Kit: what is inside (in place of the steps) ---------- */
.pdp-inside { padding-block: var(--section); background: var(--base-2); }
.pdp-inside__title { font-size: var(--t-2xl); }
.pdp-inside__list { list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 4.5rem); display: grid; }
.pdp-inside__item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; column-gap: 1.1rem;
  min-height: 96px; padding-block: 0.75rem; border-bottom: 1px solid rgba(169, 139, 255, 0.18);
  text-decoration: none;
}
.pdp-inside__list li:first-child .pdp-inside__item { border-top: 1px solid rgba(169, 139, 255, 0.18); }
.pdp-inside__img {
  width: 72px; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3), 0 12px 30px -12px rgba(108, 59, 255, 0.95);
  transition: box-shadow 0.3s var(--ease);
}
.pdp-inside__img img { transition: transform 0.6s var(--ease); }
.pdp-inside__name { font-weight: 600; font-size: var(--t-m); line-height: 1.25; }
.pdp-inside__price { font-size: var(--t-m); color: var(--text-2); }
@media (max-width: 359px) { .pdp-inside__item { column-gap: 0.75rem; } .pdp-inside__name, .pdp-inside__price { font-size: var(--t-s); } }
.pdp-inside__item:hover .pdp-inside__name { color: var(--lilac); }
.pdp-inside__item:hover .pdp-inside__img { box-shadow: 0 0 0 1.5px var(--violet-hi), 0 14px 36px -10px rgba(108, 59, 255, 1); }
.pdp-inside__item:hover .pdp-inside__img img { transform: scale(1.06); }
@media (min-width: 900px) {
  /* five lit circles in a row, name and price under each */
  .pdp-inside__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); }
  .pdp-inside__item {
    grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0.4rem; text-align: center;
    min-height: 0; padding: 0; border: 0;
  }
  .pdp-inside__list li:first-child .pdp-inside__item { border-top: 0; }
  .pdp-inside__img { width: 100%; margin-bottom: 0.9rem; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3), 0 30px 70px -30px rgba(108, 59, 255, 1); }
  .pdp-inside__item:hover .pdp-inside__img { box-shadow: 0 0 0 1.5px var(--violet-hi), 0 30px 80px -24px rgba(108, 59, 255, 1); }
}

/* The kit's closing action: the price against the sum above, the same button as the buy box */
.pdp-inside__buy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid rgba(169, 139, 255, 0.18);
}
.pdp-inside__price-all .kitprice__now { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
.pdp-inside__add { box-shadow: 0 18px 46px -16px rgba(108, 59, 255, 0.95); }
@media (max-width: 599px) { .pdp-inside__add { width: 100%; } }
@media (max-width: 899px) { .pdp-inside__buy { border-top: 0; } }   /* the list's last hairline already closes it */

/* ---------- Комбинирай ---------- */
.pdp-more { padding-block: var(--section); }
.pdp-more__title { font-size: var(--t-2xl); }
.pdp-more__list {
  list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 2vw, 1.5rem); row-gap: clamp(2.25rem, 5vw, 3rem);
}
@media (min-width: 900px) { .pdp-more__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pdp-tile .tile__name { font-family: var(--f-text); font-weight: 600; letter-spacing: -0.01em; font-size: var(--t-m); }
.pdp-tile .tile__media img { object-fit: cover; }
.pdp-tile .tile__name a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.pdp-tile:has(.tile__name a:focus-visible) .tile__media { outline: 3px solid var(--violet-hi); outline-offset: 4px; }
.pdp-tile .tile__name a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; }
/* LED tile: the night packshot with a blue edge, but the same rhythm as the others (no card) */
.pdp-tile.tile--night { background: none; border-radius: 0; overflow: visible; padding-bottom: 0; box-shadow: none; color: inherit; }
.pdp-tile.tile--night .tile__media { border-radius: var(--r-soft); box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.24); }
.pdp-tile.tile--night:hover .tile__media { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.55), 0 30px 80px -30px rgba(61, 139, 255, 0.75); }
.pdp-tile.tile--night .tile__row { padding-inline: 0; }
.pdp-tile.tile--night :focus-visible { outline-color: var(--violet-hi); }
@media (max-width: 639px) {
  .pdp-tile { gap: 0.75rem; container-type: inline-size; }
  .pdp-tile .tile__name, .pdp-tile .tile__price { font-size: var(--t-s); }
  .pdp-tile .tile__name { line-height: 1.25; }
  /* the "+" floats on the image corner, so the name gets the full tile width (100cqi = square media height) */
  .pdp-tile .icon-btn { position: absolute; right: 8px; top: 8px; top: calc(100cqi - 52px); width: 44px; height: 44px; }
}

/* ---------- Dark room (LED): blue light instead of violet ---------- */
.is-night { background: var(--night); color: var(--text); }
.pdp-top.is-night::before { background: radial-gradient(48% 46% at 40% 38%, rgba(61, 139, 255, 0.22), rgba(61, 139, 255, 0) 72%); }
.is-night .pdp-gallery__track { box-shadow: 0 50px 110px -50px rgba(61, 139, 255, 0.55); }
.is-night .pdp-slide::after { box-shadow: inset 0 0 0 1px rgba(61, 139, 255, 0.22); }
.is-night .pdp-slide, .is-night .pdp-thumb { background: var(--night); }
.is-night .pdp-thumb { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.24); }
.is-night .pdp-thumb[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--night), 0 0 0 4.5px var(--glow), 0 0 22px 2px rgba(61, 139, 255, 0.5); }
.is-night .pdp-buy__size { border-color: rgba(61, 139, 255, 0.45); }
.is-night .pdp-perks svg { color: #7FB2FF; }
.is-night .qty { border-color: rgba(127, 178, 255, 0.36); }
.is-night .acc, .is-night .acc details { border-color: rgba(127, 178, 255, 0.2); }
.is-night .acc summary::after { border-color: #7FB2FF; }
.is-night .pdp-buy__add { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.45), 0 16px 44px -10px rgba(61, 139, 255, 0.8); }
.is-night .pdp-buy__highlights svg { color: #7FB2FF; }
.pdp-proof.is-night .pdp-proof__facts { border-color: rgba(127, 178, 255, 0.3); }
.pdp-steps.is-night { background: var(--night); }
.is-night .pdp-step__mark {
  border-color: var(--glow);
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0.24), rgba(61, 139, 255, 0.03)), var(--night);
  box-shadow: 0 0 34px rgba(61, 139, 255, 0.5), inset 0 0 22px rgba(61, 139, 255, 0.3);
}
.is-night .pdp-step:not(:last-child)::before { background: rgba(61, 139, 255, 0.45); }

/* Header joins the dark room on the LED page; main loses its top padding so night runs under it.
   product.js adds .pdp-day once the violet "Комбинирай" reaches the header: the standard header returns. */
body[data-page='product'].pdp-dark main { padding-top: 0; }
body[data-page='product'].pdp-dark .pdp-top { padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 3rem)); }
body[data-page='product'].pdp-dark:not(.pdp-day) .site-header {
  background: rgba(10, 6, 32, 0.84);   /* no color-mix(): Safari < 16.2 */
  background: color-mix(in srgb, var(--night) 84%, transparent); color: var(--text);
  box-shadow: 0 1px 0 rgba(61, 139, 255, 0.18);
}
body[data-page='product'].pdp-dark:not(.pdp-day) .site-header :focus-visible { outline-color: var(--text); }
body[data-page='product'].pdp-dark:not(.pdp-day) .cart-btn:hover,
body[data-page='product'].pdp-dark:not(.pdp-day) .menu-btn:hover { background: var(--text); color: var(--night); border-color: var(--text); }

/* ---------- Sticky buy bar (phones) ---------- */
.buybar {
  position: fixed; z-index: 40; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem;
  border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.34), 0 20px 50px -14px rgba(5, 2, 18, 0.9), 0 0 40px -12px rgba(108, 59, 255, 0.8);
  transform: translateY(calc(100% + 2rem)); visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.buybar.is-on { transform: none; visibility: visible; transition: transform 0.45s var(--ease); }
.buybar__img { width: 48px; flex: none; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3); }
.buybar__meta { display: grid; margin-right: auto; min-width: 0; line-height: 1.15; }
.buybar__name { font-size: var(--t-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-size: var(--t-m); }
.buybar__add { min-height: 50px; padding: 0.7rem 1.35rem; font-size: var(--t-s); }
.buybar--night { background: var(--night); box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.4), 0 20px 50px -14px rgba(0, 0, 0, 0.9), 0 0 40px -12px rgba(61, 139, 255, 0.6); }
.buybar--night .buybar__img { background: var(--night); box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.35); }
.buybar--night :focus-visible { outline-color: var(--text); }
/* the narrowest phones: the bar keeps name, price and the whole button */
@media (max-width: 479px) { .buybar__img { display: none; } .buybar { padding-left: 1rem; } .buybar__add { padding-inline: 1rem; font-size: var(--t-xs); } }
@media (min-width: 900px) { .buybar { display: none; } }
/* Room under the footer so the bar never hides its last line, and keyboard focus scrolled to the
   bottom edge stops above the bar (WCAG 2.4.11). product.css loads only on product pages. */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body[data-page='product'] .footer__base { padding-bottom: calc(1.5rem + 76px + env(safe-area-inset-bottom)); }
}

/* ---------- Not found ---------- */
.pdp-missing {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: grid; justify-items: center; align-content: center; gap: 1.75rem;
  text-align: center; padding-block: clamp(4rem, 10vw, 8rem);
}
.pdp-missing::before {
  content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(40% 36% at 50% 42%, rgba(108, 59, 255, 0.4), rgba(108, 59, 255, 0) 72%);
}
.pdp-missing__halo { --size: min(78vw, 560px); --ring: 3px; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: -1; }
.pdp-missing__title { font-size: var(--t-2xl); max-width: 11ch; }
.pdp-missing__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; margin-top: 1.5rem; }
.pdp-missing__item { display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; font-size: var(--t-s); font-weight: 600; min-width: 64px; color: var(--text-2); }
.pdp-missing__item .frame { width: clamp(56px, 7vw, 80px); box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3); transition: box-shadow 0.25s var(--ease); }
.pdp-missing__item:hover { color: var(--text); }
.pdp-missing__item:hover .frame { box-shadow: 0 0 0 2px var(--violet-hi), 0 0 24px rgba(169, 139, 255, 0.5); }
@media (max-width: 479px) {
  /* five in one row on phones */
  .pdp-missing__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; width: 100%; }
  .pdp-missing__item { min-width: 0; font-size: var(--t-xs); }
  .pdp-missing__item .frame { width: min(100%, 60px); }
}

/* ---------- Card marks under the perks (only when SITE.payCards lists cards) ---------- */
.pdp-cards { justify-content: flex-start; margin-top: 1rem; }

/* ---------- A useful choice: actual formats, readable values, one highlighted column ---------- */
.pdp-vs { padding-block: var(--section); }
.pdp-vs__in { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pdp-vs__title { font-size: clamp(2.25rem, 4vw, 4rem); max-width: 11ch; text-wrap: balance; }
.pdp-vs__intro { margin-top: 1.5rem; max-width: 40ch; color: var(--text-2); }
.pdp-vs__link { display: inline-block; margin-top: 1.25rem; font-size: var(--t-s); text-underline-offset: 0.3em; }
.pdp-vs__comparison { min-width: 0; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs thead th { width: 36%; padding: 1.2rem 0.65rem; font-size: var(--t-s); font-weight: 600; text-align: center; line-height: 1.3; }
.vs thead th:first-child { width: 28%; }
.vs thead .vs__them { color: var(--text-2); }
.vs tbody th {
  padding: 1.2rem 0.85rem 1.2rem 0; text-align: left; font-weight: 500; font-size: var(--t-s); line-height: 1.4;
  border-bottom: 1px solid rgba(169, 139, 255, 0.18);
}
.vs tbody tr:first-child th, .vs tbody tr:first-child .vs__them { border-top: 1px solid rgba(169, 139, 255, 0.18); }
.vs td { padding: 1.2rem 0.85rem; text-align: center; vertical-align: middle; font-size: var(--t-s); line-height: 1.4; border-bottom: 1px solid rgba(169, 139, 255, 0.18); }
.vs .vs__us { background: linear-gradient(180deg, rgba(108, 59, 255, 0.5), rgba(108, 59, 255, 0.22)); border-bottom-color: rgba(251, 249, 255, 0.14); }
.vs thead .vs__us {
  border-radius: 24px 24px 0 0; background: var(--ultra); color: var(--on-accent);
  box-shadow: 0 -10px 40px -12px rgba(108, 59, 255, 0.9); font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em;
}
.vs tbody tr:last-child .vs__us { border-radius: 0 0 24px 24px; border-bottom: 0; }
.vs__price td { font-family: var(--f-display); font-size: clamp(1rem, 1.5vw, 1.5rem); white-space: nowrap; }
@media (min-width: 900px) {
  .pdp-vs__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
/* phones: tighter cells, but table text stays at 14px (reading text, not labels) */
@media (max-width: 479px) {
  .vs thead th { font-size: 0.875rem; padding-inline: 0.35rem; }
  .vs td { padding-inline: 0.4rem; font-size: 0.875rem; }
  .vs tbody th { font-size: 0.875rem; padding-right: 0.4rem; }
  .vs__price td { font-size: 1rem; }
}
/* LED: the same pillar in blue light */
.pdp-vs.is-night .vs__us { background: linear-gradient(180deg, rgba(61, 139, 255, 0.36), rgba(61, 139, 255, 0.14)); }
.pdp-vs.is-night .vs thead .vs__us { background: #1F5FD6; box-shadow: 0 -10px 40px -12px rgba(61, 139, 255, 0.85); }
.pdp-vs.is-night :is(.vs tbody th, .vs td) { border-color: rgba(127, 178, 255, 0.2); }

/* Kit price chart: widths represent the two real catalogue totals. */
.pdp-cost { margin: 2.5rem 0 0; }
.pdp-cost figcaption { font-size: var(--t-m); font-weight: 600; }
.pdp-cost__row { margin-top: 1.4rem; }
.pdp-cost__row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-s); }
.pdp-cost__track { display: block; height: 12px; margin-top: 0.6rem; background: rgba(169, 139, 255, 0.12); border-radius: 99px; overflow: hidden; }
.pdp-cost__track > span { display: block; height: 100%; background: var(--text-2); border-radius: inherit; }
.pdp-cost__row--kit .pdp-cost__track > span { background: var(--lilac); }
.pdp-cost > p { margin-top: 1rem; font-size: var(--t-xs); color: var(--text-2); }
/* Phones: spec labels and the notes (incl. the usage and limits pointer) never below 14px */
@media (max-width: 639px) {
  .pdp-proof__fact dt, .pdp-proof__note, .pdp-steps__note, .pdp-cost > p { font-size: 0.875rem; }
}

/* ---------- Въпроси: short list next to the buying decision ---------- */
.pdp-faq { padding-block: var(--section); }
.pdp-faq:not(.is-night) { background: var(--base-2); }
.pdp-faq__in { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.pdp-faq__title { font-size: var(--t-2xl); }
.pdp-faq__more { margin-top: 1rem; color: var(--text-2); }
.pdp-faq__more a { font-weight: 600; color: var(--text); text-decoration-color: var(--violet-hi); }
.pdp-faq__more a:hover { color: var(--lilac); }
.pdp-faq__acc summary { font-size: var(--t-m); }
.pdp-sources { padding-left: 1.25rem; margin-bottom: 0.75rem; }
.pdp-sources a { text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .pdp-faq__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}