/* ============================================================
   RELATED GRID — GLOBAL OVERRIDE (SEMUA SITUS, tanpa terkecuali)
   Semua grid "Terkait" diarahkan ke satu suara:
      DESKTOP 4 kolom, MOBILE 2 kolom
   Yang dicakup:
     - Produk Terkait (halaman PRODUK)  : .product-related-section .featured-scroll
     - Produk Terkait (halaman ARTIKEL) : .artikel-products-grid
     - Artikel Terkait (halaman ARTIKEL): .artikel-related-grid
   Selector diberi specificity TINGGI + !important agar menang
   atas semua override tema/situs (termasuk himover, zatra-shop,
   market-architect yang memaksa horizontal-scroll pada mobile).
   ============================================================ */

/* ---------- DESKTOP : 3 kolom ---------- */
body.page-product-detail[data-site-id] .product-related-section .featured-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    scroll-snap-type: none !important;
    overscroll-behavior-inline: auto !important;
    -webkit-overflow-scrolling: auto !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    scrollbar-width: auto !important;
}

body.page-artikel-detail .artikel-products-grid,
body.page-artikel-detail .artikel-related-grid,
body.page-artikel-detail[data-site-id] .artikel-products-grid,
body.page-artikel-detail[data-site-id] .artikel-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ---------- SITE 3 / Wastra Linen override ---------- */
body.theme-homepage-linen.page-artikel-detail .artikel-products-grid,
body.theme-homepage-linen.page-artikel-detail .artikel-related-grid,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-products-grid,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .8rem !important;
}

body.theme-homepage-linen.page-artikel-detail .artikel-product-thumb,
body.theme-homepage-linen.page-artikel-detail .artikel-related-thumb,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-product-thumb,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-related-thumb {
    aspect-ratio: 1 / 1 !important;
}

body.theme-homepage-linen.page-artikel-detail .artikel-product-title,
body.theme-homepage-linen.page-artikel-detail .artikel-related-title,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-product-title,
body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-related-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ---------- GLOBAL: Limit desktop to 3 items, hide badge ---------- */
body.page-artikel-detail .artikel-product-card:nth-child(n+4),
body.page-artikel-detail .artikel-related-card:nth-child(n+4) {
    display: none !important;
}

body.page-artikel-detail .artikel-product-badge,
body.page-artikel-detail .artikel-related-badge {
    display: none !important;
}

/* ---------- MOBILE (<= 767px) : 2 kolom ---------- */
@media (max-width: 767px) {
    body.page-product-detail[data-site-id] .product-related-section .featured-scroll,
    body.page-artikel-detail .artikel-products-grid,
    body.page-artikel-detail .artikel-related-grid,
    body.page-artikel-detail[data-site-id] .artikel-products-grid,
    body.page-artikel-detail[data-site-id] .artikel-related-grid,
    body.theme-homepage-linen.page-artikel-detail .artikel-products-grid,
    body.theme-homepage-linen.page-artikel-detail .artikel-related-grid,
    body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-products-grid,
    body.theme-homepage-linen.page-artikel-detail[data-site-id="3"] .artikel-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem !important;
    }
}

/* ---------- HIDE DESIGNER CREDIT (except idehunian.com site 8) ---------- */
.artikel-product-designer {
    display: none !important;
}

/* Show designer credit only on idehunian.com (site 8) */
body.theme-marketplace-architect .artikel-product-designer,
body[data-site-id="8"] .artikel-product-designer {
    display: block !important;
}