/**
 * category-plp.css — the .jcn monochrome PLP system: breadcrumb, title/count
 * head, category tabs, subcategory side panel, WC toolbar, product grid,
 * pagination, and ALL its responsive @media (900 / 639). Self-contained;
 * selectors are disjoint from category-sections.css. Absorbed from the old
 * jagmag-category-mono.css. Tokens: assets/css/jl-tokens.css.
 */

/* ============================================================
   Absorbed from assets/css/jagmag-category-mono.css (Run 3)
   Was enqueued conditionally on product taxonomy pages by
   product-category/includes/category-mono-panel.php — that enqueue
   is now REMOVED because category-components.css already loads there.
   ============================================================ */
/* ============================================================
   JagMag Category — NEW Monochrome PLP
   Replaces the legacy hero/filter-strip category page with the
   "product category page" reference: a frosted-glass panel with
   main-category tabs, a left side-panel of sub-categories, a
   result-count/sort toolbar and the product grid. Pairs with the
   mu-plugin jagmag-category-mono.php (which renders .jcn + retires
   the legacy hooks). (rebuilt 2026-06-22)
   ============================================================ */

/* ---- retire legacy chrome (belt-and-suspenders to the PHP removal) ---- */
body.jl-archive header.woocommerce-products-header,
body.tax-product_tag header.woocommerce-products-header{ display:none !important; }

/* ---- panel ---- */
.jcn{
	
	--char:linear-gradient(150deg,var(--jl2-color-ink),var(--jl2-color-ink-2));
	
	
	font-family:var(--jl2-font-sans); color:var(--jl2-color-ink);
	background:linear-gradient(160deg,rgba(var(--jl2-color-white-rgb),.62),rgba(var(--jl2-color-white-rgb),.36));
	border:var(--jl2-border-hairline); border-radius:var(--jl2-radius-lg);
	padding:26px 30px 32px; margin:0 0 40px;
	-webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
	box-shadow:0 1px 2px rgba(var(--jl2-color-ink-rgb),.04),inset 0 1px 0 rgba(var(--jl2-color-white-rgb),.85),0 20px 50px rgba(var(--jl2-color-ink-rgb),.07);
}
.jcn a{ text-decoration:none; }
.jcn__crumb{ font-size:13px; color:rgba(var(--jl2-color-ink-rgb), 0.62); margin-bottom:8px; }
.jcn__crumb a{ color:rgba(var(--jl2-color-ink-rgb), 0.70); } .jcn__crumb a:hover{ color:var(--jl2-color-ink); } .jcn__crumb b{ color:var(--jl2-color-ink); font-weight:600; }
.jcn__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.jcn__title{ margin:0; font-family:var(--jl2-font-display); font-style:normal; font-size:28px; font-weight:400; letter-spacing:normal; color:var(--jl2-color-ink); }
.jcn__count{ font-size:14px; color:rgba(var(--jl2-color-ink-rgb), 0.62); }

/* ---- main-category tabs ---- */
.jcn__tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.jcn-tab{ height:40px; display:inline-flex; align-items:center; gap:7px; padding:0 17px; border-radius:999px; font-size:14px; font-weight:600; color:rgba(var(--jl2-color-ink-rgb), 0.70); background:rgba(var(--jl2-color-white-rgb),.6); border:1px solid rgba(var(--jl2-color-ink-rgb), 0.10); transition:background .18s cubic-bezier(.22,.9,.32,1),color .18s ease,border-color .18s ease; }
.jcn-tab__c{ font-size:12px; color:rgba(var(--jl2-color-ink-rgb), 0.62); }
@media (hover:hover) { .jcn-tab:hover{ background:var(--jl2-color-white); color:var(--jl2-color-ink); border-color:rgba(var(--jl2-color-ink-rgb),.2); } }
.jcn-tab.is-active{ background:var(--char); color:var(--jl2-color-cream); border-color:rgba(var(--jl2-color-ink-rgb),.4); }
.jcn-tab.is-active .jcn-tab__c{ color:rgba(var(--jl2-color-cream-2-rgb),.7); }

/* ---- body: side panel + main ---- */
.jcn__body{ display:flex; gap:28px; align-items:flex-start; }
.jcn__side{ flex:none; width:230px; background:linear-gradient(160deg,rgba(var(--jl2-color-white-rgb),.7),rgba(var(--jl2-color-white-rgb),.45)); border:var(--jl2-border-hairline); border-radius:var(--jl2-radius-md); padding:12px; }
.jcn__side-label{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--jl2-color-ink-rgb), 0.62); padding:6px 12px 10px; }
.jcn-sub{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:38px; padding:0 14px; border-radius:11px; color:rgba(var(--jl2-color-ink-rgb), 0.70); font-size:14px; }
@media (hover:hover) { .jcn-sub:hover{ background:rgba(var(--jl2-color-ink-rgb),.05); color:var(--jl2-color-ink); } }
.jcn-sub.is-active{ background:var(--char); color:var(--jl2-color-cream); font-weight:600; }
.jcn-sub.is-active .jcn-sub__c{ color:rgba(var(--jl2-color-cream-2-rgb),.75); }
.jcn-sub__c{ font-size:12.5px; color:rgba(var(--jl2-color-ink-rgb), 0.62); }
/* nested: mid-level category = bold group heading; its children indented */
.jcn-sub--group{ font-weight:600; color:var(--jl2-color-ink); margin-top:6px; }
.jcn-sub--child{ padding-left:26px; font-size:13.5px; }
.jcn-sub--child .jcn-sub__c{ font-size:12px; }
.jcn__main{ flex:1; min-width:0; }

