/* =====================================================================
   SUPERALBUM — каталог (огляд власника 05.11.2026, п.19, 21, 22, 23). Сторінки: index, albumschool, vypuskni-albomy-lviv,
   album1-4, albumsad. Поведінка — js/sa-cat.js (шторки й відео — стилі там само). Класи — лише scat-*.
   Телефонні правила — у @media (max-width:767px).
   ===================================================================== */

/* ── п.19 картка дизайну: «Опції · N, торкнись» + рядок мініатюр 48 px (реальні розвороти) ── */
html body #designs .design-mini li.dm-perks.scat-opts{ display:block; padding:8px 0 2px; border-bottom:0; }
html body #designs .scat-cap{ position:relative; display:inline-flex; align-items:center; min-height:30px; margin:0; padding:0; border:0; background:none;
  color:var(--ink); font:inherit; font-size:12.5px; font-weight:800; line-height:1.2; letter-spacing:-.005em; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html body #designs .scat-cap::after{ content:""; position:absolute; inset:-7px -8px; }
html body #designs .scat-cap span.scat-cap-t{ width:auto; font-weight:600; color:var(--muted); }
html body #designs .scat-cap:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
html body #designs .scat-row{ display:flex; gap:6px; margin:4px -2px 0; padding:2px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding-inline:2px; }
html body #designs .scat-row::-webkit-scrollbar{ display:none; }
html body #designs .scat-row i[data-opt]{ position:relative; display:block; flex:0 0 48px; width:48px; height:48px; border-radius:10px; overflow:hidden;
  background:var(--bg-soft); box-shadow:inset 0 0 0 1px rgba(20,20,22,.08); cursor:pointer; scroll-snap-align:start; -webkit-tap-highlight-color:transparent;
  transition:transform .15s, box-shadow .2s, opacity .2s; }
html body #designs .scat-row i[data-opt] img{ display:block; width:100%; height:100%; object-fit:cover; }
html body #designs .scat-row i[data-opt]::after{ content:none; }
html body #designs .scat-row i[data-opt]:active{ transform:scale(.95); }
html body #designs .scat-row i[data-opt]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
html body #designs .scat-row i.on[data-opt]{ box-shadow:0 0 0 2px var(--gold); }   /* фільтр «Опції» над каталогом підсвічує мініатюру */
@media (hover:hover){ html body #designs .scat-row i[data-opt]:hover{ transform:translateY(-1px); box-shadow:0 0 0 1.5px var(--ink-soft); } }
/* ПК і планшет: усі мініатюри видно (без прихованої прокрутки, до якої мишею не дістатися) — переносимо в другий ряд */
@media (min-width:768px){
  html body #designs .scat-row{ flex-wrap:wrap; overflow:visible; scroll-snap-type:none; gap:5px; }
  html body #designs .scat-row i[data-opt]{ flex:0 0 40px; width:40px; height:40px; border-radius:9px; }
}

/* ── п.21 кнопка «грати» на обкладинці (є лише коли є відео; додає js/sa-cat.js) ── */
html body #designs .design-media .scat-play{ position:absolute; right:10px; bottom:10px; z-index:3; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.95); color:#141416;
  box-shadow:0 4px 14px rgba(0,0,0,.2); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s, background .2s; }
html body #designs .design-media .scat-play svg{ width:18px; height:18px; margin-left:3px; fill:currentColor; }
html body #designs .design-media .scat-play:hover{ background:#fff; transform:scale(1.05); }
html body #designs .design-media .scat-play:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ── п.23 блок «Серії Light, Classic і Luxe» схований (довідка — у шторці зі значка серії) ── */
/* значок серії на картці — кнопка шторки «Серії» і на ПК (раніше на ПК його перекривав прозорий шар .design-media::before — клік відкривав сторінку альбому) */
html body #designs .design-cat[role="button"]{ z-index:2; }
html body #designs .design-cat[role="button"]::after{ content:""; position:absolute; inset:-12px -10px; }   /* зона дотику ≥ 44 px заввишки */
html body #designs .design-cat[role="button"]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
html body #levels[hidden]{ display:none !important; }

/* ── п.23 «Цитата» як розворот: зліва фото реальної віньєтки, справа текст ── */
html body #tsytaty-teaser .scat-q{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(20,20,22,.07); }
html body #tsytaty-teaser .scat-q::before{ content:""; position:absolute; top:0; bottom:0; left:53.49%; z-index:1; width:34px; margin-left:-17px; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,20,22,0), rgba(20,20,22,.07) 42%, rgba(20,20,22,.13) 50%, rgba(20,20,22,.07) 58%, rgba(20,20,22,0)); }   /* згин розвороту */
html body #tsytaty-teaser .scat-q-ph{ display:flex; align-items:center; justify-content:center; margin:0; padding:clamp(18px,3vw,34px); background:var(--bg-warm,#f6f1e8); }
html body #tsytaty-teaser .scat-q-ph picture{ display:block; width:100%; min-width:0; }
html body #tsytaty-teaser .scat-q-ph img{ display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 12px 30px rgba(20,20,22,.14); }
html body #tsytaty-teaser .scat-q-copy{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(24px,4vw,52px); }
html body #tsytaty-teaser .scat-q-copy h2{ margin:6px 0 12px; }
html body #tsytaty-teaser .scat-q-lead{ margin:0 0 24px; font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:36ch; }

