/**
 * Halaman Toko & arsip kategori: breadcrumb, kepala arsip, slider sub-kategori, formulir filter (sidebar & sheet), chip, toolbar, grid produk arsip, pagination, sheet filter mobile.
 *
 * Dipecah dari style.css (CLAUDE.md §14.8) - jangan menduplikasi aturan ke
 * berkas lain; aturan yang dipakai >1 template tinggal di base.css.
 */
/* ---- ARSIP KATEGORI PRODUK (16) ---- */
/* ---- Kepala kategori ---- */
.sk-arsip__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding:24px 26px;margin-bottom:22px}
.sk-arsip__heading{min-width:0;flex:1 1 420px}
.sk-arsip__title{font-size:30px;line-height:1.2;margin:0}
.sk-arsip__desc{max-width:640px;margin-top:8px;font-size:15px;line-height:1.6;color:var(--sk-muted)}
.sk-arsip__desc p{margin:0}
.sk-arsip__desc p+p{margin-top:8px}
.sk-arsip__stats{display:flex;gap:14px;margin:0;flex-shrink:0}
.sk-arsip__stat{background:var(--sk-bg);border:1px solid var(--sk-line-2);border-radius:var(--sk-radius-sm);padding:12px 16px;min-width:132px}
.sk-arsip__stat dt{font-size:12.5px;color:var(--sk-muted-2);margin:0}
.sk-arsip__stat dd{margin:4px 0 0;font-size:16px;font-weight:700;color:var(--sk-navy)}

/* ---- Slider sub-kategori ----
   Hidup di puncak kolom kanan (.sk-arsip__col), di atas toolbar, ditutup garis
   1px. Pembungkus luar hanya jangkar panah dan TIDAK di-clip; yang memotong isi
   adalah track (overflow-x:auto) itu sendiri. Lebar item hidup di sini, bukan
   di JS: n item + (n-1) gap = 100% track (6 desktop, 4 di <=1024px), sehingga
   maxScroll selalu kelipatan pitch dan tiap posisi berhenti rata di kedua tepi. */
.sk-subcat{position:relative;padding-bottom:16px;border-bottom:1px solid var(--sk-line);margin-bottom:18px}
/* touch-action pan-x: swipe sentuhan sengaja dibiarkan jadi scroll native +
   snap bawaan browser (aturan §4b). Drag pointer di bawah hanya untuk tetikus,
   jadi kedua jalur tidak pernah menggerakkan track bersamaan. */
