/* product.css — template «Карточка товара», 017 demo, build P6 (agent catalog, 27.09.2026). Map NEW_MAP_2 §3 B1–B9.
   The first screen takes the style of the product's direction (site/DESIGN.md «Стиль категорий»); the rest is paper with waves.
   Motion: transform and opacity only. Colours: tokens of base.css + the section backgrounds named in DESIGN.md. */

/* ---------- first screen: 3.B1–B4 in the direction's colour ---------- */
.pd { position: relative; padding: 40px 0 150px; overflow: hidden; isolation: isolate; }
.prod--krab .pd { background: var(--sea); }
.prod--rakushki .pd { background: #111d44; }
.prod--krevetki .pd { background: linear-gradient(#e7eef6, #f4f7fa 60%, var(--paper)); }
.prod--ikra .pd { background: linear-gradient(#dfeaf7, var(--paper)); }
.prod--ryba .pd, .prod--lobster .pd { background: #f7f3ec; }
.prod--dark .pd { color: #fff; }
.pd__sea { display: none; position: absolute; inset: 0; z-index: -2; opacity: .2; overflow: hidden; }
.prod--dark .pd__sea { display: block; }
.pd__sea img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; mix-blend-mode: luminosity; }
.pd__pattern { z-index: -1; opacity: .06; }
.prod--dark .pd__pattern { background-image: url(../img/pattern_w.webp); opacity: .05; }
.pd__gull { width: 130px; right: 6%; top: 18px; opacity: .8; }
.prod--dark .pd__gull { filter: brightness(0) invert(1); opacity: .55; }
.pd__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 64px; align-items: start; }

/* 3.B1 gallery: thumbs + frame, the change is a shutter on transform (product.js) */
.pg { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; }
.pg--one { grid-template-columns: minmax(0, 1fr); }
.pg__thumbs { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.pg__th { position: relative; width: 84px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; opacity: .55; transition: opacity .35s, transform .5s var(--out); box-shadow: 0 0 0 1px rgba(22, 36, 94, .18); }
.pg__th img { width: 100%; height: 100%; object-fit: cover; }
.pg__th:hover { opacity: .9; transform: translateY(-2px); }
.pg__th.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--red); }
.prod--dark .pg__th { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.prod--dark .pg__th.is-on { box-shadow: 0 0 0 2px var(--coral); }
.pg__frame { position: relative; width: 100%; max-width: 560px; aspect-ratio: 3 / 4; border-radius: 30px; overflow: hidden; isolation: isolate; background: var(--paper-2);
  box-shadow: 0 44px 90px -44px rgba(13, 26, 69, .65); }
.pg:not(.pg--one) .pg__frame { cursor: pointer; }
.prod--dark .pg__frame { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); }
.pg__sl { position: absolute; inset: 0; opacity: 0; }
.pg__sl.is-on { opacity: 1; }
.pg__mask { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.pg__mask img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pg__frame .stamp { z-index: 5; }
.pg__count { position: absolute; z-index: 5; right: 18px; bottom: 18px; padding: 9px 13px 8px; border-radius: 14px; background: rgba(255, 255, 255, .9); color: var(--ink); font: 500 15px/1 var(--serif); letter-spacing: .2em; }

/* 3.B1 name · 3.B2 price and weight · 3.B3 button · 3.B4 three lines */
.pb { position: relative; z-index: 2; padding-top: 8px; }
.pb .crumbs { margin-bottom: 26px; }
.prod--dark .pb .crumbs { color: rgba(255, 255, 255, .75); }
.pb__gain { position: relative; margin: 0 0 14px; padding-left: 22px; font: italic 500 clamp(22px, 1.75vw, 28px)/1.25 var(--serif); color: var(--cobalt); max-width: 24em; }
.pb__gain::before { content: "◆"; position: absolute; left: 0; top: .5em; font: normal 9px/1 var(--sans); color: var(--red); }
.prod--dark .pb__gain { color: #fff; }
.prod--dark .pb__gain::before { color: var(--coral); }
.pb__t { margin: 0; font: 500 clamp(44px, 3.9vw, 64px)/.98 var(--serif); letter-spacing: -.01em; }
.pb__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; }
.pb__stock { display: inline-flex; align-items: center; gap: 9px; font: 600 13.5px/1 var(--sans); letter-spacing: .03em; }
.pb__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f9e57; box-shadow: 0 0 0 4px rgba(31, 158, 87, .18); }
.pb__gift { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 22px; background: rgba(255, 255, 255, .7); font: 500 13.5px/1.2 var(--sans); color: var(--ink); }
.pb__gift img { width: 34px; height: auto; }
.pb__desc { margin: 20px 0 0; font: italic 400 21px/1.4 var(--serif); color: var(--ink-2); max-width: 30em; }
.prod--dark .pb__desc { color: rgba(255, 255, 255, .8); }
.pb__spec { margin: 22px 0 0; border-top: 1px solid currentColor; }
.pb__spec > div { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: baseline; padding: 11px 0 10px; border-bottom: 1px solid var(--ink-3); }
.prod--dark .pb__spec > div { border-color: rgba(255, 255, 255, .16); }
.pb__spec dt { font: 600 11.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.pb__spec dd { margin: 0; font: 500 19px/1.3 var(--serif); }
.pb__full { grid-template-columns: 1fr !important; }
.pb__note { margin: 16px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--red); font-size: 14.5px; line-height: 1.45; }
.prod--dark .pb__note { border-color: var(--coral); }
.pb__box { margin-top: 26px; padding: 24px 26px 20px; border-radius: 26px; background: rgba(255, 255, 255, .62); box-shadow: 0 1px 0 var(--ink-3), 0 30px 60px -40px rgba(13, 26, 69, .45); }
.prod--dark .pb__box { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pb__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pb__price .price { font-size: 40px; }
.pb__unit { font: 500 16px/1.3 var(--sans); color: var(--ink-2); }
.prod--dark .pb__unit { color: rgba(255, 255, 255, .72); }
.pb__ask { font: 500 28px/1.2 var(--serif); }
.pb__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pb__cta .btn svg { width: 20px; height: 20px; }
.pb__qty { height: 58px; border-radius: 29px; }
.pb__qty button { width: 48px; height: 58px; font-size: 20px; }
.pb__qty b { min-width: 58px; font: 600 16px/1 var(--sans); text-align: center; white-space: nowrap; }
.pb__add { flex: 1; min-width: 250px; gap: .3em; }
.pb__add [data-sum] { display: inline-block; font-variant-numeric: tabular-nums; }
.prod--dark .pb__add::before { background: #fff; }
.prod--dark .pb__add:hover { color: var(--ink); }
.pb__wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font: 600 15px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.pb__wa svg { width: 20px; height: 20px; color: #1f9e57; }
.prod--dark .pb__wa { color: var(--coral); }
.pb__rate { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-3); font-size: 14px; color: var(--ink-2); }
.pb__rate b { font: 500 22px/1 var(--serif); color: var(--ink); }
.pb__star { color: var(--red); font-size: 16px; }
.prod--dark .pb__rate { color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .14); }
.prod--dark .pb__rate b { color: #fff; }
.pb__terms { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.pb__terms li { display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-items: center; }
.pb__terms img { width: 74px; height: 74px; padding: 15px; box-sizing: border-box; object-fit: contain; border: 1px solid rgba(22, 36, 94, .28);
  /* R35: the icon sits in a Delft tile with corner curls, as the trust strip of the home page (r1 → r2) */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4M4 24c0-8 6-14 14-14' fill='none' stroke='%2316245e' stroke-width='1.6'/%3E%3C/svg%3E") left 3px top 3px / 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M36 36C36 18 22 4 4 4M36 24c0-8-6-14-14-14' fill='none' stroke='%2316245e' stroke-width='1.6'/%3E%3C/svg%3E") right 3px top 3px / 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 4C4 22 18 36 36 36M4 16c0 8 6 14 14 14' fill='none' stroke='%2316245e' stroke-width='1.6'/%3E%3C/svg%3E") left 3px bottom 3px / 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M36 4C36 22 22 36 4 36M36 16c0 8-6 14-14 14' fill='none' stroke='%2316245e' stroke-width='1.6'/%3E%3C/svg%3E") right 3px bottom 3px / 18px no-repeat;
  transition: transform .8s var(--out); }
.pb__terms li:hover img { transform: rotate(-8deg) scale(1.06); }
.pb__terms p { margin: 0; }
.pb__terms b { display: block; font: 500 19px/1.25 var(--serif); }
.pb__terms span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.prod--dark .pb__terms span { color: rgba(255, 255, 255, .7); }
.prod--dark .pb__terms img, .prod--dark .pb__gift img { filter: brightness(0) invert(1); }
.prod--dark .pb__gift { background: rgba(255, 255, 255, .1); color: #fff; }
.pb__more { margin-top: 18px; font-size: 15px; }

/* ---------- 3.B5 facts ---------- */
.pf { padding-top: 96px; padding-bottom: 40px; }
.pf__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.pf__grid--one { grid-template-columns: minmax(0, 760px); }
.pf__about p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 40em; }
.pf__about .pf__lead { font: italic 400 clamp(23px, 1.85vw, 29px)/1.42 var(--serif); color: var(--ink); margin-bottom: 22px; }
.pf__extra { display: none; }
.pf__about.is-open .pf__extra { display: block; animation: accin .5s var(--out); }
.pf__more { font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.pf__card { position: relative; padding: 30px 32px 30px; border-radius: 26px; background: var(--paper) url(../img/paper.webp); box-shadow: 0 1px 0 var(--ink-3), 0 30px 60px -40px rgba(13, 26, 69, .45); }
.pf__card::before { content: ""; position: absolute; left: 32px; right: 32px; top: 58px; height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pf__card > .t-cap { display: block; margin-bottom: 30px; }
.pf__rows > div { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: baseline; padding: 12px 0 11px; border-bottom: 1px solid var(--ink-3); }
.pf__rows dt { font: 600 11.5px/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pf__rows dd { margin: 0; font: 500 20px/1.3 var(--serif); }
.pf__rows .pf__full { grid-template-columns: 1fr; }
.pf__rows .pf__full dd { font-style: italic; }
.pf__kbju { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border-top: 4px double var(--ink); }
.pf__kbju > div { display: grid; align-content: start; gap: 6px; padding: 16px 10px 0 0; }
.pf__kbju > div + div { padding-left: 14px; border-left: 1px solid var(--ink-3); }
.pf__kbju span { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pf__kbju b { font: 500 34px/1 var(--serif); }
.pf__store { display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: center; margin-top: 18px; padding: 18px 24px 18px 18px; border-radius: 22px; background: var(--paper-2) url(../img/paper.webp); background-blend-mode: multiply; }
.pf__store img { width: 58px; height: auto; transition: transform .8s var(--out); }
.pf__store:hover img { transform: rotate(20deg); }
.pf__store p { margin: 0; }
.pf__store .t-cap { display: block; margin-bottom: 6px; font-size: 11px; opacity: .7; }
.pf__store b { font: 500 21px/1.3 var(--serif); }

/* ---------- 3.B6 how the live crab travels ---------- */
.plv { padding-top: 130px; overflow-x: clip; }
.plv .wrap { position: relative; z-index: 2; }
.plv__head { margin-bottom: 30px; }
.plv__lead { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .82); }
/* the route engraving stays ink on paper — a clipping from the newspaper on the sea */
.plv__route { margin: 0 0 46px; padding: 22px 46px 18px; border-radius: 28px; background: var(--paper) url(../img/paper.webp); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.plv__route img { display: block; width: 100%; max-width: 1040px; margin: 0 auto; }
.plv__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.plv__steps li { display: grid; align-content: start; gap: 14px; }
.plv__pic { position: relative; margin: 0 0 6px; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.plv__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.plv__steps li:hover .plv__pic img { transform: scale(1.05); }
.plv__steps i { font: italic 500 40px/1 var(--serif); color: var(--coral); }
.plv__steps p { margin: 0; font: 400 22px/1.38 var(--serif); max-width: 22em; }
.plv__rec { color: var(--coral); font-size: 15px; margin-top: 4px; justify-self: start; }

/* ---------- 3.B7 questions ---------- */
.pq { overflow-x: clip; }
.pq__wa .coral { white-space: nowrap; }
.pq__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: start; }
.pq .t-h2 { font-size: clamp(40px, 3.8vw, 60px); margin: 16px 0 30px; }
.pq__cal { margin: 4px 0 8px; }
.pq__cal > div { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 3px 0; }
.pq__cal dt { font: 500 22px/1.2 var(--serif); color: var(--ink); }
.pq__cal dd { margin: 0; align-self: center; }
.pq__wa { position: relative; margin-top: 44px; padding: 44px 40px 40px; border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; }
.pq__wa .t-h3 { position: relative; z-index: 2; margin-bottom: 26px; }
.pq__wa .btn { position: relative; z-index: 2; }
.pq__gull { position: absolute; right: -18px; top: -6px; width: 180px; filter: brightness(0) invert(1); opacity: .22; transform: rotate(-6deg); }
.pq__shell { width: 110px; left: 2%; bottom: 40px; opacity: .45; }

/* ---------- 3.B8 reviews ---------- */
.pr__top { display: grid; grid-template-columns: 280px 1fr auto; gap: 50px; align-items: end; margin-bottom: 46px; }
.pr__score { display: grid; gap: 6px; }
.pr__big { font: 500 112px/.9 var(--serif); }
.pr__stars { color: var(--red); font-size: 20px; letter-spacing: 6px; }
.pr__score em { font-style: normal; font-size: 14px; color: var(--ink-2); }
.pr__top .t-h2 { font-size: clamp(40px, 3.8vw, 60px); }
.pr__all { margin-bottom: 10px; }
.pr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.prv { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 22px; border-radius: 24px; background: var(--paper) url(../img/paper.webp); box-shadow: 0 1px 0 var(--ink-3); }
.prv::before { content: "“"; position: absolute; right: 22px; top: 4px; font: 500 96px/1 var(--serif); color: var(--cobalt); opacity: .22; }
.prv__t { margin: 0; font: 400 20px/1.42 var(--serif); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.prv.is-open .prv__t { display: block; }
.prv__more { align-self: start; font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.prv__who { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ink-3); font-size: 13px; color: var(--ink-2); }
.prv__who b { color: var(--ink); font-weight: 600; }

/* ---------- 3.B9 taken together ---------- */
.pw { overflow-x: clip; }
.pw .wrap { position: relative; z-index: 2; }
.pw__cap { display: block; margin-bottom: 18px; }
.pw__anchor { width: 104px; right: 30%; top: 70px; opacity: .45; }
.pw__grid .tile__img { box-shadow: 0 24px 50px -28px rgba(13, 26, 69, .45); }
/* the gift label's scissors: base.css `.tile__img img` makes it absolute and it covers «Но…» — keep it in the row */
.tile__img .gift img { position: static; inset: auto; width: 34px; height: auto; }
.pw__rec { display: flex; flex-direction: column; gap: 8px; }
.pw__rimg { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: 0 24px 50px -28px rgba(13, 26, 69, .45); margin-bottom: 8px; }
.pw__rimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.pw__rec:hover .pw__rimg img { transform: scale(1.05); }
.pw__rec .t-cap { font-size: 11px; opacity: .7; }
.pw__rt { font: 500 23px/1.12 var(--serif); }
.pw__rt svg { display: inline-block; width: 18px; height: 18px; vertical-align: -2px; color: var(--red); transition: transform .5s var(--out); }
.pw__rec:hover .pw__rt svg { transform: translateX(5px); }
.pw__rl { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

@media (max-width: 1100px) {
  .pd__grid, .pf__grid, .pq__grid { grid-template-columns: 1fr; gap: 48px; }
  .pr__top { grid-template-columns: 1fr; gap: 20px; }
  .pr__grid, .plv__steps { grid-template-columns: 1fr 1fr; }
  .pw__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pg { grid-template-columns: 1fr; }
  .pg__thumbs { grid-auto-flow: column; justify-content: start; order: 2; }
  .pr__grid, .plv__steps { grid-template-columns: 1fr; }
  .pf__kbju { grid-template-columns: 1fr 1fr; }
}