/* Product category archive. Loads on top of sh-landing.css + sh-shop.css. Scoped to .shx. */

.shx .catpage{padding:2.5rem 0 clamp(3rem,6vw,5rem)}
.shx .catpage > .wrap{width:min(100% - 4rem,1720px);
  display:grid;grid-template-columns:17rem minmax(0,1fr);gap:2.5rem}
/* NOTE: no align-items:start here. That collapses the rail's grid area to its own
   height, leaving position:sticky nothing to travel inside, and it scrolls away. */
@media (max-width:1100px){.shx .catpage > .wrap{grid-template-columns:1fr;gap:1.6rem}}

/* ---------------- category rail ---------------- */
/* the rail is taller than a laptop viewport, so cap it and let it scroll itself
   otherwise position:sticky has nothing to pin and it just scrolls away */
.shx .catbar{position:sticky;top:7.5rem;display:grid;gap:.25rem;align-content:start;
  max-height:calc(100vh - 9.5rem);overflow-y:auto;overscroll-behavior:contain;
  padding-right:.35rem;scrollbar-width:thin;scrollbar-color:var(--grey-2) transparent}
.shx .catbar::-webkit-scrollbar{width:6px}
.shx .catbar::-webkit-scrollbar-thumb{background:var(--grey-2);border-radius:999px}
.shx .catbar::-webkit-scrollbar-track{background:transparent}
/* stacked, 16 categories would push the products a screen and a half down.
   Below the sidebar breakpoint it becomes a single scrolling row instead. */
