/* ============================================================
   Katalog Produk BUMDes + Halaman Detail Produk
   Dipakai di /produk-bumdes (index) & /produk-bumdes/{slug} (show).
   Tema: di atas background foto portal; kartu/sidebar putih (glass).
   ============================================================ */

.cat-crumb{ font-size:13px; color:#d7e4f7; margin-bottom:12px; }
.cat-crumb a{ color:#fff; font-weight:600; }
.cat-head h1{ font-size:30px; font-weight:900; color:#fff; margin:0 0 8px; line-height:1.15; text-shadow:0 2px 16px rgba(0,0,0,.55); }
.cat-head p{ color:#e7eefb; font-size:15px; max-width:700px; margin:0 0 24px; line-height:1.6; text-shadow:0 1px 8px rgba(0,0,0,.45); }

.card-light{ background:#fff; border:1px solid #e3e9f4; border-radius:16px; box-shadow:0 6px 24px rgba(16,32,64,.07); }

.cat-grid{ display:grid; grid-template-columns:282px 1fr; gap:24px; align-items:start; }
@media(max-width:900px){ .cat-grid{ grid-template-columns:1fr; } }

/* Sidebar filter */
.cat-filter{ padding:20px 22px; position:sticky; top:96px; }
.cat-filter .fh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cat-filter h3{ margin:0; font-size:16px; font-weight:800; color:#1b2740; }
.cat-filter .fh svg{ width:20px; height:20px; color:#64727f; }
.cat-field{ margin-bottom:16px; }
.cat-field > label{ display:block; font-size:11.5px; font-weight:700; color:#64727f; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.cat-field select{ width:100%; border:1px solid #e3e9f4; border-radius:10px; padding:11px 12px; font-family:inherit; font-size:14px; background:#fff; color:#1b2740; }
.cat-field select:disabled{ background:#f3f5f9; color:#9aa6b2; cursor:not-allowed; }
.opt-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:14px; color:#33414f; cursor:pointer; }
.opt-row:hover{ background:#f6f9fe; }
.opt-row.active{ background:#eaf2fb; font-weight:700; color:#0d3b8a; }
.opt-row input{ display:none; }
.opt-box{ width:18px; height:18px; border:2px solid #cdd7e6; border-radius:5px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.opt-row.active .opt-box{ background:#1e5fc4; border-color:#1e5fc4; }
.opt-box svg{ width:12px; height:12px; opacity:0; }
.opt-row.active .opt-box svg{ opacity:1; }
.btn-reset{ display:block; text-align:center; width:100%; border:1px solid #cdd7e6; border-radius:10px; padding:11px; font-weight:700; color:#1e5fc4; text-decoration:none; margin-top:8px; background:#fff; }
.btn-reset:hover{ background:#eaf2fb; }

/* Top bar */
.cat-top{ display:flex; gap:14px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.cat-search{ position:relative; flex:1; min-width:220px; }
.cat-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#9aa6b2; }
.cat-search input{ width:100%; border:1px solid #e3e9f4; border-radius:999px; padding:12px 18px 12px 44px; font-family:inherit; font-size:14px; background:#fff; }
.cat-search input:focus{ outline:none; border-color:#1e5fc4; box-shadow:0 0 0 3px rgba(30,95,196,.18); }
.cat-sort{ display:flex; align-items:center; gap:8px; font-size:13px; color:#e7eefb; white-space:nowrap; }
.cat-sort select{ border:1px solid #e3e9f4; border-radius:10px; padding:9px 12px; font-family:inherit; font-size:13.5px; background:#fff; color:#1b2740; }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.cat-chip{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.92); color:#0d3b8a; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; }
.cat-chip a{ color:#0d3b8a; font-weight:900; text-decoration:none; line-height:1; }

/* Product cards grid */
.cat-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:1150px){ .cat-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cat-cards{ grid-template-columns:1fr; } }
.pc{ background:#fff; border:1px solid #e3e9f4; border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(16,32,64,.07); display:flex; flex-direction:column; transition:transform .15s,box-shadow .15s; }
.pc:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,32,64,.14); }
.pc-img{ position:relative; height:155px; background:#0a2d6b center/cover no-repeat; display:block; }
.pc-badge{ position:absolute; top:11px; left:11px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.2); }
.pc-badge.feat{ background:#d97706; }
.pc-cat{ position:absolute; top:11px; right:11px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:700; background:rgba(255,255,255,.92); color:#0d3b8a; }
.pc-body{ padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.pc-title{ margin:0 0 4px; font-size:15.5px; font-weight:800; color:#1b2740; line-height:1.25; }
.pc-loc{ display:flex; align-items:center; gap:5px; color:#64727f; font-size:12.5px; }
.pc-loc svg{ width:13px; height:13px; flex:none; color:#1e5fc4; }
.pc-price{ margin:10px 0 12px; font-size:18px; font-weight:900; color:#0d3b8a; }
.pc-price small{ font-size:12px; font-weight:600; color:#9aa6b2; }
.pc-price.contact{ font-size:14px; color:#64727f; font-weight:700; }
.pc-actions{ margin-top:auto; display:flex; gap:8px; }
.pc-wa{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#25d366; color:#fff; border-radius:10px; padding:9px 12px; font-weight:700; font-size:13px; text-decoration:none; }
.pc-wa svg{ width:16px; height:16px; }
.pc-detail{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #cdd7e6; color:#1e5fc4; border-radius:10px; padding:9px 12px; font-weight:700; font-size:13px; text-decoration:none; }
.pc-detail:hover{ background:#eaf2fb; border-color:#1e5fc4; }

/* Footer + pagination */
.cat-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; flex-wrap:wrap; gap:12px; }
.cat-foot .info{ color:#e7eefb; font-size:13.5px; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.cat-pg{ display:flex; align-items:center; gap:6px; }
.cat-pg a, .cat-pg span{ min-width:34px; height:34px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e3e9f4; border-radius:9px; font-size:13.5px; font-weight:600; color:#33414f; text-decoration:none; background:#fff; }
.cat-pg a:hover{ border-color:#1e5fc4; color:#1e5fc4; }
.cat-pg .cur{ background:#0d3b8a; border-color:#0d3b8a; color:#fff; }
.cat-pg .dots{ border:0; background:none; color:#fff; }
.cat-pg .disabled{ opacity:.4; pointer-events:none; }
.cat-empty{ text-align:center; padding:54px 20px; color:#64727f; background:#fff; border:1px solid #e3e9f4; border-radius:16px; }

/* ===== Halaman Detail Produk ===== */
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media(max-width:860px){ .pd-grid{ grid-template-columns:1fr; } }
.pd-photo{ overflow:hidden; }
.pd-photo .main{ width:100%; height:380px; background:#0a2d6b center/cover no-repeat; }
.pd-info{ padding:26px 28px; }
.pd-info .pills{ display:flex; gap:8px; margin-bottom:12px; }
.pd-pill{ font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px; background:#eef3fc; color:#1e5fc4; }
.pd-pill.feat{ background:#d97706; color:#fff; }
.pd-info h1{ margin:0 0 6px; font-size:26px; font-weight:900; color:#1b2740; line-height:1.2; }
.pd-price{ font-size:28px; font-weight:900; color:#0d3b8a; margin:8px 0 4px; }
.pd-price small{ font-size:14px; font-weight:600; color:#9aa6b2; }
.pd-stock{ font-size:13px; color:#64727f; margin-bottom:16px; }
.pd-desc{ color:#33414f; line-height:1.8; font-size:14.5px; white-space:pre-line; border-top:1px solid #eef2f9; padding-top:16px; margin-top:8px; }
.pd-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 4px; }
.pd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:11px; padding:13px 22px; font-weight:700; font-size:14.5px; text-decoration:none; }
.pd-btn svg{ width:18px; height:18px; }
.pd-btn.wa{ background:#25d366; color:#fff; }
.pd-btn.mp{ background:#0d3b8a; color:#fff; }
.pd-seller{ margin-top:18px; padding:16px 18px; border:1px solid #e3e9f4; border-radius:12px; background:#f8fafd; }
.pd-seller .k{ font-size:11px; font-weight:700; color:#9aa6b2; text-transform:uppercase; letter-spacing:.4px; }
.pd-seller h3{ margin:3px 0 4px; font-size:16px; font-weight:800; }
.pd-seller h3 a{ color:#0d3b8a; text-decoration:none; }
.pd-seller .loc{ display:flex; align-items:center; gap:5px; color:#64727f; font-size:13px; }
.pd-seller .loc svg{ width:14px; height:14px; color:#1e5fc4; }
.pd-related h2{ color:#fff; font-size:20px; font-weight:900; margin:36px 0 16px; text-shadow:0 2px 12px rgba(0,0,0,.5); }