/* GlorySmile — product page (body[data-page='product']): product.html?id=… and the <slug>.html pages.
   Gallery + sticky buy box, full-bleed world band, steps, "Комбинирай", mobile buy bar.
   LED (product.dark) switches the top area, the world band and the steps band to the dark room via .is-night. */

/* ---------- Top: gallery + buy box ---------- */
.pdp-top { padding-top: clamp(1rem, 3vw, 3rem); padding-bottom: clamp(4rem, 9vw, 8rem); }
.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(--header-h) + 2rem); }
}

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

@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); }
}
@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; }
.pdp-thumb {
  --t: 84px;
  flex: none; height: var(--t); width: var(--t); padding: 0;
  opacity: 0.62; 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(--enamel), 0 0 0 4.5px var(--ultra); }
@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__price { font-size: var(--t-xl); margin-top: clamp(1.25rem, 2.6vw, 2.25rem); }
.pdp-buy__ship { margin-top: 0.4rem; font-size: var(--t-s); color: var(--ink-2); }
.pdp-buy__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.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; }
@media (max-width: 479px) {
  /* qty + button share one row on 375px+ 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(--ink-2); }
.pdp-perks svg { width: 26px; height: 26px; flex: none; color: var(--ultra); }

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

/* ---------- World band ----------
   Phones + tablets: the tagline on the band's own colour, the whole photo under it (no text on the photo:
   every portrait is busy from top to bottom). The photo's top edge melts into the band.
   Desktop: full-bleed band; the portrait fills the right side and dissolves into the band colour on the left,
   so the huge tagline always sits on a calm field. The photo is never wider than 0.8 x the band height,
   so wide screens crop little of it and the text never reaches it. */
.pdp-world {
  --y: 40%;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; color: var(--ink); background: var(--mist);
}
.pdp-world--led { color: var(--pearl); background: var(--night); }
.pdp-world__in { order: -1; display: flex; padding-block: clamp(3.5rem, 10vw, 6rem) clamp(1rem, 3vw, 2rem); }
.pdp-world__line { font-size: min(var(--t-3xl), 11.5vw); max-width: 9.5ch; line-height: 0.95; overflow-wrap: normal; }   /* phones: 'Светлина за' fits on one line */
.pdp-world__img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% var(--y);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
@media (min-width: 600px) and (max-width: 899px) {
  /* Tablets: a 4:5 crop that stays within one screen instead of a 1150px portrait */
  .pdp-world__img { aspect-ratio: 4 / 5; max-height: 75vh; max-height: 75svh; }
}
/* Vertical crop per product (tablets + desktop; phones show the whole portrait) */
.pdp-world--strips { --y: 57%; }
.pdp-world--paste { --y: 55%; }   /* the whole tube: violet cap and crimp both in frame */
.pdp-world--corrector { --y: 25%; }
.pdp-world--brush { --y: 8%; }
.pdp-world--led { --y: 15%; }

@media (min-width: 900px) {
  .pdp-world { flex-direction: row; height: min(100svh, 64rem); min-height: 40rem; }
  .pdp-world__img {
    position: absolute; top: 0; right: 0; z-index: -1;
    height: 100%; aspect-ratio: auto;
    width: min(58%, max(32rem, min(80vh, 51.2rem)));
    width: min(58%, max(32rem, min(80svh, 51.2rem)));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36%);
            mask-image: linear-gradient(to right, transparent, #000 36%);
  }
  .pdp-world__in { order: 0; align-items: center; padding-block: clamp(1.75rem, 6vw, 5.5rem); }
  .pdp-world__line { font-size: min(var(--t-3xl), 6.8vw, 7rem); }
  /* LED: the ring fills almost the whole photo, so the photo is narrower and the line smaller */
  .pdp-world--led .pdp-world__img {
    width: min(46%, max(32rem, min(80vh, 51.2rem)));
    width: min(46%, max(32rem, min(80svh, 51.2rem)));
  }
  .pdp-world--led .pdp-world__line { font-size: min(var(--t-3xl), 5.6vw, 6.5rem); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* small laptops: the photo takes a bigger share of the band, so the line steps down */
  .pdp-world__line { font-size: min(var(--t-3xl), 5.6vw); }
}

/* ---------- Steps: a real numbered sequence ---------- */
.pdp-steps { --mark: clamp(88px, 11vw, 168px); padding-block: var(--section); background: var(--pearl); }
.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 var(--ink); background: var(--pearl);
  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; }
/* Connector: vertical on phones, horizontal through the circle centres on desktop */
.pdp-step:not(:last-child)::before {
  content: ''; position: absolute; z-index: 0; background: var(--mist);
  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));
  }
}

