/* ==========================================================================
   XYZTING — front-end stylesheet
   Hand-written, no build step. Enqueued from functions.php via filemtime().

   Colour model (decided 2026-10-15):
     brand  (green)  = identity surfaces — utility bar, category strip, bands
     accent (teal)   = interactive — links, buttons, focus rings
   Two roles, one palette. Do not introduce a third hue.
   ========================================================================== */

:root {
  --brand:        #2e7d32;
  --brand-dark:   #1b5e20;
  --brand-deep:   #123f16;
  --brand-tint:   #e8f5e9;

  --accent:       #145f65;
  --accent-dark:  #0e474c;
  --accent-tint:  #e6f2f2;

  --ink:          #172126;
  --ink-soft:     #3d4a50;
  --muted:        #5b6b72;
  --line:         #dce3e4;
  --paper:        #ffffff;
  --paper-alt:    #f4f6f5;
  --pale:         #f4f6f5; /* legacy alias of --paper-alt */

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --fs-display: clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h1:      clamp(1.9rem, 4vw, 2.75rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 1.95rem);
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 1px 2px rgba(23, 33, 38, 0.05), 0 8px 24px rgba(23, 33, 38, 0.06);
  --shell: 1200px;

  color-scheme: light;
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a, a:visited { color: var(--accent); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

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

.site-shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--paper); padding: var(--sp-1); z-index: 100; }

/* -------------------------------------------------------- utility bar --- */

.utility-bar { background: var(--brand-deep); color: #fff; font-size: var(--fs-sm); }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: 40px; }
.utility-contact, .utility-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.utility-bar a, .utility-bar a:visited { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------- header --- */

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 84px;
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}

.site-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
.site-brand:hover { text-decoration: none; }
/* `width: auto` left the logo with no width until its file arrived, so the
   header grew by a few pixels 9 seconds into a cold load and pushed the whole
   page down (CLS 0.058, measured at the moment the logo landed). A fixed width
   plus `height: auto` lets the browser take the ratio from the img's width and
   height attributes and reserve 64x27 straight away. */
.site-logo { width: 64px; height: auto; max-height: 46px; }
.site-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-brand-text strong { font-size: 1.25rem; letter-spacing: 0.01em; }
.site-brand-text small { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* Eight items have to share ~650px (hello-elementor caps the header at 1140px),
   so the column gap is tighter than the rhythm elsewhere. Below 1180px the nav
   takes a row of its own instead of squeezing into three lines. */
.primary-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; flex: 1; justify-content: center; }
.primary-nav a { text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); white-space: nowrap; padding-block: 0.35rem; }
.primary-nav a:hover { color: var(--accent); }
.primary-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary-nav .current-menu-item > a { color: var(--accent); box-shadow: inset 0 -2px 0 var(--brand); }

.primary-nav .xinyi-menu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.35rem 0.85rem; list-style: none; padding: 0; margin: 0; width: 100%; justify-content: center; }
.primary-nav .xinyi-menu li { position: relative; list-style: none; margin: 0; }
.primary-nav .xinyi-menu a { display: block; }
.primary-nav .xinyi-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 0.8rem; border-left: 1px solid var(--line); font-size: 0.9em; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.language-switcher { max-width: 100%; }
.language-switcher .trp-language-switcher { max-width: 100%; }
/* Polylang ships its own layout stylesheet; these rules only size the flags and
   set the type so the switcher sits beside the quote button rather than under
   it. Kept separate from the TranslatePress rules above until the migration
   is signed off. */
.language-switcher .pll-switcher { margin: 0; }
.language-switcher .pll-switcher ul { display: flex; align-items: center; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.language-switcher .pll-switcher li { margin: 0; line-height: 1; }
.language-switcher .pll-switcher a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); text-decoration: none; padding-block: 0.2rem; }
.language-switcher .pll-switcher a:hover { color: var(--accent); }
.language-switcher .pll-switcher .current-lang a { color: var(--accent); }
.language-switcher .pll-switcher img { width: 18px; height: 12px; object-fit: cover; border-radius: 1px; }

/* The header's language box, rebuilt from the TranslatePress 3.3 switcher the
   site had before Polylang. Every number here is that switcher's: 1px border
   of the text colour at 10%, 5px radius, 10px box padding, 7px/16px items,
   an 18px 4:3 flag and a 20px stroke chevron. It opens inside its own box. */
