/* Product catalogue reference implementation — visual-only layer. */

body:has(.page-hero-catalog) {
  --catalog-navy: #031738;
  --catalog-blue: #1259ef;
  --catalog-ink: #071b42;
  --catalog-pale: #f2f6ff;
  --catalog-rule: #dbe5f6;
  background:#fff;
  color:var(--catalog-ink);
}

body:has(.page-hero-catalog) .page-hero-catalog {
  position:relative;
  min-height:340px;
  padding:0 !important;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,#031738 0%,#041f52 60%,#062e7b 100%);
}
body:has(.page-hero-catalog) .page-hero-catalog::after {
  content:'';
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:linear-gradient(30deg,transparent 47%,rgba(90,145,255,.23) 48%,transparent 50%),linear-gradient(150deg,transparent 47%,rgba(90,145,255,.2) 48%,transparent 50%);
  background-size:52px 30px;
  background-position:right 25% center;
  mask-image:linear-gradient(90deg,transparent 37%,#000 100%);
}
body:has(.page-hero-catalog) .page-hero-catalog .content-wrap {
  position:relative;
  z-index:1;
  width:min(1280px,calc(100% - 96px)) !important;
  min-height:340px;
  margin:0 auto !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:46px;
  transform:none !important;
  opacity:1 !important;
}
body:has(.page-hero-catalog) .page-hero-catalog .page-hero-copy { max-width:610px; }
body:has(.page-hero-catalog) .page-hero-catalog .eyebrow { margin:0 0 15px !important; color:#a9c5ff; font:800 11px/1.2 Manrope,Arial,sans-serif; letter-spacing:.1em; }
body:has(.page-hero-catalog) .page-hero-catalog h1 { margin:0 0 14px !important; color:#fff; font:400 clamp(42px,4.3vw,62px)/1.07 Italiana,Georgia,serif; font-family:Italiana,Georgia,serif !important; font-weight:400 !important; letter-spacing:-.035em; }
body:has(.page-hero-catalog) .page-hero-catalog .page-hero-copy > p:last-child { max-width:530px; margin:0 !important; color:rgba(255,255,255,.86); font-size:15px; line-height:1.7; }
body:has(.page-hero-catalog) .page-hero-status { flex:0 0 auto; min-width:205px; padding:17px 18px; border:1px solid rgba(255,255,255,.3); border-radius:3px; background:rgba(2,16,42,.18); color:#fff; }
body:has(.page-hero-catalog) .page-hero-status .status-dot { width:8px; height:8px; background:#e9bd36; }
body:has(.page-hero-catalog) .page-hero-status span { color:rgba(255,255,255,.78); font-size:11px; font-weight:800; letter-spacing:.07em; }
body:has(.page-hero-catalog) .page-hero-status b { color:#fff; font-size:28px; }

body:has(.page-hero-catalog) .secondary-section { padding:40px 0 64px !important; background:#fff !important; }
body:has(.page-hero-catalog) .secondary-section > .content-wrap { width:min(1280px,calc(100% - 96px)) !important; margin:0 auto !important; transform:none !important; opacity:1 !important; }
body:has(.page-hero-catalog) .catalog-shell {
  display:grid !important;
  grid-template-columns:244px minmax(0,1fr);
  column-gap:24px;
  row-gap:12px;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
body:has(.page-hero-catalog) .catalog-tools {
  grid-column:1;
  grid-row:1 / span 3;
  display:block !important;
  padding:0 14px 28px 0;
  border-right:1px solid var(--catalog-rule);
}
body:has(.page-hero-catalog) .catalog-tools label,
body:has(.page-hero-catalog) .catalog-tools > button { display:block !important; width:100% !important; margin:0 0 20px !important; }
body:has(.page-hero-catalog) .catalog-tools label > span:first-child { display:block; margin-bottom:10px; color:var(--catalog-ink); font:800 13px/1.3 Manrope,Arial,sans-serif; }
body:has(.page-hero-catalog) .catalog-search-control { display:flex !important; min-width:0; }
body:has(.page-hero-catalog) .catalog-tools input,
body:has(.page-hero-catalog) .catalog-tools select {
  width:100% !important;
  min-height:41px;
  box-sizing:border-box;
  border:1px solid #d9e3f2 !important;
  border-radius:3px !important;
  background:#fff !important;
  color:#41536f !important;
  font:500 13px/1 Manrope,Arial,sans-serif;
  box-shadow:none !important;
}
/* Keep the left search field readable at normal Chrome zoom.  The field
 * remains flexible beside the fixed icon button, so the placeholder cannot
 * force the sidebar wider or alter the catalog data. */
body:has(.page-hero-catalog) .catalog-search-control input {
  font-size:14px;
  line-height:1.2;
  letter-spacing:0;
  padding-inline:9px;
}
body:has(.page-hero-catalog) .catalog-search-control input::placeholder {
  color:#66768d;
  opacity:1;
}
body:has(.page-hero-catalog) .catalog-search-control input { flex:1 1 auto; min-width:0; padding:0 10px; border-radius:3px 0 0 3px !important; }
body:has(.page-hero-catalog) .catalog-submit { flex:0 0 42px; min-width:42px; min-height:41px; padding:0 10px !important; border-radius:0 3px 3px 0 !important; background:var(--catalog-blue) !important; border-color:var(--catalog-blue) !important; color:#fff !important; font-size:0 !important; }
body:has(.page-hero-catalog) .catalog-submit::after { content:none; }
body:has(.page-hero-catalog) .catalog-submit .catalog-search-icon { width:18px; height:18px; color:#fff; }
body:has(.page-hero-catalog) .catalog-clear { min-height:42px; border:1px solid #8cb0f7 !important; border-radius:3px !important; background:#fff !important; color:var(--catalog-blue) !important; font-size:13px !important; font-weight:800 !important; }

body:has(.page-hero-catalog) .catalog-result { grid-column:2; min-height:18px; margin:0 !important; color:#63738d; font-size:13px; }
body:has(.page-hero-catalog) .product-grid.peptide-product-grid {
  grid-column:2;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
body:has(.page-hero-catalog) .product-card {
  display:flex !important;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid #dfe7f3 !important;
  border-radius:3px !important;
  background:#fff !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
}
/* Preserve the native hidden state used by the existing catalog filter.
 * The visual card reset above is intentionally broad, but must not revive
 * records that the filter has excluded. */
body:has(.page-hero-catalog) .product-card[hidden],
body:has(.page-hero-catalog) .product-card.is-filtered-out { display:none !important; }
body:has(.page-hero-catalog) .product-card:hover { border-color:#9dbafb !important; box-shadow:0 10px 28px rgba(13,50,109,.09) !important; transform:translateY(-2px) !important; }
body:has(.page-hero-catalog) .product-image {
  position:relative;
  height:194px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid #e5edf8;
  background:#fff !important;
}
body:has(.page-hero-catalog) .product-image img { width:100% !important; height:100% !important; display:block; object-fit:contain !important; mix-blend-mode:normal !important; }
body:has(.page-hero-catalog) .product-image .product-index { position:absolute; z-index:1; top:11px; left:12px; color:#dba928; font:800 10px/1 Manrope,Arial,sans-serif; }
body:has(.page-hero-catalog) .product-image > span:not(.product-index) { color:#77869b; font-size:12px; }
body:has(.page-hero-catalog) .product-body { flex:1; display:flex; flex-direction:column; padding:15px 15px 14px !important; }
body:has(.page-hero-catalog) .product-category { margin:0 0 7px !important; color:var(--catalog-blue); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
body:has(.page-hero-catalog) .product-title { min-height:46px; margin:0 0 13px !important; color:var(--catalog-ink); font:800 17px/1.35 Manrope,Arial,sans-serif; }
body:has(.page-hero-catalog) .product-title a { color:inherit; text-decoration:none; }
body:has(.page-hero-catalog) .product-meta { display:grid !important; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0 0 16px !important; }
body:has(.page-hero-catalog) .product-meta > div { min-width:0; color:#4e607a; font-size:13px; line-height:1.4; }
body:has(.page-hero-catalog) .product-meta strong { display:block; margin-bottom:2px; color:#52657f; font-size:11px; font-weight:800; text-transform:uppercase; }
body:has(.page-hero-catalog) .product-actions { display:grid !important; grid-template-columns:1fr 1.25fr; gap:8px; margin-top:auto; }
body:has(.page-hero-catalog) .product-actions .button {
  min-height:44px;
  padding:0 9px;
  border-radius:3px;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
body:has(.page-hero-catalog) .product-actions .button-light { border:1px solid #94b6f7; background:#fff; color:var(--catalog-blue); }
body:has(.page-hero-catalog) .product-actions .button-dark { border-color:var(--catalog-blue); background:var(--catalog-blue); color:#fff; }
body:has(.page-hero-catalog) .product-actions .button-dark.is-added {
  border-color:#0b49c7;
  background:#0b49c7;
  color:#fff;
  transform:translateY(1px) scale(.99);
  box-shadow:inset 0 2px 5px rgba(0,18,70,.32), inset 0 0 0 2px rgba(255,255,255,.2);
}
body:has(.page-hero-catalog) .product-actions .button-dark.is-added::before {
  content:'✓';
  display:inline-block;
  margin-right:6px;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
body:has(.page-hero-catalog) .catalog-empty { grid-column:2; color:#61718a; }

body:has(.page-hero-catalog) a:focus-visible,
body:has(.page-hero-catalog) button:focus-visible,
body:has(.page-hero-catalog) input:focus-visible,
body:has(.page-hero-catalog) select:focus-visible { outline:3px solid #7cabff; outline-offset:3px; }

/* Some desktop browsers expose a wider CSS layout viewport than the
 * screenshot surface when zoom or OS display scaling is active.  In that
 * 1588–1919px interval the approved 1280px rail can therefore land a few
 * pixels beyond the captured right edge even though document scrollWidth is
 * unchanged.  Keep the same centred composition with a tiny safety gutter;
 * this is presentation-only and does not alter catalog data or SEO markup. */
@media (min-width:1588px) and (max-width:1919px) {
  body:has(.page-hero-catalog) .page-hero-catalog .content-wrap,
  body:has(.page-hero-catalog) .secondary-section > .content-wrap {
    width:min(1272px,calc(100% - 96px)) !important;
  }
}

@media (max-width:1000px) {
  body:has(.page-hero-catalog) .page-hero-catalog .content-wrap,
  body:has(.page-hero-catalog) .secondary-section > .content-wrap { width:min(100% - 48px,720px) !important; }
  body:has(.page-hero-catalog) .catalog-shell { grid-template-columns:214px minmax(0,1fr); gap:16px; }
  body:has(.page-hero-catalog) .catalog-tools { padding-right:0; }
  body:has(.page-hero-catalog) .product-grid.peptide-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:701px) and (max-width:1000px) {
  /* At the two-card intermediate layout, the existing 12px action label
   * wraps even though the control has adequate single-line width. Keep the
   * action names readable without changing card data or mobile controls. */
  body:has(.page-hero-catalog) .product-actions .button {
    padding-inline:7px;
    font-size:11px;
    white-space:nowrap;
  }
}
@media (max-width:700px) {
  body:has(.page-hero-catalog) .page-hero-catalog { min-height:300px; padding:0 !important; }
  body:has(.page-hero-catalog) .page-hero-catalog .content-wrap,
  body:has(.page-hero-catalog) .secondary-section > .content-wrap { width:calc(100% - 40px) !important; }
  body:has(.page-hero-catalog) .page-hero-catalog .content-wrap { min-height:300px; display:block; padding:46px 0 34px; box-sizing:border-box; }
  body:has(.page-hero-catalog) .page-hero-catalog h1 { font-size:42px; }
  body:has(.page-hero-catalog) .page-hero-catalog .page-hero-copy > p:last-child { font-size:14px; }
  body:has(.page-hero-catalog) .page-hero-status { display:none; }
  /* Match the approved mobile master: keep a compact 28px hand-off from the
     navy hero into the filter surface. */
  body:has(.page-hero-catalog) .secondary-section { padding:28px 0 48px !important; }
  body:has(.page-hero-catalog) .catalog-shell {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    grid-template-columns:1fr !important;
  }
  /* A narrow viewport (or browser zoom) must never leave the desktop 222/190px
     sidebar width in the mobile flow. Keep the filter surface on the same
     content rail as the cards, without changing any filter names or values. */
  body:has(.page-hero-catalog) .catalog-tools {
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    grid-column:auto !important;
    grid-row:auto !important;
    /* Keep the controls visually clear of the panel edge at 390px and
       narrower zoomed viewports; this is presentation-only spacing. */
    padding:24px 24px 22px !important;
    border:1px solid var(--catalog-rule) !important;
    border-right:0;
    border-right:1px solid var(--catalog-rule) !important;
    border-bottom:1px solid var(--catalog-rule) !important;
  }
  body:has(.page-hero-catalog) .catalog-tools label,
  body:has(.page-hero-catalog) .catalog-tools > button,
  body:has(.page-hero-catalog) .catalog-search-control,
  body:has(.page-hero-catalog) .catalog-tools input,
  body:has(.page-hero-catalog) .catalog-tools select { max-width:none !important; box-sizing:border-box !important; }
  /* The master uses a deliberate field rhythm; 12px made the stacked labels
     look cramped after the desktop sidebar collapsed. */
  body:has(.page-hero-catalog) .catalog-tools label { margin-bottom:12px !important; }
  body:has(.page-hero-catalog) .catalog-tools > button { margin-bottom:18px !important; }
  body:has(.page-hero-catalog) .catalog-result { margin:16px 0 8px !important; }
  body:has(.page-hero-catalog) .product-grid.peptide-product-grid { grid-template-columns:1fr; }
  body:has(.page-hero-catalog) .product-image { height:220px !important; }
}

/* Catalogue cards must show the image assigned to each existing product
 * record. A legacy preview pseudo-element was covering every card with the
 * same placeholder and forcing the live image transparent. The ordinal in
 * the upper-left is only decorative and becomes inaccurate after sorting, so
 * it is omitted from this visual layer. Product data, URLs, image sources,
 * alt text and filtering behaviour remain untouched. */
body:has(.page-hero-catalog) .product-image::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}
body:has(.page-hero-catalog) .product-image img {
  opacity: 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}
body:has(.page-hero-catalog) .product-image .product-index {
  display: none !important;
}

/* Keep each catalogue image inside its fixed media frame.  The source URL,
 * alt text, lazy-loading and all product data stay intact. */
body:has(.page-hero-catalog) .product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 1 auto;
  transform: none !important;
}

@media (prefers-reduced-motion:reduce) { body:has(.page-hero-catalog) * { transition:none !important; animation:none !important; } }

/* Keep the desktop filter copy and controls comfortably inside the panel.
 * The existing panel width, labels, values and search behaviour remain
 * unchanged; only the presentation inset is adjusted. */
@media (min-width:1001px) {
  body:has(.page-hero-catalog) .catalog-tools {
    padding-top:14px !important;
    padding-left:14px !important;
    padding-right:12px !important;
  }
  body:has(.page-hero-catalog) .catalog-tools label,
  body:has(.page-hero-catalog) .catalog-tools > button {
    margin-bottom:16px !important;
  }
  body:has(.page-hero-catalog) .catalog-tools label > span:first-child {
    margin-bottom:8px;
  }
  body:has(.page-hero-catalog) .catalog-tools input,
  body:has(.page-hero-catalog) .catalog-tools select,
  body:has(.page-hero-catalog) .catalog-submit,
  body:has(.page-hero-catalog) .catalog-clear {
    min-height:44px;
  }
  body:has(.page-hero-catalog) .catalog-search-control input {
    font-size:13px !important;
    line-height:1.25 !important;
    padding:0 8px !important;
  }
  body:has(.page-hero-catalog) .catalog-search-control {
    width:216px !important;
    max-width:none !important;
  }
}

@media (max-width:700px) {
  body:has(.page-hero-catalog) .catalog-search-control input {
    font-size:14px !important;
    line-height:1.2 !important;
    padding:0 10px !important;
  }
}

/* Final desktop rhythm pass: keep the filter surface visually related to the
 * product cards without changing filter markup, values, data or SEO. */
@media (min-width:1001px) {
  body:has(.page-hero-catalog) .catalog-tools {
    padding-top:18px !important;
    background:#f1f6ff !important;
    border-radius:3px !important;
  }
  body:has(.page-hero-catalog) .catalog-tools label > span:first-child {
    font-weight:700;
    letter-spacing:.07em;
  }
  body:has(.page-hero-catalog) .catalog-submit {
    flex-basis:44px;
    min-width:44px;
    padding-inline:0 !important;
  }
  body:has(.page-hero-catalog) .catalog-search-control input {
    padding-inline:10px !important;
  }
}

/* Keep the live count as plain text; the status container remains intact,
 * but the number itself should not render as a separate blue tile. */
body:has(.page-hero-catalog) .page-hero-status b {
  background:transparent !important;
}

/* The source product photos include generous square margins. Enlarge only
 * the rendered image inside the fixed card frame so vial label text reads
 * clearly; the source URL, alt text and product data stay unchanged. */
body:has(.page-hero-catalog) .product-image img {
  transform:scale(1.35) !important;
  transform-origin:center center;
}

@media (max-width:700px) {
  body:has(.page-hero-catalog) .product-image img {
    transform:scale(1.28) !important;
  }
}