/* ════════════════════════════════════════════════════════════════
   product-mobile.css — сторінка товару (bouquet_detail.html)

   Навіщо: на 375×667 ціна і кнопка «В корзину» опинялись на 714/725px,
   тобто за межею першого екрана. Людина з пошуку не бачила ціни й ішла.

   Цей файл: (1) теплий комерційний акцент --buy для ціни та кнопки
   на всіх ширинах, (2) перебудова першого екрана тільки на мобільному,
   (3) липка панель покупки.

   Правило: нічого з bouquets.css тут не редагується — перебиття лише
   підвищенням специфічності. Десктопна розкладка не змінюється.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. Теплий акцент: ціна та кнопки купівлі (всі ширини)
   Єдина яскрава річ на сторінці. Решта лишається брендовою синьою.
   Білий на --buy = 5.83:1, на --buy-dark = 8.06:1 (WCAG AA пройдено).
   ───────────────────────────────────────────────────────────── */
.product-detail .flower-second-block .new-price p,
.product-detail .flower-second-block .price p {
  color: var(--buy, #B03A5B);
}

.product-detail .flower-second-block .old-price s {
  color: var(--color-text-muted, #5A7A96);
}

.product-detail .prices {
  padding: 0;
}

.product-detail .btn-add-to-cart,
.sticky-buy .btn-add-to-cart {
  background: var(--buy, #B03A5B);
  color: var(--on-buy, #fff);
  box-shadow: 0 4px 16px rgba(176, 58, 91, .30);
  /* тап-зона: 48px > мінімальних 44px */
  min-height: 48px;
  padding: 13px 24px;
  justify-content: center;
}

.product-detail .btn-add-to-cart:hover,
.sticky-buy .btn-add-to-cart:hover {
  background: var(--buy-dark, #8E2C48);
  opacity: 1;
  box-shadow: 0 6px 22px rgba(176, 58, 91, .40);
}

.product-detail .btn-add-to-cart:focus-visible,
.sticky-buy .btn-add-to-cart:focus-visible {
  outline: 3px solid var(--buy-dark, #8E2C48);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   2. Липка панель покупки (тільки мобільний)
   Показується, коли основна кнопка проскролена за межі видимості.
   Кнопка всередині має той самий клас .btn-add-to-cart і ті самі
   data-id/data-slug — глобальний делегований обробник у cart.js
   підхоплює її без жодних змін у JS кошика.
   ───────────────────────────────────────────────────────────── */
.sticky-buy {
  display: none;
}

.sticky-buy__label {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  color: var(--color-text-muted, #5A7A96);
}

.sticky-buy__old {
  font-size: 13px;
  color: var(--color-text-muted, #5A7A96);
}

.sticky-buy__price {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--buy, #B03A5B);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   3. Мобільна розкладка першого екрана (≤ 767px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* --- панель покупки вмикається --- */
  .sticky-buy {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--color-surface, #fff);
    border-top: 1px solid var(--color-border, #D6E8F5);
    box-shadow: 0 -4px 18px rgba(30, 80, 140, .14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* приховано: visibility знімає її і з таб-порядку */
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .22s ease, visibility .22s ease;
  }

  .sticky-buy.is-visible {
    visibility: visible;
    transform: translateY(0);
  }

  .sticky-buy__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
  }

  .sticky-buy__prices {
    flex: 0 0 auto;
    min-width: 0;
  }

  .sticky-buy .btn-add-to-cart {
    flex: 1 1 auto;
    font-size: 16px;
  }

  /* поки панель видима — щоб вона не закривала низ сторінки */
  html.has-sticky-buy body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* --- ущільнення відступів над фото --- */
  .product-detail {
    margin-top: 12px;
    gap: 10px;
    align-items: stretch;
  }

  /* --- головне фото нижче: 280px → 250px ---
     object-fit: contain лишається свідомо: букет ніколи не обрізається,
     бо саме він і є товаром. */
  .product-detail .main-image {
    height: 250px;
    width: 100%;
    object-fit: contain;
    border-radius: 12px;
    background: var(--brand-xlight, #EBF4FC);
  }

  /* --- мініатюри йдуть з-під фото вниз, під опис ---
     display: contents піднімає фото / підказку / мініатюри до рівня
     .product-detail, і далі їх розкладає order. Свайп-скрипт у
     bouquets.js читає ті самі .gallery-thumbnails img, тому гортання
     фото пальцем працює як раніше. */
  @supports (display: contents) {
    .product-detail .gallery,
    .product-detail .gallery-child {
      display: contents;
    }

    .product-detail .main-image      { order: 1; }
    .product-detail .gallery-hint    { order: 2; }
    .product-detail .product-info    { order: 3; }
    .product-detail .gallery-thumbs-label,
    .product-detail .gallery-thumbnails { order: 4; }
  }

  /* якщо display: contents не підтримується — просто ховаємо смужку
     мініатюр, свайп по фото лишається */
  @supports not (display: contents) {
    .product-detail .gallery-thumbnails,
    .product-detail .gallery-thumbs-label {
      display: none;
    }
  }

  .product-detail .gallery-hint {
    display: block;
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-muted, #5A7A96);
    text-align: center;
  }

  .product-detail .gallery-thumbs-label {
    display: block;
    margin: 8px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text, #0F1E2D);
  }

  .product-detail .gallery-thumbnails {
    width: 100%;
    margin-top: 0;
  }

  /* --- H1: коротший, максимум 2 рядки, повна назва в title --- */
  .product-detail .product-info h1 {
    font-size: 21px;
    line-height: 1.25;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- «Код:NN» — службовий артикул, а не інформація покупцю --- */
  .product-detail .flower-first-block {
    border-top: 0;
    padding: 0 0 4px;
    min-height: 0;
  }

  .product-detail .flower-first-block .product-id {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-muted, #5A7A96);
    opacity: .65;
    margin-right: 0;
  }

  /* якщо відгуків немає — рядок узагалі порожній, прибираємо його з потоку */
  .product-detail .product-star {
    min-height: 20px;
  }

  /* --- ціна + кнопка: пара, одразу під заголовком --- */
  .product-detail .flower-second-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border, #D6E8F5);
  }

  .product-detail .flower-second-block .prices {
    flex: 0 0 auto;
  }

  .product-detail .flower-second-block .new-price p,
  .product-detail .flower-second-block .price p {
    font-size: 26px;
    line-height: 1.05;
  }

  .product-detail .flower-second-block .old-price {
    font-size: 14px;
    line-height: 1.2;
  }

  .product-detail .flower-second-block .btn-add-to-cart {
    flex: 1 1 160px;
    font-size: 16px;
  }

  /* --- блок довіри піднімаємо в перший екран --- */
  .product-detail .buy-assurance {
    margin-top: 10px;
    padding: 12px 14px;
    gap: 8px;
  }

  .product-detail .buy-assurance__item {
    font-size: 13px;
    line-height: 1.35;
  }

  /* опис і категорії — вже поза першим екраном, трохи стискаємо */
  .product-detail .flower-third-block {
    padding: 12px 0;
  }
}

/* дуже вузькі екрани (320–360px) */
@media (max-width: 360px) {
  .product-detail .main-image { height: 220px; }
  .product-detail .product-info h1 { font-size: 19px; }
  .sticky-buy__price { font-size: 20px; }
  .sticky-buy__inner { gap: 8px; padding: 8px 12px; }
}

/* десктоп: підказки про свайп і підпис до мініатюр не потрібні */
@media (min-width: 768px) {
  .gallery-hint,
  .gallery-thumbs-label {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. Доступність
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sticky-buy {
    transition: none;
  }

  .product-detail .btn-add-to-cart,
  .sticky-buy .btn-add-to-cart {
    transition: none;
  }
}