/* ==========================================================================
   Mavericks Aminos : components
   Auxentis Group Inc.

   Numbered sections, the Reforged convention. Every section is enumerated
   here, which the Reforged record failed to do and cost a rebuild.

    1. Base and document
    2. Type scale
    3. Containers and vertical rhythm
    4. Links
    5. Focus, global
    6. Forms and fields
    7. Buttons, the system (orange fill, blue secondary, ghost, quiet, chip)
    8. Buttons, premium treatment
    9. Product archive and the card
   10. Single product
   11. Cart, checkout and account surfaces
   12. WooCommerce notices
   13. Header and footer chrome
   14. Research-use-only and compliance copy
   15. Mobile pass, touch targets and overflow
   16. The research access gate
   17. Insiders, the email capture

   Ownership. Blocksy owns container widths, the global palette registration,
   base typography and the default page and post layout, all fed from
   bridge.css. The header and the footer are built in the Blocksy header and
   footer builder, not in PHP. This file styles what those produce. Nothing
   here renders markup.
   ========================================================================== */


/* ==========================================================================
   1. Base and document
   ========================================================================== */

body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--brand-font-body);
  font-size: var(--mav-body-size);
  line-height: var(--mav-body-lh);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--brand-accent);
  color: var(--brand-ink-on-accent);
}


/* ==========================================================================
   2. Type scale
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: var(--brand-font-heading);
  color: var(--brand-heading);
  line-height: var(--mav-heading-lh);
}

h1, .page-title { font-size: var(--mav-h1); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: var(--mav-h2); font-weight: 700; letter-spacing: -0.012em; }
h3 { font-size: var(--mav-h3); font-weight: 700; }
h4 { font-size: var(--mav-h4); font-weight: 700; }
h5 { font-size: var(--mav-h5); font-weight: 600; }
h6 { font-size: var(--mav-h6); font-weight: 600; }

.woocommerce-breadcrumb {
  font-size: var(--mav-breadcrumb-size);
  color: var(--brand-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ==========================================================================
   3. Containers and vertical rhythm
   ========================================================================== */

@media (max-width: 1024px) {
  :root:root { --theme-content-vertical-spacing: var(--mav-content-space-tab); }
}

@media (max-width: 767px) {
  :root:root { --theme-content-vertical-spacing: var(--mav-content-space-mob); }
}


/* ==========================================================================
   4. Links
   Content links only. Buttons are excluded by name rather than by hoping a
   broad anchor rule misses them. Reforged's own lesson: set ink positively
   on the button, do not try to exclude buttons from a broad anchor rule.
   ========================================================================== */

main a:not(.button):not(.elementor-button):not(.wp-element-button):not(.wc-block-components-button):not(.mav-btn):not(.add_to_cart_button) {
  color: var(--brand-link);
  text-underline-offset: 0.2em;
}

main a:not(.button):not(.elementor-button):not(.wp-element-button):not(.wc-block-components-button):not(.mav-btn):not(.add_to_cart_button):hover {
  color: var(--brand-link-hover);
}

/* On the inverted navy band the blue lightens and orange returns. */
.mav-dark a:not(.button):not(.elementor-button):not(.mav-btn) {
  color: var(--brand-link-on-deep);
}

.mav-dark a:not(.button):not(.elementor-button):not(.mav-btn):hover {
  color: var(--brand-accent);
}


/* ==========================================================================
   5. Focus, global
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Orange is 2.92:1 on white, which is not a focus indicator. The blue is
   5.68:1. On the navy band the orange is 6.83:1 and takes over. */
.mav-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--brand-accent);
}


