/*
Theme Name: The-Hub Marketplace (WoodMart)
Theme URI: https://the-hub.ke
Description: WoodMart child theme for the-hub.ke — carries marketplace/B2B components (buy box, B2B price, wishlist, checkout steps) onto the WoodMart premium theme.
Author: The-Hub Engineering
Template: woodmart
Version: 0.1.0
Requires PHP: 7.4
Text Domain: thehub-marketplace
*/

/* Design tokens inherited + marketplace-specific components */

/*
 * The-Hub Design System tokens, vendored verbatim into assets/ds/tokens/.
 * Import order follows the design system's own styles.css.
 *
 * tokens/base.css is deliberately NOT imported: it resets h1-h4 and anchor
 * defaults globally, which would fight WoodMart and WooCommerce. The theme
 * sets its own body font and background below.
 */
@import url("assets/ds/tokens/typography.css");
@import url("assets/ds/tokens/colors.css");
@import url("assets/ds/tokens/spacing.css");
@import url("assets/ds/tokens/radius.css");
@import url("assets/ds/tokens/elevation.css");
@import url("assets/ds/tokens/motion.css");

.thehub-b2b-price {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hub-hairline);
  border-radius: 8px;
  background: var(--hub-surface-well);
}
.thehub-b2b-price__label {
  color: var(--hub-blue-fg);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.thehub-b2b-price__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--hub-blue-fg);
}
.thehub-moq {
  color: var(--color-text-meta);
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0;
}
.thehub-moq ul { list-style: none; padding: 0; margin: 6px 0; }
.thehub-moq a { color: var(--hub-blue-fg); }

.thehub-rfq-cta { margin: 12px 0; }
.thehub-rfq-cta__button {
  background: var(--hub-surface-card) !important;
  border: 2px solid var(--hub-ink) !important;
  color: var(--hub-ink) !important;
  border-radius: 8px;
  font-weight: 600;
}
.thehub-rfq-cta__button:hover { background: var(--hub-ink) !important; color: var(--hub-ink-on-dark) !important; }

.thehub-buybox {
  border: 1px solid var(--hub-hairline);
  border-radius: 8px;
  padding: 16px;
  margin: 14px 0;
  background: var(--hub-surface-card);
  font-size: 14px;
}
.thehub-buybox__row { margin-bottom: 6px; }
.thehub-buybox__label { color: var(--color-text-meta); }
.thehub-buybox__stock--in { color: var(--hub-accent); font-weight: 700; }
.thehub-buybox__stock--out { color: var(--hub-red-fg); font-weight: 700; }
.thehub-buybox__secure { margin-top: 8px; font-size: 12px; color: var(--color-text-meta); }

.thehub-save-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  border: 1px solid var(--hub-border-control);
  border-radius: var(--radius-pill);
  background: var(--hub-surface-card);
  color: var(--color-text-meta);
  font-size: 13px;
  cursor: pointer;
}
.thehub-save-btn:hover { border-color: var(--hub-blue-fg); color: var(--hub-blue-fg); }
.thehub-save-btn.is-saved { background: var(--hub-surface-well); border-color: var(--hub-accent-pressed); color: var(--hub-accent-pressed); }

.thehub-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--hub-accent-bright); font-size: 13px; }
.thehub-stars svg { display: block; }
.thehub-stars__count { color: var(--hub-blue-fg); }

.thehub-onsale {
  background: var(--hub-accent);
  color: var(--hub-ink-on-dark);
  font-weight: 600;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
}

.thehub-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.thehub-steps__item { display: flex; align-items: center; }
.thehub-steps__item span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hub-surface-card);
  border: 1px solid var(--hub-hairline);
  color: var(--color-text-meta);
}
.thehub-steps__item.is-complete span { color: var(--hub-accent); border-color: var(--hub-accent); }
.thehub-steps__item.is-current span { background: var(--hub-ink); color: var(--hub-ink-on-dark); font-weight: 700; border-color: var(--hub-ink); }

.thehub-checkout-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--hub-surface-well);
  border: 1px solid var(--hub-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--hub-accent);
}

/*
 * Notices. The design system has no coloured left border, so a notice is a
 * tinted panel: the status ground with the matching status ink.
 */
.thehub-notice {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: var(--radius-well);
  font-size: 13.5px;
  line-height: 1.55;
}
.thehub-notice--success { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.thehub-notice--info { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.thehub-notice--waiting { background: var(--hub-amber-bg); color: var(--hub-amber-fg); }
.thehub-notice--error { background: var(--hub-red-bg); color: var(--hub-red-fg); }

.thehub-order-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

.thehub-recent { margin: 32px 0 24px; }
.thehub-recent h2 { font-size: 20px; margin-bottom: 12px; }

.thehub-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--hub-surface-card);
  color: var(--hub-ink);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(15, 17, 17, 0.12);
}
.thehub-skip-link:focus { left: 0; }

.thehub-bottomnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--hub-ink);
  justify-content: space-around;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 8px rgba(15, 17, 17, 0.25);
}
.thehub-bottomnav a {
  display: flex;
  flex-direction: column;
    align-items: center;
    gap: 2px;
    /* The design system sets a floor of 11.5px. These are mobile nav labels,
       which is exactly where small type is hardest to read. */
    font-size: 11.5px;
  color: var(--hub-bg);
  text-decoration: none;
  padding: 4px 10px;
  min-height: 44px;
}
.thehub-bottomnav__icon { font-size: 18px; display: inline-flex; }
.thehub-bottomnav a.is-active { color: var(--hub-ink-on-dark); }
.thehub-bottomnav a.is-active .thehub-bottomnav__icon { color: var(--hub-accent-on-dark); }
.thehub-bottomnav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
    background: var(--color-brand);
    color: var(--hub-ink-on-dark);
    font-size: 11.5px;
  font-weight: 700;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .thehub-bottomnav { display: flex; }
  .thehub-footer { padding-bottom: 64px; }
}

/* Focus ring.
 *
 * WoodMart's own reset sets `a:focus { outline: none }` (and the same on
 * hover/active), and its stylesheet loads after this one, so a bare
 * `a:focus-visible` never reached the screen: keyboard focus was invisible on
 * every link and on the shop controls. The `body` prefix raises specificity
 * above WoodMart's `a:focus` (0,1,2 over 0,1,1) without an !important, and still
 * matches only :focus-visible, so a pointer click shows no ring. The accent ring
 * measures about 5:1 on the page and 3.4:1 on the dark footer and chrome.
 *
 * The inputs need the ring declared !important: WoodMart suppresses them with
 * attribute selectors (`input[type="search"]:focus`, the quantity field) that
 * outrank any plain selector this theme can write. This overrides only a
 * suppressed focus indicator, which is the one case where it is the right tool. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible {
  outline: 2px solid var(--hub-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* B2B tier table (design reference) */
.thehub-price-source { font-size: 12px; }
.thehub-price-source code {
  background: var(--hub-surface-well);
  color: var(--hub-blue-fg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.thehub-tiers {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 6px;
  font-size: 13px;
}
.thehub-tiers th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-meta);
  padding: 6px 8px;
  border-bottom: 1px solid var(--hub-hairline);
}
.thehub-tiers td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hub-hairline);
}
.thehub-saving {
  display: inline-block;
  background: var(--hub-surface-well);
  color: var(--hub-accent-pressed);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
}

/* Seller card (SOLD BY) */
.thehub-soldby {
  margin: 20px 0;
  clear: both;
}
.thehub-soldby__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-meta);
  margin-bottom: 8px;
}
.thehub-soldby__card {
  border: 1px solid var(--hub-hairline);
  border-radius: 8px;
  padding: 16px;
  background: var(--hub-surface-card);
}
.thehub-soldby__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.thehub-soldby__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--hub-ink);
  color: var(--hub-ink-on-dark);
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}
.thehub-soldby__name {
  font-weight: 700;
  color: var(--hub-ink);
  text-decoration: none;
}
.thehub-soldby__name:hover { color: var(--hub-accent-pressed); }
.thehub-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hub-accent);
  font-weight: 600;
  font-size: 12px;
}
.thehub-soldby__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--hub-hairline);
  padding-top: 12px;
  font-size: 12px;
  color: var(--color-text-meta);
}
.thehub-soldby__stats li strong {
  display: block;
  font-size: 15px;
  color: var(--hub-ink);
}
.thehub-soldby__passport {
  display: inline-block;
  margin-top: 12px;
  color: var(--hub-blue-fg);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.thehub-soldby__passport:hover { color: var(--hub-accent-pressed); }

/* ===== Checkout (design reference) ===== */
.thehub-checkout { background: var(--hub-bg); }
.thehub-checkout__header {
  display: flex; align-items: center; gap: 28px;
  background: var(--hub-ink); color: var(--hub-ink-on-dark);
  padding: 0 40px; height: 64px;
}
.thehub-checkout__brand { display: flex; align-items: center; gap: 10px; }
.thehub-checkout__brand span {
  font-family: var(--font-sans); font-weight: 700; font-size: 18px; letter-spacing: 0.5px;
}
.thehub-checkout__title { font-size: 14px; font-weight: 600; margin-left: 8px; }
.thehub-checkout__steps { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-checkout__steps span { display: inline-flex; align-items: center; gap: 7px; }
.thehub-checkout__steps span.is-current { color: var(--hub-ink-on-dark); font-weight: 600; }
.thehub-checkout__stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--hub-accent); color: var(--hub-ink);
  border-radius: 50%; font-family: var(--font-mono); font-size: 11px;
}
.thehub-checkout__arrow { color: var(--color-text-meta); }

.thehub-checkout__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px; padding: 28px 40px 40px; align-items: start;
  max-width: 1440px; margin: 0 auto;
}
.thehub-checkout__basket { display: flex; flex-direction: column; gap: 18px; }
.thehub-checkout__rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }

/* A tinted panel, which is the design system's notice idiom. A coloured left
   border is explicitly not part of it: it reads as a third-party admin notice
   rather than as this product speaking. */
.thehub-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--hub-blue-bg); color: var(--hub-blue-fg);
  border: 1px solid var(--hub-blue-line);
  border-radius: var(--radius-panel); padding: 16px 20px;
}
.thehub-banner strong { font-size: 14px; font-weight: 600; display: block; color: inherit; }
/* No opacity on the body line: 0.86 blue on the blue ground measured 4.42:1,
   just under the 4.5 floor, and the hierarchy already comes from weight. */
.thehub-banner span { font-size: 12.5px; color: inherit; }

