/* Category listing page redesign (template/category-page.php).
   Served via base_url() (app server), not the CDN, so it deploys with the code.
   Everything is scoped under .cat-page; the global header and footer are untouched. */

.cat-page {
  --cp-navy: #0D1B36; --cp-blue: #2563EB; --cp-blue-soft: #F2F6FE; --cp-yellow: #F9C909;
  --cp-gray: #5F6973; --cp-gray-2: #98A2B3; --cp-text: #344054; --cp-line: #EAECF0; --cp-line-2: #C3C9D1;
  --cp-bg: #F7F8FA; --cp-bg-2: #F2F4F7; --cp-muted-on-navy: #B6C2D9;
  --cp-green: #15803D; --cp-green-soft: #E8F7EE;
  --cp-gold-text: #8A6A00; --cp-gold-soft: #FEF3C7; --cp-gold-line: #F5D98A;
  --cp-silver-text: #475467; --cp-silver-soft: #EEF1F4;
  background: var(--cp-bg);
  color: var(--cp-navy);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Neutralise the global stylesheet inside the page */
.cat-page *, .cat-page *::before, .cat-page *::after { box-sizing: border-box; }
.cat-page h1, .cat-page h2, .cat-page h3, .cat-page p { margin: 0; padding: 0; font-family: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.cat-page a { color: inherit; text-decoration: none; }
.cat-page a:hover { text-decoration: none; }
.cat-page button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
.cat-page input, .cat-page select { font-family: inherit; }
.cat-page .cp-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-page .cp-container { max-width: 1440px; margin: 0 auto; padding: 0 64px; }

/* Breadcrumb */
.cat-page .cp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--cp-gray); padding: 20px 0 12px; }
.cat-page .cp-crumbs .cp-icon { width: 14px; height: 14px; color: var(--cp-gray-2); }
.cat-page .cp-crumbs a:hover { color: var(--cp-blue); }
.cat-page .cp-crumbs span:last-child { color: var(--cp-navy); font-weight: 500; }

/* Banner */
.cat-page .cp-banner { background: var(--cp-navy); border-radius: 20px; padding: 32px 40px; color: #fff; }
.cat-page .cp-pill-yellow { display: inline-block; background: var(--cp-yellow); color: var(--cp-navy); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.cat-page .cp-banner h1 { font-size: 32px; font-weight: 700; margin: 10px 0 8px; line-height: 1.25; color: #fff; }
.cat-page .cp-banner p { color: var(--cp-muted-on-navy); font-size: 15px; max-width: 820px; }
.cat-page .cp-points { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; font-size: 13px; font-weight: 500; }
.cat-page .cp-points span { display: flex; align-items: center; gap: 6px; }
.cat-page .cp-points .cp-icon { color: var(--cp-yellow); }

/* Subcategories (under banner) */
.cat-page .cp-subcats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 24px; }
.cat-page .cp-subcat { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--cp-line); border-radius: 16px; padding: 16px 20px; transition: border-color .15s, box-shadow .15s; }
.cat-page .cp-subcat:hover { border-color: var(--cp-blue); box-shadow: 0 4px 16px rgba(37,99,235,.08); }
.cat-page .cp-subcat.is-selected { border-color: var(--cp-blue); background: var(--cp-blue-soft); }
.cat-page .cp-subcat.is-selected .cp-ic { background: var(--cp-blue); color: #fff; }
.cat-page .cp-subcat .cp-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--cp-blue-soft); color: var(--cp-blue); display: grid; place-items: center; flex: none; }
.cat-page .cp-subcat .cp-ic .cp-icon { width: 24px; height: 24px; }
.cat-page .cp-subcat h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.cat-page .cp-subcat p { font-size: 12px; color: var(--cp-gray); }
.cat-page .cp-subcat .cp-go { margin-left: auto; color: var(--cp-blue); width: 20px; height: 20px; }
.cat-page .cp-banner + .cp-layout { margin-top: 24px; }

/* Layout */
.cat-page .cp-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; padding-bottom: 48px; }