/* ==========================================================================
   6. Forms and fields
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.wc-block-components-text-input input {
  min-height: var(--mav-input-height);
  background: var(--brand-bg);
  color: var(--brand-text);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: var(--mav-field-radius);
  font-family: var(--brand-font-body);
  font-size: var(--mav-body-size);
}

textarea { min-height: var(--mav-textarea-height); }

::placeholder { color: var(--brand-text-muted); opacity: 1; }

label,
.wc-block-components-checkbox__label {
  color: var(--brand-text);
}

.woocommerce .password-input button.show-password-input,
.password-input button.show-password-input {
  color: var(--brand-text-muted);
}

.woocommerce .password-input button.show-password-input:hover,
.password-input button.show-password-input:hover {
  color: var(--brand-accent);
}


/* ==========================================================================
   7. Buttons, the system

   Three rules that matter and are easy to get wrong.

   a. Ink is set positively on the button, never by excluding buttons from a
      broad anchor rule.
   b. Ink is set twice, color and -webkit-text-fill-color, because a
      gradient-filled button on WebKit will otherwise clip the label.
   c. The .loading state re-asserts opacity and both ink properties, or the
      label vanishes during the ajax add-to-cart.

   Ink on an orange fill is navy at 6.83:1. White on this orange is 2.92:1
   and fails, so white never appears on an accent fill anywhere in the build.
   ========================================================================== */

.elementor-button,
ul.products .button,
.single_add_to_cart_button,
.wc-block-components-button,
.wp-element-button,
.mav-btn {
  min-height: var(--mav-btn-min-height);
  padding: var(--mav-btn-padding);
  font-family: var(--brand-font-body);
  font-size: var(--mav-btn-size);
  font-weight: 600;
  border-radius: var(--mav-field-radius);
  background: var(--brand-accent);
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  border: none;
  box-shadow: var(--mav-glow-rest);
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
  cursor: pointer;
}

.elementor-button:hover,
ul.products .button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.wp-element-button:hover,
.mav-btn:hover {
  background: var(--brand-primary-hover);
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  box-shadow: var(--mav-glow-hover);
  transform: translateY(-1px);
}

.elementor-button:active,
ul.products .button:active,
.single_add_to_cart_button:active,
.wc-block-components-button:active,
.mav-btn:active {
  transform: translateY(0);
  box-shadow: var(--mav-glow-rest);
}

.elementor-button:disabled,
.wc-block-components-button:disabled,
.mav-btn[aria-disabled="true"],
.mav-btn:disabled {
  background: var(--brand-surface-alt);
  color: var(--brand-text-muted);
  -webkit-text-fill-color: var(--brand-text-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Ghost. Outlined, accent ink, no fill. */
.mav-btn--ghost,
main a.mav-btn--ghost:not(.button):not(.elementor-button) {
  background: transparent;
  color: var(--brand-accent-ink);
  -webkit-text-fill-color: var(--brand-accent-ink);
  border: var(--mav-border-width) solid var(--brand-accent);
  box-shadow: none;
}

.mav-btn--ghost:hover {
  background: rgb(254 104 0 / 0.10);
  color: var(--brand-accent-ink);
  -webkit-text-fill-color: var(--brand-accent-ink);
  border-color: var(--brand-primary-hover);
  box-shadow: none;
  transform: none;
}

/* Quiet. For secondary actions that must not compete with add to cart. */
.mav-btn--quiet {
  background: var(--brand-surface-alt);
  color: var(--brand-text);
  -webkit-text-fill-color: var(--brand-text);
  border: var(--mav-border-width) solid var(--brand-border);
  box-shadow: none;
}

.mav-btn--quiet:hover {
  background: var(--brand-surface);
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
  border-color: var(--brand-accent);
  box-shadow: none;
  transform: none;
}

/* Secondary. The blue fill. White ink passes at 5.68:1 resting and 9.16:1
   on hover, which is why this one takes white and the orange never does. */
.mav-btn--secondary {
  background: var(--brand-secondary);
  color: var(--brand-ink-on-secondary);
  -webkit-text-fill-color: var(--brand-ink-on-secondary);
  border: none;
  box-shadow: var(--mav-glow-blue-rest);
}

.mav-btn--secondary:hover {
  background: var(--brand-secondary-hover);
  color: var(--brand-ink-on-secondary);
  -webkit-text-fill-color: var(--brand-ink-on-secondary);
  box-shadow: var(--mav-glow-blue-hover);
}

/* Chip. Size selectors and filter pills. */
.mav-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  font-family: var(--brand-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-text-muted);
  background: var(--brand-surface-alt);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: 2px;
}

.mav-chip[aria-pressed="true"],
.mav-chip--on {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Uppercase tracked variant, Reforged's .rfg-insiders__btn equivalent. */
.mav-btn--tracked {
  height: 44px;
  padding: 0 26px;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: 2px;
  border: var(--mav-border-width) solid var(--brand-accent);
}


/* ==========================================================================
   8. Buttons, premium treatment

   Five layers, the Reforged anatomy, rebuilt on the Mavericks orange.
     1. base fill, three stop gradient, lit top into the brand orange into a
        darkened foot, so the object has a light source
     2. specular dome, a radial highlight pinned upper left
     3. bevel, 1px white top edge at 0.45 and 1px black bottom edge at 0.35
     4. ground, a tight dark contact shadow plus a wide warm pool at 0.28
     5. sweep, a bright band on ::after that crosses on hover

   Opt in with .mav-btn--premium so ordinary buttons stay flat and cheap.
   ========================================================================== */

.mav-btn--premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 22% 8%, rgb(255 255 255 / 0.32) 0%, rgb(255 255 255 / 0) 55%),
    linear-gradient(180deg, #FF8A3C 0%, #FE6800 52%, #C85000 100%);
  /* Reforged runs a wide warm pool at 0.28 because it sits on a dark ground.
     On white that reads as a smudge, so the pool drops and the contact
     shadow does the work. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -1px 0 rgb(0 0 0 / 0.28),
    0 1px 2px rgb(0 7 34 / 0.22),
    0 6px 18px rgb(254 104 0 / 0.20);
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

.mav-btn--premium::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.38) 50%, rgb(255 255 255 / 0) 100%);
  transform: skewX(-18deg);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

.mav-btn--premium:hover::after { left: 120%; }

.mav-btn--premium:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(0 0 0 / 0.28),
    0 1px 2px rgb(0 7 34 / 0.22),
    0 8px 24px rgb(254 104 0 / 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .mav-btn--premium::after { transition: none; }
  .elementor-button,
  ul.products .button,
  .wc-block-components-button,
  .mav-btn { transition: none; }
  .elementor-button:hover,
  ul.products .button:hover,
  .wc-block-components-button:hover,
  .mav-btn:hover { transform: none; }
}


/* ==========================================================================
   9. Product archive and the card
   ========================================================================== */

ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--brand-surface);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: var(--mav-field-radius);
  padding: 16px;
}

