/* ============================================================
   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.tax-product_cat header.woocommerce-products-header,
body.tax-product_tag header.woocommerce-products-header{ display:none !important; }
body.tax-product_cat .jm-cat-hero,
body.tax-product_cat .jm-cat-filter-strip,
body.tax-product_cat .jm-cat-grid-anchor,
body.tax-product_tag .jm-cat-hero,
body.tax-product_tag .jm-cat-filter-strip{ display:none !important; }

/* ---- panel ---- */
.jcn{
	--i:#1c1c1e; --i2:#1a1a1c; --m:#48494e; --m2:#6f7178; --m3:#8a8c93; --f:#9a9ca3;
	--char:linear-gradient(150deg,#36383d,#1b1c1f);
	--line2:rgba(28,28,30,.1);
	--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-family:var(--sans); color:var(--i);
	background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.36));
	border:1px solid rgba(255,255,255,.8); border-radius:24px;
	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(40,40,50,.04),inset 0 1px 0 rgba(255,255,255,.85),0 20px 50px rgba(40,40,50,.07);
}
.jcn a{ text-decoration:none; }
.jcn__crumb{ font-size:13px; color:var(--f); margin-bottom:8px; }
.jcn__crumb a{ color:var(--m2); } .jcn__crumb a:hover{ color:var(--i); } .jcn__crumb b{ color:var(--i); font-weight:600; }
.jcn__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.jcn__title{ margin:0 !important; font-family:var(--sans) !important; font-style:normal !important; font-size:26px !important; font-weight:600 !important; letter-spacing:-.02em !important; color:var(--i2) !important; }
.jcn__count{ font-size:14px; color:var(--m3); }

/* ---- 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:500; color:var(--m); background:rgba(255,255,255,.6); border:1px solid var(--line2); transition:background .18s cubic-bezier(.22,.9,.32,1),color .18s ease,border-color .18s ease; }
.jcn-tab__c{ font-size:12px; color:var(--f); }
@media (hover:hover){ .jcn-tab:hover{ background:#fff; color:var(--i); border-color:rgba(28,28,30,.2); } }
.jcn-tab.is-active{ background:var(--char); color:#f3f3f4; border-color:rgba(0,0,0,.4); }
.jcn-tab.is-active .jcn-tab__c{ color:rgba(243,243,244,.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(255,255,255,.7),rgba(255,255,255,.45)); border:1px solid rgba(255,255,255,.8); border-radius:18px; padding:12px; }
.jcn__side-label{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--f); 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:var(--m); font-size:14px; }
@media (hover:hover){ .jcn-sub:hover{ background:rgba(28,28,30,.05); color:var(--i); } }
.jcn-sub.is-active{ background:var(--char); color:#f3f3f4; font-weight:600; }
.jcn-sub.is-active .jcn-sub__c{ color:rgba(243,243,244,.75); }
.jcn-sub__c{ font-size:12.5px; color:var(--m3); }
/* nested: mid-level category = bold group heading; its children indented */
.jcn-sub--group{ font-weight:600; color:var(--i); 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; }
.jcn__toolbar .woocommerce-result-count{ margin:0 !important; font-size:14px !important; color:var(--m3) !important; }
.jcn__toolbar .woocommerce-ordering{ margin:0 !important; }
.jcn__toolbar select.orderby{ height:40px; border-radius:11px; border:1px solid var(--line2); background:rgba(255,255,255,.7); color:var(--i); font-size:14px; font-weight:500; 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; }
.jcn .jm-product-card{ background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.5)) !important; border:1px solid rgba(255,255,255,.85) !important; }
.jcn .jm-product-card__title, .jcn .jm-product-card__title a{ color:var(--i) !important; font-family:var(--sans) !important; }
.jcn .woocommerce-Price-amount, .jcn .woocommerce-Price-amount bdi, .jcn .woocommerce-Price-currencySymbol, .jcn .jm-product-card__price{ color:var(--i2) !important; }
.jcn del, .jcn del *{ color:var(--m3) !important; }
.jcn .star-rating::before, .jcn .star-rating span::before{ color:var(--m2) !important; }
.jcn .jm-product-card__divider{ background:var(--line2) !important; }

