/* Catalogue page. Uses the .hm-* helpers from home.css plus the .cp-* classes below. */
.cp-hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:900px){.cp-hero-grid{grid-template-columns:1fr 1.05fr;gap:40px}}
.cp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cp-hero-copy h1{font-size:clamp(28px,3.8vw,44px);line-height:1.1;font-weight:900;color:var(--hm-navy);letter-spacing:-.01em}
.cp-hero-copy p{font-size:15px;line-height:1.65;color:#3d4a6b;max-width:30rem}
.cp-art{position:relative;padding-bottom:6%}
.cp-art .base{display:block;width:76%;height:auto;mix-blend-mode:multiply}
.cp-art .app{position:absolute;right:0;bottom:2%;width:31%;height:auto;filter:drop-shadow(0 14px 14px rgba(5,18,43,.28))}
.cp-art .ink{position:absolute;left:2%;bottom:0;width:24%;height:auto;filter:drop-shadow(0 10px 10px rgba(5,18,43,.25))}

.cp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.cp-layout>*{min-width:0}
@media (min-width:960px){.cp-layout{grid-template-columns:268px minmax(0,1fr)}.cp-side{position:sticky;top:92px}}

.cp-cats-box{background:#fff;border:1px solid #e5eaf3;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(5,18,43,.05)}
.cp-cats-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--hm-yellow);color:#000;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.cp-cats-head svg{width:18px;height:18px}
.cp-cats{list-style:none;margin:0;padding:0}
.cp-cat{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:0;border-top:1px solid #eef1f7;background:#fff;color:#1c2540;font-size:13px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background .2s}
.cp-cats li:first-child .cp-cat{border-top:0}
.cp-cat:hover{background:#f6f8fd}
.cp-cat svg.ic{width:20px;height:20px;color:var(--hm-navy);flex:none}
.cp-cat .lbl{flex:1}
.cp-cat .n{font-size:11px;color:#94a3b8;font-weight:700}
.cp-cat .chev{width:14px;height:14px;color:#94a3b8;flex:none}
.cp-cat.is-active{background:#fff7d6;box-shadow:inset 3px 0 0 var(--hm-yellow);font-weight:900;color:var(--hm-navy)}
.cp-promo{margin-top:20px;border-radius:16px;padding:22px 20px 0;color:#fff;background:linear-gradient(160deg,#16337a,#05122b);position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column;gap:10px}
.cp-promo h3{font-size:18px;font-weight:900;line-height:1.25}
.cp-promo p{font-size:12px;line-height:1.55;color:#cbd5e1;max-width:15rem}
.cp-promo .hm-btn{align-self:flex-start;padding:10px 18px}
.cp-promo img{margin:auto -6px -4px auto;width:62%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
@media (max-width:959px){
  .cp-cats-head{display:none}
  .cp-cats-box{border-radius:14px}
  .cp-cats{display:flex;overflow-x:auto;gap:8px;padding:10px;scrollbar-width:thin}
  .cp-cats li{flex:none}
  .cp-cat{border:1px solid #e2e8f0;border-radius:9999px;padding:9px 14px;width:auto;font-size:12px}
  .cp-cat .chev,.cp-cat svg.ic{display:none}
  .cp-cat.is-active{box-shadow:none;background:var(--hm-yellow);border-color:var(--hm-yellow)}
  .cp-promo{display:none}
}

.cp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:2px solid var(--hm-yellow);padding-bottom:12px}
.cp-head h2{font-size:22px;font-weight:900;color:var(--hm-navy)}
.cp-tools{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--hm-muted)}
.cp-tools select{border:1px solid #cbd5e1;border-radius:9999px;padding:7px 12px;font-size:12px;background:#fff;color:var(--hm-navy);font-weight:700}
.cp-view{display:inline-flex;gap:6px}
.cp-view button{width:34px;height:34px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:var(--hm-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cp-view button svg{width:16px;height:16px}
.cp-view button.is-active{background:var(--hm-yellow);border-color:var(--hm-yellow)}
.cp-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 4px}
.cp-search{position:relative;flex:1 1 260px;max-width:380px}
.cp-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#94a3b8}
.cp-search input{width:100%;padding:10px 16px 10px 38px;border:1px solid #cbd5e1;border-radius:9999px;font-size:13px;background:#fff;color:var(--hm-navy)}
.cp-search input:focus{outline:2px solid var(--hm-yellow);outline-offset:1px;border-color:var(--hm-navy)}
.cp-brands{display:flex;flex-wrap:wrap;gap:6px}
.cp-chip{padding:7px 14px;border-radius:9999px;border:0;background:#eef2f9;color:#334155;font-size:12px;font-weight:800;cursor:pointer}
.cp-chip:hover{background:#e2e8f3}
.cp-chip.is-active{background:var(--hm-navy);color:#fff}
.cp-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 4px;padding:12px 16px;border:1px solid #e5eaf3;border-radius:12px;background:#fff;font-size:12px;color:#51607f;line-height:1.5}
.cp-note b{color:var(--hm-navy)}
.cp-note .hm-btn{padding:9px 16px;font-size:11px}
.cp-count{margin:14px 0 14px;font-size:12px;color:var(--hm-muted)}

.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px}
.cp-card{background:#fff;border:1px solid #e5eaf3;border-radius:16px;padding:14px;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(5,18,43,.05);transition:box-shadow .25s,transform .25s}
.cp-card:hover{box-shadow:0 12px 28px rgba(5,18,43,.13);transform:translateY(-3px)}
.cp-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #f0f3f9;border-radius:12px;overflow:hidden}
.cp-img img{max-width:92%;max-height:92%;object-fit:contain;transition:transform .3s}
.cp-card:hover .cp-img img{transform:scale(1.05)}
.cp-body{display:flex;flex-direction:column;flex:1}
.cp-tag{margin-top:12px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#b07d00}
.cp-name{margin-top:4px;font-size:13px;font-weight:800;line-height:1.35;color:var(--hm-navy)}
.cp-spec{margin-top:6px;font-size:11px;line-height:1.45;color:var(--hm-muted)}
.cp-fits{margin-top:4px;font-size:11px;line-height:1.45;color:#64748b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-price{margin:10px 0 12px;font-size:12px;font-weight:900;color:var(--hm-navy)}
.cp-card .hm-btn{margin-top:auto;padding:10px 12px;font-size:11px}
.cp-empty{grid-column:1/-1;padding:40px 16px;text-align:center;color:var(--hm-muted);font-size:14px;background:#fff;border:1px dashed #cbd5e1;border-radius:14px}
.cp-empty a{color:var(--hm-navy);font-weight:800;text-decoration:underline}

.cp-grid.is-list{grid-template-columns:1fr;gap:12px}
.is-list .cp-card{flex-direction:row;align-items:center;gap:18px;padding:12px 16px}
.is-list .cp-img{flex:0 0 120px;aspect-ratio:1/1}
.is-list .cp-body{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
.is-list .cp-text{flex:1 1 240px}
.is-list .cp-tag{margin-top:0}
.is-list .cp-price{margin:0}
.is-list .cp-card .hm-btn{margin-top:0;width:auto;flex:0 0 170px}
.is-list .cp-fits{-webkit-line-clamp:3}
@media (max-width:560px){.is-list .cp-card{flex-direction:column;align-items:stretch}.is-list .cp-img{flex:none;aspect-ratio:4/3}.is-list .cp-card .hm-btn{flex:none;width:100%}}
@media (prefers-reduced-motion:reduce){.cp-card,.cp-img img{transition:none}}

/* phones: two products across */
@media (max-width:560px){
  .cp-grid:not(.is-list){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cp-card{padding:10px}
  .cp-name{font-size:12px}
  .cp-fits{display:none}
  .cp-card .hm-btn{padding:9px 6px;font-size:10px;gap:4px}
}