/*
Theme Name: Legacy BioLabs
Theme URI: https://legacybiolabs.com
Author: Legacy BioLabs
Description: Black Platinum Elite block theme for Legacy BioLabs. Dark chrome, light catalog. Tokens derived from the Legacy BioLabs Brand Manual v2.0 (August 2026). Research-use only; see CLAUDE.md for binding compliance rules.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legacy-biolabs
Tags: e-commerce, full-site-editing, block-patterns, accessibility-ready
*/

/* ==========================================================================
   Legacy BioLabs — theme CSS
   Tokens live in theme.json. This file holds only what theme.json cannot express.

   Binding rules enforced here (see BRAND.md):
   - Platinum and bright gold are DARK-SURFACE materials. On light backgrounds
     only black / charcoal / dark-steel / deep-steel / deep-gold may carry text.
   - medium-gray #A7ADB3 on soft-white is 2.11:1 — never text on light.
   - cool-light #E4E6E8 on soft-white is 1.17:1 — never a divider on light.
   - Gradients appear only as restrained metallic accents on dark surfaces.
   ========================================================================== */

:root {
  /* Hairlines. Derived, not raw palette values — see BRAND.md §3. */
  --lbl-rule-light: color-mix(in srgb, var(--wp--preset--color--deep-steel) 25%, transparent);
  --lbl-rule-dark:  color-mix(in srgb, var(--wp--preset--color--silver-gray) 28%, transparent);

  --lbl-tracking-eyebrow: 0.16em;
  --lbl-tracking-caps:    0.04em;
}

/* Launch refinement: 3D molecular motion and catalog controls. */
.lbl-hero { overflow: hidden; isolation: isolate; }
.lbl-hero__inner { position: relative; z-index: 3; }
.lbl-amino-field {
  position: absolute;
  inset: -5%;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--wp--preset--color--black) 0%, transparent 42%, transparent 100%), url("assets/art/amino-chain-3d-v1.png");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
  opacity: .72;
  filter: saturate(.85) contrast(1.06);
  animation: lbl-amino-pan 24s ease-in-out infinite alternate;
}
@keyframes lbl-amino-pan { from { transform: scale(1.03) translate3d(-.6%, -.4%, 0); } to { transform: scale(1.08) translate3d(.8%, .5%, 0); } }

.lbl-catalog-controls { display: grid; grid-template-columns: minmax(16rem,2fr) minmax(12rem,1fr) minmax(11rem,1fr); gap: 1rem; margin-bottom: 1rem; }
.lbl-catalog-controls label { display: grid; gap: .45rem; color: var(--wp--preset--color--deep-steel); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lbl-catalog-controls input, .lbl-catalog-controls select { min-height: 3rem; width: 100%; border: 1px solid var(--wp--preset--color--silver-gray); border-radius: .2rem; background: var(--wp--preset--color--white); color: var(--wp--preset--color--charcoal); font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; padding: .75rem .9rem; }
.lbl-category-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; }
.lbl-category-filters button { border: 1px solid var(--wp--preset--color--silver-gray); border-radius: 999px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--dark-steel); cursor: pointer; padding: .55rem .8rem; font: inherit; font-size: .82rem; }
.lbl-category-filters button span { color: var(--wp--preset--color--deep-steel); }
.lbl-category-filters button.is-active { border-color: var(--wp--preset--color--slate-blue); background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--white); }
.lbl-category-filters button.is-active span { color: var(--wp--preset--color--white); }
.lbl-catalog-count { min-height: 1.4rem; margin: 0 0 1rem; color: var(--wp--preset--color--deep-steel); font-size: .85rem; }
.lbl-card[hidden], .lbl-catalog-empty[hidden] { display: none !important; }
.lbl-catalog-empty { border: 1px solid var(--wp--preset--color--silver-gray); background: var(--wp--preset--color--white); padding: 2rem; text-align: center; }
/* The landing page explains the controlled release path rather than duplicating
   shoppable cards. Existing transform-only stagger motion supplies depth while
   the static layout remains a complete, accessible reading experience. */
.lbl-release-path__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.lbl-release-path__steps li { min-height: 15rem; padding: 1.4rem; border: 1px solid var(--wp--preset--color--silver-gray); background: rgb(255 255 255 / .72); box-shadow: 0 1.1rem 2.6rem rgb(14 24 34 / .08); }
.lbl-release-path__steps h3 { margin: 1.8rem 0 .6rem; color: var(--wp--preset--color--charcoal); font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.lbl-release-path__steps p { margin: 0; color: var(--wp--preset--color--deep-steel); line-height: 1.62; }
.lbl-release-path__number { color: var(--wp--preset--color--deep-steel); font-weight: 800; letter-spacing: .14em; font-size: .78rem; }
.lbl-surface-dark .lbl-release-path__number,
.lbl-surface-charcoal .lbl-release-path__number { color: var(--wp--preset--color--pale-blue-gray); }
.lbl-catalog-hero-3d { position: relative; isolation: isolate; overflow: hidden; }
.lbl-catalog-hero-3d::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--wp--preset--color--black) 12%, transparent 72%), url("assets/art/amino-chain-3d-v1.png") right 42% / cover no-repeat;
  opacity: .28;
  pointer-events: none;
}
.lbl-availability { border: 1px solid var(--wp--preset--color--silver-gray); border-left: 3px solid var(--wp--preset--color--slate-blue); background: var(--wp--preset--color--soft-white); padding: 1rem 1.1rem; }
.lbl-availability h2 { font-size: 1rem; margin: 0 0 .4rem; }
.lbl-availability p { margin: .35rem 0; }
.lbl-empty-cart-help { border: 1px solid var(--wp--preset--color--silver-gray); background: var(--wp--preset--color--soft-white); padding: clamp(1.25rem,3vw,2rem); margin: 1.5rem 0; }
.lbl-empty-cart-help .wp-element-button { display: inline-block; margin-top: .7rem; }

/* Product specification is a stable two-column record, never a collection of
   independently aligned numeric cells. */
.lbl-product-documentation .lbl-spec-table { table-layout: fixed; }
.lbl-product-documentation .lbl-spec-table th { width: 41%; white-space: normal; overflow-wrap: anywhere; }
.lbl-product-documentation .lbl-spec-table td,
.lbl-product-documentation .lbl-spec-table td[data-numeric] {
  width: 59%;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .lbl-catalog-controls { grid-template-columns: 1fr; }
  .lbl-release-path__steps { grid-template-columns: 1fr; }
  .lbl-release-path__steps li { min-height: 0; }
  .lbl-amino-field { opacity: .48; background-position: 58% center; }
}
@media (prefers-reduced-motion: reduce) {
  .lbl-amino-field { animation: none; }
}

/* --------------------------------------------------------------------------
   1. Logo — one-diamond clear space and variant-specific floors
   The kit sets LEGACY in Avenir Roman and BIOLABS in Gabriel Sans and forbids
   showing them in different typefaces, so the lockup is ALWAYS the image asset.
   Never compose it from live text.
   -------------------------------------------------------------------------- */
.lbl-logo {
  display: block;
  width: var(--lbl-logo-w, 200px);
  min-width: 24px;
  height: auto;
  box-sizing: content-box;         /* padding = clear space, outside the art */
  padding: calc(var(--lbl-logo-w, 200px) * var(--lbl-clear, 0.0667));
}
.lbl-logo--primary  { min-width: 120px; }
.lbl-logo--stacked  { min-width: 120px; }
.lbl-logo--wordmark { min-width: 60px; }
.lbl-logo--mark     { min-width: 24px; }

.lbl-logo-link { display: inline-block; line-height: 0; text-decoration: none; }
.lbl-logo--primary { mix-blend-mode: screen; }
/* Brand kit Masthead Lockup: no effects stacked on it, and 12% of its width kept
   clear below so the baked-in reflection never collides with what follows.
   Below 782px the <picture> serves the Dimensional Lockup (kit minimum 280px). */
