/* ==========================================================================
   The capsules page.

   Sits on site.css: the header, the hero's v6 language (.hero, .hero__rail,
   .hero__foot, the title type), the Описание spread (.desc*, .prose,
   .pd__more), the pack cards (.pcards, .pcard* - the phone's shop draws
   the same ones) and the reviews (.revs*) all come from there. This file
   has what is this page's own - the hero's left-set title block, the
   flavour chips, the summary bar - and the few adjustments the shared
   parts need on this page.

   The motion: one spring - cubic-bezier(.22,1,.36,1) - for everything that
   lifts, settles or arrives, so a card taking the ring, the bar rising from
   the foot and the tick appearing all move like parts of one system.
   ========================================================================== */

.caps-page { --spring: cubic-bezier(.22, 1, .36, 1); }

/* Arriving by the oil page's switcher: the hero stays out of the page until
   the switch has landed (kapsuli.php's head script, pswitch.js), so the
   switcher stands 14px under the header from the first frame, as the oil
   page draws it. */
html.no-hero-yet .hero--caps { display: none; }
html.no-hero-yet .hero + .pswitch-wrap { padding-top: 14px; }

/* ----------------------------------------------------------- the hero -- */
/* The capsule stands right of centre in the photograph, on its rock in the
   ring; the words keep to the left of it. The title block therefore leaves
   the home hero's centring and takes the left half, and the picture's
   anchor moves so the capsule is still whole at a narrow window. */
.hero--caps .hero__bg { object-position: 58% 50%; }
.hero--caps::after { height: 42%; }
/* a soft dark from the left edge, so white type reads on the bright water;
   z-index 1 because the picture, later in the tree, would paint over a 0 */
.hero--caps::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgb(var(--ink-rgb) / .72) 0%, rgb(var(--ink-rgb) / .42) 34%, transparent 58%);
}

.hero__in--caps {
  grid-template-rows: minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  padding-top: calc(var(--hdr-h) + clamp(24px, 4vh, 56px));
  padding-bottom: clamp(96px, 13vh, 136px);
}
.hero__rail--tr {
  left: auto; right: clamp(24px, 3.4vw, 60px); top: calc(var(--hdr-h) + clamp(40px, 7vh, 88px));
  justify-items: end; text-align: right;
}
.hero__rail--tr .hero__rail-t {
  font-family: var(--mono); font-size: clamp(10px, .72vw, 12.5px);
  letter-spacing: .3em; text-transform: uppercase; line-height: 1.9;
  color: rgb(var(--bone-rgb) / .78);
}

.hero__title--caps {
  text-align: left;
  width: min(100%, 560px);
  max-width: 48%;
}
.hero__kicker {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: clamp(10px, .74vw, 12.5px);
  letter-spacing: .36em; text-transform: uppercase; line-height: 1;
  color: var(--gold);
}
.hero__kicker i { display: block; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--gold-rgb) / .6); }
.hero__title--caps h1 { font-size: clamp(40px, 5.2vw, 84px); line-height: .98; }
.hero__title--caps .hero__sub { margin-top: 1em; }
.hero__lede {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5;
  color: rgb(var(--bone-rgb) / .84);
  text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}
.hero__cta {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.hero__cta .btn--apple { min-height: 52px; padding-inline: 28px; font-size: 15px; }
/* gold, whatever flavour the page is wearing: the hero is the brand's */
.hero__cta .btn--primary { --accent: var(--gold); }
.hero__cta .btn--primary svg { margin-left: 2px; transition: transform .3s var(--spring); }
.hero__cta .btn--primary:hover svg { transform: translateX(4px); }

.hero__badges {
  list-style: none; margin: clamp(26px, 3.2vw, 44px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 36px);
}
.hero__badges li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; line-height: 1.3; color: rgb(var(--bone-rgb) / .8);
}
.hero__badge-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--gold-rgb) / .5); color: var(--gold);
  background: rgb(var(--ink-rgb) / .35); backdrop-filter: blur(6px);
}
.hero__badge-ico svg { width: 20px; height: 20px; }

