/* Extract Lab components — populated in Task 4 (Layer 1) */

/* ===== Button ===== */

/* Base — resets both <a> and <button> to identical baseline */
.extract-lab-btn {
  /* reset native elements */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--el-s2);
  padding: var(--el-s3) var(--el-s5);
  min-height: var(--el-tap-min); /* AC1: ≥44px tap target on ALL sizes */
  font-family: var(--el-font-heading);
  font-weight: 600;
  font-size: var(--el-text-sm);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--el-radius); /* AC2: exactly 2px */
  text-decoration: none;            /* reset <a> underline */
  background: none;                 /* reset <button> background */
  cursor: pointer;
  transition: background-color var(--el-transition),
              border-color var(--el-transition),
              color var(--el-transition); /* AC3: only --el-transition */
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

/* Primary */
.extract-lab-btn--primary {
  background-color: var(--el-accent);
  border-color: var(--el-accent);
  color: var(--el-white);
}
.extract-lab-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--el-accent-hover);
  border-color: var(--el-accent-hover);
  color: var(--el-white);
}

/* Secondary */
.extract-lab-btn--secondary {
  background-color: transparent;
  border-color: var(--el-accent);
  color: var(--el-accent);
}
.extract-lab-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--el-accent); /* AC5: fills accent on hover */
  border-color: var(--el-accent);
  color: var(--el-white);             /* AC5: white text on hover */
}

/* Size: sm */
.extract-lab-btn--sm {
  padding: var(--el-s2) var(--el-s4);
  font-size: var(--el-text-xs);
  min-height: var(--el-tap-min); /* AC1: still ≥44px */
}

/* Size: md (explicit alias — same as base) */
.extract-lab-btn--md {
  padding: var(--el-s3) var(--el-s5);
  font-size: var(--el-text-sm);
  min-height: var(--el-tap-min);
}

/* Size: lg */
.extract-lab-btn--lg {
  padding: var(--el-s4) var(--el-s6);
  font-size: var(--el-text-md);
  min-height: var(--el-tap-min); /* AC1: base min-height already ensures ≥44px */
}

/* Focus */
.extract-lab-btn:focus-visible {
  outline: none;
  box-shadow: var(--el-focus); /* AC4: 3px accent ring */
}

/* Disabled — both native and aria */
.extract-lab-btn:disabled,
.extract-lab-btn[aria-disabled="true"] {
  border-color: var(--el-muted);
  background-color: var(--el-muted);
  color: var(--el-white);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* belt-and-suspenders for <a> elements */
}
/* Secondary disabled keeps outline treatment */
.extract-lab-btn--secondary:disabled,
.extract-lab-btn--secondary[aria-disabled="true"] {
  background-color: transparent;
  color: var(--el-muted);
  border-color: var(--el-muted);
}

/* ===== /Button ===== */

/* ===== Form fields ===== */

/* Wrapper */
.extract-lab-field {
  margin-bottom: var(--el-s5);
}

/* Label */
.extract-lab-field__label {
  display: block;
  font-family: var(--el-font-body);
  font-weight: 600;
  font-size: var(--el-text-sm);
  color: var(--el-text);
  margin-bottom: var(--el-s2);
}

/* Hint */
.extract-lab-field__hint {
  display: block;
  color: var(--el-muted);
  font-size: var(--el-text-xs);
  margin-bottom: var(--el-s2);
}

/* Shared input/select/textarea base */
.extract-lab-input,
.extract-lab-select,
.extract-lab-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--el-font-body);
  font-size: var(--el-text-sm); /* 16px — prevents iOS zoom */
  color: var(--el-text);
  background-color: var(--el-white);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: var(--el-s3) var(--el-s4);
  transition: border-color var(--el-transition), box-shadow var(--el-transition);
  appearance: none;
  -webkit-appearance: none;
}

/* Min-height: inputs and selects ≥48px */
.extract-lab-input,
.extract-lab-select {
  min-height: var(--el-field-min);
}

/* Textarea */
.extract-lab-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select: custom caret via SVG data-URI in accent colour */
.extract-lab-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23047857' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--el-s4) center;
  padding-right: calc(var(--el-s4) * 2 + 16px);
}

/* Focus */
.extract-lab-input:focus,
.extract-lab-input:focus-visible,
.extract-lab-select:focus,
.extract-lab-select:focus-visible,
.extract-lab-textarea:focus,
.extract-lab-textarea:focus-visible {
  outline: none;
  border-color: var(--el-accent);
  box-shadow: var(--el-focus);
}

/* Error variant — red border */
.extract-lab-field--error .extract-lab-input,
.extract-lab-field--error .extract-lab-select,
.extract-lab-field--error .extract-lab-textarea {
  border-color: var(--el-error);
}

/* Error message */
.extract-lab-field__error {
  display: block;
  color: var(--el-error);
  font-size: var(--el-text-xs);
  margin-top: var(--el-s2);
}

/* ===== /Form fields ===== */

/* ===== Spec table ===== */

.extract-lab-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--el-text-sm);
}

.extract-lab-spec-table tr {
  border-bottom: 1px solid var(--el-border);
}

.extract-lab-spec-table tr:last-child {
  border-bottom: none;
}

.extract-lab-spec-table__label {
  text-align: left;
  font-weight: 600;
  color: var(--el-muted);
  font-family: var(--el-font-body);
  padding: var(--el-s3) var(--el-s4) var(--el-s3) 0;
  vertical-align: top;
  white-space: normal;
}

.extract-lab-spec-table__value {
  font-family: var(--el-font-mono);
  color: var(--el-text);
  padding: var(--el-s3) 0;
  text-align: left;
}

/* Mobile: stack label above value */
@media (max-width: 767px) {
  .extract-lab-spec-table__label,
  .extract-lab-spec-table__value {
    display: block;
    width: 100%;
  }

  .extract-lab-spec-table__label {
    padding: var(--el-s3) 0 var(--el-s2) 0;
    border-bottom: none;
  }

  .extract-lab-spec-table__value {
    padding: 0 0 var(--el-s3) 0;
  }
}

/* Desktop: 2-column aligned table */
@media (min-width: 768px) {
  .extract-lab-spec-table__label {
    width: 40%;
  }
}

/* ===== Card ===== */
.extract-lab-card {
  background: var(--el-white);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: var(--el-s5);
}

.extract-lab-card__title {
  font-family: var(--el-font-heading);
  font-weight: 600;
  letter-spacing: var(--el-tracking-heading);
  font-size: var(--el-text-lg);
  color: var(--el-text);
  margin: 0 0 var(--el-s2);
}

.extract-lab-card__body {
  font-family: var(--el-font-body);
  font-size: var(--el-text-sm);
  color: var(--el-muted);
  margin: 0;
}

/* ===== Trust badge ===== */

/* Container — wraps on narrow viewports, single row on wide */
.extract-lab-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-s5); /* 24px */
}

/* Individual badge — icon + text inline, vertically centred */
.extract-lab-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--el-s2); /* 8px */
  font-family: var(--el-font-body);
  font-size: var(--el-text-sm); /* 16px */
  color: var(--el-text);
}

/* Inline SVG icon — inherits accent via currentColor */
.extract-lab-trust-badge__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--el-accent);
}

/* ===== /Spec table ===== */

/* ===== Hero ===== */

.extract-lab-hero {
  width: 100%;
  background: var(--el-bg, var(--el-white));
  padding: var(--el-s8) var(--el-pad-mobile);
  box-sizing: border-box;
}

.extract-lab-hero__inner {
  max-width: var(--el-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--el-s6);
}

/* Mobile: media first (above text via DOM order) */
.extract-lab-hero__media {
  order: -1;
}

.extract-lab-hero__media img,
.extract-lab-hero__media > * {
  display: block;
  width: 100%;
  height: auto;
}

.extract-lab-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.extract-lab-hero__title {
  font-family: var(--el-font-heading);
  font-weight: 600;
  letter-spacing: var(--el-tracking-heading);
  font-size: var(--el-text-3xl);
  line-height: 1.1;
  margin: 0 0 var(--el-s4);
  color: var(--el-text);
}

.extract-lab-hero__lede {
  font-family: var(--el-font-body);
  font-size: var(--el-text-md);
  line-height: var(--el-leading-body);
  color: var(--el-muted);
  margin: 0 0 var(--el-s6);
  max-width: 52ch;
}

/* Desktop ≥768px */
@media (min-width: 768px) {
  .extract-lab-hero {
    padding: var(--el-s9) var(--el-pad-desktop);
  }

  .extract-lab-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--el-s8);
  }

  .extract-lab-hero__media {
    order: 1; /* right column */
    flex: 1 1 50%;
  }

  .extract-lab-hero__content {
    order: 0; /* left column */
    flex: 1 1 50%;
  }

  .extract-lab-hero__title {
    font-size: var(--el-text-4xl);
  }
}

/* Variant: text-only — single column, full width */
.extract-lab-hero--text-only .extract-lab-hero__inner {
  flex-direction: column;
}

.extract-lab-hero--text-only .extract-lab-hero__content {
  flex: 1 1 100%;
}

/* ===== /Hero ===== */

/* ===== Alert ===== */

/* Base */
.extract-lab-alert {
  padding: var(--el-s4) var(--el-s5);
  border-left: 4px solid;
  border-radius: var(--el-radius);
  font-family: var(--el-font-body);
  font-size: var(--el-text-sm);
  color: var(--el-text);
}

.extract-lab-alert__title {
  font-family: var(--el-font-heading);
  font-weight: 600;
  font-size: var(--el-text-md);
  margin: 0 0 var(--el-s2);
}

.extract-lab-alert__body {
  margin: 0;
}

/* Variants */
.extract-lab-alert--info {
  border-left-color: var(--el-accent);
  background: #ecf5f1;
  background: color-mix(in srgb, var(--el-accent) 8%, var(--el-white));
}

.extract-lab-alert--success {
  border-left-color: var(--el-success);
  background: #ecf5f1;
  background: color-mix(in srgb, var(--el-success) 8%, var(--el-white));
}

.extract-lab-alert--warning {
  border-left-color: var(--el-warning);
  background: #fdf3e3;
  background: color-mix(in srgb, var(--el-warning) 8%, var(--el-white));
}

.extract-lab-alert--danger {
  border-left-color: var(--el-error);
  background: #faeaea;
  background: color-mix(in srgb, var(--el-error) 8%, var(--el-white));
}

/* ===== Header ===== */

/* Skip link — visually hidden until focused */
.extract-lab-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  text-decoration: none;
}
.extract-lab-skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--el-s3) var(--el-s5);
  clip: auto;
  white-space: normal;
  background: var(--el-accent);
  color: #fff;
  font-family: var(--el-font-body);
  font-size: var(--el-text-sm);
  font-weight: 600;
  z-index: 9999;
  outline: 3px solid var(--el-accent);
  outline-offset: 2px;
}

/* Header shell */
.extract-lab-header {
  background: var(--el-white, #fff);
  border-bottom: 1px solid var(--el-border);
}

.extract-lab-header__inner {
  max-width: var(--el-max, 1200px);
  margin: 0 auto;
  padding: var(--el-s4) var(--el-pad-mobile, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--el-s4);
}

/* Logo */
.extract-lab-logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}
.extract-lab-logo__img {
  height: 26px;          /* mobile */
  width: auto;
  display: block;
  transition: opacity var(--el-transition);
}
.extract-lab-logo:hover .extract-lab-logo__img {
  opacity: 0.82;         /* subtle — no border */
}
/* keyboard focus only (not on mouse hover) */
.extract-lab-logo:focus-visible {
  outline: 3px solid var(--el-accent);
  outline-offset: 3px;
  border-radius: var(--el-radius);
}
@media (min-width: 768px) {
  .extract-lab-logo__img { height: 32px; }
}

/* Nav */
.extract-lab-header__nav {
  order: 3;
  width: 100%;
}

.extract-lab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* wp_nav_menu wraps in <ul> directly; target links inside */
.extract-lab-nav li {
  display: flex;
}

.extract-lab-nav a,
.extract-lab-nav li > a {
  font-family: var(--el-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--el-text-sm);
  color: var(--el-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--el-s4);
  transition: color 150ms ease;
}

.extract-lab-nav a:hover,
.extract-lab-nav li > a:hover {
  color: var(--el-accent);
}

.extract-lab-nav a:focus,
.extract-lab-nav li > a:focus {
  color: var(--el-accent);
  outline: 3px solid var(--el-accent);
  outline-offset: 2px;
}

/* Actions cluster */
.extract-lab-header__actions {
  display: flex;
  align-items: center;
  gap: var(--el-s4);
  order: 2;
}

.extract-lab-header__action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--el-text);
  text-decoration: none;
  position: relative;
  transition: color 150ms ease;
}

