/* optom.css — «Оптом» (logic/NEW_MAP_4.md §7 B1–B5 · NEW_MAP_REVIEW.md п.7), build P6 023, 01.10.2026.
   Language of the approved home page: tokens and components of base.css, no new colours.
   R38 G3 colour blocks stuck together · G4 photo in the almond mask (one figure on the site) · G5 captions along the side ·
   R35 P10 drawn cards (pencil sheet img/dr, a real product next to the drawing — R08, R33) · R61 K7 wholesale row
   «Фасовка 5 кг · р./кг» · nuts.com П8 wholesale two ways (5 kg in the card + a request). Motion: transform/opacity only. */

:root { --almond: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 128'><path d='M50 2C83 20 98 70 84 100c-8 18-24 26-34 26S24 118 16 100C2 70 17 20 50 2z'/></svg>"); }

.eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- 7.B1 · first screen: yellow block + clay block with the warehouse in the almond ---------- */
.op-hero { padding-block: clamp(18px, 1.8vw, 36px) clamp(28px, 3vw, 64px); }
.op-hero .crumbs { margin-bottom: clamp(14px, 1.4vw, 26px); }
.op-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; }   /* the R25 frame needs width: 4:3 hands, bag and crate */
.op-hero__grid > * { position: relative; border-radius: 40px; min-height: clamp(460px, 36vw, 800px); }
.op-hero__a { background: var(--sun); padding: clamp(30px, 3.6vw, 84px); display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 1.4vw, 28px); }
.op-hero__a h1 { font-size: var(--fs-h1); line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.op-hero__lead { font-size: calc(var(--fs-body) * 1.14); font-weight: 500; max-width: 34ch; }
.op-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(4px, .6vw, 12px); }
.op-hero__cta .btn--ink { box-shadow: 0 14px 30px -16px rgba(45, 41, 38, .6); }
.op-hero__b { background: var(--clay); color: var(--white); overflow: hidden; }
.op-hero__b--photo { background: var(--butter); }
.op-hero__b--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.op-mask { position: absolute; top: 8%; left: 50%; height: 84%; aspect-ratio: .78; transform: translateX(-50%);
  -webkit-mask: var(--almond) center / contain no-repeat; mask: var(--almond) center / contain no-repeat; }
.op-mask img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* G5: small caps along the edges — vertical box, so it sits exactly at the edge */
.op-side { position: absolute; top: 50%; left: clamp(14px, 1.6vw, 30px); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.op-side--r { left: auto; right: clamp(14px, 1.6vw, 30px); transform: translateY(-50%); }

/* ---------- 7.B2 · three ways: R35 P10 drawn cards ---------- */
.op-ways { padding-bottom: clamp(24px, 2.4vw, 56px); }
.op-ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 28px); }
.op-way { position: relative; border-radius: 30px; padding: clamp(22px, 2.2vw, 46px); min-height: clamp(340px, 26vw, 560px); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "tag tag" "h h" "p p" "go art"; row-gap: 14px; column-gap: 12px; }
.op-way--sun { background: var(--sun); }
.op-way--white { background: var(--white); border: 1px solid #efe5d6; }
.op-way--ink { background: var(--ink); color: var(--white); }
.op-way__tag { grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .62); font-size: var(--fs-small); font-weight: 600; }
.op-way--white .op-way__tag { background: var(--cream); }
.op-way--ink .op-way__tag { background: rgba(255, 255, 255, .1); }
.op-way__tag b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: 14px; }
.op-way--ink .op-way__tag b { background: var(--sun); color: var(--ink); }
.op-way h3 { grid-area: h; font-family: var(--f-acc); font-size: clamp(24px, 1.5vw + 5px, 44px); line-height: 1.1; max-width: 15ch; }
.op-way h3.op-way__long { font-size: clamp(21px, 1vw + 7px, 34px); line-height: 1.18; max-width: 22ch; }
.op-way__p { grid-area: p; font-weight: 600; font-size: calc(var(--fs-body) * 1.02); white-space: pre-line; }   /* the number on its own line: no break inside it */
.op-way__go, .op-way__btn { grid-area: go; align-self: end; justify-self: start; white-space: nowrap; }
.op-way__btn { margin-bottom: 4px; }
.op-way--ink .link-arrow { border-color: var(--sun); }
.op-way__art { grid-area: art; align-self: end; position: relative; width: clamp(104px, 8.6vw, 220px); }
.op-way__dr { width: 100%; height: auto; mix-blend-mode: multiply; }
.op-way--ink .op-way__dr { mix-blend-mode: normal; filter: invert(1) brightness(1.8); opacity: .9; }
.op-way__nut { position: absolute; left: 14%; top: -22%; width: 72%; height: auto; filter: drop-shadow(0 8px 10px rgba(45, 41, 38, .18)); }

