/* Product layout */
    /* minmax(0,…): без нього колонка розпирається під min-content стрічки мініатюр (overflow-x). */
    .product-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
    .product-gallery, .product-gallery__thumbs { min-width: 0; }

    /* Скелетон деталей товару — миттєвий каркас (галерея + інфо) замість голого «Завантаження…» */
    @keyframes pdpSk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .pdp-sk { border-radius: 8px; background: linear-gradient(90deg,var(--color-bg-alt) 25%,var(--color-bg) 50%,var(--color-bg-alt) 75%); background-size: 200% 100%; animation: pdpSk 1.3s ease-in-out infinite; }
    .pdp-sk--main { aspect-ratio: 1; border-radius: var(--border-radius-lg); }
    .pdp-sk__thumbs { display: flex; gap: 8px; margin-top: 12px; }
    .pdp-sk--thumb { width: 70px; height: 70px; border-radius: 10px; }
    .pdp-sk--line { height: 14px; }
    .pdp-sk--title { height: 34px; width: 78%; }
    .pdp-sk--price { height: 30px; width: 40%; }
    .pdp-sk--btn { height: 52px; border-radius: var(--border-radius); }
    @media (prefers-reduced-motion: reduce) { .pdp-sk { animation: none; } }

    /* Gallery */
    .product-gallery { position: sticky; top: 90px; }
    /* 🎞 Головне фото = горизонтальна scroll-snap стрічка (нативний свайп, як в Instagram). */
    .pg-wrap { position: relative; }
    .product-gallery__main {
      aspect-ratio: 1; border-radius: var(--border-radius-lg); position: relative;
      overflow: hidden; background: var(--color-bg);
      display: flex; overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .product-gallery__main::-webkit-scrollbar { display: none; }
    .product-gallery__main--empty { display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .pg-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; scroll-snap-align: center; scroll-snap-stop: always; }
    img.pg-slide { cursor: zoom-in; }
    /* 🖼 Фото-слайд: повне фото (contain) на розмитому кадрі — без обрізки квадратом. */
    .pg-slide--iwrap { position: relative; overflow: hidden; background: var(--color-ink-deep); display: flex; align-items: center; justify-content: center; }
    .pg-photo { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; cursor: zoom-in; }
    /* 🎬 Відео-слайд: обгортка на всю ширину з розмитим кадром у смугах (портретне відео виглядає цілісним). */
    .pg-slide--vwrap { position: relative; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
    .pg-vbg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(0.55); transform: scale(1.2); z-index: 0; }
    .pg-video { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
    .product-gallery__emoji { font-size: 7rem; user-select: none; }
    /* Крапки-індикатор (як у стрічці бренду). */
    .pg-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; pointer-events: none; }
    .pg-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.5); transition: .2s; }
    .pg-dot.is-active { background: var(--color-surface); width: 22px; border-radius: 99px; }
    /* ‹ › Стрілки перемикання поверх головного фото (тільки коли слайдів >1). */
    .pg-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      box-sizing: border-box; flex: none; aspect-ratio: 1;
      width: 40px; height: 40px; border-radius: 50%; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.82); color: var(--color-primary); border: none; cursor: pointer;
      z-index: 3; font-size: 1.6rem; line-height: 1;
      box-shadow: 0 2px 10px rgba(0,0,0,0.18);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      transition: background .18s ease, transform .18s ease;
    }
    .pg-arrow:hover  { background: var(--color-surface); }
    .pg-arrow:active { transform: translateY(-50%) scale(0.92); }
    .pg-arrow--prev  { left: 10px; }
    .pg-arrow--next  { right: 10px; padding-left: 2px; }
    @media (max-width: 768px) { .pg-arrow { width: 34px; height: 34px; font-size: 1.4rem; } }
    /* Мініатюри — ОДИН рядок-слайдер: видно ~5, решта гортається (свайп/скрол). */
    .product-gallery__thumbs {
      display: flex; gap: 8px; margin-top: 12px;
      flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
      padding-bottom: 4px; scrollbar-width: thin;
      scrollbar-color: var(--color-border) transparent;
    }
    .product-gallery__thumbs::-webkit-scrollbar { height: 6px; }
    .product-gallery__thumbs::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
    .product-gallery__thumbs::-webkit-scrollbar-track { background: transparent; }
    .product-gallery__thumb {
      width: 70px; height: 70px; border-radius: 10px;
      border: 2px solid transparent; cursor: pointer; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition); flex-shrink: 0; scroll-snap-align: start;
    }
    .product-gallery__thumb:hover { border-color: var(--color-accent); }
    .product-gallery__thumb--active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
    .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* Lightbox */
    .lightbox-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.95);
      /* Вище за плаваючого помічника (#nyt-conc-btn z-index:9500), щоб не перекривав фото. */
      z-index: 10050; display: flex; align-items: center; justify-content: center;
      padding: 24px; cursor: zoom-out; touch-action: pan-y;
    }
    /* Ховаємо плаваючого помічника, поки відкрите фото на весь екран. */
    body.nyt-lightbox-open #nyt-conc-btn { display: none !important; }
    .lightbox-overlay img {
      max-width: 92vw; max-height: 88vh; border-radius: var(--border-radius-lg);
      box-shadow: var(--shadow-lg); object-fit: contain;
    }
    .lightbox-overlay .lb-close {
      position: absolute; top: 20px; right: 24px;
      color: white; font-size: 2rem; cursor: pointer;
      background: none; border: none; line-height: 1;
    }
    .lightbox-overlay .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.12); border: none; color: white;
      font-size: 2rem; cursor: pointer; border-radius: 50%;
      width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .lightbox-overlay .lb-nav:hover { background: rgba(255,255,255,0.25); }
    .lightbox-overlay .lb-prev { left: 16px; }
    .lightbox-overlay .lb-next { right: 16px; }
    /* 📸 Стрічка фото як в Instagram: три слайди, центр — поточне; гортається пальцем. */
    .lightbox-overlay { overflow: hidden; touch-action: none; }
    .lightbox-overlay .lb-track {
      position: absolute; inset: 0; display: flex; width: 300%;
      transform: translate3d(-33.3333%,0,0); will-change: transform;
    }
    .lightbox-overlay .lb-slide {
      flex: 0 0 33.3333%; display: flex; align-items: center; justify-content: center;
      padding: 56px 12px 48px; box-sizing: border-box;
    }
    .lightbox-overlay .lb-slide img { max-width: 100%; max-height: 100%; will-change: transform; }
    .lightbox-overlay .lb-close, .lightbox-overlay .lb-nav { z-index: 2; }
    .lightbox-overlay .lb-dots {
      position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none;
    }
    .lightbox-overlay .lb-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s, transform .2s; }
    .lightbox-overlay .lb-dots i.on { background: #fff; transform: scale(1.25); }
    .lightbox-overlay .lb-dots span { color: #fff; font-size: .85rem; background: rgba(0,0,0,.35); padding: 3px 10px; border-radius: 12px; }
    /* Телефон: без стрілок (гортаємо пальцем), фото майже на всю ширину. */
    @media (hover: none) and (pointer: coarse) {
      .lightbox-overlay .lb-nav { display: none; }
      .lightbox-overlay .lb-slide { padding: 56px 0 44px; }
      .lightbox-overlay .lb-slide img { border-radius: 0; }
    }

    /* Specs — акуратна картка на всю ширину (зебра-рядки, рамка), а не «висячі» рядки. */
    .specs-table {
      /* display:table ОБОВʼЯЗКОВО. У responsive.css є глобальний моб-запобіжник
         `table { display:block; overflow-x:auto }` — він рятує широкі таблиці
         (порівняння товарів) від вилізання за екран, але для вузьких ламає
         розкладку: при display:block рядки стають анонімною таблицею, яка
         стискається до контенту. На телефоні характеристики займали пів ширини
         картки, а решта лишалась порожньою. Тут таблиця завжди 2 колонки й
         переповнитись не може, тож скрол їй не потрібен. */
      display: table;
      width: 100%; border-collapse: collapse; margin: 20px 0;
      background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden;
    }
    /* Горизонтального скролу тут більше нема — довге нерозривне значення
       (посилання, артикул) мусить переноситись, а не розпирати картку. */
    .specs-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; vertical-align: top; line-height: 1.5; overflow-wrap: anywhere; }
    .specs-table tr:last-child td { border-bottom: none; }
    .specs-table tr:nth-child(even) td { background: var(--color-bg, var(--color-surface)); }
    /* Назва ліворуч (приглушена), значення праворуч (акцент). */
    .specs-table td:first-child { color: var(--color-text-muted); width: 44%; padding-right: 14px; }
    .specs-table td:last-child { font-weight: 700; text-align: right; color: var(--color-text); }
    @media (max-width: 768px) {
      .specs-table td { padding: 11px 14px; font-size: 0.95rem; }
      .specs-table td:first-child { width: 46%; }
    }

    /* Qty */
    .qty-control { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 5px; background: var(--color-surface); }
    .qty-control button {
      width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: none; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.35rem; line-height: 1; font-weight: 500; cursor: pointer;
      color: var(--color-accent, var(--color-accent-pure)); background: var(--color-bg, var(--color-surface));
      transition: background .15s ease, color .15s ease, transform .1s ease;
    }
    .qty-control button:hover { background: var(--color-accent, var(--color-accent-pure)); color: var(--color-on-accent); }
    .qty-control button:active { transform: scale(0.9); }
    .qty-control button:disabled { opacity: .4; cursor: not-allowed; background: var(--color-bg, var(--color-surface)); color: var(--color-accent, var(--color-accent-pure)); }
    #qty-display { font-weight: 700 !important; min-width: 34px; text-align: center; font-size: 1.08rem; color: var(--color-text); }

    /* Wishlist button — slightly larger on product detail page */
    .pg-wrap .wishlist-btn {
      top: 12px; right: 12px;
      width: 40px; height: 40px; font-size: 1.3rem;
      background: var(--color-surface); z-index: 4;
    }

    /* Contact buttons */
    .contact-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .btn-wa  { background: #25D366; color: white; border: none; }
    .btn-wa:hover  { background: #1da851; color: white; }
    .btn-tg  { background: #0088cc; color: white; border: none; }
    .btn-tg:hover  { background: #006fab; color: white; }

    /* Reviews */
    .reviews-section { margin-top: 56px; }
    .reviews-body { margin-top: 16px; }
    .review-card {
      background: var(--color-surface); border-radius: var(--border-radius-lg);
      padding: 18px 22px; box-shadow: var(--shadow-sm); margin-bottom: 12px;
      border-left: 3px solid var(--color-accent);
    }
    .review-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
    .review-stars { color: #f59e0b; font-size: 0.92rem; letter-spacing: 1px; }
    .review-author { font-weight: 700; font-size: 0.92rem; }
    .review-date { color: var(--color-text-muted); font-size: 0.78rem; }
    .review-text { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.65; }

    /* Відповідь майстрині на відгук */
    .review-reply {
      margin-top: 14px; padding: 12px 16px;
      background: linear-gradient(to right, rgb(var(--color-accent-rgb) / 0.06), transparent);
      border-left: 3px solid var(--color-accent);
      border-radius: 0 8px 8px 0;
    }
    .review-reply__label {
      display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
      font-size: 0.82rem; color: var(--color-text);
    }
    /* 🐱 Аватарка Ниткаль під відгуком — фірмовий знак, а не літера «Н».
       Текст усередині лишається для читалок екрана, візуально його ховає color:transparent. */
    .review-reply__badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      background: url('/img/logo/nytkal-badge.svg') center/cover no-repeat;
      color: transparent;
      font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700;
    }
    .review-reply__date { color: var(--color-text-muted); font-size: 0.75rem; margin-left: auto; }
    .review-reply__text { font-size: 0.88rem; line-height: 1.6; color: var(--color-text); font-style: italic; }

    /* Кнопки 👍/👎 */
    .review-helpful {
      margin-top: 12px; padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.06);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .review-helpful__label { font-size: 0.78rem; color: var(--color-text-muted); margin-right: 4px; }
    .review-helpful__btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 11px; border: 1.5px solid var(--color-border);
      border-radius: 20px; background: var(--color-surface); cursor: pointer;
      font-family: var(--font-body); font-size: 0.82rem;
      transition: all 0.15s; color: var(--color-text);
    }
    .review-helpful__btn:hover:not(:disabled) {
      border-color: var(--color-accent); background: var(--color-surface);
      transform: translateY(-1px);
    }
    .review-helpful__btn:disabled { opacity: 0.55; cursor: default; }
    .review-helpful__btn span { font-weight: 600; font-size: 0.78rem; color: var(--color-text-muted); }
    .review-form {
      background: var(--color-surface); border-radius: var(--border-radius-lg);
      padding: 24px; box-shadow: var(--shadow-sm); margin-top: 20px;
    }
    .review-form h3 { font-family: var(--font-heading); margin-bottom: 16px; font-size: 1rem; }
    .star-picker { display: flex; gap: 4px; margin-bottom: 16px; }
    .star-picker button {
      font-size: 1.7rem; background: none; border: none; cursor: pointer;
      color: #d1d5db; transition: color 0.15s; line-height: 1; padding: 0;
    }
    .star-picker button.active { color: #f59e0b; }
    .reviews-spinner { text-align: center; padding: 32px 0; color: var(--color-text-muted); font-size: 0.9rem; }

    @media (max-width: 768px) {
      .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
      .product-gallery { position: static; }
    }