/* ══════════════════════════════════════════════════════════════════════
   PEPTA LABS — ANALYTICAL THEME
   Shared design system for the homepage, catalog and product pages.

   Principles
     · Typography stays restrained. Site fonts only: Outfit for headings,
       DM Sans for body, JetBrains Mono for every number. Modest scale.
     · The scientific character comes from how DATA is set — tabular
       figures, small-caps labels, hairline rules, aligned specification
       rows — not from decoration.
     · Red is a marker, not a wash. Green means measured and passed.
     · Tokens are inherited from Site.master; only additions live here.

   Linked from: Default.aspx, Products.aspx, ProductDetail.aspx
   ══════════════════════════════════════════════════════════════════════ */

:root{
    --pl-pass:#0f7a48;
    --pl-pass-wash:#eaf6ef;
    --pl-pass-line:#cbe7d8;
    --pl-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── shell ─────────────────────────────────────────────────────────── */
.pl .pl-shell{ max-width:1280px; margin:0 auto; padding:0 32px; }
.pl .pl-mono{ font-family:var(--pl-mono); font-variant-numeric:tabular-nums; }

/* ── breadcrumbs ───────────────────────────────────────────────────── */
.pl .pl-crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink-muted); padding:16px 0 0;
}
.pl .pl-crumbs a{ color:var(--ink-soft); text-decoration:none; }
.pl .pl-crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.pl .pl-crumbs span[aria-current]{ color:var(--ink); }
.pl .pl-crumbs .sep{ color:var(--border); }

