/* === CPA styles scoped under .cpa-root to avoid global conflicts === */

.cpa-root { max-width:1400px; margin:0 auto; padding:40px 20px; box-sizing:border-box; }

/* header (use same IDs/classes as your brand archive so style matches) */
.cba-archive-header { /*background:#fff; padding:20px; border:1px solid #e3e3e3; border-radius:8px;*/ margin-bottom:24px; }
#cba-archive-title { font-family:"ss greyhood seven", Sans-serif !important; margin:0 0 10px; font-size:36px; font-weight:700; }
#cba-archive-description { font-family:"Rift", Sans-serif; font-size:18px; line-height:1.5; color:#201e21; }

/* layout */
.cpa-layout { display:flex; gap:24px; align-items:flex-start; }
.cpa-sidebar { width:25%; flex:0 0 25%; max-width:360px; }
.cpa-main { flex:1; }

.cba-archive-header h1 {
    margin: 0 0 15px;
    font-weight: 700;
    color: #000000;
}
.csa-archive-title {
    font-family: "ss greyhood seven", Sans-serif !important;
}
.cpa-archive-tc {
    display: flex;
    align-items: center;
}
p.cpa-pro-count {
    padding-left: 20px;
    font-size: 24px;
    font-weight: 500;
    font-family: "Rift", Sans-serif;
}
/* boxes (separate boxes for Brand / Category / Price) */
.cpa-box { background:#fff; border:1px solid #e3e3e3; border-radius:8px; padding:16px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.cpa-box__title { font-size:24px; font-weight:600; margin:0 0 10px; font-family:"Rift", Sans-serif; }
.cpa-box__body { max-height:380px; overflow:auto; padding-right:6px; }

/* each item */
.cpa-item { display:flex; gap:8px; align-items:center; padding:8px; background:#f9f9f9; border-radius:6px; margin-bottom:8px; cursor:pointer; font-family:"Rift", Sans-serif; font-size:18px; }
.cpa-item:hover { background:#eef5ff; }
.cpa-item--child { margin-left:12px; font-size:16px; background:#fbfbfb; }

/* remove load-more button for brands (we simply don't output it in template) */
/* (kept styles for buttons used elsewhere) */
.cpa-btn { padding:8px 12px; cursor:pointer; border-radius:6px; background:#ff6600; color:#fff; border:none; }
.cpa-btn--muted { background:#f0f0f0; color:#222; }
.cpa-btn--loadmore { display:block; margin:18px auto 0; }

/* products grid — adapted from your brand CSS and scoped to cpa-root to avoid conflict */
.cpa-main ul.products { display:grid !important; grid-template-columns:repeat(3,1fr); gap:30px; list-style:none; margin:0; padding:0; }
.cpa-main ul.products::before { content:none !important; display:none !important; }

/* product card */
.cpa-main ul.products li.product { background:#fff; border:1px solid #e3e3e3; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.05); transition:transform 0.2s ease, box-shadow 0.2s ease; width:100% !important; box-sizing:border-box; margin-bottom:10px!important; }
.cpa-main ul.products li.product:hover { transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,0.1); }
.cpa-main ul.products li.product .woocommerce-LoopProduct-link { display:flex; flex-direction:column; height:100%; text-decoration:none; }
.cpa-main ul.products li.product img { width:100% !important; height:300px !important; object-fit:cover; display:block; }
.cpa-main ul.products li.product h2.woocommerce-loop-product__title { font-size:32px; font-weight:600; color:#222; padding:12px; font-family:"Rift", Sans-serif; }
.cpa-main ul.products li.product .price { padding:0 12px 12px; font-size:24px!important; font-weight:500!important; color:#242424!important; font-family:"Rift", Sans-serif; }

/* ensure our scoped area removes woo pseudo elements to avoid empty block */
.cpa-root .products::before, .cpa-root .products::after { content:none !important; display:none !important; }
.cpa-pagination {
    font-family: "Rift", Sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpa-pagination span.page-numbers.current, .cpa-pagination a.page-numbers {
    color: #000000;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px;
}

/* responsive */
@media (max-width:1024px) {
  .cpa-layout { flex-direction:column; }
  .cpa-sidebar, .cpa-main { width:100%; max-width:none; }
  .cpa-main ul.products { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .cpa-main ul.products { grid-template-columns:1fr; }
  .cpa-main ul.products li.product img { height:220px !important; }
}