/* =========================================================
   SYROHCHEM — PRODUCT CATALOGUE (v3)
   Extends the tokens defined in home.css (:root) — colors,
   IBM Plex Sans / Inter, .section/.eyebrow/.btn are inherited,
   not redefined here.

   v3 direction: v2's pill-bar + plain card grid read like a
   generic reagent-catalogue template and didn't feel like the
   rest of this site. This pass borrows the homepage's own
   devices instead of inventing new ones:
     — the numbered index card (01, 02, 03…) used in
       "Industries We Serve" / "Why Choose Syrohchem"
     — the eyebrow + serif-heading pairing used before every
       section heading site-wide
     — the stat strip under the hero, same shape as the
       homepage's "ISO 9001:2015 / 2nd Global Producer / >99.99%
       Purity / 8,700 m²" credential bar

   Signature retained from v2: IBM Plex Mono is reserved entirely
   for data — CAS numbers, product codes, molecular formulas,
   weights — the same convention a Certificate of Analysis uses
   to separate identifiers from prose.

   -----------------------------------------------------------
   MODIFICATION (this pass): .page-hero brought in line with the
   About Us hero (about.css → .sy-hero) that was recently made
   more compact there. Two things were matched, both flagged with
   inline comments at their rules below:
     1. Hero SIZE — vertical padding scaled down by the same
        proportion the About hero's min-height/padding-bottom
        were reduced (720px→540px, 70px→44px), instead of the
        original tall 120px/92px padding.
     2. Hero TYPOGRAPHY — h1 and lede sizes/line-heights now
        match the About hero's h1 (clamp(2.1rem,4.2vw,3.35rem))
        and lede (1.14rem / line-height 1.85) exactly, so the two
        hero sections read as the same design across pages.
   Nothing else on this page (filters, product grid, modal, etc.)
   was touched.
   ========================================================= */

.mono{ font-family:'IBM Plex Mono', monospace; }

/* =========================================================
   PAGE HEADER
   ========================================================= */
