/* ═══ Доп. услуги: рама, открытки и наклейки, упаковка ════════════════
   Шаблон templates/v2/extra.php. Значения — токены .v2 (v2.css,
   v2-pages.css) и один токен страницы ниже. От 375 px вверх:
   @media (min-width) только добавляет. */

.v2{
  /* токен страницы: ширина врезки «уголок вблизи» на кадре рамы (у серьги на главной --near: 48%; уголок читается мельче и не закрывает лицо) */
  --x-near:36%;
  /* токен страницы: потолок кадра шапки на телефоне — кадр встаёт сразу под H1 и целиком виден в первом окне вместе с кнопкой */
  --x-head-sm:36svh;
}

/* ── 01 · шапка ──
   Телефон: крошки без последнего звена (повтор H1 скрывает общее правило .crumbs,
   v2-pages.css), кадр сразу под H1 с потолком --x-head-sm, за ним кнопки, лид
   и примечание: предмет страницы виден в первом окне, а не только текстом. */
.v2 .xhead .phead__say{display:contents}
.v2 .xhead .phead__media{order:1;justify-self:start}
.v2 .xhead .phead__frame img{width:auto;max-width:100%;height:auto;max-height:var(--x-head-sm)}
.v2 .xhead .phead__cta{order:2}
.v2 .xhead .phead__lead{order:3}
.v2 .xhead .phead__note{order:4}
/* Акция на упаковку — строкой-бейджем, как скидка. */
.v2 .xhead--upakovka .phead__note{justify-self:start;max-width:var(--measure-l);padding:var(--s-1) var(--s-2);border-radius:var(--r-btn);background:var(--acc-soft);color:var(--acc-ink);font-weight:600}

/* ── 02 · варианты ── */
.v2 .xv__in{display:grid;gap:var(--s-5)}
.v2 .xv__head{margin-bottom:0}
.v2 .xv__group{display:grid;gap:var(--s-4);min-width:0}
.v2 .xv__group+.xv__group{margin-top:var(--s-4)}
.v2 .xv__gt{display:flex;align-items:baseline;gap:var(--s-1);font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .xv__gn{font:600 var(--t-s)/1 var(--f-b);color:var(--ink-2)}
.v2 .xr__on,.v2 .xv__on{display:none}

/* Лента рам: телефон — карточка --rail и край следующей; стрелки и счётчик под лентой (v2.js, [data-rail]). */
.v2 .xr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;list-style:none;align-items:stretch}
.v2 .xr-rail::-webkit-scrollbar{display:none}
.v2 .xr{position:relative;scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;gap:var(--s-3);min-width:0}
.v2 .xr__art{position:relative;border-radius:var(--r-img);outline:var(--ring) solid transparent;outline-offset:var(--s-0);transition:outline-color var(--dur) var(--ease)}
.v2 .xr__main{display:block;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .xr__main img{display:block;width:100%;height:auto}
/* Уголок вблизи — врезкой в правом нижнем углу, как серьга «вблизи» у уровней главной. */
.v2 .xr__near{position:absolute;right:var(--s-2);bottom:var(--s-2);width:var(--x-near);border-radius:var(--r-img);box-shadow:0 0 0 var(--ring) var(--card),var(--shadow)}
.v2 .xr__near img{display:block;width:100%;height:auto;border-radius:var(--r-img)}
.v2 .xr__say{display:grid;grid-template-rows:auto 1fr;align-content:start;gap:var(--s-1)}
/* Кнопки всех карточек ленты — на одной линии при любой длине описания. */
.v2 .xr__say>:last-child{align-self:end}
.v2 .xr__h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-0) var(--s-1);font:600 var(--t-h3)/1.25 var(--f-d)}
/* Признак рамы («молочный с позолотой») — строкой под номером: чем рамы отличаются, видно без описания. */
.v2 .xr__feat{order:1;flex-basis:100%;font:500 var(--t-ui)/1.4 var(--f-b);color:var(--ink-2)}
/* Описание — четыре строки; целиком оно в HTML и в окне просмотра (data-dlg-sub). */
.v2 .xr__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:var(--t-s);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.v2 .xr__price{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .xr__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin-top:var(--s-1)}
.v2 .xr.is-picked .xr__art{outline-color:var(--acc)}
.v2 .xr.is-picked .xr__on,.v2 .xv__tile.is-picked .xv__on{display:inline-flex}
.v2 .xv__bar{border-top:0;padding-top:0}

/* Сетка открыток, наклеек, упаковок: 2 колонки, 3 от 600, 4 от 900; на телефоне первые шесть и «Ещё N». */
.v2 .works__grid.xv__grid{gap:var(--s-4) var(--s-2)}
.v2 .xv__a{display:grid;gap:var(--s-1);color:inherit;text-decoration:none}
.v2 .xv__img{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;background:var(--linen);outline:var(--ring) solid transparent;outline-offset:calc(var(--ring) * -1);transition:outline-color var(--dur) var(--ease)}
.v2 .xv__img img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform var(--dur-img) var(--ease)}
.v2 .xv__on{position:absolute;left:var(--s-1);top:var(--s-1)}
.v2 .xv__cap{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .xv__a:hover .xv__cap{color:var(--acc)}
.v2 .xv__tile.is-picked .xv__img{outline-color:var(--acc)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.v2 .xv__a:hover .xv__img img{transform:scale(1.03)}}

@media (min-width:600px){
  .v2 .xhead .phead__say{display:grid}
  .v2 .xhead .phead__media{order:0;justify-self:stretch}
  .v2 .xhead .phead__frame img{width:100%;max-height:none}
  .v2 .xhead :is(.phead__cta,.phead__lead,.phead__note){order:0}
  .v2 .xr-rail{grid-auto-columns:calc((100% - var(--s-4)) / 2)}
  .v2 .works__grid.xv__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .v2 .xr-rail{grid-auto-columns:calc((100% - 2 * var(--s-4)) / 3);margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .v2 .works__grid.xv__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .v2 .xv__group+.xv__group{margin-top:var(--s-5)}
}
@media (min-width:1200px){
  .v2 .xr-rail{grid-auto-columns:calc((100% - 3 * var(--s-4)) / 4)}
}

/* ── 06 · перелинковка и SEO-текст: соседние секции на сливках, верх второй — --sec-near ── */
.v2 .xlinks{padding-bottom:0}
.v2 .xseo{padding-block:var(--sec-near) var(--sec)}
/* SEO-текст на телефоне — первый абзац и «Читать полностью»: общий prose fold (.prose__more, v2-pages.css и v2-pages.js). */

/* ── 03 · из чего и как: сразу за вариантами на тех же сливках, отступ сверху даёт секция вариантов ── */
.v2 .xv+.craft{padding-top:0}