/* ---- toolbar (real WC result count + ordering) ---- */
.jcn__toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
/* result-count styling consolidated into the single html body.jl-archive rule below (dead 14px generation removed 2026-08-27) */
.jcn__toolbar .woocommerce-ordering{ margin:0 !important; }
.jcn__toolbar select.orderby{ height:40px; border-radius:11px; border:1px solid rgba(var(--jl2-color-ink-rgb), 0.10); background:rgba(var(--jl2-color-white-rgb),.7); color:var(--jl2-color-ink); font-size:14px; font-weight:600; padding:0 14px; font-family:inherit; cursor:pointer; }

/* ---- product grid + cards (monochrome, scoped to the panel) ---- */
.jcn__main ul.products{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:20px !important; margin:0 !important; padding:0 !important; float:none !important; width:auto !important; }
.jcn__main ul.products::before, .jcn__main ul.products::after{ display:none !important; }
.jcn__main ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; }

/* ---- pagination ---- */
.jcn__main .woocommerce-pagination{ margin-top:26px !important; }
.jcn__main .woocommerce-pagination .page-numbers{ color:rgba(var(--jl2-color-ink-rgb), 0.70) !important; border-color:rgba(var(--jl2-color-ink-rgb), 0.10) !important; }
.jcn__main .woocommerce-pagination .page-numbers.current{ background:var(--char) !important; color:var(--jl2-color-cream) !important; border-color:rgba(var(--jl2-color-ink-rgb),.4) !important; }

/* ---- mobile: side panel -> chip row, grid 2-up ---- */
@media (max-width:900px) {
	.jcn{ padding:18px 16px 22px; border-radius:20px; }
	.jcn__body{ flex-direction:column; }
	.jcn__side{ width:100%; display:flex; flex-wrap:wrap; gap:8px; padding:0; background:none; border:0; }
	.jcn__side-label{ width:100%; padding:0 2px 4px; }
	.jcn-sub{ width:auto; height:34px; border:1px solid rgba(var(--jl2-color-ink-rgb), 0.10); border-radius:11px; background:rgba(var(--jl2-color-white-rgb),.6); }
	.jcn-sub.is-active{ border-color:rgba(var(--jl2-color-ink-rgb),.4); }
	.jcn-sub--child{ padding-left:14px; font-size:13px; }
	.jcn-sub--group{ margin-top:0; }
	.jcn__main ul.products{ grid-template-columns:1fr 1fr; gap:12px; }
}

