/* =====================================================================
   PIAU KEE - Product Catalogue page styles
   All rules scoped under #pkcat so nothing collides with the theme's
   global CSS. Brand palette + Instrument Sans (global theme font).
   ===================================================================== */
#pkcat{
  --pk-bg:#ffffff; --pk-alt:#f5f5f7; --pk-card:#ffffff;
  --pk-ink:#051026; --pk-mut:#5b6b76; --pk-line:#e6e8ec;
  --pk-accent:#d21f26; --pk-blue:#183962; --pk-gold:#d3bf5d; --pk-dark:#041F38;
  --pk-font:'Instrument Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--pk-bg); color:var(--pk-ink);
  font-family:var(--pk-font); font-size:18px; line-height:1.5;
}
#pkcat *,#pkcat *:before,#pkcat *:after{box-sizing:border-box}

/* header: uses the shared Home header styles as-is (transparent + gold line at the top, dark translucent blur once scrolled) - no page-specific overrides */
/* single product view has no hero: keep a solid header behind the menu at the top (sticky state = the shared Home style, untouched) */
body.pk-products.pk-detail .nav:not(.is-scrolled){background:#041F38}
/* the hero starts at the very top (it clears the fixed header itself); the product detail view keeps the header offset */
body.pk-products #viewProd{padding-top:152px}
@media (max-width:900px){body.pk-products #viewProd{padding-top:112px}}
#pkcat a{color:inherit;text-decoration:none}
#pkcat button,#pkcat select,#pkcat input{font:inherit;color:inherit}
#pkcat [hidden]{display:none!important}

/* layout shell */
#pkcat .wrap{max-width:1280px;margin:0 auto;padding:40px clamp(16px,4vw,48px) 80px}
/* hero (animated blue background from css/hero-bg.css; same look as the News hero) */
#pkcat .phero{text-align:center;color:#fff;background:linear-gradient(180deg,#0e5aa7 0%,#0a3f86 50%,#072a5c 100%)}
#pkcat .phero h1{margin:0;color:#fff;font-weight:600;line-height:1.05;font-size:clamp(34px,5vw,64px)}
#pkcat .phero__rule{display:block;width:72px;height:3px;background:var(--pk-gold);margin:17.5px auto}
#pkcat .phero p{max-width:680px;margin:0 auto;font-size:18px;line-height:1.6;color:rgba(255,255,255,.9)}

/* search */
#pkcat .search{position:relative;margin:30px 0 6px;max-width:720px}
#pkcat .search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--pk-blue);stroke-width:2}
#pkcat .search input{width:100%;padding:16px 46px 16px 48px;border:1.5px solid var(--pk-line);border-radius:12px;background:var(--pk-card);font-size:16px;color:var(--pk-ink)}
#pkcat .search input::placeholder{color:#9aa6ad}
#pkcat .search input:focus,#pkcat select:focus,#pkcat button:focus-visible,#pkcat a:focus-visible{outline:2px solid var(--pk-accent);outline-offset:2px}
#pkcat .search .x{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:24px;color:var(--pk-mut);cursor:pointer;width:34px;height:34px;line-height:1}
#pkcat .scope{margin:8px 2px 0;font-size:14px;color:var(--pk-mut)}
#pkcat .link{background:none;border:0;color:var(--pk-accent);cursor:pointer;padding:0;text-decoration:underline;font-size:inherit;font-family:inherit}

/* two-column layout: filters + results */
#pkcat .layout{display:grid;grid-template-columns:272px 1fr;gap:40px;align-items:start;margin-top:24px}
#pkcat .side,#pkcat .results{min-width:0}
#pkcat .side{position:sticky;top:120px;max-height:calc(100vh - 140px);overflow-y:auto;padding-right:6px;scrollbar-width:thin}

/* cut filter */
#pkcat .cut{display:block;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--pk-line);font-size:14px;color:var(--pk-mut)}
#pkcat .cut .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#pkcat .cut .ch label{font-weight:600;color:var(--pk-ink);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
#pkcat .cut .ch .link{font-size:12px}
#pkcat .cut select{display:block;width:100%;padding:10px 12px;border:1.5px solid var(--pk-line);border-radius:8px;background:var(--pk-card);color:var(--pk-ink)}

/* category nav */
#pkcat .cats{display:flex;flex-direction:column;gap:2px}
#pkcat .cat,#pkcat .sub{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:9px;cursor:pointer;color:var(--pk-ink);font-family:inherit}
#pkcat .cat{padding:9px 13px;font-weight:600;font-size:15px}
#pkcat .cat:hover,#pkcat .sub:hover{background:rgba(24,57,98,.07)}
/* active category/subcategory: no red — a gold (#d3bf5d) underline on the label */
#pkcat .cat.on{background:none;color:var(--pk-ink)}
#pkcat .cat small,#pkcat .sub small{opacity:.65;font-size:12px;font-weight:500}
#pkcat .cat.on .lbl,#pkcat .sub.on .lbl{text-decoration:underline;text-decoration-color:var(--pk-gold);text-decoration-thickness:2px;text-underline-offset:3px}
#pkcat .subs{margin:2px 0 10px 14px;padding-left:12px;border-left:2px solid var(--pk-gold);display:flex;flex-direction:column}
#pkcat .sub{padding:6px 11px;font-size:14px;color:var(--pk-mut)}
#pkcat .sub.on{color:var(--pk-ink);font-weight:600;background:none}
#pkcat .side>.link{display:block;margin-top:14px}

/* results bar */
#pkcat .bar{display:flex;align-items:center;gap:18px;margin:0 0 18px;flex-wrap:wrap;min-height:34px}
#pkcat .bar #count{margin:0 auto 0 0;color:var(--pk-mut);font-size:15px}
#pkcat .bar #count:empty{display:none}

/* product grid + cards */
#pkcat .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#pkcat .card{background:var(--pk-card);border:0;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:box-shadow .18s,transform .18s}
#pkcat .card .ph{border-radius:14px}
#pkcat .card:hover{box-shadow:0 10px 26px rgba(5,16,38,.10);transform:translateY(-2px)}
#pkcat .ph{aspect-ratio:4/3;background:var(--pk-alt);color:var(--pk-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;font-size:12px;overflow:hidden}
#pkcat .ph img{width:100%;height:100%;object-fit:contain}
#pkcat .ph svg{width:44%;max-width:84px;fill:none;stroke:var(--pk-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
#pkcat .cb{padding:16px;display:flex;flex-direction:column;gap:5px;flex:1}
#pkcat .cb h3{margin:0;font-size:18px;font-weight:600;line-height:1.3;color:var(--pk-ink)}
#pkcat .cb .zh{margin:0;color:var(--pk-mut);font-size:14px}
#pkcat .lab{align-self:flex-start;margin-top:4px;padding:2px 10px;border:1px solid var(--pk-gold);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--pk-blue);background:rgba(211,191,94,.12)}
#pkcat .vd{margin-top:auto;align-self:flex-start;padding:10px 0 0;background:none;border:0;color:var(--pk-accent);font-weight:600;font-size:14px;cursor:pointer}

/* empty state */
#pkcat .empty{text-align:center;padding:56px 16px;border:1px dashed var(--pk-line);border-radius:14px;color:var(--pk-mut)}
#pkcat .empty .btn{margin:14px 6px 0}

/* buttons */
#pkcat .btn{display:inline-block;background:var(--pk-accent);color:#fff;border:1.5px solid var(--pk-accent);border-radius:999px;padding:12px 26px;cursor:pointer;font-weight:600;font-size:15px;font-family:inherit;transition:background .25s,color .25s,border-color .25s}
#pkcat .btn:hover{background:#b31a20;border-color:#b31a20}
#pkcat .btn.ghost{background:transparent;color:var(--pk-ink);border-color:var(--pk-line)}
#pkcat .btn.ghost:hover{border-color:var(--pk-blue);color:var(--pk-blue)}
/* sidebar "Enquire more for other products" button: hover fills red #d21f26, white text */
#pkcat .side-nl .enq-other:hover{background:#d21f26;border-color:#d21f26;color:#fff}

/* enquiry blocks (links are placeholders until a destination is set) */
#pkcat .nl{padding:16px;border:1px dashed var(--pk-line);border-radius:12px;font-size:14px;color:var(--pk-mut)}
#pkcat .nl p{margin:0 0 12px}
#pkcat .nl .btn{display:block;text-align:center;padding:10px 14px;font-size:14px}
#pkcat .side-nl{margin-top:18px;background:#183962;border-color:#183962}
#pkcat .side-nl p{color:#fff}
#pkcat .side-nl .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
#pkcat .acts{display:flex;flex-direction:column;gap:12px;max-width:360px;margin-top:28px}
#pkcat .acts .btn{text-align:center}

/* product detail view */
#pkcat .crumb{font-size:14px;color:var(--pk-mut);margin:4px 0 26px}
#pkcat .crumb a{color:var(--pk-accent)}
#pkcat .pv{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:48px;align-items:start}
#pkcat .pvimg .ph{aspect-ratio:1/1;border-radius:16px}
#pkcat .pvinfo h1{font-size:clamp(28px,3.6vw,42px);font-weight:600;line-height:1.15;margin:0 0 6px;color:var(--pk-ink)}
#pkcat .pvinfo .zh{margin:0 0 20px;color:var(--pk-mut);font-size:19px}
#pkcat .pvmeta{margin:0 0 26px;border-top:1px solid var(--pk-line);padding-top:18px}
#pkcat .pvmeta p{margin:0 0 8px;color:var(--pk-mut);font-size:16px}
#pkcat .pvmeta b{color:var(--pk-ink);font-weight:600}
#pkcat .back{display:inline-block;margin-top:28px;color:var(--pk-accent);font-weight:600}

/* related */
#pkcat .related{margin-top:72px;border-top:1px solid var(--pk-line);padding-top:40px}
#pkcat .related .eyebrow{color:var(--pk-blue);font-size:15px;margin:0 0 6px;font-weight:600}
#pkcat .related h2{margin:0 0 28px;font-size:clamp(26px,3.2vw,40px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--pk-ink)}
#pkcat .relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
#pkcat .rel{display:block;color:inherit;text-decoration:none}
#pkcat .relimg{position:relative;overflow:hidden;border-radius:12px;background:var(--pk-alt);aspect-ratio:1/1}
#pkcat .relimg .ph{aspect-ratio:1/1;border-radius:12px}
#pkcat .rel h3{margin:14px 0 0;font-size:16px;font-weight:600}
#pkcat .rel .zh{margin:2px 0 0;font-size:13px;color:var(--pk-mut)}
#pkcat .rel:hover h3{color:var(--pk-accent)}

/* toast */
#pkcat .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--pk-ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;z-index:2000}

/* responsive */
@media (max-width:1100px){#pkcat .grid{grid-template-columns:repeat(2,1fr)}#pkcat .relgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  #pkcat .layout{grid-template-columns:minmax(0,1fr);gap:14px}
  #pkcat .side{position:static;max-height:none;overflow:visible;padding:0}
  #pkcat .cut{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:0;border:0}
  #pkcat .cut .ch{margin:0}
  #pkcat .cut select{display:inline-block;width:auto}
  #pkcat .cats{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;align-items:center}
  #pkcat .cat{width:auto;flex:0 0 auto;white-space:nowrap;border:1px solid var(--pk-line);background:var(--pk-card);gap:6px}
  #pkcat .subs{display:flex;flex-direction:row;margin:0;padding:0;border:0;overflow-x:auto;gap:8px}
  #pkcat .sub{width:auto;flex:0 0 auto;white-space:nowrap;border:1px dashed var(--pk-gold)}
}
@media (max-width:720px){
  #pkcat .wrap{padding:28px 16px 64px}
  #pkcat .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  #pkcat .cb{padding:12px}
  #pkcat .cb h3{font-size:16px}
  #pkcat .pv{grid-template-columns:minmax(0,1fr);gap:24px}
  #pkcat .pvimg .ph{aspect-ratio:4/3}
  #pkcat .relgrid{grid-template-columns:repeat(2,1fr);gap:14px}
}