/* gifts.css — «Подарочные сертификаты» (logic/NEW_MAP_5.md §11 B1–B3 + NEW_MAP_REVIEW п. 6), build P6 023, 01.10.2026.
   11.B2 the certificate as a pencil postcard on a sun plate (R35 P10) + a live nut (R08, R33), nominals as pills ·
   11.B1 + 11.B3 two R38 G3 plates glued: the gift trays frame (no price, no contents) and «Заказать для коллег».
   Phone ≤ 767 px — R61: nominals 2 × 4, one full-width button, photos by swipe. Only transform and opacity move. */

.dome.sec { padding-top: clamp(8px, 1vw, 24px); }
.pl { position: relative; min-width: 0; margin: 0; border-radius: 40px; padding: clamp(26px, 2.8vw, 66px); }

/* ---------- 11.B2 · certificates ---------- */
.gf-hero { padding-block: clamp(18px, 1.8vw, 36px) clamp(64px, 6vw, 130px); }
.gf-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(28px, 4.2vw, 100px); align-items: center;
  margin-top: clamp(16px, 1.5vw, 28px); }
.gf-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1.1; border-radius: 40px; background: var(--sun); isolation: isolate; }
.gf-stage::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: var(--sun-2); z-index: -1; }

/* the postcard: paper, pencil frame, sun ribbon with a bow — drawn in code; the nominal is live text */
.cert { container-type: inline-size; position: relative; width: 80%; aspect-ratio: 632 / 400; border-radius: 16px; background: var(--white);
  transform: rotate(-4deg); box-shadow: 0 36px 60px -34px rgba(45, 41, 38, .55), 0 2px 0 rgba(45, 41, 38, .06); }
.cert__draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cert__band { fill: var(--sun); opacity: .9; }
.cert__line path, .bow__line path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.bow__fill path { fill: var(--sun); }
.cert__dash { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 6 9; opacity: .35; }
.cert__label { position: absolute; left: 8%; top: 12%; font-family: var(--f-acc); font-weight: 700; font-size: 4cqw; line-height: 1.1; }
.cert__sum { position: absolute; left: 7.4%; top: 33%; font-family: var(--f-acc); font-weight: 700; font-size: 11.6cqw; line-height: 1; letter-spacing: -.02em;
  white-space: nowrap; color: var(--clay); }
.cert__logo { position: absolute; left: 8%; bottom: 12%; width: 25%; height: auto; }
.gf-stage__nut { position: absolute; right: 3%; bottom: -5%; width: 31%; transform: rotate(-10deg); filter: drop-shadow(0 18px 18px rgba(45, 41, 38, .22));
  pointer-events: none; }

.gf-buy { display: flex; flex-direction: column; gap: clamp(16px, 1.4vw, 28px); }
.gf-h1 { font-size: var(--fs-h1); line-height: 1.02; max-width: 12ch; }
.gf-h1 em { font-style: normal; color: var(--clay); }
.gf-lead { font-size: calc(var(--fs-body) * 1.04); max-width: 48ch; }
.nom__l { display: block; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 10px; }
.nom__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
.nom__grid button { min-height: clamp(52px, 3.6vw, 72px); padding: 0 8px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--white);
  font-weight: 700; font-size: calc(var(--fs-body) * 1.02); white-space: nowrap; transition: transform .2s var(--ease); }
.nom__grid button:hover { border-color: var(--ink); }
.nom__grid button:active { transform: scale(.96); }
.nom__grid button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); box-shadow: inset 0 -2px 0 rgba(45, 41, 38, .12); }
.gf-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 4px; }
.gf-btn { min-height: clamp(58px, 3.8vw, 76px); padding: 0 clamp(30px, 2.4vw, 52px); font-size: calc(var(--fs-body) * 1.06); }
.gf-tel { font-weight: 700; border-bottom: 2px solid var(--sun); padding-bottom: 2px; }
.gf-tel:hover { border-color: var(--ink); }

/* ---------- 11.B1 + 11.B3 · two R38 G3 plates glued ---------- */
.gf-sets { background: var(--sand); margin-top: clamp(110px, 11vw, 240px); }
.gf-sets__grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); }
.gf-sets__a { background: var(--white); display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 30px); }
.gf-sets__head { display: flex; align-items: center; gap: 14px; }
.gf-sets__bow { width: clamp(58px, 4.6vw, 104px); height: clamp(53px, 4.2vw, 95px); flex: none; transform: rotate(-8deg); }
.gf-sets__ph { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1vw, 20px); }
.gf-sets__ph figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: var(--butter); }
.gf-sets__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gf-sets__ph figure.is-lead { grid-column: 1 / -1; aspect-ratio: 16 / 8.4; }   /* R19/R20 «ручки тянутся», R60 несколько комплектов (круг 2) */
.gf-sets__ph figure.is-lead img { object-position: 50% 40%; }
.gf-sets__ph figure:hover img { transform: scale(1.03); }
.gf-sets__a .link-arrow { align-self: flex-start; }
.gf-sets__b { background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 1.4vw, 26px); }
.gf-sets__b .h2 { max-width: 11ch; }
.gf-sets__b .h2 em { color: var(--sun); }
.gf-sets__b .gf-sets__dr { width: clamp(130px, 11vw, 240px); margin-bottom: auto; opacity: .92; }
.gf-q { margin: 0; padding-left: 18px; border-left: 3px solid var(--sun); }
.gf-q p { font-family: var(--f-acc); font-weight: 700; font-size: calc(var(--fs-body) * 1.12); line-height: 1.35; }
.gf-q cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .7); }
.gf-sets__b .btn { align-self: flex-start; }

/* ---------- 768–1100 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .gf-grid { grid-template-columns: 1fr; }
  .gf-stage { max-width: 720px; width: 100%; justify-self: center; }
  .gf-sets__grid { grid-template-columns: 1fr; }
}

/* ---------- phone: R61 ---------- */
@media (max-width: 767px) {
  .gf-hero { padding-block: 18px 44px; }
  .gf-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
  .gf-buy { display: contents; }
  .gf-h1 { order: -2; font-size: 32px; max-width: none; }
  .gf-stage { order: -1; aspect-ratio: 1.18; border-radius: 26px; }
  .cert { width: 82%; }
  .gf-stage__nut { width: 30%; right: 2%; bottom: -4%; }
  .gf-lead { font-size: 16px; }
  .nom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nom__grid button { min-height: 52px; font-size: 17px; }
  .gf-act { flex-direction: column; align-items: stretch; }
  .gf-btn { width: 100%; }
  .gf-tel { display: none; }

  .gf-sets { margin-top: 96px; }
  .gf-sets__grid { grid-template-columns: 1fr; gap: 10px; }
  .pl { border-radius: 24px; padding: 22px 18px; }
  .gf-sets__ph { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin-right: -18px; padding-right: 18px; }
  .gf-sets__ph::-webkit-scrollbar { display: none; }
  .gf-sets__ph figure { flex: 0 0 82%; scroll-snap-align: start; border-radius: 18px; }
  .gf-sets__b .btn { width: 100%; }
  .gf-sets__b .gf-sets__dr { width: 120px; }
}