.page-hero{
  position:relative;
  /* -----------------------------------------------------------
     FIX: heading was clipped behind the floating navbar.
     This page never used the site's shared navbar-clearance
     wrapper (.sh-hero-offset, the same class about.php uses on
     its hero-copy wrapper) — instead it relied on a manually
     guessed padding-top (120px, then 86px in the last pass).
     The navbar floats over the hero rather than pushing it down
     in normal flow, so once that manual padding-top dropped
     below the navbar's real height, the H1 started rendering
     underneath/behind it (see screenshot).

     Fix: padding-top is now 0 here, and navbar clearance is
     provided by adding the .sh-hero-offset class to
     .page-hero-inner below (see product.php) — the same
     CSS-variable-driven offset the About Us hero uses, so it
     stays correct at every breakpoint automatically instead of
     being re-guessed by hand.
     ----------------------------------------------------------- */
  padding-top:0;
  /* was: padding: 120px 0 92px; then 86px 0 58px;
     Bottom padding kept from the previous compact-hero pass —
     only the top offset mechanism changed. */
  padding-bottom:58px;
  overflow:hidden;
  border-bottom:3px solid var(--bronze);
  background:
    linear-gradient(100deg, rgba(9,20,38,0.94) 0%, rgba(11,26,46,0.86) 42%, rgba(11,26,46,0.68) 100%),
    url('https://images.pexels.com/photos/11703173/pexels-photo-11703173.jpeg?auto=compress&cs=tinysrgb&w=1920') center 30% / cover no-repeat;
  background-color:var(--navy-900);
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
  background-size:28px 28px;
  opacity:0.5;
}
.page-hero-inner{ position:relative; z-index:1; max-width:640px; }
.page-hero .eyebrow{ color:#E4C68F; border-color:var(--bronze); }
.page-hero h1{
  color:var(--white);
  /* was: font-size: clamp(2rem, 4vw, 2.9rem);
     Matched to the About Us hero's h1 size exactly
     (about.css → .sy-hero__title) for visual consistency
     between the two hero sections. */
  font-size:clamp(2.1rem, 4.2vw, 3.35rem);
  line-height:1.18;
  margin-bottom:18px;
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
}
.page-hero-lede{
  color:rgba(255,255,255,0.8);
  /* was: font-size: 1rem; line-height: 1.7;
     Matched to the About Us hero's lede paragraph
     (about.css → .sy-hero__lede: 1.14rem / line-height 1.85). */
  font-size:1.14rem;
  line-height:1.85;
  max-width:520px;
  margin:0 0 8px;
}
.page-breadcrumb{
  display:flex; align-items:center; gap:10px; list-style:none; margin:22px 0 0; padding:0;
  font-size:0.86rem; color:rgba(255,255,255,0.55);
}
.page-breadcrumb li + li::before{ content:'/'; margin-right:10px; color:rgba(255,255,255,0.3); }
.page-breadcrumb a{ color:rgba(255,255,255,0.75); transition:color .2s ease; }
.page-breadcrumb a:hover{ color:var(--bronze); }
.page-breadcrumb li[aria-current="page"]{ color:#E4C68F; }

/* =========================================================
   STAT STRIP — same shape as the homepage's credential bar,
   sat directly under the hero so the page reads as continuous
   with the site rather than a bolted-on catalogue.
   ========================================================= */
.catalogue-stats{
  position:relative;
  z-index:2;
  /* was: margin-top: -64px;
     Scaled down to match the shorter hero above it, so the stat
     strip still overlaps the hero's bottom edge by the same
     visual proportion as before instead of sitting awkwardly high
     or low against the new, shorter hero. */
  margin-top:-46px;
  padding:0 0 40px;
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  background:var(--navy-800, var(--navy-900));
  border-radius:var(--radius-md);
  box-shadow:0 24px 48px -20px rgba(11,20,36,0.45);
  overflow:hidden;
}
.stat-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:26px 24px;
  text-align:center;
  border-left:1px solid rgba(255,255,255,0.1);
}
.stat-item:first-child{ border-left:none; }
.stat-num{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700;
  color:var(--white);
  letter-spacing:0.01em;
}
.stat-label{
  font-size:0.74rem; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase;
  color:#E4C68F;
}

/* =========================================================
   FILTER — numbered category index
   ========================================================= */
.filter-index{
  background:var(--slate-50);
  border-bottom:1px solid var(--line);
  padding:36px 0 28px;
}
.cat-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 30px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.cat-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 2px 16px;
  background:none;
  border:none;
  font-family:var(--font-body);
  font-size:0.95rem; font-weight:600;
  color:var(--slate-500);
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s ease;
}
.cat-tab::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.cat-tab:hover{ color:var(--navy-800); }
.cat-tab.active{ color:var(--navy-900); }
.cat-tab.active::after{ transform:scaleX(1); }

.cat-tab-count{
  font-size:0.72rem; font-weight:700;
  color:var(--slate-500);
  background:var(--slate-100);
  border-radius:999px;
  padding:2px 8px;
}
.cat-tab.active .cat-tab-count{
  color:var(--bronze-dark);
  background:rgba(var(--bronze-rgb),0.12);
}

.filter-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.grade-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.grade-chip{
  position:relative;
  display:inline-flex; align-items:center;
  height:36px; padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:0.82rem; font-weight:600;
  color:var(--slate-700);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.grade-chip:hover{ border-color:var(--bronze); }
.grade-chip input{ position:absolute; opacity:0; width:0; height:0; }
.grade-chip input:checked ~ span{ color:var(--bronze-dark); }
.grade-chip:has(input:checked){
  background:rgba(var(--bronze-rgb),0.1);
  border-color:var(--bronze);
}

.filter-search{
  position:relative;
  height:38px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
}
.filter-search i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--slate-500); font-size:13px;
}
.filter-search input{
  width:220px; height:100%;
  padding:0 14px 0 36px;
  border:none; background:transparent;
  border-radius:999px;
  font-family:var(--font-body); font-size:0.85rem; color:var(--ink);
}
.filter-search input:focus{ outline:none; }
.filter-search input::placeholder{ color:var(--slate-500); }

.filter-reset{
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--slate-700);
  font-family:var(--font-body); font-weight:600; font-size:0.82rem;
  cursor:pointer;
  margin-left:auto;
  transition:border-color .2s ease, color .2s ease;
}
.filter-reset:hover{ border-color:var(--bronze); color:var(--bronze-dark); }
.filter-reset-inline{ margin:20px auto 0; padding:11px 22px; height:auto; }