/* ---------- 7.B3 · wholesale rows (R61 K7) under the half-oval of R35 P2 ---------- */
.op-list { background: var(--white); margin-top: clamp(110px, 11vw, 240px); }
.dome.sec { padding-top: clamp(8px, 1vw, 24px); }
.op-list__note { color: var(--ink-2); font-size: var(--fs-small); max-width: 34ch; text-align: right; }
.op-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(18px, 1.6vw, 30px); }
.op-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.op-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--white); font-weight: 600; transition: transform .2s var(--ease); }
.op-tab:hover { border-color: var(--ink); }
.op-tab:active { transform: scale(.97); }
.op-tab sup { font-size: 13px; color: var(--ink-2); font-weight: 600; vertical-align: super; }
.op-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.op-tab[aria-selected="true"] sup { color: var(--sun); }
.op-sort { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); }
.op-sort span { margin-right: 4px; }
.op-sort button { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 600; color: var(--ink); border: 1.5px solid transparent; }
.op-sort button:hover { border-color: var(--line); }
.op-sort button[aria-pressed="true"] { background: var(--butter); border-color: var(--sun); }
.op-rows { display: grid; gap: 10px; }
.orow { display: grid; grid-template-columns: clamp(72px, 5.4vw, 112px) minmax(0, 1fr) minmax(150px, .46fr) minmax(128px, .34fr) minmax(150px, auto);
  grid-template-areas: "pl nm kg pr by"; align-items: center; column-gap: clamp(14px, 1.6vw, 36px);
  padding: 10px clamp(12px, 1.4vw, 26px) 10px 10px; background: var(--cream); border-radius: 22px; }
.orow__plate { grid-area: pl; position: relative; display: block; aspect-ratio: 1; border-radius: 16px; background: var(--tone, var(--sand)); overflow: hidden; }
.orow__plate img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; transition: transform .45s var(--ease); }
.orow:hover .orow__plate img { transform: scale(1.05); }
.orow__main { grid-area: nm; min-width: 0; }
.orow__name { font-weight: 600; font-size: calc(var(--fs-body) * .98); line-height: 1.3; }
.orow__name:hover { color: var(--clay); }
.orow__meta { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); }
.orow__kg { grid-area: kg; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.orow__kg b { font-size: var(--fs-price); font-weight: 700; color: var(--clay); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.orow__s { background: var(--sun); border-radius: var(--r-pill); padding: 4px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.orow__price { grid-area: pr; display: flex; flex-direction: column; gap: 2px; }
.orow__price b { font-size: calc(var(--fs-body) * 1.12); font-weight: 700; white-space: nowrap; }
.orow__price span { font-size: 13px; color: var(--ink-2); }
.orow__buy { grid-area: by; justify-self: end; display: flex; }
.orow .add, .orow .step { margin-left: 0; }
.orow .pc__off { white-space: nowrap; }
.op-list__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 1.8vw, 34px); }
.op-list__foot .btn[hidden] { display: none; }

/* ---------- 7.B4 · request: three fields, «Кто вы» optional ---------- */
.op-form { padding-bottom: clamp(24px, 2.4vw, 56px); }
.op-form__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 3.4vw, 80px); align-items: start; }
.op-form__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(18px, 1.8vw, 32px) 16px; }
.op-form__side .op-quote { grid-column: 1 / -1; }
.op-quote { margin: 0; background: var(--white); border-radius: var(--r-card); padding: clamp(18px, 1.6vw, 30px); border: 1px solid #efe5d6; max-width: 34em; }
.op-quote blockquote { margin: 0; }
.op-quote p { font-family: var(--f-acc); font-weight: 700; font-size: calc(var(--fs-body) * 1.08); line-height: 1.32; }
.op-quote figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.op-quote figcaption b { color: var(--ink); }
.op-form__dr { grid-column: 2; grid-row: 1; width: clamp(96px, 7.4vw, 170px); mix-blend-mode: multiply; }
.op-form__box { background: var(--white); border-radius: 30px; padding: clamp(22px, 2.6vw, 52px); display: grid; gap: clamp(16px, 1.4vw, 24px);
  border: 1px solid #efe5d6; box-shadow: 0 30px 60px -40px rgba(45, 41, 38, .25); }
.op-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.2vw, 22px); }
.fld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld__l { font-weight: 600; font-size: var(--fs-small); padding: 0; }
.fld input, .fld textarea { width: 100%; min-height: 56px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--cream); padding: 14px 18px;
  font-size: var(--fs-body); line-height: 1.4; outline: 0; }