.extract-lab-header__action-link:hover {
  color: var(--el-accent);
}

.extract-lab-header__action-link:focus {
  color: var(--el-accent);
  outline: 3px solid var(--el-accent);
  outline-offset: 2px;
}

/* Cart badge */
.extract-lab-cart {
  position: relative;
}

.extract-lab-cart__count {
  position: absolute;
  top: 4px;
  right: 2px;
  background: var(--el-accent);
  color: #fff;
  font-family: var(--el-font-body, 'Inter', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.extract-lab-cart__count[data-count="0"]{display:none;}

/* Trust strip */
.extract-lab-header__trust {
  font-family: var(--el-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--el-text-xs);
  color: var(--el-muted);
  text-align: center;
  padding: var(--el-s2) var(--el-pad-mobile, 24px);
  border-top: 1px solid var(--el-border);
}

/* ===== Header — desktop (≥768px) ===== */
@media (min-width: 768px) {
  .extract-lab-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .extract-lab-header__inner {
    padding: var(--el-s4) var(--el-pad-desktop, 48px);
    flex-wrap: nowrap;
    gap: var(--el-s5);
  }

  .extract-lab-logo {
    margin-right: 0;
  }

  .extract-lab-header__nav {
    order: 2;
    width: auto;
    flex: 1;
  }

  .extract-lab-header__actions {
    order: 3;
  }

  .extract-lab-header__trust {
    padding: var(--el-s2) var(--el-pad-desktop, 48px);
  }
}

/* ===== /Header ===== */

/* ===== Footer ===== */

.extract-lab-footer {
  border-top: 1px solid var(--el-border);
  background: var(--el-bg);
  /* Tighter vertical band — was 64px top+bottom which read as a vast empty
     space. 40px mobile keeps it intentional, not sparse. */
  padding: var(--el-s7) var(--el-pad-mobile) var(--el-s6);
}

.extract-lab-footer__inner {
  max-width: var(--el-max);
  margin: 0 auto;
}

/* Brand logo in the first column, above the blurb.
   Height + width:auto forced (!important) and unscoped so the logo is identical
   on every template: Elementor pages (home) and non-Elementor pages (cart,
   content) alike. Without !important the parent/Elementor img rules let the
   footer logo balloon on non-Elementor templates (e.g. /cart/). */
.extract-lab-footer__logo {
  display: block;
  height: 28px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 var(--el-s3);
}

/* Columns — mobile: stacked */
.extract-lab-footer__cols {
  display: flex;
  flex-direction: column;
  gap: var(--el-s6);
}

.extract-lab-footer__col h3 {
  font-family: var(--el-font-heading);
  font-weight: 600;
  font-size: var(--el-text-md);
  margin: 0 0 var(--el-s4) 0;
  color: var(--el-text);
}

.extract-lab-footer__col p {
  margin: 0;
  color: var(--el-muted);
  font-size: var(--el-text-xs);
  line-height: var(--el-leading-body);
}

.extract-lab-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.extract-lab-footer__col ul li a {
  font-family: var(--el-font-body);
  color: var(--el-muted);
  text-decoration: none;
  display: flex; /* F-06: was inline-flex — stretch to full li width */
  align-items: center;
  width: 100%; /* F-06: full-row tap target */
  min-height: var(--el-tap-min); /* F-02: was 40px magic number — lifted to token */
  font-size: var(--el-text-xs);
  line-height: var(--el-leading-body);
}

.extract-lab-footer__col ul li a:hover {
  color: var(--el-accent);
  text-decoration: none;
}

/* Payment icons */
.extract-lab-footer__payments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-s3);
  margin: var(--el-s5) 0;
  align-items: center;
}

.extract-lab-footer__pay-icon {
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: var(--el-s2);
  color: var(--el-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Bottom strip */
.extract-lab-footer__bottom {
  border-top: 1px solid var(--el-border);
  margin-top: var(--el-s6);
  padding-top: var(--el-s5);
  font-size: var(--el-text-xs);
  color: var(--el-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-s4);
}

.extract-lab-footer__bottom a {
  color: var(--el-muted);
  text-decoration: none;
}

.extract-lab-footer__bottom a:hover {
  color: var(--el-accent);
}

/* Footer — desktop (≥768px) */
@media (min-width: 768px) {
  .extract-lab-footer {
    padding: var(--el-s7) var(--el-pad-desktop) var(--el-s6);
  }

  /* Balanced columns: a wider brand/about column, then the two link columns.
     Reads more intentional than three equal thirds with a sparse first column. */
  .extract-lab-footer__cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--el-s7);
    align-items: start;
  }

  .extract-lab-footer__bottom {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}

/* ===== /Footer ===== */

/* ===== Layer 2 — force single emerald accent (D-2) =====
   WooCommerce + Elementor ship their own greens; pin everything to --el-accent. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--el-accent)}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,
.wc-block-components-button,
.checkout-button,
.woocommerce button.alt{
  background-color:var(--el-accent);
  border-color:var(--el-accent);
  color:var(--el-white);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce button.alt:hover{background-color:var(--el-accent-hover);border-color:var(--el-accent-hover)}

/* Elementor lime accent used on headings/links → emerald.
   Conservative: do NOT use a blanket * selector. If the About-page lime highlight
   persists, add a scoped selector here after inspecting the element. */

/* ===== Layer 2 — trust strip rebuild (D-11) ===== */
.extract-lab-header__trust{
  display:grid;grid-template-columns:1fr;gap:12px;
  padding:16px var(--el-pad-mobile);
  background:var(--el-white);
  border-top:1px solid var(--el-border);
  border-bottom:1px solid var(--el-border);
  font-size:var(--el-text-xs);text-align:left;
}
.extract-lab-trust-col{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.extract-lab-trust-col__icon{color:var(--el-accent);flex:0 0 auto}
.extract-lab-trust-col__text{display:flex;flex-direction:column;line-height:1.3}
.extract-lab-trust-col__text strong{font-weight:600;color:var(--el-text)}
@media (min-width:768px){
  .extract-lab-header__trust{grid-template-columns:repeat(3,1fr);padding:20px var(--el-pad-desktop)}
  .extract-lab-trust-col{justify-content:center}
}

/* ===== Layer 2 S2 — coloured payment marks (override S1 monochrome) ===== */
.extract-lab-footer__payments{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.extract-lab-footer__pay-icon{display:inline-flex;color:inherit}
.extract-lab-footer__pay-icon svg{height:26px;width:auto;display:block}
/* Per-mark optical size tweaks */
.extract-lab-footer__pay-icon[aria-label="American Express"] svg{height:24px}
.extract-lab-footer__pay-icon[aria-label="Google Pay"] svg{height:24px}

/* ===== Layer 2 — review widget restraint (D-12) ===== */
/* Provider: Customer Reviews for WooCommerce (customer-reviews-woocommerce).
   Selector source: class-cr-floating-trust-badge.php line 89 + css/badges.css line 8.
   Widget IS present on LocalWP. Caps the "big" variant (256px) to ≤200px;
   compact variant (135px) is already within budget.
   !important required — plugin enqueues badges.css after theme stylesheet. */
#cr_floatingtrustbadge,
#cr_floatingtrustbadge.cr-floatingbadge-big{max-width:200px!important}
@media (max-width:767px){
  #cr_floatingtrustbadge,
  #cr_floatingtrustbadge.cr-floatingbadge-big{transform:scale(.85);transform-origin:bottom right}
}

/* ===== Layer 2 — homepage (D-7/D-18) ===== */
.extract-lab-home-hero{
  background:var(--el-bg);
  max-width:var(--el-max);margin:0 auto;
  padding:var(--el-s7) var(--el-pad-mobile);
  min-height:auto;
}
/* Hero: headline + subtext left, single bottle shot right (desktop); stacked on
   mobile. Minimal gov.uk feel — not a full-bleed banner. */
.extract-lab-home-hero__inner{
  display:flex;
  flex-direction:column;
  gap:var(--el-s6);
}
.extract-lab-home-hero__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.extract-lab-home-hero__media{
  order:-1;                 /* image above text on mobile */
}
.extract-lab-home-hero__img{
  display:block;
  width:100%;
  max-width:320px;          /* keep it a clean product shot, not a banner */
  height:auto;
  margin:0;
}
@media (min-width:768px){
  .extract-lab-home-hero__inner{
    flex-direction:row;
    align-items:center;
    gap:var(--el-s8);
  }
  .extract-lab-home-hero__content{
    flex:1 1 56%;
    order:0;
  }
  .extract-lab-home-hero__media{
    flex:0 0 40%;
    order:1;
    display:flex;
    justify-content:flex-end;
  }
  .extract-lab-home-hero__img{
    max-width:360px;
  }
}
.extract-lab-home-hero__title{
  font-family:var(--el-font-heading);font-weight:600;letter-spacing:var(--el-tracking-heading);
  font-size:var(--el-text-2xl);line-height:1.15;margin:0 0 var(--el-s4);color:var(--el-text);
}
.extract-lab-home-hero__lede{font-size:var(--el-text-md);color:var(--el-muted);max-width:46ch;margin:0 0 var(--el-s5)}
.extract-lab-home-specs{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:var(--el-s5) 0 0;padding:0;
  font-family:var(--el-font-mono);font-size:var(--el-text-xs);color:var(--el-muted);
}
.extract-lab-home-specs li{position:relative;padding-right:16px}
.extract-lab-home-specs li:not(:last-child)::after{content:"\00B7";position:absolute;right:4px;color:var(--el-border)}
.extract-lab-home-product{max-width:var(--el-max);margin:0 auto;padding:var(--el-s6) var(--el-pad-mobile) var(--el-s8)}
.extract-lab-product-card{display:flex;flex-direction:column;gap:var(--el-s4);max-width:420px}
.extract-lab-product-card__media img{width:100%;height:auto;display:block}
.extract-lab-product-card__title{font-size:var(--el-text-lg);margin:0}
.extract-lab-product-card__title a{text-decoration:none;color:var(--el-text)}
.extract-lab-product-card__price{font-family:var(--el-font-mono);color:var(--el-accent);font-size:var(--el-text-md)}
@media (min-width:768px){
  .extract-lab-home-hero{padding:var(--el-s9) var(--el-pad-desktop)}
  .extract-lab-home-hero__title{font-size:var(--el-text-4xl)}
  .extract-lab-home-product{padding:var(--el-s7) var(--el-pad-desktop) var(--el-s9)}
}

/* ===== Layer 2 — D-2 reinforcement (beat Elementor per-element specificity) =====
   Elementor Pro's WooCommerce widgets emit per-element CSS (.elementor-element-<id>
   .single_add_to_cart_button{...}) that out-specifies the base D-2 rules, leaving the
   Add-to-cart button lime. !important scoped to the specific WC CTA classes is the
   justified override (third-party generated CSS we can't out-specify generically). */
.woocommerce .single_add_to_cart_button.button.alt,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button,
.checkout-button{
  background-color:var(--el-accent)!important;
  border-color:var(--el-accent)!important;
  color:var(--el-white)!important;
}
.woocommerce .single_add_to_cart_button.button.alt:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.checkout-button:hover{
  background-color:var(--el-accent-hover)!important;
  border-color:var(--el-accent-hover)!important;
}

/* ===== Layer 2 — product gallery visibility fallback (D-1) =====
   WooCommerce ships the gallery at inline opacity:0 and flips it to 1 once its
   FlexSlider init runs. On production, LiteSpeed JS optimization leaves
   wc_single_product_params undefined, so WC's gallery init never runs and the
   images stay stacked behind opacity:0 (invisible — the original D-1 symptom).
   The functions.php reinit JS only helps where that param exists, so this CSS is
   the robust, no-JS fallback: force the gallery visible, and ONLY when FlexSlider
   has NOT initialised (no .flexslider class) collapse the stack to the featured
   image. Where the carousel works (e.g. LocalWP), .flexslider is present so this
   leaves it untouched. */
.woocommerce-product-gallery{opacity:1!important}
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper > *:not(:first-child){display:none!important}
.woocommerce-product-gallery:not(.flexslider) .flex-control-thumbs,
.woocommerce-product-gallery:not(.flexslider) .flex-control-nav{display:none!important}

/* ===== Layer 2 S2 — homepage product grid (T3) ===== */
.extract-lab-home-grid{max-width:var(--el-max);margin:0 auto;padding:var(--el-s6) var(--el-pad-mobile) var(--el-s8)}
.extract-lab-home-grid__inner{display:grid;grid-template-columns:1fr;gap:var(--el-s5)}
.extract-lab-home-grid .extract-lab-product-card{max-width:none;height:100%}
.extract-lab-home-grid .extract-lab-product-card__body{display:flex;flex-direction:column;gap:var(--el-s3);align-items:flex-start}
@media (min-width:600px){.extract-lab-home-grid__inner{grid-template-columns:repeat(2,1fr)}}

/* Out-of-stock grid card: surface the status without entering the product.
   Reuses the .el-stock-badge--out treatment (sits under the title); dims the
   product image and softens the CTA to a quiet "View details" so the card still
   reads but no longer invites an add-to-cart. */
.extract-lab-product-card--oos .extract-lab-product-card__media img{
  opacity:.55;
  filter:grayscale(0.2);
}
.extract-lab-product-card--oos .el-stock-badge--out{
  margin-bottom:var(--el-s1);
}
.extract-lab-product-card__cta--oos{
  color:var(--el-muted);
  border-color:var(--el-border);
}
.extract-lab-product-card__cta--oos:hover{
  color:var(--el-white);
  background-color:var(--el-muted);
  border-color:var(--el-muted);
}

/* ===== Layer 2 S2 — D-24 single emerald across the variation price widget (T4) =====
   Root cause: WooCommerce sets rgb(140,178,29) on p.price and .price span inside
   .woocommerce-variation-price. The "From" text node inherits that colour. The inner
   .woocommerce-Price-amount is already emerald but swamped by the parent.
   a.reset_variations ("Clear") is WooCommerce default pink rgb(204,51,102).
   Fix: force p.price, .woocommerce-variation-price .price, and reset link to --el-accent. */
p.price,
.woocommerce-variation-price .price,
.woocommerce-variation-price .price .amount,
.single-product div.product p.price .amount,
.single-product div.product .woocommerce-variation-price .amount,
.elementor-widget-woocommerce-product-price .from,
.elementor-widget-woocommerce-product-add-to-cart .from{color:var(--el-accent)!important}
.woocommerce a.reset_variations{color:var(--el-accent)!important;text-decoration:underline}
.woocommerce a.reset_variations:hover{color:var(--el-accent-hover)!important}

/* ===== Layer 2 S2 — D-25 tighten footer link rhythm on mobile (T4) ===== */
.extract-lab-footer__col ul{margin:0;padding:0;list-style:none}
.extract-lab-footer__col li{line-height:1.4;margin:0 0 6px}
@media (min-width:768px){.extract-lab-footer__col li{margin-bottom:8px}}

/* ===== Layer 2 S2 — mobile touch targets + field sizes (T4) =====
   F-01: logo link sub-44px (26px) — lift to tap-min
   F-02/F-06: footer li a — stretch to row width + min-height
   F-03: WooCommerce variations select — lift to field-min (48px)
   F-05: cart "Return to shop" button — lift to tap-min */

/* F-01 — logo tap target (real class is a.extract-lab-logo) */
a.extract-lab-logo,
.extract-lab-header__logo a{
  display:inline-flex;
  align-items:center;
  min-height:var(--el-tap-min);
}

/* F-02 + F-06 — handled in canonical .extract-lab-footer__col ul li a rule above (line ~709) */

/* F-03 — variation select field height (mobile only) */
@media (max-width:767px){
  table.variations select{
    min-height:var(--el-field-min);
    padding-top:var(--el-s3);
    padding-bottom:var(--el-s3);
  }
}

/* F-05 — cart empty "Return to shop" button */
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward{
  min-height:var(--el-tap-min);
  display:inline-flex;
  align-items:center;
}
@media (min-width:992px){.extract-lab-home-grid__inner{grid-template-columns:repeat(3,1fr);gap:var(--el-s6);padding-left:var(--el-pad-desktop);padding-right:var(--el-pad-desktop)}}

/* ===== T5: Checkout + Cart visual rebuild ===== */

/* --- T5-1: Checkout field borders (match brand input tokens) ---
   NOTE: Elementor Pro widget CSS (post-112.css) applies border-width:0 0 2px
   with a high-specificity selector. We beat it by layering our own specificity
   using the .elementor-widget-woocommerce-checkout-page wrapper. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row input.input-text,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row select,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row textarea,
.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .form-row .input-text,
.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .form-row select{
  background:var(--el-white)!important;
  border:1px solid var(--el-border)!important;
  border-radius:var(--el-radius)!important;
  min-height:var(--el-field-min);
  padding:var(--el-s3) var(--el-s4)!important;
  font-size:var(--el-text-sm);
  font-family:var(--el-font-body);
  color:var(--el-text);
  box-sizing:border-box;
  width:100%;
  transition:border-color var(--el-transition),box-shadow var(--el-transition);
  appearance:none;
  -webkit-appearance:none;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row input.input-text:focus,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row select:focus,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row textarea:focus{
  outline:none;
  border-color:var(--el-accent)!important;
  box-shadow:var(--el-focus)!important;
}
/* select2 dropdowns — keep consistent */
.woocommerce-checkout .select2-container--default .select2-selection--single{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  min-height:var(--el-field-min);
  height:var(--el-field-min);
  display:flex;
  align-items:center;
  padding:0 var(--el-s4);
  font-size:var(--el-text-sm);
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--el-accent);
  box-shadow:var(--el-focus);
  outline:none;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:var(--el-field-min);
  padding:0;
  color:var(--el-text);
  font-size:var(--el-text-sm);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:var(--el-field-min);
}

/* --- T5-2: Checkout progress indicator --- */
.extract-lab-checkout-steps{
  display:flex;
  align-items:center;
  gap:0;
  margin:0 0 var(--el-s5);
  padding:var(--el-s4) 0;
  list-style:none;
  font-family:var(--el-font-body);
  font-size:var(--el-text-xs);
  border-bottom:1px solid var(--el-border);
}
.extract-lab-checkout-steps__item{
  display:flex;
  align-items:center;
  color:var(--el-muted);
  white-space:nowrap;
}
.extract-lab-checkout-steps__item--current{
  color:var(--el-accent);
  font-weight:600;
}
.extract-lab-checkout-steps__sep{
  color:var(--el-border);
  padding:0 var(--el-s2);
  user-select:none;
  flex-shrink:0;
}

/* --- T5-3: SSL / secure badge --- */
.extract-lab-secure-badge{
  display:flex;
  align-items:center;
  gap:var(--el-s2);
  font-family:var(--el-font-body);
  font-size:var(--el-text-xs);
  color:var(--el-muted);
  padding:var(--el-s3) var(--el-s4);
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  margin:var(--el-s4) 0;
  background:var(--el-white);
}
.extract-lab-secure-badge svg{
  flex-shrink:0;
  color:var(--el-accent);
}

/* --- T5-4: PayPal Pay-in-3 (BNPL) message — no border, just the muted line ---
   The PPCP message had a stray emerald left border that looked like an alert.
   Per client review: remove the border and background; render the message text
   only, muted. */
.ppcp-messages,
[class*="ppcp-bnpl"],
.woocommerce-checkout .ppcp-messages{
  display:block;
  margin:var(--el-s3) 0;
  padding:0;
  border:none;
  background:transparent;
  color:var(--el-muted);
}

/* --- T5-5: Cart table restyle --- SUPERSEDED by T3 "Coded cart template" below.
   The cart is now a coded child-theme override (woocommerce/cart/cart.php) using
   a restyled .extract-lab-cart__table (a WC shop_table responsive table, not
   div rows). The old .woocommerce-cart-form table.cart th/td selectors no longer
   match the new markup, and the emerald-fill / demote rules are replaced by the
   equal-width CTA block. Removed to avoid dead/competing CSS. See "Coded cart template (T3)". */

/* --- T5-6: Cart trust row --- */
/* extract_lab_cart_trust_row() still fires on woocommerce_after_cart_table and
   renders the SSL label + payment marks below the cart surface. Kept (slimmed),
   styled to sit under the new coded cart. */
.extract-lab-cart-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--el-s3) var(--el-s4);
  padding:var(--el-s4) 0;
  border-top:1px solid var(--el-border);
  margin-top:var(--el-s4);
}
.extract-lab-cart-trust__label{
  display:flex;
  align-items:center;
  gap:var(--el-s2);
  font-family:var(--el-font-body);
  font-size:var(--el-text-xs);
  color:var(--el-muted);
  white-space:nowrap;
}
.extract-lab-cart-trust__label svg{
  color:var(--el-accent);
  flex-shrink:0;
}
.extract-lab-cart-trust__icons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--el-s2);
}
.extract-lab-cart-trust__icons .extract-lab-footer__pay-icon svg{
  height:24px;
  width:auto;
  display:block;
}
/* ===== /T5: Checkout + Cart visual rebuild ===== */

