/* Category pages: left column + banner + products (inc/pech-groups.php) */
.pech-archive-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:36px;align-items:start;margin-top:10px}
.pech-archive-content{min-width:0}

/* ---- Left column ---- */
.pech-side{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
.pech-side-toggle{display:none}
.pech-side-title{margin:0 0 6px;font-family:var(--display);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.pech-side-sec{padding:16px 0;border-top:1px solid var(--line)}
.pech-side-title + .pech-side-sec{border-top:0;padding-top:10px}
.pech-side-head{margin:0 0 8px;font-family:var(--display);font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.pech-side-head a{color:inherit;text-decoration:none}
.pech-side-head a:hover{color:var(--magenta)}
.pech-side-list{margin:0;padding:0;list-style:none}
.pech-side-list li{margin:0;padding:0;list-style:none}
.pech-side-list a{display:block;padding:5px 0;font-family:var(--body);font-size:14px;line-height:1.35;color:var(--slate);text-decoration:none;transition:color .15s}
.pech-side-list a:hover{color:var(--magenta)}

/* ---- Banner ---- */
.pech-groupbanner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);align-items:stretch;margin:0 0 26px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#0a0a48,#26266f);color:#fff}
.pech-gb-text{padding:34px 36px;min-width:0}
.pech .pech-gb-title{margin:0;font-family:var(--display);font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff;text-transform:none}
.pech-gb-desc{margin:10px 0 0;max-width:460px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.84)}
.pech-gb-price{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.84)}
.pech-gb-price b{font-family:var(--display);font-size:17px;font-weight:800;color:#fff}
.pech-gb-price .amount,.pech-gb-price bdi{color:inherit;font:inherit}
.pech-gb-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pech .pech-gb-btn{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;background:var(--magenta);color:#fff;font-family:var(--display);font-size:15px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:background .15s}
.pech .pech-gb-btn:hover{background:#e60069;color:#fff}
.pech .pech-gb-btn--ghost{background:rgba(255,255,255,.12);color:#fff}
.pech .pech-gb-btn--ghost:hover{background:rgba(255,255,255,.22)}
.pech-gb-img{position:relative;min-height:220px}
.pech-gb-img img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* ---- Products: three in a row next to the column, same card everywhere ---- */
.pech-archive-content .pech-archive-head{margin-top:0}
.pech-archive-content .pech-vpgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The left column already lists the groups */
.pech-archive .pech-catchips{display:none}

/* ---- Up to a small laptop: the column closes above the products ---- */
@media (max-width:1000px){
  .pech-archive-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .pech-side{position:static;max-height:none;overflow:visible}
  .pech .pech-side-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;margin:0;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--display);font-size:14.5px;font-weight:700;letter-spacing:0;line-height:1;text-align:left;text-transform:none;box-shadow:none;cursor:pointer}
  .pech-side-toggle svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
  .pech-side.is-open .pech-side-toggle svg{transform:rotate(180deg)}
  .pech-side-body{display:none;margin-top:8px;padding:6px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
  .pech-side.is-open .pech-side-body{display:block}
  .pech-side-title{display:none}
  .pech-side-title + .pech-side-sec{padding-top:12px}
  .pech-archive .pech-catchips{display:flex}
}
@media (max-width:849px){
  .pech-archive-content .pech-vpgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pech-groupbanner{display:flex;flex-direction:column-reverse;margin-bottom:18px;border-radius:18px}
  .pech-gb-img{min-height:0;height:130px}
  .pech-gb-text{padding:20px 18px 22px}
  .pech .pech-gb-title{font-size:27px}
  .pech-gb-desc{font-size:14px}
  .pech .pech-gb-btn{height:44px;padding:0 20px;font-size:14.5px}
  /* Two columns of the phone list, so the open column stays short */
  .pech-side-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
}