.fld textarea { resize: vertical; min-height: 124px; }
.fld input:focus, .fld textarea:focus { border-color: var(--ink); background: var(--white); }
.fld [aria-invalid="true"] { border-color: var(--clay); background: #fff8f5; }
.fld__err { color: var(--clay); font-size: var(--fs-small); font-weight: 600; }
.fld__err[hidden] { display: none; }
.op-who { display: flex; flex-wrap: wrap; gap: 10px; }
.op-who legend { margin-bottom: 10px; float: left; width: 100%; }
.op-chip { position: relative; display: inline-flex; cursor: pointer; }
.op-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--white); font-weight: 500; font-size: var(--fs-small); transition: transform .2s var(--ease); }
.op-chip:hover span { border-color: var(--ink); }
.op-chip input:checked + span { background: var(--sun); border-color: var(--sun); font-weight: 600; }
.op-chip input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 2px; }
.op-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.op-form__go .btn { min-height: 58px; padding: 0 2em; }
.op-form__done { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.op-form__done[hidden] { display: none; }
.op-form__done i { width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: var(--white); display: grid; place-items: center; }

/* ---------- 7.B5 · why us: four blocks stuck together (R38 G3) on the sand dome ---------- */
.op-why { background: var(--sand); margin-top: clamp(110px, 11vw, 240px); }
.op-why__grid { display: grid; grid-template-columns: 1fr 1fr; }
.op-why__grid > * { position: relative; margin: 0; border-radius: 40px; min-height: clamp(340px, 26vw, 600px); padding: clamp(28px, 3vw, 66px); overflow: hidden; }
.op-why__a { background: var(--sun); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.4vw, 26px); }
.op-why__big { font-family: var(--f-acc); font-weight: 700; font-size: clamp(54px, 5.4vw, 140px); line-height: .95; letter-spacing: -.02em; }
.op-why__a p { max-width: 40ch; font-size: calc(var(--fs-body) * 1.02); }
.op-why__b { padding: 0; background: var(--ink); }
.op-why__b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-pin { position: absolute; left: clamp(14px, 1.4vw, 28px); bottom: clamp(14px, 1.4vw, 28px); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: var(--r-pill); background: var(--white); font-size: var(--fs-small); font-weight: 600; }
.op-pin svg { width: 20px; height: 20px; color: var(--clay); }
.op-why__c { background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.op-why__dr { position: absolute; right: clamp(18px, 2vw, 44px); top: clamp(18px, 2vw, 44px); width: clamp(90px, 8vw, 180px); filter: invert(1) brightness(1.8); opacity: .9; }
.op-why__h { font-family: var(--f-acc); font-weight: 700; font-size: clamp(26px, 1.7vw + 6px, 52px); line-height: 1.1; max-width: 16ch; }
.op-why__c p:last-child { color: rgba(255, 255, 255, .78); max-width: 46ch; }
.op-why__d { background: var(--white); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.op-rev__stars { display: flex; gap: 3px; color: #f2a312; }
.op-rev__stars svg { width: 22px; height: 22px; }
.op-why__d blockquote { margin: 0; display: grid; gap: 14px; }
.op-rev__q { font-family: var(--f-acc); font-weight: 700; font-size: clamp(26px, 1.7vw + 6px, 52px); line-height: 1.12; max-width: 18ch; }
.op-rev__t { color: var(--ink-2); font-size: var(--fs-small); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.op-rev__t[hidden] { display: none; }
.op-rev__who { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.op-rev__who b { color: var(--ink); }
.op-why__d .link-arrow { align-self: flex-start; }

/* ---------- 1100 → 768 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .op-ways__grid { grid-template-columns: 1fr 1fr; }
  .orow { grid-template-columns: 76px minmax(0, 1fr) auto auto; grid-template-areas: "pl nm nm nm" "pl kg pr by"; row-gap: 10px; }
  .op-form__grid { grid-template-columns: 1fr; }
}

/* ---------- phone: R61 — own design, rows, one full-width main button ---------- */
@media (max-width: 767px) {
  .op-hero { padding-top: 14px; }
  .op-hero__grid { grid-template-columns: 1fr; gap: 10px; }
  .op-hero__grid > * { min-height: 0; border-radius: 26px; }
  .op-hero__a { padding: 26px 20px 22px; gap: 14px; }
  .op-hero__a h1 { font-size: 30px; }
  .op-hero__lead { font-size: 16px; }
  .op-hero__cta { flex-direction: column; }
  .op-hero__cta .btn { width: 100%; }
  .op-hero__b { min-height: 360px; }
  .op-mask { top: 7%; height: 86%; }
  .op-side { left: 12px; font-size: 11px; letter-spacing: .12em; }
  .op-side--r { left: auto; right: 12px; }

  .op-ways__grid { grid-template-columns: 1fr; gap: 10px; }
  .op-way { min-height: 0; border-radius: 22px; padding: 20px; grid-template-areas: "tag art" "h art" "p p" "go go"; grid-template-rows: auto auto auto auto; row-gap: 12px; }
  .op-way h3, .op-way h3.op-way__long { font-size: 21px; }
  .op-way__art { width: 92px; align-self: start; margin-top: 18px; }
  .op-way__btn { width: 100%; }

  .op-list__note { text-align: left; }
  .op-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }   /* single line: items take the column width, the tab ribbon scrolls */
  .op-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .op-tabs::-webkit-scrollbar { display: none; }
  .op-tab { flex: none; min-height: 44px; padding: 0 16px; }
  .op-sort { flex-wrap: wrap; }
  .op-sort button { min-height: 36px; padding: 0 12px; }
  .op-rows { gap: 8px; }
  .orow { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "pl nm nm" "pl kg kg" "pl pr by"; row-gap: 6px; column-gap: 12px;
    padding: 10px; border-radius: 18px; background: var(--white); border: 1px solid #efe5d6; align-items: center; }
  .orow__plate { align-self: start; border-radius: 14px; }
  .orow__name { font-size: 15px; }
  .orow__meta { font-size: 13px; }
  .orow__kg { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .orow__kg b { font-size: 18px; }
  .orow__s { font-size: 12px; padding: 3px 8px; }
  .orow__price b { font-size: 19px; }
  .orow__price span { font-size: 12px; }
  .orow .add, .orow .step { min-height: 42px; }
  .orow .add { padding: 0 12px 0 4px; font-size: 13px; }
  .orow .add i { width: 32px; height: 32px; }
  .orow .step button { width: 34px; height: 34px; }
  .op-list__foot { flex-direction: column; align-items: stretch; }
  .op-list__foot .btn { width: 100%; }
  .op-list__foot .link-arrow { align-self: flex-start; }

  .op-form__grid { grid-template-columns: 1fr; }
  .op-form__dr { display: none; }
  .op-form__box { border-radius: 22px; padding: 20px 16px; }
  .op-form__two { grid-template-columns: 1fr; }
  .op-form__go .btn { width: 100%; }

  .op-why__grid { grid-template-columns: 1fr; gap: 10px; }
  .op-why__grid > * { min-height: 0; border-radius: 26px; padding: 24px 20px; }
  .op-why__b { min-height: 260px; padding: 0; }
  .op-why__big { font-size: 52px; }
  .op-why__c { padding-top: 110px; }
  .op-why__dr { width: 76px; top: 20px; right: 20px; }
  .op-why__h, .op-rev__q { font-size: 24px; }
}