/* books/product.css — сторінка товару (gallery / lightbox / buy panel / tabs / spec).
   Картки схожих + price — у critical.css (спільні). Loads only on Product. */

/* -- Breadcrumb -- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 6px;font-size:12.5px;color:var(--muted)}
.crumb a:hover{color:var(--primary)}
.crumb .sep{opacity:.6}
.crumb b{color:var(--ink);font-weight:600}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;font-family:var(--font-head);font-style:italic;letter-spacing:.02em;text-transform:none;color:var(--accent-text)}

/* -- PDP layout -- */
.pdp{display:grid;grid-template-columns:1fr;gap:26px;padding-top:8px}

/* -- Gallery -- */
.gallery{display:flex;flex-direction:column;gap:12px}
.gmain{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:zoom-in}
.gmain img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:none}
.g-badges{position:absolute;top:14px;left:14px;display:flex;gap:8px}
.g-badge{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--pill)}
.g-badge.sale{background:var(--sale);color:#fff}
.g-zoom{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(43,29,20,.72);color:var(--surface);border-radius:var(--pill);font-size:11.5px;font-weight:700;backdrop-filter:blur(4px)}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.thumb{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;border:2px solid transparent;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:border-color .16s}
.thumb[data-sel="true"]{border-color:var(--primary)}
.thumb img{width:100%;height:100%;object-fit:cover;filter:none}

/* -- Buy panel -- */
.buy{align-self:start}
.buy h1{font-family:var(--font-head);font-weight:500;font-size:clamp(26px,4.4vw,40px);line-height:1.08;margin:8px 0 10px;letter-spacing:0;text-wrap:balance}
.rate-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rate-row a:hover{color:var(--primary)}
.rate-row .instock{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-weight:700}
.rate-row .instock .dot{width:8px;height:8px;border-radius:999px;background:var(--success);box-shadow:0 0 0 3px rgba(92,122,74,.2)}
/* Модифікатор `.out` існував у розмітці, але не мав СТИЛЮ — «Немає в наявності» малювалось
   тим самим зеленим, що й доступність, тобто підпис і колір суперечили одне одному.
   Приглушений сірий, а не `--sale`: червоний у темах зайнятий бейджем знижки. */
.rate-row .instock.out{color:var(--muted);font-weight:600}
.rate-row .instock.out .dot{background:var(--muted);box-shadow:none}
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.price-block .price{font-family:var(--font-head);font-size:34px}
.price-block .price-old{font-size:16px;color:var(--muted);text-decoration:line-through}
.price-block .save{padding:4px 10px;background:rgba(181,70,43,.14);color:var(--sale);border-radius:var(--pill);font-size:12px;font-weight:700}
.buy .lede{color:var(--ink-2);font-size:14.5px;margin:10px 0 20px;text-wrap:pretty}

.buy-row{display:flex;gap:10px;margin-bottom:14px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--pill);overflow:hidden}
.qty button{width:44px;height:52px;display:grid;place-items:center;font-size:18px;color:var(--ink);transition:background .16s}
.qty button:hover{background:rgba(43,57,214,.1)}
.qty span{min-width:34px;text-align:center;font-weight:700}
.store .btn-add{flex:1;height:52px;font-size:15.5px}
.buy-note{font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:20px}