.language-switcher .lang-switch {
  position: relative; display: inline-block;
  padding: 10px 0;
  border: 1px solid rgba(20, 56, 82, 0.1); border-radius: 5px; background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px; line-height: 1.2; color: #143852;
}
.language-switcher .lang-switch summary {
  display: flex; align-items: center; justify-content: space-between;
  padding-right: 10px; list-style: none; cursor: pointer;
}
.language-switcher .lang-switch summary::-webkit-details-marker { display: none; }
.language-switcher .lang-switch summary::marker { content: ""; }
.language-switcher .lang-switch-current,
.language-switcher .lang-switch-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; min-height: 19px; box-sizing: content-box;
  color: #143852; font-size: 14px; font-weight: 400; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.language-switcher .lang-switch img {
  width: 18px; height: auto; aspect-ratio: 4 / 3;
  border-radius: 2px; object-fit: cover; display: inline-block; flex: none;
}
.language-switcher .lang-switch-arrow { flex: none; pointer-events: none; transition: transform 0.2s ease; }
.language-switcher .lang-switch[open] .lang-switch-arrow { transform: rotate(180deg); }
.language-switcher .lang-switch-menu { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.language-switcher .lang-switch-menu li { margin: 0; }
.language-switcher .lang-switch-menu a:hover { background: rgba(0, 0, 0, 0.05); color: #1d2327; }

/* -------------------------------------------------------------- hero --- */

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-deep); }
/* The hero photographs are exposed dark; lift them rather than re-cut the files,
   so the originals stay the source of truth and the lift is one number to tune. */
.hero .hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(1.3) saturate(1.06); }
/* No wash over the photograph: the hero reads at full brightness edge to edge
   (2026-10-22, restored after a day of trying a white fade). White copy is kept
   legible by the text shadow below instead, so the picture is never dimmed. */
.hero-eyebrow, .hero h1, .hero-title, .hero-lead {
  /* A tight dark edge plus a wide soft one: the hero photographs range from a
     sunlit spray to a white reactor hall, and one layer is not enough on the
     bright ones. Still type shadow only — nothing is laid over the picture. */
  text-shadow: 0 1px 2px rgba(8, 28, 26, 0.95), 0 2px 6px rgba(8, 28, 26, 0.9), 0 4px 30px rgba(8, 28, 26, 0.85);
}
/* The reactor hall is exposed far brighter than the other two photographs, and
   white copy washes out on it. Lowering its exposure (rather than laying a
   colour over the frame) keeps the picture as photographed. */
.hero-slide:nth-child(3) .hero-background { filter: brightness(0.86) saturate(1.02); }
/* A hero with no photograph at all falls back to the brand gradient. */
.hero:not(:has(.hero-background))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--brand-deep), var(--accent-dark));
}

.hero-inner {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 60vh, 640px);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero-panel { max-width: 46rem; color: #fff; }
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #eaf7ec;
  margin: 0 0 var(--sp-2);
}
/* Chinese headlines break at the punctuation, not mid-term: without this the
   phone-width title splits as 分散剂、乳化 / 剂、消泡剂, which reads as a typo. */
