/* ═══════════════════════════════════════════════════════
   KOUSKYSVETA DESIGN SYSTEM — KOMPONENTY (znovupoužitelné třídy)
   ───────────────────────────────────────────────────────
   Přiřazuj přes: Elementor widget → Advanced → CSS Classes,
   nebo přímo v HTML jako class="...".
   Všechny hodnoty jdou přes tokeny z tokens.css — žádné
   hardcoded barvy/spacingy. Každou novou třídu registruj
   i v ../classes.md (přes: node scripts/inventory.mjs).
   ═══════════════════════════════════════════════════════ */

/* ── TLAČÍTKA ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  min-height: var(--min-touch);
  padding: var(--s-sm) var(--s-lg);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }

/* Primární = zelený (CTA: Přidat do košíku) */
.btn-primary {
  background: var(--color-secondary);
  color: var(--color-text-invert);
  font-size: var(--t-sm);
}
.btn-primary:hover { background: var(--color-secondary-hover); }

/* Sekundární = oranžový (akcent CTA) */
.btn-secondary {
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--t-sm);
}
.btn-secondary:hover { background: var(--color-primary-hover); }

/* Outline = průhledný s rámečkem */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-grey-light);
  font-size: var(--t-xs);
}
.btn-outline:hover { border-color: var(--color-primary); }

/* Malé tlačítko */
.btn-sm {
  padding: var(--s-xs) var(--s-md);
  font-size: var(--t-xs);
  min-height: 36px;
}

/* ── BADGES ── */
.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: var(--s-2xs) var(--s-xs);
  border-radius: 2px;
}
.badge-cz {
  background: rgba(255, 255, 255, 0.93);
  color: var(--color-text);
}
.badge-best {
  background: var(--color-primary);
  color: var(--color-text-invert);
}
.badge-stock {
  color: var(--color-secondary);
  font-weight: 600;
}

/* ── SEKCE ── */
.section-product {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s-md) var(--s-xl);
}

.section-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s-md) var(--s-xl);
  border-top: 1px solid var(--color-grey-light);
}

.section-crosssell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--s-xl) var(--s-md) var(--s-2xl);
  border-top: 1px solid var(--color-grey-light);
}

/* ── NADPISY ── */
.heading-product {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}

.heading-section {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--s-md);
}

.heading-subsection {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--s-sm);
}

.label-upper {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-grey);
}

/* ── CENA ── */
.price-display {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--color-text);
}

.price-note {
  font-size: var(--t-xs);
  color: var(--color-grey);
  margin-top: var(--s-2xs);
}

/* ── DOSTUPNOST ── */
.availability {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--color-secondary);
  margin: var(--s-md) 0 var(--s-lg);
}
.availability::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── VARIANT KARTY ── */
.variant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-sm) var(--s-md);
  border: 1.5px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.variant-card:hover { border-color: var(--color-primary); }
.variant-card.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.variant-card-name {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
}
.variant-card-desc {
  font-size: var(--t-xs);
  color: var(--color-grey);
}
.variant-card-price {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--color-grey-accent);
}

/* ── INPUT POLE ── */
.input-field {
  width: 100%;
  padding: var(--s-sm) var(--s-md);
  border: 1.5px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
}
.input-field:focus { border-color: var(--color-primary); }

.input-hint {
  font-size: var(--t-xs);
  color: var(--color-grey);
  margin-top: var(--s-2xs);
}

/* ── FEATURE BOXY ── */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-grey-light);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: var(--s-xl);
}
.feature-box {
  background: var(--color-bg);
  padding: var(--s-lg) var(--s-md);
}
.feature-number {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 700;
  color: var(--color-grey-light);
  line-height: 1;
  margin-bottom: var(--s-xs);
}
.feature-title {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--s-2xs);
}
.feature-text {
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  line-height: 1.6;
}

@media (min-width: 600px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── CONTENT LIST (obsah krabičky) ── */
.content-list {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.content-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  font-size: var(--t-xs);
  border-bottom: 1px solid var(--color-grey-light);
  line-height: 1.4;
}
.content-item:last-child { border-bottom: none; }
.content-item-num {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.4;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}
.content-group-title {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: var(--s-sm) var(--s-md) var(--s-xs);
  background: var(--color-grey-light);
}

@media (min-width: 600px) {
  .content-list { grid-template-columns: repeat(2, 1fr); }
  .content-item:nth-child(odd) { border-right: 1px solid var(--color-grey-light); }
}

/* ── TABS ── */
.tab-navigation {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-grey-light);
  margin-bottom: var(--s-xl);
}
.tab-navigation::-webkit-scrollbar { display: none; }