.trust-list{display:grid;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.trust-list div{display:flex;align-items:center;gap:10px;font-size:13px}
.trust-list svg{flex:none;color:var(--primary)}
.trust-list b{font-weight:700}

/* -- Tabs -- */
.tabs{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.tablist{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tablist .tab{padding:11px 16px;font-family:var(--font-head);font-size:15px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:background .16s,color .16s,border-color .16s}
.tablist .tab:hover{color:var(--ink)}
.tablist .tab[data-sel="true"]{color:var(--primary);border-bottom-color:var(--primary)}
/* Лічильник відгуків у назві вкладки — приглушений, щоб не змагався з підписом. */
/* Геометрія — та сама, що в бейджі кошика (.cart-count): квадратна коробка з
   `place-items:center` дає рівне коло на одну цифру й акуратну пігулку на дві. */
.tablist .tab .tab-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--line);color:var(--ink-2);font-size:11px;font-weight:700;font-family:var(--font-body,inherit);line-height:1;vertical-align:middle}
.tablist .tab[data-sel="true"] .tab-n{background:var(--primary);color:var(--primary-ink)}
.tabpanel{min-height:80px;color:var(--ink-2);font-size:14px;line-height:1.6;white-space:pre-line}
.spec{display:grid;grid-template-columns:1fr;gap:0;white-space:normal}
.spec div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.spec div span:first-child{color:var(--muted)}
.spec div span:last-child{font-weight:600;text-align:right}

/* -- Lightbox viewer -- */
.viewer{position:fixed;inset:0;z-index:95;display:none;flex-direction:column;background:rgba(20,13,8,.94);backdrop-filter:blur(4px)}
.viewer[data-open="true"]{display:flex;animation:fadeIn .2s ease}
.vw-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:rgba(251,245,228,.7);font-size:12.5px;font-weight:600}
.vw-close{width:42px;height:42px;display:grid;place-items:center;border-radius:999px;background:rgba(251,245,228,.1);color:var(--surface)}
.vw-close:hover{background:rgba(251,245,228,.2)}
.vw-body{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 8px;min-height:0}
.vw-stage{flex:1;height:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-y;max-width:900px}
.vw-stage img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.vw-nav{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:999px;background:rgba(251,245,228,.14);color:var(--surface);font-size:26px;line-height:1;transition:background .16s}
.vw-nav:hover{background:rgba(251,245,228,.28)}

