/* ── HP: Hero slider ────────────────────────────────────── */
.hp-hero { padding: var(--space-2) 0 var(--space-6); }
.hp-slider {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  height: 220px;
}
@media (min-width: 480px) { .hp-slider { height: 280px; } }
@media (min-width: 768px) { .hp-slider { height: 360px; } }
@media (min-width: 1024px){ .hp-slider { height: 440px; } }
@media (min-width: 1280px){ .hp-slider { height: 480px; } }

.hp-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .6s ease; pointer-events: none;
}
.hp-slide--active { opacity: 1; pointer-events: auto; }
.hp-slide__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, oklch(17% .008 260 / .7) 0%, oklch(17% .008 260 / .25) 55%, transparent 80%);
}
.hp-slide__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-5);
}
@media (min-width: 640px) {
  .hp-slide__content { padding: var(--space-8) var(--space-10); justify-content: center; }
}
.hp-slide__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-4xl));
  font-weight: 800; color: var(--color-white);
  text-transform: uppercase; letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 12px oklch(17% .008 260 / .4);
}
.hp-slide__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-ember); color: var(--color-white);
  font-size: var(--text-sm); font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  align-self: flex-start;
}
.hp-slide__cta:hover { background: var(--color-ember-dark); color: var(--color-white); }
.hp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: oklch(100% 0 0 / .15); backdrop-filter: blur(6px);
  border: 1px solid oklch(100% 0 0 / .25);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white); cursor: pointer;
  transition: background var(--transition-fast); z-index: 10;
}
.hp-arrow:hover { background: oklch(100% 0 0 / .28); }
.hp-arrow--prev { left: var(--space-3); }
.hp-arrow--next { right: var(--space-3); }
@media (min-width: 640px) {
  .hp-arrow { width: 48px; height: 48px; }
  .hp-arrow--prev { left: var(--space-5); }
  .hp-arrow--next { right: var(--space-5); }
}
.hp-dots {
  position: absolute; bottom: var(--space-4); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: var(--space-2); z-index: 10;
}
.hp-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: oklch(100% 0 0 / .4); cursor: pointer;
  transition: all var(--transition-fast); border: none; padding: 0;
}
.hp-dot--active { background: var(--color-white); width: 24px; }
.hp-slide__bg-grad {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-forest-dark) 0%, var(--color-charcoal) 100%);
}

/* ── HP: sekce obecné ───────────────────────────────────── */
.hp-section { padding: var(--space-8) 0; }
@media (min-width: 1024px) { .hp-section { padding: var(--space-10) 0; } }
.hp-section--tight { padding: var(--space-6) 0; }
@media (min-width: 1024px) { .hp-section--tight { padding: var(--space-6) 0; } }
.hp-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap;
}
.hp-section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 800; color: var(--color-charcoal);
  text-transform: uppercase; letter-spacing: var(--tracking-tight);
}
.hp-section-link {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-forest);
  display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0;
}
.hp-section-link:hover { text-decoration: underline; }
.hp-divider { border: none; border-top: 1px solid var(--color-fog); margin: 0; }

/* ── HP: news karty ─────────────────────────────────────── */
.hp-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .hp-news-grid { grid-template-columns: repeat(4, 1fr); } }
.hp-news-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-white); border: 1px solid var(--color-fog);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.hp-news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hp-news-card__img-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-mist); }
.hp-news-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-news-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-fog) 100%);
  display: flex; align-items: center; justify-content: center;
}
.hp-news-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.hp-news-card__date { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.hp-news-card__title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-ink);
  line-height: var(--leading-snug); flex: 1; margin-bottom: var(--space-3);
}
.hp-news-card__more {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-forest);
  display: flex; align-items: center; gap: 4px; align-self: flex-start;
}
.hp-news-card__more:hover { text-decoration: underline; }