/* Filters */
.cat-page .cp-filters { display: flex; flex-direction: column; gap: 16px; }
.cat-page .cp-filters-title { display: flex; justify-content: space-between; align-items: center; }
.cat-page .cp-filters-title h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.cat-page .cp-link { color: var(--cp-blue); font-size: 13px; font-weight: 500; }
.cat-page .cp-fcard { background: #fff; border: 1px solid var(--cp-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.cat-page .cp-fcard h3 { font-size: 14px; font-weight: 600; }
.cat-page .cp-checks { display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; }
.cat-page .cp-input { display: flex; align-items: center; gap: 8px; height: 40px; border: 1px solid var(--cp-line-2); border-radius: 8px; padding: 0 12px; font-size: 13px; color: var(--cp-gray-2); background: #fff; margin: 0; }
.cat-page .cp-input input { border: 0; outline: 0; font: inherit; width: 100%; min-width: 0; height: 100%; color: var(--cp-navy); background: transparent; padding: 0; box-shadow: none; }
.cat-page .cp-check { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: var(--cp-text); cursor: pointer; margin: 0; }
.cat-page .cp-check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--cp-line-2); border-radius: 5px; background: #fff; display: grid; place-items: center; flex: none; cursor: pointer; position: static; opacity: 1; }
.cat-page .cp-check input:checked { background: var(--cp-blue); border-color: var(--cp-blue); }
.cat-page .cp-check input:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.cat-page .cp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-page .cp-btn-soft { height: 38px; border-radius: 8px; background: var(--cp-blue-soft); color: var(--cp-blue); font-weight: 600; font-size: 13px; }
.cat-page .cp-rfq { background: var(--cp-navy); color: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cat-page .cp-rfq h3 { font-size: 16px; font-weight: 600; color: #fff; }
.cat-page .cp-rfq p { font-size: 13px; color: var(--cp-muted-on-navy); }
.cat-page .cp-btn { height: 40px; padding: 0 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1; transition: background .15s, border-color .15s; }
.cat-page .cp-btn-primary { background: var(--cp-blue); color: #fff; }
.cat-page .cp-btn-primary:hover { background: #1D4FD8; color: #fff; }
.cat-page .cp-btn-yellow { background: var(--cp-yellow); color: var(--cp-navy); }
.cat-page .cp-btn-yellow:hover { background: #E8BA00; color: var(--cp-navy); }
.cat-page .cp-btn-outline { background: #fff; color: var(--cp-navy); border: 1px solid var(--cp-line-2); }
.cat-page .cp-btn-outline:hover { border-color: var(--cp-navy); color: var(--cp-navy); }
.cat-page .cp-btn[disabled] { opacity: .7; cursor: default; }

/* Toolbar */
.cat-page .cp-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cat-page .cp-toolbar { background: #fff; border: 1px solid var(--cp-line); border-radius: 12px; padding: 12px 16px 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-page .cp-toolbar .cp-t { font-size: 14px; font-weight: 600; }
.cat-page .cp-toolbar .cp-t small { font-size: 13px; font-weight: 400; color: var(--cp-gray); }
.cat-page .cp-toolbar .cp-r { display: flex; align-items: center; gap: 10px; }
.cat-page .cp-sort { position: relative; height: 36px; display: flex; align-items: center; border: 1px solid var(--cp-line-2); border-radius: 8px; background: #fff; margin: 0; }
.cat-page .cp-sort select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; height: 100%; padding: 0 34px 0 12px; font-size: 13px; font-weight: 500; color: var(--cp-navy); cursor: pointer; }
.cat-page .cp-sort .cp-icon { position: absolute; right: 12px; pointer-events: none; }
.cat-page .cp-viewtoggle { display: flex; gap: 4px; padding: 4px; background: var(--cp-bg-2); border-radius: 8px; }
.cat-page .cp-viewtoggle button { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--cp-gray-2); }
.cat-page .cp-viewtoggle button.on { background: #fff; color: var(--cp-blue); }

/* Listing row */
.cat-page .cp-listings { display: flex; flex-direction: column; gap: 16px; }
.cat-page .cp-row { background: #fff; border: 1px solid var(--cp-line); border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 168px 1fr 256px; grid-template-areas: "img det sup" "img act sup"; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 12px; align-items: start; }
.cat-page .cp-row .cp-img { grid-area: img; }
.cat-page .cp-row .cp-details { grid-area: det; }
.cat-page .cp-row .cp-supplier { grid-area: sup; }
.cat-page .cp-row .cp-actions { grid-area: act; }
.cat-page .cp-row.cp-gold { border-color: var(--cp-gold-line); }
.cat-page .cp-row .cp-img { width: 168px; height: 168px; border-radius: 12px; background: var(--cp-bg-2); display: grid; place-items: center; overflow: hidden; }
.cat-page .cp-row .cp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-page .cp-details { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cat-page .cp-cat { font-size: 11px; font-weight: 600; color: var(--cp-blue); letter-spacing: .06em; }
.cat-page .cp-title { font-size: 18px; font-weight: 600; line-height: 1.35; }
.cat-page .cp-title a:hover { color: var(--cp-blue); }
.cat-page .cp-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-page .cp-spec { display: flex; gap: 6px; align-items: center; background: var(--cp-bg); border: 1px solid #EEF1F4; border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--cp-gray); }
.cat-page .cp-spec b { color: var(--cp-navy); font-weight: 600; }
.cat-page .cp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-gray); }
.cat-page .cp-price b { font-size: 14px; color: var(--cp-navy); font-weight: 600; }
.cat-page .cp-price s { color: var(--cp-gray-2); }
.cat-page .cp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.cat-page .cp-supplier { background: var(--cp-bg); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cat-page .cp-supplier .cp-lbl { font-size: 11px; font-weight: 500; color: var(--cp-gray-2); }
.cat-page .cp-supplier .cp-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.cat-page .cp-supplier .cp-name:hover { color: var(--cp-blue); }
.cat-page .cp-hq { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-gray); }
.cat-page .cp-hq b { color: var(--cp-navy); font-weight: 600; }
.cat-page .cp-flag { width: 21px !important; height: 14px !important; border-radius: 2px; box-shadow: 0 0 0 .5px #D0D5DD; flex: none; margin: 0; }
.cat-page .cp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-page .cp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cat-page .cp-badge .cp-icon { width: 14px; height: 14px; }
.cat-page .cp-badge-gold { background: var(--cp-gold-soft); color: var(--cp-gold-text); }
.cat-page .cp-badge-silver { background: var(--cp-silver-soft); color: var(--cp-silver-text); }
.cat-page .cp-badge-verified { background: var(--cp-green-soft); color: var(--cp-green); }
.cat-page .cp-badge-quick { background: var(--cp-blue-soft); color: var(--cp-blue); }
.cat-page .cp-empty { text-align: center; color: var(--cp-gray); }

/* Grid view (toolbar toggle) */
.cat-page .cp-listings.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-page .cp-listings.is-grid .cp-row { grid-template-columns: 1fr; grid-template-areas: "img" "det" "sup" "act"; grid-template-rows: none; padding: 16px; }
.cat-page .cp-listings.is-grid .cp-row .cp-img { width: 100%; height: 180px; }
.cat-page .cp-listings.is-grid .cp-title { font-size: 15px; }
.cat-page .cp-listings.is-grid .cp-actions { display: grid; grid-template-columns: 1fr 1fr; }
.cat-page .cp-listings.is-grid .cp-actions .cp-btn-primary { grid-column: 1 / -1; }
.cat-page .cp-listings.is-grid .cp-empty { grid-column: 1 / -1; }

/* Pagination */
.cat-page .cp-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.cat-page .cp-pagination a, .cat-page .cp-pagination span { min-width: 40px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--cp-line-2); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.cat-page .cp-pagination span { border-color: transparent; background: transparent; }
.cat-page .cp-pagination a:hover { border-color: var(--cp-navy); }
.cat-page .cp-pagination a.on { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }

/* Mobile-only elements (hidden on desktop) */
.cat-page .cp-filter-btn { display: none; height: 36px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 8px; font-size: 13px; font-weight: 600; background: #fff; color: var(--cp-navy); }
.cat-page .cp-filter-btn .cp-count { background: var(--cp-blue); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
.cat-page .cp-m-block { display: none; }
.cat-page .cp-sheet-head, .cat-page .cp-sheet-foot { display: none; }
.cat-page .cp-overlay { position: fixed; inset: 0; background: rgba(13,27,54,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1000; }
.cat-page .cp-overlay.open { opacity: 1; pointer-events: auto; }
.cat-page .cp-icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--cp-line-2); background: #fff; display: grid; place-items: center; color: var(--cp-navy); flex: none; }

/* RTL */
html[dir="rtl"] .cat-page .cp-subcat .cp-go { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
html[dir="rtl"] .cat-page .cp-crumbs .cp-icon, html[dir="rtl"] .cat-page .cp-btn .cp-icon { transform: scaleX(-1); }
html[dir="rtl"] .cat-page .cp-sort select { padding: 0 12px 0 34px; }
html[dir="rtl"] .cat-page .cp-sort .cp-icon { right: auto; left: 12px; }

/* Responsive */
@media (max-width: 1100px) {
  .cat-page .cp-row { grid-template-columns: 140px 1fr; grid-template-areas: "img det" "img act" "sup sup"; }
  .cat-page .cp-row .cp-img { width: 140px; height: 140px; }
  .cat-page .cp-listings.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cat-page .cp-container { padding: 0 16px; }
  .cat-page .cp-filter-btn { display: inline-flex; }
  .cat-page .cp-m-block { display: flex; }
  .cat-page .cp-layout { grid-template-columns: 1fr; }

  /* Subcategories become a swipe row */
  .cat-page .cp-subcats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 12px -16px 20px; padding: 0 16px; scrollbar-width: none; }
  .cat-page .cp-subcats::-webkit-scrollbar { display: none; }
  .cat-page .cp-subcat { flex: 0 0 82%; scroll-snap-align: start; }

  /* Filters become a bottom sheet */
  .cat-page .cp-filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 86vh; overflow: auto; background: var(--cp-bg); border-radius: 20px 20px 0 0; padding: 0 16px; transform: translateY(105%); visibility: hidden; transition: transform .25s ease-out, visibility 0s .25s; gap: 12px; }
  .cat-page .cp-filters.open { transform: none; visibility: visible; transition: transform .25s ease-out; }
  .cat-page .cp-filters-title { display: none; }
  .cat-page .cp-sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--cp-bg); padding: 14px 0 10px; z-index: 1; }
  .cat-page .cp-sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #D0D5DD; }
  .cat-page .cp-sheet-head h2 { font-size: 17px; font-weight: 600; }
  .cat-page .cp-sheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; position: sticky; bottom: 0; background: var(--cp-bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .cat-page .cp-sheet-foot .cp-btn { height: 48px; font-size: 14px; }
  .cat-page .cp-filters .cp-rfq { display: none; }
  body.cp-lock { overflow: hidden; }
}
@media (max-width: 600px) {
  .cat-page { font-size: 15px; }
  .cat-page .cp-crumbs { padding: 14px 0 10px; font-size: 12px; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; }
  .cat-page .cp-banner { padding: 22px 18px; border-radius: 16px; }
  .cat-page .cp-banner h1 { font-size: 23px; }
  .cat-page .cp-banner p { font-size: 13px; }
  .cat-page .cp-points { gap: 10px 16px; font-size: 12px; }

  /* Toolbar: sticky, two equal buttons */
  .cat-page .cp-toolbar { padding: 8px; position: sticky; top: 0; z-index: 20; border-radius: 12px; box-shadow: 0 4px 12px rgba(13,27,54,.06); }
  .cat-page .cp-toolbar .cp-t { display: none; }
  .cat-page .cp-toolbar .cp-r { width: 100%; gap: 8px; }
  .cat-page .cp-toolbar .cp-r > .cp-filter-btn, .cat-page .cp-toolbar .cp-r > .cp-sort { flex: 1; justify-content: center; height: 42px; }
  .cat-page .cp-sort select { width: 100%; padding: 0 30px 0 10px; font-size: 13px; }
  .cat-page .cp-viewtoggle { display: none; }

  /* Compact listing card (grid view is desktop-only) */
  .cat-page .cp-listings.is-grid { display: flex; }
  .cat-page .cp-row, .cat-page .cp-listings.is-grid .cp-row { grid-template-columns: 96px 1fr; grid-template-areas: "img det" "sup sup" "act act"; gap: 12px; padding: 14px; border-radius: 14px; }
  .cat-page .cp-row .cp-img, .cat-page .cp-listings.is-grid .cp-row .cp-img { width: 96px; height: 96px; border-radius: 10px; }
  .cat-page .cp-title { font-size: 15px; }
  .cat-page .cp-cat { font-size: 10px; }
  .cat-page .cp-details { gap: 6px; }
  .cat-page .cp-specs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .cat-page .cp-specs::-webkit-scrollbar { display: none; }
  .cat-page .cp-spec { padding: 4px 8px; font-size: 11px; white-space: nowrap; flex: none; }
  .cat-page .cp-price { font-size: 0; }
  .cat-page .cp-price b { font-size: 13px; }
  .cat-page .cp-supplier { padding: 12px; gap: 8px; border-radius: 10px; }
  .cat-page .cp-supplier .cp-lbl { display: none; }
  .cat-page .cp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 0; }
  .cat-page .cp-actions .cp-btn-primary { grid-column: 1 / -1; height: 46px; font-size: 14px; }
  .cat-page .cp-actions .cp-btn { height: 44px; }

  .cat-page .cp-pagination a { min-width: 44px; height: 44px; }

  /* 16px inputs stop iPhone auto-zoom */
  .cat-page input, .cat-page select { font-size: 16px !important; }
}