.lbl-logo--masthead { mix-blend-mode: normal; max-width: 100%; height: auto; }
@media (min-width: 782px) { .lbl-logo--masthead { padding-bottom: calc(var(--lbl-logo-w) * .12); } }
/* Phones: the <picture> serves the kit's Dimensional Lockup, whose on-screen
   minimum is 280px — held even when the header condenses on scroll. */
@media (max-width: 781px) {
  .lbl-logo--masthead,
  .lbl-header .lbl-logo--masthead,
  .lbl-header.is-condensed .lbl-logo--masthead { width: 280px; max-width: 100%; --lbl-logo-w: 280px; }
}
/* Dimensional Lockup (footer, and the header on phones): kit minimum 280px. */
.lbl-logo--dimensional { mix-blend-mode: normal; max-width: 100%; height: auto; }
@media (max-width: 781px) { .lbl-logo--dimensional { width: 280px; } }
.lbl-logo-link:focus-visible { outline: 2px solid var(--wp--preset--color--pale-blue-gray); outline-offset: 2px; }

/* Certificate pages on a lot record: readable at any width, never wider than
   the column, each page labelled. Served privately by LBL_COA_Snapshot. */
.lbl-coa-pages { margin-top: 2rem; }
.lbl-coa-pages figure { margin: 0 0 1.5rem; }
.lbl-coa-pages img {
  display: block; width: 100%; max-width: 46rem; height: auto;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--deep-steel) 25%, transparent);
  background: var(--wp--preset--color--white);
}
.lbl-coa-pages figcaption {
  margin-top: .5rem; font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--deep-steel);
}

/* --------------------------------------------------------------------------
   2. Surface contexts
   -------------------------------------------------------------------------- */
.lbl-surface-dark {
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
}
.lbl-surface-charcoal {
  background-color: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--white);
}
.lbl-surface-dark :is(h1,h2,h3,h4,h5,h6),
.lbl-surface-charcoal :is(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--white); }

.lbl-surface-dark a:not(.wp-element-button),
.lbl-surface-charcoal a:not(.wp-element-button) {
  color: var(--wp--preset--color--silver-gray);
}
.lbl-surface-dark a:not(.wp-element-button):hover,
.lbl-surface-charcoal a:not(.wp-element-button):hover { color: var(--wp--preset--color--white); }

/* On dark, muted text is medium-gray (7.47:1 on charcoal). This is the ONLY
   context in which medium-gray may carry text. */
.lbl-surface-dark .lbl-muted,
.lbl-surface-charcoal .lbl-muted { color: var(--wp--preset--color--medium-gray); }

/* On light, muted text is deep-steel (5.43:1 on soft-white) — the floor. */
.lbl-muted { color: var(--wp--preset--color--deep-steel); }

/* --------------------------------------------------------------------------
   3. Eyebrow / section label — carries the lockup's tracking
   -------------------------------------------------------------------------- */
.lbl-eyebrow {
  display: block;
  font-size: var(--wp--preset--font-size--eyebrow);  /* 11px — kit digital floor */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--lbl-tracking-eyebrow);
  color: var(--wp--preset--color--slate-blue);
  margin: 0 0 0.75rem;
}
.lbl-surface-dark .lbl-eyebrow,
.lbl-surface-charcoal .lbl-eyebrow { color: var(--wp--preset--color--pale-blue-gray); }

/* --------------------------------------------------------------------------
   4. Editorial voice — the one place the serif appears
   -------------------------------------------------------------------------- */
.lbl-editorial {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--editorial);
  line-height: 1.18;
  letter-spacing: 0;
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   5. Identifiers — approved monospace exception (BRAND.md §5)
   Scope: peptide sequences, lot numbers, CAS numbers. NEVER prose or labels.
   -------------------------------------------------------------------------- */
.lbl-sequence,
.lbl-lot,
.lbl-cas,
.lbl-identifier {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.lbl-sequence {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   6. Spec table — the product page IS a spec sheet
   -------------------------------------------------------------------------- */
.lbl-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
  margin: 0 0 var(--wp--preset--spacing--30);
}
.lbl-spec-table caption {
  text-align: left;
  font-size: var(--wp--preset--font-size--eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lbl-tracking-eyebrow);
  color: var(--wp--preset--color--deep-steel);
  padding-bottom: 0.75rem;
}
.lbl-spec-table :is(th, td) {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--lbl-rule-light);
  vertical-align: top;
  letter-spacing: 0;               /* never track table cells */
}
.lbl-spec-table th {
  font-weight: 600;
  color: var(--wp--preset--color--dark-steel);
  white-space: nowrap;
}
.lbl-spec-table td { color: var(--wp--preset--color--charcoal); }
/* Numerics right-aligned and tabular so columns register. */
.lbl-spec-table :is(th, td)[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lbl-surface-dark .lbl-spec-table :is(th, td),
.lbl-surface-charcoal .lbl-spec-table :is(th, td) {
  border-bottom-color: var(--lbl-rule-dark);
  color: var(--wp--preset--color--cool-light);
}
.lbl-surface-dark .lbl-spec-table th,
.lbl-surface-charcoal .lbl-spec-table th { color: var(--wp--preset--color--medium-gray); }

/* --------------------------------------------------------------------------
   7. Rules and the metallic accent
   The gradient exists on dark surfaces only.
   -------------------------------------------------------------------------- */
.lbl-rule { border: 0; border-top: 1px solid var(--lbl-rule-light); margin: var(--wp--preset--spacing--40) 0; }
.lbl-surface-dark .lbl-rule,
.lbl-surface-charcoal .lbl-rule { border-top-color: var(--lbl-rule-dark); }

.lbl-rule--metallic {
  border: 0;
  height: 1px;
  background: var(--wp--preset--gradient--metallic-accent);
  opacity: 0.7;
  margin: var(--wp--preset--spacing--40) 0;
}
/* Fail loudly in dev if someone puts the metallic rule on a light surface. */
.lbl-surface-light .lbl-rule--metallic { background: var(--lbl-rule-light); opacity: 1; }

/* --------------------------------------------------------------------------
   8. RUO notice — rendered by lbl_ruo_notice() in the lbl-core plugin.
   Styled here, never authored as content.
   -------------------------------------------------------------------------- */
.lbl-ruo {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--dark-steel);
  border: 1px solid var(--lbl-rule-light);
  padding: 0.85rem 1rem;
  margin: var(--wp--preset--spacing--30) 0;
  background: var(--wp--preset--color--cool-light);
}
.lbl-surface-dark .lbl-ruo,
.lbl-surface-charcoal .lbl-ruo {
  color: var(--wp--preset--color--cool-light);
  background: transparent;
  border-color: var(--lbl-rule-dark);
}

/* --------------------------------------------------------------------------
   9. Header / footer chrome
   -------------------------------------------------------------------------- */
