/*
 * BioRenesance.cz – globální komponenty produktových popisků
 * Verze: 2.0.3 – Natural Flow
 * Pilot: BIO Kurkuma+ Healing Nature
 *
 * Načíst po CSS šablony Merkur a po obecných vlastních úpravách webu.
 * Doporučené verzování odkazu: biorenesance-product-pages.css?v=20260715-7
 *
 * Principy:
 * - žádné stíny ani dekorativní rámečky,
 * - velké fotografie přes celou šířku příběhových sekcí,
 * - text a fotografie tvoří jeden barevně propojený celek,
 * - několik pravidel pro obal Merkuru se aktivuje pouze přes
 *   :has(> .basic-description > .br-desc).
 */

.br-desc {
  --br-color-text: #26332f;
  --br-color-muted: #64716c;
  --br-color-heading: #06241f;
  --br-color-brand: #4f7e62;
  --br-color-brand-dark: #315b47;
  --br-color-base: #f6f2ea;
  --br-color-soft: #eef3ed;
  --br-color-line: rgba(6, 36, 31, 0.13);
  --br-color-warning: #fff3df;
  --br-scene-1: #eee0c3;
  --br-scene-2: #dfe7dc;
  --br-scene-3: #f3ead9;
  --br-radius-sm: 10px;
  --br-radius-md: 14px;
  --br-radius-lg: 16px;
  --br-space-1: 8px;
  --br-space-2: 12px;
  --br-space-3: 16px;
  --br-space-4: 24px;
  --br-space-5: 32px;
  --br-space-6: 48px;
  --br-space-7: 72px;

  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: clamp(24px, 3vw, 48px) auto;
  color: var(--br-color-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  container-name: br-product-description;
  container-type: inline-size;
}

.br-desc *,
.br-desc *::before,
.br-desc *::after {
  box-sizing: inherit;
}

/* Barevné rodiny. Struktura zůstává u všech produktů totožná. */
.br-desc--warm {
  --br-color-brand: #a96717;
  --br-color-brand-dark: #71450f;
  --br-color-soft: #f4ead5;
  --br-scene-1: #eee0c3;
  --br-scene-2: #dfe7dc;
  --br-scene-3: #f3ead9;
}

.br-desc--berry {
  --br-color-brand: #915469;
  --br-color-brand-dark: #672f43;
  --br-color-soft: #f4e7eb;
  --br-scene-1: #ead6d9;
  --br-scene-2: #e3e9df;
  --br-scene-3: #f3e8e4;
}

.br-desc--blue {
  --br-color-brand: #46747a;
  --br-color-brand-dark: #274f56;
  --br-color-soft: #e7f0ef;
  --br-scene-1: #dce8e7;
  --br-scene-2: #e6ece4;
  --br-scene-3: #edf0eb;
}

.br-desc--forest {
  --br-color-brand: #4f7e62;
  --br-color-brand-dark: #315b47;
  --br-color-soft: #e4ece5;
  --br-scene-1: #d7c5a9;
  --br-scene-2: #dce5dc;
  --br-scene-3: #eee7dc;
}

/*
 * Desktopový grid Merkuru.
 * display: contents zpřístupní jednotlivé části popisu společnému gridu:
 * titulek a úvod jsou vlevo, proměnlivě vysoké parametry Shoptetu vpravo
 * a první velká fotografie začne až pod vyšším z obou sloupců. Díky tomu
 * nic nepřekrýváme a další sekce mohou využít celou šířku 1120 px.
 */
@media (min-width: 1024px) {
  .description-inner:has(> .basic-description > .br-desc) {
    display: grid;
    width: calc(100% - 30px);
    max-width: 1120px;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.95fr);
    column-gap: 32px;
    row-gap: 0;
  }

  .description-inner:has(> .basic-description > .br-desc) > .basic-description,
  .description-inner:has(> .basic-description > .br-desc) .br-desc,
  .description-inner:has(> .basic-description > .br-desc) .br-desc__hero {
    display: contents;
  }

  .description-inner:has(> .basic-description > .br-desc) .popis-nadpis {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 24px;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description {
    width: 100%;
    max-width: 380px;
    min-width: 0;
    padding: 28px 28px 24px;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    box-sizing: border-box;
    background: #f2f5ef;
    font-size: 15px;
    line-height: 1.45;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description > h3 {
    margin: 0 0 20px;
    color: #315b47;
    font-size: 24px;
    line-height: 1.25;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .detail-parameters {
    width: 100%;
    table-layout: fixed;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    color: #26332f;
    font-size: 15px;
    line-height: 1.45;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .detail-parameters :where(th, td) {
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(6, 36, 31, 0.11);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .detail-parameters th {
    width: 40%;
    padding-right: 18px;
    color: #64716c;
    font-weight: 600;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .detail-parameters td {
    width: 60%;
    color: #26332f;
    font-weight: 650;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .detail-parameters tr:last-child :where(th, td) {
    border-bottom: 0;
  }

  .description-inner:has(> .basic-description > .br-desc) > .extended-description .produkt-kat {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(6, 36, 31, 0.11);
    font-size: 14px;
    line-height: 1.45;
  }

  .description-inner:has(> .basic-description > .br-desc) .br-desc__hero-copy {
    padding: 0 0 48px;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .description-inner:has(> .basic-description > .br-desc) .br-desc__hero > .br-desc__figure {
    width: 100%;
    margin: 48px 0 72px;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .description-inner:has(> .basic-description > .br-desc) .br-desc > :not(.br-desc__hero) {
    grid-column: 1 / -1;
  }
}

.br-desc :where(h2, h3, p, ul, ol, dl, figure) {
  margin-top: 0;
}

.br-desc :where(h2, h3) {
  color: var(--br-color-heading);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.br-desc h2 {
  margin-bottom: var(--br-space-3);
  font-size: clamp(28px, 23px + 1vw, 38px);
}

.br-desc h3 {
  margin-bottom: var(--br-space-2);
  font-size: clamp(19px, 17px + 0.35vw, 23px);
}

.br-desc p {
  margin-bottom: var(--br-space-3);
}

.br-desc :where(ul, ol) {
  margin-bottom: var(--br-space-3);
  padding-left: 22px;
}

.br-desc li + li {
  margin-top: 7px;
}

.br-desc strong {
  color: var(--br-color-heading);
}

.br-desc__eyebrow,
.br-desc__card-label {
  margin-bottom: var(--br-space-2);
  color: var(--br-color-brand-dark);
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1.35;
  text-transform: uppercase;
}

.br-desc__eyebrow {
  font-size: 14px;
}

.br-desc__card-label {
  font-size: 12px;
}

.br-desc__lead {
  max-width: 64ch;
  color: var(--br-color-text);
  font-size: clamp(18px, 17px + 0.2vw, 20px);
  line-height: 1.7;
}

.br-desc__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--br-space-5);
  margin-bottom: var(--br-space-7);
}

.br-desc__hero-copy > :last-child,
.br-desc__media-copy > :last-child,
.br-desc__card > :last-child,
.br-desc__feature > :last-child,
.br-desc__note > :last-child,
.br-desc__warning > :last-child,
.br-desc__faq details div > :last-child {
  margin-bottom: 0;
}

.br-desc__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: var(--br-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.br-desc__pills li {
  margin: 0;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--br-color-base);
  color: var(--br-color-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.br-desc__section {
  margin: 0 0 var(--br-space-7);
}

.br-desc__section--soft {
  padding: clamp(26px, 4vw, 50px);
  border: 0;
  border-radius: var(--br-radius-lg);
  background: var(--br-color-base);
}

.br-desc__section-heading {
  max-width: 780px;
  margin-bottom: var(--br-space-5);
}

.br-desc__section-heading > :last-child {
  margin-bottom: 0;
}

.br-desc__section:not(.br-desc__media) > p {
  max-width: 800px;
}

/* Rychlý přehled je jedna plocha, nikoli tři vystínované karty. */
.br-desc__quick-grid,
.br-desc__feature-grid,
.br-desc__stat-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.br-desc__quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--br-space-7);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--br-radius-lg);
  background: var(--br-color-base);
}

.br-desc__feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.br-desc__stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.br-desc__card,
.br-desc__feature,
.br-desc__stat {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.br-desc__stat {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.br-desc__stat strong {
  display: block;
  margin-bottom: 4px;
  color: var(--br-color-brand-dark);
  font-size: clamp(31px, 25px + 1vw, 42px);
  line-height: 1.05;
}

.br-desc__stat span {
  color: var(--br-color-heading);
  font-weight: 700;
}

.br-desc__stat small,
.br-desc__small {
  color: var(--br-color-muted);
  font-size: 14px;
}

.br-desc__stat small {
  margin-top: 3px;
}

/*
 * Příběhová sekce Natural Flow.
 * Copy je nahoře, fotografie dole a vyplňuje celou šířku barevné plochy.
 */
.br-desc__media {
  --br-scene-bg: var(--br-scene-1);

  display: flex;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--br-radius-lg);
  background: var(--br-scene-bg);
  box-shadow: none;
  flex-direction: column;
}

.br-desc__media ~ .br-desc__media {
  --br-scene-bg: var(--br-scene-2);
}

.br-desc__media ~ .br-desc__media ~ .br-desc__media {
  --br-scene-bg: var(--br-scene-3);
}

.br-desc__media.br-desc__section--soft {
  padding: 0;
  background: var(--br-scene-bg);
}

.br-desc__media-copy {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 58px);
  order: 1;
}

.br-desc__figure {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--br-radius-lg);
  background: var(--br-color-base);
  box-shadow: none;
}

.br-desc__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.br-desc__media > .br-desc__figure {
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: var(--br-scene-bg);
  order: 2;
}

.br-desc__media > .br-desc__figure::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 16%;
  background: linear-gradient(to bottom, var(--br-scene-bg), transparent);
  pointer-events: none;
}

.br-desc__figure figcaption {
  padding: 10px 14px;
  background: var(--br-scene-bg, var(--br-color-base));
  color: var(--br-color-muted);
  font-size: 13px;
}

.br-desc__note {
  margin-top: var(--br-space-4);
  padding: clamp(20px, 3vw, 28px);
  border: 0;
  border-radius: var(--br-radius-md);
  background: rgba(255, 255, 255, 0.48);
}

/* Tabulky: jednoduché linky bez samostatné karty. */
.br-desc__table-wrap {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--br-space-2);
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
}

.br-desc__table-wrap:focus-visible {
  outline: 3px solid var(--br-color-brand);
  outline-offset: 3px;
}

.br-desc__table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  color: var(--br-color-text);
  font-size: 15px;
}

.br-desc__table :where(th, td) {
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--br-color-line);
  text-align: left;
  vertical-align: top;
}

.br-desc__table thead th {
  border-bottom: 2px solid var(--br-color-brand);
  background: transparent;
  color: var(--br-color-heading);
  font-weight: 800;
}

.br-desc__table tbody th {
  color: var(--br-color-heading);
  font-weight: 700;
}

.br-desc__table tbody tr:last-child :where(th, td) {
  border-bottom: 0;
}

.br-desc__table-total :where(th, td) {
  color: var(--br-color-heading);
  font-weight: 800;
}

.br-desc__steps {
  margin: 0 0 var(--br-space-4);
  padding: 0;
  list-style: none;
}

.br-desc__steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--br-color-line);
}