.tab-button {
  padding: var(--s-sm) var(--s-md);
  min-height: var(--min-touch);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-grey);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── FAQ ACCORDION ── */
.faq-item {
  border-bottom: 1px solid var(--color-grey-light);
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--s-sm) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  min-height: var(--min-touch);
}
.faq-answer {
  display: none;
  padding: 0 0 var(--s-sm);
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  line-height: 1.65;
}
.faq-item.open .faq-answer { display: block; }

/* ── RECENZE ── */
.review-score {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 700;
  line-height: 1;
}
.review-stars {
  font-size: var(--t-lg);
  color: var(--color-primary);
  letter-spacing: 1px;
}
.review-bar-fill {
  height: 5px;
  background: var(--color-primary);
  border-radius: 3px;
}
.review-bar-bg {
  height: 5px;
  background: var(--color-grey-light);
  border-radius: 3px;
}
.review-card {
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--color-grey-light);
}
.review-name {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
}
.review-text {
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  line-height: 1.6;
}

/* ── MICRO GARANTIE ── */
.micro-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  padding-top: var(--s-md);
  border-top: 1px solid var(--color-grey-light);
}

/* ── CROSS-SELL GRID ── */
.crosssell-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-md);
}
.crosssell-card {
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.crosssell-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-s);
}
.crosssell-card-body { padding: var(--s-sm); }
.crosssell-card-name {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
}
.crosssell-card-price {
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
}

@media (min-width: 600px) {
  .crosssell-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── STICKY BAR ── */
.sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-text);
  color: var(--color-text-invert);
  padding: var(--s-sm) var(--s-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}
.sticky-cart.visible { transform: translateY(0); }
.sticky-cart-name {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
}
.sticky-cart-price {
  font-size: var(--t-xs);
  color: var(--color-grey);
}

/* ── NOTIFICATION BAR ── */
.notification-bar {
  background: var(--color-text);
  color: var(--color-grey);
  text-align: center;
  padding: var(--s-xs) var(--s-md);
  font-size: var(--t-xs);
}
.notification-bar strong { color: var(--color-primary); }

/* ── BREADCRUMB ── */
.breadcrumb-nav {
  padding: var(--s-xs) var(--s-md);
  font-size: var(--t-xs);
  color: var(--color-grey);
}
.breadcrumb-nav a { color: var(--color-grey); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--color-text); }

/* ── PROSE (popisné texty) ── */
.prose { max-width: 680px; }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  text-transform: uppercase;
  margin: var(--s-xl) 0 var(--s-sm);
}
.prose h3:first-child { margin-top: 0; }
.prose p {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--color-grey-accent);
  margin-bottom: var(--s-sm);
}

