/* ════════════════════════════════════════════════════════════════════════
   14-shop.css — VOALA výpis produktů („Eshop")

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE 2157:880 (verze 2. 9. 2026)
   - desktop: deset dlaždic 221 × 221 (2157:1483…1529) v 5 sloupcích
     a 2 řadách, mezera 29 (5 × 221 + 4 × 29 = 1221), pod tím červený
     pill „Další produkty" 187 × 40 (2157:1050)
   - mobil 13:395 (starší frame): dlaždice 170 × 170 ve dvou sloupcích
   - pod dlaždicí VLEVO: kategorie Inter 400 14/150 % RED (verzálky 18 px
     pod dlaždicí), název Inter 500 18/150 % BLACK (verzálky 38), cena
     Inter 500 14/150 % BLACK hned pod názvem („od 490 Kč")
   - fotka radius 5 (ve Figmě přes ni leží 10% černá — v šabloně ne)
   (Do 3. 9. 2026 tu byla vlevo velká dlaždice přes dvě řady a texty na
   střed; šířky sloupců 464fr 218fr…)

   Markup: template-parts/shop.php → [vo_shop]
   Sekce v Divi dostává CSS Class „vo-section vo-line-top vo-shop-section".

   Rozměry (optické, desktop 1440 z nového framu):
   účaří nadpisu → dlaždice        100   (řeší 10-section.css)
   spodek dlaždice → kategorie      18   (verzálky)
   kategorie → název                 —   (název navazuje, viz gap-name)
   konec ceny → další řada dlaždic  45
   konec ceny → tlačítko            56
   tlačítko → další sekce           55
   ════════════════════════════════════════════════════════════════════════ */

/* Spodní odsazení sekce musí sedět na SEKCI, ne na .vo-shop uvnitř —
   custom property se dědí dolů, ne nahoru, a padding čte .vo-section. */
.vo-shop-section {
  --vo-section-pad-bottom: clamp(49px, calc(46.77px + 0.571vw), 55px);
}

.vo-shop {
  --vo-shop-gap-col:  clamp(18px, calc(13.91px + 1.048vw), 29px);
  --vo-shop-gap-row:  clamp(25.9px, calc(18.81px + 1.819vw), 45px);
  --vo-shop-gap-cat:  clamp(3px, calc(0.03px + 0.762vw), 11px);   /* verzálky kategorie 18 pod dlaždicí */
  --vo-shop-gap-name: -2.2px;
  --vo-shop-gap-btn:  clamp(49px, calc(46.4px + 0.667vw), 56px);
  --vo-shop-cat:      14px;
  --vo-shop-name:     18px;
  --vo-shop-price:    14px;
  --vo-shop-btn-h:    40px;
  --vo-shop-btn-fs:   clamp(16px, calc(14.51px + 0.381vw), 20px);

  font-family: var(--font-base);
}

/* ── Mřížka: 5 stejných sloupců ──────────────────────────────────────── */
.vo-shop__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--vo-shop-gap-row) var(--vo-shop-gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-shop__grid > li { margin: 0; padding: 0; list-style: none; }
.vo-shop__grid > li::before { content: none; }   /* Divi si do li kreslí odrážky */

/* ── Dlaždice produktu ───────────────────────────────────────────────── */
.vo-shop .vo-product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--black-voala);
}

.vo-shop .vo-product__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--gray-voala);
  box-shadow: var(--shadow-map);
}
.vo-shop .vo-product__img,
.vo-shop .vo-product__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-base);
}
.vo-shop .vo-product:hover .vo-product__img { transform: scale(1.04); }

/* ── Popisky ─────────────────────────────────────────────────────────── */
.vo-shop .vo-product__cat {
  display: block;
  margin-top: var(--vo-shop-gap-cat);
  font-size: var(--vo-shop-cat);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--red-voala);
  text-align: left;
}

.vo-shop .vo-product__name {
  display: block;
  margin-top: var(--vo-shop-gap-name);
  font-size: var(--vo-shop-name);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--black-voala);
  text-align: left;
}
/* Produkt bez kategorie — název nesmí vyjet nahoru přes zápornou mezeru */
.vo-shop .vo-product__media + .vo-product__name { margin-top: var(--vo-shop-gap-cat); }

/* Cena hned pod názvem („od 490 Kč" — filtr voala_price_range_from) */
.vo-shop .vo-product__price {
  display: block;
  margin: 0;
  font-size: var(--vo-shop-price);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--black-voala);
  text-align: left;
}
.vo-shop .vo-product__price del { opacity: .55; margin-right: .35em; }
.vo-shop .vo-product__price ins { text-decoration: none; }

.vo-shop .vo-product:hover .vo-product__name { color: var(--red-voala); }
.vo-shop .vo-product:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ── Tlačítko pod mřížkou ────────────────────────────────────────────── */
.vo-shop__more {
  margin: var(--vo-shop-gap-btn) 0 0;
  padding: 0;
  text-align: center;
}

.vo-shop .vo-shop__btn,
.vo-shop a.vo-shop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 187px;
  min-height: var(--vo-shop-btn-h);
  padding: 0 26px !important;
  box-shadow: var(--shadow-map);
  border: 0 !important;
  border-radius: 30px !important;
  background: var(--red-voala) !important;
  color: var(--white-voala) !important;
  font-family: var(--font-base);
  font-size: var(--vo-shop-btn-fs) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none;
  transition: background var(--t-fast);
}
.vo-shop .vo-shop__btn:hover { background: var(--red-voala-dark) !important; }
.vo-shop .vo-shop__btn:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}

/* ── Prázdný stav (jen pro přihlášeného editora) ─────────────────────── */
.vo-shop__empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Pět sloupců by na užším okně dalo příliš malé dlaždice */
  .vo-shop__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  /* Mobilní frame: dvě dlaždice vedle sebe, všechny stejné */
  .vo-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vo-shop .vo-product__img { transition: none; }
  .vo-shop .vo-product:hover .vo-product__img { transform: none; }
}