ul.products li.product:hover {
  border-color: var(--brand-accent);
}

/* The image plate. Vial photography is shot on white, so the plate stays
   white on the dark card rather than the product floating on navy. */
ul.products li.product img {
  background: var(--brand-media-plate);
  border-radius: 2px;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--brand-font-heading);
  font-size: var(--mav-h6);
  font-weight: 700;
  color: var(--brand-heading);
}

.mav-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.mav-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.mav-card__sizes span {
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-text-muted);
  background: var(--brand-surface-alt);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: 2px;
}

ul.products li.product .price {
  color: var(--brand-heading);
  font-weight: 700;
}

/* margin-top:auto pins the action row to the bottom so cards of different
   title lengths still line up. */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

/* Ink asserted again at card level, and again on .loading. This is the rule
   that stops the label disappearing mid ajax. */
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

ul.products li.product a.add_to_cart_button.loading {
  opacity: 1;
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

/* The card action row stacks, so a second control such as View COA cannot
   be pushed off the right edge at narrow widths. Reforged hit this. */
.mav-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}


/* ==========================================================================
   10. Single product
   ========================================================================== */

.single-product div.product .product_title {
  font-size: var(--mav-h2);
}

.single-product div.product .woocommerce-product-gallery img {
  background: var(--brand-media-plate);
  border-radius: var(--mav-field-radius);
}

.single-product div.product .price {
  color: var(--brand-heading);
  font-size: var(--mav-h4);
  font-weight: 700;
}

.woocommerce-tabs ul.tabs li a {
  color: var(--brand-text-muted);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--brand-heading);
  border-bottom: 2px solid var(--brand-accent);
}


/* ==========================================================================
   11. Cart, checkout and account surfaces

   Classic shortcode surfaces. The compliance snippets hook classic actions,
   so cart, checkout and my-account carry [woocommerce_cart],
   [woocommerce_checkout] and [woocommerce_my_account], never the block
   equivalents. Block selectors are kept below only so a stray block page
   does not render unstyled.
   ========================================================================== */