.br-desc__steps li:first-child {
  padding-top: 0;
}

.br-desc__steps li:last-child {
  border-bottom: 0;
}

.br-desc__steps li > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--br-color-brand-dark);
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
}

.br-desc__steps p {
  margin: 4px 0 0;
}

.br-desc__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-bottom: 0;
}

.br-desc__specs > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--br-space-3);
  padding: 15px 0;
  border-bottom: 1px solid var(--br-color-line);
}

.br-desc__specs dt {
  color: var(--br-color-muted);
  font-weight: 600;
}

.br-desc__specs dd {
  margin: 0;
  color: var(--br-color-heading);
  font-weight: 700;
}

.br-desc__warning {
  margin: 0 0 var(--br-space-7);
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: var(--br-radius-md);
  background: var(--br-color-warning);
}

.br-desc__warning h2 {
  margin-bottom: var(--br-space-2);
  font-size: clamp(23px, 20px + 0.45vw, 28px);
}

/* FAQ: pouze jemné dělicí linky, žádné samostatné karty. */
.br-desc__faq details {
  border: 0;
  border-bottom: 1px solid var(--br-color-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.br-desc__faq details:first-of-type {
  border-top: 1px solid var(--br-color-line);
}

.br-desc__faq details + details {
  margin-top: 0;
}

.br-desc__faq summary {
  position: relative;
  display: flex;
  min-height: 58px;
  padding: 17px 52px 17px 0;
  align-items: center;
  color: var(--br-color-heading);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.br-desc__faq summary::-webkit-details-marker {
  display: none;
}

.br-desc__faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--br-color-brand-dark);
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}

.br-desc__faq details[open] summary::after {
  content: "−";
}

.br-desc__faq summary:focus-visible {
  outline: 3px solid var(--br-color-brand);
  outline-offset: 4px;
}

.br-desc__faq details > div {
  max-width: 820px;
  padding: 0 52px 20px 0;
  color: var(--br-color-text);
}

/* Volitelné odstíny konkrétních scén – stejné třídy pro všechny produkty. */
.br-desc__media--sand {
  --br-scene-bg: #eee0c3;
}

.br-desc__media--sage {
  --br-scene-bg: #dfe7dc;
}

.br-desc__media--clay {
  --br-scene-bg: #ead8c7;
}

.br-desc__media--berry {
  --br-scene-bg: #ead6d9;
}

.br-desc__media--mist {
  --br-scene-bg: #dce8e7;
}

/* Container dotazy reagují na skutečnou šířku popisu uvnitř Shoptetu. */
@container br-product-description (max-width: 720px) {
  .br-desc__quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .br-desc__quick-grid .br-desc__card:last-child {
    grid-column: 1 / -1;
  }
}

@container br-product-description (max-width: 520px) {
  .br-desc__quick-grid,
  .br-desc__feature-grid,
  .br-desc__stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .br-desc__quick-grid .br-desc__card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 1023.98px) {
  .br-desc__quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .br-desc__quick-grid .br-desc__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .br-desc {
    --br-space-6: 38px;
    --br-space-7: 48px;
    margin: 20px auto;
    font-size: 16px;
    line-height: 1.6;
  }

  .br-desc__hero,
  .br-desc__quick-grid,
  .br-desc__feature-grid,
  .br-desc__stat-grid,
  .br-desc__specs {
    grid-template-columns: minmax(0, 1fr);
  }

  .br-desc__hero-copy {
    padding: 0;
  }

  .br-desc__hero > .br-desc__figure {
    margin-bottom: 0;
  }

  .br-desc__quick-grid {
    gap: 26px;
    padding: 26px 22px;
  }

  .br-desc__quick-grid .br-desc__card:last-child {
    grid-column: auto;
  }

  .br-desc__section--soft {
    padding: 24px 20px;
    border-radius: var(--br-radius-md);
  }

  .br-desc__media.br-desc__section--soft {
    padding: 0;
  }

  .br-desc__media,
  .br-desc__figure {
    border-radius: var(--br-radius-md);
  }

  .br-desc__media > .br-desc__figure {
    border-radius: 0;
  }

  .br-desc__media-copy {
    padding: 28px 22px 30px;
  }

  .br-desc__media > .br-desc__figure img {
    aspect-ratio: 4 / 3;
  }

  .br-desc__media > .br-desc__figure::after {
    height: 12%;
  }

  .br-desc__specs {
    gap: 0;
  }

  .br-desc__specs > div:nth-child(n) {
    grid-template-columns: minmax(110px, 0.78fr) minmax(0, 1.22fr);
  }

  .br-desc__stat {
    min-height: 0;
  }

  .br-desc__table {
    min-width: 600px;
  }

  .br-desc__faq details > div {
    padding-right: 0;
  }
}

@media (max-width: 419.98px) {
  .br-desc__pills {
    display: grid;
  }

  .br-desc__pills li {
    border-radius: var(--br-radius-sm);
  }

  .br-desc__specs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .br-desc__faq summary {
    padding-right: 42px;
  }
}

/*
 * Kompatibilní reset pro dříve nasazené verze komponent.
 * Zdvojený kořen zvyšuje specificitu bez !important. Pokud by na stránce
 * zůstalo starší pravidlo, nemůže z obrázků a obsahových ploch znovu udělat
 * vystínované karty ani omezit fotografii na 920 px.
 */
.br-desc.br-desc .br-desc__hero,
.br-desc.br-desc .br-desc__quick-grid,
.br-desc.br-desc .br-desc__section--soft,
.br-desc.br-desc .br-desc__card,
.br-desc.br-desc .br-desc__feature,
.br-desc.br-desc .br-desc__stat,
.br-desc.br-desc .br-desc__figure,
.br-desc.br-desc .br-desc__table-wrap,
.br-desc.br-desc .br-desc__note,
.br-desc.br-desc .br-desc__warning {
  border: 0;
  box-shadow: none;
}

.br-desc.br-desc .br-desc__media,
.br-desc.br-desc .br-desc__media.br-desc__section--soft {
  display: flex;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--br-scene-bg);
  box-shadow: none;
  flex-direction: column;
}

.br-desc.br-desc .br-desc__media > .br-desc__figure,
.br-desc.br-desc .br-desc__media > .br-desc__figure img {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.br-desc.br-desc .br-desc__media > .br-desc__figure {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .br-desc *,
  .br-desc *::before,
  .br-desc *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

@media print {
  .br-desc {
    max-width: none;
    color: #000000;
  }

  .br-desc__media,
  .br-desc__section--soft,
  .br-desc__warning,
  .br-desc__faq details {
    break-inside: avoid;
    background: #ffffff;
  }

  .br-desc__faq details > div {
    display: block;
  }
}