/* info.css — «Доставка, оплата и вопросы» (dostavka.html), build P6 of the 017 demo, 27.09.2026.
   Map: logic/NEW_MAP_3.md §7 B1–B5 + logic/NEW_MAP_4.md §10 B1–B4 (questions live here as #voprosy — Operator's decision).
   Language of the homepage (css/home.css): paper, one-ink engraving, waves on every join, sea decor.
   Motion: transform and opacity only. Colours: tokens of css/base.css. */

.page-dostavka .ftr { margin-top: 0; }                 /* the last section ends in its own sea wave, the footer continues it */
.page-dostavka main [id] { scroll-margin-top: calc(var(--hdr) + 14px); }

/* ---------- sections: flat colours, so the wave of the join is the same colour as the section ---------- */
.ds { position: relative; padding: clamp(100px, 8.6vw, 138px) 0; }
.ds > .wrap { position: relative; z-index: 3; }
.ds__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ds--paper { background: var(--paper) url(../img/paper.webp) repeat; }
.ds--paper > .wave { color: var(--paper); }
.ds--p2 { background: var(--paper-2); }
.ds--p2 > .wave { color: var(--paper-2); }
.ds--sea { background: var(--sea); color: #fff; }
.ds--sea > .wave { color: var(--sea); }
.ds--sea .pattern { background-image: url(../img/pattern_w.webp); opacity: .06; }
.ds--ice { background: var(--ice); }
.ds--ice > .wave { color: var(--ice); }
.ds__head { margin-bottom: 54px; }
.ds__head .t-cap { display: block; margin-bottom: 18px; }
.ds__head .t-h2 { max-width: 15em; }
.ds--sea .t-cap { color: rgba(255, 255, 255, .72); }

/* newspaper dateline (as on the homepage hero) */
.dateline { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); width: max-content; max-width: 100%; margin-bottom: 30px; }
.dateline span + span::before { content: "◆"; font-size: 8px; margin-right: 22px; color: var(--red); vertical-align: 2px; }

/* ---------- 7.B1 first screen: the Moscow map in a pattern (R34) on the engraved background (R06) ---------- */
.dh { position: relative; padding: 34px 0 150px; background: var(--paper) url(../img/paper.webp) repeat; }
.dh .pattern { opacity: .11; background-size: 760px; }
.dh__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dh__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.08fr 1fr; gap: 30px; align-items: center; }
.dh .crumbs { margin-bottom: 30px; }
.dh__t { font: 500 clamp(50px, 5.5vw, 86px)/.95 var(--serif); letter-spacing: -.012em; margin: 0; max-width: 9.4em; }
.dh__t em { font-style: italic; font-weight: 400; color: var(--cobalt); }
.dh__gift { display: flex; align-items: center; gap: 16px; margin: 30px 0 36px; max-width: 30em; font: italic 400 clamp(21px, 1.7vw, 26px)/1.35 var(--serif); }
.dh__gift img { width: 66px; height: auto; flex: none; }
.dh__nav { max-width: 640px; }
.dh__map { position: relative; width: min(640px, 44vw, calc(calc(var(--vh, 1vh) * 100) - var(--hdr) - 150px)); aspect-ratio: 1; justify-self: end; }   /* a low laptop window keeps the whole plate on the first screen (Operator 27.09) */
.dh__ringbox { position: absolute; inset: 0; overflow: hidden; }   /* the turning square stays inside its box: no sideways scroll */
.dh__ring { display: block; width: 100%; height: 100%; animation: dh-spin 90s linear infinite; }
.dh__ring text { font: 500 5.1px var(--sans); letter-spacing: .24em; text-transform: uppercase; fill: var(--ink); }
.dh__plate { position: absolute; inset: 7.5%; will-change: transform; }
.dh__plate img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(13, 26, 69, .16)); }
.dh__pin { z-index: 4; }
.dh__gull { width: 140px; left: 50%; top: 8px; opacity: .85; }
.dh__anchor { width: 84px; left: 2.5%; bottom: 70px; opacity: .22; }
@keyframes dh-spin { to { transform: rotate(360deg); } }

/* ---------- 7.B2 the terms as one table ---------- */
.us { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: start; }
.us__side .t-cap { display: block; margin-bottom: 18px; }
.us__side .t-h2 { margin-bottom: 34px; }
.us__van { width: 250px; height: auto; }
.us__table { border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); }
.us__row { display: grid; grid-template-columns: 70px 1fr 210px; gap: 30px; align-items: center; padding: 28px 18px; }
.us__row + .us__row { border-top: 1px solid var(--ink-3); }
.us__row img { width: 62px; height: auto; justify-self: center; }
.us__row p { margin: 0; font: 500 clamp(22px, 1.8vw, 26px)/1.28 var(--serif); }
.us__row > :last-child { justify-self: end; }
.us__fig { font: 500 clamp(40px, 3.6vw, 54px)/1 var(--serif); color: var(--cobalt); white-space: nowrap; font-variant-numeric: lining-nums; }
.us__row--free { background: var(--paper); border-radius: 20px; box-shadow: 0 20px 44px -30px rgba(13, 26, 69, .5); }
.us__row--free + .us__row { border-top-color: transparent; }
.us__row--free .us__fig { color: var(--red); font-style: italic; }

