/* Finalform — layout. Every value reads from tokens.css. */

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

body {
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-fg);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  line-height: var(--ff-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ff-font-heading);
  font-weight: var(--ff-weight-medium);
  line-height: var(--ff-leading-tight);
  text-transform: var(--ff-case-heading);
  margin: 0;
  /* FM Bolyar Sans Pro's kerning collapses certain round-letter pairs
     (oo, oc) into an overlapping/ligature-looking mess -- e.g. "Cookies"
     and "Processing" -- at this font's default spacing. A small positive
     tracking keeps every pair legible without visibly loosening normal
     letter pairs. */
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }

.ff-wrap {
  max-width: var(--ff-container);
  margin: 0 auto;
  padding: 0 var(--ff-gutter);
}

/* Product grid — photo-led card */

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ff-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .products { grid-template-columns: minmax(0, 1fr); } }

.ff-card {
  border: var(--ff-card-border);
  padding: var(--ff-card-pad);
  text-align: center;
  transition: border-color var(--ff-duration) var(--ff-ease);
  display: flex;
  flex-direction: column;
}

/* Pins the CTA (Add to cart / Build Your Kit / Coming soon) to the
   card's bottom edge regardless of how much (or little) content —
   meta line, price, status — sits above it, so every card's button
   lines up across a row even when one card (e.g. Build-a-Kit) is
   missing rows the others have. */
.ff-card__cta { margin-top: auto; }

.ff-card:hover { border-bottom: var(--ff-card-hover-rule); }

.ff-card__link { display: block; }

.ff-card__photo {
  background: var(--ff-white);
  width: 260px;
  height: 260px;
  margin: 0 auto var(--ff-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ff-card__photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.ff-card__name { font-size: var(--ff-size-base); margin-bottom: var(--ff-space-1); }

.ff-card__meta {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-data);
  color: var(--ff-muted);
  margin: 0 0 var(--ff-space-3);
}

.ff-card__price { display: block; font-size: var(--ff-size-base); margin-bottom: var(--ff-space-2); }
.ff-card__price del { color: var(--ff-ink-400); }

.ff-price-unit {
  display: block;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
}

.ff-card .ff-status { justify-content: center; margin-bottom: var(--ff-space-4); }

.ff-card__cta {
  display: block;
  width: 100%;
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-fg);
  border: 1px solid var(--ff-btn-primary-border);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
  text-align: center;
  padding: var(--ff-space-3);
  cursor: pointer;
}

.ff-card__cta:hover { background: var(--ff-btn-primary-hover); }

/* Trace — shared by single-product spec block */

.ff-trace {
  background: var(--ff-trace-bg);
  height: var(--ff-trace-height);
  margin-bottom: var(--ff-space-3);
  display: flex;
  align-items: flex-end;
}

.ff-trace img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ff-specs {
  font-family: var(--ff-spec-font);
  font-size: var(--ff-spec-size);
  border-top: var(--ff-hairline);
  padding-top: var(--ff-space-2);
  margin: 0;
  display: grid;
  gap: var(--ff-spec-row-gap);
}

.ff-specs__row { display: flex; justify-content: space-between; gap: var(--ff-space-3); }
.ff-specs dt { color: var(--ff-spec-label-fg); }
.ff-specs dd { margin: 0; }

/* Single-product technical spec table */

.ff-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-font-data);
  font-size: var(--ff-spec-size);
  margin: var(--ff-space-6) 0;
}

.ff-spec-table th,
.ff-spec-table td {
  border-top: var(--ff-hairline);
  padding: var(--ff-space-3) var(--ff-space-2);
  text-align: left;
}

.ff-spec-table th { font-weight: var(--ff-weight-regular); color: var(--ff-spec-label-fg); width: 40%; }
.ff-spec-table td { text-align: right; }

.ff-spec-table tr.ff-spec-table__sequence th,
.ff-spec-table tr.ff-spec-table__sequence td {
  display: block;
  width: auto;
  text-align: left;
  background: var(--ff-surface);
}

.ff-spec-table tr.ff-spec-table__sequence td {
  letter-spacing: var(--ff-tracking-data);
  overflow-wrap: anywhere;
  padding-top: 0;
}

/* Certificate-of-analysis badge — under the SKU on single product */

.ff-coa-badge { margin: var(--ff-space-3) 0 var(--ff-space-5); }

.ff-coa-badge__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  border: 1px solid var(--ff-black);
  padding: var(--ff-space-2) var(--ff-space-4);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
}

.ff-coa-badge__link::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--ff-black);
  background: var(--ff-black);
  flex: none;
}

.ff-coa-badge__link:hover { background: var(--ff-black); color: var(--ff-white); }
.ff-coa-badge__link:hover::before { background: var(--ff-white); }

/* Single-product breadcrumb (Home / Shop / Product) — plain WooCommerce
   markup, no classes on the links themselves, so overrides need !important
   to beat the global anchor-color reset further down this file. */

.woocommerce-breadcrumb {
  margin: var(--ff-space-5) 0 var(--ff-space-6);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-ink-400);
}