.woocommerce-cart table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--brand-surface);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: var(--mav-field-radius);
}

.woocommerce-cart table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order th {
  color: var(--brand-heading);
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout .woocommerce-checkout-review-order td {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--brand-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--brand-accent);
}

/* Block fallbacks, hairlines only. */
.wc-block-components-totals-item,
.wc-block-cart-items__row {
  border-color: var(--brand-border);
}

@media (max-width: 768px) {
  .wc-block-components-checkout-step,
  .wp-block-woocommerce-checkout-order-summary-block,
  .wp-block-woocommerce-cart-order-summary-block,
  .wc-block-cart-items,
  .wp-block-woocommerce-cart-line-items-block {
    padding: 18px 14px;
  }
}


/* ==========================================================================
   12. WooCommerce notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--brand-surface-alt);
  border-top-color: var(--brand-accent);
  color: var(--brand-text);
}

.woocommerce-error { border-top-color: var(--brand-error); }

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--brand-accent);
}


/* ==========================================================================
   13. Header and footer chrome

   Built in the Blocksy header and footer builder. This file styles the
   output. No PHP renders header or footer markup, and nothing here does
   either. Double ownership is the most common cause of a build where a
   change in one place has no visible effect.
   ========================================================================== */

.ct-header [data-id~="logo"] .site-logo-container {
  --logo-max-height: 60px;
}

.ct-header {
  background: var(--brand-bg);
  border-bottom: var(--mav-border-width) solid var(--brand-border);
}

/* Reforged's numbers, measured live: 120px row, 12px nav at 1.7px tracking. */
.ct-header [data-row="middle"] .ct-container {
  min-height: 120px;
}

.ct-header .menu-item > a {
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--brand-text);
}

/* Hover only. The active item is deliberately NOT set here. Blocksy paints a
   current menu item with a selector carrying one more class than this file
   can write, so a colour declared here never applies, which is how the
   active state ended up being Blocksy's fallback rather than a choice. It is
   assigned in bridge.css as --theme-link-active-color instead. */

.ct-header .menu-item > a:hover {
  color: var(--brand-link);
}

/* The footer is the inverted band. White site, navy foot. Orange passes as
   text again down here at 6.83:1, so it carries the hover. */
footer.ct-footer {
  /* Background is assigned in bridge.css through Blocksy's own palette
     variable. Declaring it here loses to Blocksy's selector. */
  border-top: var(--mav-border-width) solid var(--brand-surface-deep);
  color: rgb(255 255 255 / 0.72);
}

footer.ct-footer a { color: var(--brand-text-inverse); }
footer.ct-footer a:hover { color: var(--brand-accent); }

/* Widget titles only. Column headings are section 13.1, which sets them to
   the accent the way Reforged does. This rule used to catch every h3 in the
   footer at (0,2,2) and quietly beat .mav-foot-col h3 at (0,1,1), which is
   why those headings came out white on the first pass. */
footer.ct-footer .widget-title {
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-text-inverse);
}


/* Footer column links are white, not the lightened blue.

   Section 4 hands every link inside a .mav-dark band the lightened blue,
   which is right for a link or two inside an inverted strip. A column of
   eight links is not that. White reads as a list, the blue reads as eight
   separate alerts, and the orange still carries the hover at 6.83:1.

   The selector repeats the whole :not() chain from section 4 and adds one
   class. Anything shorter loses. */

.mav-footer.mav-dark a:not(.button):not(.elementor-button):not(.mav-btn) {
  color: rgb(255 255 255 / 0.82);
}

.mav-footer.mav-dark a:not(.button):not(.elementor-button):not(.mav-btn):hover {
  color: var(--brand-accent);
}


/* ==========================================================================
   13.2 Header cart

   Reforged runs a single header row: logo on the left, then menu, cart and
   search on the right. There is no utility strip above it, and the research
   use statement lives in the footer instead. An earlier version of this
   build invented a top row. It has been removed.
   ========================================================================== */

.ct-header-cart .ct-cart-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-text);
  text-decoration: none;
}

.ct-header-cart .ct-cart-item:hover {
  color: var(--brand-link);
}