/* ===== Session 2.5 — reconcile fixes ===== */

/* F8 — currency symbol colour. The D-2 rule (top of Layer 2) colours
   .woocommerce-Price-amount emerald, but the inner
   .woocommerce-Price-currencySymbol still rendered default black, so every price
   read "£"(black) + "25.00"(emerald). Pin the symbol to the accent too — sitewide:
   shop, product, cart, checkout, mini-cart, order confirmation, account orders.
   No !important per brief; if a later sheet still wins on the symbol, escalate
   during browser verification. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi{
  color:var(--el-accent);
}
/* The symbol sits inside bdi but on cart line-items (td.product-price/-subtotal) a
   higher-specificity WC rule forced it black while the digits stayed emerald.
   Pin it with descendant specificity + !important so £ matches the digits across
   shop, product, cart, checkout, mini-cart, order confirmation, account orders. */
.woocommerce-Price-amount .woocommerce-Price-currencySymbol{
  color:var(--el-accent)!important;
}

/* F4 — PayPal Pay-in-3 empty box. The T5-4 rule above gives .ppcp-messages an
   emerald left border + white bg unconditionally, so it renders an empty styled
   box beneath Add to Basket on non-qualifying products. Collapse when empty. */
.ppcp-messages:empty,
[class*="ppcp-bnpl"]:empty{
  display:none;
}

/* F3 — variation selector rebuild (CSS-only; no variable.php override, so WC's
   variation JS, data-attrs and hidden inputs stay intact → add-to-cart logic
   untouched). Turns the default WC table into a single white surface with the
   attribute label ABOVE a branded, bordered select + emerald chevron/focus. */