/* =========================================================
   CATALOGUE — results toolbar + card grid
   ========================================================= */
.catalogue-section{ padding:48px 0 104px; background:var(--white); }

.results-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:20px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.results-count{ font-size:0.88rem; color:var(--slate-500); }
.results-count strong{ font-family:var(--font-display); color:var(--navy-800); font-weight:700; }

.results-sort{ display:flex; align-items:center; gap:10px; }
.results-sort label{ font-size:0.8rem; color:var(--slate-500); font-weight:600; }
.results-sort select{
  height:38px; padding:0 32px 0 12px;
  border:1px solid var(--line); border-radius:6px;
  background:var(--white);
  font-family:var(--font-body); font-size:0.85rem; color:var(--ink);
  cursor:pointer;
}
.results-sort select:focus{ outline:none; border-color:var(--bronze); }

/* ---------------------------------------------------------
   PRODUCT GRID + CARD
--------------------------------------------------------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
}

.product-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--white);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.product-card:hover{
  border-color:rgba(var(--bronze-rgb),0.4);
  box-shadow:0 16px 32px -20px rgba(11,26,46,0.35);
  transform:translateY(-3px);
}

.product-media{
  position:relative;
  height:200px;
  background:var(--slate-100);
  overflow:hidden;
}
.product-media img{ width:100%; height:100%; object-fit:cover; }

.media-grade{
  position:absolute; left:12px; bottom:12px;
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--navy-800);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--line);
  padding:3px 10px;
  border-radius:999px;
}

/* Card index numeral: same 01/02/03 numbering language used on
   the homepage's numbered cards, pinned top-left over the image. */
.card-index{
  position:absolute; top:12px; left:12px;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--bronze);
  font-family:var(--font-display);
  font-size:0.8rem; font-weight:700;
  box-shadow:0 3px 8px rgba(11,26,46,0.35);
}

.product-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px 22px 22px;
}

.product-heading{ margin-bottom:10px; }
.product-code{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem; font-weight:600;
  color:var(--bronze-dark);
  margin-bottom:4px;
}
.product-title{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; line-height:1.3; }
.product-title a{ color:var(--ink); transition:color .2s ease; }
.product-title a:hover{ color:var(--bronze-dark); }
.product-synonym{ font-size:0.82rem; color:var(--slate-500); font-style:italic; margin-top:3px; }
.product-cas{ font-size:0.76rem; color:var(--slate-500); margin-top:4px; }

