/* DS Market – jednotný styl pro kategorie
   Soubor: category.css
   Použití: CSS nahrát na FTP a jednou odkázat v globální hlavičce e-shopu.
   Kategorie pak používají pouze HTML třídy: category-intro, category-detail, section, grid, card, notice, info-box, faq, cta.
*/

.category-intro,
.category-detail {
  --ds-green: #6f9f3d;
  --ds-green-dark: #4f7f27;
  --ds-green-soft: #f4f8ed;
  --ds-green-light: #eaf3df;
  --ds-cream: #fffaf0;
  --ds-orange-soft: #fff3df;
  --ds-orange-border: #f1d2a5;
  --ds-blue-soft: #eef7fb;
  --ds-blue-border: #cfe6ef;
  --ds-border: #dfead2;
  --ds-text: #2f352b;
  --ds-muted: #65705f;
  --ds-white: #ffffff;
  --ds-radius-lg: 20px;
  --ds-radius-md: 16px;
  --ds-shadow: 0 10px 28px rgba(55, 85, 35, 0.08);
  color: var(--ds-text);
  font-size: 16px;
  line-height: 1.65;
}

.category-intro *,
.category-detail * {
  box-sizing: border-box;
}

.category-intro {
  background: linear-gradient(135deg, var(--ds-green-soft), var(--ds-cream));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 28px;
  margin: 24px 0 30px;
  box-shadow: var(--ds-shadow);
}

.category-intro h2,
.category-detail h2,
.category-detail h3 {
  color: var(--ds-green-dark);
  line-height: 1.25;
  margin-top: 0;
}

.category-intro h2 {
  font-size: 30px;
  margin-bottom: 14px;
}

.category-intro .lead {
  font-size: 18px;
  margin: 0 0 18px;
}

.category-intro p,
.category-detail p {
  margin: 0 0 14px;
}

.category-intro p:last-child,
.category-detail p:last-child {
  margin-bottom: 0;
}

.category-intro .notice,
.category-detail .notice {
  background: var(--ds-orange-soft);
  border: 1px solid var(--ds-orange-border);
  border-left: 6px solid #e5a23a;
  border-radius: var(--ds-radius-md);
  padding: 18px 20px;
  margin-top: 18px;
}

.category-detail {
  margin: 34px 0;
}

.category-detail .section {
  margin: 34px 0;
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 26px;
  box-shadow: var(--ds-shadow);
}

.category-detail .section > h2 {
  font-size: 25px;
  margin-bottom: 16px;
}

.category-detail .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.category-detail .card {
  display: block;
  min-height: 100%;
  background: linear-gradient(180deg, #ffffff, var(--ds-green-soft));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 20px;
  color: var(--ds-text);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(55, 85, 35, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.category-detail .card:nth-child(3n+2) {
  background: linear-gradient(180deg, #ffffff, var(--ds-orange-soft));
  border-color: var(--ds-orange-border);
}

.category-detail .card:nth-child(3n) {
  background: linear-gradient(180deg, #ffffff, var(--ds-blue-soft));
  border-color: var(--ds-blue-border);
}

.category-detail a.card:hover {
  transform: translateY(-3px);
  border-color: var(--ds-green);
  box-shadow: 0 12px 28px rgba(55, 85, 35, 0.12);
  text-decoration: none;
}

.category-detail .card h3 {
  font-size: 19px;
  margin: 0 0 8px;
}

.category-detail .card p {
  color: var(--ds-muted);
  margin: 0;
}

.category-detail .card-icon,
.category-detail .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(111, 159, 61, 0.12);
  font-size: 22px;
}

.category-detail .info-box {
  background: linear-gradient(135deg, var(--ds-green-dark), var(--ds-green));
  color: #ffffff;
  border-radius: var(--ds-radius-lg);
  padding: 24px;
}

.category-detail .info-box h2,
.category-detail .info-box h3,
.category-detail .info-box p,
.category-detail .info-box li {
  color: #ffffff;
}

.category-detail .info-box ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.category-detail .info-box li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.category-detail .info-box li:last-child {
  margin-bottom: 0;
}

.category-detail .info-box li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.category-detail .faq details,
.category-detail details {
  background: #ffffff;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 5px 16px rgba(55, 85, 35, 0.05);
}

.category-detail .faq details:last-child,
.category-detail details:last-child {
  margin-bottom: 0;
}

.category-detail .faq summary,
.category-detail details summary {
  cursor: pointer;
  color: var(--ds-green-dark);
  font-weight: 700;
  font-size: 17px;
}

.category-detail .faq details p,
.category-detail details p {
  margin-top: 12px;
  color: var(--ds-muted);
}

.category-detail .cta {
  background: linear-gradient(135deg, var(--ds-green-soft), var(--ds-cream));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 28px;
  text-align: center;
}

.category-detail .cta h2 {
  margin-bottom: 12px;
}

.category-detail .cta p {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .category-detail .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-intro,
  .category-detail .section {
    padding: 22px;
  }
}

@media (max-width: 600px) {
  .category-intro h2 {
    font-size: 25px;
  }

  .category-detail .section > h2 {
    font-size: 22px;
  }

  .category-intro .lead {
    font-size: 16px;
  }

  .category-detail .grid {
    grid-template-columns: 1fr;
  }
}