/* Kill any grey panel behind the variation form: the Elementor add-to-cart
   widget wrapper + the WC variations table/cells must be white/transparent so
   only the bordered select reads as a control. */
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container,
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value{
  background:transparent!important;
  background-color:transparent!important;
}
.woocommerce div.product form.cart table.variations{
  width:100%;
  border:none;
  margin:0 0 var(--el-s4);
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value{
  display:block;
  width:100%;
  padding:0;
  border:none;
  text-align:left;
}
.woocommerce div.product form.cart table.variations th.label label{
  display:block;
  font-family:var(--el-font-body);
  font-weight:600;
  font-size:var(--el-text-sm);
  color:var(--el-text);
  margin:0 0 var(--el-s2);
}
.woocommerce div.product form.cart table.variations td.value select{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:var(--el-field-min);
  padding:var(--el-s3) calc(var(--el-s4) * 2 + 16px) var(--el-s3) var(--el-s4);
  font-family:var(--el-font-body);
  font-size:var(--el-text-sm);
  color:var(--el-text);
  background-color:var(--el-white);
  border:1px solid var(--el-border)!important;
  border-radius:var(--el-radius);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23047857' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--el-s4) center;
  cursor:pointer;                 /* image 12: read as clickable on desktop */
  transition:border-color var(--el-transition),box-shadow var(--el-transition);
}
/* image 12: hover affordance, emerald border on hover, matching focus. */
.woocommerce div.product form.cart table.variations td.value select:hover{
  border-color:var(--el-accent)!important;
}
.woocommerce div.product form.cart table.variations td.value select:focus,
.woocommerce div.product form.cart table.variations td.value select:focus-visible{
  outline:none;
  border-color:var(--el-accent)!important;
  box-shadow:var(--el-focus);
}
/* Item 5: hide the WooCommerce "Clear" reset link entirely (client review). */
.woocommerce a.reset_variations,
.woocommerce div.product form.cart .reset_variations{
  display:none!important;
}
/* Round 3 / item 3: promote the multi-buy savings from tiny muted grey to a
   clear emerald-accented callout. It renders on woocommerce_before_add_to_cart_
   button (inside the form, directly under the Bundle selector) so the saving is
   obvious at the decision point. Emerald text, slightly bolder, a thin emerald
   left accent + tinted surface so it reads as a tied-to-the-dropdown badge —
   minimal, no shadow/gradient. */
.extract-lab-multibuy-note{
  display:block;
  margin:var(--el-s2) 0 var(--el-s4);
  padding:var(--el-s2) var(--el-s3);
  border-left:3px solid var(--el-accent);
  border-radius:var(--el-radius);
  background:color-mix(in srgb, var(--el-accent) 7%, var(--el-white));
  font-family:var(--el-font-body);
  font-size:var(--el-text-sm);    /* 16px — up from 14px */
  font-weight:600;
  color:var(--el-accent);
  line-height:1.4;
}
/* Round 3 / item 3: tidy the stacked "From £25.00" (p.price) + "£25.00"
   (.woocommerce-variation-price) so they don't read as a cramped duplicate.
   The top-level p.price is the resting "From" line; once a variation is chosen
   the variation price appears. Give each clear spacing and a calmer "From"
   prefix so the hierarchy reads cleanly. */
.single-product div.product > p.price,
.woocommerce div.product p.price{
  margin:0 0 var(--el-s3);
  line-height:1.3;
}
.woocommerce div.product .woocommerce-variation-price{
  margin:0 0 var(--el-s2);
}
.woocommerce div.product .woocommerce-variation-price .price{
  font-size:var(--el-text-lg);   /* chosen-bundle price is the dominant figure */
  font-weight:600;
}

/* Item 6: empty "Related products" section on the single-product pages.
   The PHP unhook above covers WooCommerce CORE output. The actual leftover here is
   an Elementor-built section that ALL product pages share (same template IDs): a
   plain heading widget reading "Related products" (container b126b53) directly
   followed by an empty products container (c793326, no .elementor-widget / no
   products inside). Hide both, but ONLY while that products container has no
   product/widget children, so a repopulated section reappears automatically.
   Scoped to body.single-product + the specific shared container IDs (the IDs are
   identical across the ethanol/acetone/propanol templates, verified in Chrome).
   NOTE: selectors are FLAT :not(:has(...)). A :has() nested inside another :has()'s
   relative argument is invalid CSS and silently drops the whole rule. Verified in
   Chrome that these match the empty section and would NOT match a populated one. */
body.single-product .elementor-element-c793326:not(:has(.product)):not(:has(li)):not(:has(.elementor-widget)),
/* the preceding heading container holding only the orphaned "Related products" heading */
body.single-product .elementor-element-b126b53:has(.elementor-widget-heading):not(:has(li.product)):not(:has(.product)){
  display:none!important;
}
/* Generic belt-and-braces for any WC-core related/upsell block that still prints
   its heading with no products (covers other pages if a widget is ever added). */
.related.products:not(:has(li.product)),
.up-sells.upsells.products:not(:has(li.product)){
  display:none!important;
}

/* F6 — "added to basket" success notice. Single white surface with an emerald
   top accent, factual message, and two equal-weight branded buttons (primary
   View basket + ghost Continue shopping). Also covers block-based success notices. */
.woocommerce-message,
.wc-block-components-notice-banner.is-success{
  border:1px solid var(--el-accent);
  border-radius:var(--el-radius);
  background:var(--el-white)!important;
  color:var(--el-text);
  padding:var(--el-s4) var(--el-s5);
  font-family:var(--el-font-body);
  font-size:var(--el-text-sm);
  line-height:var(--el-leading-body);
  list-style:none;
}
/* Round 3 / item 1: WooCommerce's own ::before check tick is absolutely
   positioned (top/left) over the first letter of the text with no reserved
   space, so it overlaps "Extract Lab Ethanol…". Suppress WC's tick entirely
   and render our own check as a flex item INSIDE the text row, with a real gap,
   so icon-left / text-after never overlap. */
.woocommerce-message::before{
  content:none!important;
  display:none!important;
}
.extract-lab-added{
  display:flex;
  flex-direction:column;
  gap:var(--el-s4);
}
/* Text row: emerald check (inline SVG data-URI) then the message, clear gap. */
.extract-lab-added__text{
  display:flex;
  align-items:flex-start;
  gap:var(--el-s3);
}
.extract-lab-added__text::before{
  content:"";
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-top:1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}
.extract-lab-added__text strong{ color:var(--el-text);font-weight:600; }
.extract-lab-added__qty{ font-family:var(--el-font-mono);color:var(--el-muted); }
.extract-lab-added__actions{
  display:flex;
  gap:var(--el-s3);
  flex-wrap:wrap;
}
.extract-lab-added__actions .extract-lab-btn{ flex:1 1 160px; }
/* Item A (final QA): the View-basket button is an <a class="extract-lab-btn
   extract-lab-btn--primary wc-forward">. WooCommerce/Elementor colour links inside
   .woocommerce-message (and the .wc-forward link) their own green, so the filled
   emerald button rendered emerald-text-on-emerald (invisible). Force white text on
   the filled primary with !important so no notice-scoped link rule can win.
   Secondary (ghost) stays emerald text on white. */
.woocommerce-message a.extract-lab-btn.wc-forward,
.woocommerce-message a.extract-lab-btn--primary,
.woocommerce-message a.extract-lab-btn--primary.wc-forward,
.woocommerce-message a.extract-lab-btn--primary:hover,
.wc-block-components-notice-banner a.extract-lab-btn--primary{ color:var(--el-white)!important; }
.woocommerce-message a.extract-lab-btn--secondary.wc-forward,
.woocommerce-message a.extract-lab-btn--secondary{ color:var(--el-accent)!important; }
.woocommerce-message a.extract-lab-btn--secondary:hover{ color:var(--el-white)!important; }
/* Hover fix (2026-05-24): the generic notice-link rule further down
   (.woocommerce .woocommerce-message a:hover{color:var(--el-accent-hover)!important})
   has EQUAL specificity (0,3,1) to the white-hover rule above and, being later in
   source, won — so the filled View-basket button rendered emerald-text-on-emerald
   on hover. Re-scope with a leading .woocommerce to reach (0,4,1) and win outright. */
.woocommerce .woocommerce-message a.extract-lab-btn--primary:hover,
.woocommerce .woocommerce-message a.extract-lab-btn--primary.wc-forward:hover{ color:var(--el-white)!important; }

/* ===== Track D (2026-05-23): archive stock badge =====
   Sits below the product title on shop/category loops. Uses the Layer-1
   design-system status colours; small uppercase letterspaced label. */
.el-stock-badge{
  display:inline-block;
  margin-top:var(--el-s2);
  font-family:var(--el-font-heading);
  font-size:0.6875rem;        /* 11px */
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.2;
}
.el-stock-badge--out{ color:#B91C1C; }  /* design-system error red — out of stock */
.el-stock-badge--low{ color:#B45309; }  /* amber — low-stock urgency */

/* ===== Track F (2026-05-23): cart — PayPal smart button primary, full-checkout secondary =====
   SUPERSEDED by the T3 "Coded cart template" CTA block below. The equal-width
   stacked CTA treatment (PayPal · or · Proceed-to-checkout outline) now lives in
   the coded cart-totals.php + proceed-to-checkout-button.php and is styled in the
   "Coded cart template (T3)" section. The old demote/spacing rules are removed to
   avoid competing with the flexbox+order layout. */

/* ===== Coded cart template (T3, 2026-05-23) =====
   Single white surface, item rows, qty stepper, quiet coupon accordion, order
   summary card, equal-width stacked CTA block (PayPal · or · Proceed), sticky
   summary on >=1024px. Matches .superpowers/brainstorm/.../cart-mock.html.
   Naming: .extract-lab-cart* / .extract-lab-summary* / .extract-lab-qty*.
   Mobile-first; tokens only. Prices stay mono-emerald via the global rules
   (.woocommerce-Price-amount) — not overridden here. */

/* --- Page scaffold --- */
.woocommerce-cart .extract-lab-cart{
  margin:0;
}
/* Issue 1: suppress the WP page title ("Cart") so only our "Your basket"
   (.extract-lab-cart__title) shows. The theme renders
   .page-header > h1.entry-title; hiding the wrapper kills the duplicate
   heading + its spacing. Scoped to the cart page only (checkout handled
   separately in a later task). */
body.woocommerce-cart .page-header,
body.woocommerce-cart .entry-title{
  display:none;
}
.extract-lab-cart__title{
  font-family:var(--el-font-heading);
  font-weight:600;
  font-size:var(--el-text-xl);          /* 24px */
  letter-spacing:var(--el-tracking-heading);
  /* "Your basket" needs breathing room — the suppressed page title left it
     cramped against the header. Give it generous top space and a clear gap
     below before the cart surface. */
  margin:var(--el-s6) 0 var(--el-s5);
}
@media (min-width:768px){
  .extract-lab-cart__title{
    margin:var(--el-s7) 0 var(--el-s5);
  }
}

/* --- Single surface holding item rows + coupon --- */
.extract-lab-cart__surface{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
}
/* Strip all WC table chrome inside the surface, we lay rows out with flex.
   Item 7: also zero every default th/td/tr border so WooCommerce's own
   shop_table cell borders can't double up against our single border-top row
   dividers (the "squashed/overlapping borders" in the cart). Row dividers are
   re-applied cleanly on .extract-lab-cart__item / __actions-row only. */
.woocommerce table.shop_table.extract-lab-cart__table,
.woocommerce table.shop_table.extract-lab-cart__table thead,
.woocommerce table.shop_table.extract-lab-cart__table tbody,
.woocommerce table.shop_table.extract-lab-cart__table tfoot,
.woocommerce table.shop_table.extract-lab-cart__table tr,
.woocommerce table.shop_table.extract-lab-cart__table th,
.woocommerce table.shop_table.extract-lab-cart__table td{
  border:0!important;
}
.extract-lab-cart__table,
.extract-lab-cart__table tbody,
.extract-lab-cart__table tr,
.extract-lab-cart__table td{
  display:block;
  width:100%;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
}
.woocommerce table.shop_table.extract-lab-cart__table{
  border:none;
  border-collapse:collapse;
  margin:0;
}

/* --- Override WooCommerce's responsive cart CSS (woocommerce-smallscreen.css,
   applies @media max-width:768px). Those rules target table.cart /
   table.shop_table_responsive and use !important + zebra striping + data-title
   ::before labels that fight our flex card layout. Re-assert the coded layout
   at every width. Scoped to .extract-lab-cart__table so other WC tables
   (My Account orders, checkout review) keep their default responsive behaviour. */

/* Issue 2: WC hides .product-thumbnail (display:none) at <=768px — un-hide it
   so the 64px thumb renders on mobile/tablet (img sizing handled below). */
.woocommerce .extract-lab-cart__table .product-thumbnail,
.woocommerce-page .extract-lab-cart__table .product-thumbnail{
  display:block;
}

/* Issue 3: suppress the "Product:/Quantity:/Total:" data-title ::before labels
   WC injects on responsive table cells. */
.extract-lab-cart__table tr td::before,
.woocommerce table.shop_table_responsive.extract-lab-cart__table tr td::before{
  content:none!important;
  display:none!important;
}

/* Issue 4 (responsive correctness): WC forces td{text-align:right!important}
   and a tr:nth-child(2n) zebra background at <=768px. Reset both so our flex
   card reads left-aligned with no stripe. */
.woocommerce table.shop_table_responsive.extract-lab-cart__table tr td,
.woocommerce-page table.shop_table_responsive.extract-lab-cart__table tr td{
  text-align:left!important;
  background-color:transparent!important;
}

/* Issue 5 (the actual cause of the stacked row + hidden thumb): the generic
   reset above sets `.extract-lab-cart__table tr{display:block}` (specificity
   0,1,1) which out-specifies `.extract-lab-cart__item{display:flex}` (0,1,0),
   so the row never flexed — thumb stacked above the details. And the plain
   `display:block` on .product-thumbnail lost to WC smallscreen's display:none.
   Re-assert the horizontal card with higher specificity + !important so it wins
   at every width. */
.woocommerce .extract-lab-cart__table tr.extract-lab-cart__item{
  display:flex!important;
}
.woocommerce .extract-lab-cart__table tr.extract-lab-cart__item td.product-thumbnail{
  display:block!important;
  flex:0 0 64px!important;
  width:64px!important;          /* beat the generic reset td{width:100%} */
}
.woocommerce .extract-lab-cart__table tr.extract-lab-cart__item td.product-thumbnail a{
  display:block;
  width:64px;
}
.woocommerce .extract-lab-cart__table tr.extract-lab-cart__item td.product-thumbnail img{
  width:64px!important;          /* beat WC default .woocommerce table.cart img{width:32px} */
  height:64px!important;
  max-width:none!important;      /* lift img{max-width:100%} cap against the shrink-wrapped <a> */
  object-fit:cover;
}
.woocommerce .extract-lab-cart__table tr.extract-lab-cart__item td.product-name{
  flex:1 1 auto!important;
  width:auto!important;          /* beat the generic reset td{width:100%} */
  min-width:0;
}

/* Item row: thumb / main column */
.extract-lab-cart__item{
  display:flex;
  gap:var(--el-s4);
  padding:var(--el-s4);
  border-top:1px solid var(--el-border);
}
.extract-lab-cart__item:first-child{
  border-top:none;
}
.extract-lab-cart__thumb{
  flex:0 0 auto;
  width:64px;
}
.extract-lab-cart__thumb img{
  width:64px!important;
  height:64px!important;
  object-fit:cover;
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  display:block;
}
.extract-lab-cart__main{
  flex:1 1 auto;
  min-width:0;
}
.extract-lab-cart__name{
  font-family:var(--el-font-body);
  font-weight:600;
  font-size:0.9375rem;                  /* 15px */
  line-height:1.3;
  margin:0 0 2px;
}
.extract-lab-cart__name a{
  color:var(--el-text);
  text-decoration:none;
}
.extract-lab-cart__name a:hover{
  color:var(--el-accent);
}
/* Variation / item meta (e.g. "1 Bottle") */
.extract-lab-cart__main .variation,
.extract-lab-cart__main dl.variation{
  margin:0 0 var(--el-s2);
  font-size:0.8125rem;                  /* 13px */
  color:var(--el-muted);
  line-height:1.4;
}
.extract-lab-cart__main .variation dt,
.extract-lab-cart__main .variation dd{
  display:inline;
  margin:0;
  font-weight:400;
}
.extract-lab-cart__main .variation dd p{ margin:0; display:inline; }
.extract-lab-cart__main .variation dt::after{ content:" "; }

.extract-lab-cart__row2{
  display:flex;
  align-items:center;
  gap:var(--el-s3);
  margin-top:var(--el-s2);
}
.extract-lab-cart__qty{
  flex:0 0 auto;
}
.extract-lab-cart__price{
  margin-left:auto;
  font-family:var(--el-font-mono);
  font-weight:500;
  font-size:0.9375rem;                  /* 15px */
  color:var(--el-accent);
  white-space:nowrap;
}
.extract-lab-cart__remove{
  flex:0 0 auto;
}
.extract-lab-cart__remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  font-size:18px;
  line-height:1;
  color:var(--el-muted)!important;
  text-decoration:none;
  border-radius:var(--el-radius);
}
.extract-lab-cart__remove a.remove:hover{
  color:var(--el-error)!important;
  background:transparent;
}

/* --- Qty stepper (− [n] +) built by cart.js around the WC number input --- */
.extract-lab-cart__qty .quantity,
.extract-lab-qty{
  display:inline-flex;
  align-items:center;
  height:32px;
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  overflow:hidden;
  background:var(--el-white);
}
.extract-lab-qty__btn{
  width:30px;
  height:30px;
  border:none;
  background:var(--el-white);
  color:var(--el-muted);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-family:var(--el-font-body);
}
.extract-lab-qty__btn:hover,
.extract-lab-qty__btn:focus{
  color:var(--el-accent);
  background-color:var(--el-border);   /* was pink: parent reset.css [type=button]:hover{background-color:#c36} */
}
.extract-lab-qty__btn:focus-visible{
  outline:none;
  box-shadow:inset var(--el-focus);
}

/* ===== Parent reset.css pink neutraliser (2026-05-24) =====
   Hello Elementor's assets/css/reset.css pinkifies bare form controls:
     button,[type=button],[type=submit]{border:1px solid #c36;color:#c36}
     button:hover,button:focus,...{background-color:#c36}
   (a / a:hover pink+purple are already re-pointed in tokens.css.) Any bare
   <button>/input-button WITHOUT a design-system class would flash pink on
   hover/focus. Re-point every bare control to the brand palette. Controls
   carrying .extract-lab-btn* or .button are excluded (keep their own styles);
   the qty stepper is excluded here and handled by its own rule above. */
button:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn),
[type="button"]:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn),
[type="submit"]:not([class*="extract-lab-btn"]):not(.button),
[type="reset"]:not([class*="extract-lab-btn"]):not(.button){
  border-color:var(--el-border);
  color:var(--el-text);
}
button:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn):hover,
button:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn):focus,
[type="button"]:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn):hover,
[type="button"]:not([class*="extract-lab-btn"]):not(.button):not(.extract-lab-qty__btn):focus,
[type="submit"]:not([class*="extract-lab-btn"]):not(.button):hover,
[type="submit"]:not([class*="extract-lab-btn"]):not(.button):focus,
[type="reset"]:not([class*="extract-lab-btn"]):not(.button):hover,
[type="reset"]:not([class*="extract-lab-btn"]):not(.button):focus{
  background-color:var(--el-bg);
}