.thehub-vendorgroup { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; overflow: hidden; }
.thehub-vendorgroup__head {
  display: flex; align-items: center; gap: 12px; padding: 13px 20px;
  background: var(--hub-surface-well); border-bottom: 1px solid var(--hub-hairline);
}
.thehub-vendorgroup__dot {
    display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
    border: 1px solid var(--hub-hairline-strong); border-radius: 50%; font-size: 11.5px; color: var(--color-text-meta);
}
.thehub-vendorgroup__name { font-size: 13.5px; font-weight: 700; }
.thehub-vendorgroup__sub { font-family: var(--font-mono); font-size: 11px; color: var(--hub-ink-secondary); }
.thehub-vendorgroup__delivery { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-meta); }
.thehub-vendorgroup__subtotal {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #fbfcfb; border-top: 1px solid var(--hub-surface-field);
  font-size: 12.5px; color: var(--color-text-meta);
}
.thehub-vendorgroup__subtotal b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--hub-ink); }

.thehub-lineitem { display: flex; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--hub-surface-field); }
.thehub-lineitem__img { width: 72px; height: 72px; flex-shrink: 0; background: var(--hub-thumb-fill); border: 1px solid var(--hub-hairline); border-radius: 2px; display: flex; align-items: center; justify-content: center; }
.thehub-lineitem__img img { width: 100%; height: 100%; object-fit: contain; }
.thehub-lineitem__info { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 0; }
.thehub-lineitem__name { font-size: 14px; font-weight: 600; }
.thehub-lineitem__sku { font-family: var(--font-mono); font-size: 11.5px; color: var(--hub-ink-secondary); }
.thehub-lineitem__right { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.thehub-lineitem__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 120px; }
.thehub-lineitem__price b { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.thehub-lineitem__price span { font-family: var(--font-mono); font-size: 11.5px; color: var(--hub-ink-secondary); }

.thehub-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--color-text-meta); background: var(--hub-surface-field); padding: 3px 8px; border-radius: 2px;
}
.thehub-badge--blue { color: var(--hub-blue-fg); background: var(--hub-blue-bg); }

.thehub-qty { display: flex; align-items: stretch; border: 1px solid var(--hub-border-control); border-radius: var(--radius-control); height: var(--hit-target); }
.thehub-qty span { display: flex; align-items: center; justify-content: center; width: 40px; color: var(--color-text-meta); border-right: 1px solid var(--hub-border-control); }
.thehub-qty span:last-child { border-right: none; border-left: 1px solid var(--hub-border-control); }
.thehub-qty span:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: -2px; }
.thehub-qty b { display: flex; align-items: center; justify-content: center; width: 48px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }

.thehub-summary { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; padding: 20px; display: flex; flex-direction: column; gap: 13px; }
  .thehub-summary__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-text-meta); }
.thehub-summary__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--color-text-meta); }
.thehub-summary__row b { font-family: var(--font-mono); font-size: 13.5px; font-weight: 400; color: var(--hub-ink); }
.thehub-summary__row--total { border-top: 1px solid var(--hub-hairline); padding-top: 13px; font-size: 14px; font-weight: 700; color: var(--hub-ink); }
.thehub-summary__row--total b { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.thehub-summary__note { font-size: 11.5px; color: var(--hub-ink-secondary); line-height: 1.45; }

.thehub-paybox { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.thehub-paybox #payment, .thehub-paybox .woocommerce-checkout-payment { border: none; background: none; padding: 0; }
.thehub-paybox .wc_payment_methods { padding: 0; border: none; }
.thehub-paybox .wc_payment_method { border: 1px solid var(--hub-hairline); border-radius: 3px; margin-bottom: 10px; padding: 14px; }
.thehub-paybox .wc_payment_method > label { font-size: 13.5px; font-weight: 600; }
.thehub-paybox .payment_box { background: none; margin: 10px 0 0; padding: 0; }
.thehub-paybox #place_order {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; background: var(--hub-accent); color: var(--hub-ink-on-dark);
  font-size: 15px; font-weight: 700; border-radius: var(--radius-control); border: none;
}
.thehub-paybox #place_order:hover { background: var(--hub-accent-pressed); }

.thehub-checkout__fields { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; padding: 20px; }
.thehub-checkout__fields .form-row { margin-bottom: 14px; }
.thehub-checkout__fields label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }
.thehub-checkout__fields input, .thehub-checkout__fields select, .thehub-checkout__notes textarea {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--hub-border-control); border-radius: var(--radius-control); font-size: 14px;
}
.thehub-checkout__notes textarea { height: auto; padding: 10px 12px; }
.thehub-checkout__notes { margin-top: 6px; }
.thehub-checkout__notes label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }

@media (max-width: 960px) {
  .thehub-checkout__grid { grid-template-columns: 1fr; padding: 16px; }
  .thehub-checkout__rail { position: static; }
  .thehub-checkout__header { padding: 0 16px; }
}
/*
 * The design system runs on the platform UI stack and loads no webfonts.
 * The !important is deliberate: this has to beat WoodMart's own body
 * typography, which is enqueued before this child stylesheet. `html body` wins
 * the page ground on specificity, because WoodMart's dynamic stylesheet also
 * sets a background.
 */
body, .site-wrapper { font-family: var(--font-sans) !important; }
html body { background-color: var(--hub-bg); color: var(--hub-ink); }
h1, h2, h3, h4, h5, h6, .wd-entities-title, .product_title { font-family: var(--font-sans) !important; }

/* ===== Homepage ===== */
.thehub-home { background: var(--hub-bg); }
.thehub-hero { background: var(--hub-ink); color: var(--hub-ink-on-dark); padding: 56px 40px; }
.thehub-hero__inner { max-width: 1280px; margin: 0 auto; }
.thehub-hero__title { font-family: var(--font-sans); font-weight: 700; font-size: 40px; letter-spacing: -0.01em; margin: 0 0 8px; }
.thehub-hero__sub { font-size: 16px; color: var(--hub-ink-secondary); margin: 0 0 24px; }
.thehub-hero__search { display: flex; max-width: 720px; margin-bottom: 20px; }
.thehub-hero__search input { flex: 1; height: 48px; padding: 0 16px; border: none; border-radius: 3px 0 0 3px; font-size: 15px; }
.thehub-hero__search button { height: 48px; padding: 0 28px; background: var(--hub-accent); color: var(--hub-ink); border: none; border-radius: 0 3px 3px 0; font-weight: 700; font-size: 15px; cursor: pointer; }
.thehub-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.thehub-btn { display: inline-block; padding: 11px 22px; border-radius: 3px; font-weight: 700; font-size: 14px; text-decoration: none; }
.thehub-btn--primary { background: var(--hub-accent); color: var(--hub-ink-on-dark); }
.thehub-btn--primary:hover { background: var(--hub-accent-pressed); }
.thehub-btn--secondary { background: var(--hub-surface-card); color: var(--hub-ink); }
.thehub-btn--ghost { background: transparent; border: 1px solid var(--hub-hairline); color: var(--hub-ink); }
.thehub-btn--ghost:hover { border-color: var(--hub-blue-fg); color: var(--hub-blue-fg); }

.thehub-section { max-width: 1280px; margin: 0 auto; padding: 40px; }
.thehub-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.thehub-section__head h2 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; margin: 0; }
.thehub-section__head a { color: var(--hub-blue-fg); font-size: 13px; text-decoration: none; }
.thehub-section__title { font-family: var(--font-sans); font-weight: 600; font-size: 22px; margin: 0 0 20px; }

.thehub-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.thehub-catgrid__item { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; padding: 20px; text-decoration: none; color: var(--hub-ink); }
.thehub-catgrid__item:hover { border-color: var(--hub-blue-fg); }
.thehub-catgrid__name { display: block; font-weight: 700; font-size: 15px; }
.thehub-catgrid__count { font-size: 12.5px; color: var(--color-text-meta); }

.thehub-b2b2step { background: var(--hub-surface-well); border-radius: 6px; }
.thehub-b2b2step__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.thehub-b2b2step__step { display: flex; gap: 14px; align-items: flex-start; }
.thehub-b2b2step__num { font-family: var(--font-mono); font-weight: 600; color: var(--hub-accent-pressed); font-size: 15px; }
.thehub-b2b2step__step p { margin: 0; font-size: 14px; color: var(--color-text-meta); line-height: 1.5; }
.thehub-b2b2step__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.thehub-tradepricegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.thehub-tradeprice { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 3px; overflow: hidden; text-decoration: none; color: var(--hub-ink); display: flex; }
.thehub-tradeprice:hover { border-color: var(--hub-blue-fg); }
.thehub-tradeprice__img { width: 96px; flex-shrink: 0; background: var(--hub-thumb-fill); }
.thehub-tradeprice__img img { width: 100%; height: 100%; object-fit: cover; }
.thehub-tradeprice__body { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.thehub-tradeprice__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.thehub-tradeprice__vendor { font-size: 12px; color: var(--color-text-meta); }
.thehub-tradeprice__price { font-family: var(--font-mono); }
.thehub-tradeprice__price b { color: var(--hub-accent-pressed); font-size: 16px; }
.thehub-tradeprice__price s { color: var(--hub-ink-secondary); font-size: 12px; margin-left: 6px; }
.thehub-tradeprice__meta { font-size: 11.5px; color: var(--hub-ink-secondary); }

.thehub-b2bband { background: var(--hub-terminal-bg); color: var(--hub-ink-on-dark); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.thehub-b2bband h2 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; margin: 0 0 6px; }
.thehub-b2bband p { margin: 0; color: rgba(255,255,255,0.7); font-size: 14px; }

/* ===== Cart extras ===== */
.thehub-lineitem__remove { color: var(--hub-ink-secondary); text-decoration: none; font-size: 16px; margin-left: 12px; }
.thehub-lineitem__remove:hover { color: var(--hub-accent-pressed); }
.thehub-cart__actions { display: flex; gap: 12px; }
.thehub-checkout__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; background: var(--hub-accent); color: var(--hub-ink-on-dark);
  font-size: 15px; font-weight: 700; border-radius: 3px; text-decoration: none; margin-top: 8px;
}
.thehub-checkout__cta:hover { background: var(--hub-accent-pressed); }
.thehub-qty__input { display: none; }
.thehub-qty__minus, .thehub-qty__plus { cursor: pointer; user-select: none; }
.thehub-qty__minus:hover, .thehub-qty__plus:hover { color: var(--hub-accent-pressed); }

