/* ============================================================
   AIML Shop — Adelaide University brand skin
   Built ON TOP of /css/design-tokens.css (Adelaide Design System,
   loaded first). This file adds layout + components only; colour
   and type VALUES come from the var(--au-*) tokens.
   ============================================================ */
:root {
  --au-max-width: 1280px;
  --au-cart-badge: #E4002B; /* cart count badge (not in the token set) */
  /* The AU clientlibs register the webfonts under hyphenated names
     ("National-2-Condensed", bold cut "National-2-Condensed_Bold"),
     while the tokens use "National 2 Condensed" — extend the stacks
     so the fonts resolve either way. */
  --au-font-heading: "National-2-Condensed", "National 2 Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --au-font-heading-bold: "National-2-Condensed_Bold", "National-2-Condensed", "National 2 Condensed", "Arial Narrow", sans-serif;
  --au-font-body: "Roboto Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
/* Tailwind-preflight guard: legacy pages inject Tailwind at runtime
   (after our stylesheets), so re-assert the token typography there. */
html, body { font-family: var(--au-font-body) !important; }
h1, h2, h3 { font-family: var(--au-font-heading-bold) !important; font-weight: var(--au-font-weight-bold); letter-spacing: 0; }
h4, h5, h6 { font-family: var(--au-font-heading) !important; font-weight: var(--au-font-weight-medium); letter-spacing: 0; }
@media (max-width: 900px) {
  h1 { font-size: 42px; line-height: 46px; }
  h2 { font-size: 36px; line-height: 40px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.au-section { max-width: var(--au-max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.au-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 8px; border: 2px solid transparent;
  font-family: var(--au-font-heading);
  font-size: 1.05rem; font-weight: var(--au-font-weight-medium);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.au-btn-primary { background: var(--au-secondary-default); color: #fff; }
.au-btn-primary:hover { background: var(--au-secondary-dark); color: #fff; }
.au-btn-navy { background: var(--au-primary-default); color: #fff; }
.au-btn-navy:hover { background: var(--au-primary-dark); color: #fff; }
.au-btn-outline { background: #fff; color: var(--au-primary-default); border-color: var(--au-primary-default); }
.au-btn-outline:hover { background: var(--au-primary-lighter); }
.au-btn-ghost { background: transparent; color: var(--au-secondary-default); }
.au-btn-ghost:hover { text-decoration: underline; }
.au-btn-light { background: #fff; color: var(--au-primary-default); }
.au-btn-light:hover { background: var(--au-tertiary-default); }

/* ============================================================
   Header (#au-header-alt) — official AU markup structure:
   menu-panel > mobile-menu-control (logo + hamburger)
              > collapse#navPanel > main-menu
                  > main-menu-container (logo + main-navigation)
                  > utility-menu
   Desktop: utility strip on top (column-reverse), white main bar.
   Mobile: white bar w/ hamburger; panel stacks nav + navy utility.
   ============================================================ */
#au-header-alt { background: #fff; position: relative; z-index: 50; }
#au-header-alt .menu-panel { padding: 0; }
#au-header-alt .au-logo svg { height: 56px; width: auto; display: block; }
#au-header-alt .cls-1 { fill: var(--au-primary-default); }
#au-header-alt .au-logo a { display: block; }
/* Mobile control bar (logo + hamburger) — hidden on desktop */
#au-header-alt .mobile-menu-control {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; min-height: 72px;
}
#au-header-alt .mobile-menu-control .au-logo svg { height: 42px; }
#au-header-alt .menu-button {
  width: 44px; height: 44px; border: 0; cursor: pointer; border-radius: 4px;
  background:
    linear-gradient(var(--au-primary-default), var(--au-primary-default)) center 12px / 22px 2px no-repeat,
    linear-gradient(var(--au-primary-default), var(--au-primary-default)) center 21px / 22px 2px no-repeat,
    linear-gradient(var(--au-primary-default), var(--au-primary-default)) center 30px / 22px 2px no-repeat,
    transparent;
}
#au-header-alt .menu-button:hover { background-color: var(--au-primary-lighter); }
/* collapse behaviour (minimal fallback if bootstrap css absent) */
#au-header-alt .collapse:not(.show) { display: none; }
#au-header-alt .collapse.show { display: block; }
/* Tailwind's .collapse utility means `visibility: collapse` — it hides
   the whole nav panel on pages that load the Tailwind CDN. Re-assert. */
#au-header-alt .collapse { visibility: visible; }
/* Main bar — white, logo + nav */
#au-header-alt .main-menu-container {
  width: 100%; /* don't shrink-to-content inside the column-flex .main-menu */
  max-width: var(--au-max-width); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  min-height: 104px;
}
#au-header-alt .main-navigation {
  display: flex; gap: 48px; align-items: center; flex-wrap: wrap;
}
#au-header-alt .main-navigation > a,
#au-header-alt .nav-dropdown > a {
  color: var(--au-primary-default); text-decoration: none;
  font-family: var(--au-font-heading);
  font-weight: 500; font-size: 1.3rem; line-height: 1.5rem;
  display: inline-flex; align-items: center; gap: 6px;
}
#au-header-alt .main-navigation > a:hover,
#au-header-alt .nav-dropdown > a:hover { color: var(--au-primary-default); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
/* Products dropdown */
#au-header-alt .nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
#au-header-alt .nav-dropdown .chevron { transition: transform .15s; }
#au-header-alt .nav-dropdown:hover .chevron { transform: rotate(180deg); }
#au-header-alt .dropdown-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; min-width: 220px; padding: 8px 0;
  box-shadow: 0 10px 30px rgba(8, 6, 32, .25); border-top: 3px solid var(--au-secondary-default);
  z-index: 60;
}
#au-header-alt .nav-dropdown:hover .dropdown-menu,
#au-header-alt .nav-dropdown:focus-within .dropdown-menu { display: block; }
#au-header-alt .dropdown-menu a {
  display: block; padding: 10px 20px; color: var(--au-primary-default);
  text-decoration: none; white-space: nowrap;
  font-family: var(--au-font-heading);
  font-weight: 500; font-size: 1.15rem;
}
#au-header-alt .dropdown-menu a:hover { background: var(--au-secondary-lighter); color: var(--au-secondary-default); }
/* Cart */
#au-header-alt .cart-link { position: relative; color: var(--au-primary-default); display: inline-flex; }
#au-header-alt .cart-link:hover { color: var(--au-secondary-default); }
#au-header-alt .cart-badge {
  position: absolute; top: -9px; right: -10px;
  background: var(--au-cart-badge); color: #fff;
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px;
  border-radius: 999px; font-size: .7rem; font-weight: 700; text-align: center;
}
/* Utility strip — navy, white serif links */
#au-header-alt .utility-menu { background: var(--au-primary-default); }
#au-header-alt .utility-menu-container { max-width: var(--au-max-width); margin: 0 auto; padding: 16px 24px; }
#au-header-alt .utility-menu ul {
  list-style: none; display: flex; gap: 56px; margin: 0; padding: 0;
  justify-content: flex-end; flex-wrap: wrap;
}
#au-header-alt .utility-menu a {
  color: #fff; text-decoration: none; font-size: 1.05rem;
  font-family: var(--au-font-body);
}
#au-header-alt .utility-menu a:hover { text-decoration: underline; }
/* Desktop: panel always open; utility strip on top; mobile bar hidden */
@media (min-width: 901px) {
  #au-header-alt .mobile-menu-control { display: none; }
  #au-header-alt .collapse:not(.show) { display: block !important; }
  #au-header-alt .main-menu { display: flex; flex-direction: column-reverse; }
}
/* Mobile: stacked nav panel under the white bar */
@media (max-width: 900px) {
  #au-header-alt .main-menu-container { min-height: 0; padding: 0 24px; }
  #au-header-alt .main-menu-container .au-logo { display: none; } /* logo already in top bar */
  #au-header-alt .main-navigation {
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 16px;
  }
  #au-header-alt .main-navigation > a,
  #au-header-alt .nav-dropdown > a,
  #au-header-alt .cart-link { padding: 10px 4px; }
  #au-header-alt .nav-dropdown { flex-direction: column; align-items: flex-start; align-self: auto; }
  #au-header-alt .dropdown-menu { position: static; transform: none; display: block; box-shadow: none; background: transparent; border-top: 0; padding: 0 0 0 18px; }
  #au-header-alt .dropdown-menu a { color: var(--au-primary-light); padding: 8px 0; }
  #au-header-alt .dropdown-menu a:hover { background: transparent; color: var(--au-secondary-default); }
  #au-header-alt .utility-menu-container { padding: 12px 24px; }
  #au-header-alt .utility-menu ul { gap: 24px; justify-content: flex-start; }
}