.product-desc{
  font-size:0.86rem; color:var(--slate-700); line-height:1.6;
  margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- specimen strip: COA-style data row ---- */
.specimen-strip{
  display:flex; flex-wrap:wrap; gap:14px 20px;
  padding:14px 16px;
  margin:0 0 18px;
  background:var(--slate-50);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
}
.specimen-strip > div{ display:flex; flex-direction:column; gap:2px; }
.specimen-strip dt{
  font-size:0.63rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase;
  color:var(--slate-500);
}
.specimen-strip dd{
  margin:0;
  font-size:0.82rem; font-weight:600;
  color:var(--navy-800);
}
.specimen-strip dd.mono{ font-weight:500; letter-spacing:0.01em; }
.specimen-strip dd sub{ font-size:0.72em; }

/* ---- actions row ---- */
.product-actions{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.product-docs{ display:flex; gap:8px; }
.doc-link{
  display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 12px;
  border:1px solid var(--line); border-radius:6px;
  font-size:0.78rem; font-weight:600; color:var(--navy-700);
  background:var(--white);
  transition:border-color .2s ease, color .2s ease;
}
.doc-link:hover{ border-color:var(--bronze); color:var(--bronze-dark); }

.product-view-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px;
  background:var(--navy-900); color:var(--white);
  border-radius:6px;
  font-size:0.82rem; font-weight:600;
  white-space:nowrap;
  transition:background .2s ease, gap .2s ease;
}
.product-view-btn:hover{ background:var(--bronze-dark); gap:9px; }

/* =========================================================
   EMPTY / LOADING STATE
   ========================================================= */
.catalogue-empty{
  text-align:center;
  padding:96px 24px;
  background:var(--slate-50);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.catalogue-empty i{ font-size:2.4rem; color:var(--bronze); margin-bottom:16px; display:block; }
.catalogue-empty h3{ font-size:1.1rem; margin-bottom:6px; }

/* =========================================================
   PRODUCT DETAIL MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0;
  z-index:1000;
  background:rgba(11,20,36,0.6);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:modalFade .2s ease;
}
@keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }

.modal-box{
  position:relative;
  width:100%; max-width:820px;
  max-height:min(720px, 90vh);
  overflow-y:auto;
  display:grid;
  grid-template-columns:280px 1fr;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:0 30px 60px -20px rgba(11,20,36,0.5);
  animation:modalRise .25s ease;
}
@keyframes modalRise{ from{ opacity:0; transform:translateY(14px) scale(0.98); } to{ opacity:1; transform:none; } }

.modal-close{
  position:absolute; top:14px; right:14px;
  z-index:2;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(11,20,36,0.55);
  color:var(--white);
  font-size:0.9rem;
  cursor:pointer;
  transition:background .2s ease;
}
.modal-close:hover{ background:var(--bronze-dark); }

.modal-media{
  position:relative;
  min-height:220px;
  background:var(--slate-100);
}
.modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.modal-content{
  padding:32px 32px 28px;
  display:flex;
  flex-direction:column;
}

.modal-heading{ margin-bottom:14px; padding-right:32px; }
.modal-title{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--navy-900); line-height:1.25; margin-top:4px; }

.modal-desc{
  font-size:0.92rem; color:var(--slate-700); line-height:1.65;
  margin-bottom:22px;
}

.modal-specs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px 24px;
  padding:18px 20px;
  margin:0 0 24px;
  background:var(--slate-50);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
}
.modal-specs > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.modal-specs dt{
  font-size:0.66rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase;
  color:var(--slate-500);
}
.modal-specs dd{
  margin:0;
  font-size:0.92rem; font-weight:600;
  color:var(--navy-800);
  word-break:break-word;
}
.modal-specs dd.mono{ font-weight:500; letter-spacing:0.01em; }
.modal-specs dd sub{ font-size:0.72em; }

.modal-actions{
  margin-top:auto;
  display:flex; flex-wrap:wrap; gap:10px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.modal-actions .product-view-btn{ margin-left:auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .catalogue-stats{ margin-top:-40px; }
  .stats-row{ grid-template-columns:repeat(2, 1fr); }
  .stat-item:nth-child(3){ border-left:none; }
  .filter-controls{ justify-content:space-between; }
  .filter-search input{ width:100%; }
  .product-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width:640px){
  /* was: padding: 96px 0 64px; then 70px 0 46px;
     padding-top stays 0 (see .sh-hero-offset fix above, which is
     responsive on its own via CSS variables); only the bottom
     padding is scaled down here to match the shorter hero. */
  .page-hero{ padding-top:0; padding-bottom:46px; }
  .catalogue-stats{ margin-top:-32px; }
  .stats-row{ grid-template-columns:repeat(2, 1fr); }
  .stat-item{ border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
  .stat-item:nth-child(-n+2){ border-top:none; }
  .cat-tabs{ flex-wrap:nowrap; overflow-x:auto; gap:0 22px; -webkit-overflow-scrolling:touch; }
  .catalogue-section{ padding:40px 0 72px; }
  .product-grid{ grid-template-columns:1fr; }
  .filter-controls{ flex-direction:column; align-items:stretch; }
  .filter-search{ width:100%; }
  .filter-search input{ width:100%; }
  .filter-reset{ margin-left:0; }
  .results-toolbar{ flex-wrap:wrap; gap:12px; }
}

@media (max-width:720px){
  .modal-box{ grid-template-columns:1fr; }
  .modal-media{ height:200px; min-height:0; }
  .modal-specs{ grid-template-columns:1fr 1fr; }
  .modal-content{ padding:24px 20px; }
  .modal-actions .product-view-btn{ margin-left:0; width:100%; justify-content:center; }
  .modal-actions .doc-link{ flex:1; justify-content:center; }
}