/**
 * Картки товарів: ключові розміри/типографіка з wf/css/wf-media.css (+ desktop-база з home.css).
 * Підключається ПІСЛЯ layout-base, щоб em-розміри Webflow не перебивались Next-патчами.
 */

/* —— Desktop (home.css) —— */
html .leader-ci {
  border-radius: 0.347222em;
  flex: none;
  width: 24em;
}

html .leader-ci.swiper-slide {
  max-width: 18em;
  margin-right: 1em;
  position: relative;
}

html .leader-card-wrapper {
  z-index: 0;
  grid-row-gap: 1.04167em;
  cursor: pointer;
  border: none;
  border-radius: 0.347222em;
  box-shadow: 0 1px 2px rgba(18, 19, 22, 0.04), 0 4px 14px rgba(18, 19, 22, 0.06);
  transition: box-shadow 0.2s ease;
  flex-flow: column;
  align-items: stretch;
  height: 31em;
  padding-bottom: 1.04167em;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  html .leader-card-wrapper:hover {
    box-shadow: 0 4px 8px rgba(18, 19, 22, 0.06), 0 12px 28px rgba(18, 19, 22, 0.12);
  }
}

html .leader-card-img-wrapper {
  aspect-ratio: 1;
  height: auto;
  position: relative;
}

html .t-text {
  font-size: 0.972222em;
}

html .t-text.sale {
  font-size: 0.9em;
}

html .h5.leader {
  font-size: 1.5em;
}

html .xxs-text {
  font-size: 0.694444em;
}

html .prod-rew-img {
  width: 2em;
  margin-left: 5px;
}

html .prod-rew-img.product {
  margin-right: 3px;
}

html .star-icon.product {
  width: 1.25em;
  height: auto;
}

/* —— Tablet ≤991 (wf-media) —— */
@media screen and (max-width: 991px) {
  html .leader-ci.swiper-slide {
    max-width: 20em;
  }

  html .leader-card-wrapper {
    height: 40em;
  }
}

/*
 * Планшет 768–991: body = 1vw (~7.7–9.9px), тож desktop em стають дрібними.
 * Підганяємо шрифти карток ближче до десктопного вигляду; мобайл ≤767 не чіпаємо.
 */
@media screen and (max-width: 991px) and (min-width: 768px) {
  html .leader-ci .t-text,
  html .leader-card-wrapper .t-text {
    font-size: 1.65em;
  }

  html .leader-ci .t-text.sale,
  html .leader-card-wrapper .t-text.sale {
    font-size: 1.5em;
  }

  html .leader-ci .h5.leader,
  html .leader-card-wrapper .h5.leader {
    font-size: 2em;
  }

  html .leader-ci .xxs-text,
  html .leader-card-wrapper .xxs-text {
    font-size: 1.2em;
  }

  html .leader-ci .count_reviews_text.dyn_rate,
  html .leader-ci .count_reviews_text.dyn_reviews,
  html .leader-card-wrapper .count_reviews_text.dyn_rate,
  html .leader-card-wrapper .count_reviews_text.dyn_reviews {
    font-size: 1.45em;
  }

  html .leader-ci .star-icon.product,
  html .leader-card-wrapper .star-icon.product {
    width: 1.6em;
  }

  html .leader-ci .prod-rew-img.product,
  html .leader-card-wrapper .prod-rew-img.product {
    width: 2.4em;
  }
}

/* —— Mobile ≤767 (home.css) —— */
@media screen and (max-width: 767px) {
  html .leader-ci {
    width: 42em;
  }

  html .leader-ci.swiper-slide {
    max-width: 45em !important;
    width: 31em !important;
  }

  html .leader-card-wrapper {
    height: 54em;
  }
}

/*
 * 480–767: картки вже «великі» (42em), але шрифти лишались desktop-em → мікроскопічні.
 * Проміжні значення між планшетом і phone ≤479.
 */