.extract-lab-cart__qty .quantity input.qty,
.extract-lab-qty input.qty,
.extract-lab-cart__qty input[type="number"]{
  width:34px;
  height:30px;
  min-height:0!important;
  border:none!important;
  border-left:1px solid var(--el-border)!important;
  border-right:1px solid var(--el-border)!important;
  border-radius:0!important;
  text-align:center;
  font-size:0.875rem;                   /* 14px */
  font-family:var(--el-font-body);
  color:var(--el-text);
  background:var(--el-white);
  padding:0!important;
  -moz-appearance:textfield;
}
.extract-lab-cart__qty input[type="number"]::-webkit-outer-spin-button,
.extract-lab-cart__qty input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* --- Quiet coupon accordion at the foot of the surface --- */
.extract-lab-cart__actions-row,
.extract-lab-cart__actions{
  display:block;
  border-top:1px solid var(--el-border);
  padding:0;
}
.extract-lab-cart__coupon{
  margin:0;
  padding:0;
}
.extract-lab-cart__coupon-toggle{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  padding:var(--el-s3) var(--el-s4);
  font-family:var(--el-font-body);
  font-size:0.8125rem;                  /* 13px */
  font-weight:600;
  color:var(--el-accent);
  cursor:pointer;
}
.extract-lab-cart__coupon-toggle::before{
  content:"+ ";
}
.extract-lab-cart__coupon-toggle[aria-expanded="true"]::before{
  content:"\2212 "; /* minus sign (not an en dash), matches the notes toggle */
}
.extract-lab-cart__coupon-toggle:hover,
.extract-lab-cart__coupon-toggle:focus,
.extract-lab-cart__coupon-toggle:focus-visible{
  /* Kill the parent reset's pink (#c36) button background on rest AND hover/focus
     (the reset styles button/[type=button] backgrounds at equal specificity). */
  background:transparent;
  color:var(--el-accent-hover);
  text-decoration:underline;
}
.extract-lab-cart__coupon-fields{
  display:flex;
  gap:var(--el-s2);
  padding:0 var(--el-s4) var(--el-s4);
}
.extract-lab-cart__coupon-fields[hidden]{
  display:none;
}
.extract-lab-cart__coupon-fields input.input-text{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  padding:var(--el-s2) var(--el-s3);
  font-family:var(--el-font-body);
  font-size:0.875rem;
  background:var(--el-white);
}
.extract-lab-cart__coupon-fields input.input-text:focus{
  outline:none;
  border-color:var(--el-accent);
  box-shadow:var(--el-focus);
}

/* Hide the native "Update cart" button — the stepper triggers it for us. */
.extract-lab-cart__update{
  position:absolute!important;
  width:1px;height:1px;
  padding:0!important;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* --- Order summary card --- */
.extract-lab-cart__collaterals{
  margin-top:var(--el-s4);
}
.extract-lab-summary{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  padding:var(--el-s4);
}
.extract-lab-summary__title{
  font-family:var(--el-font-heading);
  font-weight:600;
  font-size:var(--el-text-md);          /* 18px */
  letter-spacing:var(--el-tracking-heading);
  margin:0 0 var(--el-s3);
}
.extract-lab-summary__table,
.woocommerce .extract-lab-summary table.shop_table.extract-lab-summary__table{
  width:100%;
  border:none;
  border-collapse:collapse;
  margin:0;
}
.extract-lab-summary__table tr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--el-s3);
}
.extract-lab-summary__table th,
.extract-lab-summary__table td{
  border:none;
  padding:var(--el-s1) 0;
  font-family:var(--el-font-body);
  font-size:0.875rem;                   /* 14px */
  font-weight:400;
  text-align:left;
  background:transparent;
}
.extract-lab-summary__table td{
  text-align:right;
}
/* Issue: WooCommerce / parent table defaults paint Subtotal/Total value cells
   with a grey background (and a grey hover stripe). Force every summary cell —
   th, td, and their :hover — onto the white card with no cell background. */
.extract-lab-summary__table tr,
.extract-lab-summary__table tr:hover,
.extract-lab-summary__table th,
.extract-lab-summary__table td,
.extract-lab-summary__table tr:hover th,
.extract-lab-summary__table tr:hover td,
.woocommerce .extract-lab-summary table.shop_table tr,
.woocommerce .extract-lab-summary table.shop_table th,
.woocommerce .extract-lab-summary table.shop_table td,
.woocommerce .extract-lab-summary table.shop_table tr:hover td{
  background:transparent!important;
  background-color:transparent!important;
}
.extract-lab-summary__muted{
  color:var(--el-muted);
  font-family:var(--el-font-body);
  font-size:0.8125rem;
}
.extract-lab-summary__table tr.order-total{
  border-top:1px solid var(--el-border);
  margin-top:var(--el-s2);
  padding-top:var(--el-s3);
}
.extract-lab-summary__table tr.order-total th{
  font-weight:600;
  font-size:var(--el-text-sm);          /* 16px */
}
.extract-lab-summary__table tr.order-total td{
  font-weight:600;
  font-size:var(--el-text-sm);
}

/* --- Equal-width stacked CTA block (PayPal · or · Proceed) ---
   PPCP injects the PayPal smart button + BNPL message into .wc-proceed-to-checkout
   client-side at arbitrary hook priorities, so source order is not guaranteed.
   Force the visual stack with flexbox + order. */
.extract-lab-summary .wc-proceed-to-checkout{
  display:flex;
  flex-direction:column;
  margin-top:var(--el-s4);
  gap:0;
}
/* PayPal smart-button wrapper(s) — first. Cover the common PPCP class names. */
.extract-lab-summary .wc-proceed-to-checkout .ppc-button-wrapper,
.extract-lab-summary .wc-proceed-to-checkout .ppcp-button-container,
.extract-lab-summary .wc-proceed-to-checkout .paypal-buttons,
.extract-lab-summary .wc-proceed-to-checkout [id^="ppc-button"]{
  order:1;
  width:100%;
}
/* "or" divider — second */
.extract-lab-summary .wc-proceed-to-checkout .extract-lab-cart__or{
  order:2;
}
/* Defensive: if PPCP didn't render (absent/failed), the PayPal button is the
   first child; if instead the divider ends up first with nothing above it,
   hide the dangling "or". */
.extract-lab-cart__or:first-child{
  display:none;
}
/* Proceed to checkout — third */
.extract-lab-summary .wc-proceed-to-checkout .checkout-button{
  order:3;
}
/* BNPL message — last */
.extract-lab-summary .wc-proceed-to-checkout .ppcp-messages,
.extract-lab-summary .wc-proceed-to-checkout [class*="ppcp-bnpl"]{
  order:4;
  margin:var(--el-s3) 0 0;
  padding:0;
  border:none;
  background:transparent;
  text-align:center;
}

/* The "or" divider */
.extract-lab-cart__or{
  display:flex;
  align-items:center;
  gap:var(--el-s3);
  margin:var(--el-s3) 0;
  color:var(--el-muted);
  font-family:var(--el-font-body);
  font-size:0.75rem;                    /* 12px */
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.extract-lab-cart__or::before,
.extract-lab-cart__or::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--el-border);
}

/* Proceed-to-checkout button: FILLED emerald primary, full width, ~50px — the
   clear standout CTA. PayPal stays above as the alternative (the "or" divider
   keeps the relationship). Doubled .checkout-button lifts specificity to beat
   the global button rules. */
.extract-lab-summary .wc-proceed-to-checkout .checkout-button.checkout-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50px;
  min-height:50px!important;
  margin:0;
  background:var(--el-accent)!important;
  border:1px solid var(--el-accent)!important;
  border-radius:var(--el-radius)!important;
  color:var(--el-white)!important;
  font-family:var(--el-font-heading)!important;
  font-size:0.9375rem!important;        /* 15px */
  font-weight:600!important;
  text-decoration:none;
  text-transform:none;
  transition:background var(--el-transition),color var(--el-transition);
}
.extract-lab-summary .wc-proceed-to-checkout .checkout-button.checkout-button:hover{
  background:var(--el-accent-hover)!important;
  border-color:var(--el-accent-hover)!important;
  color:var(--el-white)!important;
}

/* Secure row inside the card */
.extract-lab-summary__secure{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:var(--el-s4);
  font-family:var(--el-font-body);
  font-size:0.75rem;                    /* 12px */
  color:var(--el-muted);
}
.extract-lab-summary__secure-label{
  display:inline-flex;
  align-items:center;
  gap:var(--el-s2);
}
.extract-lab-summary__secure-label svg{
  color:var(--el-accent);
  flex-shrink:0;
}