.lbl-header { border-bottom: 1px solid var(--lbl-rule-dark); background: var(--wp--preset--color--black); }
/* The horizontal lockup stays fluid while respecting its 120px production floor. */
.lbl-header .lbl-logo--primary { --lbl-logo-w: clamp(220px, 22vw, 300px); }
.lbl-header__slogan {
  margin: 0 auto 0 clamp(.5rem, 2vw, 2rem);
  color: var(--wp--preset--color--pale-blue-gray);
  font-size: clamp(1.15rem, 1.7vw, 1.65rem) !important;
  line-height: 1;
  white-space: nowrap;
}
.lbl-header .wp-block-navigation {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.lbl-header .wp-block-navigation a { color: var(--wp--preset--color--cool-light); text-decoration: none; }
.lbl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--white); }
.lbl-header .wp-block-navigation a:focus-visible {
  outline: 2px solid var(--wp--preset--color--silver-gray); outline-offset: 3px;
}
.lbl-footer { border-top: 1px solid var(--lbl-rule-dark); background: var(--wp--preset--color--black); }
.lbl-footer .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(13rem, 1.15fr) minmax(10rem, .8fr) minmax(15rem, 1fr) minmax(10rem, .8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.lbl-footer .wp-block-column { min-width: 0; }
.lbl-footer .lbl-logo--primary { --lbl-logo-w: clamp(190px, 16vw, 240px); }
.lbl-footer .lbl-eyebrow { font-family: inherit; font-size: .875rem; line-height: 1.65; margin-bottom: .8rem; }
.lbl-footer :where(ul, p):not(.lbl-editorial, .lbl-fine, .lbl-ruo) {
  font-size: .875rem;
  line-height: 1.65;
}
.lbl-footer ul { list-style: none; padding-left: 0; margin-top: 0; }
.lbl-footer li { margin-bottom: .2rem; }
@media (max-width: 74rem) {
  .lbl-footer .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .lbl-footer .wp-block-columns { grid-template-columns: 1fr; }
  .lbl-header__slogan { order: 3; width: 100%; margin: .35rem 0 0; }
}

/* --------------------------------------------------------------------------
   10. Accessibility
   -------------------------------------------------------------------------- */
.lbl-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--charcoal);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600; text-decoration: none;
}
.lbl-skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. WooCommerce alignment
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--lbl-rule-light);
  background: var(--wp--preset--color--cool-light);
  color: var(--wp--preset--color--charcoal);
  font-size: var(--wp--preset--font-size--small);
  padding: 0.9rem 1.1rem;
  border-left-width: 3px;
  border-left-color: var(--wp--preset--color--charcoal);
}
.woocommerce-error { border-left-color: #A32B22; }

.woocommerce ul.products li.product .price,
.wc-block-components-product-price {
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--charcoal);
  font-weight: 600;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: var(--wp--preset--font-size--base);
}

/* No product should ever render without its RUO notice. Make an omission
   visible in dev rather than silent. */
body.single-product .lbl-ruo:only-of-type { outline: none; }

/* Print — invoices, packing slips, COA headers use the charcoal lockup. */
@media print {
  .lbl-header, .lbl-footer, .wp-block-navigation, .lbl-skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .lbl-ruo { border: 1px solid #000; background: transparent; color: #000; }
  /* 10pt, not 9pt — the kit's minimum type size applies to print too (7pt floor,
     but legal text at 9pt reads as fine print, which the brand does not do). */
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #5E666F; }
}

/* --------------------------------------------------------------------------
   12. Gate, access wall, and registration
   The gate screen itself is a standalone document in lbl-core/templates/gate.php
   with inlined styles — it must render even if this theme is broken or being
   switched. These rules cover the in-theme registration and wall surfaces.
   -------------------------------------------------------------------------- */
.lbl-affirm {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  border: 1px solid var(--lbl-rule-light);
  padding: 1rem 1.1rem;
  margin: 0 0 .85rem;
  cursor: pointer;
}
.lbl-affirm:hover { border-color: color-mix(in srgb, var(--wp--preset--color--deep-steel) 45%, transparent); }
.lbl-affirm:focus-within { outline: 2px solid var(--wp--preset--color--charcoal); outline-offset: 2px; }
.lbl-affirm input { margin: .25rem 0 0; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--wp--preset--color--charcoal); }
.lbl-affirm span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--dark-steel); }
.lbl-affirm b { font-weight: 700; color: var(--wp--preset--color--charcoal); }

.lbl-fine {
  font-size: var(--wp--preset--font-size--eyebrow);   /* 11px floor */
  line-height: 1.55;
  color: var(--wp--preset--color--deep-steel);        /* 5.43:1 — AA on soft-white */
}
/* deep-steel is a LIGHT-surface colour: on charcoal it measures 2.90:1 and fails.
   Found by running axe against the rendered footer, not by inspection. */
.lbl-surface-dark .lbl-fine,
.lbl-surface-charcoal .lbl-fine,
.lbl-footer .lbl-fine,
.lbl-header .lbl-fine { color: var(--wp--preset--color--medium-gray); }  /* 7.47:1 */

/* Gated region. The cssSelector in the paywall structured data points here,
   which is what makes crawler access sanctioned rather than cloaking. */
.lbl-walled { position: relative; }

.lbl-wall-notice {
  border: 1px solid var(--lbl-rule-light);
  border-left: 3px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--cool-light);
  padding: 1.25rem 1.4rem;
  margin: var(--wp--preset--spacing--30) 0;
}
.lbl-wall-notice p:last-child { margin-bottom: 0; }

.lbl-coa .lbl-eyebrow { margin-bottom: .35rem; }

/* Unfilled legal placeholders. Deliberately loud — a [ BRACKETED ] field that
   ships to production is a compliance gap, so it should be impossible to miss
   in review. */
.lbl-placeholder {
  background: #FFF3CD;
  color: #6B4E00;
  border: 1px dashed #B8892B;
  padding: 1px 5px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .875em;
}

/* --------------------------------------------------------------------------
   13. Certificate library
   The trust artefact. Open — no gate, no wall — because a certificate carries
   no claims and nothing to sell, and a researcher checking a lot number off a
   vial label should not have to affirm anything first.
   -------------------------------------------------------------------------- */
.lbl-coa-search { margin: 0 0 var(--wp--preset--spacing--30); }
.lbl-coa-search__row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: stretch; }
.lbl-coa-search input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--wp--preset--font-size--base);
  padding: .8rem .9rem;
  border: 1px solid var(--wp--preset--color--deep-steel);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--charcoal);
}
.lbl-coa-search input[type="search"]::placeholder { color: var(--wp--preset--color--deep-steel); }
.lbl-coa-search input[type="search"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--charcoal);
  outline-offset: 2px;
}

.lbl-coa-index thead th {
  border-bottom-width: 2px;
  font-size: var(--wp--preset--font-size--eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lbl-tracking-eyebrow);
  color: var(--wp--preset--color--deep-steel);
  white-space: nowrap;
}
.lbl-coa-index tbody tr:hover { background: var(--wp--preset--color--cool-light); }

.lbl-coa-empty {
  border: 1px solid var(--lbl-rule-light);
  border-left: 3px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--cool-light);
  padding: 1rem 1.2rem;
  font-size: var(--wp--preset--font-size--small);
}

.lbl-coa-pdf { margin-top: var(--wp--preset--spacing--30); }

.lbl-coa-products { list-style: none; margin: 0; padding: 0; }
.lbl-coa-products li { padding: .5rem 0; border-bottom: 1px solid var(--lbl-rule-light); }

/* Every lot record uses one stable two-column analytical layout. */
main.lbl-lot-documentation { max-width: 1280px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(20px, 3vw, 40px); }
main.lbl-lot-documentation .lbl-spec-table { width: 100%; table-layout: fixed; }
main.lbl-lot-documentation .lbl-spec-table th { width: 40%; white-space: normal; }
main.lbl-lot-documentation .lbl-spec-table td,
main.lbl-lot-documentation .lbl-spec-table td[data-numeric] { width: 60%; text-align: left; font-variant-numeric: tabular-nums; }
main.lbl-lot-documentation .lbl-coa-products a { display: inline-block; }

.lbl-coa .lbl-identifier { margin: 0 0 .25rem; font-size: var(--wp--preset--font-size--base); }
.lbl-coa-links { font-size: var(--wp--preset--font-size--small); margin: 0; }

/* Certificate index on narrow screens: drop the least-critical columns rather
   than letting a spec table scroll sideways. Lot and purity are what matter. */
@media (max-width: 40rem) {
  .lbl-coa-index :is(th, td):nth-child(3),
  .lbl-coa-index :is(th, td):nth-child(4) { display: none; }
}

/* --------------------------------------------------------------------------
   14. Checkout — payment rails and restrictions
   -------------------------------------------------------------------------- */