/* ── п.22 головна: таблиця знижки з готовими цінами «Хіта продажів» (вигляд — як у вікні «Скільки класів замовляють разом?») ── */
html body #discount .scat-dc{ width:100%; margin-top:18px; border-collapse:separate; border-spacing:0 7px; }
html body #discount .scat-dc caption{ caption-side:top; text-align:left; padding:0 0 4px; font-size:15px; font-weight:700; color:var(--ink); }
html body #discount .scat-dc caption a{ color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
html body #discount .scat-dc thead th{ padding:4px 14px 0; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; border:0; }
html body #discount .scat-dc thead th.scat-dc-d{ text-align:center; }
html body #discount .scat-dc thead th.scat-dc-p{ text-align:right; }
html body #discount .scat-dc tbody th, html body #discount .scat-dc tbody td{ height:54px; padding:0 14px; border:0; background:var(--bg-soft); font-size:15px; vertical-align:middle; }
html body #discount .scat-dc tbody th{ text-align:left; font-weight:700; color:var(--ink); border-radius:14px 0 0 14px; }
html body #discount .scat-dc tbody td{ text-align:right; font-weight:800; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
html body #discount .scat-dc tbody td:last-child{ border-radius:0 14px 14px 0; }
html body #discount .scat-dc tbody td.scat-dc-d{ text-align:center; padding:0 4px; }
html body #discount .scat-dc-pill{ display:inline-block; padding:4px 8px; border-radius:999px; background:#e6f4ea; color:#1f7a45; font-size:12px; font-weight:800; white-space:nowrap; }
html body #discount .scat-dc tr.scat-dc-max th, html body #discount .scat-dc tr.scat-dc-max td{ background:rgba(183,152,106,.14); }
html body #discount .scat-dc tr.scat-dc-max th, html body #discount .scat-dc tr.scat-dc-max td.scat-dc-p{ color:var(--gold-ink,#6b5a3c); }
html body #discount .scat-dc tr.scat-dc-max td.scat-dc-p{ font-size:17px; }
html body #discount .scat-dc:not([data-scat-ready]) .scat-dc-p{ display:none; }   /* ціни ставить js/sa-cat.js; без них — лише знижки */

@media (max-width:767px){
  html body #designs .scat-cap{ font-size:12.5px; }
  html body #designs .scat-row{ gap:6px; margin-top:5px; }

  html body #tsytaty-teaser .scat-q{ grid-template-columns:minmax(0,1fr); border-radius:20px; }
  html body #tsytaty-teaser .scat-q::before{ display:none; }
  html body #tsytaty-teaser .scat-q-ph{ padding:8px 8px 10px; }   /* на телефоні — крупний кроп (один портрет і цитата), щоб рядок цитати читався */
  html body #tsytaty-teaser .scat-q-copy{ padding:16px 18px 20px; }
  html body #tsytaty-teaser .scat-q-copy h2{ font-size:24px; line-height:1.12; margin:4px 0 8px; }
  html body #tsytaty-teaser .scat-q-lead{ font-size:15px; line-height:1.5; margin:0 0 16px; }
  html body #tsytaty-teaser .scat-q-copy .btn{ width:100%; min-height:48px !important; justify-content:center; }   /* m-compact.css ставить усім .btn 42px !important */

  html body #discount .scat-dc{ margin-top:12px; border-spacing:0 6px; }
  html body #discount .scat-dc caption{ font-size:14px; }
  html body #discount .scat-dc thead th{ padding:2px 12px 0; }
  html body #discount .scat-dc tbody th, html body #discount .scat-dc tbody td{ height:50px; padding:0 12px; font-size:14.5px; }
  html body #discount .scat-dc tbody td.scat-dc-d{ padding:0 2px; }
  html body #discount .scat-dc tr.scat-dc-max td.scat-dc-p{ font-size:16px; }
}
@media (max-width:359px){
  html body #discount .scat-dc tbody th, html body #discount .scat-dc tbody td{ padding:0 9px; font-size:13.5px; }
  html body #discount .scat-dc-pill{ padding:3px 6px; font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){
  html body #designs .scat-row i[data-opt], html body #designs .design-media .scat-play{ transition:none; }
}