/* ===== Supplier passport ===== */
.thehub-passport { max-width: 1280px; margin: 0 auto; padding: 32px 40px; }
.thehub-passport__head { display: flex; gap: 20px; align-items: flex-start; background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 6px; padding: 24px; margin-bottom: 20px; }
.thehub-passport__avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--hub-terminal-bg); color: var(--hub-ink-on-dark); font-weight: 700; font-size: 22px; flex-shrink: 0; }
.thehub-passport__identity h1 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; margin: 0 0 6px; }
.thehub-passport__identity p { margin: 6px 0; color: var(--color-text-meta); font-size: 14px; }
.thehub-passport__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-meta); }
.thehub-passport__actions { margin-left: auto; display: flex; flex-direction: column; gap: 10px; }
.thehub-passport__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.thehub-passport__section { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 6px; padding: 22px; margin-bottom: 16px; }
.thehub-passport__section h2 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.thehub-passport__hint { font-size: 12px; color: var(--hub-ink-secondary); margin: 6px 0 0; }
.thehub-passport__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.thehub-passport__table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hub-ink-secondary); padding: 8px; border-bottom: 1px solid var(--hub-hairline); }
.thehub-passport__table td { padding: 10px 8px; border-bottom: 1px solid var(--hub-surface-field); }
/*
 * Status. Colour here is semantics, not decoration:
 *   ok      green  held, verified, on track
 *   waiting amber  waiting on someone, and it must name them with a date
 *   info    blue   your own side, or an outside service
 *   off     red    expired, rejected, disputed
 *   done    ink    a finished state
 */
.thehub-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-badge); font-size: 11.5px; font-weight: 600; }
.thehub-status--ok { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.thehub-status--waiting,
.thehub-status--warn { background: var(--hub-amber-bg); color: var(--hub-amber-fg); }
.thehub-status--info { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.thehub-status--off { background: var(--hub-red-bg); color: var(--hub-red-fg); }
.thehub-status--done { background: var(--hub-terminal-bg); color: var(--hub-terminal-fg); }
/* The person a waiting state waits on, and the date it is due. */
/* At 0.85 the "waiting on" name measured 3.95:1 (green) and 3.53:1 (amber) on
   its own badge ground; small status text needs 4.5. Weight alone separates it. */
.thehub-status__who { font-weight: 500; }
.thehub-passport__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.thehub-passport__stats b { display: block; font-size: 20px; font-family: var(--font-mono); }
.thehub-passport__stats span { font-size: 12px; color: var(--color-text-meta); }
.thehub-passport__progress { height: 8px; background: var(--hub-surface-field); border-radius: 4px; overflow: hidden; margin: 10px 0 8px; }
.thehub-passport__progress span { display: block; height: 100%; background: var(--hub-accent); }
.thehub-passport__terms dt { font-size: 12px; color: var(--hub-ink-secondary); margin-top: 8px; }
.thehub-passport__terms dd { margin: 0; font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
  .thehub-passport__grid { grid-template-columns: 1fr; }
  .thehub-b2b2step__grid { grid-template-columns: 1fr; }
  .thehub-section, .thehub-hero { padding: 24px 16px; }
}

/* ===== Settlement dashboard (design ref page 5) ===== */
.thehub-settlement { max-width: 1280px; margin: 0 auto; padding: 32px 40px; }
.thehub-settlement__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.thehub-settlement__head h1 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; margin: 0 0 6px; }
.thehub-settlement__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 24px; }
.thehub-settlement__card { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.thehub-settlement__card span { font-size: 12px; color: var(--color-text-meta); }
.thehub-settlement__card b { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.thehub-settlement__card small { font-size: 11.5px; color: var(--hub-ink-secondary); }
/* Marked by a tint rather than a coloured edge, matching the notice idiom. */
.thehub-settlement__card--primary { background: var(--hub-green-bg); }
.thehub-settlement__card--primary b { color: var(--hub-accent); }
.thehub-settlement__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.thehub-settlement__main { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 6px; padding: 22px; }
.thehub-settlement__sectionhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.thehub-settlement__sectionhead h2, .thehub-settlement__section h2 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; margin: 0; }
.thehub-settlement__sectionhead a { color: var(--hub-blue-fg); font-size: 13px; text-decoration: none; }
.thehub-settlement__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.thehub-settlement__table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hub-ink-secondary); padding: 8px; border-bottom: 1px solid var(--hub-hairline); }
.thehub-settlement__table td { padding: 10px 8px; border-bottom: 1px solid var(--hub-surface-field); }
.thehub-settlement__ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-meta); }
.thehub-settlement__entry { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; font-weight: 600; background: var(--hub-surface-field); color: var(--hub-ink); }
.thehub-settlement__entry--sale { background: var(--hub-green-bg); color: var(--hub-accent); }
.thehub-settlement__entry--commission, .thehub-settlement__entry--fee { background: var(--hub-surface-well); color: var(--hub-ink-secondary); }
.thehub-settlement__entry--refund, .thehub-settlement__entry--payout, .thehub-settlement__entry--withdrawal { background: var(--hub-red-bg); color: var(--hub-red-fg); }
.thehub-settlement__entry--reserve { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.thehub-settlement__pos { color: var(--hub-accent); font-family: var(--font-mono); font-weight: 500; }
.thehub-settlement__neg { color: var(--hub-red-fg); font-family: var(--font-mono); font-weight: 500; }
.thehub-settlement__note { font-size: 12px; color: var(--hub-ink-secondary); margin: 10px 0 0; }
.thehub-settlement__side { display: flex; flex-direction: column; gap: 16px; }
.thehub-settlement__section { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 6px; padding: 18px; }
.thehub-settlement__health dt { font-size: 12px; color: var(--hub-ink-secondary); margin-top: 10px; }
.thehub-settlement__health dd { margin: 0; font-size: 16px; font-weight: 700; font-family: var(--font-mono); }
@media (max-width: 900px) {
  .thehub-settlement__body { grid-template-columns: 1fr; }
  .thehub-settlement { padding: 20px 16px; }
}

/* ===== Homepage redesign (reference page 1) ===== */
.thehub-utilbar { background: var(--hub-surface-well); border-bottom: 1px solid var(--hub-hairline); font-size: 12.5px; color: var(--color-text-meta); }
.thehub-utilbar__inner { max-width: 1280px; margin: 0 auto; padding: 6px 40px; display: flex; align-items: center; gap: 8px; }
.thehub-utilbar a { color: var(--color-text-meta); text-decoration: none; }
.thehub-utilbar a:hover { color: var(--hub-accent-pressed); }
.thehub-utilbar__sep { opacity: 0.4; }
.thehub-utilbar__right { margin-left: auto; }

.thehub-hero__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hub-accent-pressed); margin-bottom: 10px; }
.thehub-hero__title { font-family: var(--font-sans); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 14px; }
.thehub-hero__search select { height: 48px; padding: 0 14px; border: none; border-right: 1px solid var(--hub-hairline); border-radius: 3px 0 0 3px; background: var(--hub-surface-card); color: var(--hub-ink); font-size: 14px; max-width: 180px; }
.thehub-hero__note { margin-top: 16px; font-size: 13px; color: var(--hub-ink-secondary); }

.thehub-tradenav { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; gap: 22px; flex-wrap: wrap; background: var(--hub-surface-card); border-bottom: 1px solid var(--hub-hairline); }
.thehub-tradenav a { padding: 12px 0; font-size: 13px; font-weight: 600; color: var(--hub-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.thehub-tradenav a:hover, .thehub-tradenav a:first-child { color: var(--hub-accent-pressed); border-bottom-color: var(--hub-accent-pressed); }

.thehub-section__eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hub-blue-fg); margin-bottom: 6px; }
.thehub-tradeprice__badge { margin-top: 2px; }
.thehub-tradeprice__badge code { background: var(--hub-blue-bg); color: var(--hub-blue-fg); padding: 2px 7px; border-radius: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.thehub-tradeprice__badge span { color: var(--hub-ink-secondary); }

@media (max-width: 900px) {
  .thehub-hero__title { font-size: 30px; }
  .thehub-utilbar__inner, .thehub-tradenav { padding-left: 16px; padding-right: 16px; }
  .thehub-hero__search select { display: none; }
}

/* ===== Custom site header (design reference) ===== */
.thehub-site { background: var(--hub-bg); min-height: 100vh; display: flex; flex-direction: column; }
.thehub-main { flex: 1; }

.thehub-header { background: var(--hub-ink); }
.thehub-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; height: 64px; display: flex; align-items: center; gap: 24px; }
.thehub-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.thehub-logo__word { font-family: var(--font-sans); font-weight: 700; font-size: 18px; letter-spacing: 0.5px; color: var(--hub-ink-on-dark); }
.thehub-header .thehub-logo__word { color: var(--hub-ink-on-dark); }

.thehub-search { display: flex; flex: 1; max-width: 720px; }
.thehub-search select { height: 40px; padding: 0 12px; border: none; border-right: 1px solid var(--hub-hairline); border-radius: 3px 0 0 3px; background: var(--hub-surface-card); color: var(--hub-ink); font-size: 13px; max-width: 170px; }
.thehub-search input[type="search"] { flex: 1; height: 40px; padding: 0 14px; border: none; font-size: 14px; }
.thehub-search button { height: 40px; padding: 0 20px; background: var(--hub-accent); color: var(--hub-ink); border: none; border-radius: 0 3px 3px 0; font-weight: 700; font-size: 13px; cursor: pointer; }

