/* ==========================================================================
   CATALOGUE RESTYLE — LIVE look (tokens layer)
   --------------------------------------------------------------------------
   Loaded AFTER styles.css on catalogue.html only. Overrides via the existing
   class names; no JS, data, text, or logic changes. Tokens measured from
   surgronic.com (see ~/workspace/surgronic/DESIGN-TOKENS.md):
   - Card body #111F36 (gradient to #0B172A), border 1px #1E3050, radius 12px
   - Image area 180px tall, white #FFFFFF; grid gap 24px; container 1280px
   - Muted text #94A3B8; WhatsApp #25D366; "In stock" mint #DFF8E8 / #065F46
   - Accent uses the existing var(--blue-500) (the site-wide accent the
     homepage restyle already uses) rather than a second blue.
   - LIVE hover rule: NO background change, subtle shadow/lift only.
   - The catalogue content section is dark #0B172A, matching LIVE's
     "Instruments buyers ask for" grid section — which also fixes the filter
     selects (white text, designed for dark) that sat on a white section.
   - NEVER add overflow (hidden/clip) to .catalog-hero, .search-bar or
     .container: the live-search dropdown (.live-drop) is absolutely
     positioned inside the search bar and must extend below the hero.
   ========================================================================== */

/* ---------- Container: LIVE 1280px (291px cards at 4-up) ---------- */
.catalog-hero .container,
.catalog-hero + section .container{max-width:1280px;padding:0 20px}