/* JL-CAT-MOBILE */
@media (max-width:639px) {

  /* ---------- header / title shrink + tighter spacing ---------- */
  html body.jl-archive .jcn{
    padding-left:14px;
    padding-right:14px;
  }
  html body.jl-archive .jcn__crumb{
    font-size:12px;
    line-height:1.2;
    color:rgba(var(--jl2-color-ink-rgb), 0.62);
    margin:0 0 6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  html body.jl-archive .jcn__head{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 10px;
  }
  html body.jl-archive h1.jcn__title,
  html body.jl-archive .jcn__head h1.jcn__title{
    font-family:var(--jl2-font-display);
    font-size:22px;
    line-height:1.15;
    font-weight:400;
    letter-spacing:normal;
    color:var(--jl2-color-ink);
    margin:0;
  }
  html body.jl-archive .jcn__count{
    font-size:13px;
    font-weight:600;
    color:rgba(var(--jl2-color-ink-rgb), 0.62);
  }

  /* ---------- main category tabs -> single horizontal-scroll pill row ---------- */
  html body.jl-archive nav.jcn__tabs{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 -14px 10px;
    padding:2px 14px 4px;
    height:auto;
    max-height:none;
    white-space:nowrap;
  }
  html body.jl-archive nav.jcn__tabs::-webkit-scrollbar{
    display:none; width:0; height:0;
  }
  html body.jl-archive nav.jcn__tabs a.jcn-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:32px;
    min-height:32px;
    padding:0 13px;
    border-radius:999px;
    font-family:var(--jl2-font-sans);
    font-size:12.5px;
    font-weight:600;
    line-height:1;
    color:rgba(var(--jl2-color-ink-rgb), 0.70);
    background:rgba(var(--jl2-color-white-rgb),0.6);
    border:1px solid rgba(var(--jl2-color-ink-rgb),0.1);
    box-shadow:none;
    white-space:nowrap;
  }
  html body.jl-archive nav.jcn__tabs a.jcn-tab.is-active,
  html body.jl-archive nav.jcn__tabs a.jcn-tab.active,
  html body.jl-archive nav.jcn__tabs a.jcn-tab[aria-current]{
    color:var(--jl2-color-cream);
    background:linear-gradient(150deg,var(--jl2-color-ink),var(--jl2-color-ink-2));
    border:1px solid rgba(var(--jl2-color-ink-rgb),0);
  }
  html body.jl-archive nav.jcn__tabs a.jcn-tab .jcn-tab__c{
    font-size:11.5px;
    color:inherit;
    opacity:.8;
  }

  /* ---------- body stacks; sidebar -> single horizontal-scroll sub-chip row ---------- */
  html body.jl-archive .jcn__body{
    display:block;
    grid-template-columns:none;
    gap:0;
  }
  html body.jl-archive aside.jcn__side{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    width:100%;
    max-width:none;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 -14px 12px;
    padding:2px 14px 4px;
    border:0;
    background:none;
    box-shadow:none;
    white-space:nowrap;
  }
  html body.jl-archive aside.jcn__side::-webkit-scrollbar{
    display:none; width:0; height:0;
  }
  html body.jl-archive aside.jcn__side .jcn__side-label{
    display:none;
  }
  html body.jl-archive aside.jcn__side a.jcn-sub{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:34px;
    min-height:34px;
    padding:0 14px;
    border-radius:11px;
    font-family:var(--jl2-font-sans);
    font-size:13px;
    font-weight:600;
    line-height:1;
    color:rgba(var(--jl2-color-ink-rgb), 0.70);
    background:rgba(var(--jl2-color-white-rgb),0.6);
    border:1px solid rgba(var(--jl2-color-ink-rgb),0.1);
    white-space:nowrap;
  }
  html body.jl-archive aside.jcn__side a.jcn-sub.is-active,
  html body.jl-archive aside.jcn__side a.jcn-sub.active,
  html body.jl-archive aside.jcn__side a.jcn-sub[aria-current]{
    color:var(--jl2-color-ink);
    font-weight:600;
    background:rgba(var(--jl2-color-white-rgb),0.95);
    border:1.5px solid rgba(var(--jl2-color-ink-rgb),0.5);
  }
  html body.jl-archive aside.jcn__side a.jcn-sub .jcn-sub__c{
    font-size:12px;
    color:rgba(var(--jl2-color-ink-rgb), 0.70);
  }

  /* ---------- toolbar: result count (left) + compact glass Sort (right) ---------- */
  html body.jl-archive .woocommerce-result-count{
    display:block;
    color:rgba(var(--jl2-color-ink-rgb), 0.62);
    margin:0;
    float:none;
  }
  html body.jl-archive .woocommerce-ordering{
    display:block;
    float:right;
    width:auto;
    margin:0 0 14px;
    padding:0;
  }
  html body.jl-archive .woocommerce-ordering::after{
    content:""; display:block; clear:both;
  }
  html body.jl-archive .woocommerce-ordering select,
  html body.jl-archive .woocommerce-ordering .orderby{
    height:38px;
    width:auto;
    max-width:170px;
    padding:0 30px 0 14px;
    border-radius:11px;
    border:1px solid rgba(var(--jl2-color-ink-rgb),0.12);
    background:rgba(var(--jl2-color-white-rgb),0.72);
    font-family:var(--jl2-font-sans);
    font-size:13.5px;
    font-weight:600;
    color:var(--jl2-color-ink);
    line-height:38px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
  }

  /* ---------- product grid: full-width, keep 2-up, gap 12 ---------- */
  html body.jl-archive ul.products.columns-4,
  html body.jl-archive ul.products{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100%;
    margin:0;
    padding:0;
    clear:both;
  }
  html body.jl-archive ul.products > article.jm-product-card,
  html body.jl-archive ul.products > li,
  html body.jl-archive ul.products > li.product{
    width:auto;
    max-width:none;
    margin:0;
    float:none;
  }

  /* ---------- product card: compact sizing + inline price ---------- */
  
  
  

  
  
  
}

/* JL-CAT-MOBILE-2 */
@media (max-width:639px) {
html body.jl-archive .jcn__toolbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap;margin:0 0 14px;}
html body.jl-archive .jcn__toolbar .woocommerce-result-count{margin:0;line-height:1.2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;}
html body.jl-archive .jcn__toolbar .woocommerce-ordering{float:none;margin:0;flex:0 0 auto;}

}

/* /shop/ archive: left "Shop by category" filter + grid, like category pages (2026-09-01). Desktop uses the base .jcn__body flex (sidebar+main); on <=900 the sidebar strip is hidden because the top tabs already list the same categories. */
@media (max-width:900px){ .jcn--shop .jcn__side{ display:none !important; } }