.woocommerce-breadcrumb a {
  color: var(--ff-muted) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--ff-black) !important;
  text-decoration: underline;
}

/* Single-product layout — gallery + buy-box side by side on wider
   screens, matching a normal storefront PDP; stacked (previous
   behavior) below that. .product is WooCommerce's own wrapper with
   exactly two children here, .images and .summary. */

.single-product .product.type-product {
  display: block;
}
@media (min-width: 900px) {
  .single-product .product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: var(--ff-space-8);
    align-items: start;
  }
  /* .images and .summary are the only two children meant to sit side by
     side -- WooCommerce appends supplemental content (Overview, spec
     table, etc., via woocommerce_after_single_product_summary) as
     further siblings inside this same .product wrapper, and those need
     to span the full width below, not join the 2-column grid. */
  .single-product .product.type-product > :nth-child(n+3) {
    grid-column: 1 / -1;
  }
}

.woocommerce-product-gallery {
  max-width: 375px;
  margin: 0 auto var(--ff-space-6);
}
@media (min-width: 900px) {
  .woocommerce-product-gallery { max-width: 100%; margin: 0; }
}
.woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery__wrapper {
  border: var(--ff-hairline);
  border-radius: 16px;
  overflow: hidden;
}

/* Single-product buy-box polish */

.single-product .summary.entry-summary { padding-top: var(--ff-space-2); }
.single-product .product_title { margin: 0 0 var(--ff-space-2); }
.single-product .summary > .price {
  display: block;
  font-size: 1.5em;
  margin: 0 0 var(--ff-space-5);
}

.ff-purchase-mode-selector { margin: 0 0 var(--ff-space-4); }
.ff-purchase-mode-selector__label {
  display: block;
  margin-bottom: var(--ff-space-2);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-muted);
}

.ff-purchase-mode-toggle {
  display: flex;
  border: 1px solid var(--ff-input-border);
  border-radius: 999px;
  overflow: hidden;
}

.ff-purchase-mode-toggle__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--ff-space-3) var(--ff-space-2);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: none;
  cursor: pointer;
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-sm);
  line-height: 1.2;
  transition: background var(--ff-duration) var(--ff-ease), color var(--ff-duration) var(--ff-ease);
}

.ff-purchase-mode-toggle__btn + .ff-purchase-mode-toggle__btn { border-left: 1px solid var(--ff-input-border); }

.ff-purchase-mode-toggle__btn.is-active { background: var(--ff-black); color: var(--ff-white); }

.ff-purchase-mode-toggle__price {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  opacity: 0.75;
}

.ff-purchase-mode-toggle__btn:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: -2px;
}
.ff-purchase-mode-note {
  font-size: var(--ff-size-sm);
  color: var(--ff-muted);
  margin: 0 0 var(--ff-space-5);
}

form.cart { flex-wrap: wrap; }
form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--ff-input-border);
  border-radius: 999px;
  overflow: hidden;
  height: 48px;
}
form.cart .qty {
  width: 48px;
  height: 46px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
form.cart .qty:focus-visible { outline: none; }
.ff-qty-btn {
  width: 40px;
  height: 46px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ff-fg);
  font-family: var(--ff-font-body);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ff-qty-btn:hover { background: var(--ff-surface); }
.ff-qty-btn:first-child { border-right: 1px solid var(--ff-input-border); }
.ff-qty-btn:last-child { border-left: 1px solid var(--ff-input-border); }
form.cart .ff-qty-unit {
  margin-left: var(--ff-space-1);
}
form.cart .single_add_to_cart_button {
  border-radius: 999px !important;
  padding: var(--ff-space-3) var(--ff-space-7) !important;
  flex: 1 1 auto;
  min-width: 180px;
  text-align: center;
}

.single-product .product_meta {
  margin: var(--ff-space-5) 0 0;
  font-size: var(--ff-size-sm);
  color: var(--ff-muted);
}
.single-product .product_meta > span { display: block; margin-bottom: var(--ff-space-1); }
.single-product .product_meta a { color: inherit; text-decoration: underline; }

/* Single-product supplemental sections */

.ff-pdp-section {
  max-width: var(--ff-container-text);
  margin: var(--ff-space-7) 0;
  padding-top: var(--ff-space-6);
  border-top: var(--ff-rule-strong);
}

.ff-pdp-section h2 {
  font-size: var(--ff-size-h4);
  margin-bottom: var(--ff-space-3);
}

.ff-pdp-section p { color: var(--ff-fg); }

.ff-pdp-section--note {
  border-top: none;
  border-left: 3px solid var(--ff-ink-400);
  background: var(--ff-surface);
  padding: var(--ff-space-5);
  margin-top: 0;
}

.ff-pdp-section--note p {
  color: var(--ff-ink-200);
  font-size: var(--ff-size-sm);
  margin: 0;
}

.ff-pdp-info {
  display: grid;
  gap: var(--ff-space-3);
  margin: 0;
}
.ff-pdp-info > div { display: flex; justify-content: space-between; gap: var(--ff-space-4); border-top: var(--ff-hairline); padding-top: var(--ff-space-2); }
.ff-pdp-info dt { color: var(--ff-muted); font-family: var(--ff-font-data); font-size: var(--ff-size-sm); }
.ff-pdp-info dd { margin: 0; text-align: right; }

.ff-faq {
  border-top: var(--ff-hairline);
  padding: var(--ff-space-3) 0;
}
.ff-faq summary {
  cursor: pointer;
  font-weight: var(--ff-weight-medium);
  list-style: none;
}
.ff-faq summary::-webkit-details-marker { display: none; }
.ff-faq summary::before { content: "+ "; }
.ff-faq[open] summary::before { content: "\2212 "; }
.ff-faq p { margin: var(--ff-space-2) 0 0; color: var(--ff-muted); }

/* Related products — compact teaser row, not full shop cards */

.related.products {
  max-width: var(--ff-container);
  margin: var(--ff-space-8) auto 0;
  padding-top: var(--ff-space-6);
  border-top: var(--ff-rule-strong);
}

.related.products > h2 {
  font-size: var(--ff-size-h4);
  margin-bottom: var(--ff-space-5);
}

.related.products .products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ff-space-3);
}