/* --- Desktop reflow: two columns, sticky summary (>=1024px) ---
   Constrain + centre the whole cart so the two columns sit together as an
   intentional block rather than items-far-left / summary-far-right with a vast
   gap at 1440. The WC wrapper holds both floated columns; cap it and centre. */
@media (min-width:1024px){
  .woocommerce-cart .woocommerce{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
  }
  .woocommerce-cart .extract-lab-cart,
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form{
    float:left;
    width:62%;
    margin:0;
  }
  .woocommerce-cart .extract-lab-cart__collaterals,
  .woocommerce-cart .cart-collaterals{
    float:right;
    width:34%;
    margin:0;
  }
  .extract-lab-summary{
    position:sticky;
    top:var(--el-s5);
  }
  .extract-lab-summary,
  .woocommerce-cart .cart-collaterals .cart_totals{
    width:100%;
  }
  /* Clear the floats so the trust row (woocommerce_after_cart_table) and any
     following content sit below both columns. */
  .woocommerce-cart .woocommerce::after{
    content:"";
    display:table;
    clear:both;
  }
}
/* ===== /Coded cart template (T3) ===== */

/* ===== Coded checkout template (T4, 2026-05-23) =====
   Tight single column on mobile: collapsible "Order summary £X" bar at top,
   then Contact (email-first) -> Delivery -> Payment sections. Two-column on
   >=1024px: #customer_details LEFT, #order_review (summary + #payment +
   #place_order, kept together for PPCP) RIGHT in a sticky card. Matches
   .superpowers/brainstorm/.../checkout-mock.html (mobile) + desktop-mock.html
   (2nd block). Naming: .extract-lab-checkout*. Tokens only; mobile-first.
   Prices stay mono-emerald via the global .woocommerce-Price-amount rules.
   This supersedes/extends the T5 checkout CSS above where they overlap, but the
   T5-2 steps bar and T5-3 secure badge styling are kept (the hooks still fire).

   The T5-1 field-border rule (.woocommerce-checkout .form-row input.input-text…)
   already gives every field the brand 48px bordered look; here we only adjust
   layout (sections, two-col rows) and desktop sizing. */

/* --- Page scaffold: suppress the duplicate "Checkout" page title (mirrors
   cart). The theme renders .page-header > h1.entry-title "Checkout"; the mock
   has no big H1. --- */
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .entry-title{
  display:none;
}

/* The whole checkout form is a tight column on mobile. */
.woocommerce-checkout .extract-lab-checkout{
  margin:0;
}

/* --- Sections (Contact / Delivery / Payment) + uppercase muted labels --- */
.extract-lab-checkout__section{
  margin:0 0 var(--el-s5);
}
.extract-lab-checkout__sech{
  font-family:var(--el-font-heading);
  font-weight:600;
  font-size:0.8125rem;                  /* 13px */
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--el-muted);
  margin:0 0 var(--el-s3);
}

/* Field labels above inputs, brand body font. */
.extract-lab-checkout .form-row label,
.extract-lab-checkout__section label{
  font-family:var(--el-font-body);
  font-size:0.8125rem;                  /* 13px */
  font-weight:600;
  color:var(--el-text);
  margin:0 0 var(--el-s1);
  display:block;
}
/* Checkbox / radio labels sit inline next to their control, not block. */
.extract-lab-checkout .form-row label.checkbox,
.extract-lab-checkout .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:var(--el-s2);
  font-weight:400;
}
.extract-lab-checkout .form-row{
  margin:0 0 var(--el-s4);
}

/* --- Two-column rows (First/Last, Town/Postcode). WooCommerce already emits
   form-row-first / form-row-last on the relevant fields; flow them side by side
   on a flex wrapper at all widths >=480px. We use WC's own width classes. --- */
.extract-lab-checkout__section .form-row-first,
.extract-lab-checkout__section .form-row-last{
  width:calc(50% - (var(--el-s3) / 2));
  display:inline-block;
  vertical-align:top;
}
.extract-lab-checkout__section .form-row-first{
  margin-right:var(--el-s3);
}
@media (max-width:479px){
  .extract-lab-checkout__section .form-row-first,
  .extract-lab-checkout__section .form-row-last{
    width:100%;
    margin-right:0;
  }
}

/* --- Billing-different toggle (form-shipping.php) --- */
.extract-lab-checkout__ship-toggle{
  margin:var(--el-s2) 0 var(--el-s4);
  font-size:0.8125rem;
  font-weight:400;
}
.extract-lab-checkout__ship-toggle .extract-lab-checkout__toggle{
  display:flex;
  align-items:center;
  gap:var(--el-s2);
  margin:0;
  font-family:var(--el-font-body);
  font-size:0.8125rem;
  font-weight:400;
  color:var(--el-text);
  cursor:pointer;
}
.extract-lab-checkout__ship-toggle input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--el-accent);
  flex:0 0 auto;
}

/* --- Quiet "Add delivery notes (optional)" disclosure --- */
.extract-lab-checkout__notes-toggle{
  display:inline-block;
  margin:var(--el-s2) 0 var(--el-s4);
  padding:0;
  background:none;
  border:none;
  color:var(--el-accent);
  font-family:var(--el-font-body);
  font-size:0.8125rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.extract-lab-checkout__notes-toggle::before{
  content:"+ ";
}
.extract-lab-checkout__notes-toggle[aria-expanded="true"]::before{
  content:"\2212 "; /* minus */
}
.extract-lab-checkout__notes-toggle:hover{
  color:var(--el-accent-hover);
}
.extract-lab-checkout__notes[hidden]{
  display:none;
}

/* --- Order review wrapper (Payment / summary unit) --- */
.extract-lab-checkout__review-heading{
  /* "Your order" — kept for a11y/AJAX target but visually folded into the
     summary card; the summary-table renders its own "Order summary" title. */
  position:absolute;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

/* --- Collapsible "Order summary £X" bar (mobile) --- */
.extract-lab-checkout__summary-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin:0 0 var(--el-s4);
  padding:var(--el-s4);
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  font-family:var(--el-font-body);
  font-size:var(--el-text-sm);
  cursor:pointer;
  text-align:left;
}
.extract-lab-checkout__summary-bar:focus-visible{
  outline:none;
  box-shadow:var(--el-focus);
}
.extract-lab-checkout__summary-bar-label{
  color:var(--el-accent);
  font-weight:600;
}
.extract-lab-checkout__summary-bar-label::before{
  content:"\25BE\00A0"; /* ▾ */
  display:inline-block;
  transition:transform var(--el-transition);
}
.extract-lab-checkout__summary-bar[aria-expanded="true"] .extract-lab-checkout__summary-bar-label::before{
  transform:rotate(180deg);
}
.extract-lab-checkout__summary-bar-total{
  font-family:var(--el-font-mono);
  font-weight:500;
  color:var(--el-accent);
}
/* Mobile: collapse ONLY the order-summary line-items/totals (#extract-lab-checkout-
   summary, inside #order_review); the bar expands it. #payment and #place_order
   (also inside #order_review, rendered by payment.php) are NEVER hidden here — they
   must always be visible so customers can pay. The toggle controls the summary
   wrapper only, matching aria-controls="extract-lab-checkout-summary". */
@media (max-width:1023px){
  #extract-lab-checkout-summary{
    display:none;
  }
  .extract-lab-checkout__review.extract-lab-checkout--summary-open #extract-lab-checkout-summary{
    display:table;
  }
}

/* --- Order summary table (restyled review-order.php) --- */
.extract-lab-checkout__summary-title{
  font-family:var(--el-font-heading);
  font-weight:600;
  font-size:var(--el-text-md);          /* 18px */
  letter-spacing:var(--el-tracking-heading);
  margin:0 0 var(--el-s3);
}
/* Mobile: the summary BAR is the "Order summary" label, so hide the in-card
   title to avoid two "Order summary" headings stacked together when expanded.
   Desktop has no bar, so the title is kept there (see >=1024px block). */
@media (max-width:1023px){
  .extract-lab-checkout__summary-title{
    display:none;
  }
}
.woocommerce-checkout .extract-lab-checkout__summary-table,
.woocommerce .extract-lab-checkout__summary-table.shop_table{
  width:100%;
  border:none;
  border-collapse:collapse;
  margin:0;
}
/* Drop the table's "Product / Subtotal" head — the line rows speak for themselves. */
.extract-lab-checkout__summary-table thead{
  display:none;
}
.extract-lab-checkout__summary-table tbody tr,
.extract-lab-checkout__summary-table tfoot tr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--el-s3);
}
.extract-lab-checkout__summary-table th,
.extract-lab-checkout__summary-table td{
  border:none;
  padding:var(--el-s2) 0;
  font-family:var(--el-font-body);
  font-size:0.875rem;                   /* 14px */
  font-weight:400;
  text-align:left;
  background:transparent;
}
.extract-lab-checkout__summary-table td{
  text-align:right;
}
.extract-lab-checkout__summary-table .product-name{
  flex:1 1 auto;
  min-width:0;
}
.extract-lab-checkout__summary-table tbody tr{
  border-bottom:1px solid var(--el-border);
}
.extract-lab-checkout__summary-table tfoot{
  display:block;
  margin-top:var(--el-s2);
}
.extract-lab-checkout__summary-table tfoot tr.order-total{
  border-top:1px solid var(--el-border);
  margin-top:var(--el-s2);
  padding-top:var(--el-s3);
}
.extract-lab-checkout__summary-table tfoot tr.order-total th,
.extract-lab-checkout__summary-table tfoot tr.order-total td{
  font-weight:600;
  font-size:var(--el-text-sm);          /* 16px */
}

/* --- Payment options (the .wc_payment_methods loop, payment-method.php) ---
   Item C (final QA): PayPal/PPCP is the ONLY gateway, so the radio + "PayPal"
   method label + the description-only .payment_box add nothing but visual noise
   and a dead bordered box. Strip ALL the chrome so only the functional PPCP smart
   button + the place-order area remain.
   CRITICAL for PPCP: #payment, .wc_payment_methods, the gateway <li> and
   #place_order MUST stay in the DOM (PPCP reads them + the checked radio value).
   We only neutralise visuals: card border/background gone, radio/label/box
   visually hidden (display:none keeps them submittable + JS-readable). --- */
.extract-lab-checkout__payment .wc_payment_methods{
  list-style:none;
  margin:0;
  padding:0;
  border:0;                             /* no bordered card */
  border-radius:0;
  background:transparent;
}
.extract-lab-checkout__payopt{
  display:block;
  margin:0;
  padding:0;
  border:0;                             /* no row divider / box line */
}
/* Single gateway: the radio + "PayPal" label + description box are redundant.
   Hidden (not removed): the checked radio still tells PPCP the gateway. */
.extract-lab-checkout__payment .wc_payment_methods .extract-lab-checkout__payopt input[type="radio"],
.extract-lab-checkout__payment .wc_payment_methods .extract-lab-checkout__payopt > label[for="payment_method_ppcp-gateway"],
.extract-lab-checkout__payment .wc_payment_methods .extract-lab-checkout__payopt > label[for^="payment_method_ppcp"],
.extract-lab-checkout__payment .wc_payment_methods .extract-lab-checkout__payopt > label[for^="payment_method_paypal"]{
  display:none!important;
}
/* The .payment_box here holds only "Pay via PayPal." (PPCP smart buttons render
   in the #place_order / #ppc-button-* area, not here), so neutralise it entirely:
   no border/background/triangle, no padding, hidden text. Stays in DOM. */
.extract-lab-checkout__payopt .payment_box,
.woocommerce-checkout .extract-lab-checkout__payopt .payment_box{
  margin:0;
  padding:0;
  border:0!important;                   /* kill the leftover line */
  background:transparent!important;     /* kill the grey bubble */
}
.extract-lab-checkout__payopt .payment_box::before{
  display:none!important;               /* kill the broken triangle arrow */
  content:none!important;
}
.extract-lab-checkout__payopt .payment_box > p{
  display:none;                         /* "Pay via PayPal." is redundant noise */
}

