/* Демо-вітрина: одна разметка, три каркаса по data-skin (maker — завод, shop — магазин, studio — студия).
   Телефон: нижняя панель, разделы лентой-фишками, карточки строкой «кадр + текст», 3D — в листе по тапу. */

/* плашка демо — несворачиваемая, на всех раскладках */
.demo-banner { background: var(--banner-bg); color: var(--banner-ink); display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 8px var(--gut); font-size: .86rem; line-height: 1.4; }
.demo-banner p { margin: 0; min-width: 0; }
.demo-banner a { color: #ffd76a; }

/* шапка в характере компании */
.hd { background: var(--bg); border-bottom: 1px solid var(--line); }
.hd-strip { background: var(--c2); color: var(--c2-ink); font-size: .8rem; padding: 6px var(--gut); text-transform: var(--nav-tt); letter-spacing: var(--nav-ls); }
.hd-main { max-width: var(--max); margin: 0 auto; padding: 12px var(--gut); display: flex; align-items: center; gap: 20px; }
.logo-slot { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px;
  border: 2px dashed var(--c1-text); color: var(--c1-text); border-radius: 6px; font: 800 .78rem/1.1 var(--head-font); letter-spacing: .06em; }
.hd-nav { display: flex; gap: 4px 18px; flex-wrap: wrap; min-width: 0; flex: 1; }
.hd-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; text-transform: var(--nav-tt); letter-spacing: var(--nav-ls);
  padding: 10px 0; border-bottom: 2px solid transparent; }
.hd-nav a:hover { border-bottom-color: var(--c1); }
.hd-make { flex-shrink: 0; }

/* герой */
.hero { max-width: var(--max); margin: 0 auto; padding: 28px var(--gut) 8px; display: grid; gap: 24px; align-items: center; }
.hero-txt { min-width: 0; }
.hero-3d { margin: 0; position: relative; background: var(--c1-soft); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.hero-3d .still { width: 100%; height: 100%; object-fit: cover; }
.hero-3d .live { position: absolute; inset: 0; }
.hero-3d .live:empty { display: none; }
.hero-3d .tap3d { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.hero-3d figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; font-size: .78rem; color: var(--muted); background: rgba(255,255,255,.82); }
.hero-3d.is-live .still, .hero-3d.is-live .tap3d, .hero-3d.is-live figcaption { visibility: hidden; }

/* каталог */
.cats, .size, .embed, .widget, .about { max-width: var(--max); margin: 0 auto; padding: 32px var(--gut) 8px; }
.sec-hd p { color: var(--muted); max-width: 70ch; }
.chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x pan-y; padding: 4px 0 12px; margin-bottom: 8px; position: relative; }
.chip { flex-shrink: 0; cursor: pointer; font-family: var(--body-font); scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid var(--line); }
.chip[aria-pressed="true"] { background: var(--c1); color: var(--c1-ink); border-color: var(--c1); }
.chip[aria-pressed="true"] span { background: var(--c1-ink); color: var(--c1); }
.chip span { background: var(--c1); color: var(--c1-ink); border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
.cat { margin-top: 20px; scroll-margin-top: 12px; }
.cat-h { font-size: 1.25rem; padding-bottom: 8px; border-bottom: 3px solid var(--c1); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cat-h span { font: 600 .8rem/1 var(--body-font); color: var(--muted); }
.grid { display: grid; gap: 16px; margin-top: 16px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; min-width: 0; }
.card-media { position: relative; background: var(--surface); }
.card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.noimg { display: block; aspect-ratio: 4 / 3; }
.tag { position: absolute; left: 8px; top: 8px; background: var(--c1); color: var(--c1-ink); font: 700 .74rem/1 var(--body-font); padding: 6px 8px; border-radius: 6px; }
.card-body { padding: 12px 14px 14px; min-width: 0; display: flex; flex-direction: column; }
.card-t { font-size: 1rem; margin-bottom: .3em; }
.card-cat { margin: 0 0 .25em; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c1-text); }
.card-size { margin: 0 0 .2em; font-size: 1.05rem; }
.card-size b { color: var(--c1-text); font-size: 1.2rem; }
.card-size span, .card-meta { color: var(--muted); font-size: .85rem; }
.card-meta { margin: 0 0 .2em; }
.card-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 52px; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .88rem/1 var(--body-font); text-decoration: none; cursor: pointer; }
.act:hover { border-color: var(--c1); }
.act-3d { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.act-ar img { width: 18px; height: 18px; }
.act-make { flex: 1 1 auto; }

/* свой размер, код, виджет */
.size > div { background: var(--c1-soft); border-radius: var(--radius-lg); padding: 24px; }
.ticks { padding-left: 1.2em; margin: 0 0 1em; }
.ticks li { margin: .3em 0; }
.code { background: #111614; color: #e6efe9; padding: 16px; border-radius: var(--radius); overflow-x: auto; font: .82rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; }
.widget { text-align: center; }
.widget > * { margin-left: auto; margin-right: auto; max-width: 62ch; }
.widget h2 { color: var(--c1-text); }
.about p { color: var(--muted); max-width: 80ch; font-size: .92rem; }
.sheet-body > div { min-height: 300px; }

/* нижняя панель — только телефон */
.bottom { display: none; }

@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  body.demo { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .demo-banner { flex-wrap: wrap; font-size: .8rem; }
  .hd-strip { display: none; }
  .hd-main { padding: 10px var(--gut); }
  .hd-nav, .hd-make { display: none; }
  .hd-main { justify-content: space-between; }
  .hero-3d { order: -1; aspect-ratio: 16 / 10; }
  .hero h1 { font-size: 1.7rem; }
  .hero .lead { font-size: 1rem; }
  .hero { padding-top: 16px; }
  .hero-3d .tap3d { bottom: 14px; }
  .hero-3d figcaption { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card { grid-template-columns: 38% minmax(0, 1fr); }
  .card-media img { height: 100%; }
  .card-act { grid-column: 1 / -1; }
  .card-body { display: contents; }
  .card-body > :not(.card-act) { grid-column: 2; padding: 0 12px; }
  .card-cat { padding-top: 10px !important; }
  .card-t { font-size: .95rem; }
  .card-act { padding: 8px 12px 12px; }
  .card-media { grid-row: 1 / span 4; }
  .bottom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bg); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .bottom a, .bottom button { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 0; background: transparent;
    color: var(--ink); font: 600 .82rem/1.1 var(--body-font); text-decoration: none; text-align: center; cursor: pointer; padding: 4px; }
  .bottom .hl { background: var(--btn); color: var(--btn-ink); }
}
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine) { .chips { flex-wrap: wrap; overflow: visible; } }
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px), (min-width: 761px) and (max-width: 1100px) and (pointer: fine) {
  .hd-nav { display: none; }
  .hd-main { justify-content: space-between; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1101px) and (min-height: 501px), (min-width: 1101px) and (pointer: fine) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: 44px; gap: 48px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .size > div { display: grid; padding: 36px 40px; }
}