.lbl-crypto-note {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--dark-steel);
  border: 1px solid var(--lbl-rule-light);
  border-left: 3px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--cool-light);
  padding: .85rem 1rem;
  margin: 0 0 var(--wp--preset--spacing--20);
}

/* The crypto discount reads as a price fact, not a promotion. No colour
   accent, no exclamation — the kit forbids urgency theatre. */
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table .fee td {
  font-variant-numeric: tabular-nums;
}

.lbl-checkout-qualification {
  border-top: 1px solid var(--lbl-rule-light);
  margin-top: var(--wp--preset--spacing--30);
  padding-top: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   15. Institutional purchasing
   -------------------------------------------------------------------------- */
.lbl-price-tiers { max-width: 22rem; margin-top: var(--wp--preset--spacing--20); }
.lbl-price-tiers caption { padding-bottom: .5rem; }

.lbl-quote-note,
.lbl-po {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--dark-steel);
  border: 1px solid var(--lbl-rule-light);
  border-left: 3px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--cool-light);
  padding: .85rem 1rem;
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lbl-po .lbl-eyebrow { margin-bottom: .25rem; }

.lbl-cert-archive thead th {
  border-bottom-width: 2px;
  font-size: var(--wp--preset--font-size--eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lbl-tracking-eyebrow);
  color: var(--wp--preset--color--deep-steel);
  white-space: nowrap;
}
.lbl-cert-archive tbody tr:hover { background: var(--wp--preset--color--cool-light); }

.lbl-reorder { margin-top: var(--wp--preset--spacing--30); }

/* Certificate archive on narrow screens: keep lot, compound and certificate —
   the three columns a researcher actually needs to cite material. */
@media (max-width: 46rem) {
  .lbl-cert-archive :is(th, td):nth-child(3),
  .lbl-cert-archive :is(th, td):nth-child(4),
  .lbl-cert-archive :is(th, td):nth-child(6) { display: none; }
}

/* ==========================================================================
   16. MOTION AND EXPRESSIVE EFFECTS
   Authorised by Bart 2026-07-27 as a deliberate relaxation of the kit's
   restraint rules (BRAND.md: no glows, gradients as border accents only).

   What was NOT relaxed, and is not negotiable here:
   - Every contrast pair. The dark/light scope rules below still hold: bright
     platinum and gold stay dark-only; deep-steel and deep-gold are light-safe.
   - The 11px type floor.
   - No external libraries. Motion is CSS + IntersectionObserver.
   - Transform and opacity ONLY. Never width/height/top/left — those reflow.

   Motion is scoped to DARK surfaces and structural reveals. The light catalog
   stays calm: a researcher reading a spec table does not want the table moving.
   -------------------------------------------------------------------------- */
:root {
  /* One rhythm for everything. Micro-interactions 150–300ms per MD guidance. */
  --lbl-dur-fast:  160ms;
  --lbl-dur:       240ms;
  --lbl-dur-slow:  340ms;
  /* Exit is ~65% of enter, so dismissal feels responsive. */
  --lbl-dur-exit:  150ms;
  --lbl-ease-out:    cubic-bezier(.22, .61, .36, 1);
  --lbl-ease-in:     cubic-bezier(.55, .06, .68, .19);
  --lbl-ease-spring: cubic-bezier(.34, 1.26, .64, 1);
  --lbl-stagger:     44ms;

  /* Depth. Luminance only — no hue, no neon. */
  --lbl-glow-soft:  0 0 0 1px color-mix(in srgb, var(--wp--preset--color--silver-gray) 22%, transparent),
                    0 18px 48px -24px rgb(0 0 0 / .85);
  --lbl-glow-raise: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--silver-gray) 40%, transparent),
                    0 28px 64px -28px rgb(0 0 0 / .95);
  --lbl-lift-light: 0 1px 0 0 var(--lbl-rule-light),
                    0 14px 34px -22px rgb(14 15 17 / .30);
}

/* --------------------------------------------------------------------------
   16.1 Scroll reveal
   Elements opt in with data-lbl-reveal. The class is added by JS, so if JS
   never runs the .no-js fallback below leaves content visible — content must
   never depend on script to be readable.
   -------------------------------------------------------------------------- */
/* The hidden state is gated behind html.lbl-motion, which JS adds only after it
   has confirmed IntersectionObserver support and that reduced motion is off.
   Written this way round deliberately: if the script fails to load, errors, or
   is blocked, the default state is VISIBLE. Content must never depend on
   JavaScript to be readable. */
html.lbl-motion [data-lbl-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity   var(--lbl-dur-slow) var(--lbl-ease-out),
    transform var(--lbl-dur-slow) var(--lbl-ease-out);
  transition-delay: calc(var(--lbl-i, 0) * var(--lbl-stagger));
}
html.lbl-motion [data-lbl-reveal="left"]  { transform: translate3d(-18px, 0, 0); }
html.lbl-motion [data-lbl-reveal="scale"] { transform: scale(.972); }
html.lbl-motion [data-lbl-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Once revealed, stop hinting the compositor. */
html.lbl-motion [data-lbl-reveal].is-settled { will-change: auto; transition-delay: 0ms; }

/* --------------------------------------------------------------------------
   16.2 Metallic sheen — the kit's accent gradient, now in motion.
   Dark surfaces only, as a hairline. Never a background, never behind text.
   -------------------------------------------------------------------------- */
.lbl-sheen {
  position: relative;
  overflow: hidden;
}
.lbl-sheen::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--wp--preset--color--silver-gray) 30%, transparent) 22%,
    var(--wp--preset--color--white) 50%,
    color-mix(in srgb, var(--wp--preset--color--silver-gray) 30%, transparent) 78%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: .85;
  animation: lbl-sheen-sweep 7s var(--lbl-ease-out) infinite;
}
@keyframes lbl-sheen-sweep {
  0%, 12%  { background-position: 120% 0; }
  62%,100% { background-position: -120% 0; }
}
/* The sheen is a dark-surface material, exactly like the static gradient. On a
   light surface it degrades to the plain hairline rather than disappearing. */
.lbl-surface-light .lbl-sheen::after,
body:not(:has(.lbl-surface-dark)) .lbl-sheen::after { animation: none; background: var(--lbl-rule-light); }

/* --------------------------------------------------------------------------
   16.3 Hero depth
   Two parallax planes, both transform-only. Offsets are written to custom
   properties by JS on a rAF loop; CSS consumes them so there is no layout read
   in the paint path.
   -------------------------------------------------------------------------- */
.lbl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* The visual field belongs to the viewport, while the copy remains constrained
   by the inner group. This prevents the hero artwork from ending in the page's
   gray gutters on wide screens. */
.lbl-hero.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.lbl-hero__plane {
  position: absolute;
  inset: -12% -4%;
  z-index: -2;
  background: no-repeat center / cover;
  transform: translate3d(0, var(--lbl-par-far, 0px), 0) scale(1.06);
  pointer-events: none;
}
.lbl-hero__art {
  position: absolute;
  z-index: -1;
  right: clamp(-6rem, -2vw, 0rem);
  bottom: -8%;
  width: clamp(18rem, 42vw, 34rem);
  opacity: .22;
  transform: translate3d(0, var(--lbl-par-near, 0px), 0);
  pointer-events: none;
}
.lbl-hero__art svg { width: 100%; height: auto; display: block; }
/* steel-tone is a dark-surface material. Scoped explicitly so the gate's
   check_dark_scale_scope() can verify the surface rather than infer it. */
.lbl-surface-dark .lbl-hero__art,
.lbl-surface-charcoal .lbl-hero__art { color: var(--wp--preset--color--steel-tone); }
@media (max-width: 48rem) { .lbl-hero__art { opacity: .12; } }

/* --------------------------------------------------------------------------
   16.4 Header condense on scroll
   Padding is animated, which normally reflows — so the padding change is on a
   custom property consumed by a transform-free container that has no siblings
   depending on its height. The header is fixed-position, so nothing below it
   moves and CLS stays zero.
   -------------------------------------------------------------------------- */