/* ------------------------------------------------------- the sections -- */
.caps__sec { padding: clamp(56px, 7.5vw, 112px) 0; position: relative; }
.caps__sec--packs {
  background: linear-gradient(to bottom, rgb(var(--surface-rgb) / 0), rgb(var(--surface-rgb) / .55) 18%, rgb(var(--surface-rgb) / .55) 82%, rgb(var(--surface-rgb) / 0));
}
.caps__eyebrow {
  margin: 0 0 var(--s4);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
}
.caps__eyebrow::before, .caps__eyebrow::after {
  content: ''; width: 56px; height: 1px;
  background: linear-gradient(to right, transparent, rgb(var(--gold-rgb) / .6));
}
.caps__eyebrow::after { background: linear-gradient(to left, transparent, rgb(var(--gold-rgb) / .6)); }
.caps__h2 {
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05; letter-spacing: .01em;
  color: #fff;
}
.caps__lede {
  margin: var(--s3) auto 0; text-align: center;
  font-size: clamp(15px, 1.1vw, 17px); color: var(--muted);
}

/* ------------------------------------------------- build your pack -- */
/* One section, two columns: the chosen flavour's picture on the left, the
   two rows of choices and the summary on the right. The heading spans both.

   The rows are buttons with aria-pressed - a flavour chip in the shop
   front's own black-glass language, a pack card with the cut-outs over a
   pool of light - and both answer being chosen the same way: the ring in
   the flavour's colour or gold, a lift on one spring. */
.build__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head head" "stage side";
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
.build__head { grid-area: head; }
.build__stage { grid-area: stage; position: sticky; top: calc(var(--hdr-h) + 24px); }
.build__side { grid-area: side; min-width: 0; }

/* ---- the picture ---- */
/* Five renders stacked, one shown; the change is a cross-fade with a breath
   of scale, so the fruit swaps behind the capsule rather than the whole
   picture blinking. The halo under it is the flavour's colour, faint. */
.build__pic {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(60% 60% at 50% 55%, rgb(var(--gold-rgb) / .1), transparent 70%), var(--ink);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8);
}
.build__halo {
  position: absolute; inset: 20% 12% 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
  filter: blur(24px);
  transition: background .6s var(--ease);
}
.build__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity .55s var(--ease), transform .9s var(--spring);
}
.build__img.is-on { opacity: 1; transform: none; }
.build__meta {
  margin: 18px 0 0; display: flex; justify-content: center; gap: 20px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: rgb(var(--bone-rgb) / .78);
}
.build__meta span { display: inline-flex; align-items: center; gap: 8px; }
.build__meta span + span { padding-left: 20px; border-left: 1px solid rgb(var(--bone-rgb) / .16); }
.build__meta svg { width: 17px; height: 17px; color: var(--gold); }
/* the claim, in the flavour's colour as on the shop front, after the facts */
.build__meta .tag--check { font-size: 12px; padding: .55em 1em; font-family: var(--body); letter-spacing: .06em; }
.build__meta .tag--check svg { width: 1em; height: 1em; color: currentColor; }

/* ---- the steps ---- */
.build__step {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 500; font-variant-numeric: lining-nums;
  font-size: clamp(20px, 1.6vw, 25px); line-height: 1.1; color: #fff;
}
.build__step span { color: var(--gold); margin-right: 4px; }
.build__step + .build__step, .kpick ~ .build__step, .build__note + .build__step { margin-top: clamp(24px, 2.6vw, 36px); }
#oferti { scroll-margin-top: calc(var(--hdr-h) + 20px); }

/* ---- the flavour chips: the shop front's selector, in flow ---- */
.kpick {
  display: flex; gap: 8px;
  padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--surface-rgb) / .985), rgb(var(--ink-rgb) / .985));
  border: 1px solid rgb(var(--bone-rgb) / .10);
  box-shadow: 0 12px 40px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .04);
}
.kchip {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 10px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: rgb(var(--bone-rgb) / .88);
  font: 500 15px/1 var(--body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: .68; filter: saturate(.65);
  transition: transform .26s cubic-bezier(.34, 1.4, .64, 1), opacity .2s var(--ease), filter .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.kchip__ico { display: inline-flex; color: var(--flav, var(--gold)); flex: none; }
.kchip__ico svg { width: 20px; height: auto; display: block; }
.kchip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kchip:hover {
  opacity: 1; filter: saturate(1); transform: translateY(-2px); color: var(--bone);
  border-color: color-mix(in srgb, var(--flav, var(--gold)) 45%, transparent);
  background: color-mix(in srgb, var(--flav, var(--gold)) 10%, transparent);
}
.kchip:active { transform: translateY(0) scale(.965); transition-duration: .08s; }
.kchip[aria-pressed="true"] {
  opacity: 1; filter: saturate(1.15); color: var(--bone);
  border-color: color-mix(in srgb, var(--flav, var(--gold)) 75%, transparent);
  background: color-mix(in srgb, var(--flav, var(--gold)) 11%, rgb(var(--ink-rgb) / .98));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--flav, var(--gold)) 35%, transparent),
              0 0 24px color-mix(in srgb, var(--flav, var(--gold)) 22%, transparent);
}
.kchip:focus-visible { outline: 2px solid var(--flav, var(--gold-soft)); outline-offset: 3px; }
.build__note {
  margin: 12px 4px 0; min-height: 1.5em;
  font-size: 14px; line-height: 1.5; color: var(--muted);
  transition: opacity .25s var(--ease);
}