.related.products .ff-card { padding: var(--ff-space-3); }
.related.products .ff-card__photo { height: 140px; margin-bottom: var(--ff-space-2); }
.related.products .ff-card__name { font-size: var(--ff-size-sm); }
.related.products .ff-card__meta,
.related.products .ff-status { display: none; }
.related.products .ff-card__price { font-size: var(--ff-size-sm); margin-bottom: var(--ff-space-3); }
.related.products .ff-card__cta { padding: var(--ff-space-2); font-size: var(--ff-size-xs); }

@media (max-width: 1024px) { .related.products .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .related.products .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shop pagination — square black tiles, white numbers. Current page
   uses the muted ink rather than pure black so it reads as "you are
   here" without relying on color. */

.woocommerce-pagination { margin-top: var(--ff-space-6); }

.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ff-space-2);
  list-style: none;
  padding: 0;
}

.woocommerce-pagination .page-numbers li { display: contents; }

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--ff-space-2);
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-fg);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
}

.woocommerce-pagination a.page-numbers:hover { background: var(--ff-btn-primary-hover); }

.woocommerce-pagination .page-numbers .current,
.woocommerce-pagination span.page-numbers.current {
  background: var(--ff-ink-600);
}

/* CoA index */

.ff-coa-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
}

.ff-coa-table th {
  font-weight: var(--ff-weight-regular);
  color: var(--ff-muted);
  text-align: left;
  padding: var(--ff-space-3) var(--ff-space-2);
  border-top: var(--ff-rule-strong);
}

.ff-coa-table td { padding: var(--ff-space-3) var(--ff-space-2); border-top: var(--ff-hairline); }
.ff-coa-table tr[data-superseded="1"] { color: var(--ff-muted); }
.ff-coa-table a { border-bottom: 1px solid currentColor; }

@media (max-width: 640px) {
  .ff-coa-table, .ff-coa-table tbody, .ff-coa-table tr, .ff-coa-table td { display: block; width: 100%; }
  .ff-coa-table thead { display: none; }
  .ff-coa-table tr { border-top: var(--ff-rule-strong); padding: var(--ff-space-3) 0; }
  .ff-coa-table td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; }
  .ff-coa-table td::before { content: attr(data-label); color: var(--ff-muted); }
}

/* Buttons — shared primary/secondary treatment */

.ff-btn {
  display: inline-block;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
  text-align: center;
  padding: var(--ff-space-3) var(--ff-space-5);
  border-radius: var(--ff-radius);
  cursor: pointer;
}

.ff-btn--lg { padding: var(--ff-space-4) var(--ff-space-6); }

.ff-btn--primary {
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-fg);
  border: 1px solid var(--ff-btn-primary-border);
}
.ff-btn--primary:hover { background: var(--ff-btn-primary-hover); }

.ff-btn--secondary {
  background: var(--ff-btn-secondary-bg);
  color: var(--ff-btn-secondary-fg);
  border: 1px solid var(--ff-btn-secondary-border);
}

.ff-btn--inverse {
  color: var(--ff-white);
  border-color: var(--ff-white);
}
.ff-btn--inverse:hover { background: var(--ff-white); color: var(--ff-black); }

/* Hero */

.ff-hero { background: var(--ff-black); color: var(--ff-white); }

.ff-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--ff-space-7);
  padding: var(--ff-space-9) 0;
}

.ff-hero__eyebrow {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-data);
  color: var(--ff-ink-200);
  margin: 0 0 var(--ff-space-4);
}

.ff-hero__headline {
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-h1);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--ff-space-5);
}
.ff-hero__headline strong { font-weight: var(--ff-weight-regular); -webkit-text-stroke: 0; }

.ff-hero__body {
  color: var(--ff-ink-200);
  max-width: 46ch;
  margin: 0 0 var(--ff-space-6);
}

.ff-hero__note {
  display: flex;
  align-items: center;
  gap: var(--ff-space-2);
  margin: var(--ff-space-5) 0 0;
  font-size: var(--ff-size-xs);
  color: var(--ff-ink-400);
}

