/*
 * WordPress / WooCommerce compatibility layer.
 *
 * main.css is the storefront's globals.css, unchanged. This file only covers
 * what that stylesheet never had to: markup WordPress and WooCommerce emit
 * themselves (notices, the payment-method list, terms, generic form rows,
 * account endpoint tables), the admin bar, and the few helpers the PHP
 * templates use in place of React behaviour (next/image `fill`, [hidden]).
 * Every value here is drawn from the tokens in main.css.
 */

/* ---------- helpers ---------- */

/* React simply did not render closed panels; here they carry [hidden], and
   several of them set their own display (flex/grid), so hidden must win. */
[hidden] { display: none !important; }

/* next/image `fill` — absolutely positioned inside a relative box. Object-fit,
   padding and blend come from each surface's own rule in main.css. */
.brc-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: transparent; display: block;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto;
  display: block; left: 5px; top: 5px; z-index: 100000;
  background: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--wa-shadow-sm);
}

.promo-arrow { margin-left: 6px; }

/* The hamburger is phone-only. main.css hides .nav-toggle, but .hd-icon's
   display:inline-flex comes later in the file and wins, so the toggle showed
   on desktop and opened the phone menu full-width. */
.nav-toggle.hd-icon { display: none; }
@media (max-width: 820px) {
  .nav-toggle.hd-icon { display: inline-flex; }
}
@media (min-width: 821px) {
  .mn-drawer, .mn-veil { display: none !important; }
}

/* The admin bar sits over the sticky header when an editor is signed in. */
.admin-bar .site-head { top: 32px; }
.admin-bar .mn-drawer,
.admin-bar .hs-panel { top: calc(clamp(66px, 2.1vw + 58px, 80px) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-head { top: 46px; }
  .admin-bar .mn-drawer,
  .admin-bar .hs-panel { top: calc(clamp(66px, 2.1vw + 58px, 80px) + 46px); }
}
@media (max-width: 600px) {
  /* WordPress un-fixes the admin bar at this width; so does the header offset. */
  .admin-bar .site-head { top: 0; }
}

/* The closed cart drawer sits just off-canvas; its left shadow still bled a
   grey strip down the right edge on phones, and its buttons stayed in the tab
   order. Hide it once the slide-out finishes; show it before sliding in. */
.drawer {
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.38s;
}
.drawer.open {
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open { transition: none; }
}

/* Touch screens: grow the HIT AREA of small text links and chips to ~44px
   without changing how they look (an invisible ::after pad). */
@media (pointer: coarse) {
  .back, .ruo-legal a, .store-chip, .buy-ruo a, .co-edit, .co-linkbtn, .ac-linkish, .co-resend-btn {
    position: relative;
  }
  .back::after, .ruo-legal a::after, .buy-ruo a::after,
  .co-edit::after, .co-linkbtn::after, .ac-linkish::after, .co-resend-btn::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .store-chip::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
}

/* Buy-card label + cart icon sit on one line like the React button. */
.buy-add { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- notices ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-error {
  list-style: none; margin: 0 0 16px; padding: 13px 16px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--wa-hair); background: #fff; color: var(--wa-bark);
}
.woocommerce-error { border-color: #e7b7ab; background: #fbf1ee; color: #7c2d12; }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message { border-color: var(--brc-pos-line); background: var(--brc-pos-bed); color: var(--brc-pos-ink); }
.woocommerce-info { background: #faf8f5; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-message .button,
.woocommerce-info .button { float: right; margin-left: 12px; }

/* Checkout errors land above the form, inside the checkout column. */
.brc-checkout .woocommerce > .woocommerce-notices-wrapper,
.brc-checkout .woocommerce > .woocommerce-NoticeGroup,
.brc-checkout .woocommerce-NoticeGroup-checkout {
  max-width: 1180px; margin: 20px auto 0; padding: 0 24px;
}
.brc-checkout .co-empty .woocommerce-notices-wrapper { margin-bottom: 14px; }
@media (max-width: 640px) {
  .brc-checkout .woocommerce > .woocommerce-notices-wrapper,
  .brc-checkout .woocommerce-NoticeGroup-checkout { padding: 0 16px; }
}
.ac-shell > .woocommerce-notices-wrapper { margin-bottom: 14px; }

/* ---------- buttons Woo prints ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce-Button {
  background: var(--wa-bark-deep); color: #fff; border: none; border-radius: 9999px;
  font-family: var(--wa-sans); font-weight: 500; font-size: 13px; line-height: 1;
  height: 40px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; transition: opacity 0.18s;
}
.woocommerce .button:hover { opacity: 0.86; }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: 0.5; cursor: default; }

/* ---------- generic Woo form rows (plugin fields, account endpoints) ---------- */
.woocommerce form .form-row { display: block; margin: 0 0 12px; padding: 0; }
.woocommerce form .form-row label {
  display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--wa-bark);
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 13.5px;
}
.woocommerce form .form-row .required { color: #a8422e; text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { color: var(--wa-ink40); font-weight: 400; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-form-row input.input-text {
  width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; font-family: inherit;
  color: var(--wa-bark); background: #f6f5f2; border: 1px solid var(--wa-hair);
  border-radius: 12px; transition: border-color 0.15s, background 0.15s; box-sizing: border-box;
}
.woocommerce form .form-row textarea { padding: 14px 16px; min-height: 110px; line-height: 1.5; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; background: #fff; border-color: var(--wa-bark); }
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] { accent-color: #131315; width: 16px; height: 16px; flex: none; margin-top: 2px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: #a8422e; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { display: inline-block; width: calc(50% - 6px); vertical-align: top; }
.woocommerce form .form-row-first { margin-right: 12px; }
@media (max-width: 640px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; margin-right: 0; }
}
.woocommerce form .clear { clear: both; }
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .show-password-input {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--wa-ink60); cursor: pointer; font-size: 12px;
}
.woocommerce .show-password-input::after { content: "Show"; }
.woocommerce .show-password-input.display-password::after { content: "Hide"; }
.woocommerce-password-strength { font-size: 12px; margin-top: 6px; color: var(--wa-ink60); }
.woocommerce-password-hint { display: block; font-size: 12px; color: var(--wa-ink40); margin-top: 4px; }
fieldset { border: 1px solid var(--wa-hair); border-radius: 14px; padding: 16px 18px 6px; margin: 18px 0; }
fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 600; }