@media screen and (max-width: 767px) and (min-width: 480px) {
  html .leader-ci .t-text,
  html .leader-card-wrapper .t-text {
    font-size: 1.8em;
  }

  html .leader-ci .t-text.sale,
  html .leader-card-wrapper .t-text.sale {
    font-size: 2.4em;
  }

  html .leader-ci .h5.leader,
  html .leader-card-wrapper .h5.leader {
    font-size: 2.6em;
  }

  html .leader-ci .xxs-text,
  html .leader-card-wrapper .xxs-text {
    font-size: 1.5em;
  }

  html .leader-ci .count_reviews_text.dyn_rate,
  html .leader-ci .count_reviews_text.dyn_reviews,
  html .leader-card-wrapper .count_reviews_text.dyn_rate,
  html .leader-card-wrapper .count_reviews_text.dyn_reviews {
    font-size: 2em;
  }

  html .leader-ci .star-icon.product,
  html .leader-card-wrapper .star-icon.product {
    width: auto;
    max-width: 35%;
    height: auto;
  }

  html .leader-ci .prod-rew-img.product,
  html .leader-card-wrapper .prod-rew-img.product {
    width: 2em;
    max-width: 50%;
  }

  html .leader-ci .leader-card-info-wrapper,
  html .leader-card-wrapper .leader-card-info-wrapper {
    margin-left: 1.5em;
    margin-right: 1.5em;
  }

  html .leader-ci .leader-card-bot-wrapper,
  html .leader-card-wrapper .leader-card-bot-wrapper {
    margin-left: 1.5em;
    margin-right: 1.5em;
  }
}

/* —— Phone ≤479 (wf-media.css) —— */
@media screen and (max-width: 479px) {
  html .leader-ci {
    width: 44em !important;
  }

  html .leader-ci.swiper-slide {
    border-radius: 2.66667em;
    max-width: 46em;
    margin-left: 0;
    padding: 0;
    width: 46em !important;
  }

  html .leader-card-wrapper {
    grid-row-gap: 2.66667em;
    border: none;
    border-radius: 2.66667em;
    min-width: 150px;
    height: 90em;
    padding-bottom: 4em;
  }

  html .leader-card-img-wrapper {
    aspect-ratio: 1;
  }

  html .leader-card-info-wrapper {
    margin-left: 3em;
    margin-right: 3em;
  }

  html .t-text {
    font-size: 3.73333em;
  }

  html .t-text.sale {
    font-size: 3.2em;
  }

  html .leader-card-bot-wrapper {
    margin-top: auto;
    margin-left: 3em;
    margin-right: 2em;
  }

  html .leader-card-price-wrapper {
    margin-top: auto;
  }

  html .leader-card-price-sale {
    grid-column-gap: 1.1em;
    grid-row-gap: 1.1em;
    justify-content: flex-start;
    align-items: center;
  }

  html .leader-card-discount-wrapper {
    padding: 0.2em 2em;
    font-size: 0.7em;
    display: block;
  }

  html .xxs-text {
    font-size: 3.3em;
  }

  html .h5.leader {
    margin-top: auto;
    font-size: 4.7em;
  }

  html .mobile-cart {
    justify-content: center;
    align-items: center;
    margin-top: auto;
    margin-bottom: 1em;
    display: flex;
  }

  html .add-to-cart-new {
    width: auto;
    height: auto;
    bottom: 4em;
    right: 3em;
  }

  html .add-to-cart-new-button {
    border-radius: 1.33333em;
    width: 11.54em;
    height: 11em;
  }

  html .prod-rew-img {
    width: 6em;
  }

  html .prod-rew-img.product {
    width: 10em;
    height: 6em;
    max-width: 50%;
    margin-left: 0;
    margin-right: 2px;
  }

  html .star-icon.product {
    width: auto;
    max-width: 35%;
    height: auto;
    margin-right: 5px;
  }

  html .count_reviews_text.dyn_rate,
  html .count_reviews_text.dyn_reviews {
    font-size: 3.5em;
  }

  html .wait_item_status.text-block-14 {
    width: 13em;
    height: 2em;
    font-size: 3em;
  }

  html .card_tag {
    text-align: center;
    background-color: #c61717;
    border-radius: 1em;
    width: 65%;
    height: 7em;
    padding: 0.5em;
    display: block;
    top: 2em;
    left: auto;
    right: 2em;
  }

  html .card_tag_text {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 3.5em;
    display: flex;
  }
}