.ff-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

@media (max-width: 900px) {
  .ff-hero__inner { grid-template-columns: 1fr; padding: var(--ff-space-7) 0; }
}

/* Trust badges */

.ff-trust { border-bottom: var(--ff-hairline); }

.ff-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ff-space-6);
  padding: var(--ff-space-7) 0;
}

.ff-trust__item svg { margin-bottom: var(--ff-space-3); }
.ff-trust__item h3 {
  font-size: var(--ff-size-base);
  font-weight: var(--ff-weight-medium);
  margin-bottom: var(--ff-space-1);
}
.ff-trust__item p { font-size: var(--ff-size-sm); color: var(--ff-muted); margin: 0; }

@media (max-width: 900px) { .ff-trust__grid { grid-template-columns: repeat(2, 1fr); } }

/* Materials grid — homepage-only card, no price */

.ff-materials { padding: var(--ff-space-9) 0; }

.ff-materials__head { text-align: center; margin-bottom: var(--ff-space-7); }
.ff-materials__head h2 {
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-h2);
  text-transform: uppercase;
  margin-bottom: var(--ff-space-3);
}
.ff-materials__head p { color: var(--ff-muted); margin: 0; }

.ff-mcards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ff-grid-gap);
  list-style: none;
  margin: 0 0 var(--ff-space-6);
  padding: 0;
}

@media (max-width: 1100px) { .ff-mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ff-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ff-mcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--ff-card-border);
  padding: var(--ff-card-pad);
  text-align: center;
  box-sizing: border-box;
  transition: border-color var(--ff-duration) var(--ff-ease);
}
.ff-mcard:hover { border-bottom: var(--ff-card-hover-rule); }
.ff-mcard__link { display: flex; flex-direction: column; flex: 1; }

.ff-mcard__photo {
  background: var(--ff-white);
  height: 180px;
  margin: 0 auto var(--ff-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ff-mcard__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ff-mcard__name {
  display: block;
  font-size: var(--ff-size-base);
  margin-bottom: var(--ff-space-2);
}

.ff-mcard__specs {
  display: block;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
  margin-bottom: var(--ff-space-4);
}
.ff-mcard__specs span { display: block; margin-bottom: 2px; }

.ff-mcard__cta { width: 100%; margin-top: auto; }

.ff-materials__all { text-align: center; }

/* Verify-batch dark section */

.ff-verify { background: var(--ff-black); color: var(--ff-white); }

.ff-verify__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ff-space-7);
  align-items: center;
  padding: var(--ff-space-9) 0;
}

.ff-verify__copy h2 {
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-h2);
  text-transform: uppercase;
  margin-bottom: var(--ff-space-4);
}
.ff-verify__copy p { color: var(--ff-ink-200); max-width: 50ch; margin-bottom: var(--ff-space-5); }

.ff-verify__list {
  list-style: none;
  margin: 0 0 var(--ff-space-6);
  padding: 0;
  display: grid;
  gap: var(--ff-space-2);
}
.ff-verify__list li { padding-left: var(--ff-space-5); position: relative; }
.ff-verify__list li::before { content: "\2713"; position: absolute; left: 0; }

.ff-verify__media {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-verify__media img { max-width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .ff-verify__grid { grid-template-columns: 1fr; padding: var(--ff-space-7) 0; }
}

/* Header + primary nav — full-width black bar */

.ff-header { background: var(--ff-black); color: var(--ff-white); position: relative; }

/* Wraps the primary nav + mobile-only extra links. On desktop this is
   transparent to layout (display:contents) so .ff-nav and the hidden
   mobile-extra list act as plain flex children of .ff-header__inner,
   same as before this wrapper existed. On mobile it becomes the actual
   dropdown panel -- see the 749px query below. */
.ff-nav-panel { display: contents; }

.ff-nav__list.ff-nav__list--mobile-extra { display: none; }

.ff-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--ff-space-1);
  cursor: pointer;
  color: var(--ff-white);
}

.ff-nav-toggle__close { display: none; }
.ff-nav-toggle[aria-expanded="true"] .ff-nav-toggle__open { display: none; }
.ff-nav-toggle[aria-expanded="true"] .ff-nav-toggle__close { display: block; }

.ff-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ff-space-5);
  padding-top: var(--ff-space-4);
  padding-bottom: var(--ff-space-4);
  flex-wrap: wrap;
}

.ff-header__logo {
  display: flex;
  align-items: center;
  gap: var(--ff-space-3);
}

.ff-header__logo-img {
  height: 40px;
  width: auto;
  /* Source art is solid black on transparent; invert to white so it
     reads against the header's black background. */
  filter: invert(1);
}

.ff-header__logo-text {
  font-family: var(--ff-font-display);
  font-size: var(--ff-size-h4);
  font-weight: var(--ff-weight-regular);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-white);
}

.ff-header__end {
  display: flex;
  align-items: center;
  gap: var(--ff-space-4);
}

.ff-nav__list {
  display: flex;
  gap: var(--ff-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ff-size-base);
  color: var(--ff-white);
}

.ff-nav__list a { display: inline-block; padding: var(--ff-space-1) 0; color: var(--ff-white); }