.ct-header-cart .ct-amount {
  font-family: var(--brand-font-body);
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

.ct-header-cart .ct-dynamic-count-cart {
  background: var(--brand-accent);
  color: var(--brand-ink-on-accent);
  font-family: var(--brand-font-body);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 767px) {

  .ct-header-cart .ct-cart-item {
    min-height: 44px;
  }

  .ct-header-cart .ct-amount {
    display: none;
  }
}


/* ==========================================================================
   14. Research-use-only and compliance copy

   This copy is the disclaimer the whole legal position rests on. Minnesota
   dropped the UCC conspicuousness safe harbours at Minn. Stat. 336.1-201
   (b)(10), so a court applies a totality test rather than a checklist. It is
   built to over-deliver: its own block, its own rule, full contrast, and
   never below 13px on any viewport.
   ========================================================================== */

.mav-ruo {
  padding: 14px 0;
  border-top: var(--mav-border-width) solid var(--brand-border);
  color: var(--brand-text);
  font-size: 13px;
  line-height: 1.6;
}

.mav-ruo strong {
  color: var(--brand-heading);
  font-weight: 700;
}

.mav-disclaimer {
  padding: 16px 18px;
  margin: 24px 0;
  background: var(--brand-surface-alt);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--mav-field-radius);
  color: var(--brand-text);
  font-size: 14px;
  line-height: 1.65;
}

.mav-disclaimer strong { color: var(--brand-heading); }

/* Consent block at registration and checkout. */
.mav-consent {
  padding: 14px 16px;
  background: var(--brand-surface-alt);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--mav-field-radius);
  margin: 16px 0;
}

.mav-consent label { font-size: 14px; line-height: 1.55; }


/* The two controls that create a record. Blocksy sizes its own checkboxes
   at 16px and leaves these at the browser default 13px, which had the most
   load-bearing control on the checkout page ending up the smallest thing on
   it. The mobile pass takes them to 22px. */

.mav-consent input[type="checkbox"],
.woocommerce-form-register input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  accent-color: var(--brand-accent);
}


/* ==========================================================================
   15. Mobile pass, touch targets and overflow

   Cloned from the Reforged mobile audit, which found five real defects.
   The two that apply to Mavericks as built are the attestation checkboxes
   and the compliance copy, both of which were too small to hit or read.
   ========================================================================== */

@media (max-width: 767px) {

  h1, .page-title { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }

  /* Attestation checkboxes are the gate to the whole order. A 13px target
     is not a target. */
  .mav-consent input[type="checkbox"],
  .woocommerce-form-register input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .mav-consent label,
  .woocommerce-form-register label {
    font-size: 15px;
    line-height: 1.55;
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  /* Compliance copy stays readable. It is never decorative. */
  .mav-ruo { font-size: 13px; }

  /* Buttons reach a real target height on touch. */
  .elementor-button,
  ul.products .button,
  .single_add_to_cart_button,
  .wc-block-components-button,
  .mav-btn {
    min-height: 44px;
  }

  /* Batch and lot codes, order numbers and long emails must wrap rather
     than push the page sideways. */
  .woocommerce-order-overview,
  .woocommerce-table--order-details,
  .mav-coa-code,
  .woocommerce-account .woocommerce-MyAccount-content {
    overflow-wrap: anywhere;
  }

  ul.products li.product { padding: 12px; }
}

/* ==========================================================================
   13.1 Footer content

   Blocksy's footer builder. Four widget areas across the middle row and
   Blocksy's own copyright element in the bottom row. Every column is a
   Custom HTML widget. That is the Reforged structure, read off the live
   install on 2026-09-20, and it replaces a PHP rendered footer that was
   guessed at rather than looked up.

   Why Custom HTML and not wp_nav_menu: a menu printed by wp_nav_menu picks
   up Blocksy's own .menu rules, which lay the items out inline. That is
   exactly how the first version of this footer collapsed into one unbroken
   run of link text. A hand written ul in a Custom HTML widget gets none of
   those rules.

   Contrast on the navy ground, computed: white 19.93, white at 0.72 alpha
   10.28, orange 6.83.
   ========================================================================== */

.mav-foot-col h3 {
  font-family: var(--brand-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 14px;
}

/* display: grid rather than block. Reforged does this, and it is what keeps
   the row gap honest regardless of what the list items contain. */
.mav-foot-col ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mav-foot-col a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brand-text-inverse);
  text-decoration: none;
}

