/* ============================================================================
   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:   #3b82f6;  /* blue-500 */
  --apex-accent-d: #60a5fa;  /* blue-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 */

/* Dark like the storefront's bar. It was painted with --apex-ink, which is
   near-white on this dark palette, leaving the warning text unreadable. */
.apex-bar {
  background: var(--apex-sunken);
  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: #3b82f6;
  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; }

/* Scoped under body.apex-woo so it outranks the generic "body.apex-woo a"
   link colour, which would otherwise turn the 909 wordmark sky blue. */
body.apex-woo .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 gradient hexagon tile, sized to match the storefront header's. */
.apex-brand__tile {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* 909 heavy, AMINOS light, both in Orbitron like the storefront header. */
.apex-brand__word {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.apex-brand__word b    { font-weight: 900; letter-spacing: 0.01em; }
.apex-brand__word > span { font-weight: 400; letter-spacing: 0.03em; }  /* direct child only: the 909 hides spans inside <b> */
/* Orbitron's 0 has a bar through it; the wordmark uses its letter O, narrowed
   to the width of the 9s. The real "909" stays in the markup for screen
   readers and search, visually hidden. */
.apex-brand__word i {
  display: inline-block;
  font-style: normal;
  transform: scaleX(0.82);
  margin: 0 -0.045em;
}
.apex-brand__word .apex-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.apex-back {
  font-size: 12px;
  font-weight: 600;
  color: var(--apex-accent);
  text-decoration: none;
}
.apex-back:hover { color: var(--apex-accent-d); }

/* The same unmissable language switch as the storefront: full language name,
   globe icon, large bold black type on bright yellow. Scoped under
   body.apex-woo so the generic link colour cannot repaint it. */
body.apex-woo .apex-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  border: 3px solid #0a0a0a;
  background: #fde047;
  color: #0a0a0a;
  box-shadow: 0 0 0 2px #fde047;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
body.apex-woo .apex-lang:hover { background: #facc15; box-shadow: 0 0 0 2px #facc15; color: #0a0a0a; }
body.apex-woo .apex-lang:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
body.apex-woo .apex-lang svg { width: 22px; height: 22px; flex: none; }
.apex-nav__end { display: flex; align-items: center; gap: 1rem; }

/* Account link, matching the storefront cart button. */
body.apex-woo .apex-account {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem;
  border: 1px solid var(--apex-line); border-radius: 10px;
  color: var(--apex-ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
body.apex-woo .apex-account:hover { border-color: var(--apex-accent); color: var(--apex-ink); }
body.apex-woo .apex-account svg { width: 16px; height: 16px; flex: none; }

/* On a phone there is room for the logo, the account icon and the language
   switch - not the text link or the account label (the header used to run
   65 px past a 375 px screen and cut the language switch off). The logo still
   leads back to the catalog; on very narrow screens the row wraps instead of
   overflowing. */
@media (max-width: 639px) {
  body.apex-woo .apex-back { display: none; }
  body.apex-woo .apex-account span { display: none; }
  body.apex-woo .apex-account { min-width: 44px; min-height: 44px; padding: .5rem; justify-content: center; }
  body.apex-woo .apex-account svg { width: 20px; height: 20px; }
  body.apex-woo .apex-lang { padding: .5rem .6rem; gap: .35rem; font-size: 15px; }
  body.apex-woo .apex-lang svg { width: 20px; height: 20px; }
  .apex-nav__in { flex-wrap: wrap; gap: .5rem; }
  .apex-nav__end { gap: .5rem; margin-left: auto; }
  body.apex-woo .apex-brand { gap: .5rem; }
  .apex-brand__tile { width: 34px; height: 34px; }
  .apex-brand__word { font-size: 14px; }
}

/* The block theme nests two padded 'alignfull' wrappers around the account
   page; on a phone that squeezed the login form to 223 px and pushed the page
   14 px wider than the screen. One gutter (the outer 16 px) is enough. */
@media (max-width: 639px) {
  body.apex-woo .has-global-padding > .alignfull { margin-inline: 0; padding-inline: 0; max-width: 100%; }
}

/* On a phone WooCommerce stacks the two required research confirmations with no
   space between them, so they read as one block. Keep them apart. */
@media (max-width: 639px) {
  body.apex-woo .wc-block-checkout__order-fields .wc-block-components-checkbox + .wc-block-components-checkbox { margin-top: 18px; }
}

.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
   with fixed-width digits rather than buried in the prose. Inter, not a
   monospace font: the system monospace (Consolas) draws a slashed zero. */
.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: Inter, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  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); }

/* ---------------------------------------------------------------- My 909 */
body.apex-woo.woocommerce-account .woocommerce { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  body.apex-woo.woocommerce-account .woocommerce { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 2rem; }
}
body.apex-woo .woocommerce-MyAccount-navigation,
body.apex-woo .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; }
/* Notices span both columns rather than taking the navigation cell. */
body.apex-woo.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
/* WooCommerce clearfix pseudo-elements would otherwise take two grid cells. */
body.apex-woo.woocommerce-account .woocommerce::before,
body.apex-woo.woocommerce-account .woocommerce::after { content: none; }
body.apex-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
@media (min-width: 900px) { body.apex-woo .woocommerce-MyAccount-navigation ul { flex-direction: column; } }
body.apex-woo .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }
body.apex-woo .woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 10px;
  border: 1px solid var(--apex-line); color: var(--apex-body); font-size: 14px; font-weight: 600; text-decoration: none;
}
@media (min-width: 900px) { body.apex-woo .woocommerce-MyAccount-navigation a { border-color: transparent; } }
body.apex-woo .woocommerce-MyAccount-navigation a:hover { color: var(--apex-ink); }
body.apex-woo .woocommerce-MyAccount-navigation .is-active a {
  color: var(--apex-ink); background: var(--apex-surface); border-color: var(--apex-line); box-shadow: inset 3px 0 0 var(--apex-accent);
}
body.apex-woo .woocommerce-MyAccount-content > p:first-child:empty { display: none; }