.ff-nav__list a:hover,
.ff-nav__list .current-menu-item > a { border-bottom: 1px solid var(--ff-white); }

.ff-header__b2b { padding: var(--ff-space-2) var(--ff-space-4); font-size: var(--ff-size-xs); }

.ff-cart-toggle,
.ff-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-1);
  background: none;
  border: none;
  padding: var(--ff-space-1);
  cursor: pointer;
  color: var(--ff-white);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
}

.ff-cart-toggle svg,
.ff-search-toggle svg { width: 20px; height: 20px; flex: none; }

.ff-search-form[hidden] { display: none; }

.ff-search-form {
  display: flex;
  align-items: center;
  gap: var(--ff-space-2);
}

.ff-search-form input[type="search"] {
  width: 160px;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-white);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-3);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
}

/* Announcement strip */

.ff-announce {
  background: var(--ff-ink-800);
  color: var(--ff-white);
}

.ff-announce__inner {
  text-align: center;
  padding: var(--ff-space-2) var(--ff-gutter);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-data);
}

.ff-main { display: block; min-height: 50vh; }

/* Footer */

.ff-footer { background: var(--ff-black); color: var(--ff-white); margin-top: var(--ff-space-8); }

.ff-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--ff-space-6);
  padding: var(--ff-space-8) 0 var(--ff-space-7);
}

.ff-footer__mark {
  font-family: var(--ff-font-display);
  font-size: var(--ff-size-h5);
  text-transform: uppercase;
  letter-spacing: var(--ff-tracking-label);
  margin: 0 0 var(--ff-space-3);
}

.ff-footer__blurb { color: var(--ff-ink-200); font-size: var(--ff-size-sm); max-width: 32ch; margin: 0 0 var(--ff-space-4); }

.ff-footer__col h4 {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-ink-400);
  margin: 0 0 var(--ff-space-4);
  font-weight: var(--ff-weight-regular);
}

.ff-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ff-space-2); }
.ff-footer__col a { font-size: var(--ff-size-sm); color: var(--ff-ink-200); }
.ff-footer__col a:hover { color: var(--ff-white); }

.ff-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ff-space-4);
  padding: var(--ff-space-5) 0;
  border-top: 1px solid var(--ff-ink-800);
  flex-wrap: wrap;
}

.ff-footer__copy { margin: 0; font-size: var(--ff-size-sm); color: var(--ff-ink-400); }
.ff-footer__legal { margin: 0; font-size: var(--ff-size-sm); color: var(--ff-ink-400); }
.ff-footer__legal a { color: var(--ff-ink-400); }
.ff-footer__legal a:hover { color: var(--ff-white); }

@media (max-width: 900px) {
  .ff-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ff-footer__top { grid-template-columns: 1fr; }
}

/* RUO disclaimer banner */

.ff-disclaimer {
  background: var(--ff-disclaimer-bg);
  color: var(--ff-disclaimer-fg);
}

.ff-footer .ff-disclaimer { border-top: 1px solid var(--ff-ink-800); }

.ff-disclaimer__inner {
  max-width: var(--ff-container-text);
  margin: 0 auto;
  padding: var(--ff-space-6) var(--ff-gutter);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-sm);
  line-height: var(--ff-leading-body);
  letter-spacing: var(--ff-tracking-label);
  text-align: center;
}

/* Product-page quantity input — WooCommerce renders this by default but
   ships it completely unstyled, easy to miss next to Add to Cart. */
form.cart {
  display: flex;
  align-items: center;
  gap: var(--ff-space-3);
  margin: var(--ff-space-5) 0;
}
form.cart .quantity { display: flex; }
form.cart .qty {
  width: 64px;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  text-align: center;
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
}
form.cart .qty:focus-visible { outline: var(--ff-focus-ring); outline-offset: 2px; border-color: var(--ff-input-border-focus); }
form.cart .single_add_to_cart_button {
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-fg);
  border: 1px solid var(--ff-btn-primary-border);
  border-radius: var(--ff-radius);
  padding: var(--ff-space-3) var(--ff-space-6);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
  cursor: pointer;
}
form.cart .single_add_to_cart_button:hover { background: var(--ff-btn-primary-hover); }

.ff-remove-link {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-muted);
  text-decoration: underline;
}
.ff-remove-link:hover { color: var(--ff-black); }

/* Full cart page — WooCommerce's classic cart table, otherwise unstyled
   since this theme disables WC's default stylesheet entirely. */

.woocommerce-cart-form { margin-bottom: var(--ff-space-7); }

.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ff-space-5) 0;
}
.shop_table th {
  text-align: left;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-muted);
  font-weight: var(--ff-weight-regular);
  padding: var(--ff-space-3) var(--ff-space-3);
  border-bottom: var(--ff-rule-strong);
}
.shop_table td {
  padding: var(--ff-space-4) var(--ff-space-3);
  border-bottom: var(--ff-hairline);
  vertical-align: middle;
}
.shop_table td.product-remove { width: 40px; text-align: center; }
.shop_table td.product-thumbnail img { width: 64px; height: auto; display: block; }
.shop_table td.product-quantity .qty {
  width: 64px;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  text-align: center;
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
}
.shop_table td.actions { text-align: right; }

