/* ==========================================================================
   pages/catalogue.css — layout used only by lifecare.php (the product catalogue)
   Ported from selected_theme/products-5-softclay.html
   Renamed to avoid collisions with shared components:
     .chip → .filter-chip · bare select → .filter-select · .mast → .cat-intro
   Each product is a row link (.pl-row) that opens its product page.
   ========================================================================== */

/* --stick: how far below the viewport top the filter bar sits when stuck —
   the sticky header (.9rem offset + ~66px pill bar) plus a small gap. */
.page-catalogue{--stick:5.6rem;scroll-padding-top:calc(var(--stick) + 11rem)}

/* ---- intro ---- */
.cat-intro{padding:1.8rem 0 1.4rem;position:relative;z-index:2}
.cat-intro .wrap{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.cat-intro h1{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.35rem;line-height:1.12}
.cat-intro p{font-size:.9rem;color:var(--muted)}
.mast-actions{margin-left:auto;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:.45rem .9rem;background:var(--surface);box-shadow:var(--raise-sm);
  border-radius:999px;color:var(--peri-ink)}
.dl-btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;
  font-size:.83rem;font-weight:700;padding:.62rem 1.1rem;cursor:pointer;
  background:var(--grad);color:#fff;border-radius:16px;
  box-shadow:8px 8px 18px rgba(85,102,224,.35),-6px -6px 16px rgba(255,255,255,.9);
  transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.dl-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dl-btn small{font-size:.7rem;font-weight:600;letter-spacing:.04em}
.dl-btn:hover{transform:translateY(-3px);color:#fff;
  box-shadow:12px 12px 26px rgba(85,102,224,.42),-8px -8px 20px rgba(255,255,255,.95)}
.dl-btn:active{transform:translateY(0);box-shadow:var(--press-sm)}

/* ---- sticky filter bar: sticks just below the shared header.
   While stuck (.stuck, set by catalogue.js) a cover fills the strip behind the
   header so result rows don't show through around the pill. ---- */
.controls{position:sticky;top:var(--stick);z-index:50;
  background:rgba(234,237,247,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.controls.stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--stick);
  background:rgba(234,237,247,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.controls .wrap{padding:.6rem 0 .8rem}
.searchbar{position:relative;display:flex;align-items:center;gap:.7rem}
.searchbar svg{position:absolute;left:1rem;width:19px;height:19px;pointer-events:none;color:var(--muted)}
#q{flex:1;min-width:0;font-size:1rem;padding:.85rem 2.6rem .85rem 2.9rem;border:none;border-radius:18px;
  background:var(--surface);color:var(--ink);box-shadow:var(--press-sm);transition:box-shadow .2s}
#q:focus{box-shadow:var(--press-sm),0 0 0 3px rgba(123,140,245,.35)}
#q::placeholder{color:#7d839f}
.kbd{position:absolute;right:.8rem;font-size:.7rem;padding:.1rem .4rem;color:var(--muted);border-radius:8px;
  background:var(--surface);box-shadow:var(--raise-sm)}
#q:not(:placeholder-shown) ~ .kbd{display:none}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.8rem}
.filter-chip{font-size:.83rem;font-weight:600;padding:.42rem .85rem;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:.45rem;transition:all .22s ease;
  background:var(--surface);color:var(--ink-soft);border-radius:999px;box-shadow:var(--raise-sm)}
.filter-chip:hover{color:var(--peri-ink)}
.filter-chip .n{font-size:.72rem;font-weight:700;color:var(--muted)}
.filter-chip[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:var(--press-sm)}
.filter-chip[aria-pressed="true"] .n{color:#fff}
.sep{width:1px;height:22px;margin:0 .3rem;background:#cfd4ea}
.filter-select{font-size:.83rem;font-weight:600;cursor:pointer;max-width:min(20rem,60vw);
  padding:.42rem 1.9rem .42rem .85rem;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;
  background-position:right .55rem center;background-size:16px;
  color:var(--ink-soft);background-color:var(--surface);border:none;border-radius:999px;box-shadow:var(--raise-sm);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234a5075'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E")}
.filter-select.on{background-color:#5566e0;color:#fff;box-shadow:var(--press-sm);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E")}
.filter-select option{color:var(--ink);background:#fff}
.reset{border:none;background:none;font-size:.83rem;font-weight:600;cursor:pointer;padding:.42rem .5rem;
  color:var(--peri-ink);border-radius:12px}
.reset:hover{background:#e3e7f8}
.reset[hidden]{display:none}
.status{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:.75rem;font-size:.85rem;color:var(--muted)}
.status b{color:var(--ink)}

/* ---- results ---- */
.results{padding:2rem 0 2rem}
.division{margin-bottom:2.6rem}
.division > h2{display:flex;align-items:center;gap:.75rem;font-size:clamp(1.15rem,2.4vw,1.5rem);
  padding-bottom:.2rem;margin-bottom:1.2rem;line-height:1.12}
.division > h2 .cnt{margin-left:auto;font-family:"Plus Jakarta Sans",sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.25rem .75rem;color:var(--muted);background:var(--surface);
  border-radius:999px;box-shadow:var(--raise-sm);white-space:nowrap}
.division.nutra > h2{color:var(--mint-ink)}
.cat{overflow:hidden;background:var(--surface);border-radius:28px;box-shadow:var(--raise);margin-bottom:1.5rem}
.cat > h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;line-height:1.35;
  color:#fff;background:var(--grad);margin:.75rem;border-radius:18px;padding:.7rem 1.1rem}
.nutra .cat > h3{background:var(--mint);color:var(--ink)}
.cat > h3 .dev{font-size:.62rem;letter-spacing:.12em;padding:.12rem .55rem;background:var(--butter);color:#5a3d05;border-radius:999px}
.cat > h3 .n{margin-left:auto;font-weight:600;letter-spacing:.1em;color:#fff}
.nutra .cat > h3 .n{color:var(--ink)}

/* product rows: two columns like the brochure table; the whole row opens the product page */
.pl-head{display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr) auto;gap:1.1rem;padding:.6rem 1.1rem;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid #dde1f2}
.pl-head::after{content:"";width:6.4rem}
.pl-list{list-style:none}
.pl-item[hidden],.division[hidden],.cat[hidden],.empty[hidden]{display:none!important}
.pl-row{display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr) auto;gap:.3rem 1.1rem;align-items:start;
  padding:.72rem 1.1rem;font-size:.93rem;color:var(--ink-soft);border-bottom:1px solid #e2e6f4;transition:background .2s}
.pl-item:last-child .pl-row{border-bottom:none}
.pl-row:hover{background:#e8ebf7}
.pl-name{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .55rem;font-weight:600;color:var(--ink)}
.pl-name.is-usage{font-weight:500;font-size:.84rem;color:var(--muted)}
.pl-name .none{font-weight:400;font-style:italic;color:var(--ink-soft)}
.pl-thumb{flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--hi);box-shadow:var(--press-sm)}
.pl-thumb img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.pl-tag{font-size:.6rem;font-weight:800;letter-spacing:.12em;padding:.12rem .45rem;border-radius:999px;
  color:var(--coral-ink);background:var(--surface);box-shadow:var(--press-sm)}
.pl-desc{display:grid;gap:.25rem}
.pl-use{font-size:.84rem;color:var(--muted)}
.pl-use b{font-weight:700}
.pl-more{align-self:center;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--peri-ink);padding:.18rem .55rem;border-radius:999px;background:var(--surface);box-shadow:var(--raise-sm)}
.pl-row:hover .pl-more{box-shadow:var(--press-sm)}
.pl-row:hover .pl-name{color:var(--peri-ink)}
.pl-row:focus-visible{outline-offset:-3px;border-radius:14px}
.results mark{border-radius:3px;padding:0 .12em;background:var(--butter);color:#5a3d05}

.empty{text-align:center;padding:4rem 1rem;color:var(--muted)}
.empty h2{font-size:1.3rem;margin-bottom:.5rem;color:var(--ink)}
.empty .empty-reset{display:inline-block;margin-top:1.1rem;font-weight:600;padding:.7rem 1.4rem;cursor:pointer;
  background:var(--grad);color:#fff;border-radius:999px;box-shadow:var(--raise-sm)}

/* ---- manufacturer details + disclaimer (above the footer) ---- */
.cat-note{position:relative;z-index:2;padding:1rem 0 0}
.cat-note .pnote{margin-top:0;padding:1.8rem clamp(1.2rem,3vw,2rem);font-size:.88rem;color:var(--ink-soft)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.cat-note h2{font-size:1.05rem;margin-bottom:.6rem;color:var(--ink)}
.cat-note ul{list-style:none;display:grid;gap:.35rem}
.cat-note a{color:var(--peri-ink);font-weight:600}
.cat-note a:hover{text-decoration:underline}
.cat-note .note{margin-top:1.6rem;padding-top:1.3rem;font-size:.8rem;border-top:1px solid #d5d9ec;color:var(--muted)}

@media(max-width:860px){
  .fgrid{grid-template-columns:1fr;gap:1.4rem}
  .pl-head,.pl-row{grid-template-columns:minmax(0,34%) minmax(0,1fr) auto}
}
@media(max-width:620px){
  .page-catalogue{--stick:5.4rem}
  .mast-actions{margin-left:0;width:100%;justify-content:flex-start}
  .dl-btn{flex:1;justify-content:center}
  .controls .wrap{padding:.5rem 0 .6rem}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:.35rem 4vw .45rem;
    margin:.55rem -4vw 0}
  .filters::-webkit-scrollbar{display:none}
  .filters > *{flex:none}
  .sep{display:none}
  #q{font-size:16px;padding-block:.75rem}
  .status{margin-top:.35rem;font-size:.8rem}
  .pl-head{display:none}
  .pl-row{grid-template-columns:1fr;gap:.25rem;padding:.75rem 1rem}
  .pl-name{font-size:.98rem}
  .pl-more{justify-self:start;margin-top:.2rem}
}
/* short landscape screens: let the filter bar scroll away so results keep the screen */
@media(max-height:520px){
  .controls{position:relative}
}

@media print{
  .controls,.mast-actions,.back,.site-footer{display:none!important}
  .page-catalogue body{background:#fff;color:#111;font-size:11px}
  .cat-intro{padding:0 0 1rem}
  .cat{box-shadow:none;border:1px solid #ccd;border-radius:10px;break-inside:auto}
  .cat > h3{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pl-item{break-inside:avoid}
  .pl-row:hover{background:none}
  .pl-more,.pl-head::after{display:none}
  .division > h2 .cnt{box-shadow:none}
  .cat-note .pnote{box-shadow:none;border:1px solid #ccd}
  .wrap{width:100%}
}