/* ---------- checkout ---------- */
/* The whole grid is the <form>; the Woo wrapper div must not constrain it. */
.brc-checkout .woocommerce { display: block; }
.co-steps .co-field select,
.co-steps .co-selwrap select { width: 100%; }
/* Woo swaps the state <select> for its own on country change; keep it on-brand. */
.co-selwrap select.state_select,
.co-selwrap input.input-text { width: 100%; }
.co-field input.input-text,
.co-selwrap input.input-text {
  width: 100%; height: 52px; padding: 0 16px; font-size: 16px; font-family: inherit;
  color: var(--wa-bark); background: #f6f5f2; border: 1px solid var(--wa-hair); border-radius: 12px;
}
.co-row2 > .co-field, .co-row3 > .co-field { margin-bottom: 12px; }
.co-row2 .co-field, .co-row3 .co-field { min-width: 0; }
.co-step .co-hint { margin-top: 10px; }
.brc-account-fields { margin-top: 6px; }
.brc-account-fields .create-account { margin-top: 12px; }
.brc-rates-lbl { margin: 18px 0 10px; }
.brc-co-rates .co-err { margin: 12px 0 0; }
.co-billsame + .co-billing { margin-top: 12px; }
.co-billing .co-field { margin-bottom: 0; }
.co-billing .co-row3 > .co-field { margin-bottom: 0; }

/* Payment methods — Woo's list, in the delivery cards' geometry. */
#payment { background: none; }
#payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; }
#payment ul.payment_methods > li {
  position: relative; margin: 0 0 10px; padding: 14px 16px;
  border: 1px solid var(--wa-hair); border-radius: 14px; background: #fff;
  transition: border-color 0.15s;
}
#payment ul.payment_methods > li:has(> input:checked) { border-color: #131315; }
#payment ul.payment_methods > li > input.input-radio {
  accent-color: #131315; width: 18px; height: 18px; vertical-align: middle; margin: 0 10px 0 0;
}
#payment ul.payment_methods > li > label {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; cursor: pointer; vertical-align: middle;
}
#payment ul.payment_methods > li > label img { max-height: 24px; width: auto; }
#payment .payment_box {
  margin: 12px 0 0; padding: 14px 16px; border-radius: 12px;
  background: #faf8f5; font-size: 13.5px; line-height: 1.6; color: var(--wa-bark-soft);
}
#payment .payment_box p:last-child { margin-bottom: 0; }
#payment .payment_box fieldset { margin: 10px 0 0; background: #fff; }
#payment .payment_box .form-row input.input-text { background: #fff; }
#payment ul.payment_methods li .woocommerce-info,
#payment ul.payment_methods li .woocommerce-error { margin: 0; }
#payment .place-order { margin: 6px 0 0; padding: 0; }
#payment #place_order { max-width: 320px; margin-top: 16px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 12.5px; line-height: 1.5; color: var(--wa-ink60); }
.woocommerce-terms-and-conditions-wrapper .form-row { margin: 10px 0 0; }
.woocommerce-terms-and-conditions-wrapper label.checkbox { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--wa-bark); }
.woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-terms-and-conditions {
  max-height: 200px; overflow: auto; margin: 10px 0; padding: 12px 14px;
  border: 1px solid var(--wa-hair); border-radius: 12px; background: #fff; font-size: 12.5px;
}
.co-paybody .blockUI.blockOverlay,
.co-sum .blockUI.blockOverlay { border-radius: 14px; }