.thehub-header__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.thehub-header__account { color: var(--hub-ink-on-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.thehub-header__account:hover { color: var(--hub-accent-pressed); }
.thehub-header__cart { position: relative; color: var(--hub-ink-on-dark); text-decoration: none; font-size: 20px; }
.thehub-header__cartcount { position: absolute; top: -8px; right: -10px; background: var(--hub-accent); color: var(--hub-ink); font-size: 11px; font-weight: 700; border-radius: 50%; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

.thehub-mainnav { background: var(--hub-terminal-bg); }
.thehub-mainnav__menu { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }
.thehub-mainnav__menu > li { margin: 0; }
.thehub-mainnav__menu > li > a { display: block; padding: 11px 0; color: var(--hub-ink-on-dark-secondary); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.thehub-mainnav__menu > li > a:hover, .thehub-mainnav__menu > li.current-menu-item > a { color: var(--hub-accent-pressed); border-bottom-color: var(--hub-accent-pressed); }
.thehub-mainnav__menu .sub-menu { display: none; }

/* Minimal checkout header */
.thehub-checkout-header { background: var(--hub-ink); color: var(--hub-ink-on-dark); height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 40px; }
.thehub-checkout-header .thehub-logo__word { color: var(--hub-ink-on-dark); }
.thehub-checkout-header__title { font-size: 14px; font-weight: 600; margin-left: 8px; }
.thehub-checkout-header__steps { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-checkout-header__steps span.is-current { color: var(--hub-ink-on-dark); font-weight: 600; }

/* ===== Footer ===== */
.thehub-footer { background: var(--hub-ink); color: var(--hub-ink-on-dark-secondary); margin-top: 40px; }
.thehub-footer__grid { max-width: 1280px; margin: 0 auto; padding: 40px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.thehub-footer .thehub-logo__word { color: var(--hub-ink-on-dark); }
.thehub-footer p { color: var(--hub-ink-on-dark-secondary); font-size: 13px; line-height: 1.6; }
/* The column headings had no colour of their own, so they inherited
   WoodMart's global heading colour (--wd-title-color), which is a near-black
   intended for white cards. On the dark footer band that rendered them at about
   1.2:1 — the columns read as if they had no headings at all. */
.thehub-footer h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--hub-ink-on-dark); }
.thehub-footer ul { list-style: none; padding: 0; margin: 0; }
.thehub-footer ul li { margin-bottom: 8px; }
.thehub-footer ul a { color: var(--hub-ink-on-dark-secondary); font-size: 13px; text-decoration: none; }
/* The pressed accent is a dark green and the footer is dark ink: as a hover it
   dropped these links to about 1.3:1. On a dark ground the accent lifts, not
   darkens. */
.thehub-footer ul a:hover { color: var(--hub-accent-on-dark); }
.thehub-footer__bottom { max-width: 1280px; margin: 0 auto; padding: 16px 40px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--hub-ink-on-dark-secondary); }

@media (max-width: 900px) {
  .thehub-header__inner, .thehub-mainnav__menu, .thehub-checkout-header { padding-left: 16px; padding-right: 16px; }
  .thehub-search { display: none; }
  .thehub-footer__grid { grid-template-columns: 1fr 1fr; padding: 24px 16px; }
  .thehub-footer__bottom { padding-left: 16px; padding-right: 16px; }
}
.thehub-catgrid__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--hub-surface-well); color: var(--hub-blue-fg); margin-bottom: 8px; }
.thehub-catgrid__item:hover .thehub-catgrid__icon { background: var(--hub-blue-bg); color: var(--hub-accent-pressed); }

/* ===== The-Hub Export design system (Main.dc.html) ===== */
/*
 * Component tokens.
 *
 * The literal values live in assets/ds/tokens/, vendored verbatim from The-Hub
 * Design System. Nothing here redefines them: these are aliases, so this theme
 * and the design system cannot drift apart. Add a value here only when the
 * design system genuinely has no token for it.
 */
:root {
  --color-background: var(--hub-bg);
  --color-surface: var(--hub-surface-card);
  --color-surface-well: var(--hub-surface-well);
  --color-surface-field: var(--hub-surface-field);
  --color-chrome: var(--hub-chrome);
  --color-text-primary: var(--hub-ink);
  --color-text-secondary: var(--hub-ink-secondary);
  --color-text-muted: var(--hub-ink-tertiary);
  --color-text-faint: var(--hub-ink-quaternary);
  /* The design system's ink alphas do not reach WCAG AA on white. Measured:
     secondary 3.48:1, tertiary 2.61:1, quaternary 2.33:1, and the 0.68 meta
     value that used to be here reaches 4.06:1 — not the 4.5 the previous comment
     claimed. Body text needs 4.5:1, so the scale is lifted to the floor here.

     Overridden in the theme's layer rather than in assets/ds/ so the vendored
     tokens stay traceable to the design system and every deviation sits in one
     place. The well (--hub-bg) measures about 0.3 lower than white, which is why
     the lift is 0.76 rather than 0.72: 0.72 reaches 4.24:1 on the well.

     The cost is that the ink scale no longer separates by lightness. Hierarchy
     now comes from size and weight, because there is no room above the floor
     while staying this light. Ratios below are on white. */
  --hub-ink-body: rgba(60, 67, 63, 0.76);        /* 5.04:1, 4.70:1 on the well */
  --hub-ink-secondary: rgba(60, 67, 63, 0.76);
  --hub-ink-tertiary: rgba(60, 67, 63, 0.76);
  --hub-ink-quaternary: rgba(60, 67, 63, 0.76);
  --hub-ink-row-label: rgba(60, 67, 63, 0.76);
  --color-text-meta: rgba(60, 67, 63, 0.78);     /* 5.33:1, 4.95:1 on the well */
  --color-border: var(--hub-hairline);
  --color-separator: var(--hub-separator);
  --color-border-strong: var(--hub-hairline-strong);
  --color-border-pending: var(--hub-hairline-dashed);
  --color-brand: var(--hub-accent);
  --color-brand-dark: var(--hub-accent-pressed);
  --color-brand-bright: var(--hub-accent-bright);
  --color-brand-on-dark: var(--hub-accent-on-dark);
  --color-brand-light: var(--hub-green-bg);
  --color-brand-text: var(--hub-green-fg);
  --color-blue: var(--hub-blue-fg);
  --color-blue-light: var(--hub-blue-bg);
  --color-waiting: var(--hub-amber-fg);
  --color-waiting-light: var(--hub-amber-bg);
  --color-error: var(--hub-red-fg);
  --color-error-light: var(--hub-red-bg);
  --color-terminal: var(--hub-terminal-bg);
  --radius-btn: var(--radius-control-sm);

  /* A control boundary.
   *
   * The design system carries one border colour and says so: --hub-hairline
   * (0.10) with --hub-hairline-strong (0.16) as its emphasised step. Both are
   * separators. As the only visible edge of a field on a white card they
   * measure 1.18:1 and 1.31:1 — well under the 3:1 that WCAG 1.4.11 asks of
   * the visual information that identifies a control. The design system has no
   * 3:1 control border, so this value is added here and used only on form
   * controls, never on decorative hairlines. Measured: 3.5:1 on the card,
   * 3.4:1 on the well, 3.3:1 on the page ground. */
  --hub-border-control: rgba(60, 67, 63, 0.62);
}

/* Placeholder text is text: it needs the 4.5 floor, and the platform default
   is a browser grey that measures about 2:1 on white. WoodMart does not set
   one either, so this covers every field in the storefront and the desk. */
.thehub-site ::placeholder { color: var(--color-text-meta); opacity: 1; }
body, .thehub-site { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; background: var(--hub-bg); color: var(--hub-ink); }

/* Sticky translucent chrome */
.thehub-chrome { position: sticky; top: 0; z-index: 20; background: var(--hub-chrome); backdrop-filter: var(--hub-chrome-blur); -webkit-backdrop-filter: var(--hub-chrome-blur); border-bottom: 1px solid var(--hub-hairline); }
.thehub-chrome__row { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 0 40px; height: 60px; }
.thehub-brand { display: flex; align-items: baseline; gap: 7px; text-decoration: none; }
.thehub-brand__name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--hub-ink); }
.thehub-brand__sub { font-size: 12.5px; font-weight: 500; color: var(--hub-ink-secondary); }
.thehub-chrome__search { display: flex; align-items: center; gap: 9px; flex-grow: 1; max-width: 460px; height: 36px; background: var(--hub-surface-field); border-radius: 10px; padding: 0 12px; border: none; }
.thehub-chrome__search input { flex: 1; background: transparent; border: none; font-size: 14px; color: var(--hub-ink); }
/* The search field had outline:none, which overrode the shared :focus-visible
   rule and left the desktop search with no focus indicator at all. */
.thehub-chrome__search input:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.thehub-chrome__search input::placeholder { color: var(--color-text-meta); }
.thehub-chrome__search--mobile { display: none; }
.thehub-chrome__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.thehub-dest { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px;   background: var(--hub-surface-card); border-radius: var(--radius-control-sm); box-shadow: var(--shadow-chip); font-size: 13.5px; font-weight: 500; color: var(--hub-ink); text-decoration: none; }
.thehub-chrome__icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--hub-ink); text-decoration: none; }
.thehub-chrome__account { display: flex; align-items: center; gap: 9px; height: 44px; padding-left: 6px; text-decoration: none; color: var(--hub-ink); font-size: 13.5px; font-weight: 500; }
.thehub-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--hub-blue-fg); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--hub-ink-on-dark); }
.thehub-chrome__nav { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 0 40px 12px; font-size: 13.5px; font-weight: 500; }
.thehub-chrome__nav a { color: var(--hub-ink-secondary); text-decoration: none; }
.thehub-chrome__nav a.is-active, .thehub-chrome__nav a:hover { color: var(--hub-ink); font-weight: 600; }
.thehub-chrome__nav .thehub-nav-cta { margin-left: auto; color: var(--hub-accent); font-weight: 600; }

/* Export hero */
.thehub-export { max-width: 1440px; margin: 0 auto; }
.thehub-exportgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; padding: 28px 40px 0; }
.thehub-hero-export { position: relative; border-radius: 18px; overflow: hidden; background: linear-gradient(155deg, #1b4b38 0%, #0f2f24 58%, var(--hub-terminal-bg) 100%); min-height: 312px; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px 38px; }
.thehub-hero-export h1 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--hub-ink-on-dark); max-width: 15ch; margin: 14px 0 0; }
.thehub-hero-export p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--hub-ink-on-dark-secondary); max-width: 48ch; }
.thehub-hero-export__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.thehub-hero-export__actions { display: flex; align-items: center; gap: 10px; padding-top: 20px; }
.thehub-hero-export__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: var(--hub-surface-card); color: var(--hub-ink); font-size: 14.5px; font-weight: 600; border-radius: 11px; text-decoration: none; }
.thehub-hero-export__btn--ghost { background: rgba(255,255,255,0.16); color: var(--hub-ink-on-dark); font-weight: 500; }

/* Destination market card */
.thehub-destcard { background: var(--hub-surface-card); border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card); }
.thehub-destcard__head { display: flex; align-items: baseline; justify-content: space-between; }
.thehub-destcard__head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.thehub-destcard__head span { font-size: 12px; color: var(--color-text-meta); }
.thehub-destcard__tabs { display: flex; gap: 7px; background: var(--hub-surface-field); border-radius: 10px; padding: 3px; }
.thehub-destcard__tabs span { flex-grow: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--hub-ink-secondary); }
.thehub-destcard__tabs span.is-active { background: var(--hub-surface-card); color: var(--hub-ink); font-weight: 600; box-shadow: var(--shadow-segment-thumb); }
.thehub-destcard__facts { display: flex; flex-direction: column; background: var(--hub-surface-inset); border-radius: var(--radius-well); overflow: hidden; }
.thehub-destcard__facts div { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hub-hairline); font-size: 13.5px; }
.thehub-destcard__facts div:last-child { border-bottom: none; }
.thehub-destcard__facts span { color: var(--color-text-meta); }
.thehub-destcard__facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.thehub-destcard__note { font-size: 12.5px; line-height: 1.5; color: var(--hub-ink-secondary); }

