/* ================================================================== */
/* BEORGANIC – KOMPLETNÝ MOBILE FIX                                   */
/* Všetky sekcie zjednotené pre mobil                                 */
/* ================================================================== */

@media (max-width: 768px) {

  /* ══════════════════════════════════════════
     GLOBÁLNE – VŠETKY SEKCIE
     ══════════════════════════════════════════ */
  .bo-sets-section,
  .bo-skin-section,
  .bo-super-section,
  .bo-why-clean-section,
  .bo-guide-section,
  .bo-blog-section,
  .bo-news-section,
  .bo-review-section,
  .bo-customers-section,
  .bo-benefits-section,
  .bo-top-section {
    padding: 36px 16px !important;
  }

  /* Všetky H2 nadpisy */
  .bo-sets-h2,
  .bo-skin-section h2,
  .bo-super-h2,
  .bo-guide-h2,
  .bo-blog-title,
  .bo-news-h2,
  .bo-review-h2,
  .bo-customers-h2,
  .bo-top-h2 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }

  /* Všetky podnadpisy */
  .bo-skin-sub,
  .bo-super-sub,
  .bo-blog-subtitle,
  .bo-customers-sub,
  .bo-top-sub {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
  }


  /* ══════════════════════════════════════════
     VÝHODNÉ BALENIA – carousel (šípky preč)
     ══════════════════════════════════════════ */
  .bo-sets-arrow {
    display: none !important;
  }

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

  .bo-sets-carousel {
    grid-auto-columns: calc(48% - 6px) !important;
    gap: 12px !important;
    padding: 0 2px 10px !important;
  }

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

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

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


  /* ══════════════════════════════════════════
     OBĽÚBENÉ PRODUKTY + VYBERÁME PRE VÁS
     – horizontálny scroll ako Výhodné balenia
     ══════════════════════════════════════════ */
  .bo-super-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc(48% - 6px) !important;
    grid-template-columns: unset !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    padding-bottom: 10px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin-bottom: 24px !important;
  }

  .bo-super-list::-webkit-scrollbar {
    display: none !important;
  }

  .bo-super-item {
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }

  .bo-super-text {
    padding: 10px 12px 14px !important;
  }

  .bo-super-name {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .bo-super-price {
    font-size: 1rem !important;
  }

  .bo-super-btn,
  .bo-super-btn-wrap > a {
    padding: 12px 24px !important;
    font-size: 0.88rem !important;
  }


  /* ══════════════════════════════════════════
     TOP PRODUKTY – menšia karta
     ══════════════════════════════════════════ */
  .bo-top-card {
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  .bo-top-h2 {
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
  }

  .bo-top-sub {
    font-size: 0.88rem !important;
    margin-bottom: 20px !important;
  }

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


  /* ══════════════════════════════════════════
     NOVÍ V PRÍRODNEJ KOZMETIKE – menšia karta
     ══════════════════════════════════════════ */
  .bo-guide-card {
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  .bo-guide-h2 {
    font-size: 1.4rem !important;
    margin-bottom: 14px !important;
  }

  .bo-guide-p {
    font-size: 0.9rem !important;
    margin-bottom: 24px !important;
    line-height: 1.6 !important;
  }

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


  /* ══════════════════════════════════════════
     NEWSLETTER – menšia karta
     ══════════════════════════════════════════ */
  .bo-news-card {
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  .bo-news-h2 {
    font-size: 1.4rem !important;
    margin-bottom: 10px !important;
  }

  .bo-news-p {
    font-size: 0.88rem !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  .bo-news-form {
    flex-direction: column !important;
    border-radius: 14px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .bo-news-input {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  .bo-news-btn {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-size: 0.9rem !important;
  }


  /* ══════════════════════════════════════════
     PRÍRODNÁ KOZMETIKA TEXT SEKCIA
     – SEO text pod homepage obsahom
     ══════════════════════════════════════════ */
  .page-width h2,
  div[style*="text-align: center"] h2,
  div[style*="text-align:center"] h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.3rem !important;
    color: #2b2b2b !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 8px !important;
  }

  div[style*="text-align: center"] p,
  div[style*="text-align:center"] p {
    font-family: Arial, sans-serif !important;
    font-size: 0.88rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    padding: 0 8px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }


  /* ══════════════════════════════════════════
     BLOG – 3 stĺpce, malé karty
     ══════════════════════════════════════════ */
  .bo-blog-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

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

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

  .bo-blog-text {
    padding: 7px 7px 9px !important;
  }

  .bo-blog-name {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .bo-blog-desc {
    font-size: 0.62rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

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


  /* ══════════════════════════════════════════
     BENEFITS – stĺpec
     ══════════════════════════════════════════ */
  .bo-benefits-row {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .bo-benefits-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    flex-direction: row !important;
    text-align: left !important;
    gap: 14px !important;
  }

  .bo-benefits-card img {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  .bo-benefits-card h3 {
    font-size: 1rem !important;
    margin: 0 0 4px !important;
  }

  .bo-benefits-card p {
    font-size: 0.82rem !important;
  }


  /* ══════════════════════════════════════════
     RECENZIE – 1 stĺpec
     ══════════════════════════════════════════ */
  .bo-review-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .bo-review-card {
    padding: 20px 16px !important;
  }

  .bo-review-p {
    font-size: 0.88rem !important;
  }


  /* ══════════════════════════════════════════
     ZÁKAZNÍČKY – horizontal scroll
     ══════════════════════════════════════════ */
  .bo-customers-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    scrollbar-width: none !important;
  }

  .bo-customers-grid::-webkit-scrollbar { display: none !important; }

  .bo-customers-item {
    flex: 0 0 75% !important;
    scroll-snap-align: center !important;
  }

  .bo-customers-arrow { display: none !important; }


  /* ══════════════════════════════════════════
     FEATURES ROW (ikony pod bannerom)
     ══════════════════════════════════════════ */
  .features-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 0 16px !important;
    margin: 24px 0 !important;
  }

  .features-row .feature-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    flex: none !important;
  }

  .features-row .feature-item img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  .features-row .feature-item p {
    font-size: 0.88rem !important;
    text-align: left !important;
    margin: 0 !important;
  }


  /* ══════════════════════════════════════════
     SKIN GRID (problémy pleti)
     ══════════════════════════════════════════ */
  .bo-skin-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 10px !important;
    max-width: 100% !important;
  }

  .bo-skin-box {
    width: 85px !important;
    height: 85px !important;
    border-radius: 16px !important;
  }

  .bo-skin-item p {
    font-size: 0.82rem !important;
  }

}


/* ══════════════════════════════════════════
   EXTRA MALÉ TELEFÓNY (max 380px)
   ══════════════════════════════════════════ */
@media (max-width: 380px) {

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

  .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-desc {
    display: none !important;
  }

  .bo-skin-box {
    width: 70px !important;
    height: 70px !important;
  }

  .bo-skin-item p {
    font-size: 0.75rem !important;
  }

  .bo-customers-item {
    flex: 0 0 85% !important;
  }

}