@media (max-width: 749px) {
  /* Classic WC cart table doesn't reflow on its own -- stack each row
     into a card instead of squeezing a 4-column table into a phone
     width. Relies on the data-title attribute WooCommerce's own
     cart.php template puts on each <td> for exactly this purpose. */
  .shop_table thead { display: none; }
  .shop_table,
  .shop_table tbody,
  .shop_table tr,
  .shop_table td { display: block; width: 100%; }

  .shop_table tr {
    position: relative;
    border: var(--ff-hairline);
    border-radius: var(--ff-radius);
    padding: var(--ff-space-4);
    margin-bottom: var(--ff-space-4);
  }

  .shop_table td { border-bottom: none; padding: var(--ff-space-1) 0; }

  .shop_table td.product-remove {
    position: absolute;
    top: var(--ff-space-3);
    right: var(--ff-space-3);
    width: auto;
    padding: 0;
  }

  .shop_table td.product-thumbnail { padding-bottom: var(--ff-space-3); }

  .shop_table td.product-name,
  .shop_table td.product-price,
  .shop_table td.product-quantity,
  .shop_table td.product-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ff-space-3);
  }

  .shop_table td.product-price::before,
  .shop_table td.product-quantity::before,
  .shop_table td.product-subtotal::before {
    content: attr(data-title);
    font-family: var(--ff-font-data);
    font-size: var(--ff-size-xs);
    letter-spacing: var(--ff-tracking-label);
    text-transform: uppercase;
    color: var(--ff-muted);
  }

  .shop_table td.actions { text-align: left; }
  .shop_table td.actions > * { width: 100%; }
}

.cart-collaterals { max-width: 420px; margin-left: auto; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th,
.cart_totals td { padding: var(--ff-space-3); border-top: var(--ff-hairline); text-align: left; }
.cart_totals th { color: var(--ff-muted); font-weight: var(--ff-weight-regular); }
.cart_totals .order-total th,
.cart_totals .order-total td { border-top: var(--ff-rule-strong); font-weight: var(--ff-weight-medium); }
.wc-proceed-to-checkout .checkout-button,
.woocommerce-cart-form .button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--ff-space-4);
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-fg);
  border: 1px solid var(--ff-btn-primary-border);
  border-radius: var(--ff-radius);
  padding: var(--ff-space-3) var(--ff-space-6);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
  cursor: pointer;
}
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart-form .button:hover { background: var(--ff-btn-primary-hover); }

@media (max-width: 749px) {
  /* Collapsed header row: logo + [menu toggle, search, cart] only --
     everything else (nav links, B2B/reseller buttons) moves into the
     dropdown panel below. */
  .ff-header__b2b,
  .ff-header__reseller { display: none; }

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

  .ff-nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ff-black);
    border-top: 1px solid var(--ff-ink-800);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 50;
  }

  .ff-nav-panel.is-open { display: block; }

  .ff-nav-panel .ff-nav { display: block; }

  .ff-nav-panel .ff-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: var(--ff-size-base);
    padding: var(--ff-space-3) var(--ff-gutter) var(--ff-space-5);
  }

  .ff-nav-panel .ff-nav__list--mobile-extra {
    display: flex;
    border-top: 1px solid var(--ff-ink-800);
  }

  .ff-nav-panel .ff-nav__list a {
    display: block;
    padding: var(--ff-space-3) 0;
  }
}

/* Hard override: WooCommerce Blocks (wc-blocks.css, needed structurally for
   the Cart/Checkout blocks) ships its own link colors and loads after this
   file. Nothing on this site should ever render blue or orange links.
   Excludes .button (ff-card__cta, mini-cart buttons, etc.) and .page-numbers
   (pagination tiles) — those set their own intentional white-on-black text
   and must not be forced to inherit the surrounding text color. */
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers),
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers):link,
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers):visited,
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers):hover,
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers):active,
a:not(.button):not(.ff-btn):not(.ff-coa-badge__link):not(.page-numbers):focus {
  color: inherit !important;
}

/* Same wc-blocks.css bleed, non-anchor case: price amounts default to a
   brand-blue swatch in WooCommerce Blocks' own CSS. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
  color: inherit !important;
}

/* Reseller dashboard */

.ff-reseller-dashboard { max-width: var(--ff-container-text); }

.ff-reseller-section {
  margin: 0 0 var(--ff-space-7);
  padding-top: var(--ff-space-6);
  border-top: var(--ff-rule-strong);
}
.ff-reseller-section:first-child { border-top: none; padding-top: 0; }

.ff-reseller-section h2 {
  font-size: var(--ff-size-h4);
  margin-bottom: var(--ff-space-3);
}

.ff-reseller-link {
  display: flex;
  gap: var(--ff-space-2);
  max-width: 480px;
}
.ff-reseller-link input {
  flex: 1;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-3);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
}