.lbl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--wp--preset--color--black);
  transition: box-shadow var(--lbl-dur) var(--lbl-ease-out),
              background-color var(--lbl-dur) var(--lbl-ease-out);
}
.lbl-header .lbl-logo {
  transition: width var(--lbl-dur-slow) var(--lbl-ease-out);
}
.lbl-header.is-condensed {
  background-color: color-mix(in srgb, var(--wp--preset--color--black) 92%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 1px 0 0 var(--lbl-rule-dark), 0 12px 32px -24px rgb(0 0 0 / .9);
}
.lbl-header.is-condensed .lbl-logo--primary { --lbl-logo-w: clamp(150px, 18vw, 200px); }

/* --------------------------------------------------------------------------
   16.5 Interactive feedback
   Scale stays inside 0.97–1.02 so a press never shifts neighbouring layout.
   -------------------------------------------------------------------------- */
.wp-element-button,
.wc-block-components-button {
  transition:
    background-color var(--lbl-dur-fast) var(--lbl-ease-out),
    color            var(--lbl-dur-fast) var(--lbl-ease-out),
    border-color     var(--lbl-dur-fast) var(--lbl-ease-out),
    transform        var(--lbl-dur-fast) var(--lbl-ease-spring),
    box-shadow       var(--lbl-dur-fast) var(--lbl-ease-out);
}
.wp-element-button:active,
.wc-block-components-button:active { transform: scale(.978); }

.lbl-surface-dark .wp-element-button:hover,
.lbl-surface-charcoal .wp-element-button:hover { box-shadow: var(--lbl-glow-soft); }

/* Nav underline that grows from the link, rather than a colour-only hover.
   Colour alone is never the sole affordance. */
.lbl-header .wp-block-navigation a {
  position: relative;
  padding-bottom: 3px;
}
.lbl-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--wp--preset--color--pale-blue-gray);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--lbl-dur) var(--lbl-ease-out);
}
.lbl-header .wp-block-navigation a:hover::after,
.lbl-header .wp-block-navigation a:focus-visible::after,
.lbl-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   16.6 Reduced motion — a real bail-out, not a shortened duration.
   Section 10's global rule collapses durations, which would leave every
   [data-lbl-reveal] element stuck at opacity 0. Revealed state is forced here.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-lbl-reveal],
  [data-lbl-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lbl-sheen::after { animation: none !important; background: var(--lbl-rule-dark); }
  .lbl-hero__plane,
  .lbl-hero__art { transform: none !important; }
  .wp-element-button:active { transform: none !important; }
  .lbl-header .wp-block-navigation a::after { transition: none !important; }
}

/* ==========================================================================
   17. COMPONENTS
   Dark chrome carries the drama. The catalog stays a light, calm reading
   surface — that division is what keeps this from wearing the gray-market
   peptide-vendor costume, and it survived the 2026-07-27 relaxation intact.
   -------------------------------------------------------------------------- */

/* 17.1 Section shell ------------------------------------------------------ */
.lbl-section { padding-block: var(--wp--preset--spacing--60); }
.lbl-section--tight { padding-block: var(--wp--preset--spacing--40); }
.lbl-section__head { max-width: 44rem; margin-bottom: var(--wp--preset--spacing--40); }
.lbl-section__head p { color: var(--wp--preset--color--deep-steel); margin-bottom: 0; }
.lbl-surface-dark .lbl-section__head p,
.lbl-surface-charcoal .lbl-section__head p { color: var(--wp--preset--color--medium-gray); }

/* 17.2 Hero --------------------------------------------------------------- */
.lbl-hero { padding-block: clamp(4rem, 12vh, 9rem); }
.lbl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}
/* Keep the molecular field atmospheric, never a competitor to the copy. The
   feathered reading field is deliberately unframed: it protects contrast
   without turning the hero into a translucent card. */
.lbl-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.6rem -4.5rem -2.4rem -2.2rem;
  background: radial-gradient(ellipse 82% 94% at 35% 50%, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .72) 52%, transparent 100%);
  filter: blur(9px);
  pointer-events: none;
}
.lbl-surface-dark .lbl-hero__inner h1,
.lbl-surface-charcoal .lbl-hero__inner h1 {
  text-shadow: 0 2px 12px rgb(0 0 0 / .92);
}
.lbl-hero__lede {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.62;
  max-width: 40ch;
  text-shadow: 0 2px 10px rgb(0 0 0 / .94);
}
/* cool-light carries text on dark only. On a light surface the lede falls back
   to dark-steel, which is the readable choice at this size. */
.lbl-surface-dark .lbl-hero__lede,
.lbl-surface-charcoal .lbl-hero__lede { color: var(--wp--preset--color--cool-light); }
.lbl-hero__lede { color: var(--wp--preset--color--dark-steel); }
.lbl-hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: var(--wp--preset--spacing--30);
}
/* Exactly one primary CTA per screen. The second reads as secondary. */
.lbl-btn--primary {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  border: 1px solid var(--wp--preset--color--white);
}
.lbl-btn--primary:hover { background: var(--wp--preset--color--cool-light); border-color: var(--wp--preset--color--cool-light); color: var(--wp--preset--color--black); }
.lbl-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--steel-tone);
}
.lbl-btn--ghost:hover { border-color: var(--wp--preset--color--white); background: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent); color: var(--wp--preset--color--white); }

/* 17.3 Trust row — four analytical guarantees, icon + label + one sentence.
   Every line is a statement about documentation, never about an effect. */
.lbl-trust {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lbl-trust__item { border-top: 1px solid var(--lbl-rule-light); padding-top: var(--wp--preset--spacing--20); }
.lbl-surface-dark .lbl-trust__item,
.lbl-surface-charcoal .lbl-trust__item { border-top-color: var(--lbl-rule-dark); }
.lbl-trust__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--wp--preset--color--slate-blue);
  margin-bottom: .85rem;
}
.lbl-trust__icon svg { display: block; width: 32px; height: 32px; }
.lbl-surface-dark .lbl-trust__icon,
.lbl-surface-charcoal .lbl-trust__icon { color: var(--wp--preset--color--pale-blue-gray); }
.lbl-trust__item h3 {
  font-size: var(--wp--preset--font-size--h4);
  font-weight: 600; letter-spacing: .01em;
  margin: 0 0 .4rem;
}
.lbl-trust__item p {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--deep-steel);
  margin: 0;
}
.lbl-surface-dark .lbl-trust__item p,
.lbl-surface-charcoal .lbl-trust__item p { color: var(--wp--preset--color--medium-gray); }

/* Full-width quality composition: the 3D trace becomes atmosphere, while the
   documentation cards remain the primary reading layer. */
