/* nabory.css — «Наборы и подарки» of the 017 demo (build P6, agent cart, 27.09.2026). Language of the homepage (DESIGN.md):
   paper, one-ink engraving, waves on the joins, sea decor. Blocks: 4.B1 hero plate (R22, R25) · 4.B2 sets (R14 flying, R21, R25)
   · 4.B3 gift: the tin as decoration on cobalt (R08) · 4.B4 companies. Only transform and opacity are animated. */

/* ---------- 4.B1 hero: the holiday platter as a round plate ---------- */
.nh { position: relative; padding: 30px 0 150px; overflow: hidden; }
.nh .pattern { opacity: .07; }
.nh__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.nh__text { position: relative; z-index: 3; max-width: 640px; }
.nh .crumbs { margin-bottom: 6px; }
.dateline { display: flex; gap: 22px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); width: max-content; margin: 26px 0 28px; }
.dateline span + span::before { content: "◆"; font-size: 8px; margin-right: 22px; color: var(--red); vertical-align: 2px; }
.nh__t { font: 500 clamp(50px, 5vw, 78px)/.95 var(--serif); letter-spacing: -.012em; margin: 0; }
.nh__t em { display: block; font-style: italic; font-weight: 400; color: var(--cobalt); }
.nh__prod { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ink-3); max-width: 560px; }
.nh__name { font: 500 28px/1.1 var(--serif); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(22, 36, 94, .3); }
.nh__lines { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.nh__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 34px; }
.nh__price { margin: 0; }
.nh__price span { display: block; margin-bottom: 8px; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.nh__price b { font: 500 50px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.nh__cta { display: inline-block; padding: 16px; margin: -16px; }

.nh__plate { position: relative; width: min(43vw, 600px); aspect-ratio: 1; margin: 24px 6px 0 0; }
.nh__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 12px var(--paper), 0 0 0 13.5px var(--ink), 0 60px 100px -40px rgba(13, 26, 69, .6); will-change: transform; }
.nh__disc img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.nh__ring { position: absolute; inset: -8.4%; pointer-events: none; animation: nb-spin 140s linear infinite; }
.nh__ring svg { width: 100%; height: 100%; overflow: visible; }
.nh__ring text { font: 600 13px var(--sans); letter-spacing: .24em; text-transform: uppercase; fill: var(--ink); }
.nh__dot { z-index: 4; }
.nh__dot .dot__card { min-width: 0; white-space: nowrap; }
.nh__dot .dot__card b { font-size: 21px; }
.nh__dot .dot__card em { font-style: normal; }
.nh__dot--gift .dot__card { top: -32px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; }
.nh__dot--gift .dot__card img { width: 46px; height: auto; flex: none; }
.nh__dot--gift .dot__card b { font-size: 19px; }
.nh__gull { width: 170px; left: 43%; top: 26px; opacity: .75; z-index: 1; }
.nh__shell { width: 110px; left: 30%; bottom: 70px; opacity: .45; transform: rotate(-14deg); z-index: 1; }

/* ---------- 4.B2 sets ---------- */
.sets { padding-top: 110px; padding-bottom: 170px; }
.sets .head { margin-bottom: 80px; }
.sets__nav { justify-content: flex-end; max-width: 560px; }
.sets__list { position: relative; z-index: 2; }
.sets__anchor { width: 140px; right: 3%; top: 31%; opacity: .2; }
.sets__gull { width: 180px; left: 36%; top: 40px; opacity: .5; filter: brightness(0) invert(1); }
.sets--sea { padding-top: 130px; padding-bottom: 160px; }
.sets--sea .wrap { position: relative; z-index: 2; }

.set { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; --ring: var(--paper-2); }
.set + .set { margin-top: 180px; }
.set--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.set--rev .set__ph { order: 2; }
.set__ph { position: relative; }
.set__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 30px; overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(13, 26, 69, .55); }
.set__frame img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.set__plates { position: absolute; z-index: 3; right: 30px; bottom: -62px; display: flex; gap: 16px; }
.set--rev .set__plates { right: auto; left: 30px; }
.pl { position: relative; display: block; width: 124px; height: 124px; animation: nb-bob var(--t, 3.6s) var(--inout) var(--d, 0s) infinite alternate; }
.pl__in { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 6px var(--ring), 0 0 0 7px rgba(22, 36, 94, .28), 0 24px 30px -12px rgba(13, 26, 69, .55); transition: transform .55s var(--out); }
.pl__in img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.pl b { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 14px); padding: 8px 13px 9px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px -10px rgba(13, 26, 69, .45); font: 500 17px/1.1 var(--serif); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .45s var(--out); }
.pl:hover .pl__in, .pl.is-hot .pl__in { transform: scale(1.08); }
.pl:hover b, .pl.is-hot b { opacity: 1; transform: translate(-50%, 0); }
.pl-fly { position: fixed; z-index: 95; border-radius: 50%; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 4px #fff, 0 20px 30px -10px rgba(13, 26, 69, .5); will-change: transform, opacity; }
.pl-fly img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }

