/* =========================================================
   GymSupps – Benefit Banner redesign
   Pouze CSS, bez zásahu do HTML
   Desktop: 4 prémiové karty
   Mobil: 2 × 2
   Původní JPG ikony jsou nahrazeny CSS/SVG piktogramy
   ========================================================= */

.benefitBanner.position--benefitHomepage {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 28px 0 32px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   Jednotlivá karta
   --------------------------------------------------------- */

.benefitBanner.position--benefitHomepage .benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;

  min-width: 0 !important;
  min-height: 104px !important;

  margin: 0 !important;
  padding: 18px 18px !important;

  background: #f5f5f6 !important;

  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;

  box-sizing: border-box !important;

  transition:
    transform .18s ease,
    background-color .18s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .benefitBanner.position--benefitHomepage .benefitBanner__item:hover {
    transform: translateY(-2px) !important;
    background: #f0f0f1 !important;
  }
}

/* ---------------------------------------------------------
   Ikona – schováme původní JPG a vykreslíme vlastní SVG
   --------------------------------------------------------- */

.benefitBanner.position--benefitHomepage .benefitBanner__picture {
  position: relative !important;

  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #fff !important;

  border: 0 !important;
  border-radius: 14px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* původní obrázky úplně pryč */
.benefitBanner.position--benefitHomepage .benefitBanner__img {
  display: none !important;
}

/* společné vlastnosti nových ikon */
.benefitBanner.position--benefitHomepage .benefitBanner__picture::before {
  content: "" !important;

  display: block !important;
  width: 29px !important;
  height: 29px !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 1. Vše skladem – krabice + check */
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(1) .benefitBanner__picture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23202124' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5 16 5l10.5 5.5L16 16 5.5 10.5Z'/%3E%3Cpath d='M5.5 10.5V22L16 27.5 26.5 22V10.5'/%3E%3Cpath d='M16 16v11.5'/%3E%3Cpath d='m20.5 21.5 2.2 2.2 4.3-5'/%3E%3C/svg%3E") !important;
}

/* 2. Vyrobeno v CZ – pečeť / česká výroba */
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(2) .benefitBanner__picture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23202124' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='14' r='8.5'/%3E%3Cpath d='m11.5 21.5-1.5 6 6-3 6 3-1.5-6'/%3E%3Cpath d='m12.5 14 2.3 2.3 4.8-5'/%3E%3C/svg%3E") !important;
}

/* 3. Doprava zdarma – dodávka */
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(3) .benefitBanner__picture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23202124' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h16v11h-16z'/%3E%3Cpath d='M19.5 13h4.7l4.3 4.5v3h-9z'/%3E%3Ccircle cx='9' cy='23' r='2.5'/%3E%3Ccircle cx='24' cy='23' r='2.5'/%3E%3Cpath d='M3.5 23h3M11.5 23h10'/%3E%3C/svg%3E") !important;
}

/* 4. Rychlé doručení – stopwatch */
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(4) .benefitBanner__picture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23202124' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='17' r='9.5'/%3E%3Cpath d='M16 11v6l4 2.5'/%3E%3Cpath d='M13 4h6'/%3E%3Cpath d='M16 4v3.5'/%3E%3Cpath d='M23.5 8.5 26 11'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

.benefitBanner.position--benefitHomepage .benefitBanner__content {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

.benefitBanner.position--benefitHomepage .benefitBanner__title {
  display: block !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  color: #202124 !important;

  white-space: normal !important;
}

.benefitBanner.position--benefitHomepage .benefitBanner__data {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;

  color: #777 !important;

  white-space: normal !important;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1199px) {
  .benefitBanner.position--benefitHomepage {
    gap: 10px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    min-height: 98px !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__picture {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__picture::before {
    width: 26px !important;
    height: 26px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: 15px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__data {
    font-size: 12px !important;
  }
}

/* ---------------------------------------------------------
   Mobil – 2 × 2
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .benefitBanner.position--benefitHomepage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin: 22px 0 26px !important;
    padding: 0 12px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    min-height: 126px !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    padding: 14px !important;

    border-radius: 16px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__picture {
    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    border-radius: 11px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__picture::before {
    width: 25px !important;
    height: 25px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    margin-bottom: 3px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__data {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}

/* malý mobil */
@media (max-width: 370px) {
  .benefitBanner.position--benefitHomepage {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 7px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    padding: 12px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: 13px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__data {
    font-size: 11px !important;
  }
}

/* =========================================
   GymSupps benefits � desktop dolad�n�
   ========================================= */

@media (min-width: 768px) {

  .benefitBanner.position--benefitHomepage {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 26px 0 34px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 96px !important;
    height: 96px !important;

    padding: 17px 20px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 15px !important;

    background: #f5f5f6 !important;
    border-radius: 16px !important;
  }

  /* ikon� odstran�me b�lou kartu uvnit� */
  .benefitBanner.position--benefitHomepage .benefitBanner__picture {
    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    background: transparent !important;
    border-radius: 0 !important;
  }

  .benefitBanner.position--benefitHomepage
  .benefitBanner__picture::before {
    width: 34px !important;
    height: 34px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__content {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;

    text-align: left !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: 16px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    margin: 0 0 4px !important;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__data {
    font-size: 13px !important;
    line-height: 1.3 !important;

    white-space: normal !important;
  }
}