/* ---- pagination ---- */
.jcn__main .woocommerce-pagination{ margin-top:26px !important; }
.jcn__main .woocommerce-pagination .page-numbers{ color:var(--m) !important; border-color:var(--line2) !important; }
.jcn__main .woocommerce-pagination .page-numbers.current{ background:var(--char) !important; color:#f3f3f4 !important; border-color:rgba(0,0,0,.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 var(--line2); border-radius:11px; background:rgba(255,255,255,.6); }
	.jcn-sub.is-active{ border-color:rgba(0,0,0,.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 !important; gap:12px !important; }
}


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

  /* ---------- header / title shrink + tighter spacing ---------- */
  html body.tax-product_cat .jcn{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  html body.tax-product_cat .jcn__crumb{
    font-size:12px !important;
    line-height:1.2 !important;
    color:#9A9CA3 !important;
    margin:0 0 6px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  html body.tax-product_cat .jcn__head{
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin:0 0 10px !important;
  }
  html body.tax-product_cat h1.jcn__title,
  html body.tax-product_cat .jcn__head h1.jcn__title{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    font-size:20px !important;
    line-height:1.15 !important;
    font-weight:600 !important;
    letter-spacing:-0.02em !important;
    color:#1A1A1C !important;
    margin:0 !important;
  }
  html body.tax-product_cat .jcn__count{
    font-size:13px !important;
    font-weight:500 !important;
    color:#8A8C93 !important;
  }

  /* ---------- main category tabs -> single horizontal-scroll pill row ---------- */
  html body.tax-product_cat nav.jcn__tabs{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    margin:0 -14px 10px !important;
    padding:2px 14px 4px !important;
    height:auto !important;
    max-height:none !important;
    white-space:nowrap !important;
  }
  html body.tax-product_cat nav.jcn__tabs::-webkit-scrollbar{
    display:none !important; width:0 !important; height:0 !important;
  }
  html body.tax-product_cat nav.jcn__tabs a.jcn-tab{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    font-size:12.5px !important;
    font-weight:500 !important;
    line-height:1 !important;
    color:#48494E !important;
    background:rgba(255,255,255,0.6) !important;
    border:1px solid rgba(28,28,30,0.1) !important;
    box-shadow:none !important;
    white-space:nowrap !important;
  }
  html body.tax-product_cat nav.jcn__tabs a.jcn-tab.is-active,
  html body.tax-product_cat nav.jcn__tabs a.jcn-tab.active,
  html body.tax-product_cat nav.jcn__tabs a.jcn-tab[aria-current]{
    color:#F3F3F4 !important;
    background:linear-gradient(150deg,#36383D,#1B1C1F) !important;
    border:1px solid rgba(0,0,0,0) !important;
  }
  html body.tax-product_cat nav.jcn__tabs a.jcn-tab .jcn-tab__c{
    font-size:11.5px !important;
    color:inherit !important;
    opacity:.8 !important;
  }

  /* ---------- body stacks; sidebar -> single horizontal-scroll sub-chip row ---------- */
  html body.tax-product_cat .jcn__body{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
  }
  html body.tax-product_cat aside.jcn__side{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    margin:0 -14px 12px !important;
    padding:2px 14px 4px !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    white-space:nowrap !important;
  }
  html body.tax-product_cat aside.jcn__side::-webkit-scrollbar{
    display:none !important; width:0 !important; height:0 !important;
  }
  html body.tax-product_cat aside.jcn__side .jcn__side-label{
    display:none !important;
  }
  html body.tax-product_cat aside.jcn__side a.jcn-sub{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:11px !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1 !important;
    color:#48494E !important;
    background:rgba(255,255,255,0.6) !important;
    border:1px solid rgba(28,28,30,0.1) !important;
    white-space:nowrap !important;
  }
  html body.tax-product_cat aside.jcn__side a.jcn-sub.is-active,
  html body.tax-product_cat aside.jcn__side a.jcn-sub.active,
  html body.tax-product_cat aside.jcn__side a.jcn-sub[aria-current]{
    color:#1C1C1E !important;
    font-weight:500 !important;
    background:rgba(255,255,255,0.95) !important;
    border:1.5px solid rgba(28,28,30,0.5) !important;
  }
  html body.tax-product_cat aside.jcn__side a.jcn-sub .jcn-sub__c{
    font-size:12px !important;
    color:#A6A8AE !important;
  }

  /* ---------- toolbar: result count (left) + compact glass Sort (right) ---------- */
  html body.tax-product_cat .woocommerce-result-count{
    display:block !important;
    font-size:13px !important;
    color:#8A8C93 !important;
    margin:0 !important;
    float:none !important;
    line-height:38px !important;
  }
  html body.tax-product_cat .woocommerce-ordering{
    display:block !important;
    float:right !important;
    width:auto !important;
    margin:0 0 14px !important;
    padding:0 !important;
  }
  html body.tax-product_cat .woocommerce-ordering::after{
    content:"" !important; display:block !important; clear:both !important;
  }
  html body.tax-product_cat .woocommerce-ordering select,
  html body.tax-product_cat .woocommerce-ordering .orderby{
    height:38px !important;
    width:auto !important;
    max-width:170px !important;
    padding:0 30px 0 14px !important;
    border-radius:11px !important;
    border:1px solid rgba(28,28,30,0.12) !important;
    background:rgba(255,255,255,0.72) !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    color:#1C1C1E !important;
    line-height:38px !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    cursor:pointer !important;
  }

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

  /* ---------- product card: compact sizing + inline price ---------- */
  html body.tax-product_cat .jm-product-card{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    border-radius:16px !important;
  }
  html body.tax-product_cat .jm-product-card .jm-product-card__title,
  html body.tax-product_cat .jm-product-card__title{
    font-size:14.5px !important;
    font-weight:500 !important;
    line-height:1.3 !important;
    letter-spacing:-0.01em !important;
    color:#1C1C1E !important;
  }
  html body.tax-product_cat .jm-product-card .star,
  html body.tax-product_cat .jm-product-card .jm-product-card__rating svg,
  html body.tax-product_cat .jm-product-card [class*="star"] svg{
    color:#f5a623 !important;
    fill:#f5a623 !important;
  }

  html body.tax-product_cat .jm-product-card .jm-product-card__price,
  html body.tax-product_cat .jm-product-card__price{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    gap:8px !important;
    white-space:nowrap !important;
  }
  html body.tax-product_cat .jm-product-card__price ins,
  html body.tax-product_cat .jm-product-card__price ins .amount{
    order:0 !important;
    text-decoration:none !important;
    font-size:17px !important;
    font-weight:600 !important;
    letter-spacing:-0.01em !important;
    color:#1A1A1C !important;
    font-variant-numeric:tabular-nums !important;
  }
  html body.tax-product_cat .jm-product-card__price del,
  html body.tax-product_cat .jm-product-card__price del .amount{
    order:1 !important;
    font-size:14px !important;
    font-weight:400 !important;
    color:#A6A8AE !important;
    text-decoration:line-through !important;
    font-variant-numeric:tabular-nums !important;
  }
}


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