/* ── HP: products grid ──────────────────────────────────── */
.hp-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .hp-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .hp-products-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── HP: trust strip ────────────────────────────────────── */
.hp-trust {
  background: var(--color-mist); border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
@media (min-width: 640px) { .hp-trust { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.hp-trust-item { display: flex; align-items: center; gap: var(--space-3); }
.hp-trust-icon { color: var(--color-forest); flex-shrink: 0; }
.hp-trust-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); line-height: var(--leading-snug); }
.hp-trust-sub { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }

/* ── HP: category tiles ─────────────────────────────────── */
.hp-cats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
@media (min-width: 640px) { .hp-cats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .hp-cats-grid { grid-template-columns: repeat(5, 1fr); } }
.hp-cat-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: block; background: var(--color-charcoal);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hp-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hp-cat-tile__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--transition-slow);
}
.hp-cat-tile:hover .hp-cat-tile__img { transform: scale(1.04); }
.hp-cat-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(17% .008 260 / .8) 0%, oklch(17% .008 260 / .1) 55%, transparent 80%);
}
.hp-cat-tile__body { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-4); }
.hp-cat-tile__name {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700;
  color: var(--color-white); text-transform: uppercase; letter-spacing: var(--tracking-snug);
  line-height: 1.2; margin-bottom: var(--space-2);
}
.hp-cat-tile__price {
  display: inline-block; background: var(--color-forest); color: var(--color-white);
  font-size: 11px; font-weight: 700; padding: 2px var(--space-3); border-radius: var(--radius-sm);
}
.hp-cat-tile__grad { position: absolute; inset: 0; }

/* ── HP: about strip ────────────────────────────────────── */
.hp-about {
  background: var(--color-forest); border-radius: var(--radius-xl);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6);
}
@media (min-width: 768px) {
  .hp-about { flex-direction: row; align-items: center; padding: var(--space-10) var(--space-12); gap: var(--space-10); }
}
.hp-about__left { flex: 1; }
.hp-about__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: 800; color: var(--color-white);
  text-transform: uppercase; letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight); margin-bottom: var(--space-4);
}
.hp-about__desc { color: oklch(84% .05 145); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }
.hp-about__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* CTA tlačítka na tmavém pozadí .hp-about — světlejší obrys/výplň než výchozí .btn */
.hp-about__btn--outline { border-color: oklch(55% .08 145); color: oklch(90% .04 145); }
.hp-about__btn--solid {
  background: oklch(28% .09 145); border: 1px solid oklch(40% .08 145); color: oklch(85% .04 145);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: 600;
}
.hp-about__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); flex-shrink: 0;
}
@media (min-width: 768px) { .hp-about__stats { min-width: 280px; } }
.hp-stat { text-align: center; }
.hp-stat__num {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800; color: var(--color-white);
  letter-spacing: var(--tracking-tight); line-height: 1;
}
.hp-stat__label {
  font-size: var(--text-xs); color: oklch(72% .05 145);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: 600; margin-top: var(--space-2);
}

/* ── HP: brand logos ────────────────────────────────────── */
.hp-brands-strip {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-fog);
  border-bottom: 1px solid var(--color-fog);
}
.hp-brands-label {
  text-align: center; font-size: var(--text-xs); font-weight: 700; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-5);
}
.hp-brands-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-4) var(--space-6);
}
@media (min-width: 640px) { .hp-brands-logos { gap: var(--space-5) var(--space-8); } }
.hp-brand-logo {
  height: 32px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.55); transition: filter var(--transition-base);
}
.hp-brand-logo:hover { filter: grayscale(0) opacity(1); }

/* ── HP: SEO text links ─────────────────────────────────── */
.hp-text-box {
  background: var(--color-mist); border-radius: var(--radius-xl); padding: var(--space-6);
}
@media (min-width: 640px) { .hp-text-box { padding: var(--space-8) var(--space-10); } }
.hp-text-box__title {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--color-ink); text-transform: uppercase;
  letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5);
}
.hp-text-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6);
}
@media (min-width: 640px) { .hp-text-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .hp-text-grid { grid-template-columns: repeat(4, 1fr); } }
.hp-text-grid a {
  font-size: var(--text-sm); color: var(--color-slate);
  padding: 2px 0; display: block; transition: color var(--transition-fast);
}
.hp-text-grid a:hover { color: var(--color-forest); }