/* -- Tablet (768) -- */
@media (min-width:768px){
	.pdp{grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
	.gallery{flex-direction:row-reverse;gap:14px}
	.gallery .gmain{flex:1}
	.thumbs{flex-direction:column;overflow-x:visible;width:80px}
	.thumb{width:80px;height:80px}
}

/* -- Desktop (1024) — sticky buy panel -- */
@media (min-width:1024px){
	.pdp{gap:56px}
	.buy{position:sticky;top:88px}
}

/* Варіанти (матриця SKU): перемикач комбінацій на картці товару. */
.price-from{color:var(--muted);font-size:13px;margin-right:4px}
.variants{margin:14px 0}
.variants-label{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.variant-list{display:flex;flex-wrap:wrap;gap:8px}
.variant-opt{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer;font-size:14px}
/* Обране значення мусить читатися БЕЗ порівняння з сусідами: колір рамки міняти замало —
   1px на світлому тлі не помітно. Тому рамка товщає, тло заливається, підпис жирнішає. */
/* Специфічність НЕ випадкова: `critical.css` має скид `.store button{border-style:none}` (0,1,1),
   який перебиває голий `.variant-opt` (0,1,0) — саме тому рамки не було видно взагалі. Префікс
   `.variant-list` дає (0,2,0) і повертає контроль над рамкою. */
.variant-list .variant-opt{border:1px solid var(--line);transition:border-color .12s,background .12s}
.variant-list .variant-opt:hover:not(.is-out){border-color:var(--muted)}
.variant-list .variant-opt.is-active{border:2px solid var(--primary);padding:7px 11px;
	background:var(--surface);color:var(--ink);font-weight:600}
.variant-list .variant-opt.is-out{opacity:.55}
.variant-list .variant-opt.is-out .variant-opt-label{text-decoration:line-through}
/* «немає» = ЦІЛЬ кліку розпродана: значення лишається живим лінком і чесно веде на
   сторінку комбінації зі станом «немає в наявності» — позначка збігається з поведінкою.
   Розмітка присутня завжди, показ вмикає клас; переклад — у мовному файлі, не в JS. */
.variant-list .variant-opt-oos{display:none;font-size:11px;line-height:1;color:var(--muted);
	text-transform:lowercase;white-space:nowrap}
.variant-list .variant-opt.is-out .variant-opt-oos{display:inline}
.variant-opt .variant-price{color:var(--muted);font-size:13px}
.variant-axis{margin-bottom:12px}
.variant-note{color:var(--muted);font-size:13px;margin-top:6px}

/* Зразки значень осі: колір і зображення. Логіка вибору радіокнопкова — одне значення
   на вісь; візуально це просто інший носій тієї самої кнопки. */
.variant-swatch-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:none}
.variant-swatch-img{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block}
/* Картинкова вісь: мініатюра — головний носій, підпис лишається каптією під нею. Ховати його
   не можна — для неоднозначних осей (напр. «Розмір») сама картинка значення не називає. */
.variant-list--image .variant-opt{flex-direction:column;padding:4px;gap:4px}
.variant-list--image .variant-opt-label{font-size:12px;color:var(--muted)}
.variant-list--image .variant-opt.is-out .variant-opt-oos{display:block;margin-top:-2px}
.variant-list--image .variant-opt.is-active{padding:3px}
.variant-list--image .variant-opt.is-active .variant-swatch-img{outline:2px solid var(--primary);outline-offset:2px}
.variant-list--image .variant-opt.is-active .variant-opt-label{color:var(--ink)}
/* Галочка в кутку — маркер, однозначний навіть на строкатій мініатюрі. Живе на САМІЙ кнопці,
   а не на обгортці зразка: обгортка вже несе перекреслення «немає в наявності», і спроба
   вмістити обидві позначки в один псевдоелемент схлопувала його в 0×0. */
.variant-list--image .variant-opt{position:relative}
/* Галочка — ФОН кружечка, а не окремий псевдоелемент поруч. Двома шматками (коло + повернений
   на 45° кут із двох бордерів) центр доводиться підганяти вручну: після повороту «чорнило»
   лежить не в центрі рамки, і піксельна поправка розповзається між темами. `background-position:
   center` центрує безумовно. Шлях — той самий, що в чекбоксах фасетів. */
.variant-list--image .variant-opt.is-active::before{content:'';position:absolute;right:0;top:0;
	width:16px;height:16px;border-radius:50%;background:var(--primary)
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
	center/10px 10px no-repeat;
	box-shadow:0 0 0 2px var(--surface);z-index:2}
/* «Немає в наявності» на мініатюрі: сильне знебарвлення читалось би як баг рендера, тож
   лишаємо колір упізнаваним і додаємо явну діагональ. currentColor — щоб працювало в будь-якій
   темі без залежності від набору змінних. */
.variant-list--image .variant-opt.is-out{opacity:1}
.variant-list--image .variant-opt.is-out .variant-swatch-img{opacity:.5}
.variant-list--image .variant-opt.is-out .variant-opt-label{text-decoration:line-through}
.variant-list--image .variant-swatch-wrap{position:relative;display:block;line-height:0}
.variant-list--image .is-out .variant-swatch-wrap::after{content:'';position:absolute;inset:0;
	border-radius:6px;background:linear-gradient(to top right,transparent calc(50% - 1px),
	currentColor calc(50% - 1px),currentColor calc(50% + 1px),transparent calc(50% + 1px))}
/* Кольорова вісь: крапка-зразок теж має нести «немає в наявності». */
.variant-list--color .variant-opt.is-out .variant-swatch-dot{
	background-image:linear-gradient(to top right,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%)}
.variant-list--color .variant-opt{padding:6px 10px}
.variant-list--color .variant-opt.is-active{padding:5px 9px}
/* Кільце навколо крапки: прогалина кольором тла відділяє його від самого зразка. */
.variant-list--color .variant-opt.is-active .variant-swatch-dot{
	box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}

/* Значення фільтрованої характеристики веде на фасет категорії. Підкреслення лише під
   курсором: суцільно підкреслена колонка значень читалась би як суцільне полотно лінків. */
.spec-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.spec-link:hover{border-bottom-color:currentColor}

/* -- Таб «Доставка та оплата» (кероване наповнення: /admin/shiptab + override у формі товару) -- */
.ship-intro{margin:0 0 12px}
.ship-block{margin:0 0 12px}
.ship-title{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
.ship-list{list-style:none;margin:0;padding:0}
.ship-list li{padding:3px 0;border-bottom:1px dashed var(--line)}
.ship-list li:last-child{border-bottom:0}
.ship-links{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 0}
.ship-link{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.ship-link:hover{border-bottom-color:currentColor}

/* Таб «Відео» (video_items): embed 16:9 або фолбек-картка thumbnail+лінк */
.video-item{margin:0 0 16px}
.video-item:last-child{margin-bottom:0}
.video-title{display:block;margin:0 0 4px}
.video-desc{margin:0 0 8px;color:var(--muted)}
.video-frame{position:relative;aspect-ratio:16/9;max-width:640px;background:#000;border-radius:var(--radius);overflow:hidden}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-card{display:inline-flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.video-thumb{display:block;width:100%;max-width:320px;border-radius:var(--radius);border:1px solid var(--line)}
.video-watch{display:inline-flex;align-items:center;gap:6px;color:var(--primary)}

/* ── Відгуки покупців (секція #reviews) ──
   Порт блока з макета DesignCombo (docs/html/*/… Product …): бал + гістограма + картки.
   Розмітка однакова в усіх п'яти вертикалях — різняться лише токени теми. */
.rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 18px}
.rev-top{display:grid;gap:18px}
.rev-score{text-align:center;padding:8px 0}
.rev-score .big{font-family:var(--font-head);font-size:52px;line-height:1}
.rev-score .stars{color:var(--primary);letter-spacing:3px;font-size:16px;margin:6px 0}
.rev-score small{color:var(--muted);font-size:12.5px}
.rev-bars{display:flex;flex-direction:column;gap:8px;justify-content:center}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rev-bar .t{width:14px;text-align:right}
.rev-bar .track{flex:1;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.rev-bar .track i{display:block;height:100%;background:var(--primary);border-radius:999px}
.rev-list{display:grid;gap:14px;margin-top:18px}
.rev-card{border-top:1px solid var(--line);padding-top:14px}
.rev-card .h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rev-card .h b{font-size:13.5px}
.rev-card .h span{font-size:11.5px;color:var(--muted)}
.rev-card .stars{color:var(--primary);letter-spacing:1.5px;font-size:12px}
.rev-card p{font-size:13.5px;color:var(--ink-2);margin-top:5px;text-wrap:pretty}
.rev-empty{color:var(--muted);font-size:13.5px;margin:0}
.rev-more{margin-top:16px;text-align:center}

/* ── Форма (персональний фрагмент) ── */
.rev-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rev-form:empty{display:none}
.rev-note{margin:0;color:var(--muted);font-size:13px}
.rev-note a{color:var(--primary);text-decoration:underline}
.rev-note--ok{color:var(--ink-2)}
.rev-write__head{font-size:14px;margin-bottom:10px}
.rev-stars{display:inline-flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:2px;margin-bottom:14px}
.rev-stars__input{position:absolute;opacity:0;width:0;height:0}
.rev-stars__star{display:inline-flex;cursor:pointer;padding:2px;line-height:0;color:var(--line);transition:color .12s ease,transform .12s ease}
.rev-stars__star svg{width:30px;height:30px;fill:currentColor}
.rev-stars__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Обрана зірка + усі нижчі: у row-reverse нижчі йдуть ПІСЛЯ неї в DOM. */
.rev-stars__input:checked ~ .rev-stars__star{color:var(--primary)}
/* Ховер перебиває обране, щоб було видно, який бал поставить клік. */
.rev-stars:hover .rev-stars__input:checked ~ .rev-stars__star{color:var(--line)}
.rev-stars__star:hover,
.rev-stars__star:hover ~ .rev-stars__star{color:var(--primary)}
.rev-stars__star:hover{transform:scale(1.12)}
.rev-stars__input:focus-visible + .rev-stars__star{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.rev-write__body{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px;resize:vertical}
.rev-write__body:focus{outline:none;border-color:var(--primary)}
.rev-write__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.rev-write__foot .btn{flex:0 0 auto;min-width:150px}
.rev-write__foot small{color:var(--muted);font-size:11.5px}

@media (min-width:768px){
	.rev-top{grid-template-columns:200px 1fr;gap:30px;align-items:center}
	.rev{padding:26px 24px}
}