/* ---------- Catalogue hero: LIVE navy + faint grid + hairline ---------- */
.catalog-hero{
  background-color:#060E1E;
  background-image:
    linear-gradient(rgba(15,28,50,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,28,50,.55) 1px,transparent 1px);
  background-size:56px 56px;
  border-bottom:1px solid #1E3050;
}
.catalog-hero h1{letter-spacing:-.02em}
.catalog-hero p{color:#94A3B8;font-size:1.05rem;line-height:1.6;max-width:640px}

/* Search input: LIVE input tokens (#1B283C, 1px #24344D, radius 12px) */
.search-bar input{background:#1B283C;border:1px solid #24344D;border-radius:12px}
.search-bar input::placeholder{color:#64748B}

/* LIVE button hover (page-wide on the catalogue): no background change,
   subtle lift + shadow only. */
.btn-primary:hover{background:var(--blue-500);transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,137,245,.35)}

/* ---------- Content section: LIVE dark grid section ---------- */
.catalog-hero + section{background:#0B172A}

/* ---------- Filter bar: LIVE input tokens ---------- */
.filters select{background:#1B283C;border:1px solid #253145;border-radius:12px;color:#fff}
.filters select option{color:#0B1526}

/* ---------- Meta line + view toggle (dark) ---------- */
.catalog-meta{color:#94A3B8}
.catalog-meta b{color:#fff}
.view-toggle{border:1px solid #1E3050}
.view-toggle button{background:transparent;color:#94A3B8}
.view-toggle button.on{background:var(--blue-500);color:#fff}
.view-toggle button + button{border-inline-start:1px solid #1E3050}

/* ---------- Grid: 4-up, 24px gap (desktop only — the responsive
   column rules in styles.css keep working below 1024px) ---------- */
@media (min-width:1025px){
  .catalog-grid{grid-template-columns:repeat(4,1fr);gap:24px}
}

/* ---------- Product card: LIVE dark card ---------- */
.product-card{
  background:linear-gradient(180deg,#111F36 0%,#0B172A 100%);
  border:1px solid #1E3050;
  border-radius:12px;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.35)}
/* Image area: 180px tall, white, image contained with breathing room */
.product-card .pimg{background:#fff;height:180px;aspect-ratio:auto}
.product-card .pimg img{padding:12px}
/* Body: LIVE padding 22px sides / 24px top / 32px bottom */
.product-card .pbody{padding:24px 22px 32px;gap:8px}
/* SKU: 11px uppercase, letter-spaced, muted */
.product-card .psku{font-size:11px;color:#94A3B8;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Name: 16px/700 white, 2 lines, 21px pitch */
.product-card h3{
  font-size:16px;font-weight:700;line-height:21px;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-height:42px;
}
.product-card h3 a{color:#fff}
.product-card h3 a:hover{color:var(--blue-500)}
/* Brand left (12px muted) / "View details" right (13px blue) */
.product-card .pbrand{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:#94A3B8}
.product-card .plink-view{font-size:13px;color:var(--blue-500);margin-left:0}
/* Price pill over the image: white pill, dark text (the LIVE "In stock"
   mint is reserved for .por.stock, which cardHTML never emits today —
   availability is "unknown" for all products, so no stock badge is claimed). */
.product-card .por{
  background:#fff;color:#0B1526;border:1px solid #E2E8F0;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.product-card .por.stock{background:#DFF8E8;color:#065F46;border-color:#DFF8E8}
/* Buttons: pill, LIVE proportions (Add to Quote wider than WhatsApp),
   LIVE hover (no background change, lift + shadow only) */
.product-card .pfoot{gap:10px;padding-top:14px}
.product-card .btn-add-quote{
  flex:1.5 1 0;background:var(--blue-500);border-color:var(--blue-500);color:#fff;
  border-radius:999px;min-height:41px;padding:10px 8px;font-size:13px;font-weight:700;
}
.product-card .btn-add-quote:hover{background:var(--blue-500);border-color:var(--blue-500);transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.product-card .btn-wa{
  flex:1 1 0;background:transparent;border:1px solid #25D366;color:#25D366;
  border-radius:999px;min-height:41px;padding:10px 8px;font-size:13px;font-weight:700;
}
.product-card .btn-wa:hover{background:transparent;border-color:#25D366;color:#25D366;transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.35)}

/* List view: same dark card, row layout untouched (image keeps full height) */
.catalog-grid.list .product-card .pbody{padding:24px 22px}

/* ---------- Pagination: LIVE ghost pills ---------- */
.pagination button{
  background:transparent;border:1px solid var(--blue-500);color:#fff;
  font:600 14px var(--font-display);padding:10px 22px;border-radius:999px;
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s;
}
.pagination button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.pagination button:disabled{opacity:.45;cursor:not-allowed;border-color:#1E3050;color:#94A3B8}
.pg-info{color:#94A3B8}

/* ---------- Skeleton: dark shimmer matching the dark cards ---------- */
.skel{background:#111F36;border:1px solid #1E3050;border-radius:12px}
.skel .sk-img{height:180px;aspect-ratio:auto;background:linear-gradient(100deg,#16263F 40%,#22365A 50%,#16263F 60%);background-size:200% 100%;animation:shimmer 1.6s infinite}
.skel .sk-body{padding:24px 22px}
.skel .sk-l{height:13px;border-radius:7px;margin-bottom:10px;background:linear-gradient(100deg,#16263F 40%,#22365A 50%,#16263F 60%);background-size:200% 100%;animation:shimmer 1.6s infinite}

/* ---------- Live-search dropdown: LIVE hairline + radius (white panel) ---------- */
.live-drop{border:1px solid #E2E8F0;border-radius:12px}

/* ---------- "Can't find it?" panel: LIVE CTA border (its navy background
   and radius come from the inline style — deliberately not fought with
   !important; #08142A on #0B172A reads as a slightly darker panel) ---------- */
.cant-find{border:1px solid #1E3050}

/* ---------- Reduced motion: no shimmer, no lift ---------- */
@media (prefers-reduced-motion: reduce){
  .skel .sk-img,.skel .sk-l{animation:none}
  .product-card,.product-card .pimg img,.pagination button{transition:none}
  .product-card:hover{transform:none}
}

/* ---------- Small screens: keep the mobile card padding + touch targets ---------- */
@media (max-width:480px){
  .catalog-hero .container,
  .catalog-hero + section .container{padding:0 16px}
  .product-card .pbody{padding:16px 14px 20px}
  .product-card .btn-add-quote,.product-card .btn-wa{min-height:44px}
  .skel .sk-img{height:140px}
  .skel .sk-body{padding:16px 14px}
}