/* ============================================================
   Layali 2.0 — Product Catalog
   Extends assets/css/main.css. Editorial, restrained, no
   ecommerce-marketplace or admin-dashboard styling.
   ============================================================ */

/* Slightly deeper off-white page so the white cards and white-background
   product photos stand out. Cards stay white. */
body{--page:#DDD9D1;--line:#C9C4BB;background:var(--page)}

/* ---------- catalog hero / intro ---------- */
.cat-hero{padding:calc(var(--nav-h) + 64px) var(--edge) 48px;max-width:var(--container);margin:0 auto}
.cat-hero .h1{font-size:clamp(34px,4.4vw,58px)}
.cat-hero-lede{max-width:60ch;margin-top:18px}

/* ---------- search ---------- */
.cat-search{max-width:640px;margin-top:40px;position:relative}
.cat-search input{
  width:100%;background:none;border:none;border-bottom:2px solid var(--border);
  font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);padding:10px 32px 10px 0;color:var(--ink);
}
.cat-search input:focus{outline:none;border-color:var(--red)}
.cat-search-clear{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--mid);font-size:13px;font-weight:600;
  cursor:pointer;padding:6px;display:none;
}
.cat-search-clear.visible{display:block}
.cat-search-hint{font-size:12.5px;color:var(--mid);margin-top:10px}

/* ---------- group landing tiles ---------- */
.cat-groups{
  max-width:var(--container);margin:0 auto;padding:8px var(--edge) 96px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
}
.cat-group-tile{
  background:var(--white);padding:40px 32px;text-align:left;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:10px;transition:background .2s var(--ease);
}
.cat-group-tile:hover,.cat-group-tile:focus-visible{background:var(--off)}
.cat-group-tile:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.cat-group-num{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--red)}
.cat-group-name{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--ink)}
.cat-group-desc{font-size:13.5px;color:var(--mid);max-width:36ch}
.cat-group-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid)}
.cat-group-arrow{font-family:var(--sans);color:var(--ink);transition:transform .2s var(--ease)}
.cat-group-tile:hover .cat-group-arrow{transform:translateX(4px)}
.cat-group-tile--wide{grid-column:1 / -1}
@media (max-width:720px){
  .cat-groups{grid-template-columns:1fr}
  .cat-group-tile--wide{grid-column:auto}
}

/* ---------- browsing view (group / search results) ---------- */
.cat-browse{max-width:var(--container);margin:0 auto;padding:0 var(--edge) 120px}
.cat-crumb{
  background:none;border:none;color:var(--mid);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:8px 0;margin-bottom:24px;
}
.cat-crumb:hover{color:var(--red)}
.cat-browse-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.cat-browse-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,42px)}
.cat-browse-count{font-size:13px;color:var(--mid)}

.cat-subfilters{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 40px}
.cat-subfilter{
  border:1px solid var(--border);background:var(--white);padding:9px 16px;
  font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .18s var(--ease);
}
.cat-subfilter:hover{border-color:var(--red);color:var(--red)}
.cat-subfilter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-subfilter:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- results grid / cards ---------- */
.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}}

.cat-card{background:var(--white);display:flex;flex-direction:column;position:relative}
.cat-card .product-photo{aspect-ratio:1/1;background:var(--off)}
.cat-card .product-photo picture,
.cat-card .product-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Restrained product-card interaction: a subtle image scale on hover,
   the same single-property pattern already used for .consumables-feature.
   CSS-only — no JS engine touches this element/property. */
.cat-card:hover .product-photo img{transform:scale(1.025)}
.cat-card-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-card-group{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mid)}
.cat-ref{position:absolute;top:12px;right:12px;font-size:10px;color:var(--mid);background:rgba(255,255,255,.85);padding:3px 7px;z-index:2}

/* pending-photo slot: quieter and more considered than a bare hatch box —
   a small line-icon centered above the label, consistent with the site's
   thin-stroke editorial icon language used elsewhere (hero collage, HD panels) */
.cat-photo-empty{gap:10px}
.cat-photo-icon{width:34px;height:34px;color:var(--border);opacity:.9}

.cat-variants{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cat-variant-chip{border:1px solid var(--border);font-size:11px;padding:4px 9px;color:var(--mid)}

/* verified details (brand/manufacturer/model/pack size/specs) — only
   rendered when a record actually supplies them */
.cat-details{margin-top:2px;display:flex;flex-direction:column;gap:3px}
.cat-detail-row{display:flex;gap:6px;font-size:12px;color:var(--ink)}
.cat-detail-row dt{color:var(--mid);font-weight:500}
.cat-detail-row dt::after{content:":"}
.cat-detail-row dd{margin:0}

.cat-status-pill{
  display:inline-flex;align-self:flex-start;margin-top:2px;
  font-size:10.5px;letter-spacing:.4px;color:var(--mid);
  border:1px solid var(--border);padding:4px 10px;text-transform:uppercase;
}

/* ---------- verified manufacturer products (secondary to the generic
   catalog entry, which stays the card's primary heading) ---------- */
.cat-verified-block{
  display:flex;flex-direction:column;gap:14px;margin-top:4px;
  padding-top:12px;border-top:1px solid var(--border);
}
.cat-verified-item{display:flex;flex-direction:column;gap:4px}
.cat-verified-mfr{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mid)}
.cat-verified-brand{font-size:14px;font-weight:600;color:var(--ink)}
.cat-verified-item .cat-details{margin-top:2px}
.cat-verified-item .cat-variants{margin-top:2px}

/* When a record shows more than one manufacturer photo, each one gets its
   own small labeled thumbnail so the photo-to-manufacturer link is never
   ambiguous -- single-manufacturer cards are unaffected by this rule. */
.cat-verified-item--with-thumb{flex-direction:row;gap:12px;align-items:flex-start}
.cat-verified-thumb{
  flex:0 0 56px;width:56px;height:56px;overflow:hidden;background:var(--off);
  border:1px solid var(--border);
}
.cat-verified-thumb picture,.cat-verified-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cat-verified-text{display:flex;flex-direction:column;gap:4px;min-width:0}

/* ---------- empty state ---------- */
.cat-empty{padding:80px var(--edge);text-align:center;max-width:520px;margin:0 auto}
.cat-empty h3{font-family:var(--serif);font-weight:700;font-size:24px;margin-bottom:12px}
.cat-empty p{color:var(--mid);font-size:14px;margin-bottom:20px}

/* ---------- reveal (respects reduced motion via main.css rule) ---------- */
.cat-fade{opacity:0;transition:opacity .35s var(--ease)}
.cat-fade.is-in{opacity:1}
@media (prefers-reduced-motion: reduce){
  .cat-fade{opacity:1;transition:none}
  .product-photo img{transition:none}
  .cat-card:hover .product-photo img{transform:none}
  .cat-group-arrow{transition:none}
}

[hidden]{display:none !important}

/* separators and photo panels tuned for the deeper page tone */
.cat-groups,.cat-grid{background:transparent;gap:2px}
.cat-group-tile,.cat-card{box-shadow:0 0 0 1px var(--line)}
.cat-card .product-photo,.cat-verified-thumb{background:#fff}
.cat-search input{border-bottom-color:#B9B4AA}
.cat-subfilter{border-color:#C4BFB5}
footer{margin-top:0}