.lbl-quality-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(34rem, 43vw, 42rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lbl-quality-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("assets/art/analytical-trace-3d-v1.png") center 64% / cover no-repeat;
  opacity: .7;
  filter: saturate(.38) contrast(1.06) brightness(.9);
  transform: scale(1.025);
}
.lbl-quality-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--black) 90%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 40%, transparent) 28%, color-mix(in srgb, var(--wp--preset--color--black) 12%, transparent) 68%, color-mix(in srgb, var(--wp--preset--color--black) 68%, transparent) 100%);
}
.lbl-quality-visual .lbl-section__head {
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  text-shadow: 0 2px 18px rgb(0 0 0 / .9);
}
.lbl-quality-visual .lbl-trust { gap: clamp(.8rem, 1.4vw, 1.4rem); }
.lbl-quality-visual .lbl-trust__item {
  position: relative;
  min-height: 15rem;
  padding: clamp(1.25rem, 1.7vw, 1.75rem);
  display: grid;
  grid-template-rows: 7.75rem auto 1fr;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--silver-gray) 38%, transparent);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--wp--preset--color--black) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--wp--preset--color--silver-gray) 14%, transparent), 0 1.4rem 3.5rem rgb(0 0 0 / .22);
  backdrop-filter: blur(1.5px) saturate(120%);
  text-align: center;
  overflow: hidden;
  transition: transform var(--lbl-dur) var(--lbl-ease-out), border-color var(--lbl-dur) var(--lbl-ease-out), background-color var(--lbl-dur) var(--lbl-ease-out);
}
.lbl-quality-visual .lbl-trust__item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--wp--preset--color--silver-gray) 7%, transparent));
}
.lbl-quality-visual .lbl-trust__item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--wp--preset--color--silver-gray) 62%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--black) 22%, transparent);
}
.lbl-quality-visual .lbl-trust__icon {
  width: 100%;
  height: 7.75rem;
  margin: 0 auto;
  filter: drop-shadow(0 .55rem .7rem rgb(0 0 0 / .58));
}
.lbl-quality-visual .lbl-trust__icon :is(svg, img) {
  width: auto;
  height: auto;
  max-width: 6.75rem;
  max-height: 6.25rem;
  object-fit: contain;
}
.lbl-quality-visual .lbl-trust__item:nth-child(1) .lbl-trust__icon img { max-width: 7rem; max-height: 5.4rem; }
.lbl-quality-visual .lbl-trust__item:nth-child(2) .lbl-trust__icon img { max-width: 5.35rem; max-height: 5.35rem; }
.lbl-quality-visual .lbl-trust__item:nth-child(3) .lbl-trust__icon img { max-width: 4.4rem; max-height: 5.8rem; }
.lbl-quality-visual .lbl-trust__item:nth-child(4) .lbl-trust__icon img { max-width: 5.45rem; max-height: 5.45rem; }
.lbl-quality-visual .lbl-trust__item h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  margin-bottom: .65rem;
}
.lbl-surface-dark.lbl-quality-visual .lbl-trust__item p { color: var(--wp--preset--color--cool-light); font-size: .88rem; line-height: 1.58; text-shadow: 0 1px 10px rgb(0 0 0 / .95); }
@media (max-width: 70rem) {
  .lbl-quality-visual .lbl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .lbl-quality-visual .lbl-trust { grid-template-columns: 1fr; }
  .lbl-quality-visual .lbl-trust__item { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lbl-quality-visual .lbl-trust__item { transition: none; }
  .lbl-quality-visual .lbl-trust__item:hover { transform: none; }
}

/* 17.4 Catalog grid ------------------------------------------------------- */
.lbl-catalog {
  display: grid;
  align-items: start;
  grid-auto-rows: max-content;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 38rem) {
  .lbl-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .lbl-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 82rem) {
  .lbl-catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.lbl-card {
  display: flex; flex-direction: column;
  align-self: start;
  min-height: 0 !important;
  height: auto !important;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
}
.lbl-card__media {
  display: block;
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  background: var(--wp--preset--color--soft-white);
  border: 1px solid var(--wp--preset--color--silver-gray);
  box-shadow: 0 .45rem 1.25rem rgb(14 15 17 / .06);
  transition: border-color var(--lbl-dur) var(--lbl-ease-out),
              box-shadow var(--lbl-dur) var(--lbl-ease-out),
              transform var(--lbl-dur) var(--lbl-ease-out);
}
.lbl-card__media img {
  display: block;
  width: 100% !important; height: 100% !important;
  object-fit: contain;
}
.lbl-card__media-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .375rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgb(5 8 10 / .18), rgb(5 8 10 / .9));
  color: var(--wp--preset--color--white);
  text-align: center;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, .35rem, 0);
  transition: opacity var(--lbl-dur) var(--lbl-ease-out), transform var(--lbl-dur) var(--lbl-ease-out);
}
.lbl-card__media-overlay strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.lbl-card__media-overlay > span {
  font-size: .6875rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.lbl-card__media:hover .lbl-card__media-overlay,
.lbl-card__media:focus-visible .lbl-card__media-overlay,
.lbl-card:hover .lbl-card__media-overlay,
.lbl-card:focus-within .lbl-card__media-overlay,
.lbl-card.is-price-revealed .lbl-card__media-overlay {
  opacity: 1 !important;
  transform: none !important;
}
/* Touch screens have no persistent hover; the price remains on the media so
   mobile researchers never lose access to it when the inline price is removed. */
@media (hover: none), (pointer: coarse) {
  .lbl-card__media-overlay {
    inset: auto 0 0;
    padding: 5px 8px;
    background: var(--wp--preset--color--soft-white);
    color: var(--wp--preset--color--charcoal);
    opacity: 1;
    transform: none;
  }
  .lbl-card__media-overlay > span { display: none; }
  .lbl-card__media-overlay strong { font-size: .875rem; }
}
.lbl-card.is-price-dismissed .lbl-card__media-overlay {
  opacity: 0 !important;
  transform: none !important;
}
ul.lbl-catalog > li.lbl-card > .lbl-card__body {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  align-self: auto;
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
  margin: 0 !important;
  padding: 10px 4px 0 !important;
}
.lbl-card:hover,
.lbl-card:focus-within {
  box-shadow: none;
}
.lbl-card:hover .lbl-card__media,
.lbl-card:focus-within .lbl-card__media {
  border-color: var(--wp--preset--color--slate-blue);
  box-shadow: 0 1rem 2.5rem rgb(14 15 17 / .14);
  transform: translateY(-2px);
}
ul.lbl-catalog > li.lbl-card > .lbl-card__body > .lbl-card__title {
  font-size: clamp(.95rem, 1vw, 1.08rem);
  font-weight: 650; letter-spacing: .01em;
  margin: 0 !important;
  padding: 0;
  line-height: 1.35;
  text-align: center;
}
@media (max-width: 63.99rem) {
  .lbl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.99rem) {
  .lbl-trust { grid-template-columns: 1fr; }
}
.lbl-card__title a { text-decoration: none; color: var(--wp--preset--color--charcoal); }
.lbl-card__title a:hover { color: var(--wp--preset--color--slate-blue); text-decoration: none; }
/* 17.5 Spec sheet layout -------------------------------------------------- */
.lbl-specsheet { display: grid; gap: var(--wp--preset--spacing--40); }
@media (min-width: 62rem) {
  .lbl-specsheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .lbl-specsheet__aside { position: sticky; top: 7rem; }
}
.lbl-specsheet__aside {
  border: 1px solid var(--lbl-rule-light);
  background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--30);
}
.lbl-product-media {
  position: sticky; top: 7rem;
  width: 100%; max-width: 34rem;
  margin: 0 auto;
  border: 1px solid var(--lbl-rule-light);
  background: var(--wp--preset--color--platinum);
  overflow: hidden;
}
.lbl-product-media img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* Product detail: a quiet purchase summary and separate evidence section. */
main.lbl-product-page { max-width: 1280px; box-sizing: border-box; margin-inline: auto; padding: 1.5rem clamp(20px, 3vw, 40px) 4rem; }
.lbl-catalog-return {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: .875rem;
  color: var(--wp--preset--color--dark-steel);
  text-decoration: none;
}
.lbl-catalog-return:hover { color: var(--wp--preset--color--slate-blue); text-decoration: underline; }
.lbl-product-layout { gap: clamp(1.5rem, 4vw, 4rem); margin-block: 1rem 3rem; align-items: flex-start; }
.lbl-product-photograph .lbl-product-media { max-width: none; position: static; }
.lbl-product-summary { min-width: 0; padding-block: .25rem; }
.lbl-product-summary > * { margin-block: 0 1rem; }
.lbl-product-summary .lbl-eyebrow { color: var(--wp--preset--color--deep-steel); margin-bottom: .75rem; }
.lbl-product-summary h1 {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.lbl-product-summary .lbl-product-price { font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.lbl-product-summary .cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.lbl-product-summary .cart .quantity input { min-height: 48px; width: 5rem; }
.lbl-product-summary .cart .single_add_to_cart_button { min-height: 48px; flex: 1; }
.lbl-product-summary .lbl-ruo { margin-top: 1.25rem; }
.lbl-product-document-link { font-size: .875rem; }
.lbl-product-status { color: var(--wp--preset--color--deep-steel); font-size: .875rem; }
.lbl-product-status p { margin: 0 0 .75rem; }
.lbl-availability-action { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--lbl-rule-light); padding: .25rem 1rem; color: var(--wp--preset--color--charcoal); text-decoration: none; }
.lbl-availability-action:hover { border-color: var(--wp--preset--color--slate-blue); }
.lbl-shipping-summary { border-block: 1px solid var(--lbl-rule-light); padding-block: 1rem; }
.lbl-shipping-summary p { margin: 0; }
.lbl-shipping-summary p:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .875rem; }
.lbl-shipping-summary p + p { margin-top: .5rem; font-size: .75rem; line-height: 1.5; color: var(--wp--preset--color--deep-steel); }
.lbl-product-documentation { border-top: 1px solid var(--lbl-rule-light); padding-top: 2rem; scroll-margin-top: 6rem; }
.lbl-product-documentation > h2 { margin: 0 0 1.5rem; font-family: var(--wp--preset--font-family--body); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; }
.lbl-documentation-columns { gap: 2rem; align-items: flex-start; }
.lbl-product-documentation .lbl-spec-table { margin-top: 0; width: 100%; table-layout: fixed; }
.lbl-product-documentation .lbl-spec-table td { overflow-wrap: anywhere; }
.lbl-product-documentation .lbl-availability { margin: 0; padding: 1.25rem; }
.lbl-product-documentation .lbl-availability h2 { font-size: 1.1rem; font-weight: 500; }
.lbl-product-documentation .lbl-availability p { font-size: .875rem; line-height: 1.6; }
.lbl-product-photograph .lbl-product-documentation { margin-top: 1rem; padding-top: 1rem; }
.lbl-product-photograph .lbl-product-documentation > h2 { margin-bottom: .75rem; font-size: 1rem; font-weight: 600; }
.lbl-product-photograph .lbl-product-documentation .lbl-spec-table { margin-bottom: 0; font-size: .8125rem; }
.lbl-product-photograph .lbl-product-documentation .lbl-spec-table caption { padding-bottom: .5rem; }
.lbl-product-photograph .lbl-product-documentation .lbl-spec-table :is(th, td) { padding: .55rem .4rem; line-height: 1.55; }
.lbl-product-photograph .lbl-product-documentation .lbl-spec-table th { width: 28%; }
.lbl-product-photograph .lbl-product-documentation .lbl-spec-table td { width: 72%; }
.lbl-product-photograph > .lbl-ruo { margin-top: 1rem; }
.lbl-product-details { margin-top: 2rem; }
.lbl-product-details ul.tabs { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0 0 1rem; border-bottom: 1px solid var(--lbl-rule-light); }
.lbl-product-details ul.tabs li { padding: .5rem 0; }
.lbl-product-details ul.tabs a { color: var(--wp--preset--color--charcoal); font-size: .875rem; }
.lbl-product-details .woocommerce-Tabs-panel { max-width: 72ch; font-size: .9375rem; line-height: 1.7; }
@media (max-width: 781px) {
  .lbl-product-layout { gap: 1.5rem; }
  .lbl-product-photograph .lbl-product-media { max-width: 34rem; }
  .lbl-product-documentation { padding-top: 1.5rem; }
}
@media (max-width: 48rem) {
  .lbl-product-media { position: static; max-width: 28rem; }
}

