/**
 * Equsto — site geneli mobil uyumluluk katmanı.
 * Tüm vitrin / shop / PFOS / Besos sayfalarında theme.css sonrası yüklenir.
 */

/* ── Temel: yatay taşma ve güvenli alan ─────────────────────────────────── */
html {
  overflow-x: clip;
  width: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg,
canvas,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

pre,
code {
  overflow-x: auto;
  word-break: break-word;
}

/* ── Kabuk: chrome + sayfa iskelesi ─────────────────────────────────────── */
#eq-shop-chrome-root,
.eq-shop-chrome,
.pg,
.pg-inner,
.body,
.right-col,
.eq-product-main,
.eq-dept-plp-layout,
.eq-dept-plp-main,
.eq-arama-layout,
.eq-arama-main {
  max-width: 100%;
  min-width: 0;
}

body.eq-shop:not(.admin-app):not(.bd-page) .pg {
  align-self: stretch;
  margin-inline: auto;
}

nav.topnav {
  max-width: 100vw;
}

/* ── Formlar: iOS odak zoom’u önle ───────────────────────────────────────── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ── Dokunma hedefleri ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header.hdr .srch-btn,
  header.hdr .srch-cat,
  .topnav-item,
  .eq-decor-catstrip__link,
  .filter-btn,
  .eq-dept-plp-filter-mob,
  .eq-arama-filter-mob,
  .drawer-overlay-close,
  .eq-mx-hero__nav,
  .eq-mx-pop-cats__nav {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .products .prod-card-wrap .eq-cart-add {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Üst bar: dar ekran ince ayar ─────────────────────────────────────────── */
@media (max-width: 768px) {
  header.hdr > .pg-inner,
  header.hdr > .pg-inner.hdr-pg-inner {
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }

}

@media (max-width: 400px) {
  header.hdr .srch-input,
  header.hdr input.srch-input {
    font-size: 16px !important;
  }

  body.eq-shop .topnav-item {
    padding: 8px 8px;
    font-size: 12px;
  }
}

/* ── Ana sayfa: üçlü hero + dekor ───────────────────────────────────────── */
@media (max-width: 768px) {
  body.eq-shop.eq-home .right-col > section.hero.eq-home-hero-ads .hero-card-body {
    padding: 12px 14px 14px;
  }

  body.eq-shop.eq-home .right-col > section.hero.eq-home-hero-ads .hero-card .hero-title {
    font-size: 14px;
  }

  body.eq-shop.eq-home .right-col > section.hero.eq-home-hero-ads .hero-card .hero-pitch {
    font-size: 12px;
  }

  .eq-decor-catstrip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .eq-decor-catstrip::-webkit-scrollbar {
    display: none;
  }

  .eq-decor-catstrip__inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    gap: 4px;
    padding: 8px 12px;
  }

  .eq-decor-catstrip__link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .eq-decor-promos__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 10px;
  }

  .eq-home-band-inner,
  .eq-mx-pop-cats-inner,
  .eq-mx-hero {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .eq-home .main-top,
  body.eq-home .main .main-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .eq-rail-wrap {
    margin: 0 -4px;
    overflow: hidden;
  }

  .eq-rail {
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 12px;
  }
}

@media (max-width: 520px) {
  body.eq-shop.eq-home .right-col > .hero-banner.eq-world-first-banner {
    padding: 20px 14px !important;
  }

  body.eq-shop.eq-home .right-col > .hero-banner.eq-world-first-banner .eq-wf-headline {
    font-size: clamp(22px, 7vw, 32px) !important;
    letter-spacing: 0.08em;
  }
}

/* ── Kategori / arama PLP (toolbar: eq-dept-plp.css) ─────────────────────── */
@media (max-width: 768px) {
  .eq-dept-plp-grid,
  .eq-arama-grid {
    gap: 10px 8px;
  }
}

@media (max-width: 380px) {
  .eq-dept-plp-grid,
  .eq-arama-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Ürün detay (PDP) ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  body.eq-shop .eq-product-main {
    padding: 12px max(12px, env(safe-area-inset-left, 0px)) 24px
      max(12px, env(safe-area-inset-right, 0px));
  }

  body.eq-shop .eq-product-hero-img {
    max-height: min(52vh, 420px);
  }

  .eq-epdp-hero .eq-product-buy-col,
  .eq-product-sidebar {
    width: 100%;
    max-width: none;
  }

  .eq-product-thumbs--vertical {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── Sepet ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .eq-cart-line {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 12px;
  }

  .eq-cart-line__media {
    width: 88px;
    height: 88px;
  }

  .eq-cart-line__actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .eq-cart-summary {
    position: static;
    width: 100%;
  }
}

@media (max-width: 400px) {
  .eq-cart-line {
    grid-template-columns: 1fr;
  }

  .eq-cart-line__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-height: 200px;
  }
}

/* ── PFOS sihirbaz ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.eq-pfos .pf-left,
  body.eq-pfos-public .pf-left {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  body.eq-pfos .pf-right,
  body.eq-pfos-public .pf-right {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .pfos-pf-tbl-wrap,
  .pfos-inoksan-tbl-wrap,
  .tablo-panel table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Besos ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.bd-page.besos .besos-hdr-brand {
    padding: 10px max(12px, env(safe-area-inset-left, 0px));
  }

  body.bd-page.besos .besos-hdr-nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.bd-page.besos .besos-hdr-nav::-webkit-scrollbar {
    display: none;
  }

  body.bd-page.besos .besos-page section {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* ── Footer + alt şerit / FAB ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px max(12px, env(safe-area-inset-left, 0px))
      max(16px, env(safe-area-inset-right, 0px));
    font-size: 12px;
    line-height: 1.45;
  }

  .footer .refs {
    flex-direction: column;
    gap: 6px;
  }

  body:has(#eq-bottom-tabbar) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  body:has(#eq-bottom-tabbar) #equsto-contact-fab:not(#eq-bottom-tabbar *),
  body:has(#eq-bottom-tabbar) .equsto-contact-fab:not(#eq-bottom-tabbar *) {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body.eq-pfos:has(.pf-m-tabbar) #equsto-contact-fab,
  body.eq-pfos:has(.pf-m-tabbar) .equsto-contact-fab {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Tablolar ve geniş içerik ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .equsto-wa-modal {
    width: min(100vw - 24px, 420px);
    max-height: min(90vh, 640px);
    margin: 12px;
  }
}

/* ── Yönetim paneli (Ant Design) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  body.admin-app .ant-pro-layout .ant-pro-page-container-children-content {
    padding: 12px !important;
  }

  body.admin-app .ant-table-wrapper {
    overflow-x: auto;
  }
}