/* Section heading */
.thehub-xsec { padding: 32px 40px 0; }
.thehub-xsec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.thehub-xsec__head h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.018em; }
.thehub-xsec__head a { font-size: 13.5px; font-weight: 500; color: var(--hub-accent); text-decoration: none; }

/* Commodity cards */
.thehub-commgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.thehub-commcard { background: var(--hub-surface-card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; display: block; }
/* The hero decoration is a positioned layer, not an in-flow image, so it is the
   hero's own overflow that contains it: .thehub-hero-export is position:relative
   with overflow:hidden above. The vendored SVG already carries opacity:0.5 in its
   own root style, so setting it again here multiplied the two and left the layer
   at 25% — faint to the point of looking like a rendering fault. Position only. */
.thehub-hero-export__shapes { position: absolute; right: -30px; top: -16px; pointer-events: none; }
.thehub-commcard__art { height: 132px; background: var(--hub-thumb-fill); display: grid; place-items: center; }
.thehub-commcard__art img { display: block; width: 112px; height: 112px; }
.thehub-commcard__plate { width: 84px; height: 84px; border-radius: var(--radius-tile); background: var(--hub-green-bg); color: var(--hub-green-fg); display: grid; place-items: center; font-size: 24px; font-weight: 600; letter-spacing: var(--tracking-card); }
.thehub-commcard__body { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 9px; }
.thehub-commcard__body h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.thehub-commcard__desc { font-size: 13px; line-height: 1.45; color: var(--hub-ink-secondary); }
.thehub-commcard__season { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--hub-green-fg); }
.thehub-commcard__season i { width: 7px; height: 7px; border-radius: 50%; background: var(--hub-accent-bright); display: inline-block; }
.thehub-commcard__season--soon { color: var(--hub-amber-fg); } .thehub-commcard__season--soon i { background: var(--hub-amber-dot); }
.thehub-commcard__fob { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--hub-hairline); padding-top: 11px; margin-top: 3px; }
.thehub-commcard__fob span { font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-commcard__fob b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thehub-commcard__fob b em { font-size: 12px; font-weight: 400; color: var(--hub-ink-secondary); font-style: normal; }

/* Lots table */
.thehub-lots { background: var(--hub-surface-card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.thehub-lotrow { display: grid; grid-template-columns: 52px minmax(0, 2.1fr) 150px 130px 130px 140px; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hub-hairline); }
.thehub-lotrow:last-child { border-bottom: none; }
.thehub-lotrow__art { width: 44px; height: 44px; border-radius: var(--radius-tile); background: var(--hub-tile-avocado); color: var(--hub-accent-on-dark); display: grid; place-items: center; }
.thehub-lotrow__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.thehub-lotrow__title { font-size: 15px; font-weight: 600; letter-spacing: -0.008em; }
.thehub-lotrow__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.thehub-lotrow__exporter { font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-cert { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--hub-green-fg); background: var(--hub-green-bg); padding: 2px 7px; border-radius: 5px; }
.thehub-lotrow__stat { display: flex; flex-direction: column; gap: 2px; }
.thehub-lotrow__stat span { font-size: 11.5px; color: var(--hub-ink-secondary); }
.thehub-lotrow__stat b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thehub-lotrow__cta { display: inline-flex; align-items: center; justify-content: center; height: 38px; background: var(--hub-accent); color: var(--hub-ink-on-dark); font-size: 13.5px; font-weight: 600; border-radius: 10px; text-decoration: none; }
.thehub-lotrow__cta:hover { background: var(--hub-accent-pressed); color: var(--hub-ink-on-dark); }

/* Closing band.
 *
 * The intro and the signals are two columns of one row. The signals are a grid
 * of equal tracks, so they distribute instead of crowding: five fit one row at
 * 1440 and wrap from 150px each on the way down, rather than being squeezed
 * into five fixed tracks that get narrower than their own text. `align-items:
 * start` lines the heading up with the first signal's title; spacing all comes
 * from the design-system scale below. */
.thehub-compband { padding: var(--space-19) var(--page-gutter) var(--space-22); }
.thehub-compband__inner { background: var(--hub-surface-card); border-radius: var(--radius-card-sm); padding: var(--space-17) var(--space-18); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; gap: var(--space-16) var(--space-21); box-shadow: var(--shadow-card); }
.thehub-compband__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.thehub-compband__intro h2 { font-size: var(--type-card-title-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-card); }
.thehub-compband__intro span { font-size: var(--text-13); line-height: var(--leading-body); color: var(--hub-ink-secondary); }
.thehub-compband__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-15) var(--stack-gap); }
.thehub-compband__list div { display: flex; flex-direction: column; gap: var(--space-2); }
.thehub-compband__list b { font-size: var(--type-body-size); font-weight: var(--weight-semibold); }
.thehub-compband__list span { font-size: var(--type-label-size); line-height: var(--leading-snug); color: var(--hub-ink-secondary); }
.thehub-compband__note { display: block; margin: var(--space-7) var(--space-1) 0; font-size: var(--type-label-size); line-height: var(--leading-body); color: var(--hub-ink-secondary); }

/* Destination paperwork checklist (Kenya export requirements) */
.thehub-destcard__paperwork { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.thehub-destcard__paperwork li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.thehub-destcard__paperwork b { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--hub-green-fg); background: var(--hub-green-bg); padding: 2px 6px; border-radius: 5px; }
.thehub-destcard__paperwork span { color: var(--color-text-meta); line-height: 1.4; }

/* Hub Assist (export document assistant) */
.thehub-assist { margin-top: 22px; padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 12px; }
.thehub-assist__intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.thehub-assist__form { display: flex; gap: 8px; }
.thehub-assist__form input { flex: 1; height: 40px; padding: 0 13px; border: 1px solid var(--hub-border-control); border-radius: var(--radius-btn); font-size: 14px; color: var(--color-text-primary); background: var(--hub-surface-card); }
.thehub-assist__form button { height: 40px; padding: 0 18px; border: none; border-radius: var(--radius-btn); background: var(--color-brand); color: var(--hub-ink-on-dark); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.thehub-assist__form button:hover { background: var(--color-brand-dark); }
.thehub-assist__suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.thehub-assist__chip { padding: 6px 10px; border: 1px solid var(--hub-border-control); border-radius: var(--radius-pill); background: transparent; color: var(--color-brand-text); font-size: 12px; cursor: pointer; text-align: left; }
.thehub-assist__chip:hover { background: var(--color-brand-light); }
.thehub-assist__answer { margin: 0; font-size: 13.5px; line-height: 1.55; }
.thehub-assist__answer[data-state="loading"] { color: var(--color-text-secondary); }
.thehub-assist__answer[data-state="ok"],
.thehub-assist__answer[data-state="degraded"] { color: var(--color-text-primary); white-space: pre-line; }
.thehub-assist__answer[data-state="degraded"] { padding: 12px 14px; background: var(--color-brand-light); border-radius: var(--radius-btn); }
.thehub-assist__answer[data-state="error"] { color: var(--hub-red-fg); }

@media (max-width: 1100px) {
  .thehub-exportgrid { grid-template-columns: 1fr; }
  .thehub-commgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thehub-lotrow { grid-template-columns: 44px minmax(0, 1fr) 130px; }
  .thehub-lotrow__stat:nth-of-type(n+3) { display: none; }
  /* Stack the intro above the signals; the signal grid's auto-fit tracks decide
     their own column count from there. */
  .thehub-compband__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .thehub-chrome__row, .thehub-chrome__nav, .thehub-xsec, .thehub-exportgrid, .thehub-compband { padding-left: 16px; padding-right: 16px; }
  .thehub-chrome__search { display: none; }
  .thehub-chrome__search--mobile { display: flex; max-width: none; margin: 0 16px 12px; }
  .thehub-hero-export h1 { font-size: 28px; }
  .thehub-commgrid { grid-template-columns: 1fr; }
  /* The product nav and the account chip together were wider than a 360px
     screen, and the page clips horizontal overflow, so the enquiry basket and
     the sign-in link were off-screen and unreachable. */
  .thehub-chrome__nav { flex-wrap: wrap; row-gap: 8px; }
  .thehub-dest { padding: 0 10px; }
  /* A signed-in name is dropped on a narrow screen, but "Sign in" is not: that
     is the one thing a visitor needs to be able to reach. */
  .thehub-chrome__account--named span:last-child { display: none; }
  /* The full destination label wrapped onto two lines and pushed the cart and
     account controls off the row. */
  .thehub-dest__full { display: none; }
  .thehub-dest__short { display: inline; }
  /* "Sign in" was breaking mid-word at 390px. */
  .thehub-chrome__account, .thehub-chrome__nav a, .thehub-dest { white-space: nowrap; }
}

.thehub-dest__short { display: none; }
.thehub-chrome__count { position: absolute; margin: -14px 0 0 12px; background: var(--hub-accent); color: var(--hub-ink-on-dark); font-size: 11.5px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.thehub-chrome__icon { position: relative; }
.thehub-footer { background: var(--hub-terminal-bg); color: var(--hub-ink-on-dark-secondary); }
/* Above the footer's own breakpoint only. As an unconditional rule this came
   after the max-width:900 override and, having equal specificity, won on order —
   so the footer kept four columns at 360px and a column hung off the screen. */
@media (min-width: 901px) {
  .thehub-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.thehub-footer .thehub-brand__name { color: var(--hub-ink-on-dark); }
.thehub-footer .thehub-brand__sub { color: rgba(255,255,255,0.5); }

/* Destination switcher */
.thehub-destmenu { position: relative; }
.thehub-destmenu > summary { list-style: none; cursor: pointer; }
.thehub-destmenu > summary::-webkit-details-marker { display: none; }
.thehub-destmenu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: 12px; box-shadow: 0 12px 30px -18px rgba(14,22,19,0.55); padding: 6px; margin: 0; list-style: none; }
.thehub-destmenu__list a { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--hub-ink); }
.thehub-destmenu__list a:hover { background: rgba(60,67,63,0.05); }
.thehub-destmenu__list a.is-active { background: var(--hub-green-bg); }
.thehub-destmenu__list b { font-size: 13.5px; font-weight: 600; }
.thehub-destmenu__list span { font-size: 12px; color: var(--hub-ink-secondary); }
.thehub-destcard__tabs a { flex-grow: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--hub-ink-secondary); text-decoration: none; }
.thehub-destcard__tabs a.is-active { background: var(--hub-surface-card); color: var(--hub-ink); font-weight: 600; box-shadow: var(--shadow-segment-thumb); }