/* ── buttons ───────────────────────────────────────────────────────── */
.pl .pl-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Outfit',sans-serif; font-weight:600; font-size:14.5px;
    padding:13px 24px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    cursor:pointer; transition:all .16s ease; text-decoration:none; white-space:nowrap;
}
.pl .pl-btn:hover{ border-color:var(--ink); text-decoration:none; }
.pl .pl-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pl .pl-btn--primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
.pl .pl-btn--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pl .pl-btn--dark:hover{ background:#25272d; border-color:#25272d; color:#fff; }
.pl .pl-btn--onDark{ background:transparent; border-color:rgba(255,255,255,.32); color:#fff; }
.pl .pl-btn--onDark:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.pl .pl-btn--block{ width:100%; }
.pl .pl-btn--lg{ padding:15px 28px; font-size:15.5px; }

/* ── bands (page sections) ─────────────────────────────────────────── */
.pl .pl-band{ padding:72px 0; }
.pl .pl-band--tight{ padding:44px 0; }
.pl .pl-band--white{ background:var(--surface); }
.pl .pl-band--dark{ background:var(--ink); color:#fff; }
.pl .pl-band--edge{ border-bottom:1px solid var(--border); }

.pl .pl-head{
    margin-bottom:32px; display:flex; justify-content:space-between;
    align-items:flex-end; gap:28px; flex-wrap:wrap;
}
.pl .pl-eyebrow{
    font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
    display:block; margin-bottom:12px;
}
.pl .pl-head h1,
.pl .pl-head h2{
    font-family:'Outfit',sans-serif; font-weight:700;
    font-size:clamp(26px,3.3vw,38px); letter-spacing:-.035em;
    line-height:1.1; margin:0 0 10px;
}
.pl .pl-head p{ margin:0; color:var(--ink-soft); font-size:16.5px; max-width:60ch; }
.pl .pl-band--dark .pl-head p{ color:#9ea0a8; }
.pl .pl-head .pl-more{
    font-family:'Outfit',sans-serif; font-size:14.5px; font-weight:600;
    color:var(--accent); white-space:nowrap; text-decoration:none;
}
.pl .pl-head .pl-more:hover{ text-decoration:underline; }

/* ── product cards ───────────────────────────────────────────────────
   Four things per card in a fixed rhythm: label tile, category, name,
   spec line, then price + purity. No "View" button - the whole card is
   the target, and the button competed with the price for the same eye. */
.pl .pl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 16px; }
.pl .pl-card{
    border:0; border-radius:14px; overflow:hidden;
    background:var(--surface); display:flex; flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease;
    text-decoration:none; color:inherit;
}
/* No border and no resting shadow: the card separates from the ground by value
   difference, the way Allbirds and Warby Parker do it. Elevation appears only on
   hover, and it is ambient - 16px blur at zero offset, not a drop shadow. */
.pl .pl-card:hover{
    transform:translateY(-3px);
    box-shadow:0 0 16px rgba(0,0,0,.15); text-decoration:none;
}
/* VialImage.ashx renders a full spec LABEL, not a photo - it already carries
   the name, CAS, quantity and purity. Treated as an identifying token; the
   card's own type carries the data. Never re-print label fields.
   flex, not grid: a percentage max-height on the <img> only clamps reliably
   against a flex line. Under display:grid the image renders at its intrinsic
   440x520 and gets clipped. */
.pl .pl-card-media{
    aspect-ratio:1 / 1; height:auto; border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,#fbfcfd 0%,#eef1f5 100%);
    position:relative; overflow:hidden;
}
/* max-* rather than width/height:100% - inside an aspect-ratio well, a 100%
   height makes the image push the well taller than its own square. Letting the
   image size itself under max bounds keeps the well square and the label as
   large as it can be inside it. The drop-shadow makes the portrait label read
   as a physical object rather than a pasted rectangle. */
.pl .pl-card-media img{
    /* Absolutely positioned with all four insets and margin:auto. In normal flow
       the portrait label's intrinsic 440x520 ratio wins over the well's
       aspect-ratio and stretches it; out of flow it cannot affect the box at all,
       so the well stays square and the label scales to fill it. */
    position:absolute; top:12px; right:12px; bottom:12px; left:12px; margin:auto;
    max-width:calc(100% - 24px); max-height:calc(100% - 24px);
    width:auto; height:auto; object-fit:contain; display:block;
    border-radius:3px; filter:drop-shadow(0 4px 12px rgba(15,17,20,.18));
}
.pl .pl-card-body{ padding:13px 15px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pl .pl-card-cat{
    font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl .pl-card-name{
    font-family:'Outfit',sans-serif; font-size:18.5px; font-weight:700;
    letter-spacing:-.03em; line-height:1.22; color:var(--ink);
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.pl .pl-card-line{
    font-family:var(--pl-mono); font-size:11px; line-height:1.75;
    color:var(--ink-soft); font-variant-numeric:tabular-nums; flex:1;
    min-height:2.6em;   /* CJC-1295 has no CAS - keep rows baseline-aligned */
}
.pl .pl-card-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding-top:12px; border-top:1px solid var(--border);
}
.pl .pl-card-price{
    font-family:'Outfit',sans-serif; font-size:20px; font-weight:700;
    letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.pl .pl-card-price small{
    font-family:var(--pl-mono); font-size:8px; color:var(--ink-muted);
    font-weight:400; letter-spacing:.1em; display:block; margin-bottom:1px;
}

.pl .pl-card-cta{
    display:block; margin:12px -16px -16px; padding:12px;
    background:var(--ink); color:#fff; text-align:center;
    font-family:var(--pl-mono); font-size:10.5px; letter-spacing:.22em;
    text-transform:uppercase; transition:background .16s ease;
}
.pl .pl-card:hover .pl-card-cta{ background:var(--accent); }

/* ── row variant: same markup, denser layout ── */
.pl .pl-grid--rows{ grid-template-columns:1fr 1fr; gap:12px; }
.pl .pl-grid--rows .pl-card{ flex-direction:row; }
.pl .pl-grid--rows .pl-card-media{
    width:104px; aspect-ratio:auto; height:auto; flex-shrink:0; padding:9px;
    border-bottom:0; border-right:1px solid var(--border);
}
/* height:auto is required - the <img> carries height="520", so without it the
   element keeps that intrinsic height and the row grows to 520px. */
/* The row media has no fixed height, so the image sizes itself normally.
   height:auto is required - the <img> carries height="520". */
.pl .pl-grid--rows .pl-card-media img{ width:100%; height:auto; object-fit:fill; }
.pl .pl-grid--rows .pl-card-body{ padding:12px 15px; gap:4px; min-width:0; }
.pl .pl-grid--rows .pl-card-line{ flex:0; }
.pl .pl-grid--rows .pl-card-foot{ margin-top:auto; padding-top:8px; }

/* ── chips ─────────────────────────────────────────────────────────── */
.pl .pl-purity{
    font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
    color:var(--pl-pass); background:var(--pl-pass-wash);
    border:1px solid var(--pl-pass-line); padding:3px 9px;
    border-radius:var(--radius-full); white-space:nowrap;
}
.pl .pl-flag{
    font-family:var(--pl-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
    padding:4px 9px; border-radius:var(--radius-full); background:var(--accent);
    color:#fff; white-space:nowrap;
}
.pl .pl-flag.badge-hidden{ display:none; }
.pl .pl-flag.badge-new{ background:var(--pl-pass); }
.pl .pl-flag.badge-sale{ background:var(--ink); }
.pl .pl-flag.badge-bestseller{ background:var(--accent); }
.pl .pl-flag.badge-low{ background:#b45309; }
.pl .pl-flag.badge-oos,
.pl .pl-flag--oos{ background:var(--ink-muted); }

/* ── specification table ───────────────────────────────────────────── */
.pl .pl-specs{
    border:1px solid var(--border); border-radius:var(--radius-md);
    overflow:hidden; background:var(--surface);
}
.pl .pl-specs-row{
    display:grid; grid-template-columns:minmax(140px,.9fr) 1.6fr; gap:0;
    border-bottom:1px solid var(--border);
}
.pl .pl-specs-row:last-child{ border-bottom:0; }
.pl .pl-specs-row dt{
    font-family:var(--pl-mono); font-size:10px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-muted);
    padding:14px 18px; background:var(--surface-raised);
    border-right:1px solid var(--border); margin:0; display:flex; align-items:center;
}
.pl .pl-specs-row dd{
    margin:0; padding:14px 18px; font-family:var(--pl-mono);
    font-size:13.5px; color:var(--ink); word-break:break-word;
}
.pl .pl-specs-row dd.pass{ color:var(--pl-pass); font-weight:600; }

/* ── panels ────────────────────────────────────────────────────────── */
.pl .pl-panel{
    border:1px solid var(--border); border-radius:var(--radius-md);
    background:var(--surface); padding:26px 28px;
}
.pl .pl-panel--raised{ background:var(--surface-raised); }
.pl .pl-panel--note{
    border-color:rgba(214,48,49,.34); background:var(--accent-glow);
}
.pl .pl-panel h3{
    font-family:'Outfit',sans-serif; font-weight:700; font-size:19px;
    letter-spacing:-.03em; margin:0 0 10px;
}
.pl .pl-panel p{ margin:0 0 12px; color:var(--ink-soft); font-size:15px; line-height:1.65; }
.pl .pl-panel p:last-child{ margin-bottom:0; }

/* ── measured-result readout ───────────────────────────────────────── */
.pl .pl-readout{
    border:1px solid var(--border); border-radius:var(--radius-md);
    overflow:hidden; background:var(--surface);
}
.pl .pl-readout-head{
    display:flex; align-items:center; gap:10px; padding:13px 18px;
    background:var(--surface-raised); border-bottom:1px solid var(--border);
}
.pl .pl-readout-head .t{ font-family:var(--pl-mono); font-size:11px; letter-spacing:.08em; font-weight:500; }
.pl .pl-readout-head .ok{
    margin-left:auto; font-family:var(--pl-mono); font-size:9.5px; letter-spacing:.1em;
    color:var(--pl-pass); background:var(--pl-pass-wash);
    border:1px solid var(--pl-pass-line); padding:3px 9px; border-radius:4px;
}
.pl .pl-readout-body{ padding:18px 16px 2px; }
.pl .pl-readout svg{ width:100%; height:auto; display:block; }
.pl .pl-gridline{ stroke:var(--border); stroke-width:1; }
.pl .pl-axis{ stroke:var(--ink-muted); stroke-width:1; }
.pl .pl-curve{ fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round; }
.pl .pl-glab{ font-family:var(--pl-mono); font-size:8px; fill:var(--ink-muted); letter-spacing:.05em; }
.pl .pl-gpeak{ font-family:var(--pl-mono); font-size:9px; fill:var(--ink); font-weight:500; }
.pl .pl-glead{ stroke:var(--ink-muted); stroke-width:.7; stroke-dasharray:2 2; }
.pl .pl-readout-facts{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); }
.pl .pl-readout-facts > div{
    padding:13px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.pl .pl-readout-facts > div:nth-child(2n){ border-right:0; }
.pl .pl-readout-facts > div:nth-last-child(-n+2){ border-bottom:0; }
.pl .pl-readout-facts .k{
    font-family:var(--pl-mono); font-size:9px; letter-spacing:.13em;
    color:var(--ink-muted); display:block; margin-bottom:4px;
}
.pl .pl-readout-facts .v{ font-family:var(--pl-mono); font-size:13.5px; font-weight:500; }
.pl .pl-readout-facts .v.pass{ color:var(--pl-pass); }

/* ── stat rail ─────────────────────────────────────────────────────── */
.pl .pl-stats{ display:flex; flex-wrap:wrap; border-top:1px solid var(--border); }
.pl .pl-stats > div{ padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--border); }
.pl .pl-stats > div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.pl .pl-stats .v{
    font-family:'Outfit',sans-serif; font-size:24px; font-weight:700;
    letter-spacing:-.035em; display:block; line-height:1;
}
.pl .pl-stats .k{
    font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); margin-top:7px; display:block;
}

/* ── filters ───────────────────────────────────────────────────────── */
.pl .pl-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.pl .pl-filter{
    font-size:13px; padding:8px 15px; border-radius:var(--radius-full);
    border:1px solid var(--border); color:var(--ink-soft);
    background:var(--surface); text-decoration:none; transition:all .16s ease; white-space:nowrap;
}
.pl .pl-filter:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.pl .pl-filter.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ── search ────────────────────────────────────────────────────────── */
.pl .pl-search input[type="text"],
.pl .pl-search input[type="search"]{
    width:100%; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-full); padding:13px 20px 13px 44px;
    font-family:'DM Sans',sans-serif; font-size:15px; color:var(--ink); outline:0;
}
.pl .pl-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); }
.pl .pl-search{ position:relative; max-width:520px; }
.pl .pl-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.pl .pl-faq{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; }
.pl .pl-faq details{ border-bottom:1px solid var(--border); padding:18px 0; }
.pl .pl-faq summary{
    font-family:'Outfit',sans-serif; font-size:16.5px; font-weight:600; cursor:pointer;
    list-style:none; display:flex; justify-content:space-between; gap:18px; letter-spacing:-.02em;
}
.pl .pl-faq summary::-webkit-details-marker{ display:none; }
.pl .pl-faq summary::after{ content:"+"; color:var(--accent); font-family:var(--pl-mono); font-size:18px; flex-shrink:0; }
.pl .pl-faq details[open] summary::after{ content:"\2212"; }
.pl .pl-faq p{ margin:12px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.7; max-width:62ch; }

/* ── closer ────────────────────────────────────────────────────────── */
.pl .pl-closer{ background:var(--ink); color:#fff; padding:78px 0; text-align:center; }
.pl .pl-closer h2{
    font-family:'Outfit',sans-serif; font-weight:700;
    font-size:clamp(26px,4vw,44px); letter-spacing:-.04em; line-height:1.1; margin:0 0 16px;
}
.pl .pl-closer h2 em{ font-style:normal; color:var(--accent); }
.pl .pl-closer p{ color:#9ea0a8; font-size:17px; max-width:48ch; margin:0 auto 26px; }
.pl .pl-closer-cta{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1080px){
    .pl .pl-faq{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px){
    .pl .pl-shell{ padding:0 18px; }
    .pl .pl-band{ padding:48px 0; }
    .pl .pl-band--tight{ padding:32px 0; }
    .pl .pl-head{ margin-bottom:24px; }
    .pl .pl-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .pl .pl-card-specs{ grid-template-columns:1fr; }
    .pl .pl-stats > div{ flex:1 1 44%; padding:16px 14px 0 0; margin-right:14px; }
    .pl .pl-stats > div:nth-child(2n){ border-right:0; margin-right:0; }
    .pl .pl-specs-row{ grid-template-columns:1fr; }
    .pl .pl-specs-row dt{ border-right:0; border-bottom:1px solid var(--border); padding:10px 16px; }
    .pl .pl-specs-row dd{ padding:12px 16px; }
    .pl .pl-readout-facts{ grid-template-columns:1fr; }
    .pl .pl-readout-facts > div{ border-right:0; }
    .pl .pl-readout-facts > div:nth-last-child(2){ border-bottom:1px solid var(--border); }
    .pl .pl-closer{ padding:56px 0; }
    .pl .pl-closer-cta .pl-btn{ width:100%; }
    .pl .pl-panel{ padding:22px 20px; }
}
@media (max-width:400px){
    .pl .pl-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
    .pl *{ transition:none !important; animation:none !important; }
}

/* ── full-bleed break-out ───────────────────────────────────────────
   Site.master wraps page content in .content-container (max-width:1280px;
   padding:0 32px). This theme is built on edge-to-edge bands — .pl-band--dark
   and .pl-closer are meant to reach the viewport edges — so inside that
   container they read as floating panels with grey gutters.

   The :has() guard means this only fires on pages whose content is wrapped in
   .pl (Default, Products, ProductDetail). Every other page on the site keeps
   the boxed layout it was built for. .pl-shell restores the identical
   1280px / 32px measure inside each band, so text alignment is unchanged. */
.content-container:has(> .pl){
    max-width:none;
    padding-left:0;
    padding-right:0;
    padding-top:0;
}

/* ══════════════════════════════════════════════════════════════════════
   CATALOG LAYOUT
   A light page header and a persistent facet rail. The old pill row was a
   single horizontally-scrolling line that clipped category names on a
   normal desktop; a vertical rail shows all nine with counts, always.
   ══════════════════════════════════════════════════════════════════════ */
.pl .cat-head{ background:var(--surface); border-bottom:1px solid var(--border); padding:26px 0 24px; }
.pl .cat-head-in{ display:grid; grid-template-columns:1fr auto; gap:44px; align-items:start; }
.pl .cat-head h1{
    font-family:'Outfit',sans-serif; font-weight:700; font-size:29px;
    letter-spacing:-.035em; margin:0; color:var(--ink);
}
.pl .cat-head h1 span{ color:inherit; }   /* the literal ships one word wrapped in a span */
.pl .cat-title-row{ display:flex; align-items:baseline; gap:15px; flex-wrap:wrap; }
.pl .cat-count{ font-family:var(--pl-mono); font-size:11.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.pl .cat-sub{ margin:9px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:70ch; }

/* Narrows the claim, permanently, beside the products. */
.pl .cat-conds{ border-left:1px solid var(--border); padding-left:24px; min-width:250px; }
.pl .cat-conds dl{ margin:0; }
.pl .cat-conds > dl > div{
    display:flex; justify-content:space-between; gap:18px;
    padding:6px 0; border-bottom:1px solid var(--border);
}
.pl .cat-conds > dl > div:last-child{ border-bottom:0; }
.pl .cat-conds dt{
    font-family:var(--pl-mono); font-size:9px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-muted); margin:0;
}
.pl .cat-conds dd{ font-family:var(--pl-mono); font-size:11px; margin:0; color:var(--ink-soft); text-align:right; }
.pl .cat-conds dd.pass{ color:var(--pl-pass); }

/* padding-top/bottom only: this element also carries .pl-shell, and the
   shorthand would wipe out its horizontal padding (content lands at x=0). */
.pl .cat-body{ display:grid; grid-template-columns:220px 1fr; gap:34px; padding-top:28px; padding-bottom:64px; align-items:start; }
.pl .facet-h{
    font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-muted); margin:0 0 11px; font-weight:600;
}
.pl .facets{ display:flex; flex-direction:column; border-top:1px solid var(--border); }
.pl .facets a{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--border);
    text-decoration:none; font-size:13.5px; color:var(--ink-soft); transition:color .15s ease;
}
.pl .facets a:hover{ color:var(--accent); text-decoration:none; }
.pl .facets a.active{ color:var(--ink); font-weight:600; }
.pl .facets a.active .n{ color:var(--accent); }
.pl .facets .n{ font-family:var(--pl-mono); font-size:10.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.pl .facet-note{
    border:1px solid var(--border); border-radius:10px; background:var(--surface);
    padding:15px 16px; margin-top:28px; font-size:12.5px; color:var(--ink-soft); line-height:1.62;
}
.pl .facet-note a{ color:var(--accent); font-weight:600; text-decoration:none; }

.pl .cat-tools{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.pl .cat-tools .pl-search{ flex:1; max-width:none; }
.pl .viewtog{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--surface); }
.pl .viewtog button{
    border:0; background:transparent; padding:0 13px; height:44px; cursor:pointer;
    color:var(--ink-muted); display:grid; place-items:center; transition:background .15s, color .15s;
}
.pl .viewtog button + button{ border-left:1px solid var(--border); }
.pl .viewtog button:hover{ color:var(--ink); background:var(--surface-raised); }
.pl .viewtog button.on{ background:var(--ink); color:#fff; }

@media (max-width:1080px){ .pl .pl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1080px){
    .pl .cat-head-in{ grid-template-columns:1fr; }
    .pl .cat-conds{ border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:17px; }
    .pl .cat-body{ grid-template-columns:1fr; }
}
@media (max-width:760px){
    .pl .pl-grid{ grid-template-columns:repeat(2,1fr); }
    .pl .pl-grid--rows{ grid-template-columns:1fr; }
}