/* ---------- Комбинирай ---------- */
.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; }
@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; }
  .pdp-tile .icon-btn { position: absolute; right: 8px; top: 8px; top: calc(100cqi - 52px); width: 44px; height: 44px; }
}

/* ---------- Dark room (LED) ---------- */
.is-night { background: var(--night); color: var(--pearl); }
.is-night .lead, .is-night .pdp-perks li { color: rgba(255, 255, 255, 0.72); }
.is-night .pdp-perks svg { color: var(--glow); }
.is-night .acc, .is-night .acc details { border-color: rgba(255, 255, 255, 0.14); }
.is-night .acc details > div { color: rgba(255, 255, 255, 0.72); }
.is-night .qty { background: transparent; border-color: rgba(255, 255, 255, 0.24); }
.is-night .qty button:hover { background: rgba(255, 255, 255, 0.08); }
.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-thumb[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--night), 0 0 0 4.5px var(--glow); }
/* Packshot in the dark: the night packshot (product.imgDark) as it is, no multiply */
.is-night .pdp-slide, .is-night .pdp-thumb { background: var(--night); }
.is-night .shot > img { mix-blend-mode: normal; }
.is-night .pdp-buy__ship { color: rgba(255, 255, 255, 0.72); }
.pdp-steps.is-night { background: var(--night); }
.is-night .pdp-step__mark {
  background: var(--night); border-color: var(--glow);
  box-shadow: 0 0 28px rgba(61, 139, 255, 0.55), inset 0 0 22px rgba(61, 139, 255, 0.35);
}
.is-night .pdp-step:not(:last-child)::before { background: rgba(61, 139, 255, 0.4); }

/* 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 light "Комбинирай" 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(13, 10, 36, 0.82);   /* no color-mix(): Safari < 16.2 */
  background: color-mix(in srgb, var(--night) 82%, transparent); color: var(--pearl);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-page='product'].pdp-dark:not(.pdp-day) .site-header :focus-visible { outline-color: var(--pearl); }
body[data-page='product'].pdp-dark:not(.pdp-day) .cart-btn:hover { background: var(--pearl); color: var(--night); border-color: var(--pearl); }

/* ---------- 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: 1rem; padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  border-radius: var(--r-pill); background: var(--pearl); color: var(--ink);
  box-shadow: 0 0 0 1px var(--mist), 0 18px 50px -12px rgba(26, 20, 56, 0.35);
  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__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(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-size: var(--t-l); }
.buybar__add { min-height: 50px; padding: 0.7rem 1.35rem; font-size: var(--t-s); }
.buybar--night { background: var(--night); color: var(--pearl); box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.35), 0 18px 50px -12px rgba(61, 139, 255, 0.5); }
.buybar--night .buybar__name { color: rgba(255, 255, 255, 0.7); }
.buybar--night :focus-visible { outline-color: var(--pearl); }
@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__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; }
.pdp-missing__item .frame { width: clamp(56px, 7vw, 80px); transition: box-shadow 0.25s var(--ease); }
.pdp-missing__item:hover .frame { box-shadow: 0 0 0 2px var(--ultra); }
@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); }
}