/* ============================================================
   Hero
   ============================================================ */
.au-hero {
  background: linear-gradient(120deg, var(--au-primary-darker) 0%, var(--au-primary-default) 55%, var(--au-secondary-dark) 100%);
  color: #fff;
}
.au-hero-inner {
  max-width: var(--au-max-width); margin: 0 auto; padding: 88px 24px 96px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center;
}
.au-hero-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); font-size: .85rem; color: #dfe3ff;
}
.au-hero-badge a { color: #fff; font-weight: 600; text-decoration: underline; }
.au-hero h1 { font-size: clamp(2.625rem, 5vw, 3.625rem); line-height: 1.07; margin: 26px 0 18px; } /* 42–58px per AU type scale */
.au-hero .au-hero-sub {
  font-family: var(--au-font-body); font-weight: var(--au-font-weight-medium);
  font-size: 1.2rem; line-height: 1.55; color: #fff; margin: 0 0 20px; max-width: 36ch;
}
.au-hero .au-hero-sub a { color: #fff; font-weight: var(--au-font-weight-bold); text-decoration: underline; text-underline-offset: 3px; }
.au-hero .au-hero-lead { font-size: 1rem; color: #c9cdf0; line-height: 1.75; margin: 0 0 36px; max-width: 48ch; }
.au-hero-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.au-hero-cta .more { color: #fff; font-weight: 600; text-decoration: none; }
.au-hero-cta .more:hover { text-decoration: underline; }

/* Creative brand mark (right column of the hero): the reversed AU logo
   floating on the gradient over two soft, slowly-drifting glow orbs in the
   AU palette — no card frame. Pure CSS + one SVG. */
.au-hero-art { display: flex; justify-content: flex-end; }
.au-hero-panel {
  position: relative; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 48px 24px;
}
.au-hero-panel img { position: relative; z-index: 2; width: 100%; height: auto; }
.au-hero-kicker {
  position: relative; z-index: 2; text-align: center; max-width: 26ch;
  font-family: var(--au-font-heading); font-size: .92rem; letter-spacing: .08em;
  text-transform: uppercase; color: #cfd4ff;
}
.au-hero-grid { display: none; }
/* floating accent orbs */
.au-hero-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(50px); opacity: .5; }
.au-hero-orb-1 {
  width: 260px; height: 260px; top: -30px; right: 0;
  background: radial-gradient(circle at 30% 30%, var(--au-secondary-default), transparent 70%);
  animation: au-float-1 16s ease-in-out infinite;
}
.au-hero-orb-2 {
  width: 230px; height: 230px; bottom: -40px; left: 0;
  background: radial-gradient(circle at 60% 40%, var(--au-accent-default, #ff7a59), transparent 70%);
  animation: au-float-2 19s ease-in-out infinite;
}
@keyframes au-float-1 { 50% { transform: translate(-22px, 26px); } }
@keyframes au-float-2 { 50% { transform: translate(24px, -18px); } }
@media (prefers-reduced-motion: reduce) {
  .au-hero-orb { animation: none; }
}
@media (max-width: 900px) {
  .au-hero-inner { grid-template-columns: 1fr; padding: 56px 24px; }
  .au-hero-art { display: none; }
}

/* ============================================================
   Products band + grid
   ============================================================ */
/* Banner — section heading band: same surface as the products grid
   below so heading + cards read as one section */
.au-band { background: var(--au-primary-lighter); }
.au-band-inner {
  max-width: var(--au-max-width); margin: 0 auto; padding: 64px 24px 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.au-band .kicker {
  font-family: var(--au-font-heading); font-weight: var(--au-font-weight-medium);
  color: var(--au-secondary-default); font-size: 1.125rem;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px;
}
.au-band h2 { margin: 0; color: var(--au-primary-default); }
.au-band h2::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--au-accent-default); margin-top: 14px;
}
.au-band p.note {
  color: var(--au-neutral-700); margin: 0; max-width: 46ch;
  font-size: var(--au-body-small-size); line-height: var(--au-body-small-line);
  text-align: right;
}
.au-band p.note a { color: var(--au-secondary-default); }
@media (max-width: 900px) {
  .au-band-inner { padding: 40px 24px; }
  .au-band p.note { text-align: left; }
}

/* ---- Products grid — uniform "icon + HTML wordmark" lockup ----
   Every card's logo is a fixed-height icon mark + an HTML wordmark driven
   by shared classes, so all logo names render in ONE font/size/weight and
   every sub-line shares one style — consistent regardless of the product. */
.au-products {
  /* mapped to the Adelaide University brand tokens so the grid matches the
     header/hero/footer: National-2-Condensed names + titles, Roboto Serif
     body, navy ink (au-primary) and blue accent (au-secondary). */
  --pg-ink: var(--au-primary-default); --pg-body: var(--au-neutral-800); --pg-muted: var(--au-neutral-500);
  --pg-accent: var(--au-secondary-default); --pg-line: var(--au-neutral-200);
  --pg-serif: var(--au-font-body);          /* Roboto Serif — body copy */
  --pg-head:  var(--au-font-heading-bold);  /* National-2-Condensed Bold — names/titles */
  --pg-label: var(--au-font-heading);       /* National-2-Condensed — sub-lines/labels */
  background: var(--au-primary-lighter); padding: 56px 0 88px;
}
.au-products-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.au-card {
  background: #fff; border: 1px solid var(--pg-line); border-radius: 4px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.au-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(8,6,32,.28); border-color: var(--au-neutral-300, #cfd0d8); }
/* Every logo lives in an identical zone */
.au-logo-zone {
  height: 120px; display: flex; align-items: center; justify-content: center;
  padding: 0 28px; text-decoration: none;
}
.au-logo { display: flex; align-items: center; gap: 12px; }
.au-logo-icon { height: 38px; width: auto; flex: 0 0 auto; display: block; }
.au-logo-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.au-logo-name {
  font-family: var(--pg-head) !important; font-size: 1.2rem; font-weight: var(--au-font-weight-bold);
  color: var(--pg-ink); white-space: nowrap; letter-spacing: 0; line-height: 1.05;
}
.au-logo-name .accent { color: var(--pg-accent); }
.au-logo-sub {
  font-family: var(--pg-label) !important; font-size: .68rem; font-weight: var(--au-font-weight-medium);
  letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted);
  margin-top: 3px; white-space: nowrap;
}
/* Body — condensed-bold title (AU heading), serif description, "More →" link */
.au-card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.au-card-title {
  display: block; margin: 0 0 10px; color: var(--pg-ink);
  font-family: var(--pg-head) !important; font-weight: var(--au-font-weight-bold);
  font-size: 1.4rem; line-height: 1.2; letter-spacing: 0;
}
.au-card:hover .au-card-title { color: var(--pg-accent); }
.au-card-text {
  margin: 0 0 22px; font-family: var(--pg-serif); font-size: .9375rem; line-height: 1.55;
  color: var(--pg-body); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.au-card-more {
  margin-top: auto; align-self: flex-start; font-family: var(--pg-label);
  font-size: 1rem; font-weight: var(--au-font-weight-medium); color: var(--pg-accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.au-card-more .au-arrow { transition: transform .18s ease; }
.au-card:hover .au-card-more .au-arrow, .au-card-more:hover .au-arrow { transform: translateX(4px); }
@media (max-width: 900px) { .au-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .au-products-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Program section
   ============================================================ */
.au-program { background: var(--au-primary-dark); color: #fff; padding: 72px 0; }
.au-program-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.au-program h2 { margin: 0 0 18px; } /* token H2 scale */
.au-program p { color: #c9cdf0; font-size: 1.05rem; text-align: center; }

/* ============================================================
   Footer (#auFooter) — Adelaide global footer styling
   ============================================================ */
#auFooter { font-size: 1rem; color: var(--au-primary-default); }
/* kill the bootstrap .container-fluid gutter so the navy band is full-bleed */
#auFooter.container-fluid { padding-left: 0; padding-right: 0; }
#auFooter a { text-decoration: none; color: inherit; }
#auFooter .section-1 { background: #fff; padding: 48px 24px; border-top: 1px solid #e7e7ee; }
#auFooter .section-1 > .top-section {
  display: flex; gap: 48px; max-width: var(--au-max-width); margin: 0 auto; flex-wrap: wrap;
}
#auFooter .logo-container .au-logo img { height: 52px; width: auto; }
#auFooter .logo-container { flex: 1 1 420px; }
/* Contact-us block — modelled on the AIML website footer: big heading,
   bold institute sub-heading, icon rows (Location / Phone / Email),
   all in brand navy, with social pills beneath. */
#auFooter .au-contact { margin-top: 24px; color: var(--au-primary-default); }
#auFooter .au-contact .au-contact-heading {
  margin: 0 0 14px; color: var(--au-primary-default);
  font-family: var(--au-font-heading-bold); font-weight: var(--au-font-weight-bold);
  font-size: 2rem; line-height: 1.1;
}
#auFooter .au-contact .au-contact-name {
  margin: 0 0 18px; color: var(--au-primary-default);
  font-family: var(--au-font-heading-bold); font-weight: var(--au-font-weight-bold);
  font-size: 1.4rem; line-height: 1.2;
}
#auFooter .au-contact address {
  font-style: normal; font-family: var(--au-font-body);
  font-size: 1rem; line-height: 1.6; color: var(--au-primary-default);
}
#auFooter .au-contact-row {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px;
}
#auFooter .au-contact-ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--au-primary-default); }
#auFooter .au-contact-label {
  display: inline; font-family: var(--au-font-heading); font-weight: 700; color: var(--au-primary-default);
}
#auFooter .au-contact-row > div > .au-contact-label { display: block; margin-bottom: 2px; }
#auFooter .au-contact a { color: var(--au-secondary-default); text-decoration: underline; text-underline-offset: 3px; }
#auFooter .au-contact a:hover { color: var(--au-secondary-dark); }
#auFooter .au-social { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
#auFooter .au-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: var(--au-primary-default);
  transition: background-color .2s;
}
#auFooter .au-social a svg { width: 18px; height: 18px; }
#auFooter .au-social a:hover { background: var(--au-secondary-default); }
#auFooter .link-container {
  flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 40px; align-content: start;
}
#auFooter .link-column-heading {
  margin: 0 0 12px; color: var(--au-primary-default);
  font-family: var(--au-font-heading);
  font-weight: 500; font-size: 1.25rem;
}
#auFooter .footer-link {
  display: block; padding: 6px 0; font-weight: 400; font-size: 1.05rem;
  font-family: var(--au-font-body);
}
#auFooter .footer-link:hover { color: var(--au-primary-default); text-decoration: underline; text-underline-offset: 4px; }
#auFooter .section-1 > .bottom-section {
  max-width: var(--au-max-width); margin: 40px auto 0; border-top: 1px solid #e7e7ee; padding-top: 24px;
}
#auFooter .section-1 > .bottom-section p {
  margin: 0; font-size: .95rem;
  font-family: var(--au-font-body);
}
#auFooter .section-1 > .bottom-section a { color: var(--au-primary-default); text-decoration: underline; }
#auFooter .section-1 > .bottom-section a:hover { color: var(--au-secondary-default); }
#auFooter .section-2 { color: #fff; padding: 40px 24px; }
#auFooter .section-2 > .top-section {
  display: flex; gap: 48px; max-width: var(--au-max-width); margin: 0 auto;
  justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
}
#auFooter .acknowledgement-container { flex: 1 1 600px; max-width: 820px; font-size: .95rem; line-height: 1.7; }
#auFooter .section-2 .logo-container img { height: 72px; width: auto; }
#auFooter .section-2 > .bottom-section {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--au-max-width); margin: 32px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.2);
}
#auFooter .utility-container { display: flex; gap: 28px; flex-wrap: wrap; font-size: .85rem; }
#auFooter .utility-container a { color: #fff; }
#auFooter .utility-container a:hover { text-decoration: underline; }
#auFooter .social-container { display: flex; gap: 18px; align-items: center; }
#auFooter .social-container a { color: #fff; display: inline-flex; }
#auFooter .social-icon { height: 24px; width: 24px; fill: currentColor; opacity: .9; }
#auFooter .social-container a:hover { opacity: 1; }
#auFooter .social-container a:hover .social-icon { opacity: 1; }

