/* ============================================================
   PUPINKART — Storefront tweaks (additive only, non-invasive)
   Original Bagisto theme intact; this only fixes:
   1) Image carousel aspect ratio mismatch
   2) Some spacing breathability
   ============================================================ */

/* --- Image carousel (Anasayfa Banner) ---------------------- */
.v-image-carousel,
.swiper {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* Hero banner aspect ratio: original images are 1250x390 (≈3.2:1) */
.swiper-slide img,
.carousel-image-wrapper img,
.v-image-carousel img,
[class*="image-carousel"] img,
[class*="carousel"] .swiper-slide > * img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (min-width: 1024px) {
  .swiper-slide img,
  .v-image-carousel img,
  [class*="image-carousel"] img {
    aspect-ratio: 1250 / 390;
    max-height: 200px;
  }
}

@media (max-width: 1023px) and (min-width: 640px) {
  .swiper-slide img,
  .v-image-carousel img,
  [class*="image-carousel"] img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 639px) {
  .swiper-slide img,
  .v-image-carousel img,
  [class*="image-carousel"] img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Section spacing breathing room ------------------------- */
.top-collection-container,
.bold-collection {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* Ensure product cards in carousel are aligned at the top */
.product-carousel .swiper-slide { align-items: stretch; }

/* --- Pupinkart drawer close button (always-visible fallback) --- */
.pk-drawer-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1f2937;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color .15s, color .15s, transform .12s;
  padding: 0;
}
.pk-drawer-close:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.pk-drawer-close:active { transform: scale(0.94); }

@media (max-width: 640px) {
  .pk-drawer-close {
    width: 40px;
    height: 40px;
    top: 12px;
    inset-inline-end: 12px;
  }
}

/* Hide the floating fallback close when a header-style cancel icon is already
   rendered (icon-cancel from Bagisto's default header slot) — but ONLY on
   wider viewports. On mobile, keep the floating one too since the icon-cancel
   is small. */
@media (min-width: 768px) {
  [class*="icon-cancel"] ~ .pk-drawer-close,
  [class*="icon-cancel"] + .pk-drawer-close,
  .v-drawer:has(.icon-cancel) .pk-drawer-close {
    display: none;
  }
}

/* ============================================================
   Global kompaktlik (2026-07): yazi ve bosluklari hafif kucult.
   rem-tabanli Tailwind -> kok font-size dusurmek hem fontu hem
   rem-bazli margin/padding'i oransal kuculur (layout bozulmaz).
   Deger tek yerden ayarlanabilir.
   ============================================================ */
html { font-size: 14px; }

/* Cok genis dikey bosluklu bolumleri biraz kis */
.top-collection-container,
.bold-collection { margin-top: 28px !important; margin-bottom: 28px !important; }

/* ============================================================
   Icerik alaninda (#main) dikey bosluklari kis — header/footer
   dokunulmaz. Buyuk margin/gap/padding siniflari azaltilir.
   ============================================================ */
#main .mt-12 { margin-top: 1.25rem !important; }
#main .mt-10 { margin-top: 1rem !important; }
#main .mt-8  { margin-top: 0.9rem !important; }
#main .mt-6  { margin-top: 0.75rem !important; }
#main .mb-12 { margin-bottom: 1.25rem !important; }
#main .mb-10 { margin-bottom: 1rem !important; }
#main .mb-8  { margin-bottom: 0.9rem !important; }
#main .py-12 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
#main .py-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#main .py-8  { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
#main .gap-8 { gap: 1rem !important; }
#main .gap-9 { gap: 1.25rem !important; }
#main .gap-y-8 { row-gap: 1rem !important; }
#main .space-y-8 > * + * { margin-top: 0.9rem !important; }
#main .space-y-6 > * + * { margin-top: 0.75rem !important; }

/* Bolum-arasi (section) buyuk bosluklar — anasayfa/kategori */
#main .mt-20 { margin-top: 0.75rem !important; }
#main .mt-16 { margin-top: 0.75rem !important; }
#main .mt-14 { margin-top: 0.6rem !important; }
#main .mt-11 { margin-top: 1rem !important; }
#main .mt-\[60px\] { margin-top: 0.75rem !important; }
#main .mt-\[34px\] { margin-top: 1rem !important; }
#main .mb-20 { margin-bottom: 1.75rem !important; }
#main .mb-16 { margin-bottom: 1.5rem !important; }
#main .mb-14 { margin-bottom: 1.25rem !important; }
#main .gap-10 { gap: 1.25rem !important; }
#main .gap-12 { gap: 1.5rem !important; }
#main .gap-16 { gap: 1.75rem !important; }
#main .py-20 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#main .py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* ============================================================
   Anasayfa KAYAN BANNER (v-carousel) — SABIT ORAN.
   Banner her cihazda 1920x700 (=2.743:1) oranini korur; boylece
   1920x700 hazirlanan TEK gorsel HER ekranda birebir, KIRPILMADAN
   gosterilir (genislik ekrana gore olceklenir, yukseklik oransal).
   Bu banner'a ozgu aspect sinifiyla hedefliyoruz (urun galerisi
   aspect-square kullandigi icin etkilenmez).
   ============================================================ */
[class~="aspect-[2.743/1]"] {
  aspect-ratio: 2.743 / 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
}