/* ---------- 7.B3 the time: one day line, the cut at 15:00 ---------- */
.tm__head { max-width: 900px; margin-bottom: 64px; }
.tm__head .t-cap { display: block; margin-bottom: 18px; }
/* the pocket watch hangs on a paper medallion (an inverted engraving turns into a white blob on the sea) */
.tm__watch { position: absolute; z-index: 2; right: var(--g); top: 118px; width: 210px; aspect-ratio: 1; border-radius: 50%; background: var(--paper) url(../img/paper.webp); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .5); display: grid; place-items: center; pointer-events: none; }
.tm__watch img { width: 58%; height: auto; transform-origin: 50% 8%; animation: tm-swing 5.5s var(--inout) infinite alternate; }
@keyframes tm-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.tm__scale { position: relative; height: 104px; margin: 0 60px 34px; }
.tm__line { position: absolute; left: 0; right: 0; top: 66px; height: 4px; }
.tm__fill { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.tm__fill--a { left: 0; width: 41.667%; background: var(--coral); }
.tm__fill--b { left: 41.667%; right: 0; background: rgba(255, 255, 255, .34); }
.tm__tick { position: absolute; left: var(--x); top: 0; display: grid; justify-items: center; gap: 16px; transform: translateX(-50%); }
.tm__tick b { font: 500 clamp(36px, 3.2vw, 48px)/1 var(--serif); font-variant-numeric: lining-nums; }
.tm__tick i { order: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--sea); box-shadow: inset 0 0 0 3px #fff; }
.tm__tick--cut i { background: var(--coral); box-shadow: 0 0 0 7px rgba(255, 133, 98, .22); }
.tm__tick--cut b { color: var(--coral); }
.tm__cols { display: grid; grid-template-columns: calc(60px + (100% - 120px) * .41667) 1fr; }
.tm__cols p { margin: 0; font: italic 400 clamp(21px, 1.75vw, 27px)/1.38 var(--serif); }
.tm__a { padding-right: 46px; }
.tm__b { padding-left: 46px; border-left: 1px solid rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .86); }
.tm__express { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 58px; padding: 26px 30px 26px 34px; border-radius: 22px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tm__express p { margin: 0; max-width: 62em; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.tm__express .btn { flex: none; }

/* ---------- 7.B4 payment ---------- */
.pay { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: stretch; }
.pay__card { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 34px; align-items: center; padding: 46px 48px; border-radius: 28px; background: var(--ice); box-shadow: 0 30px 60px -42px rgba(13, 26, 69, .5); overflow: hidden; }
.pay__card img { width: 120px; height: auto; transition: transform .8s var(--out); }
.pay__card:hover img { transform: rotate(-6deg) scale(1.05); }
.pay__card--site { background: var(--cobalt); color: #fff; }
.pay__medal { display: grid; place-items: center; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--paper) url(../img/paper.webp); box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
.pay__medal img { width: 72%; }
.pay__t { margin: 0; font: 500 clamp(36px, 3.2vw, 50px)/1 var(--serif); }
.pay__p { margin: 12px 0 0; font: 400 clamp(19px, 1.5vw, 22px)/1.45 var(--serif); }

/* ---------- 7.B5 pickup: a poster like R26 — arched title, the drawing, an italic caption ---------- */
.pk { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.pk__poster { position: relative; margin: 0; padding: 42px 46px 46px; text-align: center; background: var(--paper) url(../img/paper.webp) repeat; border-radius: 8px; box-shadow: 0 40px 70px -42px rgba(13, 26, 69, .5); }
.pk__poster::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--ink); border-radius: 4px; pointer-events: none; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ink-3); }
.pk__arch { display: block; width: 82%; margin: 0 auto -6px; overflow: visible; }
.pk__arch text { font: 600 60px var(--serif); letter-spacing: .16em; text-transform: uppercase; fill: var(--ink); }
.pk__sub { display: block; font: italic 400 20px/1 var(--serif); margin-bottom: 6px; }
.pk__house { width: 100%; height: auto; }
.pk__cap { max-width: 28em; margin: 14px auto 0; font: italic 400 19px/1.45 var(--serif); color: var(--ink-2); }
.pk__text .t-cap { display: block; margin-bottom: 18px; }
.pk__p { max-width: 33em; margin: 26px 0 34px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.pk__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 10 questions ---------- */
.qv { padding-bottom: clamp(160px, 13vw, 210px); }
.qv__shell { width: 120px; right: 4%; top: 150px; opacity: .3; }

/* 10.B1 calibers: the claw at each size, one row of a table (R40: the sea type does the talking) */
.cal { margin: 0 0 120px; }
.cal__head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 70px; align-items: end; margin-bottom: 36px; }
.cal__head .t-cap { grid-column: 1 / -1; }
.cal__head .t-h3 { max-width: 16em; }
.cal__lead { margin: 0; font: italic 400 clamp(21px, 1.7vw, 27px)/1.35 var(--serif); color: var(--ink-2); }
.cal__table { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); }
.cal__it { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 12px 30px; }
.cal__it + .cal__it { border-left: 1px solid var(--ink-3); }
.cal__img { display: flex; align-items: flex-end; justify-content: center; height: 270px; width: 100%; }
.cal__img img { width: auto; max-width: 100%; }
.cal__l { margin-top: 22px; font: 500 clamp(52px, 4.6vw, 70px)/1 var(--serif); font-variant-numeric: lining-nums; }
.cal__w { max-width: 11.5em; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.cal__buy { display: flex; justify-content: flex-end; margin-top: 26px; }
.cbuy { display: grid; grid-template-columns: 78px 1fr auto; gap: 18px; align-items: center; width: min(600px, 100%); padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--paper) url(../img/paper.webp); box-shadow: 0 22px 44px -30px rgba(13, 26, 69, .5); }
.cbuy__img { display: block; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; }
.cbuy__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out); }
.cbuy:hover .cbuy__img img { transform: scale(1.08); }
.cbuy__name { display: block; font: 500 21px/1.15 var(--serif); margin-bottom: 6px; }
.cbuy .price { font-size: 18px; }