.sk-subcat__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x pan-y;padding-block:2px}
.sk-subcat__track::-webkit-scrollbar{display:none}
.sk-subcat.is-scrollable .sk-subcat__track{cursor:grab}
.sk-subcat.is-drag .sk-subcat__track{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
/* Selama menggeser, seluruh isi track tidak menerima pointer: tanpa ini
   hover kartu ikut menyala dan ghost-drag tautan sempat muncul. */
.sk-subcat.is-drag .sk-subcat__track>*{pointer-events:none}
/* Tanpa kotak putih di sekeliling item - bingkai hanya pada gambarnya. Gambar
   mengisi selebar item; aspect-ratio yang menjaganya 1:1, jadi tidak boleh ada
   batas ukuran (width/max-width tetap) di sini. */
.sk-subcat__item{flex:0 0 calc((100% - 80px) / 6);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;user-select:none;-webkit-user-drag:none}
.sk-subcat__item:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-subcat__media{width:100%;aspect-ratio:1/1;border:1px solid transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;margin-bottom:6px;transition:background .2s,border-color .2s}
/* Model gambar dari Customizer `sk_subcat_style`. */
.sk-subcat--kotak .sk-subcat__media{border-radius:var(--sk-radius);background:#eef3f5}
.sk-subcat--bulat .sk-subcat__media{border-radius:50%;border-color:var(--sk-line);background:#f7f9fa}
.sk-subcat .sk-subcat__item:hover .sk-subcat__media,.sk-subcat .sk-subcat__item:focus-visible .sk-subcat__media{background:#fff1e3;border-color:var(--sk-accent)}
.sk-subcat__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit;user-select:none;-webkit-user-drag:none}
/* overflow-wrap:anywhere: satu kata panjang (82px item di 390px) tidak boleh
   meluber - lebar luapannya ikut scrollWidth track dan memunculkan panah palsu. */
.sk-subcat__name{max-width:100%;font-size:13.5px;font-weight:700;color:var(--sk-navy);line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.sk-subcat__count{font-size:12px;color:var(--sk-muted-2)}
/* top: tengah area item, tidak termasuk padding-bottom + garis (17px) di bawahnya. */
.sk-subcat__arrow{position:absolute;top:calc(50% - 8.5px);z-index:2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:-19px;padding:0;border:1px solid #d6dce2;border-radius:50%;background:#fff;color:var(--sk-navy);cursor:pointer;box-shadow:0 2px 10px rgba(11,36,55,.1)}
/* Area sentuh 44x44 persegi (38 + 3 tiap sisi). Tanpa border-radius: lingkaran
   44px hanya memuat persegi ~31px sehingga tap di pojok meleset. */
.sk-subcat__arrow::after{content:"";position:absolute;inset:-3px}
.sk-subcat__arrow:hover,.sk-subcat__arrow:focus-visible{border-color:var(--sk-accent);color:var(--sk-accent)}
.sk-subcat__arrow[hidden]{display:none}
.sk-subcat__arrow--prev{left:-8px}
.sk-subcat__arrow--prev .sk-ic{transform:rotate(180deg)}
.sk-subcat__arrow--next{right:-8px}

/* ---- Baris isi: sidebar + kolom produk ---- */
.sk-arsip__body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.sk-arsip__col{min-width:0}

/* ---- Formulir filter ---- */
.sk-filter{background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding-left:18px;padding-right:18px;padding-bottom:16px}
.sk-filter__sec{border-bottom:1px solid var(--sk-line-2)}
.sk-filter__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-size:14.5px;font-weight:700;color:var(--sk-ink);cursor:pointer;list-style:none;user-select:none}
.sk-filter__head::-webkit-details-marker{display:none}
.sk-filter__head:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-filter__head .sk-ic{flex-shrink:0;color:var(--sk-muted-2);transition:transform .18s ease}
.sk-filter__sec[open]>.sk-filter__head .sk-ic{transform:rotate(180deg)}
.sk-filter__headline{flex:1;min-width:0}
.sk-filter__badge{flex-shrink:0;font-size:12.5px;color:var(--sk-accent);font-weight:700}
.sk-filter__body{padding-bottom:14px}
.sk-filter__cats,.sk-filter__subs,.sk-filter__list{list-style:none;margin:0;padding:0}

/* ---- Panel Kategori: kartu mockup ----
   Baris kategori melebar penuh ke tepi dalam kartu (body tanpa padding
   horizontal); induk aktif ditandai bilah kiri 3px + latar krem, BUKAN kotak
   ber-border. Berlaku untuk kedua konteks: akordeon toko dan daftar arsip. */
.sk-filter__sec--cat{border:1px solid #e4e8ec;border-radius:8px;background:#fff;overflow:hidden;margin-top:14px;margin-bottom:14px}
.sk-filter__sec--cat>.sk-filter__head{padding-left:16px;padding-right:16px;border-bottom:1px solid #eef1f4;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#16202a}
.sk-filter__sec--cat:not([open])>.sk-filter__head{border-bottom:none}
.sk-filter__sec--cat>.sk-filter__body{padding:6px 0 8px}

.sk-filter__catlink{display:flex;align-items:center;gap:10px;padding:10px 16px;border-left:3px solid transparent;font-size:14.5px;font-weight:500;color:#16202a}
.sk-filter__catlink .sk-filter__catname{flex:1;min-width:0}
.sk-filter__catlink .sk-ic--caret{flex-shrink:0;transition:transform .2s ease}
.sk-filter__catlink:hover,.sk-filter__catlink:focus-visible{color:var(--sk-accent)}
.sk-filter__cat.is-active>.sk-filter__catlink{border-left-color:#f07300;background:#fffaf5;font-weight:700;color:#16202a}
.sk-filter__cat.is-active>.sk-filter__catlink .sk-ic--caret{transform:rotate(180deg)}
.sk-filter__catcount{font-size:12.5px;color:var(--sk-muted-3)}
.sk-filter__subs{margin:0;padding-bottom:6px}
.sk-filter__opt{display:flex;align-items:center;gap:9px;min-height:36px;font-size:14.5px;color:var(--sk-ink-3);cursor:pointer}
.sk-filter__cb{width:17px;height:17px;flex-shrink:0;accent-color:var(--sk-accent);cursor:pointer}
.sk-filter__optname{flex:1;min-width:0}
.sk-filter__cb:checked~.sk-filter__optname{color:var(--sk-navy);font-weight:700}
.sk-filter__optcount{font-size:12.5px;color:var(--sk-muted-3)}
/* Dua kolom seimbang: flex-basis 0 supaya lebar isi (placeholder "Rp Maks")
   tidak ikut menentukan pembagian dan salah satu kotak tidak pernah terpotong. */
/* Dua kotak harga: grid dengan kolom tengah 10px berisi garis pemisah 1px;
   prefiks "Rp" menempel di dalam kotak, bukan bagian nilai. */
.sk-filter__harga{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);align-items:center}
.sk-filter__hcell{position:relative;min-width:0}
.sk-filter__hsep{height:1px;background:#c9d2da}
.sk-filter__rp{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--sk-muted-3);pointer-events:none}
.sk-filter__num,.sk-filter__search{width:100%;height:42px;border:1.5px solid #d6dce2;border-radius:var(--sk-radius-sm);padding-left:11px;padding-right:11px;font-size:14.5px;background:#fff}
/* Pola tema (lihat .sk-quote__input): cincin dilepas hanya untuk fokus tetikus,
   fokus keyboard tetap mendapat outline oranye. */
.sk-filter__num:focus,.sk-filter__search:focus{outline:none;border-color:var(--sk-accent)}
.sk-filter__num:focus-visible,.sk-filter__search:focus-visible{outline:2px solid var(--sk-accent);outline-offset:1px;border-color:var(--sk-accent)}
/* Chip cepat rentang harga: tautan fallback; JS mengisi kotak Min-Maks.
   Tinggi visual 34px, area sentuh 44px lewat ::after persegi (CLAUDE.md §3). */
.sk-filter__hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sk-filter__hchip{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;background:#fff;border:1.5px solid #d6dce2;border-radius:var(--sk-radius-sm);font-size:13.5px;font-weight:500;color:var(--sk-ink-3)}
.sk-filter__hchip::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
.sk-filter__hchip:hover,.sk-filter__hchip:focus-visible{border-color:var(--sk-accent);color:var(--sk-accent)}
.sk-filter__hchip:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-filter__hchip.is-active{border-color:var(--sk-accent);color:var(--sk-accent);background:var(--sk-accent-soft);font-weight:600}

.sk-filter__cari{position:relative;margin:0 0 8px}
.sk-filter__cari .sk-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sk-muted-2);pointer-events:none}
.sk-filter__search{height:40px;padding-left:38px}
.sk-filter__num{padding-left:32px}
/* Bilah gulir tipis untuk daftar merek - tanpa tombol panah bawaan. */
.sk-filter__sec .sk-filter__list[data-sk-merek-list]{max-height:230px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c9d2da transparent}
[data-sk-merek-list]::-webkit-scrollbar{width:6px}
[data-sk-merek-list]::-webkit-scrollbar-thumb{background:#c9d2da;border-radius:3px}
[data-sk-merek-list]::-webkit-scrollbar-button{display:none}
/* Centang merek biru navy mengikuti mockup; Ketersediaan tetap aksen tema. */
[data-sk-merek-list] .sk-filter__cb{accent-color:var(--sk-navy)}
.sk-filter__kosong{margin:6px 0 0;font-size:13.5px;color:var(--sk-muted-3);text-align:center}
.sk-filter__belum{margin:0;padding:16px;font-size:14px;color:var(--sk-muted-3)}
.sk-filter__foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:16px}
.sk-filter__reset{font-size:14px;color:var(--sk-muted)}
.sk-filter__reset:hover,.sk-filter__reset:focus-visible{color:var(--sk-accent)}

/* ---- Akordeon kategori (konteks toko) ----
   <details name="sk-fcat-..."> asli browser: eksklusif tanpa JavaScript.
   Tanpa centang: baris anaknya .sk-filter__sublink di bawah (aturan §4c). */
.sk-filter__acc>summary{display:flex;align-items:center;gap:10px;padding:10px 16px;border-left:3px solid transparent;font-size:14.5px;font-weight:500;color:#16202a;cursor:pointer;list-style:none;user-select:none}
.sk-filter__acc>summary::-webkit-details-marker{display:none}
.sk-filter__acc>summary::marker{content:""}
.sk-filter__acc>summary:hover{color:var(--sk-accent)}
/* Pengganti outline (aturan §7): latar krem, bukan kotak outline ber-offset -
   Chrome bisa menyalakan :focus-visible pada summary sehingga kotak oranye
   muncul sesudah klik. */
.sk-filter__acc>summary:focus-visible{outline:none;background:#fffaf5}
.sk-filter__acc>summary .sk-filter__catname{flex:1;min-width:0}
/* Nama induk di konteks arsip adalah tautan di dalam summary: klik nama
   menavigasi, klik bagian baris lain (termasuk caret) membuka dropdown. */
.sk-filter__acc>summary .sk-filter__catgo{flex:1;min-width:0;color:inherit;font-weight:inherit}
.sk-filter__acc>summary .sk-filter__catgo:hover,.sk-filter__acc>summary .sk-filter__catgo:focus-visible{color:var(--sk-accent)}
.sk-filter__acc>summary .sk-ic{flex-shrink:0;color:var(--sk-muted-3);transition:transform .2s ease}
.sk-filter__acc[open]>summary .sk-ic{transform:rotate(180deg)}
.sk-filter__acc.is-active>summary{border-left-color:#f07300;background:#fffaf5;font-weight:700}

/* Baris anak kategori. Dua rupa satu gaya: .sk-filter__sublink = tautan
   pembalik subs[] (dicegat JS, tanpa muat); .sk-filter__subnav = tautan
   navigasi ke arsip anak (induk yang tidak sedang dibuka). Tanpa caret,
   tanpa garis kiri; anak terpilih ditandai latar. */
.sk-filter__sublink,.sk-filter__subnav{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 32px;font-size:14px;font-weight:400;color:#5c6a77}
.sk-filter__sublink .sk-filter__optname,.sk-filter__subnav .sk-filter__optname{flex:1;min-width:0}
.sk-filter__sublink:hover,.sk-filter__sublink:focus-visible,.sk-filter__subnav:hover,.sk-filter__subnav:focus-visible{color:var(--sk-accent)}
.sk-filter__sublink.is-active{background:#fff6ee;font-weight:700;color:#c25c00}

/* ---- Kotak minta penawaran ----
   Hidup di dalam .sk-arsip__side dan hanya ada SATU di DOM pada tiap lebar.
   Di bawah 1024px asidenya tidak disembunyikan melainkan dipindah ke bawah
   kolom produk lewat `order`; yang disembunyikan cuma formulir filternya. */
.sk-quote-box{background:var(--sk-navy);border-radius:var(--sk-radius);padding:20px;margin-top:20px;color:#c6d7e4}
.sk-quote-box__title{margin:0;font-size:16px;font-weight:700;color:#fff}
.sk-quote-box__text{margin:6px 0 14px;font-size:14px;line-height:1.5}
.sk-quote-box__btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:none;border-radius:var(--sk-radius-sm);background:#fff;color:var(--sk-navy);font-size:14.5px;font-weight:700;cursor:pointer}
.sk-quote-box__btn:hover{background:var(--sk-accent-soft);color:var(--sk-navy)}

/* ---- Toolbar ---- */
.sk-arsip__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding:12px 16px;margin-bottom:18px}
.sk-arsip__count{margin:0;font-size:14px;color:var(--sk-muted)}
.sk-arsip__sort{display:flex;align-items:center;gap:8px;min-width:0}
.sk-arsip__sortlabel{font-size:14px;color:var(--sk-muted);flex-shrink:0}
.sk-arsip__select{min-height:40px;min-width:0}
/* Tombol kirim urutan hanya untuk keadaan tanpa JS. Begitu initSort() jalan,
   kelas is-auto dipasang dan select mengirim formnya sendiri. */
.sk-arsip__sort.is-auto .sk-arsip__sortgo{display:none}
.sk-arsip__sortgo{min-height:40px;padding:0 14px;border:1.5px solid #d6dce2;border-radius:var(--sk-radius-sm);background:#fff;font-size:14px;font-weight:600;color:var(--sk-navy);cursor:pointer}
/* Tombol Filter adalah <summary>. Penanda segitiga bawaannya dimatikan tiga
   lapis: display:flex melepas display:list-item, list-style untuk mesin modern,
   ::-webkit-details-marker untuk WebKit lama. Tampil-tidaknya diatur pembungkus
   <details> (.sk-filter-sheet), bukan tombol ini. */
.sk-arsip__filterbtn{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid #d6dce2;border-radius:var(--sk-radius-sm);background:#fff;font-size:14.5px;font-weight:600;color:var(--sk-navy);cursor:pointer;list-style:none}
.sk-arsip__filterbtn::-webkit-details-marker{display:none}
.sk-arsip__filterbtn::marker{content:""}
.sk-arsip__filterbtn:hover{border-color:var(--sk-accent);color:var(--sk-accent)}
.sk-arsip__filterbtn:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}

/* ---- Chip filter aktif ----
   Murni tautan <a>; tanda X hanya ikon. Tinggi visual 34px, area sentuh 44px
   lewat ::after transparan PERSEGI terpusat (tanpa radius - CLAUDE.md §3). */
.sk-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sk-chips__chip{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius-sm);font-size:13.5px;font-weight:600;color:var(--sk-ink-2)}
.sk-chips__chip .sk-ic{flex-shrink:0;color:var(--sk-muted-2)}
.sk-chips__chip:hover,.sk-chips__chip:focus-visible{border-color:var(--sk-accent);color:var(--sk-accent)}
.sk-chips__chip:hover .sk-ic,.sk-chips__chip:focus-visible .sk-ic{color:var(--sk-accent)}
.sk-chips__chip:focus-visible,.sk-chips__clear:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-chips__chip::after,.sk-chips__clear::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
.sk-chips__clear{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 4px;font-size:13.5px;font-weight:600;color:var(--sk-muted)}
.sk-chips__clear:hover,.sk-chips__clear:focus-visible{color:var(--sk-accent)}

/* ---- Grid produk arsip: 4 / 3 / 2 ---- */
.sk-arsip ul.products{grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1279px){.sk-arsip ul.products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1023px){.sk-arsip ul.products{grid-template-columns:repeat(2,1fr)}}

/* ---- Keadaan memuat (penukaran AJAX) ----
   Grid diredupkan + spinner di wadah grid selama fetch berjalan. Kelas
   is-loading dipasang initCatalogAjax() pada [data-sk-catalog]. */
.sk-arsip__gridwrap{position:relative}
[data-sk-catalog].is-loading [data-sk-grid]{opacity:.45;pointer-events:none;transition:opacity .12s ease}
[data-sk-catalog].is-loading [data-sk-grid]::after{content:"";position:absolute;left:50%;top:96px;width:28px;height:28px;margin-left:-14px;border:3px solid #dfe5ea;border-top-color:var(--sk-accent);border-radius:50%;animation:sk-spin .7s linear infinite}
@keyframes sk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  [data-sk-catalog].is-loading [data-sk-grid]::after{animation:none}
}

/* ---- Kosong ---- */
.sk-arsip__kosong{background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding:44px 28px;text-align:center}
.sk-arsip__kosong h2{font-size:20px;margin:0 0 8px}
.sk-arsip__kosong p{margin:0 auto 18px;max-width:420px;font-size:15px;color:var(--sk-muted)}

/* ---- Pagination ---- */
.sk-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sk-pager a,.sk-pager span{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--sk-line);border-radius:var(--sk-radius-sm);background:#fff;font-size:14.5px;color:var(--sk-ink-3)}
.sk-pager a:hover,.sk-pager a:focus-visible{border-color:var(--sk-accent);color:var(--sk-accent)}
.sk-pager .current{background:var(--sk-navy);border-color:var(--sk-navy);color:#fff;font-weight:700}
.sk-pager .dots{border-color:transparent;background:transparent}

/* ---- Pagination model "Muat lebih banyak" (sk_catalog_pagination = muat) ----
   Tombolnya <a rel="next"> ke /page/N+1/; initCatalogAjax() mencegatnya dan
   menambahkan kartu ke grid. Spinner hanya selama kelas is-busy terpasang. */
.sk-muat{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;text-align:center}
.sk-muat__text{margin:0;font-size:14px;color:var(--sk-muted)}
.sk-muat__bar{display:block;width:100%;max-width:240px;height:4px;border-radius:2px;background:var(--sk-line);overflow:hidden}
.sk-muat__fill{display:block;height:100%;max-width:100%;background:var(--sk-navy);border-radius:inherit}
.sk-muat__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:240px;max-width:100%;min-height:48px;padding:0 20px;border:1.5px solid var(--sk-navy);border-radius:var(--sk-radius-sm);background:#fff;font-size:15px;font-weight:700;color:var(--sk-navy);transition:background .15s,color .15s}
.sk-muat__btn:hover,.sk-muat__btn:focus-visible{background:var(--sk-navy);color:#fff}
.sk-muat__btn:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-muat__btn.is-busy{cursor:progress}
.sk-muat__btn.is-busy::before{content:"";flex-shrink:0;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sk-spin .7s linear infinite}
.sk-muat__done{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--sk-muted)}
@media (prefers-reduced-motion:reduce){
  .sk-muat__btn.is-busy::before{animation:none}
}

/* ---- Sheet filter (<1024px) ----
   Pembungkusnya <details>, jadi tanpa JavaScript atribut `open` saja sudah
   menampilkan panel di posisi akhirnya (browser menyembunyikan isi <details>
   yang tertutup). Begitu initFilterSheet() jalan ia menandai `is-js`, dan sejak
   itu transform diserahkan ke `is-open` supaya panel bisa dianimasikan masuk
   maupun keluar - `open` baru dilepas sesudah transisi tutup selesai.
   z-index 85: di atas bar bawah (80) dan sheet keranjang (75), tetap di bawah
   overlay drawer (90) dan modal penawaran (120). */
.sk-filter-sheet{display:none}
.sk-fsheet{position:fixed;inset:0;z-index:85}
.sk-fsheet__scrim{position:absolute;inset:0;background:rgba(11,36,55,.45)}
/* Tanpa JS tidak ada yang menutup lewat klik dan scroll body tidak dikunci,
   jadi scrim hanya akan menggelapkan halaman tanpa jalan keluar. */
.sk-filter-sheet:not(.is-js) .sk-fsheet__scrim{display:none}
.sk-filter-sheet.is-js .sk-fsheet__scrim{opacity:0;transition:opacity .22s ease}
.sk-filter-sheet.is-js.is-open .sk-fsheet__scrim{opacity:1}
.sk-fsheet__panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:88vh;background:#fff;border-radius:var(--sk-radius) var(--sk-radius) 0 0}
.sk-filter-sheet.is-js .sk-fsheet__panel{transform:translateY(100%);transition:transform .24s ease}
.sk-filter-sheet.is-js.is-open .sk-fsheet__panel{transform:translateY(0)}
.sk-fsheet__panel:focus{outline:none}
.sk-fsheet__panel:focus-visible{outline:3px solid var(--sk-accent);outline-offset:-3px}
.sk-fsheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:14px 18px;border-bottom:1px solid var(--sk-line)}
.sk-fsheet__title{margin:0;font-size:17px}
.sk-fsheet__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--sk-muted);cursor:pointer;border-radius:var(--sk-radius-sm)}
.sk-fsheet__close:hover{color:var(--sk-accent)}
/* Formulir sendiri yang bergulir; kakinya menempel di dasar panel. */
.sk-filter--sheet{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:none;border-radius:0;padding-bottom:0;-webkit-overflow-scrolling:touch}
.sk-filter--sheet .sk-filter__foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--sk-line);padding-bottom:16px;margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}

@media (max-width:1279px){
  .sk-arsip__stats{flex-wrap:wrap}
}
@media (max-width:1023px){
  /* Formulir filter sidebar lenyap (diwakili sheet), tapi asidenya TIDAK
     disembunyikan: kotak penawaran ada di dalamnya dan harus tetap hidup persis
     sekali di DOM. Asidenya dipindah ke bawah kolom produk lewat `order`,
     jaraknya 24px dari pagination lewat row-gap grid. */
  .sk-arsip__body{grid-template-columns:1fr;gap:24px}
  .sk-arsip__col{order:1}
  /* overflow-anchor: aside ada SEBELUM kolom di DOM tapi tampil di bawahnya.
     Scroll anchoring Chrome memilih jangkar menurut urutan DOM, jadi tanpa ini
     aside yang terlihat di bawah tombol Muat lebih banyak menjadi jangkar dan
     layar ikut turun setinggi kartu yang baru ditambahkan. */
  .sk-arsip__side{order:2;overflow-anchor:none}
  .sk-filter--sidebar{display:none}
  .sk-quote-box{margin-top:0}
  .sk-filter-sheet{display:block}
  /* Tombol Filter kiri, select mengisi sisa baris, hitungan turun ke baris
     bawah supaya tidak menyempitkan keduanya. */
  .sk-arsip__sort{order:2;flex:1 1 auto}
  .sk-arsip__count{order:3;flex:1 0 100%}
  .sk-arsip__sortlabel{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
  .sk-arsip__select{flex:1;height:44px}
  .sk-arsip__head{padding:20px}
  .sk-arsip__title{font-size:26px}
  /* Statistik turun ke bawah deskripsi, bukan berdampingan dengannya. */
  .sk-arsip__stats{flex-basis:100%}
  .sk-arsip__stat{flex:1 1 0;min-width:0}
}
/* Strip sub-kategori: 4 item per layar di tablet dan mobile. Batasnya 1024/768
   inklusif (CODE.md), bukan 1023/767 seperti tata letak arsip lainnya. */
@media (max-width:1024px){
  .sk-subcat__item{flex:0 0 calc((100% - 48px) / 4)}
}
@media (max-width:768px){
  .sk-subcat__track{gap:10px}
  .sk-subcat__item{flex:0 0 calc((100% - 30px) / 4)}
}
@media (max-width:767px){
  .sk-arsip__title{font-size:23px}
  .sk-pager{justify-content:center}
}

/* ---- Dipindah dari critical.css (Tugas 7): elemen khusus katalog di media global. ---- */
@media (prefers-reduced-motion:reduce){.sk-fsheet__panel,.sk-fsheet__scrim{transition:none}}
@media print{.sk-fsheet,.sk-arsip__side{display:none}}