/* ============================================================
   SZD DESKTOP FOUNDATION (دور ۸۷) — ≥992px only.
   The whole site is mobile-first with NO desktop layout, so at
   wide widths everything stretched to 1920px and the hero blew
   up to 1264px tall. This centers the content in a clean column
   and tames the full-bleed pieces. Mobile (<992px) untouched.
   ============================================================ */
@media (min-width: 992px) {

  :root { --szd-dt-max: 1200px; }

  /* ---- the header is position:fixed (mobile sticky paradigm) but the body has no
     top offset → on desktop the 439px header (now incl. megamenu) overlapped the
     hero. Put the header back in normal flow on desktop so content follows it. ---- */
  #st_header, .header-container, #st_header .header-container { position: static !important; top: auto !important; height: auto !important; }
  body #body_wrapper, body .st-content, body #page_wrapper { padding-top: 0 !important; margin-top: 0 !important; }

  /* ---- center the home content column ---- */
  #index .szd-home {
    max-width: var(--szd-dt-max);
    margin-left: auto; margin-right: auto;
    padding-bottom: 24px;
  }
  /* bgfx is position:fixed → stays full-screen behind the gutters (intentional) */

  /* ---- HERO: a proper banner strip, not a 1264px tower ---- */
  /* DT8 (دور ۱۳۲): ارتفاع ثابت ۴۸۰ در لپ‌تاپ ~۱۳۶۶ کل فولد را می‌گرفت (اسلایدر «نصفه» دیده می‌شد).
     ریسپانسیو: ~۳۰vw با سقف ۳۰۰..۴۷۰ — در سرفیس/۱۳۶۶ بالای فولد جا می‌شود، در ۱۹۲۰ کامل. */
  #index .szd-home .hero { padding: 20px 0 6px; --szd-hero-h: clamp(300px, 30vw, 470px); }
  #index .szd-home .hero__viewport { aspect-ratio: auto !important; height: var(--szd-hero-h); }
  #index .szd-home .hero__track, #index .szd-home .hero__track > .st_banner_row,
  #index .szd-home .hero__track .st_banner_block, #index .szd-home .hero__track picture { height: var(--szd-hero-h) !important; }
  /* high-specificity (body#index … img) to beat the mobile height rule */
  body#index .szd-home .hero__viewport img,
  body#index .szd-home .hero__track img {
    width: 100% !important; height: var(--szd-hero-h) !important; max-height: var(--szd-hero-h) !important;
    object-fit: cover !important; object-position: center 56% !important;
  }

  /* ---- MEGA-MENU bar: full-width white strip, inner aligned to the column ---- */
  section#top_extra > .container,
  section#top_extra .container { max-width: var(--szd-dt-max) !important; margin: 0 auto !important; padding: 0 12px !important; float: none !important; }
  /* the dropdown panels are positioned to the bar; keep them inside the column too */
  #st_mega_menu_wrap .stmenu_sub.style_wide { max-width: var(--szd-dt-max); }

  /* ---- categories: denser 6-up grid on desktop ---- */
  #index .szd-home .cats-grid { grid-template-columns: repeat(6, 1fr) !important; }

  /* ---- decorative full-bleed bands: cap so they don't dominate ---- */
  #index .szd-home .szd-feat { min-height: 220px; }

  /* ---- PDP: the mobile gallery topbar (back/share/wishlist) is unstyled on desktop
     so its wishlist SVG balloons to ~437px. Turn it into small floating icon buttons
     over the gallery, drop the mobile back button. Columns are already side-by-side. ---- */
  #product .product_left_content { position: relative; }
  #product .szd-gal-topbar { position: absolute !important; top: 12px; left: 12px; right: auto; width: auto !important; display: flex; gap: 8px; z-index: 6; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  #product .szd-gal-topbar__l { display: flex; gap: 8px; }
  #product .szd-gal-back { display: none !important; }
  #product .szd-gal-btn { width: 42px !important; height: 42px !important; min-width: 0 !important; flex: 0 0 42px !important; padding: 9px !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 3px 10px rgba(45,28,32,.14) !important; display: inline-flex !important; align-items: center; justify-content: center; }
  #product .szd-gal-btn svg { width: 22px !important; height: 22px !important; }
  #product .product_left_column .product-cover img { max-height: 520px; object-fit: contain; }
}

/* the QuickSearch wrapper paints an empty white sliver under the field even when its
   .autocomplete-suggestions child is display:none. Strip the wrapper's own chrome so it
   is invisible until populated (autocomplete still works). Sitewide + safe. */
.QuickSearchResults { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; }