.mav-foot-col a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The brand column. Reforged runs a 40px logo image here. Until the artwork
   lands this is type, sized and line boxed to stand where that image will,
   so swapping it in later moves nothing. */
.mav-foot-mark {
  display: block;
  font-family: var(--brand-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 40px;
  color: var(--brand-text-inverse);
  margin-bottom: 14px;
}

.mav-foot-line,
.mav-foot-addr {
  font-size: 15px;
  line-height: 24px;
  color: rgb(255 255 255 / 0.72);
  margin: 0 0 14px;
  max-width: 36ch;
}

.mav-foot-addr a {
  color: var(--brand-text-inverse);
  text-decoration: none;
}

.mav-foot-addr a:hover { color: var(--brand-accent); }

/* --- The bottom row, inside Blocksy's copyright element --- */

.mav-foot-legal {
  display: block;
}

/* Reforged sets this disclaimer at 11px. It is left at 13px here on
   purpose. Minn. Stat. 336.1-201(b)(10) drops the UCC formatting safe
   harbours and leaves a totality test decided by the court, so shrinking
   the one piece of compliance copy that appears on every page is the
   opposite of what this build's own legal position argues for. Section 14
   says the same thing. */
.mav-foot-ruo {
  font-size: 13px;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.72);
  margin: 0 0 8px;
}

.mav-foot-copy {
  font-size: 14px;
  color: var(--brand-text-inverse);
}


/* ==========================================================================
   16. The research access gate

   The front page, and a .mav-dark band by construction. tokens.css already
   names the deep surface as the footer, the gate and anything marked
   .mav-dark, so nothing new is introduced here.

   The chrome is trimmed rather than rebuilt. The wordmark stays. The
   navigation, the search and the cart go, because every one of them leads
   somewhere this visitor cannot reach yet. display: none rather than
   visibility, so they leave the tab order and the accessibility tree with
   them.

   Contrast on the navy ground, computed: white 19.93, white at 0.78 alpha
   11.94, white at 0.68 alpha 9.19, orange 6.83, the lightened blue 5.54.
   ========================================================================== */

body.mav-gate-page {
  background-color: var(--brand-surface-deep);
}

/* Blocksy prints its own page title band above the content. The gate carries
   an h1 of its own, and two headings is one too many. */
body.mav-gate-page .hero-section {
  display: none;
}

body.mav-gate-page .entry-content {
  max-width: none;
  padding: 0;
}

body.mav-gate-page .ct-header [data-row="middle"] nav,
body.mav-gate-page .ct-header [data-row="middle"] .ct-header-search,
body.mav-gate-page .ct-header [data-id="search"],
body.mav-gate-page .ct-header-cart,
body.mav-gate-page .ct-header [data-id="trigger"] {
  display: none;
}

/* The footer columns are a site map. A visitor who has not passed the gate
   has no use for one. The copyright row stays, because the research use
   statement it carries is still true on this page. */
body.mav-gate-page footer.ct-footer [data-row="middle"] {
  display: none;
}

.mav-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 80px 24px 96px;
  background: var(--brand-surface-deep);
  color: var(--brand-text-inverse);
}

.mav-gate__inner {
  width: 100%;
  max-width: 680px;
}

.mav-gate__eyebrow {
  display: block;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 14px;
}

.mav-gate__title {
  font-family: var(--brand-font-display);
  font-size: var(--mav-h1);
  font-weight: 800;
  line-height: var(--mav-heading-lh);
  color: var(--brand-text-inverse);
  margin: 0 0 22px;
}

.mav-gate__lede {
  font-size: 16px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.78);
  margin: 0 0 18px;
  max-width: 62ch;
}

.mav-gate__error {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--brand-accent);
  background: rgb(254 104 0 / 0.12);
  color: var(--brand-text-inverse);
  font-size: 15px;
}

.mav-gate__form {
  margin-top: 30px;
  padding-top: 30px;
  border-top: var(--mav-border-width) solid rgb(255 255 255 / 0.14);
}

