/* === Desktop-kan tablet (641–1111px) === */

/* 0) Amankan: jangan ganti ke grid ketika <=1111 */
@media (max-width: 1111px) {
  .header-main {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
  }
}

/* 1) Tampilkan nav utama, sembunyikan kontrol mobile */
@media (min-width: 641px) and (max-width: 1111px) {
  /* Header baris utama */
  .site-header-main .header-main {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
  .site-header-main .header-main .mobile-menu-toggle,
  .site-header-main .header-main .mobile-widget {
    display: none !important;
  }
  .site-header-main .header-main .service,
  .site-header-main .header-main .widget {
    display: block !important; /* samakan seperti desktop */
  }

  /* Nav horizontal (desktop) ON */
  .site-header-main .header-nav {
    display: block !important;
    padding: 0 !important;
  }
  .site-header-main .header-nav > .items {
    justify-content: center !important;
  }

  /* Floating header: pakai nav desktop juga */
  .floating-header-main .nav {
    display: flex !important;
  }
  .floating-header-main .mobile-menu-toggle,
  .floating-header-main .mobile-widget {
    display: none !important;
  }

  /* Mega menu tetap tersedia seperti desktop */
  .mega-menu-background {
    display: block !important;
  }
  .mega-menu {
    display: block !important;
  }
}

/* 2) Grid konten: pakai kolom “desktop-ish” pada tablet */
@media (min-width: 641px) and (max-width: 1111px) {
  .site-content-inner {
    /* Ambil template yang lebih lebar ala >=640/768 */
    grid-template-columns:
      [full-start] minmax(32px, 1fr)
      [wrapper-start] 0
      [main-start] minmax(32px, 1088px)
      [main-end] 32px
      [side-start] minmax(32px, 256px)
      [side-end] 0
      [wrapper-end] minmax(32px, 1fr)
      [full-end] !important;
  }
  .site-aside {
    width: 256px !important;
  }

  /* Kartu hasil/search & listing: 3 kolom seperti desktop */
  .site-search-content .search-result .product-display .item {
    width: 33.333333% !important;
  }
}

/* 3) Utility: hormati varian “only-desktop/only-mobile” */
@media (min-width: 641px) and (max-width: 1111px) {
  .only-desktop {
    display: block !important;
  }
  .only-mobile {
    display: none !important;
  }
}

/* (Opsional) bila kamu tetap pakai trik meta viewport + kelas HTML */
html.tablet-as-desktop {
  font-size: 16px;
}
@media (min-width: 641px) and (max-width: 1111px) {
  html.tablet-as-desktop body {
    overflow-x: hidden;
  }
}