/* ============================================================================
   909 Aminos skin for the WooCommerce pages the storefront hands off to:
   cart, checkout, order-received and account.

   The SPA is Tailwind; these pages are WooCommerce Blocks inside the active
   theme. Rather than load Tailwind here, this restates the same palette as
   plain custom properties so the two sides read as one site.
   ========================================================================= */

/* The site is dark only. */
:root {
  color-scheme: dark;
  --apex-accent:   #0ea5e9;  /* sky-500  */
  --apex-accent-d: #38bdf8;  /* sky-400  */
  --apex-ink:      #f4f4f5;  /* zinc-100 */
  --apex-body:     #a1a1aa;  /* zinc-400 */
  --apex-muted:    #71717a;  /* zinc-500 */
  --apex-line:     #27272a;  /* zinc-800 */
  --apex-surface:  #18181b;  /* zinc-900 */
  --apex-sunken:   #09090b;  /* zinc-950 */
  --apex-radius:   12px;
}

/* ---------------------------------------------------------------- canvas */

body.apex-woo {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--apex-sunken);
  color: var(--apex-body);
}

/* The theme's own header and footer would compete with the 909 Aminos chrome. The
   plugin stops them rendering at all — hiding them here still built them, mini
   cart included, which left that block firing failed Store API requests on
   every page. This stays as a fallback for a theme that builds its chrome
   some other way than a template part. */
body.apex-woo .wp-site-blocks > header.wp-block-template-part,
body.apex-woo .wp-site-blocks > footer.wp-block-template-part {
  display: none;
}

body.apex-woo .wp-site-blocks > main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 6rem;
}

body.apex-woo h1,
body.apex-woo h2,
body.apex-woo h3,
body.apex-woo .wc-block-components-title {
  color: var(--apex-ink);
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ------------------------------------------------------------ 909 Aminos chrome */

.apex-bar {
  background: var(--apex-ink);
  color: #d4d4d8;
}

.apex-bar__in,
.apex-nav__in,
.apex-legal__in {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
}

.apex-bar__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  border-radius: 4px;
  background: #0ea5e9;
  color: #fff;
  padding: 0.125rem 0.5rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.apex-bar__msg {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.apex-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--apex-line);
  background: color-mix(in srgb, var(--apex-surface) 90%, transparent);
  backdrop-filter: blur(12px);
}

.apex-nav__in { justify-content: space-between; padding: 0.875rem 1rem; }

.apex-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--apex-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The 909 mark, sized to match the storefront header's. */
.apex-brand__logo {
  height: 18px;
  width: auto;
  color: var(--apex-ink);
}

.apex-brand__sub {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--apex-muted);
}

.apex-back {
  font-size: 12px;
  font-weight: 600;
  color: var(--apex-accent);
  text-decoration: none;
}
.apex-back:hover { color: var(--apex-accent-d); }

.apex-legal {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid var(--apex-line);
  background: color-mix(in srgb, var(--apex-surface) 95%, transparent);
  backdrop-filter: blur(12px);
}

.apex-legal__in { padding: 0.625rem 1rem; }

.apex-legal p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--apex-body);
}

.apex-legal strong { color: var(--apex-ink); font-weight: 600; }
.apex-legal svg { flex-shrink: 0; color: #f59e0b; }

/* --------------------------------------------------- WooCommerce Blocks */

body.apex-woo .wc-block-checkout__form,
body.apex-woo .wc-block-components-sidebar,
body.apex-woo .wc-block-cart__sidebar,
body.apex-woo .wc-block-components-order-summary {
  border-radius: var(--apex-radius);
}

body.apex-woo .wc-block-components-sidebar .wc-block-components-totals-wrapper,
body.apex-woo .wc-block-components-order-summary {
  background: var(--apex-surface);
}

body.apex-woo .wc-block-components-text-input input,
body.apex-woo .wc-block-components-select select,
body.apex-woo .wc-block-components-textarea {
  border-radius: 8px !important;
  border: 1px solid var(--apex-line) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-ink) !important;
  font-size: 14px !important;
}

body.apex-woo .wc-block-components-text-input input:focus,
body.apex-woo .wc-block-components-select select:focus {
  border-color: var(--apex-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apex-accent) 30%, transparent) !important;
  outline: none !important;
}

body.apex-woo .wc-block-components-text-input label,
body.apex-woo .wc-block-components-checkout-step__heading,
body.apex-woo .wc-block-components-totals-item__label {
  color: var(--apex-body);
}

/* Primary actions wear the 909 Aminos accent, square-ish like the SPA buttons. */
body.apex-woo .wc-block-components-button:not(.is-link),
body.apex-woo .wc-block-cart__submit-button,
body.apex-woo button.wc-block-components-checkout-place-order-button {
  border-radius: 8px !important;
  background: var(--apex-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: background .2s ease;
}

body.apex-woo .wc-block-components-button:not(.is-link):hover,
body.apex-woo button.wc-block-components-checkout-place-order-button:hover {
  background: var(--apex-accent-d) !important;
}

body.apex-woo a,
body.apex-woo .wc-block-components-button.is-link {
  color: var(--apex-accent);
}

/* Any fee or discount WooCommerce applies stays legible against the totals. */
body.apex-woo .wc-block-components-totals-fees .wc-block-components-totals-item__value,
body.apex-woo .wc-block-components-totals-discount__coupon-list {
  color: var(--apex-accent);
  font-weight: 700;
}

body.apex-woo .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--apex-line);
  color: var(--apex-ink);
}

body.apex-woo .wc-block-components-product-name,
body.apex-woo .wc-block-components-product-price {
  color: var(--apex-ink);
}