/* ---------- каркасы ---------- */
/* maker: завод — полоса сверху, плотные разделы с кодами FEFCO, прямые формы */
[data-skin="maker"] .hero { background: none; }
[data-skin="maker"] .cat-h { text-transform: var(--nav-tt); letter-spacing: var(--nav-ls); }

/* shop: магазин — цветная шапка, фишки крупнее, сетка плотнее */
[data-skin="shop"] .hd { background: var(--c1); border-bottom: 0; }
[data-skin="shop"] .hd-nav a { color: var(--c1-ink); }
[data-skin="shop"] .hd-nav a:hover { border-bottom-color: var(--c1-ink); }
[data-skin="shop"] .logo-slot { border-color: var(--c1-ink); color: var(--c1-ink); }
[data-skin="shop"] .hd-make, [data-skin="shop"] .hd .langs a { color: var(--c1-ink); border-color: var(--c1-ink); }
[data-skin="shop"] .card-size b { color: var(--ink); }
[data-skin="shop"] .act-3d { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
@media (min-width: 1101px) and (min-height: 501px), (min-width: 1101px) and (pointer: fine) { [data-skin="shop"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* studio: студия — воздух, крупные карточки без рамок, акцентная типографика */
[data-skin="studio"] .hd { border-bottom: 0; }
[data-skin="studio"] .hero-3d { border-radius: var(--radius-lg); }
[data-skin="studio"] .card { border: 0; background: var(--surface); }
[data-skin="studio"] .cat-h { border-bottom: 0; }
[data-skin="studio"] .cat-h::after { content: ""; display: block; width: 100%; height: 0; }
@media (min-width: 1101px) and (min-height: 501px), (min-width: 1101px) and (pointer: fine) {
  [data-skin="studio"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  [data-skin="studio"] h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); }
}