.ff-reseller-field {
  display: block;
  max-width: 200px;
  margin: 0 0 var(--ff-space-4);
}
.ff-reseller-field span {
  display: block;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  color: var(--ff-muted);
  margin-bottom: var(--ff-space-1);
  text-transform: uppercase;
}
.ff-reseller-field input,
.ff-reseller-table input[type="number"] {
  width: 100%;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-3);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  box-sizing: border-box;
}
/* Plain typed price, not a stepped value — no up/down spinner. */
.ff-reseller-product-flat-markup {
  -moz-appearance: textfield;
}
.ff-reseller-product-flat-markup::-webkit-outer-spin-button,
.ff-reseller-product-flat-markup::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ff-reseller-field input:focus-visible,
.ff-reseller-table input:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: 2px;
  border-color: var(--ff-input-border-focus);
}

.ff-reseller-table { width: 100%; margin: var(--ff-space-4) 0; }
.ff-reseller-table th, .ff-reseller-table td { text-align: left; padding: var(--ff-space-2) var(--ff-space-2); }
.ff-reseller-table thead th {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-muted);
  border-bottom: var(--ff-rule-strong);
}
.ff-reseller-table tbody th { font-weight: var(--ff-weight-regular); }

/* Scoped to the markup table only (not Order feed / Earnings ledger,
   which share .ff-reseller-table but have their own column needs) —
   table-layout:auto was squeezing the price input narrower than the
   percent input because its header text is longer. Fixed layout with
   explicit widths keeps both input columns the same generous size
   regardless of header/content length. */
.ff-reseller-markup-table { table-layout: fixed; }
.ff-reseller-markup-table th:nth-child(1),
.ff-reseller-markup-table td:nth-child(1) { width: 26%; }
.ff-reseller-markup-table th:nth-child(2),
.ff-reseller-markup-table td:nth-child(2) { width: 16%; }
.ff-reseller-markup-table th:nth-child(3),
.ff-reseller-markup-table td:nth-child(3),
.ff-reseller-markup-table th:nth-child(4),
.ff-reseller-markup-table td:nth-child(4) { width: 20%; }
.ff-reseller-markup-table th:nth-child(5),
.ff-reseller-markup-table td:nth-child(5) { width: 18%; }
.ff-reseller-preview { font-family: var(--ff-font-data); }

.ff-reseller-bounds { font-size: var(--ff-size-sm); color: var(--ff-muted); }

.ff-reseller-notice {
  display: none;
  font-size: var(--ff-size-sm);
  padding: var(--ff-space-2) var(--ff-space-3);
  border: var(--ff-hairline);
  margin-bottom: var(--ff-space-3);
}

.ff-qty-unit {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
  margin-left: var(--ff-space-2);
}

.ff-purchase-mode-note {
  font-size: var(--ff-size-sm);
  color: var(--ff-muted);
  margin-top: calc(-1 * var(--ff-space-2));
  margin-bottom: var(--ff-space-3);
}

/* Checkout — RUO attestation + signature */

.ff-attestation {
  margin: var(--ff-space-5) 0;
  padding: var(--ff-space-4);
  border: var(--ff-hairline);
  background: var(--ff-surface);
}

.ff-attestation__heading {
  font-size: var(--ff-size-h5);
  margin: 0 0 var(--ff-space-3);
}

.ff-attestation__text {
  font-size: var(--ff-size-sm);
  color: var(--ff-muted);
  line-height: var(--ff-leading-body);
  margin: 0 0 var(--ff-space-4);
}

.ff-attestation__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ff-space-2);
  font-size: var(--ff-size-base);
  margin-bottom: var(--ff-space-5);
}
.ff-attestation__checkbox input {
  margin-top: 3px;
  flex: none;
}

.ff-attestation__signature label {
  display: block;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  color: var(--ff-muted);
  text-transform: uppercase;
  margin-bottom: var(--ff-space-2);
}

.ff-attestation__signature-input {
  width: 100%;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-3);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  box-sizing: border-box;
}
.ff-attestation__signature-input:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: 2px;
  border-color: var(--ff-input-border-focus);
}

.ff-attestation__signature-preview {
  margin-top: var(--ff-space-3);
  padding: var(--ff-space-3) 0 var(--ff-space-2);
  border-bottom: var(--ff-rule-heavy);
  min-height: 1.4em;
  font-family: var(--ff-font-heading);
  font-style: italic;
  font-size: var(--ff-size-h5);
  color: var(--ff-fg-strong);
}

.ff-card__preorder-note {
  margin: var(--ff-space-2) 0 0;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
  text-align: center;
}

.ff-coming-soon {
  display: inline-block;
  margin: var(--ff-space-3) 0;
  padding: var(--ff-space-3) var(--ff-space-5);
  border: 1px dashed var(--ff-ink-400);
  color: var(--ff-muted);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  letter-spacing: var(--ff-tracking-label);
}

/* Reseller dashboard — payment methods editor */

.ff-payment-method-row {
  display: flex;
  gap: var(--ff-space-2);
  align-items: center;
  margin-bottom: var(--ff-space-3);
}
.ff-payment-method-row select {
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-2);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  flex: none;
  width: 220px;
}
.ff-payment-method-row input {
  flex: 1;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: 0 var(--ff-space-3);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  box-sizing: border-box;
}