/* 17.5.1 Commerce utility pages -----------------------------------------
   Product specifications may use the full content measure. Transactional
   forms stay deliberately compact so labels, fields, and totals scan as a
   single workflow rather than an expanse of unrelated controls. */
body.woocommerce-checkout main#lbl-main,
body.woocommerce-account main#lbl-main,
body.woocommerce-cart main#lbl-main {
  width: min(100% - 2rem, 76rem);
  margin-inline: auto;
}

body.woocommerce-checkout main#lbl-main,
body.woocommerce-account main#lbl-main {
  padding-top: clamp(2rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.woocommerce form.checkout,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-MyAccount-content {
  border-color: var(--lbl-rule-light);
}

.woocommerce form.login,
.woocommerce form.register {
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Notices inside the account forms are supporting text, not body copy: the
   WooCommerce privacy paragraph and the "link to set a new password" line
   otherwise render at full body size and outweigh the fields. */
.woocommerce form.register .woocommerce-privacy-policy-text p,
.woocommerce form.register > p:not(.form-row),
.woocommerce form.login > p:not(.form-row),
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--deep-steel);
}
.woocommerce form.register .form-row label { display: block; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  min-height: 3rem;
  padding: .7rem .8rem;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
  max-width: 68rem;
  margin-inline: auto;
}

.woocommerce-checkout #order_review_heading {
  max-width: 68rem;
  margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--20);
}

.woocommerce-account .woocommerce {
  max-width: 68rem;
  margin-inline: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lbl-rule-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--lbl-rule-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: .75rem .25rem;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  color: var(--wp--preset--color--slate-blue);
  font-weight: 600;
}

@media (min-width: 49rem) {
  .woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 22%; }
  .woocommerce-account .woocommerce-MyAccount-content { width: 73%; }
}
/* Staggered spec rows. Rows animate in place; the table's height is fixed by
   its content before the animation starts, so nothing shifts. */
.lbl-spec-table tbody tr[data-lbl-reveal] { display: table-row; }

/* 17.6 Figure / art panels ------------------------------------------------ */
.lbl-art-panel {
  display: grid; place-items: center;
  padding: var(--wp--preset--spacing--40);
  border: 1px solid var(--lbl-rule-light);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--deep-steel);
}
.lbl-surface-dark .lbl-art-panel,
.lbl-surface-charcoal .lbl-art-panel {
  border-color: var(--lbl-rule-dark);
  background: color-mix(in srgb, var(--wp--preset--color--charcoal) 70%, transparent);
  color: var(--wp--preset--color--steel-tone);
}
.lbl-art-panel svg { width: 100%; max-width: 14rem; height: auto; display: block; }

/* Decorative trace used as a section divider on dark surfaces. Unlabelled by
   design: an axis with numbers would read as a result. */
