/*
Theme Name: Apollex (Storefront Child)
Theme URI: https://apollexbio.com
Description: Apollex brand theme, child of Storefront. Ports the colour tokens, typography and layout rules from the original Shopify theme (apollex.css) for the WooCommerce rebuild. Products stay Draft; checkout is disabled until launch approval.
Author: Apollex
Template: storefront
Version: 0.6.0
Text Domain: apollex
*/

/* ==========================================================================
   1. BRAND TOKENS
   Source: shopify-theme/assets/apollex.css + APOLLEX-WOOCOMMERCE-HANDOFF.md §6
   Keep these names stable — every override below reads from them, and the
   product-record template (Phase 4) will too.
   ========================================================================== */
:root{
  --apx-navy:   #062C5B; /* primary actions, strong brand surfaces */
  --apx-blue:   #0B4A7D; /* links, labels, accents */
  --apx-teal:   #C8F1ED; /* highlight panels, supporting surfaces */
  --apx-ice:    #F3F9FB; /* secondary backgrounds */
  --apx-line:   #CBD8DF; /* rules, grids, borders */
  --apx-ink:    #0A2035; /* primary text */

  /* Typefaces — measured off the live Shopify storefront, which serves
     Inter (400/500/600/700) and a ui-monospace stack. Inter is enqueued
     from Google Fonts in functions.php. */
  --apx-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --apx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* The homepage/record CSS ported from apollex.css refers to --apx-mono.
     It was never defined here, so every .apx-kicker / .apx-index /
     .apx-btn / .apx-note fell back to the body font at body size
     (16px instead of 12–13px mono). Defining it fixes all of them. */
  --apx-mono: var(--apx-font-mono);

  --apx-radius: 4px;
  --apx-max-width: 1180px;
  /* Reference gutters: 40px on header/footer, 20px on .apx-wrap sections. */
  --apx-gutter: 40px;
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   Grid-led, restrained, technical — large editorial headings, compact
   monospace for record labels/metadata (per handoff §6).
   ========================================================================== */
body{
  color: var(--apx-ink);
  background: #ffffff;
  font-family: var(--apx-font-body);
  /* Reference computes to 14px / 22.4px (1.6). Storefront's default is
     16px / 1.618, which scaled every em-based measurement on the page. */
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--apx-blue); text-decoration: none; }
a:hover{ color: var(--apx-navy); }

/* Global reset: remove unwanted click/focus border outline */
*,
*:focus,
*:active,
*:focus-visible,
a,
a:focus,
a:active,
a:focus-visible,
button,
button:focus,
button:active,
.site-header a,
.site-header a:focus,
.site-header a:active,
.site-branding a,
.site-branding a:focus,
.site-branding a:active,
.custom-logo-link,
.custom-logo-link:focus,
.custom-logo-link:active,
.main-navigation a,
.main-navigation a:focus,
.main-navigation a:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