/* ============================================================
   Product detail page — page-level nav (Home / Next Product)
   Give it room so it never sits flush on the footer, and centre
   it within the page width instead of the stray w-4/5 box.
   ============================================================ */
.product-nav {
  display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap;
  max-width: var(--au-max-width); margin: 0 auto;
  padding: 0 24px 72px;
}
/* anchor target for the hero "Learn more" button — keep a little
   breathing room so the heading isn't flush to the viewport top */
#product-detail { scroll-margin-top: 24px; }

/* FAQ / Support content: separate consecutive paragraphs so answers
   that run to several paragraphs read as distinct blocks rather than
   one wall of text. Targets adjacent <p> siblings inside the page's
   main white section. */
section.bg-white p + p { margin-top: 1.25rem !important; }

/* ============================================================
   Legacy page alignment — FAQ / Support / About / Privacy /
   Legals / product pages still use Tailwind utility classes.
   Re-map their grey/purple palette onto the AU tokens so every
   page follows the same design system. (!important beats the
   runtime-injected Tailwind CDN styles.)
   ============================================================ */
/* greys -> brand neutrals/navy. Product-page body copy follows the
   Adelaide website, which sets running text in primary navy (#140F50)
   rather than the neutral-800 used elsewhere. */
.text-gray-900 { color: var(--au-primary-default) !important; }
.text-gray-700 { color: var(--au-primary-default) !important; }
.text-gray-600 { color: var(--au-primary-default) !important; }
.bg-gray-50    { background-color: var(--au-neutral-50) !important; }
.bg-gray-900   { background-color: var(--au-primary-dark) !important; }
/* purples -> brand secondary blue */
.text-purple-500, .text-purple-600 { color: var(--au-secondary-default) !important; }
.text-purple-700, .text-purple-900 { color: var(--au-secondary-dark) !important; }
.hover\:text-purple-900:hover { color: var(--au-secondary-darker) !important; }
.bg-purple-500 { background-color: var(--au-secondary-default) !important; }
.hover\:bg-purple-400:hover { background-color: var(--au-secondary-dark) !important; }
.bg-purple-100 { background-color: var(--au-secondary-lighter) !important; }
.hover\:bg-purple-100:hover { background-color: var(--au-secondary-lighter) !important; }
.focus-visible\:outline-purple-400:focus-visible { outline-color: var(--au-secondary-light) !important; }