/*
 * Components and page layouts, ported from the approved Phase 2a prototype.
 * Uses semantic tokens only (see tokens.css).
 *
 * The file is ordered by component, so selectors from different components
 * with unrelated specificity interleave; no-descending-specificity would force
 * an order by specificity instead.
 */

/* stylelint-disable no-descending-specificity */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

html:has(dialog[open]),
html:has(.site-header[data-open]) {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-structure);
  outline-offset: 2px;
}

.visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--page-margin);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-structure);
  color: var(--color-on-structure);
  border-radius: var(--radius-control);
  text-decoration: none;
  font-weight: 500;
}

.skip-link:focus {
  top: var(--space-2);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0;
}

.mono sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: -0.28em;
}

.num {
  font-variant-numeric: tabular-nums;
}

.nowrap {
  white-space: nowrap;
}

/* Ink text with a copper rule: copper stays a small accent, never a text colour. */
.link,
.page-content a,
.article-content a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.26em;
}

/* Only a device with real hover keeps this on; a tap should not leave it stuck on. */
@media (hover: hover) {
  .link:hover,
  .page-content a:hover,
  .article-content a:hover {
    text-decoration-thickness: 2px;
  }
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

@media (width <= 899px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Buttons and fields ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-structure);
  border-radius: var(--radius-control);
  background: var(--color-structure);
  color: var(--color-on-structure);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

@media (hover: hover) {
  .button:hover {
    background: color-mix(in srgb, var(--color-structure) 82%, var(--color-text));
  }
}

.button-secondary {
  background: transparent;
  border-color: var(--color-control-border);
  color: var(--color-text);
}

@media (hover: hover) {
  .button-secondary:hover {
    background: var(--color-surface-alt);
  }
}

.button:disabled {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.field-label {
  display: block;
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.input:disabled {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* ---------- Datum motif (three roles only) ---------- */

/* Role 3: section divider, including the Datum separator block style. */
.section-rule,
.wp-block-separator.is-style-datum,
.page-section::before {
  position: relative;
  display: block;
  height: var(--datum-weight);
  margin: 0;
  overflow: visible;
  border: 0;
  background: var(--color-structure);
  opacity: 1;
}

.section-rule::before,
.wp-block-separator.is-style-datum::before,
.page-section::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--tick-height) - var(--datum-weight)) / -2);
  width: var(--tick-width);
  height: var(--tick-height);
  background: var(--color-accent);
}

/* Role 1: under the product name. The tick sits in a break at the left end. */
.name-datum {
  position: relative;
  height: var(--tick-height);
  background:
    linear-gradient(var(--color-structure), var(--color-structure)) no-repeat right center /
    calc(100% - var(--tick-width) - 8px) var(--datum-weight);
}

.name-datum::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tick-width);
  height: var(--tick-height);
  background: var(--color-accent);
}

/* Role 2 (active navigation marker) lives with the header below. */

/* Brands can switch the motif off: rules stay as plain borders, ticks go. */
.no-motif .section-rule,
.no-motif .wp-block-separator.is-style-datum,
.no-motif .page-section::before {
  background: var(--color-border);
}

.no-motif .section-rule::before,
.no-motif .wp-block-separator.is-style-datum::before,
.no-motif .page-section::after,
.no-motif .name-datum::before,
.no-motif .site-nav a[aria-current]::before {
  display: none;
}

.no-motif .name-datum {
  height: var(--datum-weight);
  background: var(--color-border);
}

/* ---------- Restriction bar ---------- */

.restriction-bar {
  background: var(--color-text);
  color: var(--color-surface-alt);
  padding: 7px var(--page-margin);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 30;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  height: var(--header-height);
}

.site-logo,
.footer-logo {
  display: block;
  flex: none;
  color: var(--color-text);
  text-decoration: none;
}

.site-logo-mark {
  display: block;
  width: 148px;
  height: auto;
}