/* ---------------------------------------------------------------------------
   Lot detail (design library phase-1/lot.html)

   The B2B export lot: CIF price for the destination, the documents that market
   requires, the lot specification, the exporter and a landed cost estimate.
   Spec rows use a top hairline rather than borders, per the design system.
--------------------------------------------------------------------------- */
.thehub-lot { max-width: 1440px; margin: 0 auto; padding: 28px 40px 44px; }
.thehub-lot__crumbs { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--color-text-meta); margin-bottom: 14px; }
.thehub-lot__crumbs a { color: var(--color-text-meta); text-decoration: none; }
.thehub-lot__crumbs a:hover { color: var(--hub-accent); }
.thehub-lot__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.thehub-lot__code { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-meta); }
.thehub-lot__head h1 { font-size: 30px; letter-spacing: var(--tracking-page); font-weight: 600; margin: 6px 0 0; }
.thehub-lot__headmeta { display: flex; align-items: center; gap: 10px; }
.thehub-lot__available { font-size: 13.5px; color: var(--hub-ink-secondary); }
.thehub-lot__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.thehub-lot__main,
.thehub-lot__rail { display: flex; flex-direction: column; gap: 18px; }
.thehub-lot__rail { gap: 16px; }
.thehub-lot__media { margin: 0; background: var(--hub-surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.thehub-lot__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.thehub-lot__media figcaption { padding: 12px 20px 16px; font-size: 12.5px; color: var(--color-text-meta); }
.thehub-lot__pricebar { background: var(--hub-surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px 26px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.thehub-lot__pricelabel { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-meta); }
.thehub-lot__price { display: block; font-size: 36px; font-weight: 700; letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; }
.thehub-lot__priceunit { font-size: 13.5px; color: var(--hub-ink-secondary); }
.thehub-lot__pricefacts { display: flex; gap: 26px; flex-wrap: wrap; }
.thehub-lot__pricefacts div { display: flex; flex-direction: column; gap: 3px; }
.thehub-lot__pricefacts span { font-size: 11.5px; color: var(--color-text-meta); }
.thehub-lot__pricefacts b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thehub-lot__block { background: var(--hub-surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px 26px; }
.thehub-lot__blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.thehub-lot__blockhead h2 { font-size: 16px; font-weight: 600; letter-spacing: var(--tracking-card); margin: 0; }
.thehub-lot__blockhead span { font-size: 12.5px; color: var(--color-text-meta); }
.thehub-lot__docs { list-style: none; margin: 0; padding: 0; }
.thehub-lot__docs li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hub-separator); }
.thehub-lot__docs li:first-child { border-top: none; }
.thehub-lot__docs b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: var(--tracking-row); }
.thehub-lot__docs li div span { font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-lot__spec { margin: 0; }
.thehub-lot__spec div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hub-separator); }
.thehub-lot__spec div:first-child { border-top: none; }
.thehub-lot__spec dt { font-size: 13.5px; color: var(--hub-ink-row-label); }
.thehub-lot__spec dd { margin: 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.thehub-lot__card { background: var(--hub-surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.thehub-lot__card h3 { font-size: 16px; font-weight: 600; letter-spacing: var(--tracking-card); margin: 0; }
.thehub-lot__card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--hub-ink-secondary); }
.thehub-lot__exporter { display: flex; align-items: center; gap: 11px; }
.thehub-lot__avatar { width: 42px; height: 42px; border-radius: var(--radius-tile); background: var(--hub-green-bg); color: var(--hub-green-fg); display: grid; place-items: center; font-weight: 600; }
.thehub-lot__exporter b { display: block; font-size: 14.5px; font-weight: 600; }
.thehub-lot__exporter div span { font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-lot__link { font-size: 13.5px; font-weight: 500; color: var(--hub-accent); text-decoration: none; }
.thehub-lot__link:hover { color: var(--hub-accent-pressed); }
.thehub-lot__costs { margin: 0; }
.thehub-lot__costs div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hub-separator); }
.thehub-lot__costs div:first-child { border-top: none; }
.thehub-lot__costs dt { font-size: 13px; color: var(--hub-ink-row-label); }
.thehub-lot__costs dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.thehub-lot__costs .is-total dt,
.thehub-lot__costs .is-total dd { font-weight: 600; color: var(--hub-ink); }
.thehub-lot__card p.thehub-lot__note { font-size: 12px; color: var(--color-text-meta); }
.thehub-lot__card--cta { background: var(--hub-terminal-bg); }
.thehub-lot__card--cta h3 { color: var(--hub-terminal-fg); }
.thehub-lot__card--cta p { color: var(--hub-ink-on-dark-secondary); }
.thehub-lot__cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--radius-btn); background: var(--hub-accent); color: var(--hub-ink-on-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.thehub-lot__cta:hover { background: var(--hub-accent-pressed); color: var(--hub-ink-on-dark); }

@media (max-width: 1100px) { .thehub-lot__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .thehub-lot { padding: 20px 16px 36px; }
  .thehub-lot__price { font-size: 30px; }
  .thehub-lot__pricebar { padding: 20px; }
}

/* ---------------------------------------------------------------------------
   Trade Desk (design-library/tradedesk)

   The buyer side of the exchange: one chrome over ten screens. Components
   mirror the desk's design system: cards, callouts, metric rows, data tables,
   choice chips and monograms. Values come from the vendored tokens only.
--------------------------------------------------------------------------- */
.desk { max-width: 1440px; margin: 0 auto; }
.desk-chrome { background: var(--hub-terminal-bg); color: var(--hub-terminal-fg); padding: 0 40px; display: flex; align-items: center; gap: 18px; min-height: var(--chrome-height); flex-wrap: wrap; }
.desk-chrome__brand { font-size: 15px; font-weight: 600; letter-spacing: var(--tracking-wordmark); }
.desk-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.desk-nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--radius-control-sm); font-size: 13px; font-weight: 500; color: var(--hub-ink-on-dark-secondary); text-decoration: none; transition: var(--transition-control); }
.desk-nav a:hover { background: rgba(255, 255, 255, 0.1); color: var(--hub-terminal-fg); }
.desk-nav a.is-active { background: var(--hub-surface-card); color: var(--hub-ink); font-weight: 600; }
.desk-chrome__org { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.desk-chrome__org b { font-size: 13px; font-weight: 600; }
.desk-chrome__org span { font-size: 11.5px; color: var(--hub-ink-on-dark-tertiary); }

.desk-page { padding: 30px 40px 40px; }
.desk-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.desk-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-meta); }
.desk-page__head h1 { font-size: 30px; letter-spacing: var(--tracking-page); font-weight: 600; margin: 8px 0 0; }
.desk-page__head p { margin: 8px 0 0; max-width: 640px; font-size: 13.5px; line-height: var(--leading-relaxed); color: var(--hub-ink-secondary); }
.desk-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.desk-stack { display: flex; flex-direction: column; gap: 18px; }
.desk-rail { display: flex; flex-direction: column; gap: 16px; }

.desk-card { background: var(--hub-surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.desk-card--flush { padding: 0; gap: 0; overflow: hidden; }
.desk-card h2, .desk-card h3 { font-size: 16px; font-weight: 600; letter-spacing: var(--tracking-card); margin: 0; }
.desk-card--rail { padding: 20px 22px; gap: 13px; }
.desk-card--rail h2, .desk-card--rail h3 { font-size: 15px; letter-spacing: var(--tracking-row); }
.desk-card__head { padding: 18px 24px 14px; border-bottom: 1px solid var(--hub-separator); }
.desk-card__head h2, .desk-card__head h3 { margin: 0; }
.desk-card__head span { font-size: 12.5px; color: var(--color-text-meta); }
.desk-card__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.desk-card__sub { font-size: 12.5px; color: var(--color-text-meta); margin: 3px 0 0; }

.desk-callout { border-radius: var(--radius-well); padding: 13px 15px; font-size: 12.5px; line-height: 1.5; }
.desk-callout--blue { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.desk-callout--amber { background: var(--hub-amber-bg); color: var(--hub-amber-fg); }
.desk-callout--green { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.desk-callout--plain { background: var(--hub-surface-well); color: var(--hub-ink-secondary); }

.desk-table { width: 100%; border-collapse: collapse; }
  .desk-table th { text-align: left; padding: 10px 24px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow-loose); color: var(--color-text-meta); background: var(--hub-table-head); }
.desk-table td { padding: 12px 24px; border-top: 1px solid var(--hub-separator); font-size: 13px; }
.desk-table td.is-num { font-variant-numeric: tabular-nums; }
.desk-table td.is-strong { font-size: 13.5px; font-weight: 600; }

.desk-kv { display: flex; flex-direction: column; }
.desk-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; }
.desk-kv__row--divider { border-top: 1px solid var(--hub-separator); padding-top: 11px; }
.desk-kv__row span { font-size: 13px; color: var(--hub-ink-row-label); }
.desk-kv__row b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.desk-kv__row--emphasis b { font-size: 15px; }

.desk-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.desk-hint { font-size: 13px; line-height: 1.5; color: var(--hub-ink-secondary); }
.desk-ref { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--tracking-mono-brand); color: var(--color-text-meta); }
.desk-due { font-size: 11.5px; color: var(--color-text-meta); margin-left: 6px; }
.desk-card__line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.desk-card__line h2, .desk-card__line h3 { margin-top: 5px; }
.desk-subhead { font-size: 21px; font-weight: 600; letter-spacing: var(--tracking-section); margin: 30px 0 14px; }
.desk-cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.desk-btn--small { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: var(--radius-control-sm); }
.desk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.desk-stat { background: var(--hub-surface-card); border-radius: var(--radius-card-sm); box-shadow: var(--shadow-flat); padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; }
.desk-stat span { font-size: 11.5px; color: var(--color-text-meta); }
.desk-stat b { font-size: 21px; font-weight: 600; letter-spacing: var(--tracking-section); font-variant-numeric: tabular-nums; }
.desk-chip { height: 34px; padding: 0 14px; border: 1px solid var(--hub-border-control); border-radius: var(--radius-pill); background: transparent; color: var(--hub-ink); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: var(--transition-control); }
.desk-chip:hover { background: var(--hub-green-bg); }
.desk-chip[aria-pressed="true"] { background: var(--hub-green-bg); border-color: var(--hub-green-fg); color: var(--hub-green-fg); font-weight: 600; }

.desk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-badge); font-size: 11.5px; font-weight: 600; }
.desk-badge--green { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.desk-badge--amber { background: var(--hub-amber-bg); color: var(--hub-amber-fg); }
.desk-badge--blue { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.desk-badge--red { background: var(--hub-red-bg); color: var(--hub-red-fg); }
.desk-badge--done { background: var(--hub-terminal-bg); color: var(--hub-terminal-fg); }

.desk-mono { width: 26px; height: 26px; border-radius: var(--radius-badge-sm); background: var(--hub-surface-well); color: var(--hub-ink-secondary); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }

.desk-party { display: flex; align-items: center; gap: 10px; }
.desk-party__body { min-width: 0; flex-grow: 1; }
.desk-party__body b { display: block; font-size: 13.5px; font-weight: 500; }
.desk-party__body span { font-size: 11.5px; color: var(--color-text-meta); }

.desk-field { display: flex; flex-direction: column; gap: 6px; }
.desk-field label { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-meta); }
.desk-field input,
.desk-field select,
.desk-field textarea { width: 100%; border: 1px solid var(--hub-border-control); border-radius: var(--radius-control); background: var(--hub-surface-card); padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--hub-ink); }
.desk-field input:focus,
.desk-field select:focus,
.desk-field textarea:focus { outline: 2px solid var(--hub-accent); outline-offset: 1px; border-color: var(--hub-accent); }
.desk-field em { font-size: 11.5px; font-style: normal; color: var(--color-text-meta); line-height: 1.45; }
.desk-fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.desk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-control); background: var(--hub-accent); color: var(--hub-ink-on-dark); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: var(--transition-control); }
.desk-btn:hover { background: var(--hub-accent-pressed); color: var(--hub-ink-on-dark); }
.desk-btn--secondary { background: transparent; border: 1px solid var(--hub-border-control); color: var(--hub-ink); }
.desk-btn--secondary:hover { background: var(--hub-surface-well); color: var(--hub-ink); }
.desk-btn[disabled] { opacity: 0.55; cursor: default; }