/* ---- the battery's line ---- */
/* Under the summary, one slim line: the picture, the name with the price,
   the switch (site.css .sw, gold here). Compact on purpose - it is an
   addition to the decision above it, not a rival - and on one rhythm with
   the summary: the same 22px corners, the same hairline, 12px of air
   between them. The whole line is the switch's target; on, it takes a
   gold hairline and the word beside the switch turns gold. */
.kaddon {
  --sw-on: var(--gold);
  --sw-w: 46px; --sw-h: 28px; --sw-k: 22px;
  margin-top: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 18px 8px 16px; border-radius: 22px;
  background: linear-gradient(to right, rgb(var(--surface-rgb) / .85), rgb(var(--ink-rgb) / .85));
  border: 1px solid rgb(var(--bone-rgb) / .1);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.kaddon:hover { border-color: rgb(var(--bone-rgb) / .2); }
.kaddon:active { transform: scale(.995); }
.kaddon:has(.sw[aria-checked="true"]) { border-color: rgb(var(--gold-rgb) / .45); background: linear-gradient(to right, rgb(var(--surface-rgb) / .92), color-mix(in srgb, var(--gold) 5%, rgb(var(--ink-rgb) / .88))); }
.kaddon__pic { height: 34px; width: auto; object-fit: contain; filter: drop-shadow(0 5px 8px rgb(0 0 0 / .55)); }
.kaddon__t { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.kaddon__t b { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.1; color: #fff; }
.kaddon__t span { font-size: 14px; color: rgb(var(--bone-rgb) / .72); overflow: hidden; text-overflow: ellipsis; }
.kaddon__sw { display: inline-flex; align-items: center; gap: 10px; }
.kaddon .sw-lbl { font-size: 14px; }
/* the summary's line for it, gold, under the count */
.sum__batt { font-size: 13px; font-weight: 600; color: var(--gold-soft); }
.sum__batt[hidden] { display: none; }

/* ---- the summary ---- */
/* The choice as one line: the pack's cut-outs, the flavour's name and the
   count, the price with the saving, the button. The figures fade when they
   change; the button is gold as every other call to act on the page. */
.sum {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
  border-radius: 22px;
  background: linear-gradient(to right, rgb(var(--surface-rgb) / .95), rgb(var(--ink-rgb) / .95));
  border: 1px solid rgb(var(--gold-rgb) / .32);
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .04);
}
.sum__art {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  width: 92px; height: 74px; flex: none;
  background: radial-gradient(60% 60% at 50% 100%, rgb(var(--gold-rgb) / .22), transparent 72%);
}
.sum__art img { display: block; width: auto; height: 64px; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .55)); }
.sum__art--5 img { height: 56px; }
.sum__art--10 { --h: 46px; --w: calc(var(--h) * .279); display: grid; grid-template-columns: repeat(5, var(--w)); column-gap: 2px; align-items: end; padding-right: calc(var(--w) * .5); }
.sum__art--10 img { height: var(--h); width: var(--w); }
.sum__art--10 img:nth-child(-n + 5) { margin-bottom: calc(-.5 * var(--h)); transform: translateX(calc(var(--w) * .5 + 1px)) scale(.88); transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)) brightness(.8); }
.sum__what { display: grid; gap: 3px; min-width: 0; overflow: hidden; }
.sum__what b { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum__what > span { font-size: 13.5px; color: rgb(var(--bone-rgb) / .8); }
.sum__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted) !important; }
.sum__meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sum__meta svg { width: 13px; height: 13px; color: var(--gold); }
.sum__price { text-align: right; display: grid; gap: 2px; justify-items: end; }
.sum__price b { font-family: var(--display); font-weight: 600; font-variant-numeric: lining-nums; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; color: #fff; }
.sum__price s { font-size: 13px; color: var(--muted); text-decoration-color: rgb(var(--bone-rgb) / .5); }
.sum__price span { font-size: 13px; font-weight: 600; color: var(--gold-soft); }
.sum__price [hidden] { display: none; }
.sum__ring { --accent: var(--gold); flex: none; }
/* wide enough for its longest word: the label turns to Добавено ✓ for a
   moment, and a button that shrank with it let the whole row reflow */
.sum__add { --accent: var(--gold); width: 100%; min-width: 236px; min-height: 52px; padding-inline: 26px; font-size: 15px; white-space: nowrap; }
.sum__what b, .sum__what > span, .sum__price b, .sum__price s, .sum__price span, .sum__art { transition: opacity .22s var(--ease); }
.sum.is-swapping .sum__what b, .sum.is-swapping .sum__what > span:first-of-type, .sum.is-swapping .sum__price b, .sum.is-swapping .sum__price s, .sum.is-swapping .sum__price span { opacity: 0; }

/* ------------------------------------------------- the description -- */
.caps__desc { padding-top: clamp(40px, 6vw, 96px); }
.caps__desc-flav b { font-weight: 600; color: var(--accent); }
/* the eyebrow follows the chosen flavour's colour with the page's --accent */
.caps__reviews { padding-bottom: clamp(48px, 7vw, 104px); }
.caps__reviews .eyebrow { margin-bottom: var(--s3); }
.caps__reviews > .revs[hidden] { display: none; }

/* ------------------------------------------------------- narrower -- */
@media (max-width: 1280px) {
  .build__in { column-gap: 28px; }
  .kchip { font-size: 14px; gap: 6px; padding: 0 8px; }
  .kchip__ico svg { width: 18px; }
  .sum { gap: 14px; }
  .sum__art { width: 80px; }
}
@media (max-width: 1180px) {
  .hero__rail--tr { display: none; }
  .hero__title--caps { max-width: 54%; }
}
@media (max-width: 1024px) {
  .build__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .kchip__name { font-size: 13px; }
  .sum { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art what price" "add add add"; }
  .sum__art { grid-area: art; } .sum__what { grid-area: what; } .sum__price { grid-area: price; }
  .sum__ring { grid-area: add; }
  .hero__title--caps { max-width: 58%; }
  .hero__title--caps h1 { font-size: clamp(36px, 5vw, 60px); }
}
@media (max-width: 940px) {
  /* the phone's shop is the front's app; here the page only has to stack */
  /* the capsule keeps the top of the screen, the words the bottom, over a
     scrim deep enough for white type - the same answer the phone's home
     hero gives to the same photograph problem */
  .hero--caps { min-height: max(640px, 100svh); margin-top: 0; }
  .hero--caps .hero__bg { object-position: 64% 12%; }
  .hero--caps::before { background: linear-gradient(to bottom, rgb(var(--ink-rgb) / .1) 0%, rgb(var(--ink-rgb) / .3) 30%, rgb(var(--ink-rgb) / .86) 56%, rgb(var(--ink-rgb) / .96) 100%); }
  .hero--caps::after { display: none; }
  .hero__in--caps { padding: clamp(28px, 6vh, 56px) 20px 72px; align-items: end; }
  .hero__title--caps h1 { font-size: clamp(34px, 10.5vw, 44px); }
  .hero__lede { font-size: 15px; }
  .hero__title--caps { max-width: 100%; width: 100%; }
  .hero__foot--r { display: none; }
  .hero__badges { gap: 14px 20px; }
  /* one column: picture, then the choices */
  .build__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "side"; row-gap: 24px; }
  .build__stage { position: static; max-width: 420px; margin-inline: auto; width: 100%; }
  .build__meta { flex-wrap: wrap; gap: 10px 16px; }
  .build__meta span + span { padding-left: 0; border-left: 0; }
  .kpick { flex-wrap: wrap; border-radius: 24px; }
  .kchip { flex: 1 1 30%; }
  .sum { padding: 16px; }
}
@media (max-width: 480px) {
  .hero__cta .btn--apple { width: 100%; }
  .kaddon { gap: 10px; padding: 8px 12px 8px 12px; }
  .kaddon__pic { height: 30px; }
  .kaddon__t { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  .kaddon__t b { font-size: 17px; }
  .kaddon__t span { font-size: 12.5px; }
  .kaddon .sw-lbl { display: none; }
  .sum { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art what" "price price" "add add"; }
  .sum__price { justify-items: start; text-align: left; }
  .kchip { flex: 1 1 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .kchip, .build__img, .hero__cta svg, .kaddon { transition: none; }
  .kchip:hover, .kaddon:active { transform: none; }
}