/* Promo-code row in the summary. */
.brc-promo { padding-bottom: 14px; }
.brc-promo .co-points-note { display: flex; flex-direction: column; gap: 4px; }
.brc-coupon a { color: var(--wa-ink60); text-decoration: underline; text-underline-offset: 2px; }
.brc-coupon b { font-family: var(--wa-mono); font-weight: 500; letter-spacing: 0.04em; }
.brc-promo .co-points-err[data-ok="1"] { color: var(--brc-pos); }

/* Gateway thank-you instructions under the receipt. */
.brc-oc-extra { font-size: 13.5px; line-height: 1.6; color: var(--wa-bark-soft); }
.brc-oc-extra h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--wa-ink); }
.brc-oc-extra ul { padding-left: 18px; }

/* Pay-for-order: Woo's own form in the checkout card. */
.brc-order-pay-wrap { max-width: 760px; }
.brc-order-pay-wrap .co-steps { padding: 28px; }
.brc-order-pay-wrap table.shop_table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.brc-order-pay-wrap table.shop_table th,
.brc-order-pay-wrap table.shop_table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--wa-hair); }

/* ---------- sign in ---------- */
.brc-signin .co-gate .woocommerce > .woocommerce-notices-wrapper,
.co-gate .woocommerce-error,
.co-gate .woocommerce-message,
.co-gate .woocommerce-info { text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.brc-remember { margin: 2px 0 16px; }
.co-gate .co-resend a { text-decoration: underline; text-underline-offset: 2px; }
.co-gate .co-guest .co-linkbtn { display: inline-block; }
/* Lost / reset password forms Woo renders into the same card. */
.co-gate .woocommerce-ResetPassword,
.co-gate form.lost_reset_password { max-width: 380px; margin: 0 auto; text-align: left; }
.co-gate .woocommerce-ResetPassword > p:first-child,
.co-gate form.lost_reset_password > p:first-child {
  font-family: var(--wa-serif); font-style: italic; font-size: 16.5px; line-height: 1.5;
  color: var(--wa-ink60); text-align: center; margin: 0 0 20px;
}
.co-gate .woocommerce-ResetPassword .button,
.co-gate form.lost_reset_password .button { width: 100%; height: 54px; font-size: 15px; font-weight: 600; margin-top: 6px; }

/* ---------- account ---------- */
a.ac-tab { display: inline-block; text-decoration: none; }
a.ac-signout { display: inline-block; }
.ac-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: #f3f4f6; color: var(--wa-bark-soft); white-space: nowrap;
}
.ac-pill--processing, .ac-pill--on-hold { background: #f4efe7; color: #7a5a3a; }
.ac-pill--shipped, .ac-pill--delivered, .ac-pill--completed { background: var(--brc-pos-bed); color: var(--brc-pos-ink); }
.ac-pill--cancelled, .ac-pill--failed, .ac-pill--refunded { background: #fbf1ee; color: #7c2d12; }
.ac-pill--pending { background: #f3f4f6; color: var(--wa-ink60); }
.ac-order-foot .ac-receipt + .ac-receipt { margin-left: 14px; }

/* Woo's own endpoint content (payment methods, edit account, downloads…). */
.brc-wc-endpoint { background: #fff; border: 1px solid var(--wa-hair); border-radius: 18px; padding: 22px; font-size: 14px; }
.brc-wc-endpoint table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.brc-wc-endpoint th, .brc-wc-endpoint td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--wa-hair); }
.brc-wc-endpoint th {
  font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wa-bronze-text); font-weight: 400;
}
.brc-wc-endpoint form { max-width: 560px; }
.brc-wc-endpoint p { margin: 0 0 12px; }

/* ---------- assurance ribbon (above the header) ----------
   The promo rail's vocabulary: warm bark ground, bronze mono small caps
   (the .tick / .wa-chip label voice), terracotta dots. Scrolls away; the
   sticky header stays. */
.brc-ribbon {
  background: linear-gradient(180deg, #2a1d18, #3d2b24);
  color: #c2a179;
}
.brc-ribbon-in {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 14px; min-height: 34px; padding-top: 8px; padding-bottom: 8px;
  font-family: var(--wa-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap; overflow: hidden;
}
.brc-ribbon-item { flex: none; }
.brc-ribbon-dot {
  flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: var(--wa-terracotta);
}
@media (max-width: 900px) {
  /* Two messages on tablets and phones — never a wrapped paragraph. */
  .brc-ribbon-in > :nth-child(n + 4) { display: none; }
}
@media (max-width: 420px) {
  .brc-ribbon-in { gap: 10px; font-size: 8.5px; letter-spacing: 0.1em; }
}

/* ---------- hero vials: never overlapping ----------
   Each vial is a product photo on an opaque square (the cream bed that the
   multiply blend needs), so when two drifted into each other one square cut
   a hard edge through the other vial. These positions give every vial its
   own lane at every width — measured with rotation and the float bob. */
@media (min-width: 721px) {
  .ha-big { left: 2%;  top: 6%;  width: min(36vw, 470px); }
  .ha-tb  { left: 47%; top: 2%;  width: clamp(110px, 13vw, 180px); }
  .ha-bpc { left: 62%; top: 30%; width: clamp(100px, 14vw, 185px); }
  .ha-nad { right: 4%; top: 7%;  width: clamp(120px, 16vw, 215px); left: auto; }
}
@media (max-width: 720px) {
  /* Four lanes across the top band, alternately high and low so neighbours
     are offset vertically as well as horizontally. */
  .ha-big { left: 4%;  top: 2px; width: calc(var(--ha-band) * 0.52); }
  .ha-tb  { left: 30%; top: calc(var(--ha-band) * 0.30); width: calc(var(--ha-band) * 0.46); }
  .ha-bpc { left: 53%; top: 4px; width: calc(var(--ha-band) * 0.46); }
  .ha-nad { right: 3%; top: calc(var(--ha-band) * 0.28); width: calc(var(--ha-band) * 0.46); left: auto; }
}
@media (max-width: 390px) {
  .ha-big { left: 3%;  width: calc(var(--ha-band) * 0.46); }
  .ha-tb  { left: 31%; width: calc(var(--ha-band) * 0.40); }
  .ha-bpc { left: 54%; width: calc(var(--ha-band) * 0.42); }
  .ha-nad { right: 3%; width: calc(var(--ha-band) * 0.40); }
}

/* =====================================================================
   Site review 2026-09-29
   ===================================================================== */

/* 14 — the sticky header is solid: page text no longer shows through it. */
.site-head { background: #fdfbf8; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 18 — page titles use the display face, like the cards beneath them. */
.page-head h1 { font-family: var(--wa-display); font-weight: 500; letter-spacing: -0.015em; }
/* About / Contact carry their own heading: give it room under the header. */
.page-own-h1 { padding-top: 46px; }
.page-own-h1 .about-story h1 { margin-top: 0; }

/* 18 — five Quality cards sit in one row on desktop, not 4 + 1. */
@media (min-width: 1080px) { .quality-cards { grid-template-columns: repeat(5, 1fr); } }

/* 20 — "Frequently Researched Together": full rows only (8 = 4 x 2). */
.rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4/5 — per-size certificate box. */
.coa-none { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wa-ink60); max-width: 60ch; }
.coa-none a { color: var(--wa-terracotta); text-decoration: underline; text-underline-offset: 2px; }

/* 16 — the COA library. */
.coa-lib-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 18px 0 4px; }
.coa-lib-search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 460px;
  background: #fff; border: 1px solid var(--wa-hair); border-radius: 9999px; padding: 0 16px; color: var(--wa-ink40);
}
.coa-lib-search input { flex: 1; min-width: 0; border: 0; background: none; height: 44px; font: inherit; font-size: 16px; color: var(--wa-bark); }
.coa-lib-search input:focus { outline: none; }
.coa-lib-search:focus-within { border-color: var(--wa-bark); }
.coa-lib-count { margin: 0; font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wa-ink60); }
.coa-lib-wrap { margin-bottom: 50px; }
.coa-lib { margin-top: 12px; }
.coa-lib-name { font-weight: 600; }
.coa-lib-mono { font-family: var(--wa-mono); font-size: 13px; }
.coa-lib td.coa-purity { color: var(--wa-sage-text); font-weight: 600; }
.coa-lib-dim { color: var(--wa-ink40); font-size: 13px; }
.coa-lib-dim a { color: var(--wa-terracotta); text-decoration: underline; text-underline-offset: 2px; }
.coa-lib tr.is-pending td { background: #fcfbf9; }
.coa-lib-none { color: var(--wa-ink60); margin: 16px 0; }
@media (max-width: 760px) {
  .coa-lib thead { display: none; }
  .coa-lib, .coa-lib tbody, .coa-lib tr, .coa-lib td { display: block; width: 100%; }
  .coa-lib tr { border: 1px solid var(--wa-hair); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; background: #fff; }
  .coa-lib tr.is-pending td { background: none; }
  .coa-lib td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .coa-lib td[data-label]::before { content: attr(data-label); font-family: var(--wa-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wa-bronze-text); }
  .coa-lib tr[hidden] { display: none !important; }
}

/* 17 — Contact. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding-bottom: 50px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }
.contact-h { font-family: var(--wa-display); font-weight: 500; font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.015em; margin: 0 0 8px; }
.contact-lede { font-family: var(--wa-serif); font-style: italic; font-size: 18px; color: var(--wa-ink60); margin: 0 0 28px; }
.contact-list { margin: 0; display: grid; gap: 18px; }
.contact-list div { border-top: 1px solid var(--wa-hair); padding-top: 14px; }
.contact-list dt { font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wa-bronze-text); margin-bottom: 6px; }
.contact-list dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wa-bark); }
.contact-list a { color: var(--wa-terracotta); }
.contact-social { display: flex; gap: 18px; flex-wrap: wrap; }
.contact-card { padding: 30px; }
.contact-card h2 { font-family: var(--wa-display); font-weight: 500; font-size: 24px; margin: 0 0 18px; }
.contact-card textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--wa-bark);
  background: #f6f5f2; border: 1px solid var(--wa-hair); border-radius: 12px; resize: vertical;
}
.contact-card textarea:focus { outline: none; background: #fff; border-color: var(--wa-bark); }
.contact-send { margin-top: 6px; }
.contact-card .co-consent { margin: 12px 0 0; }
.contact-ok { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--brc-pos-bed); border: 1px solid var(--brc-pos-line); color: var(--brc-pos-ink); }
.contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 20 — footer contact column. */
@media (min-width: 721px) { .foot-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; } }
.foot-contact address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--wa-bark-soft); padding: 4px 0; }
.foot-social { display: flex; gap: 16px; }
.foot-social a { display: inline-block; }