/* The statements are the control, so they are set at body size in full
   contrast and every one of them is its own target. Minn. Stat.
   336.1-201(b)(10) drops the UCC formatting safe harbours and leaves a
   totality test decided by the court, which means there is no size you can
   point at and be safe. Small grey print is exactly what gets looked at. */

.mav-gate__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-inverse);
  cursor: pointer;
}

.mav-gate__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  accent-color: var(--brand-accent);
}

.mav-gate__submit {
  margin-top: 10px;
  min-width: 180px;
}

.mav-gate__decline {
  margin: 26px 0 0;
  font-size: 14px;
  color: rgb(255 255 255 / 0.68);
}

.mav-gate__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 0;
  font-size: 13px;
}

@media (max-width: 767px) {

  .mav-gate {
    min-height: 0;
    padding: 48px 20px 64px;
  }

  .mav-gate__title {
    font-size: 30px;
  }

  .mav-gate__check {
    min-height: 44px;
  }

  .mav-gate__check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .mav-gate__submit {
    width: 100%;
  }
}


/* ==========================================================================
   17. Insiders, the email capture

   Reforged's .rfg-insiders band, measured live on 2026-09-20 and rebuilt on
   the Mavericks palette. It sits on the gate page under the attestation,
   which is where Reforged puts it. Someone who will not pass the gate, or
   who is not ready to, can still leave an address.

   The honeypot is hidden from sight rather than from assistive technology.
   Off screen rather than display:none keeps its label readable to a screen
   reader and keeps the field in the DOM, which is the whole point: a bot
   fills every field it is handed.

   Contrast on the navy ground, computed: white 19.93, white at 0.72 alpha
   10.28, placeholder at 0.55 alpha 6.19, orange 6.83.
   ========================================================================== */

.mav-insiders-band {
  background: var(--brand-surface-deep);
  padding: 0 24px 48px;
}

.mav-insiders {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 36px;
  text-align: center;
}

.mav-insiders__eyebrow {
  margin: 0 0 8px;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.mav-insiders__lede {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
}

.mav-insiders__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Two classes, not one. Section 6 styles every email input at (0,1,1) with
   a white ground and dark ink, which is right on the light body and wrong on
   this band, and it beats a single class. Written short, this rule would
   simply never apply.

   16px on the input, not 15px. Anything smaller and iOS zooms the page on
   focus, which throws the layout on the one screen that has to feel solid. */
.mav-insiders .mav-insiders__input {
  flex: 1 1 260px;
  height: 44px;
  min-height: 44px;
  padding: 0 15px;
  background: transparent;
  border: var(--mav-border-width) solid rgb(255 255 255 / 0.22);
  border-radius: var(--mav-field-radius);
  color: var(--brand-text-inverse);
  font-family: var(--brand-font-body);
  font-size: 16px;
}

.mav-insiders .mav-insiders__input::placeholder {
  color: rgb(255 255 255 / 0.55);
}

.mav-insiders .mav-insiders__input:focus {
  border-color: var(--brand-accent);
  outline: none;
}

/* Reforged gives this button its own size rather than reusing the site
   button, and the ink is set twice for the same reason it is on the cards. */
.mav-insiders__btn {
  height: 46px;
  padding: 0 28px;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  background: var(--brand-accent);
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  border: var(--mav-border-width) solid var(--brand-accent);
  border-radius: 2px;
  cursor: pointer;
}

.mav-insiders__btn:hover {
  box-shadow: var(--mav-glow-hover);
}

.mav-insiders__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgb(255 255 255 / 0.72);
}

.mav-insiders__note--bad {
  color: var(--brand-accent);
}

.mav-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 767px) {

  .mav-insiders .mav-insiders__input,
  .mav-insiders__btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   18. Gate 2.0, account surface
   ========================================================================== */

/* --- 18. gate 2.0, account surface --- */

.mav-gate__tabs {
  display: flex;
  gap: 0;
  margin: 30px 0 0;
  border-bottom: var(--mav-border-width) solid rgb(255 255 255 / 0.14);
}

.mav-gate__tab {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--brand-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.62);
  border-bottom: 2px solid transparent;
  margin-bottom: calc(var(--mav-border-width) * -1);
}

.mav-gate__tab:hover,
.mav-gate__tab:focus-visible {
  color: var(--brand-text-inverse);
}