.wordmark-text {
  display: inline-block;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

.wordmark-text small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-nav ul {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-height);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--datum-weight));
  height: var(--datum-weight);
  background: var(--color-structure);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.site-nav a[aria-current]::after {
  opacity: 1;
}

@media (hover: hover) {
  .site-nav a:hover::after {
    opacity: 1;
  }
}

.site-nav a[aria-current]::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--datum-weight) - (var(--tick-height) - var(--datum-weight)) / 2);
  width: var(--tick-width);
  height: var(--tick-height);
  background: var(--color-accent);
  transition: transform var(--duration) var(--ease);
}

@media (hover: hover) {
  .site-nav a[aria-current]:hover::before {
    transform: translateX(3px);
  }
}

.nav-panel-note,
.site-nav .nav-panel-account {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.account-link,
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .account-link:hover,
  .cart-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }
}

.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.nav-toggle-lines {
  position: relative;
  width: 14px;
  height: 7px;
  border-block: 1.5px solid currentcolor;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
  display: none;
}

@media (width <= 899px) {
  .header-inner {
    gap: var(--space-4);
  }

  .site-logo-mark {
    width: 124px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Account moves from the header into the menu panel, below the main links. */
  .header-actions .account-link {
    display: none;
  }

  .site-nav .nav-panel-account {
    display: flex;
  }

  .site-nav {
    display: none;
  }

  .site-header[data-open] .site-nav {
    display: block;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 40;
    overflow-y: auto;
    padding: var(--space-3) var(--page-margin) var(--space-7);
    background: var(--color-surface);
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav li {
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav a {
    height: auto;
    padding: var(--space-4) 0 var(--space-4) var(--space-5);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
  }

  .site-nav a[aria-current]::before {
    left: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  @media (hover: hover) {
    .site-nav a[aria-current]:hover::before {
      transform: translate(3px, -50%);
    }
  }

  .nav-panel-note {
    display: block;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .nav-panel-note a {
    color: var(--color-text);
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.26em;
  }
}

/* ---------- Breadcrumb ---------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5) 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-control-border);
}

.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.22em;
}

@media (hover: hover) {
  .breadcrumb a:hover {
    text-decoration-color: currentcolor;
  }
}

/* ---------- Notices ---------- */

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-status-success);
  border-radius: var(--radius-data);
  font-size: var(--text-sm);
}

.woocommerce-info {
  border-left-color: var(--color-structure);
}

.woocommerce-error {
  border-left-color: var(--color-status-error);
}

.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.26em;
}

/* ---------- Sections ---------- */

.section {
  padding-top: var(--section-gap);
}

.section-head {
  grid-column: 1 / span 4;
  padding-top: var(--space-6);
}

.section-body {
  grid-column: 5 / span 8;
  padding-top: var(--space-6);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.section-note {
  margin-top: var(--space-3);
  max-width: 30ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (width <= 899px) {
  .section-head,
  .section-body {
    grid-column: 1 / -1;
  }

  .section-body {
    padding-top: var(--space-5);
  }
}

/* Sections authored in page content: a Group with page-section-head and page-section-body. */
.page-section {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--section-gap);
}

.page-section::before {
  grid-column: 1 / -1;
  content: "";
}

.page-section::after {
  top: calc((var(--tick-height) - var(--datum-weight)) / -2);
}

.page-section > .page-section-head {
  grid-column: 1 / span 4;
  padding-top: var(--space-6);
}

.page-section > .page-section-body {
  grid-column: 5 / span 8;
  padding-top: var(--space-6);
}

.page-section h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.page-section-band {
  padding-bottom: var(--section-gap);
  background: var(--color-surface-alt);
  box-shadow: 0 0 0 100vmax var(--color-surface-alt);
  clip-path: inset(calc(-1 * var(--space-8)) -100vmax 0);
}

.page-section-band + .page-section {
  margin-top: var(--space-8);
}

.page-section-body > p + p {
  margin-top: 1em;
}

.page-section-body .support-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.doc-steps {
  display: grid;
  gap: var(--space-2);
  max-width: 44ch;
}

.doc-steps h3 {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  font-weight: 600;
}

.doc-steps h3:first-child {
  margin-top: 0;
}

.doc-steps p {
  color: var(--color-text-muted);
}

.wp-block-details {
  border-bottom: 1px solid var(--color-border);
}

.page-section-body .wp-block-details:first-child {
  border-top: 1px solid var(--color-border);
}

.wp-block-details summary {
  position: relative;
  padding: var(--space-5) var(--space-7) var(--space-5) 0;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--space-5);
  font-weight: 400;
  color: var(--color-text-muted);
}

.wp-block-details[open] summary::after {
  content: "−";
}

@media (hover: hover) {
  .wp-block-details summary:hover {
    color: var(--color-structure);
  }
}

.wp-block-details p {
  max-width: 60ch;
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
}

@media (width <= 899px) {
  .page-section {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-section > .page-section-head,
  .page-section > .page-section-body {
    grid-column: 1 / -1;
  }

  .page-section > .page-section-body {
    padding-top: var(--space-5);
  }
}

/* ---------- Home ---------- */

.hero {
  align-items: center;
  row-gap: var(--space-6);
  padding-top: var(--space-7);
}

.hero-copy {
  grid-column: 1 / span 5;
}

.hero-media {
  grid-column: 7 / span 6;
}

.display {
  max-width: 16ch;
  text-wrap: balance;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lead {
  max-width: 40ch;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.hero-figure {
  position: relative;
  aspect-ratio: 6 / 5;
}

.hero-document {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  aspect-ratio: 360 / 440;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-data);
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--color-shadow), 0 24px 56px var(--color-shadow);
}

.specimen {
  display: block;
  width: 100%;
  height: 100%;
}

.specimen text {
  font-family: var(--font-sans);
  fill: var(--color-text-muted);
}

.specimen .specimen-title {
  font-size: 17px;
  font-weight: 600;
  fill: var(--color-text);
}

.specimen .specimen-small,
.specimen .specimen-label {
  font-size: 10.5px;
}

.specimen .specimen-section {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.specimen-rule-strong {
  stroke: var(--color-text);
  stroke-width: 1.5;
}

.specimen-rule {
  stroke: var(--color-border);
  stroke-width: 1;
}

.specimen-value {
  fill: var(--color-border);
}

.specimen-box {
  fill: none;
  stroke: var(--color-border);
}

.hero-vial {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 60%;
  mix-blend-mode: multiply;
}

@media (width <= 899px) {
  .hero-copy,
  .hero-media {
    grid-column: 1 / -1;
  }

  .hero {
    padding-top: var(--space-6);
  }

  .display {
    font-size: var(--text-2xl);
  }
}

/* ---------- Page heads and content pages ---------- */

.page-head {
  padding-block: var(--space-7) var(--space-6);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.content-page .page-content {
  max-width: 64ch;
}

.content-page .page-content > * + * {
  margin-top: 1em;
}

.plate {
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-surface-alt);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Product page ---------- */

.product {
  align-items: start;
  row-gap: var(--space-6);
}

.product-gallery {
  grid-column: 1 / span 7;
}

.product-details {
  grid-column: 8 / span 5;
  position: sticky;
  top: var(--space-6);
  padding-left: clamp(0px, 2.8vw, 40px);
}

@media (width <= 899px) {
  .product-gallery,
  .product-details {
    grid-column: 1 / -1;
    position: static;
    padding-left: 0;
  }
}

.gallery-stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.gallery-stage [data-slide],
.gallery-stage img {
  width: 100%;
  height: 100%;
}

/* Product images are shown whole, never cropped, whatever their ratio. */
.gallery-stage img {
  object-fit: contain;
}

.gallery-coa {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery-coa:focus-visible {
  outline-offset: -6px;
}

.gallery-thumbs {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.thumb {
  display: block;
  width: auto;
  min-width: 80px;
  max-width: 10rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.thumb img {
  width: 80px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-data);
  background: var(--color-surface);
}

.thumb[aria-pressed="true"] img {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 4px var(--color-structure);
}

.thumb span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.thumb[aria-pressed="true"] span {
  color: var(--color-text);
}

.product-name {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.product-details .name-datum {
  margin: var(--space-5) 0;
}

.product-eyebrow,
.card-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.product-eyebrow {
  margin-bottom: var(--space-3);
}

.product-components {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-structure);
  font-variant-numeric: tabular-nums;
}

.product-summary {
  font-size: var(--text-md);
  line-height: 1.5;
}

.product-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.product-facts div {
  display: flex;
  gap: var(--space-2);
}

.product-facts dt {
  color: var(--color-text-muted);
}

.purchase {
  margin-top: var(--space-7);
}

/*
 * Wraps everywhere, not only on phones: once a segmented control's cells no
 * longer fit beside the price (a five-strength product even at desktop widths),
 * the price drops to its own line instead of the control breaking inside its box.
 */
.strength-line {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.strength {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
}

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 44px;
  padding: 9px var(--space-4);
  border-radius: var(--radius-data);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

@media (hover: hover) {
  .segmented label:hover {
    background: var(--color-surface-alt);
  }
}

.segmented input:checked + label {
  background: var(--color-structure);
  color: var(--color-on-structure);
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--color-structure);
  outline-offset: 2px;
}

.segmented input[data-stock="out"] + label .seg-value {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.segmented input[data-stock="out"]:not(:checked) + label {
  color: var(--color-text-muted);
}

.price {
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.stock {
  font-weight: 500;
  color: var(--color-status-success);
}

.stock[data-state="out"] {
  color: var(--color-status-error);
}

/*
 * Price per vial at each quantity tier, set like the specification sheet: fine
 * rules, muted text, tabular figures. The column that holds the quantity in the
 * box carries the surface tint and a structure rule above its heading.
 */
.qty-pricing {
  margin-top: var(--space-5);
}

.qty-pricing table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.qty-pricing caption {
  display: table-caption;
  margin-bottom: var(--space-3);
  text-align: left;
}

.qty-pricing th,
.qty-pricing td {
  padding: 10px var(--space-3);
  text-align: left;
}

.qty-pricing thead th {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.qty-pricing tbody td {
  padding-bottom: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.qty-pricing .qty-pricing-off td {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}

.qty-pricing .is-active {
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 500;
}

.qty-pricing thead .is-active {
  box-shadow: inset 0 2px 0 var(--color-structure);
}

.buy-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.qty {
  flex: none;
  width: 76px;
}

.qty .input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-2);
}

.buy-row .button {
  flex: 1;
}

.restriction {
  margin-top: var(--space-3);
  padding: 9px var(--space-4);
  border-radius: var(--radius-data);
  background: var(--color-text);
  color: var(--color-surface-alt);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.fulfilment {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.fulfilment dt {
  font-weight: 500;
}

.fulfilment dd {
  color: var(--color-text-muted);
}

@media (width <= 899px) {
  .restriction-bar {
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .product-name {
    font-size: var(--text-2xl);
  }

  /*
   * The strength control fills the details column and divides that width
   * equally among the strengths, like a native segmented control, so four or
   * five cells sit on one row instead of the last one wrapping inside the box.
   * The price keeps the row's gap but always drops to its own line below.
   * Below about 380 px the cell text scales down with the viewport so five
   * strengths still fit on one row on a 320 px phone.
   */
  .strength {
    flex: 1 1 100%;
  }

  .strength .segmented {
    display: flex;
    flex-wrap: wrap;
  }

  .strength .segmented label {
    flex: 1 1 48px;
    min-width: 0;
    padding-inline: var(--space-1);
    font-size: clamp(0.8125rem, 4.2vw, 1rem);
    white-space: nowrap;
  }
}

/* Specification sheet */

.spec-sheet {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border);
}

.spec-sheet tr {
  border-bottom: 1px solid var(--color-border);
}

.spec-sheet th,
.spec-sheet td {
  padding: var(--space-4) 0;
  text-align: left;
  vertical-align: baseline;
}

.spec-sheet th {
  width: 30%;
  padding-right: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.composition thead th {
  padding: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-structure);
}

.composition tbody th {
  width: auto;
  font-size: var(--text-base);
  color: var(--color-text);
}

.composition td,
.composition th.num {
  text-align: right;
}

.composition-total th,
.composition-total td {
  font-weight: 600;
}

.spec-sheet .sequence {
  line-height: 1.75;
}

.spec-note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (width <= 899px) {
  .spec-sheet th {
    width: 38%;
  }
}

.prose {
  max-width: 64ch;
}

.prose p + p {
  margin-top: 1em;
}

/* ---------- Product cards ---------- */

.card-grid {
  --card-row-gap: var(--space-7);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-row-gap) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-grid {
  margin-top: var(--space-6);
}

@media (width <= 899px) {
  .card-grid {
    --card-row-gap: var(--space-6);

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card-plate {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.card-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-name {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.card-name a {
  text-decoration: none;
}

.card-name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-name a:focus-visible {
  outline: none;
}

@media (hover: hover) {
  .product-card:hover .card-name a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}

.product-card:has(a:focus-visible) {
  outline: 2px solid var(--color-structure);
  outline-offset: 6px;
  border-radius: var(--radius-panel);
}

/* The type sits on the plate, where it costs the card no row and leaves the
   name to stand on its own. Every generated image holds its vial in the same
   place, clear of the top 11.65% of the frame, and the label centres in that
   band: a share of the image rather than a fixed inset, so it keeps its
   distance from the vial as the card narrows. It is a quiet note rather than an
   accent, so it takes the muted text colour at a lighter weight, which keeps
   its contrast where the accent's would have to stay. */
.card-eyebrow {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  height: 11.65%;
  margin: 0;
  padding-inline: 6%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.card-form {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* A long list of strengths wraps inside its own column, over even lines; the
   price keeps the first line, at the right edge, so prices read down the grid. */
.card-foot > span:first-child {
  min-width: 0;
  text-wrap: balance;
}

.card-price {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}

.card-stock {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-status-error);
}

/* Cards share the grid's rows, so eyebrows, names, forms, rules, and prices
   line up across a row whatever each card carries. A subgrid takes its gutters
   from the grid it sits in, which would open up the card's own rows, so the
   row gap moves onto the card and is taken back after the last row. Where
   subgrid is missing, each card stacks on its own as the flex column above. */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  .card-grid {
    row-gap: 0;
  }

  /* The last row's gap is taken back only while the grid has a card to carry
     it: a shop filter that matches nothing leaves the grid empty. */
  .card-grid:has(.product-card:not([hidden])) {
    margin-bottom: calc(-1 * var(--card-row-gap));
  }

  .product-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    margin-bottom: var(--card-row-gap);
  }

  .card-plate {
    grid-row: 1;
  }

  .card-name {
    grid-row: 2;
  }

  .card-form {
    grid-row: 3;
  }

  .card-foot {
    grid-row: 4;
  }

  .card-stock {
    grid-row: 5;
  }
}

@media (width <= 899px) {
  .card-foot {
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* ---------- Shop ---------- */

.result-count {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-7);
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
}

.shop-toolbar fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.segmented.compact label {
  min-width: 0;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-structure);
}

.shop-search {
  width: min(100%, 320px);
  margin-left: auto;
}

.empty-state {
  padding-block: var(--space-7) var(--space-8);
}

.empty-state p {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.empty-state .button {
  margin-top: var(--space-5);
}

@media (width <= 899px) {
  .shop-search {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- Batch record ---------- */

.record {
  align-items: start;
  row-gap: var(--space-7);
  padding-top: var(--space-7);
}

.record-summary {
  grid-column: 1 / span 5;
}

.record-document {
  grid-column: 7 / span 6;
}

.record-document .plate {
  aspect-ratio: 1;
}

.record-kicker {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.record-lot {
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.status {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-4);
  padding: 2px var(--space-3);
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
}

.status[data-status="current"] {
  color: var(--color-status-success);
}

.status[data-status="held"],
.status[data-status="pending"] {
  color: var(--color-status-held);
}

.status[data-status="previous"],
.status[data-status="archived"] {
  color: var(--color-status-archived);
}

.record-note {
  max-width: 46ch;
  margin-top: var(--space-5);
}

.record-note p + p {
  margin-top: var(--space-2);
}

.record .spec-sheet {
  margin-top: var(--space-6);
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (width <= 899px) {
  .record-summary,
  .record-document {
    grid-column: 1 / -1;
  }
}

/* ---------- About ---------- */

.about {
  align-items: start;
  row-gap: var(--space-7);
  padding-top: var(--space-7);
}

.entry {
  grid-column: 1 / span 4;
  position: sticky;
  top: var(--space-6);
}

.entry-native {
  display: inline-block;
  font-family: var(--font-native);
  font-size: var(--text-3xl);
  line-height: 1.3;
  color: var(--color-structure);
}

.entry-head {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.entry-pron {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-muted);
}

.entry-def {
  max-width: 32ch;
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.article {
  grid-column: 6 / span 6;
}

.article-content {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.7;
}

.article-content > p:first-child {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.article-content > p + p {
  margin-top: 1em;
}

.article-content .wp-block-separator.is-style-datum {
  margin-top: var(--space-8);
}

.article-content h2 {
  margin: var(--space-5) 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

@media (width <= 899px) {
  .entry,
  .article {
    grid-column: 1 / -1;
    position: static;
  }

  .entry-native {
    font-size: var(--text-2xl);
  }

  .article-content .wp-block-separator.is-style-datum {
    margin-top: var(--space-7);
  }
}

/* ---------- 404 ---------- */

.notfound {
  padding-block: 160px var(--space-9);
}

.notfound hr {
  width: 120px;
  height: 1px;
  margin: 0 0 var(--space-5);
  border: 0;
  background: var(--color-structure);
}

.notfound p {
  font-size: var(--text-lg);
}

/* ---------- COA viewer ---------- */

.coa-viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.coa-viewer[open] {
  display: flex;
  flex-direction: column;
  animation: coa-in var(--duration) var(--ease);
}

.coa-viewer::backdrop {
  background: var(--color-surface-alt);
}

@keyframes coa-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.coa-bar {
  flex: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.coa-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
}

.coa-heading {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.coa-kicker {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.coa-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.coa-actions {
  display: flex;
  gap: var(--space-2);
}

.coa-actions .button {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.coa-scroll {
  flex: 1;
  overflow: auto;
  padding: var(--space-7) var(--page-margin) var(--space-8);
}

.coa-page,
.coa-frame {
  display: block;
  width: min(100%, 816px);
  margin: 0 auto;
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--color-shadow), 0 12px 40px var(--color-shadow);
}

.coa-frame {
  height: calc(100dvh - 200px);
  border: 0;
}

@media (width <= 899px) {
  .coa-scroll {
    padding-block: var(--space-5) var(--space-7);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--section-gap);
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
}

.page-section-band:last-child {
  margin-bottom: calc(-1 * var(--section-gap));
}

.footer-top {
  row-gap: var(--space-7);
}

.footer-brand {
  grid-column: 1 / span 4;
}

.footer-logo-mark {
  display: block;
  width: 210px;
  height: auto;
}

.footer-tagline {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-nav {
  grid-column: 6 / span 7;
}

.footer-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu > li > a {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.footer-menu .sub-menu {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.footer-menu .sub-menu a {
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .footer-menu a[href]:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (width <= 899px) {
  .footer-brand,
  .footer-nav {
    grid-column: 1 / -1;
  }

  .footer-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}