/* Rilbox — статичні сторінки генератора: лише те, чого немає в стилях маклауда (assets/rilbox-tokens.css, rilbox-chrome.css,
   rilbox-pages.css): блоки тексту з адмінки (характеристики, кроки, картки розділів, заглушки), каталог і картка товару.
   Кольори, шрифти, радіуси — ТІЛЬКИ через токени --rb-* (блок H, 10.11.2026); шапка/підвал/кнопки/FAQ — у маклауда. */
:root {
  --bg: var(--rb-bg); --bd: var(--rb-line); --chip-bg: var(--rb-surface);
  --tx1: var(--rb-fg); --tx2: var(--rb-mute); --tx3: var(--rb-dim);
  --accent: var(--rb-accent); --accent-tx: var(--rb-accent-text); --accent-soft: var(--rb-accent-soft);
  --mono: var(--rb-f-mono); --body: var(--rb-f-body);
  --todo-bg: #fff3a3; --todo-tx: #5b4a00;
}
:root[data-theme="dark"] { --todo-bg: #5b4a00; --todo-tx: #fff3a3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --todo-bg: #5b4a00; --todo-tx: #fff3a3; } }

/* тіло сторінок генератора: текст у .rb-prose (rilbox-pages.css), тут — обмеження ширини рядка й дрібниці */
.rb-page { padding-top: clamp(24px, 5vw, 56px); }
.rb-content p, .rb-content li { max-width: 68ch; }
.rb-content h2 { text-wrap: balance; }
.rb-content > :first-child { margin-top: 0; }
.rb-content > h2:first-child { margin-top: 0; }
.rb-landing .rb-content { margin-top: var(--rb-section); }
.rb-text .rb-content { margin-top: 40px; }
.rb-hint-text { margin: 12px 0 0; font-size: 13px; color: var(--tx3); max-width: 44ch; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0; }
.cta-row .hint { font-size: 13px; color: var(--tx3); max-width: 40ch; }
.note { font-size: 14px; color: var(--tx3); border-left: 2px solid var(--bd); padding-left: 14px; }
.draft { display: inline-block; font-size: 13px; color: var(--accent-tx); background: var(--accent-soft); border-radius: var(--rb-r-pill); padding: 6px 14px; margin: 16px 0 0; }
.todo { background: var(--todo-bg); color: var(--todo-tx); border-radius: 4px; padding: 0 6px; font-weight: 500; white-space: nowrap; }

/* характеристики: підпис капсом + моноширинне значення */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 10px 0 24px; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.specs > div { padding: 16px 20px 18px 0; border-top: 1px solid var(--bd); }
.specs > div:nth-child(-n+2) { border-top: 0; }
.specs dt { font: 500 var(--rb-t-label)/1.3 var(--body); letter-spacing: var(--rb-track-label); text-transform: uppercase; color: var(--tx3); margin-bottom: 6px; }
.specs dd { margin: 0; font: 400 22px/1.2 var(--mono); letter-spacing: -.02em; color: var(--tx1); font-variant-numeric: tabular-nums; }
.specs dd small { font: 400 13px var(--body); color: var(--tx3); margin-left: 4px; }

/* кроки «Як це працює» */
.steps { list-style: none; padding: 0; margin: 10px 0 24px; counter-reset: s; display: grid; gap: 0; max-width: 760px; }
.steps li { position: relative; padding: 22px 0 22px 62px; border-top: 1px solid var(--bd); counter-increment: s; margin: 0; max-width: none; }
.steps li:last-child { border-bottom: 1px solid var(--bd); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 26px; font: 400 13px/1 var(--mono); color: var(--accent-tx); }
.steps b { display: block; font: 400 var(--rb-t-h3)/1.2 var(--rb-f-display); color: var(--tx1); margin-bottom: 6px; }
.steps span { display: block; color: var(--tx2); font-size: 15px; max-width: 42ch; }

/* картки розділів (блок cards у тексті з адмінки) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 28px; }
.card { display: block; padding: 20px 20px 22px; border: 1px solid var(--bd); border-radius: var(--rb-r-lg); color: var(--tx1); text-decoration: none; transition: border-color var(--rb-dur); }
.card:hover { border-color: var(--tx1); }
.card b { display: block; font-weight: 600; margin-bottom: 6px; }
.card span { display: block; font-size: 14px; color: var(--tx3); line-height: 1.45; }

/* ── картки товарів і каталог (ТЗ 10.11.2026) ─────────────────────────────── */
.product .rb-h1 { font-size: clamp(26px, 3.2vw, 38px); max-width: none; margin: 4px 0 10px; }
.prod { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; margin: 4px 0 8px; }
.gallery { position: sticky; top: 76px; }
.gallery input { position: absolute; opacity: 0; pointer-events: none; }
.g-main { position: relative; aspect-ratio: 1; border-radius: var(--rb-r-lg); overflow: hidden; background: var(--chip-bg); }
.g-main a { display: none; position: absolute; inset: 0; }
.g-main a:first-child { display: block; }
.g-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery:has(input:checked) .g-main a:first-child { display: none; }
.gallery input:nth-of-type(1):checked ~ .g-main a:nth-of-type(1), .gallery input:nth-of-type(2):checked ~ .g-main a:nth-of-type(2),
.gallery input:nth-of-type(3):checked ~ .g-main a:nth-of-type(3), .gallery input:nth-of-type(4):checked ~ .g-main a:nth-of-type(4),
.gallery input:nth-of-type(5):checked ~ .g-main a:nth-of-type(5), .gallery input:nth-of-type(6):checked ~ .g-main a:nth-of-type(6),
.gallery input:nth-of-type(7):checked ~ .g-main a:nth-of-type(7), .gallery input:nth-of-type(8):checked ~ .g-main a:nth-of-type(8) { display: block; }
.g-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-thumbs label { width: 68px; height: 68px; border: 1px solid var(--bd); border-radius: var(--rb-r-md); overflow: hidden; cursor: pointer; background: var(--chip-bg); transition: border-color var(--rb-dur); }
.g-thumbs label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery input:nth-of-type(1):checked ~ .g-thumbs label:nth-of-type(1), .gallery input:nth-of-type(2):checked ~ .g-thumbs label:nth-of-type(2),
.gallery input:nth-of-type(3):checked ~ .g-thumbs label:nth-of-type(3), .gallery input:nth-of-type(4):checked ~ .g-thumbs label:nth-of-type(4),
.gallery input:nth-of-type(5):checked ~ .g-thumbs label:nth-of-type(5), .gallery input:nth-of-type(6):checked ~ .g-thumbs label:nth-of-type(6),
.gallery input:nth-of-type(7):checked ~ .g-thumbs label:nth-of-type(7), .gallery input:nth-of-type(8):checked ~ .g-thumbs label:nth-of-type(8) { border-color: var(--accent); }
.g-empty { display: grid; place-items: center; align-content: center; gap: 10px; color: var(--tx3); font-size: 14px; }
.g-empty .ph { width: 38%; height: auto; }
.sku-row { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; color: var(--tx3); flex-wrap: wrap; }
.sku-row code { font: 500 14px var(--mono); color: var(--tx1); background: var(--chip-bg); padding: 3px 10px; border-radius: var(--rb-r-pill); }
.sku-row .copy { font: inherit; font-size: 12px; color: var(--accent-tx); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.sku-row .copy:hover { text-decoration: underline; }
.specs-sm { margin: 0 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.specs-sm > div { padding: 12px 16px 12px 0; }
.specs-sm dd { font-size: 19px; }
.specs-sm dd.txt { font: 400 15px/1.35 var(--body); letter-spacing: 0; }
.price { margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; }
.price .from { font-size: 14px; color: var(--tx3); }
.price b { font: 400 36px/1 var(--mono); letter-spacing: -.03em; color: var(--tx1); font-variant-numeric: tabular-nums; }
.price .unit { font-size: 14px; color: var(--tx3); }
.price-none { margin: 0 0 16px; display: inline-block; font-size: 14px; color: var(--accent-tx); background: var(--accent-soft); border-radius: var(--rb-r-pill); padding: 6px 14px; }
.order { display: flex; flex-direction: column; gap: 14px; }
.qty { display: flex; align-items: center; gap: 14px; }
.qty .lbl { font-size: 13px; color: var(--tx3); }
.qty .step { display: inline-flex; align-items: center; border: 1px solid var(--bd); border-radius: var(--rb-r-pill); overflow: hidden; }
.qty button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--tx1); font: 500 20px/1 var(--mono); cursor: pointer; }
.qty button:hover { background: var(--chip-bg); }
.qty input { width: 56px; height: 40px; border: 0; text-align: center; font: 500 16px var(--mono); background: transparent; color: var(--tx1); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.prod-sec { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--bd); }
.prod-sec h2 { margin: 0 0 12px; font: 300 var(--rb-t-h2)/1.05 var(--rb-f-display); letter-spacing: -.03em; }
.prod-sec .rb-lead { margin-bottom: 16px; }
.prod-sec p, .prod-sec li { color: var(--tx2); }
.prod-sec a { color: var(--tx1); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dl-list { list-style: none; padding: 0; }
.dl-list li { margin: 0 0 8px; }
.dl-list b { font-weight: 600; color: var(--tx1); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 24px 0 10px; }
.pcard { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 16px; border: 1px solid var(--bd); border-radius: var(--rb-r-lg); color: var(--tx1); text-decoration: none; transition: border-color var(--rb-dur); }
.pcard:hover { border-color: var(--tx1); }
.pc-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--rb-r-md); background: var(--chip-bg); overflow: hidden; margin-bottom: 6px; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; }
.pc-img .ph { width: 42%; height: auto; }
.pcard b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.pc-meta { font-size: 12px; color: var(--tx3); }
.pc-price { font-size: 14px; color: var(--tx2); }
.pc-price b { font: 500 15px var(--mono); color: var(--tx1); }
.pc-none { font-size: 12px; color: var(--accent-tx); }
@media (max-width: 760px) {
  .prod { grid-template-columns: 1fr; gap: 22px; }
  .gallery { position: static; }
  .specs-sm { grid-template-columns: 1fr 1fr; }
  .specs-sm > div:nth-child(2) { border-top: 0; }
  .buy-btns .rb-btn { width: 100%; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .specs { grid-template-columns: 1fr; }
  .specs > div:nth-child(2) { border-top: 1px solid var(--bd); }
  .steps li { padding-left: 54px; }
  .cta-row .rb-btn { width: 100%; }
  .cta-row .hint { max-width: none; }
}