@media (max-width:1100px){
  .shx .catbar{position:static;max-height:none;display:flex;gap:.5rem;
    overflow-x:auto;overflow-y:hidden;padding:0 0 .5rem;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .shx .catbar-h{display:none}
  .shx a.ccat{flex:0 0 auto;scroll-snap-align:start;border-color:var(--grey-2);
    padding:.5rem .85rem .5rem .5rem}
  .shx a.ccat:hover{transform:none}
  .shx .ccat .mi{width:30px;height:30px;border-radius:8px}
  .shx .ccat .mi svg{width:17px;height:17px}
  .shx .ccat-n{white-space:nowrap;font-size:.9rem}
  .shx .ccat em{display:none}
  .shx a.ccat-all{margin-top:0;border-top:1px solid var(--grey-2);border-radius:12px;padding-top:.5rem}
}
.shx .catbar-h{display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.7rem}
@media (max-width:1100px){.shx .catbar-h{grid-column:1/-1}}

.shx a.ccat{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:12px;
  font-size:.94rem;font-weight:500;color:var(--ink);background:#fff;
  border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.shx a.ccat:hover{background:var(--grey-3);border-color:var(--grey-2);transform:translateX(3px)}
.shx .ccat .mi{flex:none;width:36px;height:36px;border-radius:10px;background:var(--grey-3);
  display:grid;place-items:center;color:var(--blue);
  transition:background .25s var(--ease),color .25s var(--ease)}
.shx .ccat .mi svg{width:20px;height:20px}
.shx a.ccat:hover .mi{background:var(--blue);color:#fff}
.shx .ccat-n{flex:1;min-width:0;line-height:1.3}
.shx .ccat em{flex:none;font-style:normal;font-size:.74rem;color:var(--grey);
  background:var(--grey-3);border-radius:999px;padding:.12rem .5rem}

/* the category you are looking at */
.shx a.ccat.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.shx a.ccat.on:hover{transform:none;background:var(--blue);border-color:var(--blue)}
.shx .ccat.on .mi{background:rgba(255,255,255,.18);color:#fff}
.shx .ccat.on em{background:rgba(255,255,255,.2);color:#fff}

/* ---------------- header ---------------- */
.shx .cathead{margin-bottom:1.8rem}
.shx .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.82rem;
  color:var(--grey);margin-bottom:.9rem}
.shx .crumbs a{color:var(--grey);transition:color .2s var(--ease)}
.shx .crumbs a:hover{color:var(--blue)}
.shx .crumbs strong{color:var(--ink);font-weight:600}
.shx .cathead h1{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ink);margin:0}
.shx .cathead-n{margin-top:.5rem;color:var(--blue);font-size:.9rem;font-weight:600}
.shx .cathead-d{margin-top:.7rem;color:var(--grey);font-size:.95rem;line-height:1.6;max-width:46rem}

/* ---------------- seven to a row ---------------- */
.shx .pgrid.seven{grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
.shx .pgrid.seven .pcard-img{padding:.7rem}
.shx .pgrid.seven .pcard-b{padding:0 .75rem .85rem;gap:.24rem}
.shx .pgrid.seven .pcard-c{font-size:.6rem;letter-spacing:.1em}
.shx .pgrid.seven .pcard-t{font-size:.82rem;min-height:2.3em}
.shx .pgrid.seven .pcard-p{font-size:.9rem}
.shx .pgrid.seven .pcard-p .woocommerce-Price-currencySymbol{font-size:.7em}
.shx .pgrid.seven .pstock{font-size:.68rem}
.shx .pgrid.seven .pbuy{padding:.52rem .5rem;font-size:.74rem;gap:.35rem}
.shx .pgrid.seven .pbuy svg{width:14px;height:14px}
@media (max-width:1500px){.shx .pgrid.seven{grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}}
@media (max-width:1100px){.shx .pgrid.seven{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.shx .pgrid.seven{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:540px){.shx .pgrid.seven{grid-template-columns:repeat(2,minmax(0,1fr))}}

.shx .catempty{color:var(--grey);font-size:1rem}
.shx .catempty a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.shx .catmain{align-self:start;min-width:0}

/* rail sized to fit without scrolling: 16 categories + header + All products
   has to clear the header and still land inside a laptop viewport. */
.shx .catbar{top:6.4rem;max-height:calc(100vh - 6.8rem);gap:.06rem}
.shx .catbar-h{margin-bottom:.4rem;font-size:.66rem}
.shx a.ccat{padding:.21rem .5rem;gap:.55rem;font-size:.84rem;border-radius:10px}
.shx .ccat .mi{width:24px;height:24px;border-radius:7px}
.shx .ccat .mi svg{width:14px;height:14px}
.shx .ccat em{font-size:.7rem;padding:.08rem .42rem}

.shx .catpage > .wrap{grid-template-columns:15.5rem minmax(0,1fr);gap:2.2rem}

/* rail: as large as it can be and still not scroll.
   Hard ceiling is viewport minus the sticky header, so 16 rows have roughly
   38px each to play with. The 'Shop by category' label was dropped to buy the
   rows their extra height. Going bigger than this brings the scrollbar back. */
/* the sticky header is 112px tall, so the rail has to clear it or the first
   categories pin underneath it and vanish. Logged-in editors get the 32px
   admin bar on top of that. */
.shx .catbar{top:7.9rem;max-height:calc(100vh - 8.5rem);gap:0}
body.admin-bar .shx .catbar{top:9.9rem;max-height:calc(100vh - 10.5rem)}
.shx .catbar-h{display:none}
.shx a.ccat{padding:.235rem .55rem;gap:.6rem;font-size:.87rem;border-radius:11px}
.shx .ccat .mi{width:25px;height:25px;border-radius:8px}
.shx .ccat .mi svg{width:15px;height:15px}
.shx .ccat em{font-size:.72rem}

/* smaller cards, more air between them */
.shx .pgrid.seven{gap:1.5rem}
@media (max-width:1500px){.shx .pgrid.seven{gap:1.2rem}}
@media (max-width:820px){.shx .pgrid.seven{gap:.9rem}}

/* rail: boxed items, larger. Each row is its own outlined box with a gap
   between, so the gaps eat into the height budget as well as the rows. */
.shx .catbar{gap:.28rem}
.shx a.ccat{padding:.34rem .6rem;gap:.65rem;font-size:.92rem;border-radius:11px;
  border:1px solid var(--grey-2);background:#fff}
.shx .ccat .mi{width:29px;height:29px;border-radius:9px}
.shx .ccat .mi svg{width:17px;height:17px}
.shx .ccat em{font-size:.75rem;padding:.1rem .48rem}
.shx a.ccat:hover{background:var(--grey-3);border-color:var(--blue-line)}
.shx a.ccat.on{border-color:var(--blue)}

/* HEIGHT BUDGET
   16 boxed rows at 42px + 15 gaps at ~4.5px = ~737px of content.
   Available = viewport - header(112) - admin bar(32 when present) - clearance.
   On a 723px viewport that is 555-587px, so the rail scrolls internally by
   roughly three rows. It fits outright from about 900px of viewport height.
   Shrinking rows or gaps is the only way to remove that scroll. */

/* dark category boxes, matching the footer */
.shx a.ccat{background:var(--navy);border-color:rgba(255,255,255,.12);color:#fff}
.shx .ccat .mi{background:rgba(255,255,255,.08);color:var(--blue)}
.shx .ccat em{background:rgba(255,255,255,.1);color:rgba(255,255,255,.62)}
.shx a.ccat:hover{background:var(--navy-3);border-color:var(--blue-line)}
.shx a.ccat:hover .mi{background:var(--blue);color:#fff}
/* the open one keeps its blue so it still reads as selected */
.shx a.ccat.on{background:var(--blue);border-color:var(--blue);color:#fff}
.shx a.ccat.on:hover{background:var(--blue);border-color:var(--blue)}
.shx .ccat.on .mi{background:rgba(255,255,255,.2);color:#fff}
.shx .ccat.on em{background:rgba(255,255,255,.22);color:#fff}

/* the whole rail is one navy panel; the boxes sit on it in the same navy and
   are separated only by a light blue outline. */
.shx .catbar{background:var(--navy);border-radius:16px;padding:.6rem;
  scrollbar-color:rgba(255,255,255,.22) transparent}
.shx .catbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.shx a.ccat{background:transparent;border-color:var(--blue-line)}
.shx a.ccat:hover{background:rgba(56,164,204,.12);border-color:var(--blue)}
.shx a.ccat.on{background:var(--blue);border-color:var(--blue)}
.shx a.ccat.on:hover{background:var(--blue);border-color:var(--blue)}
@media (max-width:1100px){.shx .catbar{padding:.55rem;border-radius:14px}}

/* MOBILE LAST WORD
   Media queries carry no extra specificity, so every plain `.shx .catbar` or
   `.shx .catpage > .wrap` rule appended below this block would silently beat it.
   THIS BLOCK MUST STAY AT THE END OF THE FILE.

   Below the sidebar breakpoint the rail stops being a list and becomes a
   4 x 4 grid of tiles filling the width: no scrolling, all 16 visible. */
@media (max-width:1100px){
  .shx .catpage > .wrap{grid-template-columns:minmax(0,1fr) !important;gap:1.6rem}
  .shx .catmain{min-width:0}

  /* full-bleed: break out of the wrap's 2rem inset so the grid runs edge to edge */
  .shx .catbar{position:static;max-height:none;height:auto;overflow:visible;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;
    width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:.55rem;border-radius:0}

  .shx a.ccat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;text-align:center;gap:.35rem;
    padding:.6rem .3rem .55rem;border-radius:11px;font-size:.66rem;line-height:1.2}
  .shx a.ccat:hover{transform:none}
  .shx .ccat .mi{width:30px;height:30px;border-radius:9px}
  .shx .ccat .mi svg{width:17px;height:17px}
  .shx .ccat-n{flex:none;white-space:normal;font-size:.66rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .shx .ccat em{display:none}
}

@media (max-width:400px){
  .shx .catbar{gap:.35rem;padding:.45rem}
  .shx a.ccat{padding:.5rem .2rem .45rem;font-size:.6rem}
  .shx .ccat-n{font-size:.6rem}
  .shx .ccat .mi{width:26px;height:26px}
  .shx .ccat .mi svg{width:15px;height:15px}
}