.lbl-trace {
  display: block; width: 100%;
  opacity: .9;
}
.lbl-trace svg { display: block; width: 100%; height: clamp(15rem, 25vw, 29rem); }
.lbl-trace-band { width: 100%; max-width: none !important; padding: 0; overflow: hidden; }
.lbl-trace-band > .lbl-trace { width: 100%; max-width: none !important; }
.lbl-trace-3d {
  width: 100%;
  min-height: clamp(24rem, 45vw, 48rem);
  background-image: url("assets/art/analytical-trace-3d-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(.9) contrast(1.04);
  animation: lbl-trace-breathe 16s ease-in-out infinite alternate;
}
@keyframes lbl-trace-breathe {
  from { transform: scale(1.01); filter: saturate(.86) contrast(1.03) brightness(.92); }
  to { transform: scale(1.035); filter: saturate(.96) contrast(1.07) brightness(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .lbl-trace-3d { animation: none; }
}
.lbl-surface-dark .lbl-trace,
.lbl-surface-charcoal .lbl-trace { color: var(--wp--preset--color--steel-tone); }

/* 17.7 Hero backdrop plate.
   Declared here rather than inline in the template so the URL resolves relative
   to the stylesheet and a static HTML template needs no PHP to build a path. */
.lbl-hero__plane { background-image: url("assets/art/backdrop-depth.svg"); }

/* Sheen on a bottom edge, for chrome that sits above content. */
.lbl-sheen--bottom::after { inset: auto 0 0; }

/* Grouped catalog families keep each vial size linked to its exact SKU. */
.lbl-card__sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .625rem;
}
.lbl-card__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .25rem .75rem;
  border: 1px solid var(--lbl-rule-light);
  border-radius: 999px;
  background: var(--wp--preset--color--soft-white);
  color: var(--wp--preset--color--dark-steel);
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.lbl-card__size:hover,
.lbl-card__size:focus-visible {
  border-color: var(--wp--preset--color--slate-blue);
  color: var(--wp--preset--color--slate-blue);
  background: var(--wp--preset--color--white);
}
.lbl-card__size:focus-visible {
  outline: 2px solid var(--wp--preset--color--slate-blue);
  outline-offset: 3px;
}

.lbl-card__size--unavailable {
  border-style: dashed;
  color: var(--wp--preset--color--deep-steel);
  cursor: not-allowed;
}

/* Shared product purchasing experience. */
.lbl-product-identity, .lbl-selling-unit { font-size: .875rem; color: var(--wp--preset--color--deep-steel); }
.lbl-product-photograph .lbl-product-media img { width: 100%; height: auto; aspect-ratio: auto; }
.lbl-strengths > span { display: block; font-size: .875rem; margin-bottom: .5rem; }
.lbl-strengths > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.lbl-strengths a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem 1rem; border: 1px solid var(--lbl-rule-light); text-decoration: none; }
.lbl-strengths a[aria-current] { border-color: var(--wp--preset--color--slate-blue); font-weight: 600; }
.lbl-lot-summary { padding: 1.25rem; background: var(--wp--preset--color--white); border: 1px solid var(--lbl-rule-light); }
.lbl-lot-summary h2, .lbl-product-faq h2, .lbl-product-help h2 { font-family: var(--wp--preset--font-family--body); font-size: 1.125rem; margin: 0 0 1rem; }
.lbl-lot-summary dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin: 0 0 1rem; }
.lbl-lot-summary dt { font-size: .75rem; color: var(--wp--preset--color--deep-steel); }
.lbl-lot-summary dd { margin: .2rem 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.lbl-lot-summary p { font-size: .875rem; line-height: 1.6; }
.lbl-lot-summary .lbl-lot-summary__note { font-size: .75rem; color: var(--wp--preset--color--deep-steel); margin-bottom: 0; }
.lbl-product-faq { margin-block: 2rem; }
.lbl-product-faq details { border-bottom: 1px solid var(--lbl-rule-light); }
.lbl-product-faq summary { padding: 1rem 0; cursor: pointer; font-weight: 500; }
.lbl-product-faq p { max-width: 72ch; line-height: 1.7; }
.lbl-product-help { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; max-width: calc(100vw - 2rem); }
.lbl-product-help > summary { margin-left: auto; width: fit-content; padding: .85rem 1.2rem; cursor: pointer; border-radius: 2rem; background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--white); min-height: 44px; box-sizing: border-box; }
.lbl-product-help__panel { position: absolute; bottom: calc(100% + .75rem); right: 0; width: min(22rem,calc(100vw - 2rem)); max-height: 65dvh; overflow-y: auto; padding: 1.25rem; box-sizing: border-box; background: var(--wp--preset--color--white); color: var(--wp--preset--color--charcoal); border: 1px solid var(--lbl-rule-light); border-radius: .75rem; box-shadow: 0 .5rem 2rem rgb(14 15 17 / .15); }
.lbl-product-help__panel p { font-size: .875rem; }
.lbl-product-help__panel nav { display: grid; gap: .5rem; }
.lbl-product-help__panel a { display: flex; align-items: center; min-height: 44px; padding: .5rem; border: 1px solid var(--lbl-rule-light); font-size: .875rem; }
main.lbl-product-page { padding-bottom: 5rem; }
#product-lot, #purchasing-questions { scroll-margin-top: 6rem; }
@media (max-width: 480px) {
  .lbl-lot-summary dl { grid-template-columns: 1fr; }
  .lbl-product-documentation .lbl-spec-table :is(th,td) { padding: .65rem .4rem; }
}
@media (max-width: 600px) {
  .lbl-product-help { position: relative; bottom: auto; right: auto; max-width: none; margin-block: 1.5rem; z-index: auto; }
  .lbl-product-help > summary { margin-left: 0; }
  .lbl-product-help__panel { position: static; width: 100%; max-height: none; margin-top: .75rem; }
}

/* Distinct sections with the same heading treatment. */
main.lbl-product-page .lbl-product-faq { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--lbl-rule-light); }
main.lbl-product-page .lbl-product-faq > h2,
.lbl-product-documentation > h2 { margin: 0 0 1.5rem; font-family: var(--wp--preset--font-family--body); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; }

/* Strength links keep separate canonical URLs while the product panel swaps
   in place. Global page imagery stays mounted throughout the change. */


/* Legal pages are operational records. Their hierarchy must remain visibly
   distinct from explanatory body copy. */
.lbl-legal .wp-block-heading { font-weight: 650; }
.lbl-legal h1 { letter-spacing: .025em; }
.lbl-legal h2 { font-size: clamp(1.18rem, 1.8vw, 1.45rem); line-height: 1.3; }
.lbl-legal .lbl-policy-meta { color: var(--wp--preset--color--deep-steel); font-size: .875rem; }
.lbl-legal details { border-top: 1px solid var(--lbl-rule-light); padding: 1rem 0; }
.lbl-legal details:last-child { border-bottom: 1px solid var(--lbl-rule-light); }
.lbl-legal summary { cursor: pointer; font-weight: 650; }
.lbl-legal details p { margin: .75rem 0 0; }
.lbl-checkout-policy { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 3px solid var(--wp--preset--color--slate-blue); background: var(--wp--preset--color--cool-light); }
.lbl-checkout-policy p { margin: 0; }

/* Dark-surface contrast contract. Core block styles can set a text colour on
   descendants, so inheritance alone is not sufficient for chrome, navigation,
   and the analytical-standards panel. Keep the foreground explicit here. */
.lbl-surface-dark :is(h1, h2, h3, h4, h5, h6),
.lbl-surface-charcoal :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--white) !important; }
.lbl-surface-dark :is(p, li),
.lbl-surface-charcoal :is(p, li) { color: var(--wp--preset--color--cool-light) !important; }
.lbl-surface-dark a:not(.wp-element-button),
.lbl-surface-charcoal a:not(.wp-element-button) { color: var(--wp--preset--color--silver-gray) !important; }
.lbl-surface-dark .lbl-eyebrow,
.lbl-surface-charcoal .lbl-eyebrow { color: var(--wp--preset--color--pale-blue-gray) !important; }
.lbl-surface-dark .lbl-muted,
.lbl-surface-charcoal .lbl-muted,
.lbl-surface-dark .lbl-fine,
.lbl-surface-charcoal .lbl-fine { color: var(--wp--preset--color--medium-gray) !important; }
.lbl-header .wp-block-navigation a { color: var(--wp--preset--color--cool-light) !important; }

/* Product images share one edge-to-edge square presentation regardless of
   whether the catalog item has released inventory or is upcoming. */
.lbl-product-media { aspect-ratio: 1 / 1; }
.lbl-product-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* A real product photograph sets its own frame. The square frame above combined
   with the photograph's natural height left an empty band under every 4:3
   catalog image (all 31 on production are 1448x1086). The frame now hugs the
   image: no band, no crop, whatever ratio the photograph is. */
.lbl-product-photograph .lbl-product-media { aspect-ratio: auto; }
.lbl-product-photograph .lbl-product-media img { height: auto; aspect-ratio: auto; object-fit: contain; }

/* Keep the existing 280px footer artwork plus clear space inside narrow entry pages. */
@media (max-width: 359px) {
  body:is(.home, .woocommerce-account) .lbl-footer { padding-inline: 3px !important; }
  body:is(.home, .woocommerce-account) .lbl-footer .lbl-logo--dimensional { --lbl-logo-w: 280px; }
}