/* =========================================================================
   PRODUKTOVA STRANKA - sdilene prvky sekci
   Vyzaduje: assets/mth-base.css

   Vklada se jednou, pred styly jednotlivych sekci.
   Vsechny sekce stoji na stejnem schematu: dvousloupcovy panel
   (obrazek | karta) uvnitr .mth-pd, s mezerou 15 px a radiusem 20.
   ========================================================================= */

/* Odstiny zlute, ktere jsou jen na produktove strance.
   Presne hodnoty overte proti Figme - odhadnuto ze screenshotu. */
:root {
  --mth-yellow-soft: #f7cb5c;
  --mth-yellow-pale: #fdf1cd;
}
.external-fonts-loaded h1,
.external-fonts-loaded h2,
.external-fonts-loaded h3,
.external-fonts-loaded h4,
.external-fonts-loaded h5,
.external-fonts-loaded h6,
.external-fonts-loaded .h1,
.external-fonts-loaded .h2,
.external-fonts-loaded .h3,
.external-fonts-loaded .h4,
.external-fonts-loaded .h5,
.external-fonts-loaded .h6,
.external-fonts-loaded .cart-table .main-link,
.external-fonts-loaded .cart-related-name,
.external-fonts-loaded,
.blank-mode,
.blank-mode h1,
.blank-mode h2,
.blank-mode h3,
.blank-mode h4,
.blank-mode h5,
.blank-mode h6,
.blank-mode .h1,
.blank-mode .h2,
.blank-mode .h3,
.blank-mode .h4,
.blank-mode .h5,
.blank-mode .h6,
.blank-mode .cart-table .main-link,
.blank-mode .cart-related-name {
  font-family: "Faculty Glyphic", sans-serif;
}

.mth-pd {
  font-family: var(--mth-font-body);
  color: var(--mth-ink);
  padding: 8px 0;
  box-sizing: border-box;
}
.mth-pd *,
.mth-pd *::before,
.mth-pd *::after {
  box-sizing: border-box;
}

/* dvousloupcovy panel: obrazek + karta */
.mth-pd__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: stretch;
}
/* uzsi levy sloupec (obrazek) */
.mth-pd__row--narrow-media {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
}
/* uzsi pravy sloupec */
.mth-pd__row--narrow-side {
  grid-template-columns: minmax(0, 1fr) 0.8fr;
}
.id-792 .extended-description,
.id-792 .shp-tabs-row {
  display: none;
}
.id-792 .basic-description {
  width: 100%;
  padding: 0;
}
.id-792 .p-info-wrapper .btn.btn-conversion,
.id-792 .p-info-wrapper a.btn.btn-conversion {
  flex-grow: 1;
  text-align: center;
  justify-content: center;
  border-radius: 8px;
}
.id-792 .btn.btn-conversion:after,
.id-792 a.btn.btn-conversion:after {
  display: none;
}
.id-792 #description {
  border: 0;
  background: transparent !important;
}

.p-info-headline .stars-wrapper {
  box-shadow: none;
}

.type-detail .benefitBanner__item {
  width: calc(100% / 3);
  flex: 1 1 33.333%;
}

.type-product .benefitBanner__title {
  text-transform: none;
  font-family: "Google Sans Flex";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px;
  color: #000;
  letter-spacing: -0.36px;
}
.type-product .benefitBanner__data {
  margin-top: 0;
  color: #7d7263;
  font-family: "Google Sans Flex";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
}
.id-792 #ratingTab > h2 {
  display: block;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -1%;
  font-weight: 400;
  font-family: "Faculty Glyphic", sans-serif;
}
.id-792 #ratingWrapper {
  flex-direction: column;
}
.id-792 #ratingTab .rate-wrapper.unveil-wrapper .add-comment {
  display: flex;
  order: 2;
  margin: 0;
}
.id-792 #ratingTab .rate-wrapper.unveil-wrapper .rate-wrap {
  flex: 1 1 auto;
}

.id-792 .vote-form,
.id-792 #ratingTab .rate-wrapper.unveil-wrapper .rate-wrap h3 {
  display: none;
}
.id-792 .vote-form.visible {
  display: block;
}
@media (max-width: 992px) {
  .type-detail .benefitBanner__item {
    width: calc(100% / 2);
    flex: 1 1 50%;
  }
}
@media (max-width: 767px) {
  .id-792 .shp-tabs-wrapper .tab-pane.active .detail-tab-item {
    display: none;
  }
  .id-792 #tab-content > div:not(#description),
  .id-792 #tab-content > ul:not(#description) {
    display: none;
  }
  .id-792 .detail-tab-content {
    padding: 0 !important;
  }
}
@media (max-width: 500px) {
  .type-detail .benefitBanner__item {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* obrazkovy sloupec */
.mth-pd__media {
  position: relative;
  border-radius: var(--mth-radius);
  overflow: hidden;
  background: var(--mth-cream);
  min-height: 260px;
}
.mth-pd__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* karta s obsahem */
.mth-pd__card {
  padding: 40px;
  border-radius: var(--mth-radius);
  background: #fff;
}
.mth-pd__card--cream {
  background: var(--mth-cream);
}
.mth-pd__card--yellow {
  background: var(--mth-yellow-soft);
}

/* typografie uvnitr sekci */
.mth-pd__eyebrow {
  margin: 0 0 10px;
  font-size: 16px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mth-orange);
}
.mth-pd__title {
  margin: 0 0 18px;
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 32px !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mth-ink);
}
.mth-pd__title--sm {
  font-size: 26px !important;
}
.mth-pd__text {
  margin: 0 0 14px !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: var(--mth-ink);
}
.mth-pd__text:last-child {
  margin-bottom: 0;
}
.mth-pd__text b,
.mth-pd__text strong {
  font-weight: 700;
}

/* textovy odkaz se sipkou */
.mth-pd__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: var(--mth-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mth-pd__link:hover {
  color: var(--mth-brown);
}
.mth-pd__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.mth-pd__link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .mth-pd__row,
  .mth-pd__row--narrow-media,
  .mth-pd__row--narrow-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .mth-pd__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .mth-pd__card {
    padding: 28px 24px;
  }
  .mth-pd__title {
    font-size: 26px !important;
  }
  .mth-pd__title--sm {
    font-size: 22px !important;
  }
  .mth-pd__text {
    font-size: 14px !important;
  }
}