.set__txt { position: relative; }
.set__top { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 6px; }
.set__num { font: italic 500 108px/.78 var(--serif); color: var(--cobalt); }
.set__top .t-cap { padding-bottom: 8px; color: var(--ink-2); }
.set__t { font: 500 clamp(46px, 4.4vw, 68px)/.95 var(--serif); letter-spacing: -.01em; margin: 16px 0 20px; }
.set__promo { display: inline-block; margin: 0 0 8px; padding: 12px 18px 13px; border: 1.5px solid var(--red); border-radius: 14px; color: var(--red); font: 600 15px/1.4 var(--sans); transform: rotate(-1.2deg); }
.set__pos { list-style: none; margin: 18px 0 0; padding: 0; }
.set__pos li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ink-3); }
.set__pos a { flex: 0 1 auto; font: 500 21px/1.2 var(--serif); }
.set__pos a:hover { text-decoration: underline; text-underline-offset: 4px; }
.set__pos i { flex: 1 1 28px; min-width: 28px; height: 1px; border-bottom: 1.5px dotted rgba(22, 36, 94, .45); transform: translateY(-5px); }
.set__pos span { flex: none; font: 600 16px/1 var(--sans); white-space: nowrap; }
.set__pos small { display: block; margin-top: 5px; font: 400 12px/1 var(--sans); color: var(--ink-2); text-align: right; }
.set__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 4px double var(--ink); }
.set__sum span { font: 600 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.set__sum b { font: 500 48px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.set__gift { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 15px; font-weight: 500; }
.set__gift img { width: 50px; height: auto; flex: none; }
.set__cta { display: inline-block; margin-top: 26px; }

/* the New Year set on the night sea */
.sets--sea .set { --ring: var(--sea); }
.sets--sea .set__num { color: var(--coral); }
.sets--sea .set__top .t-cap, .sets--sea .set__pos small { color: rgba(255, 255, 255, .66); }
.sets--sea .set__pos li { border-color: rgba(255, 255, 255, .16); }
.sets--sea .set__pos i { border-color: rgba(255, 255, 255, .4); }
.sets--sea .set__sum { border-color: #fff; }
.sets--sea .set__gift img { filter: brightness(0) invert(1); }
.sets--sea .btn::before { background: #fff; }
.sets--sea .btn:hover { color: var(--ink); }

/* ---------- 4.B3 gift: the tin as a decoration (R08), the note ---------- */
.pgift { padding-top: 120px; padding-bottom: 150px; }
.pgift__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 70px; align-items: center; }
.pgift__obj { position: relative; aspect-ratio: 1; }
.pgift__halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 66%); }
.pgift__tin { position: absolute; inset: 2%; }
.pgift__tin img { width: 100%; height: 100%; object-fit: contain; transform: rotate(-9deg); will-change: transform; animation: nb-float 7s var(--inout) infinite alternate; }
.pgift__wave { position: absolute; width: 22%; right: 2%; bottom: 6%; filter: brightness(0) invert(1); opacity: .22; transform: rotate(18deg); }
.pgift__text { position: relative; }
.pgift__text > .t-cap { display: block; color: rgba(255, 255, 255, .78); }
.tag { position: relative; max-width: 540px; margin: 26px 0 30px; padding: 34px 36px 30px 64px; border-radius: 12px 30px 30px 12px; background: var(--paper) url(../img/paper.webp); color: var(--ink); box-shadow: 0 34px 70px -30px rgba(6, 12, 40, .6); transform: rotate(-1.4deg); }
.tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 120px; height: 1.5px; margin-top: -1px; background: rgba(255, 255, 255, .8); transform: rotate(-14deg); transform-origin: 100% 50%; }
.tag__hole { position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--cobalt); box-shadow: inset 0 0 0 2px rgba(22, 36, 94, .45); }
.tag__q { display: block; margin: 0 0 16px; font: 500 44px/1 var(--serif); }
.tag__note { display: block; width: 100%; min-height: 136px; padding: 0; border: 0; resize: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, rgba(22, 36, 94, .22) 33px, rgba(22, 36, 94, .22) 34px); font: italic 400 22px/34px var(--serif); color: var(--ink); }
.tag__note::placeholder { color: var(--ink-2); opacity: .85; }
.tag__note:focus { outline: none; }
.tag:focus-within { box-shadow: 0 34px 70px -30px rgba(6, 12, 40, .6), 0 0 0 2px var(--coral); }
.tag__crab { position: absolute; right: 22px; top: 18px; width: 92px; opacity: .8; transform: rotate(10deg); }
.pgift__btn { margin-bottom: 8px; }
.pgift__rev { max-width: 560px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .25); }
.pgift__rev p { margin: 0 0 14px; font: italic 400 22px/1.45 var(--serif); color: #fff; }
.pgift__rev cite { font: 400 13px/1.4 var(--sans); font-style: normal; color: rgba(255, 255, 255, .72); }
.pgift__rev cite b { color: #fff; font-weight: 600; }
.pgift__stars { color: var(--coral); letter-spacing: 3px; }

/* ---------- 4.B4 companies ---------- */
.corp { padding-top: 130px; }
.corp__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.corp__q { position: relative; margin: 26px 0 0; }
.corp__q::before { content: "“"; position: absolute; left: -18px; top: -70px; font: 500 230px/1 var(--serif); color: var(--cobalt); opacity: .16; pointer-events: none; }
.corp__q p { position: relative; margin: 0 0 22px; font: italic 400 clamp(26px, 2.25vw, 35px)/1.3 var(--serif); }
.corp__q p .hl { color: var(--cobalt); }
.corp__q cite { font: 400 13px/1.4 var(--sans); font-style: normal; color: var(--ink-2); }
.corp__q cite b { color: var(--ink); font-weight: 600; }
.corp__stars { color: var(--red); letter-spacing: 3px; }
.corp__card { position: relative; padding: 46px 42px 42px; border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; }
.corp__helm { position: absolute; right: -54px; top: -54px; width: 240px; filter: brightness(0) invert(1); opacity: .12; animation: nb-spin 90s linear infinite; }
.corp__line { position: relative; margin: 0 0 30px; font: 500 clamp(32px, 2.8vw, 42px)/1.06 var(--serif); }
.corp__btns { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.corp__tel { font: 600 16px/1 var(--sans); }
.corp__compass { width: 150px; left: 48%; bottom: -30px; opacity: .2; }

@keyframes nb-spin { to { transform: rotate(360deg); } }
@keyframes nb-bob { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes nb-float { from { transform: rotate(-9deg) translateY(0); } to { transform: rotate(-6deg) translateY(-18px); } }

/* ---------- narrower screens (the demo is desktop; this keeps the page whole) ---------- */
@media (max-width: 1100px) {
  .nh__in { grid-template-columns: 1fr; }
  .nh__plate { width: min(82vw, 560px); margin: 40px auto 0; }
  .set, .set--rev { grid-template-columns: 1fr; gap: 90px; }
  .set--rev .set__ph { order: 0; }
  .pgift__grid, .corp__grid { grid-template-columns: 1fr; }
  .pgift__obj { max-width: 520px; }
  .sets .head { grid-template-columns: 1fr; }
  .sets__nav { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .pl { width: 92px; height: 92px; }
  .set__plates { gap: 10px; right: 14px; bottom: -46px; }
  .set--rev .set__plates { left: 14px; }
  .set__num { font-size: 80px; }
  .tag { padding: 28px 22px 24px 48px; }
  .tag__q { font-size: 36px; }
  .nh__dot .dot__card { display: none; }
}

/* waves: base.css puts .wave--top at top:-1px + translateY(-99%) — a 0.1 px gap that shows as a light seam on dark joins;
   overlap by one pixel instead (reported for base.css) */
.wave--top { top: 1px; }
/* ?shot=1 — final states: the decorative loops stand still (full-page screenshots, swiftshader) */
.shot .nh__ring, .shot .pl, .shot .pgift__tin img, .shot .corp__helm { animation: none; }