/* 10.B2 shrimp marking */
.shr { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; margin-bottom: 130px; }
.shr__p { max-width: 36em; margin: 22px 0 28px; font-size: 18px; line-height: 1.62; color: var(--ink-2); }
.shr__pics { display: flex; align-items: flex-end; justify-content: center; gap: 46px; padding: 30px 20px 26px; border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); }
.shr__it { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.shr__it img { height: auto; }
.shr__it--l img { width: min(360px, 26vw); }
.shr__it--s img { width: min(204px, 14.8vw); }
.shr__it figcaption { margin-top: 18px; }
.shr__it b { display: block; font: 500 clamp(40px, 3.6vw, 54px)/1 var(--serif); font-variant-numeric: lining-nums; }
.shr__it span { display: block; max-width: 15em; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* 10.B3 + 10.B4 */
.qv__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: start; }
.qv__list .acc:last-child { border-bottom: 1px solid var(--ink-3); }
.qv__wa { position: sticky; top: calc(var(--hdr) + 30px); padding: 26px 40px 40px; border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; }
.qv__birds { position: relative; height: 150px; margin: 0 -10px 12px; }
.qv__gull { position: absolute; height: auto; filter: brightness(0) invert(1); }
.qv__gull--1 { width: 200px; right: 0; top: 0; animation: qv-fly 7s var(--inout) infinite alternate; }
.qv__gull--2 { width: 112px; left: 6px; top: 64px; opacity: .72; animation: qv-fly2 9s var(--inout) infinite alternate; }
@keyframes qv-fly { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-18px, 12px) rotate(-5deg); } }
@keyframes qv-fly2 { from { transform: scaleX(-1) translate(0, 0) rotate(0deg); } to { transform: scaleX(-1) translate(-16px, -10px) rotate(4deg); } }
.qv__wa .t-h3 { position: relative; z-index: 2; margin-bottom: 26px; }
.qv__btns { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; }
.qv__btns .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.qv__btns .btn--ghost::before { background: #fff; }
.qv__btns .btn--ghost:hover { color: var(--ink); }
.qv__shellw { position: absolute; right: -40px; bottom: -50px; width: 190px; height: auto; filter: brightness(0) invert(1); opacity: .09; }
.qv__wa .coral { white-space: nowrap; }
.ds--ice > .qv__foot { top: auto; bottom: -1px; color: var(--sea); }

/* the client's numbers read as numbers: lining figures in the serif lines (the font shorthand resets the variant) */
.us__row p, .tm__head .t-h2, .tm__cols p, .pay__p, .pk__cap, .cal__head .t-h3, .shr .t-h3, .qv__wa .t-h3 { font-variant-numeric: lining-nums; }

/* ---------- narrower screens (the demo is shown at 1440; these keep the page whole below it) ---------- */
@media (max-width: 1100px) {
  .dh__grid, .us, .pk, .shr, .qv__grid { grid-template-columns: 1fr; }
  .dh__map { justify-self: center; width: min(560px, 86vw); }
  .us__side { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
  .us__van { width: 180px; }
  .pay { grid-template-columns: 1fr; }
  .cal__head { grid-template-columns: 1fr; }
  .qv__wa { position: relative; top: 0; }
}
@media (max-width: 760px) {
  .us__row { grid-template-columns: 48px 1fr; padding: 22px 6px; }
  .us__row img { width: 44px; }
  .us__row > :last-child { grid-column: 2; justify-self: start; }
  .tm__scale { margin: 0 30px 30px; }
  .tm__cols { grid-template-columns: 1fr; gap: 20px; }
  .tm__b { padding-left: 0; border-left: 0; }
  .tm__express { flex-direction: column; align-items: flex-start; }
  .pay__card { grid-template-columns: 1fr; padding: 34px 28px; }
  .cal__table { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .cal__img { height: 180px; }
  .shr__it--l img { width: 52vw; }
  .shr__it--s img { width: 30vw; }
}