h1, h2, h3, h4, h5, h6{
  color: var(--apx-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-title, .site-title a{
  color: var(--apx-navy);
  font-weight: 700;
}

/* Record-label / metadata style — used on product spec rows, SKUs, dates */
.apx-label{
  font-family: var(--apx-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apx-blue);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.storefront-full-width-content .col-full,
.site-content .col-full{
  max-width: var(--apx-max-width);
}

/* ---- Full-bleed front page -------------------------------------------
   Storefront wraps page content in #content > .col-full (max-width 1180px
   + ~42px padding). On the reference site every homepage band runs edge to
   edge (measured x=0, w=viewport) and only the inner .apx-wrap is inset,
   so the wrapper has to be neutralised on the front page — otherwise the
   hero and split grids collapse (measured 632/464 instead of 641/788).
   Scoped to the front page so interior pages keep Storefront's container.
   ---------------------------------------------------------------------- */
.apollex-front .site-content > .col-full,
.apollex-front #content > .col-full{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.apollex-front .site-content{ padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.apollex-front .apollex-home{ width: 100%; max-width: none; margin: 0; }
/* Storefront adds a bottom margin/padding to the content area that would
   otherwise open a white gap above the footer note band. */
.apollex-front .apx-note{ margin-bottom: 0; }

.site-header{
  background: #ffffff;
  /* Measured on the reference: 1px solid #000 under the header row (the
     lighter #DFDFDF rule belongs to the announcement strip above it). */
  border-bottom: 1px solid #000000;
}

.site-footer{
  background: #ffffff;
  border-top: 0;
  color: #000000;
}
.site-footer a{ color: #000000; }

/* Highlight / supporting panels (Quality & Transparency, FAQ callouts, etc.) */
.apx-panel{
  background: var(--apx-ice);
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius);
  padding: 1.25rem 1.5rem;
}
.apx-panel--teal{ background: var(--apx-teal); border-color: transparent; }

/* ==========================================================================
   4. BUTTONS / ACTIONS
   Primary actions use Deep Navy per brand tokens. Storefront's default
   button colour (set in Customizer) should also be updated to #062C5B —
   this override is the fallback if that gets missed.
   ========================================================================== */
.button, button, input[type="submit"], .woocommerce a.button{
  background-color: var(--apx-navy);
  border-color: var(--apx-navy);
  color: #ffffff;
  border-radius: var(--apx-radius);
}
.button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover{
  background-color: var(--apx-blue);
  border-color: var(--apx-blue);
  color: #ffffff;
}

/* ==========================================================================
   5. SAFETY-STATE STYLING
   Visual flag for Draft/hidden products so editors never mistake a draft
   record for a published one while browsing wp-admin previews.
   ========================================================================== */
.apx-draft-flag{
  display: inline-block;
  font-family: var(--apx-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fff4e5;
  border: 1px solid #e8b75a;
  color: #6b4a10;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ==========================================================================
   5b. HEADER — 1:1 with the live Shopify storefront
   Reference (tnkpn0-my.myshopify.com), desktop:
     row 1  announcement strip, centred, plain sans ~14px
     row 2  logo hard left  |  nav right-aligned inline  |  account icon
   Storefront ships a two-row header (branding row, then a separate
   full-width .storefront-primary-navigation strip below) with the nav
   left-aligned and floated. These rules flatten both rows into one flex
   line and right-align the menu so the result matches the reference.
   ========================================================================== */
/* Announcement strip — measured: 43px tall, 15px block padding,
   Inter 12px/500, #000, no tracking, 1px #DFDFDF bottom rule. */
.apollex-announce{
  background: #ffffff;
  border-bottom: 1px solid #DFDFDF;
  padding: 15px var(--apx-gutter);
  text-align: center;
}
.apollex-announce p{
  margin: 0;
  font-family: var(--apx-font-body);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #000000;
}

/* Logo — Shopify renders the wordmark at 36px tall. */
.site-header .site-branding{
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}
.site-header h1.logo,
.site-header .logo,
.site-header .site-title{ margin: 0; padding: 0; }
.site-header .custom-logo-link{ display: block; }
.site-header .custom-logo{
  max-height: 36px;
  width: auto;
  height: auto;
  display: block;
}

/* Account icon (rendered by functions.php at storefront_header priority 70,
   which lands it after Storefront's nav wrapper closes — i.e. a direct
   child of .site-header, so flex can place it last). */
.apollex-account{ flex: 0 0 auto; display: flex; align-items: center; }
.apollex-account a{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apx-ink);
  padding: 4px;
}
.apollex-account a:hover,
.apollex-account a:focus{ color: var(--apx-blue); }
.apollex-account svg{ display: block; }

/* ---- Desktop: one flex row -------------------------------------------- */
@media (min-width: 769px){
  .site-header{
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #ffffff;
    /* Measured reference row: full-bleed, 40px side gutters, logo 36px
       tall inside a ~53px row (8.5px block padding). */
    padding-block: 8px;
    padding-inline: var(--apx-gutter);
  }
  .site-header > .col-full{
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  .site-header .storefront-primary-navigation{
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .site-header .storefront-primary-navigation > .col-full{
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .site-header .main-navigation{
    float: none;
    width: auto;
    margin: 0;
  }
  .site-header .main-navigation .primary-navigation{ display: block; }
  /* Measured reference nav: Inter 600 14px, 0.28px tracking, items sit
     flush against each other (gap 0) with ~11px inline padding and a
     44px hit area; current item full black, the rest 80% black. */
  .site-header .main-navigation ul.nav-menu,
  .site-header .main-navigation ul.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    float: none;
    border: 0;
    list-style: none;
  }
  .site-header .main-navigation ul.nav-menu li,
  .site-header .main-navigation ul.menu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .site-header .main-navigation ul.nav-menu li a,
  .site-header .main-navigation ul.menu li a{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    font-family: var(--apx-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
  }
  .site-header .main-navigation ul li.current-menu-item > a,
  .site-header .main-navigation ul li.current_page_item > a{ color: #000000; }
  .site-header .main-navigation ul li a:hover,
  .site-header .main-navigation ul li a:focus{ color: #000000; }
}

/* ---- Handheld: hamburger left, logo centred, account right ------------- */
@media (max-width: 768px){
  .site-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    position: relative;
    background: #ffffff;
  }
  .site-header > .col-full{
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .site-header .storefront-primary-navigation{
    order: 1;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .site-header .storefront-primary-navigation > .col-full{
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .site-header .apollex-account{ order: 3; }
  .site-header .menu-toggle{
    margin: 0;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    color: var(--apx-ink);
  }
  /* Expanded menu drops as a panel under the bar rather than squeezing
     into the hamburger's flex column. */
  .site-header .main-navigation .primary-navigation{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--apx-line);
    padding: 0 1rem 0.75rem;
    z-index: 99;
  }
}

/* ==========================================================================
   5c. FOOTER
   Rendered via the storefront_footer hook (functions.php) — matches the
   live Shopify footer exactly: heading + note + 4 inline links, then a
   bottom row with copyright + legal-policy menu. Storefront's default
   footer widgets/credit line are removed so this is the only footer
   content.
   ========================================================================== */
/* Measured reference footer:
     top block   40px gutters, 30px block padding, 6px gap between blocks
                 h2  Inter 24px/700, line-height 24px, #000, margin 0
                 p   14px/400 #000, 7px vertical margins
                 links inline in a paragraph, underlined, separated by ·
     utilities   1px #DFDFDF rule above, 20px top / 48px bottom padding,
                 12px text at 60% black, copyright left, policy trigger
                 centred. */
.apollex-footer{ background: #ffffff; color: #000000; }

.apollex-footer__top{
  padding: 30px var(--apx-gutter);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.apollex-footer__heading{
  margin: 0;
  font-family: var(--apx-font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
  color: #000000;
}
.apollex-footer__note{
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #000000;
}
.apollex-footer__links{
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #000000;
}
.apollex-footer__links a{
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.apollex-footer__links a:hover,
.apollex-footer__links a:focus{ color: var(--apx-blue); }

.apollex-footer__bottom{
  border-top: 1px solid #DFDFDF;
  padding: 20px var(--apx-gutter) 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
}
.apollex-footer__copyright{ justify-self: start; }
.apollex-footer__copyright a{
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Policy disclosure — the reference collapses the four policy links behind
   a "Terms and Policies" trigger rather than listing them inline. */
.apollex-footer__policies{ justify-self: center; position: relative; }
.apollex-footer__policies > summary{
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}
.apollex-footer__policies > summary::-webkit-details-marker{ display: none; }
.apollex-footer__policies > summary:hover{ color: #000000; }
.apollex-footer__policies ul{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #DFDFDF;
  border-radius: var(--apx-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 20;
}
.apollex-footer__policies li{ margin: 0; padding: 3px 0; }
.apollex-footer__policies a{
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.apollex-footer__policies a:hover,
.apollex-footer__policies a:focus{ color: #000000; text-decoration: underline; }

@media (max-width: 600px){
  .apollex-footer__bottom{
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 12px;
  }
  .apollex-footer__policies{ justify-self: start; }
  .apollex-footer__policies ul{ left: 0; transform: none; }
}

/* ==========================================================================
   5d. HIDE WOOCOMMERCE COMMERCE CHROME
   Belt-and-suspenders alongside functions.php's remove_action calls —
   keeps the cart icon / handheld cart-search-account bar off screen even
   if a hook name changes between Storefront versions.
   ========================================================================== */
.site-header-cart,
.storefront-handheld-footer-bar{
  display: none !important;
}

/* ==========================================================================
   6. MOBILE
   Baseline rules per handoff §6 — real breakpoint tuning happens once the
   header/footer and product templates exist (Phase 2b / Phase 4).
   ========================================================================== */
@media (max-width: 480px){
  body{ font-size: 16px; }
  .button, button, input[type="submit"]{ min-height: 44px; }
}

/* ==========================================================================
   7. ORIGINAL APOLLEX HOMEPAGE / RECORD-PAGE SYSTEM
   Ported verbatim from shopify-theme/assets/apollex.css (the exact,
   already mobile-tuned system used across the homepage, product records,
   pages and journal). Applies via the .apollex-site body class (added by
   functions.php) plus the standalone .apx-* classes used in front-page.php
   and the WooCommerce product-record template.
   ========================================================================== */
.apollex-site{background:#fff;color:var(--apx-ink)}
.apollex-site :is(h1,h2,h3,h4){letter-spacing:-.025em;color:var(--apx-ink)}
.apollex-site a{text-underline-offset:4px}
.apx-wrap{width:min(1440px,calc(100% - 40px));margin:auto}
.apx-kicker,.apx-index{font:600 12px/1.4 var(--apx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--apx-blue)}
.apx-grid{background-image:linear-gradient(var(--apx-line) 1px,transparent 1px),linear-gradient(90deg,var(--apx-line) 1px,transparent 1px);background-size:64px 64px}
.apx-hero{min-height:760px;display:grid;grid-template-columns:1fr 1.25fr;border-bottom:1px solid var(--apx-line);background:#fff}
.apx-hero__copy{padding:100px max(32px,6vw);display:flex;flex-direction:column;justify-content:center}
.apx-hero h1{font-size:clamp(58px,8vw,128px);line-height:.86;margin:18px 0 32px;max-width:8ch}
.apx-lead{font-size:clamp(18px,2vw,25px);line-height:1.45;max-width:30em;color:#345064}
.apx-hero__media{position:relative;min-height:580px;overflow:hidden;background:var(--apx-ice)}
.apx-hero__media img{width:100%;height:100%;object-fit:cover}
.apx-btn{display:inline-flex;align-items:center;justify-content:center;width:max-content;background:var(--apx-navy);color:#fff!important;text-decoration:none;padding:16px 22px;margin-top:24px;font:700 13px var(--apx-mono);letter-spacing:.08em;text-transform:uppercase}
.apx-section{padding:104px 0;border-bottom:1px solid var(--apx-line)}
.apx-head{display:grid;grid-template-columns:120px 1fr;gap:28px;margin-bottom:54px}
.apx-head h2{font-size:clamp(38px,5vw,72px);line-height:.98;margin:0;max-width:13ch}
.apx-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--apx-line)}
.apx-card{padding:32px;min-height:260px;border-right:1px solid var(--apx-line);background:#fff}
.apx-card:last-child{border-right:0}.apx-card h3{font-size:28px;margin:52px 0 16px}.apx-card p{color:#496274}
.apx-spec{background:var(--apx-navy);color:#fff}.apx-spec :is(h2,h3){color:#fff}

.apx-split{display:grid;grid-template-columns:1fr 1fr;min-height:640px}.apx-split img{width:100%;height:100%;object-fit:cover}.apx-split__copy{padding:80px max(30px,7vw);display:flex;flex-direction:column;justify-content:center;background:var(--apx-teal)}.apx-split h2{font-size:clamp(42px,5vw,74px);line-height:1;margin:16px 0 28px}
.apx-journal{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--apx-line);border:1px solid var(--apx-line)}.apx-article{background:#fff;padding:24px;min-height:310px;display:flex;flex-direction:column}.apx-article h3{font-size:24px;margin:auto 0 16px}.apx-article a{color:inherit}
.apx-faq{display:grid;grid-template-columns:1fr 1fr;gap:56px}.apx-faq details{border-top:1px solid var(--apx-line);padding:20px 0}.apx-faq summary{font-weight:700;cursor:pointer}.apx-note{background:#071d33;color:#dce9f2;padding:28px;font:13px/1.7 var(--apx-mono)}
@media(max-width:900px){.apx-hero,.apx-split{grid-template-columns:1fr}.apx-hero__media{order:-1;min-height:360px}.apx-cards,.apx-records,.apx-journal{grid-template-columns:1fr 1fr}.apx-head{grid-template-columns:1fr}.apx-faq{grid-template-columns:1fr}.apx-section{padding:72px 0}}
@media(max-width:560px){.apx-cards,.apx-records,.apx-journal{grid-template-columns:1fr}.apx-wrap{width:min(100% - 28px,1440px)}.apx-hero__copy{padding:64px 24px}.apx-hero h1{font-size:58px}}
html{scroll-behavior:smooth;scroll-padding-top:120px}
.apx-products{background:var(--apx-ice)}
.apx-products .apx-head{align-items:start}
.apx-product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--apx-line);border-left:1px solid var(--apx-line);background:#fff}
.apx-product-card{min-width:0;border-right:1px solid var(--apx-line);border-bottom:1px solid var(--apx-line);background:#fff}
.apx-product-card__media{aspect-ratio:1/1;overflow:hidden;background:#f7fbfc;border-bottom:1px solid var(--apx-line)}
.apx-product-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.apx-product-card:hover .apx-product-card__media img{transform:scale(1.025)}
.apx-product-card__body{padding:22px}
.apx-product-card h3{font-size:clamp(20px,1.7vw,28px);line-height:1.05;margin:20px 0 8px}
.apx-product-card p{margin:0;color:#496274}
.apx-product-card__meta{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--apx-line)}
.apx-product-card__meta strong{font-size:18px;color:var(--apx-navy)}
.apx-product-card__meta span,.apx-draft-label,.apx-inline-note{font:600 11px/1.4 var(--apx-mono);letter-spacing:.08em;text-transform:uppercase;color:#537087}
.apx-inline-note{margin-top:22px;color:#183b56}
.apx-draft-label{margin-top:auto;padding-top:18px;border-top:1px solid var(--apx-line)}
@media(max-width:1100px){.apx-product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.apx-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.apx-product-grid{grid-template-columns:1fr}.apx-product-card__body{padding:20px}}

.apx-product-card{display:block;color:inherit;text-decoration:none;position:relative;transition:box-shadow .25s ease,transform .25s ease}
.apx-product-card:hover{box-shadow:inset 0 0 0 2px var(--apx-teal);transform:translateY(-2px)}
.apx-product-card:focus-visible,.apx-article--link:focus-visible,.apx-text-link:focus-visible{outline:none !important}
.apx-card-action{display:block;margin:0 22px 22px;padding-top:14px;border-top:1px solid var(--apx-line);font:700 11px/1.4 var(--apx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--apx-blue)}
.apx-article--link{color:inherit;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease}
.apx-article--link:hover{box-shadow:inset 0 0 0 2px var(--apx-teal);transform:translateY(-2px)}
.apx-text-link{display:inline-block;margin-top:22px;color:var(--apx-navy);font-weight:700}
.apollex-page-intro{margin:0 0 48px;padding:28px 32px;border-left:4px solid #53c8cd;background:var(--apx-ice)}
.apollex-page-intro p:first-child{font-size:1.25rem;color:var(--apx-navy)}
.apx-page-records{display:grid;gap:1px;background:var(--apx-line);border:1px solid var(--apx-line);margin:40px 0}
.apx-page-record{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:40px;align-items:center;padding:36px;background:#fff;scroll-margin-top:130px}
.apx-page-record img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--apx-ice)}
.apx-page-record h2{margin:.35rem 0 1.5rem;font-size:clamp(2rem,4vw,3.5rem)}
.apx-page-record dl{display:grid;grid-template-columns:minmax(110px,.6fr) 1fr;margin:0 0 22px;border-top:1px solid var(--apx-line)}
.apx-page-record dt,.apx-page-record dd{margin:0;padding:10px 0;border-bottom:1px solid var(--apx-line)}
.apx-page-record dt{font:600 11px/1.4 var(--apx-mono);letter-spacing:.08em;text-transform:uppercase;color:#537087}
.apx-journal-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:40px 0;background:var(--apx-line);border:1px solid var(--apx-line)}
.apx-journal-index section{padding:36px;background:#fff;scroll-margin-top:130px}
.apx-journal-index h2{margin:.5rem 0 1rem}
.apollex-note{margin:48px 0 0;padding:30px;background:#071d33;color:#dce9f2}
.apollex-note h2{color:#fff}
@media(max-width:720px){.apx-page-record{grid-template-columns:1fr;padding:22px}.apx-journal-index{grid-template-columns:1fr}.apollex-page-intro{padding:22px}}

.apx-secondary-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
.apx-secondary-links a{color:var(--apx-navy);font-weight:700}

.apx-btn--small{padding:12px 16px;margin-top:12px;font-size:11px}
.apx-record-page{width:min(1180px,calc(100vw - 40px));max-width:none;margin:0 auto;position:relative;left:50%;transform:translateX(-50%)}
.apx-record-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--apx-line);background:#fff;margin-bottom:1px}
.apx-record-hero__media{min-height:520px;background:var(--apx-ice)}
.apx-record-hero__media img{display:block;width:100%;height:100%;object-fit:cover}
.apx-record-hero__copy{padding:clamp(32px,6vw,76px);display:flex;flex-direction:column;justify-content:center}
.apx-record-hero__copy h2{font-size:clamp(38px,5vw,70px);line-height:.98;margin:18px 0 24px}
.apx-record-status{display:inline-flex;align-self:flex-start;margin:14px 0 0;padding:7px 10px;border:1px solid #6e8799;color:#36566e;font:700 10px/1.2 var(--apx-mono);letter-spacing:.1em;text-transform:uppercase}
.apx-price-reference{display:flex;align-items:end;justify-content:space-between;gap:22px;padding:20px 0;margin:22px 0;border-top:1px solid var(--apx-line);border-bottom:1px solid var(--apx-line)}
.apx-price-reference span{font:600 11px/1.4 var(--apx-mono);letter-spacing:.08em;text-transform:uppercase;color:#537087}
.apx-price-reference strong{font-size:clamp(26px,3vw,38px);color:var(--apx-navy)}
.apx-record-section{padding:clamp(52px,7vw,88px);border:1px solid var(--apx-line);margin-top:-1px;background:#fff}
.apx-record-section--tint{background:var(--apx-ice)}
.apx-record-section__heading{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:40px}
.apx-record-section__heading h2{font-size:clamp(34px,4.5vw,60px);line-height:1;margin:0}
.apx-data-table{border-top:1px solid var(--apx-line);margin:0}
.apx-data-table>div{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,1.3fr);gap:30px;border-bottom:1px solid var(--apx-line)}
.apx-data-table dt,.apx-data-table dd{margin:0;padding:17px 0}
.apx-data-table dt{font:600 11px/1.4 var(--apx-mono);letter-spacing:.08em;text-transform:uppercase;color:#537087}
.apx-data-table dd{font-size:1.05rem;color:var(--apx-ink)}
.apx-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--apx-line);border:1px solid var(--apx-line)}
.apx-status-grid article{padding:28px;background:#fff}
.apx-status-grid article>span{font:700 10px/1.3 var(--apx-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--apx-blue)}
.apx-status-grid h3{font-size:1.45rem;margin:26px 0 10px}
.apx-status-grid p{margin:0;color:#496274}
.apx-record-callout{margin:32px 0 0;padding:24px;border-left:4px solid #53c8cd;background:#fff;color:#183b56}
.apx-boundary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:0;margin:0;background:var(--apx-line);border:1px solid var(--apx-line);list-style:none}
.apx-boundary-list li{padding:22px 24px;background:#fff}
.apx-boundary-list li:before{content:"—";margin-right:10px;color:var(--apx-blue)}
.apx-record-faq details{border-top:1px solid var(--apx-line);padding:20px 0}
.apx-record-faq details:last-child{border-bottom:1px solid var(--apx-line)}
.apx-record-faq summary{font-weight:700;cursor:pointer}
.apx-record-links{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:28px;background:var(--apx-navy)}
.apx-record-links a{color:#fff;font:700 11px/1.4 var(--apx-mono);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:760px){
 .apx-record-page{width:min(100vw - 28px,1180px)}
 .apx-record-hero{grid-template-columns:1fr}
 .apx-record-hero__media{min-height:340px}
 .apx-record-section{padding:42px 24px}
 .apx-record-section__heading{grid-template-columns:1fr}
 .apx-data-table>div{grid-template-columns:1fr;gap:0}
 .apx-data-table dt{padding-bottom:0}
 .apx-status-grid,.apx-boundary-list{grid-template-columns:1fr}
 .apx-record-links{flex-direction:column}
}

.apx-source-list li{display:flex;align-items:center;min-height:88px}
.apx-source-list li:before{flex:0 0 auto}
.apx-source-list a{color:var(--apx-navy);font-weight:700;overflow-wrap:anywhere}
.apx-source-list a:hover{text-decoration-thickness:2px}
.apx-source-list a:focus-visible{outline:none !important}
.apx-record-section p+ .apx-boundary-list{margin-top:28px}
@media(max-width:760px){.apx-source-list li{min-height:0}}

.apollex-site,
.apollex-site * ,
.apollex-site *::before,
.apollex-site *::after{box-sizing:border-box}
.apollex-site img{max-width:100%}
.apx-btn,.apx-card-action,.apx-text-link,.apx-secondary-links a,.apx-record-links a{min-height:44px}
.apx-text-link,.apx-secondary-links a,.apx-record-links a{display:inline-flex;align-items:center}

@media (max-width:760px){
 html{scroll-padding-top:84px}
 body{overflow-x:clip}
 .apollex-site{width:100%;overflow-x:clip}
 .apx-wrap{width:calc(100% - 28px);max-width:100%;min-width:0}
 .apx-wrap>*,
 .apx-split>*,
 .apx-record-page>*,
 .apx-record-hero>*,
 .apx-page-record>*,
 .apx-journal-index>*{min-width:0;max-width:100%}

 .apx-hero{min-height:0;grid-template-columns:1fr}
 .apx-hero__copy{order:0;padding:40px 20px 42px}
 .apx-hero__media{order:1;min-height:240px;height:240px}
 .apx-hero h1{font-size:clamp(46px,14vw,58px);line-height:.92;margin:14px 0 22px}
 .apx-hero .apx-lead{font-size:18px;line-height:1.5}
 .apx-hero .apx-btn{width:100%;margin-top:20px}
 .apx-section{padding:54px 0}
 .apx-head{grid-template-columns:1fr;gap:10px;margin-bottom:28px}
 .apx-head h2{font-size:clamp(34px,10vw,44px);line-height:1}
 .apx-head .apx-lead{font-size:16px;line-height:1.55}
 .apx-products{padding-top:48px}
 .apx-products .apx-head{margin-bottom:24px}

 .apx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .apx-product-card{display:flex;flex-direction:column;min-width:0}
 .apx-product-card__body{padding:14px;flex:1}
 .apx-product-card h3{font-size:19px;line-height:1.08;margin:12px 0 6px;overflow-wrap:anywhere}
 .apx-product-card p{font-size:14px;line-height:1.4}
 .apx-product-card__meta{align-items:flex-start;flex-direction:column;gap:5px;margin-top:14px;padding-top:12px}
 .apx-product-card__meta strong{font-size:17px}
 .apx-product-card__meta span{font-size:10px}
 .apx-card-action{display:flex;align-items:center;margin:0 14px 12px;padding-top:10px;font-size:10px}
 .apx-card{min-height:0;padding:24px}
 .apx-card h3{font-size:24px;margin:22px 0 10px}
 .apx-card p{font-size:16px;line-height:1.55}
 .apx-card a{display:inline-flex;align-items:center;min-height:44px}
 .apx-split{min-height:0}
 .apx-split>div:first-child:not(.apx-split__copy){height:250px}
 .apx-split__copy{padding:44px 22px}
 .apx-split h2{font-size:38px;margin:12px 0 18px}
 .apx-split .apx-lead{font-size:16px;line-height:1.55}
 .apx-journal{grid-template-columns:1fr}
 .apx-article{min-height:0;padding:24px}
 .apx-article h3{font-size:24px;margin:28px 0 12px}
 .apx-faq{gap:28px}
 .apx-faq h2{font-size:38px}
 .apx-faq .apx-lead,.apx-faq p{font-size:16px;line-height:1.55}
 .apx-faq summary{min-height:44px;display:flex;align-items:center}
 .apx-note{padding:22px 14px;font-size:12px}

 .apollex-page-intro{margin:0 0 24px;padding:20px}
 .apollex-page-intro p{font-size:16px;line-height:1.55}
 .apollex-page-intro p:first-child{font-size:18px}
 .apollex-page-intro~h2{margin-top:26px;margin-bottom:8px;font-size:26px}
 .apollex-page-intro~p,
 .apollex-page-intro~ul{font-size:16px;line-height:1.55}
 .apollex-page-intro~ul{padding-left:20px}
 .apx-page-records{margin:24px 0}
 .apx-page-record{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px;align-items:start}
 .apx-page-record img{width:110px}
 .apx-page-record h2{font-size:22px;line-height:1.05;margin:5px 0 12px;overflow-wrap:anywhere}
 .apx-page-record p{font-size:15px;line-height:1.45}
 .apx-page-record dl{grid-template-columns:82px minmax(0,1fr);margin-bottom:12px}
 .apx-page-record dt,.apx-page-record dd{padding:7px 0;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
 .apx-page-record .apx-btn{width:100%;min-height:44px;padding:10px 12px;text-align:center}
 .apx-journal-index{margin:24px 0}
 .apx-journal-index section{padding:24px}
 .apx-journal-index h2{font-size:26px;line-height:1.08}
 .apx-journal-index p,.apx-journal-index li{font-size:16px;line-height:1.55}
 .apollex-note{margin-top:30px;padding:22px}
 .apollex-note p{font-size:16px;line-height:1.55}

 .apx-record-page{width:calc(100vw - 28px);max-width:1180px;font-size:16px;line-height:1.55}
 .apx-record-page p,
 .apx-record-page li,
 .apx-record-page dd,
 .apx-record-page summary{font-size:16px;line-height:1.55}
 .apx-record-hero{grid-template-columns:1fr}
 .apx-record-hero__media{min-height:0;height:270px}
 .apx-record-hero__copy{padding:26px 18px}
 .apx-record-hero__copy h2{font-size:34px;line-height:1;margin:12px 0 18px}
 .apx-record-status{min-height:34px;align-items:center}
 .apx-price-reference{margin:16px 0;padding:14px 0}
 .apx-record-section{padding:32px 18px}
 .apx-record-section__heading{grid-template-columns:1fr;gap:7px;margin-bottom:24px}
 .apx-record-section__heading h2{font-size:29px;line-height:1.04}
 .apx-data-table>div{grid-template-columns:100px minmax(0,1fr);gap:14px}
 .apx-data-table dt,.apx-data-table dd{padding:12px 0}
 .apx-data-table dt{font-size:10px}
 .apx-status-grid,.apx-boundary-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .apx-status-grid article{padding:16px}
 .apx-status-grid h3{font-size:18px;line-height:1.12;margin:14px 0 8px}
 .apx-status-grid p{font-size:15px;line-height:1.5}
 .apx-boundary-list li{padding:16px;font-size:15px;line-height:1.5}
 .apx-record-callout{margin-top:22px;padding:18px}
 .apx-record-faq details{padding:12px 0}
 .apx-record-faq summary{min-height:44px;align-items:center}
 .apx-record-links{padding:16px;gap:4px}
 .apx-record-links a{width:100%;font-size:11px}
 .apx-source-list li{display:block;min-height:0}
 .apx-source-list a{font-size:15px;line-height:1.45}

 .apx-secondary-links{gap:4px 18px}
 .apx-secondary-links a,
 .apx-text-link{min-height:44px}
 footer a,footer button{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:340px){
 .apx-wrap{width:calc(100% - 20px)}
 .apx-hero__copy{padding-left:16px;padding-right:16px}
 .apx-hero h1{font-size:44px}
 .apx-product-grid{grid-template-columns:1fr}
 .apx-product-card{display:grid;grid-template-columns:106px minmax(0,1fr)}
 .apx-product-card__media{border-bottom:0;border-right:1px solid var(--apx-line)}
 .apx-card-action{grid-column:1/-1}
 .apx-page-record{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px}
 .apx-page-record img{width:96px}
 .apx-page-record dl{grid-template-columns:72px minmax(0,1fr)}
 .apx-page-record p:not(.apx-index){display:none}
 .apx-record-page{width:calc(100vw - 20px)}
 .apx-record-hero__media{height:235px}
 .apx-record-section{padding:28px 14px}
 .apx-record-hero__copy{padding:24px 14px}
 .apx-status-grid,.apx-boundary-list{grid-template-columns:1fr}
 .apx-data-table>div{grid-template-columns:82px minmax(0,1fr);gap:10px}
}