.ff-payment-method-qr {
  display: flex;
  align-items: center;
  gap: var(--ff-space-2);
  flex: none;
}
.ff-payment-method-qr-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border: var(--ff-hairline);
  flex: none;
}
.ff-payment-method-qr-file {
  flex: none;
  width: 160px;
  height: auto;
  border: none;
  padding: 0;
  font-size: var(--ff-size-xs);
}

/* Checkout — payment methods shown for the ff_manual_payment gateway */

.ff-payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--ff-space-4);
  margin-top: var(--ff-space-3);
}

.ff-payment-method {
  border: var(--ff-hairline);
  padding: var(--ff-space-3);
  text-align: center;
}

.ff-payment-method__label {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  text-transform: uppercase;
  color: var(--ff-muted);
  margin-bottom: var(--ff-space-1);
}

.ff-payment-method__value {
  font-size: var(--ff-size-sm);
  word-break: break-all;
  margin-bottom: var(--ff-space-2);
}

.ff-payment-method__qr {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.ff-payment-method__note {
  margin-top: var(--ff-space-2);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
  line-height: var(--ff-leading-body);
}

/* "Coming soon" placeholder pages (Shipping, Returns, etc.) */

.ff-lab-construction {
  max-width: 720px;
  margin: var(--ff-space-8) auto;
  text-align: center;
}

.ff-lab-construction__photo {
  display: block;
  width: 100%;
  height: auto;
  border: var(--ff-hairline);
  margin-bottom: var(--ff-space-5);
}

.ff-lab-construction p {
  color: var(--ff-muted);
  max-width: 46ch;
  margin: 0 auto;
}

/* Build-a-Kit — shop-grid "Coming soon" CTA, same feel as .ff-coming-soon
   but sized/positioned as a button so it sits where the real CTA will. */

.ff-card__cta--soon {
  background: transparent;
  color: var(--ff-muted);
  border: 1px dashed var(--ff-ink-400);
  cursor: default;
}
.ff-card__cta--soon:hover { background: transparent; }

/* Build-a-Kit — picker */

.ff-kit-builder {
  max-width: var(--ff-container-text);
  margin: var(--ff-space-6) 0;
}

.ff-kit-builder__size {
  display: flex;
  gap: var(--ff-space-3);
  margin-bottom: var(--ff-space-5);
}

.ff-kit-builder__size-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--ff-space-2);
  border: var(--ff-hairline);
  padding: var(--ff-space-3);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  cursor: pointer;
}

.ff-kit-builder__count {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
  color: var(--ff-muted);
  margin-bottom: var(--ff-space-3);
}

.ff-kit-builder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ff-space-3);
  margin-bottom: var(--ff-space-4);
}

.ff-kit-builder__item {
  display: flex;
  flex-direction: column;
  gap: var(--ff-space-2);
  border: var(--ff-hairline);
  padding: var(--ff-space-3);
}

.ff-kit-builder__item.is-selected {
  border-color: var(--ff-black);
}

.ff-kit-builder__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--ff-space-1);
}

.ff-kit-builder__item-name { font-size: var(--ff-size-sm); }

.ff-kit-builder__item-price {
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-muted);
}

.ff-kit-builder__item-batch {
  width: 100%;
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-xs);
  padding: 0 var(--ff-space-2);
}
.ff-kit-builder__item-batch:disabled { color: var(--ff-ink-400); }

.ff-kit-builder__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ff-input-border);
  align-self: flex-start;
}

.ff-kit-builder__stepper .ff-qty-btn {
  width: 34px;
  height: 38px;
  font-size: 16px;
}

.ff-kit-builder__item-qty {
  min-width: 32px;
  text-align: center;
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
}

.ff-kit-builder__error {
  border-left: 3px solid var(--ff-black);
  padding: var(--ff-space-2) var(--ff-space-3);
  margin-bottom: var(--ff-space-4);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-sm);
}

.ff-kit-builder__summary {
  background: var(--ff-surface);
  padding: var(--ff-space-4);
  margin-bottom: var(--ff-space-4);
}

.ff-kit-builder__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--ff-size-sm);
  padding: var(--ff-space-1) 0;
}

.ff-kit-builder__row--discount { color: var(--ff-muted); }

.ff-kit-builder__row--total {
  border-top: var(--ff-rule-strong);
  margin-top: var(--ff-space-2);
  padding-top: var(--ff-space-3);
  font-size: var(--ff-size-md);
  font-weight: var(--ff-weight-medium);
}

#ff-kit-builder__submit:disabled {
  background: var(--ff-ink-200);
  border-color: var(--ff-ink-200);
  color: var(--ff-ink-600);
  cursor: not-allowed;
}

/* Batch selector on a normal product page */

.ff-batch-selector select {
  height: var(--ff-input-height);
  background: var(--ff-input-bg);
  color: var(--ff-input-fg);
  border: 1px solid var(--ff-input-border);
  font-family: var(--ff-font-body);
  font-size: var(--ff-size-base);
  padding: 0 var(--ff-space-3);
}