.desk-notice { border-radius: var(--radius-well); padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.desk-notice--ok { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.desk-notice--error { background: var(--hub-red-bg); color: var(--hub-red-fg); }
.desk-empty { padding: 26px 24px; border-radius: var(--radius-well); background: var(--hub-surface-well); display: flex; flex-direction: column; gap: 8px; }
.desk-empty b { font-size: 14px; font-weight: 600; }
.desk-empty span { font-size: 13px; line-height: 1.5; color: var(--hub-ink-secondary); }

@media (max-width: 1100px) { .desk-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  /* The desk was designed on a 1440 canvas with no mobile treatment. On a phone
     the chrome stacks, the nav scrolls sideways, and tables scroll rather than
     squash, because a comparison table is unreadable when its columns wrap. */
  .desk-chrome { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
  .desk-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .desk-nav a { flex: 0 0 auto; height: 40px; }
  .desk-chrome__org { margin-left: 0; }
  .desk-page { padding: 20px 16px 40px; }
  .desk-page__head { flex-direction: column; gap: 14px; }
  .desk-page__head h1 { font-size: 24px; }
  .desk-actions { width: 100%; }
  .desk-btn { flex: 1 1 auto; }
  .desk-fields2 { grid-template-columns: 1fr; }
  .desk-card { padding: 18px 16px; }
  .desk-card--rail { padding: 16px; }
  .desk-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .desk-table th, .desk-table td { padding-left: 14px; padding-right: 14px; }
  .desk-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .desk-stat { padding: 14px 16px; }
  .desk-stat b { font-size: 18px; }
  .desk-cards2 { grid-template-columns: 1fr; }
  .desk-subhead { font-size: 18px; }
}

/* ===== Shop and category archives (WooCommerce, via WoodMart) =====
 *
 * The shop loop is WoodMart's own template, so it shipped WoodMart's palette:
 * a yellow-green accent (#83b735), a yellow alternative (#fbbc34), #767676 body
 * text and #bbbbbb struck prices. On the page ground that is a second visual
 * language, and the price, category, sale-flag and page-number pairs all sat
 * under the AA floor this theme documents. Re-pointing WoodMart's variables at
 * the design tokens fixes the contrast and folds the shop into the same colour
 * system as the rest of the storefront.
 *
 * The variables are declared on :root by WoodMart's inline stylesheet, which is
 * printed after this file, so the override is placed on the wrapper element
 * instead: its own declarations win over the inherited :root values for every
 * descendant regardless of source order.
 */
.thehub-site {
  --wd-primary-color: var(--hub-accent);
  --wd-alternative-color: var(--hub-accent-bright);
  --wd-text-color: var(--hub-ink-body);
  --wd-title-color: var(--hub-ink);
  --wd-entities-title-color: var(--hub-ink);
  --wd-entities-title-color-hover: var(--hub-accent-pressed);
  --wd-link-color: var(--hub-ink);
  --wd-link-color-hover: var(--hub-accent-pressed);

  /* WoodMart's accented button is its own variable, not --wd-primary-color, so
     re-pointing the palette above never reached it: every WoodMart "Add to
     cart" stayed stock #83b735 with white text, measured 2.39:1 on the lot
     page. The accent here is 5.45:1 white-on-green, and the press step 8.7:1.
     The radius is raised off 0px to the design system's control scale. */
  --btn-accented-bgcolor: var(--hub-accent);
  --btn-accented-bgcolor-hover: var(--hub-accent-pressed);
  --btn-accented-color: var(--hub-ink-on-dark);
  --btn-accented-color-hover: var(--hub-ink-on-dark);
  --btn-accented-brd-radius: var(--radius-control-sm);
  --btn-default-brd-radius: var(--radius-control-sm);
}

/* Struck-through prices were a 2:1 grey; the breadcrumb grey landed at 4.04:1
   on the page ground, just under the floor. WoodMart does not derive either from
   a variable, so both are set here. */
.thehub-site del,
.thehub-site del .amount,
.thehub-site del .woocommerce-Price-amount { color: var(--hub-ink-secondary); }
.thehub-site .breadcrumb-link,
.thehub-site .wd-breadcrumbs a { color: var(--hub-ink-body); }
/* The category links under each card (2.19:1) and the inactive "show 9 / 18 /
   24" controls (4.04:1) are hardcoded greys, not variables. */
.thehub-site .wd-product-cats a { color: var(--hub-ink-body); }
.thehub-site .wd-products-per-page .per-page-variation { color: var(--hub-ink-body); }

/* Archive heading. The shop and product-category pages had no h1 at all: the
   outline began at the h3 product names. */
.thehub-shop-head { margin: 0 0 var(--space-15); }
.thehub-shop-title { margin: 0; font-size: var(--type-page-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-page); color: var(--hub-ink); }

/* ===========================================================================
   Ecommerce components
   ---------------------------------------------------------------------------
   The buying path: card -> archive controls -> lot -> cart -> checkout. Each
   block below is a component the storefront actually renders; the palette and
   the geometry both come from the tokens. Radii that used to be 2-3px are
   raised to the design system's control/card scale here, deliberately: a 3px
   corner is not a value the design system carries.
   =========================================================================== */

/* --- Product card --------------------------------------------------------- *
 * The card's information hierarchy is: what it is (title), where it is from,
 * the basis of the number, then availability. The first and last already had a
 * home; origin, basis and availability are printed by the loop hook and laid
 * out here. On a destination-aware storefront the basis is the whole point:
 * "KES 1,150" and "USD 10.20" must never read as the same offer.
 */
.thehub-cardfacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; }
.thehub-cardfacts__origin { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--hub-ink-secondary); }
.thehub-cardfacts__origin::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hub-accent-bright); }
.thehub-basis { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--hub-ink-secondary); }
.thehub-basis b { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--hub-green-fg); background: var(--hub-green-bg); padding: 2px 6px; border-radius: var(--radius-tag); }
.thehub-basis em { font-style: normal; }
.thehub-cardfacts__stock { font-size: 11.5px; font-weight: 600; }
.thehub-cardfacts__stock.is-in { color: var(--hub-green-fg); }
.thehub-cardfacts__stock.is-out { color: var(--hub-red-fg); }

@media (max-width: 720px) {
  .thehub-cardfacts { gap: 5px 8px; margin-top: 6px; }
}

/* The card surface, so a product tile is the same card the rest of the store
   uses rather than whatever WoodMart drops. */
.thehub-site .wd-product .product-wrapper {
  background: var(--hub-surface-card);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-card-tight);
  overflow: hidden;
}
.thehub-site .wd-product .product-element-bottom { padding: 14px 15px 16px; }
.thehub-site .wd-product .woocommerce-loop-product__title,
.thehub-site .wd-product .wd-entities-title {
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

/* Missing-image plate. WoodMart's grey placeholder is not part of the design
   system, so a line with no illustration and no upload gets the monogram tile
   the commodity cards use. */
.thehub-site .thehub-product-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--hub-thumb-fill);
  color: var(--hub-green-fg);
  font-family: var(--font-mono);
  font-size: clamp(22px, 22%, 40px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- Archive controls ----------------------------------------------------- *
 * Result count, sort, per-page and the grid toggle sit in one tool row; the
 * count is the only text, so it takes the muted ink and the rest are controls
 * with the 3:1 border.
 */
.thehub-site .shop-loop-head { gap: 12px; }
.thehub-site .woocommerce-result-count { font-size: 13px; color: var(--hub-ink-secondary); margin: 0; }
.thehub-site .woocommerce-ordering select {
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--hub-border-control);
  border-radius: var(--radius-control-sm);
  background-color: var(--hub-surface-card);
  color: var(--hub-ink);
  font-size: 13.5px;
}
.thehub-site .wd-products-per-page { gap: 2px; }
.thehub-site .wd-products-per-page .per-page-title { font-size: 13px; color: var(--hub-ink-secondary); }
.thehub-site .wd-products-per-page .per-page-variation { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-control-sm); font-size: 13px; }
.thehub-site .wd-products-per-page .per-page-variation.current-variation { background: var(--hub-green-bg); color: var(--hub-green-fg); font-weight: 700; }
.thehub-site .wd-products-per-page .per-page-border { display: none; }
.thehub-site .wd-products-shop-view .shop-view { width: 34px; height: 34px; border-radius: var(--radius-control-sm); }
.thehub-site .wd-products-shop-view .shop-view.current-variation { background: var(--hub-green-bg); }

/* Pagination. A page number is a control and an active one is a state, so the
   current page is the dark chip with white ink (18:1) and the rest carry the
   control border. */
