/* =========================================================
   HračkyzČech.cz — Product Description Template
   Scandinavian / Montessori / Modern UX
========================================================= */

:root {

  --hzc-bg-soft: #faf7f1;
  --hzc-bg-card: #ffffff;

  --hzc-text: #333333;
  --hzc-heading: #1f1f1f;
  --hzc-muted: #6f6f6f;

  --hzc-border: #e8e1d8;

  --hzc-accent: #d9a441;

  --hzc-radius-lg: 24px;
  --hzc-radius-md: 20px;

  --hzc-shadow:
    0 8px 24px rgba(0,0,0,0.04);

}

/* =========================================================
   ROOT
========================================================= */

.hzc-product {

  max-width: 1040px;
  margin: 0 auto;

  color: var(--hzc-text);

  font-size: 16px;
  line-height: 1.7;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.hzc-product h2 {

  margin: 0 0 18px;

  color: var(--hzc-heading);

  font-size: 32px;
  line-height: 1.22;
  font-weight: 700;

}

.hzc-product h3 {

  margin: 0 0 18px;

  color: var(--hzc-heading);

  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;

}

.hzc-product p {

  margin: 0 0 16px;

}

.hzc-product strong {

  color: var(--hzc-heading);

}

/* =========================================================
   HERO
========================================================= */

.hzc-hero {

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(260px, 0.92fr);

  gap: 36px;

  align-items: center;

  margin-bottom: 42px;

}

.hzc-hero-text {

  background: var(--hzc-bg-soft);

  border: 1px solid var(--hzc-border);

  border-radius: var(--hzc-radius-lg);

  padding: 34px;

}

.hzc-hero-image img {

  width: 100%;

  display: block;

  border-radius: var(--hzc-radius-lg);

  border: 1px solid var(--hzc-border);

  background: #fff;

  box-shadow: var(--hzc-shadow);

}

/* =========================================================
   MADE IN CZ BADGE
========================================================= */

.hzc-made-cz {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #f5f1e8;

  border: 1px solid #e7dfd2;

  color: #5f5647;

  padding: 10px 14px;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;

  margin-bottom: 18px;

}

/* =========================================================
   CONTENT SECTIONS
========================================================= */

.hzc-section,
.hzc-params,
.hzc-origin {

  background: var(--hzc-bg-card);

  border: 1px solid var(--hzc-border);

  border-radius: var(--hzc-radius-md);

  padding: 30px;

  margin: 28px 0;

  box-shadow: var(--hzc-shadow);

}

/* =========================================================
   LISTS
========================================================= */

.hzc-product ul {

  margin: 0;

  padding-left: 22px;

}

.hzc-product li {

  margin-bottom: 12px;

}

/* =========================================================
   PARAMETERS
========================================================= */

.hzc-params ul {

  list-style: none;

  padding-left: 0;

}

.hzc-params li {

  padding: 11px 0;

  border-bottom: 1px solid var(--hzc-border);

}

.hzc-params li:last-child {

  border-bottom: 0;

}

/* =========================================================
   ORIGIN / BRAND MESSAGE
========================================================= */

.hzc-origin {

  background: var(--hzc-bg-soft);

}

/* =========================================================
   LINKS
========================================================= */

.hzc-product a {

  color: var(--hzc-heading);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.hzc-product a:hover {

  opacity: 0.8;

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .hzc-product {

    font-size: 15px;

  }

  .hzc-hero {

    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 32px;

  }

  .hzc-hero-text,
  .hzc-section,
  .hzc-params,
  .hzc-origin {

    padding: 22px;

    border-radius: 18px;

  }

  .hzc-product h2 {

    font-size: 26px;

  }

  .hzc-product h3 {

    font-size: 20px;

  }

  .hzc-hero-image img {

    border-radius: 18px;

  }

}