.my909 { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.my909-hello { margin: 0; color: var(--apex-ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.my909-card { background: var(--apex-surface); border: 1px solid var(--apex-line); border-radius: var(--apex-radius); padding: 1.25rem; }
.my909-eyebrow { margin: 0 0 .875rem; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--apex-muted); }
.my909-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
@media (min-width: 640px) { .my909-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.my909-facts dt { font-size: 11px; color: var(--apex-muted); }
.my909-facts dd { margin: .25rem 0 0; color: var(--apex-ink); font-weight: 700; font-size: 14px; }
.my909-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.my909-note { margin: .75rem 0 0; font-size: 13px; line-height: 1.6; color: var(--apex-body); }
.my909-note--first { margin-top: 0; }
.my909-note a, .my909-links a, .my909-doc-link { color: var(--apex-accent-d); font-weight: 600; }
.my909-badge { display: inline-flex; align-items: center; padding: .2rem .625rem; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 700; white-space: nowrap; }
.my909-badge--waiting { color: #fbbf24; border-color: color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 12%, transparent); }
.my909-badge--paid    { color: var(--apex-accent-d); border-color: color-mix(in srgb, var(--apex-accent) 45%, transparent); background: color-mix(in srgb, var(--apex-accent) 12%, transparent); }
.my909-badge--shipped { color: #38bdf8; border-color: color-mix(in srgb, #0ea5e9 45%, transparent); background: color-mix(in srgb, #0ea5e9 12%, transparent); }
.my909-badge--done    { color: #34d399; border-color: color-mix(in srgb, #10b981 45%, transparent); background: color-mix(in srgb, #10b981 12%, transparent); }
.my909-badge--stopped { color: var(--apex-muted); border-color: var(--apex-line); background: transparent; }
.my909-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.my909-btn, body.apex-woo .woocommerce-orders-table .woocommerce-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1rem;
  border-radius: 10px; border: 1px solid var(--apex-line); background: transparent; color: var(--apex-ink) !important;
  font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; margin: 0 .375rem .375rem 0;
}
.my909-actions .my909-btn { margin: 0; }
.my909-btn:hover, body.apex-woo .woocommerce-orders-table .woocommerce-button:hover { border-color: var(--apex-accent); }
.my909-btn--primary, body.apex-woo .woocommerce-orders-table .woocommerce-button.reorder { background: var(--apex-accent); border-color: var(--apex-accent); color: #fff !important; }
.my909-btn--primary:hover, body.apex-woo .woocommerce-orders-table .woocommerce-button.reorder:hover { background: #2563eb; border-color: #2563eb; }
@media (max-width: 639px) { .my909-actions .my909-btn { flex: 1 1 100%; } }
.my909-links { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: 13px; }
.my909-items { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.my909-qty { color: var(--apex-muted); }
.my909-orderlist { list-style: none; margin: 0; padding: 0; }
.my909-orderlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--apex-line); font-size: 13px; color: var(--apex-body); }
.my909-orderlist li:first-child { border-top: 0; }
.my909-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.my909-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--apex-muted); padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--apex-line); }
.my909-table td { padding: .75rem .75rem .75rem 0; border-bottom: 1px solid var(--apex-line); color: var(--apex-body); vertical-align: top; }
@media (max-width: 639px) {
  .my909-table thead { display: none; }
  .my909-table tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--apex-line); }
  .my909-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border: 0; text-align: right; }
  .my909-table td::before { content: attr(data-label); color: var(--apex-muted); text-align: left; }
}