/* --- Item 8 (image 14): the checkout "Have a coupon?" toggle. WooCommerce
   renders it as a full-width bordered .woocommerce-info notice with a top accent
   bar. Reduce it to a quiet one-line link: no box, no border, muted lead-in
   text + emerald "enter your code" link. Scoped to the coupon toggle so other
   .woocommerce-info notices keep their normal treatment. --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  margin:0 0 var(--el-s4);
  padding:0;
  border:none!important;
  background:transparent!important;
  font-size:0.8125rem;                  /* 13px */
  color:var(--el-muted);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{
  display:none!important;               /* WC's info icon / accent */
  content:none!important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon{
  color:var(--el-accent);
  font-weight:600;
  text-decoration:underline;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover{
  color:var(--el-accent-hover);
}
/* The expanded coupon form (.checkout_coupon), quiet, no big bordered box. */
.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon{
  border:1px solid var(--el-border);
  border-radius:var(--el-radius);
  background:var(--el-white);
  padding:var(--el-s4);
  margin:0 0 var(--el-s4);
}

/* --- Item 11 (image 18): required-field labels must never render full-red.
   WooCommerce colours labels red on invalid/required fields. Force ALL checkout
   labels to dark text; only the required asterisk (abbr.required) keeps an
   accent colour, muted so it's a hint not an alarm. --- */
.woocommerce-checkout form .form-row label,
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row.woocommerce-invalid-required-field label,
.woocommerce-checkout .woocommerce-invalid label,
.woocommerce-checkout .woocommerce-invalid-required-field label{
  color:var(--el-text)!important;
}
.woocommerce-checkout form .form-row label .required,
.woocommerce-checkout form .form-row abbr.required,
.woocommerce form .form-row abbr.required{
  color:var(--el-muted)!important;
  border:none;
  text-decoration:none;
}

/* --- Item 12 (image 19): the "+ Add delivery notes (optional)" toggle gets the
   same parent-reset pink (#c36) button background on hover. Force transparent at
   rest AND hover/focus, brand text. (Shares intent with the cart coupon toggle
   in item 7.) --- */
.extract-lab-checkout__notes-toggle:hover,
.extract-lab-checkout__notes-toggle:focus,
.extract-lab-checkout__notes-toggle:focus-visible{
  background:transparent;
  color:var(--el-accent-hover);
  text-decoration:underline;
}

/* --- Item 10 (image 16): checkout order-summary rows must be transparent at
   rest AND on hover (WC/parent paint a grey first-row + hover background), and
   row separators are the single full-width border-bottom already on tbody tr. --- */
.extract-lab-checkout__summary-table tr,
.extract-lab-checkout__summary-table tr:hover,
.extract-lab-checkout__summary-table th,
.extract-lab-checkout__summary-table td,
.extract-lab-checkout__summary-table tr:hover th,
.extract-lab-checkout__summary-table tr:hover td,
.woocommerce-checkout .extract-lab-checkout__summary-table tr:hover td{
  background:transparent!important;
  background-color:transparent!important;
}

/* --- Single primary "Pay £X" CTA = WC #place_order. Full width, ~52px. The
   doubled #place_order lifts specificity to beat the global button rules. --- */
.extract-lab-checkout__payment .place-order{
  margin:var(--el-s4) 0 0;
  padding:0;
}
.extract-lab-checkout #place_order.place_order,
.extract-lab-checkout__payment #place_order,
.woocommerce-checkout #place_order#place_order{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:54px;
  min-height:54px;
  margin:0;
  background:var(--el-accent);
  border:1px solid var(--el-accent);
  border-radius:var(--el-radius);
  color:var(--el-white);
  font-family:var(--el-font-heading);
  font-size:var(--el-text-sm);          /* 16px */
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
  transition:background var(--el-transition),border-color var(--el-transition);
}
.woocommerce-checkout #place_order#place_order:hover{
  background:var(--el-accent-hover);
  border-color:var(--el-accent-hover);
}

/* Terms / privacy text above the CTA — quiet. */
.extract-lab-checkout__payment .woocommerce-terms-and-conditions-wrapper{
  font-size:0.8125rem;
  color:var(--el-muted);
  margin:0 0 var(--el-s3);
}

/* --- Desktop reflow: two columns, sticky order_review (>=1024px) ---
   #customer_details (Contact + Delivery) LEFT; #order_review (summary +
   #payment + #place_order, kept intact for PPCP) RIGHT in a sticky card. --- */
@media (min-width:1024px){
  .extract-lab-checkout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:var(--el-s6);
    align-items:start;
  }
  .extract-lab-checkout__details{
    grid-column:1;
    display:block;          /* override WC's col2-set float */
    width:auto;
    float:none;
  }
  .extract-lab-checkout__details .col-1,
  .extract-lab-checkout__details .col-2{
    width:auto;
    float:none;
  }
  .extract-lab-checkout__review{
    grid-column:2;
    grid-row:1 / span 2;    /* allow the review to sit alongside both detail cols */
    position:sticky;
    top:var(--el-s5);
    background:var(--el-white);
    border:1px solid var(--el-border);
    border-radius:var(--el-radius);
    padding:var(--el-s5);
  }
  /* On desktop the collapsible bar is redundant — the card is always open, so
     the single .extract-lab-checkout__summary-title heading is the label. Force
     the bar hidden (!important) so it can't double up with the title. */
  .extract-lab-checkout__summary-bar{
    display:none!important;
  }
  .extract-lab-checkout__order-review{
    display:block;
  }
  /* Slightly tighter fields on desktop (mock = 46px). */
  .woocommerce-checkout .extract-lab-checkout .form-row input.input-text,
  .woocommerce-checkout .extract-lab-checkout .form-row select,
  .woocommerce-checkout .extract-lab-checkout .form-row textarea{
    min-height:46px;
  }
}

/* ===== /Coded checkout template (T4) ===== */

/* ===== Home / product consistency (T5 funnel) ===== */
/* Home (front-page.php) already inherits the design system — audited clean.
   The product page is Elementor + WooCommerce, where two surfaces still leak
   the Elementor kit's Poppins past the global enforcement layer's
   container/form-field scope: the WooCommerce Product Content (description)
   widget's text, and the variation form label. Force brand body font on those
   specific text nodes. Headings inside keep the h1–h6 heading rule. */
.elementor-widget-woocommerce-product-content,
.elementor-widget-woocommerce-product-content .elementor-widget-container,
.elementor-widget-woocommerce-product-content p,
.elementor-widget-woocommerce-product-content strong,
.elementor-widget-woocommerce-product-content em,
.elementor-widget-woocommerce-product-content span,
.elementor-widget-woocommerce-product-content li,
.elementor-widget-woocommerce-product-content a,
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart label{
  font-family:var(--el-font-body)!important;
}

/* Primary add-to-cart CTA: lift to a generous tap target (the 44px+ mobile
   guideline) so it matches the funnel's button sizing rather than WC's compact
   default (was 38px). */
.woocommerce div.product form.cart .single_add_to_cart_button{
  min-height:48px!important;
  padding-top:.75rem!important;
  padding-bottom:.75rem!important;
}
/* ===== /Home / product consistency (T5 funnel) ===== */

/* ===== Design-system enforcement (global) ===== */
/* Forces brand fonts, normalises WC/Elementor buttons, and fixes the
   logo 0×0 collapse on Elementor-canvas pages.
   Scoped to known containers — no blanket * rule. */

/* ----- 1. Global typography ------------------------------------------------ */
/* Override Elementor kit font (Poppins) and the system font stack across all
   WooCommerce + Elementor surfaces. Body/form-field scope only — not *
   Includes legacy WC table cells (th/td) and bare links (a), which inherit
   Poppins because they sit outside the container/form-field scope above.
   Prices stay mono: .woocommerce-Price-amount has its own directly-matching
   rule on the price span, which beats any font inherited from the td. */
body,
.elementor-page,
.woocommerce,
.woocommerce-page,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce button,
.woocommerce th,
.woocommerce td,
.woocommerce a,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error{
  font-family:var(--el-font-body)!important;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--el-font-heading)!important;
}

/* Mono for all price amounts */
.woocommerce-Price-amount,
.woocommerce-Price-amount *,
.price .amount{
  font-family:var(--el-font-mono)!important;
}

/* ----- 2. Normalise WC / Elementor buttons --------------------------------- */
/* General WC .button + Elementor button primitives */
.woocommerce .button,
.wp-element-button,
.elementor-button,
.elementor-button-wrapper .elementor-button{
  font-family:var(--el-font-heading)!important;
  font-size:var(--el-text-xs)!important; /* 14px */
  font-weight:600!important;
  border-radius:var(--el-radius)!important;
  padding:.625rem 1rem!important;
  min-height:36px!important;
  line-height:1.2!important;
}

/* Coupon apply button — the main offender (was 28px Poppins).
   Neutral styling: not a primary action, just a utility trigger. */
.woocommerce [name="apply_coupon"],
.woocommerce .coupon [name="apply_coupon"],
.cart .coupon [name="apply_coupon"]{
  font-family:var(--el-font-heading)!important;
  font-size:var(--el-text-xs)!important; /* 14px — kill the 28px */
  font-weight:600!important;
  border-radius:var(--el-radius)!important;
  padding:.5rem .875rem!important;
  min-height:36px!important;
  line-height:1.2!important;
  /* Neutral (secondary) styling — not a primary CTA */
  background:transparent!important;
  border:1px solid var(--el-border)!important;
  color:var(--el-text)!important;
}
.woocommerce [name="apply_coupon"]:hover,
.woocommerce .coupon [name="apply_coupon"]:hover,
.cart .coupon [name="apply_coupon"]:hover{
  border-color:var(--el-accent)!important;
  color:var(--el-accent)!important;
}

/* ----- 3. Logo fix — 0×0 collapse on Elementor-canvas pages --------------- */
/* Elementor canvas strips many theme styles; force explicit dimensions.
   Unscoped so it fires regardless of which wrapper Elementor uses. */
.extract-lab-logo__img{
  height:32px!important;
  width:auto!important;
  display:inline-block!important;
}
@media(max-width:767px){
  .extract-lab-logo__img{
    height:26px!important;
  }
}
/* ===== Content-page hero banners, cap consistently (client review #13) =====
   Several content pages (About, Contact, Refund/Returns, Terms/Privacy,
   Shipping, plus FAQ/Cookies/SDS where present) open with a full-viewport
   Elementor hero: the first top-level container (.e-parent.e-con, the green-leaf
   banner) whose generated per-element CSS sets min-height:100vh. Generalise the
   About fix to ALL content pages by an explicit page-id allowlist + the shared
   "first top-level container" selector (.e-parent.e-con:first-child). This does
   NOT depend on each page's per-element id (which varies between pages, and is
   even shared by some). Cap to ~360px desktop / 280px mobile, content centred.

   SAFETY: the allowlist deliberately EXCLUDES the funnel. Home uses
   front-page.php (no Elementor doc), and cart (108) / checkout (112) / product
   pages are not listed, so this rule can never touch them. Pages with no
   .e-parent.e-con hero (FAQ/Cookies/SDS render a plain template) simply match
   nothing and are unaffected. Page IDs from `wp post list --post_type=page`. */
body.page-id-89  .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-81  .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-614 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-104 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-624 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-2743 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-2744 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-2745 .elementor > .elementor-element.e-parent.e-con:first-child,
body.page-id-3   .elementor > .elementor-element.e-parent.e-con:first-child{
  min-height:auto!important;
  max-height:360px!important;
  height:auto!important;
  justify-content:center!important;   /* flex: vertically centre the content */
}
@media (max-width:767px){
  body.page-id-89  .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-81  .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-614 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-104 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-624 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-2743 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-2744 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-2745 .elementor > .elementor-element.e-parent.e-con:first-child,
  body.page-id-3   .elementor > .elementor-element.e-parent.e-con:first-child{
    max-height:280px!important;
  }
}
/* ===== /Content-page hero banners ===== */

/* ===== Contact form — rebrand to the design system (client review #10) =====
   The contact form is an Elementor Form widget (.elementor-form), NOT WPForms
   as the brief assumed. The Send button inherits the Elementor kit's lime/olive
   button colour and the fields look generic. Restyle to brand: filled-emerald
   Send button, brand-bordered 48px inputs (Inter), heading/body brand fonts.
   Scoped to the contact form widget (.elementor-element-feee5af) so other
   Elementor forms/buttons across the site are not affected. */
