/* Секция «Как может выглядеть ваша книга», fotocvet.ru.
   Все селекторы начинаются с .pb-look. Глобальных правил нет, @import нет.
   Пакет Claude Design (02.09.2026), правки под лендинг по образцу how-it-works/pb-book.css:
   Golos Text -> Golos (так семейство названо в инлайн-стилях fotokniga.html),
   боковое поле через --pb-pad (16/32/48, те же ступени, что у --gutter в style.css:
   сама переменная на лендинг не доезжает, см. комментарий у .head-in в fotokniga.html),
   шрифты книги объявлены здесь: лендинг /lib/fonts/fonts.css не подключает, а Onest на нём
   нет вовсе. Playfair на лендинге только кириллический сабсет 700 без unicode-range - без
   латинского файла цифры года «2025» на обложке падали бы в Georgia. */

/* Onest - те же файлы и диапазоны, что в style.css Мастерской */
@font-face{font-family:'Onest';src:url('/assets/fonts/onest-var-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';src:url('/assets/fonts/onest-var-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* Playfair Display 700: латинский сабсет в дополнение к кириллическому из fotokniga.html */
@font-face{font-family:'Playfair Display';src:url('/lib/fonts/PlayfairDisplay-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F}
/* Caveat - копия объявления из how-it-works/pb-book.css: файл остаётся самодостаточным,
   браузер один и тот же woff2 второй раз не грузит */
@font-face{font-family:'Caveat';src:url('/lib/fonts/Caveat-var-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';src:url('/lib/fonts/Caveat-var-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F}
/* Unbounded 400 - четвёртый шрифт обложки (02.09). Сабсеты с Google Fonts в assets/fonts/, как у
   Onest: полный TTF из lib/fonts/ttf нужен печати, на витрину его 778 КБ не тащим. Вес один,
   coverFontWeight для unbounded всегда 400. */
@font-face{font-family:'Unbounded';src:url('/assets/fonts/unbounded-400-cyrillic.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';src:url('/assets/fonts/unbounded-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.pb-look *{box-sizing:border-box}

.pb-look{
  /* токены витрины, объявлены локально и наружу не выходят */
  --pb-ink:#2e1c12;
  --pb-muted:#7d6f64;
  --pb-bg:#fafaf7;
  --pb-accent:#ffc95c;
  --pb-accent-hover:#f7b93f;
  --pb-line:rgba(46,28,18,.12);

  /* боковое поле: телефон */
  --pb-pad:16px;

  /* состояние выбора: look.js меняет только эти три переменные */
  --pb-cover:#fbfaf7;                              /* фон обложки: цвет или url() */
  --pb-cover-ink:#1a1a1a;                          /* чернила обложки */
  --pb-font:'Onest',system-ui,sans-serif;          /* семейство текста книги */
  --pb-font-weight:400;                            /* вес заголовка */
  --pb-caption:1.86;                               /* кегль подписи к фото, cqi: 14pt на листе 200 мм ×1.5 для превью */

  /* высота карточки ленты; ширина считается от неё. На телефоне разворот (две высоты)
     обязан влезать в экран целиком: при 230px он был 460px на экране 390px и листался
     вечно обрезанным (правка оператора 02.09). Ниже ~492px карточка считается от ширины
     экрана минус боковые поля, выше остаётся 230. */
  --pb-card:min(230px, calc((100vw - 2 * var(--pb-pad)) / 2));

  background:var(--pb-bg);
  padding:36px 0 32px;
  font-family:'Golos',system-ui,sans-serif;
  color:var(--pb-ink);
}

.pb-look__inner{padding:0 var(--pb-pad)}

.pb-look__h2{
  margin:0;
  font:700 28px/1.15 'Lora',Georgia,serif;
  letter-spacing:-.01em;
  color:var(--pb-ink);
  text-wrap:pretty;
}
.pb-look__sub{
  margin:10px 0 0;
  font:400 16px/1.5 'Golos',system-ui,sans-serif;
  color:var(--pb-muted);
  text-wrap:pretty;
}

/* ---------- ряды выбора ---------- */

.pb-look__controls{margin-top:22px}
.pb-look__glabel{
  display:block;
  font:600 14px/1.2 'Golos',system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pb-muted);
}
.pb-look__group{padding:0 var(--pb-pad)}
.pb-look__group + .pb-look__group{margin-top:18px}

/* свотчи обложки: три подгруппы (цвет, узор, текстура) */
.pb-look__covers{
  display:flex;
  gap:18px;
  /* лента свотчей выходит в боковое поле, чтобы свайп начинался от края экрана */
  margin:10px calc(-1 * var(--pb-pad)) 0;
  padding:4px var(--pb-pad);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pb-look__covers::-webkit-scrollbar{display:none}
.pb-look__cset{flex:none;display:flex;flex-direction:column;gap:6px}
.pb-look__srow{display:flex;gap:8px}
.pb-look__cname{
  font:400 14px/1.2 'Golos',system-ui,sans-serif;
  color:var(--pb-muted);
  text-align:center;
}

.pb-look__sw{
  flex:none;
  width:44px;height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(46,28,18,.2);
  cursor:pointer;
  transition:box-shadow .15s;
}
.pb-look__sw:hover{box-shadow:0 0 0 1.5px rgba(46,28,18,.45)}
.pb-look__sw.is-on{
  box-shadow:0 0 0 1.5px rgba(46,28,18,.25),0 0 0 4px var(--pb-bg),0 0 0 5.5px var(--pb-ink);
}

/* плитки стиля текста */
.pb-look__fonts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pb-look__font{
  flex:1 1 calc(50% - 4px); /* четыре плитки на телефоне: по две в ряд */
  min-height:48px;
  padding:0 14px;
  border:1.5px solid rgba(46,28,18,.28);
  border-radius:24px;
  background:transparent;
  color:var(--pb-ink);
  font-size:15px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.pb-look__font:hover{border-color:rgba(46,28,18,.5)}
.pb-look__font.is-on{border-color:var(--pb-ink);background:#fff}
/* подпись плитки набрана тем самым шрифтом, который она включает */
.pb-look__font[data-font="onest"]{font-family:'Onest',system-ui,sans-serif;font-weight:400}
.pb-look__font[data-font="playfair"]{font-family:'Playfair Display',Georgia,serif;font-weight:600}
.pb-look__font[data-font="caveat"]{font-family:'Caveat',cursive;font-weight:400;font-size:18px}
.pb-look__font[data-font="unbounded"]{font-family:'Unbounded',system-ui,sans-serif;font-weight:400}

/* ---------- лента ---------- */

.pb-look__strip{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:24px;
  padding:2px var(--pb-pad) 8px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pb-look__strip::-webkit-scrollbar{display:none}
.pb-look__item{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  scroll-snap-align:center;
}
.pb-look__cap{
  font:600 14px/1.2 'Golos',system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pb-muted);
  text-align:center;
}

/* карточка = лист или разворот. container-type нужен для cqi-кеглей внутри. */
.pb-look__page,
.pb-look__spread{
  position:relative;
  height:var(--pb-card);
  overflow:hidden;
  container-type:inline-size;
  box-shadow:0 1px 3px rgba(46,28,18,.2),0 6px 14px rgba(46,28,18,.12);
}
.pb-look__page{width:var(--pb-card);background:var(--pb-cover)}
.pb-look__spread{width:calc(var(--pb-card) * 2);background:#fff}

/* кадр в слоте: геометрия идёт из разметки через --l/--t/--w/--h,
   числа взяты из шаблонов альбома (доли f:[x,y,w,h] разворота) */
.pb-look__slot{
  position:absolute;
  left:var(--l);
  top:var(--t);
  width:var(--w);
  height:var(--h);
  object-fit:cover;
  display:block;
}

/* корешок */
.pb-look__gutter{
  position:absolute;
  left:50%;
  top:0;bottom:0;
  width:16px;
  margin-left:-8px;
  background:linear-gradient(90deg,
    rgba(46,28,18,0),
    rgba(46,28,18,.14) 45%,
    rgba(46,28,18,.24) 50%,
    rgba(46,28,18,.09) 56%,
    rgba(46,28,18,0));
}

/* ---------- текст обложки ----------
   Раскладка по DEFAULT_COVER_TEXT (shared/cover-render-spec.js):
   текстовая зона от 0.76 высоты листа, поля 0.08, заголовок 9cqw,
   подпись 3.78cqw капителью, трекинг 0.18em, прозрачность 0.75. */
.pb-look__ctext{position:absolute;left:8%;top:76%;width:84%;text-align:center}
.pb-look__ctitle{
  font-family:var(--pb-font);
  font-weight:var(--pb-font-weight);
  font-size:9cqi;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--pb-cover-ink);
}
.pb-look__csub{
  margin-top:3%;
  font-family:var(--pb-font);
  font-weight:400;
  font-size:3.78cqi;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
  color:var(--pb-cover-ink);
}

/* логотип на задней крышке: BACK_LOGO_SIZE_PT 11pt = 1.94% ширины листа */
.pb-look__logo{
  position:absolute;
  left:0;right:0;
  bottom:8%;
  text-align:center;
  font-family:var(--pb-font);
  font-weight:400;
  font-size:1.94cqi;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.75;
  color:var(--pb-cover-ink);
}

/* ---------- текстовая страница разворота (shared/album-text-zones.js textPageBoxMm) ----------
   У движка на текстовой странице ОДИН текст одним кеглем: заголовка и подзаголовка нет.
   Бокс = страница минус safe-поле 10 мм снаружи и зона корешка 10 мм изнутри (лист 200 мм):
   левая страница 2.5..47.5% ширины разворота, 5..95% высоты. Выравнивание «по центру» и
   вертикаль «middle» - штатные опции зоны. Кегль = размер «крупнее» (FONT_PT_BY_SIZE large:
   20/20/26/17pt) - у всех семейств это 1.43 × базового, поэтому считается от --pb-caption. */
.pb-look__textpage{
  position:absolute;
  left:2.5%;top:5%;
  width:45%;height:90%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.pb-look__ptext{
  font-family:var(--pb-font);
  font-weight:var(--pb-font-weight);
  font-size:calc(var(--pb-caption) * 1.43cqi);
  line-height:1.35;
  color:#1a1a1a;
  text-wrap:pretty;
}

/* ---------- подпись к фото (shared/album-text-zones.js) ----------
   Зона = полоса под фото-блоком шириной с сам блок, прижата к кадру с зазором ZONE_GAP_MM
   (2 мм = 1% высоты листа), кегль по семейству (--pb-caption ставит look.js), межстрочный
   LINE_FACTOR 1.35, чернила заполненной зоны #1a1a1a. Позиция задаётся в разметке. */
.pb-look__caption{
  position:absolute;
  left:2.5%;width:45%;top:80.1%;
  font-family:var(--pb-font);
  font-weight:400;
  font-size:calc(var(--pb-caption) * 1cqi);
  line-height:1.35;
  color:#1a1a1a;
  text-align:center; /* зона 2.5..47.5% симметрична странице: центр текста = центр страницы */
}

/* ---------- кнопка ---------- */
.pb-look__cta{margin-top:24px;padding:0 var(--pb-pad)}
.pb-look__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  border:0;
  border-radius:14px;
  background:var(--pb-accent);
  color:var(--pb-ink);
  font:600 17px 'Golos',system-ui,sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s;
}
.pb-look__btn:hover{background:var(--pb-accent-hover)}
.pb-look__note{
  margin:10px 0 0;
  text-align:center;
  font:400 14px/1.4 'Golos',system-ui,sans-serif;
  color:var(--pb-muted);
}

/* ---------- планшет ---------- */
@media (min-width:768px){
  .pb-look{padding:48px 0 44px;--pb-card:240px;--pb-pad:32px}
  .pb-look__h2{font-size:32px}
  .pb-look__strip{scroll-snap-type:none;gap:18px}
  .pb-look__font{flex:1 1 0} /* от планшета четыре плитки в один ряд */
  .pb-look__btn{width:auto;padding:0 42px;min-height:60px;font-size:18px}
  .pb-look__cta{display:flex;flex-direction:column;align-items:center;gap:8px}
  .pb-look__note{margin:0}
}

/* ---------- десктоп: рассчитано на 13″ (1280×720 без прокрутки) ---------- */
@media (min-width:1024px){
  .pb-look{padding:36px 0 40px;--pb-card:250px;--pb-pad:48px}
  .pb-look__inner{text-align:center}
  .pb-look__h2{font-size:36px;letter-spacing:-.015em}
  .pb-look__sub{margin:8px auto 0;max-width:560px;font-size:17px}

  .pb-look__controls{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:36px;
    margin-top:26px;
    padding:0 var(--pb-pad);
  }
  .pb-look__group + .pb-look__group{margin-top:0}
  .pb-look__group{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0}
  .pb-look__covers{margin:0;padding:0;gap:20px;overflow:visible}
  .pb-look__srow{gap:9px}
  .pb-look__sw{width:40px;height:40px}
  .pb-look__fonts{margin-top:0}
  .pb-look__font{flex:none;padding:0 22px}
  .pb-look__sep{align-self:stretch;width:1px;margin:22px 0 8px;background:var(--pb-line)}

  .pb-look__strip{gap:20px;margin-top:28px;padding:2px var(--pb-pad) 10px}
  .pb-look__gutter{width:20px;margin-left:-10px}
  .pb-look__page,
  .pb-look__spread{box-shadow:0 1px 3px rgba(46,28,18,.2),0 8px 18px rgba(46,28,18,.12)}
  .pb-look__cta{margin-top:26px}
}

/* разделитель между рядами нужен только на десктопе */
.pb-look__sep{display:none}
@media (min-width:1024px){.pb-look__sep{display:block}}