/* ================================================================== */
/* BEORGANIC – MOBILE FIX: Výhodné balenia + Blog                     */
/* Pridajte do Custom CSS v ClickEshopu                               */
/* ================================================================== */

@media (max-width: 768px) {

  /* ══════════════════════════════════════════
     VÝHODNÉ BALENIA – CAROUSEL NA MOBILE
     - Menšie položky, 2 vedľa seba
     - Skryť šípky (biele kruhy)
     - Kompaktnejší vzhľad
     ══════════════════════════════════════════ */

  .bo-sets-section {
    padding: 40px 12px !important;
  }

  .bo-sets-h2 {
    font-size: 1.6rem !important;
    margin-bottom: 24px !important;
  }

  /* Skryť šípky na mobile – vyzerajú ako veľké biele kruhy */
  .bo-sets-arrow {
    display: none !important;
  }

  .bo-sets-carousel-container {
    gap: 0 !important;
    margin-bottom: 28px !important;
  }

  /* Carousel – 2 položky vedľa seba, scroll */
  .bo-sets-carousel {
    grid-auto-columns: calc(50% - 6px) !important;
    gap: 12px !important;
    padding: 0 4px 10px 4px !important;
  }

  .bo-sets-img {
    border-radius: 16px !important;
  }

  .bo-sets-name {
    font-size: 0.82rem !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
  }

  .bo-sets-btn {
    padding: 12px 28px !important;
    font-size: 0.9rem !important;
  }


  /* ══════════════════════════════════════════
     BLOG – 3 STĹPCE NA MOBILE, MALÉ KARTY
     ══════════════════════════════════════════ */

  .bo-blog-section {
    padding: 40px 12px !important;
  }

  .bo-blog-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  .bo-blog-item {
    border-radius: 10px !important;
  }

  .bo-blog-img {
    aspect-ratio: 1 / 1 !important;
  }

  .bo-blog-text {
    padding: 8px 8px 10px !important;
  }

  .bo-blog-name {
    font-size: 0.72rem !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
    /* Skrátiť na 2 riadky */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .bo-blog-desc {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    /* Skrátiť na 1 riadok */
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .bo-blog-btn {
    padding: 11px 24px !important;
    font-size: 0.88rem !important;
  }

  /* Nadpis a podnadpis blogu */
  .bo-blog-title {
    font-size: 1.6rem !important;
    margin-bottom: 6px !important;
  }

  .bo-blog-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
  }

}

/* Extra malé telefóny */
@media (max-width: 380px) {

  .bo-sets-carousel {
    grid-auto-columns: calc(60% - 6px) !important;
  }

  .bo-blog-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .bo-blog-name {
    font-size: 0.65rem !important;
  }

  .bo-blog-desc {
    display: none !important;
  }

}