/* ====== Produkt – modulární šablona pro e-shop ====== */
/* Prefix .cp- = CirkusovePotreby                       */

.cp-product-desc {
  --cp-max: 1100px;
  --cp-gap: 48px;
  --cp-pad: 56px;
  --cp-pad-sm: 28px;
  --cp-bg: #f3f4f6;
  --cp-dark: #0f172a;
  --cp-muted: #6b7280;
  --cp-accent: #16a34a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111827;
  line-height: 1.65;
  container-type: inline-size;
}

/* ── Sekce ── */
.cp-section { max-width: var(--cp-max); margin: 0 auto; padding: var(--cp-pad) 20px; }

/* ── Grid 2 sloupce ── */
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-gap); align-items: center; }

/* ── Nadpisy ── */
.cp-title-xl { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: .02em; margin: 0 0 14px; font-weight: 700; color: var(--cp-dark); }
.cp-title-lg { font-size: clamp(22px, 2.7vw, 28px); margin: 0 0 10px; font-weight: 700; color: var(--cp-dark); }
.cp-title-md { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 8px; font-weight: 700; color: var(--cp-dark); }

/* ── Text ── */
.cp-text p { margin: 0 0 12px; }
.cp-muted { color: var(--cp-muted); font-size: 14px; }

/* ── Obrázky ── */
.cp-figure { text-align: right; }
.cp-figure--left { text-align: left; }
.cp-img { width: 100%; height: auto; display: inline-block; max-width: 520px; }
.cp-img--sm { max-width: 360px; }
.cp-img-cover { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── Full-bleed pozadí ── */
.cp-bleed-gray { background: var(--cp-bg); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.cp-bleed-dark { background: #0b1220; color: #eef2ff; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.cp-bleed-black { background: #000; color: #fff; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* ── Galerie 2×2 ── */
.cp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── Sloupce ── */
.cp-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.cp-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.cp-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }

/* ── Karty ── */
.cp-card { display: grid; gap: 8px; }
.cp-card h4 { margin: 0; font-size: 16px; font-weight: 700; }
.cp-card p { margin: 0; font-size: 14px; color: #374151; }

/* ── Video ── */
.cp-video { position: relative; aspect-ratio: 16/9; max-width: var(--cp-max); margin: 0 auto; }
.cp-video iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── Průvodce (číslované kroky) ── */
.cp-guide { background: #fff; border-radius: 12px; padding: 32px 36px; }
.cp-guide h3 { margin: 0 0 20px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--cp-dark); }
.cp-guide-item { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: start; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; }
.cp-guide-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cp-guide-num { width: 36px; height: 36px; border-radius: 50%; background: var(--cp-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.cp-guide-content h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cp-guide-content p { margin: 0; font-size: 14px; color: #374151; line-height: 1.6; }

/* ── Tabulka parametrů ── */
.cp-specs-table { width: 100%; border-collapse: collapse; }
.cp-specs-table tr:nth-child(odd) td { background: #f9fafb; }
.cp-specs-table td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
.cp-specs-table td:first-child { font-weight: 600; color: var(--cp-dark); width: 50%; }

/* ── Seznam výhod ── */
.cp-benefits { list-style: none; margin: 0; padding: 0; }
.cp-benefits li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; border-bottom: 1px solid #e5e7eb; }
.cp-benefits li:last-child { border-bottom: none; }
.cp-benefits li::before { content: "\2713"; position: absolute; left: 0; color: var(--cp-accent); font-weight: 700; }

/* ── Citát / Testimonial ── */
.cp-quote { max-width: 820px; margin: 0 auto; text-align: left; }
.cp-quote p { font-style: italic; font-size: 16px; line-height: 1.7; }
.cp-quote .cp-author { margin-top: 10px; font-weight: 600; font-style: normal; }

/* ── FAQ akordeon ── */
.cp-faq { max-width: var(--cp-max); margin: 0 auto; }
.cp-faq-item { border-bottom: 1px solid #e5e7eb; }
.cp-faq-q { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--cp-dark); }
.cp-faq-q::after { content: "+"; font-size: 20px; color: var(--cp-muted); transition: transform .2s; }
.cp-faq-item.open .cp-faq-q::after { content: "\2212"; }
.cp-faq-a { padding: 0 0 16px; font-size: 14px; color: #374151; line-height: 1.6; display: none; }
.cp-faq-item.open .cp-faq-a { display: block; }

/* ── CTA banner ── */
.cp-cta { text-align: center; padding: 48px 20px; }
.cp-cta h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; margin: 0 0 12px; }
.cp-cta p { font-size: 16px; color: #374151; margin: 0 0 24px; }
.cp-cta-btn { display: inline-block; padding: 14px 36px; background: var(--cp-dark); color: #fff; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s; }
.cp-cta-btn:hover { background: #1e293b; }

/* ── Ikony v řadě ── */
.cp-icons-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.cp-icon-item { text-align: center; max-width: 140px; }
.cp-icon-item .cp-icon-symbol { font-size: 32px; margin-bottom: 8px; }
.cp-icon-item h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.cp-icon-item p { margin: 0; font-size: 12px; color: var(--cp-muted); }

/* ── Timeline ── */
.cp-timeline { position: relative; padding-left: 32px; }
.cp-timeline::before { content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: #e5e7eb; }
.cp-timeline-item { position: relative; padding-bottom: 28px; }
.cp-timeline-item:last-child { padding-bottom: 0; }
.cp-timeline-dot { position: absolute; left: -32px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--cp-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.cp-timeline-item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cp-timeline-item p { margin: 0; font-size: 14px; color: #374151; }

/* ── Info box ── */
.cp-info-box { border-radius: 10px; padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; }
.cp-info-box--info { background: #eff6ff; border-left: 4px solid #3b82f6; }
.cp-info-box--warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
.cp-info-box--success { background: #f0fdf4; border-left: 4px solid #16a34a; }
.cp-info-box--danger { background: #fef2f2; border-left: 4px solid #ef4444; }
.cp-info-box-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.cp-info-box-content h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cp-info-box-content p { margin: 0; font-size: 14px; color: #374151; }

/* ── Oddělovač ── */
.cp-separator { text-align: center; padding: 8px 0; }
.cp-separator hr { border: none; border-top: 1px solid #e5e7eb; margin: 0; }
.cp-separator--thick hr { border-top-width: 3px; }
.cp-separator--dotted hr { border-top-style: dotted; }
.cp-separator--dashed hr { border-top-style: dashed; }

/* ── Stažení souborů ── */
.cp-downloads { display: flex; flex-direction: column; gap: 10px; }
.cp-download-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: inherit; transition: border-color .2s; }
.cp-download-item:hover { border-color: var(--cp-dark); }
.cp-download-icon { font-size: 24px; }
.cp-download-info h4 { margin: 0; font-size: 14px; font-weight: 600; }
.cp-download-info p { margin: 2px 0 0; font-size: 12px; color: var(--cp-muted); }

/* ── Související produkty ── */
.cp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cp-related-item { text-align: center; text-decoration: none; color: inherit; }
.cp-related-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.cp-related-item h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.cp-related-item p { margin: 0; font-size: 13px; color: var(--cp-muted); }
.cp-related-item .cp-price { font-weight: 700; color: var(--cp-dark); font-size: 15px; margin-top: 4px; }
.cp-related-btn {
  display: inline-block; margin-top: 10px; padding: 8px 20px;
  background: var(--cp-accent); color: #fff; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: text;
}

/* ── Srovnávací tabulka ── */
.cp-compare-table { width: 100%; border-collapse: collapse; text-align: center; }
.cp-compare-table th { padding: 12px 14px; font-size: 14px; font-weight: 700; background: var(--cp-dark); color: #fff; }
.cp-compare-table th:first-child { background: transparent; color: var(--cp-dark); text-align: center; }
.cp-compare-table td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
.cp-compare-table td:first-child { font-weight: 600; text-align: left; }
.cp-compare-table tr:nth-child(even) td { background: #f9fafb; }

/* ── Before / After ── */
.cp-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-before-after figure { margin: 0; text-align: center; }
.cp-before-after img { width: 100%; height: auto; display: block; border-radius: 8px; }
.cp-before-after figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Recenze ── */
.cp-reviews { display: flex; flex-direction: column; gap: 20px; }
.cp-review { background: #f9fafb; border-radius: 10px; padding: 20px 24px; }
.cp-review-stars { color: #f59e0b; font-size: 16px; margin-bottom: 8px; letter-spacing: 2px; }
.cp-review p { font-size: 14px; margin: 0 0 10px; color: #374151; font-style: italic; }
.cp-review .cp-review-author { font-size: 13px; font-weight: 600; color: var(--cp-dark); font-style: normal; }

/* ── Celošířkový obrázek ── */
.cp-full-img { text-align: center; }
.cp-full-img img { width: 100%; max-width: var(--cp-max); height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.cp-full-img figcaption { margin-top: 10px; font-size: 13px; color: var(--cp-muted); }

/* ── Barevná galerie ── */
.cp-color-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-color-gallery figure { margin: 0; text-align: center; }
.cp-color-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }
.cp-color-gallery figcaption { margin-top: 6px; font-size: 12px; color: var(--cp-muted); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVITA
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cp-grid { grid-template-columns: 1fr !important; align-items: start; gap: 28px; }
  .cp-figure, .cp-figure--left { text-align: left; }
  .cp-img, .cp-img--sm { max-width: 100%; }
  .cp-cols-3 { grid-template-columns: 1fr; }
  .cp-cols-4 { grid-template-columns: 1fr 1fr; }
  .cp-related { grid-template-columns: 1fr 1fr !important; }
  .cp-color-gallery { grid-template-columns: 1fr 1fr !important; }
  .cp-icons-row { gap: 28px; }
  .cp-before-after { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cp-section { padding: var(--cp-pad-sm) 16px; }
  .cp-gallery { grid-template-columns: 1fr; }
  .cp-cols-4 { grid-template-columns: 1fr; }
  .cp-cols-2 { grid-template-columns: 1fr; }
  .cp-related { grid-template-columns: 1fr !important; }
  .cp-color-gallery { grid-template-columns: 1fr 1fr !important; }
  .cp-icons-row { gap: 20px; }
}

/* ── Container queries pro responsivní náhled v editoru ── */
/* Breakpoints: 700px ~ tablet, 450px ~ mobile                */
/* (nižší než @media, protože container = oblast obsahu, ne viewport) */
@container (max-width: 700px) {
  .cp-grid { grid-template-columns: 1fr !important; align-items: start; gap: 28px; }
  .cp-figure, .cp-figure--left { text-align: left; }
  .cp-img, .cp-img--sm { max-width: 100%; }
  .cp-cols-3 { grid-template-columns: 1fr; }
  .cp-cols-4 { grid-template-columns: 1fr 1fr; }
  .cp-related { grid-template-columns: 1fr 1fr !important; }
  .cp-color-gallery { grid-template-columns: 1fr 1fr !important; }
  .cp-icons-row { gap: 28px; }
  .cp-before-after { grid-template-columns: 1fr; }
}
@container (max-width: 450px) {
  .cp-section { padding: var(--cp-pad-sm) 16px; }
  .cp-gallery { grid-template-columns: 1fr; }
  .cp-cols-4 { grid-template-columns: 1fr; }
  .cp-cols-2 { grid-template-columns: 1fr; }
  .cp-related { grid-template-columns: 1fr !important; }
  .cp-color-gallery { grid-template-columns: 1fr 1fr !important; }
  .cp-icons-row { gap: 20px; }
}