/* quick-view.css — переносний модуль для карток товарів: 1) hover-scrub: гортання фото рухом миші зліва-направо по зображенню картки; 2) «Швидкий перегляд» — модалка зі стислим описом, характеристиками й кошиком. Кольори — фірмова палітра NiKo (з var()-фолбеками, працює й без :root на сторінці). */ /* ── Обгортка зображення картки ─────────────────────────────────────────── */ .pc-media{position:relative;} /* Індикатор-крапки поверх фото (скільки кадрів у галереї) — угорі, щоб не заважати */ .hg-dots{position:absolute;left:50%;top:9px;transform:translateX(-50%); display:flex;gap:5px;z-index:2;pointer-events:none;} .hg-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.65); box-shadow:0 0 2px rgba(0,0,0,.45);transition:background .15s,transform .15s;} .hg-dots i.on{background:var(--accent,#FF6B35);transform:scale(1.3);} .hg-img{transition:opacity .12s ease;} .pc-img.hg-ready{cursor:ew-resize;} /* Кнопка «Швидкий перегляд» — унизу фото (щоб не перехоплювати курсор у центрі, де водять мишкою для гортання кадрів). З'являється, висуваючись знизу, при наведенні. */ .pc-quickview{position:absolute;left:50%;bottom:10px; transform:translateX(-50%) translateY(10px); display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.96);color:var(--blue,#1E4A8C); border:1px solid #C9D7EE;border-radius:999px;padding:9px 16px; font-family:'Unbounded',sans-serif;font-size:9px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap; opacity:0;transition:opacity .2s ease,transform .2s ease,background .2s,color .2s; z-index:3;box-shadow:0 6px 18px rgba(30,74,140,.18);} .pc-quickview svg{width:15px;height:15px;flex-shrink:0;} .prod-card:hover .pc-quickview,.mat-card:hover .pc-quickview{opacity:1;transform:translateX(-50%) translateY(0);} .pc-quickview:hover{background:var(--blue,#1E4A8C);color:#fff;border-color:var(--blue,#1E4A8C);} @media (hover:none){ .pc-quickview{opacity:1;transform:translateX(-50%);padding:8px 13px;} .hg-dots{display:none;} } /* ── Модалка «Швидкий перегляд» ─────────────────────────────────────────── */ .qv-overlay{position:fixed;inset:0;z-index:10000;display:none; align-items:center;justify-content:center;padding:20px; background:rgba(15,23,42,.62);} .qv-overlay.open{display:flex;} .qv-dialog{background:var(--surface,#fff);border-radius:18px;max-width:860px;width:100%; max-height:90vh;overflow:auto;position:relative; box-shadow:0 30px 80px rgba(0,0,0,.35);animation:qvIn .22s ease;} @keyframes qvIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}} .qv-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none; background:rgba(255,255,255,.9);border-radius:50%;font-size:1.15rem;color:#374151; cursor:pointer;line-height:1;z-index:4;transition:background .15s;} .qv-close:hover{background:#EEF2F7;} .qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0;} @media(max-width:680px){.qv-body{grid-template-columns:1fr;}} .qv-media{padding:22px;} .qv-main{border-radius:12px;overflow:hidden;border:1px solid var(--border,#E5E7EB); aspect-ratio:4/3;background:#fff;} .qv-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .12s;} .qv-main.hg-ready{cursor:ew-resize;} .qv-media .hg-dots{position:static;transform:none;justify-content:center;margin-top:10px;} .qv-media .hg-dots i{background:#C9D2DE;box-shadow:none;} .qv-media .hg-dots i.on{background:var(--accent,#FF6B35);} .qv-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;} .qv-thumb{width:64px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent; padding:0;cursor:pointer;background:#fff;} .qv-thumb.on{border-color:var(--blue,#1E4A8C);} .qv-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .qv-info{padding:26px 26px 26px 6px;display:flex;flex-direction:column;gap:13px;} @media(max-width:680px){.qv-info{padding:2px 22px 24px;}} .qv-chip{align-self:flex-start;font-family:'Unbounded',sans-serif;font-size:8px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--amber,#B5832E); background:var(--amber-pale,#FBF3E4);border:1px solid #ECD9B0;border-radius:6px;padding:5px 9px;} .qv-title{font-family:'Unbounded',sans-serif;font-size:1.15rem;font-weight:700; color:var(--gray-900,#111827);line-height:1.25;letter-spacing:-.01em;} .qv-desc{font-size:.9rem;color:var(--gray-dark,#374151);line-height:1.62;} .qv-purpose{font-size:.85rem;color:var(--gray-dark,#374151); background:var(--blue-pale,#E8EFF9);border-radius:10px;padding:10px 13px;line-height:1.5;} .qv-purpose b{color:var(--blue,#1E4A8C);} .qv-specs .qv-h{font-family:'Unbounded',sans-serif;font-size:9px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--blue,#1E4A8C);margin-bottom:6px;} .qv-specs table{width:100%;border-collapse:collapse;font-size:.85rem;} .qv-specs td{padding:7px 0;border-bottom:1px solid var(--border,#F1F2F4);color:var(--gray-dark,#374151);} .qv-specs tr:last-child td{border-bottom:none;} .qv-specs td:first-child{color:var(--gray,#6B7280);} .qv-specs td:last-child{text-align:right;font-weight:600;color:var(--gray-900,#111827);} .qv-price{font-family:'Unbounded',sans-serif;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;color:var(--gray-900,#111827);} .qv-price-from{font-family:'Geologica',sans-serif;font-size:.9rem;font-weight:500;color:var(--gray,#6B7280);} .qv-price-num{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;} .qv-price-cur{font-size:.9rem;color:var(--gray,#6B7280);font-weight:500;} .qv-note{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:#8a6a2f;line-height:1.5; background:var(--amber-pale,#FBF3E4);border:1px solid #ECD9B0;border-radius:10px;padding:10px 12px;} .qv-note svg{flex-shrink:0;margin-top:1px;} .qv-more{align-self:flex-start;color:var(--blue,#1E4A8C);text-decoration:none;font-size:.85rem; font-weight:600;border-bottom:1px solid var(--blue-pale,#E8EFF9);} .qv-more:hover{border-bottom-color:var(--blue,#1E4A8C);} /* Кошик усередині модалки (стилі не залежать від сторінкового