.elementor-element-feee5af .elementor-field-textual{
  width:100%;
  min-height:var(--el-field-min);            /* 48px */
  padding:var(--el-s3) var(--el-s4);
  font-family:var(--el-font-body)!important; /* Inter — beat the kit font */
  font-size:var(--el-text-sm);               /* 16px, no iOS zoom */
  color:var(--el-text);
  background-color:var(--el-white);
  border:1px solid var(--el-border)!important;
  border-radius:var(--el-radius)!important;
  box-shadow:none!important;
  transition:border-color var(--el-transition),box-shadow var(--el-transition);
}
.elementor-element-feee5af textarea.elementor-field-textual{
  min-height:120px;
  resize:vertical;
}
.elementor-element-feee5af .elementor-field-textual:focus{
  outline:none;
  border-color:var(--el-accent)!important;
  box-shadow:var(--el-focus)!important;
}
.elementor-element-feee5af .elementor-field-label{
  font-family:var(--el-font-body)!important;
  font-weight:600;
  color:var(--el-text);
}
/* Send button — filled emerald, 48px, IBM Plex Sans, 2px radius (kill the lime). */
.elementor-element-feee5af .elementor-button,
.elementor-element-feee5af button[type="submit"].elementor-button{
  background-color:var(--el-accent)!important;
  border:1px solid var(--el-accent)!important;
  color:var(--el-white)!important;
  min-height:var(--el-field-min)!important;  /* 48px */
  padding:var(--el-s3) var(--el-s6)!important;
  font-family:var(--el-font-heading)!important;
  font-size:var(--el-text-sm)!important;
  font-weight:600!important;
  border-radius:var(--el-radius)!important;
  box-shadow:none!important;
  transition:background-color var(--el-transition),border-color var(--el-transition);
}
.elementor-element-feee5af .elementor-button:hover,
.elementor-element-feee5af button[type="submit"].elementor-button:hover{
  background-color:var(--el-accent-hover)!important;
  border-color:var(--el-accent-hover)!important;
  color:var(--el-white)!important;
}
.elementor-element-feee5af .elementor-button:focus-visible{
  outline:none;
  box-shadow:var(--el-focus)!important;
}
/* ===== /Contact form ===== */

/* ===== /Design-system enforcement (global) ===== */

/* =====================================================================
   Round 3 (client review) — cart/checkout notice + payment + summary fixes
   Appended last so single-class WC notice rules here win the colour ties
   against the parent Hello reset and WooCommerce defaults.
   ===================================================================== */

/* --- Item 2: cart "removed / empty" WooCommerce notices ---
   WC's default .woocommerce-message / .woocommerce-info / .cart-empty carry a
   thick green left accent bar, a green box border and a stray leading ::before
   icon; the "Undo?" restore link renders lime; and "Return to shop" inherits a
   green bg with red/unreadable text. Reduce all to the design system: thin 1px
   border, no accent bar, no stray icon, emerald links, proper primary button. */
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info,
.woocommerce .cart-empty,
.woocommerce-page .cart-empty,
.woocommerce-cart .cart-empty,
.woocommerce .wc-empty-cart-message,
.woocommerce-page .wc-empty-cart-message{
  border:1px solid var(--el-border)!important;
  border-left-width:1px!important;          /* kill the thick green accent bar */
  border-radius:var(--el-radius);
  background:var(--el-white)!important;
  color:var(--el-text);
  padding:var(--el-s4) var(--el-s5);
  font-family:var(--el-font-body);
  font-size:var(--el-text-sm);
  line-height:var(--el-leading-body);
  list-style:none;
}
/* The cart "…removed. Undo?" message is a .woocommerce-message; pin its border
   to thin neutral too (the F6 success-notice rule above keeps the emerald 1px
   border for the add-to-basket case, which is fine — this only neutralises the
   thick left accent bar that WC layers on). */
.woocommerce-cart .woocommerce-message{
  border-left-width:1px!important;
}
/* Remove the stray leading icon on every WC cart notice. */
.woocommerce .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce .cart-empty::before,
.woocommerce-page .cart-empty::before,
.woocommerce-cart .cart-empty::before,
.woocommerce .wc-empty-cart-message::before,
.woocommerce-page .wc-empty-cart-message::before{
  content:none!important;
  display:none!important;
}
/* "Undo?" restore link + any WC notice link → emerald (not lime). */
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a,
.woocommerce-message a.restore-item,
.woocommerce .woocommerce-message a.restore-item{
  color:var(--el-accent)!important;
  text-decoration:underline;
}
.woocommerce .woocommerce-message a:hover,
.woocommerce .woocommerce-info a:hover,
.woocommerce-message a.restore-item:hover{
  color:var(--el-accent-hover)!important;
}
/* "Return to shop" button: force proper primary (emerald bg, white text).
   The red/unreadable text is the parent reset / WC default — pin white. */
.woocommerce .return-to-shop .button,
.woocommerce-page .return-to-shop .button,
.woocommerce .wc-empty-cart-message + p .button,
.woocommerce a.button.wc-backward{
  background:var(--el-accent)!important;
  background-color:var(--el-accent)!important;
  border:1px solid var(--el-accent)!important;
  border-radius:var(--el-radius)!important;
  color:var(--el-white)!important;
  font-family:var(--el-font-heading)!important;
  font-weight:600!important;
}
.woocommerce .return-to-shop .button:hover,
.woocommerce-page .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover{
  background:var(--el-accent-hover)!important;
  background-color:var(--el-accent-hover)!important;
  border-color:var(--el-accent-hover)!important;
  color:var(--el-white)!important;
}

/* --- Item 4: DEFINITIVE summary-table border fix (cart AND checkout) ---
   WC ships these tables with border-collapse:separate + border-spacing and a
   per-cell border-top, so each cell draws its own short segment with a gap in
   the middle ("partial lines"). Force collapse + zero spacing, strip ALL
   per-cell borders, and draw row separators as ONE full-width border-bottom on
   each row. Covers the cart totals, the checkout review table, and the coded
   summary tables (belt-and-braces over the per-template rules above). No cell
   background colours, none on :hover. */
.woocommerce .cart_totals table,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce table.shop_table.extract-lab-summary__table,
.woocommerce table.shop_table.extract-lab-checkout__summary-table,
.extract-lab-summary__table,
.extract-lab-checkout__summary-table{
  border-collapse:collapse!important;
  border-spacing:0!important;
  width:100%;
  border:none!important;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce table.shop_table.extract-lab-summary__table th,
.woocommerce table.shop_table.extract-lab-summary__table td,
.woocommerce table.shop_table.extract-lab-checkout__summary-table th,
.woocommerce table.shop_table.extract-lab-checkout__summary-table td{
  border:none!important;            /* kill every partial per-cell segment */
  background:transparent!important;
  background-color:transparent!important;
}
.woocommerce .cart_totals table th:hover,
.woocommerce .cart_totals table td:hover,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr:hover th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr:hover td{
  background:transparent!important;
  background-color:transparent!important;
}
/* Single full-width 1px separator per row (not per cell). */
.woocommerce .cart_totals table tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr{
  border-bottom:1px solid var(--el-border)!important;
}
.woocommerce .cart_totals table tr:last-child{
  border-bottom:none!important;
}

/* --- Item 5: checkout PayPal payment box — clean leftover grey + dead space ---
   Strip the grey panels WC paints across the payment block, remove the
   .payment_box arrow ::before, and collapse the empty box so the single PayPal
   method reads as a tidy block (not a broken grey panel). PPCP smart button +
   place-order untouched. */
.woocommerce-checkout #payment,
.woocommerce-checkout ul.payment_methods,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout .payment_box{
  background:transparent!important;
  background-color:transparent!important;
}
.woocommerce-checkout #payment .payment_box::before,
.woocommerce-checkout .payment_box::before{
  content:none!important;
  display:none!important;            /* kill the grey speech-bubble arrow */
}
/* Hide the redundant "Pay via PayPal." description; collapse empty padding so a
   single PayPal method doesn't leave a dead grey gap below the label. */
.woocommerce-checkout .payment_box.payment_method_ppcp-gateway > p:first-child,
.woocommerce-checkout .payment_box.payment_method_paypal > p:first-child{
  display:none!important;
}
.woocommerce-checkout #payment .payment_box{
  margin:0!important;
  padding:0!important;
}
.woocommerce-checkout #payment .payment_box:empty{
  display:none!important;            /* fully collapse when PPCP renders nothing */
}

/* --- Item 6: checkout coupon — subtle focus + compact quiet form ---
   The expanded coupon input showed a heavy thick green focus ring. Replace with
   a subtle 1px accent border + the standard --el-focus ring, and tighten the
   expanded form so the whole coupon area stays quiet/secondary. */
.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon{
  padding:var(--el-s3) var(--el-s4)!important;   /* compact */
}
.woocommerce-checkout form.checkout_coupon .input-text,
.woocommerce-checkout form.checkout_coupon input#coupon_code{
  min-height:40px;
  border:1px solid var(--el-border)!important;
  border-radius:var(--el-radius)!important;
  box-shadow:none!important;                     /* no thick green ring at rest */
  padding:var(--el-s2) var(--el-s3)!important;
  font-size:0.875rem;
}
.woocommerce-checkout form.checkout_coupon .input-text:focus,
.woocommerce-checkout form.checkout_coupon input#coupon_code:focus{
  outline:none;
  border-color:var(--el-accent)!important;
  box-shadow:var(--el-focus)!important;          /* standard subtle ring, not 3px+ box */
}
/* Compact "Apply coupon" button, consistent with the utility coupon button. */
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"],
.woocommerce-checkout form.checkout_coupon .button{
  min-height:40px!important;
  padding:.5rem .875rem!important;
  font-size:var(--el-text-xs)!important;
}
/* ===== /Round 3 (client review) ===== */

/* ===== Final QA (2026-05-24): kill the Elementor "Poppins" font leak at root =====
   Elementor's global kit (post-33) assigns "Poppins" to ALL four global typography
   roles (primary/secondary/text/accent) and several pages emit per-element CSS with
   a literal font-family:"Poppins",Sans-serif on headings/products. None of that is
   in the brand system. Fix at root by repointing the global typography variables to
   the brand fonts (this loads after Elementor CSS, so the vars win wherever they are
   consumed) and forcing brand fonts on the Elementor element types that carry the
   literal Poppins. Headings/buttons => IBM Plex Sans; body/text => Inter. Prices stay
   mono via their own rules (more specific .woocommerce-Price-amount selectors). */
:root,
.elementor-kit-33{
  --e-global-typography-primary-font-family:var(--el-font-heading);
  --e-global-typography-secondary-font-family:var(--el-font-heading);
  --e-global-typography-text-font-family:var(--el-font-body);
  --e-global-typography-accent-font-family:var(--el-font-heading);
}
/* Per-element literal Poppins lives on heading widgets; force the brand heading
   font. (The .elementor-button primitives above already pin --el-font-heading.) */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title{
  font-family:var(--el-font-heading)!important;
}
/* Generic Elementor text/section widgets that inherited Poppins as body text. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li{
  font-family:var(--el-font-body)!important;
}

/* About page (page-id-89): the two "Get in touch" Elementor CTAs were styled
   black/white (one black-on-white, one white-on-black), off the single-emerald
   brand system. Both link to the contact page, so make both the brand primary
   (emerald fill, white text, 2px). Scoped to the two element IDs so no other
   Elementor button is touched. */
.elementor-page-89 .elementor-element-5300db48 .elementor-button,
.elementor-page-89 .elementor-element-e6e9b66 .elementor-button{
  background-color:var(--el-accent)!important;
  border:1px solid var(--el-accent)!important;
  color:var(--el-white)!important;
  border-radius:var(--el-radius)!important;
}
.elementor-page-89 .elementor-element-5300db48 .elementor-button:hover,
.elementor-page-89 .elementor-element-e6e9b66 .elementor-button:hover{
  background-color:var(--el-accent-hover)!important;
  border-color:var(--el-accent-hover)!important;
  color:var(--el-white)!important;
}

/* ===========================================================================
   Phase 1 — converted content pages (about / refund / shipping policy)
   Plain WordPress content lifted out of Elementor into <div class="extract-lab-page">.
   Mobile-first; tokens only; design-system compliant (sharp corners, no shadows).
   =========================================================================== */
.extract-lab-page{
  max-width:var(--el-max);
  margin:0 auto;
  padding:var(--el-s6) var(--el-pad-mobile) var(--el-s8);
}
.extract-lab-page h2{
  font-family:var(--el-font-heading);
  font-weight:600;
  letter-spacing:var(--el-tracking-heading);
  line-height:1.2;
  color:var(--el-text);
  font-size:var(--el-text-xl);
  margin:var(--el-s7) 0 var(--el-s3);
}
.extract-lab-page > h2:first-child{ margin-top:0; }
.extract-lab-page p{
  font-size:var(--el-text-md);
  line-height:var(--el-leading-body);
  color:var(--el-text);
  margin:0 0 var(--el-s4);
  max-width:68ch;
}
.extract-lab-page ul,
.extract-lab-page ol{
  margin:0 0 var(--el-s4);
  padding-left:var(--el-s5);
  line-height:var(--el-leading-body);
}
.extract-lab-page li{ margin:0 0 var(--el-s2); }
.extract-lab-page a:not(.extract-lab-btn){ color:var(--el-accent); }
.extract-lab-page__cta{ margin-top:var(--el-s5); }

@media(min-width:768px){
  .extract-lab-page{ padding:var(--el-s8) var(--el-pad-tablet) var(--el-s9); }
  .extract-lab-page h2{ font-size:var(--el-text-2xl); }
}
@media(min-width:1024px){
  .extract-lab-page{ padding:var(--el-s8) var(--el-pad-desktop) var(--el-s9); }
}