/* 12 — required markers and inline field errors. */
.co-req { color: #a8422e; text-decoration: none; border: 0; font-weight: 600; }
.co-field-err { display: block; margin-top: 6px; font-size: 12px; color: #a8422e; }
.co-agree { flex-wrap: wrap; }
.co-agree .co-field-err { flex-basis: 100%; margin: 4px 0 0 25px; }
.co-agree:has(input[aria-invalid="true"]) { border-color: #a8422e; }
.co-selwrap select[aria-invalid="true"] { border-color: #a8422e; }
/* 12 — if a plugin re-applies selectWoo before the script undoes it, keep
   the native select visible and hide the unstyled "Texas" widget. */
.co-selwrap .select2-container { display: none !important; }
.co-selwrap select.select2-hidden-accessible {
  position: static !important; width: 100% !important; height: 52px !important; margin: 0 !important;
  clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important;
  padding: 0 42px 0 16px !important; border: 1px solid var(--wa-hair) !important;
}
.co-progress { flex-wrap: wrap; row-gap: 8px; }

/* 13 — promo code in the drawer. */
.dw-promo { display: flex; gap: 8px; margin: 0 0 10px; }
.dw-promo input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--wa-hair-dk); border-radius: 10px; background: #fff; color: var(--wa-bark);
}
.dw-promo input:focus { outline: none; border-color: var(--wa-bark); }
.dw-promo button {
  height: 38px; padding: 0 14px; border: 1px solid var(--wa-bark); border-radius: 9999px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wa-bark); cursor: pointer;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}
.dw-promo button:hover { background: var(--wa-bark); color: #fff; }
.dw-promo-msg { margin: -4px 0 10px; font-size: 12px; color: #a8422e; }
.dw-promo-msg.is-ok { color: var(--brc-pos); }
.dw-coupon { margin: -4px 0 10px; font-size: 12px; color: var(--wa-ink60); }
.dw-coupon b { font-family: var(--wa-mono); font-weight: 500; }
.dw-coupon button { background: none; border: 0; padding: 0; font: inherit; color: var(--wa-ink60); text-decoration: underline; cursor: pointer; }

.contact-page { padding-top: 46px; }

/* =====================================================================
   Order receipt (order-received + view order) — client design 2026-09-30
   ===================================================================== */
.rc-page { background: #f6f2ed; padding: 40px 0 64px; }
.rc { max-width: 1032px; margin: 0 auto; }

.rc-head { text-align: center; }
.rc-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #3f6b4a; color: #fff; margin-bottom: 14px;
}
.rc-tick--fail { background: #a8422e; font: 700 24px/1 var(--wa-sans); }
.rc-h1 {
  font-family: var(--wa-serif); font-weight: 600; color: #231d1a;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 auto 10px; max-width: 24ch;
}
.rc-sub { margin: 0 auto; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: #5d5650; }
.rc-sub b { color: #3a332f; font-weight: 600; }
.rc-sub a { color: var(--wa-terracotta); text-decoration: underline; }
.rc-retry { margin: 20px 0 0; }

/* The order / placed / paid by / total pill. */
.rc-pill {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  margin: 22px auto 0; padding: 12px 22px;
  background: #fdfbf8; border: 1px solid #e6dfd6; border-radius: 9999px;
  font-size: 14px; color: #5d5650;
}
.rc-pill div { display: flex; gap: 6px; align-items: baseline; }
.rc-pill dt { font-weight: 400; }
.rc-pill dd { margin: 0; font-weight: 700; color: #231d1a; }

/* Progress tracker. */
.rc-track {
  list-style: none; padding: 0; margin: 34px auto 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rc-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.rc-track li + li::before {
  content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px;
  background: #e6ddd2; z-index: 0;
}
.rc-track li.is-done + li.is-done::before { background: #3f6b4a; }
.rc-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fdfbf8; border: 1.5px solid #d9cfc3; color: #8a8178; font-size: 12.5px; font-weight: 600;
}
.rc-track li.is-done .rc-dot { background: #3f6b4a; border-color: #3f6b4a; color: #fff; }
.rc-step { font-size: 13.5px; color: #8a8178; text-align: center; line-height: 1.35; }
.rc-track li.is-done .rc-step { color: #3a332f; }

/* Cards. */
.rc-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 36px; text-align: left;
}
.rc-side { display: flex; flex-direction: column; gap: 18px; }
.rc-card { background: #fdfbf8; border: 1px solid #e6dfd6; border-radius: 16px; padding: 26px 24px; }
.rc-h2 { font-family: var(--wa-serif); font-weight: 600; font-size: 24px; color: #231d1a; margin: 0 0 16px; }

.rc-lines { list-style: none; margin: 0; padding: 0; }
.rc-line {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #ebe4db;
}
.rc-img { position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; background: #fff; }
.rc-img img { object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.rc-line-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-line-tx b { font-size: 15px; font-weight: 700; color: #231d1a; }
.rc-line-tx small { font-size: 12.5px; color: #7a716a; }
.rc-coa {
  width: fit-content; font-size: 12px; color: #8a3d2d;
  text-decoration: none; border-bottom: 1px dotted #8a3d2d; padding-bottom: 1px;
  transition: color 0.3s ease-out, border-color 0.3s ease-out;
}
.rc-coa:hover { color: #231d1a; border-bottom-color: #231d1a; }
.rc-line-pr { font-size: 15px; font-weight: 700; color: #231d1a; font-variant-numeric: tabular-nums; }

.rc-totals { padding-top: 14px; }
.rc-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14.5px; color: #5d5650; }
.rc-totals > div span:last-child { font-variant-numeric: tabular-nums; }
.rc-totals .rc-total {
  margin-top: 8px; padding-top: 14px; border-top: 1px solid #ebe4db;
  font-size: 16.5px; font-weight: 700; color: #231d1a;
}
.rc-totals .rc-pos { color: #3f6b4a; }
.rc-points small { font-size: 12px; opacity: 0.8; }

.rc-k {
  margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6f6760;
}
.rc-card .rc-k:first-of-type { margin-top: 0; }
.rc-v { margin: 0; font-size: 14.5px; line-height: 1.6; color: #231d1a; }
.rc-v a { color: #8a3d2d; text-decoration: underline; }
.rc-note { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #6f6760; }

.rc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 12px 20px; border-radius: 9999px;
  font-family: var(--wa-sans); font-size: 15px; font-weight: 700; text-decoration: none;
  transition: opacity 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;
}
.rc-btn + .rc-btn { margin-top: 10px; }
.rc-btn--dark { background: #2b2522; color: #fff; border: 1px solid #2b2522; }
.rc-btn--dark:hover { opacity: 0.88; }
.rc-btn--line { background: transparent; color: #231d1a; border: 1px solid #2b2522; }
.rc-btn--line:hover { background: #2b2522; color: #fff; }
.rc-retry .rc-btn { display: inline-flex; width: auto; padding: 12px 28px; }

.rc-foot { text-align: center; margin-top: 40px; }
.rc-ruo { margin: 0 0 10px; font-size: 12.5px; color: #7a716a; }
.rc-help { margin: 0; font-size: 14px; color: #3a332f; }
.rc-help a { color: #8a3d2d; text-decoration: underline; text-underline-offset: 2px; }

.rc-sitefoot { background: #fff; border-top: 1px solid #ebe4db; padding: 24px 16px; text-align: center; }
.rc-sitefoot p { margin: 0; font-size: 13px; color: #6f6760; }
.rc-sitefoot a { color: #5d5650; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-page { padding-top: 28px; }
}
@media (max-width: 560px) {
  .rc-pill { border-radius: 16px; gap: 6px 16px; }
  .rc-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-step { font-size: 11.5px; }
  .rc-card { padding: 22px 18px; }
  .rc-line { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .rc-img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-btn, .rc-coa { transition: none; }
}

/* Signed-out visitor opening an account order: centred sign-in card. */
.rc-page .woocommerce > .woocommerce-notice { text-align: center; font-family: var(--wa-serif); font-size: clamp(26px, 3.6vw, 36px); font-weight: 600; color: #231d1a; margin: 10px auto 18px; }
.rc-page .woocommerce > .woocommerce-notices-wrapper, .rc-page .woocommerce > .woocommerce-info { max-width: 460px; margin: 0 auto 14px; }
.rc-login { max-width: 460px; margin: 0 auto; background: #fdfbf8; border: 1px solid #e6dfd6; border-radius: 16px; padding: 26px 24px; }
.rc-login .rc-note p { margin: 0; }
.rc-login .rc-btn { margin-top: 4px; }
.rc-login-lost { margin: 14px 0 0; text-align: center; }
.rc-login-lost a { color: #8a3d2d; text-decoration: underline; }

/* Kashu inline card fields (tagada_inline): same look as the checkout's .co-field inputs.
   The plugin prints plain <input>s (no iframes) with inline width/padding/box-sizing,
   so padding needs !important to win over the inline style. Display only. (2026-10-06) */
#payment .payment_box.payment_method_tagada_inline #tgdgw-inline-fields .form-row { margin: 0 0 12px; padding: 0; }
#payment .payment_box.payment_method_tagada_inline #tgdgw-inline-fields .form-row label {
  display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--wa-bark);
}
#payment .payment_box.payment_method_tagada_inline #tgdgw-inline-fields > div[style*="flex"] { gap: 12px !important; }
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_number,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_expiry,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_cvc {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px !important; box-sizing: border-box;
  font-family: inherit; font-size: 16px; line-height: normal; color: var(--wa-bark);
  background: #f6f5f2; border: 1px solid var(--wa-hair); border-radius: 12px; box-shadow: none;
  -webkit-appearance: none; appearance: none; transition: border-color 0.15s, background 0.15s;
}
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_number::placeholder,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_expiry::placeholder,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_cvc::placeholder { color: var(--wa-ink40); opacity: 1; }
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_number:focus,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_expiry:focus,
#payment .payment_box.payment_method_tagada_inline #tgdgw_card_cvc:focus { outline: none; background: #fff; border-color: var(--wa-bark); }

/* ---------- Checkout payment step polish (2026-10-06) ---------- */
/* Card brand badges, same for both card options (markup: functions.php). */
.brc-card-badges { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; vertical-align: middle; }
.brc-cb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 38px; height: 24px; padding: 3px 4px; background: #fff; border: 1px solid var(--wa-hair);
  border-radius: 5px; box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
}
.brc-cb svg { display: block; width: 100%; height: 100%; }
.brc-cb--amex { padding: 2px; }
.brc-cb--discover { padding: 3px 2px; }
/* One 14px rhythm: SSL line → option cards → policy line → button. */
.co-paybody .co-ssl { margin: 0 0 14px; }
#payment ul.payment_methods { margin: 0 0 14px; }
#payment ul.payment_methods > li { margin: 0 0 14px; }
#payment ul.payment_methods > li:last-child { margin-bottom: 0; }
/* Radio stays beside its title (and badges) at every width; the panel spans the card.
   Grid, not flex: with a single gateway Woo hides the radio, and the title must
   still get the full row. */
#payment ul.payment_methods > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
#payment ul.payment_methods > li > input.input-radio { grid-column: 1; }
#payment ul.payment_methods > li > label { grid-column: 2; min-width: 0; }
#payment ul.payment_methods > li > .payment_box { grid-column: 1 / -1; box-sizing: border-box; }
#payment .place-order { margin: 0; padding: 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin: 0; }
#payment #place_order { margin-top: 0; }
.brc-pay-policy { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--wa-ink60); }
.brc-pay-policy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.brc-pay-policy a:hover { color: var(--wa-bark); }
.brc-pay-trust {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--wa-ink60);
}
.brc-pay-trust svg { flex: none; }

/* Confirm step: the long research-use box keeps its checkbox beside the text,
   like the 21+ box (flex-wrap stays on for the inline error note). */
.co-agree > span { flex: 1 1 0%; min-width: 0; }

/* Checkout BAC Water add-on: size picker (markup: inc/checkout.php). */
.fsu-deal-sel {
  display: block; width: 100%; max-width: 180px; height: 34px; margin: 6px 0 0; padding: 0 30px 0 10px;
  font-family: inherit; font-size: 13px; color: var(--wa-bark); background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23131315' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  border: 1px solid var(--wa-hair); border-radius: 10px; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color 0.15s;
}
.fsu-deal-sel:focus { outline: none; border-color: var(--wa-bark); }
@media (max-width: 640px) {
  .fsu-deal-sel { font-size: 16px; height: 38px; } /* iOS zooms on focus below 16px */
}

/* ---------- research-use banner (top of every page, gate included) ----------
   Kashu storefront review, 2026-10-08. The site's CTA ink (--wa-bark-deep,
   #131315) with white sentence-case DM Sans: 18.9:1, legible at 11.5px. Not
   sticky; the header below keeps its own sticky behaviour. */
.brc-ruo-banner {
  background: var(--wa-bark-deep); color: #fff;
  font-family: var(--wa-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.45; text-align: center;
  padding: 7px 16px;
}
@media (max-width: 420px) { .brc-ruo-banner { font-size: 11px; padding: 6px 12px; } }

/* ---------- researcher sign-up gate (2026-10-08) ----------
   The existing gate card, ticks, select and pill button; the email/password
   fields are the storefront's sign-in fields (.co-field). */
.gate .gate-form { max-width: none; margin: 0; }
.gate .gate-role { margin: 0; }
.gate .gate-check a { color: var(--wa-bark); text-decoration: underline; text-underline-offset: 2px; }
.gate-submit { width: 100%; margin-top: 8px; }
.gate-submit[disabled] { opacity: 0.55; cursor: progress; }
.gate-switch { margin: 16px 0 0; font-size: 13px; color: var(--wa-ink60); }
.gate-switch + .gate-switch { margin-top: 6px; }
.gate-switch a { color: var(--wa-bark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gate-notices { text-align: left; margin: 0 0 14px; }

/* ---------- checkout fixes (Studio, 2026-10-08) ----------
   (a) Room under each numbered section heading so the first field no longer
       touches it ("Confirm" / "I am purchasing as", "Shipping address" /
       "Street address").
   (b) 2026-10-09, Scott: the free-shipping card, its progress bar, the BAC
       Water add-on card and the Secure Checkout pill are back on the green
       tokens (the ink-on-cream override was removed). */
.co-step > .co-stephead { margin-bottom: 12px; }

/* ---------- email-code sign-in (2026-10-13) ---------- */
.brc-ec-or { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; color: var(--wa-ink60); }
.brc-ec-or::before, .brc-ec-or::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.brc-ec-err { color: #a33; }
.brc-ec-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--wa-bark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Certificate of analysis panel (single-product.php section 3, 2026-10-19).
 * Laboratory card + panel of results + batch history, per size.
 * ------------------------------------------------------------------------ */
.coa2-wrap { margin-top: 56px; margin-bottom: 8px; }
.coa2-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.coa2-eyebrow { margin: 0 0 8px; font-family: var(--wa-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wa-sage-text); }
.coa2-head h2 { margin: 0 0 10px; font-family: var(--wa-display); font-size: 34px; font-weight: 500; letter-spacing: -0.015em; color: var(--wa-bark); }
.coa2-head p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wa-ink60); }
.coa2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.coa2-card { background: var(--wa-bark); color: #f6f2ec; border-radius: 18px; padding: 26px 26px 22px; }
.coa2-lab { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.coa2-lab-mark { width: 38px; height: 38px; border-radius: 10px; background: #f6f2ec; color: var(--wa-bark); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.coa2-lab b { display: block; font-size: 17px; font-weight: 600; }
.coa2-lab small { display: block; font-size: 12px; color: rgba(246, 242, 236, 0.6); }
.coa2-cap { margin: 0; font-family: var(--wa-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 242, 236, 0.62); }
.coa2-big { margin: 6px 0 4px; font-family: var(--wa-display); font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; }
.coa2-big span { font-size: 0.45em; color: var(--wa-glow); margin-left: 2px; }
.coa2-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(246, 242, 236, 0.16); }
.coa2-facts dt { font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 242, 236, 0.55); }
.coa2-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.coa2-hi { color: var(--wa-glow); }
.coa2-pdf { display: flex; align-items: center; justify-content: center; margin-top: 22px; height: 44px; border-radius: 999px; background: #f6f2ec; color: var(--wa-bark); font-weight: 600; font-size: 14px; text-decoration: none; }
.coa2-pdf:hover { background: #fff; }
.coa2-qc { background: #fff; border: 1px solid var(--wa-hair); border-radius: 18px; overflow: hidden; }
.coa2-qc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--wa-hair); font-family: var(--wa-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-ink60); }
.coa2-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 15px 22px; border-bottom: 1px solid var(--wa-hair); }
.coa2-row:last-child { border-bottom: 0; }
.coa2-row b { display: block; font-size: 15px; font-weight: 600; color: var(--wa-bark); }
.coa2-row small { display: block; font-size: 12px; color: var(--wa-ink60); }
.coa2-val { font-size: 14.5px; font-weight: 600; color: var(--wa-bark); text-align: right; }
.coa2-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #f1f1f2; color: var(--wa-ink60); font-family: var(--wa-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.coa2-chip.is-pass { background: #e8ede3; color: var(--wa-sage-text); }
.coa2-hist { margin-top: 28px; }
.coa2-hist h3 { margin: 0 0 4px; font-family: var(--wa-display); font-size: 21px; font-weight: 500; color: var(--wa-bark); }
.coa2-hist > p { margin: 0 0 12px; font-size: 13.5px; color: var(--wa-ink60); }
.coa2-hist-list { border: 1px solid var(--wa-hair); border-radius: 14px; background: #fff; }
.coa2-hist-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--wa-hair); font-size: 14px; }
.coa2-hist-row:last-child { border-bottom: 0; }
.coa2-hist-row a { color: var(--wa-terracotta); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.coa2-mono { font-family: var(--wa-mono); font-size: 13px; }
.coa2-mono em { font-style: normal; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #e8ede3; color: var(--wa-sage-text); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .coa2-grid { grid-template-columns: 1fr; }
  .coa2-head h2 { font-size: 27px; }
  .coa2-big { font-size: 54px; }
  .coa2-hist-row { grid-template-columns: 1fr auto; }
  .coa2-hist-row > span:nth-child(3), .coa2-hist-row > span:nth-child(4) { display: none; }
}