.mav-gate__tab.is-active {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

.mav-gate__panel {
  margin-top: 28px;
}

.mav-gate__panel .form-row {
  margin: 0 0 18px;
}

.mav-gate__panel .form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
}

.mav-gate__panel .form-row .required {
  color: var(--brand-accent);
  text-decoration: none;
  border: 0;
}

.mav-gate__panel .input-text,
.mav-gate__panel select {
  width: 100%;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--brand-text-inverse);
  background: rgb(255 255 255 / 0.06);
  border: var(--mav-border-width) solid rgb(255 255 255 / 0.22);
  border-radius: 3px;
}

.mav-gate__panel .input-text:focus,
.mav-gate__panel select:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.mav-gate__panel select option {
  color: #111;
  background: #fff;
}

@media (min-width: 600px) {
  .mav-gate__panel .form-row-first,
  .mav-gate__panel .form-row-last {
    display: inline-block;
    width: calc(50% - 9px);
  }
  .mav-gate__panel .form-row-first { margin-right: 14px; }
}

.mav-gate__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  color: rgb(255 255 255 / 0.72);
  cursor: pointer;
}

.mav-gate__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--brand-accent);
}

.mav-gate__sum {
  max-width: 280px;
}

.mav-gate__switch {
  margin: 20px 0 0;
  font-size: 14px;
  color: rgb(255 255 255 / 0.68);
}

.mav-gate__panel .woocommerce-privacy-policy-text p {
  font-size: 13px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.6);
  margin: 4px 0 20px;
}

.mav-gate .woocommerce-error,
.mav-gate .woocommerce-message,
.mav-gate .woocommerce-info {
  margin: 22px 0 0;
  padding: 12px 16px;
  list-style: none;
  border-left: 3px solid var(--brand-accent);
  background: rgb(254 104 0 / 0.12);
  color: var(--brand-text-inverse);
  font-size: 15px;
}

@media (max-width: 767px) {
  .mav-gate__tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 13px 10px;
  }
  .mav-gate__panel .form-row-first,
  .mav-gate__panel .form-row-last {
    width: 100%;
    margin-right: 0;
  }
}

/* ==========================================================================
   19. Certificates of analysis
   ========================================================================== */

/* --- 19. certificates --- */

.mav-coa {
  margin: 0 0 48px;
}

.mav-coa__heading {
  font-size: 25px;
  margin: 0 0 20px;
}

.mav-coa__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
}

.mav-coa__input {
  flex: 1 1 320px;
  min-height: var(--mav-btn-min-height);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--brand-text);
  background: var(--brand-bg);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: var(--mav-field-radius);
}

.mav-coa__input:focus {
  outline: 2px solid var(--brand-link);
  outline-offset: 1px;
}

.mav-coa__clear {
  font-size: 14px;
  color: var(--brand-link);
}

.mav-coa__count {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}

.mav-coa__empty {
  margin: 0 0 20px;
  padding: 22px 24px;
  background: var(--brand-surface);
  border-left: 3px solid var(--brand-accent);
  color: var(--brand-text);
}

.mav-coa__note {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--brand-text-muted);
}

.mav-coa__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.mav-coa-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--brand-bg);
  border: var(--mav-border-width) solid var(--brand-border);
  border-radius: var(--mav-field-radius);
}

.mav-coa-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
}

.mav-coa-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.mav-coa-badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--brand-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

.mav-coa-badge--lot {
  background: var(--brand-surface-alt);
  color: var(--brand-text);
}

.mav-coa-card__meta {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}

.mav-coa-card__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
}

.mav-coa-card__meta dt {
  margin: 0;
  color: var(--brand-text-muted);
}

.mav-coa-card__meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--brand-text);
  text-align: right;
}

.mav-coa-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.mav-coa-card__actions .mav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mav-coa-card__pending {
  font-size: 14px;
  font-style: italic;
  color: var(--brand-text-muted);
}

.mav-card__coa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  text-decoration: none;
}

@media (max-width: 575px) {
  .mav-coa__grid {
    grid-template-columns: 1fr;
  }
  .mav-coa-card__actions .mav-btn {
    flex: 1 1 100%;
  }
}