/* ── GALLERY ── */
.gallery-thumbs-row {
  display: flex;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-thumbs-row::-webkit-scrollbar { display: none; }
.gallery-thumb-item {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-s);
  background: var(--color-grey-light);
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.gallery-thumb-item.active,
.gallery-thumb-item:hover { border-color: var(--color-text); }

@media (min-width: 900px) {
  .gallery-thumb-item { width: 72px; height: 72px; }
}

/* ── QUANTITY ── */
.qty-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  flex-shrink: 0;
}
.qty-button {
  width: var(--min-touch);
  height: 50px;
  background: none;
  border: none;
  font-size: var(--t-xl);
  color: var(--color-grey-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.qty-input {
  width: 36px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  border: none;
  outline: none;
}

/* ═══════════════════════════════════════════════════════
   KPZ REVIEWS — WooCommerce wrapper ([kpz_product_reviews])
   + Trustpilot badge ([kpz_trustpilot])
   Vše namespaced, žádný global leak, jen design tokeny.
   ═══════════════════════════════════════════════════════ */

.kpz-reviews {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* ── Summary (bez bars) ── */
.kpz-reviews__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
  margin-bottom: var(--s-md-lg);
  padding-bottom: var(--s-md-lg);
  border-bottom: 1px solid var(--color-grey-light);
}
.kpz-reviews__big {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 700;
  line-height: 1;
}
.kpz-reviews__stars {
  font-size: var(--t-xl);
  color: var(--color-primary);
  letter-spacing: 2px;
  line-height: 1;
}
.kpz-reviews__count {
  font-size: var(--t-xs);
  color: var(--color-grey);
}

/* ── Nativní WC výstup uvnitř scope ── */
/* Skryjeme duplicitní WC nadpis (panel už má vlastní H2). */
.kpz-reviews .woocommerce-Reviews-title { display: none; }
/* Nový eshop / žádné recenze: nativní hláška */
.kpz-reviews .woocommerce-noreviews {
  font-size: var(--t-sm);
  color: var(--color-grey-accent);
  margin: var(--s-md) 0 var(--s-lg);
}

.kpz-reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kpz-reviews .commentlist li.review,
.kpz-reviews .commentlist li.comment {
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--color-grey-light);
}
.kpz-reviews .comment_container {
  display: block;
}
/* Bez avatarů — design je nemá */
.kpz-reviews .comment_container img.avatar { display: none; }

.kpz-reviews .woocommerce-review__author {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-style: normal;
}
.kpz-reviews .woocommerce-review__dates,
.kpz-reviews .woocommerce-review__published-date {
  display: block;
  font-size: var(--t-xs);
  color: var(--color-grey);
  margin-top: 2px;
}
.kpz-reviews .description {
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  line-height: 1.6;
  margin-top: var(--s-xs);
}
.kpz-reviews .woocommerce-review__verified {
  font-size: var(--t-xs);
  color: var(--color-secondary);
  font-weight: 600;
  margin-left: var(--s-xs);
}

/* WC star-rating (recenze i formulář) — přebarvit do brandu */
.kpz-reviews .star-rating {
  color: var(--color-primary);
  font-size: var(--t-sm);
  margin: var(--s-2xs) 0;
}
.kpz-reviews .star-rating::before { color: var(--color-grey-light); }

/* ── Nativní WC formulář ── */
.kpz-reviews #review_form_wrapper { margin-top: var(--s-lg); }
.kpz-reviews #reply-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: var(--s-sm);
}
.kpz-reviews .comment-form-rating label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-grey);
  display: block;
  margin-bottom: var(--s-2xs);
}
.kpz-reviews .comment-form-rating .stars a { color: var(--color-primary); }

.kpz-reviews .comment-form label {
  font-size: var(--t-xs);
  color: var(--color-grey-accent);
  display: block;
  margin-bottom: var(--s-2xs);
}
.kpz-reviews .comment-form input[type="text"],
.kpz-reviews .comment-form input[type="email"],
.kpz-reviews .comment-form textarea {
  width: 100%;
  padding: var(--s-sm) var(--s-md);
  border: 1.5px solid var(--color-grey-light);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
}
.kpz-reviews .comment-form input:focus,
.kpz-reviews .comment-form textarea:focus {
  border-color: var(--color-primary);
}
.kpz-reviews .comment-form p { margin-bottom: var(--s-md); }
.kpz-reviews .form-submit input[type="submit"],
.kpz-reviews .form-submit .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--color-secondary);
  color: var(--color-text-invert);
  border: none;
  border-radius: var(--radius-s);
  min-height: var(--min-touch);
  padding: var(--s-sm) var(--s-lg);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.kpz-reviews .form-submit input[type="submit"]:hover,
.kpz-reviews .form-submit .submit:hover {
  background: var(--color-secondary-hover);
}

/* ═══ Trustpilot badge ([kpz_trustpilot]) ═══ */
.kpz-trustpilot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-xs) var(--s-md);
  border: 1.5px solid var(--color-grey-light);
  border-radius: var(--radius-xl);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.kpz-trustpilot:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.kpz-trustpilot__stars {
  color: var(--color-primary);
  letter-spacing: 1px;
  line-height: 1;
}
.kpz-trustpilot__arrow {
  color: var(--color-grey);
  transition: transform var(--transition-fast);
}
.kpz-trustpilot:hover .kpz-trustpilot__arrow { transform: translateX(2px); }

/* ═══ Responsive ═══ */
@media (min-width: 600px) {
  .kpz-reviews__summary { gap: var(--s-sm) var(--s-lg); }
}

/* ═══════════════════════════════════════════════════════
   PLUGIN REVIEWS SHORTCODY — šířka
   [ks_reviews_summary] → .reviews-summary, [ks_reviews_grid] → .reviews-grid
   Vkládají se jako samostatný widget (mimo .ksw-page .wrap), takže by jely
   přes celou šířku. Omezíme je na stejnou šířku + boční padding jako .wrap.
   ═══════════════════════════════════════════════════════ */
.reviews-summary,
.reviews-grid {
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-xl);
  padding-right: var(--s-xl);
}