/* «Готові вироби» (redesign/products.php): каталог і сторінка виробу. Основа — services.css (герой, текст, «Коротко», картки, «Інші»)
   і enclosures.css (картки з ціною .ex); тут — те, чого там немає: ціна «від» у каталозі, кнопки замовлення варіанта, «Зблизька». */

.pr-from { margin: 0.25rem 0.375rem 0 !important; color: var(--ink) !important; font-size: 0.9375rem; }
.pr-from b { font: 900 1.375rem/1 var(--display); letter-spacing: -.03em; }

.pr-dl { grid-template-columns: repeat(2, minmax(0, auto)); }
.pr-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.375rem; }
.pr-buy .btn { flex: 0 0 auto; }
.pr-msg { color: var(--muted); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.1875rem; }
.pr-msg:hover { color: var(--ink); text-decoration-color: var(--accent); }

.pr-gal__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.875rem; }
.pr-gal figure { margin: 0; padding: 0.875rem; border-radius: 1.625rem; background: var(--paper); }
.pr-gal .pr-gal__w { grid-column: 1 / -1; } /* кадр «в житті» 1200 × 750 — на весь рядок */
.pr-gal img { width: 100%; height: auto; border-radius: 1.125rem; }
.pr-gal figcaption { padding: 0.75rem 0.375rem 0.25rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.pr-note { margin: 0.875rem 0 0; color: var(--muted); font-size: 0.875rem; }

@media (max-width: 640px) {
  .pr-dl { grid-template-columns: minmax(0, 1fr); }
}

/* Telegram і WhatsApp біля «Замовити» — круглі кнопки з іконками (кольори месенджерів, як у плаваючих кнопках) */
.pr-ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #fff; transition: translate .2s, filter .2s; }
.pr-ico svg { width: 1.375rem; height: 1.375rem; }
.pr-ico--tg { background: #229ED9; }
.pr-ico--wa { background: #1DA851; } /* #25D366 з білою іконкою — контраст 2:1, цей — 3:1 */
.pr-ico:hover { translate: 0 -0.125rem; filter: brightness(1.06); }
.pr-ico:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
.pr-buy { gap: 0.5rem; }
.pr-vars .ex h3 { cursor: pointer; } /* назва варіанта відкриває його замовлення (products.js) */
.pr-vars .ex h3:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.1875rem; } /* як назви-посилання в картках «Корпусів» */
.pr-buy .btn { margin-right: 0.25rem; }

html:has(.pr-zoom[open]) { overflow: hidden; }
/* Перегляд фото (products.js, 29.10.2026): фото варіантів і галереї збільшуються на весь екран */
img[data-zoom] { cursor: zoom-in; }
img[data-zoom]:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
.pr-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12 12 12 / .94); cursor: zoom-out; }
.pr-zoom[open] { display: grid; place-items: center; }
.pr-zoom::backdrop { background: rgb(0 0 0 / .6); }
.pr-zoom img { width: auto; height: auto; max-width: 100vw; max-height: calc(100dvh - 5rem); object-fit: contain; }
.pr-zoom__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom)); color: #fff; font-size: 0.9375rem; line-height: 1.4; text-align: center; }
.pr-zoom__x { position: absolute; top: calc(0.75rem + env(safe-area-inset-top)); right: 0.75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font: 400 1.75rem/1 system-ui, sans-serif; cursor: pointer; }
.pr-zoom__x:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }

/* «Інші вироби» / «Також друкуємо»: картки .oth (services.css) і посилання стовпчиком з проміжком */
.others .pr-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }

/* Заклик «під свій розмір»: Telegram і WhatsApp поруч у кольорах месенджерів (темніші — білий текст читається), форма — рядком нижче */
.pr-cta__b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; width: min(100%, 27rem); }
.pr-cta__b .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; }
.pr-cta__b svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pr-btn--tg { background: #1B6FA8; color: #fff; }
.pr-btn--wa { background: #0E7A43; color: #fff; }
.pr-btn--tg:hover, .pr-btn--wa:hover { filter: brightness(1.12); }
.pr-btn--form { grid-column: 1 / -1; }

/* «Коротко»: довге слово не розпирає вузьку комірку (на клубочниці «не перекидається» давало горизонтальний скрол) */
.rd-products .facts div { min-width: 0; }
.rd-products .facts dt { overflow-wrap: anywhere; }
.rd-products .a-aside .facts dt { white-space: normal; text-wrap: balance; } /* «одразу зібрані» в бічній колонці не влазило в один рядок і обрізалось (services.css тримає nowrap) */

/* 24.10.2026: H1 на сторінках виробів трохи менший (довгі назви на 4–5 рядків) */
.rd-products .hero__t h1 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); }

/* «Своя ідея» — смуга-заклик після карток на сторінках іграшок */
.pr-idea { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 2.5rem; align-items: center; margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.5rem; background: var(--accent); color: #1A0A02; } /* темний текст в обох темах: білий на помаранчевому світлої теми — замало контрасту */
.pr-idea h2 { margin: 0 0 0.75rem; font: 900 clamp(1.75rem, 2.6vw, 2.5rem)/1 var(--display); letter-spacing: -.03em; color: inherit; }
.pr-idea p { margin: 0; color: inherit; opacity: .88; }
.pr-idea ul { margin: 0 0 1rem; padding-left: 1.125rem; font-weight: 600; }
.pr-idea__b { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pr-idea .pr-idea__form { background: #13110E; color: #F1EBE1; border-color: #13110E; }
.pr-idea .pr-idea__form:hover { background: #2A2520; color: #F1EBE1; }
@media (max-width: 760px) { .pr-idea { grid-template-columns: minmax(0, 1fr); } }

/* «Що докупити» (04.11.2026): кріпіж, який покупець купує сам, — пари «для чого — що купити» рядками на папері */
.pr-buyl__t { display: grid; margin: 0; padding: 0.375rem 1.25rem; border-radius: 1.625rem; background: var(--paper); }
.pr-buyl__t > div { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; padding: 0.875rem 0; border-top: 1px solid var(--line); }
.pr-buyl__t > div:first-child { border-top: 0; }
.pr-buyl__t dt { font-weight: 700; color: var(--ink); }
.pr-buyl__t dd { margin: 0; color: var(--ink); line-height: 1.5; }
@media (max-width: 640px) { .pr-buyl__t > div { grid-template-columns: minmax(0, 1fr); } }

/* Кадри варіанта (04.11.2026): мініатюри під фото картки; обраний — обвідка кольором акценту */
.ex:has(.pr-th) { grid-template-rows: auto auto 1fr; }
.pr-th { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; padding: 0.5rem 0 0; }
.pr-th button { display: grid; gap: 0.25rem; padding: 0; border: 0; background: none; color: var(--muted); font: 600 0.75rem/1.2 var(--body, inherit); text-align: center; cursor: pointer; }
.pr-th button img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.625rem; outline: 0.125rem solid transparent; outline-offset: 0.0625rem; transition: outline-color .15s; }
.pr-th button[aria-pressed="true"] { color: var(--ink); }
.pr-th button[aria-pressed="true"] img, .pr-th button[aria-pressed="true"]:hover img { outline-color: var(--accent); }
.pr-th button:hover img { outline-color: var(--line); }
.pr-th button:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; border-radius: 0.625rem; }