/* ========================================================================== IBS Shop 2026 — katalog dan halaman produk Dunia yang sama dengan beranda dan halaman perusahaan: bidang polistirena, tinta grafit, satu biru assay sebagai status, bingkai rambut 2px, Archivo untuk teks dan Spline Sans Mono untuk angka, kode, dan label data. Markup WooCommerce tidak diubah sama sekali — semua di bawah ini bekerja di atas kelas yang memang sudah dikeluarkan WooCommerce dan tema. Kalau file ini hilang, katalognya kembali seperti semula tanpa sisa. Dilingkupi .ibs-shop26 pada , jadi rute lain tidak terpengaruh. ========================================================================== */ .ibs-shop26 { --ground: var(--ds-ground, #f1f4f7); --frame: var(--ds-frame, #ffffff); --hairline: var(--ds-hairline, #d5dce4); --ink: var(--ds-ink, #10192a); --ink-2: var(--ds-ink-2, #46536a); --ink-3: var(--ds-ink-3, #5c6980); --assay: var(--ds-assay, #0b4fd1); --assay-deep: var(--ds-assay-deep, #072f7d); --assay-wash: var(--ds-assay-wash, #e4ecfb); --r: 2px; --rule: 1px solid var(--hairline); --ease: cubic-bezier(0.16, 1, 0.3, 1); --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* -------------------------------------------------------------------------- Spanduk judul tema. Ia menuliskan "Product & Solution" — bahasa Inggris, di tengah, di atas slab biru setinggi 113px yang tidak membawa apa pun selain kata itu. Masthead katalog menggantikannya, membawa jumlah produk dan jalan bertanya. Dua alamat, karena spanduk itu diangkat keluar dari header oleh JavaScript di tengah jalan — alasan lengkapnya ada di ibs-pages-2026/style.css. -------------------------------------------------------------------------- */ .ibs-shop26 .ibs-banner-host, .ibs-shop26 .ibs-page-banner, .ibs-shop26 .sc_layouts_title, .ibs-shop26 .top_panel .elementor-top-section:has(.sc_layouts_title) { display: none; } .ibs-shop26 .page_content_wrap { background: var(--ground); } /* Tema menyembunyikan .list_products_header karena isinya cuma judul arsip WooCommerce yang mengulang spanduk. Judul itu kini tidak dicetak sama sekali (lihat ibs-shop-2026.php), dan pembungkusnya jadi tempat masthead ini berdiri — satu-satunya hook sebelum loop yang tidak mendarat di dalam sesuatu yang display:none. */ /* Dua kelas body, bukan satu: aturan tema berbunyi `.woocommerce .list_products_header { display: none }` — kekhususan yang sama dengan `.ibs-shop26 .list_products_header`, dan berkasnya dimuat belakangan, jadi seri dimenangkan tema. Menambahkan kelas body kedua memutus seri itu tanpa perlu !important. */ .ibs-shop26.woocommerce .list_products_header, .ibs-shop26.woocommerce-page .list_products_header { display: block; } .ibs-shop26.woocommerce .woocommerce-products-header, .ibs-shop26.woocommerce-page .woocommerce-products-header { display: none; } /* -------------------------------------------------------------------------- Masthead katalog -------------------------------------------------------------------------- */ .ibs-cat26 { padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--ink); margin-bottom: clamp(24px, 3vw, 40px); } .ibs-cat26__crumb { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; } .ibs-shop26 .ibs-cat26__crumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; display: inline-flex; align-items: center; min-height: 24px; } .ibs-shop26 .ibs-cat26__crumb a:hover { color: var(--assay); border-bottom-color: currentColor; } .ibs-cat26__crumb [aria-current="page"] { color: var(--ink); } .ibs-cat26__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; } .ibs-shop26 .ibs-cat26__h1 { font-family: var(--sans); font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); margin: 0 0 14px; } .ibs-cat26__lede { color: var(--ink-2); max-width: 56ch; margin: 0; line-height: 1.6; } /* Tiga fakta yang ditanyakan pembeli sebelum menelusuri: seberapa besar katalognya, dari berapa principal, dan bagaimana harganya bekerja — karena toko ini tidak menampilkan harga sama sekali dan itu perlu dijelaskan, bukan didiamkan. */ .ibs-cat26__facts { margin: 0; display: grid; gap: 0; border-top: var(--rule); } .ibs-cat26__facts > div { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.4fr); gap: 14px; padding: 10px 0; border-bottom: var(--rule); } .ibs-cat26__facts dt { margin: 0; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; } .ibs-cat26__facts dd { margin: 0; color: var(--ink); font-size: 0.9375rem; } .ibs-shop26 .ibs-cat26__facts a { color: var(--assay); text-decoration: none; border-bottom: 1px solid var(--hairline); } .ibs-shop26 .ibs-cat26__facts a:hover { border-bottom-color: currentColor; } /* -------------------------------------------------------------------------- Bilah alat: jumlah hasil dan pengurutan. -------------------------------------------------------------------------- */ .ibs-shop26 .woocommerce-result-count { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; margin: 0; } .ibs-shop26 .woocommerce-ordering select.orderby, .ibs-shop26 .woocommerce-ordering .select_container select { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink); background-color: var(--frame); border: var(--rule); border-radius: var(--r); min-height: 46px; padding: 0 40px 0 14px; box-shadow: none; } /* Panah tema ikut warna tinta, bukan oranye bawaannya — selama bawaan digambar sistem operasi dan tidak bisa disentuh CSS — sekarang ikut dunia yang sama. Alasannya ada di ibs-shop-2026.php. */ .ibs-shop26 .ibs-sel { position: relative; display: inline-block; } .ibs-shop26 .ibs-sel__btn { appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 232px; min-height: 46px; padding: 0 14px; background: var(--frame); border: var(--rule); border-radius: var(--r); color: var(--ink); font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; /* Tema meng-uppercase setiap