/*
 * Titibon — mobil düzəlişlər (müştəri auditi, 30.10.2026). Temanın style.css-inə
 * toxunulmur; bu fayl ondan SONRA yüklənir (bax templates/base.html).
 *
 * 1) "Səbətə at" toxunma ekranlarında həmişə görünür.
 * 2) Telefonda məhsul kartları sırada 2 ədəd — kart ölçüləri buna uyğun kiçilir.
 * 3) Animasiyalar: telefonda və "azaldılmış hərəkət" seçimində söndürülür.
 * 4) Üstünlük blokları telefonda 2×2 kiçik kartlar.
 */

/* ── 1) "Səbətə at" ─────────────────────────────────────────────────────────
   Tema düyməni yalnız :hover-də göstərir (product-hover-content) — telefonda hover
   yoxdur. Toxunma ekranında hover bloku gizlədilir (ad/qiyməti təkrarlayırdı) və
   kartın əsas hissəsindəki düymə həmişə görünür. */
.card-cart-btn {
  display: none;
}
@media (hover: none), (max-width: 991px) {
  .ot-product .product-hover-content {
    display: none !important;
  }
  .card-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0; /* temanın .ot-btn min-width: 170px-i dar kartdan daşırdı */
    white-space: nowrap;
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ── 2) Telefonda 2 sütun ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ot-product {
    max-width: none;
    padding: 10px;
    border-radius: 14px;
  }
  .ot-product .box-title {
    font-size: 14px;
    line-height: 1.35;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ot-product .price {
    font-size: 15px;
  }
  .ot-product .price del {
    display: block;
    font-size: 12px;
  }
  .ot-product .product-tag .tag,
  .ot-product .product-tag .offer {
    font-size: 11px;
    padding: 2px 8px;
  }
  .ot-product .woocommerce-product-rating .rating-text {
    font-size: 12px;
  }
  .card-cart-btn {
    padding: 8px 6px;
    font-size: 13px;
    border-radius: 10px;
  }
}

/* ── 3) Animasiyalar ────────────────────────────────────────────────────────
   Tema [data-cue] elementlərini CSS-də gizlədir (opacity: 0), scrollCue göstərir.
   Telefonda sürüşdürərkən bloklar gec çıxır və banner ilə növbəti bölmə arasında
   boş yer qalırdı — orada animasiya ümumiyyətlə yoxdur, hər şey dərhal görünür. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  [data-cue],
  [data-cues] > * {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
    visibility: visible !important;
  }
}

/* ── 4) Üstünlük blokları — telefonda 2×2 ─────────────────────────────────── */
@media (max-width: 575px) {
  .feature-list {
    display: block;
    min-height: 0;
    padding: 14px 10px;
    text-align: center;
  }
  .feature-list:after {
    border-radius: 16px;
  }
  .feature-list .box-icon {
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin: 0 auto 8px;
    border-radius: 12px;
  }
  .feature-list .box-icon img {
    max-width: 26px;
    max-height: 26px;
  }
  .feature-list .box-title {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .feature-list .box-text {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }
}