.thehub-site .woocommerce-pagination { margin: var(--space-19) 0 0; }
.thehub-site .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; }
.thehub-site .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.thehub-site .woocommerce-pagination .page-numbers a,
.thehub-site .woocommerce-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-target); height: var(--hit-target);
  padding: 0 12px;
  border: 1px solid var(--hub-border-control);
  border-radius: var(--radius-control-sm);
  background: var(--hub-surface-card);
  color: var(--hub-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.thehub-site .woocommerce-pagination .page-numbers a:hover { border-color: var(--hub-accent); color: var(--hub-accent-pressed); }
.thehub-site .woocommerce-pagination .page-numbers .current { background: var(--hub-ink); border-color: var(--hub-ink); color: var(--hub-ink-on-dark); }

/* --- Empty archive -------------------------------------------------------- */
.thehub-shopempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: var(--space-19) var(--space-17);
  border-radius: var(--radius-well);
  background: var(--hub-surface-well);
}
.thehub-shopempty b { font-size: 16px; font-weight: var(--weight-semibold); }
.thehub-shopempty span { max-width: 46ch; font-size: 13.5px; line-height: var(--leading-body); color: var(--hub-ink-secondary); }
.thehub-shopempty__actions { margin-top: var(--space-5); }

/* --- Cart ---------------------------------------------------------------- *
 * Sub-order groups are cards, the line is a row inside one, and the summary is
 * the sticky rail. The line item's price is the supplier's figure; the basis
 * bar above the basket names the market's currency so the two cannot be read
 * as the same number in two currencies.
 */
.thehub-vendorgroup { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: var(--radius-card-sm); overflow: hidden; box-shadow: var(--shadow-flat); }
.thehub-vendorgroup__head { background: var(--hub-surface-well); border-bottom: 1px solid var(--hub-hairline); }
.thehub-lineitem { border-bottom: 1px solid var(--hub-separator); }
.thehub-lineitem__img { border-radius: var(--radius-thumb); border: 1px solid var(--hub-hairline); }
.thehub-lineitem__name { line-height: 1.35; }
/* At 390 the fixed-width qty and price columns squeezed the name to a vertical
   stack of single characters. Below 720 the line wraps: image and name on the
   first row, the controls on their own row. */
@media (max-width: 720px) {
  .thehub-lineitem { flex-wrap: wrap; }
  .thehub-lineitem__info { flex-basis: calc(100% - 88px); }
  .thehub-lineitem__right { width: 100%; justify-content: space-between; gap: 12px; margin-top: var(--space-7); }
  .thehub-lineitem__price { width: auto; }
  .thehub-badge { align-self: flex-start; }
}
.thehub-badge { background: var(--hub-surface-field); border-radius: var(--radius-badge-sm); }
.thehub-vendorgroup__subtotal { border-top: 1px solid var(--hub-separator); }
.thehub-summary { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: var(--radius-card); padding: var(--space-16); box-shadow: var(--shadow-card); gap: var(--space-11); }
.thehub-summary__row--total { border-top: 1px solid var(--hub-separator); }
.thehub-checkout__cta { border-radius: var(--radius-control); height: var(--hit-target); }

/* The basis bar, on the cart and the checkout. It sits outside both grids
   (the theme's templates run the hook above the wrapper), so it carries its
   own gutter and matches the grid's content width. */
.thehub-basisbar {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: calc(var(--page-width) - 2 * var(--page-gutter));
  margin: 0 auto var(--space-15);
  padding: 13px 16px;
  box-sizing: border-box;
  border-radius: var(--radius-well);
  border: 1px solid var(--hub-hairline);
  background: var(--hub-surface-well);
  color: var(--hub-ink-secondary);
  font-size: 13px;
  line-height: var(--leading-body);
}
.thehub-basisbar svg { flex: none; margin-top: 1px; }
.thehub-basisbar--export { background: var(--hub-blue-bg); border-color: var(--hub-blue-line); color: var(--hub-blue-fg); }
@media (max-width: 1439px) { .thehub-basisbar { max-width: none; margin-left: var(--page-gutter); margin-right: var(--page-gutter); } }
@media (max-width: 720px) { .thehub-basisbar { margin-left: 16px; margin-right: 16px; } }

/* Empty cart. WooCommerce's own empty template is used (the theme does not
   override it), so the styling is here: one tinted panel and one clear way
   back to the shop. */
.thehub-site .cart-empty { padding: var(--space-19) var(--space-17); border-radius: var(--radius-well); font-size: 15px; text-align: center; }
.thehub-site .return-to-shop { margin-top: var(--space-11); text-align: center; }
.thehub-site .return-to-shop .button {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--hit-target); padding: 0 22px;
  background: var(--hub-accent); color: var(--hub-ink-on-dark);
  border: 0; border-radius: var(--radius-control);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.thehub-site .return-to-shop .button:hover { background: var(--hub-accent-pressed); color: var(--hub-ink-on-dark); }

/* --- Checkout ------------------------------------------------------------- *
 * Fields are grouped: the name pair shares a row, everything full-width takes
 * the whole grid. Labels are always visible (never placeholder-only), and the
 * required marker takes a red that clears 4.5:1 instead of the platform red.
 */
.thehub-checkout__fields { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: var(--radius-card); padding: var(--space-16); }
.thehub-checkout__fields .woocommerce-billing-fields__field-wrapper,
.thehub-checkout__fields .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); }
.thehub-checkout__fields .form-row { float: none; width: auto; }
.thehub-checkout__fields .form-row-wide { grid-column: 1 / -1; }
.thehub-checkout__fields label { font-size: 13px; font-weight: 600; }
.thehub-checkout__fields .required { color: var(--hub-red-fg); text-decoration: none; }
/* WooCommerce's own required marker is #e01020, which measures 4.38:1 on the
   page ground — under AA, and it was only being corrected inside the checkout
   fields, so the account and address forms kept the failing default. */
.thehub-site .required,
.thehub-site abbr.required { color: var(--hub-red-fg); text-decoration: none; }
@media (max-width: 720px) {
  .thehub-checkout__fields .woocommerce-billing-fields__field-wrapper,
  .thehub-checkout__fields .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}
.thehub-paybox { background: var(--hub-surface-card); border: 1px solid var(--hub-hairline); border-radius: var(--radius-card); padding: var(--space-16); }
.thehub-paybox .wc_payment_method { border: 1px solid var(--hub-border-control); border-radius: var(--radius-well); }
.thehub-paybox .wc_payment_method.is-selected { border-color: var(--hub-accent); box-shadow: var(--ring-selected); }

/* The sibling's per-destination methods panel. The markup is the plugin's; the
   geometry and colour are the design system's, so the block reads as this
   storefront rather than as an unstyled list. */
.thehub-paybox--methods { gap: var(--space-11); }
.thehub-paybox__intro { margin: 0; font-size: 13px; line-height: var(--leading-body); color: var(--hub-ink-secondary); }
.thehub-paymethods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.thehub-paymethods__item { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid var(--hub-hairline); border-radius: var(--radius-well); background: var(--hub-surface-well); }
.thehub-paymethods__item b { font-size: 13.5px; font-weight: var(--weight-semibold); }
.thehub-paymethods__item span { font-size: 12.5px; line-height: 1.45; color: var(--hub-ink-secondary); }
.thehub-paymethods__status { font-size: 11.5px; font-style: normal; color: var(--hub-amber-fg); }
.thehub-paymethods__item.is-unavailable { background: var(--hub-surface-card); border-style: dashed; }
.thehub-paymethods__item.is-unavailable b { color: var(--hub-ink-secondary); }
.thehub-paybox__terms { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-meta); }

/* Trust signals beside the methods. Two lines, deliberately not a method list. */
.thehub-paytrust { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: var(--space-11); border-top: 1px solid var(--hub-separator); font-size: 12.5px; color: var(--hub-ink-secondary); }
.thehub-paytrust span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Notices and states --------------------------------------------------- *
 * WooCommerce's message/info/error classes are re-dressed as the design
 * system's tinted panels. No coloured left or top border: the status ground
 * carries the meaning, which is the notice idiom this theme documents.
 */
.thehub-site .woocommerce-message,
.thehub-site .woocommerce-info,
.thehub-site .woocommerce-error,
.thehub-site .woocommerce-noreviews {
  border: 0;
  border-radius: var(--radius-well);
  padding: var(--space-11) 18px var(--space-11) 3.2em;
  font-size: 13.5px;
  line-height: var(--leading-body);
  position: relative;
}
.thehub-site .woocommerce-message { background: var(--hub-green-bg); color: var(--hub-green-fg); }
.thehub-site .woocommerce-info { background: var(--hub-blue-bg); color: var(--hub-blue-fg); }
.thehub-site .woocommerce-error { background: var(--hub-red-bg); color: var(--hub-red-fg); }
.thehub-site .woocommerce-message::before,
.thehub-site .woocommerce-info::before,
.thehub-site .woocommerce-error::before { color: inherit; left: 1em; top: 1em; }
.thehub-site .woocommerce-error li { margin: 0; }
.thehub-site ul.woocommerce-error { list-style: none; }
.thehub-site .woocommerce-message .button,
.thehub-site .woocommerce-info .button { color: inherit; text-decoration: underline; font-weight: 600; }
/* The same treatment for a link in a notice that is not a button. WooCommerce
   renders the logout confirmation's "Confirm and log out" without the .button
   class, so it fell through to the theme's accent ink on a green tint — a link
   a reader cannot find. It takes the notice's own ink instead. */
.thehub-site .woocommerce-message a,
.thehub-site .woocommerce-info a,
.thehub-site .woocommerce-error a { color: inherit; text-decoration: underline; font-weight: 600; }
.thehub-site .woocommerce-form__label-for-checkbox span,
.thehub-site .woocommerce-terms-and-conditions-checkbox-text { color: var(--hub-ink); }

/* --- Lot detail: the price basis ----------------------------------------- *
 * The lot price bar prints the CIF figure and then a set of reference facts —
 * among them the domestic Kenya price. On one line the two read as competing
 * offers in different currencies. The CIF basis stays the banner; the facts are
 * pushed onto their own line below a rule and take the muted ink, so the
 * domestic figure reads as the comparison it is.
 */
.thehub-lot__pricefacts { width: 100%; flex-basis: 100%; border-top: 1px solid var(--hub-separator); padding-top: var(--space-12); }
.thehub-lot__pricefacts span { color: var(--color-text-meta); }
.thehub-lot__pricefacts b { color: var(--hub-ink); }
.thehub-lot__pricelabel { color: var(--hub-accent-pressed); }
@media (max-width: 720px) {
  .thehub-lot__pricefacts { gap: 14px 20px; }
}