body.apex-woo .wc-block-components-product-metadata__description,
body.apex-woo .wc-block-components-product-details {
  color: var(--apex-muted);
  font-size: 11px;
}

body.apex-woo .wc-block-components-sale-badge,
body.apex-woo .wc-block-components-order-summary-item__quantity {
  background: var(--apex-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.apex-woo .wc-block-components-panel__button,
body.apex-woo .wc-block-components-radio-control__option {
  color: var(--apex-ink);
}

body.apex-woo hr,
body.apex-woo .wc-block-components-checkout-step {
  border-color: var(--apex-line);
}

/* Keep the fixed legal banner from covering the Place Order button. */
body.apex-woo .wc-block-checkout__actions,
body.apex-woo .wc-block-cart__submit { margin-bottom: 2.5rem; }

@media (min-width: 640px) {
  body.apex-woo .wp-site-blocks > main { padding-inline: 1.5rem; }
  .apex-bar__in, .apex-nav__in, .apex-legal__in { padding-inline: 1.5rem; }
  .apex-bar__msg { font-size: 12px; }
}

/* ------------------------------------------------------------- notices */

/*
 * WooCommerce ships its notices in a light palette: a white panel with a pink
 * or green wash. Dropped onto a dark page they arrived as a glaring white
 * rectangle, which is exactly the wrong treatment for the message that most
 * needs reading calmly ("this product is out of stock").
 */
body.apex-woo .woocommerce-message,
body.apex-woo .woocommerce-info,
body.apex-woo .woocommerce-error,
body.apex-woo .wc-block-components-notice-banner {
  border-radius: var(--apex-radius) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-body) !important;
  border: 1px solid var(--apex-line) !important;
  box-shadow: none !important;
}

body.apex-woo .woocommerce-message a,
body.apex-woo .woocommerce-info a,
body.apex-woo .woocommerce-error a,
body.apex-woo .wc-block-components-notice-banner a,
body.apex-woo .wc-block-components-notice-banner .wc-block-components-button {
  color: var(--apex-accent) !important;
}

body.apex-woo .wc-block-components-notice-banner__content,
body.apex-woo .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
  color: var(--apex-body) !important;
}

/* The status colour moves to the rule and the icon, where it reads as a
   signal rather than as a change of page. */
body.apex-woo .woocommerce-error,
body.apex-woo .wc-block-components-notice-banner.is-error {
  border-color: color-mix(in srgb, #ef4444 55%, transparent) !important;
}
body.apex-woo .woocommerce-message,
body.apex-woo .wc-block-components-notice-banner.is-success {
  border-color: color-mix(in srgb, var(--apex-accent) 55%, transparent) !important;
}
body.apex-woo .woocommerce-info,
body.apex-woo .wc-block-components-notice-banner.is-info {
  border-color: color-mix(in srgb, var(--apex-accent) 40%, transparent) !important;
}
body.apex-woo .wc-block-components-notice-banner.is-error > svg { fill: #ef4444 !important; }
body.apex-woo .wc-block-components-notice-banner.is-success > svg,
body.apex-woo .wc-block-components-notice-banner.is-info > svg { fill: var(--apex-accent) !important; }

/* The cart and account tables are the other light-mode survivors. */
body.apex-woo table.shop_table,
body.apex-woo table.woocommerce-orders-table,
body.apex-woo .woocommerce-Address address {
  background: var(--apex-surface);
  color: var(--apex-body);
  border-color: var(--apex-line);
}

body.apex-woo table.shop_table th,
body.apex-woo table.shop_table td { border-color: var(--apex-line) !important; }

/* --------------------------------------------- checkout with no gateway */

/*
 * Set by the plugin when the checkout has no usable payment method. The Place
 * Order button used to stay live and blue, so the shopper only discovered the
 * problem by pressing it and watching the order fail.
 */
/* The selector has to out-specify the accent rule above, which reaches the
   same button through .wc-block-components-button:not(.is-link). */
body.apex-no-payment .wc-block-checkout__actions_row .wc-block-components-button:not(.is-link),
body.apex-no-payment .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
  pointer-events: none !important;
  cursor: not-allowed !important;
  background: var(--apex-line) !important;
  color: var(--apex-muted) !important;
  opacity: 1 !important;
}

body.apex-no-payment .wc-block-checkout__actions::after {
  content: 'Ordering is paused while no payment method is available. Nothing has been charged, and your basket is kept.';
  display: block;
  margin-top: 0.75rem;
  font-size: 12px;
  line-height: 1.5;
  color: var(--apex-muted);
  text-align: center;
}

/* ------------------------------------------------- Zelle payment steps */

.apex-zelle {
  margin: 0 0 2rem;
  padding: 1.5rem;
  border: 1px solid var(--apex-line);
  border-radius: var(--apex-radius);
  background: var(--apex-surface);
}

.apex-zelle__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apex-accent);
}

.apex-zelle__title {
  margin: 0.5rem 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--apex-ink);
}

/* The memo is the one thing that must not be mistyped, so it is set large
   and monospaced rather than buried in the prose. */
.apex-zelle__memo {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--apex-accent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--apex-body);
}

.apex-zelle__memo strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--apex-ink);
}

.apex-zelle__steps {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--apex-body);
}

.apex-zelle__steps strong { color: var(--apex-ink); }

.apex-zelle__warn {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  font-size: 12px;
  line-height: 1.5;
  color: var(--apex-body);
}

.apex-zelle__warn strong { color: var(--apex-ink); }

.apex-zelle__extra { margin: 1rem 0 0; font-size: 12px; color: var(--apex-muted); }