.hero h1, .hero-title { font-size: var(--fs-display); line-height: 1.08; margin: 0 0 var(--sp-2); color: #fff; word-break: keep-all; overflow-wrap: break-word; }
.hero-lead { font-size: 1.08rem; font-weight: 500; color: #fff; margin: 0 0 var(--sp-3); max-width: 46ch; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }

/* Slide stack: all slides share one grid cell and cross-fade, so the change is
   visible. Without JavaScript the :first-child rule keeps the first slide up. */
.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
.hero-slide:first-child { opacity: 1; pointer-events: auto; }
.hero-carousel .hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-carousel .hero-slide:first-child:not(.is-active) { opacity: 0; pointer-events: none; }

/* Slow push on the active photograph so a still slide still feels alive.
   Duration tracks the carousel interval in hero-carousel.js. */
@keyframes hero-push {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}
.hero-carousel .hero-slide.is-active .hero-background { animation: hero-push 4s ease-out both; }

@keyframes hero-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hero-carousel .hero-slide.is-active .hero-panel { animation: hero-fade 700ms ease both; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-carousel .hero-slide.is-active .hero-background,
  .hero-carousel .hero-slide.is-active .hero-panel { animation: none; }
}

.hero-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
}
.hero-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.hero-arrow:hover { background: rgba(0, 0, 0, 0.45); border-color: #fff; }
.hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hero-dots { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hero-dot.is-active { background: #fff; border-color: #fff; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------ blocks --- */

.section { padding-block: var(--sp-5); }
.band-plain { background: var(--paper-alt); }
.band-brand { background: var(--brand); color: #fff; }
.band-brand h2 { color: #fff; margin-top: 0; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.section-heading h2 { margin: 0; }
.section-heading > a { font-weight: 600; white-space: nowrap; }

/* A short brand rule under every section title gives the page a spine without
   adding decoration. Suppressed on the coloured band where green on green
   would disappear. */
.section-heading h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--brand);
}
.band-brand .section-heading h2::after { background: rgba(255, 255, 255, 0.6); }

.prose { max-width: 74ch; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 700; font-size: var(--fs-xs); margin: 0 0 var(--sp-1); }
.note { color: var(--muted); font-size: var(--fs-sm); }
.result-count { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.text-link { font-weight: 600; }

/* ------------------------------------------------------- intro card --- */

.intro-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-card);
}
.intro-heading { margin: 0 0 var(--sp-2); }
.intro-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.intro-chips li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Two business lines, deliberately identical in weight. */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.entry-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.entry-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.entry-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.entry-body h2 { margin: 0; }
.entry-body p { margin: 0; color: var(--muted); max-width: 52ch; }
.entry-link { font-weight: 600; margin-top: auto; }

/* ------------------------------------------------------ range cards --- */

.range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.range-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.range-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23,33,38,.06), 0 14px 32px rgba(23,33,38,.10); }
.range-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.range-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.range-body h3 { margin: 0; }
.range-body h3 a { color: var(--ink); text-decoration: none; }
.range-body h3 a:hover { color: var(--accent); }
.range-body p { margin: 0; color: var(--muted); font-size: var(--fs-sm); flex: 1; }

/* --------------------------------------------------- problem rows --- */

.problem-list { display: grid; gap: var(--sp-5); }
.problem-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
.problem-row:nth-child(even) .problem-media { order: 2; }
.problem-media { border-radius: var(--radius-md); overflow: hidden; background: var(--paper-alt); box-shadow: var(--shadow-card); }
.problem-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.problem-body h3 { margin: 0 0 var(--sp-2); font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.problem-points { margin: 0 0 var(--sp-2); padding-left: 1.1rem; color: var(--ink-soft); }
.problem-points li { margin-bottom: 0.3rem; }
.problem-grades {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper-alt);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
}
.problem-grades span { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.problem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; }
.chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-decoration: none;
  background: var(--paper);
}
.chip:hover { border-color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------- capabilities --- */

.stats-inline { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.stats-inline li { display: flex; align-items: baseline; gap: 0.4rem; }
.stats-inline strong { font-size: 1.35rem; color: var(--brand-dark); }
.stats-inline span { font-size: var(--fs-sm); color: var(--muted); }

.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.capability-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.capability-index {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #bcdcbf;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.capability-card h3 { margin: 0; font-size: 1.05rem; }
.capability-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------- trust --- */

.trust-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-3); }
.partner-block, .cert-block {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
}
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list li { display: flex; flex-direction: column; gap: 0.1rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.cert-list li:last-child { border-bottom: 0; }
.cert-list span { color: var(--muted); font-size: var(--fs-sm); }

.resource-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ cta --- */

.cta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-4); align-items: center; }
.cta-copy p { color: rgba(255, 255, 255, 0.9); margin-bottom: 0; max-width: 52ch; }
.cta-panel {
  /* Darken rather than lighten: a white veil over the brand green dropped the
     body text to about 4.2:1, under the 4.5:1 minimum. */
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.cta-contact { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem var(--sp-2); margin: 0 0 var(--sp-3); }
.cta-contact dt { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-sm); }
.cta-contact dd { margin: 0; font-weight: 600; }
.cta-contact a, .cta-contact a:visited { color: #fff; }

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

/* Flex rather than grid so a part-filled last row centres instead of leaving a
   single card stranded against the left edge — with five products in a
   four-column grid that happened on the category and search pages. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.card-grid > * { flex: 1 1 260px; max-width: 30rem; }

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.product-card.has-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.product-card-media { display: block; background: var(--paper-alt); }
.product-card-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-card-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  margin: 0;
  font-size: var(--fs-sm);
}
.product-card-model { font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.product-card-cat { color: var(--muted); }
.product-card-title { font-size: var(--fs-h3); margin: 0; }
.product-card-title a { text-decoration: none; color: var(--ink); }
.product-card-title a:hover { color: var(--accent); }
.product-card-summary { color: var(--muted); margin: 0; flex: 1; }
.text-link { font-weight: 600; margin-top: auto; }

/* Category filter above the product grid. */
.product-filter { margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.product-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-filter a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 transparent;
}
.product-filter a:hover { color: var(--accent); }
.product-filter a.is-active { color: var(--accent); box-shadow: inset 0 -3px 0 var(--brand); }
.product-filter-count {
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Second axis: the formulation family. Same chip pattern, one step quieter. */
.product-filter-formulation {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  margin-top: calc(-1 * var(--sp-2));
}
.product-filter-formulation ul { gap: 0 var(--sp-2); }
.product-filter-formulation a { padding: 0.45rem 0; font-size: var(--fs-xs); font-weight: 500; }
.product-filter-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-card-formulations { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.formulation-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
}
.formulation-badge:hover { border-color: var(--accent); text-decoration: none; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-grid a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
}
.category-grid a:hover { border-color: var(--accent); color: var(--accent); }
.category-count { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.formulation-types {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem var(--sp-3);
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.formulation-types dt { font-weight: 600; }
.formulation-types dd { margin: 0; color: var(--muted); }

/* ----------------------------------------------------------- forms --- */

.button, .search-form button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.2rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:visited, .button:hover { color: #fff; text-decoration: none; }
.button:hover, .search-form button:hover { background: var(--accent-dark); }
.button:focus-visible, .search-form button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.button-quote { background: var(--brand); }
.button-quote:hover { background: var(--brand-dark); }

.button-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.button-ghost:visited, .button-ghost:hover { background: var(--accent-tint); color: var(--accent-dark); }

.button-ghost-light { background: rgba(8, 28, 26, 0.38); color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); }
.button-ghost-light:visited, .button-ghost-light:hover { background: rgba(8, 28, 26, 0.62); color: #fff; }
.button-on-dark { background: #fff; color: var(--brand-dark); }
.button-on-dark:visited, .button-on-dark:hover { background: var(--brand-tint); color: var(--brand-deep); }

.search-form label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.search-form > div { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.search-form input {
  min-width: min(100%, 260px);
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.search-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------ page types --- */

.page-content { max-width: 900px; }

.breadcrumbs { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.6rem; }

.product-detail { max-width: 1120px; }
.subheading { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 var(--sp-1); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.tag-list li { padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); font-size: var(--fs-sm); }

.table-scroll { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; min-width: 500px; width: 100%; }
th, td { text-align: left; padding: 0.7rem; border-bottom: 1px solid var(--line); }
th { background: var(--paper-alt); font-size: var(--fs-sm); }
.download-table { min-width: 560px; }
.download-table td:first-child { white-space: nowrap; }

.document-list { padding-left: 1.2rem; }
.document-list li { margin-bottom: 0.6rem; }

.contact-block {
  font-style: normal;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-alt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand);
}
.term-description { max-width: 68ch; margin: 0 0 var(--sp-2); color: var(--muted); }

/* ---------------------------------------------------------- footer --- */

.site-footer { background: var(--brand-deep); color: rgba(255, 255, 255, 0.8); padding: var(--sp-5) 0 var(--sp-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); }
.footer-brand strong { display: block; font-size: var(--fs-h3); margin-bottom: 0.4rem; color: #fff; }
.footer-brand p { margin: 0; max-width: 44ch; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-contact { font-style: normal; }
.footer-contact p { margin: 0 0 0.35rem; }
.footer-address { max-width: 30ch; }
.site-footer a, .site-footer a:visited { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-social-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* -------------------------------------------------------------- misc --- */

.xinyi-custom-home { min-width: 0; }

/* Elementor's kit defines its global colours on the body class and its button
   rule reads from them, so overriding .elementor-button directly loses on
   specificity. site.css already loads after the kit stylesheet, so matching the
   element plus the class is enough — no !important needed. */
body.elementor-kit-4 {
  --e-global-color-primary:   var(--accent);
  --e-global-color-secondary: var(--brand);
  --e-global-color-text:      var(--ink);
  --e-global-color-accent:    var(--accent);
}
body .elementor-widget-form .elementor-button,
body .elementor-widget-form .elementor-field-group input,
body .elementor-widget-form .elementor-field-group textarea,
body .elementor-widget-form .elementor-field-group select {
  border-radius: var(--radius-sm);
  border-color: var(--line);
}

/* Elementor's kit sets `padding-bottom: 0` on above-field labels, which butts
   each label's line box against the field's top border — the text reads as if it
   is sitting on the line. One extra class over the kit's selector beats it
   without !important. */
body.elementor-page .elementor-widget-form .elementor-form-fields-wrapper.elementor-labels-above
  .elementor-field-group > .elementor-field-label {
  padding-bottom: 0.4rem;
}

/* ------------------------------------------- about / applications --- */

.about-lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; margin: 0 0 var(--sp-3); }
.about-stats {
  display: grid;
  /* auto-fit so the row stays evenly filled when a figure is added or pulled. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
}
.about-stats strong { display: block; font-size: 2.1rem; line-height: 1; color: var(--brand-dark); }
.about-stats span { display: block; margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--muted); }
.about-columns { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--sp-4); align-items: start; }
.about-columns h2 { margin-top: 0; }
.about-facts {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.about-facts h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.about-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem var(--sp-2); margin: 0; }
.about-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.about-facts dd { margin: 0; font-size: var(--fs-sm); }

.application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.application-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.application-card h3 { margin: 0.2rem 0 0.45rem; font-size: var(--fs-h3); }
.application-card p { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.application-code {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.application-links { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------- honours --- */

/* Items are grouped by document shape: portrait system certificates read as a
   four-up contact sheet, landscape plaques as a three-up row. Grouping also
   keeps the letterboxing out of the picture — each group shares one aspect
   ratio, so the cards line up without a fixed-height frame. */
.honour-band + .honour-band { padding-top: 0; }
.honour-group-title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.honours-grid { display: grid; gap: var(--sp-3); }
.honours-grid--certification { grid-template-columns: repeat(4, 1fr); }
.honours-grid--recognition { grid-template-columns: repeat(3, 1fr); }
.honours-grid--document { grid-template-columns: minmax(0, 560px); }
.honour-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
}
.honour-image {
  display: block;
  margin-bottom: var(--sp-2);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.honour-image img { display: block; width: 100%; height: auto; }
.honour-card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.honour-issuer { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.honour-note { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.45; }
.honour-year { margin: 0.2rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
.honours-empty {
  max-width: 62ch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.honours-empty h2 { margin-top: 0.2rem; }
.honours-empty p { color: var(--muted); }

/* ------------------------------------------------------------ news --- */

.news-filter { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: var(--sp-3) 0; }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.news-card h2 { margin: 0.25rem 0 0.5rem; font-size: var(--fs-h3); }
.news-card h2 a { text-decoration: none; }
.news-card h2 a:hover { text-decoration: underline; }
.news-card p { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.news-card .text-link { margin-top: auto; }
.news-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.news-meta span { padding-left: 0.6rem; border-left: 1px solid var(--line); }
.news-single { max-width: 860px; }
.news-single h1 { margin-top: 0.3rem; }
.news-body { margin-top: var(--sp-3); }
.news-back { margin-top: var(--sp-4); }
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-4); }
.pagination a, .pagination span {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0.35rem 0.55rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }
.text-link.on-dark { color: #fff; display: block; margin-top: var(--sp-2); }

/* -------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .range-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .about-columns { grid-template-columns: 1fr; }
  .application-grid { grid-template-columns: repeat(2, 1fr); }
  .honours-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Brand + actions already take ~490px; the eight nav items need ~640px on one
   line, which only fits once the header reaches its 1140px cap. hello-elementor
   drops its container to 800px below 1200px, so that is the boundary: under it
   the nav gets a full row rather than breaking mid-menu. */
@media (max-width: 1199px) {
  .primary-nav { justify-content: center; order: 3; flex: 0 0 100%; }
  .header-actions { order: 2; }
}

@media (max-width: 920px) {
  .section { padding-block: var(--sp-4); }
  .card-grid { gap: var(--sp-2); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .problem-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .problem-row:nth-child(even) .problem-media { order: 0; }
  .primary-nav { justify-content: flex-start; order: 3; flex: 0 0 100%; }
  .header-actions { order: 2; }
}

@media (max-width: 650px) {
  .utility-inner { justify-content: center; }
  /* Phones: the utility bar carries the public email, the phone and two
     WhatsApp lines before the site chrome even starts, which stacked to
     155px. Keep the phone and the first WhatsApp line; the second number and
     the email stay on the contact page and in the footer. */
  .utility-contact a[href^="mailto:"], .utility-wa--alt { display: none; }
  .site-brand-text small { display: none; }
  /* Phones: eight links in a narrow column, so step down a size to keep the
     menu to two rows. */
  .primary-nav a { font-size: 0.82rem; }
  .primary-nav { gap: 0.3rem 0.6rem; }
  .section { padding-block: 1.7rem; }
  .category-grid { grid-template-columns: 1fr; }
  .range-grid { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .formulation-types { grid-template-columns: 1fr; gap: 0.15rem; }
  .formulation-types dd { margin-bottom: var(--sp-2); }
  .intro-card { padding: var(--sp-3); }
  .problem-body h3 { font-size: var(--fs-h3); }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  /* Four figures wrap into a ragged column at this width; a 2x2 grid with the
     figure above its caption keeps each cell inside one column. */
  .stats-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-3); }
  .stats-inline li { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .application-grid { grid-template-columns: 1fr; }
  .honours-grid { grid-template-columns: 1fr; }
  .honours-grid--document { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .honours-empty { padding: var(--sp-3); }
}

/* 360px-class phones: without this the menu needs three rows. */
@media (max-width: 400px) {
  .primary-nav { gap: 0.25rem 0.4rem; }
  .primary-nav a { font-size: 0.78rem; }
}

/* ------------------------------------------------- product catalogue --- */

/* The listing is a filter panel and a card grid. Cards share one envelope:
   square photo, code and category, name, clamped summary, dosage forms, and
   the link on a common baseline. Nothing here touches the home page, which
   keeps its own compact .product-card. */

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

/* The listing pages sit directly under the site header, so the standard 56px
   section band only pushed the first product 100px down the screen. */
.catalogue-page { padding-block: var(--sp-4); }

.catalogue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.catalogue-head-copy { min-width: 0; }
.catalogue-head .eyebrow { margin-bottom: 0.35rem; }
.catalogue-head h1 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
/* Same short brand rule the section headings use, so the catalogue opens with
   the site's own gesture rather than a bare line of text. */
.catalogue-head h1::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 0.65rem;
  border-radius: 2px;
  background: var(--brand);
}
.catalogue-head-copy { flex: 1 1 26rem; }
.catalogue-lede { max-width: 56ch; margin: 0.55rem 0 0; color: var(--ink-soft); }

.catalogue-search { display: flex; }
.catalogue-search input[type="search"] {
  width: 15rem;
  max-width: 100%;
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
}
.catalogue-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.catalogue-search button {
  padding: 0 1.05rem;
  border: 1px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.catalogue-search button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Two columns from here down: a rail carrying both facets, then the grid and
   its count line. The rail is one GET form — categories and dosage forms travel
   together — which is what lets a buyer read two shelves side by side instead
   of the old one-chip-one-reload rows above the grid. */
.catalogue-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-3);
}
/* Sticky, but never taller than the window: the rail already runs to 594px with
   five shelves and ten dosage forms, and a stuck column whose last rows sit
   below the fold is worse than one that scrolls on its own. */
.catalogue-rail {
  position: sticky;
  top: 1rem;
  min-width: 0;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: var(--sp-2);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.catalogue-rail-summary { display: none; }
.catalogue-rail-form { display: flex; flex-direction: column; }

.rail-group + .rail-group {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.rail-title { margin: 0 0 0.1rem; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.rail-hint { margin: 0 0 0.55rem; font-size: var(--fs-xs); color: var(--muted); }
/* Product type is a secondary filter now: the rail leads with brand, and the
   type tree is folded away until someone opens it. */
.rail-group--type > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.rail-group--type > summary::-webkit-details-marker { display: none; }
.rail-group--type > summary::after { content: '+'; font-weight: 500; color: var(--muted); }
.rail-group--type[open] > summary::after { content: '–'; }
.rail-group--type[open] > summary { margin-bottom: 0.15rem; }

.rail-tree, .rail-checks { margin: 0; padding: 0; list-style: none; }
.rail-tree > li { border-bottom: 1px solid var(--line); }
.rail-tree > li:first-child { border-top: 1px solid var(--line); }
.rail-group .rail-checks { margin-top: 0.35rem; }

.rail-branch > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.35rem 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.rail-branch > summary::-webkit-details-marker { display: none; }
.rail-branch > summary a { color: inherit; text-decoration: none; }
.rail-branch > summary:hover,
.rail-branch > summary a[aria-current="page"] { color: var(--accent); }
.rail-branch-count { margin-left: auto; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Chevron drawn from a border so the rail carries no icon font. */
.rail-branch > summary::after {
  content: "";
  flex: none;
  width: 0.38rem;
  height: 0.38rem;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.rail-branch[open] > summary::after { transform: rotate(-135deg); }
.rail-branch > ul {
  margin: 0 0 0.45rem;
  padding: 0 0 0 0.5rem;
  list-style: none;
  border-left: 1px solid var(--line);
}

.rail-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.05rem;
  padding: 0.2rem 0.4rem 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
  cursor: pointer;
}
.rail-tree > li > .rail-check { padding-left: 0.3rem; }
.rail-checks .rail-check { padding-left: 0.3rem; }
.rail-check:hover { background: var(--paper-alt); }
.rail-check input { flex: none; width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rail-check span { flex: 1 1 auto; min-width: 0; }
.rail-check em { flex: none; font-style: normal; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-check:has(input:checked) { background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; }
.rail-check:has(input:checked) em { color: var(--accent-dark); }

.rail-actions { margin: 0.9rem 0 0; }
.rail-submit {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.rail-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.catalogue-results { min-width: 0; }
.catalogue-results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--sp-2);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.catalogue-count { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.catalogue-count strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.catalogue-scope::before { content: "\00b7"; margin: 0 0.4rem; }
.catalogue-clear { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.catalogue-clear:hover { color: var(--accent-dark); text-decoration: underline; }
/* Three across in the narrower column, which is what the rail costs. */
.catalogue-results .product-grid { grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
  gap: var(--sp-3);
}

#main-content .catalogue-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#main-content .catalogue-card:hover { border-color: #bcd1c6; box-shadow: var(--shadow-card); transform: translateY(-2px); }
#main-content .catalogue-card .product-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-alt); }
#main-content .catalogue-card .product-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
#main-content .catalogue-card:hover .product-card-image { transform: scale(1.03); }
#main-content .catalogue-card .product-card-body { gap: 0.4rem; padding: 0.8rem 1rem; }
#main-content .catalogue-card .product-card-meta { align-items: center; gap: 0.5rem; margin: 0; }
#main-content .catalogue-card .product-card-model {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
/* Inside a category every card would repeat the page's own name. */
.tax-adweb_product_cat #main-content .catalogue-card .product-card-cat { display: none; }

#main-content .catalogue-card .product-card-cat {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
#main-content .catalogue-card .product-card-title { margin: 0; font-size: 1.1rem; line-height: 1.45; }
#main-content .catalogue-card .product-card-summary {
  display: -webkit-box;
  flex: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}
#main-content .catalogue-card .product-card-formulations { gap: 0.3rem; margin: 0.1rem 0 0; }
#main-content .catalogue-card .text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
#main-content .catalogue-card .text-link::after { content: "\2192"; transition: transform 160ms ease; }
#main-content .catalogue-card:hover .text-link::after { transform: translateX(3px); }

.navigation.pagination { display: flex; justify-content: center; margin-top: var(--sp-4); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.navigation.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.navigation.pagination .page-numbers.current { border-color: var(--accent); background: var(--accent); color: #fff; }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 1100px) {
  .catalogue-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--sp-2); }
}

@media (max-width: 900px) {
  /* The rail folds into a disclosure above the grid: on a phone the first
     product should be the first thing under the heading. */
  .catalogue-layout { grid-template-columns: minmax(0, 1fr); }
  .catalogue-rail { position: static; max-height: none; overflow: visible; padding-right: 0; border-right: 0; }
  .catalogue-rail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.85rem;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-alt);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }
  .catalogue-rail-summary::-webkit-details-marker { display: none; }
  .catalogue-rail-summary::after { content: "\002B"; font-weight: 700; color: var(--muted); }
  .catalogue-rail-details[open] .catalogue-rail-summary::after { content: "\2212"; }
  .catalogue-rail-details[open] .catalogue-rail-form { margin-top: var(--sp-2); }
}

@media (max-width: 760px) {
  .catalogue-head { align-items: stretch; }
  .catalogue-head-copy, .catalogue-search { width: 100%; }
  .catalogue-search input[type="search"] { flex: 1; width: auto; min-width: 0; }
  .product-grid { gap: var(--sp-2); }
}

/* ------------------------------------------------ product detail page --- */
/* Laid out after the group's other product site: a photo banner carrying the
   grade name, a grey "you are here" strip, then one opening row of category
   tree · packshot · short description with its enquiry button. Everything
   below is a full-width stack of section bars — parameters, copy, documents,
   siblings — so the eye can jump straight to the bar it needs instead of
   reading a two-column magazine layout. `pd-` prefix keeps all of it off the
   catalogue and the home page. */

.pd-container { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
.pd-page { padding-bottom: var(--sp-4); }

/* Banner ---------------------------------------------------------------- */
.pd-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 11rem;
  padding-block: var(--sp-4);
  background:
    linear-gradient(rgba(12, 46, 16, 0.72), rgba(12, 46, 16, 0.6)),
    url("img/product-banner.jpg") center / cover no-repeat,
    var(--brand-deep);
  color: #fff;
  text-align: center;
}
.pd-banner-inner { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
.pd-banner h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.25; color: #fff; }

/* "You are here" strip -------------------------------------------------- */
.pd-crumbbar { background: var(--paper-alt); border-bottom: 1px solid var(--line); }
.pd-crumbbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding-block: 0.5rem; }
.pd-crumb-label { font-size: var(--fs-sm); color: var(--muted); }
.pd-crumbbar .breadcrumbs { margin: 0; font-size: var(--fs-sm); }
.pd-crumbbar .breadcrumbs li + li::before { content: "\00bb"; margin-right: 0.5rem; color: var(--muted); }
.pd-crumbbar .breadcrumbs span[aria-current] { color: var(--muted); }

/* Opening row ----------------------------------------------------------- */
.pd-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 21rem;
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-3);
}

.pd-side-title {
  margin: 0 0 var(--sp-2);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pd-side-title:not(:first-child) { margin-top: var(--sp-3); }

.pd-side-cats { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.pd-side-cats > li { border-bottom: 1px solid var(--line); }
.pd-side-cats > li:first-child { border-top: 1px solid var(--line); }
.pd-side-cats a { display: block; padding: 0.5rem 0; color: var(--ink-soft); text-decoration: none; }
.pd-side-cats a:hover { color: var(--accent); }
.pd-side-cats details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.pd-side-cats summary::-webkit-details-marker { display: none; }
.pd-side-cats details > summary::after { content: "+"; color: var(--muted); font-weight: 700; }
.pd-side-cats details[open] > summary::after { content: "\2212"; }
.pd-side-cats details > summary:hover { color: var(--accent); }
.pd-side-cats details ul { margin: 0 0 0.5rem; padding: 0 0 0 0.8rem; list-style: none; border-left: 2px solid var(--line); }
.pd-side-cats details ul a { padding: 0.35rem 0; font-size: 0.9rem; }
.pd-side-cats .is-current > a,
.pd-side-cats .is-current > details > summary,
.pd-side-cats details ul .is-current > a { color: var(--accent); font-weight: 700; }

/* Dosage-form shortcuts: the fastest way to the sibling grades a formulator
   is comparing against this one. */
.pd-side-all { display: none; margin: 0.5rem 0 0; font-size: var(--fs-sm); }
.pd-side-all a { color: var(--accent); font-weight: 600; }

.pd-side-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pd-side-links a {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.pd-side-links a:hover { border-color: var(--accent); color: var(--accent); }

/* Packshot -------------------------------------------------------------- */
.pd-gallery-figure {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
/* 4:3, not square: the packshot used to stretch the opening row 200px past the
   short description, leaving a white hole under the enquiry button. */
.pd-gallery-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* Short description + enquiry ------------------------------------------- */
/* No heading: the paragraph beside the packshot reads as a lede on its own,
   and a "Short Description" label is a CMS term no buyer looks for. */
/* Stretched and flexed: the enquiry button sits on the bottom edge of the
   packshot instead of hanging at the top of a 190px white gap. */
.pd-buy { align-self: stretch; display: flex; flex-direction: column; }
.pd-short { margin: 0 0 var(--sp-2); font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
.pd-tags { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); }
.pd-tags-label { font-weight: 700; color: var(--ink); }
.pd-enquiry {
  display: block;
  margin-top: auto;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.pd-enquiry:hover { background: var(--brand-dark); color: #fff; }

/* Section bars ---------------------------------------------------------- */
.pd-bar {
  margin: var(--sp-3) 0 0;
  padding: 0.65rem var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pd-body > .pd-bar:first-child { margin-top: var(--sp-4); }

/* The global table rule keeps a 500px minimum so wide data tables can scroll
   sideways; a two-column label/value list does not need that. */
.pd-param { width: 100%; min-width: 0; margin-top: 0.75rem; border-collapse: collapse; table-layout: fixed; }
.pd-param th,
.pd-param td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 0.95rem; }
.pd-param th { width: 40%; font-weight: 600; color: var(--ink); }
.pd-param td { color: var(--ink-soft); overflow-wrap: anywhere; }
.pd-param tbody tr:nth-child(odd) { background: var(--paper-alt); }

.pd-detail { max-width: 72ch; margin-top: 0.75rem; color: var(--ink-soft); }
.pd-detail > :first-child { margin-top: 0; }
.pd-detail p { margin: 0 0 0.6rem; }
.pd-detail h2 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-h3); color: var(--ink); }
.pd-detail h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: 1.1rem; color: var(--ink); }
.pd-detail ul,
.pd-detail ol { margin: 0 0 var(--sp-2); padding-left: 1.2rem; }
.pd-detail li { margin-bottom: 0.3rem; }
.pd-detail strong { color: var(--ink); }

.pd-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.pd-docs li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.pd-docs a { font-weight: 600; }
.pd-doc-type { flex: none; padding: 0.1rem 0.45rem; border-radius: 3px; background: var(--brand-tint); color: var(--brand-deep); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; }
.pd-body > .note { margin: 0.6rem 0 0; }

.pd-cta-row { margin: var(--sp-3) 0 0; }
.pd-cta-row .pd-enquiry { display: inline-block; min-width: 18rem; padding: 0.7rem 1.6rem; }

.pd-related-grid { margin-top: 0.75rem; }

/* Narrow -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .pd-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .pd-side { grid-row: 1 / span 2; }
  .pd-gallery { grid-column: 2; }
  .pd-buy { grid-column: 2; }
  .pd-param th { width: 40%; }
}
@media (max-width: 760px) {
  .pd-banner { min-height: 11rem; padding-block: var(--sp-3); }
  .pd-layout { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery { grid-column: 1; grid-row: 1; }
  .pd-buy { grid-column: 1; grid-row: 2; }
  .pd-side { grid-column: 1; grid-row: 3; }
  /* A six-item shelf tree pushes the specifications two screens down on a
     phone, so the tree collapses to the shelf this grade is actually on. */
  .pd-side-cats > li:not(.is-current) { display: none; }
  .pd-side-all { display: block; }
  .pd-param th { width: 45%; padding: 0.7rem 0.75rem; }
  .pd-param td { padding: 0.7rem 0.75rem; }
  .pd-docs { grid-template-columns: minmax(0, 1fr); }
}

/* Native enquiry form: functional baseline until the visual pass. */
.inquiry-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form { max-width: 720px; margin-top: 1.5rem; }
.inquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.inquiry-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.inquiry-form input[type="text"], .inquiry-form input[type="email"], .inquiry-form textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid currentColor; border-radius: 2px; background: transparent; font: inherit; }
.inquiry-form p { margin: 0 0 1rem; }
.inquiry-actions { margin-top: 0.5rem; }
.inquiry-notice { padding: 0.9rem 1rem; border-left: 4px solid #2e7d32; background: rgba(46, 125, 50, 0.08); }
@media (max-width: 640px) { .inquiry-grid { grid-template-columns: 1fr; } }

/* Legal link under the footer columns. */
.footer-legal { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .85rem; }
.footer-legal a { color: inherit; opacity: .8; }
.footer-legal a:hover { opacity: 1; }
.inquiry-notice--error { border-left-color: #b3261e; background: rgba(179, 38, 30, 0.08); }